feat: CMA P1+P2 Round2 — 风险矩阵+COSO+预算方法

2026-07-16 17:09:32 +08:00
parent 82919b1616
commit 9eded3e4fe
7 changed files with 750 additions and 5 deletions
@@ -13,6 +13,7 @@
    <div style="margin:12px 0;display:flex;gap:12px;align-items:center;">
      <el-radio-group v-model="activeTab" size="small">
        <el-radio-button value="alerts">预警列表</el-radio-button>
+        <el-radio-button value="riskMatrix">风险矩阵</el-radio-button>
        <el-radio-button value="rules">预警规则配置</el-radio-button>
        <el-radio-button value="plans">改善行动</el-radio-button>
      </el-radio-group>
@@ -69,6 +70,68 @@
      </el-table>
    </template>

+    <!-- ===== 风险矩阵热力图 ===== -->
+    <template v-if="activeTab === 'riskMatrix'">
+      <div style="margin-bottom:12px;display:flex;gap:8px;align-items:center;">
+        <span style="font-weight:500;">风险矩阵 — CMA P2 ERM框架</span>
+        <el-select v-model="riskEntity" size="small" style="width:160px;" @change="loadRiskMatrix">
+          <el-option label="陕西酣客（白酒经销）" value="hanke" />
+          <el-option label="陕西博海科技（IT服务）" value="bohai" />
+        </el-select>
+        <el-button size="small" @click="loadRiskMatrix" :loading="riskLoading">刷新</el-button>
+      </div>
+
+      <div v-if="riskData" style="display:flex;gap:20px;flex-wrap:wrap;">
+        <!-- 四象限矩阵图 -->
+        <div style="flex:1;min-width:500px;">
+          <div style="font-size:12px;color:#909399;margin-bottom:4px;text-align:right;">概率 →</div>
+          <div style="display:grid;grid-template-columns:50px 1fr 1fr 1fr;gap:4px;">
+            <div style="font-size:11px;color:#909399;display:flex;align-items:center;justify-content:center;">影响 ↑</div>
+            <!-- Probability labels -->
+            <div style="font-size:11px;color:#909399;text-align:center;">低</div>
+            <div style="font-size:11px;color:#909399;text-align:center;">中</div>
+            <div style="font-size:11px;color:#909399;text-align:center;">高</div>
+
+            <!-- 高影响 row -->
+            <div style="font-size:11px;color:#909399;display:flex;align-items:center;justify-content:center;">高</div>
+            <risk-cell v-for="q in highImpactQuads" :key="q.label" :quadrant="q" @click="selectRisk(q)" />
+
+            <!-- 中影响 row -->
+            <div style="font-size:11px;color:#909399;display:flex;align-items:center;justify-content:center;">中</div>
+            <risk-cell v-for="q in medImpactQuads" :key="q.label" :quadrant="q" @click="selectRisk(q)" />
+
+            <!-- 低影响 row -->
+            <div style="font-size:11px;color:#909399;display:flex;align-items:center;justify-content:center;">低</div>
+            <risk-cell v-for="q in lowImpactQuads" :key="q.label" :quadrant="q" @click="selectRisk(q)" />
+          </div>
+        </div>
+
+        <!-- 风险详情面板 -->
+        <div style="width:360px;" v-if="selectedRisk">
+          <div style="font-weight:600;margin-bottom:8px;font-size:15px;">
+            <span :style="{color: riskTypeColor(selectedRisk.type)}">●</span>
+            {{ selectedRisk.name }}
+          </div>
+          <el-card shadow="never" style="margin-bottom:8px;">
+            <div style="margin-bottom:6px;"><span style="color:#909399;font-size:12px;">影响：</span>{{ selectedRisk.impact_label }}（{{ selectedRisk.impact_value }}分）</div>
+            <div style="margin-bottom:6px;"><span style="color:#909399;font-size:12px;">概率：</span>{{ selectedRisk.probability_label }}（{{ selectedRisk.probability_value }}分）</div>
+            <div style="margin-bottom:6px;"><span style="color:#909399;font-size:12px;">详情：</span>{{ selectedRisk.detail }}</div>
+            <div style="margin-bottom:6px;"><span style="color:#909399;font-size:12px;">应对措施：</span>
+              <ul style="margin:4px 0 0 16px;padding:0;">
+                <li v-for="m in selectedRisk.measures" :key="m" style="font-size:13px;">{{ m }}</li>
+              </ul>
+            </div>
+            <div style="margin-bottom:6px;"><span style="color:#909399;font-size:12px;">责任人：</span>{{ selectedRisk.responsible }}</div>
+            <div><span style="color:#909399;font-size:12px;">截止日：</span>{{ selectedRisk.deadline }}</div>
+          </el-card>
+        </div>
+        <div v-else style="width:360px;display:flex;align-items:center;justify-content:center;color:#ccc;font-size:14px;">
+          点击风险卡片查看详情
+        </div>
+      </div>
+      <div v-else-if="!riskLoading" style="padding:40px 0;text-align:center;color:#999;">暂无风险数据</div>
+    </template>
+
    <!-- ===== 预警规则配置 ===== -->
    <template v-if="activeTab === 'rules'">
      <div style="margin-bottom:12px;display:flex;gap:8px;">
