docs: 用户手册

- 新增权限管理页面
- 改进轮询链，引入权限查询
- 支持订阅权限变更或轮询权限检测变更
- 应用权限到页面和组件

.trae/documents/网络设备管理平台用户手册.md

@@ -0,0 +1,327 @@
+# 网络设备管理平台用户手册
+
+## 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. 特殊规则说明**
+
+**重要提示**：如果未给某用户勾选任何权限（即所有复选框均为空），平台默认该用户拥有 **超级管理员权限**，可访问所有车站并执行所有操作。请务必谨慎配置。

.trae/documents/网络设备管理平台用户手册编写计划.md

@@ -0,0 +1,185 @@
+# 《网络设备管理平台用户手册》编写计划
+
+本计划已根据权限系统的实际逻辑（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)**
+
+   * **矩阵式界面**：
+
+     * **行**：对应各个车站。
+
+     * **列**：对应具体权限类型（如查看、操作）。
+
+   * **批量操作**：支持整行（单站全权）或整列（全站某权）一键勾选。
+
+   * **特殊规则说明**：若未给用户勾选任何权限，平台默认该用户拥有**所有权限**（超级管理员模式）。
+

src/apis/domain/biz/station/station.ts

@@ -3,4 +3,5 @@ export interface Station {
   name: string;
   online: boolean;
   ip: string;
+  occ?: boolean; // 是否为控制中心
 }

src/apis/model/base/base-employee.ts

@@ -0,0 +1,21 @@
+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>>;

src/apis/model/base/index.ts

@@ -0,0 +1 @@
+export * from './base-employee';

src/apis/model/biz/entity/other/index.ts

@@ -1,2 +1,3 @@
+export * from './ndm-permission';
 export * from './ndm-security-box';
 export * from './ndm-switch';

src/apis/model/biz/entity/other/ndm-permission.ts

@@ -0,0 +1,34 @@
+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>>;

src/apis/model/index.ts

@@ -1,3 +1,4 @@
+export * from './base';
 export * from './biz';
 export * from './common';
 export * from './schema';

src/apis/request/base/base-employee.ts

@@ -0,0 +1,21 @@
+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;
+};

src/apis/request/base/index.ts

@@ -0,0 +1 @@
+export * from './base-employee';

src/apis/request/biz/log/ndm-record-check.ts

@@ -48,3 +48,13 @@ 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;
+};

src/apis/request/biz/other/index.ts

@@ -1,3 +1,4 @@
+export * from './ndm-permission';
 export * from './ndm-security-box';
 export * from './ndm-service-available';
 export * from './ndm-switch';

src/apis/request/biz/other/ndm-permission.ts

@@ -0,0 +1,83 @@
+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;
+};

src/apis/request/index.ts

@@ -1,2 +1,3 @@
+export * from './base';
 export * from './biz';
 export * from './system';

src/components/device/device-card/components/current-diag/nvr-record-card.vue

@@ -1,29 +1,58 @@
 <script setup lang="ts">
-import { getChannelListApi, getRecordCheckApi, reloadAllRecordCheckApi, reloadRecordCheckApi, type NdmNvrResultVO, type NdmRecordCheck, type RecordItem, type Station } from '@/apis';
+import { getChannelListApi, getRecordCheckApi, reloadAllRecordCheckApi, reloadRecordCheckApi, type NdmNvrResultVO, type RecordItem, type Station } from '@/apis';
 import { exportRecordDiagCsv, transformRecordChecks } from '@/helpers';
+import { useSettingStore } from '@/stores';
 import { parseErrorFeedback } from '@/utils';
