zhgdyun/src/views/projectAdmin/fourEngin/carbon/rightCenter.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>