|
|
|
|
<template>
|
|
|
|
|
<div class="app-container home">
|
|
|
|
|
<el-form :model="data.form" label-width="0px">
|
|
|
|
|
<el-form-item label="">
|
|
|
|
|
<el-select v-model="data.form.device">
|
|
|
|
|
<el-option v-for="item in data.devArr" :label="item.deviceName" :value="item.deviceId" @click.native="selectDevice(item.deviceId)"/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<div class="top">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<div><img src="../../../assets/images/用电量.png"></div>
|
|
|
|
|
<div>
|
|
|
|
|
<p style="color: #cccccc">总用电量</p>
|
|
|
|
|
<h1>{{data.totwh}}kWh</h1>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card">
|
|
|
|
|
<div><img src="../../../assets/images/功率.png"></div>
|
|
|
|
|
<div>
|
|
|
|
|
<p style="color: #cccccc">当前功率</p>
|
|
|
|
|
<h1>{{data.totp}}kW</h1>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card">
|
|
|
|
|
<div><img src="../../../assets/images/温度.png"></div>
|
|
|
|
|
<div>
|
|
|
|
|
<div style="display: flex; margin-bottom: 5px">
|
|
|
|
|
<p style="color: #cccccc">进水温度：</p>
|
|
|
|
|
<h1>{{data.tempIn}}℃</h1>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex">
|
|
|
|
|
<p style="color: #cccccc">出水温度：</p>
|
|
|
|
|
<h1>{{data.tempOut}}℃</h1>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card">
|
|
|
|
|
<div><img src="../../../assets/images/运行状态.png"></div>
|
|
|
|
|
<div>
|
|
|
|
|
<p style="color: #cccccc">运行状态</p>
|
|
|
|
|
<h1 :class="{'green':data.runStatus == '开启','red':data.runStatus == '关闭'}">{{data.runStatus}}</h1>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="middle">
|
|
|
|
|
<!-- <div class="bottom1">-->
|
|
|
|
|
<!-- <div class="bottom1-1">-->
|
|
|
|
|
<!-- 日用电量-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
<!-- <div id="myEcharts" style="width: 100%; height: 86.7%"></div>-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
<!-- <div class="bottom1">-->
|
|
|
|
|
<!-- <div class="bottom1-1">-->
|
|
|
|
|
<!-- 月用电量-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
<!-- <div id="myEcharts2" style="width: 100%; height: 86.7%"></div>-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
<div class="middle1">
|
|
|
|
|
<div class="title">
|
|
|
|
|
当前功率
|
|
|
|
|
</div>
|
|
|
|
|
<div id="myEcharts1" style="width: 100%; height: 88.6%"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="middle2">
|
|
|
|
|
<div class="title">
|
|
|
|
|
当前功率
|
|
|
|
|
</div>
|
|
|
|
|
<div id="myEcharts3" style="width: 100%; height: 86.7%"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="bottom1">-->
|
|
|
|
|
<!-- <div class="bottom1-1">-->
|
|
|
|
|
<!-- 当前温度-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
<!-- <div id="myEcharts4" style="width: 100%; height: 86.7%"></div>-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="bottom">
|
|
|
|
|
<div class="title">
|
|
|
|
|
当前温度
|
|
|
|
|
</div>
|
|
|
|
|
<div id="myEcharts4" style="width: 100%; height: 86.7%"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script name="Index">
|
|
|
|
|
import {getSb, getXcgl, getXrgl} from '../../../api/emonitor/api'
|
|
|
|
|
import { onMounted ,reactive} from "vue";
|
|
|
|
|
import * as echarts from 'echarts';
|
|
|
|
|
export default {
|
|
|
|
|
name: "xrgl",
|
|
|
|
|
setup() {
|
|
|
|
|
let data = reactive({
|
|
|
|
|
totwh:'-- ',
|
|
|
|
|
totp:'-- ',
|
|
|
|
|
tempIn:'-- ',
|
|
|
|
|
tempOut:'-- ',
|
|
|
|
|
//1 开 2 关
|
|
|
|
|
runStatus:'-- ',
|
|
|
|
|
glData:[],
|
|
|
|
|
glXz:[
|
|
|
|
|
"00:00",
|
|
|
|
|
"00:15",
|
|
|
|
|
"00:30",
|
|
|
|
|
"00:45",
|
|
|
|
|
"01:00",
|
|
|
|
|
"01:15",
|
|
|
|
|
"01:30",
|
|
|
|
|
"01:45",
|
|
|
|
|
"02:00",
|
|
|
|
|
"02:15",
|
|
|
|
|
"02:30",
|
|
|
|
|
"02:45",
|
|
|
|
|
"03:00",
|
|
|
|
|
"03:15",
|
|
|
|
|
"03:30",
|
|
|
|
|
"03:45",
|
|
|
|
|
"04:00",
|
|
|
|
|
"04:15",
|
|
|
|
|
"04:30",
|
|
|
|
|
"04:45",
|
|
|
|
|
"05:00",
|
|
|
|
|
"05:15",
|
|
|
|
|
"05:30",
|
|
|
|
|
"05:45",
|
|
|
|
|
"06:00",
|
|
|
|
|
"06:15",
|
|
|
|
|
"06:30",
|
|
|
|
|
"06:45",
|
|
|
|
|
"07:00",
|
|
|
|
|
"07:15",
|
|
|
|
|
"07:30",
|
|
|
|
|
"07:45",
|
|
|
|
|
"08:00",
|
|
|
|
|
"08:15",
|
|
|
|
|
"08:30",
|
|
|
|
|
"08:45",
|
|
|
|
|
"09:00",
|
|
|
|
|
"09:15",
|
|
|
|
|
"09:30",
|
|
|
|
|
"09:45",
|
|
|
|
|
"10:00",
|
|
|
|
|
"10:15",
|
|
|
|
|
"10:30",
|
|
|
|
|
"10:45",
|
|
|
|
|
"11:00",
|
|
|
|
|
"11:15",
|
|
|
|
|
"11:30",
|
|
|
|
|
"11:45",
|
|
|
|
|
"12:00",
|
|
|
|
|
"12:15",
|
|
|
|
|
"12:30",
|
|
|
|
|
"12:45",
|
|
|
|
|
"13:00",
|
|
|
|
|
"13:15",
|
|
|
|
|
"13:30",
|
|
|
|
|
"13:45",
|
|
|
|
|
"14:00",
|
|
|
|
|
"14:15",
|
|
|
|
|
"14:30",
|
|
|
|
|
"14:45",
|
|
|
|
|
"15:00",
|
|
|
|
|
"15:15",
|
|
|
|
|
"15:30",
|
|
|
|
|
"15:45",
|
|
|
|
|
"16:00",
|
|
|
|
|
"16:15",
|
|
|
|
|
"16:30",
|
|
|
|
|
"16:45",
|
|
|
|
|
"17:00",
|
|
|
|
|
"17:15",
|
|
|
|
|
"17:30",
|
|
|
|
|
"17:45",
|
|
|
|
|
"18:00",
|
|
|
|
|
"18:15",
|
|
|
|
|
"18:30",
|
|
|
|
|
"18:45",
|
|
|
|
|
"19:00",
|
|
|
|
|
"19:15",
|
|
|
|
|
"19:30",
|
|
|
|
|
"19:45",
|
|
|
|
|
"20:00",
|
|
|
|
|
"20:15",
|
|
|
|
|
"20:30",
|
|
|
|
|
"20:45",
|
|
|
|
|
"21:00",
|
|
|
|
|
"21:15",
|
|
|
|
|
"21:30",
|
|
|
|
|
"21:45",
|
|
|
|
|
"22:00",
|
|
|
|
|
"22:15",
|
|
|
|
|
"22:30",
|
|
|
|
|
"22:45",
|
|
|
|
|
"23:00",
|
|
|
|
|
"23:15",
|
|
|
|
|
"23:30",
|
|
|
|
|
"23:45"
|
|
|
|
|
],
|
|
|
|
|
dayData:[],
|
|
|
|
|
dayXz:[],
|
|
|
|
|
emonthData:[],
|
|
|
|
|
emonthXz:[
|
|
|
|
|
1,
|
|
|
|
|
2,
|
|
|
|
|
3,
|
|
|
|
|
4,
|
|
|
|
|
5,
|
|
|
|
|
6,
|
|
|
|
|
7,
|
|
|
|
|
8,
|
|
|
|
|
9,
|
|
|
|
|
10,
|
|
|
|
|
11,
|
|
|
|
|
12,
|
|
|
|
|
13,
|
|
|
|
|
14,
|
|
|
|
|
15,
|
|
|
|
|
16,
|
|
|
|
|
17,
|
|
|
|
|
18,
|
|
|
|
|
19,
|
|
|
|
|
20,
|
|
|
|
|
21,
|
|
|
|
|
22,
|
|
|
|
|
23,
|
|
|
|
|
24,
|
|
|
|
|
25,
|
|
|
|
|
26,
|
|
|
|
|
27,
|
|
|
|
|
28,
|
|
|
|
|
29,
|
|
|
|
|
30,
|
|
|
|
|
31],
|
|
|
|
|
temIn:'',
|
|
|
|
|
temOut:'',
|
|
|
|
|
time:'',
|
|
|
|
|
form:{
|
|
|
|
|
device: 2
|
|
|
|
|
},
|
|
|
|
|
devArr:'',
|
|
|
|
|
deviceId: 2,
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => {//需要获取到element,所以是onMounted的Hook
|
|
|
|
|
getPowerPie()
|
|
|
|
|
getSbFun()
|
|
|
|
|
getXrglFun()
|
|
|
|
|
getXcglFun()
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
//渲染蓄热锅炉当前功率饼图
|
|
|
|
|
function getPowerPie(){
|
|
|
|
|
let myChart1 = echarts.getInstanceByDom(document.getElementById("myEcharts1"));
|
|
|
|
|
if (myChart1){
|
|
|
|
|
myChart1.dispose()
|
|
|
|
|
}
|
|
|
|
|
myChart1 = echarts.init(document.getElementById("myEcharts1"));
|
|
|
|
|
myChart1.setOption({
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
type: 'gauge',
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
width: 10,
|
|
|
|
|
color: [
|
|
|
|
|
[0.3, '#67e0e3'],
|
|
|
|
|
[0.7, '#37a2da'],
|
|
|
|
|
[1, '#fd666d']
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
pointer: {
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: 'inherit'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// axisTick: {
|
|
|
|
|
// distance: -30,
|
|
|
|
|
// length: 8,
|
|
|
|
|
// lineStyle: {
|
|
|
|
|
// color: '#fff',
|
|
|
|
|
// width: 2
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// splitLine: {
|
|
|
|
|
// distance: -30,
|
|
|
|
|
// length: 30,
|
|
|
|
|
// lineStyle: {
|
|
|
|
|
// color: '#fff',
|
|
|
|
|
// width: 4
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: 'inherit',
|
|
|
|
|
distance: 10,
|
|
|
|
|
fontSize: 10
|
|
|
|
|
},
|
|
|
|
|
detail: {
|
|
|
|
|
valueAnimation: true,
|
|
|
|
|
formatter: '{value} kW',
|
|
|
|
|
color: 'inherit',
|
|
|
|
|
textStyle:{
|
|
|
|
|
fontSize: 22
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: [
|
|
|
|
|
{
|
|
|
|
|
value: data.totp
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
});
|
|
|
|
|
window.addEventListener("resize", function () {
|
|
|
|
|
myChart1.resize();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//渲染蓄热锅炉数据
|
|
|
|
|
function getXrglFun(){
|
|
|
|
|
getXrgl(data.deviceId).then((res)=>{
|
|
|
|
|
console.log('1',res)
|
|
|
|
|
if(res.data!=null) {
|
|
|
|
|
data.tempIn = res.data.tempIn
|
|
|
|
|
data.tempOut = res.data.tempOut
|
|
|
|
|
data.totp = res.data.totp
|
|
|
|
|
data.totwh = res.data.totwh
|
|
|
|
|
if (res.data.runStatus == 1) {
|
|
|
|
|
data.runStatus = '开启'
|
|
|
|
|
} else if (res.data.runStatus == 2) {
|
|
|
|
|
data.runStatus = '关闭'
|
|
|
|
|
}
|
|
|
|
|
//gl
|
|
|
|
|
delete res.data.todayUsePowers.deviceId
|
|
|
|
|
delete res.data.todayUsePowers.samDate
|
|
|
|
|
delete res.data.todayUsePowers.userId
|
|
|
|
|
let arr = Object.values(res.data.todayUsePowers)
|
|
|
|
|
data.glData = arr
|
|
|
|
|
}
|
|
|
|
|
let myChart3 = echarts.getInstanceByDom(document.getElementById("myEcharts3"));
|
|
|
|
|
if (myChart3){
|
|
|
|
|
myChart3.dispose()
|
|
|
|
|
}
|
|
|
|
|
myChart3 = echarts.init(document.getElementById("myEcharts3"));
|
|
|
|
|
myChart3.setOption({
|
|
|
|
|
title: {},
|
|
|
|
|
legend:{
|
|
|
|
|
top: 10,
|
|
|
|
|
data:['当前功率'],
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "white" //标题的颜色
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: "axis",
|
|
|
|
|
show: true
|
|
|
|
|
},
|
|
|
|
|
textStyle:{
|
|
|
|
|
color:'#BEC3DA'
|
|
|
|
|
},
|
|
|
|
|
grid:{
|
|
|
|
|
show: true,
|
|
|
|
|
top: '20%',
|
|
|
|
|
bottom:'15%',
|
|
|
|
|
left:'5%',
|
|
|
|
|
right:'3%',
|
|
|
|
|
borderWidth: 1,
|
|
|
|
|
borderColor: '#767da1',
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
data:data.glXz,
|
|
|
|
|
axisLine:{
|
|
|
|
|
lineStyle:{
|
|
|
|
|
color:'#767da1'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false // 去掉x轴刻度
|
|
|
|
|
},
|
|
|
|
|
splitArea: {
|
|
|
|
|
show: true,
|
|
|
|
|
interval:0,
|
|
|
|
|
areaStyle: {
|
|
|
|
|
color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
|
|
|
|
|
//（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: 'value',
|
|
|
|
|
name: "kW",
|
|
|
|
|
splitLine:{
|
|
|
|
|
show:true,
|
|
|
|
|
lineStyle:{
|
|
|
|
|
type:'solid',
|
|
|
|
|
color:'#BEC3DA'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: false,
|
|
|
|
|
lineStyle:{
|
|
|
|
|
type:'dashed',
|
|
|
|
|
color:'#BEC3DA'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: "当前功率",
|
|
|
|
|
type: "line",
|
|
|
|
|
data: data.glData,
|
|
|
|
|
itemStyle:{
|
|
|
|
|
color:'#2F8EE0'
|
|
|
|
|
},
|
|
|
|
|
symbol: "circle", //去掉拐角点
|
|
|
|
|
markPoint: {
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
label: {
|
|
|
|
|
color: '#fff',
|
|
|
|
|
// fontSize: 9
|
|
|
|
|
// borderColor: '#000',
|
|
|
|
|
// borderWidth: 1,
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: [
|
|
|
|
|
{type: "max", name: "最大值"},
|
|
|
|
|
{type: "min", name: "最小值"}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
areaStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
{offset: 0, color: "#128dff"},
|
|
|
|
|
{offset: 0.5, color: "rgba(18,141,252,.2)"},
|
|
|
|
|
{offset: 1, color: "rgba(18,141,252,.0)"}
|
|
|
|
|
])
|
|
|
|
|
}
|
|
|
|
|
}, //设置折线区域渐变颜色
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
});
|
|
|
|
|
window.addEventListener("resize", function () {
|
|
|
|
|
myChart3.resize();
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
function getXcglFun(){
|
|
|
|
|
getXcgl(data.deviceId).then((res)=>{
|
|
|
|
|
console.log(res)
|
|
|
|
|
//日用电量
|
|
|
|
|
// let arr = []
|
|
|
|
|
// let brr = []
|
|
|
|
|
// for(let i in res.xrglqhour){
|
|
|
|
|
// arr.push(res.xrglqhour[i].useElectric)
|
|
|
|
|
// brr.push(res.xrglqhour[i].hour)
|
|
|
|
|
// }
|
|
|
|
|
// data.dayData=arr
|
|
|
|
|
// data.dayXz=brr
|
|
|
|
|
// let myChart = echarts.getInstanceByDom(document.getElementById("myEcharts"));
|
|
|
|
|
// if (myChart){
|
|
|
|
|
// myChart.dispose()
|
|
|
|
|
// }
|
|
|
|
|
// myChart = echarts.init(document.getElementById("myEcharts"));
|
|
|
|
|
// myChart.setOption({
|
|
|
|
|
// title: {},
|
|
|
|
|
// tooltip: {},
|
|
|
|
|
// grid:{
|
|
|
|
|
// show: true,
|
|
|
|
|
// top: '20%',
|
|
|
|
|
// bottom:'15%',
|
|
|
|
|
// left:'5%',
|
|
|
|
|
// right:'3%',
|
|
|
|
|
// borderWidth: 1,
|
|
|
|
|
// borderColor: '#767da1',
|
|
|
|
|
// },
|
|
|
|
|
// legend:{
|
|
|
|
|
// data:['日用电量'],
|
|
|
|
|
// textStyle: {
|
|
|
|
|
// color: "white" //标题的颜色
|
|
|
|
|
// },
|
|
|
|
|
// },
|
|
|
|
|
// textStyle:{
|
|
|
|
|
// color:'#BEC3DA'
|
|
|
|
|
// },
|
|
|
|
|
// xAxis: {
|
|
|
|
|
// type:'category',
|
|
|
|
|
// data:data.dayXz,
|
|
|
|
|
// axisLine:{
|
|
|
|
|
// lineStyle:{
|
|
|
|
|
// color:'#767da1',
|
|
|
|
|
// // type:'dashed'
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// axisTick: {
|
|
|
|
|
// show: false // 去掉x轴刻度
|
|
|
|
|
// },
|
|
|
|
|
// splitArea: {
|
|
|
|
|
// show: true,
|
|
|
|
|
// interval:0,
|
|
|
|
|
// areaStyle: {
|
|
|
|
|
// color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
|
|
|
|
|
// //（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// yAxis: {
|
|
|
|
|
// type: 'value',
|
|
|
|
|
// name: "kWh",
|
|
|
|
|
// splitLine:{
|
|
|
|
|
// show:true,
|
|
|
|
|
// lineStyle:{
|
|
|
|
|
// type:'solid',
|
|
|
|
|
// color:'#f3ffff'
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// axisLine: {
|
|
|
|
|
// show: false,
|
|
|
|
|
// lineStyle:{
|
|
|
|
|
// type:'dashed',
|
|
|
|
|
// color:'#BEC3DA'
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// },
|
|
|
|
|
// series: [
|
|
|
|
|
// {
|
|
|
|
|
// name: "日用电量",
|
|
|
|
|
// type: "bar",
|
|
|
|
|
// data: data.dayData,
|
|
|
|
|
// itemStyle:{
|
|
|
|
|
// color:'#2F8EE0'
|
|
|
|
|
// },
|
|
|
|
|
// markPoint: {
|
|
|
|
|
// itemStyle: {
|
|
|
|
|
// normal: {
|
|
|
|
|
// label: {
|
|
|
|
|
// color: '#fff',
|
|
|
|
|
// // fontSize: 9
|
|
|
|
|
// // borderColor: '#000',
|
|
|
|
|
// // borderWidth: 1,
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// data: [
|
|
|
|
|
// {type: "max", name: "最大值"},
|
|
|
|
|
// {type: "min", name: "最小值"}
|
|
|
|
|
// ]
|
|
|
|
|
// },
|
|
|
|
|
// },
|
|
|
|
|
// ],
|
|
|
|
|
// });
|
|
|
|
|
// window.onresize = function () {//自适应大小
|
|
|
|
|
// myChart.resize();
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
//月用电量
|
|
|
|
|
// let crr = []
|
|
|
|
|
// for(let i in res.xrglqday){
|
|
|
|
|
// crr.push(res.xrglqday[i].useElectric)
|
|
|
|
|
// }
|
|
|
|
|
// data.emonthData=crr
|
|
|
|
|
// let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2"));
|
|
|
|
|
// if (myChart2){
|
|
|
|
|
// myChart2.dispose()
|
|
|
|
|
// }
|
|
|
|
|
// myChart2 = echarts.init(document.getElementById("myEcharts2"));
|
|
|
|
|
//
|
|
|
|
|
// myChart2.setOption({
|
|
|
|
|
// title: {},
|
|
|
|
|
// tooltip: {},
|
|
|
|
|
// grid:{
|
|
|
|
|
// show: true,
|
|
|
|
|
// top: '20%',
|
|
|
|
|
// bottom:'15%',
|
|
|
|
|
// left:'5%',
|
|
|
|
|
// right:'3%',
|
|
|
|
|
// borderWidth: 1,
|
|
|
|
|
// borderColor: '#767da1',
|
|
|
|
|
// },
|
|
|
|
|
// legend:{
|
|
|
|
|
// data:['月用电量'],
|
|
|
|
|
// textStyle: {
|
|
|
|
|
// color: "white" //标题的颜色
|
|
|
|
|
// },
|
|
|
|
|
// },
|
|
|
|
|
// textStyle:{
|
|
|
|
|
// color:'#BEC3DA'
|
|
|
|
|
// },
|
|
|
|
|
// xAxis: {
|
|
|
|
|
// type:'category',
|
|
|
|
|
// data:data.emonthXz,
|
|
|
|
|
// axisLine:{
|
|
|
|
|
// lineStyle:{
|
|
|
|
|
// color:'#767da1',
|
|
|
|
|
// // type:'dashed'
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// axisTick: {
|
|
|
|
|
// show: false // 去掉x轴刻度
|
|
|
|
|
// },
|
|
|
|
|
// splitArea: {
|
|
|
|
|
// show: true,
|
|
|
|
|
// interval:0,
|
|
|
|
|
// areaStyle: {
|
|
|
|
|
// color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
|
|
|
|
|
// //（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// yAxis: {
|
|
|
|
|
// type: 'value',
|
|
|
|
|
// name: "kWh",
|
|
|
|
|
// splitLine:{
|
|
|
|
|
// show:true,
|
|
|
|
|
// lineStyle:{
|
|
|
|
|
// type:'solid',
|
|
|
|
|
// color:'#f3ffff'
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// axisLine: {
|
|
|
|
|
// show: false,
|
|
|
|
|
// lineStyle:{
|
|
|
|
|
// type:'dashed',
|
|
|
|
|
// color:'#BEC3DA'
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// },
|
|
|
|
|
// series: [
|
|
|
|
|
// {
|
|
|
|
|
// name: "月用电量",
|
|
|
|
|
// type: "bar",
|
|
|
|
|
// data: data.emonthData,
|
|
|
|
|
// itemStyle:{
|
|
|
|
|
// color:'#2F8EE0'
|
|
|
|
|
// },
|
|
|
|
|
// markPoint: {
|
|
|
|
|
// itemStyle: {
|
|
|
|
|
// normal: {
|
|
|
|
|
// label: {
|
|
|
|
|
// color: '#fff',
|
|
|
|
|
// // fontSize: 9
|
|
|
|
|
// // borderColor: '#000',
|
|
|
|
|
// // borderWidth: 1,
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// data: [
|
|
|
|
|
// {type: "max", name: "最大值"},
|
|
|
|
|
// {type: "min", name: "最小值"}
|
|
|
|
|
// ]
|
|
|
|
|
// },
|
|
|
|
|
// },
|
|
|
|
|
// ],
|
|
|
|
|
// });
|
|
|
|
|
// window.onresize = function () {//自适应大小
|
|
|
|
|
// myChart2.resize();
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
//进出水温度
|
|
|
|
|
data.time=res.times
|
|
|
|
|
data.temIn=res.tempIn
|
|
|
|
|
data.temOut=res.tempOut
|
|
|
|
|
|
|
|
|
|
let myChart4 = echarts.getInstanceByDom(document.getElementById("myEcharts4"));
|
|
|
|
|
if (myChart4){
|
|
|
|
|
myChart4.dispose()
|
|
|
|
|
}
|
|
|
|
|
myChart4 = echarts.init(document.getElementById("myEcharts4"));
|
|
|
|
|
myChart4.setOption({
|
|
|
|
|
title: {},
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: "axis",
|
|
|
|
|
|
|
|
|
|
show: true
|
|
|
|
|
},
|
|
|
|
|
grid:{
|
|
|
|
|
show: true,
|
|
|
|
|
top: '20%',
|
|
|
|
|
bottom:'15%',
|
|
|
|
|
left:'5%',
|
|
|
|
|
right:'3%',
|
|
|
|
|
borderWidth: 1,
|
|
|
|
|
borderColor: '#767da1',
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
top: 10,
|
|
|
|
|
data: ['进水', '出水'],
|
|
|
|
|
textStyle:{
|
|
|
|
|
color:'#BEC3DA'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
textStyle:{
|
|
|
|
|
color:'#BEC3DA'
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
data: data.time,
|
|
|
|
|
axisLine:{
|
|
|
|
|
lineStyle:{
|
|
|
|
|
color:'#767da1',
|
|
|
|
|
// type:'dashed'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false // 去掉x轴刻度
|
|
|
|
|
},
|
|
|
|
|
splitArea: {
|
|
|
|
|
show: true,
|
|
|
|
|
interval:0,
|
|
|
|
|
areaStyle: {
|
|
|
|
|
color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
|
|
|
|
|
//（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: 'value',
|
|
|
|
|
name: "℃",
|
|
|
|
|
splitLine:{
|
|
|
|
|
show:true,
|
|
|
|
|
lineStyle:{
|
|
|
|
|
type:'dashed',
|
|
|
|
|
color:'#BEC3DA'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: false,
|
|
|
|
|
lineStyle:{
|
|
|
|
|
type:'dashed',
|
|
|
|
|
color:'#BEC3DA'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '进水',
|
|
|
|
|
type: 'line',
|
|
|
|
|
// stack: 'Total',
|
|
|
|
|
itemStyle:{
|
|
|
|
|
color:'#2F8EE0'
|
|
|
|
|
},
|
|
|
|
|
data: data.temIn
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '出水',
|
|
|
|
|
type: 'line',
|
|
|
|
|
// stack: 'Total',
|
|
|
|
|
itemStyle: { //线条颜色
|
|
|
|
|
color: '#F5901A',
|
|
|
|
|
},
|
|
|
|
|
data: data.temOut
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
});
|
|
|
|
|
window.addEventListener("resize", function () {
|
|
|
|
|
myChart4.resize();
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//获取蓄热水箱设备
|
|
|
|
|
function getSbFun(){
|
|
|
|
|
getSb().then((res)=>{
|
|
|
|
|
for(let i = 0;i < res.data.length;i++){
|
|
|
|
|
if(res.data[i].modelName == '蓄热水箱'){
|
|
|
|
|
data.devArr = res.data[i].children
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
//切换设备
|
|
|
|
|
function selectDevice(id){
|
|
|
|
|
console.log(id)
|
|
|
|
|
data.deviceId = id;
|
|
|
|
|
getXrglFun()
|
|
|
|
|
getXcglFun()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return{data,selectDevice}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.top{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 110px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
}
|
|
|
|
|
.card{
|
|
|
|
|
width: 24.4%;
|
|
|
|
|
height: 110px;
|
|
|
|
|
background-color: #2F3D8A;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.middle{
|
|
|
|
|
width: 100%;
|
|
|
|
|
//height: 640px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
}
|
|
|
|
|
.middle1{
|
|
|
|
|
width: 24.4%;
|
|
|
|
|
height: 350px;
|
|
|
|
|
background-color: #2F3D8A;
|
|
|
|
|
}
|
|
|
|
|
.middle2{
|
|
|
|
|
width: 74.8%;
|
|
|
|
|
height: 350px;
|
|
|
|
|
background-color: #2F3D8A;
|
|
|
|
|
}
|
|
|
|
|
.middle1-1{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 13.3%;
|
|
|
|
|
background-color: #374590;
|
|
|
|
|
padding-top: 10px;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
.bottom{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 305px;
|
|
|
|
|
background-color: #2F3D8A;
|
|
|
|
|
}
|
|
|
|
|
p{
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
.title{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 13.3%;
|
|
|
|
|
background-color: #374590;
|
|
|
|
|
padding-top: 10px;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
.green{
|
|
|
|
|
color: #14FF00;
|
|
|
|
|
}
|
|
|
|
|
.red{
|
|
|
|
|
color: red;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-form-item{
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
}@media (max-width:960px) {
|
|
|
|
|
.app-container{
|
|
|
|
|
padding: 8px;
|
|
|
|
|
}
|
|
|
|
|
.card{
|
|
|
|
|
p{
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
h1{
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.title{
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
line-height: 32px;
|
|
|
|
|
padding-top: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
