done refactor

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@babel/core": "^7.16.0",
+        "@jiaminghi/data-view-react": "^1.2.5",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
         "@reduxjs/toolkit": "^1.9.7",
         "@svgr/webpack": "^5.5.0",
@@ -3768,6 +3769,63 @@
         "node": ">=8"
       }
     },
+    "node_modules/@jiaminghi/bezier-curve": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz",
+      "integrity": "sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
+    "node_modules/@jiaminghi/c-render": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/c-render/-/c-render-0.4.3.tgz",
+      "integrity": "sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/bezier-curve": "*",
+        "@jiaminghi/color": "*",
+        "@jiaminghi/transition": "*"
+      }
+    },
+    "node_modules/@jiaminghi/charts": {
+      "version": "0.2.18",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/charts/-/charts-0.2.18.tgz",
+      "integrity": "sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/c-render": "^0.4.3"
+      }
+    },
+    "node_modules/@jiaminghi/color": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz",
+      "integrity": "sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg=="
+    },
+    "node_modules/@jiaminghi/data-view-react": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/data-view-react/-/data-view-react-1.2.5.tgz",
+      "integrity": "sha512-hxlfg0yULj7nUde8oj5hB9pUWrHqFyuPUeJWNG70YPPHFnWXqmlWCx1aB1OpqD3lwxaI1aKkA4YJRhkvfLyKrg==",
+      "dependencies": {
+        "@jiaminghi/charts": "^0.2"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0",
+        "react-dom": "^16.8.0"
+      }
+    },
+    "node_modules/@jiaminghi/transition": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/transition/-/transition-1.1.11.tgz",
+      "integrity": "sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.3",
       "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@@ -22411,6 +22469,55 @@
         }
       }
     },
+    "@jiaminghi/bezier-curve": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz",
+      "integrity": "sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
+    "@jiaminghi/c-render": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/c-render/-/c-render-0.4.3.tgz",
+      "integrity": "sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/bezier-curve": "*",
+        "@jiaminghi/color": "*",
+        "@jiaminghi/transition": "*"
+      }
+    },
+    "@jiaminghi/charts": {
+      "version": "0.2.18",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/charts/-/charts-0.2.18.tgz",
+      "integrity": "sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/c-render": "^0.4.3"
+      }
+    },
+    "@jiaminghi/color": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz",
+      "integrity": "sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg=="
+    },
+    "@jiaminghi/data-view-react": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/data-view-react/-/data-view-react-1.2.5.tgz",
+      "integrity": "sha512-hxlfg0yULj7nUde8oj5hB9pUWrHqFyuPUeJWNG70YPPHFnWXqmlWCx1aB1OpqD3lwxaI1aKkA4YJRhkvfLyKrg==",
+      "requires": {
+        "@jiaminghi/charts": "^0.2"
+      }
+    },
+    "@jiaminghi/transition": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/transition/-/transition-1.1.11.tgz",
+      "integrity": "sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==",
+      "requires": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
     "@jridgewell/gen-mapping": {
       "version": "0.3.3",
       "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@babel/core": "^7.16.0",
+    "@jiaminghi/data-view-react": "^1.2.5",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@reduxjs/toolkit": "^1.9.7",
     "@svgr/webpack": "^5.5.0",

src/components/Common/Company/index.jsx

@@ -4,7 +4,7 @@ import TopSide from '../../../assets/TopSide.png';
 import LeftLine from '../../../assets/TopTitleLeftIcon.png';
 import RightLine from '../../../assets/TopTitleRightIcon.png';
 import ButtonLine from '../../../assets/TopButtonLine.png';
-import './index.scss';
+import cls from './index.module.scss';
 
 export default function CompanyName() {
 	const [now, setNow] = useState('2023.07.01 12:00:00');
@@ -28,23 +28,23 @@ export default function CompanyName() {
 	}, []);
 
 	return (
-		<div className="TopTitleBoder">
+		<div className={cls.TopTitleBoder}>
-			<img src={TopSide} alt="图片丢失" className="TopSideLeft" />
+			<img src={TopSide} alt="图片丢失" className={cls.TopSideLeft}/>
-			<div className="TopSideLeftLine">
+			<div className={cls.TopSideLeftLine}>
-				<img src={LeftLine} alt="图片丢失" className="TopSideLeftLineicon" />
+				<img src={LeftLine} alt="图片丢失" className={cls.TopSideLeftLineicon}/>
-				<h2 className="TopSideLeftTxt">单位：河南汇融科技服务有限公司</h2>
+				<h2 className={cls.TopSideLeftTxt}>单位：河南汇融科技服务有限公司</h2>
 			</div>
 			<div>
-				<h2 className="TopTitleText">
+				<h2 className={cls.TopTitleText}>
 					许昌安彩新能科技&ensp;&ensp;4800万方光伏轻质基板生产线{' '}
 				</h2>
-				<img src={ButtonLine} alt="图片加载错误" className="TopButtonLine" />
+				<img src={ButtonLine} alt="图片加载错误" className={cls.TopButtonLine}/>
 			</div>
-			<div className="TopSideRightLine">
+			<div className={cls.TopSideRightLine}>
-				<h2 className="TopSideRightTxt">{now}</h2>
+				<h2 className={cls.TopSideRightTxt}>{now}</h2>
-				<img src={RightLine} alt="图片丢失" className="TopSideRightLineicon" />
+				<img src={RightLine} alt="图片丢失" className={cls.TopSideRightLineicon}/>
 			</div>
-			<img src={TopSide} alt="图片丢失" className="TopSideRight" />
+			<img src={TopSide} alt="图片丢失" className={cls.TopSideRight}/>
 		</div>
 	);
 }

