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

chenyao

2025-04-12 aef47a5501223c8d4c0bc6412a9a3d971e664225

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

@@ -1,38 +1,53 @@
<template>
   <el-divider content-position="left">相关任务 {{ total }}次</el-divider>
   <el-table :data="list" style="width: 100%">
      <el-table-column prop="id" label="id" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="industry_type_str" label="任务类型" />
      <el-table-column prop="ai_type_str" label="关联算法" />
      <el-table-column prop="event_number" label="事件工单" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column prop="area_code" label="地区代码" />
      <el-table-column prop="begin_time" label="开始时间" />
      <el-table-column prop="end_time" label="结束时间" />
      <el-table-column prop="creator_name" label="创建者" />
      <el-table-column label="操作">
         <template #default="scope">
            <el-button type="primary" link @click="viewJob(scope.row)">查看</el-button>
         </template>
      </el-table-column>
   </el-table>
   <el-pagination
      background
      :page-sizes="[10, 20, 30, 50]"
      v-model:current-page="sizeParams.current"
      v-model:page-size="sizeParams.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @change="pageChange"
   />
   <div class="devicejob-container">
      <div class="machineTableDetailsTitle">
         <p>
            相关任务 <span>{{ total }}</span
            >次
         </p>
      </div>
      <div class="devicelob-table">
         <el-table
            :data="list"
            :row-class-name="tableRowClassName"
            style="width: 100%"
            :row-style="{ height: '48px', fontSize: '14px', 'text-align': 'center' }"
            :header-cell-style="{ 'text-align': 'center', height: '36px', fontSize: '14px' }"
         >
            <el-table-column label="序号" type="index" width="60">
               <template #default="{ $index }">
                  {{ ($index + 1).toString().padStart(2, '0') }}
               </template>
            </el-table-column>
            <el-table-column prop="id" label="任务编号" />
            <el-table-column prop="name" label="任务名称" />
            <el-table-column prop="industry_type_str" label="任务类型" />
            <el-table-column prop="ai_type_str" label="关联算法" />
            <el-table-column prop="event_number" label="事件工单" />

  <DeviceJobDetails v-model:show="deviceJobDetailsShow"/>
            <el-table-column label="操作">
               <template #default="scope">
                  <el-button type="primary" link @click="viewJob(scope.row)">查看</el-button>
               </template>
            </el-table-column>
         </el-table>
      </div>
      <el-pagination
         background
         :page-sizes="[10, 20, 30, 50]"
         v-model:current-page="sizeParams.current"
         v-model:page-size="sizeParams.size"
         layout=" prev, pager, next, jumper"
         :total="total"
         @change="pageChange"
      />
   </div>

   <DeviceJobDetails v-model:show="deviceJobDetailsShow" />
</template>
<script setup>
import { useStore } from 'vuex'
import DeviceJobDetails from './DeviceJobDetails/DeviceJobDetails.vue';
import DeviceJobDetails from './DeviceJobDetails/DeviceJobDetails.vue'
import { getDeviceJobList } from '@/api/home/task'

