update boxes

src/components/CenterTopData/RightTable/index.jsx

@@ -0,0 +1,59 @@
+
+import React, { Component } from 'react';
+import './righttable.module.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/RightTable/righttable.module.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;
+    }
+  }
+}