hwmom-ui/src/views/board/index.vue

<template>
  <div class="board">
    <div class="topNav"></div>


    <div class="rightImg">
    </div>
    <div class="right">
                <span>
                    光伏系统
                </span>
    </div>
    <div class="rightImg" style="left:38%;">
    </div>
    <div class="right" style="left:38%;">
                <span>
                    风力风电
                </span>
    </div>
    <div class="rightImg" style="left:45%;">
    </div>
    <div class="right" style="left:45%;">
                <span>
                   储能系统
                </span>
    </div>


    <div class="title">
      微电网能源管理系统
    </div>
    <div class="rightTop">
      <span>今日告警:</span>
      <span style="color: #ff0000">2234</span>
      <br>
      <span>累计告警:</span>
      <span style="color: #4F98B8">3392</span>
    </div>
    <div class="card" style="left: 0.3%;background: linear-gradient(to right, #E47C65, #EA6596);">
      <div class=" cardTitle
    ">上网电量
      </div>
      <div class="cardInfo">
        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
          日上网电量
        </div>
        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
          103.2
        </div>
        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
          kwh
        </div>
      </div>
      <div class="cardInfo">
        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
          累计上网电量
        </div>
        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
          36371
        </div>
        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
          kwh
        </div>
      </div>
    </div>
    <div class="card" style="left: 16.9%;background: linear-gradient(to right, #2E74C3, #385CCB);">
      <div class="cardTitle">下网电量</div>
      <div class="cardInfo">
        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
          日用电量
        </div>
        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
          24.2
        </div>
        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
          kwh
        </div>
      </div>
      <div class="cardInfo">
        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
          累计用电量
        </div>
        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
          7394
        </div>
        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
          kwh
        </div>
      </div>
    </div>
    <div class="card" style="left: 33.5%;background: linear-gradient(to right, #3F40A6, #4234B1)">
      <div class="cardTitle">光伏发电</div>
      <div class="cardInfo">
        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
          日发电量
        </div>
        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
          43.5
        </div>
        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
          kwh
        </div>
      </div>
      <div class="cardInfo">
        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
          累计发电量
        </div>
        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
          64924
        </div>
        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
          kwh
        </div>
      </div>
    </div>
    <div class="card" style="left: 50.1%;background: linear-gradient(to right, #E47C65, #EA6596);">
      <div class="cardTitle">储能放电</div>
      <div class="cardInfo">
        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
          日放电量
        </div>
        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
          0
        </div>
        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
          kwh
        </div>
      </div>
      <div class="cardInfo">
        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
          累计放电量
        </div>
        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
          64913
        </div>
        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
          kwh
        </div>
      </div>
    </div>
    <div class="card" style="left: 66.7%;background: linear-gradient(to right, #2E74C3, #385CCB)">
      <div class="cardTitle">上网电量</div>
      <div class="cardInfo">
        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
          储能充电
        </div>
        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
          0
        </div>
        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
          kwh
        </div>
      </div>
      <div class="cardInfo">
        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
          累计充电量
        </div>
        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
          9841
        </div>
        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
          kwh
        </div>
      </div>
    </div>
    <div class="card" style="left: 83.3%;background: linear-gradient(to right, #3F40A6, #4234B1)">
      <div class="cardTitle">风力发电</div>
      <div class="cardInfo">
        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
          日发电量
        </div>
        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
          0
        </div>
        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
          kwh
        </div>
      </div>
      <div class="cardInfo">
        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
          累计发电量
        </div>
        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
          1741
        </div>
        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
          kwh
        </div>
      </div>
    </div>
    <div class="bottomLeftTop">
      <div class="card1" style="margin-top: 1%;margin-bottom: 2%">
        <div class="title1">系统收益</div>
        <div class="icon1">
          <img src="@/assets/demo/钱袋.png" alt="" width="60%">
        </div>
        <div class="num1">1.11</div>
        <div class="span1">万元</div>
      </div>
      <div class="card1" style="margin-top: 1%;margin-bottom: 2%">
        <div class="title1">用电消费</div>
        <div class="icon1">
          <img src="@/assets/demo/消费.png" alt="" width="60%">
        </div>
        <div class="num1">0.32</div>
        <div class="span1">万元</div>
      </div>
      <div class="card1">
        <div class="title1">节约标准煤</div>
        <div class="icon1">
          <img src="@/assets/demo/标准煤排放.png" alt="" width="60%">
        </div>
        <div class="num1">74194</div>
        <div class="span1">kg</div>
      </div>
      <div class="card1">
        <div class="title1">减排二氧化碳</div>
        <div class="icon1">
          <img src="@/assets/demo/二氧化碳.png" alt="" width="60%">
        </div>
        <div class="num1">7481904</div>
        <div class="span1">kg</div>
      </div>
    </div>
    <div class="bottomLeftMid">
      <div class="title2">光伏/市电日电量占比</div>
      <div class="bigIcon">
        <img src="@/assets/demo/1光伏发电.png" alt="" width="100%">
      </div>
      <div class="bigIcon" style="left: 50%">
        <img src="@/assets/demo/1市电.png" alt="" width="100%">
      </div>
      <div class="num2">100</div>
      <div class="span2">%</div>
      <div class="num3">100</div>
      <div class="span3">%</div>
    </div>
    <div class="bottomLeftBottom">
      <div class="title3">气象信息</div>
      <div class="card2">
        <div class="icon2">
          <img src="@/assets/demo/2光照.png" alt="" width="100%">
        </div>
        <div class="card2Title">光照</div>
        <div class="card2Span">
          <span>
            0.00
          </span>
          <span style="position:absolute;right: 0">
            lx
          </span></div>
      </div>
      <div class="card2">
        <div class="icon2">
          <img src="@/assets/demo/2风机.png" alt="" width="100%">
        </div>
        <div class="card2Title">风速</div>
        <div class="card2Span">
          <span>
            0.00
          </span>
          <span style="position:absolute;right: 0">
            m/s
          </span></div>
      </div>
      <div class="card2">
        <div class="icon2">
          <img src="@/assets/demo/2湿度.png" alt="" width="100%">
        </div>
        <div class="card2Title">湿度</div>
        <div class="card2Span">
          <span>
            0.00
          </span>
          <span style="position:absolute;right: 0">
            %
          </span></div>
      </div>
      <div class="card2">
        <div class="icon2">
          <img src="@/assets/demo/2温度.png" alt="" width="100%">
        </div>
        <div class="card2Title">温度</div>
        <div class="card2Span">
          <span>
            0.00
          </span>
          <span style="position:absolute;right: 0">
            °C
          </span></div>
      </div>
    </div>
    <div class="bottomMid">
    </div>
    <div class="bottomRightTop">
      <div class="card1" style="margin-top: 1%;margin-bottom: 2%">
        <div class="title1">风机装机容量</div>
        <div class="icon1">
          <img src="@/assets/demo/装机容量.png" alt="" width="60%">
        </div>
        <div class="num1">10</div>
        <div class="span1">kw</div>
      </div>
      <div class="card1" style="margin-top: 1%;margin-bottom: 2%">
        <div class="title1">光伏装机容量</div>
        <div class="icon1">
          <img src="@/assets/demo/装机容量.png" alt="" width="60%">
        </div>
        <div class="num1">123</div>
        <div class="span1">kw</div>
      </div>
      <div class="card1">
        <div class="title1">储能装机容量</div>
        <div class="icon1">
          <img src="@/assets/demo/装机容量.png" alt="" width="60%">
        </div>
        <div class="num1">111</div>
        <div class="span1">kwh</div>
      </div>
      <div class="card1">
        <div class="title1">负荷容量</div>
        <div class="icon1">
          <img src="@/assets/demo/装机容量.png" alt="" width="60%">
        </div>
        <div class="num1">54</div>
        <div class="span1">kw</div>
      </div>

    </div>
    <div class="bottomRightMid">
      <Chart ref="chartRef" />
    </div>
    <div class="bottomRightBottom">
      <Chart ref="chartRef1" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import Chart from '@/components/chart.vue';
