302 lines
8.7 KiB
Vue
302 lines
8.7 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.name" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="型号">
|
|
<el-input v-model="form.model" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="类型">
|
|
<el-input v-model="form.type" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<el-form-item label="区域">
|
|
<el-input v-model="form.region" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="景区">
|
|
<el-input v-model="form.scenicArea" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="负责人">
|
|
<el-input v-model="form.manager" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="8">
|
|
<el-form-item label="备注">
|
|
<el-input type="textarea" v-model="form.remarks" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-form-item label="无人机图片">
|
|
<div class="image-preview">
|
|
<div v-for="(url, index) in form.imageUrls" :key="index" class="image-item" @click="handlePreview(url)">
|
|
<img :src="url" class="preview-image">
|
|
</div>
|
|
</div>
|
|
</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="maintenanceData" style="width: 100%">
|
|
<el-table-column prop="manager" label="负责人" />
|
|
<el-table-column prop="type" label="维护类型" />
|
|
<el-table-column prop="remarks" label="备注" />
|
|
<el-table-column prop="time" label="维护时间" width="180" />
|
|
</el-table>
|
|
<div class="pagination-container">
|
|
<el-pagination
|
|
:current-page.sync="maintenancePage.page"
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
:page-size="maintenancePage.size"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="maintenancePage.total"
|
|
@size-change="handleMaintenanceSizeChange"
|
|
@current-change="handleMaintenanceCurrentChange"
|
|
/>
|
|
</div>
|
|
</el-card>
|
|
|
|
<!-- 保险记录表 -->
|
|
<el-card class="box-card" style="margin-top: 20px;">
|
|
<div slot="header">
|
|
<span style="color: #027db4;">飞行器保险记录</span>
|
|
<el-button
|
|
style="float: right; padding: 5px; background-color: #02a7f0; color: white;"
|
|
type="text"
|
|
icon="el-icon-plus"
|
|
@click="handleAddInsurance"
|
|
>新增保险</el-button>
|
|
</div>
|
|
<el-table :data="insuranceData" style="width: 100%">
|
|
<el-table-column prop="name" label="保险名称" />
|
|
<el-table-column prop="type" label="保险类型" />
|
|
<el-table-column prop="expireTime" label="截至时间" width="180" />
|
|
<el-table-column label="操作" width="200" align="center">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" size="small" @click="handleInsuranceView(scope.row)">查看详情</el-button>
|
|
<el-button type="text" size="small" @click="handleInsuranceEdit(scope.row)">编辑</el-button>
|
|
<el-button type="text" size="small" @click="handleInsuranceDelete(scope.row)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="pagination-container">
|
|
<el-pagination
|
|
:current-page.sync="insurancePage.page"
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
:page-size="insurancePage.size"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="insurancePage.total"
|
|
@size-change="handleInsuranceSizeChange"
|
|
@current-change="handleInsuranceCurrentChange"
|
|
/>
|
|
</div>
|
|
</el-card>
|
|
|
|
<!-- API模块入口 -->
|
|
<div class="api-links">
|
|
<a href="javascript:void(0)" class="api-link" @click="handleApiClick('data')">飞行器数据记录</a>
|
|
<a href="javascript:void(0)" class="api-link" @click="handleApiClick('fault')">飞行器故障记录</a>
|
|
<a href="javascript:void(0)" class="api-link" @click="handleApiClick('video')">飞行器视频记录</a>
|
|
</div>
|
|
|
|
<!-- 图片预览 -->
|
|
<el-dialog :visible.sync="previewVisible" append-to-body>
|
|
<img :src="previewUrl" alt="Preview" style="width: 100%">
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'aircraftDetail',
|
|
data() {
|
|
return {
|
|
form: {
|
|
name: '大疆',
|
|
model: 'T100',
|
|
type: '载人飞行',
|
|
region: '北京',
|
|
scenicArea: '白云山',
|
|
manager: '小明',
|
|
remarks: '设备状态良好',
|
|
imageUrls: Array(6).fill('https://axure-file.lanhuapp.com/md5__f344f816278c2a3f5164e4571c580ad9.png'),
|
|
},
|
|
maintenanceData: Array(10).fill({
|
|
manager: '小明',
|
|
type: '维修',
|
|
remarks: '电池损坏',
|
|
time: '2016-09-21 08:50:08'
|
|
}),
|
|
insuranceData: Array(2).fill({
|
|
name: '安全保险',
|
|
type: '三方险',
|
|
expireTime: '2016-09-21 08:50:08'
|
|
}),
|
|
maintenancePage: {
|
|
page: 1,
|
|
size: 10,
|
|
total: 20
|
|
},
|
|
insurancePage: {
|
|
page: 1,
|
|
size: 10,
|
|
total: 2
|
|
},
|
|
previewVisible: false,
|
|
previewUrl: ''
|
|
}
|
|
},
|
|
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
|
|
},
|
|
handleMaintenanceSizeChange(val) {
|
|
this.maintenancePage.size = val
|
|
// 重新获取维护记录数据
|
|
},
|
|
handleMaintenanceCurrentChange(val) {
|
|
this.maintenancePage.page = val
|
|
// 重新获取维护记录数据
|
|
},
|
|
handleInsuranceSizeChange(val) {
|
|
this.insurancePage.size = val
|
|
// 重新获取保险记录数据
|
|
},
|
|
handleInsuranceCurrentChange(val) {
|
|
this.insurancePage.page = val
|
|
// 重新获取保险记录数据
|
|
},
|
|
handleAddInsurance() {
|
|
// 跳转到新增保险页面
|
|
},
|
|
handleInsuranceView(row) {
|
|
// 查看保险详情
|
|
console.log('查看保险详情:', row)
|
|
},
|
|
handleInsuranceEdit(row) {
|
|
// 编辑保险信息
|
|
console.log('编辑保险信息:', row)
|
|
},
|
|
handleInsuranceDelete(row) {
|
|
// 删除保险记录
|
|
console.log('删除保险记录:', row)
|
|
},
|
|
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.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;
|
|
flex-direction: column;
|
|
gap: 30px;
|
|
.api-link {
|
|
color: #027db4;
|
|
text-decoration: none;
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
</style>
|