wangrulan0910
/
hb_nokia_pm_ui-20230223


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Template</title>
    <link rel="stylesheet" href="./js/layui/css/layui.css">
    <style>
        .all {
            padding-top: 30px;
            padding-left: 30px;
            padding-right: 30px;

        }

        .c {
            float: left;

        }

        .c1 {
            margin: 10px;
            float: left;


        }

        .t1 {
            width: 15%;
        }

        .row {
            height: 50px;
        }

        .t2 {
            width: 10%;
        }

        .view {

            width: 75%;
        }

        #timeType {
            float: left;
            width: 10%;
        }

        #time1 {
            float: left;
            width: 10%;
        }

        .btn {
            float: left;
            width: 10%;
        }

        .label {
            height: 50px;
            line-height: 32px;
        }
    </style>
</head>

<body>
<div class="all">

    <div class="c t1">
        <button type="button" class="layui-btn layui-btn-sm" onclick="addTemplate()">添加指标模板</button>
        <button type="button" class="layui-btn layui-btn-sm" onclick="deleteTemplate()">删除指标模板</button>
        <div id="allArea"></div>
        <div id="indicatorTemplate"></div>
        <div id="add-template" style="display: none;">
            <form class="layui-form" action="">
                <div class="layui-form-item" style="margin-top: 20px">
                    <label class="layui-form-label">模板名称</label>
                    <div class="layui-input-block" style="width: 400px">
                        <input id="templateName" type="text" name="templateName" required lay-verify="required"
                               placeholder="请输入模板名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </form>
            <div id="allIndicator"></div>
        </div>
    </div>
    <div class="c t2">
        <form class="layui-form" action="">
            <div class="column" id="searchType">
                <input type="radio" name="where" value="eci" title="按eci查询" lay-filter="where" checked>
                <input type="radio" name="where" value="all" title="全网选择" lay-filter="where">
            </div>
            <textarea id="condition" cols="14" rows="19"
                      style="border-width:1px;border-style: solid;border-color: #eee;"></textarea>
        </form>
    </div>
    <div class="c view">
        <div class="row layui-form">

            <div class="c1 label"> 粒度:</div>

            <div class="timeTypeDiv c1" style="width: 10%;">
                <select name="timeType" id="timeType">
                    <option value="quater">15分钟</option>
                    <option value="hour">小时</option>
                    <option value="day">天</option>
                    <!--<option value="week">星期</option>-->
                    <!--<option value="month">月</option>-->
                </select>
            </div>

            <div class="c1 label" style="margin-left: 120px;">时间:</div>
            <input type="text" class="layui-input c1" style="width: 300px;" id="time1">
            <button class="layui-btn btn c1" style="margin-left: 20px;" onclick="search()">查询</button>
            <button class="layui-btn btn c1" style="margin-left: 20px;" onclick="conditionSearch()">条件查询</button>
        </div>
        <div class="row">
            <table id="demo" lay-filter="test" style="width: 200px;"></table>
        </div>
    </div>
