无人机管理后台前端(已迁走)
chenyao
2025-07-14 4bb904fc27caf0576ed7dbf46d5909a7b1f778c0
src/views/job/components/TaskIntermediateContent/TaskIntermediateContent.vue
@@ -3,16 +3,11 @@
   <div class="task-intermediate-content">
      <SearchBox @search="searchClick" @addTask="handleAddTask"></SearchBox>
      <div class="task-table">
         <el-table
         stripe
            :data="jobListData"
            :row-class-name="tableRowClassName"
            :row-style="{ height: '54px', fontSize: '14px', 'text-align': 'center' }"
            :header-cell-style="{ 'text-align': 'center', height: '36px', fontSize: '14px' }"
         >
         <el-table border :data="jobListData" class="custom-header">
            <el-table-column label="序号" type="index" width="60">
               <template #default="{ $index }">
                  {{ ($index + 1 + (jobListParams.current - 1) * jobListParams.size).toString().padStart(2, '0') }}
                  {{ ($index + 1 + (jobListParams.current - 1) * jobListParams.size).toString().padStart(2,
                     '0') }}
               </template>
            </el-table-column>
            <el-table-column prop="job_info_num" label="任务编号" show-overflow-tooltip align="center" />
@@ -22,22 +17,20 @@
            <el-table-column prop="ai_type_str" label="关联算法" show-overflow-tooltip align="center" />
            <el-table-column label="任务状态" align="center">
               <template #default="scope">
                  <span
                     :style="{
                        color:
                           scope.row.status === 1
                              ? '#ffe17e'
                              : scope.row.status === 2
                              ? '#ffa768'
                  <span :style="{
                     color:
                        scope.row.status === 1
                           ? '#00CDC2'
                           : scope.row.status === 2
                              ? '#FF720F'
                              : scope.row.status === 3
                              ? '#8effac'
                              : scope.row.status === 5
                              ? '#FF4848'
                              : scope.row.status === 7
                              ? '#A6A6A6'
                              : '',
                     }"
                  >
                                 ? '#00AA2D'
                                 : scope.row.status === 5
                                    ? '#FF4848'
                                    : scope.row.status === 7
                                       ? '#A6A6A6'
                                       : '',
                  }">
                     {{ scope.row.status ? getStatusText(scope.row.status) : '' }}
                  </span>
               </template>
@@ -53,10 +46,11 @@
                  <span>{{ scope.row.event_number ? scope.row.event_number : '/' }}</span>
               </template>
            </el-table-column>
            <el-table-column prop="cycle_time_value" label="任务时间" />
            <el-table-column prop="creator_name" label="创建人" align="center" />
            <el-table-column prop="cycle_time_value" label="任务时间" show-overflow-tooltip />
            <el-table-column prop="creator_name" label="创建人" align="center" show-overflow-tooltip />
            <el-table-column label="操作" width="200" align="center">
               <template #default="scope">
<<<<<<< HEAD
                  <div
                     v-if="scope.row.status === 2"
                     class="btnItem"
@@ -73,6 +67,14 @@
                     type="primary"
                     @click="cancelTask(scope.row)"
                  >
=======
                  <div v-if="scope.row.status === 2" class="btnItem turnBack" link type="primary"
                     @click="turnBack(scope.row)">
                     返航
                  </div>
                  <div v-if="scope.row.status === 1" class="btnItem cancelTask" link type="primary"
                     @click="cancelTask(scope.row)">
>>>>>>> 28c246747fe4214c22f3df73ad62b3cd2668dc3c
                     取消任务
                  </div>
                  <div class="btnItem" link type="primary" @click="handleDetail(scope.row)">查看</div>
@@ -105,18 +107,10 @@
      :wayLineJodInfoId="rowData.id"
   /> -->
   <!-- 历史任务详情 -->
   <DeviceJobDetails
      v-if="isShowDeviceJobDetails"
      v-model:show="isShowDeviceJobDetails"
      :wayLineJodInfoId="rowData.id"
      :batchNo="rowData.batch_no"
   />
   <CancelTaskDialog
      ref="cancelTaskDialogRef"
      v-model:isShowCancelTask="isShowCancelTask"
      :row-data="rowData"
      @refresh="getJobList"
   />
   <DeviceJobDetails v-if="isShowDeviceJobDetails" v-model:show="isShowDeviceJobDetails" :wayLineJodInfoId="rowData.id"
      :batchNo="rowData.batch_no" />
   <CancelTaskDialog ref="cancelTaskDialogRef" v-model:isShowCancelTask="isShowCancelTask" :row-data="rowData"
      @refresh="getJobList" />
</template>
<script setup>
@@ -244,15 +238,23 @@
<style lang="scss" scoped>
.task-intermediate-content {
   margin: 0 18px 16px 10px;
   height: 0;
   flex: 1;
   margin: 0 10px 10px 10px;
   background-color: #ffffff;
   padding: 14px 18px;
   padding: 20px;
   border-radius: 5px;
   display: flex;
   flex-direction: column;
   // 表格
   .task-table {
      height: 580px;
      height: 0;
      flex: 1;
      margin-top: 18px;
      overflow: auto;
   }
   .btnItem {
      height: 27px;
      line-height: 27px;
@@ -271,24 +273,39 @@
         border: 1px solid #ffa500;
         color: #ffa500;
      }
      &.cancelTask {
         border: 1px solid #3efe96;
         color: #3efe96;
         border: 1px solid #00AA2D;
         color: #00AA2D;
      }
   }
   :deep(.el-table) {
         --el-table-tr-bg-color: #ffffff;
         --el-table-striped-bg-color: #EFEFEF;
         .el-table__body tr.el-table__row--striped td {
            background-color: var(--el-table-striped-bg-color);
         }
   }
   // :deep(.el-table) {
   //       --el-table-tr-bg-color: #ffffff;
   //       --el-table-striped-bg-color: #EFEFEF;
   //       .el-table__body tr.el-table__row--striped td {
   //          background-color: var(--el-table-striped-bg-color);
   //       }
   // }
   // 分页
   :deep(.custom-header th.el-table__cell) {
      color: rgba(0, 0, 0, 0.85);
   }
   :deep(.el-table td.el-table__cell) {
      color: #606266;
   }
   :deep(.el-pagination) {
      display: flex;
<<<<<<< HEAD
      justify-content: right;
=======
      justify-content: flex-end;
>>>>>>> 28c246747fe4214c22f3df73ad62b3cd2668dc3c
   }
   :deep(.el-pagination button) {
      background: center center no-repeat none !important;
      color: #8eb8ea !important;