1741 lines
43 KiB
JavaScript
1741 lines
43 KiB
JavaScript
import React, {
|
||
useRef,
|
||
useEffect,
|
||
useState,
|
||
useCallback,
|
||
useMemo,
|
||
} from "react";
|
||
import moment from "moment";
|
||
import _ from "lodash";
|
||
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 io from "../../../utils/socket.io.js";
|
||
import { getDailyBoard } from "../../../reportUtils/getQueryData";
|
||
import { parse } from "postcss";
|
||
|
||
const gutter = 20;
|
||
const bottom = 20;
|
||
const socketEmit = "timePerformanceGoodProduct";
|
||
const socketScreenType = "DailyPlanType";
|
||
|
||
// 调试方式: local 本地完整数据调试, server 接口调试, dev 开发期调试
|
||
const dataType = "server";
|
||
|
||
function PlanDailyBoard(props) {
|
||
const { config: { ioSocketUrl, planDailyConfig = {} } = {} } = global;
|
||
const { reloadTime = 5000, isSocket = true } = planDailyConfig;
|
||
// 月份
|
||
const [titlePrev, setTitlePrev] = useState("");
|
||
// 页面数据
|
||
const [pageData, setPageData] = useState(dataType === "dev" ? devData : {});
|
||
|
||
const socket = useRef();
|
||
|
||
// 当前时间
|
||
const curDateOpt = useMemo(() => {
|
||
const { curDate } = pageData;
|
||
if (curDate) {
|
||
setTitlePrev(`${moment(curDate).format("M")}月`);
|
||
return moment(curDate).format("YYYY-MM-DD");
|
||
} else return "";
|
||
}, [pageData.curDate]);
|
||
const materialInventoryAvailableDaysOpt = useMemo(() => {
|
||
const { materialInventoryAvailableDays } = pageData;
|
||
return materialInventoryAvailableDays;
|
||
}, [pageData.materialInventoryAvailableDays]);
|
||
// 当前时间
|
||
const goalAchievementRateDateOpt = useMemo(() => {
|
||
const { goalAchievementRateDate } = pageData;
|
||
if (!goalAchievementRateDate) return curDateOpt;
|
||
return goalAchievementRateDate;
|
||
}, [pageData.goalAchievementRateDate]);
|
||
// 上个月
|
||
const lastYearMonthOpt = useMemo(() => {
|
||
const { lastYearMonth } = pageData;
|
||
if (lastYearMonth) {
|
||
return lastYearMonth;
|
||
} else return "";
|
||
}, [pageData.lastYearMonth]);
|
||
|
||
// 月总产出
|
||
const mouthProdChart = useRef();
|
||
const mouthProdOpt = useMemo(
|
||
() => chartConfig("mouthProd").init(pageData.mouthProd),
|
||
[pageData]
|
||
);
|
||
|
||
// 月生产目标达成
|
||
const mouthAchieveChart = useRef();
|
||
const mouthAchieveOpt = useMemo(
|
||
() => chartConfig("mouthAchieve").init(pageData.mouthAchieve),
|
||
[pageData]
|
||
);
|
||
|
||
// 出货当月
|
||
const mouthOutputMemo = useMemo(
|
||
() =>
|
||
pageData.mouthOutput || {
|
||
total: 0,
|
||
totalRate: 0,
|
||
data: [],
|
||
names: [],
|
||
rates: [],
|
||
},
|
||
[pageData]
|
||
);
|
||
|
||
// 出货汇总
|
||
const totalOutputChart = useRef();
|
||
const totalOutputOpt = useMemo(
|
||
() => chartConfig("totalOutput").init(pageData.totalOutput),
|
||
[pageData]
|
||
);
|
||
|
||
// 生产目标达成
|
||
const prodPlanAchieveChart = useRef();
|
||
const prodPlanAchieveOpt = useMemo(
|
||
() => chartConfig("prodPlanAchieve").init(pageData.prodPlanAchieve),
|
||
[pageData]
|
||
);
|
||
|
||
// 原材料库存
|
||
const rawMaterialInventoryChart = useRef();
|
||
const rawMaterialInventoryOpt = useMemo(
|
||
() =>
|
||
chartConfig("rawMaterialInventory").init(pageData.rawMaterialInventory),
|
||
[pageData]
|
||
);
|
||
|
||
// 产品库存
|
||
const prodInventory = useRef();
|
||
const prodInventoryOpt = useMemo(() => {
|
||
let option = chartConfig("prodInventory").init(pageData.prodInventory);
|
||
option && (option.getRes = () => pageData.prodInventory);
|
||
return option;
|
||
}, [pageData]);
|
||
const prodInventoryTableOpt = useMemo(() => {
|
||
let { category = [], data = {} } = prodInventoryOpt?.getRes() || {};
|
||
let res = { cloumns: [...category, "合计"], data: [] };
|
||
let rowData = [];
|
||
let total = 0;
|
||
// Object.keys(data).forEach((key) => {
|
||
// data[key].forEach((val, index) => {
|
||
// if (rowData[index] === undefined || isNaN(rowData[index]))
|
||
// rowData[index] = 0;
|
||
// rowData[index] += val === undefined ? 0 : val;
|
||
// let ccval = parseFloat(parseFloat(rowData[index]).toFixed(0));
|
||
// rowData[index] = isNaN(ccval) ? 0 : ccval;
|
||
// total += val === undefined ? 0 : val;
|
||
// let tptalccval = parseFloat(parseFloat(total).toFixed(0));
|
||
// total = isNaN(tptalccval) ? 0 : tptalccval;
|
||
// });
|
||
// });
|
||
pageData.productInventoryTable?.forEach((item, index) => {
|
||
if (rowData[index] === undefined || isNaN(rowData[index])) {
|
||
rowData[index] = 0;
|
||
}
|
||
rowData[index] = parseFloat(parseFloat(item.inventoryQty).toFixed(0));
|
||
total += item.inventoryQty;
|
||
});
|
||
total = parseFloat(parseFloat(total).toFixed(0));
|
||
rowData.push(<span className="c-red">{total}</span>);
|
||
res.data[0] = rowData;
|
||
return res;
|
||
}, [prodInventoryOpt]);
|
||
|
||
// 历史库存
|
||
const historyInventory = useRef();
|
||
const historyInventoryOpt = useMemo(
|
||
() => chartConfig("historyInventory").init(pageData.historyInventory),
|
||
[pageData]
|
||
);
|
||
|
||
// 数据更新
|
||
useEffect(() => {
|
||
// 月总产出
|
||
mouthProdOpt && mouthProdChart.current.setOption(mouthProdOpt);
|
||
// 月目标达成
|
||
mouthAchieveOpt && mouthAchieveChart.current.setOption(mouthAchieveOpt);
|
||
// 出货汇总
|
||
totalOutputOpt && totalOutputChart.current.setOption(totalOutputOpt);
|
||
// 生产目标达成
|
||
prodPlanAchieveOpt &&
|
||
prodPlanAchieveChart.current.setOption(prodPlanAchieveOpt);
|
||
// 原材料库存
|
||
rawMaterialInventoryOpt &&
|
||
rawMaterialInventoryChart.current.setOption(rawMaterialInventoryOpt);
|
||
// 产品库存
|
||
prodInventoryOpt && prodInventory.current.setOption(prodInventoryOpt);
|
||
// 历史库存
|
||
historyInventoryOpt &&
|
||
historyInventory.current.setOption(historyInventoryOpt);
|
||
}, [
|
||
mouthProdOpt,
|
||
mouthAchieveOpt,
|
||
totalOutputOpt,
|
||
prodPlanAchieveOpt,
|
||
rawMaterialInventoryOpt,
|
||
prodInventoryOpt,
|
||
historyInventoryOpt,
|
||
]);
|
||
|
||
// 收到数据
|
||
const update = useCallback((data) => {
|
||
if (dataType === "local") data = localDataParse;
|
||
console.log("data", data);
|
||
|
||
let consoleError = (e, name, key) => {
|
||
console.log("--------------", name, " error", e);
|
||
console.log("localData: --------------", localDataParse[key]);
|
||
console.log("requestData: --------------", data[key]);
|
||
};
|
||
// 月总产出
|
||
let mouthProd;
|
||
try {
|
||
let res = {
|
||
category: [],
|
||
data: { prod: [], pect: [] },
|
||
};
|
||
let { goalAchievementDiagram = [] } = data;
|
||
goalAchievementDiagram
|
||
.sort((a, b) => b.productName.localeCompare(a.productName))
|
||
.forEach(({ productName, achievingRate, actualQty }) => {
|
||
res.category.push(productName);
|
||
res.data.prod.push(actualQty);
|
||
res.data.pect.push(achievingRate);
|
||
});
|
||
mouthProd = res;
|
||
} catch (e) {
|
||
consoleError(e, "月总产出", "goalAchievementDiagram");
|
||
}
|
||
// 月生产目标达成
|
||
let mouthAchieve;
|
||
try {
|
||
let res = {
|
||
category: [],
|
||
data: { plan: [], infect: [], achievement: [] },
|
||
};
|
||
let { goalAchievementHistogram = [] } = data;
|
||
var goalAchievementHistogramtmp = goalAchievementHistogram;
|
||
var llist = goalAchievementHistogramtmp.filter(
|
||
(x) => x.workLineName.substring(0, 1) === "L"
|
||
);
|
||
var otherlist = goalAchievementHistogramtmp.filter(
|
||
(x) => x.workLineName.substring(0, 1) !== "L"
|
||
);
|
||
llist.push(...otherlist);
|
||
var finallist = llist;
|
||
finallist.forEach(
|
||
({ workLineName, goalQty, actualQty, monthGoalQty }) => {
|
||
res.category.push(workLineName);
|
||
res.data.infect.push(actualQty);
|
||
res.data.plan.push(monthGoalQty);
|
||
res.data.achievement.push(goalQty === 0 ? 0 : actualQty / goalQty);
|
||
}
|
||
);
|
||
mouthAchieve = res;
|
||
} catch (e) {
|
||
consoleError(e, "月生产目标达成", "goalAchievementHistogram");
|
||
}
|
||
// 出货当月
|
||
let mouthOutput;
|
||
try {
|
||
let res = {
|
||
total: 0,
|
||
totalRate: 0,
|
||
data: [],
|
||
names: [],
|
||
rates: [],
|
||
};
|
||
let { shipmentDashBoard = {} } = data;
|
||
let { summary = {} } = shipmentDashBoard;
|
||
let { totalShipmentQty = 0, dtl = [], totalAchievingRate } = summary;
|
||
res.total = totalShipmentQty.toFixed(0);
|
||
res.totalRate = totalAchievingRate;
|
||
dtl
|
||
.sort((a, b) => b.customerName.localeCompare(a.customerName))
|
||
.forEach(({ customerName, shipmentQty, achievingRate, goalQty }) => {
|
||
res.names.push(customerName);
|
||
res.data.push(shipmentQty.toFixed(0));
|
||
res.rates.push(achievingRate);
|
||
});
|
||
mouthOutput = res;
|
||
// console.log("mouthOutput", mouthOutput, summary);
|
||
} catch (e) {
|
||
consoleError(e, "出货当月", "shipmentDashBoard");
|
||
}
|
||
// 出货汇总
|
||
let totalOutput;
|
||
try {
|
||
let { shipmentDashBoard = {} } = data;
|
||
let { shipmentPie = [] } = shipmentDashBoard;
|
||
totalOutput = shipmentPie.map(({ customerName: name, rate: value }) => ({
|
||
name,
|
||
value,
|
||
}));
|
||
//演示代码，后面要删除
|
||
// totalOutput.forEach((item) => {
|
||
// if (item.name === "C客户") {
|
||
// item.value = 0.78;
|
||
// } else if (item.name === "非C客户") {
|
||
// item.value = 0.9;
|
||
// }
|
||
// });
|
||
console.log("-----------totalOutput", totalOutput);
|
||
} catch (e) {
|
||
consoleError(e, "出货汇总", "shipmentPie");
|
||
}
|
||
// 生产目标达成
|
||
let prodPlanAchieve;
|
||
try {
|
||
let res = {
|
||
category: [],
|
||
data: { reach: [] },
|
||
};
|
||
let { goalAchievementRate = [] } = data;
|
||
goalAchievementRate.forEach(({ workCenterName, achievingRate }) => {
|
||
res.category.push(workCenterName);
|
||
res.data.reach.push(achievingRate);
|
||
});
|
||
prodPlanAchieve = res;
|
||
} catch (e) {
|
||
consoleError(e, "生产目标达成", "goalAchievementRate");
|
||
}
|
||
// 原材料库存
|
||
let rawMaterialInventory;
|
||
try {
|
||
let res = {
|
||
category: [],
|
||
names: [],
|
||
data: [],
|
||
};
|
||
let { materialInventoryDiagram = [] } = data;
|
||
let [data0, data1] = materialInventoryDiagram;
|
||
let dates = _.cloneDeep(data0.inventoryDate);
|
||
res.category = dates || [];
|
||
materialInventoryDiagram.forEach((item) => {
|
||
res.names.push(item.materialName);
|
||
res.data.push(item.inventoryQty);
|
||
});
|
||
|
||
rawMaterialInventory = res;
|
||
// }
|
||
} catch (e) {
|
||
consoleError(e, "原材料库存", "materialInventoryDiagram");
|
||
}
|
||
// 产品库存
|
||
let prodInventory;
|
||
try {
|
||
let res = {
|
||
category: [],
|
||
data: { qualified: [], review: [], inspecting: [], inspected: [] },
|
||
};
|
||
let { productInventoryHistogram = [] } = data;
|
||
productInventoryHistogram.forEach(
|
||
({
|
||
productName,
|
||
okQty,
|
||
reviewQty,
|
||
pendingInspectionQty,
|
||
inspectionQty,
|
||
}) => {
|
||
res.category.push(productName);
|
||
res.data.qualified.push(okQty);
|
||
res.data.review.push(reviewQty);
|
||
res.data.inspecting.push(pendingInspectionQty);
|
||
res.data.inspected.push(inspectionQty);
|
||
}
|
||
);
|
||
prodInventory = res;
|
||
} catch (e) {
|
||
consoleError(e, "产品库存", "productInventoryHistogram");
|
||
}
|
||
// 历史库存
|
||
let historyInventory;
|
||
try {
|
||
let res = {
|
||
category: [],
|
||
data: [],
|
||
};
|
||
let { historyInventory: history = [] } = data;
|
||
history.forEach(({ inventoryDate, inventoryQty },index) => {
|
||
//只保留8天的数据
|
||
//只保留8天所以计算下
|
||
let ca=history.length- 8 ;
|
||
if (index<ca) {
|
||
return;
|
||
}
|
||
res.category.push(inventoryDate);
|
||
res.data.push(inventoryQty);
|
||
});
|
||
historyInventory = res;
|
||
} catch (e) {
|
||
consoleError(e, "历史库存", "historyInventory");
|
||
}
|
||
|
||
let resData = {
|
||
curDate: data.curDate,
|
||
goalAchievementRateDate: data?.goalAchievementRateDate,
|
||
productInventoryTable: data?.productInventoryTable,
|
||
lastYearMonth: data?.lastYearMonth,
|
||
materialInventoryAvailableDays: data?.materialInventoryAvailableDays,
|
||
mouthProd,
|
||
mouthAchieve,
|
||
mouthOutput,
|
||
totalOutput,
|
||
prodPlanAchieve,
|
||
rawMaterialInventory,
|
||
prodInventory,
|
||
historyInventory,
|
||
};
|
||
console.log("resData", resData);
|
||
setPageData(resData);
|
||
}, []);
|
||
|
||
// 获取数据
|
||
const timeoutRef = useRef();
|
||
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") {
|
||
if (isSocket) {
|
||
socket.current.emit(socketEmit, "channel", { query });
|
||
} else {
|
||
getDailyBoard(date)
|
||
.then((res) => {
|
||
update(JSON.stringify(res));
|
||
})
|
||
.catch((err) => console.log(err));
|
||
}
|
||
} else if (dataType === "local") {
|
||
update();
|
||
}
|
||
clearTimeout(timeoutRef.current);
|
||
timeoutRef.current = setTimeout(getData, reloadTime);
|
||
}, []);
|
||
|
||
// 初始化加载
|
||
useEffect(() => {
|
||
if (dataType === "server") {
|
||
socket.current = io.connect(ioSocketUrl, {transports:['websocket']});
|
||
socket.current.on("connect", function () {
|
||
console.log("msg页面连接成功！");
|
||
getData();
|
||
});
|
||
if (isSocket)
|
||
socket.current.on(socketEmit, function (data) {
|
||
try {
|
||
data = JSON.parse(data);
|
||
} catch (e) {
|
||
console.log(e);
|
||
}
|
||
update(data.data);
|
||
});
|
||
} else if (dataType === "local") {
|
||
setTimeout(getData, 1000);
|
||
}
|
||
}, [isSocket]);
|
||
|
||
useEffect(() => {
|
||
return () => {
|
||
clearTimeout(timeoutRef.current);
|
||
};
|
||
}, []);
|
||
|
||
return (
|
||
<div className="screen-container">
|
||
<Header title={"计划日报看板"} time={curDateOpt} />
|
||
<div className="screen-container-content">
|
||
<Row style={{ height: "100%" }} gutter={gutter} bottom={bottom}>
|
||
<Row.Col style={{ width: "504px" }}>
|
||
<Row>
|
||
<Row.Col style={{ height: "268px", marginBottom: `${bottom}px` }}>
|
||
<Card
|
||
title={`${titlePrev}总产出(t)`}
|
||
titleSpace={false}
|
||
overVisible={true}
|
||
>
|
||
<Chart ref={mouthProdChart} />
|
||
</Card>
|
||
</Row.Col>
|
||
<Row.Col style={{ height: "604px" }}>
|
||
<Card
|
||
title={`${titlePrev}生产目标达成`}
|
||
titleSpace={false}
|
||
overVisible={true}
|
||
>
|
||
<Chart ref={mouthAchieveChart} />
|
||
</Card>
|
||
</Row.Col>
|
||
</Row>
|
||
</Row.Col>
|
||
<Row.Col style={{ width: "892px" }}>
|
||
<Row>
|
||
<Row.Col style={{ height: "210px", marginBottom: `${bottom}px` }}>
|
||
<Card
|
||
title={`${titlePrev}总出货（t）`}
|
||
titleSpace={true}
|
||
overVisible={true}
|
||
withBorder={false}
|
||
withBg={false}
|
||
>
|
||
<Row style={{ height: "100%" }}>
|
||
<Row.Col className="left" style={{ width: "60%" }}>
|
||
<div className="title">当月总交付情况</div>
|
||
<Row>
|
||
<Row.Col span={12}>
|
||
<NumCard data={mouthOutputMemo.total} />
|
||
<div className="monthInfo-total">
|
||
<div className="box">
|
||
进度达成：
|
||
{parseFloat(
|
||
(mouthOutputMemo.totalRate * 100).toFixed(1)
|
||
)}
|
||
%
|
||
</div>
|
||
</div>
|
||
</Row.Col>
|
||
<Row.Col span={12}>
|
||
<div className="monthInfo">
|
||
<div className="item">
|
||
<span className="title">
|
||
{mouthOutputMemo.names[0]}交货
|
||
</span>
|
||
<span className="num c-red">
|
||
{mouthOutputMemo.data[0]}
|
||
</span>
|
||
</div>
|
||
<div className="item m-b">
|
||
<span className="title">进度达成</span>
|
||
<span className="num">
|
||
{parseFloat(
|
||
(mouthOutputMemo.rates[0] * 100).toFixed(1)
|
||
)}
|
||
%
|
||
</span>
|
||
</div>
|
||
<div className="item">
|
||
<span className="title">
|
||
{mouthOutputMemo.names[1]}交货
|
||
</span>
|
||
<span className="num">
|
||
{mouthOutputMemo.data[1]}
|
||
</span>
|
||
</div>
|
||
<div className="item">
|
||
<span className="title">进度达成</span>
|
||
<span className="num">
|
||
{parseFloat(
|
||
(mouthOutputMemo.rates[1] * 100).toFixed(1)
|
||
)}
|
||
%
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</Row.Col>
|
||
</Row>
|
||
</Row.Col>
|
||
<Row.Col className="right" style={{ width: "40%" }}>
|
||
<div className="title pl-[42px] pr-[25px] text-center">
|
||
1-{lastYearMonthOpt}月汇总
|
||
</div>
|
||
<Chart ref={totalOutputChart} />
|
||
</Row.Col>
|
||
</Row>
|
||
</Card>
|
||
</Row.Col>
|
||
<Row.Col style={{ height: "304px", marginBottom: `${bottom}px` }}>
|
||
<Card
|
||
title={goalAchievementRateDateOpt + " 生产目标达成"}
|
||
titleSpace={true}
|
||
overVisible={true}
|
||
>
|
||
<Chart ref={prodPlanAchieveChart} />
|
||
</Card>
|
||
</Row.Col>
|
||
<Row.Col style={{ height: "338px" }}>
|
||
<Card
|
||
title="原材料库存情况(t)"
|
||
titleSpace={false}
|
||
overVisible={true}
|
||
>
|
||
<div className=" ml-44 text-lg absolute text-white">
|
||
{materialInventoryAvailableDaysOpt !== undefined ? (
|
||
Object.keys(materialInventoryAvailableDaysOpt).map(
|
||
(item, index) => {
|
||
console.log(item);
|
||
return (
|
||
<span>
|
||
{item}可用
|
||
<span className="m-2 text-xl text-red-600">
|
||
{materialInventoryAvailableDaysOpt[item]}
|
||
</span>
|
||
天{index === 0 ? "，" : ""}
|
||
</span>
|
||
);
|
||
}
|
||
)
|
||
) : (
|
||
<></>
|
||
)}
|
||
</div>
|
||
<Chart ref={rawMaterialInventoryChart} />
|
||
</Card>
|
||
</Row.Col>
|
||
</Row>
|
||
</Row.Col>
|
||
<Row.Col style={{ width: "504px" }}>
|
||
<Row>
|
||
<Row.Col style={{ height: "436px", marginBottom: `${bottom}px` }}>
|
||
<Card title="产品库存情况" titleSpace={true} overVisible={true}>
|
||
<div style={{ height: "20%", padding: "16px 20px 0" }}>
|
||
<SimpleTable {...prodInventoryTableOpt} />
|
||
</div>
|
||
<div style={{ height: "80%" }}>
|
||
<Chart ref={prodInventory} />
|
||
</div>
|
||
</Card>
|
||
</Row.Col>
|
||
<Row.Col style={{ height: "436px" }}>
|
||
<Card title="历史库存情况" titleSpace={true} overVisible={true}>
|
||
<Chart ref={historyInventory} />
|
||
</Card>
|
||
</Row.Col>
|
||
</Row>
|
||
</Row.Col>
|
||
</Row>
|
||
</div>
|
||
{/* <Footer withTime={false} showDate={curDateOpt} /> */}
|
||
<style jsx>{`
|
||
.screen-container {
|
||
height: 100vh;
|
||
min-height: 1080px;
|
||
min-width: 1920px;
|
||
overflow: auto;
|
||
background: url("/img/bg.png") center center;
|
||
position: relative;
|
||
padding-top: 96px;
|
||
padding-bottom: 82px;
|
||
overflow: hidden;
|
||
}
|
||
.screen-container-content {
|
||
height: 100%;
|
||
padding: 0 ${gutter}px;
|
||
}
|
||
.title {
|
||
font-size: 14px;
|
||
color: #fff;
|
||
line-height: 22px;
|
||
padding-top: 16px;
|
||
margin-bottom: 6px;
|
||
}
|
||
.monthInfo-total {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
line-height: 28px;
|
||
text-align: center;
|
||
padding: 8px 4px 0;
|
||
}
|
||
.monthInfo-total .box {
|
||
background: rgba(36, 53, 184, 0.5);
|
||
color: #00f7fb;
|
||
}
|
||
.monthInfo {
|
||
border-right: 2px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
.monthInfo .item.m-b {
|
||
margin-bottom: 14px;
|
||
}
|
||
.monthInfo .num,
|
||
.monthInfo .title {
|
||
line-height: 30px;
|
||
font-size: 18px;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
.monthInfo .title {
|
||
text-align: right;
|
||
width: 130px;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
.monthInfo .num {
|
||
font-weight: bold;
|
||
margin-left: 16px;
|
||
}
|
||
.monthInfo .num:not(.c-red) {
|
||
color: #00f7fb;
|
||
}
|
||
`}</style>
|
||
<style jsx global>{`
|
||
.c-red {
|
||
color: #ff005a;
|
||
}
|
||
`}</style>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function NumCard(props) {
|
||
let { data = 0 } = props;
|
||
const dataArr = useMemo(() => {
|
||
let res = data + "";
|
||
res = res.split("");
|
||
while (res.length < 4) res.unshift("");
|
||
return res;
|
||
}, [data]);
|
||
return (
|
||
<div className="num-card">
|
||
{dataArr.map((num, index) => (
|
||
<div className="num-card-item" key={index}>
|
||
<div className="text">{num}</div>
|
||
</div>
|
||
))}
|
||
<style jsx>{`
|
||
.num-card {
|
||
height: 100px;
|
||
line-height: 100px;
|
||
text-align: center;
|
||
color: #00f7fb;
|
||
font-size: 44px;
|
||
font-weight: bold;
|
||
}
|
||
.num-card-item {
|
||
float: left;
|
||
height: 100%;
|
||
width: ${100 / dataArr.length}%;
|
||
position: relative;
|
||
padding: 0 4px;
|
||
}
|
||
.num-card-item::before {
|
||
content: "";
|
||
display: block;
|
||
background: linear-gradient(
|
||
to bottom,
|
||
rgba(0, 76, 167, 0.2),
|
||
rgba(36, 53, 184, 0.5)
|
||
);
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
.text {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
`}</style>
|
||
</div>
|
||
);
|
||
}
|
||
function SimpleTable(props) {
|
||
let { cloumns = [], data = [] } = props;
|
||
|
||
return (
|
||
<div className="simple-table">
|
||
<div className="simple-table-header row">
|
||
{cloumns.map((text) => {
|
||
return (
|
||
<div key={text} className="item">
|
||
{text}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
<div className="simple-table-body">
|
||
{data.map((rowData, index) => {
|
||
return (
|
||
<div key={index} className="row">
|
||
{rowData.map((text) => {
|
||
return (
|
||
<div key={text} className="item">
|
||
{text}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
<style jsx>{`
|
||
.simple-table {
|
||
line-height: 32px;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
}
|
||
.simple-table-header {
|
||
overflow: hidden;
|
||
background: rgba(40, 163, 255, 25%);
|
||
color: rgba(255, 255, 255, 85%);
|
||
}
|
||
.simple-table-body {
|
||
overflow: hidden;
|
||
background: rgba(40, 163, 255, 10%);
|
||
color: #fff;
|
||
}
|
||
.simple-table .item {
|
||
width: ${100 / (cloumns.length || 1)}%;
|
||
float: left;
|
||
}
|
||
.simple-table .row:not(:last-child) {
|
||
border-bottom: 1px solid;
|
||
}
|
||
.simple-table .item:not(:last-child) {
|
||
border-right: 1px solid;
|
||
}
|
||
.simple-table .row:not(:last-child),
|
||
.simple-table .item:not(:last-child) {
|
||
border-color: #09213d;
|
||
}
|
||
`}</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 PlanDailyBoard;
|
||
|
||
// 月总产出
|
||
let mouthProd = {
|
||
grid: {
|
||
bottom: 30,
|
||
top: 60,
|
||
left: 60,
|
||
right: 70,
|
||
},
|
||
legend: {
|
||
top: 15,
|
||
right: 10,
|
||
textStyle: {
|
||
fontSize: 14,
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: [],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.65)",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: true,
|
||
alignWithLabel: true,
|
||
},
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,0.85)",
|
||
},
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
min: 0,
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,0.85)",
|
||
},
|
||
},
|
||
{
|
||
type: "value",
|
||
min: 0,
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,0.85)",
|
||
formatter: (value) => `${100 * value}%`,
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
data: [],
|
||
type: "bar",
|
||
barWidth: 28,
|
||
name: "实际",
|
||
itemStyle: {
|
||
color: "#2D99FF",
|
||
},
|
||
label: {
|
||
show: true,
|
||
align: "center",
|
||
width: 200,
|
||
position: ["50%", "50%"],
|
||
textBorderColor: "transparent",
|
||
color: "#fff",
|
||
},
|
||
},
|
||
{
|
||
data: [],
|
||
yAxisIndex: 1,
|
||
type: "line",
|
||
name: "达成率",
|
||
itemStyle: {
|
||
color: "#F5A623",
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
textBorderColor: "transparent",
|
||
color: "#F5A623",
|
||
formatter: (data) => `${parseInt(100 * data.value)}%`,
|
||
},
|
||
},
|
||
],
|
||
};
|
||
mouthProd.init = (res) => {
|
||
if (!res) return;
|
||
let opt = _.cloneDeep(mouthProd);
|
||
let { category, data } = res;
|
||
let { pect, prod } = data;
|
||
prod = prod.map((i) => parseInt(i));
|
||
pect = pect.map((i) => i);
|
||
// 分类
|
||
opt.xAxis.data = category;
|
||
// 实际生产数据
|
||
opt.series[0].data = prod;
|
||
// 达成率
|
||
opt.series[1].data = pect;
|
||
|
||
return opt;
|
||
};
|
||
|
||
// 月生产目标达成
|
||
let mouthAchieve = {
|
||
legend: {
|
||
top: 15,
|
||
right: 10,
|
||
textStyle: {
|
||
fontSize: 14,
|
||
},
|
||
},
|
||
|
||
barWidth: 10,
|
||
barGap: "40%",
|
||
grid: {
|
||
bottom: 40,
|
||
top: 60,
|
||
left: 60,
|
||
right: 70,
|
||
},
|
||
xAxis: {
|
||
type: "value",
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.65)",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,0.85)",
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "category",
|
||
inverse: true,
|
||
axisTick: {
|
||
show: true,
|
||
alignWithLabel: true,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.65)",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,0.85)",
|
||
},
|
||
data: [],
|
||
},
|
||
series: [
|
||
{
|
||
name: "目标",
|
||
type: "bar",
|
||
data: [],
|
||
label: {
|
||
show: true,
|
||
position: "right",
|
||
textBorderColor: "transparent",
|
||
color: "#fff",
|
||
},
|
||
itemStyle: {
|
||
color: "#2D99FF",
|
||
},
|
||
},
|
||
{
|
||
name: "实际",
|
||
type: "bar",
|
||
data: [],
|
||
label: {
|
||
show: true,
|
||
position: "right",
|
||
textBorderColor: "transparent",
|
||
color: "#fff",
|
||
},
|
||
itemStyle: {
|
||
color: "#6FE621",
|
||
},
|
||
},
|
||
{
|
||
name: "达成率",
|
||
type: "line",
|
||
data: [],
|
||
symbolSize: 0,
|
||
lineStyle: {
|
||
width: 0,
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: "right",
|
||
textBorderColor: "transparent",
|
||
offset: [30, 0],
|
||
color: "#F6BD16",
|
||
},
|
||
itemStyle: {
|
||
color: "#F6BD16",
|
||
},
|
||
},
|
||
],
|
||
};
|
||
mouthAchieve.init = (res) => {
|
||
if (!res) return;
|
||
let opt = _.cloneDeep(mouthAchieve);
|
||
let { category, data } = res;
|
||
let { achievement, infect, plan } = data;
|
||
// 分类
|
||
opt.yAxis.data = category;
|
||
// 目标 数据
|
||
opt.series[0].data = plan.map((i) => parseFloat(i));
|
||
// 实际 数据
|
||
opt.series[1].data = infect.map((i) => parseFloat(i));
|
||
// 达成率 数据
|
||
opt.series[2].data = plan
|
||
.map((planVal, index) => Math.max(planVal, infect[index]))
|
||
.map((i) => parseFloat(i));
|
||
opt.series[2].label.formatter = ({ dataIndex }) =>
|
||
` ${(100 * achievement[dataIndex]).toFixed(0)}%`;
|
||
|
||
return opt;
|
||
};
|
||
|
||
// 出货汇总
|
||
let totalOutputBase = {
|
||
type: "gauge",
|
||
startAngle: 90,
|
||
radius: "70%",
|
||
max: 1,
|
||
endAngle: -270,
|
||
pointer: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
width: 16,
|
||
color: [[1, "#28A3FF"]],
|
||
opacity: 0.15,
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
progress: {
|
||
show: true,
|
||
overlap: false,
|
||
clip: true,
|
||
itemStyle: {
|
||
color: "#2D99FF",
|
||
},
|
||
},
|
||
title: {
|
||
fontSize: 14,
|
||
offsetCenter: [0, -14],
|
||
color: "#fff",
|
||
},
|
||
detail: {
|
||
width: 50,
|
||
height: 14,
|
||
fontSize: 20,
|
||
formatter: (val) => `${parseInt(100 * val)}%`,
|
||
valueAnimation: true,
|
||
offsetCenter: [0, 10],
|
||
color: "#fff",
|
||
},
|
||
};
|
||
let totalOutput = {
|
||
series: [
|
||
Object.assign({ center: ["30%", "36%"] }, totalOutputBase),
|
||
Object.assign({ center: ["75%", "36%"] }, totalOutputBase),
|
||
],
|
||
};
|
||
totalOutput.init = (res) => {
|
||
if (!res) return;
|
||
let opt = _.cloneDeep(totalOutput);
|
||
let [res0, res1] = res;
|
||
opt.series[0].data = [res0];
|
||
opt.series[1].data = [res1];
|
||
return opt;
|
||
};
|
||
|
||
// 生产目标达成
|
||
let prodPlanAchieve = {
|
||
grid: {
|
||
bottom: 40,
|
||
top: 30,
|
||
left: 70,
|
||
right: 40,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: [],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.65)",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: true,
|
||
alignWithLabel: true,
|
||
},
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,0.85)",
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
max: 1,
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,0.85)",
|
||
formatter: (value) => `${parseInt(100 * value)}%`,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.65)",
|
||
},
|
||
},
|
||
},
|
||
series: {
|
||
data: [],
|
||
type: "bar",
|
||
barWidth: 28,
|
||
showBackground: true,
|
||
itemStyle: {
|
||
color: "#6FE621",
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
textBorderColor: "transparent",
|
||
color: "#fff",
|
||
formatter: (data) => `${parseInt(100 * data.value)}%`,
|
||
},
|
||
backgroundStyle: {
|
||
color: "rgba(45, 153, 255, 0.3)",
|
||
},
|
||
},
|
||
};
|
||
prodPlanAchieve.init = (res) => {
|
||
if (!res) return;
|
||
let opt = _.cloneDeep(prodPlanAchieve);
|
||
let { category, data } = res;
|
||
let { reach } = data;
|
||
|
||
opt.xAxis.data = category;
|
||
opt.series.data = reach.map((i) => parseFloat(i.toFixed(2)));
|
||
return opt;
|
||
};
|
||
|
||
// 原材料库存
|
||
let rawMaterialInventory = {
|
||
grid: {
|
||
bottom: 40,
|
||
top: 80,
|
||
left: 70,
|
||
right: 70,
|
||
},
|
||
legend: {
|
||
top: 15,
|
||
right: 10,
|
||
textStyle: {
|
||
fontSize: 14,
|
||
},
|
||
},
|
||
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)",
|
||
interval: 0,
|
||
// rotate:45,
|
||
formatter: function (value) {
|
||
//x轴的文字改为竖版显示
|
||
// var str = value.split("");
|
||
return value.replace("-", "/");
|
||
},
|
||
},
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
// splitNumber: 3,
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,0.85)",
|
||
formatter: (value) => parseFloat(value.toFixed(1)),
|
||
},
|
||
},
|
||
{
|
||
type: "value",
|
||
// splitNumber: 3,
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,0.85)",
|
||
formatter: (value) => parseFloat(value.toFixed(1)),
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "",
|
||
type: "line",
|
||
symbol: "rect",
|
||
symbolSize: 0,
|
||
smooth: 0.5,
|
||
lineStyle: {
|
||
width: 0,
|
||
},
|
||
areaStyle: {
|
||
opacity: 0.6,
|
||
color: "#2D99FF",
|
||
},
|
||
data: [],
|
||
label: {
|
||
show: true,
|
||
position: "insideTop",
|
||
textBorderColor: "transparent",
|
||
color: "#fff",
|
||
|
||
// padding:[100,0,0,0], //调整上的位置
|
||
},
|
||
},
|
||
{
|
||
name: "",
|
||
type: "line",
|
||
yAxisIndex: 1,
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
textBorderColor: "transparent",
|
||
color: "#F5A623",
|
||
},
|
||
data: [],
|
||
},
|
||
],
|
||
};
|
||
rawMaterialInventory.init = (res) => {
|
||
if (!res) return;
|
||
let opt = _.cloneDeep(rawMaterialInventory);
|
||
let { category, names, data } = res;
|
||
|
||
opt.xAxis.data = category.map((date) => moment(date).format("M-D"));
|
||
opt.series[0].data = data[0].map((i) => {
|
||
if (i === null) return i;
|
||
return parseFloat(i.toFixed(1));
|
||
});
|
||
opt.series[0].name = names[0] + " 库存量";
|
||
data[1] &&
|
||
(opt.series[1].data = data[1].map((i) => {
|
||
if (i === null) return i;
|
||
return parseFloat(i.toFixed(1));
|
||
}));
|
||
names[1] && (opt.series[1].name = names[1] + " 库存量");
|
||
|
||
return opt;
|
||
};
|
||
|
||
// 产品库存
|
||
let prodInventory = {
|
||
grid: {
|
||
bottom: 40,
|
||
top: 60,
|
||
left: 70,
|
||
right: 30,
|
||
},
|
||
barWidth: 32,
|
||
legend: {
|
||
top: 15,
|
||
right: 10,
|
||
textStyle: {
|
||
fontSize: 14,
|
||
},
|
||
},
|
||
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",
|
||
axisTick: {
|
||
show: true,
|
||
alignWithLabel: true,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.65)",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,0.85)",
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "合格数量",
|
||
type: "bar",
|
||
stack: "Ad",
|
||
data: [],
|
||
itemStyle: {
|
||
color: "#6FE621",
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: "inside",
|
||
textBorderColor: "transparent",
|
||
color: "#fff",
|
||
},
|
||
},
|
||
{
|
||
name: "待评审数量",
|
||
type: "bar",
|
||
stack: "Ad",
|
||
data: [],
|
||
itemStyle: {
|
||
color: "#2D99FF",
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: "inside",
|
||
textBorderColor: "transparent",
|
||
color: "#fff",
|
||
},
|
||
},
|
||
{
|
||
name: "在检未出数据",
|
||
type: "bar",
|
||
stack: "Ad",
|
||
data: [],
|
||
itemStyle: {
|
||
color: "#F6BD16",
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: "inside",
|
||
textBorderColor: "transparent",
|
||
color: "#fff",
|
||
},
|
||
},
|
||
{
|
||
name: "已评审待处理",
|
||
type: "bar",
|
||
stack: "Ad",
|
||
data: [],
|
||
itemStyle: {
|
||
color: "#95D8B9",
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: "inside",
|
||
textBorderColor: "transparent",
|
||
color: "#fff",
|
||
},
|
||
},
|
||
],
|
||
};
|
||
prodInventory.init = (res) => {
|
||
if (!res) return;
|
||
let opt = _.cloneDeep(prodInventory);
|
||
let { category, data } = res;
|
||
let { qualified, review, inspecting, inspected } = data;
|
||
|
||
opt.xAxis.data = category;
|
||
opt.series[0].data = qualified;
|
||
opt.series[1].data = review;
|
||
opt.series[2].data = inspecting;
|
||
opt.series[3].data = inspected;
|
||
|
||
return opt;
|
||
};
|
||
|
||
// 历史库存
|
||
let historyInventory = {
|
||
grid: {
|
||
bottom: 40,
|
||
top: 30,
|
||
left: 70,
|
||
right: 30,
|
||
},
|
||
barWidth: 16,
|
||
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",
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.65)",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,0.85)",
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "碳酸铁 库存量",
|
||
type: "bar",
|
||
data: [],
|
||
itemStyle: {
|
||
color: "#F6BD16",
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
textBorderColor: "transparent",
|
||
color: "#fff",
|
||
},
|
||
},
|
||
],
|
||
};
|
||
historyInventory.init = (res) => {
|
||
if (!res) return;
|
||
let opt = _.cloneDeep(historyInventory);
|
||
let { category, data } = res;
|
||
|
||
opt.xAxis.data = category.map((date) => moment(date).format("M/D"));
|
||
opt.series[0].data = data.map((i) => parseFloat(i.toFixed(0)));
|
||
|
||
return opt;
|
||
};
|
||
|
||
let chartConfig = (() => {
|
||
let chartOpt = {
|
||
mouthProd,
|
||
mouthAchieve,
|
||
totalOutput,
|
||
prodPlanAchieve,
|
||
rawMaterialInventory,
|
||
prodInventory,
|
||
historyInventory,
|
||
};
|
||
let getOpt = (type) => chartOpt[type];
|
||
return getOpt;
|
||
})();
|
||
|
||
// dev 数据
|
||
let dates1 = [];
|
||
for (let i = 0; i < 20; i++) dates1.push(`7-${i + 1}`);
|
||
let dates2 = [];
|
||
for (let i = 0; i < 10; i++) dates2.push(`7-${i + 1}`);
|
||
const devData = {
|
||
curDate: "2022-08-03",
|
||
mouthProd: {
|
||
category: ["磷酸锂铁", "磷酸铁", "高镍三元"],
|
||
data: {
|
||
prod: [1269, 452, 852],
|
||
pect: [0.89, 0.56, 0.763],
|
||
},
|
||
},
|
||
mouthAchieve: {
|
||
category: [
|
||
"L1-A",
|
||
"L1-B",
|
||
"L2-A",
|
||
"L2-B",
|
||
"L3-B",
|
||
"L3-B",
|
||
"L4-A",
|
||
"L4-B",
|
||
"L5-A",
|
||
"L5-B",
|
||
"L6-B",
|
||
"L6-B",
|
||
"F1",
|
||
"F2",
|
||
"F3",
|
||
"N1",
|
||
],
|
||
data: {
|
||
plan: [
|
||
890, 600, 580, 720, 580, 580, 580, 890, 600, 580, 720, 580, 580, 890,
|
||
600, 580,
|
||
],
|
||
infect: [
|
||
600, 200, 600, 384, 799, 600, 600, 600, 200, 600, 384, 799, 600, 600,
|
||
200, 600,
|
||
],
|
||
achievement: [
|
||
0.6123, 0.6356, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6,
|
||
0.6, 0.6, 0.6,
|
||
],
|
||
},
|
||
},
|
||
mouthOutput: {
|
||
total: 319 + 271,
|
||
totalRate: 0.12,
|
||
data: [319, 271],
|
||
names: ["C公司", "非C公司"],
|
||
rates: [0.12, 0.12],
|
||
},
|
||
totalOutput: [
|
||
{ value: 0.234, name: "C公司" },
|
||
{ value: 0.234, name: "非C公司" },
|
||
],
|
||
prodPlanAchieve: {
|
||
category: ["L1", "L2", "L3", "L4", "L5", "L6", "F1", "F2", "F3", "N1"],
|
||
data: {
|
||
reach: [0.79, 0.4, 1.09, 0.33, 0.4, 0.56, 0.4, 0.86, 0.49, 0.79],
|
||
},
|
||
},
|
||
rawMaterialInventory: {
|
||
category: dates1,
|
||
names: ["碳酸铁", "碳酸锂"],
|
||
data: [
|
||
[
|
||
3900,
|
||
4900,
|
||
null,
|
||
4900,
|
||
4300,
|
||
3900,
|
||
null,
|
||
5100,
|
||
null,
|
||
4300,
|
||
3900,
|
||
4900,
|
||
5100,
|
||
4900,
|
||
4300,
|
||
4900,
|
||
5100,
|
||
null,
|
||
4300,
|
||
4300,
|
||
],
|
||
[
|
||
5100,
|
||
6200,
|
||
6400,
|
||
5500,
|
||
null,
|
||
6200,
|
||
6400,
|
||
5500,
|
||
5100,
|
||
null,
|
||
6400,
|
||
null,
|
||
5100,
|
||
6200,
|
||
6400,
|
||
5500,
|
||
5100,
|
||
null,
|
||
6400,
|
||
6200,
|
||
],
|
||
],
|
||
},
|
||
prodInventory: {
|
||
category: ["E80", "E80A", "E70", "E90", "W80S"],
|
||
data: {
|
||
qualified: [3900, 4900, 5100, 4900, 4300],
|
||
review: [5100, 6200, 6400, 5500, 5100],
|
||
inspecting: [5100, 6200, 6400, 5500, 5100],
|
||
inspected: [5100, 6200, 6400, 5500, 5100],
|
||
},
|
||
},
|
||
historyInventory: {
|
||
category: dates2,
|
||
data: [3900, 4900, 5100, 4900, 4300, 5100, 4900, 4300, 4900, 4300],
|
||
},
|
||
};
|
||
|
||
// local 数据
|
||
const localDataParse = {
|
||
// #当前日期
|
||
curDate: "2022-06-03",
|
||
// #8月产出
|
||
goalAchievementDiagram: [
|
||
{
|
||
productName: "磷酸铁锂",
|
||
achievingRate: 0.57,
|
||
actualQty: 1268,
|
||
},
|
||
],
|
||
// #8月份生产目标达成
|
||
goalAchievementHistogram: [
|
||
{
|
||
workLineName: "L1-A",
|
||
goalQty: 890,
|
||
actualQty: 600,
|
||
},
|
||
],
|
||
// #生产目标达成
|
||
goalAchievementRate: [
|
||
{
|
||
workCenterName: "L1",
|
||
achievingRate: 0.57,
|
||
},
|
||
],
|
||
// #产品库存情况
|
||
productInventoryTable: [
|
||
{
|
||
productName: "E80",
|
||
inventoryQty: 1000,
|
||
},
|
||
],
|
||
// #产品库存柱状图
|
||
productInventoryHistogram: [
|
||
{
|
||
productName: "E80",
|
||
okQty: 600,
|
||
reviewQty: 300,
|
||
pendingInspectionQty: 100,
|
||
},
|
||
],
|
||
// #原材料库存情况
|
||
materialInventoryDiagram: [
|
||
{
|
||
inventoryDate: ["2022-08-02"],
|
||
materialName: "磷酸铁锂",
|
||
inventoryQty: [3532.45],
|
||
},
|
||
{
|
||
inventoryDate: ["2022-08-02"],
|
||
materialName: "碳酸锂",
|
||
inventoryQty: [3932.45],
|
||
},
|
||
],
|
||
// #8月份出货
|
||
shipmentDashBoard: {
|
||
// #1-7月汇总
|
||
shipmentPie: [
|
||
{
|
||
customerName: "C公司",
|
||
rate: 0.76,
|
||
},
|
||
{
|
||
customerName: "非C公司",
|
||
rate: 1.76,
|
||
},
|
||
],
|
||
// #当月情况
|
||
summary: {
|
||
totalShipmentQty: 7339,
|
||
totalAchievingRate: 1.11, //进度达成
|
||
dtl: [
|
||
{
|
||
achievingRate: 1.11, //进度达成
|
||
customerName: "C公司",
|
||
shipmentQty: 4132,
|
||
goalQty: 4500.0,
|
||
},
|
||
{
|
||
achievingRate: 1.01, //进度达成
|
||
customerName: "非C公司",
|
||
shipmentQty: 4132,
|
||
goalQty: 4400.0,
|
||
},
|
||
],
|
||
},
|
||
},
|
||
// #历史库存情况
|
||
historyInventory: [
|
||
{
|
||
inventoryDate: "5/31",
|
||
inventoryQty: 200,
|
||
},
|
||
],
|
||
};
|
||
const localData = JSON.stringify(localDataParse);
|