boyue2025/boyue-ui-admin-vue3
3
0
Fork 0
mirror of https://gitee.com/myxzgzs/boyue-ui-admin-vue3 synced 2025-08-08 16:32:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

【功能优化】Bpm：设备日志的展示

Browse Source
This commit is contained in:
YunaiV 2025-01-28 08:32:53 +08:00
parent 3d65f1c599
commit 736b82de18
8 changed files with 32 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/api/iot/device/device/index.ts
View File

@ -151,7 +151,6 @@ export const DeviceApi = {
// 查询设备日志分页
getDeviceLogPage: async (params: any) => {
// TODO @super：/iot/log-page 或者 /iot/log/page
return await request.get({ url: `/iot/device/data/log/page`, params })
return await request.get({ url: `/iot/device/log/page`, params })
}
}

3
src/views/iot/device/device/detail/DeviceDataDetail.vue
View File

@ -1,3 +1,4 @@
<!-- TODO 芋艿：待 review -->
<template>
<Dialog title="查看数据" v-model="dialogVisible">
<ContentWrap>
@ -57,7 +58,7 @@ import { DeviceApi, DeviceHistoryDataVO, DeviceVO } from '@/api/iot/device/devic
import { ProductVO } from '@/api/iot/product/product'
import { beginOfDay, dateFormatter, endOfDay, formatDate } from '@/utils/formatTime'
const props = defineProps<{ product: ProductVO; device: DeviceVO }>()
defineProps<{ product: ProductVO; device: DeviceVO }>()
/** IoT 设备 数据详情 */
defineOptions({ name: 'IoTDeviceDataDetail' })

1
src/views/iot/device/device/detail/DeviceDetailsHeader.vue
View File

@ -1,3 +1,4 @@
<!-- 设备信息（头部） -->
<template>
<div>
<div class="flex items-start justify-between">

1
src/views/iot/device/device/detail/DeviceDetailsInfo.vue
View File

@ -1,3 +1,4 @@
<!-- 设备信息 -->
<template>
<ContentWrap>
<el-collapse v-model="activeNames">

29
src/views/iot/device/device/detail/DeviceDetailsLog.vue
View File

