{% extends 'base.html' %}


{% block content %}

    <style type="text/css">
        .lasterYuJing {
            height: 210px !important;

        }

        .lasterYuJing td {
            overflow: hidden !important;
            height: 35px !important;
        }

        .home-info {
            cursor: pointer;
        }
    </style>
    {% load static %}

    <!-- <script src="{% static 'js/plugins/echarts/echarts-all.js'  %}"></script> -->
    <div class="wrapper wrapper-content animated fadeInDown">

        <div class="layui-card-header" style="font-size: 20px;font-weight: bold;align-items: center;">
            主页概况
        </div>

        <div class="row">
            <div class="col-sm-7">
                <div class="row">
                    <div class="col-sm-4">
                        <div class="ibox float-e-margins home-info" value="/home/homeDrugRecord/?days=1&recordType=1">
                            <div class="ibox-title">
                                <span class="label label-success pull-right">今日</span>
                                <h5>今日入库</h5>
                            </div>
                            <div class="ibox-content">
                                {#                            firstof:输出第一个值不等于False的变量#}
                                <h1 class="no-margins">{% firstof putInCount '0' %}</h1>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="ibox float-e-margins home-info" value="/home/homeDrugRecord/?days=1&recordType=2">
                            <div class="ibox-title">
                                <span class="label label-success pull-right">今日</span>
                                <h5>今日领用</h5>
                            </div>
                            <div class="ibox-content">
                                <h1 class="no-margins">{% firstof useCount '0' %}</h1>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="ibox float-e-margins home-info" value="/home/homeDrugRecord/?days=1&recordType=3">
                            <div class="ibox-title">
                                <span class="label label-success pull-right">今日</span>
                                <h5>今日归还</h5>
                            </div>
                            <div class="ibox-content">
                                <h1 class="no-margins">{% firstof returnCount '0' %}</h1>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="ibox float-e-margins home-info" value="/home/homeWarningRecord/?warningType=3">
                            <div class="ibox-title">
                                <span class="label label-warning pull-right">全部</span>
                                <h5>库存预警</h5>
                            </div>
                            <div class="ibox-content">
                                <h1 class="no-margins">{% firstof DurgSurplusEarlyWarning '0' %}</h1>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="ibox float-e-margins home-info" value="/home/homeWarningRecord/?warningType=2">
                            <div class="ibox-title">
                                <span class="label label-warning pull-right">全部</span>
                                <h5>过期药剂</h5>
                            </div>
                            <div class="ibox-content">
                                <h1 class="no-margins">{% firstof expireWarning '0' %}</h1>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="ibox float-e-margins home-info" value="/home/homeDrugOut/">
                            <div class="ibox-title">
                                <span class="label label-warning pull-right">全部</span>
                                <h5>未归还</h5>
                            </div>
                            <div class="ibox-content">
                                <h1 class="no-margins">{% firstof drugOut '0' %}</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-5">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <span class="label label-success pull-right"></span>
                                <h5>近期预警列表</h5>
                            </div>
                            <div class="ibox-content lasterYuJing">
                                <table class="table table-hover no-margins">
                                    <thead>
                                    <tr>
                                        <th width="25%">日期</th>
                                        <th width="20%">对象</th>
                                        <th width="60%">内容</th>

                                    </tr>
                                    </thead>
                                    <tbody id="warningList">

                                    <tr class="warning-item" style="cursor:pointer" val="@item.WarningId">
                                        <td><i class="fa fa-clock-o"></i>@item.WarningDate.ToString("MM/dd HH:mm")</td>
                                        <td>
                                            <small>@item.ObjectName</small>
                                        </td>
                                        <td>@Utils.CutString(item.WarningContent,30)</td>
                                    </tr>


                                    <tr>
                                        <td><i class="fa fa-clock-o"></i> 5/20 11:20</td>
                                        <td>
                                            <small>温湿预警</small>
                                        </td>
                                        <td>姜岚昕</td>
                                    </tr>

                                    <tr>
                                        <td><i class="fa fa-clock-o"></i> 5/20 11:20</td>
                                        <td>
                                            <span class="label label-primary">已完成</span>
                                        </td>
                                        <td>栾某某</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>环境监控折线图</h5>
                        <div class="pull-right">
                            <div class="btn-group" id="humitureSwich">
                                <button type="button" class="btn btn-xs btn-white active" val="1">温度</button>
                                <button type="button" class="btn btn-xs btn-white" val="2">湿度</button>
                                <button type="button" class="btn btn-xs btn-white" val="3">VOC含量</button>
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row" style="text-align: center;vertical-align: middle;">
                            <div class="col-sm-12">
                                <div class="echarts" id="echarts">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="display: inline-block; width: 48%; float: left;">
            <div>
                <div style="background-color: #ffffff;border-color: #e7eaec;-webkit-border-image: none;-o-border-image: none;border-image: none;border-style: solid solid none;border-width: 4px 0px 0;
            color: inherit;margin-bottom: 2px;padding: 14px 15px 7px;min-height: 48px;">
                    <h5>库存余量表(瓶)</h5>
                </div>
                <div style="background-color: #ffffff; border-width: 1px 0px;">
                    <div id="form_total" style="width: 100%;height:350px;"></div>
                </div>
            </div>
        </div>


        <div style="display: inline-block; width: 48%; float: right;">
            <div>
                <div style="background-color: #ffffff;border-color: #e7eaec;-webkit-border-image: none;-o-border-image: none;border-image: none;border-style: solid solid none;border-width: 4px 0px 0;
            color: inherit;margin-bottom: 2px;padding: 14px 15px 7px;min-height: 48px;">
                    <h5>使用次数表</h5>
                </div>
                <div style="background-color: #ffffff; border-width: 1px 0px;">
                    <div id="usage_record" style="width: 100%;height:350px;"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> -->
    <script src="{% static 'js/echarts.min.js' %}"></script>

    <!-- <script src=></script> -->

    <script>
        new Promise((resolve, reject) => {
            $.get("/api/usage_record/", function (obj) {
                let jsonData = JSON.parse(obj)
                resolve(jsonData)
            });
        }).then(jsonData => {
            console.log(typeof jsonData);
            console.log(jsonData);
            // 基于准备好的dom，初始化echarts实例\
            var myChart = echarts.init(document.getElementById('usage_record'));
            option = {
                tooltip: {
                    formatter: '{b} : {c} ({d}%)'
                },
                legend: {
                    bottom: 10,
                    left: 'center',
                },
                series: [
                    {
                        type: 'pie',
                        radius: '65%',
                        center: ['50%', '50%'],
                        selectedMode: 'single',
                        data: jsonData,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        })

    </script>

    <script type="text/javascript">
        new Promise((resolve, reject) => {
            $.get("/api/form_total/", function (obj) {
                let jsonData = JSON.parse(obj)
                resolve(jsonData)
            });
        }).then(jsonData => {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('form_total'));

            // 指定图表的配置项和数据
            var option = {
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true,
                },
                xAxis: [
                    {

                        data: jsonData[0],
                        type: 'category',
                        //字体倾斜
                        axisLabel: {
                            interval: 0,
                            rotate: 60
                        },
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        max: Math.max.apply(null, jsonData[1]) + 200
                    }
                ],

                series: [
                    {
                        type: 'bar',
                        barWidth: '60%',
                        data: jsonData[1]
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        })

    </script>

    <script src="{% static 'js/warning.js' %}"></script>

    <script>

        $(function () {
            $('#navTitle', window.parent.document).text('概况统计');
            sessionStorage.removeItem("firstAccount");
            getWarningList();
            {#        模块跳动#}
            $('.home-info').each(function () {
                animationHover(this, 'bounce');
            });
            $('.home-info').click(function () {
                quiteTime = Infinity;
                parent.layer.open({
                    title: $(this).find("h5").text(),
                    shift: 2,
                    type: 2,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['960px', '610px'],
                    content: [$(this).attr("value"), 'no'],
                    end: function () {
                        currentTime = 0;
                        quiteTime = 600;
                    }
                });

            })
            getChartData(1);
            $("#humitureSwich .btn").click(function () {
                getChartData($(this).attr("val"));
            })

            //var lineoption = {
            //    title: {
            //        text: '最近24小时变化'
            //    },
            //    tooltip: {
            //        trigger: 'axis'
            //    },
            //    legend: {
            //        data: ['药剂柜1']
            //    },
            //    grid: {
            //        x: 40,
            //        x2: 40,
            //        y2: 24
            //    },
            //    calculable: true,
            //    xAxis: [
            //        {
            //            type: 'category',
            //            boundaryGap: false,
            //            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            //        }
            //    ],
            //    yAxis: [
            //        {
            //            type: 'value',
            //            axisLabel: {
            //                formatter: '{value} °C'
            //            }
            //        }
            //    ],
            //    series: [
            //        {
            //            name: '药剂柜1',
            //            type: 'line',
            //            data: [0, 20, 0, 0, 0, 0, 0],
            //            markPoint: {
            //                data: [
            //                    { type: 'max', name: '最大值' },
            //                    { type: 'min', name: '最小值' }
            //                ]
            //            },
            //            markLine: {
            //                data: [
            //                    { type: 'average', name: '平均值' }
            //                ]
            //            }
            //        }
            //    ]
            //};

        });
        $('#echarts').html('<div class="" style="line-height: 250px;"><i class="fa fa-spinner fa-pulse fa-3x"></i></div>');
        var lineChart = echarts.init(document.getElementById("echarts"));
        function getChartData(_type) {
            

            $.get('{% url 'humiture:getHumitureStatisticsJson' %}', {type: _type}, function (obj) {
                // $('#echarts').html('');
               
                var lineoption = obj.data;
                lineChart.setOption(lineoption);
                $(window).resize(lineChart.resize);
            });
        }

        Date.prototype.format = function (fmt) { // author: meizz
            var o = {
                "M+": this.getMonth() + 1, // 月份
                "d+": this.getDate(), // 日
                "h+": this.getHours(), // 小时
                "m+": this.getMinutes(), // 分
                "s+": this.getSeconds(), // 秒
                "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
                "S": this.getMilliseconds() // 毫秒
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        };

        function getWarningList() {
            $("#warningList").html('');
            $.get('{% url 'home:getWarningList' %}', {t: new Date().getTime()}, function (obj) {
                if (obj.data.length == 0) {
                    $("#warningList").append('<tr><td>暂无近期未解决预警</tr></td>')
                }

                $(JSON.parse(obj.data)).each(function (index, obj) {
                    // 格式化一个日期格式
                    if (obj.WarningDate) {
                        var warningData = obj.WarningDate.substring(0, 10) + ' ' + obj.WarningDate.substring(11, 20)
                    } else {
                        warningData = obj.WarningDate
                    }
                    // 长度大于20显示为省略号
                    if (obj.WarningContent) {
                        if (obj.WarningContent.length > 30) {
                            var WarningContent = obj.WarningContent.substring(0, 30) + '...'
                        } else {
                            WarningContent = obj.WarningContent
                        }
                    } else {
                        WarningContent = ''
                    }
                    $("#warningList").append(' <tr class="warning-item" style="cursor:pointer" val="' + obj.WarningId + '"><td><i class="fa fa-clock-o"></i>' + warningData + '</td><td><small>' + obj.ObjectName + '</small></td> <td id="str_cut">' + WarningContent + '</td></tr>')

                });

                $(".warning-item").click(function () {
                    quiteTime = Infinity;
                    parent.layer.open({
                        title: "预警详情",
                        shift: 2,
                        type: 2,
                        area: ['860px', '510px'],
                        skin: 'layui-layer-rim', //加上边框
                        content: ['/warning/form/?warning_id=' + $(this).attr("val"), 'no'],
                        end: function () {
                            currentTime = 0;
                            quiteTime = 600;
                            getWarningList();
                        }
                    });

                });
            });
        }
    </script>

{% endblock %}