init
This commit is contained in:
127
src/components/BottomBar/Chart1.jsx
Normal file
127
src/components/BottomBar/Chart1.jsx
Normal file
@@ -0,0 +1,127 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
//小时蒸汽产生量
|
||||
import Item from './substitutionCharts/Chart1.jsx';
|
||||
|
||||
//窑炉温度变化
|
||||
import Item2 from './substitutionCharts/Chart4.jsx';
|
||||
|
||||
import ICon1 from '../../assets/Icon/ButtonChart1Icon1.png';
|
||||
import ICon2 from '../../assets/Icon/ButtonChart1Icon2.png';
|
||||
|
||||
import './Chart1.less';
|
||||
|
||||
const Daytitle = '日发电量统计';
|
||||
const Dayxdata = [
|
||||
'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 Daydata = [
|
||||
70,
|
||||
45,
|
||||
10,
|
||||
28,
|
||||
18,
|
||||
28,
|
||||
46,
|
||||
70,
|
||||
45,
|
||||
10,
|
||||
28,
|
||||
18,
|
||||
28,
|
||||
46,
|
||||
70,
|
||||
45,
|
||||
10,
|
||||
28,
|
||||
18,
|
||||
28,
|
||||
46,
|
||||
22,
|
||||
25,
|
||||
26,
|
||||
];
|
||||
|
||||
const Monthtitle = '月发电量统计';
|
||||
const Monthxdata = ['一月', '二月', '三月', '四月', '五月', '六月', '七月'];
|
||||
const Monthdata = [170, 145, 110, 128, 118, 128, 146];
|
||||
|
||||
const Yeartitle = '年发电量统计';
|
||||
const Yearxdata = ['2016', '2017', '2018', '2019', '2020', '2021', '2022'];
|
||||
const Yeardata = [870, 845, 810, 828, 818, 828, 846];
|
||||
|
||||
export default function Chart1() {
|
||||
const [index, setIndex] = useState(1);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
SwitchIndex();
|
||||
}, 10000);
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
let num = 1;
|
||||
|
||||
function SwitchIndex() {
|
||||
num = num + 1;
|
||||
if (num < 3) {
|
||||
setIndex(num);
|
||||
} else {
|
||||
num = 1;
|
||||
setIndex(num);
|
||||
}
|
||||
}
|
||||
|
||||
//切换图表
|
||||
function SwitchChart(index) {
|
||||
switch (index) {
|
||||
case 1:
|
||||
return <Item />;
|
||||
case 2:
|
||||
return <Item2 />;
|
||||
default:
|
||||
return <Item />;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="ButtonChart1AllBorder">
|
||||
<div className="ButtonChart1ItemitemBorder">
|
||||
<img
|
||||
src={index == 1 ? ICon1 : ICon2}
|
||||
alt="图片读取失败"
|
||||
className="ButtonChart1ItemIcon"
|
||||
/>
|
||||
<div className="ButtonChart1ItemTitle">
|
||||
{index == 1 ? '小时蒸汽产生量' : '窑炉温度变化'}
|
||||
</div>
|
||||
</div>
|
||||
<motion.div className="ButtonChart1ItemBorder">
|
||||
{SwitchChart(index)}
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
38
src/components/BottomBar/Chart1.less
Normal file
38
src/components/BottomBar/Chart1.less
Normal file
@@ -0,0 +1,38 @@
|
||||
.ButtonChart1AllBorder {
|
||||
width: 625px;
|
||||
height: 306px;
|
||||
background: url('../../assets/ItemBg.png');
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.ButtonChart1ItemitemBorder {
|
||||
margin-top: 24px;
|
||||
margin-left: 24px;
|
||||
width: 202px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
vertical-align: middle;
|
||||
|
||||
.ButtonChart1ItemIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.ButtonChart1ItemTitle {
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
margin-left: 8px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
.ButtonChart1ItemBorder {
|
||||
width: 95%;
|
||||
height: 227px;
|
||||
margin-left: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
}
|
||||
}
|
||||
23
src/components/BottomBar/Chart2.jsx
Normal file
23
src/components/BottomBar/Chart2.jsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
import Item2 from './substitutionCharts/Chart2.jsx'
|
||||
import Icon from '../../assets/Icon/ButtonChart2Icon1.png'
|
||||
import GapLine from '../../assets/buttonChart2GapLine.png'
|
||||
import './Chart2.less'
|
||||
|
||||
|
||||
export default function Chart2() {
|
||||
return (
|
||||
<div className='ButtonChart2AllBorder'>
|
||||
<div className='ButtonChart2ItemitemBorder'>
|
||||
<img src={Icon} alt="图片加载错误" className='ButtonChart2ItemIcon' />
|
||||
<div className='ButtonChart2ItemTitle' >AB线成品量</div>
|
||||
</div>
|
||||
<div className='ButtonChart2ItemBorder' >
|
||||
<Item2 title='A线' data={[78, 9565, 17512]} />
|
||||
<div className='ButtonChart2ItemGap'></div>
|
||||
<Item2 title='B线' data={[58, 7565, 17512]} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
50
src/components/BottomBar/Chart2.less
Normal file
50
src/components/BottomBar/Chart2.less
Normal file
@@ -0,0 +1,50 @@
|
||||
.ButtonChart2AllBorder {
|
||||
width: 625px;
|
||||
height: 306px;
|
||||
background: url('../../assets/ItemBg.png');
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.ButtonChart2ItemitemBorder {
|
||||
margin-top: 24px;
|
||||
margin-left: 24px;
|
||||
width: 202px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
vertical-align: middle;
|
||||
|
||||
.ButtonChart2ItemIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-top:2px;
|
||||
}
|
||||
|
||||
.ButtonChart2ItemTitle {
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
margin-left: 8px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
.ButtonChart2ItemBorder {
|
||||
width: 95%;
|
||||
height: 227px;
|
||||
margin-left: 16px;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
.ButtonChart2ItemGap {/* */
|
||||
float: left;
|
||||
width: 1px;
|
||||
height: 90%;
|
||||
background:url('../../assets/Gap.png');
|
||||
border-width: 1.3px;
|
||||
z-index: 20;
|
||||
}
|
||||
}
|
||||
}
|
||||
36
src/components/BottomBar/Chart3.jsx
Normal file
36
src/components/BottomBar/Chart3.jsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import React from 'react'
|
||||
|
||||
//导入图表
|
||||
import Item from './Form/Form.jsx'
|
||||
import Item1 from './Form/Form1.jsx'
|
||||
|
||||
import Icon1 from '../../assets/Icon/ButtonChart3Icon1.png'
|
||||
import Icon2 from '../../assets/Icon/ButtonChart1Icon1.png'
|
||||
|
||||
import './Chart3.less'
|
||||
|
||||
export default function Chart3() {
|
||||
return (
|
||||
<div className='ButtonChart3AllBorder'>
|
||||
<div className='ButtonChart3ItemBorder'>
|
||||
<div className='ButtonChart3ItemitemBorder'>
|
||||
<img src={Icon1} alt="图片加载错误" className='ButtonChart3ItemIcon' />
|
||||
<div className='ButtonChart3ItemTitle'>退火风机状况</div>
|
||||
</div>
|
||||
<div className='ButtonChart3ItemDetail'>
|
||||
<Item />
|
||||
</div>
|
||||
</div>
|
||||
<div className='ButtonChart3ItemGap'></div>
|
||||
<div className='ButtonChart3ItemBorder'>
|
||||
<div className='ButtonChart3ItemitemBorder'>
|
||||
<img src={Icon2} alt="图片加载错误" className='ButtonChart3ItemIcon' />
|
||||
<div className='ButtonChart3ItemTitle'>空压机运行时间</div>
|
||||
</div>
|
||||
<div className='ButtonChart3ItemDetail'>
|
||||
<Item1 />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
56
src/components/BottomBar/Chart3.less
Normal file
56
src/components/BottomBar/Chart3.less
Normal file
@@ -0,0 +1,56 @@
|
||||
.ButtonChart3AllBorder {
|
||||
width: 625px;
|
||||
height: 306px;
|
||||
background: url('../../assets/ItemBg.png');
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
|
||||
.ButtonChart3ItemBorder {
|
||||
width: 48%;
|
||||
height: 100%;
|
||||
|
||||
.ButtonChart3ItemitemBorder {
|
||||
margin-top: 24px;
|
||||
margin-left: 24px;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
vertical-align: middle;
|
||||
|
||||
|
||||
.ButtonChart3ItemIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-top:3px;
|
||||
}
|
||||
|
||||
.ButtonChart3ItemTitle {
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
margin-left: 8px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
.ButtonChart3ItemDetail {
|
||||
width: 92%;
|
||||
height: 230px;
|
||||
margin-left: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
}
|
||||
}
|
||||
.ButtonChart3ItemGap{
|
||||
float: left;
|
||||
margin-top: 8%;
|
||||
width: 1px;
|
||||
height:75%;
|
||||
background:url('../../assets/Gap.png');
|
||||
background-repeat: no-repeat;
|
||||
border-width: 1.3px;
|
||||
z-index:20;
|
||||
}
|
||||
}
|
||||
68
src/components/BottomBar/Chart4.jsx
Normal file
68
src/components/BottomBar/Chart4.jsx
Normal file
@@ -0,0 +1,68 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
//火炉实时流量
|
||||
import Chart1 from './substitutionCharts/Chart3.jsx';
|
||||
|
||||
//空压机运行时间
|
||||
import Chart2 from './substitutionCharts/Chart4.jsx';
|
||||
|
||||
import Icon1 from '../../assets/Icon/ButtonChart4Icon1.png';
|
||||
import Icon2 from '../../assets/Icon/ButtonChart1Icon2.png';
|
||||
|
||||
import './Chart4.less';
|
||||
|
||||
|
||||
export default function Chart4() {
|
||||
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 <Chart1 />;
|
||||
case 2:
|
||||
return <Chart2 />;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="ButtonChart4AllBorder">
|
||||
<div className="ButtonChart4ItemitemBorder">
|
||||
<img
|
||||
src={index == 1 ? Icon1 : Icon2}
|
||||
alt="图片加载错误"
|
||||
className="ButtonChart4ItemIcon"
|
||||
/>
|
||||
<div className="ButtonChart4ItemTitle">
|
||||
{index == 1 ? '火炉实时流量' : '火炉实时温度'}
|
||||
</div>
|
||||
</div>
|
||||
<motion.div
|
||||
className="ButtonChart4ItemBorder"
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 5 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ ease: 'easeIn', duration: 0.5 }}
|
||||
>
|
||||
<div className="ButtonChart4ItemBorder1">{SwitchData(index)}</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
47
src/components/BottomBar/Chart4.less
Normal file
47
src/components/BottomBar/Chart4.less
Normal file
@@ -0,0 +1,47 @@
|
||||
.ButtonChart4AllBorder {
|
||||
width: 528px;
|
||||
height: 306px;
|
||||
background: url('../../assets/ItemBg3.png');
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.ButtonChart4ItemitemBorder {
|
||||
margin-top: 24px;
|
||||
margin-left: 24px;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
vertical-align: middle;
|
||||
.ButtonChart4ItemIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.ButtonChart4ItemTitle {
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
margin-left: 8px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
.ButtonChart4ItemBorder {
|
||||
width: 95%;
|
||||
height: 227px;
|
||||
margin-left: 16px;
|
||||
margin-bottom: 16px;
|
||||
background-repeat: round;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
|
||||
.ButtonChart4ItemBorder1 {
|
||||
margin-top: 1%;
|
||||
width: 98%;
|
||||
height: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
67
src/components/BottomBar/Form/Form.jsx
Normal file
67
src/components/BottomBar/Form/Form.jsx
Normal file
@@ -0,0 +1,67 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { ScrollBoard } from '@jiaminghi/data-view-react'
|
||||
|
||||
import fault from '@/assets/status/fault.svg'
|
||||
import maintenance from '@/assets/status/maintenance.svg'
|
||||
import normal from '@/assets/status/normal.svg'
|
||||
import './Form.less'
|
||||
// <div style="color:#1723ff">欢迎来到php中文网学习html技术，<spanclass="red">这里有全面的css教程</span></div>
|
||||
// background-image: radial-gradient(circle, red, yellow, green);, color:#1723ff"，radial-gradient(circle, red, yellow, green)
|
||||
const Style1 = `<div > <img src=${normal} alt="Error" style="width:12px,height:12px;" /> <span style=" color:rgba(255,255,255,1)">正常</span> </div>`
|
||||
const Style2 = `<div > <img src=${maintenance} alt="Error" style="width:15px,height:15px" /> <span style="color:rgba(255,255,255,1)">维修</span> </div>`
|
||||
const Style3 = `<div > <img src=${fault} alt="Error" style="width:15px,height:15px" /> <span style="color:rgba(255,255,255,1)">故障</span> </div>`
|
||||
|
||||
//rgba(201, 196, 191,0.5)
|
||||
|
||||
let config = {
|
||||
headerBGC: 'rgba(4, 36, 68,0.5)',
|
||||
header: ['<span style="color:rgba(255,255,255,1)">设备名称 <span/>', '<span style="color:rgba(255,255,255,1)">设备状态 <span/>'],
|
||||
align: ['center'],
|
||||
indexHeader: '<span style="color:rgba(255,255,255,1)">序号 <span/>',
|
||||
index: true,
|
||||
rowNum: 7,
|
||||
columnWidth: [400, 400, 400],
|
||||
headerHeight: 35,
|
||||
oddRowBGC: "#042444",
|
||||
evenRowBGC: "#042c4c",
|
||||
data: [
|
||||
['退火1', Style1],
|
||||
['退火2', Style2],
|
||||
['退火3', Style1],
|
||||
['退火4', Style2],
|
||||
['退火5', Style1],
|
||||
['退火6', Style3],
|
||||
['退火7', Style3],
|
||||
['退火8', Style1],
|
||||
['退火9', Style1],
|
||||
['退火10', Style3]
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
function replaceStyle(STR) {
|
||||
if (STR) {
|
||||
return ` <span style="color:rgba(201, 196, 191,0.5)">${STR}<span/>`
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
class Form extends Component {
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='ButtonFormitemDetailBorder'>
|
||||
<div className='ButtonFormitemDetailBorderLine1'></div>
|
||||
<div className='ButtonFormitemDetailBorderLine2'></div>
|
||||
<ScrollBoard config={config} style={{ width: '100%', height: '95%' }} />
|
||||
</div >
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Form;
|
||||
28
src/components/BottomBar/Form/Form.less
Normal file
28
src/components/BottomBar/Form/Form.less
Normal file
@@ -0,0 +1,28 @@
|
||||
.ButtonFormitemDetailBorder {
|
||||
width: 98%;
|
||||
height: 100%;
|
||||
margin-top: 2%;
|
||||
position: relative;
|
||||
|
||||
.ButtonFormitemDetailBorderLine1 {
|
||||
width: 1px;
|
||||
height: 95%;
|
||||
background-color:#041c2c;
|
||||
float: left;
|
||||
margin-left:28%;
|
||||
z-index: 5;
|
||||
position: absolute;
|
||||
border-width: 1px;
|
||||
}
|
||||
.ButtonFormitemDetailBorderLine2 {
|
||||
width: 1px;
|
||||
height: 95%;
|
||||
background-color:#041c2c;
|
||||
float: left;
|
||||
margin-left: 60%;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
border-width: 1px;
|
||||
|
||||
}
|
||||
}
|
||||
62
src/components/BottomBar/Form/Form1.jsx
Normal file
62
src/components/BottomBar/Form/Form1.jsx
Normal file
@@ -0,0 +1,62 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { ScrollBoard } from '@jiaminghi/data-view-react'
|
||||
|
||||
|
||||
import './Form1.less'
|
||||
|
||||
let config = {
|
||||
headerBGC: 'rgba(4, 36, 68,0.5)',
|
||||
header: ['<span style="color:rgba(255, 255,255,1)">设备名称 <span/>', '<span style="color:rgba(255, 255, 255,1)">运行时间 <span/>'],
|
||||
index: true,
|
||||
align: ['center'],
|
||||
oddRowBGC: "#042444",
|
||||
evenRowBGC: "#042c4c",
|
||||
indexHeader: '<span style="color:rgba(255, 255, 255,1)">序号 <span/>',
|
||||
rowNum: 5,
|
||||
columnWidth: [300, 350, 300],
|
||||
headerHeight: 35,
|
||||
rowNum:7,
|
||||
data: [
|
||||
['#1空压', '2039'],
|
||||
['#2空压', '23212'],
|
||||
['#3空压', '2532'],
|
||||
['#4空压', '1252'],
|
||||
['#5空压', '1231'],
|
||||
['#6空压', '1231'],
|
||||
['#7空压', '3532'],
|
||||
['#8空压', '3567'],
|
||||
['#9空压', '3054'],
|
||||
['#10空压', '3564'],
|
||||
]
|
||||
}
|
||||
|
||||
// function (STR) {
|
||||
|
||||
// if (STR) {
|
||||
// return ` <span style="color:rgba(201, 196, 191,0.5)">${STR}<span/>`
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
class Form extends Component {
|
||||
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<div className='ButtonForm1itemDetailBorder'>
|
||||
<span className='RightFormitemDetailBorderLine1'></span>
|
||||
<span className='RightFormitemDetailBorderLine2'></span>
|
||||
<ScrollBoard config={config} style={{ width: '100%', height: '95%' }} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Form;
|
||||
26
src/components/BottomBar/Form/Form1.less
Normal file
26
src/components/BottomBar/Form/Form1.less
Normal file
@@ -0,0 +1,26 @@
|
||||
.ButtonForm1itemDetailBorder {
|
||||
width: 98%;
|
||||
height: 100%;
|
||||
margin-top: 2%;
|
||||
position: relative;
|
||||
|
||||
.RightFormitemDetailBorderLine1 {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: #041c2c;
|
||||
float: left;
|
||||
margin-left: 28%;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.RightFormitemDetailBorderLine2 {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: #041c2c;
|
||||
float: left;
|
||||
margin-left: 58%;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
20
src/components/BottomBar/index.jsx
Normal file
20
src/components/BottomBar/index.jsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import React from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import Chart1 from './Chart1'
|
||||
import Chart2 from './Chart2'
|
||||
import Chart3 from './Chart3'
|
||||
import Chart4 from './Chart4'
|
||||
|
||||
import './index.less'
|
||||
|
||||
export default function index() {
|
||||
return (
|
||||
<div className='ButtonBorder'>
|
||||
<Chart1 />
|
||||
<Chart2 />
|
||||
<Chart3 />
|
||||
<Chart4 />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
8
src/components/BottomBar/index.less
Normal file
8
src/components/BottomBar/index.less
Normal file
@@ -0,0 +1,8 @@
|
||||
.ButtonBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
207
src/components/BottomBar/substitutionCharts/Chart1.jsx
Normal file
207
src/components/BottomBar/substitutionCharts/Chart1.jsx
Normal file
@@ -0,0 +1,207 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import './Chart3.less'
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
var colors = 'rgb(13, 119, 145)';
|
||||
var fontColor = '#fff'
|
||||
var lineColor = 'rgba(33, 50, 89,0.8)'
|
||||
|
||||
|
||||
|
||||
var datalist = [
|
||||
{
|
||||
name: "天津之眼",
|
||||
value: [25, 85],
|
||||
symbolSize: 30,
|
||||
opacity: 0.6,
|
||||
},
|
||||
{
|
||||
name: "天津之眼",
|
||||
value: [100, 305],
|
||||
symbolSize: 50,
|
||||
opacity: 0.6,
|
||||
},
|
||||
{
|
||||
name: "天津之眼",
|
||||
value: [200, 525],
|
||||
symbolSize: 70,
|
||||
opacity: 0.6,
|
||||
},
|
||||
{
|
||||
name: "天津之眼",
|
||||
value: [255, 405],
|
||||
symbolSize: 30,
|
||||
opacity: 0.6,
|
||||
},
|
||||
{
|
||||
name: "天津之眼",
|
||||
value: [500, 705],
|
||||
symbolSize: 50,
|
||||
opacity: 0.6,
|
||||
},
|
||||
{
|
||||
name: "天津之眼",
|
||||
value: [400, 525],
|
||||
symbolSize: 70,
|
||||
opacity: 0.6,
|
||||
},
|
||||
{
|
||||
name: "天津之眼",
|
||||
value: [255, 405],
|
||||
symbolSize: 30,
|
||||
opacity: 0.6,
|
||||
},
|
||||
{
|
||||
name: "天津之眼",
|
||||
value: [700, 805],
|
||||
symbolSize: 50,
|
||||
opacity: 0.6,
|
||||
},
|
||||
{
|
||||
name: "天津之眼",
|
||||
value: [300, 425],
|
||||
symbolSize: 70,
|
||||
opacity: 0.6,
|
||||
},
|
||||
{
|
||||
name: "天津之眼",
|
||||
value: [365, 505],
|
||||
symbolSize: 30,
|
||||
opacity: 0.6,
|
||||
},
|
||||
{
|
||||
name: "天津之眼",
|
||||
value: [600, 705],
|
||||
symbolSize: 40,
|
||||
opacity: 0.6,
|
||||
},
|
||||
{
|
||||
name: "天津之眼",
|
||||
value: [400, 525],
|
||||
symbolSize: 70,
|
||||
opacity: 0.6,
|
||||
},
|
||||
{
|
||||
name: "天津之眼",
|
||||
value: [800, 925],
|
||||
symbolSize: 30,
|
||||
opacity: 0.6,
|
||||
},
|
||||
{
|
||||
name: "天津之眼",
|
||||
value: [900, 985],
|
||||
symbolSize: 20,
|
||||
opacity: 0.6,
|
||||
},
|
||||
|
||||
];
|
||||
var datas = [];
|
||||
for (var i = 0; i < datalist.length; i++) {
|
||||
var item = datalist[i];
|
||||
const colorInex = i % colors.length;
|
||||
|
||||
datas.push({
|
||||
...item,
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
fontSize: 11,
|
||||
},
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: colors,
|
||||
opacity: item.opacity,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
class Chart3 extends Component {
|
||||
|
||||
getOption = () => ({
|
||||
grid: {
|
||||
show: false,
|
||||
right: 15,
|
||||
left: 10,
|
||||
top: 10,
|
||||
bottom: 10,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
gridIndex: 0,
|
||||
type: "value",
|
||||
// show: false,
|
||||
min: 0,
|
||||
max: 1000,
|
||||
nameLocation: "middle",
|
||||
nameGap: 5,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: fontColor,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
width: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
gridIndex: 0,
|
||||
min: 0,
|
||||
// show: false,
|
||||
max: 1000,
|
||||
nameLocation: "middle",
|
||||
nameGap: 30,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: fontColor,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
width: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "scatter",
|
||||
symbol: "circle",
|
||||
symbolSize: 120,
|
||||
data: datas,
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='ButtonChart1itemDetailBorder'>
|
||||
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
|
||||
</div >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Chart3;
|
||||
6
src/components/BottomBar/substitutionCharts/Chart1.less
Normal file
6
src/components/BottomBar/substitutionCharts/Chart1.less
Normal file
@@ -0,0 +1,6 @@
|
||||
.ButtonChart1itemDetailBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
|
||||
}
|
||||
142
src/components/BottomBar/substitutionCharts/Chart2.jsx
Normal file
142
src/components/BottomBar/substitutionCharts/Chart2.jsx
Normal file
@@ -0,0 +1,142 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import './Chart2.less'
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
class Chart2 extends Component {
|
||||
|
||||
|
||||
getOption = () => ({
|
||||
|
||||
title: [{
|
||||
text: `${this.props.data[0]}%`,
|
||||
x: "center",
|
||||
y: "32%",
|
||||
textStyle: {
|
||||
fontWeight: "normal",
|
||||
color: "#5CB2FF",
|
||||
fontSize: "34px",
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "成品率",
|
||||
x: "center",
|
||||
y: "55%",
|
||||
textStyle: {
|
||||
fontWeight: "normal",
|
||||
color: "rgba(255,255,255,0.7)",
|
||||
fontSize: "18px",
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
color: ["rgba(176, 212, 251, 1)"],
|
||||
|
||||
series: [
|
||||
{
|
||||
name: "Line 1",
|
||||
type: "pie",
|
||||
clockWise: true,
|
||||
radius: ["65%", "95%"],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
hoverAnimation: false,
|
||||
data: [
|
||||
{
|
||||
value: this.props.data[0],
|
||||
name: "01",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
shadowBlur: 7,
|
||||
borderColor: "rgba(90,107,255,0.5)",
|
||||
shadowColor: "rgba(92,183,255,0.9)",
|
||||
color: {
|
||||
// 完成的圆环的颜色
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(90,107,255,1)", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(92,183,255,0.5)", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "02",
|
||||
value: 100 - this.props.data[0],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color:"rgba(255,255,255,0.25)",//未完成圆环颜色
|
||||
borderWidth: 1,
|
||||
shadowBlur: 7,
|
||||
borderColor: "rgba(90,107,255,0.5)",
|
||||
shadowColor: "rgba(92,183,255,0.9)",
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
})
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='buttonChart2itemDetailBorder'>
|
||||
<div className='buttonChart2itemEchart'>
|
||||
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
|
||||
</div>
|
||||
<div className='buttonChart2itemTitle'>
|
||||
<h2 className='buttonChart2itemTitle1'>{this.props.title}</h2>
|
||||
<div className='buttonChart2itemTitleGAp' /><div />
|
||||
<div className='buttonChart2itemTitleDetail'>
|
||||
<div className='buttonChart2itemTitleDetailRow'>
|
||||
<h2 className='buttonChart2itemTitle2'>订单总量：</h2>
|
||||
<h2 className='buttonChart2itemTitle3'>{this.props.data[1]}</h2>
|
||||
</div>
|
||||
<div className='buttonChart2itemTitleDetailRow'>
|
||||
<h2 className='buttonChart2itemTitle2'>成品量：</h2>
|
||||
<h2 className='buttonChart2itemTitle3'>{this.props.data[2]}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Chart2;
|
||||
66
src/components/BottomBar/substitutionCharts/Chart2.less
Normal file
66
src/components/BottomBar/substitutionCharts/Chart2.less
Normal file
@@ -0,0 +1,66 @@
|
||||
.buttonChart2itemDetailBorder {
|
||||
width: 215px;
|
||||
height: 216px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
.buttonChart2itemEchart {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
align-self: center;
|
||||
|
||||
}
|
||||
.buttonChart2itemTitle {
|
||||
width: 88%;
|
||||
height: 56px;
|
||||
margin-left: 20px;
|
||||
margin-top: 8px;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
|
||||
.buttonChart2itemTitle1 {
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 22px;
|
||||
line-height: 24px;
|
||||
font-style: normal;
|
||||
margin-top: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.buttonChart2itemTitleGAp {
|
||||
width: 2px;
|
||||
height: 80%;
|
||||
margin-left: 15px;
|
||||
background-color: #73808C;
|
||||
}
|
||||
|
||||
.buttonChart2itemTitleDetail {
|
||||
width: 158px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
|
||||
|
||||
.buttonChart2itemTitleDetailRow {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
.buttonChart2itemTitle2 {
|
||||
font-size: 15px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.buttonChart2itemTitle3 {
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
124
src/components/BottomBar/substitutionCharts/Chart3.jsx
Normal file
124
src/components/BottomBar/substitutionCharts/Chart3.jsx
Normal file
@@ -0,0 +1,124 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import './Chart3.less'
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
var data = [[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 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 = () => ({
|
||||
legend: {
|
||||
right: "0%",
|
||||
width: "80%",
|
||||
height: "14%",
|
||||
itemWidth: 12,
|
||||
itemHeight: 11,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#F1F1F3",
|
||||
},
|
||||
// itemStyle: {
|
||||
// color: "rgba(222, 9, 9, 1)"
|
||||
// },
|
||||
data: name
|
||||
},
|
||||
grid: {
|
||||
top: '15%',
|
||||
left: '2%',
|
||||
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,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
width: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
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='ButtonChart3itemDetailBorder'>
|
||||
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
|
||||
</div >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Chart3;
|
||||
6
src/components/BottomBar/substitutionCharts/Chart3.less
Normal file
6
src/components/BottomBar/substitutionCharts/Chart3.less
Normal file
@@ -0,0 +1,6 @@
|
||||
.ButtonChart3itemDetailBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
|
||||
}
|
||||
117
src/components/BottomBar/substitutionCharts/Chart4.jsx
Normal file
117
src/components/BottomBar/substitutionCharts/Chart4.jsx
Normal file
@@ -0,0 +1,117 @@
|
||||
|
||||
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 = () => ({
|
||||
|
||||
|
||||
|
||||
legend: {
|
||||
right: "0%",
|
||||
width: "70%",
|
||||
height: "14%",
|
||||
itemWidth: 17,
|
||||
itemHeight: 13.5,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#F1F1F3",
|
||||
},
|
||||
|
||||
data: name
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '5%',
|
||||
top:'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: {
|
||||
|
||||
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='ButtonChart4itemDetailBorder'>
|
||||
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
|
||||
</div >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Chart3;
|
||||
9
src/components/BottomBar/substitutionCharts/Chart4.less
Normal file
9
src/components/BottomBar/substitutionCharts/Chart4.less
Normal file
@@ -0,0 +1,9 @@
|
||||
.ButtonChart4itemDetailBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
183
src/components/BottomBar/substitutionCharts/Chart6.jsx
Normal file
183
src/components/BottomBar/substitutionCharts/Chart6.jsx
Normal file
@@ -0,0 +1,183 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
|
||||
|
||||
import './Chart2.less'
|
||||
|
||||
class Chart2 extends Component {
|
||||
|
||||
getOption = () => ({
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "2%",
|
||||
top: "2%",
|
||||
bottom: "5%",
|
||||
containLabel: true,
|
||||
},
|
||||
|
||||
legend: {
|
||||
|
||||
itemWidth: 14,
|
||||
itemHeight: 5,
|
||||
itemGap: 13,
|
||||
data: ["窑炉1", "窑炉2", "窑炉3"],
|
||||
top:'5%',
|
||||
right: "4%",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#F1F1F3",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#57617B",
|
||||
},
|
||||
},
|
||||
data: [
|
||||
"00:00",
|
||||
"01:05",
|
||||
"02:10",
|
||||
"03:15",
|
||||
"04:20",
|
||||
"05:25",
|
||||
"06:30",
|
||||
"07:35",
|
||||
"08:40",
|
||||
"09:45",
|
||||
"10:45",
|
||||
"11:45",
|
||||
"12:45",
|
||||
|
||||
"13:00",
|
||||
"14:05",
|
||||
"15:10",
|
||||
"16:15",
|
||||
"17:20",
|
||||
"18:25",
|
||||
"19:30",
|
||||
"20:35",
|
||||
"21:40",
|
||||
"22:45",
|
||||
"23:50",
|
||||
"24:55",
|
||||
],
|
||||
},
|
||||
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "单位（%)",
|
||||
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#57617B",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#57617B",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "窑炉1",
|
||||
type: "line",
|
||||
smooth: false,
|
||||
symbol: "circle",
|
||||
symbolSize: 6,
|
||||
showSymbol: true,
|
||||
lineStyle: {
|
||||
color: "rgba(116, 172, 100,0.8)",
|
||||
width:3,
|
||||
},
|
||||
itemStyle: {
|
||||
borderWidth: 3,
|
||||
borderColor: 'rgba(116, 172, 100,0.8)',
|
||||
color:'rgba(4, 28, 52,1)',
|
||||
|
||||
},
|
||||
data: this.props.data[0],
|
||||
},
|
||||
{
|
||||
name: "窑炉2",
|
||||
type: "line",
|
||||
smooth: false,
|
||||
symbol: "circle",
|
||||
symbolSize: 6,
|
||||
showSymbol: true,
|
||||
|
||||
lineStyle: {
|
||||
color: "rgba(164, 132, 44,1)",
|
||||
width:3,
|
||||
},
|
||||
itemStyle: {
|
||||
borderWidth: 3,
|
||||
borderColor: 'rgba(164, 132, 44,1)',
|
||||
color:'rgba(4, 28, 52,1)',
|
||||
|
||||
},
|
||||
|
||||
|
||||
data: this.props.data[1],
|
||||
},
|
||||
{
|
||||
name: "窑炉3",
|
||||
type: "line",
|
||||
smooth: false,
|
||||
symbol: "circle",
|
||||
symbolSize:6,
|
||||
showSymbol: true,
|
||||
|
||||
lineStyle: {
|
||||
color: "rgba(52, 156, 172,1)",
|
||||
width:3,
|
||||
},
|
||||
itemStyle: {
|
||||
borderWidth: 3,
|
||||
borderColor: 'rgba(52, 156, 172,1)',
|
||||
color:'rgba(4, 28, 52,1)',
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
data: this.props.data[2],
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='ButtonChart2itemDetailBorder'>
|
||||
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
|
||||
</div >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Chart2;
|
||||
6
src/components/BottomBar/substitutionCharts/Chart6.less
Normal file
6
src/components/BottomBar/substitutionCharts/Chart6.less
Normal file
@@ -0,0 +1,6 @@
|
||||
.ButtonChart2itemDetailBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
|
||||
}
|
||||
38
src/components/BottomBar/substitutionCharts/Chart7.jsx
Normal file
38
src/components/BottomBar/substitutionCharts/Chart7.jsx
Normal file
@@ -0,0 +1,38 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import './Chart7.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 >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
44
src/components/BottomBar/substitutionCharts/Chart7.less
Normal file
44
src/components/BottomBar/substitutionCharts/Chart7.less
Normal file
@@ -0,0 +1,44 @@
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
19
src/components/CenterTopData/index.jsx
Normal file
19
src/components/CenterTopData/index.jsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import React from 'react'
|
||||
|
||||
import Item2 from './substitutionCharts/Chart1.jsx'
|
||||
import Item1 from './substitutionCharts/Chart2.jsx'
|
||||
|
||||
import cls from './index.module.less'
|
||||
|
||||
export default function index() {
|
||||
return (
|
||||
<div className='flex justify-between w-full h-full'>
|
||||
<div className={cls.leftGrid}>
|
||||
<Item1 />
|
||||
</div>
|
||||
<div className={cls.rightTable}>
|
||||
<Item2 />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
8
src/components/CenterTopData/index.module.less
Normal file
8
src/components/CenterTopData/index.module.less
Normal file
@@ -0,0 +1,8 @@
|
||||
.leftGrid {
|
||||
width: 416px;
|
||||
height: 212px;
|
||||
}
|
||||
.rightTable {
|
||||
width: 410px;
|
||||
height: 240px;
|
||||
}
|
||||
59
src/components/CenterTopData/substitutionCharts/Chart1.jsx
Normal file
59
src/components/CenterTopData/substitutionCharts/Chart1.jsx
Normal file
@@ -0,0 +1,59 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import './Chart1.less'
|
||||
|
||||
import { ScrollBoard } from '@jiaminghi/data-view-react'
|
||||
|
||||
let data = [
|
||||
['产线0', '10mm', '10mm', '10mm'],
|
||||
['产线2', '8mm', '8mm', '8mm'],
|
||||
['产线3', '15mm', '15mm', '15mm'],
|
||||
['产线4', '15mm', '15mm', '15mm'],
|
||||
]
|
||||
|
||||
let header = ['产线名', '原板宽度', '净板宽', '玻璃厚度']
|
||||
|
||||
let config = {
|
||||
headerBGC: 'rgba(4, 44, 76, 0.3)',
|
||||
header: ['<span style="color:#fff">产线名<span/>', '<span style="color:#fff">原板宽度<span/>', '<span style="color:#fff">净板宽<span/>', '<span style="color:#fff">玻璃厚度<span/>'],
|
||||
oddRowBGC: "#042444",
|
||||
evenRowBGC: "#042c4c",
|
||||
columnWidth: [90],
|
||||
headerHeight: 40,
|
||||
hoverPause: false,
|
||||
data: replaceStyle(data, 0.7)
|
||||
}
|
||||
|
||||
function replaceStyle(Arr, opencity) {
|
||||
let temp = [];
|
||||
|
||||
for (let i = 0; i < Arr.length; i++) {
|
||||
temp[i] = [];
|
||||
for (let j = 0; j < Arr[i].length; j++) {
|
||||
temp[i][j] = ` <span style="color:rgba(255, 255, 255,${opencity})">${Arr[i][j]}<span/>`
|
||||
}
|
||||
}
|
||||
|
||||
return temp;
|
||||
}
|
||||
|
||||
class Chart1 extends Component {
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='CenterChart1itemDetailBorder'>
|
||||
<h2 className='CenterChart1itemTXT'> 当前产线生产规格</h2>
|
||||
<div className='CenterChart1itemContainer'>
|
||||
<span className='CenterFormitemDetailBorderLine1'></span>
|
||||
<span className='CenterFormitemDetailBorderLine2'></span>
|
||||
<span className='CenterFormitemDetailBorderLine3'></span>
|
||||
<ScrollBoard config={config} style={{ width: '105%', height: '240%' }} />
|
||||
</div>
|
||||
|
||||
</div >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Chart1;
|
||||
52
src/components/CenterTopData/substitutionCharts/Chart1.less
Normal file
52
src/components/CenterTopData/substitutionCharts/Chart1.less
Normal file
@@ -0,0 +1,52 @@
|
||||
.CenterChart1itemDetailBorder {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
justify-content: flex-start;
|
||||
|
||||
background-color: rgba(4, 44, 76, 0.2);
|
||||
.CenterChart1itemTXT {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
font-size: 20px;
|
||||
color:rgba(255,255,255,0.8);
|
||||
text-align: center;
|
||||
margin-top: 2%;
|
||||
|
||||
}
|
||||
.CenterChart1itemContainer {
|
||||
|
||||
width: 95%;
|
||||
height:100px;
|
||||
position:relative;
|
||||
|
||||
.CenterFormitemDetailBorderLine1 {
|
||||
width: 1px;
|
||||
height: 200px;
|
||||
background-color:#041c2c;
|
||||
float: left;
|
||||
margin-left: 18%;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
}
|
||||
.CenterFormitemDetailBorderLine2 {
|
||||
width: 1px;
|
||||
height: 200px;
|
||||
background-color:#041c2c;
|
||||
float: left;
|
||||
margin-left: 46%;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
}
|
||||
.CenterFormitemDetailBorderLine3 {
|
||||
width: 1px;
|
||||
height: 200px;
|
||||
background-color:#041c2c;
|
||||
float: left;
|
||||
margin-left: 72%;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
89
src/components/CenterTopData/substitutionCharts/Chart2.jsx
Normal file
89
src/components/CenterTopData/substitutionCharts/Chart2.jsx
Normal file
@@ -0,0 +1,89 @@
|
||||
|
||||
import React, { useEffect, useState, useRef } from 'react'
|
||||
|
||||
import icon1 from '@/assets/CenterChart2icon1.svg'
|
||||
import icon2 from '@/assets/CenterChart2icon2.svg'
|
||||
import icon3 from '@/assets/CenterChart2icon3.svg'
|
||||
import icon4 from '@/assets/CenterChart2icon4.svg'
|
||||
|
||||
|
||||
import './Chart2.less'
|
||||
|
||||
|
||||
const Chart2 = () => {
|
||||
|
||||
const timmer = useRef();
|
||||
const [year, setYear] = useState('')
|
||||
const [month, setMonth] = useState('')
|
||||
const [day, setDay] = useState('')
|
||||
|
||||
|
||||
const getNewDate = () => {
|
||||
const Time = new Date();
|
||||
const year = Time.getFullYear();
|
||||
const month = Time.getMonth() + 1;
|
||||
const day = Time.getDate();
|
||||
|
||||
|
||||
setYear(year);
|
||||
setMonth(month);
|
||||
setDay(day);
|
||||
|
||||
}
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
getNewDate();
|
||||
timmer.current = setInterval(getNewDate, 10000);
|
||||
return () => {
|
||||
clearTimeout(timmer.current)
|
||||
}
|
||||
//eslint-disable-next-line
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className='CenterChart2itemDetailBorder'>
|
||||
|
||||
<div className='CenterChart2itemcontentOUT'>
|
||||
<div className='CenterChart2itemcontent'>
|
||||
<img src={icon4} alt="Error" className='CenterChart2itemcontentIcon' />
|
||||
<div className='CenterChart2itemcontentText' >
|
||||
<h2 className='CenterChart2itemcontentText1'>车间温度</h2>
|
||||
<h2 className='CenterChart2itemcontentText2'> 27℃</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className='CenterChart2itemcontent'>
|
||||
<img src={icon2} alt="Error" className='CenterChart2itemcontentIcon' />
|
||||
<div className='CenterChart2itemcontentText' >
|
||||
<h2 className='CenterChart2itemcontentText1'>当前火向</h2>
|
||||
<h2 className='CenterChart2itemcontentText2'> XXX</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='CenterChart2itemcontentOUT'>
|
||||
<div className='CenterChart2itemcontent'>
|
||||
<img src={icon1} alt="Error" className='CenterChart2itemcontentIcon' />
|
||||
<div className='CenterChart2itemcontentText' >
|
||||
<h2 className='CenterChart2itemcontentText1'>换火时间</h2>
|
||||
<h2 className='CenterChart2itemcontentText2'> 12:41:45</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className='CenterChart2itemcontent'>
|
||||
<img src={icon3} alt="Error" className='CenterChart2itemcontentIcon' />
|
||||
<div className='CenterChart2itemcontentText' >
|
||||
<h2 className='CenterChart2itemcontentText1'>剩余时间</h2>
|
||||
<h2 className='CenterChart2itemcontentText2'> 20h</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div >
|
||||
);
|
||||
}
|
||||
|
||||
export default Chart2;
|
||||
53
src/components/CenterTopData/substitutionCharts/Chart2.less
Normal file
53
src/components/CenterTopData/substitutionCharts/Chart2.less
Normal file
@@ -0,0 +1,53 @@
|
||||
.CenterChart2itemDetailBorder {
|
||||
width: 440px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
|
||||
.CenterChart2itemcontentOUT {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
.CenterChart2itemcontent {
|
||||
width: 224px;
|
||||
height: 95%;
|
||||
background: url(../../../assets/CenterChart2ItemBg.png);
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: left;
|
||||
margin-top: 3%;
|
||||
margin-left: 2%;
|
||||
|
||||
.CenterChart2itemcontentIcon {
|
||||
margin-top: 2%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
.CenterChart2itemcontentText {
|
||||
width: 50%;
|
||||
height: 70%;
|
||||
margin-left: -2%;
|
||||
|
||||
.CenterChart2itemcontentText1 {
|
||||
color: rgba(224, 222, 222, 0.8);
|
||||
font-size: 15px;
|
||||
margin-top: 10%;
|
||||
}
|
||||
|
||||
.CenterChart2itemcontentText2 {
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 34px;
|
||||
margin-top: -10%;
|
||||
margin-left: -3%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
68
src/components/Head/index.jsx
Normal file
68
src/components/Head/index.jsx
Normal file
@@ -0,0 +1,68 @@
|
||||
import React, { useEffect, useState, useRef } from 'react'
|
||||
|
||||
import TopSide from "../../assets/TopSide.png"
|
||||
import LeftLine from "../../assets/TopTitleLeftIcon.png"
|
||||
import RightLine from "../../assets/TopTitleRightIcon.png"
|
||||
import ButtonLine from "../../assets/TopButtonLine.png"
|
||||
import './index.less'
|
||||
|
||||
export default function index() {
|
||||
const timmer = useRef()
|
||||
const [Hour, setHour] = useState('');
|
||||
const [Seconds, setSeconds] = useState('');
|
||||
const [Minutes, setMinutes] = useState('');
|
||||
const [Year, setYear] = useState('');
|
||||
const [Month, setMonth] = useState('');
|
||||
const [Day, setDay] = useState('');
|
||||
|
||||
const getNewDate = () => {
|
||||
const time = new Date();
|
||||
const year = time.getFullYear();
|
||||
const month = time.getMonth() + 1;
|
||||
const day = time.getDate();
|
||||
const hour = time.getHours();
|
||||
const minutes = time.getMinutes();
|
||||
const s = time.getSeconds();
|
||||
const seconds = s <= 9 ? "0" + s : s;
|
||||
// const t = `${year}年${month}月${day}日 ${hour}:${minutes}:${seconds}`
|
||||
setHour(hour)
|
||||
setSeconds(seconds)
|
||||
if (minutes < 10) {
|
||||
setMinutes(`0${minutes}`)
|
||||
} else {
|
||||
setMinutes(minutes)
|
||||
}
|
||||
setYear(year)
|
||||
setMonth(month)
|
||||
setDay(day)
|
||||
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
timmer.current = setInterval(getNewDate, 1000);
|
||||
return () => {
|
||||
clearTimeout(timmer.current)
|
||||
}
|
||||
// eslint-disable-next-line
|
||||
}, [])
|
||||
|
||||
|
||||
return (
|
||||
<div className='TopTitleBoder' >
|
||||
<img src={TopSide} alt="图片丢失" className='TopSideLeft' />
|
||||
<div className='TopSideLeftLine' >
|
||||
<img src={LeftLine} alt="图片丢失" className='TopSideLeftLineicon' />
|
||||
<h2 className='TopSideLeftTxt'>单位：中建材智能自动化研究院</h2>
|
||||
</div>
|
||||
<div >
|
||||
<h2 className='TopTitleText'>许昌安彩新能科技  4800万方光伏轻质基板生产线 </h2>
|
||||
<img src={ButtonLine} alt="图片加载错误" className='TopButtonLine' />
|
||||
</div>
|
||||
<div className='TopSideRightLine' >
|
||||
<h2 className='TopSideRightTxt'>{Year}.{Month}.{Day} {Hour}.{Minutes}.{Seconds}</h2>
|
||||
<img src={RightLine} alt="图片丢失" className='TopSideRightLineicon' />
|
||||
</div>
|
||||
<img src={TopSide} alt="图片丢失" className='TopSideRight' />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
89
src/components/Head/index.less
Normal file
89
src/components/Head/index.less
Normal file
@@ -0,0 +1,89 @@
|
||||
.TopTitleBoder {
|
||||
width: 3840px;
|
||||
height: 84px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
background: #17b2747a;
|
||||
|
||||
.TopSideRight {
|
||||
margin-top: 40px;
|
||||
margin-right: 40px;
|
||||
width: 493px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.TopSideLeft {
|
||||
margin-left: 40px;
|
||||
margin-top: 40px;
|
||||
width: 493px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.TopSideLeftLine {
|
||||
background: url('../../assets/TopTitleLeft.png');
|
||||
width: 899px;
|
||||
height: 40px;
|
||||
margin-top: 42px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: right;
|
||||
|
||||
.TopSideLeftLineicon {
|
||||
margin-right: 40px;
|
||||
margin-top: 25px;
|
||||
width: 204.32px;
|
||||
height: 2.79px;
|
||||
}
|
||||
|
||||
.TopSideLeftTxt {
|
||||
margin-right: 120px;
|
||||
margin-top: 15px;
|
||||
color: rgb(255, 255, 255, 0.8);
|
||||
font-size: 20px;
|
||||
font-weight: 300px;
|
||||
line-height: 22.174976px;
|
||||
}
|
||||
}
|
||||
|
||||
.TopSiderightLine {
|
||||
background: url('../../assets/TopTitleRight.png');
|
||||
width: 899px;
|
||||
height: 40px;
|
||||
margin-top: 42px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: left;
|
||||
|
||||
.TopSideRightLineicon {
|
||||
margin-left: 40px;
|
||||
margin-top: 25px;
|
||||
width: 204.32px;
|
||||
height: 2.79px;
|
||||
}
|
||||
|
||||
.TopSideRightTxt {
|
||||
margin-left: 120px;
|
||||
margin-top: 15px;
|
||||
color: rgb(255, 255, 255, 0.8);
|
||||
font-size: 20px;
|
||||
font-weight: 600px;
|
||||
line-height: 22.174976px;
|
||||
}
|
||||
}
|
||||
|
||||
.TopButtonLine {
|
||||
margin-top: -9px;
|
||||
width: 760px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.TopTitleText {
|
||||
margin-top: 16px;
|
||||
letter-spacing: 8px;
|
||||
font-size: 32px;
|
||||
color: #00fff7;
|
||||
text-align: center;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
72
src/components/LeftBar/Chart1.jsx
Normal file
72
src/components/LeftBar/Chart1.jsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import React from 'react'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
|
||||
import Item from './substitutionCharts/Chart1.jsx'
|
||||
|
||||
import Icon from '../../assets/Icon/LeftrChart1ICon.png'
|
||||
import Icon1 from '../../assets/ButtonChart7Icon1.svg'
|
||||
import Icon2 from '../../assets/ButtonChart7Icon2.svg'
|
||||
|
||||
import './Chart1.less'
|
||||
|
||||
var Data1 = {
|
||||
'冷水管温度': '3℃',
|
||||
'主线冷水管水压': ' 500Pa',
|
||||
'冷管流量': '800m³'
|
||||
}
|
||||
|
||||
var Data2 = {
|
||||
'冷水管温度': '8℃',
|
||||
'主线冷水管水压': ' 900Pa',
|
||||
'冷管流量': '400m³'
|
||||
}
|
||||
//循环的参数
|
||||
var Number = 1
|
||||
|
||||
export default function Chart1() {
|
||||
|
||||
useEffect(() => {
|
||||
setInterval(() => {
|
||||
Number = Number + 1
|
||||
setNum(Number % 2)
|
||||
if (Number == 3) {
|
||||
Number = 1
|
||||
}
|
||||
}, 10000)
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
const [num, setNum] = useState(1)
|
||||
|
||||
return (
|
||||
<div className='LeftChart1AllBorder'>
|
||||
<div className='LeftChart1ItemitemBorder'>
|
||||
<img src={Icon} alt="图片加载错误" className='LeftChart1ItemIcon' />
|
||||
<div className='LeftChart1ItemTitle'>公共工程</div>
|
||||
</div>
|
||||
<div className='LeftChart1ItemBorder'>
|
||||
<div className='LeftChart1ItemRow'>
|
||||
<div className='LeftChart1ItemRowDetail'>
|
||||
<img src={Icon1} alt="" />
|
||||
<h2 className='LeftChart1ItemRowDetailTxt'>水泵水管</h2>
|
||||
</div>
|
||||
<Item data={num == 1 ? Data1 : Data2} />
|
||||
</div>
|
||||
<div className='LeftChart1ItemRow'></div>
|
||||
<div className='LeftChart1ItemRow'>
|
||||
<div className='LeftChart1ItemRowDetail'>
|
||||
<img src={Icon2} alt="" />
|
||||
<h2 className='LeftChart1ItemRowDetailTxt'>氢气</h2>
|
||||
</div>
|
||||
<Item data={num == 1 ? Data1 : Data2} />
|
||||
</div>
|
||||
<div className='LeftChart1ItemRow'></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
63
src/components/LeftBar/Chart1.less
Normal file
63
src/components/LeftBar/Chart1.less
Normal file
@@ -0,0 +1,63 @@
|
||||
.LeftChart1AllBorder {
|
||||
width: 625px;
|
||||
height: 305px;
|
||||
background: url('../../assets/ItemBg.png');
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.LeftChart1ItemitemBorder {
|
||||
margin-top: 24px;
|
||||
margin-left: 24px;
|
||||
width: 202px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
vertical-align: middle;
|
||||
|
||||
.LeftChart1ItemIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.LeftChart1ItemTitle {
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
font-weight: 900px;
|
||||
margin-left: 8px;
|
||||
margin-top: -5px;
|
||||
font-family: 'pingFangSC-Medium';
|
||||
}
|
||||
}
|
||||
|
||||
.LeftChart1ItemBorder {
|
||||
width: 95%;
|
||||
height: 227px;
|
||||
margin-left: 16px;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
.LeftChart1ItemRow {
|
||||
width: 288px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
justify-content: flex-start;
|
||||
.LeftChart1ItemRowDetail{
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.LeftChart1ItemRowDetailTxt{
|
||||
font-size: 22px;
|
||||
font-weight: 400px;
|
||||
color: #FFFFFF;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
113
src/components/LeftBar/Chart2.jsx
Normal file
113
src/components/LeftBar/Chart2.jsx
Normal file
@@ -0,0 +1,113 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
48
src/components/LeftBar/Chart2.less
Normal file
48
src/components/LeftBar/Chart2.less
Normal file
@@ -0,0 +1,48 @@
|
||||
.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;
|
||||
|
||||
}
|
||||
}
|
||||
15
src/components/LeftBar/index.jsx
Normal file
15
src/components/LeftBar/index.jsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import React from 'react'
|
||||
|
||||
|
||||
import Chart1 from './Chart1'
|
||||
import Chart2 from './Chart2'
|
||||
|
||||
import './index.less'
|
||||
export default function index() {
|
||||
return (
|
||||
<div className='LeftBorder'>
|
||||
<Chart1/>
|
||||
<Chart2/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
25
src/components/LeftBar/index.less
Normal file
25
src/components/LeftBar/index.less
Normal file
@@ -0,0 +1,25 @@
|
||||
.LeftBorder {
|
||||
width: 625px;
|
||||
height: 966px;
|
||||
margin-left: 40px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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;
|
||||
}
|
||||
}
|
||||
38
src/components/LeftBar/substitutionCharts/Chart1.jsx
Normal file
38
src/components/LeftBar/substitutionCharts/Chart1.jsx
Normal file
@@ -0,0 +1,38 @@
|
||||
|
||||
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 >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
44
src/components/LeftBar/substitutionCharts/Chart1.less
Normal file
44
src/components/LeftBar/substitutionCharts/Chart1.less
Normal file
@@ -0,0 +1,44 @@
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
109
src/components/LeftBar/substitutionCharts/Chart2.jsx
Normal file
109
src/components/LeftBar/substitutionCharts/Chart2.jsx
Normal file
@@ -0,0 +1,109 @@
|
||||
|
||||
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;
|
||||
11
src/components/LeftBar/substitutionCharts/Chart2.less
Normal file
11
src/components/LeftBar/substitutionCharts/Chart2.less
Normal file
@@ -0,0 +1,11 @@
|
||||
.LeftChart2itemDetailBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top:-8px;
|
||||
|
||||
|
||||
}
|
||||
120
src/components/LeftBar/substitutionCharts/Chart3.jsx
Normal file
120
src/components/LeftBar/substitutionCharts/Chart3.jsx
Normal file
@@ -0,0 +1,120 @@
|
||||
|
||||
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;
|
||||
9
src/components/LeftBar/substitutionCharts/Chart3.less
Normal file
9
src/components/LeftBar/substitutionCharts/Chart3.less
Normal file
@@ -0,0 +1,9 @@
|
||||
.LeftChart3itemDetailBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top:-8px;
|
||||
}
|
||||
126
src/components/LeftBar/substitutionCharts/Chart4.jsx
Normal file
126
src/components/LeftBar/substitutionCharts/Chart4.jsx
Normal file
@@ -0,0 +1,126 @@
|
||||
|
||||
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;
|
||||
9
src/components/LeftBar/substitutionCharts/Chart4.less
Normal file
9
src/components/LeftBar/substitutionCharts/Chart4.less
Normal file
@@ -0,0 +1,9 @@
|
||||
.LeftChart4itemDetailBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
28
src/components/RightBar/Chart1.jsx
Normal file
28
src/components/RightBar/Chart1.jsx
Normal file
@@ -0,0 +1,28 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
45
src/components/RightBar/Chart1.less
Normal file
45
src/components/RightBar/Chart1.less
Normal file
@@ -0,0 +1,45 @@
|
||||
.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;
|
||||
|
||||
}
|
||||
}
|
||||
109
src/components/RightBar/Chart2.jsx
Normal file
109
src/components/RightBar/Chart2.jsx
Normal file
@@ -0,0 +1,109 @@
|
||||
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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
71
src/components/RightBar/Chart2.less
Normal file
71
src/components/RightBar/Chart2.less
Normal file
@@ -0,0 +1,71 @@
|
||||
.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;
|
||||
|
||||
}
|
||||
}
|
||||
100
src/components/RightBar/Chart3.jsx
Normal file
100
src/components/RightBar/Chart3.jsx
Normal file
@@ -0,0 +1,100 @@
|
||||
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>
|
||||
|
||||
)
|
||||
}
|
||||
70
src/components/RightBar/Chart3.less
Normal file
70
src/components/RightBar/Chart3.less
Normal file
@@ -0,0 +1,70 @@
|
||||
.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;
|
||||
|
||||
}
|
||||
}
|
||||
27
src/components/RightBar/index.jsx
Normal file
27
src/components/RightBar/index.jsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import React from 'react'
|
||||
|
||||
|
||||
import Chart1 from './Chart1'
|
||||
|
||||
import Chart2 from './Chart2'
|
||||
|
||||
import Chart3 from './Chart3'
|
||||
// import RightChart2 from './Chart2'
|
||||
|
||||
//引用原来的公共工程
|
||||
import RightChart2 from './Chart2'
|
||||
|
||||
|
||||
import RightChart3 from './Chart3'
|
||||
|
||||
import './index.less'
|
||||
|
||||
export default function index() {
|
||||
return (
|
||||
<div className='RightBorder'>
|
||||
<Chart1 />
|
||||
<Chart2 />
|
||||
<Chart3 />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
18
src/components/RightBar/index.less
Normal file
18
src/components/RightBar/index.less
Normal file
@@ -0,0 +1,18 @@
|
||||
.RightBorder {
|
||||
width: 625px;
|
||||
height: 966px;
|
||||
margin-left: 24px;
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
justify-content: flex-start;
|
||||
|
||||
.RightBorder1 {
|
||||
width: 440px;
|
||||
height: 340px;
|
||||
}
|
||||
.RightBorder2 {
|
||||
width: 850px;
|
||||
height: 305px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
126
src/components/RightBar/substitutionCharts/Chart1/Chart1.jsx
Normal file
126
src/components/RightBar/substitutionCharts/Chart1/Chart1.jsx
Normal file
@@ -0,0 +1,126 @@
|
||||
|
||||
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;
|
||||
@@ -0,0 +1,5 @@
|
||||
.RightChart3itemDetailBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow:visible;
|
||||
}
|
||||
100
src/components/RightBar/substitutionCharts/Chart1/index.jsx
Normal file
100
src/components/RightBar/substitutionCharts/Chart1/index.jsx
Normal file
@@ -0,0 +1,100 @@
|
||||
|
||||
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;
|
||||
`
|
||||
|
||||
|
||||
|
||||
let Ion2 = styled.div`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
float:left;
|
||||
background: url(${RightChart1Icon2});
|
||||
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;
|
||||
33
src/components/RightBar/substitutionCharts/Chart1/index.less
Normal file
33
src/components/RightBar/substitutionCharts/Chart1/index.less
Normal file
@@ -0,0 +1,33 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
133
src/components/RightBar/substitutionCharts/Chart2.jsx
Normal file
133
src/components/RightBar/substitutionCharts/Chart2.jsx
Normal file
@@ -0,0 +1,133 @@
|
||||
|
||||
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;
|
||||
5
src/components/RightBar/substitutionCharts/Chart2.less
Normal file
5
src/components/RightBar/substitutionCharts/Chart2.less
Normal file
@@ -0,0 +1,5 @@
|
||||
.RightChart2itemDetailBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
106
src/components/RightBar/substitutionCharts/Chart3.jsx
Normal file
106
src/components/RightBar/substitutionCharts/Chart3.jsx
Normal file
@@ -0,0 +1,106 @@
|
||||
|
||||
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;
|
||||
5
src/components/RightBar/substitutionCharts/Chart3.less
Normal file
5
src/components/RightBar/substitutionCharts/Chart3.less
Normal file
@@ -0,0 +1,5 @@
|
||||
.RightChart3itemDetailBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
24
src/components/V3DComp/V3DApp1.js
Normal file
24
src/components/V3DComp/V3DApp1.js
Normal file
@@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
import * as v3dAppAPI from '@/v3dApp/app1.js';
|
||||
|
||||
import '@/v3dApp/app.css';
|
||||
|
||||
import './V3DApp1.less';
|
||||
|
||||
class V3DApp extends React.Component {
|
||||
#app = null;
|
||||
componentDidMount() {
|
||||
v3dAppAPI.createApp().then(app => { this.#app = app; });
|
||||
|
||||
}
|
||||
componentWillUnmount() {
|
||||
if (this.#app !== null) { this.#app.dispose(); this.#app = null; }
|
||||
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div id={v3dAppAPI.CONTAINER_ID}>
|
||||
</div>
|
||||
)}
|
||||
}
|
||||
export default V3DApp;
|
||||
6
src/components/V3DComp/V3DApp1.less
Normal file
6
src/components/V3DComp/V3DApp1.less
Normal file
@@ -0,0 +1,6 @@
|
||||
#v3dAppAPI.CONTAINER_ID {
|
||||
position: relative;
|
||||
height: 10%;
|
||||
width: min-content;
|
||||
background-color: aqua;
|
||||
}
|
||||
24
src/components/V3DComp/V3DApp2.js
Normal file
24
src/components/V3DComp/V3DApp2.js
Normal file
@@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
import * as v3dAppAPI from '@/v3dApp/app2.js';
|
||||
|
||||
import '@/v3dApp/app.css';
|
||||
|
||||
import './V3DApp1.less';
|
||||
|
||||
class V3DApp extends React.Component {
|
||||
#app = null;
|
||||
componentDidMount() {
|
||||
v3dAppAPI.createApp().then(app => { this.#app = app; });
|
||||
|
||||
}
|
||||
componentWillUnmount() {
|
||||
if (this.#app !== null) { this.#app.dispose(); this.#app = null; }
|
||||
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div id={v3dAppAPI.CONTAINER_ID}>
|
||||
</div>
|
||||
)}
|
||||
}
|
||||
export default V3DApp;
|
||||
6
src/components/V3DComp/V3DApp2.less
Normal file
6
src/components/V3DComp/V3DApp2.less
Normal file
@@ -0,0 +1,6 @@
|
||||
#v3dAppAPI.CONTAINER_ID{
|
||||
position: relative;
|
||||
height: 10%;
|
||||
width: min-content;
|
||||
background-color: aliceblue;
|
||||
}
|
||||
Reference in New Issue
Block a user