From d56f913e538030946051448c885b7951c268ccf5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=82=96=E6=99=8B=E9=A3=9E?= <378266566@qq.com>
Date: Tue, 28 Oct 2025 01:19:31 +0800
Subject: [PATCH] =?UTF-8?q?fix:svg=E8=AF=BB=E5=AE=9E=E6=97=B6=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demo/components/ParameterInfo.vue         |   2 -
 .../dashboard/demo/components/ProjectCard.vue |   3 -
 .../dashboard/demo/components/staticImg.vue   |   1 -
 .../dashboard/demo/components/staticSvg.vue   | 106 +-------
 .../dashboard/demo/components/svg copy.vue    | 157 ++++++++++++
 src/views/dashboard/demo/components/svg.vue   | 226 +++++++-----------
 src/views/dashboard/demo/index.vue            |   5 +-
 7 files changed, 253 insertions(+), 247 deletions(-)
 create mode 100644 src/views/dashboard/demo/components/svg copy.vue

diff --git a/src/views/dashboard/demo/components/ParameterInfo.vue b/src/views/dashboard/demo/components/ParameterInfo.vue
index 22a87e3..1e390a1 100644
--- a/src/views/dashboard/demo/components/ParameterInfo.vue
+++ b/src/views/dashboard/demo/components/ParameterInfo.vue
@@ -21,13 +21,11 @@ watch(
   },
 )
 function getInterval(record: any) {
-  console.log(record)
   if (record.predictValue === '-')
     return '-'
   record.predictValue = Number(record.predictValue).toFixed(2)
 
   const threshold = record.ResidualThreshold
-  console.log(threshold)
   const predictValue = record.predictValue || 0
   return `[${Number(predictValue) - threshold},${Number(predictValue) + threshold}]`
 }
diff --git a/src/views/dashboard/demo/components/ProjectCard.vue b/src/views/dashboard/demo/components/ProjectCard.vue
index 20a26c8..5a7b135 100644
--- a/src/views/dashboard/demo/components/ProjectCard.vue
+++ b/src/views/dashboard/demo/components/ProjectCard.vue
@@ -32,15 +32,12 @@ async function getNewData() {
         ifColor = res === '1'
 
       gridData.value.push(Object.assign({}, item, { ifColor }))
-
-      console.log(gridData.value)
     }
     catch (e) {
     }
   }
 }
 
-
 // 页面挂载时批量请求并更新数据（避免在模板中调用异步）
 // onMounted(async () => {
 //   const rows = props.data.Content || []
diff --git a/src/views/dashboard/demo/components/staticImg.vue b/src/views/dashboard/demo/components/staticImg.vue
index d53ec8a..3073ac0 100644
--- a/src/views/dashboard/demo/components/staticImg.vue
+++ b/src/views/dashboard/demo/components/staticImg.vue
@@ -25,7 +25,6 @@ watch(
 )
 function getAssetsFile() {
   const url = props.data.path
-  console.log(url)
   return new URL(`../../../../assets/${url}`, import.meta.url).href
 }
 </script>
diff --git a/src/views/dashboard/demo/components/staticSvg.vue b/src/views/dashboard/demo/components/staticSvg.vue
index eae6e26..bae9513 100644
--- a/src/views/dashboard/demo/components/staticSvg.vue
+++ b/src/views/dashboard/demo/components/staticSvg.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { watch } from 'vue'
 import { Card } from 'ant-design-vue'
 import Svg from './svg.vue'
 
@@ -10,121 +10,19 @@ const props = defineProps({
   },
 })
 
-// 模拟实时数据
-const realtimeData = ref({
-  path: '/送风机.svg',
-  // Header: 'SVG实时数据可视化示例',
-  realtimeValues: {
-    'current-value': 0,
-    'status-text': '状态: 正常',
-    'status-indicator': 'normal',
-  },
-  valueMapping: {
-    'current-value': 'current-value',
-    'status-text': 'status-text',
-  },
-})
-
-// 模拟数据更新的定时器
-let updateTimer: number | null = null
-
-// 生成随机数据更新
-function updateData() {
-  // 生成0-100的随机值
-  const newValue = Math.floor(Math.random() * 101)
-
-  // // 根据值设置状态
-  // let status = '正常'
-  // let statusColor = '#52c41a'
-
-  // if (newValue > 90) {
-  //   status = '危险'
-  //   statusColor = '#ff4d4f'
-  // }
-  // else if (newValue > 70) {
-  //   status = '警告'
-  //   statusColor = '#faad14'
-  // }
-
-  // 更新数据
-  realtimeData.value.realtimeValues = {
-    'current-value': newValue,
-    // 'status-text': `状态: ${status}`,
-    // 'status-indicator': status.toLowerCase(),
-  }
-
-  // 更新指针角度（0-100映射到-135到135度）
-  const angle = -135 + (newValue / 100) * 270
-  const svgElement = document.querySelector('.svg-container > svg')
-  // svgElement?.removeAttribute('width')
-  // svgElement?.removeAttribute('height')
-  if (svgElement) {
-    const pointer = svgElement.getElementById('pointer')
-    if (pointer)
-      pointer.setAttribute('transform', `rotate(${angle} 200 150)`)
-
-    // 更新状态指示器颜色
-    const statusIndicator = svgElement.getElementById('status-indicator')
-    if (statusIndicator)
-      statusIndicator.setAttribute('fill', statusColor)
-  }
-}
-
-// 生命周期钩子
-onMounted(() => {
-  // 立即更新一次
-  updateData()
-
-  // 设置定时器，每2秒更新一次数据
-  updateTimer = window.setInterval(updateData, 2000)
-})
 watch(
   () => props.data,
   (newValue, oldValue) => {
     // 下方信息不会打印在控制台中
     console.log('a has changed', newValue, oldValue)
-    realtimeData.value.path = props.data.path
   },
 )
-onUnmounted(() => {
-  // 清理定时器
-  if (updateTimer)
-    clearInterval(updateTimer)
-})
 </script>
 
 <template>
-  <!-- <div class="svg-demo-container"> -->
-  <!-- <div class="demo-header">
-      <h2>SVG实时数据可视化演示</h2>
-      <p>这个演示展示了如何嵌入SVG并实时更新其中的数据。数据每2秒自动更新一次，也可以点击下方按钮手动更新。</p>
-      <button
-        class="update-btn"
-        @click="manualUpdate"
-      >
-        手动更新数据
-      </button>
-    </div>
-
-    <div class="demo-content">
-      <Svg :data="realtimeData" />
-    </div>
-
-    <div class="demo-info">
-      <h3>使用说明</h3>
-      <ul>
-        <li>1. 将SVG文件放在项目的assets/svg目录下</li>
-        <li>2. 在父组件中准备数据对象，包含SVG路径、实时值和映射关系</li>
-        <li>3. SVG中的元素需要有唯一的ID，以便与数据进行绑定</li>
-        <li>4. 组件支持自动监听数据变化并更新SVG内容</li>
-        <li>5. 可以通过点击SVG区域手动触发数据更新</li>
-      </ul>
-    </div>
-  </div> -->
-  <!-- </div> -->
   <Card class="enter-y !my-1" :title="props.data.Header">
     <!-- <img class="mx-auto h-full w-full" :src="props.data.path"> -->
-    <Svg class="h-full w-full" :data="realtimeData" />
+    <Svg :data="props.data.path" />
   </Card>
 </template>
 
