zhny_ui/ems-ui-cloud/src/views/largeScreen/soc/right.vue

<template>
  <div>
    <CusModule title="能耗统计">
      <div class="soc-stats-container">
        <div v-for="i in socList" :key="i.name" class="soc-stats-item" :style="{ backgroundImage: `url(${i.image})` }">
          <div class="soc-stats-info">
            <div class="mb-1">
              <span class="soc-stats-value">{{ i.value }}</span>
              <span class="unit">{{ i.unit }}</span>
            </div>
            <div class="soc-stats-label">
              {{ i.name }}
            </div>
          </div>
        </div>
      </div>
    </CusModule>
    <CusModule class="module-top" title="用能排名">
      <div class="soc-lst">
        <div v-for="(item, index) in ranking" :key="item.name" class="soc-itm">
          <div class="soc-num">
            {{ index + 1 }}
          </div>
          <div class="soc-dtl">
            <div class="txt-sm">
              {{ item.name }}
            </div>
            <CusProgress :value="item.value" :total="ranking.reduce((a, b) => a + b.value, 0)" :color="item.color"
                         :labelWidth="95" unit="kW·h" showLabel></CusProgress>
          </div>
        </div>
      </div>
    </CusModule>
    <CusModule class="module-top" title="用能趋势预测">
      <BaseChart height="350px" width="100%" :option="lineOptions"/>
    </CusModule>
  </div>
</template>
<script>
import CusModule from '../components/CusModule.vue';
import CusProgress from '../components/CusProgress.vue';
import BaseChart from '@/components/BaseChart/index.vue'
import * as echarts from 'echarts'
import {array2Map, numToStr} from '@/utils'
import {mapState} from 'vuex';
import {listByFacs, qryElecMeterByDate, qryWaterMeterByDate} from "@/api/device/elecMeterH";
import {DateTool} from "@/utils/DateTool";
import _ from 'lodash'
import {listForecastConsumeDateRange} from "@/api/prediction/forecastConsume";

export default {
  name: 'SocRight',
  data() {
    return {
      socList: [
        {
          name: "电",
          image: require("@/assets/images/soc/item1.png"),
          unit: "kW·h",
        },
        // {
        //   name: "燃气",
        //   image: require("@/assets/images/soc/item2.png"),
        //   value: 7945,
        //   unit: "kg",
        // },
        {
          name: "水",
          image: require("@/assets/images/soc/item3.png"),
          unit: "吨",
        },
      ],
      ranking: [],
      lineData: []

    }
  },
  components: {
    CusModule,
    CusProgress,
    BaseChart,
  },
  computed: {
    ...mapState('userState', ['areaType']),
    lineOptions() {
      return {
        grid: {
          top: "10%",
          bottom: "10%",//也可设置left和right设置距离来控制图表的大小
          contain: true
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            label: {
              show: true
            }
          }
        },
        xAxis: {
          data: this.lineData.map(item => item.xData),
          axisLine: {
            show: true, //隐藏X轴轴线
          },
          axisTick: {
            show: true //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
          },

        },
        yAxis: [{
          type: "value",
          name: "kW·h",
          splitLine: {
            show: true,
            lineStyle: {
              color: '#334E5E'
            }
          },
        }],
        series: [
          {
            name: "用电量",
            type: "bar",
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "#21C3E8"
                },
                  {
                    offset: 0.7,
                    color: "#1484A1"
                  },
                  {
                    offset: 1,
                    color: "#0B2B38"
                  }
                ])
              }
            },
            data: this.lineData.map(item => item.yData1)
          },
        ]
      }
    }
  },
  watch: {
    areaType() {
      this.getSocData()
    }
  },
  mounted() {
    this.getSocData()
  },
  methods: {
    async getDeviceElecMeter() {
      const params = {
        startRecTime: DateTool.now(DateTool.DateFormat.YYYY_MM_DD_00_00_00),
        endRecTime: DateTool.now(DateTool.DateFormat.YYYY_MM_DD_23_59_59),
        meterCls: 45,
        areaCode: this.areaType || -1,
        facsCategory: 'Z',
      };
      listByFacs(params).then(response => {
        const energyUse = response.data.map(item => ({
          name: item.objName,
          color: "#14c5f2",
          value: item.quantity || 0,
        }));
        this.ranking = _.slice(_.orderBy(energyUse, ['value'], ['desc']), 0, 5);
      })
    },
    async getDatesOfLastTenDays() {
      const next5Day = DateTool.addDays(DateTool.now(), 4);
      const {data} = await listForecastConsumeDateRange({
        areaCode: this.areaType,
        startRecTime: DateTool.now(),
        endRecTime: next5Day,
      })
      const dates = DateTool.getDayOfRange(DateTool.now(), next5Day);
      const mapIndex = array2Map(data, "date");

      this.lineData = dates.map(item => ({
        xData: item,
        yData1: mapIndex[item] ? mapIndex[item].elecUseQuantity : 0
      }));
    },
    getSocData() {
      this.lineData = this.getDatesOfLastTenDays()
      this.getMeterElecWater()
      this.getDeviceElecMeter()
    },
    async getMeterElecWater() {
      const {data: elecMeter} = await qryElecMeterByDate(DateTool.now(), this.areaType)
      const {data: waterMeter} = await qryWaterMeterByDate(DateTool.now(), this.areaType)
      const [elec, water] = this.socList
      elec.value = numToStr(elecMeter.quantity)
      water.value = numToStr(waterMeter.quantity)
      this.socList = [elec, water]
    },

  }
}
</script>
<style lang='scss' scoped>
@import url("../index.scss");

.soc-stats-container {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding: 0 40px;

  .soc-stats-item {
    position: relative;
    width: 120px;
    height: 138px;
    background-size: cover;

    .soc-stats-info {
      position: absolute;
      bottom: -2px;
      width: 100%;
      text-align: center;

      .soc-stats-value {
        font-size: 18px;
        font-weight: bold;
        color: #06E3F9;
      }

      .soc-stats-label {
        color: #B3E3E8;
        font-size: 14px;
        margin-top: 2px;
      }
    }
  }
}

.soc-lst {
  height: 100%;
  padding-top: 6px;
  padding-bottom: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;

  .soc-itm {
    width: 332px;
    height: 45px;
    background-image: url('~@/assets/images/soc/r2-list.png');
    background-repeat: no-repeat;
    display: flex;
    align-items: center;

    .soc-num {
      width: 53px;
      margin-right: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .soc-dtl {
      padding-right: 2px;
      width: 100%;

      .txt-sm {
        color: #B3E3E8;
        font-size: 12px;
        margin-bottom: 5px;
      }
    }
  }
}

.seamless-header {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  color: #7DBAFF;
  background: #1B4A64;
  font-size: 16px;

  > div:first-of-type,
  > div:last-of-type {
    flex-basis: 35%;
  }

  > div {
    text-align: center;
  }
}

.seamless-warp {
  overflow: hidden;
  height: 200px;

  .seamless-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;

    &:nth-child(odd) {
      background: #000;
    }

    > div:first-of-type,
    > div:last-of-type {
      flex-basis: 38%;
    }

    > div {
      text-align: center;
      font-size: 13px;
    }
  }
}
</style>