jiahe_device/src/views/energySources/component/all.vue

<template>
  <div class="box all">

    <tit :title="'总量分析'" style="width:8.1rem">
      <div class="tit-r">截至{{ $moment().format('YYYY/M/D, HH:mm') }}</div>
    </tit>
    <tit style="width: 50%" class="tit2">
      <template v-slot:title>
        <span style="font-size: 0.14rem">连续两个月用量对比</span>
      </template>
      <div class="tit-r">
        <span style="color: #fff;">选择时间：</span>
        <el-date-picker size="mini" v-model="selectMonth" type="month" placeholder="选择月" @change="changeMonth"
          :clearable="false" style="width: 1.2rem;margin-right: 0.26rem;" format="yyyy-MM" value-format="yyyy-MM">
        </el-date-picker>
        单位：kw·h
      </div>
    </tit>
    <div>
      <div class="card-box">
        <div class="card">
          <div class="card-tit">{{ $moment().format('YYYY') }}年</div>
          <div class="card-num">
            <div class="card-num-item" v-for="(item, index) in yearNum" :key="index">
              <div :style="item === '.' ? 'background: transparent' : ''"></div>
              <div :style="item === '.' ? 'background: transparent' : ''"></div>
              <div style="color: #CADEFF;">
                {{ item }}
              </div>
            </div>
            <span>万</span>
          </div>
          <div class="card-unit">kw · h</div>
        </div>
        <div class="card">
          <div class="card-tit">{{ $moment().format('M') }}月</div>
          <div class="card-num">
            <div class="card-num-item" v-for="(item, index) in monthNum" :key="index">
              <div :style="item === '.' ? 'background: transparent' : ''"></div>
              <div :style="item === '.' ? 'background: transparent' : ''"></div>
              <div style="color: #00FFC6;">
                {{ item }}
              </div>
            </div>
            <span>万</span>
          </div>
          <div class="card-unit">kw · h</div>
        </div>
        <div class="card">
          <div class="card-tit">昨日</div>
          <div class="card-num">
            <div class="card-num-item" v-for="(item, index) in yesterdayNum" :key="index">
              <div :style="item === '.' ? 'background: transparent' : ''"></div>
              <div :style="item === '.' ? 'background: transparent' : ''"></div>
              <div style="color: #E0B42F;">
                {{ item }}
              </div>
            </div>
            <!-- <span>万</span> -->
          </div>
          <div class="card-unit">kw · h</div>
        </div>
        <div class="card">
          <div class="card-tit">今日</div>
          <div class="card-num">
            <div class="card-num-item" v-for="(item, index) in todayNum" :key="index">
              <div :style="item === '.' ? 'background: transparent' : ''"></div>
              <div :style="item === '.' ? 'background: transparent' : ''"></div>
              <div style="color: #00FFFC;">
                {{ item }}
              </div>
            </div>
            <!-- <span>万</span> -->
          </div>
          <div class="card-unit">kw · h</div>
        </div>
      </div>
      <div id="mainAll"></div>
    </div>

  </div>
</template>

<script>
import tit from "./tit.vue";
import { mapGetters } from "vuex";
import { getTotalElectricity, getMonthElectricity } from "@/api/energySources/energySources"
export default {
  props: {
    deptName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      num: 0,
      yearNum: 0,
      monthNum: 0,
      yesterdayNum: 0,
      todayNum: 0,
      selectMonth: '',
      currentMonthData: [120, 200, 150, 80, 70, 110, 130],
      lastMonthData: [150, 120, 180, 60, 40, 130, 150],
      timeFun: null
    };
  },
  components: {
    tit
  },
  created() {
    this.selectMonth = this.$moment().format('YYYY-MM')
    if (this.deptName) {
      this.getTotal()
      this.$nextTick(() => {
        this.getTrend()
      })
      this.timeFun = setInterval(() => {
        this.getTotal()
      }, 300000)
    }
  },
  beforeDestroy() {
    clearInterval(this.timeFun)
  },
  computed: {
    ...mapGetters(["userInfo", "permission"]),
  },
  methods: {
    getTotal() {
      getTotalElectricity({ manufacturerBrand: this.deptName }).then(res => {
        let data = res.data.data
        this.yearNum = data.currentYear.toString().split('')
        this.monthNum = data.currentMonth.toString().split('')
        this.yesterdayNum = data.yesterday.toString().split('')
        this.todayNum = data.today.toString().split('')
      })
    },
    getTrend() {
      this.currentMonthData = [];
      this.lastMonthData = []
      getMonthElectricity({ manufacturerBrand: this.deptName, currentMonth: this.selectMonth }).then(res => {
        let currData = res.data.data.currentMonth
        let lastData = res.data.data.lastMonth
        Object.keys(currData).forEach((key) => {
          this.currentMonthData.push(currData[key])
        });
        Object.keys(lastData).forEach((key) => {
          this.lastMonthData.push(lastData[key])
        });
        this.$nextTick(() => {
          this.echartsInit()
        })
      })
    },
    changeMonth() {
      this.getTrend()
    },
    echartsInit() {
      const chartDom = document.getElementById('mainAll');
      const myChart = this.$echarts.init(chartDom);
      const currentMonthDays = this.$moment(this.selectMonth).daysInMonth()
      const xdata = Array(currentMonthDays).fill().map((_, i) => i + 1)
      const option = {
        // title: {
        //   show: false,
        // },
        grid: {
          left: "0",
          right: "0",
          bottom: "0",
          containLabel: true,
        },
        legend: {
          data: ['本月', '上月'],
          // right: 0,
          top: 12,
          textStyle: {
            color: "#fff"
          },
          itemWidth: 10,
          itemHeight: 4,
        },
        xAxis: {
          type: "category",
          data: xdata,
          axisLine: {
            lineStyle: {
              color: "#9fa9b5",
            },
          },
          axisTick: {
            show: true,
            inside: true,
          },
          axisLabel: {
            textStyle: {
              fontFamily: "Microsoft YaHei",
            },
          },
        },
        yAxis: {
          type: "value",
          show: true, //是否显示y轴
          axisLabel: {
            //y轴文字的配置
            textStyle: {
              color: "#9fa9b5",
            },
          },
          axisTick: {
            show: true,
            inside: true,
            lineStyle: {
              color: "#9fabc1",
            },
          },
          // 刻度线
          axisLine: {
            show: true,
            lineStyle: {
              color: "#9fabc1",
            },
          },
          // 线
          splitLine: {
            show: true,
            lineStyle: {
              color: "#263764",
              type: "soild",
            },
          },
        },
        series: [
          {
            name: "本月",
            type: "bar",
            barWidth: "10",
            data: this.currentMonthData,
            // data: [120, 200, 150, 80, 70, 110, 130],
            itemStyle: {
              normal: {
                color: "#0084FF",
                // label: {
                //   show: true,
                //   position: "top",
                //   textStyle: {
                //     //数值样式
                //     color: "#0084FF",
                //     fontSize: 14,
                //   },
                // },
              },
            },
          },
          {
            name: "上月",
            type: "bar",
            barWidth: "10",
            data: this.lastMonthData,
            // data: [120, 200, 150, 80, 70, 110, 130],
            itemStyle: {
              normal: {
                color: "#10efbd",
                // label: {
                //   show: true,
                //   position: "top",
                //   textStyle: {
                //     //数值样式
                //     color: "#0084FF",
                //     fontSize: 14,
                //   },
                // },
              },
            },
          },
        ],
      }
      myChart.setOption(option);
    }
  }
};
</script>
<style lang="scss" scoped>
.all /deep/ .el-input__inner {
  background: transparent !important;
  color: #fff !important;
  border-radius: 0;
  border-color: rgba($color: #fff, $alpha: 0.2) !important;
  height: 0.24rem !important;
}

.all /deep/ .el-input__icon {
  line-height: 0.24rem !important;
}

.box {
  width: calc(100vw - 0.52rem);
  height: 2.08rem;
  box-sizing: border-box;
  background: url("../../../../public/img/energySources/all.png");
  background-size: 100% 100%;
  position: relative;
  padding: 0.54rem 0.22rem 0 0.22rem;

  .tit2 {
    left: 9.04rem;
  }

  .tit-r {
    font-size: 0.14rem;
    color: rgba($color: #fff, $alpha: 0.4);
    margin-top: 0.04rem;
  }


  #mainAll {
    float: left;
    width: 50%;
    height: 1.8rem;
    margin: -0.42rem 0 0 0.1rem;
  }

  .card-box {
    display: flex;
    margin-top: 0.16rem;
    float: left;
    width: 48%;

    .card {
      width: 2.06rem;
      height: 1.14rem;
      background: rgba($color: #0DE5FF, $alpha: 0.1);
      margin-right: 0.08rem;
      padding: 0.14rem 0 0 0.14rem;
      box-sizing: border-box;

      &:nth-child(4) {
        margin: 0 !important;
      }

      .card-tit {
        font-weight: bold;
        color: #FFFFFF;
        font-size: 0.16rem;
        margin-bottom: 0.08rem;
      }

      .card-num {
        display: flex;

        span {
          line-height: 0.36rem;
          font-size: 0.18rem;
          font-family: Acumin Variable Concept;
          font-weight: bold;
          color: #CADEFF;
        }

        .card-num-item {
          width: 0.22rem;
          height: 0.36rem;
          position: relative;
          margin-right: 0.02rem;

          &>div {
            width: 100%;
            background: rgba($color: #0090FF, $alpha: 0.5);
          }

          &>div:nth-child(1) {
            height: 0.17rem;
            margin-bottom: 0.01rem;
          }

          &>div:nth-child(2) {
            height: 0.17rem;
            margin-top: 0.01rem;
          }

          &>div:nth-child(3) {
            height: 0.4rem;
            line-height: 0.4rem;
            position: absolute;
            top: 0;
            left: 0;
            background: transparent;
            text-align: center;
            font-size: 0.26rem;
            font-family: Acumin-Pro-Condensed-Black-2;
            font-weight: bold;
          }
        }
      }

      .card-unit {
        font-size: 0.16rem;
        margin-top: 0.06rem;
        font-family: Acumin-Pro-Condensed-Black-2;
        font-weight: bold;
        color: rgba($color: #fff, $alpha: 0.6);
      }
    }
  }
}
</style>