Dashborad 页面开发记录

Posted on |

最大存储的monitor数目：50

1
var MaxMonitorNumber = 50;

使用 CookieInOne 存储已经打开的taskObj（大小有限，大概4K）
使用 LocalStorageInOne 存储已经打开的taskObj（IE8+，大小可达5M）
使用 LocalStorageInOne 存储当前页面的布局“快照”

需要浏览器打开cookie和localStoarge，并且浏览器设置为”退出不清理数据”

基于“快照”的页面布局存储

需求:

保留页面关闭前的打开monitor，保留其布局位置，不管任务是否删除，其占位都应该存在。

  • 快照内容：

    • Wall: freeWall添加的style和布局状态
    • Brick: freeWall添加的style和布局状态，其他内容是空壳，在页面载入后重新填充菜单、canvas等
    • monitorStatus: 各个monitor的图形大小和图形类型
      用于再次进入页面后更新默认monitor菜单

  • 快照收集函数 collectDashboardWallDiv 调用

    • 页面响应式布局的回调 onComplete
    • monitor删除的回调 registerDeleteTaskMonitorCallback
      应对所有monitor删除后没有brick，页面不会回调onComplete的情况

  • 快照释放

    • 进入页面时

    • 不要使用 outerHTML, outerHTML替换 #dashboardwall 的HTML文本，会返回一个新的DOM对象，使得依靠#dashboardwall初始化的 freeWall 只能在所有快照替换后才能初始化，正常情况下 freeWall 可以独立初始化

    1
    2
    3
    4
    5
    6
    7
    8
    function releaseDashboardwall() {
      var dashboardWallDiv = dashboardWallCookie.getItemArray()[0];
      if (dashboardWallDiv) {
        var dashboardWall = $('#dashboardwall');
        var sotred = $(dashboardWallDiv);
        dashboardWall[0].innerHTML = sotred[0].innerHTML; // 不要使用 outerHTML
      }
    }
    • defaultMonitorStatus
      从浏览器存储中获取各个monitor的默认菜单，在addTaskMonitor中填充菜单

基于 freeWall的页面响应式布局

  • freeWall

    • 特性

      • 可拖拽
      • 响应式布局
      • 多种布局风格等等
        -

    • 文档没提但是重要

      • freeWall会在brick中修改style和添加data-* 的标识，例如：data-position，data-handle等,用于标识brick的状态。

      • brick用户不能设置id,因为freeWall会给brick添加id属性，覆盖用户的设置。

      • 拖拽产生的布局优先级最高，brick拖拽后所在坐标位置，不会受fitWidht fitHeight fillHoles等布局变化的影响，需要通过清除brick的data-position来去除拖拽布局的优先级

      • draggable的handle设置方法：brick的data-handle="xxx"，xxx为CSS选择器字段

  • 需求： monitor添加，删除，大小变化，拖拽

  • 实现方案：

    • Brick Default Size：300px - 300px
      300大小是最合适的，再小的话图形太小，再大的话窗口宽度X3可能会不够铺开，然后Brick被收缩为0，Chart绘制抛出异常 
    1
    2
    3
    4
    5
    6
    7
    .dashboardbrick
    {
      ...
      width: 300px;
      height: 300px;
      ...
    }

    • Browser Width： 至少 1024px
      因为每个brick的大小为300px，保证Brick宽度可以X3

    • freeWall配置参数

      • draggabel:true,允许拖动。

      • cellW cellH 设置brick适配的单位长度，为300，则brick宽度为300，600，900等。最好设置与brick默认大小一致，设置太小会导致brick覆盖。

      • fixSize 必须指定，并为0。为0时brick无法改变宽高比例，但是可以改变大小适应窗口。

      • onComplete调用freeWall.fillHoles();,对删除brick后留下的空间进行填补。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    freeWall.reset({
      draggable: true,
      // selector: '.dashboardbrick',
      // animate: true,
      cache: true,
      cellW: defaultMonitorWidth,
      cellH: defalutMonitorHeight,
      delay: 0,
      fixSize: 0,
      gutterX: 15,
      gutterY: 15,
      onResize: function() {
        freeWall.refresh();
      },
      onComplete: function() {
        freeWall.fillHoles();
        collectDashboardWallDiv();
      }
    });

    • 拖拽设置

      • 不使用brick整个可响应拖拽，因为会freeWall会终止点击事件传递，使得图形设置菜单的popup管理无法处理(依赖document.click)；
      • 设置data-handle=".monitortitletext"，使用monitor标题作为拖动handle

  • Brick大小变化

    • 在registerChangeMonitorSizeCallback中处理

      1
      2
      3
      4
      5
      freeWall.fixSize({
        block: element,
        width: newWidth,
        height: newHeight
      });

    • 使用freeWall.fixPos()去除拖拽后的位置优先级，使得可以在图形变化后布局到合适位置
      例如：如果brick是一行中最后一个，宽度X2后，如果不freeWall.fixPos()，该brick会直接在原来位置宽度X2，页面宽度超过窗口宽度，页面宽会变成scroll

      1
      2
      3
      freeWall.fixPos({
        block: element
      });

    • Brick宽度X3操作需要窗口有较大的宽度

  • onResize事件

    • 假设用户不会做resize的操作

    • 再测试

看坑

  • freeWall的CSS padding对于brick无效，brick都是position：absolute，请使用margin

  • outerHTML或返回新的DOM对象,参考Element.outerHTML

    Replaces the element with the nodes generated by parsing the string content with the parent of element as the context node for the fragment parsing algorithm.

扩展

对freeWall源码做了修改：

  • 拓展freeWall.fixPos()方法，不带top或left参数时候，删除brick的位置属性data-position

    1
    2
    3
    freeWall.fixPos({
      block: element
    });

  • setDraggable,移除旧的handle绑定，然后设置新的handle绑定。

完