diff --git a/src/assets/screen/index/map-care-div-1.png b/src/assets/screen/index/map-care-div-1.png new file mode 100644 index 0000000..b4f7f08 Binary files /dev/null and b/src/assets/screen/index/map-care-div-1.png differ diff --git a/src/assets/screen/index/map-care-div-2.png b/src/assets/screen/index/map-care-div-2.png new file mode 100644 index 0000000..07bf4c7 Binary files /dev/null and b/src/assets/screen/index/map-care-div-2.png differ diff --git a/src/assets/screen/index/map-care-div-3.png b/src/assets/screen/index/map-care-div-3.png new file mode 100644 index 0000000..b30e62d Binary files /dev/null and b/src/assets/screen/index/map-care-div-3.png differ diff --git a/src/assets/screen/index/map-care-div-4.png b/src/assets/screen/index/map-care-div-4.png new file mode 100644 index 0000000..247e539 Binary files /dev/null and b/src/assets/screen/index/map-care-div-4.png differ diff --git a/src/assets/screen/index/map-care-div-5.png b/src/assets/screen/index/map-care-div-5.png new file mode 100644 index 0000000..960aac6 Binary files /dev/null and b/src/assets/screen/index/map-care-div-5.png differ diff --git a/src/assets/screen/index/map-care-div-6.png b/src/assets/screen/index/map-care-div-6.png new file mode 100644 index 0000000..0388fba Binary files /dev/null and b/src/assets/screen/index/map-care-div-6.png differ diff --git a/src/views/big-screen/index.vue b/src/views/big-screen/index.vue index d7c0a78..f5fcd64 100644 --- 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-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 @@ 病害筛查 -
+
返回
@@ -106,10 +110,19 @@
-
+
-
+
+ {{ item.name }} +
@@ -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"); + } } }