From 6e88705bd5b443a259b24c17c8a299765d059d96 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Thu, 23 Jul 2026 16:50:41 +0800
Subject: [PATCH] Merge branch 'master' of http://139.196.74.78:10010/r/jagzwxm/ja_web
---
applications/drone-command/src/views/dataCockpit/components/CenterContainer.vue | 230 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 227 insertions(+), 3 deletions(-)
diff --git a/applications/drone-command/src/views/dataCockpit/components/CenterContainer.vue b/applications/drone-command/src/views/dataCockpit/components/CenterContainer.vue
index f59947f..9e43ad3 100644
--- a/applications/drone-command/src/views/dataCockpit/components/CenterContainer.vue
+++ b/applications/drone-command/src/views/dataCockpit/components/CenterContainer.vue
@@ -1,13 +1,237 @@
-<template>
- <div>
+<template>
+ <div class="center-container">
+ <div class="left-box">
+ <div class="logo">
+ <img :src="warningLogo" alt="">
+ </div>
+ <div class="list">
+ <div class="item" v-for="(item, ind) in warningList" :key="ind">
+ <div class="val" @click="warningTypeClick(item.type)">
+ {{ item.value }}
+ </div>
+
+ <div class="name">
+ {{ item.title }}
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="right-box">
+ <div class="logo">
+ <img :src="equipmentLogo" alt="">
+ </div>
+
+ <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)">
+ {{ item.value }}
+ </div>
+
+ <div class="name">
+ {{ item.title }}
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</template>
<script setup>
+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'
+const warningList = ref([
+ {
+ title: '实时告警',
+ value: 0,
+ type: 1
+ },
+ {
+ title: '设备告警',
+ value: 0,
+ type: 2
+ },
+ {
+ title: '历史告警',
+ value: 0,
+ type: 3
+ },
+])
+
+const equipmentList = ref([
+ {
+ title: '设备统计',
+ value: 0,
+ isHighlight: true,
+ },
+ {
+ title: '无线电',
+ value: 0,
+ },
+ {
+ title: '光电',
+ value: 0,
+ },
+ {
+ title: '雷达',
+ value: 0,
+ }
+])
+
+const emit = defineEmits(['select-warning', 'select-equipment'])
+
+const warningTypeClick = (type) => {
+ emit('select-warning', type)
+}
+
+const equipmentClick = (isHighlight) => {
+ if (isHighlight) {
+ 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>
+.center-container {
+ display: flex;
+ position: absolute;
+ top: 75px;
+ left: 465px;
+ z-index: 9;
+ pointer-events: none;
-</style>
\ No newline at end of file
+ .left-box {
+ width: 356px;
+
+ .list {
+ .item {
+ .val {
+ color: #FF4444;
+ cursor: pointer;
+ }
+ }
+ }
+ }
+
+ .right-box {
+ margin-left: 20px;
+ width: 455px;
+
+ .list {
+ .item {
+ .val.highlight {
+ color: #6382FF;
+ cursor: pointer;
+ }
+ }
+ }
+ }
+
+ .left-box,
+ .right-box {
+ position: relative;
+ padding: 17px 20px;
+ display: flex;
+ align-items: center;
+ height: 100px;
+ 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 {
+ width: 40px;
+ height: 40px;
+ }
+ }
+
+ .list {
+ width: 0;
+ flex: 1;
+ height: 100%;
+ display: flex;
+
+ .item {
+ width: 0;
+ flex: 1;
+ position: relative;
+ padding-left: 20px;
+ color: #fff;
+
+ .name {
+ font-family: Open Sans, Open Sans;
+ font-weight: 400;
+ font-size: 14px;
+ color: #FFFFFF;
+ text-align: left;
+ font-style: normal;
+ text-transform: none;
+ }
+
+ .val {
+ font-family: DinAB;
+ font-weight: bold;
+ font-size: 30px;
+ text-align: left;
+ font-style: normal;
+ text-transform: none;
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 1px;
+ height: 100%;
+ width: 1px;
+ background: #333355;
+ }
+
+ &:last-child::after {
+ display: none;
+ }
+ }
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3