显示隐藏两边功能

src/components/Map/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="containerRef" class="map-container">
-    <div id="aMap" class="map-container" :style="{ width: width, height: height }"></div>
+    <div id="aMap" class="map-container2" :style="{ width: width, height: height }"></div>
     <!-- 右下工具  -->
     <div v-show="mapState.showScale" class="zoom-text">{{ mapState.zoom }}级</div>
     <div class="right-tool">
@@ -10,10 +10,6 @@
         <div class="model-btn" @click="switchThreeDimensional">{{ mapState.isThreeDimensional ? '3D' : '2D' }}</div>
         <div class="ruler-icon" style="margin-left: 5px" @click="changeScaleControl"></div>
       </div>
-      <!-- 测距工具 -->
-      <!--<div class="model-btn" @click="toggleRangingTool">-->
-      <!--{{ isRanging ? '关闭测距' : '开启测距' }}-->
-      <!--</div>-->
     </div>
   </div>
 </template>
@@ -22,7 +18,6 @@
 import QuickZoom from './quickZoom.vue';
 import { useAMap } from '@/hooks/AMap/useAMap';
 import { useDrawTool } from '@/hooks/AMap/useDrawTool';
-import { useRuler } from '@/hooks/AMap/useRuler';
 import { getPointInfoList } from '@/api/globalMap';
 import { getDictLabel } from '@/utils/dict';
 import { PointType } from '@/api/globalMap/type';
@@ -41,6 +36,8 @@ import {
   getUAVDetails
 } from '@/api/globalMap/spatialAnalysis';
 import { pointDetailTemplate } from '@/views/globalMap/data/mapData';
