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.
735 lines
18 KiB
735 lines
18 KiB
<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>
|
|
<p style="color: #cccccc">当前温度</p>
|
|
<h1>{{ data.temp }}℃</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="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, getSb} from '../../../api/emonitor/api'
|
|
import {onMounted, reactive} from "vue";
|
|
import * as echarts from 'echarts';
|
|
export default {
|
|
name: "frdl",
|
|
setup() {
|
|
let data = reactive({
|
|
totwh:'-- ',
|
|
totp:'-- ',
|
|
temp:'-- ',
|
|
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:'',
|
|
form:{
|
|
device: 4
|
|
},
|
|
devArr:'',
|
|
deviceId: 4,
|
|
})
|
|
onMounted(() => {//需要获取到element,所以是onMounted的Hook
|
|
getSbFun()
|
|
getFrldFun()
|
|
getFrdlFun()
|
|
})
|
|
|
|
//渲染发热电缆数据
|
|
function getFrldFun(){
|
|
getFrld(data.deviceId).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: {},
|
|
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.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: {},
|
|
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.tem=res.temps
|
|
|
|
|
|
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: {
|
|
data: ['当前温度'],
|
|
textStyle:{
|
|
color:'#F5901A'
|
|
}
|
|
},
|
|
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:'#F5901A'
|
|
},
|
|
data: data.tem
|
|
},
|
|
],
|
|
});
|
|
window.onresize = function () {//自适应大小
|
|
myChart4.resize();
|
|
};
|
|
})
|
|
}
|
|
function getFrdlFun(){
|
|
getFrdl(data.deviceId).then((res)=>{
|
|
console.log('1',res)
|
|
if(res.data!=null){
|
|
data.tempIn=res.data.tempIn
|
|
data.tempOut=res.data.tempOut
|
|
data.temp=res.data.temp
|
|
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:{
|
|
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: "none", //去掉拐角点
|
|
markPoint: {
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
color: '#fff',
|
|
// fontSize: 9
|
|
// borderColor: '#000',
|
|
// borderWidth: 1,
|
|
}
|
|
}
|
|
},
|
|
data: [
|
|
{type: "max", name: "最大值"},
|
|
{type: "min", name: "最小值"}
|
|
]
|
|
},
|
|
},
|
|
],
|
|
});
|
|
window.onresize = function () {//自适应大小
|
|
myChart3.resize();
|
|
};
|
|
})
|
|
}
|
|
|
|
|
|
//获取发热电缆设备
|
|
function getSbFun(){
|
|
getSb().then((res)=>{
|
|
console.log('获取设备',res.data)
|
|
for(let i = 0;i < res.data.length;i++){
|
|
if(res.data[i].modelName == '发热电缆'){
|
|
data.devArr = res.data[i].children
|
|
}
|
|
}
|
|
console.log('devArr',data.devArr)
|
|
})
|
|
}
|
|
//切换设备
|
|
function selectDevice(id){
|
|
console.log(id)
|
|
data.deviceId = id;
|
|
getFrldFun()
|
|
getFrdlFun()
|
|
}
|
|
|
|
return{data,selectDevice}
|
|
}
|
|
};
|
|
|
|
|
|
</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;
|
|
}
|
|
.green{
|
|
color: #14FF00;
|
|
}
|
|
.red{
|
|
color: red;
|
|
}
|
|
</style>
|
|
|
|
|