Zzc
157bae2ea0
- 添加SceneLabel组件，用于在对比模式下标记灾害场景 - 更新页面标题为“渝路智管-应急保通事件处置” - 修改面板标题，并添加强制调度的事件处理 - 使用条件图标增强地图标记，用于应急中心 - 更新3D模型配置URL，并在调度开始时添加加载动画 - 替换面板和工具提示的背景图片 - 添加新的图片素材，包括危险图标和加载GIF
86 lines
1.8 KiB
Vue
86 lines
1.8 KiB
Vue
<template>
|
|
<div class="scene-label" :class="labelClass">
|
|
<div class="scene-label__content">
|
|
<img :src="iconSrc" alt="scene" class="scene-label__icon" />
|
|
<span class="scene-label__text">{{ text }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import sceneIcon from '../assets/images/SketchPng08621fb3b35614299e29352b8d67ad9c2c7dccf7b9c17d042492671e3bbe19f8.png'
|
|
|
|
const props = defineProps({
|
|
/**
|
|
* 标签文本
|
|
*/
|
|
text: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
/**
|
|
* 标签位置：
|
|
* - 'center-left': 对比模式中间分割线的左侧
|
|
* - 'right-left': 右侧面板的左边
|
|
*/
|
|
position: {
|
|
type: String,
|
|
default: 'right-left',
|
|
validator: (value) => ['center-left', 'right-left'].includes(value)
|
|
}
|
|
})
|
|
|
|
const labelClass = computed(() => {
|
|
return `scene-label--${props.position}`
|
|
})
|
|
|
|
const iconSrc = sceneIcon
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use '@/styles/mixins.scss' as *;
|
|
|
|
.scene-label {
|
|
position: absolute;
|
|
top: calc(var(--sa-header-height));
|
|
z-index: 10;
|
|
pointer-events: none;
|
|
|
|
// 中间分割线左侧（灾前现场实景）
|
|
&--center-left {
|
|
left: 50%;
|
|
transform: translateX(calc(-100% - vw(10)));
|
|
}
|
|
|
|
// 右侧面板左边（灾后现场实景）
|
|
&--right-left {
|
|
left: calc(100% - var(--sa-right-width));
|
|
transform: translateX(calc(-100% - vw(10)));
|
|
}
|
|
|
|
&__content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: vw(6);
|
|
padding: vw(5) vw(10);
|
|
background: rgba(20, 53, 118, 1);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: vw(8);
|
|
}
|
|
|
|
&__icon {
|
|
width: vw(32);
|
|
height: vw(32);
|
|
}
|
|
|
|
&__text {
|
|
color: var(--text-white);
|
|
font-size: fs(15);
|
|
font-family: SourceHanSansCN-Medium, sans-serif;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
</style>
|