
@{
    Layout = null;
}
@using ReportWeb_MVC.Models;
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>EmployeeCallLongCountForm</title>
    <script src="~/Content/layui/layui.js"></script>
    <link href="~/Content/layui/css/layui.css" rel="stylesheet" />
    <script src="~/Content/jquery-1.8.3.js"></script>
    <script src="~/Content/echarts.min.js"></script>
    <script src="~/Content/Common.js"></script>
    <link href="~/Content/Common.css" rel="stylesheet" />
    <script src="~/Content/zTree_v3/js/jquery.ztree.core.js"></script>
    <script src="~/Content/zTree_v3/js/jquery.ztree.excheck.js"></script>
    <script src="~/Content/zTree_v3/js/jquery.ztree.exedit.js"></script>
    <link href="~/Content/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <script type="text/javascript">
        var jsondata;
        layui.use(['layer', 'form', 'table', 'laydate'], function () {
            var laydate = layui.laydate;
            var form = layui.form;
            var layer = layui.layer;
            var table = layui.table;
            var bodyWidth = $(document.body).width();
            laydate.render({
                elem: '#test1'
            });
            laydate.render({
                elem: '#test2'
            });
            SelectValue("今天", "txt_StaData", "txt_EndData");
            form.on('select(test)', function (data) {
                SelectValue(data.value, "txt_StaData", "txt_EndData");
                if (data.value == "自定义") {
                    $("input[name='txt_StaData']").css("pointer-events", "auto");
                    $("input[name='txt_StaData']").css("opacity", "1");
                    $("input[name='txt_EndData']").css("pointer-events", "auto");
                    $("input[name='txt_EndData']").css("opacity", "1");
                } else {
                    $("input[name='txt_StaData']").css("pointer-events", "none");
                    $("input[name='txt_StaData']").css("opacity", "0.5");
                    $("input[name='txt_EndData']").css("pointer-events", "none");
                    $("input[name='txt_EndData']").css("opacity", "0.5");
                }
            });
            var type1 = $("select[name='sel_Data']").val();
            var startData1 = $("#test1").val();
            var endData1 = $("#test2").val();
            var tableIns = table.render({
                ID: 'tablet',
                where: {
                    Type: type1,
                    StartDta: startData1,
                    EndData: endData1,
                    TypeWhere: "0"
                },
                elem: '#LAY-app-content-comm',
                height: 'full-100',
                cellMinWidth: '60',
                width: (bodyWidth - 80).toString(),
                url: '/Statistics/LoadDataLong',
                even: true,
                toolbar: '#toolbarDemo',
                defaultToolbar: [{
                    title: 'Export a single file' //标题
                    , layEvent: 'lyexport' //事件名，用于 toolbar 事件中使用
                    , icon: 'layui-icon-download-circle' //图标类名
                }, {
                    title: 'Single file split by department and multiple labels' //标题
                    , layEvent: 'odexport' //事件名，用于 toolbar 事件中使用
                    , icon: 'layui-icon-download-circle' //图标类名
                }, {
                    title: 'Multiple files split by department' //标题
                    , layEvent: 'mdexport' //事件名，用于 toolbar 事件中使用
                    , icon: 'layui-icon-download-circle' //图标类名
                }, {
                    title: 'Print' //标题
                    , layEvent: 'lyprint' //事件名，用于 toolbar 事件中使用
                    , icon: 'layui-icon-form' //图标类名
                }],
                title: 'Staff call duration',
                loading: true,
                text: { none: 'No relevant data' },
                //totalRow: true,
                cols: [[
                    { type: 'numbers', title: 'Number', width: 70, align: 'center' },
                    { field: 'EmployeeName', title: 'Staff Name', width: 130, align: 'center' },
                    { field: 'ExtensionNum', title: 'Extension Num', width: 130, align: 'center' },
                    { field: 'DepartmentName', title: 'Department Name', width: 150, align: 'center' },
                    { field: 'TotalDurationF', title: 'Total', width: 100, align: 'center', sort: true, event: 'ev_TotalCount', style: 'cursor: pointer; color:blue;' },
                    { field: 'LocalDurationF', title: 'Local', width: 100, align: 'center', sort: true, event: 'ev_LocalCount', style: 'cursor: pointer; color:blue;' },
                    { field: 'InternalDurationF', title: 'DDD', width: 100, align: 'center', sort: true, event: 'ev_InternalCount', style: 'cursor: pointer; color:blue;' },
                    { field: 'HMTDurationF', title: 'HK&TW&Macao', width: 160, align: 'center', sort: true, event: 'ev_HMTCount', style: 'cursor: pointer; color:blue;' },
                    { field: 'InternationalDurationF', title: 'IDD', width: 100, align: 'center', sort: true, event: 'ev_InternationalCount', style: 'cursor: pointer; color:blue;' },
                    { field: 'IPDurationF', title: 'IP long distance', width: 160, align: 'center', sort: true, event: 'ev_IPCount', style: 'cursor: pointer; color:blue;' },
                    { field: 'LocalVoiceDurationF', title: 'Local sound station', width: 180, align: 'center', sort: true, event: 'ev_LocalVoiceCount', style: 'cursor: pointer; color:blue;' },
                    { field: 'LocalInternetDurationF', title: 'Local dial-up Internet', width: 200, align: 'center', sort: true, event: 'ev_LocalInternetCount', style: 'cursor: pointer; color:blue;' },
                    { field: 'Duration400800F', title: 'Local 400/800', width: 150, align: 'center', sort: true, event: 'ev_Count400800', style: 'cursor: pointer; color:blue;' },
                    { field: 'OtherDurationF', title: 'Other', width: 100, align: 'center', sort: true, event: 'ev_OtherCount', style: 'cursor: pointer; color:blue;' },
                    { field: 'InsideDurationF', title: 'Inside', width: 100, align: 'center', sort: true, event: 'ev_InsideCount', style: 'cursor: pointer; color:blue;' }
                ]],
                done: function (res) {
                    jsondata = res.data;
                }
            });
            //查询v
            $("#btn_Query").click(function () {
                var type = $("select[name='sel_Data']").val();
                var startData = $("#test1").val();
                var endData = $("#test2").val();
                var content = $("#txt_Content").val();
                var departmentName = $("input[name='txt_DepartmentID']").val();
                var callDirection = $("select[name='sel_CallDirection']").val();
                tableIns.reload({
                    url: '/Statistics/LoadDataLong',
                    where: {
                        Type: type,
                        StartDta: startData,
                        EndData: endData,
                        DepartmentName: departmentName,
                        CallDirection: callDirection,
                        Content: content,
                        TypeWhere: "1"
                    },
                    done: function (res) {
                        jsondata = res.data;
                    }
                });
            });
            table.on('toolbar(table_filter)', function (obj) {
                var event = obj.event;
                if (event == 'lyprint') {
                    var startData = $("#test1").val();
                    var endData = $("#test2").val();
                    var bdhtml = $("#divTable").html();
                    var sprnstr = "<!--startprint-->"; //开始打印标识字符串有17个字符
                    var eprnstr = "<!--endprint-->"; //结束打印标识字符串
                    var prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17); //从开始打印标识之后的内容
                    prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容
                    // 生成并打印ifrme
                    var iframe = document.getElementById("iframe1");
                    var iwindow = iframe.contentWindow;//获取iframe的window对象
                    iwindow.document.body.innerText = "";//先清空iframe原先的内容
                    var headstr = "<html><head><title>" + "Start Date：" + startData + "---End Date：" + endData + "</title></head><body>";
                    var stylestr = "<style>table{border-collapse: collapse;}table tr{height: 40px; line-height: 20px; }table tr td{border: solid 1px;}table tr th {border: solid 1px;}</style>";
                    var footstr = "</body></html>";
                    iwindow.document.title = "Start Date：" + startData + "---End Date：" + endData;
                    iwindow.document.write(headstr + stylestr + prnhtml + footstr);
                    //var hkey_path;
                    //hkey_path = "HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
                    //try {
                    //    var RegWsh = new ActiveXObject("WScript.Shell");
                    //    RegWsh.RegWrite(hkey_path + "footer", "");
                    //} catch (e) {
                    //}
                    iwindow.print(); //调用浏览器的打印功能打印指定区域
                }
                else if (event == "lyexport") {//导出单一文件
                    var index = layer.load(1);
                    $.post("/Statistics/export_Method", { eMethod: "ECallLong", eType: "1" }, function (result) {
                        var Rst = result;
                        if (Rst != "-1") {
                            $("input[name='txtPath']").val(Rst);
                            $("input[name='txtName']").val("Staff call duration");
                            $("#inp_Submit").click();
                            layer.close(index);
                        }
                        else {
                            layer.close(index);
                            layer.alert("No exported files");
                        }
                    });
                }
                else if (event == "odexport") {//单一文件按部门多标签拆分
                    var index = layer.load(1);
                    $.post("/Statistics/export_Method", { eMethod: "ECallLong", eType: "2" }, function (result) {
                        var Rst = result;
                        if (Rst != "-1") {
                            $("input[name='txtPath']").val(Rst);
                            $("input[name='txtName']").val("Staff call duration");
                            $("#inp_Submit").click();
                            layer.close(index);
                        }
                        else {
                            layer.close(index);
                            layer.alert("No exported files");
                        }
                    });
                }
                else if (event == "mdexport") {//多个文件按部门拆分
                    var index = layer.load(1);
                    $.post("/Statistics/export_Method", { eMethod: "ECallLong", eType: "3" }, function (result) {
                        var Rst = result;
                        if (Rst != "-1") {
                            $("input[name='txtPath']").val(Rst);
                            $("input[name='txtName']").val("Staff call duration");
                            $("#inp_Submit").click();
                            layer.close(index);
                        }
                        else {
                            layer.close(index);
                            layer.alert("No exported files");
                        }
                    });
                }
            });
            //监听单元格事件
            table.on('tool(table_filter)', function (obj) {
                var data = obj.data;
                var event = obj.event;
                var type = $("select[name='sel_Data']").val();
                var Where = "";
                if (type != "全部") {
                    var startData = $("#test1").val();
                    var endData = $("#test2").val();
                    Where = " and CallDate >='" + startData + " 00:00:00' and CallDate<='" + endData + " 23:59:59'";
                }
                if (data.EmployeeName != "Total") {
                    Where += " and ExtensionNum='" + data.ExtensionNum + "' and EmployeeName='" + data.EmployeeName + "' and DepartmentName='" + data.DepartmentName + "'";
                    //小计
                    if (event == "ev_TotalCount") {

                    }//市话
                    else if (event == "ev_LocalCount") {
                        Where += " and TelephoneTrafficType=0";
                    }//国内长途
                    else if (event == "ev_InternalCount") {
                        Where += " and TelephoneTrafficType=1";
                    }//港澳台长途
                    else if (event == "ev_HMTCount") {
                        Where += " and TelephoneTrafficType=2";
                    }//国际长途
                    else if (event == "ev_InternationalCount") {
                        Where += " and TelephoneTrafficType=3";
                    }//IP长途
                    else if (event == "ev_IPCount") {
                        Where += " and TelephoneTrafficType=4";
                    }//本地声讯台
                    else if (event == "ev_LocalVoiceCount") {
                        Where += " and TelephoneTrafficType=5";
                    }//本地拨号上网
                    else if (event == "ev_LocalInternetCount") {
                        Where += " and TelephoneTrafficType=6";
                    }//本地400/800
                    else if (event == "ev_Count400800") {
                        Where += " and TelephoneTrafficType=9";
                    }//其它
                    else if (event == "ev_OtherCount") {
                        Where += " and TelephoneTrafficType=7";
                    }//内线
                    else if (event == "ev_InsideCount") {
                        Where += " and TelephoneTrafficType=8";
                    }
                } else {
                    var departmentName = $("input[name='txt_DepartmentName']").val();
                    var departmentID = $("input[name='txt_DepartmentID']").val();
                    if (departmentName != 'Department Info' && departmentName != "") {
                        Where += " and DepartmentID='" + departmentID + "'";
                    }
                    var content = $("#txt_Content").val();
                    if (content.length > 0) {
                        Where += " and (ExtensionNum like '％" + content + "％' OR EmployeeName like '％" + content + "％')";
                    }
                    //小计
                    if (event == "ev_TotalCount") {

                    }//市话
                    else if (event == "ev_LocalCount") {
                        Where += " and TelephoneTrafficType=0";
                    }//国内长途
                    else if (event == "ev_InternalCount") {
                        Where += " and TelephoneTrafficType=1";
                    }//港澳台长途
                    else if (event == "ev_HMTCount") {
                        Where += " and TelephoneTrafficType=2";
                    }//国际长途
                    else if (event == "ev_InternationalCount") {
                        Where += " and TelephoneTrafficType=3";
                    }//IP长途
                    else if (event == "ev_IPCount") {
                        Where += " and TelephoneTrafficType=4";
                    }//本地声讯台
                    else if (event == "ev_LocalVoiceCount") {
                        Where += " and TelephoneTrafficType=5";
                    }//本地拨号上网
                    else if (event == "ev_LocalInternetCount") {
                        Where += " and TelephoneTrafficType=6";
                    }//本地400/800
                    else if (event == "ev_Count400800") {
                        Where += " and TelephoneTrafficType=9";
                    }//其它
                    else if (event == "ev_OtherCount") {
                        Where += " and TelephoneTrafficType=7";
                    }//内线
                    else if (event == "ev_InsideCount") {
                        Where += " and TelephoneTrafficType=8";
                    }
                }
                var callDirection = $("select[name='sel_CallDirection']").val();
                if (callDirection != "全部") {
                    Where += " and CallDirection='" + callDirection + "'";
                }
                if (Where != "") {
                    if (Where.substring(1, 4) == "and") {
                        Where = Where.substring(5, Where.length);
                    }
                }
                layer.open({
                    type: 2,
                    title: 'Call Records',
                    shade: 0.8,
                    area: ['95%', '95%'],
                    content: '/HomeTemporary/RecordReportTemporaryOne?Where=' + Where, //iframe的url
                    end: function () {
                        //$.post("/Statistics/ClearTempData", {}, function () {

                        //});
                    }
                });
            });
            // 基于准备好的dom，初始化echarts实例
            $("#btn_StatisticalChart").click(function () {
                var Typet = $("select[name='sel_aa']").val();
                var radio
                var NameZu = [];
                var ZhiZu = [];
                for (var i = 0; i < jsondata.length; i++) {
                    NameZu.push(jsondata[i].EmployeeName);
                    ZhiZu.push(jsondata[i].TotalCount);
                }
                layer.open({
                    title: 'Staff call duration',
                    type: 1,
                    kin: 'layui-layer-rim', //加上边框
                    area: ['90%', '90%'], //宽高
                    content: $('#StatisticalChart')
                });
                var Typet = $("select[name='sel_aa']").val();
                var radioValue = $('input:radio[name="tu"]:checked').val();
                Schart(jsondata, Typet, radioValue);
            });
            form.on('select(lay_Type)', function () {
                var Typet = $("select[name='sel_aa']").val();
                var radioValue = $('input:radio[name="tu"]:checked').val();
                Schart(jsondata, Typet, radioValue);
            });
            form.on('radio(tongji)', function (data) {
                var Typet = $("select[name='sel_aa']").val();
                var radioValue = $('input:radio[name="tu"]:checked').val();
                Schart(jsondata, Typet, radioValue);
            });

            var setting = {
                data: {
                    simpleData: {
                        enable: true,          //true 、 false 分别表示 使用 、 不使用 简单数据模式
                        idKey: "DepartmentID",           //节点数据中保存唯一标识的属性名称
                        pIdKey: "ParentDepartmentID",    //节点数据中保存其父节点唯一标识的属性名称
                        rootPId: -1            //用于修正根节点父节点数据，即 pIdKey 指定的属性值
                    },
                    key: {
                        name: "DepartmentName",
                    }
                },
                //check:{
                //    enable:true,              //true 、 false 分别表示 显示 、不显示 复选框或单选框
                //    nocheckInherit:true       //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true
                //},
                view: {
                    showLine: true,  //是否显示节点间的连线
                    selectedMulti: false,
                    expandSpeed: "slow"
                },
                callback: {
                    onClick: zTreeOnClick,
                }
            };

            var LeftValue;
            function zTreeOnClick(event, treeId, treeNode) {
                LeftValue = treeNode;
            }

            $("#txt_DepartmentName").click(function () {
                layer.open({
                    title: 'Department Info',
                    type: 1,
                    //加上边框
                    area: ['330px', '520px'], //宽高
                    content: $('#div_Department'),//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    success: function (layero, index) {
                        $.post("/Home/DepartmentalLoad", function (result) {
                            var zTreeObj = $.fn.zTree.init($("#div_Ztree"), setting, JSON.parse(result).data);
                            zTreeObj.expandAll(false);
                        });
                    }
                });
            });

            //保存
            $("#btn_Save_D").click(function () {
                if (LeftValue == null) {
                    layer.msg('Please select a department',);
                    return false
                }
                $("#txt_DepartmentName").val(LeftValue.DepartmentName);
                $("#txt_DepartmentID").val(LeftValue.DepartmentID);
                layui.layer.close(layer.index);
                LeftValue = null;
            });
        });
        //统计图
        function Schart(jsondata, Typet, radioValue) {
            //$("#main").html("");
            var NameZu = [];
            var ZhiZu = [];
            var NameZhiZu = [];
            if (Typet == "Total") {
                var obj = SchartData(jsondata, 'TotalDuration');
                NameZu = obj.a1;
                ZhiZu = obj.a2;
                NameZhiZu = obj.a3;
            } else if (Typet == "Local") {
                var obj = SchartData(jsondata, 'LocalDuration');
                NameZu = obj.a1;
                ZhiZu = obj.a2;
                NameZhiZu = obj.a3;
            } else if (Typet == "DDD") {
                var obj = SchartData(jsondata, 'InternalDuration');
                NameZu = obj.a1;
                ZhiZu = obj.a2;
                NameZhiZu = obj.a3;
            } else if (Typet == "HK&TW&Macao") {
                var obj = SchartData(jsondata, 'HMTDuration');
                NameZu = obj.a1;
                ZhiZu = obj.a2;
                NameZhiZu = obj.a3;
            } else if (Typet == "IDD") {
                var obj = SchartData(jsondata, 'InternationalDuration');
                NameZu = obj.a1;
                ZhiZu = obj.a2;
                NameZhiZu = obj.a3;
            } else if (Typet == "IP long distance") {
                var obj = SchartData(jsondata, 'IPDuration');
                NameZu = obj.a1;
                ZhiZu = obj.a2;
                NameZhiZu = obj.a3;
            } else if (Typet == "Local sound station") {
                var obj = SchartData(jsondata, 'LocalVoiceDuration');
                NameZu = obj.a1;
                ZhiZu = obj.a2;
                NameZhiZu = obj.a3;
            } else if (Typet == "Local dial-up Internet") {
                var obj = SchartData(jsondata, 'LocalInternetDuration');
                NameZu = obj.a1;
                ZhiZu = obj.a2;
                NameZhiZu = obj.a3;
            } else if (Typet == "Other") {
                var obj = SchartData(jsondata, 'OtherDuration');
                NameZu = obj.a1;
                ZhiZu = obj.a2;
                NameZhiZu = obj.a3;
            } else if (Typet == "Inside") {
                var obj = SchartData(jsondata, 'InsideDuration');
                NameZu = obj.a1;
                ZhiZu = obj.a2;
                NameZhiZu = obj.a3;
            } else if (Typet == "Local 400/800") {
                var obj = SchartData(jsondata, 'Duration400800');
                NameZu = obj.a1;
                ZhiZu = obj.a2;
                NameZhiZu = obj.a3;
            }
            //统计图
            if (radioValue == "柱状图") {
                var myChart = echarts.init(document.getElementById('main'));
                $("#main").css("display", "block");
                $("#mainYuan").css("display", "none");
                // 指定图表的配置项和数据
                var option = {
                    tooltip: {
                        //trigger: 'axis',
                        //axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        //    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        //}
                    },
                    legend: {
                        data: [Typet]
                    },
                    grid: {
                        left: '3%',
                        right: '3%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        data: NameZu
                        , axisTick: {
                            alignWithLabel: true
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: Typet,
                        type: 'bar',
                        barWidth: '50%',
                        data: ZhiZu
                    }]
                };
                myChart.setOption(option);
            }
            else if (radioValue == "饼状图") {
                var myChart = echarts.init(document.getElementById('mainYuan'));
                $("#mainYuan").css("display", "block");
                $("#main").css("display", "none");
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    //选项样式
                    legend: {
                        type: 'scroll',//分页
                        orient: 'vertical',//排列格式。横或竖。
                        //x: 'left',//排列位置。左 居中 右
                        right: 10,//距离
                        top: 20,
                        bottom: 10,
                        data: NameZu //名称
                    },
                    series: [
                        {
                            name: Typet,
                            type: 'pie',
                            radius: ['100%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: NameZhiZu
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        }
        //统计图数据。
        function SchartData(jsondata, Name) {
            var NameZu = [];
            var ZhiZu = [];
            var NameZhiZu = [];
            for (var i = 0; i < jsondata.length; i++) {
                if (jsondata[i].EmployeeName != "Total") {
                    NameZu.push(jsondata[i].EmployeeName);
                    ZhiZu.push(jsondata[i][Name]);
                    var NameZhi = { value: jsondata[i][Name], name: jsondata[i].EmployeeName };
                    NameZhiZu.push(NameZhi);
                }
            }
            return { a1: NameZu, a2: ZhiZu, a3: NameZhiZu };
        }
    </script>
</head>
<body>
    <div class="_TianChong_top"></div>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <form action="/Statistics/excelDownLoad" method="post" style="display:none;">
                <input type="text" name="txtPath" value="" />
                <input type="text" name="txtName" value="" />
                <input type="submit" id="inp_Submit" />
            </form>
            <div id="StatisticalChart" class="layui-form" style="width: 1000px;height:400px; display:none;">
                <div class="layui-inline" style="width:960px; height:60px;">
                    <div class="layui-inline" style="float:left;">
                        <div class="layui-input-block" style="margin-left:40px;">
                            <input type="radio" name="tu" value="柱状图" title="Histogram" checked="" lay-filter="tongji">
                            <input type="radio" name="tu" value="饼状图" title="Pie Chart" lay-filter="tongji">
                        </div>
                    </div>
                    <div class="layui-inline" style="float:right;">
                        <label class="layui-form-label" style="margin-top:2px;padding-right:5px;padding-left:0px;">Data Type</label>
                        <div class="layui-input-inline" style="width:100px;">
                            <select name="sel_aa" lay-filter="lay_Type">
                                <option value="Total" selected="">Total</option>
                                <option value="Local">Local</option>
                                <option value="DDD">DDD</option>
                                <option value="HK&TW&Macao">HK&TW&Macao</option>
                                <option value="IDD">IDD</option>
                                <option value="IP long distance">IP long distance</option>
                                <option value="Local sound station">Local sound station</option>
                                <option value="Local dial-up Internet">Local dial-up Internet</option>
                                <option value="Local 400/800">Local 400/800</option>
                                <option value="Other">Other</option>
                                <option value="Inside">Inside</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="_TianChong"></div>
                <div class="layui-inline" style="width: 960px;height:320px;">
                    <div class="layui-inline">
                        <div id="main" style="width: 960px;height:320px;">

                        </div>
                        <div id="mainYuan" style="width: 960px;height:320px; display:none;">

                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form" id="div_Department" style="display:none;">
                <div class="layui-input-block" style="margin:0px;padding:0px;">
                    <div class="_TianChong"></div>
                    <div class="layui-inline">
                        <div id="div_Ztree" class="ztree"></div>
                    </div>
                    <div class="_TianChong"></div>
                    <div class="layui-btn-container" style="margin-left:3px;width:95%;">
                        <button class="layui-btn layui-btn-fluid" id="btn_Save_D">Save</button>
                    </div>
                </div>
            </div>

            <div class="layui-form">
                <div class="layui-form-item" style="width:99%;">
                    <div class="layui-inline" style="width:100%;">
                        <div class="layui-form-item" style="width:100%;">
                            <div class="layui-inline" style="margin-top:3px; float:left; margin-left:15px;">
                                <div class="layui-input-inline" style="width:60px; margin: 0px;margin-right: 8px;">
                                    <button class="layui-btn" id="btn_StatisticalChart" style="margin-bottom:3px;">Statistical Chart</button>
                                </div>
                            </div>
                            <div class="layui-inline" style="margin-top:3px;float:right; margin-right:30px;">
                                <label class="layui-form-label" style="margin-top:2px;padding-right:5px;padding-left:0px;width:120px;">Statistical Date</label>
                                <div class="layui-input-inline" style="width:80px;margin: 0px;margin-right: 5px;">
                                    <select name="sel_Data" lay-filter="test">
                                        <option value="全部">All</option>
                                        <option value="今天" selected="">Today</option>
                                        <option value="昨天">Yesterday</option>
                                        <option value="本周">This week</option>
                                        <option value="上周">Last week</option>
                                        <option value="本月">This month</option>
                                        <option value="上月">Last month</option>
                                        <option value="自定义">Customize</option>
                                    </select>
                                </div>
                                <div class="layui-input-inline" style="width:90px; margin: 0px;margin-right: 5px;">
                                    <input type="text" name="txt_StaData" class="layui-input txt_data" id="test1" placeholder="yyyy-MM-dd">
                                </div>

                                <div class="layui-input-inline" style="width:90px;margin: 0px;margin-right: 5px;">
                                    <input type="text" name="txt_EndData" class="layui-input txt_data" id="test2" placeholder="yyyy-MM-dd">
                                </div>
                                <label class="layui-form-label" style="margin-top:2px; width:120px; padding-left:0px; padding-right:5px;">Department Name</label>
                                <div class="layui-input-inline" style="width:150px; margin: 0px;margin-right: 5px;">
                                    <input type="text" class="layui-input" id="txt_DepartmentName" name="txt_DepartmentName" style="cursor:pointer;">
                                    <input type="text" class="layui-input" id="txt_DepartmentID" name="txt_DepartmentID" style="display:none;">
                                </div>
                                <label class="layui-form-label" style="margin-top:2px; width:60px; padding-left:0px; padding-right:5px;">Call Direction</label>
                                <div class="layui-input-inline" style="width:80px;margin: 0px;margin-right: 5px;">
                                    <div class="layui-input-inline" style="width:80px;margin: 0px;margin-right: 5px;">
                                        <select name="sel_CallDirection" lay-filter="Sel_CallDirection">
                                            <option value="全部" selected="">All</option>
                                            <option value="1">Outgoing</option>
                                            <option value="0">Incoming</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-input-inline" style="width:200px; margin: 0px;margin-right: 5px;">
                                    <input type="text" class="layui-input" placeholder="Please enter search criteria" id="txt_Content">
                                </div>
                                <div class="layui-input-inline" style="width:60px; margin: 0px;margin-right: 0px;">
                                    <button class="layui-btn" id="btn_Query" style="margin-bottom:3px;">Query</button>
                                </div>
                            </div>
                        </div>
                        <div id="divTable" class="layui-card-body" style="margin-top:-30px;">
                            <!--startprint-->
                            <table id="LAY-app-content-comm" lay-filter="table_filter"></table>
                            <!--endprint-->
                            <script type="text/html" id="table-content-com">
                                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="Approval"><i class="layui-icon layui-icon-edit"></i></a>
                            </script>
                            <div class="layui-inline">
                                <script type="text/html" id="toolbarDemo">
                                    <div class="layui-btn-container">
                                    </div>
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <iframe id="iframe1" style="display:none;"></iframe>
</body>
</html>
