668 lines
18 KiB
JavaScript
668 lines
18 KiB
JavaScript
|
import React, { useRef, useEffect, useCallback } from 'react';
|
|||
|
|
import _ from 'lodash';
|
|||
|
|
import { withRouter } from 'next/router';
|
|||
|
|
import Footer from '../../../components/screen/Footer';
|
|||
|
|
import Header from '../../../components/screen/Header';
|
|||
|
|
import Row from '../../../components/screen/Row';
|
|||
|
|
import Card from '../../../components/screen/Card';
|
|||
|
|
import Chart from '../../../components/screen/Chart';
|
|||
|
|
import Table from '../../../components/screen/Table';
|
|||
|
|
import TableProgress from '../../../components/screen/TableProgress';
|
|||
|
|
import io from '../../../utils/socket.io.js';
|
|||
|
|
|
|||
|
|
|
|||
|
|
const gutter = 20;
|
|||
|
|
const bottom = 20;
|
|||
|
|
|
|||
|
|
// 返回结果是个字符串，需要转一下
|
|||
|
|
let testData = {
|
|||
|
|
"code": "0000",
|
|||
|
|
"data": {
|
|||
|
|
//今日生产总数
|
|||
|
|
"productCount": {
|
|||
|
|
"planQty": 3162.000000, //计划总数
|
|||
|
|
"productQty": 199.000000, //生产总数
|
|||
|
|
"unFinishedQty": 2963.000000 //未完成数量
|
|||
|
|
},
|
|||
|
|
//今日生产统计
|
|||
|
|
"productDayCountList": [
|
|||
|
|
{
|
|||
|
|
"productQty": 0.000000, //生产数量
|
|||
|
|
"qualityQty": 0.000000, //合格数量
|
|||
|
|
"time": "00:00"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"productQty": 0.000000,
|
|||
|
|
"qualityQty": 0.000000,
|
|||
|
|
"time": "01:00"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"productQty": 0.000000,
|
|||
|
|
"qualityQty": 0.000000,
|
|||
|
|
"time": "02:00"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"productQty": 0.000000,
|
|||
|
|
"qualityQty": 0.000000,
|
|||
|
|
"time": "03:00"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"productQty": 0.000000,
|
|||
|
|
"qualityQty": 0.000000,
|
|||
|
|
"time": "04:00"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"productQty": 0.000000,
|
|||
|
|
"qualityQty": 0.000000,
|
|||
|
|
"time": "05:00"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"productQty": 0.000000,
|
|||
|
|
"qualityQty": 0.000000,
|
|||
|
|
"time": "06:00"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"productQty": 0.000000,
|
|||
|
|
"qualityQty": 0.000000,
|
|||
|
|
"time": "07:00"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"productQty": 0.000000,
|
|||
|
|
"qualityQty": 0.000000,
|
|||
|
|
"time": "08:00"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"productQty": 0.000000,
|
|||
|
|
"qualityQty": 0.000000,
|
|||
|
|
"time": "09:00"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"productQty": 69.000000,
|
|||
|
|
"qualityQty": 17.000000,
|
|||
|
|
"time": "10:00"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"productQty": 12.000000,
|
|||
|
|
"qualityQty": 12.000000,
|
|||
|
|
"time": "11:00"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"productQty": 0.000000,
|
|||
|
|
"qualityQty": 0.000000,
|
|||
|
|
"time": "12:00"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"productQty": 15.000000,
|
|||
|
|
"qualityQty": 15.000000,
|
|||
|
|
"time": "13:00"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"productQty": 25.000000,
|
|||
|
|
"qualityQty": 25.000000,
|
|||
|
|
"time": "14:00"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"productQty": 26.000000,
|
|||
|
|
"qualityQty": 26.000000,
|
|||
|
|
"time": "15:00"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"productQty": 52.000000,
|
|||
|
|
"qualityQty": 51.000000,
|
|||
|
|
"time": "16:00"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"productQty": 0.000000,
|
|||
|
|
"qualityQty": 0.000000,
|
|||
|
|
"time": "17:00"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"productQty": 0.000000,
|
|||
|
|
"qualityQty": 0.000000,
|
|||
|
|
"time": "18:00"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"productQty": 0.000000,
|
|||
|
|
"qualityQty": 0.000000,
|
|||
|
|
"time": "19:00"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"productQty": 0.000000,
|
|||
|
|
"qualityQty": 0.000000,
|
|||
|
|
"time": "20:00"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"productQty": 0.000000,
|
|||
|
|
"qualityQty": 0.000000,
|
|||
|
|
"time": "21:00"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"productQty": 0.000000,
|
|||
|
|
"qualityQty": 0.000000,
|
|||
|
|
"time": "22:00"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"productQty": 0.000000,
|
|||
|
|
"qualityQty": 0.000000,
|
|||
|
|
"time": "23:00"
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
//日产能概况
|
|||
|
|
"productDayRecordList": [
|
|||
|
|
{
|
|||
|
|
"code": "WO202203300001", //工单号
|
|||
|
|
"materialCode": "L5CP", //产品编码
|
|||
|
|
"materialName": "L5车间成品", //产品名称
|
|||
|
|
"planQty": 1000.000000, //计划数量
|
|||
|
|
"productQty": 10.000000, //生产数量
|
|||
|
|
"productRate": 0.010, //生产进度
|
|||
|
|
"productStatus": "已完工", //生产状态
|
|||
|
|
"unQualityQty": 0.000000, //不合格数量
|
|||
|
|
"unQualityRate": 0.000, //不合格率
|
|||
|
|
"workCenterCode": "L5", //产线编码
|
|||
|
|
"workCenterName": "L5车间" //产线名称
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"code": "WO202204010001",
|
|||
|
|
"materialCode": "L5CP",
|
|||
|
|
"materialName": "L5车间成品",
|
|||
|
|
"planQty": 100.000000,
|
|||
|
|
"productQty": 15.000000,
|
|||
|
|
"productRate": 0.150,
|
|||
|
|
"productStatus": "已创建",
|
|||
|
|
"unQualityQty": 0.000000,
|
|||
|
|
"unQualityRate": 0.000,
|
|||
|
|
"workCenterCode": "L5",
|
|||
|
|
"workCenterName": "L5车间"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"code": "WO202204010002",
|
|||
|
|
"materialCode": "L5CP",
|
|||
|
|
"materialName": "L5车间成品",
|
|||
|
|
"planQty": 10.000000,
|
|||
|
|
"productQty": 15.000000,
|
|||
|
|
"productRate": 1.500,
|
|||
|
|
"productStatus": "生产中",
|
|||
|
|
"unQualityQty": 0.000000,
|
|||
|
|
"unQualityRate": 0.000,
|
|||
|
|
"workCenterCode": "L5",
|
|||
|
|
"workCenterName": "L5车间"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"code": "WO202204010003",
|
|||
|
|
"materialCode": "L5CP",
|
|||
|
|
"materialName": "L5车间成品",
|
|||
|
|
"planQty": 10.000000,
|
|||
|
|
"productQty": 12.000000,
|
|||
|
|
"productRate": 1.200,
|
|||
|
|
"productStatus": "生产中",
|
|||
|
|
"unQualityQty": 0.000000,
|
|||
|
|
"unQualityRate": 0.000,
|
|||
|
|
"workCenterCode": "L5",
|
|||
|
|
"workCenterName": "L5车间"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"code": "WO202204060001",
|
|||
|
|
"materialCode": "L5CP",
|
|||
|
|
"materialName": "L5车间成品",
|
|||
|
|
"planQty": 1000.000000,
|
|||
|
|
"productQty": 14.000000,
|
|||
|
|
"productRate": 0.014,
|
|||
|
|
"productStatus": "生产中",
|
|||
|
|
"unQualityQty": 0.000000,
|
|||
|
|
"unQualityRate": 0.000,
|
|||
|
|
"workCenterCode": "L5",
|
|||
|
|
"workCenterName": "L5车间"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"code": "WO202204060002",
|
|||
|
|
"materialCode": "L5CP",
|
|||
|
|
"materialName": "L5车间成品",
|
|||
|
|
"planQty": 10.000000,
|
|||
|
|
"productQty": 12.000000,
|
|||
|
|
"productRate": 1.200,
|
|||
|
|
"productStatus": "生产中",
|
|||
|
|
"unQualityQty": 0.000000,
|
|||
|
|
"unQualityRate": 0.000,
|
|||
|
|
"workCenterCode": "L5",
|
|||
|
|
"workCenterName": "L5车间"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"code": "WO202204060003",
|
|||
|
|
"materialCode": "L5CP",
|
|||
|
|
"materialName": "L5车间成品",
|
|||
|
|
"planQty": 10.000000,
|
|||
|
|
"productQty": 14.000000,
|
|||
|
|
"productRate": 1.400,
|
|||
|
|
"productStatus": "生产中",
|
|||
|
|
"unQualityQty": 0.000000,
|
|||
|
|
"unQualityRate": 0.000,
|
|||
|
|
"workCenterCode": "L5",
|
|||
|
|
"workCenterName": "L5车间"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"code": "WO202204070001",
|
|||
|
|
"materialCode": "L5CP",
|
|||
|
|
"materialName": "L5车间成品",
|
|||
|
|
"planQty": 10.000000,
|
|||
|
|
"productQty": 52.000000,
|
|||
|
|
"productRate": 5.200,
|
|||
|
|
"productStatus": "生产中",
|
|||
|
|
"unQualityQty": 1.000000,
|
|||
|
|
"unQualityRate": 0.019,
|
|||
|
|
"workCenterCode": "L5",
|
|||
|
|
"workCenterName": "L5车间"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"code": "WO202204080001",
|
|||
|
|
"materialCode": "L5CP",
|
|||
|
|
"materialName": "L5车间成品",
|
|||
|
|
"planQty": 12.000000,
|
|||
|
|
"productQty": 55.000000,
|
|||
|
|
"productRate": 4.583,
|
|||
|
|
"productStatus": "生产中",
|
|||
|
|
"unQualityQty": 52.000000,
|
|||
|
|
"unQualityRate": 0.945,
|
|||
|
|
"workCenterCode": "L5",
|
|||
|
|
"workCenterName": "L5车间"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"code": "RcQuickWearStr",
|
|||
|
|
"materialCode": "L5CP",
|
|||
|
|
"materialName": "L5车间成品",
|
|||
|
|
"planQty": 1000.000000,
|
|||
|
|
"productQty": 0.000000,
|
|||
|
|
"productRate": 0.000,
|
|||
|
|
"productStatus": "待生产",
|
|||
|
|
"unQualityQty": 0.000000,
|
|||
|
|
"unQualityRate": 0.000,
|
|||
|
|
"workCenterCode": "L5",
|
|||
|
|
"workCenterName": "L5车间"
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
// 今日生产合格数
|
|||
|
|
"qualityDayCount": {
|
|||
|
|
"qualityQty": 146.000000, //合格数量
|
|||
|
|
"qualityRate": 0.734, //合格率
|
|||
|
|
"unQualityQty": 53.000000 //不合格数量
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"success": true
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const polarBarOpt = {
|
|||
|
|
title: {
|
|||
|
|
text: '计划总数',
|
|||
|
|
left: 'center',
|
|||
|
|
bottom: 24,
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 20,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
radiusAxis: {
|
|||
|
|
show: false,
|
|||
|
|
type: 'category',
|
|||
|
|
data: ['%']
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
series: {
|
|||
|
|
type: 'gauge',
|
|||
|
|
center: ['50%', "40%"],
|
|||
|
|
radius: "70%",
|
|||
|
|
startAngle: 90,
|
|||
|
|
endAngle: -270,
|
|||
|
|
pointer: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
progress: {
|
|||
|
|
show: true,
|
|||
|
|
overlap: false,
|
|||
|
|
roundCap: false,
|
|||
|
|
clip: false,
|
|||
|
|
itemStyle: {
|
|||
|
|
borderWidth: 0,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 20,
|
|||
|
|
color: [[1, 'rgba(40, 163, 255, 0.2)']],
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
data: [{
|
|||
|
|
value: 0,
|
|||
|
|
name: '生产总数'
|
|||
|
|
}],
|
|||
|
|
title: {
|
|||
|
|
offsetCenter: ['0%', '20'],
|
|||
|
|
color: "#fff",
|
|||
|
|
fontSize: 20,
|
|||
|
|
},
|
|||
|
|
detail: {
|
|||
|
|
show: true,
|
|||
|
|
offsetCenter: ['0%', '-20'],
|
|||
|
|
width: 'auto',
|
|||
|
|
height: 32,
|
|||
|
|
fontSize: 32,
|
|||
|
|
color: '#00E1FA',
|
|||
|
|
borderColor: 'auto',
|
|||
|
|
borderWidth: 0,
|
|||
|
|
formatter: '{value}'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
const setNumOpt = (total, done, title) => {
|
|||
|
|
let res = _.cloneDeep(polarBarOpt);
|
|||
|
|
if(title) res.title.text = `${title}：${total}`;
|
|||
|
|
let percent = (100 * done / total).toFixed(2);
|
|||
|
|
res.series.data[0].name = "生产总数";
|
|||
|
|
res.series.data[0].value = percent;
|
|||
|
|
res.series.detail.formatter = () => done;
|
|||
|
|
return res;
|
|||
|
|
}
|
|||
|
|
const setOkNumOpt = (total, done, title) => {
|
|||
|
|
let res = _.cloneDeep(polarBarOpt);
|
|||
|
|
let percent = (100 * done / (total === 0 ? 1 : total)).toFixed(2);
|
|||
|
|
if(isNaN(percent)) percent = 0;
|
|||
|
|
if(title) res.title.text = `${title}：${percent}%`;
|
|||
|
|
res.series.data[0].value = percent;
|
|||
|
|
res.series.data[0].name = "合格数量";
|
|||
|
|
res.series.detail.formatter = () => done;
|
|||
|
|
res.series.detail.color = "#6FE621";
|
|||
|
|
res.series.progress.itemStyle.color = "#6FE621";
|
|||
|
|
return res;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const barOpt = {
|
|||
|
|
legend: {
|
|||
|
|
show: true,
|
|||
|
|
data: ['生产数量', '合格数量'],
|
|||
|
|
top: 10,
|
|||
|
|
right: 10,
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 14,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
axisTick: {
|
|||
|
|
lineStyle: {opacity: 0.3},
|
|||
|
|
alignWithLabel: true,
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {opacity: 0.3},
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
color: 'rgba(255, 255, 255, 0.8)'
|
|||
|
|
},
|
|||
|
|
data: []
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisTick: {
|
|||
|
|
lineStyle: {opacity: 0.3}
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {opacity: 0.3}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
color: 'rgba(255, 255, 255, 0.8)'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
bottom: 40,
|
|||
|
|
top: 60,
|
|||
|
|
left: 50,
|
|||
|
|
},
|
|||
|
|
barWidth: 20,
|
|||
|
|
series: [{
|
|||
|
|
name: '生产数量',
|
|||
|
|
type: 'bar',
|
|||
|
|
barGap: -1,
|
|||
|
|
data: []
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '合格数量',
|
|||
|
|
itemStyle: {
|
|||
|
|
color: "#6FE621",
|
|||
|
|
},
|
|||
|
|
type: 'bar',
|
|||
|
|
data: []
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
const setBarOpt = (data) => {
|
|||
|
|
let res = _.cloneDeep(barOpt);
|
|||
|
|
data.forEach(({productQty, qualityQty, time}, index) => {
|
|||
|
|
res.xAxis.data.push(time);
|
|||
|
|
res.series[0].data[index] = productQty;
|
|||
|
|
res.series[1].data[index] = qualityQty;
|
|||
|
|
})
|
|||
|
|
return res;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const productTableColumns = [
|
|||
|
|
{title: "机台", code: "workCenterName"},
|
|||
|
|
{title: "生产状态", code: "productStatus",
|
|||
|
|
color: val => {
|
|||
|
|
if(val === '待生产') return "#d5542d";
|
|||
|
|
if(val === '已创建') return "#1a7cc6";
|
|||
|
|
if(val === '生产中') return "#0aac61";
|
|||
|
|
if(val === '已完工') return "#0db5a4";
|
|||
|
|
if(val === '已关闭') return "#c1c1c1";
|
|||
|
|
if(val === '已取消') return "#c1c1c1";
|
|||
|
|
},
|
|||
|
|
render: (text, config, rowData) => {
|
|||
|
|
const {color} = config;
|
|||
|
|
let resColor = color(text);
|
|||
|
|
return (
|
|||
|
|
<div style={{color: resColor}}>
|
|||
|
|
<span style={{
|
|||
|
|
background: resColor,
|
|||
|
|
width: '8px',
|
|||
|
|
height: '8px',
|
|||
|
|
display: 'inline-block',
|
|||
|
|
borderRadius: '50%',
|
|||
|
|
verticalAlign: 'middle',
|
|||
|
|
}}></span>
|
|||
|
|
<span style={{
|
|||
|
|
verticalAlign: 'middle',
|
|||
|
|
marginLeft: '6px',
|
|||
|
|
}}>{text}</span>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{title: "产品编码", code: "materialCode"},
|
|||
|
|
{title: "产品名称", code: "materialName"},
|
|||
|
|
{title: "工单编号", code: "code"},
|
|||
|
|
{title: "生产数量", code: "productQty"},
|
|||
|
|
{title: "计划数量", code: "planQty"},
|
|||
|
|
{title: "生产进度", code: "productRate",
|
|||
|
|
width: 200,
|
|||
|
|
render: (value, config, rowData) => {
|
|||
|
|
return <TableProgress percent={value}/>
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{title: "不良品数量", code: "unQualityQty"},
|
|||
|
|
{title: "不良品率", code: "unQualityRate",
|
|||
|
|
render: (value, config, rowData) => {
|
|||
|
|
return <span>{value * 100}%</span>
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
function PlanBoard(props) {
|
|||
|
|
const {config : {ioSocketUrl, planBoard = {}} = {}} = global;
|
|||
|
|
const tableToNextPage = planBoard.productTableNext;
|
|||
|
|
|
|||
|
|
const {router} = props;
|
|||
|
|
|
|||
|
|
const planNumRef = useRef();
|
|||
|
|
const okNumRef = useRef();
|
|||
|
|
const productNumRef = useRef();
|
|||
|
|
const productTableRef = useRef();
|
|||
|
|
|
|||
|
|
const socket = useRef();
|
|||
|
|
const workCenterCodeRef = useRef();
|
|||
|
|
const tableTimeoutRef = useRef();
|
|||
|
|
const getQueryVariable = (variable) => {
|
|||
|
|
let query = window.location.search.substring(1);
|
|||
|
|
let vars = query.split("&");
|
|||
|
|
for (let i = 0; i < vars.length; i++) {
|
|||
|
|
let pair = vars[i].split("=");
|
|||
|
|
if (pair[0] == variable) { return pair[1]; }
|
|||
|
|
}
|
|||
|
|
return (false);
|
|||
|
|
}
|
|||
|
|
const getData = () => {
|
|||
|
|
let workCenterCode = workCenterCodeRef.current
|
|||
|
|
let date = getQueryVariable('date');
|
|||
|
|
|
|||
|
|
console.log("fetch", workCenterCode)
|
|||
|
|
if(!workCenterCode) return;
|
|||
|
|
let query = {
|
|||
|
|
workCenterCode,
|
|||
|
|
screenType: "ProductPlanType",
|
|||
|
|
}
|
|||
|
|
if (date) query.date = date;
|
|||
|
|
else{
|
|||
|
|
query.date = new Date().toJSON().split('T').join(' ').substr(0,10)
|
|||
|
|
}
|
|||
|
|
socket.current.emit('timePerformanceGoodProduct', 'channel', {query})
|
|||
|
|
setTimeGetData()
|
|||
|
|
};
|
|||
|
|
const setTimeGetData = () => {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
getData()
|
|||
|
|
}, 300000)
|
|||
|
|
}
|
|||
|
|
const pageFinished = useCallback(() => {
|
|||
|
|
console.log("finished")
|
|||
|
|
clearInterval(tableTimeoutRef.current);
|
|||
|
|
getData();
|
|||
|
|
})
|
|||
|
|
const setTableNextPage = useCallback(() => {
|
|||
|
|
tableTimeoutRef.current = setInterval(() => {
|
|||
|
|
productTableRef.current.nextPage();
|
|||
|
|
}, tableToNextPage);
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
const update = (data) => {
|
|||
|
|
try{ data = JSON.parse(data) }catch(e){console.log(e)}
|
|||
|
|
// if(!data) data = testData;
|
|||
|
|
const {productCount, productDayCountList, qualityDayCount, productDayRecordList} = data.data;
|
|||
|
|
console.log("data", data.data)
|
|||
|
|
|
|||
|
|
planNumRef.current.setOption(setNumOpt(
|
|||
|
|
productCount.planQty,
|
|||
|
|
productCount.productQty,
|
|||
|
|
"计划总数"
|
|||
|
|
));
|
|||
|
|
okNumRef.current.setOption(setOkNumOpt(
|
|||
|
|
qualityDayCount.qualityQty,
|
|||
|
|
qualityDayCount.qualityQty - qualityDayCount.unQualityQty,
|
|||
|
|
"合格率"
|
|||
|
|
));
|
|||
|
|
|
|||
|
|
productNumRef.current.setOption(setBarOpt(productDayCountList));
|
|||
|
|
|
|||
|
|
productTableRef.current.setData(productDayRecordList);
|
|||
|
|
setTableNextPage();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
const {workCenterCode} = router.query;
|
|||
|
|
if(!workCenterCode) return;
|
|||
|
|
workCenterCodeRef.current = workCenterCode;
|
|||
|
|
}, [router])
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
socket.current = io.connect(ioSocketUrl, {transports:['websocket']});
|
|||
|
|
|
|||
|
|
socket.current.on('connect', function() {
|
|||
|
|
console.log("msg页面连接成功！");
|
|||
|
|
getData();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
socket.current.on('timePerformanceGoodProduct', function(data) {
|
|||
|
|
update(data)
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// update();
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className='screen-container'>
|
|||
|
|
<Header title={"计划看板"} />
|
|||
|
|
<div className="screen-container-content">
|
|||
|
|
<Row className='height-45' gutter={gutter} bottom={bottom}>
|
|||
|
|
<Row.Col span={5}>
|
|||
|
|
<Card title="今日生产总数" titleSpace={true} overVisible={true}>
|
|||
|
|
<Chart ref={planNumRef} />
|
|||
|
|
</Card>
|
|||
|
|
</Row.Col>
|
|||
|
|
<Row.Col span={14}>
|
|||
|
|
<Card title="今日生产统计" overVisible={true}>
|
|||
|
|
<Chart ref={productNumRef} />
|
|||
|
|
</Card>
|
|||
|
|
</Row.Col>
|
|||
|
|
<Row.Col span={5}>
|
|||
|
|
<Card title="今日生产合格总数" titleSpace={true} overVisible={true}>
|
|||
|
|
<Chart ref={okNumRef} />
|
|||
|
|
</Card>
|
|||
|
|
</Row.Col>
|
|||
|
|
</Row>
|
|||
|
|
<Row className='height-55' gutter={gutter}>
|
|||
|
|
<Row.Col span={24}>
|
|||
|
|
<Card title="生产概况" titleSpace={true} padding={`15px ${gutter}px`}>
|
|||
|
|
<Table
|
|||
|
|
ref={productTableRef}
|
|||
|
|
mainKey="code"
|
|||
|
|
columns={productTableColumns}
|
|||
|
|
autoNext={false}
|
|||
|
|
pageFinished={pageFinished}
|
|||
|
|
/>
|
|||
|
|
</Card>
|
|||
|
|
</Row.Col>
|
|||
|
|
</Row>
|
|||
|
|
</div>
|
|||
|
|
<Footer />
|
|||
|
|
<style jsx>{`
|
|||
|
|
.screen-container{
|
|||
|
|
height: 100vh;
|
|||
|
|
overflow: auto;
|
|||
|
|
background: url('/img/bg.png') center center;
|
|||
|
|
position: relative;
|
|||
|
|
padding-top: 96px;
|
|||
|
|
padding-bottom: 82px;
|
|||
|
|
}
|
|||
|
|
.screen-container-content{
|
|||
|
|
height: 100%;
|
|||
|
|
padding: 0 ${gutter}px;
|
|||
|
|
}
|
|||
|
|
`}</style>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default withRouter(PlanBoard)
|