<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/macarons.js"></script>
<link href="~/Content/Style/admin.css" rel="stylesheet" />
<script type="text/javascript">
    layui.use(['layer', 'form'], function () {
        var form = layui.form;
        var layer = layui.layer;
        $.post('@Url.Action("LYLoad", "Exhibition")', {}, function (result) {
            var resultZu = result.split("&");
            var THZu = resultZu[0].split(",");
            var THTB = $("#div_THNum").html();
            $("#div_THFY").html(THZu[0]);
            $("#div_THNum").html(THZu[1] + THTB);
            var SHZu = resultZu[1].split(",");
            var SHTB = $("#div_SHNum").html();
            $("#div_SHFY").html(SHZu[0]);
            $("#div_SHNum").html(SHZu[1] + SHTB);
            var CTZu = resultZu[2].split(",");
            var CTTB = $("#div_CTNum").html();
            $("#div_CTFY").html(CTZu[0]);
            $("#div_CTNum").html(CTZu[1] + CTTB);
            var QTZu = resultZu[3].split(",");
            var QTTB = $("#div_QTNum").html();
            $("#div_QTFY").html(QTZu[0]);
            $("#div_QTNum").html(QTZu[1] + QTTB);

            var result = JSON.parse(resultZu[4]);
            var SH = [];
            var GN = [];
            var GJ = [];
            var IP = [];
            var QT = [];
            if (result != null) {
                for (i = 0; i < result.length; i++) {
                    if (result[i].SH <= 0) {
                        SH.push("''");
                    }
                    else {
                        SH.push(result[i].SH);
                    }
                    if (result[i].GN <= 0) {
                        GN.push("''");
                    }
                    else {
                        GN.push(result[i].GN);
                    }
                    if (result[i].GJ <= 0) {
                        GJ.push("''");
                    }
                    else {
                        GJ.push(result[i].GJ);
                    }
                    if (result[i].IP <= 0) {
                        IP.push("''");
                    }
                    else {
                        IP.push(result[i].IP);
                    }
                    if (result[i].QT <= 0) {
                        QT.push("''");
                    }
                    else {
                        QT.push(result[i].QT);
                    }
                }
            }
            ZhuChart(SH, GN, GJ, IP, QT);

            result = JSON.parse(resultZu[5]);
            var Data = [];
            var LD = { value: result[0].LD, name: '来电' };
            var QD = { value: result[0].QD, name: '去电' };
            var NX = { value: result[0].NX, name: '内线' };
            Data.push(LD);
            Data.push(QD);
            Data.push(NX);
            YuanChart(Data);
        });
        @*$.post('@Url.Action("LYStatisticalChartLoad", "Exhibition")', {}, function (result) {
            var result = JSON.parse(result);
            var SH = [];
            var GN = [];
            var GJ = [];
            var IP = [];
            var QT = [];
            if (result != null) {
                for (i = 0; i < result.length; i++) {
                    SH.push(result[i].SH);
                    GN.push(result[i].GN);
                    GJ.push(result[i].GJ);
                    IP.push(result[i].IP);
                    QT.push(result[i].QT);
                }
            }
            ZhuChart(SH, GN, GJ, IP, QT);
        });
        $.post('@Url.Action("LYCircularChart", "Exhibition")', {}, function (result) {
            var result = JSON.parse(result);
            var Data = [];
            var LD = { value: result[0].LD, name: '来电' };
            var QD = { value: result[0].QD, name: '去电' };
            var NX = { value: result[0].NX, name: '内线' };
            Data.push(LD);
            Data.push(QD);
            Data.push(NX);
            YuanChart(Data);
        });*@
    });
    function ZhuChart(SH, GN, GJ, IP, QT) {
        var myChart = echarts.init(document.getElementById('div_CylindricalGraph'), 'macarons');
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['市话', '国内长途', '国际长途', 'IP长途', '其它 ']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            series: [
                {
                    name: '市话',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: SH
                },
                {
                    name: '国内长途',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: GN
                },
                {
                    name: '国际长途',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: GJ
                },
                {
                    name: 'IP长途',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: IP
                },
                {
                    name: '其它 ',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: QT
                }
            ]
        };
        myChart.setOption(option);
    }
    function YuanChart(Value) {
        var myChart = echarts.init(document.getElementById('div_PieChart'), 'macarons');
        var option = {
            title: {
                //text: '某站点用户访问来源',
                //subtext: '纯属虚构',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['来电', '去电', '内线']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: Value,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }
</script>
<body>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">
                        通话时长(分钟)
                        <span class="layui-badge layui-bg-blue layuiadmin-badge">月</span>
                    </div>
                    <div class="layui-card-body layuiadmin-card-list">
                        <p class="layuiadmin-big-font" id="div_THFY"></p>
                        <p>
                            通话数量
                            <span class="layuiadmin-span-color" id="div_THNum"><i class="layui-inline layui-icon layui-icon-flag"></i></span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">
                        市话时长(分钟)
                        <span class="layui-badge layui-bg-blue layuiadmin-badge">月</span>
                    </div>
                    <div class="layui-card-body layuiadmin-card-list">
                        <p class="layuiadmin-big-font" id="div_SHFY"></p>
                        <p>
                            通话数量
                            <span class="layuiadmin-span-color" id="div_SHNum"><i class="layui-inline layui-icon layui-icon-flag"></i></span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">
                        长途时长(分钟)
                        <span class="layui-badge layui-bg-blue layuiadmin-badge">月</span>
                    </div>
                    <div class="layui-card-body layuiadmin-card-list">

                        <p class="layuiadmin-big-font" id="div_CTFY"></p>
                        <p>
                            通话数量
                            <span class="layuiadmin-span-color" id="div_CTNum"><i class="layui-inline layui-icon layui-icon-flag"></i></span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">
                        最长话务量分机
                        <span class="layui-badge layui-bg-blue layuiadmin-badge">月</span>
                    </div>
                    <div class="layui-card-body layuiadmin-card-list">

                        <p class="layuiadmin-big-font" id="div_QTFY"></p>
                        <p>
                            通话数量
                            <span class="layuiadmin-span-color" id="div_QTNum"><i class="layui-inline layui-icon layui-icon-flag"></i></span>
                        </p>
                    </div>
                </div>
            </div>

            <div class="layui-col-sm6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        本周通话情况
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row">
                            <div class="layui-col-sm12" id="div_CylindricalGraph" style="height:320px;">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        本月通话情况
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row">
                            <div class="layui-col-sm12" id="div_PieChart" style="height:320px;">

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

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