From fde8e3bedaf5f883f38c3a0ec33d3c6a8748d1c9 Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期五, 21 六月 2024 18:02:44 +0800
Subject: [PATCH] wfs 范围查询
---
src/views/homePage/index.vue | 210 +++++++++++++++++++++++++---------------------------
1 files changed, 102 insertions(+), 108 deletions(-)
diff --git a/src/views/homePage/index.vue b/src/views/homePage/index.vue
index 5cadb4c..0b0cd92 100644
--- a/src/views/homePage/index.vue
+++ b/src/views/homePage/index.vue
@@ -1,108 +1,102 @@
-<template>
- <div class="homeBox">
-
-
-
- <!-- <div class="threeMap">
- <jw-chat></jw-chat>
- </div>
- <div class="secondMap">
- <map-view></map-view>
- </div> -->
-
- </div>
-</template>
-
-<script>
-import mapViewer from '../../assets/js/map/mapView';
-import jwChat from '../chart/index.vue';
-import mapView from '../mapView/index.vue'
-import store from '../../store';
-export default {
- name: 'homePage',
- components: {
- jwChat,
- mapView
- },
- data() {
- return {
- setMenuFlag: false
- }
- },
- computed: {
- Obj() {
- return store.state.setMenuFlag
- }
-
- },
- watch: {
- Obj(newVal, oldVal) {
- console.log(oldVal)
- console.log(newVal)
- this.setMenuFlag = newVal;
- }
- },
-
- methods: {
-
- },
- mounted() {
- // mapViewer.initMap();
- }
-}
-</script>
-
-<style scoped >
-.homeBox {
- width: 100%;
- height: 100%;
- /* display: flex; */
-
-}
-
-.homeBox .threeMap {
- width: 100%;
- height: calc(100% - 48px);
- background: skyblue;
-}
-
-.homeBox .secondMapFlag {
- width: 0px;
- transition: width 1s;
-}
-
-.homeBox .secondMap {
- flex: 1;
-
-
-}
-
-.homeBox .homeHeader {
- width: 100%;
- height: 48px;
- background: #1C1C1C;
- display: flex;
- align-items: center;
-}
-
-.header_img {
- width: 30px;
- height: 30px;
- background: url('../../assets/img/logo\ 2.png')no-repeat;
- background-size: 100% 100%;
- margin-left: 16px;
-}
-
-.header_title {
- margin-left: 16px;
- height: 21px;
- font-size: 24px;
- font-family: Source Han Sans SC;
- color: white;
- line-height: 21px;
- /* background: url('../../assets/img/SE Indoor.png')no-repeat;
- background-size: 100% 100%;
- margin-left: 16px; */
-
-}
-</style>
+<template>
+ <div class="mapChart">
+ <div class="leftChart">
+ <div class="chartContent">
+ <div class="chartHeader">
+ <chartHeader></chartHeader>
+ </div>
+ <div class="chartBox">
+ <div
+ :class="
+ $store.state.setScreenFlag ? 'leftContentActive' : 'leftContent'
+ "
+ >
+ <map-chart></map-chart>
+ </div>
+ </div>
+ </div>
+ <!-- -->
+ <!-- -->
+
+ <!-- </div> -->
+ </div>
+ <div :class="$store.state.setScreenFlag ? 'rightMapActive' : 'rightMap'">
+ <map-view></map-view>
+ </div>
+ </div>
+</template>
+
+<script>
+import mapChart from "./../mapChart/index.vue";
+import mapView from "./../mapView/index.vue";
+import chartHeader from "./../mapChart/chartHeader.vue";
+export default {
+ components: {
+ mapChart,
+ mapView,
+ chartHeader
+ },
+ mounted() {}
+};
+</script>
+
+<style scoped>
+.mapChart {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ overflow: hidden;
+ background: #333333;
+}
+.leftChart {
+ flex: 1;
+}
+.chartContent {
+ width: 100%;
+ height: 100%;
+ /* background: skyblue; */
+ display: flex;
+ flex-direction: column;
+}
+.chartHeader {
+ width: 100%;
+ height: 38px;
+}
+.chartContent .chartBox {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+
+ /*
+ height: (100% - 38px);
+*/
+}
+.leftContent {
+ width: 40%;
+ height: 100%;
+ transition: 1s ease-out;
+ display: flex;
+ justify-content: center;
+ background: skyblue;
+}
+.leftContentActive {
+ width: 100%;
+ height: 100%;
+ transition: 1s ease-out;
+ background: skyblue;
+}
+.rightMapActive {
+ width: 50%;
+ height: 100%;
+ transition: 1s ease-out;
+}
+.rightMap {
+ width: 0%;
+ height: 100%;
+ transition: 1s;
+}
+.chartHeader {
+ width: 100%;
+ height: 38px;
+}
+</style>
--
Gitblit v1.9.3