Calculation/app/view/datacollect/index4GY18Y.ejs

<link href="/public/css/bootstrap/bootstrap-colorpicker.min.css" rel="stylesheet">
<style>
    ::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }

    /* 滚动条有滑块的轨道部分 */
    ::-webkit-scrollbar-track-piece {
        background-color: transparent;
        border-radius: 5px;
    }

    /* 滚动条滑块(竖向:vertical 横向:horizontal) */
    ::-webkit-scrollbar-thumb {
        cursor: pointer;
        background-color:#2C3034;
        border-radius: 5px;
    }

    /* 滚动条滑块hover */
    ::-webkit-scrollbar-thumb:hover {
        background-color: #999999;
    }

    /* 同时有垂直和水平滚动条时交汇的部分 */
    ::-webkit-scrollbar-corner {
        display: block;    /* 修复交汇时出现的白块 */
    }
</style>
<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>
                <% } %>
            </div>
            <div>
                <a href="javascript:void(0)"  title="全屏显示" id="showFull" class="text-white"><i class="fa fa-arrows-alt"></i></a>
                <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-dark text-white dropdown-toggle" data-toggle="dropdown" id="zhankai">决策大屏<span>6</span></button>
                    <div class="dropdown-menu" aria-labelledby="zhankai">
                        <% for (const i of projectData.data_collect_pages) { %>
                            <a class="dropdown-item" href="/datacollect/index/<%- i %>">决策大屏<%- i %></a>
                        <% } %>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="content-wrap" id="big-data">
        <div style="height: 30px;background-color: #2c3237; display: none" id="exitfull-div">
            <div class="title-main d-flex">
                <div class="ml-auto">
                    <div class="dropdown d-flex float-left mt-1 mr-2">
                        <button id="exitFull" class="btn btn-sm btn-secondary ml-auto">退出全屏</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="c-body" style="background:#2c3237 !important">
            <div class="flex-content">
                <div class="row mx-3" style="height: 63.5vh">
                    <div class="col-4 px-0 pb-1 height-100">
                        <div class="height-100 pr-1">
                            <div class="center-chart pb-1">
                                <div class="card height-100 bg-dark">
                                    <div class="gcsrmx_chart" style="height: 100%; width: 100%;"></div>
                                </div>
                            </div>
                            <div class="center-chart pt-1">
                                <div class="card height-100 bg-dark">
                                    <div class="gccb" style="height: 100%; width: 100%;">
                                        <h6 class="bg-dark text-center text-white m-0 py-3">工程成本管理汇总</h6>
                                        <div class="tablebox" style="overflow: auto;">
                                            <table>
                                                <thead>
                                                <tr style="text-align: center">
                                                    <th></th>
                                                    <th>已完成</th>
                                                    <th>应支付</th>
                                                    <th>已支付</th>
                                                    <th>待支付</th>
                                                </tr>
                                                </thead>
                                                <tbody class="stage-data">
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-4 px-0 pb-1 height-100">
                        <div class="height-100 px-1">
                            <div class="center-chart pb-1">
                                <div class="card height-100 bg-dark">
                                    <div class="gcsrqk_chart" style="height: 100%; width: 100%;"></div>
                                </div>
                            </div>
                            <div class="center-chart pt-1 text-center text-white">
                                <div class="height-100 row">
                                    <div class="col-6 pr-1">
                                        <div class="center-chart pb-1">
                                            <div class="card height-100 bg-dark">
                                                <div class="height-100" style="display: grid;place-items: center;">
                                                    <div style="line-height: 3;">
                                                        <div style="font-size: 1.2rem" class="gcsr_price"></div>
                                                        <div style="font-size: .9rem;">
                                                                <span style="background-color: #42474c;border-radius: 1rem;padding: .25rem .75rem">工程收入</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="center-chart pt-1">
                                            <div class="card height-100 bg-dark">
                                                <div class="height-100" style="display: grid;place-items: center;">
                                                    <div style="line-height: 3;">
                                                        <div style="font-size: 1.2rem" class="gclr_price"></div>
                                                        <div style="font-size: .9rem;">
                                                            <span style="background-color: #42474c;border-radius: 1rem;padding: .25rem .75rem">工程利润</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 pl-1">
                                        <div class="center-chart pb-1">
                                            <div class="card height-100 bg-dark">
                                                <div class="height-100" style="display: grid;place-items: center;">
                                                    <div style="line-height: 3;">
                                                        <div style="font-size: 1.2rem" class="gccb_price"></div>
                                                        <div style="font-size: .9rem;">
                                                            <span style="background-color: #42474c;border-radius: 1rem;padding: .25rem .75rem">工程成本</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="center-chart pt-1">
                                            <div class="card height-100 bg-dark">
                                                <div class="height-100" style="display: grid;place-items: center;">
                                                    <div style="line-height: 3;">
                                                        <div style="font-size: 1.2rem" class="gclrl_num"></div>
                                                        <div style="font-size: .9rem;">
                                                            <span style="background-color: #42474c;border-radius: 1rem;padding: .25rem .75rem">工程利润率</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-4 px-0 pb-1 height-100">
                        <div class="height-100 pl-1">
                            <div class="center-chart pb-1">
                                <div class="card height-100 bg-dark">
                                    <div class="yingsf_chart" style="height: 100%; width: 100%;"></div>
                                </div>
                            </div>
                            <div class="center-chart pt-1">
                                <div class="card height-100 bg-dark">
                                    <div class="yisf_chart" style="height: 100%; width: 100%;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mx-3" style="height: 32vh">
                    <div class="col-3 px-0 pt-1 height-100">
                        <div class="height-100" style="padding-right: .375rem !important;">
                            <% if (dpCategory.length > 0 && dpCategory[0]) { %>
                            <div class="card bg-dark height-100">
                                <div class="dpgl_chart" style="height: 100%; width: 100%;"></div>
                            </div>
                            <% } %>
                        </div>
                    </div>
                    <div class="col-3 px-0 pt-1 height-100">
                        <div class="height-100 pr-1" style="padding-left: .125rem !important;">
                            <% if (dpCategory.length > 1 && dpCategory[1]) { %>
                            <div class="card bg-dark height-100">
                                <div class="dpgl_chart" style="height: 100%; width: 100%;"></div>
                            </div>
                            <% } %>
                        </div>
                    </div>
                    <div class="col-3 px-0 pt-1 height-100">
                        <div class="height-100 pl-1" style="padding-right: .125rem !important;">
                            <% if (dpCategory.length > 2 && dpCategory[2]) { %>
                            <div class="card bg-dark height-100">
                                <div class="dpgl_chart" style="height: 100%; width: 100%;"></div>
                            </div>
                            <% } %>
                        </div>
                    </div>
                    <div class="col-3 px-0 pt-1 height-100">
                        <div class="height-100" style="padding-left: .375rem !important;">
                            <% if (dpCategory.length > 3 && dpCategory[3]) { %>
                            <div class="card bg-dark height-100">
                                <div class="dpgl_chart" style="height: 100%; width: 100%;"></div>
                            </div>
                            <% } %>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--<script src="/public/js/datacollect_scroll.js"></script>-->
