1088 lines
28 KiB
JavaScript
1088 lines
28 KiB
JavaScript
import React, {
|
||
useRef,
|
||
useEffect,
|
||
useState,
|
||
useCallback,
|
||
useMemo,
|
||
} from "react";
|
||
import { withRouter } from "next/router";
|
||
import moment from "moment";
|
||
// import { Liquid, DualAxes } from "@ant-design/plots";
|
||
import _ from "lodash";
|
||
import Chart from "../../../components/screen/Chart";
|
||
import * as echarts from "echarts";
|
||
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 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 cardBg = "rgba(6, 36, 109, 0.2)";
|
||
const socketEmit = "timePerformanceGoodProduct";
|
||
const socketScreenType = "QualityDashBoardType";
|
||
// 调试方式: local 本地完整数据调试, server 接口调试, dev 开发期调试
|
||
const dataType = "server";
|
||
|
||
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;
|
||
};
|
||
|
||
const useSocket = ({ socketEmit, socketScreenType, dataType }) => {
|
||
const { config: { ioSocketUrl } = {} } = global;
|
||
|
||
const [pageData, setPageData] = useState({});
|
||
const socket = useRef();
|
||
|
||
const update = useCallback((data) => {
|
||
if (dataType === "local") data = localData;
|
||
|
||
console.log("data", data);
|
||
const { todayQuality } = data;
|
||
// 今日合格率
|
||
let todayPassRate = todayQuality.qualityRate;
|
||
// 今日是否合格
|
||
let todayIsPass = todayPassRate >= 0.7;
|
||
// 本月不良率TOP5
|
||
const { monthDefectRateTop5 = {} } = data;
|
||
let monthUnPass = [];
|
||
Object.keys(monthDefectRateTop5).forEach((name) => {
|
||
monthUnPass.push({ name, value: monthDefectRateTop5[name] });
|
||
});
|
||
// 合格率趋势
|
||
const { qualityTrend = [] } = data;
|
||
let passTrend = { category: [], data: [] };
|
||
try {
|
||
let category = [];
|
||
let proData = [[], []];
|
||
qualityTrend.forEach((item, dateIndex) => {
|
||
category.unshift(item.date);
|
||
["zhhgl", "ztl"].forEach((type, typeIndex) => {
|
||
Object.keys(item[type]).forEach((proName) => {
|
||
let value = item[type][proName];
|
||
if (!proData[typeIndex].find((i) => i.name === proName)) {
|
||
proData[typeIndex].push({ name: proName, data: [] });
|
||
}
|
||
let proIndex = proData[typeIndex].findIndex(
|
||
(i) => i.name === proName
|
||
);
|
||
proData[typeIndex][proIndex].data[
|
||
-1 * dateIndex + qualityTrend.length - 1
|
||
] = value;
|
||
});
|
||
});
|
||
});
|
||
// 折线图 所有值为0，则消失（过滤这条产品数据）
|
||
proData[1] = proData[1].filter(({ data }) => {
|
||
let total = 0;
|
||
data.forEach(val => total += val);
|
||
return total > 0;
|
||
})
|
||
let typeData = [
|
||
{
|
||
key: "zhhgl",
|
||
name: "综合合格率",
|
||
data: proData[0],
|
||
},
|
||
{
|
||
key: "ztl",
|
||
name: "一次性合格率",
|
||
data: proData[1],
|
||
},
|
||
];
|
||
passTrend = { category, data: typeData };
|
||
} catch (e) {
|
||
console.log("qualityTrend error", e, qualityTrend);
|
||
}
|
||
// 近三天不良率
|
||
const { threeDayReject = [] } = data;
|
||
let unPassRate = threeDayReject;
|
||
// 任务提醒
|
||
const { taskRemind = [] } = data;
|
||
let taskReminder = taskRemind;
|
||
|
||
setPageData({
|
||
todayPassRate,
|
||
todayIsPass,
|
||
monthUnPass,
|
||
passTrend,
|
||
unPassRate,
|
||
taskReminder,
|
||
});
|
||
}, []);
|
||
|
||
const getData = useCallback(() => {
|
||
let workCenterCode = getQueryVariable("workCenterCode");
|
||
let date = getQueryVariable("date");
|
||
if (!workCenterCode) return;
|
||
|
||
let query = {
|
||
workCenterCode,
|
||
screenType: socketScreenType,
|
||
};
|
||
if (date) query.date = date;
|
||
console.log("fetch", socketEmit, { query });
|
||
|
||
if (dataType === "server") {
|
||
socket.current.emit(socketEmit, "channel", { query });
|
||
} else if (dataType === "local") {
|
||
update();
|
||
}
|
||
}, [update]);
|
||
|
||
useEffect(() => {
|
||
if (dataType === "dev") setPageData(devData);
|
||
|
||
if (dataType === "local") getData();
|
||
|
||
if (dataType === "server") {
|
||
socket.current = io.connect(ioSocketUrl, {transports:['websocket']});
|
||
socket.current.on("connect", function () {
|
||
console.log("msg页面连接成功！");
|
||
getData();
|
||
});
|
||
socket.current.on(socketEmit, function (res) {
|
||
try {
|
||
res = JSON.parse(res);
|
||
} catch (e) {
|
||
console.log(e);
|
||
}
|
||
update(res.data);
|
||
});
|
||
}
|
||
}, [getData, update]);
|
||
|
||
return [pageData, getData];
|
||
};
|
||
|
||
function QualityBoard(props) {
|
||
const { config: { qualityBoard = {} } = {} } = global;
|
||
const { threeDayRejectTableNext = 4000, taskRemindTableNext = 4000} = qualityBoard;
|
||
|
||
const [pageData, getPageData] = useSocket({
|
||
socketEmit,
|
||
socketScreenType,
|
||
dataType,
|
||
});
|
||
|
||
// 今日合格率
|
||
const todayPassRateOpt = useMemo(
|
||
() => chartConfig("todayPassRateConfig").init(pageData),
|
||
[pageData]
|
||
);
|
||
// 今日是否合格
|
||
const todayIsPass = useMemo(() => !!pageData.todayIsPass, [pageData]);
|
||
// 本月不良率TOP5
|
||
const monthUnPassOpt = useMemo(
|
||
() => chartConfig("monthUnPassConfig").init(pageData),
|
||
[pageData]
|
||
);
|
||
// 合格率趋势
|
||
const passTrend = useMemo(
|
||
() => chartConfig("passTrendConfig").init(pageData),
|
||
[pageData]
|
||
);
|
||
// 近三天不良率
|
||
const unPassRateTableRef = useRef();
|
||
const unPassRateTableColumns = useMemo(
|
||
() => [
|
||
{
|
||
title: "日期",
|
||
code: "date",
|
||
render: (value) => (value && moment(value).format("MM-DD")) || "",
|
||
},
|
||
{ title: "产品名称", code: "materialName" },
|
||
{ title: "产品等级", code: "productLevel" },
|
||
{ title: "生产批次", code: "scpc" },
|
||
{ title: "产量", code: "cl" },
|
||
{ title: "检验批次", code: "jypc" },
|
||
{ title: "不良批次", code: "blpc" },
|
||
{
|
||
title: "不良率",
|
||
width: 176,
|
||
code: "bll",
|
||
render: (value) => {
|
||
if (isNaN(value)) return value;
|
||
if (parseFloat(value) === 0) return value;
|
||
return <TableProgress percent={value} rule={ 'strange' } />
|
||
},
|
||
},
|
||
],
|
||
[]
|
||
);
|
||
useEffect(() => {
|
||
const { unPassRate = [] } = pageData;
|
||
unPassRateTableRef.current.setData(unPassRate);
|
||
let getNextPage = () => setTimeout(() => {
|
||
unPassRateTableRef.current.nextPage();
|
||
timmer = getNextPage();
|
||
}, threeDayRejectTableNext);
|
||
let timmer = getNextPage();
|
||
return () => {
|
||
clearTimeout(timmer);
|
||
};
|
||
}, [pageData]);
|
||
// 任务提醒
|
||
const taskReminderTableRef = useRef();
|
||
// 8小时内含8小时数值显示绿色，8小时以上数值显示橙色，24小时以上数值显示红色。
|
||
const getColor = useCallback((ms = 0) => {
|
||
if (ms > 24 * 60 * 60) return "#FF005A";
|
||
if (ms > 8 * 60 * 60) return "#F5A623";
|
||
if (ms <= 8 * 60 * 60) return "#58BC17";
|
||
}, []);
|
||
const billstatusStyle = useCallback(
|
||
(ms) => {
|
||
return {
|
||
fontSize: "16px",
|
||
color: "#fff",
|
||
lineHeight: "28px",
|
||
padding: "0 8px",
|
||
display: "inline-block",
|
||
background: getColor(ms),
|
||
};
|
||
},
|
||
[getColor]
|
||
);
|
||
const taskReminderTableColumns = useMemo(
|
||
() => [
|
||
{
|
||
title: "任务状态",
|
||
code: "billstatus",
|
||
render: (value, config, rowData) => (
|
||
<span style={billstatusStyle(rowData.ms)}>{value}</span>
|
||
),
|
||
},
|
||
{ title: "任务名称", code: "templatename" },
|
||
{ title: "产品名称", code: "materialname" },
|
||
{ title: "产品等级", code: "materialdesc" },
|
||
{ title: "批次号", code: "workordercode" },
|
||
{ title: "工序", code: "processname" },
|
||
{
|
||
title: "任务产生时间",
|
||
code: "createtime",
|
||
render: (value) =>
|
||
(value && moment(value).format("YYYY-MM-DD HH:mm")) || "",
|
||
},
|
||
{
|
||
title: "持续时长",
|
||
code: "cxsc",
|
||
render: (value, config, rowData) => (
|
||
<span style={{ color: getColor(rowData.ms) }}>{value}</span>
|
||
),
|
||
},
|
||
],
|
||
[billstatusStyle, getColor]
|
||
);
|
||
useEffect(() => {
|
||
const { taskReminder = [] } = pageData;
|
||
taskReminderTableRef.current.setData(taskReminder);
|
||
let getNextPage = () => setTimeout(() => {
|
||
taskReminderTableRef.current.nextPage();
|
||
timmer = getNextPage();
|
||
}, taskRemindTableNext);
|
||
let timmer = getNextPage();
|
||
return () => {
|
||
clearTimeout(timmer);
|
||
};
|
||
}, [pageData]);
|
||
|
||
return (
|
||
<div className="screen-container">
|
||
<Header title={"质量看板"} />
|
||
<div className="screen-container-content">
|
||
<Row
|
||
style={{ height: `${470 + bottom}px` }}
|
||
bottom={bottom}
|
||
gutter={gutter}
|
||
>
|
||
<Row.Col style={{ width: `${470 + gutter}px` }} bottom={bottom}>
|
||
<Row bottom={bottom}>
|
||
<Row.Col span={24} style={{ height: `${220 + bottom}px` }}>
|
||
<Card
|
||
title="今日合格率"
|
||
titleSpace={true}
|
||
overVisible={true}
|
||
withBg={cardBg}
|
||
>
|
||
<div className="screen-container-hp">
|
||
<Row className="height-100" gutter={gutter} bottom={bottom}>
|
||
<Row.Col span={11} bottom={0}>
|
||
<Chart option={todayPassRateOpt} />
|
||
</Row.Col>
|
||
<Row.Col span={13} bottom={0}>
|
||
<div className="screen-container-hp-top">
|
||
<span>检验合格率</span>
|
||
</div>
|
||
<div className="screen-container-hp-bottom">
|
||
{todayIsPass ? "运行正常" : "运行异常"}
|
||
</div>
|
||
</Row.Col>
|
||
</Row>
|
||
</div>
|
||
</Card>
|
||
</Row.Col>
|
||
<Row.Col span={24} style={{ height: `${230}px` }} bottom={0}>
|
||
<Card title="本月不良率TOP5" titleSpace={true} withBg={cardBg}>
|
||
<Chart option={monthUnPassOpt} />
|
||
</Card>
|
||
</Row.Col>
|
||
</Row>
|
||
</Row.Col>
|
||
<Row.Col
|
||
style={{ width: `${1390 + bottom}px`, height: `${470 + gutter}px` }}
|
||
>
|
||
<Card title="合格率趋势" titleSpace={false} withBg={cardBg}>
|
||
<Chart option={passTrend} />
|
||
</Card>
|
||
</Row.Col>
|
||
</Row>
|
||
<Row style={{ height: `${404}px` }} gutter={gutter} bottom={0}>
|
||
<Row.Col span={12}>
|
||
<Card
|
||
title="近三天不良率"
|
||
titleSpace={true}
|
||
withBg={cardBg}
|
||
padding={gutter + "px"}
|
||
>
|
||
<Table
|
||
mainKey="gid"
|
||
ref={unPassRateTableRef}
|
||
columns={unPassRateTableColumns}
|
||
/>
|
||
</Card>
|
||
</Row.Col>
|
||
<Row.Col span={12}>
|
||
<Card
|
||
title="任务提醒"
|
||
titleSpace={true}
|
||
withBg={cardBg}
|
||
padding={gutter + "px"}
|
||
>
|
||
<Table
|
||
mainKey="gid"
|
||
autoNext={false}
|
||
pageFinished={getPageData}
|
||
ref={taskReminderTableRef}
|
||
columns={taskReminderTableColumns}
|
||
/>
|
||
</Card>
|
||
</Row.Col>
|
||
</Row>
|
||
</div>
|
||
<Footer />
|
||
<style jsx>{`
|
||
.screen-container {
|
||
height: 100vh;
|
||
min-height: 1080px;
|
||
min-width: 1920px;
|
||
overflow: hidden;
|
||
background: url("/img/bg.png") center center;
|
||
position: relative;
|
||
padding-top: 96px;
|
||
padding-bottom: 82px;
|
||
}
|
||
.screen-container-content {
|
||
height: 100%;
|
||
padding: 0 ${gutter}px;
|
||
}
|
||
.screen-container-hp {
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
.screen-container-hp-top {
|
||
height: 82px;
|
||
background: url(/img/img1.png);
|
||
background-repeat: no-repeat;
|
||
position: relative;
|
||
background-position: 0 10px;
|
||
}
|
||
.screen-container-hp-top span {
|
||
color: #00f7fb;
|
||
position: absolute;
|
||
font-size: 18px;
|
||
top: 25px;
|
||
left: 46px;
|
||
letter-spacing: 10px;
|
||
}
|
||
.screen-container-hp-bottom {
|
||
font-size: 32px;
|
||
line-height: 38px;
|
||
width: 188px;
|
||
color: #00f7fb;
|
||
text-align: center;
|
||
background-image: linear-gradient(
|
||
180deg,
|
||
rgba(0, 76, 167, 0.2) 0%,
|
||
rgba(36, 53, 184, 0.5) 100%
|
||
);
|
||
border: 1px solid #0064f1;
|
||
border-radius: 3px;
|
||
margin-top: 12px;
|
||
}
|
||
.screen-container-hp-bottom::before {
|
||
content: "";
|
||
display: block;
|
||
margin: -8px -10px 0 -10px;
|
||
height: 20px;
|
||
border-top: 1px solid #0064f1;
|
||
border-left: 1px solid #0064f1;
|
||
border-right: 1px solid #0064f1;
|
||
border-top-left-radius: 3px;
|
||
border-top-right-radius: 3px;
|
||
}
|
||
.screen-container-hp-bottom::after {
|
||
content: "";
|
||
display: block;
|
||
margin: 0 -10px -8px -10px;
|
||
height: 20px;
|
||
border-bottom: 1px solid #0064f1;
|
||
border-left: 1px solid #0064f1;
|
||
border-right: 1px solid #0064f1;
|
||
border-bottom-left-radius: 3px;
|
||
border-bottom-right-radius: 3px;
|
||
}
|
||
`}</style>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const devData = {
|
||
// 今日合格率
|
||
todayPassRate: 0.855555,
|
||
// 今日是否合格
|
||
todayIsPass: true,
|
||
// 本月不良率TOP5
|
||
monthUnPass: [
|
||
{ value: 0.0909, name: "硫含量" },
|
||
{ value: 0.3564, name: "DIO" },
|
||
{ value: 0.1203, name: "粉体电阻率" },
|
||
{ value: 0.1253, name: "包装袋" },
|
||
{ value: 0.2005, name: "振实密度" },
|
||
],
|
||
// 合格率趋势
|
||
passTrend: {
|
||
category: ["08-01", "08-02", "08-03", "08-04", "08-05", "08-06", "08-07"],
|
||
data: [
|
||
{
|
||
name: "综合合格率",
|
||
data: [
|
||
{
|
||
name: "E60",
|
||
data: [0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1],
|
||
},
|
||
{
|
||
name: "E70",
|
||
data: [0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1],
|
||
},
|
||
{
|
||
name: "E80",
|
||
data: [0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
name: "一次性合格率",
|
||
data: [
|
||
{
|
||
name: "E60",
|
||
data: [0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1],
|
||
},
|
||
{
|
||
name: "E70",
|
||
data: [0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2],
|
||
},
|
||
{
|
||
name: "E80",
|
||
data: [0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3],
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
// 近三天不良率
|
||
unPassRate: [
|
||
{
|
||
gid: "1",
|
||
date: "2022-08-06", //日期
|
||
materialName: "磷酸铁锂", //产品名称
|
||
productLevel: "E80", //产品等级
|
||
scpc: 2, //生产批次
|
||
cl: 2, //产量
|
||
jypc: 2, //检验批次
|
||
blpc: 0, //不良批次
|
||
bll: "0.123", //不良率
|
||
},
|
||
{
|
||
gid: "2",
|
||
date: "2022-08-06", //日期
|
||
materialName: "磷酸铁锂", //产品名称
|
||
productLevel: "E80", //产品等级
|
||
scpc: 2, //生产批次
|
||
cl: 2, //产量
|
||
jypc: 2, //检验批次
|
||
blpc: 0, //不良批次
|
||
bll: "无", //不良率
|
||
},
|
||
{
|
||
gid: "3",
|
||
date: "2022-08-06", //日期
|
||
materialName: "磷酸铁锂", //产品名称
|
||
productLevel: "E80", //产品等级
|
||
scpc: 2, //生产批次
|
||
cl: 2, //产量
|
||
jypc: 2, //检验批次
|
||
blpc: 0, //不良批次
|
||
bll: "1", //不良率
|
||
},
|
||
{
|
||
gid: "4",
|
||
date: "2022-08-06", //日期
|
||
materialName: "磷酸铁锂", //产品名称
|
||
productLevel: "E80", //产品等级
|
||
scpc: 2, //生产批次
|
||
cl: 2, //产量
|
||
jypc: 2, //检验批次
|
||
blpc: 0, //不良批次
|
||
bll: "1.000", //不良率
|
||
},
|
||
{
|
||
gid: "5",
|
||
date: "2022-08-06", //日期
|
||
materialName: "磷酸铁锂", //产品名称
|
||
productLevel: "E80", //产品等级
|
||
scpc: 2, //生产批次
|
||
cl: 2, //产量
|
||
jypc: 2, //检验批次
|
||
blpc: 0, //不良批次
|
||
bll: "0", //不良率
|
||
},
|
||
],
|
||
// 任务提醒
|
||
taskReminder: [
|
||
{
|
||
gid: "1",
|
||
billstatus: "待检验", //任务状态
|
||
templatename: "测试工单批次生成质检任务", //任务名称
|
||
materialname: "L5车间成品", //产品名称
|
||
materialdesc: "E80A", //产品等级
|
||
workordercode: "HSR5A22082201", //批次号
|
||
processname: "粗磨", //工序
|
||
createtime: "2022-08-01 00:00:00", //任务产生时间
|
||
cxsc: "50分钟", //持续时长
|
||
ms: 1,
|
||
},
|
||
{
|
||
gid: "2",
|
||
billstatus: "待检验", //任务状态
|
||
templatename: "测试工单批次生成质检任务", //任务名称
|
||
materialname: "L5车间成品", //产品名称
|
||
materialdesc: "E80A", //产品等级
|
||
workordercode: "HSR5A22082201", //批次号
|
||
processname: "粗磨", //工序
|
||
createtime: "2022-08-01 00:00:00", //任务产生时间
|
||
cxsc: "50分钟", //持续时长
|
||
ms: 1000000,
|
||
},
|
||
],
|
||
};
|
||
const localData = {
|
||
todayQuality: {
|
||
qualityRate: 0.231,
|
||
},
|
||
monthDefectRateTop5: {
|
||
PH值: 0.3333,
|
||
粒度: 0.3333,
|
||
感应强度: 0.3333,
|
||
包装袋: 0.1203,
|
||
振实密度: 0.2005,
|
||
},
|
||
qualityTrend: [
|
||
{
|
||
date: "08-22",
|
||
ztl: {
|
||
E60: 0.42,
|
||
E70: 0.32,
|
||
E80: 0.22,
|
||
},
|
||
zhhgl: {
|
||
E60: 0.12,
|
||
E70: 0.12,
|
||
E80: 0.12,
|
||
},
|
||
},
|
||
{
|
||
date: "08-21",
|
||
ztl: {
|
||
E60: 0.42,
|
||
E70: 0.32,
|
||
E80: 0.22,
|
||
},
|
||
zhhgl: {
|
||
E60: 0.12,
|
||
E70: 0.12,
|
||
E80: 0.12,
|
||
},
|
||
},
|
||
{
|
||
date: "08-20",
|
||
ztl: {
|
||
E60: 0.42,
|
||
E70: 0.32,
|
||
E80: 0.22,
|
||
},
|
||
zhhgl: {
|
||
E60: 0.12,
|
||
E70: 0.12,
|
||
E80: 0.12,
|
||
},
|
||
},
|
||
{
|
||
date: "08-19",
|
||
ztl: {
|
||
E60: 0.42,
|
||
E70: 0.32,
|
||
E80: 0.22,
|
||
},
|
||
zhhgl: {
|
||
E60: 0.12,
|
||
E70: 0.12,
|
||
E80: 0.12,
|
||
},
|
||
},
|
||
{
|
||
date: "08-18",
|
||
ztl: {
|
||
E60: 0.42,
|
||
E70: 0.32,
|
||
E80: 0.22,
|
||
},
|
||
zhhgl: {
|
||
E60: 0.12,
|
||
E70: 0.12,
|
||
E80: 0.12,
|
||
},
|
||
},
|
||
{
|
||
date: "08-17",
|
||
ztl: {
|
||
E60: 0.42,
|
||
E70: 0.32,
|
||
E80: 0.22,
|
||
},
|
||
zhhgl: {
|
||
E60: 0.12,
|
||
E70: 0.12,
|
||
E80: 0.12,
|
||
},
|
||
},
|
||
{
|
||
date: "08-16",
|
||
ztl: {
|
||
E60: 0.42,
|
||
E70: 0.32,
|
||
E80: 0.22,
|
||
},
|
||
zhhgl: {
|
||
E60: 0.12,
|
||
E70: 0.12,
|
||
E80: 0.12,
|
||
},
|
||
},
|
||
],
|
||
threeDayReject: [
|
||
{
|
||
gid: "1",
|
||
date: "2022-08-06", //日期
|
||
materialName: "磷酸铁锂", //产品名称
|
||
productLevel: "E80", //产品等级
|
||
scpc: 2, //生产批次
|
||
cl: 2, //产量
|
||
jypc: 2, //检验批次
|
||
blpc: 0, //不良批次
|
||
bll: "0.123123123123", //不良率
|
||
},
|
||
{
|
||
gid: "2",
|
||
date: "2022-08-06", //日期
|
||
materialName: "磷酸铁锂", //产品名称
|
||
productLevel: "E80", //产品等级
|
||
scpc: 2, //生产批次
|
||
cl: 2, //产量
|
||
jypc: 2, //检验批次
|
||
blpc: 0, //不良批次
|
||
bll: "无", //不良率
|
||
},
|
||
{ gid: "3" },
|
||
{ gid: "4" },
|
||
{ gid: "5" },
|
||
{ gid: "6" },
|
||
{ gid: "7" },
|
||
{ gid: "8" },
|
||
{ gid: "9" },
|
||
],
|
||
taskRemind: [
|
||
{
|
||
gid: "1",
|
||
billstatus: "待检验", //任务状态
|
||
templatename: "测试工单批次生成质检任务", //任务名称
|
||
materialname: "L5车间成品", //产品名称
|
||
materialdesc: "E80A", //产品等级
|
||
workordercode: "HSR5A22082201", //批次号
|
||
processname: "粗磨", //工序
|
||
createtime: "2022-08-01 00:00:00", //任务产生时间
|
||
cxsc: "50分钟", //持续时长
|
||
ms: 1,
|
||
},
|
||
{
|
||
gid: "2",
|
||
billstatus: "待检验", //任务状态
|
||
templatename: "测试工单批次生成质检任务", //任务名称
|
||
materialname: "L5车间成品", //产品名称
|
||
materialdesc: "E80A", //产品等级
|
||
workordercode: "HSR5A22082201", //批次号
|
||
processname: "粗磨", //工序
|
||
createtime: "2022-08-01 00:00:00", //任务产生时间
|
||
cxsc: "50分钟", //持续时长
|
||
ms: 1000000,
|
||
},
|
||
{
|
||
gid: "3",
|
||
billstatus: "待检验", //任务状态
|
||
templatename: "测试工单批次生成质检任务", //任务名称
|
||
materialname: "L5车间成品", //产品名称
|
||
materialdesc: "E80A", //产品等级
|
||
workordercode: "HSR5A22082201", //批次号
|
||
processname: "粗磨", //工序
|
||
createtime: "2022-08-01 00:00:00", //任务产生时间
|
||
cxsc: "50分钟", //持续时长
|
||
ms: 30000,
|
||
},
|
||
{ gid: "4" },
|
||
{ gid: "5" },
|
||
{ gid: "6" },
|
||
{ gid: "7" },
|
||
{ gid: "8" },
|
||
{ gid: "9" },
|
||
],
|
||
};
|
||
|
||
// 今日合格率
|
||
const todayPassRateConfig = {
|
||
series: {
|
||
type: "liquidFill",
|
||
center: ["50%", "50%"],
|
||
radius: "75%",
|
||
data: [
|
||
{
|
||
value: 0.855,
|
||
itemStyle: {
|
||
opacity: 0.3,
|
||
},
|
||
},
|
||
0.855,
|
||
],
|
||
itemStyle: {},
|
||
label: {
|
||
position: ["50%", "30%"],
|
||
formatter: (opt) => `${parseFloat((opt.value * 100).toFixed(1))}%`,
|
||
fontSize: 28,
|
||
},
|
||
backgroundStyle: {
|
||
color: "none",
|
||
},
|
||
outline: {
|
||
show: true,
|
||
borderDistance: 2,
|
||
itemStyle: {
|
||
color: "none",
|
||
borderColor: "#f6202f",
|
||
borderWidth: 2,
|
||
},
|
||
},
|
||
},
|
||
};
|
||
let todayPassRateColors = {
|
||
red: {
|
||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "hsl(356deg 92% 65%)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "hsl(356deg 92% 25%)",
|
||
},
|
||
]),
|
||
color: "#f6202f",
|
||
},
|
||
green: {
|
||
fill: "#92D050",
|
||
color: "#92D050",
|
||
},
|
||
orange: {
|
||
fill: "#FFC000",
|
||
color: "#FFC000",
|
||
},
|
||
};
|
||
todayPassRateConfig.init = (pageData) => {
|
||
let { todayPassRate = 0, todayIsPass } = pageData;
|
||
let opt = _.cloneDeep(todayPassRateConfig);
|
||
opt.series.data[0].value = todayPassRate;
|
||
opt.series.data[1] = todayPassRate;
|
||
|
||
let { orange, green } = todayPassRateColors;
|
||
let { fill, color } = todayIsPass ? green : orange;
|
||
|
||
opt.series.itemStyle.color = fill;
|
||
opt.series.label.color = color;
|
||
opt.series.outline.itemStyle.borderColor = color;
|
||
return opt;
|
||
};
|
||
// 本月不良率TOP5
|
||
const monthUnPassConfig = {
|
||
color: ["#4D7BF3", "#4FCCFF", "#6EE420", "#FFC760", "#FF005A"],
|
||
legend: {
|
||
orient: "vertical",
|
||
left: 10,
|
||
top: "middle",
|
||
itemGap: 16,
|
||
textStyle: {
|
||
rich: {
|
||
0: { opacity: 0.75 },
|
||
1: { opacity: 1 },
|
||
},
|
||
},
|
||
},
|
||
series: {
|
||
type: "pie",
|
||
radius: ["40%", "70%"],
|
||
center: ["65%", "45%"],
|
||
label: {
|
||
show: true,
|
||
textBorderColor: "transparent",
|
||
rich: {
|
||
0: { color: "#4D7BF3" },
|
||
1: { color: "#4FCCFF" },
|
||
2: { color: "#6EE420" },
|
||
3: { color: "#FFC760" },
|
||
4: { color: "#FF005A" },
|
||
},
|
||
},
|
||
labelLine: {
|
||
show: true,
|
||
},
|
||
data: [],
|
||
},
|
||
};
|
||
monthUnPassConfig.init = (pageData) => {
|
||
let { monthUnPass } = pageData;
|
||
if (!monthUnPass) return;
|
||
let opt = _.cloneDeep(monthUnPassConfig);
|
||
opt.series.data = monthUnPass;
|
||
opt.legend.formatter = (name) => {
|
||
let { value } = monthUnPass.find((i) => i.name === name);
|
||
return `{0|${name}：}{1|${(value * 100).toFixed(2)}%}`;
|
||
};
|
||
opt.series.label.formatter = (data) => {
|
||
let { name, dataIndex } = data;
|
||
return `{${dataIndex}|${name}}`;
|
||
};
|
||
return opt;
|
||
};
|
||
// 合格率趋势
|
||
const passTrendConfig = {
|
||
grid: {
|
||
bottom: 40,
|
||
top: 80,
|
||
left: 70,
|
||
right: 70,
|
||
},
|
||
legend: {
|
||
right: 20,
|
||
top: 20,
|
||
},
|
||
barMaxWidth: 30,
|
||
xAxis: {
|
||
type: "category",
|
||
data: [],
|
||
axisTick: {
|
||
show: true,
|
||
alignWithLabel: true,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.65)",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,0.85)",
|
||
},
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
max: 1,
|
||
axisTick: {
|
||
show: true,
|
||
alignWithLabel: true,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.65)",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,0.85)",
|
||
formatter: (value) => (value * 100).toFixed(0) + "%",
|
||
},
|
||
},
|
||
{
|
||
type: "value",
|
||
max: 1,
|
||
axisTick: {
|
||
show: true,
|
||
alignWithLabel: true,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.65)",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,0.85)",
|
||
formatter: (value) => (value * 100).toFixed(0) + "%",
|
||
},
|
||
},
|
||
],
|
||
series: [],
|
||
};
|
||
const colors = [[new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||
offset: 1, color: 'rgb(249, 203, 173)'
|
||
}, {
|
||
offset: 0.26, color: 'rgb(183, 210, 236)'
|
||
}, {
|
||
offset: 0.16, color: 'rgb(183, 210, 236)'
|
||
}, {
|
||
offset: 0, color: 'rgb(208, 225, 242)'
|
||
}]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||
offset: 1, color: 'rgb(225, 193, 0)'
|
||
}, {
|
||
offset: 0.63, color: 'rgb(217, 199, 117)'
|
||
}, {
|
||
offset: 0.26, color: 'rgb(183, 210, 236)'
|
||
}, {
|
||
offset: 0.17, color: 'rgb(183, 210, 236)'
|
||
}, {
|
||
offset: 0, color: 'rgb(208, 225, 242)'
|
||
}]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||
offset: 1, color: 'rgb(169, 209, 142)'
|
||
}, {
|
||
offset: 0.26, color: 'rgb(183, 210, 236)'
|
||
}, {
|
||
offset: 0.16, color: 'rgb(183, 210, 236)'
|
||
}, {
|
||
offset: 0, color: 'rgb(208, 225, 242)'
|
||
}]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||
offset: 1, color: 'rgb(0, 176, 240)'
|
||
}, {
|
||
offset: 0.26, color: 'rgb(183, 210, 236)'
|
||
}, {
|
||
offset: 0.16, color: 'rgb(183, 210, 236)'
|
||
}, {
|
||
offset: 0, color: 'rgb(208, 225, 242)'
|
||
}]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||
offset: 1, color: 'rgb(191, 144, 0)'
|
||
}, {
|
||
offset: 0.26, color: 'rgb(183, 210, 236)'
|
||
}, {
|
||
offset: 0.16, color: 'rgb(183, 210, 236)'
|
||
}, {
|
||
offset: 0, color: 'rgb(208, 225, 242)'
|
||
}]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||
offset: 1, color: 'rgb(237, 125, 49)'
|
||
}, {
|
||
offset: 0.26, color: 'rgb(183, 210, 236)'
|
||
}, {
|
||
offset: 0.16, color: 'rgb(183, 210, 236)'
|
||
}, {
|
||
offset: 0, color: 'rgb(208, 225, 242)'
|
||
}]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||
offset: 1, color: 'rgb(255, 153, 153)'
|
||
}, {
|
||
offset: 0.26, color: 'rgb(183, 210, 236)'
|
||
}, {
|
||
offset: 0.16, color: 'rgb(183, 210, 236)'
|
||
}, {
|
||
offset: 0, color: 'rgb(208, 225, 242)'
|
||
}]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||
offset: 1, color: 'rgb(51, 102, 255)'
|
||
}, {
|
||
offset: 0.26, color: 'rgb(183, 210, 236)'
|
||
}, {
|
||
offset: 0.16, color: 'rgb(183, 210, 236)'
|
||
}, {
|
||
offset: 0, color: 'rgb(208, 225, 242)'
|
||
}]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||
offset: 1, color: 'rgb(0, 255, 153)'
|
||
}, {
|
||
offset: 0.26, color: 'rgb(183, 210, 236)'
|
||
}, {
|
||
offset: 0.16, color: 'rgb(183, 210, 236)'
|
||
}, {
|
||
offset: 0, color: 'rgb(208, 225, 242)'
|
||
}]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||
offset: 1, color: 'rgb(255, 51, 253)'
|
||
}, {
|
||
offset: 0.26, color: 'rgb(183, 210, 236)'
|
||
}, {
|
||
offset: 0.16, color: 'rgb(183, 210, 236)'
|
||
}, {
|
||
offset: 0, color: 'rgb(208, 225, 242)'
|
||
}])], [
|
||
"#3366FF", "#00CCFF", "#FF6699", "#8497B0", "#C9C9C9",
|
||
"#FFD966","#8FAADC","#ED7D31","#FFFF00","#92D050"
|
||
],
|
||
]
|
||
passTrendConfig.init = (pageData) => {
|
||
let { passTrend } = pageData;
|
||
if (!passTrend) return;
|
||
let opt = _.cloneDeep(passTrendConfig);
|
||
|
||
let { category, data } = passTrend;
|
||
opt.xAxis.data = category;
|
||
|
||
opt.series = [];
|
||
data.forEach((item, yAxisIndex) => {
|
||
let type = yAxisIndex === 0 ? "bar" : "line";
|
||
let { name: typeName } = item;
|
||
item.data.forEach(({ name: proName, data }, index) => {
|
||
let name = `${proName} ${typeName}`;
|
||
opt.series.push({ name, yAxisIndex, type, data, color: colors[yAxisIndex][index] });
|
||
});
|
||
});
|
||
return opt;
|
||
};
|
||
|
||
let chartConfig = (() => {
|
||
let chartOpt = {
|
||
todayPassRateConfig,
|
||
monthUnPassConfig,
|
||
passTrendConfig,
|
||
};
|
||
let getOpt = (type) => chartOpt[type];
|
||
return getOpt;
|
||
})();
|
||
|
||
export default withRouter(QualityBoard);
|