wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d29e243aaf4142a6ff784fb478f1ccfe83e6188a
ccdi/docs/plans/frontend/2026-03-20-results-overview-risk-model-linkage-frontend-implementation.md

9.0 KiB
Raw Blame History

Results Overview Risk Model Linkage Frontend Implementation Plan

For agentic workers: REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (- [ ]) syntax for tracking.

Goal: 将结果总览模型区接入真实接口，支持多卡片联动、任意触发/同时触发切换、员工姓名或工号与部门筛选，以及异常标签展示。

Architecture: 保持 PreliminaryCheck.vue 作为结果总览页面主入口，不新增路由或二级页面。模型卡片接口与人员列表接口分开请求，RiskModelSection.vue 内统一维护卡片选择、匹配模式、关键词、部门和分页状态，列表按状态组合查询。

Tech Stack: Vue 2, Element UI, Axios (@/utils/request), Node.js

Task 1: 补模型区 API 封装

Files:

  • Modify: ruoyi-ui/src/api/ccdi/projectOverview.js

  • Test: ruoyi-ui/tests/unit/preliminary-check-model-api.test.js

  • Step 1: Write the failing test

新增接口静态断言，锁定以下方法与路径：

  • getOverviewRiskModelCards

  • getOverviewRiskModelPeople

  • /ccdi/project/overview/risk-models/cards

  • /ccdi/project/overview/risk-models/people

  • matchMode

  • Step 2: Run test to verify it fails

Run:

cd ruoyi-ui
node tests/unit/preliminary-check-model-api.test.js

Expected:

  • FAIL

  • Step 3: Write minimal implementation

在 API 模块中新增：

  • getOverviewRiskModelCards(projectId)
  • getOverviewRiskModelPeople(params)

列表接口需透传：

  • projectId

  • modelCodes

  • matchMode

  • keyword

  • deptId

  • pageNum

  • pageSize

  • Step 4: Run test to verify it passes

Run:

cd ruoyi-ui
node tests/unit/preliminary-check-model-api.test.js

Expected:

  • PASS

  • Step 5: Commit

git add ruoyi-ui/src/api/ccdi/projectOverview.js ruoyi-ui/tests/unit/preliminary-check-model-api.test.js
git commit -m "补充结果总览模型区前端接口封装"

Task 2: 在入口页接入模型区真实数据

Files:

  • Modify: ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue

  • Modify: ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js

  • Test: ruoyi-ui/tests/unit/preliminary-check-model-data-loading.test.js

  • Step 1: Write the failing test

新增入口页静态断言，要求：

  • PreliminaryCheck.vue 引入 getOverviewRiskModelCards

  • 模型区真实数据不再只依赖旧 mock

  • 页面仍保留 loading / empty / loaded 状态结构

  • Step 2: Run test to verify it fails

Run:

cd ruoyi-ui
node tests/unit/preliminary-check-model-data-loading.test.js

Expected:

  • FAIL

  • Step 3: Write minimal implementation

在 PreliminaryCheck.vue 中：

  • 拉取模型卡片真实数据

  • 将模型区交给 RiskModelSection.vue 内部继续请求列表接口

  • 清理 preliminaryCheck.mock.js 中模型区旧的 warningTypeOptions、旧 filterValues.model 依赖

  • 保留空态 mock 作为兜底展示结构，不新增业务逻辑兜底

  • Step 4: Run test to verify it passes

Run:

cd ruoyi-ui
node tests/unit/preliminary-check-model-data-loading.test.js

Expected:

  • PASS

  • Step 5: Commit

git add ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js ruoyi-ui/tests/unit/preliminary-check-model-data-loading.test.js
git commit -m "接入结果总览模型卡片真实数据"

Task 3: 改造模型卡片多选与触发方式切换

Files:

  • Modify: ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue

  • Test: ruoyi-ui/tests/unit/preliminary-check-model-multiselect.test.js

  • Test: ruoyi-ui/tests/unit/preliminary-check-model-match-mode.test.js

  • Step 1: Write the failing test

新增组件静态/行为断言，锁定：

  • 卡片支持多选

  • 再次点击已选卡片可取消

  • 存在 matchMode

  • 页面出现“任意触发”“同时触发”文案

  • Step 2: Run test to verify it fails

Run:

cd ruoyi-ui
node tests/unit/preliminary-check-model-multiselect.test.js
node tests/unit/preliminary-check-model-match-mode.test.js

Expected:

  • FAIL

  • Step 3: Write minimal implementation

在 RiskModelSection.vue 中新增状态：

  • selectedModelCodes
  • matchMode
  • keyword
  • deptId
  • pageNum
  • pageSize
  • cardLoading
  • tableLoading

