| | |
|---|
| | | type DiscoveredCabinet, |
|---|
| | | } from '@/api/deviceCabinets' |
|---|
| | | import type { CabinetPayload } from '@/stores/deviceCabinets' |
|---|
| | | import { formatBusinessMinute } from '@/utils/businessTime' |
|---|
| | | import DeviceRelatedTests from '@/components/DeviceRelatedTests.vue' |
|---|
| | | |
|---|
| | | const route = useRoute() |
|---|
| | |
|---|
| | | loadDevices() |
|---|
| | | } |
|---|
| | | |
|---|
| | | function selectDevice(device: DiscoveredCabinet) { |
|---|
| | | Object.assign(form, { |
|---|
| | | /** 最近数据时间按业务时区展示；来源不提供或没有采样行时显示占位。 */ |
|---|
| | | function formatLastDataAt(value: unknown) { |
|---|
| | | return formatBusinessMinute(value) |
|---|
| | | } |
|---|
| | | |
|---|
| | | function selectDevice(device: DiscoveredCabinet) { Object.assign(form, { |
|---|
| | | deviceCode: device.deviceCode, |
|---|
| | | ip: device.ip, |
|---|
| | | mac: device.mac || '', |
|---|
| | |
|---|
| | | <el-dialog v-model="deviceDialogVisible" class="device-dialog" title="选择设备" width="720px" align-center> |
|---|
| | | <div v-loading="deviceLoading" class="device-table-wrap"> |
|---|
| | | <table class="device-table"> |
|---|
| | | <thead><tr><th>设备编码</th><th>IP</th><th>MAC</th><th>操作</th></tr></thead> |
|---|
| | | <thead><tr><th>设备编码</th><th>IP</th><th>MAC</th><th>最近数据时间</th><th>操作</th></tr></thead> |
|---|
| | | <tbody> |
|---|
| | | <tr v-for="device in devices" :key="device.deviceCode"><td>{{ device.deviceCode }}</td><td>{{ device.ip }}</td><td>{{ device.mac || '-' }}</td><td><button type="button" @click="selectDevice(device)">选择</button></td></tr> |
|---|
| | | <tr v-if="!deviceLoading && !devices.length"><td colspan="4" class="device-empty">暂无可发现设备</td></tr> |
|---|
| | | <tr v-for="device in devices" :key="device.deviceCode"><td>{{ device.deviceCode }}</td><td>{{ device.ip }}</td><td>{{ device.mac || '-' }}</td><td>{{ formatLastDataAt(device.lastDataAt) }}</td><td><button type="button" @click="selectDevice(device)">选择</button></td></tr> |
|---|
| | | <tr v-if="!deviceLoading && !devices.length"><td colspan="5" class="device-empty">暂无可发现设备</td></tr> |
|---|
| | | </tbody> |
|---|
| | | </table> |
|---|
| | | </div> |
|---|
| | | <p class="device-hint">最近数据时间是来源里最近一次采样行的设备时间，用来判断哪几台柜子现在真的在产出数据；系统不替你判定“在用”，登记哪些候选由你决定。</p> |
|---|
| | | <footer class="device-pagination"><span>共 {{ deviceTotal }} 个设备</span><el-pagination :current-page="devicePage" :page-size="devicePageSize" :total="deviceTotal" layout="prev, pager, next" background @current-change="handleDevicePageChange" /></footer> |
|---|
| | | </el-dialog> |
|---|
| | | </div> |
|---|
| | |
|---|
| | | .device-table tbody tr:hover { background: #f7fbff; } |
|---|
| | | .device-table .device-empty { height: 72px; color: #8a98a5; text-align: center; } |
|---|
| | | .device-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; } |
|---|
| | | .device-hint { margin: 12px 0 0; color: #7b8794; font-size: 11px; line-height: 1.7; } |
|---|
| | | .device-pagination > span { color: #7b8794; font-size: 11px; } |
|---|
| | | .device-pagination :deep(.el-pagination) { --el-pagination-button-bg-color: #edf4fa; --el-pagination-hover-color: var(--blue); } |
|---|
| | | @media (max-width: 960px) { .device-summary, .detail-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } } |
|---|
