blackteay/go-view
1
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-06-30 00:29:16 +08:00
Code Issues Projects Releases Wiki Activity

feat: 大屏优化

Browse Source
This commit is contained in:
huanghao1412 2024-01-10 21:03:05 +08:00
parent e85eda9b4f
commit c13a56a1c0
3 changed files with 52 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/packages/components/CustomComponents/CustomComponents/GDMap/index.vue
View File

@ -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

11
src/packages/components/CustomComponents/CustomComponents/RealTimeTraffic/index.vue
View File

@ -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'] = []

35
src/packages/components/CustomComponents/CustomComponents/Theme1/index.vue
View File

@ -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) {
// // 如果当前已经是全屏状态，则退出全屏