fix：病害合并拆分，病害确认

src/api/xj/confirmation.js

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-11-01 16:31:49
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-01 16:33:52
+ * @LastEditTime: 2024-11-04 17:21:17
  * @FilePath: \znxjxt-ui\src\api\xj\confirmation.js
  * @Description: 巡检信息-病害确认
  */
@@ -34,10 +34,22 @@ export function getDefectStatus() {
 }
 
 // 查询病害日志列表
-export function listDefect(query) {
+export function listDefect(data) {
   return request({
-    url: "/xj/defect/list",
+    url: "/xj/defect/getUncheckedDefectPage",
-    method: "get",
+    method: "post",
-    params: query,
+    data,
   });
 }
+
+// 是病害/不是病害
+export function mergeDefect(data) {
+    return request({
+      url: "/xj/defect/checkDefect",
+      method: "post",
+      data,
+    });
+  }
+
+
+  

src/api/xj/disease.js

@@ -101,3 +101,22 @@ export function changeDefectStatus(data) {
     data,
   });
 }
+
+// 合并病害接口
+export function mergeDefect(data) {
+  return request({
+    url: "/xj/defect/mergeDefects",
+    method: "post",
+    data,
+  });
+}
+
+
+// 拆分病害接口
+export function splitDefect(data) {
+  return request({
+    url: "/xj/defect/splitDefect",
+    method: "post",
+    data,
+  });
+}

src/views/big-screen/components/img-dialog.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-22 15:30:25
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-31 16:13:31
+ * @LastEditTime: 2024-11-04 15:19:03
  * @FilePath: \znxjxt-ui\src\views\big-screen\components\img-dialog.vue
  * @Description: 大屏查看图片弹窗
 -->
@@ -109,9 +109,9 @@
             @load="updateRects"
           />
           <div
+            class="rect-overlay"
             v-for="(rect, index) in rects"
             :key="index"
-            class="rect-overlay"
             :style="getRectStyle(rect)"
           ></div>
         </div>
@@ -119,7 +119,7 @@
           采集时间: {{ new Date(rectsItem.createdTime).toLocaleString() }}<br />
           起始桩号: {{ rectsItem.stakeStart || "暂无数据" }} 终止桩号:
           {{ rectsItem.stakeEnd || "暂无数据" }}<br />
-          路产状态: {{ filterState(rectsItem.state) }} 
+          路产状态: {{ filterState(rectsItem.state) }}
         </div>
       </div>
       <!-- 小图展示 -->

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

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-11-01 17:25:06
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-04 10:30:58
+ * @LastEditTime: 2024-11-04 16:29:02
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\confirmation-management\image-dialog.vue
  * @Description: 病害确认-影像模式弹窗
 -->
@@ -31,60 +31,62 @@
             :inline="true"
             label-width="5rem"
           >
