肖晋飞
1 month ago
12 changed files with 493 additions and 3 deletions
|
After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 432 KiB |
|
After Width: | Height: | Size: 467 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 432 KiB |
|
After Width: | Height: | Size: 467 KiB |
@ -0,0 +1,135 @@ |
|||
<script lang="ts" setup> |
|||
import { onMounted, onUnmounted, ref, watch } from 'vue' |
|||
import { Card } from 'ant-design-vue' |
|||
import Svg from './svg.vue' |
|||
|
|||
const props = defineProps({ |
|||
data: { |
|||
type: Object, |
|||
default: () => {}, |
|||
}, |
|||
}) |
|||
|
|||
// 模拟实时数据 |
|||
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" /> |
|||
</Card> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
::v-deep .ant-card-body { |
|||
padding: 10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,225 @@ |
|||
<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到数据字段的映射 |
|||
} |
|||
|
|||
const props = defineProps<{ |
|||
data: SvgData |
|||
}>() |
|||
|
|||
const { data } = toRefs(props) |
|||
const svgContent = ref<string>('') |
|||
const isLoading = ref<boolean>(true) |
|||
const svgError = ref<string>('') |
|||
|
|||
// 加载SVG文件 |
|||
async function loadSvg() { |
|||
if (!data.value.path) { |
|||
svgError.value = '未提供SVG路径' |
|||
isLoading.value = false |
|||
return |
|||
} |
|||
|
|||
try { |
|||
isLoading.value = true |
|||
svgError.value = '' |
|||
|
|||
// 判断路径是否为完整URL |
|||
let url = data.value.path |
|||
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() |
|||
|
|||
// 等待DOM更新后应用实时数据 |
|||
await nextTick() |
|||
|
|||
// 处理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() |
|||
} |
|||
catch (error) { |
|||
console.error('加载SVG失败:', error) |
|||
svgError.value = `加载失败: ${error instanceof Error ? error.message : String(error)}` |
|||
} |
|||
finally { |
|||
isLoading.value = false |
|||
} |
|||
} |
|||
|
|||
// 更新SVG中的实时数据 |
|||
function updateRealtimeValues() { |
|||
if (!svgContent.value || !data.value.realtimeValues) |
|||
return |
|||
|
|||
try { |
|||
// 获取SVG元素 |
|||
const svgElement = document.querySelector('.svg-container > svg') |
|||
console.log(svgElement) |
|||
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') |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
|
|||
// 如果没有映射配置，尝试直接匹配元素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) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
catch (error) { |
|||
console.error('更新实时数据失败:', error) |
|||
} |
|||
} |
|||
|
|||
// 监听数据变化 |
|||
watch( |
|||
() => data.value.path, |
|||
() => { |
|||
loadSvg() |
|||
}, |
|||
{ immediate: true }, |
|||
) |
|||
|
|||
// 监听实时数据变化 |
|||
watch( |
|||
() => data.value.realtimeValues, |
|||
() => { |
|||
updateRealtimeValues() |
|||
}, |
|||
{ deep: true }, |
|||
) |
|||
|
|||
onMounted(() => { |
|||
loadSvg() |
|||
}) |
|||
</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> |
|||
/* 响应式调整 */ |
|||
@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内容完全可见 */ |
|||
overflow: visible !important; |
|||
border: none !important; |
|||
} |
|||
|
|||
/* 确保所有父容器也支持响应式 */ |
|||
:deep(.ant-card), |
|||
:deep(.ant-card-body) { |
|||
width: 100%; |
|||
height: auto; |
|||
padding: 0; |
|||
margin: 0; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue