From e897fc3d35f8e5dfa56d5f0c80a655ccf99202cf Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期四, 09 五月 2024 11:06:43 +0800
Subject: [PATCH] 代码更新
---
src/views/Thematic/index.vue | 653 +++++++++++------------------------------------------------
1 files changed, 122 insertions(+), 531 deletions(-)
diff --git a/src/views/Thematic/index.vue b/src/views/Thematic/index.vue
index 22ef12b..eddd7a6 100644
--- a/src/views/Thematic/index.vue
+++ b/src/views/Thematic/index.vue
@@ -1,565 +1,156 @@
<template>
<div class="themaic">
- <div class="left_menu" :class="{ left_main_show: !leftMenuOpen }">
- <div class="tree-container">
- <el-tree
- :data="treeData"
- show-checkbox
- node-key="id"
- default-expand-all
- :props="defaultProps"
- ref="tree"
- @check-change="handleCheckChange"
- >
- </el-tree>
- </div>
+ <mapsdk></mapsdk>
+ <top class="title"
+ ref="title"></top>
+ <left class="mapleft"
+ :style="{ width: leftWidth, left: leftWidth == '22%' ? '-19px' : '0' }"
+ ref="mapleft"></left>
- <div class="changeBaseLayer">
- <div @click="changeMenulayer" class="CenDiv">
- <div
- id="cenBg"
- v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
- ></div>
- </div>
- </div>
- </div>
- <div class="center_content">
- <div id="MapView" class="MapView">
- <div class="leftEchart" v-show="openEcharts">
- <echart11 v-if="typeIndex == '1'" class="echart1"></echart11>
- <echart12 v-if="typeIndex == '1'" class="echart1"></echart12>
- <echart13 v-if="typeIndex == '1'" class="echart1"></echart13>
- <echart21 v-if="typeIndex == '2'" class="echart1"></echart21>
- <echart22 v-if="typeIndex == '2'" class="echart1"></echart22>
- <echart23 v-if="typeIndex == '2'" class="echart1"></echart23>
- <echart31 v-if="typeIndex == '3'" class="echart1"></echart31>
- <echart32 v-if="typeIndex == '3'" class="echart1"></echart32>
- <echart33 v-if="typeIndex == '3'" class="echart1"></echart33>
- <echart44 v-if="typeIndex == '4'" class="echart1"></echart44>
- <echart45 v-if="typeIndex == '4'" class="echart1"></echart45>
- <echart46 v-if="typeIndex == '4'" class="echart1"></echart46>
- </div>
- <div class="rightEchart" v-show="openEcharts">
- >
- <echart14 v-if="typeIndex == '1'" class="echart1"></echart14>
- <echart15 v-if="typeIndex == '1'" class="echart1"></echart15>
- <echart16 v-if="typeIndex == '1'" class="echart1"></echart16>
- <echart24 v-if="typeIndex == '2'" class="echart1"></echart24>
- <echart25 v-if="typeIndex == '2'" class="echart1"></echart25>
- <echart26 v-if="typeIndex == '2'" class="echart1"></echart26>
- <echart34 v-if="typeIndex == '3'" class="echart1"></echart34>
- <echart35 v-if="typeIndex == '3'" class="echart1"></echart35>
- <echart36 v-if="typeIndex == '3'" class="echart1"></echart36>
- <echart41 v-if="typeIndex == '4'" class="echart1"></echart41>
- <echart42 v-if="typeIndex == '4'" class="echart1"></echart42>
- <echart43 v-if="typeIndex == '4'" class="echart1"></echart43>
- </div>
- <div class="left_content">
- <div v-show="leftMenuOpen" @click="showLeftMenu">
- <i style="color: skyblue" class="el-icon-caret-left"></i>
- </div>
- <div v-show="!leftMenuOpen" @click="showLeftMenu">
- <i style="color: skyblue" class="el-icon-caret-right"></i>
- </div>
- </div>
- <div class="right_content">
- <div v-show="!rightMenuOpen" @click="showRightMenu">
- <i style="color: skyblue" class="el-icon-caret-left"></i>
- </div>
- <div v-show="rightMenuOpen" @click="showRightMenu">
- <i style="color: skyblue" class="el-icon-caret-right"></i>
- </div>
- </div>
- </div>
- </div>
- <div class="right_menu" :class="{ right_main_show: !rightMenuOpen }">
- <div class="content_right">
- <ul>
- <li
- @click="changeRightList(item)"
- v-for="item in rightList"
- :class="item.id == changeSelectli ? 'changeliStyle' : ''"
- >
- {{ item.name }}
- </li>
- </ul>
- </div>
- <div class="bottom_right">
- <div
- v-for="item in rightMenu"
- class="right_item"
- :class="{ changeStyle: changeSelectStyle == item.id }"
- @click="changeRightMenu(item)"
- >
- {{ item.name }}
- </div>
- </div>
- </div>
+ <project-tree class="project-tree"
+ v-show="ProjectreeDisplay"></project-tree>
+
+ <right class="mapright"
+ :style="{ width: rightWidth }"
+ ref="mapright"></right>
+ <bottom class="mapbottom"
+ ref="mapbottom"></bottom>
</div>
</template>
<script>
-import mapsdk from '../../components/mapsdk.vue';
-import { right_menu, right_list, image_layer } from './index.js';
-import echart11 from '../../components/echart11.vue';
-import echart12 from '../../components/echart12.vue';
-import echart13 from '../../components/echart13.vue';
-import echart14 from '../../components/echart14.vue';
-import echart15 from '../../components/echart15.vue';
-import echart16 from '../../components/echart16.vue';
-import echart21 from '../../components/echart21.vue';
-import echart22 from '../../components/echart22.vue';
-import echart23 from '../../components/echart23.vue';
-import echart24 from '../../components/echart24.vue';
-import echart25 from '../../components/echart25.vue';
-import echart26 from '../../components/echart26.vue';
-import echart31 from '../../components/echart31.vue';
-import echart32 from '../../components/echart32.vue';
-import echart33 from '../../components/echart33.vue';
-import echart34 from '../../components/echart34.vue';
-import echart35 from '../../components/echart35.vue';
-import echart36 from '../../components/echart36.vue';
-import echart41 from '../../components/echart41.vue';
-import echart42 from '../../components/echart42.vue';
-import echart43 from '../../components/echart43.vue';
-import echart44 from '../../components/echart44.vue';
-import echart45 from '../../components/echart45.vue';
-import echart46 from '../../components/echart46.vue';
-import axios from 'axios';
+import mapsdk from "@/components/Screen/mapsdk.vue"
+import top from "../../components/Screen/top.vue"
+import left from "@/components/Screen/left.vue"
+import right from "../../components/Screen/right.vue"
+import bottom from "../../components/Screen/bottom.vue"
+import ProjectTree from "../../components/Screen/ProjectTree.vue"
+import axios from "axios"
export default {
- components: {
- mapsdk,
- echart11,
- echart12,
- echart13,
- echart14,
- echart15,
- echart16,
- echart21,
- echart22,
- echart23,
- echart24,
- echart25,
- echart26,
- echart31,
- echart32,
- echart33,
- echart34,
- echart35,
- echart36,
- echart41,
- echart43,
- echart42,
- echart44,
- echart45,
- echart46,
- },
- data() {
+ components: { mapsdk,top,left,right,bottom,ProjectTree },
+ data () {
return {
- typeIndex: null,
- leftMenuOpen: false,
- rightMenuOpen: false,
- changeSelectStyle: null,
- changeSelectli: null,
- rightMenu: [],
- rightList: [],
- treeData: [],
- centerFlag: false,
- isActive: false,
- isMenuLayer: true,
- openEcharts: false,
- defaultProps: {
- children: 'children',
- label: 'label',
- },
- };
+ leftWidth: "22%",
+ rightWidth: "22%",
+ leftTree: false,
+ currTree: false,
+ ProjectreeDisplay: false,
+ }
},
- mounted() {
- this.treeData = image_layer;
- this.rightList = right_list[0];
- this.rightMenu = right_menu;
- this.changeSelectli = this.rightList[0].id;
- this.changeSelectStyle = this.rightMenu[0].id;
- this.initMapView();
- this.addImageLayer();
+ mounted () {
+
},
- created() {},
+ created () {
+ this.$bus.$on("changeTree",key => {
+ this.ProjectreeDisplay=key
+ })
+ },
methods: {
- changeRightList(res) {
- this.changeSelectli = res.id;
- if (res.layer != null) {
- var layer = res.layer;
- this.$refs.tree.setCheckedKeys(layer);
- }
- if (res.index != null) {
- this.openEcharts = true;
- this.typeIndex = res.index;
- } else {
- this.openEcharts = false;
- this.typeIndex = null;
- }
- var vid = res.id;
-
- if (vid.indexOf('b') != -1) {
- var url = geoserverWFS + '%27' + res.name + '%27';
- axios.get(url).then((res) => {
- if (res.status == 200) {
- var point = res.data.features[0].geometry.coordinates;
- //瀹氫綅
- MapViewer.camera.flyTo({
- //璺宠浆瑙嗚
- destination: new Cesium.Cartesian3.fromDegrees(
- point[0],
- point[1],
- 8000
- ),
- });
- }
- });
- } else if (vid.indexOf('a') != -1) {
- //瀹氫綅
- MapViewer.camera.flyTo({
- //璺宠浆瑙嗚
- destination: new Cesium.Cartesian3.fromDegrees(105.02, 34.9, 8000000),
- });
- } else if (vid.indexOf('c') != -1) {
- var url = geoserverWFSLine + '%27' + res.name + '%27';
- axios.get(url).then((res) => {
- if (res.status == 200) {
- if (res.data.features.length == 0) return;
- var std = [];
- for (var i in res.data.features) {
- var featurLayer = res.data.features[i];
- var path = featurLayer.geometry.coordinates[0];
- for (var j in path) {
- std.push(path[j][0], path[j][1], 50);
- }
- }
- this.showPathLine(std);
- }
- });
- }
- },
- showPathLine(res) {
- sgworld.Creator.getFlyData(res, (data) => {
- data.showPoint = false;
- data.showLine = true;
- data.mode = 1;
- // 寮圭獥鏁版嵁
- window.PathAnimationData = {
- flyData: data,
- };
- window.PathAnimationData.winIndex = layer.open({
- type: 2,
- title: '璺緞鍔ㄧ敾',
- shade: false,
- area: ['352px', '690px'],
- offset: 'r',
- skin: 'other-class',
- content: SmartEarthRootUrl + 'Workers/path/Path.html',
- end: function () {
- PathAnimationData.fly && PathAnimationData.fly.exit();
- },
- });
- });
- },
- showLeftMenu() {
- this.leftMenuOpen = !this.leftMenuOpen;
- var a = 0;
- var layer = setInterval(() => {
- a++;
- this.$bus.$emit('resizeEchart', true);
- if (a == 20) {
- clearInterval(layer);
- this.$bus.$emit('resizeEchart', true);
+ //淇敼宸︿晶瀹藉害
+ ChangeWidth (parm) {
+ if(parm=="left") {
+ if(this.leftWidth=="22%") {
+ this.leftWidth="8px"
+ } else {
+ this.leftWidth="22%"
}
- }, 100);
- },
- showRightMenu() {
- this.rightMenuOpen = !this.rightMenuOpen;
- var a = 0;
- var layer = setInterval(() => {
- a++;
- this.$bus.$emit('resizeEchart', true);
- if (a == 20) {
- clearInterval(layer);
- this.$bus.$emit('resizeEchart', true);
- }
- }, 100);
- },
- changeRightMenu(res) {
- this.rightList = right_list[parseInt(res.id) - 1];
- this.changeSelectStyle = res.id;
- },
- initMapView() {
- window.sgworld = new SmartEarth.SGWorld('MapView', {
- licenseServer: window.sceneConfig.licenseServer,
- });
-
- window.MapViewer = window.sgworld._Viewer;
- Viewer.imageryLayers._layers[0].show = false;
- //瀹氫綅
- sgworld.Navigate.jumpTo({
- //璺宠浆瑙嗚
- destination: new Cesium.Cartesian3.fromDegrees(
- 116.3911,
- 39.9115,
- 100000
- ),
- });
- for (var i in gaoDeBaseUrl) {
- sgworld.Creator.createUrlTemplateImageryProvider(
- gaoDeBaseUrl[i].label,
- gaoDeBaseUrl[i].url,
- '0',
- undefined,
- true,
- ''
- );
}
- //鏄剧ずfps
- MapViewer.scene.debugShowFramesPerSecond = false;
- //瀵艰埅鎺т欢
- window.sgworld.navControl('nav', false);
- //姣斾緥灏�
- window.sgworld.navControl('scale', false);
- },
- changeMenulayer() {
- this.isActive = !this.isActive;
- this.isMenuLayer = !this.isMenuLayer;
- this.setLayerVisible();
- },
- setLayerVisible() {
- if (this.isActive == true) {
- MapViewer.imageryLayers._layers[1].show = true;
- MapViewer.imageryLayers._layers[2].show = false;
- MapViewer.imageryLayers._layers[3].show = false;
- } else {
- MapViewer.imageryLayers._layers[1].show = false;
- MapViewer.imageryLayers._layers[2].show = true;
- MapViewer.imageryLayers._layers[3].show = true;
+ if(parm=="leftView"||parm=="leftTree") {
+ this.leftWidth="22%"
+ this.rightWidth="22%"
}
- },
- addImageLayer() {
- var val_layer = this.treeData[0].children;
- var std = [];
- for (var i = 0; i < val_layer.length; i++) {
- let layerWMS = new Cesium.WebMapServiceImageryProvider({
- url: geoServerURl,
- layers: val_layer[i].resource,
- parameters: {
- transparent: true,
- format: 'image/png',
- },
- });
- layerWMS.name = val_layer[i].label;
- window.MapViewer.imageryLayers.addImageryProvider(layerWMS);
- std.push(val_layer[i].id);
- }
- this.$refs.tree.setCheckedKeys(std);
- },
- handleCheckChange(data, checked, indeterminate) {
- if (data.children != null) return;
- for (var i = 0; i < window.MapViewer.imageryLayers._layers.length; i++) {
- var val_id =
- window.MapViewer.imageryLayers._layers[i].imageryProvider.name;
- if (val_id == data.label) {
- const img_layer = window.MapViewer.imageryLayers._layers[i];
- img_layer.show = checked;
+ // if (parm == "leftView") {
+ // this.leftTree = false
+ // }
+ // if (parm == "leftTree") {
+ // this.leftTree = true
+ // }
+
+ if(parm=="right") {
+ if(this.rightWidth=="22%") {
+ this.rightWidth="45px"
+ } else {
+ this.rightWidth="22%"
}
}
},
},
-};
+}
</script>
<style lang="less" scoped>
.themaic {
- width: 100%;
height: 100%;
- background: #303030;
- position: relative;
+ width: 100%;
+ position: absolute;
display: flex;
- overflow: hidden;
- .left_menu {
- margin: 0;
- width: 300px;
- height: 100%;
- transition: width 2s;
- background: #133a5f;
- .tree-container {
- margin: 10px;
- }
+}
- .changeBaseLayer {
- width: 100%;
- height: 80px;
- margin-top: calc(190% - 10px);
- display: flex;
- align-items: flex-end;
- justify-content: flex-end;
- .CenDiv {
- height: 40px;
- width: 60px;
- margin: 2%;
- border-radius: 5px;
- }
- .CenDiv:hover {
- border: 1px solid #409eff;
- }
- .active {
- height: 40px;
- width: 60px;
- background: url('../../assets/img/Layer/imgLayer2.png') no-repeat center;
- position: absolute;
- background-size: 100% 100%;
- border-radius: 5px;
- }
- .menuLayer {
- height: 40px;
- width: 60px;
- background: url('../../assets/img/Layer/imgLayer1.png') no-repeat center;
- position: absolute;
- background-size: 100% 100%;
- border-radius: 5px;
- }
- }
- }
- .center_content {
- flex: 1;
- height: 100%;
- .MapView {
- width: 100%;
- height: 100%;
- overflow: hidden;
- margin: 0;
- padding: 0;
- float: left;
- position: relative;
- .leftEchart {
- z-index: 60;
- position: absolute;
- height: 100%;
- width: 20%;
- margin-left: 1.5%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- }
- .rightEchart {
- z-index: 60;
- position: absolute;
- height: 100%;
- width: 20%;
- right: 0;
- opacity: 0.5;
- margin-right: 1.5%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- }
- .right_content {
- width: 10px;
- height: 100%;
- z-index: 60;
- display: flex;
- align-items: center;
- right: 0;
- position: absolute;
- padding: 0px 5px;
- }
- .left_content {
- width: 10px;
- height: 100%;
- z-index: 60;
- left: 0;
- position: absolute;
- display: flex;
- align-items: center;
- padding: 0px 5px;
- }
- }
- }
- .item_menu {
- height: 100%;
- display: flex;
- align-items: center;
- }
- .left_main_show {
- width: 0;
- }
- .right_menu {
- margin: 0;
- width: 300px;
- height: 100%;
- transition: width 2s;
- background: #133a5f;
+.title {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 86px;
+ width: 100%;
+ z-index: 999;
+}
- .content_right {
- width: calc(100% -20px);
- height: 95%;
- li {
- border-bottom: 1px solid white;
- padding: 10px 10px;
- color: white;
- }
- li:hover {
- color: #409eff;
- }
- .changeliStyle {
- color: #409eff;
- }
- }
+.mapleft {
+ position: absolute;
+ top: 90px;
+ left: 0px;
+ // width: 20%;
+ height: calc(100% - 180px);
+ z-index: 999;
+}
- .bottom_right {
- width: 100%;
- height: 5%;
- display: flex;
- position: relative;
- .right_item {
- align-items: center;
- display: flex;
- height: calc(100% - 2px);
- flex-grow: 1;
- justify-content: center;
- font-size: 16px;
- font-family: Source Han Sans SC;
- font-weight: 400;
- color: white;
- border-bottom: 1px solid white;
- border-top: 1px solid white;
- border-left: 1px solid white;
- }
- }
- .changeStyle {
- background: #409eff;
- }
- }
+.mapright {
+ position: absolute;
+ top: 90px;
+ right: -20px;
+ // width: 20%;
+ height: calc(100% - 180px);
+ z-index: 999;
+}
- .right_main_show {
- width: 0;
- }
- .echart1 {
- width: 88%;
- height: 27%;
- border: 3px solid rgba(204, 204, 204, 0.76);
- border-radius: 10px;
- background: rgba(0, 0, 0, 0.4);
- }
+.mapbottom {
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ height: 90px;
+ width: 100%;
+ z-index: 999;
+}
+.project-tree {
+ position: absolute;
+ top: 90px;
+ right: 22%;
+ width: 15%;
+ height: calc(100% - 180px);
+ z-index: 999;
+}
+</style>
- /deep/ .el-tree {
- padding-top: 15px;
- padding-left: 10px;
- // 涓嶅彲鍏ㄩ�夋牱寮�
- .el-tree-node {
- .is-leaf + .el-checkbox .el-checkbox__inner {
- display: inline-block;
- }
- .el-checkbox .el-checkbox__inner {
- display: none;
- }
- }
+<style lang="less">
+.themaic {
+ .aside-title {
+ box-sizing: border-box;
+ padding-left: 30px;
+ // height: 27px;
+ // line-height: 27px;
+ // background: linear-gradient(0deg, #9cd2ff 0%, #ffffff 100%);
+ font-size: 15px;
+ font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
+ // -webkit-background-clip: text;
+ color: #fff;
+ width: 100%;
+
+ height: 30px;
+ line-height: 30px;
+ background: url(~@/assets/img/Screen/asideTitleBg.png);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
}
}
</style>
--
Gitblit v1.9.3