feat：【IoT 物联网】物模型数据-设备属性，增加卡片筛选
YunaiV
parent
c44d177b1d
commit
814a8465b6
|
|
@ -20,6 +20,16 @@
|
||||||
@clear="handleQuery"
|
@clear="handleQuery"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<el-form-item class="float-right !mr-0 !mb-0">
|
||||||
|
<el-button-group>
|
||||||
|
<el-button :type="viewMode === 'card' ? 'primary' : 'default'" @click="viewMode = 'card'">
|
||||||
|
<Icon icon="ep:grid" />
|
||||||
|
</el-button>
|
||||||
|
<el-button :type="viewMode === 'list' ? 'primary' : 'default'" @click="viewMode = 'list'">
|
||||||
|
<Icon icon="ep:list" />
|
||||||
|
</el-button>
|
||||||
|
</el-button-group>
|
||||||
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-switch
|
<el-switch
|
||||||
size="large"
|
size="large"
|
||||||
|
|
@ -35,7 +45,80 @@
|
||||||
</el-form>
|
</el-form>
|
||||||
</ContentWrap>
|
</ContentWrap>
|
||||||
<ContentWrap>
|
<ContentWrap>
|
||||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
<!-- 卡片视图 -->
|
||||||
|
<template v-if="viewMode === 'card'">
|
||||||
|
<el-row :gutter="16" v-loading="loading">
|
||||||
|
<el-col
|
||||||
|
v-for="item in list"
|
||||||
|
:key="item.property.identifier"
|
||||||
|
:xs="24"
|
||||||
|
:sm="12"
|
||||||
|
:md="12"
|
||||||
|
:lg="6"
|
||||||
|
class="mb-4"
|
||||||
|
>
|
||||||
|
<el-card
|
||||||
|
class="h-full transition-colors relative overflow-hidden"
|
||||||
|
:body-style="{ padding: '0' }"
|
||||||
|
>
|
||||||
|
<!-- 添加渐变背景层 -->
|
||||||
|
<div
|
||||||
|
class="absolute top-0 left-0 right-0 h-[50px] pointer-events-none bg-gradient-to-b from-[#eefaff] to-transparent"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 relative">
|
||||||
|
<!-- 标题区域 -->
|
||||||
|
<div class="flex items-center mb-3">
|
||||||
|
<div class="mr-2.5 flex items-center">
|
||||||
|
<Icon icon="ep:cpu" class="text-[18px] text-[#0070ff]" />
|
||||||
|
</div>
|
||||||
|
<div class="text-[16px] font-600 flex-1">{{
|
||||||
|
item.property?.name || item.name
|
||||||
|
}}</div>
|
||||||
|
<!-- 标识符 -->
|
||||||
|
<div class="inline-flex items-center mr-2">
|
||||||
|
<el-tag size="small" type="primary">
|
||||||
|
{{ item.property?.identifier || item.identifier }}
|
||||||
|
</el-tag>
|
||||||
|
</div>
|
||||||
|
<!-- 数据类型标签 -->
|
||||||
|
<div class="inline-flex items-center mr-2">
|
||||||
|
<el-tag size="small" type="info">
|
||||||
|
{{ item.property?.dataType || item.dataType }}
|
||||||
|
</el-tag>
|
||||||
|
</div>
|
||||||
|
<!-- 数据图标 - 可点击 -->
|
||||||
|
<div
|
||||||
|
class="cursor-pointer flex items-center justify-center w-8 h-8 rounded-full hover:bg-blue-50 transition-colors"
|
||||||
|
@click="openDetail(props.device.id, item.property?.identifier || item.identifier)"
|
||||||
|
>
|
||||||
|
<Icon icon="ep:data-line" class="text-[18px] text-[#0070ff]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 信息区域 -->
|
||||||
|
<div class="text-[14px]">
|
||||||
|
<div class="mb-2.5 last:mb-0">
|
||||||
|
<span class="text-[#717c8e] mr-2.5">属性值</span>
|
||||||
|
<span class="text-[#0b1d30] font-600">
|
||||||
|
{{ item.value || '-' }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="mb-2.5 last:mb-0">
|
||||||
|
<span class="text-[#717c8e] mr-2.5">更新时间</span>
|
||||||
|
<span class="text-[#0b1d30] text-[12px]">
|
||||||
|
{{ dateFormatter(null, null, item.updateTime) }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 列表视图 -->
|
||||||
|
<el-table v-else v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
||||||
<el-table-column label="属性标识符" align="center" prop="property.identifier" />
|
<el-table-column label="属性标识符" align="center" prop="property.identifier" />
|
||||||
<el-table-column label="属性名称" align="center" prop="property.name" />
|
<el-table-column label="属性名称" align="center" prop="property.name" />
|
||||||
<el-table-column label="数据类型" align="center" prop="property.dataType" />
|
<el-table-column label="数据类型" align="center" prop="property.dataType" />
|
||||||
|
|
@ -80,6 +163,7 @@ const queryParams = reactive({
|
||||||
})
|
})
|
||||||
const autoRefresh = ref(false) // 自动刷新开关
|
const autoRefresh = ref(false) // 自动刷新开关
|
||||||
let autoRefreshTimer: any = null // 定时器
|
let autoRefreshTimer: any = null // 定时器
|
||||||
|
const viewMode = ref<'card' | 'list'>('card') // 视图模式状态
|
||||||
|
|
||||||
const queryFormRef = ref() // 搜索的表单
|
const queryFormRef = ref() // 搜索的表单
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue