feat:产能报表-添加报工产能弹框

main
黄伟杰 4 days ago
parent aa3111131d
commit 985e92ee2b

@ -177,5 +177,9 @@ export const PlanApi = {
getPlanPageByTask: async (params: any) => {
return await request.get({ url: `/mes/plan/page-by-task`, params })
},
getProductCapacityPage: async (params: any) => {
return await request.get({ url: `/mes/plan/product-capacity-page`, params })
}
}

@ -1353,14 +1353,27 @@ export default {
deviceType: 'Device Type',
deviceStatus: 'Device Status',
workshop: 'Workshop',
ratedCapacity: 'Rated Capacity',
ratedCapacity: 'Rated Capacity (Planned Capacity)',
reportCapacity: 'Report Capacity',
reportCapacityTooltip: 'Average of data from the last half year',
reportCapacityViewDetail: 'View Detail',
actualCapacity: 'Actual Capacity',
placeholderDeviceCode: 'Please input device code',
placeholderDeviceName: 'Please input device name',
placeholderDeviceType: 'Please input device type',
placeholderDeviceStatus: 'Please select device status',
placeholderWorkshop: 'Please input workshop',
dialogTitlePrefix: 'Report Capacity Detail - ',
dialogProductCode: 'Product Code',
dialogProductCodePlaceholder: 'Please input product code',
dialogProductName: 'Product Name',
dialogProductNamePlaceholder: 'Please input product name',
dialogTaskCode: 'Task Code',
dialogTaskCodePlaceholder: 'Please input task code',
dialogBaogongTotal: 'Report Total',
dialogAvgCapacity: 'Avg Report Capacity',
dialogSearchButtonText: 'Search',
dialogResetButtonText: 'Reset',
exportFilename: 'Capacity Report.xls'
},
// Critical Component

@ -1343,14 +1343,27 @@ export default {
deviceType: '设备类型',
deviceStatus: '设备状态',
workshop: '所属车间',
ratedCapacity: '额定产能',
ratedCapacity: '额定产能(计划产能)',
reportCapacity: '报工产能',
reportCapacityTooltip: '近半年的数据均值',
reportCapacityViewDetail: '查看明细',
actualCapacity: '实际产能',
placeholderDeviceCode: '请输入设备编码',
placeholderDeviceName: '请输入设备名称',
placeholderDeviceType: '请输入设备类型',
placeholderDeviceStatus: '请选择设备状态',
placeholderWorkshop: '请输入所属车间',
dialogTitlePrefix: '报工产能明细 - ',
dialogProductCode: '产品编码',
dialogProductCodePlaceholder: '请输入产品编码',
dialogProductName: '产品名称',
dialogProductNamePlaceholder: '请输入产品名称',
dialogTaskCode: '任务编码',
dialogTaskCodePlaceholder: '请输入任务编码',
dialogBaogongTotal: '报工总数',
dialogAvgCapacity: '报工均值产能',
dialogSearchButtonText: '搜索',
dialogResetButtonText: '重置',
exportFilename: '产能报表.xls'
},
// 设备关键件