-import { useMutation } from '@tanstack/vue-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query';
 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 { computed, onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import { computed, onBeforeUnmount, 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 { 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) {
@@ -35,26 +64,6 @@ 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();
@@ -114,7 +123,7 @@ const { mutate: reloadRecordCheckByGbId } = useMutation({
     }
   },
   onSuccess: () => {
-    getRecordCheckByParentId();
+    refetchRecordChecks();
   },
   onError: (error) => {
     if (isCancel(error)) return;
@@ -124,20 +133,6 @@ const { mutate: reloadRecordCheckByGbId } = useMutation({
   },
 });
 
-onMounted(() => {
-  getRecordCheckByParentId();
-});
-
-watch(
-  () => ndmDevice.value.id,
-  (devieDbId) => {
-    if (devieDbId) {
-      recordChecks.value = [];
-      getRecordCheckByParentId();
-    }
-  },
-);
-
 onBeforeUnmount(() => {
   abortController.value.abort();
 });
@@ -162,7 +157,7 @@ onBeforeUnmount(() => {
       <NFlex>
         <NTooltip trigger="hover">
           <template #trigger>
-            <NButton size="small" quaternary circle :loading="loading" @click="() => getRecordCheckByParentId()">
+            <NButton size="small" quaternary circle :loading="loading" @click="() => refetchRecordChecks()">
               <template #icon>
                 <NIcon :component="RotateCwIcon" />
               </template>

src/components/device/device-card/components/current-diag/security-box-circuit-card.vue

@@ -13,7 +13,9 @@ 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';
@@ -40,6 +42,8 @@ const { lineDevices } = storeToRefs(deviceStore);
 const settingStore = useSettingStore();
 const { useLocalDB } = storeToRefs(settingStore);
 
+const { hasPermission } = usePermission();
+
 const { ndmDevice, station, circuits } = toRefs(props);
 
 const showCard = computed(() => !!circuits.value && circuits.value.length > 0);
@@ -223,6 +227,7 @@ 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;

src/components/device/device-card/components/current-diag/switch-port-card.vue

@@ -1,7 +1,9 @@
 <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,6 +29,8 @@ const { lineDevices } = storeToRefs(deviceStore);
 const settingStore = useSettingStore();
 const { useLocalDB } = storeToRefs(settingStore);
 
+const { hasPermission } = usePermission();
+
 const { ndmDevice, station, ports } = toRefs(props);
 
 const showCard = computed(() => !!ports.value);
@@ -172,6 +176,7 @@ 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;

src/components/device/device-card/ndm-alarm-host/alarm-host-card.vue

@@ -1,6 +1,8 @@
 <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,6 +20,8 @@ const router = useRouter();
 const settingStore = useSettingStore();
 const { showDeviceRawData } = storeToRefs(settingStore);
 
+const { hasPermission } = usePermission();
+
 const { ndmDevice, station } = toRefs(props);
 
 const showPageHeader = computed(() => {
@@ -31,8 +35,8 @@ const activeTabName = ref('当前诊断');
 const onTabChange = (name: string) => {
   activeTabName.value = name;
 };
-watch([ndmDevice, showDeviceRawData], ([newDevice, enabled], [oldDevice]) => {
-  if (newDevice.id !== oldDevice.id || !enabled) {
+watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
+  if (newDevice.id !== oldDevice.id || (!showRaw && activeTabName.value === '原始数据')) {
     activeTabName.value = '当前诊断';
   }
 });
@@ -45,7 +49,7 @@ watch([ndmDevice, showDeviceRawData], ([newDevice, enabled], [oldDevice]) => {
       <NTabs :value="activeTabName" @update:value="onTabChange">
         <NTab name="当前诊断">当前诊断</NTab>
         <NTab name="历史诊断">历史诊断</NTab>
-        <NTab name="修改设备">修改设备</NTab>
+        <NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
         <NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
       </NTabs>
     </template>

src/components/device/device-card/ndm-camera/camera-card.vue

@@ -1,6 +1,8 @@
 <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,6 +20,8 @@ const router = useRouter();
 const settingStore = useSettingStore();
 const { showDeviceRawData } = storeToRefs(settingStore);
 
+const { hasPermission } = usePermission();
+
 const { ndmDevice, station } = toRefs(props);
 
 const showPageHeader = computed(() => {
@@ -31,8 +35,8 @@ const activeTabName = ref('当前诊断');
 const onTabChange = (name: string) => {
   activeTabName.value = name;
 };
-watch([ndmDevice, showDeviceRawData], ([newDevice, enabled], [oldDevice]) => {
-  if (newDevice.id !== oldDevice.id || !enabled) {
+watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
+  if (newDevice.id !== oldDevice.id || (!showRaw && activeTabName.value === '原始数据')) {
     activeTabName.value = '当前诊断';
   }
 });
@@ -45,7 +49,7 @@ watch([ndmDevice, showDeviceRawData], ([newDevice, enabled], [oldDevice]) => {
       <NTabs :value="activeTabName" @update:value="onTabChange">
         <NTab name="当前诊断">当前诊断</NTab>
         <NTab name="历史诊断">历史诊断</NTab>
-        <NTab name="修改设备">修改设备</NTab>
+        <NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
         <NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
       </NTabs>
     </template>

src/components/device/device-card/ndm-decoder/decoder-card.vue

@@ -1,6 +1,8 @@
 <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,6 +20,8 @@ const router = useRouter();
 const settingStore = useSettingStore();
 const { showDeviceRawData } = storeToRefs(settingStore);
 
+const { hasPermission } = usePermission();
+
 const { ndmDevice, station } = toRefs(props);
 
 const showPageHeader = computed(() => {
@@ -31,8 +35,8 @@ const activeTabName = ref('当前诊断');
 const onTabChange = (name: string) => {
   activeTabName.value = name;
 };
-watch([ndmDevice, showDeviceRawData], ([newDevice, enabled], [oldDevice]) => {
-  if (newDevice.id !== oldDevice.id || !enabled) {
+watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
+  if (newDevice.id !== oldDevice.id || (!showRaw && activeTabName.value === '原始数据')) {
     activeTabName.value = '当前诊断';
   }
 });
@@ -45,7 +49,7 @@ watch([ndmDevice, showDeviceRawData], ([newDevice, enabled], [oldDevice]) => {
       <NTabs :value="activeTabName" @update:value="onTabChange">
         <NTab name="当前诊断">当前诊断</NTab>
         <NTab name="历史诊断">历史诊断</NTab>
-        <NTab name="修改设备">修改设备</NTab>
+        <NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
         <NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
       </NTabs>
     </template>

src/components/device/device-card/ndm-keyboard/keyboard-card.vue

@@ -1,6 +1,8 @@
 <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,6 +20,8 @@ const router = useRouter();
 const settingStore = useSettingStore();
 const { showDeviceRawData } = storeToRefs(settingStore);
 
+const { hasPermission } = usePermission();
+
 const { ndmDevice, station } = toRefs(props);
 
 const showPageHeader = computed(() => {
@@ -31,8 +35,8 @@ const activeTabName = ref('当前诊断');
 const onTabChange = (name: string) => {
   activeTabName.value = name;
 };
-watch([ndmDevice, showDeviceRawData], ([newDevice, enabled], [oldDevice]) => {
-  if (newDevice.id !== oldDevice.id || !enabled) {
+watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
+  if (newDevice.id !== oldDevice.id || (!showRaw && activeTabName.value === '原始数据')) {
     activeTabName.value = '当前诊断';
   }
 });
@@ -45,7 +49,7 @@ watch([ndmDevice, showDeviceRawData], ([newDevice, enabled], [oldDevice]) => {
       <NTabs :value="activeTabName" @update:value="onTabChange">
         <NTab name="当前诊断">当前诊断</NTab>
         <NTab name="历史诊断">历史诊断</NTab>
-        <NTab name="修改设备">修改设备</NTab>
+        <NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
         <NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
       </NTabs>
     </template>

src/components/device/device-card/ndm-nvr/nvr-card.vue

@@ -1,6 +1,8 @@
 <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,6 +20,8 @@ const router = useRouter();
 const settingStore = useSettingStore();
 const { showDeviceRawData } = storeToRefs(settingStore);
 
+const { hasPermission } = usePermission();
+
 const { ndmDevice, station } = toRefs(props);
 
 const showPageHeader = computed(() => {
@@ -31,8 +35,8 @@ const activeTabName = ref('当前诊断');
 const onTabChange = (name: string) => {
   activeTabName.value = name;
 };
-watch([ndmDevice, showDeviceRawData], ([newDevice, enabled], [oldDevice]) => {
-  if (newDevice.id !== oldDevice.id || !enabled) {
+watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
+  if (newDevice.id !== oldDevice.id || (!showRaw && activeTabName.value === '原始数据')) {
     activeTabName.value = '当前诊断';
   }
 });
@@ -45,7 +49,7 @@ watch([ndmDevice, showDeviceRawData], ([newDevice, enabled], [oldDevice]) => {
       <NTabs :value="activeTabName" @update:value="onTabChange">
         <NTab name="当前诊断">当前诊断</NTab>
         <NTab name="历史诊断">历史诊断</NTab>
-        <NTab name="修改设备">修改设备</NTab>
+        <NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
         <NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
       </NTabs>
     </template>

src/components/device/device-card/ndm-security-box/security-box-card.vue

@@ -1,6 +1,8 @@
 <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,6 +20,8 @@ const router = useRouter();
 const settingStore = useSettingStore();
 const { showDeviceRawData } = storeToRefs(settingStore);
 
+const { hasPermission } = usePermission();
+
 const { ndmDevice, station } = toRefs(props);
 
 const showPageHeader = computed(() => {
@@ -31,8 +35,8 @@ const activeTabName = ref('当前诊断');
 const onTabChange = (name: string) => {
   activeTabName.value = name;
 };
-watch([ndmDevice, showDeviceRawData], ([newDevice, enabled], [oldDevice]) => {
-  if (newDevice.id !== oldDevice.id || !enabled) {
+watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
+  if (newDevice.id !== oldDevice.id || (!showRaw && activeTabName.value === '原始数据')) {
     activeTabName.value = '当前诊断';
   }
 });
@@ -45,7 +49,7 @@ watch([ndmDevice, showDeviceRawData], ([newDevice, enabled], [oldDevice]) => {
       <NTabs :value="activeTabName" @update:value="onTabChange">
         <NTab name="当前诊断">当前诊断</NTab>
         <NTab name="历史诊断">历史诊断</NTab>
-        <NTab name="修改设备">修改设备</NTab>
+        <NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
         <NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
       </NTabs>
     </template>

src/components/device/device-card/ndm-server/server-alive.vue

@@ -56,7 +56,7 @@ watch(activeRequests, (active) => {
       <span>服务状态</span>
     </template>
     <template #default>
-      <template v-if="activeRequests">
+      <template v-if="!activeRequests">
         <span>-</span>
       </template>
       <template v-else>

src/components/device/device-card/ndm-server/server-card.vue

@@ -1,6 +1,8 @@
 <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,6 +20,8 @@ const router = useRouter();
 const settingStore = useSettingStore();
 const { showDeviceRawData } = storeToRefs(settingStore);
 
+const { hasPermission } = usePermission();
+
 const { ndmDevice, station } = toRefs(props);
 
 const showPageHeader = computed(() => {
@@ -31,8 +35,8 @@ const activeTabName = ref('当前诊断');
 const onTabChange = (name: string) => {
   activeTabName.value = name;
 };
-watch([ndmDevice, showDeviceRawData], ([newDevice, enabled], [oldDevice]) => {
-  if (newDevice.id !== oldDevice.id || !enabled) {
+watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
+  if (newDevice.id !== oldDevice.id || (!showRaw && activeTabName.value === '原始数据')) {
     activeTabName.value = '当前诊断';
   }
 });
@@ -45,7 +49,7 @@ watch([ndmDevice, showDeviceRawData], ([newDevice, enabled], [oldDevice]) => {
       <NTabs :value="activeTabName" @update:value="onTabChange">
         <NTab name="当前诊断">当前诊断</NTab>
         <NTab name="历史诊断">历史诊断</NTab>
-        <NTab name="修改设备">修改设备</NTab>
+        <NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
         <NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
       </NTabs>
     </template>

src/components/device/device-card/ndm-server/server-stream-push.vue

@@ -70,7 +70,7 @@ const streamPushStat = computed(() => {
       <span>推流统计</span>
     </template>
     <template #default>
-      <template v-if="activeRequests">
+      <template v-if="!activeRequests">
         <span>-</span>
       </template>
       <template v-else>

src/components/device/device-card/ndm-switch/switch-card.vue

@@ -1,6 +1,8 @@
 <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,6 +20,8 @@ const router = useRouter();
 const settingStore = useSettingStore();
 const { showDeviceRawData } = storeToRefs(settingStore);
 
+const { hasPermission } = usePermission();
+
 const { ndmDevice, station } = toRefs(props);
 
 const showPageHeader = computed(() => {
@@ -31,8 +35,8 @@ const activeTabName = ref('当前诊断');
 const onTabChange = (name: string) => {
   activeTabName.value = name;
 };
-watch([ndmDevice, showDeviceRawData], ([newDevice, enabled], [oldDevice]) => {
-  if (newDevice.id !== oldDevice.id || !enabled) {
+watch([ndmDevice, showDeviceRawData], ([newDevice, showRaw], [oldDevice]) => {
+  if (newDevice.id !== oldDevice.id || (!showRaw && activeTabName.value === '原始数据')) {
     activeTabName.value = '当前诊断';
   }
 });
@@ -45,7 +49,7 @@ watch([ndmDevice, showDeviceRawData], ([newDevice, enabled], [oldDevice]) => {
       <NTabs :value="activeTabName" @update:value="onTabChange">
         <NTab name="当前诊断">当前诊断</NTab>
         <NTab name="历史诊断">历史诊断</NTab>
-        <NTab name="修改设备">修改设备</NTab>
+        <NTab v-if="hasPermission(station.code, PERMISSION_TYPE_LITERALS.OPERATION)" name="修改设备">修改设备</NTab>
         <NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
       </NTabs>
     </template>

src/components/device/device-tree/device-tree.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { initStationDevices, type NdmDeviceResultVO, type NdmNvrResultVO, type Station } from '@/apis';
-import { useDeviceTree, type UseDeviceTreeReturn } from '@/composables';
-import { DEVICE_TYPE_NAMES, DEVICE_TYPE_LITERALS, tryGetDeviceType, type DeviceType } from '@/enums';
+import { useDeviceTree, usePermission, type UseDeviceTreeReturn } from '@/composables';
+import { DEVICE_TYPE_NAMES, DEVICE_TYPE_LITERALS, tryGetDeviceType, type DeviceType, PERMISSION_TYPE_LITERALS } from '@/enums';
 import { isNvrCluster } from '@/helpers';
-import { useDeviceStore, useStationStore } from '@/stores';
-import { watchImmediate } from '@vueuse/core';
+import { useDeviceStore, usePermissionStore } from '@/stores';
+import { watchDebounced, 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, ref, toRefs, useTemplateRef, watch, type CSSProperties } from 'vue';
+import { computed, h, nextTick, onBeforeUnmount, onMounted, ref, toRefs, useTemplateRef, watch, type CSSProperties } from 'vue';
 
 const props = defineProps<{
   /**
@@ -60,20 +60,22 @@ 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({
-  syncRoute: computed(() => !!syncRoute.value),
-});
+} = useDeviceTree();
 
 // 将 `selectDevice` 函数暴露给父组件
 emit('exposeSelectDeviceFn', selectDevice);
@@ -87,8 +89,9 @@ const onSelectDevice = (device: NdmDeviceResultVO, stationCode: Station['code'])
   emit('afterSelectDevice', device, stationCode);
 };
 
-const stationStore = useStationStore();
-const { stations } = storeToRefs(stationStore);
+const permissionStore = usePermissionStore();
+const stations = computed(() => permissionStore.stations.VIEW ?? []);
+
 const deviceStore = useDeviceStore();
 const { lineDevices } = storeToRefs(deviceStore);
 
@@ -220,13 +223,17 @@ 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;
     },
@@ -477,11 +484,38 @@ const onLocateDeviceTree = async () => {
 
   animated.value = true;
 };
-// 渲染全线设备树时，当选择的设备发生变化，则定位设备树
+
+// 当选择的设备发生变化时，定位设备树，并同步选中状态到路由参数
 // 暂时不考虑多次执行的问题，因为当选择的设备在设备树视口内时，不会发生滚动
-watch(selectedDevice, async () => {
+watch(selectedDevice, async (newDevice, oldDevice) => {
   if (!!station.value) return;
-  await onLocateDeviceTree();
+  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);
+  }
 });
 </script>
 

src/components/global/settings-drawer/settings-drawer.vue

@@ -1,8 +1,10 @@
 <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 { useSettingStore } from '@/stores';
+import { PERMISSION_TYPE_LITERALS } from '@/enums';
+import { useSettingStore, useStationStore } from '@/stores';
 import { downloadByData, getAppEnvConfig, parseErrorFeedback, sleep } from '@/utils';
 import { useMutation } from '@tanstack/vue-query';
 import { useEventListener } from '@vueuse/core';
@@ -13,13 +15,20 @@ 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 { ref, watch } from 'vue';
+import { computed, 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 versionInfo = ref<VersionInfo>({ version: '', buildTime: '' });
 
 const { mutate: getVersionInfo } = useMutation({
@@ -294,6 +303,7 @@ 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%">
@@ -313,6 +323,7 @@ const onDrawerAfterLeave = () => {
               </NButtonGroup>
             </NFlex>
           </NFormItem>
+        </template>
 
         <template v-if="debugMode">
           <NDivider title-placement="center">调试</NDivider>

src/components/index.ts

@@ -1,3 +1,4 @@
 export * from './device';
 export * from './global';
+export * from './permission';
 export * from './station';

src/components/permission/index.ts

@@ -0,0 +1,6 @@
+import type { ComponentInstance } from 'vue';
+import PermissionConfigModal from './permission-config-modal.vue';
+
+export type PermissionConfigModalProps = ComponentInstance<typeof PermissionConfigModal>['$props'];
+
+export { PermissionConfigModal };

src/components/permission/permission-config-modal.vue

@@ -0,0 +1,302 @@
+<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>

src/components/station/record-check-export-modal/record-check-export-modal.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { getRecordCheckApi, type NdmNvrResultVO, type Station } from '@/apis';
+import { batchExportRecordCheckApi, getRecordCheckApi, pageDefParameterApi, type NdmNvrResultVO, type Station } from '@/apis';
 import { exportRecordDiagCsv, isNvrCluster, transformRecordChecks } from '@/helpers';
 import { useDeviceStore } from '@/stores';
-import { parseErrorFeedback } from '@/utils';
+import { downloadByData, parseErrorFeedback } from '@/utils';
 import { useMutation } from '@tanstack/vue-query';
 import { isCancel } from 'axios';
-import { NButton, NGrid, NGridItem, NModal, NScrollbar, NSpin } from 'naive-ui';
+import dayjs from 'dayjs';
+import { NButton, NFlex, NGrid, NGridItem, NModal, NScrollbar, NSpin } from 'naive-ui';
 import { storeToRefs } from 'pinia';
 import { computed, ref, toRefs } from 'vue';
 
@@ -60,7 +61,10 @@ const { mutate: exportRecordDiags, isPending: exporting } = useMutation({
     return checks;
   },
   onSuccess: (checks, { stationCode }) => {
-    if (!checks || checks.length === 0) return;
+    if (!checks || checks.length === 0) {
+      window.$message.info(`没有录像诊断数据`);
+      return;
+    }
     const recordDiags = transformRecordChecks(checks);
     exportRecordDiagCsv(recordDiags, nvrClusterRecord.value[stationCode]?.stationName ?? '');
   },
@@ -72,7 +76,48 @@ 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>
@@ -92,6 +137,11 @@ const onAfterLeave = () => {
         </NSpin>
       </NScrollbar>
     </template>
+    <template #action>
+      <NFlex justify="flex-end" align="center">
+        <NButton secondary :loading="batchExporting" @click="() => batchExportRecordCheck()">导出全部</NButton>
+      </NFlex>
+    </template>
   </NModal>
 </template>
 

src/components/station/station-card/station-card.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Station, StationAlarms, StationDevices } from '@/apis';
-import { DEVICE_TYPE_LITERALS } from '@/enums';
+import { usePermission } from '@/composables';
+import { DEVICE_TYPE_LITERALS, PERMISSION_TYPE_LITERALS } from '@/enums';
 import axios from 'axios';
 import dayjs from 'dayjs';
 import { isFunction } from 'es-toolkit';
@@ -24,6 +25,8 @@ const emit = defineEmits<{
   clickConfig: [station: Station];
 }>();
 
+const { hasPermission } = usePermission();
+
 const { station, devices, alarms, selectable } = toRefs(props);
 
 const onlineDeviceCount = computed(() => {
@@ -71,7 +74,7 @@ const openDeviceConfigModal = () => {
   emit('clickConfig', station.value);
 };
 
-const dropdownOptions: DropdownOption[] = [
+const dropdownOptions = computed<DropdownOption[]>(() => [
   {
     label: '视频平台',
     key: 'video-platform',
@@ -80,9 +83,10 @@ const dropdownOptions: 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'];

src/components/station/sync-camera-result-modal/sync-camera-result-modal.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import type { Station, SyncCameraResult } from '@/apis';
-import { useStationStore } from '@/stores';
+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 { storeToRefs } from 'pinia';
 import { computed, ref, toRefs } from 'vue';
 
 const props = defineProps<{
@@ -15,8 +14,8 @@ const emit = defineEmits<{
   afterLeave: [];
 }>();
 
-const stationStore = useStationStore();
-const { stations } = storeToRefs(stationStore);
+const permissionStore = usePermissionStore();
+const stations = computed(() => permissionStore.stations.VIEW ?? []);
 
 const { syncCameraResult } = toRefs(props);
 

src/composables/alarm/use-alarm-action-column.ts

@@ -1,11 +1,14 @@
+import { usePermission } from '../permission';
 import { deleteCameraIgnoreApi, pageCameraIgnoreApi, saveCameraIgnoreApi, updateDeviceAlarmLogApi, type NdmDeviceAlarmLogResultVO } from '@/apis';
-import { DEVICE_TYPE_LITERALS, tryGetDeviceType } from '@/enums';
+import { DEVICE_TYPE_LITERALS, PERMISSION_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;
@@ -115,7 +118,9 @@ export const useAlarmActionColumn = (tableData: Ref<DataTableRowData[]>) => {
                     default: () => '确认告警？',
                   },
                 ),
-            tryGetDeviceType(rowData.deviceType) === DEVICE_TYPE_LITERALS.ndmCamera && [
+            tryGetDeviceType(rowData.deviceType) === DEVICE_TYPE_LITERALS.ndmCamera &&
+              rowData.stationCode &&
+              hasPermission(rowData.stationCode, PERMISSION_TYPE_LITERALS.OPERATION) && [
                 h(
                   NPopconfirm,
                   {

src/composables/device/use-device-selection.ts

@@ -1,39 +1,33 @@
 import type { LineDevices, NdmDeviceResultVO, Station } from '@/apis';
 import { tryGetDeviceType, type DeviceType } from '@/enums';
-import { useDeviceStore } from '@/stores';
-import { watchDebounced } from '@vueuse/core';
-import { storeToRefs } from 'pinia';
-import { onMounted, ref, toValue, watch, type MaybeRefOrGetter } from 'vue';
+import { ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
-export const useDeviceSelection = (options?: { syncRoute?: MaybeRefOrGetter<boolean> }) => {
-  const { syncRoute } = options ?? {};
-
+export const useDeviceSelection = () => {
   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 initFromRoute = (lineDevices: LineDevices) => {
-    const { stationCode, deviceType, deviceDbId } = route.query;
-    if (stationCode) {
-      selectedStationCode.value = stationCode as Station['code'];
+  // 从路由参数同步选中的车站、设备类型以及设备
+  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'];
     }
-    if (deviceType) {
-      selectedDeviceType.value = deviceType as DeviceType;
+    if (routeDeviceType) {
+      selectedDeviceType.value = routeDeviceType as DeviceType;
     }
-    if (deviceDbId && selectedStationCode.value && selectedDeviceType.value) {
-      const selectedDeviceDbId = deviceDbId as string;
+    if (routeDeviceDbId && selectedStationCode.value && selectedDeviceType.value) {
+      const selectedDeviceDbId = routeDeviceDbId as string;
       const stationDevices = lineDevices[selectedStationCode.value];
       if (stationDevices) {
-        const devices = stationDevices[selectedDeviceType.value];
-        if (devices) {
-          const device = devices.find((device) => device.id === selectedDeviceDbId);
+        const classifiedDevices = stationDevices[selectedDeviceType.value];
+        if (classifiedDevices) {
+          const device = classifiedDevices.find((device) => device.id === selectedDeviceDbId);
           if (device) {
             selectedDevice.value = device;
           }
@@ -51,7 +45,9 @@ export const useDeviceSelection = (options?: { syncRoute?: MaybeRefOrGetter<bool
     }
   };
 
+  // 将选中的车站、设备类型以及设备ID同步到路由参数
   const syncToRoute = () => {
+    // console.log('sync to route');
     const query = { ...route.query };
     // 当选中的设备发生变化时，删除fromPage参数
     if (selectedDevice.value?.id && route.query.deviceDbId !== selectedDevice.value.id) {
@@ -69,39 +65,13 @@ export const useDeviceSelection = (options?: { syncRoute?: MaybeRefOrGetter<bool
     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,
 
-    initFromRoute,
+    syncFromRoute,
+    syncToRoute,
     selectDevice,
   };
 };

src/composables/device/use-device-tree.ts

@@ -1,11 +1,8 @@
-import type { MaybeRefOrGetter } from 'vue';
 import { useDeviceManagement } from './use-device-management';
 import { useDeviceSelection } from './use-device-selection';
 
-export const useDeviceTree = (options?: { syncRoute?: MaybeRefOrGetter<boolean> }) => {
-  const { syncRoute } = options ?? {};
-
-  const deviceSelection = useDeviceSelection({ syncRoute });
+export const useDeviceTree = () => {
+  const deviceSelection = useDeviceSelection();
   const deviceManagement = useDeviceManagement();
 
   return {

src/composables/index.ts

@@ -1,5 +1,6 @@
 export * from './alarm';
 export * from './device';
+export * from './permission';
 export * from './query';
 export * from './station';
 export * from './stomp';

src/composables/permission/index.ts

@@ -0,0 +1 @@
+export * from './use-permission';

src/composables/permission/use-permission.ts

@@ -0,0 +1,14 @@
+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,
+  };
+};

src/composables/query/index.ts

@@ -1,5 +1,6 @@
 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';

src/composables/query/use-line-alarms-query.ts

@@ -1,12 +1,11 @@
 import { initStationAlarms, pageDeviceAlarmLogApi, type Station } from '@/apis';
 import { LINE_ALARMS_QUERY_KEY, STATION_ALARMS_MUTATION_KEY } from '@/constants';
 import { tryGetDeviceType } from '@/enums';
-import { useAlarmStore, useStationStore } from '@/stores';
+import { useAlarmStore, usePermissionStore } 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 = () => {
@@ -69,8 +68,9 @@ export const useStationAlarmsMutation = () => {
  * @see [use-line-stations-query.ts](./use-line-stations-query.ts)
  */
 export const useLineAlarmsQuery = () => {
-  const stationStore = useStationStore();
-  const { stations } = storeToRefs(stationStore);
+  const permissionStore = usePermissionStore();
+  const stations = computed(() => permissionStore.stations.VIEW ?? []);
+
   const { mutateAsync: getStationAlarms } = useStationAlarmsMutation();
 
   return useQuery({

src/composables/query/use-line-devices-query.ts

@@ -1,10 +1,9 @@
 import { getAllDevicesApi, initStationDevices, type Station } from '@/apis';
 import { LINE_DEVICES_QUERY_KEY, STATION_DEVICES_MUTATION_KEY } from '@/constants';
-import { useDeviceStore, useStationStore } from '@/stores';
+import { useDeviceStore, usePermissionStore } 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 = () => {
@@ -36,8 +35,9 @@ export const useStationDevicesMutation = () => {
  * @see [use-line-stations-query.ts](./use-line-stations-query.ts)
  */
 export const useLineDevicesQuery = () => {
-  const stationStore = useStationStore();
-  const { stations } = storeToRefs(stationStore);
+  const permissionStore = usePermissionStore();
+  const stations = computed(() => permissionStore.stations.VIEW ?? []);
+
   const { mutateAsync: getStationDevices } = useStationDevicesMutation();
 
   return useQuery({

src/composables/query/use-line-stations-query.ts

@@ -7,8 +7,6 @@ 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();
@@ -17,12 +15,13 @@ export const useLineStationsMutation = () => {
     mutationKey: [LINE_STATIONS_MUTATION_KEY],
     mutationFn: async (params: { signal?: AbortSignal }) => {
       const { signal } = params;
-      const { data: ndmStationList } = await axios.get<{ code: string; name: string }[]>(`/minio/ndm/ndm-stations.json?_t=${dayjs().unix()}`, { signal });
+      const { data: ndmStationList } = await axios.get<Omit<Station, 'online' | 'ip'>[]>(`/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) => ({
@@ -48,8 +47,6 @@ export const useLineStationsQuery = () => {
   const { pollingStations } = storeToRefs(settingStore);
   const { requestInterval } = getAppEnvConfig();
   const { mutateAsync: getLineStations } = useLineStationsMutation();
-  const { refetch: refetchLineDevicesQuery } = useLineDevicesQuery();
-  const { refetch: refetchLineAlarmsQuery } = useLineAlarmsQuery();
 
   return useQuery({
     queryKey: computed(() => [LINE_STATIONS_QUERY_KEY]),
@@ -62,12 +59,6 @@ export const useLineStationsQuery = () => {
       const endTime = performance.now();
       console.log(`${LINE_STATIONS_QUERY_KEY}: ${endTime - startTime} ms`);
 
-      if (!pollingStations.value) return null;
-      await refetchLineDevicesQuery();
-
-      if (!pollingStations.value) return null;
-      await refetchLineAlarmsQuery();
-
       return null;
     },
   });

src/composables/query/use-user-permission-query.ts

@@ -0,0 +1,67 @@
+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;
+    },
+  });
+};

src/composables/station/use-batch-actions.ts

@@ -1,4 +1,8 @@
+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';
@@ -6,29 +10,36 @@ type BatchActionKey = 'export-icmp' | 'export-record' | 'sync-camera' | 'sync-nv
 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,
     },
   ]);
@@ -39,11 +50,33 @@ export const useBatchActions = (stations: Ref<Station[]>, abortController?: Ref<
 
   const selectableStations = computed(() => {
     if (!selectedAction.value) return [];
-    return stations.value;
+    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) {
@@ -95,6 +128,8 @@ export const useBatchActions = (stations: Ref<Station[]>, abortController?: Ref<
     selectableStations,
     stationSelection,
 
+    selectionProps,
+
     toggleSelectAction,
     toggleSelectAllStations,
 

src/composables/stomp/use-stomp-client.ts

@@ -1,12 +1,12 @@
 import type { NdmDeviceAlarmLogResultVO, Station, SyncCameraResult } from '@/apis';
-import { ALARM_TOPIC, SYNC_CAMERA_STATUS_TOPIC } from '@/constants';
-import { useSettingStore, useStationStore, useUnreadStore } from '@/stores';
+import { ALARM_TOPIC, PERMISSION_TOPIC, SYNC_CAMERA_STATUS_TOPIC } from '@/constants';
+import { useSettingStore, useStationStore, useUnreadStore, useUserStore } 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 } from '../query';
+import { useStationAlarmsMutation, useUserPermissionQuery } from '../query';
 
 const getBrokerUrl = () => {
   const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
@@ -26,6 +26,10 @@ export const useStompClient = () => {
   const settingStore = useSettingStore();
   const { subscribeMessages } = storeToRefs(settingStore);
 
+  const userStore = useUserStore();
+  const { userInfo } = storeToRefs(userStore);
+
+  const { refetch: refetchUserPermissionQuery } = useUserPermissionQuery();
   const { mutate: refreshStationAlarms } = useStationAlarmsMutation();
 
   const stompClient = ref<Client | null>(null);
@@ -47,6 +51,11 @@ export const useStompClient = () => {
             unreadStore.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 };
@@ -55,6 +64,7 @@ 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) => {

src/constants/query.ts

@@ -1,5 +1,6 @@
 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';

src/constants/stomp.ts

@@ -1,3 +1,3 @@
 export const ALARM_TOPIC = '/topic/deviceAlarm';
-
+export const PERMISSION_TOPIC = '/topic/permission';
 export const SYNC_CAMERA_STATUS_TOPIC = '/topic/syncCameraStatus';

src/constants/store.ts

@@ -1,5 +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';

src/enums/index.ts

@@ -1,3 +1,4 @@
 export * from './alarm-type';
 export * from './device-type';
 export * from './fault-level';
+export * from './permission-type';

src/enums/permission-type.ts

@@ -0,0 +1,13 @@
+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;

src/layouts/app-layout.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { SettingsDrawer, SyncCameraResultModal } from '@/components';
-import { useLineStationsQuery, useStompClient, useVerifyUserQuery } from '@/composables';
+import { useLineStationsQuery, useStompClient, useUserPermissionQuery, 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, LogOutIcon, LogsIcon, MapPinIcon, SettingsIcon, SirenIcon } from 'lucide-vue-next';
+import { ChevronDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ComputerIcon, KeyRoundIcon, LogOutIcon, LogsIcon, MapPinIcon, SettingsIcon, SirenIcon } from 'lucide-vue-next';
 import {
   NBadge,
   NButton,
@@ -29,7 +29,7 @@ const route = useRoute();
 const router = useRouter();
 
 const userStore = useUserStore();
-const { userInfo } = storeToRefs(userStore);
+const { userInfo, isLamp } = storeToRefs(userStore);
 
 const unreadStore = useUnreadStore();
 const { unreadAlarmCount } = storeToRefs(unreadStore);
@@ -41,6 +41,7 @@ const { syncCameraResult, afterCheckSyncCameraResult } = useStompClient();
 
 useVerifyUserQuery();
 useLineStationsQuery();
+useUserPermissionQuery();
 
 // 全局loading状态依赖于轮询query的queryKey以及相关的mutationKey
 const queryingCount = useIsFetching({
@@ -63,7 +64,7 @@ const onToggleMenuCollapsed = () => {
   menuCollpased.value = !menuCollpased.value;
 };
 
-const menuOptions: MenuOption[] = [
+const menuOptions = computed<MenuOption[]>(() => [
   {
     label: () => h(RouterLink, { to: '/station' }, { default: () => '车站状态' }),
     key: '/station',
@@ -104,7 +105,13 @@ const menuOptions: MenuOption[] = [
       },
     ],
   },
-];
+  {
+    label: () => h(RouterLink, { to: '/permission' }, { default: () => '权限管理' }),
+    key: '/permission',
+    show: isLamp.value,
+    icon: renderIcon(KeyRoundIcon),
+  },
+]);
 
 const dropdownOptions: DropdownOption[] = [
   {

src/pages/alarm/alarm-ignore-page.vue

@@ -16,8 +16,9 @@ const NDM_TYPES: Record<string, DeviceType> = {
 
 <script setup lang="ts">
 import { deleteCameraIgnoreApi, pageCameraIgnoreApi, type NdmCameraIgnore, type NdmCameraIgnoreResultVO, type PageQueryExtra, type Station } from '@/apis';
-import { DEVICE_TYPE_LITERALS, DEVICE_TYPE_NAMES, type DeviceType } from '@/enums';
-import { useDeviceStore, useStationStore } from '@/stores';
+import { usePermission } from '@/composables';
+import { DEVICE_TYPE_LITERALS, DEVICE_TYPE_NAMES, PERMISSION_TYPE_LITERALS, type DeviceType } from '@/enums';
+import { useDeviceStore, usePermissionStore } from '@/stores';
 import { useMutation } from '@tanstack/vue-query';
 import { isCancel } from 'axios';
 import {
@@ -46,8 +47,13 @@ interface SearchFields extends PageQueryExtra<NdmCameraIgnore> {
   // deviceId_like?: string;
 }
 
-const stationStore = useStationStore();
-const { stations } = storeToRefs(stationStore);
+const permissionStore = usePermissionStore();
+const { permissions } = storeToRefs(permissionStore);
+
+const { hasPermission } = usePermission();
+
+const stations = computed(() => permissionStore.stations.VIEW ?? []);
+
 const deviceStore = useDeviceStore();
 const { lineDevices } = storeToRefs(deviceStore);
 
@@ -64,6 +70,14 @@ 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 = {};
@@ -84,7 +98,7 @@ watch(searchFields, () => {
   searchFieldsChanged.value = true;
 });
 
-const tableColumns: DataTableColumns<NdmCameraIgnoreResultVO> = [
+const tableColumns = computed<DataTableColumns<NdmCameraIgnoreResultVO>>(() => [
   { title: '忽略时间', key: 'createdTime', align: 'center' },
   // { title: '更新时间', key: 'updatedTime' },
   {
@@ -142,6 +156,11 @@ const tableColumns: 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,
         {
@@ -167,7 +186,7 @@ const tableColumns: DataTableColumns<NdmCameraIgnoreResultVO> = [
       );
     },
   },
-];
+]);
 
 const { mutate: cancelIgnore } = useMutation({
   mutationFn: async (params: { id?: string; signal?: AbortSignal }) => {

src/pages/alarm/alarm-log-page.vue

@@ -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, useStationStore, useUnreadStore } from '@/stores';
+import { useDeviceStore, usePermissionStore, useUnreadStore } from '@/stores';
 import { downloadByData, parseErrorFeedback } from '@/utils';
 import { useMutation } from '@tanstack/vue-query';
 import { watchDebounced } from '@vueuse/core';
@@ -44,8 +44,10 @@ interface SearchFields extends PageQueryExtra<NdmDeviceAlarmLog> {
 const route = useRoute();
 const router = useRouter();
 
-const stationStore = useStationStore();
-const { stations } = storeToRefs(stationStore);
+const permissionStore = usePermissionStore();
+const { permissions } = storeToRefs(permissionStore);
+
+const stations = computed(() => permissionStore.stations.VIEW ?? []);
 
 const deviceStore = useDeviceStore();
 const { lineDevices } = storeToRefs(deviceStore);
@@ -78,6 +80,14 @@ 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) => {
@@ -125,14 +135,17 @@ const resetSearchFields = () => {
 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 ? (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,
+    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,
     alarmDate_ge: alarmDateGe,
     alarmDate_le: alarmDateLe,
   };

src/pages/device/device-page.vue

@@ -3,13 +3,12 @@ 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 { useStationStore } from '@/stores';
+import { usePermissionStore } from '@/stores';
 import { NLayout, NLayoutContent, NLayoutSider } from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import { provide, ref } from 'vue';
+import { computed, provide, ref } from 'vue';
 
-const stationStore = useStationStore();
-const { stations } = storeToRefs(stationStore);
+const permissionStore = usePermissionStore();
+const stations = computed(() => permissionStore.stations.VIEW ?? []);
 
 const selectedStation = ref<Station>();
 const selectedDevice = ref<NdmDeviceResultVO>();

src/pages/log/call-log-page.vue

@@ -32,7 +32,7 @@ const callLogTypeOptions: SelectOption[] = [
 
 <script setup lang="ts">
 import { exportCallLogApi, pageCallLogApi, type NdmCallLog, type NdmCallLogResultVO, type PageQueryExtra, type Station } from '@/apis';
-import { useStationStore } from '@/stores';
+import { usePermissionStore } from '@/stores';
 import { downloadByData, parseErrorFeedback } from '@/utils';
 import { useMutation } from '@tanstack/vue-query';
 import { isCancel } from 'axios';
@@ -63,8 +63,11 @@ interface SearchFields extends PageQueryExtra<NdmCallLog> {
   createdTime: [string, string];
 }
 
-const stationStore = useStationStore();
-const { stations, onlineStations } = storeToRefs(stationStore);
+const permissionStore = usePermissionStore();
+const { permissions } = storeToRefs(permissionStore);
+
+const stations = computed(() => permissionStore.stations.VIEW ?? []);
+const onlineStations = computed(() => stations.value.filter((station) => station.online));
 
 const stationSelectOptions = computed(() => {
   return stations.value.map<SelectOption>((station) => ({
@@ -74,6 +77,14 @@ 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')],

src/pages/log/vimp-log-page.vue

@@ -29,7 +29,7 @@ const vimpLogTypeOptions: SelectOption[] = [
 
 <script setup lang="ts">
 import { exportVimpLogApi, pageVimpLogApi, type NdmVimpLog, type NdmVimpLogResultVO, type PageQueryExtra, type Station } from '@/apis';
-import { useStationStore } from '@/stores';
+import { usePermissionStore } from '@/stores';
 import { downloadByData, parseErrorFeedback } from '@/utils';
 import { useMutation } from '@tanstack/vue-query';
 import { isCancel } from 'axios';
@@ -59,8 +59,11 @@ interface SearchFields extends PageQueryExtra<NdmVimpLog> {
   createdTime: [string, string];
 }
 
-const stationStore = useStationStore();
-const { stations, onlineStations } = storeToRefs(stationStore);
+const permissionStore = usePermissionStore();
+const { permissions } = storeToRefs(permissionStore);
+
+const stations = computed(() => permissionStore.stations.VIEW ?? []);
+const onlineStations = computed(() => stations.value.filter((station) => station.online));
 
 const stationSelectOptions = computed(() => {
   return stations.value.map<SelectOption>((station) => ({
@@ -70,6 +73,14 @@ 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')] as [string, string],

src/pages/permission/permission-page.vue

@@ -0,0 +1,184 @@
+<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>

src/pages/station/station-page.vue

@@ -2,9 +2,9 @@
 import { initStationAlarms, initStationDevices, syncCameraApi, syncNvrChannelsApi, type Station } from '@/apis';
 import { AlarmDetailModal, DeviceDetailModal, DeviceParamConfigModal, IcmpExportModal, RecordCheckExportModal, StationCard, type StationCardProps } from '@/components';
 import { useBatchActions, useLineDevicesQuery } from '@/composables';
-import { useAlarmStore, useDeviceStore, useSettingStore, useStationStore } from '@/stores';
+import { useAlarmStore, useDeviceStore, usePermissionStore, useSettingStore } from '@/stores';
 import { useMutation } from '@tanstack/vue-query';
-import { objectEntries, useElementSize } from '@vueuse/core';
+import { useElementSize } from '@vueuse/core';
 import { isCancel } from 'axios';
 import { NButton, NButtonGroup, NCheckbox, NFlex, NGrid, NGridItem, NScrollbar } from 'naive-ui';
 import { storeToRefs } from 'pinia';
@@ -13,8 +13,8 @@ import { computed, ref, useTemplateRef } from 'vue';
 const settingStore = useSettingStore();
 const { stationGridCols } = storeToRefs(settingStore);
 
-const stationStore = useStationStore();
-const { stations } = storeToRefs(stationStore);
+const permissionStore = usePermissionStore();
+const stations = computed(() => permissionStore.stations.VIEW ?? []);
 
 const deviceStore = useDeviceStore();
 const { lineDevices } = storeToRefs(deviceStore);
@@ -42,7 +42,10 @@ const showRecordCheckExportModal = ref(false);
 
 const abortController = ref(new AbortController());
 
-const { batchActions, selectedAction, selectableStations, stationSelection, toggleSelectAction, toggleSelectAllStations, confirmAction, cancelAction } = useBatchActions(stations, abortController);
+const { batchActions, selectedAction, selectableStations, stationSelection, selectionProps, toggleSelectAction, toggleSelectAllStations, confirmAction, cancelAction } = useBatchActions(
+  stations,
+  abortController,
+);
 
 const { refetch: refetchLineDevicesQuery } = useLineDevicesQuery();
 
@@ -78,7 +81,7 @@ const { mutate: syncCamera, isPending: cameraSyncing } = useMutation({
     window.$notification.info({
       title: '摄像机同步结果',
       content: notices.join('，'),
-      duration: 3000,
+      duration: 10000,
     });
     if (successRequests.length > 0) {
       // 摄像机同步后，需要重新查询一次设备
@@ -120,7 +123,7 @@ const { mutate: syncNvrChannels, isPending: nvrChannelsSyncing } = useMutation({
     window.$notification.info({
       title: '录像机通道同步结果',
       content: notices.join('，'),
-      duration: 3000,
+      duration: 10000,
     });
     cancelAction();
   },
@@ -177,12 +180,7 @@ const onClickDetail: StationCardProps['onClickDetail'] = (type, station) => {
         </template>
       </NButtonGroup>
       <template v-if="selectedAction">
-        <NCheckbox
-          label="全选"
-          :disabled="selectableStations.length === 0"
-          :checked="selectableStations.length > 0 && selectableStations.length === objectEntries(stationSelection).filter(([, selected]) => selected).length"
-          @update:checked="toggleSelectAllStations"
-        />
+        <NCheckbox label="全选" :disabled="selectionProps.disabled" :checked="selectionProps.checked" :indeterminate="selectionProps.indeterminate" @update:checked="toggleSelectAllStations" />
         <NButton tertiary size="small" type="primary" :focusable="false" :loading="confirming" @click="onClickConfirmAction">确定</NButton>
         <NButton tertiary size="small" type="tertiary" :focusable="false" @click="cancelAction">取消</NButton>
       </template>

src/router/index.ts

@@ -47,6 +47,15 @@ const router = createRouter({
             },
           ],
         },
+        {
+          path: 'permission',
+          component: () => import('@/pages/permission/permission-page.vue'),
+          beforeEnter: () => {
+            const userStore = useUserStore();
+            if (userStore.isLamp) return true;
+            return { path: '/404' };
+          },
+        },
         {
           path: '/:pathMatch(.*)*',
           component: () => import('@/pages/error/not-found-page.vue'),

src/stores/index.ts

@@ -1,5 +1,6 @@
 export * from './alarm';
 export * from './device';
+export * from './permission';
 export * from './setting';
 export * from './station';
 export * from './unread';

src/stores/permission.ts

@@ -0,0 +1,77 @@
+import type { NdmPermissionResultVO, Station } from '@/apis';
+import { NDM_PERMISSION_STORE_ID } from '@/constants';
+import { PERMISSION_TYPE_NAMES, type PermissionType } from '@/enums';
+import { useStationStore } from '@/stores';
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+import { objectEntries } from '@vueuse/core';
+
+type Permissions = Record<Station['code'], PermissionType[]>;
+
+export const usePermissionStore = defineStore(
+  NDM_PERMISSION_STORE_ID,
+  () => {
+    const stationStore = useStationStore();
+
+    const permissionRecords = ref<NdmPermissionResultVO[] | null>(null);
+
+    const permissions = computed<Permissions>(() => {
+      const result: Permissions = {};
+
+      const records = permissionRecords.value;
+
+      // 如果权限记录不存在，则不做权限配置
+      if (!records) return result;
+
+      // 如果该用户没有任何权限记录，则开放所有权限，否则根据记录配置权限
+      if (records.length === 0) {
+        stationStore.stations.forEach((station) => {
+          result[station.code] = [...objectEntries(PERMISSION_TYPE_NAMES).map(([permType]) => permType)];
+        });
+      } else {
+        stationStore.stations.forEach((station) => {
+          result[station.code] = [];
+          const stationPermRecords = records.filter((record) => record.stationCode === station.code);
+          if (stationPermRecords.length === 0) return;
+          stationPermRecords.forEach(({ type: permType }) => {
+            if (!permType) return;
+            result[station.code]?.push(permType);
+          });
+        });
+      }
+
+      return result;
+    });
+
+    // 按权限对车站进行分类
+    const stations = computed(() => {
+      const result: Partial<Record<PermissionType, Station[]>> = {};
+      // 按原始的车站顺序进行遍历，保持显示顺序不变
+      stationStore.stations.forEach((station) => {
+        const permissionTypes = permissions.value[station.code];
+        if (!permissionTypes) return;
+        permissionTypes.forEach((permissionType) => {
+          if (!result[permissionType]) result[permissionType] = [];
+          result[permissionType].push(station);
+        });
+      });
+      return result;
+    });
+
+    const setPermRecords = (records: NdmPermissionResultVO[]) => {
+      permissionRecords.value = records;
+    };
+
+    return {
+      permissionRecords,
+
+      permissions,
+      stations,
+
+      setPermRecords,
+    };
+  },
+  {
+    persist: true,
+  },
+);