<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="setMenuGrid()">
|
<img class="bhImg" title="格网" src="@/assets/img/right/cx-s.png" />
|
<span>格网</span>
|
</div>
|
<div class="menubtn" @click="setMenuQuery()">
|
<img class="bhImg" title="查询" src="@/assets/img/right/queyr.png" />
|
<span>查询</span>
|
</div>
|
<div class="menubtn" @click="setImgUpDate()">
|
<input id="imgs" type="file" multiple="multiple" v-show="false" @change="setImgUpload" accept=".jpg,.png" />
|
<img class="bhImg" title="上传" src="@/assets/img/right/upload.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: 180px;
|
/* 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";
|
|
import { Img_Upload } from '@/api/api.js'
|
import Bus from "../tools/Bus";
|
import drawGrid from "../../assets/js/Layer/drawGrid";
|
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", "");
|
},
|
setMenuQuery() {
|
this.$store.commit("setMenuQuery", true)
|
},
|
setMenuGrid() {
|
drawGrid.drawRect();
|
},
|
setImgUpDate() {
|
// this.$store.commit("setImgUpdate",true)
|
|
$("#imgs").click();
|
},
|
async setImgUpload() {
|
var formData = new FormData();
|
var fs = document.getElementById("imgs");
|
for (var i = 0, c = fs.files.length; i < c; i++) {
|
formData.append(fs.files[i].name, fs.files[i]); // name, file
|
}
|
const data = await Img_Upload(formData)
|
if (data.status == 200) {
|
this.$message({
|
message: "图片上传成功",
|
type: "success",
|
});
|
Bus.$emit("reastLayer",true);
|
}
|
},
|
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>
|
