| | |
| | | </div> |
| | | |
| | | <div class="content"> |
| | | <component :is="currentComponent" /> |
| | | <RealWarning |
| | | v-if="activeIdModel === 1" |
| | | :data="realWarningData" |
| | | :loading="realWarningLoading" |
| | | @signal="emit('real-warning-signal', $event)" |
| | | @counter="emit('real-warning-counter', $event)" |
| | | @favorite="emit('real-warning-favorite', $event)" |
| | | /> |
| | | <EquipmentWarning v-else-if="activeIdModel === 2" /> |
| | | <HistoryWarning v-else /> |
| | | </div> |
| | | </div> |
| | | |
| | |
| | | |
| | | <script setup> |
| | | import TitleTemplate from './templateComponents/TitleTemplate.vue' |
| | | import RealWarning from './RealWarning.vue' |
| | | import EquipmentWarning from './EquipmentWarning.vue' |
| | | import HistoryWarning from './HistoryWarning.vue' |
| | | import { alarmStatisticsApi } from '@/api/dataCockpit' |
| | | import { onMounted } from 'vue' |
| | | import { computed, onMounted, ref } from 'vue' |
| | | import RealWarning from './RealWarning.vue' |
| | | |
| | | const props = defineProps({ |
| | | activeId: { |
| | |
| | | collapsed: { |
| | | type: Boolean, |
| | | default: false |
| | | }, |
| | | realWarningData: { |
| | | type: Array, |
| | | default: () => [] |
| | | }, |
| | | realWarningLoading: { |
| | | type: Boolean, |
| | | default: false |
| | | } |
| | | }) |
| | | |
| | | const emit = defineEmits(['update:activeId', 'update:collapsed']) |
| | | const emit = defineEmits([ |
| | | 'update:activeId', |
| | | 'update:collapsed', |
| | | 'real-warning-signal', |
| | | 'real-warning-counter', |
| | | 'real-warning-favorite' |
| | | ]) |
| | | |
| | | const activeIdModel = computed({ |
| | | get: () => props.activeId, |
| | |
| | | component: HistoryWarning |
| | | } |
| | | ]) |
| | | |
| | | const currentComponent = computed(() => { |
| | | return categoryList.value.find(i => i.id === activeIdModel.value)?.component |
| | | }) |
| | | |
| | | const toggleCollapse = () => { |
| | | collapsedModel.value = !collapsedModel.value |
| | |
| | | .badge { |
| | | position: absolute; |
| | | top: 16px; |
| | | right: 4px; |
| | | right: -4px; |
| | | min-width: 18px; |
| | | line-height: 18px; |
| | | font-size: 12px; |