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.
581 lines
14 KiB
581 lines
14 KiB
<template>
|
|
<div class="app-container home">
|
|
<div class="top">
|
|
<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>
|
|
<p style="color: #cccccc">日用电量</p>
|
|
<h1>{{data.eday}}kWh</h1>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div><img src="../../../assets/images/用电量.png"></div>
|
|
<div>
|
|
<p style="color: #cccccc">月用电量</p>
|
|
<h1>{{data.emonth}}kWh</h1>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div><img src="../../../assets/images/用电量.png"></div>
|
|
<div>
|
|
<p style="color: #cccccc">累计用电量</p>
|
|
<h1>{{data.totwh}}kWh</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mid">
|
|
<div class="mid1">
|
|
<div class="mid1-1">
|
|
当前功率
|
|
</div>
|
|
<div id="myEcharts1" style="width: 100%; height: 88.6%"></div>
|
|
</div>
|
|
<div class="mid2">
|
|
<div class="mid2-1">
|
|
当前功率总览
|
|
</div>
|
|
<div id="myEcharts2" style="width: 100%; height: 88.6%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="bottom1-1">
|
|
今日用电量总览
|
|
</div>
|
|
<div id="myEcharts3" style="width: 100%; height: 88.6%"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script name="Index">
|
|
import {getData , getZdb} from '../../../api/emonitor/api'
|
|
import { onMounted ,onUnmounted ,reactive } from "vue";
|
|
import * as echarts from 'echarts';
|
|
export default {
|
|
name: "db",
|
|
setup() {
|
|
let data = reactive({
|
|
totp:'-- ',
|
|
totwh:'-- ',
|
|
eday:'-- ',
|
|
emonth:'-- ',
|
|
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"
|
|
],
|
|
fdlData:'',
|
|
fdlXz:'',
|
|
})
|
|
// function getData() {
|
|
// glData(13).then((res)=>{
|
|
// console.log(res.data)
|
|
// })
|
|
// }
|
|
// return{
|
|
// getData
|
|
// },
|
|
|
|
onMounted(() => {
|
|
//需要获取到element,所以是onMounted的Hook
|
|
getData(13).then((res)=>{
|
|
console.log(res)
|
|
if(res.data!=null){
|
|
data.totp=res.data.totp
|
|
data.totwh=res.data.totwh
|
|
data.eday=res.data.eday
|
|
data.emonth=res.data.emonth
|
|
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 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();
|
|
});
|
|
|
|
//当前功率折线图
|
|
let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2"));
|
|
if (myChart2){
|
|
myChart2.dispose()
|
|
}
|
|
myChart2 = echarts.init(document.getElementById("myEcharts2"));
|
|
myChart2.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'
|
|
},
|
|
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)"}
|
|
])
|
|
}
|
|
}, //设置折线区域渐变颜色
|
|
symbol: "circle", //去掉拐角点
|
|
markPoint: {
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
color: '#fff',
|
|
// fontSize: 9
|
|
// borderColor: '#000',
|
|
// borderWidth: 1,
|
|
}
|
|
}
|
|
},
|
|
data: [
|
|
{type: "max", name: "最大值"},
|
|
{type: "min", name: "最小值"}
|
|
]
|
|
},
|
|
},
|
|
],
|
|
});
|
|
window.addEventListener("resize", function () {
|
|
myChart2.resize();
|
|
});
|
|
})
|
|
|
|
//今日用电量柱状图
|
|
getZdb(13).then((res)=>{
|
|
console.log(res)
|
|
let arr = []
|
|
let brr = []
|
|
for (let i in res.data){
|
|
arr.push(res.data[i].hour)
|
|
brr.push(res.data[i].useElectric)
|
|
}
|
|
data.fdlData=brr
|
|
data.fdlXz=arr
|
|
let myChart3 = echarts.getInstanceByDom(document.getElementById("myEcharts3"));
|
|
if (myChart3){
|
|
myChart3.dispose()
|
|
}
|
|
myChart3 = echarts.init(document.getElementById("myEcharts3"));
|
|
myChart3.setOption({
|
|
title: {},
|
|
tooltip: {},
|
|
grid:{
|
|
show: true,
|
|
top: '20%',
|
|
bottom:'15%',
|
|
left:'5%',
|
|
right:'3%',
|
|
borderWidth: 1,
|
|
borderColor: '#767da1',
|
|
},
|
|
legend:{
|
|
top: 10,
|
|
data:['今日用电量'],
|
|
textStyle: {
|
|
color: "white" //标题的颜色
|
|
},
|
|
},
|
|
textStyle:{
|
|
color:'#BEC3DA'
|
|
},
|
|
xAxis: {
|
|
type:'category',
|
|
data:data.fdlXz,
|
|
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.fdlData,
|
|
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 () {//自适应大小
|
|
myChart3.resize();
|
|
};
|
|
})
|
|
|
|
})
|
|
return {
|
|
data
|
|
}
|
|
},
|
|
|
|
components: {},
|
|
mounted() {},
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
p{
|
|
margin-bottom: 10px;
|
|
}
|
|
.top{
|
|
width: 100%;
|
|
height: 110px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.card{
|
|
width: 24.4%;
|
|
height: 100%;
|
|
background-color: #2F3D8A;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
.mid{
|
|
width: 100%;
|
|
height: 350px;
|
|
margin-top: 12px;
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.mid1{
|
|
width: 24.4%;
|
|
height: 100%;
|
|
background-color: #2F3D8A;
|
|
}
|
|
.mid1-1{
|
|
width: 100%;
|
|
height: 40px;
|
|
background-color: #374590;
|
|
padding-top: 10px;
|
|
padding-left: 10px;
|
|
}
|
|
.mid2{
|
|
width: 74.8%;
|
|
height: 100%;
|
|
background-color: #2F3D8A;
|
|
}
|
|
.mid2-1{
|
|
width: 100%;
|
|
height: 40px;
|
|
background-color: #374590;
|
|
padding-top: 10px;
|
|
padding-left: 10px;
|
|
}
|
|
.bottom{
|
|
width: 100%;
|
|
height: 350px;
|
|
background-color: #2F3D8A;
|
|
}
|
|
//.bottom1{
|
|
// width: 100%;
|
|
// height: 100%;
|
|
//
|
|
//}
|
|
.bottom1-1{
|
|
width: 100%;
|
|
height: 40px;
|
|
background-color: #374590;
|
|
padding-top: 10px;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
@media (max-width:960px) {
|
|
.app-container{
|
|
padding: 8px;
|
|
}
|
|
.card{
|
|
p{
|
|
font-size: 14px;
|
|
}
|
|
h1{
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
.mid1-1,.mid2-1,.bottom1-1{
|
|
font-size: 14px;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|