feat: 大屏优化

src/packages/components/CustomComponents/CustomComponents/GDMap/index.vue

@@ -91,14 +91,15 @@
         </g>
       </g>
     </svg>
-    <img :src="gdMap.propValue" :style="{transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top"/>
+    <img v-show="showImg" @load="showImg = true" :src="gdMap.propValue" :style="{transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top"/>
     <div :style="{transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top">
       <svg
         v-for="(item, i) in point"
         :key="i"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
-        style="position: absolute;outline: none;width: 22px;height: 22px;"
+        style="position: absolute;outline: none;width: 22px;height: 22px;cursor: pointer;"
+        @click="pointJump(item)"
         :style="{
           top: `${pxToPercentTop(item.style.top + 20, 911)}`,
           left: `${pxToPercentLeft(item.style.left - 220, 1400)}`,
@@ -131,12 +132,15 @@
 import { PropType, shallowReactive, watch, toRefs, reactive, onMounted, onUnmounted, nextTick, ref, computed } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { publicInterface } from '@/api/path/business.api'
-import {isPreview} from '@/utils'
+import { isPreview } from '@/utils'
 import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d";
 import {RequestHttpIntervalEnum} from "@/enums/httpEnum";
 import { useOriginStore } from '@/store/modules/originStore/originStore'
 import moment from 'moment'
 import { debounce } from "lodash";
+import { postMessageToParent } from '@/utils/utils'
+
+const showImg = ref(false)
 
 const props = defineProps({
   chartConfig: {
@@ -221,11 +225,16 @@ const getData = () => {
           })
         }
       })
-
+      console.log(point)
     }
   })
 }
 
+const pointJump = (item:any) => {
+  console.log(item)
+  postMessageToParent({type: 'changeRouterV1', url: '/' + item.dataBind.skipPath})
+}
+
 let timer:unknown
 watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), v => {
   if(!isPreview()) return

src/packages/components/CustomComponents/CustomComponents/RealTimeTraffic/index.vue

@@ -226,16 +226,17 @@ const option = reactive({
   series: [seriesItem]
 })
 
-const query = {
+
+const vChartRef = ref()
+const getData = () => {
+  const methodArr = 'handle'.split('_')
+  const query = {
     types: ['rec'],
     start_time: moment().subtract(10, 'm').format('YYYY-MM-DD HH:mm:ss'),
     end_time: moment().format('YYYY-MM-DD HH:mm:ss'),
     duration: 15,
     query_type: ''
-}
+  }
-const vChartRef = ref()
-const getData = () => {
-  const methodArr = 'handle'.split('_')
   query.types = [methodArr[0]]
   query.query_type = methodArr[1] || ''
   option.xAxis['data'] = []

src/packages/components/CustomComponents/CustomComponents/Theme1/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div :style="getStyle(borderRadius)" class="Theme1">
-    <div class="full-screen-btn" @click="toggleFullscreen">
+    <div id="fullscreenButton" class="full-screen-btn" @click="toggleFullscreen">
       <i class="iconfont icon-quanping full-screen" :title="showMoreMenuBts ? '全屏' : '退出全屏'"></i>
       {{ showMoreMenuBts ? '全屏' : '退出全屏' }}
     </div>
@@ -129,6 +129,36 @@ const weeks = ['周一', '周二', '周三', '周四', '周五', '周六', '周
 let time = ref(moment().format('HH:mm:ss ') + weeks[Number(moment().format('e'))])
 let timer: unknown
 onMounted(() => {
+  // document.getElementById('fullscreenButton')!.addEventListener('click', function() {
+  //   showMoreMenuBts.value = !showMoreMenuBts.value
+  //   // 检查是否已经处于全屏模式
+  //   if (document.fullscreenElement ||
+  //     (document as any).webkitFullscreenElement ||
+  //     (document as any).mozFullScreenElement ||
+  //     (document as any).msFullscreenElement) {
+  //     // 当前处于全屏，尝试退出全屏
+  //     if (document.exitFullscreen) {
+  //       document.exitFullscreen();
+  //     } else if ((document as any).mozCancelFullScreen) { // Firefox
+  //       (document as any).mozCancelFullScreen();
+  //     } else if ((document as any).webkitExitFullscreen) { // Chrome, Safari and Opera
+  //       (document as any).webkitExitFullscreen();
+  //     } else if ((document as any).msExitFullscreen) { // IE/Edge
+  //       (document as any).msExitFullscreen();
+  //     }
+  //   } else {
+  //     // 当前非全屏，尝试进入全屏
+  //     if (document.documentElement.requestFullscreen) {
+  //       document.documentElement.requestFullscreen();
+  //     } else if ((document.documentElement as any).mozRequestFullScreen) { // Firefox
+  //       (document.documentElement as any).mozRequestFullScreen();
+  //     } else if ((document.documentElement as any).webkitRequestFullscreen) { // Chrome, Safari and Opera
+  //       (document.documentElement as any).webkitRequestFullscreen();
+  //     } else if ((document.documentElement as any).msRequestFullscreen) { // IE/Edge
+  //       (document.documentElement as any).msRequestFullscreen();
+  //     }
+  //   }
+  // });
   if(!isPreview()) return
   timer = setInterval(() => {
     date.value = moment().format('yyyy-MM-DD')
@@ -143,8 +173,9 @@ const showMoreMenuBts = ref(true)
 // 切换全屏函数
 function toggleFullscreen() {
   postMessageToParent({type: 'fullScreen'})
+
   // console.log(document.documentElement)
-  // showMoreMenuBts.value = !showMoreMenuBts.value
+  showMoreMenuBts.value = !showMoreMenuBts.value
   //
   // if (document.fullscreenElement) {
   //   // 如果当前已经是全屏状态，则退出全屏