shield_lock
金大哥
← 返回 Skill 列表
extension
分类: 数据与分析无需 API Key

动态看板(卡片导航)

带导航卡片的动态看板,避免看板要素过多,无法显示重要内容

person作者: user_2caac96ehubcommunity
download下载资源包

动态看板生成器

为工程项目生成单文件自包含HTML数据看板。无需服务器、无需数据库，浏览器直接打开即可使用。

核心流程

  1. 理解需求 → 与用户确认：数据来源、分析维度、使用场景
  2. 选择风格 → 按风格选择指南决策树匹配
  3. 设计布局 → 确定面板/模块数量与内容排布
  4. 生成看板 → 参照设计系统和组件库编写完整HTML
  5. 嵌入数据 → 所有数据直接写入HTML（JS数组/JSON/HTML表格），无外部数据依赖

需求确认清单

生成看板前，至少确认以下4项（可一次性提问）：

  1. 数据内容：有哪些数据字段？数据量多少条？
  2. 分析维度：要看什么？（合格率/异常分布/趋势对比/等级分析/···）
  3. 使用场景：汇报展示 / 管理决策 / 日常查看？
  4. 特殊要求：汇报单位？需要的图表类型？交互需求？

风格速查

| 风格 | 识别特征 | 适用场景 | 用户偏好 | |------|---------|---------|---------| | 风格1 — ECharts导航卡（默认） | 顶部7卡片网格 → 点击切换下方单一内容面板 | 数据可视化、报告型分析、汇报表格 | ⭐ 伍总最常用 | | 风格2 — 手风琴折叠 | 品牌页头 → 模块点击展开/折叠 → 过滤按钮 | 异常排查、复核追踪、管理决策 | 仅特定场景 | | 风格3 — 标签导航 | 深蓝渐变Header → sticky标签栏 → 内容区 | 报告型日常查看 | 一般用风格1替代 |

默认使用风格1，除非用户明确要求折叠式。

详细决策树见 references/style-selection.md。

设计系统

所有看板遵循统一设计语言。核心要素：

  • 主色 #1A3A5C — 标题、表头、导航选中
  • 页面背景 #f0f2f5 — 全局底色
  • 卡片背景 #fff — 内容面板底色
  • 语义绿 #52c41a — 合格/正常
  • 语义红 #ff4d4f — 破坏/报警
  • 语义橙 #faad14 — 警告/关注
  • 字体 Microsoft YaHei, PingFang SC, sans-serif

Header规范（必须遵守）

  • 居中对齐：text-align:center + meta用justify-content:center
  • h1：26px / 加粗700 / #1A3A5C
  • 副标题：16px / #6a7a8a
  • 元数据：15px / #5a6a7a / gap:20px
  • padding：24px 30px

导航卡片规范（必须遵守）

  • sticky置顶：position:sticky;top:0;z-index:100;background:#f0f2f5;padding:10px 0
  • 滚动时导航卡固定在顶部，随时可点击切换
  • 7卡片网格：grid-template-columns:repeat(7,1fr)

图表类型偏好

  • 折线图（line）为默认：所有趋势/对比/分布图优先用折线图
  • 饼图（pie）：仅用于占比分布（如合格率/风险等级占比）
  • 折线图配置：symbol:'circle', symbolSize:8-10, lineStyle:{width:3} + 可选areaStyle:{opacity:0.1}

完整设计令牌见 references/design-system.md。

组件库

所有组件模板（Header、KPI卡片、数据表、结论框、ECharts图表、手风琴模块、过滤按钮、问题卡片等）见 references/component-library.md。

HTML模板

关键铁律

  1. 汇报单位：对外汇报一律写「云南建投」，禁止出现分包单位名称
  2. 版本号：文件名和看板标题中标注 v1/v2/v3 等版本号
  3. 数据嵌入：所有数据直接硬编码在HTML中，不引用外部数据文件
  4. 单文件输出：一个HTML文件包含所有CSS+JS+数据，可直接用浏览器打开
  5. 桌面副本：文件保存到工作目录的同时，复制一份到 C:\Users\Administrator\Desktop\
  6. 不擅自生成：用户没说"生成看板"时，只输出文字，不创建文件
  7. 数据不编造：所有嵌入看板的数据必须来自用户提供的真实数据源

风格1 — ECharts导航卡 工作流（推荐，默认使用）

两阶段生成法（适合大型数据看板）

阶段1：数据提取与分析

1. 读取数据源（Excel/CSV等）→ 提取所有字段
2. 用Python做统计分析 → 计算KPI、分类统计、风险分级
3. 输出统计结果 + data.json（供阶段2使用）

阶段2：HTML模板组装

1. 写入HTML骨架（CSS + Header + 导航卡片 + 占位符）到文件
2. 用Python脚本读取data.json → 生成：
   - 面板HTML（7个面板的全部内容，含统计数字、表格行）
   - JS脚本（ECharts配置 + switchPanel + renderChart）
3. 替换占位符 → 输出完整HTML文件

关键技巧：

  • 用<!-- INSERT_PANELS_HERE -->和<!-- INSERT_SCRIPT_HERE -->做占位符
  • Python用字符串拼接生成HTML，比编辑工具效率高
  • CSS全部内嵌在<style>中，压缩格式节省空间
  • ECharts图表用var charts = {}懒加载，切换到面板才echarts.init()

