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

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,
     });

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(){
+    goBigScreen() {
-      this.$router.push("/screen")
+      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;
       }
     }
 

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
             >

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="起始公里桩"
+            placeholder="格式K0000+000"
-            style="width: 9rem"
+            style="width: 10rem"
             clearable
           />
           <span style="margin: 0 5px; color: #ffffff">-</span>
           <el-input
             v-model="trafficForm.stakeEnd"
-            placeholder="终止公里桩"
+            placeholder="格式K0000+000"
-            style="width: 9rem"
+            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;
 

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: {

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(
+      comppanyImg(data).then(({ code, data }) => {
-        ({ 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: {
+          data: element,
-            iconType: element.iconType,
-            imageUrl: element.imageUrl,
-            rect: element.rect,
-          },
           // 自己设置一个标识
           type: "icon",
         });
@@ -969,8 +984,17 @@ export default {
     changeIconType(value) {
       if (this.bottomTipClick !== value) {
         this.bottomTipClick = value;
-        this.getIconType();
+        this.$nextTick(() => {
-        this.getCenterPiont();
+          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.getIconType();
-          this.showIconList = true;
+          // 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;

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;

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 {

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(