修改大屏

src/components/ScaleScreen/src/ScaleScreen.vue

@@ -1,9 +1,26 @@
 <template>
-  <section :style="{ ...styles.box, ...boxStyle }" class="v-screen-box">
+  <div>
-    <div :style="{ ...styles.wrapper, ...wrapperStyle }" class="screen-wrapper" ref="screenWrapper">
+    <transition name="slide">
-      <slot></slot>
+      <div
-    </div>
+        v-if="isScroll"
-  </section>
+        v-show="showTop"
+        class="fixed topTool border border-[#396684] bg-[#1c2c34cc] top-0 z-99999 flex text-white py-4px px-10px"
+      >
+        <div class="px-10px cursor-pointer" @click="handleScrollLeft">左</div>
+        <div class="px-10px cursor-pointer" @click="handleScrollCenter">中</div>
+        <div class="px-10px cursor-pointer" @click="handleScrollRight">右</div>
+      </div>
+    </transition>
+    <section ref="screenRef" :style="{ ...styles.box, ...boxStyle }" class="v-screen-box">
+      <div
+        :style="{ ...styles.wrapper, ...wrapperStyle }"
+        class="screen-wrapper"
+        ref="screenWrapper"
+      >
+        <slot></slot>
+      </div>
+    </section>
+  </div>
 </template>
 <script lang="ts">
   import {
@@ -15,6 +32,7 @@
     PropType,
     reactive,
     ref,
+    toRef,
   } from 'vue'
   /**
    * 防抖函数
@@ -41,6 +59,8 @@
     width?: string | number
     height?: string | number
     observer: null | MutationObserver
+    showTop: boolean
+    isScroll: boolean
   }
   type IAutoScale =
     | boolean
@@ -87,8 +107,11 @@
         originalWidth: 0,
         originalHeight: 0,
         observer: null,
+        showTop: false,
+        isScroll: false,
       })
-      const styles: Record<string, CSSProperties> = {
+      const screenRef = ref<HTMLElement>()
+      const styles: Record<string, CSSProperties> = reactive({
         box: {
           overflow: 'hidden',
           backgroundSize: `100% 100%`,
@@ -104,8 +127,9 @@
           overflow: `hidden`,
           zIndex: 100,
           transformOrigin: `left top`,
+          display: 'inline-block',
         },
-      }
+      })
       const screenWrapper = ref<HTMLElement>()
       /**
        * 初始化大屏容器宽高
@@ -175,7 +199,16 @@
           return false
         }
         // 按照宽高最小比例进行缩放
-        const scale = Math.min(widthScale, heightScale)
+        let scale = Math.min(widthScale, heightScale)
+        if (currentWidth < 3000) {
+          scale = heightScale
+          state.isScroll = true
+          styles.box.overflow = 'auto'
+        } else {
+          state.isScroll = false
+          styles.box.overflow = 'hidden'
+        }
+
         autoScale(scale)
       }
       const onResize = debounce(async () => {
@@ -193,20 +226,63 @@
           attributeOldValue: true,
         })
       }
+      const onMouseUpdate = (e) => {
+        if (e.pageY <= 30) state.showTop = true
+        else state.showTop = false
+      }
       onMounted(() => {
         nextTick(async () => {
           await initSize()
           updateSize()
           updateScale()
           window.addEventListener('resize', onResize)
+          window.addEventListener('mousemove', onMouseUpdate)
           initMutationObserver()
         })
       })
       onUnmounted(() => {
         window.removeEventListener('resize', onResize)
+        window.removeEventListener('mousemove', onMouseUpdate)
         state.observer?.disconnect()
       })
-      return { screenWrapper, styles }
+
+      const handleScrollLeft = () => {
+        nextTick(() => {
+          screenRef.value?.scrollTo({ left: 0, behavior: 'smooth' })
+        })
+      }
+      const handleScrollCenter = () => {
+        nextTick(() => {
+          screenRef.value?.scrollTo({
+            left: (screenRef.value?.scrollWidth ?? 0) / 2 - document.body.clientWidth / 2,
+            behavior: 'smooth',
+          })
+        })
+      }
+      const handleScrollRight = () => {
+        nextTick(() => {
+          screenRef.value?.scrollTo({ left: screenRef.value?.scrollWidth, behavior: 'smooth' })
+        })
+      }
+
+      const showTop = toRef(state, 'showTop')
+      const isScroll = toRef(state, 'isScroll')
+      return {
+        screenWrapper,
+        styles,
+        isScroll,
+        showTop,
+        screenRef,
+        handleScrollLeft,
+        handleScrollCenter,
+        handleScrollRight,
+      }
     },
   })
 </script>
+<style scoped lang="less">
+  .topTool {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+</style>

src/views/visualization/MapModal.vue

@@ -154,6 +154,7 @@
       const year = computed(() => visualizationStore.getYear)
 
       const getContainer = () => {
+        if (document.body.clientWidth < 3000) return document.body
         return document.body.querySelector(`.modelRef`)
       }
 

src/views/visualization/components/CModal.vue

@@ -68,6 +68,7 @@
     unref,
     watchEffect,
     watch,
+    nextTick,
   } from 'vue'
   import type { TabsProps } from 'ant-design-vue'
   import { getCates, getCropYieldQuarterStatics } from '/@/api/sys/other'
@@ -318,6 +319,7 @@
       })
 
       const getContainer = () => {
+        if (document.body.clientWidth < 3000) return document.body
         return document.body.querySelector(`.cmodal`)
       }
 
@@ -329,7 +331,9 @@
         (e) => {
           if (e) {
             ppName.value = props.pName ?? props.name
-            getTabs()
+            nextTick(() => {
+              getTabs()
+            })
           }
         },
       )

src/views/visualization/index.vue

@@ -152,6 +152,7 @@
             color: '#fff',
           },
           getContainer: (): any => {
+            if (document.body.clientWidth < 3000) return document.body
             return document.body.querySelector(`.visualization—xx`)
           },
           description: message,