update Kiln
This commit is contained in:
parent
f116f7bc95
commit
75a41a5713
@ -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"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@ -1,73 +1,68 @@
|
|||||||
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([
|
||||||
|
{ 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([
|
// useEffect(() => {
|
||||||
{ label: '窑炉压力', value: '29Pa' },
|
// setInterval(() => {
|
||||||
{ label: '循环水温度', value: '59℃' },
|
// Number = Number + 1
|
||||||
{ label: '压力流量', value: '29Pa' },
|
// setNum(Number % 2)
|
||||||
{ label: '混合料温度', value: '49℃' },
|
// if (Number == 3) {
|
||||||
{ label: '窑温', value: '59℃' },
|
// Number = 1
|
||||||
{ label: '压缩器压力', value: '293Pa' },
|
// }
|
||||||
{ label: '水分', value: '12%' },
|
// }, 10000)
|
||||||
{ label: '助燃风', value: '122' },
|
// }, [])
|
||||||
])
|
// const [num, setNum] = useState(1)
|
||||||
|
|
||||||
useEffect(() => {
|
return (
|
||||||
setInterval(() => {
|
<Container title="窑炉信息" icon="kiln" className={cls.leftBar__top}>
|
||||||
Number = Number + 1
|
<div className={cls.leftBar__top__content}>
|
||||||
setNum(Number % 2)
|
{infos.map((item) => (
|
||||||
if (Number == 3) {
|
<div className={cls.info__item}>
|
||||||
Number = 1
|
{item.label}: {item.value}
|
||||||
}
|
</div>
|
||||||
}, 10000)
|
))}
|
||||||
}, [])
|
</div>
|
||||||
|
|
||||||
|
{/* <div className='LeftChart1ItemBorder'>
|
||||||
|
|
||||||
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='LeftChart1ItemRow'>
|
<div className='LeftChart1ItemRow'>
|
||||||
<div className='LeftChart1ItemRowDetail'> */}
|
<div className='LeftChart1ItemRowDetail'> */}
|
||||||
{/* <img src={Icon1} alt="" /> */}
|
{/* <img src={Icon1} alt="" /> */}
|
||||||
{/* <h2 className='LeftChart1ItemRowDetailTxt'>水泵水管</h2>
|
{/* <h2 className='LeftChart1ItemRowDetailTxt'>水泵水管</h2>
|
||||||
</div>
|
</div>
|
||||||
<Item data={num == 1 ? Data1 : Data2} />
|
<Item data={num == 1 ? Data1 : Data2} />
|
||||||
</div>
|
</div>
|
||||||
@ -81,7 +76,6 @@ export default function Kiln() {
|
|||||||
</div>
|
</div>
|
||||||
<div className='LeftChart1ItemRow'></div>
|
<div className='LeftChart1ItemRow'></div>
|
||||||
</div> */}
|
</div> */}
|
||||||
</Container>
|
</Container>
|
||||||
|
);
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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;
|
||||||
|
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 {
|
// .LeftChart1ItemIcon {
|
||||||
margin-top: 24px;
|
// width: 24px;
|
||||||
margin-left: 24px;
|
// height: 24px;
|
||||||
width: 202px;
|
// margin-top: 2px;
|
||||||
height: 24px;
|
// }
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: flex-start;
|
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
.LeftChart1ItemIcon {
|
// .LeftChart1ItemTitle {
|
||||||
width: 24px;
|
// font-size: 24px;
|
||||||
height: 24px;
|
// color: #ffffff;
|
||||||
margin-top: 2px;
|
// font-weight: 900px;
|
||||||
}
|
// margin-left: 8px;
|
||||||
|
// margin-top: -5px;
|
||||||
|
// font-family: 'pingFangSC-Medium';
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
.LeftChart1ItemTitle {
|
// .LeftChart1ItemBorder {
|
||||||
font-size: 24px;
|
// width: 95%;
|
||||||
color: #ffffff;
|
// height: 227px;
|
||||||
font-weight: 900px;
|
// margin-left: 16px;
|
||||||
margin-left: 8px;
|
// margin-bottom: 16px;
|
||||||
margin-top: -5px;
|
// display: flex;
|
||||||
font-family: 'pingFangSC-Medium';
|
// flex-direction: row;
|
||||||
}
|
// justify-content: space-between;
|
||||||
}
|
// .LeftChart1ItemRow {
|
||||||
|
// width: 288px;
|
||||||
.LeftChart1ItemBorder {
|
// height: 100%;
|
||||||
width: 95%;
|
// display: flex;
|
||||||
height: 227px;
|
// flex-direction: column;
|
||||||
margin-left: 16px;
|
// justify-content: flex-start;
|
||||||
margin-bottom: 16px;
|
// .LeftChart1ItemRowDetail {
|
||||||
display: flex;
|
// width: 100%;
|
||||||
flex-direction: row;
|
// height: 32px;
|
||||||
justify-content: space-between;
|
// display: flex;
|
||||||
.LeftChart1ItemRow {
|
// flex-direction: row;
|
||||||
width: 288px;
|
// .LeftChart1ItemRowDetailTxt {
|
||||||
height: 100%;
|
// font-size: 22px;
|
||||||
display: flex;
|
// font-weight: 400px;
|
||||||
flex-direction: column;
|
// color: #ffffff;
|
||||||
justify-content: flex-start;
|
// margin-left: 8px;
|
||||||
.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