Skip to content

phsl / admin

Go to a project
Commit 736b82de by YunaiV
Options

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

parent 3d65f1c5
Showing with 32 additions and 14 deletions
src/api/iot/device/device/index.ts
...@@ -151,7 +151,6 @@ export const DeviceApi = { ...@@ -151,7 +151,6 @@ export const DeviceApi = {
// 查询设备日志分页 // 查询设备日志分页
getDeviceLogPage: async (params: any) => { getDeviceLogPage: async (params: any) => {
// TODO @super：/iot/log-page 或者 /iot/log/page return await request.get({ url: `/iot/device/log/page`, params })
return await request.get({ url: `/iot/device/data/log/page`, params })
} }
} }
src/views/iot/device/device/detail/DeviceDataDetail.vue
<!-- TODO 芋艿：待 review -->
<template> <template>
<Dialog title="查看数据" v-model="dialogVisible"> <Dialog title="查看数据" v-model="dialogVisible">
<ContentWrap> <ContentWrap>
...@@ -57,7 +58,7 @@ import { DeviceApi, DeviceHistoryDataVO, DeviceVO } from '@/api/iot/device/devic ...@@ -57,7 +58,7 @@ import { DeviceApi, DeviceHistoryDataVO, DeviceVO } from '@/api/iot/device/devic
import { ProductVO } from '@/api/iot/product/product' import { ProductVO } from '@/api/iot/product/product'
import { beginOfDay, dateFormatter, endOfDay, formatDate } from '@/utils/formatTime' import { beginOfDay, dateFormatter, endOfDay, formatDate } from '@/utils/formatTime'
const props = defineProps<{ product: ProductVO; device: DeviceVO }>() defineProps<{ product: ProductVO; device: DeviceVO }>()
/** IoT 设备 数据详情 */ /** IoT 设备 数据详情 */
defineOptions({ name: 'IoTDeviceDataDetail' }) defineOptions({ name: 'IoTDeviceDataDetail' })
......
src/views/iot/device/device/detail/DeviceDetailsHeader.vue
<!-- 设备信息（头部） -->
<template> <template>
<div> <div>
<div class="flex items-start justify-between"> <div class="flex items-start justify-between">
......
src/views/iot/device/device/detail/DeviceDetailsInfo.vue
<!-- 设备信息 -->
<template> <template>
<ContentWrap> <ContentWrap>
<el-collapse v-model="activeNames"> <el-collapse v-model="activeNames">
......
src/views/iot/device/device/detail/DeviceDetailsLog.vue
<!-- 设备日志 -->
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 搜索区域 --> <!-- 搜索区域 -->
<el-form :model="queryParams" inline> <el-form :model="queryParams" inline>
<el-form-item> <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="" /> <el-option label="所有" value="" />
<!-- TODO @super：搞成枚举 --> <!-- TODO @super：搞成枚举 -->
<el-option label="状态" value="state" /> <el-option label="状态" value="state" />
...@@ -13,13 +14,22 @@ ...@@ -13,13 +14,22 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<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-form-item> <el-form-item>
<el-button type="primary" @click="handleQuery"> <el-button type="primary" @click="handleQuery">
<Icon icon="ep:search" class="mr-5px" /> 搜索 <Icon icon="ep:search" class="mr-5px" /> 搜索
</el-button> </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-item>
</el-form> </el-form>
...@@ -31,7 +41,8 @@ ...@@ -31,7 +41,8 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="类型" align="center" prop="type" width="120" /> <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-column label="内容" align="center" prop="content" :show-overflow-tooltip="true" />
</el-table> </el-table>
...@@ -55,12 +66,11 @@ const props = defineProps<{ ...@@ -55,12 +66,11 @@ const props = defineProps<{
deviceKey: string deviceKey: string
}>() }>()
//TODO:后续看看使用什么查询条件 目前后端是留了时间范围 type subType
// 查询参数 // 查询参数
const queryParams = reactive({ const queryParams = reactive({
deviceKey: props.deviceKey, deviceKey: props.deviceKey,
// type: '', type: '',
// keyword: '', identifier: '',
pageNo: 1, pageNo: 1,
pageSize: 10 pageSize: 10
}) })
...@@ -68,8 +78,7 @@ const queryParams = reactive({ ...@@ -68,8 +78,7 @@ const queryParams = reactive({
// 列表数据 // 列表数据
const loading = ref(false) const loading = ref(false)
const total = ref(0) const total = ref(0)
// TODO @super：字段的风格，还是类似一般 table 见面哈 const logList = ref([]) // TODO @super：logList -> list，简洁一点。因为当前就一个 table 哈
const logList = ref([])
const autoRefresh = ref(false) const autoRefresh = ref(false)
let timer: any = null // TODO @super：autoRefreshEnable，autoRefreshTimer；对应上 let timer: any = null // TODO @super：autoRefreshEnable，autoRefreshTimer；对应上
...@@ -140,7 +149,7 @@ watch(autoRefresh, (newValue) => { ...@@ -140,7 +149,7 @@ watch(autoRefresh, (newValue) => {
} }
}) })
/** 监听设备 ID 变化 */ /** 监听设备标识变化 */
watch( watch(
() => props.deviceKey, () => props.deviceKey,
(newValue) => { (newValue) => {
......
src/views/iot/device/device/detail/DeviceDetailsModel.vue
<!-- 设备物模型：运行状态（属性）、事件管理、服务调用 -->
<template> <template>
<ContentWrap> <ContentWrap>
<el-tabs v-model="activeTab"> <el-tabs v-model="activeTab">
......
src/views/iot/device/device/detail/DeviceDetailsSimulator.vue
<!-- 模拟设备 -->
<template> <template>
<ContentWrap> <ContentWrap>
<el-row :gutter="20"> <el-row :gutter="20">
...@@ -17,9 +18,11 @@ ...@@ -17,9 +18,11 @@
:stripe="true" :stripe="true"
> >
<!-- TODO @super：每个 colum 搞下宽度，避免 table 每一列最后有个 . --> <!-- TODO @super：每个 colum 搞下宽度，避免 table 每一列最后有个 . -->
<!-- TODO @super：可以左侧 fixed -->
<el-table-column align="center" label="功能名称" prop="name" /> <el-table-column align="center" label="功能名称" prop="name" />
<el-table-column align="center" label="标识符" prop="identifier" /> <el-table-column align="center" label="标识符" prop="identifier" />
<el-table-column align="center" label="数据类型" prop="identifier"> <el-table-column align="center" label="数据类型" prop="identifier">
<!-- TODO @super：不用翻译，可以减少宽度的占用 -->
<template #default="{ row }"> <template #default="{ row }">
{{ dataTypeOptionsLabel(row.property?.dataType) ?? '-' }} {{ dataTypeOptionsLabel(row.property?.dataType) ?? '-' }}
</template> </template>
...@@ -76,6 +79,7 @@ ...@@ -76,6 +79,7 @@
{{ `${item.name}-${item.value}` }} {{ `${item.name}-${item.value}` }}
</div> </div>
</div> </div>
<!-- TODO @super：要不要兜底下，没翻译的类型，直接展示 json？ -->
</template> </template>
<!-- 服务 --> <!-- 服务 -->
<div v-if="row.type === ThingModelType.SERVICE"> <div v-if="row.type === ThingModelType.SERVICE">
...@@ -87,12 +91,14 @@ ...@@ -87,12 +91,14 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<!-- TODO @super：可以右侧 fixed -->
<el-table-column label="值" align="center" width="80"> <el-table-column label="值" align="center" width="80">
<template #default="scope"> <template #default="scope">
<el-input v-model="scope.row.simulateValue" class="!w-60px" /> <el-input v-model="scope.row.simulateValue" class="!w-60px" />
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- TODO @super：发送按钮，可以放在右侧哈。因为我们的 simulateValue 就在最右侧 -->
<div class="mt-10px"> <div class="mt-10px">
<el-button <el-button
type="primary" type="primary"
...@@ -109,6 +115,7 @@ ...@@ -109,6 +115,7 @@
<!-- TODO @super：待实现 --> <!-- TODO @super：待实现 -->
<el-tab-pane label="事件上报" name="event"> <el-tab-pane label="事件上报" name="event">
<ContentWrap> <ContentWrap>
<!-- TODO @super：因为事件是每个 event 去模拟，而不是类似属性的批量上传。所以，可以每一列后面有个“模拟”按钮。另外，“值”使用 textarea，高度 3 -->
<!-- <el-table v-loading="loading" :data="eventList" :stripe="true"> <!-- <el-table v-loading="loading" :data="eventList" :stripe="true">
<el-table-column label="功能名称" align="center" prop="name" /> <el-table-column label="功能名称" align="center" prop="name" />
<el-table-column label="标识符" align="center" prop="identifier" /> <el-table-column label="标识符" align="center" prop="identifier" />
......
src/views/iot/device/device/detail/index.vue
...@@ -17,7 +17,6 @@ ...@@ -17,7 +17,6 @@
<el-tab-pane label="子设备管理" v-if="product.deviceType === DeviceTypeEnum.GATEWAY" /> <el-tab-pane label="子设备管理" v-if="product.deviceType === DeviceTypeEnum.GATEWAY" />
<el-tab-pane label="设备影子" /> <el-tab-pane label="设备影子" />
<el-tab-pane label="设备日志" name="log"> <el-tab-pane label="设备日志" name="log">
<!-- TODO @super：字段类型，:device-key。idea 会告警，应该是 string -->
<DeviceDetailsLog v-if="activeTab === 'log'" :device-key="device.deviceKey" /> <DeviceDetailsLog v-if="activeTab === 'log'" :device-key="device.deviceKey" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="模拟设备" name="simulator"> <el-tab-pane label="模拟设备" name="simulator">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment