455 lines
13 KiB
Vue
455 lines
13 KiB
Vue
<template>
|
|
<div class="leftBox">
|
|
<div class="left animate__animated">
|
|
<div class="menus">
|
|
<div class="menus_itemBox" v-for="(item, index) in menuList" :title="t(`firstMenu.${item.name}`)">
|
|
<div class="item_icon" @click="(e) => {
|
|
handleClick(item, e)
|
|
}
|
|
">
|
|
<!-- <svg class="item_icon_bg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
width="162" height="44" viewBox="0 0 162 44" fill="none" preserveAspectRatio="none">
|
|
<path fill="#000000" fill-opacity="0.5" d="M0 44L136.639 44L162 18L162 0L0 0L0 44Z" />
|
|
<path fill-rule="evenodd" fill="rgba(42, 200, 251, 1)"
|
|
d="M136.006 42.5L1.5 42.5L1.5 1.5L160.5 1.5L160.5 17.3896L136.006 42.5ZM136.639 44L0 44L0 0L162 0L162 18L136.639 44Z" />
|
|
<path d="M0 0L15.0533 0L49.1742 41L98.4484 41.2681L102 44L0 44L0 0Z" fill="#45AEF7" fill-opacity="0.2" />
|
|
<path d="M3 34L3 41L10 41L3 34Z" stroke="rgba(198, 248, 255, 1)" stroke-width="0.5"
|
|
stroke-linejoin="round" />
|
|
<path d="M159 10L159 3L152 3L159 10Z" stroke="rgba(198, 248, 255, 1)" stroke-width="0.5"
|
|
stroke-linejoin="round" />
|
|
</svg> -->
|
|
<svg class="item_icon_bg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
width="162" height="44" viewBox="0 0 162 44" fill="none" preserveAspectRatio="none">
|
|
<path fill="#000000" fill-opacity="0.5" d="M0 44L136.639 44L162 18L162 0L0 0L0 44Z" />
|
|
<path fill-rule="evenodd" fill="url(#linear_border_2218_109_0)"
|
|
d="M136.006 42.5L1.5 42.5L1.5 1.5L160.5 1.5L160.5 17.3896L136.006 42.5ZM136.639 44L0 44L0 0L162 0L162 18L136.639 44Z" />
|
|
<path d="M0 0L15.0533 0L49.1742 41L98.4484 41.2681L102 44L0 44L0 0Z" fill="#00FFFF" fill-opacity="0.2" />
|
|
<path d="M3 34L3 41L10 41L3 34Z" stroke="rgba(0, 255, 255, 1)" stroke-width="0.5"
|
|
stroke-linejoin="round" />
|
|
<path d="M159 10L159 3L152 3L159 10Z" stroke="rgba(0, 255, 255, 1)" stroke-width="0.5"
|
|
stroke-linejoin="round" />
|
|
<defs>
|
|
<linearGradient id="linear_border_2218_109_0" x1="0" y1="-1.7520751953125" x2="140.2142333984375"
|
|
y2="40.473846435546875" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0.0625" stop-color="#00FFFF" />
|
|
<stop offset="1" stop-color="#00C8FF" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
<svg class="item_icon_bg item_icon_bg_hover" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="163" height="45"
|
|
viewBox="0 0 163 45" fill="none" preserveAspectRatio="none">
|
|
<path fill="url(#linear_fill_2218_82_1)"
|
|
d="M0.5 44.5L137.139 44.5L162.5 18.5L162.5 0.5L0.5 0.5L0.5 44.5Z" />
|
|
<defs>
|
|
<linearGradient id="linear_fill_2218_82_1" x1="84.9554443359375" y1="44.49997329711914"
|
|
x2="84.95498657226562" y2="0.5" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0" stop-color="#00FFFF" stop-opacity="0.6" />
|
|
<stop offset="1" stop-color="#00FFFF" stop-opacity="0" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
<!-- <svg-icon :class-name="['absolute', 'zIndex-1', 'left_item_bg']" icon-class="bg2"></svg-icon> -->
|
|
<svg-icon :name="item.svg" :size="16" color="rgba(0, 255, 255, 1)"></svg-icon>
|
|
<div class="item_text">
|
|
{{ t(`firstMenu.${item.name}`) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<leftSideSecond class="absolute zIndex99 leftSideSecond" ref="leftSideSecondRef"></leftSideSecond>
|
|
</div>
|
|
</div>
|
|
<div class="left_bottom" @click="fold"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
import { bus } from '@/utils/bus'
|
|
import leftSideSecond from '@/views/components/leftSide/leftSideSecond.vue'
|
|
import { ElMessage, ElLoading } from 'element-plus'
|
|
|
|
const { ipcRenderer } = require('electron')
|
|
const router = useRouter() // 路由实例
|
|
const { t } = useI18n()
|
|
const eventBus: any = inject('bus')
|
|
const menuList: any = ref([
|
|
// 方案推演
|
|
{
|
|
name: 'situation',
|
|
svg: 'situation',
|
|
// fun: this.openModel,
|
|
key: 'situation',
|
|
children: []
|
|
},
|
|
// 模型库
|
|
{
|
|
name: 'modelLibrary',
|
|
svg: 'model',
|
|
// fun: this.openModel,
|
|
key: 'model',
|
|
children: []
|
|
},
|
|
// 特效库
|
|
{
|
|
name: 'effect',
|
|
svg: 'special',
|
|
// fun: this.showSecondMenu,
|
|
key: 'effect',
|
|
children: [
|
|
'trajectoryMotion',
|
|
'wallStereoscopic',
|
|
'entityWall',
|
|
// "nightVision",
|
|
'diffuseScan',
|
|
'radarScan',
|
|
'scanStereoscopic',
|
|
'polyhedronObject',
|
|
'water',
|
|
'fountain',
|
|
'waterL',
|
|
'fire',
|
|
'explosion',
|
|
'smoke',
|
|
'flyLine',
|
|
'nightVision'
|
|
// "nightVision",
|
|
]
|
|
},
|
|
// 分析
|
|
{
|
|
name: 'analysis',
|
|
svg: 'analysis',
|
|
// fun: this.showSecondMenu,
|
|
key: 'analysis',
|
|
children: [
|
|
'inundationAnalysis',
|
|
'profileAnalysis',
|
|
'sightAnalysis',
|
|
'kenAnalysis',
|
|
'circleKen',
|
|
'slopeDirection',
|
|
'cutFill',
|
|
'contour',
|
|
'globalContour',
|
|
'clearAnalysis'
|
|
]
|
|
},
|
|
// 测量
|
|
{
|
|
name: 'measure',
|
|
svg: 'measure',
|
|
// fun: this.showSecondMenu,
|
|
key: 'measure',
|
|
children: [
|
|
'projectionArea',
|
|
'projectionDistanceMeasure',
|
|
'areaMeasure',
|
|
'distanceMeasure',
|
|
'heightMeasure',
|
|
'triangleMeasure',
|
|
'MeasureAzimuth',
|
|
'MeasureAngle',
|
|
'lopeDistanceMeasures',
|
|
'coorMeasure',
|
|
'clear'
|
|
]
|
|
},
|
|
|
|
// 工具
|
|
{
|
|
name: 'tool',
|
|
svg: 'tool',
|
|
// fun: this.showSecondMenu,
|
|
key: 'tool',
|
|
children: [
|
|
'routePlan',
|
|
'clearRoute',
|
|
'graffiti',
|
|
// stopGraffiti: "结束涂鸦",
|
|
'clearGraffiti',
|
|
'roam',
|
|
'coorLocation',
|
|
'mouseLocation',
|
|
'annotationAggregation',
|
|
'splitScreen',
|
|
'screenShot',
|
|
'highQuality',
|
|
'videoRecord',
|
|
'pressModel',
|
|
'terrainDig',
|
|
'tilesetClipping',
|
|
'clearTilesetClipping',
|
|
'projConvert',
|
|
'projectionConvert',
|
|
'gdbImport',
|
|
'circleStatistics',
|
|
'polygonStatistics'
|
|
]
|
|
},
|
|
{
|
|
name: 'militaryMark',
|
|
svg: 'military',
|
|
// fun: this.showSecondMenu,
|
|
key: 'military',
|
|
children: []
|
|
},
|
|
//二三维
|
|
{
|
|
name: 'ersanwei',
|
|
// fun: this.map2d,
|
|
svg: 'dimension',
|
|
key: 'ersanwei',
|
|
children: []
|
|
}
|
|
])
|
|
const isFolded: any = ref(false) // 添加折叠状态
|
|
const initialPositions: any = ref({}) // 保存初始位置
|
|
const isAnimating: any = ref(false) // 添加动画状态
|
|
onMounted(() => {
|
|
let menusHeight = menuList.value.length * 65 + 'px'
|
|
let height = menuList.value.length * 65 + 30 + 'px'
|
|
|
|
$('.leftBox')[0].style.height = height
|
|
$('.left .menus')[0].style.height = menusHeight
|
|
const items: any = document.querySelectorAll('.menus_itemBox')
|
|
items.forEach((item: any, index: any) => {
|
|
initialPositions.value[index] = item.style.transform || 'translateX(0)'
|
|
})
|
|
})
|
|
const leftSideSecondRef = ref()
|
|
const handleClick = (item: any, e) => {
|
|
console.log('点击了', item, e)
|
|
$('.leftSideSecond')[0].style.left = '100%'
|
|
$('.leftSideSecond')[0].style.top = e.layerY - 120 + 'px'
|
|
$('.leftSideSecond')[0].style.display = 'none'
|
|
if (item.children.length) {
|
|
$('.leftSideSecond')[0].style.display = 'block'
|
|
leftSideSecondRef.value.initList(item)
|
|
} else if (item.key === 'situation') {
|
|
//态势推演
|
|
if ((window as any).checkAuthIsValid) {
|
|
console.log('打开态势推演')
|
|
ipcRenderer.send('toggle-fullscreen', true)
|
|
router.push({ path: '/ts' })
|
|
|
|
} else {
|
|
ElMessage({
|
|
message: '您没有该功能的权限',
|
|
type: 'warning'
|
|
})
|
|
}
|
|
} else if (item.key === 'model') {
|
|
//模型库
|
|
if ((window as any).checkAuthIsValid) {
|
|
eventBus.emit('openModel', true)
|
|
console.log('打开模型库')
|
|
} else {
|
|
ElMessage({
|
|
message: '您没有该功能的权限',
|
|
type: 'warning'
|
|
})
|
|
}
|
|
} else if (item.key === 'military') {
|
|
//军标库
|
|
if ((window as any).checkAuthIsValid) {
|
|
eventBus.emit('openGraph', true)
|
|
} else {
|
|
ElMessage({
|
|
message: '您没有该功能的权限',
|
|
type: 'warning'
|
|
})
|
|
}
|
|
} else if (item.key === 'ersanwei') {
|
|
if (YJ.Global.multiViewportMode.getSdk().sdkD) {
|
|
YJ.Global.multiViewportMode.off(window.earth)
|
|
} else {
|
|
eventBus.emit('closeSplitScreen')
|
|
YJ.Global.multiViewportMode.on(window.earth)
|
|
}
|
|
}
|
|
}
|
|
const fold = () => {
|
|
// 如果正在动画中，直接返回
|
|
if (isAnimating.value) return
|
|
// 设置动画状态为true
|
|
isAnimating.value = true
|
|
const items = document.querySelectorAll('.menus_itemBox')
|
|
const left_bottom: any = document.querySelector('.left_bottom')
|
|
const itemCount = items.length
|
|
const itemDelay = 100
|
|
const itemDuration = 300
|
|
if (isFolded.value) {
|
|
left_bottom.style.bottom = '6.5vw'
|
|
left_bottom.style.left = '72px'
|
|
left_bottom.style.transform = 'rotate(0deg)'
|
|
// 恢复初始状态
|
|
items.forEach((item: any, index: any) => {
|
|
setTimeout(() => {
|
|
item.style.transition = 'transform 0.3s ease'
|
|
item.style.transform = initialPositions.value[index]
|
|
}, index * itemDelay)
|
|
})
|
|
} else {
|
|
// 折叠状态
|
|
items.forEach((item: any, index: any) => {
|
|
setTimeout(() => {
|
|
item.style.transition = 'transform 0.3s ease'
|
|
item.style.transform = 'translateX(-120%)'
|
|
}, index * itemDelay)
|
|
})
|
|
// 同步left_bottom的动画
|
|
setTimeout(
|
|
() => {
|
|
left_bottom.style.bottom = '50%'
|
|
left_bottom.style.left = '10px'
|
|
left_bottom.style.transform = 'rotate(180deg)'
|
|
},
|
|
(itemCount - 1) * itemDelay
|
|
)
|
|
}
|
|
|
|
// 在所有动画完成后重置状态
|
|
setTimeout(
|
|
() => {
|
|
isFolded.value = !isFolded.value
|
|
isAnimating.value = false
|
|
},
|
|
(itemCount - 1) * itemDelay + itemDuration
|
|
)
|
|
}
|
|
|
|
const clickMenu = (item: any) => {
|
|
console.log(item, 'item')
|
|
switch (item.key) {
|
|
case 'analysis':
|
|
console.log('analysis')
|
|
// eventBus.emit('analysisDialog')
|
|
eventBus.emit('circleViewShedDialog') //添加高程后测试
|
|
// eventBus.emit('submergeDialog')
|
|
// eventBus.emit('profileDialog')
|
|
// eventBus.emit('viewShedDialog')
|
|
// eventBus.emit('cutFillDialog')
|
|
// eventBus.emit('contourDialog')
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.leftBox {
|
|
width: 8.3vw;
|
|
// height: 20vw;
|
|
position: absolute;
|
|
left: 1em;
|
|
bottom: calc(7vw + 2px);
|
|
}
|
|
|
|
.left {
|
|
width: 100%;
|
|
height: 100%;
|
|
user-select: none;
|
|
//width: 7vw;
|
|
// color: red;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
.line {
|
|
width: 5.2vw;
|
|
}
|
|
|
|
.scrollBar81 {
|
|
position: absolute;
|
|
top: 33px;
|
|
left: 8px;
|
|
}
|
|
|
|
.scrollBar {
|
|
position: absolute;
|
|
top: 33px;
|
|
left: 11px;
|
|
height: 270px;
|
|
}
|
|
|
|
.menus {
|
|
width: 100%;
|
|
// height: 350px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0 8px 0 5px;
|
|
position: relative;
|
|
|
|
// margin-top: 20px;
|
|
.menus_itemBox {
|
|
width: 100%;
|
|
height: 6.5vh;
|
|
margin-left: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
// justify-content: space-around;
|
|
// margin-top: 2rem;
|
|
margin: auto;
|
|
cursor: pointer;
|
|
|
|
.item_icon {
|
|
width: 100%;
|
|
height: 4.2vh;
|
|
// background: url('../../../assets/images/hongse/left.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
>.item_icon_bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
.item_icon:hover {
|
|
// background: url('../../../assets/images/hongse/left1.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
>.item_icon_bg_hover {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.item_text {
|
|
width: 100%;
|
|
font-size: 1.1rem;
|
|
text-align: left;
|
|
color: #fff;
|
|
max-width: 4.5vw;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
font-family: 'alimamashuheiti';
|
|
font-weight: 400;
|
|
text-shadow: 0px 0px 9px rgba(20, 118, 255, 1);
|
|
box-sizing: border-box;
|
|
padding-left: 0.5rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.left_bottom {
|
|
position: fixed;
|
|
bottom: 6.5vw;
|
|
left: 72px;
|
|
height: 1.5vw;
|
|
width: 1.5vw;
|
|
background: url('../../../assets/images/hongse/shou.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|