5个页面的ws接口
This commit is contained in:
245
src/page/LinePage5-1/Left/LeftDown.tsx
Normal file
245
src/page/LinePage5-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 {selectLine5Before} from "./../../../store/LinePageSlice"
|
||||
function LeftDown() {
|
||||
const data = useAppSelector(selectLine5Before);
|
||||
// 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/LinePage5-1/Left/LeftUp.tsx
Normal file
228
src/page/LinePage5-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 {selectLine5Before} from "./../../../store/LinePageSlice"
|
||||
function LeftUp() {
|
||||
const data = useAppSelector(selectLine5Before);
|
||||
// 假数据
|
||||
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/LinePage5-1/Left/index.tsx
Normal file
11
src/page/LinePage5-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;
|
||||
Reference in New Issue
Block a user