From 1706494087a9f8fd22f691d279e9ef7756cd316d Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期五, 03 十二月 2021 18:15:21 +0800
Subject: [PATCH] 地图
---
src/api/helemt.ts | 8
src/pages/internetEquipment/module/historyModule.vue | 4
public/images/map/Group 594.png | 0
src/pages/internetEquipment/module/realTimeModule.vue | 47 +
src/pages/internetEquipment/views/helemetEquipment.vue | 9
src/pages/internetEquipment/components/headCard.vue | 114 ++---
src/pages/internetData/views/helemtTable.vue | 197 ++--------
public/images/map/监控.png | 0
src/pages/internetEquipment/module/mapIndex.vue | 626 +++++++++++++++++++++++++++++++-
src/pages/internetEquipment/components/helemetEchart.vue | 3
src/pages/internetEquipment/components/telephoneBox.vue | 122 ++++++
public/images/map/video_20210924_101628.mp4 | 0
src/pages/internetEquipment/components/helemetHead.vue | 2
public/images/map/安全帽-绿.png | 0
src/pages/internetEquipment/module/elecModule.vue | 6
public/images/map/安全帽-红.png | 0
16 files changed, 870 insertions(+), 268 deletions(-)
diff --git a/public/images/map/Group 594.png b/public/images/map/Group 594.png
new file mode 100644
index 0000000..985d824
--- /dev/null
+++ b/public/images/map/Group 594.png
Binary files differ
diff --git a/public/images/map/video_20210924_101628.mp4 b/public/images/map/video_20210924_101628.mp4
new file mode 100644
index 0000000..fa5ec52
--- /dev/null
+++ b/public/images/map/video_20210924_101628.mp4
Binary files differ
diff --git "a/public/images/map/\345\256\211\345\205\250\345\270\275-\347\272\242.png" "b/public/images/map/\345\256\211\345\205\250\345\270\275-\347\272\242.png"
index 356bd7e..1cf6ada 100644
--- "a/public/images/map/\345\256\211\345\205\250\345\270\275-\347\272\242.png"
+++ "b/public/images/map/\345\256\211\345\205\250\345\270\275-\347\272\242.png"
Binary files differ
diff --git "a/public/images/map/\345\256\211\345\205\250\345\270\275-\347\273\277.png" "b/public/images/map/\345\256\211\345\205\250\345\270\275-\347\273\277.png"
index e8c6fec..9cf22ac 100644
--- "a/public/images/map/\345\256\211\345\205\250\345\270\275-\347\273\277.png"
+++ "b/public/images/map/\345\256\211\345\205\250\345\270\275-\347\273\277.png"
Binary files differ
diff --git "a/public/images/map/\347\233\221\346\216\247.png" "b/public/images/map/\347\233\221\346\216\247.png"
new file mode 100644
index 0000000..a6a61ce
--- /dev/null
+++ "b/public/images/map/\347\233\221\346\216\247.png"
Binary files differ
diff --git a/src/api/helemt.ts b/src/api/helemt.ts
index cf1a5e6..34a4820 100644
--- a/src/api/helemt.ts
+++ b/src/api/helemt.ts
@@ -73,4 +73,12 @@
method: "post",
data
})
+}
+
+export const delZones = (data) => {
+ return request({
+ url: `/iotdata/del-zone`,
+ method: "post",
+ data
+ })
}
\ No newline at end of file
diff --git a/src/pages/internetData/views/helemtTable.vue b/src/pages/internetData/views/helemtTable.vue
index ee8972e..f12a8ff 100644
--- a/src/pages/internetData/views/helemtTable.vue
+++ b/src/pages/internetData/views/helemtTable.vue
@@ -110,25 +110,25 @@
src="/images/InternetData/瑙嗛.png"
alt=""
v-if="!scope.row.isSend"
- @click="sendVoice(scope.row)"
+ @click="sendVoice(scope.row, scope.$index)"
/>
<img
src="/images/InternetData/瑙嗛_鐐瑰嚮.png"
alt=""
v-else
- @click="sendVoice(scope.row)"
+ @click="sendVoice(scope.row, scope.$index)"
/>
<img
src="/images/InternetData/璇煶.png"
alt=""
v-if="!scope.row.istele"
- @click="telephone(scope.row)"
+ @click="telephone(scope.row, scope.$index)"
/>
<img
src="/images/InternetData/璇煶_鐐瑰嚮.png"
alt=""
v-else
- @click="telephone(scope.row)"
+ @click="telephone(scope.row, scope.$index)"
/>
</div>
</template>
@@ -166,141 +166,10 @@
currentPage: 1,
page_size: 10,
total: 10,
- tableData: [
- {
- code: "A123123123123",
- elec: 79.1,
- ip: "192.168.1.2",
- mac: "ec:da:da:da:ed:98",
- longitude: 120.123123,
- latitude: 120.123123,
- height: "11.21",
- time: "0.23.45",
- positon: "鍗曞悜瀹氫綅",
- isSend: false,
- istele: false,
- },
- {
- code: "A123123123123",
- elec: 29.1,
- ip: "192.168.1.2",
- mac: "ec:da:da:da:ed:98",
- longitude: 120.123123,
- latitude: 120.123123,
- height: "11.21",
- time: "0.23.45",
- positon: "鍗曞悜瀹氫綅",
- isSend: false,
- istele: false,
- },
- {
- code: "A123123123123",
- elec: 0,
- ip: "192.168.1.2",
- mac: "ec:da:da:da:ed:98",
- longitude: 120.123123,
- latitude: 120.123123,
- height: "11.21",
- time: "0.23.45",
- positon: "鍗曞悜瀹氫綅",
- isSend: false,
- istele: false,
- },
- {
- code: "A123123123123",
- elec: 79.1,
- ip: "192.168.1.2",
- mac: "ec:da:da:da:ed:98",
- longitude: 120.123123,
- latitude: 120.123123,
- height: "11.21",
- time: "0.23.45",
- positon: "鍗曞悜瀹氫綅",
- isSend: false,
- istele: false,
- },
- {
- code: "A123123123123",
- elec: 79.1,
- ip: "192.168.1.2",
- mac: "ec:da:da:da:ed:98",
- longitude: 120.123123,
- latitude: 120.123123,
- height: "11.21",
- time: "0.23.45",
- positon: "鍗曞悜瀹氫綅",
- isSend: false,
- istele: false,
- },
- {
- code: "A123123123123",
- elec: 79.1,
- ip: "192.168.1.2",
- mac: "ec:da:da:da:ed:98",
- longitude: 120.123123,
- latitude: 120.123123,
- height: "11.21",
- time: "0.23.45",
- positon: "鍗曞悜瀹氫綅",
- isSend: false,
- istele: false,
- },
- {
- code: "A123123123123",
- elec: 79.1,
- ip: "192.168.1.2",
- mac: "ec:da:da:da:ed:98",
- longitude: 120.123123,
- latitude: 120.123123,
- height: "11.21",
- time: "0.23.45",
- positon: "鍗曞悜瀹氫綅",
- isSend: false,
- istele: false,
- },
- {
- code: "A123123123123",
- elec: 79.1,
- ip: "192.168.1.2",
- mac: "ec:da:da:da:ed:98",
- longitude: 120.123123,
- latitude: 120.123123,
- height: "11.21",
- time: "0.23.45",
- positon: "鍗曞悜瀹氫綅",
- isSend: false,
- istele: false,
- },
- {
- code: "A123123123123",
- elec: 79.1,
- ip: "192.168.1.2",
- mac: "ec:da:da:da:ed:98",
- longitude: 120.123123,
- latitude: 120.123123,
- height: "11.21",
- time: "0.23.45",
- positon: "鍗曞悜瀹氫綅",
- isSend: false,
- istele: false,
- },
- {
- code: "A123123123123",
- elec: 79.1,
- ip: "192.168.1.2",
- mac: "ec:da:da:da:ed:98",
- longitude: 120.123123,
- latitude: 120.123123,
- height: "11.21",
- time: "0.23.45",
- positon: "鍗曞悜瀹氫綅",
- isSend: false,
- istele: false,
- },
- ],
helemtArr: [],
commentContent: "",
telephoneObj: null,
+ targetIndex: null,
};
},
created() {
@@ -312,11 +181,11 @@
methods: {
async getHelemtArr(data) {
const res = await getHelemtData(data);
- console.log(res);
this.helemtArr = res.data.items;
this.total = res.data.total;
},
- sendVoice(target) {
+ sendVoice(target, index) {
+ const _this = this;
target.isSend = true;
const h = this.$createElement;
@@ -381,29 +250,41 @@
target.isSend = false;
done();
},
- }).then((action) => {
- if (action == "confirm") {
- if (!voiceText) {
- this.$message({
- message: "鎸囦护涓嶈兘涓虹┖",
- type: "warning",
+ })
+ .then((action) => {
+ if (action == "confirm") {
+ if (!voiceText) {
+ this.$message({
+ message: "鎸囦护涓嶈兘涓虹┖",
+ type: "warning",
+ });
+ target.isSend = false;
+ _this.$set(_this.helemtArr, index, target);
+ return;
+ }
+ console.log(voiceText);
+ sendAudio(target.device_sn, voiceText).then((res) => {
+ this.$message({
+ message: "鎸囦护鍙戦�佹垚鍔�",
+ type: "success",
+ });
+ target.isSend = false;
+ _this.$set(_this.helemtArr, index, target);
});
- return;
+ target.isSend = false;
+ _this.$set(_this.helemtArr, index, target);
+ } else {
+ target.isSend = false;
+ _this.$set(_this.helemtArr, index, target);
}
- console.log(voiceText);
- sendAudio(target.device_sn, voiceText).then((res) => {
- this.$message({
- message: "鎸囦护鍙戦�佹垚鍔�",
- type: "success",
- });
- });
+ })
+ .catch(() => {
target.isSend = false;
- } else {
- target.isSend = false;
- }
- });
+ _this.$set(_this.helemtArr, index, target);
+ });
},
- telephone(target) {
+ telephone(target, index) {
+ this.targetIndex = index;
target.istele = true;
this.telephoneObj = target;
},
@@ -431,7 +312,9 @@
},
closeTele(e) {
e.istele = false;
+ this.$set(this.helemtArr, this.targetIndex, e);
this.telephoneObj = null;
+ this.targetIndex = null;
},
},
components: {
diff --git a/src/pages/internetEquipment/components/headCard.vue b/src/pages/internetEquipment/components/headCard.vue
index 4291714..4738c7a 100644
--- a/src/pages/internetEquipment/components/headCard.vue
+++ b/src/pages/internetEquipment/components/headCard.vue
@@ -1,77 +1,73 @@
<template>
<div class="head-card">
- <div class="card-left">
- <div class="number" :style="colorStyle">{{number}}</div>
- <div class="info">{{info}}</div>
- </div>
- <img class="card-right" :src="src" alt="">
+ <div class="card-left">
+ <div class="number" :style="colorStyle">{{ number }}</div>
+ <div class="info">{{ info }}</div>
+ </div>
+ <img class="card-right" :src="src" alt="" />
</div>
</template>
<script>
export default {
- props: {
- number: {
- require: true
- },
- info: {
- require: true
- },
- icon: {
- require: true
- },
- color: {
- require: true
- },
- src: {
- require: true
- }
+ props: {
+ number: {
+ require: true,
},
- data (){
- return {
-
- }
+ info: {
+ require: true,
},
- computed: {
- colorStyle (){
- return {
- "--color":this.color
- }
- }
- }
-}
+ icon: {
+ require: true,
+ },
+ color: {
+ require: true,
+ },
+ src: {
+ require: true,
+ },
+ },
+ data() {
+ return {};
+ },
+ computed: {
+ colorStyle() {
+ return {
+ "--color": this.color,
+ };
+ },
+ },
+};
</script>
<style scoped lang="scss">
.head-card {
- box-sizing: border-box;
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 20px;
- width: 187px;
- height: 90px;
- background: #FFFFFF;
- box-shadow: 0px 2px 10px rgba(141, 164, 187, 0.25);
- border-radius: 15px;
+ box-sizing: border-box;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 20px 2%;
+ width: 187px;
+ height: 90px;
+ background: #ffffff;
+ box-shadow: 0px 2px 10px rgba(141, 164, 187, 0.25);
+ border-radius: 15px;
- .card-left {
- .number {
- font-size: 24px;
- font-weight: 700;
- color: var(--color);
- }
- .info {
- font-size: 12px;
- color: #4F4F4F;
-;
- }
+ .card-left {
+ .number {
+ font-size: 24px;
+ font-weight: 700;
+ color: var(--color);
}
-
- .card-right {
- width: 58px;
- height: 58px;
-
+ .info {
+ font-size: 12px;
+ color: #4f4f4f;
}
+ }
+
+ .card-right {
+ width: 58px;
+ height: 58px;
+ }
}
</style>
\ No newline at end of file
diff --git a/src/pages/internetEquipment/components/helemetEchart.vue b/src/pages/internetEquipment/components/helemetEchart.vue
index 4af998f..fab8843 100644
--- a/src/pages/internetEquipment/components/helemetEchart.vue
+++ b/src/pages/internetEquipment/components/helemetEchart.vue
@@ -21,6 +21,9 @@
});
let myChart = echarts.init(document.getElementById("echart-cotainer"));
myChart.setOption(this.option);
+ window.addEventListener("resize", function () {
+ myChart.resize();
+ });
},
data() {
return {
diff --git a/src/pages/internetEquipment/components/helemetHead.vue b/src/pages/internetEquipment/components/helemetHead.vue
index 6f6600c..b81f365 100644
--- a/src/pages/internetEquipment/components/helemetHead.vue
+++ b/src/pages/internetEquipment/components/helemetHead.vue
@@ -51,10 +51,12 @@
display: flex;
.head-card {
+ flex: 1;
margin-right: 10px;
}
.helemet-echart {
+ flex: 4;
margin-left: 10px;
width: 570px;
height: 90px;
diff --git a/src/pages/internetEquipment/components/telephoneBox.vue b/src/pages/internetEquipment/components/telephoneBox.vue
new file mode 100644
index 0000000..6c9215b
--- /dev/null
+++ b/src/pages/internetEquipment/components/telephoneBox.vue
@@ -0,0 +1,122 @@
+<template>
+ <div class="telephone-box">
+ <div class="title">
+ <span class="icon iconfont"></span>
+ <span>鍘荤數</span>
+ </div>
+ <div class="info">
+ <div class="id">1139</div>
+ <div class="sip">sip:1139@47.112.193.0</div>
+ </div>
+
+ <div class="video">1</div>
+
+ <div class="control">
+ <img src="/images/InternetData/鎸傛柇.png" />
+ <img src="/images/InternetData/澹伴煶.png" class="mid" />
+ <img src="/images/InternetData/璇濈瓛.png" />
+ </div>
+
+ <div class="close el-icon-close" @click="close"></div>
+ </div>
+</template>
+
+<script>
+export default {
+ props: {
+ tele: {
+ type: Object,
+ },
+ },
+ data() {
+ return {};
+ },
+
+ methods: {
+ close() {
+ this.$emit("close");
+ },
+ },
+};
+</script>
+
+<style scoped lang="scss">
+.telephone-box {
+ box-sizing: border-box;
+ position: fixed;
+ z-index: 5;
+ padding: 32px 28px 28px 55px;
+
+ width: 420px;
+ height: 382px;
+ left: 50%;
+ top: 50%;
+ margin-top: -15%;
+ margin-left: -15%;
+
+ background: #ffffff;
+ border-radius: 8px;
+ color: #4f4f4f;
+
+ .title {
+ text-align: left;
+ font-size: 16px;
+ font-weight: 700;
+
+ .icon {
+ margin-right: 2px;
+ font-size: 18px;
+ font-weight: normal;
+ }
+ }
+
+ .info {
+ margin-top: 18px;
+ font-weight: bold;
+ font-size: 16px;
+
+ .sip {
+ margin-top: 2px;
+ font-size: 12px;
+ font-weight: normal;
+ }
+ }
+
+ .video {
+ margin: 0 auto;
+ margin-top: 20px;
+ box-sizing: border-box;
+ width: 104px;
+ height: 104px;
+ background: #454141;
+ border: 5px solid #ffaa44;
+ border-radius: 50%;
+
+ font-size: 36px;
+ color: #fff;
+ line-height: 94px;
+ }
+
+ .control {
+ margin-top: 50px;
+
+ img {
+ width: 37px;
+ height: 37px;
+ }
+
+ .mid {
+ margin: 0 37px;
+ }
+ }
+
+ .close {
+ cursor: pointer;
+ position: absolute;
+ top: 12px;
+ right: 12px;
+ font-size: 12px;
+ font-weight: 700;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/internetEquipment/module/elecModule.vue b/src/pages/internetEquipment/module/elecModule.vue
index 7e2ec79..0f726fc 100644
--- a/src/pages/internetEquipment/module/elecModule.vue
+++ b/src/pages/internetEquipment/module/elecModule.vue
@@ -62,10 +62,10 @@
.elec-item {
display: flex;
align-items: center;
- justify-content: space-between;
+ justify-content: space-around;
margin-bottom: 4px;
- padding: 20px 5px 20px 5px;
- width: 240px;
+ padding: 20px 0;
+ width: 100%;
height: 78px;
background: #f9fafc;
border-radius: 10px;
diff --git a/src/pages/internetEquipment/module/historyModule.vue b/src/pages/internetEquipment/module/historyModule.vue
index ce928fe..523943d 100644
--- a/src/pages/internetEquipment/module/historyModule.vue
+++ b/src/pages/internetEquipment/module/historyModule.vue
@@ -87,11 +87,11 @@
.history-item {
display: flex;
- width: 240px;
+ width: 100%;
height: 74px;
margin-bottom: 4px;
align-items: center;
- justify-content: space-between;
+ justify-content: space-around;
background: #f9fafc;
border-radius: 10px;
padding: 0 10px;
diff --git a/src/pages/internetEquipment/module/mapIndex.vue b/src/pages/internetEquipment/module/mapIndex.vue
index e295056..7bfe1f1 100644
--- a/src/pages/internetEquipment/module/mapIndex.vue
+++ b/src/pages/internetEquipment/module/mapIndex.vue
@@ -1,19 +1,102 @@
<template>
<div id="map-index">
<div class="control">
- <div class="location icon iconfont" @click="location"></div>
- <div class="zoom-in icon iconfont" @click="zoomIn"></div>
- <div class="zoom-out icon iconfont" @click="zoomOut"></div>
+ <a href="#" title="瀹氫綅" @click="aClick()">
+ <div class="location icon iconfont" @click="location"></div>
+ </a>
+ <a href="#" title="鏀惧ぇ" @click="aClick()">
+ <div class="zoom-in icon iconfont" @click="zoomIn"></div>
+ </a>
+
+ <a href="#" title="缂╁皬" @click="aClick()">
+ <div class="zoom-out icon iconfont" @click="zoomOut"></div>
+ </a>
</div>
- <div class="range icon iconfont" @click="drawPolygon"></div>
+ <a href="#" title="鏂板/缂栬緫" @click="aClick()">
+ <div class="range icon iconfont" @click="drawPolygon"></div>
+ </a>
<el-input v-model="nodeId" placeholder="璇疯緭鍏ュ唴瀹�"></el-input>
<div class="save" v-if="showBtn" @click="savePoly">淇濆瓨</div>
+ <div class="del" v-if="polygonInfo" @click="delPoly">鍒犻櫎</div>
<div class="cancel" v-if="showBtn" @click="resetMap">鍙栨秷</div>
+
+ <span id="polygonInfo" v-show="polygonInfo">{{ polygonInfo }}</span>
+
+ <img
+ v-if="myNode && !isHidden"
+ src="/images/map/Group 594.png"
+ alt=""
+ class="video_icon"
+ @click="hiddenVideo()"
+ />
+ <a v-else href="#" title="瀹炴椂鐩戞帶" @click="aClick()">
+ <img
+ src="/images/map/鐩戞帶.png"
+ alt=""
+ class="video_icon"
+ @click="showVideo()"
+ />
+ </a>
+
+ <div class="video_box" v-if="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>
+
+ <video controls="controls" loop="loop">
+ <source src="/images/map/video_20210924_101628.mp4" type="video/mp4" />
+ </video>
+ </div>
+
+ <div class="helmet_box" v-show="myNode">
+ <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="button">
+ <img
+ src="/images/InternetData/瑙嗛.png"
+ alt=""
+ v-if="!isSending"
+ @click="sendVoice()"
+ />
+ <img src="/images/InternetData/瑙嗛_鐐瑰嚮.png" alt="" v-if="isSending" />
+ <img
+ src="/images/InternetData/璇煶.png"
+ alt=""
+ v-if="isTele == false"
+ @click="isTele = true"
+ />
+ <img
+ src="/images/InternetData/璇煶_鐐瑰嚮.png"
+ alt=""
+ v-if="isTele == true"
+ @click="isTele = false"
+ />
+ </div>
+ </div>
+
+ <telephoneBox :tele="myNode" v-if="isTele" @close="isTele = false" />
+
+ <div class="mask" v-if="isTele"></div>
</div>
</template>
<script>
-import { getHelemtData, getZones, createZones } from "@/api/helemt";
+import {
+ getHelemtData,
+ getZones,
+ createZones,
+ delZones,
+ sendAudio,
+} from "@/api/helemt";
+import telephoneBox from "../components/telephoneBox.vue";
import "ol/ol.css";
import Feature from "ol/Feature";
@@ -28,6 +111,9 @@
import Draw from "ol/interaction/Draw";
import { Modify, Snap } from "ol/interaction";
import Polygon from "ol/geom/Polygon";
+import Select from "ol/interaction/Select";
+import Overlay from "ol/Overlay";
+import { pointerMove } from "ol/events/condition";
let myMap = {};
let myVectorSource = {};
@@ -41,24 +127,20 @@
});
let myDraw = {};
let myModify = {};
+let myPolygon = {};
+let mySelect = {};
+let overlay = {};
+let overlay2 = {};
+let voiceText = "";
export default {
- created() {
- this.getNodeData();
- },
data() {
return {
+ isSending: false,
+ isTele: false,
+ isHidden: false,
showBtn: false,
- nodeArr: [
- { data: [116.06157, 39.66157], id: 1, color: "缁�" },
- { data: [116.06247, 39.66247], id: 2, color: "缁�" },
- { data: [116.06337, 39.66337], id: 3, color: "缁�" },
- { data: [116.06467, 39.66437], id: 4, color: "缁�" },
- { data: [116.06517, 39.66517], id: 5, color: "绾�" },
- { data: [116.06627, 39.66627], id: 6, color: "绾�" },
- { data: [116.06787, 39.66787], id: 7, color: "绾�" },
- { data: [116.06897, 39.66897], id: 8, color: "绾�" },
- ],
+ nodeArr: [],
nodeId: "",
iconArr: [],
rangeArr: [],
@@ -68,14 +150,21 @@
polyFeature: [],
drawStore: [],
modifyStore: [],
+ polygonInfo: "",
+ nodeFeature: [],
+ myNode: null,
+ commentContent: "",
};
},
mounted() {
this.initMap();
},
+ components: {
+ telephoneBox,
+ },
methods: {
- async getNodeData() {},
async initMap() {
+ const that = this;
// 鑾峰彇鑺傜偣
const res = await getHelemtData();
this.nodeArr = [];
@@ -84,6 +173,7 @@
data: [item.lng, item.lat],
id: item.device_sn,
color: item.is_out_bound == 0 ? "缁�" : "绾�",
+ battery: item.battery,
});
});
@@ -97,7 +187,6 @@
return obj;
});
}
- console.log(this.polygonArr);
// 璁剧疆鍦板浘涓績
this.center = this.nodeArr[0].data;
@@ -131,6 +220,114 @@
console.log(item);
})
}) */
+
+ window.addEventListener("resize", function () {
+ map.updateSize();
+ });
+
+ const select = new Select({
+ filter: (feature, layer) => {
+ if (feature.values_ && feature.values_.type == "node") {
+ this.myNode = feature;
+ return true;
+ } else if (feature.type && feature.type == "polygon") {
+ myPolygon = feature;
+ this.myNode = null;
+
+ return true;
+ } else {
+ this.myNode = null;
+ return false;
+ }
+ },
+ style: (feature) => {
+ if (feature.values_ && feature.values_.type == "node") {
+ return new Style({
+ image: new Icon({
+ size: [32, 32],
+ src: `/images/map/瀹夊叏甯�-${feature.values_.color}.png`,
+ }),
+ zIndex: 1,
+ });
+ } else if (feature.type && feature.type == "polygon") {
+ return new Style({
+ fill: new Fill({
+ color: "rgba(0, 0, 255, 0.1)",
+ }),
+ stroke: new Stroke({
+ color: "skyblue",
+ width: 3,
+ }),
+ });
+ }
+ },
+ });
+
+ const select2 = new Select({
+ condition: pointerMove,
+ filter: (feature, layer) => {
+ if (feature.values_ && feature.values_.type == "node") {
+ return true;
+ } else {
+ return false;
+ }
+ },
+ style: (feature) => {
+ if (feature.values_ && feature.values_.type == "node") {
+ return new Style({
+ image: new Icon({
+ size: [32, 32],
+ src: `/images/map/瀹夊叏甯�-${feature.values_.color}.png`,
+ }),
+ zIndex: 1,
+ });
+ }
+ },
+ });
+
+ const info = document.querySelector("#polygonInfo");
+
+ map.addInteraction(select);
+ map.addInteraction(select2);
+ mySelect = select;
+ select.on("select", function (e) {
+ e.stopPropagation();
+ overlay2.setPosition(undefined);
+
+ if (e.selected.length == 0) {
+ that.polygonInfo = "";
+ that.nodeId = "";
+ that.myNode = null;
+ return false;
+ }
+
+ if (e.selected[0].values_.type == "node") {
+ that.isHidden = false;
+ that.polygonInfo = "";
+ that.nodeId = e.selected[0].values_.id;
+ return false;
+ }
+
+ if (myPolygon.polygonName) {
+ that.polygonInfo = myPolygon.polygonName;
+ } else {
+ that.polygonInfo = "鏂板尯鍩�";
+ }
+ overlay.setPosition(e.mapBrowserEvent.coordinate);
+ return false;
+ });
+
+ select2.on("select", function (e) {
+ if (
+ e.selected.length &&
+ e.selected[0].values_.type == "node" &&
+ that.myNode &&
+ that.myNode.values_.id == e.selected[0].values_.id
+ ) {
+ overlay2.setPosition(e.mapBrowserEvent.coordinate);
+ } else {
+ }
+ });
},
initNode([x, y], color) {
const iconFeature = new Feature({
@@ -147,12 +344,19 @@
iconFeature.setStyle(iconStyle);
this.iconArr.push(iconFeature);
+ iconFeature.set("color", `${color}`);
+ iconFeature.set("lat", `${x}`);
+ iconFeature.set("lng", `${y}`);
+
return iconFeature;
},
initAllNode() {
this.nodeArr.forEach((item) => {
const node = this.initNode(item.data, item.color);
node.set("id", item.id);
+ node.set("type", "node");
+ node.set("battery", item.battery);
+ this.nodeFeature.push(node);
myVectorSource.addFeature(node);
});
},
@@ -161,6 +365,8 @@
this.polygonArr.forEach((item) => {
const feature = new Feature({ geometry: new Polygon([item.data]) });
feature.id = item.id;
+ feature.type = "polygon";
+ feature.polygonName = item.name;
this.polyFeature.push(feature);
});
},
@@ -179,6 +385,19 @@
});
},
initBottomMap(vectorLayer) {
+ const info = document.querySelector("#polygonInfo");
+ const helmet_box = document.querySelector(".helmet_box");
+ overlay2 = new Overlay({
+ element: helmet_box,
+ autoPan: true,
+ autoPanAnimation: {
+ duration: 250,
+ },
+ });
+
+ overlay = new Overlay({
+ element: info,
+ });
return new Map({
target: "map-index",
layers: [baseLayer, vectorLayer],
@@ -186,6 +405,7 @@
center: transform(this.center, "EPSG:4326", "EPSG:3857"),
zoom: this.zoom,
}),
+ overlays: [overlay, overlay2],
});
},
zoomIn() {
@@ -204,6 +424,8 @@
view.setCenter(transform(this.center, "EPSG:4326", "EPSG:3857"));
},
drawPolygon() {
+ this.resetMap();
+ mySelect.setActive(false);
this.showBtn = true;
const draw = new Draw({
source: myVectorSource,
@@ -232,6 +454,7 @@
}
event.feature.id = id;
+ event.feature.type = "polygon";
this.drawStore.push({
id,
data: event.feature.getGeometry().getCoordinates()[0],
@@ -240,7 +463,6 @@
const modify = new Modify({ source: myVectorSource });
modify.addEventListener("modifyend", (event) => {
- console.log(event.features);
const id = event.features.array_[0].id;
const data = event.features.array_[0].getGeometry().getCoordinates()[0];
this.modifyStore.push({ id, data });
@@ -250,14 +472,14 @@
myMap.addInteraction(draw);
},
resetMap() {
+ this.polygonInfo = "";
+ mySelect.setActive(true);
this.initPolygonArr();
- console.log(this.polyFeature);
const vectorSource = new VectorSource({
features: this.polyFeature,
});
/* if(this.polygonArr.length>0){
this.initPolygonArr()
- console.log(this.polyFeature);
vectorSource.addFeature(this.polyFeature[0])
} */
myVectorSource = vectorSource;
@@ -272,6 +494,7 @@
this.modifyStore = [];
},
async savePoly() {
+ mySelect.setActive(true);
myMap.removeInteraction(myDraw);
myMap.removeInteraction(myModify);
this.showBtn = false;
@@ -291,7 +514,6 @@
}
const arrData = this.polygonArr.map((item) => {
let name = item.name ? item.name : "";
- console.log(item);
let data = item.data.map((arr) => {
arr = transform([arr[0], arr[1]], "EPSG:3857", "EPSG:4326");
return arr.join(",");
@@ -303,8 +525,181 @@
id: +item.id,
};
});
- const res = await createZones({ dots_arr: arrData });
- console.log(res);
+ await createZones({ dots_arr: arrData });
+ const res = await getHelemtData();
+ this.nodeArr = [];
+ res.data.items.forEach((item) => {
+ this.nodeArr.push({
+ data: [item.lng, item.lat],
+ id: item.device_sn,
+ color: item.is_out_bound == 0 ? "缁�" : "绾�",
+ });
+ });
+ this.nodeFeature.forEach((item) => {
+ myVectorSource.removeFeature(item);
+ });
+ this.initNode();
+ this.initAllNode();
+ },
+ delPoly() {
+ this.$confirm("姝ゆ搷浣滃皢鍒犻櫎璇ュ尯鍩�, 鏄惁缁х画?", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(async () => {
+ myVectorSource.removeFeature(myPolygon);
+ const res = await delZones({ id: myPolygon.id });
+ if (res.status == 200) {
+ this.$message({
+ type: "success",
+ message: "鍒犻櫎鎴愬姛!",
+ });
+ this.polygonInfo = "";
+ 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;
+ });
+ }
+ } else {
+ this.$message({
+ type: "info",
+ message: "鍒犻櫎澶辫触",
+ });
+ }
+ })
+ .catch(() => {
+ this.$message({
+ type: "info",
+ message: "宸插彇娑堝垹闄�",
+ });
+ });
+ },
+ showVideo() {
+ if (!this.myNode) {
+ return false;
+ }
+
+ this.isHidden = false;
+ },
+ hiddenVideo() {
+ document.querySelector("video").pause();
+ this.isHidden = true;
+ },
+ close() {
+ overlay2.setPosition(undefined);
+ },
+ onCommentInputChange() {
+ let value = document.querySelector("#commentContent").value;
+ voiceText = value;
+ let cont = 20 - value.length;
+ document.querySelector(
+ "#comment_info"
+ ).innerHTML = `杩樺彲杈撳叆${cont}涓瓧绗;
+ },
+ sendVoice() {
+ const _this = this;
+ this.isSending = true;
+
+ const h = this.$createElement;
+ this.$msgbox({
+ message: h(
+ "div",
+ {
+ attrs: {
+ class: "el-textarea",
+ },
+ },
+ [
+ h(
+ "div",
+ {
+ attrs: {
+ class: "el-title",
+ },
+ },
+ [
+ h(
+ "span",
+ {
+ attrs: {
+ class: "icon iconfont",
+ },
+ },
+ "\ue7cc"
+ ),
+ h("span", null, "鍙戦�佽闊�"),
+ ]
+ ),
+ h("textarea", {
+ attrs: {
+ placeholder: "璇疯緭鍏ヨ闊冲懡浠�",
+ maxlength: "20",
+ class: "el-textarea__inner",
+ autocomplete: "off",
+ rows: 3,
+ id: "commentContent",
+ },
+ value: this.commentContent,
+ on: { input: this.onCommentInputChange },
+ }),
+ h(
+ "div",
+ { attrs: { class: "info", id: "comment_info" } },
+ "杩樺彲杈撳叆20涓瓧绗�"
+ ),
+ ]
+ ),
+ showCancelButton: true,
+ confirmButtonText: "纭畾",
+ confirmButtonClass: "hele_btn_save",
+ cancelButtonClass: "hele_btn_cancel",
+ cancelButtonText: "鍙栨秷",
+ beforeClose: (action, instance, done) => {
+ document.querySelector("#commentContent").value = "";
+ document.querySelector(
+ "#comment_info"
+ ).innerHTML = `杩樺彲杈撳叆20涓瓧绗;
+ _this.isSending = false;
+ done();
+ },
+ })
+ .then((action) => {
+ if (action == "confirm") {
+ if (!voiceText) {
+ this.$message({
+ message: "鎸囦护涓嶈兘涓虹┖",
+ type: "warning",
+ });
+ _this.isSending = false;
+ return;
+ }
+ sendAudio(_this.myNode.values_.id, voiceText).then((res) => {
+ this.$message({
+ message: "鎸囦护鍙戦�佹垚鍔�",
+ type: "success",
+ });
+ _this.isSending = false;
+ });
+ _this.isSending = false;
+ } else {
+ _this.isSending = false;
+ }
+ })
+ .catch(() => {
+ _this.isSending = false;
+ });
+ },
+ aClick() {
+ return false;
},
},
watch: {
@@ -326,14 +721,12 @@
if (res.data.items && res.data.items.length > 0) {
res.data.items.forEach((obj) => {
this.nodeArr.forEach((item) => {
- if ((item.id = obj.device_sn)) {
+ if (item.id == obj.device_sn) {
arr.push(item);
}
});
});
}
-
- console.log(this.rangeArr);
if (this.rangeArr.length > 0) {
this.rangeArr.forEach((item) => {
@@ -362,6 +755,7 @@
rangeFeature.setStyle(iconStyle);
myVectorSource.addFeature(rangeFeature);
+ rangeFeature.set("type", "range");
this.rangeArr.push(rangeFeature);
});
}
@@ -372,12 +766,106 @@
</script>
<style scoped lang="scss">
+a {
+ background-color: transparent;
+ color: #337ab7;
+ text-decoration: none;
+}
+a:active a:hover {
+ outline: 0;
+}
+
#map-index {
position: relative;
margin: 20px 0;
- width: 1170px;
+ width: 100%;
height: 396px;
border-radius: 15px;
+
+ .helmet_box {
+ width: 205px;
+ height: 172px;
+ padding: 10px 10px 20px 15px;
+ font-size: 12px;
+ background: rgba(255, 255, 255, 0.7);
+ backdrop-filter: blur(4px);
+ border-radius: 15px;
+ text-align: left;
+
+ .icon_close {
+ text-align: right;
+ cursor: pointer;
+ }
+
+ .sn {
+ color: #f54336;
+ }
+ .location {
+ margin: 10px 0;
+ }
+ .button {
+ margin-top: 10px;
+ text-align: center;
+ img {
+ cursor: pointer;
+ width: 22px;
+ &:first-child {
+ margin-right: 48px;
+ }
+ }
+ }
+ }
+
+ .video_box {
+ box-sizing: border-box;
+ overflow: hidden;
+ position: absolute;
+ z-index: 2;
+ top: 45px;
+ right: 25px;
+ width: 483px;
+ height: 306px;
+ background: rgba(241, 250, 246, 0.6);
+ backdrop-filter: blur(4px);
+ /* Note: backdrop-filter has minimal browser support */
+ border-radius: 15px;
+ border: 1px solid rgb(17, 170, 102);
+ transition: all linear 0.5s;
+
+ &.hidden {
+ width: 0;
+ border: none;
+ }
+
+ .title {
+ margin: 15px 40px 0 20px;
+ width: 420px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ color: #4f4f4f;
+ font-size: 12px;
+
+ .left {
+ .ball {
+ display: inline-block;
+ width: 0;
+ height: 0;
+ border: 4px solid #f54336;
+ border-radius: 2px;
+ margin-right: 10px;
+ }
+ }
+ }
+
+ video {
+ margin: 8px 40px 0 20px;
+ width: 424px;
+ height: 246px;
+ object-fit: fill;
+ }
+ }
+
.control {
position: absolute;
display: flex;
@@ -464,6 +952,84 @@
line-height: 36px;
cursor: pointer;
}
+
+ .del {
+ position: absolute;
+ z-index: 3;
+ top: 15px;
+ right: 113px;
+ width: 87px;
+ height: 35px;
+ background: rgb(245, 108, 108);
+ border: 1px solid rgb(245, 108, 108);
+ border-radius: 8px;
+ color: #fff;
+ font-size: 12px;
+ line-height: 36px;
+ cursor: pointer;
+ }
+
+ .video_icon {
+ position: absolute;
+ z-index: 3;
+ top: 179px;
+ right: 10px;
+ width: 37px;
+ }
+
+ #polygonInfo {
+ padding: 10px;
+ border: 1px solid;
+ color: black;
+ background-color: #fff;
+ z-index: 3;
+ width: 100px;
+ }
+
+ .mask {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center;
+ z-index: 4;
+ background-color: black;
+ opacity: 0.5;
+ }
+}
+
+.el-textarea {
+ height: 150px;
+ padding: 0 15px;
+
+ .el-title {
+ margin-top: 20px;
+ margin-bottom: 15px;
+ color: #4f4f4f;
+ font-size: 16px;
+ font-weight: 700;
+
+ .icon {
+ font-weight: normal;
+ font-size: 19px;
+ }
+ }
+
+ .el-textarea__inner {
+ width: 357px;
+
+ &:focus {
+ border: 1px solid #11aa66;
+ }
+ }
+
+ .info {
+ font-size: 12px;
+ color: #828282;
+ text-align: right;
+ padding-right: 38px;
+ }
}
</style>
diff --git a/src/pages/internetEquipment/module/realTimeModule.vue b/src/pages/internetEquipment/module/realTimeModule.vue
index 140629d..80bdda4 100644
--- a/src/pages/internetEquipment/module/realTimeModule.vue
+++ b/src/pages/internetEquipment/module/realTimeModule.vue
@@ -1,17 +1,23 @@
<template>
<div class="real-time-module">
<div class="title">瀹炴椂鎶撴媿棰勮</div>
- <div class="real-time-item" v-for="(item, index) in boundArr" :key="index">
- <img :src="item.snap_shot" alt="" class="warnArea" />
- <warnDescription
- :warnDes="{
- code: item.device_sn,
- time: item.updated_at,
- longitude: item.lng,
- latitude: item.lat,
- warn: '鏈湪鐢靛瓙鍥存爮鍖哄煙',
- }"
- />
+ <div class="real-time-list">
+ <div
+ class="real-time-item"
+ v-for="(item, index) in boundArr"
+ :key="index"
+ >
+ <img :src="item.snap_shot" alt="" class="warnArea" />
+ <warnDescription
+ :warnDes="{
+ code: item.device_sn,
+ time: item.updated_at,
+ longitude: item.lng,
+ latitude: item.lat,
+ warn: '鏈湪鐢靛瓙鍥存爮鍖哄煙',
+ }"
+ />
+ </div>
</div>
</div>
</template>
@@ -32,10 +38,7 @@
<style scoped lang="scss">
.real-time-module {
- display: flex;
- flex-wrap: wrap;
padding: 20px;
- padding-right: 0px;
width: 570px;
height: 292px;
background-color: #fff;
@@ -43,17 +46,29 @@
border-radius: 15px;
overflow-y: scroll;
+ .real-time-list {
+ display: grid;
+ justify-content: space-between;
+ grid-template-columns: repeat(auto-fill, 170px);
+ grid-gap: 10px;
+ }
+
.title {
margin-bottom: 10px;
font-size: 14px;
font-weight: 700;
- width: 530px;
+ width: 100%;
text-align: left;
}
.real-time-item {
- margin-right: 13px;
+ margin-right: 10px;
}
+
+ .real-time-item:last-child {
+ margin-right: auto;
+ }
+
.warnArea {
width: 167px;
height: 104px;
diff --git a/src/pages/internetEquipment/views/helemetEquipment.vue b/src/pages/internetEquipment/views/helemetEquipment.vue
index ee3abec..067e9fc 100644
--- a/src/pages/internetEquipment/views/helemetEquipment.vue
+++ b/src/pages/internetEquipment/views/helemetEquipment.vue
@@ -67,10 +67,17 @@
display: flex;
justify-content: start;
color: #4f4f4f;
-
+ .real-time-module {
+ flex: 2.35;
+ }
.elec-module {
+ flex: 1;
margin: 0 20px;
}
+
+ .history-module {
+ flex: 1;
+ }
}
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0