自定义表格架构实现多维数据动态渲染

最新推荐文章于 2024-08-25 15:04:13 发布

燕云长风

最新推荐文章于 2024-08-25 15:04:13 发布

阅读量440

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/m0_37050947/article/details/90020974

版权

本文介绍了作者在XXX市公安交通智能指挥中心项目中的实践经验，涉及大队排班管理、勤务考核统计和人员甘特图三个模块的开发。详细阐述了排班管理的复杂数据结构处理，以及各个功能页面的实现。同时，提供了部分在线效果截图，以展示系统实际运行情况。此外，提到了作者的个人博客和参与的其他开源项目。

摘要由CSDN通过智能技术生成

自定义表格架构实现多维数据动态渲染

你好，我是燕云长风。
寓意：结合李白著名的边塞诗《关山月》取【 燕云长风】—— 长风几万里，吹度玉门关。

那是一年春天，正当北京春暖花开的时候，我踏上了北上的列车，雪花飘飘、北风萧萧，前往XXX市公安交通智能指挥中心参加一个合同金额为3亿的项目~XXX市公安交通智能化管控系统的研发。

在此，我做了三大模块：

1.大队排班管理模块

2.勤务考核统计模块

3.人员甘特图模块

其中大队排班管理是所有模块中最复杂的，排班分为四个层次结构，星期、时间、岗位、警员/警车，前台数据结构和后台数据结构分离，用适配器处理。因为数据结构很复杂，业务需要透明化来操作数据，分离数据结构，简化业务逻辑。

为了方便大家更加直观了解，我截取了一组在线效果运行图：

大队排班管理

这是排班管理主页面，根据人员权限显示不同的操作选项，此处列出所有功能项

这是点击修改选项后进入大队下属中队添加排班页面

这是中队排班修改页面

点击某天某个时段弹出人员、警车列表修改页面

人员甘特图

这是人员甘特图页面

勤务考核统计

这是勤务考核统计页面

接下来给大家展示一下数据部分：这是其中的一条数据，有些长
var duty = {
  "grouyId":"0293",
  "startDate":"2019-03-07",
  "endDate":"2019-03-14",
  "audit":{},
  "list":[
    {
      "dutyItem":
      {
        "dutyItemId":"1",
        "org":{"val":"一中队","key":"1","dataType":"simple"},
        "leader":{"val":"张三","key":"12","dataType":"simple"},
        "postType":{"val":"固定岗","key":"122","dataType":"simple"},
        "post":{"val":"省政府岗","key":"132","dataType":"simple"},
        "interval":{"val":"固五","key":"152","dataType":"simple"},
        "monday":[
          {
            "index":"2",
            "timeName":"固午",
            "timeId":"1203",
            "timeValue":"07:00-09:00",
            "operatorIds":["013215"],
            "operatorNames":["张三"]
          },
          {
            "index":"3",
            "timeName":"固晌",
            "timeId":"1203",
            "timeValue":"07:00-09:00",
            "operatorIds":["013215","013268"],
            "operatorNames":["马七","牛八"]
          },
          {
            "index":"4",
            "timeName":"固晚",
            "timeId":"1203",
            "timeValue":"07:00-09:00",
            "operatorIds":["013215","013268"],
            "operatorNames":["马1","牛2"]
          },
          {
            "index":"1",
            "timeName":"固早",
            "timeId":"1203",
            "timeValue":"07:00-09:00",
            "operatorIds":["013215","013268"],
            "operatorNames":["王五","六六"]
          },
          {
            "index":"5",
            "timeName":"固夜",
            "timeId":"1203",
            "timeValue":"07:00-09:00",
            "operatorIds":["013215","013268"],
            "operatorNames":["横七","树八"]
          }
        ],
        "tuesday":[
          {
            "index":"2",
            "timeName":"固午",
            "timeId":"1203",
            "timeValue":"07:00-09:00",
            "operatorIds":["013215","013268"],
            "operatorNames":["张三","李四"]
          },
          {
            "index":"4",
            "timeName":"固晚",
            "timeId":"1203",
            "timeValue":"07:00-09:00",
            "operatorIds":["013215","013268"],
            "operatorNames":["马1","牛2"]
          },
          {
            "index