fix：增加svg全屏功能

src/views/dashboard/demo/components/staticSvg.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { watch } from 'vue'
+import { ref, watch } from 'vue'
 import { Card } from 'ant-design-vue'
+import ExpandAltOutlined from '@ant-design/icons-vue/ExpandAltOutlined'
 import Svg from './svg.vue'
 
 const props = defineProps({
@@ -9,20 +10,34 @@ const props = defineProps({
     default: () => {},
   },
 })
+const path = ref<string>('')
 
 watch(
   () => props.data,
   (newValue, oldValue) => {
     // 下方信息不会打印在控制台中
     console.log('a has changed', newValue, oldValue)
+    path.value = newValue.path
   },
 )
+
+const svgRef: any = ref(null)
+
+function fullScreen() {
+  // 检查子组件实例是否已经挂载
+  if (svgRef.value) {
+    // 通过 .value 访问子组件实例，并调用其暴露的方法
+    svgRef.value.toggleFullscreen()
+  }
+}
 </script>
 
 <template>
   <Card class="enter-y !my-1" :title="props.data.Header">
-    <!-- <img class="mx-auto h-full w-full" :src="props.data.path"> -->
+    <template #extra>
-    <Svg :data="props.data.path" />
+      <ExpandAltOutlined style="cursor:pointer" @click="fullScreen" />
+    </template>
+    <Svg ref="svgRef" :path="path" />
   </Card>
 </template>
 

src/views/dashboard/demo/components/svg copy.vue

@@ -1,63 +1,65 @@
 <script lang="ts" setup>
-import { nextTick, onMounted, onUnmounted, ref, toRefs, watch } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { getEXANowListReal } from '@/api/alert/exa'
 
 const props = defineProps<{
-  data: string
+  path: string
+  default: ''
+
 }>()
 
-const { data } = toRefs(props)
+// const { data } = toRefs(props)
 const svgContent = ref<string>('')
-const isLoading = ref<boolean>(true)
 const svgError = ref<string>('')
 const point = ref<{ itemNameArray: string[] }>({ itemNameArray: [] })
-const pointElements = ref<NodeListOf<SVGElement> | undefined>()
+// const pointElements = ref<NodeListOf<SVGElement> | undefined>()
+// 监听数据变化
+watch(
+  () => props.path,
+  (newValue, oldValue) => {
+    // 下方信息不会打印在控制台中
+    console.log('a has changed', newValue)
+    if (newValue !== oldValue && newValue !== '' && newValue != null)
+      loadSvg()
+  },
+  { immediate: true },
 
-let updateInterval: number | undefined
+)
 // 加载SVG文件
 async function loadSvg() {
-  if (!data.value) {
+  console.log('加载SVG文件...')
+  if (!props.path) {
     svgError.value = '未提供SVG路径'
-    isLoading.value = false
     return
   }
 
-  isLoading.value = true
   svgError.value = ''
-
+  try {
   // 判断路径是否为完整URL
-  let url = data.value
+    let url = props.path
-  if (!url.startsWith('http') && !url.startsWith('/')) {
+    if (!url.startsWith('http') && !url.startsWith('/')) {
     // 如果是相对路径，尝试从assets加载
-    url = new URL(`../../../../assets/${url}`, import.meta.url).href
+      url = new URL(`../../../../assets/${url}`, import.meta.url).href
-  }
+    }
 
-  const response = await fetch(url)
+    // 添加时间戳参数以清除浏览器缓存
-  if (!response.ok)
+    const timestamp = new Date().getTime()
-    throw new Error(`无法加载SVG: ${response.statusText}`)
+    if (url.includes('?'))
+      url += `&t=${timestamp}`
+    else
+      url += `?t=${timestamp}`
 
-  svgContent.value = await response.text()
+    const response = await fetch(url)
-  const svgElement = document.querySelector('.svg-container > svg')
-  svgElement?.removeAttribute('width')
-  svgElement?.removeAttribute('height')
 
-  try {
+    if (!response.ok)
-    // 获取SVG元素
+      throw new Error(`无法加载SVG: ${response.statusText}`)
-    const svgElement = document.querySelector('.svg-container > svg')
-    if (!svgElement)
-      return
 
-    // 处理拥有point-name属性的元素
+    svgContent.value = await response.text()
-    pointElements.value = svgElement.querySelectorAll('[point-name]')
-    const pointList: string[] = []
-    pointElements.value.forEach(async (element) => {
-      const pointName = element.getAttribute('point-name')
-      pointName && pointList.push(pointName)
-    })
-    point.value = { itemNameArray: pointList }
 
     // 等待DOM更新后应用实时数据
     await nextTick()
+    document.querySelector('.svg-container > svg')?.removeAttribute('width')
+    document.querySelector('.svg-container > svg')?.removeAttribute('height')
 
     // updateRealtimeValues()
   }
@@ -65,31 +67,47 @@ async function loadSvg() {
     console.error('加载SVG失败:', error)
     svgError.value = `加载失败: ${error instanceof Error ? error.message : String(error)}`
   }
-  finally {
-    isLoading.value = false
-  }
 }
 
 // 更新SVG中的实时数据
 async function updateRealtimeValues() {
-  if (!svgContent.value || isLoading.value)
+  if (!svgContent.value)
     return
   try {
+    const svgElement = document.querySelector('.svg-container > svg')
+    svgElement?.removeAttribute('width')
+    svgElement?.removeAttribute('height')
+    // 获取SVG元素
+    if (!svgElement)
+      return
+
+    // 处理拥有point-name属性的元素
+    const pointElements = svgElement.querySelectorAll('[point-name]')
+    const pointList: string[] = []
+
+    // 使用同步方式收集point-name
+    pointElements.forEach((element) => {
+      const pointName = element.getAttribute('point-name')
+      if (pointName)
+        pointList.push(pointName)
+    })
+
+    point.value = { itemNameArray: pointList }
     const res = await getEXANowListReal(point.value)
 
-    if (res.ReturnValue && res.ReturnValue === 1) {
+    if (res && res.ReturnValue === 1 && res.ValueArray) {
-      const data = res.ValueArray
+      const dataValues = res.ValueArray
-      console.log(data)
+
-      if (pointElements.value) {
+      if (pointElements) {
-        pointElements.value.forEach((element, index) => {
+        pointElements.forEach((element, index) => {
-          console.log(element)
+          // 不区分大小写比较标签名
-          console.log(element.tagName)
+          const value = dataValues[index] || ''
 
-          // 根据元素类型设置不同的属性
+          // 设置文本内容，不再受标签名条件限制
-          if (element.tagName === 'text' || element.tagName === 'tspan' || element.tagName === 'DIV')
+          element.textContent = String(value)
-            console.log(element.tagName)
 
-          element.textContent = String(data[index] || '')
+          // 同时设置data-value属性便于调试和样式控制
+          element.setAttribute('data-value', String(value))
         })
       }
     }
@@ -99,38 +117,74 @@ async function updateRealtimeValues() {
   }
 }
 
-// 监听数据变化
+const updateInterval = ref<NodeJS.Timeout | null>(null)
-watch(
-  () => data.value,
-  () => {
-    loadSvg()
-  },
-  { immediate: true },
-)
 
 onMounted(() => {
-  loadSvg()
+  // 设置定时器并保存引用，以便在组件卸载时清除
-  // updateRealtimeValues()
+  updateInterval.value = setInterval(() => {
-  setInterval(() => {
+    console.log('定时更新数据...')
     updateRealtimeValues()
-  }, 3000) // 每2秒更新一次实时数据
+  }, 1000)
 })
 
 onUnmounted(() => {
   // 清理定时器等资源
-  clearInterval(updateInterval)
+  clearInterval(updateInterval.value!)
 })
+
+//  全屏方案
+function toggleFullscreen() {
+  const container = $refs.svgContainer
+  if (isFullscreen())
+    exitFullscreen()
+  else
+    this.requestFullscreen(container)
+}
+// 检查当前是否处于全屏状态
+function isFullscreen() {
+  return document.fullscreenElement
+                || document.mozFullScreenElement
+                || document.webkitFullscreenElement
+                || document.msFullscreenElement
+}
+// 打开全屏
+function requestFullscreen(element) {
+  if (element.requestFullscreen) {
+    element.requestFullscreen()
+  }
+  else if (element.mozRequestFullScreen) { // Firefox
+    element.mozRequestFullScreen()
+  }
+  else if (element.webkitRequestFullscreen) { // Chrome, Safari and Opera
+    element.webkitRequestFullscreen()
+  }
+  else if (element.msRequestFullscreen) { // IE/Edge
+    element.msRequestFullscreen()
+  }
+}
+// 关闭全屏
+function exitFullscreen() {
+  if (document.exitFullscreen) {
+    document.exitFullscreen()
+  }
+  else if (document.mozCancelFullScreen) { // Firefox
+    document.mozCancelFullScreen()
+  }
+  else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
+    document.webkitExitFullscreen()
+  }
+  else if (document.msExitFullscreen) { // IE/Edge
+    document.msExitFullscreen()
+  }
+}
 </script>
 
 <template>
   <!-- <Card class="enter-y !my-1" :title="data.Header || 'SVG可视化'"> -->
-  <div v-if="isLoading" class="h-40 flex items-center justify-center">
+  <div v-if="svgError" class="h-40 flex items-center justify-center text-red-500">
-    加载中...
-  </div>
-  <div v-else-if="svgError" class="h-40 flex items-center justify-center text-red-500">
     {{ svgError }}
   </div>
-  <div v-else class="svg-container" @click="updateRealtimeValues" v-html="svgContent" />
+  <div v-else class="svg-container" v-html="svgContent" />
   <!-- </Card> -->
 </template>
 
@@ -146,12 +200,6 @@ onUnmounted(() => {
   justify-content: center;
   width: 100%;
   height: 100%;
-  min-height: 300px;
   cursor: pointer; /* 点击时可以手动触发数据更新 */
 }
-
-.svg-container > svg {
-  max-width: 100%;
-  max-height: 100%;
-}
 </style>

src/views/dashboard/demo/components/svg.vue

@@ -1,44 +1,43 @@
 <script lang="ts" setup>
-import { nextTick, onMounted, onUnmounted, ref, toRefs, watch } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { getEXANowListReal } from '@/api/alert/exa'
 
 const props = defineProps<{
-  data: string
+  path: string
 }>()
 
-const { data } = toRefs(props)
+// 定义SVG容器的引用
+const svgContainer = ref<HTMLElement>()
+
+// const { data } = toRefs(props)
 const svgContent = ref<string>('')
-const isLoading = ref<boolean>(true)
 const svgError = ref<string>('')
 const point = ref<{ itemNameArray: string[] }>({ itemNameArray: [] })
 // const pointElements = ref<NodeListOf<SVGElement> | undefined>()
 // 监听数据变化
 watch(
-  () => data.value,
+  () => props.path,
   (newValue, oldValue) => {
     // 下方信息不会打印在控制台中
     console.log('a has changed', newValue)
     if (newValue !== oldValue && newValue !== '' && newValue != null)
       loadSvg()
   },
+  { immediate: true },
 
 )
 // 加载SVG文件
 async function loadSvg() {
   console.log('加载SVG文件...')
-  console.log(data.value)
+  if (!props.path) {
-
-  if (!data.value) {
     svgError.value = '未提供SVG路径'
-    isLoading.value = false
     return
   }
 
-  isLoading.value = true
   svgError.value = ''
   try {
   // 判断路径是否为完整URL
-    let url = data.value
+    let url = props.path
     if (!url.startsWith('http') && !url.startsWith('/')) {
     // 如果是相对路径，尝试从assets加载
       url = new URL(`../../../../assets/${url}`, import.meta.url).href
@@ -69,16 +68,10 @@ async function loadSvg() {
     console.error('加载SVG失败:', error)
     svgError.value = `加载失败: ${error instanceof Error ? error.message : String(error)}`
   }
-  finally {
-    isLoading.value = false
-  }
 }
 
 // 更新SVG中的实时数据
 async function updateRealtimeValues() {
-  console.log('更新SVG实时数据...', Boolean(svgContent.value))
-  console.log('更新SVG实时数据...', Boolean(isLoading.value))
-
   if (!svgContent.value)
     return
   try {
@@ -109,7 +102,6 @@ async function updateRealtimeValues() {
       if (pointElements) {
         pointElements.forEach((element, index) => {
           // 不区分大小写比较标签名
-          const tagName = element.tagName.toLowerCase()
           const value = dataValues[index] || ''
 
           // 设置文本内容，不再受标签名条件限制
@@ -140,32 +132,144 @@ onUnmounted(() => {
   // 清理定时器等资源
   clearInterval(updateInterval.value!)
 })
+
+//  全屏方案
+function toggleFullscreen() {
+  const container = svgContainer.value
+  if (!container)
+    return
+
+  if (isFullscreen())
+    exitFullscreen()
+  else
+    requestFullscreen(container)
+}
+// 检查当前是否处于全屏状态
+function isFullscreen() {
+  return document.fullscreenElement
+                || document.mozFullScreenElement
+                || document.webkitFullscreenElement
+                || document.msFullscreenElement
+}
+// 打开全屏
+function requestFullscreen(element) {
+  if (element.requestFullscreen) {
+    element.requestFullscreen()
+  }
+  else if (element.mozRequestFullScreen) { // Firefox
+    element.mozRequestFullScreen()
+  }
+  else if (element.webkitRequestFullscreen) { // Chrome, Safari and Opera
+    element.webkitRequestFullscreen()
+  }
+  else if (element.msRequestFullscreen) { // IE/Edge
+    element.msRequestFullscreen()
+  }
+}
+// 关闭全屏
+function exitFullscreen() {
+  if (document.exitFullscreen) {
+    document.exitFullscreen()
+  }
+  else if (document.mozCancelFullScreen) { // Firefox
+    document.mozCancelFullScreen()
+  }
+  else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
+    document.webkitExitFullscreen()
+  }
+  else if (document.msExitFullscreen) { // IE/Edge
+    document.msExitFullscreen()
+  }
+}
+
+// 2. 使用 defineExpose 将 greet 方法暴露给父组件
+defineExpose({
+  toggleFullscreen,
+})
 </script>
 
 <template>
-  <!-- <Card class="enter-y !my-1" :title="data.Header || 'SVG可视化'"> -->
+  <div class="svg-wrapper">
-  <div v-if="isLoading" class="h-40 flex items-center justify-center">
+    <!-- 控制栏
-    加载中...
+    <div class="svg-controls">
-  </div>
+      <h3 class="svg-title">
-  <div v-else-if="svgError" class="h-40 flex items-center justify-center text-red-500">
+        SVG可视化
-    {{ svgError }}
+      </h3>
+      <button class="fullscreen-btn" title="切换全屏" @click="toggleFullscreen">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
+        </svg>
+      </button>
+    </div> -->
+
+    <!-- SVG内容 -->
+    <div v-if="svgError" class="h-40 flex items-center justify-center text-red-500">
+      {{ svgError }}
+    </div>
+    <div v-else ref="svgContainer" class="svg-container" v-html="svgContent" />
   </div>
-  <div v-else class="svg-container" v-html="svgContent" />
-  <!-- </Card> -->
 </template>
 
 <style scoped>
-::v-deep .ant-card-body {
+.svg-wrapper {
-  padding: 10px;
+  border: 1px solid #e8e8e8;
-  overflow: auto;
+  border-radius: 6px;
+  overflow: hidden;
 }
 
+/* .svg-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 16px;
+  background-color: #f5f5f5;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.svg-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+} */
+
 .svg-container {
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 100%;
+  height:100%;
+  min-height: 300px;
+  padding: 10px;
+  overflow: auto;
+}
+
+/* 全屏状态样式 */
+:global(.svg-wrapper:fullscreen),
+:global(.svg-wrapper:-webkit-full-screen),
+:global(.svg-wrapper:-moz-full-screen),
+:global(.svg-wrapper:-ms-fullscreen) {
   width: 100%;
   height: 100%;
-  cursor: pointer; /* 点击时可以手动触发数据更新 */
+  display: flex;
+  flex-direction: column;
+  border: none;
+  border-radius: 0;
+}
+
+:global(.svg-wrapper:fullscreen) .svg-container,
+:global(.svg-wrapper:-webkit-full-screen) .svg-container,
+:global(.svg-wrapper:-moz-full-screen) .svg-container,
+:global(.svg-wrapper:-ms-fullscreen) .svg-container {
+  flex: 1;
+  padding: 20px;
+  width:100%;
+  height:100%;
+}
+
+/* SVG内容自适应 */
+.svg-container > svg {
+  max-width: 100%;
+  max-height: 100%;
 }
 </style>

src/views/dashboard/demo/index copy.vue

@@ -1,68 +0,0 @@
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue'
-import WorkbenchHeader from './components/WorkbenchHeader.vue'
-import ProjectCard from './components/ProjectCard.vue'
-import DynamicInfo from './components/DynamicInfo.vue'
-import StaticImg from './components/staticImg.vue'
-import ParameterInfo from './components/ParameterInfo.vue'
-import Operation from './components/Operation.vue'
-import data from './components/demo.json'
-import { PageWrapper } from '@/components/Page'
-
-const loading = ref(true)
-
-onMounted(() => {
-  const htmlRoot = document.getElementsByClassName('workbench')
-  // let theme = window.localStorage.getItem('__APP__DARK__MODE__')
-  const theme = 'dark'
-
-  if (htmlRoot && theme) {
-    for (let i = 0; i < htmlRoot.length; i++)
-      htmlRoot[i].setAttribute('data-theme', theme)
-  }
-  // theme = htmlRoot = null
-})
-
-setTimeout(() => {
-  loading.value = false
-}, 500)
-</script>
-
-<template>
-  <div class="workbench m-1" data-theme="light">
-    <WorkbenchHeader class="workbench m-1" data-theme="light" :data="data" />
-    <div class="enter-y workbench h-92 md:flex" data-theme="light">
-      <StaticImg data-theme="light" class="workbench m-1 w-full md:w-1/4" :loading="loading" :data="data.LeftUp" />
-      <ProjectCard data-theme="light" class="enter-y workbench m-1 w-full md:w-1/2" :loading="loading" :data="data.LeftMidUp" />
-      <div class="enter-y w-full !mr-4 md:w-1/4">
-        <DynamicInfo :loading="loading" data-theme="light" class="workbench enter-y m-1 h-35 w-full" :data="data.RightMidUp" />
-        <Operation data-theme="light" class="workbench enter-y m-1 h-54 w-full" :loading="loading" :data="data.RightUp" />
-      </div>
-    </div>
-    <div class="enter-y workbench h-95 md:flex" data-theme="light">
-      <StaticImg data-theme="light" class="workbench m-1 w-full md:w-1/2" :loading="loading" :data="data.LeftDown" />
-      <ParameterInfo data-theme="light" class="workbench m-1 w-full md:w-1/2" :loading="loading" :data="data.RightDown" />
-    </div>
-    <!-- <div class="enter-y w-full !mr-4 lg:w-7/10">
-        <StaticImg :loading="loading" :data="data.LeftUp" class="enter-y" />
-      </div> -->
-
-    <!-- <div class="enter-y w-full !mr-4 lg:w-7/10">
-        <ProjectCard :loading="loading" class="enter-y" />
-        <DynamicInfo :loading="loading" class="enter-y !my-4" />
-      </div>
-      <div class="enter-y w-full lg:w-3/10">
-        <QuickNav :loading="loading" class="enter-y" />
-
-        <Card class="enter-y !my-4" :loading="loading">
-          <img class="mx-auto h-30 xl:h-50" src="@/assets/svg/illustration.svg">
-        </Card>
-
-        <SaleRadar :loading="loading" class="enter-y" />
-      </div> -->
-  </div>
-</template>
-
-<style lang="less">
-
-</style>