Skip to content

M
mes-kanban
Commit d6c32192 authored by 沈翠玲's avatar 沈翠玲
Browse files
Options

设备看板

parent e39eba93
Show whitespace changes
Inline Side-by-side
Showing with 375 additions and 486 deletions
config/config.ts
View file @ d6c32192
......@@ -25,6 +25,7 @@ export default defineConfig({
locale: {
// default zh-CN
default: 'zh-CN',
useLocalStorage: true,
antd: true,
// default true, when it is true, will use `navigator.language` overwrite default
baseNavigator: true,
......
src/locales/th-TH/kanban.ts
View file @ d6c32192
......@@ -40,6 +40,19 @@ export default {
'星期四': 'วันพฤหัสบดี',
'星期五': 'วันศุกร์',
'星期六': 'วันเสาร์',
'总产量': 'ผลผลิตทั้งหมด',
'利用率': 'อัตราการใช้ประโยชน์',
'设备数': 'จำนวนอุปกรณ์',
'异常率': 'อัตราความผิดปกติ',
'异常数': 'ค่าคงที่แตกต่างกัน',
'待处理': 'เพื่อดำเนินการ',
'全厂': 'โรงงานทั้งหมด',
'当日设备生产综合看板': 'การผลิตอุปกรณ์ที่ครอบคลุมของวัน Kanban',
'设备号': 'หมายเลขอุปกรณ์',
'处理中':'ในการประมวลผล',
'原因': 'เหตุผล',
'状态': 'สถานะ',
'产线选择': 'การเลือกสายการผลิต'
}
;
\ No newline at end of file
src/locales/zh-CN/kanban.ts
View file @ d6c32192
......@@ -40,5 +40,18 @@ export default {
'星期四': '星期四',
'星期五': '星期五',
'星期六': '星期六',
'总产量': '总产量',
'利用率': '利用率',
'设备数': '设备数',
'异常率': '异常率',
'异常数': '异常数',
'待处理': '待处理',
'全厂': '全厂',
'当日设备生产综合看板': '当日设备生产综合看板',
'设备号': '设备号',
'处理中':'处理中',
'原因': '原因',
'状态': '状态',
'产线选择': '产线选择'
};
\ No newline at end of file
src/pages/Welcome.less
View file @ d6c32192
......@@ -48,7 +48,7 @@
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
border-radius: 10px;
margin-right: 30px;
margin-right: 60px;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
......@@ -62,6 +62,11 @@
background-image: url('./img/1.png');
}
}
&:nth-child(2) {
.imgWapper {
background-image: url('./img/2.png');
}
}
}
.logout {
position: absolute;
......
src/pages/kanban/components/FHD1080P/Style2/index.less
View file @ d6c32192
......@@ -50,8 +50,8 @@
.subTitle {
position: absolute;
bottom: 10px;
left: 0;
font-weight: 500;
right: 0;
font-weight: 400;
font-size: 36px;
text-shadow: 0 0 4px #9fc4f5, 0 0 4px #9fc4f5;
}
......
src/pages/kanban/components/FHD1080P/Style2/index.tsx
View file @ d6c32192
......@@ -7,6 +7,8 @@ export type Style1Props = {
autoResize: boolean;
headerText: string;
subTitle?: string;
headerStyle?: object;
style?: object;
onHeaderClick?: () => void;
};
const intl = getIntl();
......@@ -18,6 +20,8 @@ function getWeekDayString(weekDay: number) {
const Style1: React.FC<Style1Props> = ({
autoResize,
headerText,
headerStyle,
style,
subTitle,
children,
onHeaderClick,
......@@ -68,6 +72,7 @@ const Style1: React.FC<Style1Props> = ({
<div
className={styles.container}
style={{
...style,
transform: `scale(${scaleWidth},${scaleHeight})`,
}}
>
......@@ -78,7 +83,7 @@ const Style1: React.FC<Style1Props> = ({
<br />
{currentWeek} {currentTime}
</div>
<div className={styles.centerheader}>
<div className={styles.centerheader} style={headerStyle}>
{headerText}
<div className={styles.subTitle}>{subTitle}</div>
</div>
......
src/pages/kanban/paintingProcessKanban/components/DeviceGroup/index.tsx
View file @ d6c32192
......@@ -30,25 +30,37 @@ const Abnormal: React.FC<{
status: type,
});
};
useEffect(() => {
let timer: NodeJS.Timer | null = null;
let leftScroll = document.getElementById('leftScroll')
const stopLoop = () => {
if (timer) {
clearInterval(timer);
timer = null;
}
};
const startLoop = () => {
stopLoop();
let leftScroll = document.getElementById('leftScroll') as HTMLElement
if (leftScroll) {
if (timer !== null) clearInterval(timer);
timer = setInterval(() => {
leftScroll.scrollTop += 40
leftScroll.scrollTop += 60
if (leftScroll.scrollTop + leftScroll.offsetHeight >= leftScroll.scrollHeight) {
leftScroll.scrollTop = 0
}
}, setting.rowMovingTime * 1000)
}
};
useEffect(() => {
stopLoop()
startLoop()
return () => {
if (timer !== null) clearInterval(timer);
stopLoop()
}
}, [setting]);
return (
<>
<div className={styles.leftWrapper} id="leftScroll">
<div className={styles.leftWrapper} id="leftScroll" onMouseOver={stopLoop}//移出关闭
onMouseOut={startLoop}>
{factoryLine.map((factory) => (
<div className={styles.Factorycard} >
<div>{factory.name}</div>
......
src/pages/kanban/paintingProcessKanban/components/PassingRate/index.tsx
View file @ d6c32192
......@@ -4,140 +4,86 @@ import type { ECharts } from 'echarts';
import { getInstanceByDom } from 'echarts';
type ProcessOutProps = {
data: KANBAN.ProductionComprehens.ProcessYieldData[];
data: Number;
setting: any;
};
const formatOptions = (data: any) => {
const option = {
color: [
{
type: 'linear',
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [
{
offset: 1,
color: '#011126', // 100% 处的颜色
},
{
offset: 0,
color: '#00ced3', // 0% 处的颜色
},
],
global: false, // 缺省为 false
tooltip: {
formatter: "{a} <br/>{b} : {c}%"
},
series: [
{
type: 'linear',
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [
{
offset: 1,
color: '#011126',
},
{
offset: 0,
color: '#3ba7cc',
},
],
global: false, // 缺省为 false
},
{
type: 'linear',
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [
{
offset: 1,
color: '#011126',
},
{
offset: 0,
color: '#7bb249',
},
],
global: false, // 缺省为 false
},
],
tooltip: {},
xAxis: {
type: 'value',
show: false,
},
dataZoom: [
{
type: 'slider',
orient: 'vertical',
show: false,
startValue: 0,
endValue: 3,
},
],
grid: {
left: 82,
bottom: 30,
right: 40,
},
legend: {
show: false
name: '利用率',
type: 'gauge',
detail: { formatter: '{value}%' },
data: [{ value: data, name: '利用率' }],
radius: '110%',
center: ['50%', '60%'],
startAngle: 225,
endAngle: -45,
splitNumber: 10, // 分割线的数量
axisLine: {
lineStyle: {
width: 18,
color: [
[0.5, '#ff0000'],
[0.8, '#fef000'],
[1, '#00b58f']
]
}
},
yAxis: {
type: 'category',
triggerEvent: true,
data: [],
axisLabel: {
color: '#fff',
fontSize: 14,
formatter: function (value: string) {
return (value.length > 4 ? (value.slice(0,4)+"...") : value )
}
color: '#fff'
},
axisTick: {
show: false,
length: 12,
lineStyle: {
color: 'auto',
}
},
axisLine: {
show: false,
splitLine: {
length: 20,
lineStyle: {
color: 'auto',
}
},
pointer: {
width: 5,
length: '80%',
shadowColor: '#ccc', //默认透明
shadowBlur: 5,
shadowOffsetX: 3,
shadowOffsetY: 3
},
series: [],
};
if (data && data.length) {
const xAxisData = data.map((item: any) => item.cause);
const series = [{
type: 'bar',
barGap: 0,
label: {
title: {
show: true,
position: 'right',
offsetCenter: [0, '-30%'],
textStyle: {
color: '#fff',
fontSize: 30
}
},
data: data.map((item: any) => item.ct),
}];
option.yAxis.data = xAxisData;
option.series = series;
detail: {
show: true,
offsetCenter: [0, '40%'],
textStyle: {
color: 'auto',
fontSize: 40
}
},
data: [{ value: data, name: '' }],
animationDuration: 4000, // 仪表盘动画时间
}
console.log('option', option)
]
};
return option;
};
const Main: React.FC<ProcessOutProps> = ({ data, setting }) => {
const chartRef = useRef<HTMLDivElement>(null);
const [isModalOpen, setIsModalOpen] = useState(false);
const closeModal = () => setIsModalOpen(false);
const [processParams, setProcessParams] = useState({
dataRange: 1,
processName: '',
current: 1,
pageSize: 10,
kanbanSettingId: '',
});
useEffect(() => {
// Initialize chart
let chart: ECharts | undefined;
......@@ -168,31 +114,6 @@ const Main: React.FC<ProcessOutProps> = ({ data, setting }) => {
const chart = getInstanceByDom(chartRef.current);
const option = formatOptions(data);
chart?.setOption(option);
chart?.off('click');
chart?.on('click', (p) => {
if (p.seriesName === '完成量') {
console.log(setting.productionComprehensKanbanSettingId, '----');
setProcessParams({
dataRange: setting.dataRange,
processName: p.name,
current: 1,
pageSize: 10,
kanbanSettingId: setting.productionComprehensKanbanSettingId,
});
setIsModalOpen(true);
}
});
// 如果数据工序大于5那么需要自动轮训播放
if (option.yAxis.data.length > 4 && setting.rowMovingTime > 0) {
timer = setInterval(() => {
option.dataZoom[0].startValue++;
if (option.dataZoom[0].endValue++ >= option.yAxis.data.length - 1) {
option.dataZoom[0].startValue = 0;
option.dataZoom[0].endValue = 3;
}
chart?.setOption(option);
}, setting.rowMovingTime * 1000);
}
}
return () => {
if (timer !== null) clearInterval(timer);
......
src/pages/kanban/paintingProcessKanban/components/ProcessFail/index.tsx
View file @ d6c32192
import { Modal } from 'antd';
import { ECharts, getInstanceByDom } from 'echarts';
import * as echarts from 'echarts/lib/echarts';
import React, { useEffect, useRef, useState } from 'react';
import ModalChart from './modalChart';
import QualityErrorTable from './qualityErrorTable';
import { queryPunctualityPenetratingByKanban } from '../../services/api';
import { getIntl } from 'umi';
import React, { useEffect, useRef } from 'react';
import { useIntl } from 'umi';
import ProTable, { ActionType } from '@ant-design/pro-table';
type ProcessFailProps = {
data: KANBAN.ProductionComprehens.ProcessDefectRatioData[];
setting: any;
};
const formatOptions = (data: any) => {
const intl = getIntl();
const option = {
color: [
{
type: 'linear',
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [
const Main: React.FC<ProcessFailProps> = ({ data, setting }) => {
const intl = useIntl();
const actionRef = useRef<ActionType>();
useEffect(() => {
actionRef.current?.reload();
}, [data]);
const columns = [
{
offset: 1,
color: '#011126', // 100% 处的颜色
title: intl.formatMessage({
id: '设备号'
}),
dataIndex: 'equipmentNo',
key: 'equipmentNo',
width: 80,
},
{
offset: 0,
color: '#2f8eb9', // 0% 处的颜色
title: intl.formatMessage({
id: '设备'
}),
dataIndex: 'equipmentName',
key: 'equipmentName',
width: 80,
},
],
global: false, // 缺省为 false
},
{
type: 'linear',
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [
{
offset: 1,
color: '#011126',
title: intl.formatMessage({
id: '原因'
}),
dataIndex: 'cause',
key: 'cause',
width: 80,
},
{
offset: 0,
color: '#ffc000',
},
],
global: false, // 缺省为 false
},
],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
valueFormatter: (v) => v + '%',
},
xAxis: {
type: 'value',
show: false,
},
dataZoom: [
{
type: 'slider',
orient: 'vertical',
show: false,
startValue: 0,
endValue: 3,
},
],
grid: {
left: 70,
bottom: 30,
right: 40,
},
legend: {
orient: 'vertical',
selectedMode: false,
right: 0,
itemWidth: 10,
itemHeight: 10,
textStyle: {
color: '#fff',
fontSize: 14,
},
},
yAxis: {
type: 'category',
triggerEvent: true,
data: [],
axisLabel: {
color: '#fff',
fontSize: 14,
formatter: function (value: string) {
return (value.length > 4 ? (value.slice(0,4)+"...") : value )
}
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
series: [],
};
if (data && data.length) {
const lenged = [
{ label: intl.formatMessage({id: '合格率'}), field: 'qualifiedRate' }
];
const xAxisData = data.map((item: any) => item.processName);
const series = lenged.map((item) => {
return {
type: 'bar',
name: item.label,
barGap: 0,
label: {
show: true,
position: 'right',
color: '#fff',
formatter: '{c}%',
},
data: data.map((v) => v[item.field]),
};
});
option.yAxis.data = xAxisData;
option.series = series;
title: intl.formatMessage({
id: '状态'
}),
dataIndex: 'state',
key: 'state',
width: 80,
valueEnum: {
'NOT': {
text: intl.formatMessage({
id: '待处理'
}),
status: 'Error'
},
'SUBMIT': {
text: intl.formatMessage({
id: '处理中'
})
}
return option;
};
const Main: React.FC<ProcessFailProps> = ({ data, setting }) => {
const chartRef = useRef<HTMLDivElement>(null);
const [modalData, setModalData] = useState<KANBAN.ProductionComprehens.PassRateTrendChart[]>([]);
const [isModalOpen, setIsModalOpen] = useState(false);
const [isModalTableOpen, setIsModalTableOpen] = useState(false);
const [proName, setProName] = useState('');
const closeModal = () => setIsModalOpen(false);
const closeModalTable = () => setIsModalTableOpen(false);
const [processParams, setProcessParams] = useState({
processName: '',
kanbanSettingId: '',
});
useEffect(() => {
// Initialize chart
let chart: ECharts | undefined;
if (chartRef.current !== null) {
chart = echarts.init(chartRef.current);
}
// Add chart resize listener
// ResizeObserver is leading to a bit janky UX
function resizeChart() {
chart?.resize();
}
window.addEventListener('resize', resizeChart);
// Return cleanup function
return () => {
chart?.off('click');
chart?.dispose();
window.removeEventListener('resize', resizeChart);
};
}, []);
useEffect(() => {
let timer: NodeJS.Timer | null = null;
// Update chart
if (chartRef.current !== null) {
if (timer !== null) clearInterval(timer);
const chart = getInstanceByDom(chartRef.current);
const option = formatOptions(data);
chart?.setOption(option);
chart?.off('click');
chart?.on('click', (p) => {
if (p.targetType === 'axisLabel') {
// 显示弹窗
queryPunctualityPenetratingByKanban({
kanbanSettingId: setting.productionComprehensKanbanSettingId,
processName: p.value as string,
}).then(({ data: cData }) => {
setProName(p.value as string);
setModalData(cData);
setIsModalOpen(true);
setIsModalTableOpen(false);
});
}
if (p.seriesName === '未通过率') {
setProcessParams({
processName: p.name,
kanbanSettingId: setting.productionComprehensKanbanSettingId,
});
setIsModalTableOpen(true);
setIsModalOpen(false);
}
});
// 如果数据工序大于5那么需要自动轮训播放
if (option.yAxis.data.length > 4 && setting.rowMovingTime > 0) {
timer = setInterval(() => {
option.dataZoom[0].startValue++;
if (option.dataZoom[0].endValue++ >= option.yAxis.data.length - 1) {
option.dataZoom[0].startValue = 0;
option.dataZoom[0].endValue = 3;
}
chart?.setOption(option);
}, setting.rowMovingTime * 1000);
}
}
return () => {
if (timer !== null) clearInterval(timer);
};
}, [data, setting]);
];
return (
<>
<Modal
title={proName + '当月工序合格率'}
visible={isModalOpen}
footer={null}
width={'70%'}
onCancel={closeModal}
>
<ModalChart data={modalData} />
</Modal>
<Modal
title={'质量异常'}
visible={isModalTableOpen}
footer={null}
width={'70%'}
onCancel={closeModalTable}
>
<QualityErrorTable params={processParams} />
</Modal>
<div ref={chartRef} style={{ height: '370px' }} />
<ProTable
options={false}
search={false}
actionRef={actionRef}
dataSource={data}
columns={columns}
size={'middle'}
bordered
pagination={false}
scroll={{ y: 450 }}
/>
</>
);
};
......
src/pages/kanban/paintingProcessKanban/components/SettingForm/index.tsx
View file @ d6c32192
......@@ -40,7 +40,7 @@ export type SettingFormProps = {
const SettingForm: React.FC<SettingFormProps> = (props) => {
const formRef = useRef<ProFormInstance>();
const intl = useIntl();
const [productionProgressKanbanSettings, setProductionProgressKanbanSettings] = useState<
const [lineName, setLineName] = useState<
KanbanSetting[]
>([]);
......@@ -59,17 +59,13 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
onVisibleChange={(visible: boolean) => {
if (visible) {
formRef?.current?.setFieldsValue({
...props.values,
productionComprehensKanbanSettingId: props.values.productionComprehensKanbanSetting?.id,
...props.values
});
}
props.onVisibleChange(visible);
}}
onFinish={async (values: FormSettingDto) => {
const productionComprehensKanbanSetting = productionProgressKanbanSettings
.filter((a) => a.id === values.productionComprehensKanbanSettingId)
.pop();
props.onSubmitting({ ...values, productionComprehensKanbanSetting });
props.onSubmitting({ ...values });
props.onVisibleChange(false);
}}
>
......@@ -90,17 +86,23 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
min={1}
fieldProps={{ precision: 0 }}
/>
{/* <ProFormSelect
name="productionComprehensKanbanSettingId"
label="看板设置"
<ProFormSelect
name="lineName"
label={intl.formatMessage({id: '产线选择'})}
required
width="xl"
request={async () => {
const { data } = await queryProductionComprehensKanbanData();
setProductionProgressKanbanSettings(data);
return data.map((a) => ({ label: a.kanbTitle, value: a.id }));
if (Array.isArray(data)) {
data.unshift(intl.formatMessage({
id: '全厂'
}))
}
setLineName(data);
return data.map((a) => ({ label: a, value: a }));
}}
/>
{/*
<ProFormRadio.Group
label="工序产量"
name="dataRange"
......
src/pages/kanban/paintingProcessKanban/index.less
View file @ d6c32192
......@@ -219,11 +219,9 @@
}
.rightTopContainer {
width: 100%;
height: 430px;
padding: 50px 44px;
background-image: url('./images/bg3.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 288px;
background: #001855;
margin-bottom: 10px;
}
.rightTopTitle {
width: 100%;
......@@ -263,7 +261,7 @@
}
.rightTopBottomContainer {
width: 100%;
background: #040f24;
background: #001855;
margin-top: 5px;
}
.rightTopBottomItem {
......@@ -283,18 +281,87 @@
.rightBottomContent {
width: 100%;
height: 100%;
background-image: url('./images/bg7.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
background: #001855;
:global {
.ant-table-header > table {
border-top: none !important;
}
.ant-table, .ant-card {
background: transparent !important;
}
.ant-table-body::-webkit-scrollbar {
display: none; /* Chrome, Safari 和 Opera */
}
.ant-table-body {
-ms-overflow-style: none; /* IE 和 Edge */
scrollbar-width: none; /* Firefox */
}
.ant-table-cell-scrollbar {
display: none;
}
.ant-table-container {
border: none !important;
}
.ant-table-thead > tr > th {
color: #0d72c3;
background: transparent;
border-bottom: 1px solid #0d72c3;
}
.ant-table-cell {
border-right: none !important;
}
.ant-table-tbody > tr > td {
color: #4d9baa;
border-bottom: none;
}
.ant-empty-img-simple {
display: none;
}
.ant-empty-normal {
color: #4d9baa;
}
tr.ant-table-placeholder {
pointer-events: none;
}
.ant-badge-status-error {
display: none;
}
.ant-badge-status-text {
color: #ff4d4f;
}
.ant-table-tbody > tr > td.ant-table-cell-row-hover {
background: transparent !important;
}
}
}
.rightCenterContainer {
background: #001855;
margin-bottom: 10px;
width: 100%;
padding: 15px 10px 0 10px;
height: 148px;
line-height: 18px;
display: flex;
flex-wrap: wrap;
}
.rightCenterInner {
width: calc(100% / 2);
padding-left: 30px;
}
.rightLabel {
font-weight: 600;
font-size: 18px;
}
.rightValue {
font-weight: 600;
font-size: 17px;
}
.rightBottomContainer {
width: 100%;
height: 526px;
padding: 50px 44px;
background-image: url('./images/bg6.png');
background-repeat: no-repeat;
background-size: 100% 100%;
background: #001855;
}
.rightBottomTitle {
padding: 10px 0 0 65px;
......
src/pages/kanban/paintingProcessKanban/index.tsx
View file @ d6c32192
......@@ -14,25 +14,23 @@ import {
} from './services/api';
type AbnormalOverdueSetting = KANBAN.ProductionComprehens.AbnormalOverdueSetting;
type ProcessDefectRatioData = KANBAN.ProductionComprehens.ProcessDefectRatioData[];
type ProcessYieldData = KANBAN.ProductionComprehens.ProcessYieldData[];
type ComprehensiveDeviceEcpDataCount = KANBAN.ProductionComprehens.ComprehensiveDeviceEcpDataCount;
type ComprehensiveDataCount = KANBAN.ProductionComprehens.ComprehensiveDataCount;
type CountWeldingPassRate = KANBAN.ProductionComprehens.CountWeldingPassRate;
const Main: React.FC = () => {
const intl = useIntl();
const [setting, setSetting] = useState<Setting>({
autoResize: true,
intervalTime: 600,
rowMovingTime: 5,
productionComprehensKanbanSetting: undefined,
productionComprehensKanbanSettingId: undefined,
lineName: intl.formatMessage({
id: '全厂'
}),
dataRange: 1,
planSource: 1,
});
// 月度计划指标
const [monthData, setMonthData] = useState<KANBAN.ProductionComprehens.WorkOrderMonthlyIndexData>(
const [monthData, setMonthData] = useState<any>(
{
startOnTimeRatio: 0, //上线准时率
endOnTimeRatio: 0, //下线准时率
......@@ -53,9 +51,9 @@ const Main: React.FC = () => {
// 设备列表
const [equipMap, setEquipMap] = useState<any>([]);
// 工序未通过率
const [processDefectRatioData, setProcessDefectRatioData] = useState<ProcessDefectRatioData>([]);
const [processDefectRatioData, setProcessDefectRatioData] = useState<Array<any>>([]);
// 不合格分布
const [countWeldingPassRate, setCountWeldingPassRate] = useState<Array<any>>([]);
const [countWeldingPassRate, setCountWeldingPassRate] = useState<Number>(0);
// 设备异常
const [abnormalDeviceData, setAbnormalDeviceData] = useState<ComprehensiveDeviceEcpDataCount>({
unCloseCt: 0,
......@@ -78,52 +76,29 @@ const Main: React.FC = () => {
useEffect(() => {
// console.log('sadas执行' )
let t: NodeJS.Timer | null = null;
const { productionComprehensKanbanSettingId, dataRange, planSource, intervalTime } = setting;
// if (!productionComprehensKanbanSettingId) {
// // 清除定时器
// if (t !== null) {
// clearInterval(t);
// }
// // 重制图标
// setProcessYieldData([]);
// setProcessDefectRatioData([]);
// setMonthData({
// startOnTimeRatio: 0, //上线准时率
// endOnTimeRatio: 0, //下线准时率
// qualifiedRatio: 0, //产品合格率
// hisPendingQuantity: 0, //历史月待完工
// monthPlanQuantity: 0, //月计划
// expireFinishQuantity: 0, //超期完工
// actualFinishQuantity: 0, //实际完工
// monthPlanConcludeRatio: 0, //月计划达成率
// });
// setCountWeldingPassRate({
// wholeSetPassRate: 0,
// longitudinalJointRate: 0,
// transverseJointRate: 0,
// piecePassRate: 0,
// selectionRate: 0,
// longitudinalJointBasicRate: 0,
// selectionBasicRate: 0,
// transverseJointBasicRate: 0,
// });
// const tmp = {
// unCloseCt: 0, //未关闭
// expireUnClose: 0, //超期
// totalCt: 0,
// };
// setAbnormalQualityData(tmp);
// setAbnormalProdData(tmp);
// setAbnormalDeviceData({ ...tmp, equipErrorCt: 0, equipCt: 0 });
// return;
// }
const { intervalTime } = setting;
// 查询工序产量
const queryProcessYieldData1 = async () => {
const body = {
lineName: null
lineName: setting?.lineName === intl.formatMessage({
id: '全厂'
}) ? null : setting?.lineName
};
const { data: { equipMap } } = await queryEquipmentCurrentMonthStat(body);
const { code: code, data: data } = await queryEquipmentCurrentMonthStat(body);
if (code !== 200 || !data) {
setMonthData({
abnormalNum: null,
equipNum: null,
qualifiedRatio: null,
totalOutput: null,
unProcessNum: null
});
setProcessDefectRatioData([])
setCountWeldingPassRate(0)
setEquipMap([])
return
}
const { equipMap, equipAvailability, abnormalInfoList, abnormalNum, equipNum, qualifiedRatio, totalOutput, unProcessNum } = data
const equipList = []
for (let key in equipMap) {
equipList.push({
......@@ -131,35 +106,21 @@ const Main: React.FC = () => {
arr: equipMap[key]
})
}
setEquipMap(equipList)
};
// 异常分布
const requestAbnormal = async (settingId: string) => {
// 异常超期天数获取
// const abnormalOverdueSettingList = await findAbnormalOverdueSetting();
const tt: AbnormalOverdueSetting = {
diffDayEquipment: 0,
diffDayQuality: 0,
diffDayProduction: 0,
};
setAbnormalOverdueSetting(tt);
// 当月异常分布数据
const { data: {equipAbnormal, productAbnormal, equipErrorArr, equipCt, equipErrorCt} } = await currentMonthStat({ settingId });
setAbnormalDeviceData({
equipCt,
equipErrorCt,
...equipAbnormal
setMonthData({
abnormalNum,
equipNum,
qualifiedRatio,
totalOutput,
unProcessNum
});
setAbnormalProdData(productAbnormal);
setAbnormalQualityData(equipErrorArr);
setProcessDefectRatioData(abnormalInfoList)
setCountWeldingPassRate(equipAvailability)
setEquipMap(equipList)
};
const refresh = () => {
queryProcessYieldData1();
requestAbnormal(productionComprehensKanbanSettingId);
};
refresh();
......@@ -173,14 +134,16 @@ const Main: React.FC = () => {
}
};
}, [setting]);
const intl = useIntl();
return (
<>
<KanbanStyle
headerText={intl.formatMessage({
id: '当日设备生产综合看板'
})}
subTitle={setting.productionComprehensKanbanSetting?.kanbTitle}
style={{backgroundColor: '#00094f'}}
headerStyle={{fontSize: '30px'}}
subTitle={setting?.lineName}
autoResize={setting.autoResize}
onHeaderClick={() => {
setSettingFormVisible(true);
......@@ -212,7 +175,6 @@ const Main: React.FC = () => {
<div className={styles.rightContainer}>
{/* 焊接一次通过率 */}
<div className={styles.rightTopContainer}>
<div className={styles.rightTopTitle}>{intl.formatMessage({id: '不合格分布'})}</div>
<div className={styles.rightTopBottomContainer}>
<PassingRate
data={countWeldingPassRate}
......@@ -220,10 +182,59 @@ const Main: React.FC = () => {
/>
</div>
</div>
<div className={styles.rightCenterContainer}>
<div className={styles.rightCenterInner}>
<span className={styles.rightLabel}>
{intl.formatMessage({ id: '总产量' })}：
</span>
<span className={styles.rightValue} style={{color: '#00b88f'}}>
{monthData.totalOutput || 0}
</span>
</div>
<div className={styles.rightCenterInner}>
<span className={styles.rightLabel}>
{intl.formatMessage({ id: '利用率' })}：
</span>
<span className={styles.rightValue} style={{color: '#f0f104'}}>
{monthData.equipAvailability ? monthData.equipAvailability + '%' : 0+ '%'}
</span>
</div>
<div className={styles.rightCenterInner}>
<span className={styles.rightLabel}>
{intl.formatMessage({ id: '设备数' })}：
</span>
<span className={styles.rightValue} style={{color: '#00b88f'}}>
{monthData.equipNum || 0 }
</span>
</div>
<div className={styles.rightCenterInner}>
<span className={styles.rightLabel}>
{intl.formatMessage({ id: '合格率' })}：
</span>
<span className={styles.rightValue} style={{color: '#00b88f'}}>
{monthData.qualifiedRatio ? monthData.qualifiedRatio + '%' : 0+ '%'}
</span>
</div>
<div className={styles.rightCenterInner}>
<span className={styles.rightLabel}>
{intl.formatMessage({ id: '异常数' })}：
</span>
<span className={styles.rightValue} style={{color: '#f0f104'}}>
{monthData.abnormalNum || 0}
</span>
</div>
<div className={styles.rightCenterInner}>
<span className={styles.rightLabel}>
{intl.formatMessage({ id: '待处理' })}：
</span>
<span className={styles.rightValue} style={{color: '#f0f104'}}>
{monthData.unProcessNum || 0}
</span>
</div>
</div>
{/* 当月工序合格率 */}
<div className={styles.rightBottomContainer}>
<div className={styles.rightBottomContent}>
<div className={styles.rightBottomTitle}>{intl.formatMessage({id: '当月工序合格率'})}</div>
<div style={{ padding: '0 20px', height: '376px' }}>
<ProcessFail data={processDefectRatioData} setting={setting} />
</div>
......
src/pages/kanban/paintingProcessKanban/services/api.ts
View file @ d6c32192
......@@ -34,9 +34,9 @@ type ChartData = {
export async function queryProductionComprehensKanbanData() {
return request<Api.ServiceResult<ProductionComprehensKanbanDataDto[]>>(
'/api/productionComprehensiveKanbanSetting/list',
'/md/workunit/selectGroupLineName',
{
method: 'POST',
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment