feat:更新任务管理详情任务

chenyao

2025-12-09 b51a317c7c3db9757317f34902fe869caae130b9

 src/views/job/components/JobRelatedEvents.vue

@@ -2,12 +2,13 @@
   <div class="JobRelatedEvents">
      <div class="machineTableDetailsTitle">
         <img src="/src/assets/images/task/sign.svg" alt="">
      <p>
         关联事件
         <span>{{ total }}</span>
         件
      </p>
   </div>
      <div class="title">
        关联事件<span>{{ total }}</span>件
      </div>
      <div class="exportBtn" v-if="props.isShowExportTheTask">
        <el-button class="playback-video-btn" type="primary" @click="exportTheTask" size="small">导出报表</el-button>
      </div>
     </div>
   <div class="search">
      <div class="searchBox">
         <div class="item">
@@ -44,15 +45,21 @@
         :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 label="序号" type="index" width="60" align="center">
            <template #default="{ $index }">
               {{ ($index + 1 + (sizeParams.current - 1) * sizeParams.size).toString().padStart(2, '0') }}
            </template>
         </el-table-column>
         <el-table-column prop="event_num" label="事件编号"  align="center"/>
      :row-style="{ height: pxToRem(48), fontSize: pxToRem(14), 'text-align': 'center' }"
      :header-cell-style="{ 'text-align': 'center', height: pxToRem(36), fontSize: pxToRem(14) }"
    >
      <el-table-column label="序号" type="index" :width="pxToRemNum(60)">
        <template #default="{ $index }">
          {{ ($index + 1 + (sizeParams.current - 1) * sizeParams.size).toString().padStart(2, '0') }}
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="event_num" label="事件编号" :width="pxToRemNum(160)">
        <template #default="scope">
          <el-tooltip-copy :content="scope.row.event_num" :showCopyText="true">
            {{ scope.row.event_num }}
          </el-tooltip-copy>
        </template>
      </el-table-column>
         <el-table-column show-overflow-tooltip prop="event_name" label="事件名称"  align="center"/>
         <el-table-column show-overflow-tooltip prop="remark" label="事件地址"  align="center"/>
         <el-table-column show-overflow-tooltip prop="ai_types" label="关联算法"  align="center"/>
@@ -66,11 +73,30 @@
               <div class="ended" v-if="scope.row.status === 5">已完结</div>
            </template>
         </el-table-column>
         <el-table-column label="操作" width="90" align="center">
            <template #default="scope">
               <div class="ztzf-view btnItem" @click="examine(scope.row)">查看</div>
            </template>
         </el-table-column>
      <el-table-column label="操作" :width="pxToRemNum(150)">
        <template #default="scope">
          <div class="btnGroups">
            <el-popover
              v-if="scope.row.status === 3 || scope.row.status === 0"
              popper-class="ztzf-custom-qrcode-popover"
              :width="pxToRem(119)"
              :visible="scope.row.showQR"
              placement="top"
              title=""
              trigger="click"
            >
              <template #reference>
                <el-button type="text" @click="QRCode(scope.row)">事件导航</el-button>
              </template>
              <div class="qrcode-content">
                <div class="close-btn" @click.stop="scope.row.showQR = false">×</div>
                <CreateQRcode v-if="scope.row.showQR" :latAndLon="latAndLon"></CreateQRcode>
              </div>
            </el-popover>
            <el-button icon="el-icon-view" type="text" @click="examine(scope.row)">查看</el-button>
          </div>
        </template>
      </el-table-column>
      </el-table>
   </div>
   <el-pagination