-            <el-row :gutter="24">
+            <el-form-item label="路段名称">
-              <el-col :span="7">
+              <el-select
-                <el-form-item label="路段名称">
+                v-model="imgForm.segmentId"
-                  <el-select
+                placeholder="请选择路段名称"
-                    v-model="imgForm.segmentId"
+                :style="{ width: '8rem' }"
-                    placeholder="请选择路段名称"
+                clearable
-                    :style="{ width: '10rem' }"
+              >
-                    clearable
+                <el-option
-                  >
+                  v-for="item in roadTypeList"
-                    <el-option
+                  :key="item.value"
-                      v-for="item in roadTypeList"
+                  :label="item.label"
-                      :key="item.value"
+                  :value="item.value"
-                      :label="item.label"
+                />
-                      :value="item.value"
+              </el-select>
-                    />
+            </el-form-item>
-                  </el-select>
+            <el-form-item label-width="3rem" label="类型">
-                </el-form-item>
+              <el-select
-              </el-col>
+                v-model="imgForm.defectType"
-              <el-col :span="7">
+                placeholder="请选择路段名称"
-                <el-form-item label="病害类型">
+                :style="{ width: '8rem' }"
-                  <el-select
+                clearable
-                    v-model="imgForm.defectType"
+              >
-                    placeholder="请选择路段名称"
+                <el-option
-                    :style="{ width: '10rem' }"
+                  v-for="item in defectTypeList"
-                    clearable
+                  :key="item.value"
-                  >
+                  :label="item.label"
-                    <el-option
+                  :value="item.value"
-                      v-for="item in defectTypeList"
+                />
-                      :key="item.value"
+              </el-select>
-                      :label="item.label"
+            </el-form-item>
-                      :value="item.value"
+            <el-form-item label="公里桩">
-                    />
+              <el-input
-                  </el-select>
+                v-model="imgForm.stakeStart"
-                </el-form-item>
+                placeholder="起始公里桩"
-              </el-col>
+                style="width: 7rem"
-              <el-col :span="10">
+                clearable
-                <el-form-item label="公里桩">
+              />
-                  <el-input
+              <span style="margin: 0 5px">-</span>
-                    v-model="imgForm.stakeStart"
+              <el-input
-                    placeholder="起始公里桩"
+                v-model="imgForm.stakeEnd"
-                    style="width: 7rem"
+                placeholder="终止公里桩"
-                    clearable
+                style="width: 7rem"
-                  />
+                clearable
-                  <span style="margin: 0 5px">-</span>
+              />
-                  <el-input
+            </el-form-item>
-                    v-model="imgForm.stakeEnd"
+            <el-button
-                    placeholder="终止公里桩"
+              type="primary"
-                    style="width: 7rem"
+              icon="el-icon-search"
-                    clearable
+              size="mini"
-                  />
+              @click="handleQuery"
-                </el-form-item>
+              >搜索</el-button
-              </el-col>
+            >
-            </el-row>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
-            <el-row :gutter="24">
+              >重置</el-button
+            >
+            <!-- <el-row :gutter="24">
               <el-col :span="6">
                 <el-button
                   type="primary"
@@ -100,30 +102,31 @@
                   >重置</el-button
                 >
               </el-col>
-            </el-row>
+            </el-row> -->
           </el-form>
         </div>
+        <!-- 图片展示 -->
         <div class="image-view">
-          <div class="view-content">
+          <div class="view-content" ref="imageContainer">
             <img
-              src="currentImage"
+              :src="currentImage"
               alt="Main Image"
               ref="mainImage"
               @load="updateRects"
             />
             <div
+              class="rect-overlay"
               v-for="(rect, index) in rects"
               :key="index"
-              class="rect-overlay"
               :style="getRectStyle(rect)"
             ></div>
-          </div>
+            <div class="view-info">
-          <div class="view-info">
+              采集时间:
-            采集时间: {{ new Date(rectsItem.createdTime).toLocaleString()
+              {{ new Date(rectsItem.createdTime).toLocaleString() }} 起始桩号:
-            }}<br />
+              {{ rectsItem.stakeStart || "暂无数据" }} 终止桩号:
-            起始桩号: {{ rectsItem.stakeStart || "暂无数据" }} 终止桩号:
+              {{ rectsItem.stakeEnd || "暂无数据" }}
-            {{ rectsItem.stakeEnd || "暂无数据" }}<br />
+              路产状态: {{ filterState(rectsItem.state) }}
-            路产状态: {{ filterState(rectsItem.state) }}
+            </div>
           </div>
         </div>
         <div class="image-bottom">
@@ -139,10 +142,10 @@
       </div>
     </div>
     <div class="footer">
-      <el-button type="success" size="mini" @click="changeDefect('1')"
+      <el-button type="success" size="mini" @click="changeDefect(1)"
         >是病害(Y)</el-button
       >
-      <el-button type="warning" size="mini" @click="changeDefect('2')"
+      <el-button type="warning" size="mini" @click="changeDefect(0)"
         >不是病害(N)</el-button
       >
     </div>
@@ -150,8 +153,12 @@
 </template>
 
 <script>
