<%--
  Created by IntelliJ IDEA.
  User: kangmor
  Date: 2016/4/23
  Time: 21:56
--%>
<%@ include file="/common/taglibs.jsp" %>
<%@ page language="java" pageEncoding="UTF-8" %>


<script>

    var statusMsg = ["收到MC-1 站位12，元器件ABC123自动叫料指令", "材料准备中...", "材料ABC123, 唯一号 C10001000出库中", "元器件ABC123出库完成"];

    var index = 1;
    //定时执行，5秒后执行show()
    window.setTimeout(nextMsg, 5000);

    function nextMsg() {
        //alert($("#statusContent").text());
        var msg = statusMsg[index++ % 4];
        //$("#statusContent").animate({left:'0px'});
        $("#statusContent").text(msg);

        var logItem = $("ul#logs li:first").clone();
        //alert(logItem.select(".cont-col2 .desc").text());
        $("ul#logs").prepend(logItem);
        $("ul#logs li:first .cont-col2 .desc").text(msg);
        window.setTimeout(nextMsg, 5000);
    }
    function launchFullscreen(element) {
        element.style.width = "100%";
        element.style.height = "100%";
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
    }

</script>
<!-- BEGIN PAGE HEADER-->
<style>
    .status-wrap {
        display: table;
        width: 100%;
        height: 100%;
        color: white;
    }

    .status-content {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        font-weight: 300;
        font-size: 16px;
        line-height: 110px;
        width: 100%;
    }

    :-webkit-full-screen div {
        font-size: 36px;
    }

    :-moz-full-screen div {
        font-size: 36px;
    }

    :-ms-fullscreen div {
        font-size: 36px;
    }

    :fullscreen div {
        font-size: 36px;
    }


</style>

<div>

    <div>
        <h3 class="page-title">
            看板
        </h3>


        <div class="dashboard-stat blue-madison status-wrap" onclick="launchFullscreen(this);">
            <%--<div class="visual">--%>
            <%--<i class="fa fa-comments"></i>--%>
            <%--</div>--%>
            <div class="status-content" id="statusContent">
                收到MC-1 站位12，元器件ABC123自动叫料指令
            </div>
                <a class="more" href="#" style="
    float: right;position: relative;">
                    全屏查看 <i class="m-icon-swapright m-icon-white"></i>
                </a>
        </div>
        <div class="clearfix">
        </div>
        <div class="row">
            <div class="col-md-6 col-sm-6">
                <!-- BEGIN PORTLET-->
                <div class="portlet solid bordered grey-cararra">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-bar-chart-o"></i>站位列表
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div id="zhanWeiChart" style="height: 330px;">

                        </div>
                    </div>
                </div>
                <!-- END PORTLET-->
            </div>
            <div class="col-md-6 col-sm-6">
                <!-- BEGIN PORTLET-->
                <div class="portlet solid grey-cararra bordered">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-bullhorn"></i>元器件分布
                        </div>

                    </div>
                    <div class="portlet-body">

                        <div id="yuanQiJianChart" style="height: 330px;">

                        </div>
                    </div>
                </div>
                <!-- END PORTLET-->
            </div>
        </div>

        <div class="clearfix">
        </div>
        <div class="row ">
            <!--实时温度 -->
            <div class="col-md-6 col-sm-6">
                <div class="portlet box purple-wisteria">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-calendar"></i>实时温度
                        </div>
                        <%--<div class="actions">--%>
                        <%--<a href="javascript:;" class="btn btn-sm btn-default easy-pie-chart-reload">--%>
                        <%--<i class="fa fa-repeat"></i> Reload </a>--%>
                        <%--</div>--%>
                    </div>
                    <div class="portlet-body">
                        <div id="wenduChart" style="height:300px">


                        </div>

                    </div>
                </div>
            </div>
            <!--实时湿度 -->
            <div class="col-md-6 col-sm-6">
                <div class="portlet box red-sunglo">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-calendar"></i>实时湿度
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div id="shiduChart" style="height:300px">


                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="clearfix">
        </div>
        <div class="row">
            <div class="col-md-6 col-sm-6">
                <div class="portlet box green-haze tasks-widget">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-check"></i>工单列表
                        </div>

                    </div>
                    <div class="portlet-body">
                        <div class="task-content">
                            <div class="slimScrollDiv"
                                 style="position: relative; overflow: hidden; width: auto; height: 305px;">
                                <div class="scroller" style="height: 305px; overflow: hidden; width: auto;"
                                     data-always-visible="1" data-rail-visible1="1" data-initialized="1">
                                    <!-- START TASK LIST -->
                                    <ul class="task-list">
                                        <li>

                                            <div class="task-title">
												<span class="task-title-sp">
												MC-1贴片机工单贴片机工单 </span>
                                                <span class="label label-sm label-success">[进行中]</span>

                                            </div>
                                        </li>
                                        <li>

                                            <div class="task-title">
												<span class="task-title-sp">
												MC-2贴片机工单贴片机工单 </span>

                                            </div>
                                        </li>
                                        <li>

                                            <div class="task-title">
												<span class="task-title-sp">
												MC-3贴片机工单贴片机工单 </span>

                                            </div>
                                        </li>
                                        <li>
                                            <div class="task-title">
												<span class="task-title-sp">
												MC-5贴片机工单贴片机工单 </span>
                                                <span class="label label-sm label-default">[已完成]</span>

                                            </div>
                                        </li>
                                    </ul>
                                    <!-- END START TASK LIST -->
                                </div>
                            </div>
                        </div>
                        <div class="task-footer">
                            <div class="btn-arrow-link pull-right">
                                <a href="#">more</a>
                                <i class="icon-arrow-right"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--操作日志 -->
            <div class="col-md-6 col-sm-6">
                <div class="portlet box blue-steel">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-bell-o"></i>日志
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div class="scroller" style="height: 300px;" data-always-visible="1" data-rail-visible="0">
                            <ul class="feeds" id="logs">
                                <li>
                                    <div class="col1">
                                        <div class="cont">
                                            <div class="cont-col1">
                                                <div class="label label-sm label-success">
                                                    <i class="fa fa-bell-o"></i>
                                                </div>
                                            </div>
                                            <div class="cont-col2">
                                                <div class="desc">
                                                    收到MC-1 站位12，元器件ABC123自动叫料指令
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col2">
                                        <div class="date">
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="scroller-footer">
                            <div class="btn-arrow-link pull-right">
                                <a href="#">more</a>
                                <i class="icon-arrow-right"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="clearfix">
        </div>


    </div>
