<!--
|
* @Author: LuLu
|
* @Date: 2023-05-11 19:30:21
|
* @LastEditors: Andy
|
* @LastEditTime: 2023-06-08 11:54:25
|
* @FilePath: \cim-xian\src\views\xianCim\bottomViewer\wheelMenu.vue
|
* @Description: 底部轮盘菜单组件
|
思路:
|
1.摆位置。把静态的位置排列放好
|
2.公转。需要旋转的时候整体去旋转，此时各个item位置自然会发生偏移
|
3.自转。不作处理的话item的朝向永远是向着容器圆心的，所以需要item自转
|
4.在需要旋转时公转和自转同时进行
|
5.加个transition过渡
|
-->
|
<template>
|
<div class="wheelMenu">
|
<div class="menuBox">
|
<div
|
class="round"
|
:style="{ transform: 'rotate(' + orbitalRotation + 'deg)' }"
|
>
|
<div class="div1">
|
<div
|
:style="{ transform: 'rotate(' + selfRotation + 'deg)' }"
|
class="content rotationSelf1"
|
>
|
<div class="menu" :style="currentMenu == 1 ? activeBg : ''">
|
<div class="menu_name" @click="clickMenu(1)">资源中心</div>
|
</div>
|
</div>
|
</div>
|
<div class="div2">
|
<div
|
:style="{ transform: 'rotate(' + (selfRotation - 36) + 'deg)' }"
|
class="content rotationSelf2"
|
>
|
<div class="menu" :style="currentMenu == 2 ? activeBg : ''">
|
<div class="menu_name" @click="clickMenu(2)">运维中心</div>
|
</div>
|
</div>
|
</div>
|
<div class="div3">
|
<div
|
:style="{ transform: 'rotate(' + (selfRotation - 72) + 'deg)' }"
|
class="content rotationSelf3"
|
>
|
<div class="menu" :style="currentMenu == 3 ? activeBg : ''">
|
<div class="menu_name" @click="clickMenu(3)">应用中心</div>
|
</div>
|
</div>
|
</div>
|
<div class="div4">
|
<div
|
:style="{ transform: 'rotate(' + (selfRotation - 108) + 'deg)' }"
|
class="content rotationSelf4"
|
>
|
<div class="menu" :style="currentMenu == 4 ? activeBg : ''">
|
<div class="menu_name" @click="clickMenu(4)">生命线</div>
|
</div>
|
</div>
|
</div>
|
<div class="div5">
|
<div
|
:style="{ transform: 'rotate(' + (selfRotation - 144) + 'deg)' }"
|
class="content rotationSelf5"
|
>
|
<div class="menu" :style="currentMenu == 5 ? activeBg : ''">
|
<div class="menu_name" @click="clickMenu(5)">智慧景区</div>
|
</div>
|
</div>
|
</div>
|
<div class="div6">
|
<div
|
:style="{ transform: 'rotate(' + (selfRotation - 180) + 'deg)' }"
|
class="content rotationSelf6"
|
>
|
<div class="menu" :style="currentMenu == 6 ? activeBg : ''">
|
<div class="menu_name" @click="clickMenu(6)">智慧园区</div>
|
</div>
|
</div>
|
</div>
|
<div class="div7">
|
<div
|
:style="{ transform: 'rotate(' + (selfRotation - 216) + 'deg)' }"
|
class="content rotationSelf7"
|
>
|
<div class="menu" :style="currentMenu == 7 ? activeBg : ''">
|
<div class="menu_name" @click="clickMenu(7)">城市建造</div>
|
</div>
|
</div>
|
</div>
|
<div class="div8">
|
<div
|
:style="{ transform: 'rotate(' + (selfRotation - 252) + 'deg)' }"
|
class="content rotationSelf8"
|
>
|
<div class="menu" :style="currentMenu == 8 ? activeBg : ''">
|
<div class="menu_name" @click="clickMenu(8)">应急管理</div>
|
</div>
|
</div>
|
</div>
|
<div class="div9">
|
<div
|
:style="{ transform: 'rotate(' + (selfRotation - 288) + 'deg)' }"
|
class="content rotationSelf9"
|
>
|
<div class="menu" :style="currentMenu == 9 ? activeBg : ''">
|
<div class="menu_name" @click="clickMenu(9)">服务中心</div>
|
</div>
|
</div>
|
</div>
|
<div class="div10">
|
<div
|
:style="{ transform: 'rotate(' + (selfRotation - 324) + 'deg)' }"
|
class="content rotationSelf10"
|
>
|
<div class="menu" :style="currentMenu == 10 ? activeBg : ''">
|
<div class="menu_name" @click="clickMenu(10)">开发中心</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="turnLeftBtn" @click="turnLeft"></div>
|
<div class="turnRightBtn" @click="turnRight"></div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { Cesium } from "../../../../public/CimSDK";
|
export default {
|
name: "App",
|
data() {
|
return {
|
preisWeb: true,
|
orbitalRotation: 0, //公转
|
selfRotation: 0, //自传
|
currentMenu: 1, //当前菜单
|
activeBg: {
|
backgroundImage: "url(" + "./menu_btn_active.png" + ")",
|
transform: "scale(2.075,6.25)",
|
},
|
};
|
},
|
methods: {
|
turnRight() {
|
this.orbitalRotation += 36;
|
this.selfRotation -= 36;
|
|
if (this.currentMenu > 1) {
|
this.currentMenu--;
|
} else {
|
this.currentMenu = 10;
|
}
|
// this.getCameraParams()
|
this.$nextTick(() => {
|
window.dispatchEvent(new Event("resize")); //初始化echarts
|
});
|
},
|
turnLeft() {
|
this.selfRotation += 36;
|
this.orbitalRotation -= 36;
|
|
if (this.currentMenu < 10) {
|
this.currentMenu++;
|
} else {
|
this.currentMenu = 1;
|
}
|
// this.getCameraParams()
|
this.$nextTick(() => {
|
window.dispatchEvent(new Event("resize")); //初始化echarts
|
});
|
},
|
//点击菜单
|
clickMenu(index) {
|
// return //取消按钮点击切换
|
if (index == this.currentMenu) {
|
return;
|
}
|
//向右点击一个
|
if (index - this.currentMenu == 1) {
|
this.turnLeft();
|
}
|
//向左点击一个
|
else if (index - this.currentMenu == -1) {
|
this.turnRight();
|
}
|
//向右点击两个
|
else if (index - this.currentMenu == 2) {
|
this.turnLeft();
|
this.turnLeft();
|
}
|
//向左点击两个
|
else if (index - this.currentMenu == -2) {
|
this.turnRight();
|
this.turnRight();
|
}
|
//向右点击一个(边界条件)
|
else if (index - this.currentMenu == -9) {
|
this.turnLeft();
|
}
|
//向左点击一个(边界条件)
|
else if (index - this.currentMenu == 9) {
|
this.turnRight();
|
}
|
//向右点击两个(边界条件)
|
else if (index - this.currentMenu == -8) {
|
this.turnLeft();
|
this.turnLeft();
|
}
|
//向右点击两个(边界条件)
|
else if (index - this.currentMenu == 8) {
|
this.turnRight();
|
this.turnRight();
|
}
|
//改变当前菜单index
|
this.currentMenu = index;
|
},
|
//刷新后根据路由切换菜单
|
setMenuIndex() {
|
switch (this.$route.path) {
|
//2
|
case "/xianCim/systemCenter":
|
this.turnLeft();
|
break;
|
//3
|
case "/xianCim/useCenter":
|
this.turnLeft();
|
this.turnLeft();
|
|
break;
|
//4
|
case "/xianCim/UEView/lifeline":
|
this.turnLeft();
|
this.turnLeft();
|
this.turnLeft();
|
break;
|
|
//5
|
case "/xianCim/UEView/societyGovern":
|
this.turnLeft();
|
this.turnLeft();
|
this.turnLeft();
|
this.turnLeft();
|
break;
|
|
//6
|
case "/xianCim/UEView/smartPark":
|
this.turnRight();
|
this.turnRight();
|
this.turnRight();
|
this.turnRight();
|
this.turnRight();
|
break;
|
//7
|
case "/xianCim/cityCenter":
|
this.turnRight();
|
this.turnRight();
|
this.turnRight();
|
this.turnRight();
|
break;
|
//8
|
case "/xianCim/UEView/emergency":
|
this.turnRight();
|
this.turnRight();
|
this.turnRight();
|
break;
|
//9
|
case "/xianCim/servicesmanager":
|
this.turnRight();
|
this.turnRight();
|
break;
|
//10
|
case "/xianCim/developmentCenter":
|
this.turnRight();
|
break;
|
default:
|
break;
|
}
|
},
|
//获取镜头位置
|
getCameraParams() {
|
let viewer = sgworld._Viewer;
|
|
var lon = Cesium.Math.toDegrees(
|
viewer.camera.positionCartographic.longitude
|
);
|
var lat = Cesium.Math.toDegrees(
|
viewer.camera.positionCartographic.latitude
|
);
|
var height = viewer.camera.positionCartographic.height; //Cesium.Math.toDegrees作用是把弧度转换成度数
|
var heading = viewer.camera.heading;
|
var pitch = viewer.camera.pitch;
|
var roll = viewer.camera.roll;
|
let position = {
|
lon,
|
lat,
|
height,
|
heading,
|
pitch,
|
roll,
|
};
|
return position;
|
},
|
//项UE发送获取位置请求
|
askUEPosition(){
|
let params = {
|
func_name: "askUEPosition",
|
};
|
document
|
.getElementById("djtIframe")
|
.contentWindow.postMessage(params, "*");
|
},
|
flyTo() {
|
let position = this.getCameraParams();
|
|
if(isNaN(position.lat)){
|
return;
|
}
|
|
console.log(" @@ position", position);
|
console.log(" @@ heading", Cesium.Math.toDegrees(position.heading));
|
console.log(" @@ pitch", Cesium.Math.toDegrees(position.pitch));
|
let params = {
|
func_name: "flyTo",
|
data: {
|
posX: position.lon,
|
posY: position.lat,
|
posZ: position.height,
|
yaw: (180 / Math.PI) * position.heading - 90, //面向的方向
|
pitch: Cesium.Math.toDegrees(position.pitch), //position.pitch ((180 / Math.PI) * position.pitch) % 360
|
distance: 20000,
|
},
|
};
|
//
|
console.log(" @@ flyto all params:", params.data);
|
document
|
.getElementById("djtIframe")
|
.contentWindow.postMessage(params, "*");
|
},
|
|
changeModule(val) {
|
console.log(" @@ name", val);
|
document.getElementById("djtIframe").contentWindow.postMessage(
|
{
|
func_name: "module",
|
data: {
|
name: val,
|
},
|
},
|
"*"
|
);
|
},
|
},
|
mounted() {
|
this.setMenuIndex();
|
},
|
watch: {
|
currentMenu(val) {
|
switch (val) {
|
case 1:
|
this.askUEPosition();
|
//地球主页
|
this.$router.push("/xianCim");
|
this.preisWeb = true;
|
break;
|
case 2:
|
//运维中心
|
this.$router.push("/xianCim/systemCenter");
|
this.preisWeb = false;
|
break;
|
case 3:
|
//应用中心
|
this.$router.push("/xianCim/useCenter");
|
this.preisWeb = false;
|
break;
|
case 4:
|
//生命线
|
this.changeModule("生命线");
|
if (this.preisWeb) {
|
this.flyTo();
|
}
|
this.$router.push("/xianCim/UEView/lifeline");
|
this.preisWeb = false;
|
break;
|
case 5:
|
//智慧景区
|
this.changeModule("智慧景区");
|
if (this.preisWeb) {
|
this.flyTo();
|
}
|
this.$router.push("/xianCim/UEView/societyGovern");
|
this.preisWeb = false;
|
break;
|
case 6:
|
//智慧园区
|
this.changeModule("智慧园区");
|
if (this.preisWeb) {
|
this.flyTo();
|
}
|
this.$router.push("/xianCim/UEView/smartPark");
|
this.preisWeb = false;
|
break;
|
case 7:
|
//城市管理
|
this.askUEPosition();
|
this.$router.push("/xianCim/cityCenter");
|
this.preisWeb = true;
|
break;
|
case 8:
|
//应急管理
|
this.changeModule("应急管理");
|
if (this.preisWeb) {
|
this.flyTo();
|
}
|
this.$router.push("/xianCim/UEView/emergency");
|
this.preisWeb = false;
|
break;
|
case 9:
|
//服务中心
|
this.$router.push("/xianCim/servicesmanager");
|
this.preisWeb = false;
|
break;
|
case 10:
|
//开发中心
|
this.$router.push("/xianCim/developmentCenter");
|
this.preisWeb = false;
|
break;
|
}
|
},
|
},
|
};
|
</script>
|
|
<style>
|
.wheelMenu {
|
width: auto;
|
height: auto;
|
pointer-events: all;
|
}
|
|
.round {
|
position: relative;
|
height: 800px;
|
width: 800px;
|
border-radius: 50%;
|
transition: transform 1s;
|
}
|
|
.menuBox {
|
transform-origin: 400px 23px;
|
transform: scale(0.6, 0.2);
|
}
|
|
.div1 {
|
position: absolute;
|
left: calc(50% - 60px);
|
transform: rotate(0deg);
|
transform-origin: 60px 400px;
|
}
|
|
.div2 {
|
position: absolute;
|
left: calc(50% - 60px);
|
transform: rotate(36deg);
|
transform-origin: 60px 400px;
|
}
|
|
.div3 {
|
position: absolute;
|
left: calc(50% - 60px);
|
transform: rotate(72deg);
|
transform-origin: 60px 400px;
|
}
|
|
.div4 {
|
position: absolute;
|
left: calc(50% - 60px);
|
transform: rotate(108deg);
|
transform-origin: 60px 400px;
|
}
|
|
.div5 {
|
position: absolute;
|
left: calc(50% - 60px);
|
transform: rotate(144deg);
|
transform-origin: 60px 400px;
|
}
|
|
.div6 {
|
position: absolute;
|
left: calc(50% - 60px);
|
transform: rotate(180deg);
|
transform-origin: 60px 400px;
|
}
|
|
.div7 {
|
position: absolute;
|
left: calc(50% - 60px);
|
transform: rotate(216deg);
|
transform-origin: 60px 400px;
|
}
|
|
.div8 {
|
position: absolute;
|
left: calc(50% - 60px);
|
transform: rotate(252deg);
|
transform-origin: 60px 400px;
|
}
|
|
.div9 {
|
position: absolute;
|
left: calc(50% - 60px);
|
transform: rotate(288deg);
|
transform-origin: 60px 400px;
|
}
|
|
.div10 {
|
position: absolute;
|
left: calc(50% - 60px);
|
transform: rotate(324deg);
|
transform-origin: 60px 400px;
|
}
|
|
.content {
|
transition: transform 1s;
|
}
|
|
.menu {
|
width: 130px;
|
height: 54px;
|
background: url("../../../assets/img/menu_btn.png") no-repeat;
|
background-size: 100% 100%;
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
transform: scale(1.66, 5);
|
cursor: pointer;
|
}
|
|
.activeMenu {
|
background: url("../../../assets/img/menu_btn_active.png") no-repeat !important;
|
}
|
|
.menu_name {
|
font-size: 18px;
|
font-family: PangMenZhengDao;
|
font-weight: 400;
|
color: #ffffff;
|
/* text-shadow: 0px 3px 0px rgba(0, 9, 12, 0.34); */
|
padding-bottom: 10px;
|
}
|
|
.rotationSelf1 {
|
transform: rotate(0deg);
|
}
|
|
.rotationSelf2 {
|
transform: rotate(-36deg);
|
}
|
|
.rotationSelf3 {
|
transform: rotate(-72deg);
|
}
|
|
.rotationSelf4 {
|
transform: rotate(-108deg);
|
}
|
|
.rotationSelf5 {
|
transform: rotate(-144deg);
|
}
|
|
.rotationSelf6 {
|
transform: rotate(-180deg);
|
}
|
|
.rotationSelf7 {
|
transform: rotate(-216deg);
|
}
|
|
.rotationSelf8 {
|
transform: rotate(-252deg);
|
}
|
|
.rotationSelf9 {
|
transform: rotate(-288deg);
|
}
|
|
.rotationSelf10 {
|
transform: rotate(-324deg);
|
}
|
|
.turnLeftBtn {
|
position: absolute;
|
left: -410px;
|
top: 325px;
|
transform: scale(1.66, 5);
|
cursor: pointer;
|
width: 150px;
|
height: 26px;
|
background: url("../../../assets/img/形状1拷贝.png") no-repeat;
|
background-size: 100% 100%;
|
}
|
|
.turnRightBtn {
|
position: absolute;
|
right: -410px;
|
top: 325px;
|
transform: scale(1.66, 5);
|
cursor: pointer;
|
width: 150px;
|
height: 26px;
|
background: url("../../../assets/img/形状1.png") no-repeat;
|
background-size: 100% 100%;
|
}
|
</style>
|
