Calculation/app/view/datacollect/index_tz.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>
            <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 m-2">
                    <div class="col-9 m-0 px-0 height-100">
                        <div class="row m-0 px-0 mb-2 mr-2 bg-dark" style="height: 31vh;">
                            <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 row ml-0 mr-2 px-0" style="height: 88%">
                                <div class="col-3 m-0 px-0 height-100">
                                    <div class="guchart" id="guchart" style="height: 100%; width: 100%;"></div>
                                </div>
                                <div class="col-3 m-0 px-0 height-100">
                                    <div class="gaichart" id="gaichart" style="height: 100%; width: 100%;"></div>
                                </div>
                                <div class="col-3 m-0 px-0 height-100">
                                    <div class="yuchart" id="yuchart" style="height: 100%; width: 100%;"></div>
                                </div>
                                <div class="col-3 m-0 px-0 height-100">
                                    <div class="ctrlchart" id="ctrlchart" style="height: 100%; width: 100%;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="row m-0 px-0 mb-2 mr-2 bg-dark" style="height: 31vh;">
                            <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="quanchart" id="quanchart" style="height: 100%; width: 100%;"></div>
                            </div>
                        </div>
                        <div class="row m-0 px-0 mb-2 mr-2" style="height: 31vh;">
                            <div class="col-5 px-0 pb-1 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>
                                <style>
                                    .table-scroll::-webkit-scrollbar {
                                        width: 6px;
                                        height: 6px;
                                    }

                                    .table-scroll::-webkit-scrollbar-track {
                                        background: transparent;
                                    }

                                    .table-scroll::-webkit-scrollbar-thumb {
                                        background: rgba(255,255,255,.25);
                                        border-radius: 3px;
                                    }

                                    .table-scroll::-webkit-scrollbar-thumb:hover {
                                        background: rgba(255,255,255,.45);
                                    }

                                    .table-scroll::-webkit-scrollbar-corner {
                                        background: transparent;
                                    }
                                </style>
                                <div class="col-12 pb-2 text-white m-0 bg-dark table-scroll" 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: 27px;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 id="level1-data">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-7 m-0 px-0 height-100">
                                <div class="row ml-2 mr-0 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="mbsjchart" id="mbsjchart" style="height: 100%; width: 100%;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-3 m-0 px-0 height-100" id="tender-chart">
                        <style>
                            #tender-chart .card-big-htext {
                                display: flex;
                                align-items: center;
                            }
                            .card-big-htext #tender1_name, .card-big-htext #tender2_name, .card-big-htext #tender3_name, .card-big-htext #tender4_name {
                                flex: 1;
                                min-width: 0;          /* 非常重要，flex 布局下省略号必须有 */
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                            }

                            #tender-chart .card-big-htext .float-right {
                                flex-shrink: 0;
                            }
                        </style>
                        <div class="row m-0 px-0 pb-2" style="height: 23.85vh">
                            <div class="row mx-0 w-100 height-100 bg-dark">
                                <div class="col-12 text-white pt-2 pl-3">
                                    <div class="card-big-htext"><span id="tender1_name" data-toggle="tooltip" data-original-title="">标段1</span><span class="float-right mr-2">万元&nbsp;</span></div>
                                </div>
                                <div class="col-12 m-0" style="height: 80%">
                                    <div class="tender1chart" id="tender1chart" style="height: 100%; width: 100%;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="row m-0 px-0 pb-2" style="height: 23.85vh">
                            <div class="row mx-0 w-100 height-100 bg-dark">
                                <div class="col-12 text-white pt-2 pl-3">
                                    <div class="card-big-htext"><span id="tender2_name" data-toggle="tooltip" data-original-title="">标段2</span><span class="float-right mr-2">万元&nbsp;</span></div>
                                </div>
                                <div class="col-12 m-0" style="height: 80%">
                                    <div class="tender2chart" id="tender2chart" style="height: 100%; width: 100%;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="row m-0 px-0 pb-2" style="height: 23.85vh">
                            <div class="row mx-0 w-100 height-100 bg-dark">
                                <div class="col-12 text-white pt-2 pl-3">
                                    <div class="card-big-htext"><span id="tender3_name" data-toggle="tooltip" data-original-title="">标段3</span><span class="float-right mr-2">万元&nbsp;</span></div>
                                </div>
                                <div class="col-12 m-0" style="height: 80%">
                                    <div class="tender3chart" id="tender3chart" style="height: 100%; width: 100%;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="row m-0 pb-2 px-0" style="height: 23.85vh">
                            <div class="row mx-0 w-100 height-100 bg-dark">
                                <div class="col-12 text-white pt-2 pl-3">
                                    <div class="card-big-htext"><span id="tender4_name" data-toggle="tooltip" data-original-title="">标段4</span><span class="float-right mr-2">万元&nbsp;</span></div>
                                </div>
                                <div class="col-12 m-0" style="height: 80%">
                                    <div class="tender4chart" id="tender4chart" style="height: 100%; width: 100%;"></div>
                                </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">
    // 利润排名占比饼图表
    const guchart = document.getElementsByClassName('guchart');
    const gaichart = document.getElementsByClassName('gaichart');
    const yuchart = document.getElementsByClassName('yuchart');
    const ctrlchart = document.getElementsByClassName('ctrlchart');
    const guOption = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
            // 当前鼠标位置
            position: 'right',
        },
        title: {
            text: '投资估算',
            left: 'center',
            bottom: '5%',
            textStyle: {
                fontSize: 14,
                fontWeight: 'normal',
                color: '#fff',
            }
        },
        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 ',
        series: [
            {
                name: '金额',
                type: 'pie',
                radius: '52%',
                center: ['50%', '42%'],
                // 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)'
                    }
                }
            }
        ]
    };
    const guChart1 = echarts.init(guchart[0]);
    const gaiChart1 = echarts.init(gaichart[0]);
    const yuChart1 = echarts.init(yuchart[0]);
    const ctrlChart1 = echarts.init(ctrlchart[0]);
    guChart1.setOption(guOption);
    const gaiOption = _.cloneDeep(guOption);
    gaiOption.title.text = '设计概算';
    gaiChart1.setOption(gaiOption);
    const yuOption = _.cloneDeep(guOption);
    yuOption.title.text = '施工图预算';
    yuChart1.setOption(yuOption);
    const ctrlOption = _.cloneDeep(guOption);
    ctrlOption.title.text = '控制目标';
    ctrlChart1.setOption(ctrlOption);
    // 利润统计状图表
    const quanoption = {
        title: {},
        legend: {
            type: 'scroll', // 超过一行可滚动
            top: 10,
            textStyle: {
                color: '#fff',
                overflow: 'truncate'
            }
        },
        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'
            },
        },
        grid: {
            left: '3%',
            right: '5%',
            bottom: '3%',
            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 : {
                    color: '#fff',
                    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
                    }
                }
            },
        ],
        series: []
    };
    const quanchart = document.getElementsByClassName('quanchart');
    const quanChart1 = echarts.init(quanchart[0]);
    quanChart1.setOption(quanoption);

    const mbsjoption = {
        title: {},
        legend: {
            type: 'scroll', // 超过一行可滚动
            top: 10,
            textStyle: {
                color: '#fff',
                overflow: 'truncate'
            }
        },
        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'
            },
        },
        grid: {
            left: '3%',
            right: '5%',
            bottom: '3%',
            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 : {
                    color: '#fff',
                    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
                    }
                }
            },
        ],
        series: [
            {
                name: '控制目标',
                type: 'bar',
                data: [],
                // barWidth: 18,
                barGap: '0%',
                // itemStyle: {
                //     borderRadius: [4, 4, 0, 0]
                // }
            },
            {
                name: '实际投资',
                type: 'bar',
                data: [],
                // barWidth: 18,
                barGap: '0%',
                // itemStyle: {
                //     borderRadius: [4, 4, 0, 0]
                // }
            }
        ]
    };
    const mbsjchart = document.getElementsByClassName('mbsjchart');
    const mbsjChart1 = echarts.init(mbsjchart[0]);
    mbsjChart1.setOption(mbsjoption);


    const tenderoption = {
        title: {},
        legend: {
            type: 'scroll', // 超过一行可滚动
            top: 10,
            textStyle: {
                color: '#fff',
                overflow: 'truncate'
            }
        },
        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'
            },
        },
        grid: {
            left: '3%',
            right: '5%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: [''],
                axisLabel: {
                    show: false,
                    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 : {
                    color: '#fff',
                    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
                    }
                }
            },
        ],
        series: [
            {
                name: '合同额',
                type: 'bar',
                data: [],
                // barWidth: 30,
                barGap: '0%',
                // itemStyle: {
                //     borderRadius: [4, 4, 0, 0]
                // }
            },
            {
                name: '计价',
                type: 'bar',
                data: [],
                // barWidth: 30,
                barGap: '0%',
                // itemStyle: {
                //     borderRadius: [4, 4, 0, 0]
                // }
            },
            {
                name: '利润',
                type: 'bar',
                data: [],
                // barWidth: 30,
                barGap: '0%',
                // itemStyle: {
                //     borderRadius: [4, 4, 0, 0]
                // }
            }
        ]
    };
    const tenderChart = {
        chart1: null,
        chart2: null,
        chart3: null,
        chart4: null,
    }
    for (let i = 1; i <= 4; i++) {
        tenderChart['chart' + i] = echarts.init(document.getElementsByClassName('tender' + i + 'chart')[0]);
        tenderChart['chart' + i].setOption(tenderoption);
    }

    function echartsReset() {
        guChart1.resize();
        gaiChart1.resize();
        yuChart1.resize();
        ctrlChart1.resize();
        quanChart1.resize();
        mbsjChart1.resize();
        for (let i = 1; i <= 4; i++) {
            tenderChart['chart' + i].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();
        }
    });
    const originDataCollect = parseInt('<%- ctx.subProject.data_collect %>');
    $(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, result.info);
            },
            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, result.info);

            },
            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);
                }
            }
            setRightTenderEchart(result.tenderList);
        });

        function setPageData(tree, info) {
            console.log(tree);
            const chart_gu_data = [], chart_gai_data = [], chart_yu_data = [], chart_ctrl_data = [];
            const chart_quan_data = [];
            const chart_mbsj_data = {
                xData: [],
                ctrlData: [],
                realData: [],
            };
            const table_data = [];
            const totalLevel1_table_data = {
                ctrl_tp: 0,
                real_tp: 0,
            };
            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))
                });
                console.log(level1List);
                for (const level1 of level1List) {
                    level1.name = level1.name.replace(
                        /^第[一二三四五六七八九十百千万\d]+部分[\s　]+/,
                        ''
                    );
                    chart_gu_data.push({
                        name: level1.name,
                        value: level1.gu_tp ? ZhCalc.round(ZhCalc.div(level1.gu_tp, 10000), 0) : 0,
                    });
                    chart_gai_data.push({
                        name: level1.name,
                        value: level1.gai_tp ? ZhCalc.round(ZhCalc.div(level1.gai_tp, 10000), 0) : 0,
                    });
                    chart_yu_data.push({
                        name: level1.name,
                        value: level1.yu_tp ? ZhCalc.round(ZhCalc.div(level1.yu_tp, 10000), 0) : 0,
                    });
                    chart_ctrl_data.push({
                        name: level1.name,
                        value: level1.ctrl_tp ? ZhCalc.round(ZhCalc.div(level1.ctrl_tp, 10000), 0) : 0,
                    });
                    chart_quan_data.push({
                        name: level1.name,
                        type: 'bar',
                        stack: 'total',     // 相同 stack 就会堆叠
                        emphasis: {
                            focus: 'series'
                        },
                        data: [
                            level1.gu_tp ? ZhCalc.round(ZhCalc.div(level1.gu_tp, 10000), 0) : 0,
                            level1.gai_tp ? ZhCalc.round(ZhCalc.div(level1.gai_tp, 10000), 0) : 0,
                            level1.yu_tp ? ZhCalc.round(ZhCalc.div(level1.yu_tp, 10000), 0) : 0,
                            level1.ctrl_tp ? ZhCalc.round(ZhCalc.div(level1.ctrl_tp, 10000), 0) : 0,
                            level1.real_tp ? ZhCalc.round(ZhCalc.div(level1.real_tp, 10000), 0) : 0,
                        ]
                    });

                    totalLevel1_table_data.ctrl_tp = ZhCalc.add(totalLevel1_table_data.ctrl_tp, level1.ctrl_tp ? ZhCalc.round(ZhCalc.div(level1.ctrl_tp, 10000), 0) : 0);
                    totalLevel1_table_data.real_tp = ZhCalc.add(totalLevel1_table_data.real_tp, level1.real_tp ? ZhCalc.round(ZhCalc.div(level1.real_tp, 10000), 0) : 0);

                    table_data.push(`
                    <tr>
                        <td>${level1.name}</td>
                        <td class="text-center">${level1.ctrl_tp ? ZhCalc.round(ZhCalc.div(level1.ctrl_tp, 10000), 0) : 0}</td>
                        <td class="text-center">${level1.real_tp ? ZhCalc.round(ZhCalc.div(level1.real_tp, 10000), 0) : 0}</td>
                    </tr>`);
                    chart_mbsj_data.xData.push(level1.name);
                    chart_mbsj_data.ctrlData.push(level1.ctrl_tp ? ZhCalc.round(ZhCalc.div(level1.ctrl_tp, 10000), 0) : 0);
                    chart_mbsj_data.realData.push(level1.real_tp ? ZhCalc.round(ZhCalc.div(level1.real_tp, 10000), 0) : 0);
                }
            }
            table_data.push(`
                <tr>
                    <td>公路总造价</td>
                    <td class="text-center">${totalLevel1_table_data.ctrl_tp}</td>
                    <td class="text-center">${totalLevel1_table_data.real_tp}</td>
                </tr>`);
            table_data.push(`
                <tr>
                    <td>设计优化率(%)</td>
                    <td class="text-center">${info.ctrl_optimize_rate}</td>
                    <td class="text-center">${info.real_optimize_rate}</td>
                </tr>`);
            table_data.push(`
                <tr>
                    <td>收益金额</td>
                    <td class="text-center">${info.ctrl_profit ? ZhCalc.round(ZhCalc.div(info.ctrl_profit, 10000), 0) : 0}</td>
                    <td class="text-center">${info.real_profit ? ZhCalc.round(ZhCalc.div(info.real_profit, 10000), 0) : 0}</td>
                </tr>`);
            const guOption1 = guChart1.getOption();
            guOption1.series[0].data = chart_gu_data;
            guChart1.setOption(guOption1);
            const gaiOption1 = gaiChart1.getOption();
            gaiOption1.series[0].data = chart_gai_data;
            gaiChart1.setOption(gaiOption1);
            const yuOption1 = yuChart1.getOption();
            yuOption1.series[0].data = chart_yu_data;
            yuChart1.setOption(yuOption1);
            const ctrlOption1 = ctrlChart1.getOption();
            ctrlOption1.series[0].data = chart_ctrl_data;
            ctrlChart1.setOption(ctrlOption1);
            const quanOption1 = quanChart1.getOption();
            quanOption1.series = chart_quan_data;
            quanChart1.setOption(quanOption1);

            $('#level1-data').html(table_data.join(''));

            const mbsjOption1 = mbsjChart1.getOption();
            chart_mbsj_data.xData.push('收益金额');
            chart_mbsj_data.ctrlData.push(info.ctrl_profit ? ZhCalc.round(ZhCalc.div(info.ctrl_profit, 10000), 0) : 0);
            chart_mbsj_data.realData.push(info.real_profit ? ZhCalc.round(ZhCalc.div(info.real_profit, 10000), 0) : 0);
            mbsjOption1.xAxis[0].data = chart_mbsj_data.xData;
            mbsjOption1.series[0].data = chart_mbsj_data.ctrlData;
            mbsjOption1.series[1].data = chart_mbsj_data.realData;
            mbsjChart1.setOption(mbsjOption1);
        }

        function setRightTenderEchart(tenders) {
            for (const t in tenders) {
                const tenderb = tenders[t] ? tenders[t].b : null;
                const chart_data = {
                    contract_price: [],
                    end_gather_tp: [],
                    end_profit_tp: [],
                };
                if (tenderb) {
                    $('#tender'+ t + '_name').text(tenderb.name);
                    $('#tender'+ t + '_name').attr('data-original-title', tenderb.name);
                    calculateTender(tenderb);
                    chart_data.contract_price.push(ZhCalc.round(ZhCalc.div(tenderb.contract_price, 10000), 0) || 0);
                    chart_data.end_gather_tp.push(ZhCalc.round(ZhCalc.div(tenderb.end_gather_tp, 10000), 0) || 0);
                    // chart_data.end_profit_tp.push(tendera.end_gather_tp || 0);
                    const tendera = tenders[t] ? tenders[t].a : null;
                    if (tendera) {
                        calculateTender(tendera);
                        const profit = ZhCalc.div(ZhCalc.sub(tendera.end_gather_tp, tenderb.end_gather_tp), 10000);
                        chart_data.end_profit_tp.push(ZhCalc.round(profit, 0) || 0);
                    } else {
                        const profit = ZhCalc.div(ZhCalc.sub(0, tenderb.end_gather_tp), 10000);
                        chart_data.end_profit_tp.push(ZhCalc.round(profit, 0) || 0);
                    }
                } else {
                    $('#tender'+ t + '_name').text('');
                }
                const chartOption = tenderChart[`chart${t}`].getOption();
                chartOption.series[0].data = chart_data.contract_price;
                chartOption.series[1].data = chart_data.end_gather_tp;
                chartOption.series[2].data = chart_data.end_profit_tp;
                tenderChart[`chart${t}`].setOption(chartOption);
                $('[data-toggle="tooltip"]').tooltip();
            }
        }

        function calculateTender(tender) {
            if (tender.stage_tp) {
                tender.gather_tp = ZhCalc.sum([tender.stage_tp.contract_tp, tender.stage_tp.qc_tp, tender.stage_tp.pc_tp]);
                tender.end_contract_tp = ZhCalc.sum([tender.stage_tp.pre_contract_tp, tender.stage_tp.contract_tp, tender.stage_tp.contract_pc_tp]);
                tender.end_qc_tp = ZhCalc.sum([tender.stage_tp.pre_qc_tp, tender.stage_tp.qc_tp, tender.stage_tp.qc_pc_tp]);
                tender.end_gather_tp = ZhCalc.add(tender.end_contract_tp, tender.end_qc_tp);
                tender.pre_gather_tp = ZhCalc.add(tender.stage_tp.pre_contract_tp, tender.stage_tp.pre_qc_tp);
                tender.yf_tp = ZhCalc.add(tender.stage_tp.yf_tp);
                tender.end_yf_tp = ZhCalc.add(tender.stage_tp.pre_yf_tp, tender.yf_tp);
                tender.sf_tp = ZhCalc.add(tender.stage_tp.sf_tp);
                tender.end_sf_tp = ZhCalc.add(tender.stage_tp.pre_sf_tp, tender.sf_tp);
                tender.wf_tp = ZhCalc.sub(tender.end_yf_tp, tender.end_sf_tp);
            } else if (tender.lastStage) {
                tender.gather_tp = ZhCalc.sum([tender.lastStage.contract_tp, tender.lastStage.qc_tp, tender.lastStage.pc_tp]);
                tender.end_contract_tp = ZhCalc.sum([tender.lastStage.pre_contract_tp, tender.lastStage.contract_tp, tender.lastStage.contract_pc_tp]);
                tender.end_qc_tp = ZhCalc.sum([tender.lastStage.pre_qc_tp, tender.lastStage.qc_tp, tender.lastStage.qc_pc_tp]);
                tender.end_gather_tp = ZhCalc.add(tender.end_contract_tp, tender.end_qc_tp);
                tender.pre_gather_tp = ZhCalc.add(tender.lastStage.pre_contract_tp, tender.lastStage.pre_qc_tp);
                tender.yf_tp = ZhCalc.add(tender.lastStage.yf_tp);
                tender.end_yf_tp = ZhCalc.add(tender.lastStage.pre_yf_tp, tender.yf_tp);
                tender.sf_tp = ZhCalc.add(tender.lastStage.sf_tp);
                tender.end_sf_tp = ZhCalc.add(tender.lastStage.pre_sf_tp, tender.sf_tp);
                tender.wf_tp = ZhCalc.sub(tender.end_yf_tp, tender.end_sf_tp);
            }
        }
    })
    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>