无人机管理后台前端(已迁走)
张含笑
2025-06-28 56fe5da07bf822f86ce4d0e8b32a7941b1451091
src/views/job/components/TaskIntermediateContent/TaskIntermediateContent.vue
@@ -6,7 +6,8 @@
         <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" />
@@ -16,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
                              ? '#00CDC2'
                              : scope.row.status === 2
                  <span :style="{
                     color:
                        scope.row.status === 1
                           ? '#00CDC2'
                           : scope.row.status === 2
                              ? '#FF720F'
                              : scope.row.status === 3
                              ? '#00AA2D'
                              : 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>
@@ -51,22 +50,12 @@
            <el-table-column prop="creator_name" label="创建人" align="center" show-overflow-tooltip />
            <el-table-column label="操作" width="200" align="center">
               <template #default="scope">
                  <div
                     v-if="scope.row.status === 2"
                     class="btnItem turnBack"
                     link
                     type="primary"
                     @click="turnBack(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)"
                  >
                  <div v-if="scope.row.status === 1" class="btnItem cancelTask" link type="primary"
                     @click="cancelTask(scope.row)">
                     取消任务
                  </div>
                  <div class="btnItem" link type="primary" @click="handleDetail(scope.row)">查看</div>
@@ -75,17 +64,10 @@
         </el-table>
      </div>
      <div class="pagination">
         <el-pagination
            class="ztzf-pagination"
            popper-class="custom-pagination-dropdown"
            v-model:current-page="jobListParams.current"
            v-model:page-size="jobListParams.size"
            :page-sizes="[10, 20, 30, 40]"
            layout="prev, pager, next, sizes, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
         />
         <el-pagination class="ztzf-pagination" popper-class="custom-pagination-dropdown"
            v-model:current-page="jobListParams.current" v-model:page-size="jobListParams.size"
            :page-sizes="[10, 20, 30, 40]" layout="prev, pager, next, sizes, jumper" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
   </div>
   <!-- 添加任务 -->
@@ -97,18 +79,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>
@@ -236,15 +210,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;
@@ -263,15 +245,17 @@
         border: 1px solid #ffa500;
         color: #ffa500;
      }
      &.cancelTask {
         border: 1px solid #3efe96;
         color: #3efe96;
      }
   }
   // :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);
   //       }
@@ -280,13 +264,16 @@
   :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;
      justify-content: flex-end;
   }
   :deep(.el-pagination button) {
      background: center center no-repeat none !important;
      color: #8eb8ea !important;