From 8f64f82359ff91bd36b794c777e4fef66eb1fa3f Mon Sep 17 00:00:00 2001
From: SunTao <328867980@qq.com>
Date: Tue, 11 Feb 2025 17:21:34 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=E5=85=BB?=
 =?UTF-8?q?=E6=8A=A4=E5=B7=A5=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/disease-dialog.vue             |  533 ++++++++
 .../components/edit-dialog.vue                | 1079 +++++++----------
 .../components/view-dialog.vue                |  228 ----
 .../xj/document/maintenance-notice/index.vue  |  344 ++----
 .../xj/document/view-notification/index.vue   |  245 ++++
 .../components/img-dialog.vue                 |  206 +---
 6 files changed, 1357 insertions(+), 1278 deletions(-)
 create mode 100644 src/views/xj/document/maintenance-notice/components/disease-dialog.vue
 delete mode 100644 src/views/xj/document/maintenance-notice/components/view-dialog.vue
 create mode 100644 src/views/xj/document/view-notification/index.vue

diff --git a/src/views/xj/document/maintenance-notice/components/disease-dialog.vue b/src/views/xj/document/maintenance-notice/components/disease-dialog.vue
new file mode 100644
index 0000000..93b67c3
--- /dev/null
+++ b/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>
diff --git a/src/views/xj/document/maintenance-notice/components/edit-dialog.vue b/src/views/xj/document/maintenance-notice/components/edit-dialog.vue
index c83edc6..07277a4 100644
--- a/src/views/xj/document/maintenance-notice/components/edit-dialog.vue
+++ b/src/views/xj/document/maintenance-notice/components/edit-dialog.vue
@@ -2,81 +2,39 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-11-20 11:58:33
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2025-01-21 11:14:24
+ * @LastEditTime: 2025-02-11 16:44:38
  * @FilePath: \znxjxt-ui\src\views\xj\document\maintenance-notice\components\edit-dialog.vue
  * @Description: 养护通知单编辑弹窗
 -->
 <template>
   <div class="edit-dialog">
-    <el-form
-      class="editForm"
-      ref="editForm"
-      :model="editForm"
-      :rules="rules"
-      label-width="7rem"
-    >
+    <el-form class="editForm" ref="editForm" :model="editForm" :rules="rules" label-width="7rem">
       <el-row :gutter="24">
         <el-col :span="6">
           <el-form-item label="病害成因:" prop="value2">
-            <el-select
-              v-model="editForm.value2"
-              placeholder="请选择病害成因"
-              clearable
-            >
-              <el-option
-                v-for="item in value2List"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
+            <el-select v-model="editForm.value2" placeholder="请选择病害成因" clearable>
+              <el-option v-for="item in value2List" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="路段类型:" prop="value1">
-            <el-select
-              v-model="editForm.value1"
-              placeholder="请选择路段类型"
-              clearable
-            >
-              <el-option
-                v-for="item in value1List"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
+            <el-select v-model="editForm.value1" placeholder="请选择路段类型" clearable>
+              <el-option v-for="item in value1List" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="工区:" prop="value3">
-            <el-select
-              v-model="editForm.value3"
-              placeholder="请选择工区"
-              clearable
-            >
-              <el-option
-                v-for="item in value3List"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
+            <el-select v-model="editForm.value3" placeholder="请选择工区" clearable>
+              <el-option v-for="item in value3List" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="病害来源:" prop="value4">
-            <el-select
-              v-model="editForm.value4"
-              placeholder="请选择病害来源"
-              clearable
-            >
-              <el-option
-                v-for="item in value4List"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
+            <el-select v-model="editForm.value4" placeholder="请选择病害来源" clearable>
+              <el-option v-for="item in value4List" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
         </el-col>
@@ -84,65 +42,29 @@
       <el-row :gutter="24">
         <el-col :span="6">
           <el-form-item label="工作站:" prop="value5">
