fix：预警设置修改，巡检任务修改

src/api/xj/task.js

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-14 10:04:12
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-25 13:55:51
+ * @LastEditTime: 2024-12-02 16:39:01
  * @FilePath: \znxjxt-ui\src\api\xj\task.js
  * @Description: 巡检任务管理接口
  */
@@ -43,3 +43,23 @@ export function getRoadType() {
   });
 }
 
+
+// 根据id查看新增病害详情
+export function getTaskDefectDetail(params) {
+  return request({
+    url: "/xj/defect/getNewDefectByTaskId",
+    method: "get",
+    params,
+  });
+}
+
+// 查询列表病害类型
+export function getDefectList(params) {
+  return request({
+    // 病害类型下拉
+    // url: "/metadata/defectType",
+    url: "/bigscreen/v2/getDefectTypesDrowDown",
+    method: "get",
+    params,
+  });
+}

src/api/xj/warnSetup.js

@@ -2,8 +2,8 @@
  * @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 09:26:24
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-05 13:54:44
+ * @LastEditTime: 2024-12-02 14:46:30
- * @FilePath: \znxjxt-ui\src\api\xj\disease.js
+ * @FilePath: \znxjxt-ui\src\api\xj\warnSetup.js
  * @Description: 巡检信息-预警设置
  */
 import request from "@/utils/request";
@@ -18,3 +18,21 @@ export function getDefectList(params) {
     params,
   });
 }
+
+// 查询预警设置列表
+export function getWarnSetupList(params) {
+  return request({
+    url: "/alarmSetting/list",
+    method: "get",
+    params,
+  });
+}
+
+// 更新预警设置
+export function updateWarnSetup(params) {
+  return request({
+    url: "/alarmSetting/update",
+    method: "put",
+    data: params,
+  });
+}

src/plugins/websocket.js

