368 lines
10 KiB
Vue
368 lines
10 KiB
Vue
<template>
|
||
<Card title="能耗统计">
|
||
<div class="contentBox">
|
||
<!-- 能耗统计结构 -->
|
||
<div class="topWater">
|
||
<div class="leftWaterDiv">
|
||
<div class="waterDiv">
|
||
<span class="span1">本月用电</span>
|
||
<span class="numberStyle">{{realTimeData.monthUserWater}}</span>
|
||
<span>kwh</span>
|
||
</div>
|
||
|
||
<div class="waterDiv">
|
||
<span class="span2" id="spanes">用电超标值 </span>
|
||
<span class="numberStyle">{{realTimeData.exceedQuotaNum}}</span>
|
||
<span >kwh</span>
|
||
</div>
|
||
<div class="waterDiv">
|
||
<span class="span3">累计节约电量</span>
|
||
<span class="numberStyle">{{realTimeData.alarmNum}}</span>
|
||
<span>kwh</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rightWaterDiv">
|
||
<div class="waterDiv">
|
||
<span class="span1">本月用水</span>
|
||
<span class="numberStyle">{{realTimeData.monthUserWater}}</span>
|
||
<span>t</span>
|
||
</div>
|
||
|
||
<div class="waterDiv">
|
||
<span class="span2">用水超标值</span>
|
||
<span class="numberStyle">{{realTimeData.exceedQuotaNum}}</span>
|
||
<span>t</span>
|
||
</div>
|
||
<div class="waterDiv">
|
||
<span class="span3">本月报警次数</span>
|
||
<span class="numberStyle">{{realTimeData.alarmNum}}</span>
|
||
<span>次</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 年度节电趋势图 -->
|
||
<div id="bottomElectric" v-if="show"></div>
|
||
<div v-else>
|
||
<img style="margin: auto 190px;" src="@/assets/images/noData.png" alt="">
|
||
<p style="text-align: center;">暂无数据</p >
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</template>
|
||
|
||
<script>
|
||
// import {
|
||
// getwaterMeterListApi,selectWaterMeterStatisticsApi,
|
||
// getCurrentMonthMeterRecordApi,} from "@/assets/js/api/waterManage";
|
||
|
||
import {getCurrentMonthMeterRecordApi,selectWaterMeterStatisticsApi} from'@/assets/js/api/electricDevManage'
|
||
import Card from '../components/Card.vue'
|
||
import echarts from 'echarts4'
|
||
export default {
|
||
components: { Card },
|
||
data() {
|
||
// return {
|
||
// realTimeData:{
|
||
// alarmNum: 0,
|
||
// currentWaterTonnage: 0,
|
||
// exceedQuotaNum: 0,
|
||
// monthUserWater: 0,
|
||
// thresholdValue: 0
|
||
// },
|
||
// }
|
||
return {
|
||
deviceIdArr:[],
|
||
show:true,
|
||
formInline: {
|
||
yearTime: "",
|
||
ammeterNo: "",
|
||
projectSn: this.$store.state.projectSn
|
||
},
|
||
realTimeData:{
|
||
alarmNum: 0,
|
||
currentWaterTonnage: 0,
|
||
exceedQuotaNum: 0,
|
||
monthUserWater: 0,
|
||
thresholdValue: 0,
|
||
ammeterL:'',
|
||
count:'',
|
||
},
|
||
gateStatus:''
|
||
};
|
||
},
|
||
mounted() {
|
||
this.containerEcharts()
|
||
},
|
||
methods: {
|
||
|
||
async containerEcharts() {
|
||
const res= await getCurrentMonthMeterRecordApi(this.formInline)
|
||
if(res.result.ammeter===null){
|
||
this.show=false
|
||
}
|
||
this.ammeter=res.result.ammeter
|
||
this.count=res.result.count
|
||
const res1=await selectWaterMeterStatisticsApi(this.formInline)
|
||
console.log('res1',res1);
|
||
|
||
if(res1.result.monthWaterList.length===0){
|
||
this.realTimeData.monthUserWater=0
|
||
}else{
|
||
this.realTimeData.monthUserWater=res1.result.monthWaterList
|
||
}
|
||
|
||
if(res1.result.alarmList.length===0){
|
||
this.realTimeData.alarmNum=0
|
||
}else{
|
||
this.realTimeData.alarmNum=res1.result.alarmList
|
||
}
|
||
|
||
// 基于准备好的dom，初始化echarts实例
|
||
const day = echarts.init(document.getElementById('bottomElectric'))
|
||
// 指定图表的配置项和数据
|
||
// const day_options = {
|
||
// title: {
|
||
// // text: '日报表'
|
||
// // subtext: '单位：条'
|
||
// },
|
||
// tooltip: {
|
||
// trigger: 'axis',
|
||
// axisPointer : {
|
||
// // 坐标轴指示器，坐标轴触发有效
|
||
// type : 'line'
|
||
// // 默认为直线，可选为：'line' | 'shadow'
|
||
// }
|
||
// },
|
||
// xAxis: {
|
||
// type: 'category',
|
||
// boundaryGap: false,
|
||
// data: [
|
||
// '1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
|
||
// axisLabel:{
|
||
// color:"#fff"
|
||
// },
|
||
// splitLine: { lineStyle: { color: '#D0FFF6', type: 'dashed' } } //x轴
|
||
|
||
// },
|
||
// yAxis:[
|
||
// {
|
||
// type: 'value',
|
||
// axisLabel:{
|
||
// color:"#fff"
|
||
// },
|
||
// // axisLine: { show: true, lineStyle: { color: '#D0FFF6' } },
|
||
// splitLine: { lineStyle: { color: '#D0FFF6', type: 'dashed' } } // 除x轴的横轴
|
||
// },
|
||
// ],
|
||
// series: [
|
||
// {
|
||
// name: '发电趋势图',
|
||
// type: 'line',
|
||
// data: [1, 4, 5, 10, 1,4,6,6,7,9,11,12],
|
||
// smooth: true,
|
||
// Symbol:false,
|
||
// symbolSize: 0,
|
||
// itemStyle: {
|
||
// normal: {
|
||
// color:'#FFC303 ', //折线点的颜色
|
||
// // borderColor: '#ffffff', //拐点边框颜色
|
||
// // borderWidth: 2, //拐点边框大小
|
||
// },
|
||
// },
|
||
// },
|
||
|
||
// ]
|
||
// }
|
||
const day_options = {
|
||
legend: {
|
||
// 图例配置选项
|
||
orient: 'horizontal', //图例布局方式：水平 'horizontal' 、垂直 'vertical'
|
||
x: 'left', // 横向放置位置，选项：'center'、'left'、'right'、'number'（横向值 px）
|
||
y: '-2%', // 纵向放置位置，选项：'top'、'bottom'、'center'、'number'（纵向值 px）
|
||
itemGap: 90,
|
||
data: ['本年度节电趋势图', '本年度节水趋势图'],
|
||
textStyle: {
|
||
//图例文字的样式
|
||
color: '#fff',
|
||
fontSize: 10
|
||
}
|
||
},
|
||
grid: {
|
||
// 图表距离边框的距离，可用百分比和数字（px）配置
|
||
top: '15%',
|
||
left: '0%',
|
||
right: '4%',
|
||
bottom: '20%',
|
||
containLabel: true
|
||
},
|
||
|
||
xAxis: {
|
||
boundaryGap: false,
|
||
type: 'category',
|
||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||
axisLabel: {
|
||
color: '#fff'
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
}
|
||
},
|
||
|
||
yAxis: {
|
||
type:'value',
|
||
// scale:true,
|
||
min:0, // 配置 Y 轴刻度最小值
|
||
max:200, // 配置 Y 轴刻度最大值
|
||
splitNumber: 7, // 配置 Y 轴数值间隔
|
||
// boundaryGap : [ 0.2, 0.2 ],
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: 'rgba(255, 255, 255,0.3)'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle:{
|
||
type:'dashed'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
formatter: function() {
|
||
return ''
|
||
}
|
||
}
|
||
},
|
||
|
||
series: [
|
||
{
|
||
name: '本年度节水趋势图',
|
||
data: [23, 51, 61, 13, 66, 18, 90, 120, 17, 10, 83, 29],
|
||
textStyle:{
|
||
fontSize:10
|
||
},
|
||
type: 'line',
|
||
symbolSize: 0, //设置折线上圆点大小
|
||
smooth: true,
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false // 在折线拐点上显示数据
|
||
},
|
||
lineStyle: {
|
||
width: 3, // 设置虚线宽度
|
||
type: 'dotted' // 虚线'dotted' 实线'solid'
|
||
},
|
||
lineStyle: {
|
||
color: '#6EE4F0' // 折线颜色设置为0，即只显示点，不显示折线
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
{
|
||
name: '本年度节电趋势图',
|
||
data: this.ammeter,
|
||
type: 'line',
|
||
symbolSize: 0, //设置折线上圆点大小
|
||
smooth: true, // 设置折线弧度
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false // 在折线拐点上显示数据
|
||
},
|
||
lineStyle: {
|
||
width: 3, // 设置虚线宽度
|
||
type: 'dotted' // 虚线'dotted' 实线'solid'
|
||
},
|
||
lineStyle: {
|
||
color: '#E7622A ' // 折线颜色设置为0，即只显示点，不显示折线
|
||
}
|
||
}
|
||
}
|
||
}
|
||
],
|
||
color: ['#6EE4F0', '#E7622A'] // 二个折线的颜色
|
||
}
|
||
day.setOption(day_options)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.contentBox {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
.topWater {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
height: 20%;
|
||
padding-bottom: 35px;
|
||
// margin-top: 5px;
|
||
.leftWaterDiv,
|
||
.rightWaterDiv {
|
||
width: 50%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-flow: column;
|
||
text-align: center;
|
||
.waterDiv {
|
||
margin-bottom: 23px;
|
||
margin-right: 20px;
|
||
.numberStyle {
|
||
display: inline-block;
|
||
// margin-top: 5px;
|
||
// padding-top: 15px;
|
||
width: 80px;
|
||
height: 35px;
|
||
text-align: center;
|
||
background-image: url(../assets/images/common/num_bg.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
font-size: 16px;
|
||
line-height: 35px;
|
||
margin: 0 10px 0 0;
|
||
color: #fff;
|
||
font-size: 16px;
|
||
}
|
||
span {
|
||
color: #6ee4f0;
|
||
|
||
font-size: 12px;
|
||
}
|
||
.span1{
|
||
margin-right: 26px;
|
||
}
|
||
.span2{
|
||
margin-right: 14px !important;
|
||
}
|
||
.span3{
|
||
padding-right: 5px;
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
}
|
||
#bottomElectric {
|
||
width: 100%;
|
||
height: 60%;
|
||
margin-bottom: -65px;
|
||
}
|
||
}
|
||
</style>
|