fix：大屏打点功能修改

src/api/xj/screen/index.js

@@ -1,3 +1,11 @@
+/*
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-24 15:03:28
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-31 15:36:37
+ * @FilePath: \znxjxt-ui\src\api\xj\screen\index.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import request from "@/utils/request";
 
 // 获取数据栏右上角选择数据接口
@@ -34,3 +42,31 @@ export function comppanyImg() {
     method: "get",
   });
 }
+
+// 获取病害筛选弹窗列表数据
+export function defeaseList(data) {
+    return request({
+      url: "/bigscreen/getCurrentDefectPage",
+      method: "post",
+      data,
+    });
+  }
+
+//   获取病害筛选弹窗路段下拉数据
+export function getSegment(data) {
+    return request({
+      url: "/bigscreen/selectIdList",
+      method: "post",
+      data,
+    });
+  }
+
+
+  // 根据选择的按钮类型查下级选项框
+  export function getItemTypes(params) {
+    return request({
+      url: "/metadata/getItemTypes",
+      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: 2024-10-31 13:58:48
+ * @LastEditTime: 2024-10-31 17:35:26
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\components\fssm-map.vue
  * @Description: 公共地图
 -->
@@ -204,7 +204,7 @@ export default {
           zoom: this.zoom, //图层缩放大小
           projection: "EPSG:4326",
           minZoom: 7,
-          maxZoom: 14,
+          maxZoom: 18,
         }),
         layers: [tianditu_vec_c, tianditu_img_c, tianditu_cva_c],
       });

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-10-30 17:01:57
+ * @LastEditTime: 2024-10-31 16:13:31
  * @FilePath: \znxjxt-ui\src\views\big-screen\components\img-dialog.vue
  * @Description: 大屏查看图片弹窗
 -->
@@ -31,10 +31,10 @@
           label-width="5rem"
         >
           <el-row :gutter="24">
-            <el-col :span="8">
+            <el-col :span="7">
               <el-form-item label="路段名称">
                 <el-select
-                  v-model="imgForm.roadName"
+                  v-model="imgForm.segmentId"
                   placeholder="请选择路段名称"
                   :popper-append-to-body="false"
                   clearable
@@ -48,6 +48,23 @@
                 </el-select>
               </el-form-item>
             </el-col>
+            <el-col :span="7">
+              <el-form-item label="病害类型">
+                <el-select
+                  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-col>
             <el-col :span="10">
               <el-form-item label="公里桩">
                 <el-input
@@ -65,6 +82,8 @@
                 />
               </el-form-item>
             </el-col>
+          </el-row>
+          <el-row>
             <el-col :span="6">
               <el-button
                 type="primary"
@@ -100,7 +119,7 @@
           采集时间: {{ new Date(rectsItem.createdTime).toLocaleString() }}<br />
           起始桩号: {{ rectsItem.stakeStart || "暂无数据" }} 终止桩号:
           {{ rectsItem.stakeEnd || "暂无数据" }}<br />
-          路产状态: {{ filterState(rectsItem.state) }} 融合状态: 未融合
+          路产状态: {{ filterState(rectsItem.state) }} 
         </div>
       </div>
       <!-- 小图展示 -->
@@ -119,7 +138,8 @@
 </template>
 
 <script>
-import { listDefect, getSegment, getDefectStatus } from "@/api/xj/disease";
+import { getDefectStatus } from "@/api/xj/disease";
+import { defeaseList, getSegment, getItemTypes } from "@/api/xj/screen/index";
 export default {
   name: "ImgDialog",
   data() {
@@ -135,7 +155,9 @@ export default {
       // 表单绑定
       imgForm: {
         // 路段名称
-        roadName: "",
+        segmentId: "",
+        // 病害类型
+        defectType: "",
         // 起始公里桩
         stakeStart: "",
         // 终止公里桩
@@ -143,6 +165,8 @@ export default {
       },
       // 路段下拉数据
       roadTypeList: [],
+      // 病害类型下拉数据
+      defectTypeList: [],
       // 分页绑定
       params: {
         page: 1,
@@ -170,6 +194,7 @@ export default {
   created() {
     this.getSegmentList();
     this.getDefectStatusList();
+    this.getDefectType();
   },
   methods: {
     /* 查询病害状态下拉数据 */
@@ -198,6 +223,14 @@ export default {
         }
       });
     },
