1708 lines
60 KiB
Vue
1708 lines
60 KiB
Vue
<template>
|
||
<div class="box">
|
||
<div class="left">
|
||
<img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
|
||
<div class="fhgl">
|
||
<div class="imgBox1">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>可调负荷资源</p>
|
||
</div>
|
||
<div id="kdfhzy">
|
||
<div class="headers">
|
||
<div id="xf"></div>
|
||
<div id="tg"></div>
|
||
</div>
|
||
<div id="fhzy"></div>
|
||
</div>
|
||
<div class="imgBox2">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>负荷调控策略</p>
|
||
<div class="table">
|
||
<el-table :data="plan" style="width: 100%" :row-class-name="tableRowClassName">
|
||
<el-table-column prop="date1" label="调控等级" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="date2" label="目标" align="center">
|
||
<template scope="scope">
|
||
<span class="count">{{ scope.row.date2 }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="date3" label="执行时长" align="center">
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
<div id="main"></div>
|
||
<div class="imgBox3">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>可调负荷分析</p>
|
||
</div>
|
||
<div class="fenxi">
|
||
<h2>基线负荷:<span class="title">3138</span>kW</h2>
|
||
<div class="one">
|
||
<div class="first_left">
|
||
<h3>500<span>kW</span></h3>
|
||
<p>可参与削锋负荷</p>
|
||
</div>
|
||
<div class="first_center"></div>
|
||
<div class="first_right">
|
||
<h3>5100<span>元</span></h3>
|
||
<p>单次补贴金额</p>
|
||
</div>
|
||
</div>
|
||
<div class="two">
|
||
<div class="first_left">
|
||
<h3>300<span>kW</span></h3>
|
||
<p>可参与填谷负荷</p>
|
||
</div>
|
||
<div class="first_center"></div>
|
||
<div class="first_right">
|
||
<h3>1540<span>元</span></h3>
|
||
<p>单次补贴金额</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="fhgl">
|
||
<div class="imgBox4">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>可调设备</p>
|
||
</div>
|
||
<div class="table">
|
||
<el-table :data="devices" style="width: 100%" :row-class-name="tableRowClassName">
|
||
<el-table-column prop="date1" label="可调设备名称" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="date2" label="开关状态" align="center">
|
||
<template scope="scope">
|
||
<img src="../../assets/KDFH/tongguo.png" v-if="scope.row.date2 == true" />
|
||
<img src="../../assets/KDFH/jinggao.png" v-else />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="date3" label="实时负荷" align="center">
|
||
<template scope="scope">
|
||
<span class="count">{{ scope.row.date3 }}</span>
|
||
<span class="danwei">kW</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div class="imgBox5">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>刚性可调负荷</p>
|
||
</div>
|
||
<div class="five">
|
||
<div id="gang"></div>
|
||
<div class="gang_r">
|
||
<div class="g_one">
|
||
<span class="gang_one"></span>
|
||
<span>设备数量：</span>
|
||
<span class="gang_count">38</span>
|
||
<span>个</span>
|
||
</div>
|
||
<div class="g_two">
|
||
<span class="gang_two"></span>
|
||
<span>刚性可调负荷：</span>
|
||
<span class="gang_count">1348</span>
|
||
<span>kW</span>
|
||
</div>
|
||
<div class="g_three">
|
||
<span class="gang_three"></span>
|
||
<span>总可调负荷：</span>
|
||
<span class="gang_count">4348</span>
|
||
<span>kW</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="imgBox6">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>软性可调负荷</p>
|
||
</div>
|
||
<div class="six">
|
||
<div id="ruan"></div>
|
||
<div class="gang_r">
|
||
<div class="g_one">
|
||
<span class="gang_one"></span>
|
||
<span>设备数量：</span>
|
||
<span class="gang_count">38</span>
|
||
<span>个</span>
|
||
</div>
|
||
<div class="g_two">
|
||
<span class="gang_two"></span>
|
||
<span>刚性可调负荷：</span>
|
||
<span class="gang_count">1348</span>
|
||
<span>kW</span>
|
||
</div>
|
||
<div class="g_three">
|
||
<span class="gang_three"></span>
|
||
<span>总可调负荷：</span>
|
||
<span class="gang_count">4348</span>
|
||
<span>kW</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import "../../utils/echarts-liquidfill.min.js";
|
||
import * as echarts from "echarts";
|
||
export default {
|
||
name: "FHGL",
|
||
data() {
|
||
return {
|
||
plan: [
|
||
{
|
||
date1: "一级",
|
||
date2: "102.00kW",
|
||
date3: "5分钟",
|
||
},
|
||
{
|
||
date1: "一级",
|
||
date2: "29.00kW",
|
||
date3: "30分钟",
|
||
},
|
||
{
|
||
date1: "一级",
|
||
date2: "45.00kW",
|
||
date3: "1小时",
|
||
}
|
||
],
|
||
devices: [
|
||
{
|
||
date1: "回转窑",
|
||
date2: true,
|
||
date3: "102.00",
|
||
},
|
||
{
|
||
date1: "熟料收尘",
|
||
date2: true,
|
||
date3: "29.00",
|
||
},
|
||
{
|
||
date1: "篦冷机",
|
||
date2: true,
|
||
date3: "45.00",
|
||
},
|
||
{
|
||
date1: "生料收尘",
|
||
date2: false,
|
||
date3: "102.00",
|
||
},
|
||
{
|
||
date1: "回转窑",
|
||
date2: true,
|
||
date3: "29.00",
|
||
},
|
||
{
|
||
date1: "熟料收尘",
|
||
date2: false,
|
||
date3: "45.00",
|
||
}
|
||
],
|
||
option: {
|
||
series: [
|
||
{
|
||
// value: 50, // 内容 配合formatter
|
||
type: 'liquidFill',
|
||
radius: '70%', // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
|
||
center: ['50%', '50%'],
|
||
data: [
|
||
0.6,
|
||
{
|
||
value: 0.6,
|
||
direction: 'left', //波浪方向
|
||
},
|
||
], // data个数代表波浪数
|
||
backgroundStyle: {
|
||
borderWidth: 1,
|
||
color: "transparent", // 球体本景色
|
||
},
|
||
amplitude: '6%', //波浪的振幅
|
||
// 修改波浪颜色
|
||
color: [
|
||
{
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 1,
|
||
color: '#2EED5C',
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: '#2EED5C',
|
||
},
|
||
],
|
||
globalCoord: false,
|
||
},
|
||
],
|
||
label: {
|
||
normal: {
|
||
formatter: 55 + '{d|%}',
|
||
rich: {
|
||
d: {
|
||
fontSize: 36,
|
||
},
|
||
},
|
||
textStyle: {
|
||
fontSize: 48,
|
||
color: '#fff',
|
||
},
|
||
},
|
||
},
|
||
outline: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
type: 'pie',
|
||
z: 1,
|
||
center: ['50%', '50%'],
|
||
radius: ['72%', '73.5%'], // 控制外圈圆的粗细
|
||
hoverAnimation: false,
|
||
data: [
|
||
{
|
||
name: '',
|
||
value: 500,
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
color: '#2EED5C',
|
||
},
|
||
emphasis: {
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
color: '#2EED5C',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: 'pie',
|
||
zlevel: 0,
|
||
silent: true,
|
||
radius: ['78%', '80%'],
|
||
z: 1,
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
data: this.Pie(),
|
||
},
|
||
],
|
||
},
|
||
option2: {
|
||
series: [
|
||
{
|
||
// value: 50, // 内容 配合formatter
|
||
type: 'liquidFill',
|
||
radius: '70%', // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
|
||
center: ['50%', '50%'],
|
||
data: [
|
||
0.6,
|
||
{
|
||
value: 0.6,
|
||
direction: 'left', //波浪方向
|
||
},
|
||
], // data个数代表波浪数
|
||
backgroundStyle: {
|
||
borderWidth: 1,
|
||
color: "transparent", // 球体本景色
|
||
},
|
||
amplitude: '6%', //波浪的振幅
|
||
// 修改波浪颜色
|
||
color: [
|
||
{
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 1,
|
||
color: '#10A1DD',
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: '#10A1DD',
|
||
},
|
||
],
|
||
globalCoord: false,
|
||
},
|
||
],
|
||
label: {
|
||
normal: {
|
||
formatter: 55 + '{d|%}',
|
||
rich: {
|
||
d: {
|
||
fontSize: 36,
|
||
},
|
||
},
|
||
textStyle: {
|
||
fontSize: 48,
|
||
color: '#fff',
|
||
},
|
||
},
|
||
},
|
||
outline: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
type: 'pie',
|
||
z: 1,
|
||
center: ['50%', '50%'],
|
||
radius: ['72%', '73.5%'], // 控制外圈圆的粗细
|
||
hoverAnimation: false,
|
||
data: [
|
||
{
|
||
name: '',
|
||
value: 500,
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
color: '#10A1DD',
|
||
},
|
||
emphasis: {
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
color: '#10A1DD',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: 'pie',
|
||
zlevel: 0,
|
||
silent: true,
|
||
radius: ['78%', '80%'],
|
||
z: 1,
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
data: this.Pie2(),
|
||
},
|
||
],
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
tableRowClassName({ row, rowIndex }) {
|
||
if ((rowIndex + 1) % 2 === 0) {
|
||
return "success-row";
|
||
}
|
||
return "";
|
||
},
|
||
Pie() {
|
||
let dataArr = [];
|
||
for (var i = 0; i < 150; i++) {
|
||
if (i % 2 === 0) {
|
||
dataArr.push({
|
||
name: (i + 1).toString(),
|
||
value: 50,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#2EED5C',
|
||
borderWidth: 0,
|
||
borderColor: 'rgba(0,0,0,0)',
|
||
},
|
||
},
|
||
});
|
||
} else {
|
||
dataArr.push({
|
||
name: (i + 1).toString(),
|
||
value: 100,
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'rgba(0,0,0,0)',
|
||
borderWidth: 0,
|
||
borderColor: 'rgba(0,0,0,0)',
|
||
},
|
||
},
|
||
});
|
||
}
|
||
}
|
||
return dataArr;
|
||
},
|
||
Pie2() {
|
||
let dataArr = [];
|
||
for (var i = 0; i < 150; i++) {
|
||
if (i % 2 === 0) {
|
||
dataArr.push({
|
||
name: (i + 1).toString(),
|
||
value: 50,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#10A1DD',
|
||
borderWidth: 0,
|
||
borderColor: 'rgba(0,0,0,0)',
|
||
},
|
||
},
|
||
});
|
||
} else {
|
||
dataArr.push({
|
||
name: (i + 1).toString(),
|
||
value: 100,
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'rgba(0,0,0,0)',
|
||
borderWidth: 0,
|
||
borderColor: 'rgba(0,0,0,0)',
|
||
},
|
||
},
|
||
});
|
||
}
|
||
}
|
||
return dataArr;
|
||
},
|
||
xf() {
|
||
const dataArr = [
|
||
{
|
||
value: 53,
|
||
name: '削锋',
|
||
},
|
||
];
|
||
const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{
|
||
offset: 0,
|
||
color: '#136768', // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#28E2EC ', // 100% 处的颜色
|
||
},
|
||
]);
|
||
const colorSet = [
|
||
[0.81, color],
|
||
[1, '#136768'],
|
||
];
|
||
const rich = {
|
||
white: {
|
||
fontSize: 50,
|
||
color: '#fff',
|
||
fontWeight: '500',
|
||
},
|
||
bule: {
|
||
fontSize: 80,
|
||
fontFamily: 'DINBold',
|
||
color: '#fff',
|
||
fontWeight: '700',
|
||
},
|
||
radius: {
|
||
width: 350,
|
||
height: 80,
|
||
// lineHeight:80,
|
||
borderWidth: 1,
|
||
borderColor: '#0092F2',
|
||
fontSize: 50,
|
||
color: '#fff',
|
||
backgroundColor: '#1B215B',
|
||
borderRadius: 20,
|
||
textAlign: 'center',
|
||
},
|
||
size: {
|
||
height: 400,
|
||
padding: [100, 0, 0, 0],
|
||
},
|
||
};
|
||
let option = {
|
||
tooltip: {
|
||
formatter: '{a} <br/>{b} : {c}%',
|
||
},
|
||
|
||
series: [
|
||
{
|
||
type: 'gauge',
|
||
radius: '70%',
|
||
startAngle: '225',
|
||
endAngle: '-45',
|
||
pointer: {
|
||
show: false,
|
||
},
|
||
detail: {
|
||
formatter: function (value) {
|
||
var num = Math.round(value);
|
||
return '{bule|' + num + '}{white|%}';
|
||
},
|
||
rich: rich,
|
||
offsetCenter: ['0%', '0%'],
|
||
},
|
||
|
||
data: dataArr,
|
||
title: {
|
||
show: true,
|
||
color: '#fff',
|
||
offsetCenter: ['0', '75%'],
|
||
fontSize: 20
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: colorSet,
|
||
width: 45,
|
||
shadowOffsetX: 0,
|
||
shadowOffsetY: 0,
|
||
opacity: 1,
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
length: 35,
|
||
lineStyle: {
|
||
color: '#00377a',
|
||
width: 2,
|
||
type: 'solid',
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
};
|
||
var chartDom = document.getElementById('xf');
|
||
var myChart = echarts.init(chartDom);
|
||
option && myChart.setOption(option);
|
||
},
|
||
tg() {
|
||
const dataArr = [
|
||
{
|
||
value: 53,
|
||
name: '削锋',
|
||
},
|
||
];
|
||
const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{
|
||
offset: 0,
|
||
color: '#136768', // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#28E2EC ', // 100% 处的颜色
|
||
},
|
||
]);
|
||
const colorSet = [
|
||
[0.81, color],
|
||
[1, '#136768'],
|
||
];
|
||
const rich = {
|
||
white: {
|
||
fontSize: 50,
|
||
color: '#fff',
|
||
fontWeight: '500',
|
||
},
|
||
bule: {
|
||
fontSize: 80,
|
||
fontFamily: 'DINBold',
|
||
color: '#fff',
|
||
fontWeight: '700',
|
||
},
|
||
radius: {
|
||
width: 350,
|
||
height: 80,
|
||
// lineHeight:80,
|
||
borderWidth: 1,
|
||
// borderColor: '#0092F2',
|
||
fontSize: 50,
|
||
color: '#fff',
|
||
// backgroundColor: '#1B215B',
|
||
borderRadius: 20,
|
||
textAlign: 'center',
|
||
},
|
||
size: {
|
||
height: 400,
|
||
padding: [100, 0, 0, 0],
|
||
},
|
||
};
|
||
let option = {
|
||
tooltip: {
|
||
formatter: '{a} <br/>{b} : {c}%',
|
||
},
|
||
|
||
series: [
|
||
{
|
||
type: 'gauge',
|
||
radius: '70%',
|
||
startAngle: '225',
|
||
endAngle: '-45',
|
||
pointer: {
|
||
show: false,
|
||
},
|
||
detail: {
|
||
formatter: function (value) {
|
||
var num = Math.round(value);
|
||
return '{bule|' + num + '}{white|%}';
|
||
},
|
||
rich: rich,
|
||
offsetCenter: ['0%', '0%'],
|
||
},
|
||
|
||
data: dataArr,
|
||
title: {
|
||
show: true,
|
||
color: '#fff',
|
||
offsetCenter: ['0', '75%'],
|
||
fontSize: 20
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: colorSet,
|
||
width: 45,
|
||
shadowOffsetX: 0,
|
||
shadowOffsetY: 0,
|
||
opacity: 1,
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
length: 35,
|
||
lineStyle: {
|
||
color: '#00377a',
|
||
width: 2,
|
||
type: 'solid',
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
};
|
||
var chartDom = document.getElementById('tg');
|
||
var myChart = echarts.init(chartDom);
|
||
option && myChart.setOption(option);
|
||
},
|
||
kdfhzy() {
|
||
let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
|
||
let yaxisData = [88, 60, 100, 60, 50];
|
||
let yaxisData2 = [99, 70, 34, 70, 60];
|
||
|
||
//拿到最大值
|
||
const maxValue = Math.max(...yaxisData);
|
||
const maxValue2 = Math.max(...yaxisData2);
|
||
|
||
const offsetX = 15;
|
||
const offsetY = 5;
|
||
// 绘制左侧面
|
||
const CubeLeft = echarts.graphic.extendShape({
|
||
shape: {
|
||
x: 0,
|
||
y: 0,
|
||
},
|
||
buildPath: function (ctx, shape) {
|
||
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||
const xAxisPoint = shape.xAxisPoint;
|
||
const c0 = [shape.x, shape.y];
|
||
const c1 = [shape.x - offsetX, shape.y - offsetY];
|
||
const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
|
||
const c3 = [xAxisPoint[0], xAxisPoint[1]];
|
||
ctx
|
||
.moveTo(c0[0], c0[1])
|
||
.lineTo(c1[0], c1[1])
|
||
.lineTo(c2[0], c2[1])
|
||
.lineTo(c3[0], c3[1])
|
||
.closePath();
|
||
},
|
||
});
|
||
|
||
// 绘制右侧面
|
||
const CubeRight = echarts.graphic.extendShape({
|
||
shape: {
|
||
x: 0,
|
||
y: 0,
|
||
},
|
||
buildPath: function (ctx, shape) {
|
||
const xAxisPoint = shape.xAxisPoint;
|
||
const c1 = [shape.x, shape.y];
|
||
const c2 = [xAxisPoint[0], xAxisPoint[1]];
|
||
const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
|
||
const c4 = [shape.x + offsetX, shape.y - offsetY];
|
||
ctx
|
||
.moveTo(c1[0], c1[1])
|
||
.lineTo(c2[0], c2[1])
|
||
.lineTo(c3[0], c3[1])
|
||
.lineTo(c4[0], c4[1])
|
||
.closePath();
|
||
},
|
||
});
|
||
|
||
// 绘制顶面
|
||
const CubeTop = echarts.graphic.extendShape({
|
||
shape: {
|
||
x: 0,
|
||
y: 0,
|
||
},
|
||
buildPath: function (ctx, shape) {
|
||
const c1 = [shape.x, shape.y];
|
||
const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
|
||
const c3 = [shape.x, shape.y - offsetX];
|
||
const c4 = [shape.x - offsetX, shape.y - offsetY];
|
||
ctx
|
||
.moveTo(c1[0], c1[1])
|
||
.lineTo(c2[0], c2[1])
|
||
.lineTo(c3[0], c3[1])
|
||
.lineTo(c4[0], c4[1])
|
||
.closePath();
|
||
},
|
||
});
|
||
|
||
// 注册三个面图形
|
||
echarts.graphic.registerShape("CubeLeft", CubeLeft);
|
||
echarts.graphic.registerShape("CubeRight", CubeRight);
|
||
echarts.graphic.registerShape("CubeTop", CubeTop);
|
||
|
||
let option = {
|
||
legend: {
|
||
data: [
|
||
{ icon: "rect", name: "削锋" },
|
||
{ icon: "rect", name: "填谷" },
|
||
],
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: "20px",
|
||
},
|
||
},
|
||
// tooltip: {
|
||
// trigger: "axis",
|
||
// axisPointer: {
|
||
// type: "shadow",
|
||
// },
|
||
// backgroundColor: "rgba(255,255,255,0.75)",
|
||
// extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
|
||
// textStyle: {
|
||
// fontSize: 20,
|
||
// color: "#000",
|
||
// },
|
||
// formatter: (params, ticket, callback) => {
|
||
// const item = params[1];
|
||
// return item.name + " : " + item.value + " 个";
|
||
// },
|
||
// },
|
||
grid: {
|
||
left: "1%",
|
||
right: "0%",
|
||
top: "16%",
|
||
bottom: "5%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: xaxisData,
|
||
axisLine: {
|
||
show: true,
|
||
// lineStyle: {
|
||
// width: 1,
|
||
// },
|
||
},
|
||
axisTick: {
|
||
show: true,
|
||
},
|
||
axisLabel: {
|
||
fontSize: 20,
|
||
color: "#FFFFFF",
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
name: "单位:kWh",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
},
|
||
axisLabel: {
|
||
fontSize: 20,
|
||
color: "#FFFFFF",
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
type: "bar",
|
||
itemStyle: {
|
||
color: "transparent",
|
||
},
|
||
data: yaxisData2,
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: "top",
|
||
formatter: (e) => {
|
||
return e.value === maxValue2 ? e.value : "";
|
||
},
|
||
fontSize: 20,
|
||
color: "#3286FF",
|
||
offset: [0, -15],
|
||
},
|
||
},
|
||
},
|
||
{
|
||
type: "bar",
|
||
itemStyle: {
|
||
color: "transparent",
|
||
},
|
||
data: yaxisData,
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: "top",
|
||
formatter: (e) => {
|
||
return e.value === maxValue ? e.value : "";
|
||
},
|
||
fontSize: 20,
|
||
color: "#02C262",
|
||
offset: [0, -15],
|
||
},
|
||
},
|
||
},
|
||
{
|
||
type: "custom",
|
||
name: "昨日",
|
||
barCategoryGap: "20%",
|
||
renderItem: (params, api) => {
|
||
const location = api.coord([api.value(0), api.value(1)]);
|
||
return {
|
||
type: "group",
|
||
children: [
|
||
{
|
||
type: "CubeLeft",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(0),
|
||
yValue: api.value(1),
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0]),
|
||
},
|
||
style: {
|
||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#08E83C",
|
||
},
|
||
{
|
||
offset: 0.35,
|
||
color: "#1FE77D",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#38E7C5",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
{
|
||
type: "CubeRight",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(0),
|
||
yValue: api.value(1),
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0]),
|
||
},
|
||
style: {
|
||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#00C25D",
|
||
},
|
||
{
|
||
offset: 0.35,
|
||
color: "#05C269",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#0BC27B",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
{
|
||
type: "CubeTop",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(0),
|
||
yValue: api.value(1),
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0]),
|
||
},
|
||
style: {
|
||
fill: "#05E861",
|
||
},
|
||
},
|
||
],
|
||
};
|
||
},
|
||
data: yaxisData,
|
||
},
|
||
{
|
||
type: "custom",
|
||
name: "今日",
|
||
renderItem: (params, api) => {
|
||
const location = api.coord([api.value(0), api.value(1)]);
|
||
const xAxisPoint = api.coord([api.value(0), 0]);
|
||
const distance = 50;
|
||
return {
|
||
type: "group",
|
||
children: [
|
||
{
|
||
type: "CubeLeft",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(0),
|
||
yValue: api.value(1),
|
||
x: location[0] - distance,
|
||
y: location[1],
|
||
xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
|
||
},
|
||
style: {
|
||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#10C6FF",
|
||
},
|
||
{
|
||
offset: 0.35,
|
||
color: "#377DFF",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#4464FF",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
{
|
||
type: "CubeRight",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(0),
|
||
yValue: api.value(1),
|
||
x: location[0] - distance,
|
||
y: location[1],
|
||
xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
|
||
},
|
||
style: {
|
||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#0673D5",
|
||
},
|
||
{
|
||
offset: 0.35,
|
||
color: "#0B68D5",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#115DD5",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
{
|
||
type: "CubeTop",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(0),
|
||
yValue: api.value(1),
|
||
x: location[0] - distance,
|
||
y: location[1],
|
||
xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
|
||
},
|
||
style: {
|
||
fill: "#0964FF",
|
||
},
|
||
},
|
||
],
|
||
};
|
||
},
|
||
data: yaxisData2,
|
||
},
|
||
],
|
||
};
|
||
var chartDom = document.getElementById('fhzy');
|
||
var myChart2 = echarts.init(chartDom);
|
||
option && myChart2.setOption(option);
|
||
},
|
||
},
|
||
mounted() {
|
||
var chartDom = document.getElementById('gang');
|
||
var myChart = echarts.init(chartDom);
|
||
this.option && myChart.setOption(this.option);
|
||
var chartDom2 = document.getElementById('ruan');
|
||
var myChart2 = echarts.init(chartDom2);
|
||
this.option2 && myChart2.setOption(this.option2);
|
||
this.xf();
|
||
this.tg();
|
||
this.kdfhzy();
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.box {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding-top: 500px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
background-color: transparent;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
/deep/.table {
|
||
margin-top: 50px;
|
||
|
||
.count {
|
||
color: #05F0FF;
|
||
font-size: 22px;
|
||
}
|
||
|
||
//表体颜色
|
||
.el-table tr {
|
||
background: #16253b;
|
||
color: #fff;
|
||
font-size: 30px;
|
||
height: 50px;
|
||
|
||
.cell {
|
||
line-height: 50px;
|
||
}
|
||
}
|
||
|
||
// 去掉eltable的hover效果
|
||
.el-table tbody tr:hover>td {
|
||
background-color: #0b679e !important;
|
||
}
|
||
|
||
//修改表头颜色
|
||
.has-gutter {
|
||
background-color: #1969a8;
|
||
|
||
th {
|
||
background-color: #1969a8;
|
||
}
|
||
}
|
||
|
||
//奇偶行颜色
|
||
.el-table .success-row {
|
||
background: #184167;
|
||
}
|
||
|
||
//去掉边框白线
|
||
.el-table__row>td {
|
||
border: none;
|
||
}
|
||
|
||
.el-table::before {
|
||
height: 0px;
|
||
}
|
||
|
||
/* 移除表头的下边框 */
|
||
.el-table__header th {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
|
||
.left {
|
||
width: 1237px;
|
||
height: 2500px;
|
||
margin-left: 61px;
|
||
background-image: url("../../assets/img/侧边.png");
|
||
padding-left: 59px;
|
||
padding-right: 45px;
|
||
box-sizing: border-box;
|
||
|
||
.title {
|
||
margin-top: 15px;
|
||
margin-left: 60px;
|
||
}
|
||
|
||
.fhgl {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
|
||
.imgBox1 {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
#kdfhzy {
|
||
width: 100%;
|
||
height: 1000px;
|
||
|
||
.headers {
|
||
width: 100%;
|
||
height: 400px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
#xf {
|
||
width: 400px;
|
||
height: 300px;
|
||
}
|
||
|
||
#tg {
|
||
width: 400px;
|
||
height: 300px;
|
||
}
|
||
}
|
||
#fhzy{
|
||
width: 100%;
|
||
height: 500px;
|
||
}
|
||
}
|
||
|
||
.fenxi {
|
||
width: 100%;
|
||
height: auto;
|
||
|
||
h2 {
|
||
width: 446px;
|
||
height: 35px;
|
||
font-size: 22px;
|
||
font-family: SourceHanSansCN, SourceHanSansCN;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
line-height: 20px;
|
||
}
|
||
|
||
span.title {
|
||
margin-left: 20px;
|
||
width: 186px;
|
||
height: 41px;
|
||
font-size: 42px;
|
||
color: #56f671;
|
||
line-height: 20px;
|
||
padding-right: 9px;
|
||
}
|
||
|
||
.one {
|
||
width: 100%;
|
||
height: 210px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
|
||
.first_left {
|
||
width: 482px;
|
||
height: 167px;
|
||
background: url(../../assets/KDFH/组\ 966.png);
|
||
opacity: 1;
|
||
|
||
h3 {
|
||
width: 97px;
|
||
height: 53px;
|
||
margin-left: 240px;
|
||
margin-top: 20px;
|
||
font-size: 59px;
|
||
font-family: Impact;
|
||
color: #58fd64;
|
||
// line-height: 322px;
|
||
}
|
||
|
||
p {
|
||
margin-top: 15px;
|
||
margin-left: 200px;
|
||
width: 482px;
|
||
height: 67px;
|
||
color: #fff;
|
||
font-size: 36px;
|
||
opacity: 1;
|
||
}
|
||
|
||
span {
|
||
width: 50px;
|
||
height: 27px;
|
||
font-size: 33px;
|
||
margin-left: 18px;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.first_center {
|
||
width: 89px;
|
||
height: 54px;
|
||
background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
|
||
opacity: 1;
|
||
}
|
||
|
||
.first_right {
|
||
width: 487px;
|
||
height: 168px;
|
||
background: url(../../assets/KDFH/组\ 965.png);
|
||
border-radius: 24px 3px 3px 24px;
|
||
opacity: 1;
|
||
|
||
h3 {
|
||
width: 353px;
|
||
height: 53px;
|
||
margin-left: 240px;
|
||
margin-top: 20px;
|
||
font-size: 59px;
|
||
font-family: Impact;
|
||
color: #03ffd8;
|
||
// line-height: 322px;
|
||
}
|
||
|
||
p {
|
||
margin-top: 15px;
|
||
margin-left: 240px;
|
||
width: 482px;
|
||
height: 67px;
|
||
color: #fff;
|
||
font-size: 36px;
|
||
opacity: 1;
|
||
// line-height: 185px;
|
||
}
|
||
|
||
span {
|
||
width: 50px;
|
||
height: 27px;
|
||
font-size: 33px;
|
||
margin-left: 18px;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
// line-height: 341px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.two {
|
||
width: 100%;
|
||
height: 210px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
|
||
.first_left {
|
||
width: 482px;
|
||
height: 167px;
|
||
background: url(../../assets/KDFH/组\ 967.png);
|
||
opacity: 1;
|
||
|
||
h3 {
|
||
width: 97px;
|
||
height: 53px;
|
||
margin-left: 240px;
|
||
margin-top: 20px;
|
||
font-size: 59px;
|
||
font-family: Impact;
|
||
color: #36b1ff;
|
||
// line-height: 322px;
|
||
}
|
||
|
||
p {
|
||
margin-top: 15px;
|
||
margin-left: 200px;
|
||
width: 482px;
|
||
height: 67px;
|
||
color: #fff;
|
||
font-size: 36px;
|
||
opacity: 1;
|
||
}
|
||
|
||
span {
|
||
width: 50px;
|
||
height: 27px;
|
||
font-size: 33px;
|
||
margin-left: 18px;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.first_center {
|
||
width: 89px;
|
||
height: 54px;
|
||
background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
|
||
opacity: 1;
|
||
}
|
||
|
||
.first_right {
|
||
width: 487px;
|
||
height: 168px;
|
||
background: url(../../assets/KDFH/组\ 965.png);
|
||
border-radius: 24px 3px 3px 24px;
|
||
opacity: 1;
|
||
|
||
h3 {
|
||
width: 353px;
|
||
height: 53px;
|
||
margin-left: 240px;
|
||
margin-top: 20px;
|
||
font-size: 59px;
|
||
font-family: Impact;
|
||
color: #03ffd8;
|
||
// line-height: 322px;
|
||
}
|
||
|
||
p {
|
||
margin-top: 15px;
|
||
margin-left: 240px;
|
||
width: 482px;
|
||
height: 67px;
|
||
color: #fff;
|
||
font-size: 36px;
|
||
opacity: 1;
|
||
// line-height: 185px;
|
||
}
|
||
|
||
span {
|
||
width: 50px;
|
||
height: 27px;
|
||
font-size: 33px;
|
||
margin-left: 18px;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
// line-height: 341px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 1236px;
|
||
height: 2477px;
|
||
margin-right: 61px;
|
||
background-image: url("../../assets/img/侧边.png");
|
||
padding-right: 59px;
|
||
padding-right: 45px;
|
||
box-sizing: border-box;
|
||
|
||
.fhgl {
|
||
position: relative;
|
||
margin-top: 128px;
|
||
|
||
.imgBox4 {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
right: 1008px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
.imgBox5 {
|
||
height: 93px;
|
||
width: 1156px;
|
||
margin-bottom: 60px;
|
||
margin-top: 88px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 870px;
|
||
right: 960px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
.five {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
#gang {
|
||
width: 100%;
|
||
height: 540px;
|
||
}
|
||
|
||
.gang_r {
|
||
margin-top: 100px;
|
||
|
||
.g_one {
|
||
width: 600px;
|
||
height: auto;
|
||
height: 34px;
|
||
font-size: 22px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||
font-weight: bold;
|
||
display: flex;
|
||
margin-bottom: 100px;
|
||
color: #FFFFFF;
|
||
|
||
.gang_one {
|
||
width: 34px;
|
||
height: 34px;
|
||
display: block;
|
||
background: #2EEDAF;
|
||
border-radius: 3px 3px 3px 3px;
|
||
margin-right: 20px;
|
||
opacity: 1;
|
||
}
|
||
|
||
.gang_count {
|
||
width: 55px;
|
||
height: 43px;
|
||
font-size: 34px;
|
||
font-family: TRENDS;
|
||
color: #2EEDAF;
|
||
line-height: 22px;
|
||
}
|
||
}
|
||
|
||
.g_two {
|
||
width: 600px;
|
||
height: auto;
|
||
height: 34px;
|
||
font-size: 22px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||
font-weight: bold;
|
||
display: flex;
|
||
margin-bottom: 100px;
|
||
color: #FFFFFF;
|
||
|
||
.gang_two {
|
||
width: 34px;
|
||
height: 34px;
|
||
display: block;
|
||
margin-right: 20px;
|
||
background: #2EEDD8;
|
||
border-radius: 3px 3px 3px 3px;
|
||
opacity: 1;
|
||
}
|
||
|
||
.gang_count {
|
||
width: 55px;
|
||
height: 43px;
|
||
font-size: 34px;
|
||
margin-left: 10px;
|
||
margin-right: 40px;
|
||
font-family: TRENDS;
|
||
color: #2EEDD8;
|
||
line-height: 22px;
|
||
}
|
||
}
|
||
|
||
.g_three {
|
||
width: 600px;
|
||
height: auto;
|
||
height: 34px;
|
||
font-size: 22px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||
font-weight: bold;
|
||
display: flex;
|
||
margin-bottom: 100px;
|
||
color: #FFFFFF;
|
||
|
||
.gang_three {
|
||
width: 34px;
|
||
height: 34px;
|
||
margin-right: 20px;
|
||
display: block;
|
||
background: #9ACAFD;
|
||
border-radius: 3px 3px 3px 3px;
|
||
opacity: 1;
|
||
}
|
||
|
||
.gang_count {
|
||
width: 55px;
|
||
height: 43px;
|
||
font-size: 34px;
|
||
margin-left: 10px;
|
||
margin-right: 40px;
|
||
font-family: TRENDS;
|
||
color: #9ACAFD;
|
||
line-height: 22px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.imgBox6 {
|
||
height: 93px;
|
||
width: 1156px;
|
||
margin-bottom: 60px;
|
||
margin-top: 88px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 1654px;
|
||
right: 960px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
.six {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
#ruan {
|
||
width: 100%;
|
||
height: 540px;
|
||
}
|
||
|
||
.gang_r {
|
||
margin-top: 100px;
|
||
|
||
.g_one {
|
||
width: 600px;
|
||
height: auto;
|
||
height: 34px;
|
||
font-size: 22px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||
font-weight: bold;
|
||
display: flex;
|
||
margin-bottom: 100px;
|
||
color: #FFFFFF;
|
||
|
||
.gang_one {
|
||
width: 34px;
|
||
height: 34px;
|
||
display: block;
|
||
background: #2EEDAF;
|
||
border-radius: 3px 3px 3px 3px;
|
||
margin-right: 20px;
|
||
opacity: 1;
|
||
}
|
||
|
||
.gang_count {
|
||
width: 55px;
|
||
height: 43px;
|
||
font-size: 34px;
|
||
font-family: TRENDS;
|
||
color: #2EEDAF;
|
||
line-height: 22px;
|
||
}
|
||
}
|
||
|
||
.g_two {
|
||
width: 600px;
|
||
height: auto;
|
||
height: 34px;
|
||
font-size: 22px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||
font-weight: bold;
|
||
display: flex;
|
||
margin-bottom: 100px;
|
||
color: #FFFFFF;
|
||
|
||
.gang_two {
|
||
width: 34px;
|
||
height: 34px;
|
||
display: block;
|
||
margin-right: 20px;
|
||
background: #2EEDD8;
|
||
border-radius: 3px 3px 3px 3px;
|
||
opacity: 1;
|
||
}
|
||
|
||
.gang_count {
|
||
width: 55px;
|
||
height: 43px;
|
||
font-size: 34px;
|
||
margin-left: 10px;
|
||
margin-right: 40px;
|
||
font-family: TRENDS;
|
||
color: #2EEDD8;
|
||
line-height: 22px;
|
||
}
|
||
}
|
||
|
||
.g_three {
|
||
width: 600px;
|
||
height: auto;
|
||
height: 34px;
|
||
font-size: 22px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||
font-weight: bold;
|
||
display: flex;
|
||
margin-bottom: 100px;
|
||
color: #FFFFFF;
|
||
|
||
.gang_three {
|
||
width: 34px;
|
||
height: 34px;
|
||
margin-right: 20px;
|
||
display: block;
|
||
background: #9ACAFD;
|
||
border-radius: 3px 3px 3px 3px;
|
||
opacity: 1;
|
||
}
|
||
|
||
.gang_count {
|
||
width: 55px;
|
||
height: 43px;
|
||
font-size: 34px;
|
||
margin-left: 10px;
|
||
margin-right: 40px;
|
||
font-family: TRENDS;
|
||
color: #9ACAFD;
|
||
line-height: 22px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
right: 1008px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
}
|
||
</style>
|