@@ -12,3 +12,5 @@ function BottomBarItem(props) { | |||
</Container> | |||
); | |||
} | |||
export default BottomBarItem; |
@@ -1,4 +1,5 @@ | |||
.bottomBarItem { | |||
background: url(../../../assets/bg-bottom-item.png) no-repeat; | |||
background-size: 100% 100%; | |||
width: 600px; | |||
} |
@@ -1,10 +1,233 @@ | |||
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'; | |||
function FaultTotal(props) { | |||
const options = { | |||
color: [ | |||
'#2760FF', | |||
'#5B9BFF', | |||
'#FFD160', | |||
'#8167F6', | |||
'#99D66C', | |||
'#FF8A40', | |||
'#12FFF5', | |||
], | |||
grid: { top: 42, right: 12, bottom: 20, left: 48 }, | |||
legend: { | |||
top: 10, | |||
padding: 5, | |||
itemWidth: 12, | |||
itemHeight: 12, | |||
itemGap: 12, | |||
height: 12, | |||
textStyle: { | |||
color: '#DFF1FE', | |||
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: { | |||
type: 'category', | |||
data: Array(5) | |||
.fill(1) | |||
.map((_, index) => { | |||
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: { | |||
color: '#fff', | |||
fontSize: 12, | |||
}, | |||
axisTick: { show: false }, | |||
axisLine: { | |||
lineStyle: { | |||
width: 1, | |||
color: '#213259', | |||
}, | |||
}, | |||
}, | |||
yAxis: { | |||
name: '单位/个', | |||
nameTextStyle: { | |||
color: '#fff', | |||
fontSize: 10, | |||
align: 'right', | |||
}, | |||
type: 'value', | |||
axisLabel: { | |||
color: '#fff', | |||
fontSize: 12, | |||
formatter: '{value}', | |||
}, | |||
axisLine: { | |||
show: true, | |||
lineStyle: { | |||
color: '#213259', | |||
}, | |||
}, | |||
splitLine: { | |||
lineStyle: { | |||
color: '#213259a0', | |||
}, | |||
}, | |||
// interval: 10, | |||
// min: 0, | |||
// max: 100, | |||
}, | |||
series: [ | |||
{ | |||
name: '缺陷1', | |||
type: 'bar', | |||
stack: 'abcd', | |||
emphasis: { | |||
focus: 'series', | |||
}, | |||
data: [320, 332, 301, 334, 390, 330, 320], | |||
}, | |||
{ | |||
name: '缺陷2', | |||
type: 'bar', | |||
stack: 'abcd', | |||
emphasis: { | |||
focus: 'series', | |||
}, | |||
data: [120, 132, 101, 134, 90, 230, 210], | |||
}, | |||
{ | |||
name: '缺陷3', | |||
type: 'bar', | |||
stack: 'abcd', | |||
emphasis: { | |||
focus: 'series', | |||
}, | |||
data: [220, 182, 191, 234, 290, 330, 310], | |||
}, | |||
{ | |||
name: '缺陷4', | |||
type: 'bar', | |||
stack: 'abcd', | |||
emphasis: { | |||
focus: 'series', | |||
}, | |||
data: [150, 232, 201, 154, 190, 330, 410], | |||
}, | |||
{ | |||
name: '缺陷5', | |||
type: 'bar', | |||
stack: 'abcd', | |||
emphasis: { | |||
focus: 'series', | |||
}, | |||
data: [862, 1018, 964, 1026, 1679, 1600, 1570], | |||
}, | |||
{ | |||
name: '缺陷6', | |||
type: 'bar', | |||
barGap: 20, | |||
barWidth: 12, | |||
stack: 'abcd', | |||
emphasis: { | |||
focus: 'series', | |||
}, | |||
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: { | |||
trigger: 'axis', | |||
}, | |||
}; | |||
return ( | |||
<BottomBarItem icon="chart" title="产线缺陷统计" className={cls.faultTotal}> | |||
产线缺陷统计 堆叠图 颜色 上下legend 日周月年 | |||
{/* 产线缺陷统计 堆叠图 颜色 上下legend 日周月年 */} | |||
<div className={cls.headWidget}> | |||
{/* 日周月年 */} | |||
<Radio.Group | |||
defaultValue="week" | |||
buttonStyle="solid" | |||
className={cls.radioGroup} | |||
> | |||
<Radio.Button value="day" className="radio-group__item"> | |||
日 | |||
</Radio.Button> | |||
<Radio.Button value="week" className="radio-group__item"> | |||
周 | |||
</Radio.Button> | |||
<Radio.Button value="month" className="radio-group__item"> | |||
月 | |||
</Radio.Button> | |||
<Radio.Button value="year" className="radio-group__item"> | |||
年 | |||
</Radio.Button> | |||
</Radio.Group> | |||
</div> | |||
<div className={cls.chart}> | |||
<ReactECharts option={options} style={{ height: '100%' }} /> | |||
</div> | |||
</BottomBarItem> | |||
); | |||
} | |||
@@ -0,0 +1,36 @@ | |||
.chart { | |||
height: 100%; | |||
/* background-color: #00ee33; */ | |||
} | |||
.faultTotal { | |||
position: relative; | |||
} | |||
.headWidget { | |||
position: absolute; | |||
/* background: #00ee33; */ | |||
top: 20px; | |||
right: 24px; | |||
height: 32px; | |||
width: 190px; | |||
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; | |||
} |
@@ -1,7 +1,7 @@ | |||
import cls from './index.module.css'; | |||
import BottomBarItem from '../BottomBarItem'; | |||
function GasI(props) { | |||
function GasII(props) { | |||
return ( | |||
<BottomBarItem icon="pause" title="天然气流量" className={cls.gas}> | |||
天然气流量 - linechart - 当前流量 - 2 legends - 2 lines | |||
@@ -9,4 +9,4 @@ function GasI(props) { | |||
); | |||
} | |||
export default GasI; | |||
export default GasII; |
@@ -6,19 +6,31 @@ import Chart2 from './Chart2'; | |||
import Chart3 from './Chart3'; | |||
import Chart4 from './Chart4'; | |||
import GasI from './gasi'; | |||
import GasII from './gasii'; | |||
import FaultTotal from './FaultTotal'; | |||
import FaultType from './FaultType'; | |||
import './index.less'; | |||
import cls from './index.module.css'; | |||
export default function index() { | |||
return ( | |||
<> | |||
<div className="ButtonBorder"> | |||
<Chart1 /> | |||
<Chart2 /> | |||
<Chart3 /> | |||
<Chart4 /> | |||
{false && ( | |||
<div className="ButtonBorder"> | |||
<Chart1 /> | |||
<Chart2 /> | |||
<Chart3 /> | |||
<Chart4 /> | |||
</div> | |||
)} | |||
<div className={`${cls.bottomBar} flex justify-between`}> | |||
<FaultTotal /> | |||
<FaultType /> | |||
<GasI /> | |||
<GasII /> | |||
</div> | |||
<div className={cls.bottomBar}></div> | |||
</> | |||
); | |||
} |
@@ -1,3 +1,6 @@ | |||
.bottomBar { | |||
background-color: #0004; | |||
} | |||
/* background-color: #3894; */ | |||
width: 100%; | |||
height: 100%; | |||
overflow: visible; | |||
} |
@@ -6,6 +6,9 @@ import IconStack from '../assets/Icon/icon-stack.png'; | |||
import IconGood from '../assets/Icon/icon-good.png'; | |||
import IconCharger from '../assets/Icon/icon-charge.png'; | |||
import IconSmoke from '../assets/Icon/icon-taiji.png'; | |||
import IconChart from '../assets/Icon/icon-chart.png'; | |||
import IconPuzzle from '../assets/Icon/icon-puzzle.png'; | |||
import IconPause from '../assets/Icon/icon-pause.png'; | |||
const Container = (props) => { | |||
let icon = useRef(null); | |||
@@ -24,13 +27,13 @@ const Container = (props) => { | |||
icon.current = IconSmoke; | |||
break; | |||
case 'chart': | |||
icon.current = IconSmoke; | |||
icon.current = IconChart; | |||
break; | |||
case 'puzzle': | |||
icon.current = IconSmoke; | |||
icon.current = IconPuzzle; | |||
break; | |||
case 'pause': | |||
icon.current = IconSmoke; | |||
icon.current = IconPause; | |||
break; | |||
} | |||
@@ -4,13 +4,13 @@ | |||
} | |||
.radio-group__item:first-child { | |||
border-top-left-radius: 4px !important; | |||
border-bottom-left-radius: 4px !important; | |||
border-top-left-radius: 4px !important; | |||
border-bottom-left-radius: 4px !important; | |||
} | |||
.radio-group__item:last-child { | |||
border-top-right-radius: 4px !important; | |||
border-bottom-right-radius: 4px !important; | |||
border-top-right-radius: 4px !important; | |||
border-bottom-right-radius: 4px !important; | |||
} | |||
.radio-group__item.ant-radio-button-wrapper-checked { | |||
@@ -18,11 +18,29 @@ | |||
} | |||
.ant-switch-checked { | |||
background: #b4fffdb1 !important; | |||
background: #b4fffdb1 !important; | |||
} | |||
.ant-switch-checked:focus{ | |||
box-shadow: none !important; | |||
.ant-switch-checked:focus { | |||
box-shadow: none !important; | |||
} | |||
.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; | |||
} */ |
@@ -175,7 +175,7 @@ const SmokeTrendChart = (props) => { | |||
</Radio.Button> | |||
</Radio.Group> | |||
</div> | |||
<ReactECharts option={options} style={{ height: '270px' }} /> | |||
<ReactECharts option={options} style={{ height: '240px' }} /> | |||
</div> | |||
); | |||
}; | |||
@@ -14,10 +14,10 @@ | |||
color: hsl(0, 0%, 100%, 0.9); | |||
box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15); | |||
// width: 288px; | |||
height: 43px; | |||
height: 56px; | |||
font-size: 20px; | |||
letter-spacing: 1.43px; | |||
line-height: 40px; | |||
line-height: 56px; | |||
text-align: center; | |||
user-select: none; | |||
} | |||
@@ -26,6 +26,10 @@ | |||
justify-content: center; | |||
} | |||
.justify-around { | |||
justify-content: space-around; | |||
} | |||
.items-center { | |||
align-items: center; | |||
} | |||
@@ -49,3 +53,11 @@ | |||
.h-auto { | |||
height: auto; | |||
} | |||
.relative { | |||
position: relative; | |||
} | |||
.absolute { | |||
position: absolute; | |||
} |
@@ -12,9 +12,7 @@ | |||
flex-direction: row; | |||
.Center { | |||
margin-top: 21px; | |||
margin-left: 24px; | |||
padding: 1px; | |||
margin: 22px; | |||
width: 2472px; | |||
height: 940px; | |||
@@ -28,8 +26,9 @@ | |||
.V3DBG { | |||
position: absolute; | |||
width: 2472px; | |||
height: 642px; | |||
height: 640px; | |||
z-index: 1; | |||
box-shadow: inset 0 0 128px 64px #0a2859; | |||
} | |||
.V3DBorder { | |||