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

update

Browse Source
This commit is contained in:
lb
2023-12-13 16:59:58 +08:00
parent 19825dcb5f
commit ac711e6f2a
11 changed files with 469 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Common/TodayFaultTotal/1.json Normal file
View File

@@ -0,0 +1 @@
1.json

357
src/components/Common/TodayFaultTotal/index.jsx
View File

@@ -1,163 +1,210 @@
import cls from './index.module.css';
import GraphBase from '../GraphBase';
import ReactECharts from 'echarts-for-react';
import cls from "./index.module.css";
import GraphBase from "../GraphBase";
import ReactECharts from "echarts-for-react";
import { useSelector, useDispatch } from "react-redux";
import { useEffect } from "react";
function FaultTotal(props) {
const options = {
color: [
'#2760FF',
'#5B9BFF',
'#FFD160',
'#8167F6',
'#99D66C',
'#FF8A40',
'#12FFF5',
],
grid: { top: 42, right: 12, bottom: 20, left: 48 },
legend: {
top: 10,
padding: 5,
itemWidth: 12,
itemHeight: 12,
itemGap: 12,
height: 12,
textStyle: {
color: '#DFF1FE',
fontSize: 12,
},
},
xAxis: {
type: 'category',
data: Array(5)
.fill(1)
.map((_, index) => {
return '产线' + (index + 1);
}),
axisLabel: {
color: '#fff',
fontSize: 12,
},
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',
},
},
// interval: 10,
// min: 0,
// max: 100,
},
series: [
{
name: '缺陷1',
type: 'bar',
stack: 'abcd',
emphasis: {
focus: 'series',
},
data: [320, 332, 301, 334, 390, 330, 320],
},
{
name: '缺陷2',
type: 'bar',
stack: 'abcd',
emphasis: {
focus: 'series',
},
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: '缺陷3',
type: 'bar',
stack: 'abcd',
emphasis: {
focus: 'series',
},
data: [220, 182, 191, 234, 290, 330, 310],
},
{
name: '缺陷4',
type: 'bar',
stack: 'abcd',
emphasis: {
focus: 'series',
},
data: [150, 232, 201, 154, 190, 330, 410],
},
{
name: '缺陷5',
type: 'bar',
stack: 'abcd',
emphasis: {
focus: 'series',
},
data: [862, 1018, 964, 1026, 1679, 1600, 1570],
},
{
name: '缺陷6',
type: 'bar',
barGap: 20,
barWidth: 12,
stack: 'abcd',
emphasis: {
focus: 'series',
},
data: [620, 732, 701, 734, 1090, 1130, 1120],
},
],
tooltip: {
trigger: 'axis',
},
};
const isra = useSelector((state) => state.isra);
const dispatch = useDispatch();
function handleDateChange(v) {
console.log('date ', v);
}
useEffect(() => {
// 设置缺陷
dispatch({
type: "isra/setCheckTypeList",
payload: [
"Lehrer",
"Anwalt",
"Professorin",
"Professor",
"Lehrerin",
"Anwältin",
],
});
// 根据使用的页面决定背景的大小
const bgSize =
props.page == 'home' ? ['middle', 'short'] : ['middle', 'long'];
dispatch({
type: "isra/setDayStatistic",
payload: [
// 产线1
{
name: "10.1.1.1",
sum: 500,
data: [
{ checkType: "Lehrer", checkNum: 100 },
{ checkType: "Anwalt", checkNum: 200 },
{ checkType: "Professor", checkNum: 200 },
],
},
// 产线2
{
name: "10.1.1.2",
sum: 730,
data: [
{ checkType: "Lehrer", checkNum: 200 },
{ checkType: "Anwalt", checkNum: 130 },
{ checkType: "Lehrerin", checkNum: 400 },
],
},
],
});
}, []);
return (
<GraphBase
icon="battery"
title="产线缺陷统计"
dateOptions={['日', '周', '月', '年']}
onDateChange={handleDateChange}
size={bgSize}
style={{ width: '600px' }}
>
<div className={cls.chart}>
<ReactECharts option={options} style={{ height: '100%' }} />
</div>
</GraphBase>
);
const options = {
color: [
"#FF8A40",
"#FFD160",
"#99D66C",
"#5B9BFF",
"#8167F6",
"#2760FF",
"#12FFF5",
],
grid: { top: 42, right: 12, bottom: 20, left: 48 },
legend: {
top: 10,
padding: 5,
itemWidth: 12,
itemHeight: 12,
itemGap: 12,
height: 12,
textStyle: {
color: "#DFF1FE",
fontSize: 12,
},
// data: isra.checkTypeList,
},
xAxis: {
type: "category",
data: Array(5)
.fill(1)
.map((_, index) => {
return "产线" + (index + 1);
}),
axisLabel: {
color: "#fff",
fontSize: 12,
},
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",
},
},
// interval: 10,
// min: 0,
// max: 100,
},
series: [
{
name: "缺陷1",
type: "bar",
stack: "abcd",
emphasis: {
focus: "series",
},
data: [320, 332, 301, 334, 390, 330, 320],
},
{
name: "缺陷2",
type: "bar",
stack: "abcd",
emphasis: {
focus: "series",
},
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: "缺陷3",
type: "bar",
stack: "abcd",
emphasis: {
focus: "series",
},
data: [220, 182, 191, 234, 290, 330, 310],
},
{
name: "缺陷4",
type: "bar",
stack: "abcd",
emphasis: {
focus: "series",
},
data: [150, 232, 201, 154, 190, 330, 410],
},
{
name: "缺陷5",
type: "bar",
stack: "abcd",
emphasis: {
focus: "series",
},
data: [862, 1018, 964, 1026, 1679, 1600, 1570],
},
{
name: "缺陷6",
type: "bar",
barGap: 20,
barWidth: 12,
stack: "abcd",
emphasis: {
focus: "series",
},
data: [620, 732, 701, 734, 1090, 1130, 1120],
},
],
tooltip: {
trigger: "axis",
},
};
function handleDateChange(v) {
console.log("date ", v);
}
// 根据使用的页面决定背景的大小
const bgSize =
props.page == "home" ? ["middle", "short"] : ["middle", "long"];
return (
<GraphBase
icon="battery"
title="产线缺陷统计"
dateOptions={["日", "周", "月", "年"]}
onDateChange={handleDateChange}
size={bgSize}
style={{ width: "600px" }}
>
<div className={cls.chart}>
<ReactECharts option={options} style={{ height: "100%" }} />
</div>
</GraphBase>
);
}
export default FaultTotal;

