5个页面的ws接口
This commit is contained in:
parent
d142b16df3
commit
022bf57feb
@ -1,3 +1,3 @@
|
||||
{
|
||||
"url": "192.168.1.40:48080"
|
||||
"url": "192.168.1.35:48080"
|
||||
}
|
||||
69
src/App.tsx
69
src/App.tsx
@ -14,7 +14,16 @@ import { selectGlassStatus } from "./store/ProductionMonitoringEntity";
|
||||
import TestPage from "./page/TestPage";
|
||||
import LDPage from "./page/LDPage";
|
||||
import LinePage from "./page/LinePage";
|
||||
import LinePage1_1 from "./page/LinePage1_1";
|
||||
import LinePage1_1 from "./page/LinePage1-1";
|
||||
import LinePage1_2 from "./page/LinePage1-2";
|
||||
import LinePage2_1 from "./page/LinePage2-1";
|
||||
import LinePage2_2 from "./page/LinePage2-2";
|
||||
import LinePage3_1 from "./page/LinePage3-1";
|
||||
import LinePage3_2 from "./page/LinePage3-2";
|
||||
import LinePage4_1 from "./page/LinePage4-1";
|
||||
import LinePage4_2 from "./page/LinePage4-2";
|
||||
import LinePage5_1 from "./page/LinePage5-1";
|
||||
import LinePage5_2 from "./page/LinePage5-2";
|
||||
|
||||
// const LOCALES_LIST = [
|
||||
// {
|
||||
@ -49,11 +58,11 @@ function App() {
|
||||
setCurrentLocale(Locale);
|
||||
|
||||
const router = createHashRouter([
|
||||
{
|
||||
path: "/:LineID?",
|
||||
element: <LinePage />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
// {
|
||||
// path: "/:LineID?",
|
||||
// element: <LinePage />,
|
||||
// errorElement: <ErrorPage />,
|
||||
// },
|
||||
/////////////////////////////////////////////////////////////////////////////
|
||||
{
|
||||
path: "/TP/:LineID?",
|
||||
@ -71,13 +80,57 @@ function App() {
|
||||
// element: <LinePage />,
|
||||
// errorElement: <ErrorPage />,
|
||||
// },
|
||||
///////////////////////////////////////////////////////////////
|
||||
////////////////////////////从这开始///////////////////////////////////
|
||||
{
|
||||
path: "/LP/1-1",
|
||||
element: <LinePage1_1 />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
|
||||
{
|
||||
path: "/LP/1-2",
|
||||
element: <LinePage1_2 />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/LP/2-1",
|
||||
element: <LinePage2_1 />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/LP/2-2",
|
||||
element: <LinePage2_2 />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/LP/3-1",
|
||||
element: <LinePage3_1 />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/LP/3-2",
|
||||
element: <LinePage3_2 />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/LP/4-1",
|
||||
element: <LinePage4_1 />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/LP/4-2",
|
||||
element: <LinePage4_2 />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/LP/5-1",
|
||||
element: <LinePage5_1 />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/LP/5-2",
|
||||
element: <LinePage5_2 />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
]);
|
||||
useEffect(() => {
|
||||
const timerId = setInterval(() => {
|
||||
|
||||
@ -5,7 +5,7 @@ export default function getOptions(chartData: any) {
|
||||
const colors = ["#1A99FF", "#FFB70C", "#C69DFF", "#50F4E3", "#E02094"];
|
||||
return {
|
||||
color: colors,
|
||||
grid: { top: 38, right: 12, bottom: 26, left: 48 },
|
||||
grid: { top: 38, right: 12, bottom: 5, left: 15, containLabel: true },
|
||||
legend: {
|
||||
show: true,
|
||||
top: 10,
|
||||
|
||||
@ -4,7 +4,6 @@ import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChart/chart.config";
|
||||
import { useParams } from "react-router-dom";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine1Before} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
@ -1,8 +1,6 @@
|
||||
import LinePageBabylon from "../../../babylonjs/LinePageBabylon";
|
||||
import { useParams } from "react-router-dom";
|
||||
function CenterUp() {
|
||||
const { LineID } = useParams();
|
||||
const lineID = LineID?.toString() || "1-1";
|
||||
const lineID = "1-1"
|
||||
return (
|
||||
<div className="center_up">
|
||||
<LinePageBabylon modelPath={`Line${lineID}`} />
|
||||
@ -7,7 +7,7 @@ import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine1Before} from "./../../../store/LinePageSlice"
|
||||
function LeftUp() {
|
||||
const data = useAppSelector(selectLine1Before);
|
||||
console.log('页面数据：',data)
|
||||
console.log('页面数据1-1：',data)
|
||||
// 假数据
|
||||
const dataSource = {
|
||||
day: {
|
||||
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
214
src/page/LinePage1-2/Center/CenterDown.tsx
Normal file
214
src/page/LinePage1-2/Center/CenterDown.tsx
Normal file
@ -0,0 +1,214 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChart/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine1After} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
function CenterDown() {
|
||||
const data = useAppSelector(selectLine1After);
|
||||
// 假数据
|
||||
const dataSource = {
|
||||
day: {
|
||||
xData:[],
|
||||
series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
|
||||
},
|
||||
week: {
|
||||
xData:[],
|
||||
series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
|
||||
},
|
||||
month: {
|
||||
xData:[],
|
||||
series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
|
||||
},
|
||||
};
|
||||
const nameList = [
|
||||
{ name: "天", ename: "day" },
|
||||
{ name: "周", ename: "week" },
|
||||
{ name: "月", ename: "month" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
const config = {
|
||||
header: ["序号", "报警时间", "报警设备", "报警内容"],
|
||||
headerHeight: 36,
|
||||
rowNum: 6,
|
||||
align: ["center", "left", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [80, 137, 137, 137],
|
||||
data: []
|
||||
};
|
||||
// 报警数据
|
||||
let arr:any = []
|
||||
let sumAlarm = 0
|
||||
// @ts-ignore
|
||||
if (data.alarms && data.alarms.length > 0) {
|
||||
// @ts-ignore
|
||||
sumAlarm = data.alarms.length
|
||||
// @ts-ignore
|
||||
data.alarms.map((item,index) => {
|
||||
let arrInner = []
|
||||
arrInner.push(
|
||||
index+1,
|
||||
moment(item.recTime).format("YYYY/MM/DD HH:mm"),
|
||||
item.name,
|
||||
item.status === '故障'?"<span style='color:#FF1E1E'>故障</span>":"<span style='color:#FFB40F'>离线</span>",
|
||||
);
|
||||
arr.push(arrInner)
|
||||
});
|
||||
}
|
||||
config.data = arr
|
||||
// 产线成品率
|
||||
// @ts-ignore
|
||||
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
|
||||
// @ts-ignore
|
||||
let keys = Object.keys(data.todayProductionRates)
|
||||
// @ts-ignore
|
||||
data.todayProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.day.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
name: "",
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
symbolSize: 4,
|
||||
data:[]
|
||||
}
|
||||
// @ts-ignore
|
||||
obj.name = data.todayProductionRates[item][0].lineName
|
||||
// @ts-ignore
|
||||
data.todayProductionRates[item].map((subItem,index)=>{
|
||||
// @ts-ignore
|
||||
obj.data.push(subItem.passRate)
|
||||
})
|
||||
dataSource.day.series.push(obj)
|
||||
})
|
||||
}else{
|
||||
dataSource.day.xData = []
|
||||
dataSource.day.series = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.weekProductionRates && Object.keys(data.weekProductionRates).length > 0) {
|
||||
// @ts-ignore
|
||||
let keys = Object.keys(data.weekProductionRates)
|
||||
// @ts-ignore
|
||||
data.weekProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.week.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
name: "",
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
symbolSize: 4,
|
||||
data:[]
|
||||
}
|
||||
// @ts-ignore
|
||||
obj.name = data.weekProductionRates[item][0].lineName
|
||||
// @ts-ignore
|
||||
data.weekProductionRates[item].map((subItem,index)=>{
|
||||
// @ts-ignore
|
||||
obj.data.push(subItem.passRate)
|
||||
})
|
||||
dataSource.week.series.push(obj)
|
||||
})
|
||||
}else{
|
||||
dataSource.week.xData = []
|
||||
dataSource.week.series = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.monthProductionRates && Object.keys(data.monthProductionRates).length > 0) {
|
||||
// @ts-ignore
|
||||
let keys = Object.keys(data.monthProductionRates)
|
||||
// @ts-ignore
|
||||
data.monthProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.month.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
name: "",
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
symbolSize: 4,
|
||||
data:[]
|
||||
}
|
||||
// @ts-ignore
|
||||
obj.name = data.monthProductionRates[item][0].lineName
|
||||
// @ts-ignore
|
||||
data.monthProductionRates[item].map((subItem,index)=>{
|
||||
// @ts-ignore
|
||||
obj.data.push(subItem.passRate)
|
||||
})
|
||||
dataSource.month.series.push(obj)
|
||||
})
|
||||
}else{
|
||||
dataSource.month.xData = []
|
||||
dataSource.month.series = []
|
||||
}
|
||||
let chartData = (dataSource as { [key: string]: any })[activeName];
|
||||
console.log('???????????',chartData)
|
||||
const options = getOptions(chartData);
|
||||
return (
|
||||
<div className="center_down flex-row">
|
||||
<div className="center_down_inner flex-col left-box">
|
||||
<TitleBox title={"center_down_left"} />
|
||||
<span className="alarm_num_title">— 报警总数 —</span>
|
||||
<div className="alarm_num">{sumAlarm}</div>
|
||||
<div style={{ padding: 10, height: "270px" }}>
|
||||
{arr.length>0?<ScrollBoard
|
||||
config={config}
|
||||
style={{ width: "492px", height: "250px" }}
|
||||
/>:(<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>)}
|
||||
</div>
|
||||
</div>
|
||||
{/* 产线成品率 */}
|
||||
<div className="center_down_inner flex-col right_box">
|
||||
<TitleBox title={"center_down_right"} />
|
||||
<div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
{chartData.xData.length>0 && (
|
||||
<div className="chart_box">
|
||||
{<ReactECharts option={options} style={{ height: "100%" }} />}
|
||||
</div>
|
||||
)}
|
||||
{chartData.xData.length==0 && (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "120px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default CenterDown;
|
||||
10
src/page/LinePage1-2/Center/CenterUp.tsx
Normal file
10
src/page/LinePage1-2/Center/CenterUp.tsx
Normal file
@ -0,0 +1,10 @@
|
||||
import LinePageBabylon from "../../../babylonjs/LinePageBabylon";
|
||||
function CenterUp() {
|
||||
const lineID = "1-2";
|
||||
return (
|
||||
<div className="center_up">
|
||||
<LinePageBabylon modelPath={`Line${lineID}`} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default CenterUp;
|
||||
12
src/page/LinePage1-2/Center/index.tsx
Normal file
12
src/page/LinePage1-2/Center/index.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import CenterDown from "./CenterDown";
|
||||
import CenterUp from "./CenterUp";
|
||||
|
||||
function Center() {
|
||||
return (
|
||||
<div className="group_center flex-col">
|
||||
<CenterUp />
|
||||
<CenterDown />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default Center;
|
||||
19
src/page/LinePage1-2/Component/SwitchButton/index.css
Normal file
19
src/page/LinePage1-2/Component/SwitchButton/index.css
Normal file
@ -0,0 +1,19 @@
|
||||
.switch-button {
|
||||
height: 33px;
|
||||
}
|
||||
.switch-button button {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
padding: 4px 10px;
|
||||
background-color: rgba(49, 135, 140, 0.3);
|
||||
cursor: pointer;
|
||||
}
|
||||
.switch-button button:first-child {
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
.switch-button button:last-child {
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
.switch-button button.active {
|
||||
background-color: rgba(86, 244, 231, 0.7);
|
||||
}
|
||||
65
src/page/LinePage1-2/Component/SwitchButton/index.tsx
Normal file
65
src/page/LinePage1-2/Component/SwitchButton/index.tsx
Normal file
@ -0,0 +1,65 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import "./index.css";
|
||||
interface Name {
|
||||
name: string;
|
||||
ename: string;
|
||||
}
|
||||
interface nameListProps {
|
||||
nameList: Name[];
|
||||
onChange: (value: string) => void;
|
||||
}
|
||||
function createActiveNameUpdater(nameList: any, activeName: string) {
|
||||
let activeIndex = nameList.findIndex((obj: any) => obj.name === activeName);
|
||||
|
||||
return function updateActiveName() {
|
||||
activeIndex = (activeIndex + 1) % nameList.length;
|
||||
return nameList[activeIndex].ename;
|
||||
};
|
||||
}
|
||||
function SwitchButton(props: nameListProps) {
|
||||
const [activeName, setActiveName] = useState(props.nameList[0].ename);
|
||||
const [timerId, setTimerId] = useState<any>(null);
|
||||
let updateActiveName = createActiveNameUpdater(props.nameList, activeName);
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
let active = updateActiveName();
|
||||
setActiveName(active);
|
||||
props.onChange(active);
|
||||
}, 60000);
|
||||
setTimerId(timer);
|
||||
return () => {
|
||||
if (timerId !== null) {
|
||||
clearInterval(timerId);
|
||||
}
|
||||
};
|
||||
}, [props.nameList.length]);
|
||||
const btnClick = (ename: string) => {
|
||||
if (timerId !== null) {
|
||||
clearInterval(timerId);
|
||||
}
|
||||
setActiveName(ename);
|
||||
props.onChange(ename); // 通知父组件
|
||||
const newTimer = setInterval(() => {
|
||||
let active = updateActiveName();
|
||||
setActiveName(active);
|
||||
props.onChange(active);
|
||||
}, 60000);
|
||||
setTimerId(newTimer);
|
||||
};
|
||||
return (
|
||||
<div className="switch-button">
|
||||
{props.nameList.map((item, index) => {
|
||||
return (
|
||||
<button
|
||||
key={item.ename}
|
||||
className={activeName === item.ename ? "active" : ""}
|
||||
onClick={() => btnClick(item.ename)}
|
||||
>
|
||||
{item.name}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default SwitchButton;
|
||||
13
src/page/LinePage1-2/Component/TitleBox/index.css
Normal file
13
src/page/LinePage1-2/Component/TitleBox/index.css
Normal file
@ -0,0 +1,13 @@
|
||||
.title_box {
|
||||
font-size: 24px;
|
||||
color: #52fff1;
|
||||
padding: 10px 0 0 15px;
|
||||
}
|
||||
.title_box img {
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
vertical-align: bottom;
|
||||
margin-right: 3px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
53
src/page/LinePage1-2/Component/TitleBox/index.tsx
Normal file
53
src/page/LinePage1-2/Component/TitleBox/index.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import Defect from "./../../assets/icon/defect.png";
|
||||
import Alarm from "./../../assets/icon/alarm.png";
|
||||
import Finished from "./../../assets/icon/finished.png";
|
||||
import InputAndOutput from "./../../assets/icon/inputAndOutput.png";
|
||||
import Num from "./../../assets/icon/num.png";
|
||||
import Record from "./../../assets/icon/record.png";
|
||||
import "./index.css";
|
||||
interface titleProps {
|
||||
title: string;
|
||||
}
|
||||
function TitleBox(props: titleProps) {
|
||||
const filteredTitles = () => {
|
||||
switch (props.title) {
|
||||
case "left_up":
|
||||
return {
|
||||
img: Defect,
|
||||
title: "产线报废汇总",
|
||||
};
|
||||
case "left_down":
|
||||
return {
|
||||
img: Record,
|
||||
title: "当前产线报废情况",
|
||||
};
|
||||
case "center_down_left":
|
||||
return {
|
||||
img: Alarm,
|
||||
title: "异常报警",
|
||||
};
|
||||
case "center_down_right":
|
||||
return {
|
||||
img: Finished,
|
||||
title: "产线成品率",
|
||||
};
|
||||
case "right_up":
|
||||
return {
|
||||
img: Num,
|
||||
title: "各产线总投入和产出",
|
||||
};
|
||||
default:
|
||||
return {
|
||||
img: InputAndOutput,
|
||||
title: "当前产线投入和产出",
|
||||
};
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="title_box">
|
||||
<img src={filteredTitles().img} alt="title" />
|
||||
<span>{filteredTitles().title}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default TitleBox;
|
||||
245
src/page/LinePage1-2/Left/LeftDown.tsx
Normal file
245
src/page/LinePage1-2/Left/LeftDown.tsx
Normal file
@ -0,0 +1,245 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import { useState } from "react";
|
||||
import getOptions from "../../Component/BarChart/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine1After} from "./../../../store/LinePageSlice"
|
||||
function LeftDown() {
|
||||
const data = useAppSelector(selectLine1After);
|
||||
// console.log('页面数据：',data)
|
||||
const nameList = [
|
||||
{ name: "表单", ename: "table" },
|
||||
{ name: "柱状", ename: "chart" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
const configDay = {
|
||||
header: ["序号", "工序类型", "报废数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 4,
|
||||
align: ["center", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
data: [
|
||||
["1", "磨边后", 224],
|
||||
["2", "包装1", 322],
|
||||
["3", "包装2", 66],
|
||||
],
|
||||
};
|
||||
const configWeek = {
|
||||
header: ["序号", "工序类型", "报废数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 4,
|
||||
align: ["center", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
data: [
|
||||
["1", "磨边后", 1119],
|
||||
["2", "包装1", 1798],
|
||||
["3", "包装2", 435],
|
||||
],
|
||||
};
|
||||
const configMonth = {
|
||||
header: ["序号", "工序类型", "报废数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 4,
|
||||
align: ["center", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
data: [
|
||||
["1", "磨边后", 5004],
|
||||
["2", "包装1", 9122],
|
||||
["3", "包装2", 1924],
|
||||
],
|
||||
};
|
||||
const color1 = ["#9DD5FF", "#1295FF"];
|
||||
const color2 = ["#85F6E9", "#2EC6B4"];
|
||||
// @ts-ignore
|
||||
let xData: string[] = data.scrapBars
|
||||
let dataProps1: number[] = [];
|
||||
let dataProps2: number[] = [];
|
||||
let dataProps3: number[] = [];
|
||||
let arr1: any = [];
|
||||
let arr2: any = [];
|
||||
let arr3: any = [];
|
||||
// @ts-ignore
|
||||
if (data.todayProductionScraps && data.todayProductionScraps.length > 0) {
|
||||
// @ts-ignore
|
||||
data.todayProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arr1.push(arrInner);
|
||||
dataProps1.push(item.scrapNum);
|
||||
})
|
||||
}else{
|
||||
dataProps1 = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.weekProductionScraps && data.weekProductionScraps.length > 0) {
|
||||
// @ts-ignore
|
||||
data.weekProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arr2.push(arrInner);
|
||||
dataProps2.push(item.scrapNum);
|
||||
})
|
||||
}else{
|
||||
dataProps2 = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.monthProductionScraps && data.monthProductionScraps.length > 0) {
|
||||
// @ts-ignore
|
||||
data.monthProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arr3.push(arrInner);
|
||||
dataProps3.push(item.scrapNum);
|
||||
})
|
||||
}else{
|
||||
dataProps3 = []
|
||||
}
|
||||
configDay.data = arr1;
|
||||
configWeek.data = arr2;
|
||||
configMonth.data = arr3;
|
||||
const options1 = getOptions(dataProps1,xData, color1);
|
||||
const options2 = getOptions(dataProps2,xData, color2);
|
||||
const options3 = getOptions(dataProps3,xData, color1);
|
||||
return (
|
||||
<div className="left_down">
|
||||
<TitleBox title={"left_down"} />
|
||||
<div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
<div style={{ padding: "10px", height: "555px" }}>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">当天</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="left_down_content">
|
||||
{activeName === "table" ? (
|
||||
arr1.length > 0 ? <ScrollBoard
|
||||
config={configDay}
|
||||
style={{ width: "380px", height: "150px" }}
|
||||
/>:(<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>)
|
||||
) : dataProps1.length>0 ? (
|
||||
<ReactECharts option={options1} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">本周</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="left_down_content">
|
||||
{activeName === "table" ? (
|
||||
arr2.length > 0 ? <ScrollBoard
|
||||
config={configWeek}
|
||||
style={{ width: "380px", height: "150px" }}
|
||||
/>:(<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>)
|
||||
) : dataProps2.length>0 ? (
|
||||
<ReactECharts option={options2} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">本月</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="left_down_content">
|
||||
{activeName === "table" ? (
|
||||
arr3.length > 0 ? <ScrollBoard
|
||||
config={configMonth}
|
||||
style={{ width: "380px", height: "150px" }}
|
||||
/>:(<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>)
|
||||
) : dataProps3.length>0 ? (
|
||||
<ReactECharts option={options3} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default LeftDown;
|
||||
229
src/page/LinePage1-2/Left/LeftUp.tsx
Normal file
229
src/page/LinePage1-2/Left/LeftUp.tsx
Normal file
@ -0,0 +1,229 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
import getOptions from "../../Component/SummaryBarChart/chart.config";
|
||||
import { useState } from "react";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine1After} from "./../../../store/LinePageSlice"
|
||||
function LeftUp() {
|
||||
const data = useAppSelector(selectLine1After);
|
||||
console.log('页面数据1-1：',data)
|
||||
// 假数据
|
||||
const dataSource = {
|
||||
day: {
|
||||
xData: [],
|
||||
series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
|
||||
},
|
||||
week: {
|
||||
xData: [],
|
||||
series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
|
||||
},
|
||||
month: {
|
||||
xData: [],
|
||||
series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
|
||||
},
|
||||
};
|
||||
const nameList = [
|
||||
{ name: "天", ename: "day" },
|
||||
{ name: "周", ename: "week" },
|
||||
{ name: "月", ename: "month" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
let chartData = (dataSource as { [key: string]: any })[activeName];
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
// @ts-ignore
|
||||
if (data.todayAllProductionScraps && Object.keys(data.todayAllProductionScraps).length > 0) {
|
||||
let sum: number[] = [];
|
||||
// 生成obj
|
||||
// @ts-ignore
|
||||
data.scrapBars.map((item,index) => {
|
||||
let obj = {
|
||||
data: [],
|
||||
type: "bar",
|
||||
stack: "a",
|
||||
name: item,
|
||||
barWidth: 14,
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
color: "inherit",
|
||||
},
|
||||
}
|
||||
dataSource.day.series.push(obj)
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.day.xData = Object.keys(data.todayAllProductionScraps)
|
||||
dataSource.day.xData.map((item,index)=>{
|
||||
let sumIner = 0
|
||||
// @ts-ignore
|
||||
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.day.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
}
|
||||
})
|
||||
})
|
||||
sum.push(sumIner)
|
||||
})
|
||||
dataSource.day.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
stack: "a",
|
||||
name: "",
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#fff",
|
||||
formatter: function (params: any) {
|
||||
return sum[params.dataIndex];
|
||||
},
|
||||
},
|
||||
})
|
||||
}else{
|
||||
dataSource.day.xData = []
|
||||
dataSource.day.series = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.weekAllProductionScraps && Object.keys(data.weekAllProductionScraps).length > 0) {
|
||||
let sum: number[] = [];
|
||||
// 生成obj
|
||||
// @ts-ignore
|
||||
data.scrapBars.map((item,index) => {
|
||||
let obj = {
|
||||
data: [],
|
||||
type: "bar",
|
||||
stack: "a",
|
||||
name: item,
|
||||
barWidth: 14,
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
color: "inherit",
|
||||
},
|
||||
}
|
||||
dataSource.week.series.push(obj)
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.week.xData = Object.keys(data.weekAllProductionScraps)
|
||||
dataSource.week.xData.map((item,index)=>{
|
||||
let sumIner = 0
|
||||
// @ts-ignore
|
||||
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.week.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
}
|
||||
})
|
||||
})
|
||||
sum.push(sumIner)
|
||||
})
|
||||
dataSource.week.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
stack: "a",
|
||||
name: "",
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#fff",
|
||||
formatter: function (params: any) {
|
||||
return sum[params.dataIndex];
|
||||
},
|
||||
},
|
||||
})
|
||||
}else{
|
||||
dataSource.week.xData = []
|
||||
dataSource.week.series = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.monthAllProductionScraps && Object.keys(data.monthAllProductionScraps).length > 0) {
|
||||
let sum: number[] = [];
|
||||
// 生成obj
|
||||
// @ts-ignore
|
||||
data.scrapBars.map((item,index) => {
|
||||
let obj = {
|
||||
data: [],
|
||||
type: "bar",
|
||||
stack: "a",
|
||||
name: item,
|
||||
barWidth: 14,
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
color: "inherit",
|
||||
},
|
||||
}
|
||||
dataSource.month.series.push(obj)
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.month.xData = Object.keys(data.monthAllProductionScraps)
|
||||
dataSource.month.xData.map((item,index)=>{
|
||||
let sumIner = 0
|
||||
// @ts-ignore
|
||||
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.month.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
}
|
||||
})
|
||||
})
|
||||
sum.push(sumIner)
|
||||
})
|
||||
dataSource.month.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
stack: "a",
|
||||
name: "",
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#fff",
|
||||
formatter: function (params: any) {
|
||||
return sum[params.dataIndex];
|
||||
},
|
||||
},
|
||||
})
|
||||
}else{
|
||||
dataSource.month.xData = []
|
||||
dataSource.month.series = []
|
||||
}
|
||||
const options = getOptions(chartData);
|
||||
return (
|
||||
<div className="left_up">
|
||||
<TitleBox title={"left_up"} />
|
||||
<div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
{// @ts-ignore
|
||||
dataSource[activeName].xData.length>0 ? (
|
||||
<div className="left_up_chart">
|
||||
{<ReactECharts option={options} style={{ height: "100%" }} />}
|
||||
</div>
|
||||
):(
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "72px",
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default LeftUp;
|
||||
11
src/page/LinePage1-2/Left/index.tsx
Normal file
11
src/page/LinePage1-2/Left/index.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import LeftUp from "./LeftUp";
|
||||
import LeftDown from "./LeftDown";
|
||||
function Left() {
|
||||
return (
|
||||
<div className="group_left flex-col">
|
||||
<LeftUp />
|
||||
<LeftDown />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default Left;
|
||||
273
src/page/LinePage1-2/Right/RightDown.tsx
Normal file
273
src/page/LinePage1-2/Right/RightDown.tsx
Normal file
@ -0,0 +1,273 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChartRight/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine1After} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
function RightDown() {
|
||||
const data = useAppSelector(selectLine1After);
|
||||
// console.log('页面数据：',data)
|
||||
// 假数据
|
||||
let tempData = [
|
||||
{
|
||||
type: "day",
|
||||
data: {
|
||||
time: [] as string[],
|
||||
input: [] as number[],
|
||||
output: [] as number[],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "week",
|
||||
data: {
|
||||
time: [] as string[],
|
||||
input: [] as number[],
|
||||
output: [] as number[],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "month",
|
||||
data: {
|
||||
time: [] as string[],
|
||||
input: [] as number[],
|
||||
output: [] as number[],
|
||||
},
|
||||
},
|
||||
];
|
||||
const nameList = [
|
||||
{ name: "表单", ename: "table" },
|
||||
{ name: "折线", ename: "chart" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
const configDay = {
|
||||
header: ["时间", "投入数量", "产出数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 5,
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [120, 130, 130],
|
||||
data: [],
|
||||
};
|
||||
const configWeek = {
|
||||
header: ["时间", "投入数量", "产出数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 5,
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [120, 130, 130],
|
||||
data: [],
|
||||
};
|
||||
const configMonth = {
|
||||
header: ["时间", "投入数量", "产出数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 5,
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [120, 130, 130],
|
||||
data: [],
|
||||
};
|
||||
let arr1: any = [];
|
||||
let arr2: any = [];
|
||||
let arr3: any = [];
|
||||
// @ts-ignore
|
||||
if (data.todayProductionDets && data.todayProductionDets.length > 0) {
|
||||
// @ts-ignore
|
||||
data.todayProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
|
||||
arr1.push(arrInner);
|
||||
tempData[0].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[0].data.input.push(item.inputNum);
|
||||
tempData[0].data.output.push(item.outputNum);
|
||||
})
|
||||
}else{
|
||||
tempData[0].data.time = []
|
||||
tempData[0].data.input = []
|
||||
tempData[0].data.output = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.weekProductionDets && data.weekProductionDets.length > 0) {
|
||||
// @ts-ignore
|
||||
data.weekProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr2.push(arrInner);
|
||||
tempData[1].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.input.push(item.inputNum);
|
||||
tempData[1].data.output.push(item.outputNum);
|
||||
})
|
||||
}else{
|
||||
tempData[1].data.time = []
|
||||
tempData[1].data.input = []
|
||||
tempData[1].data.output = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.monthProductionDets && data.monthProductionDets.length > 0) {
|
||||
// @ts-ignore
|
||||
data.monthProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr3.push(arrInner);
|
||||
tempData[2].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.input.push(item.inputNum);
|
||||
tempData[2].data.output.push(item.outputNum);
|
||||
})
|
||||
}else{
|
||||
tempData[2].data.time = []
|
||||
tempData[2].data.input = []
|
||||
tempData[2].data.output = []
|
||||
}
|
||||
configDay.data = arr1;
|
||||
configWeek.data = arr2;
|
||||
configMonth.data = arr3;
|
||||
|
||||
const chartData1 = tempData[0].data;
|
||||
const chartData2 = tempData[1].data;
|
||||
const chartData3 = tempData[2].data;
|
||||
const options1 = getOptions(chartData1);
|
||||
const options2 = getOptions(chartData2);
|
||||
const options3 = getOptions(chartData3);
|
||||
return (
|
||||
<div className="right_down">
|
||||
<TitleBox title={"right_down"} />
|
||||
<div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
<div style={{ padding: "10px", height: "628px" }}>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">当天</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="right_down_content">
|
||||
{activeName === "table" ? (
|
||||
arr1.length>0?<ScrollBoard
|
||||
config={configDay}
|
||||
style={{ width: "380px", height: "180px" }}
|
||||
/>:(
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)
|
||||
) : tempData[0].data.time.length>0 ? (
|
||||
<ReactECharts option={options1} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">本周</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="right_down_content">
|
||||
{activeName === "table" ? (
|
||||
arr2.length>0?<ScrollBoard
|
||||
config={configWeek}
|
||||
style={{ width: "380px", height: "180px" }}
|
||||
/>:(
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)
|
||||
) : tempData[1].data.time.length>0 ? (
|
||||
<ReactECharts option={options2} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">本月</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="right_down_content">
|
||||
{activeName === "table" ? (
|
||||
arr3.length>0?<ScrollBoard
|
||||
config={configMonth}
|
||||
style={{ width: "380px", height: "180px" }}
|
||||
/>:(
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)
|
||||
) : tempData[2].data.time.length>0 ? (
|
||||
<ReactECharts option={options3} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default RightDown;
|
||||
52
src/page/LinePage1-2/Right/RightUp.tsx
Normal file
52
src/page/LinePage1-2/Right/RightUp.tsx
Normal file
@ -0,0 +1,52 @@
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine1After} from "./../../../store/LinePageSlice"
|
||||
function RightUp() {
|
||||
const data = useAppSelector(selectLine1After);
|
||||
const config = {
|
||||
header: ["序号", "产线", "上片数据量", "成品下片数量"],
|
||||
headerHeight: 32,
|
||||
rowNum: 5,
|
||||
align: ["center", "left", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [70, 90, 106, 114],
|
||||
data: [],
|
||||
};
|
||||
let arr:any = []
|
||||
// @ts-ignore
|
||||
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
|
||||
// @ts-ignore
|
||||
data.sumProductionDets.map((item, index) => {
|
||||
let arrInner = []
|
||||
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
|
||||
arr.push(arrInner)
|
||||
})
|
||||
}
|
||||
config.data = arr
|
||||
return (
|
||||
<div className="right_up">
|
||||
<TitleBox title={"right_up"} />
|
||||
<div style={{ padding: "10px", height: "213px" }}>
|
||||
{arr.length>0?<ScrollBoard
|
||||
config={config}
|
||||
style={{ width: "380px", height: "193px" }}
|
||||
/>:(<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default RightUp;
|
||||
12
src/page/LinePage1-2/Right/index.tsx
Normal file
12
src/page/LinePage1-2/Right/index.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import RightDown from "./RightDown";
|
||||
import RightUp from "./RightUp";
|
||||
|
||||
function Right() {
|
||||
return (
|
||||
<div className="group_right flex-col">
|
||||
<RightUp />
|
||||
<RightDown />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default Right;
|
||||
14
src/page/LinePage1-2/TopP.tsx
Normal file
14
src/page/LinePage1-2/TopP.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import '../../lanhuapp/common.css';
|
||||
import "./index.css";
|
||||
|
||||
function TopP() {
|
||||
return (
|
||||
<div className="flex-row">
|
||||
<div className="block_top flex-row">
|
||||
<div className='block_top_title'></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TopP;
|
||||
BIN
src/page/LinePage1-2/assets/icon/alarm.png
Normal file
BIN
src/page/LinePage1-2/assets/icon/alarm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/page/LinePage1-2/assets/icon/defect.png
Normal file
BIN
src/page/LinePage1-2/assets/icon/defect.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/page/LinePage1-2/assets/icon/finished.png
Normal file
BIN
src/page/LinePage1-2/assets/icon/finished.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/page/LinePage1-2/assets/icon/g.png
Normal file
BIN
src/page/LinePage1-2/assets/icon/g.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/page/LinePage1-2/assets/icon/inputAndOutput.png
Normal file
BIN
src/page/LinePage1-2/assets/icon/inputAndOutput.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
src/page/LinePage1-2/assets/icon/num.png
Normal file
BIN
src/page/LinePage1-2/assets/icon/num.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/page/LinePage1-2/assets/icon/r.png
Normal file
BIN
src/page/LinePage1-2/assets/icon/r.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/page/LinePage1-2/assets/icon/record.png
Normal file
BIN
src/page/LinePage1-2/assets/icon/record.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/page/LinePage1-2/assets/icon/y.png
Normal file
BIN
src/page/LinePage1-2/assets/icon/y.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
264
src/page/LinePage1-2/index.css
Normal file
264
src/page/LinePage1-2/index.css
Normal file
@ -0,0 +1,264 @@
|
||||
/* 顶部 */
|
||||
.block_top {
|
||||
width: 1920px;
|
||||
height: 94px;
|
||||
background: url(/public/svg/topback.svg) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.block_top_title {
|
||||
width: 651px;
|
||||
height: 77px;
|
||||
background: url(/public/png/topTiltle.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top: 18px;
|
||||
}
|
||||
/* 中部 */
|
||||
.block_bottom {
|
||||
width: 1920px;
|
||||
height: 966px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.group_left {
|
||||
width: 402px;
|
||||
height: 966px;
|
||||
margin: 0 0 0 24px;
|
||||
}
|
||||
|
||||
.group_center {
|
||||
width: 1041px;
|
||||
height: 966px;
|
||||
margin: 0 0 0 15px;
|
||||
}
|
||||
|
||||
.group_right {
|
||||
width: 401px;
|
||||
height: 966px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.left_up {
|
||||
width: 402px;
|
||||
height: 332px;
|
||||
background: url(../../../public/png/rect/lp_left_up.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.left_down {
|
||||
width: 402px;
|
||||
height: 599px;
|
||||
background: url(../../../public/png/rect/lp_left_down.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
margin-top: 14px;
|
||||
position: relative;
|
||||
}
|
||||
.center_up {
|
||||
width: 1041px;
|
||||
height: 562px;
|
||||
background: url(../../../public/png/rect/lp_center_up.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.center_down {
|
||||
width: 1041px;
|
||||
height: 368px;
|
||||
margin-top: 17px;
|
||||
}
|
||||
.center_down_inner {
|
||||
width: 513px;
|
||||
height: 366px;
|
||||
background: url(../../../public/png/rect/lp_center_down.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.center_down .left-box {
|
||||
margin-right: 15px;
|
||||
position: relative;
|
||||
}
|
||||
.center_down .left-box .alarm_num_title {
|
||||
position: absolute;
|
||||
left: 220px;
|
||||
top: 22px;
|
||||
font-size: 13px;
|
||||
letter-spacing: 3px;
|
||||
color: #fff;
|
||||
}
|
||||
.center_down .left-box .alarm_num {
|
||||
color: #52fff1;
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
}
|
||||
.center_down .right_box .chart_box {
|
||||
width: 100%;
|
||||
height: 310px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.right_up {
|
||||
width: 401px;
|
||||
height: 257px;
|
||||
background: url(../../../public/png/rect/lp_right_up.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
.right_down {
|
||||
width: 401px;
|
||||
height: 673px;
|
||||
background: url(../../../public/png/rect/lp_right_down.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
margin-top: 14px;
|
||||
position: relative;
|
||||
}
|
||||
.left_up_switch {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 12px;
|
||||
}
|
||||
.left_up_chart {
|
||||
height: 275px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
/* 左侧 */
|
||||
.left_down_title {
|
||||
height: 18px;
|
||||
justify-content: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.left_down_box1 {
|
||||
width: 56px;
|
||||
height: 13px;
|
||||
background: url(/public/png/leftbar.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.left_down_box2 {
|
||||
width: 56px;
|
||||
height: 13px;
|
||||
background: url(/public/png/rightbar.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 2px 0 0 0px;
|
||||
}
|
||||
.left_down_text {
|
||||
/*width: 40px;*/
|
||||
height: 18px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(1, 207, 204, 1);
|
||||
font-size: 18px;
|
||||
letter-spacing: 5px;
|
||||
font-family: PingFangSC-Regular;
|
||||
white-space: nowrap;
|
||||
line-height: 18px;
|
||||
margin-left: 18px;
|
||||
margin-right: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
.left_down_content {
|
||||
height: 160px;
|
||||
/* padding-bottom: 5px; */
|
||||
}
|
||||
.right_down_content {
|
||||
height: 185px;
|
||||
/* padding-bottom: 5px; */
|
||||
}
|
||||
/* 滚动表格部分 */
|
||||
.dv-scroll-board .header .header-item,
|
||||
.dv-scroll-board .rows .ceil {
|
||||
border-right: 1px solid #0d1728;
|
||||
}
|
||||
.dv-scroll-board .header .header-item:last-child,
|
||||
.dv-scroll-board .rows .ceil:last-child {
|
||||
border-right: none;
|
||||
border: none;
|
||||
}
|
||||
/* chart图部分 */
|
||||
.luoyang-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.luoyang-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
/* 三维页面部分 */
|
||||
.center_up .model_name {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
z-index: 1000;
|
||||
}
|
||||
.center_up .model_info {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
bottom: 0px;
|
||||
z-index: 1000;
|
||||
width: 841px;
|
||||
height: 62px;
|
||||
background: url(/public/png/lp/line_part.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.center_up .model_info .reset_btn {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 40px;
|
||||
width: 140px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.center_up .model_info .title {
|
||||
display: inline-block;
|
||||
width: 361px;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
letter-spacing: 5px;
|
||||
position: absolute;
|
||||
left: 241px;
|
||||
bottom: 10px;
|
||||
}
|
||||
.center_up .eq_detail_info {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 1002;
|
||||
width: 240px;
|
||||
height: 110px;
|
||||
background: url(/public/png/lp/eq_msg_detail.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
padding: 15px 0 0 15px;
|
||||
}
|
||||
.center_up .eq_detail_info .left_name {
|
||||
display: inline-block;
|
||||
width: 95px;
|
||||
height: 28px;
|
||||
text-align: right;
|
||||
font-size: 18px;
|
||||
}
|
||||
.center_up .eq_detail_info .right_value {
|
||||
display: inline-block;
|
||||
height: 28px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.center_up .eq_info {
|
||||
position: absolute;
|
||||
z-index: 1002;
|
||||
background: url(/public/png/lp/eq_msg_always.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
.center_up .eq_info .eq_info_inner {
|
||||
height: 24px;
|
||||
font-size: 17px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
18
src/page/LinePage1-2/index.tsx
Normal file
18
src/page/LinePage1-2/index.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import React from "react";
|
||||
import TopP from "./TopP";
|
||||
import Left from "./Left";
|
||||
import Right from "./Right";
|
||||
import Center from "./Center";
|
||||
function LinePage() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TopP />
|
||||
<div className="block_bottom flex-row">
|
||||
<Left />
|
||||
<Center />
|
||||
<Right />
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
export default LinePage;
|
||||
214
src/page/LinePage2-1/Center/CenterDown.tsx
Normal file
214
src/page/LinePage2-1/Center/CenterDown.tsx
Normal file
@ -0,0 +1,214 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChart/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine2Before} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
function CenterDown() {
|
||||
const data = useAppSelector(selectLine2Before);
|
||||
// 假数据
|
||||
const dataSource = {
|
||||
day: {
|
||||
xData:[],
|
||||
series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
|
||||
},
|
||||
week: {
|
||||
xData:[],
|
||||
series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
|
||||
},
|
||||
month: {
|
||||
xData:[],
|
||||
series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
|
||||
},
|
||||
};
|
||||
const nameList = [
|
||||
{ name: "天", ename: "day" },
|
||||
{ name: "周", ename: "week" },
|
||||
{ name: "月", ename: "month" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
const config = {
|
||||
header: ["序号", "报警时间", "报警设备", "报警内容"],
|
||||
headerHeight: 36,
|
||||
rowNum: 6,
|
||||
align: ["center", "left", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [80, 137, 137, 137],
|
||||
data: []
|
||||
};
|
||||
// 报警数据
|
||||
let arr:any = []
|
||||
let sumAlarm = 0
|
||||
// @ts-ignore
|
||||
if (data.alarms && data.alarms.length > 0) {
|
||||
// @ts-ignore
|
||||
sumAlarm = data.alarms.length
|
||||
// @ts-ignore
|
||||
data.alarms.map((item,index) => {
|
||||
let arrInner = []
|
||||
arrInner.push(
|
||||
index+1,
|
||||
moment(item.recTime).format("YYYY/MM/DD HH:mm"),
|
||||
item.name,
|
||||
item.status === '故障'?"<span style='color:#FF1E1E'>故障</span>":"<span style='color:#FFB40F'>离线</span>",
|
||||
);
|
||||
arr.push(arrInner)
|
||||
});
|
||||
}
|
||||
config.data = arr
|
||||
// 产线成品率
|
||||
// @ts-ignore
|
||||
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
|
||||
// @ts-ignore
|
||||
let keys = Object.keys(data.todayProductionRates)
|
||||
// @ts-ignore
|
||||
data.todayProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.day.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
name: "",
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
symbolSize: 4,
|
||||
data:[]
|
||||
}
|
||||
// @ts-ignore
|
||||
obj.name = data.todayProductionRates[item][0].lineName
|
||||
// @ts-ignore
|
||||
data.todayProductionRates[item].map((subItem,index)=>{
|
||||
// @ts-ignore
|
||||
obj.data.push(subItem.passRate)
|
||||
})
|
||||
dataSource.day.series.push(obj)
|
||||
})
|
||||
}else{
|
||||
dataSource.day.xData = []
|
||||
dataSource.day.series = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.weekProductionRates && Object.keys(data.weekProductionRates).length > 0) {
|
||||
// @ts-ignore
|
||||
let keys = Object.keys(data.weekProductionRates)
|
||||
// @ts-ignore
|
||||
data.weekProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.week.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
name: "",
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
symbolSize: 4,
|
||||
data:[]
|
||||
}
|
||||
// @ts-ignore
|
||||
obj.name = data.weekProductionRates[item][0].lineName
|
||||
// @ts-ignore
|
||||
data.weekProductionRates[item].map((subItem,index)=>{
|
||||
// @ts-ignore
|
||||
obj.data.push(subItem.passRate)
|
||||
})
|
||||
dataSource.week.series.push(obj)
|
||||
})
|
||||
}else{
|
||||
dataSource.week.xData = []
|
||||
dataSource.week.series = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.monthProductionRates && Object.keys(data.monthProductionRates).length > 0) {
|
||||
// @ts-ignore
|
||||
let keys = Object.keys(data.monthProductionRates)
|
||||
// @ts-ignore
|
||||
data.monthProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.month.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
name: "",
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
symbolSize: 4,
|
||||
data:[]
|
||||
}
|
||||
// @ts-ignore
|
||||
obj.name = data.monthProductionRates[item][0].lineName
|
||||
// @ts-ignore
|
||||
data.monthProductionRates[item].map((subItem,index)=>{
|
||||
// @ts-ignore
|
||||
obj.data.push(subItem.passRate)
|
||||
})
|
||||
dataSource.month.series.push(obj)
|
||||
})
|
||||
}else{
|
||||
dataSource.month.xData = []
|
||||
dataSource.month.series = []
|
||||
}
|
||||
let chartData = (dataSource as { [key: string]: any })[activeName];
|
||||
console.log('???????????',chartData)
|
||||
const options = getOptions(chartData);
|
||||
return (
|
||||
<div className="center_down flex-row">
|
||||
<div className="center_down_inner flex-col left-box">
|
||||
<TitleBox title={"center_down_left"} />
|
||||
<span className="alarm_num_title">— 报警总数 —</span>
|
||||
<div className="alarm_num">{sumAlarm}</div>
|
||||
<div style={{ padding: 10, height: "270px" }}>
|
||||
{arr.length>0?<ScrollBoard
|
||||
config={config}
|
||||
style={{ width: "492px", height: "250px" }}
|
||||
/>:(<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>)}
|
||||
</div>
|
||||
</div>
|
||||
{/* 产线成品率 */}
|
||||
<div className="center_down_inner flex-col right_box">
|
||||
<TitleBox title={"center_down_right"} />
|
||||
<div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
{chartData.xData.length>0 && (
|
||||
<div className="chart_box">
|
||||
{<ReactECharts option={options} style={{ height: "100%" }} />}
|
||||
</div>
|
||||
)}
|
||||
{chartData.xData.length==0 && (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "120px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default CenterDown;
|
||||
10
src/page/LinePage2-1/Center/CenterUp.tsx
Normal file
10
src/page/LinePage2-1/Center/CenterUp.tsx
Normal file
@ -0,0 +1,10 @@
|
||||
import LinePageBabylon from "../../../babylonjs/LinePageBabylon";
|
||||
function CenterUp() {
|
||||
const lineID = "2-1"
|
||||
return (
|
||||
<div className="center_up">
|
||||
<LinePageBabylon modelPath={`Line${lineID}`} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default CenterUp;
|
||||
12
src/page/LinePage2-1/Center/index.tsx
Normal file
12
src/page/LinePage2-1/Center/index.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import CenterDown from "./CenterDown";
|
||||
import CenterUp from "./CenterUp";
|
||||
|
||||
function Center() {
|
||||
return (
|
||||
<div className="group_center flex-col">
|
||||
<CenterUp />
|
||||
<CenterDown />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default Center;
|
||||
19
src/page/LinePage2-1/Component/SwitchButton/index.css
Normal file
19
src/page/LinePage2-1/Component/SwitchButton/index.css
Normal file
@ -0,0 +1,19 @@
|
||||
.switch-button {
|
||||
height: 33px;
|
||||
}
|
||||
.switch-button button {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
padding: 4px 10px;
|
||||
background-color: rgba(49, 135, 140, 0.3);
|
||||
cursor: pointer;
|
||||
}
|
||||
.switch-button button:first-child {
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
.switch-button button:last-child {
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
.switch-button button.active {
|
||||
background-color: rgba(86, 244, 231, 0.7);
|
||||
}
|
||||
65
src/page/LinePage2-1/Component/SwitchButton/index.tsx
Normal file
65
src/page/LinePage2-1/Component/SwitchButton/index.tsx
Normal file
@ -0,0 +1,65 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import "./index.css";
|
||||
interface Name {
|
||||
name: string;
|
||||
ename: string;
|
||||
}
|
||||
interface nameListProps {
|
||||
nameList: Name[];
|
||||
onChange: (value: string) => void;
|
||||
}
|
||||
function createActiveNameUpdater(nameList: any, activeName: string) {
|
||||
let activeIndex = nameList.findIndex((obj: any) => obj.name === activeName);
|
||||
|
||||
return function updateActiveName() {
|
||||
activeIndex = (activeIndex + 1) % nameList.length;
|
||||
return nameList[activeIndex].ename;
|
||||
};
|
||||
}
|
||||
function SwitchButton(props: nameListProps) {
|
||||
const [activeName, setActiveName] = useState(props.nameList[0].ename);
|
||||
const [timerId, setTimerId] = useState<any>(null);
|
||||
let updateActiveName = createActiveNameUpdater(props.nameList, activeName);
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
let active = updateActiveName();
|
||||
setActiveName(active);
|
||||
props.onChange(active);
|
||||
}, 60000);
|
||||
setTimerId(timer);
|
||||
return () => {
|
||||
if (timerId !== null) {
|
||||
clearInterval(timerId);
|
||||
}
|
||||
};
|
||||
}, [props.nameList.length]);
|
||||
const btnClick = (ename: string) => {
|
||||
if (timerId !== null) {
|
||||
clearInterval(timerId);
|
||||
}
|
||||
setActiveName(ename);
|
||||
props.onChange(ename); // 通知父组件
|
||||
const newTimer = setInterval(() => {
|
||||
let active = updateActiveName();
|
||||
setActiveName(active);
|
||||
props.onChange(active);
|
||||
}, 60000);
|
||||
setTimerId(newTimer);
|
||||
};
|
||||
return (
|
||||
<div className="switch-button">
|
||||
{props.nameList.map((item, index) => {
|
||||
return (
|
||||
<button
|
||||
key={item.ename}
|
||||
className={activeName === item.ename ? "active" : ""}
|
||||
onClick={() => btnClick(item.ename)}
|
||||
>
|
||||
{item.name}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default SwitchButton;
|
||||
13
src/page/LinePage2-1/Component/TitleBox/index.css
Normal file
13
src/page/LinePage2-1/Component/TitleBox/index.css
Normal file
@ -0,0 +1,13 @@
|
||||
.title_box {
|
||||
font-size: 24px;
|
||||
color: #52fff1;
|
||||
padding: 10px 0 0 15px;
|
||||
}
|
||||
.title_box img {
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
vertical-align: bottom;
|
||||
margin-right: 3px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
53
src/page/LinePage2-1/Component/TitleBox/index.tsx
Normal file
53
src/page/LinePage2-1/Component/TitleBox/index.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import Defect from "./../../assets/icon/defect.png";
|
||||
import Alarm from "./../../assets/icon/alarm.png";
|
||||
import Finished from "./../../assets/icon/finished.png";
|
||||
import InputAndOutput from "./../../assets/icon/inputAndOutput.png";
|
||||
import Num from "./../../assets/icon/num.png";
|
||||
import Record from "./../../assets/icon/record.png";
|
||||
import "./index.css";
|
||||
interface titleProps {
|
||||
title: string;
|
||||
}
|
||||
function TitleBox(props: titleProps) {
|
||||
const filteredTitles = () => {
|
||||
switch (props.title) {
|
||||
case "left_up":
|
||||
return {
|
||||
img: Defect,
|
||||
title: "产线报废汇总",
|
||||
};
|
||||
case "left_down":
|
||||
return {
|
||||
img: Record,
|
||||
title: "当前产线报废情况",
|
||||
};
|
||||
case "center_down_left":
|
||||
return {
|
||||
img: Alarm,
|
||||
title: "异常报警",
|
||||
};
|
||||
case "center_down_right":
|
||||
return {
|
||||
img: Finished,
|
||||
title: "产线成品率",
|
||||
};
|
||||
case "right_up":
|
||||
return {
|
||||
img: Num,
|
||||
title: "各产线总投入和产出",
|
||||
};
|
||||
default:
|
||||
return {
|
||||
img: InputAndOutput,
|
||||
title: "当前产线投入和产出",
|
||||
};
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="title_box">
|
||||
<img src={filteredTitles().img} alt="title" />
|
||||
<span>{filteredTitles().title}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default TitleBox;
|
||||
245
src/page/LinePage2-1/Left/LeftDown.tsx
Normal file
245
src/page/LinePage2-1/Left/LeftDown.tsx
Normal file
@ -0,0 +1,245 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import { useState } from "react";
|
||||
import getOptions from "../../Component/BarChart/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine2Before} from "./../../../store/LinePageSlice"
|
||||
function LeftDown() {
|
||||
const data = useAppSelector(selectLine2Before);
|
||||
// console.log('页面数据：',data)
|
||||
const nameList = [
|
||||
{ name: "表单", ename: "table" },
|
||||
{ name: "柱状", ename: "chart" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
const configDay = {
|
||||
header: ["序号", "工序类型", "报废数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 4,
|
||||
align: ["center", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
data: [
|
||||
["1", "磨边后", 224],
|
||||
["2", "包装1", 322],
|
||||
["3", "包装2", 66],
|
||||
],
|
||||
};
|
||||
const configWeek = {
|
||||
header: ["序号", "工序类型", "报废数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 4,
|
||||
align: ["center", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
data: [
|
||||
["1", "磨边后", 1119],
|
||||
["2", "包装1", 1798],
|
||||
["3", "包装2", 435],
|
||||
],
|
||||
};
|
||||
const configMonth = {
|
||||
header: ["序号", "工序类型", "报废数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 4,
|
||||
align: ["center", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
data: [
|
||||
["1", "磨边后", 5004],
|
||||
["2", "包装1", 9122],
|
||||
["3", "包装2", 1924],
|
||||
],
|
||||
};
|
||||
const color1 = ["#9DD5FF", "#1295FF"];
|
||||
const color2 = ["#85F6E9", "#2EC6B4"];
|
||||
// @ts-ignore
|
||||
let xData: string[] = data.scrapBars
|
||||
let dataProps1: number[] = [];
|
||||
let dataProps2: number[] = [];
|
||||
let dataProps3: number[] = [];
|
||||
let arr1: any = [];
|
||||
let arr2: any = [];
|
||||
let arr3: any = [];
|
||||
// @ts-ignore
|
||||
if (data.todayProductionScraps && data.todayProductionScraps.length > 0) {
|
||||
// @ts-ignore
|
||||
data.todayProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arr1.push(arrInner);
|
||||
dataProps1.push(item.scrapNum);
|
||||
})
|
||||
}else{
|
||||
dataProps1 = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.weekProductionScraps && data.weekProductionScraps.length > 0) {
|
||||
// @ts-ignore
|
||||
data.weekProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arr2.push(arrInner);
|
||||
dataProps2.push(item.scrapNum);
|
||||
})
|
||||
}else{
|
||||
dataProps2 = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.monthProductionScraps && data.monthProductionScraps.length > 0) {
|
||||
// @ts-ignore
|
||||
data.monthProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arr3.push(arrInner);
|
||||
dataProps3.push(item.scrapNum);
|
||||
})
|
||||
}else{
|
||||
dataProps3 = []
|
||||
}
|
||||
configDay.data = arr1;
|
||||
configWeek.data = arr2;
|
||||
configMonth.data = arr3;
|
||||
const options1 = getOptions(dataProps1,xData, color1);
|
||||
const options2 = getOptions(dataProps2,xData, color2);
|
||||
const options3 = getOptions(dataProps3,xData, color1);
|
||||
return (
|
||||
<div className="left_down">
|
||||
<TitleBox title={"left_down"} />
|
||||
<div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
<div style={{ padding: "10px", height: "555px" }}>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">当天</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="left_down_content">
|
||||
{activeName === "table" ? (
|
||||
arr1.length > 0 ? <ScrollBoard
|
||||
config={configDay}
|
||||
style={{ width: "380px", height: "150px" }}
|
||||
/>:(<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>)
|
||||
) : dataProps1.length>0 ? (
|
||||
<ReactECharts option={options1} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">本周</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="left_down_content">
|
||||
{activeName === "table" ? (
|
||||
arr2.length > 0 ? <ScrollBoard
|
||||
config={configWeek}
|
||||
style={{ width: "380px", height: "150px" }}
|
||||
/>:(<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>)
|
||||
) : dataProps2.length>0 ? (
|
||||
<ReactECharts option={options2} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">本月</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="left_down_content">
|
||||
{activeName === "table" ? (
|
||||
arr3.length > 0 ? <ScrollBoard
|
||||
config={configMonth}
|
||||
style={{ width: "380px", height: "150px" }}
|
||||
/>:(<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>)
|
||||
) : dataProps3.length>0 ? (
|
||||
<ReactECharts option={options3} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default LeftDown;
|
||||
228
src/page/LinePage2-1/Left/LeftUp.tsx
Normal file
228
src/page/LinePage2-1/Left/LeftUp.tsx
Normal file
@ -0,0 +1,228 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
import getOptions from "../../Component/SummaryBarChart/chart.config";
|
||||
import { useState } from "react";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine2Before} from "./../../../store/LinePageSlice"
|
||||
function LeftUp() {
|
||||
const data = useAppSelector(selectLine2Before);
|
||||
// 假数据
|
||||
const dataSource = {
|
||||
day: {
|
||||
xData: [],
|
||||
series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
|
||||
},
|
||||
week: {
|
||||
xData: [],
|
||||
series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
|
||||
},
|
||||
month: {
|
||||
xData: [],
|
||||
series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
|
||||
},
|
||||
};
|
||||
const nameList = [
|
||||
{ name: "天", ename: "day" },
|
||||
{ name: "周", ename: "week" },
|
||||
{ name: "月", ename: "month" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
let chartData = (dataSource as { [key: string]: any })[activeName];
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
// @ts-ignore
|
||||
if (data.todayAllProductionScraps && Object.keys(data.todayAllProductionScraps).length > 0) {
|
||||
let sum: number[] = [];
|
||||
// 生成obj
|
||||
// @ts-ignore
|
||||
data.scrapBars.map((item,index) => {
|
||||
let obj = {
|
||||
data: [],
|
||||
type: "bar",
|
||||
stack: "a",
|
||||
name: item,
|
||||
barWidth: 14,
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
color: "inherit",
|
||||
},
|
||||
}
|
||||
dataSource.day.series.push(obj)
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.day.xData = Object.keys(data.todayAllProductionScraps)
|
||||
dataSource.day.xData.map((item,index)=>{
|
||||
let sumIner = 0
|
||||
// @ts-ignore
|
||||
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.day.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
}
|
||||
})
|
||||
})
|
||||
sum.push(sumIner)
|
||||
})
|
||||
dataSource.day.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
stack: "a",
|
||||
name: "",
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#fff",
|
||||
formatter: function (params: any) {
|
||||
return sum[params.dataIndex];
|
||||
},
|
||||
},
|
||||
})
|
||||
}else{
|
||||
dataSource.day.xData = []
|
||||
dataSource.day.series = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.weekAllProductionScraps && Object.keys(data.weekAllProductionScraps).length > 0) {
|
||||
let sum: number[] = [];
|
||||
// 生成obj
|
||||
// @ts-ignore
|
||||
data.scrapBars.map((item,index) => {
|
||||
let obj = {
|
||||
data: [],
|
||||
type: "bar",
|
||||
stack: "a",
|
||||
name: item,
|
||||
barWidth: 14,
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
color: "inherit",
|
||||
},
|
||||
}
|
||||
dataSource.week.series.push(obj)
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.week.xData = Object.keys(data.weekAllProductionScraps)
|
||||
dataSource.week.xData.map((item,index)=>{
|
||||
let sumIner = 0
|
||||
// @ts-ignore
|
||||
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.week.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
}
|
||||
})
|
||||
})
|
||||
sum.push(sumIner)
|
||||
})
|
||||
dataSource.week.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
stack: "a",
|
||||
name: "",
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#fff",
|
||||
formatter: function (params: any) {
|
||||
return sum[params.dataIndex];
|
||||
},
|
||||
},
|
||||
})
|
||||
}else{
|
||||
dataSource.week.xData = []
|
||||
dataSource.week.series = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.monthAllProductionScraps && Object.keys(data.monthAllProductionScraps).length > 0) {
|
||||
let sum: number[] = [];
|
||||
// 生成obj
|
||||
// @ts-ignore
|
||||
data.scrapBars.map((item,index) => {
|
||||
let obj = {
|
||||
data: [],
|
||||
type: "bar",
|
||||
stack: "a",
|
||||
name: item,
|
||||
barWidth: 14,
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
color: "inherit",
|
||||
},
|
||||
}
|
||||
dataSource.month.series.push(obj)
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.month.xData = Object.keys(data.monthAllProductionScraps)
|
||||
dataSource.month.xData.map((item,index)=>{
|
||||
let sumIner = 0
|
||||
// @ts-ignore
|
||||
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.month.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
}
|
||||
})
|
||||
})
|
||||
sum.push(sumIner)
|
||||
})
|
||||
dataSource.month.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
stack: "a",
|
||||
name: "",
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#fff",
|
||||
formatter: function (params: any) {
|
||||
return sum[params.dataIndex];
|
||||
},
|
||||
},
|
||||
})
|
||||
}else{
|
||||
dataSource.month.xData = []
|
||||
dataSource.month.series = []
|
||||
}
|
||||
const options = getOptions(chartData);
|
||||
return (
|
||||
<div className="left_up">
|
||||
<TitleBox title={"left_up"} />
|
||||
<div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
{// @ts-ignore
|
||||
dataSource[activeName].xData.length>0 ? (
|
||||
<div className="left_up_chart">
|
||||
{<ReactECharts option={options} style={{ height: "100%" }} />}
|
||||
</div>
|
||||
):(
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "72px",
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default LeftUp;
|
||||
11
src/page/LinePage2-1/Left/index.tsx
Normal file
11
src/page/LinePage2-1/Left/index.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import LeftUp from "./LeftUp";
|
||||
import LeftDown from "./LeftDown";
|
||||
function Left() {
|
||||
return (
|
||||
<div className="group_left flex-col">
|
||||
<LeftUp />
|
||||
<LeftDown />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default Left;
|
||||
273
src/page/LinePage2-1/Right/RightDown.tsx
Normal file
273
src/page/LinePage2-1/Right/RightDown.tsx
Normal file
@ -0,0 +1,273 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChartRight/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine2Before} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
function RightDown() {
|
||||
const data = useAppSelector(selectLine2Before);
|
||||
// console.log('页面数据：',data)
|
||||
// 假数据
|
||||
let tempData = [
|
||||
{
|
||||
type: "day",
|
||||
data: {
|
||||
time: [] as string[],
|
||||
input: [] as number[],
|
||||
output: [] as number[],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "week",
|
||||
data: {
|
||||
time: [] as string[],
|
||||
input: [] as number[],
|
||||
output: [] as number[],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "month",
|
||||
data: {
|
||||
time: [] as string[],
|
||||
input: [] as number[],
|
||||
output: [] as number[],
|
||||
},
|
||||
},
|
||||
];
|
||||
const nameList = [
|
||||
{ name: "表单", ename: "table" },
|
||||
{ name: "折线", ename: "chart" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
const configDay = {
|
||||
header: ["时间", "投入数量", "产出数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 5,
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [120, 130, 130],
|
||||
data: [],
|
||||
};
|
||||
const configWeek = {
|
||||
header: ["时间", "投入数量", "产出数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 5,
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [120, 130, 130],
|
||||
data: [],
|
||||
};
|
||||
const configMonth = {
|
||||
header: ["时间", "投入数量", "产出数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 5,
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [120, 130, 130],
|
||||
data: [],
|
||||
};
|
||||
let arr1: any = [];
|
||||
let arr2: any = [];
|
||||
let arr3: any = [];
|
||||
// @ts-ignore
|
||||
if (data.todayProductionDets && data.todayProductionDets.length > 0) {
|
||||
// @ts-ignore
|
||||
data.todayProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
|
||||
arr1.push(arrInner);
|
||||
tempData[0].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[0].data.input.push(item.inputNum);
|
||||
tempData[0].data.output.push(item.outputNum);
|
||||
})
|
||||
}else{
|
||||
tempData[0].data.time = []
|
||||
tempData[0].data.input = []
|
||||
tempData[0].data.output = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.weekProductionDets && data.weekProductionDets.length > 0) {
|
||||
// @ts-ignore
|
||||
data.weekProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr2.push(arrInner);
|
||||
tempData[1].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.input.push(item.inputNum);
|
||||
tempData[1].data.output.push(item.outputNum);
|
||||
})
|
||||
}else{
|
||||
tempData[1].data.time = []
|
||||
tempData[1].data.input = []
|
||||
tempData[1].data.output = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.monthProductionDets && data.monthProductionDets.length > 0) {
|
||||
// @ts-ignore
|
||||
data.monthProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr3.push(arrInner);
|
||||
tempData[2].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.input.push(item.inputNum);
|
||||
tempData[2].data.output.push(item.outputNum);
|
||||
})
|
||||
}else{
|
||||
tempData[2].data.time = []
|
||||
tempData[2].data.input = []
|
||||
tempData[2].data.output = []
|
||||
}
|
||||
configDay.data = arr1;
|
||||
configWeek.data = arr2;
|
||||
configMonth.data = arr3;
|
||||
|
||||
const chartData1 = tempData[0].data;
|
||||
const chartData2 = tempData[1].data;
|
||||
const chartData3 = tempData[2].data;
|
||||
const options1 = getOptions(chartData1);
|
||||
const options2 = getOptions(chartData2);
|
||||
const options3 = getOptions(chartData3);
|
||||
return (
|
||||
<div className="right_down">
|
||||
<TitleBox title={"right_down"} />
|
||||
<div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
<div style={{ padding: "10px", height: "628px" }}>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">当天</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="right_down_content">
|
||||
{activeName === "table" ? (
|
||||
arr1.length>0?<ScrollBoard
|
||||
config={configDay}
|
||||
style={{ width: "380px", height: "180px" }}
|
||||
/>:(
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)
|
||||
) : tempData[0].data.time.length>0 ? (
|
||||
<ReactECharts option={options1} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">本周</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="right_down_content">
|
||||
{activeName === "table" ? (
|
||||
arr2.length>0?<ScrollBoard
|
||||
config={configWeek}
|
||||
style={{ width: "380px", height: "180px" }}
|
||||
/>:(
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)
|
||||
) : tempData[1].data.time.length>0 ? (
|
||||
<ReactECharts option={options2} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">本月</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="right_down_content">
|
||||
{activeName === "table" ? (
|
||||
arr3.length>0?<ScrollBoard
|
||||
config={configMonth}
|
||||
style={{ width: "380px", height: "180px" }}
|
||||
/>:(
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)
|
||||
) : tempData[2].data.time.length>0 ? (
|
||||
<ReactECharts option={options3} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default RightDown;
|
||||
52
src/page/LinePage2-1/Right/RightUp.tsx
Normal file
52
src/page/LinePage2-1/Right/RightUp.tsx
Normal file
@ -0,0 +1,52 @@
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine2Before} from "./../../../store/LinePageSlice"
|
||||
function RightUp() {
|
||||
const data = useAppSelector(selectLine2Before);
|
||||
const config = {
|
||||
header: ["序号", "产线", "上片数据量", "成品下片数量"],
|
||||
headerHeight: 32,
|
||||
rowNum: 5,
|
||||
align: ["center", "left", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [70, 90, 106, 114],
|
||||
data: [],
|
||||
};
|
||||
let arr:any = []
|
||||
// @ts-ignore
|
||||
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
|
||||
// @ts-ignore
|
||||
data.sumProductionDets.map((item, index) => {
|
||||
let arrInner = []
|
||||
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
|
||||
arr.push(arrInner)
|
||||
})
|
||||
}
|
||||
config.data = arr
|
||||
return (
|
||||
<div className="right_up">
|
||||
<TitleBox title={"right_up"} />
|
||||
<div style={{ padding: "10px", height: "213px" }}>
|
||||
{arr.length>0?<ScrollBoard
|
||||
config={config}
|
||||
style={{ width: "380px", height: "193px" }}
|
||||
/>:(<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default RightUp;
|
||||
12
src/page/LinePage2-1/Right/index.tsx
Normal file
12
src/page/LinePage2-1/Right/index.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import RightDown from "./RightDown";
|
||||
import RightUp from "./RightUp";
|
||||
|
||||
function Right() {
|
||||
return (
|
||||
<div className="group_right flex-col">
|
||||
<RightUp />
|
||||
<RightDown />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default Right;
|
||||
14
src/page/LinePage2-1/TopP.tsx
Normal file
14
src/page/LinePage2-1/TopP.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import '../../lanhuapp/common.css';
|
||||
import "./index.css";
|
||||
|
||||
function TopP() {
|
||||
return (
|
||||
<div className="flex-row">
|
||||
<div className="block_top flex-row">
|
||||
<div className='block_top_title'></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TopP;
|
||||
BIN
src/page/LinePage2-1/assets/icon/alarm.png
Normal file
BIN
src/page/LinePage2-1/assets/icon/alarm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/page/LinePage2-1/assets/icon/defect.png
Normal file
BIN
src/page/LinePage2-1/assets/icon/defect.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/page/LinePage2-1/assets/icon/finished.png
Normal file
BIN
src/page/LinePage2-1/assets/icon/finished.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/page/LinePage2-1/assets/icon/g.png
Normal file
BIN
src/page/LinePage2-1/assets/icon/g.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/page/LinePage2-1/assets/icon/inputAndOutput.png
Normal file
BIN
src/page/LinePage2-1/assets/icon/inputAndOutput.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
src/page/LinePage2-1/assets/icon/num.png
Normal file
BIN
src/page/LinePage2-1/assets/icon/num.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/page/LinePage2-1/assets/icon/r.png
Normal file
BIN
src/page/LinePage2-1/assets/icon/r.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/page/LinePage2-1/assets/icon/record.png
Normal file
BIN
src/page/LinePage2-1/assets/icon/record.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/page/LinePage2-1/assets/icon/y.png
Normal file
BIN
src/page/LinePage2-1/assets/icon/y.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
264
src/page/LinePage2-1/index.css
Normal file
264
src/page/LinePage2-1/index.css
Normal file
@ -0,0 +1,264 @@
|
||||
/* 顶部 */
|
||||
.block_top {
|
||||
width: 1920px;
|
||||
height: 94px;
|
||||
background: url(/public/svg/topback.svg) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.block_top_title {
|
||||
width: 651px;
|
||||
height: 77px;
|
||||
background: url(/public/png/topTiltle.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top: 18px;
|
||||
}
|
||||
/* 中部 */
|
||||
.block_bottom {
|
||||
width: 1920px;
|
||||
height: 966px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.group_left {
|
||||
width: 402px;
|
||||
height: 966px;
|
||||
margin: 0 0 0 24px;
|
||||
}
|
||||
|
||||
.group_center {
|
||||
width: 1041px;
|
||||
height: 966px;
|
||||
margin: 0 0 0 15px;
|
||||
}
|
||||
|
||||
.group_right {
|
||||
width: 401px;
|
||||
height: 966px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.left_up {
|
||||
width: 402px;
|
||||
height: 332px;
|
||||
background: url(../../../public/png/rect/lp_left_up.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.left_down {
|
||||
width: 402px;
|
||||
height: 599px;
|
||||
background: url(../../../public/png/rect/lp_left_down.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
margin-top: 14px;
|
||||
position: relative;
|
||||
}
|
||||
.center_up {
|
||||
width: 1041px;
|
||||
height: 562px;
|
||||
background: url(../../../public/png/rect/lp_center_up.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.center_down {
|
||||
width: 1041px;
|
||||
height: 368px;
|
||||
margin-top: 17px;
|
||||
}
|
||||
.center_down_inner {
|
||||
width: 513px;
|
||||
height: 366px;
|
||||
background: url(../../../public/png/rect/lp_center_down.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.center_down .left-box {
|
||||
margin-right: 15px;
|
||||
position: relative;
|
||||
}
|
||||
.center_down .left-box .alarm_num_title {
|
||||
position: absolute;
|
||||
left: 220px;
|
||||
top: 22px;
|
||||
font-size: 13px;
|
||||
letter-spacing: 3px;
|
||||
color: #fff;
|
||||
}
|
||||
.center_down .left-box .alarm_num {
|
||||
color: #52fff1;
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
}
|
||||
.center_down .right_box .chart_box {
|
||||
width: 100%;
|
||||
height: 310px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.right_up {
|
||||
width: 401px;
|
||||
height: 257px;
|
||||
background: url(../../../public/png/rect/lp_right_up.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
.right_down {
|
||||
width: 401px;
|
||||
height: 673px;
|
||||
background: url(../../../public/png/rect/lp_right_down.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
margin-top: 14px;
|
||||
position: relative;
|
||||
}
|
||||
.left_up_switch {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 12px;
|
||||
}
|
||||
.left_up_chart {
|
||||
height: 275px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
/* 左侧 */
|
||||
.left_down_title {
|
||||
height: 18px;
|
||||
justify-content: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.left_down_box1 {
|
||||
width: 56px;
|
||||
height: 13px;
|
||||
background: url(/public/png/leftbar.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.left_down_box2 {
|
||||
width: 56px;
|
||||
height: 13px;
|
||||
background: url(/public/png/rightbar.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 2px 0 0 0px;
|
||||
}
|
||||
.left_down_text {
|
||||
/*width: 40px;*/
|
||||
height: 18px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(1, 207, 204, 1);
|
||||
font-size: 18px;
|
||||
letter-spacing: 5px;
|
||||
font-family: PingFangSC-Regular;
|
||||
white-space: nowrap;
|
||||
line-height: 18px;
|
||||
margin-left: 18px;
|
||||
margin-right: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
.left_down_content {
|
||||
height: 160px;
|
||||
/* padding-bottom: 5px; */
|
||||
}
|
||||
.right_down_content {
|
||||
height: 185px;
|
||||
/* padding-bottom: 5px; */
|
||||
}
|
||||
/* 滚动表格部分 */
|
||||
.dv-scroll-board .header .header-item,
|
||||
.dv-scroll-board .rows .ceil {
|
||||
border-right: 1px solid #0d1728;
|
||||
}
|
||||
.dv-scroll-board .header .header-item:last-child,
|
||||
.dv-scroll-board .rows .ceil:last-child {
|
||||
border-right: none;
|
||||
border: none;
|
||||
}
|
||||
/* chart图部分 */
|
||||
.luoyang-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.luoyang-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
/* 三维页面部分 */
|
||||
.center_up .model_name {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
z-index: 1000;
|
||||
}
|
||||
.center_up .model_info {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
bottom: 0px;
|
||||
z-index: 1000;
|
||||
width: 841px;
|
||||
height: 62px;
|
||||
background: url(/public/png/lp/line_part.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.center_up .model_info .reset_btn {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 40px;
|
||||
width: 140px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.center_up .model_info .title {
|
||||
display: inline-block;
|
||||
width: 361px;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
letter-spacing: 5px;
|
||||
position: absolute;
|
||||
left: 241px;
|
||||
bottom: 10px;
|
||||
}
|
||||
.center_up .eq_detail_info {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 1002;
|
||||
width: 240px;
|
||||
height: 110px;
|
||||
background: url(/public/png/lp/eq_msg_detail.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
padding: 15px 0 0 15px;
|
||||
}
|
||||
.center_up .eq_detail_info .left_name {
|
||||
display: inline-block;
|
||||
width: 95px;
|
||||
height: 28px;
|
||||
text-align: right;
|
||||
font-size: 18px;
|
||||
}
|
||||
.center_up .eq_detail_info .right_value {
|
||||
display: inline-block;
|
||||
height: 28px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.center_up .eq_info {
|
||||
position: absolute;
|
||||
z-index: 1002;
|
||||
background: url(/public/png/lp/eq_msg_always.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
.center_up .eq_info .eq_info_inner {
|
||||
height: 24px;
|
||||
font-size: 17px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
18
src/page/LinePage2-1/index.tsx
Normal file
18
src/page/LinePage2-1/index.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import React from "react";
|
||||
import TopP from "./TopP";
|
||||
import Left from "./Left";
|
||||
import Right from "./Right";
|
||||
import Center from "./Center";
|
||||
function LinePage() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TopP />
|
||||
<div className="block_bottom flex-row">
|
||||
<Left />
|
||||
<Center />
|
||||
<Right />
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
export default LinePage;
|
||||
214
src/page/LinePage2-2/Center/CenterDown.tsx
Normal file
214
src/page/LinePage2-2/Center/CenterDown.tsx
Normal file
@ -0,0 +1,214 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChart/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine2After} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
function CenterDown() {
|
||||
const data = useAppSelector(selectLine2After);
|
||||
// 假数据
|
||||
const dataSource = {
|
||||
day: {
|
||||
xData:[],
|
||||
series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
|
||||
},
|
||||
week: {
|
||||
xData:[],
|
||||
series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
|
||||
},
|
||||
month: {
|
||||
xData:[],
|
||||
series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
|
||||
},
|
||||
};
|
||||
const nameList = [
|
||||
{ name: "天", ename: "day" },
|
||||
{ name: "周", ename: "week" },
|
||||
{ name: "月", ename: "month" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
const config = {
|
||||
header: ["序号", "报警时间", "报警设备", "报警内容"],
|
||||
headerHeight: 36,
|
||||
rowNum: 6,
|
||||
align: ["center", "left", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [80, 137, 137, 137],
|
||||
data: []
|
||||
};
|
||||
// 报警数据
|
||||
let arr:any = []
|
||||
let sumAlarm = 0
|
||||
// @ts-ignore
|
||||
if (data.alarms && data.alarms.length > 0) {
|
||||
// @ts-ignore
|
||||
sumAlarm = data.alarms.length
|
||||
// @ts-ignore
|
||||
data.alarms.map((item,index) => {
|
||||
let arrInner = []
|
||||
arrInner.push(
|
||||
index+1,
|
||||
moment(item.recTime).format("YYYY/MM/DD HH:mm"),
|
||||
item.name,
|
||||
item.status === '故障'?"<span style='color:#FF1E1E'>故障</span>":"<span style='color:#FFB40F'>离线</span>",
|
||||
);
|
||||
arr.push(arrInner)
|
||||
});
|
||||
}
|
||||
config.data = arr
|
||||
// 产线成品率
|
||||
// @ts-ignore
|
||||
if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
|
||||
// @ts-ignore
|
||||
let keys = Object.keys(data.todayProductionRates)
|
||||
// @ts-ignore
|
||||
data.todayProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.day.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
name: "",
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
symbolSize: 4,
|
||||
data:[]
|
||||
}
|
||||
// @ts-ignore
|
||||
obj.name = data.todayProductionRates[item][0].lineName
|
||||
// @ts-ignore
|
||||
data.todayProductionRates[item].map((subItem,index)=>{
|
||||
// @ts-ignore
|
||||
obj.data.push(subItem.passRate)
|
||||
})
|
||||
dataSource.day.series.push(obj)
|
||||
})
|
||||
}else{
|
||||
dataSource.day.xData = []
|
||||
dataSource.day.series = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.weekProductionRates && Object.keys(data.weekProductionRates).length > 0) {
|
||||
// @ts-ignore
|
||||
let keys = Object.keys(data.weekProductionRates)
|
||||
// @ts-ignore
|
||||
data.weekProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.week.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
name: "",
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
symbolSize: 4,
|
||||
data:[]
|
||||
}
|
||||
// @ts-ignore
|
||||
obj.name = data.weekProductionRates[item][0].lineName
|
||||
// @ts-ignore
|
||||
data.weekProductionRates[item].map((subItem,index)=>{
|
||||
// @ts-ignore
|
||||
obj.data.push(subItem.passRate)
|
||||
})
|
||||
dataSource.week.series.push(obj)
|
||||
})
|
||||
}else{
|
||||
dataSource.week.xData = []
|
||||
dataSource.week.series = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.monthProductionRates && Object.keys(data.monthProductionRates).length > 0) {
|
||||
// @ts-ignore
|
||||
let keys = Object.keys(data.monthProductionRates)
|
||||
// @ts-ignore
|
||||
data.monthProductionRates[keys[0]].map((item,index)=>{
|
||||
// @ts-ignore
|
||||
dataSource.month.xData.push(moment(item.recTime).format("HH:mm"))
|
||||
})
|
||||
keys.map((item,index)=>{
|
||||
let obj = {
|
||||
name: "",
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
symbolSize: 4,
|
||||
data:[]
|
||||
}
|
||||
// @ts-ignore
|
||||
obj.name = data.monthProductionRates[item][0].lineName
|
||||
// @ts-ignore
|
||||
data.monthProductionRates[item].map((subItem,index)=>{
|
||||
// @ts-ignore
|
||||
obj.data.push(subItem.passRate)
|
||||
})
|
||||
dataSource.month.series.push(obj)
|
||||
})
|
||||
}else{
|
||||
dataSource.month.xData = []
|
||||
dataSource.month.series = []
|
||||
}
|
||||
let chartData = (dataSource as { [key: string]: any })[activeName];
|
||||
console.log('???????????',chartData)
|
||||
const options = getOptions(chartData);
|
||||
return (
|
||||
<div className="center_down flex-row">
|
||||
<div className="center_down_inner flex-col left-box">
|
||||
<TitleBox title={"center_down_left"} />
|
||||
<span className="alarm_num_title">— 报警总数 —</span>
|
||||
<div className="alarm_num">{sumAlarm}</div>
|
||||
<div style={{ padding: 10, height: "270px" }}>
|
||||
{arr.length>0?<ScrollBoard
|
||||
config={config}
|
||||
style={{ width: "492px", height: "250px" }}
|
||||
/>:(<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>)}
|
||||
</div>
|
||||
</div>
|
||||
{/* 产线成品率 */}
|
||||
<div className="center_down_inner flex-col right_box">
|
||||
<TitleBox title={"center_down_right"} />
|
||||
<div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
{chartData.xData.length>0 && (
|
||||
<div className="chart_box">
|
||||
{<ReactECharts option={options} style={{ height: "100%" }} />}
|
||||
</div>
|
||||
)}
|
||||
{chartData.xData.length==0 && (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "120px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default CenterDown;
|
||||
10
src/page/LinePage2-2/Center/CenterUp.tsx
Normal file
10
src/page/LinePage2-2/Center/CenterUp.tsx
Normal file
@ -0,0 +1,10 @@
|
||||
import LinePageBabylon from "../../../babylonjs/LinePageBabylon";
|
||||
function CenterUp() {
|
||||
const lineID = "2-2";
|
||||
return (
|
||||
<div className="center_up">
|
||||
<LinePageBabylon modelPath={`Line${lineID}`} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default CenterUp;
|
||||
12
src/page/LinePage2-2/Center/index.tsx
Normal file
12
src/page/LinePage2-2/Center/index.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import CenterDown from "./CenterDown";
|
||||
import CenterUp from "./CenterUp";
|
||||
|
||||
function Center() {
|
||||
return (
|
||||
<div className="group_center flex-col">
|
||||
<CenterUp />
|
||||
<CenterDown />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default Center;
|
||||
19
src/page/LinePage2-2/Component/SwitchButton/index.css
Normal file
19
src/page/LinePage2-2/Component/SwitchButton/index.css
Normal file
@ -0,0 +1,19 @@
|
||||
.switch-button {
|
||||
height: 33px;
|
||||
}
|
||||
.switch-button button {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
padding: 4px 10px;
|
||||
background-color: rgba(49, 135, 140, 0.3);
|
||||
cursor: pointer;
|
||||
}
|
||||
.switch-button button:first-child {
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
.switch-button button:last-child {
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
.switch-button button.active {
|
||||
background-color: rgba(86, 244, 231, 0.7);
|
||||
}
|
||||
65
src/page/LinePage2-2/Component/SwitchButton/index.tsx
Normal file
65
src/page/LinePage2-2/Component/SwitchButton/index.tsx
Normal file
@ -0,0 +1,65 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import "./index.css";
|
||||
interface Name {
|
||||
name: string;
|
||||
ename: string;
|
||||
}
|
||||
interface nameListProps {
|
||||
nameList: Name[];
|
||||
onChange: (value: string) => void;
|
||||
}
|
||||
function createActiveNameUpdater(nameList: any, activeName: string) {
|
||||
let activeIndex = nameList.findIndex((obj: any) => obj.name === activeName);
|
||||
|
||||
return function updateActiveName() {
|
||||
activeIndex = (activeIndex + 1) % nameList.length;
|
||||
return nameList[activeIndex].ename;
|
||||
};
|
||||
}
|
||||
function SwitchButton(props: nameListProps) {
|
||||
const [activeName, setActiveName] = useState(props.nameList[0].ename);
|
||||
const [timerId, setTimerId] = useState<any>(null);
|
||||
let updateActiveName = createActiveNameUpdater(props.nameList, activeName);
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
let active = updateActiveName();
|
||||
setActiveName(active);
|
||||
props.onChange(active);
|
||||
}, 60000);
|
||||
setTimerId(timer);
|
||||
return () => {
|
||||
if (timerId !== null) {
|
||||
clearInterval(timerId);
|
||||
}
|
||||
};
|
||||
}, [props.nameList.length]);
|
||||
const btnClick = (ename: string) => {
|
||||
if (timerId !== null) {
|
||||
clearInterval(timerId);
|
||||
}
|
||||
setActiveName(ename);
|
||||
props.onChange(ename); // 通知父组件
|
||||
const newTimer = setInterval(() => {
|
||||
let active = updateActiveName();
|
||||
setActiveName(active);
|
||||
props.onChange(active);
|
||||
}, 60000);
|
||||
setTimerId(newTimer);
|
||||
};
|
||||
return (
|
||||
<div className="switch-button">
|
||||
{props.nameList.map((item, index) => {
|
||||
return (
|
||||
<button
|
||||
key={item.ename}
|
||||
className={activeName === item.ename ? "active" : ""}
|
||||
onClick={() => btnClick(item.ename)}
|
||||
>
|
||||
{item.name}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default SwitchButton;
|
||||
13
src/page/LinePage2-2/Component/TitleBox/index.css
Normal file
13
src/page/LinePage2-2/Component/TitleBox/index.css
Normal file
@ -0,0 +1,13 @@
|
||||
.title_box {
|
||||
font-size: 24px;
|
||||
color: #52fff1;
|
||||
padding: 10px 0 0 15px;
|
||||
}
|
||||
.title_box img {
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
vertical-align: bottom;
|
||||
margin-right: 3px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
53
src/page/LinePage2-2/Component/TitleBox/index.tsx
Normal file
53
src/page/LinePage2-2/Component/TitleBox/index.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import Defect from "./../../assets/icon/defect.png";
|
||||
import Alarm from "./../../assets/icon/alarm.png";
|
||||
import Finished from "./../../assets/icon/finished.png";
|
||||
import InputAndOutput from "./../../assets/icon/inputAndOutput.png";
|
||||
import Num from "./../../assets/icon/num.png";
|
||||
import Record from "./../../assets/icon/record.png";
|
||||
import "./index.css";
|
||||
interface titleProps {
|
||||
title: string;
|
||||
}
|
||||
function TitleBox(props: titleProps) {
|
||||
const filteredTitles = () => {
|
||||
switch (props.title) {
|
||||
case "left_up":
|
||||
return {
|
||||
img: Defect,
|
||||
title: "产线报废汇总",
|
||||
};
|
||||
case "left_down":
|
||||
return {
|
||||
img: Record,
|
||||
title: "当前产线报废情况",
|
||||
};
|
||||
case "center_down_left":
|
||||
return {
|
||||
img: Alarm,
|
||||
title: "异常报警",
|
||||
};
|
||||
case "center_down_right":
|
||||
return {
|
||||
img: Finished,
|
||||
title: "产线成品率",
|
||||
};
|
||||
case "right_up":
|
||||
return {
|
||||
img: Num,
|
||||
title: "各产线总投入和产出",
|
||||
};
|
||||
default:
|
||||
return {
|
||||
img: InputAndOutput,
|
||||
title: "当前产线投入和产出",
|
||||
};
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="title_box">
|
||||
<img src={filteredTitles().img} alt="title" />
|
||||
<span>{filteredTitles().title}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default TitleBox;
|
||||
245
src/page/LinePage2-2/Left/LeftDown.tsx
Normal file
245
src/page/LinePage2-2/Left/LeftDown.tsx
Normal file
@ -0,0 +1,245 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import { useState } from "react";
|
||||
import getOptions from "../../Component/BarChart/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine2After} from "./../../../store/LinePageSlice"
|
||||
function LeftDown() {
|
||||
const data = useAppSelector(selectLine2After);
|
||||
// console.log('页面数据：',data)
|
||||
const nameList = [
|
||||
{ name: "表单", ename: "table" },
|
||||
{ name: "柱状", ename: "chart" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
const configDay = {
|
||||
header: ["序号", "工序类型", "报废数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 4,
|
||||
align: ["center", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
data: [
|
||||
["1", "磨边后", 224],
|
||||
["2", "包装1", 322],
|
||||
["3", "包装2", 66],
|
||||
],
|
||||
};
|
||||
const configWeek = {
|
||||
header: ["序号", "工序类型", "报废数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 4,
|
||||
align: ["center", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
data: [
|
||||
["1", "磨边后", 1119],
|
||||
["2", "包装1", 1798],
|
||||
["3", "包装2", 435],
|
||||
],
|
||||
};
|
||||
const configMonth = {
|
||||
header: ["序号", "工序类型", "报废数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 4,
|
||||
align: ["center", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [73, 117, 190],
|
||||
data: [
|
||||
["1", "磨边后", 5004],
|
||||
["2", "包装1", 9122],
|
||||
["3", "包装2", 1924],
|
||||
],
|
||||
};
|
||||
const color1 = ["#9DD5FF", "#1295FF"];
|
||||
const color2 = ["#85F6E9", "#2EC6B4"];
|
||||
// @ts-ignore
|
||||
let xData: string[] = data.scrapBars
|
||||
let dataProps1: number[] = [];
|
||||
let dataProps2: number[] = [];
|
||||
let dataProps3: number[] = [];
|
||||
let arr1: any = [];
|
||||
let arr2: any = [];
|
||||
let arr3: any = [];
|
||||
// @ts-ignore
|
||||
if (data.todayProductionScraps && data.todayProductionScraps.length > 0) {
|
||||
// @ts-ignore
|
||||
data.todayProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arr1.push(arrInner);
|
||||
dataProps1.push(item.scrapNum);
|
||||
})
|
||||
}else{
|
||||
dataProps1 = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.weekProductionScraps && data.weekProductionScraps.length > 0) {
|
||||
// @ts-ignore
|
||||
data.weekProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arr2.push(arrInner);
|
||||
dataProps2.push(item.scrapNum);
|
||||
})
|
||||
}else{
|
||||
dataProps2 = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.monthProductionScraps && data.monthProductionScraps.length > 0) {
|
||||
// @ts-ignore
|
||||
data.monthProductionScraps.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(index+1,item.sectionName,item.scrapNum);
|
||||
arr3.push(arrInner);
|
||||
dataProps3.push(item.scrapNum);
|
||||
})
|
||||
}else{
|
||||
dataProps3 = []
|
||||
}
|
||||
configDay.data = arr1;
|
||||
configWeek.data = arr2;
|
||||
configMonth.data = arr3;
|
||||
const options1 = getOptions(dataProps1,xData, color1);
|
||||
const options2 = getOptions(dataProps2,xData, color2);
|
||||
const options3 = getOptions(dataProps3,xData, color1);
|
||||
return (
|
||||
<div className="left_down">
|
||||
<TitleBox title={"left_down"} />
|
||||
<div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
<div style={{ padding: "10px", height: "555px" }}>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">当天</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="left_down_content">
|
||||
{activeName === "table" ? (
|
||||
arr1.length > 0 ? <ScrollBoard
|
||||
config={configDay}
|
||||
style={{ width: "380px", height: "150px" }}
|
||||
/>:(<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>)
|
||||
) : dataProps1.length>0 ? (
|
||||
<ReactECharts option={options1} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">本周</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="left_down_content">
|
||||
{activeName === "table" ? (
|
||||
arr2.length > 0 ? <ScrollBoard
|
||||
config={configWeek}
|
||||
style={{ width: "380px", height: "150px" }}
|
||||
/>:(<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>)
|
||||
) : dataProps2.length>0 ? (
|
||||
<ReactECharts option={options2} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">本月</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="left_down_content">
|
||||
{activeName === "table" ? (
|
||||
arr3.length > 0 ? <ScrollBoard
|
||||
config={configMonth}
|
||||
style={{ width: "380px", height: "150px" }}
|
||||
/>:(<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>)
|
||||
) : dataProps3.length>0 ? (
|
||||
<ReactECharts option={options3} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default LeftDown;
|
||||
228
src/page/LinePage2-2/Left/LeftUp.tsx
Normal file
228
src/page/LinePage2-2/Left/LeftUp.tsx
Normal file
@ -0,0 +1,228 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
import getOptions from "../../Component/SummaryBarChart/chart.config";
|
||||
import { useState } from "react";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine2After} from "./../../../store/LinePageSlice"
|
||||
function LeftUp() {
|
||||
const data = useAppSelector(selectLine2After);
|
||||
// 假数据
|
||||
const dataSource = {
|
||||
day: {
|
||||
xData: [],
|
||||
series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
|
||||
},
|
||||
week: {
|
||||
xData: [],
|
||||
series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
|
||||
},
|
||||
month: {
|
||||
xData: [],
|
||||
series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
|
||||
},
|
||||
};
|
||||
const nameList = [
|
||||
{ name: "天", ename: "day" },
|
||||
{ name: "周", ename: "week" },
|
||||
{ name: "月", ename: "month" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
let chartData = (dataSource as { [key: string]: any })[activeName];
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
// @ts-ignore
|
||||
if (data.todayAllProductionScraps && Object.keys(data.todayAllProductionScraps).length > 0) {
|
||||
let sum: number[] = [];
|
||||
// 生成obj
|
||||
// @ts-ignore
|
||||
data.scrapBars.map((item,index) => {
|
||||
let obj = {
|
||||
data: [],
|
||||
type: "bar",
|
||||
stack: "a",
|
||||
name: item,
|
||||
barWidth: 14,
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
color: "inherit",
|
||||
},
|
||||
}
|
||||
dataSource.day.series.push(obj)
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.day.xData = Object.keys(data.todayAllProductionScraps)
|
||||
dataSource.day.xData.map((item,index)=>{
|
||||
let sumIner = 0
|
||||
// @ts-ignore
|
||||
data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.day.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
}
|
||||
})
|
||||
})
|
||||
sum.push(sumIner)
|
||||
})
|
||||
dataSource.day.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
stack: "a",
|
||||
name: "",
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#fff",
|
||||
formatter: function (params: any) {
|
||||
return sum[params.dataIndex];
|
||||
},
|
||||
},
|
||||
})
|
||||
}else{
|
||||
dataSource.day.xData = []
|
||||
dataSource.day.series = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.weekAllProductionScraps && Object.keys(data.weekAllProductionScraps).length > 0) {
|
||||
let sum: number[] = [];
|
||||
// 生成obj
|
||||
// @ts-ignore
|
||||
data.scrapBars.map((item,index) => {
|
||||
let obj = {
|
||||
data: [],
|
||||
type: "bar",
|
||||
stack: "a",
|
||||
name: item,
|
||||
barWidth: 14,
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
color: "inherit",
|
||||
},
|
||||
}
|
||||
dataSource.week.series.push(obj)
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.week.xData = Object.keys(data.weekAllProductionScraps)
|
||||
dataSource.week.xData.map((item,index)=>{
|
||||
let sumIner = 0
|
||||
// @ts-ignore
|
||||
data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.week.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
}
|
||||
})
|
||||
})
|
||||
sum.push(sumIner)
|
||||
})
|
||||
dataSource.week.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
stack: "a",
|
||||
name: "",
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#fff",
|
||||
formatter: function (params: any) {
|
||||
return sum[params.dataIndex];
|
||||
},
|
||||
},
|
||||
})
|
||||
}else{
|
||||
dataSource.week.xData = []
|
||||
dataSource.week.series = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.monthAllProductionScraps && Object.keys(data.monthAllProductionScraps).length > 0) {
|
||||
let sum: number[] = [];
|
||||
// 生成obj
|
||||
// @ts-ignore
|
||||
data.scrapBars.map((item,index) => {
|
||||
let obj = {
|
||||
data: [],
|
||||
type: "bar",
|
||||
stack: "a",
|
||||
name: item,
|
||||
barWidth: 14,
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
color: "inherit",
|
||||
},
|
||||
}
|
||||
dataSource.month.series.push(obj)
|
||||
})
|
||||
// @ts-ignore
|
||||
dataSource.month.xData = Object.keys(data.monthAllProductionScraps)
|
||||
dataSource.month.xData.map((item,index)=>{
|
||||
let sumIner = 0
|
||||
// @ts-ignore
|
||||
data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
|
||||
sumIner += itemInner.scrapNum
|
||||
dataSource.month.series.map((itemSeries,indexSeries)=>{
|
||||
// @ts-ignore
|
||||
if (itemSeries.name === itemInner.sectionName) {
|
||||
// @ts-ignore
|
||||
itemSeries.data.push(itemInner.scrapNum)
|
||||
}
|
||||
})
|
||||
})
|
||||
sum.push(sumIner)
|
||||
})
|
||||
dataSource.month.series.push({
|
||||
data: sum,
|
||||
type: "bar",
|
||||
stack: "a",
|
||||
name: "",
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#fff",
|
||||
formatter: function (params: any) {
|
||||
return sum[params.dataIndex];
|
||||
},
|
||||
},
|
||||
})
|
||||
}else{
|
||||
dataSource.month.xData = []
|
||||
dataSource.month.series = []
|
||||
}
|
||||
const options = getOptions(chartData);
|
||||
return (
|
||||
<div className="left_up">
|
||||
<TitleBox title={"left_up"} />
|
||||
<div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
{// @ts-ignore
|
||||
dataSource[activeName].xData.length>0 ? (
|
||||
<div className="left_up_chart">
|
||||
{<ReactECharts option={options} style={{ height: "100%" }} />}
|
||||
</div>
|
||||
):(
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "72px",
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default LeftUp;
|
||||
11
src/page/LinePage2-2/Left/index.tsx
Normal file
11
src/page/LinePage2-2/Left/index.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import LeftUp from "./LeftUp";
|
||||
import LeftDown from "./LeftDown";
|
||||
function Left() {
|
||||
return (
|
||||
<div className="group_left flex-col">
|
||||
<LeftUp />
|
||||
<LeftDown />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default Left;
|
||||
273
src/page/LinePage2-2/Right/RightDown.tsx
Normal file
273
src/page/LinePage2-2/Right/RightDown.tsx
Normal file
@ -0,0 +1,273 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChartRight/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine2After} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
function RightDown() {
|
||||
const data = useAppSelector(selectLine2After);
|
||||
// console.log('页面数据：',data)
|
||||
// 假数据
|
||||
let tempData = [
|
||||
{
|
||||
type: "day",
|
||||
data: {
|
||||
time: [] as string[],
|
||||
input: [] as number[],
|
||||
output: [] as number[],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "week",
|
||||
data: {
|
||||
time: [] as string[],
|
||||
input: [] as number[],
|
||||
output: [] as number[],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "month",
|
||||
data: {
|
||||
time: [] as string[],
|
||||
input: [] as number[],
|
||||
output: [] as number[],
|
||||
},
|
||||
},
|
||||
];
|
||||
const nameList = [
|
||||
{ name: "表单", ename: "table" },
|
||||
{ name: "折线", ename: "chart" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
||||
const handleButtonChange = (activeName: string) => {
|
||||
setActiveName(activeName);
|
||||
};
|
||||
const configDay = {
|
||||
header: ["时间", "投入数量", "产出数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 5,
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [120, 130, 130],
|
||||
data: [],
|
||||
};
|
||||
const configWeek = {
|
||||
header: ["时间", "投入数量", "产出数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 5,
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [120, 130, 130],
|
||||
data: [],
|
||||
};
|
||||
const configMonth = {
|
||||
header: ["时间", "投入数量", "产出数量"],
|
||||
headerHeight: 30,
|
||||
rowNum: 5,
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [120, 130, 130],
|
||||
data: [],
|
||||
};
|
||||
let arr1: any = [];
|
||||
let arr2: any = [];
|
||||
let arr3: any = [];
|
||||
// @ts-ignore
|
||||
if (data.todayProductionDets && data.todayProductionDets.length > 0) {
|
||||
// @ts-ignore
|
||||
data.todayProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
|
||||
arr1.push(arrInner);
|
||||
tempData[0].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[0].data.input.push(item.inputNum);
|
||||
tempData[0].data.output.push(item.outputNum);
|
||||
})
|
||||
}else{
|
||||
tempData[0].data.time = []
|
||||
tempData[0].data.input = []
|
||||
tempData[0].data.output = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.weekProductionDets && data.weekProductionDets.length > 0) {
|
||||
// @ts-ignore
|
||||
data.weekProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr2.push(arrInner);
|
||||
tempData[1].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[1].data.input.push(item.inputNum);
|
||||
tempData[1].data.output.push(item.outputNum);
|
||||
})
|
||||
}else{
|
||||
tempData[1].data.time = []
|
||||
tempData[1].data.input = []
|
||||
tempData[1].data.output = []
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data.monthProductionDets && data.monthProductionDets.length > 0) {
|
||||
// @ts-ignore
|
||||
data.monthProductionDets.map((item,index)=>{
|
||||
let arrInner = [];
|
||||
arrInner.push(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
||||
arr3.push(arrInner);
|
||||
tempData[2].data.time.push(moment(item.recTime).format("HH:mm"));
|
||||
tempData[2].data.input.push(item.inputNum);
|
||||
tempData[2].data.output.push(item.outputNum);
|
||||
})
|
||||
}else{
|
||||
tempData[2].data.time = []
|
||||
tempData[2].data.input = []
|
||||
tempData[2].data.output = []
|
||||
}
|
||||
configDay.data = arr1;
|
||||
configWeek.data = arr2;
|
||||
configMonth.data = arr3;
|
||||
|
||||
const chartData1 = tempData[0].data;
|
||||
const chartData2 = tempData[1].data;
|
||||
const chartData3 = tempData[2].data;
|
||||
const options1 = getOptions(chartData1);
|
||||
const options2 = getOptions(chartData2);
|
||||
const options3 = getOptions(chartData3);
|
||||
return (
|
||||
<div className="right_down">
|
||||
<TitleBox title={"right_down"} />
|
||||
<div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
<div style={{ padding: "10px", height: "628px" }}>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">当天</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="right_down_content">
|
||||
{activeName === "table" ? (
|
||||
arr1.length>0?<ScrollBoard
|
||||
config={configDay}
|
||||
style={{ width: "380px", height: "180px" }}
|
||||
/>:(
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)
|
||||
) : tempData[0].data.time.length>0 ? (
|
||||
<ReactECharts option={options1} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">本周</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="right_down_content">
|
||||
{activeName === "table" ? (
|
||||
arr2.length>0?<ScrollBoard
|
||||
config={configWeek}
|
||||
style={{ width: "380px", height: "180px" }}
|
||||
/>:(
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)
|
||||
) : tempData[1].data.time.length>0 ? (
|
||||
<ReactECharts option={options2} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">本月</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="right_down_content">
|
||||
{activeName === "table" ? (
|
||||
arr3.length>0?<ScrollBoard
|
||||
config={configMonth}
|
||||
style={{ width: "380px", height: "180px" }}
|
||||
/>:(
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)
|
||||
) : tempData[2].data.time.length>0 ? (
|
||||
<ReactECharts option={options3} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default RightDown;
|
||||
52
src/page/LinePage2-2/Right/RightUp.tsx
Normal file
52
src/page/LinePage2-2/Right/RightUp.tsx
Normal file
@ -0,0 +1,52 @@
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine2After} from "./../../../store/LinePageSlice"
|
||||
function RightUp() {
|
||||
const data = useAppSelector(selectLine2After);
|
||||
const config = {
|
||||
header: ["序号", "产线", "上片数据量", "成品下片数量"],
|
||||
headerHeight: 32,
|
||||
rowNum: 5,
|
||||
align: ["center", "left", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [70, 90, 106, 114],
|
||||
data: [],
|
||||
};
|
||||
let arr:any = []
|
||||
// @ts-ignore
|
||||
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
|
||||
// @ts-ignore
|
||||
data.sumProductionDets.map((item, index) => {
|
||||
let arrInner = []
|
||||
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
|
||||
arr.push(arrInner)
|
||||
})
|
||||
}
|
||||
config.data = arr
|
||||
return (
|
||||
<div className="right_up">
|
||||
<TitleBox title={"right_up"} />
|
||||
<div style={{ padding: "10px", height: "213px" }}>
|
||||
{arr.length>0?<ScrollBoard
|
||||
config={config}
|
||||
style={{ width: "380px", height: "193px" }}
|
||||
/>:(<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default RightUp;
|
||||
12
src/page/LinePage2-2/Right/index.tsx
Normal file
12
src/page/LinePage2-2/Right/index.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import RightDown from "./RightDown";
|
||||
import RightUp from "./RightUp";
|
||||
|
||||
function Right() {
|
||||
return (
|
||||
<div className="group_right flex-col">
|
||||
<RightUp />
|
||||
<RightDown />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default Right;
|
||||
14
src/page/LinePage2-2/TopP.tsx
Normal file
14
src/page/LinePage2-2/TopP.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import '../../lanhuapp/common.css';
|
||||
import "./index.css";
|
||||
|
||||
function TopP() {
|
||||
return (
|
||||
<div className="flex-row">
|
||||
<div className="block_top flex-row">
|
||||
<div className='block_top_title'></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TopP;
|
||||
BIN
src/page/LinePage2-2/assets/icon/alarm.png
Normal file
BIN
src/page/LinePage2-2/assets/icon/alarm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/page/LinePage2-2/assets/icon/defect.png
Normal file
BIN
src/page/LinePage2-2/assets/icon/defect.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/page/LinePage2-2/assets/icon/finished.png
Normal file
BIN
src/page/LinePage2-2/assets/icon/finished.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/page/LinePage2-2/assets/icon/g.png
Normal file
BIN
src/page/LinePage2-2/assets/icon/g.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/page/LinePage2-2/assets/icon/inputAndOutput.png
Normal file
BIN
src/page/LinePage2-2/assets/icon/inputAndOutput.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
src/page/LinePage2-2/assets/icon/num.png
Normal file
BIN
src/page/LinePage2-2/assets/icon/num.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/page/LinePage2-2/assets/icon/r.png
Normal file
BIN
src/page/LinePage2-2/assets/icon/r.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/page/LinePage2-2/assets/icon/record.png
Normal file
BIN
src/page/LinePage2-2/assets/icon/record.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user