other
/
hb_nokia_pm_ui


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712
							<!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 class="userinfo">
            <!-- <i class="layui-icon layui-icon-username"></i>  -->
            <span>你好，</span>
            <span id="userName"></span>
            <span class="logOut" onclick="logOutFun()">退出登录</span>
        </div>
    </div>
<div class="all layui-row">
    <div class=" t1 layui-col-md2 " >
        <div class="c" style="width:90%;height: 85vh;overflow: auto;">
            <div class="grid-demo grid-demo-bg1">
                <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>
                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="editTemplate()" style="margin-left: 0px;margin-top: 10px;">修改指标模板</button>
                <div id="allArea"></div>
                <div id="allMetrics"></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>
    </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 layui-col-md10">
        <div class="grid-demo">
            <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" onchange="handleChange(this)">
                            <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="AREA" title="按地市查询" lay-filter="where" checked>
                        <input type="radio" name="where" value="ECI" title="按eci查询" 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>
</div>
<script src="./js/jquery-3.5.1.min.js"></script>
<script src="./js/layui/layui.js"></script>
<script>
    const host = window.location.host
    const username = window.sessionStorage.getItem('userName')
    const socket = new WebSocket(`ws://${host}/ws?username=${username}`);
    socket.onopen = (event) => {
        console.log(event)
    }

    socket.onclose = (event) => {
        console.log(event)
        logout()
    }

    socket.onerror = (event) => {
        console.log(event)
        logout()
    }

    const logout = () => {
        alert('websocket连接异常，请重新登录')
        setTimeout(() => window.location.href = '/login', 1000)
    }
        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: 480,
                // 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 = "地市指标"
                    table.exportFile(obj.config.id, dataA, 'csv')
                }
            });
            let dateArray = '';
            let timeType = $('#timeType').val()
            console.log('timeType: ', timeType);
            let date = new Date();
            if(timeType == 'QUATER'){ 
                dateArray= formatDate(date) + ' ' + '00:00:00' + ' - ' + formatDate(date) + ' ' + '00:15:00';
                console.log('dateArray: ', dateArray);
            }
            if(timeType == 'HOUR'){ 
                console.log('xiaoshi')
                // dateArray= formatDate(date) + ' ' + '00:00:00' + ' - ' + formatDate(date) + ' ' + '00:15:00';
                // console.log('dateArray: ', dateArray);
            }
            laydate.render({
                elem: '#time1',
                type: 'datetime',
                range: true,
                value: dateArray,
                ready: function(date){
                    console.log(date); //得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                }
            });
            initTreeCity(tree)
            initTreeIndicator(tree)
            initAllIndicator(tree)
            initTreeIndicatorTemplate(tree)
            // console.log(window.sessionStorage.getItem('userName'))
            $("#userName").text(window.sessionStorage.getItem('userName'))
        })
            function handleChange(){
                console.log('5555')
                console.log($('#timeType').val())
                let timeType = $('#timeType').val()
                console.log('timeType: ', timeType);
                let date = new Date();
                if(timeType == 'QUATER'){ 
                    dateArray= formatDate(date) + ' ' + '00:00:00' + ' - ' + formatDate(date) + ' ' + '00:15:00';
                    console.log('dateArray: ', dateArray);
                }
                if(timeType == 'HOUR'){ 
                    console.log('xiaoshi')
                    dateArray= formatDate(date) + ' ' + '00:00:00' + ' - ' + formatDate(date) + ' ' + '01:00:00';
                    console.log('dateArray: ', dateArray);
                }
                if(timeType == 'DAY'){ 
                    console.log('xiaoshi')
                    dateArray= formatDate(date) + ' ' + '00:00:00' + ' - ' + formatDate(date) + ' ' + '23:59:59';
                    console.log('dateArray: ', dateArray);
                }
            }
            // $('#timeType').first().change(function(){
            //     handleChange()
            // })
            // $(document).on('change','#timeType',function(){
            //     console.log('55556666')
            //     handleChange()
            // })
            $('#timeType').on('change',function(){
                console.log('change: ', change);
                handleChange()
            });

        function  formatDate  (date) {  
            var y = date.getFullYear();  
            var m = date.getMonth() + 1;  
            m = m < 10 ? '0' + m : m;  
            var d = date.getDate();  
            d = d < 10 ? ('0' + d) : d;  
            return y + '-' + m + '-' + d;  
        };  

        var treeCity;
        function initTreeCity(tree) {
            $.ajax({
                type: "POST",
                // url: '/api/json/citys.json',
                url: '/api/initTreeCitys',
                success: function (r) {
                    if (r?.success) {
                        treeCity = tree.render({
                            elem: '#allArea',
                            showCheckbox: true,
                            accordion: true,
                            id: 'Id1',
                            data: r?.data
                        });
                        return
                    }
                    alert(r?.message ?? '发生错误了');
                }
            });
        }

        var treeIn;
        // 渲染指标模板
        function initTreeIndicatorTemplate(tree) {
            $.ajax({
                type: "POST",
                url: '/api/initTreeIndicatorTemplate',
                success: function (r) {
                    if (r?.success) {
                        treeIn = tree.render({
                            elem: '#indicatorTemplate',
                            showCheckbox: true,
                            accordion: true,
                            id: 'Id3',
                            // edit: ['update'],
                            data: r?.data,
                            // customOperate: true,
                            // operate:function(obj){
                            //     console.log('obj: ', obj);
                            //     $('.layui-tree-editInput').remove();
                            //     if(obj.type == "update"){
                            //         // addTemplate()
                            //     }

                            // },
                            oncheck: function(obj){
                                // console.log(obj);
                                if(obj.checked) {
                                    // console.log('tree.getChecked("Id4"): ', tree.getChecked('Id4'));
                                    tree.getChecked('Id4').length = 0
                                    tree.setChecked('Id4', [])
                                    tree.reload('Id4', {
                                        //新的参数
                                    });
                                    // console.log(' ----++++ ',  tree.getChecked('Id4'));
                                }
                            }
                        });
                        return
                    }
                    alert(r?.message ?? '发生错误了');
                }
            });
        }
        // 全部指标
        function initAllIndicator(tree) {
            $.ajax({
                type: "POST",
                url: '/api/allIndicator',
                success: function (r) {
                    if (r?.success) {
                        treeIn = tree.render({
                            elem: '#allMetrics',
                            showCheckbox: true,
                            accordion: true,
                            id: 'Id4',
                            data: r?.data,
                            oncheck: function(obj){
                                // console.log(obj);
                                if(obj.checked) {
                                    // console.log('tree.getChecked("Id3"): ', tree.getChecked('Id3'));
                                    tree.getChecked('Id3').length = 0
                                    tree.setChecked('Id3', [])
                                    tree.reload('Id3', {
                                        //新的参数
                                    });
                                    // console.log(' ---- ',  tree.getChecked('Id3'));
                                }
                            }
                        });
                        return
                    }
                    alert(r?.message ?? '发生错误了');
                }
            });
        }
        
        function initTreeIndicator(tree) {
            $.ajax({
                type: "POST",
                url: '/api/initTreeIndicator',
                success: function (r) {
                    if (r?.success) {
                        treeIn = tree.render({
                            elem: '#allIndicator',
                            showCheckbox: true,
                            accordion: true,
                            id: 'Id2',
                            data: r?.data,
                        });
                        return
                    }
                    alert(r?.message ?? '发生错误了');
                }
            });
        }
        function renderTable(condition, searchType, table, citys, quxians, indicators, timeType, startTime, endTime) {
            var tishi = layer.load(1, {
                shadeClose: false,
                title: '加载中..',
                shade: [0.5,'#000'] //0.1透明度的白色背景
            });
            // setTimeout(()=>{
            //     layer.close(tishi);
            // },5000)
            const dataJson = JSON.stringify({
                "condition": condition,
                "searchType": searchType,
                "citys": [...citys],
                "quxians": [...quxians],
                "indicators": [...indicators],
                "timeType": timeType,
                "startTime": startTime,
                "endTime": endTime
            })
            $.ajax({
                type: "POST",
                contentType: "application/json;charset=UTF-8",
                url: '/api/renderTable',
                data: dataJson,
                success: function (r) {
                    layer.close(tishi);
                    if (r?.success) {
                        dataA = r?.data?.datas
                        table.render({
                            elem: '#demo',
                            height: 480,
                            // 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?.data?.cols ?? []
                            ],
                            data: r?.data?.datas ?? []
                        });
                        return
                    }
                    alert(r?.message ?? '发生错误了');
                },
                error: function(err){
                    layer.close(tishi);
                }
            });
        }

        function search() {
            if ($('#time1').val() === 0) {
                alert('填选择时间')
                return;
            }
            if (tree.getChecked('Id3').length === 0 &&  tree.getChecked('Id4').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;
            }
            if (searchType === 'AREA' && tree.getChecked('Id1').length === 0) {
                alert('请选择地市')
                return;
            }
            let checkData1 = tree?.getChecked('Id1')?.[0]?.children;
            let quxians = new Set()
            let citys = new Set()
            if (checkData1) {
                checkData1.forEach(eee => {
                    citys.add(eee.title)
                    eee?.children?.forEach(ee => {
                        quxians.add(ee.title)
                    })
                });
            }
            // console.log('0000000', tree.getChecked('Id4')[0]);

            let checkData2 ;
            console.log('3333 ', tree.getChecked('Id3')[0]?.children);
            console.log('4444 ', tree.getChecked('Id4')[0]?.children);
            if(tree.getChecked('Id3')[0]?.children){
                checkData2= tree.getChecked('Id3')[0].children ;
            }
            if(tree.getChecked('Id4')[0]?.children){
                checkData2= tree.getChecked('Id4')[0].children ;
            }
            const indicators = new Set();
            checkData2.forEach(eee => {
                eee.children.forEach(ee => {
                    indicators.add(ee.id)
                })
            });
            let timeType = $('#timeType').val()
            let sdate = $('#time1').val()
            const [startTime, endTime] = sdate.split(' - ')
            renderTable(condition, searchType, table, citys, quxians, indicators, timeType, startTime, endTime)
            return false;
        }

        // 添加指标模板
        function addTemplate() {
            layer.open({
                type: 1,
                title:"添加指标模板",
                content: $("#add-template"),
                area: ['600px', '600px'],
                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
                    }
                    const indicators = new Set()
                    checkedData.forEach(eee => {
                        eee.children.forEach(ee => {
                            indicators.add(ee.id)
                        })
                    });
                    const dataJson = JSON.stringify({
                        "templateName": templateName,
                        "indicators": [...indicators],
                    })
                    $.ajax({
                        type: "POST",
                        contentType: "application/json;charset=UTF-8",
                        url: '/api/addTemplate',
                        data: dataJson,
                        success: function (r) {
                            if (r?.success) {
                                initTreeIndicatorTemplate(tree)
                                layer.msg('添加成功')
                                layer.close(index)
                                return
                            }
                            alert(r?.message ?? '发生错误了');
                        }
                    });
                },
            });
        }

        // 修改指标模板
        var templateId;
        function editTemplate() {
            console.log('xiugai')
            const checkedData = tree?.getChecked('Id3')?.[0]?.children
            console.log('checkedData: ', checkedData);
            if(!checkedData || checkedData.length <= 0){
                alert('请选择要修改的指标模板！')
                return
            }else if(checkedData.length > 1){
                alert('请选择一个要修改的指标模板！')
                return
            }else{
                layer.open({
                type: 1,
                title:"修改指标模板",
                content: $("#add-template"),
                area: ['600px', '600px'],
                btn: ['确定'],
                shadeClose: true,
                success: function(layero, index){
                    console.log(layero, index);
                },
                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
                    }
                    const indicators = new Set()
                    checkedData.forEach(eee => {
                        eee.children.forEach(ee => {
                            indicators.add(ee.id)
                        })
                    });
                    const dataJson = JSON.stringify({
                        "id": templateId,
                        "templateName": templateName,
                        "indicators": [...indicators],
                    })
                    $.ajax({
                        type: "POST",
                        contentType: "application/json;charset=UTF-8",
                        url: '/api/updateTemplate',
                        data: dataJson,
                        success: function (r) {
                            if (r?.success) {
                                initTreeIndicatorTemplate(tree)
                                layer.msg('添加成功')
                                layer.close(index)
                                return
                            }
                            alert(r?.message ?? '发生错误了');
                        }
                    });
                },
            });
            }
        }

        // 删除指标模板
        function deleteTemplate() {
            const checkedData = tree?.getChecked('Id3')?.[0]?.children
            if (!checkedData || checkedData.length <= 0) {
                alert('请选择要删除的指标模板！')
                return
            }
            const ids = new Set()
            checkedData.forEach(t => {
                ids.add(t.id)
            });
            const dataJson = JSON.stringify({
                "ids": [...ids],
            })
            layer.confirm('确认删除？', {icon: 3, title:'删除模板'}, function(index){
                $.ajax({
                    type: "POST",
                    contentType: "application/json;charset=UTF-8",
                    url: '/api/deleteTemplate',
                    // async: false,
                    data: dataJson,
                    success: function (r) {
                        if (r?.success) {
                            initTreeIndicatorTemplate(tree)
                            layer.msg('删除成功')
                            layer.close(index)
                            return
                        }
                        alert(r?.message ?? '发生错误了')
                    }
                });
            });
        }

        // 获取登录用户信息

        // 退出登录
        function logOutFun() {
            $.ajax({
                type: "POST",
                // url: '/api/json/citys.json',
                url: '/api/logout',
                success: function (r) {
                    window.sessionStorage.clear()
                    layer.msg('退出登录成功');
                    setTimeout(() => window.location.href = '/login', 1000)
                }
            });
        }
        // 
        $(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)

        });
        window.onbeforeunload=function(e){
            if (window.sessionStorage.getItem('userName')) {
                logOutFun()
            }
        }
        // window.addEventListener('unload',logOutFun());
    </script>
</body>

</html>