Calculation/app/view/datacollect/index_cost.ejs

<link href="/public/css/bootstrap/bootstrap-colorpicker.min.css" rel="stylesheet">
<div class="panel-content" style="background:#2c3237 !important">
    <div class="panel-title fluid border-top-0" style="background:#2c3237 !important">
        <div class="title-main d-flex justify-content-between">
            <div class="d-inline-block mr-2">
                <div class="btn-group" id="first-category">
                    <button type="button" class="btn btn-sm btn-outline-dark text-white dropdown-toggle" data-cid="" data-value="" data-toggle="dropdown">全部</button>
                    <div class="dropdown-menu" aria-labelledby="zhankai">
                        <a class="dropdown-item select-cate" data-value="" href="javascript:void(0);">全部</a>
                        <% if (categoryData.length > 0 && categoryData[0].value.length > 0) { %>
                            <% for (const c of categoryData[0].value) { %>
                                <a class="dropdown-item select-cate" data-cid="<%- c.cid %>" data-value="<%- c.id %>" href="javascript:void(0);"><%- c.value %></a>
                            <% } %>
                        <% } %>
                    </div>
                </div>
                <% if (categoryData[1] && categoryData[1].value.length > 0) { %>
                    <div class="btn-group" id="second-category" style="display: none">
                        <button type="button" class="btn btn-sm btn-outline-dark text-white dropdown-toggle" data-cid="" data-value="" data-toggle="dropdown">全部</button>
                        <div class="dropdown-menu" aria-labelledby="zhankai">
                            <a class="dropdown-item select-cate" data-value="" href="javascript:void(0);">全部</a>
                            <% for (const c of categoryData[1].value) { %>
                                <a class="dropdown-item select-cate" data-cid="<%- c.cid %>" data-value="<%- c.id %>" href="javascript:void(0);"><%- c.value %></a>
                            <% } %>
                        </div>
                    </div>
                <% } %>
                <% if (categoryData[2] && categoryData[2].value.length > 0) { %>
                    <div class="btn-group" id="third-category" style="display: none">
                        <button type="button" class="btn btn-sm btn-outline-dark text-white dropdown-toggle" data-cid="" data-value="" data-toggle="dropdown">全部</button>
                        <div class="dropdown-menu" aria-labelledby="zhankai">
                            <a class="dropdown-item select-cate" data-value="" href="javascript:void(0);">全部</a>
                            <% for (const c of categoryData[2].value) { %>
                                <a class="dropdown-item select-cate" data-cid="<%- c.cid %>" data-value="<%- c.id %>" href="javascript:void(0);"><%- c.value %></a>
                            <% } %>
                        </div>
                    </div>
                <% } %>
            </div>
            <div>
                <a href="javascript:void(0)"  title="全屏显示" id="showFull" class="text-white"><i class="fa fa-arrows-alt"></i></a>
                <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-dark text-white dropdown-toggle" data-toggle="dropdown" id="zhankai">决策大屏<span>7</span></button>
                    <div class="dropdown-menu" aria-labelledby="zhankai">
                        <% for (const i of ctx.subProject.data_collect_pages) { %>
                            <% if (['8'].includes(i)) { %>
                                <a class="dropdown-item" target="_blank" href="<%- shj_url %>">决策大屏<%- i %></a>
                            <% } else { %>
                                <a class="dropdown-item" href="/sp/<%- ctx.subProject.id %>/datacollect/index/<%- i %>">决策大屏<%- i %></a>
                            <% } %>
                        <% } %>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="content-wrap" id="big-data">
        <div style="height: 30px;background-color: #2c3237; display: none" id="exitfull-div">
            <div class="title-main d-flex">
                <div class="ml-auto">
                    <div class="dropdown d-flex float-left mt-1 mr-2">
                        <button id="exitFull" class="btn btn-sm btn-secondary ml-auto">退出全屏</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="c-body" style="background:#2c3237 !important">
            <div class="flex-content">
                <div class="row mx-2" style="height: 63.5vh">
                    <div class="col-3 px-0 height-100">
                        <div class="left-content height-100">
                            <div class="left-card-content height-100">
                                <div class="height-25 mb-2">
                                    <div class="card text-center bg-dark text-white mr-2 py-2 height-100">
                                        <div class="height-100" style="display: grid;place-items: center;">
                                            <div style="line-height: 3;">
                                                <div style="font-size: 1.5rem" class="data_total_in_tp">0.00</div>
                                                <div style="font-size: .9rem;">
                                                    <span style="background-color: #42474c;border-radius: 1rem;padding: .25rem .75rem">项目收入</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="height-25 mb-2">
                                    <div class="card text-center bg-dark text-white mr-2 py-2 height-100">
                                        <div class="height-100" style="display: grid;place-items: center;">
                                            <div style="line-height: 3;">
                                                <div style="font-size: 1.5rem" class="data_total_out_tp">0.00</div>
                                                <div style="font-size: .9rem;">
                                                    <span style="background-color: #42474c;border-radius: 1rem;padding: .25rem .75rem">项目支出</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="height-25 mb-2">
                                    <div class="card text-center bg-dark text-white mr-2 py-2 height-100">
                                        <div class="height-100" style="display: grid;place-items: center;">
                                            <div style="line-height: 3;">
                                                <div style="font-size: 1.5rem" class="data_total_profit">0.00</div>
                                                <div style="font-size: .9rem;">
                                                    <span style="background-color: #42474c;border-radius: 1rem;padding: .25rem .75rem">利润</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="height-25" style="height: 24.3%">
                                    <div class="card text-center bg-dark text-white mr-2 py-2 height-100">
                                        <div class="height-100" style="display: grid;place-items: center;">
                                            <div style="line-height: 3;">
                                                <div style="font-size: 1.5rem" class="data_total_profit_percent">0%</div>
                                                <div style="font-size: .9rem;">
                                                    <span style="background-color: #42474c;border-radius: 1rem;padding: .25rem .75rem">利润率</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 px-0 height-100">
                        <div class="center-content height-100 mr-2">
                            <div class="center-chart-content height-100">
                                <div class="center-di">
                                    <div class="card bg-dark height-100">
                                        <div class="jlchart" data-chart-num="1" id="jlchart" style="height: 100%; width: 100%;"></div>
                                    </div>
                                </div>
                                <div class="center-chart">
                                    <div class="card height-100 bg-dark mt-2">
                                        <div class="di-content mb-2">
                                            <div class="jldbchart" data-chart-num="1" id="jldbchart" style="height: 100%; width: 100%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-3 px-0 height-100">
                        <div class="right-content height-100">
                            <div class="right-chart-content height-100">
                                <div class="right-month">
                                    <h6 class="card bg-dark text-center text-white m-0 pt-2 pb-3">期数统计</h6>
                                    <div class="row right-month-height">
                                        <div class="col-6 pr-0 height-50">
                                            <div class="card text-center bg-dark text-white border-right-0 border-botton-0 height-100">
                                                <div class="card-body card-small-body height-100">
                                                    <h5 class="card-title text-center height-50" style="font-size: 2.80rem;line-height: 200%"><span class="stage_num">0</span></h5>
                                                    <p class="card-text text-muted height-50">计量期</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6 pl-0 height-50">
                                            <div class="card text-center bg-dark text-white border-botton-0 height-100">
                                                <div class="card-body card-small-body height-100">
                                                    <h5 class="card-title text-center height-50" style="font-size: 2.80rem;line-height: 200%"><span class="cost_ledger_num">0</span></h5>
                                                    <p class="card-text text-muted height-50">成本报审</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6 pr-0 height-50">
                                            <div class="card text-center bg-dark text-white border-right-0 border-top-0 height-100">
                                                <div class="card-body card-small-body height-100">
                                                    <h5 class="card-title text-center height-50" style="font-size: 2.80rem;line-height: 200%"><span class="cost_book_num">0</span></h5>
                                                    <p class="card-text text-muted height-50">财务账面</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6 pl-0 height-50">
                                            <div class="card text-center bg-dark text-white border-top-0 height-100">
                                                <div class="card-body card-small-body height-100">
                                                    <h5 class="card-title text-center height-50" style="font-size: 2.80rem;line-height: 200%"><span class="cost_analysis_num">0</span></h5>
                                                    <p class="card-text text-muted height-50">成本分析</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="right-chart">
                                    <div class="card height-100 bg-dark">
                                        <div class="jlwcdchart" id="jlwcdchart" style="height: 100%; width: 100%;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mx-2" style="height: 32vh">
                    <div class="col-9 px-0 pt-1 height-100">
                        <div class="center-table height-100" style="padding-right: .5rem !important;">
                            <div class="card height-100 bg-dark mt-2">
                                <h6 class="bg-dark text-center text-white m-0 py-3">投资控制（万元）</h6>
                                <div class="tablebox">
                                    <table id="tableId">
                                        <thead>
                                        <tr class="text-center">
                                            <th></th>
                                            <th>投资估算</th>
                                            <th>设计概算</th>
                                            <th>施工图预算</th>
                                            <th>控制目标</th>
                                            <th>已完成</th>
                                            <th>完成比例（%）</th>
                                        </tr>
                                        </thead>
                                        <tbody class="stage-data">
                                        </tbody>
                                    </table>
                                    <table id="tableId1"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-3 px-0 pt-1 height-100">
                        <div class="right-biaoduan height-100">
                            <div class="card height-100 bg-dark mt-2">
                                <h6 class="bg-dark text-center text-white m-0 py-3">利润率排名</h6>
                                <div class="tablebox">
                                    <table id="profit_tableId">
                                        <thead>
                                        <tr class="text-center">
                                            <th></th>
                                            <th>标段</th>
                                            <th>利润率</th>
                                        </tr>
                                        </thead>
                                        <tbody class="tender-data">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/public/js/path_tree.js"></script>
