From bbe33e5fd87e5961fdab804bfb0b4cf354e0c5b2 Mon Sep 17 00:00:00 2001 From: ZZJ <zzjdsg2300@163.com> Date: 星期三, 24 十一月 2021 10:00:17 +0800 Subject: [PATCH] 地图接口 --- src/api/helemt.ts | 52 ++ src/pages/internetEquipment/module/historyModule.vue | 179 ++++---- src/pages/internetEquipment/components/helemetEchart.vue | 155 +++--- src/pages/internetEquipment/components/helemetHead.vue | 9 vue.config.js | 11 src/pages/internetEquipment/components/warnDescription.vue | 42 + src/pages/internetEquipment/module/realTimeModule.vue | 93 ++-- src/pages/internetEquipment/views/helemetEquipment.vue | 177 +------ src/pages/internetEquipment/components/processWarn.vue | 230 +++++----- src/pages/internetEquipment/module/elecModule.vue | 142 +++--- src/pages/internetEquipment/module/mapIndex.vue | 125 ++++- 11 files changed, 644 insertions(+), 571 deletions(-) diff --git a/src/api/helemt.ts b/src/api/helemt.ts index ab844df..9dc8d6f 100644 --- a/src/api/helemt.ts +++ b/src/api/helemt.ts @@ -21,4 +21,56 @@ url: `/temp/iotdata/banner-info`, method: "get", }) +} + +export const getChart = () => { + return request({ + url: `/temp/iotdata/seven-day`, + method: "get", + }) +} + +export const lowBattery = () => { + return request({ + url: `/temp/iotdata/low-battery`, + method: "post", + }) +} + +export const outBound = () => { + return request({ + url: `/temp/iotdata/out-bound`, + method: "post", + }) +} + +export const historyWarn = () => { + return request({ + url: `/temp/iotdata/history`, + method: "post", + }) +} + +export const handleWarn = (data) => { + return request({ + url: `/temp/iotdata/handle-warn`, + method: "post", + data + }) +} + +export const getZones = (data) => { + return request({ + url: `/temp/iotdata/zones`, + method: "post", + data + }) +} + +export const createZones = (data) => { + return request({ + url: `/temp/iotdata/create-zone`, + method: "post", + data + }) } \ No newline at end of file diff --git a/src/pages/internetEquipment/components/helemetEchart.vue b/src/pages/internetEquipment/components/helemetEchart.vue index 3dc6b97..4af998f 100644 --- a/src/pages/internetEquipment/components/helemetEchart.vue +++ b/src/pages/internetEquipment/components/helemetEchart.vue @@ -1,72 +1,85 @@ <template> <div class="helemet-echart"> - <div id="echart-cotainer" ></div> + <div id="echart-cotainer"></div> </div> </template> <script> import echarts from "echarts"; +import { getChart } from "@/api/helemt"; export default { - data (){ - return { - option : { - grid: { - show :false, - bottom: 20, - top: 20, - left: 40, - right: 20 + async created() { + const res = await getChart(); + res.data.forEach((item, index) => { + this.option.series[0].data.push(item.amount); + if (index % 2 == 1) { + this.option.xAxis.data.push(item.time); + } else { + this.option.xAxis.data.push(""); + } + }); + let myChart = echarts.init(document.getElementById("echart-cotainer")); + myChart.setOption(this.option); + }, + data() { + return { + option: { + grid: { + show: false, + bottom: 20, + top: 20, + left: 40, + right: 20, + }, + xAxis: { + type: "category", + boundaryGap: false, + data: [], + axisLine: { + show: false, //涓嶆樉绀哄潗鏍囪酱杞寸嚎 + }, + axisTick: { + show: false, //涓嶆樉绀哄潗鏍囪酱鍒诲害 + }, + spiltLine: { + show: false, //鎯宠涓嶆樉绀虹綉鏍肩嚎锛屾敼涓篺alse + }, + axisLabel: { + interval: 0, + }, + }, + yAxis: { + type: "value", + splitLine: { + show: false, + }, + axisLine: { + show: false, //涓嶆樉绀哄潗鏍囪酱杞寸嚎 + }, + axisTick: { + show: false, //涓嶆樉绀哄潗鏍囪酱鍒诲害 + }, + }, + series: [ + { + data: [], + type: "line", + areaStyle: {}, + areaStyle: { + normal: { + color: "#FFF8EB", //鏀瑰彉鍖哄煙棰滆壊 }, - xAxis: { - type: 'category', - boundaryGap: false, - data: ['', '2021-09-02 00:00', '', '2021-09-02 00:00', '', '2021-09-02 00:00', ''], - axisLine: { - show: false //涓嶆樉绀哄潗鏍囪酱杞寸嚎 - }, - axisTick: { - show: false //涓嶆樉绀哄潗鏍囪酱鍒诲害 - }, - spiltLine:{ - show: false //鎯宠涓嶆樉绀虹綉鏍肩嚎锛屾敼涓篺alse - }, - axisLabel:{ - interval: 0 - } - }, - yAxis: { - type: 'value', - splitLine : { - show: false - }, - axisLine: { - show: false //涓嶆樉绀哄潗鏍囪酱杞寸嚎 - }, - axisTick: { - show: false //涓嶆樉绀哄潗鏍囪酱鍒诲害 + }, + itemStyle: { + normal: { + lineStyle: { + color: "#FFAA44", }, }, - series: [ - { - data: [820, 932, 901, 934, 1290, 1330, 1320], - type: 'line', - areaStyle: {}, - areaStyle: { - normal: { - color: '#FFF8EB' //鏀瑰彉鍖哄煙棰滆壊 - } - }, - itemStyle: { - normal: { - lineStyle: { - color: '#FFAA44' - } - } - } + }, - -/* itemStyle: { + /* itemStyle: { normal: { color: '#f7ba0e', label: { @@ -87,18 +100,14 @@ } } } */ - } - ], - - } - } - }, - mounted (){ - let myChart = echarts.init(document.getElementById('echart-cotainer')) - myChart.setOption(this.option); - }, - methods :{ - /* format (params) { + }, + ], + }, + }; + }, + mounted() {}, + methods: { + /* format (params) { console.log(params); for (var i = 0, l = this.option.xAxis.data.length; i < l; i++) { @@ -112,14 +121,14 @@ } } } */ - } -} + }, +}; </script> <style scoped lang="scss"> .helemet-echart { - #echart-cotainer { - height: 100%; - } + #echart-cotainer { + height: 100%; + } } </style> \ No newline at end of file diff --git a/src/pages/internetEquipment/components/helemetHead.vue b/src/pages/internetEquipment/components/helemetHead.vue index f54029e..6f6600c 100644 --- a/src/pages/internetEquipment/components/helemetHead.vue +++ b/src/pages/internetEquipment/components/helemetHead.vue @@ -21,13 +21,16 @@ export default { async created() { const res = await getBanner(); + this.cardData[0].number = res.data.deviceAmount; + this.cardData[1].number = res.data.newDevice; + this.cardData[2].number = res.data.todayAdded; }, data() { return { cardData: [ - { number: 233, info: "璁惧鎬婚噺", color: "#4E94FF" }, - { number: 34, info: "鏈湀鏂板", color: "#FFAA44" }, - { number: 45, info: "浠婃棩棰勮", color: "#FF6464" }, + { number: 0, info: "璁惧鎬婚噺", color: "#4E94FF" }, + { number: 0, info: "鏈湀鏂板", color: "#FFAA44" }, + { number: 0, info: "浠婃棩棰勮", color: "#FF6464" }, ], cardImage: [ "/images/InternetDevice/Group 441.png", diff --git a/src/pages/internetEquipment/components/processWarn.vue b/src/pages/internetEquipment/components/processWarn.vue index d3a88f1..7979ed0 100644 --- a/src/pages/internetEquipment/components/processWarn.vue +++ b/src/pages/internetEquipment/components/processWarn.vue @@ -1,136 +1,134 @@ <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> - + <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 - } + props: { + warnObj: { + warnObj: true, + }, }, - data (){ + data() { return { - radio : false - } + radio: false, + }; }, - methods:{ - close (){ - this.$emit("close",this.warnObj) - }, - save (){ - if (this.radio) { - this.$emit("save",this.warnObj) - } - this.$emit("close",this.warnObj) - } - } -} + 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; + 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; - flex-direction: column; - align-items:center; - z-index: 2; - padding: 48px 30px 30px 30px; + margin-top: 34px; + justify-content: space-between; + width: 100%; + } - width: 420px; - height: 274px; - left: 50%; - top: 50%; - margin-top: -15%; - margin-left: -15%; + .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; + } - 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; - } + .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 c86b1ff..122b2a2 100644 --- a/src/pages/internetEquipment/components/warnDescription.vue +++ b/src/pages/internetEquipment/components/warnDescription.vue @@ -1,28 +1,39 @@ <template> <div class="warn-description"> - <div class="code"><span>璁惧缂栫爜: </span>{{warnDes.code}}</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> + <div class="code"><span>璁惧缂栫爜: </span>{{ warnDes.code }}</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.toFixed(4) }} <span>绾害: </span + >{{ warnDes.latitude.toFixed(4) }} + </div> + <div class="warnIcon" v-if="warnDes.warn"> + <span class="icon iconfont"></span> {{ warnDes.warn }} + </div> </div> </template> <script> export default { - props :{ - warnDes : { - type: Object - } - } -} + props: { + warnDes: { + type: Object, + }, + }, +}; </script> <style scoped lang="scss"> .warn-description { - .code, .location, .time, .position, .warnIcon { - text-align: left; - margin-bottom: 5px; + .code, + .location, + .time, + .position, + .warnIcon { + text-align: left; + margin-bottom: 5px; } span { @@ -30,8 +41,7 @@ } .warnIcon { - color: #FF6464; + color: #ff6464; } - } </style> \ No newline at end of file diff --git a/src/pages/internetEquipment/module/elecModule.vue b/src/pages/internetEquipment/module/elecModule.vue index 59e25cd..08d2c5d 100644 --- a/src/pages/internetEquipment/module/elecModule.vue +++ b/src/pages/internetEquipment/module/elecModule.vue @@ -1,89 +1,95 @@ <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, - location:item.location}"/> + <div class="elec-item" v-for="(item, index) in lowBatteryArr" :key="index"> + <div class="left"> + <img src="/images/InternetDevice/鐢垫睜.png" alt="" /> + <div + class="colobox" + :style="{ + width: `${(item.battery / 100) * 29}px`, + 'background-color': `${ + item.battery >= 30 ? 'rgb(37, 174, 109)' : 'rgb(255, 100, 100)' + }`, + }" + ></div> + <div class="elec">鐢甸噺: {{ item.battery }}</div> </div> - + <warnDescription + :warnDes="{ + code: item.device_sn, + time: item.updated_at, + longitude: item.lng, + latitude: item.lat, + }" + /> + </div> </div> </template> <script> -import warnDescription from '@/pages/internetEquipment/components/warnDescription' +import warnDescription from "@/pages/internetEquipment/components/warnDescription"; export default { - props :{ - warnArr:{ - type: Array - } + props: { + lowBatteryArr: { + type: Array, }, - components :{ - warnDescription - } -} + }, + components: { + warnDescription, + }, +}; </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; + 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; + .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; } - .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; + .left { + position: relative; + img { + width: 40px; + height: 20px; + } - .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; - } - } + .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 874b256..ce928fe 100644 --- a/src/pages/internetEquipment/module/historyModule.vue +++ b/src/pages/internetEquipment/module/historyModule.vue @@ -1,104 +1,113 @@ <template> <div class="history-module"> - <div class="title">鍘嗗彶鎶ヨ</div> - <div class="history-item" - v-for="(item,index) in warnArrProcess" - :key="index"> - <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 class="title">鍘嗗彶鎶ヨ</div> + <div + class="history-item" + v-for="(item, index) in warnArrProcess" + :key="index" + > + <warnDescription + :warnDes="{ + code: item.device_sn, + time: item.updated_at, + warn: item.isLowBattery == 1 ? '浣庣數閲忛璀�' : '瀹炴椂鎶撴媿棰勮', + }" + /> + <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' +import warnDescription from "@/pages/internetEquipment/components/warnDescription"; +import processWarn from "@/pages/internetEquipment/components/processWarn"; +import { handleWarn } from "@/api/helemt"; + export default { - data (){ - return { - activeWarn:null - } + data() { + return { + activeWarn: null, + }; + }, + props: { + warnArr: { + type: Array, }, - props :{ - warnArr : { - type: Array - } + }, + components: { + warnDescription, + processWarn, + }, + computed: { + warnArrProcess() { + return this.warnArr.filter((item) => item.status != 1); }, - components :{ - warnDescription, - processWarn + }, + methods: { + process(item) { + this.activeWarn = item; }, - computed :{ - warnArrProcess(){ - return this.warnArr.filter(item=>!item.processed) - } + close() { + this.activeWarn = null; }, - methods: { - process(item){ - this.activeWarn = item - }, - close(){ - this.activeWarn =null - }, - save(item) { - this.$set(item,'processed',true) - this.close() - } - } -} + save(item) { + console.log(item); + handleWarn({ id: item.id }).then((res) => { + this.$set(item, "status", 1); + 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; + 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; + .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; } + } - .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 { + .mask { position: fixed; top: 0; bottom: 0; @@ -107,7 +116,7 @@ text-align: center; z-index: 1; background-color: black; - opacity: .5; - } + opacity: 0.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 5716128..a4a648d 100644 --- a/src/pages/internetEquipment/module/mapIndex.vue +++ b/src/pages/internetEquipment/module/mapIndex.vue @@ -13,6 +13,8 @@ </template> <script> +import { getHelemtData, getZones, createZones } from "@/api/helemt"; + import "ol/ol.css"; import Feature from "ol/Feature"; import Point from "ol/geom/Point"; @@ -41,6 +43,9 @@ let myModify = {}; export default { + created() { + this.getNodeData(); + }, data() { return { showBtn: false, @@ -59,17 +64,7 @@ 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", - }, - ], + polygonArr: [], polyFeature: [], drawStore: [], modifyStore: [], @@ -79,8 +74,38 @@ this.initMap(); }, methods: { - initMap() { - this.initPolygonArr(); + async getNodeData() {}, + async initMap() { + // 鑾峰彇鑺傜偣 + 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 ? "缁�" : "绾�", + }); + }); + + // 鑾峰彇鍖哄煙 + 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; + }); + } + console.log(this.polygonArr); + + // 璁剧疆鍦板浘涓績 + this.center = this.nodeArr[0].data; + + if (this.polygonArr.length > 0) { + this.initPolygonArr(); + } + const vectorSource = new VectorSource({ features: this.polyFeature, }); @@ -176,9 +201,7 @@ location() { const view = myMap.getView(); view.setZoom(this.zoom); - view.setCenter( - transform([116.06667, 39.66667], "EPSG:4326", "EPSG:3857") - ); + view.setCenter(transform(this.center, "EPSG:4326", "EPSG:3857")); }, drawPolygon() { this.showBtn = true; @@ -188,10 +211,26 @@ }); 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; + let id; + + /* if (this.polygonArr.length > 0) { + id = + this.drawStore.length > 0 + ? +this.drawStore[this.drawStore.length - 1].id + 1 + : +this.polygonArr[this.polygonArr.length - 1].id + 1; + } else { + id = 1; + } */ + + if (this.drawStore.length > 0) { + id = +this.drawStore[this.drawStore.length - 1].id + 1; + } else { + id = + this.polygonArr.length > 0 + ? +this.polygonArr[this.polygonArr.length - 1].id + 1 + : "1"; + } + event.feature.id = id; this.drawStore.push({ id, @@ -232,7 +271,7 @@ this.drawStore = []; this.modifyStore = []; }, - savePoly() { + async savePoly() { myMap.removeInteraction(myDraw); myMap.removeInteraction(myModify); this.showBtn = false; @@ -250,12 +289,52 @@ }); this.modifyStore = []; } + 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(","); + }); + data = data.join("&"); + return { + name, + dots: data, + id: item.id, + }; + }); + const res = await createZones({ dots_arr: arrData }); + console.log(res); }, }, watch: { nodeId: { - handler(val) { - const arr = this.nodeArr.filter((item) => item.id == val); + async handler(val) { + if (!val) { + if (this.rangeArr.length > 0) { + this.rangeArr.forEach((item) => { + myVectorSource.removeFeature(item); + }); + this.rangeArr = []; + } + + return; + } + + const res = await getHelemtData({ sn: val }); + const arr = []; + if (res.data.items && res.data.items.length > 0) { + res.data.items.forEach((obj) => { + this.nodeArr.forEach((item) => { + if ((item.id = obj.device_sn)) { + arr.push(item); + } + }); + }); + } + + console.log(this.rangeArr); + if (this.rangeArr.length > 0) { this.rangeArr.forEach((item) => { myVectorSource.removeFeature(item); diff --git a/src/pages/internetEquipment/module/realTimeModule.vue b/src/pages/internetEquipment/module/realTimeModule.vue index f0d8f92..190a5e0 100644 --- a/src/pages/internetEquipment/module/realTimeModule.vue +++ b/src/pages/internetEquipment/module/realTimeModule.vue @@ -1,62 +1,63 @@ <template> <div class="real-time-module"> - <div class="title">瀹炴椂鎶撴媿棰勮</div> - <div class="real-time-item" - v-for="(item,index) in warnArr" - :key="index"> - <img :src="item.image" alt="" class="warnArea"> - <warnDescription - :warnDes="{code:item.code, - time:item.time, - longitude:item.longitude, - latitude:item.latitude, - warn:item.warn}"/> - </div> + <div class="title">瀹炴椂鎶撴媿棰勮</div> + <div class="real-time-item" v-for="(item, index) in warnArr" :key="index"> + <img src="/images/settings/background.png" alt="" class="warnArea" /> + <warnDescription + :warnDes="{ + code: item.device_sn, + time: item.updated_at, + longitude: item.lng, + latitude: item.lat, + warn: '鏈湪鐢靛瓙鍥存爮鍖哄煙', + }" + /> + </div> </div> </template> <script> -import warnDescription from '@/pages/internetEquipment/components/warnDescription' +import warnDescription from "@/pages/internetEquipment/components/warnDescription"; export default { - props :{ - warnArr:{ - type: Array - } + props: { + warnArr: { + type: Array, }, - components :{ - warnDescription - } -} + }, + components: { + warnDescription, + }, +}; </script> <style scoped lang="scss"> .real-time-module { - display: flex; - flex-wrap: wrap; - padding: 20px; - padding-right: 0px; - width: 570px; - height: 292px; - background-color: #fff; - box-shadow: 0px 2px 10px rgba(141, 164, 187, 0.25); - border-radius: 15px; - overflow-y: scroll; + display: flex; + flex-wrap: wrap; + padding: 20px; + padding-right: 0px; + width: 570px; + 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; - width: 530px; - text-align: left; - } + .title { + margin-bottom: 10px; + font-size: 14px; + font-weight: 700; + width: 530px; + text-align: left; + } - .real-time-item { - margin-right: 14px; - } - .warnArea { - width: 167px; - height: 104px; - border-radius: 5px; - } + .real-time-item { + margin-right: 14px; + } + .warnArea { + width: 167px; + height: 104px; + border-radius: 5px; + } } </style> \ No newline at end of file diff --git a/src/pages/internetEquipment/views/helemetEquipment.vue b/src/pages/internetEquipment/views/helemetEquipment.vue index 677710e..ab9f851 100644 --- a/src/pages/internetEquipment/views/helemetEquipment.vue +++ b/src/pages/internetEquipment/views/helemetEquipment.vue @@ -3,142 +3,47 @@ <helemetHead /> <mapIndex /> <div class="footer"> - <realTimeModule :warnArr="warnArr"/> - <elecModule :warnArr="warnArr"/> - <historyModule :warnArr="warnArr"/> + <realTimeModule :boundArr="boundArr" /> + <elecModule :lowBatteryArr="lowBatteryArr" /> + <historyModule :warnArr="warnArr" /> </div> </div> </template> <script> -import helemetHead from '@/pages/internetEquipment/components/helemetHead' -import mapIndex from '@/pages/internetEquipment/module/mapIndex' -import realTimeModule from '@/pages/internetEquipment/module/realTimeModule' -import elecModule from '@/pages/internetEquipment/module/elecModule' -import historyModule from '@/pages/internetEquipment/module/historyModule' +import helemetHead from "@/pages/internetEquipment/components/helemetHead"; +import mapIndex from "@/pages/internetEquipment/module/mapIndex"; +import realTimeModule from "@/pages/internetEquipment/module/realTimeModule"; +import elecModule from "@/pages/internetEquipment/module/elecModule"; +import historyModule from "@/pages/internetEquipment/module/historyModule"; +import { lowBattery, historyWarn, outBound } from "@/api/helemt"; + export default { - data (){ + async created() { + const res = await lowBattery(); + this.lowBatteryArr = res.data.items; + + const res2 = await historyWarn(); + console.log(res2.data); + this.warnArr = res2.data.items; + + const res3 = await outBound(); + this.boundArr = res3.data.items; + }, + data() { return { - warnArr:[{ - code:"A100640819DA3B", - image:"/images/settings/background.png", - location:"鏈濋槼绉戞妧鍥�", - time:"2021-09-21 12:23", - longitude:"23.2344", - latitude:"45.4455", - warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙", - processed:false, - elec: 50.2 - },{ - code:"A100640819DA3B", - image:"/images/settings/background.png", - location:"鏈濋槼绉戞妧鍥�", - time:"2021-09-21 12:23", - longitude:"23.2344", - latitude:"45.4455", - warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙", - processed:false, - elec: 10.2 - }, - { - code:"A100640819DA3B", - image:"/images/settings/background.png", - location:"鏈濋槼绉戞妧鍥�", - time:"2021-09-21 12:23", - longitude:"23.2344", - latitude:"45.4455", - warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙", - processed:false, - elec: 50.2 - }, - { - code:"A100640819DA3B", - image:"/images/settings/background.png", - location:"鏈濋槼绉戞妧鍥�", - time:"2021-09-21 12:23", - longitude:"23.2344", - latitude:"45.4455", - warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙", - processed:false, - elec: 50.2 - }, - { - code:"A100640819DA3B", - image:"/images/settings/background.png", - location:"鏈濋槼绉戞妧鍥�", - time:"2021-09-21 12:23", - longitude:"23.2344", - latitude:"45.4455", - warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙", - processed:false, - elec: 50.2 - }, - { - code:"A100640819DA3B", - image:"/images/settings/background.png", - location:"鏈濋槼绉戞妧鍥�", - time:"2021-09-21 12:23", - longitude:"23.2344", - latitude:"45.4455", - warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙", - processed:false, - elec: 50.2 - }, - { - code:"A100640819DA3B", - image:"/images/settings/background.png", - location:"鏈濋槼绉戞妧鍥�", - time:"2021-09-21 12:23", - longitude:"23.2344", - latitude:"45.4455", - warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙", - processed:false, - elec: 50.2 - }, - { - code:"A100640819DA3B", - image:"/images/settings/background.png", - location:"鏈濋槼绉戞妧鍥�", - time:"2021-09-21 12:23", - longitude:"23.2344", - latitude:"45.4455", - warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙", - processed:false, - elec: 50.2 - }, - { - code:"A100640819DA3B", - image:"/images/settings/background.png", - location:"鏈濋槼绉戞妧鍥�", - time:"2021-09-21 12:23", - longitude:"23.2344", - latitude:"45.4455", - warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙", - processed:false, - elec: 50.2 - }, - { - code:"A100640819DA3B", - image:"/images/settings/background.png", - location:"鏈濋槼绉戞妧鍥�", - time:"2021-09-21 12:23", - longitude:"23.2344", - latitude:"45.4455", - warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙", - processed:false, - elec: 50.2 - }] - } + warnArr: [], + lowBatteryArr: [], + }; }, components: { helemetHead, mapIndex, realTimeModule, elecModule, - historyModule - } - -} + historyModule, + }, +}; </script> <style scoped lang="scss"> @@ -147,20 +52,20 @@ } .helmet-equipment { - padding: 20px; - width: 100%; - height: 100%; - background: #FBFCFE; + padding: 20px; + width: 100%; + height: 100%; + background: #fbfcfe; - .map-index { - margin: 20px 0; - } + .map-index { + margin: 20px 0; + } - .footer { - height: 292px; - display: flex; - justify-content: space-between; - color: #4F4F4F; - } + .footer { + height: 292px; + display: flex; + justify-content: space-between; + color: #4f4f4f; + } } </style> \ No newline at end of file diff --git a/vue.config.js b/vue.config.js index 12fe966..0142447 100644 --- a/vue.config.js +++ b/vue.config.js @@ -41,9 +41,10 @@ }); // const serverUrl = "http://58.118.225.79:41243" // 缇婁簲 -// const serverUrl = "http://192.168.8.10:7009"; -const serverUrl = "http://192.168.20.189:7009"; -// const serverUrl = "http://192.168.20.10:9000"; +const serverUrl = "http://192.168.8.10:7009"; +const serverUrl2 = "http://192.168.8.10:9000"; +// const serverUrl = "http://192.168.20.10:7009"; +// const serverUrl2 = "http://192.168.20.10:9000"; // const cir = require("circular-dependency-plugin"); @@ -92,7 +93,7 @@ }, "/data/api-v/app/findAllApp": { // target: '/', - target: "http://localhost:8081/", + target: "http://localhost:8080/", changeOrigin: true, pathRewrite: { "^/data/api-v/app/findAllApp": "apps.json", @@ -129,7 +130,7 @@ changeOrigin: true, //寮�鍚唬鐞� }, "/temp": { - target: serverUrl, + target: serverUrl2, changeOrigin: true, //寮�鍚唬鐞�, pathRewrite: { "/temp": "", -- Gitblit v1.8.0