forked from drone/command-center-dashboard

罗广辉
2025-04-14 ba2f8eae0dfd804ca422915981874c0d91965b42
src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJobDetails/JobRelatedEvents.vue
@@ -1,47 +1,42 @@
<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="event_name" label="名称" />
      <el-table-column prop="media_type" label="类型" />
      <el-table-column prop="photo_url" label="图片">
      <template #default="scope">
        <el-image
          :style="{width: pxToRem(50), height:  pxToRem(50)}"
          :src="scope.row.photo_url"
          :preview-src-list="[scope.row.photo_url]"
          show-progress
               preview-teleported
          :initial-index="4"
          fit="cover"
        />
      </template>
    </el-table-column>
      <el-table-column prop="video_url" label="视频" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column prop="status" label="状态">
         <template #default="scope">
            <el-tag v-if="scope.row.status === 0" type="info">待处理</el-tag>
            <el-tag v-if="scope.row.status === 1" type="success">待分拨</el-tag>
            <el-tag v-if="scope.row.status === 2" type="warning">待处理</el-tag>
            <el-tag v-if="scope.row.status === 3" type="success">处理中</el-tag>
            <el-tag v-if="scope.row.status === 4" type="success">已完成</el-tag>
            <el-tag v-if="scope.row.status === 5" type="success">已完结</el-tag>
         </template>
      </el-table-column>
    <el-table-column label="操作" >
      <template #default="scope">
        <el-button type="primary" link @click="examine(scope.row)">审核</el-button>
        <el-button type="primary" link @click="distribution(scope.row)">分拨</el-button>
      </template>
    </el-table-column>
   </el-table>
   <div class="machineTableDetailsTitle"><span>关联事件</span></div>
   <div class="ztzf-table">
      <el-table
      :row-class-name="tableRowClassName"
         :data="list"
         style="width: 100%"
         :row-style="{ height: '38px', fontSize: '14px', 'text-align': 'center' }"
         :header-cell-style="{ 'text-align': 'center', height: '36px', fontSize: '14px' }"
      >
         <el-table-column prop="id" label="事件编号" />
         <el-table-column show-overflow-tooltip prop="event_name" label="事件名称" />
         <el-table-column show-overflow-tooltip prop="create_user" label="所属单位" />
         <el-table-column show-overflow-tooltip prop="remark" label="事件内容" />
         <el-table-column show-overflow-tooltip prop="ai_types" label="关联算法" />
         <el-table-column prop="status" label="工单状态">
            <template #default="scope">
               <div class="pending" v-if="scope.row.status === 0">待处理</div>
               <div class="reviewed" v-if="scope.row.status === 2">待审核</div>
               <div class="processing" v-if="scope.row.status === 3">处理中</div>
               <div class="done" v-if="scope.row.status === 4">已完成</div>
               <div class="ended" v-if="scope.row.status === 5">已完结</div>
            </template>
         </el-table-column>
         <el-table-column label="操作" width="80">
            <template #default="scope">
               <div class="ztzf-view" @click="examine(scope.row)">查看</div>
            </template>
         </el-table-column>
      </el-table>
   </div>
   <el-pagination
   class="ztzf-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"
      layout=" prev, pager, next,sizes, jumper"
      :total="total"
      @change="pageChange"
   />
@@ -49,13 +44,12 @@
<script setup>
import { useStore } from 'vuex'
import { getDeviceEventList } from '@/api/home/machineNest'
import { ElMessage } from 'element-plus';
import { ElMessage } from 'element-plus'
import { pxToRem } from '@/utils/rem'
const list = ref()
const params = ref({
  wayLineJodInfoId:null
   wayLineJodInfoId: null,
})
const sizeParams = ref({
   current: 1,
@@ -69,9 +63,9 @@
   ElMessage.warning('正在加急开发中...')
}
const examine = row => {
  ElMessage.warning('正在加急开发中...')
   ElMessage.warning('正在加急开发中...')
}
const wayLineJodInfoId = inject("wayLineJodInfoId");
const wayLineJodInfoId = inject('wayLineJodInfoId')
const getList = () => {
   params.value.wayLineJodInfoId = wayLineJodInfoId.value
@@ -79,17 +73,60 @@
      const resData = res?.data?.data || {}
      list.value = resData.records
      total.value = resData.total
   })
}
const pageChange = val => {
   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 scoped lang="scss">
.machineTableDetailsTitle {
   margin-bottom: 16px;
   background: url('/src/assets/images/signMachineNest/machineRight/detailtitle.png') no-repeat center;
   background-size: 100% 100%;
   span {
      display: inline-block;
      margin-left: 30px;
      font-size: 16px;
      color: #ddf0ff;
      line-height: 20px;
      text-align: left;
      margin-bottom: 8px;
   }
}
// 待处理
.pending{
color: #FF7411;
}
// 待审核
.reviewed{
color: #8CFEA7;
}
// 处理中
.processing{
color: #FFC398;
}
// 已完成
.done{
color: #AFD9FB;
}
// 已完结
.ended{
color: #11C4FF;
}
</style>