You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

211 lines
6.7 KiB

# 修改记录
## 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` 方法相同的参数和过滤条件。