加浏览器访问异常信息后台，打包有区别
This commit is contained in:
277
src/pages/modules/hub/index.vue
Normal file
277
src/pages/modules/hub/index.vue
Normal file
@@ -0,0 +1,277 @@
|
||||
<template>
|
||||
<div class="page_container">
|
||||
<div class="container">
|
||||
<div class="upload-container">
|
||||
<!-- Excel文件上传 -->
|
||||
<div class="upload-card">
|
||||
<div class="upload-icon" style="color: #67C23A;">
|
||||
<i class="el-icon-document"></i>
|
||||
</div>
|
||||
<div class="upload-title">异常信息Excel文件上传</div>
|
||||
<div class="upload-desc">支持.xlsx和.xls格式，最大10MB</div>
|
||||
<div class="upload-btn">
|
||||
<el-upload
|
||||
ref="excelUpload1"
|
||||
:action="`${serverUrl}/anomalyInfo/importErrorInfoExcel`"
|
||||
:limit="1"
|
||||
:before-upload="beforeExcelUpload"
|
||||
:on-success="handleExcelSuccess1"
|
||||
:on-error="handleError"
|
||||
:file-list="excelFileList1"
|
||||
accept=".xlsx, .xls">
|
||||
<el-button size="medium" type="success" icon="el-icon-upload">上传Excel文件</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div class="upload-progress" v-if="excelProgress1 > 0">
|
||||
<el-progress :percentage="excelProgress1" :status="excelStatus1"></el-progress>
|
||||
</div>
|
||||
<div class="file-list">
|
||||
<div class="file-item" v-for="file in excelFileList1" :key="file.uid">
|
||||
<i class="el-icon-document" style="color: #67C23A;"></i>
|
||||
<span class="file-name">{{ file.name }}</span>
|
||||
<span class="file-status" :class="{ error: file.status === 'error' }">
|
||||
{{ file.status === 'success' ? '上传成功' : (file.status === 'error' ? '上传失败' : '上传中') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二个Excel文件上传 -->
|
||||
<div class="upload-card">
|
||||
<div class="upload-icon" style="color: #E6A23C;">
|
||||
<i class="el-icon-document"></i>
|
||||
</div>
|
||||
<div class="upload-title">异常信息处理方式Excel文件上传</div>
|
||||
<div class="upload-desc">支持.xlsx和.xls格式，最大10MB</div>
|
||||
<div class="upload-btn">
|
||||
<el-upload
|
||||
ref="excelUpload2"
|
||||
action="/anomalyInfo/importErrorHandlingExcel"
|
||||
:on-success="handleExcelSuccess2"
|
||||
:on-error="handleError"
|
||||
:before-upload="beforeExcelUpload"
|
||||
:file-list="excelFileList2"
|
||||
:limit="1"
|
||||
accept=".xlsx, .xls">
|
||||
<el-button size="medium" type="warning" icon="el-icon-upload">上传Excel文件</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div class="upload-progress" v-if="excelProgress2 > 0">
|
||||
<el-progress :percentage="excelProgress2" :status="excelStatus2"></el-progress>
|
||||
</div>
|
||||
<div class="file-list">
|
||||
<div class="file-item" v-for="file in excelFileList2" :key="file.uid">
|
||||
<i class="el-icon-document" style="color: #E6A23C;"></i>
|
||||
<span class="file-name">{{ file.name }}</span>
|
||||
<span class="file-status" :class="{ error: file.status === 'error' }">
|
||||
{{ file.status === 'success' ? '上传成功' : (file.status === 'error' ? '上传失败' : '上传中') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ZIP文件上传 -->
|
||||
<div class="upload-card">
|
||||
<div class="upload-icon" style="color: #409EFF;">
|
||||
<i class="el-icon-folder-opened"></i>
|
||||
</div>
|
||||
<div class="upload-title">异常处理图片ZIP文件上传</div>
|
||||
<div class="upload-desc">支持.zip格式，最大50MB</div>
|
||||
<div class="upload-btn">
|
||||
<el-upload
|
||||
ref="zipUpload"
|
||||
action="/anomalyInfo/importErrorImage"
|
||||
:on-success="handleZipSuccess"
|
||||
:on-error="handleError"
|
||||
:before-upload="beforeZipUpload"
|
||||
:file-list="zipFileList"
|
||||
:limit="1"
|
||||
accept=".zip">
|
||||
<el-button size="medium" type="primary" icon="el-icon-upload">上传ZIP文件</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div class="upload-progress" v-if="zipProgress > 0">
|
||||
<el-progress :percentage="zipProgress" :status="zipStatus"></el-progress>
|
||||
</div>
|
||||
<div class="file-list">
|
||||
<div class="file-item" v-for="file in zipFileList" :key="file.uid">
|
||||
<i class="el-icon-folder-opened" style="color: #409EFF;"></i>
|
||||
<span class="file-name">{{ file.name }}</span>
|
||||
<span class="file-status" :class="{ error: file.status === 'error' }">
|
||||
{{ file.status === 'success' ? '上传成功' : (file.status === 'error' ? '上传失败' : '上传中') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
import { mapGetters } from 'vuex'
|
||||
export default {
|
||||
name: 'ModuleRelocation',
|
||||
data () {
|
||||
return {
|
||||
dataList: [],
|
||||
excelFileList1: [],
|
||||
excelProgress1: 0,
|
||||
excelStatus1: '',
|
||||
excelFileList2: [],
|
||||
excelProgress2: 0,
|
||||
excelStatus2: '',
|
||||
zipFileList: [],
|
||||
zipProgress: 0,
|
||||
zipStatus: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['serverUrl'])
|
||||
},
|
||||
methods: {
|
||||
// Excel文件上传前的验证
|
||||
beforeExcelUpload(file) {
|
||||
const isExcel = file.type === 'application/vnd.ms-excel' ||
|
||||
file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
|
||||
const isLt10M = file.size / 1024 / 1024 < 10;
|
||||
|
||||
if (!isExcel) {
|
||||
this.$message.error('只能上传Excel文件!');
|
||||
}
|
||||
if (!isLt10M) {
|
||||
this.$message.error('Excel文件大小不能超过10MB!');
|
||||
}
|
||||
return isExcel && isLt10M;
|
||||
},
|
||||
// ZIP文件上传前的验证
|
||||
beforeZipUpload(file) {
|
||||
const isZip = file.type === 'application/zip' ||
|
||||
file.type === 'application/x-zip-compressed';
|
||||
const isLt50M = file.size / 1024 / 1024 < 50;
|
||||
|
||||
if (!isZip) {
|
||||
this.$message.error('只能上传ZIP文件!');
|
||||
}
|
||||
if (!isLt50M) {
|
||||
this.$message.error('ZIP文件大小不能超过50MB!');
|
||||
}
|
||||
return isZip && isLt50M;
|
||||
},
|
||||
// 第一个Excel上传成功回调
|
||||
handleExcelSuccess1(response, file, fileList) {
|
||||
this.excelFileList1 = fileList;
|
||||
this.excelProgress1 = 100;
|
||||
this.excelStatus1 = 'success';
|
||||
this.$message.success('第一个Excel文件上传成功!');
|
||||
},
|
||||
// 第二个Excel上传成功回调
|
||||
handleExcelSuccess2(response, file, fileList) {
|
||||
this.excelFileList2 = fileList;
|
||||
this.excelProgress2 = 100;
|
||||
this.excelStatus2 = 'success';
|
||||
this.$message.success('第二个Excel文件上传成功!');
|
||||
},
|
||||
// ZIP上传成功回调
|
||||
handleZipSuccess(response, file, fileList) {
|
||||
this.zipFileList = fileList;
|
||||
this.zipProgress = 100;
|
||||
this.zipStatus = 'success';
|
||||
this.$message.success('ZIP文件上传成功!');
|
||||
},
|
||||
// 上传失败回调
|
||||
handleError(err, file, fileList) {
|
||||
this.$message.error('文件上传失败!');
|
||||
if (file.raw.type.includes('excel') || file.name.includes('.xls')) {
|
||||
this.excelProgress1 = 0;
|
||||
this.excelProgress2 = 0;
|
||||
} else {
|
||||
this.zipProgress = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.upload-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
}
|
||||
.upload-card {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
padding: 25px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.upload-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.upload-icon {
|
||||
font-size: 48px;
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.upload-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.upload-desc {
|
||||
color: #909399;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.upload-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.file-list {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
.file-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.file-name {
|
||||
flex: 1;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.file-status {
|
||||
color: #67C23A;
|
||||
}
|
||||
.file-status.error {
|
||||
color: #F56C6C;
|
||||
}
|
||||
.upload-progress {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.footer {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.upload-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
.upload-card {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user