40
src/store/features/QualityIsraSlice.js Normal file
View File

@@ -0,0 +1,40 @@
import { createSlice } from "@reduxjs/toolkit";
export const initialState = {
checkTypeList: [],
dayStatistic: [],
monthStatistic: [],
yearStatistic: [],
weekStatistic: [],
};
const israSlice = createSlice({
name: "isra",
initialState,
reducers: {
setCheckTypeList: (state, action) => {
state.checkTypeList = action.payload;
},
setDayStatistic: (state, action) => {
state.dayStatistic = action.payload;
},
setMonthStatistic: (state, action) => {
state.monthStatistic = action.payload;
},
setYearStatistic: (state, action) => {
state.yearStatistic = action.payload;
},
setWeekStatistic: (state, action) => {
state.weekStatistic = action.payload;
},
},
});
export default israSlice.reducer;
export const {
setCheckTypeList,
setDayStatistic,
setWeekStatistic,
setMonthStatistic,
setYearStatistic,
} = israSlice.actions;

57
src/store/features/t.json
View File

@@ -1,57 +0,0 @@
{
"data": {
"AnnealFanFrequencyInfo": {
"1#退火A2区1#风机": "49",
"1#退火A2区2#风机": "49",
"1#退火B区1#风机": "19",
"1#退火B区2#风机": "17",
"1#退火C区1#风机": "15",
"1#退火C区2#风机": "2",
"1#退火F1区风机": "80",
"1#退火F2区风机": "45",
"1#退火RET1区1#风机": "50",
"1#退火RET1区2#风机": "24",
"2#退火A2区1#风机": "0",
"2#退火A2区2#风机": "18",
"2#退火B区1#风机": "56",
"2#退火B区2#风机": "14",
"2#退火C区1#风机": "72",
"2#退火C区2#风机": "83",
"2#退火F1区风机": "45",
"2#退火F2区风机": "54",
"2#退火RET1区1#风机": "64",
"2#退火RET1区2#风机": "98",
"3#退火A2区1#风机": "45",
"3#退火A2区2#风机": "42",
"3#退火B区1#风机": "17",
"3#退火B区2#风机": "71",
"3#退火C区1#风机": "69",
"3#退火C区2#风机": "51",
"3#退火F1区风机": "64",
"3#退火F2区风机": "18",
"3#退火RET1区1#风机": "26",
"3#退火RET1区2#风机": "74",
"4#退火A2区1#风机": "22",
"4#退火A2区2#风机": "77",
"4#退火B区1#风机": "96",
"4#退火B区2#风机": "76",
"4#退火C区1#风机": "16",
"4#退火C区2#风机": "12",
"4#退火F1区风机": "65",
"4#退火F2区风机": "12",
"4#退火RET1区1#风机": "68",
"4#退火RET1区2#风机": "34",
"5#退火A2区1#风机": "76",
"5#退火A2区2#风机": "65",
"5#退火B区1#风机": "79",
"5#退火B区2#风机": "65",
"5#退火C区1#风机": "16",
"5#退火C区2#风机": "92",
"5#退火F1区风机": "6",
"5#退火F2区风机": "86",
"5#退火RET1区1#风机": "99",
"5#退火RET1区2#风机": "62"
}
},
"type": "AnnealFanFrequencyInfo"
}

