init

src/components/CenterTopData/index.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import Item2 from './substitutionCharts/Chart1.jsx'
+import Item1 from './substitutionCharts/Chart2.jsx'
+
+import cls from './index.module.less'
+
+export default function index() {
+  return (
+    <div className='flex justify-between w-full h-full'>
+      <div className={cls.leftGrid}>
+        <Item1 />
+      </div>
+      <div className={cls.rightTable}>
+        <Item2 />
+      </div>
+    </div>
+  )
+}

src/components/CenterTopData/index.module.less

@@ -0,0 +1,8 @@
+.leftGrid {
+  width: 416px;
+  height: 212px;
+}
+.rightTable {
+  width: 410px;
+  height: 240px;
+}

src/components/CenterTopData/substitutionCharts/Chart1.jsx

@@ -0,0 +1,59 @@
+
+import React, { Component } from 'react';
+import './Chart1.less'
+
+import { ScrollBoard } from '@jiaminghi/data-view-react'
+
+let data = [
+    ['产线0', '10mm', '10mm', '10mm'],
+    ['产线2', '8mm', '8mm', '8mm'],
+    ['产线3', '15mm', '15mm', '15mm'],
+    ['产线4', '15mm', '15mm', '15mm'],
+]
+
+let header = ['产线名', '原板宽度', '净板宽', '玻璃厚度']
+
+let config = {
+    headerBGC: 'rgba(4, 44, 76, 0.3)',
+    header: ['<span style="color:#fff">产线名<span/>', '<span style="color:#fff">原板宽度<span/>', '<span style="color:#fff">净板宽<span/>', '<span style="color:#fff">玻璃厚度<span/>'],
+    oddRowBGC: "#042444",
+    evenRowBGC: "#042c4c",
+    columnWidth: [90],
+    headerHeight: 40,
+    hoverPause: false,
+    data: replaceStyle(data, 0.7)
+}
+
+function replaceStyle(Arr, opencity) {
+    let temp = [];
+
+    for (let i = 0; i < Arr.length; i++) {
+        temp[i] = [];
+        for (let j = 0; j < Arr[i].length; j++) {
+            temp[i][j] = ` <span style="color:rgba(255, 255, 255,${opencity})">${Arr[i][j]}<span/>`
+        }
+    }
+
+    return temp;
+}
+
+class Chart1 extends Component {
+
+
+    render() {
+        return (
+            <div className='CenterChart1itemDetailBorder'>
+                <h2 className='CenterChart1itemTXT'> 当前产线生产规格</h2>
+                <div className='CenterChart1itemContainer'>
+                    <span className='CenterFormitemDetailBorderLine1'></span>
+                    <span className='CenterFormitemDetailBorderLine2'></span>
+                    <span className='CenterFormitemDetailBorderLine3'></span>
+                    <ScrollBoard config={config} style={{ width: '105%', height: '240%' }} />
+                </div>
+
+            </div >
+        );
+    }
+}
+
+export default Chart1;

src/components/CenterTopData/substitutionCharts/Chart1.less

@@ -0,0 +1,52 @@
+.CenterChart1itemDetailBorder {
+  width: 100%;
+  height: 240px;
+  display: flex;
+  flex-direction:column;
+  justify-content: flex-start;
+
+  background-color: rgba(4, 44, 76, 0.2);
+  .CenterChart1itemTXT {
+    width: 100%;
+    height: 10%;
+    font-size: 20px;
+    color:rgba(255,255,255,0.8);
+    text-align: center;
+    margin-top: 2%;
+  
+  }
+  .CenterChart1itemContainer {
+   
+    width: 95%;
+    height:100px;
+    position:relative;
+
+    .CenterFormitemDetailBorderLine1 {
+      width: 1px;
+      height: 200px;
+      background-color:#041c2c;
+      float: left;
+      margin-left: 18%;
+      z-index: 10;
+      position: absolute;
+    }
+    .CenterFormitemDetailBorderLine2 {
+      width: 1px;
+      height: 200px;
+      background-color:#041c2c;
+      float: left;
+      margin-left: 46%;
+      z-index: 10;
+      position: absolute;
+    }
+    .CenterFormitemDetailBorderLine3 {
+      width:  1px;
+      height: 200px;
+      background-color:#041c2c;
+      float: left;
+      margin-left: 72%;
+      z-index: 10;
+      position: absolute;
+    }
+  }
+}

