mt-fe-group/xuchang-screen
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update good rate part

Browse Source
This commit is contained in:
lb
2023-07-01 10:59:38 +08:00
parent 75a41a5713
commit 45c3edcd48
12 changed files with 114 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/Icon/icon-good.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 745 B

46
src/components/Container.jsx
View File

@@ -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;

19
src/components/LeftBar/GoodProduction.jsx
View File

@@ -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 = () => {
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;

2
src/components/LeftBar/Kiln.jsx
View File

@@ -52,7 +52,7 @@ export default function Kiln() {
<Container title="窑炉信息" icon="kiln" className={cls.leftBar__top}>
<div className={cls.leftBar__top__content}>
{infos.map((item) => (
<div className={cls.info__item}>
<div key={item.label} className={cls.info__item}>
{item.label}: {item.value}
</div>
))}

9
src/components/LeftBar/good.module.less
View File

@@ -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;
}

7
src/components/LeftBar/substitutionCharts/GoodRateChart/index.jsx Normal file
View File

@@ -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
src/components/LeftBar/substitutionCharts/GoodRateChart/index.module.less Normal file
View File

7
src/components/LeftBar/substitutionCharts/TechSplitline/index.jsx Normal file
View File

@@ -0,0 +1,7 @@
import cls from './index.module.less';
const TechSplitline = (props) => {
return <div className={cls.techSplitline}></div>;
};
export default TechSplitline;

5
src/components/LeftBar/substitutionCharts/TechSplitline/index.module.less Normal file
View File

@@ -0,0 +1,5 @@
.techSplitline {
height: 2px;
width: 100%;
background: radial-gradient(#3ce7ff, #3ce8ff92, #3ce8ff32, transparent);
}

7
src/components/LeftBar/substitutionCharts/TodayTableData/index.jsx Normal file
View File

@@ -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;

0
src/components/LeftBar/substitutionCharts/TodayTableData/index.module.less Normal file
View File

63
src/components/container.module.less
View File

@@ -1,49 +1,56 @@
.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 {
background: url('');
background: url('');
}
.bgGood {
background: url('../assets/good.png');
background: url('../assets/good.png');
}
.bgFaultTotal {
background: url('');
background: url('');
}
.bgFaultType {
background: url('');
background: url('');
}
.bgGas {
background: url('');
background: url('');
}
.bgWind {
background: url('');
background: url('');
}
.bgEnergy {
background: url('../assets/energy.png');
background: url('../assets/energy.png');
}
.bgSmoke {
background: url('../assets/smoke.png');
background: url('../assets/smoke.png');
}