@@ -4,6 +4,10 @@ import modal from "./modal";
 class WebSocketService {
   constructor() {
     this.ws = null;
+    // // 记录重连次数
+    // this.reconnectCount = 0;
+    // // 最大重连次数
+    // this.maxReconnectAttempts = 2;
     this.reconnectInterval = 3000;
     this.eventListeners = {};
   }
@@ -26,10 +30,23 @@ class WebSocketService {
     };
 
     this.ws.onerror = (error) => {
-      console.error("WebSocket error:", error);
+      // console.error("WebSocket error:", error);
       this.emit("error", error);
     };
 
+    // this.ws.onclose = () => {
+    //   console.log("WebSocket closed");
+    //   this.emit("close");
+
+    //   if (this.reconnectCount < this.maxReconnectAttempts) {
+    //     this.reconnectCount++;
+    //     console.log(`尝试第 ${this.reconnectCount} 次重连`);
+    //     setTimeout(() => this.connect(url), this.reconnectInterval);
+    //   } else {
+    //     console.log("达到最大重连次数,停止重连");
+    //     modal.msgError("WebSocket连接失败,请检查网络后刷新页面重试");
+    //   }
+    // };
     this.ws.onclose = () => {
       console.log("WebSocket closed");
       this.emit("close");

src/views/big-screen/disease-components/traffic-log.vue

@@ -2,8 +2,8 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-11-08 11:56:02
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-19 13:52:47
+ * @LastEditTime: 2024-12-03 09:45:06
- * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-log.vue
+ * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\traffic-log.vue
  * @Description: 病害巡检-病害日志
 -->
 <template>
@@ -333,8 +333,6 @@ export default {
           this.$modal.msgWarning("请按照格式填写公里桩进行修改");
         }
       } else {
-        console.log(this.dateTime,'ssssssss');
-        
         this.pagination.page = 1;
         const data = {
           ...this.trafficForm,
@@ -367,6 +365,7 @@ export default {
         state: "",
       };
       this.dateTime = [];
+      this.segmentList = [];
       this.getData();
     },
 

src/views/xj/inspection-warn/warning-setup/components/add-setup.vue

@@ -4,7 +4,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-01-08 11:56:02
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-01-08 13:52:47
+ * @LastEditTime: 2024-12-02 15:37:29
  * @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-setup\components\add-setup.vue
  * @Description: 预警中心-预警设置-新增/编辑组件
 -->
@@ -19,27 +19,29 @@
     >
       <el-row :gutter="24">
         <el-col :span="24">
-          <el-form-item label="病害类型" prop="defectType">
+          <el-form-item label="预警类型" prop="meteringType">
-            <el-cascader
+            <el-select
-              placeholder="请选择病害类型"
+              v-model="warningSetupForm.meteringType"
-              v-model="warningSetupForm.defectType"
+              placeholder="请选择预警类型"
-              :options="tableDefect"
-              :props="{
-                checkStrictly: false,
-                emitPath: false,
-                children: 'subTypes',
-              }"
               style="width: 100%"
               clearable
-            ></el-cascader>
+              @change="changeMeteringType"
+            >
+              <el-option
+                v-for="item in meteringList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="24">
+      <el-row :gutter="24" v-if="warningSetupForm.meteringType !== '面积'">
         <el-col :span="24">
-          <el-form-item label="预警病害长度" prop="targetLen">
+          <el-form-item label="预警病害长度" prop="length">
             <el-input-number
-              v-model="warningSetupForm.targetLen"
+              v-model="warningSetupForm.length"
               :min="0"
               placeholder="请输入预警病害长度"
               style="width: 100%"
@@ -47,11 +49,11 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="24">
+      <el-row :gutter="24" v-if="warningSetupForm.meteringType !== '长度'">
         <el-col :span="24">
-          <el-form-item label="预警病害面积" prop="targetArea">
+          <el-form-item label="预警病害面积" prop="area">
             <el-input-number
-              v-model="warningSetupForm.targetArea"
+              v-model="warningSetupForm.area"
               :min="0"
               placeholder="请输入预警病害面积"
               style="width: 100%"
@@ -68,8 +70,7 @@
 </template>
 
 <script>
-import m from "diagram-js/lib/core";
+import { updateWarnSetup } from "@/api/xj/warnSetup";
-
 export default {
   name: "AddSetup",
   props: {
@@ -89,22 +90,37 @@ export default {
     return {
       // 预警设置表单
       warningSetupForm: {
-        // 病害类型
+        // 预警类型
-        defectType: "",
+        meteringType: "",
         // 预警病害长度
-        targetLen: null,
+        length: null,
         // 预警病害面积
-        targetArea: null,
+        area: null,
       },
+      // 预警类型列表
+      meteringList: [
+        {
+          value: "长度",
+          label: "长度",
+        },
+        {
+          value: "面积",
+          label: "面积",
+        },
+        {
+          value: "长度/面积",
+          label: "长度/面积",
+        },
+      ],
       // 表单验证规则
       rules: {
-        defectType: [
+        meteringType: [
           { required: true, message: "请选择病害类型", trigger: "change" },
         ],
-        targetLen: [
+        length: [
           { required: true, message: "请输入预警病害长度", trigger: "blur" },
         ],
-        targetArea: [
+        area: [
           { required: true, message: "请输入预警病害面积", trigger: "blur" },
         ],
       },
@@ -114,7 +130,8 @@ export default {
     dialogItem: {
       handler(newVal) {
         if (Object.keys(newVal).length > 0) {
-          console.log(newVal, "sddd");
+          this.warningSetupForm = newVal;
+          this.changeMeteringType(newVal.meteringType);
         }
       },
       immediate: true,
@@ -122,6 +139,18 @@ export default {
     },
   },
   methods: {
+    /**
+     * @description: 选择预警类型改变事件
+     * @return {*}
+     */
+    changeMeteringType(value) {
+      if (value === "长度") {
+        this.warningSetupForm.area = null;
+      } else if (value === "面积") {
+        this.warningSetupForm.length = null;
+      }
+    },
+
     /**
      * @description: 点击确定事件
      * @return {*}
@@ -129,7 +158,16 @@ export default {
     submitForm() {
       this.$refs.warningSetupForm.validate((valid) => {
         if (valid) {
-          console.log(this.warningSetupForm);
+          const data = {
+            ...this.warningSetupForm,
+            id: this.dialogItem.id,
+          };
+          updateWarnSetup(data).then(({ code, data }) => {
+            if (code === 200) {
+              this.$modal.msgSuccess("更新成功");
+              this.$emit("cancel");
+            }
+          });
         }
       });
     },

src/views/xj/inspection-warn/warning-setup/index.vue

@@ -2,13 +2,13 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-01-08 11:56:02
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-01-08 13:52:47
+ * @LastEditTime: 2024-12-02 15:45:48
  * @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-setup\index.vue
  * @Description: 预警中心-预警设置
 -->
 <template>
   <div class="content">
-    <el-form
+    <!-- <el-form
       :model="setupForm"
       ref="setupForm"
       size="small"
@@ -96,7 +96,7 @@
           >删除
         </el-button>
       </el-col>
-    </el-row>
+    </el-row> -->
     <!-- 表格 -->
     <el-table
       ref="setupTable"
@@ -109,18 +109,24 @@
       <el-table-column type="index" label="序号"> </el-table-column>
       <el-table-column
         width="200"
-        label="时间"
+        label="预警名称"
         align="center"
-        prop="segmentName"
+        prop="defectName"
       >
+      </el-table-column>
+      <el-table-column label="预警标准" align="center" prop="meteringType" />
+      <el-table-column label="预警长度" align="center" prop="length" />
+      <el-table-column label="预警面积" align="center" prop="area" />
+      <el-table-column label="预警状态" align="center" prop="area">
         <template slot-scope="scope">
-          <span class="table-index">asd</span>
+          <el-switch
-          {{ scope.row.segmentName }}
+            v-model="scope.row.status"
+            active-value="启用"
+            @change="handleStatusChange(scope.row)"
+            inactive-value="停用"
+          />
         </template>
       </el-table-column>
-      <el-table-column label="消息内容" align="center" prop="stakeStart" />
-      <el-table-column label="车牌号" align="center" prop="stakeEnd" />
-      <el-table-column label="设备id" align="center" prop="stakeEnd" />
       <el-table-column
         label="操作"
         align="center"
@@ -135,14 +141,6 @@
             v-hasPermi="['system:defect:edit']"
             >编辑
           </el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['system:defect:remove']"
-            >删除
-          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -164,11 +162,10 @@
     <el-dialog
       title="新增预警设置"
       :visible.sync="addVisible"
-      width="40rem"
+      width="30rem"
       append-to-body
       :close-on-click-modal="false"
       destroy-on-close
-      @close="addCancel"
     >
       <add-setup
         v-if="addVisible"
@@ -181,7 +178,7 @@
 </template>
 
 <script>
-import { getDefectList } from "@/api/xj/warnSetup";
+import { getDefectList, getWarnSetupList,updateWarnSetup } from "@/api/xj/warnSetup";
 import AddSetup from "./components/add-setup.vue";
 export default {
   name: "WarningSetup",
@@ -218,7 +215,6 @@ export default {
     };
   },
   created() {
-    this.getTableDefect();
     this.getTableData();
   },
   methods: {
@@ -241,22 +237,31 @@ export default {
      * @return {*}
      */
     getTableData() {
-      this.setupList = [{ stakeStart: "assssssssasd" }];
+      this.loading = true;
+      getWarnSetupList()
+        .then(({ code, data }) => {
+          if (code === 200) {
+            this.setupList = data;
+          }
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
 
     /**
-     * @description: 点击查询事件
+     * @description: 切换预警状态事件
-     * @param {*}
+     * @param {*} row
      * @return {*}
      */
-    handleQuery() {},
+    handleStatusChange(row) {
-
+      updateWarnSetup(row).then(({ code, msg }) => {
-    /**
+        if (code === 200) {
-     * @description: 点击重置事件
+          this.$modal.msgSuccess(msg);
-     * @param {*}
+          this.getTableData();
-     * @return {*}
+        }
-     */
+      });
-    resetQuery() {},
+    },
 
     /**
      * @description: 列表选择改变事件

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-05 09:22:27
+ * @LastEditTime: 2024-12-02 11:09:10
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\road-management\index.vue
  * @Description: 巡检信息-路产管理
 -->
@@ -272,7 +272,7 @@
           <el-button
             size="mini"
             type="text"
-            icon="el-icon-edit"
+            icon="el-icon-view"
             @click="viewDefect(scope.row)"
             >查看
           </el-button>

src/views/xj/inspection/task-management/components/task-retrace.vue

@@ -0,0 +1,81 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-14 10:36:09
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-12-02 14:13:10
+ * @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\components\task-retrace.vue
+ * @Description: 巡检任务-回顾任务
+-->
+
+<template>
+  <div class="view-content">
+    <div class="view-left" ref="sidebar" @scroll="handleScroll">
+      <img
+        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 class="main-content"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TaskRetrace",
+  props: {
+    dialogItem: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      // 左侧图片数据
+      defectData: [],
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /**
+     * @description: 获取左侧图片数据
+     * @return {*}
+     */
+    getList() {
+      const data = {};
+    },
+
+    /**
+     * @description: 滚动事件
+     * @param {*} e
+     * @return {*}
+     */
+    handleScroll(e) {
+      console.log(e);
+    },
+  },
+  mounted() {
+    window.addEventListener("keydown", this.handleKeydown);
+    window.addEventListener("resize", this.updateRects);
+  },
+  beforeDestroy() {
+    window.removeEventListener("keydown", this.handleKeydown);
+    window.removeEventListener("resize", this.updateRects);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.view-content {
+  width: 100%;
+  height: calc(100vh - 3rem);
+  display: flex;
+  flex-direction: row;
+  background-color: #2e3a46;
+}
+</style>

src/views/xj/inspection/task-management/components/task-view.vue

@@ -1,68 +1,147 @@
 <!--
  * @Author: SunTao 328867980@qq.com
- * @Date: 2024-10-14 10:36:09
+ * @Date: 2024-12-02 11:20:55
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-28 11:29:03
+ * @LastEditTime: 2024-12-02 16:57:55
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\components\task-view.vue
- * @Description: 巡检任务-查看路径
+ * @Description: 巡检信息-巡检任务-查看新增病害
 -->
-
 <template>
-  <div class="view-content">
+  <div class="task-view">
-    <div id="view-map">
+    <el-form
-      <fssm-map
+      class="viewForm"
-        ref="mapContent"
+      ref="viewForm"
-        @map-click="mapClick"
+      :model="viewForm"
-        @feature-dblclick="mapDbclick"
+      :rules="viewFormRules"
-      ></fssm-map>
+      label-width="5rem"
-    </div>
-    <div class="footer">
-      <div class="slider">
-        <el-slider
-          v-model="timeTip"
-          :step="sliderStep"
-          :marks="sliderMarks"
-          :show-tooltip="true"
-        ></el-slider>
-      </div>
-      <div class="pause">
-        <i
-          class="el-icon-video-play"
-          v-if="!animationVisable"
-          @click="animation(true)"
-        ></i>
-        <i
-          class="el-icon-video-pause"
-          v-if="animationVisable"
-          @click="animation(false)"
-        ></i>
-      </div>
-      <div class="speed">
-        <el-select
-          v-model="spaadCode"
-          @change="changeTimeTip"
-          placeholder="请选择"
     >
-          <el-option
+      <el-row :gutter="24">
-            v-for="item in speedOption"
+        <el-col :span="6">
-            :key="item.value"
+          <el-form-item label="病害类型">
-            :label="item.label"
+            <el-cascader
-            :value="item.value"
+              v-model="viewForm.defectType"
+              :options="defectCascaderList"
+              :props="{
+                checkStrictly: false,
+                emitPath: false,
+                children: 'subTypes',
+              }"
+              clearable
+            ></el-cascader>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="开始桩号" prop="stakeStart">
+            <el-input
+              v-model="viewForm.stakeStart"
+              placeholder="K00000+000"
+              size="medium"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="结束桩号" prop="stakeEnd">
+            <el-input
+              v-model="viewForm.stakeEnd"
+              placeholder="K00000+000"
+              size="medium"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            size="mini"
+            @click="handleQuery"
+            >搜索</el-button
           >
-          </el-option>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
-        </el-select>
+            >重置</el-button
+          >
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 数据表格 -->
+    <el-table
+      ref="defectTable"
+      v-loading="loading"
+      :data="defectList"
+      style="width: 100%"
+      height="35rem"
+    >
+      <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>
+    <!-- 分页组件 -->
+    <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>
+
+    <!-- 查看图片大图 -->
+    <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 FssmMap from "@/components/map/fssm-map";
+import { getTaskDefectDetail } from "@/api/xj/task";
-
 export default {
   name: "TaskView",
-  components: { FssmMap },
+  components: {},
   props: {
+    defectCascaderList: {
+      type: Array,
+      default: () => [],
+    },
     dialogItem: {
       type: Object,
       default: () => {},
@@ -70,113 +149,242 @@ export default {
   },
   data() {
     return {
-      // 进度条位置绑定值
+      // 查看新增病害表单
-      timeTip: "0",
+      viewForm: {
-      // 进度条标记配置项
+        taskId: "",
-      sliderMarks: {
+        defectType: "",
-        0: "18",
+        stakeStart: "",
-        100: "24",
+        stakeEnd: "",
       },
-      // 进度条步长
+      // 查看新增病害表单验证
-      sliderStep: 0.1,
+      viewFormRules: {
-      // 暂停/开始绑定
+        stakeStart: [
-      animationVisable: false,
-      // 定时器绑定
-      timer: null,
-      // 倍速绑定
-      spaadCode: 1,
-      // 倍数下拉
-      speedOption: [
           {
-          value: 1,
+            required: false,
-          label: "1x",
+            pattern: /^K\d{4}\+\d{3}$/,
-        },
+            trigger: "blur",
-        {
+            message: "请正确输入开始桩号",
-          value: 2,
-          label: "2x",
-        },
-        {
-          value: 5,
-          label: "5x",
-        },
-        {
-          value: 10,
-          label: "10x",
           },
         ],
+        stakeEnd: [
+          {
+            required: false,
+            pattern: /^K\d{4}\+\d{3}$/,
+            trigger: "blur",
+            message: "请正确输入结束桩号",
+          },
+        ],
+      },
+      // 病害类型列表
+      defectTypeList: [],
+      // 列表加载状态
+      loading: false,
+      // 列表数据绑定
+      defectList: [],
+      // 分页-列表总数
+      tableTotal: 0,
+      // 分页-页数页码
+      pagination: {
+        page: 1,
+        size: 10,
+      },
+      // 查看图片大图弹窗显隐控制
+      showImageDialog: false,
+      // 查看大图片路径
+      currentImageItem: "",
+      // 图片病害位置信息
+      rects: [],
     };
   },
   watch: {
-    timeTip: {
+    dialogItem: {
-      handler(val) {},
+      handler(val) {
+        this.viewForm.taskId = val.extId;
+        this.searchForm = JSON.parse(JSON.stringify(this.viewForm));
+        this.getDefectList();
+      },
+      immediate: true,
+      deep: true,
     },
   },
-  mounted() {},
   methods: {
-    /* 暂停/开始事件 */
+    /**
-    animation(boolen) {
+     * @description: 获取列表数据
-      this.animationVisable = boolen;
+     * @return {*}
-      if (boolen) {
+     */
-        this.timer = setInterval(() => {
+    getDefectList() {
-          this.timeTip = (this.timeTip + this.sliderStep).toFixed(1) * 1;
+      const data = {
-        }, 500);
+        ...this.searchForm,
-      } else {
+        ...this.pagination,
-        clearInterval(this.timer);
+      };
+      getTaskDefectDetail(data).then(({ code, rows, total }) => {
+        if (code === 200) {
+          this.defectList = rows;
+          this.tableTotal = total;
         }
+      });
     },
-    /* 进度条修改事件 */
+
-    changeTimeTip(value) {
+    /**
-      this.sliderStep = value * 0.1;
+     * @description: 点击搜索事件
+     * @return {*}
+     */
+    handleQuery() {
+      this.$refs.viewForm.validate((valid) => {
+        if (valid) {
+          this.searchForm = JSON.parse(JSON.stringify(this.viewForm));
+          this.getDefectList();
+        }
+      });
     },
-    /* 定时器事件 */
+
-    startTime(value) {},
+    /**
-    /* 地图点击事件 */
+     * @description: 点击重置事件
-    mapClick(feature) {},
+     * @return {*}
-    /* 地图双击事件 */
+     */
-    mapDbclick(feature) {},
+    resetQuery() {
+      this.searchForm = {
+        taskId: this.dialogItem.extId,
+      };
+      this.viewForm = {
+        taskId: this.dialogItem.extId,
+        defectType: "",
+        stakeStart: "",
+        stakeEnd: "",
+      };
+      this.getDefectList();
+    },
+
+    /**
+     * @description: 打开查看图片弹窗
+     * @param {*} item
+     * @return {*}
+     */
+    showScreenImg(item) {
+      this.currentImageItem = item;
+      this.showImageDialog = true;
+    },
+
+    /**
+     * @description: 图片位置信息获取
+     * @param {*}
+     * @return {*}
+     */
+    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],
+        },
+      ];
+      // this.rectsItem = this.defectData[this.currentIndex];
+    },
+
+    /**
+     * @description: 图片红框位置
+     * @param {*} { left, top, width, 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 {*}
+     * @return {*}
+     */
+    imgCancel() {
+      this.showImageDialog = false;
+      this.currentImageItem = {};
+      this.rects = [];
+    },
+
+    /**
+     * @description: 切换分页
+     * @param {*} arg
+     * @return {*}
+     */
+    handleCurrentChange(arg) {
+      this.pagination.page = arg;
+      this.getDefectList();
+    },
+
+    /**
+     * @description: 切换每条/页
+     * @param {*} arg
+     * @return {*}
+     */
+    handleSizeChange(arg) {
+      this.pagination.size = arg;
+      this.getDefectList();
     },
-  beforeDestroy() {
-    clearInterval(this.timer);
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.view-content {
+.task-view {
   width: 100%;
   height: 100%;
-  position: relative;
 }
 
-#view-map {
+/* 分页样式 */
+.pagination-part {
   width: 100%;
-  height: 40rem;
-}
-
-.footer {
-  height: 5rem;
-  width: 100%;
-  padding: 1rem;
   display: flex;
-  background-color: rgba(104, 128, 147, 0.3);
+  padding-top: 1rem;
+  justify-content: flex-end;
+}
 
-  .slider {
+/* 查看大图弹窗 */
-    width: calc(100% - 8rem);
+.image-container {
-    padding: 0 2rem;
+  position: relative;
+  width: 100%;
+  height: 80%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
 
-    ::v-deep .el-slider__marks-text {
+.image-container img {
-      width: 3rem;
+  max-width: 100%;
-    }
+  max-height: 100%;
-  }
+  object-fit: contain;
+}
 
-  .pause {
+.rect-overlay {
-    width: 3rem;
+  position: absolute;
-    font-size: 1.5rem;
+  pointer-events: none;
-    line-height: 2.5rem;
+  border: 2px solid red;
-  }
-
-  .speed {
-    width: 5rem;
-  }
 }
 </style>

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-10-25 13:59:25
+ * @LastEditTime: 2024-12-02 16:41:53
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\index.vue
  * @Description: 巡检管理-巡检任务
 -->
@@ -101,10 +101,29 @@
         align="center"
         class-name="small-padding fixed-width"
       >
-        <!-- slot-scope="scope" -->
+        <template slot-scope="scope">
-        <template>
+          <el-button
-          <el-button size="mini" type="text" icon="el-icon-s-flag">
+            size="mini"
-            <!-- @click="viewDefect(scope.row)" -->
+            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)"
+            v-hasPermi="['system:defect:edit']"
+            >回顾
+          </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-download"
+            @click="handleExport(scope.row)"
+            v-hasPermi="['system:defect:remove']"
+            >导出
           </el-button>
         </template>
       </el-table-column>
@@ -123,32 +142,63 @@
       >
       </el-pagination>
     </div>
-    <!-- 查看弹窗 -->
+    <!-- 查看新增病害弹窗 -->
     <el-dialog
-      title="路径查看"
+      title="查看新增病害"
       :visible.sync="viewVisible"
-      width="90rem"
+      width="80rem"
       append-to-body
       :close-on-click-modal="false"
       destroy-on-close
       @close="viewCancel"
     >
-      <task-view @cancel="viewCancel" :dialogItem="dialogItem"></task-view>
+      <task-view
+        v-if="viewVisible"
+        @cancel="viewCancel"
+        :dialogItem="dialogItem"
+        :defectCascaderList="defectCascaderList"
+      ></task-view>
+      <!-- <task-retrace
+        v-if="viewVisible"
+        @cancel="viewCancel"
+        :dialogItem="dialogItem"
+      ></task-retrace> -->
+    </el-dialog>
+
+    <!-- 回顾巡检任务弹窗 -->
+    <el-dialog
+      title="回顾任务"
+      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>
   </div>
 </template>
       
 <script>
+import TaskRetrace from "./components/task-retrace.vue";
 import TaskView from "./components/task-view.vue";
 import {
   getTaskTable,
   getSegment,
   getRoadType,
   getTaskIdList,
+  getDefectList,
 } from "@/api/xj/task";
 
 export default {
-  components: { TaskView },
+  components: { TaskRetrace, TaskView },
   data() {
     return {
       // 查询表单
@@ -189,15 +239,37 @@ export default {
       dialogItem: {},
       // 查看弹窗显隐控制
       viewVisible: false,
+      // 回顾弹窗显隐控制
+      retraceVisible: false,
+      // 病害类型下拉
+      defectCascaderList: [],
     };
   },
   created() {
     this.getTaskList();
     this.getSegmentList();
     this.getRoadTypeList();
+    this.getDefectCascaderList();
   },
   methods: {
-    /* 任务id远程搜索 结果 */
+    /**
+     * @description: 获取病害类型下拉数据
+     * @return {*}
+     */ 
+    getDefectCascaderList() {
+      getDefectList().then(({ code, data }) => {
+        if (code === 200) {
+          this.defectCascaderList = data;
+        }
+      });
+    },
+
+    /**
+     * @description: 任务id远程搜索 结果
+     * @param {*} item
+     * @param {*} cb
+     * @return {*}
+     */
     querySearchAsync(item, cb) {
       getTaskIdList({ name: item }).then(({ data, code }) => {
         if (code === 200) {
@@ -212,9 +284,18 @@ export default {
         }
       });
     },
-    /* 任务id选择事件 */
+
+    /**
+     * @description: 任务id选择事件
+     * @param {*}
+     * @return {*}
+     */
     handleSelect() {},
-    /* 获取巡检路段下拉数据 */
+
+    /**
+     * @description: 获取巡检路段下拉数据
+     * @return {*}
+     */
     getSegmentList() {
       getSegment().then(({ code, data }) => {
         if (code === 200) {
@@ -222,7 +303,11 @@ export default {
         }
       });
     },
-    /* 获取路产类型下拉数据 */
+
+    /**
+     * @description: 获取路产类型下拉数据
+     * @return {*}
+     */
     getRoadTypeList() {
       getRoadType().then(({ code, data }) => {
         if (code === 200) {
@@ -230,13 +315,21 @@ export default {
         }
       });
     },
-    /* 点击搜索事件 */
+
+    /**
+     * @description: 点击搜索事件
+     * @return {*}
+     */
     handleQuery() {
       this.pagination.page = 1;
       this.searchForm = JSON.parse(JSON.stringify(this.queryParams));
       this.getTaskList();
     },
-    /* 点击重置事件 */
+
+    /**
+     * @description: 点击重置事件
+     * @return {*}
+     */
     resetQuery() {
       this.searchForm = {};
       this.queryParams = {
@@ -247,7 +340,11 @@ export default {
       this.dateTime = [];
       this.getTaskList();
     },
-    /* 获取列表数据 */
+
+    /**
+     * @description: 获取列表数据
+     * @return {*}
+     */
     getTaskList() {
       const params = {
         ...this.pagination,
@@ -262,37 +359,87 @@ export default {
         }
       });
     },
-    /* 列表选择改变事件 */
+
+    /**
+     * @description: 列表选择改变事件
+     * @param {*} selection
+     * @return {*}
+     */
     handleSelectionChange(selection) {
       this.checkIds = selection.map((item) => item.taskId);
       this.single = selection.length !== 1;
       this.multiple = !selection.length;
     },
-    /* 点击路径事件 */
+
+    /**
+     * @description: 点击查看新增病害事件
+     * @param {*} item
+     * @return {*}
+     */
     viewDefect(item) {
       this.viewVisible = true;
       this.dialogItem = item;
     },
-    /* 切换分页 */
+
+    /**
+     * @description: 点击回顾事件
+     * @param {*} item
+     * @return {*}
+     */
+    handleRetrace(item) {
+      this.retraceVisible = true;
+      this.dialogItem = item;
+    },
+
+    /**
+     * @description: 点击导出事件
+     * @param {*} item
+     * @return {*}
+     */
+    handleExport(item) {},
+
+    /**
+     * @description: 切换分页
+     * @param {*} arg
+     * @return {*}
+     */
     handleCurrentChange(arg) {
       this.pagination.page = arg;
       this.getTaskList();
     },
-    /* 切换每条/页 */
+
+    /**
+     * @description: 切换每条/页
+     * @param {*} arg
+     * @return {*}
+     */
     handleSizeChange(arg) {
       this.pagination.size = arg;
       this.getTaskList();
     },
-    /* 关闭查看弹窗 */
+
+    /**
+     * @description: 关闭查看弹窗
+     * @return {*}
+     */
     viewCancel() {
       this.viewVisible = false;
       this.dialogItem = {};
     },
+
+    /**
+     * @description: 关闭回顾弹窗
+     * @return {*}
+     */
+    retraceCancel() {
+      this.retraceVisible = false;
+      this.dialogItem = {};
+    },
   },
 };
 </script>
 
-      <style lang="scss" scoped>
+<style lang="scss" scoped>
 .app-container {
   padding: 20px;
 }
@@ -349,5 +496,22 @@ export default {
     max-width: 25rem;
   }
 }
+
+.retrace-dialog {
+  ::v-deep .el-dialog__header {
+    padding: 10px;
+    background-color: #113463;
+
+    span,
+    i {
+      color: #ffffff;
+    }
+  }
+
+  ::v-deep .el-dialog__body {
+    padding: 0;
+    background-color: #2e3a46;
+  }
+}
 </style>
     

vue.config.js

@@ -35,8 +35,8 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://192.168.1.188:8080`,
+        // target: `http://192.168.1.188:8080`,
-        // target: `http://localhost:8080`,
+        target: `http://localhost:8080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''