slideResize.js拖动相关公共接口

所有用到拖动的地方，更换成SlideResize中的方法

web/common/js/slideResize.js

@@ -4,261 +4,197 @@
  *
  *
  * @author Zhong
- * @date 2018/10/22
+ * @date 2018/11/7
  * @version
  */
 
-let mouseMoveCount = 0;
-
-/**
- * 拖动更改div大小
- *
- * @param {Object} eles - id:存储本地的标记 resize:拖动条 nearElement:左上外层div nearSpread:左上spread farElement:右下外层div evFixedSize:造价书左右拖动用
- * @param {Object} limit - min/max
- * @param {String} type - height/width
- * @param {function} callback - 成功后执行
- * @return {void}
- */
-function slideResize(eles, limit, type, callback) {
-    if(type !== 'height' && type !== 'width'){
-        return;
+/*
+ * div之间的水平拖动，适应各种情况
+ * module: 所属模块，防止不同页面相同id导致localstorage数据被覆盖
+ * eleObj: resize, parent, left, right
+ * limit: min, max
+ * */
+
+const SlideResize = (function() {
+    //设置水平拖动条的宽度
+    //@param {Object dom}resize滚动条
+    function setResizeWidth (resize) {
+        const fixedWidth = 10;
+        //跟滚动条同层的其他节点
+        let bros = resize.parent().children();
+        //滚动条节点 及 同层非滚动条节点的索引
+        let index = bros.index(resize),
+            otherIndex = index ? 0 : 1;
+        const other = resize.parent().children(`:eq(${otherIndex})`);
+        let resizeParentWidth = resize.parent().width();
+        let resizeDecimalWidth = fixedWidth / resizeParentWidth,
+            otherDecimalWidth = 1 - resizeDecimalWidth;
+        let resizePercentWidth = resizeDecimalWidth * 100 + '%',
+            otherPercentWidth = otherDecimalWidth * 100 + '%';
+        resize.css('width', resizePercentWidth);
+        other.css('width', otherPercentWidth);
     }
-    //nearElement:左上， farElement:右下
-    let startP = 0;
-    let drag = false;
-    const resizeElement = eles.resize;
-    const nElement = eles.nearElement;
-    const fElement = eles.farElement;
-    const navContentEle = eles.nav ? eles.nav : null;
-    let nEleSize = 0;
-    let fEleSize = 0;
-    let navSize = 0;
-    let nEleChangeSize = 0;
-    let fEleChangeSize = 0;
-    let limitMax = 0;
 
-    // 鼠标点下时
-    resizeElement.mousedown(function(e) {
-        limitMax = eval(limit.max);
-        mouseMoveCount = 0;
-        drag = true;
-        startP = type === 'height' ? e.clientY : e.clientX;
-        // 获取左(上)部分的宽度(高度)
-        nEleSize = nElement[type]();
-        // 获取右(下)部分的宽度(高度)
-        fEleSize = fElement[type]();
-        // nav宽(高度)部分
-        if(navContentEle){
-            navSize = navContentEle[type]() + 4;
-        }
-        resizeElement.tooltip('hide');
-    });
-
-    // 鼠标移动
-    $("body").mousemove(function(e) {
-        if (drag) {
-            let moveSize = type === 'height' ? e.clientY - startP : e.clientX - startP;
-            // 判断拖动范围不能超出
-            nEleChangeSize = nEleSize + moveSize;
-            nEleChangeSize = nEleChangeSize < limit.min ? limit.min : nEleChangeSize;
-            nEleChangeSize = nEleChangeSize > limitMax ? limitMax + 9 : nEleChangeSize;
-
-            fEleChangeSize = fEleSize - moveSize;
-            fEleChangeSize = fEleChangeSize < limit.min ? limit.min : fEleChangeSize;
-            fEleChangeSize = fEleChangeSize > limitMax ? limitMax + 9 : fEleChangeSize;
-
-            if(type === 'width'){
-                if(eles.totalWidth) {
-                    nEleChangeSize = nEleChangeSize * eles.totalWidth;
-                    fEleChangeSize = fEleChangeSize * eles.totalWidth;
+    let mouseMoveCount = 0;
+    function horizontalSlide(module, eleObj, limit, callback) {
+        const triggerCBSize = 5;
+        let drag = false,
+            startPoint = 0,
+            leftWidth = 0,
+            rightWidth = 0,
+            leftChange = 0,
+            rightChange = 0,
+            limitMax = 0;
+
+        eleObj.resize.mousedown(function (e) {
+            drag = true;
+            startPoint = e.clientX;
+            leftWidth = eleObj.left.width();
+            rightWidth = eleObj.right.width();
+            limitMax = eval(limit.max);
+        });
+        $('body').mousemove(function (e) {
+            if (drag) {
+                let moveSize = e.clientX - startPoint;
+                leftChange = leftWidth + moveSize;
+                leftChange = leftChange < limit.min ? limit.min : leftChange;
+                leftChange = leftChange > limitMax ? limitMax - 3 : leftChange;
+                rightChange = rightWidth - moveSize;
+                rightChange = rightChange < limit.min ? limit.min : rightChange;
+                rightChange = rightChange > limitMax ? limitMax - 3 : rightChange;
+                let leftPercentWidth = leftChange / eleObj.parent.width() * 100 + '%',
+                    rightPercentWidth = rightChange / eleObj.parent.width() * 100 + '%';
+                eleObj.left.css('width', leftPercentWidth);
+                eleObj.right.css('width', rightPercentWidth);
+                setResizeWidth(eleObj.resize);
+                mouseMoveCount += Math.abs(moveSize);
+                if (mouseMoveCount > triggerCBSize && callback) {
+                    callback();
+                    mouseMoveCount = 0;
                 }
-                let rePercent = getResizeWidthPercent(nEleChangeSize, fEleChangeSize, eles.totalWidth);
-                eles.nearElement.css(type, rePercent.nearPercent);
-                eles.farElement.css(type, rePercent.farPercent);
-            }
-            else{
-                eles.nearSpread[type](nEleChangeSize);
-                eles.farSpread[type](fEleChangeSize - navSize);
-                eles.farElement[type](fEleChangeSize);
             }
-            //实时刷新页面
-            mouseMoveCount+=Math.abs(moveSize);//取移动的决对值
-            if(mouseMoveCount >=5){//当累计移动超过5个像素时，才刷新，减少刷新次数
-                if(callback) callback();
+        });
+        $('body').mouseup(function (e) {
+            if (drag) {
+                drag = false;
                 mouseMoveCount = 0;
+                //将宽度信息存储到localstorage
+                let leftWidthInfo = eleObj.left[0].style.width;
+                setLocalCache(`${module}${eleObj.left.attr('id')}Width`, leftWidthInfo);
+                let rightWidthInfo = eleObj.right[0].style.width;
+                setLocalCache(`${module}${eleObj.right.attr('id')}Width`, rightWidthInfo);
             }
-        }
-    });
+        });
+    }
 
-    // 鼠标弹起
-    $("body").mouseup(function(e) {
-        if (drag) {
-            callback();
-            drag = false;
-            // 存入本地缓存
-            const id = eles.id;
-            nEleChangeSize = nEleChangeSize >= limit.max ? limit.max + 9  : nEleChangeSize;
-            fEleChangeSize = fEleChangeSize >= limit.max ? limit.max + 9  : fEleChangeSize;
-            setLocalCache(`near${type}:${id}`, nEleChangeSize);
-            setLocalCache(`far${type}:${id}`, fEleChangeSize);
+    function loadHorizonWidth(module, resizes, eles, callback) {
+        for (let ele of eles) {
+            let cache = getLocalCache(`${module}${ele.attr('id')}Width`);
+            if (cache) {
+                ele.css('width', cache);
+            }
         }
-    });
-}
-
-/**
- * 读取设置的高度
- *
- * @param {String} tag - 顶层div的id
- * @param {function} callback - 回调函数
- * @return {void}
- */
-
-function loadSize(eles, type, callback) {
-    let tag = eles.id;
-    if (tag === '') {
-        return;
-    }
-    if(type !== 'height' && type !== 'width'){
-        return;
-    }
-    let o_nearSize = eles.nearSpread[type]();
-    let o_farSize = eles.farSpread[type]();
-    let nearSize = getLocalCache(`near${type}:${tag}`);
-    let farSize = getLocalCache(`far${type}:${tag}`);
-    if (nearSize === null || farSize === null) {
-        setDefaultSize(tag,eles,type);//zhang 2018-05-21
-        /* eles.nearSpread[type](o_nearSize);
-         eles.farSpread[type](o_farSize);*/
-    }else {
-        setSizeWithPercent(tag,eles,nearSize,farSize,type)//zhang 2018-06-04 改成按百分比设置
-    }
-    if(type === 'width'){//使用百分比
-        if (eles.totalWidth) {
-            o_nearSize = o_nearSize * eles.totalWidth;
-            o_farSize = o_farSize * eles.totalWidth;
+        for (let resize of resizes) {
+            setResizeWidth(resize);
         }
-        let rePercent = getResizeWidthPercent(nearSize ? nearSize : o_nearSize, farSize ? farSize : o_farSize, eles.totalWidth);
-        eles.nearElement.css(type, rePercent.nearPercent);
-        eles.farElement.css(type, rePercent.farPercent);
-    }
-    callback();
-}
-
-function getResizeWidthPercent(nearSize, farSize, totalWidth = 1){
-    const resizeWidth = 6;
-    nearSize = parseFloat(nearSize);
-    farSize = parseFloat(farSize);
-    let nearPercent = (nearSize / (resizeWidth + nearSize + farSize) * totalWidth * 100) + '%';
-    let farPercent = (farSize / (resizeWidth + nearSize + farSize) * totalWidth * 100) + '%';
-    return {nearPercent, farPercent};
-}
-
-
-function setSizeWithPercent(tag,eles,nearSize,farSize,type) {
-    nearSize = parseFloat(nearSize);
-    farSize = parseFloat(farSize);
-    if(type !== 'width') {
-        let headerHeight = $(".header").height();
-        let toolsbarHeight = $(".toolsbar").height() ? $(".toolsbar").height() : 0;
-        let resizeHeight = 12;
-        let exand = tag == "#main" ? 1:50;
-        if (tag === '#stdRationSub') {
-            exand = 35;
-        } else if (tag === '#stdZmhsAdj'){
-            exand = 0;
+        if (callback) {
+            callback();
         }
-        let totalHeight = $(window).height() - headerHeight - toolsbarHeight - exand - resizeHeight;
-        const navSize = eles.nav ? eles.nav[type]() + 4 : 0;
-        totalHeight = totalHeight - navSize;
-        nearSize = (nearSize/(nearSize + farSize))* totalHeight;
-        eles.nearSpread[type](nearSize);
-        eles.farSpread[type](totalHeight - nearSize);
-        eles.farElement[type](totalHeight - nearSize + navSize);
     }
-}
 
-function setDefaultSize(tag,eles,type) {
-    let o_nearSize = 5;
-    let o_farSize = 2;
-    if(type == 'height'){
-        let headerHeight = $(".header").height();
-        let toolsbarHeight = $(".toolsbar").height();
-        let exand = tag == "#main" ? 1:50;
-        let resizeHeight = 12;
-        let totalHeight = $(window).height() - headerHeight - toolsbarHeight-exand - resizeHeight;
-        const navSize = eles.nav ? eles.nav[type]() + 4 : 0;
-        totalHeight = totalHeight - navSize;
-        let nearSize = (o_nearSize/(o_nearSize + o_farSize))* totalHeight;
-        eles.nearSpread[type](nearSize);
-        eles.farSpread[type](totalHeight - nearSize);
-        eles.farElement[type](totalHeight - nearSize + navSize);
-    }
-}
-
-/*
-* div之间的水平拖动，适应各种情况
-* module: 所属模块，防止不同页面相同id导致localstorage数据被覆盖
-* eleObj: resize, parent, left, right
-* limit: min, max
-* */
-function horizontalSlide(module, eleObj, limit, callback) {
-    const triggerCBSize = 5;
-    let drag = false,
-        startPoint = 0,
-        leftWidth = 0,
-        rightWidth = 0,
-        leftChange = 0,
-        rightChange = 0,
-        limitMax = 0;
 
-    eleObj.resize.mousedown(function (e) {
-        drag = true;
-        startPoint = e.clientX;
-        leftWidth = eleObj.left.width();
-        rightWidth = eleObj.right.width();
-        limitMax = eval(limit.max);
-    });
-    $('body').mousemove(function (e) {
-        if (drag) {
-            let moveSize = e.clientX - startPoint;
-            leftChange = leftWidth + moveSize;
-            leftChange = leftChange < limit.min ? limit.min : leftChange;
-            leftChange = leftChange > limitMax ? limitMax - 3 : leftChange;
-            rightChange = rightWidth - moveSize;
-            rightChange = rightChange < limit.min ? limit.min : rightChange;
-            rightChange = rightChange > limitMax ? limitMax - 3 : rightChange;
-            let leftPercentWidth = leftChange / eleObj.parent.width() * 100 + '%',
-                rightPercentWidth = rightChange / eleObj.parent.width() * 100 + '%';
-            eleObj.left.css('width', leftPercentWidth);
-            eleObj.right.css('width', rightPercentWidth);
-            mouseMoveCount += Math.abs(moveSize);
-            if (mouseMoveCount > triggerCBSize && callback) {
-                callback();
+    /*
+     * div上下拖动
+     * module: 所属模块，防止不同页面相同id导致localstorage数据被覆盖
+     * eleObj: resize, top, topSpread, bottom, bottomSpread
+     * limit: min, max, notTopSpread(上部分非spread部分的高度) notBottomSpread(下部分非spread部分的高度)
+     * */
+    function verticalSlide(module, eleObj, limit, callback) {
+        const triggerCBSize = 5;
+        let drag = false,
+            startPoint = 0,
+            topHeight = 0,
+            bottomHeight = 0,
+            topChange = 0,
+            bottomChange = 0,
+            limitMax = 0;
+
+        eleObj.resize.mousedown(function (e) {
+            drag = true;
+            startPoint = e.clientY;
+            topHeight = eleObj.top.height();
+            bottomHeight = eleObj.bottom.height();
+            limitMax = eval(limit.max);
+        });
+        $('body').mousemove(function (e) {
+            if (drag) {
+                let moveSize = e.clientY - startPoint;
+                topChange = topHeight + moveSize;
+                topChange = topChange < limit.min ? limit.min : topChange;
+                topChange = topChange > limitMax ? limitMax : topChange;
+                bottomChange = bottomHeight - moveSize;
+                bottomChange = bottomChange < limit.min ? limit.min : bottomChange;
+                bottomChange = bottomChange > limitMax ? limitMax : bottomChange;
+
+                //设置上部分div高度
+                eleObj.top.height(topChange);
+                //设置上部分div内spread高度
+                eleObj.topSpread.height(topChange - limit.notTopSpread);
+                //设置下部分div高度
+                eleObj.bottom.height(bottomChange);
+                //设置下部分div内spread高度
+                eleObj.bottomSpread.height(bottomChange - limit.notBottomSpread);
+                mouseMoveCount += Math.abs(moveSize);
+                if (mouseMoveCount > triggerCBSize && callback) {
+                    callback();
+                    mouseMoveCount = 0;
+                }
+            }
+        });
+        $('body').mouseup(function (e) {
+            if (drag) {
+                drag = false;
                 mouseMoveCount = 0;
+                //将高度信息存储到localstorage
+                let topHeightInfo = eleObj.top.height();
+                setLocalCache(`${module}${eleObj.top.attr('id')}Height`, topHeightInfo);
+                let bottomHeightInfo = eleObj.bottom.height();
+                setLocalCache(`${module}${eleObj.bottom.attr('id')}Height`, bottomHeightInfo);
             }
-        }
-    });
-    $('body').mouseup(function (e) {
-        if (drag) {
-            drag = false;
-            mouseMoveCount = 0;
-            //将宽度信息存储到localstorage
-            let leftWidthInfo = eleObj.left[0].style.width;
-            setLocalCache(`${module}${eleObj.left.attr('id')}Width`, leftWidthInfo);
-            let rightWidthInfo = eleObj.right[0].style.width;
-            setLocalCache(`${module}${eleObj.right.attr('id')}Width`, rightWidthInfo);
-        }
-    });
-}
+        });
+    }
 
-function loadHorizonWidth(module, eles, callback) {
-    for (let ele of eles) {
-        let cache = getLocalCache(`${module}${ele.attr('id')}Width`);
-        if (cache) {
-            ele.css('width', cache);
+    /*
+     * 加载上下高度
+     * module: 所属模块，防止不同页面相同id导致localstorage数据被覆盖
+     * eleObj: top, topSpread, bottom, bottomSpread
+     * limit: totalHeight(实时的上下部分总高度) notTopSpread(上部分非spread部分的高度) notBottomSpread(下部分非spread部分的高度)
+     * */
+
+    function loadVerticalHeight(module, eleObj, limit, callback) {
+        let topHeight = getLocalCache(`${module}${eleObj.top.attr('id')}Height`),
+            bottomHeight = getLocalCache(`${module}${eleObj.bottom.attr('id')}Height`);
+        //默认上下比例
+        const topProp = 5;
+        const bottomProp = 2;
+        let topProportion = topProp / (topProp + bottomProp);
+        if (topHeight !== null && bottomHeight !== null) {
+            topHeight = parseFloat(topHeight);
+            bottomHeight = parseFloat(bottomHeight);
+            topProportion = topHeight / (topHeight + bottomHeight);
+        }
+        //设置当前窗口下的的上下部分高度
+        let totalHeight = eval(limit.totalHeight);
+        let curTopHeight = totalHeight * topProportion,
+            curBottomHeight = totalHeight - curTopHeight;
+        eleObj.top.height(curTopHeight);
+        eleObj.topSpread.height(curTopHeight - limit.notTopSpread);
+        eleObj.bottom.height(curBottomHeight);
+        eleObj.bottomSpread.height(curBottomHeight - limit.notBottomSpread);
+        if (callback) {
+            callback();
         }
     }
-    if (callback) {
-        callback();
-    }
-}
+
+    return {horizontalSlide, loadHorizonWidth, verticalSlide, loadVerticalHeight}
+})();

web/maintain/billsGuidance_lib/css/main.css

@@ -301,8 +301,8 @@ body {
     border-bottom:1px solid #ddd
 }
 div.resize{
-    height: 6px;
-    background: #f7f7f9;
+    height: 10px;
+    background: #efefef;
     width: 100%;
     cursor: s-resize;
 }

web/maintain/billsGuidance_lib/html/zhiyin.html

@@ -89,12 +89,12 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="top-content" style="overflow: hidden; width: 100%">
+                            <div class="top-content" id="topContent" style="overflow: hidden; width: 100%">
                                 <div class="main-data-top" id="sectionSpread">
                                 </div>
                             </div>
                             <div class="resize" id="deResize"></div>
-                            <div class="bottom-content">
+                            <div class="bottom-content" id="bottomContent">
                                 <div class="main-data-bottom" id="rationSpread"></div>
                             </div>
                         </div>

web/maintain/billsGuidance_lib/js/billsGuidance.js

@@ -12,6 +12,8 @@ const billsGuidance = (function () {
         return typeof v !== 'undefined' && v !== null;
     }
     let moduleName = 'stdBillsGuidance';
+    //上下拖动的拖动条高度
+    const verticalResize = 10;
     //自执行函数全局变量定义
     const libID = getQueryString('libID');
     //总工作内容数据
@@ -1416,199 +1418,6 @@ const billsGuidance = (function () {
             }
         });
     }
-    //拖动相关
-    let mouseMoveCount = 0;
-    let rationLibResizeEles = {};
-    rationLibResizeEles.id = '#de';
-    rationLibResizeEles.resize = $('#deResize');
-    rationLibResizeEles.nearElement = $('#de').find('.top-content');
-    rationLibResizeEles.nearSpread = $('#sectionSpread');
-    rationLibResizeEles.farElement = $('#de').find('.bottom-content');
-    rationLibResizeEles.farSpread = $('#rationSpread');
-    rationLibResizeEles.nav = null;
-
-    function setDefaultSize(tag,eles,type) {
-        let o_nearSize = 5;
-        let o_farSize = 2;
-        if(type == 'height'){
-            let headerHeight = $(".header").height();
-            let toolsbarHeight = $(".sidebar-tools-bar").height();
-            let resizeHeight = 6;
-            let totalHeight = $(window).height() - headerHeight - toolsbarHeight - resizeHeight;
-            const navSize = eles.nav ? eles.nav[type]() + 4 : 0;
-            totalHeight = totalHeight - navSize;
-            let nearSize = (o_nearSize/(o_nearSize + o_farSize))* totalHeight;
-            eles.nearSpread[type](nearSize);
-            eles.nearElement[type](nearSize);
-            eles.farSpread[type](totalHeight - nearSize);
-            eles.farElement[type](totalHeight - nearSize);
-        }
-    }
-    function setSizeWithPercent(tag,eles,nearSize,farSize,type) {
-        nearSize = parseFloat(nearSize);
-        farSize = parseFloat(farSize);
-        if(type !== 'width') {
-            let headerHeight = $(".header").height();
-            let toolsbarHeight = $(".sidebar-tools-bar").height();
-            let resizeHeight = 6;
-            let totalHeight = $(window).height() - headerHeight - toolsbarHeight - resizeHeight;
-            const navSize = eles.nav ? eles.nav[type]() + 4 : 0;
-            totalHeight = totalHeight - navSize;
-            nearSize = (nearSize/(nearSize + farSize))* totalHeight;
-            eles.nearSpread[type](nearSize);
-            eles.nearElement[type](nearSize);
-            eles.farSpread[type](totalHeight - nearSize);
-            eles.farElement[type](totalHeight - nearSize);
-        }
-    }
-    /**
-     * 读取设置的高度
-     *
-     * @param {String} tag - 顶层div的id
-     * @param {function} callback - 回调函数
-     * @return {void}
-     */
-
-    function loadSize(eles, type, callback) {
-        let tag = eles.id;
-        if (tag === '') {
-            return;
-        }
-        if(type !== 'height' && type !== 'width'){
-            return;
-        }
-        let o_nearSize = eles.nearSpread[type]();
-        let o_farSize = eles.farSpread[type]();
-        let nearSize = getLocalCache(`near${type}:${tag}`);
-        let farSize = getLocalCache(`far${type}:${tag}`);
-        if (nearSize === null || farSize === null) {
-            setDefaultSize(tag,eles,type);
-        }else {
-            setSizeWithPercent(tag,eles,nearSize,farSize,type)//zhang 2018-06-04 改成按百分比设置
-        }
-        callback();
-    }
-    /**
-     * 拖动更改div大小
-     *
-     * @param {Object} eles - id:存储本地的标记 resize:拖动条 nearElement:左上外层div nearSpread:左上spread farElement:右下外层div evFixedSize:造价书左右拖动用
-     * @param {Object} limit - min/max
-     * @param {String} type - height/width
-     * @param {function} callback - 成功后执行
-     * @return {void}
-     */
-    function slideResize(eles, limit, type, callback) {
-        if(type !== 'height' && type !== 'width'){
-            return;
-        }
-        //nearElement:左上， farElement:右下
-        let startP = 0;
-        let drag = false;
-        const resizeElement = eles.resize;
-        const nElement = eles.nearElement;
-        const fElement = eles.farElement;
-        const navContentEle = eles.nav ? eles.nav : null;
-        let nEleSize = 0;
-        let fEleSize = 0;
-        let navSize = 0;
-        let nEleChangeSize = 0;
-        let fEleChangeSize = 0;
-
-        // 鼠标点下时
-        resizeElement.mousedown(function(e) {
-            drag = true;
-            startP = type === 'height' ? e.clientY : e.clientX;
-            // 获取左(上)部分的宽度(高度)
-            nEleSize = nElement[type]();
-            // 获取右(下)部分的宽度(高度)
-            fEleSize = fElement[type]();
-            // nav宽(高度)部分
-            if(navContentEle){
-                navSize = navContentEle[type]() + 4;
-            }
-            resizeElement.tooltip('hide');
-        });
-
-        // 鼠标移动
-        $("body").mousemove(function(e) {
-            if (drag) {
-                let moveSize = type === 'height' ? e.clientY - startP : e.clientX - startP;
-                // 判断拖动范围不能超出
-                nEleChangeSize = nEleSize + moveSize;
-                nEleChangeSize = nEleChangeSize < limit.min ? limit.min : nEleChangeSize;
-                nEleChangeSize = nEleChangeSize > limit.max ? limit.max + 9 : nEleChangeSize;
-
-                fEleChangeSize = fEleSize - moveSize;
-                fEleChangeSize = fEleChangeSize < limit.min ? limit.min : fEleChangeSize;
-                fEleChangeSize = fEleChangeSize > limit.max ? limit.max + 9 : fEleChangeSize;
-
-                if(type === 'width'){
-                    let rePercent = getResizeWidthPercent(nEleChangeSize, fEleChangeSize);
-                    eles.nearElement.css(type, rePercent.nearPercent);
-                    eles.farElement.css(type, rePercent.farPercent);
-                }
-                else{
-                    eles.nearSpread[type](nEleChangeSize);
-                    eles.nearElement[type](nEleChangeSize);
-                    eles.farSpread[type](fEleChangeSize - navSize);
-                    eles.farElement[type](fEleChangeSize - navSize);
-                }
-                //实时刷新页面
-                mouseMoveCount+=Math.abs(moveSize);//取移动的决对值
-                if(mouseMoveCount >=5){//当累计移动超过5个像素时，才刷新，减少刷新次数
-                    if(callback) callback();
-                    mouseMoveCount = 0;
-                }
-            }
-        });
-
-        // 鼠标弹起
-        $("body").mouseup(function(e) {
-            if (drag) {
-                callback();
-                drag = false;
-                // 存入本地缓存
-                const id = eles.id;
-                nEleChangeSize = nEleChangeSize >= limit.max ? limit.max + 9  : nEleChangeSize;
-                fEleChangeSize = fEleChangeSize >= limit.max ? limit.max + 9  : fEleChangeSize;
-                setLocalCache(`near${type}:${id}`, nEleChangeSize);
-                setLocalCache(`far${type}:${id}`, fEleChangeSize);
-            }
-        });
-    }
-    /**
-     * 读取设置的高度
-     *
-     * @param {String} tag - 顶层div的id
-     * @param {function} callback - 回调函数
-     * @return {void}
-     */
-    function loadSize(eles, type, callback) {
-        let tag = eles.id;
-        if (tag === '') {
-            return;
-        }
-        if(type !== 'height' && type !== 'width'){
-            return;
-        }
-        let o_nearSize = eles.nearSpread[type]();
-        let o_farSize = eles.farSpread[type]();
-        let nearSize = getLocalCache(`near${type}:${tag}`);
-        let farSize = getLocalCache(`far${type}:${tag}`);
-        if (nearSize === null || farSize === null) {
-            setDefaultSize(tag,eles,type);//zhang 2018-05-21
-            /* eles.nearSpread[type](o_nearSize);
-             eles.farSpread[type](o_farSize);*/
-        }else {
-            setSizeWithPercent(tag,eles,nearSize,farSize,type)//zhang 2018-06-04 改成按百分比设置
-        }
-        if(type === 'width'){//使用百分比
-            let rePercent = getResizeWidthPercent(nearSize ? nearSize : o_nearSize, farSize ? farSize : o_farSize);
-            eles.nearElement.css(type, rePercent.nearPercent);
-            eles.farElement.css(type, rePercent.farPercent);
-        }
-        callback();
-    }
     //初始化个按钮点击
     //@return {void}
     function initBtn(){
@@ -1748,8 +1557,20 @@ const billsGuidance = (function () {
             });
         });
         //定额高度拖动调整
-        slideResize(rationLibResizeEles, {min: 147, max: 680}, 'height', function() {
-            //autoFlashHeight();
+        let heightEleObj = {
+            resize: $('#deResize'),
+            top: $('#topContent'),
+            topSpread: $('#sectionSpread'),
+            bottom: $('#bottomContent'),
+            bottomSpread: $('#rationSpread')
+        },
+            heightLimit = {
+                min: 150,
+                max: `$(window).height()-$('.header').height()-$('.sidebar-tools-bar').height()-150-10`,
+                notTopSpread: 0,
+                notBottomSpread: 0,
+            };
+        SlideResize.verticalSlide(moduleName, heightEleObj, heightLimit, function () {
             if(section.workBook){
                 section.workBook.refresh();
             }
@@ -1757,6 +1578,15 @@ const billsGuidance = (function () {
                 ration.workBook.refresh();
             }
         });
+        /*slideResize(rationLibResizeEles, {min: 147, max: 680}, 'height', function() {
+            //autoFlashHeight();
+            if(section.workBook){
+                section.workBook.refresh();
+            }
+            if(ration.workBook){
+                ration.workBook.refresh();
+            }
+        });*/
         //左右拖动
         //清单表与项目指引表
         let leftElesObj = {};
@@ -1764,7 +1594,7 @@ const billsGuidance = (function () {
         leftElesObj.parent = $('#dataRow');
         leftElesObj.left = $('#leftContent');
         leftElesObj.right = $('#midContent');
-        horizontalSlide(moduleName, leftElesObj, {min: 200, max: `$('#dataRow').width() - $('#rightContent').width() - 200`}, function () {
+        SlideResize.horizontalSlide(moduleName, leftElesObj, {min: 200, max: `$('#dataRow').width() - $('#rightContent').width() - 200`}, function () {
             refreshALlWorkBook();
         });
         //人材机表与人材机组成物表
@@ -1773,7 +1603,7 @@ const billsGuidance = (function () {
         rightElesObj.parent = $('#dataRow');
         rightElesObj.left = $('#midContent');
         rightElesObj.right = $('#rightContent');
-        horizontalSlide(moduleName, rightElesObj, {min: 200, max: `$('#dataRow').width() - $('#leftContent').width() - 200`}, function () {
+        SlideResize.horizontalSlide(moduleName, rightElesObj, {min: 200, max: `$('#dataRow').width() - $('#leftContent').width() - 200`}, function () {
             refreshALlWorkBook();
         });
     }
@@ -1797,6 +1627,31 @@ const billsGuidance = (function () {
         $('.main-bottom-content').find('textarea').height($('.main-bottom-content').height() - 20);
         $('.main-bottom-content').find('textarea').width($('.main-bottom-content').width() - 25);
     }
+    //读取拖动相关
+    //@return {void}
+    function initSlideSize() {
+        //定额表上下
+        let heightEleObj = {
+            top: $('#topContent'),
+            topSpread: $('#sectionSpread'),
+            bottom: $('#bottomContent'),
+            bottomSpread: $('#rationSpread')
+        };
+        SlideResize.loadVerticalHeight(moduleName, heightEleObj,
+            {totalHeight: `$(window).height()-$('.header').height()-$('.sidebar-tools-bar').height()-10`,
+             notTopSpread: 0, notBottomSpread: 0}, function () {
+                if(section.workBook){
+                    section.workBook.refresh();
+                }
+                if(ration.workBook){
+                    ration.workBook.refresh();
+                }
+            });
+        //水平
+        SlideResize.loadHorizonWidth(moduleName, [$('#slideResizeLeft'), $('#slideResizeRight')], [$('#leftContent'), $('#midContent'), $('#rightContent')], function () {
+            refreshALlWorkBook();
+        });
+    }
     //初始化视图
     //@param {void} @return {void}
     function initViews(){
@@ -1805,21 +1660,11 @@ const billsGuidance = (function () {
         getLibWithBills(libID);
         initBtn();
         initContextMenu();
-        loadSize(rationLibResizeEles, 'height', function () {
-            if(section.workBook){
-                section.workBook.refresh();
-            }
-            if(ration.workBook){
-                ration.workBook.refresh();
-            }
-        });
-        loadHorizonWidth(moduleName, [$('#leftContent'), $('#midContent'), $('#rightContent')], function () {
-            refreshALlWorkBook();
-        });
+        initSlideSize();
     }
 
 
-    return {initViews};
+    return {initViews, initSlideSize};
 })();
 
 $(document).ready(function () {

web/maintain/billsGuidance_lib/js/global.js

@@ -21,7 +21,9 @@ function autoFlashHeight(){
     $(".main-data-full").height($(window).height()-headerHeight);
     $(".main-data-bottom").height($(window).height()-headerHeight-toolsBarHeightQ-topContentHeight-$('#rationSearchResult').height() + 30);
     $('.bottom-content').height($('.main-data-bottom').height());
-
+    if (typeof billsGuidance !== 'undefined') {
+        billsGuidance.initSlideSize();
+    }
 };
 $(window).resize(autoFlashHeight);
 /*全局自适应高度结束*/

web/maintain/ration_repository/css/main.css

@@ -282,14 +282,15 @@ body {
     color: #999;
 }
 div.resize-y{
-    height: 12px;
-    background: #f7f7f9;
+    height: 10px;
+    background: #efefef;
     width: 100%;
     cursor: s-resize;
 }
 div.resize-x{
-    width: 12px;
-    background: #f7f7f9;
+    width: 10px;
+    background: #efefef;
     height: 100%;
     cursor: w-resize;
+    float: left;
 }

web/maintain/ration_repository/dinge.html

@@ -71,7 +71,7 @@
                             <div class="tab-content" id="sectionSpread" style="overflow: hidden">
                             </div>
                         </div>
-                        <div class="resize" id="slideResizeLeft" style="width: 1%; height: 100%; resize:horizontal; cursor: w-resize; float: left; background: #F1F1F1"></div>
+                        <div class="resize-x" id="slideResizeLeft"></div>
                     </div>
                     <div class="main-content p-0" id="mainContent" style="width: 75%">
                         <!-- 右标签 -->
@@ -180,7 +180,7 @@
                         </div>
                     </div>
                     <div class="main-side p-0 main-side-right" id="zmhsContent" style="width: 25%; display: none">
-                        <div class="resize" id="slideResizeRight" style="width: 1%; height: 100%; resize:horizontal; cursor: w-resize; float: left; background: #F1F1F1"></div>
+                        <div class="resize-x" id="slideResizeRight"></div>
                         <div style="width: 99%; float: left">
                             <div class="main-data-top-fluid" id="mainSpread">
                             </div>

web/maintain/ration_repository/js/coe.js

@@ -21,7 +21,6 @@ $(document).ready(function () {
             gljAdjOprObj.workBook.refresh();
         }
     }
-    const moduleName = 'stdRation';
     //定额章节树与定额表
     let leftElesObj = {};
     leftElesObj.resize = $('#slideResizeLeft');
@@ -29,10 +28,10 @@ $(document).ready(function () {
     leftElesObj.left = $('#leftContent');
     leftElesObj.right = $('#mainContent');
     let maxEval = `$('#zmhsContent').is(':visible') ? $('#dataRow').width() - $('#zmhsContent').width() - 300 : $('#dataRow').width()  - 300`;
-    horizontalSlide(moduleName, leftElesObj, {min: 300, max: maxEval}, function () {
+    SlideResize.horizontalSlide(moduleName, leftElesObj, {min: 300, max: maxEval}, function () {
         refreshALlWorkBook();
     });
-    loadHorizonWidth(moduleName, [$('#leftContent'), $('#mainContent')], function () {
+    SlideResize.loadHorizonWidth(moduleName, [$('#slideResizeLeft')], [$('#leftContent'), $('#mainContent')], function () {
         //refreshAfterZmhs(false);
         let leftContentWidth = parseFloat($('#leftContent')[0].style.width.replace('%', '')),
             mainContentWidth = parseFloat($('#mainContent')[0].style.width.replace('%', ''));
@@ -49,10 +48,27 @@ $(document).ready(function () {
     rightElesObj.left = $('#mainContent');
     rightElesObj.right = $('#zmhsContent');
     let maxEvalRight = `$('#dataRow').width() - $('#leftContent').width() - 200`;
-    horizontalSlide(moduleName, rightElesObj, {min: 200, max: maxEvalRight}, function () {
+    SlideResize.horizontalSlide(moduleName, rightElesObj, {min: 200, max: maxEvalRight}, function () {
         refreshALlWorkBook();
     });
-
+    //设置水平拖动条的宽度
+    //@param {Object dom}resize滚动条
+    function setResizeWidth (resize) {
+        const fixedWidth = 10;
+        //跟滚动条同层的其他节点
+        let bros = resize.parent().children();
+        //滚动条节点 及 同层非滚动条节点的索引
+        let index = bros.index(resize),
+            otherIndex = index ? 0 : 1;
+        const other = resize.parent().children(`:eq(${otherIndex})`);
+        let resizeParentWidth = resize.parent().width();
+        let resizeDecimalWidth = fixedWidth / resizeParentWidth,
+            otherDecimalWidth = 1 - resizeDecimalWidth;
+        let resizePercentWidth = resizeDecimalWidth * 100 + '%',
+            otherPercentWidth = otherDecimalWidth * 100 + '%';
+        resize.css('width', resizePercentWidth);
+        other.css('width', otherPercentWidth);
+    }
     function refreshAfterZmhs(visible) {
         const min = 20;
         //宽度比例localstorage key
@@ -82,6 +98,10 @@ $(document).ready(function () {
         setLocalCache(mainContentKey, `${mainContentWidth}%`);
         $('#zmhsContent').css('width', `${zmhsWidth}%`);
         setLocalCache(zmhsContentKey, `${zmhsWidth}%`);
+        let resizes = [$('#slideResizeLeft'), $('#slideResizeRight')];
+        for (let resize of resizes) {
+            setResizeWidth(resize);
+        }
     }
     $('#zmhs').click(function () {
         if(!$(this).hasClass('active')){
@@ -101,7 +121,7 @@ $(document).ready(function () {
     });
     //子目换算和调整表上下拖动
     let zmhsAdjResize = getZmhsAdjResize();
-    slideResize(zmhsAdjResize, {min: 150, max: `$('#zmhsContent').height() - 140`}, 'height', function () {
+    SlideResize.verticalSlide(moduleName, zmhsAdjResize.eleObj, zmhsAdjResize.limit, function () {
         if (coeOprObj.workBook) {
             coeOprObj.workBook.refresh();
         }
@@ -113,20 +133,27 @@ $(document).ready(function () {
 });
 function getZmhsAdjResize() {
     let zmhsAdjResize = {};
-    zmhsAdjResize.id = '#stdZmhsAdj';
-    zmhsAdjResize.resize = $('#zmhsAdjResize')
-    zmhsAdjResize.nearElement = $('#mainSpread');
-    zmhsAdjResize.nearSpread = $('#mainSpread');
-    zmhsAdjResize.farElement = $('#contentSpread')
-    zmhsAdjResize.farSpread = $('#contentSpread');
-    zmhsAdjResize.nav = null;
+    zmhsAdjResize.eleObj = {
+        resize: $('#zmhsAdjResize'),
+        top: $('#mainSpread'),
+        topSpread: $('#mainSpread'),
+        bottom: $('#contentSpread'),
+        bottomSpread: $('#contentSpread')
+    };
+    zmhsAdjResize.limit = {
+        min: 150,
+        max: `$(window).height()-$('.header').height()-150-verticalResize`,
+        totalHeight: `$(window).height()-$('.header').height()-verticalResize`,
+        notTopSpread: 0,
+        notBottomSpread: 0,
+    };
     return zmhsAdjResize;
 }
 function loadZmhsAdjSize(resizeObj) {
     if (!resizeObj) {
         resizeObj = getZmhsAdjResize();
     }
-    loadSize(resizeObj, 'height', function () {
+    SlideResize.loadVerticalHeight(moduleName, resizeObj.eleObj, resizeObj.limit, function () {
         if (coeOprObj.workBook) {
             coeOprObj.workBook.refresh();
         }

web/maintain/ration_repository/js/ration.js

@@ -5,7 +5,7 @@
 $(document).ready(function () {
    //定额表与下方子表上下拖动
     let rationSubResize = getRationSubResize();
-    slideResize(rationSubResize, {min: 150, max:`$('#tde').height() - 150 -20`}, 'height', function () {
+    SlideResize.verticalSlide(moduleName, rationSubResize.eleObj, rationSubResize.limit, function () {
         if (rationOprObj.workBook) {
             rationOprObj.workBook.refresh();
         }
@@ -13,7 +13,7 @@ $(document).ready(function () {
             rationGLJOprObj.sheet.getParent().refresh();
         }
     });
-    loadSize(rationSubResize, 'height', function () {
+    SlideResize.loadVerticalHeight(moduleName, rationSubResize.eleObj, rationSubResize.limit, function () {
         if (rationOprObj.workBook) {
             rationOprObj.workBook.refresh();
         }
@@ -24,20 +24,27 @@ $(document).ready(function () {
 });
 function getRationSubResize() {
     let rationSubResize = {};
-    rationSubResize.id = '#stdRationSub';
-    rationSubResize.resize = $('#rationSubResize');
-    rationSubResize.nearElement = $('#rationItemsSheet');
-    rationSubResize.nearSpread = $('#rationItemsSheet');
-    rationSubResize.farElement = $('#subContent');
-    rationSubResize.farSpread = $('#rdSpread');
-    rationSubResize.nav = rationSubResize.farElement.children('ul.nav');
+    rationSubResize.eleObj = {
+        resize: $('#rationSubResize'),
+        top: $('#rationItemsSheet'),
+        topSpread: $('#rationItemsSheet'),
+        bottom: $('#subContent'),
+        bottomSpread: $('#rdSpread')
+    };
+    rationSubResize.limit = {
+        min: 150,
+        max: `$(window).height()-$('.header').height()-$('.tools-bar').height()-150-verticalResize`,
+        totalHeight: `$(window).height()-$('.header').height()-$('.tools-bar').height()-verticalResize`,
+        notTopSpread: 0,
+        notBottomSpread: $('#subContent ul').height(),
+    };
     return rationSubResize;
 }
 function loadRationSubSize(resizeObj) {
     if (!resizeObj) {
         resizeObj = getRationSubResize();
     }
-    loadSize(resizeObj, 'height', function () {
+    SlideResize.loadVerticalHeight(moduleName, resizeObj.eleObj, resizeObj.limit, function () {
         if (rationOprObj.workBook) {
             rationOprObj.workBook.refresh();
         }

web/maintain/ration_repository/js/section_tree.js

@@ -1,6 +1,9 @@
 /**
  * Created by Zhong on 2017/12/18.
  */
+const moduleName = 'stdRation';
+//上下拖动div节点的高度
+const verticalResize = 10;
 let pageOprObj = {
     rationLibName : null,
     rationLibId : null,

web/maintain/std_glj_lib/js/glj.js

@@ -15,7 +15,7 @@ $(document).ready(function () {
             gljComponentOprObj.workBook.refresh();
         }
     }
-    loadHorizonWidth(moduleName, [$('#leftContent'), $('#midContent'), $('#rightContent')], function () {
+    SlideResize.loadHorizonWidth(moduleName, [$('#slideResizeLeft'), $('#slideResizeRight')], [$('#leftContent'), $('#midContent'), $('#rightContent')], function () {
         refreshALlWorkBook();
     });
     //章节树与人材机表
@@ -24,7 +24,7 @@ $(document).ready(function () {
     leftElesObj.parent = $('#dataRow');
     leftElesObj.left = $('#leftContent');
     leftElesObj.right = $('#midContent');
-    horizontalSlide(moduleName, leftElesObj, {min: 200, max: `$('#dataRow').width() - $('#rightContent').width() - 200`}, function () {
+    SlideResize.horizontalSlide(moduleName, leftElesObj, {min: 200, max: `$('#dataRow').width() - $('#rightContent').width() - 200`}, function () {
         refreshALlWorkBook();
     });
     //人材机表与人材机组成物表
@@ -33,7 +33,7 @@ $(document).ready(function () {
     rightElesObj.parent = $('#dataRow');
     rightElesObj.left = $('#midContent');
     rightElesObj.right = $('#rightContent');
-    horizontalSlide(moduleName, rightElesObj, {min: 200, max: `$('#dataRow').width() - $('#leftContent').width() - 200`}, function () {
+    SlideResize.horizontalSlide(moduleName, rightElesObj, {min: 200, max: `$('#dataRow').width() - $('#leftContent').width() - 200`}, function () {
        refreshALlWorkBook();
     });
 });