报表界面分割拖动

modules/reports/controllers/rpt_controller.js

@@ -34,6 +34,17 @@ let callback = function(req, res, err, data){
     }
 };
 
+const WATERMARK_FONT = {
+    "Name": "宋体",
+    "FontHeight": "32",
+    "FontColor": "CYAN",
+    "FontBold": "T",
+    "FontItalic": "F",
+    "FontUnderline": "F",
+    "FontStrikeOut": "F",
+    "FontAngle": "45"
+};
+
 function getAllPagesCommonOrg(rpt_id, pageSize, option, cb) {
     let rptTpl = null;
     rptTplFacade.getRptTemplate(rpt_id).then(function(rst) {
@@ -348,6 +359,29 @@ function getAllPagesCommon(user_id, prj_id, rpt_id, pageSize, orientation, custo
     })
 }
 
+function fillWaterMark(pageRstArray) {
+    for (const pageRst of pageRstArray) {
+        if (!pageRst[JV.NODE_FONT_COLLECTION].hasOwnProperty('WaterMark')) {
+            pageRst[JV.NODE_FONT_COLLECTION]['WaterMark'] = WATERMARK_FONT;
+        }
+        for (const page of pageRst.items) {
+            const warterCell = {
+                "font": "WaterMark",
+                "control": "NewContent_Center",
+                "style": "Default_None",
+                "Value": "大司空云计价",
+                "area": {
+                    "Left": 300,
+                    "Right": 500,
+                    "Top": 300,
+                    "Bottom": 500
+                }
+            };
+            page.cells.push(warterCell);
+        }
+    }
+}
+
 
 module.exports = {
     getReportAllPages: function (req, res) {

public/web/div_resizer.js

@@ -0,0 +1,109 @@
+'use strict';
+
+/**
+ *
+ * div可拖动调整分栏
+ *
+ * 示例结构：
+ * <div id="top-div"></div>
+ * <div r-Type="height|width" div1="#top-div" div2="#bottom-div" store-id="XXX" store-version="1.0.0" min="100">
+ * <div id="bottom-div"></div>
+ *
+ * 其中：
+ * r-Type: height表示上下拖动调整, width表示左右拖动调整
+ * div1: 上（左）部结构的id
+ * div2: 下（右）部结构的id
+ * store-id：可选，存在则以该值生成key，将调整结果写入localStorage
+ * min: 可选，无则默认两部分结构相加的10%
+ *
+ * setting: {select, callback}
+ * 其中：
+ * select：选定分栏
+ * callback：回调（除了上述两个div外需要调整的，自定义放在此处）
+ *
+ * @author Mai
+ * @date 2019/3/15
+ * @version
+ */
+
+(function($){
+    $.divResizer = function(setting) {
+        const obj = $(setting.select);
+        let drag, mouseMoveCount, startPos, orgSize1, orgSize2, newSize1, newSize2, objSize;
+        // if (obj.attr('r-type') === 'height') {
+        //     obj.css('width', '100%').css('height', '1%').css('resize', 'vertical').css('cursor', 's-resize').css('float', 'top');
+        // } else {
+        //     obj.css('width', '1%').css('height', '100%').css('resize', 'horizontal').css('cursor', 'w-resize').css('float', 'left');
+        // }
+        // 根据localStorage初始化
+        if (obj.attr('store-id')) {
+            const rType = obj.attr('r-type'), version = obj.attr('store-version') ? ('-'+obj.attr('store-version')) : '' ;
+            const objSize1 = getLocalCache('v-resize-1-' + obj.attr('store-id') + version);
+            if (objSize1) {
+                $(obj.attr('div1')).css(rType, objSize1);
+            }
+            const objSize2 = getLocalCache('v-resize-2-' + obj.attr('store-id') + version);
+            if (objSize2) {
+                $(obj.attr('div2')).css(rType, objSize2);
+            }
+            if (setting.callback) { setting.callback(); }
+        }
+
+        obj.mousedown(function (e) {
+            const rType = obj.attr('r-type');
+            mouseMoveCount = 0;
+            drag = true;
+            startPos = rType === 'height' ? e.clientY : e.clientX;
+            // 获取左(上)部分的宽度(高度)
+            orgSize1 = $($(this).attr('div1'))[rType]();
+            // 获取右(下)部分的宽度(高度)
+            orgSize2 = $($(this).attr('div2'))[rType]();
+            // nav宽(高度)部分
+            objSize = $(this)[rType]();
+            //resizeElement.tooltip('hide');
+
+        });
+        $('body').mousemove(function (e) {
+            if (drag) {
+                const rType = obj.attr('r-type'), aType = obj.attr('a-type');
+                const moveSize = rType === 'height' ? e.clientY - startPos : e.clientX - startPos;
+                //实时刷新页面
+                mouseMoveCount += moveSize;
+                //当累计移动超过5个像素时，才刷新，减少刷新次数
+                if(Math.abs(mouseMoveCount) >= 5){
+                    if (aType === 'percent') {
+                        const min = obj.attr('min') ? obj.attr('min') : 10;
+                        const max = 100 - min;
+
+                        const percent1 = Math.min(Math.max((orgSize1 + moveSize) / (orgSize1 + orgSize2) * 100, min), max);
+                        $(obj.attr('div1')).css(rType, percent1 + '%');
+                        const percent2 = Math.min(Math.max((orgSize2 - moveSize) / (orgSize1 + orgSize2) * 100, min), max);
+                        $(obj.attr('div2')).css(rType, percent2 + '%');
+                    } else {
+                        const min = obj.attr('min') ? obj.attr('min') : parseInt(((orgSize1 + orgSize2) / 10).toFixed(0));
+                        const max = orgSize1 + orgSize2 - min;
+
+                        // 判断拖动范围不能超出
+                        newSize1 = Math.min(Math.max(orgSize1 + moveSize, min), max);
+                        newSize2 = Math.min(Math.max(orgSize2 - moveSize, min), max);
+
+                        $(obj.attr('div1'))[rType](newSize1);
+                        $(obj.attr('div2'))[rType](newSize2);
+                    }
+
+                    if(setting.callback) { setting.callback(); }
+                    mouseMoveCount = 0;
+                }
+            }
+        });
+        $('body').mouseup(function () {
+            if (drag) {
+                drag = false;
+                const rType = obj.attr('r-type');
+                const localId = obj.attr('store-id'), div1 = $(obj.attr('div1')), div2 = $(obj.attr('div2'));
+                setLocalCache('v-resize-1-' + localId, div1[rType]());
+                setLocalCache('v-resize-2-' + localId, div2[rType]());
+            }
+        });
+    }
+})(jQuery);

web/building_saas/report/html/rpt_main.html

@@ -1,7 +1,7 @@
-
+<script type="text/javascript" src="/public/web/div_resizer.js"></script>
 <div class="container-fluid">
     <div class="row">
-        <div class="col-lg-3 p-0">
+        <div class="col-auto pr-0" id="tree-view" style="width: 20%">
             <div class="print-list">
                 <!--
                 <div class="list-tools d-flex justify-content-center">
@@ -14,7 +14,8 @@
                 </div>
             </div>
         </div>
-        <div class="col-lg-9 p-0">
+        <div class="col-auto" id="main-view" style="width: 80%">
+            <div class="resize-x" id="right-spr" r-Type="width" div1="#tree-view" div2="#main-view" title="调整大小" a-type="percent"><!--调整左右高度条--></div>
             <div class="toolsbar-f d-flex justify-content-between">
                 <div class="print-toolsbar">
                     <div class="panel">
@@ -127,4 +128,10 @@
         }
         return SCREEN_DPI;
     }
+    $.divResizer({
+        select: '#right-spr',
+        callback: function () {
+            autoFlashHeight();
+        }
+    });
 </script>