fengyuan_yang
14 hours ago
4 changed files with 955 additions and 16 deletions
-
6src/api/yieldReport/produce_report_normal.js
-
153src/views/modules/yieldReport/com_produce_report_normal.vue
-
778src/views/modules/yieldReport/com_tid_upload_mt_log.vue
-
34src/views/modules/yieldReport/com_tid_upload_order.vue
@ -0,0 +1,778 @@ |
|||
<template> |
|||
<div class="customer-css"> |
|||
<el-dialog |
|||
:title="titleCon" |
|||
v-drag |
|||
width="1280px" |
|||
top="4vh" |
|||
custom-class="machine-workbench-dialog" |
|||
:close-on-click-modal="false" |
|||
v-bind="$attrs" |
|||
v-on="$listeners" |
|||
@closed="handleDialogClosed"> |
|||
<div class="upload-mt-layout" :style="{ height: layoutHeight + 'px' }"> |
|||
<div class="shift-panel"> |
|||
<div class="panel-header"> |
|||
<span>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="upload-panel"> |
|||
<div class="panel-card config-card"> |
|||
<div class="panel-header panel-header-card"> |
|||
<span class="panel-title"><i class="el-icon-document-copy"></i>上传配置</span> |
|||
</div> |
|||
<el-form label-position="top" label-width="90px" class="upload-form"> |
|||
<el-row :gutter="10"> |
|||
<el-col :span="8"> |
|||
<el-form-item label="机器账号"> |
|||
<el-input v-model="uploadForm.machineNo" readonly></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="班次"> |
|||
<el-input v-model="uploadForm.shift" readonly></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="日期"> |
|||
<el-input v-model="uploadForm.date" readonly></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<div class="panel-card upload-drop-card"> |
|||
<div class="upload-field-label">MT日志文件（支持多选）</div> |
|||
<div class="upload-zone-wrap"> |
|||
<input |
|||
ref="mtFileInput" |
|||
class="upload-file-input" |
|||
type="file" |
|||
multiple |
|||
accept=".txt,.log" |
|||
@change="handleMtFileInputChange"> |
|||
<div |
|||
class="upload-drop-zone" |
|||
@click="triggerMtFileSelect" |
|||
@dragover.prevent |
|||
@dragenter.prevent |
|||
@drop.prevent="handleMtFileDrop"> |
|||
<i class="el-icon-upload"></i> |
|||
<div class="upload-main-text">将文件拖到此处，或<em>点击上传</em></div> |
|||
</div> |
|||
<div class="upload-tip-text">可一次选择多个日志文件，保存时会逐个上传</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="upload-list-row"> |
|||
<div class="panel-card selected-file-wrap"> |
|||
<div class="panel-header list-header"> |
|||
<span>待上传文件</span> |
|||
<span>共 {{ uploadMtFileList.length }} 个</span> |
|||
</div> |
|||
<el-table :data="uploadMtFileList" border :height="rightTableHeight" style="width: 100%;"> |
|||
<el-table-column label="文件名" header-align="center" min-width="180" show-overflow-tooltip> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.name }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="大小(KB)" header-align="center" width="70" align="right"> |
|||
<template slot-scope="scope"> |
|||
{{ formatFileSize(scope.row.size) }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column fixed="right" label="操作" width="70" header-align="center" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-link style="cursor: pointer" @click="removePendingUploadFile(scope.$index)">移除</el-link> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<div class="panel-card upload-result-wrap"> |
|||
<div class="panel-header list-header"> |
|||
<span>上传结果</span> |
|||
</div> |
|||
<el-table :data="uploadResults" border :height="rightTableHeight" style="width: 100%;"> |
|||
<el-table-column prop="fileName" header-align="center" label="文件名" min-width="150" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="statusText" header-align="center" label="状态" width="70" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-tag :type="scope.row.success ? 'success' : 'danger'"> |
|||
{{ scope.row.statusText }} |
|||
</el-tag> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="message" label="信息" header-align="center" min-width="100" show-overflow-tooltip></el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="closeDialog" size="small">关闭</el-button> |
|||
<el-button type="primary" :loading="saveLoading" @click="saveUploadMtLog" size="small">保存上传</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getMesShiftData, uploadMesMtLog, getScheduleDateShift } from '@/api/yieldReport/produce_report_normal.js' |
|||
|
|||
export default { |
|||
data () { |
|||
return { |
|||
titleCon: '上传MT日志', |
|||
saveLoading: false, |
|||
shiftLoading: false, |
|||
pageData: { |
|||
site: '', |
|||
resourceId: '', |
|||
resourceDesc: '', |
|||
shiftNo: '' |
|||
}, |
|||
uploadForm: { |
|||
machineNo: '', |
|||
shift: '', |
|||
date: '' |
|||
}, |
|||
mesShiftData: {}, |
|||
mesShiftLogs: [], |
|||
uploadMtFileList: [], |
|||
uploadResults: [], |
|||
uploadFileUid: 1, |
|||
layoutHeight: 560, |
|||
leftTableHeight: 340, |
|||
rightTableHeight: 150 |
|||
} |
|||
}, |
|||
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.uploadForm.machineNo = scheduleData.resourceId || scheduleData.resourceDesc || '' |
|||
this.uploadForm.shift = scheduleData.shiftNo || 'A' |
|||
this.uploadForm.date = this.getTodayDateString() |
|||
this.mesShiftData = {} |
|||
this.mesShiftLogs = [] |
|||
this.uploadMtFileList = [] |
|||
this.uploadResults = [] |
|||
|
|||
this.updateDialogLayout() |
|||
await this.loadCurrentScheduleShift() |
|||
await this.loadMesShiftData(false) |
|||
}, |
|||
|
|||
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 |
|||
|
|||
let nextRightTableHeight = nextLayoutHeight - 370 |
|||
if (nextRightTableHeight < 120) { |
|||
nextRightTableHeight = 120 |
|||
} |
|||
this.rightTableHeight = nextRightTableHeight |
|||
}, |
|||
|
|||
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 () { |
|||
const shiftValue = this.uploadForm.shift ? String(this.uploadForm.shift).trim() : '' |
|||
const finalShift = shiftValue || 'A' |
|||
if (this.uploadForm.shift !== finalShift) { |
|||
this.uploadForm.shift = finalShift |
|||
} |
|||
return finalShift |
|||
}, |
|||
|
|||
async loadCurrentScheduleShift () { |
|||
if (!this.pageData.site || !this.pageData.resourceId) { |
|||
return |
|||
} |
|||
this.uploadForm.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.uploadForm.shift = shiftNo |
|||
} |
|||
} catch (e) { |
|||
// keep fallback shift value when lookup fails |
|||
} |
|||
}, |
|||
|
|||
async loadMesShiftData (showWarning = true) { |
|||
if (!this.uploadForm.machineNo) { |
|||
this.mesShiftData = {} |
|||
this.mesShiftLogs = [] |
|||
return |
|||
} |
|||
const currentDate = this.getTodayDateString() |
|||
const shiftValue = this.getShiftValueForApi() |
|||
this.uploadForm.date = currentDate |
|||
const params = { |
|||
machineNo: this.uploadForm.machineNo, |
|||
date: currentDate, |
|||
shift: shiftValue, |
|||
type: 'MT' |
|||
} |
|||
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) || '获取MT班次数据失败') |
|||
} |
|||
} |
|||
} catch (e) { |
|||
this.mesShiftData = {} |
|||
this.mesShiftLogs = [] |
|||
if (showWarning) { |
|||
this.$message.error(this.extractErrorMessage(e, '获取MT班次数据失败')) |
|||
} |
|||
} finally { |
|||
this.shiftLoading = false |
|||
} |
|||
}, |
|||
|
|||
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' |
|||
}, |
|||
|
|||
triggerMtFileSelect () { |
|||
if (this.$refs.mtFileInput) { |
|||
this.$refs.mtFileInput.click() |
|||
} |
|||
}, |
|||
|
|||
handleMtFileInputChange (event) { |
|||
const files = event && event.target && event.target.files |
|||
? Array.prototype.slice.call(event.target.files) |
|||
: [] |
|||
this.appendUploadFiles(files) |
|||
if (event && event.target) { |
|||
event.target.value = '' |
|||
} |
|||
}, |
|||
|
|||
handleMtFileDrop (event) { |
|||
const files = event && event.dataTransfer && event.dataTransfer.files |
|||
? Array.prototype.slice.call(event.dataTransfer.files) |
|||
: [] |
|||
this.appendUploadFiles(files) |
|||
}, |
|||
|
|||
appendUploadFiles (files) { |
|||
if (!files || files.length === 0) { |
|||
return |
|||
} |
|||
const allowedExtMap = { |
|||
'.txt': true, |
|||
'.log': true |
|||
} |
|||
const keyMap = {} |
|||
for (let i = 0; i < this.uploadMtFileList.length; i++) { |
|||
const item = this.uploadMtFileList[i] |
|||
const itemKey = [item.name || '', item.size || 0, item.lastModified || 0].join('|') |
|||
keyMap[itemKey] = true |
|||
} |
|||
|
|||
let invalidCount = 0 |
|||
let duplicateCount = 0 |
|||
let addedCount = 0 |
|||
for (let i = 0; i < files.length; i++) { |
|||
const file = files[i] |
|||
const lowerName = (file.name || '').toLowerCase() |
|||
const ext = lowerName.lastIndexOf('.') > -1 ? lowerName.substring(lowerName.lastIndexOf('.')) : '' |
|||
if (!allowedExtMap[ext]) { |
|||
invalidCount++ |
|||
continue |
|||
} |
|||
const fileKey = [file.name || '', file.size || 0, file.lastModified || 0].join('|') |
|||
if (keyMap[fileKey]) { |
|||
duplicateCount++ |
|||
continue |
|||
} |
|||
keyMap[fileKey] = true |
|||
addedCount++ |
|||
this.uploadMtFileList.push({ |
|||
uid: 'local_' + this.uploadFileUid++, |
|||
name: file.name, |
|||
size: file.size, |
|||
lastModified: file.lastModified, |
|||
raw: file |
|||
}) |
|||
} |
|||
|
|||
if (invalidCount > 0) { |
|||
this.$message.warning('仅支持 .txt/.log 文件，已忽略 ' + invalidCount + ' 个') |
|||
} |
|||
if (duplicateCount > 0) { |
|||
this.$message.info('已自动忽略重复文件 ' + duplicateCount + ' 个') |
|||
} |
|||
if (addedCount > 0) { |
|||
this.$message.success('已添加文件 ' + addedCount + ' 个') |
|||
} |
|||
}, |
|||
|
|||
removePendingUploadFile (index) { |
|||
this.uploadMtFileList.splice(index, 1) |
|||
}, |
|||
|
|||
formatFileSize (size) { |
|||
if (!size) { |
|||
return '-' |
|||
} |
|||
return (size / 1024).toFixed(2) |
|||
}, |
|||
|
|||
validateUploadMtForm () { |
|||
if (!this.uploadForm.machineNo) { |
|||
this.$message.warning('机器账号不能为空') |
|||
return false |
|||
} |
|||
if (!this.uploadMtFileList || this.uploadMtFileList.length === 0) { |
|||
this.$message.warning('请先选择上传文件') |
|||
return false |
|||
} |
|||
return true |
|||
}, |
|||
|
|||
async saveUploadMtLog () { |
|||
if (!this.validateUploadMtForm()) { |
|||
return |
|||
} |
|||
const currentDate = this.getTodayDateString() |
|||
this.uploadForm.date = currentDate |
|||
this.saveLoading = true |
|||
const resultList = [] |
|||
let successCount = 0 |
|||
|
|||
for (let i = 0; i < this.uploadMtFileList.length; i++) { |
|||
const fileItem = this.uploadMtFileList[i] |
|||
const realFile = fileItem.raw || fileItem |
|||
if (!realFile) { |
|||
resultList.push({ |
|||
fileName: fileItem.name || '未知文件', |
|||
success: false, |
|||
statusText: '失败', |
|||
message: '文件内容为空' |
|||
}) |
|||
continue |
|||
} |
|||
|
|||
const formData = new FormData() |
|||
formData.append('machineNo', this.uploadForm.machineNo) |
|||
formData.append('date', currentDate) |
|||
formData.append('log', realFile, fileItem.name || realFile.name || ('mt_' + (i + 1) + '.txt')) |
|||
|
|||
try { |
|||
const { data } = await uploadMesMtLog(formData) |
|||
const isSuccess = data && data.code === 0 |
|||
if (isSuccess) { |
|||
successCount += 1 |
|||
} |
|||
resultList.push({ |
|||
fileName: fileItem.name || realFile.name || ('mt_' + (i + 1)), |
|||
success: isSuccess, |
|||
statusText: isSuccess ? '成功' : '失败', |
|||
message: (data && data.msg) || (isSuccess ? '上传成功' : '上传失败') |
|||
}) |
|||
} catch (e) { |
|||
resultList.push({ |
|||
fileName: fileItem.name || realFile.name || ('mt_' + (i + 1)), |
|||
success: false, |
|||
statusText: '失败', |
|||
message: this.extractErrorMessage(e, '上传失败') |
|||
}) |
|||
} |
|||
} |
|||
|
|||
this.uploadResults = resultList |
|||
const failCount = resultList.length - successCount |
|||
if (failCount === 0) { |
|||
this.$message.success('上传完成：' + successCount + ' 个成功') |
|||
} else if (successCount > 0) { |
|||
this.$message.warning('上传完成：成功 ' + successCount + ' 个，失败 ' + failCount + ' 个') |
|||
} else { |
|||
this.$message.error('上传完成：全部失败') |
|||
} |
|||
|
|||
await this.loadMesShiftData(false) |
|||
this.saveLoading = false |
|||
}, |
|||
|
|||
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.uploadMtFileList = [] |
|||
this.uploadResults = [] |
|||
if (this.$refs.mtFileInput) { |
|||
this.$refs.mtFileInput.value = '' |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.upload-mt-layout { |
|||
display: flex; |
|||
gap: 10px; |
|||
align-items: stretch; |
|||
} |
|||
|
|||
.shift-panel { |
|||
width: 44%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.upload-panel { |
|||
width: 56%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 8px; |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
|
|||
.list-header { |
|||
margin-bottom: 6px; |
|||
padding-bottom: 4px; |
|||
border-bottom: 1px solid #edf1f7; |
|||
font-size: 13px; |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
|
|||
.upload-form { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.upload-field-label { |
|||
margin-bottom: 6px; |
|||
font-size: 13px; |
|||
color: #3f4c5f; |
|||
line-height: 18px; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.upload-zone-wrap { |
|||
border: 1px dashed #9ad1d0; |
|||
border-radius: 8px; |
|||
background: linear-gradient(180deg, #f9fdfd 0%, #f3f9f9 100%); |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.upload-file-input { |
|||
display: none; |
|||
} |
|||
|
|||
.upload-drop-zone { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 100%; |
|||
height: 86px; |
|||
box-sizing: border-box; |
|||
cursor: pointer; |
|||
background: transparent; |
|||
} |
|||
|
|||
.upload-drop-zone:hover { |
|||
background: rgba(24, 165, 163, 0.06); |
|||
} |
|||
|
|||
.upload-drop-zone .el-icon-upload { |
|||
margin: 0 0 6px; |
|||
line-height: 1; |
|||
font-size: 28px; |
|||
color: #91b5c7; |
|||
} |
|||
|
|||
.upload-main-text { |
|||
margin: 0; |
|||
line-height: 18px; |
|||
color: #4a5568; |
|||
font-size: 13px; |
|||
} |
|||
|
|||
.upload-main-text em { |
|||
color: #1b8f8f; |
|||
font-style: normal; |
|||
} |
|||
|
|||
.upload-tip-text { |
|||
padding: 6px 10px; |
|||
font-size: 11px; |
|||
color: #6b7a90; |
|||
border-top: 1px solid #dfecef; |
|||
background: rgba(24, 165, 163, 0.05); |
|||
} |
|||
|
|||
.upload-list-row { |
|||
display: flex; |
|||
gap: 8px; |
|||
flex: 1; |
|||
min-height: 0; |
|||
} |
|||
|
|||
.selected-file-wrap, |
|||
.upload-result-wrap { |
|||
flex: 1; |
|||
min-width: 0; |
|||
padding: 10px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.selected-file-wrap /deep/ .el-table, |
|||
.upload-result-wrap /deep/ .el-table { |
|||
margin-top: 0; |
|||
} |
|||
|
|||
.upload-result-wrap /deep/ .el-table td { |
|||
padding-top: 2px !important; |
|||
padding-bottom: 2px !important; |
|||
} |
|||
|
|||
.upload-result-wrap /deep/ .el-table .cell { |
|||
height: auto !important; |
|||
line-height: 20px !important; |
|||
} |
|||
|
|||
.upload-result-wrap /deep/ .el-tag { |
|||
height: 20px; |
|||
line-height: 18px; |
|||
display: inline-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.upload-panel /deep/ .el-form-item { |
|||
margin-bottom: 6px; |
|||
} |
|||
|
|||
.upload-panel /deep/ .el-form-item__label { |
|||
padding-bottom: 2px; |
|||
line-height: 18px; |
|||
color: #627089; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
@media (max-width: 1280px) { |
|||
.upload-mt-layout { |
|||
flex-direction: column; |
|||
height: auto !important; |
|||
} |
|||
|
|||
.shift-panel, |
|||
.upload-panel { |
|||
width: 100%; |
|||
height: auto; |
|||
} |
|||
|
|||
.upload-list-row { |
|||
flex-direction: column; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue