You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
529 lines
11 KiB
529 lines
11 KiB
<template>
|
|
<div class="app-container home">
|
|
<div class="top">
|
|
<div class="card">
|
|
<div><img src="../../../assets/images/用电量.png"></div>
|
|
<div>
|
|
<p>总用电量</p>
|
|
<h2>1641kWh</h2>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div><img src="../../../assets/images/功率.png"></div>
|
|
<div>
|
|
<p>当前功率</p>
|
|
<h2>11kW</h2>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div><img src="../../../assets/images/温度.png"></div>
|
|
<div>
|
|
<div>
|
|
<p>当前温度</p>
|
|
<h2>25℃</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div><img src="../../../assets/images/温度传感器.png"></div>
|
|
<div>
|
|
<p>运行状态</p>
|
|
<h2 style="color: #1ab394">开启</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bottom">
|
|
<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="bottom1">
|
|
<div class="bottom1-1">
|
|
当前功率
|
|
</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>
|
|
</template>
|
|
|
|
<script name="Index">
|
|
import {getFrdl, getFrld} from '../../../api/emonitor/api'
|
|
import {onMounted, reactive} from "vue";
|
|
import * as echarts from 'echarts';
|
|
export default {
|
|
name: "frdl",
|
|
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],
|
|
tem:'',
|
|
time:'',
|
|
})
|
|
onMounted(() => {//需要获取到element,所以是onMounted的Hook
|
|
getFrld(4).then((res) => {
|
|
console.log(res)
|
|
//日用电量
|
|
let arr = []
|
|
let brr = []
|
|
for(let i in res.frdlqhour){
|
|
arr.push(res.frdlqhour[i].useElectric)
|
|
brr.push(res.frdlqhour[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: {},
|
|
textStyle:{
|
|
color:'#BEC3DA'
|
|
},
|
|
xAxis: {
|
|
data: data.dayXz,
|
|
axisLine:{
|
|
lineStyle:{
|
|
color:'#BEC3DA',
|
|
type:'dashed'
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: "kWh",
|
|
splitLine:{
|
|
show:true,
|
|
lineStyle:{
|
|
type:'dashed',
|
|
color:'#BEC3DA'
|
|
}
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle:{
|
|
type:'dashed',
|
|
color:'#BEC3DA'
|
|
}
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "日用电量",
|
|
type: "bar",
|
|
data: data.dayData,
|
|
itemStyle:{
|
|
color:'#2F8EE0'
|
|
},
|
|
},
|
|
],
|
|
});
|
|
window.onresize = function () {//自适应大小
|
|
myChart.resize();
|
|
};
|
|
|
|
//月用电量
|
|
let crr = []
|
|
for(let i in res.frdlqday){
|
|
crr.push(res.frdlqday[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: {},
|
|
textStyle:{
|
|
color:'#BEC3DA'
|
|
},
|
|
xAxis: {
|
|
data: data.emonthXz,
|
|
axisLine:{
|
|
lineStyle:{
|
|
color:'#BEC3DA',
|
|
type:'dashed'
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: "kWh",
|
|
splitLine:{
|
|
show:true,
|
|
lineStyle:{
|
|
type:'dashed',
|
|
color:'#BEC3DA'
|
|
}
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle:{
|
|
type:'dashed',
|
|
color:'#BEC3DA'
|
|
}
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "月用电量",
|
|
type: "bar",
|
|
data: data.emonthData,
|
|
itemStyle:{
|
|
color:'#2F8EE0'
|
|
},
|
|
},
|
|
],
|
|
});
|
|
window.onresize = function () {//自适应大小
|
|
myChart2.resize();
|
|
};
|
|
|
|
//进出水温度
|
|
data.time=res.times
|
|
data.tem=res.temps
|
|
|
|
|
|
let myChart4 = echarts.getInstanceByDom(document.getElementById("myEcharts4"));
|
|
if (myChart4){
|
|
myChart4.dispose()
|
|
}
|
|
myChart4 = echarts.init(document.getElementById("myEcharts4"));
|
|
myChart4.setOption({
|
|
title: {},
|
|
tooltip: {},
|
|
textStyle:{
|
|
color:'#BEC3DA'
|
|
},
|
|
xAxis: {
|
|
data: data.time,
|
|
axisLine:{
|
|
lineStyle:{
|
|
color:'#BEC3DA',
|
|
type:'dashed'
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: "℃",
|
|
splitLine:{
|
|
show:true,
|
|
lineStyle:{
|
|
type:'dashed',
|
|
color:'#BEC3DA'
|
|
}
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle:{
|
|
type:'dashed',
|
|
color:'#BEC3DA'
|
|
}
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: '当前温度',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
itemStyle:{
|
|
color:'#2F8EE0'
|
|
},
|
|
data: data.tem
|
|
},
|
|
],
|
|
});
|
|
window.onresize = function () {//自适应大小
|
|
myChart4.resize();
|
|
};
|
|
})
|
|
getFrdl(4).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: {},
|
|
tooltip: {},
|
|
textStyle:{
|
|
color:'#BEC3DA'
|
|
},
|
|
xAxis: {
|
|
data: data.glXz,
|
|
axisLine:{
|
|
lineStyle:{
|
|
color:'#BEC3DA',
|
|
type:'dashed'
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: "kW",
|
|
splitLine:{
|
|
show:true,
|
|
lineStyle:{
|
|
type:'dashed',
|
|
color:'#BEC3DA'
|
|
}
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle:{
|
|
type:'dashed',
|
|
color:'#BEC3DA'
|
|
}
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "当前功率",
|
|
type: "line",
|
|
data: data.glData,
|
|
itemStyle:{
|
|
color:'#2F8EE0'
|
|
},
|
|
symbol: "none", //去掉拐角点
|
|
},
|
|
],
|
|
});
|
|
window.onresize = function () {//自适应大小
|
|
myChart3.resize();
|
|
};
|
|
})
|
|
|
|
})
|
|
return{
|
|
data
|
|
}
|
|
},
|
|
components: {},
|
|
mounted() {},
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.top{
|
|
width: 100%;
|
|
height: 110px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
margin-bottom: 20px;
|
|
}
|
|
.card{
|
|
width: 24%;
|
|
height: 110px;
|
|
background-color: #2F3D8A;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
|
|
.bottom{
|
|
width: 100%;
|
|
height: 640px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
.bottom1{
|
|
width: 49.35%;
|
|
height: 300px;
|
|
background-color: #2F3D8A;
|
|
margin-bottom: 20px;
|
|
}
|
|
p{
|
|
margin-bottom: 10px;
|
|
}
|
|
.bottom1-1{
|
|
width: 100%;
|
|
height: 40px;
|
|
background-color: #374590;
|
|
padding-top: 10px;
|
|
padding-left: 10px;
|
|
}
|
|
</style>
|
|
|
|
|