@@ -1,23 +1,31 @@ | |||||
import cls from './container.module.less' | |||||
import { useEffect, useRef } from 'react'; | |||||
import IconStack from '../assets/Icon/icon-stack.png' | |||||
import cls from './container.module.less'; | |||||
const Container = props => { | |||||
let icon = null | |||||
switch (props.icon){ | |||||
case 'kiln': | |||||
icon = IconStack | |||||
} | |||||
import IconStack from '../assets/Icon/icon-stack.png'; | |||||
import IconGood from '../assets/Icon/icon-good.png'; | |||||
return <div className={`${cls.container} ${props.className}`}> | |||||
<div className={cls.container__head}> | |||||
<img src={icon} alt="#" /> | |||||
<h2>{props.title}</h2> | |||||
</div> | |||||
<div className={cls.container__content}> | |||||
{props.children} | |||||
</div> | |||||
</ div> | |||||
} | |||||
const Container = (props) => { | |||||
let icon = useRef(null); | |||||
export default Container | |||||
switch (props.icon) { | |||||
case 'kiln': | |||||
icon.current = IconStack; | |||||
break; | |||||
case 'good': // 良品率 | |||||
icon.current = IconGood; | |||||
break; | |||||
} | |||||
return ( | |||||
<div className={`${cls.container} ${props.className}`}> | |||||
<div className={cls.container__head}> | |||||
<img src={icon.current} alt="#" /> | |||||
<h2>{props.title}</h2> | |||||
</div> | |||||
<div className={cls.container__content}>{props.children}</div> | |||||
</div> | |||||
); | |||||
}; | |||||
export default Container; |
@@ -1,6 +1,19 @@ | |||||
import cls from './good.module.less'; | |||||
import Container from '../Container'; | |||||
import TodayTableData from './substitutionCharts/TodayTableData'; | |||||
import GoodRateChart from './substitutionCharts/GoodRateChart'; | |||||
import TechSplitline from './substitutionCharts/TechSplitline'; | |||||
const GoodProduction = () => { | const GoodProduction = () => { | ||||
return <div></div> | |||||
} | |||||
return ( | |||||
<Container icon="good" title="本日生产良品率" className={cls.goodProd}> | |||||
<div className="goodProd__content"> | |||||
<TodayTableData /> | |||||
<TechSplitline /> | |||||
<GoodRateChart /> | |||||
</div> | |||||
</Container> | |||||
); | |||||
}; | |||||
export default GoodProduction; | |||||
export default GoodProduction; |
@@ -52,7 +52,7 @@ export default function Kiln() { | |||||
<Container title="窑炉信息" icon="kiln" className={cls.leftBar__top}> | <Container title="窑炉信息" icon="kiln" className={cls.leftBar__top}> | ||||
<div className={cls.leftBar__top__content}> | <div className={cls.leftBar__top__content}> | ||||
{infos.map((item) => ( | {infos.map((item) => ( | ||||
<div className={cls.info__item}> | |||||
<div key={item.label} className={cls.info__item}> | |||||
{item.label}: {item.value} | {item.label}: {item.value} | ||||
</div> | </div> | ||||
))} | ))} | ||||
@@ -0,0 +1,9 @@ | |||||
.goodProd { | |||||
background: url(../../assets/good.png) no-repeat, #9f84; | |||||
background-size: 100% 100%; | |||||
width: 625px; | |||||
// height: 626px; | |||||
flex: 1; | |||||
height: 1px; | |||||
margin-top: 24px; | |||||
} |
@@ -0,0 +1,7 @@ | |||||
import cls from './index.module.less'; | |||||
const GoodRateChart = (props) => { | |||||
return <div className={cls.GoodRateChart}>good rate chart</div>; | |||||
}; | |||||
export default GoodRateChart; |
@@ -0,0 +1,7 @@ | |||||
import cls from './index.module.less'; | |||||
const TechSplitline = (props) => { | |||||
return <div className={cls.techSplitline}></div>; | |||||
}; | |||||
export default TechSplitline; |
@@ -0,0 +1,5 @@ | |||||
.techSplitline { | |||||
height: 2px; | |||||
width: 100%; | |||||
background: radial-gradient(#3ce7ff, #3ce8ff92, #3ce8ff32, transparent); | |||||
} |
@@ -0,0 +1,7 @@ | |||||
import cls from './index.module.less'; | |||||
const TodayTableData = (props) => { | |||||
return <div className={cls.todayTableData}>today table data</div>; | |||||
}; | |||||
export default TodayTableData; |
@@ -1,49 +1,56 @@ | |||||
.container { | .container { | ||||
padding: 24px; | |||||
display: flex; | |||||
flex-direction: column; | |||||
background-size: 100% 100%; | |||||
background-repeat: no-repeat; | |||||
padding: 24px; | |||||
display: flex; | |||||
flex-direction: column; | |||||
background-size: 100% 100%; | |||||
background-repeat: no-repeat; | |||||
.container__head { | |||||
display: flex; | |||||
align-items: center; | |||||
.container__head { | |||||
display: flex; | |||||
align-items: center; | |||||
h2 { | |||||
font-family: "微软雅黑", "Microsoft YaHei UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", | |||||
"PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", | |||||
"WenQuanYi Micro Hei", sans-serif; | |||||
margin: 0; | |||||
margin-left: 6px; | |||||
font-size: 18px; | |||||
color: #fff; | |||||
letter-spacing: 2px; | |||||
font-weight: 500; | |||||
} | |||||
} | |||||
h2 { | |||||
font-family: '微软雅黑', 'Microsoft YaHei UI', -apple-system, | |||||
BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', | |||||
'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', | |||||
sans-serif; | |||||
margin: 0; | |||||
margin-left: 6px; | |||||
font-size: 18px; | |||||
color: #fff; | |||||
letter-spacing: 2px; | |||||
font-weight: 500; | |||||
} | |||||
} | |||||
.container__content { | |||||
height: 1px; | |||||
flex: 1; | |||||
background: #25a78672; | |||||
} | |||||
} | } | ||||
.bgKiln { | .bgKiln { | ||||
background: url(''); | |||||
background: url(''); | |||||
} | } | ||||
.bgGood { | .bgGood { | ||||
background: url('../assets/good.png'); | |||||
background: url('../assets/good.png'); | |||||
} | } | ||||
.bgFaultTotal { | .bgFaultTotal { | ||||
background: url(''); | |||||
background: url(''); | |||||
} | } | ||||
.bgFaultType { | .bgFaultType { | ||||
background: url(''); | |||||
background: url(''); | |||||
} | } | ||||
.bgGas { | .bgGas { | ||||
background: url(''); | |||||
background: url(''); | |||||
} | } | ||||
.bgWind { | .bgWind { | ||||
background: url(''); | |||||
background: url(''); | |||||
} | } | ||||
.bgEnergy { | .bgEnergy { | ||||
background: url('../assets/energy.png'); | |||||
background: url('../assets/energy.png'); | |||||
} | } | ||||
.bgSmoke { | .bgSmoke { | ||||
background: url('../assets/smoke.png'); | |||||
background: url('../assets/smoke.png'); | |||||
} | } |