|
|
<template>
|
|
|
<div class="p-2">
|
|
|
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
|
|
<div v-show="showSearch" class="mb-[10px]">
|
|
|
<el-card shadow="hover">
|
|
|
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
|
|
<el-form-item label="日期范围" style="width: 300px">
|
|
|
<el-date-picker
|
|
|
v-model="dateRange"
|
|
|
value-format="YYYY-MM-DD"
|
|
|
type="daterange"
|
|
|
range-separator="-"
|
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="物料编号" prop="materialCode">
|
|
|
<el-input
|
|
|
v-model="queryParams.materialCode"
|
|
|
placeholder="请输入物料编号"
|
|
|
clearable
|
|
|
@keyup.enter="handleQuery"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="物料名称" prop="materialName">
|
|
|
<el-input
|
|
|
v-model="queryParams.materialName"
|
|
|
placeholder="请输入物料名称"
|
|
|
clearable
|
|
|
@keyup.enter="handleQuery"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<!-- <el-form-item label="日期范围" style="width: 300px">
|
|
|
<el-date-picker
|
|
|
v-model="dateRange"
|
|
|
value-format="YYYY-MM-DD"
|
|
|
type="daterange"
|
|
|
range-separator="-"
|
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="计划单号" prop="planCode">
|
|
|
<el-input
|
|
|
v-model="queryParams.planCode"
|
|
|
placeholder="请输入计划单号"
|
|
|
clearable
|
|
|
@keyup.enter="handleQuery"
|
|
|
/>
|
|
|
</el-form-item>-->
|
|
|
|
|
|
<!--
|
|
|
<el-form-item label="物料编号" prop="materialCode">
|
|
|
<el-input
|
|
|
v-model="queryParams.materialCode"
|
|
|
placeholder="请输入物料编号"
|
|
|
clearable
|
|
|
@keyup.enter="handleQuery"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
-->
|
|
|
|
|
|
<!-- <el-form-item label="物料名称" prop="materialName">
|
|
|
<el-input
|
|
|
v-model="queryParams.materialName"
|
|
|
placeholder="请输入物料名称"
|
|
|
clearable
|
|
|
@keyup.enter="handleQuery"
|
|
|
/>
|
|
|
</el-form-item>-->
|
|
|
<!--
|
|
|
<el-form-item label="进度状态" prop="progressStatus">
|
|
|
<el-select v-model="queryParams.progressStatus" placeholder="请选择进度状态" clearable @keyup.enter="handleQuery">
|
|
|
<el-option label="正常" value="正常" />
|
|
|
<el-option label="延期" value="延期" />
|
|
|
</el-select>
|
|
|
</el-form-item>-->
|
|
|
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
|
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
</transition>
|
|
|
|
|
|
<!-- 统计图表卡片 -->
|
|
|
<!-- <el-row :gutter="10" class="mb-[10px]">
|
|
|
<el-col :span="8">
|
|
|
<el-card shadow="never">
|
|
|
<template #header>
|
|
|
<span class="font-bold">进度状态分布</span>
|
|
|
</template>
|
|
|
<div ref="statusChartRef" style="width: 100%; height: 300px"></div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
<el-card shadow="never">
|
|
|
<template #header>
|
|
|
<span class="font-bold">整体进度分布</span>
|
|
|
</template>
|
|
|
<div ref="progressChartRef" style="width: 100%; height: 300px"></div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
<el-card shadow="never">
|
|
|
<template #header>
|
|
|
<span class="font-bold">工序完成率统计</span>
|
|
|
</template>
|
|
|
<div ref="processStatsChartRef" style="width: 100%; height: 300px"></div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>-->
|
|
|
<!-- <el-row :gutter="10" class="mb-[10px]">
|
|
|
<el-col :span="12">
|
|
|
<el-card shadow="never">
|
|
|
<template #header>
|
|
|
<span class="font-bold">进度状态分布</span>
|
|
|
</template>
|
|
|
<div ref="statusChartRef" style="width: 100%; height: 300px"></div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-card shadow="never">
|
|
|
<template #header>
|
|
|
<span class="font-bold">整体进度分布</span>
|
|
|
</template>
|
|
|
<div ref="progressChartRef" style="width: 100%; height: 300px"></div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>-->
|
|
|
|
|
|
<!-- 工序工单统计（按工序聚合 Top10） -->
|
|
|
<el-row :gutter="10" class="mb-[10px]">
|
|
|
<el-col :span="24">
|
|
|
<el-card shadow="never">
|
|
|
<template #header>
|
|
|
<span class="font-bold">工序统计</span>
|
|
|
</template>
|
|
|
<div ref="processStatsChartRef" style="width: 100%; height: 320px"></div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
<!-- 工序进度可视化 -->
|
|
|
<!-- <el-card shadow="never" class="mb-[10px]">
|
|
|
<template #header>
|
|
|
<span class="font-bold">工序进度可视化</span>
|
|
|
</template>
|
|
|
<div ref="processChartRef" style="width: 100%; height: 400px"></div>
|
|
|
</el-card>-->
|
|
|
|
|
|
<el-card shadow="never">
|
|
|
<template #header>
|
|
|
<el-row :gutter="10" class="mb8">
|
|
|
<!-- <el-col :span="1.5">
|
|
|
<el-button type="warning" plain icon="Download" @click="handleProcessExport" v-hasPermi="['mes:prodReport:export']">按工序统计导出</el-button>
|
|
|
</el-col> -->
|
|
|
<right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true" @queryTable="getList" />
|
|
|
</el-row>
|
|
|
</template>
|
|
|
|
|
|
<el-table ref="processTableRef" v-loading="loading" :data="processStatsList" border row-key="processId" @expand-change="onProcessRowExpand">
|
|
|
<!-- 工序聚合统计列 -->
|
|
|
<el-table-column label="工序名称" align="center" prop="processName" v-if="columns[0].visible" min-width="160" show-overflow-tooltip />
|
|
|
<el-table-column label="计划数量" align="center" prop="planQty" v-if="columns[1].visible" width="120" />
|
|
|
<el-table-column label="已完成数量" align="center" prop="completedQty" v-if="columns[2].visible" width="120" />
|
|
|
<el-table-column label="未完成数量" align="center" prop="uncompletedQty" v-if="columns[3].visible" width="120" />
|
|
|
<el-table-column label="完成率" align="center" v-if="columns[4].visible" width="160">
|
|
|
<template #default="scope">
|
|
|
<div style="display:flex;align-items:center;justify-content:center;">
|
|
|
<span style="min-width:42px;text-align:right;font-size:12px;color:#606266;">{{ Number(scope.row.completionRateNum || 0) }}%</span>
|
|
|
<el-progress
|
|
|
:percentage="Math.min(Number(scope.row.completionRateNum || 0), 100)"
|
|
|
:color="getProgressColor(Number(scope.row.completionRateNum || 0))"
|
|
|
:stroke-width="8"
|
|
|
:show-text="false"
|
|
|
style="width:90px;margin-left:8px;"
|
|
|
/>
|
|
|
<el-tag v-if="Number(scope.row.completionRateNum || 0) > 100" type="danger" size="small" style="margin-left:8px;">超额 +{{ Number(scope.row.completionRateNum || 0) - 100 }}%</el-tag>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<!-- 展开列：列出该工序下的计划（计划编号） -->
|
|
|
<el-table-column type="expand" width="50">
|
|
|
<template #default="scope">
|
|
|
<el-table :data="buildProcessPlanRows(scope.row)" border size="small" style="width: 100%" v-loading="isProcessLoading(scope.row.processId)" element-loading-text="加载中...">
|
|
|
<el-table-column label="计划编号" prop="planCode" width="140" show-overflow-tooltip />
|
|
|
<el-table-column label="物料编号" prop="materialCode" width="140" show-overflow-tooltip />
|
|
|
<el-table-column label="物料名称" prop="materialName" min-width="160" show-overflow-tooltip />
|
|
|
<el-table-column label="计划数" prop="planAmount" width="100" />
|
|
|
<el-table-column label="已完数" prop="completeAmount" width="100" />
|
|
|
<el-table-column label="剩余数" prop="remainingAmount" width="100" />
|
|
|
<el-table-column label="完成率" width="160">
|
|
|
<template #default="pScope">
|
|
|
<div style="display:flex;align-items:center;justify-content:flex-start;">
|
|
|
<span style="min-width:42px;text-align:right;font-size:12px;color:#606266;">{{ Number(pScope.row.processProgress || 0) }}%</span>
|
|
|
<el-progress
|
|
|
:percentage="Math.min(Number(pScope.row.processProgress || 0), 100)"
|
|
|
:color="getProgressColor(Number(pScope.row.processProgress || 0))"
|
|
|
:stroke-width="6"
|
|
|
:show-text="false"
|
|
|
style="width:100px;margin-left:8px;"
|
|
|
/>
|
|
|
<el-tag v-if="Number(pScope.row.processProgress || 0) > 100" type="danger" size="small" style="margin-left:8px;">超额 +{{ Number(pScope.row.processProgress || 0) - 100 }}%</el-tag>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="状态" width="100">
|
|
|
<template #default="pScope">
|
|
|
<el-tag :type="pScope.row.isCompleted ? 'success' : (pScope.row.isInProgress ? 'warning' : 'info')" size="small">
|
|
|
{{ pScope.row.isCompleted ? '已完' : (pScope.row.isInProgress ? '在制' : '未开') }}
|
|
|
</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="计划编号" align="center" prop="planCode" v-if="false" width="140" />
|
|
|
<el-table-column label="物料编号" align="center" prop="materialCode" v-if="false" width="120" />
|
|
|
<el-table-column label="物料名称" align="center" prop="materialName" v-if="false" width="180" show-overflow-tooltip />
|
|
|
<el-table-column label="规格型号" align="center" prop="materialSpec" v-if="false" width="120" show-overflow-tooltip />
|
|
|
<el-table-column label="计划总数量" align="center" prop="planAmount" v-if="false" width="100" />
|
|
|
<el-table-column label="在制数量" align="center" prop="wipAmount" v-if="false" width="100" />
|
|
|
<el-table-column label="已完成数量" align="center" prop="completeAmount" v-if="false" width="100" />
|
|
|
<el-table-column label="计划开工时间" align="center" prop="planBeginTime" v-if="false" width="150" />
|
|
|
<el-table-column label="实际开工时间" align="center" prop="realBeginTime" v-if="false" width="150" />
|
|
|
<el-table-column label="计划完工时间" align="center" prop="planEndTime" v-if="false" width="150" />
|
|
|
<el-table-column label="当前时间" align="center" prop="currentTime" v-if="false" width="150" />
|
|
|
<el-table-column label="总工序数" align="center" prop="totalProcessCount" v-if="false" width="100" />
|
|
|
<el-table-column label="在制工序" align="center" prop="wipProcesses" v-if="false" width="150" show-overflow-tooltip />
|
|
|
<el-table-column label="剩余工序" align="center" prop="remainingProcesses" v-if="false" width="150" show-overflow-tooltip />
|
|
|
<el-table-column label="整体进度" align="center" prop="overallProgress" v-if="false" width="120">
|
|
|
<template #default="scope">
|
|
|
<el-progress
|
|
|
:percentage="parseFloat(scope.row.overallProgress)"
|
|
|
:color="getProgressColor(parseFloat(scope.row.overallProgress))"
|
|
|
:stroke-width="8"
|
|
|
/>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="进度状态" align="center" prop="progressStatus" v-if="false" width="100">
|
|
|
<template #default="scope">
|
|
|
<el-tag :type="scope.row.progressStatus === '正常' ? 'success' : 'danger'">
|
|
|
{{ scope.row.progressStatus }}
|
|
|
</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="工序进度" align="center" v-if="false" width="350">
|
|
|
<template #default="scope">
|
|
|
<div class="process-progress-container">
|
|
|
<!-- <div
|
|
|
v-for="process in scope.row.processProgressList"
|
|
|
:key="process.processId"
|
|
|
class="process-step"
|
|
|
:class="{
|
|
|
'completed': process.isCompleted === 1,
|
|
|
'in-progress': process.isInProgress === 1,
|
|
|
'pending': process.isCompleted !== 1 && process.isInProgress !== 1
|
|
|
}"
|
|
|
:title="`${process.processName} - ${process.statusDesc}${process.processProgress ? ' (' + process.processProgress + '%)' : ''}`"
|
|
|
>-->
|
|
|
<div
|
|
|
v-for="process in scope.row.processProgressList"
|
|
|
:key="process.processId"
|
|
|
class="process-step"
|
|
|
:class="{
|
|
|
'completed': process.isCompleted === 1,
|
|
|
'in-progress': process.isInProgress === 1,
|
|
|
'pending': process.isCompleted !== 1 && process.isInProgress !== 1
|
|
|
}"
|
|
|
:title="`${process.processName}`"
|
|
|
>
|
|
|
<span class="process-name">{{ process.processName }}</span>
|
|
|
<!-- <span v-if="process.processProgress && process.processProgress > 0" class="process-percentage">
|
|
|
{{ process.processProgress }}%
|
|
|
</span>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
|
|
|
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
|
|
</el-card>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup name="WipTrackingReport" lang="ts">
|
|
|
import { getCurrentInstance, ref, watch, onMounted, nextTick, onBeforeUnmount } from 'vue';
|
|
|
import type { ComponentInternalInstance } from 'vue';
|
|
|
import type { ElFormInstance } from 'element-plus';
|
|
|
import * as echarts from 'echarts';
|
|
|
import { listWipTrackingReport, exportWipTrackingReport } from '@/api/mes/wipTrackingReport';
|
|
|
import { WipTrackingReportVO, WipTrackingReportQuery, ProcessProgressVO } from '@/api/mes/wipTrackingReport/types';
|
|
|
import { planProcessChildren, processWorkOrderStatsPage, exportProcessWorkOrderStats, processPlanList } from '@/api/mes/prodReport';
|
|
|
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
|
|
|
const reportList = ref<WipTrackingReportVO[]>([]);
|
|
|
const processStatsList = ref<any[]>([]);
|
|
|
const loading = ref(true);
|
|
|
const showSearch = ref(true);
|
|
|
const total = ref(0);
|
|
|
const queryFormRef = ref<ElFormInstance>();
|
|
|
const dateRange = ref<string[]>(['', '']);
|
|
|
const processTableRef = ref<any>(null);
|
|
|
|
|
|
// 图表引用
|
|
|
const statusChartRef = ref<HTMLDivElement | null>(null);
|
|
|
const progressChartRef = ref<HTMLDivElement | null>(null);
|
|
|
const processChartRef = ref<HTMLDivElement | null>(null);
|
|
|
const processStatsChartRef = ref<HTMLDivElement | null>(null);
|
|
|
let statusChart: echarts.ECharts | null = null;
|
|
|
let progressChart: echarts.ECharts | null = null;
|
|
|
let processChart: echarts.ECharts | null = null;
|
|
|
let processStatsChart: echarts.ECharts | null = null;
|
|
|
|
|
|
// 列显隐信息
|
|
|
const columns = ref([
|
|
|
{ key: 0, label: '工序名称', visible: true },
|
|
|
{ key: 1, label: '计划数量', visible: true },
|
|
|
{ key: 2, label: '已完成数量', visible: true },
|
|
|
{ key: 3, label: '未完成数量', visible: true },
|
|
|
{ key: 4, label: '完成率', visible: true }
|
|
|
]);
|
|
|
|
|
|
// 计划子节点缓存：key = planCode__processId
|
|
|
const planChildrenCache = ref<Record<string, any[]>>({});
|
|
|
// 工序下计划列表缓存：key = processId
|
|
|
const processPlansCache = ref<Record<string, any[]>>({});
|
|
|
// 工序展开加载状态：key = processId
|
|
|
const processPlansLoading = ref<Record<string, boolean>>({});
|
|
|
function isProcessLoading(pid: any) {
|
|
|
const k = String(pid ?? '');
|
|
|
return !!processPlansLoading.value[k];
|
|
|
}
|
|
|
// 记录已展开的工序ID，搜索后自动恢复展开
|
|
|
const expandedProcessIds = ref<number[]>([]);
|
|
|
function addExpanded(pid: any) {
|
|
|
const id = Number(pid);
|
|
|
if (!expandedProcessIds.value.includes(id)) expandedProcessIds.value.push(id);
|
|
|
}
|
|
|
function removeExpanded(pid: any) {
|
|
|
const id = Number(pid);
|
|
|
expandedProcessIds.value = expandedProcessIds.value.filter(x => x !== id);
|
|
|
}
|
|
|
function reExpandProcessRows() {
|
|
|
nextTick(() => {
|
|
|
expandedProcessIds.value.forEach((pid) => {
|
|
|
const row = (processStatsList.value || []).find((r: any) => String(r?.processId ?? '') === String(pid));
|
|
|
if (row && processTableRef.value?.toggleRowExpansion) {
|
|
|
processTableRef.value.toggleRowExpansion(row, true);
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 搜索时需要收起所有已展开的子行，不进行自动恢复
|
|
|
const skipReexpandOnce = ref(false);
|
|
|
function collapseAllProcessRows() {
|
|
|
nextTick(() => {
|
|
|
const rows = processStatsList.value || [];
|
|
|
if (processTableRef.value?.toggleRowExpansion) {
|
|
|
rows.forEach((row: any) => {
|
|
|
processTableRef.value.toggleRowExpansion(row, false);
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
const queryParams = ref<WipTrackingReportQuery>({
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
planCode: '',
|
|
|
materialCode: '',
|
|
|
materialName: '',
|
|
|
progressStatus: '',
|
|
|
beginDate: '',
|
|
|
endDate: ''
|
|
|
});
|
|
|
|
|
|
// 监听日期范围变化
|
|
|
watch(dateRange, (newVal) => {
|
|
|
if (newVal && newVal.length === 2) {
|
|
|
queryParams.value.beginDate = newVal[0];
|
|
|
queryParams.value.endDate = newVal[1];
|
|
|
} else {
|
|
|
queryParams.value.beginDate = '';
|
|
|
queryParams.value.endDate = '';
|
|
|
}
|
|
|
});
|
|
|
|
|
|
/** 查询在制品跟踪报表列表 */
|
|
|
function getList() {
|
|
|
loading.value = true;
|
|
|
// 清理缓存，避免筛选条件变化导致子表旧数据残留
|
|
|
processPlansCache.value = {};
|
|
|
planChildrenCache.value = {};
|
|
|
processPlansLoading.value = {};
|
|
|
const baseQuery = { ...queryParams.value };
|
|
|
// 1) 顶层按工序分页
|
|
|
const procReq = processWorkOrderStatsPage(baseQuery);
|
|
|
|
|
|
Promise.all([procReq])
|
|
|
.then(([procRes]: any[]) => {
|
|
|
// 顶层工序聚合分页数据
|
|
|
processStatsList.value = procRes?.rows || [];
|
|
|
total.value = procRes?.total || (processStatsList.value?.length || 0);
|
|
|
nextTick(() => {
|
|
|
updateCharts();
|
|
|
// 根据标记决定是否恢复展开的工序
|
|
|
if (!skipReexpandOnce.value) {
|
|
|
reExpandProcessRows();
|
|
|
}
|
|
|
// 仅跳过一次，后续恢复默认行为
|
|
|
skipReexpandOnce.value = false;
|
|
|
});
|
|
|
loading.value = false;
|
|
|
})
|
|
|
.catch(() => {
|
|
|
loading.value = false;
|
|
|
});
|
|
|
}
|
|
|
|
|
|
/** 搜索按钮操作 */
|
|
|
function handleQuery() {
|
|
|
queryParams.value.pageNum = 1;
|
|
|
// 清理缓存，确保加载新筛选条件下的数据
|
|
|
processPlansCache.value = {};
|
|
|
planChildrenCache.value = {};
|
|
|
processPlansLoading.value = {};
|
|
|
// 搜索时收起所有子节点并且不自动恢复展开
|
|
|
expandedProcessIds.value = [];
|
|
|
skipReexpandOnce.value = true;
|
|
|
collapseAllProcessRows();
|
|
|
getList();
|
|
|
}
|
|
|
|
|
|
/** 重置按钮操作 */
|
|
|
function resetQuery() {
|
|
|
dateRange.value = ['', ''];
|
|
|
queryFormRef.value?.resetFields();
|
|
|
queryParams.value = {
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
planCode: '',
|
|
|
materialCode: '',
|
|
|
materialName: '',
|
|
|
progressStatus: '',
|
|
|
beginDate: '',
|
|
|
endDate: ''
|
|
|
};
|
|
|
handleQuery();
|
|
|
}
|
|
|
|
|
|
/** 导出按钮操作 */
|
|
|
function handleProcessExport() {
|
|
|
proxy?.$modal.confirm('是否确认导出按工序统计数据？').then(() => {
|
|
|
proxy?.$modal.loading('正在导出数据，请稍候...');
|
|
|
return exportProcessWorkOrderStats(queryParams.value);
|
|
|
}).then((response: any) => {
|
|
|
proxy?.$download.blob(response, '工序生产统计.xlsx');
|
|
|
proxy?.$modal.closeLoading();
|
|
|
}).catch(() => {
|
|
|
proxy?.$modal.closeLoading();
|
|
|
});
|
|
|
}
|
|
|
|
|
|
/** 获取进度颜色 */
|
|
|
function getProgressColor(percentage: number) {
|
|
|
if (percentage > 100) return '#f56c6c';
|
|
|
if (percentage < 30) return '#f56c6c';
|
|
|
if (percentage < 70) return '#e6a23c';
|
|
|
return '#67c23a';
|
|
|
}
|
|
|
|
|
|
/** 计划状态标签文案 */
|
|
|
function getPlanStatusLabel(status: any) {
|
|
|
const s = String(status ?? '0');
|
|
|
switch (s) {
|
|
|
case '0': return '未派工';
|
|
|
case '1': return '已派工';
|
|
|
case '2': return '进行中';
|
|
|
case '3': return '已完成';
|
|
|
default: return '未知';
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/** 计划状态标签样式 */
|
|
|
function getPlanStatusTagType(status: any) {
|
|
|
const s = String(status ?? '0');
|
|
|
switch (s) {
|
|
|
case '0': return 'info';
|
|
|
case '1': return 'warning';
|
|
|
case '2': return 'primary';
|
|
|
case '3': return 'success';
|
|
|
default: return 'info';
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/** 树形结构配置 */
|
|
|
const treeProps = { children: 'children', label: 'label' } as const;
|
|
|
|
|
|
/** 构建工序树（父：订单；子：工序） */
|
|
|
function buildProcessTree(row: WipTrackingReportVO) {
|
|
|
const children = (row.processProgressList || []).map(p => ({
|
|
|
id: p.processId,
|
|
|
label: p.processName,
|
|
|
progress: p.processProgress ?? 0,
|
|
|
planAmount: p.planAmount ?? 0,
|
|
|
completeAmount: p.completeAmount ?? 0,
|
|
|
remainingAmount: p.remainingAmount ?? 0,
|
|
|
status: (p as any).isCompleted === 1 || p.isCompleted ? 'completed' : ((p as any).isInProgress === 1 || p.isInProgress ? 'in_progress' : 'pending')
|
|
|
}));
|
|
|
|
|
|
return [
|
|
|
{
|
|
|
id: (row as any).planCode || (row as any).orderCode || '',
|
|
|
label: `${(row as any).planCode || ''}（在制工序（${children.filter(c => c.status === 'in_progress').length}））`,
|
|
|
children
|
|
|
}
|
|
|
];
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 构建展开区计划列表数据（按工序筛选所有派工计划）
|
|
|
* 从 reportList 的每个订单的 processProgressList 中，筛选出工序名称匹配的项
|
|
|
*/
|
|
|
function buildProcessPlanRows(procRow: any) {
|
|
|
const key = String(procRow?.processId ?? '');
|
|
|
const rows = (key && processPlansCache.value[key]) ? processPlansCache.value[key] : [];
|
|
|
// 进度高的排前（若有字段）
|
|
|
rows.sort((a, b) => Number(b.processProgress || 0) - Number(a.processProgress || 0));
|
|
|
return rows;
|
|
|
}
|
|
|
|
|
|
/** 外层工序展开时触发：加载该工序下计划列表（不分页） */
|
|
|
async function onProcessRowExpand(row: any, expanded: boolean) {
|
|
|
const key = String(row?.processId ?? '');
|
|
|
// 事件无 expanded 参数时也兼容加载
|
|
|
if (!key) return;
|
|
|
// 同步维护已展开工序集合
|
|
|
if (typeof expanded === 'boolean') {
|
|
|
expanded ? addExpanded(row?.processId) : removeExpanded(row?.processId);
|
|
|
}
|
|
|
if (processPlansCache.value[key] && processPlansCache.value[key].length) return;
|
|
|
// 标记该工序展开区为加载中
|
|
|
processPlansLoading.value[key] = true;
|
|
|
// 组装查询参数
|
|
|
const query: any = {
|
|
|
processId: Number(row?.processId),
|
|
|
beginDate: queryParams.value.beginDate,
|
|
|
endDate: queryParams.value.endDate,
|
|
|
materialCode: queryParams.value.materialCode,
|
|
|
materialName: queryParams.value.materialName,
|
|
|
planCode: queryParams.value.planCode
|
|
|
};
|
|
|
try {
|
|
|
const res: any = await processPlanList(query);
|
|
|
const data = (res?.data || res?.rows || res) || [];
|
|
|
// 规范化并补充子节点的剩余数与完成率
|
|
|
const normalized = (Array.isArray(data) ? data : []).map((it: any) => {
|
|
|
const plan = Number(it?.planAmount ?? it?.planQty ?? it?.planCount ?? 0) || 0;
|
|
|
const completed = Number(it?.completeAmount ?? it?.completedQty ?? it?.completeQty ?? it?.completedCount ?? 0) || 0;
|
|
|
const remaining = Math.max(plan - completed, 0);
|
|
|
const rate = plan > 0 ? Number(((completed * 100.0) / plan).toFixed(2)) : 0;
|
|
|
return {
|
|
|
...it,
|
|
|
planAmount: plan,
|
|
|
completeAmount: completed,
|
|
|
remainingAmount: remaining,
|
|
|
processProgress: rate
|
|
|
};
|
|
|
});
|
|
|
processPlansCache.value[key] = normalized;
|
|
|
} catch (e) {
|
|
|
processPlansCache.value[key] = [];
|
|
|
} finally {
|
|
|
// 结束加载态
|
|
|
processPlansLoading.value[key] = false;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/** 生成计划子节点缓存Key */
|
|
|
function getPlanChildKey(row: any) {
|
|
|
return `${row?.planCode || ''}__${row?.processId || ''}`;
|
|
|
}
|
|
|
|
|
|
/** 异步获取计划子节点（按 plan_code + process_id） */
|
|
|
async function fetchPlanChildren(row: any) {
|
|
|
const key = getPlanChildKey(row);
|
|
|
if (planChildrenCache.value[key]) {
|
|
|
return planChildrenCache.value[key];
|
|
|
}
|
|
|
// 参数校验：必须存在有效的 planCode 和数值型 processId
|
|
|
const planCode = row?.planCode;
|
|
|
const processIdNum = Number(row?.processId);
|
|
|
const hasValidProc = !isNaN(processIdNum);
|
|
|
if (!planCode || !hasValidProc) {
|
|
|
planChildrenCache.value[key] = [];
|
|
|
return [];
|
|
|
}
|
|
|
try {
|
|
|
const res: any = await planProcessChildren({ planCode, processId: processIdNum });
|
|
|
const data = (res?.data || res?.rows || res) || [];
|
|
|
planChildrenCache.value[key] = data;
|
|
|
return data;
|
|
|
} catch (e) {
|
|
|
planChildrenCache.value[key] = [];
|
|
|
return [];
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/** 内层计划表展开时触发：加载子节点 */
|
|
|
function onPlanRowExpand(row: any) {
|
|
|
fetchPlanChildren(row);
|
|
|
}
|
|
|
|
|
|
/** 初始化图表 */
|
|
|
function initCharts() {
|
|
|
if (statusChartRef.value) {
|
|
|
statusChart = echarts.init(statusChartRef.value);
|
|
|
}
|
|
|
if (progressChartRef.value) {
|
|
|
progressChart = echarts.init(progressChartRef.value);
|
|
|
}
|
|
|
if (processChartRef.value) {
|
|
|
processChart = echarts.init(processChartRef.value);
|
|
|
}
|
|
|
if (processStatsChartRef.value) {
|
|
|
processStatsChart = echarts.init(processStatsChartRef.value);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/** 更新图表数据 */
|
|
|
function updateCharts() {
|
|
|
updateStatusChart();
|
|
|
updateProgressChart();
|
|
|
updateProcessChart();
|
|
|
updateProcessStatsChart();
|
|
|
}
|
|
|
|
|
|
/** 更新进度状态分布图 */
|
|
|
function updateStatusChart() {
|
|
|
if (!statusChart || !reportList.value.length) return;
|
|
|
|
|
|
const statusData = reportList.value.reduce((acc: any, item) => {
|
|
|
const status = item.progressStatus || '未知';
|
|
|
acc[status] = (acc[status] || 0) + 1;
|
|
|
return acc;
|
|
|
}, {});
|
|
|
|
|
|
const option = {
|
|
|
title: {
|
|
|
text: '进度状态分布',
|
|
|
left: 'center',
|
|
|
textStyle: { fontSize: 14 }
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: '进度状态',
|
|
|
type: 'pie',
|
|
|
radius: '60%',
|
|
|
data: Object.entries(statusData).map(([name, value]) => ({ name, value })),
|
|
|
emphasis: {
|
|
|
itemStyle: {
|
|
|
shadowBlur: 10,
|
|
|
shadowOffsetX: 0,
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
|
|
|
statusChart.setOption(option);
|
|
|
}
|
|
|
|
|
|
/** 更新整体进度分布图 */
|
|
|
function updateProgressChart() {
|
|
|
if (!progressChart || !reportList.value.length) return;
|
|
|
|
|
|
const progressRanges = {
|
|
|
'0-30%': 0,
|
|
|
'30-60%': 0,
|
|
|
'60-90%': 0,
|
|
|
'90-100%': 0
|
|
|
};
|
|
|
|
|
|
reportList.value.forEach(item => {
|
|
|
const progress = item.overallProgressNum || 0;
|
|
|
if (progress < 30) progressRanges['0-30%']++;
|
|
|
else if (progress < 60) progressRanges['30-60%']++;
|
|
|
else if (progress < 90) progressRanges['60-90%']++;
|
|
|
else progressRanges['90-100%']++;
|
|
|
});
|
|
|
|
|
|
const option = {
|
|
|
title: {
|
|
|
text: '整体进度分布',
|
|
|
left: 'center',
|
|
|
textStyle: { fontSize: 14 }
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
type: 'shadow'
|
|
|
}
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
data: Object.keys(progressRanges)
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value'
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: '派工数量',
|
|
|
type: 'bar',
|
|
|
data: Object.values(progressRanges),
|
|
|
itemStyle: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{ offset: 0, color: '#83bff6' },
|
|
|
{ offset: 0.5, color: '#188df0' },
|
|
|
{ offset: 1, color: '#188df0' }
|
|
|
])
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
|
|
|
progressChart.setOption(option);
|
|
|
}
|
|
|
|
|
|
/** 更新工序完成率统计图 */
|
|
|
function updateProcessStatsChart() {
|
|
|
if (!processStatsChart || !processStatsList.value.length) return;
|
|
|
|
|
|
const sorted = [...processStatsList.value]
|
|
|
.sort((a, b) => (Number(b.planQty || 0) - Number(a.planQty || 0)))
|
|
|
.slice(0, 10);
|
|
|
const processNames = sorted.map((r: any) => r.processName || '未知工序');
|
|
|
const completedData = sorted.map((r: any) => Number(r.completedQty || 0));
|
|
|
const uncompletedData = sorted.map((r: any) => Number(r.uncompletedQty || 0));
|
|
|
const completionRateData = sorted.map((r: any) => Number(r.completionRateNum || 0));
|
|
|
const maxRate = completionRateData.length ? Math.max(...completionRateData) : 0;
|
|
|
const yMax = Math.max(100, Math.ceil(maxRate / 10) * 10);
|
|
|
const showExcessArea = yMax > 100;
|
|
|
|
|
|
const option = {
|
|
|
title: { text: '工序生产统计（Top10）', left: 'center', textStyle: { fontSize: 14 } },
|
|
|
tooltip: { trigger: 'axis' },
|
|
|
legend: { data: ['已完成数量', '未完成数量', '完成率%'], bottom: 0 },
|
|
|
grid: { left: '3%', right: '6%', top: 40, bottom: 60, containLabel: true },
|
|
|
xAxis: { type: 'category', data: processNames },
|
|
|
yAxis: [
|
|
|
{ type: 'value', name: '数量' },
|
|
|
{ type: 'value', name: '完成率%', min: 0, max: yMax, position: 'right', axisLabel: { formatter: '{value}%' } }
|
|
|
],
|
|
|
series: [
|
|
|
{ name: '已完成数量', type: 'bar', data: completedData },
|
|
|
{ name: '未完成数量', type: 'bar', data: uncompletedData },
|
|
|
{ name: '完成率%', type: 'line', yAxisIndex: 1, data: completionRateData, smooth: true,
|
|
|
markArea: showExcessArea ? {
|
|
|
itemStyle: { color: 'rgba(245,108,108,0.12)' },
|
|
|
label: { color: '#f56c6c', position: 'insideTop', formatter: '超额区间' },
|
|
|
data: [ [ { yAxis: 100 }, { yAxis: yMax } ] ]
|
|
|
} : undefined
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
|
|
|
processStatsChart.setOption(option);
|
|
|
}
|
|
|
|
|
|
/** 合并三张计划表的工序统计结果 */
|
|
|
function buildProcessStatsFromReport(list: any[]) {
|
|
|
const map = new Map<string, { processName: string; planQty: number; completedQty: number; uncompletedQty: number; }>();
|
|
|
(list || []).forEach((order: any) => {
|
|
|
const procs = (order?.processProgressList || []) as any[];
|
|
|
procs.forEach((p: any) => {
|
|
|
const name = String(p?.processName || '未知工序');
|
|
|
const plan = Number(p?.planAmount || 0);
|
|
|
const completed = Number(p?.completeAmount || 0);
|
|
|
const uncompleted = Math.max(plan - completed, 0);
|
|
|
const agg = map.get(name);
|
|
|
if (agg) {
|
|
|
agg.planQty += plan;
|
|
|
agg.completedQty += completed;
|
|
|
agg.uncompletedQty += uncompleted;
|
|
|
} else {
|
|
|
map.set(name, { processName: name, planQty: plan, completedQty: completed, uncompletedQty: uncompleted });
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
return Array.from(map.values()).map((it) => {
|
|
|
const rate = it.planQty > 0 ? Number(((it.completedQty * 100.0) / it.planQty).toFixed(2)) : 0;
|
|
|
return { ...it, completionRateNum: rate, completionRate: `${rate}%` };
|
|
|
});
|
|
|
}
|
|
|
|
|
|
/** 更新工序进度可视化图 */
|
|
|
function updateProcessChart() {
|
|
|
if (!processChart || !reportList.value.length) return;
|
|
|
|
|
|
const processData = reportList.value.slice(0, 10).map(item => ({
|
|
|
name: item.dispatchCode,
|
|
|
value: [
|
|
|
item.dispatchCode,
|
|
|
item.overallProgressNum || 0,
|
|
|
item.progressStatus,
|
|
|
item.wipProcesses || '',
|
|
|
item.remainingProcesses || ''
|
|
|
]
|
|
|
}));
|
|
|
|
|
|
const option = {
|
|
|
title: {
|
|
|
text: '工序进度可视化（前10个派工）',
|
|
|
left: 'center',
|
|
|
textStyle: { fontSize: 14 }
|
|
|
},
|
|
|
/* tooltip: {
|
|
|
trigger: 'axis',
|
|
|
formatter: function(params: any) {
|
|
|
const data = params[0].data.value;
|
|
|
return `
|
|
|
进度: ${data[1]}%<br/>
|
|
|
状态: ${data[2]}<br/>
|
|
|
在制工序: ${data[3]}<br/>
|
|
|
剩余工序: ${data[4]}`;
|
|
|
}
|
|
|
},*/
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
data: processData.map(item => item.name),
|
|
|
axisLabel: {
|
|
|
rotate: 45
|
|
|
}
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
|
name: '进度(%)',
|
|
|
max: 100
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: '整体进度',
|
|
|
type: 'bar',
|
|
|
data: processData.map(item => ({
|
|
|
value: item.value[1],
|
|
|
itemStyle: {
|
|
|
color: item.value[2] === '延期' ? '#f56c6c' : '#67c23a'
|
|
|
}
|
|
|
})),
|
|
|
markLine: {
|
|
|
data: [
|
|
|
{ yAxis: 100, name: '完成线' }
|
|
|
]
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
|
|
|
processChart.setOption(option);
|
|
|
}
|
|
|
|
|
|
/** 窗口大小改变时重新调整图表 */
|
|
|
function handleResize() {
|
|
|
statusChart?.resize();
|
|
|
progressChart?.resize();
|
|
|
processChart?.resize();
|
|
|
processStatsChart?.resize();
|
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
|
getList();
|
|
|
nextTick(() => {
|
|
|
initCharts();
|
|
|
window.addEventListener('resize', handleResize);
|
|
|
});
|
|
|
});
|
|
|
|
|
|
onBeforeUnmount(() => {
|
|
|
window.removeEventListener('resize', handleResize);
|
|
|
statusChart?.dispose();
|
|
|
progressChart?.dispose();
|
|
|
processChart?.dispose();
|
|
|
processStatsChart?.dispose();
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
/* 让子节点数据与工序名同一行，并利用右侧空间 */
|
|
|
.process-tree {
|
|
|
padding: 4px 8px;
|
|
|
}
|
|
|
.process-tree :deep(.el-tree-node__content) {
|
|
|
min-height: 26px;
|
|
|
padding: 2px 6px;
|
|
|
}
|
|
|
.tree-node {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 8px;
|
|
|
width: 100%;
|
|
|
flex-wrap: nowrap;
|
|
|
}
|
|
|
.node-title {
|
|
|
flex: 0 0 auto;
|
|
|
max-width: 240px;
|
|
|
white-space: nowrap;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
.node-metrics {
|
|
|
flex: 0 0 auto;
|
|
|
color: #606266;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
.node-percent {
|
|
|
flex: 0 0 auto;
|
|
|
color: #909399;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
.node-progress {
|
|
|
flex: 1 1 auto;
|
|
|
min-width: 180px;
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<style scoped>
|
|
|
.process-tree {
|
|
|
padding: 6px 8px;
|
|
|
}
|
|
|
.process-tree .el-tree-node__content {
|
|
|
min-height: 28px;
|
|
|
line-height: 28px;
|
|
|
padding: 2px 6px;
|
|
|
}
|
|
|
.tree-node {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
.tree-node .node-title {
|
|
|
font-size: 12px;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
.tree-node .node-metrics {
|
|
|
font-size: 12px;
|
|
|
color: #606266;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
.tree-node .node-percent {
|
|
|
font-size: 12px;
|
|
|
color: #909399;
|
|
|
min-width: 36px;
|
|
|
text-align: right;
|
|
|
}
|
|
|
.node-progress {
|
|
|
width: 90px;
|
|
|
}
|
|
|
.status-completed .node-title { color: #67c23a; }
|
|
|
.status-in_progress .node-title { color: #e6a23c; }
|
|
|
.status-pending .node-title { color: #909399; }
|
|
|
</style>
|
|
|
|
|
|
<style scoped>
|
|
|
.el-card {
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.el-progress {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
/* 工序进度样式 */
|
|
|
.process-progress-container {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
gap: 4px;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.process-step {
|
|
|
padding: 6px 10px;
|
|
|
border-radius: 6px;
|
|
|
font-size: 12px;
|
|
|
font-weight: 500;
|
|
|
white-space: nowrap;
|
|
|
border: 1px solid;
|
|
|
transition: all 0.3s ease;
|
|
|
cursor: pointer;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
min-width: 60px;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.process-step.completed {
|
|
|
background-color: #722ed1;
|
|
|
color: white;
|
|
|
border-color: #722ed1;
|
|
|
box-shadow: 0 2px 8px rgba(114, 46, 209, 0.3);
|
|
|
}
|
|
|
|
|
|
.process-step.in-progress {
|
|
|
background-color: #52c41a;
|
|
|
color: white;
|
|
|
border-color: #52c41a;
|
|
|
box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
|
|
|
animation: pulse 2s infinite;
|
|
|
}
|
|
|
|
|
|
.process-step.pending {
|
|
|
background-color: #f5f5f5;
|
|
|
color: #666;
|
|
|
border-color: #d9d9d9;
|
|
|
}
|
|
|
|
|
|
.process-step:hover {
|
|
|
transform: scale(1.05);
|
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
|
}
|
|
|
|
|
|
.process-name {
|
|
|
font-weight: 600;
|
|
|
margin-bottom: 2px;
|
|
|
}
|
|
|
|
|
|
.process-percentage {
|
|
|
font-size: 10px;
|
|
|
opacity: 0.9;
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
|
|
|
/* 进行中工序的脉动动画 */
|
|
|
@keyframes pulse {
|
|
|
0% {
|
|
|
box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
|
|
|
}
|
|
|
50% {
|
|
|
box-shadow: 0 2px 12px rgba(82, 196, 26, 0.6);
|
|
|
}
|
|
|
100% {
|
|
|
box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 树形工序视图样式 */
|
|
|
.process-tree {
|
|
|
padding: 6px 0;
|
|
|
}
|
|
|
.tree-node {
|
|
|
display: grid;
|
|
|
grid-template-columns: 1fr auto;
|
|
|
gap: 6px 12px;
|
|
|
align-items: center;
|
|
|
padding: 6px 8px;
|
|
|
border: 1px solid #dcdfe6;
|
|
|
border-radius: 6px;
|
|
|
margin-bottom: 6px;
|
|
|
}
|
|
|
.tree-node .node-title {
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
.tree-node .node-qty {
|
|
|
color: #666;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
.status-completed {
|
|
|
border-color: #722ed1;
|
|
|
background: rgba(114, 46, 209, 0.06);
|
|
|
}
|
|
|
.status-in_progress {
|
|
|
border-color: #52c41a;
|
|
|
background: rgba(82, 196, 26, 0.06);
|
|
|
}
|
|
|
.status-pending {
|
|
|
border-color: #d9d9d9;
|
|
|
}
|
|
|
</style>
|