@ -0,0 +1,140 @@
<template>
<Dialog v-model="dialogVisible" :title="dialogTitle" width="1200" :scroll="true" max-height="70vh" align-center>
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="auto">
<el-form-item :label="t('EquipmentManagement.CapacityReport.dialogProductCode')" prop="productCode">
<el-input
v-model="queryParams.productCode"
:placeholder="t('EquipmentManagement.CapacityReport.dialogProductCodePlaceholder')"
clearable
@keyup.enter="handleQuery"
class="!w-200px"
/>
</el-form-item>
<el-form-item :label="t('EquipmentManagement.CapacityReport.dialogProductName')" prop="productName">
<el-input
v-model="queryParams.productName"
:placeholder="t('EquipmentManagement.CapacityReport.dialogProductNamePlaceholder')"
clearable
@keyup.enter="handleQuery"
class="!w-200px"
/>
</el-form-item>
<el-form-item :label="t('EquipmentManagement.CapacityReport.dialogTaskCode')" prop="taskCode">
<el-input
v-model="queryParams.taskCode"
:placeholder="t('EquipmentManagement.CapacityReport.dialogTaskCodePlaceholder')"
clearable
@keyup.enter="handleQuery"
class="!w-200px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon icon="ep:search" class="mr-5px" />
{{ t('EquipmentManagement.CapacityReport.dialogSearchButtonText') }}
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px" />
{{ t('EquipmentManagement.CapacityReport.dialogResetButtonText') }}
</el-button>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" style="margin-top: 16px">
<el-table-column :label="t('EquipmentManagement.CapacityReport.dialogProductCode')" align="center" prop="productCode" />
<el-table-column :label="t('EquipmentManagement.CapacityReport.dialogProductName')" align="center" prop="productName" />
<el-table-column :label="t('EquipmentManagement.CapacityReport.dialogTaskCode')" align="center" prop="taskCode" />
<el-table-column :label="t('EquipmentManagement.CapacityReport.dialogBaogongTotal')" align="center" prop="baogongTotal" />
<el-table-column :label="t('EquipmentManagement.CapacityReport.dialogAvgCapacity')" align="center" prop="avgCapacity" />
</el-table>
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</Dialog>
</template>
<script setup lang="ts">
import { PlanApi } from '@/api/mes/plan'
const { t } = useI18n()
const props = defineProps<{
modelValue: boolean
deviceId?: number
deviceName?: string
}>()
const emit = defineEmits<{
(e: 'update:modelValue', value: boolean): void
}>()
const dialogVisible = computed({
get() {
return props.modelValue
},
set(value: boolean) {
emit('update:modelValue', value)
}
})
const dialogTitle = computed(() => {
const name = props.deviceName || '-'
return `${t('EquipmentManagement.CapacityReport.dialogTitlePrefix')}${name}`
})
const loading = ref(false)
const list = ref<any[]>([])
const total = ref(0)
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
deviceId: undefined as number | undefined,
productCode: undefined as string | undefined,
productName: undefined as string | undefined,
taskCode: undefined as string | undefined
})
const queryFormRef = ref()
const getList = async () => {
if (!props.deviceId) {
list.value = []
total.value = 0
return
}
loading.value = true
try {
const data = await PlanApi.getProductCapacityPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
const resetQuery = () => {
queryFormRef.value?.resetFields()
queryParams.deviceId = props.deviceId
handleQuery()
}
watch(
() => [props.modelValue, props.deviceId],
([visible, deviceId]) => {
if (!visible) return
queryParams.deviceId = deviceId as number
queryParams.pageNo = 1
queryParams.productCode = undefined
queryParams.productName = undefined
queryParams.taskCode = undefined
getList()
}
)
</script>

@ -1,50 +1,28 @@
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
min-label-width="80px"
>
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" min-label-width="80px">
<el-form-item :label="t('EquipmentManagement.CapacityReport.deviceCode')" prop="deviceCode">
<el-input
v-model="queryParams.deviceCode"
:placeholder="t('EquipmentManagement.CapacityReport.placeholderDeviceCode')"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
<el-input v-model="queryParams.deviceCode"
:placeholder="t('EquipmentManagement.CapacityReport.placeholderDeviceCode')" clearable
@keyup.enter="handleQuery" class="!w-240px" />
</el-form-item>
<el-form-item :label="t('EquipmentManagement.CapacityReport.deviceName')" prop="deviceName">
<el-input
v-model="queryParams.deviceName"
:placeholder="t('EquipmentManagement.CapacityReport.placeholderDeviceName')"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
<el-input v-model="queryParams.deviceName"
:placeholder="t('EquipmentManagement.CapacityReport.placeholderDeviceName')" clearable
@keyup.enter="handleQuery" class="!w-240px" />
</el-form-item>
<el-form-item :label="t('EquipmentManagement.CapacityReport.deviceType')" prop="deviceType">
<el-input
v-model="queryParams.deviceType"
:placeholder="t('EquipmentManagement.CapacityReport.placeholderDeviceType')"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
<el-input v-model="queryParams.deviceType"
:placeholder="t('EquipmentManagement.CapacityReport.placeholderDeviceType')" clearable
@keyup.enter="handleQuery" class="!w-240px" />
</el-form-item>
<el-form-item :label="t('EquipmentManagement.CapacityReport.workshop')" prop="workshop" v-show="showAllFilters">
<el-input
v-model="queryParams.workshop"
:placeholder="t('EquipmentManagement.CapacityReport.placeholderWorkshop')"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
<el-input v-model="queryParams.workshop"
:placeholder="t('EquipmentManagement.CapacityReport.placeholderWorkshop')" clearable
@keyup.enter="handleQuery" class="!w-240px" />
</el-form-item>
<el-form-item v-if="filterCount > 3">
<el-button type="text" class="text-primary" @click="toggleFilters">
<Icon :icon="showAllFilters ? 'ep:arrow-up' : 'ep:arrow-down'" class="mr-5px" />
@ -52,7 +30,7 @@
t('FactoryModeling.FactoryStructure.expandText') }}
</el-button>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon icon="ep:search" class="mr-5px" /> {{ t('common.query') }}
@ -69,37 +47,49 @@
<!-- 列表 -->
<ContentWrap>
<el-table
v-loading="loading"
:data="list"
:stripe="true"
:show-overflow-tooltip="true"
:row-key="(row) => row.id"
@select-all="handleSelectAll"
@select="handleSelect"
>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" :row-key="(row) => row.id"
@select-all="handleSelectAll" @select="handleSelect">
<el-table-column type="selection" width="55" align="center" />
<el-table-column :label="t('EquipmentManagement.CapacityReport.deviceCode')" align="center" prop="deviceCode" sortable />
<el-table-column :label="t('EquipmentManagement.CapacityReport.deviceName')" align="center" prop="deviceName" sortable />
<el-table-column :label="t('EquipmentManagement.CapacityReport.deviceType')" align="center" prop="typeName" sortable />
<el-table-column :label="t('EquipmentManagement.CapacityReport.ratedCapacity')" align="center" prop="ratedCapacity" sortable />
<el-table-column :label="t('EquipmentManagement.CapacityReport.reportCapacity')" align="center" prop="reportCapacity" sortable />
<el-table-column :label="t('EquipmentManagement.CapacityReport.actualCapacity')" align="center" prop="actualCapacity" sortable />
<el-table-column :label="t('EquipmentManagement.CapacityReport.workshop')" align="center" prop="workshopName" sortable />
<el-table-column :label="t('EquipmentManagement.CapacityReport.deviceCode')" align="center" prop="deviceCode"
sortable />
<el-table-column :label="t('EquipmentManagement.CapacityReport.deviceName')" align="center" prop="deviceName"
sortable />
<el-table-column :label="t('EquipmentManagement.CapacityReport.deviceType')" align="center" prop="typeName"
sortable />
<el-table-column :label="t('EquipmentManagement.CapacityReport.ratedCapacity')" align="center"
prop="ratedCapacity" sortable />
<el-table-column align="center" prop="reportCapacity">
<template #header>
<span>{{ t('EquipmentManagement.CapacityReport.reportCapacity') }}</span>
<el-tooltip :content="t('EquipmentManagement.CapacityReport.reportCapacityTooltip')" placement="top">
<Icon icon="ep:question-filled" class="ml-4px"
style="vertical-align: middle; color: var(--el-text-color-secondary)" />
</el-tooltip>
</template>
<template #default="scope">
<el-button link type="primary" @click="openProductCapacity(scope.row)">
{{ t('EquipmentManagement.CapacityReport.reportCapacityViewDetail') }}
</el-button>
</template>
</el-table-column>
<el-table-column :label="t('EquipmentManagement.CapacityReport.actualCapacity')" align="center"
prop="actualCapacity" sortable />
<el-table-column :label="t('EquipmentManagement.CapacityReport.workshop')" align="center" prop="workshopName"
sortable />
</el-table>
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
<Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
@pagination="getList" />
</ContentWrap>
<ProductCapacityDialog v-model="productCapacityVisible" :device-id="productCapacityDeviceId"
:device-name="productCapacityDeviceName" />
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import download from '@/utils/download'
import { DeviceLedgerApi, CapacityReportVO } from '@/api/mes/device-ledger'
import ProductCapacityDialog from './ProductCapacityDialog.vue'
defineOptions({ name: 'CapacityReport' })
@ -122,6 +112,15 @@ const exportLoading = ref(false)
const showAllFilters = ref(false) //
const filterCount = 4 //
const selectedIds = ref<number[]>([])
const productCapacityVisible = ref(false)
const productCapacityDeviceId = ref<number>()
const productCapacityDeviceName = ref<string>()
const openProductCapacity = (row: CapacityReportVO) => {
productCapacityDeviceId.value = row.id
productCapacityDeviceName.value = row.deviceName
productCapacityVisible.value = true
}
/** 切换筛选框展开/折叠 */
const toggleFilters = () => {

Loading…
Cancel
Save