<template>
|
<div>
|
<div
|
@click="showMenuList"
|
:class="{ menulist: !panelActive, menulist_active: panelActive }"
|
class="menuliststyle"
|
>
|
<img
|
class="menuchangebtn"
|
v-show="!panelActive"
|
title="菜单"
|
:src="switchMenuImage"
|
/>
|
<div class="menubtnlist" v-show="panelActive">
|
<div class="menubtn" @click="showSceneCard()">
|
<img
|
class="bhImg"
|
title="场景数据"
|
src="@/assets/img/left/specialeffect4.png"
|
/>
|
<span>场景</span>
|
</div>
|
<div class="menubtn" @click="setMenuTool(1)">
|
<img class="bhImg" title="标绘" src="@/assets/img/right/bh1.png" />
|
<span>标绘</span>
|
</div>
|
<div class="menubtn" @click="setMenuTool(2)">
|
<img class="bhImg" title="量算" src="@/assets/img/right/ls-s.png" />
|
<span>量算</span>
|
</div>
|
<div class="menubtn" @click="setMenuTool(3)">
|
<img class="bhImg" title="漫游" src="@/assets/img/right/my11.png" />
|
<span>漫游</span>
|
</div>
|
<div class="menubtn" @click="showModelCard()">
|
<img
|
class="bhImg"
|
title="专题"
|
src="@/assets/img/left/specialanalyse4.png"
|
/>
|
<span>模型</span>
|
</div>
|
|
<div class="menubtn" @click="setMenuTool(5)">
|
<img class="bhImg" title="分析" src="@/assets/img/right/cx-s.png" />
|
<span>分析</span>
|
</div>
|
<div class="menubtn" @click="setMenuTool(6)">
|
<img
|
class="bhImg"
|
title="特效"
|
src="@/assets/img/left/leftnav2.png"
|
/>
|
<span>特效</span>
|
</div>
|
<div class="menubtn" @click="showSettingCard()">
|
<img
|
class="bhImg"
|
title="设置"
|
src="@/assets/img/left/specialeffect4.png"
|
/>
|
<span>设置</span>
|
</div>
|
|
</div>
|
</div>
|
<div class="menutools">
|
<plotting
|
class="menutool"
|
:class="{ menutoolhide: !(!panelActive && selectIndex == 1) }"
|
ref="plotting"
|
/>
|
<measure
|
class="menutool"
|
:class="{ menutoolhide: !(!panelActive && selectIndex == 2) }"
|
ref="measure"
|
/>
|
<roam
|
class="menutool"
|
:class="{ menutoolhide: !(!panelActive && selectIndex == 3) }"
|
ref="roam"
|
/>
|
<special
|
class="menutool"
|
:class="{ menutoolhide: !(!panelActive && selectIndex == 4) }"
|
ref="special"
|
/>
|
<analysis
|
class="menutool"
|
:class="{ menutoolhide: !(!panelActive && selectIndex == 5) }"
|
ref="analysis"
|
/>
|
<effects
|
class="menutool"
|
:class="{ menutoolhide: !(!panelActive && selectIndex == 6) }"
|
ref="effects"
|
/>
|
</div>
|
</div>
|
</template>
|
<style scoped>
|
@-webkit-keyframes rotation {
|
from {
|
-webkit-transform: rotate(0deg);
|
}
|
|
to {
|
-webkit-transform: rotate(360deg);
|
}
|
}
|
|
.menutool {
|
transition: all 0.3s linear;
|
}
|
|
.menutoolhide {
|
opacity: 0;
|
visibility: hidden;
|
width: 0px !important;
|
}
|
|
.menutools {
|
}
|
|
.menuchangebtn {
|
position: absolute;
|
bottom: 14px;
|
left: 14px;
|
|
/* -webkit-transform: rotate(360deg);
|
animation: rotation 8s linear infinite;
|
-moz-animation: rotation 8s linear infinite;
|
-webkit-animation: rotation 8s linear infinite;
|
-o-animation: rotation 8s linear infinite; */
|
}
|
|
.menubtnlist {
|
display: flex;
|
width: 320px;
|
position: absolute;
|
top: 25px;
|
left: 25px;
|
flex-wrap: wrap;
|
}
|
|
.menubtn {
|
width: 50px;
|
height: 50px;
|
margin: 5px;
|
cursor: pointer;
|
/* border: 1px solid #999; */
|
background-image: url("~@/assets/img/new/menuBg.png");
|
background-size: contain;
|
border-radius: 5px;
|
overflow: hidden;
|
color: #fff;
|
/* box-shadow: 0px 0px 5px 2px #aaa inset; */
|
}
|
|
.menubtn:hover img {
|
margin-top: -50px;
|
|
opacity: 0;
|
}
|
|
.menubtn:hover span {
|
margin-top: -5px;
|
}
|
|
.menubtn:hover {
|
box-shadow: 0px 0px 5px 2px rgba(0, 168, 255, 0.16) inset;
|
}
|
|
.menubtn span {
|
display: block;
|
width: 50px;
|
text-align: center;
|
transition: all 0.2s linear;
|
}
|
|
.menubtn img {
|
width: 32px;
|
height: 32px;
|
margin: 9px;
|
transition: all 0.2s linear;
|
}
|
|
.menuliststyle {
|
/* background-color: rgba(14, 50, 143, 0.6); */
|
/* box-shadow: 0px 0px 3px rgba(67, 139, 206, 0.801) inset; */
|
|
/* border: 1px solid #c7c7c7; */
|
transition: all 0.15s linear;
|
overflow: hidden;
|
z-index: 999999;
|
position: relative;
|
}
|
|
.menulist {
|
background-image: url("~@/assets/img/new/rightCircle.png");
|
background-size: contain;
|
background-repeat: no-repeat;
|
width: 60px;
|
height: 60px;
|
border-radius: 30px;
|
cursor: pointer;
|
}
|
.menulist:hover {
|
background-image: url("~@/assets/img/new/rightCircle-y.png");
|
}
|
.menulist_active {
|
border-image-source: radial-gradient(
|
59% 79%,
|
transparent 0px,
|
transparent 100%,
|
cyan 100%
|
);
|
border-image-slice: 1;
|
border-width: 1px;
|
border-style: solid;
|
border-image-outset: 0;
|
background-image: url("~@/assets/img/new/listbg.png");
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
width: 360px;
|
height: 200px;
|
/* border-radius: 5px 5px 5px 30px; */
|
}
|
</style>
|
<script>
|
import plotting from "@/components/menu/tools/plotting";
|
|
import measure from "@/components/menu/tools/measure";
|
|
import roam from "@/components/menu/tools/roam";
|
|
import special from "@/components/menu/tools/special";
|
|
import analysis from "@/components/menu/tools/analysis";
|
|
import effects from "@/components/menu/tools/effects";
|
import bh from "@/assets/img/right/bh1.png";
|
import ls from "@/assets/img/right/ls-s.png";
|
import my from "@/assets/img/right/my11.png";
|
import zt from "@/assets/img/left/specialanalyse4.png";
|
import fx from "@/assets/img/right/cx-s.png";
|
import tx from "@/assets/img/left/leftnav2.png";
|
export default {
|
name: "menulist",
|
components: {
|
plotting,
|
measure,
|
roam,
|
special,
|
analysis,
|
effects,
|
},
|
data() {
|
return {
|
panelActive: false,
|
selectIndex: 2,
|
switchMenuImage: ls,
|
};
|
},
|
methods: {
|
setMenuTool(index) {
|
this.selectIndex = index;
|
switch (index) {
|
case 1:
|
this.switchMenuImage = bh;
|
break;
|
case 2:
|
this.switchMenuImage = ls;
|
break;
|
case 3:
|
this.switchMenuImage = my;
|
break;
|
case 4:
|
this.switchMenuImage = zt;
|
break;
|
case 5:
|
this.switchMenuImage = fx;
|
break;
|
case 6:
|
this.switchMenuImage = tx;
|
break;
|
}
|
},
|
showMenuList() {
|
this.panelActive = !this.panelActive;
|
},
|
showSettingCard() {
|
this.$store.commit("showSetBox", true);
|
},
|
showModelCard(){
|
this.$store.commit("showModelBox", true);
|
},
|
showSceneCard(){
|
this.$store.commit("showSceneBox", "");
|
},
|
closeAllHighLight(type) {
|
// !(type == "plotting") && this.$refs.plotting.clearHighLight();
|
// !(type == "roam") && this.$refs.roam.clearActive();
|
// !(type == "measure") && this.$refs.measure.clearActive();
|
// !(type == "query") && this.$refs.query.clearActive();
|
},
|
},
|
};
|
</script>
|
