|
|
|
|
# 修改记录
|
|
|
|
|
|
|
|
|
|
## 2024年修改记录
|
|
|
|
|
|
|
|
|
|
### 协议日志表格右键菜单功能
|
|
|
|
|
|
|
|
|
|
#### 修改文件:
|
|
|
|
|
`X1.WebUI/src/components/protocol-logs/ProtocolLogsTable.tsx`
|
|
|
|
|
|
|
|
|
|
#### 修改内容:
|
|
|
|
|
|
|
|
|
|
1. **功能描述**:
|
|
|
|
|
- 为协议日志表格添加了右键菜单功能
|
|
|
|
|
- 支持选择背景颜色和字体颜色
|
|
|
|
|
- 提供清空样式功能
|
|
|
|
|
|
|
|
|
|
2. **新增功能**:
|
|
|
|
|
- **右键菜单触发**:在表格行上右键点击可打开菜单
|
|
|
|
|
- **背景颜色选择**:提供7种浅色背景选项(浅红、浅橙、浅黄、浅绿、浅蓝、浅紫、浅灰)
|
|
|
|
|
- **字体颜色选择**:提供8种字体颜色选项(黑、红、橙、黄、绿、蓝、紫、灰)
|
|
|
|
|
- **清空样式**:一键清除当前行的所有自定义样式
|
|
|
|
|
|
|
|
|
|
3. **技术实现**:
|
|
|
|
|
- 添加了 `RowStyle` 接口定义行样式结构
|
|
|
|
|
- 使用 `useState` 管理行样式状态 `rowStyles`
|
|
|
|
|
- 实现了右键菜单状态管理 `contextMenu`
|
|
|
|
|
- 添加了颜色选项配置数组
|
|
|
|
|
- 实现了样式设置和清空的相关函数
|
|
|
|
|
|
|
|
|
|
4. **UI设计**:
|
|
|
|
|
- 使用网格布局展示颜色选择器
|
|
|
|
|
- 背景颜色显示为彩色方块
|
|
|
|
|
- 字体颜色显示为带字母A的彩色方块
|
|
|
|
|
- 添加了悬停效果和过渡动画
|
|
|
|
|
- 使用图标区分不同功能区域
|
|
|
|
|
|
|
|
|
|
5. **交互体验**:
|
|
|
|
|
- 右键菜单在鼠标位置显示
|
|
|
|
|
- 点击外部自动关闭菜单
|
|
|
|
|
- 颜色选择器支持悬停预览
|
|
|
|
|
- 样式变更即时生效
|
|
|
|
|
|
|
|
|
|
6. **代码结构**:
|
|
|
|
|
```tsx
|
|
|
|
|
// 行样式接口
|
|
|
|
|
interface RowStyle {
|
|
|
|
|
backgroundColor?: string;
|
|
|
|
|
color?: string;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 右键菜单状态
|
|
|
|
|
const [contextMenu, setContextMenu] = useState<{
|
|
|
|
|
visible: boolean;
|
|
|
|
|
x: number;
|
|
|
|
|
y: number;
|
|
|
|
|
rowId: string;
|
|
|
|
|
}>();
|
|
|
|
|
|
|
|
|
|
// 行样式状态
|
|
|
|
|
const [rowStyles, setRowStyles] = useState<Record<string, RowStyle>>({});
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
#### 修改时间:
|
|
|
|
|
2024年
|
|
|
|
|
|
|
|
|
|
#### 修改原因:
|
|
|
|
|
增强协议日志表格的交互功能,允许用户通过右键菜单自定义行的背景颜色和字体颜色,提升数据可视化和用户体验。
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
### 协议日志表格高度适配性优化
|
|
|
|
|
|
|
|
|
|
#### 修改文件:
|
|
|
|
|
`X1.WebUI/src/components/protocol-logs/ProtocolLogsTable.tsx`
|
|
|
|
|
|
|
|
|
|
#### 修改内容:
|
|
|
|
|
|
|
|
|
|
1. **问题描述**:
|
|
|
|
|
- 原代码使用固定的 `max-h-[600px]` 高度设置
|
|
|
|
|
- 导致在不同屏幕尺寸下无法良好适配
|
|
|
|
|
- 在小屏幕设备上可能出现显示问题
|
|
|
|
|
|
|
|
|
|
2. **解决方案**:
|
|
|
|
|
- 将固定高度 `max-h-[600px]` 替换为响应式高度设置
|
|
|
|
|
- 使用 `calc()` 函数结合视口高度(vh)进行动态计算
|
|
|
|
|
- 添加最小高度限制确保在小屏幕上的可用性
|
|
|
|
|
|
|
|
|
|
3. **具体修改**:
|
|
|
|
|
```tsx
|
|
|
|
|
// 修改前
|
|
|
|
|
<div className="max-h-[600px] overflow-auto">
|
|
|
|
|
|
|
|
|
|
// 修改后
|
|
|
|
|
<div className="h-[calc(100vh-400px)] min-h-[300px] max-h-[calc(100vh-200px)] overflow-auto">
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
4. **新高度设置说明**:
|
|
|
|
|
- `h-[calc(100vh-400px)]`:设置表格高度为视口高度减去400px(为页面其他元素预留空间)
|
|
|
|
|
- `min-h-[300px]`:设置最小高度为300px,确保在小屏幕上仍有足够的显示空间
|
|
|
|
|
- `max-h-[calc(100vh-200px)]`:设置最大高度为视口高度减去200px,防止在大屏幕上占用过多空间
|
|
|
|
|
- `overflow-auto`:保持原有的滚动功能
|
|
|
|
|
|
|
|
|
|
5. **优势**:
|
|
|
|
|
- **响应式设计**:能够根据不同的屏幕尺寸自动调整
|
|
|
|
|
- **更好的用户体验**:在各种设备上都能提供合适的显示效果
|
|
|
|
|
- **保持功能完整性**:滚动功能和其他交互特性保持不变
|
|
|
|
|
|
|
|
|
|
#### 修改时间:
|
|
|
|
|
2024年
|
|
|
|
|
|
|
|
|
|
#### 修改原因:
|
|
|
|
|
解决协议日志表格在不同屏幕尺寸下的适配性问题,提升用户体验。
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
### 协议日志仓储修改
|
|
|
|
|
|
|
|
|
|
#### 修改文件:
|
|
|
|
|
1. `X1.Domain/Repositories/Logging/IProtocolLogRepository.cs`
|
|
|
|
|
2. `X1.Infrastructure/Repositories/Logging/ProtocolLogRepository.cs`
|
|
|
|
|
|
|
|
|
|
#### 修改内容:
|
|
|
|
|
|
|
|
|
|
1. **保留现有方法**:
|
|
|
|
|
- 保留了 `GetByDeviceWithFiltersAsync` 方法,该方法用于根据设备代码和运行时状态获取协议日志
|
|
|
|
|
|
|
|
|
|
2. **新增方法**:
|
|
|
|
|
- 在接口 `IProtocolLogRepository` 中添加了 `GetProtocolLogsNotInActiveRuntimesAsync` 方法
|
|
|
|
|
- 在实现类 `ProtocolLogRepository` 中实现了该方法
|
|
|
|
|
|
|
|
|
|
3. **新方法特性**:
|
|
|
|
|
- 方法名:`GetProtocolLogsNotInActiveRuntimesAsync`
|
|
|
|
|
- 功能:获取不在活跃运行时状态中的协议日志
|
|
|
|
|
- 参数:与 `GetByDeviceWithFiltersAsync` 保持一致
|
|
|
|
|
- `deviceCode`:设备代码
|
|
|
|
|
- `runtimeCodes`:运行时代码集合
|
|
|
|
|
- `startTimestamp`:开始时间戳
|
|
|
|
|
- `endTimestamp`:结束时间戳
|
|
|
|
|
- `layerTypes`:协议层类型数组
|
|
|
|
|
- `runtimeStatuses`:运行时状态过滤
|
|
|
|
|
- `orderByDescending`:是否按时间戳降序排序
|
|
|
|
|
- `cancellationToken`:取消令牌
|
|
|
|
|
- 返回类型:`IEnumerable<ProtocolLogListDto>`
|
|
|
|
|
|
|
|
|
|
4. **SQL查询逻辑**:
|
|
|
|
|
- 基于用户提供的SQL查询
|
|
|
|
|
- **动态查询逻辑**:根据 `runtimeStatuses` 参数动态决定使用 `EXISTS` 还是 `NOT EXISTS`
|
|
|
|
|
- 当 `runtimeStatuses` 包含值 1 时,使用 `EXISTS` 包含活跃运行时状态(`RuntimeStatus = 1`)的记录
|
|
|
|
|
- 当 `runtimeStatuses` 不包含值 1 时,使用 `NOT EXISTS` 排除活跃运行时状态(`RuntimeStatus = 1`)的记录
|
|
|
|
|
- 支持所有与 `GetByDeviceWithFiltersAsync` 相同的过滤条件
|
|
|
|
|
- 高性能查询,不包含 `MessageDetailJson` 字段
|
|
|
|
|
|
|
|
|
|
5. **动态查询逻辑示例**:
|
|
|
|
|
|
|
|
|
|
**当 runtimeStatuses 包含值 1 时(使用 EXISTS)**:
|
|
|
|
|
```sql
|
|
|
|
|
SELECT
|
|
|
|
|
pl."Id",
|
|
|
|
|
pl."MessageId",
|
|
|
|
|
pl."LayerType",
|
|
|
|
|
pl."CellID",
|
|
|
|
|
pl."IMSI",
|
|
|
|
|
pl."Direction",
|
|
|
|
|
pl."UEID",
|
|
|
|
|
pl."PLMN",
|
|
|
|
|
pl."TimeMs",
|
|
|
|
|
pl."Timestamp",
|
|
|
|
|
pl."Info",
|
|
|
|
|
pl."Message",
|
|
|
|
|
pl."DeviceCode",
|
|
|
|
|
pl."RuntimeCode"
|
|
|
|
|
FROM "tb_protocol_logs" pl
|
|
|
|
|
WHERE EXISTS (
|
|
|
|
|
SELECT 1
|
|
|
|
|
FROM "tb_cellular_device_runtimes" t
|
|
|
|
|
WHERE t."RuntimeStatus" = 1
|
|
|
|
|
AND t."RuntimeCode" = pl."RuntimeCode"
|
|
|
|
|
)
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
**当 runtimeStatuses 不包含值 1 时(使用 NOT EXISTS)**:
|
|
|
|
|
```sql
|
|
|
|
|
SELECT
|
|
|
|
|
pl."Id",
|
|
|
|
|
pl."MessageId",
|
|
|
|
|
pl."LayerType",
|
|
|
|
|
pl."CellID",
|
|
|
|
|
pl."IMSI",
|
|
|
|
|
pl."Direction",
|
|
|
|
|
pl."UEID",
|
|
|
|
|
pl."PLMN",
|
|
|
|
|
pl."TimeMs",
|
|
|
|
|
pl."Timestamp",
|
|
|
|
|
pl."Info",
|
|
|
|
|
pl."Message",
|
|
|
|
|
pl."DeviceCode",
|
|
|
|
|
pl."RuntimeCode"
|
|
|
|
|
FROM "tb_protocol_logs" pl
|
|
|
|
|
WHERE NOT EXISTS (
|
|
|
|
|
SELECT 1
|
|
|
|
|
FROM "tb_cellular_device_runtimes" t
|
|
|
|
|
WHERE t."RuntimeStatus" = 1
|
|
|
|
|
AND t."RuntimeCode" = pl."RuntimeCode"
|
|
|
|
|
)
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
#### 修改时间:
|
|
|
|
|
2024年
|
|
|
|
|
|
|
|
|
|
#### 修改原因:
|
|
|
|
|
用户需要一个新的方法来获取不在活跃运行时状态中的协议日志,同时保持与现有 `GetByDeviceWithFiltersAsync` 方法相同的参数和过滤条件。
|