+    /* 获取病害类型下拉数据 */
+    getDefectType() {
+      getItemTypes({ type: "defect" }).then(({ code, data }) => {
+        if (code === 200) {
+          this.defectTypeList = data;
+        }
+      });
+    },
     /* 获取图片列表/点击搜索事件 */
     getList() {
       this.loading = true;
@@ -205,9 +238,9 @@ export default {
         ...this.imgForm,
         ...this.params,
       };
-      listDefect(data)
+      defeaseList(data)
         .then((response) => {
-          this.defectData.push(...response.rows);
+          this.defectData.push(...response.data);
           this.loading = false;
         })
         .catch(() => {
@@ -255,7 +288,8 @@ export default {
     resetQuery() {
       this.defectData = [];
       this.imgForm = {
-        roadName: "",
+        segmentId: "",
+        defectType: "",
         stakeStart: "",
         stakeEnd: "",
       };
@@ -448,7 +482,7 @@ export default {
 
 .toolbar {
   width: 100%;
-  height: 5rem;
+  height: 6rem;
   display: flex;
   align-items: center;
   background-color: #333c42;
@@ -463,7 +497,7 @@ export default {
     }
 
     .el-select {
-      width: 12rem;
+      width: 10rem;
 
       .el-input--small .el-input__inner {
         color: #ffffff;
@@ -530,7 +564,7 @@ export default {
 }
 
 .image-viewer {
-  height: 33rem;
+  height: 32rem;
   display: flex;
   flex-direction: column;
   align-items: center;

src/views/big-screen/index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-17 11:34:00
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-31 13:32:00
+ * @LastEditTime: 2024-11-01 13:02:35
  * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
  * @Description: 大屏首页
 -->
@@ -103,7 +103,7 @@
                 v-for="(item, index) in iconTypeList"
                 :label="item.value"
                 :key="`check-${index}`"
-                >{{ item.name }}</el-checkbox
+                >{{ item.label }}</el-checkbox
               >
             </el-checkbox-group>
           </fssm-scroll>
@@ -182,7 +182,6 @@ import FssmMap from "@/components/map/fssm-map.vue";
 import { Feature } from "ol";
 import { Point } from "ol/geom";
 import { Style, Icon, Fill, Stroke, Circle, Text } from "ol/style";
-import logo from "@/assets/xc.png";
 import VectorSource from "ol/source/Vector";
 import VectorLayer from "ol/layer/Vector";
 import * as geomExports from "ol/geom";
@@ -212,6 +211,7 @@ import {
   mapPointList,
   mapPciList,
   comppanyImg,
+  getItemTypes,
 } from "@/api/xj/screen/index";
 export default {
   name: "BigScreen",
@@ -329,8 +329,12 @@ export default {
         { name: "道路资产", component: "RoadScreen" },
         { name: "交安事件", component: "TrafficScreen" },
       ],
-      // 中心点集合
+      // 中心点集合(全部)
       centerPiont: [],
+      // 中心点集合（当前）
+      drawPointList: [],
+      // 点位图标map
+      mapLogeList: {},
       // 线段点集合
       lineString: [],
       // 地图放大缩小层级
@@ -395,7 +399,8 @@ export default {
     getMapCare() {
       comppanyImg().then(({ code, data }) => {
         if (code === 200) {
-          console.log(data, "ffff");
+          // this.mapCareList = data.filter((item) => item.lat && item.lon);
+          // console.log(this.mapCareList)
         }
       });
       this.mapCareList = [
@@ -501,7 +506,15 @@ export default {
     },
     /* 切换icon类型多选框事件 */
     handleChecked(value) {
-      console.log(value, "icontype");
+      this.centerPiont = this.drawPointList.filter(
+        (item) => value.indexOf(item.iconType) > -1
+      );
+      this.$nextTick(() => {
+        const map = this.$refs.roadMap.instance.get("map");
+        map.removeLayer(this.clusters);
+        this.clusters = null;
+        this.drawPoint();
+      });
     },
     /* 点击图片点位切换地图事件 */
     changeMap(boolen, value) {
@@ -522,9 +535,21 @@ export default {
       if (!this.clusters) {
         mapPointList({ type: this.mapClick }).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[0], item.geometry[1]];
+                return {
+                  ...item,
+                  geometry: [item.geometry[0], item.geometry[1]],
+                };
               }
               return [];
             });
@@ -538,10 +563,10 @@ export default {
       const features = [];
       this.centerPiont.forEach((element) => {
         // 修改坐标样式
-        const point = new Point(element);
+        const point = new Point(element.geometry);
         const feature = new Feature({
           geometry: point,
-          data: { data: "123", type: "icon" },
+          data: { iconType: element.iconType },
           // 自己设置一个标识
           type: "icon",
         });
@@ -570,28 +595,57 @@ export default {
         source: clusterSource,
         name: "clusterLayer",
         zIndex: 10,
-        style: function clusterStyle(feature) {
+        style: (feature) => {
           const count = feature.get("features").length;
-          return new Style({
+          if (count > 1) {
-            image: new Icon({
+            return new Style({
-              crossOrigin: "anonymous",
+              image: new Icon({
-              src: logo,
+                crossOrigin: "anonymous",
-              // 图标缩放比例
+                src: require(`@/assets/screen/index/龟裂.png`),
-              scale: 0.05,
+                // 图标缩放比例
-              // 0.3为30度
+                scale: 0.6,
-              rotation: 0.3,
+                displacement: [0, 30],
-            }),
+                // 0.3为30度
-            text: new Text({
+                // rotation: 0.3,
-              textAlign: "center", //位置
-              textBaseline: "middle",
-              font: "normal 14px 微软雅黑",
-              offsetY: 15,
-              fill: new Fill({
-                color: "#ffffff",
               }),
-              text: count > 1 ? count.toString() : "",
+              text: new Text({
-            }),
+                textAlign: "center", //位置
-          });
+                textBaseline: "middle",
+                font: "normal 14px 微软雅黑",
+                offsetY: -50,
+                fill: new Fill({
+                  color: "#ffffff",
+                }),
+                text: count.toString(),
+              }),
+            });
+          } else {
+            return new Style({
+              image: new Icon({
+                crossOrigin: "anonymous",
+                src: require(`@/assets/screen/index/${
+                  this.mapLogeList[
+                    feature.getProperties().features[0].get("data").iconType
+                  ]
+                }.png`),
+                // 图标缩放比例
+                scale: 0.6,
+                displacement: [0, 30],
+                // 0.3为30度
+                // rotation: 0.3,
+              }),
+              text: new Text({
+                textAlign: "center", //位置
+                textBaseline: "middle",
+                font: "normal 14px 微软雅黑",
+                offsetY: -50,
+                fill: new Fill({
+                  color: "#ffffff",
+                }),
+                text: "",
+              }),
+            });
+          }
         },
       });
       this.$nextTick(() => {
@@ -681,37 +735,18 @@ export default {
     },
     /* 获取icon多选数据 */
     getIconType(value) {
-      if (value === "defect") {
+      this.mapLogeList = {};
-        this.iconTypeList = [
+      getItemTypes({ type: value }).then(({ code, data }) => {
-          { name: "淤泥路面", value: "1" },
+        if (code === 200) {
-          { name: "沥青路面", value: "2" },
+          this.iconTypeList = data;
-          { name: "面", value: "3" },
+          this.iconType = data.map((item) => {
-        ];
+            return item.value;
-        this.iconType = this.iconTypeList.map((item) => {
+          });
-          return item.value;
+          data.forEach((item) => {
-        });
+            this.mapLogeList[item.value] = item.label;
-      } else {
+          });
-        this.iconTypeList = [
+        }
-          { name: "淤泥路面", value: "1" },
+      });
-          { name: "沥青路面", value: "2" },
-          { name: "面", value: "3" },
-          { name: "淤泥", value: "4" },
-          { name: "淤泥路面阿萨", value: "5" },
-          { name: "淤泥路面", value: "6" },
-          { name: "淤泥", value: "4" },
-          { name: "淤泥路面阿萨", value: "5" },
-          { name: "淤泥路面", value: "6" },
-          { name: "淤泥", value: "4" },
-          { name: "淤泥路面阿萨", value: "5" },
-          { name: "淤泥路面", value: "6" },
-          { name: "淤泥", value: "4" },
-          { name: "淤泥路面阿萨", value: "5" },
-          { name: "淤泥路面", value: "6" },
-        ];
-        this.iconType = this.iconTypeList.map((item) => {
-          return item.value;
-        });
-      }
     },
     /* 传回来的地图图层 */
     getZoom(zoom) {