fix：去除大屏病害状态，修改大屏线段中心点

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-23 11:07:04
+ * @LastEditTime: 2024-12-23 17:37:59
  * @FilePath: \znxjxt-ui\src\components\map\fssm-map.vue
  * @Description: 公共地图
 -->
@@ -389,7 +389,10 @@ export default {
           // 获取弹窗数据
           const popupData = feature.get("data");
           // 获取弹窗内元素并赋值
-          this.$refs.popupContent.innerHTML = `<span>路段名称：</span><span>${popupData.name}</span><br/><span>病害数：</span><span>${popupData.count}个</span><br/><span>起始桩号：</span><span>${popupData.stakeStart}</span><br/><span>终止桩号：</span><span>${popupData.stakeEnd}</span>`;
+          this.$refs.popupContent.innerHTML = `<span>路段名称：</span><span>${popupData.name}</span><br/>
+          <span>病害数：</span><span>${popupData.count}个</span><br/>
+          <span>起始桩号：</span><span>${popupData.stakeStart}</span><br/>
+          <span>终止桩号：</span><span>${popupData.stakeEnd}</span>`;
           dislogLay.setPosition(coordinate);
         } else {
           dislogLay.setPosition(undefined);
@@ -413,7 +416,7 @@ export default {
         this.$emit("map-moveend", zoom);
       });
       // 图层选择事件