<script src="/public/js/shares/tenders2tree.js"></script>
<script src="/public/js/datacollect_scroll.js"></script>
<script type="text/javascript">  autoFlashHeight();</script>
<script type="text/javascript">
    // 利润排名占比饼图表
    var chart1 = document.getElementsByClassName('jlwcdchart');
    option1 = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
            // 当前鼠标位置
            // position: 'top',
        },
        title: {
            text: '利润排名占比',
            left: 'center',
            top:'7%'
        },
        color: ['rgba(38, 217, 217,0.7)','rgba(78, 139, 229,0.7)',
            'rgba(78, 229, 139,0.7)','rgba(108, 78, 229,0.7)',
            'rgba(58,207,221,0.7)','rgba(164, 229, 78,0.7)',
            'rgba(199, 78, 229,0.7)', 'rgba(229, 92, 174, 0.7)',
            'rgba(229, 214, 78, 0.7)', 'rgba(241, 87, 96, 0.7)',
            'rgba(242, 179, 82, 0.7)'],
        backgroundColor: '#343a40 ',
        // tooltip: {
        //     trigger: 'item'
        // },
        // legend: {
        //     orient: 'vertical',
        //     left: 'center',
        // },
        series: [
            {
                name: '利润金额',
                type: 'pie',
                radius: '60%',
                top:'15%',
                formatter: function(name){
                    return name.length>10?name.substr(0,10)+"...":name;
                },
                data: [],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    var myChart1_1 = echarts.init(chart1[0], 'dark');
    myChart1_1.setOption(option1);
    // 利润统计状图表
    option2 = {
        title: {
            text: '利润统计',
            left: 'center',
            top:'5%'
        },
        color: ['rgba(38, 217, 217,0.7)','rgba(78, 139, 229,0.7)',
            'rgba(78, 229, 139,0.7)','rgba(108, 78, 229,0.7)',
            'rgba(58,207,221,0.7)','rgba(164, 229, 78,0.7)',
            'rgba(199, 78, 229,0.7)', 'rgba(229, 92, 174, 0.7)',
            'rgba(229, 214, 78, 0.7)', 'rgba(241, 87, 96, 0.7)',
            'rgba(242, 179, 82, 0.7)'],
        backgroundColor: '#343a40 ',
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
        },

        dataZoom: [
            {
                brushSelect:false,
                // zoomLock: false,
                type: 'slider',
                show: true,
                realtime: true,
                showdetail: false,
                showDataShadow: false,
                // dataZoomIndex: 10,
                start: 0,
                end: 8,
                handleSize: 0,
                height: 10,
                bottom: '10%',
            },
            // {
            //     // realtime: true,
            //     type: 'slider',
            //     show: true,
            //     realtime: true,
            //     showdetail: false,
            //     showDataShadow: false,
            //     // dataZoomIndex: 10,
            //     start: 0,
            //     end: 8,
            //     handleSize: 0,
            //     bottom:30,
            //     height:10,
            // }
        ],
        // legend: {
        //     data: ['利润'],
        //     top:'17%'
        // },
        grid: {
            top:'25%',
            left: '3%',
            right: '4%',
            bottom: '15%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: [],
                axisLabel: {
                    show: true,
                    interval: 0,
                    textStyle: {
                        color: "#fff",
                        fontSize: 14
                    },
                    formatter: function(value) {
                        var res = value;
                        if(res.length > 6) {
                            res = res.substring(0, 5) + "..";
                        }
                        return res;
                    }
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name:'金额',
                position: 'left',
                axisLabel : {
                    formatter: function (value, index) {
                        if (value < 0) {
                            let newValue = Math.abs(value);
                            if (newValue >= 10000 && newValue < 10000000) {
                                newValue = newValue / 10000 + "万";
                            } else if (newValue >= 10000000) {
                                newValue = newValue / 10000000 + "千万";
                            }
                            value = '-' + newValue;
                        }
                        if (value >= 10000 && value < 10000000) {
                            value = value / 10000 + "万";
                        } else if (value >= 10000000) {
                            value = value / 10000000 + "千万";
                        }
                        return value;
                    }
                },
                splitArea : {show : true}
            },
            // {
            //     type: 'value',
            //     name:'完成度',
            //     position: 'right',
            //     min:0,
            //     max:100,
            //     axisLabel : {
            //         formatter: '{value} %'
            //     },
            //     splitArea : {show : true}
            // }
        ],
        series: [
            {
                name: '利润',
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                data: []
            },
        ]
    };
    var chart2 = document.getElementsByClassName('jlchart');
    var myChart2_1 = echarts.init(chart2[0], 'dark');
    myChart2_1.setOption(option2);
    // myChart2.setOption(option);
    // 利润率统计柱状图表
    // var myChart3 = echarts.init(document.getElementsByClassName('jlwcdchart')[0], 'dark');
    option3 = {
        title: {
            text: '利润率统计',
            left: 'center',
            top:'5%'
        },
        color: ['rgba(38, 217, 217,0.7)','rgba(78, 139, 229,0.7)',
            'rgba(78, 229, 139,0.7)','rgba(108, 78, 229,0.7)',
            'rgba(58,207,221,0.7)','rgba(164, 229, 78,0.7)',
            'rgba(199, 78, 229,0.7)', 'rgba(229, 92, 174, 0.7)',
            'rgba(229, 214, 78, 0.7)', 'rgba(241, 87, 96, 0.7)',
            'rgba(242, 179, 82, 0.7)'],
        backgroundColor: '#343a40 ',
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
        },

        dataZoom: [
            {
                brushSelect:false,
                // zoomLock: false,
                type: 'slider',
                show: true,
                realtime: true,
                showdetail: false,
                showDataShadow: false,
                // dataZoomIndex: 10,
                start: 0,
                end: 8,
                handleSize: 0,
                height: 10,
                bottom: '10%',
            },
        ],
        // legend: {
        //     data: ['利润率'],
        //     top:'17%'
        // },
        grid: {
            top:'25%',
            left: '3%',
            right: '4%',
            bottom: '15%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: [],
                axisLabel: {
                    show: true,
                    interval: 0,
                    textStyle: {
                        color: "#fff",
                        fontSize: 14
                    },
                    formatter: function(value) {
                        var res = value;
                        if(res.length > 6) {
                            res = res.substring(0, 5) + "..";
                        }
                        return res;
                    }
                }
            }
        ],
        yAxis: [
            // {
            //     type: 'value',
            //     name:'利润率',
            //     position: 'left',
            //     axisLabel : {
            //         formatter: function (value, index) {
            //             if (value < 0) {
            //                 let newValue = Math.abs(value);
            //                 if (newValue >= 10000 && newValue < 10000000) {
            //                     newValue = newValue / 10000 + "万";
            //                 } else if (newValue >= 10000000) {
            //                     newValue = newValue / 10000000 + "千万";
            //                 }
            //                 value = '-' + newValue;
            //             }
            //             if (value >= 10000 && value < 10000000) {
            //                 value = value / 10000 + "万";
            //             } else if (value >= 10000000) {
            //                 value = value / 10000000 + "千万";
            //             }
            //             return value;
            //         }
            //     },
            //     splitArea : {show : true}
            // },
            {
                type: 'value',
                name:'利润率',
                position: 'left',
                min:0,
                max:100,
                axisLabel : {
                    formatter: '{value} %'
                },
                splitArea : {show : true}
            }
        ],
        series: [
            {
                name: '利润率',
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                data: []
            },
        ]
    };
    var chart3 = document.getElementsByClassName('jldbchart');
    var myChart3_1 = echarts.init(chart3[0], 'dark');
    myChart3_1.setOption(option3);

    function echartsReset() {
        myChart1_1.resize();
        myChart2_1.resize();
        myChart3_1.resize();
    }
    $(function () {
        $('#showFull').click(function () {
            const full=document.getElementById("big-data");
            launchIntoFullscreen(full);
        });
        $('#exitFull').click(function () {
            exitFullscreen();
        })
    })
    let resizeTimer = null;
    $(window).bind('resize', function () {
        if (resizeTimer) clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function () {
            echartsReset();
            $(".tableid_").find('th').each(function(i) {
                $(this).css('width', $('#tableId').find('th:eq(' + i + ')').innerWidth());
            });
        }, 500);
    })

    // 数据全屏
    function launchIntoFullscreen(element) {
        if(element.requestFullscreen){
            element.requestFullscreen();
        }
        else if(element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        }
        else if(element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen();
        }
        else if(element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
    }
    function exitFullscreen() {
        if(document.exitFullscreen) {
            document.exitFullscreen();
        } else if(document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if(document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }
    document.addEventListener("fullscreenchange", function (event) {
        if (document.fullscreenElement) {
            $('#exitfull-div').show();
            $('#showFull').hide();
        } else {
            $('#exitfull-div').hide();
            $('#showFull').show();
        }
    });
</script>
<script>
    const originDataCollect = parseInt('<%- ctx.subProject.data_collect %>');
    const category = JSON.parse(unescape('<%- escape(JSON.stringify(categoryData)) %>'));
    let tenders = '';
    // let noticeList = '';
    $(function () {
        const compareObj = {
            curFinalId() {
                return this.finalInfo ? this.finalInfo.id : undefined;
            },
            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);
                // console.log(compareTree);
                setPageData(compareTree);
            },
            loadFinalData(result, msg) {
                if (msg) toastr.warning(msg);
                this.finalInfo = result.finalInfo;
                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);
                // console.log(finalTree);
                setPageData(finalTree);

            },
            loadCacheData(){
                const stackedBarCache = 'gai_tp,total_price,final_tp';
                this.setStackedBarField(stackedBarCache.split(','));
            },
            setStackedBarField(field){
                this.stackedBarField = field;
            },
        };
        compareObj.loadCacheData();

        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(`/sp/${spid}/datacollect/load`, {}, function (result, msg) {
            if (result.budget) {
                if (result.budget.final) {
                    compareObj.loadFinalData(result.budget, msg);
                } else {
                    compareObj.loadBudgetData(result.budget);
                }
            }
            const cost_tenderList = _.filter(result.tenderList, function (item) {
                return item.cost_analysis || item.cost_analsis_num || item.cost_ledger_num || item.cost_book_num || item.stage_num;
            })
            tenders = cost_tenderList;
            if (category && category.length > 0) {
                if (category[0] && category[0].value.length > 0) {
                    for (const [i, fc] of category[0].value.entries()) {
                        const fcCategory = {cid: fc.cid, value: fc.id};
                        if (_.findIndex(tenders, function (item) {
                            return _.findIndex(item.category, fcCategory) !== -1;
                        }) === -1) {
                            $('#first-category .select-cate').eq(i + 1).hide();
                        } else {
                            $('#first-category .select-cate').eq(i + 1).show();
                        }
                    }
                }
            }
            setData(tenders, 0);
        });

        function setPageData(tree) {
            let html = '';
            if (tree.children.length > 0) {
                // 分析第一层结构，获取各个部分金额非全0的及除了回收金额层
                const level1List = _.filter(tree.children, function (item) {
                    return item.name.indexOf('回收金额') === -1 &&
                        (item.gu_tp || item.gai_tp || (item.final_tp !== undefined && item.final_tp) || item.yu_tp || (item.ctrl_tp !== undefined && item.ctrl_tp))
                });
                if (level1List.length > 0) {
                    for (const t of level1List) {
                        html += '<tr class="text-center">\n' +
                            '                                                    <td class="text-left"><span data-toggle="tooltip" data-placement="right" data-original-title="'+ t.name +'">'+ (t.name.length > 15 ? t.name.substring(0, 15) + '...' : t.name) +'</span></td>\n' +
                            '                                                    <td>'+ (t.gu_tp ? ZhCalc.round(ZhCalc.div(t.gu_tp, 10000), 4) : 0) + '</td>\n' +
                            '                                                    <td>'+ (t.gai_tp ? ZhCalc.round(ZhCalc.div(t.gai_tp, 10000), 4) : 0) +'</td>\n' +
                            '                                                    <td>'+ (t.yu_tp ? ZhCalc.round(ZhCalc.div(t.yu_tp, 10000), 4) : 0) +'</td>\n' +
                            '                                                    <td>'+ (t.ctrl_tp ? ZhCalc.round(ZhCalc.div(t.ctrl_tp, 10000), 4) : 0) +'</td>\n' +
                            '                                                    <td>'+ (t.final_tp ? ZhCalc.round(ZhCalc.div(t.final_tp, 10000), 4) : 0) +'</td>\n' +
                            '                                                    <td>' + (t.final_tp && t.ctrl_tp ? ZhCalc.round(ZhCalc.div(t.final_tp, t.ctrl_tp) * 100, 2) : 0) + '</td>\n' +
                            '                                                </tr>\n';
                    }
                }
            }
            // 滚动数据
            $('.stage-data').eq(0).html(html);
            tableScroll('tableId', '100%', 30, 7);
            $('#tableId').css({'margin-top': 0});
        }

        function setData(tenderList, categoryIndex = 0) {
            let total_in_tp = 0;
            let total_out_tp = 0;
            let total_profit = 0;
            let stage_num = 0;
            let cost_ledger_num = 0;
            let cost_book_num = 0;
            let cost_analysis_num = 0;
            let tender_html = '';
            const chart_option_name = [];
            const chart_option2_data = [];
            const chart_option3_data = [];

            const chart_option1_data = [];
            // let option1_is_tender = false;
            const chart_category_data = [];
            // if (category && category.length > 0 && category[categoryIndex] && category[categoryIndex].value.length > 0) {
            //     for (const c of category[categoryIndex].value) {
            //         chart_category_data.push({
            //             cid: category[categoryIndex].id,
            //             value: c.id,
            //         });
            //         chart_option1_data.push({
            //             value: 0,
            //             name: c.value,
            //         });
            //     }
            // } else {
            //     option1_is_tender = true;
            // }

            for(const t of tenderList) {
                const stage_tp = t.cost_analysis ? t.cost_analysis.stage_tp : null;
                if (stage_tp) {
                    total_in_tp = ZhCalc.add(total_in_tp, stage_tp.in_tp);
                    total_out_tp = ZhCalc.add(total_out_tp, stage_tp.out_tp);
                    total_profit = ZhCalc.add(total_profit, stage_tp.profit);
                    chart_option2_data.push(stage_tp.profit ? stage_tp.profit : 0);
                    chart_option3_data.push(stage_tp.profit_percent ? stage_tp.profit_percent : 0);
                    chart_option_name.push(t.name);
                    chart_option1_data.push({ value: stage_tp.profit, name: t.name});
                }
                stage_num = ZhCalc.add(stage_num, t.stage_num);
                cost_ledger_num = ZhCalc.add(cost_ledger_num, t.cost_ledger_num);
                cost_book_num = ZhCalc.add(cost_book_num, t.cost_book_num);
                cost_analysis_num = ZhCalc.add(cost_analysis_num, t.cost_analysis_num);
                // if (option1_is_tender) {
                //     if(stage_tp.profit)
                // } else {
                //     const sameObject = _.intersectionWith(t.category, chart_category_data, _.isEqual);
                //     const index = sameObject[0] ? _.findIndex(chart_category_data, { cid: sameObject[0].cid, value: sameObject[0].value }) : -1;
                //     if (index !== -1) {
                //         chart_option1_data[index].value = ZhCalc.add(chart_option1_data[index].value, (stage_tp.profit ? stage_tp.profit : 0));
                //     }
                // }
            }
            // 根据利润率排行并只显示前5位
            let index = 1;
            const percent_tender_list = _.orderBy(tenderList, (t) => {
                const stage_tp = t.cost_analysis ? t.cost_analysis.stage_tp : null;
                return stage_tp && stage_tp.profit_percent ? stage_tp.profit_percent : 0;
            }, 'desc').slice(0, 5);
            const medalIcons = {
                1: '<i class="fa fa-trophy" style="font-size:18px; color:#F0C040;"></i>',
                2: '<i class="fa fa-trophy" style="font-size:18px; color:#B0B8C1;"></i>',
                3: '<i class="fa fa-trophy" style="font-size:18px; color:#CD7F4A;"></i>',
            };
            for (const t of percent_tender_list) {
                const stage_tp = t.cost_analysis ? t.cost_analysis.stage_tp : null;
                if (stage_tp) {
                    const rankDisplay = medalIcons[index] ?? index;
                    tender_html += `<tr class="bg-dark">
                    <td class="text-center py-2">${rankDisplay}</td>
                    <td class="py-2">${t.name}</td>
                    <td class="text-center py-2">${stage_tp.profit_percent}</td>
                </tr>`;
                    index++;
                }
            }
            // console.log(tenderList);
            const profit_percent = total_in_tp && total_profit ? ZhCalc.round(ZhCalc.div(total_profit, total_in_tp) * 100, 2) : 0;
            $('.data_total_profit_percent').text(profit_percent ? profit_percent + '%' : '0%');
            $('.data_total_in_tp').text(formatMoney(total_in_tp));
            $('.data_total_out_tp').text(formatMoney(total_out_tp));
            $('.data_total_profit').text(formatMoney(total_profit));
            $('.stage_num').text(stage_num);
            $('.cost_ledger_num').text(cost_ledger_num);
            $('.cost_analysis_num').text(cost_analysis_num);
            $('.cost_book_num').text(cost_book_num);

            // 滚动数据
            $('.tender-data').eq(0).html(tender_html);

            // }
            $('[data-toggle="tooltip"]').tooltip();

            // 图表数据赋值
            const analysis_num = _.filter(tenderList, t => t.cost_analysis).length;
            const option2 = myChart2_1.getOption();
            option2.dataZoom[0].start = 0;
            option2.dataZoom[0].end = computedPosition(analysis_num);
            option2.xAxis[0].data = chart_option_name;
            option2.series[0].data = chart_option2_data;
            if (analysis_num >= 8) {
                option2.dataZoom[0].show = true;
            } else {
                option2.dataZoom[0].show = false;
            }
            myChart2_1.setOption(option2);

            const option3 = myChart3_1.getOption();
            option3.dataZoom[0].start = 0;
            option3.dataZoom[0].end = computedPosition(analysis_num);
            option3.xAxis[0].data = chart_option_name;
            option3.series[0].data = chart_option3_data;
            if (analysis_num >= 8) {
                option3.dataZoom[0].show = true;
            } else {
                option3.dataZoom[0].show = false;
            }
            myChart3_1.setOption(option3);

            const option1 = myChart1_1.getOption();
            option1.series[0].data = _.filter(chart_option1_data, function (item) {
                return item.value !== 0;
            });
            myChart1_1.setOption(option1);
            $('#profit_tableId').css({'margin-top': 0});
        }
        // 第一层分类选择
        $("body").on('click', '#first-category .select-cate', function () {
            const id = $(this).data('value');
            $(this).parents('.dropdown-menu').siblings('button').text($(this).text());
            let newTenderList = tenders;
            let categoryIndex = 0;
            if (!id) {
                $('#second-category').hide();
                $('#third-category').hide();
                $('#first-category').children('button').attr('data-cid', '').attr('data-value', '');
            } else {
                // 获取第一层已选类别
                const firstCategory = { cid: parseInt($(this).data('cid')), value: parseInt(id) };
                $('#first-category').children('button').attr('data-cid', $(this).data('cid')).attr('data-value', id);
                newTenderList = _.filter(tenders, function (item) {
                    return _.findIndex(item.category, firstCategory) !== -1;
                })
                categoryIndex = 1;
                if (category[1] && category[1].value.length > 0) {
                    $('#second-category').show();
                    $('#third-category').hide();
                    $('#second-category').children('button').text('全部').attr('data-cid', '').attr('data-value', '');
                    for (const [i,sc] of category[1].value.entries()) {
                        const scCategory = { cid: sc.cid, value: sc.id };
                        if (_.findIndex(newTenderList, function (item) {
                            return _.findIndex(item.category, scCategory) !== -1;}) === -1) {
                            $('#second-category .select-cate').eq(i+1).hide();
                        } else {
                            $('#second-category .select-cate').eq(i+1).show();
                        }
                    }
                }

                // categoryList.push(firstCategory);
            }
            setData(newTenderList, categoryIndex);
            // 获取新的tenderList及categoryList
        });
        // 第二层分类选择
        $("body").on('click', '#second-category .select-cate', function () {
            const id = $(this).data('value');
            // 获取第一层已选类别
            const first_cid = $('#first-category').children('button').attr('data-cid');
            const first_value = $('#first-category').children('button').attr('data-value');
            const firstCategory = { cid: parseInt(first_cid), value: parseInt(first_value) };
            let newTenderList = _.filter(tenders, function (item) {
                return _.findIndex(item.category, firstCategory) !== -1;
            });
            // let categoryList = [firstCategory];
            let categoryIndex = 1;
            $(this).parents('.dropdown-menu').siblings('button').text($(this).text());
            if (!id) {
                $('#third-category').hide();
            } else {
                // 获取第二层已选类别
                const secondCategory = { cid: parseInt($(this).data('cid')), value: parseInt(id) };
                $('#second-category').children('button').attr('data-cid', $(this).data('cid')).attr('data-value', id);
                newTenderList = _.filter(newTenderList, function (item) {
                    return _.findIndex(item.category, secondCategory) !== -1;
                });
                categoryIndex = 2;
                if (category[2] && category[2].value.length > 0) {
                    $('#third-category').show();
                    $('#third-category').children('button').text('全部').attr('data-cid', '').attr('data-value', '');
                    for (const [i,sc] of category[2].value.entries()) {
                        const tcCategory = { cid: sc.cid, value: sc.id };
                        if (_.findIndex(newTenderList, function (item) {
                            return _.findIndex(item.category, tcCategory) !== -1;}) === -1) {
                            $('#third-category .select-cate').eq(i+1).hide();
                        } else {
                            $('#third-category .select-cate').eq(i+1).show();
                        }
                    }
                }
                // categoryList.push(secondCategory);
            }
            setData(newTenderList, categoryIndex);
            // 获取新的tenderList及categoryList
        });
        // 第三层分类选择（至多三层）
        $("body").on('click', '#third-category .select-cate', function () {
            const id = $(this).data('value');
            // 获取第一层已选类别
            const first_cid = $('#first-category').children('button').attr('data-cid');
            const first_value = $('#first-category').children('button').attr('data-value');
            const firstCategory = { cid: parseInt(first_cid), value: parseInt(first_value) };
            let newTenderList = _.filter(tenders, function (item) {
                return _.findIndex(item.category, firstCategory) !== -1;
            });
            // 获取第二层已选类别
            const second_cid = $('#second-category').children('button').attr('data-cid');
            const second_value = $('#second-category').children('button').attr('data-value');
            const secondCategory = { cid: parseInt(second_cid), value: parseInt(second_value) };
            newTenderList = _.filter(newTenderList, function (item) {
                return _.findIndex(item.category, secondCategory) !== -1;
            });
            // let categoryList = [firstCategory, secondCategory];
            let categoryIndex = 2;
            $(this).parents('.dropdown-menu').siblings('button').text($(this).text());
            if (!id) {
                $('#third-category').children('button').text('全部').attr('data-cid', '').attr('data-value', '');
            } else {
                $('#third-category').children('button').attr('data-cid', $(this).data('cid')).attr('data-value', id);
                categoryIndex = 3;
                const third_cid = $('#third-category').children('button').attr('data-cid');
                const third_value = $('#third-category').children('button').attr('data-value');
                const thirdCategory = { cid: parseInt(third_cid), value: parseInt(third_value) };
                newTenderList = _.filter(newTenderList, function (item) {
                    return _.findIndex(item.category, thirdCategory) !== -1;
                });
                // categoryList.push({ cid: parseInt($(this).data('cid')), value: parseInt($(this).data('value')) });
            }
            setData(newTenderList, categoryIndex);
            // 获取新的tenderList及categoryList
        })
    })
    function formatMoney(s, dot = ',', decimal = 2) {
        if (!s) {
            s = 0;
            return s.toFixed(decimal);
        }
        console.log(parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(decimal) + '');
        // 按decimal位数四舍五入方法
        s = decimal === 0 ? parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(decimal) + '' : (Math.round(parseFloat((s + '').replace(/[^\d\.-]/g, '')) * Math.pow(10, decimal)) / Math.pow(10, decimal)).toFixed(decimal) + '';
        console.log(s, Math.pow(10, decimal));
        if (!decimal) {
            s += '.';
        }
        const l = s.split('.')[0].split('').reverse(),
            r = s.split('.')[1];
        let t = '';
        for (let i = 0; i < l.length; i++) {
            t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? dot : '');
        }
        const num = t.split('').reverse().join('') + (decimal === 0 ? '' : '.' + r);
        return num.replace('-,', '-');
    }
    // 计算显示滚动条长度
    function computedPosition(xArrayLength) {
        if (xArrayLength >= 8) {
            return Math.floor(8 / xArrayLength * 100) > 100 ? 100 : Math.floor(8 / xArrayLength * 100);
            // return length <= 10 ? 35 : 100 - Math.floor(35 / length * 100);
        } else {
            return 100;
        }
    }
</script>