交互规则：

  • 默认 selectedModelCodes = []

  • 默认 matchMode = "ANY"

  • 选中多张卡片时允许切换 ANY / ALL

  • 不选卡片或仅选一张时，切换模式不报错，仍按当前接口语义请求

  • Step 4: Run test to verify it passes

Run:

cd ruoyi-ui
node tests/unit/preliminary-check-model-multiselect.test.js
node tests/unit/preliminary-check-model-match-mode.test.js

Expected:

  • PASS

  • Step 5: Commit

git add ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue ruoyi-ui/tests/unit/preliminary-check-model-multiselect.test.js ruoyi-ui/tests/unit/preliminary-check-model-match-mode.test.js
git commit -m "补充结果总览模型卡片联动交互"

Task 4: 替换筛选条与人员列表列

Files:

  • Modify: ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue

  • Test: ruoyi-ui/tests/unit/preliminary-check-model-filters.test.js

  • Test: ruoyi-ui/tests/unit/preliminary-check-model-table-columns.test.js

  • Step 1: Write the failing test

锁定以下变更：

  • 删除“筛查模型”

  • 删除“预警类型”

  • 新增“员工姓名或工号”

  • 新增“部门”

  • 新增“任意触发”“同时触发”

  • 删除“预警类型”列

  • 新增“工号”列

  • 新增“异常标签”列

  • Step 2: Run test to verify it fails

Run:

cd ruoyi-ui
node tests/unit/preliminary-check-model-filters.test.js
node tests/unit/preliminary-check-model-table-columns.test.js

Expected:

  • FAIL

  • Step 3: Write minimal implementation

在筛选区：

  • 保留 查询 / 重置
  • 关键词输入框支持姓名或工号
  • 部门优先复用仓库现有部门选项接口
  • 重置时恢复：
    • selectedModelCodes = []
    • matchMode = "ANY"
    • keyword = ""
    • deptId = undefined
    • pageNum = 1

在表格列：

  • 删除 warningType

  • 增加 staffCode

  • modelNames 显示当前上下文模型名称摘要

  • hitTagList 用 el-tag 展示 ruleName

  • 颜色映射复用 DetailQuery.vue 风险等级映射方式

  • Step 4: Run test to verify it passes

Run:

cd ruoyi-ui
node tests/unit/preliminary-check-model-filters.test.js
node tests/unit/preliminary-check-model-table-columns.test.js

Expected:

  • PASS

  • Step 5: Commit

git add ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue ruoyi-ui/tests/unit/preliminary-check-model-filters.test.js ruoyi-ui/tests/unit/preliminary-check-model-table-columns.test.js
git commit -m "调整结果总览模型区筛选与列表列"

Task 5: 前端联调验证与实施记录

Files:

  • Modify: ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js

  • Create: ruoyi-ui/tests/unit/preliminary-check-model-linkage-flow.test.js

  • Modify: docs/plans/frontend/2026-03-20-results-overview-risk-model-linkage-frontend-implementation.md

  • Create: docs/tests/records/2026-03-20-results-overview-risk-model-linkage-frontend-verification.md

  • Create: docs/reports/implementation/2026-03-20-results-overview-risk-model-linkage-frontend-implementation.md

  • Step 1: Write linkage flow assertions

覆盖以下联动流：

  • 默认全部模型

  • 选中一张卡片

  • 同时选中多张卡片 + ANY

  • 同时选中多张卡片 + ALL

  • 取消部分卡片

  • 全部取消恢复默认

  • 关键词 + 部门 + 多卡片叠加

  • Step 2: Run final frontend verification

Run:

cd ruoyi-ui
node tests/unit/preliminary-check-model-api.test.js
node tests/unit/preliminary-check-model-data-loading.test.js
node tests/unit/preliminary-check-model-multiselect.test.js
node tests/unit/preliminary-check-model-match-mode.test.js
node tests/unit/preliminary-check-model-filters.test.js
node tests/unit/preliminary-check-model-table-columns.test.js
node tests/unit/preliminary-check-model-linkage-flow.test.js

Expected:

  • PASS

  • Step 3: Write verification and implementation records

记录：

  • 模型区真实接口接入

  • 多卡片联动

  • 任意触发 / 同时触发切换

  • 关键词、部门、分页联动验证

  • Step 4: Commit

git add ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js ruoyi-ui/tests/unit/preliminary-check-model-linkage-flow.test.js docs/plans/frontend/2026-03-20-results-overview-risk-model-linkage-frontend-implementation.md docs/tests/records/2026-03-20-results-overview-risk-model-linkage-frontend-verification.md docs/reports/implementation/2026-03-20-results-overview-risk-model-linkage-frontend-implementation.md
git commit -m "补充结果总览模型区前端实施记录"
Reference in New Issue View Git Blame Copy Permalink