定额子目换算拖动

web/common/js/slideResize.js

@@ -0,0 +1,187 @@
+'use strict';
+
+/**
+ *
+ *
+ * @author Zhong
+ * @date 2018/10/22
+ * @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;
+    }
+    //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) {
+        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 > 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'){
+                if(eles.totalWidth) {
+                    nEleChangeSize = nEleChangeSize * eles.totalWidth;
+                    fEleChangeSize = fEleChangeSize * eles.totalWidth;
+                }
+                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();
+                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'){//使用百分比
+        if (eles.totalWidth) {
+            o_nearSize = o_nearSize * eles.totalWidth;
+            o_farSize = o_farSize * eles.totalWidth;
+        }
+        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();
+        let exand = tag == "#main" ? 1:50;
+        let totalHeight = $(window).height() - headerHeight - toolsbarHeight-exand;
+        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 totalHeight = $(window).height() - headerHeight - toolsbarHeight-exand;
+        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);
+    }
+}

web/maintain/ration_repository/dinge.html

@@ -58,7 +58,7 @@
         <div class="content">
             <div class="container-fluid">
                 <div class="row">
-                    <div class="main-side col-3 p-0" style="width: 100%; height: 100%; overflow: hidden">
+                    <div class="main-side p-0" style="width: 25%; height: 100%; overflow: hidden">
                         <div class="tab-bar">
                             <a href="javascript:void(0);" id="tree_Insert" class="btn btn-sm" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="插入"><i class="fa fa-plus" aria-hidden="true"></i></a>
                             <a href="javascript:void(0);" id="tree_remove" class="btn btn-sm" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="删除"><i class="fa fa-remove" aria-hidden="true"></i></a>
@@ -71,7 +71,7 @@
                             <!--<ul id="rationChapterTree" class="ztree"></ul>-->
                         </div>
                     </div>
-                    <div class="main-content col-9 p-0" id="mainContent">
+                    <div class="main-content p-0" id="mainContent" style="width: 75%">
                         <!-- 右标签 -->
                         <ul class="nav nav-tabs tools-bar" role="tablist">
                             <li class="nav-item">
@@ -173,10 +173,13 @@
                             </div>
                         </div>
                     </div>
-                    <div class="main-side col-3 p-0" id="zmhsContent" style="display: none">
-                        <div class="main-data-top-fluid" id="mainSpread">
-                        </div>
-                        <div class="bottom-content" id="contentSpread">
+                    <div class="main-side p-0 main-side-right" id="zmhsContent" style="width: 25%; display: none">
+                        <div class="resize" id="sideResize" style="width: 1%; height: 100%; resize:horizontal; cursor: w-resize; float: left; background: #F1F1F1"></div>
+                        <div style="width: 99%; float: left">
+                            <div class="main-data-top-fluid" id="mainSpread">
+                            </div>
+                            <div class="bottom-content" id="contentSpread">
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -661,6 +664,7 @@
         <script src="/lib/codemirror/codemirror.js"></script>
         <script src="/lib/codemirror/xml.js"></script>
         <script src="/web/common/js/uploadImg.js"></script>
+        <script src="/web/common/js/slideResize.js"></script>
         <script type="text/javascript">
             var exEditor = CodeMirror.fromTextArea(document.getElementById("explanationShow"), {
                 mode: "text/html",

web/maintain/ration_repository/js/coe.js

@@ -4,12 +4,34 @@
 //modiyied by zhong on 2017/9/21
 
 $(document).ready(function () {
+    //子目换算左右拖动
+    let sideResizeEles = {};
+    sideResizeEles.totalWidth = 0.75;
+    sideResizeEles.id = 'stdCoe';
+    sideResizeEles.resize = $('#sideResize');
+    sideResizeEles.evFixedSize = `$(window).width()-$('.main-nav').width()-5`;
+    sideResizeEles.nearElement = $('.main-content');
+    sideResizeEles.nearSpread = $('.main-content');
+    sideResizeEles.farElement = $('.main-side-right');
+    sideResizeEles.farSpread = $('.main-side-right');
+    sideResizeEles.nav = null;
+    slideResize(sideResizeEles, {min: 250, max: $('.content').width()-260}, 'width', function(){
+        if (sideResizeEles.id === 'stdCoe') {
+            coeOprObj.workBook.refresh();
+            gljAdjOprObj.workBook.refresh();
+            rationOprObj.workBook.refresh();
+            rationGLJOprObj.sheet.getParent().refresh();
+        }
+    });
+
     $('#zmhs').click(function () {
         if(!$(this).hasClass('active')){
             $(this).addClass('active');
-            $('#mainContent').removeClass('col-9');
-            $('#mainContent').addClass('col-6');
+            $('#mainContent').css('width', '50%');
             $('#zmhsContent').show();
+            loadSize(sideResizeEles, 'width', function(){
+
+            });
             if(!coeOprObj.workBook){
                 pageObj.initPage();
             }
@@ -19,8 +41,7 @@ $(document).ready(function () {
             rationGLJOprObj.sheet.getParent().refresh();
         } else {
             $(this).removeClass('active');
-            $('#mainContent').removeClass('col-6');
-            $('#mainContent').addClass('col-9');
+            $('#mainContent').css('width', '75%')
             $('#zmhsContent').hide();
             rationOprObj.workBook.refresh();
             rationGLJOprObj.sheet.getParent().refresh();

web/maintain/ration_repository/js/global.js

@@ -54,3 +54,41 @@ $(function(){
     });
     /*工具提示*/
 });
+/**
+ * 设置本地缓存
+ *
+ * @param {String} key
+ * @param {String|Number} value
+ * @return {void}
+ */
+function setLocalCache(key, value) {
+    const storage = window.localStorage;
+    if (!storage || key === '' || value === '') {
+        return;
+    }
+
+    storage.setItem(key, value);
+}
+
+/**
+ * 获取本地缓存
+ *
+ * @param {String} key
+ * @return {String}
+ */
+function getLocalCache(key) {
+    const storage = window.localStorage;
+    if (!storage || key === '') {
+        return null;
+    }
+
+    return storage.getItem(key);
+}
+
+function removeLocalCache(key) {
+    const storage = window.localStorage;
+    if (!storage || key === '') {
+        return null;
+    }
+    return storage.removeItem(key);
+}