640 lines
16 KiB
Vue
640 lines
16 KiB
Vue
<template>
|
||
<div class="app-container print-work">
|
||
<div class="level-title">
|
||
<h1>{{ info.EQUIPMENTNAME }}：实时监测数据 {{ info.OPERATTIME }}</h1>
|
||
</div>
|
||
<div style="display: flex">
|
||
<div id="main4"/>
|
||
<div id="main5"/>
|
||
<div id="main6"/>
|
||
</div>
|
||
<table class="table-ui">
|
||
<tr>
|
||
<td class="bbg-transparent">风速监测</td>
|
||
<td>{{ info.WINDSPEED }}</td>
|
||
<td class="bbg-transparent">风向监测</td>
|
||
<td>{{ info.WINDDIRECTION }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="bbg-transparent">温度监测</td>
|
||
<td>{{ info.TEMPERATURE }}</td>
|
||
<td class="bbg-transparent">湿度监测</td>
|
||
<td>{{ info.COUNTARCHIVE }}</td>
|
||
</tr>
|
||
</table>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { requestFN } from '@/utils/request'
|
||
import * as echarts from 'echarts'
|
||
|
||
let myChart4 = null
|
||
let myChart5 = null
|
||
const myChart6 = null
|
||
export default {
|
||
props: {
|
||
id: {
|
||
type: String,
|
||
default() {
|
||
return ''
|
||
}
|
||
},
|
||
type: {
|
||
type: String,
|
||
default() {
|
||
return ''
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
config: config,
|
||
info: {}
|
||
}
|
||
},
|
||
mounted() {
|
||
window.onresize = function() {
|
||
myChart4 && myChart4.resize()
|
||
myChart5 && myChart5.resize()
|
||
myChart6 && myChart6.resize()
|
||
}
|
||
this.getData()
|
||
},
|
||
beforeDestroy() {
|
||
myChart4 = null
|
||
myChart5 = null
|
||
myChart5 = null
|
||
},
|
||
methods: {
|
||
getData() {
|
||
requestFN(
|
||
'/map/getById',
|
||
{
|
||
id: this.id,
|
||
TYPE: this.type
|
||
}
|
||
).then((data) => {
|
||
this.listLoading = false
|
||
|
||
this.initEcharts1(data)
|
||
this.initEcharts2(data)
|
||
this.initEcharts3(data)
|
||
this.info = data.pd
|
||
this.info.WINDDIRECTION = this.calculateWindDirection(this.info.WINDDIRECTION)
|
||
}).catch((e) => {
|
||
})
|
||
},
|
||
initEcharts1(data) {
|
||
myChart4 = echarts.init(document.querySelector('#main4'))
|
||
var option = {
|
||
title: {
|
||
// x: "center",
|
||
top: 0,
|
||
text: '风向监测',
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
fontSize: 16,
|
||
color: '#fff'
|
||
}
|
||
},
|
||
series: {
|
||
name: '',
|
||
type: 'gauge',
|
||
min: 0,
|
||
max: 360,
|
||
startAngle: 90,
|
||
endAngle: -269.9999,
|
||
radius: '60%',
|
||
splitNumber: 8,
|
||
axisLine: {
|
||
lineStyle: {
|
||
width: 15,
|
||
shadowBlur: 0,
|
||
color: [
|
||
[0.25, '#DDBD4D'],
|
||
[0.5, '#E43F3D'],
|
||
[0.75, '#7CBB55'],
|
||
[1, '#9CD6CE']
|
||
]
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: true,
|
||
splitNumber: 5,
|
||
lineStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
splitLine: {
|
||
length: 10,
|
||
lineStyle: {
|
||
width: 5,
|
||
color: '#fff'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
formatter: function(e) {
|
||
switch (e + '') {
|
||
case '0':
|
||
return '北'
|
||
case '45':
|
||
return '东北'
|
||
case '135':
|
||
return '东南'
|
||
case '225':
|
||
return '西南'
|
||
case '315':
|
||
return '西北'
|
||
case '360':
|
||
return '北'
|
||
case '180':
|
||
return '南'
|
||
case '90':
|
||
return '东'
|
||
case '270':
|
||
return '西'
|
||
default:
|
||
return e
|
||
}
|
||
},
|
||
distance: -60,
|
||
textStyle: {
|
||
fontSize: 14,
|
||
fontWeight: '',
|
||
color: '#fff'
|
||
}
|
||
},
|
||
pointer: {
|
||
show: true,
|
||
length: '80%',
|
||
width: 5
|
||
},
|
||
detail: {
|
||
formatter: function(param) {
|
||
var level = ''
|
||
if (param > 0 && param < 90) {
|
||
level = '东北'
|
||
} else if (param > 90 && param < 180) {
|
||
level = '东南'
|
||
} else if (param > 180 && param < 270) {
|
||
level = '西南'
|
||
} else if (param > 270 && param < 360) {
|
||
level = '西北'
|
||
} else if (param == 360) {
|
||
level = '正北'
|
||
} else if (param == 270) {
|
||
level = '正西'
|
||
} else if (param == 90) {
|
||
level = '正东'
|
||
} else if (param == 180) {
|
||
level = '正南'
|
||
}
|
||
return '当前风向:' + level + '(' + param + '°)'
|
||
},
|
||
offsetCenter: [0, 190],
|
||
textStyle: {
|
||
fontSize: 14,
|
||
color: '#fff'
|
||
}
|
||
},
|
||
data: [data.pd.WINDDIRECTION]
|
||
}
|
||
}
|
||
myChart4.setOption(option)
|
||
},
|
||
initEcharts2(data) {
|
||
myChart5 = echarts.init(document.querySelector('#main5'))
|
||
var value = data.pd.TEMPERATURE
|
||
var kd = []
|
||
// 刻度使用柱状图模拟，短设置3，长的设置5；构造一个数据
|
||
for (var i = 0, len = 130; i <= len; i++) {
|
||
if (i > 100 || i < 30) {
|
||
kd.push('0')
|
||
} else {
|
||
if (i % 5 === 0) {
|
||
kd.push('5')
|
||
} else {
|
||
kd.push('3')
|
||
}
|
||
}
|
||
}
|
||
// console.log(kd)
|
||
// 因为柱状初始化为0，温度存在负值，所以，原本的0-100，改为0-130，0-30用于表示负值
|
||
function getData(value) {
|
||
return [Number(value) + 30]
|
||
}
|
||
console.log(getData(value))
|
||
var data = getData(value + 30)
|
||
var mercuryColor = '#fd4d49'
|
||
var borderColor = '#fd4d49'
|
||
|
||
const option = {
|
||
title: {
|
||
text: '温度监测',
|
||
show: true,
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
fontSize: 16,
|
||
color: '#fff'
|
||
}
|
||
},
|
||
yAxis: [{
|
||
show: false,
|
||
min: 0,
|
||
max: 130
|
||
}, {
|
||
show: false,
|
||
data: [],
|
||
min: 0,
|
||
max: 130
|
||
}],
|
||
xAxis: [{
|
||
show: false,
|
||
data: []
|
||
}, {
|
||
show: false,
|
||
data: []
|
||
}, {
|
||
show: false,
|
||
data: []
|
||
}, {
|
||
show: false,
|
||
min: -110,
|
||
max: 100
|
||
|
||
}],
|
||
series: [{
|
||
name: '条',
|
||
type: 'bar',
|
||
// 对应上面XAxis的第一个对象配置
|
||
xAxisIndex: 0,
|
||
data: data,
|
||
barWidth: 18,
|
||
itemStyle: {
|
||
normal: {
|
||
color: mercuryColor,
|
||
barBorderRadius: 0
|
||
}
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: 'top',
|
||
formatter: function(param) {
|
||
// 因为柱状初始化为0，温度存在负值，所以，原本的0-100，改为0-130，0-30用于表示负值
|
||
return (((param.value * 100) - (30 * 100)) / 100) + '°C'
|
||
},
|
||
textStyle: {
|
||
color: '#ccc',
|
||
fontSize: '10'
|
||
}
|
||
}
|
||
},
|
||
z: 2
|
||
}, {
|
||
name: '白框',
|
||
type: 'bar',
|
||
xAxisIndex: 1,
|
||
barGap: '-100%',
|
||
data: [129],
|
||
barWidth: 28,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#ffffff',
|
||
barBorderRadius: 50
|
||
}
|
||
},
|
||
z: 1
|
||
}, {
|
||
name: '外框',
|
||
type: 'bar',
|
||
xAxisIndex: 2,
|
||
barGap: '-100%',
|
||
data: [130],
|
||
barWidth: 38,
|
||
itemStyle: {
|
||
normal: {
|
||
color: borderColor,
|
||
barBorderRadius: 50
|
||
}
|
||
},
|
||
z: 0
|
||
}, {
|
||
name: '圆',
|
||
type: 'scatter',
|
||
hoverAnimation: false,
|
||
data: [0],
|
||
xAxisIndex: 0,
|
||
symbolSize: 48,
|
||
itemStyle: {
|
||
normal: {
|
||
color: mercuryColor,
|
||
opacity: 1
|
||
}
|
||
},
|
||
z: 2
|
||
}, {
|
||
name: '白圆',
|
||
type: 'scatter',
|
||
hoverAnimation: false,
|
||
data: [0],
|
||
xAxisIndex: 1,
|
||
symbolSize: 60,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#ffffff',
|
||
opacity: 1
|
||
}
|
||
},
|
||
z: 1
|
||
}, {
|
||
name: '外圆',
|
||
type: 'scatter',
|
||
hoverAnimation: false,
|
||
data: [0],
|
||
xAxisIndex: 2,
|
||
symbolSize: 70,
|
||
itemStyle: {
|
||
normal: {
|
||
color: borderColor,
|
||
opacity: 1
|
||
}
|
||
},
|
||
z: 0
|
||
}, {
|
||
name: '刻度',
|
||
type: 'bar',
|
||
yAxisIndex: 1,
|
||
xAxisIndex: 3,
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: 'right',
|
||
distance: 5,
|
||
color: '#fff',
|
||
fontSize: 10,
|
||
formatter: function(params) {
|
||
// 因为柱状初始化为0，温度存在负值，所以，原本的0-100，改为0-130，0-30用于表示负值
|
||
if (params.dataIndex > 100 || params.dataIndex < 30) {
|
||
return ''
|
||
} else {
|
||
if (params.dataIndex % 5 === 0) {
|
||
return params.dataIndex - 30
|
||
} else {
|
||
return ''
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
barGap: '-100%',
|
||
data: kd,
|
||
barWidth: 1,
|
||
itemStyle: {
|
||
normal: {
|
||
color: borderColor,
|
||
barBorderRadius: 10
|
||
}
|
||
},
|
||
z: 0
|
||
}]
|
||
}
|
||
myChart5.setOption(option)
|
||
},
|
||
initEcharts3(data) {
|
||
myChart5 = echarts.init(document.querySelector('#main6'))
|
||
const option = {
|
||
// backgroundColor:'#0F2D5B',
|
||
title: {
|
||
text: '风速监测',
|
||
show: true,
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
fontSize: 16,
|
||
color: '#fff'
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '外圈',
|
||
type: 'gauge',
|
||
min: 0,
|
||
max: 30,
|
||
splitNumber: 10,
|
||
center: ['50%', '55%'],
|
||
radius: '73%',
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: [[1, '#2E5BA1']],
|
||
width: 20
|
||
}
|
||
},
|
||
splitLine: {
|
||
distance: -20,
|
||
length: 20,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: '#0F2D5B'
|
||
}
|
||
},
|
||
axisTick: {
|
||
distance: -20,
|
||
length: 5,
|
||
lineStyle: {
|
||
color: '#0F2D5B'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
distance: -25,
|
||
color: '#7392C1',
|
||
fontSize: 14
|
||
},
|
||
anchor: {
|
||
show: false
|
||
},
|
||
pointer: {
|
||
show: false
|
||
}
|
||
},
|
||
{
|
||
name: '内圈',
|
||
type: 'gauge',
|
||
min: 0,
|
||
max: 30,
|
||
splitNumber: 10,
|
||
center: ['50%', '55%'],
|
||
radius: '65%',
|
||
axisLine: {
|
||
lineStyle: {
|
||
width: 20,
|
||
color: [
|
||
[0.25, '#18EC90'],
|
||
[0.5, '#E2DC2E'],
|
||
[0.75, '#E2A02E'],
|
||
[1, '#FE4747']
|
||
]
|
||
}
|
||
},
|
||
silent: true,
|
||
pointer: {
|
||
length: '85%',
|
||
width: 4,
|
||
itemStyle: {
|
||
color: 'inherit',
|
||
borderWidth: 1,
|
||
borderColor: 'inherit', // '#0D3778',
|
||
shadowColor: 'inherit',
|
||
shadowBlur: 1
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
distance: -20,
|
||
length: 5,
|
||
lineStyle: {
|
||
color: '#0F2D5B'
|
||
}
|
||
},
|
||
splitLine: {
|
||
distance: -20,
|
||
length: 20,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: '#0F2D5B'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: false
|
||
},
|
||
title: { // 仪表盘标题。
|
||
show: true, // 是否显示标题,默认 true。
|
||
offsetCenter: [0, '95%'], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||
color: '#ccc', // 文字的颜色,默认 #333。
|
||
fontSize: 15 // 文字的字体大小,默认 15。
|
||
},
|
||
detail: {
|
||
valueAnimation: true,
|
||
offsetCenter: [0, '70%'],
|
||
formatter: '{value}',
|
||
color: 'inherit', // 文字的颜色,默认 #333。
|
||
fontSize: 20
|
||
},
|
||
data: [{
|
||
name: '风速(m/s)',
|
||
value: data.pd.WINDSPEED
|
||
}]
|
||
}
|
||
]
|
||
}
|
||
myChart5.setOption(option)
|
||
},
|
||
calculateWindDirection(angle) {
|
||
const arr = [
|
||
{
|
||
directions: '北',
|
||
minAngle: '348.76',
|
||
maxAngle: '11.25'
|
||
},
|
||
{
|
||
directions: '北东北',
|
||
minAngle: '11.26',
|
||
maxAngle: '33.75'
|
||
},
|
||
{
|
||
directions: '东北',
|
||
minAngle: '33.76',
|
||
maxAngle: '56.25'
|
||
},
|
||
{
|
||
directions: '东东北',
|
||
minAngle: '56.26',
|
||
maxAngle: '78.75'
|
||
},
|
||
{
|
||
directions: '东',
|
||
minAngle: '78.76',
|
||
maxAngle: '101.25'
|
||
},
|
||
{
|
||
directions: '东东南',
|
||
minAngle: '101.26',
|
||
maxAngle: '123.75'
|
||
},
|
||
{
|
||
directions: '东南',
|
||
minAngle: '123.76',
|
||
maxAngle: '146.25'
|
||
},
|
||
{
|
||
directions: '南东南',
|
||
minAngle: '146.26',
|
||
maxAngle: '168.75'
|
||
},
|
||
{
|
||
directions: '南',
|
||
minAngle: '168.76',
|
||
maxAngle: '191.25'
|
||
},
|
||
{
|
||
directions: '南西南',
|
||
minAngle: '191.26',
|
||
maxAngle: '213.75'
|
||
},
|
||
{
|
||
directions: '西南',
|
||
minAngle: '213.76',
|
||
maxAngle: '236.25'
|
||
},
|
||
{
|
||
directions: '西西南',
|
||
minAngle: '236.26',
|
||
maxAngle: '258.75'
|
||
},
|
||
{
|
||
directions: '西',
|
||
minAngle: '258.76',
|
||
maxAngle: '281.25'
|
||
},
|
||
{
|
||
directions: '西西北',
|
||
minAngle: '281.26',
|
||
maxAngle: '303.75'
|
||
},
|
||
{
|
||
directions: '西北',
|
||
minAngle: '303.76',
|
||
maxAngle: '326.25'
|
||
},
|
||
{
|
||
directions: '北西北',
|
||
minAngle: '326.26',
|
||
maxAngle: '348.75'
|
||
}
|
||
]
|
||
for (let i = 0; i < arr.length; i++) {
|
||
if (+angle >= +arr[i].minAngle && +angle <= +arr[i].maxAngle) {
|
||
return arr[i].directions + '风'
|
||
}
|
||
}
|
||
return '静风'
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
#main4{
|
||
width: 500px;
|
||
height: 500px;
|
||
}
|
||
#main5{
|
||
width: 500px;
|
||
height: 500px;
|
||
}
|
||
#main6{
|
||
width: 500px;
|
||
height: 500px;
|
||
}
|
||
</style>
|