update Kiln
This commit is contained in:
parent
f116f7bc95
commit
75a41a5713
@ -2,10 +2,13 @@
|
||||
"singleQuote": true,
|
||||
"trailingComma": "all",
|
||||
"printWidth": 80,
|
||||
"useTabs": true,
|
||||
"overrides": [
|
||||
{
|
||||
"files": ".prettierrc",
|
||||
"options": { "parser": "json" }
|
||||
"options": {
|
||||
"parser": "json"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -1,73 +1,68 @@
|
||||
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: '29KPa' },
|
||||
{ label: '循环水温度', value: '59℃' },
|
||||
{ label: '循环水流量', value: '59㎡/h' },
|
||||
{ label: '循环水压力', value: '34KPa' },
|
||||
{ label: '窑温', value: '59℃' },
|
||||
{ label: '压缩器压力', value: '293Pa' },
|
||||
{ label: '水分', value: '12%' },
|
||||
{ label: '助燃风', value: '122' },
|
||||
]);
|
||||
|
||||
const [infos, setInfos] = useState([
|
||||
{ label: '窑炉压力', value: '29Pa' },
|
||||
{ label: '循环水温度', value: '59℃' },
|
||||
{ label: '压力流量', value: '29Pa' },
|
||||
{ label: '混合料温度', value: '49℃' },
|
||||
{ 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)
|
||||
}, [])
|
||||
return (
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
||||
|
||||
{/* <div className='LeftChart1ItemBorder'>
|
||||
{/* <div className='LeftChart1ItemBorder'>
|
||||
<div className='LeftChart1ItemRow'>
|
||||
<div className='LeftChart1ItemRowDetail'> */}
|
||||
{/* <img src={Icon1} alt="" /> */}
|
||||
{/* <h2 className='LeftChart1ItemRowDetailTxt'>水泵水管</h2>
|
||||
{/* <img src={Icon1} alt="" /> */}
|
||||
{/* <h2 className='LeftChart1ItemRowDetailTxt'>水泵水管</h2>
|
||||
</div>
|
||||
<Item data={num == 1 ? Data1 : Data2} />
|
||||
</div>
|
||||
@ -81,7 +76,6 @@ export default function Kiln() {
|
||||
</div>
|
||||
<div className='LeftChart1ItemRow'></div>
|
||||
</div> */}
|
||||
</Container>
|
||||
|
||||
)
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,73 +1,83 @@
|
||||
.leftBar__top {
|
||||
width: 625px;
|
||||
height: 305px;
|
||||
background: url('../../assets/ItemBg.png'), #938f0034;
|
||||
width: 625px;
|
||||
// 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;
|
||||
.leftBar__top__content {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
padding-top: 18px;
|
||||
|
||||
.info__item {
|
||||
background: red;
|
||||
}
|
||||
.info__item {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
// .LeftChart1ItemitemBorder {
|
||||
// margin-top: 24px;
|
||||
// margin-left: 24px;
|
||||
// width: 202px;
|
||||
// height: 24px;
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// justify-content: flex-start;
|
||||
// vertical-align: middle;
|
||||
|
||||
.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;
|
||||
// }
|
||||
|
||||
.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';
|
||||
// }
|
||||
// }
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// .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;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user