update
This commit is contained in:
parent
1c5e0f2a69
commit
eca11f0081
@ -78,9 +78,6 @@ export default function getOptions(seriesData, name) {
|
|||||||
color: '#213259a0',
|
color: '#213259a0',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// interval: 10,
|
|
||||||
// min: 0,
|
|
||||||
// max: 100,
|
|
||||||
},
|
},
|
||||||
series: seriesData.map((arr, index) => ({
|
series: seriesData.map((arr, index) => ({
|
||||||
name: index + 1 + '#' + name,
|
name: index + 1 + '#' + name,
|
||||||
@ -94,162 +91,6 @@ export default function getOptions(seriesData, name) {
|
|||||||
]),
|
]),
|
||||||
},
|
},
|
||||||
})),
|
})),
|
||||||
// [
|
|
||||||
// {
|
|
||||||
// name: '1#天然气I',
|
|
||||||
// data: Array(7)
|
|
||||||
// .fill(1)
|
|
||||||
// .map((_) => {
|
|
||||||
// return randomInt(1000, 2000);
|
|
||||||
// }),
|
|
||||||
// type: 'line',
|
|
||||||
// areaStyle: {
|
|
||||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
// { offset: 0, color: '#12FFF540' },
|
|
||||||
// { offset: 0.5, color: '#12FFF520' },
|
|
||||||
// { offset: 1, color: '#12FFF510' },
|
|
||||||
// ]),
|
|
||||||
// },
|
|
||||||
// // smooth: true,
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: '2#天然气I',
|
|
||||||
// data: Array(7)
|
|
||||||
// .fill(1)
|
|
||||||
// .map((_) => {
|
|
||||||
// return randomInt(1000, 2000);
|
|
||||||
// }),
|
|
||||||
// type: 'line',
|
|
||||||
// areaStyle: {
|
|
||||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
// { offset: 0, color: '#2760FF40' },
|
|
||||||
// { offset: 0.5, color: '#2760FF20' },
|
|
||||||
// { offset: 1, color: '#2760FF10' },
|
|
||||||
// ]),
|
|
||||||
// },
|
|
||||||
// // smooth: true,
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: '3#天然气I',
|
|
||||||
// data: Array(7)
|
|
||||||
// .fill(1)
|
|
||||||
// .map((_) => {
|
|
||||||
// return randomInt(1000, 2000);
|
|
||||||
// }),
|
|
||||||
// type: 'line',
|
|
||||||
// areaStyle: {
|
|
||||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
// { offset: 0, color: '#FFD16040' },
|
|
||||||
// { offset: 0.5, color: '#FFD16020' },
|
|
||||||
// {
|
|
||||||
// offset: 1,
|
|
||||||
// color: '#FFD16010',
|
|
||||||
// },
|
|
||||||
// ]),
|
|
||||||
// },
|
|
||||||
// // smooth: true,
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: '4#天然气I',
|
|
||||||
// data: Array(7)
|
|
||||||
// .fill(1)
|
|
||||||
// .map((_) => {
|
|
||||||
// return randomInt(1000, 2000);
|
|
||||||
// }),
|
|
||||||
// type: 'line',
|
|
||||||
// areaStyle: {
|
|
||||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
// { offset: 0, color: '#E8009140' },
|
|
||||||
// {
|
|
||||||
// offset: 0.5,
|
|
||||||
// color: '#E8009120',
|
|
||||||
// },
|
|
||||||
// { offset: 1, color: '#E8009110' },
|
|
||||||
// ]),
|
|
||||||
// },
|
|
||||||
// // smooth: true,
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: '5#天然气I',
|
|
||||||
// data: Array(7)
|
|
||||||
// .fill(1)
|
|
||||||
// .map((_) => {
|
|
||||||
// return randomInt(1000, 2000);
|
|
||||||
// }),
|
|
||||||
// type: 'line',
|
|
||||||
// areaStyle: {
|
|
||||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
// { offset: 0, color: '#8064ff40' },
|
|
||||||
// {
|
|
||||||
// offset: 0.5,
|
|
||||||
// color: '#8064ff20',
|
|
||||||
// },
|
|
||||||
// { offset: 1, color: '#8064ff10' },
|
|
||||||
// ]),
|
|
||||||
// },
|
|
||||||
// // smooth: true,
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: '6#天然气I',
|
|
||||||
// data: Array(7)
|
|
||||||
// .fill(1)
|
|
||||||
// .map((_) => {
|
|
||||||
// return randomInt(1000, 2000);
|
|
||||||
// }),
|
|
||||||
// type: 'line',
|
|
||||||
// areaStyle: {
|
|
||||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
// { offset: 0, color: '#ff8a3b40' },
|
|
||||||
// {
|
|
||||||
// offset: 0.5,
|
|
||||||
// color: '#ff8a3b20',
|
|
||||||
// },
|
|
||||||
// { offset: 1, color: '#ff8a3b10' },
|
|
||||||
// ]),
|
|
||||||
// },
|
|
||||||
// // smooth: true,
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: '7#天然气I',
|
|
||||||
// data: Array(7)
|
|
||||||
// .fill(1)
|
|
||||||
// .map((_) => {
|
|
||||||
// return randomInt(1000, 2000);
|
|
||||||
// }),
|
|
||||||
// type: 'line',
|
|
||||||
// areaStyle: {
|
|
||||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
// { offset: 0, color: '#8cd26d40' },
|
|
||||||
// {
|
|
||||||
// offset: 0.5,
|
|
||||||
// color: '#8cd26d20',
|
|
||||||
// },
|
|
||||||
// { offset: 1, color: '#8cd26d10' },
|
|
||||||
// ]),
|
|
||||||
// },
|
|
||||||
// // smooth: true,
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: '8#天然气I',
|
|
||||||
// data: Array(7)
|
|
||||||
// .fill(1)
|
|
||||||
// .map((_) => {
|
|
||||||
// return randomInt(1000, 2000);
|
|
||||||
// }),
|
|
||||||
// type: 'line',
|
|
||||||
// areaStyle: {
|
|
||||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
// { offset: 0, color: '#2aa1ff40' },
|
|
||||||
// {
|
|
||||||
// offset: 0.5,
|
|
||||||
// color: '#2aa1ff20',
|
|
||||||
// },
|
|
||||||
// { offset: 1, color: '#2aa1ff10' },
|
|
||||||
// ]),
|
|
||||||
// },
|
|
||||||
// // smooth: true,
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
},
|
},
|
||||||
|
|||||||
@ -19,7 +19,7 @@ const Chart2 = () => {
|
|||||||
{
|
{
|
||||||
icon: icon3,
|
icon: icon3,
|
||||||
label: '剩余时间',
|
label: '剩余时间',
|
||||||
value: ctx.runState?.lastFireChangeTime.split('S')[0] + 's' || '0s',
|
value: ctx.runState?.lastFireChangeTime || '-',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: icon2,
|
icon: icon2,
|
||||||
|
|||||||
@ -1,113 +0,0 @@
|
|||||||
import React, { useEffect, useState } from 'react'
|
|
||||||
import { motion } from "framer-motion"
|
|
||||||
|
|
||||||
//烟气处理
|
|
||||||
import Item1 from './substitutionCharts/Chart2.jsx'
|
|
||||||
|
|
||||||
//温度变化
|
|
||||||
import Item2 from './substitutionCharts/Chart3.jsx'
|
|
||||||
|
|
||||||
//发电量
|
|
||||||
import Item3 from './substitutionCharts/Chart4.jsx'
|
|
||||||
|
|
||||||
import Icon1 from '../../assets/Icon/LeftChart2Icon.png'
|
|
||||||
import Icon2 from '../../assets/Icon/LeftChart2Icon2.png'
|
|
||||||
import './Chart2.less'
|
|
||||||
|
|
||||||
const data = [10, 25, 30, 25, 58, 23, 36, 34]
|
|
||||||
|
|
||||||
//温度
|
|
||||||
const Temptitle = "温度变化";
|
|
||||||
const Tempxdata = ["1:00", "2:00", "3:00", "4:00", "5:00", "6:00", "7:00", "8:00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00", "24:00"]
|
|
||||||
const Tempdata = [420, 410, 410, 300, 350, 380, 352, 410, 410, 300, 350, 380, 352, 410, 410, 300, 350, 380, 352, 350, 380, 352, 380, 352]
|
|
||||||
|
|
||||||
|
|
||||||
//风机频率数据
|
|
||||||
var data2 = [[800, 4302, 200, 3234, 800, 4302, 200, 3234, 800, 4302, 200, 3234, 800, 4302, 200, 3234],
|
|
||||||
[4450, 553, 2350, 234, 4450, 553, 2350, 234, 4450, 553, 2350, 234, 4450, 553, 2350, 234],
|
|
||||||
[2400, 305, 3500, 234, 2400, 305, 3500, 234, 2400, 305, 3500, 234, 2400, 305, 3500, 234],
|
|
||||||
[50, 3302, 480, 3334, 50, 3302, 480, 3334, 50, 3302, 480, 3334, 50, 3302, 480, 3334],
|
|
||||||
]
|
|
||||||
|
|
||||||
var data3 = [[4450, 553, 2350, 234, 4452, 553, 2350, 234, 4450, 553, 2350, 234, 4450, 553, 2350, 234],
|
|
||||||
[700, 4002, 200, 3234, 800, 4302, 200, 3234, 700, 3302, 200, 3234, 800, 4302, 200, 3234],
|
|
||||||
[50, 3302, 480, 3334, 53, 3302, 480, 3034, 50, 3302, 480, 3334, 20, 3302, 580, 3334],
|
|
||||||
[2400, 305, 3500, 234, 2400, 305, 3500, 234, 2400, 305, 3500, 234, 2400, 205, 3500, 234],
|
|
||||||
]
|
|
||||||
|
|
||||||
|
|
||||||
export default function Chart2() {
|
|
||||||
|
|
||||||
const [index, setIndex] = useState(1)
|
|
||||||
let num = 1;
|
|
||||||
useEffect(() => {
|
|
||||||
const timer = setInterval(() => { SwitchIndex() }, 10000);
|
|
||||||
return () => clearInterval(timer);
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
function SwitchIndex() {
|
|
||||||
num = num + 1
|
|
||||||
if (num < 3) {
|
|
||||||
setIndex(num)
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
num = 1
|
|
||||||
setIndex(num)
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function SwitchData(index) {
|
|
||||||
switch (index) {
|
|
||||||
case 1: return <Item data={data} />
|
|
||||||
case 2: return <Item1 data={Tempdata} title={Temptitle} xdata={Tempxdata} />
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//切换标题
|
|
||||||
function SwitchTitle(index) {
|
|
||||||
switch (index) {
|
|
||||||
case 1: return "烟气处理"
|
|
||||||
case 2: return "余热发电"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//切换LOGO
|
|
||||||
function SwitchIcon(index) {
|
|
||||||
switch (index) {
|
|
||||||
case 1: return Icon1
|
|
||||||
case 2: return Icon2
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//切换图表1
|
|
||||||
function SwitchChart1(index) {
|
|
||||||
switch (index) {
|
|
||||||
case 1: return <Item1 />
|
|
||||||
case 2: return <Item3 />
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//切换图表2
|
|
||||||
function SwitchChart2(index) {
|
|
||||||
switch (index) {
|
|
||||||
case 1: return <Item2 data={data2} />
|
|
||||||
case 2: return <Item2 data={data3} />
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='LeftChart2AllBorder'>
|
|
||||||
<div className='LeftChart2ItemitemBorder'>
|
|
||||||
<img src={SwitchIcon(index)} alt="图片加载错误" className='LeftChart2ItemIcon' />
|
|
||||||
<div className='LeftChart2ItemTitle'>{SwitchTitle(index)}</div>
|
|
||||||
</div>
|
|
||||||
<div className='LeftChart2Item1Row1'>
|
|
||||||
{SwitchChart1(index)}
|
|
||||||
</div>
|
|
||||||
<div className='LeftChart2Item1Row2'>
|
|
||||||
{SwitchChart2(index)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
.LeftChart2AllBorder {
|
|
||||||
width: 624px;
|
|
||||||
height: 632px;
|
|
||||||
background: url('../../assets/ItemBg2.png');
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.LeftChart2ItemitemBorder {
|
|
||||||
margin-top: 24px;
|
|
||||||
margin-left: 24px;
|
|
||||||
width: 100%;
|
|
||||||
height: 24px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: flex-start;
|
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
.LeftChart2ItemIcon {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
margin-top: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.LeftChart2ItemTitle {
|
|
||||||
font-size: 24px;
|
|
||||||
color: #ffffff;
|
|
||||||
margin-left: 8px;
|
|
||||||
margin-top: -5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.LeftChart2Item1Row1 {
|
|
||||||
width: 95%;
|
|
||||||
height: 271px;
|
|
||||||
align-self: center;
|
|
||||||
margin-top: -56px;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
.LeftChart2Item1Row2 {
|
|
||||||
width: 95%;
|
|
||||||
height: 271px;
|
|
||||||
align-self: center;
|
|
||||||
margin-bottom:24px;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,5 +1,4 @@
|
|||||||
.leftBar {
|
.leftBar {
|
||||||
// border: 2px solid red;
|
|
||||||
width: 625px;
|
width: 625px;
|
||||||
height: 966px;
|
height: 966px;
|
||||||
margin-left: 40px;
|
margin-left: 40px;
|
||||||
@ -7,19 +6,4 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
// .LeftChart1Border {
|
|
||||||
// width: 100%;
|
|
||||||
// height: 304px;
|
|
||||||
// background: url('../../assets/ItemBg.png');
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .LeftChart2Border {
|
|
||||||
// width: 624px;
|
|
||||||
// height: 632px;
|
|
||||||
// background: url('../../assets/ItemBg2.png');
|
|
||||||
// display: flex;
|
|
||||||
// flex-direction: column;
|
|
||||||
// //justify-content: space-between;
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,38 +0,0 @@
|
|||||||
|
|
||||||
import React, { Component } from 'react';
|
|
||||||
|
|
||||||
import './Chart1.less'
|
|
||||||
|
|
||||||
export default class Chart7 extends Component {
|
|
||||||
|
|
||||||
parseData() {
|
|
||||||
const { data } = this.props
|
|
||||||
const name = Object.keys(data)
|
|
||||||
const Value = Object.values(data)
|
|
||||||
return name.map((item, index) => (
|
|
||||||
|
|
||||||
<div className='buttonChart7FormBorder' key={index}>
|
|
||||||
|
|
||||||
<div className='buttonChart7FormTxt1Border'>
|
|
||||||
<h2 className='buttonChart7FormTxt1'>{name[index]}:</h2>
|
|
||||||
</div>
|
|
||||||
<div className='buttonChart7FormTxt2Border'>
|
|
||||||
<h2 className='buttonChart7FormTxt2'>{Value[index]}</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
))
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div className='ButtonChart7itemDetailBorder'>
|
|
||||||
{this.parseData()}
|
|
||||||
</div >
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,44 +0,0 @@
|
|||||||
.ButtonChart7itemDetailBorder {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin-top:-8px;
|
|
||||||
|
|
||||||
.buttonChart7FormBorder {
|
|
||||||
background: url(../../../assets/ButtonChart7ItemBg.png);
|
|
||||||
margin-top: 1.5%;
|
|
||||||
width: 288px;
|
|
||||||
height: 48px;
|
|
||||||
border-radius: 3px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: left;
|
|
||||||
.buttonChart7FormTxt2Border {
|
|
||||||
width: 30%;
|
|
||||||
height: 100%;
|
|
||||||
.buttonChart7FormTxt2 {
|
|
||||||
margin-left: 20%;
|
|
||||||
margin-right: 5%;
|
|
||||||
margin-top: 13px;
|
|
||||||
text-align:left;
|
|
||||||
font-size: 15px;
|
|
||||||
color: rgba(255, 255, 255, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.buttonChart7FormTxt1Border {
|
|
||||||
width: 55%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.buttonChart7FormTxt1 {
|
|
||||||
margin-top: 13px;
|
|
||||||
margin-left: 3%;
|
|
||||||
text-align:right;
|
|
||||||
font-size: 15px;
|
|
||||||
color: rgba(255, 255, 255, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,109 +0,0 @@
|
|||||||
|
|
||||||
import React, { Component } from 'react';
|
|
||||||
import './Chart2.less'
|
|
||||||
import ReactECharts from 'echarts-for-react';
|
|
||||||
|
|
||||||
var data = [[320, 302, 301, 334, 390, 330, 320, 100], [120, 132, 101, 134, 90, 230, 210, 100], [220, 182, 191, 234, 290, 330, 310, 100], [150, 212, 201, 154, 190, 330, 410, 100], [320, 332, 301, 334, 290, 330, 320, 300], [320, 332, 301, 334, 290, 330, 320, 300]]
|
|
||||||
|
|
||||||
var name = ['烟气总量', '余氧总量', '氮氧化物排放浓度', '二氧化碳排放浓度', '颗粒物排放浓度', '烟气流速']
|
|
||||||
|
|
||||||
|
|
||||||
var color = ["#2760ff", "#8167f6", "#5b9bff", "#99d66c", "#ffd160", "#ff8a40"]
|
|
||||||
var fontColor = '#fff'
|
|
||||||
var lineColor = 'rgba(33, 50, 89,0.8)'
|
|
||||||
|
|
||||||
function makeseries(data, name, color) {
|
|
||||||
if (data) {
|
|
||||||
let All = []
|
|
||||||
for (let i in data) {
|
|
||||||
All.push({
|
|
||||||
name: name[i],
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'total',
|
|
||||||
barWidth: "20%",
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: color[i],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
|
|
||||||
},
|
|
||||||
data: data[i]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return All;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
class Chart2 extends Component {
|
|
||||||
|
|
||||||
|
|
||||||
getOption = () => ({
|
|
||||||
|
|
||||||
legend: {
|
|
||||||
right: "0%",
|
|
||||||
width: "70%",
|
|
||||||
height: "14%",
|
|
||||||
itemWidth: 17,
|
|
||||||
itemHeight: 13.5,
|
|
||||||
orient: "vertical",
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 12,
|
|
||||||
color: "#F1F1F3",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: '3%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '3%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
||||||
axisLabel: {
|
|
||||||
show: true,
|
|
||||||
color: fontColor,
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: lineColor,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
axisLabel: {
|
|
||||||
show: true,
|
|
||||||
color: fontColor,
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show:true,
|
|
||||||
lineStyle: {
|
|
||||||
color: lineColor,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: lineColor,
|
|
||||||
width: 0.5,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: makeseries(data, name, color)
|
|
||||||
})
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div className='LeftChart2itemDetailBorder'>
|
|
||||||
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
|
|
||||||
</div >
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Chart2;
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
.LeftChart2itemDetailBorder {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin-top:-8px;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,120 +0,0 @@
|
|||||||
|
|
||||||
import React, { Component } from 'react';
|
|
||||||
import './Chart3.less'
|
|
||||||
import ReactECharts from 'echarts-for-react';
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
var name = ['10HZ-15HZ', '15HZ-25HZ', '30HZ-35HZ', '40HZ-45HZ']
|
|
||||||
|
|
||||||
|
|
||||||
var color = ["#2760ff", "#ffb70c", "#3dbdc2", "#e02094"]
|
|
||||||
var fontColor = '#fff'
|
|
||||||
var lineColor = 'rgba(33, 50, 89,0.8)'
|
|
||||||
|
|
||||||
function makeseries(data, name, color) {
|
|
||||||
if (data) {
|
|
||||||
let All = []
|
|
||||||
for (let i in data) {
|
|
||||||
All.push({
|
|
||||||
name: name[i],
|
|
||||||
type: 'line',
|
|
||||||
showSymbol: false,
|
|
||||||
symbol: "circle",
|
|
||||||
data: data[i],
|
|
||||||
lineStyle: {
|
|
||||||
width: 1,
|
|
||||||
color: color[i]
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
|
|
||||||
color: color[i],
|
|
||||||
|
|
||||||
},
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return All;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
class Chart3 extends Component {
|
|
||||||
|
|
||||||
|
|
||||||
getOption = () => ({
|
|
||||||
|
|
||||||
title: {
|
|
||||||
text: '风机运行频率',
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 20,
|
|
||||||
color: "#52FFF8"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
legend: {
|
|
||||||
right: "0%",
|
|
||||||
width: "70%",
|
|
||||||
height: "14%",
|
|
||||||
itemWidth: 17,
|
|
||||||
itemHeight: 13.5,
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 12,
|
|
||||||
color: "#F1F1F3",
|
|
||||||
},
|
|
||||||
// itemStyle: {
|
|
||||||
// color: "rgba(222, 9, 9, 1)"
|
|
||||||
// },
|
|
||||||
data: name
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: '3%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '3%', containLabel: true
|
|
||||||
},
|
|
||||||
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
|
||||||
data: ['day1', 'day2', 'day3', 'day4', 'day5', 'day6', 'day7', 'day5', 'day6', 'day7', 'day6', 'day7', 'day5', 'day6', 'day7'],
|
|
||||||
axisLabel: {
|
|
||||||
show: true,
|
|
||||||
color: fontColor,
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: lineColor,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
axisLabel: {
|
|
||||||
show: true,
|
|
||||||
color: fontColor,
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show:true,
|
|
||||||
lineStyle: {
|
|
||||||
color: lineColor,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: lineColor,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: makeseries(this.props.data, name, color)
|
|
||||||
})
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div className='LeftChart3itemDetailBorder'>
|
|
||||||
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
|
|
||||||
</div >
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Chart3;
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
.LeftChart3itemDetailBorder {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin-top:-8px;
|
|
||||||
}
|
|
||||||
@ -1,126 +0,0 @@
|
|||||||
|
|
||||||
import React, { Component } from 'react';
|
|
||||||
import './Chart4.less'
|
|
||||||
import ReactECharts from 'echarts-for-react';
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
var name = ['10HZ-15HZ', '15HZ-25HZ', '30HZ-35HZ', '40HZ-45HZ']
|
|
||||||
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
|
|
||||||
var color = ["#2760ff", "#ffb70c", "#3dbdc2", "#e02094"]
|
|
||||||
var fontColor = '#fff'
|
|
||||||
var lineColor = 'rgba(33, 50, 89,0.8)'
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
class Chart3 extends Component {
|
|
||||||
|
|
||||||
|
|
||||||
getOption = () => ({
|
|
||||||
|
|
||||||
title: {
|
|
||||||
text: '发电量',
|
|
||||||
top: "2%",
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 20,
|
|
||||||
color: "#52FFF8"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
legend: {
|
|
||||||
right: "0%",
|
|
||||||
width: "70%",
|
|
||||||
height: "14%",
|
|
||||||
itemWidth: 17,
|
|
||||||
itemHeight: 13.5,
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 12,
|
|
||||||
color: "#F1F1F3",
|
|
||||||
},
|
|
||||||
// itemStyle: {
|
|
||||||
// color: "rgba(222, 9, 9, 1)"
|
|
||||||
// },
|
|
||||||
data: name
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: '3%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '0%',
|
|
||||||
top:'30%',
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
|
||||||
data: ['day1', 'day2', 'day3', 'day4', 'day5', 'day6', 'day7', 'day5', 'day6', 'day7', 'day6', 'day7', 'day5', 'day6', 'day7'],
|
|
||||||
axisLabel: {
|
|
||||||
show: true,
|
|
||||||
color: fontColor,
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: lineColor,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
axisLabel: {
|
|
||||||
show: true,
|
|
||||||
color: fontColor,
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: lineColor,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: lineColor,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: {
|
|
||||||
|
|
||||||
name:'发电量',
|
|
||||||
type: 'line',
|
|
||||||
showSymbol: true,
|
|
||||||
symbol: "circle",
|
|
||||||
symbolSize:8,
|
|
||||||
symbolBorder:"rgba(17, 36, 246,0.1)",
|
|
||||||
data: [200,320,121,125,585,213,521,326,542,258,632,145,258,632,145],
|
|
||||||
lineStyle: {
|
|
||||||
width: 1,
|
|
||||||
color:"rgba(246, 23, 106,0.9)",
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: 'rgba(246, 23, 106,0.3)' },
|
|
||||||
{ offset: 0.5, color: 'rgba(246, 23, 106,0.2)' },
|
|
||||||
{ offset: 1, color: 'rgba(246, 23, 106,0.1)' }
|
|
||||||
]),
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
borderColor: '#F6176A',
|
|
||||||
color: "rgba(4, 20, 36,0.8)",
|
|
||||||
},
|
|
||||||
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div className='LeftChart4itemDetailBorder'>
|
|
||||||
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '80%' }} />
|
|
||||||
</div >
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Chart3;
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
.LeftChart4itemDetailBorder {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
import React, { useEffect, useState } from 'react'
|
|
||||||
|
|
||||||
import Item from './substitutionCharts/Chart1/index.jsx'
|
|
||||||
// import Icon1 from '../../assets/Icon/rightChart1ICon.png'
|
|
||||||
|
|
||||||
import "./Chart1.less"
|
|
||||||
|
|
||||||
export default function Chart1() {
|
|
||||||
return (
|
|
||||||
<div className='rightChart1Border'>
|
|
||||||
|
|
||||||
<div className='RightChart1ItemitemBorder'>
|
|
||||||
{/* <img src={Icon1} alt="图片加载错误" className='RightChart1ItemIcon' /> */}
|
|
||||||
<div className='RightChart1Title'>储能电站</div>
|
|
||||||
</div>
|
|
||||||
<div className='RightChart1ItemBorder'>
|
|
||||||
<Item index={1} data={345} name={'日充电量'} unit={'kwh'} />
|
|
||||||
<Item index={2} data={345} name={'月充电量'} unit={'kwh'} />
|
|
||||||
<Item index={3} data={2} name={'日收益'} unit={'万元'} />
|
|
||||||
<Item index={1} data={215} name={'日放电量'} unit={'kwh'} />
|
|
||||||
<Item index={2} data={345} name={'月放电量'} unit={'kwh'} />
|
|
||||||
<Item index={3} data={12} name={'月收益'} unit={'万元'} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,45 +0,0 @@
|
|||||||
.rightChart1Border {
|
|
||||||
width: 625px;
|
|
||||||
height: 306px;
|
|
||||||
background: url('../../assets/ItemBg.png');
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.RightChart1ItemitemBorder {
|
|
||||||
margin-top: 24px;
|
|
||||||
margin-left: 24px;
|
|
||||||
width: 100%;
|
|
||||||
height: 24px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: flex-start;
|
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
.RightChart1ItemIcon {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
margin-top: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.RightChart1Title {
|
|
||||||
font-size: 24px;
|
|
||||||
color: #ffffff;
|
|
||||||
margin-left: 8px;
|
|
||||||
margin-top: -5px;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.RightChart1ItemBorder {
|
|
||||||
width: 579px;
|
|
||||||
height: 230px;
|
|
||||||
margin-left: 16px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content:space-around;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,109 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { useState, useEffect } from 'react'
|
|
||||||
import styled from 'styled-components'
|
|
||||||
import { motion } from 'framer-motion'
|
|
||||||
|
|
||||||
// import Icon from '../../assets/Icon/rightChart2ICon.png'
|
|
||||||
|
|
||||||
import Item from './substitutionCharts/Chart2.jsx'
|
|
||||||
|
|
||||||
import './Chart2.less'
|
|
||||||
|
|
||||||
const Daytitle = "日电量统计";
|
|
||||||
const DayLendged = ["日储能", "日放能"];
|
|
||||||
const Dayxdata = ["7:00", "8:00", "9:00", "10:00", "11:00", "12:00", "13:00"]
|
|
||||||
const Daydata = [[70, 45, 10, 28, 18, 28, 46], [80, 55, 70, 18, 48, 58, 76]]
|
|
||||||
|
|
||||||
const Monthtitle = "月电量统计";
|
|
||||||
const MonthLendged = ["月储能", "月放能"];
|
|
||||||
const Monthxdata = ["一月", "二月", "三月", "四月", "五月", "六月", "七月"]
|
|
||||||
const Monthdata = [[70, 45, 10, 28, 18, 28, 46], [80, 55, 70, 18, 48, 58, 76]]
|
|
||||||
|
|
||||||
const Yeartitle = "收益统计";
|
|
||||||
const YearLendged = ["日收益", "月收益"];
|
|
||||||
const Yearxdata = ["2016", "2017", "2018", "2019", "2020", "2021", "2022"]
|
|
||||||
const Yeardata = [[70, 45, 10, 28, 18, 28, 46], [80, 55, 70, 18, 48, 58, 76]]
|
|
||||||
|
|
||||||
|
|
||||||
const Gap = styled.div`
|
|
||||||
width:1px;
|
|
||||||
height:80%;
|
|
||||||
margin-top:20px;
|
|
||||||
|
|
||||||
transform: translatey(-17px);
|
|
||||||
background-color:#010D18;
|
|
||||||
`
|
|
||||||
|
|
||||||
const Gap2 = styled(Gap)`
|
|
||||||
transform: translateX(0px);
|
|
||||||
transform: translatey(-17px);
|
|
||||||
`
|
|
||||||
|
|
||||||
// rgba(2,69,126,1)
|
|
||||||
export default function Chart2() {
|
|
||||||
|
|
||||||
const [index, setIndex] = useState(1)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const timer = setInterval(() => { SwitchIndex() }, 10000);
|
|
||||||
return () => clearInterval(timer);
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
let num = 1;
|
|
||||||
|
|
||||||
|
|
||||||
function SwitchIndex() {
|
|
||||||
num = num + 1
|
|
||||||
if (num < 4) {
|
|
||||||
setIndex(num)
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
num = 1
|
|
||||||
setIndex(num)
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function SwitchPage(index) {
|
|
||||||
|
|
||||||
switch (index) {
|
|
||||||
case 1: return <Item title={Daytitle} xdata={Dayxdata} data={Daydata} lendge={DayLendged} />
|
|
||||||
case 2: return <Item title={Monthtitle} xdata={Monthxdata} data={Monthdata} lendge={MonthLendged} />
|
|
||||||
case 3: return <Item title={Yeartitle} xdata={Yearxdata} data={Yeardata} lendge={YearLendged} />
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='rightchart2AllBorder'>
|
|
||||||
<div className='rightchart2ItemitemBorder'>
|
|
||||||
{/* <img src={Icon} alt="图片加载错误" className='rightchart2ItemIcon' /> */}
|
|
||||||
<div className='rightchart2ItemTitle'>光伏发电统计</div>
|
|
||||||
</div>
|
|
||||||
< div className='rightchart2Switchbox'>
|
|
||||||
<div className='rightchart2SlelectBox' style={{ backgroundColor: `rgba(2,69,126,${index == 1 ? 1 : 0})` }}><p>日</p></ div>
|
|
||||||
<Gap style={{opacity:index==3?'100%':'0%',}}></Gap>
|
|
||||||
<div className='rightchart2SlelectBox' style={{ backgroundColor: `rgba(2,69,126,${index == 2 ? 1 : 0})` }}><p>月</p> </ div>
|
|
||||||
<Gap2 style={{opacity:index==1?'100%':'0%',}}></Gap2>
|
|
||||||
<div className='rightchart2SlelectBox' style={{ backgroundColor: `rgba(2,69,126,${index == 3 ? 1 : 0})` }}><p>年</p></ div>
|
|
||||||
</ div>
|
|
||||||
<motion.div className='rightchart2ItemBorder'
|
|
||||||
// key={index}
|
|
||||||
// initial={{ opacity: 0, y: 5 }}
|
|
||||||
// animate={{ opacity: 1, y: 0 }}
|
|
||||||
// transition={{ ease: "easeIn", duration: 0.5 }}
|
|
||||||
>
|
|
||||||
|
|
||||||
{SwitchPage(index)}
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,71 +0,0 @@
|
|||||||
.rightchart2AllBorder {
|
|
||||||
width: 625px;
|
|
||||||
height: 306px;
|
|
||||||
background: url('../../assets/ItemBg.png');
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-top: 24px;
|
|
||||||
|
|
||||||
.rightchart2ItemitemBorder {
|
|
||||||
margin-top: 24px;
|
|
||||||
margin-left: 24px;
|
|
||||||
width: 100%;
|
|
||||||
height: 24px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: flex-start;
|
|
||||||
|
|
||||||
|
|
||||||
.rightchart2ItemIcon {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
margin-top: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rightchart2ItemTitle {
|
|
||||||
font-size: 24px;
|
|
||||||
color: #ffffff;
|
|
||||||
margin-left: 8px;
|
|
||||||
margin-top: -5px;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.rightchart2Switchbox {
|
|
||||||
width: 150px;
|
|
||||||
height: 32px;
|
|
||||||
background-color: #03233C;
|
|
||||||
align-self: flex-end;
|
|
||||||
margin-right: 15px;
|
|
||||||
border-radius: 5px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.rightchart2SlelectBox {
|
|
||||||
width: 33%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
border-radius: 5px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.rightchart2SlelectBox p {
|
|
||||||
margin: 3 auto;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 15px;
|
|
||||||
text-align: center;
|
|
||||||
cursor : pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rightchart2ItemBorder {
|
|
||||||
width: 95%;
|
|
||||||
height: 300px;
|
|
||||||
margin-left: 16px;
|
|
||||||
margin-top: -15px;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,100 +0,0 @@
|
|||||||
import React, { useEffect, useState } from 'react'
|
|
||||||
import { motion } from "framer-motion"
|
|
||||||
import styled from 'styled-components'
|
|
||||||
|
|
||||||
|
|
||||||
import Item from './substitutionCharts/Chart3.jsx'
|
|
||||||
// import Icon from '../../assets/Icon/rightChart3ICon.png'
|
|
||||||
import './Chart3.less'
|
|
||||||
|
|
||||||
const Dayxdata = ["7:00", "8:00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00"]
|
|
||||||
const Daydata = [70, 45, 10, 28, 18, 28, 46, 18, 28, 46, 20]
|
|
||||||
|
|
||||||
const Monthxdata = ["一月", "二月", "三月", "四月", "五月", "六月", "七月"]
|
|
||||||
const Monthdata = [70, 45, 10, 28, 18, 28, 46]
|
|
||||||
|
|
||||||
const Yearxdata = ["2016", "2017", "2018", "2019", "2020", "2021", "2022"]
|
|
||||||
const Yeardata = [70, 45, 10, 28, 18, 28, 46]
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const Gap = styled.div`
|
|
||||||
width:1px;
|
|
||||||
height:80%;
|
|
||||||
margin-top:20px
|
|
||||||
transform: translateX(22px);
|
|
||||||
transform: translatey(3px);
|
|
||||||
background-color:#010D18;
|
|
||||||
`
|
|
||||||
|
|
||||||
const Gap2 = styled(Gap)`
|
|
||||||
transform: translateX(0px);
|
|
||||||
transform: translatey(3px);
|
|
||||||
`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default function Chart3() {
|
|
||||||
|
|
||||||
const [index, setIndex] = useState(1)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setInterval(() => { SwitchIndex() }, 10000);
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
let num = 1;
|
|
||||||
|
|
||||||
|
|
||||||
function SwitchIndex() {
|
|
||||||
num = num + 1
|
|
||||||
if (num < 4) {
|
|
||||||
setIndex(num)
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
num = 1
|
|
||||||
setIndex(num)
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function SwitchPage(index) {
|
|
||||||
|
|
||||||
switch (index) {
|
|
||||||
case 1: return <Item xdata={Dayxdata} data={Daydata} />
|
|
||||||
case 2: return <Item xdata={Monthxdata} data={Monthdata} />
|
|
||||||
case 3: return <Item xdata={Yearxdata} data={Yeardata} />
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='RightChart3AllBorder'>
|
|
||||||
|
|
||||||
<div className='RightChart3ItemitemBorder'>
|
|
||||||
{/* <img src={Icon} alt="图片加载错误" className='RightChart3ItemIcon' /> */}
|
|
||||||
<div className='RightChart3ItemTitle'>储能电站</div>
|
|
||||||
</div>
|
|
||||||
< div className='rightchart3Switchbox'>
|
|
||||||
<div className='rightchart3SlelectBox' style={{ backgroundColor: `rgba(2,69,126,${index == 1 ? 1 : 0})` }}><p>日</p></ div>
|
|
||||||
<Gap style={{ opacity: index == 3 ? '100%' : '0%', }}></Gap>
|
|
||||||
<div className='rightchart3SlelectBox' style={{ backgroundColor: `rgba(2,69,126,${index == 2 ? 1 : 0})` }}><p>月</p> </ div>
|
|
||||||
<Gap2 style={{ opacity: index == 1 ? '100%' : '0%', }}></Gap2>
|
|
||||||
<div className='rightchart3SlelectBox' style={{ backgroundColor: `rgba(2,69,126,${index == 3 ? 1 : 0})` }}><p>年</p></ div>
|
|
||||||
</ div>
|
|
||||||
<motion.div className='RightChart3ItemBorder'
|
|
||||||
key={index}
|
|
||||||
initial={{ opacity: 0, y: 5 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ ease: "easeIn", duration: 0.5 }}
|
|
||||||
>
|
|
||||||
{SwitchPage(index)}
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,70 +0,0 @@
|
|||||||
.RightChart3AllBorder {
|
|
||||||
width: 625px;
|
|
||||||
height: 306px;
|
|
||||||
background: url('../../assets/ItemBg.png');
|
|
||||||
margin-top: 24px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
.RightChart3ItemitemBorder {
|
|
||||||
margin-top: 24px;
|
|
||||||
margin-left: 24px;
|
|
||||||
width: 100%;
|
|
||||||
height: 24px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: flex-start;
|
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
.RightChart3ItemIcon {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
margin-top: 3px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.RightChart3ItemTitle {
|
|
||||||
font-size: 24px;
|
|
||||||
color: #ffffff;
|
|
||||||
margin-left: 8px;
|
|
||||||
margin-top: -5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rightchart3Switchbox {
|
|
||||||
width: 150px;
|
|
||||||
height: 32px;
|
|
||||||
background-color: #03233C;
|
|
||||||
align-self: flex-end;
|
|
||||||
|
|
||||||
margin-right: 15px;
|
|
||||||
border-radius: 5px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.rightchart3SlelectBox {
|
|
||||||
width: 33%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
border-radius: 5px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.rightchart3SlelectBox p {
|
|
||||||
margin: 3 auto;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 15px;
|
|
||||||
text-align: center;
|
|
||||||
cursor : pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.RightChart3ItemBorder {
|
|
||||||
width: 95%;
|
|
||||||
height: 227px;
|
|
||||||
margin-left: 16px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,126 +0,0 @@
|
|||||||
|
|
||||||
import React, { Component } from 'react';
|
|
||||||
import './Chart1.less'
|
|
||||||
import ReactECharts from 'echarts-for-react';
|
|
||||||
|
|
||||||
class Chart1 extends Component {
|
|
||||||
|
|
||||||
switchColor = (index) => {
|
|
||||||
|
|
||||||
switch (index) {
|
|
||||||
case 1: return '#52FFF8';
|
|
||||||
case 2: return '#52FFF8';
|
|
||||||
case 3: return '#52FFF8';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
getOption = () => (
|
|
||||||
{
|
|
||||||
title: [{
|
|
||||||
text: this.props.data,
|
|
||||||
x: "center",
|
|
||||||
y: "28%",
|
|
||||||
textStyle: {
|
|
||||||
fontWeight: "normal",
|
|
||||||
color: this.props.color,
|
|
||||||
fontSize: 24,
|
|
||||||
},
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: this.props.unit,
|
|
||||||
x: "center",
|
|
||||||
y: "55%",
|
|
||||||
textStyle: {
|
|
||||||
fontWeight: "normal",
|
|
||||||
color: this.props.color,
|
|
||||||
fontSize: 15,
|
|
||||||
},
|
|
||||||
|
|
||||||
},
|
|
||||||
],
|
|
||||||
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "Line 1",
|
|
||||||
type: "pie",
|
|
||||||
clockWise: false,
|
|
||||||
radius: [40, 46],
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
shadowBlur: 5,
|
|
||||||
shadowColor:this.props.color,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
hoverAnimation: false,
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: 25,
|
|
||||||
name: "invisible",
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: "rgba(255,255,255,0.5)" //未完成的颜色
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 75,
|
|
||||||
name: "01",
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: this.props.color //完成的颜色
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Line 2",
|
|
||||||
type: "pie",
|
|
||||||
animation: false,
|
|
||||||
clockWise: false,
|
|
||||||
radius: [33, 36],
|
|
||||||
itemStyle: {
|
|
||||||
|
|
||||||
normal: {
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
color: this.props.color, //内圈颜色
|
|
||||||
opacity: 0.2,
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
hoverAnimation: false,
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: 100,
|
|
||||||
name: "02",
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 0,
|
|
||||||
name: "invisible",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
})
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div className='RightChart3itemDetailBorder'>
|
|
||||||
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
|
|
||||||
</div >
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Chart1;
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
.RightChart3itemDetailBorder {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow:visible;
|
|
||||||
}
|
|
||||||
@ -1,95 +0,0 @@
|
|||||||
import React, { useEffect } from 'react';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
// import RightChart1Icon2 from '../../../../assets/Icon/RightChart1Icon2.png'
|
|
||||||
|
|
||||||
import Chart1 from './Chart1.jsx';
|
|
||||||
|
|
||||||
import './index.less';
|
|
||||||
|
|
||||||
//#52FFF8
|
|
||||||
|
|
||||||
function Index(props) {
|
|
||||||
const switchColor = (index) => {
|
|
||||||
switch (index) {
|
|
||||||
case 1:
|
|
||||||
return '#52FFF8';
|
|
||||||
case 2:
|
|
||||||
return '#49B2FF';
|
|
||||||
case 3:
|
|
||||||
return '#FFB94D';
|
|
||||||
default:
|
|
||||||
return '#fff';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
let Border = styled.div`
|
|
||||||
width: 74px;
|
|
||||||
height: 24px;
|
|
||||||
margin-top: 50px;
|
|
||||||
overflow: hidden;
|
|
||||||
`;
|
|
||||||
|
|
||||||
// background: url(${RightChart1Icon2});
|
|
||||||
let Ion2 = styled.div`
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
float: left;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
transform: translatex(-82px);
|
|
||||||
filter: drop-shadow(82px 1px ${switchColor(props.index)});
|
|
||||||
`;
|
|
||||||
|
|
||||||
//最大值75
|
|
||||||
let Stuff = styled.div`
|
|
||||||
float: left;
|
|
||||||
margin-top: -17.5px;
|
|
||||||
transform: translatex(3px);
|
|
||||||
width: ${58}%;
|
|
||||||
height: 12px;
|
|
||||||
background: linear-gradient(to right, #051226, ${switchColor(props.index)});
|
|
||||||
`;
|
|
||||||
|
|
||||||
//中间三条gap的位置
|
|
||||||
|
|
||||||
let Gap1 = styled.div`
|
|
||||||
// float:left;
|
|
||||||
margin-top: 6px;
|
|
||||||
transform: translatex(15px);
|
|
||||||
position: absolute;
|
|
||||||
width: 2px;
|
|
||||||
height: 13px;
|
|
||||||
background-color: #051226;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Gap2 = styled(Gap1)`
|
|
||||||
transform: translatex(29px);
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Gap3 = styled(Gap1)`
|
|
||||||
transform: translatex(45px);
|
|
||||||
`;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="RightChart1ItemBorderRow">
|
|
||||||
<div className="RightChart1ItemB1">
|
|
||||||
<Chart1
|
|
||||||
color={switchColor(props.index)}
|
|
||||||
data={props.data}
|
|
||||||
unit={props.unit}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="RightChart1ItemB2">
|
|
||||||
<h2 className="RightChart1ItemB2TXT">{props.name}</h2>
|
|
||||||
<Border>
|
|
||||||
<Ion2></Ion2>
|
|
||||||
<Stuff></Stuff>
|
|
||||||
<Gap1></Gap1>
|
|
||||||
<Gap2></Gap2>
|
|
||||||
<Gap3></Gap3>
|
|
||||||
</Border>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Index;
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
.RightChart1ItemBorderRow {
|
|
||||||
width: 178px;
|
|
||||||
height: 96px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-around;
|
|
||||||
|
|
||||||
.RightChart1ItemB1 {
|
|
||||||
width: 96px;
|
|
||||||
height: 96px;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.RightChart1ItemB2 {
|
|
||||||
width: 76px;
|
|
||||||
height: 76px;
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-left: 8px;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.RightChart1ItemB2TXT {
|
|
||||||
font-size:16px;
|
|
||||||
font-weight: 400px;
|
|
||||||
float: left;
|
|
||||||
color: #fff;
|
|
||||||
position: absolute;
|
|
||||||
margin-top: 15px;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,133 +0,0 @@
|
|||||||
|
|
||||||
import React, { Component } from 'react';
|
|
||||||
import './Chart2.less'
|
|
||||||
import ReactECharts from 'echarts-for-react';
|
|
||||||
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
|
|
||||||
var fontColor = '#fff'
|
|
||||||
var lineColor = 'rgba(33, 50, 89,0.8)'
|
|
||||||
|
|
||||||
class Chart2 extends Component {
|
|
||||||
|
|
||||||
getOption = () => ({
|
|
||||||
|
|
||||||
grid: {
|
|
||||||
left: "2%",
|
|
||||||
right: "4%",
|
|
||||||
bottom: "5%",
|
|
||||||
top: "15%",
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
data: this.props.lendge,
|
|
||||||
left: "2%",
|
|
||||||
top: 0,
|
|
||||||
textStyle: {
|
|
||||||
color: "#fff",
|
|
||||||
},
|
|
||||||
itemWidth: 12,
|
|
||||||
itemHeight: 10,
|
|
||||||
// itemGap: 35
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: "category",
|
|
||||||
data:this.props.xdata,
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: lineColor,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: lineColor,
|
|
||||||
width: 0.5,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: true,
|
|
||||||
color: fontColor,
|
|
||||||
textStyle: {
|
|
||||||
fontFamily: "Microsoft YaHei",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: "value",
|
|
||||||
max:(value) => { // 百位起最大值向上取整
|
|
||||||
return Math.ceil(value.max / 100) * 100;
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: true,
|
|
||||||
color: fontColor,
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: lineColor,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: lineColor,
|
|
||||||
width: 0.5,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: this.props.lendge[0],
|
|
||||||
type: "bar",
|
|
||||||
barWidth: "15%",
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: '#92D675',
|
|
||||||
barBorderRadius: 2,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: 'top',
|
|
||||||
valueAnimation: true,
|
|
||||||
color: "#fff"
|
|
||||||
},
|
|
||||||
data: this.props.data[0],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name:this.props.lendge[1],
|
|
||||||
type: "bar",
|
|
||||||
barWidth: "15%",
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: 'rgba(92,183,255,1)' },
|
|
||||||
{ offset: 0.5, color: 'rgba(92,183,255,1)' },
|
|
||||||
{ offset: 1, color: 'rgba(90,107,255,1)' }
|
|
||||||
]),
|
|
||||||
|
|
||||||
barBorderRadius: 3,
|
|
||||||
|
|
||||||
},
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: 'top',
|
|
||||||
valueAnimation: true,
|
|
||||||
color: "#fff"
|
|
||||||
},
|
|
||||||
data: this.props.data[1],
|
|
||||||
},],
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div className='RightChart2itemDetailBorder'>
|
|
||||||
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
|
|
||||||
</div >
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Chart2;
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
.RightChart2itemDetailBorder {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,106 +0,0 @@
|
|||||||
|
|
||||||
import React, { Component } from 'react';
|
|
||||||
import './Chart3.less'
|
|
||||||
import ReactECharts from 'echarts-for-react';
|
|
||||||
|
|
||||||
//颜色渐变必须要
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
|
|
||||||
var fontColor = '#fff'
|
|
||||||
var lineColor = 'rgba(33, 50, 89,0.8)'
|
|
||||||
|
|
||||||
class Chart3 extends Component {
|
|
||||||
|
|
||||||
getOption = () => ({
|
|
||||||
grid: {
|
|
||||||
left: "2%",
|
|
||||||
right: "4%",
|
|
||||||
bottom: "5%",
|
|
||||||
top: "8%",
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: "category",
|
|
||||||
data: this.props.xdata,
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: lineColor,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: lineColor,
|
|
||||||
width: 0.5,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: true,
|
|
||||||
color: fontColor,
|
|
||||||
textStyle: {
|
|
||||||
fontFamily: "Microsoft YaHei",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: "value",
|
|
||||||
scale:true,
|
|
||||||
max:(value) => { // 百位起最大值向上取整
|
|
||||||
return Math.ceil(value.max / 100) * 100;
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: true,
|
|
||||||
color: fontColor,
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: lineColor,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: lineColor,
|
|
||||||
width: 0.5,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "M1",
|
|
||||||
type: "bar",
|
|
||||||
barWidth: "15%",
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: 'rgba(92,183,255,1)' },
|
|
||||||
{ offset: 0.5, color: 'rgba(92,183,255,1)' },
|
|
||||||
{ offset: 1, color: 'rgba(90,107,255,1)' }
|
|
||||||
]),
|
|
||||||
barBorderRadius: 3,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: 'top',
|
|
||||||
valueAnimation: true,
|
|
||||||
color:"#fff"
|
|
||||||
},
|
|
||||||
data: this.props.data,
|
|
||||||
},
|
|
||||||
|
|
||||||
],
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div className='RightChart3itemDetailBorder'>
|
|
||||||
|
|
||||||
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
|
|
||||||
|
|
||||||
</div >
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Chart3;
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
.RightChart3itemDetailBorder {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user