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 @@
@@ -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");
+ }
}
}