From 271d931fc950745d37554528324cbc8a636d85c3 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期二, 29 十一月 2022 19:30:28 +0800
Subject: [PATCH] 1
---
src/views/Synthesis/index.vue | 536 +++--------------------------------------------------------
1 files changed, 32 insertions(+), 504 deletions(-)
diff --git a/src/views/Synthesis/index.vue b/src/views/Synthesis/index.vue
index 3884bba..4b29cb9 100644
--- a/src/views/Synthesis/index.vue
+++ b/src/views/Synthesis/index.vue
@@ -2,7 +2,10 @@
<div class="synthesis">
<div class="lefIcon">
<ul>
- <li v-for="item in showMenuList">
+ <li
+ v-for="item in showMenuList"
+ :class="{ lefMenuActive: showMenuFlag == item.id }"
+ >
<div class="menuDiv" :title="item.name" @click="setMenuChange(item)">
<div class="menuImage" :class="item.class"></div>
</div>
@@ -11,17 +14,13 @@
</div>
<div class="rightContent">
<div class="left_main" :class="{ left_main_show: !openStatus }">
- <div class="leftMen_div" v-for="(item, index) in setListTwoMenu">
- <div class="menuTwoImage" :class="item.css"></div>
- <div>{{ $t(item.label) }}</div>
+ <div class="right_Map">
+ <left-menu></left-menu>
</div>
</div>
- <div id="mapdiv" class="right_main">
- <div @click="changeBaseLayer" class="bottomChageLayer">
- <div
- id="cenBg"
- v-bind:class="{ active: isActive, menuLayer: !isActive }"
- ></div>
+ <div class="right_main">
+ <div class="right_Map">
+ <mapdiv></mapdiv>
</div>
</div>
</div>
@@ -30,10 +29,16 @@
<script>
import { getPerms } from '../../api/api';
+import mapdiv from '../../components/MapDiv.vue';
+import leftMenu from './LeftMenu.vue';
export default {
- components: {},
+ components: {
+ mapdiv,
+ leftMenu,
+ },
data() {
return {
+ showMenuFlag: null,
openStatus: false,
isActive: false,
showMenuList: [],
@@ -93,311 +98,11 @@
show: false,
},
],
- setListTwoMenu: [],
- setListTwoMenuAll: [
- [
- {
- label: 'synthesis.layer',
- name: '鍥惧眰绠＄悊',
- css: 'twoMenu_imge11',
- },
- {
- name: '鍦烘櫙鎻愬彇',
- label: 'synthesis.sceneExtraction',
- css: 'twoMenu_imge12',
- },
- {
- label: 'synthesis.release',
- name: '鍦烘櫙鍙戝竷',
- css: 'twoMenu_imge13',
- },
- ],
- [
- {
- label: 'synthesis.split',
- name: '鍒嗗睆',
- css: 'twoMenu_imge21',
- },
- {
- label: 'synthesis.twod',
- name: '浜岀淮',
- css: 'twoMenu_imge22',
- },
- {
- label: 'synthesis.threed',
- name: '涓夌淮',
- css: 'twoMenu_imge23',
- },
- {
- label: 'synthesis.full',
- name: '鍏ㄥ浘',
- css: 'twoMenu_imge24',
- },
- {
- label: 'synthesis.zommin',
- name: '鏀惧ぇ',
- css: 'twoMenu_imge25',
- },
- {
- label: 'synthesis.zoomout',
- name: '缂╁皬',
- css: 'twoMenu_imge26',
- },
- {
- label: 'synthesis.rule',
- name: '姣斾緥灏�',
- css: 'twoMenu_imge27',
- },
- {
- label: 'synthesis.compass',
- name: '鎸囧寳閽�',
- css: 'twoMenu_imge28',
- },
- ],
- [
- {
- label: 'synthesis.someroaming',
- name: '鐐规极娓�',
- css: 'twoMenu_imge31',
- },
- {
- label: 'synthesis.lineroaming',
- name: '绾胯矾婕父',
- css: 'twoMenu_imge32',
- },
- {
- label: 'synthesis.mouseroaming',
- name: '榧犳爣婕父',
- css: 'twoMenu_imge33',
- },
- {
- label: 'synthesis.snapshot',
- name: '鍦板浘蹇収',
- css: 'twoMenu_imge34',
- },
- {
- label: 'synthesis.tdisplay',
- name: '涓夌淮婕旂ず',
- css: 'twoMenu_imge35',
- },
- ],
- [
- {
- label: 'synthesis.contouranalysis',
- name: '绛夐珮绾�',
- css: 'twoMenu_imge41',
- },
- {
- label: 'synthesis.slopeanalysis',
- name: '鍧″害鍒嗘瀽',
- css: 'twoMenu_imge42',
- },
- {
- label: 'synthesis.pathanalysis',
- name: '璺緞鍒嗘瀽',
- css: 'twoMenu_imge43',
- },
- {
- label: 'synthesis.cuttinganalysis',
- name: '鍦板舰鍓栧垏',
- css: 'twoMenu_imge44',
- },
- {
- label: 'synthesis.floodanalysis',
- name: '娣规病鍒嗘瀽',
- css: 'twoMenu_imge45',
- },
- {
- label: 'synthesis.earthworkcalculation',
- name: '鍦熸柟閲忚绠�',
- css: 'twoMenu_imge46',
- },
- {
- label: 'synthesis.crosssectionanalysis',
- name: '涓夌淮鎴潰',
- css: 'twoMenu_imge47',
- },
- {
- label: 'synthesis.imagecontrast',
- name: '褰卞儚瀵规瘮',
- css: 'twoMenu_imge48',
- },
- {
- label: 'synthesis.pipelineAnalysis',
- name: '绠￠亾鍒嗘瀽',
- css: 'twoMenu_imge49',
- },
- {
- label: 'synthesis.flatterrain',
- name: '鍦板舰骞虫暣',
- css: 'twoMenu_imge410',
- },
- {
- label: 'synthesis.terrainexcavation',
- name: '鍦板舰寮�鎸�',
- css: 'twoMenu_imge411',
- },
- ],
- [
- {
- label: 'synthesis.attributequery',
- name: '灞炴�ф煡璇�',
- css: 'twoMenu_imge51',
- },
- {
- label: 'synthesis.rangequery',
- name: '绌洪棿鏌ヨ',
- css: 'twoMenu_imge52',
- },
- ],
- [
- {
- label: 'synthesis.gpsrtk',
- name: '鍧愭爣瀹氫綅',
- css: 'twoMenu_imge61',
- },
- {
- label: 'synthesis.placenamelocation',
- name: '鍦板悕瀹氫綅',
- css: 'twoMenu_imge62',
- },
- ],
- [
- {
- label: 'synthesis.synthobj.m1',
- name: '姘村钩璺濈',
- css: 'twoMenu_imge71',
- },
- {
- label: 'synthesis.synthobj.m4',
- name: '鍨傜洿楂樺害',
- css: 'twoMenu_imge72',
- },
- {
- label: 'synthesis.synthobj.m6',
- name: '骞抽潰闈㈢Н',
- css: 'twoMenu_imge73',
- },
- {
- label: 'synthesis.synthobj.m7',
- name: '浣撶Н',
- css: 'twoMenu_imge74',
- },
- {
- label: 'synthesis.synthobj.m5',
- name: '琛ㄩ潰闈㈢Н',
- css: 'twoMenu_imge75',
- },
- {
- label: 'synthesis.synthobj.m2',
- name: '绌洪棿璺濈',
- css: 'twoMenu_imge76',
- },
- ],
- [
- {
- label: 'synthesis.point',
- name: '鐐�',
- css: 'twoMenu_imge81',
- },
- {
- label: 'synthesis.line',
- name: '绾�',
- css: 'twoMenu_imge82',
- },
- {
- label: 'synthesis.rectangle',
- name: '鐭╁舰',
- css: 'twoMenu_imge83',
- },
- {
- label: 'synthesis.polygon',
- name: '澶氳竟褰�',
- css: 'twoMenu_imge84',
- },
- {
- label: 'synthesis.import',
- name: '瀵煎叆',
- css: 'twoMenu_imge85',
- },
- {
- label: 'synthesis.export',
- name: '瀵煎嚭',
- css: 'twoMenu_imge86',
- },
- {
- label: 'synthesis.removepaint',
- name: '娓呴櫎',
- css: 'twoMenu_imge87',
- },
- ],
- ],
};
},
watch: {},
created() {},
methods: {
- //鍦板浘鍒濆鍖�
- initMap() {
- //鍦板浘鍒濆鍖�
- window.sgworld = new SmartEarth.SGWorld('mapdiv', {
- licenseServer: window.sceneConfig.licenseServer,
- });
- window.Viewer = window.sgworld._Viewer;
- //瀹氫綅
- sgworld.Navigate.jumpTo({
- //璺宠浆瑙嗚
- destination: new Cesium.Cartesian3.fromDegrees(
- 116.055913,
- 39.937685,
- 8000
- ),
- });
- Viewer.imageryLayers.addImageryProvider(
- new Cesium.WebMapTileServiceImageryProvider({
- url: 'http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561',
- layer: 'tdtVecBasicLayer',
- style: 'default',
- format: 'image/jpeg',
- tileMatrixSetID: 'GoogleMapsCompatible',
- show: false,
- })
- );
-
- Viewer.imageryLayers.addImageryProvider(
- new Cesium.WebMapTileServiceImageryProvider({
- url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561',
- layer: 'tdtBasicLayer',
- style: 'default',
- format: 'image/jpeg',
- tileMatrixSetID: 'GoogleMapsCompatible',
- show: false,
- })
- );
- Viewer.imageryLayers.addImageryProvider(
- new Cesium.WebMapTileServiceImageryProvider({
- url: 'http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=94a34772eb88317fcbf8428e10448561',
- layer: 'tdtAnnoLayer',
- style: 'default',
- format: 'image/jpeg',
- tileMatrixSetID: 'GoogleMapsCompatible',
- })
- );
- },
- //搴曞浘鍒囨崲
- changeBaseLayer() {
- this.isActive = !this.isActive;
- this.setLayerVisible();
- },
- setLayerVisible() {
- if (this.isActive == true) {
- Viewer.imageryLayers.get(1).show = true;
- Viewer.imageryLayers.get(2).show = false;
- } else {
- Viewer.imageryLayers.get(1).show = false;
- Viewer.imageryLayers.get(2).show = true;
- }
- },
//宸︿晶鑿滃崟婊戝姩鏄鹃殣
setMenuChange(res) {
switch (res.id) {
@@ -406,7 +111,8 @@
break;
default: {
this.openStatus = true;
- this.setListTwoMenu = this.setListTwoMenuAll[res.id - 2];
+ this.$bus.$emit('setChangeTwoMenu', res.id - 2);
+ this.showMenuFlag = res.id;
}
}
},
@@ -427,7 +133,7 @@
//鍒濆鍖栦簩绾ц彍鍗�
if (this.showMenuList.length > 1) {
var index = this.showMenuList[1].id;
- this.setListTwoMenu = this.setListTwoMenuAll[index - 2];
+ this.$bus.$emit('setChangeTwoMenu', index - 2);
}
},
showMenuChange(res, result) {
@@ -470,6 +176,7 @@
background: #353535;
position: absolute;
z-index: 30;
+
.menuDiv {
width: 60px;
height: 60px;
@@ -519,10 +226,17 @@
no-repeat center;
}
}
+ // li {
+ // background: rgba(53, 53, 53, 0);
+ // }
+ .lefMenuActive {
+ background: linear-gradient(180deg, #002992, #080472);
+ }
li:hover {
background: linear-gradient(180deg, #002992, #080472);
}
}
+
.rightContent {
width: calc(100% - 63px);
height: 100%;
@@ -532,198 +246,8 @@
margin: 0;
width: 300px;
height: auto;
- text-align: center;
- transition: width 2s;
- display: flex;
- flex-wrap: wrap;
- align-content: flex-start;
- }
- .leftMen_div {
- font-size: 16px;
- font-family: Microsoft YaHei;
- font-weight: 400;
- color: #ffffff;
- padding: 10px;
- min-width: 100px;
- margin-left: 10px;
- margin-top: 10px;
- border-radius: 5px;
- }
- .leftMen_div:hover {
- background: linear-gradient(180deg, #002992, #080472);
- border: 1px solid #000000;
- box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.21);
- }
- .menuTwoImage {
- width: 32px;
- height: 32px;
- display: inline-block;
- }
- .twoMenu_imge11 {
- background: url('../../assets/img/synthesis/鍥惧眰 32.png') no-repeat center;
- }
- .twoMenu_imge12 {
- background: url('../../assets/img/synthesis/鍥惧眰 35.png') no-repeat center;
- }
- .twoMenu_imge13 {
- background: url('../../assets/img/synthesis/鍙戝竷.png') no-repeat center;
- }
- //瑙嗗浘
- .twoMenu_imge21 {
- background: url('../../assets/img/synthesis/鍦嗚鐭╁舰 12 鎷疯礉 3.png')
- no-repeat center;
- }
- .twoMenu_imge22 {
- background: url('../../assets/img/synthesis/鍥惧眰 10 鎷疯礉.png') no-repeat
- center;
- }
- .twoMenu_imge23 {
- background: url('../../assets/img/synthesis/鍥惧眰 11 鎷疯礉.png') no-repeat
- center;
- }
- .twoMenu_imge24 {
- background: url('../../assets/img/synthesis/鍥惧眰 12 鎷疯礉 2.png') no-repeat
- center;
- }
- .twoMenu_imge25 {
- background: url('../../assets/img/synthesis/鍦嗚鐭╁舰 5 鎷疯礉 2.png')
- no-repeat center;
- }
- .twoMenu_imge26 {
- background: url('../../assets/img/synthesis/鍦嗚鐭╁舰 5 鎷疯礉 3.png')
- no-repeat center;
- }
- .twoMenu_imge27 {
- background: url('../../assets/img/synthesis/鐭╁舰 9.png') no-repeat center;
- }
- .twoMenu_imge28 {
- background: url('../../assets/img/synthesis/妞渾 4.png') no-repeat center;
- }
- //婕父
- .twoMenu_imge31 {
- background: url('../../assets/img/synthesis/妞渾 6.png') no-repeat center;
- }
- .twoMenu_imge32 {
- background: url('../../assets/img/synthesis/妞渾 7 鎷疯礉 2.png') no-repeat
- center;
- }
- .twoMenu_imge33 {
- background: url('../../assets/img/synthesis/鍥惧眰 14 鍓湰 鎷疯礉.png')
- no-repeat center;
- }
- .twoMenu_imge34 {
- background: url('../../assets/img/synthesis/鍥惧眰 74 鎷疯礉 2.png') no-repeat
- center;
- }
- .twoMenu_imge35 {
- background: url('../../assets/img/synthesis/妞渾 7 鎷疯礉 4.png') no-repeat
- center;
- }
- //鍒嗘瀽
- .twoMenu_imge41 {
- background: url('../../assets/img/synthesis/妞渾 8 鎷疯礉 8.png') no-repeat
- center;
- }
- .twoMenu_imge42 {
- background: url('../../assets/img/synthesis/鍦嗚鐭╁舰 12 鎷疯礉 5.png')
- no-repeat center;
- }
- .twoMenu_imge43 {
- background: url('../../assets/img/synthesis/鍦嗚鐭╁舰 10 鍓湰 3.png')
- no-repeat center;
- }
- .twoMenu_imge44 {
- background: url('../../assets/img/synthesis/鍥惧眰 74 鎷疯礉 3.png') no-repeat
- center;
- }
- .twoMenu_imge45 {
- background: url('../../assets/img/synthesis/鍥惧眰 20.png') no-repeat center;
- }
- .twoMenu_imge46 {
- background: url('../../assets/img/synthesis/鍥惧眰 14 鎷疯礉 3.png') no-repeat
- center;
- }
- .twoMenu_imge47 {
- background: url('../../assets/img/synthesis/鍥惧眰 18.png') no-repeat center;
- }
- .twoMenu_imge48 {
- background: url('../../assets/img/synthesis/鍦嗚鐭╁舰 12 鎷疯礉 6.png')
- no-repeat center;
- }
- .twoMenu_imge49 {
- background: url('../../assets/img/synthesis/绠￠亾.png') no-repeat center;
- }
- .twoMenu_imge410 {
- background: url('../../assets/img/synthesis/dxkw.png') no-repeat center;
- }
- .twoMenu_imge411 {
- background: url('../../assets/img/synthesis/鐭╁舰 14 鎷疯礉 7.png') no-repeat
- center;
- }
- //鏌ヨ
- .twoMenu_imge51 {
- background: url('../../assets/img/synthesis/鍥惧眰 23.png') no-repeat center;
- }
- .twoMenu_imge52 {
- background: url('../../assets/img/synthesis/绌洪棿鏌ヨ.png') no-repeat
- center;
- }
- //瀹氫綅
- .twoMenu_imge61 {
- background: url('../../assets/img/synthesis/鍥惧眰 27.png') no-repeat center;
- }
- .twoMenu_imge62 {
- background: url('../../assets/img/synthesis/鍥惧眰 28.png') no-repeat center;
- }
- //娴嬮噺
- .twoMenu_imge71 {
- background: url('../../assets/img/synthesis/鍥惧眰 31.png') no-repeat center;
- }
- .twoMenu_imge72 {
- background: url('../../assets/img/synthesis/鍥惧眰 31 鎷疯礉.png') no-repeat
- center;
- }
- .twoMenu_imge73 {
- background: url('../../assets/img/synthesis/鐭╁舰 13 鎷疯礉.png') no-repeat
- center;
- }
- .twoMenu_imge74 {
- background: url('../../assets/img/synthesis/鍥惧眰 18 鎷疯礉.png') no-repeat
- center;
- }
- .twoMenu_imge75 {
- background: url('../../assets/img/synthesis/M 鎷疯礉.png') no-repeat center;
- }
- .twoMenu_imge76 {
- background: url('../../assets/img/synthesis/绌洪棿娴嬭窛.png') no-repeat
- center;
- }
- //鏍囩粯
- .twoMenu_imge81 {
- background: url('../../assets/img/synthesis/妞渾 5 鎷疯礉 3.png') no-repeat
- center;
- }
- .twoMenu_imge82 {
- background: url('../../assets/img/synthesis/妞渾 3 鎷疯礉 16.png') no-repeat
- center;
- }
- .twoMenu_imge83 {
- background: url('../../assets/img/synthesis/妞渾 3 鎷疯礉 20.png') no-repeat
- center;
- }
- .twoMenu_imge84 {
- background: url('../../assets/img/synthesis/妞渾 3 鎷疯礉 23.png') no-repeat
- center;
- }
- .twoMenu_imge85 {
- background: url('../../assets/img/synthesis/瀵煎叆.png') no-repeat center;
- }
- .twoMenu_imge86 {
- background: url('../../assets/img/synthesis/瀵煎嚭.png') no-repeat center;
- }
- .twoMenu_imge87 {
- background: url('../../assets/img/synthesis/娓呴櫎.png') no-repeat center;
+ transition: width 2s;
}
.right_main {
@@ -731,6 +255,10 @@
height: 100%;
position: relative;
}
+ .right_Map {
+ width: 100%;
+ height: 100%;
+ }
.left_main_show {
width: 0px;
}
--
Gitblit v1.9.3