-      this.selectSingClick = new Select({ style: null });
+      this.selectSingClick = new Select();
       map.addInteraction(this.selectSingClick);
       this.selectSingClick.on("select", (e) => {
         this.$emit("feature-select", e);
@@ -825,7 +828,12 @@ export default {
   }
 
   // 地图弹窗样式
-  .ol-popup > div {
+  .ol-popup{
+    width:10rem;
+    position: absolute;
+    margin: 0.5rem;
+
+    > div {
       padding: 0.5rem;
       box-sizing: border-box;
       background: rgba(79, 79, 79, 0.7);
@@ -834,6 +842,7 @@ export default {
       font-size: 0.7rem;
       color: #ffffff;
     }
+  }
 
   // 放大缩小控件
   .control-container {

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

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-11-08 11:56:02
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-23 13:23:20
+ * @LastEditTime: 2024-12-24 09:07:12
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\traffic-log.vue
  * @Description: 病害巡检-病害日志
 -->
@@ -112,21 +112,6 @@
               />
             </el-select>
           </el-form-item>
-          <el-form-item class="form-item" label="病害状态" prop="state">
-            <el-select
-              v-model="trafficForm.state"
-              popper-class="screen-select"
-              placeholder="请选择病害状态"
-              clearable
-            >
-              <el-option
-                v-for="item in defectStatus"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
         </el-form>
       </fssm-scroll>
     </div>
@@ -146,7 +131,8 @@
         style="width: 100%; background: none"
         height="85%"
       >
-        <el-table-column prop="defectType" label="病害类型"> </el-table-column>
+        <el-table-column prop="defectType" width="100" label="病害类型">
+        </el-table-column>
         <el-table-column
           prop="segmentName"
           show-overflow-tooltip
@@ -155,12 +141,7 @@
         </el-table-column>
         <el-table-column show-overflow-tooltip prop="companyName" label="所属">
         </el-table-column>
-        <el-table-column prop="state" label="病害状态">
+        <el-table-column width="70" prop="pci" label="操作">
-          <template slot-scope="scope">
-            {{ scope.row.state === "2" ? "已修复" : "未修复" }}
-          </template>
-        </el-table-column>
-        <el-table-column width="50" prop="pci" label="操作">
           <template slot-scope="scope">
             <el-button
               slot="reference"
@@ -207,7 +188,7 @@ export default {
     eventType: {
       type: Array,
       default: () => [],
-    }
+    },
   },
   data() {
     return {
@@ -224,8 +205,6 @@ export default {
         stakeEnd: "",
         // 病害类型
         defectType: "",
-        // 病害状态
-        state: "",
       },
       // 时间选择筛选
       dateTime: [],
@@ -235,13 +214,6 @@ export default {
       lineList: [],
       // 路段名称下拉数据
       segmentList: [],
-      // 病害类型下拉数据
-      // eventType: [],
-      // 病害状态下拉数据
-      defectStatus: [
-        { label: "已修复", value: "2" },
-        { label: "未修复", value: "1" },
-      ],
       // 事件列表
       emergencyList: [],
       // 分页数据绑定
@@ -257,7 +229,6 @@ export default {
     bottomTipClick: {
       handler() {
         this.trafficForm.defectType = "";
-        // this.getAllDefectType();
         this.getData();
       },
     },
@@ -265,7 +236,6 @@ export default {
   mounted() {
     this.getData();
     this.getLineList();
-    // this.getAllDefectType();
     this.getSegmentList();
   },
   methods: {
@@ -305,19 +275,6 @@ export default {
       });
     },
 
-    // /**
-    //  * @description: 获取病害类型下拉数据
-    //  * @param {*}
-    //  * @return {*}
-    //  */
-    // getAllDefectType() {
-    //   DefectType({ classType: this.bottomTipClick }).then(({ code, data }) => {
-    //     if (code === 200) {
-    //       this.eventType = data;
-    //     }
-    //   });
-    // },
-
     /**
      * @description: 点击搜索事件
      * @param {*}
@@ -382,8 +339,6 @@ export default {
         stakeEnd: "",
         // 病害类型
         defectType: "",
-        // 病害状态
-        state: "",
       };
       this.dateTime = [];
       this.segmentList = [];
@@ -443,7 +398,7 @@ export default {
 
   .traffic-form {
     width: calc(100% - 0.5rem);
-    height: 22rem;
+    height: 19rem;
     padding: 0.5rem;
 
     .form-item {
@@ -530,7 +485,7 @@ export default {
   }
 
   .form-btn {
-    height: 4%;
+    height: 5%;
     width: 100%;
     display: flex;
     justify-content: flex-end;
@@ -569,7 +524,7 @@ export default {
 
   ::v-deep .traffic-table {
     width: 100%;
-    height: 42%;
+    height: 50%;
     padding: 0.5rem 0;
     overflow: hidden;
 
@@ -646,6 +601,7 @@ export default {
 
 // 按钮样式
 .btn-submit {
+  height: 2rem;
   background-color: transparent;
   background-image: url("~@/assets/screen/index/btn-submit.png");
   background-repeat: no-repeat;

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-23 14:29:26
+ * @LastEditTime: 2024-12-24 11:20:36
  * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
  * @Description: 大屏首页
 -->
@@ -432,6 +432,8 @@ import VectorLayer from "ol/layer/Vector";
 import * as geomExports from "ol/geom";
 import Cluster from "ol/source/Cluster";
 import logo from "@/assets/xc.png";
+import { getCenter } from "ol/extent";
+import MultiLineString from "ol/geom/MultiLineString";
 // 组件
 import ModuleBlock from "./module-block.vue";
 import TodayInspection from "./overview-components/today-inspection.vue";
@@ -622,6 +624,8 @@ export default {
       clusters: null,
       // 线段图层
       markLayerLines: null,
+      // 是否需要修改地图中心点
+      isCenterCalculated: false,
 
       // 图片弹窗标题
       imgTitle: "查看",
@@ -847,6 +851,7 @@ export default {
       this.showMap = false;
       this.markLayerLines = null;
       this.companyId = null;
+      this.isCenterCalculated = false;
     },
 
     /**
@@ -1011,7 +1016,7 @@ export default {
                 src: require(`@/assets/screen/index/${
                   this.mapLogeList[
                     feature.getProperties().features[0].get("data").iconType
-                  ]
+                  ] || "龟裂"
                 }.png`),
                 // 图标缩放比例
                 scale: 0.6,
@@ -1077,6 +1082,39 @@ export default {
           this.mapLegendList = data.basLinetypeSetting;
           this.lineString = data.lines;
           this.drawLine();
+          // 修改地图中心点
+          if (!this.isCenterCalculated) {
+            const lineArray = data.lines.map((item) => {
+              return JSON.parse(item.line).map((it) => {
+                return [it.lon, it.lat];
+              });
+            });
+            // 创建 MultiLineString 对象
+            const multiLine = new MultiLineString(lineArray);
+            // 获取 MultiLineString 的边界框（extent）
+            const extent = multiLine.getExtent();
+            // 计算边界框的中心点
+            const center = getCenter(extent);
+            if (this.showMap) {
+              this.$nextTick(() => {
+                const map = this.$refs.overViewMap.instance.get("map");
+                map.getView().animate({
+                  center,
+                  duration: 500,
+                });
+              });
+            } else {
+              this.$nextTick(() => {
+                const map = this.$refs.roadMap.instance.get("map");
+                // map.getView().setCenter(center);
+                map.getView().animate({
+                  center,
+                  duration: 500,
+                });
+              });
+            }
+            this.isCenterCalculated = true;
+          }
         }
       });
     },
@@ -1275,6 +1313,8 @@ export default {
         // 清除已经点击的公司
         this.companyId = null;
         if (item.component === "OverviewScreen") {
+          // 将线段中心点修改标识置为false
+          this.isCenterCalculated = false;
           /* 清空线段图层 */
           this.markLayerLines = null;
           this.leftModuleList = [
@@ -1373,6 +1413,8 @@ export default {
               class: "twe",
             },
           ];
+          // 将线段中心点修改标识置为false
+          this.isCenterCalculated = false;
           // 隐藏总览地图
           this.showMap = false;
           // 发送小车位置消息
@@ -1455,7 +1497,6 @@ export default {
             map.removeLayer(this.clusters);
             this.clusters = null;
             map.getView().setZoom(10);
-            map.getView().setCenter([123.30297096718999, 41.87942945541742]);
           });
           this.getLinePoint();
         }

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-23 11:44:13
+ * @LastEditTime: 2024-12-24 10:52:05
  * @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-line\index.vue
  * @Description: 预警中心-大屏图例设置
 -->
@@ -28,9 +28,9 @@
       <el-table-column label="范围四" align="center" prop="s4">
         <template slot-scope="scope"> ≤{{ scope.row.s4 }} </template>
       </el-table-column>
-      <!-- <el-table-column label="范围五" align="center" prop="s5">
+      <el-table-column label="范围五" align="center" prop="s5">
-        <template slot-scope="scope"> ≤{{ scope.row.s5 }} </template>
+        <template slot-scope="scope"> >{{ scope.row.s4 }} </template>
-      </el-table-column> -->
+      </el-table-column>
       <el-table-column
         label="操作"
         align="center"