fix：大屏打点逻辑修改，病害日志新增时间选择，新增预警按钮

2024-11-19 14:18:57 +08:00 · 2024-11-19 14:18:57 +08:00 · d4d3662a44
commit d4d3662a44
parent 52ffc09a42
10 changed files with 166 additions and 81 deletions
--- a/src/api/xj/screen/road-screen.js
+++ b/src/api/xj/screen/road-screen.js
@ -11,7 +11,7 @@ import request from "@/utils/request";
 // 路面状况排名接口
 export function roadRankStatistics(query) {
    return request({
-      url: "/bigscreen/getRoadStatistics",
+      url: "/bigscreen/v2/getRoadStatistics",
      method: "get",
      params: query,
    });
@ -21,7 +21,7 @@ export function roadRankStatistics(query) {
 //   附属设施分布接口
 export function ancillaryList(query) {
    return request({
-      url: "/bigscreen/getEquipmentScale",
+      url: "/bigscreen/v2/getEquipmentScale",
      method: "get",
      params: query,
    });
@ -30,7 +30,7 @@ export function ancillaryList(query) {
 //   附属设施分布累计路产数
 export function ancillaryCount(query) {
    return request({
-      url: "/bigscreen/getEquipmentCount",
+      url: "/bigscreen/v2/getEquipmentCount",
      method: "get",
      params: query,
    });
@ -40,7 +40,7 @@ export function ancillaryCount(query) {
 // 附属设施异常统计接口
 export function anomalyList(query) {
    return request({
-      url: "/bigscreen/getEquipmentAnomalyLog",
+      url: "/bigscreen/v2/getEquipmentAnomalyLog",
      method: "get",
      params: query,
    });
@ -49,7 +49,7 @@ export function anomalyList(query) {
 //  路产统计信息接口
 export function roadStatisticList(query) {
    return request({
-      url: "/bigscreen/getEquipmentStatistics",
+      url: "/bigscreen/v2/getEquipmentStatistics",
      method: "get",
      params: query,
    });
--- a/src/assets/screen/road/ancillary-bottom-8.png
+++ b/src/assets/screen/road/ancillary-bottom-8.png
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@ -19,6 +19,7 @@
        <div class="menu-return">
          <i class="el-icon-data-analysis" @click="goBigScreen"></i>
        </div>
+        <div class="header-news"><i class="el-icon-bell"></i></div>
        <search id="header-search" class="right-menu-item" />

        <screenfull id="screenfull" class="right-menu-item hover-effect" />
@ -95,8 +96,8 @@ export default {
  },
  methods: {
    /* 点击跳转大屏页面 */
-    goBigScreen(){
-      this.$router.push("/screen")
+    goBigScreen() {
+      this.$router.push("/screen");
    },
    toggleSideBar() {
      this.$store.dispatch("app/toggleSideBar");
@ -163,7 +164,7 @@ export default {
      outline: none;
    }

-    .menu-return {
+    .header-news {
      height: 100%;
      margin-right: 0.5rem;

@ -171,7 +172,19 @@ export default {
        cursor: pointer;
        font-size: 1.4rem;
        line-height: 3.1rem;
-        font-weight: bold;
+        font-weight: 400;
+      }
+    }
+
+    .menu-return {
+      height: 100%;
+      margin-right: 1rem;
+
+      i {
+        cursor: pointer;
+        font-size: 1.4rem;
+        line-height: 3.1rem;
+        font-weight: 400;
      }
    }

--- a/src/views/big-screen/components/img-dialog.vue
+++ b/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-11-14 16:44:42
+ * @LastEditTime: 2024-11-19 13:56:22
 * @FilePath: \znxjxt-ui\src\views\big-screen\components\img-dialog.vue
 * @Description: 大屏查看图片弹窗
 -->
@ -68,7 +68,7 @@
          <el-form-item label="病害类型">
            <el-select
              v-model="imgForm.defectType"
-              placeholder="请选择路段名称"
+              placeholder="请选择病害类型"
              :popper-append-to-body="false"
              clearable
            >
--- 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-11-14 13:12:32
+ * @LastEditTime: 2024-11-19 13:52:47
 * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-log.vue
 * @Description: 病害巡检-病害日志
 -->
@ -37,25 +37,38 @@
        <el-form-item class="form-item" label="公里桩" prop="stakeRange">
          <el-input
            v-model="trafficForm.stakeStart"
-            placeholder="起始公里桩"
-            style="width: 9rem"
+            placeholder="格式K0000+000"
+            style="width: 10rem"
            clearable
          />
          <span style="margin: 0 5px; color: #ffffff">-</span>
          <el-input
            v-model="trafficForm.stakeEnd"
-            placeholder="终止公里桩"
-            style="width: 9rem"
+            placeholder="格式K0000+000"
+            style="width: 9.5rem"
            clearable
          />
-          <el-tooltip
+          <!-- <el-tooltip
            class="item"
            effect="dark"
            content="格式为K0000+000"
            placement="top"
          >
            <i :style="{ color: '#ffffff' }" class="el-icon-info"></i>
-          </el-tooltip>
+          </el-tooltip> -->
+        </el-form-item>
+        <el-form-item class="form-item" label="时间筛选" prop="dataTime">
+          <el-date-picker
+            v-model="dataTime"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+            clearable
+          >
+          </el-date-picker>
        </el-form-item>
        <el-form-item class="form-item" label="病害类型" prop="defectType">
          <el-select
@ -103,7 +116,7 @@
        header-row-class-name="headerRow"
        row-class-name="bodayRow"
        style="width: 100%; background: none"
-        height="375"
+        height="85%"
      >
        <el-table-column prop="defectType" label="病害类型"> </el-table-column>
        <el-table-column
@ -174,6 +187,8 @@ export default {
        // 病害状态
        state: "",
      },
+      // 时间选择筛选
+      dataTime: [],
      // 传接口的查询条件
      searchForm: {},
      // 道路名称下拉数据
@ -231,8 +246,28 @@ export default {

    /* 点击搜索事件 */
    handleQuery() {
+      const phonereg = /^K\d{4}\+\d{3}$/;
+      if (this.trafficForm.stakeStart) {
+        if (phonereg.test(this.trafficForm.stakeStart)) {
+          this.pagination.page = 1;
          this.searchForm = JSON.parse(JSON.stringify(this.trafficForm));
          this.getData();
+        } else {
+          this.$modal.msgWarning("请按照格式填写公里桩进行修改");
+        }
+      } else if (this.trafficForm.stakeEnd) {
+        if (phonereg.test(this.trafficForm.stakeEnd)) {
+          this.pagination.page = 1;
+          this.searchForm = JSON.parse(JSON.stringify(this.trafficForm));
+          this.getData();
+        } else {
+          this.$modal.msgWarning("请按照格式填写公里桩进行修改");
+        }
+      } else {
+        this.pagination.page = 1;
+        this.searchForm = JSON.parse(JSON.stringify(this.trafficForm));
+        this.getData();
+      }
    },

    /* 点击重置事件 */
@ -292,7 +327,7 @@ export default {

  .traffic-form {
    width: calc(100% - 0.5rem);
-    height: 30%;
+    height: 16rem;
    padding: 0.5rem;

    .form-item {
@ -301,7 +336,8 @@ export default {
      ::v-deep .el-form-item__content {
        width: calc(100% - 5rem);

-        .el-select {
+        .el-select,
+        .el-date-editor {
          width: 100%;
        }
      }
@ -315,6 +351,12 @@ export default {
      color: #ffffff;
      border-color: #47536f;
      background-color: transparent;
+
+      // 修改时间选择器样式
+      .el-range-input {
+        color: #ffffff;
+        background-color: transparent;
+      }
    }

    ::v-deep .el-select {
@ -403,7 +445,7 @@ export default {

  ::v-deep .traffic-table {
    width: 100%;
-    height: 66%;
+    height: 57%;
    padding: 0.5rem 0;
    overflow: hidden;

--- a/src/views/big-screen/disease-components/traffic-statistic.vue
+++ b/src/views/big-screen/disease-components/traffic-statistic.vue
@ -2,7 +2,7 @@
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-21 10:06:24
 * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-18 13:47:54
+ * @LastEditTime: 2024-11-19 09:35:47
 * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-statistic.vue
 * @Description: 病害巡检大屏-病害统计
 -->
@ -232,21 +232,6 @@ export default {
              // 鼠标悬浮具体数据显示
              show: false,
              position: "center",
-              formatter: (params) => {
-                return `{a|${params.percent.toFixed()}%}\n{b|${params.name}}`;
-              },
-              rich: {
-                a: {
-                  fontFamily: "DouYu",
-                  fontSize: 28,
-                  color: "rgba(255, 183, 89, 0.8)",
-                },
-                b: {
-                  fontFamily: "DinBm",
-                  fontSize: 12,
-                  color: "#ffffff",
-                },
-              },
            },
            emphasis: {
              label: {
--- 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-11-18 11:18:49
+ * @LastEditTime: 2024-11-19 14:16:56
 * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
 * @Description: 大屏首页
 -->
@ -20,6 +20,7 @@
        ></iframe>
      </div>
      <div class="header-time">
+        <div class="header-news"><i class="el-icon-message-solid"></i></div>
        <div class="header-data">{{ dataTime }}</div>
        <div class="header-week">
          <span>{{ weekTime }}</span>
@ -114,7 +115,11 @@
              v-model="mapCareSelect"
              popper-class="screen-index-cascader"
              :options="dieaseOptions"
-              :props="{checkStrictly:true, emitPath: true, children: 'subTypes' }"
+              :props="{
+                checkStrictly: true,
+                emitPath: true,
+                children: 'subTypes',
+              }"
              @change="getMapCare"
              clearable
            ></el-cascader>
@ -212,6 +217,19 @@
          class="rect-overlay"
          :style="getScreenRectStyle(rect)"
        ></div>
+        <div class="rect-image">
+          采集时间:
+          {{ screenImage.createTime }} 起始桩号：
+          {{ screenImage.stakeStart || "暂无数据" }} 终止桩号：
+          {{ screenImage.stakeEnd || "暂无数据" }}
+          {{ `${this.elementDiv === "RoadScreen" ? "路产" : "病害"}类型：` }}
+          {{ screenImage.iconTypeName || "暂无数据" }}
+          <span v-if="this.elementDiv === 'DiseaseScreen'">
+            病害面积：{{ screenImage.targetArea }}平方米 病害长度：{{
+              screenImage.targetLen
+            }}米
+          </span>
+        </div>
      </div>
    </el-dialog>
  </div>
@ -702,13 +720,11 @@ export default {
        classType: value ? value[0] : "",
        type: value ? (value.length > 1 ? value[1] : "") : "",
      };
-      comppanyImg(data).then(
-        ({ code, data }) => {
+      comppanyImg(data).then(({ code, data }) => {
        if (code === 200) {
          this.mapCareList = data;
        }
-        }
-      );
+      });
    },

    /* 点击病害日志详情打开弹窗进行地图打点 */
@ -716,6 +732,9 @@ export default {
      this.imgTitle = "查看";
      this.imageItem = item;
      this.imgVisible = true;
+      // 地图右上角多选按钮显示
+      this.getIconType();
+      this.showIconList = true;
      // 地图打点\改变地图层级
      this.$nextTick(() => {
        const map = this.$refs.roadMap.instance.get("map");
@ -798,11 +817,7 @@ export default {
        const point = new Point(element.geometry);
        const feature = new Feature({
          geometry: point,
-          data: {
-            iconType: element.iconType,
-            imageUrl: element.imageUrl,
-            rect: element.rect,
-          },
+          data: element,
          // 自己设置一个标识
          type: "icon",
        });
@ -969,8 +984,17 @@ export default {
    changeIconType(value) {
      if (this.bottomTipClick !== value) {
        this.bottomTipClick = value;
-        this.getIconType();
-        this.getCenterPiont();
+        this.$nextTick(() => {
+          const map = this.$refs.roadMap.instance.get("map");
+          map.removeLayer(this.clusters);
+          this.clusters = null;
+          // map.getView().setZoom(10);
+          // map.getView().setCenter([123.30297096718999, 41.87942945541742]);
+        });
+        // 地图右上角多选按钮隐藏
+        this.showIconList = false;
+        // this.getIconType();
+        // this.getCenterPiont();
      }
    },

@ -1182,16 +1206,22 @@ export default {
              class: "one",
            },
          ];
+          // 地图右上角多选按钮隐藏
+          this.showIconList = false;
+          // 图层恢复
+          this.mapZoom = "";
          this.$nextTick(() => {
            const map = this.$refs.roadMap.instance.get("map");
+            map.removeLayer(this.clusters);
+            this.clusters = null;
            map.getView().setZoom(10);
            map.getView().setCenter([123.30297096718999, 41.87942945541742]);
          });
          // 地图右上角多选按钮显示
-          this.getIconType();
-          this.showIconList = true;
+          // this.getIconType();
+          // this.showIconList = true;
          // 进行地图打点
-          this.getCenterPiont();
+          // this.getCenterPiont();
          this.getLinePoint();
        }
      }
@ -1496,6 +1526,12 @@ export default {
      align-items: flex-end;
    }

+    .header-news {
+      cursor: pointer;
+      font-size: 1.5rem;
+      color:red;
+    }
+
    .header-data {
      font-size: 1.8rem;
    }
@ -1637,6 +1673,7 @@ export default {
    width: 100%;
    height: 80%;
    display: flex;
+    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
@ -1655,6 +1692,15 @@ export default {
  }
 }

+// 图片信息
+.rect-image {
+  width: 80%;
+  position: absolute;
+  top: 0;
+  color: #ffffff;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
 // 大屏下拉框样式
 ::v-deep .el-select {
  width: 6.5rem;
--- a/src/views/big-screen/overview-components/inspection-vehicles.vue
+++ b/src/views/big-screen/overview-components/inspection-vehicles.vue
@ -2,7 +2,7 @@
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-11-08 09:40:18
 * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-15 15:29:10
+ * @LastEditTime: 2024-11-19 13:32:51
 * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\inspection-vehicles.vue
 * @Description: 总览大屏-巡检车辆
 -->
@ -40,7 +40,7 @@
        header-row-class-name="headerRow"
        row-class-name="bodayRow"
        style="width: 100%; background: none"
-        height="285"
+        height="85%"
      >
        <el-table-column prop="plateNo" label="车牌号码"> </el-table-column>
        <el-table-column prop="status" label="状态"> </el-table-column>
@ -65,13 +65,9 @@
                  <span class="name">车辆状态:</span>
                  <span class="value">{{ scope.row.status }}</span>
                </div>
-                <div>
-                  <span class="name">网络连接:</span>
-                  <span class="value"></span>
-                </div>
                <div>
                  <span class="name">设备状态:</span>
-                  <span class="value"></span>
+                  <span class="value">{{ scope.row.status }}</span>
                </div>
              </div>
              <el-button
@ -257,7 +253,7 @@ export default {

  .inspection-top {
    width: 100%;
-    height: 20%;
+    height: 6rem;
    padding: 0.5rem;
    display: flex;
    justify-content: space-around;
--- a/src/views/big-screen/road-components/ancillary-facilities.vue
+++ b/src/views/big-screen/road-components/ancillary-facilities.vue
@ -2,7 +2,7 @@
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-18 15:18:03
 * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-25 16:27:10
+ * @LastEditTime: 2024-11-19 10:41:33
 * @FilePath: \znxjxt-ui\src\views\big-screen\road-components\ancillary-facilities.vue
 * @Description: 道路资产大屏-附属设施分布
 -->
@ -128,7 +128,7 @@ export default {
    .ancillary-bottom-0 {
      background-image: url("../../../assets/screen/road/ancillary-bottom-0.png");
      background-repeat: no-repeat;
-      background-size: 100% 100%;
+      background-size: 100%;
      background-position: 50%;

      span {
@ -139,7 +139,7 @@ export default {
    .ancillary-bottom-1 {
      background-image: url("../../../assets/screen/road/ancillary-bottom-1.png");
      background-repeat: no-repeat;
-      background-size: 100% 100%;
+      background-size: 100%;
      background-position: 50%;

      span {
@ -150,7 +150,7 @@ export default {
    .ancillary-bottom-2 {
      background-image: url("../../../assets/screen/road/ancillary-bottom-2.png");
      background-repeat: no-repeat;
-      background-size: 100% 100%;
+      background-size: 100%;
      background-position: 50%;

      span {
@ -161,7 +161,7 @@ export default {
    .ancillary-bottom-3 {
      background-image: url("../../../assets/screen/road/ancillary-bottom-3.png");
      background-repeat: no-repeat;
-      background-size: 100% 100%;
+      background-size: 100%;
      background-position: 50%;

      span {
@ -172,7 +172,7 @@ export default {
    .ancillary-bottom-4 {
      background-image: url("../../../assets/screen/road/ancillary-bottom-4.png");
      background-repeat: no-repeat;
-      background-size: 100% 100%;
+      background-size: 100%;
      background-position: 50%;

      span {
@ -181,20 +181,21 @@ export default {
    }

    .ancillary-bottom-5 {
-      background-image: url("../../../assets/screen/road/ancillary-bottom-5.png");
+      background-image: url("../../../assets/screen/road/ancillary-bottom-8.png");
      background-repeat: no-repeat;
-      background-size: 100% 100%;
+      background-size: 100%;
      background-position: 50%;

      span {
-        color: #3f84e3;
+        // color: #3f84e3;
+        color: #08afa3;
      }
    }

    .ancillary-bottom-6 {
      background-image: url("../../../assets/screen/road/ancillary-bottom-6.png");
      background-repeat: no-repeat;
-      background-size: 100% 100%;
+      background-size: 100%;
      background-position: 50%;

      span {
@ -205,7 +206,7 @@ export default {
    .ancillary-bottom-7 {
      background-image: url("../../../assets/screen/road/ancillary-bottom-7.png");
      background-repeat: no-repeat;
-      background-size: 100% 100%;
+      background-size: 100%;
      background-position: 50%;

      span {
--- a/src/views/big-screen/road-components/manage-maintain.vue
+++ b/src/views/big-screen/road-components/manage-maintain.vue
@ -2,7 +2,7 @@
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-18 15:15:04
 * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-18 15:47:15
+ * @LastEditTime: 2024-11-19 09:54:43
 * @FilePath: \znxjxt-ui\src\views\big-screen\road-components\manage-maintain.vue
 * @Description: 道路资产大屏-管养道路统计
 -->
@ -60,9 +60,11 @@ export default {
    width: 47%;
    height: 100%;
    padding-left: 3rem;
-    line-height: 5rem;
+    // line-height: 5rem;
    display: flex;
    justify-content: center;
+    align-items: center;
+    padding-bottom: 1.5rem;
    font-size: 1rem;
    color: #aac6c7;

@ -78,7 +80,7 @@ export default {
    background-image: url("../../../assets/screen/road/maintain-left.png");
    background-repeat: no-repeat;
    background-position: 100%;
-    background-size: 100% 65%;
+    background-size: 100%;

    span {
      background: linear-gradient(
@ -95,7 +97,7 @@ export default {
    background-image: url("../../../assets/screen/road/maintain-right.png");
    background-repeat: no-repeat;
    background-position: 100%;
-    background-size: 100% 65%;
+    background-size: 100%;

    span {
      background: linear-gradient(