|
|
@@ -1,10 +1,9 @@
|
|
|
<template>
|
|
|
<div id="visualizationBottom">
|
|
|
<div class="middle-content">
|
|
|
- <div class="single" v-for="item in bottomList" :class="[item.chosen?'single_chosen':'']" :key="item.id">
|
|
|
+ <div class="single" v-for="item in bottomList" @click="changePath(item)" :class="[item.chosen?'single_chosen':'']" :key="item.id">
|
|
|
<img v-if="item.chosen" :src="imgUrl(item)" alt="">
|
|
|
<img v-else :src="imgUrl(item)" alt="">
|
|
|
- <span @click="changePath(item)">{{item.label}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -15,7 +14,8 @@ import {ref} from "vue";
|
|
|
import router from "@/router/index.js";
|
|
|
import {useMapStore} from "@/store/mapStore.js";
|
|
|
import {
|
|
|
- addPartWhiteMold,
|
|
|
+ AddDataPoint, AddGDTheme,
|
|
|
+ addPartWhiteMold, ClearMap,
|
|
|
FeatureThreeDimension,
|
|
|
GroundPrismEffect, importantAreaPosition, LimitHeightAnalysis,
|
|
|
PrismEffectService_jkbhq,
|
|
|
@@ -29,139 +29,95 @@ export default {
|
|
|
let bottomList = ref([
|
|
|
{
|
|
|
id:"01",
|
|
|
- name:"kygl",
|
|
|
+ name:"overallSituation",
|
|
|
chosen:false,
|
|
|
- label:"空域管理"
|
|
|
+ label:"总体态势"
|
|
|
},
|
|
|
{
|
|
|
id:"02",
|
|
|
- name:"sfky",
|
|
|
+ name:"perception",
|
|
|
chosen:false,
|
|
|
- label:"飞行空域"
|
|
|
+ label:"实时感知"
|
|
|
},
|
|
|
{
|
|
|
id:"03",
|
|
|
- name:"jkbhq",
|
|
|
+ name:"vehicleSimulation",
|
|
|
chosen:false,
|
|
|
- label:"净空保护区"
|
|
|
+ label:"车辆仿真模拟"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:"04",
|
|
|
+ name:"construction",
|
|
|
+ chosen:false,
|
|
|
+ label:"工地管理"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:"05",
|
|
|
+ name:"foundation-pit",
|
|
|
+ chosen:false,
|
|
|
+ label:"深基坑"
|
|
|
}
|
|
|
])
|
|
|
function changePath(item){
|
|
|
+ debugger
|
|
|
bottomList.value.forEach((i)=>{
|
|
|
if(i.name == item.name){
|
|
|
- i.chosen = !i.chosen;
|
|
|
- if(i.chosen){
|
|
|
- if(item.name == "kygl"){
|
|
|
- mapStore.right_board = true;
|
|
|
- addPartWhiteMold(true)
|
|
|
- GroundPrismEffect({
|
|
|
- status:"show",
|
|
|
- startHeight:0,
|
|
|
- items:[
|
|
|
- {
|
|
|
- "id": 1,
|
|
|
- "name": "",
|
|
|
- "depth": 100,
|
|
|
- "material": [
|
|
|
- 201,254,246,
|
|
|
- 0.2
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- "id": 2,
|
|
|
- "name": "",
|
|
|
- "depth": 100,
|
|
|
- "material": [
|
|
|
- 180,240,249,
|
|
|
- 0.24
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- "id": 3,
|
|
|
- "name": "",
|
|
|
- "depth": 100,
|
|
|
- "material": [
|
|
|
- 151,220,252,
|
|
|
- 0.28
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- "id": 4,
|
|
|
- "name": "",
|
|
|
- "depth": 100,
|
|
|
- "material": [
|
|
|
- 118,198,254,
|
|
|
- 0.32
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- "id": 5,
|
|
|
- "name": "",
|
|
|
- "depth": 100,
|
|
|
- "material": [
|
|
|
- 81,174,255,
|
|
|
- 0.36
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- "id": 6,
|
|
|
- "name": "",
|
|
|
- "depth": 100,
|
|
|
- "material": [
|
|
|
- 46,153,255,
|
|
|
- 0.40
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- "id": 7,
|
|
|
- "name": "",
|
|
|
- "depth": 400,
|
|
|
- "material": [
|
|
|
- 4,138,255,
|
|
|
- 0.44
|
|
|
- ]
|
|
|
- }
|
|
|
- ]
|
|
|
- });
|
|
|
- importantAreaPosition(3597, -3756, 4154, 4, 47);
|
|
|
- }else if(item.name == "sfky"){
|
|
|
- PrismEffectService_sfky({
|
|
|
- status:"show"
|
|
|
- });
|
|
|
- }else{
|
|
|
- PrismEffectService_jkbhq({
|
|
|
- status:"show"
|
|
|
- });
|
|
|
- }
|
|
|
- }else{
|
|
|
- if(item.name == "kygl"){
|
|
|
- mapStore.right_board = false;
|
|
|
- addPartWhiteMold(false)
|
|
|
- LimitHeightAnalysis({
|
|
|
- status:"hide"
|
|
|
- })
|
|
|
- GroundPrismEffect({
|
|
|
- status:"hide"
|
|
|
- })
|
|
|
- }else if(item.name == "sfky"){
|
|
|
- PrismEffectService_sfky({
|
|
|
- status:"hide"
|
|
|
- });
|
|
|
- }else{
|
|
|
- PrismEffectService_jkbhq({
|
|
|
- status:"hide"
|
|
|
- });
|
|
|
- }
|
|
|
+ i.chosen = true;
|
|
|
+ }else{
|
|
|
+ i.chosen = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ changeTheme();
|
|
|
+ }
|
|
|
+ function changeTheme(){
|
|
|
+ mapStore.layerShow = false;
|
|
|
+ AddDataPoint({
|
|
|
+ is_clear:true
|
|
|
+ })
|
|
|
+ AddGDTheme(false);
|
|
|
+ debugger
|
|
|
+ bottomList.value.forEach((item)=>{
|
|
|
+ if(item.chosen){
|
|
|
+ debugger
|
|
|
+ if(item.name == "overallSituation"){
|
|
|
+ mapStore.layerShow = true;
|
|
|
+ }else if(item.name == "perception"){
|
|
|
+ debugger
|
|
|
+ AddDataPoint({
|
|
|
+ is_clear:true,
|
|
|
+ position: [
|
|
|
+ {
|
|
|
+ "mapx": -29663.623577080696,
|
|
|
+ "mapy": 6268.511258577111
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "mapx": -29610.623577080696,
|
|
|
+ "mapy": 6201.511258577111
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "mapx": -28663.623577080696,
|
|
|
+ "mapy": 6168.511258577111
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ })
|
|
|
+ }else if(item.name == "vehicleSimulation"){ //车辆仿真模拟 - 添加一辆车固定轨迹
|
|
|
+
|
|
|
+
|
|
|
+ }else if(item.name == "construction"){ //工地管理 添加工地
|
|
|
+ AddGDTheme(true);
|
|
|
+ }else if(item.name == "foundation-pit"){ //深基坑 添加工地、并定位到基坑位置
|
|
|
+ AddGDTheme(true);
|
|
|
+ importantAreaPosition(3021, 2012, 494, 337, 16);
|
|
|
}
|
|
|
|
|
|
}
|
|
|
- });
|
|
|
+ })
|
|
|
}
|
|
|
function imgUrl(item){
|
|
|
if(item.chosen){
|
|
|
- return new URL(`../../assets/imgs/lowAltitude/${item.name}1.png`, import.meta.url).href
|
|
|
+ return new URL(`../../assets/imgs/cim/${item.name}2.png`, import.meta.url).href
|
|
|
}else{
|
|
|
- return new URL(`../../assets/imgs/lowAltitude/${item.name}2.png`, import.meta.url).href
|
|
|
+ return new URL(`../../assets/imgs/cim/${item.name}1.png`, import.meta.url).href
|
|
|
}
|
|
|
}
|
|
|
return {
|
|
|
@@ -180,7 +136,7 @@ export default {
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
z-index: 2;
|
|
|
- background: url("../../assets/imgs/lowAltitude/big_bottom.png") no-repeat;
|
|
|
+ background: url("../../assets/imgs/cim/lowerBase.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
@@ -193,9 +149,10 @@ export default {
|
|
|
align-items: flex-end;
|
|
|
.single{
|
|
|
width: 163px;
|
|
|
- height: 59px;
|
|
|
+ height: 100%;
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-end;
|
|
|
align-items: center;
|
|
|
span{
|
|
|
cursor: pointer;
|
|
|
@@ -211,6 +168,7 @@ export default {
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
background-size: cover;
|
|
|
+ padding-bottom:40px;
|
|
|
//img{
|
|
|
// padding-top: 10px;
|
|
|
//}
|
