From ffb95c5b73c2bf11cd66b3c05955833397dc553b Mon Sep 17 00:00:00 2001
From: WX <1377869194@qq.com>
Date: 星期五, 16 六月 2023 17:57:38 +0800
Subject: [PATCH] 部分功能添加完善
---
src/views/menus.vue | 77 +++++++++++++++++++++++++++++++++++---
1 files changed, 71 insertions(+), 6 deletions(-)
diff --git a/src/views/menus.vue b/src/views/menus.vue
index 2b8766e..858a4ca 100644
--- a/src/views/menus.vue
+++ b/src/views/menus.vue
@@ -31,10 +31,11 @@
<layer-manage v-show="checkMenuFlag == 'l1'"> </layer-manage>
<plotting v-show="checkMenuFlag == 'l2'"> </plotting>
<baseMapSwitching v-show="checkMenuFlag == 'l5'"> </baseMapSwitching>
- <search> </search>
+ <search v-if="thematicMapBtnState"> </search>
</div>
- <top-btn v-show="fullScreen"></top-btn>
- <div class="fullScreen_btn"></div>
+ <top-btn v-show="fullScreen" v-if="thematicMapBtnState"></top-btn>
+ <thematic-map v-show="!thematicMapBtnState"></thematic-map>
+ <div class="fullScreen_btn" v-show="!fullScreen" @click="screen"></div>
</template>
<script lang="ts" setup>
@@ -50,6 +51,8 @@
import menuTool from "@/assets/js/Map/menuTool";
//椤堕儴鑿滃崟
import topBtn from "@/components/topBtn.vue";
+//涓撻鍥捐彍鍗�
+import thematicMap from "@/components/thematicMap/thematicMap.vue";
//鍥惧眰绠＄悊椤甸潰
import layerManage from "@/views/layer/layerManage.vue";
//鍦扮悊缂栫爜鎼滅储
@@ -61,9 +64,19 @@
const menuOptions = ref([]);
const checkMenuFlag = ref("");
let fullScreen = ref(true);
+let thematicMapState = ref(true);
+let thematicMapBtnState = ref(true);
const setMenuClick = (res) => {
if (res.id == "l6") {
- fullScreen.value = !fullScreen.value;
+ // fullScreen.value = !fullScreen.value;
+ screen();
+ }
+ if (res.id == "l3") {
+ thematicMapState.value = false;
+ thematicMapBtnState.value = false;
+ } else {
+ thematicMapState.value = true;
+ thematicMapBtnState.value = true;
}
if (checkMenuFlag.value && checkMenuFlag.value == res.id) {
checkMenuFlag.value = null;
@@ -72,6 +85,50 @@
menuTool.leftTools(res);
}
};
+// 鍒囨崲娴忚鍣ㄥ叏灞�
+const screen = () => {
+ fullScreen.value = !fullScreen.value;
+
+ if (fullScreen.value) {
+ // 閫�鍑哄叏灞�
+ if (document.exitFullscreen) {
+ document.exitFullscreen();
+ } else if (document.mozCancelFullScreen) {
+ document.mozCancelFullScreen();
+ } else if (document.webkitExitFullscreen) {
+ document.webkitExitFullscreen();
+ }
+ } else {
+ var element = document.body;
+ if (element.requestFullscreen) {
+ element.requestFullscreen();
+ } else if (element.mozRequestFullScreen) {
+ element.mozRequestFullScreen();
+ } else if (element.webkitRequestFullscreen) {
+ element.webkitRequestFullscreen();
+ } else if (element.msRequestFullscreen) {
+ element.msRequestFullscreen();
+ }
+ }
+};
+// 鐩戝惉娴忚鍣ㄥ叏灞忎簨浠�
+document.addEventListener("fullscreenchange", () => {
+ if (!isFullScreen()) {
+ if (!fullScreen.value) {
+ fullScreen.value = !fullScreen.value;
+ console.log(fullScreen.value);
+ }
+ }
+ console.log(isFullScreen());
+});
+// 鍒ゆ柇鏄惁鍏ㄥ睆
+function isFullScreen() {
+ return (
+ document.isFullScreen ||
+ document.mozIsFullScreen ||
+ document.webkitIsFullScreen
+ );
+}
onMounted(() => {
menuOptions.value = menuData.leftMenu;
});
@@ -133,9 +190,17 @@
display: flex;
}
.fullScreen_btn {
- // background: url("../assets/img/褰㈢姸 3.png") no-repeat center;
- // background-size: 100% 100%;
+ background: url("../assets/img/leftBtn/鍚堥泦_03.png") no-repeat center;
+ background-size: 100% 100%;
width: 30px;
height: 30px;
+ position: absolute;
+ right: 20px;
+ top: 20px;
+}
+.fullScreen_btn:hover {
+ background: url("../assets/img/leftBtn/鍚堥泦_03-02.png") no-repeat center;
+ background-size: 100% 100%;
+ cursor: pointer;
}
</style>
--
Gitblit v1.9.3