From 8e504b07e0070e50e2e04c46d783ca2df2794657 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Thu, 08 Jan 2026 16:38:43 +0800
Subject: [PATCH] feat:数据驾驶舱页面搭建
---
applications/drone-command/src/views/dataCockpit/components/RightContainer.vue | 204 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 203 insertions(+), 1 deletions(-)
diff --git a/applications/drone-command/src/views/dataCockpit/components/RightContainer.vue b/applications/drone-command/src/views/dataCockpit/components/RightContainer.vue
index 4811ccb..40b82f2 100644
--- a/applications/drone-command/src/views/dataCockpit/components/RightContainer.vue
+++ b/applications/drone-command/src/views/dataCockpit/components/RightContainer.vue
@@ -1,15 +1,217 @@
+<!--
+ * @Author : yuan
+ * @Date : 2026-01-07 15:17:54
+ * @LastEditors : yuan
+ * @LastEditTime : 2026-01-08 15:58:15
+ * @FilePath : \applications\drone-command\src\views\dataCockpit\components\RightContainer.vue
+ * @Description :
+ * Copyright 2026 OBKoro1, All Rights Reserved.
+ * 2026-01-07 15:17:54
+-->
<template>
<div class="right-container">
<div class="wrapper">
-
+ <TitleTemplate>侦测反制设备</TitleTemplate>
+
+ <div class="category-container">
+ <div class="category-item" v-for="(item, ind) in categoryList" :key="ind">
+ <div class="category-item-logo">
+ <img :src="item.logo" alt="">
+ </div>
+
+ <div class="category-item-content">
+ <span class="name">{{ item.name }}</span>
+ <span class="val">{{ item.val }}</span>
+ </div>
+ </div>
+ </div>
+
+ <div class="content">
+ <RealEquipmentTemplate v-for="item in counterDeviceStatusList" :key="item.id" :data="item"
+ @history="onHistory" @click="onCardClick" />
+ </div>
</div>
</div>
</template>
<script setup>
+import TitleTemplate from './templateComponents/TitleTemplate.vue'
+import RealEquipmentTemplate from './templateComponents/RealEquipmentTemplate.vue'
+import zcsbLogo from '@/assets/images/dataCockpit/zcsb.png'
+import fzsbLogo from '@/assets/images/dataCockpit/fzsb.png'
+const categoryList = ref([
+ {
+ id: 1,
+ name: '侦测设备',
+ val: 169,
+ logo: zcsbLogo
+ },
+ {
+ id: 2,
+ name: '反制设备',
+ val: 169,
+ logo: fzsbLogo
+ }
+])
+
+const counterDeviceStatusList = ref([
+ {
+ id: 'cd_001',
+ name: '反制设备名称',
+ actionText: '侦测中', // 胶囊文案
+ actionType: 'detecting', // detecting | jamming | idle
+ type: '察打一体',
+ battery: 100, // 电量 %
+ azimuth: 14, // 方位角
+ pitch: 14, // 俯仰角
+ statusText: '在线', // 状态
+ vendor: '厂商名称', // 厂商
+ targetCount: 10, // 侦测目标
+ range: '1.2KM' // 有效范围
+ },
+ {
+ id: 'cd_002',
+ name: '反制设备名称',
+ actionText: '信号干扰中',
+ actionType: 'jamming',
+ type: '察打一体',
+ battery: 100,
+ azimuth: 14,
+ pitch: 14,
+ statusText: '在线',
+ vendor: '厂商名称',
+ targetCount: 10,
+ range: '1.2KM'
+ }
+])
+
+const onHistory = (item) => {
+ console.log('历史数据：', item.id)
+}
+
+const onCardClick = (item) => {
+ console.log('点击卡片：', item.id)
+}
</script>
<style lang="scss" scoped>
+.category-container {
+ margin-top: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 28px;
+ box-sizing: border-box;
+ .category-item {
+ position: relative;
+ width: 0;
+ flex: 1;
+ display: flex;
+ height: 64px;
+
+ &-logo {
+ display: flex;
+ align-items: center;
+
+ img {
+ width: 40px;
+ height: 40px;
+ }
+ }
+
+ &-content {
+ width: 0;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ border-bottom: 1px solid #6C6C89;
+
+ span {
+ margin-left: 8px;
+ }
+
+ .name {
+ font-family: Open Sans, Open Sans;
+ font-weight: 400;
+ font-size: 16px;
+ color: #C3C3DD;
+ line-height: 20px;
+ text-align: left;
+ font-style: normal;
+ text-transform: none;
+ }
+
+ .val {
+ margin-top: 10px;
+ font-family: DIN, DIN;
+ font-weight: bold;
+ font-size: 22px;
+ color: #FFFFFF;
+ line-height: 20px;
+ text-align: left;
+ font-style: normal;
+ text-transform: none;
+ }
+ }
+ }
+}
+
+.content {
+ height: 0;
+ flex: 1;
+ margin-top: 20px;
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+
+.right-container {
+ transition: transform 0.3s ease-in-out;
+ /* position: relative; Removed to avoid conflict with parent absolute positioning */
+
+ &.collapsed {
+ transform: translateX(100%);
+ }
+}
+
+.collapse-btn {
+ position: absolute;
+ top: 50%;
+ left: -24px;
+ width: 24px;
+ height: 60px;
+ background: rgba(17, 23, 34, 0.8);
+ border: 1px solid #333355;
+ border-right: none;
+ border-radius: 4px 0 0 4px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #fff;
+ transform: translateY(-50%);
+ z-index: 10;
+ backdrop-filter: blur(5px);
+
+ .arrow {
+ border: solid #fff;
+ border-width: 0 2px 2px 0;
+ display: inline-block;
+ padding: 3px;
+ transition: transform 0.3s;
+
+ &.left {
+ transform: rotate(135deg);
+ }
+
+ &.right {
+ transform: rotate(-45deg);
+ }
+ }
+
+ &:hover {
+ background: rgba(40, 79, 227, 0.6);
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3