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>
@@ -109,7 +201,7 @@ export default {
     },
     imageItem: {
       type: Object,
-      default: () => { },
+      default: () => {},
     },
   },
   data() {
@@ -170,10 +262,10 @@ export default {
   },
   computed: {
     /**
- * @description: 当前展示的图片url
+     * @description: 当前展示的图片url
- * @param {*}
+     * @param {*}
- * @return {*}
+     * @return {*}
- */
+     */
     currentImage() {
       if (
         this.defectData.length > 0 &&
@@ -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;
       }
     },
@@ -214,10 +311,10 @@ export default {
   },
   methods: {
     /**
-   * @description: 获取路段下拉数据
+     * @description: 获取路段下拉数据
-   * @param {*}
+     * @param {*}
-   * @return {*}
+     * @return {*}
-   */
+     */
     getSegmentList() {
       getSegment().then(({ code, data }) => {
         if (code === 200) {
@@ -227,10 +324,10 @@ export default {
     },
 
     /**
-   * @description: 获取病害类型下拉数据
+     * @description: 获取病害类型下拉数据
-   * @param {*}
+     * @param {*}
-   * @return {*}
+     * @return {*}
-   */
+     */
     getDefectType() {
       getItemTypes({ classType: this.bottomTipClick }).then(
         ({ code, data }) => {
@@ -242,38 +339,39 @@ export default {
     },
 
     /**
-   * @description: 根据传回来的快照id查图片详细数据
+     * @description: 根据传回来的快照id查图片详细数据
-   * @param {*}
+     * @param {*}
-   * @return {*}
+     * @return {*}
-   */
+     */
     getMediaBySnapshotid() {
       getMediaIndex({
         classType: this.bottomTipClick,
         id: this.imageItem.snapshotId,
-      }).then(({ code, data }) => {
-        if (code === 200) {
-          this.currentIndex = data.index;
-          this.pageTip = data.page;
-          this.params.page = data.page;
-          this.params.size = data.size;
-          this.imgForm.segmentId = data.segmentId.toString();
-          this.getList();
-        }
-      }).finally(() => {
-        setTimeout(() => {
-          if (this.pageTip > 1) {
-            this.loadMoreTopImages()
-          }
-        }, 1000)
       })
+        .then(({ code, data }) => {
+          if (code === 200) {
+            this.currentIndex = data.index;
+            this.pageTip = data.page;
+            this.params.page = data.page;
+            this.params.size = data.size;
+            this.imgForm.segmentId = data.segmentId.toString();
+            this.getList();
+          }
+        })
+        .finally(() => {
+          setTimeout(() => {
+            if (this.pageTip > 1) {
+              this.loadMoreTopImages();
+            }
+          }, 1000);
+        });
     },
 
-
     /**
-   * @description: 切换维度事件
+     * @description: 切换维度事件
-   * @param {*}
+     * @param {*}
-   * @return {*}
+     * @return {*}
-   */
+     */
     changeImgType(type) {
       if (this.labelCheck != type) {
         this.labelCheck = type;
@@ -291,12 +389,11 @@ export default {
       }
     },
 
-
     /**
-   * @description: 向下获取图片列表
+     * @description: 向下获取图片列表
-   * @param {*}
+     * @param {*}
-   * @return {*}
+     * @return {*}
-   */
+     */
     getList() {
       this.loading = true;
       const data = {
@@ -319,14 +416,14 @@ export default {
         .finally(() => {
           this.showImage(this.currentIndex);
           this.loading = false;
-        })
+        });
     },
 
     /**
-   * @description: 向上获取列表数据
+     * @description: 向上获取列表数据
-   * @param {*}
+     * @param {*}
-   * @return {*}
+     * @return {*}
-   */
+     */
     getListTop() {
       this.loading = true;
       const data = {
@@ -345,17 +442,17 @@ export default {
               this.defectData = this.aimList;
             }
           }
-        }).finally(() => {
-
-          this.loading = false;
         })
+        .finally(() => {
+          this.loading = false;
+        });
     },
 
     /**
-   * @description: 点击搜索事件
+     * @description: 点击搜索事件
-   * @param {*}
+     * @param {*}
-   * @return {*}
+     * @return {*}
-   */
+     */
     handleQuery() {
       const stakeReg = /^K\d{4}\+\d{3}$/;
       if (this.imgForm.stakeStart) {
@@ -400,10 +497,10 @@ export default {
     },
 
     /**
-   * @description: 重置事件
+     * @description: 重置事件
-   * @param {*}
+     * @param {*}
-   * @return {*}
+     * @return {*}
-   */
+     */
     resetQuery() {
       this.defectData = [];
       this.ariaList = [];
@@ -424,10 +521,10 @@ export default {
     },
 
     /**
-   * @description: 左侧点击图片事件
+     * @description: 左侧点击图片事件
-   * @param {*}
+     * @param {*}
-   * @return {*}
+     * @return {*}
-   */
+     */
     showImage(index) {
       // if (this.currentIndex === this.defectData.length - 1) {
       //   this.loadMoreBottomImages();
@@ -443,20 +540,20 @@ export default {
     },
 
     /**
-   * @description: 点击下方小列表
+     * @description: 点击下方小列表
-   * @param {*}
+     * @param {*}
-   * @return {*}
+     * @return {*}
-   */
+     */
     showThumbnailImage(index) {
       this.selectedThumbnail = index;
       this.updateRects();
     },
 
     /**
-   * @description: 使图片展示在父级容器可视区域
+     * @description: 使图片展示在父级容器可视区域
-   * @param {*}
+     * @param {*}
-   * @return {*}
+     * @return {*}
-   */
+     */
     scrollToCurrentImage() {
       if (this.$refs.sidebar) {
         const sidebarImages = this.$refs.sidebar.querySelectorAll("img");
@@ -471,10 +568,10 @@ export default {
     },
 
     /**
-   * @description: 滚动触发事件
+     * @description: 滚动触发事件
-   * @param {*}
+     * @param {*}
-   * @return {*}
+     * @return {*}
-   */
+     */
     handleScroll() {
       const sidebar = this.$refs.sidebar;
       // 滚动到顶加载数据
@@ -496,20 +593,20 @@ export default {
     },
 
     /**
-   * @description: 向下加载更多图片方法
+     * @description: 向下加载更多图片方法
-   * @param {*}
+     * @param {*}
-   * @return {*}
+     * @return {*}
-   */
+     */
     loadMoreBottomImages() {
       this.params.page += 1;
       this.getList();
     },
 
     /**
-   * @description: 向上加载更多图片
+     * @description: 向上加载更多图片
-   * @param {*}
+     * @param {*}
-   * @return {*}
+     * @return {*}
-   */
+     */
     loadMoreTopImages() {
       this.pageTip -= 1;
       this.params.page -= 1;
@@ -518,10 +615,10 @@ export default {
     },
 
     /**
-   * @description: 点击目标详情/空间维度事件
+     * @description: 点击目标详情/空间维度事件
-   * @param {*}
+     * @param {*}
-   * @return {*}
+     * @return {*}
-   */
+     */
     clickImage(item) {
       if (this.labelCheck === "aim") {
         this.labelCheck = "aria";
@@ -537,10 +634,10 @@ export default {
     },
 
     /**
-   * @description: 键盘事件
+     * @description: 键盘事件
-   * @param {*}
+     * @param {*}
-   * @return {*}
+     * @return {*}
-   */
+     */
     handleKeydown(event) {
       if (event.key === "ArrowUp") {
         event.preventDefault();
@@ -607,10 +704,10 @@ export default {
     },
 
     /**
-   * @description: 图片红框位置
+     * @description: 图片红框位置
-   * @param {*}
+     * @param {*}
-   * @return {*}
+     * @return {*}
-   */
+     */
     getRectStyle([left, top, width, height], index) {
       const image = this.$refs.mainImage;
       const container = this.$refs.imageContainer;
@@ -814,7 +911,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: 1.1rem;
     }
@@ -842,7 +939,7 @@ export default {
     opacity: 0.7;
   }
 
-  >div {
+  > div {
     cursor: pointer;
     white-space: nowrap;
     position: absolute;

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() {
@@ -213,7 +310,7 @@ export default {
      * @param {*}
      * @return {*}
      */
-    handleSelect() { },
+    handleSelect() {},
 
     /**
      * @description: 获取巡检路段下拉数据
@@ -328,7 +425,7 @@ export default {
      * @return {*}
      */
     submitForm(type) {
-      this.wordExport(this.dialogItem, type)
+      this.wordExport(this.dialogItem, type);
     },
 
     /**
@@ -339,22 +436,24 @@ 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 })
-        const link = document.createElement("a");
+        .then((res) => {
-        const blob = new Blob([res], {
+          const link = document.createElement("a");
-          type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+          const blob = new Blob([res], {
+            type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+          });
+          link.style.display = "none";
+          link.href = URL.createObjectURL(blob);
+          // TODO 源文件名问题
+          link.download = item.extId;
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+        })
+        .finally(() => {
+          this.exportCancel();
+          loadingInstance.close();
         });
-        link.style.display = "none";
-        link.href = URL.createObjectURL(blob);
-        // TODO 源文件名问题
-        link.download = item.extId;
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-      }).finally(() => {
-        this.exportCancel()
-        loadingInstance.close();
-      })
     },
 
     /**
@@ -396,13 +495,13 @@ export default {
     },
 
     /**
- * @description: 关闭导出弹窗
+     * @description: 关闭导出弹窗
- * @return {*}
+     * @return {*}
- */
+     */
     exportCancel() {
       this.exportVisible = false;
       this.dialogItem = {};
-    }
+    },
   },
 };
 </script>
@@ -434,7 +533,6 @@ export default {
 
 /* 新增弹窗/编辑弹窗 */
 .addForm {
-
   .el-select,
   .el-cascader {
     width: 100%;