import * as echarts from 'echarts';

const chartRef = ref();
const chartRef1 = ref();
onMounted(() => {
  const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
  let option = {
    title: {
      text: '系统功率曲线',
      textStyle: {
        fontSize: 12,
        fontWeight: 400,
        color: '#fff'
      },
      left: '0',
      top: '5%'
    },
    legend: {
      icon: 'circle',
      top: '5%',
      right: '5%',
      itemWidth: 6,
      itemGap: 20,
      textStyle: {
        color: '#fff'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        label: {
          show: true,
          backgroundColor: '#fff',
          color: '#fff',
          borderColor: 'rgba(0,0,0,0)',
          shadowColor: 'rgba(0,0,0,0)',
          shadowOffsetY: 0
        },
        lineStyle: {
          width: 0
        }
      },
      backgroundColor: '#fff',
      textStyle: {
        color: '#fff'
      },
      padding: [10, 10],
      extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
    },
    grid: {
      top: '30%',
      bottom: '10%'
    },
    xAxis: [
      {
        type: 'category',
        data: [' ', ' ', ' ', ' ', ' ', ' ', ' '],
        axisLine: {
          lineStyle: {
            color: '#DCE2E8'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: '#fff'
          },
          // 默认x轴字体大小
          fontSize: 0,
          // margin:文字到x轴的距离
          margin: -10
        },
        axisPointer: {
          label: {
            padding: [0, 0, 0, 0],
            /*
      除了padding[0]建议必须是0之外，其他三项可随意设置

      和CSSpadding相同，[上，右，下，左]

      如果需要下边线超出文字，设左右padding即可，注：左右padding最好相同

      padding[2]的10:

      10 = 文字距下边线的距离 + 下边线的宽度

      如：UI图中文字距下边线距离为7 下边线宽度为2

      则padding: [0, 0, 9, 0]

                  */
            // 这里的margin和axisLabel的margin要一致!
            margin: 0,
            // 移入时的字体大小
            fontSize: 12
          }
        },
        boundaryGap: false
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#fff'
          }
        },
        axisLabel: {
          textStyle: {
            color: '#fff'
          }
        },
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '充电桩+负载回路',
        type: 'line',
        data: [0, 0, 0, 0, 0, 0, 0],
        symbolSize: 1,
        symbol: 'circle',
        smooth: true,
        yAxisIndex: 0,
        showSymbol: false,
        lineStyle: {
          width: 1,
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 0,
              color: '#9effff'
            },
            {
              offset: 1,
              color: '#9E87FF'
            }
          ]),
          shadowColor: 'rgba(158,135,255, 0.3)',
          shadowBlur: 10,
          shadowOffsetY: 20
        },
        itemStyle: {
          normal: {
            color: colorList[0],
            borderColor: colorList[0]
          }
        }
      },
      {
        name: '光伏+风电',
        type: 'line',
        data: [0, 5, 18, 22, 29, 31, 35],
        symbolSize: 1,
        symbol: 'circle',
        smooth: true,
        yAxisIndex: 0,
        showSymbol: false,
        lineStyle: {
          width: 1,
          color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
            {
              offset: 0,
              color: '#73DD39'
            },
            {
              offset: 1,
              color: '#73DDFF'
            }
          ]),
          shadowColor: 'rgba(115,221,255, 0.3)',
          shadowBlur: 10,
          shadowOffsetY: 20
        },
        itemStyle: {
          normal: {
            color: colorList[1],
            borderColor: colorList[1]
          }
        }
      },
      {
        name: '储能',
        type: 'line',
        data: [0, 0, 0, 0, 0, 0, 0],
        symbolSize: 1,
        symbol: 'circle',
        smooth: true,
        showSymbol: false,
        lineStyle: {
          width: 1,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: '#fe9a'
            },
            {
              offset: 1,
              color: '#fe9a8b'
            }
          ]),
          shadowColor: 'rgba(254,154,139, 0.3)',
          shadowBlur: 10,
          shadowOffsetY: 20
        },
        itemStyle: {
          normal: {
            color: colorList[2],
            borderColor: colorList[2]
          }
        }
      }
    ]
  };
  let option1 = {
    title: {
      text: '并网功率曲线',
      textStyle: {
        fontSize: 12,
        fontWeight: 400,
        color: '#fff'
      },
      left: '0',
      top: '5%'
    },
    legend: {
      icon: 'circle',
      top: '5%',
      right: '5%',
      itemWidth: 6,
      itemGap: 20,
      textStyle: {
        color: '#fff'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        label: {
          show: true,
          backgroundColor: '#fff',
          color: '#fff',
          borderColor: 'rgba(0,0,0,0)',
          shadowColor: 'rgba(0,0,0,0)',
          shadowOffsetY: 0
        },
        lineStyle: {
          width: 0
        }
      },
      backgroundColor: '#fff',
      textStyle: {
        color: '#fff'
      },
      padding: [10, 10],
      extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
    },
    grid: {
      top: '30%',
      bottom: '10%'
    },
    xAxis: [
      {
        type: 'category',
        data: [' ', ' ', ' ', ' ', ' ', ' ', ' '],
        axisLine: {
          lineStyle: {
            color: '#DCE2E8'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: '#fff'
          },
          // 默认x轴字体大小
          fontSize: 0,
          // margin:文字到x轴的距离
          margin: -10
        },
        axisPointer: {
          label: {
            padding: [0, 0, 0, 0],
            /*
      除了padding[0]建议必须是0之外，其他三项可随意设置

      和CSSpadding相同，[上，右，下，左]

      如果需要下边线超出文字，设左右padding即可，注：左右padding最好相同

      padding[2]的10:

      10 = 文字距下边线的距离 + 下边线的宽度

      如：UI图中文字距下边线距离为7 下边线宽度为2

      则padding: [0, 0, 9, 0]

                  */
            // 这里的margin和axisLabel的margin要一致!
            margin: 0,
            // 移入时的字体大小
            fontSize: 12
          }
        },
        boundaryGap: false
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#fff'
          }
        },
        axisLabel: {
          textStyle: {
            color: '#fff'
          }
        },
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '并网功率',
        type: 'line',
        data: [2.31, -3.21, -5.24, -6.12, -7.41, -9.12, -10],
        symbolSize: 1,
        symbol: 'circle',
        smooth: true,
        showSymbol: false,
        lineStyle: {
          width: 1,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: '#fe9a'
            },
            {
              offset: 1,
              color: '#fe9a8b'
            }
          ]),
          shadowColor: 'rgba(254,154,139, 0.3)',
          shadowBlur: 10,
          shadowOffsetY: 20
        },
        itemStyle: {
          normal: {
            color: colorList[2],
            borderColor: colorList[2]
          }
        }
      }
    ]
  };
  chartRef.value.setData(option);
  chartRef1.value.setData(option1);
});
</script>
<style scoped lang="less">
.topNav {
  background-image: url("@/assets/demo/top.jpg");
  position: absolute;
  width: 100%;
  height: 7%;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.board {
  background-color: #020A3A;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.title {
  position: absolute;
  top: 3.5%;
  left: 2%;
  font-size: 1vw;
  color: white;
}

.rightTop {
  position: absolute;
  top: 2%;
  right: 3%;
  font-size: 0.8vw;
  color: white;
}

.card {
  position: absolute;
  top: 10%;
  width: 16%;
  height: 15%;
  color: white;
  font-size: 0.8vw;
  border-radius: 10px;
  line-height: 5vh;
}

.cardTitle {
  margin-left: 0.5vw;
}

.cardItem {
  vertical-align: top;
  display: inline-block;
}

.bottomLeftTop {
  position: absolute;
  top: 26%;
  left: 0.3%;
  width: 25%;
  height: 24%;
  background-color: #141B4C;
}

.bottomLeftMid {
  position: absolute;
  top: 50.6%;
  left: 0.3%;
  width: 25%;
  height: 24%;
  background-color: #141B4C;
}

.bottomLeftBottom {
  position: absolute;
  top: 75.2%;
  left: 0.3%;
  width: 25%;
  height: 24%;
  background-color: #141B4C;
}

.bottomMid {
  position: absolute;
  top: 26%;
  left: 25.5%;
  width: 49%;
  height: 73.4%;
  background-color: #141B4C;
}

.bottomRightTop {
  position: absolute;
  top: 26%;
  right: 0.3%;
  width: 25%;
  height: 24%;
  background-color: #141B4C;
}

.bigIcon {
  position: absolute;
  top: 65%;
  left: 10%;
  transform: translateY(-50%);
  width: 5vw;
  height: 5vw;
}

.bottomRightMid {
  position: absolute;
  top: 50.6%;
  right: 0.3%;
  width: 25%;
  height: 24%;
  background-color: #141B4C;
}

.bottomRightBottom {
  position: absolute;
  top: 75.2%;
  right: 0.3%;
  width: 25%;
  height: 24%;
  background-color: #141B4C;
}

.card1 {
  width: 48%;
  height: 45%;
  display: inline-block;
  margin: 0 1%;
  vertical-align: top;
  border: 0.5px solid #fff2;
  color: #fff;
  position: relative;
  font-size: 0.8vw;
}

.title1 {
  position: absolute;
  top: 10%;
  left: 10%;
}

.icon1 {
  background-color: #3C3D8C;
  border-radius: 50%;
  text-align: center;
  line-height: 2vw;
  position: absolute;
  width: 2vw;
  height: 2vw;
  top: 10%;
  right: 10%;

  img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.num1 {
  position: absolute;
  bottom: 10%;
  left: 10%;
  font-size: 1.2vw;
}

.span1 {
  position: absolute;
  bottom: 10%;
  right: 10%;
}

.title2 {
  position: absolute;
  top: 10%;
  left: 5%;
  font-size: 0.8vw;
  color: white;
}

.num2 {
  position: absolute;
  top: 60%;
  left: 30%;
  font-size: 1.2vw;
  color: white;
}

.span2 {
  position: absolute;
  top: 60%;
  left: 45%;
  font-size: 1.2vw;
  color: white;
}


.num3 {
  position: absolute;
  top: 60%;
  left: 75%;
  font-size: 1.2vw;
  color: white;
}

.span3 {
  position: absolute;
  top: 60%;
  left: 90%;
  font-size: 1.2vw;
  color: white;
}

.title3 {
  width: 100%;
  height: 10%;
  line-height: 2.4vh;
  font-size: 0.8vw;
  text-align: center;
  color: white;
}

.card2 {
  width: 46%;
  height: 45%;
  margin: 0 2%;
  display: inline-block;
  position: relative;
}

.icon2 {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  left: 10%;
  width: 3vw;
  height: 3vw;
}

.card2Title {
  position: absolute;
  width: calc(100% - 10% - 3vw);
  height: 1.5vw;
  line-height: 1.5vw;
  top: 50%;
  left: calc(10% + 3vw);
  transform: translateY(-100%);
  text-align: center;
  color: white;
  font-size: 0.8vw;
}

.card2Span {
  position: absolute;
  width: calc(100% - 10% - 3vw - 20px);
  height: 1.5vw;
  top: 50%;
  left: calc(10% + 3vw + 10px);
  line-height: 1.5vw;
  color: white;
  font-size: 0.8vw;
}

.rightImg {
  transform: rotateX(180deg);
  background-image: url('@/assets/demo/subheadClick.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  width: 8vw;
  height: 1.66vw;
  top: 3.8%;
  left: 31%;
}

.right {
  position: absolute;
  width: 8vw;
  height: 1.66vw;
  top: 3.8%;
  left: 31%;
  line-height: 1.66vw;
  font-size: 0.8vw;
  color: #fff;
  text-align: center;
}
</style>