<script setup>
|
import { ref, reactive, onMounted } from 'vue'
|
import {
|
Document, UploadFilled, MagicStick, RefreshLeft,
|
Download, Plus, Picture, Refresh
|
} from '@element-plus/icons-vue'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import request from "@/utils/requestByFile"
|
|
const uploadRef = ref()
|
const fileList = ref([])
|
const converting = ref(false)
|
const progressPercentage = ref(0)
|
const progressStatus = ref('')
|
const progressText = ref('')
|
const conversionResult = ref(null)
|
const supportedFormats = ref(['png', 'jpg', 'jpeg', 'bmp'])
|
const loadingFormats = ref(false)
|
let props = defineProps({
|
rowIndex:null,
|
orderId:null
|
})
|
|
const form = reactive({
|
format: 'png'
|
})
|
|
onMounted(() => {
|
//loadSupportedFormats()
|
})
|
|
|
|
const loadSupportedFormats = async () => {
|
try {
|
if (fileList.value.length === 0) {
|
ElMessage.warning('请先选择要上传的DWG文件')
|
return
|
}
|
loadingFormats.value = true
|
|
converting.value = true
|
progressPercentage.value = 0
|
progressStatus.value = ''
|
progressText.value = '准备上传...'
|
|
// 模拟进度更新
|
const progressInterval = setInterval(() => {
|
if (progressPercentage.value < 80) {
|
progressPercentage.value += 10
|
progressText.value = `上传中... ${progressPercentage.value}%`
|
}
|
}, 500)
|
|
|
const data ={
|
file:fileList.value[0].raw
|
}
|
request.post(`/orderFile/updateOrderFileByOrderNumber/${props.orderId}/${props.rowIndex.orderNumber}`,data).then(res=>{
|
if (res.code === '200') {
|
conversionResult.value = res.data
|
uploadRef.value.clearFiles()
|
clearInterval(progressInterval)
|
progressPercentage.value = 100
|
progressStatus.value = 'success'
|
progressText.value = '上传完成!'
|
uploadRef.value.clearFiles()
|
fileList.value = []
|
setTimeout(() => {
|
|
converting.value = false
|
},2000)
|
}
|
})
|
} catch (error) {
|
console.error('保存失败:', error)
|
} finally {
|
loadingFormats.value = false
|
}
|
}
|
|
|
|
|
|
const handleFileChange = (file) => {
|
if (!(file.raw.name.toLowerCase().endsWith('.dwg') || file.raw.name.toLowerCase().endsWith('.dxf'))) {
|
ElMessage.error('请选择DWG或DXF格式的文件')
|
uploadRef.value.clearFiles()
|
return
|
}
|
|
if (file.raw.size > 50 * 1024 * 1024) {
|
ElMessage.error('文件大小不能超过50MB')
|
uploadRef.value.clearFiles()
|
return
|
}
|
fileList.value = [file]
|
ElMessage.success(`已选择文件: ${file.name}`)
|
}
|
|
const handleFileRemove = () => {
|
conversionResult.value = null
|
uploadRef.value.clearFiles()
|
}
|
|
/*const handleConvert = async () => {
|
if (fileList.value.length === 0) {
|
ElMessage.warning('请先选择要上传的DWG文件')
|
return
|
}
|
|
if (!form.format) {
|
ElMessage.warning('请选择输出格式')
|
return
|
}
|
|
try {
|
converting.value = true
|
progressPercentage.value = 0
|
progressStatus.value = ''
|
progressText.value = '准备转换...'
|
|
// 模拟进度更新
|
const progressInterval = setInterval(() => {
|
if (progressPercentage.value < 80) {
|
progressPercentage.value += 10
|
progressText.value = `转换中... ${progressPercentage.value}%`
|
}
|
}, 500)
|
|
const file = fileList.value[0].raw
|
//const response = await cadApi.convertDwgToImage(file, form.format)
|
const response = null
|
clearInterval(progressInterval)
|
progressPercentage.value = 100
|
progressStatus.value = 'success'
|
progressText.value = '转换完成!'
|
|
conversionResult.value = response.data
|
|
ElMessage.success('文件转换成功!')
|
|
} catch (error) {
|
progressStatus.value = 'exception'
|
progressText.value = '转换失败'
|
console.error('转换失败:', error)
|
} finally {
|
converting.value = false
|
}
|
}*/
|
|
const handleDownload = () => {
|
if (!conversionResult.value) return
|
|
const link = document.createElement('a')
|
link.href = conversionResult.value.imageData
|
link.download = conversionResult.value.fileName
|
document.body.appendChild(link)
|
link.click()
|
document.body.removeChild(link)
|
|
ElMessage.success('文件下载开始')
|
}
|
|
const handleNewConversion = () => {
|
ElMessageBox.confirm('是否开始新的文件上传?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(() => {
|
handleReset()
|
ElMessage.success('已重置，可以开始新的上传')
|
})
|
}
|
|
const handleReset = () => {
|
uploadRef.value.clearFiles()
|
fileList.value = []
|
conversionResult.value = null
|
progressPercentage.value = 0
|
progressStatus.value = ''
|
progressText.value = ''
|
form.format = 'png'
|
}
|
|
const formatFileSize = (bytes) => {
|
if (bytes === 0) return '0 Bytes'
|
const k = 1024
|
const sizes = ['Bytes', 'KB', 'MB', 'GB']
|
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
|
}
|
</script>
|
<template>
|
<div class="file-upload-container">
|
<el-card class="upload-card" shadow="hover">
|
<template #header>
|
<div class="card-header">
|
<span class="header-title">
|
<el-icon><Document /></el-icon>
|
DWG文件上传
|
</span>
|
</div>
|
</template>
|
|
<!-- 文件上传区域 -->
|
<el-upload
|
ref="uploadRef"
|
class="upload-demo"
|
drag
|
action=""
|
:auto-upload="false"
|
:on-change="handleFileChange"
|
:on-remove="handleFileRemove"
|
:file-list="fileList"
|
:limit="1"
|
:accept="'.dwg' || '.dxf' "
|
:disabled="converting"
|
>
|
<el-icon class="el-icon--upload"><UploadFilled /></el-icon>
|
<div class="el-upload__text">
|
拖拽DWG文件到此处或 <em>点击选择文件</em>
|
</div>
|
<template #tip>
|
<div class="el-upload__tip">
|
仅支持 .dwg 格式文件，且文件大小不超过50MB
|
</div>
|
</template>
|
</el-upload>
|
|
<!-- 上传选项 -->
|
<div class="conversion-options">
|
|
<div class="action-buttons">
|
<el-button
|
type="primary"
|
:loading="converting"
|
@click="loadSupportedFormats"
|
:disabled="!form.format"
|
>
|
<template #icon>
|
<el-icon><MagicStick /></el-icon>
|
</template>
|
保存
|
</el-button>
|
|
<el-button @click="handleReset"
|
:loading="converting">
|
<template #icon>
|
<el-icon><RefreshLeft /></el-icon>
|
</template>
|
重置
|
</el-button>
|
</div>
|
</div>
|
|
<!-- 转换进度 -->
|
<div v-if="converting" class="conversion-progress">
|
<el-divider content-position="left">上传进度</el-divider>
|
<el-progress
|
:percentage="progressPercentage"
|
:status="progressStatus"
|
:stroke-width="8"
|
/>
|
<div class="progress-text">
|
{{ progressText }}
|
</div>
|
</div>
|
|
<!-- 转换结果 -->
|
<div v-if="conversionResult" class="conversion-result">
|
<el-divider content-position="left">上传结果</el-divider>
|
|
<el-result
|
icon="success"
|
:sub-title="`文件已成功转格式`"
|
>
|
<template #extra>
|
<div class="result-content">
|
<!-- 图片预览 -->
|
<div class="image-preview">
|
<el-image
|
:src="conversionResult"
|
:preview-src-list="[conversionResult]"
|
fit="contain"
|
style="max-height: 600px;"
|
>
|
<!-- <template #error>-->
|
<!-- <div class="image-slot">-->
|
<!-- <el-icon><Picture /></el-icon>-->
|
<!-- <div>图片加载失败</div>-->
|
<!-- </div>-->
|
<!-- </template>-->
|
</el-image>
|
</div>
|
|
|
|
<!-- 操作按钮 -->
|
<!-- <div class="result-actions">
|
<el-button
|
type="primary"
|
@click="handleDownload"
|
:icon="Download"
|
>
|
下载图片
|
</el-button>
|
<el-button
|
@click="handleNewConversion"
|
:icon="Plus"
|
>
|
新的上传
|
</el-button>
|
</div>-->
|
</div>
|
</template>
|
</el-result>
|
</div>
|
</el-card>
|
</div>
|
</template>
|
|
|
|
<style scoped>
|
.file-upload-container {
|
max-width: 800px;
|
margin: 0 auto;
|
padding: 20px;
|
}
|
|
.upload-card {
|
min-height: 600px;
|
}
|
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.header-title {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
font-size: 18px;
|
font-weight: bold;
|
}
|
|
:deep(.upload-demo) {
|
width: 100%;
|
}
|
|
:deep(.el-upload-dragger) {
|
width: 100%;
|
padding: 40px;
|
}
|
|
.conversion-options {
|
margin-top: 20px;
|
}
|
|
.action-buttons {
|
display: flex;
|
gap: 12px;
|
justify-content: center;
|
margin-top: 20px;
|
}
|
|
.conversion-progress {
|
margin-top: 20px;
|
}
|
|
.progress-text {
|
text-align: center;
|
margin-top: 8px;
|
color: #666;
|
font-size: 14px;
|
}
|
|
.conversion-result {
|
margin-top: 20px;
|
}
|
|
.result-content {
|
text-align: center;
|
}
|
|
.image-preview {
|
margin: 20px 0;
|
display: flex;
|
justify-content: center;
|
}
|
|
.file-info {
|
margin: 20px 0;
|
max-width: 400px;
|
margin-left: auto;
|
margin-right: auto;
|
}
|
|
.result-actions {
|
display: flex;
|
gap: 12px;
|
justify-content: center;
|
margin-top: 20px;
|
}
|
|
.image-slot {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
height: 200px;
|
color: #909399;
|
}
|
|
.image-slot .el-icon {
|
font-size: 48px;
|
margin-bottom: 16px;
|
}
|
</style>
|
