Codex
118 lines
4.0 KiB
Vue
118 lines
4.0 KiB
Vue
<script setup>
|
||
import { computed } from "vue";
|
||
import {
|
||
deviceView,
|
||
snapshot,
|
||
bridge,
|
||
accessLabel,
|
||
} from "../composables/bridge.js";
|
||
import AppIcon from "./AppIcon.vue";
|
||
import NetworkStatus from "./NetworkStatus.vue";
|
||
const home = computed(() =>
|
||
(snapshot.value.state.households || []).find(
|
||
(h) => h.id === snapshot.value.state.familyId,
|
||
),
|
||
);
|
||
</script>
|
||
<template>
|
||
<div id="device-topology" hidden>
|
||
<section class="panel network-map">
|
||
<div class="network-platform">
|
||
<AppIcon name="network" />
|
||
<div>
|
||
<h3>{{ home?.name || "当前场所" }}</h3>
|
||
<p>{{ deviceView.devices.length }} 台设备 · 随设备档案自动更新</p>
|
||
</div>
|
||
</div>
|
||
<p class="description">
|
||
连线来自已确认的上级设备关系。上级未填写时单独列出；不代表已自动发现所有交换机或布线。
|
||
</p>
|
||
<div class="topology-nodes">
|
||
<article
|
||
v-for="row in deviceView.rows"
|
||
:key="row.device.id"
|
||
class="network-node card"
|
||
:class="{ nested: row.depth > 0 }"
|
||
:style="{ '--depth': Math.min(row.depth, 5) }"
|
||
>
|
||
<div class="card-body">
|
||
<div class="device-card-heading">
|
||
<AppIcon
|
||
:name="row.device.source === 'camera' ? 'camera' : 'router'"
|
||
/>
|
||
<div class="flex-grow-1">
|
||
<span class="small text-secondary"
|
||
>{{ row.device.deviceType }} ·
|
||
{{ accessLabel(row.device.networkAccess) }}</span
|
||
>
|
||
<h3>
|
||
<button
|
||
class="device-title"
|
||
@click="
|
||
bridge().enterDevice(row.device.source, row.device.id)
|
||
"
|
||
>
|
||
{{ row.device.name }}
|
||
</button>
|
||
</h3>
|
||
</div>
|
||
<button
|
||
class="btn btn-sm btn-outline-secondary"
|
||
@click="
|
||
bridge().enterDevice(
|
||
row.device.source,
|
||
row.device.id,
|
||
'device',
|
||
)
|
||
"
|
||
>
|
||
详情 →
|
||
</button>
|
||
</div>
|
||
<p class="device-location">
|
||
{{ bridge().location?.(row.device.siteId) || "未指定区域" }}
|
||
<template v-if="row.device.point">
|
||
· {{ row.device.point }}</template
|
||
>
|
||
</p>
|
||
<div class="network-facts">
|
||
<span
|
||
>IP
|
||
<b>{{
|
||
row.device.networkHosts.join(" / ") || "待填写"
|
||
}}</b></span
|
||
><span v-if="row.device.tailscaleHost"
|
||
>Tailscale <b>{{ row.device.tailscaleHost }}</b></span
|
||
><span v-if="row.device.networkCidr"
|
||
>网段 <b>{{ row.device.networkCidr }}</b></span
|
||
><span
|
||
>上级 <b>{{ row.parentName || "待确认 / 直接接入" }}</b></span
|
||
><span
|
||
>连接
|
||
<b>{{
|
||
{ wired: "网线", wifi: "Wi-Fi" }[row.device.connectionType] ||
|
||
"待确认"
|
||
}}</b></span
|
||
><span v-if="row.via.length"
|
||
>取流经录像机 <b>{{ row.via.join("、") }}</b></span
|
||
><span v-if="row.archiveVia.length"
|
||
>录像归档 <b>{{ row.archiveVia.join("、") }}</b></span
|
||
>
|
||
</div>
|
||
<NetworkStatus
|
||
v-if="/路由|网关|服务器/.test(row.device.deviceType)"
|
||
:device="row.device"
|
||
:active="
|
||
snapshot.page === 'objects' && deviceView.mode === 'topology'
|
||
"
|
||
/>
|
||
</div>
|
||
</article>
|
||
<p v-if="!deviceView.rows.length" class="empty">
|
||
当前范围尚未登记设备。
|
||
</p>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|