zhgdyun/src/views/projectAdmin/fourEngin/carbon/rightBottom.vue

<template>
  <Card title="用电用水">
    <div class="contentBox">
      <!-- 上结构 -->
      <div class="topWater">
        <div   @click="select(1)" :class="index ==1?'electricDiv':'waterDiv'">用水</div>
        <div  @click="select(2)" :class="index ==2?'electricDiv':'waterDiv'">用电</div>
        <div class="DateTime">
          <el-date-picker
            v-model="time1"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            size="mini"
          ></el-date-picker>
        </div>
      </div>
      <!-- 暂无数据结构 -->
      <div id="waterMain" v-if="show"></div>
      <div style="margin-top: 50px;" 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 Card from '../components/Card.vue'
import echarts from 'echarts4'
import { getwaterMeterListApi, selectWaterMeterStatisticsApi, getCurrentMonthMeterRecordApi } from '@/assets/js/api/waterManage'
export default {
  components: { Card },
  data() {
    return {
      index: 1,
      time1:'',
      show: true,
      monthWaterList: '',
      count: '',
      waterMeter: '',
      formInline: {
        yearTime: '',
        waterMeterNo: '',
        projectSn: this.$store.state.projectSn
      }
    }
  },
  mounted() {
    this.wEacharts()
  },
  methods: {
    //用水/用电按钮切换
    select(i) {
      this.index = i;
    },
     
    //echart图表
    async wEacharts() {  
      const res = await getCurrentMonthMeterRecordApi(this.formInline)
      this.waterMeter = res.result.waterMeter
      if (this.waterMeter === null) {
        this.show = false
      }
      this.count = res.result.count
      const res2 = await selectWaterMeterStatisticsApi(this.formInline)
      this.monthWaterList = res2.result.monthWaterList
      const res3 = await getwaterMeterListApi({ projectSn: this.$store.state.projectSn })
      console.log('res3', res3)

      // 基于准备好的dom，初始化echarts实例
      let waterEch = echarts.init(document.getElementById('waterMain'))
      let xData = (function() {
        let data = []
        for (let i = 1; i < 13; i++) {
          data.push(i + '月')
        }
        return data
      })()

      let option = {
        title: {
          x: '4%',

          textStyle: {
            color: '#fff',
            fontSize: '8'
          },
          subtextStyle: {
            color: '#90979c',
            fontSize: '8'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            textStyle: {
              color: '#fff'
            }
          }
        },
        grid: {
          // 图表距离边框的距离，可用百分比和数字（px）配置
          top: '5%',
          left: '4%',
          right: '4%',
          bottom: '25%',
          containLabel: true
        },

        legend: {
          x: '4%',
          top: '5%',
          bottom: '0%',
          textStyle: {
            color: '#90979c'
          }
        },

        calculable: true,
        xAxis: [
          {
            type: 'category',

            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitArea: {
              show: false
            },
            axisLabel: {
              interval: 0
            },
            data: xData
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255, 255, 255,0.3)',
                type: 'dashed'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitArea: {
              show: false
            }
          }
        ],
        // "dataZoom": [{
        //     "show": true,
        //     "height": 30,
        //     "xAxisIndex": [
        //         0
        //     ],
        //     bottom: 30,
        //     "start": 10,
        //     "end": 80,
        //     // handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
        //     handleSize: '110%',
        //     handleStyle:{
        //         color:"#d3dee5",

        //     },
        //       textStyle:{
        //         color:"#fff"},
        //       borderColor:"#90979c"

        // }, {
        //     "type": "inside",
        //     "show": true,
        //     "height": 15,
        //     "start": 1,
        //     "end": 35
        // }],
        series: [
          {
            type: 'bar',
            stack: '总量',
            barMaxWidth: 25,
            barGap: '10%',
            symbol: 'circle',
            itemStyle: {
              normal: {
                color: '#6EE4F0',
                lineStyle: {
                  color: '#fff'
                },
                label: {
                  show: false,
                  textStyle: {
                    color: '#fff'
                  },
                  position: 'inside',
                  formatter: function(p) {
                    return p.value > 0 ? p.value : ''
                  }
                }
              }
            },
            data: this.waterMeter
          },

          {
            type: 'bar',
            stack: '总量',
            itemStyle: {
              normal: {
                color: '#E7622A',
                barBorderRadius: 0,
                label: {
                  show: false,
                  position: 'inside',
                  formatter: function(p) {
                    return p.value > 0 ? p.value : ''
                  }
                }
              }
            },
            data: this.count
          },
          {
            type: 'line',
            symbolSize: 8,
            symbol: 'circle',
            smooth: true,
            itemStyle: {
              normal: {
                color: '#fff',
                barBorderRadius: 2,
                lineStyle: {
                  color: '#FFC303'
                },
                label: {
                  show: false,
                  position: 'bottom',
                  formatter: function(p) {
                    return p.value > 0 ? p.value : ''
                  }
                }
              }
            },
            data: [1036, 3693, 2962, 3810, 2519, 1915, 1748, 4675, 6209, 4323, 2865, 4298]
          }
        ]
      }
      waterEch.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
.contentBox {
  box-sizing: border-box;
  padding-top: 20px;
  width: 100%;
  height: 100%;
  .topWater {
    width: 100%;
    height: 20%;
    display: flex;
    .waterDiv {
      cursor:pointer;
      display: inline-block;
      // margin-top: 5px;
      // padding-top: 15px;
      width: 80px;
      height: 35px;
      text-align: center;
      background-image: url(../assets/images/common/bg_water.png);
      background-repeat: no-repeat;
      background-size: 100%;
      font-size: 16px;
      line-height: 38px;
      margin: 0 10px 0 0;
      color: #fff;
      font-size: 14px;
    }

    .electricDiv {
      cursor:pointer;
      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: 38px;
      margin: 0 10px 0 0;
      color: #fff;
      font-size: 14px;
    }
    .DateTime {
       cursor:pointer;
      flex: 1;
      // margin-left: 80px;
      margin-top: 4px;
      ::v-deep .el-date-editor--daterange.el-input__inner {
        width: 230px;
        height: 30px;
        background-color: #182337;
        border: 1px solid #264b5e;
        margin-left: 50px;
      }
      ::v-deep .el-range-input {
         cursor:pointer;
        margin-left: 13px;
        background-color: #182337;
        color: #6ee4f0;
      }
      ::v-deep .el-date-editor {
         cursor:pointer;
        .el-range__icon {

          line-height: 20px;
          color: #6ee4f0;
        }
        .el-range-separator {
           cursor:pointer;
          line-height: 20px;
          color: #757d88;
        }
        .el-range__close-icon {
           cursor:pointer;
          color: #757d88;
          line-height: 20px;
        }
        .el-range-separator{
          margin-left: 10px;
        }
      }
    }
  }
  #waterMain {
    width: 100%;
    height: 100%;
  }
}
</style>