report template tuning 2017-12-12

web/maintain/report/js/rpt_tpl_cfg_helper.js

@@ -72,6 +72,8 @@ let rpt_tpl_cfg_helper = {
             $("#element_font")[0].style.display = "";
             $("#element_border")[0].style.display = "";
             $("#element_control")[0].style.display = "";
+            $("#element_area_1")[0].style.display = "";
+            $("#element_area_2")[0].style.display = "";
             //setup font
             let fontDom = $("#elementFonts").get(0);
             fontDom.removeAttribute("disabled")
@@ -94,11 +96,15 @@ let rpt_tpl_cfg_helper = {
             idx = me.reportCfg.controlArr.indexOf(ctrlAttr);
             ctrlDom.selectedIndex = idx;
             me.controlChange(ctrlDom);
+            //setup area
+            me.private_setup_area(treeNode);
         } else {
             $("#elementFonts").get(0).disabled = "disabled" ;
             $("#element_font")[0].style.display = "none";
             $("#element_border")[0].style.display = "none";
             $("#element_control")[0].style.display = "none";
+            $("#element_area_1")[0].style.display = "none";
+            $("#element_area_2")[0].style.display = "none";
         }
     },
     fontChange: function(dom) {
@@ -153,6 +159,26 @@ let rpt_tpl_cfg_helper = {
             $("#eleFontUnderline").get(0).checked = stringUtil.convertStrToBoolean(fontAttr.FontUnderline);
         }
     },
+    private_setup_area: function (treeNode) {
+        $("#elementArea_Left").get(0).value = parseFloat(treeNode[JV.PROP_AREA][JV.PROP_LEFT]);
+        $("#elementArea_Right").get(0).value = parseFloat(treeNode[JV.PROP_AREA][JV.PROP_RIGHT]);
+        $("#elementArea_Top").get(0).value = parseFloat(treeNode[JV.PROP_AREA][JV.PROP_TOP]);
+        $("#elementArea_Bottom").get(0).value = parseFloat(treeNode[JV.PROP_AREA][JV.PROP_BOTTOM]);
+        if (typeof treeNode[JV.PROP_AREA][JV.PROP_H_CALCULATION] === "string") {
+            $("#isPercentage_Left").get(0).checked = treeNode[JV.PROP_AREA][JV.PROP_H_CALCULATION] === "percentage";
+            $("#isPercentage_Right").get(0).checked = treeNode[JV.PROP_AREA][JV.PROP_H_CALCULATION] === "percentage";
+        } else {
+            $("#isPercentage_Left").get(0).checked = treeNode[JV.PROP_AREA][JV.PROP_H_CALCULATION][JV.PROP_LEFT] === "percentage";
+            $("#isPercentage_Right").get(0).checked = treeNode[JV.PROP_AREA][JV.PROP_H_CALCULATION][JV.PROP_RIGHT] === "percentage";
+        }
+        if (typeof treeNode[JV.PROP_AREA][JV.PROP_V_CALCULATION] === "string") {
+            $("#isPercentage_Top").get(0).checked = treeNode[JV.PROP_AREA][JV.PROP_V_CALCULATION] === "percentage";
+            $("#isPercentage_Bottom").get(0).checked = treeNode[JV.PROP_AREA][JV.PROP_V_CALCULATION] === "percentage";
+        } else {
+            $("#isPercentage_Top").get(0).checked = treeNode[JV.PROP_AREA][JV.PROP_V_CALCULATION][JV.PROP_TOP] === "percentage";
+            $("#isPercentage_Bottom").get(0).checked = treeNode[JV.PROP_AREA][JV.PROP_V_CALCULATION][JV.PROP_BOTTOM] === "percentage";
+        }
+    },
     fontNameChange: function(dom){
         let font = dataInfoMapTreeOprObj.currentNode[JV.PROP_FONT];
         font[JV.FONT_PROPS[0]] = dom.value;
@@ -201,11 +227,47 @@ let rpt_tpl_cfg_helper = {
         }
     },
     changeAlignment: function(dom, type) {
+        let ctrl = dataInfoMapTreeOprObj.currentNode[JV.PROP_CONTROL];
         if (type === "horizon") {
-            //
+            ctrl[JV.CONTROL_PROPS[2]] = JV.OUTPUT_ALIGN[dom.selectedIndex];
         } else {
-            //vertical
+            ctrl[JV.CONTROL_PROPS[3]] = JV.OUTPUT_ALIGN[dom.selectedIndex];
+        }
+    },
+    changeArea: function(dom, typeStr) {
+        if (dataInfoMapTreeOprObj.currentNode) {
+            dataInfoMapTreeOprObj.currentNode[JV.PROP_AREA][typeStr] = dom.value;
+        }
+    },
+    changeAreaCalcType: function (dom, typeStr) {
+        if (dataInfoMapTreeOprObj.currentNode) {
+            let otherSideStr = "", caclStr = "";
+            switch (typeStr) {
+                case JV.PROP_LEFT:
+                    caclStr = JV.PROP_H_CALCULATION;
+                    otherSideStr = JV.PROP_RIGHT;
+                    break;
+                case JV.PROP_RIGHT:
+                    caclStr = JV.PROP_H_CALCULATION;
+                    otherSideStr = JV.PROP_LEFT;
+                    break;
+                case JV.PROP_TOP:
+                    caclStr = JV.PROP_V_CALCULATION;
+                    otherSideStr = JV.PROP_BOTTOM;
+                    break;
+                case JV.PROP_BOTTOM:
+                    caclStr = JV.PROP_V_CALCULATION;
+                    otherSideStr = JV.PROP_TOP;
+                    break;
+            }
+            if (typeof dataInfoMapTreeOprObj.currentNode[JV.PROP_AREA][caclStr] === "string") {
+                let bk_type = dataInfoMapTreeOprObj.currentNode[JV.PROP_AREA][caclStr];
+                dataInfoMapTreeOprObj.currentNode[JV.PROP_AREA][caclStr] = {};
+                dataInfoMapTreeOprObj.currentNode[JV.PROP_AREA][caclStr][typeStr] = dom.checked?JV.CAL_TYPE[0]:JV.CAL_TYPE[1];
+                dataInfoMapTreeOprObj.currentNode[JV.PROP_AREA][caclStr][otherSideStr] = bk_type;
+            } else {
+                dataInfoMapTreeOprObj.currentNode[JV.PROP_AREA][caclStr][typeStr] = dom.checked?JV.CAL_TYPE[0]:JV.CAL_TYPE[1];
+            }
         }
     }
