From bc4ea36aed76bd5e863e703d57394ae589575771 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Thu, 08 Jan 2026 17:31:12 +0800
Subject: [PATCH] feat:数据驾驶舱页面基本处理
---
applications/drone-command/src/views/dataCockpit/components/RightContainer.vue | 67 +++++++++++++++++++++------------
1 files changed, 42 insertions(+), 25 deletions(-)
diff --git a/applications/drone-command/src/views/dataCockpit/components/RightContainer.vue b/applications/drone-command/src/views/dataCockpit/components/RightContainer.vue
index 40b82f2..43cf0d0 100644
--- a/applications/drone-command/src/views/dataCockpit/components/RightContainer.vue
+++ b/applications/drone-command/src/views/dataCockpit/components/RightContainer.vue
@@ -1,15 +1,15 @@
-<!--
+<!--
* @Author : yuan
* @Date : 2026-01-07 15:17:54
* @LastEditors : yuan
- * @LastEditTime : 2026-01-08 15:58:15
+ * @LastEditTime : 2026-01-08 17:04:11
* @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="right-container" :class="{ collapsed: collapsedModel }">
<div class="wrapper">
<TitleTemplate>侦测反制设备</TitleTemplate>
@@ -31,14 +31,35 @@
@history="onHistory" @click="onCardClick" />
</div>
</div>
+
+ <div class="collapse-btn" @click="toggleCollapse">
+ <span class="arrow" :class="collapsedModel ? 'left' : 'right'"></span>
+ </div>
+
+ <DeviceHistoryDialog v-model="historyVisible" :device="historyDevice" />
</div>
</template>
<script setup>
import TitleTemplate from './templateComponents/TitleTemplate.vue'
import RealEquipmentTemplate from './templateComponents/RealEquipmentTemplate.vue'
+import DeviceHistoryDialog from './DeviceHistoryDialog.vue'
import zcsbLogo from '@/assets/images/dataCockpit/zcsb.png'
import fzsbLogo from '@/assets/images/dataCockpit/fzsb.png'
+
+const props = defineProps({
+ collapsed: {
+ type: Boolean,
+ default: false
+ }
+})
+
+const emit = defineEmits(['update:collapsed'])
+
+const collapsedModel = computed({
+ get: () => props.collapsed,
+ set: (val) => emit('update:collapsed', val)
+})
const categoryList = ref([
{
@@ -59,7 +80,7 @@
{
id: 'cd_001',
name: '反制设备名称',
- actionText: '侦测中', // 胶囊文案
+ actionText: '侦测中',
actionType: 'detecting', // detecting | jamming | idle
type: '察打一体',
battery: 100, // 电量 %
@@ -86,12 +107,20 @@
}
])
+const historyVisible = ref(false)
+const historyDevice = ref(null)
+
const onHistory = (item) => {
- console.log('历史数据：', item.id)
+ historyDevice.value = item
+ historyVisible.value = true
+ console.log('历史数据:', item.id)
}
const onCardClick = (item) => {
- console.log('点击卡片：', item.id)
+ console.log('点击卡片:', item.id)
+}
+const toggleCollapse = () => {
+ collapsedModel.value = !collapsedModel.value
}
</script>
@@ -168,7 +197,7 @@
.right-container {
transition: transform 0.3s ease-in-out;
- /* position: relative; Removed to avoid conflict with parent absolute positioning */
+ position: relative;
&.collapsed {
transform: translateX(100%);
@@ -178,9 +207,7 @@
.collapse-btn {
position: absolute;
top: 50%;
- left: -24px;
- width: 24px;
- height: 60px;
+ right: 357px;
background: rgba(17, 23, 34, 0.8);
border: 1px solid #333355;
border-right: none;
@@ -190,28 +217,18 @@
align-items: center;
justify-content: center;
color: #fff;
- transform: translateY(-50%);
z-index: 10;
backdrop-filter: blur(5px);
+ transform: translateY(-50%);
.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);
- }
+ width: 24px;
+ height: 24px;
+ background: url('@/assets/images/dataCockpit/right-btn.png') center / 100% 100% no-repeat;
}
&:hover {
background: rgba(40, 79, 227, 0.6);
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3