<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: touchScreenHeader('实时叫号')"/>
    <style>

        .shuju li {
            width: 20%;
            height: 400px;
            padding-top: 150px;
            margin-left: 12.5%;
        }

        .shuju li img {
            width: 150px;
        }

        .shuju li p {
            color: #000 !important;
            font-size: 24px;
        }

        .shuju li .shu {
            font-size: 30px
        }
    </style>
</head>
<body>
<th:block th:include="include :: touchscreenHeader"/>
<div class="main">
    <div>
        <div class="con">
            <div class="shuju">
                <div style="text-align: center;">
                    <span style="line-height:100px;font-size:50px;">大厅总叫号量</span>
                    <span style="line-height:100px;font-size:50px;color:rgb(221,223,13);">
                        <strong class="zong">[[${zong}]]</strong>
                    </span>
                </div>
            </div>
            <div id="container" style="height:470px; margin: 0 auto;width:60%;float:left;">
                <ul class="shuju" style="background:none;">
                    <li style="color:#ffffff;"><img src="/touchscreenstyle/images/a1.png"/>
                        <p>今日取号</p><strong class="shu" style="color:#00aeff" id="today">[[${today}]]</strong>人
                    </li>
                    <li style="color:#ffffff;"><img src="/touchscreenstyle/images/yb.png"/>
                        <p>今日已办</p><strong class="shu" style="color:#be34fa" id="yb">[[${yb}]]</strong>人
                    </li>
                    <li style="color:#ffffff;"><img src="/touchscreenstyle/images/a2.png"/>
                        <p>正在办理</p><strong class="shu" style="color:#feb300" id="blz">[[${blz}]]</strong>人
                    </li>
                    <!--                    <li style="color:#ffffff;"><img src="/touchscreenstyle/images/a3.png"/>-->
                    <!--                        <p>当前等待</p><strong class="shu" style="color:#ff6262" id="deng">[[${deng}]]</strong>人-->
                    <!--                    </li>-->
                </ul>
            </div>
            <div id="containerFB" style="width:40%;height: 470px; margin: 0 auto;float:left;"></div>
        </div>
    </div>
</div>
<div class="weui_tabbar">
    <a href="/touchscreen/index" class="weui_tabbar_item">
        <div class="weui_tabbar_icon hig20">
            <i class="fa fa-map"></i>
        </div>
        <p class="weui_tabbar_label">指引地图</p>
    </a>
    <a href="/touchscreen/jieshao" class="weui_tabbar_item">
        <div class="weui_tabbar_icon hig20">
            <i class="fa fa-star-o"></i>
        </div>
        <p class="weui_tabbar_label">中心介绍</p>
    </a>
    <!-- <a href="/touchscreen/search" class="weui_tabbar_item">
         <div class="weui_tabbar_icon hig20">
             <i class="fa fa-search"></i>
         </div>
         <p class="weui_tabbar_label">办件查询</p>
     </a>-->
    <a href="/touchscreen/nan" class="weui_tabbar_item">
        <div class="weui_tabbar_icon hig20">
            <i class="fa fa-telegram"></i>
        </div>
        <p class="weui_tabbar_label">办事指南</p>
    </a>
    <a href="/touchscreen/notice" class="weui_tabbar_item">
        <div class="weui_tabbar_icon hig20">
            <i class="fa fa-list"></i>
        </div>
        <p class="weui_tabbar_label">公示公告</p>
    </a>
    <a href="/touchscreen/hao" class="weui_tabbar_item weui_bar_item_on">
        <div class="weui_tabbar_icon hig20">
            <i class="fa fa-bullhorn"></i>
        </div>
        <p class="weui_tabbar_label">叫号统计</p>
    </a>
    <a href="/touchscreen/tong" class="weui_tabbar_item">
        <div class="weui_tabbar_icon hig20">
            <i class="fa fa-pie-chart"></i>
        </div>
        <p class="weui_tabbar_label">办件统计</p>
    </a>
</div>
<th:block th:include="include :: touchScreenFooter"/>
<script type="text/javascript" th:inline="javascript">
    shijian();
    var dataArray = [];
    var pieNum = [[${pieNum}]];
    $.each(pieNum, function (k, v) {
        var item = [k, v];
        dataArray.push(item);
    });
    var chart1 = Highcharts.chart('containerFB', {
        title: {
            text: '各服务区取号占比'
        },
        tooltip: {
            headerFormat: '{series.name}<br>',
            pointFormat: '{point.name}:<b>{point.y}</b>人 <b>占比{point.percentage:.2f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,  // 可以被选择
                cursor: 'pointer',       // 鼠标样式
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.y}人',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: '服务区取号占比',
            data: dataArray
        }]
    });
    changeTwoDecimal = function changeTwoDecimal(floatvar) {
        var f_x = parseFloat(floatvar);
        if (isNaN(f_x)) {
            alert('function:changeTwoDecimal->parameter error');
            return false;
        }
        var f_x = Math.round(floatvar * 100) / 100;
        return f_x;
    }
</script>
</body>
</html>
