106 lines
2.1 KiB
Vue
106 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<view class="devices-page">
|
||
|
|
<!-- List -->
|
||
|
|
<view v-if="list.length === 0 && !loading" class="empty">
|
||
|
|
<text class="empty-text">暂无设备</text>
|
||
|
|
</view>
|
||
|
|
<view v-else class="device-list">
|
||
|
|
<view
|
||
|
|
v-for="item in list"
|
||
|
|
:key="item.id"
|
||
|
|
class="device-card"
|
||
|
|
@click="goDetail(item.id)"
|
||
|
|
>
|
||
|
|
<view class="device-header">
|
||
|
|
<text class="device-name">{{ item.name || item.abstract_id }}</text>
|
||
|
|
<text class="device-status" :class="item.status === 1 ? 'online' : 'offline'">
|
||
|
|
{{ item.status === 1 ? '在线' : '离线' }}
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
<text class="device-id">ID: {{ item.abstract_id }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import { onShow } from '@dcloudio/uni-app'
|
||
|
|
import { h5Api, type CabinetItem } from '../../api'
|
||
|
|
|
||
|
|
const list = ref<CabinetItem[]>([])
|
||
|
|
const loading = ref(true)
|
||
|
|
|
||
|
|
onShow(() => {
|
||
|
|
fetchList()
|
||
|
|
})
|
||
|
|
|
||
|
|
async function fetchList() {
|
||
|
|
loading.value = true
|
||
|
|
try {
|
||
|
|
const res = await h5Api.getCabinets()
|
||
|
|
list.value = res.data || []
|
||
|
|
} catch {
|
||
|
|
// 静默失败
|
||
|
|
} finally {
|
||
|
|
loading.value = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function goDetail(id: number) {
|
||
|
|
uni.navigateTo({ url: `/pages/device-detail/index?id=${id}` })
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.devices-page {
|
||
|
|
padding: 24px;
|
||
|
|
}
|
||
|
|
.empty {
|
||
|
|
padding: 80px 0;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.empty-text {
|
||
|
|
font-size: 28px;
|
||
|
|
color: #9ca3af;
|
||
|
|
}
|
||
|
|
.device-list {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 16px;
|
||
|
|
}
|
||
|
|
.device-card {
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 16px;
|
||
|
|
padding: 24px;
|
||
|
|
}
|
||
|
|
.device-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
}
|
||
|
|
.device-name {
|
||
|
|
font-size: 30px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #111;
|
||
|
|
}
|
||
|
|
.device-status {
|
||
|
|
font-size: 24px;
|
||
|
|
padding: 4px 12px;
|
||
|
|
border-radius: 8px;
|
||
|
|
}
|
||
|
|
.device-status.online {
|
||
|
|
color: #16a34a;
|
||
|
|
background-color: #f0fdf4;
|
||
|
|
}
|
||
|
|
.device-status.offline {
|
||
|
|
color: #9ca3af;
|
||
|
|
background-color: #f9fafb;
|
||
|
|
}
|
||
|
|
.device-id {
|
||
|
|
font-size: 24px;
|
||
|
|
color: #9ca3af;
|
||
|
|
}
|
||
|
|
</style>
|