From 94fbbcaa11b2222b962eaa23a9ec0df842fbc6b7 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Thu, 11 Apr 2024 17:07:36 +0800
Subject: [PATCH] fix: 页码修改
---
src/views/deviceDetail/index.vue | 373 ++++++++++++++++++++++++++++++----------------------
1 files changed, 214 insertions(+), 159 deletions(-)
diff --git a/src/views/deviceDetail/index.vue b/src/views/deviceDetail/index.vue
index 04fb9d6..7859683 100644
--- a/src/views/deviceDetail/index.vue
+++ b/src/views/deviceDetail/index.vue
@@ -37,17 +37,20 @@
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)">{{
+ <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 +78,10 @@
"
>
<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 +98,7 @@
:style="{
transform: 'translate(-50%, -50%) rotate(' + windDeg + 'deg)',
}"
- />
+ >
</div>
<div style="text-align: center; font-size: 1rem">
<div>{{ windDir }}</div>
@@ -111,7 +117,9 @@
justify-content: center;
"
>
- <div style="font-size: 0.9rem">������������������(������������)</div>
+ <div style="font-size: 0.9rem">
+ ������������������(������������)
+ </div>
<div style="font-size: 1.5rem; margin-top: 7px">
{{ aqi }}<span style="font-size: 0.8rem">(AQI)</span>
</div>
@@ -119,11 +127,15 @@
</div>
</el-main>
</el-aside>
- <el-container class="border-left border-right" style="margin: 0 10px">
+ <el-container
+ class="border-left border-right"
+ style="margin: 0 10px"
+ >
<el-header
class="title0"
style="text-align: center; display: unset !important; margin-top: 10px"
- ><h1
+ >
+ <h1
style="
text-align: center;
text-align: center;
@@ -134,8 +146,8 @@
@click="websocketData()"
>
{{ deviceName ? deviceName : '������' }}
- </h1></el-header
- >
+ </h1>
+ </el-header>
<el-main
style="
padding-left: 0;
@@ -160,6 +172,7 @@
<div
v-for="(val, key, i) in coreMonitorItems"
:key="i"
+ ref="test"
style="
position: relative;
width: 33%;
@@ -167,7 +180,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
@@ -212,8 +224,15 @@
</div>
</div>
</div>
- <div class="border-top" style="display: flex; height: 50%">
- <div ref="main" class="middle1" style="flex: 1; padding-top: 2rem" />
+ <div
+ class="border-top"
+ style="display: flex; height: 50%"
+ >
+ <div
+ ref="main"
+ class="middle1"
+ style="flex: 1; padding-top: 2rem"
+ />
<!-- <line-chart :chart-data="lineChartData" /> -->
<div
class="border-left middle2"
@@ -224,9 +243,13 @@
margin-left: 10px;
"
>
- <h3 style="font-size: 0.9rem">���������������</h3>
+ <h3 style="font-size: 0.9rem">
+ ���������������
+ </h3>
<div>
- <div style="font-size: 0.9rem">{{ chartSensorName }}</div>
+ <div style="font-size: 0.9rem">
+ {{ chartSensorName }}
+ </div>
<div
style="padding: 8px 0 0; font-size: 2.3rem; font-weight: bold"
>
@@ -238,7 +261,7 @@
padding-right: 10px;
font-size: 0.9rem;
"
- ></div>
+ />
</div>
</div>
</div>
@@ -266,26 +289,41 @@
>
<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>
+ <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>
+ <h3 style="text-align: center; font-size: 0.9rem">
+ ������������
+ </h3>
<ul
class="listUl"
style="
@@ -307,11 +345,13 @@
</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>
+ <h3 style="text-align: center; font-size: 0.9rem">
+ ���������
+ </h3>
<ul
class="listUl"
style="
@@ -337,8 +377,9 @@
<script>
// ���������������������������������������������������������js������������������js���json������������������������������
// ���������import������������������from'������������������';
-
+import { WWindUtil } from '@/components/Wind/WRatingArr.js'
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'
@@ -353,10 +394,10 @@
sensorFilter: function (value) {
if (!value) return ''
return json[value]
- },
+ }
},
props: {},
- data() {
+ data () {
// ������������������
return {
circle: 0,
@@ -364,7 +405,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 +429,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,30 +474,31 @@
CO2: '',
SO2: '',
CO: '',
- O3: '',
- },
+ O3: ''
+ }
}
},
// ������������ ���������data������
computed: {
- leftaSide() {
+ leftaSide () {
return this.$store.state.leftaSide
- },
+ }
},
// ������data������������������
watch: {
- PM2_5Data(val) {
+ PM2_5Data (val) {
// console.log('���������' + val)
+ this.myChart = null
this.drawChart()
},
- leftaSide(n, o) {
+ leftaSide (n, o) {
// this.myChart.resize()
this.myChart = null
// this.drawChart()
- },
+ }
},
// ������������ - ��������������������������������� this ���������
- created() {
+ created () {
this.$store.dispatch('app/toggleSideBar', 0)
// this.$Cookies.set('sidebarStatus', 1)
// setTimeout(() => {
@@ -471,7 +513,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()
@@ -487,7 +530,7 @@
// this.ws.send('{"mac":' + '"' + this.macName + '"' + ',"accountIdInfo":' + this.$store.state.accountId + '}')
},
// ������������ - ��������������������������� DOM ���������
- mounted() {
+ mounted () {
// this.$nextTick(() => {
// console.log('zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz')
// this.drawChart()
@@ -501,11 +544,11 @@
// ���������������������������
// this.getCircleWH()
},
- beforeCreate() {}, // ������������ - ������������
- beforeMount() {}, // ������������ - ������������
- beforeUpdate() {}, // ������������ - ������������
- updated() {}, // ������������ - ������������
- beforeDestroy() {
+ beforeCreate () {}, // ������������ - ������������
+ beforeMount () {}, // ������������ - ������������
+ beforeUpdate () {}, // ������������ - ������������
+ updated () {}, // ������������ - ������������
+ beforeDestroy () {
if (this.ws) {
this.ws.close()
}
@@ -513,11 +556,11 @@
clearInterval(this.timer) // ���Vue������������������������������������������
}
}, // ������������ - ������������
- destroyed() {}, // ������������ - ������������
- activated() {},
+ destroyed () {}, // ������������ - ������������
+ activated () {},
// ������������
methods: {
- chuan(val) {
+ chuan (val) {
console.log(val)
this.chartSensorKey[0] = {}
this.chartSensorKey[0] = val
@@ -527,7 +570,7 @@
// console.log(this.chartSensorKey[0].sensorCode);
// console.log(this.chartSensorKey)
},
- chuan2(val) {
+ chuan2 (val) {
console.log(val)
this.chartSensorKey[0] = {}
this.chartSensorKey[0] = val
@@ -536,7 +579,7 @@
this.filterSensorName()
},
// ���������������������
- getCircleWH() {
+ getCircleWH () {
// var circleWHList = document.getElementsByClassName('circleWH')
// var dom = this.$refs.test
// var circleWHWidth = circleWHList[0].offsetWidth
@@ -544,20 +587,20 @@
// console.log(circleWHWidth, circleWHeight, '������')
},
// ������������������������
- filterSensorName() {
+ filterSensorName () {
this.chartSensorName = this.$options.filters.sensorFilter(
this.chartSensorKey[0].sensorCode
)
},
// ������������������
- sensorLayout() {
+ sensorLayout () {
return new Promise((resolve, reject) => {
this.$request({
url: '/organizationLayout/getLayoutByMac',
method: 'get',
params: {
- mac: this.macName,
- },
+ mac: this.macName
+ }
})
.then((res) => {
console.log(res, '������������������')
@@ -580,13 +623,13 @@
})
},
// ������������������������
- getAlarmLevels() {
+ getAlarmLevels () {
this.$axios
.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
@@ -598,7 +641,7 @@
})
},
// ������������������������
- getTime() {
+ getTime () {
var _this = this // ������������������������Vue������this������������������������
this.timer = setInterval(function () {
_this.currentTime = // ������������date
@@ -615,11 +658,11 @@
_this.appendZero(new Date().getSeconds())
}, 1000)
},
- appendZero(obj) {
+ appendZero (obj) {
return obj < 10 ? '0' + obj : obj
},
// ������������������������������
- reMac(newMac, i, name) {
+ reMac (newMac, i, name) {
this.PM2_5Data = []
this.wsData2 = null
this.url1 = require('@/assets/images/alarmlevel-1.png')
@@ -637,20 +680,20 @@
}
},
// ������������
- getkeyName() {
+ getkeyName () {
for (var kn in this.wsData2) {
this.keyName.push(kn)
alert(this.keyName)
}
},
// ������������������������������
- getHourlyAqi() {
+ getHourlyAqi () {
this.$request({
url: '/deviceInfo/getHourlyAqi',
method: 'get',
params: {
- mac: this.macName,
- },
+ mac: this.macName
+ }
})
.then((res) => {
// console.log('���������getHourlyAqi���������������')
@@ -663,14 +706,14 @@
})
},
// ���������������������������������������
- getSensorMonthAvg() {
+ getSensorMonthAvg () {
this.$request({
url: '/deviceInfo/getMonthAvg',
method: 'get',
params: {
sensorCode: this.chartSensorKey[0].sensorCode,
- mac: this.macName,
- },
+ mac: this.macName
+ }
})
.then((res) => {
// console.log(res,'123');
@@ -683,7 +726,7 @@
})
},
// ���������������������
- alarmSort() {
+ alarmSort () {
this.sensorLayout().then(() => {
var newAlarmLevel = {}
for (let i = 0; i < this.totalArray.length; i++) {
@@ -698,10 +741,11 @@
})
},
// ws������
- websocketData() {
+ websocketData () {
if (this.ws) {
this.ws.close()
}
+
var that = this
// ������������
// var param = this.accountId + '&' + this.orgId + '&' + this.macName
@@ -709,15 +753,16 @@
// ������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 = 'https://qx.7drlb.com/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 = 'https://qx.7drlb.com/api/singleDevice/' + this.macName
+ // socketUrl = 'http://192.168.0.11:8081/singleDevice/' + this.macName
}
// ������http���WS
- socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')
+ socketUrl = socketUrl.replace('https', 'wss').replace('http', 'ws')
+ console.log('socketUrl', socketUrl)
this.ws = new WebSocket(socketUrl)
this.ws.onopen = function () {
@@ -730,7 +775,7 @@
// 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);
// })
@@ -748,20 +793,8 @@
that.windDeg = windDirs
if (windDirs === 0) {
that.windDir = '������'
- } else if (windDirs > 0 && windDirs < 90) {
- that.windDir = '���������'
- } else if (windDirs === 90) {
- that.windDir = '������'
- } else if (windDirs > 90 && windDirs < 180) {
- that.windDir = '���������'
- } else if (windDirs === 180) {
- that.windDir = '������'
- } else if (windDirs > 180 && windDirs < 270) {
- that.windDir = '���������'
- } else if (windDirs === 270) {
- that.windDir = '������'
- } else if (windDirs > 270 && windDirs < 360) {
- that.windDir = '���������'
+ } else {
+ that.windDir = WWindUtil.windValueFormat(windDirs)
}
}
that.alarmColour = {}
@@ -939,18 +972,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 +992,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')
@@ -1195,13 +1228,13 @@
}
},
// ���������������������
- queryAlarmByMac() {
+ queryAlarmByMac () {
this.$request({
url: '/deviceInfo/queryAlarmByMac',
method: 'get',
params: {
- mac: this.macName,
- },
+ mac: this.macName
+ }
})
.then((res) => {
console.log(res, 'res')
@@ -1227,11 +1260,11 @@
})
},
// ���������
- drawChart() {
+ drawChart () {
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 +1272,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,31 +1308,47 @@
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'
+ }
+ }
+ }
+ ]
}
that.myChart.setOption(option)
setTimeout(function () {
@@ -1304,14 +1359,14 @@
} 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