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

<template>
  <div>
    <CusModule title="光伏发电量">
      <div class="elec-top-bar">
        <span class="elec-content">
          今日发电量<span class="elec-value">{{todayEnergy}}</span><span class="unit"> kW·h</span>
        </span>
      </div>
      <div class="elec-items-container">
        <div v-for="i in elecList" :key="i.name" class="elec-item" :style="{ backgroundImage: `url(${i.image})` }">
          <div class="elec-item-content">
            <div class="elec-item-value">{{ i.value }}</div>
            <div class="unit">{{ i.unit }}</div>
          </div>
          <div class="elec-item-label">
            {{ i.name }}
          </div>
        </div>
      </div>
    </CusModule>
    <CusModule class="module-top" title="光伏发电指标">
      <div class="elec-index">
        <div class="panel-content" v-for="item, index in elecIndexList" :key="index">
          <div class="image-container">
            <img :src="require(`@/assets/images/source/elec${index + 1}.svg`)" alt="">
          </div>
          <div class="whitespace-pre">
            <span class="value">{{ item.value }}</span>
            <span class="unit">{{ item.unit }}</span>
            <div class="label">{{ item.name }}</div>
          </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 BaseChart from '@/components/BaseChart/index.vue'
import {dateFormat} from '@/utils';
import {mapState} from 'vuex';
import * as echarts from 'echarts'
export default {
  name: 'SourceLeft',
  data () {
    return {
      todayEnergy:'321',
      elecList: [
        {
          name: "本月发电量",
          value: 9431,
          unit: "kW·h",
          image: require("@/assets/images/source/l1-item1.png"),
        },
        {
          name: "今年发电量",
          value: 12034,
          unit: "kW·h",
          image: require("@/assets/images/source/l1-item2.png"),
        },
        {
          name: "累计发电量",
          value: 95312,
          unit: "kW·h",
          image: require("@/assets/images/source/l1-item3.png"),
        },
      ],
      elecIndexList: [
        {
          name: "逆变器输入电量",
          value: 120,
          unit: "kW",
        },
        {
          name: "逆变器转换效率",
          value: 86.3,
          unit: "%",
        },
        {
          name: "光电转换效率",
          value: 82.1,
          unit: "%",
        },
        {
          name: "电站性能比",
          value: 78.09,
          unit: "",
        },
      ],
      lineData:[]
    };
  },
  components: {
    CusModule,
    BaseChart
  },
  computed: {
    ...mapState('userState', ['areaType']),
    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.getElecData()
      this.lineData = this.getDatesOfLastTenDays()
    }
  },
  mounted () {
    this.lineData = this.getDatesOfLastTenDays()
    this.getElecData()
  },
  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))
      }));
    },
    getElecData () {
      this.todayEnergy = Math.floor(Math.random() * 100 + 300)
      this.elecList = this.elecList.map((item,index) => ({
        ...item,
        value:Math.floor(Math.random() * 100 + 900*(index+1))
      }))
      this.elecIndexList = this.elecIndexList.map(item => ({
        ...item,
        value:parseFloat(Math.random() * 100).toFixed(1)
      }))
    }

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

.elec-top-bar {
  width: 100%;
  height: 90px;
  background-image: url('~@/assets/images/source/l1-top.png');
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  padding-left: 14px;

  .elec-content {
    color: #B3E3E8;
    font-size: 14px;
    letter-spacing: 1px;
    white-space: pre;

    .elec-value {
      font-size: 20px;
      font-weight: bold;
      color: #06E3F9;
    }

  }
}

.elec-items-container {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;

  .elec-item {
    width: 108px;
    height: 134px;
    position: relative;
    background-size: cover;

    .elec-item-content {
      text-align: center;
      margin-top: 1px;

      .elec-item-value {
        font-weight: bold;
        font-size: 20px;
        color: #06E3F9;
      }
    }

    .elec-item-label {
      position: absolute;
      bottom: 16px;
      width: 100%;
      color: #B3E3E8;
      font-size: 14px;
      text-align: center;
    }
  }
}

.elec-index {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px 0 0;

  .panel-content {
    margin-top: 12px;
    flex-basis: 48%;
    height: 75px;
    color: #B3E3E8;
    background: url('~@/assets/images/home/l2_item_bg.png') no-repeat;
    background-size: 100% 100%;
    display: flex;

    .whitespace-pre {
      margin-top: 15px;
      margin-left: 10px;

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

    .label {
      margin-top: 5px;
      font-size: 14px;
    }

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

      img {
        height: 24px;
        margin-bottom: 5px;
      }
    }
  }
}
</style>