nnbp_ui/src/views/mb/detection/index.vue

<template>
  <div>
    <van-nav-bar
      title="检测计划"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="body">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
      </van-dropdown-menu>

      <div class="listcontent" :style="`height:${bodyheight}px`">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div
              style="padding: 10px 10px; padding-bottom: 0"
              v-for="item in detectionlist"
            >
              <div class="item">
                <div>
                  <div class="header">
                    <div>
                      计划名称:{{
                        alldevices.filter((i) => i.id === item.facilitiesId)[0]
                          ?.roadName ?? "-"
                      }}检测计划
                    </div>
                    <div class="time">{{ item.detectionTime }}</div>
                  </div>
                  <div class="body">
                    <div class="status">
                      {{
                        detection_status.filter(
                          (i) =>
                            i.value.toString() ===
                            (item.status ?? "").toString()
                        )[0]?.label ?? "-"
                      }}
                    </div>

                    <van-row>
                      <van-col span="24"
                        ><div>
                          检测类型:{{
                            detection_type.filter(
                              (i) =>
                                i.value.toString() ===
                                item.detectionType.toString()
                            )[0]?.label ?? "-"
                          }}
                        </div></van-col
                      >
                      <van-col span="8"> <div>计划年:{{item.detectionYear}}</div></van-col>
                      <van-col span="8"><div>计划月:{{item.detectionMonth}}</div></van-col>
                      <van-col span="8"><div>计划周:{{item.detectionWeek}}</div></van-col>
                      <van-col span="24"
                        ><div>
                          设施起止点:
                          {{
                            alldevices.filter(
                              (i) => i.id === item.facilitiesId
                            )[0]?.addrFrom
                          }}
                          -
                          {{
                            alldevices.filter(
                              (i) => i.id === item.facilitiesId
                            )[0]?.addrEnd
                          }}
                        </div></van-col
                      >
                    </van-row>
                  </div>
                </div>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineComponent, ref, onMounted, watch, computed } from "vue";
import { useDict } from "@/utils/dict";
import router from "../../../router";
import { listFacilities } from "@/api/system/facilities";
import {
  listDetection,
  getDetection,
  delDetection,
  addDetection,
  updateDetection,
} from "@/api/system/detection";

const detectionlist = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const { detection_status, detection_type } = useDict(
  "detection_status",
  "detection_type"
);

const bodyheight = ref(0);
bodyheight.value = document.body.clientHeight - 48 - 46;
const value1 = ref(0);
const value2 = ref("0");
const option1 = [
  { text: "我的", value: 0 },
  { text: "全部", value: 1 },
];
const option2 = computed(() => {
  return [{ text: "全部", value: "0" }].concat(
    detection_status.value.map((i) => {
      return { text: i.label, value: i.value };
    })
  );
});
const alldevices = ref([]);
listFacilities().then((res) => {
  alldevices.value = res.rows;
});

const pagec = ref(1);
const onLoad = () => {
  if (refreshing.value) {
    detectionlist.value = [];
    refreshing.value = false;
    pagec.value = 1;
  }
  listDetection({ pageSize: 10, pageNum: pagec.value++ }).then((res) => {
    // finished.value = true;
    loading.value = false;
    detectionlist.value = detectionlist.value.concat(res.rows);
    if (res.total <= detectionlist.value.length) {
      finished.value = true;
    }
  });
  console.log("----");
};

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;
  loading.value = true;
  refreshing.value = true;
  onLoad();
};

const onClickLeft = () => {
  router.back();
};
</script>

<style lang="scss">
body {
  position: fixed;
  width: 100%;
  top: -1px;
}

.listcontent {
  overflow-y: auto;

  .item {
    background: #fff;
    border: 1px solid rgba(209, 217, 221,0.4);
    padding: 10px 15px;
    font-size: 10px;
    border-radius: 5px;
    .header {
      color: #3d6dc5;
      font-weight: bold;
      position: relative;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(209, 217, 221,0.4);
      .time {
        position: absolute;
        right: 0;
        top: 0;
        color: #283247;
        opacity: 0.7;
        font-weight: 400;
      }
    }
    .body {
      padding-top: 10px;
      padding-bottom: 10px;
      position: relative;
      color: #283247;
      opacity: 0.8;
      .status {
        position: absolute;
        top: 10px;
        color: #dc2828;
        right: 0px;
        font-weight: bold;
      }
      .van-col {
        margin: 3px 0;
      }
    }
  }
}
</style>