316 lines
7.9 KiB
Vue
316 lines
7.9 KiB
Vue
<template>
|
|
<div class="leftBox">
|
|
<div class="left animate__animated">
|
|
<!--右侧区域背景图-->
|
|
<svg-icon :class-name="['absolute', 'zIndex-1', 'left_bg']" :icon-class="'leftMenuBg' + menuList.length">
|
|
</svg-icon>
|
|
|
|
<!--流动效果区域-->
|
|
<div class="line">
|
|
<img :class="[appVersion !== 'earth' ? 'scrollBar81' : 'scrollBar']" :src="require('@/assets/images/shijing/' + skinInfo + '/scrollBar.png')
|
|
" alt="" />
|
|
</div>
|
|
<!--右侧菜单-->
|
|
<div class="menus">
|
|
<div class="itemBox" v-for="(item, index) in menuList" @click="item.fun(item, index, $event)"
|
|
:title="$t(`leftMenu.firstMenu.${item.name}`)">
|
|
<div class="item_icon">
|
|
<svg-icon :class-name="['absolute', 'zIndex-1', 'left_item_bg']" icon-class="leftMenuItemBg"></svg-icon>
|
|
<svg-icon :class-name="['left_item_icon']" :icon-class="item.svg"></svg-icon>
|
|
</div>
|
|
<div class="item_text">
|
|
{{ $t(`leftMenu.firstMenu.${item.name}`) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { $changeComponentShow } from "../../utils/communication";
|
|
import { getSelectedNode } from "../Tree/treeNode";
|
|
import test from "./test";
|
|
import secondMenuFun from "./secondMenuFun";
|
|
|
|
export default {
|
|
name: "firstMenu",
|
|
mixins: [test, secondMenuFun],
|
|
data() {
|
|
return {
|
|
treeObj: null,
|
|
menuList: [
|
|
// 方案库（无）
|
|
// 标准版本
|
|
// {
|
|
// name: "situation",
|
|
// svg: "situation",
|
|
// fun: this.toSituation,
|
|
// key: "situation",
|
|
// },
|
|
// 模型库
|
|
{
|
|
name: "modelLibrary",
|
|
svg: "personalModel",
|
|
fun: this.openModel,
|
|
key: "model",
|
|
},
|
|
// 特效库
|
|
{
|
|
name: "effect",
|
|
svg: "effect",
|
|
fun: this.showSecondMenu,
|
|
key: "effect",
|
|
},
|
|
|
|
// 测量
|
|
{
|
|
name: "measure",
|
|
svg: "measure",
|
|
fun: this.showSecondMenu,
|
|
key: "measure",
|
|
},
|
|
// 分析
|
|
{
|
|
name: "analysis",
|
|
svg: "analysis",
|
|
fun: this.showSecondMenu,
|
|
key: "analysis",
|
|
},
|
|
// 工具
|
|
{
|
|
name: "tool",
|
|
svg: "tool",
|
|
fun: this.showSecondMenu,
|
|
key: "tool",
|
|
},
|
|
// 军标 // 标准版本
|
|
{
|
|
name: "militaryMark",
|
|
svg: "militaryMark",
|
|
fun: this.openGroundImg,
|
|
key: "militaryMark",
|
|
},
|
|
// // 在线图源
|
|
// {
|
|
// name: "onlinePictureSource",
|
|
// svg: "onlinePictureSource",
|
|
// fun: this.showSecondMenu,
|
|
// key: 'onlinePictureSource'
|
|
// },
|
|
// // 大数据
|
|
// {
|
|
// name: 'bigData',
|
|
// fun: this.showBigDataPage,
|
|
// svg: "bigData",
|
|
// key: 'bigData',
|
|
// },
|
|
// 三维军标 标准版本
|
|
{
|
|
name: "junbiao3d",
|
|
fun: this.openGround3d,
|
|
svg: "junbiao3d",
|
|
key: "junbiao3d",
|
|
},
|
|
// 二三维
|
|
{
|
|
name: "ersanwei",
|
|
fun: this.map2d,
|
|
svg: "ersanwei",
|
|
key: "ersanwei",
|
|
},
|
|
],
|
|
skinInfo: JSON.parse(localStorage.getItem("systemSetting")).skinInfo,
|
|
appVersion: localStorage.getItem("appVersion"),
|
|
};
|
|
},
|
|
created() { },
|
|
mounted() {
|
|
const that = this;
|
|
window.addEventListener("setItemEvent", (e) => {
|
|
if (e.key == "systemSetting") {
|
|
let obj = JSON.parse(e.newValue);
|
|
that.skinInfo = obj.skinInfo;
|
|
}
|
|
});
|
|
// let width, height = "380px", menusHeight = "350px"
|
|
/* switch (this.menuList.length) {
|
|
case 6:
|
|
height = "420px"
|
|
menusHeight = "390px"
|
|
break
|
|
}*/
|
|
let menusHeight = this.menuList.length * 65 + "px";
|
|
let height = this.menuList.length * 65 + 40 + "px";
|
|
$(".leftBox")[0].style.height = height;
|
|
$(".left .menus")[0].style.height = menusHeight;
|
|
|
|
this.$recvChanel("getTreeObj", (treeObj) => {
|
|
console.log(treeObj);
|
|
this.treeObj = treeObj;
|
|
this.$removeChanel("getTreeObj");
|
|
});
|
|
},
|
|
methods: {
|
|
// 态势
|
|
toSituation() {
|
|
// this.
|
|
if (window.Earth1) YJ.Global.multiViewportMode.off(window.Earth1);
|
|
// this.$enterFullscreen();
|
|
$root_home_index.$refs.myHeaderAll.$refs.setTool.fullScreen();
|
|
this.$sendChanel("checkSituation", true);
|
|
this.$changeComponentShow("#secondMenu", false);
|
|
},
|
|
openGround3d() {
|
|
if (window.checkAuthIsValid) {
|
|
$changeComponentShow(".junbiao3dBox", true);
|
|
$root_home_index.$refs.junbiao3d.open();
|
|
} else {
|
|
this.$message({
|
|
message: "您没有该功能的权限",
|
|
type: "warning",
|
|
});
|
|
}
|
|
// junbiao3d
|
|
},
|
|
openModel() {
|
|
/* let selectedNode = getSelectedNode(this.treeObj)
|
|
if (selectedNode) {*/
|
|
if (window.checkAuthIsValid) {
|
|
$changeComponentShow(".modelBox", true);
|
|
$root_home_index.$refs.model.open();
|
|
} else {
|
|
this.$message({
|
|
message: "您没有该功能的权限",
|
|
type: "warning",
|
|
});
|
|
}
|
|
/* } else {
|
|
this.$message.warning("请选中一节点后操作")
|
|
}*/
|
|
},
|
|
openGroundImg() {
|
|
/* let selectedNode = getSelectedNode(this.treeObj)
|
|
if (selectedNode) {*/
|
|
if (window.checkAuthIsValid) {
|
|
$changeComponentShow(".junbiaoBox", true);
|
|
$root_home_index.$refs.junbiao.open();
|
|
} else {
|
|
this.$message({
|
|
message: "您没有该功能的权限",
|
|
type: "warning",
|
|
});
|
|
}
|
|
|
|
/* } else {
|
|
this.$message.warning("请选中一节点后操作")
|
|
}*/
|
|
},
|
|
// 打开二级菜单页面
|
|
showSecondMenu(item, index, event) {
|
|
let reset = index == this.menuList.length - 1 ? 65 : 0;
|
|
// 打开弹窗位置
|
|
let topNum = Number(event.clientY) - reset; //100
|
|
// 打开弹窗触发方法
|
|
this.$changeComponentShow("#secondMenu", true, `top: ${topNum}px`);
|
|
// 给二级菜单页面传点击的一级菜单具体值
|
|
this.$sendChanel("currentSecondMenu", { item, index });
|
|
},
|
|
// 展示大数据页面
|
|
showBigDataPage() {
|
|
console.log("展示大数据页面");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.leftBox {
|
|
width: 112px;
|
|
height: 380px;
|
|
position: absolute;
|
|
left: 0.5em;
|
|
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: 85%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
/* bottom: 10vh;
|
|
padding: 35px 10px 15px 0;*/
|
|
height: 350px;
|
|
margin-top: 25px;
|
|
//align-self: center;
|
|
padding: 0 8px 0 5px;
|
|
|
|
.itemBox {
|
|
//width: 77px;
|
|
//height: 65px;
|
|
height: 6.5vh;
|
|
margin-left: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
margin: auto;
|
|
|
|
.item_icon {
|
|
width: 100%;
|
|
//height: 5vh;
|
|
height: 4.2vh;
|
|
//width: 77px;
|
|
//height: 48px;
|
|
position: relative;
|
|
}
|
|
|
|
.item_text {
|
|
width: 100%;
|
|
height: 2vh;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
//height: 17px;
|
|
//line-height: 17px;
|
|
color: #fff;
|
|
max-width: 75px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
.itemBox:hover {
|
|
transition-duration: 0.5s;
|
|
transform: scale(0.8);
|
|
}
|
|
}
|
|
}
|
|
</style>
|