feat: 新功能
This commit is contained in:
陈益
parent
f967080ccd
commit
e2d73b815e
1
.gitignore
vendored
1
.gitignore
vendored
@ -54,3 +54,4 @@ vite.config.ts.*
|
||||
/apps/backend-mock
|
||||
/playground
|
||||
/docs
|
||||
/.vs
|
||||
|
||||
@ -30,9 +30,9 @@ VITE_REFRESH_ROLE = true
|
||||
|
||||
# 后端接口地址
|
||||
#VITE_APP_API_ADDRESS=http://47.110.53.196:28080
|
||||
VITE_APP_API_ADDRESS=http://10.10.70.11:10500
|
||||
VITE_APP_API_ADDRESS=http://localhost:10500
|
||||
|
||||
# websocket地址
|
||||
VITE_WEBSOCKET_URL=http://10.10.70.11:10500/signalr/notification
|
||||
VITE_WEBSOCKET_URL=http://localhost:10500/signalr/notification
|
||||
|
||||
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
export * from './auth';
|
||||
export * from './menu';
|
||||
export * from './onenet';
|
||||
export * from './user';
|
||||
|
||||
40
apps/web-antd/src/api/core/onenet.ts
Normal file
40
apps/web-antd/src/api/core/onenet.ts
Normal file
@ -0,0 +1,40 @@
|
||||
import { requestClient } from '../request';
|
||||
|
||||
export interface OneNETLogInfo {
|
||||
systemName: string;
|
||||
projectId: string;
|
||||
dataType: string;
|
||||
deviceType: string;
|
||||
deviceId: string;
|
||||
timestamps: number;
|
||||
devicePath: string;
|
||||
productId: string;
|
||||
platformDeviceId: string;
|
||||
messageType: string;
|
||||
protocol: string;
|
||||
focusAddress: string;
|
||||
meterAddress: string;
|
||||
rawMessage: string;
|
||||
receivedPayload: string;
|
||||
receivedTime: number;
|
||||
}
|
||||
|
||||
export interface OneNETLogPageParams {
|
||||
pageIndex: number;
|
||||
pageSize: number;
|
||||
DeviceType?: string;
|
||||
DeviceId?: string;
|
||||
FocusAddress?: string;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
export interface OneNETLogPageResult {
|
||||
items: OneNETLogInfo[];
|
||||
totalCount: number;
|
||||
}
|
||||
|
||||
export const postOneNETLogInfoPage = (params: OneNETLogPageParams) => {
|
||||
return requestClient.post<OneNETLogPageResult>('/TableModel/OneNETLogInfo', {
|
||||
data: params,
|
||||
});
|
||||
};
|
||||
@ -81,6 +81,7 @@
|
||||
"projectId": "Project ID",
|
||||
"dataType": "Data Type",
|
||||
"deviceType": "Device Type",
|
||||
"deviceId": "Device ID",
|
||||
"timestamps": "Timestamps",
|
||||
"manualOrNot": "Manual Operation",
|
||||
"isTimeout": "Timeout Status",
|
||||
@ -266,16 +267,16 @@
|
||||
"BusinessSystemEnum": "BusinessSystemEnum"
|
||||
},
|
||||
"IoTDBDynamicObjectData": {
|
||||
"DeviceId": "设备ID",
|
||||
"DeviceName": "设备名称",
|
||||
"DeviceType": "设备类型",
|
||||
"DeviceStatus": "设备状态",
|
||||
"DeviceLocation": "设备位置",
|
||||
"DeviceDescription": "设备描述",
|
||||
"DeviceProperties": "设备属性",
|
||||
"DeviceTags": "设备标签",
|
||||
"DeviceCreateTime": "设备创建时间",
|
||||
"DeviceUpdateTime": "设备更新时间",
|
||||
"DeviceLastActiveTime": "设备最后活跃时间"
|
||||
"DeviceId": "Device ID",
|
||||
"DeviceName": "Device Name",
|
||||
"DeviceType": "Device Type",
|
||||
"DeviceStatus": "Device Status",
|
||||
"DeviceLocation": "Device Location",
|
||||
"DeviceDescription": "Device Description",
|
||||
"DeviceProperties": "Device Properties",
|
||||
"DeviceTags": "Device Tags",
|
||||
"DeviceCreateTime": "Device Create Time",
|
||||
"DeviceUpdateTime": "Device Update Time",
|
||||
"DeviceLastActiveTime": "Device Last Active Time"
|
||||
}
|
||||
}
|
||||
|
||||
@ -47,5 +47,10 @@
|
||||
"Undistributed": "Undistributed",
|
||||
"SwitchOff": "Tripped",
|
||||
"Closing": "Closed",
|
||||
"MustGreaterTthan0": "Must be greater than 0"
|
||||
"MustGreaterTthan0": "Must be greater than 0",
|
||||
"detail": "Detail",
|
||||
"exporting": "Exporting data...",
|
||||
"exportSuccess": "Data exported successfully",
|
||||
"exportFailed": "Data export failed",
|
||||
"getDataFailed": "Failed to get data"
|
||||
}
|
||||
|
||||
@ -81,6 +81,7 @@
|
||||
"projectId": "项目编码",
|
||||
"dataType": "数据类型",
|
||||
"deviceType": "设备类型",
|
||||
"deviceId": "设备ID",
|
||||
"timestamps": "时标",
|
||||
"manualOrNot": "是否手动操作",
|
||||
"isTimeout": "是否超时",
|
||||
|
||||
@ -47,5 +47,10 @@
|
||||
"Undistributed": "未下发",
|
||||
"SwitchOff": "跳闸",
|
||||
"Closing": "合闸",
|
||||
"MustGreaterTthan0": "必须大于0"
|
||||
"MustGreaterTthan0": "必须大于0",
|
||||
"detail": "详情",
|
||||
"exporting": "正在导出数据...",
|
||||
"exportSuccess": "数据导出成功",
|
||||
"exportFailed": "数据导出失败",
|
||||
"getDataFailed": "获取数据失败"
|
||||
}
|
||||
|
||||
186
apps/web-antd/src/views/dataManger/ctwingLog/README.md
Normal file
186
apps/web-antd/src/views/dataManger/ctwingLog/README.md
Normal file
@ -0,0 +1,186 @@
|
||||
# CTWing 日志管理页面
|
||||
|
||||
## 功能描述
|
||||
|
||||
CTWing日志管理页面用于查看和管理CTWing物联网平台的设备数据日志信息。该页面提供了完整的数据查询、分页显示、表格展示、详情查看和数据导出功能。
|
||||
|
||||
## 接口信息
|
||||
|
||||
- **接口地址**: `/TableModel/DeviceDataInfoPage`
|
||||
- **请求方法**: POST
|
||||
- **数据格式**: JSON
|
||||
|
||||
### 请求参数
|
||||
|
||||
```typescript
|
||||
{
|
||||
pageIndex: number, // 当前页码
|
||||
pageSize: number, // 每页大小
|
||||
filter?: string, // 过滤条件
|
||||
sorting?: string, // 排序条件
|
||||
DeviceType?: string, // 设备类型
|
||||
DeviceId?: string, // 设备ID
|
||||
FocusAddress?: string, // 集中器地址
|
||||
SystemName?: string, // 系统名称
|
||||
ProjectId?: string // 项目ID
|
||||
}
|
||||
```
|
||||
|
||||
### 响应数据格式
|
||||
|
||||
```typescript
|
||||
{
|
||||
items: [
|
||||
{
|
||||
systemName: string, // 系统名称
|
||||
projectId: string, // 项目ID
|
||||
dataType: string, // 数据类型
|
||||
deviceType: string, // 设备类型
|
||||
deviceId: string, // 设备ID
|
||||
timestamps: number, // 时间戳
|
||||
devicePath: string, // 设备路径
|
||||
platformTenantId: string, // 平台租户ID
|
||||
productId: string, // 产品ID
|
||||
serviceId: string, // 服务ID
|
||||
platformDeviceId: string, // 平台设备ID
|
||||
messageType: string, // 消息类型
|
||||
protocol: string, // 协议
|
||||
focusAddress: string, // 集中器地址
|
||||
meterAddress: string, // 表计地址
|
||||
rawMessage: string, // 原始消息
|
||||
receivedPayload: string, // 接收载荷
|
||||
receivedTime: number, // 接收时间
|
||||
imsi: string, // IMSI
|
||||
imei: string // IMEI
|
||||
}
|
||||
],
|
||||
totalCount: number // 总记录数
|
||||
}
|
||||
```
|
||||
|
||||
## 页面功能
|
||||
|
||||
### 1. 查询功能
|
||||
|
||||
- **集中器地址**: 支持按集中器地址查询
|
||||
- **设备ID**: 支持按设备ID查询
|
||||
- **设备类型**: 支持按设备类型查询
|
||||
- **系统名称**: 支持按系统名称查询
|
||||
- **项目ID**: 支持按项目ID查询
|
||||
|
||||
### 2. 表格展示
|
||||
|
||||
页面包含以下列：
|
||||
|
||||
| 字段名 | 显示名称 | 说明 |
|
||||
| ---------------- | ---------- | ------------------ |
|
||||
| systemName | 系统名称 | 所属系统 |
|
||||
| projectId | 项目编码 | 项目标识 |
|
||||
| dataType | 数据类型 | 数据类型 |
|
||||
| deviceType | 设备类型 | 设备类型 |
|
||||
| deviceId | 设备ID | 设备标识符 |
|
||||
| timestamps | 时标 | 数据时间戳 |
|
||||
| devicePath | 设备路径 | 设备路径信息 |
|
||||
| platformTenantId | 平台租户ID | 物联网平台租户ID |
|
||||
| productId | 产品ID | 物联网平台产品ID |
|
||||
| serviceId | 服务ID | 物联网平台服务ID |
|
||||
| platformDeviceId | 平台设备ID | 物联网平台设备ID |
|
||||
| messageType | 消息类型 | 消息类型 |
|
||||
| protocol | 协议 | 通信协议 |
|
||||
| focusAddress | 集中器地址 | 集中器地址 |
|
||||
| meterAddress | 表通信地址 | 表计通信地址 |
|
||||
| rawMessage | 原始消息 | 消息上报原始内容 |
|
||||
| receivedPayload | 接收载荷 | 消息上报结果 |
|
||||
| receivedTime | 接收时间 | 消息上报时间 |
|
||||
| imsi | IMSI | 国际移动用户识别码 |
|
||||
| imei | IMEI | 国际移动设备识别码 |
|
||||
| 操作 | 操作 | 详情查看按钮 |
|
||||
|
||||
### 3. 分页功能
|
||||
|
||||
- 支持分页显示
|
||||
- 可配置每页显示数量
|
||||
- 显示总记录数
|
||||
|
||||
### 4. 表格功能
|
||||
|
||||
- 支持列排序
|
||||
- 支持列宽调整
|
||||
- 支持列显示/隐藏
|
||||
- 支持表格配置保存
|
||||
|
||||
### 5. 详情查看功能
|
||||
|
||||
- 点击表格中的"详情"按钮可查看完整的数据信息
|
||||
- 详情对话框以描述列表形式展示所有字段
|
||||
- 支持长文本内容的滚动查看
|
||||
- 时间字段自动格式化为本地时间显示
|
||||
|
||||
### 6. 数据导出功能
|
||||
|
||||
- 支持将当前查询结果导出为Excel文件
|
||||
- 导出文件名包含当前日期
|
||||
- 导出过程中显示加载提示
|
||||
- 支持导出失败的错误提示
|
||||
|
||||
## 使用说明
|
||||
|
||||
1. **访问页面**: 通过路由访问CTWing日志管理页面
|
||||
2. **查询数据**: 在查询表单中输入相应的查询条件
|
||||
3. **查看结果**: 表格会显示符合条件的数据记录
|
||||
4. **查看详情**: 点击表格中的"详情"按钮查看完整信息
|
||||
5. **分页浏览**: 使用分页控件浏览更多数据
|
||||
6. **导出数据**: 点击工具栏中的"导出"按钮导出当前查询结果
|
||||
7. **自定义表格**: 使用表格工具栏自定义列显示和排序
|
||||
|
||||
## 技术实现
|
||||
|
||||
### 主要组件
|
||||
|
||||
- **VxeGrid**: 使用VxeTable组件实现表格功能
|
||||
- **VbenForm**: 使用Vben表单组件实现查询功能
|
||||
- **Page**: 使用Page组件作为页面容器
|
||||
- **a-modal**: 使用Ant Design Modal组件实现详情对话框
|
||||
- **a-descriptions**: 使用Ant Design Descriptions组件展示详情信息
|
||||
|
||||
### 数据流
|
||||
|
||||
1. 页面初始化时从URL参数获取初始查询条件
|
||||
2. 用户输入查询条件后触发数据请求
|
||||
3. 调用API接口获取数据
|
||||
4. 将数据渲染到表格中显示
|
||||
5. 用户点击详情按钮时显示详情对话框
|
||||
6. 用户点击导出按钮时调用导出接口
|
||||
|
||||
### 错误处理
|
||||
|
||||
- API调用失败时显示错误信息
|
||||
- 数据为空时显示空状态
|
||||
- 网络异常时提供重试机制
|
||||
- 导出失败时显示具体错误信息
|
||||
|
||||
### 性能优化
|
||||
|
||||
- 使用虚拟滚动处理大量数据
|
||||
- 分页加载减少初始加载时间
|
||||
- 表格配置本地存储提升用户体验
|
||||
- 详情对话框懒加载减少内存占用
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 确保后端API接口正常运行
|
||||
2. 检查网络连接状态
|
||||
3. 注意查询条件的有效性
|
||||
4. 大量数据时注意性能优化
|
||||
5. 导出功能需要后端支持对应的导出接口
|
||||
6. 详情查看功能适用于数据量较大的场景
|
||||
|
||||
## 扩展功能
|
||||
|
||||
### 可选的增强功能
|
||||
|
||||
- **批量操作**: 支持批量删除、批量导出等操作
|
||||
- **数据筛选**: 支持更复杂的数据筛选条件
|
||||
- **图表展示**: 支持数据统计图表展示
|
||||
- **实时更新**: 支持数据实时刷新功能
|
||||
- **权限控制**: 支持基于角色的功能权限控制
|
||||
@ -1,69 +1,310 @@
|
||||
<script setup lang="ts">
|
||||
import type {
|
||||
CTWingLogItem,
|
||||
CTWingLogQueryParams,
|
||||
CTWingLogResponse,
|
||||
} from './types';
|
||||
|
||||
import type { VbenFormProps } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
|
||||
import { h, ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { postTreeModelDeviceDataInfoPage } from '#/api-client';
|
||||
import { client } from '#/api-client';
|
||||
import { Icon } from '#/components/icon';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { querySchema, tableSchema } from './schema';
|
||||
|
||||
defineOptions({
|
||||
name: 'ctwingLog',
|
||||
name: 'CtwingLog',
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const { DeviceType, DeviceId, FocusAddress } = route.query;
|
||||
|
||||
// 详情对话框
|
||||
const detailVisible = ref(false);
|
||||
const detailData = ref<CTWingLogItem | null>(null);
|
||||
|
||||
// 自定义API调用函数，使用正确的接口地址
|
||||
const callDeviceDataInfoPage = async (
|
||||
params: CTWingLogQueryParams,
|
||||
): Promise<CTWingLogResponse> => {
|
||||
try {
|
||||
const { data } = await client.post<CTWingLogResponse>(
|
||||
'/TableModel/CTWingLogInfo',
|
||||
{
|
||||
body: params,
|
||||
},
|
||||
);
|
||||
return data;
|
||||
} catch (error) {
|
||||
console.error('API调用失败:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
// 查看详情
|
||||
const showDetail = (row: CTWingLogItem) => {
|
||||
detailData.value = row;
|
||||
detailVisible.value = true;
|
||||
};
|
||||
|
||||
// 导出数据
|
||||
const exportData = async () => {
|
||||
try {
|
||||
message.loading($t('common.exporting'));
|
||||
|
||||
// 获取当前查询条件
|
||||
const formValues = await gridApi.formApi.getValues();
|
||||
|
||||
const { data } = await client.post(
|
||||
'/TableModel/CTWingLogInfo/Export',
|
||||
{
|
||||
body: {
|
||||
...formValues,
|
||||
DeviceType,
|
||||
DeviceId,
|
||||
FocusAddress,
|
||||
},
|
||||
},
|
||||
{
|
||||
responseType: 'blob',
|
||||
},
|
||||
);
|
||||
|
||||
// 创建下载链接
|
||||
const blob = new Blob([data], {
|
||||
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||||
});
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `CTWing日志_${new Date().toISOString().split('T')[0]}.xlsx`;
|
||||
document.body.append(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
window.URL.revokeObjectURL(url);
|
||||
|
||||
message.success($t('common.exportSuccess'));
|
||||
} catch (error) {
|
||||
console.error('导出失败:', error);
|
||||
message.error($t('common.exportFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
const formOptions: VbenFormProps = {
|
||||
schema: querySchema.value,
|
||||
initialValues: {
|
||||
FocusAddress: FocusAddress as string,
|
||||
DeviceId: DeviceId as string,
|
||||
DeviceType: DeviceType as string,
|
||||
},
|
||||
submitOnChange: false,
|
||||
};
|
||||
const gridOptions: VxeGridProps<any> = {
|
||||
|
||||
const gridOptions: VxeGridProps<CTWingLogItem> = {
|
||||
checkboxConfig: {
|
||||
highlight: true,
|
||||
labelField: 'name',
|
||||
},
|
||||
columns: tableSchema.value,
|
||||
columns: [
|
||||
...tableSchema.value,
|
||||
{
|
||||
title: $t('common.action'),
|
||||
width: 120,
|
||||
fixed: 'right',
|
||||
slots: {
|
||||
default: ({ row }) => [
|
||||
h(
|
||||
'a-button',
|
||||
{
|
||||
type: 'link',
|
||||
size: 'small',
|
||||
onClick: () => showDetail(row),
|
||||
},
|
||||
$t('common.detail'),
|
||||
),
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
pagerConfig: {},
|
||||
pagerConfig: {
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
},
|
||||
toolbarConfig: {
|
||||
custom: true,
|
||||
search: true,
|
||||
},
|
||||
customConfig: {
|
||||
storage: true,
|
||||
},
|
||||
showOverflow: true,
|
||||
showHeaderOverflow: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
const { data } = await postTreeModelDeviceDataInfoPage({
|
||||
body: {
|
||||
try {
|
||||
// 使用自定义API调用函数
|
||||
const data = await callDeviceDataInfoPage({
|
||||
...formValues,
|
||||
pageIndex: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
DeviceType,
|
||||
DeviceId,
|
||||
FocusAddress,
|
||||
},
|
||||
});
|
||||
// 确保返回的数据包含totalCount字段
|
||||
const result = {
|
||||
items: data.items || [],
|
||||
totalCount: data.totalCount || (data.items ? data.items.length : 0),
|
||||
};
|
||||
return result;
|
||||
});
|
||||
|
||||
// 确保返回的数据包含totalCount字段
|
||||
const result = {
|
||||
items: data.items || [],
|
||||
totalCount: data.totalCount || (data.items ? data.items.length : 0),
|
||||
};
|
||||
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error('获取数据失败:', error);
|
||||
message.error($t('common.getDataFailed'));
|
||||
return {
|
||||
items: [],
|
||||
totalCount: 0,
|
||||
};
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
|
||||
const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<Grid />
|
||||
<Grid>
|
||||
<template #toolbar-actions>
|
||||
<a-button type="primary" @click="exportData">
|
||||
<template #icon>
|
||||
<Icon icon="ant-design:download-outlined" />
|
||||
</template>
|
||||
{{ $t('common.export') }}
|
||||
</a-button>
|
||||
</template>
|
||||
</Grid>
|
||||
|
||||
<!-- 详情对话框 -->
|
||||
<a-modal
|
||||
v-model:open="detailVisible"
|
||||
:title="$t('common.detail')"
|
||||
width="800px"
|
||||
:footer="null"
|
||||
>
|
||||
<div v-if="detailData" class="detail-content">
|
||||
<a-descriptions :column="2" bordered>
|
||||
<a-descriptions-item :label="$t('abp.IoTDBBase.SystemName')">
|
||||
{{ detailData.systemName }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item :label="$t('abp.IoTDBBase.ProjectId')">
|
||||
{{ detailData.projectId }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item :label="$t('abp.IoTDBBase.IoTDataType')">
|
||||
{{ detailData.dataType }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item :label="$t('abp.IoTDBBase.DeviceType')">
|
||||
{{ detailData.deviceType }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item :label="$t('abp.IoTDBBase.DeviceId')">
|
||||
{{ detailData.deviceId }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item :label="$t('abp.IoTDBBase.Timestamps')">
|
||||
{{
|
||||
detailData.timestamps
|
||||
? new Date(detailData.timestamps).toLocaleString()
|
||||
: ''
|
||||
}}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item :label="$t('abp.IoTDBBase.DevicePath')">
|
||||
{{ detailData.devicePath }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item :label="$t('abp.CTWingLog.PlatformTenantId')">
|
||||
{{ detailData.platformTenantId }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item :label="$t('abp.CTWingLog.ProductId')">
|
||||
{{ detailData.productId }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item :label="$t('abp.CTWingLog.ServiceId')">
|
||||
{{ detailData.serviceId }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item :label="$t('abp.CTWingLog.PlatformDeviceId')">
|
||||
{{ detailData.platformDeviceId }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item :label="$t('abp.CTWingLog.MessageType')">
|
||||
{{ detailData.messageType }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item :label="$t('abp.CTWingLog.Protocol')">
|
||||
{{ detailData.protocol }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item :label="$t('abp.CTWingLog.FocusAddress')">
|
||||
{{ detailData.focusAddress }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item :label="$t('abp.CTWingLog.MeterAddress')">
|
||||
{{ detailData.meterAddress }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item :label="$t('abp.CTWingLog.ReceivedTime')">
|
||||
{{
|
||||
detailData.receivedTime
|
||||
? new Date(detailData.receivedTime).toLocaleString()
|
||||
: ''
|
||||
}}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item :label="$t('abp.CTWingLog.IMSI')">
|
||||
{{ detailData.imsi }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item :label="$t('abp.CTWingLog.IMEI')">
|
||||
{{ detailData.imei }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
:label="$t('abp.CTWingLog.RawMessage')"
|
||||
:span="2"
|
||||
>
|
||||
<div class="message-content">{{ detailData.rawMessage }}</div>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
:label="$t('abp.CTWingLog.ReceivedPayload')"
|
||||
:span="2"
|
||||
>
|
||||
<div class="message-content">{{ detailData.receivedPayload }}</div>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
</a-modal>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.detail-content {
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
max-height: 200px;
|
||||
padding: 8px;
|
||||
overflow-y: auto;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -10,33 +10,134 @@ export const querySchema = computed(() => [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'FocusAddress',
|
||||
label: $t('abp.focus.focusAddress'),
|
||||
label: $t('abp.CTWingLog.FocusAddress'),
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'DeviceId',
|
||||
label: $t('abp.IoTDBBase.DeviceId'),
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'DeviceType',
|
||||
label: $t('abp.IoTDBBase.DeviceType'),
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'SystemName',
|
||||
label: $t('abp.IoTDBBase.SystemName'),
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'ProjectId',
|
||||
label: $t('abp.IoTDBBase.ProjectId'),
|
||||
},
|
||||
]);
|
||||
|
||||
export const tableSchema: any = computed((): VxeGridProps['columns'] => [
|
||||
{ title: $t('common.seq'), type: 'seq', width: 50 },
|
||||
{ field: 'systemName', title: $t('abp.log.systemName'), minWidth: '150' },
|
||||
{ field: 'systemName', title: $t('abp.IoTDBBase.SystemName'), minWidth: 150 },
|
||||
{
|
||||
field: 'projectId',
|
||||
title: $t('abp.log.projectId'),
|
||||
minWidth: '150',
|
||||
title: $t('abp.IoTDBBase.ProjectId'),
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
field: 'dataType',
|
||||
title: $t('abp.log.dataType'),
|
||||
minWidth: '150',
|
||||
title: $t('abp.IoTDBBase.IoTDataType'),
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
field: 'deviceType',
|
||||
title: $t('abp.log.deviceType'),
|
||||
minWidth: '150',
|
||||
title: $t('abp.IoTDBBase.DeviceType'),
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
field: 'times',
|
||||
title: $t('abp.log.timestamps'),
|
||||
minWidth: '150',
|
||||
field: 'deviceId',
|
||||
title: $t('abp.IoTDBBase.DeviceId'),
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
field: 'timestamps',
|
||||
title: $t('abp.IoTDBBase.Timestamps'),
|
||||
minWidth: 150,
|
||||
formatter: ({ cellValue }) => {
|
||||
return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss');
|
||||
return cellValue ? dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss') : '';
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'devicePath',
|
||||
title: $t('abp.IoTDBBase.DevicePath'),
|
||||
minWidth: 200,
|
||||
},
|
||||
{
|
||||
field: 'platformTenantId',
|
||||
title: $t('abp.CTWingLog.PlatformTenantId'),
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
field: 'productId',
|
||||
title: $t('abp.CTWingLog.ProductId'),
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
field: 'serviceId',
|
||||
title: $t('abp.CTWingLog.ServiceId'),
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
field: 'platformDeviceId',
|
||||
title: $t('abp.CTWingLog.PlatformDeviceId'),
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
field: 'messageType',
|
||||
title: $t('abp.CTWingLog.MessageType'),
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
field: 'protocol',
|
||||
title: $t('abp.CTWingLog.Protocol'),
|
||||
minWidth: 100,
|
||||
},
|
||||
{
|
||||
field: 'focusAddress',
|
||||
title: $t('abp.CTWingLog.FocusAddress'),
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
field: 'meterAddress',
|
||||
title: $t('abp.CTWingLog.MeterAddress'),
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
field: 'rawMessage',
|
||||
title: $t('abp.CTWingLog.RawMessage'),
|
||||
minWidth: 200,
|
||||
showOverflow: false,
|
||||
},
|
||||
{
|
||||
field: 'receivedPayload',
|
||||
title: $t('abp.CTWingLog.ReceivedPayload'),
|
||||
minWidth: 200,
|
||||
showOverflow: false,
|
||||
},
|
||||
{
|
||||
field: 'receivedTime',
|
||||
title: $t('abp.CTWingLog.ReceivedTime'),
|
||||
minWidth: 150,
|
||||
formatter: ({ cellValue }) => {
|
||||
return cellValue ? dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss') : '';
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'imsi',
|
||||
title: $t('abp.CTWingLog.IMSI'),
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
field: 'imei',
|
||||
title: $t('abp.CTWingLog.IMEI'),
|
||||
minWidth: 150,
|
||||
},
|
||||
]);
|
||||
|
||||
99
apps/web-antd/src/views/dataManger/ctwingLog/types.ts
Normal file
99
apps/web-antd/src/views/dataManger/ctwingLog/types.ts
Normal file
@ -0,0 +1,99 @@
|
||||
/**
|
||||
* CTWing日志数据项类型定义
|
||||
*/
|
||||
export interface CTWingLogItem {
|
||||
/** 系统名称 */
|
||||
systemName?: string;
|
||||
/** 项目ID */
|
||||
projectId?: string;
|
||||
/** 数据类型 */
|
||||
dataType?: string;
|
||||
/** 设备类型 */
|
||||
deviceType?: string;
|
||||
/** 设备ID */
|
||||
deviceId?: string;
|
||||
/** 时间戳 */
|
||||
timestamps?: number;
|
||||
/** 设备路径 */
|
||||
devicePath?: string;
|
||||
/** 平台租户ID */
|
||||
platformTenantId?: string;
|
||||
/** 产品ID */
|
||||
productId?: string;
|
||||
/** 服务ID */
|
||||
serviceId?: string;
|
||||
/** 平台设备ID */
|
||||
platformDeviceId?: string;
|
||||
/** 消息类型 */
|
||||
messageType?: string;
|
||||
/** 协议 */
|
||||
protocol?: string;
|
||||
/** 集中器地址 */
|
||||
focusAddress?: string;
|
||||
/** 表计地址 */
|
||||
meterAddress?: string;
|
||||
/** 原始消息 */
|
||||
rawMessage?: string;
|
||||
/** 接收载荷 */
|
||||
receivedPayload?: string;
|
||||
/** 接收时间 */
|
||||
receivedTime?: number;
|
||||
/** IMSI */
|
||||
imsi?: string;
|
||||
/** IMEI */
|
||||
imei?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* CTWing日志查询参数类型定义
|
||||
*/
|
||||
export interface CTWingLogQueryParams {
|
||||
/** 当前页码 */
|
||||
pageIndex?: number;
|
||||
/** 每页大小 */
|
||||
pageSize?: number;
|
||||
/** 过滤条件 */
|
||||
filter?: string;
|
||||
/** 排序条件 */
|
||||
sorting?: string;
|
||||
/** 设备类型 */
|
||||
DeviceType?: string;
|
||||
/** 设备ID */
|
||||
DeviceId?: string;
|
||||
/** 集中器地址 */
|
||||
FocusAddress?: string;
|
||||
/** 系统名称 */
|
||||
SystemName?: string;
|
||||
/** 项目ID */
|
||||
ProjectId?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* CTWing日志响应数据类型定义
|
||||
*/
|
||||
export interface CTWingLogResponse {
|
||||
/** 数据项列表 */
|
||||
items?: CTWingLogItem[];
|
||||
/** 总记录数 */
|
||||
totalCount?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 详情对话框数据类型定义
|
||||
*/
|
||||
export interface DetailDialogData {
|
||||
/** 是否显示 */
|
||||
visible: boolean;
|
||||
/** 当前数据 */
|
||||
data: CTWingLogItem | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出参数类型定义
|
||||
*/
|
||||
export interface ExportParams extends CTWingLogQueryParams {
|
||||
/** 导出格式 */
|
||||
format?: 'csv' | 'xlsx';
|
||||
/** 文件名 */
|
||||
filename?: string;
|
||||
}
|
||||
@ -7,12 +7,12 @@ import { useRoute } from 'vue-router';
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { postTreeModelDeviceDataInfoPage } from '#/api-client';
|
||||
import { postOneNETLogInfoPage } from '#/api/core';
|
||||
|
||||
import { querySchema, tableSchema } from './schema';
|
||||
|
||||
defineOptions({
|
||||
name: 'MeasuringPoint',
|
||||
name: 'OneNETLog',
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
@ -38,15 +38,13 @@ const gridOptions: VxeGridProps<any> = {
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
const { data } = await postTreeModelDeviceDataInfoPage({
|
||||
body: {
|
||||
...formValues,
|
||||
pageIndex: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
DeviceType,
|
||||
DeviceId,
|
||||
FocusAddress,
|
||||
},
|
||||
const { data } = await postOneNETLogInfoPage({
|
||||
pageIndex: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
DeviceType,
|
||||
DeviceId,
|
||||
FocusAddress,
|
||||
...formValues,
|
||||
});
|
||||
// 确保返回的数据包含totalCount字段
|
||||
const result = {
|
||||
|
||||
@ -10,33 +10,94 @@ export const querySchema = computed(() => [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'FocusAddress',
|
||||
label: $t('abp.focus.focusAddress'),
|
||||
label: $t('abp.OneNETLog.FocusAddress'),
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'DeviceId',
|
||||
label: $t('abp.IoTDBBase.DeviceId'),
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'DeviceType',
|
||||
label: $t('abp.IoTDBBase.DeviceType'),
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'ProductId',
|
||||
label: $t('abp.OneNETLog.ProductId'),
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'PlatformDeviceId',
|
||||
label: $t('abp.OneNETLog.PlatformDeviceId'),
|
||||
},
|
||||
]);
|
||||
export const tableSchema: any = computed((): VxeGridProps['columns'] => [
|
||||
{ title: $t('common.seq'), type: 'seq', width: 50 },
|
||||
{ field: 'systemName', title: $t('abp.log.systemName'), minWidth: '150' },
|
||||
{
|
||||
field: 'projectId',
|
||||
title: $t('abp.log.projectId'),
|
||||
minWidth: '150',
|
||||
field: 'systemName',
|
||||
title: $t('abp.IoTDBBase.SystemName'),
|
||||
minWidth: '120',
|
||||
},
|
||||
{ field: 'projectId', title: $t('abp.IoTDBBase.ProjectId'), minWidth: '120' },
|
||||
{
|
||||
field: 'dataType',
|
||||
title: $t('abp.log.dataType'),
|
||||
minWidth: '150',
|
||||
title: $t('abp.IoTDBBase.IoTDataType'),
|
||||
minWidth: '120',
|
||||
},
|
||||
{
|
||||
field: 'deviceType',
|
||||
title: $t('abp.log.deviceType'),
|
||||
title: $t('abp.IoTDBBase.DeviceType'),
|
||||
minWidth: '120',
|
||||
},
|
||||
{ field: 'deviceId', title: $t('abp.IoTDBBase.DeviceId'), minWidth: '120' },
|
||||
{ field: 'productId', title: $t('abp.OneNETLog.ProductId'), minWidth: '120' },
|
||||
{
|
||||
field: 'platformDeviceId',
|
||||
title: $t('abp.OneNETLog.PlatformDeviceId'),
|
||||
minWidth: '150',
|
||||
},
|
||||
{
|
||||
field: 'times',
|
||||
title: $t('abp.log.timestamps'),
|
||||
field: 'messageType',
|
||||
title: $t('abp.OneNETLog.MessageType'),
|
||||
minWidth: '120',
|
||||
},
|
||||
{ field: 'protocol', title: $t('abp.OneNETLog.Protocol'), minWidth: '100' },
|
||||
{
|
||||
field: 'focusAddress',
|
||||
title: $t('abp.OneNETLog.FocusAddress'),
|
||||
minWidth: '120',
|
||||
},
|
||||
{
|
||||
field: 'meterAddress',
|
||||
title: $t('abp.OneNETLog.MeterAddress'),
|
||||
minWidth: '120',
|
||||
},
|
||||
{
|
||||
field: 'timestamps',
|
||||
title: $t('abp.IoTDBBase.Timestamps'),
|
||||
minWidth: '150',
|
||||
formatter: ({ cellValue }) => {
|
||||
return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss');
|
||||
return cellValue ? dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss') : '';
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'receivedTime',
|
||||
title: $t('abp.OneNETLog.ReceivedTime'),
|
||||
minWidth: '150',
|
||||
formatter: ({ cellValue }) => {
|
||||
return cellValue ? dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss') : '';
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'rawMessage',
|
||||
title: $t('abp.OneNETLog.RawMessage'),
|
||||
minWidth: '200',
|
||||
},
|
||||
{
|
||||
field: 'receivedPayload',
|
||||
title: $t('abp.OneNETLog.ReceivedPayload'),
|
||||
minWidth: '200',
|
||||
},
|
||||
]);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user