@@ -0,0 +1,126 @@ | |||
import cls from './index.module.css'; | |||
import BottomBarItem from '../BottomBarItem'; | |||
import { Switch, Radio } from 'antd'; | |||
import ReactECharts from 'echarts-for-react'; | |||
import * as echarts from 'echarts'; | |||
import { randomInt } from '../../../utils'; | |||
import { useState } from 'react'; | |||
function FaultType(props) { | |||
const options = { | |||
colors: [ | |||
'#2760FF', | |||
'#5B9BFF', | |||
'#FFD160', | |||
'#8167F6', | |||
'#99D66C', | |||
'#FF8A40', | |||
'#12FFF5', | |||
], | |||
grid: { | |||
left: 0, | |||
top: 0, | |||
bottom: 0, | |||
right: 0, | |||
}, | |||
legend: { | |||
icon: 'circle', | |||
top: 32, | |||
right: 0, | |||
bottom: 32, | |||
width: 296, | |||
height: 130, | |||
itemGap: 30, | |||
formatter: function (name) { | |||
return `${name} {sub|${ | |||
options.series[0].data.find((o) => o.name == name).value | |||
}}`; | |||
}, | |||
textStyle: { | |||
color: '#DFF1FE', | |||
fontSize: 16, | |||
rich: { | |||
sub: { | |||
color: '#fff9', | |||
fontSize: 16, | |||
}, | |||
}, | |||
}, | |||
}, | |||
series: [ | |||
{ | |||
type: 'pie', | |||
center: ['26%', '54%'], | |||
radius: ['55%', '75%'], | |||
avoidLabelOverlap: false, | |||
label: { | |||
show: true, | |||
formatter: '{d}%', | |||
fontSize: 14, | |||
color: 'inherit', | |||
}, | |||
labelLine: { | |||
length: 0, | |||
}, | |||
// emphasis: { | |||
// label: { | |||
// show: true, | |||
// fontSize: 40, | |||
// fontWeight: 'bold', | |||
// }, | |||
// }, | |||
// labelLine: { | |||
// show: false, | |||
// }, | |||
data: [ | |||
{ value: 1048, name: '缺陷1' }, | |||
{ value: 735, name: '缺陷2' }, | |||
{ value: 580, name: '缺陷3' }, | |||
{ value: 484, name: '缺陷4' }, | |||
{ value: 300, name: '缺陷5' }, | |||
{ value: 300, name: '缺陷6' }, | |||
{ value: 300, name: '缺陷8' }, | |||
], | |||
}, | |||
], | |||
}; | |||
const [lines, setLines] = useState([ | |||
{ id: 1, label: '产线1', value: 'l1' }, | |||
{ id: 2, label: '产线2', value: 'l2' }, | |||
{ id: 3, label: '产线3', value: 'l3' }, | |||
{ id: 4, label: '产线4', value: 'l4' }, | |||
{ id: 5, label: '产线5', value: 'l5' }, | |||
]); | |||
return ( | |||
<BottomBarItem | |||
icon="puzzle" | |||
title="产线当日缺陷分类" | |||
className={cls.faultType} | |||
> | |||
<div className={cls.headWidget}> | |||
{/* 日周月年 */} | |||
<Radio.Group | |||
defaultValue="l1" | |||
buttonStyle="solid" | |||
className={cls.radioGroup} | |||
> | |||
{lines.map((l, index) => ( | |||
<Radio.Button | |||
key={l.label} | |||
value={l.value} | |||
className={`radio-group__item ${cls['radio-group__item']}`} | |||
> | |||
{l.label} | |||
</Radio.Button> | |||
))} | |||
</Radio.Group> | |||
</div> | |||
<div className={cls.chart}> | |||
<ReactECharts option={options} style={{ height: '100%' }} /> | |||
</div> | |||
</BottomBarItem> | |||
); | |||
} | |||
export default FaultType; |
@@ -0,0 +1,39 @@ | |||
.chart { | |||
height: 100%; | |||
} | |||
.faultType { | |||
position: relative; | |||
height: 100%; | |||
} | |||
.headWidget { | |||
position: absolute; | |||
top: 28px; | |||
right: 24px; | |||
height: 32px; | |||
width: 340px; | |||
text-align: right; | |||
} | |||
.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; | |||
} | |||
.radio-group__item { | |||
padding: 0 8px; | |||
} |
@@ -5,6 +5,7 @@ | |||
.gas { | |||
position: relative; | |||
height: 100%; | |||
} | |||
.currentFlow { | |||
@@ -25,7 +26,7 @@ | |||
.headWidget { | |||
position: absolute; | |||
/* background: #00ee33; */ | |||
top: 20px; | |||
top: 28px; | |||
right: 24px; | |||
height: 32px; | |||
width: 190px; | |||
@@ -68,7 +69,7 @@ | |||
.headWidget { | |||
position: absolute; | |||
/* background: #00ee33; */ | |||
top: 22px; | |||
top: 28px; | |||
right: 24px; | |||
height: 32px; | |||
width: 410px; | |||
@@ -19,16 +19,16 @@ function GasII(props) { | |||
} | |||
} | |||
function handleSourceChange(e) { | |||
console.log('val', e.target.value); | |||
if (e.target.value == 'ii') { | |||
// 天然气II | |||
setDataSource('gas-ii'); | |||
} else if (e.target.value == 'i') { | |||
// 天然气 I | |||
setDataSource('gas-i'); | |||
} | |||
} | |||
// function handleSourceChange(e) { | |||
// console.log('val', e.target.value); | |||
// if (e.target.value == 'ii') { | |||
// // 天然气II | |||
// setDataSource('gas-ii'); | |||
// } else if (e.target.value == 'i') { | |||
// // 天然气 I | |||
// setDataSource('gas-i'); | |||
// } | |||
// } | |||
return ( | |||
<BottomBarItem icon="pause" title="天然气流量" className={cls.gas}> | |||
@@ -40,7 +40,7 @@ function GasII(props) { | |||
{!showChart && <span className={cls.switchLabel}>实时流量</span>} | |||
</div> | |||
<Radio.Group | |||
{/* <Radio.Group | |||
defaultValue="i" | |||
buttonStyle="solid" | |||
className={cls.radioGroup} | |||
@@ -52,7 +52,7 @@ function GasII(props) { | |||
<Radio.Button value="ii" className="radio-group__item"> | |||
天然气 II | |||
</Radio.Button> | |||
</Radio.Group> | |||
</Radio.Group> */} | |||
</div> | |||
<div className={cls.chart}> | |||
@@ -4,11 +4,12 @@ | |||
.gas { | |||
position: relative; | |||
height: 100%; | |||
} | |||
.currentFlow { | |||
position: absolute; | |||
top: 20px; | |||
top: 28px; | |||
left: 50%; | |||
transform: translateX(-50%); | |||
padding: 8px 22px; | |||
@@ -23,7 +24,7 @@ | |||
.headWidget { | |||
position: absolute; | |||
top: 22px; | |||
top: 28px; | |||
right: 24px; | |||
height: 32px; | |||
width: 410px; | |||
@@ -5,6 +5,9 @@ import './styles/main.module.css'; | |||
import FaultTotal from '../BottomBar/FaultTotal'; | |||
import FaultType from '../BottomBar/FaultType'; | |||
import GasFlow from '../BottomBar/gasii'; | |||
import WindFlow from '../BottomBar/gasi'; | |||
import SpecPL from '../BottomBar/SpecPL'; | |||
export default (props) => { | |||
return ( | |||
@@ -17,9 +20,15 @@ export default (props) => { | |||
<Bottom title="产线当日缺陷分类" className="bottom-2"> | |||
<FaultType /> | |||
</Bottom> | |||
<Bottom title="天然气流量" className="bottom-3"></Bottom> | |||
<Bottom title="助燃风流量" className="bottom-4"></Bottom> | |||
<Bottom title="当前产线生产风格" className="bottom-5"></Bottom> | |||
<Bottom title="天然气流量" className="bottom-3"> | |||
<GasFlow /> | |||
</Bottom> | |||
<Bottom title="助燃风流量" className="bottom-4"> | |||
<WindFlow /> | |||
</Bottom> | |||
<Bottom title="当前产线生产风格" className="bottom-5"> | |||
<SpecPL /> | |||
</Bottom> | |||
<RightContent className="right"></RightContent> | |||
</div> | |||
); | |||