other
/
hb_nokia_pm_ui


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582
							<!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">
    <link rel="stylesheet" href="./js/layui/css/modules/index.css">
    <style>
        .all {
            padding-top: 10px;
            padding-left: 30px;
            padding-right: 30px;

        }

        .c {
            float: left;
            background-color: #fff;
            padding: 10px;
        }

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

        .t1 {
            width: 18%;
            margin-right: 10px;
            -webkit-box-sizing:border-box; 
            -moz-box-sizing:border-box; 
            -ms-box-sizing:border-box; 
            box-sizing:border-box 
        }

        .row {
            height: 50px;
        }
        .row2 {
            height: 130px;
        }

        .t2 {
            width: 10%;
        }

        .view {

            width: 79%;
        }

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

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

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

        .label {
            height: 50px;
            line-height: 32px;
        }
        #column{
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="banner">
        <!-- <img src="../static/js/layui/css/modules/layer/default/nokiaLogo.png" alt="" width="150px" height="50px"> -->
        <div class="logo"></div>
        <div class="name">KPI-Analyser</div>
    </div>
<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 layui-btn-danger" 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 row2">
            <div style="width:100%;float: left;">
                <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>
        </br>
            <div style="width:100%;float: left;">
                <div class="column" id="searchType" style="width:auto;float: left;">
                    <input type="radio" name="where" value="eci" title="按eci查询" lay-filter="where" checked>
                    <input type="radio" name="where" value="area" title="按地市查询" lay-filter="where">
                </div>
                <div style="width:70%;float: left;">
                    <input id="condition" class="layui-input" placeholder="如多个eci查询请用英文逗号隔开"
                                style="border-width:1px;border-style: solid;border-color: #eee;"></input>
                </div>
            </div>
        </div>
        <div>
            <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(condition, searchType, table, citys, quxians, indicators, ttype, sdate) {
            console.log('renderTable')
            $.ajax({
                type: "POST",
                url: './renderTable',
                async: false,
                data: {
                    "condition": condition,
                    "searchType": searchType,
                    "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;
            }
            let condition = $('#condition').val();
            let searchType = $('#searchType').find('input:checked').val()
            if (searchType === 'eci' && $('#condition').val().length === 0) {
                alert('请填写eci')
                return;
            }
            console.log(`searchType: ${searchType}`)
            console.log(`condition: ${condition}`)
           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}`)
            const indicatorsA = new Set();
            checkData2.forEach(eee => {
                eee.children.forEach(ee => {
                    indicatorsA.add(ee.id)
                })
            });
            indicatorsA.add('eci')
            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(condition, searchType, table, citys, quxians,indicators, ttype, sdate)
            return false;
        }

        // function conditionSearch() {
        //     let sdate = $('#time1').val()
        //     if (sdate.length === 0) {
        //         alert('请选择时间')
        //         return;
        //     }
        //
        //     if (tree.getChecked('Id3').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('Id3')[0].children;
        //     const indicatorsA = new Set();
        //     checkData2.forEach(eee => {
        //         eee.children.forEach(ee => {
        //             indicatorsA.add(ee.id)
        //         })
        //     });
        //     indicatorsA.add('eci')
        //     const indicatorsB = [...indicatorsA]
        //     const indicators = indicatorsB.join(',')
        //     console.log(`indicators: ${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 {
                                initTreeIndicatorTemplate(tree)
                                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 {
                            initTreeIndicatorTemplate(tree)
                            layer.msg('删除成功')
                            layer.close(index)
                        }
                    }
                });
            });
        }

        // 
        $(document).ready(function(){
            setTimeout(()=>{
              $(".layui-tree-txt").mouseenter(function(){
                    // console.log('this',this)
                    $(this).attr("title",$(this).text());
                    // console.log('this.text(): ', $(this).text());
                });
            },1000)
        });
    </script>
</body>

</html>