331 lines
9.1 KiB
Vue
331 lines
9.1 KiB
Vue
|
<template>
|
||
|
|
<div class="app-container">
|
||
|
|
<!-- 订单基本信息 -->
|
||
|
|
<el-card class="box-card">
|
||
|
|
<div slot="header" class="clearfix">
|
||
|
|
<span style="color: #027db4;">订单基本信息</span>
|
||
|
|
</div>
|
||
|
|
<el-form :model="form" label-width="100px" class="detail-form">
|
||
|
|
<el-row :gutter="20">
|
||
|
|
<el-col :span="8">
|
||
|
|
<el-form-item label="订单号">
|
||
|
|
<el-input v-model="form.orderNo" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="8">
|
||
|
|
<el-form-item label="订单类型">
|
||
|
|
<el-input v-model="form.orderType" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="8">
|
||
|
|
<el-form-item label="订单发起人">
|
||
|
|
<el-input v-model="form.initiator" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-row :gutter="20">
|
||
|
|
<el-col :span="8">
|
||
|
|
<el-form-item label="客户名称">
|
||
|
|
<el-input v-model="form.customerName" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="8">
|
||
|
|
<el-form-item label="手机号码">
|
||
|
|
<el-input v-model="form.phoneNumber" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="8">
|
||
|
|
<el-form-item label="区域">
|
||
|
|
<el-select v-model="form.region" placeholder="请选择区域">
|
||
|
|
<el-option label="区域1" value="area1" />
|
||
|
|
<el-option label="区域2" value="area2" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-row :gutter="20">
|
||
|
|
<el-col :span="8">
|
||
|
|
<el-form-item label="景区">
|
||
|
|
<el-select v-model="form.scenicArea" placeholder="请选择景区">
|
||
|
|
<el-option label="景区1" value="scenic1" />
|
||
|
|
<el-option label="景区2" value="scenic2" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="8">
|
||
|
|
<el-form-item label="路线">
|
||
|
|
<el-select v-model="form.route" placeholder="请选择路线">
|
||
|
|
<el-option label="路线1" value="route1" />
|
||
|
|
<el-option label="路线2" value="route2" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="8">
|
||
|
|
<el-form-item label="货物重量">
|
||
|
|
<el-input v-model="form.weight" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-row :gutter="20">
|
||
|
|
<el-col :span="8">
|
||
|
|
<el-form-item label="附加费">
|
||
|
|
<el-input v-model="form.additionalFee" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="8">
|
||
|
|
<el-form-item label="操作员">
|
||
|
|
<el-input v-model="form.operator" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="8">
|
||
|
|
<el-form-item label="下单时间">
|
||
|
|
<el-date-picker
|
||
|
|
v-model="form.orderTime"
|
||
|
|
type="datetime"
|
||
|
|
placeholder="选择日期时间"
|
||
|
|
format="yyyy-MM-dd HH:mm:ss"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-row :gutter="20">
|
||
|
|
<el-col :span="8">
|
||
|
|
<el-form-item label="订单状态">
|
||
|
|
<el-input v-model="form.orderStatus" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="8">
|
||
|
|
<el-form-item label="订单确认人">
|
||
|
|
<el-input v-model="form.confirmer" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="8">
|
||
|
|
<el-form-item label="订单金额">
|
||
|
|
<el-input v-model="form.amount" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</el-form>
|
||
|
|
</el-card>
|
||
|
|
|
||
|
|
<!-- 飞行任务信息表 -->
|
||
|
|
<el-card class="box-card" style="margin-top: 20px;">
|
||
|
|
<div slot="header" class="clearfix">
|
||
|
|
<span style="color: #027db4;">飞行任务信息</span>
|
||
|
|
</div>
|
||
|
|
<el-table :data="flightTaskData" style="width: 100%">
|
||
|
|
<el-table-column prop="operator" label="操作员" />
|
||
|
|
<el-table-column prop="device" label="执行设备" />
|
||
|
|
<el-table-column label="货物图片">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<img :src="scope.row.cargoImage" style="height: 50px;" @click="handlePreview(scope.row.cargoImage)">
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="weight" label="载货重量" />
|
||
|
|
<el-table-column prop="status" label="任务状态" />
|
||
|
|
<el-table-column label="操作" align="center">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-button type="text" size="small" @click="handleVideoView(scope.row)">查看视频</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<div class="pagination-container">
|
||
|
|
<el-pagination
|
||
|
|
:current-page.sync="taskPage.page"
|
||
|
|
:page-sizes="[10, 20, 50, 100]"
|
||
|
|
:page-size="taskPage.size"
|
||
|
|
layout="total, sizes, prev, pager, next, jumper"
|
||
|
|
:total="taskPage.total"
|
||
|
|
@size-change="handleTaskSizeChange"
|
||
|
|
@current-change="handleTaskCurrentChange"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
|
||
|
|
<!-- 图片预览 -->
|
||
|
|
<el-dialog :visible.sync="previewVisible" append-to-body>
|
||
|
|
<img :src="previewUrl" alt="Preview" style="width: 100%">
|
||
|
|
</el-dialog>
|
||
|
|
|
||
|
|
<!-- 视频预览 -->
|
||
|
|
<el-dialog
|
||
|
|
title="视频预览"
|
||
|
|
:visible.sync="videoDialogVisible"
|
||
|
|
width="50%"
|
||
|
|
append-to-body
|
||
|
|
>
|
||
|
|
<video
|
||
|
|
:src="currentVideoUrl"
|
||
|
|
controls
|
||
|
|
style="width: 100%"
|
||
|
|
>
|
||
|
|
您的浏览器不支持 video 标签。
|
||
|
|
</video>
|
||
|
|
</el-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'loadOrderDetail',
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
form: {
|
||
|
|
orderNo: 'ORDER2025001',
|
||
|
|
orderType: '普通订单',
|
||
|
|
initiator: '张三',
|
||
|
|
customerName: '李四',
|
||
|
|
phoneNumber: '13800138000',
|
||
|
|
region: 'area1',
|
||
|
|
scenicArea: 'scenic1',
|
||
|
|
route: 'route1',
|
||
|
|
weight: '100kg',
|
||
|
|
additionalFee: '50',
|
||
|
|
operator: '小明',
|
||
|
|
orderTime: new Date(),
|
||
|
|
orderStatus: '进行中',
|
||
|
|
confirmer: '王五',
|
||
|
|
amount: '1000'
|
||
|
|
},
|
||
|
|
flightTaskData: [
|
||
|
|
{
|
||
|
|
operator: '小明',
|
||
|
|
device: 'T100',
|
||
|
|
cargoImage: 'https://axure-file.lanhuapp.com/md5__aa8db5b0612acabf7c9b92c53293d1d3.png',
|
||
|
|
weight: '100kg',
|
||
|
|
status: '进行中',
|
||
|
|
videoUrl: 'https://videos.pexels.com/video-files/32839562/13997147_2560_1440_30fps.mp4'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
taskPage: {
|
||
|
|
page: 1,
|
||
|
|
size: 10,
|
||
|
|
total: 3
|
||
|
|
},
|
||
|
|
previewVisible: false,
|
||
|
|
previewUrl: '',
|
||
|
|
videoDialogVisible: false,
|
||
|
|
currentVideoUrl: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
// 获取详情数据
|
||
|
|
const id = this.$route.query.id
|
||
|
|
if (id) {
|
||
|
|
this.getDetail(id)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getDetail(id) {
|
||
|
|
// 调用接口获取详情
|
||
|
|
console.log('获取详情:', id)
|
||
|
|
},
|
||
|
|
handlePreview(url) {
|
||
|
|
this.previewUrl = url
|
||
|
|
this.previewVisible = true
|
||
|
|
},
|
||
|
|
handleTaskSizeChange(val) {
|
||
|
|
this.taskPage.size = val
|
||
|
|
// 重新获取任务记录数据
|
||
|
|
},
|
||
|
|
handleTaskCurrentChange(val) {
|
||
|
|
this.taskPage.page = val
|
||
|
|
// 重新获取任务记录数据
|
||
|
|
},
|
||
|
|
handleVideoView(row) {
|
||
|
|
if (row.videoUrl) {
|
||
|
|
this.currentVideoUrl = row.videoUrl
|
||
|
|
this.videoDialogVisible = true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
handleApiClick(type) {
|
||
|
|
// 跳转到对应的API模块
|
||
|
|
console.log('跳转到API模块:', type)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.app-container {
|
||
|
|
padding: 0;
|
||
|
|
margin-bottom: 33px;
|
||
|
|
}
|
||
|
|
.detail-form {
|
||
|
|
.el-form-item {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
::v-deep .el-input {
|
||
|
|
width: 240px;
|
||
|
|
}
|
||
|
|
::v-deep .el-select {
|
||
|
|
width: 240px;
|
||
|
|
}
|
||
|
|
::v-deep .el-date-editor {
|
||
|
|
width: 240px;
|
||
|
|
}
|
||
|
|
::v-deep .el-input.is-disabled .el-input__inner {
|
||
|
|
background-color: white;
|
||
|
|
color: #686868;
|
||
|
|
}
|
||
|
|
::v-deep .el-textarea.is-disabled .el-textarea__inner {
|
||
|
|
background-color: white;
|
||
|
|
color: #686868;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.image-preview {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 10px;
|
||
|
|
.image-item {
|
||
|
|
width: 120px;
|
||
|
|
height: 120px;
|
||
|
|
cursor: pointer;
|
||
|
|
border: 1px solid #dcdfe6;
|
||
|
|
border-radius: 4px;
|
||
|
|
overflow: hidden;
|
||
|
|
&:hover {
|
||
|
|
border-color: #409EFF;
|
||
|
|
}
|
||
|
|
.preview-image {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.box-card {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
box-shadow: none;
|
||
|
|
border: none;
|
||
|
|
background: none;
|
||
|
|
.clearfix {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.pagination-container {
|
||
|
|
text-align: right;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
.api-links {
|
||
|
|
margin-top: 20px;
|
||
|
|
padding: 20px;
|
||
|
|
display: flex;
|
||
|
|
gap: 20px;
|
||
|
|
justify-content: center;
|
||
|
|
.api-link {
|
||
|
|
color: #027db4;
|
||
|
|
text-decoration: none;
|
||
|
|
padding: 10px 20px;
|
||
|
|
border: 1px solid #027db4;
|
||
|
|
border-radius: 4px;
|
||
|
|
&:hover {
|
||
|
|
background-color: #027db4;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|