</div>

<c:set var="scripts" scope="request">
    <script src="${ctx}/scripts/echarts.min.js"></script>
    <script type="text/javascript">
        function randomData() {
            now = new Date(+now + oneDay);
            value = value + Math.random() * 6 - 3;
            return {
                name: now.toString(),
                value: [
                    [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                    Math.round(value)
                ]
            }
        }

        var data = [];
        var now = +new Date(2016, 5, 3);
        var oneDay = 1 * 3600 * 1000;
        var value = Math.random() * 6 - 3;
        for (var i = 0; i < 1000; i++) {
            data.push(randomData());
        }

        option = {
//            title: {
//                text: '动态数据 + 时间坐标轴'
//            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    params = params[0];
                    var date = new Date(params.name);
                    return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
                },
                axisPointer: {
                    animation: false
                }
            },
            xAxis: {
                type: 'time',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            series: [{
                name: '温度',
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: data
            }]
        };

        var dom = document.getElementById("wenduChart");
        var wenduChart = echarts.init(dom);
        wenduChart.setOption(option);
        window.setInterval(function () {

            for (var i = 0; i < 5; i++) {
                data.shift();
                data.push(randomData());
            }

            wenduChart.setOption({
                series: [{
                    data: data
                }]
            });
        }, 1000);



        var shiDuDom = document.getElementById("shiduChart");
        var shiduChart = echarts.init(shiDuDom);
        shiduChart.setOption(option);
        window.setInterval(function () {

            for (var i = 0; i < 5; i++) {
                data.shift();
                data.push(randomData());
            }

            shiduChart.setOption({
                series: [{
                    data: data
                }]
            });
        }, 1000);


        zhanWeiOption = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data:['元件剩余数量', '可用时间']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'value'
                }
            ],
            yAxis : [
                {
                    type : 'category',
                    axisTick : {show: false},
                    data : ['站位一','站位二','站位三','站位四','站位五']
                }
            ],
            series : [
                {
                    name:'元件剩余数量',
                    type:'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true
                        }
                    },
                    data:[20, 302, 141, 474, 390]
                },
                {
                    name:'可用时间',
                    type:'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'left'
                        }
                    },
                    data:[-10, -6, -123, -105, -42]
                }
            ]
        };
        var zhanWeiDom = document.getElementById("zhanWeiChart");
        var zhanWeiChart = echarts.init(zhanWeiDom);
        zhanWeiChart.setOption(zhanWeiOption);


                    var yuanQiJiandata = [
                        {
                            "value": [
                                800,
                                3
                            ],
                            "name": "元器件 A",


                        },
                        {
                            "value": [
                                400,
                                2
                            ],
                            "name": "元器件 B",

                        },
                        {
                            "value": [
                                1000,
                                12
                            ],
                            "name": "元器件 C",

                        },
                        {
                            "value": [
                                300,
                                38
                            ],
                            "name": "元器件 D",

                        },
                        {
                            "value": [
                                4000,
                                20
                            ],
                            "name": "元器件 E",

                        },
                        {
                            "value": [
                                1500,
                                30
                            ],
                            "name": "元器件 F",

                        },
                        {
                            "value": [
                                600,
                                50
                            ],
                            "name": "元器件 G",

                        }
                    ];

        var formatUtil = echarts.format;
        yuanQiJianOption = {

            tooltip: {
                trigger: 'item',
                formatter: function (info) {
                    var value = info.value;
                    return info.name + '<br>数量 : ' + value[0] + '<br>仓位数 : ' + value[1];
                }
            },

            series: [
                {
                    name:'元器件分布',
                    type:'treemap',
                    data: yuanQiJiandata
                }
            ]
        }

        var yuanQiJianDom = document.getElementById("yuanQiJianChart");
        var yuanQiJianChart = echarts.init(yuanQiJianDom);
        yuanQiJianChart.setOption(yuanQiJianOption);

    </script>
</c:set>