-            <el-select
-              v-model="editForm.value5"
-              placeholder="请选择工作站"
-              clearable
-            >
-              <el-option
-                v-for="item in value5List"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
+            <el-select v-model="editForm.value5" placeholder="请选择工作站" clearable>
+              <el-option v-for="item in value5List" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="车道:" prop="value7">
-            <el-select
-              v-model="editForm.value7"
-              placeholder="请选择车道"
-              clearable
-            >
-              <el-option
-                v-for="item in value7List"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
+            <el-select v-model="editForm.value7" placeholder="请选择车道" clearable>
+              <el-option v-for="item in value7List" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="桥梁:" prop="value8">
-            <el-select
-              v-model="editForm.value8"
-              placeholder="请选择方向"
-              clearable
-            >
-              <el-option
-                v-for="item in value8List"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
+            <el-select v-model="editForm.value8" placeholder="请选择方向" clearable>
+              <el-option v-for="item in value8List" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="隧道:" prop="value9">
-            <el-select
-              v-model="editForm.value9"
-              placeholder="请选择方向"
-              clearable
-            >
-              <el-option
-                v-for="item in value9List"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
+            <el-select v-model="editForm.value9" placeholder="请选择方向" clearable>
+              <el-option v-for="item in value9List" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
         </el-col>
@@ -150,17 +72,8 @@
       <el-row :gutter="24">
         <el-col :span="6">
           <el-form-item label="道路名称:" prop="segmentId">
-            <el-select
-              v-model="editForm.segmentId"
-              placeholder="请选择路段"
-              clearable
-            >
-              <el-option
-                v-for="item in segmentList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
+            <el-select v-model="editForm.segmentId" placeholder="请选择路段" clearable>
+              <el-option v-for="item in segmentList" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
         </el-col>
@@ -176,17 +89,8 @@
         </el-col>
         <el-col :span="6">
           <el-form-item label="方向:" prop="value6">
-            <el-select
-              v-model="editForm.value6"
-              placeholder="请选择方向"
-              clearable
-            >
-              <el-option
-                v-for="item in value6List"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
+            <el-select v-model="editForm.value6" placeholder="请选择方向" clearable>
+              <el-option v-for="item in value6List" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
         </el-col>
@@ -194,415 +98,149 @@
       <el-row :gutter="24">
         <el-col :span="6">
           <el-form-item label="收费站:" prop="value10">
-            <el-select
-              v-model="editForm.value10"
-              placeholder="请选择路段"
-              clearable
-            >
-              <el-option
-                v-for="item in value10List"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
+            <el-select v-model="editForm.value10" placeholder="请选择路段" clearable>
+              <el-option v-for="item in value10List" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="收费站位置:" prop="value11">
-            <el-select
-              v-model="editForm.value11"
-              placeholder="请选择路段"
-              clearable
-            >
-              <el-option
-                v-for="item in value11List"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
+            <el-select v-model="editForm.value11" placeholder="请选择路段" clearable>
+              <el-option v-for="item in value11List" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="匝道类型:" prop="value12">
-            <el-select
-              v-model="editForm.value12"
-              placeholder="请选择匝道类型"
-              clearable
-            >
-              <el-option
-                v-for="item in value12List"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
+            <el-select v-model="editForm.value12" placeholder="请选择匝道类型" clearable>
+              <el-option v-for="item in value12List" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="匝道立交:" prop="value13">
-            <el-select
-              v-model="editForm.value13"
-              placeholder="请选择匝道立交"
-              clearable
-            >
-              <el-option
-                v-for="item in value13List"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
+            <el-select v-model="editForm.value13" placeholder="请选择匝道立交" clearable>
+              <el-option v-for="item in value13List" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="匝道立交方向:" prop="value14">
-            <el-select
-              v-model="editForm.value14"
-              placeholder="请选择匝道立交方向"
-              clearable
-            >
-              <el-option
-                v-for="item in value14List"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
+            <el-select v-model="editForm.value14" placeholder="请选择匝道立交方向" clearable>
+              <el-option v-for="item in value14List" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
         </el-col>
       </el-row>
