done refactor
This commit is contained in:
lb
parent
572e9e0d5e
commit
e9d003b1fa
107
package-lock.json
generated
107
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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}>
|
||||
许昌安彩新能科技  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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -71,7 +71,7 @@
|
||||
}
|
||||
|
||||
.TopButtonLine {
|
||||
margin-top: -9px;
|
||||
margin-top: 12px;
|
||||
width: 760px;
|
||||
height: 14px;
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user