feat: 无任务选中通道时从p[lc读取统计

songshankun

2023-11-20 3a3cc473c33cb4a97399ace76a1b35e9ffd68525

feat: 无任务选中通道时从p[lc读取统计

 src/api/index.ts

@@ -43,7 +43,6 @@

export interface ProductProgressParams {
  channel: number
  procedureId: number
}

/**

 src/stores/plc.ts

@@ -27,8 +27,7 @@
  } = useRequest(
    () =>
      getProductProgress({
        channel: taskStore.activeTask?.Channel,
        procedureId: taskStore.activeTask?.Procedure.ID
        channel: taskStore.activeChannel ?? 0
      } as ProductProgressParams),
    {
      manual: true,
@@ -42,7 +41,7 @@
     * 如果切换到其他通道的任务,则重新轮询plc
     */
    unwatch.value = watch(
      () => taskStore.activeTask?.Channel,
      () => taskStore.activeChannel,
      () => {
        cancelPLCPolling()
        startPLCPolling()

 src/stores/tasks.ts

@@ -49,9 +49,13 @@
    if (firstNotEmptyChannel) {
      const channelNumber = +firstNotEmptyChannel[0]
      activeTask.value = channels[channelNumber].Tasks[0]
      setActiveChannel(channelNumber)
    } else {
      // 如果没有任务就清空当前选中的任务
      activeTask.value = undefined
      if (channels[0]) {
        setActiveChannel(0)
      }
    }
  }

@@ -125,8 +129,13 @@

  /** 当前高亮的任务 */
  const activeTask = ref<Task>()
  function setActiveTask(task: Task) {
  function setActiveTask(task: Task | undefined) {
    activeTask.value = task
  }

  const activeChannel = ref<number>(0)
  function setActiveChannel(channelNumber: number) {
    activeChannel.value = channelNumber
  }

  return {
@@ -138,6 +147,8 @@
    setActiveTask,
    moreChannelTasksBtn,
    foldChannelTasksBtn,
    reloadAllData
    reloadAllData,
    activeChannel,
    setActiveChannel
  }
})

 src/views/dashboard/components/ChannelCollapse.vue

@@ -1,19 +1,19 @@
<template>
  <div class="channel-collapse">
    <el-collapse v-model="activeChannel">
      <el-collapse-item
        v-for="(channel, channelNumber) in channels"
        :key="channelNumber"
        :title="CHANNEL_NAME_MAP[channelNumber] + ' 通道' + ' (' + (channel?.TaskCount ?? 0) + ')'"
        :name="String(channelNumber)"
      >
      <el-collapse-item v-for="(channel, channelNumber) in channels" :key="channelNumber" :name="String(channelNumber)">
        <template #title>
          <div style="width: 100%; text-align: left" @click="selectChannel(channelNumber)">
            {{ CHANNEL_NAME_MAP[channelNumber] + ' 通道' + ' (' + (channel?.TaskCount ?? 0) + ')' }}
          </div>
        </template>
        <TaskInfo
          v-for="task in channel.Tasks"
          :key="task.Procedure.ID"
          :active="task.Procedure.ID === tasksStore.activeTask?.Procedure.ID"
          :task="task"
          style="margin-bottom: 16px"
          @click="tasksStore.setActiveTask(task)"
          @click="selectTask(task)"
        ></TaskInfo>

        <div
@@ -39,11 +39,12 @@
</template>
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import type { TasksGroupByChannel } from '@/api/task'
import type { Task, TasksGroupByChannel } from '@/api/task'
import TaskInfo from './TaskInfo.vue'
import { CHANNEL_NAME_MAP } from '@/common/constants'
import { useTasksStore } from '@/stores/tasks'
import { ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue'
import { isNumber } from 'lodash-es'

export interface ChannelCollapseProps {
  channels: TasksGroupByChannel
@@ -59,6 +60,19 @@
  const channelNumbers = Object.keys(props?.channels ?? {}).sort((a, b) => +a - +b)
  activeChannel.value = [...channelNumbers]
})

function selectChannel(channelNumber: number) {
  tasksStore.setActiveTask(undefined)
  tasksStore.setActiveChannel(+channelNumber)
}

function selectTask(task: Task | undefined) {
  tasksStore.setActiveTask(task)
  let channel = tasksStore?.activeTask?.Channel
  if (isNumber(channel)) {
    tasksStore.setActiveChannel(channel)
  }
}
</script>

<style scoped lang="scss">