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