小智报表实战I_轻松玩转中国式复杂报表-3 分栏报表

小智数据

已于 2024-08-08 09:09:42 修改

阅读量640

点赞数 15

分类专栏：小智报表实战系列--解决中国式复杂报表需求文章标签： javascript html5 vscode json 前端框架信息可视化低代码

于 2024-07-10 15:46:23 首次发布

本文链接：https://blog.csdn.net/tianzhi2016/article/details/140325313

版权

小智报表实战系列--解决中国式复杂报表需求专栏收录该内容

10 篇文章 2 订阅

订阅专栏

小智报表实战系列I 轻松玩转中国式复杂报表-3 分栏报表

需求背景：体检化验报表(带参数查询)

在医疗信息系统中，分栏报表对于客户体检化验项目的需求主要集中在以下几点：
数据密度与清晰度：化验报告通常包含大量的项目，如血液检查、尿液分析、生化指标等，每一项都需要清晰、准确地显示在报表上，而分栏报表可以帮助在有限的空间内排列更多的项目而不牺牲可读性。
对比与分析：医生和实验室工作人员需要快速对比不同样本或同一患者在不同时间点的化验结果，分栏报表通过将相关数据并排显示，便于进行直观的比较分析。
规范化输出：化验报告需要遵循一定的格式标准，分栏报表可以确保所有项目按照规定的顺序和格式呈现，便于统一管理和存档。
灵活性与定制化：不同的科室或医疗机构可能有不同的报告需求，分栏报表应支持自定义栏目数量、宽度和排序，以适应特定的工作流程。
在这里插入图片描述

报表难点

主子表
子表分栏

小智报表解决方案

小智报表设计器实现要点

脚本嵌入接口实现

<link rel="stylesheet" href="/xzreport.css">
<script type="module" src="/xzreportdesigner.js"></script>
const dataset = [ //  添加数据集按钮
  { id: 1,value: "新建Json数据集"  },
  { id: 2,value: "新建Http接口数据集" },
  { id: 3,value: "API服务数据集"  },
  { id: 4,value: "外部数据集"  }];
const options = {
  row: 100,  col: 25,
  width: () => document.documentElement.clientWidth,
  renderArrow: true,  // 是否显式 扩展方向图标
  showFreeze: true,  // 是否显式冻结线
  showGrid: true,   // 是否显式网格线
  showPreviewToolbar: true,
  showBottombar: true,
  showSelect: true,
  dataset
}
const _onUpdateDatasetList = 
[
  {
    "name": "检验报告单",
    "id": "检验报告单",
    "type": 4,
    "columns": [
      {"name": "bgd_id",      "data_type": "3"   },      {"name": "姓名",        "data_type": "3"      },
      {"name": "科别",        "data_type": "3"   },       { "name": "病人类别",   "data_type": "3"   },
      {"name": "标本号",      "data_type": "3"   },       {  "name": "性别",      "data_type": "3"      },
      {"name": "送检医师",    "data_type": "3"   },       {  "name": "标本类型",   "data_type": "3"    },
      {"name": "病历号",      "data_type": "3"   },       {  "name": "年龄",       "data_type": "3"      },
      {"name": "床号",        "data_type": "3"    },      { "name": "临床诊断",    "data_type": "3"    },
      {"name": "备注",        "data_type": "3"    },      { "name": "送检时间",     "data_type": "3"   },
      {"name": "检查时间",    "data_type": "3"    },       { "name": "检验者",      "data_type": "3"      },
      {"name": "审核者",      "data_type": "3"    },       {  "name": "报告时间",    "data_type": "3"    },
      {"name": "注意",        "data_type": "3"     }   ],
    "params": [      {        "name": "bgd_id",        "data_type": "3"      }    ]  },
  {
    "name": "检验项目",
    "id": "检验项目",
    "type": 4,
    "columns": [
      { "name": "bgd_id",     "data_type": "3"  },      { "name": "序号",        "data_type": "3"      },
      { "name": "项目名称",    "data_type": "3"  },      {  "name": "结果",       "data_type": "3"      },
      { "name": "单位",        "data_type": "3"  },      { "name": "参考值",      "data_type": "3"      }    ],
    "params": [      {        "name": "bgd_id",        "data_type": "3"      }    ]
  }
]
options.onUpdateDatasetList =  () => {
  return new Promise((resolve, reject) => {//Promise 异步回调
    resolve(_onUpdateDatasetList);// 返回后台获取的数据集列表
  })
}
onMounted(() => {// 页面加载时,初始化报表设计器
  sheetDesign = XZReportDesigner("#action_8_1_main", options);
})

类excel报表设计 = 自由拖拽(低代码) + 极简配置

在这里插入图片描述

数据保存

const {config, data} = sheetDesign.getData(); //报表设计器的保存事件

报表渲染要点

准备模板和数据

在前面报表设计器的保存数据中，已经提交到业务后台保存；现在只需要axios.get提取config,data这2个json数据

脚本嵌入接口实现

const option = {
  mode: 'read', view: { width: 1920px, height:1080px },   // 设置报表的宽高
  renderArrow: true,  // 是否显式 扩展方向图标
  showFreeze: true,  // 是否显式冻结线
  showGrid: true,   // 是否显式网格线
  showPreviewToolbar: true,  showBottombar: true,  showSelect: true,};
......
onMounted(() => {
....
    //sheetConfig是报表设计器中getData().config
    //data       是报表设计器中getData().data
    spreadSheet = XZReport("#containerxzreport1", option, sheetConfig, data);
....
}
实现数据接口
const onUpdateData = (datasets, params) => {
  console.log("datasets:", datasets, "params:", params);
  return new Promise((resolve, reject) => {
    //假设从axios远程拿到的报表渲染数据放在__updateData中（和getData().data不是一个东西）
    resolve(queryonUpdateDataFrom(datasets, params,__updateData));
  })
}
option.onUpdateData = onUpdateData