From f595ea40ebacb61dd84947fd2ba029657ac5a0a9 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Sun, 08 Oct 2023 16:14:54 +0800
Subject: [PATCH] fix:接口修改
---
src/views/deviceDetail/index.vue | 216 +++++++++++++++++++++++++++--------------------------
1 files changed, 110 insertions(+), 106 deletions(-)
diff --git a/src/views/deviceDetail/index.vue b/src/views/deviceDetail/index.vue
index 04fb9d6..1ffb0e9 100644
--- a/src/views/deviceDetail/index.vue
+++ b/src/views/deviceDetail/index.vue
@@ -37,17 +37,17 @@
v-for="(val, key, i) in defaultMonitorItems"
:key="i"
style="flex: 1; display: flex"
-
>
<span style="width: 33%; font-size: 0.9rem" @click="chuan(val)">{{
val.sensorCode | sensorFilter
}}</span>
- <span style="width: 33%; height: 0.9rem; font-size: 0.9rem"
- ><el-progress
- :text-inside="true"
- :percentage="val.alarm"
- :color="val.colour"
- style="width: 100%"
+ <span
+ style="width: 33%; height: 0.9rem; font-size: 0.9rem"
+ ><el-progress
+ :text-inside="true"
+ :percentage="val.alarm"
+ :color="val.colour"
+ style="width: 100%"
/></span>
<span style="width: 34%; text-align: right; font-size: 0.9rem">{{
val.value
@@ -75,7 +75,7 @@
"
>
<div style="position: relative">
- <img style="width: 5.5rem; height: 5.5rem" :src="compassBg" />
+ <img style="width: 5.5rem; height: 5.5rem" :src="compassBg">
<img
style="
font-size: 2rem;
@@ -92,7 +92,7 @@
:style="{
transform: 'translate(-50%, -50%) rotate(' + windDeg + 'deg)',
}"
- />
+ >
</div>
<div style="text-align: center; font-size: 1rem">
<div>{{ windDir }}</div>
@@ -123,19 +123,18 @@
<el-header
class="title0"
style="text-align: center; display: unset !important; margin-top: 10px"
- ><h1
- style="
+ ><h1
+ style="
text-align: center;
text-align: center;
margin: 0;
padding-top: 20px;
font-size: 1.2rem;
"
- @click="websocketData()"
- >
- {{ deviceName ? deviceName : '������' }}
- </h1></el-header
+ @click="websocketData()"
>
+ {{ deviceName ? deviceName : '������' }}
+ </h1></el-header>
<el-main
style="
padding-left: 0;
@@ -160,6 +159,7 @@
<div
v-for="(val, key, i) in coreMonitorItems"
:key="i"
+ ref="test"
style="
position: relative;
width: 33%;
@@ -167,7 +167,6 @@
font-size: 0.9rem;
"
class="circleWH"
- ref="test"
>
<!-- <div style="position: relative;width: 155px;height: 155px;margin: 0px auto;" :class="{'alarmBg5':val.bg === 5,'alarmBg4':val.bg === 4,'alarmBg3':val.bg === 3,'alarmBg2':val.bg === 2,'alarmBg1':val.bg === 1,'alarmBg0':val.bg === 0,}">-->
<div
@@ -238,7 +237,7 @@
padding-right: 10px;
font-size: 0.9rem;
"
- ></div>
+ />
</div>
</div>
</div>
@@ -266,24 +265,24 @@
>
<div style="height: 100%; display: flex; flex-direction: column">
<div style="height: 30%">
- <h3 style="text-align: center; font-size: 0.9rem" v-if="macLat">
+ <h3 v-if="macLat" style="text-align: center; font-size: 0.9rem">
<span>���������</span> {{ macLat }}, {{ macLng }}
</h3>
<h3 style="font-size: 0.9rem">������������������������</h3>
</div>
<div style="height: 70%">
<!-- padding-top: 4%-->
- <img :src="url1" alt="" style="width: 70%" />
+ <img :src="url1" alt="" style="width: 70%">
</div>
<div>
- <img style="width: 75%" :src="url2" alt="" />
+ <img style="width: 75%" :src="url2" alt="">
</div>
</div>
</div>
<div
+ v-if="monitorPointInfo"
class="right1"
style="height: 40%; display: flex; flex-direction: column"
- v-if="monitorPointInfo"
>
<h3 style="text-align: center; font-size: 0.9rem">������������</h3>
<ul
@@ -307,9 +306,9 @@
</ul>
</div>
<div
+ v-else
class="right1"
style="height: 40%; display: flex; flex-direction: column"
- v-else
>
<h3 style="text-align: center; font-size: 0.9rem">���������</h3>
<ul
@@ -339,6 +338,7 @@
// ���������import������������������from'������������������';
import json from '@/assets/json/sensor.json'
+import * as echarts from 'echarts'
// import { parse } from 'path-to-regexp'
// import LineChart from '@/components/Echarts/LineChart'
// import draggable from 'vuedraggable'
@@ -350,10 +350,10 @@
},
filters: {
// ���������������websocket���������������key���
- sensorFilter: function (value) {
+ sensorFilter: function(value) {
if (!value) return ''
return json[value]
- },
+ }
},
props: {},
data() {
@@ -364,7 +364,7 @@
url2: require('@/assets/images/alarmstate-1.png'),
bg: {
backgroundImage: 'url(' + require('@/assets/images/bg1.png') + ')',
- backgroundRepeat: 'round',
+ backgroundRepeat: 'round'
},
wsData1: null,
wsData2: null,
@@ -388,12 +388,12 @@
// ������������
alarmLevel: null,
alarmLevelDome: {
- a05024: '[0, 160, 200, 300, 400, 800]', //������
- a21004: '[0, 100, 200, 700, 1200, 2340]', //������������
- a21005: '[0, 5, 10, 35, 60, 90]', //������������
- a21026: '[0, 150, 500, 650, 800, 1600]', //������������
- a34002: '[0, 50, 150, 250, 350, 420]', //PM10
- a34004: '[0, 35, 75, 115, 150, 250]', //PM2.5
+ a05024: '[0, 160, 200, 300, 400, 800]', // ������
+ a21004: '[0, 100, 200, 700, 1200, 2340]', // ������������
+ a21005: '[0, 5, 10, 35, 60, 90]', // ������������
+ a21026: '[0, 150, 500, 650, 800, 1600]', // ������������
+ a34002: '[0, 50, 150, 250, 350, 420]', // PM10
+ a34004: '[0, 35, 75, 115, 150, 250]' // PM2.5
}, // ������������������
// ���������������
alarmProgress: {},
@@ -433,27 +433,28 @@
CO2: '',
SO2: '',
CO: '',
- O3: '',
- },
+ O3: ''
+ }
}
},
// ������������ ���������data������
computed: {
leftaSide() {
return this.$store.state.leftaSide
- },
+ }
},
// ������data������������������
watch: {
PM2_5Data(val) {
// console.log('���������' + val)
+ this.myChart = null
this.drawChart()
},
leftaSide(n, o) {
// this.myChart.resize()
this.myChart = null
// this.drawChart()
- },
+ }
},
// ������������ - ��������������������������������� this ���������
created() {
@@ -471,7 +472,8 @@
// this.macLng = this.$route.query.items
// this.monitorPointInfo = this.$route.params.monitorPointInfo
this.monitorPointInfo = JSON.parse(this.$route.query.monitorPointInfo)
- this.deviceName = this.$route.query.device.name
+ var obj = JSON.parse(this.$route.query.device)
+ this.deviceName = obj.name
this.regionCode = this.$store.state.regionCode
// this.regionCode = this.$store.state.regionCode
this.sensorLayout()
@@ -556,8 +558,8 @@
url: '/organizationLayout/getLayoutByMac',
method: 'get',
params: {
- mac: this.macName,
- },
+ mac: this.macName
+ }
})
.then((res) => {
console.log(res, '������������������')
@@ -585,8 +587,8 @@
.get('http://121.43.179.139:8080/screen_api_v2/screen/alarm-levels', {
params: {
mac: this.macName,
- primaryKey: this.macName,
- },
+ primaryKey: this.macName
+ }
})
.then((res) => {
this.alarmLevels = res.data
@@ -600,7 +602,7 @@
// ������������������������
getTime() {
var _this = this // ������������������������Vue������this������������������������
- this.timer = setInterval(function () {
+ this.timer = setInterval(function() {
_this.currentTime = // ������������date
_this.appendZero(new Date().getFullYear()) +
'-' +
@@ -649,8 +651,8 @@
url: '/deviceInfo/getHourlyAqi',
method: 'get',
params: {
- mac: this.macName,
- },
+ mac: this.macName
+ }
})
.then((res) => {
// console.log('���������getHourlyAqi���������������')
@@ -669,8 +671,8 @@
method: 'get',
params: {
sensorCode: this.chartSensorKey[0].sensorCode,
- mac: this.macName,
- },
+ mac: this.macName
+ }
})
.then((res) => {
// console.log(res,'123');
@@ -702,6 +704,7 @@
if (this.ws) {
this.ws.close()
}
+
var that = this
// ������������
// var param = this.accountId + '&' + this.orgId + '&' + this.macName
@@ -709,28 +712,29 @@
// ������URL
var socketUrl
if (this.equipment === 'car') {
- socketUrl = 'http://47.99.64.149:8081/cruiserWebsocket/' + this.macName
- // socketUrl = 'http://192.168.0.33:8081/cruiserWebsocket/' + this.macName
+ socketUrl = 'http://47.99.64.149:8081/api/cruiserWebsocket/' + this.macName
+ // socketUrl = 'http://192.168.0.11:8081/cruiserWebsocket/' + this.macName
} else {
- socketUrl = 'http://47.99.64.149:8081/singleDevice/' + this.macName
- // socketUrl = 'http://192.168.0.4:8081/singleDevice/' + this.macName
+ socketUrl = 'http://47.99.64.149:8081/api/singleDevice/' + this.macName
+ // socketUrl = 'http://192.168.0.11:8081/singleDevice/' + this.macName
}
// ������http���WS
+ console.log('socketUrl', socketUrl, this.macNamel)
socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')
this.ws = new WebSocket(socketUrl)
- this.ws.onopen = function () {
+ this.ws.onopen = function() {
console.log('websocket������������')
}
console.log(2)
// this.ws.send('{"mac":' + '"' + this.macName + '"' + ',"accountIdInfo":' + this.$store.state.accountId + '}')
// ������������������
- this.ws.onmessage = function (msg) {
+ this.ws.onmessage = function(msg) {
// console.log(1);
// if (JSON.parse(msg.data).������) {
that.wsData2 = JSON.parse(msg.data)
- // console.log(msg.data, 'data2')
+ console.log(that.wsData2, 'that.wsData2')
// that.wsData2.on('click',function (params) {
// console.log(params);
// })
@@ -939,18 +943,18 @@
// ������PM2.5���������������
if (e1Data > 250) {
that.e1Bg = require('@/assets/images/level0_circle5.gif')
- that.coreMonitorItems[0].bg=5
+ that.coreMonitorItems[0].bg = 5
} else if (e1Data > 150) {
- that.coreMonitorItems[0].bg=4
+ that.coreMonitorItems[0].bg = 4
that.e1Bg = require('@/assets/images/level0_circle4.gif')
} else if (e1Data > 115) {
- that.coreMonitorItems[0].bg=3
+ that.coreMonitorItems[0].bg = 3
that.e1Bg = require('@/assets/images/level0_circle3.gif')
} else if (e1Data > 75) {
- that.coreMonitorItems[0].bg=2
+ that.coreMonitorItems[0].bg = 2
that.e1Bg = require('@/assets/images/level0_circle2.gif')
} else if (e1Data > 35) {
- that.coreMonitorItems[0].bg=1
+ that.coreMonitorItems[0].bg = 1
that.e1Bg = require('@/assets/images/level0_circle1.gif')
} else {
// console.log(that.coreMonitorItems[0].bg,'bg');
@@ -959,95 +963,95 @@
}
// ������PM10���������������
if (e2Data > 420) {
- that.coreMonitorItems[1].bg=5
+ that.coreMonitorItems[1].bg = 5
that.e2Bg = require('@/assets/images/level0_circle5.gif')
} else if (e2Data > 350) {
- that.coreMonitorItems[1].bg=4
+ that.coreMonitorItems[1].bg = 4
that.e2Bg = require('@/assets/images/level0_circle4.gif')
} else if (e2Data > 250) {
- that.coreMonitorItems[1].bg=3
+ that.coreMonitorItems[1].bg = 3
that.e2Bg = require('@/assets/images/level0_circle3.gif')
} else if (e2Data > 150) {
- that.coreMonitorItems[1].bg=2
+ that.coreMonitorItems[1].bg = 2
that.e2Bg = require('@/assets/images/level0_circle2.gif')
} else if (e2Data > 50) {
- that.coreMonitorItems[1].bg=1
+ that.coreMonitorItems[1].bg = 1
that.e2Bg = require('@/assets/images/level0_circle1.gif')
} else {
that.e2Bg = require('@/assets/images/level0_circle0.gif')
}
// ������CO���������������
if (e10Data > 90) {
- that.coreMonitorItems[4].bg=5
+ that.coreMonitorItems[4].bg = 5
that.e10Bg = require('@/assets/images/level0_circle5.gif')
} else if (e10Data > 60) {
- that.coreMonitorItems[4].bg=4
+ that.coreMonitorItems[4].bg = 4
that.e10Bg = require('@/assets/images/level0_circle4.gif')
} else if (e10Data > 35) {
- that.coreMonitorItems[4].bg=3
+ that.coreMonitorItems[4].bg = 3
that.e10Bg = require('@/assets/images/level0_circle3.gif')
} else if (e10Data > 10) {
- that.coreMonitorItems[4].bg=2
+ that.coreMonitorItems[4].bg = 2
that.e10Bg = require('@/assets/images/level0_circle2.gif')
} else if (e10Data > 5) {
- that.coreMonitorItems[4].bg=1
+ that.coreMonitorItems[4].bg = 1
that.e10Bg = require('@/assets/images/level0_circle1.gif')
} else {
that.e10Bg = require('@/assets/images/level0_circle0.gif')
}
// ������SO2���������������
if (e11Data > 1600) {
- that.coreMonitorItems[3].bg=5
+ that.coreMonitorItems[3].bg = 5
that.e11Bg = require('@/assets/images/level0_circle5.gif')
} else if (e11Data > 800) {
- that.coreMonitorItems[3].bg=4
+ that.coreMonitorItems[3].bg = 4
that.e11Bg = require('@/assets/images/level0_circle4.gif')
} else if (e11Data > 650) {
- that.coreMonitorItems[3].bg=3
+ that.coreMonitorItems[3].bg = 3
that.e11Bg = require('@/assets/images/level0_circle3.gif')
} else if (e11Data > 500) {
- that.coreMonitorItems[3].bg=2
+ that.coreMonitorItems[3].bg = 2
that.e11Bg = require('@/assets/images/level0_circle2.gif')
} else if (e11Data > 150) {
- that.coreMonitorItems[3].bg=1
+ that.coreMonitorItems[3].bg = 1
that.e11Bg = require('@/assets/images/level0_circle1.gif')
} else {
that.e11Bg = require('@/assets/images/level0_circle0.gif')
}
// ������O3���������������
if (e15Data > 800) {
- that.coreMonitorItems[5].bg=5
+ that.coreMonitorItems[5].bg = 5
that.e15Bg = require('@/assets/images/level0_circle5.gif')
} else if (e15Data > 400) {
- that.coreMonitorItems[5].bg=4
+ that.coreMonitorItems[5].bg = 4
that.e15Bg = require('@/assets/images/level0_circle4.gif')
} else if (e15Data > 300) {
- that.coreMonitorItems[5].bg=3
+ that.coreMonitorItems[5].bg = 3
that.e15Bg = require('@/assets/images/level0_circle3.gif')
} else if (e15Data > 200) {
- that.coreMonitorItems[5].bg=2
+ that.coreMonitorItems[5].bg = 2
that.e15Bg = require('@/assets/images/level0_circle2.gif')
} else if (e15Data > 160) {
- that.coreMonitorItems[5].bg=1
+ that.coreMonitorItems[5].bg = 1
that.e15Bg = require('@/assets/images/level0_circle1.gif')
} else {
that.e15Bg = require('@/assets/images/level0_circle0.gif')
}
// ������NO2���������������
if (e16Data > 2340) {
- that.coreMonitorItems[2].bg=5
+ that.coreMonitorItems[2].bg = 5
that.e16Bg = require('@/assets/images/level0_circle5.gif')
} else if (e16Data > 1200) {
- that.coreMonitorItems[2].bg=4
+ that.coreMonitorItems[2].bg = 4
that.e16Bg = require('@/assets/images/level0_circle4.gif')
} else if (e16Data > 700) {
- that.coreMonitorItems[2].bg=3
+ that.coreMonitorItems[2].bg = 3
that.e16Bg = require('@/assets/images/level0_circle3.gif')
} else if (e16Data > 200) {
- that.coreMonitorItems[2].bg=2
+ that.coreMonitorItems[2].bg = 2
that.e16Bg = require('@/assets/images/level0_circle2.gif')
} else if (e16Data > 100) {
- that.coreMonitorItems[2].bg=1
+ that.coreMonitorItems[2].bg = 1
that.e16Bg = require('@/assets/images/level0_circle1.gif')
} else {
that.e16Bg = require('@/assets/images/level0_circle0.gif')
@@ -1200,8 +1204,8 @@
url: '/deviceInfo/queryAlarmByMac',
method: 'get',
params: {
- mac: this.macName,
- },
+ mac: this.macName
+ }
})
.then((res) => {
console.log(res, 'res')
@@ -1231,7 +1235,7 @@
const that = this
var bar_dv = this.$refs.main
if (bar_dv) {
- that.myChart = this.$echarts.init(bar_dv)
+ that.myChart = echarts.init(bar_dv)
var option = {
title: {
left: 'center',
@@ -1239,12 +1243,12 @@
Color: 'white',
textStyle: {
// ���������������������{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
- color: '#fff',
- },
+ color: '#fff'
+ }
},
grid: {
top: 50,
- bottom: 25,
+ bottom: 25
},
tooltip: {
// formatter:function(res){
@@ -1259,9 +1263,9 @@
type: 'cross',
label: {
backgroundColor: '#6a7985',
- color: '#fff',
- },
- },
+ color: '#fff'
+ }
+ }
},
xAxis: {
type: 'category',
@@ -1269,17 +1273,17 @@
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
axisLine: {
lineStyle: {
- color: '#fff',
- },
- },
+ color: '#fff'
+ }
+ }
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
- color: '#fff',
- },
- },
+ color: '#fff'
+ }
+ }
},
series: [
{
@@ -1289,29 +1293,29 @@
normal: {
show: true,
position: 'top',
- color: '#fff',
- },
- },
- },
- ],
+ color: '#fff'
+ }
+ }
+ }
+ ]
}
that.myChart.setOption(option)
- setTimeout(function () {
- window.onresize = function () {
+ setTimeout(function() {
+ window.onresize = function() {
that.myChart.resize()
}
}, 200)
} else {
console.log('������������')
}
- },
+ }
// circles() {
// for (let index = this.circle; index < 100; index++) {
// index++
// this.circle++
// }
// }
- }, // ���������������keep-alive������������������������������������
+ } // ���������������keep-alive������������������������������������
}
</script>
<style scoped>
--
Gitblit v1.8.0