5
src/store/index.js
View File

@@ -9,6 +9,7 @@ import temperatureReducer from "./features/temperatureSlice";
import annealTemperatureReducer from "./features/annealTemperatureSlice";
import fanInfoReducer from "./features/fanInfo";
import energySlice from "./features/EnergySlice";
import israReducer from "./features/QualityIsraSlice";
import annealFanFrequenceReducer from "./features/annealFanFrequenceSlice";
import annealFanInfoReducer from "./features/annealFanInfoSlice";
@@ -37,6 +38,8 @@ export const store = configureStore({
// 温度
annealTemperature: annealTemperatureReducer,
// 能耗
energy: energySlice
energy: energySlice,
// 能耗
isra: israReducer,
},
});

22
src/utils/checkTypeHelper.ts Normal file
View File

@@ -0,0 +1,22 @@
type CheckTypeItem = {
checkDiscard?: boolean;
checkType: string;
checkNum: number;
ip?: string;
israDefectType?: string;
israSeriousGrade?: string;
};
type ProductLineItem = {
name: string;
sum: number;
data: CheckTypeItem[];
};
export type MessageItem = {
checkTypeList: string[];
dayStatistic?: ProductLineItem[];
weekStatistic?: ProductLineItem[];
monthStatistic?: ProductLineItem[];
yearStatistic?: ProductLineItem[];
};

70
src/utils/index.js → src/utils/index.ts
View File

@@ -1,6 +1,7 @@
import { store } from "../store";
import { MessageItem } from "./checkTypeHelper";
export function randomInt(min, max, includeMax = false) {
export function randomInt(min: number, max: number, includeMax = false) {
let Fn = includeMax ? Math.ceil : Math.floor;
let num = Fn(Math.random() * max);
while (num < min) {
@@ -13,7 +14,15 @@ export function randomInt(min, max, includeMax = false) {
* new XClient('ws://192.168.1.12:8081/xc-screen/websocket/xc001', 'DCS')
*/
class XClient {
constructor(url, name, onmessage) {
url: string;
name: string;
ws: WebSocket;
constructor(
url: string,
name: string,
onmessage: (msg: MessageEvent) => void
) {
this.url = url;
this.name = name;
this.ws = new WebSocket(url);
@@ -22,7 +31,7 @@ class XClient {
};
this.ws.onmessage = onmessage;
this.ws.onerror = (err) => {
console.log("[*] websocket error!", err, err.data);
console.log("[*] websocket error!", err);
};
this.ws.onclose = (e) => {
console.log(`[*] ${this.name} ws closed`);
@@ -34,8 +43,8 @@ new XClient(
"ws://m306416y13.yicp.fun:35441/xc-screen/websocket/xc001",
// "ws://192.168.1.12:8081/xc-screen/websocket/xc001",
"DCS_DATA",
(msg) => {
let serializedData = null;
(msg: MessageEvent) => {
let serializedData: { type: string; data: any } | null = null;
try {
serializedData = JSON.parse(msg.data);
} catch (error) {
@@ -169,7 +178,7 @@ new XClient(
"ws://192.168.1.74:48080/websocket/message?userId=ENERGY111",
"MES_DATA",
(msg) => {
let serializedData = null;
let serializedData: { type: string; data: any } | null = null;
try {
serializedData = JSON.parse(msg.data);
} catch (error) {
@@ -190,3 +199,52 @@ new XClient(
}
}
);
// 产线缺陷相关数据
new XClient(
"ws://192.168.0.33:48082/websocket/message?userId=IS111",
"QUALITY_DATA",
(msg) => {
let serializedData: MessageItem | null = null;
try {
serializedData = JSON.parse(msg.data);
} catch (error) {
console.log("[*] websocket: [unable to serialize] ---> ", msg);
}
if (serializedData == null) return;
// 处理 checkTypeList
store.dispatch({
type: "isra/setCheckTypeList",
payload: serializedData.checkTypeList,
});
// for (const checkType of serializedData.checkTypeList) {
// store.dispatch({
// type: 'isra/setCheckTypeList',
// payload: serializedData.checkTypeList
// })
// }
// 处理 dayStatistic 等数据
if ("dayStatistic" in serializedData) {
store.dispatch({
type: "isra/setDayStatistic",
payload: serializedData.dayStatistic,
});
} else if ("weekStatistic" in serializedData) {
store.dispatch({
type: "isra/setWeekStatistic",
payload: serializedData.weekStatistic,
});
} else if ("monthStatistic" in serializedData) {
store.dispatch({
type: "isra/setMonthStatistic",
payload: serializedData.monthStatistic,
});
} else if ("yearStatistic" in serializedData) {
store.dispatch({
type: "isra/setYearStatistic",
payload: serializedData.yearStatistic,
});
}
}
);

4
src/utils/index.types.ts Normal file
View File

@@ -0,0 +1,4 @@
export type MessageEvent = {
type: string;
data: any;
}