-      <!-- <el-row :gutter="24">
-        <el-col :span="24">
-          <el-form-item label="养护负责人:" prop="receiver">
-            <el-input
-              clearable
-              v-model="editForm.receiver"
-              placeholder="请输入负责人名称"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="24">
-        <el-form-item label="养护内容:" prop="taskDescription">
-          <fssm-scroll style="max-height: 10rem">
-            <div
-              class="content-box"
-              v-for="(item, index) in editForm.taskDescription"
-              :key="`content-box-${index}`"
-            >
-              <el-col :span="21">
-                <el-input
-                  type="textarea"
-                  resize="none"
-                  placeholder="请输入养护内容"
-                  v-model="editForm.taskDescription[index]"
-                />
-              </el-col>
-              <el-col :span="2">
-                <span
-                  v-if="index < 1"
-                  class="el-icon-circle-plus-outline"
-                  @click="handleAddContent"
-                ></span>
-                <span
-                  v-else
-                  class="el-icon-delete"
-                  @click="handleDeleteContent(index)"
-                ></span>
-              </el-col>
-            </div>
-          </fssm-scroll>
-        </el-form-item>
-      </el-row> -->
     </el-form>
     <el-card shadow="never">
       <div slot="header" class="clearfix">
         <span style="font-size: 1.2rem">选择病害</span>
-        <el-button
-          style="float: right; padding: 3px 0"
-          type="text"
-          @click="viewSelected"
-          >查看已选数据</el-button
-        >
+        <el-button style="float: right; padding: 3px 0" type="text" @click="viewSelected">选择病害</el-button>
+        <el-button style="float: right; padding: 3px 1rem" type="text" v-if="mapTip"
+          @click="viewMapSelected(false)">地图查看</el-button>
+        <el-button style="float: right; padding: 3px 1rem" type="text" v-if="!mapTip"
+          @click="viewMapSelected(true)">列表查看</el-button>
       </div>
-      <!-- 列表查询条件 -->
-      <el-form
-        :model="diseaseForm"
-        ref="queryForm"
-        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="state">
-          <el-select
-            v-model="diseaseForm.state"
-            placeholder="请选择病害状态"
-            clearable
-          >
-            <el-option
-              v-for="item in defectStatus"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </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="roadTable"
-        v-loading="loading"
-        :data="diseaseList"
-        :row-key="getRowKey"
-        @selection-change="handleSelectionChange"
-        height="40rem"
-        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="createdTime">
-          <template slot-scope="scope">
-            <span>{{ new Date(scope.row.createdTime).toLocaleString() }}</span>
-          </template>
-        </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="dataStatus">
-          <template slot-scope="scope">
-            <span>{{
-              scope.row.dataStatus
-                ? scope.row.dataStatus === 1
-                  ? "未校验"
-                  : "已校验"
-                : ""
-            }}</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 style="height: 33rem;">
+        <!-- 列表 -->
+        <el-table v-if="mapTip" ref="roadTable" :data="checkedDiseaseList" :row-key="getRowKey" 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-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.$index)">删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 地图 -->
+        <fssm-map v-if="!mapTip" @map-zoom="getZoom" ref="diseaseMap"></fssm-map>
       </div>
     </el-card>
     <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>
