| | |
| | | |
| | | <div class="list"> |
| | | <div class="item" v-for="(item, ind) in equipmentList" :key="ind"> |
| | | <div class="val" :class="{highlight: item.isHighlight}" @click="equipmentClick(item.isHighlight)"> |
| | | <div class="val" :class="{ highlight: item.isHighlight }" @click="equipmentClick(item.isHighlight)"> |
| | | {{ item.value }} |
| | | </div> |
| | | |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref } from 'vue' |
| | | import { onMounted, ref } from 'vue' |
| | | import warningLogo from '@/assets/images/dataCockpit/warning.png' |
| | | import equipmentLogo from '@/assets/images/dataCockpit/equipment.png' |
| | | import { alarmStatisticsApi } from '@/api/dataCockpit' |
| | | |
| | | let warningList = ref([ |
| | | const warningList = ref([ |
| | | { |
| | | title: '实时告警', |
| | | value: 56, |
| | | value: 0, |
| | | type: 1 |
| | | }, |
| | | { |
| | | title: '设备告警', |
| | | value: 127, |
| | | value: 0, |
| | | type: 2 |
| | | }, |
| | | { |
| | | title: '历史告警', |
| | | value: 619, |
| | | value: 0, |
| | | type: 3 |
| | | }, |
| | | ]) |
| | | |
| | | let equipmentList = ref([ |
| | | const equipmentList = ref([ |
| | | { |
| | | title: '设备统计', |
| | | value: 18, |
| | | value: 0, |
| | | isHighlight: true, |
| | | }, |
| | | { |
| | | title: '无线电', |
| | | value: 9, |
| | | value: 0, |
| | | }, |
| | | { |
| | | title: '光电', |
| | | value: 6, |
| | | value: 0, |
| | | }, |
| | | { |
| | | title: '雷达', |
| | | value: 3, |
| | | value: 0, |
| | | } |
| | | ]) |
| | | |
| | | const emit = defineEmits(['select-warning', 'select-equipment']) |
| | | |
| | | const warningTypeClick = (type) => { |
| | | console.log('点击了告警类型:', type) |
| | | emit('select-warning', type) |
| | | } |
| | | |
| | | const equipmentClick = (isHighlight) => { |
| | | if (isHighlight) { |
| | | console.log('点击了设备统计') |
| | | emit('select-equipment') |
| | | } |
| | | } |
| | | |
| | | const updateStats = async () => { |
| | | const res = await alarmStatisticsApi() |
| | | const data = res?.data?.data || {} |
| | | warningList.value = [ |
| | | { title: '实时告警', value: data.realTimeAlarmCount ?? 0, type: 1 }, |
| | | { title: '设备告警', value: data.deviceAlarmCount ?? 0, type: 2 }, |
| | | { title: '历史告警', value: data.historyAlarmCount ?? 0, type: 3 } |
| | | ] |
| | | equipmentList.value = [ |
| | | { title: '设备统计', value: data.deviceCount ?? 0, isHighlight: true }, |
| | | { title: '无线电', value: data.radioCount ?? 0 }, |
| | | { title: '光电', value: data.opticalCount ?? 0 }, |
| | | { title: '雷达', value: data.radarCount ?? 0 } |
| | | ] |
| | | } |
| | | |
| | | onMounted(() => { |
| | | updateStats() |
| | | }) |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | |
| | | |
| | | .left-box, |
| | | .right-box { |
| | | position: relative; |
| | | padding: 17px 20px; |
| | | display: flex; |
| | | align-items: center; |
| | | height: 100px; |
| | | background: #05050F; |
| | | background: rgba(0, 0, 0, 0.3); |
| | | box-sizing: border-box; |
| | | border-radius: 16px 16px 16px 16px; |
| | | pointer-events: auto; |
| | | |
| | | &::after { |
| | | content: ''; |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | z-index: -1; |
| | | background: rgba(17, 23, 34, 0.56); |
| | | backdrop-filter: blur(2px); |
| | | border-radius: 16px 16px 16px 16px; |
| | | } |
| | | |
| | | |
| | | .logo { |
| | | img { |
| | |
| | | } |
| | | |
| | | .val { |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-family: DinAB; |
| | | font-weight: bold; |
| | | font-size: 30px; |
| | | text-align: left; |