@@ -265,10 +328,11 @@
 </template>

 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { alertApi, userApi, actionPlanApi, kpiApi, alertRulesApi } from '../api/index'
+import RiskCell from '../components/charts/RiskCell.vue'

 const route = useRoute()
 const activeTab = ref((route.meta?.tab as string) || 'alerts')
@@ -567,6 +631,35 @@ async function loadKpis() {
  try { const r: any = await kpiApi.list(); kpiOptions.value = r.data || [] } catch (e) {}
 }

+// ── 风险矩阵 ──
+const riskEntity = ref('hanke')
+const riskData = ref<any>(null)
+const riskLoading = ref(false)
+const selectedRisk = ref<any>(null)
+
+const highImpactQuads = computed(() => riskData.value?.quadrants?.filter((q: any) => q.impact === 'high') || [])
+const medImpactQuads = computed(() => riskData.value?.quadrants?.filter((q: any) => q.impact === 'medium') || [])
+const lowImpactQuads = computed(() => riskData.value?.quadrants?.filter((q: any) => q.impact === 'low') || [])
+
+function riskTypeColor(type: string): string {
+  return { red: '#f56c6c', orange: '#e6a23c', yellow: '#409eff', green: '#67c23a' }[type] || '#999'
+}
+
+function selectRisk(q: any) {
+  // If quad has only one risk, select it directly; otherwise pick first
+  selectedRisk.value = q.risks?.[0] || null
+}
+
+async function loadRiskMatrix() {
+  riskLoading.value = true
+  selectedRisk.value = null
+  try {
+    const r: any = await alertApi.riskMatrix({ entity: riskEntity.value })
+    riskData.value = r
+  } catch { ElMessage.error('加载风险矩阵失败') }
+  riskLoading.value = false
+}
+
 onMounted(() => {
  loadAlerts()
  loadRules()
@@ -579,4 +672,11 @@ onMounted(() => {
 .page-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
 .page-header h3 { margin:0; }
 .header-actions { display:flex; gap:8px; }
+.risk-cell { min-height:80px; border-radius:6px; padding:6px; background:#fafafa; border:1px solid #e8e8e8; }
+.risk-item { padding:4px 6px; margin-bottom:3px; border-radius:4px; font-size:12px; line-height:1.4; }
+.risk-item:last-child { margin-bottom:0; }
+.risk-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; }
+.risk-name { font-weight:500; }
+.risk-value { display:block; font-size:11px; color:#666; margin-top:1px; padding-left:12px; }
+.risk-empty { color:#ddd; text-align:center; line-height:80px; font-size:13px; }
 </style>