add kiln

src/components/Container.jsx

@@ -0,0 +1,13 @@
+import cls from 'container.module.less'
+
+export default Container = props => {
+  return <div className={cls.container}>
+    <div className={cls.container__head}>
+      <img src="#" alt="#" />
+      <h2>{props.title}</h2>
+    </div>
+    <div className={cls.container__content}>
+      {props.children}
+    </div>
+  </div>
+}

src/components/LeftBar/GoodProduction.jsx

@@ -0,0 +1,6 @@
+
+const GoodProduction = () => {
+  return <div></div>
+}
+
+export default GoodProduction;

src/components/LeftBar/Kiln.jsx

@@ -9,7 +9,7 @@ import Icon from '../../assets/Icon/LeftrChart1ICon.png'
 import Icon1 from '../../assets/ButtonChart7Icon1.svg'
 import Icon2 from '../../assets/ButtonChart7Icon2.svg'
 
-import './Chart1.less'
+import cls from './kiln.module.less'
 
 var Data1 = {
     '冷水管温度': '3℃',
@@ -25,7 +25,7 @@ var Data2 = {
 //循环的参数
 var Number = 1
 
-export default function Chart1() {
+export default function Kiln() {
 
     useEffect(() => {
         setInterval(() => {
@@ -42,10 +42,10 @@ export default function Chart1() {
     const [num, setNum] = useState(1)
 
     return (
-        <div className='LeftChart1AllBorder'>
+        <div className={cls.leftBar__top}>
             <div className='LeftChart1ItemitemBorder'>
                 <img src={Icon} alt="图片加载错误" className='LeftChart1ItemIcon' />
-                <div className='LeftChart1ItemTitle'>公共工程</div>
+                <div className='title'>窑炉信息</div>
             </div>
             <div className='LeftChart1ItemBorder'>
                 <div className='LeftChart1ItemRow'>

src/components/LeftBar/index.jsx

@@ -1,15 +1,17 @@
 import React from 'react'
 
 
-import Chart1 from './Chart1'
-import Chart2 from './Chart2'
+import Kiln from './Kiln'
+// import Chart2 from './Chart2'
+import GoodProduction from './GoodProduction'
+
+import cls from './index.module.less'
 
-import './index.less'
 export default function index() {
   return (
-    <div className='LeftBorder'>
-      <Chart1/>
-      <Chart2/>
+    <div className={cls.leftBar}>
+      <Kiln />
+      <GoodProduction />
     </div>
   )
 }

src/components/LeftBar/index.less

@@ -1,25 +0,0 @@
-.LeftBorder {
-  width: 625px;
-  height: 966px;
-  margin-left: 40px;
-
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-
-  .LeftChart1Border {
-    width: 100%;
-    height: 304px;
-    background: url('../../assets/ItemBg.png');
-   
-  }
-
-  .LeftChart2Border {
-    width: 624px;
-    height: 632px;
-    background: url('../../assets/ItemBg2.png');
-    display: flex;
-    flex-direction: column;
-    //justify-content: space-between;
-  }
-}

src/components/LeftBar/index.module.less

@@ -0,0 +1,25 @@
+.leftBar {
+  border: 2px solid red;
+  width: 625px;
+  height: 966px;
+  margin-left: 40px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  // .LeftChart1Border {
+  //   width: 100%;
+  //   height: 304px;
+  //   background: url('../../assets/ItemBg.png');
+  // }
+
+  // .LeftChart2Border {
+  //   width: 624px;
+  //   height: 632px;
+  //   background: url('../../assets/ItemBg2.png');
+  //   display: flex;
+  //   flex-direction: column;
+  //   //justify-content: space-between;
+  // }
+}

src/components/LeftBar/kiln.module.less

@@ -1,4 +1,4 @@
-.LeftChart1AllBorder {
+.leftBar__top {
   width: 625px;
   height: 305px;
   background: url('../../assets/ItemBg.png');
@@ -44,20 +44,20 @@
       width: 288px;
       height: 100%;
       display: flex;
-      flex-direction:column;
+      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;
+      .LeftChart1ItemRowDetail {
+        width: 100%;
+        height: 32px;
+        display: flex;
+        flex-direction: row;
+        .LeftChart1ItemRowDetailTxt {
+          font-size: 22px;
+          font-weight: 400px;
+          color: #ffffff;
+          margin-left: 8px;
+        }
       }
-     }
     }
   }
 }

src/components/container.module.less

@@ -0,0 +1,32 @@
+.container {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
+.bgKiln {
+  background: url('');
+}
+.bgGood {
+  background: url('../assets/good.png');
+}
+.bgFaultTotal {
+  background: url('');
+}
+.bgFaultType {
+  background: url('');
+}
+.bgGas {
+  background: url('');
+}
+.bgWind {
+  background: url('');
+}
+.bgEnergy {
+  background: url('../assets/energy.png');
+}
+.bgSmoke {
+  background: url('../assets/smoke.png');
+}