fix：修改地图打点图片，修改点击切换图片问题

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-12-05 11:36:07
+ * @LastEditTime: 2024-12-06 15:47:24
  * @FilePath: \znxjxt-ui\src\views\big-screen\components\img-dialog.vue
  * @Description: 大屏查看图片弹窗
 -->
@@ -11,83 +11,175 @@
   <div class="app">
     <div class="left-list">
       <div class="img-top">
-        <div class="img-top-div" :class="labelCheck === 'aim' ? 'img-top-div-click' : ''"
+        <div
-          @click.stop="changeImgType('aim')">
+          class="img-top-div"
+          :class="labelCheck === 'aim' ? 'img-top-div-click' : ''"
+          @click.stop="changeImgType('aim')"
+        >
           目标维度
         </div>
-        <div class="img-top-div" :class="labelCheck === 'aria' ? 'img-top-div-click' : ''"
+        <div
-          @click.stop="changeImgType('aria')">
+          class="img-top-div"
+          :class="labelCheck === 'aria' ? 'img-top-div-click' : ''"
+          @click.stop="changeImgType('aria')"
+        >
           空间维度
         </div>
       </div>
       <div class="sidebar" ref="sidebar" @scroll="handleScroll">
-        <img v-for="(item, index) in defectData" :key="`${item.id}-${index}`" :src="item.url"
+        <img
-          :alt="'Image ' + (index + 1)" @click="showImage(index)" :class="{ selected: currentIndex === index }" />
+          v-for="(item, index) in defectData"
+          :key="`${item.id}-${index}`"
+          :src="item.url"
+          :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-form-item label="路段名称">
-            <el-select v-model="imgForm.segmentId" placeholder="请选择路段名称" :popper-append-to-body="false" filterable
+            <el-select
-              clearable>
+              v-model="imgForm.segmentId"
-              <el-option v-for="item in roadTypeList" :key="item.value" :label="item.label" :value="item.value" />
+              placeholder="请选择路段名称"
+              :popper-append-to-body="false"
+              filterable
+              clearable
+            >
+              <el-option
+                v-for="item in roadTypeList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
             </el-select>
           </el-form-item>
 
           <el-form-item label="病害类型">
-            <el-select v-model="imgForm.defectType" placeholder="请选择病害类型" :popper-append-to-body="false" clearable>
+            <el-select
-              <el-option v-for="item in defectTypeList" :key="item.value" :label="item.label" :value="item.value" />
+              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-form-item label="公里桩">
-            <el-input v-model="imgForm.stakeStart" placeholder="起始公里桩" style="width: 8rem" clearable />
+            <el-input
+              v-model="imgForm.stakeStart"
+              placeholder="起始公里桩"
+              style="width: 8rem"
+              clearable
+            />
             <span style="margin: 0 5px">-</span>
-            <el-input v-model="imgForm.stakeEnd" placeholder="终止公里桩" style="width: 8rem" clearable />
+            <el-input
+              v-model="imgForm.stakeEnd"
+              placeholder="终止公里桩"
+              style="width: 8rem"
+              clearable
+            />
           </el-form-item>
           <el-form-item class="form-item" label="病害状态" prop="state">
-            <el-select v-model="imgForm.state" :popper-append-to-body="false" placeholder="请选择病害状态" clearable>
+            <el-select
-              <el-option v-for="item in defectStatus" :key="item.value" :label="item.label" :value="item.value" />
+              v-model="imgForm.state"
+              :popper-append-to-body="false"
+              placeholder="请选择病害状态"
+              clearable
+            >
+              <el-option
+                v-for="item in defectStatus"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
             </el-select>
           </el-form-item>
-          <el-button type="primary" class="btn-submit" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button
-          <el-button class="btn-cancel" size="mini" @click="resetQuery">重置</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-form>
       </div>
       <!-- 图片展示 -->
       <div class="image-viewer">
         <div class="image-container" ref="imageContainer">
