SunYF
e852c7cd37
1. 废弃半成品库存表并统一库存主表 2. 修复列表排序与搜索大小写不敏感问题 3. 新增用户最近登录时间、工单BOM名称字段 4. 完善角色管理、工位选择器功能 5. 增加拧紧数据补录、成品自动回流WMS能力 6. 统一导出时间范围校验规则 7. 丰富物料/备料单筛选条件 8. 调整菜单与权限命名适配产品型号业务
219 lines
8.8 KiB
Vue
219 lines
8.8 KiB
Vue
<template>
|
||
<el-card>
|
||
<el-form inline>
|
||
<el-form-item label="操作人">
|
||
<el-input v-model="query.operator" placeholder="输入操作人" clearable style="width:180px" @keyup.enter="load" />
|
||
</el-form-item>
|
||
<el-form-item label="工位">
|
||
<el-select v-model="query.stationNo" clearable placeholder="全部工位" style="width:130px">
|
||
<el-option v-for="i in 12" :key="i" :label="`工位${i}`" :value="String(i)" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="日期范围">
|
||
<el-date-picker
|
||
v-model="query.range"
|
||
type="daterange"
|
||
value-format="YYYY-MM-DD"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
style="width:260px"
|
||
@change="load" />
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="load">查询</el-button>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="success" @click="exportXlsx">导出 xlsx（三 sheet）</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<!-- 汇总卡（按人聚合是全量推算的分页首页，统计卡随查询刷新） -->
|
||
<el-row :gutter="16" style="margin-bottom:14px">
|
||
<el-col :span="6">
|
||
<el-card shadow="never" class="stat-card">
|
||
<div class="stat-label">总完成数</div>
|
||
<div class="stat-value">{{ summary.doneCount }}</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-card shadow="never" class="stat-card">
|
||
<div class="stat-label">总合格数</div>
|
||
<div class="stat-value ok">{{ summary.okCount }}</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-card shadow="never" class="stat-card">
|
||
<div class="stat-label">总NG数</div>
|
||
<div class="stat-value ng">{{ summary.ngCount }}</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-card shadow="never" class="stat-card">
|
||
<div class="stat-label">总合格率</div>
|
||
<div class="stat-value">{{ summary.rate }}</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-tabs v-model="activeTab">
|
||
<!-- 按人 -->
|
||
<el-tab-pane label="按人" name="byOperator">
|
||
<el-table :data="views.byOperator.list" border size="small">
|
||
<el-table-column prop="operator" label="操作人" min-width="130" />
|
||
<el-table-column prop="doneCount" label="完成数" width="110" align="right" />
|
||
<el-table-column prop="okCount" label="合格数" width="110" align="right" />
|
||
<el-table-column prop="ngCount" label="NG数" width="110" align="right" />
|
||
<el-table-column label="合格率" width="110" align="center">
|
||
<template #default="{ row }">
|
||
<el-tag :type="rateOf(row) >= 100 ? 'success' : (rateOf(row) >= 0 ? 'warning' : 'info')" effect="plain">
|
||
{{ rateText(row) }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination style="margin-top:12px;justify-content:flex-end" background layout="total, prev, pager, next"
|
||
:total="views.byOperator.total" :page-size="pageSize" v-model:current-page="views.byOperator.page"
|
||
@current-change="load" />
|
||
</el-tab-pane>
|
||
|
||
<!-- 按工位 -->
|
||
<el-tab-pane label="按工位" name="byStation">
|
||
<el-table :data="views.byStation.list" border size="small">
|
||
<el-table-column prop="stationNo" label="工位" width="90" align="center" />
|
||
<el-table-column prop="doneCount" label="完成数" width="110" align="right" />
|
||
<el-table-column prop="okCount" label="合格数" width="110" align="right" />
|
||
<el-table-column prop="ngCount" label="NG数" width="110" align="right" />
|
||
<el-table-column label="合格率" width="110" align="center">
|
||
<template #default="{ row }">
|
||
<el-tag :type="rateOf(row) >= 100 ? 'success' : (rateOf(row) >= 0 ? 'warning' : 'info')" effect="plain">
|
||
{{ rateText(row) }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination style="margin-top:12px;justify-content:flex-end" background layout="total, prev, pager, next"
|
||
:total="views.byStation.total" :page-size="pageSize" v-model:current-page="views.byStation.page"
|
||
@current-change="load" />
|
||
</el-tab-pane>
|
||
|
||
<!-- 明细 -->
|
||
<el-tab-pane label="明细" name="detail">
|
||
<el-table :data="views.detail.list" border size="small">
|
||
<el-table-column prop="operator" label="操作人" min-width="110" />
|
||
<el-table-column prop="date" label="日期" width="110" />
|
||
<el-table-column prop="stationNo" label="工位" width="80" align="center" />
|
||
<el-table-column prop="processName" label="工序名" min-width="130" show-overflow-tooltip />
|
||
<el-table-column prop="doneCount" label="完成数" width="90" align="right" />
|
||
<el-table-column prop="okCount" label="合格数" width="90" align="right" />
|
||
<el-table-column prop="ngCount" label="NG数" width="90" align="right" />
|
||
<el-table-column label="合格率" width="100" align="center">
|
||
<template #default="{ row }">
|
||
<el-tag :type="rateOf(row) >= 100 ? 'success' : (rateOf(row) >= 0 ? 'warning' : 'info')" effect="plain">
|
||
{{ rateText(row) }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination style="margin-top:12px;justify-content:flex-end" background layout="total, prev, pager, next"
|
||
:total="views.detail.total" :page-size="pageSize" v-model:current-page="views.detail.page"
|
||
@current-change="load" />
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</el-card>
|
||
<PageHelp :data="helpPerformance" page="Performance" />
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, computed, onMounted } from 'vue'
|
||
import { ElMessage } from 'element-plus'
|
||
import PageHelp from '../components/PageHelp.vue'
|
||
import { helpPerformance } from '../help'
|
||
import request from '../utils/request'
|
||
|
||
// 后端三视图各自真分页（默认20）：byOperator/byStation/detail 各带 {total, list}
|
||
const activeTab = ref('byOperator')
|
||
const pageSize = ref(20)
|
||
const query = reactive({ operator: '', stationNo: '', range: null })
|
||
const views = reactive({
|
||
byOperator: { total: 0, page: 1, list: [] },
|
||
byStation: { total: 0, page: 1, list: [] },
|
||
detail: { total: 0, page: 1, list: [] }
|
||
})
|
||
|
||
const summary = computed(() => {
|
||
let doneCount = 0, okCount = 0, ngCount = 0
|
||
views.byOperator.list.forEach((r) => {
|
||
doneCount += Number(r.doneCount) || 0
|
||
okCount += Number(r.okCount) || 0
|
||
ngCount += Number(r.ngCount) || 0
|
||
})
|
||
return {
|
||
doneCount, okCount, ngCount,
|
||
rate: doneCount ? ((okCount / doneCount) * 100).toFixed(1) + '%' : '-'
|
||
}
|
||
})
|
||
|
||
function rateOf(row) {
|
||
const done = Number(row.doneCount) || 0
|
||
const ok = Number(row.okCount) || 0
|
||
return done ? (ok / done) * 100 : -1
|
||
}
|
||
function rateText(row) {
|
||
const r = rateOf(row)
|
||
return r < 0 ? '-' : r.toFixed(1) + '%'
|
||
}
|
||
|
||
function defaultRange() {
|
||
const d = new Date()
|
||
const p = (n) => String(n).padStart(2, '0')
|
||
const end = `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`
|
||
const s = new Date(d.getTime() - 90 * 24 * 3600 * 1000)
|
||
return [`${s.getFullYear()}-${p(s.getMonth() + 1)}-${p(s.getDate())}`, end]
|
||
}
|
||
if (!query.range) query.range = defaultRange()
|
||
|
||
async function load() {
|
||
const [from, to] = query.range || []
|
||
const params = {
|
||
operator: query.operator || '',
|
||
stationNo: query.stationNo || '',
|
||
from: from || '',
|
||
to: to || '',
|
||
opPage: views.byOperator.page, opPageSize: pageSize.value,
|
||
stPage: views.byStation.page, stPageSize: pageSize.value,
|
||
detPage: views.detail.page, detPageSize: pageSize.value
|
||
}
|
||
const data = (await request.get('/performance', { params })) || {}
|
||
for (const k of ['byOperator', 'byStation', 'detail']) {
|
||
const v = data[k] || {}
|
||
views[k].total = v.total || 0
|
||
views[k].list = v.list || []
|
||
}
|
||
}
|
||
|
||
// 导出：后端一个 xlsx 三个 sheet（按人/按工位/明细），执行统一导出时间硬规则
|
||
async function exportXlsx() {
|
||
const [from, to] = query.range || []
|
||
const params = {
|
||
operator: query.operator || '', stationNo: query.stationNo || '',
|
||
startDate: from || '', endDate: to || ''
|
||
}
|
||
const blob = await request.get('/performance/export', { params, responseType: 'blob' })
|
||
const a = document.createElement('a')
|
||
a.href = URL.createObjectURL(blob)
|
||
a.download = '绩效报表.xlsx'
|
||
a.click()
|
||
URL.revokeObjectURL(a.href)
|
||
}
|
||
|
||
onMounted(load)
|
||
</script>
|
||
|
||
<style scoped>
|
||
.stat-card { text-align: center; }
|
||
.stat-label { color: #909399; font-size: 13px; margin-bottom: 6px; }
|
||
.stat-value { font-size: 26px; font-weight: 700; color: #303133; }
|
||
.stat-value.ok { color: #67c23a; }
|
||
.stat-value.ng { color: #f56c6c; }
|
||
</style>
|