fix：修改地图展示1

package.json

@@ -47,6 +47,7 @@
     "diagram-js": "^11.4.1",
     "echarts": "^5.4.0",
     "echarts-gl": "^2.0.9",
+    "element-resize-detector": "^1.2.4",
     "element-ui": "2.15.14",
     "file-saver": "2.0.5",
     "flv.js": "^1.6.2",

src/api/xj/diseaseLine.js

@@ -0,0 +1,18 @@
+/*
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2025-04-08 13:47:06
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2025-04-08 13:49:28
+ * @FilePath: \znxjxt-ui\src\api\xj\diseaseLine.js
+ * @Description: 巡检信息-护拦板高度
+ */
+import request from "@/utils/request";
+
+// 获取护拦板高度列表
+export function getBarrierBoardList(query) {
+  return request({
+    url: "/barrierBoard/list",
+    method: "get",
+    params: query,
+  });
+}

src/api/xj/mapDisease.js

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-08 09:26:24
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-05 13:40:07
+ * @LastEditTime: 2025-04-08 13:42:28
  * @FilePath: \znxjxt-ui\src\api\xj\mapDisease.js
  * @Description: 巡检信息-病害管理接口
  */
@@ -16,3 +16,12 @@ export function getSegment() {
     method: "post",
   });
 }
