From d805339695bf1d25a333977445e1821508654d13 Mon Sep 17 00:00:00 2001 From: TreeWish <1131093754@qq.com> Date: 星期二, 28 二月 2023 10:09:30 +0800 Subject: [PATCH] 解决分屏切换2D显示不全 --- src/views/Synthesis/index.vue | 105 ++++----- src/components/MapDiv.vue | 163 +++++++-------- src/components/chart/projectState.vue | 301 ++++++++++++++--------------- 3 files changed, 275 insertions(+), 294 deletions(-) diff --git a/src/components/MapDiv.vue b/src/components/MapDiv.vue index f57f2e6..b5149b3 100644 --- a/src/components/MapDiv.vue +++ b/src/components/MapDiv.vue @@ -10,10 +10,7 @@ > <mapsdk></mapsdk> </div> - <div - id="ds" - v-show="isShowDs" - ></div> + <div id="ds" v-show="isShowDs"></div> <!--openLayers鏄剧ず鐣岄潰--> <div v-show="isOlMapFlag" @@ -27,13 +24,13 @@ </template> <script> -import mapsdk from './mapsdk'; -import mapol from './mapol'; -import { transform } from 'ol/proj'; -import ol from 'ol'; -import $ from 'jquery'; +import mapsdk from "./mapsdk" +import mapol from "./mapol" +import { transform } from "ol/proj" +import ol from "ol" +import $ from "jquery" export default { - name: '', + name: "", components: { mapsdk, mapol, @@ -51,156 +48,154 @@ 250000, 200000, 100000, 50000, 17000, 9000, 5000, 2000, 1000, 500, 200, 100, 50, 25, 10, 0, ], - }; + } }, methods: { changeMap(res) { - this.isSplitFlag = res; + this.isSplitFlag = res switch (res) { case 1: - this.isShowCeMap = true; - this.isShowDs = true; - this.isOlMapFlag = true; - this.isShowOlMap = true; - this.isSdkMapFlag = true; - var that = this; + this.isShowCeMap = true + this.isShowDs = true + this.isOlMapFlag = true + this.isShowOlMap = true + this.isSdkMapFlag = true + var that = this setTimeout(function () { - window.map.updateSize(); - that.showSplitMap(); - }, 500); + window.map.updateSize() + that.showSplitMap() + }, 500) - break; + break case 2: - this.isSdkMapFlag = false; - this.isShowDs = false; - this.isShowOlMap = false; - this.isOlMapFlag = true; + this.isSdkMapFlag = false + this.isShowDs = false + this.isShowOlMap = false + this.isOlMapFlag = true setTimeout(function () { - window.map.updateSize(); - }, 300); - break; + window.map.updateSize() + }, 300) + break case 3: - this.isSdkMapFlag = true; - this.isShowDs = false; - this.isShowOlMap = false; - this.isOlMapFlag = false; - this.isShowCeMap = false; - break; + this.isSdkMapFlag = true + this.isShowDs = false + this.isShowOlMap = false + this.isOlMapFlag = false + this.isShowCeMap = false + break } }, showSplitMap() { - var that = this; - $('#mapView') + var that = this + $("#mapView") .off() - .on('mousemove', function () { + .on("mousemove", function () { if (that.isSplitFlag == 1) { - window.Viewer.camera.changed.addEventListener(that.sdktool()); + window.Viewer.camera.changed.addEventListener(that.sdktool()) } }) - .on('mouseout', function () { + .on("mouseout", function () { if (that.isSplitFlag == 1) { - window.Viewer.camera.changed.removeEventListener(that.sdktool()); + window.Viewer.camera.changed.removeEventListener(that.sdktool()) } - }); + }) let mapZoomAndMove = function (event) { - var position = window.map.getView().getCenter(); + var position = window.map.getView().getCenter() // var pos = transform(position, 'EPSG:3857', 'EPSG:4326'); - var pos = position; - var level = that.getHeight(parseInt(window.map.getView().getZoom())); + var pos = position + var level = that.getHeight(parseInt(window.map.getView().getZoom())) window.Viewer.camera.setView({ destination: Cesium.Cartesian3.fromDegrees(pos[0], pos[1], level), - }); - }; - $('#map') + }) + } + $("#map") .off() - .on('mousemove', function () { + .on("mousemove", function () { if (that.isSplitFlag == 1) { - that.olzoomAndMove(mapZoomAndMove); + that.olzoomAndMove(mapZoomAndMove) } }) - .on('mouseout', function () { + .on("mouseout", function () { if (that.isSplitFlag == 1) { - that.clearolzoomAndMove(); + that.clearolzoomAndMove() } - }); + }) }, clearolzoomAndMove() { - let registerOnZoomArr = window.map.get('registerOnZoom'); + let registerOnZoomArr = window.map.get("registerOnZoom") if (registerOnZoomArr && registerOnZoomArr.length > 0) { for (let i = 0; i < registerOnZoomArr.length; i++) { - window.map.un('moveend', registerOnZoomArr[i]); + window.map.un("moveend", registerOnZoomArr[i]) } } }, olzoomAndMove(eventListen, notListenMove) { // 璁板綍鍦板浘缂╂斁锛岀敤浜庡垽鏂嫋鍔� window.map.lastZoom = - window.map.lastZoom || window.map.getView().getZoom(); + window.map.lastZoom || window.map.getView().getZoom() // 鍦板浘缂╂斁浜嬩欢 let registerOnZoom = function (e) { // 涓嶇洃鍚湴鍥炬嫋鍔ㄤ簨浠� if (notListenMove) { if (window.map.lastZoom != window.map.getView().getZoom()) { - eventListen && eventListen(e); + eventListen && eventListen(e) } } else { - eventListen && eventListen(e); + eventListen && eventListen(e) } - window.map.lastZoom = window.map.getView().getZoom(); - }; + window.map.lastZoom = window.map.getView().getZoom() + } // 淇濆瓨缂╂斁鍜屾嫋鍔ㄤ簨浠跺璞★紝鐢ㄤ簬鍚庢湡绉婚櫎 - let registerOnZoomArr = map.get('registerOnZoom') || []; + let registerOnZoomArr = map.get("registerOnZoom") || [] - registerOnZoomArr.push(registerOnZoom); + registerOnZoomArr.push(registerOnZoom) // 浣跨敤鍦板浘 set 鏂规硶淇濆瓨浜嬩欢瀵硅薄 - window.map.set('registerOnZoom', registerOnZoomArr); + window.map.set("registerOnZoom", registerOnZoomArr) // 鐩戝惉鍦板浘绉诲姩缁撴潫浜嬩欢 - window.map.on('moveend', registerOnZoom); + window.map.on("moveend", registerOnZoom) - return eventListen; + return eventListen }, sdktool() { - if (this.isSplitFlag != 1) return; - var position = window.Viewer.camera.position; - var ellipsoid = window.Viewer.scene.globe.ellipsoid; - var cartographic = ellipsoid.cartesianToCartographic(position); - var lat = Cesium.Math.toDegrees(cartographic.latitude); - var lng = Cesium.Math.toDegrees(cartographic.longitude); - var level = this.getLevel(cartographic.height); + if (this.isSplitFlag != 1) return + var position = window.Viewer.camera.position + var ellipsoid = window.Viewer.scene.globe.ellipsoid + var cartographic = ellipsoid.cartesianToCartographic(position) + var lat = Cesium.Math.toDegrees(cartographic.latitude) + var lng = Cesium.Math.toDegrees(cartographic.longitude) + var level = this.getLevel(cartographic.height) var value // window.map // .getView() // .setCenter(transform([lng, lat], 'EPSG:4326', 'EPSG:3857')); - window.map - .getView() - .setCenter([lng, lat]); - window.map.getView().setZoom(level); + window.map.getView().setCenter([lng, lat]) + window.map.getView().setZoom(level) }, getLevel(height) { for (var i = 1, len = this.levelArray.length; i < len - 1; i++) { if (height >= (this.levelArray[i] + this.levelArray[i + 1]) / 2) { - return i; + return i } } - return this.levelArray.length - 1; + return this.levelArray.length - 1 }, getHeight(level) { if (level > 0 && level < 23) { - return this.levelArray[level]; + return this.levelArray[level] } - return this.levelArray[this.levelArray.length - 1]; + return this.levelArray[this.levelArray.length - 1] }, }, mounted() { - this.$bus.$on('changemap', (e) => { - this.changeMap(e); - }); + this.$bus.$on("changemap", e => { + this.changeMap(e) + }) }, -}; +} </script> <style scoped> diff --git a/src/components/chart/projectState.vue b/src/components/chart/projectState.vue index b8bc6ce..b227a68 100644 --- a/src/components/chart/projectState.vue +++ b/src/components/chart/projectState.vue @@ -1,169 +1,164 @@ <template> - <div class="projectState" ref="chart"></div> + <div class="projectState" ref="chart"></div> </template> - + <script> import * as echarts from "echarts" import { GetServicesVisitsCount } from "@/api/screen.js" export default { - data() { - return { - option: {}, + data() { + return { + option: {}, + } + }, + mounted() { + // const option = this.initData() + this.initChart() + }, + methods: { + initChart() { + // const res = await GetServicesVisitsCount() + + // console.log(res.result); + + // if (res.code == 200) { + // } + // let xAxis = [] + // let yAxis = [] + + // res.result.forEach(item => { + // xAxis.push(item.type) + // yAxis.push(item.count) + // }) + + // let data = [220, 182, 191, 234, 290, 330, 310] + // const sideData = data.map(item => { + // return { + // name: item.name, + // value: item.number, + // } + // }) + + var XName = ["绔嬮」", "鍚姩", "寤鸿", "瀹屾垚"] + var data1 = [ + [100, 100, 100, 100], + [ + 100, + 100, + { + value: 100, + symbol: + "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==", + symbolSize: [50, 50], + }, + ], + ] + var Line = ["绾�1", "绾�2"] + var color = ["#256589", "#3F88E9"] + + //鏁版嵁澶勭悊 + var datas = [] + Line.map((item, index) => { + if (index == 0) { + datas.push({ + symbolSize: 10, + symbol: "circle", + hoverAnimation: false, + name: item, + type: "line", + data: data1[index], + itemStyle: { + normal: { + borderWidth: 5, + color: color[index], + }, + }, + }) + } else { + datas.push({ + symbolSize: 10, + symbol: "circle", + hoverAnimation: false, + name: item, + type: "line", + data: data1[index], + itemStyle: { + normal: { + borderWidth: 5, + color: color[index], + }, + }, + }) } - }, - mounted() { - // const option = this.initData() - this.initChart() - }, - methods: { - initChart() { - // const res = await GetServicesVisitsCount() + }) - // console.log(res.result); - - // if (res.code == 200) { - // } - // let xAxis = [] - // let yAxis = [] - - // res.result.forEach(item => { - // xAxis.push(item.type) - // yAxis.push(item.count) - // }) - - // let data = [220, 182, 191, 234, 290, 330, 310] - // const sideData = data.map(item => { - // return { - // name: item.name, - // value: item.number, - // } - // }) - - var XName = ["绔嬮」", "鍚姩", "寤鸿", "瀹屾垚"] - var data1 = [ - [100, 100, 100, 100], - [100, 100, { - value: 100, symbol: - 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==', - symbolSize: [50, 50], - }] - ] - var Line = ["绾�1", "绾�2"]; - var color = ['#256589', '#3F88E9']; - - //鏁版嵁澶勭悊 - var datas = []; - Line.map((item, index) => { - if (index == 0) { - datas.push( - { - symbolSize: 10, - symbol: 'circle', - hoverAnimation: false, - name: item, - type: "line", - data: data1[index], - itemStyle: { - normal: { - borderWidth: 5, - color: color[index], - } - } - } - ) - - } else { - datas.push( - { - symbolSize: 10, - symbol: 'circle', - hoverAnimation: false, - name: item, - type: "line", - data: data1[index], - itemStyle: { - normal: { - borderWidth: 5, - color: color[index], - } - } - } - ) - - } - - }) - - let option = { - grid: { - left: '5%', - top: '30%', - bottom: '30%', - right: '5%', - }, - yAxis: [ - { - type: 'value', - position: 'right', - max: 100, - splitLine: { - show: false - } - , - axisLine: { - show: false - }, - axisTick: { - show: false - }, - axisLabel: { - show: false - } - } - ], - xAxis: [ - { - type: 'category', - axisTick: { - show: false - }, - axisLine: { - show: false, - lineStyle: { - color: '#6A989E', - } - }, - axisLabel: { - inside: true, - show: true, - textStyle: { - color: '#90deff',// x杞撮鑹� - fontWeight: 'normal', - fontSize: '12', - lineHeight: 20 - } - - }, - data: XName, - } - ], - series: datas, - }; - const chart = echarts.init(this.$refs.chart) - - chart.setOption(option) - window.addEventListener("resize", function () { - chart.resize() - }) + let option = { + grid: { + left: "5%", + top: "30%", + bottom: "30%", + right: "5%", }, + yAxis: [ + { + type: "value", + position: "right", + max: 100, + splitLine: { + show: false, + }, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLabel: { + show: false, + }, + }, + ], + xAxis: [ + { + type: "category", + axisTick: { + show: false, + }, + axisLine: { + show: false, + lineStyle: { + color: "#6A989E", + }, + }, + axisLabel: { + inside: true, + show: true, + textStyle: { + color: "#90deff", // x杞撮鑹� + fontWeight: "normal", + fontSize: "12", + lineHeight: 20, + }, + }, + data: XName, + }, + ], + series: datas, + } + const chart = echarts.init(this.$refs.chart) + + chart.setOption(option) + window.addEventListener("resize", function () { + chart.resize() + }) }, + }, } </script> - + <style lang="scss" scoped> .projectState { - width: 100%; - height: calc(100% - 30px); + width: 100%; + height: calc(100% - 30px); } </style> - \ No newline at end of file diff --git a/src/views/Synthesis/index.vue b/src/views/Synthesis/index.vue index 48f7ff9..336a6b5 100644 --- a/src/views/Synthesis/index.vue +++ b/src/views/Synthesis/index.vue @@ -11,15 +11,8 @@ class="MenuIcon" :class="{ lefMenuActive: showMenuFlag == item.id }" > - <div - class="menuDiv" - :title="item.name" - @click="setMenuChange(item)" - > - <div - class="menuImage" - :class="item.class" - ></div> + <div class="menuDiv" :title="item.name" @click="setMenuChange(item)"> + <div class="menuImage" :class="item.class"></div> </div> </div> <div @@ -31,18 +24,12 @@ :title="menuItem.name" @click="setMenuChange(menuItem)" > - <div - class="menuImage" - :class="menuItem.class" - ></div> + <div class="menuImage" :class="menuItem.class"></div> </div> </div> </div> <div class="rightContent"> - <div - class="left_main" - :class="{ left_main_show: !openStatus }" - > + <div class="left_main" :class="{ left_main_show: !openStatus }"> <div class="right_Map"> <left-menu></left-menu> </div> @@ -58,10 +45,10 @@ </template> <script> -import { getPerms } from "../../api/api"; -import mapdiv from "../../components/MapDiv.vue"; -import leftMenu from "./LeftMenu.vue"; -import maplayer from "../Tools/maplayer.vue"; +import { getPerms } from "../../api/api" +import mapdiv from "../../components/MapDiv.vue" +import leftMenu from "./LeftMenu.vue" +import maplayer from "../Tools/maplayer.vue" export default { components: { mapdiv, @@ -143,7 +130,7 @@ class: "menu_img1", show: true, }, - }; + } }, watch: {}, @@ -151,28 +138,32 @@ //宸︿晶鑿滃崟婊戝姩鏄鹃殣 setMenuChange(res) { if (res.id == this.showMenuFlag) { - return; + return } //娓呴櫎鏌ヨ寮圭獥 - this.$store.state.mapMenuBoolean = false; - this.$store.state.mapMenuBoxFlag = ""; + this.$store.state.mapMenuBoolean = false + this.$store.state.mapMenuBoxFlag = "" //娓呴櫎鍒嗘瀽妯″潡鐨勫叏灞�鍙橀噺 - ClearAlayse(); + ClearAlayse() switch (res.id) { case 1: - if (this.showMenuFlag == null) return; - this.openStatus = !this.openStatus; - break; + if (this.showMenuFlag == null) return + this.openStatus = !this.openStatus + // 鐐瑰嚮宸︿晶鑿滃崟鏄皟鏁� + setTimeout(() => { + window.map.updateSize() + }, 1000) + break case 10: if (this.showMenuFlag == null) { - this.openStatus = false; + this.openStatus = false } - this.$bus.$emit("setChangeTwoMenu", res.id - 2); - break; + this.$bus.$emit("setChangeTwoMenu", res.id - 2) + break default: { - this.openStatus = true; - this.$bus.$emit("setChangeTwoMenu", res.id - 2); - this.showMenuFlag = res.id; + this.openStatus = true + this.$bus.$emit("setChangeTwoMenu", res.id - 2) + this.showMenuFlag = res.id } } }, @@ -182,63 +173,63 @@ this.$store.state.currentPerms == "" || this.$store.state.currentPerms != "/comprehensive" ) { - this.$store.state.currentPerms = "/comprehensive"; + this.$store.state.currentPerms = "/comprehensive" } if (this.$store.state.permsEntity.length == 0) { - const data = await getPerms(); - this.$store.state.permsEntity = data.result; + const data = await getPerms() + this.$store.state.permsEntity = data.result } - var val = this.$store.state.currentPerms; - var permsEntity = this.$store.state.permsEntity; + var val = this.$store.state.currentPerms + var permsEntity = this.$store.state.permsEntity for (var i = 0; i < permsEntity.length; i++) { if (permsEntity[i].perms == val) { - this.showMenuChange(permsEntity[i], permsEntity); + this.showMenuChange(permsEntity[i], permsEntity) } } for (var i in this.menuOption) { if (this.menuOption[i].show != false) { - this.showMenuList.push(this.menuOption[i]); + this.showMenuList.push(this.menuOption[i]) } } //鍒濆鍖栦簩绾ц彍鍗� if (this.showMenuList.length > 1) { - var index = this.showMenuList[1].id; - this.$bus.$emit("setChangeTwoMenu", index - 2); + var index = this.showMenuList[1].id + this.$bus.$emit("setChangeTwoMenu", index - 2) } }, showMenuChange(res, result) { - var permsId = res.id; - this.$store.state.syntiesis.menu = res.id; + var permsId = res.id + this.$store.state.syntiesis.menu = res.id for (var i = 0; i < result.length; i++) { if (result[i].pid == permsId) { - this.showMenuStatus(result[i]); + this.showMenuStatus(result[i]) } } }, showMenuStatus(res) { - var std = []; - std.push(this.menuOption[0]); + var std = [] + std.push(this.menuOption[0]) for (var i = 1; i < this.menuOption.length; i++) { if (this.menuOption[i].name == res.cnName) { - this.menuOption[i].show = true; + this.menuOption[i].show = true } } }, }, mounted() { // this.$bus.$emit('showLeftMenu', true); - window.sgworld.navControl("nav", true); - this.$store.state.mapMenuBoolean = false; - this.$store.state.mapMenuBoxFlag = null; - this.$store.state.mapPopBoolean = false; - this.$store.state.mapPopBoxFlag = null; + window.sgworld.navControl("nav", true) + this.$store.state.mapMenuBoolean = false + this.$store.state.mapMenuBoxFlag = null + this.$store.state.mapPopBoolean = false + this.$store.state.mapPopBoxFlag = null }, //鍒濆鍖栬彍鍗曟巿鏉� created() { - this.getPermsMenu(); + this.getPermsMenu() }, -}; +} </script> <style lang="less" scoped> -- Gitblit v1.9.3