feat: 添加报工输入弹窗

songshankun

2023-11-08 d517e5eacb38b075ae7cdffc011fc84401e587a8

 src/views/dashboard/components/ProcessingInfo.vue

@@ -1,14 +1,7 @@
<template>
  <div class="processing-info">
    <div class="step">
      <el-steps
        v-if="task?.AllProcedures"
        :active="task.CurrentProcedureIndex ?? 0"
        finish-status="success"
        class="steps"
      >
        <el-step v-for="(item, index) in task.AllProcedures" :key="index" icon="" :title="item"></el-step>
      </el-steps>
      <TaskStep :active="task?.CurrentProcedureIndex ?? 0" :steps="task?.AllProcedures ?? []"></TaskStep>
    </div>
    <div class="details">
      <div class="row">
@@ -55,13 +48,12 @@
<script setup lang="ts">
// 加工信息组件
import type { Task } from '@/api/task'
import { computed, onUnmounted, toRefs, watch } from 'vue'
import { computed, toRefs } from 'vue'
import { useDateFormat } from '@vueuse/core'
import { useRequest } from 'vue-hooks-plus'
import { getProductProgress } from '@/api'
import type { ProductProgressParams } from '@/api'
import { isNumber } from 'lodash-es'
import { CHANNEL_NAME_MAP } from '@/common/constants'
import { usePLCStore } from '@/stores/plc'
import TaskStep from '@/views/dashboard/components/TaskStep.vue'

const props = defineProps<{
  task?: Task
@@ -94,6 +86,8 @@
  return result > 100 ? 100 : result
}

const plcStore = usePLCStore()

/**
 * 计算完成进度, 任务状态未生产固定为 0% 已完成固定为 100% 生产中则从plc获取
 */
@@ -107,47 +101,10 @@
  }

  if (task?.value?.Procedure?.Status === 2) {
    return calculateProgress(plcResponse?.value?.data as Statistics)
    return calculateProgress(plcStore.plcInfo as Statistics)
  }

  return 0
})

/**
 * 如果任务状态是进行中, 则轮询 plc 取进度
 */
const {
  data: plcResponse,
  run: startPLCPolling,
  cancel: cancelPLCPolling
} = useRequest(
  () =>
    getProductProgress({
      channel: task?.value?.Channel,
      procedureId: task?.value?.Procedure.ID
    } as ProductProgressParams),
  {
    manual: true,
    pollingInterval: 6000,
    pollingWhenHidden: false
  }
)

/**
 * 任务状态是生产中则轮询plc取目标数和完成数计算完成进度
 */
watch(
  () => task?.value,
  () => {
    cancelPLCPolling()
    if (task?.value?.Procedure?.Status === 2) {
      startPLCPolling()
    }
  }
)

onUnmounted(() => {
  cancelPLCPolling()
})

/**
@@ -167,9 +124,8 @@

.step {
  width: 100%;
  height: 66px;
  height: 46px;
  overflow-x: auto;
  margin-top: -5px;
  padding: 0 20px;
  .steps {
    height: 100%;
@@ -213,8 +169,12 @@
}
:deep(.el-progress-bar__outer) {
  border-radius: 8px;
  background-color: #13235a;
}
:deep(.el-progress-bar__inner) {
  border-radius: 8px;
}
:deep(.el-step__icon .is-icon) {
  background-color: transparent;
}
</style>