导航卡片设计（7卡片模板）

卡片1-总览：   异常总览 · 关键指标 + 风险分布
卡片2-概况：   数据概况 · 数据来源 + 筛选标准
卡片3-分布：   桩型分布 · 支护桩/抗浮桩/工程桩   (或其他分类维度)
卡片4-分级：   风险分级 · N级入岩长度分布       (或其他分级维度)
卡片5-关联：   勘探孔关联 · Top8勘探孔分布       (或其他关联维度)
卡片6-问题：   重点问题 · N根高风险桩明细
卡片7-数据：   完整清单 · N根全量数据表

JS代码模式（已验证通过的模板）

var charts = {};  // 所有图表实例存储
function switchPanel(name, el) {
    document.querySelectorAll('.nav-card').forEach(function(c){c.classList.remove('active');});
    el.classList.add('active');
    document.querySelectorAll('.panel-section').forEach(function(p){p.classList.remove('active');});
    document.getElementById('panel-'+name).classList.add('active');
    setTimeout(function(){renderChart(name);}, 50);
}
function renderChart(name) {
    // 饼图：面板overview + 容器chart-pie
    if (name==='overview' && !charts.pie) {
        charts.pie=echarts.init(document.getElementById('chart-pie'));
        charts.pie.setOption({...});
    }
    // 分组折线图：面板type + 容器chart-type
    if (name==='type' && !charts.type) {
        charts.type=echarts.init(document.getElementById('chart-type'));
        charts.type.setOption({...});
    }
    // ...每个面板一个chart容器
    Object.keys(charts).forEach(function(k){charts[k].resize();});
}
renderChart('overview');  // 初始渲染
window.addEventListener('resize', function(){Object.keys(charts).forEach(function(k){charts[k].resize();});});

ECharts配置速查

// 饼图
{type:'pie', radius:['42%','70%'], center:['50%','45%'],
 data:[{name:'标签',value:数值,itemStyle:{color:'#xxx'}}, ...]}

// 分组折线图（多系列）
{legend:{data:['极高','高','中','低']},
 series:[{name:'极高',type:'line',data:[...],symbol:'circle',symbolSize:8,
          lineStyle:{width:3},itemStyle:{color:'#ff4d4f'}}, ...]}

// 单系列折线图（颜色编码）
{type:'line',symbol:'circle',symbolSize:10,lineStyle:{width:3},areaStyle:{opacity:0.1},
 itemStyle:{color:function(p){return['#ff4d4f','#faad14','#5ab1ef','#52c41a'][p.dataIndex]}}}

// Tooltip自定义
{tooltip:{trigger:'axis',formatter:function(p){return p[0].name+'<br/>'+p[0].value+' m';}}}

风格2 — 手风琴折叠 工作流

1. 读模板 → assets/template-style2-accordion.html
2. 设计模块（通常4-5个）：编号、标题、副标题、右侧统计数字
3. 每个模块设计内容：
   - 模块1 → 结论摘要 + KPI指标行
   - 模块2 → 关键问题卡片（红/橙/蓝线）
   - 模块3 → 分布分析（类型构成+分级趋势折线+排行）
   - 模块4 → 重点清单表（含过滤按钮）
4. JS数据数组 + 动态表格渲染 + 过滤逻辑
5. 替换模板占位符，输出完整HTML

JS模式：

var data = [{...}, {...}, ...];
function render(filter) {
    var rows = data.filter(function(x) {
        return filter === '全部' || x.level === filter;
    });
    // 动态生成表格HTML
}
function setFilter(f) { ... }

风格3 — 标签导航 工作流

1. 深蓝渐变Header（`background:linear-gradient(135deg,#1A3A5C 0%,#2c5282 100%)`）
2. Header内：标题行+版本标签+工程信息网格（grid布局）
3. Tab导航栏（sticky置顶）：每个tab含图标+文字
4. 内容区：tab-content面板，默认激活第一个
5. 面板内：KPI卡片 → 监测项目卡片网格 → 结论摘要 → 数据表

常见看板类型速查

| 类型 | 风格 | 关键组件 | 7卡片设计建议 | |------|------|---------|-------------| | 桩基检测报告 | 风格1 | 饼图+折线图+Q-s曲线+全量表 | 总览/概况/等级/位移/曲线/异常/数据 | | 异常桩筛查 | 风格1 | KPI+风险饼图+分级折线图+全量表 | 总览/概况/分布/分级/关联/问题/数据 | | 基坑监测报告 | 风格1 | KPI+测点卡片+结论摘要+数据表 | 总览/概况/最大值/明细/报警/位移/建议 | | 承载力分析 | 风格1 | KPI+等级折线图+破坏分析图+明细表 | 总览/概况/等级/位移/曲线/异常/数据 | | 施工进度 | 风格1 | 进度KPI+里程碑+风险清单 | 总览/进度/里程碑/风险/资源/质量/明细 | | 质量复核 | 风格1 | 问题卡片+分布分析+优先级筛选表 | 总览/概况/分布/分级/关联/问题/数据 |