From 1ed56de483f781924515fda5613e5c4072b3fcf7 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Thu, 28 Sep 2023 09:58:13 +0800
Subject: [PATCH] fix:设备详情折线图修改
---
src/views/deviceDetail/index.vue | 176 +++++++++++++++++++++++++++++++++-------------------------
1 files changed, 101 insertions(+), 75 deletions(-)
diff --git a/src/views/deviceDetail/index.vue b/src/views/deviceDetail/index.vue
index df36cb3..b6e837e 100644
--- a/src/views/deviceDetail/index.vue
+++ b/src/views/deviceDetail/index.vue
@@ -41,12 +41,13 @@
<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
@@ -74,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;
@@ -91,7 +92,7 @@
:style="{
transform: 'translate(-50%, -50%) rotate(' + windDeg + 'deg)',
}"
- />
+ >
</div>
<div style="text-align: center; font-size: 1rem">
<div>{{ windDir }}</div>
@@ -122,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;
@@ -159,6 +159,7 @@
<div
v-for="(val, key, i) in coreMonitorItems"
:key="i"
+ ref="test"
style="
position: relative;
width: 33%;
@@ -166,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
@@ -237,7 +237,7 @@
padding-right: 10px;
font-size: 0.9rem;
"
- ></div>
+ />
</div>
</div>
</div>
@@ -265,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
@@ -306,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
@@ -338,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'
@@ -349,10 +350,10 @@
},
filters: {
// ���������������websocket���������������key���
- sensorFilter: function (value) {
+ sensorFilter: function(value) {
if (!value) return ''
return json[value]
- },
+ }
},
props: {},
data() {
@@ -363,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,
@@ -387,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: {},
@@ -432,15 +433,15 @@
CO2: '',
SO2: '',
CO: '',
- O3: '',
- },
+ O3: ''
+ }
}
},
// ������������ ���������data������
computed: {
leftaSide() {
return this.$store.state.leftaSide
- },
+ }
},
// ������data������������������
watch: {
@@ -452,7 +453,7 @@
// this.myChart.resize()
this.myChart = null
// this.drawChart()
- },
+ }
},
// ������������ - ��������������������������������� this ���������
created() {
@@ -556,8 +557,8 @@
url: '/organizationLayout/getLayoutByMac',
method: 'get',
params: {
- mac: this.macName,
- },
+ mac: this.macName
+ }
})
.then((res) => {
console.log(res, '������������������')
@@ -585,8 +586,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 +601,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 +650,8 @@
url: '/deviceInfo/getHourlyAqi',
method: 'get',
params: {
- mac: this.macName,
- },
+ mac: this.macName
+ }
})
.then((res) => {
// console.log('���������getHourlyAqi���������������')
@@ -669,8 +670,8 @@
method: 'get',
params: {
sensorCode: this.chartSensorKey[0].sensorCode,
- mac: this.macName,
- },
+ mac: this.macName
+ }
})
.then((res) => {
// console.log(res,'123');
@@ -720,13 +721,13 @@
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)
@@ -1200,8 +1201,8 @@
url: '/deviceInfo/queryAlarmByMac',
method: 'get',
params: {
- mac: this.macName,
- },
+ mac: this.macName
+ }
})
.then((res) => {
console.log(res, 'res')
@@ -1231,7 +1232,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,29 +1240,35 @@
Color: 'white',
textStyle: {
// ���������������������{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
- color: '#fff',
- },
+ color: '#fff'
+ }
},
grid: {
top: 50,
- bottom: 25,
+ bottom: 25
},
tooltip: {
- // formatter:function(res){
- // console.log(res,'res');
- // var result=''
- // var html1='<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff;"></span>'
- // result+=res[0].axisValue+"<br/>"+html1+res[0].value
- // return result
- // },
+ formatter: function(res) {
+ console.log(res, 'res')
+ var result = ''
+ var html1 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:red;"></span>'
+ result += res[0].axisValue + '<br/>' + html1 + res[0].value
+ return result
+ },
trigger: 'axis',
+ backgroundColor: '#444', // ������������rgba������������������������������
+ color: 'red',
+ textStyle: { // ���������������������
+ color: '#fff',
+ fontSize: 12
+ },
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985',
- color: '#fff',
- },
- },
+ color: '#fff'
+ }
+ }
},
xAxis: {
type: 'category',
@@ -1269,49 +1276,68 @@
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: [
{
+ // prettier-ignore
+ itemStyle: {
+ normal: {
+ color: '#fff', // ������������
+ borderColor: 'red', // ������������������
+ borderWidth: 3// ������������������
+ },
+ emphasis: { // ������������������(������������������������)
+ borderColor: '#c00', // ������������������
+ borderWidth: 2, // ������������������
+ shadowColor: '#c00', // ������������
+ shadowBlur: 3, // ������������������������
+ color: 'red'// hover������������������
+ }
+ },
+ symbolSize: 6,
data: this.PM2_5Data,
type: 'line',
label: {
normal: {
show: true,
position: 'top',
- color: '#fff',
- },
+ color: '#fff'
+ }
},
- },
- ],
+ lineStyle: {
+ color: '#e9071c' // ���������������������������
+ }
+ }
+ ]
}
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