<!--<!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>View</title>-->

<!--    <style>-->
<!--        * {-->
<!--            box-sizing: border-box;-->
<!--        }-->

<!--        .header {-->
<!--            text-align: center;-->
<!--        }-->

<!--        .column {-->
<!--            text-align: center;-->
<!--            float: left;-->
<!--            padding: 10px;-->
<!--        }-->

<!--        /* 左右两侧宽度 */-->
<!--        .column.left {-->
<!--            width: 20%;-->
<!--            /* padding-left: 10% */-->
<!--        }-->

<!--        .column.right {-->
<!--            width: 25%;-->
<!--            /* padding-top: 10%; */-->
<!--            padding-right: 10%;-->
<!--        }-->

<!--        .column.right>button {-->
<!--            margin-top: 25%;-->
<!--        }-->

<!--        /* 中间区域宽度 */-->
<!--        .column.middle {-->
<!--            width: 50%;-->
<!--            text-align: center;-->
<!--        }-->

<!--        .row {-->
<!--            margin-top: 20px;-->
<!--        }-->

<!--        /* 列后面清除浮动 */-->
<!--        .row:after {-->
<!--            content: "";-->
<!--            display: table;-->
<!--            clear: both;-->
<!--        }-->

<!--        .select {-->
<!--            width: 80%;-->
<!--            padding-left: 20%;-->
<!--        }-->

<!--        .test1 {-->
<!--            position: relative;-->
<!--            left: 100px;-->
<!--            text-align: center;-->
<!--            margin: 10px;-->
<!--            padding: 0;-->
<!--            height: 200px;-->
<!--            /* overflow: hidden; */-->
<!--            font-family: inherit;-->
<!--            font-size: 180%;-->
<!--            font-style: inherit;-->
<!--            font-weight: inherit;-->
<!--            /* outline: 0; */-->
<!--            border-color: #eee;-->
<!--            /* line-height: 2; */-->
<!--            /* border-width: 1px; */-->
<!--            border-style: solid;-->
<!--            background-color: #fff;-->
<!--            /* color: rgba(0, 0, 0, .85); */-->
<!--            border-radius: 2px;-->
<!--            display: block;-->
<!--            width: 100%;-->
<!--            /* padding-left: 10px; */-->
<!--            /* padding-right: 30px; */-->
<!--            cursor: pointer;-->
<!--        }-->

<!--        .test2 {-->
<!--            position: relative;-->
<!--            left: 100px;-->
<!--            text-align: center;-->
<!--            margin: 10px;-->
<!--            padding: 0;-->
<!--            height: 200px;-->
<!--            /* overflow: hidden; */-->
<!--            font-family: inherit;-->
<!--            font-size: 180%;-->
<!--            font-style: inherit;-->
<!--            font-weight: inherit;-->
<!--            /* outline: 0; */-->
<!--            border-color: #eee;-->
<!--            /* line-height: 2; */-->
<!--            /* border-width: 1px; */-->
<!--            border-style: solid;-->
<!--            background-color: #fff;-->
<!--            /* color: rgba(0, 0, 0, .85); */-->
<!--            border-radius: 2px;-->
<!--            display: block;-->
<!--            width: 100%;-->
<!--            /* padding-left: 10px; */-->
<!--            /* padding-right: 30px; */-->
<!--            cursor: pointer;-->
<!--        }-->

<!--        .one {-->
<!--            padding-left: 25%;-->
<!--        }-->

<!--        .gis {-->
<!--            padding-left: 20%;-->
<!--        }-->
<!--    </style>-->
<!--    <link rel="stylesheet" href="./js/layui/css/layui.css">-->
<!--</head>-->

<!--<body>-->
<!--<div class="header">-->
<!--    &lt;!&ndash; 页面数据展示 &ndash;&gt;-->
<!--</div>-->
<!--<div class="row">-->
<!--    <div class="one">-->
<!--        <form class="layui-form" action="">-->
<!--            <div class="column" id="guishudi">-->
<!--                <input type="radio" name="where" value="local" title="归属地" lay-filter="where" checked>-->
<!--                <input type="radio" name="where" value="roaming" title="拜访地" lay-filter="where">-->
<!--            </div>-->
<!--            <div class="column">-->
<!--                <select name="timeType" id="timeTpye">-->
<!--                    <option value="">天</option>-->
<!--                    <option value="7">7天</option>-->
<!--                    <option value="30" selected>30天</option>-->
<!--                    <option value="60">60天</option>-->
<!--                </select>-->
<!--            </div>-->
<!--            <div class="column">-->
<!--                日期范围-->
<!--                &lt;!&ndash; <div class="layui-inline" id="test6"> &ndash;&gt;-->
<!--                <div class="layui-input-inline">-->
<!--                    <input type="text" autocomplete="off" id="startDate" class="layui-input" placeholder="开始日期">-->
<!--                </div>-->
<!--                &lt;!&ndash; <div class="layui-form-mid">-</div>- &ndash;&gt;-->
<!--                &lt;!&ndash; <div class="layui-input-inline">-->
<!--                        <input type="text" autocomplete="off" id="endDate" class="layui-input" placeholder="结束日期">-->
<!--                    </div> &ndash;&gt;-->
<!--                &lt;!&ndash; </div> &ndash;&gt;-->
<!--            </div>-->
<!--        </form>-->
<!--        <div class="column">-->
<!--            &lt;!&ndash; <button class="layui-btn" lay-submit lay-filter="search">查询</button> &ndash;&gt;-->
<!--            <button class="layui-btn" onclick="searchGrp()">查询</button>-->
<!--            &lt;!&ndash; <button type="reset" class="layui-btn layui-btn-primary">重置</button> &ndash;&gt;-->
<!--        </div>-->



<!--    </div>-->
<!--</div>-->
<!--<div class="row">-->
<!--    <div class="column left">-->
<!--        &lt;!&ndash; <form class="layui-form" action="">-->
<!--            <div class="select">-->
<!--                <select multiple="multiple" name="city1" class="test">-->
<!--                    <option value=""></option>-->
<!--                    <option value="0">北京</option>-->
<!--                    <option value="1">上海</option>-->
<!--                    <option value="2">广州</option>-->
<!--                    <option value="3">深圳</option>-->
<!--                    <option value="4">杭州</option>-->
<!--                </select>-->
<!--            </div>-->


<!--        </form> &ndash;&gt;-->
<!--        <div class="select">-->
<!--            <select multiple="multiple" name="province" class="test1" id="selectProvince"-->
<!--                    onchange="provinceSelect()">-->
<!--                <option value="0">北京</option>-->
<!--                <option value="1">天津</option>-->
<!--                <option value="2">河北</option>-->
<!--                <option value="3">河南</option>-->

<!--            </select>-->

<!--        </div>-->

<!--        <div class="select">-->
<!--            <select multiple="multiple" name="city" class="test2" id="selectCity">-->
<!--                <option value="0">石家庄</option>-->
<!--                <option value="1">唐山</option>-->
<!--                <option value="2">张家口</option>-->
<!--                <option value="3">保定</option>-->
<!--                <option value="4">秦皇岛</option>-->
<!--                <option value="5">廊坊</option>-->
<!--            </select>-->

<!--        </div>-->


<!--    </div>-->
<!--    <div class="column middle">-->
<!--        <div class="layui-form">-->
<!--            <div class="layui-input-inline" id="cb">-->
<!--                <input type="radio" name="searchType" lay-filter="cb" title="5G终端用户数" value="5G终端用户数" checked>-->
<!--                <input type="radio" name="searchType" lay-filter="cb" title="打开5G开关用户数" value="打开5G开关用户数">-->
<!--                <input type="radio" name="searchType" lay-filter="cb" title="关闭5G开关用户数" value="关闭5G开关用户数">-->
<!--                <input type="radio" name="searchType" lay-filter="cb" title="5G开关打开率" value="5G开关打开率">-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="gis">-->
<!--            <div id="graph" style="width: 600px;height:400px;"></div>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="column right">-->

<!--        <button class="layui-btn export" lay-submit lay-filter="export">导出指标</button>-->
<!--        <br>-->
<!--        <button class="layui-btn export" lay-submit lay-filter="exportAll">导出全量</button>-->
<!--        <br>-->
<!--        <button class="layui-btn export" lay-submit lay-filter="exportClose">导出未开</button>-->

<!--    </div>-->
<!--</div>-->
<!--<script src="./js/jquery-3.5.1.min.js"></script>-->
<!--<script src="./js/layui/layui.js"></script>-->
<!--<script src="./js/echarts.js"></script>-->
<!--<script>-->
<!--        function initGrp() {-->
<!--            console.log('initgrp')-->
<!--            $.ajax({-->
<!--                type: "GET",-->
<!--                // url: './json/et.json',-->
<!--                url: './search',-->
<!--                data: {-->
<!--                    "from":$('#guishudi').find('input:checked').val(),-->
<!--                    "range": $('#startDate').val(),-->
<!--                    // "range": '20210719 - 20210722',-->
<!--                    "stype": $('#cb').find('input:checked').val(),-->
<!--                    "ttype": $('#timeTpye').val(),-->
<!--                    "provinces": '河北',-->
<!--                    "citys": ''-->

<!--                },-->
<!--                success: function (r) {-->

<!--                    console.log(r)-->
<!--                    let o = r instanceof Object-->
<!--                    if (!o) {-->
<!--                        r = JSON.parse(r)-->
<!--                    }-->
<!--                    option.xAxis.data = r.dt;-->
<!--                    option.series[0].data = r.num;-->
<!--                    myChart.setOption(option);-->
<!--                    return false;-->

<!--                }-->

<!--            });-->

<!--        }-->
<!--        function searchGrp() {-->

<!--            let provinceSize = $('#selectProvince').find('option:selected').length;-->
<!--            let cbSize = $("#cb").find('input:checked').length;-->

<!--            if (provinceSize < 1) {-->
<!--                alert('请选择省市')-->
<!--                return;-->
<!--            }-->

<!--            if (cbSize < 1) {-->
<!--                alert('请选择类型')-->
<!--                return;-->
<!--            }-->

<!--            var ps = new Array();-->
<!--            $('#selectProvince').find('option:selected').each(function (i, t) {-->
<!--                ps.push($(t).val());-->
<!--            });-->
<!--            var cs = new Array();-->
<!--            $('#selectCity').find('option:selected').each(function (i, t) {-->
<!--                cs.push($(t).val());-->
<!--            });-->
<!--            let provinces = ps.join(',');-->
<!--            let citys = cs.join(',');-->

<!--            $.ajax({-->
<!--                type: "GET",-->
<!--                // url: './json/et.json',-->
<!--                url: './search',-->
<!--                data: {-->
<!--                    "from":$('#guishudi').find('input:checked').val(),-->
<!--                    "range": $('#startDate').val(),-->
<!--                    "stype": $('#cb').find('input:checked').val(),-->
<!--                    "ttype": $('#timeTpye').val(),-->
<!--                    "provinces": provinces,-->
<!--                    "citys": citys-->

<!--                },-->
<!--                success: function (r) {-->

<!--                    console.log(r)-->
<!--                    let o = r instanceof Object-->
<!--                    if (!o) {-->
<!--                        r = JSON.parse(r)-->
<!--                    }-->
<!--                    option.xAxis.data = r.dt;-->
<!--                    option.series[0].data = r.num;-->
<!--                    myChart.setOption(option);-->
<!--                    return false;-->

<!--                }-->

<!--            });-->

<!--        }-->
<!--        function typeExportClose() {-->
<!--            console.log("exportClose")-->
<!--            this.location.href = "/exportClose?" + "ttype=" + $('#timeTpye').val() + "&range=" + $('#startDate').val()-->
<!--        }-->
<!--        function typeExportAll() {-->
<!--            console.log("exportAll")-->
<!--            this.location.href = "/exportAll?" + "ttype=" + $('#timeTpye').val() + "&range=" + $('#startDate').val()-->

<!--        }-->

<!--        function typeExport(guishu) {-->
<!--            var ps = new Array();-->
<!--            $('#selectProvince').find('option:selected').each(function (i, t) {-->
<!--                ps.push($(t).val());-->
<!--            });-->
<!--            var cs = new Array();-->
<!--            $('#selectCity').find('option:selected').each(function (i, t) {-->
<!--                cs.push($(t).val());-->
<!--            });-->
<!--            let provinces = ps.join(',');-->
<!--            let citys = cs.join(',');-->
<!--            this.location.href = "/typeExport?" + "from=" + guishu + "&provinces="+provinces+"&citys="+citys+"&ttype=" + $('#timeTpye').val() + "&range=" + $('#startDate').val()-->
<!--        }-->

<!--        function provinceSelect() {-->
<!--            console.log("province change")-->
<!--            let selectSice = $('#selectProvince').find('option:selected').length-->
<!--            if (selectSice < 1) {-->
<!--                $('#selectCity').empty();-->
<!--            } else if (selectSice == 1) {-->
<!--                $('#selectCity').removeAttr("disabled"); $('#selectProvince').find-->
<!--                changeProvince($('#guishudi').find('input:checked').val(), $('#selectProvince').find('option:selected')[0].text);-->
<!--            } else {-->
<!--                $('#selectCity').attr("disabled", "disabled");-->
<!--            }-->
<!--        }-->

<!--        function changeProvince(type, province) {-->
<!--            console.log('changeprovince')-->

<!--            $.ajax({-->
<!--                type: "GET",-->
<!--                // url: './json/citys.json',-->
<!--                url: './initCitys',-->
<!--                async: false,-->
<!--                data: {-->
<!--                    "type": type,-->
<!--                    "province": province-->
<!--                },-->
<!--                success: function (data) {-->
<!--                    let o = data instanceof Object-->
<!--                    console.log(o)-->
<!--                    if (!o) {-->
<!--                        data = JSON.parse(data)-->
<!--                    }-->
<!--                    $('#selectCity').empty();-->
<!--                    var html = '';-->
<!--                    $.each(data, function (commentIndex, comment) {-->
<!--                        html += '<option value="' + comment + '">' + comment + '</option>';-->
<!--                        // console.log(commentIndex,comment)-->
<!--                    });-->

<!--                    $('#selectCity').html(html);-->

<!--                }-->
<!--            });-->
<!--        }-->

<!--        function dateFormat(fmt, date, n) {-->
<!--            if (n == undefined || n == '') {-->
<!--                n = 0;-->
<!--            }-->
<!--            let ret;-->
<!--            const opt = {-->
<!--                "Y+": date.getFullYear().toString(), // 年-->
<!--                "m+": (date.getMonth() + 1).toString(), // 月-->
<!--                "d+": (date.getDate() + n).toString(), // 日-->
<!--                "H+": date.getHours().toString(), // 时-->
<!--                "M+": date.getMinutes().toString(), // 分-->
<!--                "S+": date.getSeconds().toString() // 秒-->
<!--                // 有其他格式化字符需求可以继续添加，必须转化成字符串-->
<!--            };-->
<!--            for (let k in opt) {-->
<!--                ret = new RegExp("(" + k + ")").exec(fmt);-->
<!--                if (ret) {-->
<!--                    fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))-->
<!--                };-->
<!--            };-->
<!--            return fmt;-->
<!--        }-->

<!--        // function searct(data) {-->

<!--        // this.location.href="/cmcc/alert/cellAlertDownload"+"?start_time_o="+stime+"&end_time_o="+etime+"&type="+type+"&aType="+aType;-->

<!--        // }-->

<!--        function radioChange(t) {-->

<!--            let type = $('#guishudi').find('input:checked').val();-->
<!--            // let where = $("input[type='radio']:checked").val();-->

<!--            $.ajax({-->
<!--                type: "GET",-->
<!--                // url: './json/' + where + '.json',-->
<!--                url: './initProvince',-->
<!--                async: false,-->
<!--                data: {-->
<!--                    "type": type-->
<!--                },-->
<!--                success: function (data) {-->
<!--                    let o = data instanceof Object-->
<!--                    console.log(o)-->
<!--                    if (!o) {-->
<!--                        data = JSON.parse(data)-->
<!--                    }-->

<!--                    // console.log(pc)-->
<!--                    $('#selectProvince').empty();-->
<!--                    var html = '';-->
<!--                    $.each(data, function (commentIndex, comment) {-->
<!--                        console.log(commentIndex, comment)-->
<!--                        html += '<option value="' + comment + '">' + comment + '</option>';-->
<!--                        // console.log(commentIndex,comment)-->

<!--                    });-->

<!--                    $('#selectProvince').html(html);-->
<!--                    changeProvince($('#guishudi').find('input:checked').val(), $('#selectProvince').find('option')[0].text);-->
<!--                }-->
<!--            });-->
<!--        }-->

<!--        // function preTimeSelect() {-->

<!--        //     $.ajax({-->
<!--        //         type: "GET",-->
<!--        //         url: './json/timeSelect.json',-->
<!--        //         success: function (data) {-->

<!--        //             $('#timeSelect').empty();-->
<!--        //             var html = '';-->
<!--        //             $.each(data, function (commentIndex, comment) {-->
<!--        //                 html += '<option value="' + comment + '">' + comment + '</option>';-->
<!--        //                 // console.log(commentIndex,comment)-->
<!--        //             });-->

<!--        //             $('#timeSelect').html(html);-->
<!--        //             layui.use(['form'], function () {-->
<!--        //                 var form = layui.form;-->

<!--        //                 form.render('select')-->
<!--        //             });-->

<!--        //         }-->
<!--        //     });-->
<!--        // }-->

<!--        // $('input[type=radio][name=where]').change(function () {-->
<!--        //     console.log('change')-->
<!--        //     alert(this.value)-->
<!--        // })-->
<!--    </script>-->

