mt-fe-group/xuchang-new
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update data

Browse Source
This commit is contained in:
lb 2023-12-15 17:31:33 +08:00
parent 5107dd8ce8
commit a2349e6f26
10 changed files with 388 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Common/Energy/EnergyCostChart/index.jsx
View File

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

28
src/components/Common/TodayGood/GoodProduction.jsx
View File

@ -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 (
<Container icon="good" title="本日生产良品率" className={cls.goodProd}>
<div className={`${cls.goodProd__content} h-full`}>
<TodayTableData />
<TechSplitline />
<GoodRateChart />
</div>
</Container>
);
return (
<Container icon="good" title="本日生产良品率" className={cls.goodProd}>
<div className={`${cls.goodProd__content} h-full`}>
<TodayTableData />
<TechSplitline />
<GoodRateChart />
</div>
</Container>
);
};
export default GoodProduction;

345
src/components/Common/TodayGood/components/GoodRateChart/index.jsx
View File

@ -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 (
<div className={cls.GoodRateChart}>
<div className={cls.titleBar}>
<h2>生产良品率</h2>
<Switch defaultChecked onChange={handleSwitchChange} />
<div className={cls.legend}>
<span className="legend__title">班次详情</span>
<ul className="legend__list">
<li>总量</li>
<li>白班</li>
<li>夜班</li>
</ul>
</div>
<Radio.Group
defaultValue="week"
buttonStyle="solid"
className={cls.radioGroup}
>
<Radio.Button value="day" className="radio-group__item">
日
</Radio.Button>
<Radio.Button value="week" className="radio-group__item">
周
</Radio.Button>
<Radio.Button value="month" className="radio-group__item">
月
</Radio.Button>
<Radio.Button value="year" className="radio-group__item">
年
</Radio.Button>
</Radio.Group>
</div>
<ReactECharts option={options} />
</div>
);
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 (
<div className={cls.GoodRateChart}>
<div className={cls.titleBar}>
<h2>生产良品率</h2>
<Switch defaultChecked={showMore} onChange={handleSwitchChange} />
<div className={cls.legend}>
<span className="legend__title">班次详情</span>
<ul className="legend__list">
<li>总量</li>
{showMore && (
<>
<li>白班</li>
<li>夜班</li>
</>
)}
</ul>
</div>
<Radio.Group
defaultValue="day"
buttonStyle="solid"
onChange={handleDateChange}
className={cls.radioGroup}
style={{ flex: 1, textAlign: "right" }}
>
<Radio.Button value="day" className="radio-group__item">
日
</Radio.Button>
<Radio.Button value="week" className="radio-group__item">
周
</Radio.Button>
<Radio.Button value="month" className="radio-group__item">
月
</Radio.Button>
<Radio.Button value="year" className="radio-group__item">
年
</Radio.Button>
</Radio.Group>
</div>
<ReactECharts key={updateKey} option={options} />
</div>
);
};
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,
// },

91
src/components/Common/TodayGood/components/GoodRateChart/index.module.css
View File

@ -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;
}

32
src/components/Common/TodayGood/components/TodayTableData/index.jsx
View File

@ -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 (
<div className={cls.todayTableData}>
<ScrollBoard config={config} style={{ width: "100%" }} />

2
src/index.css
View File

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

16
src/pages/Home/index.jsx
View File

@ -49,7 +49,7 @@ export default function Home({ active }) {
<CenterTopData />
</motion.div>
</AnimatePresence>
<div key="v3d" className="V3DBorder"></div>
<div key="v3d" className="V3DBorder" style={{ zIndex: -2 }}></div>
{fireDir && fireDir == "东火" && (
<video
@ -58,7 +58,12 @@ export default function Home({ active }) {
autoPlay
loop
width={4200}
style={{ position: "absolute", top: "-160px", left: "-910px" }}
style={{
position: "absolute",
top: "-160px",
left: "-910px",
zIndex: -1,
}}
></video>
)}
@ -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,
}}
></video>
)}

41
src/store/features/cuttingSlice.js Normal file
View File

@ -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;

3
src/store/index.js
View File

@ -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
},
});

47
src/utils/index.ts
View File

@ -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;
}
}
);