36 lines
1.5 KiB
Vue
36 lines
1.5 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
defineProps<{ store: any; actions: any }>()
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<section class="panel">
|
||
|
|
<h2>实时数据</h2>
|
||
|
|
<div class="metrics" style="margin-bottom: 12px">
|
||
|
|
<div class="metric">
|
||
|
|
<div class="label">数据源</div>
|
||
|
|
<div class="value">{{ store.realtimeSource }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="metric">
|
||
|
|
<div class="label">连接状态</div>
|
||
|
|
<div class="value">{{ store.realtimeConnected ? 'WebSocket 已连接' : 'HTTP 轮询回退' }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="metric">
|
||
|
|
<div class="label">最后更新时间</div>
|
||
|
|
<div class="value">{{ store.realtimeUpdatedAt || '--' }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-if="store.realtime" class="grid">
|
||
|
|
<div v-for="line in store.realtime.line_list" :key="line.line_no" class="panel">
|
||
|
|
<h3>线路 {{ line.line_no }}</h3>
|
||
|
|
<div class="metrics">
|
||
|
|
<div class="metric"><div class="label">一次电压 Ua</div><div class="value">{{ line.pri_val.Ua }}</div></div>
|
||
|
|
<div class="metric"><div class="label">一次电流 Ia</div><div class="value">{{ line.pri_val.Ia }}</div></div>
|
||
|
|
<div class="metric"><div class="label">总有功 Pt</div><div class="value">{{ line.pri_val.Pt }}</div></div>
|
||
|
|
<div class="metric"><div class="label">频率</div><div class="value">{{ line.pri_val.frq }}</div></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p v-else>正在等待实时数据...</p>
|
||
|
|
</section>
|
||
|
|
</template>
|