+
+// 查询轮廓标缺失列表
+export function getDelineatorList(params) {
+  return request({
+    url: "/delineator/list",
+    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-03-28 13:51:38
+ * @LastEditTime: 2025-03-31 13:02:21
  * @FilePath: \znxjxt-ui\src\components\map\fssm-map.vue
  * @Description: 公共地图
 -->
@@ -130,6 +130,11 @@ export default {
       type: String,
       default: "cva_c",
     },
+    // 接受传过来的弹窗类型
+    popupType: {
+      type: String,
+      default: "mapLine",
+    },
   },
   data() {
     return {
@@ -459,10 +464,14 @@ export default {
           // 获取弹窗数据
           const popupData = feature.get("data");
           // 获取弹窗内元素并赋值
-          this.$refs.popupContent.innerHTML = `<span>路段名称：</span><span>${popupData.name}</span><br/>
+          if (this.popupType === "mapLine") {
-          <span>病害数：</span><span>${popupData.count}个</span><br/>
+            this.$refs.popupContent.innerHTML = `<span>路段名称：</span><span>${popupData.name}</span><br/>
-          <span>起始桩号：</span><span>${popupData.stakeStart}</span><br/>
+            <span>病害数：</span><span>${popupData.count}个</span><br/>
-          <span>终止桩号：</span><span>${popupData.stakeEnd}</span>`;
+            <span>起始桩号：</span><span>${popupData.stakeStart}</span><br/>
+            <span>终止桩号：</span><span>${popupData.stakeEnd}</span>`;
+          } else if (this.popupType === "dieaseLine") {
+            this.$refs.popupContent.innerHTML = `<span>护拦板高度：</span><span>${popupData.value}</span>`;
+          }
           dislogLay.setPosition(coordinate);
         } else {
           dislogLay.setPosition(undefined);

src/views/big-screen/index.vue

@@ -719,7 +719,7 @@ export default {
           if (code === 200) {
             this.messageList = rows;
             this.noticeNum = total;
-            if(total > 99){
+            if (total > 99) {
               clearInterval(this.messageTimer);
             }
           }

src/views/xj/inspection/diease-line/index.vue

@@ -0,0 +1,74 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2025-03-25 11:10:16
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2025-04-08 13:56:59
+ * @FilePath: \znxjxt-ui\src\views\xj\inspection\diease-line\index.vue
+ * @Description: 地图展示病害-首页
+-->
+<template>
+  <div class="diease-line-content">
+    <fssm-map class="map-diease-map" :popupType="'dieaseLine'"></fssm-map>
+  </div>
+</template>
+
+<script>
+import { getBarrierBoardList } from "@/api/xj/diseaseLine";
+import FssmMap from "@/components/map/fssm-map.vue";
+export default {
+  name: "DieaseLine",
+  components: {
+    FssmMap,
+  },
+  data() {
+    return {
+      pointList: [],
+      lineList: [],
+    };
+  },
+  created() {
+    this.getMapPoint();
+  },
+  methods: {
+    /**
+     * @description: 获取地图点位数据
+     * @param {*}
+     * @return {*}
+     */
+    getMapPoint() {
+      getBarrierBoardList({ page: 0, size: 100000 }).then(({ code, data }) => {
+        if (code === 200) {
+          console.log(data, "dfdfdf");
+        }
+      });
+    },
+
+    /**
+     * @description: 绘制地图点位
+     * @param {*}
+     * @return {*}
+     */
+    drawMapPoint() {},
+
+    /**
+     * @description: 绘制地图线段
+     * @param {*}
+     * @return {*}
+     */
+    drawMap() {},
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.diease-line-content {
+  width: 100%;
+  height: calc(100vh - 5.3rem);
+  padding: 0.5rem;
+
+  .map-diease-map {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/xj/inspection/map-diease/components/diease-view.vue

@@ -0,0 +1,40 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2025-04-10 16:44:08
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2025-04-10 16:50:40
+ * @FilePath: \znxjxt-ui\src\views\xj\inspection\map-diease\components\diease-view.vue
+ * @Description: 巡检信息-地图展示1
+-->
+<template>
+  <div class="view-diease">
+    <el-carousel arrow="always" :autoplay="false">
+      <el-carousel-item
+        v-for="(item, index) in dislogItem"
+        :key="`carousel-${index}`"
+      >
+        <image :src="item.img" mode="scaleToFill" />
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DieaseView",
+  props: {
+    dislogItem: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/xj/inspection/map-diease/index.vue

@@ -2,56 +2,131 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2025-03-25 11:10:16
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2025-03-28 14:14:07
+ * @LastEditTime: 2025-04-10 16:51:45
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\map-diease\index.vue
- * @Description: 地图展示病害-首页
+ * @Description: 地图展示筛选病害-首页
 -->
 <template>
   <div class="map-diease-content">
-    <div class="diease-form">
+    <div class="diease-left">
-      <el-form
+      <div class="diease-form">
-        :model="queryParams"
+        <el-form
-        :rules="rules"
+          :model="queryParams"
-        ref="queryForm"
+          :rules="rules"
-        size="small"
+          ref="queryForm"
-        :inline="true"
+          size="small"
-        label-width="100px"
+          :inline="true"
+          label-width="100px"
+        >
+          <el-form-item label="道路名称" prop="segmentId">
+            <el-select
+              v-model="queryParams.segmentId"
+              placeholder="请选择路段"
+              filterable
+              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="">
+            <el-button
+              type="primary"
+              icon="el-icon-search"
+              size="mini"
+              @click="handleQuery"
+              >筛选</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </div>
+      <!-- 列表 -->
+      <el-table
+        ref="roadTable"
+        v-loading="loading"
+        :data="tableList"
+        style="width: 100%"
+        @row-dblclick="handleCurrentChange"
       >
-        <el-form-item label="道路名称" prop="segmentId">
+        <el-table-column label="路段名称" align="center" prop="segmentName">
-          <el-select
+        </el-table-column>
-            v-model="queryParams.segmentId"
+        <el-table-column label="类型" align="center" prop="defectTypeName" />
-            placeholder="请选择路段"
+        <el-table-column label="开始桩号" align="center" prop="stakeStart" />
-            filterable
+        <el-table-column label="结束桩号" align="center" prop="stakeEnd" />
-            clearable
+        <el-table-column
-          >
+          label="创建时间"
-            <el-option
+          align="center"
-              v-for="item in segmentList"
+          prop="createdTimeLocal"
-              :key="item.value"
+        >
-              :label="item.label"
+        </el-table-column>
-              :value="item.value"
+        <el-table-column
-            />
+          label="操作"
-          </el-select>
+          align="center"
-        </el-form-item>
+          class-name="small-padding fixed-width"
-        <el-form-item label="">
+        >
-          <el-button
+          <template slot-scope="scope">
-            type="primary"
+            <el-button
-            icon="el-icon-search"
+              size="mini"
-            size="mini"
+              type="text"
-            @click="handleQuery"
+              icon="el-icon-view"
-            >筛选</el-button
+              @click="viewMapPicture(scope.row)"
-          >
+              >查看
-        </el-form-item>
+            </el-button>
-      </el-form>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页组件 -->
+      <div class="pagination-part">
+        <el-pagination
+          background
+          :current-page.sync="pagination.page"
+          @current-change="handleCurrentChange"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size.sync="pagination.size"
+          @size-change="handleSizeChange"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="tableTotal"
+        >
+        </el-pagination>
+      </div>
     </div>
-    <fssm-map class="map-diease-map" :maxZoom="22"></fssm-map>
+    <fssm-map
+      ref="mapDieaseMap"
+      class="map-diease-map"
+      :maxZoom="24"
+      @feature-select="featureSelect"
+    ></fssm-map>
+    <!-- 查看弹窗 -->
+    <el-dialog
+      title="查看"
+      :visible.sync="viewVisible"
+      width="80rem"
+      append-to-body
+      :close-on-click-modal="false"
+      destroy-on-close
+      @close="viewCancel"
+    >
+      <diease-view v-if="viewVisible" :dislogItem="dislogItem"></diease-view>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getSegment } from "@/api/xj/mapDisease";
+import { Feature } from "ol";
+import { Point } from "ol/geom";
+import { Style, Icon, Fill, Stroke, Circle, Text } from "ol/style";
+import Cluster from "ol/source/Cluster";
+import VectorSource from "ol/source/Vector";
+import VectorLayer from "ol/layer/Vector";
+import { getSegment, getDelineatorList } from "@/api/xj/mapDisease";
 import fssmMap from "@/components/map/fssm-map.vue";
+import DieaseView from "./components/diease-view.vue";
 export default {
-  components: { fssmMap },
+  components: { fssmMap, DieaseView },
   name: "MapDiease",
   data() {
     return {
@@ -59,9 +134,9 @@ export default {
       queryParams: {
         // 道路名称
         segmentId: "",
-        // 距离小于
-        maxLength: "",
       },
+      // 查询表单
+      searchForm: {},
       // 表单规则
       rules: {
         maxLength: [
@@ -74,10 +149,28 @@ export default {
       },
       // 道路名称下拉数据
       segmentList: [],
+      // 表格加载状态
+      loading: false,
+      // 表格数据
+      tableList: [],
+      // 地图打点数据
+      centerPiont: [],
+      // 分页-列表总数
+      tableTotal: 0,
+      // 分页-页数页码
+      pagination: {
+        page: 1,
+        size: 10,
+      },
+      // 查看弹窗显隐控制
+      viewVisible: false,
+      // 传查看弹窗数据
+      dislogItem: [],
     };
   },
   created() {
     this.getSegmentList();
+    this.getTableList();
   },
   methods: {
     /**
@@ -93,25 +186,185 @@ export default {
       });
     },
 
+    /**
+     * @description: 获取表格数据
+     * @param {*}
+     * @return {*}
+     */
+    getTableList() {
+      getDelineatorList({ ...this.searchForm, ...this.pagination }).then(
+        ({ code, rows, total }) => {
+          if (code === 200) {
+            this.tableList = rows;
+            this.tableTotal = total;
+          }
+        }
+      );
+    },
+
     /**
      * @description: 筛选事件
      * @param {*}
      * @return {*}
      */
     handleQuery() {
-      this.$refs.queryForm.validate((valid) => {
+      this.searchForm = JSON.parse(JSON.stringify(this.queryParams));
-        if (valid) {
+      this.pagination.page = 1;
-          this.drawMapPoint();
+      this.getTableList();
-        }
+    },
+
+    /**
+     * @description: 切换分页
+     * @param {*} arg
+     * @return {*}
+     */
+    handleCurrentChange(arg) {
+      this.pagination.page = arg;
+      this.getTableList();
+    },
+
+    /**
+     * @description: 切换每条/页
+     * @param {*} arg
+     * @return {*}
+     */
+    handleSizeChange(arg) {
+      this.pagination.size = arg;
+      this.getTableList();
+    },
+
+    /**
+     * @description: 点击选中行
+     * @param {*} e
+     * @return {*}
+     */
+    handleCurrentChange(e) {
+      if (this.clusters) {
+        const map = this.$refs.mapDieaseMap.instance.get("map");
+        map.removeLayer(this.clusters);
+        this.clusters = null;
+      }
+      this.centerPiont = [];
+      this.centerPiont = [
+        ...e.defectLocation.map((item) => {
+          return {
+            geometry: item,
+            flag: "nomal",
+          };
+        }),
+        ...e.endCoordinates?.map((item) => {
+          return {
+            geometry: item,
+            flag: "green",
+          };
+        }),
+        ...e.startCoordinates?.map((item) => {
+          return {
+            geometry: item,
+            flag: "green",
+          };
+        }),
+      ].filter((item) => {
+        return item.geometry;
+      });
+      this.fitMapToPoints(e.defectLocation);
+      this.drawPoint();
+    },
+
+    /**
+     * @description: 点击查看绘制点位
+     * @param {*}
+     * @return {*}
+     */
+    viewMapPicture(item) {
+      this.viewVisible = true;
+      this.dislogItem = item.media;
+    },
+
+    /**
+     * @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]),
+          ];
+        });
+
+        // 获取地图实例
+        const map = this.$refs.mapDieaseMap.instance.get("map");
+
+        // 使用 fit 方法根据边界框计算最佳缩放级别
+        map.getView().fit(extent, {
+          duration: 500, // 动画持续时间
+          padding: [100, 100, 100, 100], // 边缘填充
+        });
+      }
+    },
+
+    /**
+     * @description: 绘制地图点位
+     * @return {void}
+     */
+    drawPoint() {
+      const features = [];
+      this.centerPiont.forEach((element) => {
+        // 修改坐标样式
+        const point = new Point(element.geometry);
+        const feature = new Feature({
+          geometry: point,
+          data: element.flag,
+          // 自己设置一个标识
+          type: "icon",
+        });
+        feature.setStyle([
+          new Style({
+            image: new Icon({
+              crossOrigin: "anonymous",
+              src: require(`@/assets/index/${element.flag}.png`),
+              // size: [40, 40],
+              scale: 0.5, // 图标缩放比例
+            }),
+          }),
+        ]);
+        features.push(feature);
+      });
+      this.clusters = new VectorLayer({
+        source: new VectorSource({
+          features,
+        }),
+        properties: {
+          type: "point",
+        },
+      });
+      this.$nextTick(() => {
+        const map = this.$refs.mapDieaseMap.instance.get("map");
+        map.addLayer(this.clusters);
       });
     },
 
     /**
-     * @description: 绘制点位
+     * @description: 点击地图点位
-     * @param {*}
+     * @return {void}
-     * @return {*}
      */
-    drawMapPoint() {},
+    featureSelect(e) {},
+
+    /**
+     * @description: 关闭查看图片弹窗
+     * @return {void}
+     */
+    viewCancel() {
+      this.viewVisible = false;
+      this.dislogItem = [];
+    },
   },
 };
 </script>
@@ -122,15 +375,33 @@ export default {
   height: calc(100vh - 5.3rem);
   padding: 0.5rem;
   box-sizing: border-box;
+  display: flex;
 
-  .diease-form {
+  .diease-left {
-    width: 100%;
+    width: 50%;
-    height: 6%;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    padding: 0 1rem;
+
+    .diease-form {
+      width: 100%;
+      height: 6%;
+    }
   }
 
   .map-diease-map {
-    width: 100%;
+    width: 50%;
-    height: 94%;
+    height: 100%;
   }
 }
+
+/* 分页样式 */
+.pagination-part {
+  width: 100%;
+  display: flex;
+  padding-top: 1rem;
+  justify-content: flex-end;
+}
 </style>