<!--
|
* @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>
|
<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>
|
