fix：大屏修改查看详情弹窗，增加地图取消选择事件，病害巡检今日巡查修改

src/components/map/fssm-map.vue

@@ -123,6 +123,7 @@ export default {
       drawMarkers: [],
       // 当前地图层级
       sendZoom: "",
+      selectSingClick: null,
     };
   },
   watch: {
@@ -268,9 +269,9 @@ export default {
         this.$emit("map-moveend", zoom);
       });
       // 图层选择事件
-      let selectSingClick = new Select({ style: null });
+      this.selectSingClick = new Select({ style: null });
-      map.addInteraction(selectSingClick);
+      map.addInteraction(this.selectSingClick);
-      selectSingClick.on("select", (e) => {
+      this.selectSingClick.on("select", (e) => {
         this.$emit("feature-select", e);
         // let selectedFeatures = e.selected;
         // if (selectedFeatures.length > 0) {
@@ -305,6 +306,11 @@ export default {
       this.instance.set("map", map);
       this.instance.set("overlay-list", []);
     },
+    
+    /* 删除图层选择对象 */
+    removeSelectClick() {
+      this.selectSingClick.getFeatures().clear();
+    },
     /* 绘制地图 */
     drawMap() {
       if (this.drawMarkers.length < 1) {

src/views/big-screen/components/img-dialog.vue

@@ -85,14 +85,14 @@
             <el-input
               v-model="imgForm.stakeStart"
               placeholder="起始公里桩"
-              style="width: 6rem"
+              style="width: 8rem"
               clearable
             />
             <span style="margin: 0 5px">-</span>
             <el-input
               v-model="imgForm.stakeEnd"
               placeholder="终止公里桩"
-              style="width: 6rem"
+              style="width: 8rem"
               clearable
             />
           </el-form-item>
@@ -128,22 +128,45 @@
         <div class="image-container" ref="imageContainer">
           <div
             class="rect-overlay"
-            v-for="(item, index) in rectItem"
+            v-for="(item, index) in checkedRectList"
             :key="`rect-overlay-${index}`"
             :style="getRectStyle(item.rectPosition, index)"
             @click="clickImage(item)"
           >
-            <div :style="{ color: colorList[index] }" class="rect-overlay-text">
+            <div
+              :style="{ color: colorList[index] }"
+              class="rect-overlay-text"
+            >
               目标详情>>
             </div>
           </div>
           <div class="rect-image">
-            <div
+            <el-checkbox-group
+              v-model="checkedRect"
+              @change="handleCheckedRectChange"
+            >
+              <el-checkbox
+                class="image-info"
+                v-for="(item, index) in rectItem"
+                :label="item.id"
+                :key="`image-info-${index}`"
+                :style="{ color: colorList[index] }"
+                >采集时间:
+                {{ new Date(item.createdTime).toLocaleString() }} 起始桩号:
+                {{ item.stakeStart || "暂无数据" }} 终止桩号:
+                {{ item.stakeEnd || "暂无数据" }}
+                病害类型:
+                {{ item.type || "暂无数据" }} 病害面积：{{ item.area }}平方米
+                病害长度{{ item.length }}米</el-checkbox
+              >
+            </el-checkbox-group>
+            <!-- <div
               class="image-info"
               v-for="(item, index) in rectItem"
               :key="`image-info-${index}`"
               :style="{ color: colorList[index] }"
             >
+            
               采集时间:
               {{ new Date(item.createdTime).toLocaleString() }} 起始桩号:
               {{ item.stakeStart || "暂无数据" }} 终止桩号:
@@ -151,7 +174,7 @@
               病害类型:
               {{ item.type || "暂无数据" }} 病害面积：{{ item.area }}平方米
               病害长度{{ item.length }}米
-            </div>
+            </div> -->
           </div>
           <img
             :src="currentImage"
@@ -209,6 +232,10 @@ export default {
       currentIndex: 0,
       // 下方点击的index绑定
       selectedThumbnail: 0,
+      // 选中框绑定
+      checkedRect: [],
+      // 顶端选中框数据
+      checkedRectList: [],
       // 加载状态
       loading: false,
       // 表单绑定
@@ -564,7 +591,22 @@ export default {
       }
     },
 
-    /* 图片位置信息获取 */
+    /**
+     * @description: 选择框修改事件
+     * @param {*} val
+     * @return {*}
+     */
+    handleCheckedRectChange(val) {
+      this.checkedRectList = this.rectItem.filter((item) => {
+        return val.includes(item.id);
+      });
+    },
+
+    /**
+     * @description: 图片位置信息获取
+     * @param {*} val
+     * @return {*}
+     */
     updateRects() {
       this.rectItem = [];
       if (this.defectData.length > 0) {
@@ -576,6 +618,8 @@ export default {
             rectPosition: item.rect?.split(",").map(Number),
           };
         });
+        this.checkedRectList = this.rectItem;
+        this.checkedRect = this.rectItem.map((item) => item.id);
       }
     },
 
@@ -621,9 +665,9 @@ export default {
 <style lang="scss" scoped>
 .app {
   width: 100%;
+  height: 54rem;
   display: flex;
   flex-direction: row;
-  height: 45rem;
   background-color: #2e3a46;
 }
 
@@ -720,7 +764,7 @@ export default {
     }
 
     .el-select {
-      width: 8rem;
+      width: 12rem;
 
       .el-input--small .el-input__inner {
         color: #ffffff;
@@ -767,16 +811,21 @@ export default {
 .image-container {
   position: relative;
   width: 100%;
-  height: 95%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   overflow: hidden;
 
-  .image-info {
+  ::v-deep .image-info {
     width: 100%;
     background-color: rgba(0, 0, 0, 0.5);
+
+    .el-checkbox__input.is-checked + .el-checkbox__label {
+      color: inherit;
+      font-size: 1.1rem;
+    }
   }
 }
 
@@ -805,13 +854,13 @@ export default {
 
 // 图片信息
 .rect-image {
-  width: 80%;
+  width: 67%;
   position: absolute;
   top: 0;
 }
 
 .image-viewer {
-  height: 34rem;
+  height: 43rem;
   display: flex;
   flex-direction: column;
   align-items: center;

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

@@ -2,8 +2,8 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-21 09:59:32
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-18 13:37:03
+ * @LastEditTime: 2024-11-21 09:05:48
- * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-safety.vue
+ * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\traffic-safety.vue
  * @Description: 病害巡检大屏-今日巡查
 -->
 
@@ -17,8 +17,12 @@
         <span>{{ all }}</span
         >个
       </div>
-      <div class="right-rate">
+      <!-- <div class="right-rate">
         <span> {{ scale }} </span>%
+      </div> -->
+      <div class="right-rate">
+        较昨日<span class="up">增长</span> 50.26%
+        <i class="el-icon-top"></i>
       </div>
     </div>
 
@@ -691,32 +695,51 @@ export default {
       }
     }
 
+    // .right-rate {
+    //   width: 100%;
+    //   height: 4rem;
+    //   display: flex;
+    //   justify-content: center;
+    //   padding-left: 1rem;
+    //   line-height: 3rem;
+    //   // background-image: url("../../../assets/screen/traffic/right-rate.png");
+    //   background-image: url("~@/assets/screen/disease/right-rate.png");
+    //   background-repeat: no-repeat;
+    //   background-size: 100%;
+    //   background-position: 100% 50%;
+    //   color: #aac6c7;
+    //   font-size: 0.9rem;
+
+    //   span {
+    //     margin-right: 0.5rem;
+    //     font-size: 1.2rem;
+    //     font-family: "DouYu";
+    //     background: linear-gradient(
+    //       to bottom,
+    //       #ffffff,
+    //       #e9bc5c
+    //     ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
+    //     background-clip: text; /*将设置的背景颜色限制在文字中*/
+    //     -webkit-text-fill-color: transparent; /*给文字设置成透明*/
+    //   }
+    // }
+
     .right-rate {
       width: 100%;
-      height: 4rem;
+      height: 45%;
       display: flex;
-      justify-content: center;
+      align-items: center;
-      padding-left: 1rem;
+      font-family: "DouYu";
-      line-height: 3rem;
-      // background-image: url("../../../assets/screen/traffic/right-rate.png");
-      background-image: url("~@/assets/screen/disease/right-rate.png");
-      background-repeat: no-repeat;
-      background-size: 100%;
-      background-position: 100% 50%;
-      color: #aac6c7;
       font-size: 0.9rem;
 
-      span {
+      .up {
-        margin-right: 0.5rem;
+        color: #ff2e2e;
-        font-size: 1.2rem;
+        padding: 0 0.5rem;
-        font-family: "DouYu";
+      }
-        background: linear-gradient(
+
-          to bottom,
+      .el-icon-top {
-          #ffffff,
+        font-size: 1.5rem;
-          #e9bc5c
+        color: red;
-        ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
-        background-clip: text; /*将设置的背景颜色限制在文字中*/
-        -webkit-text-fill-color: transparent; /*给文字设置成透明*/
       }
     }
   }

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-20 17:08:11
+ * @LastEditTime: 2024-11-21 09:12:52
  * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
  * @Description: 大屏首页
 -->
@@ -249,8 +249,9 @@
     <el-dialog
       :title="imgTitle"
       :visible.sync="imgVisible"
-      width="85rem"
+      width="95rem"
       append-to-body
+      fullscreen
       :close-on-click-modal="false"
       destroy-on-close
       @close="imgCancel"
@@ -266,7 +267,7 @@
     <el-dialog
       title="查看点位"
       :visible.sync="showImageDialog"
-      width="80rem"
+      width="90rem"
       append-to-body
       :close-on-click-modal="false"
       destroy-on-close
@@ -484,8 +485,6 @@ export default {
       clusters: null,
       // 线段图层
       markLayerLines: null,
-      // 地图选中图层
-      selectedFeatures:null,
 
       // 图片弹窗标题
       imgTitle: "查看",
@@ -660,11 +659,7 @@ export default {
 
     /* 关闭查看点位大图弹窗 */
     screenImgCancel() {
-      this.$nextTick(() => {
+      this.$refs.roadMap.removeSelectClick();
-        const map = this.$refs.roadMap.instance.get("map");
-        map.removeInteraction(this.selectedFeatures);
-        this.selectedFeatures = null;
-      });
       this.showImageDialog = false;
     },
 
@@ -716,7 +711,8 @@ export default {
             return [];
           });
           // 如果不是病害巡检，则绘制点位
-          if (this.elementDiv !== "DiseaseScreen") {
+          // 如果图片弹窗打开，则绘制点位
+          if (this.elementDiv !== "DiseaseScreen" || this.imgVisible) {
             this.drawPoint();
           }
         }
@@ -944,9 +940,9 @@ export default {
     /* 地图选中feature事件 */
     featureSelect(e) {
       const map = this.$refs.roadMap.instance.get("map");
-       this.selectedFeatures = e.selected;
+      const selectedFeatures = e.selected;
-      if (this.selectedFeatures.length > 0) {
+      if (selectedFeatures.length > 0) {
-        let feature = this.selectedFeatures[0];
+        let feature = selectedFeatures[0];
         let features = feature.get("features");
         // 点击线段事件
         if (feature.getProperties().type === "line") {
@@ -1582,6 +1578,10 @@ export default {
 }
 
 /* 修改弹窗样式 */
+::v-deep .el-dialog {
+  background-color: transparent;
+}
+
 ::v-deep .el-dialog__header {
   padding: 10px;
   background-color: #113463;
@@ -1626,6 +1626,7 @@ export default {
   width: 80%;
   position: absolute;
   top: 0;
+  font-size: 1.2rem;
   color: #ffffff;
   background-color: rgba(0, 0, 0, 0.5);
 }