Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-...

chenyao

2025-04-03 4fd9505abfcc5947afa434cc8dc5827f574073f5

 src/views/SignMachineNest/MachineRight/MachineTableDetails/DeviceJob/DeviceJobDetails/DeviceJobDetails.vue

New file
@@ -0,0 +1,129 @@
<!-- 任务详情 -->
<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>