@ -1,9 +1,10 @@
<!-- 设备日志 -->
<template>
<ContentWrap>
<!-- 搜索区域 -->
<el-form :model="queryParams" inline>
<el-form-item>
<el-select v-model="queryParams.type" placeholder="所有" class="!w-120px">
<el-select v-model="queryParams.type" placeholder="所有" class="!w-160px">
<el-option label="所有" value="" />
<!-- TODO @super：搞成枚举 -->
<el-option label="状态" value="state" />
@ -13,13 +14,22 @@
</el-select>
</el-form-item>
<el-form-item>
<el-input v-model="queryParams.keyword" placeholder="日志识符" class="!w-200px" />
<el-input v-model="queryParams.identifier" placeholder="日志识符" class="!w-200px" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery">
<Icon icon="ep:search" class="mr-5px" /> 搜索
</el-button>
<el-switch v-model="autoRefresh" class="ml-10px" /> 定时刷新
<el-switch
size="large"
width="80"
v-model="autoRefresh"
class="ml-20px"
inline-prompt
active-text="定时刷新"
inactive-text="定时刷新"
style="--el-switch-on-color: #13ce66"
/>
</el-form-item>
</el-form>
@ -31,7 +41,8 @@
</template>
</el-table-column>
<el-table-column label="类型" align="center" prop="type" width="120" />
<el-table-column label="名称(标识符)" align="center" prop="subType" width="120" />
<!-- TODO @super：标识符需要翻译 -->
<el-table-column label="标识符" align="center" prop="identifier" width="120" />
<el-table-column label="内容" align="center" prop="content" :show-overflow-tooltip="true" />
</el-table>
@ -55,12 +66,11 @@ const props = defineProps<{
deviceKey: string
}>()
//TODO:后续看看使用什么查询条件 目前后端是留了时间范围 type subType
// 查询参数
const queryParams = reactive({
deviceKey: props.deviceKey,
// type: '',
// keyword: '',
type: '',
identifier: '',
pageNo: 1,
pageSize: 10
})
@ -68,8 +78,7 @@ const queryParams = reactive({
// 列表数据
const loading = ref(false)
const total = ref(0)
// TODO @super：字段的风格，还是类似一般 table 见面哈
const logList = ref([])
const logList = ref([]) // TODO @super：logList -> list，简洁一点。因为当前就一个 table 哈
const autoRefresh = ref(false)
let timer: any = null // TODO @super：autoRefreshEnable，autoRefreshTimer；对应上
@ -140,7 +149,7 @@ watch(autoRefresh, (newValue) => {
}
})
/** 监听设备 ID 变化 */
/** 监听设备标识变化 */
watch(
() => props.deviceKey,
(newValue) => {

1
src/views/iot/device/device/detail/DeviceDetailsModel.vue
View File

@ -1,3 +1,4 @@
<!-- 设备物模型：运行状态（属性）、事件管理、服务调用 -->
<template>
<ContentWrap>
<el-tabs v-model="activeTab">

7
src/views/iot/device/device/detail/DeviceDetailsSimulator.vue
View File

@ -1,3 +1,4 @@
<!-- 模拟设备 -->
<template>
<ContentWrap>
<el-row :gutter="20">
@ -17,9 +18,11 @@
:stripe="true"
>
<!-- TODO @super：每个 colum 搞下宽度，避免 table 每一列最后有个 . -->
<!-- TODO @super：可以左侧 fixed -->
<el-table-column align="center" label="功能名称" prop="name" />
<el-table-column align="center" label="标识符" prop="identifier" />
<el-table-column align="center" label="数据类型" prop="identifier">
<!-- TODO @super：不用翻译，可以减少宽度的占用 -->
<template #default="{ row }">
{{ dataTypeOptionsLabel(row.property?.dataType) ?? '-' }}
</template>
@ -76,6 +79,7 @@
{{ `${item.name}-${item.value}` }}
</div>
</div>
<!-- TODO @super：要不要兜底下，没翻译的类型，直接展示 json？ -->
</template>
<!-- 服务 -->
<div v-if="row.type === ThingModelType.SERVICE">
@ -87,12 +91,14 @@
</div>
</template>
</el-table-column>
<!-- TODO @super：可以右侧 fixed -->
<el-table-column label="值" align="center" width="80">
<template #default="scope">
<el-input v-model="scope.row.simulateValue" class="!w-60px" />
</template>
</el-table-column>
</el-table>
<!-- TODO @super：发送按钮，可以放在右侧哈。因为我们的 simulateValue 就在最右侧 -->
<div class="mt-10px">
<el-button
type="primary"
@ -109,6 +115,7 @@
<!-- TODO @super：待实现 -->
<el-tab-pane label="事件上报" name="event">
<ContentWrap>
<!-- TODO @super：因为事件是每个 event 去模拟，而不是类似属性的批量上传。所以，可以每一列后面有个“模拟”按钮。另外，“值”使用 textarea，高度 3 -->
<!-- <el-table v-loading="loading" :data="eventList" :stripe="true">
<el-table-column label="功能名称" align="center" prop="name" />
<el-table-column label="标识符" align="center" prop="identifier" />

1
src/views/iot/device/device/detail/index.vue
View File

@ -17,7 +17,6 @@
<el-tab-pane label="子设备管理" v-if="product.deviceType === DeviceTypeEnum.GATEWAY" />
<el-tab-pane label="设备影子" />
<el-tab-pane label="设备日志" name="log">
<!-- TODO @super：字段类型，:device-key。idea 会告警，应该是 string -->
<DeviceDetailsLog v-if="activeTab === 'log'" :device-key="device.deviceKey" />
</el-tab-pane>
<el-tab-pane label="模拟设备" name="simulator">