From 47fa84717d17477b69bcb8c2a6794bd8189e1bf3 Mon Sep 17 00:00:00 2001 From: ZhangXianQiang <1135831638@qq.com> Date: 星期四, 07 三月 2024 14:41:41 +0800 Subject: [PATCH] refactor:重构街道地图功能 --- src/views/daoAnOffice/index.vue | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 53 insertions(+), 5 deletions(-) diff --git a/src/views/daoAnOffice/index.vue b/src/views/daoAnOffice/index.vue index 99f8e63..bbb73a7 100644 --- a/src/views/daoAnOffice/index.vue +++ b/src/views/daoAnOffice/index.vue @@ -1,10 +1,9 @@ -<script setup lang="ts"> +<script setup> import ItemWrap from "@/components/item-wrap"; // import MenuHeader from "@/components/menu-header.vue"; import LeftTop from "./left-top.vue"; import LeftCenter from "./left-center.vue"; import LeftBottom from "./left-bottom.vue"; -import CenterMap from "./center-map.vue"; import CenterBottom from "./center-bottom.vue"; import RightTop from "./right-top.vue"; import RightTop1 from "./right-top2.vue"; @@ -17,6 +16,15 @@ import Analysis from './right/analysis/index.vue'; import Danger from './right/danger/index.vue'; import Publicize from './right/publicize/index.vue'; +import Chartgd from "@/views/index/chartgd.vue"; + +// 灞呬腑map +import CenterMap from "./center-map.vue"; + +// 鎺у埗鍦板浘鏄剧ず +import { mapState } from '@/stores/map.js'; + +import { ref } from "vue"; const config = { header: ['<span style="color:#42C3E8;font-size: 16px">鎺掑悕</span>', '<span style="color:#42C3E8;font-size: 16px">琛屾斂鍖哄垝</span>', '<span style="color:#42C3E8;font-size: 16px">鏁板��</span>'], @@ -75,10 +83,17 @@ title: '澶栧崗婧簮琚煡鑾锋暟', length: 9, }] + + + +const mapChange = () => { + mapState.value = !mapState.value; +} </script> <template> <div class="index-box"> + <!-- <chartgd @changeDt="handlechan" v-if="dtFig ==0" class="gddt"></chartgd>--> <div class="contetn_left"> <ItemWrap class="contetn_left-top contetn_lr-item" title="杩�3骞翠氦閫氫簨鏁呮寚鏁�"> <LeftTop /> @@ -98,8 +113,9 @@ </div> </div> - <div class="contetn_center"> - <CenterMap class="contetn_center_top" title="璁惧鍒嗗竷鍥�" /> + <div class="contetn_center" v-if="mapState"> + <!-- echart鍦板浘 --> + <CenterMap class="contetn_center_top" /> </div> @@ -115,6 +131,14 @@ <div class="right_wrapper_content"> <Publicize /> </div> + </div> + </div> + + <!-- 鍒囨崲鍦板浘鎸夐挳 --> + <div class="map-change-button" @click="mapChange"> + <div class="button-title">鍦板浘鍒囨崲</div> + <div class="button-img"> + <img src="@/assets/img/dtqh.png" alt=""> </div> </div> @@ -243,11 +267,33 @@ </template> <style scoped lang="scss"> +.map-change-button { + width: 94px; + position: absolute; + bottom: 50px; + left: 2416px; + font-size: 16px; + color: #FFFFFF; + z-index: 99; + text-align: center; + cursor: pointer; + font-family: 'PingFang SC'; +} + +.gddt { + position: absolute; + z-index: 0; + width: 3840px; + height: 1080px; +} + .index-box { width: 100%; display: flex; min-height: calc(100% - 64px); justify-content: space-between; + margin-top: -40px; + padding: 0 22px; } //宸﹁竟 鍙宠竟 缁撴瀯涓�鏍� @@ -268,6 +314,7 @@ display: flex; flex-direction: column; justify-content: space-around; + position: relative; .contetn_center-bottom { height: 315px; @@ -279,11 +326,12 @@ } .contetn_lr-item_right { - width: 48%; + width: 48%; } .contetn_lr-item_left { width: 50%; + margin-right: 26px; } .contetn_lr-item_contetn { -- Gitblit v1.8.0