-import { getDefectStatus } from "@/api/xj/disease";
+import {
-import { defeaseList, getSegment, getItemTypes } from "@/api/xj/screen/index";
+  getSegment,
+  getDefectStatus,
+  mergeDefect,
+} from "@/api/xj/confirmation";
+import { defeaseList, getItemTypes } from "@/api/xj/screen/index";
 export default {
   name: "ImageDialog",
   props: {},
@@ -165,6 +172,9 @@ export default {
         segmentId: "",
         // 病害类型
         defectType: "",
+        // 公里桩
+        stakeStart: "",
+        stakeEnd: "",
       },
       // 路段下拉数据
       roadTypeList: [],
@@ -179,6 +189,10 @@ export default {
       },
       // 图片病害位置信息
       rects: [],
+      // 当前展示的index
+      currentIndex: "0",
+      // 点击的index绑定
+      selectedThumbnail: null,
       // 图片下方数据
       rectsItem: {},
     };
@@ -214,6 +228,7 @@ export default {
         }
       });
     },
+
     /* 获取病害类型下拉数据 */
     getDefectType() {
       getItemTypes({ type: "defect" }).then(({ code, data }) => {
@@ -222,6 +237,7 @@ export default {
         }
       });
     },
+
     /* 查询病害状态下拉数据 */
     getDefectStatusList() {
       getDefectStatus().then(({ data, code }) => {
@@ -230,6 +246,7 @@ export default {
         }
       });
     },
+
     /* 过滤列表病害状态 */
     filterState(value) {
       let a = null;
@@ -240,6 +257,7 @@ export default {
         return a.label;
       }
     },
+
     /* 获取左侧图片列表 */
     getList() {
       this.loading = true;
@@ -249,13 +267,14 @@ export default {
       };
       defeaseList(data)
         .then((response) => {
-          this.defectData.push(...response.data);
+          this.defectData = response.data;
           this.loading = false;
         })
         .catch(() => {
           this.loading = false;
         });
     },
+
     /* 点击搜索事件 */
     handleQuery() {
       const stakeReg = /^K\d{4}\+\d{3}$/;
@@ -293,6 +312,7 @@ export default {
         this.showImage(0);
       }
     },
+
     /* 重置事件 */
     resetQuery() {
       this.defectData = [];
@@ -309,6 +329,7 @@ export default {
       this.getList();
       this.showImage(0);
     },
+
     /* 左侧点击图片事件 */
     showImage(index) {
       this.currentIndex = index;
@@ -318,6 +339,10 @@ export default {
         this.updateRects();
       });
     },
+    showThumbnailImage(index) {
+      this.selectedThumbnail = index;
+      this.updateRects();
+    },
     scrollToCurrentImage() {
       const sidebarImages = this.$refs.sidebar.querySelectorAll("img");
       const currentImageElement = sidebarImages[this.currentIndex];
@@ -328,6 +353,7 @@ export default {
         });
       }
     },
+
     /* 图片位置信息获取 */
     updateRects() {
       this.rects = [];
@@ -351,6 +377,7 @@ export default {
         this.rectsItem = this.defectData[this.currentIndex];
       }
     },
