Zzc
536b00fab4
新增支持双地图对比模式，显示灾害前后场景， 新的视频模态框用于全屏监控并带有方向控制， 位置面板显示地理信息， 地图工具提示显示实体详情，以及用于3D瓦片管理的可组合组件， 地图标记和模型对比功能。包括新的共享组件 如DecorativePanel和MapTooltip，以及Cesium数据 和模型对比设置的配置文件。
172 lines
3.7 KiB
Vue
172 lines
3.7 KiB
Vue
<template>
|
|
<div class="left-panel-wrapper">
|
|
<div class="left-panel">
|
|
<CollapsiblePanel title="快速感知" subtitle="「灾害分析」">
|
|
<DisasterAnalysis />
|
|
</CollapsiblePanel>
|
|
|
|
<CollapsiblePanel title="快速匹配" subtitle="「力量预置」">
|
|
<ForcePreset />
|
|
</CollapsiblePanel>
|
|
|
|
<CollapsiblePanel title="快速响应" subtitle="「力量调度」">
|
|
<ForceDispatch />
|
|
</CollapsiblePanel>
|
|
</div>
|
|
|
|
<!-- 地理位置独立浮层 -->
|
|
<div class="location-entry">
|
|
<button
|
|
id="location-toggle-btn"
|
|
type="button"
|
|
class="location-toggle"
|
|
:class="{ 'is-open': isLocationOpen }"
|
|
:aria-expanded="isLocationOpen"
|
|
aria-controls="location-panel"
|
|
@click="toggleLocation"
|
|
>
|
|
<img
|
|
src="../../assets/images/LocationPanel/locationIcon.png"
|
|
alt=""
|
|
class="location-icon"
|
|
aria-hidden="true"
|
|
/>
|
|
<span class="location-text">地理位置</span>
|
|
<img
|
|
src="../../assets/images/LocationPanel/箭头.png"
|
|
alt=""
|
|
class="arrow-icon"
|
|
aria-hidden="true"
|
|
/>
|
|
</button>
|
|
|
|
<LocationPanel
|
|
:expanded="isLocationOpen"
|
|
panel-id="location-panel"
|
|
label-id="location-toggle-btn"
|
|
>
|
|
<DisasterAnalysis />
|
|
</LocationPanel>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import CollapsiblePanel from '../shared/CollapsiblePanel.vue'
|
|
import DisasterAnalysis from './DisasterAnalysis.vue'
|
|
import ForcePreset from './ForcePreset.vue'
|
|
import ForceDispatch from './ForceDispatch.vue'
|
|
import LocationPanel from './LocationPanel.vue'
|
|
|
|
const isLocationOpen = ref(true)
|
|
|
|
const toggleLocation = () => {
|
|
isLocationOpen.value = !isLocationOpen.value
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use '@/styles/mixins.scss' as *;
|
|
@use '../../assets/styles/common.scss' as *;
|
|
|
|
.left-panel-wrapper {
|
|
position: relative;
|
|
display: inline-block;
|
|
height: 100%;
|
|
}
|
|
|
|
.left-panel {
|
|
// width: vw(464);
|
|
height: 100%;
|
|
background: url('../../assets/images/SketchPng7ba5c49d9f8f79e6b559d62cfb6b0b0c79616dd8b289f8b62b5cb8adc18c30e7.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: vw(6);
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background: var(--primary-light);
|
|
border-radius: vw(3);
|
|
|
|
&:hover {
|
|
background: rgba(28, 161, 255, 0.6);
|
|
}
|
|
}
|
|
}
|
|
|
|
.location-entry {
|
|
position: absolute;
|
|
top: vh(32);
|
|
left: 100%;
|
|
margin-left: vw(12);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: vh(12);
|
|
width: vw(368);
|
|
z-index: 10;
|
|
}
|
|
|
|
.location-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: vw(8);
|
|
padding: vh(6) vw(12);
|
|
width: vw(133);
|
|
height: vh(29);
|
|
background: url('../../assets/images/LocationPanel/地理位置按钮背景.png') no-repeat center center;
|
|
background-size: 100% 100%;
|
|
border: none;
|
|
border-radius: vw(4);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: opacity 0.3s ease;
|
|
|
|
&:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
&:active {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 2px solid var(--primary-color);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.location-icon {
|
|
width: vw(19);
|
|
height: vw(17);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.location-text {
|
|
color: var(--text-white);
|
|
font-size: fs(16);
|
|
font-weight: 500;
|
|
font-family: SourceHanSansCN-Medium, sans-serif;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.arrow-icon {
|
|
width: vw(10);
|
|
height: vh(10);
|
|
flex-shrink: 0;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
&.is-open .arrow-icon {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
</style>
|