diff --git a/src/views/dashboard/demo/components/ParameterInfo.vue b/src/views/dashboard/demo/components/ParameterInfo.vue index 1e390a1..a3c81f3 100644 --- a/src/views/dashboard/demo/components/ParameterInfo.vue +++ b/src/views/dashboard/demo/components/ParameterInfo.vue @@ -96,6 +96,6 @@ onBeforeUpdate(async () => { diff --git a/src/views/dashboard/demo/components/demo.json b/src/views/dashboard/demo/components/demo.json index 5145fa9..23b7fa1 100644 --- a/src/views/dashboard/demo/components/demo.json +++ b/src/views/dashboard/demo/components/demo.json @@ -34,7 +34,7 @@ }, "LeftDown": { "Header": "生产流程", - "path": "svg/illustration.svg" + "path": "" }, "RightDown": { "Header": "参数信息", diff --git a/src/views/dashboard/demo/components/svg.vue b/src/views/dashboard/demo/components/svg.vue index b6c5ebb..9d1f0c7 100644 --- a/src/views/dashboard/demo/components/svg.vue +++ b/src/views/dashboard/demo/components/svg.vue @@ -12,10 +12,22 @@ const isLoading = ref(true) const svgError = ref('') const point = ref<{ itemNameArray: string[] }>({ itemNameArray: [] }) // const pointElements = ref | 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(null) onMounted(() => { - loadSvg() - // 设置定时器并保存引用,以便在组件卸载时清除 - updateInterval = setTimeout(() => { + updateInterval.value = setInterval(() => { console.log('定时更新数据...') updateRealtimeValues() - }, 3000) + }, 1000) }) onUnmounted(() => { // 清理定时器等资源 - clearTimeout(updateInterval) + clearInterval(updateInterval.value!) }) @@ -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; -} diff --git a/src/views/dashboard/demo/index.vue b/src/views/dashboard/demo/index.vue index 3877cff..81ceedd 100644 --- a/src/views/dashboard/demo/index.vue +++ b/src/views/dashboard/demo/index.vue @@ -59,16 +59,16 @@ onMounted(async () => { -
-
+
+
-
+
-
+