-
 };

web/maintain/report/rpt_tpl_detail.html

@@ -260,7 +260,49 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="row" id="element_area">
+                        <div class="row" id="element_area_1">
+                            <div class="form-group col-md-3">
+                                <label>输出区域-左</label>
+                                <input class="form-control input-sm" id="elementArea_Left" type="number" value="0" step="1" min="0" max="100" onchange="rpt_tpl_cfg_helper.changeArea(this, 'Left')">
+                            </div>
+                            <div class="form-group col-md-3">
+                                <label>输出区域-右</label>
+                                <input class="form-control input-sm" id="elementArea_Right" type="number" value="0" step="1" min="0" max="100" onchange="rpt_tpl_cfg_helper.changeArea(this, 'Right')">
+                            </div>
+                            <div class="form-group col-md-3">
+                                <label>输出区域-上</label>
+                                <input class="form-control input-sm" id="elementArea_Top" type="number" value="0" step="1" min="0" max="100" onchange="rpt_tpl_cfg_helper.changeArea(this, 'Top')">
+                            </div>
+                            <div class="form-group col-md-3">
+                                <label>输出区域-下</label>
+                                <input class="form-control input-sm" id="elementArea_Bottom" type="number" value="0" step="1" min="0" max="100" onchange="rpt_tpl_cfg_helper.changeArea(this, 'Bottom')">
+                            </div>
+                        </div>
+                        <div class="row" id="element_area_2">
+                            <div class="form-group col-md-3">
+                                <label class="form-check-label">
+                                    <input type="checkbox" class="form-check-input" id="isPercentage_Left" onchange="rpt_tpl_cfg_helper.changeAreaCalcType(this, 'Left')">
+                                    百分比
+                                </label>
+                            </div>
+                            <div class="form-group col-md-3">
+                                <label class="form-check-label">
+                                    <input type="checkbox" class="form-check-input" id="isPercentage_Right" onchange="rpt_tpl_cfg_helper.changeAreaCalcType(this, 'Right')">
+                                    百分比
+                                </label>
+                            </div>
+                            <div class="form-group col-md-3">
+                                <label class="form-check-label">
+                                    <input type="checkbox" class="form-check-input" id="isPercentage_Top" onchange="rpt_tpl_cfg_helper.changeAreaCalcType(this, 'Top')">
+                                    百分比
+                                </label>
+                            </div>
+                            <div class="form-group col-md-3">
+                                <label class="form-check-label">
+                                    <input type="checkbox" class="form-check-input" id="isPercentage_Bottom" onchange="rpt_tpl_cfg_helper.changeAreaCalcType(this, 'Bottom')">
+                                    百分比
+                                </label>
+                            </div>
                         </div>
                         <div class="form-group" id="dispRowHeight">
                             <label>显示行高度</label>