439 lines
11 KiB
JavaScript
439 lines
11 KiB
JavaScript
import React, { useRef, useEffect, useState, useCallback } from "react";
|
||
import Footer from "../../../components/screen/Footer";
|
||
import Header from "../../../components/screen/Header";
|
||
import Row from "../../../components/screen/Row";
|
||
import Card from "../../../components/screen/Card";
|
||
import Chart from "../../../components/screen/Chart";
|
||
import Table from "../../../components/screen/Table";
|
||
import TableProgress from "../../../components/screen/TableProgress";
|
||
import io from "../../../utils/socket.io.js";
|
||
const gutter = 20;
|
||
const bottom = 20;
|
||
const tableToNextPage = 6000;
|
||
|
||
const polarBarOpt = {
|
||
title: {
|
||
text: "计划总数",
|
||
left: "center",
|
||
bottom: 24,
|
||
textStyle: {
|
||
fontSize: 20,
|
||
},
|
||
},
|
||
legend: {
|
||
show: false,
|
||
},
|
||
radiusAxis: {
|
||
show: false,
|
||
type: "category",
|
||
data: ["%"],
|
||
},
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
series: {
|
||
type: "gauge",
|
||
center: ["50%", "40%"],
|
||
radius: "70%",
|
||
startAngle: 90,
|
||
endAngle: -270,
|
||
pointer: {
|
||
show: false,
|
||
},
|
||
progress: {
|
||
show: true,
|
||
overlap: false,
|
||
roundCap: false,
|
||
clip: false,
|
||
itemStyle: {
|
||
borderWidth: 0,
|
||
},
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
width: 20,
|
||
color: [[1, "rgba(40, 163, 255, 0.2)"]],
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
data: [
|
||
{
|
||
value: 0,
|
||
name: "生产总数",
|
||
},
|
||
],
|
||
title: {
|
||
offsetCenter: ["0%", "20"],
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
detail: {
|
||
show: true,
|
||
offsetCenter: ["0%", "-20"],
|
||
width: "auto",
|
||
height: 32,
|
||
fontSize: 32,
|
||
color: "#00E1FA",
|
||
borderColor: "auto",
|
||
borderWidth: 0,
|
||
formatter: "{value}",
|
||
},
|
||
},
|
||
};
|
||
const setNumOpt = (total, done, title) => {
|
||
let res = Object.assign({}, polarBarOpt);
|
||
if (title) res.title.text = `${title}：${total}`;
|
||
let percent = ((100 * done) / (total || 1)).toFixed(2);
|
||
res.series.data[0].value = percent;
|
||
res.series.detail.formatter = () => done;
|
||
return res;
|
||
};
|
||
const setOkNumOpt = (total, done, title) => {
|
||
let res = Object.assign({}, polarBarOpt);
|
||
let percent = ((100 * done) / (total || 1)).toFixed(2);
|
||
if (title) res.title.text = `${title}：${percent}%`;
|
||
res.series.data[0].value = percent;
|
||
res.series.data[0].name = "实际总量";
|
||
res.series.detail.formatter = () => done;
|
||
res.series.detail.color = "#6FE621";
|
||
res.series.progress.itemStyle.color = "#6FE621";
|
||
return res;
|
||
};
|
||
|
||
const barOpt = {
|
||
legend: {
|
||
show: true,
|
||
data: ["生产数量", "合格数量"],
|
||
top: 10,
|
||
right: 10,
|
||
textStyle: {
|
||
fontSize: 14,
|
||
},
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
axisTick: {
|
||
lineStyle: { opacity: 0.3 },
|
||
alignWithLabel: true,
|
||
},
|
||
axisLine: {
|
||
lineStyle: { opacity: 0.3 },
|
||
},
|
||
axisLabel: {
|
||
color: "rgba(255, 255, 255, 0.8)",
|
||
},
|
||
data: [],
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
axisTick: {
|
||
lineStyle: { opacity: 0.3 },
|
||
},
|
||
axisLine: {
|
||
lineStyle: { opacity: 0.3 },
|
||
},
|
||
axisLabel: {
|
||
color: "rgba(255, 255, 255, 0.8)",
|
||
},
|
||
},
|
||
grid: {
|
||
bottom: 40,
|
||
top: 60,
|
||
left: 50,
|
||
},
|
||
barWidth: 20,
|
||
series: [
|
||
{
|
||
name: "生产数量",
|
||
type: "bar",
|
||
barGap: -1,
|
||
data: [],
|
||
},
|
||
{
|
||
name: "合格数量",
|
||
itemStyle: {
|
||
color: "#6FE621",
|
||
},
|
||
type: "bar",
|
||
data: [],
|
||
},
|
||
],
|
||
};
|
||
const setBarOpt = ({ product = {}, qualify = {} }) => {
|
||
let res = Object.assign({}, barOpt);
|
||
for (let n = 0; n < 24; n++) {
|
||
res.xAxis.data.push(`${n}:00`.padStart(5, "0"));
|
||
}
|
||
for (let index in product) {
|
||
res.series[0].data[parseInt(index)] = product[index];
|
||
}
|
||
for (let index in qualify) {
|
||
res.series[1].data[parseInt(index)] = qualify[index];
|
||
}
|
||
return res;
|
||
};
|
||
|
||
const productTableColumns = [
|
||
{ title: "客户编码", code: "vendorCode" },
|
||
{ title: "客户名称", code: "vendorName" },
|
||
{ title: "销售名称", code: "userName" },
|
||
{ title: "客户分类", code: "customType" },
|
||
{ title: "产品型号", code: "productMode" },
|
||
{ title: "计划发货日期", code: "planDeliveryTime" },
|
||
{ title: "计划发货数量", code: "planDeliveryQty" },
|
||
{ title: "实际发货数量", code: "deliveryQty" },
|
||
{
|
||
title: "发货率",
|
||
code: "deliveryRateNew",
|
||
render: (value, config, rowData) => {
|
||
console.log(config, rowData);
|
||
return <TableProgress percent={value} />;
|
||
},
|
||
},
|
||
|
||
// {title: "生产状态", code: "code",
|
||
// value: val => {
|
||
// if(val === '1') return "生产中";
|
||
// if(val === '2') return "中断";
|
||
// if(val === '3') return "转产";
|
||
// },
|
||
// color: val => {
|
||
// if(val === '1') return "#6FE621";
|
||
// if(val === '2') return "#28A3FF";
|
||
// if(val === '3') return "#F82D22";
|
||
// },
|
||
// render: (text, config, rowData) => {
|
||
// const {value, color} = config;
|
||
// let resColor = color(text);
|
||
// let resText = value(text);
|
||
// return (
|
||
// <div style={{color: resColor}}>
|
||
// <span style={{
|
||
// background: resColor,
|
||
// width: '8px',
|
||
// height: '8px',
|
||
// display: 'inline-block',
|
||
// borderRadius: '50%',
|
||
// verticalAlign: 'middle',
|
||
// }}></span>
|
||
// <span style={{
|
||
// verticalAlign: 'middle',
|
||
// marginLeft: '6px',
|
||
// }}>{resText}</span>
|
||
// </div>
|
||
// )
|
||
// },
|
||
// },
|
||
// {title: "产品编码", code: "code"},
|
||
// {title: "产品名称", code: "code"},
|
||
// {title: "工单编号", code: "code"},
|
||
// {title: "生产数量", code: "code"},
|
||
// {title: "计划数量", code: "code"},
|
||
// {title: "生产进度", code: "code",
|
||
// render: (value, config, rowData) => {
|
||
// console.log(config, rowData)
|
||
// return <TableProgress percent={0.31}/>
|
||
// },
|
||
// },
|
||
// {title: "不良品数量", code: "code"},
|
||
// {title: "不良品率", code: "code"},
|
||
];
|
||
|
||
const productTableColumnNew = [
|
||
{ title: "产品类型", code: "materialTypeName" },
|
||
{ title: "产品型号", code: "productLevel" },
|
||
{ title: "产线信息", code: "workCenterName" },
|
||
{ title: "计划产出日期", code: "planOutputDate" },
|
||
{ title: "计划产量", code: "planNum" },
|
||
{ title: "实际产量", code: "actualNum" },
|
||
{
|
||
title: "达成率",
|
||
code: "fulfillRateNew",
|
||
render: (value, config, rowData) => {
|
||
console.log(config, rowData);
|
||
return <TableProgress percent={value} />;
|
||
},
|
||
},
|
||
];
|
||
|
||
function Comprehensive(props) {
|
||
const { config: { ioSocketUrl, comprehensiveConfig = {} } = {} } = global;
|
||
const okNumRefNew = useRef();
|
||
const okNumRef = useRef();
|
||
const productTableRefNew = useRef();
|
||
const productTableRef = useRef();
|
||
const socket = useRef();
|
||
let date = "";
|
||
let query = {
|
||
screenType: "ComprehensiveType",
|
||
};
|
||
if (date) query.date = date;
|
||
else {
|
||
query.date = new Date().toJSON().split("T").join(" ").substr(0, 10);
|
||
}
|
||
|
||
const getData = () =>
|
||
socket.current.emit("timePerformanceGoodProduct", "channel", { query });
|
||
|
||
setTimeout(() => {
|
||
getData();
|
||
}, 300000);
|
||
const setTableNextPage = useCallback(() => {
|
||
setTimeout(() => {
|
||
productTableRef.current.nextPage();
|
||
setTableNextPage();
|
||
}, tableToNextPage);
|
||
}, []);
|
||
|
||
const setTableNextPageNew = useCallback(() => {
|
||
setTimeout(() => {
|
||
productTableRefNew.current.nextPage();
|
||
setTableNextPageNew();
|
||
}, tableToNextPage);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
socket.current = io.connect(ioSocketUrl, {transports:['websocket']});
|
||
|
||
socket.current.on("connect", function () {
|
||
console.log("msg页面连接成功！");
|
||
getData();
|
||
});
|
||
|
||
socket.current.on("timePerformanceGoodProduct", function (data) {
|
||
data = JSON.parse(data);
|
||
console.log(data, "data");
|
||
okNumRef.current.setOption(
|
||
setOkNumOpt(
|
||
data.data.deliveryRates.planQty,
|
||
data.data.deliveryRates.qty,
|
||
"发货总体达成率"
|
||
)
|
||
);
|
||
okNumRefNew.current.setOption(
|
||
setOkNumOpt(
|
||
data.data.planRates.planOutQty,
|
||
data.data.planRates.OutQty,
|
||
"计划总体达成率"
|
||
)
|
||
);
|
||
productTableRefNew.current.addData(data.data.planOutputList);
|
||
productTableRef.current.addData(data.data.deliveryPlanList);
|
||
});
|
||
|
||
//planNumRef.current.setOption(setNumOpt(500000, 212923, "计划总数"));
|
||
|
||
// productNumRef.current.setOption(setBarOpt({
|
||
// product: {
|
||
// "0": 10,
|
||
// "1": 40,
|
||
// "5": 30,
|
||
// "6": 40,
|
||
// },
|
||
// qualify: {
|
||
// "0": 5,
|
||
// "1": 4,
|
||
// "5": 3,
|
||
// },
|
||
// }));
|
||
|
||
setTableNextPageNew();
|
||
setTableNextPage();
|
||
}, []);
|
||
|
||
return (
|
||
<div className="screen-container">
|
||
<Header title={"综合看板"} />
|
||
<div className="screen-container-content">
|
||
<Row className="height-50" gutter={gutter} bottom={bottom}>
|
||
<Row.Col span={18}>
|
||
<Card
|
||
title="发货达成率"
|
||
titleSpace={true}
|
||
padding={`15px ${gutter}px`}
|
||
>
|
||
<Table
|
||
ref={productTableRef}
|
||
mainKey="code"
|
||
columns={productTableColumns}
|
||
/>
|
||
</Card>
|
||
</Row.Col>
|
||
{/*<Row.Col span={14}>*/}
|
||
{/* <Card title="今日生产统计" overVisible={true}>*/}
|
||
{/* <Chart ref={productNumRef} />*/}
|
||
{/* </Card>*/}
|
||
{/*</Row.Col>*/}
|
||
<Row.Col span={6}>
|
||
<Card title="发货总体达成率" titleSpace={true} overVisible={true}>
|
||
<Chart ref={okNumRef} />
|
||
</Card>
|
||
</Row.Col>
|
||
</Row>
|
||
|
||
<Row className="height-50" gutter={gutter} bottom={bottom}>
|
||
<Row.Col span={18}>
|
||
<Card
|
||
title="计划达成率"
|
||
titleSpace={true}
|
||
padding={`15px ${gutter}px`}
|
||
>
|
||
<Table
|
||
ref={productTableRefNew}
|
||
mainKey="code"
|
||
columns={productTableColumnNew}
|
||
/>
|
||
</Card>
|
||
</Row.Col>
|
||
<Row.Col span={6}>
|
||
<Card title="计划总体达成率" titleSpace={true} overVisible={true}>
|
||
<Chart ref={okNumRefNew} />
|
||
</Card>
|
||
</Row.Col>
|
||
</Row>
|
||
</div>
|
||
<Footer />
|
||
<style jsx>{`
|
||
.screen-container {
|
||
height: 100vh;
|
||
overflow: auto;
|
||
background: url("/img/bg.png") center center;
|
||
position: relative;
|
||
padding-top: 96px;
|
||
padding-bottom: 82px;
|
||
}
|
||
.screen-container-content {
|
||
height: 100%;
|
||
padding: 0 ${gutter}px;
|
||
}
|
||
`}</style>
|
||
</div>
|
||
);
|
||
}
|
||
const getQueryVariable = (variable) => {
|
||
let query = window.location.search.substring(1);
|
||
let vars = query.split("&");
|
||
for (let i = 0; i < vars.length; i++) {
|
||
let pair = vars[i].split("=");
|
||
if (pair[0] == variable) {
|
||
return pair[1];
|
||
}
|
||
}
|
||
return false;
|
||
};
|
||
export default Comprehensive;
|