<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/home.css}" href="../static/css/home.css">
    <script th:src="@{/js/echarts/echarts.min.js}"></script>
    <script th:src="@{/layui/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/js/common.js}"></script>
    <script th:src="@{/js/moment.js}"></script>
</head>
<body>
<div class="contain" style="height: 100%">
    <div style="display:flex;align-items:center;">
        <div style="height:8px;width:24px;background-color: rgb(0,112,254);display: inline-block;margin-right:20px;border-radius: 4px;"></div>
        <span style="font-size:18px;font-weight:400;">首页</span>
    </div>
    <div style="margin: .2rem 0;font-size: .25rem;font-weight: 500;">数据总览</div>
    <div class="total_data">
            <div class="icon">
                <div class="icon_Reserve">
                    <img src="../image/home/book.svg">
                </div>
                <div class="textData">
                    <div id="yyrs" style="font-size: .6rem">500</div>
                    <div style="margin-top: 0.22rem;">今日预约人数</div>
                </div>
            </div>
            <div class="icon">
                <div class="icon_Recharge">
                    <img src="../image/home/chongzhi.svg">
                </div>
                <div class="textData">
                    <div id="czzh" style="font-size: .6rem"></div>
                    <div style="margin-top: 0.22rem;">今日掌医充值次数</div>
                </div>
            </div>
            <div class="icon">
                <div class="icon_Consumption">
                    <img src="../image/home/xiaofei.svg">
                </div>
                <div class="textData">
                    <div id="fwrs" style="font-size: .6rem">500</div>
                    <div style="margin-top: 0.22rem;">今日访问人数</div>
                </div>
            </div>
            <div class="icon" style="margin-right: 0;">
                <div class="icon_Bind">
                    <img src="../image/home/bangka.svg">
                </div>
                <div class="textData">
                    <div id="bkrs" style="font-size: .6rem"></div>
                    <div style="margin-top: 0.22rem;">今日绑卡人数</div>
                </div>
            </div>
        </div>
    <div id="main" class="data-graph1">
    </div>
    <div style="display: flex;justify-content: space-between;height: 60%;margin:.4rem 0;">
        <div id="main1" class="data-graph2">
        </div>
        <div class="data-graph3">
            <div style="padding-top:.2rem;font-size: .3rem;font-weight: 600;width:78%;margin:0 auto;color:#333333;">
                热门科室
            </div>
            <div class="rankTable" style="padding-bottom: .04em;font-size: .1rem;font-weight: 800;color: #AAAAAA;">
                <div class="tableRanking">排名</div>
                <div class="tableName">科室</div>
                <div class="tableNum">挂号量</div>
            </div>
        </div>
    </div>

</div>
</body>
<script>
    (function(doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>
<script type="text/javascript">
    function  ghqk(orderTime,rechargeData) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        option = {
            title: {
                text: '近7日挂号预约情况'
            },
            xAxis: {
                type: 'category',
                data: orderTime,
                splitLine:{
                    show:false
                },
                axisTick: { show: false },
            },
            yAxis: {
                type: 'value',
            },
            series: [
                {
                    data: rechargeData,
                    type: 'bar',
                    itemStyle: {
                        //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                        normal: {
                            //柱形图圆角，初始化效果
                            barBorderRadius:[15, 15, 0, 0],
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#0077FE'},                   //柱图渐变色//柱图渐变色
                                    {offset: 1, color: 'rgba(255,255,255,0.5)'},                   //柱图渐变色
                                ]
                            )
                        }
                    },
                    barWidth: 20,
                }
            ]
        };

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

</script>
<script>
    function paiming(office) {
        for(let i = 0;i<office.length;i++){
            var str = '<div class="rankTable">' +
                '                <div class="tableRanking">' +
                '                    <span class="circle color'+(i+1)+'">'+(i+1)+'</span>' +
                '                </div>' +
                '                <div class="tableName">'+office[i].KSMC+'</div>' +
                '                <div class="tableNum">'+office[i].NUM+'</div>' +
                '            </div>'
            $(".data-graph3").append(str)
        }
    }
</script>
<script>
    var rechargeTime = []
    var rechargeData= []
    var orderTime = []
    var orderData = []
    $(document).ready(function(){
        var url = '/findHomeData'
        var param = ''
        AjaxPostJson(url,param,function(data){
            strObj = data;
            console.log(strObj)
            document.getElementById("bkrs").innerHTML=strObj.BKRS
            document.getElementById("czzh").innerHTML=strObj.CZZE
            document.getElementById("yyrs").innerHTML=strObj.YYRS
            document.getElementById("fwrs").innerHTML=strObj.FWRS
            paiming(strObj.office)
            for(let i = 0;i <strObj.weekrecharge.length;i++){
                rechargeData.push(strObj.weekrecharge[i].NUM)
                rechargeTime.push(moment(strObj.weekrecharge[i].NOWDATE, "YYYYMMDD").format("M月D日"))
            }
            for(let i = 0;i <strObj.weekOrder.length;i++){
                orderData.push(strObj.weekOrder[i].NUM)
                orderTime.push(moment(strObj.weekOrder[i].NOWDATE, "YYYYMMDD").format("M月D日"))
            }
            czqs(rechargeTime, rechargeData)
            ghqk(orderTime, orderData)
        });
    });
</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    function czqs(rechargeTime, rechargeData) {
        var myChart = echarts.init(document.getElementById('main1'));
        // 指定图表的配置项和数据
        option = {
        	title: {
                text: '近7日门诊充值趋势'
            },
            xAxis: {
                type: 'category',
                data: rechargeTime
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: rechargeData,
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    itemStyle: { //折线的样式设置
                        normal: {
                            lineStyle: { //折线线条的设置
                                color: '#d77b09',
                                width: 5,
                            },
                        },
                    },
                }
            ]
        };

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