fengyuan_yang
12 hours ago
4 changed files with 590 additions and 18 deletions
-
22src/views/modules/yieldReport/com_produce_report_normal.vue
-
475src/views/modules/yieldReport/com_tid_get_shift.vue
-
9src/views/modules/yieldReport/com_tid_upload_mt_log.vue
-
102src/views/modules/yieldReport/com_tid_upload_order.vue
@ -0,0 +1,475 @@ |
|||||
|
<template> |
||||
|
<div class="customer-css"> |
||||
|
<el-dialog |
||||
|
:title="titleCon" |
||||
|
v-drag |
||||
|
width="1200px" |
||||
|
top="4vh" |
||||
|
custom-class="machine-workbench-dialog" |
||||
|
:close-on-click-modal="false" |
||||
|
v-bind="$attrs" |
||||
|
v-on="$listeners" |
||||
|
@closed="handleDialogClosed"> |
||||
|
<div class="get-shift-layout" :style="{ height: layoutHeight + 'px' }"> |
||||
|
<div class="shift-panel"> |
||||
|
<div class="panel-header"> |
||||
|
<span>{{ queryForm.type === 'MT' ? 'MT班次数据' : '班次数据' }}</span> |
||||
|
<el-button type="text" size="mini" @click="loadMesShiftData()" :loading="shiftLoading">刷新班次</el-button> |
||||
|
</div> |
||||
|
<div class="summary-grid"> |
||||
|
<div class="summary-item"> |
||||
|
<div class="summary-label">成功卷数</div> |
||||
|
<div class="summary-value">{{ getMesFieldValue('rollCountSuccess') }}</div> |
||||
|
</div> |
||||
|
<div class="summary-item"> |
||||
|
<div class="summary-label">失败卷数</div> |
||||
|
<div class="summary-value">{{ getMesFieldValue('rollCountFail') }}</div> |
||||
|
</div> |
||||
|
<div class="summary-item"> |
||||
|
<div class="summary-label">上传总数</div> |
||||
|
<div class="summary-value">{{ getMesFieldValue('quantityTotal') }}</div> |
||||
|
</div> |
||||
|
<div class="summary-item"> |
||||
|
<div class="summary-label">良品数</div> |
||||
|
<div class="summary-value">{{ getMesFieldValue('quantityGood') }}</div> |
||||
|
</div> |
||||
|
<div class="summary-item"> |
||||
|
<div class="summary-label">不良数</div> |
||||
|
<div class="summary-value">{{ getMesFieldValue('quantityBad') }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<el-table |
||||
|
:data="mesShiftLogs" |
||||
|
border |
||||
|
:height="leftTableHeight" |
||||
|
v-loading="shiftLoading" |
||||
|
style="width: 100%; margin-top: 10px;"> |
||||
|
<el-table-column prop="filename" label="文件名" min-width="180" show-overflow-tooltip></el-table-column> |
||||
|
<el-table-column label="状态" width="90" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-tag :type="getLogStatusType(scope.row.status)"> |
||||
|
{{ Number(scope.row.status) === 1 ? '成功' : '失败' }} |
||||
|
</el-tag> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="message" label="结果" min-width="140" show-overflow-tooltip></el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
|
||||
|
<div class="query-panel"> |
||||
|
<div class="panel-card config-card"> |
||||
|
<div class="panel-header panel-header-card"> |
||||
|
<span class="panel-title"><i class="el-icon-data-analysis"></i>查询条件</span> |
||||
|
</div> |
||||
|
<el-form label-position="top" label-width="90px" class="query-form"> |
||||
|
<el-row :gutter="10"> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="日志类型"> |
||||
|
<el-select v-model="queryForm.type" style="width: 100%;" @change="handleTypeChange"> |
||||
|
<el-option label="订单日志" value=""></el-option> |
||||
|
<el-option label="MT日志" value="MT"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="机器账号"> |
||||
|
<el-input v-model="queryForm.machineNo" readonly></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<el-row :gutter="10"> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="班次"> |
||||
|
<el-input v-model="queryForm.shift" readonly></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="日期"> |
||||
|
<el-input v-model="queryForm.date" readonly></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
|
||||
|
<div class="query-tip-wrap"> |
||||
|
<div class="query-tip-title">说明</div> |
||||
|
<div class="query-tip-text">- 日志类型切换后会自动刷新班次数据</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="closeDialog" size="small">关闭</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getMesShiftData, getScheduleDateShift } from '@/api/yieldReport/produce_report_normal.js' |
||||
|
|
||||
|
export default { |
||||
|
data () { |
||||
|
return { |
||||
|
titleCon: '获取班次', |
||||
|
shiftLoading: false, |
||||
|
pageData: { |
||||
|
site: '', |
||||
|
resourceId: '', |
||||
|
resourceDesc: '', |
||||
|
shiftNo: '' |
||||
|
}, |
||||
|
queryForm: { |
||||
|
machineNo: '', |
||||
|
shift: '', |
||||
|
date: '', |
||||
|
type: '' |
||||
|
}, |
||||
|
mesShiftData: {}, |
||||
|
mesShiftLogs: [], |
||||
|
layoutHeight: 560, |
||||
|
leftTableHeight: 340 |
||||
|
} |
||||
|
}, |
||||
|
mounted () { |
||||
|
this.updateDialogLayout() |
||||
|
window.addEventListener('resize', this.updateDialogLayout) |
||||
|
}, |
||||
|
beforeDestroy () { |
||||
|
window.removeEventListener('resize', this.updateDialogLayout) |
||||
|
}, |
||||
|
methods: { |
||||
|
async init (scheduleData) { |
||||
|
this.pageData = { |
||||
|
site: scheduleData.site || '', |
||||
|
resourceId: scheduleData.resourceId || '', |
||||
|
resourceDesc: scheduleData.resourceDesc || '', |
||||
|
shiftNo: scheduleData.shiftNo || '' |
||||
|
} |
||||
|
|
||||
|
this.queryForm.machineNo = scheduleData.resourceId || scheduleData.resourceDesc || '' |
||||
|
this.queryForm.shift = scheduleData.shiftNo || '' |
||||
|
this.queryForm.date = this.getTodayDateString() |
||||
|
this.queryForm.type = '' |
||||
|
this.mesShiftData = {} |
||||
|
this.mesShiftLogs = [] |
||||
|
|
||||
|
this.updateDialogLayout() |
||||
|
await this.loadCurrentScheduleShift() |
||||
|
await this.loadMesShiftData(true) |
||||
|
}, |
||||
|
|
||||
|
updateDialogLayout () { |
||||
|
const viewportHeight = window.innerHeight || 900 |
||||
|
let nextLayoutHeight = viewportHeight - 230 |
||||
|
if (nextLayoutHeight > 620) { |
||||
|
nextLayoutHeight = 620 |
||||
|
} |
||||
|
if (nextLayoutHeight < 500) { |
||||
|
nextLayoutHeight = 500 |
||||
|
} |
||||
|
this.layoutHeight = nextLayoutHeight |
||||
|
|
||||
|
let nextLeftTableHeight = nextLayoutHeight - 230 |
||||
|
if (nextLeftTableHeight < 220) { |
||||
|
nextLeftTableHeight = 220 |
||||
|
} |
||||
|
this.leftTableHeight = nextLeftTableHeight |
||||
|
}, |
||||
|
|
||||
|
getCurrentDateTimeString () { |
||||
|
const now = new Date() |
||||
|
const year = now.getFullYear() |
||||
|
const month = this.padZero(now.getMonth() + 1) |
||||
|
const day = this.padZero(now.getDate()) |
||||
|
const hour = this.padZero(now.getHours()) |
||||
|
const minute = this.padZero(now.getMinutes()) |
||||
|
const second = this.padZero(now.getSeconds()) |
||||
|
return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second |
||||
|
}, |
||||
|
|
||||
|
getTodayDateString () { |
||||
|
return this.formatDateValue(new Date()) |
||||
|
}, |
||||
|
|
||||
|
formatDateValue (dateObj) { |
||||
|
const year = dateObj.getFullYear() |
||||
|
const month = dateObj.getMonth() + 1 |
||||
|
const day = dateObj.getDate() |
||||
|
return year + '-' + this.padZero(month) + '-' + this.padZero(day) |
||||
|
}, |
||||
|
|
||||
|
padZero (value) { |
||||
|
return value < 10 ? '0' + value : '' + value |
||||
|
}, |
||||
|
|
||||
|
getShiftValueForApi () { |
||||
|
return this.queryForm.shift ? String(this.queryForm.shift).trim() : '' |
||||
|
}, |
||||
|
|
||||
|
async loadCurrentScheduleShift () { |
||||
|
if (!this.pageData.site || !this.pageData.resourceId) { |
||||
|
return |
||||
|
} |
||||
|
this.queryForm.date = this.getTodayDateString() |
||||
|
const params = { |
||||
|
site: this.pageData.site, |
||||
|
resourceId: this.pageData.resourceId, |
||||
|
currentDateTime: this.getCurrentDateTimeString() |
||||
|
} |
||||
|
try { |
||||
|
const { data } = await getScheduleDateShift(params) |
||||
|
const map = (data && data.map) || {} |
||||
|
const shiftNo = map.ShiftNo || map.shiftNo || '' |
||||
|
if (shiftNo) { |
||||
|
this.queryForm.shift = shiftNo |
||||
|
} |
||||
|
} catch (e) { |
||||
|
this.$message.warning(this.extractErrorMessage(e, '获取当前班次失败')) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
async loadMesShiftData (showWarning = true) { |
||||
|
if (!this.queryForm.machineNo) { |
||||
|
this.mesShiftData = {} |
||||
|
this.mesShiftLogs = [] |
||||
|
return |
||||
|
} |
||||
|
const currentDate = this.getTodayDateString() |
||||
|
const shiftValue = this.getShiftValueForApi() |
||||
|
this.queryForm.date = currentDate |
||||
|
const params = { |
||||
|
machineNo: this.queryForm.machineNo, |
||||
|
date: currentDate, |
||||
|
shift: shiftValue, |
||||
|
type: this.queryForm.type || '' |
||||
|
} |
||||
|
this.shiftLoading = true |
||||
|
try { |
||||
|
const { data } = await getMesShiftData(params) |
||||
|
if (data && data.code === 0) { |
||||
|
this.mesShiftData = data.row || {} |
||||
|
this.mesShiftLogs = Array.isArray(this.mesShiftData.logs) ? this.mesShiftData.logs : [] |
||||
|
} else { |
||||
|
this.mesShiftData = {} |
||||
|
this.mesShiftLogs = [] |
||||
|
if (showWarning) { |
||||
|
this.$message.warning((data && data.msg) || '获取班次数据失败') |
||||
|
} |
||||
|
} |
||||
|
} catch (e) { |
||||
|
this.mesShiftData = {} |
||||
|
this.mesShiftLogs = [] |
||||
|
if (showWarning) { |
||||
|
this.$message.error(this.extractErrorMessage(e, '获取班次数据失败')) |
||||
|
} |
||||
|
} finally { |
||||
|
this.shiftLoading = false |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
handleTypeChange () { |
||||
|
this.loadMesShiftData(true) |
||||
|
}, |
||||
|
|
||||
|
getMesFieldValue (fieldName) { |
||||
|
if (!this.mesShiftData || this.mesShiftData[fieldName] === undefined || this.mesShiftData[fieldName] === null || this.mesShiftData[fieldName] === '') { |
||||
|
return '-' |
||||
|
} |
||||
|
return this.mesShiftData[fieldName] |
||||
|
}, |
||||
|
|
||||
|
getLogStatusType (status) { |
||||
|
return Number(status) === 1 ? 'success' : 'danger' |
||||
|
}, |
||||
|
|
||||
|
extractErrorMessage (error, defaultMessage) { |
||||
|
if (error && error.response && error.response.data) { |
||||
|
const responseData = error.response.data |
||||
|
if (typeof responseData === 'string') { |
||||
|
return responseData |
||||
|
} |
||||
|
return responseData.msg || responseData.message || defaultMessage |
||||
|
} |
||||
|
if (error && error.message) { |
||||
|
return error.message |
||||
|
} |
||||
|
return defaultMessage |
||||
|
}, |
||||
|
|
||||
|
closeDialog () { |
||||
|
this.$emit('update:visible', false) |
||||
|
}, |
||||
|
|
||||
|
handleDialogClosed () { |
||||
|
this.mesShiftData = {} |
||||
|
this.mesShiftLogs = [] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.get-shift-layout { |
||||
|
display: flex; |
||||
|
gap: 10px; |
||||
|
align-items: stretch; |
||||
|
} |
||||
|
|
||||
|
.shift-panel { |
||||
|
width: 62%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.query-panel { |
||||
|
width: 38%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.panel-card, |
||||
|
.shift-panel { |
||||
|
background: #ffffff; |
||||
|
border: 1px solid #dfe6ee; |
||||
|
border-radius: 8px; |
||||
|
padding: 10px; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.panel-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
font-weight: 600; |
||||
|
color: #2f3b4f; |
||||
|
} |
||||
|
|
||||
|
.panel-title { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
font-size: 15px; |
||||
|
} |
||||
|
|
||||
|
.panel-title i { |
||||
|
margin-right: 6px; |
||||
|
color: #18a5a3; |
||||
|
} |
||||
|
|
||||
|
.panel-header-card { |
||||
|
margin-bottom: 8px; |
||||
|
padding-bottom: 6px; |
||||
|
border-bottom: 1px solid #edf1f7; |
||||
|
} |
||||
|
|
||||
|
.shift-panel /deep/ .el-button--text { |
||||
|
color: #18a5a3; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.summary-grid { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(2, minmax(0, 1fr)); |
||||
|
gap: 8px; |
||||
|
margin-top: 8px; |
||||
|
} |
||||
|
|
||||
|
.summary-item { |
||||
|
border: 1px solid #edf2f7; |
||||
|
border-left: 3px solid #18a5a3; |
||||
|
border-radius: 6px; |
||||
|
padding: 8px; |
||||
|
background: #fcfdff; |
||||
|
min-height: 54px; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.summary-label { |
||||
|
font-size: 12px; |
||||
|
color: #7c8797; |
||||
|
} |
||||
|
|
||||
|
.summary-value { |
||||
|
margin-top: 4px; |
||||
|
font-size: 16px; |
||||
|
color: #1f2d3d; |
||||
|
font-weight: 700; |
||||
|
line-height: 1; |
||||
|
} |
||||
|
|
||||
|
.shift-panel /deep/ .el-table { |
||||
|
margin-top: 12px; |
||||
|
} |
||||
|
|
||||
|
.query-form { |
||||
|
margin-bottom: 4px; |
||||
|
} |
||||
|
|
||||
|
.query-tip-wrap { |
||||
|
margin-top: 8px; |
||||
|
padding: 10px; |
||||
|
border: 1px dashed #d5dde8; |
||||
|
border-radius: 6px; |
||||
|
background: #fafcfe; |
||||
|
} |
||||
|
|
||||
|
.query-tip-title { |
||||
|
font-size: 13px; |
||||
|
font-weight: 600; |
||||
|
color: #44536a; |
||||
|
margin-bottom: 6px; |
||||
|
} |
||||
|
|
||||
|
.query-tip-text { |
||||
|
font-size: 12px; |
||||
|
color: #66758d; |
||||
|
line-height: 18px; |
||||
|
} |
||||
|
|
||||
|
.query-panel /deep/ .el-form-item { |
||||
|
margin-bottom: 6px; |
||||
|
} |
||||
|
|
||||
|
.query-panel /deep/ .el-form-item__label { |
||||
|
padding-bottom: 2px; |
||||
|
line-height: 18px; |
||||
|
color: #627089; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.shift-panel /deep/ .el-table td { |
||||
|
padding-top: 8px !important; |
||||
|
padding-bottom: 8px !important; |
||||
|
} |
||||
|
|
||||
|
.shift-panel /deep/ .el-table .cell { |
||||
|
height: auto !important; |
||||
|
line-height: 20px !important; |
||||
|
} |
||||
|
|
||||
|
.shift-panel /deep/ .el-tag { |
||||
|
height: 20px; |
||||
|
line-height: 18px; |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1280px) { |
||||
|
.get-shift-layout { |
||||
|
flex-direction: column; |
||||
|
height: auto !important; |
||||
|
} |
||||
|
|
||||
|
.shift-panel, |
||||
|
.query-panel { |
||||
|
width: 100%; |
||||
|
height: auto; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue