yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat：【IoT 物联网】物模型数据-设备属性，增加卡片筛选

pull/790/head
YunaiV 2025-06-18 09:26:58 +08:00
parent c44d177b1d
commit 814a8465b6
1 changed files with 85 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
src/views/iot/device/device/detail/DeviceDetailsThingModelProperty.vue
View File

@ -20,6 +20,16 @@
@clear="handleQuery"
/>
</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-switch
size="large"
@ -35,7 +45,80 @@
</el-form>
</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.name" />
<el-table-column label="数据类型" align="center" prop="property.dataType" />
@ -80,6 +163,7 @@ const queryParams = reactive({
})
const autoRefresh = ref(false) // 自动刷新开关
let autoRefreshTimer: any = null // 定时器
const viewMode = ref<'card' | 'list'>('card') // 视图模式状态
const queryFormRef = ref() // 搜索的表单