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

update Kiln

Browse Source
This commit is contained in:
lb 2023-07-01 09:51:17 +08:00
parent f116f7bc95
commit 75a41a5713
3 changed files with 134 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.prettierrc
View File

@ -2,10 +2,13 @@
"singleQuote": true, "singleQuote": true,
"trailingComma": "all", "trailingComma": "all",
"printWidth": 80, "printWidth": 80,
"useTabs": true,
"overrides": [ "overrides": [
{ {
"files": ".prettierrc", "files": ".prettierrc",
"options": { "parser": "json" } "options": {
"parser": "json"
}
} }
] ]
} }

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

@ -1,67 +1,62 @@
import React from 'react' import React from 'react';
import { useState, useEffect } from 'react' import { useState, useEffect } from 'react';
import { motion } from 'framer-motion' // import { motion } from 'framer-motion';
import Container from '../Container' import Container from '../Container';
import Item from './substitutionCharts/Chart1.jsx' // import Item from './substitutionCharts/Chart1.jsx';
// import Icon from '../../assets/Icon/LeftrChart1ICon.png' // import Icon from '../../assets/Icon/LeftrChart1ICon.png'
import Icon1 from '../../assets/ButtonChart7Icon1.svg' // import Icon1 from '../../assets/ButtonChart7Icon1.svg';
import Icon2 from '../../assets/ButtonChart7Icon2.svg' // import Icon2 from '../../assets/ButtonChart7Icon2.svg';
import cls from './kiln.module.less' import cls from './kiln.module.less';
var Data1 = { // var Data1 = {
'冷水管温度': '3℃', // 冷水管温度: '3℃',
'主线冷水管水压': ' 500Pa', // 主线冷水管水压: ' 500Pa',
'冷管流量': '800m³' // 冷管流量: '800m³',
} // };
var Data2 = { // var Data2 = {
'冷水管温度': '8℃', // 冷水管温度: '8℃',
'主线冷水管水压': ' 900Pa', // 主线冷水管水压: ' 900Pa',
'冷管流量': '400m³' // 冷管流量: '400m³',
} // };
//循环的参数 // //循环的参数
var Number = 1 // var Number = 1;
export default function Kiln() { export default function Kiln() {
const [infos, setInfos] = useState([ const [infos, setInfos] = useState([
{ label: '窑炉压力', value: '29Pa' }, { label: '窑炉压力', value: '29KPa' },
{ label: '循环水温度', value: '59℃' }, { label: '循环水温度', value: '59℃' },
{ label: '压力流量', value: '29Pa' }, { label: '循环水流量', value: '59㎡/h' },
{ label: '混合料温度', value: '49℃' }, { label: '循环水压力', value: '34KPa' },
{ label: '窑温', value: '59℃' }, { label: '窑温', value: '59℃' },
{ label: '压缩器压力', value: '293Pa' }, { label: '压缩器压力', value: '293Pa' },
{ label: '水分', value: '12%' }, { label: '水分', value: '12%' },
{ label: '助燃风', value: '122' }, { label: '助燃风', value: '122' },
]) ]);
useEffect(() => { // useEffect(() => {
setInterval(() => { // setInterval(() => {
Number = Number + 1 // Number = Number + 1
setNum(Number % 2) // setNum(Number % 2)
if (Number == 3) { // if (Number == 3) {
Number = 1 // Number = 1
} // }
}, 10000) // }, 10000)
}, []) // }, [])
// const [num, setNum] = useState(1)
const [num, setNum] = useState(1)
return ( return (
<Container title='窑炉信息' icon='kiln' className={cls.leftBar__top}> <Container title="窑炉信息" icon="kiln" className={cls.leftBar__top}>
<div className="leftBar__top__content"> <div className={cls.leftBar__top__content}>
{ {infos.map((item) => (
infos.map(item => <div className={cls.info__item}>
<div className={cls.info__item}>{item.label}: {item.value}</div> {item.label}: {item.value}
) </div>
} ))}
</div> </div>
{/* <div className='LeftChart1ItemBorder'> {/* <div className='LeftChart1ItemBorder'>
<div className='LeftChart1ItemRow'> <div className='LeftChart1ItemRow'>
@ -82,6 +77,5 @@ export default function Kiln() {
<div className='LeftChart1ItemRow'></div> <div className='LeftChart1ItemRow'></div>
</div> */} </div> */}
</Container> </Container>
);
)
} }

132
src/components/LeftBar/kiln.module.less
View File

@ -1,73 +1,83 @@
.leftBar__top { .leftBar__top {
width: 625px; width: 625px;
height: 305px; // height: 305px;
background: url('../../assets/ItemBg.png'), #938f0034; height: 300px;
background: url('../../assets/ItemBg.png') 100% 100% no-repeat;
.leftBar__top__content { .leftBar__top__content {
flex: 1; flex: 1;
height: 1px; height: 1px;
background: #9039; display: grid;
display: flex; grid-template-columns: 1fr 1fr;
flex-wrap: wrap; gap: 10px;
padding-top: 18px;
.info__item { .info__item {
background: red; border-radius: 2px;
} color: hsl(0, 0%, 100%, 0.9);
box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
} // width: 288px;
height: 43px;
.LeftChart1ItemitemBorder { font-size: 20px;
margin-top: 24px; letter-spacing: 1.43px;
margin-left: 24px; line-height: 40px;
width: 202px; text-align: center;
height: 24px; user-select: none;
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 { // .LeftChart1ItemitemBorder {
width: 95%; // margin-top: 24px;
height: 227px; // margin-left: 24px;
margin-left: 16px; // width: 202px;
margin-bottom: 16px; // height: 24px;
display: flex; // display: flex;
flex-direction: row; // flex-direction: row;
justify-content: space-between; // justify-content: flex-start;
.LeftChart1ItemRow { // vertical-align: middle;
width: 288px;
height: 100%; // .LeftChart1ItemIcon {
display: flex; // width: 24px;
flex-direction: column; // height: 24px;
justify-content: flex-start; // margin-top: 2px;
.LeftChart1ItemRowDetail { // }
width: 100%;
height: 32px; // .LeftChart1ItemTitle {
display: flex; // font-size: 24px;
flex-direction: row; // color: #ffffff;
.LeftChart1ItemRowDetailTxt { // font-weight: 900px;
font-size: 22px; // margin-left: 8px;
font-weight: 400px; // margin-top: -5px;
color: #ffffff; // font-family: 'pingFangSC-Medium';
margin-left: 8px; // }
} // }
}
} // .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;
// }
// }
// }
// }
} }