parent
ca184d15a1
commit
4a50e4d3a1
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 3.6 KiB |
@ -1,53 +1,276 @@ |
||||
<template> |
||||
<div> |
||||
<div v-if="Object.keys(formData).length === 0">Loading data...</div> |
||||
<EquipmentRegistrationForm v-else :initialData="formData" /> |
||||
<div class="m-pages m-pages-bg"> |
||||
<div class="file-view-box"> |
||||
<div class="list-scroll-nomore"> |
||||
<div class="list-scroll-box"> |
||||
<div v-for="item in fileList" class="file-item" @click="bigView(item)"> |
||||
<img v-if="item.type === 'image'" :src="item.url" class="preview-image"> |
||||
<pdf v-if="item.type === 'pdf'" :src="item.url"></pdf> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="file-view-content"> |
||||
<div class="btn-box"> |
||||
<div class="pagination"> |
||||
<el-button style="font-size: 22px;padding: 5px 15px;" @click="zoomIn">+</el-button> |
||||
<el-button style="font-size: 22px;padding: 5px 15px;" @click="zoomOut">-</el-button> |
||||
</div> |
||||
<div class="pagination" v-if="showType === 'pdf' && pageCount <= 1"> |
||||
<el-button @click="rotate += 90" style="font-size: 22px;padding: 5px 15px;">⟳</el-button> |
||||
<el-button @click="rotate -= 90" style="font-size: 22px;padding: 5px 15px;">⟲</el-button> |
||||
</div> |
||||
<div class="pagination" v-if="showType === 'pdf' && pageCount > 1"> |
||||
<el-button @click="rotate += 90" style="font-size: 22px;padding: 5px 15px;">⟳</el-button> |
||||
<el-button @click="rotate -= 90" style="font-size: 22px;padding: 5px 15px;">⟲</el-button> |
||||
<el-button @click="currentPage = currentPage - 1" :disabled="currentPage <= 1" |
||||
style="font-size: 14px;padding: 10px 15px;">上一页</el-button> |
||||
<span>第 {{ currentPage }} 页 / 共 {{ pageCount }} 页</span> |
||||
<el-button @click="currentPage = currentPage + 1" :disabled="currentPage >= pageCount" |
||||
style="font-size: 14px;padding: 10px 15px;">下一页</el-button> |
||||
</div> |
||||
</div> |
||||
<div class="nomore-view"> |
||||
<div class="pdf-img-box drag-box" :style="boxStyle" @mousedown="startDrag"> |
||||
<img v-if="showType === 'image'" :src="showUrl" class="preview-image"> |
||||
<pdf v-if="showType === 'pdf'" :src="showUrl" :rotate="rotate" :page="currentPage" |
||||
@num-pages="pageCount = $event" @progress="isLoading = true" @loaded="isLoading = false"></pdf> |
||||
</div> |
||||
<div class="mask" v-if="isLoading">加载中...</div> |
||||
|
||||
</div> |
||||
|
||||
|
||||
|
||||
</div> |
||||
</div> |
||||
<div class="word-view-box"> |
||||
<div v-if="Object.keys(formData).length === 0">Loading data...</div> |
||||
<EquipmentRegistrationForm v-else :initialData="formData" /> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import EquipmentRegistrationForm from './EquipmentRegistrationForm.vue' |
||||
import EquipmentRegistrationForm from './EquipmentRegistrationForm.vue' |
||||
import pdf from 'vue-pdf'; |
||||
|
||||
export default { |
||||
components: { EquipmentRegistrationForm }, |
||||
data() { |
||||
return { |
||||
formData: {} // 初始为空，模拟接口返回后赋值 |
||||
export default { |
||||
components: { EquipmentRegistrationForm, pdf }, |
||||
data() { |
||||
return { |
||||
currentPage: 1, // 当前页码 |
||||
pageCount: 0, // 总页数 |
||||
isLoading: false, // 加载状态 |
||||
rotate: 0, |
||||
formData: {}, // 初始为空，模拟接口返回后赋值 |
||||
fileList: [], |
||||
showUrl: '', |
||||
showType: '', |
||||
scale: 1, // 缩放比例 |
||||
position: { // 当前元素位置 |
||||
x: 0, |
||||
y: 0 |
||||
}, |
||||
dragging: false, // 拖动状态 |
||||
startX: 0, // 拖动起始X坐标 |
||||
startY: 0, // 拖动起始Y坐标 |
||||
initialX: 0, // 元素初始X位置 |
||||
initialY: 0 // 元素初始Y位置 |
||||
} |
||||
}, |
||||
computed: { |
||||
// 动态计算元素样式 |
||||
boxStyle() { |
||||
return { |
||||
transform: `translate(${this.position.x}px, ${this.position.y}px) scale(${this.scale})`, |
||||
transformOrigin: '0 0', // 确保缩放基于左上角 |
||||
position: 'absolute', |
||||
cursor: this.dragging ? 'grabbing' : 'grab' |
||||
}; |
||||
} |
||||
}, |
||||
created() { |
||||
console.log(this.$route.query) |
||||
const data = this.$route.query.data |
||||
const newFileList = [...data.basicFiles, ...data.usageFiles] |
||||
this.fileList = newFileList |
||||
console.log(newFileList) |
||||
this.mockFetchData() |
||||
}, |
||||
methods: { |
||||
// 模拟接口调用 |
||||
mockFetchData() { |
||||
setTimeout(() => { |
||||
this.formData = { |
||||
"registrationCategory": "首次启用",//登记类别 |
||||
"equipmentType": "高压气瓶",//设备品种 |
||||
"productName": "车用气瓶",//产品名称 |
||||
"cylinderQuantity": 1,//气瓶数量 |
||||
"fillingMedium": "氧气",//充装介质 |
||||
"nominalWorkingPressure": 1,//气瓶公称工作压力 |
||||
"cylinderVolume": 1,//气瓶容积 |
||||
"manufacturer": "XX制造有限公司",//制造单位名称 |
||||
"productionDate": "2025-04-11",//制造日期 |
||||
"productId": "SN123456",//产品编号 |
||||
"internalId": "IN7890",//单位内编号 |
||||
"contractor": "XX工程公司",//施工单位名称 |
||||
"supervisionAgency": "XX监督检验所",//监督检验机构名称 |
||||
"userUnit": "XX科技有限公司",//使用单位名称 |
||||
"userAddress": "北京市海淀区",//使用单位地址 |
||||
"unifiedSocialCode": "91230103MA1BUFLX45",//使用单位统一社会信用代码 |
||||
"postalCode": "100000",//邮政编码 |
||||
"licensePlate": "京A12345",//车牌号 |
||||
"vehicleVin": "LVSHJCAM6AE012345",//车辆VIN码 |
||||
"commissionDate": "2025-04-11",//投入使用日期 |
||||
"telephone": "010-12345678",//单位固定电话 |
||||
"safetyManager": "张三",//安全管理员 |
||||
"mobilePhone": "13800138000"//移动电话 |
||||
} |
||||
}, 1000) // 模拟1秒延迟 |
||||
}, |
||||
bigView(val) { |
||||
this.showUrl = '' |
||||
this.showUrl = val.url; |
||||
this.showType = val.type; |
||||
}, |
||||
// 放大 |
||||
zoomIn() { |
||||
this.scale = Math.min(this.scale * 1.2, 4); // 限制最大放大倍数 |
||||
}, |
||||
// 缩小 |
||||
zoomOut() { |
||||
this.scale = Math.max(this.scale * 0.8, 0.5); // 限制最小缩小倍数 |
||||
}, |
||||
// 开始拖动 |
||||
startDrag(e) { |
||||
this.dragging = true; |
||||
this.startX = e.clientX; |
||||
this.startY = e.clientY; |
||||
this.initialX = this.position.x; |
||||
this.initialY = this.position.y; |
||||
document.addEventListener('mousemove', this.onDrag); |
||||
document.addEventListener('mouseup', this.stopDrag); |
||||
}, |
||||
// 拖动中 |
||||
onDrag(e) { |
||||
if (!this.dragging) return; |
||||
const dx = e.clientX - this.startX; |
||||
const dy = e.clientY - this.startY; |
||||
this.position.x = this.initialX + dx; |
||||
this.position.y = this.initialY + dy; |
||||
}, |
||||
// 停止拖动 |
||||
stopDrag() { |
||||
this.dragging = false; |
||||
document.removeEventListener('mousemove', this.onDrag); |
||||
document.removeEventListener('mouseup', this.stopDrag); |
||||
} |
||||
} |
||||
}, |
||||
created() { |
||||
console.log(this.$route.query) |
||||
this.mockFetchData() |
||||
}, |
||||
methods: { |
||||
// 模拟接口调用 |
||||
mockFetchData() { |
||||
setTimeout(() => { |
||||
this.formData = { |
||||
deviceType: '高压气瓶', |
||||
gasNumber: '50', |
||||
fillingMedium: '氧气', |
||||
pressure: '15', |
||||
volume: '40', |
||||
manufacturer: 'XX制造有限公司', |
||||
manufactureDate: '2023-01-01', |
||||
productId: 'SN123456', |
||||
internalId: 'IN7890', |
||||
constructionUnit: 'XX工程公司', |
||||
inspectionAgency: 'XX监督检验所', |
||||
userUnit: 'XX科技有限公司', |
||||
userAddress: '北京市海淀区', |
||||
creditCode: '91230103MA1BUFLX45', |
||||
postalCode: '100000', |
||||
licensePlate: '京A12345', |
||||
vin: 'LVSHJCAM6AE012345', |
||||
useDate: '2023-03-01', |
||||
telephone: '010-12345678', |
||||
safetyManager: '张三', |
||||
mobile: '13800138000' |
||||
} |
||||
</script> |
||||
<style scoped lang="scss"> |
||||
.m-pages-bg { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
width: 100%; |
||||
justify-content: space-between; |
||||
overflow-y: scroll; |
||||
|
||||
.file-view-box { |
||||
flex: 1; |
||||
display: flex; |
||||
align-items: flex-start; |
||||
justify-content: space-between; |
||||
overflow-y: scroll; |
||||
height: calc(100vh - 86px); |
||||
overflow-y: scroll; |
||||
background-color: #fff; |
||||
padding: 15px; |
||||
|
||||
.list-scroll-nomore { |
||||
margin-top: 55px; |
||||
height: 98vh; |
||||
overflow-y: scroll; |
||||
scrollbar-width: none; |
||||
width: 10%; |
||||
} |
||||
|
||||
.list-scroll-box { |
||||
|
||||
height: fit-content; |
||||
background-color: #eef1f9; |
||||
padding: 5px; |
||||
|
||||
.file-item:not(:last-child) { |
||||
margin-bottom: 10px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
.file-view-content { |
||||
flex: 1; |
||||
margin-left: 10px; |
||||
position: relative; |
||||
|
||||
.btn-box { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
.pagination { |
||||
margin: 10px; |
||||
text-align: center; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
} |
||||
|
||||
.nomore-view { |
||||
width: 100%; |
||||
height: calc(100vh - 16px); |
||||
background-color: #eef1f9; |
||||
overflow: hidden; |
||||
position: relative; |
||||
|
||||
.pdf-img-box { |
||||
overflow: scroll; |
||||
scrollbar-width: none; |
||||
/* Firefox */ |
||||
-ms-overflow-style: none; |
||||
/* Internet Explorer 10+ */ |
||||
} |
||||
|
||||
.drag-box { |
||||
height: fit-content; |
||||
background: #f0f0f0; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
user-select: none; |
||||
/* 防止文字被选中 */ |
||||
} |
||||
|
||||
.mask { |
||||
background-color: rgba(0, 0, 0, 0.5); |
||||
height: 100%; |
||||
width: 100%; |
||||
color: #fff; |
||||
text-align: center; |
||||
line-height: 100vh; |
||||
z-index: 9999; |
||||
position: relative; |
||||
} |
||||
} |
||||
}, 1000) // 模拟1秒延迟 |
||||
|
||||
} |
||||
} |
||||
|
||||
.word-view-box { |
||||
width: 50%; |
||||
height: calc(100vh - 86px); |
||||
overflow-y: scroll; |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
</style> |
||||
Loading…
Reference in new issue