src/components/CenterTopData/substitutionCharts/Chart2.jsx

@@ -0,0 +1,89 @@
+
+import React, { useEffect, useState, useRef } from 'react'
+
+import icon1 from '@/assets/CenterChart2icon1.svg'
+import icon2 from '@/assets/CenterChart2icon2.svg'
+import icon3 from '@/assets/CenterChart2icon3.svg'
+import icon4 from '@/assets/CenterChart2icon4.svg'
+
+
+import './Chart2.less'
+
+
+const Chart2 = () => {
+
+    const timmer = useRef();
+    const [year, setYear] = useState('')
+    const [month, setMonth] = useState('')
+    const [day, setDay] = useState('')
+
+
+    const getNewDate = () => {
+        const Time = new Date();
+        const year = Time.getFullYear();
+        const month = Time.getMonth() + 1;
+        const day = Time.getDate();
+
+
+        setYear(year);
+        setMonth(month);
+        setDay(day);
+
+    }
+
+
+    useEffect(() => {
+        getNewDate();
+        timmer.current = setInterval(getNewDate, 10000);
+        return () => {
+            clearTimeout(timmer.current)
+        }
+        //eslint-disable-next-line
+    }, [])
+
+
+
+
+
+    return (
+        <div className='CenterChart2itemDetailBorder'>
+
+            <div className='CenterChart2itemcontentOUT'>
+                <div className='CenterChart2itemcontent'>
+                    <img src={icon4} alt="Error" className='CenterChart2itemcontentIcon' />
+                    <div className='CenterChart2itemcontentText' >
+                        <h2 className='CenterChart2itemcontentText1'>车间温度</h2>
+                        <h2 className='CenterChart2itemcontentText2'> 27℃</h2>
+                    </div>
+                </div>
+                <div className='CenterChart2itemcontent'>
+                    <img src={icon2} alt="Error" className='CenterChart2itemcontentIcon' />
+                    <div className='CenterChart2itemcontentText' >
+                        <h2 className='CenterChart2itemcontentText1'>当前火向</h2>
+                        <h2 className='CenterChart2itemcontentText2'> XXX</h2>
+                    </div>
+                </div>
+            </div>
+            <div className='CenterChart2itemcontentOUT'>
+                <div className='CenterChart2itemcontent'>
+                    <img src={icon1} alt="Error" className='CenterChart2itemcontentIcon' />
+                    <div className='CenterChart2itemcontentText' >
+                        <h2 className='CenterChart2itemcontentText1'>换火时间</h2>
+                        <h2 className='CenterChart2itemcontentText2'> 12:41:45</h2>
+                    </div>
+                </div>
+                <div className='CenterChart2itemcontent'>
+                    <img src={icon3} alt="Error" className='CenterChart2itemcontentIcon' />
+                    <div className='CenterChart2itemcontentText' >
+                        <h2 className='CenterChart2itemcontentText1'>剩余时间</h2>
+                        <h2 className='CenterChart2itemcontentText2'> 20h</h2>
+                    </div>
+                </div>
+            </div>
+
+
+        </div >
+    );
+}
+
+export default Chart2;

src/components/CenterTopData/substitutionCharts/Chart2.less

@@ -0,0 +1,53 @@
+.CenterChart2itemDetailBorder {
+  width: 440px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+
+  .CenterChart2itemcontentOUT {
+    width: 100%;
+    height: 50%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
+    .CenterChart2itemcontent {
+      width: 224px;
+      height: 95%;
+      background: url(../../../assets/CenterChart2ItemBg.png);
+      background-repeat: no-repeat;
+      display: flex;
+      flex-direction: row;
+      justify-content: left;
+      margin-top: 3%;
+      margin-left: 2%;
+
+      .CenterChart2itemcontentIcon {
+        margin-top: 2%;
+        width: 48px;
+        height: 48px;
+        margin-left: 5%;
+      }
+
+      .CenterChart2itemcontentText {
+        width: 50%;
+        height: 70%;
+        margin-left: -2%;
+
+        .CenterChart2itemcontentText1 {
+          color: rgba(224, 222, 222, 0.8);
+          font-size: 15px;
+          margin-top: 10%;
+        }
+
+        .CenterChart2itemcontentText2 {
+          color: rgb(255, 255, 255);
+          font-size: 34px;
+          margin-top: -10%;
+          margin-left: -3%;
+        }
+      }
+    }
+  }
+}