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-12-05 15:34:41
+ * @LastEditTime: 2025-01-02 15:10:39
  * @FilePath: \znxjxt-ui\src\api\xj\task.js
  * @Description: 巡检任务管理接口
  */
@@ -74,3 +74,12 @@ export function exportDefectData(params) {
     params,
   });
 }
+
+// 根据任务id查询病害点位
+export function getDefectPoint(params) {
+  return request({
+    url: "/xj/xjtask/getMapInfoByTaskId",
+    method: "get",
+    params,
+  });
+}

src/components/map/fssm-map.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-14 10:46:23
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2025-01-02 10:33:02
+ * @LastEditTime: 2025-01-02 16:17:20
  * @FilePath: \znxjxt-ui\src\components\map\fssm-map.vue
  * @Description: 公共地图
 -->
@@ -428,7 +428,9 @@ export default {
         this.$emit("map-moveend", zoom);
       });
       // 图层选择事件
-      this.selectSingClick = new Select();
+      this.selectSingClick = new Select({
+        style: null,
+      });
       map.addInteraction(this.selectSingClick);
       this.selectSingClick.on("select", (e) => {
         this.$emit("feature-select", e);

src/views/xj/document/maintenance-notice/components/edit-dialog.vue

@@ -180,6 +180,7 @@ export default {
       handler(val) {
         this.editForm = {
           ...val,
+          segmentId: val.segmentId === "未知路段" ? "" : val.segmentId,
           id: null,
           defectId: val.id,
           createdTime: null,

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

@@ -0,0 +1,224 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2025-01-02 11:56:20
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2025-01-02 15:54:11
+ * @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\components\task-map.vue
+ * @Description: 巡检任务-地图弹窗
+-->
+<template>
+  <div class="content">
+    <!-- 多选框切换坐标类型 -->
+    <div class="check-box">
+      <el-cascader
+        ref="screenCascader"
+        v-model="mapCareSelect"
+        placeholder="病害类型筛选"
+        :options="defectCascaderList"
+        collapse-tags
+        :props="{
+          multiple: true,
+          emitPath: false,
+          children: 'subTypes',
+        }"
+        @change="changeMapCareSelect"
+        clearable
+      ></el-cascader>
+    </div>
+    <fssm-map ref="taskMap"></fssm-map>
+  </div>
+</template>
+
+<script>
+// 接口
+import { getDefectPoint } from "@/api/xj/task";
+import FssmMap from "@/components/map/fssm-map.vue";
+import { Feature } from "ol";
+import { Point } from "ol/geom";
+import VectorSource from "ol/source/Vector";
+import VectorLayer from "ol/layer/Vector";
+import { Style, Icon } from "ol/style";
+export default {
+  name: "TaskMap",
+  components: {
+    FssmMap,
+  },
+  props: {
+    // 弹窗传的数据
+    dialogItem: {
+      type: Object,
+      default: () => {},
+    },
+    // 病害类型筛选下拉数据
+    defectCascaderList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      // 病害类型筛选绑定
+      mapCareSelect: [],
+      // 地图打点图层
+      markLayerPoints: null,
+      // 中心点集合(过滤后得点位)
+      centerPiont: [],
+      // 中心点集合（所有点位）
+      drawPointList: [],
+    };
+  },
+  mounted() {
+    this.getMapPoint();
+  },
+  methods: {
+    /**
+     * @description: 病害类型筛选改变事件
+     * @return {void}
+     */
+    changeMapCareSelect(value) {
+      if (value.length > 0) {
+        this.centerPiont = this.drawPointList.filter((item) => {
+          return value.includes(item.iconType);
+        });
+      } else {
+        this.centerPiont = this.drawPointList;
+      }
+      this.drawPoint();
+    },
+
+    /**
+     * @description: 获取地图点位的方法
+     * @return {void}
+     */
+    getMapPoint() {
+      getDefectPoint({ id: this.dialogItem.extId }).then(({ code, data }) => {
+        if (code === 200) {
+          this.drawPointList = data.map((item) => {
+            if (item.geometry) {
+              return {
+                ...item,
+                geometry: [item.geometry[0], item.geometry[1]],
+              };
+            }
+            return [];
+          });
+          this.centerPiont = data.map((item) => {
+            if (item.geometry) {
+              return {
+                ...item,
+                geometry: [item.geometry[0], item.geometry[1]],
+              };
+            }
+            return [];
+          });
+          // 如果不是病害巡检，则绘制点位
+          // 如果图片弹窗打开，则绘制点位
+          // if (!this.shouldLoadClusters) {
+          // 修改地图中心点位
+          const pointArray = data.map((item) => {
+            if (item.geometry) {
+              return [item.geometry[0], item.geometry[1]];
+            }
+            return [];
+          });
+          this.fitMapToPoints(pointArray);
+          this.drawPoint();
+          // }
+        }
+      });
+    },
+
+    /**
+     * @description: 根据点位计算地图中心点
+     * @return {void}
+     */
+    fitMapToPoints(points) {
+      if (points.length > 0) {
+        // 创建一个空的 extent
+        let extent = [Infinity, Infinity, -Infinity, -Infinity];
+        // 计算所有点的边界框（extent）
+        points.forEach((point) => {
+          extent = [
+            Math.min(extent[0], point[0]),
+            Math.min(extent[1], point[1]),
+            Math.max(extent[2], point[0]),
+            Math.max(extent[3], point[1]),
+          ];
+        });
+        this.$nextTick(() => {
+          // 获取地图实例
+          const map = this.$refs.taskMap.instance.get("map");
+
+          // 使用 fit 方法根据边界框计算最佳缩放级别
+          map.getView().fit(extent, {
+            duration: 500, // 动画持续时间
+            padding: [10, 10, 10, 10], // 边缘填充
+          });
+        });
+      }
+    },
+
+    /**
+     * @description: 绘制地图点位
+     * @return {void}
+     */
+    drawPoint() {
+      const features = [];
+      this.centerPiont.forEach((element) => {
+        // 修改坐标样式
+        const point = new Point(element.geometry);
+        const feature = new Feature({
+          geometry: point,
+          data: element,
+          // 自己设置一个标识
+          type: "icon",
+        });
+        // 设置点位样式
+        feature.setStyle([
+          new Style({
+            image: new Icon({
+              crossOrigin: "anonymous",
+              src: require(`@/assets/screen/index/${element.iconTypeName}.png`),
+              // size: [40, 40],
+              scale: 0.5, // 图标缩放比例
+              displacement: [0, 30],
+            }),
+          }),
+        ]);
+        features.push(feature);
+      });
+      //设置地图的数据源
+      const pointSource = new VectorSource({
+        features,
+      });
+      if (!this.markLayerPoints) {
+        this.markLayerPoints = new VectorLayer({
+          source: pointSource,
+          properties: {
+            type: "point",
+          },
+        });
+        this.$nextTick(() => {
+          const map = this.$refs.taskMap.instance.get("map");
+          map.addLayer(this.markLayerPoints);
+        });
+      } else {
+        this.markLayerPoints.setSource(pointSource);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 45rem;
+  position: relative;
+
+  .check-box {
+    position: absolute;
+    z-index: 1;
+  }
+}
+</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-12-27 14:03:45
+ * @LastEditTime: 2025-01-02 15:21:44
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\index.vue
  * @Description: 巡检管理-巡检任务
 -->
@@ -95,7 +95,11 @@
       </el-table-column>
       <el-table-column label="发现病害数" align="center" prop="defectCount">
       </el-table-column>
-      <el-table-column label="发现新增病害数" align="center" prop="newDefectCount">
+      <el-table-column
+        label="发现新增病害数"
+        align="center"
+        prop="newDefectCount"
+      >
       </el-table-column>
       <el-table-column label="任务id" align="center" prop="extId" />
       <el-table-column
@@ -107,10 +111,13 @@
           <el-popover placement="left" width="auto" trigger="hover">
             <p>导出是否附带图片？</p>
             <div style="text-align: right; margin: 0">
-              <el-button size="mini" @click="wordExport(scope.row,false)"
+              <el-button size="mini" @click="wordExport(scope.row, false)"
                 >取消</el-button
               >
-              <el-button type="primary" size="mini" @click="wordExport(scope.row,true)"
+              <el-button
+                type="primary"
+                size="mini"
+                @click="wordExport(scope.row, true)"
                 >确定</el-button
               >
             </div>
@@ -130,6 +137,14 @@
             @click="viewDefect(scope.row)"
             >查看
           </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-help"
+            style="margin-left: 0.5rem"
+            @click="viewMap(scope.row)"
+            >地图
+          </el-button>
           <!-- <el-button
             size="mini"
             type="text"
@@ -177,6 +192,22 @@
       ></task-retrace> -->
     </el-dialog>
 
+    <el-dialog
+      title="查看地图"
+      :visible.sync="mapView"
+      width="90%"
+      append-to-body
+      :close-on-click-modal="false"
+      destroy-on-close
+      @close="mapCancel"
+    >
+      <task-map
+        v-if="mapView"
+        :dialogItem="dialogItem"
+        :defectCascaderList="defectCascaderList"
+      ></task-map>
+    </el-dialog>
+
     <!-- 回顾巡检任务弹窗 -->
     <el-dialog
       title="回顾任务"
@@ -202,6 +233,7 @@
 import { Loading } from "element-ui";
 import TaskRetrace from "./components/task-retrace.vue";
 import TaskView from "./components/task-view.vue";
+import taskMap from "./components/task-map.vue";
 import {
   getTaskTable,
   getSegment,
@@ -212,7 +244,7 @@ import {
 } from "@/api/xj/task";
 
 export default {
-  components: { TaskRetrace, TaskView },
+  components: { TaskRetrace, TaskView, taskMap },
   data() {
     return {
       // 查询表单
@@ -251,11 +283,12 @@ export default {
       dialogItem: {},
       // 查看弹窗显隐控制
       viewVisible: false,
+      // 地图弹窗显隐控制
+      mapView: false,
       // 回顾弹窗显隐控制
       retraceVisible: false,
       // 病害类型下拉
       defectCascaderList: [],
-
     };
   },
   created() {
@@ -387,6 +420,16 @@ export default {
       this.dialogItem = item;
     },
 
+    /**
+     * @description: 点击地图病害事件
+     * @param {*} item
+     * @return {*}
+     */
+    viewMap(item) {
+      this.mapView = true;
+      this.dialogItem = item;
+    },
+
     /**
      * @description: 点击回顾事件
      * @param {*} item
@@ -401,8 +444,8 @@ export default {
      * @description: 导出文件
      * @return {*}
      */
-    submitForm(item,type) {
+    submitForm(item, type) {
-      console.log(item,'fdfdfd')
+      console.log(item, "fdfdfd");
       this.wordExport(this.dialogItem, type);
     },
 
@@ -464,6 +507,14 @@ export default {
       this.dialogItem = {};
     },
 
+    /**
+     * @description: 关闭地图弹窗
+     * @return {*}
+     */
+    mapCancel() {
+      this.mapView = false;
+    },
+
     /**
      * @description: 关闭回顾弹窗
      * @return {*}
@@ -472,7 +523,6 @@ export default {
       this.retraceVisible = false;
       this.dialogItem = {};
     },
-
   },
 };
 </script>