Compare commits
1 Commits
manual
...
b7ae983eb1
| Author | SHA1 | Date | |
|---|---|---|---|
|
b7ae983eb1 |
2
.env
2
.env
@@ -19,7 +19,7 @@ VITE_LAMP_PASSWORD = fjoc(1KHP(Ls&Bje)C
|
||||
VITE_LAMP_AUTHORIZATION = Y3VlZGVzX2FkbWluOmN1ZWRlc19hZG1pbl9zZWNyZXQ=
|
||||
|
||||
# 当需要重置localStorage时, 修改此变量
|
||||
VITE_STORAGE_VERSION = 5
|
||||
VITE_STORAGE_VERSION = 3
|
||||
|
||||
# 调试码
|
||||
VITE_DEBUG_CODE = ndm_debug
|
||||
|
||||
@@ -1,327 +0,0 @@
|
||||
# 网络设备管理平台用户手册
|
||||
|
||||
## 1. 平台概述与基础操作
|
||||
|
||||
### 1.1 平台简介
|
||||
|
||||
网络设备管理平台（以下简称为“平台”）是专为地铁线路运管中心设计的综合性管理系统。本平台旨在对车站内的各类网络设备进行集中监测、数据查看、运行状态监控及异常告警管理，并提供数据分析与统计功能。
|
||||
|
||||
**支持管理的设备类型包括：**
|
||||
|
||||
- 摄像机
|
||||
- 网络录像机
|
||||
- 交换机
|
||||
- 解码器
|
||||
- 智能安防箱
|
||||
- 媒体服务器
|
||||
- 视频服务器
|
||||
- 网络键盘
|
||||
- 报警主机
|
||||
|
||||
### 1.2 登录与退出
|
||||
|
||||
**登录平台：**
|
||||
|
||||
1. 在浏览器地址栏输入平台访问地址。
|
||||
2. 进入登录页面后，输入您的 **账号** 和 **密码**。
|
||||
3. 点击“登录”按钮。
|
||||
4. 登录成功后，平台将默认跳转至 **车站状态模块 (首页)**。
|
||||
|
||||
**退出登录：**
|
||||
|
||||
1. 在平台任意页面的 **顶部区域** 右侧，找到显示您昵称的用户按钮。
|
||||
2. 将鼠标悬停或点击该按钮，在下拉菜单中选择 **“退出登录”**。
|
||||
3. 平台将安全退出您的账号并返回登录页面。
|
||||
|
||||
### 1.3 界面概览
|
||||
|
||||
登录后，平台主界面主要由以下四个区域组成：
|
||||
|
||||
**1. 顶部区域**
|
||||
|
||||
位于页面最上方，包含：
|
||||
|
||||
- **平台标题**：点击可快速返回首页。
|
||||
- **用户信息**：显示当前登录用户昵称及退出入口。
|
||||
- **设置按钮**：点击可打开设置面板。
|
||||
|
||||
**2. 侧边菜单**
|
||||
|
||||
位于页面左侧，提供各功能模块的导航入口：
|
||||
|
||||
- **车站状态**：全线车站设备运行概览 (首页)。
|
||||
- **设备诊断**：深入查看具体设备的详细运行参数。
|
||||
- **设备告警**：
|
||||
- **设备告警记录**：查询历史告警记录。
|
||||
- **告警忽略管理**：管理忽略设备。
|
||||
- **系统日志**：
|
||||
- **视频平台日志**：审计视频平台操作。
|
||||
- **上级调用日志**：审计上级调用指令。
|
||||
- **权限管理**：用户与权限配置（仅超级管理员可见）。
|
||||
|
||||
**3. 底部状态栏**
|
||||
|
||||
位于页面最下方，主要用于 **未读告警提示**。当有新的设备告警产生时，此处的铃铛图标会显示红色未读数量徽标，点击可快速跳转至告警记录页面。
|
||||
|
||||
**4. 设置面板**
|
||||
|
||||
点击顶部区域的“设置”图标（⚙️）即可打开，包含：
|
||||
|
||||
- **通用设置**：
|
||||
- **主题**：切换深色/浅色模式，适应不同光照环境。
|
||||
- **布局**：折叠/展开左侧菜单；调整 **车站卡片矩阵** 的显示列数（1-10列）。
|
||||
- **业务设置**：
|
||||
- **告警策略**：配置告警截图保留天数等（详见第4章，仅限特定权限人员可见）。
|
||||
|
||||
### 1.4 权限与界面差异说明
|
||||
|
||||
本平台采用严格的权限控制机制，您的账号权限将直接决定您能看到的内容和能执行的操作。
|
||||
|
||||
**1. 查看权限**
|
||||
|
||||
- **影响范围**：决定您能看到哪些车站。
|
||||
- **界面表现**：如果您没有某车站的查看权限，该车站在 **车站卡片矩阵**、设备树以及所有查询筛选器中都将 **完全不可见**。
|
||||
|
||||
**2. 操作权限**
|
||||
|
||||
- **影响范围**：决定您能否对设备进行配置、控制或管理。
|
||||
- **界面表现**：如果您没有某车站的操作权限，相关的 **功能按钮**（如“设备配置”、“同步数据”、“告警确认”等）将 **自动隐藏** 或 **变为不可用状态**。
|
||||
|
||||
> **提示**：如果您发现找不到某个车站或缺少某个功能按钮，请联系管理员确认您是否拥有相应的权限。
|
||||
|
||||
## 2. 车站状态模块 (首页)
|
||||
|
||||
车站状态模块是用户登录后的默认页面，以 **车站卡片矩阵** 的形式展示全线各车站的设备整体运行状态。
|
||||
|
||||
### 2.1 车站卡片解读
|
||||
|
||||
每个卡片代表一个车站，直观展示该站的关键运行指标：
|
||||
|
||||
**1. 基础信息**
|
||||
|
||||
- **车站名称**：显示车站名称。
|
||||
- **在线状态**：右上角的标签显示该车站服务器当前的在线/离线状态。
|
||||
|
||||
**2. 统计数据**
|
||||
|
||||
- **设备概览**：显示“设备总数”，以及通过颜色区分的“在线设备数”（绿色）和“离线设备数”（红色）。
|
||||
- **告警概览**：显示“今日告警总数”，若有告警则以醒目颜色提示。
|
||||
|
||||
**3. 交互操作**
|
||||
|
||||
- **更多菜单**（点击卡片右上角的垂直三点图标）：
|
||||
- **视频平台**：跳转至该车站对应的第三方视频管理平台。
|
||||
- **设备配置**：打开参数配置窗口。_(注：仅当拥有该车站“操作权限”且车站在线时显示)_
|
||||
- **查看设备详情**：点击设备概览区域右侧的 **详情按钮**（水平三点图标），弹出 **设备详情窗口**，展示该车站的设备树结构（支持进一步跳转至诊断页面）。
|
||||
- **查看告警详情**：点击告警概览区域右侧的 **详情按钮**（水平三点图标），弹出 **告警详情窗口**，展示该车站当日的告警列表。
|
||||
|
||||
### 2.2 操作栏
|
||||
|
||||
位于页面顶部的工具栏，提供对多个车站的批量管理功能。
|
||||
|
||||
**1. 功能按钮与权限**
|
||||
|
||||
- **导出设备状态 / 导出录像诊断**：_(需查看权限)_ 仅可选择您拥有“查看权限”的车站进行数据导出。
|
||||
- **同步摄像机 / 同步录像机通道**：_(需操作权限)_ 仅可选择您拥有“操作权限”的车站进行数据同步。
|
||||
|
||||
**2. 操作流程**
|
||||
|
||||
1. 点击操作栏中的任一功能按钮（例如“同步摄像机”）。
|
||||
2. 此时进入**多选模式**，所有车站卡片上会出现复选框。_(注：系统会自动根据当前操作所需的权限，禁用无权操作的车站复选框)_
|
||||
3. 勾选您需要操作的车站，或勾选顶部的“全选”框。
|
||||
4. 点击操作栏右侧出现的 **“确定”** 按钮执行操作：
|
||||
- **对于导出类操作**：平台将弹出预览窗口，您可在确认数据无误后点击下载 Excel 文件。
|
||||
- **对于同步类操作**：平台将直接在后台启动同步任务，任务完成后，页面右上角会弹出通知提示成功或失败的数量。
|
||||
|
||||
### 2.3 单站详情与配置
|
||||
|
||||
除了查看概览，您还可以对单个车站进行更细致的管理。
|
||||
|
||||
**1. 设备列表详情**
|
||||
|
||||
在设备详情窗口中，您可以浏览该车站下的所有设备。点击任意设备节点，可直接跳转至 **设备诊断页面** 查看该设备的详细指标。
|
||||
|
||||
**2. 参数配置** _(需操作权限)_
|
||||
|
||||
通过右上角菜单进入“设备配置”，您可以：
|
||||
|
||||
- **阈值配置**：设置交换机、服务器、录像机等设备的运行指标告警阈值（如 CPU 占用率、温度上限等）。
|
||||
- **计划任务**：设置显示器等设备的自动亮屏和息屏计划。
|
||||
|
||||
## 3. 设备诊断模块
|
||||
|
||||
设备诊断模块用于查看和分析具体设备的详细运行状态。您可以通过侧边菜单的 **“设备诊断”** 进入，或从 **车站状态模块** 的设备详情、告警记录页面跳转进入（告警跳转详见第4章）。
|
||||
|
||||
### 3.1 设备树 (侧边栏)
|
||||
|
||||
位于页面左侧，以树形结构展示全线所有车站及其下属设备。
|
||||
|
||||
**1. 搜索与筛选**
|
||||
|
||||
- **搜索框**：输入设备名称、设备 ID 或 IP 地址，可实时过滤设备树节点。
|
||||
- **状态筛选**：点击单选框，可快速筛选 **“全部 / 在线 / 离线”** 设备。
|
||||
|
||||
**2. 设备树交互**
|
||||
|
||||
- **展开与选择**：按 **“车站 -> 设备类型 -> 具体设备”** 的层级展开，点击设备节点即可在右侧查看详情。
|
||||
- **右键菜单管理** _(需操作权限)_：
|
||||
- **在车站节点上右键**：
|
||||
- **导入设备**：批量导入设备数据。
|
||||
- **导出设备**：导出该车站的设备清单。
|
||||
- **在设备节点上右键**：
|
||||
- **删除设备**：将该设备从平台中移除。
|
||||
|
||||
### 3.2 诊断详情页结构
|
||||
|
||||
选中设备后，右侧区域将展示该设备的详细信息。
|
||||
|
||||
**1. 功能标签页**
|
||||
|
||||
- **当前诊断**：展示设备实时的运行数据（默认视图）。头部信息栏和详细诊断指标均包含在此标签页中。
|
||||
- **历史诊断**：以图表形式展示设备的历史健康度或关键指标变化趋势。
|
||||
- **修改设备**：_(需操作权限)_ 编辑设备的基础信息（如名称、安装位置等）。
|
||||
|
||||
**2. 头部信息栏 (位于“当前诊断”标签页顶部)**
|
||||
|
||||
- **基础状态**：展示设备名称、IP 地址、在线/离线状态。
|
||||
- **关联操作**：
|
||||
- **上游设备跳转**：如果设备有上游节点（如摄像机连接的交换机），点击可直接跳转查看上游设备。
|
||||
- **管理入口**：点击 **“管理”** 按钮，可直接打开该设备自身的 Web 管理后台（如摄像机的 Web 配置页面）。
|
||||
|
||||
### 3.3 下游设备配置 (需操作权限)
|
||||
|
||||
对于交换机和智能安防箱，平台支持将其端口或电路与下游设备（如摄像机）进行关联，以便建立网络拓扑关系。
|
||||
|
||||
- **交换机配置**：在“当前诊断”的端口列表中，**右键点击**任意端口，选择 **“关联设备”**，可将该端口与下游设备绑定；若需解绑，右键选择 **“解除关联”** 即可。
|
||||
- **智能安防箱配置**：在电路列表中，**右键点击**电路卡片，选择 **“关联设备”** 或 **“解除关联”** 进行配置。
|
||||
|
||||
### 3.4 设备诊断指标概览
|
||||
|
||||
根据设备类型的不同，“当前诊断”标签页将展示不同的关键指标。以下列举几种典型设备的展示重点：
|
||||
|
||||
- **交换机 / 服务器 / 录像机**：侧重硬件资源监控，展示 CPU、内存、磁盘等使用率仪表盘，以及端口流量或通道录像状态。
|
||||
- **摄像机 / 报警主机**：侧重基础配置展示，如制造商、固件版本、序列号、ONVIF/GB28181 协议配置等。
|
||||
- **解码器 / 智能安防箱**：兼具硬件状态（如温度、风扇转速）与业务配置（如通道状态）的展示。
|
||||
|
||||
## 4. 设备告警模块
|
||||
|
||||
设备告警模块是运维人员处理设备异常的核心区域，包含告警记录查询、确认、忽略以及策略配置等功能。
|
||||
|
||||
### 4.1 设备告警记录
|
||||
|
||||
通过侧边菜单选择 **“设备告警” -> “设备告警记录”** 进入。
|
||||
|
||||
**1. 筛选查询**
|
||||
顶部查询栏提供多维度的组合筛选功能，帮助您快速定位特定告警：
|
||||
|
||||
- **车站**：选择查询范围（仅显示您拥有“查看权限”的车站）。
|
||||
- **设备类型/名称**：按设备属性精确查找。
|
||||
- **告警属性**：按告警类型、级别（严重/紧急/一般等）、恢复状态（已恢复/未恢复）及确认状态进行筛选。
|
||||
- **时间范围**：选择告警发生的起止时间。
|
||||
|
||||
**2. 列表操作**
|
||||
|
||||
- **告警确认** _(需操作权限)_：对于“未确认”的告警，点击操作列的 **“确认”** 按钮进行处理。确认后，系统将记录确认人及时间，且该按钮变为不可点击状态。
|
||||
- **忽略设备** _(需操作权限)_：若某设备频繁误报，点击 **“忽略设备”** 将其加入忽略名单。被忽略的设备将不再产生新告警，直到被手动恢复。
|
||||
- **跳转诊断**：点击列表中的设备名称，可直接跳转至该设备的诊断详情页。
|
||||
|
||||
**3. 数据导出**
|
||||
|
||||
点击页面右上角的 **“导出”** 按钮，可将当前筛选条件下的所有告警记录导出为 Excel 报表，便于线下归档与分析。
|
||||
|
||||
### 4.2 告警忽略管理
|
||||
|
||||
通过侧边菜单选择 **“设备告警” -> “告警忽略管理”** 进入。
|
||||
|
||||
**1. 列表查看**
|
||||
|
||||
展示所有当前处于“忽略状态”的设备列表，包含忽略时间、所属车站及设备信息。
|
||||
|
||||
**2. 取消忽略 (需操作权限)**
|
||||
|
||||
若需恢复对某设备的监控，点击操作列的 **“取消忽略”** 按钮。恢复后，该设备产生的新异常将重新触发告警。
|
||||
|
||||
### 4.3 告警策略配置 (系统设置)
|
||||
|
||||
部分高级告警策略需在全局设置中进行配置。
|
||||
|
||||
**1. 入口与权限**
|
||||
|
||||
- **入口**：点击顶部区域的“设置”图标，在设置面板中找到“告警”板块。
|
||||
- **权限要求**：此板块仅对 **OCC (控制中心) 车站** 的操作员可见。
|
||||
|
||||
**2. 配置项**
|
||||
|
||||
- **告警画面截图保留天数**：设置系统自动抓取的告警截图的存储期限（1-15天）。过期截图将被自动清理以释放存储空间。
|
||||
- **自动获取告警画面截图**：开启/关闭告警触发时的自动截图功能。
|
||||
|
||||
## 5. 系统日志模块
|
||||
|
||||
系统日志模块用于审计和追踪系统内的关键操作记录。
|
||||
|
||||
### 5.1 视频平台日志
|
||||
|
||||
通过侧边菜单选择 **“系统日志” -> “视频平台日志”** 进入。此模块主要记录平台与第三方视频管理系统之间的交互操作。
|
||||
|
||||
**1. 查询功能**
|
||||
|
||||
- **车站筛选**：仅显示您拥有“查看权限”的车站日志。
|
||||
- **操作类型**：筛选具体的交互指令类型（如“获取流地址”、“云台控制”等）。
|
||||
- **时间范围**：按发生时间段进行精确检索。
|
||||
|
||||
**2. 数据导出**
|
||||
|
||||
支持将查询结果导出为 Excel 文件，用于故障排查或安全审计。
|
||||
|
||||
### 5.2 上级调用日志
|
||||
|
||||
通过侧边菜单选择 **“系统日志” -> “上级调用日志”** 进入。此模块记录上级系统（如公安或市级平台）调用本平台资源的请求记录。
|
||||
|
||||
**1. 查询功能**
|
||||
|
||||
- **车站筛选**：选择日志所属的车站范围。
|
||||
- **调用类型**：筛选具体的调用指令（如“视频点播”、“录像回放”等）。
|
||||
- **时间范围**：选择日志记录的时间段。
|
||||
|
||||
**2. 数据导出**
|
||||
|
||||
同样支持将查询结果导出，以便统计上级单位的调用频率和资源使用情况。
|
||||
|
||||
## 6. 权限管理模块
|
||||
|
||||
**(注：本模块仅对“超级管理员”可见，普通用户无法访问)**
|
||||
|
||||
权限管理模块用于配置系统用户及其对各车站的访问和操作权限。
|
||||
|
||||
### 6.1 用户列表管理
|
||||
|
||||
通过侧边菜单选择 **“权限管理”** 进入。
|
||||
|
||||
**1. 用户查找**
|
||||
|
||||
- **搜索**：在顶部搜索框输入 **用户名**，可快速定位目标用户。
|
||||
- **重置**：点击重置按钮清空搜索条件，显示所有用户。
|
||||
|
||||
**2. 列表信息**
|
||||
|
||||
展示系统内所有注册用户的基本信息，包括账号、姓名等。
|
||||
|
||||
### 6.2 权限配置
|
||||
|
||||
点击用户列表右侧的 **“配置权限”** 按钮，进入该用户的权限分配界面。界面以矩阵形式展示，直观易懂。
|
||||
|
||||
**1. 权限矩阵解读**
|
||||
|
||||
- **行（车站）**：每一行代表一条线路上的具体车站。
|
||||
- **列（权限类型）**：
|
||||
- **查看**：决定用户能否看到该车站的数据。
|
||||
- **操作**：决定用户能否对该车站设备进行控制或修改配置。
|
||||
|
||||
**2. 批量操作技巧**
|
||||
|
||||
- **全选/反选**：点击表头的复选框，可一键授予或取消所有车站的某项权限。
|
||||
- **单站全权**：点击某一行车站名称前的复选框（如有），可一键授予该车站的所有权限。
|
||||
|
||||
**3. 特殊规则说明**
|
||||
|
||||
**重要提示**：如果未给某用户勾选任何权限（即所有复选框均为空），平台默认该用户拥有 **超级管理员权限**，可访问所有车站并执行所有操作。请务必谨慎配置。
|
||||
@@ -1,185 +0,0 @@
|
||||
# 《网络设备管理平台用户手册》编写计划
|
||||
|
||||
本计划已根据权限系统的实际逻辑（VIEW/OPERATION）进行了调整，将在各章节中明确体现权限对界面和功能的影响。
|
||||
|
||||
## 阶段一：准备与入门
|
||||
|
||||
1. **平台简介**：平台用途与设备支持范围。
|
||||
2. **登录与注销**：账号登录流程、退出操作。
|
||||
3. **界面概览**：
|
||||
|
||||
* **顶部区域 (Header)**：展示平台标题、当前用户信息及设置入口。
|
||||
|
||||
* **侧边菜单 (Sider)**：功能模块导航。
|
||||
|
||||
* **底部状态栏 (Footer)**：未读告警通知提示。
|
||||
|
||||
* **设置面板**：
|
||||
|
||||
* **通用设置**：主题切换（深色模式）、布局调整（菜单折叠、车站列数）。
|
||||
|
||||
* **业务设置**：告警策略配置（详见阶段四）。
|
||||
4. **权限与界面差异说明（新增）**：
|
||||
|
||||
* 解释“查看权限”如何决定车站列表的显示（无权限则不显示）。
|
||||
|
||||
* 解释“操作权限”如何决定功能按钮的显隐（无权限则隐藏配置入口）。
|
||||
|
||||
## 阶段二：首页 - 车站状态监控
|
||||
|
||||
**涉及模块**：`Station Status` (首页)
|
||||
|
||||
1. **车站卡片解读**
|
||||
|
||||
* **基础信息**：车站名称、在线/离线状态。
|
||||
|
||||
* **统计数据**：设备总数/在线数/离线数、今日告警总数。
|
||||
|
||||
* **交互操作**：
|
||||
|
||||
* **右上角更多菜单**：
|
||||
|
||||
* **视频平台**：跳转至视频管理平台。
|
||||
|
||||
* **设备配置**：打开参数配置窗口 **(注：仅当拥有该车站“操作权限”且车站在线时显示)**。
|
||||
|
||||
* **设备详情入口**：点击“设备总数”区域，弹出设备树模态框（可进一步跳转诊断页）。
|
||||
|
||||
* **告警详情入口**：点击“告警总数”区域，弹出告警列表模态框。
|
||||
2. **操作栏 (Batch Actions)**
|
||||
|
||||
* **功能按钮与权限差异**：
|
||||
|
||||
* **导出设备状态 / 导出录像诊断**：**(需查看权限)** 仅可选择拥有“查看权限”的车站进行导出。
|
||||
|
||||
* **同步摄像机 / 同步录像机通道**：**(需操作权限)** 仅可选择拥有“操作权限”的车站进行同步。
|
||||
|
||||
\*- **操作流程**：
|
||||
|
||||
1. 点击操作栏中的任一功能按钮（如“同步摄像机”）。
|
||||
2. 此时车站卡片上会出现复选框，且仅有权限的车站可选。
|
||||
3. 勾选需要操作的车站（支持“全选”）。
|
||||
4. 点击操作栏右侧出现的“确定”按钮：
|
||||
|
||||
* **导出类操作**：系统将弹出预览窗口，您可在窗口中确认数据并下载 Excel 文件。
|
||||
|
||||
* **同步类操作**：系统将直接在后台启动同步任务，任务完成后右上角会弹出结果通知（成功/失败数量）。
|
||||
3. **单站详情与配置**
|
||||
|
||||
* **设备列表详情**：展示设备树，点击可跳转诊断页。
|
||||
|
||||
* **告警列表详情**。
|
||||
|
||||
* **参数配置**：配置阈值与计划任务 **(需操作权限)**。
|
||||
|
||||
## 阶段三：设备诊断模块
|
||||
|
||||
**涉及模块**：`Device Diagnosis`
|
||||
|
||||
1. **设备树（侧边栏）**
|
||||
|
||||
* **数据范围**：说明仅展示拥有“查看权限”的车站及其下属设备。
|
||||
|
||||
* **搜索与筛选**：按名称/IP搜索，按状态筛选。
|
||||
|
||||
* **树形交互**：
|
||||
|
||||
* **展开与选择**：按“车站 -> 设备类型 -> 具体设备”层级展开与选择。
|
||||
|
||||
* **右键菜单管理**：**(需操作权限)**
|
||||
|
||||
* **车站节点右键**：支持 **导入设备**、**导出设备**。
|
||||
|
||||
* **设备节点右键**：支持 **删除设备**。
|
||||
2. **诊断详情页结构**
|
||||
|
||||
* **头部信息栏**：状态、IP、关联跳转、Web管理入口。
|
||||
|
||||
* **功能标签页**：
|
||||
|
||||
* **当前诊断**：实时数据展示。
|
||||
|
||||
* **历史诊断**：历史趋势查看。
|
||||
|
||||
* **修改设备**：编辑设备信息 **(注：仅对拥有“操作权限”的用户可见)**。
|
||||
3. **特定设备诊断指标**
|
||||
- **分类描述策略**：
|
||||
- **性能类设备**（如交换机、服务器、NVR）：侧重硬件监控，展示CPU/内存使用率仪表盘、端口状态、磁盘健康度等。
|
||||
- **(补充) 下游设备关联配置**：
|
||||
- **交换机**：右键点击端口 -> 关联设备（如摄像机）。
|
||||
- **安防箱**：右键点击电路 -> 关联设备。
|
||||
- **操作权限要求**：**(需操作权限)**。
|
||||
- **信息类设备**（如摄像机、报警主机）：侧重参数展示，展示制造商、固件版本、协议配置等静态属性。
|
||||
|
||||
## 阶段四：告警管理模块
|
||||
|
||||
**涉及模块**：`Alarm`
|
||||
|
||||
1. **子模块：告警记录 (Alarm Log)**
|
||||
|
||||
* **筛选查询**：
|
||||
|
||||
* 组合筛选：车站（受查看权限限制）、设备类型、设备名称、告警类型、级别、状态、时间。
|
||||
|
||||
* **列表操作**：
|
||||
|
||||
* **告警确认**：点击“确认”按钮处理告警 **(注：需拥有该车站的操作权限，否则按钮禁用/隐藏)**。
|
||||
|
||||
* **忽略设备**：将设备加入忽略列表 **(需操作权限)**。
|
||||
|
||||
* **数据导出**：导出Excel报表。
|
||||
|
||||
2. **子模块：告警忽略 (Alarm Ignore)**
|
||||
|
||||
* **列表查看**：查看被忽略的设备记录。
|
||||
|
||||
* **取消忽略**：点击恢复监控 **(注：需拥有操作权限)**。
|
||||
|
||||
3. **告警策略配置 (系统设置)**
|
||||
|
||||
* **配置入口**：通过顶部导航栏“设置”按钮进入。
|
||||
|
||||
* **配置项**：告警画面截图保留天数、自动获取截图开关。
|
||||
|
||||
* **权限要求**：**(注：仅对 OCC 车站的操作员可见)**。
|
||||
|
||||
## 阶段五：日志管理模块
|
||||
|
||||
**涉及模块**：`Log`
|
||||
|
||||
1. **子模块：上级调用日志 (Call Log)**
|
||||
|
||||
* **查询**：筛选车站（受查看权限限制）、日志类型（如视频点播、云台指令）、时间范围。
|
||||
|
||||
* **导出**：导出查询结果。
|
||||
|
||||
2. **子模块：视频平台日志 (Vimp Log)**
|
||||
|
||||
* **查询**：筛选车站（受查看权限限制）、内部操作类型、时间范围。
|
||||
|
||||
* **导出**：导出查询结果。
|
||||
|
||||
## 阶段六：权限管理模块
|
||||
|
||||
**涉及模块**：`Permission`
|
||||
|
||||
**(注：本模块仅对“超级管理员”可见，普通用户无法访问)**
|
||||
|
||||
1. **用户列表管理**
|
||||
|
||||
* **搜索**：通过真实姓名查找用户。
|
||||
|
||||
* **重置**：清空搜索条件。
|
||||
|
||||
2. **权限配置 (Permission Config)**
|
||||
|
||||
* **矩阵式界面**：
|
||||
|
||||
* **行**：对应各个车站。
|
||||
|
||||
* **列**：对应具体权限类型（如查看、操作）。
|
||||
|
||||
* **批量操作**：支持整行（单站全权）或整列（全站某权）一键勾选。
|
||||
|
||||
* **特殊规则说明**：若未给用户勾选任何权限，平台默认该用户拥有**所有权限**（超级管理员模式）。
|
||||
|
||||
16
README.md
16
README.md
@@ -39,3 +39,19 @@ pnpm build
|
||||
```
|
||||
|
||||
在执行 `pnpm build` 之前，你可以在 `package.json` 中修改 `version` 字段，将其设置为你期望的版本号，构建完成后，项目的根目录中除了 `dist` 目录外，还会生成三个压缩包，文件名的格式统一为 `ndm-web-platform_v<version>_<datetime>`，文件格式则分别为 `zip`、`tar`、`tar.gz`。
|
||||
|
||||
## 调试模式
|
||||
|
||||
在调试模式中，用户可以查看设备的原始诊断数据，也可以对轮询器进行控制，或者启用离线开发模式，系统不会自动调用一些主动触发的请求。
|
||||
|
||||
### 开启调试模式
|
||||
|
||||
在非登录页的任意页面中，使用键盘组合键 `Ctrl+Alt+D`，系统会弹出一个输入框，输入环境变量 `.env` 中的 `VITE_DEBUG_CODE` 对应的值即可开启调试模式，如需关闭调试模式，再次使用上述组合键并点击 `确认` 按钮即可。
|
||||
|
||||
注意调试模式与其内部的功能之间没有联动关系，例如在开启调试模式后可以关闭轮询或者启用离线开发模式，但是在关闭调试模式后，轮询不会重新被开启，离线开发模式也不会被关闭，因此在关闭离线开发模式前，请务必确保系统处于正确的运行状态下。
|
||||
|
||||
### 关于离线开发模式
|
||||
|
||||
由于离线开发模式涉及到登录操作，因此项目中将离线开发模式暴露到了全局变量 `window.$offlineDev` 中，允许在登录页中直接开启离线开发模式。
|
||||
|
||||
如果你第一次启动这个项目，系统在正常情况下会先跳转至登录页，此时如果希望开启离线模式，可以直接打开浏览器的开发者工具，在控制台输入 `window.$offlineDev.value = true` 即可，系统会直接跳转到首页。
|
||||
|
||||
@@ -28,7 +28,6 @@
|
||||
"echarts": "^6.0.0",
|
||||
"es-toolkit": "^1.41.0",
|
||||
"localforage": "^1.10.0",
|
||||
"lucide-vue-next": "^0.562.0",
|
||||
"naive-ui": "^2.43.1",
|
||||
"pinia": "^3.0.4",
|
||||
"pinia-plugin-persistedstate": "^4.7.1",
|
||||
@@ -41,6 +40,8 @@
|
||||
"@tsconfig/node22": "^22.0.2",
|
||||
"@types/crypto-js": "^4.2.2",
|
||||
"@types/node": "^22.18.11",
|
||||
"@vicons/antd": "^0.13.0",
|
||||
"@vicons/ionicons5": "^0.13.0",
|
||||
"@vitejs/plugin-vue": "^6.0.1",
|
||||
"@vitejs/plugin-vue-jsx": "^5.1.1",
|
||||
"@vue/eslint-config-prettier": "^10.2.0",
|
||||
@@ -57,5 +58,5 @@
|
||||
"vite-plugin-vue-devtools": "^8.0.3",
|
||||
"vue-tsc": "^3.1.3"
|
||||
},
|
||||
"packageManager": "pnpm@10.28.0+sha512.05df71d1421f21399e053fde567cea34d446fa02c76571441bfc1c7956e98e363088982d940465fd34480d4d90a0668bc12362f8aa88000a64e83d0b0e47be48"
|
||||
"packageManager": "pnpm@10.20.0+sha512.cf9998222162dd85864d0a8102e7892e7ba4ceadebbf5a31f9c2fce48dfce317a9c53b9f6464d1ef9042cba2e02ae02a9f7c143a2b438cd93c91840f0192b9dd"
|
||||
}
|
||||
|
||||
28
pnpm-lock.yaml
generated
28
pnpm-lock.yaml
generated
@@ -44,9 +44,6 @@ importers:
|
||||
localforage:
|
||||
specifier: ^1.10.0
|
||||
version: 1.10.0
|
||||
lucide-vue-next:
|
||||
specifier: ^0.562.0
|
||||
version: 0.562.0(vue@3.5.24(typescript@5.9.3))
|
||||
naive-ui:
|
||||
specifier: ^2.43.1
|
||||
version: 2.43.1(vue@3.5.24(typescript@5.9.3))
|
||||
@@ -78,6 +75,12 @@ importers:
|
||||
'@types/node':
|
||||
specifier: ^22.18.11
|
||||
version: 22.19.1
|
||||
'@vicons/antd':
|
||||
specifier: ^0.13.0
|
||||
version: 0.13.0
|
||||
'@vicons/ionicons5':
|
||||
specifier: ^0.13.0
|
||||
version: 0.13.0
|
||||
'@vitejs/plugin-vue':
|
||||
specifier: ^6.0.1
|
||||
version: 6.0.1(vite@7.2.2(@types/node@22.19.1)(jiti@2.6.1)(sass@1.94.0)(tsx@4.20.6))(vue@3.5.24(typescript@5.9.3))
|
||||
@@ -842,6 +845,12 @@ packages:
|
||||
resolution: {integrity: sha512-/++5CYLQqsO9HFGLI7APrxBJYo+5OCMpViuhV8q5/Qa3o5mMrF//eQHks+PXcsAVaLdn817fMuS7zqoXNNZGaw==}
|
||||
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
|
||||
|
||||
'@vicons/antd@0.13.0':
|
||||
resolution: {integrity: sha512-yrUGoUSz2BbGupk9ghQOahc04n5H3MwUDM9pVPsLh9U1uqB47oRWZvYRiZaT1JKPqgTgSE6BXcVw4i9MOF4M+g==}
|
||||
|
||||
'@vicons/ionicons5@0.13.0':
|
||||
resolution: {integrity: sha512-zvZKBPjEXKN7AXNo2Na2uy+nvuv6SP4KAMQxpKL2vfHMj0fSvuw7JZcOPCjQC3e7ayssKnaoFVAhbYcW6v41qQ==}
|
||||
|
||||
'@vitejs/plugin-vue-jsx@5.1.1':
|
||||
resolution: {integrity: sha512-uQkfxzlF8SGHJJVH966lFTdjM/lGcwJGzwAHpVqAPDD/QcsqoUGa+q31ox1BrUfi+FLP2ChVp7uLXE3DkHyDdQ==}
|
||||
engines: {node: ^20.19.0 || >=22.12.0}
|
||||
@@ -1627,11 +1636,6 @@ packages:
|
||||
lru-cache@5.1.1:
|
||||
resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
|
||||
|
||||
lucide-vue-next@0.562.0:
|
||||
resolution: {integrity: sha512-LN0BLGKMFulv0lnfK29r14DcngRUhIqdcaL0zXTt2o0oS9odlrjCGaU3/X9hIihOjjN8l8e+Y9G/famcNYaI7Q==}
|
||||
peerDependencies:
|
||||
vue: '>=3.0.1'
|
||||
|
||||
magic-string@0.30.21:
|
||||
resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
|
||||
|
||||
@@ -2867,6 +2871,10 @@ snapshots:
|
||||
'@typescript-eslint/types': 8.46.4
|
||||
eslint-visitor-keys: 4.2.1
|
||||
|
||||
'@vicons/antd@0.13.0': {}
|
||||
|
||||
'@vicons/ionicons5@0.13.0': {}
|
||||
|
||||
'@vitejs/plugin-vue-jsx@5.1.1(vite@7.2.2(@types/node@22.19.1)(jiti@2.6.1)(sass@1.94.0)(tsx@4.20.6))(vue@3.5.24(typescript@5.9.3))':
|
||||
dependencies:
|
||||
'@babel/core': 7.28.5
|
||||
@@ -3693,10 +3701,6 @@ snapshots:
|
||||
dependencies:
|
||||
yallist: 3.1.1
|
||||
|
||||
lucide-vue-next@0.562.0(vue@3.5.24(typescript@5.9.3)):
|
||||
dependencies:
|
||||
vue: 3.5.24(typescript@5.9.3)
|
||||
|
||||
magic-string@0.30.21:
|
||||
dependencies:
|
||||
'@jridgewell/sourcemap-codec': 1.5.5
|
||||
|
||||
@@ -7,10 +7,10 @@ import { dateZhCN, NConfigProvider, NDialogProvider, NLoadingBarProvider, NMessa
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
const settingStore = useSettingStore();
|
||||
const { themeMode, mockUser } = storeToRefs(settingStore);
|
||||
const { themeMode, offlineDev } = storeToRefs(settingStore);
|
||||
|
||||
// 允许通过控制台启用离线开发模式 (登录页适用)
|
||||
window.$mockUser = mockUser;
|
||||
window.$offlineDev = offlineDev;
|
||||
|
||||
useVersionCheckQuery();
|
||||
</script>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { useUserStore } from '@/stores';
|
||||
import { createHttpClient, getAppEnvConfig } from '@/utils';
|
||||
import { getAppEnvConfig, RequestClient } from '@/utils';
|
||||
import type { AxiosError } from 'axios';
|
||||
|
||||
export const ndmClient = createHttpClient({
|
||||
export const ndmClient = new RequestClient({
|
||||
requestInterceptor: async (config) => {
|
||||
const userStore = useUserStore();
|
||||
const { lampAuthorization, lampClientId, lampClientSecret } = getAppEnvConfig();
|
||||
@@ -25,7 +25,7 @@ export const ndmClient = createHttpClient({
|
||||
const userStore = useUserStore();
|
||||
await userStore.lampLogin(stationCode);
|
||||
error.config.headers.token = userStore.lampLoginResultRecord?.[stationCode]?.token ?? '';
|
||||
return ndmClient.clientInstance(error.config);
|
||||
return ndmClient.requestInstance(error.config);
|
||||
}
|
||||
return Promise.reject(error);
|
||||
},
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import router from '@/router';
|
||||
import { useUserStore } from '@/stores';
|
||||
import { createHttpClient, getAppEnvConfig } from '@/utils';
|
||||
import { getAppEnvConfig, RequestClient } from '@/utils';
|
||||
import type { AxiosError } from 'axios';
|
||||
|
||||
export const userClient = createHttpClient({
|
||||
export const userClient = new RequestClient({
|
||||
requestInterceptor: (config) => {
|
||||
const userStore = useUserStore();
|
||||
const { lampAuthorization, lampClientId, lampClientSecret } = getAppEnvConfig();
|
||||
|
||||
@@ -3,5 +3,4 @@ export interface Station {
|
||||
name: string;
|
||||
online: boolean;
|
||||
ip: string;
|
||||
occ?: boolean; // 是否为控制中心
|
||||
}
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
import type { BaseModel, ReduceForPageQuery, ReduceForSaveVO, ReduceForUpdateVO } from '@/apis';
|
||||
import type { Nullable, Optional } from '@/types';
|
||||
|
||||
export interface BaseEmployee extends BaseModel {
|
||||
userId: string;
|
||||
realName: string;
|
||||
defUser: Nullable<
|
||||
{
|
||||
username: string;
|
||||
nickName: string;
|
||||
} & BaseModel
|
||||
>;
|
||||
}
|
||||
|
||||
export type BaseEmployeeResultVO = Nullable<BaseEmployee>;
|
||||
|
||||
export type BaseEmployeeSaveVO = Partial<Omit<BaseEmployee, ReduceForSaveVO>>;
|
||||
|
||||
export type BaseEmployeeUpdateVO = Optional<Omit<BaseEmployee, ReduceForUpdateVO>>;
|
||||
|
||||
export type BaseEmployeePageQuery = Partial<Omit<BaseEmployee, ReduceForPageQuery>>;
|
||||
@@ -1 +1,3 @@
|
||||
export * from './base-employee';
|
||||
export * from './model';
|
||||
export * from './page';
|
||||
export * from './reduce';
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import type { Nullable, Optional } from '@/types';
|
||||
import type { ReduceForPageQuery, ReduceForSaveVO, ReduceForUpdateVO } from '../../schema';
|
||||
import type { ReduceForPageQuery, ReduceForSaveVO, ReduceForUpdateVO } from '../../base';
|
||||
import type { NdmAlarmHost } from './alarm';
|
||||
import type { NdmSecurityBox, NdmSwitch } from './other';
|
||||
import type { NdmNvr } from './storage';
|
||||
|
||||
@@ -2,38 +2,11 @@ import type { BaseModel, ReduceForPageQuery, ReduceForSaveVO, ReduceForUpdateVO
|
||||
import type { Nullable } from '@/types';
|
||||
|
||||
export interface NdmCallLog extends BaseModel {
|
||||
/**
|
||||
* 调用者国标码
|
||||
*/
|
||||
sourceGbId: string;
|
||||
/**
|
||||
* 用户所属类别
|
||||
*/
|
||||
sourceType: string;
|
||||
/**
|
||||
* 被调用设备国标码
|
||||
*/
|
||||
targetGbId: string;
|
||||
/**
|
||||
* 被调用设备名称
|
||||
*/
|
||||
targetName: string;
|
||||
/**
|
||||
* 调用方法
|
||||
*/
|
||||
method: string;
|
||||
/**
|
||||
* message类型
|
||||
*/
|
||||
messageType: string;
|
||||
/**
|
||||
* 操作类型
|
||||
*/
|
||||
cmdType: string;
|
||||
/**
|
||||
* 日志类型
|
||||
*/
|
||||
logType: string;
|
||||
}
|
||||
|
||||
export type NdmCallLogResultVO = Nullable<NdmCallLog>;
|
||||
|
||||
@@ -2,57 +2,18 @@ import type { BaseModel, ReduceForSaveVO, ReduceForUpdateVO, ReduceForPageQuery
|
||||
import type { Nullable } from '@/types';
|
||||
|
||||
export interface NdmVimpLog extends BaseModel {
|
||||
/**
|
||||
* 请求IP
|
||||
*/
|
||||
requestIp: string;
|
||||
/**
|
||||
* 操作内容
|
||||
*/
|
||||
description: string;
|
||||
/**
|
||||
* 类路径
|
||||
*/
|
||||
classPath: string;
|
||||
/**
|
||||
* 函数名
|
||||
*/
|
||||
methodName: string;
|
||||
/**
|
||||
* 起始时间
|
||||
*/
|
||||
startTime: string;
|
||||
/**
|
||||
* 结束时间
|
||||
*/
|
||||
endTime: string;
|
||||
/**
|
||||
* 消耗时间
|
||||
*/
|
||||
consumedTime: string;
|
||||
/**
|
||||
* 操作参数
|
||||
*/
|
||||
params: string;
|
||||
/**
|
||||
* 操作结果
|
||||
*/
|
||||
result: string;
|
||||
/**
|
||||
* 请求类型
|
||||
*/
|
||||
httpMethod: string;
|
||||
/**
|
||||
* 请求用户
|
||||
*/
|
||||
userId: string;
|
||||
/**
|
||||
* 日志类型
|
||||
*/
|
||||
logType: number;
|
||||
/**
|
||||
* 目标国标码
|
||||
*/
|
||||
targetCode: string;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,2 @@
|
||||
export * from './ndm-permission';
|
||||
export * from './ndm-security-box';
|
||||
export * from './ndm-switch';
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
import type { BaseModel, ReduceForPageQuery, ReduceForSaveVO, ReduceForUpdateVO, Station } from '@/apis';
|
||||
import type { PermissionType } from '@/enums';
|
||||
import type { Nullable, Optional } from '@/types';
|
||||
|
||||
export interface NdmPermission extends BaseModel {
|
||||
/**
|
||||
* 员工ID
|
||||
*/
|
||||
employeeId: string;
|
||||
/**
|
||||
* 服务器IP地址
|
||||
*/
|
||||
ipAddress: string;
|
||||
/**
|
||||
* 站号
|
||||
*/
|
||||
stationCode: Station['code'];
|
||||
/**
|
||||
* 站名
|
||||
*/
|
||||
name: string;
|
||||
/**
|
||||
* 权限类型
|
||||
*/
|
||||
type: PermissionType;
|
||||
}
|
||||
|
||||
export type NdmPermissionResultVO = Nullable<NdmPermission>;
|
||||
|
||||
export type NdmPermissionSaveVO = Partial<Omit<NdmPermission, ReduceForSaveVO>>;
|
||||
|
||||
export type NdmPermissionUpdateVO = Optional<Omit<NdmPermission, ReduceForUpdateVO>>;
|
||||
|
||||
export type NdmPermissionPageQuery = Partial<Omit<NdmPermission, ReduceForPageQuery>>;
|
||||
@@ -1,3 +1 @@
|
||||
export * from './invite-stream-type';
|
||||
export * from './send-rtp-info';
|
||||
export * from './snap-result';
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export type InviteStreamType = 'PLAY' | 'PLAYBACK' | 'DOWNLOAD' | 'PUSH' | 'PROXY' | 'CLOUD_RECORD_PUSH' | 'CLOUD_RECORD_PROXY';
|
||||
@@ -1,51 +0,0 @@
|
||||
import type { InviteStreamType } from '@/apis';
|
||||
import type { Nullable } from '@/types';
|
||||
|
||||
export type SendRtpInfo = Nullable<{
|
||||
ip: string;
|
||||
port: number;
|
||||
ssrc: string;
|
||||
platformId: string;
|
||||
deviceId: string;
|
||||
channelId: string;
|
||||
app: string;
|
||||
streamId: string;
|
||||
/**
|
||||
* 推流状态
|
||||
* 0 等待设备推流上来
|
||||
* 1 等待上级平台回复ack
|
||||
* 2 推流中
|
||||
*/
|
||||
status: number;
|
||||
/**
|
||||
* 是否为tcp
|
||||
*/
|
||||
tcp: boolean;
|
||||
/**
|
||||
* 是否为tcp主动模式
|
||||
*/
|
||||
tcpActive: boolean;
|
||||
localPort: number;
|
||||
mediaServerId: string;
|
||||
serverId: string;
|
||||
callId: string;
|
||||
fromTag: string;
|
||||
toTag: string;
|
||||
/**
|
||||
* 发送时，rtp的pt（uint8_t）,不传时默认为96
|
||||
*/
|
||||
pt: number;
|
||||
/**
|
||||
* 发送时，rtp的负载类型。为true时，负载为ps；为false时，为es；
|
||||
*/
|
||||
usePs: boolean;
|
||||
/**
|
||||
* 当usePs 为false时，有效。为1时，发送音频；为0时，发送视频；不传时默认为0
|
||||
*/
|
||||
onlyAudio: boolean;
|
||||
/**
|
||||
* 是否开启rtcp保活
|
||||
*/
|
||||
rtcp: boolean;
|
||||
playType: InviteStreamType;
|
||||
}>;
|
||||
@@ -1,5 +1,4 @@
|
||||
export * from './base';
|
||||
export * from './biz';
|
||||
export * from './common';
|
||||
export * from './schema';
|
||||
export * from './system';
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
export * from './model';
|
||||
export * from './page';
|
||||
export * from './reduce';
|
||||
@@ -1,21 +0,0 @@
|
||||
import type { BaseEmployeePageQuery, BaseEmployeeResultVO, PageParams, PageResult } from '@/apis';
|
||||
import { userClient } from '@/apis/client';
|
||||
import { unwrapResponse } from '@/utils';
|
||||
|
||||
export const pageBaseEmployeeApi = async (pageQuery: PageParams<BaseEmployeePageQuery>, options?: { signal?: AbortSignal }) => {
|
||||
const { signal } = options ?? {};
|
||||
const client = userClient;
|
||||
const endpoint = '/api/base/baseEmployee/page';
|
||||
const resp = await client.post<PageResult<BaseEmployeeResultVO>>(endpoint, pageQuery, { signal });
|
||||
const data = unwrapResponse(resp);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const detailBaseEmployeeApi = async (id: string, options?: { signal?: AbortSignal }) => {
|
||||
const { signal } = options ?? {};
|
||||
const client = userClient;
|
||||
const endpoint = `/api/base/baseEmployee/detail`;
|
||||
const resp = await client.get<BaseEmployeeResultVO>(endpoint, { params: { id }, signal });
|
||||
const data = unwrapResponse(resp);
|
||||
return data;
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
export * from './base-employee';
|
||||
@@ -1,5 +1,5 @@
|
||||
import { ndmClient, userClient, type Station } from '@/apis';
|
||||
import { unwrapVoidResponse } from '@/utils';
|
||||
import { unwrapResponse } from '@/utils';
|
||||
|
||||
export const resetMonitorScheduleApi = async (options?: { stationCode?: Station['code']; signal?: AbortSignal }) => {
|
||||
const { stationCode, signal } = options ?? {};
|
||||
@@ -7,5 +7,5 @@ export const resetMonitorScheduleApi = async (options?: { stationCode?: Station[
|
||||
const prefix = stationCode ? `/${stationCode}` : '';
|
||||
const endpoint = `${prefix}/api/ndm/ndmConstant/anyTenant/resetMonitorSchedule`;
|
||||
const resp = await client.get<void>(endpoint, { signal });
|
||||
unwrapVoidResponse(resp);
|
||||
unwrapResponse(resp);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { ndmClient, userClient, type Station } from '@/apis';
|
||||
import { unwrapVoidResponse } from '@/utils';
|
||||
import { unwrapResponse } from '@/utils';
|
||||
|
||||
export const verifyApi = async (options?: { stationCode?: Station['code']; signal?: AbortSignal }) => {
|
||||
const { stationCode, signal } = options ?? {};
|
||||
@@ -7,5 +7,5 @@ export const verifyApi = async (options?: { stationCode?: Station['code']; signa
|
||||
const prefix = stationCode ? `/${stationCode}` : '';
|
||||
const endpoint = `${prefix}/api/ndm/ndmKeepAlive/verify`;
|
||||
const resp = await client.post<void>(endpoint, {}, { retRaw: true, timeout: 5000, signal });
|
||||
unwrapVoidResponse(resp);
|
||||
unwrapResponse(resp);
|
||||
};
|
||||
|
||||
@@ -48,13 +48,3 @@ export const reloadAllRecordCheckApi = async (dayOffset: number, options?: { sta
|
||||
if (!data) throw new Error(`${data}`);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const batchExportRecordCheckApi = async (params: { checkDuration: number; gapSeconds: number; stationCode: Station['code'][] }, options?: { signal?: AbortSignal }) => {
|
||||
const { signal } = options ?? {};
|
||||
const { checkDuration, gapSeconds, stationCode } = params;
|
||||
const client = userClient;
|
||||
const endpoint = `/api/ndm/ndmRecordCheck/batchExportByTemplate`;
|
||||
const resp = await client.post<Blob>(endpoint, { checkDuration, gapSeconds, stationCode }, { responseType: 'blob', retRaw: true, signal });
|
||||
const data = unwrapResponse(resp);
|
||||
return data;
|
||||
};
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
export * from './ndm-permission';
|
||||
export * from './ndm-security-box';
|
||||
export * from './ndm-service-available';
|
||||
export * from './ndm-switch';
|
||||
|
||||
@@ -1,83 +0,0 @@
|
||||
import {
|
||||
ndmClient,
|
||||
userClient,
|
||||
type NdmPermissionPageQuery,
|
||||
type NdmPermissionResultVO,
|
||||
type NdmPermissionSaveVO,
|
||||
type NdmPermissionUpdateVO,
|
||||
type PageParams,
|
||||
type PageResult,
|
||||
type Station,
|
||||
} from '@/apis';
|
||||
import type { PermissionTypeEnum } from '@/enums';
|
||||
import { unwrapResponse } from '@/utils';
|
||||
|
||||
export const permissionTypesApi = async (options?: { stationCode?: Station['code']; signal?: AbortSignal }) => {
|
||||
const { stationCode, signal } = options ?? {};
|
||||
const client = stationCode ? ndmClient : userClient;
|
||||
const prefix = stationCode ? `/${stationCode}` : '';
|
||||
const endpoint = `${prefix}/api/ndm/ndmPermission/types`;
|
||||
const resp = await client.get<PermissionTypeEnum>(endpoint, { signal });
|
||||
const data = unwrapResponse(resp);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const pagePermissionApi = async (pageQuery: PageParams<NdmPermissionPageQuery>, options?: { stationCode?: Station['code']; signal?: AbortSignal }) => {
|
||||
const { stationCode, signal } = options ?? {};
|
||||
const client = stationCode ? ndmClient : userClient;
|
||||
const prefix = stationCode ? `/${stationCode}` : '';
|
||||
const endpoint = `${prefix}/api/ndm/ndmPermission/page`;
|
||||
const resp = await client.post<PageResult<NdmPermissionResultVO>>(endpoint, pageQuery, { signal });
|
||||
const data = unwrapResponse(resp);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const detailPermissionApi = async (id: string, options?: { stationCode?: Station['code']; signal?: AbortSignal }) => {
|
||||
const { stationCode, signal } = options ?? {};
|
||||
const client = stationCode ? ndmClient : userClient;
|
||||
const prefix = stationCode ? `/${stationCode}` : '';
|
||||
const endpoint = `${prefix}/api/ndm/ndmPermission/detail`;
|
||||
const resp = await client.get<NdmPermissionResultVO>(endpoint, { params: { id }, signal });
|
||||
const data = unwrapResponse(resp);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const savePermissionApi = async (saveVO: NdmPermissionSaveVO, options?: { stationCode?: Station['code']; signal?: AbortSignal }) => {
|
||||
const { stationCode, signal } = options ?? {};
|
||||
const client = stationCode ? ndmClient : userClient;
|
||||
const prefix = stationCode ? `/${stationCode}` : '';
|
||||
const endpoint = `${prefix}/api/ndm/ndmPermission`;
|
||||
const resp = await client.post<NdmPermissionResultVO>(endpoint, saveVO, { signal });
|
||||
const result = unwrapResponse(resp);
|
||||
return result;
|
||||
};
|
||||
|
||||
export const updatePermissionApi = async (updateVO: NdmPermissionUpdateVO, options?: { stationCode?: Station['code']; signal?: AbortSignal }) => {
|
||||
const { stationCode, signal } = options ?? {};
|
||||
const client = stationCode ? ndmClient : userClient;
|
||||
const prefix = stationCode ? `/${stationCode}` : '';
|
||||
const endpoint = `${prefix}/api/ndm/ndmPermission`;
|
||||
const resp = await client.put<NdmPermissionResultVO>(endpoint, updateVO, { signal });
|
||||
const result = unwrapResponse(resp);
|
||||
return result;
|
||||
};
|
||||
|
||||
export const deletePermissionApi = async (ids: string[], options?: { stationCode?: Station['code']; signal?: AbortSignal }) => {
|
||||
const { stationCode, signal } = options ?? {};
|
||||
const client = stationCode ? ndmClient : userClient;
|
||||
const prefix = stationCode ? `/${stationCode}` : '';
|
||||
const endpoint = `${prefix}/api/ndm/ndmPermission`;
|
||||
const resp = await client.delete<boolean>(endpoint, ids, { signal });
|
||||
const result = unwrapResponse(resp);
|
||||
return result;
|
||||
};
|
||||
|
||||
export const modifyPermissionApi = async (params: { employeeId: string; saveList: NdmPermissionSaveVO[]; removeList: string[] }, options?: { stationCode?: Station['code']; signal?: AbortSignal }) => {
|
||||
const { stationCode, signal } = options ?? {};
|
||||
const client = stationCode ? ndmClient : userClient;
|
||||
const prefix = stationCode ? `/${stationCode}` : '';
|
||||
const endpoint = `${prefix}/api/ndm/ndmPermission/modify`;
|
||||
const resp = await client.post<boolean>(endpoint, params, { signal });
|
||||
const result = unwrapResponse(resp);
|
||||
return result;
|
||||
};
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
type PageResult,
|
||||
type Station,
|
||||
} from '@/apis';
|
||||
import { unwrapResponse, unwrapVoidResponse } from '@/utils';
|
||||
import { unwrapResponse } from '@/utils';
|
||||
|
||||
export const pageSecurityBoxApi = async (pageQuery: PageParams<NdmSecurityBoxPageQuery>, options?: { stationCode?: Station['code']; signal?: AbortSignal }) => {
|
||||
const { stationCode, signal } = options ?? {};
|
||||
@@ -90,7 +90,7 @@ export const probeSecurityBoxApi = async (ids: string[], options?: { stationCode
|
||||
const prefix = stationCode ? `/${stationCode}` : '';
|
||||
const endpoint = `${prefix}/api/ndm/ndmSecurityBox/probeByIds`;
|
||||
const resp = await client.post<void>(endpoint, ids, { signal });
|
||||
unwrapVoidResponse(resp);
|
||||
unwrapResponse(resp);
|
||||
};
|
||||
|
||||
export const turnCitcuitStatusApi = async (ipAddress: string, circuitIndex: number, status: number, options?: { stationCode?: Station['code']; signal?: AbortSignal }) => {
|
||||
|
||||
@@ -1,16 +1,6 @@
|
||||
import { ndmClient, userClient, type MediaServerStatus, type SendRtpInfo, type Station } from '@/apis';
|
||||
import { ndmClient, userClient, type MediaServerStatus, type Station } from '@/apis';
|
||||
import { unwrapResponse } from '@/utils';
|
||||
|
||||
export const getAllPushApi = async (options?: { stationCode?: Station['code']; signal?: AbortSignal }) => {
|
||||
const { stationCode, signal } = options ?? {};
|
||||
const client = stationCode ? ndmClient : userClient;
|
||||
const prefix = stationCode ? `/${stationCode}` : '';
|
||||
const endpoint = `${prefix}/api/ndm/ndmServiceAvailable/mediaServer/getAllPush`;
|
||||
const resp = await client.get<SendRtpInfo[]>(endpoint, { signal });
|
||||
const data = unwrapResponse(resp);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const isMediaServerAliveApi = async (options?: { stationCode?: Station['code']; signal?: AbortSignal }) => {
|
||||
const { stationCode, signal } = options ?? {};
|
||||
const client = stationCode ? ndmClient : userClient;
|
||||
|
||||
@@ -10,11 +10,11 @@ import {
|
||||
type PageResult,
|
||||
type Station,
|
||||
} from '@/apis';
|
||||
import { unwrapResponse, unwrapVoidResponse } from '@/utils';
|
||||
import { unwrapResponse } from '@/utils';
|
||||
|
||||
export const pageSwitchApi = async (pageQuery: PageParams<NdmSwitchPageQuery>, options?: { stationCode?: Station['code']; signal?: AbortSignal }) => {
|
||||
const { stationCode, signal } = options ?? {};
|
||||
const client = stationCode ? ndmClient : userClient;
|
||||
const client = stationCode ? ndmClient : ndmClient;
|
||||
const prefix = stationCode ? `/${stationCode}` : '';
|
||||
const endpoint = `${prefix}/api/ndm/ndmSwitch/page`;
|
||||
const resp = await client.post<PageResult<NdmSwitchResultVO>>(endpoint, pageQuery, { signal });
|
||||
@@ -24,7 +24,7 @@ export const pageSwitchApi = async (pageQuery: PageParams<NdmSwitchPageQuery>, o
|
||||
|
||||
export const detailSwitchApi = async (id: string, options?: { stationCode?: Station['code']; signal?: AbortSignal }) => {
|
||||
const { stationCode, signal } = options ?? {};
|
||||
const client = stationCode ? ndmClient : userClient;
|
||||
const client = stationCode ? ndmClient : ndmClient;
|
||||
const prefix = stationCode ? `/${stationCode}` : '';
|
||||
const endpoint = `${prefix}/api/ndm/ndmSwitch/detail`;
|
||||
const resp = await client.get<NdmSwitchResultVO>(endpoint, { params: { id }, signal });
|
||||
@@ -34,7 +34,7 @@ export const detailSwitchApi = async (id: string, options?: { stationCode?: Stat
|
||||
|
||||
export const saveSwitchApi = async (saveVO: NdmSwitchSaveVO, options?: { stationCode?: Station['code']; signal?: AbortSignal }) => {
|
||||
const { stationCode, signal } = options ?? {};
|
||||
const client = stationCode ? ndmClient : userClient;
|
||||
const client = stationCode ? ndmClient : ndmClient;
|
||||
const prefix = stationCode ? `/${stationCode}` : '';
|
||||
const endpoint = `${prefix}/api/ndm/ndmSwitch`;
|
||||
const resp = await client.post<NdmSwitchResultVO>(endpoint, saveVO, { signal });
|
||||
@@ -44,7 +44,7 @@ export const saveSwitchApi = async (saveVO: NdmSwitchSaveVO, options?: { station
|
||||
|
||||
export const updateSwitchApi = async (updateVO: NdmSwitchUpdateVO, options?: { stationCode?: Station['code']; signal?: AbortSignal }) => {
|
||||
const { stationCode, signal } = options ?? {};
|
||||
const client = stationCode ? ndmClient : userClient;
|
||||
const client = stationCode ? ndmClient : ndmClient;
|
||||
const prefix = stationCode ? `/${stationCode}` : '';
|
||||
const endpoint = `${prefix}/api/ndm/ndmSwitch`;
|
||||
const resp = await client.put<NdmSwitchResultVO>(endpoint, updateVO, { signal });
|
||||
@@ -54,7 +54,7 @@ export const updateSwitchApi = async (updateVO: NdmSwitchUpdateVO, options?: { s
|
||||
|
||||
export const deleteSwitchApi = async (ids: string[], options?: { stationCode?: Station['code']; signal?: AbortSignal }) => {
|
||||
const { stationCode, signal } = options ?? {};
|
||||
const client = stationCode ? ndmClient : userClient;
|
||||
const client = stationCode ? ndmClient : ndmClient;
|
||||
const prefix = stationCode ? `/${stationCode}` : '';
|
||||
const endpoint = `${prefix}/api/ndm/ndmSwitch`;
|
||||
const resp = await client.delete<boolean>(endpoint, ids, { signal });
|
||||
@@ -64,7 +64,7 @@ export const deleteSwitchApi = async (ids: string[], options?: { stationCode?: S
|
||||
|
||||
export const exportSwitchApi = async (pageQuery: PageParams<NdmSwitchPageQuery>, options?: { stationCode?: Station['code']; signal?: AbortSignal }) => {
|
||||
const { stationCode, signal } = options ?? {};
|
||||
const client = stationCode ? ndmClient : userClient;
|
||||
const client = stationCode ? ndmClient : ndmClient;
|
||||
const prefix = stationCode ? `/${stationCode}` : '';
|
||||
const endpoint = `${prefix}/api/ndm/ndmSwitch/defaultExportByTemplate`;
|
||||
const resp = await client.post<Blob>(endpoint, pageQuery, { responseType: 'blob', retRaw: true, signal });
|
||||
@@ -86,9 +86,9 @@ export const importSwitchApi = async (file: File, options?: { stationCode?: Stat
|
||||
|
||||
export const probeSwitchApi = async (ids: string[], options?: { stationCode?: Station['code']; signal?: AbortSignal }) => {
|
||||
const { stationCode, signal } = options ?? {};
|
||||
const client = stationCode ? ndmClient : userClient;
|
||||
const client = stationCode ? ndmClient : ndmClient;
|
||||
const prefix = stationCode ? `/${stationCode}` : '';
|
||||
const endpoint = `${prefix}/api/ndm/ndmSwitch/probeByIds`;
|
||||
const resp = await client.post<void>(endpoint, ids, { signal });
|
||||
unwrapVoidResponse(resp);
|
||||
unwrapResponse(resp);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { ndmClient, userClient, type ImportMsg, type NdmNvrPageQuery, type NdmNvrResultVO, type NdmNvrSaveVO, type NdmNvrUpdateVO, type PageParams, type PageResult, type Station } from '@/apis';
|
||||
import { unwrapResponse, unwrapVoidResponse } from '@/utils';
|
||||
import { unwrapResponse } from '@/utils';
|
||||
|
||||
export const pageNvrPageApi = async (pageQuery: PageParams<NdmNvrPageQuery>, options?: { stationCode: Station['code']; signal?: AbortSignal }) => {
|
||||
const { stationCode, signal } = options ?? {};
|
||||
@@ -79,7 +79,7 @@ export const probeNvrApi = async (ids: string[], options?: { stationCode?: Stati
|
||||
const prefix = stationCode ? `/${stationCode}` : '';
|
||||
const endpoint = `${prefix}/api/ndm/ndmNvr/probeByIds`;
|
||||
const resp = await client.post<void>(endpoint, ids, { signal });
|
||||
unwrapVoidResponse(resp);
|
||||
unwrapResponse(resp);
|
||||
};
|
||||
|
||||
export const syncNvrChannelsApi = async (options?: { stationCode?: string; signal?: AbortSignal }) => {
|
||||
@@ -88,5 +88,5 @@ export const syncNvrChannelsApi = async (options?: { stationCode?: string; signa
|
||||
const prefix = stationCode ? `/${stationCode}` : '';
|
||||
const endpoint = `${prefix}/api/ndm/ndmNvr/syncNvrChannels`;
|
||||
const resp = await client.get<void>(endpoint, { signal });
|
||||
unwrapVoidResponse(resp);
|
||||
unwrapResponse(resp);
|
||||
};
|
||||
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
type PageResult,
|
||||
type Station,
|
||||
} from '@/apis';
|
||||
import { unwrapResponse, unwrapVoidResponse } from '@/utils';
|
||||
import { unwrapResponse } from '@/utils';
|
||||
|
||||
export const pageDecoderApi = async (pageQuery: PageParams<NdmDecoderPageQuery>, options?: { stationCode?: Station['code']; signal?: AbortSignal }) => {
|
||||
const { stationCode, signal } = options ?? {};
|
||||
@@ -90,5 +90,5 @@ export const probeDecoderApi = async (ids: string[], options?: { stationCode?: S
|
||||
const prefix = stationCode ? `/${stationCode}` : '';
|
||||
const endpoint = `${prefix}/api/ndm/ndmDecoder/probeByIds`;
|
||||
const resp = await client.post<void>(endpoint, ids, { signal });
|
||||
unwrapVoidResponse(resp);
|
||||
unwrapResponse(resp);
|
||||
};
|
||||
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
type PageResult,
|
||||
type Station,
|
||||
} from '@/apis';
|
||||
import { unwrapResponse, unwrapVoidResponse } from '@/utils';
|
||||
import { unwrapResponse } from '@/utils';
|
||||
|
||||
export const postNdmMediaServerPage = async (pageQuery: PageParams<NdmMediaServerPageQuery>, options?: { stationCode?: Station['code']; signal?: AbortSignal }) => {
|
||||
const { stationCode, signal } = options ?? {};
|
||||
@@ -90,5 +90,5 @@ export const probeMediaServerApi = async (ids: string[], options?: { stationCode
|
||||
const prefix = stationCode ? `/${stationCode}` : '';
|
||||
const endpoint = `${prefix}/api/ndm/ndmMediaServer/probeByIds`;
|
||||
const resp = await client.post<void>(endpoint, ids, { signal });
|
||||
unwrapVoidResponse(resp);
|
||||
unwrapResponse(resp);
|
||||
};
|
||||
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
type PageResult,
|
||||
type Station,
|
||||
} from '@/apis';
|
||||
import { unwrapResponse, unwrapVoidResponse } from '@/utils';
|
||||
import { unwrapResponse } from '@/utils';
|
||||
|
||||
export const pageVideoServerApi = async (pageQuery: PageParams<NdmVideoServerPageQuery>, options?: { stationCode?: Station['code']; signal?: AbortSignal }) => {
|
||||
const { stationCode, signal } = options ?? {};
|
||||
@@ -90,5 +90,5 @@ export const probeVideoServerApi = async (ids: string[], options?: { stationCode
|
||||
const prefix = stationCode ? `/${stationCode}` : '';
|
||||
const endpoint = `${prefix}/api/ndm/ndmVideoServer/probeByIds`;
|
||||
const resp = await client.post<void>(endpoint, ids, { signal });
|
||||
unwrapVoidResponse(resp);
|
||||
unwrapResponse(resp);
|
||||
};
|
||||
|
||||
@@ -1,3 +1,2 @@
|
||||
export * from './base';
|
||||
export * from './biz';
|
||||
export * from './system';
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ClockCheckIcon, CpuIcon, HardDriveIcon, MemoryStickIcon } from 'lucide-vue-next';
|
||||
import { ClockCircleOutlined, CodeOutlined, FireOutlined, SaveOutlined } from '@vicons/antd';
|
||||
import { NCard, NFlex, NIcon, NProgress, type ProgressStatus } from 'naive-ui';
|
||||
import { computed, toRefs } from 'vue';
|
||||
|
||||
@@ -17,7 +17,7 @@ const props = defineProps<{
|
||||
const { cpuUsage, memUsage, diskUsage, runningTime, cpuUsageLabel, memUsageLabel, diskUsageLabel, runningTimeLabel } = toRefs(props);
|
||||
|
||||
const showCard = computed(() => {
|
||||
return Object.values({ cpuUsage, memUsage, diskUsage, runningTime }).some((refValue) => !!refValue.value);
|
||||
return Object.values({ cpuUsage, memUsage, diskUsage, runningTime }).some((value) => !!value);
|
||||
});
|
||||
|
||||
const cpuPercent = computed(() => {
|
||||
@@ -54,22 +54,22 @@ const getProgressStatus = (percent: number): ProgressStatus => {
|
||||
<template #default>
|
||||
<NFlex vertical>
|
||||
<NFlex v-if="cpuUsage" style="width: 100%" align="center" :wrap="false">
|
||||
<NIcon :component="CpuIcon" />
|
||||
<NIcon :component="FireOutlined" />
|
||||
<span style="word-break: keep-all">{{ cpuUsageLabel || 'CPU' }}</span>
|
||||
<NProgress :percentage="cpuPercent" :status="getProgressStatus(cpuPercent)">{{ cpuPercent }}%</NProgress>
|
||||
</NFlex>
|
||||
<NFlex v-if="memUsage" style="width: 100%" align="center" :wrap="false">
|
||||
<NIcon :component="MemoryStickIcon" />
|
||||
<NIcon :component="CodeOutlined" />
|
||||
<span style="word-break: keep-all">{{ memUsageLabel || '内存' }}</span>
|
||||
<NProgress :percentage="memPercent" :status="getProgressStatus(memPercent)">{{ memPercent }}%</NProgress>
|
||||
</NFlex>
|
||||
<NFlex v-if="diskUsage" style="width: 100%" align="center" :wrap="false">
|
||||
<NIcon :component="HardDriveIcon" />
|
||||
<NIcon :component="SaveOutlined" />
|
||||
<span style="word-break: keep-all">{{ diskUsageLabel || '磁盘' }}</span>
|
||||
<NProgress :percentage="diskPercent" :status="getProgressStatus(diskPercent)">{{ diskPercent }}%</NProgress>
|
||||
</NFlex>
|
||||
<NFlex v-if="runningTime" style="width: 100%" align="center" :wrap="false">
|
||||
<NIcon :component="ClockCheckIcon" />
|
||||
<NIcon :component="ClockCircleOutlined" />
|
||||
<span>{{ runningTimeLabel || '运行时间' }}</span>
|
||||
<span>{{ formattedRunningTime }}</span>
|
||||
</NFlex>
|
||||
|
||||
@@ -5,9 +5,9 @@ import { DEVICE_TYPE_LITERALS, DEVICE_TYPE_NAMES, tryGetDeviceType } from '@/enu
|
||||
import { useDeviceStore } from '@/stores';
|
||||
import { parseErrorFeedback } from '@/utils';
|
||||
import { useMutation } from '@tanstack/vue-query';
|
||||
import { ApiOutlined, ReloadOutlined } from '@vicons/antd';
|
||||
import { isCancel } from 'axios';
|
||||
import destr from 'destr';
|
||||
import { LinkIcon, RotateCwIcon } from 'lucide-vue-next';
|
||||
import { NButton, NCard, NFlex, NIcon, NTag, NTooltip } from 'naive-ui';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { computed, inject, onBeforeUnmount, ref, toRefs } from 'vue';
|
||||
@@ -152,7 +152,7 @@ onBeforeUnmount(() => {
|
||||
<template #trigger>
|
||||
<NButton size="small" quaternary circle :loading="probing" @click="() => probeDevice()">
|
||||
<template #icon>
|
||||
<NIcon :component="LinkIcon" />
|
||||
<NIcon :component="ApiOutlined" />
|
||||
</template>
|
||||
</NButton>
|
||||
</template>
|
||||
@@ -164,7 +164,7 @@ onBeforeUnmount(() => {
|
||||
<template #trigger>
|
||||
<NButton size="small" quaternary circle :loading="loading" @click="() => detailDevice()">
|
||||
<template #icon>
|
||||
<NIcon :component="RotateCwIcon" />
|
||||
<NIcon :component="ReloadOutlined" />
|
||||
</template>
|
||||
</NButton>
|
||||
</template>
|
||||
|
||||
@@ -1,58 +1,34 @@
|
||||
<script setup lang="ts">
|
||||
import { getChannelListApi, getRecordCheckApi, reloadAllRecordCheckApi, reloadRecordCheckApi, type NdmNvrResultVO, type RecordItem, type Station } from '@/apis';
|
||||
import { getChannelListApi, getRecordCheckApi, reloadAllRecordCheckApi, reloadRecordCheckApi, type NdmNvrResultVO, type NdmRecordCheck, type RecordItem, type Station } from '@/apis';
|
||||
import { exportRecordDiagCsv, transformRecordChecks } from '@/helpers';
|
||||
import { useSettingStore } from '@/stores';
|
||||
import { useStationStore } from '@/stores';
|
||||
import { parseErrorFeedback } from '@/utils';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query';
|
||||
import { useMutation } from '@tanstack/vue-query';
|
||||
import { DownloadOutlined, ReloadOutlined } from '@vicons/antd';
|
||||
import { isCancel } from 'axios';
|
||||
import dayjs from 'dayjs';
|
||||
import { DownloadIcon, RotateCwIcon } from 'lucide-vue-next';
|
||||
import { NButton, NCard, NFlex, NIcon, NPagination, NPopconfirm, NPopover, NRadioButton, NRadioGroup, NTooltip, useThemeVars } from 'naive-ui';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { computed, onBeforeUnmount, ref, toRefs, watch } from 'vue';
|
||||
import { computed, onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue';
|
||||
|
||||
const props = defineProps<{
|
||||
ndmDevice: NdmNvrResultVO;
|
||||
station: Station;
|
||||
}>();
|
||||
|
||||
const settingStore = useSettingStore();
|
||||
const { activeRequests } = storeToRefs(settingStore);
|
||||
|
||||
const themeVars = useThemeVars();
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
const stationStore = useStationStore();
|
||||
const { stations } = storeToRefs(stationStore);
|
||||
|
||||
const { ndmDevice, station } = toRefs(props);
|
||||
|
||||
const recordChecks = ref<NdmRecordCheck[]>([]);
|
||||
|
||||
const lossInput = ref<number>(0);
|
||||
|
||||
const abortController = ref<AbortController>(new AbortController());
|
||||
|
||||
const NVR_RECORD_CHECK_KEY = 'nvr_record_check_query';
|
||||
|
||||
const {
|
||||
data: recordChecks,
|
||||
isFetching: loading,
|
||||
refetch: refetchRecordChecks,
|
||||
} = useQuery({
|
||||
queryKey: computed(() => [NVR_RECORD_CHECK_KEY, ndmDevice.value.id, ndmDevice.value.lastDiagTime]),
|
||||
enabled: computed(() => activeRequests.value),
|
||||
refetchInterval: 30 * 1000,
|
||||
gcTime: 0,
|
||||
queryFn: async ({ signal }) => {
|
||||
const checks = await getRecordCheckApi(ndmDevice.value, 90, [], { stationCode: station.value.code, signal });
|
||||
return checks;
|
||||
},
|
||||
});
|
||||
watch(activeRequests, (active) => {
|
||||
if (!active) {
|
||||
queryClient.cancelQueries({ queryKey: [NVR_RECORD_CHECK_KEY] });
|
||||
}
|
||||
});
|
||||
|
||||
const recordDiags = computed(() => {
|
||||
return transformRecordChecks(recordChecks.value ?? []).filter((recordDiag) => {
|
||||
return transformRecordChecks(recordChecks.value).filter((recordDiag) => {
|
||||
if (lossInput.value === 0) {
|
||||
return true;
|
||||
} else if (lossInput.value === 1) {
|
||||
@@ -64,6 +40,26 @@ const recordDiags = computed(() => {
|
||||
});
|
||||
});
|
||||
|
||||
const abortController = ref<AbortController>(new AbortController());
|
||||
|
||||
const { mutate: getRecordCheckByParentId, isPending: loading } = useMutation({
|
||||
mutationFn: async () => {
|
||||
abortController.value.abort();
|
||||
abortController.value = new AbortController();
|
||||
const checks = await getRecordCheckApi(ndmDevice.value, 90, [], { stationCode: station.value.code, signal: abortController.value.signal });
|
||||
return checks;
|
||||
},
|
||||
onSuccess: (checks) => {
|
||||
recordChecks.value = checks;
|
||||
},
|
||||
onError: (error) => {
|
||||
if (isCancel(error)) return;
|
||||
console.error(error);
|
||||
const errorFeedback = parseErrorFeedback(error);
|
||||
window.$message.error(errorFeedback);
|
||||
},
|
||||
});
|
||||
|
||||
const { mutate: reloadAllRecordCheck, isPending: reloading } = useMutation({
|
||||
mutationFn: async () => {
|
||||
abortController.value.abort();
|
||||
@@ -82,7 +78,9 @@ const { mutate: reloadAllRecordCheck, isPending: reloading } = useMutation({
|
||||
});
|
||||
|
||||
const onExportRecordCheck = () => {
|
||||
exportRecordDiagCsv(recordDiags.value, station.value.name);
|
||||
const code = station.value.code;
|
||||
const stationName = stations.value.find((station) => station.code === code)?.name ?? '';
|
||||
exportRecordDiagCsv(recordDiags.value, stationName);
|
||||
};
|
||||
|
||||
const page = ref(1);
|
||||
@@ -123,7 +121,7 @@ const { mutate: reloadRecordCheckByGbId } = useMutation({
|
||||
}
|
||||
},
|
||||
onSuccess: () => {
|
||||
refetchRecordChecks();
|
||||
getRecordCheckByParentId();
|
||||
},
|
||||
onError: (error) => {
|
||||
if (isCancel(error)) return;
|
||||
@@ -133,6 +131,19 @@ const { mutate: reloadRecordCheckByGbId } = useMutation({
|
||||
},
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getRecordCheckByParentId();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => ndmDevice.value.id,
|
||||
(devieDbId) => {
|
||||
if (devieDbId) {
|
||||
getRecordCheckByParentId();
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
abortController.value.abort();
|
||||
});
|
||||
@@ -157,9 +168,9 @@ onBeforeUnmount(() => {
|
||||
<NFlex>
|
||||
<NTooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<NButton size="small" quaternary circle :loading="loading" @click="() => refetchRecordChecks()">
|
||||
<NButton size="small" quaternary circle :loading="loading" @click="() => getRecordCheckByParentId()">
|
||||
<template #icon>
|
||||
<NIcon :component="RotateCwIcon" />
|
||||
<NIcon :component="ReloadOutlined" />
|
||||
</template>
|
||||
</NButton>
|
||||
</template>
|
||||
@@ -171,7 +182,7 @@ onBeforeUnmount(() => {
|
||||
<template #trigger>
|
||||
<NButton size="small" quaternary circle @click="onExportRecordCheck">
|
||||
<template #icon>
|
||||
<NIcon :component="DownloadIcon" />
|
||||
<NIcon :component="DownloadOutlined" />
|
||||
</template>
|
||||
</NButton>
|
||||
</template>
|
||||
|
||||
@@ -13,17 +13,15 @@ import {
|
||||
type Station,
|
||||
} from '@/apis';
|
||||
import { SecurityBoxCircuitLinkModal } from '@/components';
|
||||
import { usePermission } from '@/composables';
|
||||
import { SELECT_DEVICE_FN_INJECTION_KEY } from '@/constants';
|
||||
import { PERMISSION_TYPE_LITERALS } from '@/enums';
|
||||
import { useDeviceStore, useSettingStore } from '@/stores';
|
||||
import { parseErrorFeedback } from '@/utils';
|
||||
import { useMutation } from '@tanstack/vue-query';
|
||||
import { PoweroffOutlined } from '@vicons/antd';
|
||||
import { watchImmediate } from '@vueuse/core';
|
||||
import { isCancel } from 'axios';
|
||||
import destr from 'destr';
|
||||
import { cloneDeep, isFunction } from 'es-toolkit';
|
||||
import { PowerIcon } from 'lucide-vue-next';
|
||||
import { NButton, NCard, NDescriptions, NDescriptionsItem, NDropdown, NFlex, NIcon, NPopconfirm, NPopover, NSwitch, NTag, useThemeVars, type DropdownOption, type TagProps } from 'naive-ui';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { computed, inject, ref, toRefs } from 'vue';
|
||||
@@ -40,9 +38,7 @@ const deviceStore = useDeviceStore();
|
||||
const { lineDevices } = storeToRefs(deviceStore);
|
||||
|
||||
const settingStore = useSettingStore();
|
||||
const { useLocalDB } = storeToRefs(settingStore);
|
||||
|
||||
const { hasPermission } = usePermission();
|
||||
const { offlineDev } = storeToRefs(settingStore);
|
||||
|
||||
const { ndmDevice, station, circuits } = toRefs(props);
|
||||
|
||||
@@ -227,7 +223,6 @@ const onSelectDropdownOption = (key: string, option: DropdownOption) => {
|
||||
const onContextmenu = (payload: PointerEvent, circuitIndex: number) => {
|
||||
payload.stopPropagation();
|
||||
payload.preventDefault();
|
||||
if (!hasPermission(station.value.code, PERMISSION_TYPE_LITERALS.OPERATION)) return;
|
||||
const { clientX, clientY } = payload;
|
||||
contextmenu.value = { x: clientX, y: clientY, circuitIndex };
|
||||
showContextmenu.value = true;
|
||||
@@ -263,8 +258,8 @@ const { mutate: unlinkDevice } = useMutation({
|
||||
delete modifiedUpperLinkDescription.downstream?.[circuitIndex];
|
||||
modifiedUpperDevice.linkDescription = JSON.stringify(modifiedUpperLinkDescription);
|
||||
|
||||
// 3. 发起update请求并获取最新的设备详情（使用本地数据库时直接修改本地数据）
|
||||
if (useLocalDB.value) {
|
||||
// 3. 发起update请求并获取最新的设备详情（离线模式下直接修改本地数据）
|
||||
if (offlineDev.value) {
|
||||
return { upperDevice: modifiedUpperDevice, lowerDevice: modifiedLowerDevice };
|
||||
}
|
||||
const stationCode = station.value.code;
|
||||
@@ -318,7 +313,7 @@ const { mutate: unlinkDevice } = useMutation({
|
||||
<NFlex align="center">
|
||||
<NTag class="pointer-cursor" size="small" :type="getCircuitStatusTagType(circuit)">
|
||||
<template #icon>
|
||||
<NIcon :component="PowerIcon" />
|
||||
<NIcon :component="PoweroffOutlined" />
|
||||
</template>
|
||||
<template #default>
|
||||
<span>{{ getCircuitStatusText(circuit) }}</span>
|
||||
|
||||
@@ -23,7 +23,7 @@ const show = defineModel<boolean>('show', { default: false });
|
||||
const deviceStore = useDeviceStore();
|
||||
|
||||
const settingStore = useSettingStore();
|
||||
const { useLocalDB } = storeToRefs(settingStore);
|
||||
const { offlineDev } = storeToRefs(settingStore);
|
||||
|
||||
const { ndmDevice, station, circuitIndex } = toRefs(props);
|
||||
|
||||
@@ -68,9 +68,7 @@ const { mutate: linkPortToDevice, isPending: linking } = useMutation({
|
||||
const lowerDeviceDbId = lowerDevice.value?.id;
|
||||
if (!lowerDeviceDbId) throw new Error('该设备没有ID');
|
||||
|
||||
// 0. 检查是否会导致循环关联，
|
||||
if (upperDeviceDbId === lowerDeviceDbId) throw new Error('不能关联到自身');
|
||||
// 以及检查上游设备的linkDescription的downstream字段是否存在某个端口已经关联下游设备
|
||||
// 0. 检查上游设备的linkDescription的downstream字段是否存在某个端口已经关联下游设备
|
||||
const duplicated = Object.entries(upperDeviceLinkDescription.value?.downstream ?? {}).find(([, deviceStoreIndex]) => {
|
||||
return deviceStoreIndex.deviceDbId === lowerDeviceDbId;
|
||||
});
|
||||
@@ -150,8 +148,8 @@ const { mutate: linkPortToDevice, isPending: linking } = useMutation({
|
||||
}
|
||||
modifiedLowerDevice.linkDescription = JSON.stringify(modifiedLowerDeviceLinkDescription);
|
||||
|
||||
// 3. 发起update请求并获取最新的设备详情（使用本地数据库时直接修改本地数据）
|
||||
if (useLocalDB.value) {
|
||||
// 3. 发起update请求并获取最新的设备详情（离线模式下直接修改本地数据）
|
||||
if (offlineDev.value) {
|
||||
return { upperDevice: modifiedUpperDevice, lowerDevice: modifiedLowerDevice };
|
||||
}
|
||||
const stationCode = station.value.code;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { DropletIcon, FanIcon, ShieldIcon, ThermometerIcon, ZapIcon } from 'lucide-vue-next';
|
||||
import { ThunderboltOutlined } from '@vicons/antd';
|
||||
import { ApertureOutline, LockOpenOutline, ThermometerOutline, WaterOutline } from '@vicons/ionicons5';
|
||||
import { NCard, NFlex, NIcon, NTag } from 'naive-ui';
|
||||
import { computed, toRefs } from 'vue';
|
||||
|
||||
@@ -51,7 +52,7 @@ const formattedFanSpeeds = computed(() => {
|
||||
<NFlex vertical>
|
||||
<NTag>
|
||||
<template #icon>
|
||||
<NIcon :component="ThermometerIcon" />
|
||||
<NIcon :component="ThermometerOutline" />
|
||||
</template>
|
||||
<template #default>
|
||||
<span>温度: {{ temperature }}℃</span>
|
||||
@@ -59,7 +60,7 @@ const formattedFanSpeeds = computed(() => {
|
||||
</NTag>
|
||||
<NTag>
|
||||
<template #icon>
|
||||
<NIcon :component="DropletIcon" />
|
||||
<NIcon :component="WaterOutline" />
|
||||
</template>
|
||||
<template #default>
|
||||
<span>湿度: {{ humidity }}%</span>
|
||||
@@ -67,7 +68,7 @@ const formattedFanSpeeds = computed(() => {
|
||||
</NTag>
|
||||
<NTag>
|
||||
<template #icon>
|
||||
<NIcon :component="FanIcon" />
|
||||
<NIcon :component="ApertureOutline" />
|
||||
</template>
|
||||
<template #default>
|
||||
<span>风扇: {{ formattedFanSpeeds }}</span>
|
||||
@@ -75,7 +76,7 @@ const formattedFanSpeeds = computed(() => {
|
||||
</NTag>
|
||||
<NTag :type="getStatusTagType(accessControlStatus)">
|
||||
<template #icon>
|
||||
<NIcon :component="ShieldIcon" />
|
||||
<NIcon :component="LockOpenOutline" />
|
||||
</template>
|
||||
<template #default>
|
||||
<span>门禁: {{ accessControlStatus }}</span>
|
||||
@@ -83,7 +84,7 @@ const formattedFanSpeeds = computed(() => {
|
||||
</NTag>
|
||||
<NTag :type="getStatusTagType(lightningProtectionStatus)">
|
||||
<template #icon>
|
||||
<NIcon :component="ZapIcon" />
|
||||
<NIcon :component="ThunderboltOutlined" />
|
||||
</template>
|
||||
<template #default>
|
||||
<span>防雷: {{ lightningProtectionStatus }}</span>
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { detailDeviceApi, updateDeviceApi, type LinkDescription, type NdmDeviceResultVO, type NdmSwitchLinkDescription, type NdmSwitchPortInfo, type NdmSwitchResultVO, type Station } from '@/apis';
|
||||
import { SwitchPortLinkModal } from '@/components';
|
||||
import { usePermission } from '@/composables';
|
||||
import { SELECT_DEVICE_FN_INJECTION_KEY } from '@/constants';
|
||||
import { PERMISSION_TYPE_LITERALS } from '@/enums';
|
||||
import { getPortStatusValue, transformPortSpeed } from '@/helpers';
|
||||
import { useDeviceStore, useSettingStore } from '@/stores';
|
||||
import { parseErrorFeedback } from '@/utils';
|
||||
@@ -27,9 +25,7 @@ const deviceStore = useDeviceStore();
|
||||
const { lineDevices } = storeToRefs(deviceStore);
|
||||
|
||||
const settingStore = useSettingStore();
|
||||
const { useLocalDB } = storeToRefs(settingStore);
|
||||
|
||||
const { hasPermission } = usePermission();
|
||||
const { offlineDev } = storeToRefs(settingStore);
|
||||
|
||||
const { ndmDevice, station, ports } = toRefs(props);
|
||||
|
||||
@@ -176,7 +172,6 @@ const onSelectDropdownOption = (key: string, option: DropdownOption) => {
|
||||
const onContextmenu = (payload: PointerEvent, port: NdmSwitchPortInfo) => {
|
||||
payload.stopPropagation();
|
||||
payload.preventDefault();
|
||||
if (!hasPermission(station.value.code, PERMISSION_TYPE_LITERALS.OPERATION)) return;
|
||||
const { clientX, clientY } = payload;
|
||||
contextmenu.value = { x: clientX, y: clientY, port };
|
||||
showContextmenu.value = true;
|
||||
@@ -213,8 +208,8 @@ const { mutate: unlinkDevice } = useMutation({
|
||||
delete modifiedUpperLinkDescription.downstream?.[port.portName];
|
||||
modifiedUpperDevice.linkDescription = JSON.stringify(modifiedUpperLinkDescription);
|
||||
|
||||
// 3. 发起update请求并获取最新的设备详情（使用本地数据库时直接修改本地数据）
|
||||
if (useLocalDB.value) {
|
||||
// 3. 发起update请求并获取最新的设备详情（离线模式下直接修改本地数据）
|
||||
if (offlineDev.value) {
|
||||
return { upperDevice: modifiedUpperDevice, lowerDevice: modifiedLowerDevice };
|
||||
}
|
||||
const stationCode = station.value.code;
|
||||
|
||||
@@ -32,7 +32,7 @@ const show = defineModel<boolean>('show', { default: false });
|
||||
const deviceStore = useDeviceStore();
|
||||
|
||||
const settingStore = useSettingStore();
|
||||
const { useLocalDB } = storeToRefs(settingStore);
|
||||
const { offlineDev } = storeToRefs(settingStore);
|
||||
|
||||
const { ndmDevice, station, port } = toRefs(props);
|
||||
|
||||
@@ -78,9 +78,7 @@ const { mutate: linkPortToDevice, isPending: linking } = useMutation({
|
||||
const lowerDeviceDbId = lowerDevice.value?.id;
|
||||
if (!lowerDeviceDbId) throw new Error('该设备没有ID');
|
||||
|
||||
// 0. 检查是否会导致循环关联，
|
||||
if (upperDeviceDbId === lowerDeviceDbId) throw new Error('不能关联到自身');
|
||||
// 以及检查上游设备的linkDescription的downstream字段是否存在某个端口已经关联下游设备
|
||||
// 0. 检查上游设备的linkDescription的downstream字段是否存在某个端口已经关联下游设备
|
||||
const duplicated = Object.entries(upperDeviceLinkDescription.value?.downstream ?? {}).find(([, deviceStoreIndex]) => {
|
||||
return deviceStoreIndex.deviceDbId === lowerDeviceDbId;
|
||||
});
|
||||
@@ -160,8 +158,8 @@ const { mutate: linkPortToDevice, isPending: linking } = useMutation({
|
||||
}
|
||||
modifiedLowerDevice.linkDescription = JSON.stringify(modifiedLowerDeviceLinkDescription);
|
||||
|
||||
// 3. 发起update请求并获取最新的设备详情（使用本地数据库时直接修改本地数据）
|
||||
if (useLocalDB.value) {
|
||||
// 3. 发起update请求并获取最新的设备详情（离线模式下直接修改本地数据）
|
||||
if (offlineDev.value) {
|
||||
return { upperDevice: modifiedUpperDevice, lowerDevice: modifiedLowerDevice };
|
||||
}
|
||||
const stationCode = station.value.code;
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { NdmAlarmHostResultVO, Station } from '@/apis';
|
||||
import { AlarmHostCurrentDiag, AlarmHostHistoryDiag, AlarmHostUpdate, DeviceRawCard } from '@/components';
|
||||
import { usePermission } from '@/composables';
|
||||
import { PERMISSION_TYPE_LITERALS } from '@/enums';
|
||||
import { useSettingStore } from '@/stores';
|
||||
import { NCard, NPageHeader, NScrollbar, NTab, NTabs } from 'naive-ui';
|
||||
import { storeToRefs } from 'pinia';
|
||||
@@ -18,9 +16,7 @@ const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const settingStore = useSettingStore();
|
||||
const { showDeviceRawData } = storeToRefs(settingStore);
|
||||
|
||||
const { hasPermission } = usePermission();
|
||||
const { debugModeEnabled } = storeToRefs(settingStore);
|
||||
|
||||
const { ndmDevice, station } = toRefs(props);
|
||||
|
||||
@@ -35,8 +31,8 @@ const activeTabName = ref('当前诊断');
|
||||
const onTabChange = (name: string) => {
|
||||
activeTabName.value = name;
|
||||
};
|
||||
watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
|
||||
if (newDevice.id !== oldDevice.id || (!showRaw && activeTabName.value === '原始数据')) {
|
||||
watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
|
||||
if (newDevice.id !== oldDevice.id || !enabled) {
|
||||
activeTabName.value = '当前诊断';
|
||||
}
|
||||
});
|
||||
@@ -49,8 +45,8 @@ watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
|
||||
<NTabs :value="activeTabName" @update:value="onTabChange">
|
||||
<NTab name="当前诊断">当前诊断</NTab>
|
||||
<NTab name="历史诊断">历史诊断</NTab>
|
||||
<NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
|
||||
<NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
|
||||
<NTab name="修改设备">修改设备</NTab>
|
||||
<NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
|
||||
</NTabs>
|
||||
</template>
|
||||
<template #default>
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { NdmCameraResultVO, Station } from '@/apis';
|
||||
import { CameraCurrentDiag, CameraHistoryDiag, CameraUpdate, DeviceRawCard } from '@/components';
|
||||
import { usePermission } from '@/composables';
|
||||
import { PERMISSION_TYPE_LITERALS } from '@/enums';
|
||||
import { useSettingStore } from '@/stores';
|
||||
import { NCard, NPageHeader, NScrollbar, NTab, NTabs } from 'naive-ui';
|
||||
import { storeToRefs } from 'pinia';
|
||||
@@ -18,9 +16,7 @@ const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const settingStore = useSettingStore();
|
||||
const { showDeviceRawData } = storeToRefs(settingStore);
|
||||
|
||||
const { hasPermission } = usePermission();
|
||||
const { debugModeEnabled } = storeToRefs(settingStore);
|
||||
|
||||
const { ndmDevice, station } = toRefs(props);
|
||||
|
||||
@@ -35,8 +31,8 @@ const activeTabName = ref('当前诊断');
|
||||
const onTabChange = (name: string) => {
|
||||
activeTabName.value = name;
|
||||
};
|
||||
watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
|
||||
if (newDevice.id !== oldDevice.id || (!showRaw && activeTabName.value === '原始数据')) {
|
||||
watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
|
||||
if (newDevice.id !== oldDevice.id || !enabled) {
|
||||
activeTabName.value = '当前诊断';
|
||||
}
|
||||
});
|
||||
@@ -49,8 +45,8 @@ watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
|
||||
<NTabs :value="activeTabName" @update:value="onTabChange">
|
||||
<NTab name="当前诊断">当前诊断</NTab>
|
||||
<NTab name="历史诊断">历史诊断</NTab>
|
||||
<NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
|
||||
<NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
|
||||
<NTab name="修改设备">修改设备</NTab>
|
||||
<NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
|
||||
</NTabs>
|
||||
</template>
|
||||
<template #default>
|
||||
|
||||
@@ -31,7 +31,7 @@ const props = defineProps<{
|
||||
}>();
|
||||
|
||||
const settingStore = useSettingStore();
|
||||
const { activeRequests } = storeToRefs(settingStore);
|
||||
const { offlineDev } = storeToRefs(settingStore);
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
@@ -49,7 +49,7 @@ const QUERY_KEY = 'camera-installation-area-query';
|
||||
|
||||
const { data: installationArea } = useQuery({
|
||||
queryKey: computed(() => [QUERY_KEY, ndmDevice.value.gbCode, station.value.code]),
|
||||
enabled: computed(() => activeRequests.value),
|
||||
enabled: computed(() => !offlineDev.value),
|
||||
gcTime: 0,
|
||||
queryFn: async ({ signal }) => {
|
||||
const UNKNOWN_NAME = '-';
|
||||
@@ -107,8 +107,8 @@ const { data: installationArea } = useQuery({
|
||||
return `${tier1Area.name}-${tier2Area.name}`;
|
||||
},
|
||||
});
|
||||
watch(activeRequests, (active) => {
|
||||
if (!active) {
|
||||
watch(offlineDev, (offline) => {
|
||||
if (offline) {
|
||||
queryClient.cancelQueries({ queryKey: [QUERY_KEY] });
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { NdmDecoderResultVO, Station } from '@/apis';
|
||||
import { DecoderCurrentDiag, DecoderHistoryDiag, DecoderUpdate, DeviceRawCard } from '@/components';
|
||||
import { usePermission } from '@/composables';
|
||||
import { PERMISSION_TYPE_LITERALS } from '@/enums';
|
||||
import { useSettingStore } from '@/stores';
|
||||
import { NCard, NPageHeader, NScrollbar, NTab, NTabs } from 'naive-ui';
|
||||
import { storeToRefs } from 'pinia';
|
||||
@@ -18,9 +16,7 @@ const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const settingStore = useSettingStore();
|
||||
const { showDeviceRawData } = storeToRefs(settingStore);
|
||||
|
||||
const { hasPermission } = usePermission();
|
||||
const { debugModeEnabled } = storeToRefs(settingStore);
|
||||
|
||||
const { ndmDevice, station } = toRefs(props);
|
||||
|
||||
@@ -35,8 +31,8 @@ const activeTabName = ref('当前诊断');
|
||||
const onTabChange = (name: string) => {
|
||||
activeTabName.value = name;
|
||||
};
|
||||
watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
|
||||
if (newDevice.id !== oldDevice.id || (!showRaw && activeTabName.value === '原始数据')) {
|
||||
watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
|
||||
if (newDevice.id !== oldDevice.id || !enabled) {
|
||||
activeTabName.value = '当前诊断';
|
||||
}
|
||||
});
|
||||
@@ -49,8 +45,8 @@ watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
|
||||
<NTabs :value="activeTabName" @update:value="onTabChange">
|
||||
<NTab name="当前诊断">当前诊断</NTab>
|
||||
<NTab name="历史诊断">历史诊断</NTab>
|
||||
<NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
|
||||
<NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
|
||||
<NTab name="修改设备">修改设备</NTab>
|
||||
<NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
|
||||
</NTabs>
|
||||
</template>
|
||||
<template #default>
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { NdmKeyboardResultVO, Station } from '@/apis';
|
||||
import { DeviceRawCard, KeyboardCurrentDiag, KeyboardHistoryDiag, KeyboardUpdate } from '@/components';
|
||||
import { usePermission } from '@/composables';
|
||||
import { PERMISSION_TYPE_LITERALS } from '@/enums';
|
||||
import { useSettingStore } from '@/stores';
|
||||
import { NCard, NPageHeader, NScrollbar, NTab, NTabs } from 'naive-ui';
|
||||
import { storeToRefs } from 'pinia';
|
||||
@@ -18,9 +16,7 @@ const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const settingStore = useSettingStore();
|
||||
const { showDeviceRawData } = storeToRefs(settingStore);
|
||||
|
||||
const { hasPermission } = usePermission();
|
||||
const { debugModeEnabled } = storeToRefs(settingStore);
|
||||
|
||||
const { ndmDevice, station } = toRefs(props);
|
||||
|
||||
@@ -35,8 +31,8 @@ const activeTabName = ref('当前诊断');
|
||||
const onTabChange = (name: string) => {
|
||||
activeTabName.value = name;
|
||||
};
|
||||
watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
|
||||
if (newDevice.id !== oldDevice.id || (!showRaw && activeTabName.value === '原始数据')) {
|
||||
watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
|
||||
if (newDevice.id !== oldDevice.id || !enabled) {
|
||||
activeTabName.value = '当前诊断';
|
||||
}
|
||||
});
|
||||
@@ -49,8 +45,8 @@ watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
|
||||
<NTabs :value="activeTabName" @update:value="onTabChange">
|
||||
<NTab name="当前诊断">当前诊断</NTab>
|
||||
<NTab name="历史诊断">历史诊断</NTab>
|
||||
<NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
|
||||
<NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
|
||||
<NTab name="修改设备">修改设备</NTab>
|
||||
<NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
|
||||
</NTabs>
|
||||
</template>
|
||||
<template #default>
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { NdmNvrResultVO, Station } from '@/apis';
|
||||
import { DeviceRawCard, NvrCurrentDiag, NvrHistoryDiag, NvrUpdate } from '@/components';
|
||||
import { usePermission } from '@/composables';
|
||||
import { PERMISSION_TYPE_LITERALS } from '@/enums';
|
||||
import { useSettingStore } from '@/stores';
|
||||
import { NCard, NPageHeader, NScrollbar, NTab, NTabs } from 'naive-ui';
|
||||
import { storeToRefs } from 'pinia';
|
||||
@@ -18,9 +16,7 @@ const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const settingStore = useSettingStore();
|
||||
const { showDeviceRawData } = storeToRefs(settingStore);
|
||||
|
||||
const { hasPermission } = usePermission();
|
||||
const { debugModeEnabled } = storeToRefs(settingStore);
|
||||
|
||||
const { ndmDevice, station } = toRefs(props);
|
||||
|
||||
@@ -35,8 +31,8 @@ const activeTabName = ref('当前诊断');
|
||||
const onTabChange = (name: string) => {
|
||||
activeTabName.value = name;
|
||||
};
|
||||
watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
|
||||
if (newDevice.id !== oldDevice.id || (!showRaw && activeTabName.value === '原始数据')) {
|
||||
watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
|
||||
if (newDevice.id !== oldDevice.id || !enabled) {
|
||||
activeTabName.value = '当前诊断';
|
||||
}
|
||||
});
|
||||
@@ -49,8 +45,8 @@ watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
|
||||
<NTabs :value="activeTabName" @update:value="onTabChange">
|
||||
<NTab name="当前诊断">当前诊断</NTab>
|
||||
<NTab name="历史诊断">历史诊断</NTab>
|
||||
<NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
|
||||
<NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
|
||||
<NTab name="修改设备">修改设备</NTab>
|
||||
<NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
|
||||
</NTabs>
|
||||
</template>
|
||||
<template #default>
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { NdmSecurityBoxResultVO, Station } from '@/apis';
|
||||
import { DeviceRawCard, SecurityBoxCurrentDiag, SecurityBoxHistoryDiag, SecurityBoxUpdate } from '@/components';
|
||||
import { usePermission } from '@/composables';
|
||||
import { PERMISSION_TYPE_LITERALS } from '@/enums';
|
||||
import { useSettingStore } from '@/stores';
|
||||
import { NCard, NPageHeader, NScrollbar, NTab, NTabs } from 'naive-ui';
|
||||
import { storeToRefs } from 'pinia';
|
||||
@@ -18,9 +16,7 @@ const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const settingStore = useSettingStore();
|
||||
const { showDeviceRawData } = storeToRefs(settingStore);
|
||||
|
||||
const { hasPermission } = usePermission();
|
||||
const { debugModeEnabled } = storeToRefs(settingStore);
|
||||
|
||||
const { ndmDevice, station } = toRefs(props);
|
||||
|
||||
@@ -35,8 +31,8 @@ const activeTabName = ref('当前诊断');
|
||||
const onTabChange = (name: string) => {
|
||||
activeTabName.value = name;
|
||||
};
|
||||
watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
|
||||
if (newDevice.id !== oldDevice.id || (!showRaw && activeTabName.value === '原始数据')) {
|
||||
watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
|
||||
if (newDevice.id !== oldDevice.id || !enabled) {
|
||||
activeTabName.value = '当前诊断';
|
||||
}
|
||||
});
|
||||
@@ -49,8 +45,8 @@ watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
|
||||
<NTabs :value="activeTabName" @update:value="onTabChange">
|
||||
<NTab name="当前诊断">当前诊断</NTab>
|
||||
<NTab name="历史诊断">历史诊断</NTab>
|
||||
<NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
|
||||
<NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
|
||||
<NTab name="修改设备">修改设备</NTab>
|
||||
<NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
|
||||
</NTabs>
|
||||
</template>
|
||||
<template #default>
|
||||
|
||||
@@ -2,7 +2,6 @@ import ServerAlive from './server-alive.vue';
|
||||
import ServerCard from './server-card.vue';
|
||||
import ServerCurrentDiag from './server-current-diag.vue';
|
||||
import ServerHistoryDiag from './server-history-diag.vue';
|
||||
import ServerStreamPush from './server-stream-push.vue';
|
||||
import ServerUpdate from './server-update.vue';
|
||||
|
||||
export { ServerAlive, ServerCard, ServerCurrentDiag, ServerHistoryDiag, ServerUpdate, ServerStreamPush };
|
||||
export { ServerAlive, ServerCard, ServerCurrentDiag, ServerHistoryDiag, ServerUpdate };
|
||||
|
||||
@@ -13,7 +13,7 @@ const props = defineProps<{
|
||||
}>();
|
||||
|
||||
const settingStore = useSettingStore();
|
||||
const { activeRequests } = storeToRefs(settingStore);
|
||||
const { offlineDev } = storeToRefs(settingStore);
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
@@ -25,7 +25,7 @@ const MEDIA_SERVER_ALIVE_QUERY_KEY = 'media-server-alive-query';
|
||||
const VIDEO_SERVER_ALIVE_QUERY_KEY = 'video-server-alive-query';
|
||||
const { data: isMediaServerAlive } = useQuery({
|
||||
queryKey: computed(() => [MEDIA_SERVER_ALIVE_QUERY_KEY, ndmDevice.value.id, ndmDevice.value.lastDiagTime]),
|
||||
enabled: computed(() => activeRequests.value && deviceType.value === DEVICE_TYPE_LITERALS.ndmMediaServer),
|
||||
enabled: computed(() => !offlineDev.value && deviceType.value === DEVICE_TYPE_LITERALS.ndmMediaServer),
|
||||
refetchInterval: 30 * 1000,
|
||||
gcTime: 0,
|
||||
queryFn: async ({ signal }) => {
|
||||
@@ -35,15 +35,15 @@ const { data: isMediaServerAlive } = useQuery({
|
||||
});
|
||||
const { data: isSipServerAlive } = useQuery({
|
||||
queryKey: computed(() => [VIDEO_SERVER_ALIVE_QUERY_KEY, ndmDevice.value.id, ndmDevice.value.lastDiagTime]),
|
||||
enabled: computed(() => activeRequests.value && deviceType.value === DEVICE_TYPE_LITERALS.ndmVideoServer),
|
||||
enabled: computed(() => !offlineDev.value && deviceType.value === DEVICE_TYPE_LITERALS.ndmVideoServer),
|
||||
refetchInterval: 30 * 1000,
|
||||
gcTime: 0,
|
||||
queryFn: async ({ signal }) => {
|
||||
return await isSipServerAliveApi({ stationCode: station.value.code, signal });
|
||||
},
|
||||
});
|
||||
watch(activeRequests, (active) => {
|
||||
if (!active) {
|
||||
watch(offlineDev, (offline) => {
|
||||
if (offline) {
|
||||
queryClient.cancelQueries({ queryKey: [MEDIA_SERVER_ALIVE_QUERY_KEY] });
|
||||
queryClient.cancelQueries({ queryKey: [VIDEO_SERVER_ALIVE_QUERY_KEY] });
|
||||
}
|
||||
@@ -56,29 +56,20 @@ watch(activeRequests, (active) => {
|
||||
<span>服务状态</span>
|
||||
</template>
|
||||
<template #default>
|
||||
<template v-if="!activeRequests">
|
||||
<span>-</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-if="deviceType === DEVICE_TYPE_LITERALS.ndmMediaServer">
|
||||
<span>流媒体服务状态：</span>
|
||||
<template v-if="!!isMediaServerAlive">
|
||||
<NTag size="small" :type="isMediaServerAlive.online ? 'success' : 'error'">{{ isMediaServerAlive.online ? '在线' : '离线' }}</NTag>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>-</span>
|
||||
</template>
|
||||
<div v-if="deviceType === DEVICE_TYPE_LITERALS.ndmMediaServer">
|
||||
<span>流媒体服务状态：</span>
|
||||
<template v-if="!!isMediaServerAlive">
|
||||
<NTag size="small" :type="isMediaServerAlive.online ? 'success' : 'error'">{{ isMediaServerAlive.online ? '在线' : '离线' }}</NTag>
|
||||
</template>
|
||||
<template v-if="deviceType === DEVICE_TYPE_LITERALS.ndmVideoServer">
|
||||
<span>信令服务状态：</span>
|
||||
<template v-if="isSipServerAlive !== undefined">
|
||||
<NTag size="small" :type="isSipServerAlive ? 'success' : 'error'">{{ isSipServerAlive ? '在线' : '离线' }}</NTag>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>-</span>
|
||||
</template>
|
||||
<span v-else>-</span>
|
||||
</div>
|
||||
<div v-if="deviceType === DEVICE_TYPE_LITERALS.ndmVideoServer">
|
||||
<span>信令服务状态：</span>
|
||||
<template v-if="isSipServerAlive !== undefined">
|
||||
<NTag size="small" :type="isSipServerAlive ? 'success' : 'error'">{{ isSipServerAlive ? '在线' : '离线' }}</NTag>
|
||||
</template>
|
||||
</template>
|
||||
<span v-else>-</span>
|
||||
</div>
|
||||
</template>
|
||||
</NCard>
|
||||
</template>
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { NdmServerResultVO, Station } from '@/apis';
|
||||
import { DeviceRawCard, ServerCurrentDiag, ServerHistoryDiag, ServerUpdate } from '@/components';
|
||||
import { usePermission } from '@/composables';
|
||||
import { PERMISSION_TYPE_LITERALS } from '@/enums';
|
||||
import { useSettingStore } from '@/stores';
|
||||
import { NCard, NPageHeader, NScrollbar, NTab, NTabs } from 'naive-ui';
|
||||
import { storeToRefs } from 'pinia';
|
||||
@@ -18,9 +16,7 @@ const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const settingStore = useSettingStore();
|
||||
const { showDeviceRawData } = storeToRefs(settingStore);
|
||||
|
||||
const { hasPermission } = usePermission();
|
||||
const { debugModeEnabled } = storeToRefs(settingStore);
|
||||
|
||||
const { ndmDevice, station } = toRefs(props);
|
||||
|
||||
@@ -35,8 +31,8 @@ const activeTabName = ref('当前诊断');
|
||||
const onTabChange = (name: string) => {
|
||||
activeTabName.value = name;
|
||||
};
|
||||
watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
|
||||
if (newDevice.id !== oldDevice.id || (!showRaw && activeTabName.value === '原始数据')) {
|
||||
watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
|
||||
if (newDevice.id !== oldDevice.id || !enabled) {
|
||||
activeTabName.value = '当前诊断';
|
||||
}
|
||||
});
|
||||
@@ -49,8 +45,8 @@ watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
|
||||
<NTabs :value="activeTabName" @update:value="onTabChange">
|
||||
<NTab name="当前诊断">当前诊断</NTab>
|
||||
<NTab name="历史诊断">历史诊断</NTab>
|
||||
<NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
|
||||
<NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
|
||||
<NTab name="修改设备">修改设备</NTab>
|
||||
<NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
|
||||
</NTabs>
|
||||
</template>
|
||||
<template #default>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { type NdmServerDiagInfo, type NdmServerResultVO, type Station } from '@/apis';
|
||||
import { DeviceHardwareCard, DeviceHeaderCard, ServerAlive, ServerStreamPush } from '@/components';
|
||||
import { DeviceHardwareCard, DeviceHeaderCard, ServerAlive } from '@/components';
|
||||
import destr from 'destr';
|
||||
import { NFlex } from 'naive-ui';
|
||||
import { computed, toRefs } from 'vue';
|
||||
@@ -30,7 +30,6 @@ const runningTime = computed(() => lastDiagInfo.value?.commInfo?.系统运行时
|
||||
<DeviceHeaderCard :ndm-device="ndmDevice" :station="station" />
|
||||
<DeviceHardwareCard running-time-label="服务器运行时间" :cpu-usage="cpuUsage" :mem-usage="memUsage" :disk-usage="diskUsage" :running-time="runningTime" />
|
||||
<ServerAlive :ndm-device="ndmDevice" :station="station" />
|
||||
<ServerStreamPush :ndm-device="ndmDevice" :station="station" />
|
||||
</NFlex>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,100 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { getAllPushApi, type NdmServerResultVO, type Station } from '@/apis';
|
||||
import { DEVICE_TYPE_LITERALS, tryGetDeviceType } from '@/enums';
|
||||
import { useSettingStore } from '@/stores';
|
||||
import { useQuery, useQueryClient } from '@tanstack/vue-query';
|
||||
import { NCard, NCollapse, NCollapseItem, NFlex, NTag, NText } from 'naive-ui';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { computed, toRefs, watch } from 'vue';
|
||||
|
||||
const props = defineProps<{
|
||||
ndmDevice: NdmServerResultVO;
|
||||
station: Station;
|
||||
}>();
|
||||
|
||||
const settingStore = useSettingStore();
|
||||
const { activeRequests } = storeToRefs(settingStore);
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { ndmDevice, station } = toRefs(props);
|
||||
|
||||
const deviceType = computed(() => tryGetDeviceType(ndmDevice.value.deviceType));
|
||||
|
||||
const showCard = computed(() => deviceType.value === DEVICE_TYPE_LITERALS.ndmMediaServer);
|
||||
|
||||
const SERVER_STREAM_PUSH_KEY = 'server-stream-push-query';
|
||||
|
||||
const { data: streamPushes } = useQuery({
|
||||
queryKey: computed(() => [SERVER_STREAM_PUSH_KEY, ndmDevice.value.id, ndmDevice.value.lastDiagTime]),
|
||||
enabled: computed(() => activeRequests.value && showCard.value),
|
||||
refetchInterval: 30 * 1000,
|
||||
gcTime: 0,
|
||||
queryFn: async ({ signal }) => {
|
||||
const streamPushes = await getAllPushApi({ stationCode: station.value.code, signal });
|
||||
return streamPushes;
|
||||
},
|
||||
});
|
||||
watch(activeRequests, (active) => {
|
||||
if (!active) {
|
||||
queryClient.cancelQueries({ queryKey: [SERVER_STREAM_PUSH_KEY] });
|
||||
}
|
||||
});
|
||||
|
||||
interface StreamPushStat {
|
||||
ip: string;
|
||||
port: number | null;
|
||||
ssrc: string | null;
|
||||
channelIds: string[];
|
||||
}
|
||||
const streamPushStat = computed(() => {
|
||||
const stat: StreamPushStat[] = [];
|
||||
streamPushes.value?.forEach((push) => {
|
||||
if (!push.ip || !push.channelId) return;
|
||||
const existIndex = stat.findIndex((item) => item.ip === push.ip);
|
||||
if (existIndex === -1) {
|
||||
stat.push({ ip: push.ip, port: push.port, ssrc: push.ssrc, channelIds: [push.channelId] });
|
||||
} else {
|
||||
const statItem = stat[existIndex];
|
||||
if (!statItem) return;
|
||||
statItem.channelIds.push(push.channelId);
|
||||
}
|
||||
});
|
||||
return stat;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NCard v-if="showCard" hoverable size="small">
|
||||
<template #header>
|
||||
<span>推流统计</span>
|
||||
</template>
|
||||
<template #default>
|
||||
<template v-if="!activeRequests">
|
||||
<span>-</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<NFlex vertical>
|
||||
<NText depth="3">共 {{ streamPushStat.length }} 个推流目标</NText>
|
||||
<NCollapse v-if="streamPushStat.length > 0">
|
||||
<NCollapseItem v-for="{ ip, port, ssrc, channelIds } in streamPushStat" :key="`${ip}:${port}:${ssrc}`" :name="`${ip}:${port}:${ssrc}`">
|
||||
<template #header>
|
||||
<span>{{ ip }}</span>
|
||||
</template>
|
||||
<template #header-extra>
|
||||
<span>{{ channelIds.length }} 路</span>
|
||||
</template>
|
||||
<template #default>
|
||||
<NFlex>
|
||||
<NTag v-for="channelId in channelIds" :key="channelId" size="small" type="info" :bordered="false">{{ channelId }}</NTag>
|
||||
</NFlex>
|
||||
</template>
|
||||
</NCollapseItem>
|
||||
</NCollapse>
|
||||
</NFlex>
|
||||
</template>
|
||||
</template>
|
||||
</NCard>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@@ -1,8 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { NdmSwitchResultVO, Station } from '@/apis';
|
||||
import { DeviceRawCard, SwitchCurrentDiag, SwitchHistoryDiag, SwitchUpdate } from '@/components';
|
||||
import { usePermission } from '@/composables';
|
||||
import { PERMISSION_TYPE_LITERALS } from '@/enums';
|
||||
import { useSettingStore } from '@/stores';
|
||||
import { NCard, NPageHeader, NScrollbar, NTab, NTabs } from 'naive-ui';
|
||||
import { storeToRefs } from 'pinia';
|
||||
@@ -18,9 +16,7 @@ const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const settingStore = useSettingStore();
|
||||
const { showDeviceRawData } = storeToRefs(settingStore);
|
||||
|
||||
const { hasPermission } = usePermission();
|
||||
const { debugModeEnabled } = storeToRefs(settingStore);
|
||||
|
||||
const { ndmDevice, station } = toRefs(props);
|
||||
|
||||
@@ -35,8 +31,8 @@ const activeTabName = ref('当前诊断');
|
||||
const onTabChange = (name: string) => {
|
||||
activeTabName.value = name;
|
||||
};
|
||||
watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
|
||||
if (newDevice.id !== oldDevice.id || (!showRaw && activeTabName.value === '原始数据')) {
|
||||
watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
|
||||
if (newDevice.id !== oldDevice.id || !enabled) {
|
||||
activeTabName.value = '当前诊断';
|
||||
}
|
||||
});
|
||||
@@ -49,8 +45,8 @@ watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
|
||||
<NTabs :value="activeTabName" @update:value="onTabChange">
|
||||
<NTab name="当前诊断">当前诊断</NTab>
|
||||
<NTab name="历史诊断">历史诊断</NTab>
|
||||
<NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
|
||||
<NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
|
||||
<NTab name="修改设备">修改设备</NTab>
|
||||
<NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
|
||||
</NTabs>
|
||||
</template>
|
||||
<template #default>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import { initStationDevices, type NdmDeviceResultVO, type NdmNvrResultVO, type Station } from '@/apis';
|
||||
import { useDeviceTree, usePermission, type UseDeviceTreeReturn } from '@/composables';
|
||||
import { DEVICE_TYPE_NAMES, DEVICE_TYPE_LITERALS, tryGetDeviceType, type DeviceType, PERMISSION_TYPE_LITERALS } from '@/enums';
|
||||
import { useDeviceTree, type UseDeviceTreeReturn } from '@/composables';
|
||||
import { DEVICE_TYPE_NAMES, DEVICE_TYPE_LITERALS, tryGetDeviceType, type DeviceType } from '@/enums';
|
||||
import { isNvrCluster } from '@/helpers';
|
||||
import { useDeviceStore, usePermissionStore } from '@/stores';
|
||||
import { watchDebounced, watchImmediate } from '@vueuse/core';
|
||||
import { useDeviceStore, useStationStore } from '@/stores';
|
||||
import { watchImmediate } from '@vueuse/core';
|
||||
import destr from 'destr';
|
||||
import { isFunction } from 'es-toolkit';
|
||||
import {
|
||||
@@ -27,7 +27,7 @@ import {
|
||||
type TreeProps,
|
||||
} from 'naive-ui';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { computed, h, nextTick, onBeforeUnmount, onMounted, ref, toRefs, useTemplateRef, watch, type CSSProperties } from 'vue';
|
||||
import { computed, h, nextTick, onBeforeUnmount, ref, toRefs, useTemplateRef, watch, type CSSProperties } from 'vue';
|
||||
|
||||
const props = defineProps<{
|
||||
/**
|
||||
@@ -60,22 +60,20 @@ const { station, events, syncRoute, devicePrefixLabel } = toRefs(props);
|
||||
|
||||
const themeVars = useThemeVars();
|
||||
|
||||
const { hasPermission } = usePermission();
|
||||
|
||||
const {
|
||||
// 设备选择
|
||||
selectedStationCode,
|
||||
selectedDeviceType,
|
||||
selectedDevice,
|
||||
syncFromRoute,
|
||||
syncToRoute,
|
||||
selectDevice,
|
||||
// 设备管理
|
||||
exportDevice,
|
||||
exportDeviceTemplate,
|
||||
importDevice,
|
||||
deleteDevice,
|
||||
} = useDeviceTree();
|
||||
} = useDeviceTree({
|
||||
syncRoute: computed(() => !!syncRoute.value),
|
||||
});
|
||||
|
||||
// 将 `selectDevice` 函数暴露给父组件
|
||||
emit('exposeSelectDeviceFn', selectDevice);
|
||||
@@ -89,9 +87,8 @@ const onSelectDevice = (device: NdmDeviceResultVO, stationCode: Station['code'])
|
||||
emit('afterSelectDevice', device, stationCode);
|
||||
};
|
||||
|
||||
const permissionStore = usePermissionStore();
|
||||
const stations = computed(() => permissionStore.stations.VIEW ?? []);
|
||||
|
||||
const stationStore = useStationStore();
|
||||
const { stations } = storeToRefs(stationStore);
|
||||
const deviceStore = useDeviceStore();
|
||||
const { lineDevices } = storeToRefs(deviceStore);
|
||||
|
||||
@@ -223,17 +220,13 @@ const nodeProps: TreeProps['nodeProps'] = ({ option }) => {
|
||||
payload.stopPropagation();
|
||||
payload.preventDefault();
|
||||
|
||||
// 如果事件列表不包含 `manage`，则直接结束逻辑
|
||||
// 仅当事件列表包含 `manage` 时才显示右键菜单
|
||||
if (!events.value?.includes('manage')) return;
|
||||
|
||||
const { clientX, clientY } = payload;
|
||||
const stationCode = option['stationCode'] as Station['code'];
|
||||
|
||||
// 仅当用户在该车站拥有操作权限时才显示右键菜单
|
||||
if (!hasPermission(stationCode, PERMISSION_TYPE_LITERALS.OPERATION)) return;
|
||||
|
||||
const deviceType = option['deviceType'] as DeviceType | undefined;
|
||||
const device = option['device'] as NdmDeviceResultVO | undefined;
|
||||
const { clientX, clientY } = payload;
|
||||
contextmenu.value = { x: clientX, y: clientY, stationCode, deviceType, device };
|
||||
showContextmenu.value = true;
|
||||
},
|
||||
@@ -484,38 +477,11 @@ const onLocateDeviceTree = async () => {
|
||||
|
||||
animated.value = true;
|
||||
};
|
||||
|
||||
// 当选择的设备发生变化时，定位设备树，并同步选中状态到路由参数
|
||||
// 渲染全线设备树时，当选择的设备发生变化，则定位设备树
|
||||
// 暂时不考虑多次执行的问题，因为当选择的设备在设备树视口内时，不会发生滚动
|
||||
watch(selectedDevice, async (newDevice, oldDevice) => {
|
||||
watch(selectedDevice, async () => {
|
||||
if (!!station.value) return;
|
||||
if (newDevice?.id === oldDevice?.id) return;
|
||||
// console.log('selectedDevice changed');
|
||||
onLocateDeviceTree();
|
||||
syncToRoute();
|
||||
});
|
||||
|
||||
// 当全线设备发生变化时，从路由参数同步选中状态
|
||||
// 但lineDevices是shallowRef，因此需要深度侦听才能获取内部变化，
|
||||
// 而单纯的深度侦听又可能会引发性能问题，因此尝试使用防抖侦听
|
||||
watchDebounced(
|
||||
lineDevices,
|
||||
(newLineDevices) => {
|
||||
if (syncRoute.value) {
|
||||
// console.log('lineDevices changed');
|
||||
syncFromRoute(newLineDevices);
|
||||
}
|
||||
},
|
||||
{
|
||||
debounce: 500,
|
||||
deep: true,
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
if (syncRoute.value) {
|
||||
syncFromRoute(lineDevices.value);
|
||||
}
|
||||
await onLocateDeviceTree();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,33 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
import { retentionDaysApi, snapStatusApi, type LineAlarms, type LineDevices, type Station, type VersionInfo } from '@/apis';
|
||||
import { ThemeSwitch } from '@/components';
|
||||
import { usePermission } from '@/composables';
|
||||
import { NDM_ALARM_STORE_ID, NDM_DEVICE_STORE_ID, NDM_STATION_STORE_ID } from '@/constants';
|
||||
import { PERMISSION_TYPE_LITERALS } from '@/enums';
|
||||
import { useSettingStore, useStationStore } from '@/stores';
|
||||
import { usePollingStore, useSettingStore } from '@/stores';
|
||||
import { downloadByData, getAppEnvConfig, parseErrorFeedback, sleep } from '@/utils';
|
||||
import { useMutation } from '@tanstack/vue-query';
|
||||
import { DeleteOutlined, ExportOutlined, ImportOutlined } from '@vicons/antd';
|
||||
import { useEventListener } from '@vueuse/core';
|
||||
import axios, { isCancel } from 'axios';
|
||||
import destr from 'destr';
|
||||
import { isFunction } from 'es-toolkit';
|
||||
import localforage from 'localforage';
|
||||
import { DownloadIcon, Trash2Icon, UploadIcon } from 'lucide-vue-next';
|
||||
import { NButton, NButtonGroup, NDivider, NDrawer, NDrawerContent, NDropdown, NFlex, NFormItem, NIcon, NInput, NInputNumber, NModal, NSwitch, NText, type DropdownOption } from 'naive-ui';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
const show = defineModel<boolean>('show', { default: false });
|
||||
|
||||
const stationStore = useStationStore();
|
||||
const { stations } = storeToRefs(stationStore);
|
||||
|
||||
const occStation = computed(() => stations.value.find((station) => !!station.occ));
|
||||
|
||||
const settingsStore = useSettingStore();
|
||||
const { menuCollpased, stationGridCols, debugMode, showDeviceRawData, pollingStations, activeRequests, subscribeMessages, mockUser, useLocalDB } = storeToRefs(settingsStore);
|
||||
|
||||
const { hasPermission } = usePermission();
|
||||
const { menuCollpased, stationGridCols, debugModeEnabled, offlineDev } = storeToRefs(settingsStore);
|
||||
|
||||
const versionInfo = ref<VersionInfo>({ version: '', buildTime: '' });
|
||||
|
||||
@@ -132,11 +123,11 @@ const enableDebugMode = () => {
|
||||
return;
|
||||
}
|
||||
showDebugCodeModal.value = false;
|
||||
debugMode.value = true;
|
||||
settingsStore.enableDebugMode();
|
||||
};
|
||||
const disableDebugMode = () => {
|
||||
showDebugCodeModal.value = false;
|
||||
debugMode.value = false;
|
||||
settingsStore.disableDebugMode();
|
||||
};
|
||||
useEventListener('keydown', (event) => {
|
||||
const { ctrlKey, altKey, code } = event;
|
||||
@@ -147,18 +138,28 @@ useEventListener('keydown', (event) => {
|
||||
|
||||
const expectToShowDebugCodeInput = ref(false);
|
||||
const onModalAfterEnter = () => {
|
||||
expectToShowDebugCodeInput.value = !debugMode.value;
|
||||
expectToShowDebugCodeInput.value = !debugModeEnabled.value;
|
||||
};
|
||||
const onModalAfterLeave = () => {
|
||||
expectToShowDebugCodeInput.value = false;
|
||||
debugCode.value = '';
|
||||
};
|
||||
|
||||
const pollingStore = usePollingStore();
|
||||
const { pollingEnabled } = storeToRefs(pollingStore);
|
||||
const onPollingEnabledUpdate = (enabled: boolean) => {
|
||||
if (enabled) {
|
||||
pollingStore.startPolling();
|
||||
} else {
|
||||
pollingStore.stopPolling();
|
||||
}
|
||||
};
|
||||
|
||||
type IndexedDbStoreId = typeof NDM_STATION_STORE_ID | typeof NDM_DEVICE_STORE_ID | typeof NDM_ALARM_STORE_ID;
|
||||
type IndexedDbStoreStates = {
|
||||
[NDM_STATION_STORE_ID]: { stations: Station[] };
|
||||
[NDM_DEVICE_STORE_ID]: { lineDevices: LineDevices };
|
||||
[NDM_ALARM_STORE_ID]: { lineAlarms: LineAlarms };
|
||||
[NDM_ALARM_STORE_ID]: { lineAlarms: LineAlarms; unreadLineAlarms: LineAlarms };
|
||||
};
|
||||
const exportFromIndexedDB = async <K extends IndexedDbStoreId>(storeId: K, options?: { errorMsg?: string }) => {
|
||||
const { errorMsg } = options ?? {};
|
||||
@@ -171,9 +172,8 @@ const exportFromIndexedDB = async <K extends IndexedDbStoreId>(storeId: K, optio
|
||||
};
|
||||
const importToIndexedDB = async <K extends IndexedDbStoreId>(storeId: K, options?: { successMsg?: string; errorMsg?: string }) => {
|
||||
const { successMsg, errorMsg } = options ?? {};
|
||||
pollingStations.value = false;
|
||||
activeRequests.value = false;
|
||||
subscribeMessages.value = false;
|
||||
pollingStore.stopPolling();
|
||||
offlineDev.value = true;
|
||||
const fileInput = document.createElement('input');
|
||||
fileInput.type = 'file';
|
||||
fileInput.accept = '.json';
|
||||
@@ -196,9 +196,8 @@ const importToIndexedDB = async <K extends IndexedDbStoreId>(storeId: K, options
|
||||
};
|
||||
};
|
||||
const deleteFromIndexedDB = async (storeId: IndexedDbStoreId) => {
|
||||
pollingStations.value = false;
|
||||
activeRequests.value = false;
|
||||
subscribeMessages.value = false;
|
||||
pollingStore.stopPolling();
|
||||
offlineDev.value = true;
|
||||
await localforage.removeItem(storeId).catch((error) => {
|
||||
window.$message.error(`${error}`);
|
||||
return;
|
||||
@@ -267,27 +266,24 @@ const onSelectDropdownOption = (key: string, option: DropdownOption) => {
|
||||
}
|
||||
};
|
||||
|
||||
watch([activeRequests, show], ([active, entered]) => {
|
||||
if (!active) return;
|
||||
if (entered) {
|
||||
getRetentionDays();
|
||||
getSnapStatus();
|
||||
} else {
|
||||
abortControllers.value.retentionDays.abort();
|
||||
abortControllers.value.snapStatus.abort();
|
||||
watch([offlineDev, show], ([offline, entered]) => {
|
||||
if (!offline) {
|
||||
if (entered) {
|
||||
getRetentionDays();
|
||||
getSnapStatus();
|
||||
} else {
|
||||
abortControllers.value.retentionDays.abort();
|
||||
abortControllers.value.snapStatus.abort();
|
||||
}
|
||||
}
|
||||
});
|
||||
const onDrawerAfterEnter = () => {
|
||||
getVersionInfo();
|
||||
};
|
||||
const onDrawerAfterLeave = () => {
|
||||
abortControllers.value.retentionDays.abort();
|
||||
abortControllers.value.snapStatus.abort();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NDrawer v-model:show="show" :width="560" :auto-focus="false" @after-enter="onDrawerAfterEnter" @after-leave="onDrawerAfterLeave">
|
||||
<NDrawer v-model:show="show" :width="560" :auto-focus="false" @after-enter="onDrawerAfterEnter">
|
||||
<NDrawerContent closable title="系统设置" :native-scrollbar="false">
|
||||
<NFlex vertical>
|
||||
<NDivider>主题</NDivider>
|
||||
@@ -303,60 +299,40 @@ const onDrawerAfterLeave = () => {
|
||||
<NInputNumber v-model:value="stationGridCols" :min="1" :max="10" />
|
||||
</NFormItem>
|
||||
|
||||
<template v-if="!!occStation && hasPermission(occStation.code, PERMISSION_TYPE_LITERALS.OPERATION)">
|
||||
<NDivider>告警</NDivider>
|
||||
<NFormItem label="告警画面截图保留天数" label-placement="left">
|
||||
<NFlex justify="space-between" align="center" style="width: 100%">
|
||||
<NInputNumber v-model:value="retentionDays" :min="1" :max="15" />
|
||||
<NButtonGroup>
|
||||
<NButton secondary size="small" :disabled="retentionDaysSaving" :loading="retentionDaysLoading" @click="() => getRetentionDays()">刷新</NButton>
|
||||
<NButton secondary size="small" :disabled="retentionDaysLoading" :loading="retentionDaysSaving" @click="() => saveRetentionDays()">保存</NButton>
|
||||
</NButtonGroup>
|
||||
</NFlex>
|
||||
</NFormItem>
|
||||
<NFormItem label="自动获取告警画面截图" label-placement="left">
|
||||
<NFlex justify="space-between" align="center" style="width: 100%">
|
||||
<NSwitch size="small" v-model:value="snapStatus" />
|
||||
<NButtonGroup>
|
||||
<NButton secondary size="small" :disabled="snapStatusSaving" :loading="snapStatusLoading" @click="() => getSnapStatus()">刷新</NButton>
|
||||
<NButton secondary size="small" :disabled="snapStatusLoading" :loading="snapStatusSaving" @click="() => saveSnapStatus()">保存</NButton>
|
||||
</NButtonGroup>
|
||||
</NFlex>
|
||||
</NFormItem>
|
||||
</template>
|
||||
<NDivider>告警</NDivider>
|
||||
<NFormItem label="告警画面截图保留天数" label-placement="left">
|
||||
<NFlex justify="space-between" align="center" style="width: 100%">
|
||||
<NInputNumber v-model:value="retentionDays" :min="1" :max="15" />
|
||||
<NButtonGroup>
|
||||
<NButton secondary size="small" :disabled="retentionDaysSaving" :loading="retentionDaysLoading" @click="() => getRetentionDays()">刷新</NButton>
|
||||
<NButton secondary size="small" :disabled="retentionDaysLoading" :loading="retentionDaysSaving" @click="() => saveRetentionDays()">保存</NButton>
|
||||
</NButtonGroup>
|
||||
</NFlex>
|
||||
</NFormItem>
|
||||
<NFormItem label="自动获取告警画面截图" label-placement="left">
|
||||
<NFlex justify="space-between" align="center" style="width: 100%">
|
||||
<NSwitch size="small" v-model:value="snapStatus" />
|
||||
<NButtonGroup>
|
||||
<NButton secondary size="small" :disabled="snapStatusSaving" :loading="snapStatusLoading" @click="() => getSnapStatus()">刷新</NButton>
|
||||
<NButton secondary size="small" :disabled="snapStatusLoading" :loading="snapStatusSaving" @click="() => saveSnapStatus()">保存</NButton>
|
||||
</NButtonGroup>
|
||||
</NFlex>
|
||||
</NFormItem>
|
||||
|
||||
<template v-if="debugMode">
|
||||
<template v-if="debugModeEnabled">
|
||||
<NDivider title-placement="center">调试</NDivider>
|
||||
<NFormItem label="调试模式" label-placement="left">
|
||||
<NSwitch size="small" v-model:value="debugMode" />
|
||||
<NFormItem label="启用轮询" label-placement="left">
|
||||
<NSwitch size="small" :value="pollingEnabled" @update:value="onPollingEnabledUpdate" />
|
||||
</NFormItem>
|
||||
<NDivider title-placement="left" dashed>数据设置</NDivider>
|
||||
<NFormItem label="显示设备原始数据" label-placement="left">
|
||||
<NSwitch size="small" v-model:value="showDeviceRawData" />
|
||||
<NFormItem label="离线开发" label-placement="left">
|
||||
<NSwitch size="small" v-model:value="offlineDev" />
|
||||
</NFormItem>
|
||||
<NDivider title-placement="left" dashed>网络设置</NDivider>
|
||||
<NFormItem label="轮询车站" label-placement="left">
|
||||
<NSwitch size="small" v-model:value="pollingStations" />
|
||||
</NFormItem>
|
||||
<NFormItem label="主动请求" label-placement="left">
|
||||
<NSwitch size="small" v-model:value="activeRequests" />
|
||||
</NFormItem>
|
||||
<NFormItem label="订阅消息" label-placement="left">
|
||||
<NSwitch size="small" v-model:value="subscribeMessages" />
|
||||
</NFormItem>
|
||||
<NFormItem label="模拟用户" label-placement="left">
|
||||
<NSwitch size="small" v-model:value="mockUser" />
|
||||
</NFormItem>
|
||||
<NDivider title-placement="left" dashed>数据库设置</NDivider>
|
||||
<NFormItem label="直接操作本地数据库" label-placement="left">
|
||||
<NSwitch size="small" v-model:value="useLocalDB" />
|
||||
</NFormItem>
|
||||
<NFormItem label="数据操作" label-placement="left">
|
||||
<NFormItem label="本地数据库" label-placement="left">
|
||||
<NFlex>
|
||||
<NDropdown trigger="click" :options="exportDropdownOptions" @select="onSelectDropdownOption">
|
||||
<NButton secondary size="small">
|
||||
<template #icon>
|
||||
<NIcon :component="DownloadIcon" />
|
||||
<NIcon :component="ExportOutlined" />
|
||||
</template>
|
||||
<template #default>导出</template>
|
||||
</NButton>
|
||||
@@ -364,7 +340,7 @@ const onDrawerAfterLeave = () => {
|
||||
<NDropdown trigger="click" :options="importDropdownOptions" @select="onSelectDropdownOption">
|
||||
<NButton secondary size="small">
|
||||
<template #icon>
|
||||
<NIcon :component="UploadIcon" />
|
||||
<NIcon :component="ImportOutlined" />
|
||||
</template>
|
||||
<template #default>导入</template>
|
||||
</NButton>
|
||||
@@ -372,7 +348,7 @@ const onDrawerAfterLeave = () => {
|
||||
<NDropdown trigger="click" :options="deleteDropdownOptions" @select="onSelectDropdownOption">
|
||||
<NButton secondary size="small">
|
||||
<template #icon>
|
||||
<NIcon :component="Trash2Icon" />
|
||||
<NIcon :component="DeleteOutlined" />
|
||||
</template>
|
||||
<template #default>删除</template>
|
||||
</NButton>
|
||||
@@ -391,7 +367,7 @@ const onDrawerAfterLeave = () => {
|
||||
|
||||
<NModal v-model:show="showDebugCodeModal" preset="dialog" type="info" @after-enter="onModalAfterEnter" @after-leave="onModalAfterLeave">
|
||||
<template #header>
|
||||
<NText v-if="!debugMode">请输入调试码</NText>
|
||||
<NText v-if="!debugModeEnabled">请输入调试码</NText>
|
||||
<NText v-else>确认关闭调试模式</NText>
|
||||
</template>
|
||||
<template #default>
|
||||
@@ -399,7 +375,7 @@ const onDrawerAfterLeave = () => {
|
||||
</template>
|
||||
<template #action>
|
||||
<NButton @click="showDebugCodeModal = false">取消</NButton>
|
||||
<NButton v-if="!debugMode" type="primary" @click="enableDebugMode">启用</NButton>
|
||||
<NButton v-if="!debugModeEnabled" type="primary" @click="enableDebugMode">启用</NButton>
|
||||
<NButton v-else type="primary" @click="disableDebugMode">确认</NButton>
|
||||
</template>
|
||||
</NModal>
|
||||
|
||||
@@ -5,14 +5,14 @@ import { storeToRefs } from 'pinia';
|
||||
import type { ComponentInstance } from 'vue';
|
||||
|
||||
const settingsStore = useSettingStore();
|
||||
const { darkMode } = storeToRefs(settingsStore);
|
||||
const { darkThemeEnabled } = storeToRefs(settingsStore);
|
||||
|
||||
// 使外部能够获取NSwitch的类型提示
|
||||
defineExpose({} as ComponentInstance<typeof NSwitch>);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NSwitch v-model:value="darkMode">
|
||||
<NSwitch v-model:value="darkThemeEnabled">
|
||||
<template #unchecked-icon>
|
||||
<NIcon>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
export * from './device';
|
||||
export * from './global';
|
||||
export * from './permission';
|
||||
export * from './station';
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
import type { ComponentInstance } from 'vue';
|
||||
import PermissionConfigModal from './permission-config-modal.vue';
|
||||
|
||||
export type PermissionConfigModalProps = ComponentInstance<typeof PermissionConfigModal>['$props'];
|
||||
|
||||
export { PermissionConfigModal };
|
||||
@@ -1,302 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { detailBaseEmployeeApi, modifyPermissionApi, pagePermissionApi, type BaseEmployeeResultVO, type NdmPermissionResultVO, type NdmPermissionSaveVO, type Station } from '@/apis';
|
||||
import { PERMISSION_TYPE_LITERALS, PERMISSION_TYPE_NAMES, type PermissionType } from '@/enums';
|
||||
import { useStationStore } from '@/stores';
|
||||
import { parseErrorFeedback } from '@/utils';
|
||||
import { useMutation } from '@tanstack/vue-query';
|
||||
import { objectEntries } from '@vueuse/core';
|
||||
import { isCancel } from 'axios';
|
||||
import { cloneDeep } from 'es-toolkit';
|
||||
import { NButton, NCheckbox, NDataTable, NFlex, NModal, NText, type DataTableColumn, type DataTableColumns } from 'naive-ui';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { computed, h, ref, toRefs } from 'vue';
|
||||
|
||||
type NdmPermissionSaveOrResultVO = NdmPermissionSaveVO | NdmPermissionResultVO;
|
||||
|
||||
const props = defineProps<{
|
||||
employeeId?: string;
|
||||
}>();
|
||||
|
||||
const stationStore = useStationStore();
|
||||
const { stations } = storeToRefs(stationStore);
|
||||
|
||||
const show = defineModel<boolean>('show', { default: false });
|
||||
|
||||
const { employeeId } = toRefs(props);
|
||||
|
||||
const abortController = ref<AbortController>(new AbortController());
|
||||
|
||||
const employee = ref<BaseEmployeeResultVO>();
|
||||
const { mutateAsync: getEmployeeAsync } = useMutation({
|
||||
mutationFn: async () => {
|
||||
abortController.value.abort();
|
||||
abortController.value = new AbortController();
|
||||
|
||||
if (!employeeId.value) return;
|
||||
|
||||
const signal = abortController.value.signal;
|
||||
|
||||
const data = await detailBaseEmployeeApi(employeeId.value, { signal });
|
||||
return data;
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
if (!data) return;
|
||||
employee.value = data;
|
||||
},
|
||||
onError: (error) => {
|
||||
if (isCancel(error)) return;
|
||||
console.error(error);
|
||||
const errorFeedback = parseErrorFeedback(error);
|
||||
window.$message.error(errorFeedback);
|
||||
},
|
||||
});
|
||||
|
||||
// 从后端获取的原始权限列表
|
||||
const originalList = ref<NdmPermissionResultVO[]>([]);
|
||||
// 当前用户配置的权限列表
|
||||
const currentList = ref<NdmPermissionSaveOrResultVO[]>([]);
|
||||
|
||||
const { mutate: getPermissions, isPending: permissionsLoading } = useMutation({
|
||||
mutationFn: async () => {
|
||||
if (!employeeId.value) throw new Error('员工ID不能为空');
|
||||
|
||||
abortController.value.abort();
|
||||
abortController.value = new AbortController();
|
||||
|
||||
const signal = abortController.value.signal;
|
||||
|
||||
const data = await pagePermissionApi(
|
||||
{
|
||||
model: {
|
||||
employeeId: employeeId.value,
|
||||
},
|
||||
current: 1,
|
||||
size: Object.keys(PERMISSION_TYPE_LITERALS).length * stations.value.length,
|
||||
},
|
||||
{ signal },
|
||||
);
|
||||
|
||||
return data;
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
if (!data) return;
|
||||
const { records } = data;
|
||||
originalList.value = cloneDeep(records);
|
||||
currentList.value = cloneDeep(records);
|
||||
},
|
||||
onError: (error) => {
|
||||
if (isCancel(error)) return;
|
||||
console.error(error);
|
||||
const errorFeedback = parseErrorFeedback(error);
|
||||
window.$message.error(errorFeedback);
|
||||
},
|
||||
});
|
||||
|
||||
const onUpdatePermissionChecked = (checked: boolean, stationCode: Station['code'], permissionType: PermissionType) => {
|
||||
if (!employeeId.value) return;
|
||||
if (checked) {
|
||||
const existed = currentList.value.some((permission) => permission.stationCode === stationCode && permission.type === permissionType);
|
||||
if (!existed) {
|
||||
const saveVO: NdmPermissionSaveVO = {
|
||||
employeeId: employeeId.value,
|
||||
stationCode,
|
||||
type: permissionType,
|
||||
};
|
||||
currentList.value.push(saveVO);
|
||||
}
|
||||
} else {
|
||||
const index = currentList.value.findIndex((permission) => permission.stationCode === stationCode && permission.type === permissionType);
|
||||
if (index !== -1) {
|
||||
currentList.value.splice(index, 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const tableColumns = computed<DataTableColumns<Station>>(() => {
|
||||
return [
|
||||
{
|
||||
title: () => {
|
||||
const permissionCount = currentList.value.length;
|
||||
const permissionTypeCount = objectEntries(PERMISSION_TYPE_LITERALS).length;
|
||||
const checked = permissionCount === stations.value.length * permissionTypeCount;
|
||||
const indeterminate = permissionCount > 0 && permissionCount < stations.value.length * permissionTypeCount;
|
||||
return h(NCheckbox, {
|
||||
checked,
|
||||
indeterminate,
|
||||
onUpdateChecked: (checked) => {
|
||||
objectEntries(PERMISSION_TYPE_LITERALS).forEach(([permissionType]) => {
|
||||
stations.value.forEach((station) => {
|
||||
onUpdatePermissionChecked(checked, station.code, permissionType);
|
||||
});
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
key: 'row-check',
|
||||
align: 'center',
|
||||
width: 60,
|
||||
fixed: 'left',
|
||||
render: (rowData) => {
|
||||
const { code: stationCode } = rowData;
|
||||
const permissionTypeCount = objectEntries(PERMISSION_TYPE_LITERALS).length;
|
||||
const stationCheckedPermissions = currentList.value.filter((permission) => permission.stationCode === stationCode);
|
||||
const checked = stationCheckedPermissions.length === permissionTypeCount;
|
||||
const indeterminate = stationCheckedPermissions.length > 0 && stationCheckedPermissions.length < permissionTypeCount;
|
||||
return h(NCheckbox, {
|
||||
checked,
|
||||
indeterminate,
|
||||
onUpdateChecked: (checked) => {
|
||||
objectEntries(PERMISSION_TYPE_LITERALS).forEach(([permissionType]) => {
|
||||
onUpdatePermissionChecked(checked, stationCode, permissionType);
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
{ title: '车站编号', key: 'code', align: 'center', width: 120 },
|
||||
{ title: '车站名称', key: 'name', align: 'center', width: 360 },
|
||||
// 「权限」列
|
||||
...objectEntries(PERMISSION_TYPE_NAMES).map<DataTableColumn<Station>>(([permissionType, title]) => ({
|
||||
title: () => {
|
||||
const permissionCount = currentList.value.filter((permission) => permission.type === permissionType).length;
|
||||
const checked = permissionCount === stations.value.length;
|
||||
const indeterminate = permissionCount > 0 && permissionCount < stations.value.length;
|
||||
return h(
|
||||
NFlex,
|
||||
{
|
||||
justify: 'center',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
default: () => [
|
||||
h(NCheckbox, {
|
||||
checked,
|
||||
indeterminate,
|
||||
onUpdateChecked: (checked) => {
|
||||
stations.value.forEach((station) => {
|
||||
onUpdatePermissionChecked(checked, station.code, permissionType);
|
||||
});
|
||||
},
|
||||
}),
|
||||
h('span', title),
|
||||
],
|
||||
},
|
||||
);
|
||||
},
|
||||
key: permissionType,
|
||||
align: 'center',
|
||||
render: (rowData) => {
|
||||
const { code: stationCode } = rowData;
|
||||
return h(NCheckbox, {
|
||||
checked: currentList.value.some((permission) => permission.stationCode === stationCode && permission.type === permissionType),
|
||||
onUpdateChecked: (checked) => onUpdatePermissionChecked(checked, stationCode, permissionType),
|
||||
});
|
||||
},
|
||||
})),
|
||||
];
|
||||
});
|
||||
|
||||
const { mutate: savePermissions, isPending: permissionsSaving } = useMutation({
|
||||
mutationFn: async () => {
|
||||
if (!employeeId.value) throw new Error('员工ID不能为空');
|
||||
|
||||
abortController.value.abort();
|
||||
abortController.value = new AbortController();
|
||||
|
||||
const signal = abortController.value.signal;
|
||||
|
||||
// 执行diff计算，生成需要保存的权限列表和需要删除的权限ID列表
|
||||
const saveList: NdmPermissionSaveVO[] = [];
|
||||
const removeList: string[] = [];
|
||||
// 遍历当前状态，如果权限不在原始权限列表中，说明是需要新增的权限
|
||||
currentList.value.forEach((permission) => {
|
||||
const { stationCode, type } = permission;
|
||||
if (!stationCode || !type) return;
|
||||
if (!originalList.value.some((permission) => permission.stationCode === stationCode && permission.type === type)) {
|
||||
saveList.push({
|
||||
employeeId: employeeId.value,
|
||||
stationCode,
|
||||
type,
|
||||
});
|
||||
}
|
||||
});
|
||||
// 遍历原始状态，如果权限不在当前状态中，说明是需要删除的权限
|
||||
originalList.value.forEach((permission) => {
|
||||
const { id, stationCode, type } = permission;
|
||||
if (!id) return;
|
||||
if (!currentList.value.some((permission) => permission.stationCode === stationCode && permission.type === type)) {
|
||||
removeList.push(id);
|
||||
}
|
||||
});
|
||||
|
||||
await modifyPermissionApi(
|
||||
{
|
||||
employeeId: employeeId.value,
|
||||
saveList,
|
||||
removeList,
|
||||
},
|
||||
{
|
||||
signal,
|
||||
},
|
||||
);
|
||||
},
|
||||
onSuccess: () => {
|
||||
window.$message.success('权限配置保存成功');
|
||||
getPermissions();
|
||||
},
|
||||
onError: (error) => {
|
||||
if (isCancel(error)) return;
|
||||
console.error(error);
|
||||
const errorFeedback = parseErrorFeedback(error);
|
||||
window.$message.error(errorFeedback);
|
||||
},
|
||||
});
|
||||
|
||||
const onAfterEnter = () => {
|
||||
getEmployeeAsync().then(() => getPermissions());
|
||||
};
|
||||
|
||||
const onAfterLeave = () => {
|
||||
employee.value = undefined;
|
||||
originalList.value = [];
|
||||
currentList.value = [];
|
||||
};
|
||||
|
||||
const onClose = () => {
|
||||
abortController.value.abort();
|
||||
show.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NModal
|
||||
v-model:show="show"
|
||||
preset="card"
|
||||
style="width: 100vw; height: 100vh"
|
||||
:content-style="{ height: '100%', overflow: 'hidden' }"
|
||||
:close-on-esc="false"
|
||||
:mask-closable="false"
|
||||
:auto-focus="false"
|
||||
@after-enter="onAfterEnter"
|
||||
@after-leave="onAfterLeave"
|
||||
@close="onClose"
|
||||
>
|
||||
<template #header>
|
||||
<span>{{ `配置权限 - ${employee?.realName ?? ''}` }}</span>
|
||||
</template>
|
||||
<template #default>
|
||||
<NDataTable flex-height style="height: 100%" :columns="tableColumns" :data="stations" :loading="permissionsLoading" :single-line="false" />
|
||||
</template>
|
||||
<template #footer>
|
||||
<NText depth="3" style="font-size: smaller">*未勾选任何权限的用户将被认为拥有所有权限</NText>
|
||||
</template>
|
||||
<template #action>
|
||||
<NFlex justify="end">
|
||||
<NButton size="small" @click="onClose">取消</NButton>
|
||||
<NButton type="primary" size="small" :loading="permissionsSaving" @click="() => savePermissions()">保存</NButton>
|
||||
</NFlex>
|
||||
</template>
|
||||
</NModal>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@@ -1,12 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { batchExportRecordCheckApi, getRecordCheckApi, pageDefParameterApi, type NdmNvrResultVO, type Station } from '@/apis';
|
||||
import { getRecordCheckApi, type NdmNvrResultVO, type Station } from '@/apis';
|
||||
import { exportRecordDiagCsv, isNvrCluster, transformRecordChecks } from '@/helpers';
|
||||
import { useDeviceStore } from '@/stores';
|
||||
import { downloadByData, parseErrorFeedback } from '@/utils';
|
||||
import { parseErrorFeedback } from '@/utils';
|
||||
import { useMutation } from '@tanstack/vue-query';
|
||||
import { isCancel } from 'axios';
|
||||
import dayjs from 'dayjs';
|
||||
import { NButton, NFlex, NGrid, NGridItem, NModal, NScrollbar, NSpin } from 'naive-ui';
|
||||
import { NButton, NGrid, NGridItem, NModal, NScrollbar, NSpin } from 'naive-ui';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { computed, ref, toRefs } from 'vue';
|
||||
|
||||
@@ -61,10 +60,7 @@ const { mutate: exportRecordDiags, isPending: exporting } = useMutation({
|
||||
return checks;
|
||||
},
|
||||
onSuccess: (checks, { stationCode }) => {
|
||||
if (!checks || checks.length === 0) {
|
||||
window.$message.info(`没有录像诊断数据`);
|
||||
return;
|
||||
}
|
||||
if (!checks || checks.length === 0) return;
|
||||
const recordDiags = transformRecordChecks(checks);
|
||||
exportRecordDiagCsv(recordDiags, nvrClusterRecord.value[stationCode]?.stationName ?? '');
|
||||
},
|
||||
@@ -76,48 +72,7 @@ const { mutate: exportRecordDiags, isPending: exporting } = useMutation({
|
||||
},
|
||||
});
|
||||
|
||||
const { mutate: batchExportRecordCheck, isPending: batchExporting } = useMutation({
|
||||
mutationFn: async () => {
|
||||
const { records = [] } = await pageDefParameterApi({
|
||||
model: {
|
||||
key: 'NVR_GAP_SECONDS',
|
||||
},
|
||||
extra: {},
|
||||
current: 1,
|
||||
size: 1,
|
||||
sort: 'id',
|
||||
order: 'descending',
|
||||
});
|
||||
const gapSeconds = parseInt(records.at(0)?.value ?? '5');
|
||||
|
||||
window.$message.info('导出耗时较长，请耐心等待...');
|
||||
|
||||
const data = await batchExportRecordCheckApi(
|
||||
{
|
||||
checkDuration: 90,
|
||||
gapSeconds,
|
||||
stationCode: stations.value.map((station) => station.code),
|
||||
},
|
||||
{
|
||||
signal: abortController.value.signal,
|
||||
},
|
||||
);
|
||||
return data;
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
const time = dayjs().format('YYYY-MM-DD_HH-mm-ss');
|
||||
downloadByData(data, `录像缺失记录_${time}.xlsx`);
|
||||
},
|
||||
onError: (error) => {
|
||||
if (isCancel(error)) return;
|
||||
console.error(error);
|
||||
const errorFeedback = parseErrorFeedback(error);
|
||||
window.$message.error(errorFeedback);
|
||||
},
|
||||
});
|
||||
|
||||
const onAfterLeave = () => {
|
||||
abortController.value.abort();
|
||||
emit('afterLeave');
|
||||
};
|
||||
</script>
|
||||
@@ -137,11 +92,6 @@ const onAfterLeave = () => {
|
||||
</NSpin>
|
||||
</NScrollbar>
|
||||
</template>
|
||||
<template #action>
|
||||
<NFlex justify="flex-end" align="center">
|
||||
<NButton secondary :loading="batchExporting" @click="() => batchExportRecordCheck()">导出全部</NButton>
|
||||
</NFlex>
|
||||
</template>
|
||||
</NModal>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import type { Station, StationAlarms, StationDevices } from '@/apis';
|
||||
import { usePermission } from '@/composables';
|
||||
import { DEVICE_TYPE_LITERALS, PERMISSION_TYPE_LITERALS } from '@/enums';
|
||||
import { DEVICE_TYPE_LITERALS } from '@/enums';
|
||||
import { EllipsisOutlined, MoreOutlined } from '@vicons/antd';
|
||||
import axios from 'axios';
|
||||
import dayjs from 'dayjs';
|
||||
import { isFunction } from 'es-toolkit';
|
||||
import { MoreHorizontalIcon, MoreVerticalIcon } from 'lucide-vue-next';
|
||||
import { NButton, NCard, NCheckbox, NDropdown, NFlex, NIcon, NTag, NTooltip, useThemeVars, type DropdownOption } from 'naive-ui';
|
||||
import { computed, toRefs } from 'vue';
|
||||
|
||||
@@ -25,8 +24,6 @@ const emit = defineEmits<{
|
||||
clickConfig: [station: Station];
|
||||
}>();
|
||||
|
||||
const { hasPermission } = usePermission();
|
||||
|
||||
const { station, devices, alarms, selectable } = toRefs(props);
|
||||
|
||||
const onlineDeviceCount = computed(() => {
|
||||
@@ -74,7 +71,7 @@ const openDeviceConfigModal = () => {
|
||||
emit('clickConfig', station.value);
|
||||
};
|
||||
|
||||
const dropdownOptions = computed<DropdownOption[]>(() => [
|
||||
const dropdownOptions: DropdownOption[] = [
|
||||
{
|
||||
label: '视频平台',
|
||||
key: 'video-platform',
|
||||
@@ -83,10 +80,9 @@ const dropdownOptions = computed<DropdownOption[]>(() => [
|
||||
{
|
||||
label: '设备配置',
|
||||
key: 'device-config',
|
||||
show: hasPermission(station.value.code, PERMISSION_TYPE_LITERALS.OPERATION),
|
||||
onSelect: openDeviceConfigModal,
|
||||
},
|
||||
]);
|
||||
];
|
||||
|
||||
const onSelectDropdownOption = (key: string, option: DropdownOption) => {
|
||||
const onSelect = option['onSelect'];
|
||||
@@ -120,7 +116,7 @@ const onSelectDropdownOption = (key: string, option: DropdownOption) => {
|
||||
<NDropdown trigger="click" :options="dropdownOptions" @select="onSelectDropdownOption">
|
||||
<NButton quaternary size="tiny" :focusable="false">
|
||||
<template #icon>
|
||||
<NIcon :component="MoreVerticalIcon" />
|
||||
<NIcon :component="MoreOutlined" />
|
||||
</template>
|
||||
</NButton>
|
||||
</NDropdown>
|
||||
@@ -133,7 +129,7 @@ const onSelectDropdownOption = (key: string, option: DropdownOption) => {
|
||||
<span>{{ deviceCount }} 台设备</span>
|
||||
<NButton quaternary size="tiny" :focusable="false" @click="() => emit('clickDetail', 'device', station)">
|
||||
<template #icon>
|
||||
<NIcon :component="MoreHorizontalIcon" />
|
||||
<NIcon :component="EllipsisOutlined" />
|
||||
</template>
|
||||
</NButton>
|
||||
</NFlex>
|
||||
@@ -147,7 +143,7 @@ const onSelectDropdownOption = (key: string, option: DropdownOption) => {
|
||||
<!-- 占位按钮，对齐布局 -->
|
||||
<NButton quaternary size="tiny" :focusable="false" style="visibility: hidden">
|
||||
<template #icon>
|
||||
<NIcon :component="MoreHorizontalIcon" />
|
||||
<NIcon :component="EllipsisOutlined" />
|
||||
</template>
|
||||
</NButton>
|
||||
</NFlex>
|
||||
@@ -157,7 +153,7 @@ const onSelectDropdownOption = (key: string, option: DropdownOption) => {
|
||||
<span :style="{ color: alarmCount > 0 ? themeVars.warningColor : '' }">今日 {{ alarmCount }} 条告警</span>
|
||||
<NButton quaternary size="tiny" :focusable="false" @click="() => emit('clickDetail', 'alarm', station)">
|
||||
<template #icon>
|
||||
<NIcon :component="MoreHorizontalIcon" />
|
||||
<NIcon :component="EllipsisOutlined" />
|
||||
</template>
|
||||
</NButton>
|
||||
</NFlex>
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import type { Station, SyncCameraResult } from '@/apis';
|
||||
import { usePermissionStore } from '@/stores';
|
||||
import { watchDebounced } from '@vueuse/core';
|
||||
import { EditIcon, PlusCircleIcon, Trash2Icon } from 'lucide-vue-next';
|
||||
import { NFlex, NIcon, NList, NListItem, NModal, NScrollbar, NStatistic, NText, NThing } from 'naive-ui';
|
||||
import { computed, ref, toRefs } from 'vue';
|
||||
import { useStationStore } from '@/stores';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import type { Station, SyncCameraResult } from '@/apis';
|
||||
import { DeleteFilled, EditFilled, PlusCircleFilled } from '@vicons/antd';
|
||||
|
||||
const props = defineProps<{
|
||||
syncCameraResult: Record<Station['code'], SyncCameraResult>;
|
||||
@@ -14,8 +15,8 @@ const emit = defineEmits<{
|
||||
afterLeave: [];
|
||||
}>();
|
||||
|
||||
const permissionStore = usePermissionStore();
|
||||
const stations = computed(() => permissionStore.stations.VIEW ?? []);
|
||||
const stationStore = useStationStore();
|
||||
const { stations } = storeToRefs(stationStore);
|
||||
|
||||
const { syncCameraResult } = toRefs(props);
|
||||
|
||||
@@ -60,19 +61,19 @@ const syncList = computed(() => {
|
||||
<NFlex justify="space-around" :size="24" style="margin-top: 8px">
|
||||
<NStatistic label="新增">
|
||||
<template #prefix>
|
||||
<NIcon :component="PlusCircleIcon" />
|
||||
<NIcon :component="PlusCircleFilled" />
|
||||
</template>
|
||||
{{ insertList.length }}
|
||||
</NStatistic>
|
||||
<NStatistic label="更新">
|
||||
<template #prefix>
|
||||
<NIcon :component="EditIcon" />
|
||||
<NIcon :component="EditFilled" />
|
||||
</template>
|
||||
{{ updateList.length }}
|
||||
</NStatistic>
|
||||
<NStatistic label="删除">
|
||||
<template #prefix>
|
||||
<NIcon :component="Trash2Icon" />
|
||||
<NIcon :component="DeleteFilled" />
|
||||
</template>
|
||||
{{ deleteList.length }}
|
||||
</NStatistic>
|
||||
|
||||
@@ -1,14 +1,11 @@
|
||||
import { usePermission } from '../permission';
|
||||
import { deleteCameraIgnoreApi, pageCameraIgnoreApi, saveCameraIgnoreApi, updateDeviceAlarmLogApi, type NdmDeviceAlarmLogResultVO } from '@/apis';
|
||||
import { DEVICE_TYPE_LITERALS, PERMISSION_TYPE_LITERALS, tryGetDeviceType } from '@/enums';
|
||||
import { DEVICE_TYPE_LITERALS, tryGetDeviceType } from '@/enums';
|
||||
import { parseErrorFeedback } from '@/utils';
|
||||
import { useMutation } from '@tanstack/vue-query';
|
||||
import { NButton, NFlex, NPopconfirm, type DataTableColumn, type DataTableRowData } from 'naive-ui';
|
||||
import { h, type Ref } from 'vue';
|
||||
|
||||
export const useAlarmActionColumn = (tableData: Ref<DataTableRowData[]>) => {
|
||||
const { hasPermission } = usePermission();
|
||||
|
||||
const { mutate: confirmAlarm } = useMutation({
|
||||
mutationFn: async (params: { id: string | null }) => {
|
||||
const { id } = params;
|
||||
@@ -118,30 +115,28 @@ export const useAlarmActionColumn = (tableData: Ref<DataTableRowData[]>) => {
|
||||
default: () => '确认告警？',
|
||||
},
|
||||
),
|
||||
tryGetDeviceType(rowData.deviceType) === DEVICE_TYPE_LITERALS.ndmCamera &&
|
||||
rowData.stationCode &&
|
||||
hasPermission(rowData.stationCode, PERMISSION_TYPE_LITERALS.OPERATION) && [
|
||||
h(
|
||||
NPopconfirm,
|
||||
{
|
||||
onPositiveClick: () => ignoreCamera({ id }),
|
||||
},
|
||||
{
|
||||
trigger: () => h(NButton, { tertiary: true, type: 'info', size: 'tiny' }, { default: () => '忽略' }),
|
||||
default: () => '忽略设备？',
|
||||
},
|
||||
),
|
||||
// h(
|
||||
// NPopconfirm,
|
||||
// {
|
||||
// onPositiveClick: () => noticeCamera({ id }),
|
||||
// },
|
||||
// {
|
||||
// trigger: () => h(NButton, { text: true, type: 'info', size: 'small' }, { icon: () => h(EyeOutlined) }),
|
||||
// default: () => '取消忽略设备？',
|
||||
// },
|
||||
// ),
|
||||
],
|
||||
tryGetDeviceType(rowData.deviceType) === DEVICE_TYPE_LITERALS.ndmCamera && [
|
||||
h(
|
||||
NPopconfirm,
|
||||
{
|
||||
onPositiveClick: () => ignoreCamera({ id }),
|
||||
},
|
||||
{
|
||||
trigger: () => h(NButton, { tertiary: true, type: 'info', size: 'tiny' }, { default: () => '忽略' }),
|
||||
default: () => '忽略设备？',
|
||||
},
|
||||
),
|
||||
// h(
|
||||
// NPopconfirm,
|
||||
// {
|
||||
// onPositiveClick: () => noticeCamera({ id }),
|
||||
// },
|
||||
// {
|
||||
// trigger: () => h(NButton, { text: true, type: 'info', size: 'small' }, { icon: () => h(EyeOutlined) }),
|
||||
// default: () => '取消忽略设备？',
|
||||
// },
|
||||
// ),
|
||||
],
|
||||
],
|
||||
},
|
||||
);
|
||||
|
||||
@@ -1,33 +1,39 @@
|
||||
import type { LineDevices, NdmDeviceResultVO, Station } from '@/apis';
|
||||
import { tryGetDeviceType, type DeviceType } from '@/enums';
|
||||
import { ref } from 'vue';
|
||||
import { useDeviceStore } from '@/stores';
|
||||
import { watchDebounced } from '@vueuse/core';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { onMounted, ref, toValue, watch, type MaybeRefOrGetter } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
export const useDeviceSelection = () => {
|
||||
export const useDeviceSelection = (options?: { syncRoute?: MaybeRefOrGetter<boolean> }) => {
|
||||
const { syncRoute } = options ?? {};
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const deviceStore = useDeviceStore();
|
||||
const { lineDevices } = storeToRefs(deviceStore);
|
||||
|
||||
const selectedStationCode = ref<Station['code']>();
|
||||
const selectedDeviceType = ref<DeviceType>();
|
||||
const selectedDevice = ref<NdmDeviceResultVO>();
|
||||
|
||||
// 从路由参数同步选中的车站、设备类型以及设备
|
||||
const syncFromRoute = (lineDevices: LineDevices) => {
|
||||
// console.log('sync from route');
|
||||
const { stationCode: routeStationCode, deviceType: routeDeviceType, deviceDbId: routeDeviceDbId } = route.query;
|
||||
if (routeStationCode) {
|
||||
selectedStationCode.value = routeStationCode as Station['code'];
|
||||
const initFromRoute = (lineDevices: LineDevices) => {
|
||||
const { stationCode, deviceType, deviceDbId } = route.query;
|
||||
if (stationCode) {
|
||||
selectedStationCode.value = stationCode as Station['code'];
|
||||
}
|
||||
if (routeDeviceType) {
|
||||
selectedDeviceType.value = routeDeviceType as DeviceType;
|
||||
if (deviceType) {
|
||||
selectedDeviceType.value = deviceType as DeviceType;
|
||||
}
|
||||
if (routeDeviceDbId && selectedStationCode.value && selectedDeviceType.value) {
|
||||
const selectedDeviceDbId = routeDeviceDbId as string;
|
||||
if (deviceDbId && selectedStationCode.value && selectedDeviceType.value) {
|
||||
const selectedDeviceDbId = deviceDbId as string;
|
||||
const stationDevices = lineDevices[selectedStationCode.value];
|
||||
if (stationDevices) {
|
||||
const classifiedDevices = stationDevices[selectedDeviceType.value];
|
||||
if (classifiedDevices) {
|
||||
const device = classifiedDevices.find((device) => device.id === selectedDeviceDbId);
|
||||
const devices = stationDevices[selectedDeviceType.value];
|
||||
if (devices) {
|
||||
const device = devices.find((device) => device.id === selectedDeviceDbId);
|
||||
if (device) {
|
||||
selectedDevice.value = device;
|
||||
}
|
||||
@@ -45,9 +51,7 @@ export const useDeviceSelection = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 将选中的车站、设备类型以及设备ID同步到路由参数
|
||||
const syncToRoute = () => {
|
||||
// console.log('sync to route');
|
||||
const query = { ...route.query };
|
||||
// 当选中的设备发生变化时，删除fromPage参数
|
||||
if (selectedDevice.value?.id && route.query.deviceDbId !== selectedDevice.value.id) {
|
||||
@@ -65,13 +69,39 @@ export const useDeviceSelection = () => {
|
||||
router.replace({ query });
|
||||
};
|
||||
|
||||
watch(selectedDevice, () => {
|
||||
if (toValue(syncRoute)) {
|
||||
syncToRoute();
|
||||
}
|
||||
});
|
||||
|
||||
// lineDevices是shallowRef，因此需要深度侦听才能获取内部变化，
|
||||
// 而单纯的深度侦听又可能会引发性能问题，因此尝试使用防抖侦听
|
||||
watchDebounced(
|
||||
lineDevices,
|
||||
(newLineDevices) => {
|
||||
if (toValue(syncRoute)) {
|
||||
initFromRoute(newLineDevices);
|
||||
}
|
||||
},
|
||||
{
|
||||
debounce: 500,
|
||||
deep: true,
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
if (toValue(syncRoute)) {
|
||||
initFromRoute(lineDevices.value);
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
selectedStationCode,
|
||||
selectedDeviceType,
|
||||
selectedDevice,
|
||||
|
||||
syncFromRoute,
|
||||
syncToRoute,
|
||||
initFromRoute,
|
||||
selectDevice,
|
||||
};
|
||||
};
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
import type { MaybeRefOrGetter } from 'vue';
|
||||
import { useDeviceManagement } from './use-device-management';
|
||||
import { useDeviceSelection } from './use-device-selection';
|
||||
|
||||
export const useDeviceTree = () => {
|
||||
const deviceSelection = useDeviceSelection();
|
||||
export const useDeviceTree = (options?: { syncRoute?: MaybeRefOrGetter<boolean> }) => {
|
||||
const { syncRoute } = options ?? {};
|
||||
|
||||
const deviceSelection = useDeviceSelection({ syncRoute });
|
||||
const deviceManagement = useDeviceManagement();
|
||||
|
||||
return {
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
export * from './alarm';
|
||||
export * from './device';
|
||||
export * from './permission';
|
||||
export * from './query';
|
||||
export * from './station';
|
||||
export * from './stomp';
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export * from './use-permission';
|
||||
@@ -1,14 +0,0 @@
|
||||
import type { PermissionType } from '@/enums';
|
||||
import { usePermissionStore } from '@/stores';
|
||||
|
||||
export const usePermission = () => {
|
||||
const permissionStore = usePermissionStore();
|
||||
|
||||
const hasPermission = (stationCode: string, permissionType: PermissionType) => {
|
||||
return !!permissionStore.permissions[stationCode]?.includes(permissionType);
|
||||
};
|
||||
|
||||
return {
|
||||
hasPermission,
|
||||
};
|
||||
};
|
||||
@@ -1,6 +1,5 @@
|
||||
export * from './use-line-alarms-query';
|
||||
export * from './use-line-devices-query';
|
||||
export * from './use-line-stations-query';
|
||||
export * from './use-user-permission-query';
|
||||
export * from './use-verify-user-query';
|
||||
export * from './use-version-check-query';
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import { initStationAlarms, pageDeviceAlarmLogApi, type Station } from '@/apis';
|
||||
import { LINE_ALARMS_QUERY_KEY, STATION_ALARMS_MUTATION_KEY } from '@/constants';
|
||||
import { tryGetDeviceType } from '@/enums';
|
||||
import { useAlarmStore, usePermissionStore } from '@/stores';
|
||||
import { useAlarmStore, useStationStore } from '@/stores';
|
||||
import { parseErrorFeedback } from '@/utils';
|
||||
import { CancelledError, useMutation, useQuery } from '@tanstack/vue-query';
|
||||
import { isCancel } from 'axios';
|
||||
import dayjs from 'dayjs';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { computed } from 'vue';
|
||||
|
||||
export const useStationAlarmsMutation = () => {
|
||||
@@ -55,8 +56,8 @@ export const useStationAlarmsMutation = () => {
|
||||
alarmStore.setStationAlarms(station.code, stationAlarms);
|
||||
},
|
||||
onError: (error) => {
|
||||
if (isCancel(error) || error instanceof CancelledError) return;
|
||||
console.error(error);
|
||||
if (isCancel(error) || error instanceof CancelledError) return;
|
||||
const errorFeedback = parseErrorFeedback(error);
|
||||
window.$message.error(errorFeedback);
|
||||
},
|
||||
@@ -68,22 +69,19 @@ export const useStationAlarmsMutation = () => {
|
||||
* @see [use-line-stations-query.ts](./use-line-stations-query.ts)
|
||||
*/
|
||||
export const useLineAlarmsQuery = () => {
|
||||
const permissionStore = usePermissionStore();
|
||||
const stations = computed(() => permissionStore.stations.VIEW ?? []);
|
||||
|
||||
const stationStore = useStationStore();
|
||||
const { stations } = storeToRefs(stationStore);
|
||||
const { mutateAsync: getStationAlarms } = useStationAlarmsMutation();
|
||||
|
||||
return useQuery({
|
||||
queryKey: computed(() => [LINE_ALARMS_QUERY_KEY]),
|
||||
enabled: false,
|
||||
queryFn: async ({ signal }) => {
|
||||
const startTime = performance.now();
|
||||
console.time(LINE_ALARMS_QUERY_KEY);
|
||||
for (const station of stations.value) {
|
||||
await getStationAlarms({ station, signal }).catch(() => {});
|
||||
}
|
||||
const endTime = performance.now();
|
||||
console.log(`${LINE_ALARMS_QUERY_KEY}: ${endTime - startTime} ms`);
|
||||
|
||||
console.timeEnd(LINE_ALARMS_QUERY_KEY);
|
||||
return null;
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { getAllDevicesApi, initStationDevices, type Station } from '@/apis';
|
||||
import { LINE_DEVICES_QUERY_KEY, STATION_DEVICES_MUTATION_KEY } from '@/constants';
|
||||
import { useDeviceStore, usePermissionStore } from '@/stores';
|
||||
import { useDeviceStore, useStationStore } from '@/stores';
|
||||
import { parseErrorFeedback } from '@/utils';
|
||||
import { CancelledError, useMutation, useQuery } from '@tanstack/vue-query';
|
||||
import { isCancel } from 'axios';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { computed } from 'vue';
|
||||
|
||||
export const useStationDevicesMutation = () => {
|
||||
@@ -22,8 +23,8 @@ export const useStationDevicesMutation = () => {
|
||||
deviceStore.setStationDevices(station.code, devices);
|
||||
},
|
||||
onError: (error) => {
|
||||
if (isCancel(error) || error instanceof CancelledError) return;
|
||||
console.error(error);
|
||||
if (isCancel(error) || error instanceof CancelledError) return;
|
||||
const errorFeedback = parseErrorFeedback(error);
|
||||
window.$message.error(errorFeedback);
|
||||
},
|
||||
@@ -35,22 +36,19 @@ export const useStationDevicesMutation = () => {
|
||||
* @see [use-line-stations-query.ts](./use-line-stations-query.ts)
|
||||
*/
|
||||
export const useLineDevicesQuery = () => {
|
||||
const permissionStore = usePermissionStore();
|
||||
const stations = computed(() => permissionStore.stations.VIEW ?? []);
|
||||
|
||||
const stationStore = useStationStore();
|
||||
const { stations } = storeToRefs(stationStore);
|
||||
const { mutateAsync: getStationDevices } = useStationDevicesMutation();
|
||||
|
||||
return useQuery({
|
||||
queryKey: computed(() => [LINE_DEVICES_QUERY_KEY]),
|
||||
enabled: false,
|
||||
queryFn: async ({ signal }) => {
|
||||
const startTime = performance.now();
|
||||
console.time(LINE_DEVICES_QUERY_KEY);
|
||||
for (const station of stations.value) {
|
||||
await getStationDevices({ station, signal }).catch(() => {});
|
||||
}
|
||||
const endTime = performance.now();
|
||||
console.log(`${LINE_DEVICES_QUERY_KEY}: ${endTime - startTime} ms`);
|
||||
|
||||
console.timeEnd(LINE_DEVICES_QUERY_KEY);
|
||||
return null;
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
import { batchVerifyApi, type Station } from '@/apis';
|
||||
import { LINE_STATIONS_MUTATION_KEY, LINE_STATIONS_QUERY_KEY } from '@/constants';
|
||||
import { useSettingStore, useStationStore } from '@/stores';
|
||||
import { usePollingStore, useStationStore } from '@/stores';
|
||||
import { getAppEnvConfig, parseErrorFeedback } from '@/utils';
|
||||
import { CancelledError, useMutation, useQuery } from '@tanstack/vue-query';
|
||||
import axios, { isCancel } from 'axios';
|
||||
import dayjs from 'dayjs';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { computed } from 'vue';
|
||||
import { useLineDevicesQuery } from './use-line-devices-query';
|
||||
import { useLineAlarmsQuery } from './use-line-alarms-query';
|
||||
|
||||
export const useLineStationsMutation = () => {
|
||||
const stationStore = useStationStore();
|
||||
@@ -15,13 +17,12 @@ export const useLineStationsMutation = () => {
|
||||
mutationKey: [LINE_STATIONS_MUTATION_KEY],
|
||||
mutationFn: async (params: { signal?: AbortSignal }) => {
|
||||
const { signal } = params;
|
||||
const { data: ndmStationList } = await axios.get<Omit<Station, 'online' | 'ip'>[]>(`/minio/ndm/ndm-stations.json?_t=${dayjs().unix()}`, { signal });
|
||||
const { data: ndmStationList } = await axios.get<{ code: string; name: string }[]>(`/minio/ndm/ndm-stations.json?_t=${dayjs().unix()}`, { signal });
|
||||
const stations = ndmStationList.map<Station>((station) => ({
|
||||
code: station.code ?? '',
|
||||
name: station.name ?? '',
|
||||
online: false,
|
||||
ip: '',
|
||||
occ: station.occ,
|
||||
}));
|
||||
const verifyList = await batchVerifyApi({ signal });
|
||||
return stations.map((station) => ({
|
||||
@@ -34,8 +35,8 @@ export const useLineStationsMutation = () => {
|
||||
stationStore.setStations(stations);
|
||||
},
|
||||
onError: (error) => {
|
||||
if (isCancel(error) || error instanceof CancelledError) return;
|
||||
console.error(error);
|
||||
if (isCancel(error) || error instanceof CancelledError) return;
|
||||
const errorFeedback = parseErrorFeedback(error);
|
||||
window.$message.error(errorFeedback);
|
||||
},
|
||||
@@ -43,21 +44,28 @@ export const useLineStationsMutation = () => {
|
||||
};
|
||||
|
||||
export const useLineStationsQuery = () => {
|
||||
const settingStore = useSettingStore();
|
||||
const { pollingStations } = storeToRefs(settingStore);
|
||||
const pollingStore = usePollingStore();
|
||||
const { pollingEnabled } = storeToRefs(pollingStore);
|
||||
const { requestInterval } = getAppEnvConfig();
|
||||
const { mutateAsync: getLineStations } = useLineStationsMutation();
|
||||
const { refetch: refetchLineDevicesQuery } = useLineDevicesQuery();
|
||||
const { refetch: refetchLineAlarmsQuery } = useLineAlarmsQuery();
|
||||
|
||||
return useQuery({
|
||||
queryKey: computed(() => [LINE_STATIONS_QUERY_KEY]),
|
||||
enabled: computed(() => pollingStations.value),
|
||||
enabled: computed(() => pollingEnabled.value),
|
||||
refetchInterval: requestInterval * 1000,
|
||||
staleTime: (requestInterval * 1000) / 2,
|
||||
queryFn: async ({ signal }) => {
|
||||
const startTime = performance.now();
|
||||
console.time(LINE_STATIONS_QUERY_KEY);
|
||||
await getLineStations({ signal }).catch(() => {});
|
||||
const endTime = performance.now();
|
||||
console.log(`${LINE_STATIONS_QUERY_KEY}: ${endTime - startTime} ms`);
|
||||
console.timeEnd(LINE_STATIONS_QUERY_KEY);
|
||||
|
||||
if (!pollingEnabled.value) return null;
|
||||
await refetchLineDevicesQuery();
|
||||
|
||||
if (!pollingEnabled.value) return null;
|
||||
await refetchLineAlarmsQuery();
|
||||
|
||||
return null;
|
||||
},
|
||||
|
||||
@@ -1,67 +0,0 @@
|
||||
import { useLineDevicesQuery } from './use-line-devices-query';
|
||||
import { useLineAlarmsQuery } from './use-line-alarms-query';
|
||||
import { pagePermissionApi } from '@/apis';
|
||||
import { USER_PERMISSION_QUERY_KEY } from '@/constants';
|
||||
import { PERMISSION_TYPE_LITERALS } from '@/enums';
|
||||
import { usePermissionStore, useSettingStore, useStationStore, useUserStore } from '@/stores';
|
||||
import { useQuery } from '@tanstack/vue-query';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { computed, watch } from 'vue';
|
||||
import { useLineStationsQuery } from './use-line-stations-query';
|
||||
|
||||
export const useUserPermissionQuery = () => {
|
||||
const settingStore = useSettingStore();
|
||||
const { pollingStations, activeRequests } = storeToRefs(settingStore);
|
||||
|
||||
const userStore = useUserStore();
|
||||
const { userInfo } = storeToRefs(userStore);
|
||||
|
||||
const stationStore = useStationStore();
|
||||
const { stations } = storeToRefs(stationStore);
|
||||
|
||||
const permissionStore = usePermissionStore();
|
||||
const { permissions } = storeToRefs(permissionStore);
|
||||
|
||||
const { dataUpdatedAt: stationsUpdatedTime } = useLineStationsQuery();
|
||||
const { refetch: refetchLineDevicesQuery } = useLineDevicesQuery();
|
||||
const { refetch: refetchLineAlarmsQuery } = useLineAlarmsQuery();
|
||||
|
||||
watch([permissions, stationsUpdatedTime], async ([newPermissions, newUpdatedTime], [oldPermissions, oldUpdatedTime]) => {
|
||||
const newPermissionsJson = JSON.stringify(newPermissions);
|
||||
const oldPermissionsJson = JSON.stringify(oldPermissions);
|
||||
if (newPermissionsJson === oldPermissionsJson && newUpdatedTime === oldUpdatedTime) return;
|
||||
// 设备查询和告警查询依赖pollingEnabdled
|
||||
// 当关闭轮询时，只会取消当前正在执行的查询，
|
||||
// 所以如果在关闭轮询时refetch还未执行，那么这一次取消就是无效的，refetch依然会执行，
|
||||
// 所以在每个refetch被调用前都需要检查pollingEnabled，否则就可能会取消失败
|
||||
if (!pollingStations.value) return;
|
||||
await refetchLineDevicesQuery();
|
||||
if (!pollingStations.value) return;
|
||||
await refetchLineAlarmsQuery();
|
||||
});
|
||||
|
||||
return useQuery({
|
||||
queryKey: computed(() => [USER_PERMISSION_QUERY_KEY]),
|
||||
// 启用【车站轮询】或【主动请求】时，都认为查询被启用
|
||||
enabled: computed(() => (pollingStations.value || activeRequests.value) && userInfo.value?.['employeeId'] && stations.value.length > 0),
|
||||
// 当启用【车站轮询】时，刷新间隔为10秒，缓存时间为5秒
|
||||
refetchInterval: computed(() => (pollingStations.value ? 10 * 1000 : undefined)),
|
||||
staleTime: computed(() => (pollingStations.value ? 5 * 1000 : undefined)),
|
||||
queryFn: async ({ signal }) => {
|
||||
const { records } = await pagePermissionApi(
|
||||
{
|
||||
model: {
|
||||
employeeId: userInfo.value['employeeId'],
|
||||
},
|
||||
current: 1,
|
||||
size: Object.keys(PERMISSION_TYPE_LITERALS).length * stations.value.length,
|
||||
},
|
||||
{
|
||||
signal,
|
||||
},
|
||||
);
|
||||
permissionStore.setPermRecords(records);
|
||||
return null;
|
||||
},
|
||||
});
|
||||
};
|
||||
@@ -8,17 +8,17 @@ import { computed, watch } from 'vue';
|
||||
export const useVerifyUserQuery = () => {
|
||||
const queryClient = useQueryClient();
|
||||
const settingStore = useSettingStore();
|
||||
const { activeRequests } = storeToRefs(settingStore);
|
||||
const { offlineDev } = storeToRefs(settingStore);
|
||||
|
||||
watch(activeRequests, (active) => {
|
||||
if (!active) {
|
||||
watch(offlineDev, (offline) => {
|
||||
if (offline) {
|
||||
queryClient.cancelQueries({ queryKey: [VERIFY_USER_QUERY_KEY] });
|
||||
}
|
||||
});
|
||||
|
||||
return useQuery({
|
||||
queryKey: [VERIFY_USER_QUERY_KEY],
|
||||
enabled: computed(() => activeRequests.value),
|
||||
enabled: computed(() => !offlineDev.value),
|
||||
refetchInterval: 10 * 1000,
|
||||
queryFn: async ({ signal }) => {
|
||||
await verifyApi({ signal });
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export * from './use-batch-actions';
|
||||
@@ -1,139 +0,0 @@
|
||||
import { usePermission } from '../permission';
|
||||
import { type Station } from '@/apis';
|
||||
import { PERMISSION_TYPE_LITERALS, type PermissionType } from '@/enums';
|
||||
import { objectEntries } from '@vueuse/core';
|
||||
import type { CheckboxProps } from 'naive-ui';
|
||||
import { computed, ref, watch, type Ref } from 'vue';
|
||||
|
||||
type BatchActionKey = 'export-icmp' | 'export-record' | 'sync-camera' | 'sync-nvr';
|
||||
|
||||
type BatchAction = {
|
||||
label: string;
|
||||
key: BatchActionKey;
|
||||
permission: PermissionType;
|
||||
active: boolean;
|
||||
};
|
||||
|
||||
export const useBatchActions = (stations: Ref<Station[]>, abortController?: Ref<AbortController | undefined>) => {
|
||||
const { hasPermission } = usePermission();
|
||||
|
||||
const batchActions = ref<BatchAction[]>([
|
||||
{
|
||||
label: '导出设备状态',
|
||||
key: 'export-icmp',
|
||||
permission: PERMISSION_TYPE_LITERALS.VIEW,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
label: '导出录像诊断',
|
||||
key: 'export-record',
|
||||
permission: PERMISSION_TYPE_LITERALS.VIEW,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
label: '同步摄像机',
|
||||
key: 'sync-camera',
|
||||
permission: PERMISSION_TYPE_LITERALS.OPERATION,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
label: '同步录像机通道',
|
||||
key: 'sync-nvr',
|
||||
permission: PERMISSION_TYPE_LITERALS.OPERATION,
|
||||
active: false,
|
||||
},
|
||||
]);
|
||||
|
||||
const selectedAction = computed(() => {
|
||||
return batchActions.value.find((action) => action.active);
|
||||
});
|
||||
|
||||
const selectableStations = computed(() => {
|
||||
if (!selectedAction.value) return [];
|
||||
const result: Station[] = [];
|
||||
if (selectedAction.value.permission === PERMISSION_TYPE_LITERALS.VIEW) {
|
||||
result.push(...stations.value.filter((station) => hasPermission(station.code, PERMISSION_TYPE_LITERALS.VIEW)));
|
||||
}
|
||||
if (selectedAction.value.permission === PERMISSION_TYPE_LITERALS.OPERATION) {
|
||||
result.push(...stations.value.filter((station) => hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)));
|
||||
}
|
||||
return result;
|
||||
});
|
||||
|
||||
const stationSelection = ref<Record<Station['code'], boolean>>({});
|
||||
|
||||
const selectionProps = computed<CheckboxProps>(() => {
|
||||
const selectableStationsLength = selectableStations.value.length;
|
||||
const selectedStationsLength = objectEntries(stationSelection.value).filter(([, selected]) => selected).length;
|
||||
|
||||
const disabled = selectableStationsLength === 0;
|
||||
const checked = selectableStationsLength > 0 && selectedStationsLength === selectableStationsLength;
|
||||
const indeterminate = selectableStationsLength > 0 && selectedStationsLength > 0 && selectedStationsLength < selectableStationsLength;
|
||||
|
||||
return {
|
||||
disabled,
|
||||
checked,
|
||||
indeterminate,
|
||||
};
|
||||
});
|
||||
|
||||
const toggleSelectAction = (action: BatchAction) => {
|
||||
batchActions.value.forEach((batchAction) => {
|
||||
if (batchAction.key === action.key) {
|
||||
if (batchAction.active) stationSelection.value = {};
|
||||
batchAction.active = !batchAction.active;
|
||||
} else {
|
||||
batchAction.active = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const toggleSelectAllStations = (checked: boolean) => {
|
||||
if (!checked) {
|
||||
stationSelection.value = {};
|
||||
return;
|
||||
}
|
||||
selectableStations.value.forEach((station) => {
|
||||
stationSelection.value[station.code] = checked;
|
||||
});
|
||||
};
|
||||
|
||||
watch(selectedAction, () => {
|
||||
toggleSelectAllStations(false);
|
||||
});
|
||||
|
||||
const confirmAction = (callbacks: Record<BatchActionKey, () => void>) => {
|
||||
const { key } = selectedAction.value ?? {};
|
||||
if (!key) return;
|
||||
const noStationSeleted = !Object.values(stationSelection.value).some((selected) => selected);
|
||||
if (noStationSeleted) {
|
||||
window.$message.warning('请选择车站');
|
||||
return;
|
||||
}
|
||||
callbacks[key]();
|
||||
};
|
||||
|
||||
const cancelAction = () => {
|
||||
abortController?.value?.abort();
|
||||
stationSelection.value = {};
|
||||
batchActions.value.forEach((batchAction) => {
|
||||
batchAction.active = false;
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
batchActions,
|
||||
selectedAction,
|
||||
|
||||
selectableStations,
|
||||
stationSelection,
|
||||
|
||||
selectionProps,
|
||||
|
||||
toggleSelectAction,
|
||||
toggleSelectAllStations,
|
||||
|
||||
confirmAction,
|
||||
cancelAction,
|
||||
};
|
||||
};
|
||||
@@ -1,12 +1,12 @@
|
||||
import type { NdmDeviceAlarmLogResultVO, Station, SyncCameraResult } from '@/apis';
|
||||
import { ALARM_TOPIC, PERMISSION_TOPIC, SYNC_CAMERA_STATUS_TOPIC } from '@/constants';
|
||||
import { useSettingStore, useStationStore, useUnreadStore, useUserStore } from '@/stores';
|
||||
import { ALARM_TOPIC, SYNC_CAMERA_STATUS_TOPIC } from '@/constants';
|
||||
import { useAlarmStore, useSettingStore, useStationStore } from '@/stores';
|
||||
import { Client } from '@stomp/stompjs';
|
||||
import { watchDebounced } from '@vueuse/core';
|
||||
import destr from 'destr';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
||||
import { useStationAlarmsMutation, useUserPermissionQuery } from '../query';
|
||||
import { useStationAlarmsMutation } from '../query';
|
||||
|
||||
const getBrokerUrl = () => {
|
||||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
@@ -19,17 +19,11 @@ const getBrokerUrl = () => {
|
||||
export const useStompClient = () => {
|
||||
const stationStore = useStationStore();
|
||||
const { stations } = storeToRefs(stationStore);
|
||||
|
||||
const unreadStore = useUnreadStore();
|
||||
const { unreadLineAlarms } = storeToRefs(unreadStore);
|
||||
|
||||
const alarmStore = useAlarmStore();
|
||||
const { unreadLineAlarms } = storeToRefs(alarmStore);
|
||||
const settingStore = useSettingStore();
|
||||
const { subscribeMessages } = storeToRefs(settingStore);
|
||||
const { offlineDev } = storeToRefs(settingStore);
|
||||
|
||||
const userStore = useUserStore();
|
||||
const { userInfo } = storeToRefs(userStore);
|
||||
|
||||
const { refetch: refetchUserPermissionQuery } = useUserPermissionQuery();
|
||||
const { mutate: refreshStationAlarms } = useStationAlarmsMutation();
|
||||
|
||||
const stompClient = ref<Client | null>(null);
|
||||
@@ -46,16 +40,10 @@ export const useStompClient = () => {
|
||||
console.log('Stomp连接成功');
|
||||
stompClient.value?.subscribe(ALARM_TOPIC, (message) => {
|
||||
const alarm = destr<NdmDeviceAlarmLogResultVO>(message.body);
|
||||
const { alarmCategory, stationCode } = alarm;
|
||||
if (alarmCategory === '1' && !!stations.value.find((station) => station.code === stationCode)) {
|
||||
unreadStore.pushUnreadAlarm(alarm);
|
||||
if (alarm.alarmCategory === '1') {
|
||||
alarmStore.pushUnreadAlarm(alarm);
|
||||
}
|
||||
});
|
||||
stompClient.value?.subscribe(PERMISSION_TOPIC, (message) => {
|
||||
const employeeId = destr<string>(message.body);
|
||||
if (userInfo.value?.['employeeId'] !== employeeId) return;
|
||||
refetchUserPermissionQuery();
|
||||
});
|
||||
stompClient.value?.subscribe(SYNC_CAMERA_STATUS_TOPIC, (message) => {
|
||||
const { stationCode, startTime, endTime, insertList, updateList, deleteList } = destr<SyncCameraResult>(message.body);
|
||||
syncCameraResult.value[stationCode] = { stationCode, startTime, endTime, insertList, updateList, deleteList };
|
||||
@@ -64,7 +52,6 @@ export const useStompClient = () => {
|
||||
onDisconnect: () => {
|
||||
console.log('Stomp连接断开');
|
||||
stompClient.value?.unsubscribe(ALARM_TOPIC);
|
||||
stompClient.value?.unsubscribe(PERMISSION_TOPIC);
|
||||
stompClient.value?.unsubscribe(SYNC_CAMERA_STATUS_TOPIC);
|
||||
},
|
||||
onStompError: (frame) => {
|
||||
@@ -76,7 +63,7 @@ export const useStompClient = () => {
|
||||
window.$message.error('WebSocket错误');
|
||||
},
|
||||
});
|
||||
if (subscribeMessages.value) {
|
||||
if (!offlineDev.value) {
|
||||
stompClient.value.activate();
|
||||
}
|
||||
});
|
||||
@@ -86,11 +73,11 @@ export const useStompClient = () => {
|
||||
stompClient.value = null;
|
||||
});
|
||||
|
||||
watch(subscribeMessages, (subscribe) => {
|
||||
if (subscribe) {
|
||||
stompClient.value?.activate();
|
||||
} else {
|
||||
watch(offlineDev, (offline) => {
|
||||
if (offline) {
|
||||
stompClient.value?.deactivate();
|
||||
} else {
|
||||
stompClient.value?.activate();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -100,8 +87,8 @@ export const useStompClient = () => {
|
||||
watchDebounced(
|
||||
() => Object.entries(unreadLineAlarms.value).map(([stationCode, stationAlarms]) => ({ stationCode, count: stationAlarms['unclassified'].length })),
|
||||
(newValue, oldValue) => {
|
||||
// 关闭消息订阅时，跳过处理
|
||||
if (!subscribeMessages.value) return;
|
||||
// 启用离线模式时，跳过处理
|
||||
if (offlineDev.value) return;
|
||||
if (newValue.length === 0) return;
|
||||
const codes: Station['code'][] = [];
|
||||
newValue.forEach(({ stationCode, count }) => {
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
export const LINE_ALARMS_QUERY_KEY = 'line-alarms';
|
||||
export const LINE_DEVICES_QUERY_KEY = 'line-devices';
|
||||
export const LINE_STATIONS_QUERY_KEY = 'line-stations';
|
||||
export const USER_PERMISSION_QUERY_KEY = 'user-permission';
|
||||
export const VERIFY_USER_QUERY_KEY = 'verify-user';
|
||||
export const VERSION_CHECK_QUERY_KEY = 'version-check';
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
export const ALARM_TOPIC = '/topic/deviceAlarm';
|
||||
export const PERMISSION_TOPIC = '/topic/permission';
|
||||
|
||||
export const SYNC_CAMERA_STATUS_TOPIC = '/topic/syncCameraStatus';
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
export const NDM_ALARM_STORE_ID = 'ndm-alarm-store';
|
||||
export const NDM_DEVICE_STORE_ID = 'ndm-device-store';
|
||||
export const NDM_PERMISSION_STORE_ID = 'ndm-permission-store';
|
||||
export const NDM_POLLIING_STORE_ID = 'ndm-polling-store';
|
||||
export const NDM_SETTING_STORE_ID = 'ndm-setting-store';
|
||||
export const NDM_STATION_STORE_ID = 'ndm-station-store';
|
||||
export const NDM_UNREAD_STORE_ID = 'ndm-unread-store';
|
||||
export const NDM_USER_STORE_ID = 'ndm-user-store';
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
export * from './alarm-type';
|
||||
export * from './device-type';
|
||||
export * from './fault-level';
|
||||
export * from './permission-type';
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
export const PERMISSION_TYPE_LITERALS = {
|
||||
VIEW: 'VIEW',
|
||||
OPERATION: 'OPERATION',
|
||||
} as const;
|
||||
|
||||
export type PermissionType = keyof typeof PERMISSION_TYPE_LITERALS;
|
||||
|
||||
export const PERMISSION_TYPE_NAMES = {
|
||||
[PERMISSION_TYPE_LITERALS.VIEW]: '查看',
|
||||
[PERMISSION_TYPE_LITERALS.OPERATION]: '操作',
|
||||
} as const;
|
||||
|
||||
export type PermissionTypeEnum = typeof PERMISSION_TYPE_NAMES;
|
||||
2
src/global.d.ts
vendored
2
src/global.d.ts
vendored
@@ -7,6 +7,6 @@ declare global {
|
||||
$loadingBar: ReturnType<typeof useLoadingBar>;
|
||||
$message: ReturnType<typeof useMessage>;
|
||||
$notification: ReturnType<typeof useNotification>;
|
||||
$mockUser: Ref<boolean>;
|
||||
$offlineDev: Ref<boolean>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { SettingsDrawer, SyncCameraResultModal } from '@/components';
|
||||
import { useLineStationsQuery, useStompClient, useUserPermissionQuery, useVerifyUserQuery } from '@/composables';
|
||||
import { useLineStationsQuery, useStompClient, useVerifyUserQuery } from '@/composables';
|
||||
import { LINE_ALARMS_QUERY_KEY, LINE_DEVICES_QUERY_KEY, LINE_STATIONS_MUTATION_KEY, LINE_STATIONS_QUERY_KEY, STATION_ALARMS_MUTATION_KEY, STATION_DEVICES_MUTATION_KEY } from '@/constants';
|
||||
import { useSettingStore, useUnreadStore, useUserStore } from '@/stores';
|
||||
import { useIsFetching, useIsMutating } from '@tanstack/vue-query';
|
||||
import { ChevronDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ComputerIcon, KeyRoundIcon, LogOutIcon, LogsIcon, MapPinIcon, SettingsIcon, SirenIcon } from 'lucide-vue-next';
|
||||
import { useAlarmStore, useSettingStore, useUserStore } from '@/stores';
|
||||
import { parseErrorFeedback } from '@/utils';
|
||||
import { useIsFetching, useIsMutating, useMutation } from '@tanstack/vue-query';
|
||||
import { AlertFilled, CaretDownFilled, DoubleLeftOutlined, DoubleRightOutlined, EnvironmentFilled, FileTextFilled, HddFilled, LogoutOutlined, SettingOutlined } from '@vicons/antd';
|
||||
import { isCancel } from 'axios';
|
||||
import {
|
||||
NBadge,
|
||||
NButton,
|
||||
@@ -22,26 +24,25 @@ import {
|
||||
type MenuOption,
|
||||
} from 'naive-ui';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { computed, h, ref, type Component, type VNode } from 'vue';
|
||||
import { computed, h, ref, watchEffect, type Component, type VNode } from 'vue';
|
||||
import { RouterLink, useRoute, useRouter } from 'vue-router';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const userStore = useUserStore();
|
||||
const { userInfo, isLamp } = storeToRefs(userStore);
|
||||
const { userInfo } = storeToRefs(userStore);
|
||||
|
||||
const unreadStore = useUnreadStore();
|
||||
const { unreadAlarmCount } = storeToRefs(unreadStore);
|
||||
const alarmStore = useAlarmStore();
|
||||
const { unreadAlarmCount } = storeToRefs(alarmStore);
|
||||
|
||||
const settingStore = useSettingStore();
|
||||
const { menuCollpased } = storeToRefs(settingStore);
|
||||
const { menuCollpased, offlineDev } = storeToRefs(settingStore);
|
||||
|
||||
const { syncCameraResult, afterCheckSyncCameraResult } = useStompClient();
|
||||
|
||||
useVerifyUserQuery();
|
||||
useLineStationsQuery();
|
||||
useUserPermissionQuery();
|
||||
|
||||
// 全局loading状态依赖于轮询query的queryKey以及相关的mutationKey
|
||||
const queryingCount = useIsFetching({
|
||||
@@ -64,21 +65,21 @@ const onToggleMenuCollapsed = () => {
|
||||
menuCollpased.value = !menuCollpased.value;
|
||||
};
|
||||
|
||||
const menuOptions = computed<MenuOption[]>(() => [
|
||||
const menuOptions: MenuOption[] = [
|
||||
{
|
||||
label: () => h(RouterLink, { to: '/station' }, { default: () => '车站状态' }),
|
||||
key: '/station',
|
||||
icon: renderIcon(MapPinIcon),
|
||||
icon: renderIcon(EnvironmentFilled),
|
||||
},
|
||||
{
|
||||
label: () => h(RouterLink, { to: '/device' }, { default: () => '设备诊断' }),
|
||||
key: '/device',
|
||||
icon: renderIcon(ComputerIcon),
|
||||
icon: renderIcon(HddFilled),
|
||||
},
|
||||
{
|
||||
label: '设备告警',
|
||||
key: '/alarm',
|
||||
icon: renderIcon(SirenIcon),
|
||||
icon: renderIcon(AlertFilled),
|
||||
children: [
|
||||
{
|
||||
label: () => h(RouterLink, { to: '/alarm/alarm-log' }, { default: () => '设备告警记录' }),
|
||||
@@ -93,7 +94,7 @@ const menuOptions = computed<MenuOption[]>(() => [
|
||||
{
|
||||
label: '系统日志',
|
||||
key: '/log',
|
||||
icon: renderIcon(LogsIcon),
|
||||
icon: renderIcon(FileTextFilled),
|
||||
children: [
|
||||
{
|
||||
label: () => h(RouterLink, { to: '/log/vimp-log' }, { default: () => '视频平台日志' }),
|
||||
@@ -105,19 +106,13 @@ const menuOptions = computed<MenuOption[]>(() => [
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: () => h(RouterLink, { to: '/permission' }, { default: () => '权限管理' }),
|
||||
key: '/permission',
|
||||
show: isLamp.value,
|
||||
icon: renderIcon(KeyRoundIcon),
|
||||
},
|
||||
]);
|
||||
];
|
||||
|
||||
const dropdownOptions: DropdownOption[] = [
|
||||
{
|
||||
label: '退出登录',
|
||||
key: 'logout',
|
||||
icon: renderIcon(LogOutIcon),
|
||||
icon: renderIcon(LogoutOutlined),
|
||||
onClick: async () => {
|
||||
try {
|
||||
await userStore.userLogout();
|
||||
@@ -146,12 +141,33 @@ const routeToRoot = () => {
|
||||
};
|
||||
|
||||
const routeToAlarmPage = () => {
|
||||
unreadStore.clearUnreadAlarms();
|
||||
if (route.path !== '/alarm/alarm-log') {
|
||||
router.push({ path: '/alarm/alarm-log' });
|
||||
alarmStore.clearUnreadAlarms();
|
||||
if (route.path !== '/alarm') {
|
||||
router.push({ path: '/alarm' });
|
||||
}
|
||||
};
|
||||
|
||||
const { mutate: getUserInfo } = useMutation({
|
||||
mutationFn: async (params?: { signal?: AbortSignal }) => {
|
||||
const { signal } = params ?? {};
|
||||
await userStore.userGetInfo({ signal });
|
||||
},
|
||||
onError: (error) => {
|
||||
if (isCancel(error)) return;
|
||||
console.error(error);
|
||||
const errorFeedback = parseErrorFeedback(error);
|
||||
window.$message.error(errorFeedback);
|
||||
},
|
||||
});
|
||||
|
||||
// 判断是否为离线开发模式 决定是否自动发送获取用户信息请求
|
||||
watchEffect((onCleanup) => {
|
||||
if (offlineDev.value) return;
|
||||
const abortController = new AbortController();
|
||||
getUserInfo({ signal: abortController.signal });
|
||||
onCleanup(() => abortController.abort());
|
||||
});
|
||||
|
||||
function renderIcon(icon: Component): () => VNode {
|
||||
return () => h(NIcon, null, { default: () => h(icon) });
|
||||
}
|
||||
@@ -165,7 +181,7 @@ function renderIcon(icon: Component): () => VNode {
|
||||
<NMenu :collapsed="menuCollpased" :collapsed-width="64" :collapsed-icon-size="20" :value="route.path" :options="menuOptions" />
|
||||
<NButton block quaternary :focusable="false" @click="onToggleMenuCollapsed">
|
||||
<template #icon>
|
||||
<NIcon :component="menuCollpased ? ChevronsRightIcon : ChevronsLeftIcon" />
|
||||
<NIcon :component="menuCollpased ? DoubleRightOutlined : DoubleLeftOutlined" />
|
||||
</template>
|
||||
</NButton>
|
||||
</NFlex>
|
||||
@@ -185,13 +201,13 @@ function renderIcon(icon: Component): () => VNode {
|
||||
<span>{{ userInfo?.nickName ?? '' }}</span>
|
||||
</template>
|
||||
<template #icon>
|
||||
<NIcon :component="ChevronDownIcon" />
|
||||
<NIcon :component="CaretDownFilled" />
|
||||
</template>
|
||||
</NButton>
|
||||
</NDropdown>
|
||||
<NButton quaternary :focusable="false" style="height: 100%" @click="openSettingsDrawer">
|
||||
<template #icon>
|
||||
<NIcon :component="SettingsIcon" />
|
||||
<NIcon :component="SettingOutlined" />
|
||||
</template>
|
||||
</NButton>
|
||||
</NFlex>
|
||||
@@ -205,7 +221,7 @@ function renderIcon(icon: Component): () => VNode {
|
||||
<NBadge :value="unreadAlarmCount">
|
||||
<NButton secondary strong @click="routeToAlarmPage">
|
||||
<template #icon>
|
||||
<NIcon :component="SirenIcon" />
|
||||
<NIcon :component="AlertFilled" />
|
||||
</template>
|
||||
</NButton>
|
||||
</NBadge>
|
||||
|
||||
@@ -16,9 +16,8 @@ const NDM_TYPES: Record<string, DeviceType> = {
|
||||
|
||||
<script setup lang="ts">
|
||||
import { deleteCameraIgnoreApi, pageCameraIgnoreApi, type NdmCameraIgnore, type NdmCameraIgnoreResultVO, type PageQueryExtra, type Station } from '@/apis';
|
||||
import { usePermission } from '@/composables';
|
||||
import { DEVICE_TYPE_LITERALS, DEVICE_TYPE_NAMES, PERMISSION_TYPE_LITERALS, type DeviceType } from '@/enums';
|
||||
import { useDeviceStore, usePermissionStore } from '@/stores';
|
||||
import { DEVICE_TYPE_LITERALS, DEVICE_TYPE_NAMES, type DeviceType } from '@/enums';
|
||||
import { useDeviceStore, useStationStore } from '@/stores';
|
||||
import { useMutation } from '@tanstack/vue-query';
|
||||
import { isCancel } from 'axios';
|
||||
import {
|
||||
@@ -47,13 +46,8 @@ interface SearchFields extends PageQueryExtra<NdmCameraIgnore> {
|
||||
// deviceId_like?: string;
|
||||
}
|
||||
|
||||
const permissionStore = usePermissionStore();
|
||||
const { permissions } = storeToRefs(permissionStore);
|
||||
|
||||
const { hasPermission } = usePermission();
|
||||
|
||||
const stations = computed(() => permissionStore.stations.VIEW ?? []);
|
||||
|
||||
const stationStore = useStationStore();
|
||||
const { stations } = storeToRefs(stationStore);
|
||||
const deviceStore = useDeviceStore();
|
||||
const { lineDevices } = storeToRefs(deviceStore);
|
||||
|
||||
@@ -70,14 +64,6 @@ const stationSelectOptions = computed<SelectOption[]>(() => {
|
||||
// }));
|
||||
// });
|
||||
|
||||
// 权限变化时，需要刷新表格数据
|
||||
watch(permissions, (newPermissions, oldPermissions) => {
|
||||
const oldPermissionsJson = JSON.stringify(oldPermissions);
|
||||
const newPermissionsJson = JSON.stringify(newPermissions);
|
||||
if (oldPermissionsJson === newPermissionsJson) return;
|
||||
onClickReset();
|
||||
});
|
||||
|
||||
const searchFields = ref<SearchFields>({});
|
||||
const resetSearchFields = () => {
|
||||
searchFields.value = {};
|
||||
@@ -98,7 +84,7 @@ watch(searchFields, () => {
|
||||
searchFieldsChanged.value = true;
|
||||
});
|
||||
|
||||
const tableColumns = computed<DataTableColumns<NdmCameraIgnoreResultVO>>(() => [
|
||||
const tableColumns: DataTableColumns<NdmCameraIgnoreResultVO> = [
|
||||
{ title: '忽略时间', key: 'createdTime', align: 'center' },
|
||||
// { title: '更新时间', key: 'updatedTime' },
|
||||
{
|
||||
@@ -156,11 +142,6 @@ const tableColumns = computed<DataTableColumns<NdmCameraIgnoreResultVO>>(() => [
|
||||
align: 'center',
|
||||
width: 120,
|
||||
render: (rowData) => {
|
||||
const { deviceId } = rowData;
|
||||
if (!deviceId) return null;
|
||||
const stationCode = deviceId.slice(0, 4);
|
||||
if (!stationCode) return null;
|
||||
if (!hasPermission(stationCode, PERMISSION_TYPE_LITERALS.OPERATION)) return null;
|
||||
return h(
|
||||
NPopconfirm,
|
||||
{
|
||||
@@ -186,7 +167,7 @@ const tableColumns = computed<DataTableColumns<NdmCameraIgnoreResultVO>>(() => [
|
||||
);
|
||||
},
|
||||
},
|
||||
]);
|
||||
];
|
||||
|
||||
const { mutate: cancelIgnore } = useMutation({
|
||||
mutationFn: async (params: { id?: string; signal?: AbortSignal }) => {
|
||||
@@ -319,7 +300,7 @@ onBeforeUnmount(() => {
|
||||
|
||||
<!-- 数据表格工具栏 -->
|
||||
<NFlex align="center" style="padding: 8px; flex: 0 0 auto">
|
||||
<div style="font-size: medium">告警忽略列表</div>
|
||||
<div style="font-size: medium">视频平台日志</div>
|
||||
<NFlex style="margin-left: auto">
|
||||
<!-- <NButton type="primary" :loading="exporting" @click="() => exportTableData()">导出</NButton> -->
|
||||
</NFlex>
|
||||
@@ -3,7 +3,7 @@ import { exportDeviceAlarmLogApi, pageDeviceAlarmLogApi, type NdmDeviceAlarmLog,
|
||||
import { useAlarmActionColumn, useCameraSnapColumn } from '@/composables';
|
||||
import { ALARM_TYPES, DEVICE_TYPE_CODES, DEVICE_TYPE_LITERALS, DEVICE_TYPE_NAMES, FAULT_LEVELS, tryGetDeviceType, type DeviceType } from '@/enums';
|
||||
import { renderAlarmDateCell, renderAlarmTypeCell, renderDeviceTypeCell, renderFaultLevelCell } from '@/helpers';
|
||||
import { useDeviceStore, usePermissionStore, useUnreadStore } from '@/stores';
|
||||
import { useAlarmStore, useDeviceStore, useStationStore } from '@/stores';
|
||||
import { downloadByData, parseErrorFeedback } from '@/utils';
|
||||
import { useMutation } from '@tanstack/vue-query';
|
||||
import { watchDebounced } from '@vueuse/core';
|
||||
@@ -37,23 +37,17 @@ interface SearchFields extends PageQueryExtra<NdmDeviceAlarmLog> {
|
||||
alarmType_in: string[];
|
||||
faultLevel_in: string[];
|
||||
alarmDate: [number, number];
|
||||
alarmCategory: string;
|
||||
alarmConfirm: string;
|
||||
}
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const permissionStore = usePermissionStore();
|
||||
const { permissions } = storeToRefs(permissionStore);
|
||||
|
||||
const stations = computed(() => permissionStore.stations.VIEW ?? []);
|
||||
|
||||
const stationStore = useStationStore();
|
||||
const { stations } = storeToRefs(stationStore);
|
||||
const deviceStore = useDeviceStore();
|
||||
const { lineDevices } = storeToRefs(deviceStore);
|
||||
|
||||
const unreadStore = useUnreadStore();
|
||||
const { unreadAlarmCount } = storeToRefs(unreadStore);
|
||||
const alarmStore = useAlarmStore();
|
||||
const { unreadAlarmCount } = storeToRefs(alarmStore);
|
||||
|
||||
const stationSelectOptions = computed<SelectOption[]>(() => {
|
||||
return stations.value.map((station) => ({
|
||||
@@ -80,14 +74,6 @@ const faultLevelSelectOptions = computed<SelectOption[]>(() => {
|
||||
}));
|
||||
});
|
||||
|
||||
// 权限变化时，需要刷新表格数据
|
||||
watch(permissions, (newPermissions, oldPermissions) => {
|
||||
const oldPermissionsJson = JSON.stringify(oldPermissions);
|
||||
const newPermissionsJson = JSON.stringify(newPermissions);
|
||||
if (oldPermissionsJson === newPermissionsJson) return;
|
||||
onClickReset();
|
||||
});
|
||||
|
||||
// 未读告警数量被清零时，代表从别的页面跳转过来，需要刷新告警表格数据
|
||||
const unreadCountCleared = computed(() => unreadAlarmCount.value === 0);
|
||||
watch(unreadCountCleared, (newValue, oldValue) => {
|
||||
@@ -117,8 +103,6 @@ const searchFields = ref<SearchFields>({
|
||||
alarmType_in: [],
|
||||
faultLevel_in: [],
|
||||
alarmDate: [dayjs().startOf('date').valueOf(), dayjs().endOf('date').valueOf()],
|
||||
alarmCategory: '',
|
||||
alarmConfirm: '',
|
||||
});
|
||||
const resetSearchFields = () => {
|
||||
searchFields.value = {
|
||||
@@ -128,24 +112,19 @@ const resetSearchFields = () => {
|
||||
alarmType_in: [],
|
||||
faultLevel_in: [],
|
||||
alarmDate: [dayjs().startOf('date').valueOf(), dayjs().endOf('date').valueOf()],
|
||||
alarmCategory: '',
|
||||
alarmConfirm: '',
|
||||
};
|
||||
};
|
||||
const getExtraFields = (): PageQueryExtra<NdmDeviceAlarmLog> => {
|
||||
const stationCodeIn = searchFields.value.stationCode_in;
|
||||
const deviceTypeIn = searchFields.value.deviceType_in.flatMap((deviceType) => DEVICE_TYPE_CODES[deviceType as DeviceType]);
|
||||
const deviceNameLike = searchFields.value.deviceName_like;
|
||||
const alarmTypeIn = searchFields.value.alarmType_in;
|
||||
const faultLevelIn = searchFields.value.faultLevel_in;
|
||||
const alarmDateGe = searchFields.value.alarmDate[0];
|
||||
const alarmDateLe = searchFields.value.alarmDate[1];
|
||||
return {
|
||||
stationCode_in: stationCodeIn.length > 0 ? [...stationCodeIn] : stations.value.map((station) => station.code),
|
||||
deviceType_in: deviceTypeIn.length > 0 ? [...deviceTypeIn] : undefined,
|
||||
deviceName_like: deviceNameLike.length > 0 ? deviceNameLike : undefined,
|
||||
alarmType_in: alarmTypeIn.length > 0 ? [...alarmTypeIn] : undefined,
|
||||
faultLevel_in: faultLevelIn.length > 0 ? [...faultLevelIn] : undefined,
|
||||
stationCode_in: stationCodeIn ? (stationCodeIn.length > 0 ? [...stationCodeIn] : undefined) : undefined,
|
||||
deviceType_in: deviceTypeIn ? (deviceTypeIn.length > 0 ? [...deviceTypeIn] : undefined) : undefined,
|
||||
deviceName_like: !!searchFields.value.deviceName_like ? searchFields.value.deviceName_like : undefined,
|
||||
alarmType_in: searchFields.value.alarmType_in.length > 0 ? [...searchFields.value.alarmType_in] : undefined,
|
||||
faultLevel_in: searchFields.value.faultLevel_in.length > 0 ? [...searchFields.value.faultLevel_in] : undefined,
|
||||
alarmDate_ge: alarmDateGe,
|
||||
alarmDate_le: alarmDateLe,
|
||||
};
|
||||
@@ -244,10 +223,7 @@ const { mutate: getTableData, isPending: tableLoading } = useMutation({
|
||||
|
||||
const res = await pageDeviceAlarmLogApi(
|
||||
{
|
||||
model: {
|
||||
alarmCategory: searchFields.value.alarmCategory || undefined,
|
||||
alarmConfirm: searchFields.value.alarmConfirm || undefined,
|
||||
},
|
||||
model: {},
|
||||
extra: getExtraFields(),
|
||||
current: pagination.page ?? 1,
|
||||
size: pagination.pageSize ?? DEFAULT_PAGE_SIZE,
|
||||
@@ -355,28 +331,6 @@ onBeforeUnmount(() => {
|
||||
<NFormItemGi span="1" label="告警级别" label-placement="left">
|
||||
<NSelect multiple clearable placeholder="请选择告警级别" v-model:value="searchFields.faultLevel_in" :options="faultLevelSelectOptions" />
|
||||
</NFormItemGi>
|
||||
<NFormItemGi span="1" label="恢复状态" label-placement="left">
|
||||
<NSelect
|
||||
clearable
|
||||
placeholder="请选择恢复状态"
|
||||
v-model:value="searchFields.alarmCategory"
|
||||
:options="[
|
||||
{ label: '未恢复', value: '1' },
|
||||
{ label: '已恢复', value: '2' },
|
||||
]"
|
||||
/>
|
||||
</NFormItemGi>
|
||||
<NFormItemGi span="1" label="确认状态" label-placement="left">
|
||||
<NSelect
|
||||
clearable
|
||||
placeholder="请选择确认状态"
|
||||
v-model:value="searchFields.alarmConfirm"
|
||||
:options="[
|
||||
{ label: '未确认', value: '2' },
|
||||
{ label: '已确认', value: '1' },
|
||||
]"
|
||||
/>
|
||||
</NFormItemGi>
|
||||
<NFormItemGi span="1" label="告警时间" label-placement="left">
|
||||
<NDatePicker v-model:value="searchFields.alarmDate" type="datetimerange" />
|
||||
</NFormItemGi>
|
||||
@@ -394,7 +348,7 @@ onBeforeUnmount(() => {
|
||||
|
||||
<!-- 数据表格工具栏 -->
|
||||
<NFlex align="center" style="padding: 8px; flex: 0 0 auto">
|
||||
<div style="font-size: medium">设备告警记录</div>
|
||||
<div style="font-size: medium">视频平台日志</div>
|
||||
<NFlex align="center" style="margin-left: auto">
|
||||
<div>实时刷新</div>
|
||||
<NSwitch size="small" v-model:value="realtimeRefresh" />
|
||||
@@ -1,38 +1,6 @@
|
||||
<script lang="ts">
|
||||
const callLogTypeOptions: SelectOption[] = [
|
||||
{ label: '视频点播', value: 10001 },
|
||||
{ label: '视频回放', value: 10002 },
|
||||
// { label: '停止视频回放', value: 10003 },
|
||||
// { label: '回放暂停', value: 10004 },
|
||||
// { label: '回放恢复', value: 10005 },
|
||||
// { label: '回放倍速播放', value: 10006 },
|
||||
// { label: '回放拖动播放', value: 10007 },
|
||||
{ label: '云台指令', value: 10008 },
|
||||
{ label: '查询录像', value: 10009 },
|
||||
{ label: '下载录像', value: 10010 },
|
||||
// { label: '停止下载录像', value: 10011 },
|
||||
{ label: '获取预置位', value: 10012 },
|
||||
{ label: '获取设备信息', value: 10013 },
|
||||
{ label: '获取设备状态', value: 10014 },
|
||||
{ label: '设置解码器分屏数量', value: 20001 },
|
||||
{ label: '设置解码器rtsp流', value: 20002 },
|
||||
{ label: '移除解码器rtsp流', value: 20003 },
|
||||
// { label: '启动非报警时序', value: 30001 },
|
||||
// { label: '停止非报警时序', value: 30002 },
|
||||
// { label: '暂停非报警时序', value: 30003 },
|
||||
// { label: '调用组切', value: 30004 },
|
||||
// { label: '启动报警时序', value: 40001 },
|
||||
// { label: '停止报警时序', value: 40002 },
|
||||
// { label: '分页查询报警', value: 50001 },
|
||||
// { label: '确认报警', value: 50002 },
|
||||
// { label: '删除报警', value: 50004 },
|
||||
{ label: '目录查询', value: 60001 },
|
||||
];
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { exportCallLogApi, pageCallLogApi, type NdmCallLog, type NdmCallLogResultVO, type PageQueryExtra, type Station } from '@/apis';
|
||||
import { usePermissionStore } from '@/stores';
|
||||
import { useStationStore } from '@/stores';
|
||||
import { downloadByData, parseErrorFeedback } from '@/utils';
|
||||
import { useMutation } from '@tanstack/vue-query';
|
||||
import { isCancel } from 'axios';
|
||||
@@ -59,15 +27,11 @@ import { computed, reactive, ref, watch, watchEffect } from 'vue';
|
||||
|
||||
interface SearchFields extends PageQueryExtra<NdmCallLog> {
|
||||
stationCode?: Station['code'];
|
||||
logType_in: number[];
|
||||
createdTime: [string, string];
|
||||
}
|
||||
|
||||
const permissionStore = usePermissionStore();
|
||||
const { permissions } = storeToRefs(permissionStore);
|
||||
|
||||
const stations = computed(() => permissionStore.stations.VIEW ?? []);
|
||||
const onlineStations = computed(() => stations.value.filter((station) => station.online));
|
||||
const stationStore = useStationStore();
|
||||
const { stations, onlineStations } = storeToRefs(stationStore);
|
||||
|
||||
const stationSelectOptions = computed(() => {
|
||||
return stations.value.map<SelectOption>((station) => ({
|
||||
@@ -77,22 +41,12 @@ const stationSelectOptions = computed(() => {
|
||||
}));
|
||||
});
|
||||
|
||||
// 权限变化时，需要刷新表格数据
|
||||
watch(permissions, (newPermissions, oldPermissions) => {
|
||||
const oldPermissionsJson = JSON.stringify(oldPermissions);
|
||||
const newPermissionsJson = JSON.stringify(newPermissions);
|
||||
if (oldPermissionsJson === newPermissionsJson) return;
|
||||
onClickReset();
|
||||
});
|
||||
|
||||
const searchFields = ref<SearchFields>({
|
||||
logType_in: [],
|
||||
createdTime: [dayjs().startOf('date').subtract(1, 'week').format('YYYY-MM-DD HH:mm:ss'), dayjs().endOf('date').format('YYYY-MM-DD HH:mm:ss')],
|
||||
});
|
||||
const resetSearchFields = () => {
|
||||
searchFields.value = {
|
||||
stationCode: onlineStations.value.at(0)?.code,
|
||||
logType_in: [],
|
||||
stationCode: stations.value.find((station) => station.online)?.code,
|
||||
createdTime: [dayjs().startOf('date').subtract(1, 'week').format('YYYY-MM-DD HH:mm:ss'), dayjs().endOf('date').format('YYYY-MM-DD HH:mm:ss')],
|
||||
};
|
||||
};
|
||||
@@ -104,7 +58,6 @@ const getExtraFields = (): PageQueryExtra<NdmCallLog> => {
|
||||
const method_like = searchFields.value.method_like;
|
||||
const messageType_like = searchFields.value.messageType_like;
|
||||
const cmdType_like = searchFields.value.cmdType_like;
|
||||
const logType_in = searchFields.value.logType_in;
|
||||
return {
|
||||
createdTime_precisest,
|
||||
createdTime_preciseed,
|
||||
@@ -113,7 +66,6 @@ const getExtraFields = (): PageQueryExtra<NdmCallLog> => {
|
||||
method_like,
|
||||
messageType_like,
|
||||
cmdType_like,
|
||||
logType_in,
|
||||
};
|
||||
};
|
||||
|
||||
@@ -124,18 +76,8 @@ watch(searchFields, () => {
|
||||
|
||||
const tableColumns: DataTableColumns<NdmCallLogResultVO> = [
|
||||
{ title: '时间', key: 'createdTime' },
|
||||
{
|
||||
title: '日志类型',
|
||||
key: 'logType',
|
||||
render: (rowData) => {
|
||||
const option = callLogTypeOptions.find((option) => option.value === rowData.logType);
|
||||
return `${option?.label ?? ''}`;
|
||||
},
|
||||
},
|
||||
{ title: '调用者国标码', key: 'sourceGbId' },
|
||||
{ title: '用户所属类别', key: 'sourceType' },
|
||||
{ title: '被调用设备国标码', key: 'targetGbId' },
|
||||
{ title: '被调用设备名称', key: 'targetName' },
|
||||
{ title: '调用方法', key: 'method' },
|
||||
{ title: '消息类型', key: 'messageType' },
|
||||
{ title: '操作类型', key: 'cmdType' },
|
||||
@@ -310,9 +252,6 @@ onBeforeUnmount(() => {
|
||||
clearable
|
||||
/>
|
||||
</NFormItemGi>
|
||||
<NFormItemGi :span="1" label="日志类型" label-placement="left">
|
||||
<NSelect v-model:value="searchFields.logType_in" :options="callLogTypeOptions" multiple clearable />
|
||||
</NFormItemGi>
|
||||
<NFormItemGi span="1" label="时间" label-placement="left">
|
||||
<NDatePicker v-model:formatted-value="searchFields.createdTime" type="datetimerange" />
|
||||
</NFormItemGi>
|
||||
@@ -330,7 +269,7 @@ onBeforeUnmount(() => {
|
||||
|
||||
<!-- 数据表格工具栏 -->
|
||||
<NFlex align="center" style="padding: 8px; flex: 0 0 auto">
|
||||
<div style="font-size: medium">上级调用日志</div>
|
||||
<div style="font-size: medium">视频平台日志</div>
|
||||
<NFlex style="margin-left: auto">
|
||||
<NButton type="primary" :loading="exporting" @click="() => exportTableData()">导出</NButton>
|
||||
</NFlex>
|
||||
@@ -3,12 +3,13 @@ import type { NdmDeviceResultVO, Station } from '@/apis';
|
||||
import { DeviceRenderer, DeviceTree, type DeviceTreeProps } from '@/components';
|
||||
import type { UseDeviceSelectionReturn } from '@/composables';
|
||||
import { SELECT_DEVICE_FN_INJECTION_KEY } from '@/constants';
|
||||
import { usePermissionStore } from '@/stores';
|
||||
import { useStationStore } from '@/stores';
|
||||
import { NLayout, NLayoutContent, NLayoutSider } from 'naive-ui';
|
||||
import { computed, provide, ref } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { provide, ref } from 'vue';
|
||||
|
||||
const permissionStore = usePermissionStore();
|
||||
const stations = computed(() => permissionStore.stations.VIEW ?? []);
|
||||
const stationStore = useStationStore();
|
||||
const { stations } = storeToRefs(stationStore);
|
||||
|
||||
const selectedStation = ref<Station>();
|
||||
const selectedDevice = ref<NdmDeviceResultVO>();
|
||||
@@ -22,7 +22,8 @@ const { mutate: login, isPending: loading } = useMutation({
|
||||
mutationFn: async (params: LoginParams) => {
|
||||
const userStore = useUserStore();
|
||||
await userStore.userLogin(params);
|
||||
await userStore.userGetInfo();
|
||||
const [err] = await userClient.post<void>(`/api/ndm/ndmKeepAlive/verify`, {}, { timeout: 5000 });
|
||||
if (err) throw err;
|
||||
},
|
||||
onSuccess: () => {
|
||||
window.$message.success('登录成功');
|
||||
@@ -1,184 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { pageBaseEmployeeApi, type BaseEmployeePageQuery, type BaseEmployeeResultVO } from '@/apis';
|
||||
import { PermissionConfigModal } from '@/components';
|
||||
import { parseErrorFeedback } from '@/utils';
|
||||
import { useMutation } from '@tanstack/vue-query';
|
||||
import { isCancel } from 'axios';
|
||||
import { KeyIcon } from 'lucide-vue-next';
|
||||
import { NButton, NDataTable, NFlex, NForm, NFormItemGi, NGrid, NGridItem, NInput, type DataTableColumns, type DataTableRowData, type PaginationProps } from 'naive-ui';
|
||||
import { h, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
|
||||
|
||||
interface SearchFields extends BaseEmployeePageQuery {}
|
||||
|
||||
const searchFields = ref<SearchFields>({});
|
||||
const resetSearchFields = () => {
|
||||
searchFields.value = {
|
||||
realName: '',
|
||||
};
|
||||
};
|
||||
const getModelFields = (): BaseEmployeePageQuery => {
|
||||
return {
|
||||
realName: searchFields.value.realName,
|
||||
};
|
||||
};
|
||||
|
||||
const searchFieldsChanged = ref(false);
|
||||
watch(searchFields, () => {
|
||||
searchFieldsChanged.value = true;
|
||||
});
|
||||
|
||||
const showPermissionConfigModal = ref(false);
|
||||
const selectedEmployeeId = ref('');
|
||||
|
||||
const tableColumns: DataTableColumns<BaseEmployeeResultVO> = [
|
||||
{ title: '姓名', key: 'realName', align: 'center' },
|
||||
{ title: '创建时间', key: 'createdTime', align: 'center' },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
align: 'center',
|
||||
width: 150,
|
||||
render: (rowData) => {
|
||||
return h(
|
||||
NButton,
|
||||
{
|
||||
secondary: true,
|
||||
type: 'info',
|
||||
size: 'small',
|
||||
onClick: () => {
|
||||
const { id } = rowData;
|
||||
if (!id) return;
|
||||
selectedEmployeeId.value = id;
|
||||
showPermissionConfigModal.value = true;
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: () => h(KeyIcon),
|
||||
default: () => '配置权限',
|
||||
},
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const tableData = ref<DataTableRowData[]>([]);
|
||||
|
||||
const DEFAULT_PAGE_SIZE = 10;
|
||||
const pagination = reactive<PaginationProps>({
|
||||
showSizePicker: true,
|
||||
page: 1,
|
||||
pageSize: DEFAULT_PAGE_SIZE,
|
||||
pageSizes: [5, 10, 20, 50, 80, 100],
|
||||
itemCount: 0,
|
||||
prefix: ({ itemCount }) => {
|
||||
return h('div', {}, { default: () => `共${itemCount}条` });
|
||||
},
|
||||
onUpdatePage: (page: number) => {
|
||||
pagination.page = page;
|
||||
getTableData();
|
||||
},
|
||||
onUpdatePageSize: (pageSize: number) => {
|
||||
pagination.pageSize = pageSize;
|
||||
pagination.page = 1;
|
||||
getTableData();
|
||||
},
|
||||
});
|
||||
|
||||
const abortController = ref(new AbortController());
|
||||
|
||||
const { mutate: getTableData, isPending: tableLoading } = useMutation({
|
||||
mutationFn: async () => {
|
||||
abortController.value.abort();
|
||||
abortController.value = new AbortController();
|
||||
|
||||
const signal = abortController.value.signal;
|
||||
|
||||
const res = await pageBaseEmployeeApi(
|
||||
{
|
||||
model: getModelFields(),
|
||||
extra: {},
|
||||
current: pagination.page ?? 1,
|
||||
size: pagination.pageSize ?? DEFAULT_PAGE_SIZE,
|
||||
order: 'descending',
|
||||
sort: 'id',
|
||||
},
|
||||
{
|
||||
signal,
|
||||
},
|
||||
);
|
||||
return res;
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
const { records, size, total } = res;
|
||||
pagination.pageSize = parseInt(size);
|
||||
pagination.itemCount = parseInt(total);
|
||||
tableData.value = records;
|
||||
},
|
||||
onError: (error) => {
|
||||
if (isCancel(error)) return;
|
||||
console.error(error);
|
||||
const errorFeedback = parseErrorFeedback(error);
|
||||
window.$message.error(errorFeedback);
|
||||
},
|
||||
});
|
||||
|
||||
const onClickReset = () => {
|
||||
resetSearchFields();
|
||||
pagination.page = 1;
|
||||
pagination.pageSize = DEFAULT_PAGE_SIZE;
|
||||
pagination.itemCount = 0;
|
||||
getTableData();
|
||||
};
|
||||
const onClickQuery = () => {
|
||||
if (searchFieldsChanged.value) {
|
||||
pagination.page = 1;
|
||||
pagination.pageSize = DEFAULT_PAGE_SIZE;
|
||||
searchFieldsChanged.value = false;
|
||||
}
|
||||
getTableData();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
abortController.value.abort();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NFlex vertical :size="0" style="height: 100%">
|
||||
<!-- 查询面板 -->
|
||||
<NForm style="flex: 0 0 auto; padding: 8px">
|
||||
<NGrid cols="3" :x-gap="24">
|
||||
<NFormItemGi span="1" label="姓名" label-placement="left">
|
||||
<NInput v-model:value="searchFields.realName" />
|
||||
</NFormItemGi>
|
||||
</NGrid>
|
||||
<!-- 操作按钮 -->
|
||||
<NGrid :cols="1">
|
||||
<NGridItem>
|
||||
<NFlex>
|
||||
<NButton @click="onClickReset">重置</NButton>
|
||||
<NButton type="primary" :loading="tableLoading" @click="onClickQuery">查询</NButton>
|
||||
</NFlex>
|
||||
</NGridItem>
|
||||
</NGrid>
|
||||
</NForm>
|
||||
|
||||
<!-- 数据表格工具栏 -->
|
||||
<NFlex align="center" style="padding: 8px; flex: 0 0 auto">
|
||||
<div style="font-size: medium">用户权限列表</div>
|
||||
<NFlex style="margin-left: auto">
|
||||
<!-- <NButton type="primary" :loading="exporting" @click="() => exportTableData()">导出</NButton> -->
|
||||
</NFlex>
|
||||
</NFlex>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<NDataTable remote :columns="tableColumns" :data="tableData" :pagination="pagination" :loading="tableLoading" :single-line="false" flex-height style="height: 100%; padding: 8px; flex: 1 1 auto" />
|
||||
</NFlex>
|
||||
|
||||
<PermissionConfigModal v-model:show="showPermissionConfigModal" :employee-id="selectedEmployeeId" />
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
225
src/pages/station-page.vue
Normal file
225
src/pages/station-page.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<script setup lang="ts">
|
||||
import { initStationAlarms, initStationDevices, syncCameraApi, syncNvrChannelsApi, type Station } from '@/apis';
|
||||
import { AlarmDetailModal, DeviceDetailModal, DeviceParamConfigModal, IcmpExportModal, RecordCheckExportModal, StationCard, type StationCardProps } from '@/components';
|
||||
import { useLineDevicesQuery } from '@/composables';
|
||||
import { useAlarmStore, useDeviceStore, useSettingStore, useStationStore } from '@/stores';
|
||||
import { parseErrorFeedback } from '@/utils';
|
||||
import { useMutation } from '@tanstack/vue-query';
|
||||
import { NButton, NButtonGroup, NCheckbox, NFlex, NGrid, NGridItem, NScrollbar } from 'naive-ui';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
const settingStore = useSettingStore();
|
||||
const { stationGridCols: stationGridColumns } = storeToRefs(settingStore);
|
||||
const stationStore = useStationStore();
|
||||
const { stations } = storeToRefs(stationStore);
|
||||
const deviceStore = useDeviceStore();
|
||||
const { lineDevices } = storeToRefs(deviceStore);
|
||||
const alarmStore = useAlarmStore();
|
||||
const { lineAlarms } = storeToRefs(alarmStore);
|
||||
|
||||
const { refetch: refetchLineDevicesQuery } = useLineDevicesQuery();
|
||||
|
||||
// 操作栏
|
||||
// 当点击操作栏中的一个按钮时，其他按钮会被禁用
|
||||
type Action = 'export-icmp' | 'export-record' | 'sync-camera' | 'sync-nvr' | null;
|
||||
const selectedAction = ref<Action>(null);
|
||||
const showOperation = ref(false);
|
||||
const stationSelectable = ref(false);
|
||||
const stationSelection = ref<Record<Station['code'], boolean>>({});
|
||||
const showIcmpExportModal = ref(false);
|
||||
const showRecordCheckExportModal = ref(false);
|
||||
|
||||
const onToggleSelectAll = (checked: boolean) => {
|
||||
if (!checked) {
|
||||
stationSelection.value = {};
|
||||
} else {
|
||||
stationSelection.value = Object.fromEntries(stations.value.map((station) => [station.code, true]));
|
||||
}
|
||||
};
|
||||
|
||||
const onAction = (action: Action) => {
|
||||
selectedAction.value = action;
|
||||
if (action === null) return;
|
||||
showOperation.value = true;
|
||||
stationSelectable.value = true;
|
||||
};
|
||||
|
||||
const onCancel = () => {
|
||||
selectedAction.value = null;
|
||||
showOperation.value = false;
|
||||
stationSelectable.value = false;
|
||||
stationSelection.value = {};
|
||||
};
|
||||
|
||||
const onFinish = onCancel;
|
||||
|
||||
const { mutate: syncCamera, isPending: cameraSyncing } = useMutation({
|
||||
mutationFn: async () => {
|
||||
const stationCodes = Object.entries(stationSelection.value)
|
||||
.filter(([, selected]) => selected)
|
||||
.map(([code]) => code);
|
||||
const results = await Promise.allSettled(stationCodes.map((stationCode) => syncCameraApi({ stationCode })));
|
||||
return results.map((result, index) => ({ ...result, stationCode: stationCodes[index] }));
|
||||
},
|
||||
onSuccess: (results) => {
|
||||
const successCount = results.filter((result) => result.status === 'fulfilled').length;
|
||||
const failures = results.filter((result) => result.status === 'rejected');
|
||||
const failureCount = failures.length;
|
||||
if (failureCount > 0) {
|
||||
const failedStations = failures.map((f) => stations.value.find((s) => s.code === f.stationCode)?.name).join('、');
|
||||
if (successCount === 0) {
|
||||
window.$message.error('摄像机同步全部失败');
|
||||
window.$message.error(`${failedStations}`);
|
||||
} else {
|
||||
window.$message.warning(`摄像机同步完成：成功${successCount}个车站，失败${failureCount}个车站`);
|
||||
window.$message.warning(`${failedStations}`);
|
||||
}
|
||||
} else {
|
||||
window.$message.success('摄像机同步成功');
|
||||
}
|
||||
if (successCount > 0) {
|
||||
// 摄像机同步后，需要重新查询一次设备，待测试
|
||||
refetchLineDevicesQuery();
|
||||
}
|
||||
onFinish();
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error(error);
|
||||
const errorFeedback = parseErrorFeedback(error);
|
||||
window.$message.error(errorFeedback);
|
||||
onCancel();
|
||||
},
|
||||
});
|
||||
|
||||
const { mutate: syncNvrChannels, isPending: nvrChannelsSyncing } = useMutation({
|
||||
mutationFn: async () => {
|
||||
const stationCodes = Object.entries(stationSelection.value)
|
||||
.filter(([, selected]) => selected)
|
||||
.map(([code]) => code);
|
||||
const results = await Promise.allSettled(stationCodes.map((stationCode) => syncNvrChannelsApi({ stationCode })));
|
||||
return results.map((result, index) => ({ ...result, stationCode: stationCodes[index] }));
|
||||
},
|
||||
onSuccess: (results) => {
|
||||
const successCount = results.filter((result) => result.status === 'fulfilled').length;
|
||||
const failures = results.filter((result) => result.status === 'rejected');
|
||||
const failureCount = failures.length;
|
||||
if (failureCount > 0) {
|
||||
const failedStations = failures.map((failure) => stations.value.find((station) => station.code === failure.stationCode)?.name).join('、');
|
||||
if (successCount === 0) {
|
||||
window.$message.error('录像机通道同步全部失败');
|
||||
window.$message.error(`${failedStations}`);
|
||||
} else {
|
||||
window.$message.warning(`录像机通道同步完成：成功${successCount}个车站，失败${failureCount}个车站`);
|
||||
window.$message.warning(`${failedStations}`);
|
||||
}
|
||||
} else {
|
||||
window.$message.success('录像机通道同步成功');
|
||||
}
|
||||
onFinish();
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error(error);
|
||||
const errorFeedback = parseErrorFeedback(error);
|
||||
window.$message.error(errorFeedback);
|
||||
onCancel();
|
||||
},
|
||||
});
|
||||
|
||||
const confirming = computed(() => cameraSyncing.value || nvrChannelsSyncing.value);
|
||||
|
||||
const onConfirm = async () => {
|
||||
const noStationSelected = !Object.values(stationSelection.value).some((selected) => selected);
|
||||
if (selectedAction.value === 'export-icmp') {
|
||||
if (noStationSelected) {
|
||||
window.$message.warning('请选择要导出设备状态的车站');
|
||||
return;
|
||||
}
|
||||
showIcmpExportModal.value = true;
|
||||
} else if (selectedAction.value === 'export-record') {
|
||||
if (noStationSelected) {
|
||||
window.$message.warning('请选择要导出录像诊断的车站');
|
||||
return;
|
||||
}
|
||||
showRecordCheckExportModal.value = true;
|
||||
} else if (selectedAction.value === 'sync-camera') {
|
||||
if (noStationSelected) {
|
||||
window.$message.warning('请选择要同步摄像机的车站');
|
||||
return;
|
||||
}
|
||||
syncCamera();
|
||||
} else if (selectedAction.value === 'sync-nvr') {
|
||||
if (noStationSelected) {
|
||||
window.$message.warning('请选择要同步录像机通道的车站');
|
||||
return;
|
||||
}
|
||||
syncNvrChannels();
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
// 车站卡片的事件
|
||||
const selectedStation = ref<Station>();
|
||||
const showDeviceParamConfigModal = ref(false);
|
||||
const showDeviceDetailModal = ref(false);
|
||||
const showAlarmDetailModal = ref(false);
|
||||
|
||||
const onClickConfig: StationCardProps['onClickConfig'] = (station) => {
|
||||
selectedStation.value = station;
|
||||
showDeviceParamConfigModal.value = true;
|
||||
};
|
||||
|
||||
const onClickDetail: StationCardProps['onClickDetail'] = (type, station) => {
|
||||
selectedStation.value = station;
|
||||
if (type === 'device') {
|
||||
showDeviceDetailModal.value = true;
|
||||
}
|
||||
if (type === 'alarm') {
|
||||
showAlarmDetailModal.value = true;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NScrollbar content-style="padding-right: 8px" style="width: 100%; height: 100%">
|
||||
<!-- 工具栏 -->
|
||||
<NFlex align="center" style="padding: 8px 8px 0 8px">
|
||||
<NButtonGroup>
|
||||
<NButton secondary :focusable="false" :disabled="!!selectedAction && selectedAction !== 'export-icmp'" @click="() => onAction('export-icmp')">导出设备状态</NButton>
|
||||
<NButton secondary :focusable="false" :disabled="!!selectedAction && selectedAction !== 'export-record'" @click="() => onAction('export-record')">导出录像诊断</NButton>
|
||||
<NButton secondary :focusable="false" :disabled="!!selectedAction && selectedAction !== 'sync-camera'" @click="() => onAction('sync-camera')">同步摄像机</NButton>
|
||||
<NButton secondary :focusable="false" :disabled="!!selectedAction && selectedAction !== 'sync-nvr'" @click="() => onAction('sync-nvr')">同步录像机通道</NButton>
|
||||
</NButtonGroup>
|
||||
<template v-if="showOperation">
|
||||
<NCheckbox label="全选" @update:checked="onToggleSelectAll" />
|
||||
<NButton tertiary size="small" type="primary" :focusable="false" :loading="confirming" @click="onConfirm">确定</NButton>
|
||||
<NButton tertiary size="small" type="tertiary" :focusable="false" :disabled="confirming" @click="onCancel">取消</NButton>
|
||||
</template>
|
||||
</NFlex>
|
||||
|
||||
<!-- 车站 -->
|
||||
<NGrid :cols="stationGridColumns" :x-gap="6" :y-gap="6" style="padding: 8px">
|
||||
<NGridItem v-for="station in stations" :key="station.code">
|
||||
<StationCard
|
||||
:station="station"
|
||||
:devices="lineDevices[station.code] ?? initStationDevices()"
|
||||
:alarms="lineAlarms[station.code] ?? initStationAlarms()"
|
||||
:selectable="stationSelectable"
|
||||
v-model:selected="stationSelection[station.code]"
|
||||
@click-detail="onClickDetail"
|
||||
@click-config="onClickConfig"
|
||||
/>
|
||||
</NGridItem>
|
||||
</NGrid>
|
||||
</NScrollbar>
|
||||
|
||||
<IcmpExportModal v-model:show="showIcmpExportModal" :stations="stations.filter((station) => stationSelection[station.code])" @after-leave="onFinish" />
|
||||
<RecordCheckExportModal v-model:show="showRecordCheckExportModal" :stations="stations.filter((station) => stationSelection[station.code])" @after-leave="onFinish" />
|
||||
|
||||
<DeviceParamConfigModal v-model:show="showDeviceParamConfigModal" :station="selectedStation" />
|
||||
<DeviceDetailModal v-model:show="showDeviceDetailModal" :station="selectedStation" />
|
||||
<AlarmDetailModal v-model:show="showAlarmDetailModal" :station="selectedStation" />
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user