clean
This commit is contained in:
parent
eca11f0081
commit
8d134803b7
@ -1,127 +0,0 @@
|
|||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
.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;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,50 +0,0 @@
|
|||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,56 +0,0 @@
|
|||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,68 +0,0 @@
|
|||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,47 +0,0 @@
|
|||||||
.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%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -28,15 +28,6 @@ function FaultTotal(props) {
|
|||||||
color: '#DFF1FE',
|
color: '#DFF1FE',
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
},
|
},
|
||||||
// data: [
|
|
||||||
// { name: '缺陷1', icon: 'roundRect' },
|
|
||||||
// { name: '缺陷2', icon: 'roundRect' },
|
|
||||||
// { name: '缺陷3', icon: 'roundRect' },
|
|
||||||
// { name: '缺陷4', icon: 'roundRect' },
|
|
||||||
// { name: '缺陷5', icon: 'roundRect' },
|
|
||||||
// { name: '缺陷6', icon: 'roundRect' },
|
|
||||||
// { name: '缺陷8', icon: 'roundRect' },
|
|
||||||
// ],
|
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
@ -44,11 +35,6 @@ function FaultTotal(props) {
|
|||||||
.fill(1)
|
.fill(1)
|
||||||
.map((_, index) => {
|
.map((_, index) => {
|
||||||
return '产线' + (index + 1);
|
return '产线' + (index + 1);
|
||||||
// const today = new Date();
|
|
||||||
// const dtimestamp = today - index * 24 * 60 * 60 * 1000;
|
|
||||||
// return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
|
|
||||||
// dtimestamp,
|
|
||||||
// ).getDate()}`;
|
|
||||||
}),
|
}),
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
@ -147,54 +133,6 @@ function FaultTotal(props) {
|
|||||||
},
|
},
|
||||||
data: [620, 732, 701, 734, 1090, 1130, 1120],
|
data: [620, 732, 701, 734, 1090, 1130, 1120],
|
||||||
},
|
},
|
||||||
// {
|
|
||||||
// data: Array(5)
|
|
||||||
// .fill(1)
|
|
||||||
// .map((_) => {
|
|
||||||
// return randomInt(1000, 10000);
|
|
||||||
// }),
|
|
||||||
// type: 'line',
|
|
||||||
// areaStyle: {
|
|
||||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
// { offset: 0, color: '#FFD16040' },
|
|
||||||
// { offset: 0.5, color: '#FFD16020' },
|
|
||||||
// { offset: 1, color: '#FFD16010' },
|
|
||||||
// ]),
|
|
||||||
// },
|
|
||||||
// // smooth: true,
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// data: Array(7)
|
|
||||||
// .fill(1)
|
|
||||||
// .map((_) => {
|
|
||||||
// return randomInt(60, 100);
|
|
||||||
// }),
|
|
||||||
// type: 'line',
|
|
||||||
// areaStyle: {
|
|
||||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
// { offset: 0, color: '#12FFF540' },
|
|
||||||
// { offset: 0.5, color: '#12FFF520' },
|
|
||||||
// { offset: 1, color: '#12FFF510' },
|
|
||||||
// ]),
|
|
||||||
// },
|
|
||||||
// // smooth: true,
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// data: Array(7)
|
|
||||||
// .fill(1)
|
|
||||||
// .map((_) => {
|
|
||||||
// return randomInt(60, 100);
|
|
||||||
// }),
|
|
||||||
// type: 'line',
|
|
||||||
// areaStyle: {
|
|
||||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
// { offset: 0, color: '#2760FF40' },
|
|
||||||
// { offset: 0.5, color: '#2760FF20' },
|
|
||||||
// { offset: 1, color: '#2760FF10' },
|
|
||||||
// ]),
|
|
||||||
// },
|
|
||||||
// // smooth: true,
|
|
||||||
// },
|
|
||||||
],
|
],
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
@ -203,7 +141,6 @@ function FaultTotal(props) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<BottomBarItem icon="chart" title="产线缺陷统计" className={cls.faultTotal}>
|
<BottomBarItem icon="chart" title="产线缺陷统计" className={cls.faultTotal}>
|
||||||
{/* 产线缺陷统计 堆叠图 颜色 上下legend 日周月年 */}
|
|
||||||
<div className={cls.headWidget}>
|
<div className={cls.headWidget}>
|
||||||
{/* 日周月年 */}
|
{/* 日周月年 */}
|
||||||
<Radio.Group
|
<Radio.Group
|
||||||
|
|||||||
@ -8,9 +8,6 @@ import { useState } from 'react';
|
|||||||
|
|
||||||
function FaultType(props) {
|
function FaultType(props) {
|
||||||
const options = {
|
const options = {
|
||||||
// tooltip: {
|
|
||||||
// trigger: 'item',
|
|
||||||
// },
|
|
||||||
colors: [
|
colors: [
|
||||||
'#2760FF',
|
'#2760FF',
|
||||||
'#5B9BFF',
|
'#5B9BFF',
|
||||||
@ -35,7 +32,6 @@ function FaultType(props) {
|
|||||||
height: 130,
|
height: 130,
|
||||||
itemGap: 30,
|
itemGap: 30,
|
||||||
formatter: function (name) {
|
formatter: function (name) {
|
||||||
// console.log('name o', name, options.series[0].data.find(o => o.name == name).value)
|
|
||||||
return `${name} {sub|${
|
return `${name} {sub|${
|
||||||
options.series[0].data.find((o) => o.name == name).value
|
options.series[0].data.find((o) => o.name == name).value
|
||||||
}}`;
|
}}`;
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
.chart {
|
.chart {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
/* background-color: #00ee33; */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.faultType {
|
.faultType {
|
||||||
@ -9,12 +8,11 @@
|
|||||||
|
|
||||||
.headWidget {
|
.headWidget {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
/* background: #00ee33; */
|
|
||||||
top: 20px;
|
top: 20px;
|
||||||
right: 24px;
|
right: 24px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
width: 340px;
|
width: 340px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.radioGroup * {
|
.radioGroup * {
|
||||||
|
|||||||
@ -1,67 +0,0 @@
|
|||||||
|
|
||||||
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;
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
.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;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,62 +0,0 @@
|
|||||||
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;
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -118,24 +118,6 @@ function GasI(props) {
|
|||||||
]),
|
]),
|
||||||
},
|
},
|
||||||
})),
|
})),
|
||||||
// [
|
|
||||||
// {
|
|
||||||
// data: Array(7)
|
|
||||||
// .fill(1)
|
|
||||||
// .map((_) => {
|
|
||||||
// return randomInt(60, 100);
|
|
||||||
// }),
|
|
||||||
// type: 'line',
|
|
||||||
// areaStyle: {
|
|
||||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
// { offset: 0, color: '#12FFF540' },
|
|
||||||
// { offset: 0.5, color: '#12FFF520' },
|
|
||||||
// { offset: 1, color: '#12FFF510' },
|
|
||||||
// ]),
|
|
||||||
// },
|
|
||||||
// // smooth: true,
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
},
|
},
|
||||||
|
|||||||
@ -7,7 +7,6 @@ import { useContext } from 'react';
|
|||||||
function GasChart(props) {
|
function GasChart(props) {
|
||||||
const { dataSource } = props;
|
const { dataSource } = props;
|
||||||
const { hisState } = useContext(SocketContext);
|
const { hisState } = useContext(SocketContext);
|
||||||
console.log('his state', hisState);
|
|
||||||
|
|
||||||
const dataName = dataSource == 'gas-i' ? 'kilnGasT1' : 'kilnGasT2';
|
const dataName = dataSource == 'gas-i' ? 'kilnGasT1' : 'kilnGasT2';
|
||||||
|
|
||||||
|
|||||||
@ -30,14 +30,6 @@ function getData(type) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function GridList(props) {
|
function GridList(props) {
|
||||||
// const [dataList, setDataList] = useState([]);
|
|
||||||
// setDataList(getData(props.dataSource))
|
|
||||||
// useEffect(() => {
|
|
||||||
// // 这种写法有点问题。。。
|
|
||||||
// console.log('data source change:', props.dataSource);
|
|
||||||
// setDataList(getData(props.dataSource));
|
|
||||||
// }, props.dataSource);
|
|
||||||
|
|
||||||
const dataList = getData(props.dataSource);
|
const dataList = getData(props.dataSource);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
.chart {
|
.chart {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
/* background-color: #00ee33; */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.gas {
|
.gas {
|
||||||
@ -24,7 +23,6 @@
|
|||||||
|
|
||||||
.headWidget {
|
.headWidget {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
/* background: #00ee33; */
|
|
||||||
top: 22px;
|
top: 22px;
|
||||||
right: 24px;
|
right: 24px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
|
|||||||
@ -1,10 +1,5 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useEffect, useState } 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 GasI from './gasi';
|
import GasI from './gasi';
|
||||||
import GasII from './gasii';
|
import GasII from './gasii';
|
||||||
@ -16,21 +11,11 @@ import cls from './index.module.css';
|
|||||||
|
|
||||||
export default function index() {
|
export default function index() {
|
||||||
return (
|
return (
|
||||||
<>
|
<div className={`${cls.bottomBar} flex justify-between`}>
|
||||||
{false && (
|
<FaultTotal />
|
||||||
<div className="ButtonBorder">
|
<FaultType />
|
||||||
<Chart1 />
|
<GasII />
|
||||||
<Chart2 />
|
<GasI />
|
||||||
<Chart3 />
|
</div>
|
||||||
<Chart4 />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className={`${cls.bottomBar} flex justify-between`}>
|
|
||||||
<FaultTotal />
|
|
||||||
<FaultType />
|
|
||||||
<GasII />
|
|
||||||
<GasI />
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,207 +0,0 @@
|
|||||||
|
|
||||||
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;
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
.ButtonChart1itemDetailBorder {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,142 +0,0 @@
|
|||||||
|
|
||||||
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;
|
|
||||||
@ -1,66 +0,0 @@
|
|||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,124 +0,0 @@
|
|||||||
|
|
||||||
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;
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
.ButtonChart3itemDetailBorder {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,138 +0,0 @@
|
|||||||
import React, { Component } from 'react';
|
|
||||||
import './Chart4.less';
|
|
||||||
import ReactECharts from 'echarts-for-react';
|
|
||||||
|
|
||||||
var name = ['10HZ-15HZ', '15HZ-25HZ', '30HZ-35HZ', '40HZ-45HZ'];
|
|
||||||
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
|
|
||||||
var color = ['#2760ff', '#ffb70c', '#3dbdc2', '#e02094'];
|
|
||||||
var fontColor = '#fff';
|
|
||||||
var lineColor = 'rgba(33, 50, 89,0.8)';
|
|
||||||
|
|
||||||
class Chart3 extends Component {
|
|
||||||
getOption = () => ({
|
|
||||||
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;
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
.ButtonChart4itemDetailBorder {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
@ -1,183 +0,0 @@
|
|||||||
|
|
||||||
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;
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
.ButtonChart2itemDetailBorder {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
|
|
||||||
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 >
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,44 +0,0 @@
|
|||||||
.ButtonChart7itemDetailBorder {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin-top:-8px;
|
|
||||||
|
|
||||||
.buttonChart7FormBorder {
|
|
||||||
background: url(../../assets/ButtonChart7ItemBg.png);
|
|
||||||
margin-top: 1.5%;
|
|
||||||
width: 288px;
|
|
||||||
height: 48px;
|
|
||||||
border-radius: 3px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: left;
|
|
||||||
.buttonChart7FormTxt2Border {
|
|
||||||
width: 30%;
|
|
||||||
height: 100%;
|
|
||||||
.buttonChart7FormTxt2 {
|
|
||||||
margin-left: 20%;
|
|
||||||
margin-right: 5%;
|
|
||||||
margin-top: 13px;
|
|
||||||
text-align:left;
|
|
||||||
font-size: 15px;
|
|
||||||
color: rgba(255, 255, 255, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.buttonChart7FormTxt1Border {
|
|
||||||
width: 55%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.buttonChart7FormTxt1 {
|
|
||||||
margin-top: 13px;
|
|
||||||
margin-left: 3%;
|
|
||||||
text-align:right;
|
|
||||||
font-size: 15px;
|
|
||||||
color: rgba(255, 255, 255, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -6,18 +6,6 @@ import cls from './kiln.module.less';
|
|||||||
|
|
||||||
export default function Kiln() {
|
export default function Kiln() {
|
||||||
const ctx = useContext(SocketContext);
|
const ctx = useContext(SocketContext);
|
||||||
console.log('use ctx', ctx);
|
|
||||||
|
|
||||||
// const [infos, setInfos] = useState([
|
|
||||||
// { label: '窑炉压力', value: '29KPa' },
|
|
||||||
// { label: '循环水温度', value: '59℃' },
|
|
||||||
// { label: '循环水流量', value: '59㎡/h' },
|
|
||||||
// { label: '循环水压力', value: '34KPa' },
|
|
||||||
// { label: '窑温', value: '59℃' },
|
|
||||||
// { label: '压缩器压力', value: '293Pa' },
|
|
||||||
// { label: '水分', value: '12%' },
|
|
||||||
// { label: '助燃风', value: '122' },
|
|
||||||
// ]);
|
|
||||||
|
|
||||||
const infos = [
|
const infos = [
|
||||||
{ label: '窑炉压力', value: ctx.runState?.kilnPressure || '0Pa' },
|
{ label: '窑炉压力', value: ctx.runState?.kilnPressure || '0Pa' },
|
||||||
|
|||||||
@ -1,17 +1,14 @@
|
|||||||
import React from 'react'
|
import React from 'react';
|
||||||
|
import Kiln from './Kiln';
|
||||||
|
import GoodProduction from './GoodProduction';
|
||||||
|
|
||||||
|
import cls from './index.module.less';
|
||||||
import Kiln from './Kiln'
|
|
||||||
// import Chart2 from './Chart2'
|
|
||||||
import GoodProduction from './GoodProduction'
|
|
||||||
|
|
||||||
import cls from './index.module.less'
|
|
||||||
|
|
||||||
export default function index() {
|
export default function index() {
|
||||||
return (
|
return (
|
||||||
<div className={cls.leftBar}>
|
<div className={cls.leftBar}>
|
||||||
<Kiln />
|
<Kiln />
|
||||||
<GoodProduction />
|
<GoodProduction />
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -26,59 +26,4 @@
|
|||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// .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;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
height: 1px;
|
height: 1px;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
background: #ae27276a;
|
// background: #ae27276a;
|
||||||
|
|
||||||
.titleBar {
|
.titleBar {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -71,8 +71,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.radioGroup {
|
.radioGroup {
|
||||||
// border: 2px solid red;
|
|
||||||
|
|
||||||
* {
|
* {
|
||||||
border: none !important;
|
border: none !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
|
|||||||
@ -21,7 +21,7 @@
|
|||||||
background: #004782 !important;
|
background: #004782 !important;
|
||||||
}
|
}
|
||||||
.ant-switch .ant-switch-handle::before {
|
.ant-switch .ant-switch-handle::before {
|
||||||
background-color: #00233f !important;
|
background-color: #00233f !important;
|
||||||
}
|
}
|
||||||
.ant-switch-checked {
|
.ant-switch-checked {
|
||||||
background: #b4fffdb1 !important;
|
background: #b4fffdb1 !important;
|
||||||
@ -32,21 +32,3 @@
|
|||||||
.ant-switch-checked .ant-switch-handle::before {
|
.ant-switch-checked .ant-switch-handle::before {
|
||||||
background-color: #76fff9 !important;
|
background-color: #76fff9 !important;
|
||||||
}
|
}
|
||||||
/*
|
|
||||||
.radioGroup * {
|
|
||||||
border: none !important;
|
|
||||||
border-radius: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radioGroup *:focus-within {
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radioGroup *::before {
|
|
||||||
width: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radioGroup_button_wrapper {
|
|
||||||
color: #fff !important;
|
|
||||||
background: #03233c !important;
|
|
||||||
} */
|
|
||||||
|
|||||||
@ -1,5 +0,0 @@
|
|||||||
import cls from './radio.group.module.less';
|
|
||||||
|
|
||||||
function RadioGroup(props) {
|
|
||||||
return <div className="radioGroup"></div>;
|
|
||||||
}
|
|
||||||
@ -1,14 +1,6 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
// import Chart1 from './Chart1';
|
|
||||||
// import Chart2 from './Chart2';
|
|
||||||
// import Chart3 from './Chart3';
|
|
||||||
// import RightChart2 from './Chart2'
|
|
||||||
import SmokeHandle from './SmokeHandle';
|
import SmokeHandle from './SmokeHandle';
|
||||||
import EnergyCost from './EnergyCost';
|
import EnergyCost from './EnergyCost';
|
||||||
//引用原来的公共工程
|
|
||||||
// import RightChart2 from './Chart2'
|
|
||||||
// import RightChart3 from './Chart3'
|
|
||||||
|
|
||||||
import cls from './index.module.less';
|
import cls from './index.module.less';
|
||||||
|
|
||||||
@ -17,10 +9,6 @@ export default function index() {
|
|||||||
<div className={`${cls.rightBar} flex flex-col`}>
|
<div className={`${cls.rightBar} flex flex-col`}>
|
||||||
<EnergyCost />
|
<EnergyCost />
|
||||||
<SmokeHandle />
|
<SmokeHandle />
|
||||||
|
|
||||||
{/* <Chart1 />
|
|
||||||
<Chart2 />
|
|
||||||
<Chart3 /> */}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,10 +1,5 @@
|
|||||||
.rightBar {
|
.rightBar {
|
||||||
// background: #f00;
|
|
||||||
|
|
||||||
> div {
|
> div {
|
||||||
// height: 1px;
|
|
||||||
// flex: 1;
|
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user