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 () => {
-