const list = ref([])
@@ -41,7 +56,7 @@
})
const sizeParams = ref({
   current: 1,
   size: 10,
   size: 5,
})
const store = useStore()
const device_sn = computed(() => store.state.home.singleUavHome.device_sn)
@@ -49,9 +64,9 @@
const deviceJobDetailsShow = ref(false)
const wayLineJodInfoId = ref(null)
provide('wayLineJodInfoId', wayLineJodInfoId)
const viewJob = (row) => {
  wayLineJodInfoId.value = row.id
  deviceJobDetailsShow.value = true
const viewJob = row => {
   wayLineJodInfoId.value = row.id
   deviceJobDetailsShow.value = true
}

const getList = () => {
@@ -67,8 +82,165 @@
   sizeParams.value.current = val
   getList()
}
// 表格隔行变色
const tableRowClassName = ({ row, rowIndex }) => {
   if (rowIndex % 2 === 1) {
      return 'warning-row'
   } else {
      return 'success-row'
   }
}
onMounted(() => {
   getList()
})
</script>
<style scoped lang="scss"></style>
<style lang="scss">
.devicejob-container {
   // 表格
   .el-table__inner-wrapper:before {
      height: 0 !important;
   }
   .el-table .warning-row {
      --el-table-tr-bg-color: rgba(22, 43, 74, 0.79);
   }
   .el-table .warning-row::after {
      position: absolute;
      content: '';
      left: 0;
      width: 100%;
      border-bottom: 1px solid;

      border-image: linear-gradient(
            90deg,
            rgba(25, 162, 255, 0) 10%,
            rgba(20, 125, 202, 1) 50%,
            rgba(25, 162, 255, 0) 90%
         )
         2 2 2 2;
   }
   .el-table .success-row {
      --el-table-tr-bg-color: #0b1d38;
   }
   .el-table .success-row::after {
      position: absolute;
      content: '';
      left: 0;
      width: 100%;
      border-bottom: 1px solid;

      border-image: linear-gradient(
            90deg,
            rgba(25, 162, 255, 0) 10%,
            rgba(20, 125, 202, 1) 79%,
            rgba(25, 162, 255, 0) 90%
         )
         2 2 2 2;
   }
}
</style>
<style scoped lang="scss">
// 标题
.machineTableDetailsTitle {
   margin: 0 24px;
   margin-bottom: 16px;
   background: url('/src/assets/images/signMachineNest/machineRight/detailtitle.png') no-repeat center;
   background-size: 100% 100%;
   p {
      display: inline-block;
      margin-left: 30px;
      font-size: 16px;
      color: #ddf0ff;
      line-height: 20px;
      text-align: left;
      margin-bottom: 8px;
      span {
         font-size: 26px;
         color: #0282ff;
         font-weight: bold;
      }
   }
}
// 表格
.devicelob-table {
   padding: 0 17px;
}
.el-table {
   color: #fff;
   --el-table-border-color: var(--el-border-color-lighter);
   --el-table-border: none !important;
   --el-table-text-color: #fff !important;
   --el-table-header-text-color: #fff !important;
   --el-table-row-hover-bg-color: none !important;
   --el-table-current-row-bg-color: none !important;
   --el-table-header-bg-color: none !important;
   --el-table-fixed-box-shadow: none !important;
   --el-table-bg-color: none !important;
   --el-table-tr-bg-color: none !important;
   --el-table-expanded-cell-bg-color: none !important;
   --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
   --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
}
.el-table__header {
   width: 0 !important;
}
.el-table__body {
   border-collapse: collapse;
}
:deep(.el-table .el-table__cell) {
   padding: 0 !important;
   text-align: center !important;
}
:deep(.el-table .el-table__cell) {
   padding: 0 !important;
}
:deep(.el-table thead) {
   border-bottom: 1px solid;
   border: 1px solid;
   border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
   color: var(--el-table-header-text-color);
   background: #102441;
}
// 分页
:deep(.el-pagination) {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   border-radius: 4px;
   margin-top: 15px;
}
:deep(.el-pagination button) {
   background: center center no-repeat none !important;
   color: #8eb8ea !important;
}
:deep(.el-pager li) {
   background: none !important;
   color: #8eb8ea !important;
}
:deep(.el-pager li.is-active) {
   background: #021022 !important;
   border-radius: 0px 0px 0px 0px;
   border: 1px solid #1479ef;
   color: #c7e1ff !important;
}
:deep(.el-pagination__goto) {
   color: #c7e1ff !important;
}
:deep(.el-pagination__classifier) {
   color: #c7e1ff !important;
}
:deep(.el-pager .el-input__wrapper) {
   background: #021022 !important;
   color: #c7e1ff !important;
   border: 1px solid #1479ef !important;
   z-index: 1;
}
:deep(.el-input__wrapper) {
   background: #021022 !important;
   box-shadow: none !important;
   border: 1px solid #178bff;
   color: #fff !important;
}
:deep(.el-input__inner) {
   color: #fff !important;
}
</style>