<template>
|
<div class="channel-collapse">
|
<el-collapse v-model="activeChannel">
|
<el-collapse-item
|
v-for="(tasks, channelNumber) in channels"
|
:key="channelNumber"
|
:title="CHANNEL_NAME_MAP[channelNumber] + ' 通道'"
|
:name="String(channelNumber)"
|
>
|
<TaskInfo v-for="task in tasks" :key="task.Procedure.ID" :task="task"></TaskInfo>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { ref, watchEffect } from 'vue'
|
import type { Task } from '@/api/task'
|
import TaskInfo from './TaskInfo.vue'
|
import { CHANNEL_NAME_MAP } from '@/common/constants'
|
|
export interface Channel {
|
[channelNumber: number]: Task[]
|
}
|
|
export interface ChannelCollapseProps {
|
channels: Channel
|
}
|
|
const props = defineProps<ChannelCollapseProps>()
|
const activeChannel = ref<string[]>([])
|
|
watchEffect(() => {
|
const channelNumbers = Object.keys(props.channels).sort((a, b) => +a - +b)
|
activeChannel.value = [...channelNumbers]
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.channel-collapse {
|
color: #fff;
|
background-color: transparent;
|
}
|
:deep(.el-collapse) {
|
border: none;
|
}
|
:deep(.el-collapse-item) {
|
border: none;
|
}
|
:deep(.el-collapse-item__header) {
|
color: #fff;
|
background-color: transparent;
|
font-size: 19px;
|
font-weight: 600;
|
border: none;
|
}
|
:deep(.el-collapse-item__wrap) {
|
color: #fff;
|
background-color: transparent;
|
font-size: 16px;
|
border: none;
|
font-weight: 600;
|
}
|
:deep(.el-collapse-item__content) {
|
color: #fff;
|
background-color: transparent;
|
font-size: 16px;
|
font-weight: 600;
|
}
|
</style>
|
