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">成本管理</button>
                    <div class="dropdown-menu" aria-labelledby="zhankai">
                        <% for (const i of ctx.subProject.data_collect_pages) { %>
                            <a class="dropdown-item" href="/sp/<%- ctx.subProject.id %>/datacollect/index/<%- i %>"><% if (i === '7') { %>成本管理<% } else if (i === '8')  { %>投资总控<% } else { %>决策大屏<%- 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: 95.5vh">
                    <div class="col-9 px-0 height-100">
                        <div class="row m-0 px-0 mb-2" style="height: 50%;">
                            <div class="col-4 px-0 bg-dark height-100">
                                <div class="col-12 text-white pt-2">
                                    <div class="card-big-htext">|  金额对比<span class="float-right mr-2">万元&nbsp;</span></div>
                                </div>
                                <div class="col-12 pb-2 text-white m-0 mt-2 bg-dark" style="height: 89%;overflow: auto;">
                                    <style>
                                        .level1-table tbody tr td {
                                            padding: 6px 10px; /* 默认一般是 8~16px，可根据需要继续调小 */
                                            line-height: 1.2;
                                            border-bottom: 1px solid rgba(255,255,255,0.2);
                                        }
                                        .level1-table tbody tr:last-child td {
                                            border-bottom: none;
                                        }
                                    </style>
                                    <table class="level1-table" style="width: 100%; height: 100%;">
                                        <thead style="height: 50px;border-bottom: 1px solid rgba(255,255,255,0.2);background-color: #2C3034;">
                                        <tr class="text-center">
                                            <th>分类</th>
                                            <th>责任成本</th>
                                            <th>实际成本</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td>项目收入</td>
                                            <td class="text-center data_duty_total_in_tp"></td>
                                            <td class="text-center data_total_in_tp"></td>
                                        </tr>
                                        <tr>
                                            <td>项目成本</td>
                                            <td class="text-center data_duty_total_out_tp"></td>
                                            <td class="text-center data_total_out_tp"></td>
                                        </tr>
                                        <tr>
                                            <td>利润</td>
                                            <td class="text-center data_duty_total_profit"></td>
                                            <td class="text-center data_total_profit"></td>
                                        </tr>
                                        <tr>
                                            <td>利润率</td>
                                            <td class="text-center data_duty_total_profit_percent"></td>
                                            <td class="text-center data_total_profit_percent"></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-8 px-0 height-100">
                                <div class="row mx-2 mb-2 height-100 bg-dark">
                                    <div class="col-12 text-white pt-2 pl-3">
                                        <div class="card-big-htext">|  标段利润及利润率<span class="float-right mr-2">万元&nbsp;</span></div>
                                    </div>
                                    <div class="col-12 m-0" style="height: 88%">
                                        <div class="jlchart" data-chart-num="1" id="jlchart" style="height: 100%; width: 100%;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row m-0 px-0 mr-2 bg-dark" style="height: 49%;">
                            <div class="col-12 text-white pt-2 pl-3">
                                <div class="card-big-htext">|  累计计量<span class="float-right mr-2">万元&nbsp;</span></div>
                            </div>
                            <div class="col-12 m-0" style="height: 88%">
                                <div class="jldbchart" id="jldbchart" style="height: 100%; width: 100%;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-3 px-0 height-100">
                        <div class="row mb-2 bg-dark m-0 p-0" style="height: 31.2vh">
                            <div class="col-12 text-white pt-2 pl-3">
                                <div class="card-big-htext">|  期数统计<span class="float-right mr-2">&nbsp;</span></div>
                            </div>
<!--                                    <h6 class="card bg-dark text-center text-white m-0 pt-2 pb-3">期数统计</h6>-->
                            <div class="col-12 p-0 m-0 right-month-height">
                                <div class="row p-0 m-0 height-100">
                                    <div class="col-6 px-0 height-50">
                                        <div class="card text-center bg-dark text-white border-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 px-0 height-50">
                                        <div class="card text-center bg-dark text-white border-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 px-0 height-50">
                                        <div class="card text-center bg-dark text-white border-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 px-0 height-50">
                                        <div class="card text-center bg-dark text-white border-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>
                        <div class="m-0 mb-2 bg-dark p-0" style="height: 31.2vh">
                            <div class="row mx-0 mb-2 height-100">
                                <div class="col-12 text-white pt-2 pl-3">
                                    <div class="card-big-htext">|  利润占比<span class="float-right mr-2">万元&nbsp;</span></div>
                                </div>
                                <div class="col-12 m-0" style="height: 88%">
                                    <div class="jlwcdchart" id="jlwcdchart" style="height: 100%; width: 100%;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="m-0 mb-2 bg-dark p-0" style="height: 31.3vh">
                            <div class="height-100">
                                <div class="col-12 text-white pt-2 pl-3">
                                    <div class="card-big-htext">|  利润率排名<span class="float-right mr-2">&nbsp;</span></div>
                                </div>
                                <div class="tablebox mt-2" style="height: 80%">
                                    <table id="profit_tableId">
                                        <thead>
                                        <tr class="text-center">
                                            <th width="50">排名</th>
                                            <th>标段</th>
                                            <th width="80">利润率</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: {
        },
        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: '65%',
                top:'2%',
                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: {
        },
        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'
            },
            formatter: function (params) {

                let html = params[0].axisValue + '<br/>';

                params.forEach(function (item) {

                    let value = item.value;

                    if (item.seriesName === '利润率') {
                        value += '%';
                    }

                    html += `
            <div style="display:flex;justify-content:space-between;min-width:150px;">
                <span>${item.marker}${item.seriesName}</span>
                <span style="font-weight:bold;">${value}</span>
            </div>
        `;
                });

                return html;
            }
        },

        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: {
            top: '5%',
            left: 'center',
            data: ['利润', '利润率'],
            textStyle: {
                color: '#fff',
                fontSize: 14
            },
            icon: 'roundRect' // 可选：rect、circle、roundRect
        },
        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;
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.5)',
                        type: 'dashed',   // 虚线
                        width: 1
                    }
                }
            },
            {
                type: 'value',
                name: '',
                position: 'right',

                axisLabel: {
                    formatter: '{value}%'
                },

                splitLine: {
                    show: false      // 不显示右侧网格线
                }
            }
        ],
        series: [
            {
                name: '利润',
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                data: []
            },
            {
                name: '利润率',
                type: 'line',
                yAxisIndex: 1,     // 使用右侧坐标轴

                smooth: true,

                symbol: 'circle',
                symbolSize: 8,

                lineStyle: {
                    width: 3
                },

                itemStyle: {
                    color: '#fea844'
                },

                data: []
            }
        ]
    };
    var chart2 = document.getElementsByClassName('jlchart');
    var myChart2_1 = echarts.init(chart2[0], 'dark');
    myChart2_1.setOption(option2);
    // myChart2.setOption(option);

    const option4_default = {
        title: {
        },
        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: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            type: 'scroll',
            bottom: '2%',
            data: [],
            textStyle: {
                color: '#fff'
            }
        },
        grid: {
            top:'10%',
            left: '3%',
            right: '4%',
            bottom: '15%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value',
                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;
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.5)',
                        type: 'dashed',   // 虚线
                        width: 1
                    }
                }
            }
        ],
        dataZoom: [
            {
                brushSelect: false,
                showdetail: false,
                show: true,
                realtime: true,
                dataZoomIndex: 10,
                start: 0,
                end: 5,
                handleSize: 0,
                height: 10,
                bottom: '10%'
            },
        ],
        series: [],
    };
    var chart4 = document.getElementsByClassName('jldbchart');
    var myChart4_1 = echarts.init(chart4[0], 'dark');
    myChart4_1.setOption(option4_default);

    function echartsReset() {
        myChart1_1.resize();
        myChart2_1.resize();
        myChart4_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_duty_in_tp = 0;
            let total_duty_out_tp = 0;
            let total_duty_profit = 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;
            // }
            const chart_option4_data = [];
            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 ? ZhCalc.round(ZhCalc.div(stage_tp.profit, 10000), 0) : 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 ? ZhCalc.round(ZhCalc.div(stage_tp.profit, 10000), 0) : 0, name: t.name});
                }
                const dutyInfo = t.cost_duty ? t.cost_duty : null;
                if (dutyInfo) {
                    const duty_in_tp = dutyInfo.extra_info ? dutyInfo.extra_info.in_tp : 0;
                    const duty_out_tp = dutyInfo.stage_tp ? dutyInfo.stage_tp.total_price : 0;
                    total_duty_in_tp = ZhCalc.add(total_duty_in_tp, duty_in_tp);
                    total_duty_out_tp = ZhCalc.add(total_duty_out_tp, duty_out_tp);
                    const profit = ZhCalc.sub(duty_in_tp, duty_out_tp);
                    total_duty_profit = ZhCalc.add(total_duty_profit, profit);
                }
                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));
                //     }
                // }
                const one_option4_data = {
                    id: t.id,
                    name: t.name,
                    list: [],
                };
                for (const s of t.month_stage) {
                    const index = _.findIndex(one_option4_data.list, { yearmonth: s.yearmonth });
                    if (index === -1) {
                        one_option4_data.list.push({
                            yearmonth: s.yearmonth,
                            tp: s.tp,
                            end_tp: s.end_tp,
                        })
                    } else {
                        one_option4_data.list[index].tp = ZhCalc.add(one_option4_data.list[index].tp, s.tp);
                        one_option4_data.list[index].end_tp = ZhCalc.add(one_option4_data.list[index].end_tp, s.end_tp);
                    }
                }
                chart_option4_data.push(one_option4_data);
            }
            // 根据利润率排行并只显示前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;
            const profit_duty_percent = total_duty_in_tp && total_duty_profit ? ZhCalc.round(ZhCalc.div(total_duty_profit, total_duty_in_tp) * 100, 2) : 0;
            $('.data_total_profit_percent').text(profit_percent ? profit_percent + '%' : '0%');
            $('.data_total_in_tp').text(ZhCalc.round(ZhCalc.div(total_in_tp, 10000), 0));
            $('.data_total_out_tp').text(ZhCalc.round(ZhCalc.div(total_out_tp, 10000), 0));
            $('.data_total_profit').text(ZhCalc.round(ZhCalc.div(total_profit, 10000), 0));
            $('.data_duty_total_profit_percent').text(profit_duty_percent ? profit_duty_percent + '%' : '0%');
            $('.data_duty_total_in_tp').text(ZhCalc.round(ZhCalc.div(total_duty_in_tp, 10000), 0));
            $('.data_duty_total_out_tp').text(ZhCalc.round(ZhCalc.div(total_duty_out_tp, 10000), 0));
            $('.data_duty_total_profit').text(ZhCalc.round(ZhCalc.div(total_duty_profit, 10000), 0));
            $('.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;
            option2.series[1].data = chart_option3_data;
            if (analysis_num >= 8) {
                option2.dataZoom[0].show = true;
            } else {
                option2.dataZoom[0].show = false;
            }
            myChart2_1.setOption(option2);

            const option4_data = {
                yearmonth: [],
                series: [],
                names: [],
                totalMap: {},
            }
            console.log(chart_option4_data);
            if (chart_option4_data.length > 0) {
                const monthSet = new Set();
                const namesSet = new Set();
                chart_option4_data.forEach(tender => {
                    namesSet.add(tender.name);
                    tender.list.forEach(item => {
                        monthSet.add(item.yearmonth);
                    });
                });
                option4_data.names = [...namesSet];
                option4_data.yearmonth = [...monthSet].sort();
                chart_option4_data.forEach(tender => {
                    const data = [];
                    let total = 0; // 当前标段累计

                    option4_data.yearmonth.forEach(month => {

                        const item = tender.list.find(v => v.yearmonth === month);

                        // const value = item ? ZhCalc.round(ZhCalc.div(item.tp, 10000), 0) : 0;

                        const endtp = item ? ZhCalc.round(ZhCalc.div(item.end_tp, 10000), 0) : 0;

                        total = endtp ? endtp : total;   // 累计

                        data.push(total);
                        option4_data.totalMap[month] = ZhCalc.add((option4_data.totalMap[month] || 0), total);
                    });

                    option4_data.series.push({
                        name: tender.name,
                        type: 'line',
                        smooth: true,
                        // itemStyle: {
                        //     color: option4_default.color[index % option4_default.color.length]
                        // },
                        // lineStyle: {
                        //     color: option4_default.color[index % option4_default.color.length]
                        // },
                        data
                    });
                });
                option4_data.names.push('合计');
                option4_data.series.push({
                    name: '合计',

                    type: 'line',

                    smooth: true,

                    lineStyle: {
                        width: 4,
                        color: '#FFD54F'
                    },
                    itemStyle: {
                        color: '#FFD54F'
                    },

                    symbolSize: 8,

                    data: option4_data.yearmonth.map(month => option4_data.totalMap[month] || 0)
                })
            }
            console.log(option4_data);
            const option4 = _.cloneDeep(option4_default);
            option4.dataZoom[0].start = 0;
            option4.dataZoom[0].end = computedPosition(option4_data.yearmonth.length);
            option4.xAxis[0].data = option4_data.yearmonth;
            option4.series = option4_data.series;
            option4.legend.data = option4_data.names;
            if (option4_data.yearmonth.length >= 8) {
                option4.dataZoom[0].show = true;
            } else {
                option4.dataZoom[0].show = false;
            }
            console.log(option4);
            myChart4_1.setOption(option4, true);

            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>