done refactor

This commit is contained in:
lb
2023-11-09 15:59:30 +08:00
parent 572e9e0d5e
commit e9d003b1fa
8 changed files with 216 additions and 113 deletions

View File

@@ -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>
);
}

View File

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

View File

@@ -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;

View File

@@ -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>

View File

@@ -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;