update

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 ICon1 from '../../assets/Icon/ButtonChart1Icon1.png';
-import ICon2 from '../../assets/Icon/ButtonChart1Icon2.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>

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 Icon from '../../assets/Icon/ButtonChart2Icon1.png'
-import GapLine from '../../assets/buttonChart2GapLine.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' >

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 Icon1 from '../../assets/Icon/ButtonChart3Icon1.png'
-import Icon2 from '../../assets/Icon/ButtonChart1Icon1.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'>

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 Icon1 from '../../assets/Icon/ButtonChart4Icon1.png';
-import Icon2 from '../../assets/Icon/ButtonChart1Icon2.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>

src/components/Container.jsx

@@ -1,13 +1,23 @@
-import cls from 'container.module.less'
+import cls from './container.module.less'
 
-export default Container = props => {
+import IconStack from '../assets/Icon/icon-stack.png'
-  return <div className={cls.container}>
+
+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>
+  </ div>
-}
+}
+
+export default Container

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}>
+        <Container title='窑炉信息' icon='kiln' className={cls.leftBar__top}>
-            <div className='LeftChart1ItemitemBorder'>
-                <img src={Icon} alt="图片加载错误" className='LeftChart1ItemIcon' />
-                <div className='title'>窑炉信息</div>
-            </div>
             <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>
-            
+        </Container>
-        </div>
 
     )
 }

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'>

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'>

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'>

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');
-}
+}