<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("GJDXLoad", "Exhibition")', {}, function (result) {
            var resultZu = result.split("&");
            var THZu = resultZu[0].split(",");
            $("#div_THFY").html(THZu[0]);
            var SHZu = resultZu[1].split(",");
            $("#div_SHFY").html(SHZu[0]);
            var CTZu = resultZu[2].split(",");
            $("#div_CTFY").html(CTZu[0]);
            var QTZu = resultZu[3].split(",");
            $("#div_QTFY").html(QTZu[0]);

            var result = JSON.parse(resultZu[4]);
            var Data = [];
            var LD = { value: result[0].LD, name: 'Incoming SMS' };
            var QD = { value: result[0].QD, name: 'Outgoing SMS' };
            var LDW = { value: result[0].LDW, name: 'Missed SMS' };
            Data.push(LD);
            Data.push(QD);
            Data.push(LDW);
            YuanChart(Data);

            var result = JSON.parse(resultZu[5]);
            var LD = [];
            var QD = [];
            var LDW = [];
            if (result != null) {
                for (i = 0; i < result.length; i++) {
                    if (result[i].LD <= 0) {
                        LD.push("''");
                    }
                    else {
                        LD.push(result[i].LD);
                    }
                    if (result[i].QD <= 0) {
                        QD.push("''");
                    }
                    else {
                        QD.push(result[i].QD);
                    }
                    if (result[i].LDW <= 0) {
                        LDW.push("''");
                    }
                    else {
                        LDW.push(result[i].LDW);
                    }
                }
            }
            ZhuChart(LD, QD, LDW);
        });
        @*$.post('@Url.Action("GJDXStatisticalChartLoad", "Exhibition")', {}, function (result) {
            var result = JSON.parse(result);
            var LD = [];
            var QD = [];
            var LDW = [];
            if (result != null) {
                for (i = 0; i < result.length; i++) {
                    LD.push(result[i].LD);
                    QD.push(result[i].QD);
                    LDW.push(result[i].LDW);
                }
            }
            ZhuChart(LD, QD, LDW);
        });
        $.post('@Url.Action("GJDXCircularChart", "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 LDW = { value: result[0].LDW, name: '来电未接短信' };
            Data.push(LD);
            Data.push(QD);
            Data.push(LDW);
            YuanChart(Data);
        });*@
    });
    function ZhuChart(LD, QD, LDW) {
        var myChart = echarts.init(document.getElementById('div_CylindricalGraph'), 'macarons');
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['Incoming SMS', 'Outgoing SMS', 'Missed SMS']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
            },
            series: [
                {
                    name: 'Incoming SMS',
                    type: 'bar',
                    stack: 'Total',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: LD
                },
                {
                    name: 'Outgoing SMS',
                    type: 'bar',
                    stack: 'Total',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: QD
                },
                {
                    name: 'Missed SMS',
                    type: 'bar',
                    stack: 'Total',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: LDW
                }
            ]
        };
        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: ['Incoming SMS', 'Outgoing SMS', 'Missed SMS']
            },
            series: [
                {
                    name: 'Visit source',
                    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">
                        Incoming SMS(count)
                        <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">
                        Outgoing SMS(count)
                        <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">
                        Missed SMS(count)
                        <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">
                        SMS Gateway Remaining Amount
                    </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">
                        Delivery this week
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row">
                            <div class="layui-col-sm12" id="div_CylindricalGraph" style="height:300px;">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        Delivery status this month
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row">
                            <div class="layui-col-sm12" id="div_PieChart" style="height:300px;">

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