+
     /* 图片红框位置 */
     getRectStyle({ left, top, width, height }) {
       const image = this.$refs.mainImage;
@@ -366,7 +393,6 @@ export default {
 
       const offsetX = (container.clientWidth - renderedWidth) / 2;
       const offsetY = (container.clientHeight - renderedHeight) / 2;
-
       return {
         position: "absolute",
         left: `${left * scale + offsetX}px`,
@@ -377,28 +403,46 @@ export default {
         boxSizing: "border-box",
       };
     },
+
     /* 滚动触发事件 */
     handleScroll() {
       // 滚动高度+容器高度  滚动区域高度
       const sidebar = this.$refs.sidebar;
       if (
-        sidebar.scrollTop + sidebar.clientHeight >= sidebar.scrollHeight - 1 &&
+        sidebar.scrollTop + sidebar.clientHeight >= sidebar.scrollHeight - 18 &&
         !this.loading
       ) {
         this.loadMoreImages();
       }
     },
+
     /* 加载更多图片方法 */
     loadMoreImages() {
       this.params.size += 10;
       this.getList();
     },
+
     /* 是病害/不是病害点击事件 */
-    changeDefect(value) {},
+    changeDefect(value) {
+      mergeDefect({
+        status: value,
+        snapShotIds: [this.defectData[this.currentIndex].snapshotId],
+      })
+        .then(({ code, msg }) => {
+          if (code === 200) {
+            this.showImage(this.currentIndex);
+            this.$modal.msgSuccess("修改成功");
+          } else {
+            this.$modal.msgWarning(msg);
+          }
+        })
+        .finally(() => {
+          this.getList();
+        });
+    },
+
     /* 键盘事件 */
     handleKeydown(event) {
-      console.log(event.keyCode, "fff");
-
       if (event.key === "ArrowUp") {
         if (this.currentIndex > 0) {
           this.currentIndex--;
@@ -419,10 +463,10 @@ export default {
         }
       } else if (event.keyCode === 89) {
         // 确认病害
-        this.changeDefect("1");
+        this.changeDefect(1);
       } else if (event.keyCode === 78) {
         // 不是病害
-        this.changeDefect("2");
+        this.changeDefect(0);
       }
     },
   },
@@ -459,29 +503,58 @@ export default {
   }
 }
 
+.sidebar img {
+  width: 100%;
+  margin-bottom: 5px;
+  cursor: pointer;
+  border-radius: 3px;
+  transition: transform 0.2s, border 0.2s;
+  box-sizing: border-box;
+}
+
+.sidebar img.selected {
+  border: 3px solid #00aaff;
+  transform: scale(1.03);
+}
+
 // form表单
 .image-form {
-  height: 15%;
+  height: 7%;
   width: 100%;
-  background-color: aqua;
 }
 
 // 图片大图预览
 .image-view {
-  height: 70%;
+  height: 78%;
   width: 100%;
-  background-color: aquamarine;
+  padding: 1rem;
+  background-color: rgb(228, 247, 248);
 
   .view-content {
     width: 100%;
-    height: 80%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    position: relative;
+  }
+
+  .view-content img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+
+  .rect-overlay {
+    position: absolute;
+    pointer-events: none;
+    border: 2px solid red;
   }
 
   .view-info {
-    width: 100%;
+    position: absolute;
-    height: 20%;
+    left: 10%;
-    display: flex;
+    bottom: 2%;
-    justify-content: center;
+    color: red;
   }
 }
 
@@ -494,7 +567,7 @@ export default {
   overflow-x: auto;
   padding: 10px;
   gap: 10px;
-  background-color: beige;
+  background-color: rgb(244, 244, 228);
 
   img {
     width: 7rem;

src/views/xj/inspection/confirmation-management/index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-11-01 13:17:41
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-04 09:40:36
+ * @LastEditTime: 2024-11-05 09:23:11
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\confirmation-management\index.vue
  * @Description: 巡检信息-病害确认
 -->
@@ -182,7 +182,7 @@
           icon="el-icon-check"
           size="mini"
           :disabled="multiple"
-          @click="handleConfirm()"
+          @click="handleConfirm(1)"
           >是病害
         </el-button>
       </el-col>
@@ -193,7 +193,7 @@
           icon="el-icon-close"
           size="mini"
           :disabled="multiple"
-          @click="handleNegative()"
+          @click="handleConfirm(0)"
           >不是病害
         </el-button>
       </el-col>
@@ -326,6 +326,7 @@ import {
   getSegment,
   getDefectStatus,
   listDefect,
+  mergeDefect,
 } from "@/api/xj/confirmation";
 import imageDialog from "./components/image-dialog.vue";
 export default {
@@ -490,7 +491,26 @@ export default {
     },
 
     /* 点击重置事件 */
-    resetQuery() {},
+    resetQuery() {
+      this.queryParams = {
+        segmentName: "",
+        defectType: "",
+        state: "",
+        inspectDirection: "",
+        stakeStart: "",
+        stakeEnd: "",
+        warningFlag: null,
+        minLen: undefined,
+        maxLen: undefined,
+        minArea: undefined,
+        maxArea: undefined,
+        id: "",
+        snapshotId: "",
+      };
+      this.searchForm = {};
+      this.dateTime = [];
+      this.getTableList();
+    },
 
     /* 多选框选中数据 */
     handleSelectionChange(selection) {
@@ -498,11 +518,21 @@ export default {
       this.multiple = !selection.length;
     },
 
-    /* 是病害 */
+    /* 是病害/不是病害 */
-    handleConfirm() {},
+    handleConfirm(value) {
-
+      mergeDefect({ status: value, snapShotIds: this.checkIds })
-    /* 不是病害 */
+        .then(({ code, msg }) => {
-    handleNegative() {},
+          if (code === 200) {
+            this.checkIds = [];
+            this.$modal.msgSuccess("修改成功");
+          } else {
+            this.$modal.msgWarning(msg);
+          }
+        })
+        .finally(() => {
+          this.getTableList();
+        });
+    },
 
     /* 影像模式 */
     handleBatch() {
@@ -574,6 +604,8 @@ export default {
     /* 关闭查看图片弹窗 */
     imgCancel() {
       this.showImageDialog = false;
+      this.currentImageItem = {};
+      this.rects = [];
     },
 
     /* 关闭影像模式弹窗 */

src/views/xj/inspection/disease-management/components/merge-dialog.vue

@@ -0,0 +1,548 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-11-04 10:54:59
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-11-04 17:25:42
+ * @FilePath: \znxjxt-ui\src\views\xj\inspection\disease-management\components\merge-dialog.vue
+ * @Description: 病害管理-合并病害弹窗
+-->
+
+<template>
+  <div class="content">
+    <div class="merge-form">
+      <el-form
+        :model="mergeForm"
+        ref="mergeForm"
+        size="small"
+        :inline="true"
+        label-width="5rem"
+      >
+        <el-row :gutter="24">
+          <el-col :span="8">
+            <el-form-item label="道路名称" prop="segmentName">
+              <el-select
+                v-model="mergeForm.segmentName"
+                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>
+          <el-col :span="8">
+            <el-form-item label="采集时间" prop="dateTime">
+              <el-date-picker
+                :style="{ width: '16rem' }"
+                v-model="dateTime"
+                type="daterange"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                format="yyyy-MM-dd"
+                value-format="yyyy-MM-dd"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="病害类型" prop="defectType">
+              <el-select
+                v-model="mergeForm.defectType"
+                placeholder="请选择病害类型"
+                clearable
+              >
+                <el-option
+                  v-for="item in tableDefect"
+                  :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="8">
+            <el-form-item label="公里桩" prop="stakeRange">
+              <el-input
+                v-model="mergeForm.stakeStart"
+                placeholder="起始公里桩"
+                style="width: 7rem"
+                clearable
+              />
+              <span style="margin: 0 5px">-</span>
+              <el-input
+                v-model="mergeForm.stakeEnd"
+                placeholder="终止公里桩"
+                style="width: 7rem"
+                clearable
+              />
+              <el-tooltip
+                class="item"
+                effect="dark"
+                content="格式为K0000+000"
+                placement="top"
+              >
+                <i class="el-icon-info"></i>
+              </el-tooltip>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="快照id" prop="snapshotId">
+              <el-input
+                v-model="mergeForm.snapshotId"
+                placeholder="请填写快照id"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="病害id" prop="id">
+              <el-input
+                v-model="mergeForm.id"
+                placeholder="请填写病害id"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="8" style="padding-left: 2rem">
+            <el-form-item label="" label-width="2rem">
+              <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-col>
+        </el-row>
+      </el-form>
+    </div>
+    <div class="merge-table">
+      <el-table
+        ref="defectTable"
+        v-loading="loading"
+        :data="defectMergeList"
+        @select="handleSelectionChange"
+        @select-all="handleSelectAll"
+        style="width: 100%"
+        height="30rem"
+      >
+        <el-table-column type="selection" 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="defectType">
+          <template slot-scope="scope">
+            <span>{{ filterDefect(scope.row.defectType) }}</span>
+          </template>
+        </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" />
+        <el-table-column label="病害面积" align="center" prop="targetArea" />
+        <el-table-column label="预警标识" align="center" prop="warningFlag">
+          <template slot-scope="scope">
+            <el-tag :type="scope.row.warningFlag === 1 ? 'danger' : 'success'">
+              {{ scope.row.warningFlag === 1 ? "是" : "否" }}
+            </el-tag>
+          </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>
+    <div class="merge-footer">
+      <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="cancel">取 消</el-button>
+    </div>
+
+    <!-- 查看图片大图 -->
+    <el-dialog
+      title="查看图片"
+      :visible.sync="showImageDialog"
+      width="75rem"
+      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>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listDefect, mergeDefect } from "@/api/xj/disease";
+export default {
+  name: "MergeDialog",
+  props: {
+    segmentList: {
+      type: Array,
+      default: () => [],
+    },
+    tableDefect: {
+      type: Array,
+      default: () => [],
+    },
+    defectStatus: {
+      type: Array,
+      default: () => [],
+    },
+    mergeItem: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      // 表单绑定
+      mergeForm: {
+        // 道路名称绑定
+        segmentName: "",
+        // 病害类型绑定
+        defectType: "",
+        // 公里桩绑定
+        stakeStart: "",
+        stakeEnd: "",
+        // 快照id
+        snapshotId: "",
+        // 病害id
+        id: "",
+      },
+      // 查询表单绑定
+      searchForm: {},
+      // 采集时间绑定
+      dateTime: [],
+      // 列表数据绑定
+      defectMergeList: [],
+      // 表格加载状态
+      loading: false,
+      // 列表选中数据
+      checkIds: [],
+      // 分页绑定
+      pagination: {
+        page: 1,
+        size: 10,
+      },
+      // 数据总数
+      tableTotal: 0,
+      // 查看图片大图弹窗显隐控制
+      showImageDialog: false,
+      // 查看大图片路径
+      currentImageItem: "",
+      // 图片病害位置信息
+      rects: [],
+      // 合并病害弹窗显隐控制
+      mergeVisibleDialog: false,
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /* 过滤列表病害类型 */
+    filterDefect(value) {
+      let a = null;
+      [a] = this.tableDefect.filter((item) => {
+        return item.value === value;
+      });
+      if (a) {
+        return a.label;
+      }
+    },
+
+    /* 过滤列表病害状态 */
+    filterState(value) {
+      let a = null;
+      [a] = this.defectStatus.filter((item) => {
+        return item.value === value;
+      });
+      if (a) {
+        return a.label;
+      }
+    },
+
+    /* 搜索事件 */
+    handleQuery() {
+      this.searchForm = JSON.parse(JSON.stringify(this.mergeForm));
+      this.getList();
+    },
+
+    /* 重置事件 */
+    resetQuery() {
+      this.searchForm = {};
+      this.mergeForm = {
+        // 道路名称绑定
+        segmentName: "",
+        // 病害类型绑定
+        defectType: "",
+        // 公里桩绑定
+        stakeStart: "",
+        stakeEnd: "",
+        // 快照id
+        snapshotId: "",
+        // 病害id
+        id: "",
+      };
+      this.dateTime = [];
+      this.getList();
+    },
+
+    /** 查询缺陷列表 */
+    getList() {
+      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.defectMergeList = response.rows;
+          this.tableTotal = response.total;
+          this.loading = false;
+          this.$nextTick(() => {
+            this.handleListSelect();
+          });
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+
+    /* 列表选中事件 */
+    handleSelectionChange(selection, row) {
+      if (selection.length > 1) {
+        this.$refs.defectTable.clearSelection();
+        this.$refs.defectTable.toggleRowSelection(selection.pop());
+        this.checkIds = [row.id];
+      } else if (selection.length === 0) {
+        this.checkIds = [];
+      } else {
+        this.checkIds = [row.id];
+      }
+    },
+
+    /* 列表全选事件 */
+    handleSelectAll() {
+      this.$refs.defectTable.clearSelection();
+    },
+
+    /* 列表框回显勾选 */
+    handleListSelect() {
+      const { defectTable } = this.$refs;
+      if (defectTable) {
+        this.defectMergeList.forEach((temp) => {
+          defectTable.toggleRowSelection(temp, this.checkIds.includes(temp.id));
+        });
+      }
+    },
+
+    /* 点击取消事件 */
+    cancel() {
+      this.$emit("mergeCancel");
+    },
+
+    /* 点击确认事件 */
+    submitForm() {
+      const data = {
+        aimSnapshotId: this.checkIds[0],
+        snapshotId: this.mergeItem.snapshotId,
+      };
+      mergeDefect(data).then(({ code, msg }) => {
+        if (code === 200) {
+          this.cancel();
+          this.$modal.msgSuccess(msg);
+        } else {
+          this.$modal.msgWarning(msg);
+        }
+      });
+    },
+
+    /* 切换分页 */
+    handleCurrentChange(arg) {
+      this.pagination.page = arg;
+      this.getList();
+    },
+
+    /* 切换每条/页 */
+    handleSizeChange(arg) {
+      this.pagination.size = arg;
+      this.getList();
+    },
+
+    /* 打开查看图片弹窗 */
+    showScreenImg(item) {
+      this.currentImageItem = item;
+      this.showImageDialog = true;
+    },
+
+    /* 图片位置信息获取 */
+    updateRects() {
+      this.rects = [];
+      this.rectsItem = {};
+      const image = this.$refs.mainImage;
+      const rects = this.currentImageItem?.rect?.split(",").map(Number) || [];
+      this.rects = [
+        {
+          left: rects[0],
+          top: rects[1],
+          width: rects[2],
+          height: rects[3],
+        },
+      ];
+    },
+
+    /* 图片红框位置 */
+    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",
+      };
+    },
+
+    /* 关闭查看图片弹窗 */
+    imgCancel() {
+      this.showImageDialog = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 45rem;
+
+  .merge-form {
+    width: 100%;
+    height: 20%;
+  }
+
+  .merge-table {
+    width: 100%;
+    height: 75%;
+
+    /* 分页样式 */
+    .pagination-part {
+      width: 100%;
+      display: flex;
+      padding: 1rem 0;
+      justify-content: flex-end;
+    }
+  }
+
+  .merge-footer {
+    width: 100%;
+    height: 5%;
+    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;
+}
+</style>

src/views/xj/inspection/disease-management/index.vue

@@ -2,7 +2,7 @@
  * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
  * @Date: 2024-10-08 10:58:25
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-01 16:00:00
+ * @LastEditTime: 2024-11-05 09:21:16
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\disease-management .vue
  * @Description: 巡检信息管理-病害管理
 -->
@@ -281,6 +281,7 @@
       <el-table-column
         label="操作"
         align="center"
+        width="180"
         class-name="small-padding fixed-width"
       >
         <template slot-scope="scope">
@@ -307,6 +308,20 @@
             v-hasPermi="['system:defect:remove']"
             >删除
           </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-bangzhu"
+            @click="mergeDefect(scope.row)"
+            >合并
+          </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-copy-document"
+            @click="splitDefect(scope.row)"
+            >拆分
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -515,6 +530,8 @@
             <!-- <p>病害坐标：{{ viewForm.geometry.coordinates }}</p> -->
             <p>病害类型：{{ filterDefect(viewForm.defectType) }}</p>
             <p>病害长度：{{ viewForm.targetLen }} 米</p>
+            <p>病害id：{{ viewForm.id }}</p>
+            <p>快照id：{{ viewForm.snapshotId }}</p>
           </div>
 
           <!-- 右侧图片展示 -->
@@ -539,6 +556,24 @@
       </div>
     </el-dialog>
 
+    <!-- 合并病害弹窗 -->
+    <el-dialog
+      title="合并病害"
+      :visible.sync="mergeVisibleDialog"
+      width="75rem"
+      append-to-body
+      destroy-on-close
+      @close="mergeCancel"
+    >
+      <merge-dialog
+        :segmentList="segmentList"
+        :tableDefect="tableDefect"
+        :defectStatus="defectStatus"
+        :mergeItem="mergeItem"
+        @mergeCancel="mergeCancel"
+      ></merge-dialog>
+    </el-dialog>
+
     <!-- 查看图片大图 -->
     <el-dialog
       title="查看图片"
@@ -578,11 +613,16 @@ import {
   getStatesList,
   getDefectStatus,
   changeDefectStatus,
+  splitDefect,
 } from "@/api/xj/disease";
 import { getToken } from "@/utils/auth";
+import MergeDialog from "./components/merge-dialog.vue";
 
 export default {
   name: "Defect",
+  components: {
+    MergeDialog,
+  },
   data() {
     return {
       typeInfo: [],
@@ -721,9 +761,13 @@ export default {
       // 查看图片大图弹窗显隐控制
       showImageDialog: false,
       // 查看大图片路径
-      currentImageItem: "",
+      currentImageItem: {},
       // 图片病害位置信息
       rects: [],
+      // 合并病害弹窗显隐控制
+      mergeVisibleDialog: false,
+      // 传合并病害弹窗数据
+      mergeItem: {},
     };
   },
   created() {
@@ -809,6 +853,7 @@ export default {
     /** 查询缺陷列表 */
     getList() {
       // 处理日期范围
+      this.loading = true;
       const params = {
         ...this.queryParams,
         startTime: this.dateTime ? this.dateTime[0] : "",
@@ -1058,6 +1103,27 @@ export default {
         .catch(() => {});
     },
 
+    /* 合并按钮事件 */
+    mergeDefect(row) {
+      this.mergeItem = row;
+      this.mergeVisibleDialog = true;
+    },
+
+    /* 拆分按钮事件 */
+    splitDefect(row) {
+      const snapshotId = row.snapshotId;
+      this.$modal
+        .confirm(`是否确认拆分该条记录？`)
+        .then(() => {
+          return splitDefect({ snapshotId: snapshotId });
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("拆分成功");
+        })
+        .catch(() => {});
+    },
+
     /** 导出按钮操作 */
     handleExport() {
       this.download(
@@ -1199,6 +1265,14 @@ export default {
     /* 关闭查看图片弹窗 */
     imgCancel() {
       this.showImageDialog = false;
+      this.currentImageItem = {};
+      this.rects = [];
+    },
+
+    /* 关闭合并病害弹窗 */
+    mergeCancel() {
+      this.mergeVisibleDialog = false;
+      this.getList();
     },
   },
 };

src/views/xj/inspection/road-management/index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-11 15:14:16
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-01 15:59:48
+ * @LastEditTime: 2024-11-05 09:22:27
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\road-management\index.vue
  * @Description: 巡检信息-路产管理
 -->
@@ -724,6 +724,8 @@ export default {
     /* 关闭查看图片弹窗 */
     imgCancel() {
       this.showImageDialog = false;
+      this.currentImageItem = {};
+      this.rects = [];
     },
   },
 };

src/views/xj/inspection/traffic-management/index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-12 14:52:23
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-01 16:11:11
+ * @LastEditTime: 2024-11-05 09:23:30
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\traffic-management\index.vue
  * @Description: 巡检管理-交安事件
 -->
@@ -668,7 +668,7 @@ export default {
       this.viewVisible = false;
       this.dialogItem = { title: "添加事件" };
     },
-    
+
     /* 打开查看图片弹窗 */
     showScreenImg(item) {
       this.currentImageItem = item;
@@ -722,6 +722,8 @@ export default {
     /* 关闭查看图片弹窗 */
     imgCancel() {
       this.showImageDialog = false;
+      this.currentImageItem = {};
+      this.rects = [];
     },
   },
 };