From 0b91868b4f7355b32294fd19e95c7cf433dfc1a6 Mon Sep 17 00:00:00 2001 From: lb Date: Fri, 15 Dec 2023 11:16:54 +0800 Subject: [PATCH 1/3] update --- .../Common/BlueRect/index.module.css | 68 +++++++++---------- src/components/Common/Feeder/index.jsx | 2 +- .../Center/videoComponents/EnterToFloor1.jsx | 11 +-- .../Center/videoComponents/Floor1To2.jsx | 9 +-- .../Center/videoComponents/Floor2To1.jsx | 15 ++-- 5 files changed, 54 insertions(+), 51 deletions(-) diff --git a/src/components/Common/BlueRect/index.module.css b/src/components/Common/BlueRect/index.module.css index b830ebc..4e139d5 100644 --- a/src/components/Common/BlueRect/index.module.css +++ b/src/components/Common/BlueRect/index.module.css @@ -94,69 +94,69 @@ /** center top **/ .TE227 { top: 128px; - left: 660px; + left: 630px; } .TE229 { top: 128px; - left: 776px; /* +120px */ + left: 746px; /* +120px */ } .TE231 { top: 128px; - left: 896px; + left: 866px; } .TE233 { top: 128px; - left: 1006px; + left: 980px; } .TE235 { top: 128px; - left: 1119px; + left: 1100px; } .TE237 { top: 128px; - left: 1236px; + left: 1220px; } .TE239 { top: 128px; - left: 1346px; + left: 1330px; } .TE241 { top: 128px; - left: 1456px; + left: 1450px; } /** center bottom **/ .TE228 { top: 620px; - left: 628px; + left: 600px; } .TE230 { top: 620px; - left: 750px; + left: 720px; } .TE232 { top: 620px; - left: 870px; + left: 850px; } .TE234 { top: 620px; - left: 995px; + left: 970px; } .TE236 { top: 620px; - left: 1120px; + left: 1100px; } .TE238 { top: 620px; - left: 1245px; + left: 1225px; } .TE240 { top: 620px; - left: 1370px; + left: 1350px; } .TE242 { top: 620px; - left: 1480px; + left: 1470px; } /** center middle **/ @@ -244,7 +244,7 @@ left: 2070px; } .TE218 { - top: 640px; + top: 660px; left: 2090px; } .TE219 { @@ -264,7 +264,7 @@ left: 2180px; } .TE223 { - top: 640px; + top: 660px; left: 2200px; } .TE224 { @@ -309,69 +309,69 @@ /** center top **/ .TE333 { top: 128px; - left: 620px; + left: 670px; } .TE335 { top: 128px; - left: 735px; + left: 785px; } .TE337 { top: 128px; - left: 855px; + left: 890px; } .TE339 { top: 128px; - left: 975px; + left: 1010px; } .TE341 { top: 128px; - left: 1090px; + left: 1120px; } .TE343 { top: 128px; - left: 1205px; + left: 1235px; } .TE345 { top: 128px; - left: 1325px; + left: 1345px; } .TE347 { top: 128px; - left: 1440px; + left: 1450px; } /** center bottom **/ .TE334 { top: 620px; - left: 588px; + left: 620px; } .TE336 { top: 620px; - left: 710px; + left: 740px; } .TE338 { top: 620px; - left: 840px; + left: 860px; } .TE340 { top: 620px; - left: 965px; + left: 1000px; } .TE342 { top: 620px; - left: 1090px; + left: 1120px; } .TE344 { top: 620px; - left: 1215px; + left: 1245px; } .TE346 { top: 620px; - left: 1340px; + left: 1370px; } .TE348 { top: 620px; - left: 1460px; + left: 1490px; } /** center middle **/ diff --git a/src/components/Common/Feeder/index.jsx b/src/components/Common/Feeder/index.jsx index 564bf28..007b14b 100644 --- a/src/components/Common/Feeder/index.jsx +++ b/src/components/Common/Feeder/index.jsx @@ -11,7 +11,7 @@ function FeederStatus(props) { style={{ position: "absolute", bottom: "128px", - left: "800px", + left: "740px", width: "300px", height: "80px", zIndex: "-1", diff --git a/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx b/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx index 8c755d5..5d27719 100644 --- a/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx +++ b/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx @@ -2,12 +2,13 @@ import { motion, AnimatePresence } from "framer-motion"; import { useRef, useEffect, useMemo, useCallback, useState } from "react"; import FeederStatus from "../../../../Common/Feeder"; import TemperatureBottom from "../../../../Common/TemperatureBottom"; +import TemperatureTop from "../../../../Common/TemperatureTop"; +import { useSelector, useDispatch } from "react-redux"; function EnterToFloorOne(props) { - // const ctx = useContext(SocketContext); - const ctx = null; + const fireInfo = useSelector((state) => state.fireInfo); + const fireDir = fireInfo?.fireDirection || null; - const fireDir = ctx?.runState?.fireDirection || null; const [fireCanPlay, setFireCanPlay] = useState(false); const vd = useRef(null); const show = props.opacity || 0; @@ -69,10 +70,10 @@ function EnterToFloorOne(props) { > )} - state.fireInfo); + const fireDir = fireInfo?.fireDirection || null; - const fireDir = ctx?.runState?.fireDirection || null; const [fireCanPlay, setFireCanPlay] = useState(false); const vd = useRef(null); @@ -72,7 +73,7 @@ function FloorOneToTwo(props) { > )} - state.fireInfo); + const fireDir = fireInfo?.fireDirection || null; const [fireCanPlay, setFireCanPlay] = useState(false); const vd = useRef(null); @@ -72,15 +73,15 @@ function FloorTwoToOne(props) { > )} - - + )} From 5107dd8ce89099577547cc36ca47578087715cfd Mon Sep 17 00:00:00 2001 From: lb Date: Fri, 15 Dec 2023 15:20:20 +0800 Subject: [PATCH 2/3] 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({ From a2349e6f269170b73eaf480b67b56f2d1edbd4b0 Mon Sep 17 00:00:00 2001 From: lb Date: Fri, 15 Dec 2023 17:31:33 +0800 Subject: [PATCH 3/3] update data --- .../Common/Energy/EnergyCostChart/index.jsx | 2 +- .../Common/TodayGood/GoodProduction.jsx | 28 +- .../components/GoodRateChart/index.jsx | 345 ++++++++++-------- .../components/GoodRateChart/index.module.css | 91 ++--- .../components/TodayTableData/index.jsx | 32 +- src/index.css | 2 + src/pages/Home/index.jsx | 16 +- src/store/features/cuttingSlice.js | 41 +++ src/store/index.js | 3 + src/utils/index.ts | 47 +++ 10 files changed, 388 insertions(+), 219 deletions(-) create mode 100644 src/store/features/cuttingSlice.js diff --git a/src/components/Common/Energy/EnergyCostChart/index.jsx b/src/components/Common/Energy/EnergyCostChart/index.jsx index eafc7bb..df5bfd7 100644 --- a/src/components/Common/Energy/EnergyCostChart/index.jsx +++ b/src/components/Common/Energy/EnergyCostChart/index.jsx @@ -7,7 +7,7 @@ import ReactECharts from 'echarts-for-react'; const EnergyCostChart = (props) => { const options = { color: ['#FFD160', '#12FFF5', '#2760FF'], - grid: { top: 32, right: 12, bottom: 20, left: 48 }, + grid: { top: 32, right: 12, bottom: 56, left: 48 }, xAxis: { type: 'category', data: Array(7) diff --git a/src/components/Common/TodayGood/GoodProduction.jsx b/src/components/Common/TodayGood/GoodProduction.jsx index 9b728f8..305b4d5 100644 --- a/src/components/Common/TodayGood/GoodProduction.jsx +++ b/src/components/Common/TodayGood/GoodProduction.jsx @@ -1,19 +1,19 @@ -import cls from './good.module.scss'; -import Container from '../../Container'; -import TodayTableData from './components/TodayTableData'; -import GoodRateChart from './components/GoodRateChart'; -import TechSplitline from '../TechSplitline'; +import cls from "./good.module.scss"; +import Container from "../../Container"; +import TodayTableData from "./components/TodayTableData"; +import GoodRateChart from "./components/GoodRateChart"; +import TechSplitline from "../TechSplitline"; const GoodProduction = () => { - return ( - -
- - - -
- - ); + return ( + +
+ + + +
+ + ); }; export default GoodProduction; diff --git a/src/components/Common/TodayGood/components/GoodRateChart/index.jsx b/src/components/Common/TodayGood/components/GoodRateChart/index.jsx index b32d3b6..ea0e9a8 100644 --- a/src/components/Common/TodayGood/components/GoodRateChart/index.jsx +++ b/src/components/Common/TodayGood/components/GoodRateChart/index.jsx @@ -1,154 +1,205 @@ -import cls from './index.module.css'; -import './overwrite.css'; // 覆写 antd 默认样式，全局 -import ReactECharts from 'echarts-for-react'; -import * as echarts from 'echarts'; -import { Switch, Radio } from 'antd'; -import { randomInt } from '../../../../../utils'; +import cls from "./index.module.css"; +import "./overwrite.css"; // 覆写 antd 默认样式，全局 +import ReactECharts from "echarts-for-react"; +import * as echarts from "echarts"; +import { Switch, Radio } from "antd"; +import { randomInt } from "../../../../../utils"; +import { useEffect, useState } from "react"; +import { useSelector } from "react-redux"; const GoodRateChart = (props) => { - const options = { - color: ['#FFD160', '#12FFF5', '#2760FF'], - grid: { top: 28, right: 12, bottom: 32, left: 48 }, - xAxis: { - type: 'category', - data: Array(7) - .fill(1) - .map((_, index) => { - const today = new Date(); - const dtimestamp = today - index * 24 * 60 * 60 * 1000; - return `${new Date(dtimestamp).getMonth() + 1}.${new Date( - dtimestamp, - ).getDate()}`; - }) - .reverse(), - axisLabel: { - color: '#fff', - fontSize: 12, - }, - axisTick: { show: false }, - axisLine: { - lineStyle: { - width: 1, - color: '#213259', - }, - }, - }, - yAxis: { - type: 'value', - axisLabel: { - color: '#fff', - fontSize: 12, - formatter: '{value} %', - }, - axisLine: { - show: true, - lineStyle: { - color: '#213259', - }, - }, - splitLine: { - lineStyle: { - color: '#213259a0', - }, - }, - interval: 10, - min: 0, - max: 100, - }, - series: [ - { - data: Array(7) - .fill(1) - .map((_) => { - return randomInt(60, 100); - }), - type: 'line', - areaStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: '#FFD16040' }, - { offset: 0.5, color: '#FFD16020' }, - { offset: 1, color: '#FFD16010' }, - ]), - }, - // smooth: true, - }, - { - data: Array(7) - .fill(1) - .map((_) => { - return randomInt(60, 100); - }), - type: 'line', - areaStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: '#12FFF540' }, - { offset: 0.5, color: '#12FFF520' }, - { offset: 1, color: '#12FFF510' }, - ]), - }, - // smooth: true, - }, - { - data: Array(7) - .fill(1) - .map((_) => { - return randomInt(60, 100); - }), - type: 'line', - areaStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: '#2760FF40' }, - { offset: 0.5, color: '#2760FF20' }, - { offset: 1, color: '#2760FF10' }, - ]), - }, - // smooth: true, - }, - ], - tooltip: { - trigger: 'axis', - }, - }; + // 是否展示班次数据 + const [showMore, setShowMore] = useState(false); + // 更新 key，用于刷新图表 + const [updateKey, setUpdateKey] = useState(Date.now()); + // 默认的日期类型 + const [dateType, setDateType] = useState("day"); + const cutting = useSelector((state) => state.cutting); - function handleSwitchChange(val) { - // val: boolean - } + console.log("cutting chart", dateType, cutting.chart[dateType]); - return ( -
-
-

生产良品率

- -
- 班次详情 -
    -
  • 总量
    • -
  • 白班
    • -
  • 夜班
    • -
-
- - - 日 - - - 周 - - - 月 - - - 年 - - -
- -
- ); + useEffect(() => { + setUpdateKey(Date.now()); + }, [showMore]); + + function handleSwitchChange(val) { + // val: boolean + setShowMore(val); + } + + function handleDateChange({ target }) { + // e: Event + setDateType(target.value); + } + + // 根据日期类型，数据列表，是否展示班次数据，生成对应的 options + const options = getOptions(cutting.chart[dateType], showMore); + + return ( +
+
+

生产良品率

+ +
+ 班次详情 +
    +
  • 总量
    • + {showMore && ( + <> +
  • 白班
    • +
  • 夜班
    • + + )} +
+
+ + + 日 + + + 周 + + + 月 + + + 年 + + +
+ +
+ ); }; export default GoodRateChart; + +function getOptions(dataList, showMore) { + console.log("showmore", showMore); + const list = [...dataList].sort((a, b) => a.dataTime - b.dataTime); + // data: Array(7) + // .fill(1) + // .map((_, index) => { + // const today = new Date(); + // const dtimestamp = today - index * 24 * 60 * 60 * 1000; + // return `${new Date(dtimestamp).getMonth() + 1}.${new Date( + // dtimestamp + // ).getDate()}`; + // }) + // .reverse(), + const color = ["#FFD160", "#12FFF5", "#2760FF"]; + const grid = { top: 28, right: 12, bottom: 48, left: 48 }; + const xAxis = { + type: "category", + data: list.map((item) => item.dataTime.split("T")[0]), + axisLabel: { + color: "#fff", + fontSize: 12, + rotate: 45, + margin: 13, + }, + axisTick: { show: false }, + axisLine: { + lineStyle: { + width: 1, + color: "#213259", + }, + }, + }; + const yAxis = { + type: "value", + axisLabel: { + color: "#fff", + fontSize: 12, + formatter: "{value} %", + }, + axisLine: { + show: true, + lineStyle: { + color: "#213259", + }, + }, + splitLine: { + lineStyle: { + color: "#213259a0", + }, + }, + interval: 10, + min: 0, + max: 100, + }; + const seriesTeam = [ + { + data: list.map((item) => item.day * 100), + type: "line", + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: "#12FFF540" }, + { offset: 0.5, color: "#12FFF520" }, + { offset: 1, color: "#12FFF510" }, + ]), + }, + // smooth: true, + }, + { + data: list.map((item) => item.night * 100), + type: "line", + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: "#2760FF40" }, + { offset: 0.5, color: "#2760FF20" }, + { offset: 1, color: "#2760FF10" }, + ]), + }, + // smooth: true, + }, + ]; + return { + grid, + color, + xAxis, + yAxis, + tooltip: { + trigger: "axis", + formatter: "{b} {c}%", + }, + series: [ + { + data: list.map((item) => item.sum * 100), + type: "line", + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: "#FFD16040" }, + { offset: 0.5, color: "#FFD16020" }, + { offset: 1, color: "#FFD16010" }, + ]), + }, + // smooth: true, + }, + ...(showMore ? seriesTeam : []), + ], + }; +} + +// { +// data: Array(7) +// .fill(1) +// .map((_) => { +// return randomInt(60, 100); +// }), +// type: "line", +// areaStyle: { +// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ +// { offset: 0, color: "#FFD16040" }, +// { offset: 0.5, color: "#FFD16020" }, +// { offset: 1, color: "#FFD16010" }, +// ]), +// }, +// // smooth: true, +// }, diff --git a/src/components/Common/TodayGood/components/GoodRateChart/index.module.css b/src/components/Common/TodayGood/components/GoodRateChart/index.module.css index db8c3f8..f7f6f91 100644 --- a/src/components/Common/TodayGood/components/GoodRateChart/index.module.css +++ b/src/components/Common/TodayGood/components/GoodRateChart/index.module.css @@ -1,86 +1,87 @@ .GoodRateChart { - height: 1px; - flex: 1; - padding-top: 8px; - /* background: #ae27276a; */ + height: 1px; + flex: 1; + padding-top: 8px; + /* background: #ae27276a; */ } .GoodRateChart .titleBar { - display: flex; - justify-content: space-between; - align-items: center; - color: white; + display: flex; + justify-content: flex-start; + align-items: center; + gap: 12px; + color: white; } .GoodRateChart .titleBar h2 { - margin: 0; - font-size: 18px; - line-height: 32px; - letter-spacing: 1.2px; - color: #52fff8; + margin: 0; + font-size: 18px; + line-height: 32px; + letter-spacing: 1.2px; + color: #52fff8; } .GoodRateChart .titleBar .legend { - display: flex; - align-items: center; + display: flex; + align-items: center; } .GoodRateChart .titleBar .legend * { - font-size: 14px; - line-height: 14px; - color: #dff1fe; + font-size: 14px; + line-height: 14px; + color: #dff1fe; } .GoodRateChart .titleBar .legend ul { - display: flex; - margin: 0; - margin-left: 8px; - padding: 0; - list-style: none; - align-items: center; + display: flex; + margin: 0; + margin-left: 8px; + padding: 0; + list-style: none; + align-items: center; } .GoodRateChart .titleBar .legend ul li { - position: relative; - margin: 4px; - padding-left: 16px; + position: relative; + margin: 4px; + padding-left: 16px; } .GoodRateChart .titleBar .legend ul li::before { - content: ''; - position: absolute; - left: 2px; - top: 2px; - display: inline-block; - width: 12px; - height: 12px; - border-radius: 2px; + content: ""; + position: absolute; + left: 2px; + top: 2px; + display: inline-block; + width: 12px; + height: 12px; + border-radius: 2px; } .GoodRateChart .titleBar .legend ul li:first-child::before { - background-color: #ffd160; + background-color: #ffd160; } .GoodRateChart .titleBar .legend ul li:nth-child(2)::before { - background-color: #12fff5; + background-color: #12fff5; } .GoodRateChart .titleBar .legend ul li:nth-child(3)::before { - background-color: #2760ff; + background-color: #2760ff; } .radioGroup * { - border: none !important; - border-radius: 0 !important; + border: none !important; + border-radius: 0 !important; } .radioGroup *:focus-within { - box-shadow: none !important; + box-shadow: none !important; } .radioGroup *::before { - width: 0 !important; + width: 0 !important; } .radioGroup_button_wrapper { - color: #fff !important; - background: #03233c !important; + color: #fff !important; + background: #03233c !important; } .radioGroup_button_wrapper.ant-radio-button-wrapper-checked { - background: #02457e !important; + background: #02457e !important; } diff --git a/src/components/Common/TodayGood/components/TodayTableData/index.jsx b/src/components/Common/TodayGood/components/TodayTableData/index.jsx index 22948ed..e3ead31 100644 --- a/src/components/Common/TodayGood/components/TodayTableData/index.jsx +++ b/src/components/Common/TodayGood/components/TodayTableData/index.jsx @@ -1,9 +1,16 @@ import { useState } from "react"; import cls from "./index.module.scss"; import { ScrollBoard } from "@jiaminghi/data-view-react"; +import { useSelector } from "react-redux"; + +function getRate(decimal) { + return (decimal.toFixed(2) * 100).toFixed(2) + "%"; +} const TodayTableData = (props) => { - const [config, setConfig] = useState({ + const cutting = useSelector((state) => state.cutting); + + const config = { // headerBGC: 'rgba(4, 44, 76, 0.3)', headerBGC: "rgba(4, 44, 76, .8)", header: [ @@ -18,14 +25,21 @@ const TodayTableData = (props) => { columnWidth: [90], headerHeight: 40, hoverPause: false, - data: [ - ["Y61", "37%", "62%", "97%", "7%"], - ["Y62", "95%", "10%", "99%", "3%"], - ["Y63", "68%", "1%", "92%", "4%"], - ["Y64", "94%", "21%", "97%", "2%"], - ["Y65", "99%", "30%", "95%", "5%"], - ], - }); + data: cutting.table.map((line) => [ + line.lineName, + getRate(line.first), + getRate(line.second), + getRate(line.product), + getRate(line.waste), + ]), + // data: [ + // ["Y61", "37%", "62%", "97%", "7%"], + // ["Y62", "95%", "10%", "99%", "3%"], + // ["Y63", "68%", "1%", "92%", "4%"], + // ["Y64", "94%", "21%", "97%", "2%"], + // ["Y65", "99%", "30%", "95%", "5%"], + // ], + }; return (
diff --git a/src/index.css b/src/index.css index b969eb0..844937d 100644 --- a/src/index.css +++ b/src/index.css @@ -60,6 +60,8 @@ body { background: url(./assets/moxing.png) no-repeat; background-position: 50% 50%; background-size: 170% 200%; + position: relative; + z-index: -1; } #FullScreen .Main .Center .Button { diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx index 3b2383d..557d0c4 100644 --- a/src/pages/Home/index.jsx +++ b/src/pages/Home/index.jsx @@ -49,7 +49,7 @@ export default function Home({ active }) { -
+
{fireDir && fireDir == "东火" && ( )} @@ -69,7 +74,12 @@ export default function Home({ active }) { autoPlay loop width={4200} - style={{ position: "absolute", top: "-180px", left: "-910px" }} + style={{ + position: "absolute", + top: "-180px", + left: "-910px", + zIndex: -1, + }} > )} diff --git a/src/store/features/cuttingSlice.js b/src/store/features/cuttingSlice.js new file mode 100644 index 0000000..05ccc68 --- /dev/null +++ b/src/store/features/cuttingSlice.js @@ -0,0 +1,41 @@ +import { createSlice } from "@reduxjs/toolkit"; + +export const initialState = { + table: [], + chart: { + year: [], + week: [], + month: [], + day: [], + }, +}; + +const cuttingSlice = createSlice({ + name: "cutting", + initialState, + reducers: { + setCuttingTable: (state, action) => { + console.log("setting cuttting table..."); + state.table = action.payload; + }, + setCuttingChart: (state, action) => { + switch (action.payload.dateType) { + case "year": + state.chart.year = action.payload.detData; + break; + case "weekly": + state.chart.week = action.payload.detData; + break; + case "month": + state.chart.month = action.payload.detData; + break; + case "day": + state.chart.day = action.payload.detData; + break; + } + }, + }, +}); + +export default cuttingSlice.reducer; +export const { setCuttingTable, setCuttingChart } = cuttingSlice.actions; diff --git a/src/store/index.js b/src/store/index.js index 7a782b4..4cfac66 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -12,6 +12,7 @@ import energySlice from "./features/EnergySlice"; import israReducer from "./features/QualityIsraSlice"; import annealFanFrequenceReducer from "./features/annealFanFrequenceSlice"; import annealFanInfoReducer from "./features/annealFanInfoSlice"; +import cuttingReducer from "./features/cuttingSlice"; export const store = configureStore({ reducer: { @@ -41,5 +42,7 @@ export const store = configureStore({ energy: energySlice, // 能耗 isra: israReducer, + // 切割 + cutting: cuttingReducer }, }); diff --git a/src/utils/index.ts b/src/utils/index.ts index 19822e3..824d016 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -255,3 +255,50 @@ new XClient( } } ); + +type TableDataType = { + name: "table"; + type: "cutting"; + data: any[]; +}; +type ChartDataType = { + name: "chart"; + type: "cutting"; + nightPushData: any[]; + dayPushData: any[]; + allPushData: any[]; + dateType: "day" | "week" | "month" | "year"; +}; +// 良品率相关数据 +new XClient( + // "ws://10.70.27.122:8080/websocket/message?userId=CUTTING", + "ws://10.70.2.2:8080/websocket/message?userId=CUTTING", + "CUTTING_DATA", + (msg) => { + let serializedData: TableDataType | ChartDataType | null = null; + try { + serializedData = JSON.parse(msg.data); + } catch (error) { + console.log("[*] websocket: [unable to serialize] ---> ", msg); + } + + console.log("[CUTTING DATA] ---> ", serializedData); + + if (serializedData == null) return; + + switch (serializedData.name) { + case "table": + store.dispatch({ + type: "cutting/setCuttingTable", + payload: serializedData.data, + }); + break; + case "chart": + store.dispatch({ + type: "cutting/setCuttingChart", + payload: serializedData, + }); + break; + } + } +);