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

2024-12-24 11:27:06 +08:00 · 2024-12-24 11:27:06 +08:00 · cdfbc4cb9b
commit cdfbc4cb9b
parent b96dcf1cbe
4 changed files with 79 additions and 73 deletions
--- a/src/components/map/fssm-map.vue
+++ b/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,14 +828,20 @@ export default {
  }

  // 地图弹窗样式
-  .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;
+  .ol-popup{
+    width:10rem;
+    position: absolute;
+    margin: 0.5rem;
+
+    > 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;
+    }
  }

  // 放大缩小控件
--- a/src/views/big-screen/disease-components/traffic-log.vue
+++ b/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="病害状态">
-          <template slot-scope="scope">
-            {{ scope.row.state === "2" ? "已修复" : "未修复" }}
-          </template>
-        </el-table-column>
-        <el-table-column width="50" prop="pci" label="操作">
+        <el-table-column width="70" prop="pci" label="操作">
          <template slot-scope="scope">
            <el-button
              slot="reference"
@ -204,10 +185,10 @@ export default {
      default: "",
    },
    // 各个种类下详细的病害类型
-    eventType:{
+    eventType: {
      type: Array,
-      default: ()=>[],
-    }
+      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;
--- a/src/views/big-screen/index.vue
+++ b/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();
        }
--- a/src/views/xj/inspection-warn/warning-line/index.vue
+++ b/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">
-        <template slot-scope="scope"> ≤{{ scope.row.s5 }} </template>
-      </el-table-column> -->
+      <el-table-column label="范围五" align="center" prop="s5">
+        <template slot-scope="scope"> >{{ scope.row.s4 }} </template>
+      </el-table-column>
      <el-table-column
        label="操作"
        align="center"