@page
@model YBDevice.NWeb.Pages.Device.DetailModel
@{
    ViewData["Title"] = "设备详情";
}
<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="times" />
            </div>
            <div class="layui-inline">
                <button class="btn btn-primary btn-lg  js-searchs" type="button">查询</button>
            </div>
        </div>
        <div id="EchartZhu" style="width: 100vw;height: 400px;"> </div>
    </div>
</div>
<div class="layui-card">
    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" value="@Model.defaulttime" data-time="ysdatetime" autocomplete="off" name="time" id="time" placeholder="请选择时间" />
                </div>
            </div>
            <div class="layui-inline">
                <button class="btn btn-primary btn-lg  js-search" type="button">查询</button>
            </div>
        </div>
    </div>
    <div class="layui-card-body">
        <table class="layui-table" id="list" lay-filter="list">
        </table>
    </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 _detail = {
                chartZhu: {},
                init: function () {
                    this.getchart();
                    this.gettable();
                    this.search();
                },
                getchart: function () {
                     laydate.render({
                            elem: "#times",
                            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.searchs();
                        }
                    });
                },
                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);
                        }
                    });
                },
                searchs: function () {
                    var that = this;
                    $(".js-searchs").on("click", function () {
                        var starttime = $("#times").val();
                        var url = "/api/report/getdevlist?id=" + '@Model.devid';
                        if (starttime != "") {
                            var times = starttime.split('~');
                            url = url + "&starttime=" + times[0].trim() + "&endtime=" + times[1].trim();
                        }
                        that.request(url);
                    });
                    $(".js-searchs").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);
                },
                gettable: function () {
                    var queryparam = [];
                    var starttime = $("#time").val();
                    if (starttime != "") {
                        var times = starttime.split('~');
                        queryparam.push({
                            "Name": 'createtime',
                            "Type": QueryCond.GreaterThanOrEqual,
                            "Value": times[0].trim()
                        });
                        queryparam.push({
                            "Name": 'createtime',
                            "Type": QueryCond.LessThanOrEqual,
                            "Value": times[1].trim()
                        });
                    }
                    common.initTable({
                        url: '/api/result/getdevresultlist?devid=' + '@Model.devid'
                        , where: {
                            queryParam: queryparam
                        }
                        , method: 'post'
                        , cols: [[
                            {
                                field: 'nickname', title: '用户'
                            },
                            {
                                field: 'sex', title: '性别', templet: function (d) {
                                    return GenderType[d.sex];
                                }
                            },
                            {
                                field: 'weight', title: '体重(KG)'
                            },
                            {
                                field: 'height', title: '身高(CM)'
                            }
                            ,
                            {
                                field: 'age', title: '年龄'
                            }
                            ,
                            {
                                field: 'bmi', title: 'BMI'
                            }
                            ,
                            {
                                field: 'fat_r', title: '脂肪率'
                            }
                            ,
                            {
                                field: 'body', title: '体型'
                            }
                            ,
                            {
                                field: 'bodyage', title: '体龄'
                            }
                            ,
                            {
                                field: 'bone', title: '骨重'
                            }
                            ,
                            {
                                field: 'cmi', title: '分数'
                            }
                            ,
                            {
                                field: 'fat_w', title: '脂肪量'
                            }
                            ,
                            {field: 'sfr', title: '皮下脂肪'
                            }
                            ,
                            {
                                field: 'visceral', title: '内脂'
                            }
                            ,
                            {
                                field: 'water', title: '水份'
                            }
                            ,
                            {
                                field: 'createtime', title: '测量时间'
                            }
                        ]]
                    });
                },
                search: function () {
                    $(".js-search").on("click", function () {
                        var queryparam = [];
                        var starttime = $("#time").val();
                        if (starttime != "") {
                            var times = starttime.split('~');
                            queryparam.push({
                                "Name": 'createtime',
                                "Type": QueryCond.GreaterThanOrEqual,
                                "Value": times[0].trim()
                            });
                            queryparam.push({
                                "Name": 'createtime',
                                "Type": QueryCond.LessThanOrEqual,
                                "Value": times[1].trim()
                            });
                        }
                        common.reloadtable("list", {
                            where: {
                                queryParam: queryparam
                            }
                        });
                    });
                }
            }.init();
        });
    </script>
}