fix：图片底图打点

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-10-25 16:40:29
+ * @LastEditTime: 2024-10-28 09:50:01
  * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
  * @Description: 大屏首页
 -->
@@ -87,7 +87,11 @@
             <span>病害筛查</span>
           </div>
           <!-- 返回图片底图 -->
-          <div class="road-return" v-if="!showImgBk" @click="changeMap(true)">
+          <div
+            class="road-return"
+            v-if="!showImgBk"
+            @click="changeMap(true, '')"
+          >
             返回
           </div>
         </div>
@@ -106,10 +110,19 @@
         </div>
         <!-- 图片背景 -->
         <div class="disease-content" v-if="showImgBk">
-          <div class="disease-title" @click="changeMap(false)"></div>
+          <div class="disease-title"></div>
           <div class="map-legend"></div>
           <div class="map-care">
-            <div class="map-care-div"></div>
+            <div
+              class="map-care-div"
+              :class="`map-care-div-${index + 1}`"
+              v-for="(item, index) in mapCareList"
+              :key="`map-care-${index}`"
+              :style="{ left: item.left, top: item.top }"
+              @click="changeMap(false, item)"
+            >
+              <span>{{ item.name }}</span>
+            </div>
           </div>
         </div>
         <!-- 地图 -->
@@ -288,6 +301,8 @@ export default {
       ],
       // 是否显示图片背景
       showImgBk: true,
+      // 图片背景下打点坐标数据
+      mapCareList: [],
       // 切换地图图标类别按钮
       changeMapBtn: [
         { name: "巡查车", click: "1" },
@@ -328,6 +343,7 @@ export default {
   created() {
     this.setTime();
     this.getSelect();
+    this.getMapCare();
   },
   methods: {
     /* 获取当前时间 */
@@ -370,6 +386,47 @@ export default {
         }
       });
     },
+    /* 获取图片背景下坐标数据 */
+    getMapCare() {
+      this.mapCareList = [
+        {
+          name: "沈抚",
+          left: "63%",
+          top: "15%",
+          tip: "1",
+        },
+        {
+          name: "沈阳",
+          left: "55%",
+          top: "12%",
+          tip: "2",
+        },
+        {
+          name: "锦州",
+          left: "35%",
+          top: "25%",
+          tip: "3",
+        },
+        {
+          name: "朝阳",
+          left: "20%",
+          top: "20%",
+          tip: "4",
+        },
+        {
+          name: "大连",
+          left: "50%",
+          top: "50%",
+          tip: "5",
+        },
+        {
+          name: "丹东",
+          left: "70%",
+          top: "40%",
+          tip: "6",
+        },
+      ];
+    },
     /* 点击病害筛查 */
     clickImg() {
       this.imgVisible = true;
@@ -383,12 +440,12 @@ export default {
       console.log(value, "icontype");
     },
     /* 点击图片点位切换地图事件 */
-    changeMap(value) {
+    changeMap(boolen, value) {
       this.mapZoom = "";
-      this.showImgBk = value;
+      this.showImgBk = boolen;
       // 默认点击的图标是巡查车
       this.changeIconType("1");
-      if (!value) {
+      if (!boolen) {
         this.mapZoom = "";
         this.getZoom("10");
       }
@@ -1021,6 +1078,48 @@ export default {
         position: absolute;
         left: 26%;
         top: 13%;
+
+        .map-care-div {
+          height: 8.5rem;
+          min-width: 3.5rem;
+          display: flex;
+          justify-content: center;
+          line-height: 1.6rem;
+          font-size: 0.7rem;
+          color: #ffffff;
+          position: absolute;
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+          background-position: 50%;
+
+          span{
+            cursor: pointer;
+          }
+        }
+
+        .map-care-div-1 {
+          background-image: url("../../assets/screen/index/map-care-div-1.png");
+        }
+
+        .map-care-div-2 {
+          background-image: url("../../assets/screen/index/map-care-div-2.png");
+        }
+
+        .map-care-div-3 {
+          background-image: url("../../assets/screen/index/map-care-div-3.png");
+        }
+
+        .map-care-div-4 {
+          background-image: url("../../assets/screen/index/map-care-div-4.png");
+        }
+
+        .map-care-div-5 {
+          background-image: url("../../assets/screen/index/map-care-div-5.png");
+        }
+
+        .map-care-div-6 {
+          background-image: url("../../assets/screen/index/map-care-div-6.png");
+        }
       }
     }