From 052d0e8bd9c1d8e0d243a166bedf761fc5a7a891 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 14 Jan 2026 16:38:00 +0800
Subject: [PATCH] feat:通用弹窗样式调整
---
applications/drone-command/src/views/dataCockpit/index.vue | 93 +++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 90 insertions(+), 3 deletions(-)
diff --git a/applications/drone-command/src/views/dataCockpit/index.vue b/applications/drone-command/src/views/dataCockpit/index.vue
index 68546d2..137328a 100644
--- a/applications/drone-command/src/views/dataCockpit/index.vue
+++ b/applications/drone-command/src/views/dataCockpit/index.vue
@@ -1,9 +1,96 @@
+<!--
+ * @Author : yuan
+ * @Date : 2026-01-06 16:35:50
+ * @LastEditors : yuan
+ * @LastEditTime : 2026-01-09 16:34:39
+ * @FilePath : \applications\drone-command\src\views\dataCockpit\index.vue
+ * @Description :
+ * Copyright 2026 OBKoro1, All Rights Reserved.
+ * 2026-01-06 16:35:50
+-->
<template>
- <basic-container>
- 维护记录管理
- </basic-container>
+ <div class="page-container">
+ <DeviceMapContainer
+ :online-devices="onlineDevices"
+ :left-collapsed="leftCollapsed"
+ container-id="data-cockpit-map"
+ />
+ <LeftContainer class="left-container" v-model:activeId="leftActiveId" v-model:collapsed="leftCollapsed" />
+ <RightContainer class="right-container" v-model:collapsed="rightCollapsed" v-model:onlineDevices="onlineDevices" />
+ <CenterContainer @select-warning="onSelectWarning" @select-equipment="onSelectEquipment" />
+ </div>
</template>
+
<script setup>
+ import DeviceMapContainer from '@/components/map-container/device-map-container.vue';
+ import LeftContainer from './components/LeftContainer.vue';
+ import RightContainer from './components/RightContainer.vue';
+ import CenterContainer from './components/CenterContainer.vue';
+
+ const leftActiveId = ref(1);
+ const leftCollapsed = ref(false);
+
+ const rightCollapsed = ref(false);
+ const onlineDevices = ref([]);
+
+ const onSelectWarning = (type) => {
+ leftActiveId.value = type;
+ leftCollapsed.value = false;
+ };
+
+ const onSelectEquipment = () => {
+ rightCollapsed.value = false;
+ };
</script>
+
<style scoped lang="scss">
+ .page-container {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ }
+
+ .left-container,
+ .right-container {
+ position: absolute;
+ top: 96px;
+ bottom: 0;
+ width: 401px;
+ z-index: 9;
+ backdrop-filter: blur(2px);
+
+ ::v-deep(.wrapper) {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ top: 17px;
+ bottom: 20px;
+ padding: 20px;
+ width: 300px;
+ background: rgba(0,0,0,0.3);
+ backdrop-filter: blur(16px);
+ border-radius: 10px 10px 10px 10px;
+ }
+ }
+
+ .left-container {
+ top: 96px;
+ left: 0;
+ background: linear-gradient( 270deg, rgba(17,23,34,0) 0%, rgba(17,23,34,0.56) 50%, rgba(17,23,34,0.96) 100%);
+
+ ::v-deep(.wrapper) {
+ left: 17px;
+ }
+ }
+
+ .right-container {
+ top: 54px;
+ right: 0;
+ background: linear-gradient( 270deg, rgba(17,23,34,0.96) 0.16%, rgba(17,23,34,0.56) 57.57%, rgba(4,30,37,0) 100%);
+
+ ::v-deep(.wrapper) {
+ top: 21px;
+ right: 17px;
+ }
+ }
</style>
--
Gitblit v1.9.3