EDFS-MCU/src/views/taskList/infoDrawer.vue

<template>
  <div class="fault-rule-drawer">
    <el-drawer v-model="isShowDrawer" title="任务详情" direction="rtl" size="50%"
               modal-class="model-dev-opn"
               :before-close="handleBeforeClose">
      <main class="wh-full" v-loading="loading">
        <template v-for="detail in detailList">
          <el-descriptions border :title="`${detail.sn}任务详情`" style="margin-top: 20px">
            <el-descriptions-item :label-width="60" label="状态">
              <el-tag size="small" :type="statusTypeMap[detail.status]">{{
                  statusList.find(r => r.value ===
                    detail.status)?.label || '--'
                }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item :label-width="100" label="总数任务量">{{
                detail.total
              }}
            </el-descriptions-item>
            <el-descriptions-item :label-width="110" label="已完任务量">{{
                detail.finish
              }}
            </el-descriptions-item>
            <el-descriptions-item :label-width="60" label="信息">
              {{ detail?.info ? detail.info : '暂无信息' }}
            </el-descriptions-item>
            <el-descriptions-item label="当前进度" style="width: 400px">
              <template v-if="detail.total === 0 || detail.status === -1 || detail.status === 2 ">
                <span>暂无进度</span>
              </template>
              <el-progress v-else
                           :percentage="Math.floor((detail.finish / detail.total) * 100)"
                           :text-inside="true" :stroke-width="20"/>
            </el-descriptions-item>
          </el-descriptions>
        </template>
      </main>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { getSubTopic, type SubMsgData } from '@/utils/zmq'
import ZMQWorker from '@/composables/useZMQJsonWorker'
import { getTaskInfo, type TaskInfo, type TaskList } from '@/api/module/taks'
import { useMessage } from '@/composables/useMessage'
import { statusList, statusTypeMap } from "./utils";

const message = useMessage()
const worker = ZMQWorker.getInstance()
const isShowDrawer = defineModel<boolean>()

const detailList = ref<TaskInfo[]>([])
const loading = ref(false)

async function onDetail(row: TaskList) {
  loading.value = true
  const res = await getTaskInfo(row.id);
  if (res.code === 0) {
    detailList.value = res?.data?.details ?? []
  } else {
    message.error('获取任务详情失败')
  }
  loading.value = false
}

const currentTaskId = ref('')

async function open(row: TaskList) {
  isShowDrawer.value = true
  currentTaskId.value = row.id
  await onDetail(row)
  worker.subscribe(getSubTopic('server', 'event', 'task'), zmqTaskCb)
}

function zmqTaskCb(msg: SubMsgData) {
  console.log('info', msg)
  const { feedback } = msg
  const taskId = feedback[0]
  const id = feedback[1]
  const deviceStatus = feedback[2] || '未知状态'
  const finish = feedback[3] || 0
  const total = feedback[4] || 0
  if (currentTaskId.value !== taskId) return
  const detail = detailList.value.find(item => item.id === id)
  if (!detail) return
  detail.status = deviceStatus
  detail.finish = finish
  detail.total = total
  detail.info = `子任务${statusList.find(r => r.value ===
    detail.status)?.label || '--'}`
}

function handleBeforeClose(done: () => void) {
  isShowDrawer.value = false
  currentTaskId.value = ''
  worker.unsubscribe(getSubTopic('server', 'event', 'task'))
  done()
}

defineExpose({
  open,
})
</script>

<style scoped lang="scss">
.fault-rule-drawer {
  font-size: 16px;

  :deep(.edfs-wrap) {
    width: auto;
  }

  :deep(.el-drawer__header) {
    color: var(--text-color);
  }
}
</style>