From a2349e6f269170b73eaf480b67b56f2d1edbd4b0 Mon Sep 17 00:00:00 2001 From: lb Date: Fri, 15 Dec 2023 17:31:33 +0800 Subject: [PATCH] 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; + } + } +);