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

<template>
  <div>
    <CusModule title="上网电价">
      <div class="elec-index">
        <div class="panel-content" v-for="item, index in priceList" :key="index">
          <div class="image-container">
            <img :src="require(`@/assets/images/net/price${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="300px" width="100%" :option="barOptions"/>
    </CusModule>
    <CusModule class="module-top" title="今年购电费用">
      <BaseChart height="300px" width="100%" :option="lineOptions"/>
    </CusModule>
  </div>
</template>
<script>
import CusModule from '../components/CusModule.vue';
import BaseChart from '@/components/BaseChart/index.vue'
import vueSeamlessScroll from 'vue-seamless-scroll'
import {array2Map} from '@/utils';
import * as echarts from 'echarts'
import {mapState} from 'vuex';
import {getPvPriceConfig} from "@/api/basecfg/elecPvPrice";
import {pgSupplyMonthTotalPg, pgSupplyMonthTotalPv} from "@/api/screen";
import {DateTool} from "@/utils/DateTool";

export default {
  name: 'NetRight',
  data() {
    return {
      priceList: [
        {
          name: "余电上网电价",
          unit: "元/度",
        },
        {
          name: "脱硫煤电价",
          unit: "元/度",
        },
        {
          name: "国家补贴",
          unit: "元/度",
        },
        {
          name: "地方补贴",
          unit: "元/度",
        },
      ],
      barData: [],
      lineData: []
    }
  },
  components: {
    CusModule,
    BaseChart,
    vueSeamlessScroll
  },
  computed: {
    ...mapState('userState', ['areaType']),
    barOptions() {
      const xData = this.barData.map(item => item.xData)
      const line = this.barData.map(item => item.yData);
      return {
        tooltip: {
          trigger: 'item',
        },
        grid: {
          left: '5%',
          top: '10%',
          right: '5%',
          bottom: 0,
          containLabel: true
        },
        legend: {
          show: false,
        },
        xAxis: {
          data: xData,
          axisLabel: {
            margin: 10, //刻度标签与轴线之间的距离。
          },
          axisLine: {
            show: false //不显示x轴
          },
          axisTick: {
            show: false //不显示刻度
          },
          boundaryGap: true,
          splitLine: {
            show: false,
          }
        },
        yAxis: [{
          name: '万元',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#334E5E'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#888'
            },
          }
        }],
        series: [
          {//柱底圆片
            name: "",
            type: "pictorialBar",
            symbolSize: [20, 15],
            symbolOffset: [0, 5],
            z: 12,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "rgba(89,211,255,1)"
                },
                  {
                    offset: 1,
                    color: "rgba(23,237,194,1)"
                  }
                ])
              }
            },
            data: line
          },
          //柱体
          {
            name: '',
            type: 'bar',
            barWidth: 20,
            barGap: '0%',
            itemStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [{//第一节下面
                    offset: 0,
                    color: "rgba(0,255,245,0.5)"
                  }, {
                    offset: 1,
                    color: "#43bafe"
                  }]
                }
              }
            },

            data: line
          },
          //柱顶圆片
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [20, 15],
            symbolOffset: [0, -5],
            z: 12,
            symbolPosition: "end",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                    [{
                      offset: 0,
                      color: "rgba(89,211,255,1)"
                    },
                      {
                        offset: 1,
                        color: "rgba(23,237,194,1)"
                      }
                    ],
                    false
                ),
              }
            },
            data: line
          }
        ]
      };
    },
    lineOptions() {
      return {
        legend: {
          show: false,
        },
        grid: {
          top: '10%'
        },
        tooltip: {
          trigger: "axis",
        },
        yAxis: {
          name: "万元",
          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.getNetData()
    }
  },
  mounted() {
    this.getNetData()
    this.timer && clearInterval(this.timer)
    this.timer = setInterval(() => {
      this.getNetData()
    }, 60000 * 3)
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer)
  },
  methods: {
    getNetData() {
      this.pgSupplyMonthTotalPv()
      this.pgSupplyMonthTotalPg()
      this.qryGwPriceConfig()
    },
    async qryGwPriceConfig() {
      const {data} = await getPvPriceConfig(1)
      if (!data) {
        return;
      }
      const [lessPrice, oriPrice, state, local] = this.priceList
      lessPrice.value = data.objPrice + data.stateSubsidy + data.localSubsidy
      oriPrice.value = data.objPrice
      state.value = data.stateSubsidy
      local.value = data.localSubsidy
      this.priceList = [lessPrice, oriPrice, state, local]
    },
    async pgSupplyMonthTotalPv() {
      const {data} = await pgSupplyMonthTotalPv({
        startRecTime: DateTool.nearYearStartDay(),
        endRecTime: DateTool.now(),
        areaCode: this.areaType,
      })
      if (!data) {
        return;
      }
      const month = DateTool.getMonthsOfYearAgo()
      const indexMap = array2Map(data, "startRecTime")
      this.barData = month.map(item => (
          {
            xData: item.substring(2),
            yData: indexMap[item] ? (indexMap[item].upElecEarn / 10000).toFixed(1) : 0
          }
      ))
    },
    async pgSupplyMonthTotalPg() {
      const thisThisYearStart = `${DateTool.now(DateTool.DateFormat.YYYY)}-01-01`
      const {data} = await pgSupplyMonthTotalPg({
        startRecTime: thisThisYearStart,
        endRecTime: DateTool.now(),
        areaCode: this.areaType,
      })
      if (!data) {
        return;
      }
      const month = DateTool.getMonthsOfYearAgo()
      const indexMap = array2Map(data, "startRecTime")
      this.lineData = month.map(item => (
          {
            xData: item.substring(2),
            yData: indexMap[item] ? (indexMap[item].useElecCost / 10000).toFixed(1) : 0
          }
      ))
    }
  }
}
</script>
<style lang='scss' scoped>
@import url("../index.scss");

.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: 65px;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        height: 24px;
        margin-bottom: 5px;
      }
    }
  }
}

.equip {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;

  .equip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #1B4A64;
    color: #B3E3E8;
    border-radius: 4px;
    padding: 5px 13px;
    font-size: 14px;

    > div:first-of-type {
      span:first-of-type {
        font-size: 18px;
        font-weight: bold;
      }
    }
  }
}

.pie-chart {
  margin: 30px;
  height: 201px;
  background: url("~@/assets/images/device/l1-pie_bg.png") no-repeat;
  background-position: center;
}

.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>