<!--<script>-->
<!--        var myChart = echarts.init(document.getElementById('graph'));-->
<!--        option = {-->
<!--            xAxis: {-->
<!--                type: 'category',-->
<!--                data: ['20210721', '20210722', '20210723', '20210724', '20210725', '20210726', '20210727']-->
<!--            },-->
<!--            yAxis: {-->
<!--                type: 'value'-->
<!--            },-->
<!--            series: [{-->
<!--                data: [150, 230, 224, 218, 135, 147, 260],-->
<!--                type: 'line'-->
<!--            }]-->
<!--        };-->
<!--        // myChart.setOption(option);-->
<!--        layui.use(['layer', 'tree', 'form', 'laydate', 'table'], function () {-->
<!--            var layer = layui.layer,-->
<!--                tree = layui.tree,-->
<!--                form = layui.form,-->
<!--                table = layui.table,-->
<!--                laydate = layui.laydate;-->
<!--            let date = new Date();-->
<!--            let date1 = dateFormat('YYYYmmdd', date, -7);-->
<!--            let date2 = dateFormat('YYYYmmdd', date);-->
<!--            let dateValue = date1 + ' - ' + date2;-->
<!--            // console.log(dateValue)-->
<!--            laydate.render({-->
<!--                elem: '#startDate',-->
<!--                type: 'date',-->
<!--                format: 'yyyyMMdd',-->
<!--                value: dateValue,-->
<!--                isInitValue: true,-->
<!--                range: '-',-->
<!--                // range: ['#startDate', '#endDate']-->
<!--            });-->


<!--            form.render('select')-->
<!--            form.on("radio(cb)", function (data) {-->
<!--                // let stype = $('#cb').find('input:checked').val()-->
<!--                // if (stype == '5G开关打开率') {-->
<!--                //     $('.export').attr("disabled", "disabled");-->
<!--                //     $(".export").addClass("layui-btn-disabled")-->

<!--                // } else {-->
<!--                //     $('.export').removeAttr("disabled");-->
<!--                //     $(".export").removeClass("layui-btn-disabled")-->
<!--                // }-->

<!--            });-->
<!--            //监听提交-->
<!--            form.on("radio(where)", function (data) {-->
<!--                radioChange(data.value);-->

<!--            });-->
<!--            // form.on('submit(search)', function (data) {-->
<!--            //     // console.log(data.field);-->
<!--            //     // let where = data.field.where;-->
<!--            //     // let timeType = data.field.Type;-->
<!--            //     let provinceSize = $('#selectProvince').find('option:selected').length;-->
<!--            //     let cbSize = $("#cb").find('input:checked').length;-->
<!--            //     console.log(cbSize);-->
<!--            //     // console.log(provinceSize)-->
<!--            //     if (provinceSize < 1) {-->
<!--            //         alert('请选择省市')-->
<!--            //         return false;-->
<!--            //     }-->

<!--            //     if (cbSize < 1) {-->
<!--            //         alert('请选择类型')-->
<!--            //         return false;-->
<!--            //     }-->

<!--            //     var ps = new Array();-->
<!--            //     $('#selectProvince').find('option:selected').each(function (i, t) {-->
<!--            //         ps.push($(t).val());-->
<!--            //     });-->
<!--            //     var cs = new Array();-->
<!--            //     $('#selectCity').find('option:selected').each(function (i, t) {-->
<!--            //         cs.push($(t).val());-->
<!--            //     });-->
<!--            //     let provinces = ps.join(',');-->
<!--            //     let citys = cs.join(',');-->

<!--            //     $.ajax({-->
<!--            //         type: "GET",-->
<!--            //         // url: './json/' + where + '.json',-->
<!--            //         url: './typeExport',-->
<!--            //         data: {-->
<!--            //             "range": $('#startDate').val(),-->
<!--            //             "stype": stype,-->
<!--            //             "ttype": $('#timeTpye').val(),-->
<!--            //             "provinces": provinces,-->
<!--            //             "citys": citys-->

<!--            //         },-->
<!--            //         success: function (data) {-->
<!--            //             let o = data instanceof Object-->
<!--            //             if (!o) {-->
<!--            //                 data = JSON.parse(data)-->
<!--            //             }-->
<!--            //             option.data = data.dt;-->
<!--            //             option.series[0].data = date.num;-->
<!--            //             myChart.setOption(option);-->

<!--            //         }-->
<!--            //     });-->
<!--            //     // searchGrp()-->
<!--            //     // layer.msg(JSON.stringify(data));-->
<!--            //     return false;-->
<!--            // });-->


<!--            form.on('submit(export)', function () {-->
<!--                let guishu = $('#guishudi').find('input:checked').val()-->
<!--                typeExport(guishu)-->

<!--            });-->
<!--            form.on('submit(exportAll)', function () {-->
<!--                // let stype=$('#cb').find('input:checked').val()-->
<!--                typeExportAll()-->
<!--            });-->
<!--            form.on('submit(exportClose)', function () {-->
<!--                // let stype=$('#cb').find('input:checked').val()-->
<!--                typeExportClose()-->
<!--            });-->

<!--        });-->
<!--    </script>-->
<!--<script>-->
<!--        $(function () {-->

<!--            radioChange();-->
<!--            changeProvince($('#guishudi').find('input:checked').val(), $('#selectProvince').find('option')[0].text);-->
<!--            initGrp()-->
<!--        })-->
<!--    </script>-->

<!--</body>-->

<!--</html>-->