From f79f33c6e02ddcfa72bc35020bf68e465e42bced Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 07 十二月 2021 15:16:37 +0800
Subject: [PATCH] 地图改版
---
src/pages/internetEquipment/module/realTimeModule.vue | 6 +
src/pages/internetEquipment/views/helemetEquipment.vue | 10 +++
src/pages/internetEquipment/module/mapIndex.vue | 135 +++++++++++++++++++++++++++++++++++++-------
3 files changed, 126 insertions(+), 25 deletions(-)
diff --git a/src/pages/internetEquipment/module/mapIndex.vue b/src/pages/internetEquipment/module/mapIndex.vue
index 7bfe1f1..18305c4 100644
--- a/src/pages/internetEquipment/module/mapIndex.vue
+++ b/src/pages/internetEquipment/module/mapIndex.vue
@@ -29,7 +29,7 @@
class="video_icon"
@click="hiddenVideo()"
/>
- <a v-else href="#" title="瀹炴椂鐩戞帶" @click="aClick()">
+ <a v-if="myNode && isHidden" href="#" title="瀹炴椂鐩戞帶" @click="aClick()">
<img
src="/images/map/鐩戞帶.png"
alt=""
@@ -38,14 +38,16 @@
/>
</a>
- <div class="video_box" v-if="myNode" :class="{ hidden: isHidden }">
+ <div class="video_box" v-show="myNode" :class="{ hidden: isHidden }">
<div class="title">
<div class="left">
<span class="ball"></span>
<span class="left_info">瀹炴椂鐩戞帶</span>
</div>
- <div class="right">璁惧缂栫爜: {{ myNode.values_.id }}</div>
+ <div class="right">
+ 璁惧缂栫爜: {{ myNode && myNode.values && myNode.values_.id }}
+ </div>
</div>
<video controls="controls" loop="loop">
@@ -53,12 +55,18 @@
</video>
</div>
- <div class="helmet_box" v-show="myNode">
+ <div class="helmet_box" v-show="myNodeHover">
<div class="icon_close iconfont" @click="close"></div>
- <div class="sn" v-if="myNode">{{ myNode.values_.lat.id }}</div>
- <div class="location" v-if="myNode">缁忓害: {{ myNode.values_.lat }}</div>
- <div class="location" v-if="myNode">绾害: {{ myNode.values_.lng }}</div>
- <div class="info" v-if="myNode">鐢甸噺: {{ myNode.values_.battery }}</div>
+ <div class="sn" v-if="myNodeHover">{{ myNodeHover.values_.lat.id }}</div>
+ <div class="location" v-if="myNodeHover">
+ 缁忓害: {{ myNodeHover.values_.lat }}
+ </div>
+ <div class="location" v-if="myNodeHover">
+ 绾害: {{ myNodeHover.values_.lng }}
+ </div>
+ <div class="info" v-if="myNodeHover">
+ 鐢甸噺: {{ myNodeHover.values_.battery }}
+ </div>
<div class="button">
<img
src="/images/InternetData/瑙嗛.png"
@@ -129,10 +137,11 @@
let myModify = {};
let myPolygon = {};
let mySelect = {};
+let mySelect2 = {};
let overlay = {};
let overlay2 = {};
let voiceText = "";
-
+let drawFeature = [];
export default {
data() {
return {
@@ -153,6 +162,7 @@
polygonInfo: "",
nodeFeature: [],
myNode: null,
+ myNodeHover: null,
commentContent: "",
};
},
@@ -233,11 +243,8 @@
} else if (feature.type && feature.type == "polygon") {
myPolygon = feature;
this.myNode = null;
-
+ this.nodeId = "";
return true;
- } else {
- this.myNode = null;
- return false;
}
},
style: (feature) => {
@@ -267,6 +274,7 @@
condition: pointerMove,
filter: (feature, layer) => {
if (feature.values_ && feature.values_.type == "node") {
+ this.myNodeHover = feature;
return true;
} else {
return false;
@@ -290,11 +298,16 @@
map.addInteraction(select);
map.addInteraction(select2);
mySelect = select;
+ mySelect2 = select2;
+
select.on("select", function (e) {
- e.stopPropagation();
- overlay2.setPosition(undefined);
+ // e.stopPropagation();
+ console.log("--------------");
+ overlay.setPosition(undefined);
if (e.selected.length == 0) {
+ console.log("999999");
+
that.polygonInfo = "";
that.nodeId = "";
that.myNode = null;
@@ -303,7 +316,6 @@
if (e.selected[0].values_.type == "node") {
that.isHidden = false;
- that.polygonInfo = "";
that.nodeId = e.selected[0].values_.id;
return false;
}
@@ -313,7 +325,11 @@
} else {
that.polygonInfo = "鏂板尯鍩�";
}
- overlay.setPosition(e.mapBrowserEvent.coordinate);
+ if (e.mapBrowserEvent) {
+ console.log(e.mapBrowserEvent.coordinate);
+ overlay.setPosition(e.mapBrowserEvent.coordinate);
+ }
+
return false;
});
@@ -321,8 +337,8 @@
if (
e.selected.length &&
e.selected[0].values_.type == "node" &&
- that.myNode &&
- that.myNode.values_.id == e.selected[0].values_.id
+ that.myNodeHover &&
+ that.myNodeHover.values_.id == e.selected[0].values_.id
) {
overlay2.setPosition(e.mapBrowserEvent.coordinate);
} else {
@@ -367,6 +383,7 @@
feature.id = item.id;
feature.type = "polygon";
feature.polygonName = item.name;
+ feature.data1 = item.data[1];
this.polyFeature.push(feature);
});
},
@@ -424,8 +441,20 @@
view.setCenter(transform(this.center, "EPSG:4326", "EPSG:3857"));
},
drawPolygon() {
+ this.rangeArr = [];
+ this.myNodeHover = null;
+ // this.myNode = null;
+ // this.nodeId = "";
+ mySelect2.getFeatures().clear();
+
+ mySelect.dispatchEvent({
+ type: "select",
+ selected: [],
+ });
+
this.resetMap();
mySelect.setActive(false);
+ mySelect2.setActive(false);
this.showBtn = true;
const draw = new Draw({
source: myVectorSource,
@@ -459,6 +488,7 @@
id,
data: event.feature.getGeometry().getCoordinates()[0],
});
+ drawFeature.push(event.feature);
});
const modify = new Modify({ source: myVectorSource });
@@ -472,8 +502,10 @@
myMap.addInteraction(draw);
},
resetMap() {
+ drawFeature = [];
this.polygonInfo = "";
mySelect.setActive(true);
+ mySelect2.setActive(true);
this.initPolygonArr();
const vectorSource = new VectorSource({
features: this.polyFeature,
@@ -495,6 +527,7 @@
},
async savePoly() {
mySelect.setActive(true);
+ mySelect2.setActive(true);
myMap.removeInteraction(myDraw);
myMap.removeInteraction(myModify);
this.showBtn = false;
@@ -525,8 +558,43 @@
id: +item.id,
};
});
- await createZones({ dots_arr: arrData });
- const res = await getHelemtData();
+ const res = await createZones({ dots_arr: arrData });
+ if (res.status == 200) {
+ this.$message({
+ type: "success",
+ message: "淇濆瓨鎴愬姛!",
+ });
+ } else {
+ this.$message({
+ type: "info",
+ message: "淇濆瓨澶辫触",
+ });
+ }
+
+ const res2 = await getZones();
+ if (res2.data && res2.data.items && res2.data.items.length > 0) {
+ this.polygonArr = res2.data.items.map((obj) => {
+ obj.data = obj.dots.map((item) => {
+ return transform([item[0], item[1]], "EPSG:4326", "EPSG:3857");
+ });
+ return obj;
+ });
+ }
+
+ if (drawFeature.length > 0) {
+ this.polyFeature.forEach((item) => {
+ myVectorSource.removeFeature(item);
+ });
+ this.initPolygonArr();
+
+ this.polyFeature.forEach((item) => {
+ myVectorSource.addFeature(item);
+ });
+ }
+
+ // ;
+
+ /* const res = await getHelemtData();
this.nodeArr = [];
res.data.items.forEach((item) => {
this.nodeArr.push({
@@ -539,7 +607,7 @@
myVectorSource.removeFeature(item);
});
this.initNode();
- this.initAllNode();
+ this.initAllNode(); */
},
delPoly() {
this.$confirm("姝ゆ搷浣滃皢鍒犻櫎璇ュ尯鍩�, 鏄惁缁х画?", "鎻愮ず", {
@@ -713,10 +781,30 @@
this.rangeArr = [];
}
- return;
+ return false;
}
const res = await getHelemtData({ sn: val });
+
+ if (res.msg == "zone") {
+ mySelect.getFeatures().clear();
+ const polyArr = this.polyFeature.filter((item) => {
+ return item.id == res.data.ID;
+ });
+
+ myPolygon = polyArr[0];
+ mySelect.getFeatures().push(polyArr[0]);
+ mySelect.dispatchEvent({
+ type: "select",
+ selected: [polyArr[0]],
+ mapBrowserEvent: {
+ coordinate: polyArr[0].data1,
+ },
+ });
+
+ return;
+ }
+
const arr = [];
if (res.data.items && res.data.items.length > 0) {
res.data.items.forEach((obj) => {
@@ -978,6 +1066,7 @@
}
#polygonInfo {
+ position: absolute;
padding: 10px;
border: 1px solid;
color: black;
diff --git a/src/pages/internetEquipment/module/realTimeModule.vue b/src/pages/internetEquipment/module/realTimeModule.vue
index 80bdda4..198a452 100644
--- a/src/pages/internetEquipment/module/realTimeModule.vue
+++ b/src/pages/internetEquipment/module/realTimeModule.vue
@@ -7,7 +7,11 @@
v-for="(item, index) in boundArr"
:key="index"
>
- <img :src="item.snap_shot" alt="" class="warnArea" />
+ <img
+ :src="'http://192.168.8.10:9000' + item.snap_shot"
+ alt=""
+ class="warnArea"
+ />
<warnDescription
:warnDes="{
code: item.device_sn,
diff --git a/src/pages/internetEquipment/views/helemetEquipment.vue b/src/pages/internetEquipment/views/helemetEquipment.vue
index 067e9fc..d9e407a 100644
--- a/src/pages/internetEquipment/views/helemetEquipment.vue
+++ b/src/pages/internetEquipment/views/helemetEquipment.vue
@@ -53,6 +53,7 @@
}
.helmet-equipment {
+ position: relative;
padding: 20px;
width: 100%;
height: 100%;
@@ -63,20 +64,27 @@
}
.footer {
- height: 292px;
+ position: absolute;
+ top: 540px;
+ left: 20px;
+ right: 20px;
+ bottom: 20px;
display: flex;
justify-content: start;
color: #4f4f4f;
.real-time-module {
flex: 2.35;
+ height: 100%;
}
.elec-module {
flex: 1;
margin: 0 20px;
+ height: 100%;
}
.history-module {
flex: 1;
+ height: 100%;
}
}
}
--
Gitblit v1.8.0