fix：图例设置联调，线段增加弹窗展示数据

src/api/xj/warningLine.js

@@ -0,0 +1,20 @@
+import requsest from '@/utils/request';
+
+// 查询图例设置列表
+export function getWarnLineList(params) {
+  return requsest({
+    url: '/linetype/list',
+    method: 'get',
+    params
+  })
+}
+
+
+// 更新图例设置接口
+export function updateWarnLine(params) {
+  return requsest({
+    url: '/linetype/update',
+    method: 'put',
+    data: 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-12-12 09:21:59
+ * @LastEditTime: 2024-12-18 09:46:30
  * @FilePath: \znxjxt-ui\src\components\map\fssm-map.vue
  * @Description: 公共地图
 -->
@@ -10,6 +10,10 @@
 <template>
   <div class="map-container">
     <div ref="container" :id="`map-${mapId}`"></div>
+    <!-- 地图弹窗 -->
+    <div ref="mapPopup" class="ol-popup">
+      <div ref="popupContent"></div>
+    </div>
     <div ref="mapController" :style="controlStyle" class="control-container">
       <!-- 绘制线段 -->
       <div class="draw-line" v-if="showLine">
@@ -55,6 +59,8 @@ import { Vector as VectorSource } from "ol/source";
 import { Draw, Modify, Select, Snap } from "ol/interaction";
 import * as styleExports from "ol/style";
 import { Polygon, LineString } from "ol/geom";
+import Overlay from "ol/Overlay";
+import { throttle } from "lodash";
 
 export default {
   name: "FssmMap",
@@ -149,6 +155,8 @@ export default {
       drawLineMarkers: [],
       // 绘制线段图层layer
       drawLineLayer: null,
+      // 绘制弹窗图层
+      overlayDialog: null,
     };
   },
   watch: {
@@ -304,6 +312,15 @@ export default {
         }),
         visible: false,
       });
+      // 弹窗图层
+      const overlays = new Overlay({
+        element: this.$refs.mapPopup,
+        autoPan: {
+          animation: {
+            duration: 250,
+          },
+        },
+      });
       const map = new Map({
         target: `map-${this.mapId}`,
         controls: defaultControls({
@@ -311,6 +328,8 @@ export default {
           attribution: false,
           rotate: false,
         }),
+        // 弹窗图层数组
+        overlays: [overlays],
         view: new View({
           center: this.centerPoint, //中心点经纬度
           zoom: this.zoom, //图层缩放大小
@@ -352,25 +371,43 @@ export default {
         }
       });
       // 鼠标移入事件
-      // map.on("pointermove", (e) => {
+      map.on("pointermove", (e) => {
-      //   const feature = map.forEachFeatureAtPixel(
+        const feature = map.forEachFeatureAtPixel(
-      //     map.getEventPixel(e.originalEvent),
+          map.getEventPixel(e.originalEvent),
-      //     (mapFeature) => {
+          (mapFeature) => {
-      //       return mapFeature;
+            return mapFeature;
-      //     }
+          }
-      //   );
+        );
-      //   // 线、面要素不做鼠标移入样式修改
+        // 获取弹窗图层
-      //   if (feature) {
+        const [dislogLay] = map.getOverlays().getArray();
-      //     if (feature.getGeometry()?.getType() === "Point") {
+        // 打印或处理经纬度
-      //       map.getTargetElement().style.cursor = "pointer";
+        // this.$emit("pointer-move", { feature, coordinate });
-      //       this.$emit("pointer-move", feature);
+        if (feature && feature.getGeometry().getType() === "LineString") {
-      //     } else {
+          // 获取鼠标当前位置的像素坐标
-      //       map.getTargetElement().style.cursor = "auto";
+          const pixel = e.pixel;
-      //     }
+          // 将像素坐标转换为地理坐标（经纬度）
-      //   } else {
+          const coordinate = map.getCoordinateFromPixel(pixel);
-      //     map.getTargetElement().style.cursor = "auto";
+          // 获取弹窗数据
-      //   }
+          const popupData = feature.get("data");
-      // });
+          // 获取弹窗内元素并赋值
+          this.$refs.popupContent.innerHTML = `<span>路段名称：</span><span>${popupData}</span><br/><span>起始桩号：</span><span>${popupData}</span><br/><span>终止桩号：</span><span>${popupData}</span>`;
+          dislogLay.setPosition(coordinate);
+        } else {
+          dislogLay.setPosition(undefined);
+        }
+        // 线、面要素不做鼠标移入样式修改
+        // if (feature) {
+        //   if (feature.getGeometry()?.getType() === "Point") {
+        //     map.getTargetElement().style.cursor = "pointer";
+        //     this.$emit("pointer-move", feature);
+        //   } else {
+        //     map.getTargetElement().style.cursor = "auto";
+        //   }
+        // } else {
+        //   map.getTargetElement().style.cursor = "auto";
+        // }
+      });
+
       // 地图缩放级别事件
       map.on("moveend", (e) => {
         const zoom = map.getView().getZoom().toFixed(); //获取当前地图的缩放级别
@@ -787,6 +824,18 @@ export default {
     width: 100%;
     height: 100%;
   }
+
+  // 地图弹窗样式
+  .ol-popup > div {
+    padding: 0.5rem;
+    box-sizing: border-box;
+    background: rgba(79, 79, 79, 0.7);
+    border-radius: 0.2rem;
+    border: 1px solid #3976f1;
+    font-size: 0.7rem;
+    color: #ffffff;
+  }
+
   // 放大缩小控件
   .control-container {
     display: flex;

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-12-16 17:42:38
+ * @LastEditTime: 2024-12-18 10:49:32
  * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
  * @Description: 大屏首页
 -->
@@ -171,6 +171,7 @@
         <div class="map-image-select" v-if="elementDiv != 'RoadScreen'">
           病害类型筛选：
           <el-cascader
+            ref="screenCascader"
             v-model="mapCareSelect"
             popper-class="screen-index-cascader"
             :options="dieaseOptions"
@@ -213,7 +214,8 @@
                 <div class="screen-map-popover-content">
                   <div class="item">
                     <div>
-                      <span class="name" style="color: #18f7ff">路面病害：</span
+                      <span class="name" style="color: #18f7ff"
+                        >{{ screenMapPopoverName }}病害数：</span
                       ><span class="value">65431213</span>个
                     </div>
                     <div>
@@ -222,39 +224,40 @@
                       ><span class="value">65431213</span>个
                     </div>
                   </div>
-                  <div class="item">
+                  <!-- <div class="item">
                     <div>
-                      <span class="name" style="color: #FFEA68"
+                      <span class="name" style="color: #ffea68"
                         >交安设施病害：</span
                       ><span class="value">65431213</span>个
                     </div>
                     <div>
-                      <span class="name" style="color: #FFEA68"
+                      <span class="name" style="color: #ffea68"
                         >每公里平均病害：</span
                       ><span class="value">65431213</span>个
                     </div>
                   </div>
                   <div class="item">
                     <div>
-                      <span class="name" style="color: #AE74F3">桥隧病害：</span
+                      <span class="name" style="color: #ae74f3">桥隧病害：</span
                       ><span class="value">65431213</span>个
                     </div>
                     <div>
-                      <span class="name" style="color: #AE74F3"
+                      <span class="name" style="color: #ae74f3"
                         >每公里平均病害：</span
                       ><span class="value">65431213</span>个
                     </div>
                   </div>
                   <div class="item">
                     <div>
-                      <span class="name" style="color:#6FC36F">绿化问题：</span
+                      <span class="name" style="color: #6fc36f">绿化问题：</span
                       ><span class="value">65431213</span>个
                     </div>
                     <div>
-                      <span class="name" style="color:#6FC36F">每公里平均问题：</span
+                      <span class="name" style="color: #6fc36f"
+                        >每公里平均问题：</span
                       ><span class="value">65431213</span>个
                     </div>
-                  </div>
+                  </div> -->
                 </div>
                 <span slot="reference" @click="showMapByCompany">{{
                   item.name
@@ -510,6 +513,8 @@ export default {
       roadSelect: "",
       // 总览页面是否展示地图显隐控制
       showMap: false,
+      // 图片背景下popover弹窗病害名称
+      screenMapPopoverName: "",
 
       // 图标类别切换标识
       bottomTipClick: "1",
@@ -706,6 +711,8 @@ export default {
      * @return {void}
      */
     changeMapCareSelect(value) {
+      const [node] = this.$refs.screenCascader.getCheckedNodes();
+      this.screenMapPopoverName = node?.label;
       this.getMapCare(value);
     },
 
@@ -940,8 +947,22 @@ export default {
     getLinePoint() {
       if (!this.markLayerLines) {
         mapPciList().then(({ code, data }) => {
-          if (code === 200 && data) {
+          // if (code === 200 && data) {
-            this.lineString = data.filter((item) => item.coordinates !== null);
+          //   this.lineString = data.filter((item) => item.coordinates !== null);
+          //   this.drawLine();
+          // }
+          if (code === 200) {
+            this.lineString = [
+              [123.09835060586187, 41.95723497452143],
+              [122.96926125039312, 41.8459984022558],
+              [123.14366920937749, 41.8185325819433],
+              [123.10384376992437, 41.71141588272455],
+              [122.91982277383062, 41.67708360733393],
+              [123.10109718789312, 41.6207786756933],
+              [123.37300880898687, 41.63039171280268],
+              [123.31121071328374, 41.8240257460058],
+              [123.21782692422124, 41.98195421280268],
+            ];
             this.drawLine();
           }
         });
@@ -954,46 +975,50 @@ export default {
      */
     drawLine() {
       const features = [];
-      this.lineString.forEach((element) => {
+      // this.lineString.forEach((element) => {
-        const lines = element?.coordinates?.split(";")?.map((it) => {
+      // console.log(element,'ddd');
-          return it.split(",").map(Number);
+
-        });
+      // const lines = element?.coordinates?.split(";")?.map((it) => {
-        const line = new Feature({
+      //   return it.split(",").map(Number);
-          geometry: new geomExports.LineString(lines),
+      // });
-          type: "line",
+      const line = new Feature({
-        });
+        geometry: new geomExports.LineString(this.lineString),
-        line.setStyle([
+        data: "15112",
-          new Style({
+        type: "line",
-            // 填充色
-            fill: new Fill({
-              color: "red",
-            }),
-            // 边线颜色
-            stroke: new Stroke({
-              color: this.getLineColor(element.pci),
-              width: 5,
-            }),
-            // 形状
-            image: new Circle({
-              radius: 17,
-              fill: new Fill({
-                color: "#ffffff",
-              }),
-            }),
-            // text: new Text({
-            //   text: "121454",
-            //   color: "#ffffff",
-            //   textAlign: "center", //位置
-            //   textBaseline: "middle",
-            //   offsetY: 0,
-            //   fill: new Fill({
-            //     color: "#ffffff",
-            //   }),
-            // }),
-          }),
-        ]);
-        features.push(line);
       });
+      line.setStyle([
+        new Style({
+          // 填充色
+          fill: new Fill({
+            color: "red",
+          }),
+          // 边线颜色
+          stroke: new Stroke({
+            // color: this.getLineColor(element.pci),
+            color: "red",
+            width: 5,
+          }),
+          // 形状
+          image: new Circle({
+            radius: 17,
+            fill: new Fill({
+              color: "#ffffff",
+            }),
+          }),
+          // text: new Text({
+          //   text: "121454",
+          //   color: "#ffffff",
+          //   textAlign: "center", //位置
+          //   textBaseline: "middle",
+          //   offsetY: 0,
+          //   fill: new Fill({
+          //     color: "#ffffff",
+          //   }),
+          // }),
+        }),
+      ]);
+      features.push(line);
+      // });
       const lineSource = new VectorSource({
         features,
       });
@@ -1616,7 +1641,7 @@ export default {
     .disease-content {
       width: 100%;
       height: 100%;
-      background-image: url("../../assets/screen/index/map-liaoning.jpg");
+      background-image: url("../../assets/screen/index/map-liaoning.png");
       background-repeat: no-repeat;
       background-size: 100% 100%;
       position: relative;
@@ -2058,14 +2083,17 @@ export default {
 
   // 图片地图打点popover弹窗
   .screen-map-popover-content {
-    padding-top: 1rem;
     font-family: "DouYu";
     font-size: 0.6rem;
     color: #cccccc;
 
     .item {
-      margin-bottom: 0.5rem;
+
-      border-bottom: 1px solid #cccccc;
+      .name {
+        width: 7rem;
+        line-height: 1rem;
+        display: inline-block;
+      }
 
       .value {
         color: rgb(227, 164, 27);

src/views/xj/inspection-warn/warning-line/components/edit-line.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-12-17 13:35:37
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-17 14:18:26
+ * @LastEditTime: 2024-12-18 11:42:13
  * @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-line\components\edit-line.vue
  * @Description: 图例设置-编辑弹窗
 -->
@@ -17,28 +17,28 @@
     >
       <el-row :gutter="24">
         <el-col :span="24">
-          <el-form-item label="病害名称：" prop="defectTypeName">
+          <el-form-item label="病害名称：" prop="defectName">
             <el-input
               disabled
-              v-model="warningLineForm.defectTypeName"
+              v-model="warningLineForm.defectName"
               placeholder="请输入病害名称"
             />
           </el-form-item> </el-col
       ></el-row>
       <el-row :gutter="24">
         <el-col :span="24">
-          <el-form-item label="范围一：" prop="s1">
+          <el-form-item label="范围一：" prop="s5">
-            <el-input v-model="warningLineForm.s1" placeholder="请输入数字">
+            <el-input v-model="warningLineForm.s5" placeholder="请输入数字">
-              <template slot="prepend">>=</template>
+              <template slot="prepend">≥</template>
             </el-input>
           </el-form-item>
         </el-col></el-row
       >
       <el-row :gutter="24">
         <el-col :span="24">
-          <el-form-item label="范围二：" prop="s2">
+          <el-form-item label="范围二：" prop="s4">
-            <el-input v-model="warningLineForm.s2" placeholder="请输入数字"
+            <el-input v-model="warningLineForm.s4" placeholder="请输入数字"
-              ><template slot="prepend">>=</template></el-input
+              ><template slot="prepend">≥</template></el-input
             >
           </el-form-item>
         </el-col></el-row
@@ -47,28 +47,28 @@
         <el-col :span="24">
           <el-form-item label="范围三：" prop="s3">
             <el-input v-model="warningLineForm.s3" placeholder="请输入数字"
-              ><template slot="prepend">>=</template></el-input
+              ><template slot="prepend">≥</template></el-input
             >
           </el-form-item>
         </el-col></el-row
       >
       <el-row :gutter="24">
         <el-col :span="24">
-          <el-form-item label="范围四：" prop="s4">
+          <el-form-item label="范围四：" prop="s2">
-            <el-input v-model="warningLineForm.s4" placeholder="请输入数字"
+            <el-input v-model="warningLineForm.s2" placeholder="请输入数字"
-              ><template slot="prepend">>=</template></el-input
+              ><template slot="prepend">≥</template></el-input
             >
           </el-form-item>
         </el-col></el-row
       >
       <el-row :gutter="24">
         <el-col :span="24">
-          <el-form-item label="范围五：" prop="s5">
+          <el-form-item label="范围五：" prop="s1">
             <el-input
               disabled
-              v-model="warningLineForm.s5"
+              v-model="warningLineForm.s1"
               placeholder="请输入病害名称"
-              ><template slot="prepend">>=</template></el-input
+              ><template slot="prepend">≥</template></el-input
             >
           </el-form-item>
         </el-col></el-row
@@ -82,6 +82,7 @@
 </template>
 
 <script>
+import { updateWarnLine } from "@/api/xj/warningLine.js";
 export default {
   name: "EditLine",
   props: {
@@ -94,19 +95,25 @@ export default {
     return {
       // 表单数据
       warningLineForm: {
-        defectTypeName: "",
+        defectName: "",
+        defectType: "",
+        id: "",
+        s1: 0,
+        s2: 0,
+        s3: 0,
+        s4: 0,
         s5: 0,
       },
       // 表单验证规则
       rules: {
-        s1: [
+        s5: [
           { required: true, message: "请输入范围一", trigger: "blur" },
           {
             pattern: /^(0|[1-9]\d*(\.\d+)?)$/,
             message: "请输入非负数",
           },
         ],
-        s2: [
+        s4: [
           { required: true, message: "请输入范围二", trigger: "blur" },
           {
             pattern: /^(0|[1-9]\d*(\.\d+)?)$/,
@@ -120,14 +127,14 @@ export default {
             message: "请输入非负数",
           },
         ],
-        s4: [
+        s2: [
           { required: true, message: "请输入范围四", trigger: "blur" },
           {
             pattern: /^(0|[1-9]\d*(\.\d+)?)$/,
             message: "请输入非负数",
           },
         ],
-        s5: [
+        s1: [
           { required: true, message: "请输入范围五", trigger: "blur" },
           {
             pattern: /^(0|[1-9]\d*(\.\d+)?)$/,
@@ -137,25 +144,33 @@ export default {
       },
     };
   },
+  watch: {
+    dialogItem: {
+      handler(val) {
+        this.warningLineForm = { ...val };
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
   methods: {
-
     /**
      * @description: 点击确定事件
      * @return {*}
      */
-     submitForm() {
+    submitForm() {
       this.$refs.warningLineForm.validate((valid) => {
         if (valid) {
           const data = {
             ...this.warningLineForm,
             id: this.dialogItem.id,
           };
-          // updateWarnSetup(data).then(({ code, data }) => {
+          updateWarnLine(data).then(({ code, data }) => {
-          //   if (code === 200) {
+            if (code === 200) {
-          //     this.$modal.msgSuccess("更新成功");
+              this.$modal.msgSuccess("更新成功");
-          //     this.$emit("cancel");
+              this.$emit("cancel");
-          //   }
+            }
-          // });
+          });
         }
       });
     },

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

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-12-17 09:18:08
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-17 14:20:15
+ * @LastEditTime: 2024-12-18 11:16:26
  * @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-line\index.vue
  * @Description: 预警中心-大屏图例设置
 -->
@@ -16,20 +16,20 @@
     >
       <el-table-column type="index" label="序号"> </el-table-column>
       <el-table-column label="病害名称" align="center" prop="defectName" />
-      <el-table-column label="范围一" align="center" prop="s1">
+      <el-table-column label="范围一" align="center" prop="s5">
-        <template slot-scope="scope"> >={{ scope.row.s1 }} </template>
+        <template slot-scope="scope"> ≥{{ scope.row.s5 }} </template>
       </el-table-column>
-      <el-table-column label="范围二" align="center" prop="s2">
+      <el-table-column label="范围二" align="center" prop="s4">
-        <template slot-scope="scope"> >={{ scope.row.s2 }} </template>
+        <template slot-scope="scope"> ≥{{ scope.row.s4 }} </template>
       </el-table-column>
       <el-table-column label="范围三" align="center" prop="s3">
-        <template slot-scope="scope"> >={{ scope.row.s3 }} </template>
+        <template slot-scope="scope"> ≥{{ scope.row.s3 }} </template>
       </el-table-column>
-      <el-table-column label="范围四" align="center" prop="s4">
+      <el-table-column label="范围四" align="center" prop="s2">
-        <template slot-scope="scope"> >={{ scope.row.s4 }} </template>
+        <template slot-scope="scope"> ≥{{ scope.row.s2 }} </template>
       </el-table-column>
-      <el-table-column label="范围五" align="center" prop="s5">
+      <el-table-column label="范围五" align="center" prop="s1">
-        <template slot-scope="scope"> >={{ scope.row.s5 }} </template>
+        <template slot-scope="scope"> ≥{{ scope.row.s1 }} </template>
       </el-table-column>
       <el-table-column
         label="操作"
@@ -65,7 +65,9 @@
 </template>
 
 <script>
+import { getWarnLineList } from "@/api/xj/warningLine";
 import EditLine from "./components/edit-line.vue";
+
 export default {
   components: { EditLine },
   name: "WarningLine",
@@ -92,19 +94,13 @@ export default {
      */
     getList() {
       this.loading = true;
-      setTimeout(() => {
+      getWarnLineList().then(({ code, data }) => {
-        this.warningLineList = [
+        if(code===200){
-          {
+          this.warningLineList = data;
-            defectName: "病害名称",
+        }
-            s1: "80",
+      }).finally(() => {
-            s2: "60",
-            s3: "40",
-            s4: "20",
-            s5: "0",
-          },
-        ];
         this.loading = false;
-      }, 500);
+      });
     },
 
     /**
@@ -113,6 +109,7 @@ export default {
      * @return {*}
      */
     handleUpdate(val) {
+      this.dialogItem = val;
       this.editVisible = true;
     },