154 lines
4.9 KiB
Vue
154 lines
4.9 KiB
Vue
|
<script setup>
|
|||
|
|
import {
|
|||
|
|
deviceView,
|
|||
|
|
snapshot,
|
|||
|
|
bridge,
|
|||
|
|
accessLabel,
|
|||
|
|
} from "../composables/bridge.js";
|
|||
|
|
import AppIcon from "./AppIcon.vue";
|
|||
|
|
import NetworkStatus from "./NetworkStatus.vue";
|
|||
|
|
const channels = (d) =>
|
|||
|
|
(snapshot.value.state.cameras || []).filter((c) =>
|
|||
|
|
d.source === "camera"
|
|||
|
|
? c.assetId === d.id
|
|||
|
|
: c.recorderId === d.id || c.archiveRecorderId === d.id,
|
|||
|
|
);
|
|||
|
|
const editAttrs = (d) => ({
|
|||
|
|
["data-" +
|
|||
|
|
(d.source === "camera"
|
|||
|
|
? "edit-asset"
|
|||
|
|
: d.source === "recorder"
|
|||
|
|
? "edit-recorder"
|
|||
|
|
: "edit-device")]: d.id,
|
|||
|
|
});
|
|||
|
|
const monitored = (d) =>
|
|||
|
|
/路由|网关|服务器/.test(d.deviceType) || /gl\.inet/i.test(d.brand || "");
|
|||
|
|
</script>
|
|||
|
|
<template>
|
|||
|
|
<div id="asset-list">
|
|||
|
|
<section
|
|||
|
|
v-for="group in deviceView.groups"
|
|||
|
|
:key="group.key"
|
|||
|
|
class="device-group"
|
|||
|
|
>
|
|||
|
|
<h3 class="group-title">
|
|||
|
|
{{ group.labels.join(" / ") || "全部设备" }}
|
|||
|
|
<span class="count-pill">{{ group.items.length }}</span>
|
|||
|
|
</h3>
|
|||
|
|
<div class="device-card-grid">
|
|||
|
|
<article
|
|||
|
|
v-for="d in group.items"
|
|||
|
|
:key="d.source + d.id"
|
|||
|
|
class="card device-card"
|
|||
|
|
>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<div class="device-card-heading">
|
|||
|
|
<div class="device-symbol">
|
|||
|
|
<AppIcon
|
|||
|
|
:name="
|
|||
|
|
d.source === 'camera'
|
|||
|
|
? 'camera'
|
|||
|
|
: monitored(d)
|
|||
|
|
? 'router'
|
|||
|
|
: 'devices'
|
|||
|
|
"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex-grow-1">
|
|||
|
|
<span class="small text-secondary">{{ d.deviceType }}</span>
|
|||
|
|
<h3>
|
|||
|
|
<button
|
|||
|
|
class="device-title"
|
|||
|
|
@click="bridge().enterDevice(d.source, d.id)"
|
|||
|
|
>
|
|||
|
|
{{ d.name }}
|
|||
|
|
</button>
|
|||
|
|
</h3>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
v-if="snapshot.admin"
|
|||
|
|
class="btn btn-sm btn-outline-secondary"
|
|||
|
|
v-bind="editAttrs(d)"
|
|||
|
|
>
|
|||
|
|
编辑
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<p class="device-location">
|
|||
|
|
{{ bridge().location?.(d.siteId) || "区域待填写"
|
|||
|
|
}}<template v-if="d.point"> · {{ d.point }}</template>
|
|||
|
|
</p>
|
|||
|
|
<dl class="compact-details">
|
|||
|
|
<div>
|
|||
|
|
<dt>品牌型号</dt>
|
|||
|
|
<dd>
|
|||
|
|
{{
|
|||
|
|
[d.brand, d.model].filter(Boolean).join(" / ") || "未填写"
|
|||
|
|
}}
|
|||
|
|
</dd>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<dt>设备地址</dt>
|
|||
|
|
<dd class="font-monospace">
|
|||
|
|
{{ d.networkHosts.join(" / ") || "未填写" }}
|
|||
|
|
</dd>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<dt>网络</dt>
|
|||
|
|
<dd>{{ accessLabel(d.networkAccess) }}</dd>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<dt>所有人 / 负责人</dt>
|
|||
|
|
<dd>
|
|||
|
|
{{ d.ownerName || "待指定" }} /
|
|||
|
|
{{ d.managerName || "待指定" }}
|
|||
|
|
</dd>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="d.source !== 'device'">
|
|||
|
|
<dt>镜头通道</dt>
|
|||
|
|
<dd>{{ channels(d).length }} 个已配置</dd>
|
|||
|
|
</div>
|
|||
|
|
</dl>
|
|||
|
|
<div v-if="d.tags?.length" class="device-tags">
|
|||
|
|
<span v-for="tag in d.tags" :key="tag">{{ tag }}</span>
|
|||
|
|
</div>
|
|||
|
|
<NetworkStatus
|
|||
|
|
v-if="monitored(d)"
|
|||
|
|
:device="d"
|
|||
|
|
:active="
|
|||
|
|
snapshot.page === 'objects' && deviceView.mode === 'cards'
|
|||
|
|
"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-footer device-card-actions">
|
|||
|
|
<button
|
|||
|
|
class="btn btn-sm btn-outline-secondary"
|
|||
|
|
@click="bridge().enterDevice(d.source, d.id, 'device')"
|
|||
|
|
>
|
|||
|
|
设备详情</button
|
|||
|
|
><template v-if="d.source !== 'device'"
|
|||
|
|
><button
|
|||
|
|
v-if="snapshot.admin"
|
|||
|
|
class="btn btn-sm btn-outline-secondary"
|
|||
|
|
@click="bridge().enterDevice(d.source, d.id, 'cameras')"
|
|||
|
|
>
|
|||
|
|
配置镜头</button
|
|||
|
|
><button
|
|||
|
|
v-if="channels(d).length"
|
|||
|
|
class="btn btn-sm btn-primary"
|
|||
|
|
@click="bridge().enterDevice(d.source, d.id, 'live')"
|
|||
|
|
>
|
|||
|
|
实时画面
|
|||
|
|
</button></template
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
</article>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
<div v-if="!deviceView.devices.length" class="empty">
|
|||
|
|
<AppIcon name="devices" />
|
|||
|
|
<h3>当前范围没有设备</h3>
|
|||
|
|
<p>调整筛选条件，或添加摄像机、路由器、灯等设备。</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|