update isra

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) {

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";
-
+import { randomInt } from "../../../utils";
-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,
-      })),
-    },
-  ];
-}
 
 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,
+      })),
+    },
+  ];
+}

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]);
 

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) => {
+    setCheckType: (state, action) => {
-      state.checkTypeList = action.payload;
+      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,

src/store/features/kilnSlice.js

@@ -19,7 +19,7 @@ export const stateNameMap = {
   combustionAirPressure: "助燃风压力",
   topTemp: "碹顶加权温度",
   compressedAirPressure: "压缩气压力",
-  meltTemp: "融化加权温度",
+  meltTemp: "熔化加权温度",
 };
 
 const kilnSlice = createSlice({

src/utils/checkTypeHelper.ts

@@ -14,7 +14,7 @@ type ProductLineItem = {
 };
 
 export type MessageItem = {
-  checkTypeList: string[];
+  checkType: string[];
   dayStatistic?: ProductLineItem[];
   weekStatistic?: ProductLineItem[];
   monthStatistic?: ProductLineItem[];

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",
+      type: "isra/setCheckType",
-      payload: serializedData.checkTypeList,
+      payload: serializedData.checkType,
     });
     // for (const checkType of serializedData.checkTypeList) {
     //   store.dispatch({