yangfeng
2024-03-29 82e27d0cadbddfc73e8b978e778b802dc8e51fa1
src/views/dashboard/components/DeviceStatusInfo.vue
@@ -34,7 +34,6 @@
          </span>
        </span>
      </span>
      <!--      TODO: 应该改成 plc里取,缺接口 -->
      <div class="device-b">工序运行时间:{{ runningTime }}</div>
    </div>
    <div v-if="type == 2" class="color-two">
@@ -49,7 +48,7 @@
          </template>
          <template v-else>
            <span>不在集群中</span>
            <span>未加入集群</span>
          </template>
        </span>
      </span>
@@ -73,6 +72,9 @@
import type { PLCResponse } from '@/api/plc'
import { useTasksStore } from '@/stores/tasks'
import { storeToRefs } from 'pinia'
import type { TasksGroupByChannel } from '@/api/task'
import { isNumber } from 'lodash-es'
import { useInterval } from '@vueuse/core'
export interface DeviceStatusInfoProps {
  plc?: PLCResponse
@@ -143,11 +145,40 @@
  return `${days}天${hours}时${m}分`
}
/**
 * 获取某任务所在通道的运行中的任务
 * @param channelMap
 * @param channelNumber
 */
function getChannelRunningTask(channelMap?: TasksGroupByChannel, channelNumber?: number) {
  if (!channelMap || !isNumber(channelNumber)) {
    return
  }
  const channel = channelMap[channelNumber]
  if (channel) {
    const taskList = channel?.Tasks ?? []
    return taskList.find((ele) => ele.Procedure.Status === 2)
  }
}
// 工序运行时间
const taskStore = useTasksStore()
const { activeTask } = storeToRefs(taskStore)
const { activeTask, channels } = storeToRefs(taskStore)
const { counter, reset } = useInterval(1000, { controls: true })
const runningTime = computed(() => {
  return getTaskRunningTime(activeTask?.value?.Procedure?.realStartTime, activeTask?.value?.Procedure?.realEndTime)
  if (counter.value > 1000) {
    // 拿一个 counter 定时触发工序运行时间的重新计算和渲染, 防止溢出需要重置
    reset()
  }
  // 如果当前选中的是已完成的任务, 使用当前选中任务来展示
  if (activeTask?.value?.Procedure?.Status === 3) {
    return getTaskRunningTime(activeTask.value.Procedure?.realStartTime, activeTask.value.Procedure?.realEndTime)
  }
  // 如果当前选中的是运行中或者未开始的任务, 使用当前选中任务所在通道的正处于运行中的任务来展示
  const runningTask = getChannelRunningTask(channels?.value, activeTask?.value?.Channel)
  return getTaskRunningTime(runningTask?.Procedure?.realStartTime, runningTask?.Procedure?.realEndTime)
})
</script>
@@ -244,9 +275,12 @@
        margin: 8px 5px 0 5px;
      }
      span {
        height: 32px;
        height: 29px;
        display: inline-block;
        line-height: 29px;
        vertical-align: middle;
        text-align: center;
        font-size: 12px;
        display: inline-block;
        float: left;
        font-weight: bold;