fix:修改定时刷新数据

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

@@ -96,6 +96,6 @@ onBeforeUpdate(async () => {
 
 <style scoped>
 ::v-deep(.ant-card-body) {
-  padding:5px;
+  padding:10px;
 }
 </style>

src/views/dashboard/demo/components/demo.json

@@ -34,7 +34,7 @@
   },
   "LeftDown": {
     "Header": "生产流程",
-    "path": "svg/illustration.svg"
+    "path": ""
   },
   "RightDown": {
     "Header": "参数信息",

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

@@ -12,10 +12,22 @@ const isLoading = ref<boolean>(true)
 const svgError = ref<string>('')
 const point = ref<{ itemNameArray: string[] }>({ itemNameArray: [] })
 // const pointElements = ref<NodeListOf<SVGElement> | undefined>()
+// 监听数据变化
+watch(
+  () => data.value,
+  (newValue, oldValue) => {
+    // 下方信息不会打印在控制台中
+    console.log('a has changed', newValue)
+    if (newValue !== oldValue && newValue !== '' && newValue != null)
+      loadSvg()
+  },
 
-let updateInterval: NodeJS.Timeout | undefined
+)
 // 加载SVG文件
 async function loadSvg() {
+  console.log('加载SVG文件...')
+  console.log(data.value)
+
   if (!data.value) {
     svgError.value = '未提供SVG路径'
     isLoading.value = false
@@ -40,7 +52,6 @@ async function loadSvg() {
       url += `?t=${timestamp}`
 
     const response = await fetch(url)
-    console.log(response)
 
     if (!response.ok)
       throw new Error(`无法加载SVG: ${response.statusText}`)
@@ -49,7 +60,6 @@ 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')
 
@@ -66,13 +76,15 @@ async function loadSvg() {
 
 // 更新SVG中的实时数据
 async function updateRealtimeValues() {
-  if (!svgContent.value || isLoading.value)
+  console.log('更新SVG实时数据...', Boolean(svgContent.value))
+  console.log('更新SVG实时数据...', Boolean(isLoading.value))
+
+  if (!svgContent.value)
     return
   try {
     const svgElement = document.querySelector('.svg-container > svg')
     svgElement?.removeAttribute('width')
     svgElement?.removeAttribute('height')
-    console.log(svgElement)
     // 获取SVG元素
     if (!svgElement)
       return
@@ -84,27 +96,21 @@ async function updateRealtimeValues() {
     // 使用同步方式收集point-name
     pointElements.forEach((element) => {
       const pointName = element.getAttribute('point-name')
-      if (pointName) {
+      if (pointName)
         pointList.push(pointName)
-        console.log(`找到元素: ${element.tagName}, point-name=${pointName}`)
-      }
     })
 
     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)
@@ -120,28 +126,19 @@ async function updateRealtimeValues() {
   }
 }
 
-// 监听数据变化
-watch(
-  () => data.value,
-  () => {
-    loadSvg()
-  },
-  { immediate: true },
-)
+const updateInterval = ref<NodeJS.Timeout | null>(null)
 
 onMounted(() => {
-  loadSvg()
-
   // 设置定时器并保存引用，以便在组件卸载时清除
-  updateInterval = setTimeout(() => {
+  updateInterval.value = setInterval(() => {
     console.log('定时更新数据...')
     updateRealtimeValues()
-  }, 3000)
+  }, 1000)
 })
 
 onUnmounted(() => {
   // 清理定时器等资源
-  clearTimeout(updateInterval)
+  clearInterval(updateInterval.value!)
 })
 </script>
 
@@ -169,17 +166,6 @@ onUnmounted(() => {
   justify-content: center;
   width: 100%;
   height: 100%;
-  min-height: 300px;
   cursor: pointer; /* 点击时可以手动触发数据更新 */
 }
-
-.svg-container > svg {
-  max-width: 100%;
-  max-height: 100%;
-}
-
-svg{
-  width:initial;
-  height:initial;
-}
 </style>

src/views/dashboard/demo/index.vue

@@ -59,16 +59,16 @@ onMounted(async () => {
     <!-- <template #headerContent>
       <WorkbenchHeader class="m-1" :data="data" />
     </template> -->
-    <div class="h-[calc(91vh)] bg-[#f5f5f5]">
-      <div class="enter-y h-[calc(91vh/2)] md:flex">
+    <div class="h-[calc(92vh)] bg-[#f5f5f5]">
+      <div class="enter-y h-[calc(92vh/2)] md:flex">
         <StaticImg class="m-1 w-full md:w-1/4" :loading="loading" :data="data.LeftUp || {}" />
         <ProjectCard class="enter-y m-1 w-full md:w-1/2" :loading="loading" :data="data.LeftMidUp || {}" />
-        <div class="enter-y h-[calc(91vh/2)] w-full md:w-1/4">
+        <div class="enter-y h-[calc(92vh/2)] w-full md:w-1/4">
           <DynamicInfo :loading="loading" class="enter-y m-1 h-[calc(17vh)] w-full" :data="data.RightMidUp || {}" />
           <Operation class="enter-y m-1 h-[calc(27vh)] w-full" :loading="loading" :data="data.RightUp || {}" />
         </div>
       </div>
-      <div class="enter-y h-[calc(91vh/2)] md:flex">
+      <div class="enter-y h-[calc(92vh/2)] md:flex">
         <StaticSvg class="m-1 w-full md:w-1/2" :loading="loading" :data="data.LeftDown || {}" />
         <ParameterInfo class="m-1 w-full md:w-1/2" :loading="loading" :data="data.RightDown || {}" />
       </div>