|
|
|
|
@ -2,37 +2,37 @@ |
|
|
|
|
<div class="app-container home"> |
|
|
|
|
<div class="top"> |
|
|
|
|
<div class="card"> |
|
|
|
|
<div>pic</div> |
|
|
|
|
<div><img src="../../../assets/images/用电量.png"></div> |
|
|
|
|
<div> |
|
|
|
|
<p>总用电量</p> |
|
|
|
|
<h2>1641kWh</h2> |
|
|
|
|
<h2>{{data.totwh}}kWh</h2> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="card"> |
|
|
|
|
<div>pic</div> |
|
|
|
|
<div><img src="../../../assets/images/功率.png"></div> |
|
|
|
|
<div> |
|
|
|
|
<p>当前功率</p> |
|
|
|
|
<h2>11kW</h2> |
|
|
|
|
<h2>{{data.totp}}kW</h2> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="card"> |
|
|
|
|
<div>pic</div> |
|
|
|
|
<div><img src="../../../assets/images/温度.png"></div> |
|
|
|
|
<div> |
|
|
|
|
<div style="display: flex; margin-bottom: 5px"> |
|
|
|
|
<p>进水温度:</p> |
|
|
|
|
<h2>25℃</h2> |
|
|
|
|
<h2>{{data.tempIn}}℃</h2> |
|
|
|
|
</div> |
|
|
|
|
<div style="display: flex"> |
|
|
|
|
<p>出水温度:</p> |
|
|
|
|
<h2>85℃</h2> |
|
|
|
|
<h2>{{data.tempOut}}℃</h2> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="card"> |
|
|
|
|
<div>pic</div> |
|
|
|
|
<div><img src="../../../assets/images/温度传感器.png"></div> |
|
|
|
|
<div> |
|
|
|
|
<p>运行状态</p> |
|
|
|
|
<h2 style="color: #1ab394">开启</h2> |
|
|
|
|
<h2 style="color: #1ab394">{{data.runStatus}}</h2> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -42,7 +42,7 @@ |
|
|
|
|
<div class="bottom1-1"> |
|
|
|
|
日用电量 |
|
|
|
|
</div> |
|
|
|
|
<div id="myEcharts1" style="width: 100%; height: 86.7%"></div> |
|
|
|
|
<div id="myEcharts" style="width: 100%; height: 86.7%"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="bottom1"> |
|
|
|
|
<div class="bottom1-1"> |
|
|
|
|
@ -68,52 +68,184 @@ |
|
|
|
|
|
|
|
|
|
<script name="Index"> |
|
|
|
|
import {getDrgl, getDcgl} from '../../../api/emonitor/api' |
|
|
|
|
import { onMounted } from "vue"; |
|
|
|
|
import {onMounted, reactive} from "vue"; |
|
|
|
|
import * as echarts from 'echarts'; |
|
|
|
|
export default { |
|
|
|
|
name: "drgl", |
|
|
|
|
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:'', |
|
|
|
|
}) |
|
|
|
|
onMounted(() => {//需要获取到element,所以是onMounted的Hook |
|
|
|
|
// getDrgl(1).then((res)=>{ |
|
|
|
|
// console.log(res) |
|
|
|
|
// }) |
|
|
|
|
getDcgl(1).then((res)=>{ |
|
|
|
|
console.log(res) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let myChart1 = echarts.getInstanceByDom(document.getElementById("myEcharts1")); |
|
|
|
|
if (myChart1){ |
|
|
|
|
myChart1.dispose() |
|
|
|
|
//日用电量 |
|
|
|
|
let arr = [] |
|
|
|
|
let brr = [] |
|
|
|
|
for(let i in res.dcglqhour){ |
|
|
|
|
arr.push(res.dcglqhour[i].useElectric) |
|
|
|
|
brr.push(res.dcglqhour[i].hour) |
|
|
|
|
} |
|
|
|
|
myChart1 = echarts.init(document.getElementById("myEcharts1")); |
|
|
|
|
|
|
|
|
|
let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2")); |
|
|
|
|
if (myChart2){ |
|
|
|
|
myChart2.dispose() |
|
|
|
|
data.dayData=arr |
|
|
|
|
data.dayXz=brr |
|
|
|
|
let myChart = echarts.getInstanceByDom(document.getElementById("myEcharts")); |
|
|
|
|
if (myChart){ |
|
|
|
|
myChart.dispose() |
|
|
|
|
} |
|
|
|
|
myChart2 = echarts.init(document.getElementById("myEcharts2")); |
|
|
|
|
|
|
|
|
|
let myChart3 = echarts.getInstanceByDom(document.getElementById("myEcharts3")); |
|
|
|
|
if (myChart3){ |
|
|
|
|
myChart3.dispose() |
|
|
|
|
} |
|
|
|
|
myChart3 = echarts.init(document.getElementById("myEcharts3")); |
|
|
|
|
|
|
|
|
|
let myChart4 = echarts.getInstanceByDom(document.getElementById("myEcharts4")); |
|
|
|
|
if (myChart4){ |
|
|
|
|
myChart4.dispose() |
|
|
|
|
} |
|
|
|
|
myChart4 = echarts.init(document.getElementById("myEcharts4")); |
|
|
|
|
// 绘制图表 |
|
|
|
|
myChart1.setOption({ |
|
|
|
|
myChart = echarts.init(document.getElementById("myEcharts")); |
|
|
|
|
myChart.setOption({ |
|
|
|
|
title: {}, |
|
|
|
|
tooltip: {}, |
|
|
|
|
textStyle:{ |
|
|
|
|
color:'#BEC3DA' |
|
|
|
|
}, |
|
|
|
|
xAxis: { |
|
|
|
|
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"], |
|
|
|
|
data: data.dayXz, |
|
|
|
|
axisLine:{ |
|
|
|
|
lineStyle:{ |
|
|
|
|
color:'#BEC3DA', |
|
|
|
|
@ -143,7 +275,7 @@ export default { |
|
|
|
|
{ |
|
|
|
|
name: "日用电量", |
|
|
|
|
type: "bar", |
|
|
|
|
data: [5, 20, 36, 10, 10, 20], |
|
|
|
|
data: data.dayData, |
|
|
|
|
itemStyle:{ |
|
|
|
|
color:'#2F8EE0' |
|
|
|
|
}, |
|
|
|
|
@ -153,6 +285,19 @@ export default { |
|
|
|
|
window.onresize = function () {//自适应大小 |
|
|
|
|
myChart.resize(); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
//月用电量 |
|
|
|
|
let crr = [] |
|
|
|
|
for(let i in res.dcglqday){ |
|
|
|
|
crr.push(res.dcglqday[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: {}, |
|
|
|
|
@ -160,7 +305,7 @@ export default { |
|
|
|
|
color:'#BEC3DA' |
|
|
|
|
}, |
|
|
|
|
xAxis: { |
|
|
|
|
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"], |
|
|
|
|
data: data.emonthXz, |
|
|
|
|
axisLine:{ |
|
|
|
|
lineStyle:{ |
|
|
|
|
color:'#BEC3DA', |
|
|
|
|
@ -190,7 +335,7 @@ export default { |
|
|
|
|
{ |
|
|
|
|
name: "月用电量", |
|
|
|
|
type: "bar", |
|
|
|
|
data: [5, 20, 36, 10, 10, 20], |
|
|
|
|
data: data.emonthData, |
|
|
|
|
itemStyle:{ |
|
|
|
|
color:'#2F8EE0' |
|
|
|
|
}, |
|
|
|
|
@ -200,14 +345,31 @@ export default { |
|
|
|
|
window.onresize = function () {//自适应大小 |
|
|
|
|
myChart2.resize(); |
|
|
|
|
}; |
|
|
|
|
myChart3.setOption({ |
|
|
|
|
|
|
|
|
|
//进出水温度 |
|
|
|
|
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: {}, |
|
|
|
|
legend: { |
|
|
|
|
data: ['进水', '出水'], |
|
|
|
|
textStyle:{ |
|
|
|
|
color:'#BEC3DA' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
textStyle:{ |
|
|
|
|
color:'#BEC3DA' |
|
|
|
|
}, |
|
|
|
|
xAxis: { |
|
|
|
|
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"], |
|
|
|
|
data: data.time, |
|
|
|
|
axisLine:{ |
|
|
|
|
lineStyle:{ |
|
|
|
|
color:'#BEC3DA', |
|
|
|
|
@ -217,7 +379,7 @@ export default { |
|
|
|
|
}, |
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value', |
|
|
|
|
name: "kW", |
|
|
|
|
name: "℃", |
|
|
|
|
splitLine:{ |
|
|
|
|
show:true, |
|
|
|
|
lineStyle:{ |
|
|
|
|
@ -235,32 +397,59 @@ export default { |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: "当前功率", |
|
|
|
|
type: "line", |
|
|
|
|
data: [5, 20, 36, 10, 10, 20], |
|
|
|
|
name: '进水', |
|
|
|
|
type: 'line', |
|
|
|
|
stack: 'Total', |
|
|
|
|
itemStyle:{ |
|
|
|
|
color:'#2F8EE0' |
|
|
|
|
}, |
|
|
|
|
data: data.temIn |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: '出水', |
|
|
|
|
type: 'line', |
|
|
|
|
stack: 'Total', |
|
|
|
|
itemStyle:{ |
|
|
|
|
color:'#2F8EE0' |
|
|
|
|
}, |
|
|
|
|
data: data.temOut |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}); |
|
|
|
|
window.onresize = function () {//自适应大小 |
|
|
|
|
myChart3.resize(); |
|
|
|
|
myChart4.resize(); |
|
|
|
|
}; |
|
|
|
|
myChart4.setOption({ |
|
|
|
|
}) |
|
|
|
|
getDrgl(1).then((res)=>{ |
|
|
|
|
console.log('1',res) |
|
|
|
|
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: {}, |
|
|
|
|
tooltip: {}, |
|
|
|
|
legend: { |
|
|
|
|
data: ['进水', '出水'], |
|
|
|
|
textStyle:{ |
|
|
|
|
color:'#BEC3DA' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
textStyle:{ |
|
|
|
|
color:'#BEC3DA' |
|
|
|
|
}, |
|
|
|
|
xAxis: { |
|
|
|
|
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"], |
|
|
|
|
data: data.glXz, |
|
|
|
|
axisLine:{ |
|
|
|
|
lineStyle:{ |
|
|
|
|
color:'#BEC3DA', |
|
|
|
|
@ -270,7 +459,7 @@ export default { |
|
|
|
|
}, |
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value', |
|
|
|
|
name: "℃", |
|
|
|
|
name: "kW", |
|
|
|
|
splitLine:{ |
|
|
|
|
show:true, |
|
|
|
|
lineStyle:{ |
|
|
|
|
@ -288,29 +477,25 @@ export default { |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: '进水', |
|
|
|
|
type: 'line', |
|
|
|
|
stack: 'Total', |
|
|
|
|
itemStyle:{ |
|
|
|
|
color:'#2F8EE0' |
|
|
|
|
}, |
|
|
|
|
data: [120, 132, 101, 134, 90, 230, 210] |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: '出水', |
|
|
|
|
type: 'line', |
|
|
|
|
stack: 'Total', |
|
|
|
|
name: "当前功率", |
|
|
|
|
type: "line", |
|
|
|
|
data: data.glData, |
|
|
|
|
itemStyle:{ |
|
|
|
|
color:'#2F8EE0' |
|
|
|
|
}, |
|
|
|
|
data: [220, 182, 191, 234, 290, 330, 310] |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}); |
|
|
|
|
window.onresize = function () {//自适应大小 |
|
|
|
|
myChart4.resize(); |
|
|
|
|
myChart3.resize(); |
|
|
|
|
}; |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
return { |
|
|
|
|
data |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
components: {}, |
|
|
|
|
mounted() {}, |
|
|
|
|
|
