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

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

@ -1,73 +1,83 @@
.leftBar__top {
width: 625px;
height: 305px;
background: url('../../assets/ItemBg.png'), #938f0034;
// height: 305px;
height: 300px;
background: url('../../assets/ItemBg.png') 100% 100% no-repeat;
.leftBar__top__content {
flex: 1;
height: 1px;
background: #9039;
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding-top: 18px;
.info__item {
background: red;
}
}
.LeftChart1ItemitemBorder {
margin-top: 24px;
margin-left: 24px;
width: 202px;
height: 24px;
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';
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;
font-size: 20px;
letter-spacing: 1.43px;
line-height: 40px;
text-align: center;
user-select: none;
}
}
.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;
}
}
}
}
// .LeftChart1ItemitemBorder {
// margin-top: 24px;
// margin-left: 24px;
// width: 202px;
// height: 24px;
// 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 {
// 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;
// }
// }
// }
// }
}