@@ -88,20 +114,21 @@
</template>
<script setup>
import { useStore } from 'vuex'
import { wgs84ToGcj02 } from '@/utils/coordinateTransformation'
import CreateQRcode from '@/components/CreateQRcode/CreateQRcode.vue'
import { getDeviceEventList } from '@/api/job/task'
import { dayjs, ElMessage } from 'element-plus'
import { useRouter } from 'vue-router';
import { pxToRem } from '@/utils/rem'
import { NestDetailApi, exportTaskReports } from '@/api/home'
import { pxToRem, pxToRemNum } from '@/utils/rem'
import TaskAlgorithmBusiness from './TaskAlgorithmBusiness.vue'
const router = useRouter();
const emit = defineEmits(['refresh'])
const props = defineProps({
   jobTimes: Array,
   batchNo: Number,
})
const props = defineProps(['jobTimes', 'batchNo', 'waylineJobId','detailName','isShowExportTheTask'])
const taskData = ref('')
const algorithmChange = val => {
   params.value.ai_types = val
  handleSearch()
}
const loading = ref(false)
const list = ref()
@@ -114,7 +141,7 @@
})
const sizeParams = ref({
   current: 1,
   size: 10,
   size: 5,
})
// 日期选择
const changeselect = () => {
@@ -136,16 +163,20 @@
const wayLineJobInfoId = inject('wayLineJobInfoId')

const getList = () => {
   if (!wayLineJobInfoId.value) return
   params.value.way_line_job_info_id = wayLineJobInfoId.value
   params.value.batchNo = props.batchNo
   loading.value = true
   getDeviceEventList(params.value, sizeParams.value).then(res => {
      const resData = res?.data?.data || {}
      list.value = resData.records
      total.value = resData.total
      loading.value = false
   })
  if (!wayLineJobInfoId.value) return
  params.value.way_line_job_info_id = wayLineJobInfoId.value
  params.value.batch_no = props.batchNo
  loading.value = true
  getDeviceEventList(params.value, sizeParams.value).then(res => {
    const resData = res?.data?.data || {}
    list.value = resData.records.map(item => ({
      ...item,
      showQR: false, // 为每条数据添加showQR状态
    }))
    total.value = resData.total
    loading.value = false
    // store.commit('setJobEventList', list.value)
  })
}

const pageChange = val => {
@@ -176,46 +207,73 @@
   getList()
}
const handleSearch = () => {
   // console.log('sousuo', params.value)

   getList()
}
// 二维码
const latAndLon = ref(null)
const QRCode = item => {
  const [gcjLng, gcjLat] = wgs84ToGcj02(Number(item.longitude), Number(item.latitude))
  latAndLon.value = `${gcjLng},${gcjLat}`
  list.value.forEach(i => {
    i.showQR = i.id === item.id ? !i.showQR : false
  })
}
// 导出任务报表
const exportTheTask = () => {
  const params = {
    wayLineJobInfoId: wayLineJobInfoId.value,
    waylineJobId: props.waylineJobId,
    batchNo: props.batchNo,
  }
  exportTaskReports(params).then(res => {
    const elink = document.createElement('a')
    elink.download = props.detailName + '.docx'
    elink.style.display = 'none'
    const blob = new Blob([res.data])
    elink.href = URL.createObjectURL(blob)
    document.body.appendChild(elink)
    elink.click()
    document.body.removeChild(elink)
  })
}
onMounted(() => {
   getList()
})
</script>
<style lang="scss">
// .custom-date-picker .el-picker-panel__content .el-date-table td.disabled div {
//    background-color: #00193b !important;
//    color: #505050 !important;
//    cursor: not-allowed;
// }
</style>
<style scoped lang="scss">
.JobRelatedEvents {
   .machineTableDetailsTitle {
   margin-bottom: 16px;
   // background: url('/src/assets/images/task/detailtitle.png') no-repeat center;
      border-bottom: 2px solid #e4e7ed;
   background-size: 100% 100%;
   img{
         width: 15px;
         height: 15px;}
   p {
      display: inline-block;
      margin-left: 10px;
      font-size: 16px;
      color: #363636;
      line-height: 20px;
      text-align: left;
      margin-bottom: 8px;
      span {
         font-size: 26px;
         color: #0282ff;
         font-weight: bold;
      }
   }
}
    display: flex;
    border-bottom: 2px solid #e4e7ed;
    margin-bottom: 16px;
    //justify-content: space-between;
    align-content: center;
    .exportBtn {
      margin-left: 16px;
      //margin-bottom: 8px;
      //line-height: 20px;
    }
    img {
      margin-top: 6px;
        width: 15px;
        height: 15px;
    }
    .title {
      display: inline-block;
      margin-left: 10px;
      font-size: 16px;
      color: #363636;
      line-height: 20px;
      text-align: left;
      margin-bottom: 8px;

      span {
        font-size: 26px;
        color: #0282ff;
        font-weight: bold;
      }
    }
  }

// 待处理
.pending {