diff --git a/src/pages/Container/Institution/index.css b/src/pages/Container/Institution/index.css
index 5ff5ec5..59d3fef 100644
--- a/src/pages/Container/Institution/index.css
+++ b/src/pages/Container/Institution/index.css
@@ -1,260 +1,379 @@
-.institution-dashboard {
+/* ============ 机构端首页 — 1:1 还原原型 dashboard-classic ============ */
+
+.institution-dashboard {
min-height: 100%;
- padding: 0 2px 0;
- background: #f3f3f3;
- color: #333;
+ background: #f8fafc;
+ color: #1e293b;
+ line-height: 1.6;
}
+/* 顶部工具栏 */
.institution-dashboard__toolbar {
- padding: 4px 0 8px;
+ padding: 0 0 8px;
}
-.institution-dashboard__top,
-.institution-dashboard__charts {
+/* ============ dashboard-classic 布局 ============ */
+.dashboard-classic {
display: grid;
- grid-template-columns: minmax(0, 2.12fr) 397px;
- gap: 20px;
- margin-bottom: 15px;
+ gap: 0.85rem;
}
-.institution-panel-card {
- border: 0 !important;
- border-radius: 2px !important;
- box-shadow: none !important;
-}
-
-.institution-panel-card > :is(.ant-card-head, .micro-temp-card-head) {
- min-height: 45px;
- padding: 0 16px;
- border-bottom: 0;
-}
-
-.institution-panel-card > :is(.ant-card-head, .micro-temp-card-head) :is(.ant-card-head-title, .micro-temp-card-head-title) {
- padding: 14px 0 8px;
-}
-
-.institution-card-title {
- font-size: 14px;
- font-weight: 700;
- color: #303133;
-}
-
-.institution-dashboard__summary {
- font-size: 13px;
- color: #3d3d3d;
-}
-
-.institution-dashboard__summary strong {
- margin-left: 8px;
- font-size: 13px;
- font-weight: 500;
-}
-
-.institution-dashboard__summary .is-blue {
- color: #1684ff;
-}
-
-.institution-stat-grid {
+.dashboard-classic-top,
+.dashboard-classic-middle {
display: grid;
- grid-template-columns: repeat(5, minmax(120px, 1fr));
- gap: 26px 28px;
+ grid-template-columns: minmax(0, 3.2fr) minmax(300px, 1fr);
+ gap: 0.85rem;
}
-.institution-stat-card {
+/* ============ dashboard-block 卡片 ============ */
+.dashboard-block {
+ background: #fff;
+ border: 1px solid #e2e8f0;
+ padding: 0.95rem;
+ box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
+}
+
+.dashboard-block-head {
+ min-height: 28px;
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 0.8rem;
+ margin-bottom: 0.75rem;
+}
+
+.dashboard-block-head h3 {
+ font-size: 0.88rem;
+ margin: 0;
+ font-weight: 600;
+ color: #1e293b;
+}
+
+.dashboard-block-head > div {
+ display: flex;
+ gap: 1.4rem;
+ font-size: 0.7rem;
+ color: #64748b;
+}
+
+.dashboard-block-head b {
+ color: #2563eb;
+}
+
+/* ============ 当前项目节点统计 ============ */
+.dashboard-status-grid {
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ gap: 0.75rem;
+}
+
+.dashboard-status-grid article {
display: flex;
align-items: center;
- min-height: 56px;
- padding: 10px 13px;
+ gap: 0.65rem;
+ min-height: 62px;
+ padding: 0.65rem;
background: #fff;
- border-radius: 4px;
- box-shadow: 0 6px 17px rgba(33, 57, 98, 0.09);
+ box-shadow: 0 4px 16px rgba(30, 64, 100, 0.07);
}
-.institution-stat-card__icon,
-.institution-alert-item__icon {
+.dashboard-status-grid article > i {
+ width: 34px;
+ height: 34px;
+ border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
- flex: 0 0 auto;
+ color: #fff;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 13px;
+ flex: 0 0 34px;
+}
+
+.dashboard-status-grid .blue { background: #4098f7; }
+.dashboard-status-grid .violet { background: #8268ef; }
+.dashboard-status-grid .green { background: #23bfa5; }
+.dashboard-status-grid .orange { background: #ff9f2f; }
+.dashboard-status-grid .cyan { background: #0eafbd; }
+.dashboard-status-grid .red { background: #f0645b; }
+
+.dashboard-status-grid span,
+.dashboard-status-grid strong {
+ display: block;
+}
+
+.dashboard-status-grid span {
+ font-size: 0.7rem;
+ color: #64748b;
+}
+
+.dashboard-status-grid strong {
+ font-size: 1rem;
+ margin-top: 0.15rem;
+ color: #1e293b;
+}
+
+/* ============ 通知提醒 ============ */
+.dashboard-reminder-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 0.75rem;
+}
+
+.dashboard-reminder-grid article {
+ display: flex;
+ align-items: center;
+ gap: 0.65rem;
+ min-height: 64px;
+ padding: 0.65rem;
+ cursor: pointer;
+}
+
+.dashboard-reminder-grid article:last-child {
+ grid-column: 1 / 2;
+}
+
+.dashboard-reminder-grid article.yellow { background: #fff9e8; }
+.dashboard-reminder-grid article.red { background: #fff2ef; }
+.dashboard-reminder-grid article.blue { background: #edf4ff; }
+
+.dashboard-reminder-grid i {
width: 34px;
height: 34px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
border-radius: 5px;
color: #fff;
- font-size: 19px;
-}
-
-.institution-stat-card__content {
- min-width: 0;
- margin-left: 12px;
-}
-
-.institution-stat-card__title,
-.institution-alert-item__title {
- overflow: hidden;
- color: #333;
- font-size: 12px;
+ font-style: normal;
font-weight: 700;
- line-height: 18px;
- text-overflow: ellipsis;
+ font-size: 13px;
+ flex: 0 0 34px;
+}
+
+.dashboard-reminder-grid .yellow i { background: #f7bd08; }
+.dashboard-reminder-grid .red i { background: #ff725c; }
+.dashboard-reminder-grid .blue i { background: #5b8def; }
+
+.dashboard-reminder-grid span,
+.dashboard-reminder-grid strong {
+ display: block;
+}
+
+.dashboard-reminder-grid span {
+ font-size: 0.68rem;
+ color: #64748b;
+}
+
+.dashboard-reminder-grid strong {
+ font-size: 1rem;
+ margin-top: 0.12rem;
+ color: #1e293b;
+}
+
+/* ============ 服务行业项目统计 / 评价类别占比 ============ */
+.dashboard-industry-block,
+.dashboard-type-block {
+ min-height: 285px;
+}
+
+/* 图例 */
+.chart-legend span {
+ display: flex;
+ align-items: center;
+ gap: 0.25rem;
+}
+
+.chart-legend i {
+ width: 14px;
+ height: 6px;
+ border-radius: 5px;
+ background: #4285f4;
+}
+
+.chart-legend span:last-child i {
+ background: #ffab31;
+}
+
+/* 柱状图容器 */
+.dashboard-bar-chart {
+ height: 225px;
+}
+
+/* ECharts 柱状图 */
+.institution-bar-chart {
+ width: 100%;
+ height: 225px;
+}
+
+/* ============ 评价类别占比 ============ */
+.institution-donut-chart {
+ width: 100%;
+ height: 185px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.dashboard-type-legend {
+ display: flex;
+ justify-content: center;
+ gap: 0.8rem;
+ flex-wrap: wrap;
+ font-size: 0.62rem;
+ color: #64748b;
+ margin-top: 8px;
+}
+
+.dashboard-type-legend span {
+ display: flex;
+ align-items: center;
+}
+
+.dashboard-type-legend i {
+ display: inline-block;
+ width: 7px;
+ height: 7px;
+ border-radius: 50%;
+ margin-right: 0.25rem;
+}
+
+/* ============ 项目执行情况表格 ============ */
+.dashboard-project-block .data-table {
+ background: #fff;
+ border: 0;
+ border-radius: 0;
+ box-shadow: none;
+ overflow: visible;
+}
+
+.dashboard-project-table table {
+ width: 100%;
+ border-collapse: collapse;
+}
+
+.dashboard-project-table th,
+.dashboard-project-table td {
+ padding: 0.65rem 0.55rem;
+ font-size: 0.7rem;
+}
+
+.dashboard-project-table th {
+ text-align: left;
+ font-weight: 600;
+ color: #64748b;
+ background: #f8fafc;
+ border-bottom: 1px solid #e2e8f0;
white-space: nowrap;
}
-.institution-stat-card__value {
- color: #333;
- font-size: 16px;
- font-weight: 500;
- line-height: 21px;
+.dashboard-project-table td {
+ border-bottom: 1px solid #e2e8f0;
+ color: #1e293b;
}
-.institution-alert-grid {
- display: grid;
- grid-template-columns: repeat(2, minmax(0, 1fr));
- gap: 12px 18px;
+.dashboard-project-table tr:last-child td {
+ border-bottom: none;
}
-.institution-alert-item {
- display: flex;
- align-items: center;
- min-height: 66px;
- padding: 12px 16px;
- border-radius: 2px;
+.dashboard-project-table tr:hover td {
+ background: #f8fafc;
}
-.institution-alert-item__icon {
- width: 34px;
- height: 34px;
- box-shadow: 0 5px 12px rgba(75, 91, 131, 0.2);
-}
-
-.institution-alert-item__content {
- min-width: 0;
- margin-left: 13px;
-}
-
-.institution-alert-item__value {
- color: #222;
- font-size: 17px;
- font-weight: 700;
- line-height: 22px;
-}
-
-.institution-enterprise-card,
-.institution-project-card {
- height: 300px;
-}
-
-.institution-chart-legend,
-.institution-chart-legend span {
- display: flex;
- align-items: center;
-}
-
-.institution-chart-legend {
- gap: 10px;
- color: #6f7785;
- font-size: 12px;
-}
-
-.institution-chart-legend i,
-.institution-project-legend i {
- display: inline-block;
- flex: 0 0 auto;
- width: 20px;
- height: 8px;
- margin-right: 5px;
- border-radius: 4px;
-}
-
-.institution-bar-chart {
- width: 100%;
- height: 232px;
-}
-
-.institution-project-card :is(.ant-card-body, .micro-temp-card-body) {
- text-align: center;
-}
-
-.institution-donut-chart {
- width: 218px;
- height: 218px;
- margin: -1px auto 4px;
-}
-
-.institution-project-legend {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- gap: 10px 16px;
- color: #697386;
- font-size: 12px;
- line-height: 18px;
-}
-
-.institution-project-legend span {
+/* ============ 原生按钮（匹配原型） ============ */
+.btn {
display: inline-flex;
align-items: center;
+ justify-content: center;
+ gap: 0.4rem;
+ padding: 0.42rem 0.85rem;
+ border: 1px solid var(--color-border, #e2e8f0);
+ border-radius: 8px;
+ font-size: 0.78rem;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.15s ease;
+ background: #fff;
+ color: #475569;
+ text-decoration: none;
}
-.institution-project-legend i {
- width: 7px;
- height: 7px;
- margin-right: 6px;
- border-radius: 50%;
+.btn-primary {
+ background: #2563eb;
+ color: #fff;
+ border-color: #2563eb;
+}
+.btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
+
+.btn-ghost {
+ background: transparent;
+ color: #64748b;
+ border: none;
+}
+.btn-ghost:hover { background: #f1f5f9; color: #1e293b; }
+
+.btn-sm { padding: 0.3rem 0.75rem; font-size: 0.7rem; }
+
+.dashboard-btn-ghost {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.4rem;
+ padding: 0.3rem 0.75rem;
+ border: none;
+ border-radius: 8px;
+ font-size: 0.7rem;
+ font-weight: 500;
+ cursor: pointer;
+ background: transparent;
+ color: #64748b;
+ transition: all 0.15s ease;
+}
+.dashboard-btn-ghost:hover {
+ background: #f1f5f9;
+ color: #1e293b;
}
-.institution-table-card {
- min-height: 202px;
+/* 表格操作按钮 */
+.dashboard-table-link {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.4rem;
+ padding: 0.3rem 0.75rem;
+ border: none;
+ border-radius: 8px;
+ font-size: 0.7rem;
+ font-weight: 500;
+ cursor: pointer;
+ text-decoration: none;
+ background: #2563eb;
+ color: #fff;
+ transition: all 0.15s ease;
}
-.institution-completion-table :is(.ant-table, .micro-temp-table) {
- color: #222;
- font-size: 12px;
+.dashboard-table-link:hover {
+ background: #1d4ed8;
+ text-decoration: none;
+ color: #fff;
}
-.institution-completion-table :is(.ant-table-thead, .micro-temp-table-thead) > tr > th {
- height: 27px;
- padding: 6px 10px;
- background: #eef2f8 !important;
- border-bottom: 0;
- color: #333;
- font-size: 12px;
- font-weight: 700;
-}
-
-.institution-completion-table :is(.ant-table-tbody, .micro-temp-table-tbody) > tr > td {
- height: 29px;
- padding: 6px 10px;
- border-bottom: 0;
-}
-
-.institution-completion-table :is(.ant-table-tbody, .micro-temp-table-tbody) > tr:nth-child(even) > td {
- background: #eaf2ff;
-}
-
-.institution-completion-table :is(.ant-table-tbody, .micro-temp-table-tbody) > tr:hover > td {
- background: #dfeeff !important;
-}
-
-.institution-table-link {
- color: #1684ff;
- font-size: 12px;
-}
-
-@media (max-width: 1180px) {
- .institution-dashboard__top,
- .institution-dashboard__charts {
+/* ============ 响应式 ============ */
+@media (max-width: 1280px) {
+ .dashboard-classic-top,
+ .dashboard-classic-middle {
grid-template-columns: 1fr;
}
- .institution-stat-grid {
- grid-template-columns: repeat(3, minmax(120px, 1fr));
+ .dashboard-status-grid {
+ grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 760px) {
- .institution-stat-grid,
- .institution-alert-grid {
- grid-template-columns: repeat(2, minmax(0, 1fr));
+ .dashboard-status-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ .dashboard-reminder-grid {
+ grid-template-columns: 1fr;
}
}
-
diff --git a/src/pages/Container/Institution/index.js b/src/pages/Container/Institution/index.js
index 4a99e34..8f6d1ec 100644
--- a/src/pages/Container/Institution/index.js
+++ b/src/pages/Container/Institution/index.js
@@ -1,9 +1,5 @@
-import React from 'react';
-import { Space, Card } from 'antd';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
import DriverBack from '~/pages/Container/Driver/components/DriverBack';
-
-import StatisticCards from './components/StatisticCards';
-import InfoAlerts from './components/InfoAlerts';
import EnterpriseTypeChart from './components/EnterpriseTypeChart';
import ProjectTypeChart from './components/ProjectTypeChart';
import ProjectCompletionTable from './components/ProjectCompletionTable';
@@ -16,51 +12,237 @@ import {
ENTERPRISE_TYPE_STATS,
PROJECT_TYPE_DISTRIBUTION,
PROJECT_TOTAL,
- PROJECT_COMPLETION_LIST
+ PROJECT_COMPLETION_LIST,
} from './mockData';
+import {
+ fetchProjectNodeStats,
+ fetchNotices,
+ fetchIndustryStat,
+ fetchEvalTypeRatio,
+ fetchProjectExecution,
+} from '~/api/institution';
+
+// ==================== UI 展示常量（与原型保持一致，非数据映射） ====================
+const NODE_CHARS = ['险', '合', '组', '场', '报', '内', '技', '控'];
+const NODE_COLORS = ['blue', 'violet', 'green', 'orange', 'blue', 'violet', 'orange', 'green'];
+
+function mockIndustryToApiFormat() {
+ return {
+ list: ENTERPRISE_TYPE_STATS.categories.map((name, i) => ({
+ industryCode: '',
+ industryName: name,
+ projectCount: ENTERPRISE_TYPE_STATS.projectCount[i],
+ statutoryProjectCount: ENTERPRISE_TYPE_STATS.statutoryCount[i],
+ })),
+ };
+}
+
+function mockEvalTypeToApiFormat() {
+ return {
+ totalProjectCount: PROJECT_TOTAL,
+ items: PROJECT_TYPE_DISTRIBUTION.map(item => ({
+ evalTypeCode: '',
+ evalTypeName: item.name,
+ count: item.value,
+ })),
+ };
+}
+
+function mockExecutionToApiFormat() {
+ return {
+ list: PROJECT_COMPLETION_LIST.map(item => ({
+ projectId: item.id,
+ projectNo: item.projectCode,
+ projectName: item.projectName,
+ customerName: item.evalCompany,
+ evalTypeCode: '',
+ evalTypeName: item.evalType,
+ projectLeaderName: item.projectLeader,
+ planEndDate: item.endDate,
+ })),
+ };
+}
+
+// ==================== 子组件 ====================
+function StatusCard({ item }) {
+ return (
+
+ );
+}
+
+// ==================== 主组件 ====================
export default function InstitutionDashboard() {
+ const handleReminderClick = useCallback(() => {}, []);
+
+ // 各 API 的原始返回数据（null 表示接口未成功，走 mock）
+ const [nodeStatsApi, setNodeStatsApi] = useState(null);
+ const [noticesApi, setNoticesApi] = useState(null);
+ const [industryStatApi, setIndustryStatApi] = useState(null);
+ const [evalTypeRatioApi, setEvalTypeRatioApi] = useState(null);
+ const [projectExecutionApi, setProjectExecutionApi] = useState(null);
+
+ useEffect(() => {
+ fetchProjectNodeStats()
+ .then(setNodeStatsApi)
+ .catch(() => {});
+
+ fetchNotices()
+ .then(setNoticesApi)
+ .catch(() => {});
+
+ fetchIndustryStat()
+ .then(setIndustryStatApi)
+ .catch(() => {});
+
+ fetchEvalTypeRatio()
+ .then(setEvalTypeRatioApi)
+ .catch(() => {});
+
+ fetchProjectExecution()
+ .then(setProjectExecutionApi)
+ .catch(() => {});
+ }, []);
+
+ // 衍生展示数据：API 成功则用 API 字段直接构建，失败则回退 mock
+ const statusCards = useMemo(() => {
+ if (!nodeStatsApi) return STATISTIC_CARDS;
+ const { nodeStats, archivedProjectCount, delayedProjectCount } = nodeStatsApi;
+ const nodes = (nodeStats || []).map((node, i) => ({
+ key: node.nodeCode || `NODE_${i}`,
+ title: node.nodeName,
+ value: Number(node.pendingCount) || 0,
+ char: NODE_CHARS[i] || node.nodeName.charAt(1) || '-',
+ colorClass: NODE_COLORS[i] || 'blue',
+ }));
+ nodes.push(
+ { key: 'archived', title: '已归档项目', value: Number(archivedProjectCount) || 0, char: '档', colorClass: 'cyan' },
+ { key: 'delayed', title: '项目延期', value: Number(delayedProjectCount) || 0, char: '延', colorClass: 'red' },
+ );
+ return nodes;
+ }, [nodeStatsApi]);
+
+ const projectSummary = useMemo(() => {
+ if (!nodeStatsApi) return PROJECT_SUMMARY;
+ return {
+ total: Number(nodeStatsApi.totalProjects) || 0,
+ statutory: Number(nodeStatsApi.statutoryProjects) || 0,
+ };
+ }, [nodeStatsApi]);
+
+ const alertItems = useMemo(() => {
+ if (!noticesApi) return INFO_ALERTS;
+ return [
+ { key: 'qualCheck', title: '资质现场审查通知', value: Number(noticesApi.qualOnSiteReviewCount) || 0, char: '审', colorClass: 'yellow' },
+ { key: 'supervisionCheck', title: '监督检查通知', value: Number(noticesApi.inspectionCount) || 0, char: '检', colorClass: 'red' },
+ { key: 'unreadNotice', title: '未读监管通知', value: Number(noticesApi.unreadRegulatoryCount) || 0, char: '未', colorClass: 'blue' },
+ ];
+ }, [noticesApi]);
+
+ const industryStatData = useMemo(() => {
+ return (industryStatApi && industryStatApi.list && industryStatApi.list.length > 0)
+ ? industryStatApi
+ : mockIndustryToApiFormat();
+ }, [industryStatApi]);
+
+ const evalTypeRatioData = useMemo(() => {
+ return (evalTypeRatioApi && evalTypeRatioApi.items && evalTypeRatioApi.items.length > 0)
+ ? evalTypeRatioApi
+ : mockEvalTypeToApiFormat();
+ }, [evalTypeRatioApi]);
+
+ const projectExecutionData = useMemo(() => {
+ return (projectExecutionApi && projectExecutionApi.list && projectExecutionApi.list.length > 0)
+ ? projectExecutionApi
+ : mockExecutionToApiFormat();
+ }, [projectExecutionApi]);
+
+ const legendColors = useMemo(() => ({
+ project: '#4285f4',
+ statutory: '#ffab31',
+ }), []);
+
return (
-
-
当前评价状态状态统计}
- size="small"
- className="institution-dashboard__status-card institution-panel-card"
- extra={
-
-
- 项目总数: {PROJECT_SUMMARY.total}
-
-
- 超期数: {PROJECT_SUMMARY.overdue}
-
-
- }
- styles={{ body: { padding: '16px 34px 17px' } }}
- >
-
-
-
信息提醒}
- size="small"
- className="institution-dashboard__alerts-card institution-panel-card"
- styles={{ body: { padding: '20px 24px' } }}
- >
-
-
+
+ {/* ===== 第一行：项目节点统计 + 通知提醒 ===== */}
+
+
+
+
当前项目节点统计
+
+ 项目总数：{projectSummary.total}
+ 法定项目：{projectSummary.statutory}
+
+
+ {statusCards.map(item => (
+
+ ))}
+
+
+
+
+
+
通知提醒
+
+
+ {alertItems.map(item => (
+
+ ))}
+
+
+
+
+ {/* ===== 第二行：服务行业项目统计 + 评价类别占比 ===== */}
+
+
+
+
服务行业项目统计
+
+ 项目数
+ 法定项目
+
+
+
+
+
+
+ {/* ===== 第三行：项目执行情况 ===== */}
+
{}}
+ />
-
-
-
-
);
}
diff --git a/src/pages/Container/Institution/mockData.js b/src/pages/Container/Institution/mockData.js
index c311eb8..a127346 100644
--- a/src/pages/Container/Institution/mockData.js
+++ b/src/pages/Container/Institution/mockData.js
@@ -1,86 +1,79 @@
/**
- * 机构端首页 - 模拟数据
+ * 机构端首页 - 模拟数据（1:1 还原原型 V1.4）
*/
export const STATISTIC_CARDS = [
- { key: 'contract', title: '项目合同签订', value: 5632, icon: 'FileDone', color: '#409eff', bgColor: '#409eff' },
- { key: 'riskAnalysis', title: '待风险分析', value: 951, icon: 'LineChart', color: '#8b7cf6', bgColor: '#8b7cf6' },
- { key: 'projectTeam', title: '待成立项目组', value: 5632, icon: 'Appstore', color: '#48d1bd', bgColor: '#48d1bd' },
- { key: 'workPlan', title: '待制定工作计划', value: 5632, icon: 'FileProtect', color: '#ff9f43', bgColor: '#ff9f43' },
- { key: 'initialEval', title: '待初提', value: 5632, icon: 'Safety', color: '#8b7cf6', bgColor: '#8b7cf6' },
- { key: 'checklist', title: '待编制检查表', value: 456, icon: 'Profile', color: '#8b7cf6', bgColor: '#8b7cf6' },
- { key: 'industryNotice', title: '待从业告知', value: 5632, icon: 'Notification', color: '#ffb12a', bgColor: '#ffb12a' },
- { key: 'siteSurvey', title: '待现场勘查', value: 5632, icon: 'Read', color: '#8b7cf6', bgColor: '#8b7cf6' },
- { key: 'processControl', title: '过程管控', value: 951, icon: 'Compass', color: '#409eff', bgColor: '#409eff' },
- { key: 'archive', title: '归档', value: 651, icon: 'Database', color: '#08bea7', bgColor: '#08bea7' }
+ { key: 'riskAnalysis', title: '待风险分析', value: 3, char: '险', colorClass: 'blue' },
+ { key: 'contractInput', title: '待合同录入', value: 2, char: '合', colorClass: 'violet' },
+ { key: 'projectTeam', title: '待项目组成立', value: 2, char: '组', colorClass: 'green' },
+ { key: 'siteSurvey', title: '待现场踏勘', value: 4, char: '场', colorClass: 'orange' },
+ { key: 'reportDraft', title: '待报告编制', value: 5, char: '报', colorClass: 'blue' },
+ { key: 'internalReview', title: '待内部审核', value: 3, char: '内', colorClass: 'violet' },
+ { key: 'techReview', title: '待技术审核', value: 2, char: '技', colorClass: 'orange' },
+ { key: 'processReview', title: '待过程控制审核', value: 1, char: '控', colorClass: 'green' },
+ { key: 'archived', title: '已归档项目', value: 9, char: '档', colorClass: 'cyan' },
+ { key: 'delayed', title: '项目延期', value: 2, char: '延', colorClass: 'red' },
];
export const INFO_ALERTS = [
- { key: 'orgQualification', title: '机构资质到期', value: 5, icon: 'Star', color: '#ffca0a', bgColor: '#fff9e7' },
- { key: 'personnelQualification', title: '人员资质到期', value: 35, icon: 'Audit', color: '#ff7a59', bgColor: '#fff3ef' },
- { key: 'personnelResignation', title: '人员离岗信息', value: 56, icon: 'UserDelete', color: '#6395f9', bgColor: '#f1f6ff' }
+ { key: 'qualCheck', title: '资质现场审查通知', value: 1, char: '审', colorClass: 'yellow' },
+ { key: 'supervisionCheck', title: '监督检查通知', value: 3, char: '检', colorClass: 'red' },
+ { key: 'unreadNotice', title: '未读监管通知', value: 2, char: '未', colorClass: 'blue' },
];
export const PROJECT_SUMMARY = {
- total: 5632,
- overdue: 56
+ total: 31,
+ statutory: 24,
};
export const ENTERPRISE_TYPE_STATS = {
- categories: ['矿山开采业', '危险化学品行业', '烟花爆竹行业', '金属冶炼与加工', '建筑施工', '交通运输业', '消防重点单位', '特种设备相关企业', '涉爆粉尘企业'],
- projectCount: [42, 35, 33, 35, 24, 42, 36, 42, 32],
- amount: [52, 54, 29, 48, 39, 36, 56, 35, 45]
+ categories: ['危险化学品', '非煤矿山', '金属冶炼', '工贸', '烟花爆竹', '石油天然气', '其他行业'],
+ projectCount: [24, 20, 15, 18, 12, 14, 10],
+ statutoryCount: [19, 16, 12, 14, 9, 11, 7],
};
export const PROJECT_TYPE_DISTRIBUTION = [
- { name: '定期检测', value: 5054, color: '#3f7df4' },
- { name: '现状评价', value: 1540, color: '#63c174' },
- { name: '控制效果评价', value: 1600, color: '#ffa533' },
- { name: '预评价', value: 900, color: '#ff694f' },
- { name: '设计专篇', value: 430, color: '#23c6c8' },
- { name: '委托检测', value: 330, color: '#55c653' }
+ { name: '安全预评价', value: 12, color: '#4285f4' },
+ { name: '安全验收评价', value: 8, color: '#58b874' },
+ { name: '安全现状评价', value: 11, color: '#ff9f2f' },
];
-export const PROJECT_TOTAL = 9854;
+export const PROJECT_TOTAL = 31;
export const PROJECT_COMPLETION_LIST = [
{
id: 1,
- projectName: '玉田县志达贸易有限公司蓝兴加油站、LNG加气设施合并项目',
- status: '检测完成',
- projectLeader: '梁永利',
- clientLeader: '赵天祥',
- startDate: '2025-5-4 16:12:23',
- endDate: '2025-5-4 16:12:23',
- acceptanceDate: '2025-5-4 16:12:23'
+ projectCode: 'XP-2026-001',
+ projectName: '华安化工园区安全预评价',
+ evalCompany: '重庆华安安全科技有限公司',
+ evalType: '安全预评价',
+ projectLeader: '张建国',
+ endDate: '2026-09-30',
},
{
id: 2,
- projectName: '北京首钢铁合金有限公司迁安分公司包芯线生产线扩建项目',
- status: '检测完成',
- projectLeader: '梁永利',
- clientLeader: '赵天祥',
- startDate: '2025-5-4 16:12:23',
- endDate: '2025-5-4 16:12:23',
- acceptanceDate: '2025-5-4 16:12:23'
+ projectCode: 'XP-2026-002',
+ projectName: '鼎信建设安全验收评价',
+ evalCompany: '重庆鼎信安全咨询有限公司',
+ evalType: '安全验收评价',
+ projectLeader: '李明华',
+ endDate: '2026-08-15',
},
{
id: 3,
- projectName: '中特伟业科技有限公司沧州金固废回收利用项目',
- status: '检测完成',
- projectLeader: '梁永利',
- clientLeader: '赵天祥',
- startDate: '2025-5-4 16:12:23',
- endDate: '2025-5-4 16:12:23',
- acceptanceDate: '2025-5-4 16:12:23'
+ projectCode: 'XP-2026-003',
+ projectName: '西南矿业安全现状评价',
+ evalCompany: '重庆西南矿业有限公司',
+ evalType: '安全现状评价',
+ projectLeader: '陈志强',
+ endDate: '2026-10-20',
},
{
id: 4,
- projectName: '荣信钢铁有限公司整合重组装备更新一期工程项目安全预评价',
- status: '检测完成',
- projectLeader: '梁永利',
- clientLeader: '赵天祥',
- startDate: '2025-5-4 16:12:23',
- endDate: '2025-5-4 16:12:23',
- acceptanceDate: '2025-5-4 16:12:23'
- }
+ projectCode: 'XP-2026-004',
+ projectName: '两江装备制造安全现状评价',
+ evalCompany: '重庆两江装备制造有限公司',
+ evalType: '安全现状评价',
+ projectLeader: '王海峰',
+ endDate: '2026-11-08',
+ },
];
diff --git a/src/pages/Container/Supervision/Cockpit/index.js b/src/pages/Container/Supervision/Cockpit/index.js
index cb5abbc..71246e3 100644
--- a/src/pages/Container/Supervision/Cockpit/index.js
+++ b/src/pages/Container/Supervision/Cockpit/index.js
@@ -3,22 +3,28 @@ import * as echarts from 'echarts';
import {
AuditOutlined,
BellOutlined,
- CheckCircleOutlined,
ClockCircleOutlined,
ContainerOutlined,
FileDoneOutlined,
FileProtectOutlined,
FundProjectionScreenOutlined,
- HourglassOutlined,
SafetyCertificateOutlined,
ScheduleOutlined,
SnippetsOutlined,
- TeamOutlined,
} from '@ant-design/icons';
import DriverBack from '~/pages/Container/Driver/components/DriverBack';
import './index.css';
import { cockpitMockData } from './mockData';
import chongqingGeoJson from './data/chongqingGeoJson.json';
+import {
+ fetchQualificationOverview,
+ fetchKpi,
+ fetchRegionDistribution,
+ fetchProcessOverview,
+ fetchEvalTypeTrend,
+ fetchReviewSummary,
+ fetchProjectMonitor,
+} from '~/api/supervision';
echarts.registerMap('chongqing', chongqingGeoJson);
@@ -34,6 +40,87 @@ const iconMap = [
ContainerOutlined,
];
+// 将 mock 数据转为 API 结构，作为初始值
+function buildInitialFromMock(m) {
+ return {
+ title: m.title,
+ currentTime: m.currentTime,
+ lifecycleStats: {
+ newFilingOrgCount: m.lifecycleStats[0]?.value || 0,
+ currentFilingOrgCount: m.lifecycleStats[1]?.value || 0,
+ logoutOrgCount: m.lifecycleStats[2]?.value || 0,
+ totalFilingOrgCount: m.lifecycleStats[3]?.value || 0,
+ exitedEvaluatorCount: m.lifecycleStats[4]?.value || 0,
+ currentEvaluatorCount: m.lifecycleStats[5]?.value || 0,
+ },
+ progress: {
+ filingCompleteRate: m.progress[0]?.value || 0,
+ bizActiveRate: m.progress[1]?.value || 0,
+ newGrowthRate: m.progress[2]?.value || 0,
+ },
+ industryList: m.industry.map((item, i) => ({
+ industryCode: String(i + 1),
+ industryName: item.name,
+ orgCount: item.institution,
+ typeCount: item.rectification,
+ })),
+ riskItems: m.riskItems,
+ riskPie: m.riskPie,
+ kpiItems: m.kpis.map(k => ({
+ code: '',
+ name: k.title,
+ value: parseFloat(k.value),
+ yoy: parseFloat(k.change),
+ })),
+ regionList: m.mapAreaStats
+ .filter(item => item.name !== '重庆市')
+ .map(item => ({
+ districtCode: '',
+ districtName: item.name,
+ evalProjectCount: item.projectCount,
+ filingOrgCount: item.institutionCount,
+ })),
+ regionSummary: {
+ totalEvalProject: m.mapAreaStats.find(s => s.name === '重庆市')?.projectCount || 0,
+ totalFilingOrg: m.mapAreaStats.find(s => s.name === '重庆市')?.institutionCount || 0,
+ },
+ mapScatterPoints: m.mapScatterPoints,
+ processNodes: m.todo.map((item, i) => ({
+ nodeCode: `NODE_${i}`,
+ nodeName: item.label,
+ totalCount: 0,
+ pendingCount: item.value,
+ })),
+ trendBuckets: m.reviewLine.xAxis,
+ trendSeries: [
+ { evalTypeCode: '', evalTypeName: '项目数', projectCounts: m.reviewLine.project, inspCounts: [] },
+ { evalTypeCode: '', evalTypeName: '监督检查数', projectCounts: m.reviewLine.supervision, inspCounts: [] },
+ ],
+ reviewStats: {
+ inspCount: m.reviewProgress[0]?.value || 0,
+ onsiteCheckCount: m.reviewProgress[0]?.value || 0,
+ qualKeepCount: 0,
+ specialCount: 0,
+ checkedOrgCount: m.reviewProgress[4]?.value || 0,
+ foundProblemCount: m.reviewProgress[5]?.value || 0,
+ },
+ reviewPieItems: m.reviewPie.map(item => ({
+ code: '',
+ name: item.name,
+ value: item.value,
+ })),
+ // 项目流程 mock 所用（基于 processOverview API nodes 结构）
+ processMockNodes: m.process.map((item, i) => ({
+ nodeCode: `NODE_${i}`,
+ nodeName: item.label,
+ totalCount: item.value,
+ pendingCount: 0,
+ })),
+ };
+}
+
+// ==================== 子组件 ====================
+
function EChart({ option, className, events }) {
const chartRef = useRef(null);
const instanceRef = useRef(null);
@@ -96,7 +183,25 @@ function Panel({ title, children, className = '' }) {
);
}
+// ==================== 资质全生命周期管理 ====================
function LifecyclePanel({ data }) {
+ const { lifecycleStats, progress, industryList } = data;
+
+ const statItems = useMemo(() => [
+ { label: '本年新增备案机构数', value: lifecycleStats.newFilingOrgCount },
+ { label: '当前备案机构数', value: lifecycleStats.currentFilingOrgCount },
+ { label: '本年注销机构数', value: lifecycleStats.logoutOrgCount },
+ { label: '全部备案机构数', value: lifecycleStats.totalFilingOrgCount },
+ { label: '退出备案评价师数', value: lifecycleStats.exitedEvaluatorCount },
+ { label: '当前备案评价师数', value: lifecycleStats.currentEvaluatorCount },
+ ], [lifecycleStats]);
+
+ const progressItems = useMemo(() => [
+ { label: '评价机构备案完成率', value: progress.filingCompleteRate, color: '#21d8ff' },
+ { label: '备案机构开展业务率', value: progress.bizActiveRate, color: '#18f7d2' },
+ { label: '备案机构新增率', value: progress.newGrowthRate, color: '#ffd11a' },
+ ], [progress]);
+
const barOption = useMemo(() => ({
color: ['#1aa7ff', '#d7a92c'],
grid: { left: 28, right: 10, top: 20, bottom: 42 },
@@ -104,7 +209,7 @@ function LifecyclePanel({ data }) {
tooltip: { trigger: 'axis', backgroundColor: 'rgba(3, 25, 66, .92)', borderColor: '#1aa7ff', textStyle: { color: '#dff7ff' } },
xAxis: {
type: 'category',
- data: data.industry.map(item => item.name),
+ data: industryList.map(item => item.industryName),
axisLabel: { color: '#b9cfff', fontSize: 10, interval: 0, rotate: 0, width: 38, overflow: 'break' },
axisLine: { lineStyle: { color: '#17416e' } },
axisTick: { show: false },
@@ -115,15 +220,15 @@ function LifecyclePanel({ data }) {
splitLine: { lineStyle: { color: 'rgba(78, 143, 219, .2)', type: 'dashed' } },
},
series: [
- { name: '类型数', type: 'bar', stack: 'total', barWidth: 14, data: data.industry.map(item => item.rectification) },
- { name: '机构数', type: 'bar', stack: 'total', barWidth: 14, data: data.industry.map(item => item.institution) },
+ { name: '类型数', type: 'bar', stack: 'total', barWidth: 14, data: industryList.map(item => item.typeCount) },
+ { name: '机构数', type: 'bar', stack: 'total', barWidth: 14, data: industryList.map(item => item.orgCount) },
],
- }), [data.industry]);
+ }), [industryList]);
return (
- {data.lifecycleStats.map((item, index) => (
+ {statItems.map((item) => (
@@ -131,7 +236,7 @@ function LifecyclePanel({ data }) {
))}
- {data.progress.map(item => (
+ {progressItems.map(item => (
{item.label}
@@ -144,6 +249,7 @@ function LifecyclePanel({ data }) {
);
}
+// ==================== 风险预警（仍用 mock，无 API） ====================
function RiskPanel({ data }) {
const pieOption = useMemo(() => ({
color: ['#5f8cff', '#e96fff', '#5fd8ae', '#b6a0ff'],
@@ -164,29 +270,64 @@ function RiskPanel({ data }) {
);
}
+// ==================== KPI 指标卡片 ====================
function KpiCards({ data }) {
- return
{data.kpis.map(item =>
{item.title}
{item.value}同比 ↗ {item.change})}
;
+ const { kpiItems } = data;
+ return (
+
+ {kpiItems.map(item => (
+
+
{item.name}
+
{item.value}%
+
同比 ↗ {item.yoy}%
+
+ ))}
+
+ );
}
+// ==================== 地图区域分布 ====================
function MapSection({ data }) {
const [selectedAreaName, setSelectedAreaName] = useState('重庆市');
- const statMap = useMemo(() => new Map(data.mapAreaStats.map(item => [item.name, item])), [data.mapAreaStats]);
+ const { regionList, regionSummary, mapScatterPoints } = data;
+
+ const statMap = useMemo(() => {
+ const map = new Map();
+ regionList.forEach(item => {
+ map.set(item.districtName, {
+ name: item.districtName,
+ districtCode: item.districtCode,
+ evalProjectCount: item.evalProjectCount,
+ filingOrgCount: item.filingOrgCount,
+ });
+ });
+ return map;
+ }, [regionList]);
+
const mapData = useMemo(() => {
return (chongqingGeoJson.features || []).map((feature, index) => {
const name = feature.properties && feature.properties.name;
const stat = statMap.get(name) || {
name,
- value: 18 + index * 7,
- projectCount: 18 + index * 7,
- hiddenDanger: 0,
- institutionCount: 0,
- rectificationRate: '100%',
+ evalProjectCount: 18 + index * 7,
+ filingOrgCount: 0,
+ };
+ return {
+ name,
+ districtCode: stat.districtCode || '',
+ evalProjectCount: stat.evalProjectCount,
+ filingOrgCount: stat.filingOrgCount,
};
- return { ...stat, name };
});
}, [statMap]);
- const selectedArea = statMap.get(selectedAreaName) || mapData[0] || data.mapAreaStats[0];
- const values = mapData.map(item => Number(item.value) || 0);
+
+ const selectedArea = useMemo(() => {
+ if (selectedAreaName === '重庆市') {
+ return { name: '重庆市', evalProjectCount: regionSummary.totalEvalProject, filingOrgCount: regionSummary.totalFilingOrg };
+ }
+ return statMap.get(selectedAreaName) || { name: selectedAreaName, evalProjectCount: 0, filingOrgCount: 0 };
+ }, [selectedAreaName, statMap, regionSummary]);
+ const values = mapData.map(item => Number(item.evalProjectCount) || 0);
const maxValue = Math.max(...values, 100);
const mapOption = useMemo(() => ({
@@ -202,10 +343,8 @@ function MapSection({ data }) {
if (!item) return params.name;
return [
`
${params.name}`,
- `评价项目数：${item.projectCount || item.value || 0}`,
- `备案机构数：${item.institutionCount || 0}`,
- `隐患数量：${item.hiddenDanger || 0}`,
- `整改率：${item.rectificationRate || '-'}`,
+ `评价项目数：${item.evalProjectCount || 0}`,
+ `备案机构数：${item.filingOrgCount || 0}`,
].join('
');
},
},
@@ -249,7 +388,11 @@ function MapSection({ data }) {
map: 'chongqing',
geoIndex: 0,
selectedMode: 'single',
- data: mapData.map(item => ({ ...item, selected: item.name === selectedAreaName })),
+ data: mapData.map(item => ({
+ ...item,
+ value: item.evalProjectCount,
+ selected: item.name === selectedAreaName,
+ })),
},
{
name: '重点乡镇',
@@ -259,10 +402,10 @@ function MapSection({ data }) {
symbolSize: value => Math.max(8, Math.min(18, value[2] / 4)),
itemStyle: { color: '#12f4ff', shadowBlur: 10, shadowColor: '#12f4ff' },
label: { show: false },
- data: data.mapScatterPoints.map(item => ({ name: item.name, value: [...item.coord, item.value] })),
+ data: mapScatterPoints.map(item => ({ name: item.name, value: [...item.coord, item.value] })),
},
],
- }), [data.mapScatterPoints, mapData, maxValue, selectedAreaName, statMap]);
+ }), [mapData, maxValue, selectedAreaName, statMap, mapScatterPoints]);
const mapEvents = useMemo(() => ({
click: params => {
@@ -273,84 +416,229 @@ function MapSection({ data }) {
return (
- {data.mapScatterPoints.map((item, index) =>
{item.name}正在开展评价项目数：{item.value}
)}
+ {mapScatterPoints.map((item, index) =>
{item.name}正在开展评价项目数：{item.value}
)}
- {selectedArea && selectedArea.name}
- 项目数：{selectedArea && (selectedArea.projectCount || selectedArea.value)}
- 隐患：{selectedArea && selectedArea.hiddenDanger}
- 整改率：{selectedArea && selectedArea.rectificationRate}
+ {selectedArea.name}
+ 项目数：{selectedArea.evalProjectCount}
+ 备案机构数：{selectedArea.filingOrgCount}
);
}
+
+// ==================== 执业全过程管控 ====================
function TodoPanel({ data }) {
+ const { processNodes } = data;
return (
- {data.todo.map((item, index) => {
+ {processNodes.map((item, index) => {
const Icon = iconMap[index] || FileDoneOutlined;
- return
;
+ return
{item.nodeName}
{item.pendingCount};
})}
);
}
+// ==================== 评价类型趋势 ====================
function ReviewLinePanel({ data }) {
- const lineOption = useMemo(() => ({
- color: ['#0da5ff', '#29e487'],
- grid: { left: 34, right: 12, top: 28, bottom: 32 },
- legend: { right: 0, top: 0, itemWidth: 14, itemHeight: 4, textStyle: { color: '#c6dcff', fontSize: 10 } },
- tooltip: { trigger: 'axis', backgroundColor: 'rgba(3, 25, 66, .92)', borderColor: '#1aa7ff', textStyle: { color: '#dff7ff' } },
- xAxis: { type: 'category', boundaryGap: false, data: data.reviewLine.xAxis, axisLabel: { color: '#c6dcff', fontSize: 10 }, axisLine: { lineStyle: { color: '#17416e' } }, axisTick: { show: false } },
- yAxis: { type: 'value', min: 0, max: 100, splitNumber: 5, axisLabel: { color: '#c6dcff', fontSize: 10 }, splitLine: { lineStyle: { color: 'rgba(78, 143, 219, .22)', type: 'dashed' } } },
- series: [
- { name: '项目数', type: 'line', smooth: true, symbolSize: 5, areaStyle: { opacity: .22 }, data: data.reviewLine.project },
- { name: '监督检查数', type: 'line', smooth: true, symbolSize: 5, areaStyle: { opacity: .14 }, data: data.reviewLine.supervision },
- ],
- }), [data.reviewLine]);
- return
年季月
;
+ const { trendBuckets, trendSeries } = data;
+
+ const lineOption = useMemo(() => {
+ const seriesConfig = trendSeries.map(s => ({
+ name: s.evalTypeName,
+ type: 'line',
+ smooth: true,
+ symbolSize: 5,
+ areaStyle: { opacity: .22 },
+ data: s.projectCounts,
+ }));
+ return {
+ color: ['#0da5ff', '#29e487', '#ffb74d', '#ce93d8', '#4dd0e1', '#f48fb1'],
+ grid: { left: 34, right: 12, top: 28, bottom: 32 },
+ legend: { right: 0, top: 0, itemWidth: 14, itemHeight: 4, textStyle: { color: '#c6dcff', fontSize: 10 } },
+ tooltip: { trigger: 'axis', backgroundColor: 'rgba(3, 25, 66, .92)', borderColor: '#1aa7ff', textStyle: { color: '#dff7ff' } },
+ xAxis: { type: 'category', boundaryGap: false, data: trendBuckets, axisLabel: { color: '#c6dcff', fontSize: 10 }, axisLine: { lineStyle: { color: '#17416e' } }, axisTick: { show: false } },
+ yAxis: { type: 'value', min: 0, max: 100, splitNumber: 5, axisLabel: { color: '#c6dcff', fontSize: 10 }, splitLine: { lineStyle: { color: 'rgba(78, 143, 219, .22)', type: 'dashed' } } },
+ series: seriesConfig,
+ };
+ }, [trendBuckets, trendSeries]);
+
+ return (
+
+ 年季月
+
+
+ );
}
+// ==================== 复盘评估改进提效 ====================
function ReviewProgressPanel({ data }) {
+ const { reviewStats, reviewPieItems } = data;
+
+ const statItems = useMemo(() => [
+ { label: '监督检查总数', value: reviewStats.inspCount },
+ { label: '项目过程检查数', value: reviewStats.onsiteCheckCount },
+ { label: '资质保持检查数', value: reviewStats.qualKeepCount },
+ { label: '专项检查数', value: reviewStats.specialCount },
+ { label: '检查机构数', value: reviewStats.checkedOrgCount },
+ { label: '发现问题数', value: reviewStats.foundProblemCount },
+ ], [reviewStats]);
+
const pieOption = useMemo(() => ({
color: ['#1677ff', '#00c089', '#ff7a1a', '#f7cb16', '#ab5fde'],
tooltip: { trigger: 'item', backgroundColor: 'rgba(3, 25, 66, .92)', borderColor: '#1aa7ff', textStyle: { color: '#dff7ff' } },
legend: { orient: 'vertical', right: 0, top: 'center', itemWidth: 10, itemHeight: 8, textStyle: { color: '#c6dcff', fontSize: 10 } },
- series: [{ type: 'pie', radius: ['32%', '68%'], center: ['28%', '56%'], label: { show: false }, data: data.reviewPie }],
- }), [data.reviewPie]);
+ series: [{ type: 'pie', radius: ['32%', '68%'], center: ['28%', '56%'], label: { show: false }, data: reviewPieItems.map(item => ({ name: item.name, value: item.value })) }],
+ }), [reviewPieItems]);
return (
- {data.reviewProgress.map(item =>
{item.label}：{item.value}
)}
+ {statItems.map(item =>
{item.label}：{item.value}
)}
+
);
}
+// ==================== 项目流程 ====================
function ProcessPanel({ data }) {
+ const { processNodes } = data;
return (
- {data.process.map((item, index) =>
{item.value}{item.label}{index < data.process.length - 1 && }
)}
+ {processNodes.map((item, index) => (
+
+ {item.totalCount}
+ {item.nodeName}
+ {index < processNodes.length - 1 && }
+
+ ))}
+
);
}
+// ==================== 主组件 ====================
export default function SupervisionCockpit() {
- const data = cockpitMockData;
+ const [data, setData] = useState(() => buildInitialFromMock(cockpitMockData));
+
+ // 取当前年份/月份
+ const currentYear = useMemo(() => new Date().getFullYear(), []);
+ const currentMonth = useMemo(() => {
+ const d = new Date();
+ return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
+ }, []);
+
+ // 标记是否使用 API 数据（仅当对应 API 成功时为 true）
+ const [apiFlags, setApiFlags] = useState({
+ qualification: false,
+ process: false,
+ });
+
+ useEffect(() => {
+ // 1. 资质全生命周期管理
+ fetchQualificationOverview(currentYear)
+ .then((apiData) => {
+ setData(prev => ({
+ ...prev,
+ lifecycleStats: apiData.lifecycleStats || prev.lifecycleStats,
+ progress: apiData.progress || prev.progress,
+ industryList: apiData.industryList || prev.industryList,
+ }));
+ setApiFlags(prev => ({ ...prev, qualification: true }));
+ })
+ .catch(() => { /* 接口异常，沿用 mock 数据 */ });
+
+ // 2. 核心 KPI
+ fetchKpi('year', currentYear)
+ .then((apiData) => {
+ if (apiData.items && apiData.items.length > 0) {
+ setData(prev => ({ ...prev, kpiItems: apiData.items }));
+ }
+ })
+ .catch(() => {});
+
+ // 3. 区域地图分布
+ fetchRegionDistribution()
+ .then((apiData) => {
+ setData(prev => ({
+ ...prev,
+ regionList: apiData.list || prev.regionList,
+ regionSummary: apiData.summary || prev.regionSummary,
+ }));
+ })
+ .catch(() => {});
+
+ // 4. 执业全过程管控 + 项目流程
+ fetchProcessOverview()
+ .then((apiData) => {
+ if (apiData.nodes && apiData.nodes.length > 0) {
+ setData(prev => ({ ...prev, processNodes: apiData.nodes }));
+ setApiFlags(prev => ({ ...prev, process: true }));
+ }
+ })
+ .catch(() => {});
+
+ // 5. 评价类型趋势
+ fetchEvalTypeTrend('month', currentYear)
+ .then((apiData) => {
+ setData(prev => ({
+ ...prev,
+ trendBuckets: apiData.buckets || prev.trendBuckets,
+ trendSeries: apiData.series || prev.trendSeries,
+ }));
+ })
+ .catch(() => {});
+
+ // 6. 复盘评估改进提效
+ fetchReviewSummary(currentYear)
+ .then((apiData) => {
+ setData(prev => ({
+ ...prev,
+ reviewStats: apiData.stats || prev.reviewStats,
+ reviewPieItems: apiData.pie || prev.reviewPieItems,
+ }));
+ })
+ .catch(() => {});
+
+ // 7. 项目实时监控（当前暂无对应面板，仅预取）
+ fetchProjectMonitor(currentMonth)
+ .catch(() => {});
+ }, [currentYear, currentMonth]);
+
+ // 项目流程面板数据：API 有值时用 processNodes，否则用 mock processMockNodes
+ const processPanelNodes = useMemo(() => {
+ if (apiFlags.process && data.processNodes && data.processNodes.length > 0) {
+ return data.processNodes;
+ }
+ return data.processMockNodes || data.processNodes || [];
+ }, [apiFlags.process, data.processNodes, data.processMockNodes]);
+
return (
);
}
-
-
diff --git a/src/utils/resolveDriverAuthParams.js b/src/utils/resolveDriverAuthParams.js
index 2de7e43..48add2b 100644
--- a/src/utils/resolveDriverAuthParams.js
+++ b/src/utils/resolveDriverAuthParams.js
@@ -96,3 +96,32 @@ export function resolveDriverAuthParams() {
export function getDriverToken() {
return resolveDriverAuthParams().token || window.sessionStorage.getItem("token");
}
+
+const PAGE_MODE_KEY = "driverPageMode";
+
+/**
+ * 页面开关变量：
+ * 1 — 请求 checkTerminalType，由接口决定展示哪个页面（默认行为）
+ * 2 — 跳过接口请求，直接展示监管端驾驶舱
+ * 3 — 跳过接口请求，直接展示机构首页
+ *
+ * 优先级：URL 参数 pageMode > sessionStorage > 默认值 1
+ * 通过 URL 参数设置时会自动写入 sessionStorage 持久化。
+ */
+export function getPageMode() {
+ try {
+ const searchParams = new URLSearchParams(window.location.search);
+ const urlMode = Number(searchParams.get("pageMode"));
+ if (urlMode === 1 || urlMode === 2 || urlMode === 3) {
+ window.sessionStorage.setItem(PAGE_MODE_KEY, String(urlMode));
+ return urlMode;
+ }
+ } catch {
+ // ignore
+ }
+ const storedMode = Number(window.sessionStorage.getItem(PAGE_MODE_KEY));
+ if (storedMode === 1 || storedMode === 2 || storedMode === 3) {
+ return storedMode;
+ }
+ return 1;
+}