feat(dms、wms、mes、qms): 新增报表
parent
a13ab4f2f9
commit
e4ffc8c590
@ -0,0 +1,223 @@
|
||||
<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="processId">
|
||||
<el-select v-model="queryParams.processId" placeholder="请选择所属工序" @keyup.enter="handleQuery">
|
||||
<el-option v-for="item in processInfoList" :key="item.processId" :label="item.processName" :value="item.processId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="班组名称" prop="classTeamId">
|
||||
<el-select v-model="queryParams.classTeamId" placeholder="请选择班组名称" clearable @keyup.enter="handleQuery">
|
||||
<el-option v-for="item in classTeamList" :key="item.classTeamId" :label="item.teamName" :value="item.classTeamId" />
|
||||
</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-card shadow="never" class="mb-[10px]">
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['mes:baseWorkshopInfo:export']">导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true" @queryTable="getList" />
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<div ref="chartRef" style="width: 100%; height: 360px"></div>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never">
|
||||
<el-table v-loading="loading" :data="reportList">
|
||||
<el-table-column label="班组" align="center" prop="teamName" v-if="columns[0].visible" />
|
||||
<el-table-column label="工位" align="center" prop="stationName" v-if="columns[1].visible" />
|
||||
<el-table-column label="操作员" align="center" prop="operatorName" v-if="columns[2].visible" />
|
||||
<el-table-column label="产品" align="center" prop="productName" v-if="columns[3].visible" width="260" />
|
||||
<el-table-column label="工序" align="center" prop="processName" v-if="columns[4].visible" />
|
||||
<el-table-column label="生产数量" align="center" prop="productionQuantity" v-if="columns[5].visible" />
|
||||
<el-table-column label="合格数量" align="center" prop="qualifiedQuantity" v-if="columns[6].visible" />
|
||||
<el-table-column label="不合格数量" align="center" prop="unqualifiedQuantity" v-if="columns[7].visible" />
|
||||
<el-table-column label="合格率(%)" align="center" prop="qualifiedRate" v-if="columns[8].visible" />
|
||||
<el-table-column label="开始时间" align="center" prop="startTime" v-if="columns[9].visible" />
|
||||
<el-table-column label="结束时间" align="center" prop="endTime" v-if="columns[10].visible" />
|
||||
<el-table-column label="作业时长(h)" align="center" prop="workHours" v-if="columns[11].visible" />
|
||||
<el-table-column label="备注" align="center" prop="remark" v-if="columns[12].visible" show-overflow-tooltip />
|
||||
</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="ReportTeamWork" 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 { listTeamWorkReport } from '@/api/mes/prodReport';
|
||||
import { getProcessInfoList } from '@/api/mes/baseProcessInfo';
|
||||
import { getBaseClassTeamInfoList } from '@/api/mes/baseClassTeamInfo';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
const reportList = ref<[]>([]);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const total = ref(0);
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const dateRange = ref<string[]>(['', '']);
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
let chart: echarts.ECharts | null = null;
|
||||
|
||||
// 下拉数据
|
||||
const processInfoList = ref([]);
|
||||
const classTeamList = ref([]);
|
||||
|
||||
// 列显隐信息
|
||||
const columns = ref<FieldOption[]>([
|
||||
{ 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: 5, label: '生产数量', visible: true },
|
||||
{ key: 6, label: '合格数量', visible: true },
|
||||
{ key: 7, label: '不合格数量', visible: true },
|
||||
{ key: 8, label: '合格率(%)', visible: true },
|
||||
{ key: 9, label: '开始时间', visible: false },
|
||||
{ key: 10, label: '结束时间', visible: false },
|
||||
{ key: 11, label: '作业时长(h)', visible: false },
|
||||
{ key: 12, label: '备注', visible: true }
|
||||
]);
|
||||
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
processId: 18,
|
||||
classTeamId: undefined,
|
||||
beginDate: '',
|
||||
endDate: '',
|
||||
params: {}
|
||||
});
|
||||
|
||||
// 下拉获取
|
||||
const getProcessInfoListSelect = async () => {
|
||||
const res = await getProcessInfoList(null);
|
||||
processInfoList.value = res.data;
|
||||
};
|
||||
|
||||
const getClassTeamSelect = async () => {
|
||||
const res = await getBaseClassTeamInfoList(null);
|
||||
classTeamList.value = res.data;
|
||||
};
|
||||
|
||||
// 列表
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
queryParams.value.beginDate = dateRange.value?.[0];
|
||||
queryParams.value.endDate = dateRange.value?.[1];
|
||||
const res = await listTeamWorkReport(queryParams.value);
|
||||
reportList.value = res.rows || [];
|
||||
total.value = res.total || 0;
|
||||
loading.value = false;
|
||||
await nextTick();
|
||||
renderChart();
|
||||
};
|
||||
|
||||
// 搜索
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 重置
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields?.();
|
||||
const nowDate = proxy?.parseTime(new Date(), '{y}-{m}-{d}');
|
||||
dateRange.value = [nowDate, nowDate];
|
||||
queryParams.value.processId = 18;
|
||||
queryParams.value.classTeamId = undefined;
|
||||
handleQuery();
|
||||
};
|
||||
|
||||
// 导出
|
||||
const handleExport = () => {
|
||||
queryParams.value.beginDate = dateRange.value?.[0];
|
||||
queryParams.value.endDate = dateRange.value?.[1];
|
||||
proxy?.download('mes/prodReport/teamWorkReport/export', { ...queryParams.value }, `班组作业报表_${new Date().getTime()}.xlsx`);
|
||||
};
|
||||
|
||||
// 渲染图表
|
||||
const renderChart = () => {
|
||||
if (!chartRef.value) return;
|
||||
if (!chart) chart = echarts.init(chartRef.value);
|
||||
const categories = (reportList.value || []).map((x: any) => x.teamName || '-');
|
||||
const prodQty = (reportList.value || []).map((x: any) => Number(x.productionQuantity || 0));
|
||||
const unqualQty = (reportList.value || []).map((x: any) => Number(x.unqualifiedQuantity || 0));
|
||||
const qualRate = (reportList.value || []).map((x: any) => Number(x.qualifiedRate || 0));
|
||||
|
||||
const option: echarts.EChartsOption = {
|
||||
tooltip: { trigger: 'axis' },
|
||||
legend: { data: ['生产数量', '不合格数量', '合格率(%)'] },
|
||||
grid: { left: 40, right: 40, top: 40, bottom: 40 },
|
||||
xAxis: { type: 'category', data: categories, axisLabel: { interval: 0, rotate: 30 } },
|
||||
yAxis: [
|
||||
{ type: 'value', name: '数量' },
|
||||
{ type: 'value', name: '合格率(%)', min: 0, max: 100 }
|
||||
],
|
||||
series: [
|
||||
{ name: '生产数量', type: 'bar', data: prodQty, itemStyle: { color: '#5470C6' }, barMaxWidth: 30 },
|
||||
{ name: '不合格数量', type: 'bar', data: unqualQty, itemStyle: { color: '#EE6666' }, barMaxWidth: 30 },
|
||||
{ name: '合格率(%)', type: 'line', yAxisIndex: 1, data: qualRate, smooth: true, itemStyle: { color: '#91CC75' } }
|
||||
]
|
||||
};
|
||||
chart.setOption(option);
|
||||
chart.resize();
|
||||
};
|
||||
|
||||
const resizeHandler = () => {
|
||||
chart?.resize();
|
||||
};
|
||||
|
||||
window.addEventListener('resize', resizeHandler);
|
||||
|
||||
onMounted(async () => {
|
||||
resetQuery();
|
||||
await getProcessInfoListSelect();
|
||||
await getClassTeamSelect();
|
||||
await getList();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeHandler);
|
||||
chart?.dispose();
|
||||
chart = null;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@ -0,0 +1,223 @@
|
||||
<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="processId">
|
||||
<el-select v-model="queryParams.processId" placeholder="请选择所属工序" @keyup.enter="handleQuery">
|
||||
<el-option v-for="item in processInfoList" :key="item.processId" :label="item.processName" :value="item.processId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="班组名称" prop="classTeamId">
|
||||
<el-select v-model="queryParams.classTeamId" placeholder="请选择班组名称" clearable @keyup.enter="handleQuery">
|
||||
<el-option v-for="item in classTeamList" :key="item.classTeamId" :label="item.teamName" :value="item.classTeamId" />
|
||||
</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-card shadow="never" class="mb-[10px]">
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['mes:baseWorkshopInfo:export']">导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true" @queryTable="getList" />
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<div ref="chartRef" style="width: 100%; height: 360px"></div>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never">
|
||||
<el-table v-loading="loading" :data="reportList">
|
||||
<el-table-column label="班组" align="center" prop="teamName" v-if="columns[0].visible" />
|
||||
<el-table-column label="工位" align="center" prop="stationName" v-if="columns[1].visible" />
|
||||
<el-table-column label="操作员" align="center" prop="operatorName" v-if="columns[2].visible" />
|
||||
<el-table-column label="产品" align="center" prop="productName" v-if="columns[3].visible" width="260" />
|
||||
<el-table-column label="工序" align="center" prop="processName" v-if="columns[4].visible" />
|
||||
<el-table-column label="生产数量" align="center" prop="productionQuantity" v-if="columns[5].visible" />
|
||||
<el-table-column label="合格数量" align="center" prop="qualifiedQuantity" v-if="columns[6].visible" />
|
||||
<el-table-column label="不合格数量" align="center" prop="unqualifiedQuantity" v-if="columns[7].visible" />
|
||||
<el-table-column label="合格率(%)" align="center" prop="qualifiedRate" v-if="columns[8].visible" />
|
||||
<el-table-column label="开始时间" align="center" prop="startTime" v-if="columns[9].visible" />
|
||||
<el-table-column label="结束时间" align="center" prop="endTime" v-if="columns[10].visible" />
|
||||
<el-table-column label="作业时长(h)" align="center" prop="workHours" v-if="columns[11].visible" />
|
||||
<el-table-column label="备注" align="center" prop="remark" v-if="columns[12].visible" show-overflow-tooltip />
|
||||
</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="ReportTeamWork" 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 { listTeamWorkReport } from '@/api/mes/prodReport';
|
||||
import { getProcessInfoList } from '@/api/mes/baseProcessInfo';
|
||||
import { getBaseClassTeamInfoList } from '@/api/mes/baseClassTeamInfo';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
const reportList = ref<[]>([]);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const total = ref(0);
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const dateRange = ref<string[]>(['', '']);
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
let chart: echarts.ECharts | null = null;
|
||||
|
||||
// 下拉数据
|
||||
const processInfoList = ref([]);
|
||||
const classTeamList = ref([]);
|
||||
|
||||
// 列显隐信息
|
||||
const columns = ref<FieldOption[]>([
|
||||
{ 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: 5, label: '生产数量', visible: true },
|
||||
{ key: 6, label: '合格数量', visible: true },
|
||||
{ key: 7, label: '不合格数量', visible: true },
|
||||
{ key: 8, label: '合格率(%)', visible: true },
|
||||
{ key: 9, label: '开始时间', visible: false },
|
||||
{ key: 10, label: '结束时间', visible: false },
|
||||
{ key: 11, label: '作业时长(h)', visible: false },
|
||||
{ key: 12, label: '备注', visible: true }
|
||||
]);
|
||||
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
processId: 17,
|
||||
classTeamId: undefined,
|
||||
beginDate: '',
|
||||
endDate: '',
|
||||
params: {}
|
||||
});
|
||||
|
||||
// 下拉获取
|
||||
const getProcessInfoListSelect = async () => {
|
||||
const res = await getProcessInfoList(null);
|
||||
processInfoList.value = res.data;
|
||||
};
|
||||
|
||||
const getClassTeamSelect = async () => {
|
||||
const res = await getBaseClassTeamInfoList(null);
|
||||
classTeamList.value = res.data;
|
||||
};
|
||||
|
||||
// 列表
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
queryParams.value.beginDate = dateRange.value?.[0];
|
||||
queryParams.value.endDate = dateRange.value?.[1];
|
||||
const res = await listTeamWorkReport(queryParams.value);
|
||||
reportList.value = res.rows || [];
|
||||
total.value = res.total || 0;
|
||||
loading.value = false;
|
||||
await nextTick();
|
||||
renderChart();
|
||||
};
|
||||
|
||||
// 搜索
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 重置
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields?.();
|
||||
const nowDate = proxy?.parseTime(new Date(), '{y}-{m}-{d}');
|
||||
dateRange.value = [nowDate, nowDate];
|
||||
queryParams.value.processId = 17;
|
||||
queryParams.value.classTeamId = undefined;
|
||||
handleQuery();
|
||||
};
|
||||
|
||||
// 导出
|
||||
const handleExport = () => {
|
||||
queryParams.value.beginDate = dateRange.value?.[0];
|
||||
queryParams.value.endDate = dateRange.value?.[1];
|
||||
proxy?.download('mes/prodReport/teamWorkReport/export', { ...queryParams.value }, `班组作业报表_${new Date().getTime()}.xlsx`);
|
||||
};
|
||||
|
||||
// 渲染图表
|
||||
const renderChart = () => {
|
||||
if (!chartRef.value) return;
|
||||
if (!chart) chart = echarts.init(chartRef.value);
|
||||
const categories = (reportList.value || []).map((x: any) => x.teamName || '-');
|
||||
const prodQty = (reportList.value || []).map((x: any) => Number(x.productionQuantity || 0));
|
||||
const unqualQty = (reportList.value || []).map((x: any) => Number(x.unqualifiedQuantity || 0));
|
||||
const qualRate = (reportList.value || []).map((x: any) => Number(x.qualifiedRate || 0));
|
||||
|
||||
const option: echarts.EChartsOption = {
|
||||
tooltip: { trigger: 'axis' },
|
||||
legend: { data: ['生产数量', '不合格数量', '合格率(%)'] },
|
||||
grid: { left: 40, right: 40, top: 40, bottom: 40 },
|
||||
xAxis: { type: 'category', data: categories, axisLabel: { interval: 0, rotate: 30 } },
|
||||
yAxis: [
|
||||
{ type: 'value', name: '数量' },
|
||||
{ type: 'value', name: '合格率(%)', min: 0, max: 100 }
|
||||
],
|
||||
series: [
|
||||
{ name: '生产数量', type: 'bar', data: prodQty, itemStyle: { color: '#5470C6' }, barMaxWidth: 30 },
|
||||
{ name: '不合格数量', type: 'bar', data: unqualQty, itemStyle: { color: '#EE6666' }, barMaxWidth: 30 },
|
||||
{ name: '合格率(%)', type: 'line', yAxisIndex: 1, data: qualRate, smooth: true, itemStyle: { color: '#91CC75' } }
|
||||
]
|
||||
};
|
||||
chart.setOption(option);
|
||||
chart.resize();
|
||||
};
|
||||
|
||||
const resizeHandler = () => {
|
||||
chart?.resize();
|
||||
};
|
||||
|
||||
window.addEventListener('resize', resizeHandler);
|
||||
|
||||
onMounted(async () => {
|
||||
resetQuery();
|
||||
await getProcessInfoListSelect();
|
||||
await getClassTeamSelect();
|
||||
await getList();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeHandler);
|
||||
chart?.dispose();
|
||||
chart = null;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@ -0,0 +1,223 @@
|
||||
<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="processId">
|
||||
<el-select v-model="queryParams.processId" placeholder="请选择所属工序" @keyup.enter="handleQuery">
|
||||
<el-option v-for="item in processInfoList" :key="item.processId" :label="item.processName" :value="item.processId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="班组名称" prop="classTeamId">
|
||||
<el-select v-model="queryParams.classTeamId" placeholder="请选择班组名称" clearable @keyup.enter="handleQuery">
|
||||
<el-option v-for="item in classTeamList" :key="item.classTeamId" :label="item.teamName" :value="item.classTeamId" />
|
||||
</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-card shadow="never" class="mb-[10px]">
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['mes:baseWorkshopInfo:export']">导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true" @queryTable="getList" />
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<div ref="chartRef" style="width: 100%; height: 360px"></div>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never">
|
||||
<el-table v-loading="loading" :data="reportList">
|
||||
<el-table-column label="班组" align="center" prop="teamName" v-if="columns[0].visible" />
|
||||
<el-table-column label="工位" align="center" prop="stationName" v-if="columns[1].visible" />
|
||||
<el-table-column label="操作员" align="center" prop="operatorName" v-if="columns[2].visible" />
|
||||
<el-table-column label="产品" align="center" prop="productName" v-if="columns[3].visible" width="260" />
|
||||
<el-table-column label="工序" align="center" prop="processName" v-if="columns[4].visible" />
|
||||
<el-table-column label="生产数量" align="center" prop="productionQuantity" v-if="columns[5].visible" />
|
||||
<el-table-column label="合格数量" align="center" prop="qualifiedQuantity" v-if="columns[6].visible" />
|
||||
<el-table-column label="不合格数量" align="center" prop="unqualifiedQuantity" v-if="columns[7].visible" />
|
||||
<el-table-column label="合格率(%)" align="center" prop="qualifiedRate" v-if="columns[8].visible" />
|
||||
<el-table-column label="开始时间" align="center" prop="startTime" v-if="columns[9].visible" />
|
||||
<el-table-column label="结束时间" align="center" prop="endTime" v-if="columns[10].visible" />
|
||||
<el-table-column label="作业时长(h)" align="center" prop="workHours" v-if="columns[11].visible" />
|
||||
<el-table-column label="备注" align="center" prop="remark" v-if="columns[12].visible" show-overflow-tooltip />
|
||||
</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="ReportTeamWork" 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 { listTeamWorkReport } from '@/api/mes/prodReport';
|
||||
import { getProcessInfoList } from '@/api/mes/baseProcessInfo';
|
||||
import { getBaseClassTeamInfoList } from '@/api/mes/baseClassTeamInfo';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
const reportList = ref<[]>([]);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const total = ref(0);
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const dateRange = ref<string[]>(['', '']);
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
let chart: echarts.ECharts | null = null;
|
||||
|
||||
// 下拉数据
|
||||
const processInfoList = ref([]);
|
||||
const classTeamList = ref([]);
|
||||
|
||||
// 列显隐信息
|
||||
const columns = ref<FieldOption[]>([
|
||||
{ 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: 5, label: '生产数量', visible: true },
|
||||
{ key: 6, label: '合格数量', visible: true },
|
||||
{ key: 7, label: '不合格数量', visible: true },
|
||||
{ key: 8, label: '合格率(%)', visible: true },
|
||||
{ key: 9, label: '开始时间', visible: false },
|
||||
{ key: 10, label: '结束时间', visible: false },
|
||||
{ key: 11, label: '作业时长(h)', visible: false },
|
||||
{ key: 12, label: '备注', visible: true }
|
||||
]);
|
||||
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
processId: 2,
|
||||
classTeamId: undefined,
|
||||
beginDate: '',
|
||||
endDate: '',
|
||||
params: {}
|
||||
});
|
||||
|
||||
// 下拉获取
|
||||
const getProcessInfoListSelect = async () => {
|
||||
const res = await getProcessInfoList(null);
|
||||
processInfoList.value = res.data;
|
||||
};
|
||||
|
||||
const getClassTeamSelect = async () => {
|
||||
const res = await getBaseClassTeamInfoList(null);
|
||||
classTeamList.value = res.data;
|
||||
};
|
||||
|
||||
// 列表
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
queryParams.value.beginDate = dateRange.value?.[0];
|
||||
queryParams.value.endDate = dateRange.value?.[1];
|
||||
const res = await listTeamWorkReport(queryParams.value);
|
||||
reportList.value = res.rows || [];
|
||||
total.value = res.total || 0;
|
||||
loading.value = false;
|
||||
await nextTick();
|
||||
renderChart();
|
||||
};
|
||||
|
||||
// 搜索
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 重置
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields?.();
|
||||
const nowDate = proxy?.parseTime(new Date(), '{y}-{m}-{d}');
|
||||
dateRange.value = [nowDate, nowDate];
|
||||
queryParams.value.processId = 2;
|
||||
queryParams.value.classTeamId = undefined;
|
||||
handleQuery();
|
||||
};
|
||||
|
||||
// 导出
|
||||
const handleExport = () => {
|
||||
queryParams.value.beginDate = dateRange.value?.[0];
|
||||
queryParams.value.endDate = dateRange.value?.[1];
|
||||
proxy?.download('mes/prodReport/teamWorkReport/export', { ...queryParams.value }, `班组作业报表_${new Date().getTime()}.xlsx`);
|
||||
};
|
||||
|
||||
// 渲染图表
|
||||
const renderChart = () => {
|
||||
if (!chartRef.value) return;
|
||||
if (!chart) chart = echarts.init(chartRef.value);
|
||||
const categories = (reportList.value || []).map((x: any) => x.teamName || '-');
|
||||
const prodQty = (reportList.value || []).map((x: any) => Number(x.productionQuantity || 0));
|
||||
const unqualQty = (reportList.value || []).map((x: any) => Number(x.unqualifiedQuantity || 0));
|
||||
const qualRate = (reportList.value || []).map((x: any) => Number(x.qualifiedRate || 0));
|
||||
|
||||
const option: echarts.EChartsOption = {
|
||||
tooltip: { trigger: 'axis' },
|
||||
legend: { data: ['生产数量', '不合格数量', '合格率(%)'] },
|
||||
grid: { left: 40, right: 40, top: 40, bottom: 40 },
|
||||
xAxis: { type: 'category', data: categories, axisLabel: { interval: 0, rotate: 30 } },
|
||||
yAxis: [
|
||||
{ type: 'value', name: '数量' },
|
||||
{ type: 'value', name: '合格率(%)', min: 0, max: 100 }
|
||||
],
|
||||
series: [
|
||||
{ name: '生产数量', type: 'bar', data: prodQty, itemStyle: { color: '#5470C6' }, barMaxWidth: 30 },
|
||||
{ name: '不合格数量', type: 'bar', data: unqualQty, itemStyle: { color: '#EE6666' }, barMaxWidth: 30 },
|
||||
{ name: '合格率(%)', type: 'line', yAxisIndex: 1, data: qualRate, smooth: true, itemStyle: { color: '#91CC75' } }
|
||||
]
|
||||
};
|
||||
chart.setOption(option);
|
||||
chart.resize();
|
||||
};
|
||||
|
||||
const resizeHandler = () => {
|
||||
chart?.resize();
|
||||
};
|
||||
|
||||
window.addEventListener('resize', resizeHandler);
|
||||
|
||||
onMounted(async () => {
|
||||
resetQuery();
|
||||
await getProcessInfoListSelect();
|
||||
await getClassTeamSelect();
|
||||
await getList();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeHandler);
|
||||
chart?.dispose();
|
||||
chart = null;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@ -0,0 +1,232 @@
|
||||
<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="processId">
|
||||
<el-select v-model="queryParams.processId" placeholder="请选择所属工序" @keyup.enter="handleQuery">
|
||||
<el-option v-for="item in processInfoList" :key="item.processId" :label="item.processName" :value="item.processId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="机台名称" prop="machineId">
|
||||
<el-select v-model="queryParams.machineId" placeholder="请选择机台名称" clearable @keyup.enter="handleQuery">
|
||||
<el-option v-for="item in machineInfoList" :key="item.machineId" :label="item.machineName" :value="item.machineId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="班次名称" prop="shiftId">
|
||||
<el-select v-model="queryParams.shiftId" placeholder="请选择班次名称" clearable @keyup.enter="handleQuery">
|
||||
<el-option v-for="item in shiftList" :key="item.shiftId" :label="item.shiftName" :value="item.shiftId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="班组名称" prop="classTeamId">
|
||||
<el-select v-model="queryParams.classTeamId" placeholder="请选择班组名称" clearable @keyup.enter="handleQuery">
|
||||
<el-option v-for="item in classTeamList" :key="item.classTeamId" :label="item.teamName" :value="item.classTeamId" />
|
||||
</el-select>
|
||||
</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="materialName">
|
||||
<el-input v-model="queryParams.materialName" placeholder="请输入物料名称" clearable @keyup.enter="handleQuery" />
|
||||
</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-card shadow="never">
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['mes:baseWorkshopInfo:export']">导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true" @queryTable="getList" />
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<el-table v-loading="loading" :data="reportList">
|
||||
<el-table-column label="派工单" align="center" prop="dispatchCode" v-if="columns[0].visible" />
|
||||
<el-table-column label="班组" align="center" prop="teamName" v-if="columns[1].visible" />
|
||||
<el-table-column label="工位" align="center" prop="stationName" v-if="columns[2].visible" />
|
||||
<el-table-column label="物料名称" align="center" prop="materialName" v-if="columns[3].visible" width="260" />
|
||||
<el-table-column label="工序名称" align="center" prop="processName" v-if="columns[4].visible" />
|
||||
<el-table-column label="报工数量" align="center" prop="completeAmount" v-if="columns[5].visible" />
|
||||
<el-table-column label="标准工时(h)" align="center" prop="standardWorkHour" v-if="columns[6].visible" />
|
||||
<el-table-column label="报工工时(h)" align="center" prop="reportWorkHour" v-if="columns[7].visible" />
|
||||
<el-table-column label="生产效率" align="center" prop="productionEfficiency" v-if="columns[8].visible" />
|
||||
<el-table-column label="派工单状态" align="center" prop="planStatus" v-if="columns[9].visible" >
|
||||
<template #default="scope">
|
||||
<dict-tag :options="mes_plan_status" :value="scope.row.planStatus"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="remark" v-if="columns[10].visible" show-overflow-tooltip />
|
||||
</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="ReportWorkHour" lang="ts">
|
||||
import { getCurrentInstance, ref, watch, onMounted } from 'vue';
|
||||
import type { ComponentInternalInstance } from 'vue';
|
||||
import type { ElFormInstance } from 'element-plus';
|
||||
import { listWorkHourReport } from '@/api/mes/prodReport';
|
||||
import { getProcessInfoList } from '@/api/mes/baseProcessInfo';
|
||||
import { getProdBaseMachineInfoList } from '@/api/mes/prodBaseMachineInfo';
|
||||
import { getBaseShiftInfoList } from '@/api/mes/baseShiftInfo';
|
||||
import { getBaseClassTeamInfoList } from '@/api/mes/baseClassTeamInfo';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const {
|
||||
mes_import_flag,
|
||||
active_flag,
|
||||
mes_plan_status,
|
||||
mes_release_type,
|
||||
mes_finish_flag,
|
||||
mes_model_code
|
||||
} = toRefs<any>(proxy?.useDict('mes_import_flag', 'active_flag', 'mes_plan_status', 'mes_release_type', 'mes_finish_flag', 'mes_model_code'));
|
||||
|
||||
const reportList = ref<[]>([]);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const total = ref(0);
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const dateRange = ref<string[]>(['', '']);
|
||||
|
||||
// 下拉数据
|
||||
const processInfoList = ref([]);
|
||||
const machineInfoList = ref([]);
|
||||
const shiftList = ref([]);
|
||||
const classTeamList = ref([]);
|
||||
|
||||
// 列显隐信息
|
||||
const columns = ref<FieldOption[]>([
|
||||
{ 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: 5, label: '报工数量', visible: true },
|
||||
{ key: 6, label: '标准工时(h)', visible: true },
|
||||
{ key: 7, label: '报工工时(h)', visible: true },
|
||||
{ key: 8, label: '生产效率', visible: true },
|
||||
{ key: 9, label: '派工单状态', visible: true },
|
||||
{ key: 10, label: '备注', visible: true }
|
||||
]);
|
||||
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
processId: 17,
|
||||
machineId: undefined,
|
||||
shiftId: undefined,
|
||||
classTeamId: undefined,
|
||||
planCode: '',
|
||||
materialName: '',
|
||||
beginDate: '',
|
||||
endDate: '',
|
||||
params: {}
|
||||
});
|
||||
|
||||
// 下拉获取
|
||||
const getProcessInfoListSelect = async () => {
|
||||
const res = await getProcessInfoList(null);
|
||||
processInfoList.value = res.data;
|
||||
};
|
||||
|
||||
const getProdBaseMachineInfoListSelect = async () => {
|
||||
const res = await getProdBaseMachineInfoList({ processId: queryParams.value.processId });
|
||||
machineInfoList.value = res.data;
|
||||
};
|
||||
|
||||
const getShiftSelect = async () => {
|
||||
const res = await getBaseShiftInfoList(null);
|
||||
shiftList.value = res.data;
|
||||
};
|
||||
|
||||
const getClassTeamSelect = async () => {
|
||||
const res = await getBaseClassTeamInfoList(null);
|
||||
classTeamList.value = res.data;
|
||||
};
|
||||
|
||||
// 列表
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
queryParams.value.beginDate = dateRange.value?.[0];
|
||||
queryParams.value.endDate = dateRange.value?.[1];
|
||||
const res = await listWorkHourReport(queryParams.value);
|
||||
reportList.value = res.rows || [];
|
||||
total.value = res.total || 0;
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
// 搜索
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 重置
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields?.();
|
||||
const nowDate = proxy?.parseTime(new Date(), '{y}-{m}-{d}');
|
||||
dateRange.value = [nowDate, nowDate];
|
||||
queryParams.value.processId = 17;
|
||||
queryParams.value.machineId = undefined;
|
||||
queryParams.value.shiftId = undefined;
|
||||
queryParams.value.classTeamId = undefined;
|
||||
queryParams.value.planCode = '';
|
||||
queryParams.value.materialName = '';
|
||||
handleQuery();
|
||||
};
|
||||
|
||||
// 导出
|
||||
const handleExport = () => {
|
||||
queryParams.value.beginDate = dateRange.value?.[0];
|
||||
queryParams.value.endDate = dateRange.value?.[1];
|
||||
proxy?.download('mes/prodReport/workHourReport/export', { ...queryParams.value }, `工时报表_${new Date().getTime()}.xlsx`);
|
||||
};
|
||||
|
||||
// 监听工序变化联动机台
|
||||
watch(
|
||||
() => queryParams.value.processId,
|
||||
async () => {
|
||||
loading.value = true;
|
||||
await getProdBaseMachineInfoListSelect();
|
||||
await getList();
|
||||
loading.value = false;
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
resetQuery();
|
||||
await getProcessInfoListSelect();
|
||||
await getProdBaseMachineInfoListSelect();
|
||||
await getShiftSelect();
|
||||
await getClassTeamSelect();
|
||||
await getList();
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,232 @@
|
||||
<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="processId">
|
||||
<el-select v-model="queryParams.processId" placeholder="请选择所属工序" @keyup.enter="handleQuery">
|
||||
<el-option v-for="item in processInfoList" :key="item.processId" :label="item.processName" :value="item.processId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="机台名称" prop="machineId">
|
||||
<el-select v-model="queryParams.machineId" placeholder="请选择机台名称" clearable @keyup.enter="handleQuery">
|
||||
<el-option v-for="item in machineInfoList" :key="item.machineId" :label="item.machineName" :value="item.machineId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="班次名称" prop="shiftId">
|
||||
<el-select v-model="queryParams.shiftId" placeholder="请选择班次名称" clearable @keyup.enter="handleQuery">
|
||||
<el-option v-for="item in shiftList" :key="item.shiftId" :label="item.shiftName" :value="item.shiftId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="班组名称" prop="classTeamId">
|
||||
<el-select v-model="queryParams.classTeamId" placeholder="请选择班组名称" clearable @keyup.enter="handleQuery">
|
||||
<el-option v-for="item in classTeamList" :key="item.classTeamId" :label="item.teamName" :value="item.classTeamId" />
|
||||
</el-select>
|
||||
</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="materialName">
|
||||
<el-input v-model="queryParams.materialName" placeholder="请输入物料名称" clearable @keyup.enter="handleQuery" />
|
||||
</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-card shadow="never">
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['mes:baseWorkshopInfo:export']">导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true" @queryTable="getList" />
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<el-table v-loading="loading" :data="reportList">
|
||||
<el-table-column label="派工单" align="center" prop="dispatchCode" v-if="columns[0].visible" />
|
||||
<el-table-column label="班组" align="center" prop="teamName" v-if="columns[1].visible" />
|
||||
<el-table-column label="工位" align="center" prop="stationName" v-if="columns[2].visible" />
|
||||
<el-table-column label="物料名称" align="center" prop="materialName" v-if="columns[3].visible" width="260" />
|
||||
<el-table-column label="工序名称" align="center" prop="processName" v-if="columns[4].visible" />
|
||||
<el-table-column label="报工数量" align="center" prop="completeAmount" v-if="columns[5].visible" />
|
||||
<el-table-column label="标准工时(h)" align="center" prop="standardWorkHour" v-if="columns[6].visible" />
|
||||
<el-table-column label="报工工时(h)" align="center" prop="reportWorkHour" v-if="columns[7].visible" />
|
||||
<el-table-column label="生产效率" align="center" prop="productionEfficiency" v-if="columns[8].visible" />
|
||||
<el-table-column label="派工单状态" align="center" prop="planStatus" v-if="columns[9].visible" >
|
||||
<template #default="scope">
|
||||
<dict-tag :options="mes_plan_status" :value="scope.row.planStatus"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="remark" v-if="columns[10].visible" show-overflow-tooltip />
|
||||
</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="ReportWorkHour" lang="ts">
|
||||
import { getCurrentInstance, ref, watch, onMounted } from 'vue';
|
||||
import type { ComponentInternalInstance } from 'vue';
|
||||
import type { ElFormInstance } from 'element-plus';
|
||||
import { listWorkHourReport } from '@/api/mes/prodReport';
|
||||
import { getProcessInfoList } from '@/api/mes/baseProcessInfo';
|
||||
import { getProdBaseMachineInfoList } from '@/api/mes/prodBaseMachineInfo';
|
||||
import { getBaseShiftInfoList } from '@/api/mes/baseShiftInfo';
|
||||
import { getBaseClassTeamInfoList } from '@/api/mes/baseClassTeamInfo';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const {
|
||||
mes_import_flag,
|
||||
active_flag,
|
||||
mes_plan_status,
|
||||
mes_release_type,
|
||||
mes_finish_flag,
|
||||
mes_model_code
|
||||
} = toRefs<any>(proxy?.useDict('mes_import_flag', 'active_flag', 'mes_plan_status', 'mes_release_type', 'mes_finish_flag', 'mes_model_code'));
|
||||
|
||||
const reportList = ref<[]>([]);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const total = ref(0);
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const dateRange = ref<string[]>(['', '']);
|
||||
|
||||
// 下拉数据
|
||||
const processInfoList = ref([]);
|
||||
const machineInfoList = ref([]);
|
||||
const shiftList = ref([]);
|
||||
const classTeamList = ref([]);
|
||||
|
||||
// 列显隐信息
|
||||
const columns = ref<FieldOption[]>([
|
||||
{ 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: 5, label: '报工数量', visible: true },
|
||||
{ key: 6, label: '标准工时(h)', visible: true },
|
||||
{ key: 7, label: '报工工时(h)', visible: true },
|
||||
{ key: 8, label: '生产效率', visible: true },
|
||||
{ key: 9, label: '派工单状态', visible: true },
|
||||
{ key: 10, label: '备注', visible: true }
|
||||
]);
|
||||
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
processId: 2,
|
||||
machineId: undefined,
|
||||
shiftId: undefined,
|
||||
classTeamId: undefined,
|
||||
planCode: '',
|
||||
materialName: '',
|
||||
beginDate: '',
|
||||
endDate: '',
|
||||
params: {}
|
||||
});
|
||||
|
||||
// 下拉获取
|
||||
const getProcessInfoListSelect = async () => {
|
||||
const res = await getProcessInfoList(null);
|
||||
processInfoList.value = res.data;
|
||||
};
|
||||
|
||||
const getProdBaseMachineInfoListSelect = async () => {
|
||||
const res = await getProdBaseMachineInfoList({ processId: queryParams.value.processId });
|
||||
machineInfoList.value = res.data;
|
||||
};
|
||||
|
||||
const getShiftSelect = async () => {
|
||||
const res = await getBaseShiftInfoList(null);
|
||||
shiftList.value = res.data;
|
||||
};
|
||||
|
||||
const getClassTeamSelect = async () => {
|
||||
const res = await getBaseClassTeamInfoList(null);
|
||||
classTeamList.value = res.data;
|
||||
};
|
||||
|
||||
// 列表
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
queryParams.value.beginDate = dateRange.value?.[0];
|
||||
queryParams.value.endDate = dateRange.value?.[1];
|
||||
const res = await listWorkHourReport(queryParams.value);
|
||||
reportList.value = res.rows || [];
|
||||
total.value = res.total || 0;
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
// 搜索
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 重置
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields?.();
|
||||
const nowDate = proxy?.parseTime(new Date(), '{y}-{m}-{d}');
|
||||
dateRange.value = [nowDate, nowDate];
|
||||
queryParams.value.processId = 2;
|
||||
queryParams.value.machineId = undefined;
|
||||
queryParams.value.shiftId = undefined;
|
||||
queryParams.value.classTeamId = undefined;
|
||||
queryParams.value.planCode = '';
|
||||
queryParams.value.materialName = '';
|
||||
handleQuery();
|
||||
};
|
||||
|
||||
// 导出
|
||||
const handleExport = () => {
|
||||
queryParams.value.beginDate = dateRange.value?.[0];
|
||||
queryParams.value.endDate = dateRange.value?.[1];
|
||||
proxy?.download('mes/prodReport/workHourReport/export', { ...queryParams.value }, `工时报表_${new Date().getTime()}.xlsx`);
|
||||
};
|
||||
|
||||
// 监听工序变化联动机台
|
||||
watch(
|
||||
() => queryParams.value.processId,
|
||||
async () => {
|
||||
loading.value = true;
|
||||
await getProdBaseMachineInfoListSelect();
|
||||
await getList();
|
||||
loading.value = false;
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
resetQuery();
|
||||
await getProcessInfoListSelect();
|
||||
await getProdBaseMachineInfoListSelect();
|
||||
await getShiftSelect();
|
||||
await getClassTeamSelect();
|
||||
await getList();
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<el-card shadow="hover" class="mb-4">
|
||||
<el-form :inline="true" :model="queryParams">
|
||||
<el-form-item label="日期范围">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
@change="handleDateChange"
|
||||
/>
|
||||
</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>
|
||||
|
||||
<el-card shadow="never" v-loading="loading">
|
||||
<template #header>
|
||||
<div class="text-center text-xl font-bold">进料检验报表</div>
|
||||
</template>
|
||||
|
||||
<el-table :data="tableData" border style="width: 100%" :height="tableHeight">
|
||||
<el-table-column type="index" label="#" width="50" align="center" />
|
||||
<el-table-column prop="inspectionNo" label="检验单号" min-width="140" show-overflow-tooltip />
|
||||
<el-table-column prop="purchaseOrderNo" label="采购单号" min-width="140" show-overflow-tooltip />
|
||||
<el-table-column prop="inspectionDate" label="检验日期" width="120" />
|
||||
<el-table-column prop="inspectionStartTime" label="开始时间" width="160" />
|
||||
<el-table-column prop="inspectionEndTime" label="结束时间" width="160" />
|
||||
<el-table-column prop="materialCode" label="物料编码" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="materialName" label="物料名称" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column prop="materialSpec" label="规格型号" min-width="140" show-overflow-tooltip />
|
||||
<el-table-column prop="materialUnit" label="单位" width="80" />
|
||||
<el-table-column prop="supplierName" label="供应商" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column prop="inspectionQty" label="检验数量" width="110" align="right" />
|
||||
<el-table-column prop="qualifiedQty" label="合格数" width="100" align="right" />
|
||||
<el-table-column prop="unqualifiedQty" label="不合格数" width="110" align="right" />
|
||||
<el-table-column prop="inspectionResult" label="检验结果" width="100" />
|
||||
<el-table-column prop="inspectionTypeName" label="检验类型" width="120" />
|
||||
<el-table-column prop="inspectorName" label="检验人" width="100" />
|
||||
<el-table-column prop="items" label="检验项目" min-width="180" show-overflow-tooltip />
|
||||
<el-table-column prop="methods" label="检验方法" min-width="180" show-overflow-tooltip />
|
||||
<el-table-column prop="unqualifiedItems" label="不合格项" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="returnReason" label="退货原因" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column prop="unqualifiedSummary" label="不合格汇总" min-width="220" show-overflow-tooltip />
|
||||
<el-table-column prop="remark" label="备注" min-width="160" show-overflow-tooltip />
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed, onBeforeUnmount } from 'vue';
|
||||
import dayjs from 'dayjs';
|
||||
import weekOfYear from 'dayjs/plugin/weekOfYear';
|
||||
import { getIncomingInspectionEfficiency } from '@/api/qms/report';
|
||||
|
||||
dayjs.extend(weekOfYear);
|
||||
|
||||
// 状态
|
||||
const loading = ref(false);
|
||||
const dateRange = ref<[string, string] | null>(null);
|
||||
const queryParams = ref({ startTime: '', endTime: '' });
|
||||
const tableData = ref<any[]>([]);
|
||||
|
||||
// 自适应高度
|
||||
const windowHeight = ref(window.innerHeight);
|
||||
const tableHeight = computed(() => {
|
||||
return windowHeight.value - 280; // 粗略计算可视高度
|
||||
});
|
||||
|
||||
const resizeHandler = () => {
|
||||
windowHeight.value = window.innerHeight;
|
||||
};
|
||||
|
||||
// 方法
|
||||
const handleDateChange = (val: any) => {
|
||||
if (val && Array.isArray(val)) {
|
||||
queryParams.value.startTime = val[0];
|
||||
queryParams.value.endTime = val[1];
|
||||
} else {
|
||||
queryParams.value.startTime = '';
|
||||
queryParams.value.endTime = '';
|
||||
}
|
||||
};
|
||||
|
||||
const resetQuery = () => {
|
||||
// 默认本周
|
||||
const start = dayjs().startOf('week').format('YYYY-MM-DD');
|
||||
const end = dayjs().endOf('week').format('YYYY-MM-DD');
|
||||
dateRange.value = [start, end] as [string, string];
|
||||
handleDateChange(dateRange.value);
|
||||
handleQuery();
|
||||
};
|
||||
|
||||
const handleQuery = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res: any = await getIncomingInspectionEfficiency(queryParams.value);
|
||||
if (res && res.code === 200) {
|
||||
tableData.value = res.data || [];
|
||||
} else {
|
||||
tableData.value = [];
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('获取进料检验效率报表失败', e);
|
||||
tableData.value = [];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 初始化默认周范围并加载
|
||||
resetQuery();
|
||||
window.addEventListener('resize', resizeHandler);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeHandler);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue