<!-- 任务详情 -->
|
<template>
|
<el-dialog
|
append-to-body
|
modal-class="detailsOfHistoricalTasks"
|
v-model="isShow"
|
title="历史任务详情"
|
:width="pxToRem(1500)"
|
:close-on-click-modal="false"
|
:destroy-on-close="true"
|
>
|
<div class="content">
|
<div class="contentLeft">
|
<el-divider content-position="left">详情</el-divider>
|
<div class="infoBox">
|
<div class="itemBox" v-for="item in infoList">
|
<div class="itemTitle">{{ item.name }}：</div>
|
<div class="itemValue">{{ item.value }}</div>
|
</div>
|
</div>
|
<JobRelatedEvents v-if="isShow" />
|
<el-divider content-position="left">任务成果 xxx个</el-divider>
|
<div class="imgListBox">
|
<div v-for="item in imgList" class="imgItem">xxx图片</div>
|
</div>
|
</div>
|
<div class="contentRight">map</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { pxToRem } from '@/utils/rem'
|
import JobRelatedEvents from './JobRelatedEvents.vue'
|
|
const isShow = defineModel('show')
|
|
|
const imgList = ref([
|
{ name: '图片1', url: 'xxx' },
|
{ name: '图片1', url: 'xxx' },
|
{ name: '图片1', url: 'xxx' },
|
{ name: '图片1', url: 'xxx' },
|
])
|
|
const infoList = ref([
|
{ name: '任务编号', value: 'xxx' },
|
{ name: '任务所属机巢', value: 'xxx' },
|
{ name: '关联算法', value: 'xxx' },
|
{ name: '任务名称', value: 'xxx' },
|
{ name: '所属单位', value: 'xxx' },
|
{ name: '任务类型', value: 'xxx' },
|
{ name: '任务周期', value: 'xxx' },
|
{ name: '飞行事件', value: 'xxx' },
|
{ name: '任务频次', value: 'xxx' },
|
{ name: '任务描述', value: 'xxx' },
|
])
|
|
</script>
|
|
<style lang="scss">
|
.detailsOfHistoricalTasks {
|
.el-dialog {
|
--el-dialog-margin-top: 5vh;
|
}
|
|
.el-pagination {
|
justify-content: center;
|
padding: 20px;
|
}
|
|
.el-dialog__body {
|
height: 80vh;
|
}
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.content {
|
display: flex;
|
height: 100%;
|
|
.contentLeft {
|
width: 900px;
|
overflow: auto;
|
|
.infoBox {
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
gap: 10px; // 列之间的间距
|
padding: 10px;
|
|
.itemBox {
|
background-color: #fff;
|
border: 1px solid #ddd;
|
border-radius: 4px;
|
padding: 15px;
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
display: flex;
|
align-items: center;
|
}
|
|
.itemTitle {
|
font-weight: bold;
|
color: #333;
|
}
|
|
.itemValue {
|
color: #666;
|
}
|
}
|
|
.imgListBox {
|
display: flex;
|
|
.imgItem {
|
width: 200px;
|
height: 200px;
|
}
|
}
|
}
|
|
.contentRight {
|
width: 0;
|
flex-grow: 1;
|
background: #19ad8d;
|
}
|
}
|
</style>
|
