From 5107dd8ce89099577547cc36ca47578087715cfd Mon Sep 17 00:00:00 2001 From: lb Date: Fri, 15 Dec 2023 15:20:20 +0800 Subject: [PATCH] update isra --- .../Common/TodayFaultTotal/index.jsx | 4 +- .../Common/TodayFaultType/index.jsx | 224 +++++++++++++----- src/hooks/useSlider.js | 2 +- src/store/features/QualityIsraSlice.js | 8 +- src/store/features/kilnSlice.js | 2 +- src/utils/checkTypeHelper.ts | 2 +- src/utils/index.ts | 17 +- 7 files changed, 181 insertions(+), 78 deletions(-) diff --git a/src/components/Common/TodayFaultTotal/index.jsx b/src/components/Common/TodayFaultTotal/index.jsx index 1635d4c..e5f10c4 100644 --- a/src/components/Common/TodayFaultTotal/index.jsx +++ b/src/components/Common/TodayFaultTotal/index.jsx @@ -51,7 +51,7 @@ function getOptions(series, isra, currentStatistic) { color: "#DFF1FE", fontSize: 12, }, - data: isra.checkTypeList, + data: isra.checkType, }, xAxis: { type: "category", @@ -115,7 +115,7 @@ function FaultTotal(props) { ? isra.yearStatistic : []; - const series = preHandleStatisticData(currentStatistic, isra.checkTypeList); + const series = preHandleStatisticData(currentStatistic, isra.checkType); const options = getOptions(series, isra, currentStatistic); function handleDateChange(v) { diff --git a/src/components/Common/TodayFaultType/index.jsx b/src/components/Common/TodayFaultType/index.jsx index e1ef96e..81c378e 100644 --- a/src/components/Common/TodayFaultType/index.jsx +++ b/src/components/Common/TodayFaultType/index.jsx @@ -1,77 +1,22 @@ import cls from "./index.module.css"; import GraphBase from "../GraphBase"; import ReactECharts from "echarts-for-react"; -import { useSelector, useDispatch } from "react-redux"; +import { useSelector } from "react-redux"; import { useEffect, useState } from "react"; - -function getOptions(series) { - return { - color: ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160", "#FF8A40"], - grid: { - left: 24, - top: 10, - bottom: 10, - right: 24, - }, - legend: { - icon: "circle", - top: 32, - right: 0, - bottom: 32, - width: 296, - height: 130, - itemGap: 30, - formatter: function (name) { - return `${name} {sub|${ - series[0].data.find((o) => o.name == name).value - }}`; - }, - textStyle: { - color: "#DFF1FE", - fontSize: 18, - rich: { - sub: { - color: "#fff9", - fontSize: 18, - }, - }, - }, - }, - series, - }; -} - -function getSeries(currentStatistic, currentLine) { - const currentItem = currentStatistic.find((item) => item.name == currentLine); - return [ - { - type: "pie", - center: ["26%", "54%"], - radius: ["55%", "75%"], - avoidLabelOverlap: false, - label: { - show: true, - formatter: "{d}%", - fontSize: 14, - color: "inherit", - }, - labelLine: { - length: 0, - }, - data: currentItem.data.map((item) => ({ - value: item.checkNum, - name: item.checkType, - })), - }, - ]; -} +import { randomInt } from "../../../utils"; function FaultType(props) { const [init, setInit] = useState(true); const [currentLine, setCurrentLine] = useState(""); const isra = useSelector((state) => state.isra); const currentStatistic = isra.dayStatistic || []; + const currentLineStatistic = + currentLine != "" + ? currentStatistic.find((item) => item.name === currentLine)?.data || [] + : []; const lines = currentStatistic.map((item) => item.name); + const CHART_TYPE = "line"; // "pie" | "line"; + useEffect(() => { if (init == false) return; if (lines.length) { @@ -82,7 +27,12 @@ function FaultType(props) { const options = init ? {} - : getOptions(getSeries(currentStatistic, currentLine)); + : getOptions( + CHART_TYPE == "pie" + ? getSeries(currentStatistic, currentLine) + : currentLineStatistic, + CHART_TYPE + ); function handleLineChange(line) { setCurrentLine(line); @@ -124,3 +74,149 @@ function FaultType(props) { } export default FaultType; + +function getOptions(data, chart_type) { + const color = [ + "#2760FF", + "#8167F6", + "#5B9BFF", + "#99D66C", + "#FFD160", + "#FF8A40", + ]; + const grid = { + left: 24, + top: 10, + bottom: 10, + right: 24, + }; + const legend_common = { + icon: "circle", + top: 32, + right: 0, + bottom: 32, + width: 296, + height: 130, + itemGap: 30, + textStyle: { + color: "#DFF1FE", + fontSize: 18, + rich: { + sub: { + color: "#fff9", + fontSize: 18, + }, + }, + }, + }; + if (chart_type == "pie") { + return { + color, + grid, + legend: { + ...legend_common, + formatter: function (name) { + return `${name} {sub|${ + data[0].data.find((o) => o.name == name).value + }}`; + }, + }, + series: data, + }; + } else if (chart_type == "line") { + const dataList = data.map((item) => ({ + category: item.checkType, + value: item.checkNum, + })); + + return { + grid: { + top: 48, + left: 48, + bottom: 40, + right: 18, + }, + legend: { + ...legend_common, + }, + tooltip: { + trigger: "item", + }, + xAxis: { + type: "category", + data: (dataList || []).map((item) => item.category), + axisLabel: { + color: "#fff", + fontSize: 12, + rotate: 24, + }, + axisTick: { show: false }, + axisLine: { + lineStyle: { + width: 1, + color: "#213259", + }, + }, + }, + yAxis: { + name: "单位/个", + nameTextStyle: { + color: "#fff", + fontSize: 10, + align: "right", + }, + type: "value", + axisLabel: { + color: "#fff", + fontSize: 12, + formatter: "{value}", + }, + axisLine: { + show: true, + lineStyle: { + color: "#213259", + }, + }, + splitLine: { + lineStyle: { + color: "#213259a0", + }, + }, + }, + series: [ + { + type: "bar", + itemStyle: { + color: color[randomInt(0, color.length - 1)], + }, + data: (dataList || []).map((item) => item.value), + }, + ], + }; + } +} + +function getSeries(currentStatistic, currentLine) { + const currentItem = currentStatistic.find((item) => item.name == currentLine); + return [ + { + type: "pie", + center: ["26%", "54%"], + radius: ["55%", "75%"], + avoidLabelOverlap: false, + label: { + show: true, + formatter: "{d}%", + fontSize: 14, + color: "inherit", + }, + labelLine: { + length: 0, + }, + data: currentItem.data.map((item) => ({ + value: item.checkNum, + name: item.checkType, + })), + }, + ]; +} diff --git a/src/hooks/useSlider.js b/src/hooks/useSlider.js index eae1d87..bb23c59 100644 --- a/src/hooks/useSlider.js +++ b/src/hooks/useSlider.js @@ -40,7 +40,7 @@ export default function useSlider(defaultSize) { return () => { document.removeEventListener('keydown', fn); - document.getElementById('slider').removeEventListener('mouseleave', fn2); + document.getElementById('slider')?.removeEventListener('mouseleave', fn2); }; }, [value]); diff --git a/src/store/features/QualityIsraSlice.js b/src/store/features/QualityIsraSlice.js index 9904b91..abc6e38 100644 --- a/src/store/features/QualityIsraSlice.js +++ b/src/store/features/QualityIsraSlice.js @@ -1,7 +1,7 @@ import { createSlice } from "@reduxjs/toolkit"; export const initialState = { - checkTypeList: [], + checkType: [], dayStatistic: [], monthStatistic: [], yearStatistic: [], @@ -12,8 +12,8 @@ const israSlice = createSlice({ name: "isra", initialState, reducers: { - setCheckTypeList: (state, action) => { - state.checkTypeList = action.payload; + setCheckType: (state, action) => { + state.checkType = action.payload; }, setDayStatistic: (state, action) => { state.dayStatistic = action.payload; @@ -32,7 +32,7 @@ const israSlice = createSlice({ export default israSlice.reducer; export const { - setCheckTypeList, + setCheckType, setDayStatistic, setWeekStatistic, setMonthStatistic, diff --git a/src/store/features/kilnSlice.js b/src/store/features/kilnSlice.js index 8f163ed..78a5bf4 100644 --- a/src/store/features/kilnSlice.js +++ b/src/store/features/kilnSlice.js @@ -19,7 +19,7 @@ export const stateNameMap = { combustionAirPressure: "助燃风压力", topTemp: "碹顶加权温度", compressedAirPressure: "压缩气压力", - meltTemp: "融化加权温度", + meltTemp: "熔化加权温度", }; const kilnSlice = createSlice({ diff --git a/src/utils/checkTypeHelper.ts b/src/utils/checkTypeHelper.ts index 8883644..4271223 100644 --- a/src/utils/checkTypeHelper.ts +++ b/src/utils/checkTypeHelper.ts @@ -14,7 +14,7 @@ type ProductLineItem = { }; export type MessageItem = { - checkTypeList: string[]; + checkType: string[]; dayStatistic?: ProductLineItem[]; weekStatistic?: ProductLineItem[]; monthStatistic?: ProductLineItem[]; diff --git a/src/utils/index.ts b/src/utils/index.ts index 6f18d10..19822e3 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -40,7 +40,8 @@ class XClient { } new XClient( - "ws://m306416y13.yicp.fun:35441/xc-screen/websocket/xc001", + // "ws://m306416y13.yicp.fun:35441/xc-screen/websocket/xc001", + "ws://10.70.180.10:8081/xc-screen/websocket/xc001", // "ws://192.168.1.12:8081/xc-screen/websocket/xc001", "DCS_DATA", (msg: MessageEvent) => { @@ -175,7 +176,8 @@ new XClient( ); new XClient( - "ws://192.168.1.74:48080/websocket/message?userId=ENERGY111", + "ws://10.70.2.2:8080/websocket/message?userId=ENERGY111", + // "ws://192.168.1.74:48080/websocket/message?userId=ENERGY111", "MES_DATA", (msg) => { let serializedData: { type: string; data: any } | null = null; @@ -202,7 +204,8 @@ new XClient( // 产线缺陷相关数据 new XClient( - "ws://192.168.0.33:48082/websocket/message?userId=IS111", + "ws://10.70.2.2:8080/websocket/message?userId=IS111", + // "ws://192.168.0.33:48082/websocket/message?userId=IS111", "QUALITY_DATA", (msg) => { let serializedData: MessageItem | null = null; @@ -211,11 +214,15 @@ new XClient( } catch (error) { console.log("[*] websocket: [unable to serialize] ---> ", msg); } + + console.log("[ISRA DATA] ---> ", serializedData); + if (serializedData == null) return; + // 处理 checkTypeList store.dispatch({ - type: "isra/setCheckTypeList", - payload: serializedData.checkTypeList, + type: "isra/setCheckType", + payload: serializedData.checkType, }); // for (const checkType of serializedData.checkTypeList) { // store.dispatch({