<script type="text/javascript">  autoFlashHeight();</script>
<script type="text/javascript">
    const category = JSON.parse(unescape('<%- escape(JSON.stringify(categoryData)) %>'));
    const daping06Set = JSON.parse(unescape('<%- escape(JSON.stringify(daping06Set)) %>'));
    const dpCategory = JSON.parse(unescape('<%- escape(JSON.stringify(dpCategory)) %>'));
    const gcsrmx_option = {
        title: {
            text: '工程收入明细',
            left: 'center',
            top:'5%'
        },
        color: ['rgba(0, 157, 255,1)','rgba(34,228,255,1)',
            'rgba(59,255,208,1)','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'
            },
            position: function (pos, params, dom, rect, size) {
                return {top: pos[1], left: pos[0]};
            }
        },
        dataZoom: [
            {
                brushSelect:false,
                // zoomLock: false,
                type: 'slider',
                show: true,
                realtime: true,
                showdetail: false,
                showDataShadow: false,
                // dataZoomIndex: 10,
                start: 0,
                end: 8,
                handleSize: 0,
                height: 10,
                bottom: '10%',
            },
        ],
        legend: {
            data: ['已完成', '应收入', '已收入'],
            top:'17%'
        },
        grid: {
            top:'25%',
            left: '3%',
            right: '4%',
            bottom: '15%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: [],
                axisLabel: {
                    show: true,
                    interval: 0,
                    textStyle: {
                        color: "#fff",
                        fontSize: 12
                    },
                    formatter: function(value) {
                        var res = value;
                        if(res.length > 5) {
                            res = res.substring(0, 4) + "..";
                        }
                        return res;
                    },
                    rich: {
                        ellipsis: {
                            width: 100, // 控制显示宽度
                            overflow: 'break',
                        }
                    }
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                name:'金额',
                position: 'left',
                axisLabel : {
                    formatter: function (value, index) {
                        if (value < 0) {
                            let newValue = Math.abs(value);
                            if (newValue >= 10000 && newValue < 10000000) {
                                newValue = newValue / 10000 + "万";
                            } else if (newValue >= 10000000) {
                                newValue = newValue / 10000000 + "千万";
                            }
                            value = '-' + newValue;
                        }
                        if (value >= 10000 && value < 10000000) {
                            value = value / 10000 + "万";
                        } else if (value >= 10000000) {
                            value = value / 10000000 + "千万";
                        }
                        return value;
                    }
                },
                splitArea : {show : true}
            },
        ],
        series: [
            {
                name: '已完成',
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                data: []
            },
            {
                name: '应收入',
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                data: []
            },
            {
                name: '已收入',
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                data: []
            }
        ]
    };
    const gcsrmx_chart = document.getElementsByClassName('gcsrmx_chart');
    const gcsrmxChart = echarts.init(gcsrmx_chart[0], 'dark');
    gcsrmxChart.setOption(gcsrmx_option);
    const gcsrqk_option = {
        title: {
            text: '工程收入情况',
            left: 'center',
            top:'5%'
        },
        color: ['rgba(0, 157, 255, 1)','rgba(78, 139, 229,1)',
            '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: {            // Use axis to trigger tooltip
                type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },
        grid: {
            left: '10%',
            right: '10%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            name:'金额',
            position: 'bottom',
            axisLabel : {
                formatter: function (value, index) {
                    if (value < 0) {
                        let newValue = Math.abs(value);
                        if (newValue >= 10000 && newValue < 10000000) {
                            newValue = newValue / 10000 + "万";
                        } else if (newValue >= 10000000) {
                            newValue = newValue / 10000000 + "千万";
                        }
                        value = '-' + newValue;
                    }
                    if (value >= 10000 && value < 10000000) {
                        value = value / 10000 + "万";
                    } else if (value >= 10000000) {
                        value = value / 10000000 + "千万";
                    }
                    return value;
                }
            },
            splitArea : {show : true}
        },
        yAxis: {
            type: 'category',
            data: ['待收入', '已收入', '应收入', '已完成', '合同'],
            axisLabel: {
                show: true,
                interval: 0,
                formatter: function(value) {
                    var res = value;
                    if(res.length > 10) {
                        res = res.substring(0, 10) + "..";
                    }
                    return res;
                }
            },
            margin: 10,
        },
        // dataZoom: [
        //     {
        //         brushSelect:false,
        //         start: 0,
        //         end: 10,
        //         type: 'slider',
        //         show: true,
        //         handleSize: 0,
        //         realtime: true,
        //         showDetail: false,
        //         // filterMode: 'empty',
        //         yAxisIndex: [0,1],
        //         width: 10,
        //         height: '80%',
        //         right: '5%',
        //         bottom:'2%'
        //     },
        // ],
        series: [
            {
                name: '情况',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true,
                    // position: 'insideLeft',
                    align: 'left'
                },
                emphasis: {
                    focus: 'series'
                },
                data: [],
            }
        ]
    };
    const gcsrqk_chart = document.getElementsByClassName('gcsrqk_chart');
    const gcsrqkChart = echarts.init(gcsrqk_chart[0], 'dark');
    gcsrqkChart.setOption(gcsrqk_option);
    const yingsf_option = {
        title: {
            text: '应收与应付对比',
            left: 'center',
            top:'5%'
        },
        color: ['rgba(0, 157, 255,1)','rgba(34,228,255,1)',
            '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: {
            data: ['工程应收', '工程应付'],
            top:'15%'
        },
        grid: {
            top:'25%',
            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;
                    }
                },
            }
        ],
        dataZoom: [
            {
                brushSelect: false,
                showdetail: false,
                show: true,
                realtime: true,
                dataZoomIndex: 10,
                start: 0,
                end: 8,
                handleSize: 0,
                height: 10,
                bottom: '10%'
            },
        ],
        series: [
            {
                name: '工程应收',
                type: 'line',
                // stack: '总量',
                // areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: []
            },
            {
                name: '工程应付',
                type: 'line',
                // stack: '总量',
                // areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: []
            }
        ]
    };
    const yingsf_chart = document.getElementsByClassName('yingsf_chart');
    const yingsfChart = echarts.init(yingsf_chart[0], 'dark');
    yingsfChart.setOption(yingsf_option);
    const yisf_option = {
        title: {
            text: '已收与已付对比',
            left: 'center',
            top:'5%'
        },
        color: ['rgba(0, 157, 255,1)','rgba(34,228,255,1)',
            '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: {
            data: ['工程已收', '工程已付'],
            top:'15%'
        },
        grid: {
            top:'25%',
            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;
                    }
                },
            }
        ],
        dataZoom: [
            {
                brushSelect: false,
                showdetail: false,
                show: true,
                realtime: true,
                dataZoomIndex: 10,
                start: 0,
                end: 8,
                handleSize: 0,
                height: 10,
                bottom: '10%'
            },
        ],
        series: [
            {
                name: '工程已收',
                type: 'line',
                // stack: '总量',
                // areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: []
            },
            {
                name: '工程已付',
                type: 'line',
                // stack: '总量',
                // areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: []
            }
        ]
    };
    const yisf_chart = document.getElementsByClassName('yisf_chart');
    const yisfChart = echarts.init(yisf_chart[0], 'dark');
    yisfChart.setOption(yisf_option);
    const dpglChartOption = {
        title: {
            text: '管理',
            left: 'center',
            top:'5%'
        },
        color: ['rgba(0, 157, 255,1)','rgba(34,228,255,1)',
            'rgba(78, 229, 139,0.7)','rgba(108, 78, 229,0.7)',
            'rgba(58,207,221,0.7)','rgba(164, 229, 78,0.7)',
            'rgba(199, 78, 229,0.7)', 'rgba(229, 92, 174, 0.7)',
            'rgba(229, 214, 78, 0.7)', 'rgba(241, 87, 96, 0.7)',
            'rgba(242, 179, 82, 0.7)'],
        backgroundColor: '#343a40 ',
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
        },
        dataZoom: [
            {
                brushSelect:false,
                // zoomLock: false,
                type: 'slider',
                show: true,
                realtime: true,
                showdetail: false,
                showDataShadow: false,
                // dataZoomIndex: 10,
                start: 0,
                end: 1,
                handleSize: 0,
                height: 10,
                bottom: '10%',
                zoomLock: true,
            },
        ],
        legend: {
            data: ['已完成', '已支付'],
            top:'17%'
        },
        grid: {
            top:'25%',
            left: '3%',
            right: '4%',
            bottom: '15%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: [],
                axisLabel: {
                    show: true,
                    interval: 0,
                    textStyle: {
                        color: "#fff",
                        fontSize: 12
                    },
                    formatter: function(value) {
                        var res = value;
                        if(res.length > 4) {
                            res = res.substring(0, 4) + "..";
                        }
                        return res;
                    },
                    rich: {
                        ellipsis: {
                            width: 100, // 控制显示宽度
                            overflow: 'break',
                        }
                    }
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name:'金额',
                position: 'left',
                axisLabel : {
                    formatter: function (value, index) {
                        if (value < 0) {
                            let newValue = Math.abs(value);
                            if (newValue >= 10000 && newValue < 10000000) {
                                newValue = newValue / 10000 + "万";
                            } else if (newValue >= 10000000) {
                                newValue = newValue / 10000000 + "千万";
                            }
                            value = '-' + newValue;
                        }
                        if (value >= 10000 && value < 10000000) {
                            value = value / 10000 + "万";
                        } else if (value >= 10000000) {
                            value = value / 10000000 + "千万";
                        }
                        return value;
                    }
                },
                splitArea : {show : true}
            },
        ],
        series: [
            {
                name: '已完成',
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                data: [],
                barMaxWidth: 30
            },
            {
                name: '已支付',
                type: 'bar',
                stack: '计量',
                emphasis: {
                    focus: 'series'
                },
                data: [],
                barMaxWidth: 30
            }
        ]
    };
    const dpgl_chart = document.getElementsByClassName('dpgl_chart');
    const dpgl_charts = [];
    for (const d in dpCategory) {
        dpgl_charts[d] = echarts.init(dpgl_chart[d], 'dark');
        const option = _.cloneDeep(dpglChartOption);
        option.title.text = dpCategory[d].value;
        if (d == 0) {
            option.tooltip.position = function (pos, params, dom, rect, size) {
                return {top: pos[1], left: pos[0]};
            }
        }
        dpgl_charts[d].setOption(option);
    }
    let tenders = '';
    $(function () {
        $('#showFull').click(function () {
            const full=document.getElementById("big-data");
            launchIntoFullscreen(full);
        });
        $('#exitFull').click(function () {
            exitFullscreen();
        })
        // 数据全屏
        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();
            }
        });
        postData('/datacollect/load', {}, function (result) {
            tenders = result.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();
                        }
                    }
                }
            }
            for (const t of tenders) {
                calculateTender(t);
            }
            console.log(tenders);
            setData(tenders);
        });

        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);
            }
        }

        function setData(tenderList, categoryIndex = 0) {
            let gcsr_price = 0;
            let gccb_price = 0;
            let gclr_price = 0;
            let gclrl_num = 0;
            // 区分工程收入和工程成本
            const sr_tenders = _.filter(tenderList, function (item) {
                return _.findIndex(item.category, {cid: daping06Set.sr, value: daping06Set.sr_value}) !== -1;
            });
            const cb_tenders = _.filter(tenderList, function (item) {
                return _.findIndex(item.category, {cid: daping06Set.cb, value: daping06Set.cb_value}) !== -1;
            });
            const sr_chart_option_data = {
                contract_price: 0,
                end_gather_tp: 0,
                end_yf_tp: 0,
                end_sf_tp: 0,
                end_ds_tp: 0,
            };
            const srmx_chart_option_name = [];
            const srmx_chart_option_data = {
                end_gather_tp: [],
                end_yf_tp:[],
                end_sf_tp:[],
            };
            const yingsf_option_data = [];
            const yisf_option_data = [];
            for (const sr of sr_tenders) {
                sr_chart_option_data.contract_price = ZhCalc.add(sr_chart_option_data.contract_price, sr.contract_price);
                sr_chart_option_data.end_gather_tp = ZhCalc.add(sr_chart_option_data.end_gather_tp, sr.end_gather_tp);
                sr_chart_option_data.end_yf_tp = ZhCalc.add(sr_chart_option_data.end_yf_tp, sr.end_yf_tp);
                sr_chart_option_data.end_sf_tp = ZhCalc.add(sr_chart_option_data.end_sf_tp, sr.end_sf_tp);

                srmx_chart_option_name.push(sr.name);
                srmx_chart_option_data.end_gather_tp.push(sr.end_gather_tp ? sr.end_gather_tp : 0);
                srmx_chart_option_data.end_yf_tp.push(sr.end_yf_tp ? sr.end_yf_tp : 0);
                srmx_chart_option_data.end_sf_tp.push(sr.end_sf_tp ? sr.end_sf_tp : 0);
                for (const s of sr.month_stage) {
                    const index = _.findIndex(yingsf_option_data, { yearmonth: s.yearmonth });
                    const yiIndex = _.findIndex(yisf_option_data, { yearmonth: s.yearmonth });
                    if (index === -1) {
                        yingsf_option_data.push({
                            yearmonth: s.yearmonth,
                            ys_tp: s.end_yf_tp,
                            yf_tp: 0,
                            had_ys: true,
                            had_yf: false,
                        });
                    } else {
                        yingsf_option_data[index].had_ys = true;
                        yingsf_option_data[index].ys_tp = ZhCalc.add(yingsf_option_data[index].ys_tp, s.end_yf_tp);
                    }
                    if (yiIndex === -1) {
                        yisf_option_data.push({
                            yearmonth: s.yearmonth,
                            ys_tp: s.end_sf_tp,
                            yf_tp: 0,
                            had_ys: true,
                            had_yf: false,
                        });
                    } else {
                        yisf_option_data[yiIndex].had_ys = true;
                        yisf_option_data[yiIndex].ys_tp = ZhCalc.add(yisf_option_data[yiIndex].ys_tp, s.end_sf_tp);
                    }
                }
            }
            sr_chart_option_data.end_ds_tp = ZhCalc.sub(sr_chart_option_data.end_yf_tp, sr_chart_option_data.end_sf_tp);

            // 工程收入明细
            const gcsrmx_chart_option = gcsrmxChart.getOption();
            gcsrmx_chart_option.dataZoom[0].start = 0;
            gcsrmx_chart_option.dataZoom[0].end = computedPosition(sr_tenders.length, 6);
            gcsrmx_chart_option.xAxis[0].data = srmx_chart_option_name;
            gcsrmx_chart_option.series[0].data = srmx_chart_option_data.end_gather_tp;
            gcsrmx_chart_option.series[1].data = srmx_chart_option_data.end_yf_tp;
            gcsrmx_chart_option.series[2].data = srmx_chart_option_data.end_sf_tp;
            if (sr_tenders.length >= 6) {
                gcsrmx_chart_option.dataZoom[0].show = true;
            } else {
                gcsrmx_chart_option.dataZoom[0].show = false;
            }
            gcsrmxChart.setOption(gcsrmx_chart_option);

            // 工程收入情况
            const gcsrqk_chart_option = gcsrqkChart.getOption();
            // gcsrqk_chart_option.dataZoom[0].start = 0;
            // gcsrqk_chart_option.dataZoom[0].end = computedPosition(sr_tenders.length);
            gcsrqk_chart_option.series[0].data = [sr_chart_option_data.end_ds_tp, sr_chart_option_data.end_sf_tp, sr_chart_option_data.end_yf_tp, sr_chart_option_data.end_gather_tp, sr_chart_option_data.contract_price];
            // if (sr_tenders.length >= 8) {
            //     gcsrqk_chart_option.dataZoom[0].show = true;
            // } else {
            //     gcsrqk_chart_option.dataZoom[0].show = false;
            // }
            gcsrqkChart.setOption(gcsrqk_chart_option);

            const cb_chart_option_data = {
                // end_contract_tp: 0,
                end_gather_tp: 0,
                end_yf_tp: 0,
                end_sf_tp: 0,
                end_ds_tp: 0,
            };
            const cb_chart_option_name = [];
            for (const cb of cb_tenders) {
                cb_chart_option_name.push(cb.name);
                // cb_chart_option_data.end_contract_tp = ZhCalc.add(cb_chart_option_data.end_contract_tp, cb.end_contract_tp);
                cb_chart_option_data.end_gather_tp = ZhCalc.add(cb_chart_option_data.end_gather_tp, cb.end_gather_tp);
                cb_chart_option_data.end_yf_tp = ZhCalc.add(cb_chart_option_data.end_yf_tp, cb.end_yf_tp);
                cb_chart_option_data.end_sf_tp = ZhCalc.add(cb_chart_option_data.end_sf_tp, cb.end_sf_tp);
                for (const s of cb.month_stage) {
                    const index = _.findIndex(yingsf_option_data, { yearmonth: s.yearmonth });
                    const yiIndex = _.findIndex(yisf_option_data, { yearmonth: s.yearmonth });
                    if (index === -1) {
                        yingsf_option_data.push({
                            yearmonth: s.yearmonth,
                            ys_tp: 0,
                            yf_tp: s.end_yf_tp,
                            had_ys: false,
                            had_yf: true,
                        });
                    } else {
                        yingsf_option_data[index].had_yf = true;
                        yingsf_option_data[index].yf_tp = ZhCalc.add(yingsf_option_data[index].yf_tp, s.end_yf_tp);
                    }
                    if (yiIndex === -1) {
                        yisf_option_data.push({
                            yearmonth: s.yearmonth,
                            ys_tp: 0,
                            yf_tp: s.end_sf_tp,
                            had_ys: false,
                            had_yf: true,
                        });
                    } else {
                        yisf_option_data[index].had_yf = true;
                        yisf_option_data[yiIndex].yf_tp = ZhCalc.add(yisf_option_data[yiIndex].yf_tp, s.end_sf_tp);
                    }
                }
            }
            cb_chart_option_data.end_ds_tp = ZhCalc.sub(cb_chart_option_data.end_yf_tp, cb_chart_option_data.end_sf_tp);

            // 中间表格数值
            gcsr_price = sr_chart_option_data.end_yf_tp;
            $('.gcsr_price').text(formatNum(gcsr_price, '#,##0.######'));
            gccb_price = cb_chart_option_data.end_yf_tp;
            $('.gccb_price').text(formatNum(gccb_price, '#,##0.######'));
            gclr_price = ZhCalc.sub(gcsr_price, gccb_price);
            $('.gclr_price').text(formatNum(gclr_price, '#,##0.######'));
            gclrl_num = ZhCalc.round(ZhCalc.div(gclr_price, gccb_price)*100, 2);
            $('.gclrl_num').text((gclrl_num ? gclrl_num : 0) + '%');

            // 应收应付及已收已付
            const show_yingsf_option_data = {
                yearmonth: [],
                yf_tp: [],
                ys_tp: [],
            };
            if (yingsf_option_data.length > 0) {
                // chart_option4_data 排序
                const new_yingsf_option_data = _.sortBy(yingsf_option_data, 'yearmonth');
                for (const c4 of new_yingsf_option_data) {
                    show_yingsf_option_data.yearmonth.push(c4.yearmonth);
                    const hadYsDatas = _.filter(new_yingsf_option_data, function (item) {
                        return item.yearmonth < c4.yearmonth;
                    });
                    // 找出最近的一个had_ys为true值
                    if (hadYsDatas.length > 0) {
                        c4.ys_tp = ZhCalc.add(hadYsDatas[hadYsDatas.length - 1].ys_tp, c4.ys_tp);
                    }
                    // if (!c4.had_ys) {
                    //     const hadYsDatas = _.filter(new_yingsf_option_data, function (item) {
                    //         return item.had_ys && item.yearmonth < c4.yearmonth;
                    //     });
                    //     // 找出最近的一个had_ys为true值
                    //     if (hadYsDatas.length > 0) {
                    //         c4.ys_tp = hadYsDatas[hadYsDatas.length - 1].ys_tp;
                    //     }
                    // }
                    show_yingsf_option_data.ys_tp.push(c4.ys_tp);
                    const hadYfDatas = _.filter(new_yingsf_option_data, function (item) {
                        return item.yearmonth < c4.yearmonth;
                    });
                    // 找出最近的一个had_yf为true值
                    if (hadYfDatas.length > 0) {
                        c4.yf_tp = ZhCalc.add(hadYfDatas[hadYfDatas.length - 1].yf_tp, c4.yf_tp);
                    }
                    // if (!c4.had_yf) {
                    //     const hadYfDatas = _.filter(new_yingsf_option_data, function (item) {
                    //         return item.had_yf && item.yearmonth < c4.yearmonth;
                    //     });
                    //     // 找出最近的一个had_yf为true值
                    //     if (hadYfDatas.length > 0) {
                    //         c4.yf_tp = hadYfDatas[hadYfDatas.length - 1].yf_tp;
                    //     }
                    // }
                    show_yingsf_option_data.yf_tp.push(c4.yf_tp);
                }
            }
            const yingsf_option = yingsfChart.getOption();
            yingsf_option.dataZoom[0].start = 0;
            yingsf_option.dataZoom[0].end = computedPosition(show_yingsf_option_data.yearmonth.length);
            yingsf_option.xAxis[0].data = show_yingsf_option_data.yearmonth;
            yingsf_option.series[0].data = show_yingsf_option_data.ys_tp;
            yingsf_option.series[1].data = show_yingsf_option_data.yf_tp;
            if (show_yingsf_option_data.yearmonth.length >= 8) {
                yingsf_option.dataZoom[0].show = true;
            } else {
                yingsf_option.dataZoom[0].show = false;
            }
            yingsfChart.setOption(yingsf_option);
            const show_yisf_option_data = {
                yearmonth: [],
                yf_tp: [],
                ys_tp: [],
            };
            if (yisf_option_data.length > 0) {
                const new_yisf_option_data = _.sortBy(yisf_option_data, 'yearmonth');
                for (const c4 of new_yisf_option_data) {
                    show_yisf_option_data.yearmonth.push(c4.yearmonth);
                    const hadYsDatas = _.filter(new_yisf_option_data, function (item) {
                        return item.yearmonth < c4.yearmonth;
                    });
                    // 找出最近的一个had_ys为true值
                    if (hadYsDatas.length > 0) {
                        c4.ys_tp = ZhCalc.add(hadYsDatas[hadYsDatas.length - 1].ys_tp, c4.ys_tp);
                    }
                    // if (!c4.had_ys) {
                    //     const hadYsDatas = _.filter(new_yisf_option_data, function (item) {
                    //         return item.had_ys && item.yearmonth < c4.yearmonth;
                    //     });
                    //     // 找出最近的一个had_ys为true值
                    //     if (hadYsDatas.length > 0) {
                    //         c4.ys_tp = hadYsDatas[hadYsDatas.length - 1].ys_tp;
                    //     }
                    // }
                    show_yisf_option_data.ys_tp.push(c4.ys_tp);
                    const hadYfDatas = _.filter(new_yisf_option_data, function (item) {
                        return item.yearmonth < c4.yearmonth;
                    });
                    // 找出最近的一个had_yf为true值
                    if (hadYfDatas.length > 0) {
                        c4.yf_tp = ZhCalc.add(hadYfDatas[hadYfDatas.length - 1].yf_tp, c4.yf_tp);
                    }
                    // if (!c4.had_yf) {
                    //     const hadYfDatas = _.filter(new_yisf_option_data, function (item) {
                    //         return item.had_yf && item.yearmonth < c4.yearmonth;
                    //     });
                    //     // 找出最近的一个had_yf为true值
                    //     if (hadYfDatas.length > 0) {
                    //         c4.yf_tp = hadYfDatas[hadYfDatas.length - 1].yf_tp;
                    //     }
                    // }
                    show_yisf_option_data.yf_tp.push(c4.yf_tp);
                }
            }
            const yisf_option = yisfChart.getOption();
            yisf_option.dataZoom[0].start = 0;
            yisf_option.dataZoom[0].end = computedPosition(show_yisf_option_data.yearmonth.length);
            yisf_option.xAxis[0].data = show_yisf_option_data.yearmonth;
            yisf_option.series[0].data = show_yisf_option_data.ys_tp;
            yisf_option.series[1].data = show_yisf_option_data.yf_tp;
            if (show_yisf_option_data.yearmonth.length >= 8) {
                yisf_option.dataZoom[0].show = true;
            } else {
                yisf_option.dataZoom[0].show = false;
            }
            yisfChart.setOption(yisf_option);

            // 最底下1排4个管理图表输出设置和工程成本管理汇总表格设置
            const gccbglhz = [];
            if (dpgl_charts.length > 0) {
                for (const d in dpCategory) {
                    if (d) {
                        const dpgl_option = dpgl_charts[d].getOption();
                        dpgl_option.dataZoom[0].start = 0;
                        const dpgl_chart_option_name = [];
                        const dpgl_chart_option_data = {
                            end_gather_tp: [],
                            end_sf_tp:[],
                        };
                        const cbgl_tenders = _.filter(tenderList, function (item) {
                            return _.findIndex(item.category, {cid: dpCategory[d].cid, value: dpCategory[d].id}) !== -1;
                        });
                        const oneCbgl = {
                            name: dpCategory[d].value,
                            end_gather_tp: 0,
                            end_sf_tp: 0,
                            end_yf_tp: 0,
                        }
                        for (const t of cbgl_tenders) {
                            dpgl_chart_option_name.push(t.name);
                            dpgl_chart_option_data.end_gather_tp.push(t.end_gather_tp ? t.end_gather_tp : 0);
                            dpgl_chart_option_data.end_sf_tp.push(t.end_sf_tp ? t.end_sf_tp : 0);
                            oneCbgl.end_gather_tp = t.end_gather_tp ? ZhCalc.add(oneCbgl.end_gather_tp, t.end_gather_tp) : oneCbgl.end_gather_tp;
                            oneCbgl.end_sf_tp = t.end_sf_tp ? ZhCalc.add(oneCbgl.end_sf_tp, t.end_sf_tp) : oneCbgl.end_sf_tp;
                            oneCbgl.end_yf_tp = t.end_yf_tp ? ZhCalc.add(oneCbgl.end_yf_tp, t.end_yf_tp) : oneCbgl.end_yf_tp;
                        }
                        oneCbgl.end_df_tp = ZhCalc.sub(oneCbgl.end_yf_tp, oneCbgl.end_sf_tp);
                        gccbglhz.push(oneCbgl);
                        dpgl_option.dataZoom[0].end = computedPosition(cbgl_tenders.length, 4);
                        dpgl_option.xAxis[0].data = dpgl_chart_option_name;
                        dpgl_option.series[0].data = dpgl_chart_option_data.end_gather_tp;
                        dpgl_option.series[1].data = dpgl_chart_option_data.end_sf_tp;
                        if (cbgl_tenders.length >= 4) {
                            dpgl_option.dataZoom[0].show = true;
                        } else {
                            dpgl_option.dataZoom[0].show = false;
                        }
                        dpgl_charts[d].setOption(dpgl_option);
                    }
                }
            }
            const allgccb = {
                name: '合计',
                end_gather_tp: 0,
                end_sf_tp: 0,
                end_yf_tp: 0,
            };
            let hzHtml = '';
            for (const cb of gccbglhz) {
                allgccb.end_gather_tp = ZhCalc.add(allgccb.end_gather_tp, cb.end_gather_tp);
                allgccb.end_sf_tp = ZhCalc.add(allgccb.end_sf_tp, cb.end_sf_tp);
                allgccb.end_yf_tp = ZhCalc.add(allgccb.end_yf_tp, cb.end_yf_tp);
                hzHtml += '<tr class="bg-dark" style="line-height: 2rem;text-align: center;"><td style="text-align: left;min-width: 95px;">' + cb.name + '</td><td>' + cb.end_gather_tp + '</td><td>' + cb.end_yf_tp + '</td><td>' + cb.end_sf_tp + '</td><td>' + cb.end_df_tp + '</td></tr>';
            }
            allgccb.end_df_tp = ZhCalc.sub(allgccb.end_yf_tp, allgccb.end_sf_tp);
            hzHtml += '<tr class="bg-dark" style="line-height: 2rem;text-align: center;"><td style="text-align: left;min-width: 95px;">' + allgccb.name + '</td><td>' + allgccb.end_gather_tp + '</td><td>' + allgccb.end_yf_tp + '</td><td>' + allgccb.end_sf_tp + '</td><td>' + allgccb.end_df_tp + '</td></tr>';
            $('.stage-data').html(hzHtml);
            setTableboxHeight();
            // console.log(sr_tenders, cb_tenders);
        }

        function setTableboxHeight() {
            $('.tablebox').height($('.gccb').height() - 51);
        }
        let resizeTimer = null;
        $(window).bind('resize', function () {
            if (resizeTimer) clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function () {
                echartsReset();
            }, 500);
        })

        function echartsReset() {
            gcsrmxChart.resize();
            gcsrqkChart.resize();
            yingsfChart.resize();
            yisfChart.resize();
            if (dpgl_charts.length > 0) {
                for (const d in dpCategory) {
                    if (d) {
                        dpgl_charts[d].resize();
                    }
                }
            }
            setTableboxHeight();
        }

        // 第一层分类选择
        $("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();
                $('#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();
                    $('#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();
                        }
                    }
                }
            }
            // console.log(newTenderList, categoryIndex);
            setData(newTenderList, categoryIndex);
        });

        // 第二层分类选择
        $("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 categoryIndex = 1;
            $(this).parents('.dropdown-menu').siblings('button').text($(this).text());
            if (id) {
                // 获取第二层已选类别
                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;
            }
            // console.log(newTenderList, categoryIndex);
            setData(newTenderList, categoryIndex);
        });
    });
    // 计算显示滚动条长度
    function computedPosition(xArrayLength, maxNum = 8) {
        if (xArrayLength >= maxNum) {
            // return Math.floor(maxNum / xArrayLength * 100) > 100 ? 100 : Math.floor(maxNum / xArrayLength * 100);
            const endValue = (maxNum / xArrayLength) * 100;
            return endValue > Math.floor(endValue) + 0.5 ? Math.floor(endValue) + 0.5 : (Math.floor(endValue) === 0 ? 0.5 : Math.floor(endValue));
            // return Math.round((maxNum / xArrayLength) * 100 * 100)/100;
            // return length <= 10 ? 35 : 100 - Math.floor(35 / length * 100);
        } else {
            return 100;
        }
    }

    function formatNum(num, pattern) {
        const minus = num > 0 ? '' : '-'
        const strarr = num ? Math.abs(num).toString().split('.') : ['0'];
        const fmtarr = pattern ? pattern.split('.') : [''];
        let retstr = '';

        // 整数部分
        let str = strarr[0];
        let fmt = fmtarr[0];
        let i = str.length - 1;
        let comma = false;
        for (var f = fmt.length - 1; f >= 0; f--) {
            switch (fmt.substr(f, 1)) {
                case '#':
                    if (i >= 0) retstr = str.substr(i--, 1) + retstr;
                    break;
                case '0':
                    if (i >= 0) retstr = str.substr(i--, 1) + retstr;
                    else retstr = '0' + retstr;
                    break;
                case ',':
                    comma = true;
                    retstr = ',' + retstr;
                    break;
            }
        }
        if (i >= 0) {
            if (comma) {
                const l = str.length;
                for (;i >= 0; i--) {
                    retstr = str.substr(i, 1) + retstr;
                    if (i > 0 && ((l - i) % 3) == 0) retstr = ',' + retstr;
                }
            } else retstr = str.substr(0, i + 1) + retstr;
        }

        retstr = retstr + '.';
        // 处理小数部分
        str = strarr.length > 1 ? strarr[1] : '';
        fmt = fmtarr.length > 1 ? fmtarr[1] : '';
        i = 0;
        for (var f = 0; f < fmt.length; f++) {
            switch (fmt.substr(f, 1)) {
                case '#':
                    if (i < str.length) retstr += str.substr(i++, 1);
                    break;
                case '0':
                    if (i < str.length) retstr += str.substr(i++, 1);
                    else retstr += '0';
                    break;
            }
        }
        return minus + retstr.replace(/^,+/, '').replace(/\.$/, '');
    }
</script>