@page "/Home/Main"
@model HomeModel
@{
    ViewData["Title"] = "首页";
}
<div class="">
    <div class="layui-row layui-col-space15">
        @if (Model.Baseuser.AccountType == AccountType.platform)
        {
            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">
                        今日注册
                    </div>
                    <div class="layui-card-body layuiadmin-card-list">
                        <p class="layuiadmin-big-font">@Model.TotalData.TodayRegCnt</p>
                        <p>
                            累计注册用户数
                            <span class="layuiadmin-span-color">@(Model.TotalData.TotalRegCnt)人</span>
                        </p>
                    </div>
                </div>
            </div>
        }
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    今日称重
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">@Model.TotalData.TodayResultCnt</p>
                    <p>
                        累计称重次数
                        <span class="layuiadmin-span-color">@(Model.TotalData.TotalResultCnt)次</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-green layuiadmin-badge">年</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">

                    <p class="layuiadmin-big-font">999,666</p>
                    <p>
                        总收入
                        <span class="layuiadmin-span-color">*** <i class="layui-inline layui-icon layui-icon-dollar"></i></span>
                    </p>
                </div>
            </div>
        </div>*@
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    今日活跃
                </div>
                <div class="layui-card-body layuiadmin-card-list">

                    <p class="layuiadmin-big-font">@Model.TotalData.TodayDevCnt</p>
                    <p>
                        总共设备数
                        <span class="layuiadmin-span-color">@(Model.TotalData.TotalDevCnt)台</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-row layui-col-space15">
    <div class="layui-col-sm12 layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header layuiadmin-card-header-auto">
                <h3>测量次数</h3>
            </div>
            <div class="layui-card-body layui-form">
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" value="@Model.time" va class="layui-input" placeholder="请选择时间" id="time" />
                    </div>
                    <div class="layui-inline">
                        <button class="btn btn-primary btn-lg  js-search" type="button">查询</button>
                    </div>
                </div>
                <div id="EchartZhu" style="width: 100vw;height: 400px;"> </div>
            </div>
        </div>
    </div>
</div>
@section Scripts
{
    <script type="text/javascript">
        layui.config({
            base: "/js/echarts/",
            version: 1
        })
            .use(['common', 'echarts','laydate'], function () {
                var common = layui.common, echarts = layui.echarts,laydate=layui.laydate;
                var _main = {
                    chartZhu: {},
                    init: function () {
                        laydate.render({
                            elem: "#time",
                            range: '~',
                            calendar: true,
                            min: '@Model.mintime',
                            max:'@Model.maxtime'
                        });
                        this.getjson();
                    },
                    getjson: function () {
                        var that = this;
                        common.ajax({
                            url: "/js/echarts/ybhdmob.json",
                            success: function (data) {
                                echarts.registerTheme('ybhdmob', data);
                                that.chartZhu = echarts.init(document.getElementById('EchartZhu'), 'ybhdmob');
                                that.search();
                            }
                        });
                    },
                    request: function (url) {
                        var that = this;
                        common.ajax({
                            url: url,
                            success: function (res) {
                                var data = res.data;
                                var timelist = data.timelist;
                                that.chart(that.chartZhu, data.resultlist, timelist);
                            }
                        });
                    },
                    search: function () {
                        var that = this;
                        $(".js-search").on("click", function () {
                            var starttime = $("#time").val();
                            var url = "/api/report/getlist";
                            if (starttime != "") {
                                var times = starttime.split('~');
                                url = url + "?starttime=" + times[0].trim() + "&endtime=" + times[1].trim()
                            }
                            that.request(url);
                        });
                        $(".js-search").trigger("click");
                    },
                    chart: function (id, list, time) {
                        var options = {
                            xAxis: {
                                type: 'category',
                                data: time
                            },
                            yAxis: {
                                type: 'value'
                            },
                            tooltip: {
                                show: true
                            },
                            series: [{
                                data: list,
                                type: 'line',
                                smooth: true,
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true, //开启显示
                                            position: 'top' //在上方显示
                                        }
                                    }
                                },
                            }]
                        };
                        if (list.length == 0) {
                            var nodataoption = {
                                title: {
                                    text: '暂无数据',
                                    x: 'center',
                                    y: 'center',
                                    textStyle: {
                                        color: '#000',
                                        fontWeight: 'normal',
                                        fontSize: 16
                                    }
                                }
                            };
                            options = $.extend(options, nodataoption);
                        }
                        id.setOption(options, true);
                    }
                }.init();
            });
    </script>
}