fix

src/views/mb/detection/index.vue

@@ -1,29 +1,216 @@
 <template>
   <div>
-     <van-nav-bar
-  title="检测计划"
-  left-text="返回"
-  left-arrow
-  @click-left="onClickLeft"
-/>
+    <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 lang="ts" setup>
-import router from "../../../router"
 
+<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>
-body{
-   position:fixed;
-   width:100%;
-   top:-1px;
+<style lang="scss">
+body {
+  position: fixed;
+  width: 100%;
+  top: -1px;
 }
 
+.listcontent {
+  overflow-y: auto;
+
+  .item {
+    background: #fff;
+    border: 1px solid #d1d9dd;
+    padding: 10px 15px;
+    font-size: 10px;
+    border-radius: 5px;
+    .header {
+      color: #3d6dc5;
+      font-weight: bold;
+      position: relative;
+      padding-bottom: 8px;
+      border-bottom: 1px solid #d1d9dd;
+      .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>

src/views/mb/maintain/index.vue

@@ -1,28 +1,189 @@
 <template>
   <div>
-     <van-nav-bar
-  title="养护计划"
-  left-text="返回"
-  left-arrow
-  @click-left="onClickLeft"
-/>
+    <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 maintainlist"
+            >
+              <div class="item">
+                <div>
+                  <div class="header">
+                    <div>计划名称:{{  alldevices.filter((i) => i.id === item.facilitiesId)[0]
+                  ?.roadName ?? "-" }}养护计划</div>
+                    <div class="time">{{ item.maintainTime }}</div>
+                  </div>
+                  <div class="body">
+                    <div class="status">{{maintain_status.filter(
+                  (i) => i.value.toString() === (item.status??"").toString()
+                )[0]?.label ?? "-"}}</div>
+
+                    <van-row>
+                      <van-col span="24"
+                        ><div>
+                          计划类型:{{
+                            maintain_type.filter(
+                              (i) =>
+                                i.value.toString() ===
+                                item.maintainType.toString()
+                            )[0]?.label ?? "-"
+                          }}
+                        </div></van-col
+                      >
+                      <van-col span="12"> <div>计划年:{{item.maintainYear}}</div></van-col>
+                      <van-col span="12"><div>计划月:{{item.maintainMonth}}</div></van-col>
+                      <van-col span="24"
+                        ><div>养护单位: {{ item.maintainUnit }}</div></van-col
+                      >
+                    </van-row>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </van-list>
+        </van-pull-refresh>
+      </div>
+    </div>
   </div>
 </template>
-<script lang="ts" setup>
-import router from "../../../router"
 
+<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 {
+  listMaintain,
+  getMaintain,
+  delMaintain,
+  addMaintain,
+  updateMaintain,
+} from "@/api/system/maintain";
+
+const maintainlist = ref([]);
+const loading = ref(false);
+const finished = ref(false);
+const refreshing = ref(false);
+
+const { maintain_status,maintain_type } = useDict(
+  "maintain_status","maintain_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(maintain_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) {
+    maintainlist.value = [];
+    refreshing.value = false;
+    pagec.value = 1;
+  }
+  listMaintain({ pageSize: 10, pageNum: pagec.value++ }).then((res) => {
+    // finished.value = true;
+    loading.value = false;
+    maintainlist.value = maintainlist.value.concat(res.rows);
+    if (res.total <= maintainlist.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;
 }
 
-</script>
+.listcontent {
+  overflow-y: auto;
 
-<style>
-body{
-   position:fixed;
-   width:100%;
-   top:-1px;
+  .item {
+    background: #fff;
+    border: 1px solid #d1d9dd;
+    padding: 10px 15px;
+    font-size: 10px;
+    border-radius: 5px;
+    .header {
+      color: #3d6dc5;
+      font-weight: bold;
+      position: relative;
+      padding-bottom: 8px;
+      border-bottom: 1px solid #d1d9dd;
+      .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>