+
+    <!-- 选择病害弹窗 -->
+    <el-dialog title="选择病害" :visible.sync="diseaseVisible" width="90%" append-to-body :close-on-click-modal="false"
+      destroy-on-close @close="diseaseCancel">
+      <disease-dialog :checkedDiseaseList="checkedDiseaseList" :segmentList="segmentList" :tableDefect="tableDefect"
+        v-if="diseaseVisible" @cancel="diseaseCancel" @checkedList="getCheckedList" />
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import FssmScroll from "@/components/scroll/fssm-scroll.vue";
-import { addMaintenanceNotice, listDefect } from "@/api/xj/document";
+import { addMaintenanceNotice } from "@/api/xj/document";
+import DiseaseDialog from "./disease-dialog.vue";
+import FssmMap from '@/components/map/fssm-map.vue';
+import { Feature } from "ol";
+import { Point } from "ol/geom";
+import { Style, Icon, Fill, Text } from "ol/style";
+import VectorSource from "ol/source/Vector";
+import VectorLayer from "ol/layer/Vector";
+import Cluster from "ol/source/Cluster";
 export default {
   name: "EditDialog",
-  components: { FssmScroll },
+  components: { FssmScroll, DiseaseDialog, FssmMap },
   props: {
     dialogItem: {
-      type: Object,
-      default: () => {},
+      type: Array,
+      default: () => [],
+    },
+    tableDefect: {
+      type: Array,
+      default: () => [],
     },
     segmentList: {
       type: Array,
@@ -748,166 +386,65 @@ export default {
         receiver: [
           { required: true, message: "请输入负责人名称", trigger: "blur" },
         ],
-        // taskDescription: [
-        //   {
-        //     type: "array",
-        //     required: true,
-        //     defaultField: {
-        //       type: "string",
-        //       required: true,
-        //       message: "请完整填写内容",
-        //     },
-        //   },
-        // ],
       },
 
-      // 病害列表查询条件
-      diseaseForm: {
-        segmentId: "",
-        defectType: "",
-        classType: "",
-        taskId: "",
-        state: "",
-        inspectDirection: "",
-        stakeStart: "",
-        stakeEnd: "",
-        warningFlag: null,
-        minLen: undefined,
-        maxLen: undefined,
-        minArea: undefined,
-        maxArea: undefined,
-        confirmStatus: "",
-        id: "",
-        snapshotId: "",
-        taskId: "",
-      },
-      // 采集时间绑定
-      dateTime: [],
-      // 病害类型级联下拉绑定
-      paramsDefectType: [],
-      // 病害类型级联下拉数据
-      tableDefect: [],
-      // 巡检任务下拉数据
-      taskList: [],
-      // 病害列表数据
-      diseaseList: [],
-      // 列表加载状态
-      loading: false,
-      // 列表选中数据
-      checkList: [],
-      // 分页-列表总数
-      tableTotal: 0,
-      // 分页-页数页码
-      pagination: {
-        page: 1,
-        size: 10,
-      },
+      // 表格是否显示控制
+      mapTip: true,
+      // 已选病害列表
+      checkedDiseaseList: [],
+      // 病害点位
+      centerPiont: [],
+      // 点位图层
+      clusters: null,
+      // 地图图层层级
+      mapZoom: "",
+
+      // 查看图片大图弹窗显隐控制
+      showImageDialog: false,
+      // 查看大图片路径
+      currentImageItem: {},
+      // 图片病害位置信息
+      rects: [],
+
+      // 选择病害弹窗显隐控制
+      diseaseVisible: false,
     };
   },
   watch: {
     dialogItem: {
       handler(val) {
-        this.editForm = {
-          ...val,
-          segmentId: val.segmentId === "999999999" ? "" : val.segmentId,
-          id: null,
-          defectId: val.id,
-          createdTime: null,
-          // taskDescription: [
-          //   `${val.createdTimeLocal}  ${val.roadName || ""}-${
-          //     val.segmentName || ""
-          //   } 主线 ${val.stakeStart || ""}-${val.stakeEnd || ""} 有${
-          //     val.defectTypeName
-          //   }`,
-          // ],
-        };
+        // this.editForm = {
+        //   ...val,
+        //   segmentId: val.segmentId === "999999999" ? "" : val.segmentId,
+        //   id: null,
+        //   defectId: val.id,
+        //   createdTime: null,
+        // };
+        this.checkedDiseaseList = val
       },
       deep: true,
       immediate: true,
     },
   },
   mounted() {
-    this.getDiseaseList();
   },
   methods: {
-    // /**
-    //  * @description: 添加养护内容
-    //  */
-    // handleAddContent() {
-    //   this.editForm.taskDescription.push("");
-    // },
-
-    // /**
-    //  * @description: 删除养护内容
-    //  */
-    // handleDeleteContent(index) {
-    //   this.editForm.taskDescription.splice(index, 1);
-    // },
-
-    handleQuery() {},
-
-    resetQuery() {},
-
     /**
-     * @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] : "",
-      };
-      listDefect(params)
-        .then((response) => {
-          this.diseaseList = response.rows;
-          this.tableTotal = response.total;
-          this.loading = false;
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    },
-
-    /**
-     * @description: 列表行绑定id
-     * @param {*} row
-     * @return {*}
-     */
+   * @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();
-    },
-
-    /**
-     * @description: 切换每条/页
-     * @param {*} arg
-     * @return {*}
-     */
-    handleSizeChange(arg) {
-      this.pagination.size = arg;
-      this.getDiseaseList();
+   * @description: 列表行删除事件
+   * @param {*} row
+   * @return {*}
+   */
+    handleDelete(index) {
+      this.checkedDiseaseList.splice(index, 1);
     },
 
     /**
@@ -936,11 +473,261 @@ export default {
     },
 
     /**
-     * @description: 查看已选中的表格数据
+     * @description: 查看地图的已选中数据
      * @param {*}
      * @return {*}
      */
-    viewSelected() {},
+    viewMapSelected(tip) {
+      this.mapTip = tip
+      // 地图打点
+      if (!tip && this.checkedDiseaseList.length > 0) {
+        // 修改地图中心点位
+        const pointArray = this.checkedDiseaseList.map((item) => {
+          if (item.coordinates) {
+            return item.coordinates;
+          }
+          return [];
+        });
+        this.centerPiont = this.checkedDiseaseList.map((item) => {
+          return { coordinates: item.coordinates, defectTypeName: item.defectTypeName };
+        });
+        this.$nextTick(() => {
+          this.fitMapToPoints(pointArray);
+          this.drawPoint();
+        })
+      }
+    },
+
+    /**
+     * @description: 根据点位计算地图中心点
+     * @return {void}
+     */
+    fitMapToPoints(points) {
+      if (points.length > 0) {
+        // 创建一个空的 extent
+        let extent = [Infinity, Infinity, -Infinity, -Infinity];
+        // 计算所有点的边界框（extent）
+        points.forEach((point) => {
+          extent = [
+            Math.min(extent[0], point[0]),
+            Math.min(extent[1], point[1]),
+            Math.max(extent[2], point[0]),
+            Math.max(extent[3], point[1]),
+          ];
+        });
+
+        // 获取地图实例
+        const map = this.$refs.diseaseMap.instance.get("map");
+
+        // 使用 fit 方法根据边界框计算最佳缩放级别
+        map.getView().fit(extent, {
+          duration: 500, // 动画持续时间
+          padding: [10, 10, 10, 10], // 边缘填充
+        });
+      }
+    },
+
+    /**
+     * @description: 传回来的地图图层
+     * @param {number} zoom
+     * @return {void}
+     */
+    getZoom(zoom) {
+      this.mapZoom = zoom;
+      if (this.clusters && zoom * 1 > 15) {
+        this.clusters.getSource().setDistance(0);
+      } else if (this.clusters && zoom * 1 <= 15) {
+        this.clusters.getSource().setDistance(100);
+      }
+    },
+
+    /**
+     * @description: 绘制地图点位
+     * @return {void}
+     */
+    drawPoint() {
+      const features = [];
+      this.centerPiont.forEach((element) => {
+        // 修改坐标样式
+        const point = new Point(element.coordinates);
+        const feature = new Feature({
+          geometry: point,
+          data: element,
+          // 自己设置一个标识
+          type: "icon",
+        });
+        features.push(feature);
+      });
+      const clusterSource = new Cluster({
+        distance: this.mapZoom > 15 ? 0 : 100,
+        minDistance: this.mapZoom > 15 ? 0 : 100,
+        source: new VectorSource({
+          features,
+        }),
+        type: "Cluster",
+      });
+      this.clusters = new VectorLayer({
+        source: clusterSource,
+        name: "clusterLayer",
+        zIndex: 1,
+        style: (feature) => {
+          const count = feature.get("features").length;
+          if (count > 1) {
+            return new Style({
+              image: new Icon({
+                crossOrigin: "anonymous",
+                src: require(`@/assets/screen/index/龟裂.png`),
+                // 图标缩放比例
+                scale: 0.5,
+                displacement: [0, 30],
+                // 0.3为30度
+                // rotation: 0.3,
+              }),
+              text: new Text({
+                textAlign: "center", //位置
+                textBaseline: "middle",
+                font: "normal 14px 微软雅黑",
+                offsetY: -40,
+                fill: new Fill({
+                  color: "#ffffff",
+                }),
+                text: count.toString(),
+              }),
+            });
+          } else {
+            return new Style({
+              image: new Icon({
+                crossOrigin: "anonymous",
+                src: require(`@/assets/screen/index/${feature.getProperties().features[0].get("data").defectTypeName
+                  || "龟裂"
+                  }.png`),
+                // 图标缩放比例
+                scale: 0.5,
+                displacement: [0, 30],
+                // 0.3为30度
+                // rotation: 0.3,
+              }),
+              text: new Text({
+                textAlign: "center", //位置
+                textBaseline: "middle",
+                font: "normal 14px 微软雅黑",
+                offsetY: -40,
+                fill: new Fill({
+                  color: "#ffffff",
+                }),
+                text: "",
+              }),
+            });
+          }
+        },
+      });
+      this.$nextTick(() => {
+        const map = this.$refs.diseaseMap.instance.get("map");
+        map.addLayer(this.clusters);
+      });
+    },
+
+    /**
+     * @description: 选择病害弹窗
+     * @param {*}
+     * @return {*}
+     */
+    viewSelected() {
+      this.diseaseVisible = true
+    },
+
+    /**
+     * @description: 获取选择的病害列表
+     * @param {*}
+     * @return {*}
+     */
+    getCheckedList(value) {
+      this.checkedDiseaseList = value;
+      this.diseaseVisible = false;
+    },
+
+    /**
+     * @description: 选择病害弹窗关闭方法
+     * @param {*}
+     * @return {*}
+     */
+    diseaseCancel() {
+      this.diseaseVisible = false
+    },
+
+    /**
+     * @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>
@@ -972,24 +759,50 @@ export default {
       color: #f01515;
     }
 
-    > div {
+    >div {
       margin: 0.5rem 0;
     }
   }
 }
 
-/* 分页样式 */
-.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>
diff --git a/src/views/xj/document/maintenance-notice/components/view-dialog.vue b/src/views/xj/document/maintenance-notice/components/view-dialog.vue
deleted file mode 100644
index 58cdfe3..0000000
--- a/src/views/xj/document/maintenance-notice/components/view-dialog.vue
+++ /dev/null
@@ -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>
diff --git a/src/views/xj/document/maintenance-notice/index.vue b/src/views/xj/document/maintenance-notice/index.vue
index dec5fd7..09fbe11 100644
--- a/src/views/xj/document/maintenance-notice/index.vue
+++ b/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
-      :model="noticeForm"
-      :rules="noticeFormRules"
-      ref="noticeForm"
-      size="small"
-      :inline="true"
-      label-width="5rem"
-    >
+    <el-form :model="noticeForm" :rules="noticeFormRules" 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 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-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-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-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-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
-        />
+        <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"
-        >
+        <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>
+        <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-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>
+        <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-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-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-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          >新增
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增
         </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete(null)"
-          >删除
+        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
+          @click="handleDelete(null)">删除
         </el-button>
       </el-col>
     </el-row>
     <!-- 表格 -->
-    <el-table
-      class="notice-table"
-      ref="noticeTable"
-      :data="noticeList"
-      @selection-change="handleSelectionChange"
-      v-loading="loading"
-      style="width: 100%"
-    >
+    <el-table class="notice-table" ref="noticeTable" :data="noticeList" @selection-change="handleSelectionChange"
+      :row-key="getRowKey" 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
-            @click="showScreenImg(scope.row)"
-            height="50"
-            :src="scope.row.mediaUrl"
-          />
+          <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>
+          {{ 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">
+      <el-table-column label="道路方向" align="center" prop="inspectDirection">
         <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
-          >
+          <span>{{
+            scope.row.inspectDirection === "0" ? "上行" : "下行"
+            }}</span>
         </template>
       </el-table-column>
-      <el-table-column
-        label="操作"
-        align="center"
-        class-name="small-padding fixed-width"
-      >
+      <el-table-column label="是否紧急" align="center" prop="urgentFlag">
         <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 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-edit" @click="handleUpdate(scope.row)">生成工单
           </el-button>
         </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 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>
     <!-- 新增弹窗 -->
-    <el-dialog
-      title="生成表单"
-      :visible.sync="addVisible"
-      width="90%"
-      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 title="生成表单" :visible.sync="addVisible" width="90%" append-to-body :close-on-click-modal="false"
+      destroy-on-close @close="addCancel">
+      <edit-dialog v-if="addVisible" :segmentList="segmentList" :tableDefect="tableDefect" :dialogItem="dialogItem"
+        @cancel="addCancel" />
     </el-dialog>
 
     <!-- 查看图片大图 -->
-    <el-dialog
-      title="查看图片"
-      :visible.sync="showImageDialog"
-      width="85rem"
-      append-to-body
-      destroy-on-close
-      @close="imgCancel"
-    >
+    <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>
+        <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() }}
@@ -327,19 +149,14 @@
           病害类型：
           {{ currentImageItem.defectTypeName || "暂无数据" }}
           病害面积：{{ currentImageItem.targetArea }}平方米 病害长度：{{
-            currentImageItem.targetLen * 1 <= 0
-              ? "暂无数据"
-              : `${currentImageItem.targetLen}米`
-          }}
+            currentImageItem.targetLen * 1 <= 0 ? "暂无数据" : `${currentImageItem.targetLen}米` }} </div>
         </div>