</div>
<script src="./js/jquery-3.5.1.min.js"></script>
<script src="./js/layui/layui.js"></script>
<script>
        var dataA;
        var layer;
        var tree;
        var table;
        layui.use(['layer', 'tree', 'form', 'laydate', 'table'], function () {
            tree = layui.tree;
            layer = layui.layer;
            table = layui.table;
            var form = layui.form,

                laydate = layui.laydate;
            // layer.msg('Hello Zhou')
            table.render({
                elem: '#demo',
                height: 320,
                // url: 'https://www.layui.com/demo/table/user/' , //数据接口
                page: true, //开启分页
                toolbar: true,
                defaultToolbar: [{
                    title: '导出' //标题
                    ,
                    layEvent: 'export' //事件名，用于 toolbar 事件中使用
                    ,
                    icon: 'layui-icon-export' //图标类名
                }],
                limit: 50,
                limits: [50, 200, 500],
                cols: [

                ],
                data: []
            });

            //工具条事件
            table.on('toolbar(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                if (layEvent === 'export') {
                    // layer.alert('Hi，头部工具栏扩展的右侧图标。');
                    var tableData = table.cache['demo']
                    obj.config.title = "地市指标"
                    // console.log(JSON.stringify(dataA))
                    table.exportFile(obj.config.id, dataA.datas, 'csv')
                }
            });
            laydate.render({
                elem: '#time1',
                type: 'datetime',
                range: true,
            });

            initTreeCity(tree)
            initTreeIndicator(tree)
            initTreeIndicatorTemplate(tree)
        })

        var treeCity;
        function initTreeCity(tree) {
            console.log('initTreeCity')
            $.ajax({
                type: "GET",
                // url: './json/citys.json',
                url: './initTreeCitys',
                data: {
                    "spread": false
                },
                success: function (r) {

                    // console.log(r)
                    let o = r instanceof Object
                    if (!o) {
                        r = JSON.parse(r)
                    }

                    treeCity = tree.render({
                        elem: '#allArea',
                        showCheckbox: true,
                        accordion: true,
                        id: 'Id1',
                        data: r
                    });


                    return false;

                }

            });

        }

        var treeIn;
        // 渲染指标模板
        function initTreeIndicatorTemplate(tree) {
            console.log('initTreeIndicatorTemplate')
            $.ajax({
                type: "GET",
                url: './initTreeIndicatorTemplate',
                data: {
                    "spread": false
                },
                success: function (r) {
                    let o = r instanceof Object
                    if (!o) {
                        r = JSON.parse(r)
                    }

                    treeIn = tree.render({
                        elem: '#indicatorTemplate',
                        showCheckbox: true,
                        accordion: true,
                        id: 'Id3',
                        data: r
                    });
                    return false;
                }
            });
        }

        function initTreeIndicator(tree) {
            console.log('initTreeIndicator')
            $.ajax({
                type: "GET",
                url: './initTreeIndicator',
                data: {
                    "spread": false
                },
                success: function (r) {

                    // console.log(r)
                    let o = r instanceof Object
                    if (!o) {
                        r = JSON.parse(r)
                    }

                    treeIn = tree.render({
                        elem: '#allIndicator',
                        showCheckbox: true,
                        accordion: true,
                        id: 'Id2',
                        data: r
                    });


                    return false;

                }

            });

        }

        function renderTable(table, citys, quxians, indicators, ttype, sdate) {
            console.log('renderTable')

            $.ajax({
                type: "POST",
                url: './renderTable',
                async: false,
                data: {
                    "citys": citys,
                    "quxians": quxians,
                    "indicators": indicators,
                    "ttype": ttype,
                    "sdate": sdate
                },
                success: function (r) {
                    dataA = r;
                    // 没有权限提示
                    if (r?.msg && r.msg.length > 0) {
                        alert(r.msg);
                        return;
                    }

                    let o = r instanceof Object
                    if (!o) {
                        r = JSON.parse(r)
                    }

                    table.render({
                        elem: '#demo',
                        height: 320,
                        // url: 'https://www.layui.com/demo/table/user/' , //数据接口
                        page: true, //开启分页
                        toolbar: true,
                        defaultToolbar: [{
                            title: '提示' //标题
                            ,
                            layEvent: 'export' //事件名，用于 toolbar 事件中使用
                            ,
                            icon: 'layui-icon-export' //图标类名
                        }],
                        limit: 50,
                        limits: [50, 200, 500],
                        cols: [
                            r.cols
                        ],
                        data: r.datas
                    });


                    return false;

                }

            });

        }

        function conditionRenderTable(table, condition, searchType, indicators, ttype, sdate) {
            console.log('conditionRenderTable')

            $.ajax({
                type: "POST",
                url: './conditionRenderTable',
                async: false,
                data: {
                    "condition": condition,
                    "searchType": searchType,
                    "indicators": indicators,
                    "ttype": ttype,
                    "sdate": sdate
                },
                success: function (r) {
                    dataA = r;
                    // console.log(r)
                    let o = r instanceof Object
                    if (!o) {
                        r = JSON.parse(r)
                    }

                    table.render({
                        elem: '#demo',
                        height: 320,
                        // url: 'https://www.layui.com/demo/table/user/' , //数据接口
                        page: true, //开启分页
                        toolbar: true,
                        defaultToolbar: [{
                            title: '提示' //标题
                            ,
                            layEvent: 'export' //事件名，用于 toolbar 事件中使用
                            ,
                            icon: 'layui-icon-export' //图标类名
                        }],
                        limit: 50,
                        limits: [50, 200, 500],
                        cols: [
                            r.cols
                        ],
                        data: r.datas
                    });


                    return false;

                }

            });

        }

        function search() {
            // form.on('submit(formDemo)', function (data) {
            if ($('#time1').val() == 0) {
                alert('填选择时间')
                return;
            }
            if (tree.getChecked('Id1').length == 0) {
                alert('请选择地市')
                return;
            }
            if (tree.getChecked('Id3').length == 0) {
                alert('请选择指标')
                return;
            }

           alert('开始查询')
            // layer.msg(JSON.stringify(data.field));
            console.log(JSON.stringify(tree.getChecked('Id1')))
            let checkData1 = tree.getChecked('Id1')[0].children;
            let checkData2 = tree.getChecked('Id3')[0].children;
            console.log(checkData1)
            console.log(checkData2)

            const quxianA = new Set();
            var citysA = [];
            checkData1.forEach(eee => {
                citysA.push("'" + eee.title + "'")
                eee.children.forEach(ee => {
                    quxianA.add("'" + ee.title + "'")
                })
            });

            const quxians = Array.from(quxianA).join(',')
            citys = citysA.join(',')
            console.log(`citys: ${citys}`)
            console.log(`quxians: ${quxians}`)
            var indicatorsA = new Set();
            checkData2.forEach(eee => {
                eee.children.forEach(ee => {
                    indicatorsA.add(ee.id)
                })
            });
            const indicators = Array.from(indicatorsA).join(',')
            console.log(`indicators: ${JSON.stringify(indicators)}`)
            let ttype = $('#timeType').val()
            let sdate = $('#time1').val()
            console.log(`sdate: ${sdate}`)
            renderTable(table, citys, quxians,indicators, ttype, sdate)

            return false;
        }


        function conditionSearch() {
            let sdate = $('#time1').val()
            if (sdate.length == 0) {
                alert('填选择时间')
                return;
            }

            if (tree.getChecked('Id2').length == 0) {
                alert('请选择指标')
                return;
            }

            let condition = $('#condition').val();
            let ttype = $('#timeType').val()
            let searchType = $('#searchType').find('input:checked').val()
            if (searchType === 'eci' && $('#condition').val().length == 0) {
                alert('填写查询条件')
                return;
            }

            console.log(`searchType: ${searchType}`)
            console.log(`condition: ${condition}`)
            // layer.msg(JSON.stringify(data.field));
            // let checkData1 = tree.getChecked('Id1')[0].children;

            let checkData2 = tree.getChecked('Id2')[0].children;


            var indicatorsA = new Array();
            checkData2.forEach(eee => {
                eee.children.forEach(ee => {

                    indicatorsA.push(ee.id)

                })
            });
            indicators = indicatorsA.join(',')
            // console.log(indicators)
            conditionRenderTable(table, condition, searchType, indicators, ttype, sdate)

            return false;
        }

        // 添加指标模板
        function addTemplate() {
            layer.open({
                type: 1,
                title:"添加指标模板",
                content: $("#add-template"),
                area: ['600px', '1000px'],
                btn: ['确定'],
                shadeClose: true,
                yes: function(index, layero){
                    const templateName = $('#templateName').val()
                    if (!templateName || templateName.length <= 0) {
                        alert('请输入模板名称！')
                        return
                    }

                    const checkedData = tree?.getChecked('Id2')?.[0]?.children
                    if (!checkedData || checkedData.length <= 0) {
                        alert('请选择指标！')
                        return
                    }

                    console.log(`templateName: ${templateName}`)
                    console.log(`checkedData: ${JSON.stringify(checkedData)}`)
                    const indicatorsA = []
                    checkedData.forEach(eee => {
                        eee.children.forEach(ee => {
                            indicatorsA.push(ee.id)
                        })
                    });
                    const indicators = indicatorsA.join(',')
                    console.log(`indicators: ${indicators}`)
                    $.ajax({
                        type: "POST",
                        url: './addTemplate',
                        async: false,
                        data: {
                            "templateName": templateName,
                            "indicators": indicators,
                        },
                        success: function (r) {
                            console.log(`response: ${JSON.stringify(r)}`)

                            if (r) {
                                alert('添加失败！')
                            } else {
                                layer.msg('添加成功')
                                layer.close(index)
                            }
                        }
                    });
                },
            });
        }

        // 删除指标模板
        function deleteTemplate() {
            const checkedData = tree?.getChecked('Id3')?.[0]?.children
            const idArray = []
            checkedData.forEach(t => {
                idArray.push(t.id)
            });

            if (!checkedData || checkedData.length <= 0) {
                alert('请选择要删除的指标模板！')
                return
            }

            layer.confirm('确认删除？', {icon: 3, title:'删除模板'}, function(index){
                const ids = idArray.join(',')
                console.log(`deleteTemplate: ${JSON.stringify(idArray)}`)
                $.ajax({
                    type: "POST",
                    url: './deleteTemplate',
                    async: false,
                    data: {
                        "ids": ids,
                    },
                    success: function (r) {
                        console.log(`response: ${JSON.stringify(r)}`)

                        if (r) {
                            alert('删除失败！')
                        } else {
                            layer.msg('删除成功')
                            layer.close(index)
                        }
                    }
                });
            });
        }
    </script>
</body>

</html>