810 lines
27 KiB
JavaScript
810 lines
27 KiB
JavaScript
|
import {useRouter} from "next/router";
|
|||
|
|
import React, {useEffect, useMemo, useRef, useState} from "react";
|
|||
|
|
import {Carousel} from 'antd'
|
|||
|
|
import _ from "lodash";
|
|||
|
|
import Footer from "../../../components/screen/Footer";
|
|||
|
|
import Header from "../../../components/screen/Header";
|
|||
|
|
import Chart from "../../../components/screen/Chart";
|
|||
|
|
import Row from "../../../components/screen/Row";
|
|||
|
|
import Card from '../../../components/screen/Card';
|
|||
|
|
import ProcessTaskCard from "../../components/processTaskCard";
|
|||
|
|
import {useSocket} from "../../../utils/hooks";
|
|||
|
|
import moment from "moment/moment";
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 生产分工序
|
|||
|
|
*/
|
|||
|
|
const socketScreenType = 'BranchOperationType';
|
|||
|
|
const gutter = 20;
|
|||
|
|
const bottom = 0;
|
|||
|
|
const chartsBgColor = '#102242';
|
|||
|
|
|
|||
|
|
//关键生产信息
|
|||
|
|
const getProdOpt = ({xData, yData}) => {
|
|||
|
|
let opt = {
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: []
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
text: "L7车间生产进度",
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: "14px"
|
|||
|
|
},
|
|||
|
|
top: 10,
|
|||
|
|
left: 60
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value'
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
top: 40,
|
|||
|
|
left: 55
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
data: [],
|
|||
|
|
type: 'bar'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
opt.xAxis.data = xData
|
|||
|
|
opt.series[0].data = yData
|
|||
|
|
return opt;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
//车间OEE
|
|||
|
|
const getOEEOpt = (data = {}, params = []) => {
|
|||
|
|
const {oeeOfMonth = {}, oeeOfDay = {}} = data;
|
|||
|
|
// passRate 良品率, performanceRate 性能稼动率, timeRate 时间稼动率, oee OEE
|
|||
|
|
if (params.length > 0) {
|
|||
|
|
params[0].values = [oeeOfDay.timeRate || 0, oeeOfDay.performanceRate || 0, oeeOfDay.passRate || 0] //当日
|
|||
|
|
params[0].result = [oeeOfDay.oee || 0]
|
|||
|
|
params[1].values = [oeeOfMonth.timeRate || 0, oeeOfMonth.performanceRate || 0, oeeOfMonth.passRate || 0] //当日
|
|||
|
|
params[1].result = [oeeOfMonth.oee || 0]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let opt = {
|
|||
|
|
title: {
|
|||
|
|
text: "",
|
|||
|
|
left: "center",
|
|||
|
|
top: 180,
|
|||
|
|
},
|
|||
|
|
graphic: {
|
|||
|
|
elements: [
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
left: "center",
|
|||
|
|
top: 85,
|
|||
|
|
style: {
|
|||
|
|
fill: "#fff",
|
|||
|
|
text: "",
|
|||
|
|
fontSize: 16,
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
// icon: "rect",
|
|||
|
|
data: ["时间稼动率", "性能稼动率", "良品率"],
|
|||
|
|
bottom: 10,
|
|||
|
|
orient: "vertical",
|
|||
|
|
itemHeight: 16,
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 14,
|
|||
|
|
lineHeight: 14,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
polar: {
|
|||
|
|
radius: ["25%", "65%"],
|
|||
|
|
center: ["50%", "30%"],
|
|||
|
|
},
|
|||
|
|
angleAxis: {
|
|||
|
|
show: false,
|
|||
|
|
max: 100,
|
|||
|
|
startAngle: 90,
|
|||
|
|
},
|
|||
|
|
radiusAxis: {
|
|||
|
|
show: false,
|
|||
|
|
type: "category",
|
|||
|
|
data: ["%"],
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
formatter: "{a}",
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "时间稼动率",
|
|||
|
|
type: "bar",
|
|||
|
|
barGap: "0",
|
|||
|
|
barWidth: 14,
|
|||
|
|
data: [12],
|
|||
|
|
coordinateSystem: "polar",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "性能稼动率",
|
|||
|
|
type: "bar",
|
|||
|
|
barGap: "0",
|
|||
|
|
barWidth: 14,
|
|||
|
|
data: [13],
|
|||
|
|
coordinateSystem: "polar",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "良品率",
|
|||
|
|
type: "bar",
|
|||
|
|
barGap: "0",
|
|||
|
|
barWidth: 14,
|
|||
|
|
data: [14],
|
|||
|
|
coordinateSystem: "polar",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
let res = [];
|
|||
|
|
params.forEach(({name, values, result}) => {
|
|||
|
|
let newOpt = _.cloneDeep(opt);
|
|||
|
|
newOpt.title.text = name;
|
|||
|
|
newOpt.graphic.elements[0].style.text = result + "%";
|
|||
|
|
const names = ["时间稼动率 ", "性能稼动率 ", "良品率 "];
|
|||
|
|
newOpt.legend.data = names.map(
|
|||
|
|
(name, index) => (name = name + ` ${values[index]}%`)
|
|||
|
|
);
|
|||
|
|
newOpt.series = newOpt.series.map((item, index) => {
|
|||
|
|
item.name = names[index] + ` ${values[index]}%`;
|
|||
|
|
item.data[0] = values[index];
|
|||
|
|
return item;
|
|||
|
|
});
|
|||
|
|
res.push(newOpt);
|
|||
|
|
});
|
|||
|
|
return res;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
//能耗信息
|
|||
|
|
const getUsedOpt = (data = {}, params = []) => {
|
|||
|
|
const {
|
|||
|
|
energyOfMonth = 0, //电（KW/H） 今日用量
|
|||
|
|
energyOfDay = 0, // 当月累计用量
|
|||
|
|
gasOfMonth = 0, //气 (m3)
|
|||
|
|
gasOfDay = 0,
|
|||
|
|
waterOfDay = 0, //水（T）
|
|||
|
|
waterOfMonth = 0,
|
|||
|
|
} = data;
|
|||
|
|
if (params.length > 0) {
|
|||
|
|
params[0].values[0].value = gasOfMonth;
|
|||
|
|
params[0].values[1].value = gasOfDay;
|
|||
|
|
params[1].values[0].value = waterOfMonth;
|
|||
|
|
params[1].values[1].value = waterOfDay;
|
|||
|
|
params[2].values[0].value = energyOfMonth;
|
|||
|
|
params[2].values[1].value = energyOfDay;
|
|||
|
|
}
|
|||
|
|
let opt = {
|
|||
|
|
title: {
|
|||
|
|
text: "",
|
|||
|
|
left: "center",
|
|||
|
|
top: 70,
|
|||
|
|
textStyle: {
|
|||
|
|
fontWeight: "normal",
|
|||
|
|
fontSize: "16px"
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "item",
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
bottom: 15,
|
|||
|
|
left: "center",
|
|||
|
|
orient: "vertical",
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 14,
|
|||
|
|
lineHeight: 14
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: "pie",
|
|||
|
|
radius: ["45%", "70%"],
|
|||
|
|
center: ["50%", "40%"],
|
|||
|
|
avoidLabelOverlap: false,
|
|||
|
|
label: {
|
|||
|
|
show: false,
|
|||
|
|
position: "center",
|
|||
|
|
},
|
|||
|
|
labelLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
data: [],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
let res = [];
|
|||
|
|
let colors = ["#6FE621", "#FF005A", "#4D7BF3", "#4FCCFF"]
|
|||
|
|
params.forEach(({name, unit, values}, index) => {
|
|||
|
|
let newOpt = _.cloneDeep(opt);
|
|||
|
|
newOpt.color = [colors[index], "#FFC760"];
|
|||
|
|
newOpt.title.text = `${name}\n(${unit})`;
|
|||
|
|
newOpt.series[0].data = values;
|
|||
|
|
newOpt.legend.formatter = name => {
|
|||
|
|
let {value = ""} = values.find(item => item.name === name) || {};
|
|||
|
|
return `${name}: ${value}`
|
|||
|
|
}
|
|||
|
|
res.push(newOpt);
|
|||
|
|
});
|
|||
|
|
return res;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
//设备监控参数
|
|||
|
|
const getEquipMonitorOpt = (data = []) => {
|
|||
|
|
let option = {
|
|||
|
|
type: "equip",
|
|||
|
|
backgroundColor: chartsBgColor,
|
|||
|
|
grid: {
|
|||
|
|
top: 25,
|
|||
|
|
left: 60,
|
|||
|
|
right: "5%"
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
text: "",
|
|||
|
|
x: "center",
|
|||
|
|
y: "top",
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: "14px"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: "category",
|
|||
|
|
data: [],
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: "value",
|
|||
|
|
min: 0,
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
symbol: "circle",
|
|||
|
|
symbolSize: 5,
|
|||
|
|
data: [],
|
|||
|
|
type: "line",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
let newOpt = []
|
|||
|
|
if (data.length > 0) {
|
|||
|
|
data.forEach((item, index) => {
|
|||
|
|
let opt = _.cloneDeep(option);
|
|||
|
|
opt.title.text = item.name;
|
|||
|
|
opt.xAxis.data = item.time.slice().reverse();
|
|||
|
|
opt.series[0].data = item.data.slice().reverse();
|
|||
|
|
newOpt.push(opt)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
return newOpt;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//质量监控参数
|
|||
|
|
const getQualityMonitorOpt = (data = {}) => {
|
|||
|
|
let res = [];
|
|||
|
|
let option = {
|
|||
|
|
type: "quality",
|
|||
|
|
backgroundColor: chartsBgColor,
|
|||
|
|
title: {
|
|||
|
|
show: false,
|
|||
|
|
/* text: '',
|
|||
|
|
x: 'right',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#ffffff',
|
|||
|
|
fontSize: "14px"
|
|||
|
|
}*/
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis'
|
|||
|
|
},
|
|||
|
|
markLine: {},
|
|||
|
|
legend: {
|
|||
|
|
x: 'left',
|
|||
|
|
y: 'bottom',
|
|||
|
|
// data: ['极差值', 'UCLmr', 'LCLmr', 'CLmr'],
|
|||
|
|
textStyle: { //文字 样式
|
|||
|
|
color: '#ffffff',
|
|||
|
|
fontSize: "12px"
|
|||
|
|
},
|
|||
|
|
itemStyle: { //圆点样式
|
|||
|
|
opacity: 0
|
|||
|
|
},
|
|||
|
|
lineStyle: { //线样式
|
|||
|
|
// type: [4, 4],
|
|||
|
|
dashOffset: 4
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
top: 15,
|
|||
|
|
left: '3%',
|
|||
|
|
right: '3%',
|
|||
|
|
bottom: '15%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
boundaryGap: false,
|
|||
|
|
data: [],
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
type: 'solid',
|
|||
|
|
color: '#ffffff'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
splitNumber: 8,
|
|||
|
|
//轴线
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
type: 'solid',
|
|||
|
|
color: '#ffffff'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#ffffff'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: []
|
|||
|
|
};
|
|||
|
|
if (data.spcBasicDatas && data.topData) {
|
|||
|
|
let {spcBasicDatas = [], topData = {}} = data;
|
|||
|
|
let {
|
|||
|
|
usl = 0, lsl = 0,
|
|||
|
|
uclx = 0, averx = 0, lclx = 0,
|
|||
|
|
uclr = 0, averr = 0, lclr = 0,
|
|||
|
|
} = topData
|
|||
|
|
|
|||
|
|
let xData = [], yValData = [], yMrValData = [];
|
|||
|
|
spcBasicDatas.forEach(item => {
|
|||
|
|
if (!item.seq) item.seq = 0
|
|||
|
|
if (!item.value) item.value = 0
|
|||
|
|
if (!item.mrValue) item.mrValue = 0
|
|||
|
|
xData.push(item.seq)
|
|||
|
|
yValData.push(item.value)
|
|||
|
|
yMrValData.push(item.mrValue)
|
|||
|
|
})
|
|||
|
|
//标准点数据处理
|
|||
|
|
let basicOpt = _.cloneDeep(option);
|
|||
|
|
const basicName = ['数据点', 'USLi', 'UCli', 'CLi', 'LCLi', 'LSLi'];
|
|||
|
|
basicOpt.xAxis.data = xData
|
|||
|
|
let min = _.min(yValData)
|
|||
|
|
basicOpt.yAxis.min = min;
|
|||
|
|
basicName.forEach((item, index) => {
|
|||
|
|
basicOpt.series[index] = {
|
|||
|
|
type: 'line',
|
|||
|
|
smooth: true, //平滑
|
|||
|
|
symbolSize: 4,
|
|||
|
|
symbol: 'circle',
|
|||
|
|
data: [],
|
|||
|
|
lineStyle: {
|
|||
|
|
type: 'dashed', //'dotted'点线 'dashed' 虚线 'solid' 实线
|
|||
|
|
width: 1
|
|||
|
|
},
|
|||
|
|
markLine: {
|
|||
|
|
symbol: 'none',
|
|||
|
|
label: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
lineStyle: {},
|
|||
|
|
data: [{
|
|||
|
|
yAxis: 0,
|
|||
|
|
x: '6.8%'
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
basicOpt.series[index].name = basicName[index]
|
|||
|
|
})
|
|||
|
|
basicOpt.series[0].data = yValData;
|
|||
|
|
basicOpt.series[0].lineStyle.type = "solid";
|
|||
|
|
basicOpt.series[1].markLine.data[0].yAxis = usl
|
|||
|
|
basicOpt.series[2].markLine.data[0].yAxis = lsl
|
|||
|
|
basicOpt.series[3].markLine.data[0].yAxis = uclx
|
|||
|
|
basicOpt.series[4].markLine.data[0].yAxis = averx
|
|||
|
|
basicOpt.series[5].markLine.data[0].yAxis = lclx
|
|||
|
|
|
|||
|
|
//极差点数据处理
|
|||
|
|
let mrOpt = _.cloneDeep(option);
|
|||
|
|
const mrName = ['极差点', 'UCLmr', 'CLmr', 'LCLmr'];
|
|||
|
|
mrOpt.xAxis.data = xData
|
|||
|
|
mrName.forEach((item, index) => {
|
|||
|
|
mrOpt.series[index] = {
|
|||
|
|
type: 'line',
|
|||
|
|
smooth: true, //平滑
|
|||
|
|
symbolSize: 4,
|
|||
|
|
data: [],
|
|||
|
|
lineStyle: {
|
|||
|
|
type: 'dashed', //'dashed'点线 'dashed' 虚线 'solid' 实线
|
|||
|
|
width: 1
|
|||
|
|
},
|
|||
|
|
markLine: {
|
|||
|
|
symbol: 'none',
|
|||
|
|
label: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
data: [{
|
|||
|
|
yAxis: 0,
|
|||
|
|
x: '6.8%'
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
mrOpt.series[index].name = mrName[index]
|
|||
|
|
})
|
|||
|
|
mrOpt.series[0].data = yMrValData;
|
|||
|
|
mrOpt.series[0].lineStyle.type = "solid";
|
|||
|
|
mrOpt.series[1].markLine.data[0].yAxis = uclr
|
|||
|
|
mrOpt.series[2].markLine.data[0].yAxis = averr
|
|||
|
|
mrOpt.series[3].markLine.data[0].yAxis = lclr
|
|||
|
|
|
|||
|
|
res = _.concat([], [basicOpt], [mrOpt])
|
|||
|
|
}
|
|||
|
|
return res;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const ProcessItem = () => {
|
|||
|
|
const tableTimeoutRef = useRef();
|
|||
|
|
const equipMonitorRef = useRef();
|
|||
|
|
const router = useRouter();
|
|||
|
|
const [isClear, setClear] = useState(false)
|
|||
|
|
const [length, setLength] = useState(4) //卡片轮播个数
|
|||
|
|
const [len, setLen] = useState(2) //监控轮播个数
|
|||
|
|
const [height, setHeight] = useState(0);
|
|||
|
|
const [width, setWidth] = useState(0);
|
|||
|
|
const [monitorTitle, setMonitorTitle] = useState("设备")
|
|||
|
|
const [isQuality, setIsQuality] = useState(false)
|
|||
|
|
const {operationCode, workCenterCode, date = moment().format('YYYY-MM-DD')} = router.query;
|
|||
|
|
const {
|
|||
|
|
processItem: {
|
|||
|
|
reloadTime, cardAutoNext, pages = {}, energyParams = [], OEEParams = []
|
|||
|
|
} = {}
|
|||
|
|
} = global.config || {};
|
|||
|
|
//监控类型名，质量、设备
|
|||
|
|
let title = "";
|
|||
|
|
if (operationCode && pages[operationCode]) {
|
|||
|
|
title = pages[operationCode].title;
|
|||
|
|
}
|
|||
|
|
const [
|
|||
|
|
{
|
|||
|
|
keyEnergy = {}, //关键能耗
|
|||
|
|
keyProduction = {}, //关键生产
|
|||
|
|
taskExecution = [], //任务执行状态
|
|||
|
|
oee = {}, //车间OEE
|
|||
|
|
paramMonitor = {} //监控
|
|||
|
|
} = {},
|
|||
|
|
reload,
|
|||
|
|
] = useSocket({socketScreenType, operationCode, workCenterCode, date});
|
|||
|
|
const {iotEquipResultData = [], spcResultData = {}} = paramMonitor; //监控
|
|||
|
|
const {topData = {}} = spcResultData;
|
|||
|
|
//质量监控检测项
|
|||
|
|
let featureName = "";
|
|||
|
|
if (topData.featureName) {
|
|||
|
|
featureName = topData.featureName
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//工序任务执行状态
|
|||
|
|
const taskExecutData = useMemo(() => {
|
|||
|
|
let res = [];
|
|||
|
|
taskExecution.forEach((item, index) => {
|
|||
|
|
let row = Math.ceil((index + 1) / length);
|
|||
|
|
let rowIndex = index % length;
|
|||
|
|
if (!res[row]) res[row] = [];
|
|||
|
|
res[row][rowIndex] = item;
|
|||
|
|
})
|
|||
|
|
res = res.filter(item => item);
|
|||
|
|
return res;
|
|||
|
|
}, [taskExecution]);
|
|||
|
|
|
|||
|
|
//设备、质量参数监控
|
|||
|
|
const monitorOpt = useMemo(() => {
|
|||
|
|
let equipData = getEquipMonitorOpt(iotEquipResultData);
|
|||
|
|
let qualityData = getQualityMonitorOpt(spcResultData);
|
|||
|
|
|
|||
|
|
let res = [], equipRes = [], qualityRes = [];
|
|||
|
|
//设备参数分组
|
|||
|
|
equipData.forEach((item, index) => {
|
|||
|
|
let row = Math.ceil((index + 1) / len);
|
|||
|
|
let rowIndex = index % len;
|
|||
|
|
if (!equipRes[row]) equipRes[row] = [];
|
|||
|
|
equipRes[row][rowIndex] = item;
|
|||
|
|
})
|
|||
|
|
//质量参数分组
|
|||
|
|
qualityData.forEach((item, index) => {
|
|||
|
|
let row = Math.ceil((index + 1) / len);
|
|||
|
|
let rowIndex = index % len;
|
|||
|
|
if (!qualityRes[row]) qualityRes[row] = [];
|
|||
|
|
qualityRes[row][rowIndex] = item;
|
|||
|
|
})
|
|||
|
|
res = _.concat([], equipRes, qualityRes)
|
|||
|
|
res = res.filter(item => item);
|
|||
|
|
return res
|
|||
|
|
}, [iotEquipResultData, spcResultData])
|
|||
|
|
|
|||
|
|
//关键生产信息
|
|||
|
|
const prodOpt = useMemo(() => {
|
|||
|
|
return getProdOpt(keyProduction)
|
|||
|
|
}, [keyProduction])
|
|||
|
|
|
|||
|
|
//车间能耗信息
|
|||
|
|
const usedOpt = useMemo(() => {
|
|||
|
|
return getUsedOpt(keyEnergy, energyParams);
|
|||
|
|
}, [keyEnergy])
|
|||
|
|
|
|||
|
|
//车间OEE
|
|||
|
|
const OEEOpt = useMemo(() => {
|
|||
|
|
return getOEEOpt(oee, OEEParams);
|
|||
|
|
}, [oee]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (operationCode) {
|
|||
|
|
setClear(true);
|
|||
|
|
}
|
|||
|
|
}, [operationCode]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
//轮播图标的宽高设置
|
|||
|
|
if (equipMonitorRef.current) {
|
|||
|
|
setHeight(equipMonitorRef.current.clientHeight)
|
|||
|
|
setWidth(equipMonitorRef.current.clientWidth)
|
|||
|
|
}
|
|||
|
|
}, 100)
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
//整体刷新
|
|||
|
|
useEffect(() => {
|
|||
|
|
tableTimeoutRef.current = setInterval(() => {
|
|||
|
|
reload()
|
|||
|
|
}, reloadTime);
|
|||
|
|
return () => {
|
|||
|
|
clearInterval(tableTimeoutRef.current)
|
|||
|
|
}
|
|||
|
|
}, [reload])
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (iotEquipResultData.length <= 0 && _.get(spcResultData, "spcBasicDatas.length") > 0) {
|
|||
|
|
setMonitorTitle('质量')
|
|||
|
|
setIsQuality(true)
|
|||
|
|
}
|
|||
|
|
}, [iotEquipResultData, spcResultData])
|
|||
|
|
|
|||
|
|
//当前轮播位置,更新标题
|
|||
|
|
const afterChange = (current) => {
|
|||
|
|
let index = _.findIndex(monitorOpt, item => item[0].type == 'quality');
|
|||
|
|
if (index == current) {
|
|||
|
|
setMonitorTitle('质量')
|
|||
|
|
setIsQuality(true)
|
|||
|
|
} else {
|
|||
|
|
setMonitorTitle('设备')
|
|||
|
|
setIsQuality(false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="screen-container">
|
|||
|
|
{isClear && (
|
|||
|
|
<React.Fragment>
|
|||
|
|
<Header title={`${title}工序`}/>
|
|||
|
|
<div className="screen-container-content">
|
|||
|
|
<Row className='height-100' gutter={gutter} bottom={bottom}>
|
|||
|
|
<Row.Col span={5}>
|
|||
|
|
<Row className="height-55">
|
|||
|
|
<Card title={`${title}工序设备示意图`} overVisible={true}
|
|||
|
|
padding={"40px 20px 25px 20px"}>
|
|||
|
|
<div className='screen-img img-gxsb'/>
|
|||
|
|
</Card>
|
|||
|
|
</Row>
|
|||
|
|
|
|||
|
|
<Row className="height-45" style={{paddingTop: `${gutter}px`}}>
|
|||
|
|
<Card title={`${title}工序成品示意图`} overVisible={true}
|
|||
|
|
padding={"40px 20px 25px 20px"}>
|
|||
|
|
<div className='screen-img img-gxzzp'/>
|
|||
|
|
</Card>
|
|||
|
|
</Row>
|
|||
|
|
</Row.Col>
|
|||
|
|
|
|||
|
|
<Row.Col span={12}>
|
|||
|
|
<Row className="height-55">
|
|||
|
|
<Card title="工序任务执行状态" overVisible={true} padding={"40px 20px 25px 20px"}>
|
|||
|
|
<div className='process-task-list'>
|
|||
|
|
<Carousel autoplay dots={false} autoplaySpeed={cardAutoNext}>
|
|||
|
|
{taskExecutData.map((row, rowIndex) => {
|
|||
|
|
return <div key={Math.random()}>
|
|||
|
|
<div className='process-task'>
|
|||
|
|
{row.map((item, index) => {
|
|||
|
|
return <div className='process-task-item'
|
|||
|
|
key={item.code}>
|
|||
|
|
<ProcessTaskCard itemData={item}
|
|||
|
|
operationCode={operationCode}/>
|
|||
|
|
</div>
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
})}
|
|||
|
|
</Carousel>
|
|||
|
|
</div>
|
|||
|
|
</Card>
|
|||
|
|
</Row>
|
|||
|
|
|
|||
|
|
<Row className="height-45" style={{paddingTop: `${gutter}px`}}>
|
|||
|
|
<Card title={`${monitorTitle}参数监控`} overVisible={true}
|
|||
|
|
padding={"35px 16px 16px 16px"}>
|
|||
|
|
{
|
|||
|
|
isQuality &&
|
|||
|
|
<div className='monitor-quality-item'>
|
|||
|
|
{`最新检测项：${featureName}`}
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
<div className='equip-monitor-list' ref={equipMonitorRef}>
|
|||
|
|
<Row className='height-100'>
|
|||
|
|
<Carousel autoplay dots={false} dotPosition={"right"}
|
|||
|
|
autoplaySpeed={cardAutoNext} adaptiveHeight={true}
|
|||
|
|
afterChange={afterChange}>
|
|||
|
|
{monitorOpt.map((row, rowIndex) => {
|
|||
|
|
return <div>
|
|||
|
|
<div key={Math.random()}
|
|||
|
|
style={{height: height, width: width}}>
|
|||
|
|
{row.map((item, index) => {
|
|||
|
|
return <div className='equip-monitor-item'
|
|||
|
|
key={rowIndex + index}>
|
|||
|
|
<Chart option={item}/>
|
|||
|
|
</div>
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
})}
|
|||
|
|
</Carousel>
|
|||
|
|
</Row>
|
|||
|
|
</div>
|
|||
|
|
</Card>
|
|||
|
|
</Row>
|
|||
|
|
</Row.Col>
|
|||
|
|
|
|||
|
|
<Row.Col span={7}>
|
|||
|
|
<Card>
|
|||
|
|
<div className="used-content">
|
|||
|
|
<Row className="height-30">
|
|||
|
|
<Card title="关键生产信息" titleSpace={true} overVisible={true}
|
|||
|
|
withBorder={false}>
|
|||
|
|
<Chart option={prodOpt}/>
|
|||
|
|
</Card>
|
|||
|
|
</Row>
|
|||
|
|
|
|||
|
|
<Row className="height-30">
|
|||
|
|
<Card title="关键能耗信息" titleSpace={true} overVisible={true}
|
|||
|
|
withBorder={false} padding={"0 16px"}>
|
|||
|
|
<Row className='height-100'>
|
|||
|
|
{usedOpt.map((opt, index) => {
|
|||
|
|
return (
|
|||
|
|
<Row.Col span={8} key={index}>
|
|||
|
|
<Chart option={opt}/>
|
|||
|
|
</Row.Col>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</Row>
|
|||
|
|
</Card>
|
|||
|
|
</Row>
|
|||
|
|
|
|||
|
|
<Row className="height-40">
|
|||
|
|
<Card title="车间OEE" titleSpace={true} overVisible={true}
|
|||
|
|
withBorder={false} padding={"0 16px"}>
|
|||
|
|
<Row className='height-100'>
|
|||
|
|
{OEEOpt.map((opt, index) => {
|
|||
|
|
return (
|
|||
|
|
<Row.Col span={12} key={index}>
|
|||
|
|
<Chart option={opt}/>
|
|||
|
|
</Row.Col>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</Row>
|
|||
|
|
</Card>
|
|||
|
|
</Row>
|
|||
|
|
</div>
|
|||
|
|
</Card>
|
|||
|
|
</Row.Col>
|
|||
|
|
</Row>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Footer/>
|
|||
|
|
</React.Fragment>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
<style jsx>{`
|
|||
|
|
.screen-container {
|
|||
|
|
font-family: PingFangSC-Semibold;
|
|||
|
|
height: 100vh;
|
|||
|
|
min-height: 1080px;
|
|||
|
|
min-width: 1920px;
|
|||
|
|
background: url("/img/bg.png") center center;
|
|||
|
|
position: relative;
|
|||
|
|
padding-top: 96px;
|
|||
|
|
padding-bottom: 82px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.screen-container-content {
|
|||
|
|
height: 100%;
|
|||
|
|
padding: ${gutter}px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.OEE-content {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 900px;
|
|||
|
|
height: 320px;
|
|||
|
|
top: 660px;
|
|||
|
|
left: 460px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.monitor-quality-item {
|
|||
|
|
text-align: right;
|
|||
|
|
margin-top: -22px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.equip-monitor-list {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.equip-monitor-item {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 50%;;
|
|||
|
|
padding: 4px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.process-task-list {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.process-task {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.process-task-item {
|
|||
|
|
width: calc(100% / 4);
|
|||
|
|
padding: 0 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.used-content {
|
|||
|
|
overflow: hidden;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.used-content :global(.screen-card) {
|
|||
|
|
border: none !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.aaa {
|
|||
|
|
width: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.screen-img {
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.img-gxsb {
|
|||
|
|
background: url(/img/process/${operationCode}-SB.png) center center no-repeat;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.img-gxzzp {
|
|||
|
|
background: url(/img/process/${operationCode}-ZZP.png) center center no-repeat;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
`}</style>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default ProcessItem;
|