-          <div class="rect-overlay" v-for="(item, index) in checkedRectList" :key="`rect-overlay-${index}`"
+          <div
-            :style="getRectStyle(item.rectPosition, index)" @click="clickImage(item)">
+            class="rect-overlay"
+            v-for="(item, index) in checkedRectList"
+            :key="`rect-overlay-${index}`"
+            :style="getRectStyle(item.rectPosition, index)"
+            @click="clickImage(item)"
+          >
             <div :style="{ color: colorList[index] }" class="rect-overlay-text">
               目标详情>>
             </div>
           </div>
           <div class="rect-image">
-            <el-checkbox-group v-model="checkedRect" @change="handleCheckedRectChange">
+            <el-checkbox-group
-              <el-checkbox class="image-info" v-for="(item, index) in rectItem" :label="item.id"
+              v-model="checkedRect"
-                :key="`image-info-${index}`" :style="{ color: colorList[index] }">采集时间:
+              @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.type || "暂无数据" }}
                 <span v-if="bottomTipClick === '1'">
-                  病害面积：{{ item.area }}平方米 病害长度：{{ item.length * 1 <= 0 ? "暂无数据" : `${item.length}米` }} </span>
+                  病害面积：{{ item.area }}平方米 病害长度：{{
+                    item.length * 1 <= 0 ? "暂无数据" : `${item.length}米`
+                  }}
+                </span>
               </el-checkbox>
             </el-checkbox-group>
           </div>
-          <img :src="currentImage" alt="Main Image" ref="mainImage" @load="updateRects" />
+          <img
+            :src="currentImage"
+            alt="Main Image"
+            ref="mainImage"
+            @load="updateRects"
+          />
         </div>
       </div>
       <!-- 小图展示 -->
       <div class="thumbnail-row">
-        <img v-for="(mediaItem, index) in currentThumbnails" :key="'thumb-' + index" :src="mediaItem.img"
+        <img
-          :alt="'Thumb ' + (index + 1)" @click="showThumbnailImage(index)"
+          v-for="(mediaItem, index) in currentThumbnails"
-          :class="{ selected: selectedThumbnail === index }" />
+          :key="'thumb-' + index"
+          :src="mediaItem.img"
+          :alt="'Thumb ' + (index + 1)"
+          @click="showThumbnailImage(index)"
+          :class="{ selected: selectedThumbnail === index }"
+        />
       </div>
     </div>
   </div>
@@ -181,6 +273,11 @@ export default {
       ) {
         // this.showImage(this.currentIndex);
         const index = this.defectData[this.currentIndex].items.length - 1;
+        if (index !== this.selectedThumbnail) {
+          return this.defectData[this.currentIndex].items[
+            this.selectedThumbnail
+          ].img;
+        }
         return this.defectData[this.currentIndex].items[index].img;
       }
     },
@@ -250,7 +347,8 @@ export default {
       getMediaIndex({
         classType: this.bottomTipClick,
         id: this.imageItem.snapshotId,
-      }).then(({ code, data }) => {
+      })
+        .then(({ code, data }) => {
           if (code === 200) {
             this.currentIndex = data.index;
             this.pageTip = data.page;
@@ -259,16 +357,16 @@ export default {
             this.imgForm.segmentId = data.segmentId.toString();
             this.getList();
           }
-      }).finally(() => {
+        })
+        .finally(() => {
           setTimeout(() => {
             if (this.pageTip > 1) {
-            this.loadMoreTopImages()
+              this.loadMoreTopImages();
             }
-        }, 1000)
+          }, 1000);
-      })
+        });
     },
 
