肖晋飞
4 weeks ago
7 changed files with 253 additions and 247 deletions
@ -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> |
|||
Loading…
Reference in new issue