+import ElementResizeDetectorMaker from 'element-resize-detector';
+import useAppStore from '@/store/modules/app';
 
 interface Props {
   activeMap: string;
@@ -51,12 +48,14 @@ const containerScale = inject('containerScale');
 const props = withDefaults(defineProps<Props>(), {});
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { point_type } = toRefs<any>(proxy?.useDict('point_type'));
+const appStore = useAppStore();
 
 const emits = defineEmits(['update:drawing', 'selectGraphics', 'unSelectGraphics', 'showTextEditBox', 'onDrawCompleted', 'handleShowVideo']);
 const containerRef = ref();
 const width = ref('100%');
 const height = ref('100%');
 
+
 const mapState = reactive({
   center: [110.93154257997, 21.669064031332],
   zoom: 15,
@@ -365,6 +364,22 @@ const handleResize = () => {
   height.value = containerHeight + 'px';
   map.resize();
 };
+watch(
+  () => appStore.showLeftSection,
+  () => {
+    nextTick(() => {
+      handleResize();
+    });
+  }
+);
+watch(
+  () => appStore.showRightSection,
+  () => {
+    nextTick(() => {
+      handleResize();
+    })
+  }
+);
 onMounted(() => {
   window.addEventListener('resize', handleResize);
 });
@@ -382,6 +397,10 @@ onUnmounted(() => {
 .map-container {
   width: 100%;
   height: 100%;
+}
+.map-container2 {
+  width: 100%;
+  height: 100%;
   position: relative;
   overflow: hidden;
   .zoom-text {
@@ -394,8 +413,8 @@ onUnmounted(() => {
   }
   .right-tool {
     position: absolute;
-    bottom: 50px;
-    right: 5px;
+    bottom: 110px;
+    right: 175px;
     z-index: 2;
   }
   .model-btn {

src/components/TimeAxis/index.vue

@@ -191,8 +191,8 @@ const dialogClose = () => {
 
 // 拖拽的参数
 const dragState = reactive({
-  bottom: 50,
-  left: 20,
+  bottom: 110,
+  left: 200,
   dragging: false,
   startX: 20,
   startY: 20,

src/store/modules/app.ts

@@ -2,6 +2,8 @@ import zhCN from 'element-plus/es/locale/lang/zh-cn';
 import enUS from 'element-plus/es/locale/lang/en';
 
 export const useAppStore = defineStore('app', () => {
+  const showLeftSection = ref(true);
+  const showRightSection = ref(true);
   const sidebarStatus = useStorage('sidebarStatus', '1');
   const sidebar = reactive({
     opened: sidebarStatus.value ? !!+sidebarStatus.value : true,
@@ -54,19 +56,28 @@ export const useAppStore = defineStore('app', () => {
   const changeLanguage = (val: string): void => {
     language.value = val;
   };
-
+  const toggleLeftSection = (): void => {
+    showLeftSection.value = !showLeftSection.value;
+  };
+  const toggleRightSection = (): void => {
+    showRightSection.value = !showRightSection.value;
+  };
   return {
     device,
     sidebar,
     language,
     locale,
     size,
+    showLeftSection,
+    showRightSection,
     changeLanguage,
     toggleSideBar,
     closeSideBar,
     toggleDevice,
     setSize,
-    toggleSideBarHide
+    toggleSideBarHide,
+    toggleLeftSection,
+    toggleRightSection
   };
 });
 

src/types/components.d.ts

@@ -23,8 +23,6 @@ declare module 'vue' {
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
-    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
-    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
@@ -51,8 +49,6 @@ declare module 'vue' {
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
     ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElSlider: typeof import('element-plus/es')['ElSlider']
-    ElStep: typeof import('element-plus/es')['ElStep']
-    ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
@@ -104,6 +100,7 @@ declare module 'vue' {
     VideoContainer: typeof import('./../components/HKVideo/video-container.vue')['default']
     VideoContainer2: typeof import('./../components/HKVideo/video-container2.vue')['default']
     YMap: typeof import('./../components/Map/YMap.vue')['default']
+    YMapold: typeof import('./../components/Map/YMapold.vue')['default']
     YztMap: typeof import('./../components/Map/YztMap/index.vue')['default']
   }
   export interface ComponentCustomProperties {

src/views/emergencyCommandMap/MiddleSection.vue

@@ -4,7 +4,7 @@
       <div class="btn" @click="handleQuery1">备战防御</div>
       <div class="btn-active" style="margin-left: 40px">指挥调度</div>
     </div>
-    <GlobalMap is-component width="3321" height="2140" />
+    <GlobalMap />
   </div>
 </template>
 

src/views/globalMap/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="globalMap">
-    <div :class="isComponent ? 'global-map' : 'global-map bg'">
+    <div class="global-map">
       <MapLogical v-if="activeMap === 'logical'" :map-data="mapData" />
 <!--      <YMap v-else-if="['satellite2', 'satellite3'].includes(activeMap)" :activeMap="activeMap" />-->
       <YztMap v-else-if="['satellite2', 'satellite3'].includes(activeMap)" ref="map2Ref" :active-map="activeMap" :pointType="pointType" />
@@ -31,16 +31,6 @@ import { getPointInfo } from '@/api/globalMap';
 import RightMenu from './RightMenu/index.vue';
 import { PointType } from '@/api/globalMap/type';
 
-interface Props {
-  isComponent?: boolean;
-  width?: string;
-  height?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  isComponent: false
-});
-
 const rightMenuRef = ref(null);
 const mapData = reactive(logicalData);
 let mapRef = ref(null);
@@ -54,7 +44,6 @@ const switchMap = (key) => {
 
 let pointType = ref<PointType[]>([]);
 let markerList = ref([]);
-
 const addMarkers = (item) => {
   const dom = activeMap.value === 'satellite2' ? map2Ref.value : mapRef.value;
   if (dom) {
@@ -177,6 +166,14 @@ const handleShowVideo = (data) => {
   location = [data.longitude, data.latitude];
   showNearbyVideos.value = true;
 };
+// const handleResize = () => {
+//   debugger
+// }
+// onMounted(() => {
+//   mapRef.value.addEventListener('resize', handleResize);
+// })
+
+
 provide('getMap', getMap);
 provide('getDrawTool', getDrawTool);
 </script>
@@ -186,10 +183,6 @@ provide('getDrawTool', getDrawTool);
   width: 100%;
   height: 100%;
 }
-.bg {
-  background: url('@/assets/images/bg.jpg') no-repeat;
-  background-size: 100% 100%;
-}
 .global-map {
   width: 100%;
   height: 100%;
@@ -197,8 +190,8 @@ provide('getDrawTool', getDrawTool);
   //overflow: hidden;
   .tool-box {
     position: absolute;
-    right: 170px;
-    bottom: 50px;
+    right: 270px;
+    bottom: 110px;
     z-index: 10;
     color: #fff;
   }

src/views/globalMapPage/index.vue

@@ -3,7 +3,7 @@
     <div class="bg">
       <HeaderSection />
       <div class="dashboard-content">
-        <GlobalMap width="8798" height="2182" />
+        <GlobalMap />
       </div>
       <FooterSection style="position: absolute; bottom: 0; left: 0" />
     </div>

src/views/routineCommandMap/LeftSection/index.vue

@@ -80,11 +80,11 @@
         </table>
       </div>
     </div>
+    <!--巡查消息弹窗-->
+    <Dialog v-model="inspectionNewsState.showListDialog" title="巡查消息列表" width="70%"></Dialog>
+    <!--事件接报弹窗-->
+    <EventManage v-model="eventManageState.showListDialog" />
   </div>
-  <!--巡查消息弹窗-->
-  <Dialog v-model="inspectionNewsState.showListDialog" title="巡查消息列表" width="70%"></Dialog>
-  <!--事件接报弹窗-->
-  <EventManage v-model="eventManageState.showListDialog" />
 </template>
 
 <script lang="ts" setup name="LeftSection">

src/views/routineCommandMap/MiddleSection.vue

@@ -1,32 +1,22 @@
 <template>
   <div class="middle-section">
+    <GlobalMap />
     <div class="btn-box">
       <div class="btn-active">备战防御</div>
       <div class="btn" style="margin-left: 40px" @click="handleQuery2">指挥调度</div>
     </div>
     <PositionMap v-if="mapDialogVisible" v-model:visible="mapDialogVisible" />
-    <GlobalMap is-component width="3894" height="2140" />
+    <slot />
   </div>
 </template>
 
 <script lang="ts" setup>
 import GlobalMap from '../globalMap/index.vue';
 import { ref } from 'vue';
-// import Dialog from "@/components/Dialog/index2.vue";
 import PositionMap from './PositionMap.vue';
 
-const form = ref({
-  eventId: '',
-  address: '',
-  lon: '',
-  lat: ''
-});
 const mapDialogVisible = ref(false);
 
-const handleQuery1 = () => {
-  console.log('备战防御被点击');
-};
-
 const handleQuery2 = () => {
   mapDialogVisible.value = true;
 };

src/views/routineCommandMap/RightSection/index.vue

@@ -29,21 +29,20 @@
         </div>
       </div>
     </div>
+    <!--预案管理弹窗-->
+    <Dialog v-model="planManageState.showListDialog" title="预案管理列表" width="70%">
+      <planManageDialog />
+    </Dialog>
+    <Dialog v-model="planManageState.showDetailDialog" title="预案管理详情" width="70%"></Dialog>
+    <!--应急知识库弹窗-->
+    <Dialog v-model="knowledgeBaseState.showListDialog" title="应急知识库列表" width="70%">
+      <KnowledgeDialog />
+    </Dialog>
+    <Dialog v-model="knowledgeBaseState.showDetailDialog" title="应急知识库详情" width="70%"></Dialog>
   </div>
-  <!--预案管理弹窗-->
-  <Dialog v-model="planManageState.showListDialog" title="预案管理列表" width="70%">
-    <planManageDialog />
-  </Dialog>
-  <Dialog v-model="planManageState.showDetailDialog" title="预案管理详情" width="70%"></Dialog>
-  <!--应急知识库弹窗-->
-  <Dialog v-model="knowledgeBaseState.showListDialog" title="应急知识库列表" width="70%">
-    <KnowledgeDialog />
-  </Dialog>
-  <Dialog v-model="knowledgeBaseState.showDetailDialog" title="应急知识库详情" width="70%"></Dialog>
 </template>
 
 <script lang="ts" setup name="RightSection">
-
 // 视频监控
 import { getEmergencyPlanList, getReportsList } from '@/api/routineCommandMap';
 import KnowledgeDialog from '@/views/routineCommandMap/RightSection/KnowledgeDialog.vue';

src/views/routineCommandMap/index.vue

@@ -3,27 +3,45 @@
     <div class="bg">
       <HeaderSection />
       <div class="dashboard-content">
-        <LeftSection />
-        <MiddleSection />
-        <RightSection />
+        <LeftSection v-show="showLeftSection" />
+        <MiddleSection>
+          <i class="left-icon" @click="handleTelescoping('left')" />
+          <i class="right-icon" @click="handleTelescoping('right')" />
+        </MiddleSection>
+        <RightSection v-show="showRightSection" />
       </div>
       <FooterSection style="position: absolute; bottom: 0; left: 0" />
     </div>
   </div>
 </template>
 
-<script lang="ts" setup name="videoList">
+<script lang="ts" setup name="routineCommandMap">
 import LeftSection from './LeftSection/index.vue';
 import RightSection from './RightSection/index.vue';
 import MiddleSection from './MiddleSection.vue';
 import autofit from 'autofit.js';
 import { getTransformScale } from '@/utils';
+import useAppStore from '@/store/modules/app';
 
+const appStore = useAppStore();
 const containerRef = ref();
 let scale = ref({ scaleX: 1, scaleY: 1 });
+let showLeftSection = computed(() => {
+  return appStore.showLeftSection;
+});
+let showRightSection = computed(() => {
+  return appStore.showRightSection;
+});
+const handleTelescoping = (type: string) => {
+  if (type === 'left') {
+    appStore.toggleLeftSection();
+  } else if (type === 'right') {
+    appStore.toggleRightSection();
+  }
+};
 provide('containerScale', () => scale.value);
 onMounted(() => {
-  if ( location.hostname != 'localhost___') {
+  if (location.hostname != 'localhost___') {
     const a = autofit.init(
       {
         dw: 8960,
@@ -39,7 +57,7 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-  if ( location.hostname != 'localhost___') {
+  if (location.hostname != 'localhost___') {
     autofit.off();
   }
 });
@@ -66,4 +84,27 @@ onUnmounted(() => {
     overflow: hidden;
   }
 }
+.left-icon {
+  position: absolute;
+  bottom: 110px;
+  left: 0;
+  z-index: 9;
+  width: 152px;
+  height: 158px;
+  background: url('@/assets/images/left.png') no-repeat;
+  background-size: 100% 100%;
+  cursor: pointer;
+}
+
+.right-icon {
+  position: absolute;
+  bottom: 110px;
+  right: 0;
+  z-index: 9;
+  width: 152px;
+  height: 158px;
+  background: url('@/assets/images/right.png') no-repeat;
+  background-size: 100% 100%;
+  cursor: pointer;
+}
 </style>