yangfeng
2023-12-12 1519870c0e18171ced014a840e86a459dc6b00f1
src/views/dashboard/components/ProcessingInfo.vue
@@ -1,24 +1,17 @@
<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">
        <div class="col">工单编号: {{ task?.Order?.workOrderId || '' }}</div>
        <div class="col">订单编号: {{ task?.Order?.orderId || '' }}</div>
        <div class="col">工单编号: {{ task?.Order?.workOrderId ?? '--' }}</div>
        <div class="col">订单编号: {{ task?.Order?.orderId ?? '--' }}</div>
      </div>
      <div class="row">
        <div class="col">产品名称: {{ task?.Order?.productName || '--' }}</div>
        <div class="col">数量: {{ task?.Order?.amount || 0 }}{{ task?.Order?.unit }}</div>
        <div class="col">数量: {{ task?.Order?.amount ?? '--' }}{{ task?.Order?.unit }}</div>
      </div>
      <div class="row">
        <div class="col">交货日期: {{ task?.Order?.deliverDate || '--' }}</div>
@@ -33,8 +26,8 @@
        <div class="col">通道: {{ isNumber(task?.Channel) ? CHANNEL_NAME_MAP[task?.Channel] : '--' }}</div>
      </div>
      <div class="row">
        <div class="col">客户名称: {{ task?.Order?.customer || '' }}</div>
        <div class="col">参数要求: {{ task?.Order?.parameter || '' }}</div>
        <div class="col">客户名称: {{ task?.Order?.customer || '--' }}</div>
        <div class="col">参数要求: {{ task?.Order?.parameter || '--' }}</div>
      </div>
    </div>
    <div class="process">
@@ -55,14 +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
@@ -101,19 +92,18 @@
 * 计算完成进度, 任务状态未生产固定为 0% 已完成固定为 100% 生产中则从plc获取
 */
const processingPercent = computed(() => {
  if (task?.value?.Procedure?.Status === 1) {
    return 0
  }
  // if (task?.value?.Procedure?.Status === 1) {
  //   return 0
  // }
  if (task?.value?.Procedure?.Status === 3) {
    return 100
  }
  // if (task?.value?.Procedure?.Status === 2 || task?.value?.Procedure?.Status === 1) {
  //   return calculateProgress(plcStore.plcInfo as Statistics)
  // }
  if (task?.value?.Procedure?.Status === 2) {
    return calculateProgress(plcStore.plcInfo as Statistics)
  }
  return 0
  return calculateProgress(plcStore.plcInfo as Statistics)
})
/**
@@ -124,7 +114,7 @@
  if (!timestamp) {
    return '--'
  }
  const time = useDateFormat(timestamp * 1000, 'YYYY-MM-DD', { locales: 'zh-cn' })
  const time = useDateFormat(timestamp * 1000, 'YYYY-MM-DD HH:mm:ss', { locales: 'zh-cn' })
  return time.value
}
</script>
@@ -133,9 +123,8 @@
.step {
  width: 100%;
  height: 66px;
  height: 46px;
  overflow-x: auto;
  margin-top: -5px;
  padding: 0 20px;
  .steps {
    height: 100%;
@@ -153,7 +142,7 @@
  }
}
.details {
  font-size: 18px;
  font-size: 17px;
  padding: 10px 20px;
  color: $text-color;
  .row {
@@ -168,7 +157,7 @@
  }
}
.process {
  font-size: 18px;
  font-size: 17px;
  padding: 10px 20px;
  color: $text-color;
  display: flex;
@@ -179,8 +168,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>