done refactor

2023-11-09 15:59:30 +08:00
parent 572e9e0d5e
commit e9d003b1fa
8 changed files with 216 additions and 113 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/components/Common/Company/index.jsx
+++ b/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">
-			<img src={TopSide} alt="图片丢失" className="TopSideLeft" />
-			<div className="TopSideLeftLine">
-				<img src={LeftLine} alt="图片丢失" className="TopSideLeftLineicon" />
-				<h2 className="TopSideLeftTxt">单位：河南汇融科技服务有限公司</h2>
+		<div className={cls.TopTitleBoder}>
+			<img src={TopSide} alt="图片丢失" className={cls.TopSideLeft}/>
+			<div className={cls.TopSideLeftLine}>
+				<img src={LeftLine} alt="图片丢失" className={cls.TopSideLeftLineicon}/>
+				<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">
-				<h2 className="TopSideRightTxt">{now}</h2>
-				<img src={RightLine} alt="图片丢失" className="TopSideRightLineicon" />
+			<div className={cls.TopSideRightLine}>
+				<h2 className={cls.TopSideRightTxt}>{now}</h2>
+				<img src={RightLine} alt="图片丢失" className={cls.TopSideRightLineicon}/>
 			</div>
-			<img src={TopSide} alt="图片丢失" className="TopSideRight" />
+			<img src={TopSide} alt="图片丢失" className={cls.TopSideRight}/>
 		</div>
 	);
 }
--- a/src/components/Common/Company/index.module.scss
+++ b/src/components/Common/Company/index.module.scss
@@ -71,7 +71,7 @@
 	}

 	.TopButtonLine {
-		margin-top: -9px;
+		margin-top: 12px;
 		width: 760px;
 		height: 14px;
 	}
--- a/src/components/Common/CurrentLineSpec/index.jsx
+++ b/src/components/Common/CurrentLineSpec/index.jsx
@@ -1,78 +1,73 @@
-import BottomBarItem from '../BottomItemBackground';
-import React, { Component } from 'react';
-import './righttable.module.scss';
+import BottomBarItem from "../BottomItemBackground";
+import React, { Component } from "react";
+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'],
-	['产线2', '8mm', '8mm', '8mm'],
-	['产线3', '15mm', '15mm', '15mm'],
-	['产线4', '15mm', '15mm', '15mm'],
-	['产线42', '15mm', '15mm', '15mm'],
-	['产线5', '15mm', '15mm', '15mm'],
-	['产线6', '15mm', '15mm', '15mm'],
+  ["产线0", "10mm", "10mm", "10mm"],
+  ["产线2", "8mm", "8mm", "8mm"],
+  ["产线3", "15mm", "15mm", "15mm"],
+  ["产线4", "15mm", "15mm", "15mm"],
+  ["产线42", "15mm", "15mm", "15mm"],
+  ["产线5", "15mm", "15mm", "15mm"],
+  ["产线6", "15mm", "15mm", "15mm"],
 ];

-let header = ['产线名', '原板宽度', '净板宽', '玻璃厚度'];
+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: [128],
-	headerHeight: 40,
-	hoverPause: false,
-	data: replaceStyle(data, 0.7),
+  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: [128],
+  headerHeight: 40,
+  hoverPause: false,
+  data: replaceStyle(data, 0.7),
 };

 function replaceStyle(Arr, opencity) {
-	let temp = [];
+  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/>`;
-		}
-	}
+  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;
+  return temp;
 }

 class Chart1 extends Component {
-	render() {
-		return (
-			<BottomBarItem
-				icon="pause"
-				title="当前产线生产规格"
-				className={this.props.className}
-				style={this.props.style}
-			>
-				<div
-					className="CenterChart1itemDetailBorder"
-					style={{ paddingTop: '6px' }}
-				>
-					<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>
-			</BottomBarItem>
-		);
-	}
+  render() {
+    return (
+      <BottomBarItem
+        icon="pause"
+        title="当前产线生产规格"
+        className={this.props.className}
+        style={this.props.style}
+      >
+        <div
+          className={cls.CenterChart1itemDetailBorder}
+          style={{ paddingTop: "6px" }}
+        >
+          <span className={cls.CenterFormitemDetailBorderLine1}></span>
+          <span className={cls.CenterFormitemDetailBorderLine2}></span>
+          <span className={cls.CenterFormitemDetailBorderLine3}></span>
+          <ScrollBoard config={config} style={{}} />
+        </div>
+      </BottomBarItem>
+    );
+  }
 }

 export default Chart1;
--- a/src/components/Common/FanInfo/index.jsx
+++ b/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
-						config={config}
-						style={{ width: '280px', height: '100%' }}
-					/> */}
+          <ScrollBoard
+            config={config}
+            style={{ width: "280px", height: "100%" }}
+          />
        </div>
      </div>
    </GraphBase>
--- a/src/components/Common/TodayGood/components/TodayTableData/index.jsx
+++ b/src/components/Common/TodayGood/components/TodayTableData/index.jsx
@@ -1,36 +1,36 @@
-import { useState } from 'react';
-import cls from './index.module.scss';
-// import { ScrollBoard } from '@jiaminghi/data-view-react';
+import { useState } from "react";
+import cls from "./index.module.scss";
+import { ScrollBoard } from "@jiaminghi/data-view-react";

 const TodayTableData = (props) => {
-	const [config, setConfig] = useState({
-		// headerBGC: 'rgba(4, 44, 76, 0.3)',
-		headerBGC: 'rgba(4, 44, 76, .8)',
-		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/>',
-		],
-		oddRowBGC: '#042444',
-		evenRowBGC: '#042c4c',
-		columnWidth: [90],
-		headerHeight: 40,
-		hoverPause: false,
-		data: [
-			['产线1', '37%', '62%', '97%', '7%'],
-			['产线2', '95%', '10%', '99%', '3%'],
-			['产线3', '68%', '1%', '92%', '4%'],
-			['产线4', '94%', '21%', '97%', '2%'],
-			['产线5', '99%', '30%', '95%', '5%'],
-		],
-	});
-	return (
-		<div className={cls.todayTableData}>
-			{/* <ScrollBoard config={config} style={{ width: '100%' }} /> */}
-		</div>
-	);
+  const [config, setConfig] = useState({
+    // headerBGC: 'rgba(4, 44, 76, 0.3)',
+    headerBGC: "rgba(4, 44, 76, .8)",
+    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/>',
+    ],
+    oddRowBGC: "#042444",
+    evenRowBGC: "#042c4c",
+    columnWidth: [90],
+    headerHeight: 40,
+    hoverPause: false,
+    data: [
+      ["产线1", "37%", "62%", "97%", "7%"],
+      ["产线2", "95%", "10%", "99%", "3%"],
+      ["产线3", "68%", "1%", "92%", "4%"],
+      ["产线4", "94%", "21%", "97%", "2%"],
+      ["产线5", "99%", "30%", "95%", "5%"],
+    ],
+  });
+  return (
+    <div className={cls.todayTableData}>
+      <ScrollBoard config={config} style={{ width: "100%" }} />
+    </div>
+  );
 };

 export default TodayTableData;
--- a/src/index.js
+++ b/src/index.js
@@ -5,8 +5,8 @@ import { store } from "./store";
 import App from "./App";
 import "./index.css";

-// const container = document.getElementById("root");
-const root = createRoot(document.body);
+const container = document.getElementById("root");
+const root = createRoot(container);

 root.render(
  <React.StrictMode>