src/components/Common/Company/index.module.scss

@@ -71,7 +71,7 @@
 	}
 
 	.TopButtonLine {
-		margin-top: -9px;
+		margin-top: 12px;
 		width: 760px;
 		height: 14px;
 	}

src/components/Common/CurrentLineSpec/index.jsx

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

src/components/Common/FanInfo/index.jsx

@@ -1,7 +1,7 @@
 import GraphBase from "../../Common/GraphBase";
 import "./index.module.scss";
 
-// import { ScrollBoard } from '@jiaminghi/data-view-react';
+import { ScrollBoard } from "@jiaminghi/data-view-react";
 
 function getRandomRow() {
   const idx = Math.ceil(Math.random() * 100);
@@ -84,10 +84,10 @@ function FanInfo(props) {
         }}
       >
         <div className="flex-1" style={{ flex: 1 }}>
-          {/* <ScrollBoard
+          <ScrollBoard
             config={config}
             style={{ width: "280px", height: "100%" }}
-          /> */}
+          />
         </div>
         <div
           className="verticalLine"
@@ -102,10 +102,10 @@ function FanInfo(props) {
           }}
         ></div>
         <div className="flex-1" style={{ flex: 1 }}>
-          {/* <ScrollBoard
+          <ScrollBoard
-						config={config}
+            config={config}
-						style={{ width: '280px', height: '100%' }}
+            style={{ width: "280px", height: "100%" }}
-					/> */}
+          />
         </div>
       </div>
     </GraphBase>

src/components/Common/TodayGood/components/TodayTableData/index.jsx

@@ -1,36 +1,36 @@
-import { useState } from 'react';
+import { useState } from "react";
-import cls from './index.module.scss';
+import cls from "./index.module.scss";
-// import { ScrollBoard } from '@jiaminghi/data-view-react';
+import { ScrollBoard } from "@jiaminghi/data-view-react";
 
 const TodayTableData = (props) => {
-	const [config, setConfig] = useState({
+  const [config, setConfig] = useState({
-		// headerBGC: 'rgba(4, 44, 76, 0.3)',
+    // headerBGC: 'rgba(4, 44, 76, 0.3)',
-		headerBGC: 'rgba(4, 44, 76, .8)',
+    headerBGC: "rgba(4, 44, 76, .8)",
-		header: [
+    header: [
-			'<span style="color:#fff">产线<span/>',
+      '<span style="color:#fff">产线<span/>',
-			'<span style="color:#fff">一等率<span/>',
+      '<span style="color:#fff">一等率<span/>',
-			'<span style="color:#fff">二等率<span/>',
+      '<span style="color:#fff">二等率<span/>',
-			'<span style="color:#fff">成品率<span/>',
+      '<span style="color:#fff">成品率<span/>',
-			'<span style="color:#fff">废品率<span/>',
+      '<span style="color:#fff">废品率<span/>',
-		],
+    ],
-		oddRowBGC: '#042444',
+    oddRowBGC: "#042444",
-		evenRowBGC: '#042c4c',
+    evenRowBGC: "#042c4c",
-		columnWidth: [90],
+    columnWidth: [90],
-		headerHeight: 40,
+    headerHeight: 40,
-		hoverPause: false,
+    hoverPause: false,
-		data: [
+    data: [
-			['产线1', '37%', '62%', '97%', '7%'],
+      ["产线1", "37%", "62%", "97%", "7%"],
-			['产线2', '95%', '10%', '99%', '3%'],
+      ["产线2", "95%", "10%", "99%", "3%"],
-			['产线3', '68%', '1%', '92%', '4%'],
+      ["产线3", "68%", "1%", "92%", "4%"],
-			['产线4', '94%', '21%', '97%', '2%'],
+      ["产线4", "94%", "21%", "97%", "2%"],
-			['产线5', '99%', '30%', '95%', '5%'],
+      ["产线5", "99%", "30%", "95%", "5%"],
-		],
+    ],
-	});
+  });
-	return (
+  return (
-		<div className={cls.todayTableData}>
+    <div className={cls.todayTableData}>
-			{/* <ScrollBoard config={config} style={{ width: '100%' }} /> */}
+      <ScrollBoard config={config} style={{ width: "100%" }} />
-		</div>
+    </div>
-	);
+  );
 };
 
 export default TodayTableData;

src/index.js

@@ -5,8 +5,8 @@ import { store } from "./store";
 import App from "./App";
 import "./index.css";
 
-// const container = document.getElementById("root");
+const container = document.getElementById("root");
-const root = createRoot(document.body);
+const root = createRoot(container);
 
 root.render(
   <React.StrictMode>