-      </div>
     </el-dialog>
   </div>
 </template>
 
 <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)
-        .then(({ code, rows, total }) => {
+      getMaintenanceNoticeList(dataItem)
+        .then(({ code, data }) => {
           if (code === 200) {
-            this.noticeList = rows;
-            this.tableTotal = total;
+            this.noticeList = data.table.rows;
+            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: 表格查看事件
-     * @param {*} row
-     * @return {*}
-     */
-    handleView(row) {
-      this.dialogItem = row;
-      this.viewVisible = true;
-    },
-
-    /**
-     * @description: 表格编辑事件
+     * @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(() => { });
     },
 
     /**
diff --git a/src/views/xj/document/view-notification/index.vue b/src/views/xj/document/view-notification/index.vue
new file mode 100644
index 0000000..ac72580
--- /dev/null
+++ b/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>
diff --git a/src/views/xj/inspection/confirmation-management/components/img-dialog.vue b/src/views/xj/inspection/confirmation-management/components/img-dialog.vue
index 2ca7ca5..1f6c8a1 100644
--- a/src/views/xj/inspection/confirmation-management/components/img-dialog.vue
+++ b/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
-    class="app"
-    v-loading="loading"
-    element-loading-background="rgba(0, 0, 0, 0.8)"
-  >
+  <div 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
-          v-for="(item, index) in defectData"
-          :key="`${item.id}-${index}`"
-          :src="item.media[0].img"
-          :alt="'Image ' + (index + 1)"
-          @click="showImage(index)"
-          :class="{ selected: currentIndex === index }"
-        />
+        <img v-for="(item, index) in defectData" :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
-          :model="imgForm"
-          ref="imgForm"
-          size="small"
-          :inline="true"
-          label-width="5rem"
-        >
+        <el-form :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
-              v-model="imgForm.segmentId"
-              placeholder="请选择路段名称"
-              :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 v-model="imgForm.segmentId" placeholder="请选择路段名称" :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
-              v-model="imgForm.defectType"
-              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 v-model="imgForm.defectType" 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
-              v-model="imgForm.stakeStart"
-              placeholder="起始公里桩"
-              style="width: 7.5rem"
-              clearable
-            />
+            <el-input v-model="imgForm.stakeStart" placeholder="起始公里桩" style="width: 7.5rem" clearable />
             <span style="margin: 0 5px">-</span>
-            <el-input
-              v-model="imgForm.stakeEnd"
-              placeholder="终止公里桩"
-              style="width: 7.5rem"
-              clearable
-            />
+            <el-input 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
-              v-model="imgForm.minLen"
-              controls-position="right"
-              placeholder="最小长度"
-              :min="0"
-            ></el-input-number>
+            <el-input-number v-model="imgForm.minLen" controls-position="right" placeholder="最小长度"
+              :min="0"></el-input-number>
             <span style="margin: 0 5px">-</span>
-            <el-input-number
-              v-model="imgForm.maxLen"
-              controls-position="right"
-              placeholder="最大长度"
-              :min="0"
-            ></el-input-number>
+            <el-input-number v-model="imgForm.maxLen" 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
-              v-model="imgForm.minArea"
-              controls-position="right"
-              placeholder="最小面积"
-              :min="0"
-            ></el-input-number>
+            <el-input-number v-model="imgForm.minArea" controls-position="right" placeholder="最小面积"
+              :min="0"></el-input-number>
             <span style="margin: 0 5px">-</span>
-            <el-input-number
-              v-model="imgForm.maxArea"
-              controls-position="right"
-              placeholder="最大面积"
-              :min="0"
-            ></el-input-number>
+            <el-input-number v-model="imgForm.maxArea" controls-position="right" placeholder="最大面积"
+              :min="0"></el-input-number>
           </el-form-item>
           <!-- </el-col>
             <el-col :span="6"> -->
-          <el-button
-            type="primary"
-            class="btn-submit"
-            size="mini"
-            @click="handleQuery"
-            >搜索</el-button
-          >
-          <el-button class="btn-cancel" size="mini" @click="resetQuery"
-            >重置</el-button
-          >
+          <el-button type="primary" 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
-            v-model="checkedRect"
-            @change="handleCheckedRectChange"
-          >
-            <el-checkbox
-              class="image-info"
-              v-for="(item, index) in rectItem"
-              :label="item.id"
-              :key="`image-info-${index}`"
-              :style="{ color: colorList[index] }"
-              >采集时间:
+          <el-checkbox-group v-model="checkedRect" @change="handleCheckedRectChange">
+            <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}米`
-              }}
-            </el-checkbox>
+                item.targetLen * 1 <= 0 ? "暂无数据" : `${item.targetLen}米` }} </el-checkbox>
           </el-checkbox-group>
         </div>
         <div class="image-container" ref="imageView">
-          <div
-            class="view-content"
-            ref="imageContainer"
-            @mousewheel="handleWeel"
-            :style="`width:${elWidth}rem;height:${elHeight}rem;transform: scale(${scale});transform-origin: top left`"
-          >
-            <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 class="view-content" ref="imageContainer" @mousewheel="handleWeel"
+            :style="`width:${elWidth}rem;height:${elHeight}rem;transform: scale(${scale});transform-origin: top left`">
+            <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
-          class="thumbnail-image"
-          :style="{
-            justifyContent: currentThumbnails.length > 8 ? '' : 'center',
-          }"
-        >
-          <img
-            v-for="(mediaItem, index) in currentThumbnails"
-            :key="'thumb-' + index"
-            :src="mediaItem.img"
-            :alt="'Thumb ' + (index + 1)"
-            @click="showThumbnailImage(index)"
-            :class="{ selected: selectedThumbnail === index }"
-          />
+        <div class="thumbnail-image" :style="{
+          justifyContent: currentThumbnails.length > 8 ? '' : 'center',
+        }">
+          <img v-for="(mediaItem, index) in currentThumbnails" :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)"
-            >是病害(Y)</el-button
-          >
-          <el-button type="primary" plain size="mini" @click="changeDefect(4)"
-            >是病害不紧急(U)
+          <el-button type="success" plain size="mini" @click="changeDefect(2)">是病害(Y)</el-button>
+          <el-button type="primary" plain size="mini" @click="changeDefect(4)">是病害不紧急(U)
           </el-button>
-          <el-button type="warning" plain size="mini" @click="changeDefect(3)"
-            >不是病害(N)</el-button
-          >
+          <el-button type="warning" plain size="mini" @click="changeDefect(3)">不是病害(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;