<template>
|
<div>
|
<div class="TapContainer">
|
<div class="fileContainer">
|
<div
|
class="fileBtn"
|
@mouseover="showFileDetails(true)"
|
@mouseout="showFileDetails(false)"
|
>
|
<i class="el-icon-menu"></i>
|
</div>
|
<div
|
class="fileDetails"
|
v-show="fileDetailsShow"
|
@mouseover="showFileDetails(true)"
|
@mouseout="showFileDetails(false)"
|
>
|
<ul>
|
<div @click.stop>
|
<el-upload
|
action=""
|
:auto-upload="false"
|
:show-file-list="false"
|
:on-change="openFile"
|
accept=".json"
|
>
|
<li>打开文件</li>
|
</el-upload>
|
</div>
|
<li
|
v-for="fileFunc in fileFuncs"
|
:key="fileFunc.id"
|
@click.stop="btnEvent(fileFunc.func)"
|
>
|
{{ fileFunc.name }}
|
</li>
|
</ul>
|
</div>
|
</div>
|
|
<el-tabs
|
type="border-card"
|
v-model="activeName"
|
@tab-click="clickTabs"
|
:before-leave="beforeLeave"
|
>
|
<el-tab-pane
|
:key="tab.name"
|
v-for="tab in tabs"
|
:label="tab.title"
|
:name="tab.name"
|
>
|
<div v-if="!hideTools" class="tabPaneContainer">
|
<div
|
class="buttondiv"
|
:key="button.name"
|
v-for="button in tab.content"
|
>
|
<div class="title">
|
{{ button.class }}
|
</div>
|
<div
|
class="ButtonContainer"
|
:key="bt.name"
|
v-for="bt in button.content"
|
>
|
<div class="buttonBox" v-if="bt.children">
|
<el-dropdown
|
@command="dropDownClick($event, bt.name)"
|
:popper-append-to-body="false"
|
>
|
<span class="el-dropdown-link">
|
<el-button type="text" class="el-button">
|
<div class="icondiv">
|
<img
|
:src="bt.icon"
|
alt=""
|
width="25px"
|
height="25px"
|
/>
|
</div>
|
{{ bt.label }}
|
<i class="el-icon-arrow-down el-icon--right"></i>
|
</el-button>
|
</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item
|
v-for="child in bt.children"
|
:key="child.name"
|
:command="child.name"
|
>
|
{{ child.label }}
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
<div class="buttonBox" v-else>
|
<el-button
|
type="text"
|
class="el-button"
|
:style="
|
bt.checked
|
? 'color: #409EFF;background: rgba(64, 158, 255, 0.3);'
|
: ''
|
"
|
@click="btnEvent(bt.name, bt)"
|
>
|
<div class="icondiv">
|
<img :src="bt.icon" alt="" width="25px" height="25px" />
|
</div>
|
{{ bt.label }}
|
</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
<div class="rightBtn">
|
<el-button type="text" class="el-button" @click="exit">
|
退出登录
|
</el-button>
|
</div>
|
</div>
|
<!-- 功能窗口 -->
|
<div class="functions">
|
<mapinfo ref="mapinfo" />
|
<contour ref="contour" />
|
<slope ref="slope" />
|
<terrainOutline ref="terrainOutline" />
|
<flood ref="flood" />
|
<bufferArea ref="bufferArea" />
|
<terrainDig ref="terrainDig" />
|
<terrainPress ref="terrainPress" />
|
<modelPress ref="modelPress" />
|
<POISearch ref="POISearch" />
|
<routerSearch ref="routerSearch" />
|
<spaceSearch ref="spaceSearch" />
|
<localtion ref="localtion" />
|
<bufferSearch ref="bufferSearch" />
|
<skyTexture ref="skyTexture" />
|
<undergroundModel ref="undergroundModel" />
|
<SunshineAnalysis ref="SunshineAnalysis" />
|
<ShadowAnalysis ref="ShadowAnalysis" />
|
<DemoAnimation ref="DemoAnimation" />
|
<ColorAdjustment ref="colorAdjustment" />
|
<Demolition ref="Demolition" />
|
<ModelLibrary ref="ModelLibrary" />
|
<PathAnimation ref="PathAnimation" />
|
<AddVideo ref="AddVideo" />
|
<ProjectSeting ref="ProjectSeting" />
|
<Gisserver ref="Gisserver" @success="addServerData" />
|
<Geoserver ref="Geoserver" @success="addServerData" />
|
<Light ref="light" />
|
<ImportPolylineVolume
|
ref="importPolylineVolume"
|
@success="addServerData"
|
/>
|
<EffectCone ref="EffectCone" />
|
<Tetrahedron ref="Tetrahedron" />
|
<EffectCylinder ref="EffectCylinder" />
|
<FlyingLine ref="FlyingLine" />
|
<RotateEffectCircle ref="RotateEffectCircle" />
|
</div>
|
</div>
|
</template>
|
<script>
|
//#region
|
import baseVuex from "@mixin/baseVuex";
|
import Bus from "@tools/Bus";
|
// 各大类工具
|
import index from "./mixin/index";
|
import measure from "./mixin/measure";
|
import layer from "./mixin/layer";
|
import analyse from "./mixin/analyse";
|
import scene from "./mixin/scene";
|
import effect from "./mixin/effect";
|
import object from "./mixin/object";
|
import view from "./mixin/view";
|
// 工具栏配置
|
import tabs from "@config/config";
|
// 测量-信息弹窗
|
import mapinfo from "./mapinfo";
|
// 各类分析弹窗
|
import contour from "@c/analysis/contour";
|
import slope from "@c/analysis/slope";
|
import terrainOutline from "@c/analysis/terrainOutline";
|
import flood from "@c/analysis/flood";
|
import bufferArea from "@c/analysis/bufferArea";
|
import terrainDig from "@c/analysis/terrainDig";
|
import terrainPress from "@c/analysis/terrainPress";
|
import modelPress from "@c/analysis/modelPress";
|
// 主页-poi查询弹窗
|
import POISearch from "@c/indexPopup/POISearch";
|
import routerSearch from "@c/indexPopup/routerSearch";
|
import spaceSearch from "@c/indexPopup/spaceSearch";
|
import bufferSearch from "@c/indexPopup/bufferSearch";
|
import ProjectSeting from "@c/indexPopup/ProjectSeting";
|
import Light from "@c/indexPopup/Light";
|
// 场景弹窗
|
import skyTexture from "@c/scene/skyTexture";
|
import DemoAnimation from "@c/scene/DemoAnimation";
|
import ColorAdjustment from "@c/scene/ColorAdjustment";
|
import Demolition from "@c/scene/Demolition";
|
import undergroundModel from "@c/scene/undergroundModel";
|
import SunshineAnalysis from "@c/analysis/SunshineAnalysis";
|
import ShadowAnalysis from "@c/analysis/ShadowAnalysis";
|
import ModelLibrary from "@c/tools/ModelLibrary";
|
import localtion from "@c/scene/location";
|
//对象弹窗
|
import PathAnimation from "@c/object/PathAnimation";
|
import AddVideo from "@c/object/AddVideo";
|
//服务弹窗
|
import Gisserver from "@c/indexPopup/Gisserver";
|
import Geoserver from "@c/indexPopup/Geoserver";
|
import ImportPolylineVolume from "@c/map/layerTree/ImportPolylineVolume";
|
// 特效弹窗
|
import EffectCone from "@c/effect/EffectCone";
|
import RotateEffectCircle from "@c/effect/RotateEffectCircle";
|
import EffectCylinder from "@c/effect/EffectCylinder";
|
import FlyingLine from "@c/effect/FlyingLine";
|
import Tetrahedron from "@c/effect/Tetrahedron";
|
|
//#endregion
|
export default {
|
name: "top",
|
components: {
|
Light,
|
POISearch,
|
routerSearch,
|
spaceSearch,
|
bufferSearch,
|
mapinfo,
|
contour,
|
slope,
|
terrainOutline,
|
flood,
|
bufferArea,
|
terrainDig,
|
terrainPress,
|
modelPress,
|
skyTexture,
|
ColorAdjustment,
|
undergroundModel,
|
SunshineAnalysis,
|
ShadowAnalysis,
|
DemoAnimation,
|
Demolition,
|
ModelLibrary,
|
PathAnimation,
|
AddVideo,
|
ProjectSeting,
|
localtion,
|
Gisserver,
|
Geoserver,
|
ImportPolylineVolume,
|
EffectCone,
|
Tetrahedron,
|
RotateEffectCircle,
|
FlyingLine,
|
EffectCylinder,
|
},
|
mixins: [
|
baseVuex,
|
index,
|
measure,
|
layer,
|
analyse,
|
scene,
|
effect,
|
object,
|
view,
|
],
|
data() {
|
return {
|
tabs: [],
|
activeName: "index",
|
clickTime: undefined,
|
// 左侧文件下拉列表
|
fileDetailsShow: false,
|
fileFuncs: [
|
{ id: "001", name: "添加数据", func: "addFile" },
|
{ id: "002", name: "保存文件", func: "saveFile" },
|
],
|
};
|
},
|
mounted() {
|
this.tabs = tabs.tabs;
|
Bus.$off("checkTab");
|
Bus.$on("checkTab", (name, checked) => {
|
let tab = this.getTabByName(name);
|
if (tab) {
|
tab.checked = checked;
|
}
|
});
|
},
|
methods: {
|
getTabByName(name) {
|
let names = name.split("/");
|
let _tab;
|
let tabs = this.tabs;
|
for (let nameIndex = 0; nameIndex < names.length; nameIndex++) {
|
for (let tabIndex = 0; tabIndex < tabs.length; tabIndex++) {
|
if (tabs[tabIndex].name === names[nameIndex]) {
|
if (nameIndex === names.length - 1) {
|
_tab = tabs[tabIndex];
|
} else {
|
tabs = tabs[tabIndex].content;
|
}
|
break;
|
}
|
}
|
}
|
return _tab;
|
},
|
showFileDetails(show) {
|
this.fileDetailsShow = show;
|
},
|
// 退出
|
exit() {
|
localStorage.removeItem("loginscene");
|
this.$router.push({
|
name: "login",
|
});
|
},
|
// 打开文件
|
openFile(file) {
|
Bus.$emit("openFile", file);
|
},
|
// 添加数据
|
addFile() {
|
Bus.$emit("addFile");
|
},
|
// 保存文件
|
saveFile() {
|
Bus.$emit("saveFile");
|
},
|
// 点击tap栏
|
clickTabs() {
|
if (this.clickTime && new Date().getTime() - this.clickTime < 200) {
|
// 双击-改变工具栏显示状态
|
this.changeMapToolsVisible("hideTools");
|
return;
|
}
|
this.clickTime = new Date().getTime();
|
},
|
// 切换标签之前的钩子
|
beforeLeave() {
|
// 单击Tab栏-如果隐藏则显示
|
if (this.hideTools) {
|
this.changeMapToolsVisible("hideTools");
|
}
|
return true;
|
},
|
// 提示信息
|
message(type, info) {
|
this.$notify({
|
message: info,
|
type: type,
|
duration: "1000",
|
offset: 140,
|
});
|
},
|
// 点击事件
|
btnEvent(type, btn) {
|
if (this[type]) {
|
this[type](btn);
|
} else {
|
this.$message("待开发...");
|
}
|
},
|
// 下拉框点击事件
|
dropDownClick(type, parentName) {
|
// 二维军标 三维军标
|
if (parentName == "twoDArmyLabel" || parentName == "threeDArmyLabel") {
|
this.armyLabel(type, parentName);
|
}
|
// 2D图形 3D图形
|
else if (parentName == "twoDGraph" || parentName == "threeDGraph") {
|
this.graphObject(type, parentName);
|
}
|
// 通视
|
else if (parentName == "lineOfSight") {
|
this.lineSight(type);
|
} else if (this[type]) {
|
this[type]();
|
} else {
|
this.$message("待开发...");
|
}
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.fileContainer {
|
position: absolute;
|
top: 0;
|
left: 0;
|
z-index: 1000;
|
|
.fileDetails {
|
ul {
|
width: 150px;
|
|
li {
|
text-align: center;
|
padding-top: 10px;
|
cursor: pointer;
|
width: 150px;
|
height: 30px;
|
background-color: rgb(71, 71, 71);
|
color: white;
|
|
&:hover {
|
color: #fff;
|
background: rgb(107, 107, 107);
|
}
|
}
|
}
|
|
/deep/ .el-upload {
|
cursor: default;
|
display: block;
|
}
|
}
|
|
.fileBtn {
|
width: 40px;
|
height: 40px;
|
line-height: 40px;
|
text-align: center;
|
cursor: pointer;
|
background-color: rgb(71, 71, 71);
|
border: none;
|
color: white;
|
|
&:hover {
|
color: rgb(231, 225, 225);
|
}
|
}
|
}
|
|
.rightBtn {
|
position: absolute;
|
right: 10px;
|
top: 0;
|
z-index: 1000;
|
.el-button {
|
height: 40px;
|
}
|
}
|
|
/deep/ .el-tabs__header {
|
margin-left: 40px !important;
|
}
|
.el-dropdown-link {
|
cursor: pointer;
|
color: #fff;
|
font-size: 12px;
|
}
|
.el-icon-arrow-down {
|
font-size: 12px;
|
}
|
.el-dropdown-menu__item {
|
color: #fff;
|
background-color: rgb(71, 71, 71);
|
border: none;
|
}
|
.el-dropdown-menu__item:hover {
|
background-color: rgb(71, 71, 71) !important;
|
color: #409eff !important;
|
}
|
.el-dropdown-menu {
|
background-color: rgb(71, 71, 71);
|
border: none;
|
}
|
/deep/ .el-radio__label {
|
color: white;
|
}
|
.tabPaneContainer {
|
padding: 5px 10px;
|
height: 79px;
|
overflow: hidden;
|
}
|
.buttondiv,
|
.ButtonContainer {
|
display: inline-block;
|
}
|
.icondiv {
|
font-size: 20px;
|
margin-bottom: 5px;
|
}
|
.buttondiv {
|
border-right: 2px solid rgb(71, 71, 71);
|
margin-right: 7px;
|
}
|
.buttonBox {
|
font-size: 12px;
|
}
|
.buttondiv:last-child {
|
border-right: 0;
|
}
|
.title {
|
color: rgb(192, 192, 192);
|
}
|
.el-button {
|
padding: 0 10px;
|
margin: 0 1px;
|
height: 60px;
|
color: #fff;
|
}
|
.ButtonContainer :hover {
|
color: rgb(102, 177, 255);
|
}
|
/deep/ .el-tabs__item:hover {
|
color: rgb(231, 225, 225) !important;
|
}
|
/deep/ .el-tabs__item:focus {
|
background: rgb(107, 107, 107) !important;
|
color: #fff !important;
|
}
|
/deep/ .el-tabs__item,
|
/deep/ .el-tabs__nav-scroll {
|
background: rgb(71, 71, 71) !important;
|
color: #fff;
|
height: 40px;
|
border: none !important;
|
}
|
/deep/ .el-tabs__content {
|
background: rgb(107, 107, 107) !important;
|
border: none !important;
|
padding: 0 !important;
|
}
|
/deep/ .el-tabs--border-card {
|
border: none;
|
}
|
/deep/ .el-tabs--border-card > .el-tabs__header {
|
border-bottom: 0px;
|
}
|
/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
|
color: #fff;
|
background: rgb(107, 107, 107) !important;
|
}
|
/deep/ .popper__arrow,
|
/deep/ .popper__arrow:after {
|
border-style: none !important; //bug
|
}
|
</style>
|
