From 81f92eb9fb83ed5d8ac0b0a5c206315416f10df0 Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期四, 04 七月 2024 10:14:06 +0800
Subject: [PATCH] 系统更新
---
src/views/mapView/mapView.vue | 71 ++++++++++++++++++++++++++++++++++-
1 files changed, 68 insertions(+), 3 deletions(-)
diff --git a/src/views/mapView/mapView.vue b/src/views/mapView/mapView.vue
index 1b5f8c8..3c3cf81 100644
--- a/src/views/mapView/mapView.vue
+++ b/src/views/mapView/mapView.vue
@@ -1,5 +1,13 @@
<template>
<div id="sdkContainer" class="mapView">
+ <div class="mapLenged" v-if="$store.state.showLenged">
+ <ul>
+ <li v-for="(item, key) in lengedList" :key="key">
+ <div class="mapcolor" :style="getBackgroundColor(item)"></div>
+ <div class="mapTitle">{{ item.name }}</div>
+ </li>
+ </ul>
+ </div>
<div class="infoBox" v-show="errInfoFlag">
<div id="inforMessage"></div>
<div class="infoBottom">
@@ -19,7 +27,24 @@
data() {
return {
errInfoMessage: null,
- errInfoFlag: false
+ errInfoFlag: false,
+ lengedList: [{
+ name: "鍐涗簨鐩爣",
+ color: "#409EFF"
+ }, {
+ name: "鏀挎不鐩爣",
+ color: "#FFFF00"
+ }, {
+ name: "缁忔祹鐩爣",
+ color: "#FFA500"
+ }, {
+ name: "绀句細鐩爣",
+ color: "#000000"
+ }, {
+ name: "姘戝畢",
+ color: "#808080"
+ }
+ ]
};
},
computed: {
@@ -35,9 +60,12 @@
}
},
methods: {
+ getBackgroundColor(res) {
+ return `background-color: ${res.color};`
+ },
setMapViewStart() {
mapView.initMap();
-
+
},
setErrorMessage(res) {
this.errInfoMessage = res;
@@ -53,7 +81,7 @@
type: "erroInfo",
value: obj.val
});
-
+
}
this.$nextTick(() => {
this.errInfoFlag = false;
@@ -75,6 +103,39 @@
height: 100%;
position: absolute;
}
+
+.mapLenged {
+ position: absolute;
+ z-index: 40;
+ border: 1px solid #808080;
+ background: rgba(255, 255,255, .7);
+ padding: 4px;
+ bottom: 20px;
+ left: 20px;
+ border-radius: 10px;
+ /* color: gray; */
+}
+
+.mapLenged .mapTitle {
+ display: flex;
+ align-items: center;
+ margin-left: 10px;
+ font-size: 16px;
+
+}
+
+.mapLenged li {
+ list-style-type: none;
+ display: flex;
+ line-height: 20px;
+ margin: 10px;
+}
+
+.mapLenged .mapcolor {
+ width: 100px;
+ height: 30px;
+}
+
.infoBox {
left: 50%;
top: 50%;
@@ -89,13 +150,16 @@
color: white;
transform: translate(-50%, -50%);
}
+
.infoBottom {
margin-top: 10px;
float: right;
}
+
.infoBottom :first-child {
margin-right: 10px;
}
+
.infoBottom button {
width: 50px;
@@ -115,6 +179,7 @@
font-size: 16px;
line-height: 30px;
}
+
.infoCount {
font-size: 14px;
line-height: 30px;
--
Gitblit v1.9.3