打点图标显示异常调整

src/components/Map/index.vue

@@ -394,15 +394,15 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 @import 'map.scss';
-.map-container {
-  width: 100%;
-  height: 100%;
-}
 .map-container2 {
   width: 100%;
   height: 100%;
   position: relative;
   overflow: hidden;
+}
+.map-container {
+  width: 100%;
+  height: 100%;
   .zoom-text {
     position: absolute;
     bottom: 0;

src/types/components.d.ts

@@ -100,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/LeftSection/index.vue

@@ -280,6 +280,7 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   font-size: 36px;
+  margin-right: 65px;
   .weather-card {
     width: 1922px;
     height: 230px;

src/views/emergencyCommandMap/MiddleSection.vue

@@ -5,6 +5,7 @@
       <div class="btn-active" style="margin-left: 40px">指挥调度</div>
     </div>
     <GlobalMap />
+    <slot />
   </div>
 </template>
 
@@ -19,7 +20,6 @@ const handleQuery1 = () => {
 
 <style lang="scss" scoped>
 .middle-section {
-  margin: 0 91px;
   flex: 1;
   height: 2140px;
   animation: slideAndFade 1.5s;

src/views/emergencyCommandMap/RightSection/index.vue

@@ -35,10 +35,10 @@
     <RightTop :event-id="eventId" />
     <PublicOpinionSupervision />
     <JointDuty />
+    <StartPlan v-if="startPlanState.show" v-model:show="startPlanState.show" :title="startPlanState.title" :event-id="startPlanState.eventId" />
+    <SelectPlan v-model="selectPlanState.show" :title="selectPlanState.title" :temp-event-id="eventId" @update-plan="updatePlan" />
+    <RenWuDengJi v-if="renWuDengJiState.show" v-model:show="renWuDengJiState.show" :event-id="eventId" />
   </div>
-  <StartPlan v-if="startPlanState.show" v-model:show="startPlanState.show" :title="startPlanState.title" :event-id="startPlanState.eventId" />
-  <SelectPlan v-model="selectPlanState.show" :title="selectPlanState.title" :temp-event-id="eventId" @update-plan="updatePlan" />
-  <RenWuDengJi v-if="renWuDengJiState.show" v-model:show="renWuDengJiState.show" :event-id="eventId" />
 </template>
 
 <script lang="ts" setup>
@@ -164,6 +164,7 @@ const updatePlan = (data: { eventId: string }) => {
   flex-direction: column;
   font-size: 36px;
   padding-top: 57px;
+  margin-left: 65px;
   .task-header {
     display: flex;
     justify-content: space-around; /* 使按钮在div内均匀分布 */

src/views/emergencyCommandMap/index.vue

@@ -3,9 +3,12 @@
     <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>
@@ -18,9 +21,24 @@ 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___') {
@@ -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>

src/views/globalMap/RightMenu/DrawTools.vue

@@ -345,8 +345,8 @@ const analysisSpatial = (data) => {
 <style lang="scss" scoped>
 .draw-tools-container {
   position: absolute;
-  bottom: -600px;
-  left: -6770px;
+  left: -2400px;
+  bottom: -530px;
   background-color: #304468;
   border-radius: 5px;
   display: flex;

src/views/globalMap/data/mapData.ts

@@ -4128,12 +4128,12 @@ export const iconList = {
     size: [40, 40]
   },
   '2': {
-    image: getImageUrl('2_rescue_supplies'),
+    image: getImageUrl('2_rescue_supplies.png'),
     imageHover: getImageUrl('2_rescue_supplies_hover.png'),
     size: [40, 40]
   },
   '3': {
-    image: getImageUrl('3_emergency_shelter'),
+    image: getImageUrl('3_emergency_shelter.png'),
     imageHover: getImageUrl('3_emergency_shelter_hover.png'),
     size: [19, 31]
   },
@@ -4148,8 +4148,8 @@ export const iconList = {
     size: [19, 31]
   },
   '5': {
-    image: getImageUrl('5_shcool.png'),
-    imageHover: getImageUrl('5_shcool_hover.png'),
+    image: getImageUrl('5_school.png'),
+    imageHover: getImageUrl('5_school_hover.png'),
     size: [40, 40]
   },
   '6': {

src/views/globalMap/index.vue

@@ -69,6 +69,7 @@ const addMarkers = (item) => {
       const data = res.data && res.data.list ? res.data?.list : [];
       markerList.value = data;
       data.forEach((item2) => {
+        debugger
         // 获取图标
         if (iconList[item2.dataType]) {
           item2.icon = iconList[item2.dataType].image;

src/views/routineCommandMap/LeftSection/index.vue

@@ -238,6 +238,7 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   font-size: 36px;
+  margin-right: 65px;
 }
 .card {
   width: 100%;

src/views/routineCommandMap/MiddleSection.vue

@@ -24,7 +24,6 @@ const handleQuery2 = () => {
 
 <style lang="scss" scoped>
 .middle-section {
-  margin: 0 91px;
   flex: 1;
   height: 2140px;
   animation: slideAndFade 1.5s;

src/views/routineCommandMap/RightSection/index.vue

@@ -122,6 +122,7 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   font-size: 36px;
+  margin-left: 65px;
 }
 
 .card {