138 lines
3.3 KiB
Vue
138 lines
3.3 KiB
Vue
|
<template>
|
||
|
|
<div class="situational-awareness">
|
||
|
|
<!-- 顶部导航栏 -->
|
||
|
|
<PageHeader @back="handleBack" />
|
||
|
|
|
||
|
|
<!-- 主内容区域 -->
|
||
|
|
<div class="situational-awareness__main">
|
||
|
|
<!-- 左侧面板 -->
|
||
|
|
<LeftPanel />
|
||
|
|
|
||
|
|
<!-- 中央地图区域 -->
|
||
|
|
<MapViewer @marker-click="handleMarkerClick" />
|
||
|
|
|
||
|
|
<!-- 右侧面板 -->
|
||
|
|
<RightPanel />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 弹窗组件 -->
|
||
|
|
<PersonnelDetail
|
||
|
|
:visible="showPersonnelDetail"
|
||
|
|
:personnel-data="selectedPersonnel"
|
||
|
|
@close="showPersonnelDetail = false"
|
||
|
|
@link="handlePersonnelLink"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<EmergencyCenterDetail
|
||
|
|
:visible="showCenterDetail"
|
||
|
|
:center-data="selectedCenter"
|
||
|
|
@close="showCenterDetail = false"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, provide } from 'vue'
|
||
|
|
import PageHeader from './components/PageHeader.vue'
|
||
|
|
import LeftPanel from './components/LeftPanel/index.vue'
|
||
|
|
import MapViewer from './components/MapViewer/index.vue'
|
||
|
|
import RightPanel from './components/RightPanel/index.vue'
|
||
|
|
import PersonnelDetail from './components/Popups/PersonnelDetail.vue'
|
||
|
|
import EmergencyCenterDetail from './components/Popups/EmergencyCenterDetail.vue'
|
||
|
|
import { useDisasterData } from './composables/useDisasterData'
|
||
|
|
|
||
|
|
// 使用灾害数据
|
||
|
|
const disasterData = useDisasterData()
|
||
|
|
|
||
|
|
// 提供给子组件使用
|
||
|
|
provide('disasterData', disasterData)
|
||
|
|
|
||
|
|
// 弹窗状态
|
||
|
|
const showPersonnelDetail = ref(false)
|
||
|
|
const showCenterDetail = ref(false)
|
||
|
|
|
||
|
|
// 选中的数据
|
||
|
|
const selectedPersonnel = ref({
|
||
|
|
name: '张强',
|
||
|
|
department: '安全生产部',
|
||
|
|
distance: 0.6,
|
||
|
|
estimatedArrival: 10,
|
||
|
|
avatar: null
|
||
|
|
})
|
||
|
|
|
||
|
|
const selectedCenter = ref({
|
||
|
|
name: '忠县应急中心',
|
||
|
|
adminLevel: '国道',
|
||
|
|
department: '交通公路部门',
|
||
|
|
distance: 0.6,
|
||
|
|
image: null
|
||
|
|
})
|
||
|
|
|
||
|
|
// 返回驾驶舱
|
||
|
|
const handleBack = () => {
|
||
|
|
console.log('返回驾驶舱')
|
||
|
|
// 实际实现：路由跳转
|
||
|
|
// router.push('/cockpit')
|
||
|
|
}
|
||
|
|
|
||
|
|
// 处理地图标记点击
|
||
|
|
const handleMarkerClick = (type) => {
|
||
|
|
if (type === 'personnel') {
|
||
|
|
showPersonnelDetail.value = true
|
||
|
|
} else if (type === 'center') {
|
||
|
|
showCenterDetail.value = true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 处理人员联动
|
||
|
|
const handlePersonnelLink = (personnel) => {
|
||
|
|
console.log('联动人员:', personnel)
|
||
|
|
// 实际实现：在地图上定位该人员，调用通信功能等
|
||
|
|
showPersonnelDetail.value = false
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
@use '@/styles/mixins.scss' as *;
|
||
|
|
@use './assets/styles/common.scss' as *;
|
||
|
|
|
||
|
|
.situational-awareness {
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
background-color: var(--bg-dark);
|
||
|
|
overflow: hidden;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
|
||
|
|
&__main {
|
||
|
|
flex: 1;
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: vw(564) 1fr vw(526);
|
||
|
|
gap: 0;
|
||
|
|
min-height: 0;
|
||
|
|
background: url(./assets/images/main-bg.png) center/cover no-repeat;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
// 背景地图图片
|
||
|
|
&::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background: url(../3DSituationalAwarenessCopy/assets/img/SketchPng6e145958ea0dbf76e6562cc7965debbb95226caff3271c366ac9b254cbe6e796.png)
|
||
|
|
center/cover no-repeat;
|
||
|
|
opacity: 0.3;
|
||
|
|
pointer-events: none;
|
||
|
|
z-index: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
> * {
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|