动态决算，造价对比调整

app/public/js/budget_compare.js

@@ -11,7 +11,7 @@
 $(document).ready(() => {
     const compareTypeKey = 'budget-compareType';
     const stackedBarCoverKey = 'budget-stackedBarCover';
-    const stackedBarKey = 'budget-stackedBar-' + window.location.pathname.split('/')[2];
+    const stackedBarKey = 'budget-stackedBar';
     autoFlashHeight();
     const compareSpread = SpreadJsObj.createNewSpread($('#cost-compare')[0]);
     const compareSheet = compareSpread.getActiveSheet();
@@ -91,13 +91,8 @@ $(document).ready(() => {
                     break;
             }
         },
-        getStackedBarField () {
-            let stackedBarCache = getLocalCache(stackedBarKey);
-            if (stackedBarCache === null) stackedBarCache = 'gai_tp,total_price,final_tp';
-            return stackedBarCache ? stackedBarCache.split(',') : [];
-        },
         calcStackedBar(tree) {
-            const calcField = this.getStackedBarField();
+            const calcField = this.stackedBarField;
             const calcFieldColor = { 'gu_tp': '#657798', 'gai_tp': '#EE6666', 'yu_tp': '#74CBED', 'total_price': '#FAC858', 'final_tp': '#62DAAB' };
             const calc = function(node, base){
                 // const parent = tree.getParent(node);
@@ -211,33 +206,39 @@ $(document).ready(() => {
         loadCacheData(){
             let stackedBarCache = getLocalCache(stackedBarKey);
             if (stackedBarCache === null) stackedBarCache = 'gai_tp,total_price,final_tp';
-            this.stackedBarField = stackedBarCache ? stackedBarCache.split(',') : [];
-            this.compareType = getLocalCache(compareTypeKey);
-            this.stackedBarCover = getLocalCache(stackedBarCoverKey);
+            this.setStackedBarField(stackedBarCache ? stackedBarCache.split(',') : []);
+            this.setCompareType(getLocalCache(compareTypeKey));
+            this.setStackedBarCover(getLocalCache(stackedBarCoverKey));
             this.initShowType();
         },
         setStackedBarField(field){
             this.stackedBarField = field;
             setLocalCache(stackedBarKey, field.join(','));
-            this.calcStackedBar(compareSheet.zh_tree);
-            const colIndex = compareSheet.zh_setting.cols.findIndex(x => { return x.field === 'stackedBar'});
+            if (compareSheet.zh_tree) this.calcStackedBar(compareSheet.zh_tree);
+            const colIndex = spreadSetting.cols.findIndex(x => { return x.field === 'stackedBar'});
             SpreadJsObj.reloadColData(compareSheet, colIndex);
         },
         setCompareType(type) {
             this.compareType = type;
-            setLocalCache(compareTypeKey, type);
+            $('[name=showType]').removeClass('active');
+            $(`[tag=${type}]`).addClass('active');
+            if (this.compareType === 'grid') {
+                $('.ml-auto').show();
+            } else {
+                $('.ml-auto').hide();
+            }
             spreadSetting.cols.forEach(x => {
                 if (!x.bc_type) return;
                 x.visible = x.bc_type === type;
             });
-            SpreadJsObj.refreshColumnVisible(compareSheet);
+            setLocalCache(compareTypeKey, type);
         },
         setStackedBarCover(cover){
-            this.stackedBarCover = cover;
-            setLocalCache(stackedBarCoverKey, cover);
-            const colIndex = compareSheet.zh_setting.cols.findIndex(x => { return x.field === 'stackedBar'});
-            compareSheet.zh_setting.cols[colIndex].stackedBarCover = parseInt(cover);
+            this.stackedBarCover = cover || '1';
+            const colIndex = spreadSetting.cols.findIndex(x => { return x.field === 'stackedBar'});
+            spreadSetting.cols[colIndex].stackedBarCover = parseInt(cover);
             SpreadJsObj.reloadColData(compareSheet, colIndex);
+            setLocalCache(stackedBarCoverKey, cover);
         }
     };
     compareObj.loadCacheData();
@@ -414,13 +415,14 @@ $(document).ready(() => {
         compareObj.setStackedBarField(field);
     });
     $('#dp-stackedBar').click(function() {
-        const field = compareObj.getStackedBarField();
+        const field = compareObj.stackedBarField;
         const checked = $('[name=stackedBar]');
         checked.each((i, x) => { x.checked = field.indexOf(x.value) >= 0; });
     });
     $('a[name=showType]').click(function () {
         const type = this.getAttribute('tag');
         compareObj.setCompareType(type);
+        SpreadJsObj.refreshColumnVisible(compareSheet);
     });
     $('a[name=stackedBarCover]').click(function() {
         const cover = this.getAttribute('tag');

app/public/js/spreadjs_rela/spreadjs_zh.js

@@ -926,6 +926,7 @@ const SpreadJsObj = {
      */
     reLoadColsData: function (sheet, cols) {
         const sortData = sheet.zh_dataType === 'tree' ? sheet.zh_tree.nodes : sheet.zh_data;
+        if (!sortData) return;
 
         this.beginMassOperation(sheet);
         try {
@@ -2588,7 +2589,6 @@ const SpreadJsObj = {
                     let width = ZhCalc.mul(validWidth, bd.percent, 2);
                     if (width < defaultR) continue;
                     const top = col.stackedBarCover ? startTop : startTop + height * i + i - 1;
-                    console.log(top, height, y, h);
                     drawBar(canvas, left, top, width, height, defaultR, bd.color);
                 }
             };

app/view/budget/compare.ejs

@@ -4,15 +4,14 @@
         <div class="title-main d-flex">
             <% include ./sub_mini_menu.ejs %>
             <div>
-                <div class="d-inline-block">
-                    <div class="dropdown">
-                        <button class="btn btn-sm btn-light dropdown-toggle text-primary" type="button" id="dp-type" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                            <i class="fa fa-list-ol"></i> 数据形式
-                        </button>
-                        <div class="dropdown-menu" aria-labelledby="dp-type">
-                            <a class="dropdown-item" name="showType" tag="number" href="javascript: void(0);">详细数据</a>
-                            <a class="dropdown-item" name="showType" tag="grid" href="javascript: void(0);">柱状图表</a>
-                        </div>
+                <div class="d-inline-block mr-2">
+                    <div class="btn-group group-tab">
+                        <a class="btn btn-sm btn-light" name="showType" tag="grid" href="javascript: void(0)">
+                            图表模式
+                        </a>
+                        <a class="btn btn-sm btn-light" name="showType" tag="number" href="javascript: void(0)">
+                            数据模式
+                        </a>
                     </div>
                 </div>
                 <div class="d-inline-block">
@@ -35,56 +34,56 @@
                 </div>
                 <div class="d-inline-block ml-2" id="final-info">
                 </div>
-                <div class="d-inline-block ml-auto">
-                    <div class="d-inline-block">
-                        <div class="dropdown">
-                            <button class="btn btn-sm btn-light dropdown-toggle text-primary" type="button" id="dp-stackedBar" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-                                <i class="fa fa-list"></i> 图表数据
-                            </button>
-                            <div class="dropdown-menu pb-1" aria-labelledby="dp-stackedBar" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 26px, 0px); top: 0px; left: 0px; will-change: transform;">
-                                <div class="px-3">
-                                    <div class="form-check py-1">
-                                        <input class="form-check-input" name="stackedBar" type="checkbox" id="stackedBarGu" value="gu_tp">
-                                        <label class="form-check-label" for="stackedBarGu">估算</label>
-                                        <span class="ml-1 span-grey px-2">&nbsp;&nbsp;&nbsp;</span>
-                                    </div>
-                                    <div class="form-check py-1">
-                                        <input class="form-check-input" name="stackedBar" type="checkbox" id="stackedBarGai" value="gai_tp" checked="">
-                                        <label class="form-check-label" for="stackedBarGai">概算</label>
-                                        <span class="ml-1 span-red px-2">&nbsp;&nbsp;&nbsp;</span>
-                                    </div>
-                                    <div class="form-check py-1">
-                                        <input class="form-check-input" name="stackedBar" type="checkbox" id="stackedBarYu" value="yu_tp">
-                                        <label class="form-check-label" for="stackedBarYu">预算</label>
-                                        <span class="ml-1 span-blue px-2">&nbsp;&nbsp;&nbsp;</span>
-                                    </div>
-                                    <div class="form-check py-1">
-                                        <input class="form-check-input" name="stackedBar" type="checkbox" id="stackedBarLedger" value="total_price" checked="">
-                                        <label class="form-check-label" for="stackedBarLedger">台账</label>
-                                        <span class="ml-1 span-yellow px-2">&nbsp;&nbsp;&nbsp;</span>
-                                    </div>
-                                    <div class="form-check py-1">
-                                        <input class="form-check-input" name="stackedBar" type="checkbox" id="stackedBarFinal" value="final_tp" checked="">
-                                        <label class="form-check-label" for="stackedBarFinal">决算</label>
-                                        <span class="ml-1 span-green px-2">&nbsp;&nbsp;&nbsp;</span>
-                                    </div>
-                                    <hr class="m-1">
-                                    <div class="float-right">
-                                        <button type="button" class="btn btn-sm btn-primary" id="stackedBar-ok">确定</button>
-                                    </div>
+            </div>
+            <div class="ml-auto">
+                <div class="d-inline-block">
+                    <div class="dropdown">
+                        <button class="btn btn-sm btn-light dropdown-toggle text-primary" type="button" id="dp-stackedBar" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                            <i class="fa fa-list"></i> 图表数据
+                        </button>
+                        <div class="dropdown-menu pb-1" aria-labelledby="dp-stackedBar" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 26px, 0px); top: 0px; left: 0px; will-change: transform;">
+                            <div class="px-3">
+                                <div class="form-check py-1">
+                                    <input class="form-check-input" name="stackedBar" type="checkbox" id="stackedBarGu" value="gu_tp">
+                                    <label class="form-check-label" for="stackedBarGu">估算</label>
+                                    <span class="ml-1 span-grey px-2">&nbsp;&nbsp;&nbsp;</span>
+                                </div>
+                                <div class="form-check py-1">
+                                    <input class="form-check-input" name="stackedBar" type="checkbox" id="stackedBarGai" value="gai_tp" checked="">
+                                    <label class="form-check-label" for="stackedBarGai">概算</label>
+                                    <span class="ml-1 span-red px-2">&nbsp;&nbsp;&nbsp;</span>
+                                </div>
+                                <div class="form-check py-1">
+                                    <input class="form-check-input" name="stackedBar" type="checkbox" id="stackedBarYu" value="yu_tp">
+                                    <label class="form-check-label" for="stackedBarYu">预算</label>
+                                    <span class="ml-1 span-blue px-2">&nbsp;&nbsp;&nbsp;</span>
+                                </div>
+                                <div class="form-check py-1">
+                                    <input class="form-check-input" name="stackedBar" type="checkbox" id="stackedBarLedger" value="total_price" checked="">
+                                    <label class="form-check-label" for="stackedBarLedger">台账</label>
+                                    <span class="ml-1 span-yellow px-2">&nbsp;&nbsp;&nbsp;</span>
+                                </div>
+                                <div class="form-check py-1">
+                                    <input class="form-check-input" name="stackedBar" type="checkbox" id="stackedBarFinal" value="final_tp" checked="">
+                                    <label class="form-check-label" for="stackedBarFinal">决算</label>
+                                    <span class="ml-1 span-green px-2">&nbsp;&nbsp;&nbsp;</span>
+                                </div>
+                                <hr class="m-1">
+                                <div class="float-right">
+                                    <button type="button" class="btn btn-sm btn-primary" id="stackedBar-ok">确定</button>
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <div class="d-inline-block">
-                        <div class="dropdown">
-                            <button class="btn btn-sm btn-light dropdown-toggle text-primary" type="button" id="dp-cover" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                <i class="fa fa-list-ol"></i> 图表样式
-                            </button>
-                            <div class="dropdown-menu" aria-labelledby="dp-cover">
-                                <a class="dropdown-item" name="stackedBarCover" tag="0" href="javascript: void(0);">堆叠</a>
-                                <a class="dropdown-item" name="stackedBarCover" tag="1" href="javascript: void(0);">覆盖</a>
-                            </div>
+                </div>
+                <div class="d-inline-block">
+                    <div class="dropdown">
+                        <button class="btn btn-sm btn-light dropdown-toggle text-primary" type="button" id="dp-cover" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <i class="fa fa-list-ol"></i> 图表样式
+                        </button>
+                        <div class="dropdown-menu" aria-labelledby="dp-cover">
+                            <a class="dropdown-item" name="stackedBarCover" tag="0" href="javascript: void(0);">堆叠</a>
+                            <a class="dropdown-item" name="stackedBarCover" tag="1" href="javascript: void(0);">覆盖</a>
                         </div>
                     </div>
                 </div>