From 0bb459c121f04f573230fa98de5ffc75b53f9960 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期五, 29 十月 2021 14:22:11 +0800
Subject: [PATCH] map
---
src/pages/internetEquipment/module/historyModule.vue | 83 +++++
vue.config.js | 2
src/pages/internetEquipment/views/helemetEquipment.vue | 40 ++
public/images/shuohuang/背景.png | 0
public/images/InternetDevice/Group 441.png | 0
src/pages/internetEquipment/index/index.vue | 11
public/images/InternetData/挂断.png | 0
public/images/map/安全帽-绿.png | 0
public/images/InternetData/话筒.png | 0
src/pages/internetData/components/telephoneBox.vue | 11
src/pages/shuohuangMonitorAnalyze/components/leftNav.vue | 41 +-
public/images/map/安全帽-红.png | 0
public/images/InternetDevice/Group 367.png | 0
src/pages/internetData/index/index.vue | 1
src/pages/internetEquipment/components/warnDescription.vue | 2
src/pages/internetEquipment/components/headCard.vue | 9
src/pages/internetData/views/helemtTable.vue | 20
src/pages/internetEquipment/module/mapIndex.vue | 394 +++++++++++++++++++++++++
src/pages/internetEquipment/components/helemetEchart.vue | 5
src/pages/shuohuangMonitorAnalyze/index/App.vue | 72 ++--
src/pages/internetEquipment/components/helemetHead.vue | 13
package.json | 1
public/images/map/范围-红.png | 0
public/images/map/范围-绿.png | 0
src/pages/internetEquipment/components/processWarn.vue | 136 +++++++++
src/pages/internetEquipment/module/elecModule.vue | 51 +++
public/images/InternetDevice/电池.png | 0
public/images/InternetDevice/Group 368.png | 0
public/images/InternetData/声音.png | 0
29 files changed, 786 insertions(+), 106 deletions(-)
diff --git a/package.json b/package.json
index 25b6709..e4878df 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
"eslint": "^5.16.0",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-vue": "^5.0.0",
+ "parcel-bundler": "^1.12.5",
"prettier": "^1.18.2",
"sass": "^1.18.0",
"sass-loader": "^7.1.0",
diff --git "a/public/images/InternetData/\345\243\260\351\237\263.png" "b/public/images/InternetData/\345\243\260\351\237\263.png"
new file mode 100644
index 0000000..2be92b7
--- /dev/null
+++ "b/public/images/InternetData/\345\243\260\351\237\263.png"
Binary files differ
diff --git "a/public/images/InternetData/\346\214\202\346\226\255.png" "b/public/images/InternetData/\346\214\202\346\226\255.png"
new file mode 100644
index 0000000..b22bb1f
--- /dev/null
+++ "b/public/images/InternetData/\346\214\202\346\226\255.png"
Binary files differ
diff --git "a/public/images/InternetData/\350\257\235\347\255\222.png" "b/public/images/InternetData/\350\257\235\347\255\222.png"
new file mode 100644
index 0000000..15fe9cd
--- /dev/null
+++ "b/public/images/InternetData/\350\257\235\347\255\222.png"
Binary files differ
diff --git a/public/images/InternetDevice/Group 367.png b/public/images/InternetDevice/Group 367.png
new file mode 100644
index 0000000..1ac1b0a
--- /dev/null
+++ b/public/images/InternetDevice/Group 367.png
Binary files differ
diff --git a/public/images/InternetDevice/Group 368.png b/public/images/InternetDevice/Group 368.png
new file mode 100644
index 0000000..a2e63e1
--- /dev/null
+++ b/public/images/InternetDevice/Group 368.png
Binary files differ
diff --git a/public/images/InternetDevice/Group 441.png b/public/images/InternetDevice/Group 441.png
new file mode 100644
index 0000000..741eb56
--- /dev/null
+++ b/public/images/InternetDevice/Group 441.png
Binary files differ
diff --git "a/public/images/InternetDevice/\347\224\265\346\261\240.png" "b/public/images/InternetDevice/\347\224\265\346\261\240.png"
new file mode 100644
index 0000000..4a9f1c6
--- /dev/null
+++ "b/public/images/InternetDevice/\347\224\265\346\261\240.png"
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"
new file mode 100644
index 0000000..356bd7e
--- /dev/null
+++ "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"
new file mode 100644
index 0000000..e8c6fec
--- /dev/null
+++ "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/\350\214\203\345\233\264-\347\272\242.png" "b/public/images/map/\350\214\203\345\233\264-\347\272\242.png"
new file mode 100644
index 0000000..ad17f93
--- /dev/null
+++ "b/public/images/map/\350\214\203\345\233\264-\347\272\242.png"
Binary files differ
diff --git "a/public/images/map/\350\214\203\345\233\264-\347\273\277.png" "b/public/images/map/\350\214\203\345\233\264-\347\273\277.png"
new file mode 100644
index 0000000..dbcf784
--- /dev/null
+++ "b/public/images/map/\350\214\203\345\233\264-\347\273\277.png"
Binary files differ
diff --git "a/public/images/shuohuang/\350\203\214\346\231\257.png" "b/public/images/shuohuang/\350\203\214\346\231\257.png"
new file mode 100644
index 0000000..f687be7
--- /dev/null
+++ "b/public/images/shuohuang/\350\203\214\346\231\257.png"
Binary files differ
diff --git a/src/pages/internetData/components/telephoneBox.vue b/src/pages/internetData/components/telephoneBox.vue
index 228229c..b137dcc 100644
--- a/src/pages/internetData/components/telephoneBox.vue
+++ b/src/pages/internetData/components/telephoneBox.vue
@@ -12,9 +12,9 @@
<div class="video">1</div>
<div class="control">
- <span class="icon iconfont"></span>
- <span class="icon iconfont mid"></span>
- <span class="icon iconfont"></span>
+ <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>
@@ -102,8 +102,9 @@
.control {
margin-top: 50px;
- .icon {
- font-size: 37px;
+ img {
+ width: 37px;
+ height: 37px;
}
.mid {
diff --git a/src/pages/internetData/index/index.vue b/src/pages/internetData/index/index.vue
index 660d91a..db983c0 100644
--- a/src/pages/internetData/index/index.vue
+++ b/src/pages/internetData/index/index.vue
@@ -19,7 +19,6 @@
<!-- 鏅鸿兘瀹夊叏甯� -->
<helmet
- v-if="activeTab === 0"
/>
</div>
diff --git a/src/pages/internetData/views/helemtTable.vue b/src/pages/internetData/views/helemtTable.vue
index 6cdce5a..5c80651 100644
--- a/src/pages/internetData/views/helemtTable.vue
+++ b/src/pages/internetData/views/helemtTable.vue
@@ -150,43 +150,43 @@
currentPage:1,
tableData: [
{code: "A123123123123", elec:79.1, ip:"192.168.1.2", mac:"ec:da:da:da:ed:98",
- longitude:120.1231231, latitude:120.1231231,height:"11.21",time:"0.23.45",positon:"鍗曞悜瀹氫綅",
+ 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.1231231, latitude:120.1231231,height:"11.21",time:"0.23.45",positon:"鍗曞悜瀹氫綅",
+ 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.1231231, latitude:120.1231231,height:"11.21",time:"0.23.45",positon:"鍗曞悜瀹氫綅",
+ 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.1231231, latitude:120.1231231,height:"11.21",time:"0.23.45",positon:"鍗曞悜瀹氫綅",
+ 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.1231231, latitude:120.1231231,height:"11.21",time:"0.23.45",positon:"鍗曞悜瀹氫綅",
+ 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.1231231, latitude:120.1231231,height:"11.21",time:"0.23.45",positon:"鍗曞悜瀹氫綅",
+ 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.1231231, latitude:120.1231231,height:"11.21",time:"0.23.45",positon:"鍗曞悜瀹氫綅",
+ 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.1231231, latitude:120.1231231,height:"11.21",time:"0.23.45",positon:"鍗曞悜瀹氫綅",
+ 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.1231231, latitude:120.1231231,height:"11.21",time:"0.23.45",positon:"鍗曞悜瀹氫綅",
+ 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.1231231, latitude:120.1231231,height:"11.21",time:"0.23.45",positon:"鍗曞悜瀹氫綅",
+ longitude:120.123123, latitude:120.123123,height:"11.21",time:"0.23.45",positon:"鍗曞悜瀹氫綅",
isSend:false,istele:false
},
],
diff --git a/src/pages/internetEquipment/components/headCard.vue b/src/pages/internetEquipment/components/headCard.vue
index 9159c44..4291714 100644
--- a/src/pages/internetEquipment/components/headCard.vue
+++ b/src/pages/internetEquipment/components/headCard.vue
@@ -4,7 +4,7 @@
<div class="number" :style="colorStyle">{{number}}</div>
<div class="info">{{info}}</div>
</div>
- <div class="card-right icon iconfont"></div>
+ <img class="card-right" :src="src" alt="">
</div>
</template>
@@ -21,6 +21,9 @@
require: true
},
color: {
+ require: true
+ },
+ src: {
require: true
}
},
@@ -66,8 +69,8 @@
}
.card-right {
- font-size: 58px;
- color: var(--color);
+ width: 58px;
+ height: 58px;
}
}
diff --git a/src/pages/internetEquipment/components/helemetEchart.vue b/src/pages/internetEquipment/components/helemetEchart.vue
index 9f8a2cf..3dc6b97 100644
--- a/src/pages/internetEquipment/components/helemetEchart.vue
+++ b/src/pages/internetEquipment/components/helemetEchart.vue
@@ -21,7 +21,7 @@
xAxis: {
type: 'category',
boundaryGap: false,
- data: ['1', '2021-09-02 00:00', '1', '2021-09-02 00:00', '1', '2021-09-02 00:00', '1'],
+ data: ['', '2021-09-02 00:00', '', '2021-09-02 00:00', '', '2021-09-02 00:00', ''],
axisLine: {
show: false //涓嶆樉绀哄潗鏍囪酱杞寸嚎
},
@@ -30,6 +30,9 @@
},
spiltLine:{
show: false //鎯宠涓嶆樉绀虹綉鏍肩嚎锛屾敼涓篺alse
+ },
+ axisLabel:{
+ interval: 0
}
},
yAxis: {
diff --git a/src/pages/internetEquipment/components/helemetHead.vue b/src/pages/internetEquipment/components/helemetHead.vue
index ee54200..b340d77 100644
--- a/src/pages/internetEquipment/components/helemetHead.vue
+++ b/src/pages/internetEquipment/components/helemetHead.vue
@@ -4,8 +4,8 @@
:key="index"
:number="item.number"
:info="item.info"
- :icon="item.icon"
:color="item.color"
+ :src="cardImage[index]"
/>
<helemetEchart />
@@ -21,9 +21,14 @@
data (){
return {
cardData: [
- {number:233,info:"璁惧鎬婚噺",icon:"\ue743",color:"#4E94FF"},
- {number:34,info:"鏈湀鏂板",icon:"\ue743",color:"#FFAA44"},
- {number:45,info:"浠婃棩棰勮",icon:"\ue743",color:"#FF6464"},
+ {number:233,info:"璁惧鎬婚噺",color:"#4E94FF"},
+ {number:34,info:"鏈湀鏂板",color:"#FFAA44"},
+ {number:45,info:"浠婃棩棰勮",color:"#FF6464"},
+ ],
+ cardImage: [
+ '/images/InternetDevice/Group 441.png',
+ '/images/InternetDevice/Group 367.png',
+ '/images/InternetDevice/Group 368.png',
]
}
},
diff --git a/src/pages/internetEquipment/components/processWarn.vue b/src/pages/internetEquipment/components/processWarn.vue
new file mode 100644
index 0000000..d3a88f1
--- /dev/null
+++ b/src/pages/internetEquipment/components/processWarn.vue
@@ -0,0 +1,136 @@
+<template>
+ <div class="process-warn">
+ <div class="close el-icon-close" @click="close"></div>
+ <span class="el-icon-question"></span>
+ <div class="title">纭鎻愮ず</div>
+ <div class="des">璇风‘瀹氶璀︽暟鎹槸鍚﹀凡澶勭悊锛�</div>
+ <div class="radio">
+ <el-radio v-model="radio" :label="false">鏈鐞�</el-radio>
+ <el-radio v-model="radio" :label="true">宸插鐞�</el-radio>
+ </div>
+ <div class="btn">
+ <div class="cancel" @click="close">鍙栨秷</div>
+ <div class="save" @click="save">纭畾</div>
+ </div>
+
+ </div>
+</template>
+
+<script>
+export default {
+ props :{
+ warnObj :{
+ warnObj :true
+ }
+ },
+ data (){
+ return {
+ radio : false
+ }
+ },
+ methods:{
+ close (){
+ this.$emit("close",this.warnObj)
+ },
+ save (){
+ if (this.radio) {
+ this.$emit("save",this.warnObj)
+ }
+ this.$emit("close",this.warnObj)
+ }
+ }
+}
+</script>
+
+<style scoped lang="scss">
+.process-warn {
+ position: fixed;
+ display: flex;
+ flex-direction: column;
+ align-items:center;
+ z-index: 2;
+ padding: 48px 30px 30px 30px;
+
+ width: 420px;
+ height: 274px;
+ left: 50%;
+ top: 50%;
+ margin-top: -15%;
+ margin-left: -15%;
+
+ background: #FFFFFF;
+ border-radius: 8px;
+ color: #4F4F4F;
+
+ span {
+ font-size: 40px;
+ color:#FFAA44;
+ cursor: pointer;
+ }
+
+ .close {
+ position: absolute;
+ top: 12px;
+ right: 12px;
+ font-size: 12px;
+ font-weight: 700;
+ }
+
+ .title {
+ margin: 6px 0 4px 0;
+ font-weight: 700;
+ font-size: 16px;
+ }
+
+ .des {
+ margin-bottom: 10px;
+ font-size: 14px;
+ color: #828282;
+ }
+
+ label ::v-deep .el-radio__inner:hover {
+ border-color: #FFAA44;
+ }
+
+ label.is-checked {
+ ::v-deep .el-radio__inner {
+ border-color: #FFAA44;
+ background: #FFAA44;
+ }
+ ::v-deep .el-radio__label {
+ color: #FFAA44;
+ }
+ }
+
+ .btn {
+ display: flex;
+ margin-top: 34px;
+ justify-content: space-between;
+ width: 100%;
+ }
+
+ .cancel {
+ width: 175px;
+ height: 40px;
+ border: 1px solid #E0E0E0;
+ box-sizing: border-box;
+ border-radius: 25px;
+ font-size: 16px;
+ line-height: 40px;
+ color: #333;
+ cursor: pointer;
+ }
+
+ .save {
+ width: 175px;
+ height: 40px;
+ background: #11AA66;
+ border-radius: 25px;
+ font-size: 16px;
+ line-height: 40px;
+ color: #fff;
+ cursor: pointer;
+ }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/pages/internetEquipment/components/warnDescription.vue b/src/pages/internetEquipment/components/warnDescription.vue
index 6c933d3..c86b1ff 100644
--- a/src/pages/internetEquipment/components/warnDescription.vue
+++ b/src/pages/internetEquipment/components/warnDescription.vue
@@ -1,7 +1,7 @@
<template>
<div class="warn-description">
<div class="code"><span>璁惧缂栫爜: </span>{{warnDes.code}}</div>
- <div class="location" v-if="warnDes.location">{{warnDes.location}}</div>
+ <div class="location" v-if="warnDes.location"><span>浣嶇疆: </span>{{warnDes.location}}</div>
<div class="time"><span>鏃堕棿: </span>{{warnDes.time}}</div>
<div class="position" v-if="warnDes.longitude"><span>缁忓害: </span>{{warnDes.longitude}} <span>绾害: </span>{{warnDes.latitude}}</div>
<div class="warnIcon" v-if="warnDes.warn"><span class="icon iconfont"></span> {{warnDes.warn}}</div>
diff --git a/src/pages/internetEquipment/index/index.vue b/src/pages/internetEquipment/index/index.vue
index b8b1994..92e9ecd 100644
--- a/src/pages/internetEquipment/index/index.vue
+++ b/src/pages/internetEquipment/index/index.vue
@@ -16,7 +16,7 @@
<!-- 鍙充晶鍐呭 -->
<div class="right_content">
<!-- 瀹夊叏甯借澶� -->
- <helemetEquipment v-if="activeTab === 0"/>
+ <helemetEquipment />
</div>
</div>
@@ -53,9 +53,6 @@
</script>
<style scoped lang="scss">
-* {
- box-sizing: border-box;
-}
.internert-equipment {
display: flex;
@@ -78,4 +75,10 @@
width: 100%;
}
}
+</style>
+
+<style >
+* {
+ box-sizing: border-box;
+}
</style>
\ No newline at end of file
diff --git a/src/pages/internetEquipment/module/elecModule.vue b/src/pages/internetEquipment/module/elecModule.vue
index c157c30..59e25cd 100644
--- a/src/pages/internetEquipment/module/elecModule.vue
+++ b/src/pages/internetEquipment/module/elecModule.vue
@@ -1,10 +1,17 @@
<template>
<div class="elec-module">
- <div class="title"></div>
+ <div class="title">鐢甸噺杩囦綆棰勮</div>
<div class="elec-item"
v-for="(item,index) in warnArr"
:key="index">
+ <div class="left">
+ <img src="/images/InternetDevice/鐢垫睜.png" alt="">
+ <div class="colobox"
+ :style="{'width':`${item.elec/100*29}px`,
+ 'background-color':`${item.elec >= 30 ? 'rgb(37, 174, 109)' : 'rgb(255, 100, 100)'}`}"></div>
+ <div class="elec">鐢甸噺: {{item.elec}}</div>
+ </div>
<warnDescription
:warnDes="{code:item.code,
time:item.time,
@@ -29,12 +36,54 @@
</script>
<style scoped lang="scss">
+
.elec-module {
+ padding: 20px;
width: 280px;
height: 292px;
background-color: #fff;
box-shadow: 0px 2px 10px rgba(141, 164, 187, 0.25);
border-radius: 15px;
overflow-y: scroll;
+
+ .title {
+ margin-bottom: 10px;
+ font-size: 14px;
+ font-weight: 700;
+ text-align: left;
+ }
+
+ .elec-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 4px;
+ padding: 20px 5px 20px 5px;
+ width: 240px;
+ height: 78px;
+ background: #F9FAFC;
+ border-radius: 10px;
+
+ .elec {
+ font-weight: 700;
+ }
+
+ .left {
+ position: relative;
+ img {
+ width: 40px;
+ height: 20px;
+ }
+
+ .colobox {
+ position: absolute;
+ top: 2px;
+ left: 10px;
+ width: 29px;
+ height: 15px;
+ border-radius: 2px;
+ }
+ }
+ }
}
</style>
\ No newline at end of file
diff --git a/src/pages/internetEquipment/module/historyModule.vue b/src/pages/internetEquipment/module/historyModule.vue
index 73d05a5..874b256 100644
--- a/src/pages/internetEquipment/module/historyModule.vue
+++ b/src/pages/internetEquipment/module/historyModule.vue
@@ -1,38 +1,113 @@
<template>
<div class="history-module">
- <div class="title"></div>
+ <div class="title">鍘嗗彶鎶ヨ</div>
<div class="history-item"
- v-for="(item,index) in warnArr"
+ v-for="(item,index) in warnArrProcess"
:key="index">
- <warnDescription
+ <warnDescription
:warnDes="{code:item.code,
time:item.time,
warn:item.warn}"/>
+ <div
+ class="button"
+ @click="process(item)">澶勭悊</div>
</div>
+ <processWarn
+ v-if="activeWarn"
+ :warnObj="activeWarn"
+ @close="close"
+ @save="save"/>
+ <div class="mask" v-if="activeWarn"/>
</div>
</template>
<script>
import warnDescription from '@/pages/internetEquipment/components/warnDescription'
+import processWarn from '@/pages/internetEquipment/components/processWarn'
export default {
+ data (){
+ return {
+ activeWarn:null
+ }
+ },
props :{
warnArr : {
type: Array
}
},
components :{
- warnDescription
+ warnDescription,
+ processWarn
+ },
+ computed :{
+ warnArrProcess(){
+ return this.warnArr.filter(item=>!item.processed)
+ }
+ },
+ methods: {
+ process(item){
+ this.activeWarn = item
+ },
+ close(){
+ this.activeWarn =null
+ },
+ save(item) {
+ this.$set(item,'processed',true)
+ this.close()
+ }
}
}
</script>
<style scoped lang="scss">
.history-module {
+ padding: 20px;
width: 280px;
height: 292px;
background-color: #fff;
box-shadow: 0px 2px 10px rgba(141, 164, 187, 0.25);
border-radius: 15px;
overflow-y: scroll;
+
+ .title {
+ margin-bottom: 10px;
+ font-size: 14px;
+ font-weight: 700;
+ text-align: left;
+ }
+
+ .history-item {
+ display: flex;
+ width: 240px;
+ height: 74px;
+ margin-bottom: 4px;
+ align-items: center;
+ justify-content: space-between;
+ background: #F9FAFC;
+ border-radius: 10px;
+ padding: 0 10px;
+ .button {
+ width: 54px;
+ height: 20px;
+ background: #CFEEE0;
+ border-radius: 30px;
+ font-size: 12px;
+ line-height: 20px;
+ color: #11AA66;
+ cursor: pointer;
+ }
+ }
+
+ .mask {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center;
+ z-index: 1;
+ background-color: black;
+ opacity: .5;
+ }
}
</style>
\ No newline at end of file
diff --git a/src/pages/internetEquipment/module/mapIndex.vue b/src/pages/internetEquipment/module/mapIndex.vue
index c00944a..5716128 100644
--- a/src/pages/internetEquipment/module/mapIndex.vue
+++ b/src/pages/internetEquipment/module/mapIndex.vue
@@ -1,21 +1,395 @@
<template>
- <div class="map-index">
-
+ <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>
+ </div>
+ <div class="range icon iconfont" @click="drawPolygon"></div>
+ <el-input v-model="nodeId" placeholder="璇疯緭鍏ュ唴瀹�"></el-input>
+ <div class="save" v-if="showBtn" @click="savePoly">淇濆瓨</div>
+ <div class="cancel" v-if="showBtn" @click="resetMap">鍙栨秷</div>
</div>
</template>
<script>
-export default {
+import "ol/ol.css";
+import Feature from "ol/Feature";
+import Point from "ol/geom/Point";
+import VectorSource from "ol/source/Vector";
+import { Icon, Style, Fill, Stroke } from "ol/style";
+import { transform } from "ol/proj";
+import { Map, View } from "ol";
+import TileLayer from "ol/layer/Tile";
+import { Vector as VectorLayer } from "ol/layer";
+import OSM from "ol/source/OSM";
+import Draw from "ol/interaction/Draw";
+import { Modify, Snap } from "ol/interaction";
+import Polygon from "ol/geom/Polygon";
-}
+let myMap = {};
+let myVectorSource = {};
+let baseLayer = new TileLayer({
+ source: new OSM({
+ // url:'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8',
+ url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7",
+ crossOrigin: "anonymous",
+ // url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
+ }),
+});
+let myDraw = {};
+let myModify = {};
+
+export default {
+ data() {
+ return {
+ 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: "绾�" },
+ ],
+ nodeId: "",
+ iconArr: [],
+ rangeArr: [],
+ zoom: 15,
+ center: [116.06667, 39.66667],
+ polygonArr: [
+ {
+ data: [
+ [12919660.904416857, 4817401.4907109635],
+ [12921041.54824026, 4817277.28054],
+ [12920195.963614853, 4816775.662541878],
+ [12919493.698417485, 4816785.2171704145],
+ ],
+ id: "1",
+ },
+ ],
+ polyFeature: [],
+ drawStore: [],
+ modifyStore: [],
+ };
+ },
+ mounted() {
+ this.initMap();
+ },
+ methods: {
+ initMap() {
+ this.initPolygonArr();
+ 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;
+ this.initAllNode();
+
+ const vectorLayer = this.initLayer(vectorSource);
+
+ const map = this.initBottomMap(vectorLayer);
+
+ myMap = map;
+ /* map.getView().on('change:resolution', ()=> {
+ this.iconArr.forEach(item=>{
+ let style = item.getStyle()
+ console.log(this.zoom);
+ style.getImage().setScale(this.zoom/15)
+ item.setStyle(style)
+ console.log(item);
+ })
+ }) */
+ },
+ initNode([x, y], color) {
+ const iconFeature = new Feature({
+ geometry: new Point(transform([x, y], "EPSG:4326", "EPSG:3857")),
+ });
+
+ const iconStyle = new Style({
+ image: new Icon({
+ size: [32, 32],
+ src: `/images/map/瀹夊叏甯�-${color}.png`,
+ }),
+ zIndex: 1,
+ });
+
+ iconFeature.setStyle(iconStyle);
+ this.iconArr.push(iconFeature);
+ return iconFeature;
+ },
+ initAllNode() {
+ this.nodeArr.forEach((item) => {
+ const node = this.initNode(item.data, item.color);
+ node.set("id", item.id);
+ myVectorSource.addFeature(node);
+ });
+ },
+ initPolygonArr() {
+ this.polyFeature = [];
+ this.polygonArr.forEach((item) => {
+ const feature = new Feature({ geometry: new Polygon([item.data]) });
+ feature.id = item.id;
+ this.polyFeature.push(feature);
+ });
+ },
+ initLayer(source) {
+ return new VectorLayer({
+ source: source,
+ style: new Style({
+ fill: new Fill({
+ color: "rgba(255, 255, 255, 0.4)",
+ }),
+ stroke: new Stroke({
+ color: "#F54336",
+ width: 2,
+ }),
+ }),
+ });
+ },
+ initBottomMap(vectorLayer) {
+ return new Map({
+ target: "map-index",
+ layers: [baseLayer, vectorLayer],
+ view: new View({
+ center: transform(this.center, "EPSG:4326", "EPSG:3857"),
+ zoom: this.zoom,
+ }),
+ });
+ },
+ zoomIn() {
+ const view = myMap.getView();
+ this.zoom++;
+ view.setZoom(this.zoom);
+ },
+ zoomOut() {
+ const view = myMap.getView();
+ this.zoom--;
+ view.setZoom(this.zoom);
+ },
+ location() {
+ const view = myMap.getView();
+ view.setZoom(this.zoom);
+ view.setCenter(
+ transform([116.06667, 39.66667], "EPSG:4326", "EPSG:3857")
+ );
+ },
+ drawPolygon() {
+ this.showBtn = true;
+ const draw = new Draw({
+ source: myVectorSource,
+ type: "Polygon",
+ });
+ myDraw = draw;
+ draw.on("drawend", (event) => {
+ let id =
+ this.drawStore.length > 0
+ ? +this.drawStore[this.drawStore.length - 1].id + 1
+ : +this.polygonArr[this.polygonArr.length - 1].id + 1;
+ event.feature.id = id;
+ this.drawStore.push({
+ id,
+ data: event.feature.getGeometry().getCoordinates()[0],
+ });
+ });
+
+ 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 });
+ });
+ myModify = modify;
+ myMap.addInteraction(modify);
+ myMap.addInteraction(draw);
+ },
+ resetMap() {
+ 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;
+ this.initAllNode();
+
+ const vectorLayer = this.initLayer(vectorSource);
+ myMap.setLayers([baseLayer, vectorLayer]);
+ myMap.removeInteraction(myDraw);
+ myMap.removeInteraction(myModify);
+ this.showBtn = false;
+ this.drawStore = [];
+ this.modifyStore = [];
+ },
+ savePoly() {
+ myMap.removeInteraction(myDraw);
+ myMap.removeInteraction(myModify);
+ this.showBtn = false;
+ if (this.drawStore.length) {
+ this.polygonArr = [...this.polygonArr, ...this.drawStore];
+ this.drawStore = [];
+ }
+ if (this.modifyStore.length) {
+ this.modifyStore.forEach((item) => {
+ this.polygonArr.forEach((item2) => {
+ if (item.id == item2.id) {
+ item2.data = item.data;
+ }
+ });
+ });
+ this.modifyStore = [];
+ }
+ },
+ },
+ watch: {
+ nodeId: {
+ handler(val) {
+ const arr = this.nodeArr.filter((item) => item.id == val);
+ if (this.rangeArr.length > 0) {
+ this.rangeArr.forEach((item) => {
+ myVectorSource.removeFeature(item);
+ });
+ this.rangeArr = [];
+ }
+
+ if (arr.length > 0) {
+ arr.forEach((item) => {
+ const rangeFeature = new Feature({
+ geometry: new Point(
+ transform(item.data, "EPSG:4326", "EPSG:3857")
+ ),
+ name: "Null Island",
+ population: 4000,
+ rainfall: 500,
+ });
+
+ const iconStyle = new Style({
+ image: new Icon({
+ size: [64, 64],
+ src: `/images/map/鑼冨洿-${item.color}.png`,
+ }),
+ });
+
+ rangeFeature.setStyle(iconStyle);
+ myVectorSource.addFeature(rangeFeature);
+ this.rangeArr.push(rangeFeature);
+ });
+ }
+ },
+ },
+ },
+};
</script>
<style scoped lang="scss">
-.map-index {
- width: 1170px;
- height: 396px;
- border-radius: 15px;
- background-color: skyblue
-}
+#map-index {
+ position: relative;
+ margin: 20px 0;
+ width: 1170px;
+ height: 396px;
+ border-radius: 15px;
+ .control {
+ position: absolute;
+ display: flex;
+ flex-direction: column;
+ z-index: 1;
+ left: 25px;
+ bottom: 25px;
+ width: 30px;
+ height: 91px;
+ background: #ffffff;
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
+ border-radius: 8px;
+ .location,
+ .zoom-in,
+ .zoom-out {
+ line-height: 30px;
+ font-size: 18px;
+ flex: 1;
+ cursor: pointer;
+ }
+ .location {
+ background: #11aa66;
+ border-radius: 8px 8px 0 0;
+ color: #fff;
+ }
+ }
+ .el-input {
+ position: absolute;
+ z-index: 1;
+ top: 15px;
+ left: 15px;
+ width: 205px;
+ height: 35px;
+ ::v-deep input {
+ width: 100%;
+ height: 100%;
+ &:focus {
+ border-color: #11aa66 !important;
+ }
+ }
+ }
+ .range {
+ position: absolute;
+ left: 25px;
+ bottom: 126px;
+ width: 30px;
+ height: 30px;
+ background: #11aa66;
+ color: #fff;
+ border-radius: 8px;
+ cursor: pointer;
+ z-index: 1;
+ line-height: 30px;
+ }
+ .save {
+ position: absolute;
+ z-index: 3;
+ top: 15px;
+ right: 113px;
+ width: 87px;
+ height: 35px;
+ background: #11aa66;
+ border: 1px solid #11aa66;
+ border-radius: 8px;
+ color: #fff;
+ font-size: 12px;
+ line-height: 36px;
+ cursor: pointer;
+ }
+
+ .cancel {
+ position: absolute;
+ z-index: 3;
+ top: 15px;
+ right: 20px;
+ width: 87px;
+ height: 35px;
+ background: #fff;
+ border: 1px solid #11aa66;
+ border-radius: 8px;
+ color: #4f4f4f;
+ font-size: 12px;
+ line-height: 36px;
+ cursor: pointer;
+ }
+}
+</style>
+
+<style>
+.ol-zoom {
+ display: none !important;
+}
</style>
\ No newline at end of file
diff --git a/src/pages/internetEquipment/views/helemetEquipment.vue b/src/pages/internetEquipment/views/helemetEquipment.vue
index 31a83f4..677710e 100644
--- a/src/pages/internetEquipment/views/helemetEquipment.vue
+++ b/src/pages/internetEquipment/views/helemetEquipment.vue
@@ -26,7 +26,9 @@
time:"2021-09-21 12:23",
longitude:"23.2344",
latitude:"45.4455",
- warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙"
+ warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙",
+ processed:false,
+ elec: 50.2
},{
code:"A100640819DA3B",
image:"/images/settings/background.png",
@@ -34,7 +36,9 @@
time:"2021-09-21 12:23",
longitude:"23.2344",
latitude:"45.4455",
- warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙"
+ warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙",
+ processed:false,
+ elec: 10.2
},
{
code:"A100640819DA3B",
@@ -43,7 +47,9 @@
time:"2021-09-21 12:23",
longitude:"23.2344",
latitude:"45.4455",
- warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙"
+ warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙",
+ processed:false,
+ elec: 50.2
},
{
code:"A100640819DA3B",
@@ -52,7 +58,9 @@
time:"2021-09-21 12:23",
longitude:"23.2344",
latitude:"45.4455",
- warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙"
+ warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙",
+ processed:false,
+ elec: 50.2
},
{
code:"A100640819DA3B",
@@ -61,7 +69,9 @@
time:"2021-09-21 12:23",
longitude:"23.2344",
latitude:"45.4455",
- warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙"
+ warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙",
+ processed:false,
+ elec: 50.2
},
{
code:"A100640819DA3B",
@@ -70,7 +80,9 @@
time:"2021-09-21 12:23",
longitude:"23.2344",
latitude:"45.4455",
- warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙"
+ warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙",
+ processed:false,
+ elec: 50.2
},
{
code:"A100640819DA3B",
@@ -79,7 +91,9 @@
time:"2021-09-21 12:23",
longitude:"23.2344",
latitude:"45.4455",
- warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙"
+ warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙",
+ processed:false,
+ elec: 50.2
},
{
code:"A100640819DA3B",
@@ -88,7 +102,9 @@
time:"2021-09-21 12:23",
longitude:"23.2344",
latitude:"45.4455",
- warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙"
+ warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙",
+ processed:false,
+ elec: 50.2
},
{
code:"A100640819DA3B",
@@ -97,7 +113,9 @@
time:"2021-09-21 12:23",
longitude:"23.2344",
latitude:"45.4455",
- warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙"
+ warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙",
+ processed:false,
+ elec: 50.2
},
{
code:"A100640819DA3B",
@@ -106,7 +124,9 @@
time:"2021-09-21 12:23",
longitude:"23.2344",
latitude:"45.4455",
- warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙"
+ warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙",
+ processed:false,
+ elec: 50.2
}]
}
},
diff --git a/src/pages/shuohuangMonitorAnalyze/components/leftNav.vue b/src/pages/shuohuangMonitorAnalyze/components/leftNav.vue
index 2087052..9b605fd 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/leftNav.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/leftNav.vue
@@ -1,8 +1,14 @@
<template>
<div class="left-nav">
<h1>
- <img class="icon" :src="`${publicPath}images/shuohuang/railroad.png`" style="height: 40px;" />
- <span v-show="!isCollapse" style="padding-left: 6px;">鏈旈粍閾佽矾鏈鸿締鍒嗗叕鍙�</span>
+ <img
+ class="icon"
+ :src="`${publicPath}images/shuohuang/railroad.png`"
+ style="height: 40px"
+ />
+ <span v-show="!isCollapse" style="padding-left: 6px"
+ >鏈旈粍閾佽矾鏈鸿締鍒嗗叕鍙�</span
+ >
</h1>
<el-menu
class="el-menu-vertical-demo"
@@ -55,17 +61,16 @@
</template>
<script>
-
//import railroadImg from '/images/shuohuang/railroad.png';
export default {
props: {
isCollapse: {
type: Boolean,
- default: true
+ default: true,
},
menuChange: {
- type: Function
- }
+ type: Function,
+ },
},
computed: {
isAdmin() {
@@ -82,8 +87,8 @@
data() {
return {
publicPath: process.env.BASE_URL,
- activeIndex: 'guideIndex'
- }
+ activeIndex: "guideIndex",
+ };
},
mounted() {
// if (this.isAdmin) {
@@ -92,24 +97,20 @@
// this.activeIndex = sessionStorage.getItem('leftNavAct');
// }
// }
- this.activeIndex = this.isAdmin ? 'guideIndex' : 'searchForVideoAnalyze';
+ this.activeIndex = this.isAdmin ? "guideIndex" : "searchForVideoAnalyze";
- this.$emit('menuChange', this.activeIndex);
+ this.$emit("menuChange", this.activeIndex);
},
methods: {
handleSelect(index, indePath) {
this.activeIndex = index;
- sessionStorage.setItem('leftNavAct', this.activeIndex);
- this.$emit('menuChange', index);
+ sessionStorage.setItem("leftNavAct", this.activeIndex);
+ this.$emit("menuChange", index);
},
- handleOpen() {
-
- },
- handleClose() {
-
- }
- }
-}
+ handleOpen() {},
+ handleClose() {},
+ },
+};
</script>
<style lang="scss">
diff --git a/src/pages/shuohuangMonitorAnalyze/index/App.vue b/src/pages/shuohuangMonitorAnalyze/index/App.vue
index 0989569..6fdfe20 100644
--- a/src/pages/shuohuangMonitorAnalyze/index/App.vue
+++ b/src/pages/shuohuangMonitorAnalyze/index/App.vue
@@ -6,36 +6,43 @@
<div class="right">
<div class="top">
<div class="collapse-trigger" @click="toggleCollapse">
- <i :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"></i>
+ <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
</div>
<top-nav></top-nav>
</div>
<div class="container">
<!-- 棣栭〉 -->
- <GuideIndex ref="GuideIndex" v-if="actPage=='guideIndex'"></GuideIndex>
- <searchForVideoAnalyze v-if="actPage=='searchForVideoAnalyze'"></searchForVideoAnalyze>
- <memberManage v-if="actPage=='memberManage'"></memberManage>
- <taskManage v-if="actPage=='taskManage'"></taskManage>
- <transferMemo v-if="actPage=='transferMemo'"></transferMemo>
- <transferDeviceManage v-if="actPage=='transferDeviceManage'"></transferDeviceManage>
- <configManage v-if="actPage=='configManage'"></configManage>
- <lkg v-if="actPage=='lkgManage'"></lkg>
+ <GuideIndex
+ ref="GuideIndex"
+ v-if="actPage == 'guideIndex'"
+ ></GuideIndex>
+ <searchForVideoAnalyze
+ v-if="actPage == 'searchForVideoAnalyze'"
+ ></searchForVideoAnalyze>
+ <memberManage v-if="actPage == 'memberManage'"></memberManage>
+ <taskManage v-if="actPage == 'taskManage'"></taskManage>
+ <transferMemo v-if="actPage == 'transferMemo'"></transferMemo>
+ <transferDeviceManage
+ v-if="actPage == 'transferDeviceManage'"
+ ></transferDeviceManage>
+ <configManage v-if="actPage == 'configManage'"></configManage>
+ <lkg v-if="actPage == 'lkgManage'"></lkg>
</div>
</div>
</div>
</template>
<script>
-import Lkg from '../components/lkgManage'
-import TopNav from '../components/topNav';
-import LeftNav from '../components/leftNav';
-import GuideIndex from '../components/guideIndex';
-import TaskManage from '../components/taskManage';
-import TransferMemo from '../components/transferMemo';
-import ConfigManage from '../components/configManage';
-import MemberManage from '../components/memberManage';
-import TransferDeviceManage from '../components/transferDeviceManage';
-import SearchForVideoAnalyze from '../components/searchForVideoAnalyze';
+import Lkg from "../components/lkgManage";
+import TopNav from "../components/topNav";
+import LeftNav from "../components/leftNav";
+import GuideIndex from "../components/guideIndex";
+import TaskManage from "../components/taskManage";
+import TransferMemo from "../components/transferMemo";
+import ConfigManage from "../components/configManage";
+import MemberManage from "../components/memberManage";
+import TransferDeviceManage from "../components/transferDeviceManage";
+import SearchForVideoAnalyze from "../components/searchForVideoAnalyze";
export default {
components: {
@@ -48,20 +55,20 @@
TransferMemo,
TransferDeviceManage,
ConfigManage,
- GuideIndex
+ GuideIndex,
},
data() {
return {
isCollapse: false,
- actPage: 'guideIndex',
- }
+ actPage: "guideIndex",
+ };
},
mounted() {
// this.actPage = 'guideIndex';
},
methods: {
markNav() {
- sessionStorage.setItem('actPage', this.actPage);
+ sessionStorage.setItem("actPage", this.actPage);
this.menuChange(this.actPage);
},
toggleCollapse() {
@@ -69,20 +76,23 @@
//閫氱煡褰撳墠娲诲姩椤祎able(濡傛灉鏈�) doLayout
},
menuChange(path) {
- if (path=='guideIndex') {
+ if (path == "guideIndex") {
// this.$refs.GuideIndex.refreshShoubiNum()
}
- if (path == 'taskscreen') {
+ if (path == "taskscreen") {
//window.location.href = window.location.href+'taskscreen/index.html'
- window.open(window.location.href + 'taskscreen/index.html', '_blank')
- } else if (path == 'hiddendangerscreen') {
+ window.open(window.location.href + "taskscreen/index.html", "_blank");
+ } else if (path == "hiddendangerscreen") {
//window.location.href = window.location.href+'hiddendangerscreen/index.html'
- window.open(window.location.href + 'hiddendangerscreen/index.html', '_blank')
+ window.open(
+ window.location.href + "hiddendangerscreen/index.html",
+ "_blank"
+ );
}
this.actPage = path;
- }
- }
-}
+ },
+ },
+};
</script>
<style lang="scss">
diff --git a/vue.config.js b/vue.config.js
index 9710019..44ff875 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -41,7 +41,7 @@
})
// const serverUrl = "http://58.118.225.79:41243" // 缇婁簲
-const serverUrl = "http://192.168.20.189:7009"
+ const serverUrl = "http://192.168.20.189:7009"
module.exports = {
pages,
--
Gitblit v1.8.0