<template>
|
<div class="left" id="left">
|
<transition name="el-fade-in-linear">
|
<div
|
v-show="dropShow"
|
class="left-downdrop"
|
@click="test"
|
@mouseenter="simulationHoverOn('下拉')"
|
@mouseleave="dropHoverOff"
|
>
|
<img v-if="!isShowZkImg" src="@/assets/img/left/leftnav2.png" />
|
<img v-else src="@/assets/img/left/leftnav2-s.png" />
|
</div>
|
</transition>
|
<div>
|
<div class="left-l" id="left-l">
|
<el-collapse-transition>
|
<div class="leftAll" v-show="leftShow">
|
<el-tabs
|
type="border-card"
|
:tab-position="tabPosition"
|
v-model="activeName"
|
@tab-click="tabclick"
|
>
|
<el-tab-pane label="资源目录" name="资源目录">
|
<span slot="label" @click="simulationHoverOn('资源目录')">
|
<img
|
class="resMenuImg"
|
v-if="!isShowResMenuImg"
|
src="@/assets/img/left/souselist4.png"
|
/>
|
<img
|
class="resMenuImg"
|
v-else
|
src="@/assets/img/left/souselist4-s.png"
|
/>
|
</span>
|
<div v-show="isShowResMenu" class="leftContent">
|
<layertree />
|
<!-- <layertreebak /> -->
|
</div>
|
</el-tab-pane>
|
<!-- <el-tab-pane label="专题分析" name="专题分析">
|
<span slot="label" @click="simulationHoverOn('专题分析')">
|
<img
|
class="specialImg"
|
v-if="!isShowSpeAnalyseImg"
|
src="@/assets/img/left/specialanalyse4.png"
|
/>
|
<img
|
class="specialImg"
|
v-else
|
src="@/assets/img/left/specialanalyse4-s.png"
|
/>
|
</span>
|
<div v-show="isShowSpeAnalyse" class="leftContent">
|
<leftztfx ref="ZTFX" />
|
</div>
|
</el-tab-pane> -->
|
|
<!-- <el-tab-pane label="我的资源" name="我的资源">
|
<span slot="label" @click="simulationHoverOn('我的资源')">
|
<img
|
class="sceneImg"
|
v-if="!isShowSceneImg"
|
src="@/assets/img/left/scene4.png"
|
/>
|
<img
|
class="sceneImg"
|
v-else
|
src="@/assets/img/left/scene4-s.png"
|
/>
|
</span>
|
<div v-show="isShowScene" class="leftContent">
|
<Layer ref="Layer" />
|
</div>
|
</el-tab-pane> -->
|
|
<!-- <el-tab-pane label="空间分析" name="空间分析">
|
<span slot="label" @click="simulationHoverOn('空间分析')">
|
<img
|
class="analyseImg"
|
v-if="!isShowAnalyseImg"
|
src="@/assets/img/left/analyse4.png"
|
/>
|
<img
|
class="analyseImg"
|
v-else
|
src="@/assets/img/left/analyse4-s.png"
|
/>
|
</span>
|
<div v-show="isShowAnalyse" class="leftContent">
|
<leftkjfx ref="leftkjfx" />
|
</div>
|
</el-tab-pane> -->
|
|
<!-- <el-tab-pane label="场景模式" name="场景模式">
|
<span slot="label" @click="simulationHoverOn('场景模式')">
|
<img
|
class="sceneImg"
|
v-if="!isShowSceneImg"
|
src="@/assets/img/left/scene4.png"
|
/>
|
<img
|
class="sceneImg"
|
v-else
|
src="@/assets/img/left/scene4-s.png"
|
/>
|
</span>
|
<div v-show="isShowScene" class="leftContent">
|
<leftcjms ref="leftcjms" />
|
</div>
|
</el-tab-pane> -->
|
<!-- <el-tab-pane label="特效" name="特效">
|
<span slot="label" @click="simulationHoverOn('特效')">
|
<img
|
class="speEffectImg"
|
v-if="!isShowSpeEffectImg"
|
src="@/assets/img/left/specialeffect4.png"
|
/>
|
<img
|
class="speEffectImg"
|
v-else
|
src="@/assets/img/left/specialeffect4-s.png"
|
/>
|
</span>
|
<div v-show="isShowSpeEffect" class="leftContent">
|
<lefttx ref="TX" />
|
</div>
|
</el-tab-pane> -->
|
<!-- <el-tab-pane
|
label="收缩"
|
name="收缩"
|
v-show="!isShow"
|
@click="!isShow"
|
>
|
<span slot="label" @click="simulationHoverOn('收缩')">
|
<img
|
v-if="!isShowSsImg"
|
src="@/assets/img/left/closeleftcontain1.png"
|
/>
|
<img v-else src="@/assets/img/left/closeleftcontain1-s.png" />
|
</span>
|
</el-tab-pane> -->
|
</el-tabs>
|
</div>
|
</el-collapse-transition>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
.POI_box {
|
background-color: #eee;
|
width: 423px;
|
height: 446px;
|
border-radius: 8px;
|
position: absolute;
|
top: 240px;
|
left: 444px;
|
}
|
|
.POI_box /deep/ .el-card__body {
|
padding: 0 20px;
|
}
|
|
.POI_box .el-form {
|
margin-top: 10px;
|
}
|
|
.POI_box .el-form .el-form-item {
|
margin-bottom: 10px;
|
}
|
|
.POI_box .el-form .el-input {
|
/* width: 300px; */
|
}
|
|
/* yhadd */
|
/* 左侧导航条的样式调整 */
|
.el-tabs--border-card {
|
border-radius: 8px;
|
height: 65px;
|
}
|
|
.el-tabs span {
|
display: inline-block;
|
padding: 0 20px;
|
margin-top: 20px;
|
}
|
|
/* 去除上下箭头^ */
|
.el-tabs--left /deep/ .el-tabs__nav-prev {
|
display: none;
|
}
|
|
.el-tabs--left /deep/ .el-tabs__nav-next {
|
display: none;
|
}
|
|
.el-tabs--left /deep/ .el-tabs__nav-wrap.is-left.is-scrollable {
|
padding: 0 0;
|
}
|
|
.el-tabs--left.el-tabs--border-card /deep/ .el-tabs__item.is-left {
|
border-right: 1px solid #dddddd;
|
border-top: 1px solid #dddddd;
|
border-bottom: none;
|
}
|
|
.el-tabs--left.el-tabs--border-card /deep/ .el-tabs__header.is-left {
|
border-right: none;
|
}
|
|
.el-tabs /deep/.el-tabs--border-card {
|
background-color: rgba(0, 0, 0, 0.4);
|
}
|
|
.el-tabs /deep/ .el-tabs__item.is-active {
|
background-color: transparent !important;
|
border-right: 1px solid transparent !important;
|
}
|
|
.el-tabs--border-card /deep/ .el-tabs__header {
|
background-color: transparent;
|
}
|
|
/* 调整左侧菜单 */
|
.el-tabs--left /deep/ .el-tabs__nav {
|
/* background-color: #bfa; */
|
height: 100%;
|
}
|
|
.el-tabs /deep/ .el-tabs__item {
|
/* height: 70px; */
|
line-height: 20%;
|
height: 20%;
|
/* line-height: 95px; */
|
padding: 0px;
|
}
|
|
.el-tabs--left /deep/ .el-tabs__header.is-left {
|
margin-right: -32px;
|
}
|
|
.leftContent {
|
margin-left: 32px;
|
}
|
|
/* 鼠标悬停切换图片 */
|
/* .resMenuImg:hover {
|
content: url("../../assets/img/left/souselist4.png");
|
}
|
.analyseImg:hover {
|
content: url("../../assets/img/left/analyse4.png");
|
}
|
.specialImg:hover {
|
content: url("../../assets/img/left/specialanalyse4.png");
|
}
|
.sceneImg:hover {
|
content: url("../../assets/img/left/scene4.png");
|
}
|
.speEffectImg:hover {
|
content: url("../../assets/img/left/specialeffect4.png");
|
} */
|
.leftAll {
|
transition: height 1.5s;
|
-webkit-transition: height 1.5s;
|
/* Safari and Chrome */
|
}
|
|
.slideUp {
|
height: 70px;
|
line-height: 70px;
|
text-align: center;
|
width: 68px;
|
/* display: inline-block; */
|
background: #ffffff;
|
border-bottom-left-radius: 8px;
|
border-bottom-right-radius: 8px;
|
border-left: 1px solid #dcdfe6;
|
border-right: 1px solid #dcdfe6;
|
cursor: pointer;
|
}
|
|
/* yhadd */
|
.mu {
|
position: relative;
|
margin-top: 8px;
|
margin-left: 8px;
|
margin-bottom: 8px;
|
cursor: pointer;
|
}
|
|
.left-downdrop img {
|
margin-top: 20px;
|
}
|
|
.left-downdrop {
|
position: absolute;
|
left: 10px;
|
top: 240px;
|
height: 70px;
|
line-height: 70px;
|
text-align: center;
|
width: 70px;
|
background: rgba(0, 0, 0, 0.5);
|
border-radius: 8px;
|
cursor: pointer;
|
border: 1px solid #dfe4ed;
|
z-index: 200;
|
}
|
|
.left-l {
|
position: absolute;
|
/* background-color: #f5f5f5; */
|
top: 240px;
|
|
left: 10px;
|
border-radius: 8px;
|
/* yhadd */
|
/* height: 252px; */
|
}
|
|
.left-function {
|
cursor: pointer;
|
}
|
|
.left-hr {
|
margin-left: 5px;
|
margin-right: 5px;
|
}
|
|
.left-closeleftcontain {
|
margin: 25px auto;
|
display: block;
|
cursor: pointer;
|
}
|
|
.left-zyml {
|
position: absolute;
|
min-width: 260px;
|
margin-left: 102px;
|
margin-top: 96px;
|
background-color: white;
|
}
|
|
.left-kjfx {
|
position: absolute;
|
width: 433px;
|
height: 259px;
|
margin-left: 102px;
|
margin-top: 185px;
|
background-color: white;
|
}
|
|
.left-ztfx {
|
position: absolute;
|
width: 377px;
|
height: 220px;
|
margin-left: 103px;
|
margin-top: 262px;
|
background-color: white;
|
}
|
|
.left-cjms {
|
position: absolute;
|
width: 168px;
|
height: 220px;
|
margin-left: 103px;
|
margin-top: 340px;
|
background-color: white;
|
}
|
|
.left-tx {
|
position: absolute;
|
width: 690px;
|
height: 305px;
|
margin-left: 103px;
|
margin-top: 415px;
|
background-color: white;
|
}
|
|
.dys {
|
position: absolute;
|
top: 8px;
|
right: 18px;
|
width: 4px;
|
height: 4px;
|
border-radius: 50%;
|
background-color: white;
|
}
|
</style>
|
<script>
|
import leftkjfx from "@/components/left/left-kjfx";
|
import leftztfx from "@/components/left/left-ztfx";
|
import leftcjms from "@/components/left/left-cjms";
|
import lefttx from "@/components/left/left-tx";
|
import layertree from "@/components/left/layerTree";
|
import layertreebak from "@/components/left/layerTreeBak";
|
|
import Layer from "@/components/left/layerTree/Layer";
|
|
export default {
|
name: "left",
|
components: {
|
leftkjfx,
|
leftztfx,
|
leftcjms,
|
lefttx,
|
layertree,
|
layertreebak,
|
Layer,
|
},
|
data() {
|
return {
|
/* yhadd */
|
dropShow: false,
|
// 控制选中的pane面板
|
activeName: "收缩",
|
upup: true,
|
// 控制导航栏显示的方式，左侧显示
|
tabPosition: "left",
|
// 控制导航栏的内容显示隐藏
|
leftShow: true,
|
tabStatus: "",
|
|
// 控制内容区域的显示与隐藏
|
isShowResMenu: false,
|
isShowAnalyse: false,
|
isShowSpeAnalyse: false,
|
isShowScene: false,
|
isShowSpeEffect: false,
|
// 控制图片的显示与隐藏
|
isShowResMenuImg: false,
|
isShowAnalyseImg: false,
|
isShowSpeAnalyseImg: false,
|
isShowSceneImg: false,
|
isShowSpeEffectImg: false,
|
isShowSsImg: false,
|
isShowZkImg: false,
|
// 标记每个pane面板中功能的打开状态
|
sceneImgSta: false,
|
speAnalyseImgSta: false,
|
speEffectImgSta: false,
|
analyseImgSta: false,
|
/* yhadd */
|
zyml: false,
|
kjfx: false,
|
ztfx: false,
|
cjms: false,
|
tx: false,
|
yu: 10,
|
isShow: false,
|
};
|
},
|
watch: {
|
isShowResMenu(val) {
|
if (val) {
|
document.querySelector(".el-tabs--border-card").style.height = "444px";
|
} else {
|
document.querySelector(".el-tabs--border-card").style.height = "65px";
|
this.isShowResMenuImg = false;
|
}
|
},
|
},
|
|
methods: {
|
// yhadd
|
closeAllHighLight(type) {
|
!(type == "kjfx") && this.$refs.leftkjfx.clearActive();
|
!(type == "tx") && this.$refs.TX.clearActive();
|
},
|
// 监控鼠标进入
|
simulationHoverOn(mode) {
|
this.hideAllContent();
|
this.itemIsSelected();
|
switch (mode) {
|
case "资源目录":
|
if (this.isShow) {
|
this.isShow = !this.isShow;
|
return;
|
}
|
|
this.isShowResMenu = true;
|
this.isShowResMenuImg = true;
|
this.activeName = "资源目录";
|
break;
|
case "空间分析":
|
this.isShowAnalyse = true;
|
this.isShowAnalyseImg = true;
|
this.activeName = "空间分析";
|
break;
|
case "专题分析":
|
this.isShowSpeAnalyse = true;
|
this.isShowSpeAnalyseImg = true;
|
this.activeName = "专题分析";
|
break;
|
case "场景模式":
|
this.isShowScene = true;
|
this.isShowSceneImg = true;
|
this.activeName = "场景模式";
|
break;
|
case "我的资源":
|
this.isShowScene = true;
|
this.isShowSceneImg = true;
|
this.activeName = "我的资源";
|
break;
|
case "特效":
|
this.isShowSpeEffect = true;
|
this.isShowSpeEffectImg = true;
|
this.activeName = "特效";
|
break;
|
case "收缩":
|
this.isShowSsImg = true;
|
break;
|
case "下拉":
|
this.isShowZkImg = true;
|
break;
|
default:
|
break;
|
}
|
},
|
// 监控鼠标离开
|
simulationHoverOff() {
|
this.hideAllContent();
|
this.itemIsSelected();
|
},
|
dropHoverOff() {
|
this.isShowZkImg = false;
|
},
|
// 收缩
|
shous() {
|
setTimeout(() => {
|
this.leftShow = !this.leftShow;
|
}, 1000);
|
},
|
// 下拉
|
test() {
|
this.upup = true;
|
this.isShow = !this.isShow;
|
this.leftShow = !this.leftShow;
|
this.dropShow = !this.dropShow;
|
},
|
|
// 把tabs里所有的内容隐藏，并把图片置为不选中;
|
hideAllContent() {
|
this.isShowSpeEffect = false;
|
this.isShowResMenu = false;
|
this.isShowAnalyse = false;
|
this.isShowSpeAnalyse = false;
|
this.isShowScene = false;
|
this.isShowSpeEffectImg = false;
|
this.isShowResMenuImg = false;
|
this.isShowAnalyseImg = false;
|
this.isShowSpeAnalyseImg = false;
|
this.isShowSceneImg = false;
|
this.isShowSsImg = false;
|
},
|
|
// 判断每个pane中是否有功能在打开状态，若在打开状态，图标为选中态
|
itemIsSelected() {
|
if (this.sceneImgSta) {
|
this.isShowSceneImg = true;
|
}
|
if (this.speAnalyseImgSta) {
|
this.isShowSpeAnalyseImg = true;
|
}
|
if (this.speEffectImgSta) {
|
this.isShowSpeEffectImg = true;
|
}
|
if (this.analyseImgSta) {
|
this.isShowAnalyseImg = true;
|
}
|
},
|
// 监听tabs切换;
|
tabclick(tab) {
|
// this.isShow = !this.isShow;
|
switch (tab.label) {
|
case "收缩":
|
this.hideAllContent();
|
this.leftShow = !this.leftShow;
|
setTimeout(() => {
|
this.dropShow = !this.dropShow;
|
}, 700);
|
break;
|
default:
|
break;
|
}
|
},
|
// yhadd
|
|
closeAll() {
|
this.zyml = false;
|
this.kjfx = false;
|
this.ztfx = false;
|
this.cjms = false;
|
this.tx = false;
|
},
|
clearTX() {
|
this.$refs.TX.clearTX();
|
this.$refs.ZTFX.clear();
|
},
|
closeHighLight() {
|
this.$refs.ZTFX.closeHighLight();
|
},
|
},
|
};
|
</script>
|
