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

<template>
  <div>
    <CusModule title="抄表采集率">
      <div class="soc-container">
        <div class="soc-data-point soc-left-data">
          <div>
            <span class="soc-value">{{ meterReading.actual }}</span>
            <span class="unit">个</span>
          </div>
          <div class="soc-description">实采数据</div>
        </div>
        <div class="soc-central-data">
          <span class="soc-value">{{ meterReading.rate }}</span>
          <span class="unit">%</span>
        </div>
        <div class="soc-data-point soc-right-data">
          <div>
            <span class="soc-failure">{{ meterReading.fail }}</span>
            <span class="soc-failure unit">个</span>
          </div>
          <div class="soc-description">失败数据</div>
        </div>
        <div class="soc-bottom-data">
          <div>
            <span class="soc-value">{{ meterReading.total }}</span>
            <span class="unit">个</span>
          </div>
          <div class="soc-description">应采数据</div>
        </div>
      </div>
    </CusModule>
    <CusModule class="module-top" title="用能情况">
      <div class="soc-pie-chart-container">
        <BaseChart width="100%" height="100%" :option="pieOptions"></BaseChart>
      </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 BaseChart from '@/components/BaseChart/index.vue'
import {dateFormat} from '@/utils';
import * as echarts from 'echarts'
import {mapState} from 'vuex';
import {cntDevice} from "@/api/device/meterDevice";
import { listFacsMeterHourSta } from '@/api/device/energyConsumption'
import {DateTool} from "@/utils/DateTool";
import {pgSupplyDayTotalPv} from "@/api/screen";

export default {
  name: 'SocLeft',
  data() {
    return {
      lineData: [],
      meterReading: {},
      energyUse: []
    };
  },
  components: {
    CusModule,
    BaseChart
  },
  computed: {
    ...mapState('userState', ['areaType']),
    pieOptions() {
      return {
        legend: {
          show: false,
        },
        color: ["#3FA7FD", "#8AC540", "#F9AF39", "#82D8F9"],
        grid: {
          top: '20%'
        },
        series: [
          {
            name: "类别统计",
            type: "pie",
            radius: ["40%", "55%"],
            center: ["50%", "50%"],
            data: this.energyUse,
            label: {
              normal: {
                show: true,
                formatter: [
                  '{b|{b}}',
                  '{c|{c}}{b|kW·h}',
                  '{d|{d}%}'
                ].join('\n'), // 用\n来换行
                rich: {
                  b: {
                    color: '#fff',
                    fontSize: 13,
                    lineHeight: 20,
                    align: 'left'
                  },
                  c: {
                    fontSize: 18,
                    fontWeight: 'bold',
                    color: '#06E3F9',
                    textShadowColor: '#1c90a6',
                    textShadowOffsetX: 0,
                    textShadowOffsetY: 2,
                    textShadowBlur: 5
                  },
                  d: {
                    color: '#fff',
                    align: 'left',
                    fontSize: 12
                  }
                }
              }
            },
            labelLine: {
              normal: {
                length: 10,
                length2: 30,
                smooth: true,
                lineStyle: {
                  width: 1,
                  color: 'rgba(255,255,255,0.7)'
                }
              }
            }
          },
        ],
      }
    },
    lineOptions() {
      return {
        legend: {
          show: false,
        },
        tooltip: {
          trigger: "axis",
        },
        yAxis: {
          name: "kW·h",
          splitLine: {
            show: true,
            lineStyle: {
              color: '#334E5E'
            }
          },
        },
        xAxis: {
          splitLine: {
            show: false,
          },
          data: this.lineData.map(item => item.xData),
        },
        series: [
          {
            type: 'line',
            name: "",
            smooth: true,
            lineStyle: {
              normal: {
                color: "#80DBE1", // 线条颜色
              },
            },
            itemStyle: {
              color: "#80DBE1",
              borderColor: "#fff",
              borderWidth: 3
            },
            areaStyle: { //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "rgba(81, 139, 152,0.8)"
                },
                  {
                    offset: 1,
                    color: "rgba(81, 139, 152, 0)"
                  }
                ], false),
                shadowColor: 'rgba(81, 139, 152, 0.5)', //阴影颜色
                shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              }
            },
            data: this.lineData.map(item => item.yData),
          },
        ],
      }
    }
  },
  watch: {
    areaType() {
      this.qryPageDatas()
    }
  },
  mounted() {
    this.qryPageDatas()
    this.timer && clearInterval(this.timer)
    this.timer = setInterval(() => {
      this.qryPageDatas()
    }, 60000 * 3)
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer)
  },
  methods: {
    getDatesOfLastTenDays() {
      var dates = [];
      var today = new Date();
      for (var i = 0; i < 10; i++) {
        var pastDate = new Date(today);
        pastDate.setDate(today.getDate() - i); // 减去i天
        var formattedDate = dateFormat(pastDate, 'MM-dd');
        dates.push(formattedDate);
      }
      return dates.reverse().map(item => ({
        xData: item,
        yData: parseFloat(((Math.random() * 100 + 100)).toFixed(1))
      }));
    },

    qryPageDatas() {
      this.getCntDevice()
      this.getDeviceElecMeter()
      this.getPgSupplyDayTotalPv()
    },
    async getCntDevice() {
      const {data} = await cntDevice({
        areaCode: this.areaType
      })
      const {
        totalDevice,
        onlineDevice
      } = data
      this.meterReading = {
        total: totalDevice,
        actual: onlineDevice,
        fail: totalDevice - onlineDevice,
        rate: (onlineDevice / totalDevice * 100).toFixed(1)
      }
    },
    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',
      };
      listFacsMeterHourSta(params).then(response => {
        this.energyUse = response.data.map(item => ({
          name: item.objName,
          value: item.totalElecQuantity || 0,
        }));
      })
    },
    async getPgSupplyDayTotalPv() {
      const {data: pgPvHisSupply} = await pgSupplyDayTotalPv({
        areaCode: this.areaType,
        startRecTime: DateTool.lastXDay(30),
        endRecTime: DateTool.now(),
      })
      if (!pgPvHisSupply) {
        return
      }

      const dateTips = DateTool.getDayOfRange(DateTool.lastXDay(30), DateTool.now());
      const dateIndexMap = {}
      pgPvHisSupply.forEach(item => {
        dateIndexMap[item.date] = item
      })
      const lineData = []
      dateTips.forEach((item, index) => {
        if (dateIndexMap[item]) {
          lineData.push({
            xData: item,
            yData: dateIndexMap[item].useElecQuantity
          })
        } else {
          lineData.push({
            xData: item,
            yData: 0
          })
        }
      })
      this.lineData = lineData
    },
  }
}
</script>
<style lang='scss' scoped>
@import url("../index.scss");

