From 75a41a57136e4d6c3fe36aea3fe2569f24714f4c Mon Sep 17 00:00:00 2001 From: lb Date: Sat, 1 Jul 2023 09:51:17 +0800 Subject: [PATCH] update Kiln --- .prettierrc | 7 +- src/components/LeftBar/Kiln.jsx | 114 +++++++++---------- src/components/LeftBar/kiln.module.less | 140 +++++++++++++----------- 3 files changed, 134 insertions(+), 127 deletions(-) diff --git a/.prettierrc b/.prettierrc index 94beb14..30d5f18 100644 --- a/.prettierrc +++ b/.prettierrc @@ -2,10 +2,13 @@ "singleQuote": true, "trailingComma": "all", "printWidth": 80, + "useTabs": true, "overrides": [ { "files": ".prettierrc", - "options": { "parser": "json" } + "options": { + "parser": "json" + } } ] -} +} \ No newline at end of file diff --git a/src/components/LeftBar/Kiln.jsx b/src/components/LeftBar/Kiln.jsx index e9d3e35..fc0e9c6 100644 --- a/src/components/LeftBar/Kiln.jsx +++ b/src/components/LeftBar/Kiln.jsx @@ -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 ( + +
+ {infos.map((item) => ( +
+ {item.label}: {item.value} +
+ ))} +
- - - const [num, setNum] = useState(1) - - return ( - -
- { - infos.map(item => -
{item.label}: {item.value}
- ) - } -
- - - {/*
+ {/*
*/} - {/* */} - {/*

水泵水管

+ {/* */} + {/*

水泵水管

@@ -81,7 +76,6 @@ export default function Kiln() {
*/} - - - ) + + ); } diff --git a/src/components/LeftBar/kiln.module.less b/src/components/LeftBar/kiln.module.less index 3cf56a3..2e8a6ed 100644 --- a/src/components/LeftBar/kiln.module.less +++ b/src/components/LeftBar/kiln.module.less @@ -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; + // } + // } + // } + // } }