Calculation/app/view/setting/datacollect.ejs

<% include ./sub_menu.ejs %>
<div class="panel-content">
    <div class="panel-title">
        <div class="title-main">
            <h2>决策大屏
                <a href="#power" data-toggle="modal" data-target="#power" class="btn btn-primary btn-sm pull-right">权限管理</a>
                <a href="#sort" data-toggle="modal" data-target="#sort" class="btn btn-primary btn-sm pull-right mr-1">分类管理</a>
            </h2>
        </div>
    </div>
    <div class="content-wrap">
        <div class="c-body">
            <div class="sjs-height-0">
                <nav class="nav nav-tabs m-3" id="tablist" role="tablist">
                    <a class="nav-item nav-link<% if (ctx.session.sessionProject.dataCollect === 0 || ctx.session.sessionProject.dataCollect === 1) { %> active<% } %>" data-datacollect="1" data-toggle="tab" href="#shujudaping-one" role="tab">决策大屏一</a>
                    <a class="nav-item nav-link<% if (ctx.session.sessionProject.dataCollect === 2) { %> active<% } %>" data-datacollect="2" data-toggle="tab" href="#shujudaping-two" role="tab">决策大屏二</a>
                    <a class="nav-item nav-link<% if (ctx.session.sessionProject.dataCollect === 3) { %> active<% } %>" data-datacollect="3" data-toggle="tab" href="#shujudaping-three" role="tab">决策大屏三</a>
                    <a class="nav-item nav-link<% if (ctx.session.sessionProject.dataCollect === 4) { %> active<% } %>" data-datacollect="4" data-toggle="tab" href="#shujudaping-four" role="tab">决策大屏四</a>
                    <div class="ml-auto">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="show-datacollect" value="option1" <% if (ctx.session.sessionProject.dataCollect) { %>checked<% } %>>
                            <label class="form-check-label" for="show-datacollect">数据大屏显示</label>
                        </div>
                    </div>
                </nav>
                <div class="tab-content m-3">
                    <div id="shujudaping-one" class="tab-pane<% if (ctx.session.sessionProject.dataCollect === 0 || ctx.session.sessionProject.dataCollect === 1) { %> active<% } %>"><img src="/public/images/juecedaping01.png" width="100%"></div>
                    <div id="shujudaping-two" class="tab-pane<% if (ctx.session.sessionProject.dataCollect === 2) { %> active<% } %>"><img src="/public/images/juecedaping02.png" width="100%"></div>
                    <div id="shujudaping-three" class="tab-pane<% if (ctx.session.sessionProject.dataCollect === 3) { %> active<% } %>"><img src="/public/images/juecedaping03.png" width="100%"></div>
                    <div id="shujudaping-four" class="tab-pane<% if (ctx.session.sessionProject.dataCollect === 4) { %> active<% } %>"><img src="/public/images/juecedaping04.png" width="100%"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/public/js/ztree/jquery.ztree.core.js"></script>
<script src="/public/js/ztree/jquery.ztree.excheck.js"></script>
<script>
    const category = JSON.parse(unescape('<%- escape(JSON.stringify(categoryData)) %>'));
    console.log(category);
    $(function () {
        autoFlashHeight();
        $('#show-datacollect').click(function () {
            let data_collect = 0;
            if ($(this).is(':checked')) {
                data_collect = $('#tablist').find('.active').data('datacollect');
            }
            postData('/setting/datacollect/save', { type: 'show', data_collect }, function (result) {

            })
        });
        $('#tablist a').click(function () {
            if ($('#show-datacollect').is(':checked')) {
                const data_collect = $(this).data('datacollect');
                postData('/setting/datacollect/save', { type: 'show', data_collect }, function (result) {

                })
            }
        });

        const setting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };
        const zNodes = [];
        const newCategory = _.filter(_.orderBy(category, ['level'], ['asc']), function (item) {
            return item.level !== 0;
        });
        let insertid = 1;
        const level1Array = [];
        const level2Array = [];
        for (const c of newCategory) {
            if (c.level === 1) {
                for (const v of c.value) {
                    level1Array.push({id: insertid});
                    zNodes.push({id: insertid, pId: 0, name: v.value, open: true, checked:true});
                    insertid++;
                }
            } else if (c.level === 2) {
                for (const l1 of level1Array) {
                    zNodes.push({id: insertid, pId: l1.id, name: '', checked:true});
                    insertid++;
                    for (const v of c.value) {
                        level2Array.push({id: insertid});
                        zNodes.push({id: insertid, pId: l1.id, name: v.value, open: true, checked:true});
                        insertid++;
                    }
                }
            }
            else if (c.level === 3) {
                for (const l2 of level2Array) {
                    zNodes.push({id: insertid, pId: l2.id, name: '', checked:true});
                    insertid++;
                    for (const v of c.value) {
                        zNodes.push({id: insertid, pId: l2.id, name: v.value, checked:true});
                        insertid++;
                    }
                }
            }
        }
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    })
</script>