fix：修改养护工单

src/views/xj/document/maintenance-notice/components/disease-dialog.vue

@@ -0,0 +1,533 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2025-02-10 13:46:51
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2025-02-11 17:11:13
+ * @FilePath: \znxjxt-ui\src\views\xj\document\maintenance-notice\components\disease-dialog.vue
+ * @Description: 生成通知单-新增弹窗-选择病害
+-->
+
+<template>
+  <div class="content">
+    <!-- 列表查询条件 -->
+    <el-form ref="diseaseQueryForm" :model="diseaseForm" :rules="diseaseFormRules" size="small" :inline="true"
+      label-width="100px">
+      <el-form-item label="道路名称" prop="segmentId">
+        <el-select v-model="diseaseForm.segmentId" placeholder="请选择路段" filterable clearable>
+          <el-option v-for="item in segmentList" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="采集时间" prop="dateTime">
+        <el-date-picker v-model="dateTime" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
+          format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable />
+      </el-form-item>
+      <el-form-item label="病害类型" prop="paramsDefectType">
+        <el-cascader v-model="paramsDefectType" :options="tableDefect" :props="{
+          checkStrictly: true,
+          emitPath: true,
+          children: 'subTypes',
+        }" clearable></el-cascader>
+      </el-form-item>
+      <el-form-item label="上下行" prop="inspectDirection">
+        <el-select v-model="diseaseForm.inspectDirection" placeholder="请选择" clearable>
+          <el-option label="上行" value="0" />
+          <el-option label="下行" value="1" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="公里桩" prop="stakeRange">
+        <el-input v-model="diseaseForm.stakeStart" placeholder="起始公里桩" style="width: 10rem" clearable />
+        <span style="margin: 0 5px">-</span>
+        <el-input v-model="diseaseForm.stakeEnd" placeholder="终止公里桩" style="width: 10rem" clearable />
+        <el-tooltip class="item" effect="dark" content="格式为K0000+000" placement="top">
+          <i class="el-icon-info"></i>
+        </el-tooltip>
+      </el-form-item>
+      <el-form-item label="病害id" prop="id">
+        <el-input v-model="diseaseForm.id" placeholder="请填写病害id" clearable />
+      </el-form-item>
+      <el-form-item label="病害长度" prop="lengthRange">
+        <el-input-number v-model="diseaseForm.minLen" controls-position="right" placeholder="最小长度"
+          :min="0"></el-input-number>
+        <span style="margin: 0 5px">-</span>
+        <el-input-number v-model="diseaseForm.maxLen" controls-position="right" placeholder="最大长度"
+          :min="0"></el-input-number>
+      </el-form-item>
+      <el-form-item label="快照id" prop="snapshotId">
+        <el-input v-model="diseaseForm.snapshotId" placeholder="请填写快照id" clearable />
+      </el-form-item>
+      <el-form-item label="病害面积" prop="areaRange">
+        <el-input-number v-model="diseaseForm.minArea" controls-position="right" placeholder="最小面积"
+          :min="0"></el-input-number>
+        <span style="margin: 0 5px">-</span>
+        <el-input-number v-model="diseaseForm.maxArea" controls-position="right" placeholder="最大面积"
+          :min="0"></el-input-number>
+      </el-form-item>
+      <el-form-item label="巡检任务" prop="taskId">
+        <el-select v-model="diseaseForm.taskId" placeholder="请选择巡检任务" filterable clearable>
+          <el-option v-for="item in taskList" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="是否已确认" prop="confirmStatus">
+        <el-select v-model="diseaseForm.confirmStatus" placeholder="请选择" clearable>
+          <el-option label="确认" value="1" />
+          <el-option label="未确认" value="2" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <!-- 列表 -->
+    <el-table ref="diseaseTable" v-loading="loading" :data="diseaseList" :row-key="getRowKey"
+      @selection-change="handleSelectionChange" height="33rem" style="width: 100%">
+      <el-table-column type="selection" :reserve-selection="true" width="55" align="center" />
+      <el-table-column label="路段名称" align="center" prop="segmentName" />
+      <el-table-column label="采集时间" align="center" prop="createdTimeLocal">
+      </el-table-column>
+      <el-table-column label="病害类型" align="center" prop="defectTypeName">
+      </el-table-column>
+      <!-- <el-table-column label="病害状态" align="center" prop="state">
+          <template slot-scope="scope">
+            <span>{{ filterState(scope.row.state) }}</span>
+          </template>
+</el-table-column> -->
+      <el-table-column label="开始桩号" align="center" prop="stakeStart" />
+      <el-table-column label="结束桩号" align="center" prop="stakeEnd" />
+      <el-table-column label="病害图片" align="center" prop="media">
+        <template slot-scope="scope">
+          <img @click="showScreenImg(scope.row)" height="50" :src="scope.row.mediaUrl" />
+        </template>
+      </el-table-column>
+      <el-table-column label="病害长度" align="center" prop="targetLen">
+        <template slot-scope="scope">
+          {{ scope.row.targetLen * 1 <= 0 ? "" : `${scope.row.targetLen}米` }} </template>
+      </el-table-column>
+      <el-table-column label="病害面积" align="center" prop="targetArea" />
+      <el-table-column label="道路方向" align="center" prop="inspectDirection">
+        <template slot-scope="scope">
+          <span>{{
+            scope.row.inspectDirection === "0" ? "上行" : "下行"
+            }}</span>
+        </template>
+      </el-table-column>
+
+    </el-table>
+    <!-- 分页组件 -->
+    <div class="pagination-part">
+      <el-pagination background :current-page.sync="pagination.page" @current-change="handleCurrentChange"
+        :page-sizes="[10, 20, 30, 40]" :page-size.sync="pagination.size" @size-change="handleSizeChange"
+        layout="total, sizes, prev, pager, next, jumper" :total="tableTotal">
+      </el-pagination>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="cancel">取 消</el-button>
+    </div>
+    <!-- 查看图片大图 -->
+    <el-dialog title="查看图片" :visible.sync="showImageDialog" width="85rem" append-to-body destroy-on-close
+      @close="imgCancel">
+      <div class="image-container" ref="imageContainer">
+        <img :src="currentImageItem.mediaUrl" alt="Main Image" ref="mainImage" @load="updateRects" />
+        <div v-for="(rect, index) in rects" :key="index" class="rect-overlay" :style="getRectStyle(rect)"></div>
+        <div class="rect-image">
+          采集时间:
+          {{ new Date(currentImageItem.createdTime).toLocaleString() }}
+          起始桩号： {{ currentImageItem.stakeStart || "暂无数据" }} 终止桩号：
+          {{ currentImageItem.stakeEnd || "暂无数据" }}
+          病害类型：
+          {{ currentImageItem.defectTypeName || "暂无数据" }}
+          病害面积：{{ currentImageItem.targetArea }}平方米 病害长度：{{
+            currentImageItem.targetLen * 1 <= 0 ? "暂无数据" : `${currentImageItem.targetLen}米` }} </div>
+        </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getMaintenanceNoticeList, } from "@/api/xj/document";
+
+export default {
+  name: "DiseaseDialog",
+  props: {
+    segmentList: {
+      type: Array,
+      default: () => [],
+    },
+    // 病害类型下拉
+    tableDefect: {
+      type: Array,
+      default: () => []
+    },
+    checkedDiseaseList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      // 传接口查询条件
+      searchForm: {},
+      // 病害列表查询条件
+      diseaseForm: {
+        segmentId: "",
+        defectType: "",
+        classType: "",
+        taskId: "",
+        state: "",
+        inspectDirection: "",
+        stakeStart: "",
+        stakeEnd: "",
+        warningFlag: null,
+        minLen: undefined,
+        maxLen: undefined,
+        minArea: undefined,
+        maxArea: undefined,
+        confirmStatus: "",
+        id: "",
+        snapshotId: "",
+        taskId: "",
+      },
+      // 表单校验
+      diseaseFormRules: {
+        stakeRange: [{ required: false, message: "请输入桩号", trigger: "blur" }, {
+          trigger: 'blur',
+          validator: (rules, value, callback) => {
+            const start = this.diseaseForm.stakeStart;
+            const end = this.diseaseForm.stakeEnd;
+            if (start) {
+              const phonereg = /^K\d{4}\+\d{3}$/;
+              if (!phonereg.test(start)) {
+                callback(new Error("请按照K0000+000格式进行填写"))
+              } else {
+                callback()
+              }
+            } else if (end) {
+              const phonereg = /^K\d{4}\+\d{3}$/;
+              if (!phonereg.test(end)) {
+                callback(new Error("请按照K0000+000格式进行填写"))
+              } else {
+                callback()
+              }
+            } else {
+              callback()
+            }
+          },
+        }]
+      },
+      // 采集时间绑定
+      dateTime: [],
+      // 病害类型级联下拉绑定
+      paramsDefectType: [],
+      // 巡检任务下拉数据
+      taskList: [],
+      // 病害列表数据
+      diseaseList: [],
+      // 列表加载状态
+      loading: false,
+      // 列表选中数据
+      checkList: [],
+      // 分页-列表总数
+      tableTotal: 0,
+      // 分页-页数页码
+      pagination: {
+        page: 1,
+        size: 10,
+      },
+
+      // 查看图片大图弹窗显隐控制
+      showImageDialog: false,
+      // 查看大图片路径
+      currentImageItem: {},
+      // 图片病害位置信息
+      rects: [],
+    }
+  },
+  mounted() {
+    this.getDiseaseList();
+  },
+  methods: {
+    /**
+     * @description: 点击查询事件
+     * @param {*}
+     * @return {*}
+     */
+    handleQuery() {
+      this.$refs["diseaseQueryForm"].validate((valid) => {
+        if (valid) {
+          this.diseaseForm.classType = this.paramsDefectType
+            ? this.paramsDefectType[0]
+            : "";
+          this.diseaseForm.defectType = this.paramsDefectType
+            ? this.paramsDefectType.length > 1
+              ? this.paramsDefectType[1]
+              : ""
+            : "";
+          this.searchForm = JSON.parse(JSON.stringify(this.diseaseForm));
+          this.pagination.page = 1;
+          this.getDiseaseList();
+        }
+      });
+    },
+
+    resetQuery() {
+      this.searchForm = {};
+      this.diseaseForm = {
+        segmentId: "",
+        defectType: "",
+        classType: "",
+        taskId: "",
+        state: "",
+        inspectDirection: "",
+        stakeStart: "",
+        stakeEnd: "",
+        warningFlag: null,
+        minLen: undefined,
+        maxLen: undefined,
+        minArea: undefined,
+        maxArea: undefined,
+        confirmStatus: "",
+        id: "",
+        snapshotId: "",
+        taskId: "",
+      };
+      this.paramsDefectType = [];
+      this.dateTime = [];
+      this.getDiseaseList();
+    },
+
+    /**
+     * @description: 获取病害列表数据
+     * @param {*}
+     * @return {*}
+     */
+    getDiseaseList() {
+      this.loading = true;
+      const params = {
+        ...this.searchForm,
+        ...this.pagination,
+        startTime: this.dateTime ? this.dateTime[0] : "",
+        endTime: this.dateTime ? this.dateTime[1] : "",
+        maintenanceStatus: "未生成",
+      };
+      getMaintenanceNoticeList(params)
+        .then(({ code, data }) => {
+          if (code === 200) {
+            // 切换列表选中状态
+            this.diseaseList = data.table.rows;
+            this.tableTotal = data.table.total;
+            this.loading = false;
+          }
+        }).finally(() => {
+          const ids = this.checkedDiseaseList.map(item => item.id)
+          this.diseaseList.forEach((item) => {
+            if (ids.includes(item.id)) {
+              this.$refs.diseaseTable.toggleRowSelection(item);
+            }
+          })
+            // this.checkedDiseaseList.forEach((item) => {
+            //   this.$refs.diseaseTable.toggleRowSelection(item);
+            // })
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+
+    /**
+     * @description: 列表行绑定id
+     * @param {*} row
+     * @return {*}
+     */
+    getRowKey(row) {
+      return row.snapshotId;
+    },
+
+    /**
+     * @description: 列表选择改变事件
+     * @param {*} selection
+     * @return {*}
+     */
+    handleSelectionChange(selection) {
+      this.checkList = selection;
+    },
+
+    /**
+     * @description: 切换分页
+     * @param {*} arg
+     * @return {*}
+     */
+    handleCurrentChange(arg) {
+      this.pagination.page = arg;
+      this.getDiseaseList();
+      // 切换列表选中状态
+      this.checkedDiseaseList.forEach((item) => {
+        this.$refs.diseaseTable.toggleRowSelection(item);
+      })
+    },
+
+    /**
+     * @description: 切换每条/页
+     * @param {*} arg
+     * @return {*}
+     */
+    handleSizeChange(arg) {
+      this.pagination.size = arg;
+      this.getDiseaseList();
+      // 切换列表选中状态
+      this.checkedDiseaseList.forEach((item) => {
+        this.$refs.diseaseTable.toggleRowSelection(item);
+      })
+    },
+
+    /**
+     * @description: 点击取消事件
+     * @param {*} arg
+     * @return {*}
+     */
+    cancel() {
+      this.$emit("cancel");
+    },
+
+    /**
+     * @description: 点击确定事件
+     * @param {*} arg
+     * @return {*}
+     */
+    submitForm() {
+      this.$emit("checkedList", this.checkList);
+    },
+
+
+    /**
+     * @description: 打开查看图片弹窗
+     * @param {*} item
+     * @return {*}
+     */
+    showScreenImg(item) {
+      this.currentImageItem = item;
+      this.showImageDialog = true;
+    },
+
+    /**
+     * @description: 图片位置信息获取
+     * @param {*} val
+     * @return {*}
+     */
+    updateRects() {
+      this.rects = [];
+      this.rectsItem = {};
+      const rects = this.currentImageItem?.rect?.split(",").map(Number) || [];
+      this.rects = [
+        {
+          left: rects[0],
+          top: rects[1],
+          width: rects[2],
+          height: rects[3],
+        },
+      ];
+    },
+
+    /**
+     * @description: 图片红框位置
+     * @param {*} left
+     * @param {*} top
+     * @param {*} width
+     * @param {*} height
+     * @return {*}
+     */
+    getRectStyle({ left, top, width, height }) {
+      const image = this.$refs.mainImage;
+      const container = this.$refs.imageContainer;
+      if (!image || !container) return {};
+
+      const scaleX = container.clientWidth / image.naturalWidth;
+      const scaleY = container.clientHeight / image.naturalHeight;
+      const scale = Math.min(scaleX, scaleY);
+
+      const renderedWidth = image.naturalWidth * scale;
+      const renderedHeight = image.naturalHeight * scale;
+
+      const offsetX = (container.clientWidth - renderedWidth) / 2;
+      const offsetY = (container.clientHeight - renderedHeight) / 2;
+
+      return {
+        position: "absolute",
+        left: `${left * scale + offsetX}px`,
+        top: `${top * scale + offsetY}px`,
+        width: `${width * scale}px`,
+        height: `${height * scale}px`,
+        border: "2px solid #FF0000",
+        boxSizing: "border-box",
+      };
+    },
+
+    /**
+     * @description: 关闭查看图片弹窗
+     * @param {*} val
+     * @return {*}
+     */
+    imgCancel() {
+      this.showImageDialog = false;
+      this.currentImageItem = {};
+      this.rects = [];
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+}
+
+/* 分页样式 */
+.pagination-part {
+  width: 100%;
+  display: flex;
+  padding-top: 1rem;
+  justify-content: flex-end;
+}
+
+/* 页脚 */
+.dialog-footer {
+  padding: 1rem 0;
+  display: flex;
+  justify-content: flex-end;
+}
+
+
+/* 查看大图弹窗 */
+.image-container {
+  position: relative;
+  width: 100%;
+  height: 80%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.image-container img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.rect-overlay {
+  position: absolute;
+  pointer-events: none;
+  border: 2px solid red;
+}
+
+// 图片信息
+.rect-image {
+  width: 90%;
+  position: absolute;
+  top: 0;
+  font-size: 1.2rem;
+  color: #ffffff;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+</style>

src/views/xj/document/maintenance-notice/components/view-dialog.vue

@@ -1,228 +0,0 @@
-<!--
- * @Author: SunTao 328867980@qq.com
- * @Date: 2024-11-26 15:49:28
- * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2025-01-03 10:42:24
- * @FilePath: \znxjxt-ui\src\views\xj\document\maintenance-notice\components\view-dialog.vue
- * @Description: 养护通知单查看弹窗
--->
-<template>
-  <div class="view-content">
-    <div class="view-title">高速公路道路养护作业通知单</div>
-    <!-- <div class="view-title-card">编号：{{ viewData.noticeNo || "" }}</div> -->
-    <div class="view-table">
-      <div class="view-table-top">
-        <div class="left-item">
-          <div class="left-item-content">
-            <div class="name">通知时间</div>
-            <div class="value">{{ viewData.issueDate || "" }}</div>
-          </div>
-          <div class="left-item-content">
-            <div class="name">作业完成时间</div>
-            <div class="value">{{ viewData.handleTime || "" }}</div>
-          </div>
-        </div>
-        <div class="left-item-title">地点</div>
-        <div class="left-item">
-          <div class="left-item-content">
-            <div class="name">里程桩号</div>
-            <div class="value">
-              {{ viewData.stakeStart || "" }}—{{ viewData.stakeEnd || "" }}
-            </div>
-          </div>
-          <div class="left-item-content">
-            <div class="name">位置</div>
-            <div class="value">{{ viewData.segmentName }}</div>
-          </div>
-        </div>
-      </div>
-      <!-- <div class="view-table-middle">养护作业项目</div>
-      <div class="view-table-content">
-        <div class="content-left-item">
-          <div class="name">序号</div>
-          <div class="value">内 容</div>
-        </div>
-        <fssm-scroll :showBar="false" style="max-height: 16rem">
-          <div
-            class="content-left-item"
-            v-for="(item, index) in viewData.taskDescription"
-            :key="`content-left-item-${index}`"
-          >
-            <div class="name">{{ index + 1 }}</div>
-            <div class="value">
-              <fssm-scroll>
-                {{ item }}
-              </fssm-scroll>
-            </div>
-          </div>
-        </fssm-scroll>
-      </div> -->
-      <div class="view-table-bottom">
-        <span>管理处道路养护工程师：{{ viewData.creator || "" }}</span>
-        <span>制表人：{{ viewData.creator || "" }}</span>
-        <span>养护单位项目负责人：{{ viewData.receiver || "" }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getMaintenanceNoticeById } from "@/api/xj/document";
-import fssmScroll from "@/components/scroll/fssm-scroll.vue";
-export default {
-  components: { fssmScroll },
-  name: "ViewDialog",
-  props: {
-    dialogItem: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      // 查看数据
-      viewData: {},
-    };
-  },
-  watch: {
-    dialogItem: {
-      handler(val) {
-        this.getNoticeById(val.id);
-      },
-      immediate: true,
-      deep: true,
-    },
-  },
-  methods: {
-    /**
-     * @description: 根据id查询养护通知单
-     * @param {*} id
-     * @return {*}
-     */
-     getNoticeById(id) {
-      getMaintenanceNoticeById({ id }).then(({ code, data }) => {
-        if (code === 200) {
-          this.viewData = data;
-        }
-      });
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-.view-content {
-  width: 100%;
-  height: 100%;
-
-  .view-title {
-    display: flex;
-    justify-content: center;
-    font-size: 1.5rem;
-    font-weight: bold;
-  }
-
-  .view-title-card {
-    display: flex;
-    justify-content: flex-end;
-    font-size: 1rem;
-  }
-}
-
-.view-table {
-  font-size: 1rem;
-
-  .view-table-top {
-    width: 100%;
-    height: 6rem;
-    display: flex;
-
-    .left-item {
-      width: 45%;
-      height: 100%;
-
-      .left-item-content {
-        width: 100%;
-        height: 50%;
-        display: flex;
-
-        > div {
-          border: 1px solid black;
-        }
-
-        .name {
-          width: 40%;
-          height: 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-
-        .value {
-          width: 60%;
-          height: 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-      }
-    }
-
-    .left-item-title {
-      width: 10%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border: 1px solid black;
-    }
-  }
-
-  .view-table-middle {
-    width: 100%;
-    height: 3rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border: 1px solid black;
-  }
-
-  .view-table-content {
-    width: 100%;
-    max-height: 20rem;
-
-    .content-left-item {
-      width: 100%;
-      height: 4rem;
-      display: flex;
-
-      .name {
-        width: 10%;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border: 1px solid black;
-      }
-
-      .value {
-        width: 90%;
-        height: 100%;
-        padding: 0.25rem 1rem;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border: 1px solid black;
-      }
-    }
-  }
-
-  .view-table-bottom {
-    width: 100%;
-    padding: 0 2rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-}
-</style>

src/views/xj/document/maintenance-notice/index.vue

@@ -2,179 +2,86 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-11-20 11:58:33
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2025-01-15 11:15:05
+ * @LastEditTime: 2025-02-11 17:12:32
  * @FilePath: \znxjxt-ui\src\views\xj\document\maintenance-notice\index.vue
  * @Description: 养护通知单
 -->
 <template>
   <div class="content">
-    <el-form
+    <el-form :model="noticeForm" :rules="noticeFormRules" ref="noticeForm" size="small" :inline="true"
-      :model="noticeForm"
+      label-width="5rem">
-      :rules="noticeFormRules"
-      ref="noticeForm"
-      size="small"
-      :inline="true"
-      label-width="5rem"
-    >
       <el-form-item label="道路名称" prop="segmentId">
-        <el-select
+        <el-select v-model="noticeForm.segmentId" placeholder="请选择路段" clearable filterable>
-          v-model="noticeForm.segmentId"
+          <el-option v-for="item in segmentList" :key="item.value" :label="item.label" :value="item.value" />
-          placeholder="请选择路段"
-          clearable
-          filterable
-        >
-          <el-option
-            v-for="item in segmentList"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
         </el-select>
       </el-form-item>
       <el-form-item label="采集时间" prop="dateTime">
-        <el-date-picker
+        <el-date-picker v-model="dateTime" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
-          v-model="dateTime"
+          format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable />
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          format="yyyy-MM-dd"
-          value-format="yyyy-MM-dd"
-          clearable
-        />
       </el-form-item>
       <el-form-item label="病害类型" prop="paramsDefectType">
-        <el-cascader
+        <el-cascader v-model="paramsDefectType" :options="tableDefect" :props="{
-          v-model="paramsDefectType"
-          :options="tableDefect"
-          :props="{
           checkStrictly: true,
           emitPath: true,
           children: 'subTypes',
-          }"
+        }" clearable></el-cascader>
-          clearable
-        ></el-cascader>
       </el-form-item>
       <el-form-item label="上下行" prop="inspectDirection">
-        <el-select
+        <el-select v-model="noticeForm.inspectDirection" placeholder="请选择" clearable>
-          v-model="noticeForm.inspectDirection"
-          placeholder="请选择"
-          clearable
-        >
           <el-option label="上行" value="0" />
           <el-option label="下行" value="1" />
         </el-select>
       </el-form-item>
       <el-form-item label="是否紧急" prop="urgentFlag">
-        <el-select
+        <el-select v-model="noticeForm.urgentFlag" placeholder="请选择" clearable>
-          v-model="noticeForm.urgentFlag"
-          placeholder="请选择"
-          clearable
-        >
           <el-option label="紧急" value="1" />
           <el-option label="不紧急" value="2" />
         </el-select>
       </el-form-item>
       <el-form-item label="公里桩" prop="stakeRange">
-        <el-input
+        <el-input v-model="noticeForm.stakeStart" placeholder="起始公里桩" style="width: 10rem" clearable />
-          v-model="noticeForm.stakeStart"
-          placeholder="起始公里桩"
-          style="width: 10rem"
-          clearable
-        />
         <span style="margin: 0 5px">-</span>
-        <el-input
+        <el-input v-model="noticeForm.stakeEnd" placeholder="终止公里桩" style="width: 10rem" clearable />
-          v-model="noticeForm.stakeEnd"
+        <el-tooltip class="item" effect="dark" content="格式为K0000+000" placement="top">
-          placeholder="终止公里桩"
-          style="width: 10rem"
-          clearable
-        />
-        <el-tooltip
-          class="item"
-          effect="dark"
-          content="格式为K0000+000"
-          placement="top"
-        >
           <i class="el-icon-info"></i>
         </el-tooltip>
       </el-form-item>
       <el-form-item label="病害长度" prop="lengthRange">
-        <el-input-number
+        <el-input-number v-model="noticeForm.minLen" controls-position="right" placeholder="最小长度"
-          v-model="noticeForm.minLen"
+          :min="0"></el-input-number>
-          controls-position="right"
-          placeholder="最小长度"
-          :min="0"
-        ></el-input-number>
         <span style="margin: 0 5px">-</span>
-        <el-input-number
+        <el-input-number v-model="noticeForm.maxLen" controls-position="right" placeholder="最大长度"
-          v-model="noticeForm.maxLen"
+          :min="0"></el-input-number>
-          controls-position="right"
-          placeholder="最大长度"
-          :min="0"
-        ></el-input-number>
       </el-form-item>
 
       <el-form-item label="病害面积" prop="areaRange">
-        <el-input-number
+        <el-input-number v-model="noticeForm.minArea" controls-position="right" placeholder="最小面积"
-          v-model="noticeForm.minArea"
+          :min="0"></el-input-number>
-          controls-position="right"
-          placeholder="最小面积"
-          :min="0"
-        ></el-input-number>
         <span style="margin: 0 5px">-</span>
-        <el-input-number
+        <el-input-number v-model="noticeForm.maxArea" controls-position="right" placeholder="最大面积"
-          v-model="noticeForm.maxArea"
+          :min="0"></el-input-number>
-          controls-position="right"
-          placeholder="最大面积"
-          :min="0"
-        ></el-input-number>
       </el-form-item>
 
       <el-form-item>
-        <el-button
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-          type="primary"
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-          icon="el-icon-search"
-          size="mini"
-          @click="handleQuery"
-          >搜索</el-button
-        >
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
-          >重置</el-button
-        >
       </el-form-item>
     </el-form>
     <!-- 操作按钮 -->
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          >新增
         </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
+        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
-          type="danger"
+          @click="handleDelete(null)">删除
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete(null)"
-          >删除
         </el-button>
       </el-col>
     </el-row>
     <!-- 表格 -->
-    <el-table
+    <el-table class="notice-table" ref="noticeTable" :data="noticeList" @selection-change="handleSelectionChange"
-      class="notice-table"
+      :row-key="getRowKey" v-loading="loading" style="width: 100%">
-      ref="noticeTable"
-      :data="noticeList"
-      @selection-change="handleSelectionChange"
-      v-loading="loading"
-      style="width: 100%"
-    >
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column type="index" label="序号"> </el-table-column>
       <el-table-column label="路段名称" align="center" prop="segmentName" />
@@ -186,139 +93,54 @@
       <el-table-column label="结束桩号" align="center" prop="stakeEnd" />
       <el-table-column label="病害图片" align="center" prop="media">
         <template slot-scope="scope">
-          <img
+          <img @click="showScreenImg(scope.row)" height="50" :src="scope.row.mediaUrl" />
-            @click="showScreenImg(scope.row)"
-            height="50"
-            :src="scope.row.mediaUrl"
-          />
         </template>
       </el-table-column>
       <el-table-column label="病害长度" align="center" prop="targetLen">
         <template slot-scope="scope">
-          {{ scope.row.targetLen * 1 <= 0 ? "" : `${scope.row.targetLen}米` }}
+          {{ scope.row.targetLen * 1 <= 0 ? "" : `${scope.row.targetLen}米` }} </template>
-        </template>
       </el-table-column>
       <el-table-column label="病害面积" align="center" prop="targetArea" />
-      <el-table-column label="状态" align="center" prop="noticeStatus" />
+      <el-table-column label="道路方向" align="center" prop="inspectDirection">
-      <el-table-column label="是否紧急" align="center" prop="urgentFlag">
         <template slot-scope="scope">
-          <el-button
+          <span>{{
-            v-if="scope.row.urgentFlag === 1"
+            scope.row.inspectDirection === "0" ? "上行" : "下行"
-            type="danger"
+            }}</span>
-            plain
-            disabled
-            >紧急</el-button
-          >
-          <el-button
-            v-if="scope.row.urgentFlag === 2"
-            type="warning"
-            plain
-            disabled
-            >不紧急</el-button
-          >
         </template>
       </el-table-column>
-      <el-table-column
+      <el-table-column label="是否紧急" align="center" prop="urgentFlag">
-        label="操作"
-        align="center"
-        class-name="small-padding fixed-width"
-      >
         <template slot-scope="scope">
-          <el-button
+          <el-button v-if="scope.row.urgentFlag === 1" type="danger" plain disabled>紧急</el-button>
-            size="mini"
+          <el-button v-if="scope.row.urgentFlag === 2" type="warning" plain disabled>不紧急</el-button>
-            type="text"
+        </template>
-            icon="el-icon-view"
+      </el-table-column>
-            @click="handleView(scope.row)"
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-            >查看
+        <template slot-scope="scope">
-          </el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">生成工单
-          <!-- <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            >生成通知单
-          </el-button> -->
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            >删除
           </el-button>
         </template>
       </el-table-column>
     </el-table>
     <!-- 分页组件 -->
     <div class="pagination-part">
-      <el-pagination
+      <el-pagination background :current-page.sync="pagination.page" @current-change="handleCurrentChange"
-        background
+        :page-sizes="[10, 20, 30, 40]" :page-size.sync="pagination.size" @size-change="handleSizeChange"
-        :current-page.sync="pagination.page"
+        layout="total, sizes, prev, pager, next, jumper" :total="tableTotal">
-        @current-change="handleCurrentChange"
-        :page-sizes="[10, 20, 30, 40]"
-        :page-size.sync="pagination.size"
-        @size-change="handleSizeChange"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="tableTotal"
-      >
       </el-pagination>
     </div>
     <!-- 新增弹窗 -->
-    <el-dialog
+    <el-dialog title="生成表单" :visible.sync="addVisible" width="90%" append-to-body :close-on-click-modal="false"
-      title="生成表单"
+      destroy-on-close @close="addCancel">
-      :visible.sync="addVisible"
+      <edit-dialog v-if="addVisible" :segmentList="segmentList" :tableDefect="tableDefect" :dialogItem="dialogItem"
-      width="90%"
+        @cancel="addCancel" />
-      append-to-body
-      :close-on-click-modal="false"
-      destroy-on-close
-      @close="addCancel"
-    >
-      <edit-dialog
-        v-if="addVisible"
-        :segmentList="segmentList"
-        :dialogItem="dialogItem"
-        @cancel="addCancel"
-      />
-    </el-dialog>
-
-    <!-- 查看弹窗 -->
-    <el-dialog
-      title="查看表单"
-      :visible.sync="viewVisible"
-      width="60rem"
-      append-to-body
-      :close-on-click-modal="false"
-      destroy-on-close
-      @close="viewCancel"
-    >
-      <view-dialog
-        v-if="viewVisible"
-        :dialogItem="dialogItem"
-        @cancel="viewCancel"
-      />
     </el-dialog>
 
     <!-- 查看图片大图 -->
-    <el-dialog
+    <el-dialog title="查看图片" :visible.sync="showImageDialog" width="85rem" append-to-body destroy-on-close
-      title="查看图片"
+      @close="imgCancel">
-      :visible.sync="showImageDialog"
-      width="85rem"
-      append-to-body
-      destroy-on-close
-      @close="imgCancel"
-    >
       <div class="image-container" ref="imageContainer">
-        <img
+        <img :src="currentImageItem.mediaUrl" alt="Main Image" ref="mainImage" @load="updateRects" />
-          :src="currentImageItem.mediaUrl"
+        <div v-for="(rect, index) in rects" :key="index" class="rect-overlay" :style="getRectStyle(rect)"></div>
-          alt="Main Image"
-          ref="mainImage"
-          @load="updateRects"
-        />
-        <div
-          v-for="(rect, index) in rects"
-          :key="index"
-          class="rect-overlay"
-          :style="getRectStyle(rect)"
-        ></div>
         <div class="rect-image">
           采集时间:
           {{ new Date(currentImageItem.createdTime).toLocaleString() }}
@@ -327,11 +149,7 @@
           病害类型：
           {{ currentImageItem.defectTypeName || "暂无数据" }}
           病害面积：{{ currentImageItem.targetArea }}平方米 病害长度：{{
-            currentImageItem.targetLen * 1 <= 0
+            currentImageItem.targetLen * 1 <= 0 ? "暂无数据" : `${currentImageItem.targetLen}米` }} </div>
-              ? "暂无数据"
-              : `${currentImageItem.targetLen}米`
-          }}
-        </div>
         </div>
     </el-dialog>
   </div>
@@ -339,7 +157,6 @@
 
 <script>
 import EditDialog from "./components/edit-dialog.vue";
-import ViewDialog from "./components/view-dialog.vue";
 import {
   getSegment,
   getDefectList,
@@ -349,7 +166,6 @@ export default {
   name: "MaintenanceNotice",
   components: {
     EditDialog,
-    ViewDialog,
   },
   data() {
     return {
@@ -430,9 +246,11 @@ export default {
       },
       // 非多个禁用
       multiple: true,
+      // 列表勾选数组
+      checkIds: [],
 
       // 编辑弹窗信息绑定
-      dialogItem: {},
+      dialogItem: [],
       // 编辑弹窗显隐控制
       addVisible: false,
       // 查看弹窗显隐控制
@@ -540,15 +358,18 @@ export default {
     getList() {
       this.noticeList = [];
       this.loading = true;
-      const data = {
+      const dataItem = {
         ...this.searchForm,
         ...this.pagination,
+        startTime: this.dateTime ? this.dateTime[0] : "",
+        endTime: this.dateTime ? this.dateTime[1] : "",
+        maintenanceStatus: "未生成"
       };
-      getMaintenanceNoticeList(data)
+      getMaintenanceNoticeList(dataItem)
-        .then(({ code, rows, total }) => {
+        .then(({ code, data }) => {
           if (code === 200) {
-            this.noticeList = rows;
+            this.noticeList = data.table.rows;
-            this.tableTotal = total;
+            this.tableTotal = data.table.total;
           }
         })
         .finally(() => {
@@ -563,10 +384,19 @@ export default {
      */
     handleSelectionChange(selection) {
       this.checkIds = selection.map((item) => item.id);
-      this.single = selection.length !== 1;
+      this.dialogItem = selection;
       this.multiple = !selection.length;
     },
 
+    /**
+     * @description: 列表行绑定id
+     * @param {*} row
+     * @return {*}
+     */
+    getRowKey(row) {
+      return row.snapshotId;
+    },
+
     /**
      * @description: 点击新增事件
      * @param {*} row
@@ -577,22 +407,12 @@ export default {
     },
 
     /**
-     * @description: 表格查看事件
+     * @description: 表格生成工单事件
-     * @param {*} row
-     * @return {*}
-     */
-    handleView(row) {
-      this.dialogItem = row;
-      this.viewVisible = true;
-    },
-
-    /**
-     * @description: 表格编辑事件
      * @param {*} row
      * @return {*}
      */
     handleUpdate(row) {
-      this.dialogItem = row;
+      this.dialogItem = [row];
       this.addVisible = true;
     },
 
@@ -611,7 +431,7 @@ export default {
           this.getList();
           this.$modal.msgSuccess("删除成功");
         })
-        .catch(() => {});
+        .catch(() => { });
     },
 
     /**

src/views/xj/document/view-notification/index.vue

@@ -0,0 +1,245 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2025-02-10 11:02:50
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2025-02-10 11:35:21
+ * @FilePath: \znxjxt-ui\src\views\xj\document\view-notification\index.vue
+ * @Description: 单据-查看通知单页面
+-->
+
+<template>
+  <div class="content">
+    <el-form :model="noticeForm" ref="noticeForm" size="small" :inline="true" label-width="5rem">
+      <el-form-item label="道路名称" prop="segmentId">
+        <el-select v-model="noticeForm.segmentId" placeholder="请选择路段" clearable filterable>
+          <el-option v-for="item in segmentList" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="采集时间" prop="dateTime">
+        <el-date-picker v-model="dateTime" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
+          format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable />
+      </el-form-item>
+      <el-form-item label="病害类型" prop="paramsDefectType">
+        <el-cascader v-model="paramsDefectType" :options="tableDefect" :props="{
+          checkStrictly: true,
+          emitPath: true,
+          children: 'subTypes',
+        }" clearable></el-cascader>
+      </el-form-item>
+      <el-form-item label="上下行" prop="inspectDirection">
+        <el-select v-model="noticeForm.inspectDirection" placeholder="请选择" clearable>
+          <el-option label="上行" value="0" />
+          <el-option label="下行" value="1" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="是否紧急" prop="urgentFlag">
+        <el-select v-model="noticeForm.urgentFlag" placeholder="请选择" clearable>
+          <el-option label="紧急" value="1" />
+          <el-option label="不紧急" value="2" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="公里桩" prop="stakeRange">
+        <el-input v-model="noticeForm.stakeStart" placeholder="起始公里桩" style="width: 10rem" clearable />
+        <span style="margin: 0 5px">-</span>
+        <el-input v-model="noticeForm.stakeEnd" placeholder="终止公里桩" style="width: 10rem" clearable />
+        <el-tooltip class="item" effect="dark" content="格式为K0000+000" placement="top">
+          <i class="el-icon-info"></i>
+        </el-tooltip>
+      </el-form-item>
+      <el-form-item label="病害长度" prop="lengthRange">
+        <el-input-number v-model="noticeForm.minLen" controls-position="right" placeholder="最小长度"
+          :min="0"></el-input-number>
+        <span style="margin: 0 5px">-</span>
+        <el-input-number v-model="noticeForm.maxLen" controls-position="right" placeholder="最大长度"
+          :min="0"></el-input-number>
+      </el-form-item>
+
+      <el-form-item label="病害面积" prop="areaRange">
+        <el-input-number v-model="noticeForm.minArea" controls-position="right" placeholder="最小面积"
+          :min="0"></el-input-number>
+        <span style="margin: 0 5px">-</span>
+        <el-input-number v-model="noticeForm.maxArea" controls-position="right" placeholder="最大面积"
+          :min="0"></el-input-number>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <!-- 导航栏 -->
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane v-for="(item, index) in viewTableTabs" :key="`tabs-${index}`" :label="item.title" :name="item.name">
+        <!-- 表格 -->
+        <el-table class="notice-table" ref="noticeTable" :data="noticeList" @selection-change="handleSelectionChange"
+          v-loading="loading" style="width: 100%">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column type="index" label="序号"> </el-table-column>
+          <el-table-column label="路段名称" align="center" prop="segmentName" />
+          <el-table-column label="采集时间" align="center" prop="createdTimeLocal">
+          </el-table-column>
+          <el-table-column label="病害类型" align="center" prop="defectTypeName">
+          </el-table-column>
+          <el-table-column label="开始桩号" align="center" prop="stakeStart" />
+          <el-table-column label="结束桩号" align="center" prop="stakeEnd" />
+          <el-table-column label="病害图片" align="center" prop="media">
+            <template slot-scope="scope">
+              <img @click="showScreenImg(scope.row)" height="50" :src="scope.row.mediaUrl" />
+            </template>
+          </el-table-column>
+          <el-table-column label="病害长度" align="center" prop="targetLen">
+            <template slot-scope="scope">
+              {{ scope.row.targetLen * 1 <= 0 ? "" : `${scope.row.targetLen}米` }} </template>
+          </el-table-column>
+          <el-table-column label="病害面积" align="center" prop="targetArea" />
+          <el-table-column label="状态" align="center" prop="noticeStatus" />
+          <el-table-column label="是否紧急" align="center" prop="urgentFlag">
+            <template slot-scope="scope">
+              <el-button v-if="scope.row.urgentFlag === 1" type="danger" plain disabled>紧急</el-button>
+              <el-button v-if="scope.row.urgentFlag === 2" type="warning" plain disabled>不紧急</el-button>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看
+              </el-button>
+              <!-- <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(scope.row)"
+                >生成通知单
+              </el-button> -->
+              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+    </el-tabs>
+    <!-- 分页组件 -->
+    <div class="pagination-part">
+      <el-pagination background :current-page.sync="pagination.page" @current-change="handleCurrentChange"
+        :page-sizes="[10, 20, 30, 40]" :page-size.sync="pagination.size" @size-change="handleSizeChange"
+        layout="total, sizes, prev, pager, next, jumper" :total="tableTotal">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MaintenanceNotice",
+  components: {},
+  data() {
+    return {
+      // 查询表单绑定
+      noticeForm: {},
+      // 选择时间绑定
+      dateTime: [],
+      // 病害类型绑定
+      paramsDefectType: [],
+      // 路段下拉数据
+      segmentList: [],
+      // 病害类型下拉数据
+      tableDefect: [],
+
+      // 导航栏点击绑定
+      activeName: "未完成",
+      // 导航栏列表
+      viewTableTabs: [{ title: "未完成", name: "未完成" }, { title: "已完成", name: "已完成" }],
+      // 列表数据
+      noticeList: [],
+      // 列表加载状态
+      loading: false,
+      // 列表勾选绑定
+      checkIds: [],
+      // 列表分页绑定
+      pagination: {
+        page: 1,
+        size: 10,
+      },
+      // 列表分页总数
+      tableTotal: 0,
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    /**
+   * @description: 点击查询事件
+   * @param {*}
+   * @return {*}
+   */
+    handleQuery() {
+
+    },
+
+    /**
+    * @description: 点击重置事件
+    * @param {*}
+    * @return {*}
+    */
+    resetQuery() {
+
+    },
+
+    /**
+    * @description: 导航栏点击事件
+    * @param {*}
+    * @return {*}
+    */
+    handleClick() {
+
+    },
+
+    /**
+    * @description: 列表选择改变事件
+    * @param {*} selection
+    * @return {*}
+    */
+    handleSelectionChange(selection) {
+      this.checkIds = selection.map((item) => item.id);
+    },
+
+    /**
+  * @description: 切换分页
+  * @param {*} arg
+  * @return {*}
+  */
+    handleCurrentChange(arg) {
+      this.pagination.page = arg;
+      this.getList();
+    },
+
+    /**
+     * @description: 切换每页条数
+     * @param {*} arg
+     * @return {*}
+     */
+    handleSizeChange(arg) {
+      this.pagination.size = arg;
+      this.getList();
+    },
+  },
+
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: calc(100vh - 5.4rem);
+  padding: 1rem;
+  overflow-y: auto;
+}
+
+/* 分页样式 */
+.pagination-part {
+  width: 100%;
+  display: flex;
+  padding-top: 1rem;
+  justify-content: flex-end;
+}
+</style>

src/views/xj/inspection/confirmation-management/components/img-dialog.vue

@@ -2,140 +2,70 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-22 15:30:25
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2025-01-10 14:48:49
+ * @LastEditTime: 2025-02-11 14:17:00
  * @FilePath: \znxjxt-ui\src\views\big-screen\components\img-dialog.vue
  * @Description: 大屏查看图片弹窗
 -->
 
 <template>
-  <div
+  <div class="app" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)">
-    class="app"
-    v-loading="loading"
-    element-loading-background="rgba(0, 0, 0, 0.8)"
-  >
     <div class="left-list">
       <div class="sidebar" ref="sidebar" @scroll="handleScroll">
-        <img
+        <img v-for="(item, index) in defectData" :key="`${item.id}-${index}`" :src="item.media[0].img"
-          v-for="(item, index) in defectData"
+          :alt="'Image ' + (index + 1)" @click="showImage(index)" :class="{ selected: currentIndex === index }" />
-          :key="`${item.id}-${index}`"
-          :src="item.media[0].img"
-          :alt="'Image ' + (index + 1)"
-          @click="showImage(index)"
-          :class="{ selected: currentIndex === index }"
-        />
       </div>
     </div>
 
     <div class="main-content">
       <!-- 搜索表单 -->
       <div class="toolbar">
-        <el-form
+        <el-form :model="imgForm" ref="imgForm" size="small" :inline="true" label-width="5rem">
-          :model="imgForm"
-          ref="imgForm"
-          size="small"
-          :inline="true"
-          label-width="5rem"
-        >
           <!-- <el-row :gutter="24">
             <el-col :span="7"> -->
           <el-form-item label="路段名称">
-            <el-select
+            <el-select v-model="imgForm.segmentId" placeholder="请选择路段名称" :popper-append-to-body="false" filterable
-              v-model="imgForm.segmentId"
+              clearable>
-              placeholder="请选择路段名称"
+              <el-option v-for="item in segmentList" :key="item.value" :label="item.label" :value="item.value" />
-              :popper-append-to-body="false"
-              filterable
-              clearable
-            >
-              <el-option
-                v-for="item in segmentList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
             </el-select>
           </el-form-item>
           <!-- </el-col>
             <el-col :span="7"> -->
           <el-form-item label="病害类型">
-            <el-select
+            <el-select v-model="imgForm.defectType" placeholder="请选择病害类型" :popper-append-to-body="false" clearable>
-              v-model="imgForm.defectType"
+              <el-option v-for="item in defectTypeList" :key="item.value" :label="item.label" :value="item.value" />
-              placeholder="请选择病害类型"
-              :popper-append-to-body="false"
-              clearable
-            >
-              <el-option
-                v-for="item in defectTypeList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
             </el-select>
           </el-form-item>
           <!-- </el-col>
             <el-col :span="10"> -->
           <el-form-item label="公里桩">
-            <el-input
+            <el-input v-model="imgForm.stakeStart" placeholder="起始公里桩" style="width: 7.5rem" clearable />
-              v-model="imgForm.stakeStart"
-              placeholder="起始公里桩"
-              style="width: 7.5rem"
-              clearable
-            />
             <span style="margin: 0 5px">-</span>
-            <el-input
+            <el-input v-model="imgForm.stakeEnd" placeholder="终止公里桩" style="width: 7.5rem" clearable />
-              v-model="imgForm.stakeEnd"
-              placeholder="终止公里桩"
-              style="width: 7.5rem"
-              clearable
-            />
           </el-form-item>
           <!-- </el-col>
           </el-row>
           <el-row :gutter="24">
             <el-col :span="9"> -->
           <el-form-item label="病害长度">
-            <el-input-number
+            <el-input-number v-model="imgForm.minLen" controls-position="right" placeholder="最小长度"
-              v-model="imgForm.minLen"
+              :min="0"></el-input-number>
-              controls-position="right"
-              placeholder="最小长度"
-              :min="0"
-            ></el-input-number>
             <span style="margin: 0 5px">-</span>
-            <el-input-number
+            <el-input-number v-model="imgForm.maxLen" controls-position="right" placeholder="最大长度"
-              v-model="imgForm.maxLen"
+              :min="0"></el-input-number>
-              controls-position="right"
-              placeholder="最大长度"
-              :min="0"
-            ></el-input-number>
           </el-form-item>
           <!-- </el-col>
             <el-col :span="9"> -->
           <el-form-item label="病害面积">
-            <el-input-number
+            <el-input-number v-model="imgForm.minArea" controls-position="right" placeholder="最小面积"
-              v-model="imgForm.minArea"
+              :min="0"></el-input-number>
-              controls-position="right"
-              placeholder="最小面积"
-              :min="0"
-            ></el-input-number>
             <span style="margin: 0 5px">-</span>
-            <el-input-number
+            <el-input-number v-model="imgForm.maxArea" controls-position="right" placeholder="最大面积"
-              v-model="imgForm.maxArea"
+              :min="0"></el-input-number>
-              controls-position="right"
-              placeholder="最大面积"
-              :min="0"
-            ></el-input-number>
           </el-form-item>
           <!-- </el-col>
             <el-col :span="6"> -->
-          <el-button
+          <el-button type="primary" class="btn-submit" size="mini" @click="handleQuery">搜索</el-button>
-            type="primary"
+          <el-button class="btn-cancel" size="mini" @click="resetQuery">重置</el-button>
-            class="btn-submit"
-            size="mini"
-            @click="handleQuery"
-            >搜索</el-button
-          >
-          <el-button class="btn-cancel" size="mini" @click="resetQuery"
-            >重置</el-button
-          >
           <!-- </el-col>
           </el-row> -->
         </el-form>
@@ -143,77 +73,41 @@
       <!-- 图片展示 -->
       <div class="image-viewer">
         <div class="rect-image">
-          <el-checkbox-group
+          <el-checkbox-group v-model="checkedRect" @change="handleCheckedRectChange">
-            v-model="checkedRect"
+            <el-checkbox class="image-info" v-for="(item, index) in rectItem" :label="item.id"
-            @change="handleCheckedRectChange"
+              :key="`image-info-${index}`" :style="{ color: colorList[index] }">采集时间:
-          >
-            <el-checkbox
-              class="image-info"
-              v-for="(item, index) in rectItem"
-              :label="item.id"
-              :key="`image-info-${index}`"
-              :style="{ color: colorList[index] }"
-              >采集时间:
               {{ new Date(item.createdTime).toLocaleString() }} 起始桩号:
               {{ item.stakeStart || "暂无数据" }} 终止桩号:
               {{ item.stakeEnd || "暂无数据" }}
               病害类型:
               {{ item.defectTypeName || "暂无数据" }}
               病害面积：{{ item.targetArea }}平方米 病害长度：{{
-                item.targetLen * 1 <= 0 ? "暂无数据" : `${item.targetLen}米`
+                item.targetLen * 1 <= 0 ? "暂无数据" : `${item.targetLen}米` }} </el-checkbox>
-              }}
-            </el-checkbox>
           </el-checkbox-group>
         </div>
         <div class="image-container" ref="imageView">
-          <div
+          <div class="view-content" ref="imageContainer" @mousewheel="handleWeel"
-            class="view-content"
+            :style="`width:${elWidth}rem;height:${elHeight}rem;transform: scale(${scale});transform-origin: top left`">
-            ref="imageContainer"
+            <img :src="currentImage" alt="Main Image" ref="mainImage" @load="updateRects" />
-            @mousewheel="handleWeel"
+            <div class="rect-overlay" v-for="(item, index) in checkedRectList" :key="`rect-overlay-${index}`"
-            :style="`width:${elWidth}rem;height:${elHeight}rem;transform: scale(${scale});transform-origin: top left`"
+              :style="getRectStyle(item.rectPosition, index)"></div>
-          >
-            <img
-              :src="currentImage"
-              alt="Main Image"
-              ref="mainImage"
-              @load="updateRects"
-            />
-            <div
-              class="rect-overlay"
-              v-for="(item, index) in checkedRectList"
-              :key="`rect-overlay-${index}`"
-              :style="getRectStyle(item.rectPosition, index)"
-            ></div>
           </div>
         </div>
       </div>
       <!-- 小图展示 -->
       <div class="thumbnail-row">
-        <div
+        <div class="thumbnail-image" :style="{
-          class="thumbnail-image"
-          :style="{
           justifyContent: currentThumbnails.length > 8 ? '' : 'center',
-          }"
+        }">
-        >
+          <img v-for="(mediaItem, index) in currentThumbnails" :key="'thumb-' + index" :src="mediaItem.img"
-          <img
+            :alt="'Thumb ' + (index + 1)" @click="showThumbnailImage(index)"
-            v-for="(mediaItem, index) in currentThumbnails"
+            :class="{ selected: selectedThumbnail === index }" />
-            :key="'thumb-' + index"
-            :src="mediaItem.img"
-            :alt="'Thumb ' + (index + 1)"
-            @click="showThumbnailImage(index)"
-            :class="{ selected: selectedThumbnail === index }"
-          />
         </div>
         <div class="thumbnail-btn">
-          <el-button type="success" plain size="mini" @click="changeDefect(2)"
+          <el-button type="success" plain size="mini" @click="changeDefect(2)">是病害(Y)</el-button>
-            >是病害(Y)</el-button
+          <el-button type="primary" plain size="mini" @click="changeDefect(4)">是病害不紧急(U)
-          >
-          <el-button type="primary" plain size="mini" @click="changeDefect(4)"
-            >是病害不紧急(U)
           </el-button>
-          <el-button type="warning" plain size="mini" @click="changeDefect(3)"
+          <el-button type="warning" plain size="mini" @click="changeDefect(3)">不是病害(N)</el-button>
-            >不是病害(N)</el-button
-          >
         </div>
       </div>
     </div>
@@ -230,11 +124,11 @@ export default {
   props: {
     imageItem: {
       type: Object,
-      default: () => {},
+      default: () => { },
     },
     searchForm: {
       type: Object,
-      default: () => {},
+      default: () => { },
     },
     segmentList: {
       type: Array,
@@ -338,7 +232,7 @@ export default {
   created() {
     // this.getDefectType();
   },
-  mounted() {},
+  mounted() { },
   mounted() {
     this.initBodySize();
     this.scrollInit();
@@ -612,7 +506,7 @@ export default {
       this.selectedThumbnail = indexInfo; // Reset to the first thumbnail when changing the main item
       this.$nextTick(() => {
         this.scrollToCurrentImage();
-        this.updateRects();
+        // this.updateRects();
       });
     },
 
@@ -623,7 +517,7 @@ export default {
      */
     showThumbnailImage(index) {
       this.selectedThumbnail = index;
-      this.updateRects();
+      // this.updateRects();
     },
 
     /**
@@ -704,7 +598,7 @@ export default {
           const index = this.defectData[this.currentIndex].media.length - 1;
           this.selectedThumbnail = index; // Reset when changing main images via keyboard
           this.scrollToCurrentImage();
-          this.updateRects();
+          // this.updateRects();
         }
       } else if (event.key === "ArrowDown" && !this.loading) {
         event.preventDefault();
@@ -716,7 +610,7 @@ export default {
           const index = this.defectData[this.currentIndex].media.length - 1;
           this.selectedThumbnail = index; // Reset when changing main images via keyboard
           this.scrollToCurrentImage();
-          this.updateRects();
+          // this.updateRects();
         } else {
           this.loadMoreBottomImages();
         }
@@ -750,6 +644,7 @@ export default {
      */
     updateRects() {
       this.rectItem = [];
+      this.checkedRectList = []
       if (
         this.defectData.length > 0 &&
         this.defectData.length > this.currentIndex
@@ -978,6 +873,7 @@ export default {
     }
 
     .el-input-number {
+
       .el-input-number__decrease,
       .el-input-number__increase {
         background: transparent;
@@ -1031,7 +927,7 @@ export default {
     width: 100%;
     background-color: rgba(0, 0, 0, 0.5);
 
-    .el-checkbox__input.is-checked + .el-checkbox__label {
+    .el-checkbox__input.is-checked+.el-checkbox__label {
       color: inherit;
       font-size: 0.8rem;
       line-height: 0.8rem;
@@ -1100,7 +996,7 @@ export default {
     padding: 0.4rem;
     background-color: #333c42;
 
-    > button {
+    >button {
       width: 7rem;
       height: 1.3rem;
       line-height: 0.4rem;