-
     /**
      * @description: 切换维度事件
      * @param {*}
@@ -291,7 +389,6 @@ export default {
       }
     },
 
-
     /**
      * @description: 向下获取图片列表
      * @param {*}
@@ -319,7 +416,7 @@ export default {
         .finally(() => {
           this.showImage(this.currentIndex);
           this.loading = false;
-        })
+        });
     },
 
     /**
@@ -345,10 +442,10 @@ export default {
               this.defectData = this.aimList;
             }
           }
-        }).finally(() => {
-
-          this.loading = false;
         })
+        .finally(() => {
+          this.loading = false;
+        });
     },
 
     /**

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-12-04 11:00:07
+ * @LastEditTime: 2024-12-06 15:08:38
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\disease-management\index.vue
  * @Description: 巡检信息管理-病害管理
 -->
@@ -555,7 +555,13 @@
                 <p>路段名称：{{ viewForm.segmentName }}</p>
                 <!-- <p>病害坐标：{{ viewForm.geometry.coordinates }}</p> -->
                 <p>病害类型：{{ viewForm.defectTypeName }}</p>
-                <p>病害长度：{{ viewForm.targetLen }} 米</p>
+                <p>
+                  病害长度：{{
+                    viewForm.targetLen * 1 < 0
+                      ? ""
+                      : `${viewForm.targetLen}米`
+                  }}
+                </p>
                 <p>病害id：{{ viewForm.id }}</p>
                 <p>快照id：{{ viewForm.snapshotId }}</p>
               </div>

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

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-14 09:48:43
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-05 16:27:28
+ * @LastEditTime: 2024-12-06 09:20:27
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\index.vue
  * @Description: 巡检管理-巡检任务
 -->
@@ -10,31 +10,73 @@
 <template>
   <div class="app-container">
     <!-- 搜索表单 -->
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      label-width="100px"
+    >
       <el-form-item label="任务id" prop="taskId">
-        <el-autocomplete v-model="queryParams.taskId" :fetch-suggestions="querySearchAsync" placeholder="请输入任务id"
+        <el-autocomplete
-          @select="handleSelect"></el-autocomplete>
+          v-model="queryParams.taskId"
+          :fetch-suggestions="querySearchAsync"
+          placeholder="请输入任务id"
+          @select="handleSelect"
+        ></el-autocomplete>
       </el-form-item>
       <el-form-item label="车牌号码" prop="plateNo">
-        <el-input v-model="queryParams.plateNo" placeholder="请输入车牌号码" clearable=""></el-input>
+        <el-input
+          v-model="queryParams.plateNo"
+          placeholder="请输入车牌号码"
+          clearable=""
+        ></el-input>
       </el-form-item>
       <el-form-item label="巡检路段" prop="segmentId">
-        <el-select v-model="queryParams.segmentId" placeholder="请选择巡检路段" clearable>
+        <el-select
-          <el-option v-for="item in segmentList" :key="item.value" :label="item.label" :value="item.value" />
+          v-model="queryParams.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-form-item label="巡检时间" prop="dateTime">
-        <el-date-picker v-model="dateTime" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
+        <el-date-picker
-          format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable />
+          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>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</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" :data="roadList" @selection-change="handleSelectionChange"
+    <el-table
-      style="width: 100%">
+      ref="roadTable"
+      :data="roadList"
+      @selection-change="handleSelectionChange"
+      style="width: 100%"
+    >
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="巡检路段" align="center" prop="segmentName" />
       <el-table-column label="巡检路段编码" align="center" prop="segmentCode">
@@ -53,29 +95,67 @@
       <el-table-column label="车牌号码" align="center" prop="plateNo">
       </el-table-column>
       <el-table-column label="任务id" align="center" prop="extId" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <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="viewDefect(scope.row)">查看
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="viewDefect(scope.row)"
+            >查看
           </el-button>
-          <el-button size="mini" type="text" icon="el-icon-refresh-right" @click="handleRetrace(scope.row)">回顾
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-refresh-right"
+            @click="handleRetrace(scope.row)"
+            >回顾
           </el-button>
-          <el-button style="margin-left: 0.5rem;" size="mini" type="text" icon="el-icon-download"
+          <el-button
-            @click="handelExpport(scope.row)">导出</el-button>
+            style="margin-left: 0.5rem"
+            size="mini"
+            type="text"
+            icon="el-icon-download"
+            @click="handelExpport(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"
+      <el-pagination
-        :page-sizes="[10, 20, 30, 40]" :page-size.sync="pagination.size" @size-change="handleSizeChange"
+        background
-        layout="total, sizes, prev, pager, next, jumper" :total="tableTotal">
+        :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="viewVisible" width="80rem" append-to-body :close-on-click-modal="false"
+    <el-dialog
-      destroy-on-close @close="viewCancel">
+      title="查看新增病害"
-      <task-view v-if="viewVisible" @cancel="viewCancel" :dialogItem="dialogItem"
+      :visible.sync="viewVisible"
-        :defectCascaderList="defectCascaderList"></task-view>
+      width="80rem"
+      append-to-body
+      :close-on-click-modal="false"
+      destroy-on-close
+      @close="viewCancel"
+    >
+      <task-view
+        v-if="viewVisible"
+        @cancel="viewCancel"
+        :dialogItem="dialogItem"
+        :defectCascaderList="defectCascaderList"
+      ></task-view>
       <!-- <task-retrace
         v-if="viewVisible"
         @cancel="viewCancel"
@@ -84,18 +164,36 @@
     </el-dialog>
 
     <!-- 回顾巡检任务弹窗 -->
-    <el-dialog title="回顾任务" fullscreen :visible.sync="retraceVisible" width="80rem" append-to-body
+    <el-dialog
-      :close-on-click-modal="false" destroy-on-close @close="retraceCancel" class="retrace-dialog">
+      title="回顾任务"
-      <task-retrace v-if="retraceVisible" @cancel="retraceCancel" :dialogItem="dialogItem"></task-retrace>
+      fullscreen
+      :visible.sync="retraceVisible"
+      width="80rem"
+      append-to-body
+      :close-on-click-modal="false"
+      destroy-on-close
+      @close="retraceCancel"
+      class="retrace-dialog"
+    >
+      <task-retrace
+        v-if="retraceVisible"
+        @cancel="retraceCancel"
+        :dialogItem="dialogItem"
+      ></task-retrace>
     </el-dialog>
 
     <!-- 导出数据弹窗 -->
-    <el-dialog title="导出" :visible.sync="exportVisible" width="30rem" append-to-body :close-on-click-modal="false"
+    <el-dialog
-      destroy-on-close @close="exportCancel">
+      title="导出"
+      :visible.sync="exportVisible"
+      width="30rem"
+      append-to-body
+      :close-on-click-modal="false"
+      destroy-on-close
+      @close="exportCancel"
+    >
       <template>
-        <div style="font-size: 1.5rem;">
+        <div style="font-size: 1.5rem">导出是否附带图片</div>
-          导出是否附带图片
-        </div>
         <div class="dialog-footer">
           <el-button type="primary" @click="submitForm(true)">确 定</el-button>
           <el-button @click="submitForm(false)">取 消</el-button>
@@ -165,7 +263,6 @@ export default {
 
       // 导出弹窗显隐控制
       exportVisible: false,
-
     };
   },
   created() {
@@ -328,7 +425,7 @@ export default {
      * @return {*}
      */
     submitForm(type) {
-      this.wordExport(this.dialogItem, type)
+      this.wordExport(this.dialogItem, type);
     },
 
     /**
@@ -339,7 +436,8 @@ export default {
     wordExport(item, type) {
       Loading.service({ fullscreen: true });
       let loadingInstance = Loading.service({ fullscreen: true });
-      exportDefectData({ taskId: item.extId, media: type }).then((res) => {
+      exportDefectData({ taskId: item.extId, media: type })
+        .then((res) => {
           const link = document.createElement("a");
           const blob = new Blob([res], {
             type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
@@ -351,10 +449,11 @@ export default {
           document.body.appendChild(link);
           link.click();
           document.body.removeChild(link);
-      }).finally(() => {
-        this.exportCancel()
-        loadingInstance.close();
         })
+        .finally(() => {
+          this.exportCancel();
+          loadingInstance.close();
+        });
     },
 
     /**
@@ -402,7 +501,7 @@ export default {
     exportCancel() {
       this.exportVisible = false;
       this.dialogItem = {};
-    }
+    },
   },
 };
 </script>
@@ -434,7 +533,6 @@ export default {
 
 /* 新增弹窗/编辑弹窗 */
 .addForm {
-
   .el-select,
   .el-cascader {
     width: 100%;