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 {dateFormat, numToStr} from '@/utils'
import {mapState} from 'vuex';
import {qryElecMeterByDate, qryWaterMeterByDate} from "@/api/device/elecMeterH";
import {DateTool} from "@/utils/DateTool";

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: [
        {
          name: "公共设施",
          color: "#14c5f2",
          value: 500,
        },
        {
          name: "空调",
          color: "#14c5f2",
          value: 400,
        },
        {
          name: "照明",
          color: "#14c5f2",
          value: 300,
        },
        {
          name: "电梯",
          color: "#14c5f2",
          value: 100,
        },
        {
          name: "其他",
          color: "#14c5f2",
          value: 100,
        },
      ],
      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
            }
          }
        },
        legend: {
          data: ["用电量", "当日最高负荷"],
          textStyle: {
            color: "#ffffff"
          }
        },
        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'
            }
          },
        },
          {
            type: "value",
            name: "kW",
            position: "right",
            splitLine: {
              show: false
            },
          }
        ],
        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)
          },
          {
            name: "当日最高负荷",
            type: "line",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, //平滑曲线显示
            itemStyle: {
              color: "#F5D6AD",
              borderColor: "#fff",
              borderWidth: 3
            },
            lineStyle: {
              color: "#F5D6AD"
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: "#A18C74"
              },
                {
                  offset: 1,
                  color: "transparent"
                }
              ])
            },
            markLine: {
              symbol: 'none',
              silent: true,
              lineStyle: {normal: {type: 'dashed'}},
              label: {position: 'start'},
              data: [
                {
                  yAxis: 190,
                  lineStyle: {width: 1.656, color: '#ff6367'},
                  label: {show: false}
                },
              ]
            },
            markPoint: {
              silent: true,
              data: [
                {
                  yAxis: 190,
                  x: '100%',
                  symbolSize: 0.1,
                  label: {
                    textStyle: {color: '#F59A23'},
                    fontSize: 12,
                    position: 'left',
                    formatter: '历史最高负荷'
                  }
                },
              ]
            },
            data: this.lineData.map(item => item.yData2)
          },
        ]
      }
    }
  },
  watch: {
    areaType() {
      this.getSocData()
    }
  },
  mounted() {
    this.getSocData()
  },
  methods: {
    getDatesOfLastTenDays() {
      var dates = [];
      var today = new Date();
      for (var i = 1; i < 11; i++) {
        var pastDate = new Date(today);
        pastDate.setDate(today.getDate() + i); // 减去i天
        var formattedDate = dateFormat(pastDate, 'MM-dd');
        dates.push(formattedDate);
      }
      return dates.map(item => ({
        xData: item,
        yData1: parseFloat(((Math.random() * 100 + 200)).toFixed(1)),
        yData2: parseFloat(((Math.random() * 100 + 100)).toFixed(1))
      }));
    },
    getSocData() {
      this.lineData = this.getDatesOfLastTenDays()
      this.getMeterElecWater()
      this.ranking = this.ranking.map((item, index) => ({
        ...item,
        value: Math.floor(Math.random() * 100 + (index + 1) * 100)
      })).reverse();
    },
    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.elecQuantity)
      water.value = numToStr(waterMeter.waterQuantity)
      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>