.soc-container {
  margin-top: 20px;
  width: 100%;
  height: 203px;
  background-image: url('~@/assets/images/soc/l1_bg.png');
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  text-align: center;

  .soc-data-point {
    position: absolute;
    top: 60px;

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

    .soc-description {
      color: #B3E3E8;
      font-size: 14px;
    }
  }

  .soc-left-data {
    left: 45px;
  }

  .soc-right-data {
    right: 35px;
  }

  .soc-central-data {
    position: absolute;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);

    .soc-value {
      color: #06E3F9;
      font-size: 32px;
    }
  }

  .soc-bottom-data {
    position: absolute;
    left: 50%;
    bottom: 62px;
    transform: translateX(-50%);

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

    .soc-description {
      color: #B3E3E8;
      font-size: 14px;
    }
  }

  .soc-failure {
    color: #F05050;
    font-size: 18px;

    &.unit {
      font-size: 14px;
    }
  }
}

.soc-pie-chart-container {
  margin-top: 20px;
  width: 369px;
  height: 178px;
  padding-bottom: 2px;
  padding-right: 17px;
  position: relative;
  background-image: url('~@/assets/images/soc/l2-pie_bg.png');

  .soc-chart-label {
    position: absolute;
    text-align: center;

    .soc-chart-label-text {
      color: #B3E3E8;
      font-size: 14px;
    }

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

  .soc-top-left {
    top: 12px;
    left: 20px;
  }

  .soc-top-right {
    top: 12px;
    right: 35px;
  }

  .soc-bottom-left {
    bottom: 32px;
    left: 20px;
  }

  .soc-bottom-right {
    bottom: 32px;
    right: 35px;
  }
}

.storage-grid {
  display: flex;
  flex-wrap: wrap;
}

.grid-item {
  flex-basis: 50%;
  height: 62px;
  display: flex;
  background: url('~@/assets/images/home/l2_item_bg.png') no-repeat;

  &:nth-child(n+3) {
    margin-top: 10px;
  }

  .image-container {
    width: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .item-details {
    width: calc(100% - 22px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 5px;
    color: #B3E3E8;

    .item-value {
      span.value {
        font-size: 20px;
        font-weight: bold;
      }

      span.unit {
        color: #768f95;
        font-size: 12px;
        margin-left: 2px;
      }
    }

    .item-name {
      font-size: 12px;
    }
  }
}
</style>