diff --git a/src/views/dashboard/demo/components/svg copy.vue b/src/views/dashboard/demo/components/svg copy.vue
new file mode 100644
index 0000000..5cabb3a
--- /dev/null
+++ b/src/views/dashboard/demo/components/svg copy.vue	
@@ -0,0 +1,157 @@
+<script lang="ts" setup>
+import { nextTick, onMounted, onUnmounted, ref, toRefs, watch } from 'vue'
+import { getEXANowListReal } from '@/api/alert/exa'
+
+const props = defineProps<{
+  data: string
+}>()
+
+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>()
+
+let updateInterval: number | undefined
+// 加载SVG文件
+async function loadSvg() {
+  if (!data.value) {
+    svgError.value = '未提供SVG路径'
+    isLoading.value = false
+    return
+  }
+
+  isLoading.value = true
+  svgError.value = ''
+
+  // 判断路径是否为完整URL
+  let url = data.value
+  if (!url.startsWith('http') && !url.startsWith('/')) {
+    // 如果是相对路径，尝试从assets加载
+    url = new URL(`../../../../assets/${url}`, import.meta.url).href
+  }
+
+  const response = await fetch(url)
+  if (!response.ok)
+    throw new Error(`无法加载SVG: ${response.statusText}`)
+
+  svgContent.value = await response.text()
+  const svgElement = document.querySelector('.svg-container > svg')
+  svgElement?.removeAttribute('width')
+  svgElement?.removeAttribute('height')
+
+  try {
+    // 获取SVG元素
+    const svgElement = document.querySelector('.svg-container > svg')
+    if (!svgElement)
+      return
+
+    // 处理拥有point-name属性的元素
+    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()
+
+    // updateRealtimeValues()
+  }
+  catch (error) {
+    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)
+    return
+  try {
+    const res = await getEXANowListReal(point.value)
+
+    if (res.ReturnValue && res.ReturnValue === 1) {
+      const data = res.ValueArray
+      console.log(data)
+      if (pointElements.value) {
+        pointElements.value.forEach((element, index) => {
+          console.log(element)
+          console.log(element.tagName)
+
+          // 根据元素类型设置不同的属性
+          if (element.tagName === 'text' || element.tagName === 'tspan' || element.tagName === 'DIV')
+            console.log(element.tagName)
+
+          element.textContent = String(data[index] || '')
+        })
+      }
+    }
+  }
+  catch (error) {
+    console.error('更新实时数据失败:', error)
+  }
+}
+
+// 监听数据变化
+watch(
+  () => data.value,
+  () => {
+    loadSvg()
+  },
+  { immediate: true },
+)
+
+onMounted(() => {
+  loadSvg()
+  // updateRealtimeValues()
+  setInterval(() => {
+    updateRealtimeValues()
+  }, 3000) // 每2秒更新一次实时数据
+})
+
+onUnmounted(() => {
+  // 清理定时器等资源
+  clearInterval(updateInterval)
+})
+</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>
+  <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" />
+  <!-- </Card> -->
+</template>
+
+<style scoped>
+::v-deep .ant-card-body {
+  padding: 10px;
+  overflow: auto;
+}
+
+.svg-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-height: 300px;
+  cursor: pointer; /* 点击时可以手动触发数据更新 */
+}
+
+.svg-container > svg {
+  max-width: 100%;
+  max-height: 100%;
+}
+</style>
diff --git a/src/views/dashboard/demo/components/svg.vue b/src/views/dashboard/demo/components/svg.vue
index 0becb8e..b6c5ebb 100644
--- a/src/views/dashboard/demo/components/svg.vue
+++ b/src/views/dashboard/demo/components/svg.vue
@@ -1,43 +1,47 @@
 <script lang="ts" setup>
-import { Card } from 'ant-design-vue'
-import { nextTick, onMounted, ref, toRefs, watch } from 'vue'
-
-interface SvgData {
-  path: string // SVG文件路径
-  Header?: string // 卡片标题
-  realtimeValues?: Record<string, any> // 实时数据对象
-  valueMapping?: Record<string, string> // SVG元素ID到数据字段的映射
-}
+import { nextTick, onMounted, onUnmounted, ref, toRefs, watch } from 'vue'
+import { getEXANowListReal } from '@/api/alert/exa'
 
 const props = defineProps<{
-  data: SvgData
+  data: string
 }>()
 
 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>()
 
