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