排产看板优化

dev-scheduling
zhangdi 3 months ago
parent b0446a7eeb
commit 4e6d155ca5
  1. 133
      src/views/productionSchedulingPlan/schedulingDashboard/container.vue
  2. 36
      src/views/productionSchedulingPlan/schedulingException/index.vue
  3. 378
      src/views/productionSchedulingPlan/statisticalAnalysis/components/orderDialog.vue
  4. 245
      src/views/productionSchedulingPlan/statisticalAnalysis/index.vue

@ -303,6 +303,7 @@
v-for="(task, taskIndex) in layer"
:key="taskIndex"
class="task-bar"
@click="showTaskDetail(task)"
:class="{
'task-bar-narrow':
getWidthPercent(task.planStartTime, task.planEndTime) < 2.1,
@ -774,6 +775,20 @@ export default {
}
},
methods: {
showTaskDetail(task) {
console.log('showTaskDetail', task);
// 4. postMessage
window.parent.postMessage(
{
type: 'TASK_DETAILS',
batchNo: task.batchNo,
woCode: task.woCode,
partCode: task.partCode,
cardNo: task.cardNo
},
'*' // 生产环境建议指定父页面域名(如 "https://parent-domain.com"避免安全风险
);
},
//
getNarrowTaskOffsetByLayer(layerIndex) {
//
@ -1056,56 +1071,84 @@ export default {
//
processData(rawData) {
const tasks = [];
const orders = [];
//
rawData.forEach(item => {
const woCode = item.woCode; //
const woTasks = item.workOrderList || []; //
//
if (woTasks.length > 0) {
const firstTask = woTasks[0];
orders.push({
woCode,
partCode: firstTask.partCode,
batchNo: firstTask.batchNo,
makeQty: firstTask.makeQty,
productIdent: firstTask.productIdent,
priorityAps: firstTask.priorityAps,
});
}
const orders = [];
//
rawData.forEach(item => {
const woCode = item.woCode; //
const woTasks = item.workOrderList || []; //
//
if (woTasks.length > 0) {
const firstTask = woTasks[0];
orders.push({
woCode,
partCode: firstTask.partCode,
batchNo: firstTask.batchNo,
makeQty: firstTask.makeQty,
productIdent: firstTask.productIdent,
priorityAps: firstTask.priorityAps,
});
}
//
//
const groupedTasks = {};
woTasks.forEach(task => {
if (!groupedTasks[task.processName]) {
groupedTasks[task.processName] = [];
}
groupedTasks[task.processName].push(task);
});
Object.values(groupedTasks).forEach(group => {
const minStartTime = Math.min(...group.map(t => this.parseTimeToHours(t.planStartTime)));
const maxEndTime = Math.max(...group.map(t => this.parseTimeToHours(t.planEndTime)));
//
const mergedTask = {
...group[0], //
planStartTime: this.formatHoursToTime(minStartTime), //
planEndTime: this.formatHoursToTime(maxEndTime), //
};
//
const groupedTasks = {};
woTasks.forEach(task => {
if (!groupedTasks[task.processName]) {
groupedTasks[task.processName] = [];
}
groupedTasks[task.processName].push(task);
});
tasks.push(mergedTask);
});
//
Object.values(groupedTasks).forEach(group => {
//
const sortedTasks = [...group].sort((a, b) => {
const aStart = this.parseTimeToHours(a.planStartTime);
const bStart = this.parseTimeToHours(b.planStartTime);
return aStart - bStart;
});
this.allOrders = orders;
this.totalOrders = orders.length;
this.taskData = tasks;
//
const mergedTasks = [];
let currentMergedTask = null;
this.updateCurrentPageOrders();
this.loading = false;
sortedTasks.forEach(task => {
if (!currentMergedTask) {
//
currentMergedTask = { ...task };
} else {
//
const prevEnd = this.parseTimeToHours(currentMergedTask.planEndTime);
const currStart = this.parseTimeToHours(task.planStartTime);
if (prevEnd === currStart) {
//
currentMergedTask.planEndTime = task.planEndTime;
} else {
//
mergedTasks.push(currentMergedTask);
currentMergedTask = { ...task };
}
}
});
//
if (currentMergedTask) {
mergedTasks.push(currentMergedTask);
}
//
tasks.push(...mergedTasks);
});
});
this.allOrders = orders;
this.totalOrders = orders.length;
this.taskData = tasks;
this.updateCurrentPageOrders();
this.loading = false;
},
formatHoursToTime(hours) {
const baseDate = new Date(this.baseDate);

@ -16,6 +16,15 @@
@refresh-change="refreshChange"
@on-load="onLoad"
>
<template #menu="scope">
<el-button
v-if="$route.path == '/productionSchedulingPlan/schedulingException/index'"
type="text"
size="mini"
@click="handleFn(scope.row)"
>处理</el-button>
</template>
</avue-crud>
</basic-container>
</template>
@ -95,8 +104,22 @@ export default {
gridBtn: false,
searchMenuPosition: 'right',
align: 'center',
menu: false,
menu: true,
column: [
{
label: '时间',
prop: 'cycledate',
search: true,
sortable: true,
span: 12,
hide: true,
type: 'date',
searchRange: true,
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
format: 'YYYY-MM-DD',
valueFormat: 'YYYY-MM-DD',
},
{
label: '异常原因',
prop: 'errorInfo',
@ -114,8 +137,8 @@ export default {
// span: 12,
// },
{
label: '计划员',
prop: 'planUser',
label: '调度员',
prop: 'dispatcher',
search: false,
sortable: true,
width: 150,
@ -264,6 +287,9 @@ export default {
};
},
methods: {
handleFn(row){
this.$router.push({path:'/productionSchedulingPlan/basic/equipmentCapacity'})
},
searchReset() {
this.query = {};
this.onLoad(this.page);
@ -287,6 +313,10 @@ export default {
onLoad(page, params = {}) {
this.loading = true;
this.data = [];
if (!!params.cycledate) {
this.query.startTime = params.cycledate[0];
this.query.endTime = params.cycledate[1];
}
getYieldOrderList(
page.currentPage,
page.pageSize,

@ -0,0 +1,378 @@
<template>
<el-dialog
:title="title"
append-to-body
:modelValue="openShow"
width="30%"
@close="closeDialog"
fullscreen
>
<avue-crud
:option="option"
:table-loading="loading"
:data="data"
v-model="form"
v-model:search="query"
v-model:page="page"
ref="crud"
@search-change="searchChange"
@search-reset="searchReset"
@selection-change="selectionChange"
@current-change="currentChange"
@size-change="sizeChange"
@refresh-change="refreshChange"
@on-load="onLoad"
>
</avue-crud>
<template #footer>
<span class="dialog-footer">
<el-button @click="closeDialog"> </el-button>
<el-button type="primary" @click="submit"> </el-button>
</span>
</template>
</el-dialog>
</template>
<script>
import { getYieldOrderList } from '@/api/productionSchedulingPlan/scheduling';
export default {
props: {
showDialog: {
type: Boolean,
default: false,
},
title: {
type: String,
default: '提示',
},
showType: {
type: String,
default: '',
},
rowData: {
type: Object,
default: () => {},
},
showAll: {
type: String,
default: '',
},
},
data() {
return {
openShow: false,
form: {},
selectionList: [],
query: {},
loading: true,
page: {
pageSize: 10,
currentPage: 1,
total: 0,
},
option: {
columnSort: true,
height: 'auto',
tip: false,
calcHeight: 32,
simplePage: false,
searchShow: true,
searchMenuSpan: 6,
searchIcon: true,
searchIndex: 3,
tree: false,
border: true,
index: true,
selection: false,
addBtn: false,
editBtn: false,
viewBtn: false,
delBtn: false,
editBtnText: '修改',
labelWidth: 120,
menuWidth: 80,
dialogWidth: 900,
dialogClickModal: false,
searchEnter: true,
excelBtn: false,
filterBtn: true,
searchShowBtn: false,
excelBtn: true,
showOverflowTooltip: true,
addBtnIcon: ' ',
viewBtnIcon: ' ',
delBtnIcon: ' ',
editBtnIcon: ' ',
gridBtn: false,
searchLabelPosition: 'left',
searchGutter: 24,
searchSpan: 6,
menuAlign: 'left',
gridBtn: false,
searchMenuPosition: 'right',
align: 'center',
header: false,
menu: false,
column: [
{
label: '作业中心',
prop: 'workCenterId',
search: false,
sortable: true,
span: 12,
width: 160,
type: 'select',
filterable: true,
dicUrl: '/blade-scheduling/workCenter/findList',
props: {
label: 'wcName',
value: 'id',
},
},
{
label: '订单同步时间',
prop: 'cycledate',
search: false,
sortable: true,
span: 12,
hide: true,
type: 'date',
searchRange: true,
searchLabelWidth:100,
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
format: 'YYYY-MM-DD',
valueFormat: 'YYYY-MM-DD',
},
{
label: '调度员',
prop: 'dispatcher',
search: false,
sortable: true,
width: 150,
span: 12,
},
{
label: '生产单号',
prop: 'yoCode',
search: false,
sortable: true,
width: 150,
span: 12,
display: false,
},
{
label: '计划单号',
prop: 'ypCode',
search: false,
sortable: true,
width: 150,
span: 12,
display: false,
},
{
label: '订单优先级',
prop: 'priorityApsStr',
search: false,
sortable: true,
width: 150,
span: 12,
display: false,
},
{
label: '零件号',
prop: 'partCode',
search: false,
sortable: true,
width: 150,
span: 12,
},
{
label: '零件名称',
prop: 'partName',
search: false,
sortable: true,
width: 150,
span: 12,
},
{
label: '产品型号',
prop: 'productType',
search: false,
sortable: true,
width: 150,
span: 12,
},
{
label: '批次号',
prop: 'batchNo',
search: false,
sortable: true,
width: 150,
span: 12,
},
{
label: '流程卡号',
prop: 'cardNo',
search: false,
sortable: true,
width: 150,
span: 12,
display: false,
},
{
label: '流转编码',
prop: 'roamNo',
search: false,
sortable: true,
width: 150,
span: 12,
},
{
label: '镀种',
prop: 'plate',
search: false,
sortable: true,
width: 150,
span: 12,
},
{
label: '生产标识',
prop: 'productIdent',
search: false,
sortable: true,
width: 150,
span: 12,
},
{
label: '生产数量',
prop: 'ypQty',
search: false,
sortable: true,
width: 150,
span: 12,
},
{
label: '面积(d㎡)',
prop: 'ypArea',
search: false,
sortable: true,
width: 150,
span: 12,
},
{
label: '需求交期',
prop: 'demandDate',
search: false,
sortable: true,
width: 150,
span: 12,
},
{
label: '计划下达时间',
prop: 'releaseDate',
search: false,
sortable: true,
width: 150,
span: 12,
},
{
label: '订单接收时间',
prop: 'startTim',
search: false,
sortable: true,
width: 150,
span: 12,
},
{
label: '备注',
prop: 'memo',
search: false,
sortable: true,
width: 150,
span: 12,
},
],
},
data: [],
};
},
mounted() {
this.openShow = this.showDialog;
if(this.showAll=='all'){
this.option.column[0].search = true;
this.option.column[1].search = true;
this.option.header=true
// this.option.column[0].search = true;
}
this.query.workCenterId = this.rowData.workCenterId;
this.onLoad(this.page, this.query);
},
methods: {
closeDialog() {
this.openShow = false;
this.$emit('closeDialog');
},
searchReset() {
this.query = {};
this.onLoad(this.page);
},
searchChange(params, done) {
this.query = params;
this.page.currentPage = 1;
this.onLoad(this.page, params);
done();
},
selectionChange(list) {
this.selectionList = list;
},
selectionClear() {
this.selectionList = [];
this.$refs.crud.toggleSelection();
},
currentChange(currentPage) {
this.page.currentPage = currentPage;
},
sizeChange(pageSize) {
this.page.pageSize = pageSize;
},
refreshChange() {
this.onLoad(this.page, this.query);
},
handleChange(file, fileList) {
// proxy.$Export.xlsx(file.raw).then((data) => {
// data.value = data.results;
// });
this.$message({
type: 'success',
message: '操作成功!',
});
},
onLoad(page, params = {}) {
this.loading = true;
this.data = [];
if (!!params.cycledate) {
this.query.startTime = params.cycledate[0];
this.query.endTime = params.cycledate[1];
}
getYieldOrderList(
page.currentPage,
page.pageSize,
Object.assign(params, this.query, { status: this.showType })
).then(res => {
this.data = res.data.data.records;
this.loading = false;
this.page.total = res.data.data.total;
});
},
},
};
</script>
<style lang="scss" scoped></style>

@ -5,12 +5,11 @@
:table-loading="loading"
:data="data"
v-model="form"
v-model:search="query"
v-model:page="page"
ref="crud"
@row-del="rowDel"
@search-change="searchChange"
@search-reset="searchReset"
@selection-change="selectionChange"
@current-change="currentChange"
@size-change="sizeChange"
@refresh-change="refreshChange"
@ -20,16 +19,87 @@
<template #menu-left> </template>
<template #menu-right> </template>
<template #schedulingRate="{ row }"> {{ row.schedulingRate }}% </template>
<!-- 总订单量 -->
<template #totalCount="{ row }">
<el-button type="text" plain @click="showOrderDetail(row, 'totalCount')">{{
row.totalCount
}}</el-button>
</template>
<!-- 已排产订单量 -->
<template #schedulingCount="{ row }">
<el-button type="text" plain @click="showOrderDetail(row, 'schedulingCount')">{{
row.schedulingCount
}}</el-button>
</template>
<!-- 未排产订单量 -->
<template #unschedulingCount="{ row }">
<el-button type="text" plain @click="showOrderDetail(row, 'unschedulingCount')">{{
row.unschedulingCount
}}</el-button>
</template>
<!-- 排产异常 -->
<template #errorCount="{ row }">
<el-button type="text" plain @click="showOrderDetail(row, 'errorCount')">{{
row.errorCount
}}</el-button>
</template>
<!-- 自定义总计行 -->
<template #footer="{ data }">
<tr class="table__summary">
<td v-for="(column, index) in columnsSum" :key="index">
<div v-if="index == 0" :style="{ width: columnWidthsData['index']-24 + 'px' }">
<!-- {{ column }} -->
<el-button type="text" plain @click="showOrderDetail(row, 'errorCount','all')">{{ column }}</el-button>
</div>
<div v-if="index == 1" :style="{ width: columnWidthsData['workCenterName']-24 + 'px' }">
<el-button type="text" plain @click="showOrderDetail(row, 'errorCount','all')">{{ column }}</el-button>
</div>
<div v-if="index == 2" :style="{ width: columnWidthsData['totalCount']-24 + 'px' }">
<el-button type="text" plain @click="showOrderDetail(row, 'totalCount','all')">{{ column }}</el-button>
</div>
<div v-if="index == 3" :style="{ width: columnWidthsData['schedulingCount']-24 + 'px' }">
<el-button type="text" plain @click="showOrderDetail(row, 'schedulingCount','all')">{{ column }}</el-button>
</div>
<div v-if="index == 4" :style="{ width: columnWidthsData['unschedulingCount']-24 + 'px' }">
<el-button type="text" plain @click="showOrderDetail(row, 'unschedulingCount','all')">{{ column }}</el-button>
</div>
<div v-if="index == 5" :style="{ width: columnWidthsData['errorCount']-24 + 'px' }">
<el-button type="text" plain @click="showOrderDetail(row, 'errorCount','all')">{{ column }}</el-button>
</div>
<div v-if="index == 6" :style="{ width: columnWidthsData['schedulingRate']-24 + 'px' }">
{{ column }}
<!-- <el-button type="text" plain @click="showOrderDetail(row, 'errorCount','all')">{{ column }}</el-button> -->
</div>
</td>
</tr>
</template>
</avue-crud>
<!-- 订单详情 -->
<order-dialog
ref="orderDialog"
v-if="showDialog"
:showDialog="showDialog"
:title="showTitle"
:showType="showType"
@close="closeDialog"
:rowData="rowData"
:showAll="showAll"
/>
</basic-container>
</template>
<script>
import { schedulingCount } from '@/api/productionSchedulingPlan/scheduling';
import orderDialog from './components/orderDialog.vue';
export default {
components: {},
components: {
orderDialog,
},
data() {
return {
columnsSum: [],
form: {},
query: {},
loading: true,
@ -39,6 +109,7 @@ export default {
total: 0,
},
option: {
showSummary: true,
columnSort: true,
tip: false,
height: 'auto',
@ -90,19 +161,33 @@ export default {
span: 12,
},
{
label: '总订单',
label: '总订单',
prop: 'totalCount',
search: false,
sortable: true,
span: 12,
},
{
label: '排产订单',
label: '排产订单',
prop: 'schedulingCount',
search: false,
sortable: true,
span: 12,
},
{
label: '未排产订单量',
prop: 'unschedulingCount',
search: false,
sortable: true,
span: 12,
},
{
label: '排产异常量',
prop: 'errorCount',
search: false,
sortable: true,
span: 12,
},
{
label: '排产率',
prop: 'schedulingRate',
@ -111,7 +196,7 @@ export default {
span: 12,
},
{
label: '时间',
label: '订单接收时间',
prop: 'cycledate',
search: true,
sortable: true,
@ -123,21 +208,123 @@ export default {
endPlaceholder: '结束时间',
format: 'YYYY-MM-DD',
valueFormat: 'YYYY-MM-DD',
searchLabelWidth: 100,
},
],
showSummary: true,
},
data: [],
showDialog: false,
showTitle: '详情',
showType: '',
rowData: {},
columnWidthsData: [],
};
},
methods: {
getRealColumnWidths() {
return new Promise(resolve => {
this.$nextTick(() => {
// DOM
const columnWidths = {};
// 1. th
const thList = this.$refs.crud.$el.querySelectorAll('.el-table__header th');
// 2. prop
thList.forEach((th, index) => {
const prop = this.option.column[index - (this.option.index ? 1 : 0)]?.prop; //
const width = th.offsetWidth; //
if (prop) {
columnWidths[prop] = width;
}
//
if (index === 0 && this.option.index) {
columnWidths['index'] = width;
}
});
console.log('columnWidths:', columnWidths);
this.columnWidthsData = columnWidths;
resolve(columnWidths);
});
});
},
rowClick(row, column, cell, event) {
console.log(88888, row, column, cell, event);
},
handleSummaryRowClick(event) {
//
console.log('统计行被点击');
},
showOrderDetail(row, type, all) {
this.rowData = row;
this.showDialog = true;
this.showAll=all
//
if (type == 'totalCount') {
this.showType = null;
}
//
if (type == 'schedulingCount') {
this.showType = '10004';
}
//
if (type == 'unschedulingCount') {
this.showType = '10003';
}
//
if (type == 'errorCount') {
this.showType = '10006';
}
},
handleSummaryClick(type, value) {
console.log('总计点击:', type, value);
this.showDialog = true;
//
const summaryRow = {
totalCount: this.summaryMethod({ columns: this.option.column, data: this.data })[1],
schedulingCount: this.summaryMethod({ columns: this.option.column, data: this.data })[2],
unschedulingCount: this.summaryMethod({ columns: this.option.column, data: this.data })[3],
errorCount: this.summaryMethod({ columns: this.option.column, data: this.data })[4],
};
//
this.rowData = summaryRow;
// showType
if (type === 'totalCount') {
this.showType = null;
} else if (type === 'schedulingCount') {
this.showType = '10004';
} else if (type === 'unschedulingCount') {
this.showType = '10003';
} else if (type === 'errorCount') {
this.showType = '10006';
}
},
closeDialog() {
this.showDialog = false;
},
formatDate(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
},
summaryMethod({ columns, data }) {
const sums = [];
if (columns.length > 0) {
columns.forEach((column, index) => {
let prop = column.property;
if (['totalCount', 'schedulingCount', 'schedulingRate'].includes(prop)) {
if (
[
'totalCount',
'schedulingCount',
'schedulingRate',
'unschedulingCount',
'errorCount',
].includes(prop)
) {
let values = this.data.map(item => Number(item[prop] || 0));
let all =
values.length !== 0
@ -149,6 +336,10 @@ export default {
sums[index] = all;
} else if (prop == 'schedulingCount') {
sums[index] = all;
} else if (prop == 'unschedulingCount') {
sums[index] = all;
} else if (prop == 'errorCount') {
sums[index] = all;
} else if (prop == 'schedulingRate') {
// sums[index] = all / values.length + '%' || 0;
sums[index] = ((sums[3] / sums[2]) * 100).toFixed(2) + '%' || 0;
@ -162,6 +353,9 @@ export default {
}
});
}
console.log('sums:', sums);
this.columnsSum = sums;
this.getRealColumnWidths();
return sums;
},
searchReset() {
@ -186,7 +380,6 @@ export default {
},
onLoad(page, params = {}) {
console.log(9999999, !!params.cycledate, !!params.cycledate && params.cycledate.lenght > 0);
this.loading = true;
this.data = [];
if (!!params.cycledate) {
@ -200,7 +393,25 @@ export default {
});
},
},
mounted() {},
mounted() {
//
const today = new Date();
const threeDaysAgo = new Date(today);
threeDaysAgo.setDate(today.getDate() - 3);
this.query.cycledate = [this.formatDate(threeDaysAgo), this.formatDate(today)];
console.log('查询时间范围:', this.form);
//
// this.$nextTick(() => {
// this.onLoad(this.page, this.query);
// });
this.$nextTick(() => {
const summaryRow = this.$refs.crud.$el.querySelector('.your-summary-row-class'); // 使
console.log('summaryRow:', summaryRow);
// summaryRow.addEventListener('click', this.handleSummaryRowClick);
});
},
};
</script>
@ -209,4 +420,18 @@ export default {
background-color: #284c89 !important;
color: #fff;
}
:deep(.el-table__footer-wrapper) {
display: none;
}
.table__summary {
background-color: #fafafa;
border: 1px solid #ebeef5;
div {
text-align: center;
line-height: 23px;
border-bottom: var(--el-table-border);
padding: 0 12px;
font-size: var(--el-font-size-base);
}
}
</style>

Loading…
Cancel
Save