+let updateInterval: NodeJS.Timeout | undefined
 // 加载SVG文件
 async function loadSvg() {
-  if (!data.value.path) {
+  if (!data.value) {
     svgError.value = '未提供SVG路径'
     isLoading.value = false
     return
   }
 
+  isLoading.value = true
+  svgError.value = ''
   try {
-    isLoading.value = true
-    svgError.value = ''
-
-    // 判断路径是否为完整URL
-    let url = data.value.path
+  // 判断路径是否为完整URL
+    let url = data.value
     if (!url.startsWith('http') && !url.startsWith('/')) {
-      // 如果是相对路径，尝试从assets加载
+    // 如果是相对路径，尝试从assets加载
       url = new URL(`../../../../assets/${url}`, import.meta.url).href
     }
 
+    // 添加时间戳参数以清除浏览器缓存
+    const timestamp = new Date().getTime()
+    if (url.includes('?'))
+      url += `&t=${timestamp}`
+    else
+      url += `?t=${timestamp}`
+
     const response = await fetch(url)
+    console.log(response)
+
     if (!response.ok)
       throw new Error(`无法加载SVG: ${response.statusText}`)
 
@@ -45,27 +49,11 @@ async function loadSvg() {
 
     // 等待DOM更新后应用实时数据
     await nextTick()
+    console.log(document.querySelector('.svg-container > svg'))
+    document.querySelector('.svg-container > svg')?.removeAttribute('width')
+    document.querySelector('.svg-container > svg')?.removeAttribute('height')
 
-    // 处理SVG的viewBox和尺寸属性以实现自适应
-    const svgElement = document.querySelector('.svg-container > svg')
-    if (svgElement) {
-      // 移除固定的width和height属性，让SVG由CSS控制大小
-      svgElement.removeAttribute('width')
-      svgElement.removeAttribute('height')
-
-      // 确保SVG有viewBox属性
-      if (!svgElement.hasAttribute('viewBox')) {
-        // 如果没有viewBox，尝试根据SVG内容创建一个
-        const bbox = svgElement.getBBox()
-        if (bbox.width && bbox.height)
-          svgElement.setAttribute('viewBox', `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`)
-      }
-
-      // 设置preserveAspectRatio属性以保持宽高比
-      svgElement.setAttribute('preserveAspectRatio', 'xMidYMid meet')
-    }
-
-    updateRealtimeValues()
+    // updateRealtimeValues()
   }
   catch (error) {
     console.error('加载SVG失败:', error)
@@ -77,57 +65,54 @@ async function loadSvg() {
 }
 
 // 更新SVG中的实时数据
-function updateRealtimeValues() {
-  if (!svgContent.value || !data.value.realtimeValues)
+async function updateRealtimeValues() {
+  if (!svgContent.value || isLoading.value)
     return
-
   try {
-    // 获取SVG元素
     const svgElement = document.querySelector('.svg-container > svg')
+    svgElement?.removeAttribute('width')
+    svgElement?.removeAttribute('height')
     console.log(svgElement)
+    // 获取SVG元素
     if (!svgElement)
       return
 
-    const { realtimeValues, valueMapping = {} } = data.value
-
-    // 遍历映射关系，更新SVG元素
-    Object.entries(valueMapping).forEach(([svgElementId, dataField]) => {
-      console.log([svgElementId, dataField])
-      const element = svgElement.getElementById(svgElementId)
-      console.log(element)
-
-      if (element && realtimeValues[dataField] !== undefined) {
-        // 根据元素类型设置不同的属性
-        if (element.tagName === 'text' || element.tagName === 'tspan') {
-          element.textContent = String(realtimeValues[dataField])
-        }
-        else if (element.tagName === 'circle' || element.tagName === 'rect' || element.tagName === 'path') {
-          // 可以根据需要设置其他属性，比如颜色、宽度等
-          element.setAttribute('data-value', String(realtimeValues[dataField]))
-          // 示例：根据数值设置颜色
-          if (typeof realtimeValues[dataField] === 'number') {
-            const value = realtimeValues[dataField] as number
-            // 简单的颜色映射示例
-            if (value > 90)
-              element.setAttribute('fill', '#ff4d4f')
-            else if (value > 70)
-              element.setAttribute('fill', '#faad14')
-            else
-              element.setAttribute('fill', '#52c41a')
-          }
-        }
+    // 处理拥有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)
+        console.log(`找到元素: ${element.tagName}, point-name=${pointName}`)
       }
     })
 
-    // 如果没有映射配置，尝试直接匹配元素ID和数据字段
-    if (Object.keys(valueMapping).length === 0) {
-      Object.entries(realtimeValues).forEach(([field, value]) => {
-        const element = svgElement.getElementById(field)
-        if (element) {
-          if (element.tagName === 'text' || element.tagName === 'tspan')
-            element.textContent = String(value)
-        }
-      })
+    point.value = { itemNameArray: pointList }
+    console.log('收集的point-name列表:', pointList)
+    const res = await getEXANowListReal(point.value)
+    console.log('API响应结果:', res)
+
+    if (res && res.ReturnValue === 1 && res.ValueArray) {
+      const dataValues = res.ValueArray
+      console.log('数据值:', dataValues)
+
+      if (pointElements) {
+        pointElements.forEach((element, index) => {
+          // 不区分大小写比较标签名
+          const tagName = element.tagName.toLowerCase()
+          const value = dataValues[index] || ''
+          console.log(`更新元素[${index}]: 标签=${element.tagName}, 值=${value}`)
+
+          // 设置文本内容，不再受标签名条件限制
+          element.textContent = String(value)
+
+          // 同时设置data-value属性便于调试和样式控制
+          element.setAttribute('data-value', String(value))
+        })
+      }
     }
   }
   catch (error) {
@@ -137,24 +122,26 @@ function updateRealtimeValues() {
 
 // 监听数据变化
 watch(
-  () => data.value.path,
+  () => data.value,
   () => {
     loadSvg()
   },
   { immediate: true },
 )
 
-// 监听实时数据变化
-watch(
-  () => data.value.realtimeValues,
-  () => {
-    updateRealtimeValues()
-  },
-  { deep: true },
-)
-
 onMounted(() => {
   loadSvg()
+
+  // 设置定时器并保存引用，以便在组件卸载时清除
+  updateInterval = setTimeout(() => {
+    console.log('定时更新数据...')
+    updateRealtimeValues()
+  }, 3000)
+})
+
+onUnmounted(() => {
+  // 清理定时器等资源
+  clearTimeout(updateInterval)
 })
 </script>
 
@@ -166,60 +153,33 @@ onMounted(() => {
   <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>
 
 <style scoped>
-/* 响应式调整 */
-  @media (max-width: 768px) {
-    .svg-container {
-      min-height: 300px;
-    }
-  }
-
 ::v-deep .ant-card-body {
   padding: 10px;
   overflow: auto;
 }
 
-vg-container {
-    /* 响应式容器设置 */
-    position: relative;
-    width: 100%;
-    height: 100%;
-    min-height: 400px;
-    overflow: visible;
-    cursor: pointer;
-  }
-
-  .svg-container > svg {
-    box-sizing: border-box !important;
-    display: block !important;
-
-    /* 核心自适应设置 - 配合viewBox使用 */
-    width: 100% !important;
-
-  /* 确保SVG完全响应容器变化 */
-    max-width: none !important;
-    height: auto !important;
-    max-height: none !important;
-    padding: 0 !important;
-
-    /* 消除默认样式 */
-    margin: 0 !important;
+.svg-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-height: 300px;
+  cursor: pointer; /* 点击时可以手动触发数据更新 */
+}
 
-  /* 确保SVG内容完全可见 */
-    overflow: visible !important;
-    border: none !important;
-  }
+.svg-container > svg {
+  max-width: 100%;
+  max-height: 100%;
+}
 
-  /* 确保所有父容器也支持响应式 */
-  :deep(.ant-card),
-  :deep(.ant-card-body) {
-    width: 100%;
-    height: auto;
-    padding: 0;
-    margin: 0;
-  }
+svg{
+  width:initial;
+  height:initial;
+}
 </style>
diff --git a/src/views/dashboard/demo/index.vue b/src/views/dashboard/demo/index.vue
index e1d8433..3877cff 100644
--- a/src/views/dashboard/demo/index.vue
+++ b/src/views/dashboard/demo/index.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
-import { onBeforeMount, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { message } from 'ant-design-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'
@@ -26,9 +25,7 @@ const id = route.path.split('/').pop() || ''
 const data = ref<any>(data1)
 
 onMounted(async () => {
-  console.log(route.path)
   const res = await getDeviceInfo(id)
-  console.log(res)
   if (res)
     data.value = JSON.parse(res.Page_Content)
   // getColor(data.value)