From 533a59ddac74068d52ed4e7c836d1b969178a291 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Fri, 30 Jun 2023 16:29:27 +0800
Subject: [PATCH] update

---
 .../{ButtonChart2Icon1.png => icon-ab.png}    | Bin
 .../{rightChart1ICon.png => icon-bar.png}     | Bin
 .../{rightChart3ICon.png => icon-charge.png}  | Bin
 .../{rightChart2ICon.png => icon-chart.png}   | Bin
 .../{ButtonChart1Icon1.png => icon-clock.png} | Bin
 .../{LeftChart2Icon2.png => icon-lighten.png} | Bin
 .../{ButtonChart4Icon1.png => icon-pause.png} | Bin
 ...{ButtonChart3Icon1.png => icon-qrcode.png} | Bin
 .../{LeftrChart1ICon.png => icon-stack.png}   | Bin
 .../{LeftChart2Icon.png => icon-taiji.png}    | Bin
 .../{ButtonChart1Icon2.png => icon-temp.png}  | Bin
 src/components/BottomBar/Chart1.jsx           |   8 +++----
 src/components/BottomBar/Chart2.jsx           |   6 ++---
 src/components/BottomBar/Chart3.jsx           |   8 +++----
 src/components/BottomBar/Chart4.jsx           |   8 +++----
 src/components/Container.jsx                  |  22 +++++++++++++-----
 src/components/LeftBar/Kiln.jsx               |  15 ++++--------
 src/components/RightBar/Chart1.jsx            |   4 ++--
 src/components/RightBar/Chart2.jsx            |   4 ++--
 src/components/RightBar/Chart3.jsx            |   4 ++--
 src/components/container.module.less          |  19 ++++++++++++++-
 21 files changed, 60 insertions(+), 38 deletions(-)
 rename src/assets/Icon/{ButtonChart2Icon1.png => icon-ab.png} (100%)
 rename src/assets/Icon/{rightChart1ICon.png => icon-bar.png} (100%)
 rename src/assets/Icon/{rightChart3ICon.png => icon-charge.png} (100%)
 rename src/assets/Icon/{rightChart2ICon.png => icon-chart.png} (100%)
 rename src/assets/Icon/{ButtonChart1Icon1.png => icon-clock.png} (100%)
 rename src/assets/Icon/{LeftChart2Icon2.png => icon-lighten.png} (100%)
 rename src/assets/Icon/{ButtonChart4Icon1.png => icon-pause.png} (100%)
 rename src/assets/Icon/{ButtonChart3Icon1.png => icon-qrcode.png} (100%)
 rename src/assets/Icon/{LeftrChart1ICon.png => icon-stack.png} (100%)
 rename src/assets/Icon/{LeftChart2Icon.png => icon-taiji.png} (100%)
 rename src/assets/Icon/{ButtonChart1Icon2.png => icon-temp.png} (100%)

diff --git a/src/assets/Icon/ButtonChart2Icon1.png b/src/assets/Icon/icon-ab.png
similarity index 100%
rename from src/assets/Icon/ButtonChart2Icon1.png
rename to src/assets/Icon/icon-ab.png
diff --git a/src/assets/Icon/rightChart1ICon.png b/src/assets/Icon/icon-bar.png
similarity index 100%
rename from src/assets/Icon/rightChart1ICon.png
rename to src/assets/Icon/icon-bar.png
diff --git a/src/assets/Icon/rightChart3ICon.png b/src/assets/Icon/icon-charge.png
similarity index 100%
rename from src/assets/Icon/rightChart3ICon.png
rename to src/assets/Icon/icon-charge.png
diff --git a/src/assets/Icon/rightChart2ICon.png b/src/assets/Icon/icon-chart.png
similarity index 100%
rename from src/assets/Icon/rightChart2ICon.png
rename to src/assets/Icon/icon-chart.png
diff --git a/src/assets/Icon/ButtonChart1Icon1.png b/src/assets/Icon/icon-clock.png
similarity index 100%
rename from src/assets/Icon/ButtonChart1Icon1.png
rename to src/assets/Icon/icon-clock.png
diff --git a/src/assets/Icon/LeftChart2Icon2.png b/src/assets/Icon/icon-lighten.png
similarity index 100%
rename from src/assets/Icon/LeftChart2Icon2.png
rename to src/assets/Icon/icon-lighten.png
diff --git a/src/assets/Icon/ButtonChart4Icon1.png b/src/assets/Icon/icon-pause.png
similarity index 100%
rename from src/assets/Icon/ButtonChart4Icon1.png
rename to src/assets/Icon/icon-pause.png
diff --git a/src/assets/Icon/ButtonChart3Icon1.png b/src/assets/Icon/icon-qrcode.png
similarity index 100%
rename from src/assets/Icon/ButtonChart3Icon1.png
rename to src/assets/Icon/icon-qrcode.png
diff --git a/src/assets/Icon/LeftrChart1ICon.png b/src/assets/Icon/icon-stack.png
similarity index 100%
rename from src/assets/Icon/LeftrChart1ICon.png
rename to src/assets/Icon/icon-stack.png
diff --git a/src/assets/Icon/LeftChart2Icon.png b/src/assets/Icon/icon-taiji.png
similarity index 100%
rename from src/assets/Icon/LeftChart2Icon.png
rename to src/assets/Icon/icon-taiji.png
diff --git a/src/assets/Icon/ButtonChart1Icon2.png b/src/assets/Icon/icon-temp.png
similarity index 100%
rename from src/assets/Icon/ButtonChart1Icon2.png
rename to src/assets/Icon/icon-temp.png
diff --git a/src/components/BottomBar/Chart1.jsx b/src/components/BottomBar/Chart1.jsx
index 3e3aee3..6156e72 100644
--- a/src/components/BottomBar/Chart1.jsx
+++ b/src/components/BottomBar/Chart1.jsx
@@ -7,8 +7,8 @@ import Item from './substitutionCharts/Chart1.jsx';
 //窑炉温度变化
 import Item2 from './substitutionCharts/Chart4.jsx';
 
-import ICon1 from '../../assets/Icon/ButtonChart1Icon1.png';
-import ICon2 from '../../assets/Icon/ButtonChart1Icon2.png';
+// import ICon1 from '../../assets/Icon/ButtonChart1Icon1.png';
+// import ICon2 from '../../assets/Icon/ButtonChart1Icon2.png';
 
 import './Chart1.less';
 
@@ -110,11 +110,11 @@ export default function Chart1() {
     return (
         <div className="ButtonChart1AllBorder">
             <div className="ButtonChart1ItemitemBorder">
-                <img
+                {/* <img
                     src={index == 1 ? ICon1 : ICon2}
                     alt="图片读取失败"
                     className="ButtonChart1ItemIcon"
-                />
+                /> */}
                 <div className="ButtonChart1ItemTitle">
                     {index == 1 ? '小时蒸汽产生量' : '窑炉温度变化'}
                 </div>
diff --git a/src/components/BottomBar/Chart2.jsx b/src/components/BottomBar/Chart2.jsx
index adcc48f..e51b110 100644
--- a/src/components/BottomBar/Chart2.jsx
+++ b/src/components/BottomBar/Chart2.jsx
@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react'
 
 import Item2 from './substitutionCharts/Chart2.jsx'
-import Icon from '../../assets/Icon/ButtonChart2Icon1.png'
-import GapLine from '../../assets/buttonChart2GapLine.png'
+// import Icon from '../../assets/Icon/ButtonChart2Icon1.png'
+// import GapLine from '../../assets/buttonChart2GapLine.png'
 import './Chart2.less'
 
 
@@ -10,7 +10,7 @@ export default function Chart2() {
     return (
         <div className='ButtonChart2AllBorder'>
             <div className='ButtonChart2ItemitemBorder'>
-                <img src={Icon} alt="图片加载错误" className='ButtonChart2ItemIcon' />
+                {/* <img src={Icon} alt="图片加载错误" className='ButtonChart2ItemIcon' /> */}
                 <div className='ButtonChart2ItemTitle' >AB线成品量</div>
             </div>
             <div className='ButtonChart2ItemBorder' >
diff --git a/src/components/BottomBar/Chart3.jsx b/src/components/BottomBar/Chart3.jsx
index 82461b3..3367f32 100644
--- a/src/components/BottomBar/Chart3.jsx
+++ b/src/components/BottomBar/Chart3.jsx
@@ -4,8 +4,8 @@ import React from 'react'
 import Item from './Form/Form.jsx'
 import Item1 from './Form/Form1.jsx'
 
-import Icon1 from '../../assets/Icon/ButtonChart3Icon1.png'
-import Icon2 from '../../assets/Icon/ButtonChart1Icon1.png'
+// import Icon1 from '../../assets/Icon/ButtonChart3Icon1.png'
+// import Icon2 from '../../assets/Icon/ButtonChart1Icon1.png'
 
 import './Chart3.less'
 
@@ -14,7 +14,7 @@ export default function Chart3() {
         <div className='ButtonChart3AllBorder'>
             <div className='ButtonChart3ItemBorder'>
                 <div className='ButtonChart3ItemitemBorder'>
-                    <img src={Icon1} alt="图片加载错误" className='ButtonChart3ItemIcon' />
+                    {/* <img src={Icon1} alt="图片加载错误" className='ButtonChart3ItemIcon' /> */}
                     <div className='ButtonChart3ItemTitle'>退火风机状况</div>
                 </div>
                 <div className='ButtonChart3ItemDetail'>
@@ -24,7 +24,7 @@ export default function Chart3() {
             <div className='ButtonChart3ItemGap'></div>
             <div className='ButtonChart3ItemBorder'>
                 <div className='ButtonChart3ItemitemBorder'>
-                    <img src={Icon2} alt="图片加载错误" className='ButtonChart3ItemIcon' />
+                    {/* <img src={Icon2} alt="图片加载错误" className='ButtonChart3ItemIcon' /> */}
                     <div className='ButtonChart3ItemTitle'>空压机运行时间</div>
                 </div>
                 <div className='ButtonChart3ItemDetail'>
diff --git a/src/components/BottomBar/Chart4.jsx b/src/components/BottomBar/Chart4.jsx
index cd6b335..bcb2aef 100644
--- a/src/components/BottomBar/Chart4.jsx
+++ b/src/components/BottomBar/Chart4.jsx
@@ -7,8 +7,8 @@ import Chart1 from './substitutionCharts/Chart3.jsx';
 //空压机运行时间
 import Chart2 from './substitutionCharts/Chart4.jsx';
 
-import Icon1 from '../../assets/Icon/ButtonChart4Icon1.png';
-import Icon2 from '../../assets/Icon/ButtonChart1Icon2.png';
+// import Icon1 from '../../assets/Icon/ButtonChart4Icon1.png';
+// import Icon2 from '../../assets/Icon/ButtonChart1Icon2.png';
 
 import './Chart4.less';
 
@@ -45,11 +45,11 @@ export default function Chart4() {
   return (
     <div className="ButtonChart4AllBorder">
       <div className="ButtonChart4ItemitemBorder">
-        <img
+        {/* <img
           src={index == 1 ? Icon1 : Icon2}
           alt="图片加载错误"
           className="ButtonChart4ItemIcon"
-        />
+        /> */}
         <div className="ButtonChart4ItemTitle">
           {index == 1 ? '火炉实时流量' : '火炉实时温度'}
         </div>
diff --git a/src/components/Container.jsx b/src/components/Container.jsx
index 3e23961..0426cdf 100644
--- a/src/components/Container.jsx
+++ b/src/components/Container.jsx
@@ -1,13 +1,23 @@
-import cls from 'container.module.less'
+import cls from './container.module.less'
 
-export default Container = props => {
-  return <div className={cls.container}>
+import IconStack from '../assets/Icon/icon-stack.png'
+
+const Container = props => {
+  let icon = null
+  switch (props.icon){
+    case 'kiln':
+      icon = IconStack
+  }
+
+  return <div className={`${cls.container} ${props.className}`}>
     <div className={cls.container__head}>
-      <img src="#" alt="#" />
+      <img src={icon} alt="#" />
       <h2>{props.title}</h2>
     </div>
     <div className={cls.container__content}>
       {props.children}
     </div>
-  </div>
-}
\ No newline at end of file
+  </ div>
+}
+
+export default Container
\ No newline at end of file
diff --git a/src/components/LeftBar/Kiln.jsx b/src/components/LeftBar/Kiln.jsx
index 78e70cd..2e0dbca 100644
--- a/src/components/LeftBar/Kiln.jsx
+++ b/src/components/LeftBar/Kiln.jsx
@@ -2,10 +2,10 @@ 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 Icon from '../../assets/Icon/LeftrChart1ICon.png'
+// import Icon from '../../assets/Icon/LeftrChart1ICon.png'
 import Icon1 from '../../assets/ButtonChart7Icon1.svg'
 import Icon2 from '../../assets/ButtonChart7Icon2.svg'
 
@@ -42,15 +42,11 @@ export default function Kiln() {
     const [num, setNum] = useState(1)
 
     return (
-        <div className={cls.leftBar__top}>
-            <div className='LeftChart1ItemitemBorder'>
-                <img src={Icon} alt="图片加载错误" className='LeftChart1ItemIcon' />
-                <div className='title'>窑炉信息</div>
-            </div>
+        <Container title='窑炉信息' icon='kiln' className={cls.leftBar__top}>
             <div className='LeftChart1ItemBorder'>
                 <div className='LeftChart1ItemRow'>
                     <div className='LeftChart1ItemRowDetail'>
-                        <img src={Icon1} alt="" />
+                        {/* <img src={Icon1} alt="" /> */}
                         <h2 className='LeftChart1ItemRowDetailTxt'>水泵水管</h2>
                     </div>
                     <Item data={num == 1 ? Data1 : Data2} />
@@ -65,8 +61,7 @@ export default function Kiln() {
                 </div>
                 <div className='LeftChart1ItemRow'></div>
             </div>
-            
-        </div>
+        </Container>
 
     )
 }
diff --git a/src/components/RightBar/Chart1.jsx b/src/components/RightBar/Chart1.jsx
index 6cbd19a..14236d0 100644
--- a/src/components/RightBar/Chart1.jsx
+++ b/src/components/RightBar/Chart1.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 
 import Item from './substitutionCharts/Chart1/index.jsx'
-import Icon1 from '../../assets/Icon/rightChart1ICon.png'
+// import Icon1 from '../../assets/Icon/rightChart1ICon.png'
 
 import "./Chart1.less"
 
@@ -10,7 +10,7 @@ export default function Chart1() {
         <div className='rightChart1Border'>
 
             <div className='RightChart1ItemitemBorder'>
-                <img src={Icon1} alt="图片加载错误" className='RightChart1ItemIcon' />
+                {/* <img src={Icon1} alt="图片加载错误" className='RightChart1ItemIcon' /> */}
                 <div className='RightChart1Title'>储能电站</div>
             </div>
             <div className='RightChart1ItemBorder'>
diff --git a/src/components/RightBar/Chart2.jsx b/src/components/RightBar/Chart2.jsx
index 8459517..5e70fff 100644
--- a/src/components/RightBar/Chart2.jsx
+++ b/src/components/RightBar/Chart2.jsx
@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react'
 import styled from 'styled-components'
 import { motion } from 'framer-motion'
 
-import Icon from '../../assets/Icon/rightChart2ICon.png'
+// import Icon from '../../assets/Icon/rightChart2ICon.png'
 
 import Item from './substitutionCharts/Chart2.jsx'
 
@@ -77,7 +77,7 @@ export default function Chart2() {
     return (
         <div className='rightchart2AllBorder'>
             <div className='rightchart2ItemitemBorder'>
-                <img src={Icon} alt="图片加载错误" className='rightchart2ItemIcon' />
+                {/* <img src={Icon} alt="图片加载错误" className='rightchart2ItemIcon' /> */}
                 <div className='rightchart2ItemTitle'>光伏发电统计</div>
             </div>
             < div className='rightchart2Switchbox'>
diff --git a/src/components/RightBar/Chart3.jsx b/src/components/RightBar/Chart3.jsx
index 32a5eda..6382beb 100644
--- a/src/components/RightBar/Chart3.jsx
+++ b/src/components/RightBar/Chart3.jsx
@@ -4,7 +4,7 @@ import styled from 'styled-components'
 
 
 import Item from './substitutionCharts/Chart3.jsx'
-import Icon from '../../assets/Icon/rightChart3ICon.png'
+// import Icon from '../../assets/Icon/rightChart3ICon.png'
 import './Chart3.less'
 
 const Dayxdata = ["7:00", "8:00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00"]
@@ -76,7 +76,7 @@ export default function Chart3() {
         <div className='RightChart3AllBorder'>
 
             <div className='RightChart3ItemitemBorder'>
-                <img src={Icon} alt="图片加载错误" className='RightChart3ItemIcon' />
+                {/* <img src={Icon} alt="图片加载错误" className='RightChart3ItemIcon' /> */}
                 <div className='RightChart3ItemTitle'>储能电站</div>
             </div>
             < div className='rightchart3Switchbox'>
diff --git a/src/components/container.module.less b/src/components/container.module.less
index 604581b..917d028 100644
--- a/src/components/container.module.less
+++ b/src/components/container.module.less
@@ -4,6 +4,23 @@
   flex-direction: column;
   background-size: 100% 100%;
   background-repeat: no-repeat;
+
+  .container__head {
+    display: flex;
+    align-items: center;
+
+    h2 {
+      font-family: "微软雅黑", "Microsoft YaHei UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
+        "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC",
+        "WenQuanYi Micro Hei", sans-serif;
+      margin: 0;
+      margin-left: 6px;
+      font-size: 18px;
+      color: #fff;
+      letter-spacing: 2px;
+      font-weight: 500;
+    }
+  }
 }
 
 .bgKiln {
@@ -29,4 +46,4 @@
 }
 .bgSmoke {
   background: url('../assets/smoke.png');
-}
\ No newline at end of file
+}