Calculation/app/public/js/budget_compare.js

'use strict';

/**
 *
 *
 * @author Mai
 * @date
 * @version
 */

$(document).ready(() => {
    const compareTypeKey = 'budget-compareType';
    const stackedBarCoverKey = 'budget-stackedBarCover';
    const stackedBarKey = 'budget-stackedBar';
    autoFlashHeight();
    const compareSpread = SpreadJsObj.createNewSpread($('#cost-compare')[0]);
    const compareSheet = compareSpread.getActiveSheet();

    const getStackedBarTip = function (data) {
        return data.stackedBarTips.join('\n');
    };
    const spreadSetting = {
        cols: [
            {title: '项目节编号', colSpan: '1', rowSpan: '2', field: 'code', hAlign: 0, width: 150, formatter: '@', cellType: 'tree'},
            {title: '名称', colSpan: '1', rowSpan: '2', field: 'name', hAlign: 0, width: 230, formatter: '@'},
            {title: '单位', colSpan: '1', rowSpan: '2', field: 'unit', hAlign: 1, width: 50, formatter: '@', cellType: 'unit'},
            {title: '投资估算|数量1/数量2', colSpan: '3|1', rowSpan: '1|1', field: 'gu_dgn_qty', hAlign: 2, width: 80, bc_type: 'number'},
            {title: '|经济指标', colSpan: '|1', rowSpan: '|1', field: 'gu_dgn_price', hAlign: 2, width: 80, type: 'Number', bc_type: 'number'},
            {title: '|金额', colSpan: '|1', rowSpan: '|1', field: 'gu_tp', hAlign: 2, width: 80, type: 'Number', bc_type: 'number'},
            {title: '初步概算|数量1/数量2', colSpan: '3|1', rowSpan: '1|1', field: 'gai_dgn_qty', hAlign: 2, width: 80, bc_type: 'number'},
            {title: '|经济指标', colSpan: '|1', rowSpan: '|1', field: 'gai_dgn_price', hAlign: 2, width: 80, type: 'Number', bc_type: 'number'},
            {title: '|金额', colSpan: '|1', rowSpan: '|1', field: 'gai_tp', hAlign: 2, width: 80, type: 'Number', bc_type: 'number'},
            {title: '施工图预算|数量1/数量2', colSpan: '3|1', rowSpan: '1|1', field: 'yu_dgn_qty', hAlign: 2, width: 80, bc_type: 'number'},
            {title: '|经济指标', colSpan: '|1', rowSpan: '|1', field: 'yu_dgn_price', hAlign: 2, width: 80, type: 'Number', bc_type: 'number'},
            {title: '|金额', colSpan: '|1', rowSpan: '|1', field: 'yu_tp', hAlign: 2, width: 80, type: 'Number', bc_type: 'number'},
            {title: '台账|数量1/数量2', colSpan: '3|1', rowSpan: '1|1', field: 'dgn_qty', hAlign: 2, width: 80, bc_type: 'number', visible: false},
            {title: '|经济指标', colSpan: '|1', rowSpan: '|1', field: 'dgn_price', hAlign: 2, width: 80, type: 'Number', bc_type: 'number', visible: false},
            {title: '|金额', colSpan: '|1', rowSpan: '|1', field: 'total_price', hAlign: 2, width: 80, type: 'Number', bc_type: 'number', visible: false},
            {title: '决算|数量1/数量2', colSpan: '3|1', rowSpan: '1|1', field: 'final_dgn_qty', hAlign: 2, width: 80, bc_type: 'number', visible: false},
            {title: '|经济指标', colSpan: '|1', rowSpan: '|1', field: 'final_dgn_price', hAlign: 2, width: 80, type: 'Number', bc_type: 'number', visible: false},
            {title: '|金额', colSpan: '|1', rowSpan: '|1', field: 'final_tp', hAlign: 2, width: 80, type: 'Number', bc_type: 'number', visible: false},
            {title: '数据对比', colSpan: '1', rowSpan: '2', field: 'stackedBar', hAlign: 0, width: 300, cellType: 'stackedBar', stackedBarCover: false, bc_type: 'grid', visible: false, getTip: getStackedBarTip},
            {title: '增幅%|数量1/数量2', colSpan: '2|1', rowSpan: '1|1', field: 'grow_dgn_qty', hAlign: 2, width: 80},
            {title: '|金额', colSpan: '|1', rowSpan: '|1', field: 'grow_tp', hAlign: 2, width: 80, type: 'Number'},
        ],
        emptyRows: 0,
        headRows: 2,
        headRowHeight: [25, 25],
        defaultRowHeight: 21,
        headerFont: '12px 微软雅黑',
        font: '12px 微软雅黑',
        readOnly: true,
        frozenColCount: 3,
        frozenLineColor: '#93b5e4',
        localCache: { key: 'budget-compare', colWidth: true },

    };
    sjsSettingObj.setFxTreeStyle(spreadSetting, sjsSettingObj.FxTreeStyle.jz);
    let sfSelect;
    const compareObj = {
        curFinalId() {
            return this.finalInfo ? this.finalInfo.id : undefined;
        },
        initFinalCol() {
            const finalColField = ['dgn_qty', 'dgn_price', 'total_price', 'final_dgn_qty', 'final_dgn_price', 'final_tp', 'grow_dgn_qty', 'grow_tp'];
            const finalCol = spreadSetting.cols.filter(x => { return finalColField.indexOf(x.field) >= 0; });
            if (finalCol.length > 0 && !finalCol[0].visible) {
                finalCol.forEach(x => { x.visible = true; });
                this.initShowType();
                SpreadJsObj.refreshColumnVisible(compareSheet);
            }
        },
        initShowType() {
            const type = this.compareType;
            spreadSetting.cols.forEach(x => {
                if (!x.bc_type) return;
                x.visible = x.bc_type === type;
            });
            const colIndex = spreadSetting.cols.findIndex(x => { return x.field === 'stackedBar'});
            spreadSetting.cols[colIndex].stackedBarCover = parseInt(this.stackedBarCover);
        },
        expand(tree, tag) {
            switch (tag) {
                case "1":
                case "2":
                case "3":
                case "4":
                case "5":
                    tree.expandByLevel(parseInt(tag));
                    break;
                case "last":
                    tree.expandByCustom(() => { return true; });
                    break;
            }
        },
        calcStackedBar(tree) {
            const calcField = this.stackedBarField;
            const calcFieldColor = { 'gu_tp': '#657798', 'gai_tp': '#EE6666', 'yu_tp': '#74CBED', 'total_price': '#FAC858', 'final_tp': '#62DAAB' };
            const calcFieldCaption = { 'gu_tp': '估算', 'gai_tp': '概算', 'yu_tp': '预算', 'total_price': '台账', 'final_tp': '决算' };
            const calc = function(node, base){
                // const parent = tree.getParent(node);
                // if (!parent) {
                //     base = 0;
                //     for (const cf of calcField) {
                //         base = Math.max(node[cf], base);
                //     }
                // }
                node.stackedBar = [];
                node.stackedBarTips = [];
                for (const cf of calcField) {
                    node.stackedBar.push({color: calcFieldColor[cf], percent: ZhCalc.div(node[cf], base), field: cf});
                    node.stackedBarTips.push(`${calcFieldCaption[cf]}: ${node[cf] || 0}`);
                }
                if (node.children) {
                    for (const child of node.children) {
                        calc(child, base);
                    }
                }
            };
            let commonBase = 0;
            tree.children.forEach(x => {
                for (const cf of calcField) {
                    commonBase = Math.max(x[cf] || 0, commonBase);
                }
            });
            for (const child of tree.children) {
                calc(child, commonBase);
            }
        },
        loadBudgetData(result) {
            const compareTree = createNewPathTree('final', {
                id: 'id',
                pid: 'pid',
                order: 'order',
                level: 'level',
                rootId: -1,
            });
            const setting = { id: 'tree_id', pid: 'tree_pid', order: 'order', level: 'level', rootId: -1, calcFields: ['total_price'] };
            const guTree = createNewPathTree('ledger', setting);
            guTree.loadDatas(result.gu);
            treeCalc.calculateAll(guTree);
            compareTree.loadTree(guTree, function (cur, source) {
                cur.base = true;
                cur.gu_dgn_qty1 = ZhCalc.add(cur.gu_dgn_qty1, source.dgn_qty1);
                cur.gu_dgn_qty2 = ZhCalc.add(cur.gu_dgn_qty2, source.dgn_qty2);
                cur.gu_tp = ZhCalc.add(cur.gu_tp, source.total_price);
            });
            const gaiTree = createNewPathTree('ledger', setting);
            gaiTree.loadDatas(result.gai);
            treeCalc.calculateAll(gaiTree);
            compareTree.loadTree(gaiTree, function (cur, source) {
                cur.base = true;
                cur.gai_dgn_qty1 = ZhCalc.add(cur.gai_dgn_qty1, source.dgn_qty1);
                cur.gai_dgn_qty2 = ZhCalc.add(cur.gai_dgn_qty2, source.dgn_qty2);
                cur.gai_tp = ZhCalc.add(cur.gai_tp, source.total_price);
            });
            const yuTree = createNewPathTree('ledger', setting);
            yuTree.loadDatas(result.yu);
            treeCalc.calculateAll(yuTree);
            compareTree.loadTree(yuTree, function (cur, source) {
                cur.base = true;
                cur.yu_dgn_qty1 = ZhCalc.add(cur.yu_dgn_qty1, source.dgn_qty1);
                cur.yu_dgn_qty2 = ZhCalc.add(cur.yu_dgn_qty2, source.dgn_qty2);
                cur.yu_tp = ZhCalc.add(cur.yu_tp, source.total_price);
            });
            compareTree.afterLoad(node => {
                node.gu_dgn_price = ZhCalc.div(node.gu_tp, node.gu_dgn_qty1, 2);
                node.gu_dgn_qty = node.gu_dgn_qty1
                    ? (node.gu_dgn_qty2 ? node.gu_dgn_qty1 + '/' + node.gu_dgn_qty2 : node.gu_dgn_qty1)
                    : (node.gu_dgn_qty2 ? '/' + node.gu_dgn_qty2 : '');
                node.gai_dgn_price = ZhCalc.div(node.gai_tp, node.gai_dgn_qty1, 2);
                node.gai_dgn_qty = node.gai_dgn_qty1
                    ? (node.gai_dgn_qty2 ? node.gai_dgn_qty1 + '/' + node.gai_dgn_qty2 : node.gai_dgn_qty1)
                    : (node.gai_dgn_qty2 ? '/' + node.gai_dgn_qty2 : '');
                node.yu_dgn_price = ZhCalc.div(node.yu_tp, node.yu_dgn_qty1, 2);
                node.yu_dgn_qty = node.yu_dgn_qty1
                    ? (node.yu_dgn_qty2 ? node.yu_dgn_qty1 + '/' + node.yu_dgn_qty2 : node.yu_dgn_qty1)
                    : (node.yu_dgn_qty2 ? '/' + node.yu_dgn_qty2 : '');
            });
            compareTree.resortChildrenByCustom(function (x, y) {
                const iCode = compareCode(x.code, y.code);
                if (iCode) return iCode;
                if (!x.name) return -1;
                if (!y.name) return 1;
                return x.name.localeCompare(y.name);
            });
            const expandTag = getLocalCache('revise-compare-level');
            if (expandTag) compareObj.expand(compareTree, expandTag);
            this.calcStackedBar(compareTree);
            SpreadJsObj.loadSheetData(compareSheet, SpreadJsObj.DataType.Tree, compareTree);
        },
        loadFinalData(result, msg) {
            if (msg) toastr.warning(msg);
            this.finalInfo = result.finalInfo;
            $('#final-info').html(`${moment(result.finalInfo.update_time).format('YYYY-MM-DD HH:mm:ss')} ${result.finalInfo.u_name}（${result.finalInfo.u_role}）`);
            this.initFinalCol();
            const finalTree = createNewPathTree('ledger', {
                id: 'tree_id',
                pid: 'tree_pid',
                order: 'order',
                level: 'level',
                rootId: -1,
            });
            finalTree.loadDatas(result.final);
            const expandTag = getLocalCache('revise-compare-level');
            if (expandTag) compareObj.expand(finalTree, expandTag);
            this.calcStackedBar(finalTree);
            SpreadJsObj.loadSheetData(compareSheet, SpreadJsObj.DataType.Tree, finalTree);
            if (sfSelect) sfSelect.reloadSelect(this.finalInfo.tender);
        },
        loadCacheData(){
            let stackedBarCache = getLocalCache(stackedBarKey);
            if (stackedBarCache === null) stackedBarCache = 'gai_tp,total_price,final_tp';
            this.setStackedBarField(stackedBarCache ? stackedBarCache.split(',') : []);
            this.setCompareType(getLocalCache(compareTypeKey));
            this.setStackedBarCover(getLocalCache(stackedBarCoverKey));
            this.initShowType();
        },
        setStackedBarField(field){
            this.stackedBarField = field;
            setLocalCache(stackedBarKey, field.join(','));
            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 || 'number';
            $('[name=showType]').removeClass('active');
            $(`[tag=${this.compareType}]`).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;
            });
            setLocalCache(compareTypeKey, this.compareType);
        },
        setStackedBarCover(cover){
            this.stackedBarCover = '1'; //cover || '1';
            const colIndex = spreadSetting.cols.findIndex(x => { return x.field === 'stackedBar'});
            spreadSetting.cols[colIndex].stackedBarCover = parseInt(this.stackedBarCover);
            SpreadJsObj.reloadColData(compareSheet, colIndex);
            setLocalCache(stackedBarCoverKey, this.stackedBarCover);
        }
    };
    compareObj.loadCacheData();
    SpreadJsObj.initSheet(compareSheet, spreadSetting);

    function compareCode(str1, str2, symbol = '-') {
        if (!str1) {
            return 1;
        } else if (!str2) {
            return -1;
        }

        function compareSubCode(code1, code2) {
            if (numReg.test(code1)) {
                if (numReg.test(code2)) {
                    return parseInt(code1) - parseInt(code2);
                } else {
                    return -1
                }
            } else {
                if (numReg.test(code2)) {
                    return 1;
                } else {
                    return code1 === code2 ? 0 : (code1 < code2 ? -1 : 1); //code1.localeCompare(code2);
                }
            }
        }
        const numReg = /^[0-9]+$/;
        const aCodes = str1.split(symbol), bCodes = str2.split(symbol);
        for (let i = 0, iLength = Math.min(aCodes.length, bCodes.length); i < iLength; ++i) {
            const iCompare = compareSubCode(aCodes[i], bCodes[i]);
            if (iCompare !== 0) {
                return iCompare;
            }
        }
        return aCodes.length - bCodes.length;
    }

    postData(window.location.pathname + '/load', {}, function (result, msg) {
        if (result.final) {
            compareObj.loadFinalData(result, msg);
        } else {
            compareObj.loadBudgetData(result);
        }
    });

    $.subMenu({
        menu: '#sub-menu', miniMenu: '#sub-mini-menu', miniMenuList: '#mini-menu-list',
        toMenu: '#to-menu', toMiniMenu: '#to-mini-menu',
        key: 'menu.1.0.0',
        miniHint: '#sub-mini-hint', hintKey: 'menu.hint.1.0.1',
        callback: function (info) {
            if (info.mini) {
                $('.panel-title').addClass('fluid');
                $('#sub-menu').removeClass('panel-sidebar');
            } else {
                $('.panel-title').removeClass('fluid');
                $('#sub-menu').addClass('panel-sidebar');
            }
            autoFlashHeight();
            compareSpread.refresh();
        }
    });
    // 显示层次
    (function (select, sheet) {
        $(select).click(function () {
            if (!sheet.zh_tree) return;
            const tag = $(this).attr('tag');
            const tree = sheet.zh_tree;
            setTimeout(() => {
                showWaitingView();
                compareObj.expand(tree, tag);
                SpreadJsObj.refreshTreeRowVisible(sheet);
                setLocalCache('revise-compare-level', tag);
                closeWaitingView();
            }, 100);
        });
    })('a[name=showLevel]', compareSheet);


    class sfObject {
        constructor() {
            const self = this;
            this.selectTree = Tender2Tree.convert(category, tenderList, null, null, function (node, source) {
                node.lastStageOrder =`第${source.lastStageOrder}期`;
                node.lastStageStatus = source.lastStageStatus;
            });
            if (compareObj.finalInfo) {
                this.selectTree.datas.forEach(x => {
                    x.selected = compareObj.finalInfo.tender.indexOf(x.tid + '') >= 0;
                })
            }
            const sfSpreadSetting = {
                cols: [
                    {title: '选择', field: 'selected', hAlign: 1, width: 40, formatter: '@', cellType: 'checkbox'},
                    {title: '名称', field: 'name', hAlign: 0, width: 180, formatter: '@', cellType: 'tree'},
                    {title: '期数', field: 'lastStageOrder', hAlign: 1, width: 60, formatter: '@'},
                    {title: '审批状态', field: 'lastStageStatus', hAlign: 1, width: 60, formatter: '@'},
                ],
                emptyRows: 0,
                headRows: 1,
                headRowHeight: [32],
                defaultRowHeight: 21,
                headerFont: '12px 微软雅黑',
                font: '12px 微软雅黑',
                headColWidth: [30],
                selectedBackColor: '#fffacd',
                readOnly: true,
            };
            this.spread = SpreadJsObj.createNewSpread($('#sf-spread')[0]);
            this.sheet = this.spread.getActiveSheet();
            SpreadJsObj.initSheet(this.sheet, sfSpreadSetting);
            SpreadJsObj.loadSheetData(this.sheet, SpreadJsObj.DataType.Tree, this.selectTree);

            this.spread.bind(spreadNS.Events.ButtonClicked, function (e, info) {
                if (!info.sheet.zh_setting) return;

                const col = info.sheet.zh_setting.cols[info.col];
                if (col.field !== 'selected') return;

                const node = SpreadJsObj.getSelectObject(info.sheet);
                self.selectNode(node, !node[col.field]);
                SpreadJsObj.reloadColData(info.sheet, 0);
            });


            $('#sf-select-all').click(function() {
                for (const n of self.selectTree.nodes) {
                    n.selected = this.checked;
                }
                SpreadJsObj.reloadColData(self.sheet, 0);
            });
            $('#select-final-ok').click(() => {
                const rela = self.getSelects();
                if (rela.length === 0) return;
                postData(window.location.pathname + '/final', {final_id: compareObj.curFinalId(), id: rela}, function(result, msg) {
                    compareObj.loadFinalData(result, msg);
                    $('#select-final').modal('hide');
                });
            });
        }
        reloadSelect(select) {
            if (compareObj.finalInfo) {
                this.selectTree.datas.forEach(x => {
                    x.selected = select.indexOf(x.tid + '') >= 0;
                })
            }
            SpreadJsObj.reloadColData(this.sheet, 0);
        }
        selectNode(node, select) {
            const posterity = this.selectTree.getPosterity(node);
            posterity.unshift(node);
            for (const p of posterity) {
                p.selected = select;
            }
        }
        getSelects() {
            const select = [];
            for (const n of this.selectTree.nodes) {
                if ((!n.children || n.children.length === 0) && n.selected) select.push(n.tid);
            }
            return select;
        }
    }

    $('#select-final').on('shown.bs.modal', () => {
        if (!sfSelect) sfSelect = new sfObject();
    });
    $('#stackedBar-ok').click(function() {
        const checked = $('[name=stackedBar]:checked');
        const field = [];
        checked.each((i, x) => { field.push(x.value)});
        compareObj.setStackedBarField(field);
    });
    $('#dp-stackedBar').click(function() {
        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');
        compareObj.setStackedBarCover(cover);
    });
    $('#dp-cover').click(function() {
        const cover = compareObj.stackedBarCover;
        const checked = $('a[name=stackedBarCover]');
        checked.each((i, x) => {
            if (x.getAttribute('tag') === cover) {
                $('i', x).addClass('text-primary').removeClass('text-white');
            } else {
                $('i', x).removeClass('text-primary').addClass('text-white');
            }
        });
    });
});