{% extends 'base_site.html' %}

{% load static %}

{% block title %}设备详细信息{% endblock title %}

{% block stylesheets %}{{ block.super }}{% endblock stylesheets %}

{% block content %}
    <div class="right_col" role="main">
        <!-- top tiles -->
        <div class="row tile_count">
            <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                <span class="count_top"><i class="fa fa-industry"></i> 机床名称</span>
                <div class="count">{{ cnc.cncName }}</div>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                <span class="count_top"><i class="fa fa-slack"></i> 机床编号</span>
                <div class="count">{{ cnc.cncNo }}</div>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                <span class="count_top"><i class="fa fa-tag"></i> 机床型号</span>
                <div class="count">{{ cnc.cncType.typeName }}</div>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                <span class="count_top"><i class="fa fa-eye"></i> 机床状态</span>
                <div class="count">
                    {% if cnc.isInUsing %} 使用中{% else %} 停机中{% endif %}
                </div>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                <span class="count_top"><i class="fa fa-laptop"></i> 数控品牌</span>
                <div class="count">{{ cnc.ncBrand.brandName }}</div>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                <span class="count_top"><i class="fa fa-user"></i> 机床负责人</span>
                <div class="count">{{ cnc.cncManager.username }}</div>
            </div>
        </div>
        <!-- /top tiles -->

        <!-- second tiles -->
        <div class="row tile_count">
            <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                <span class="count_top"><i class="fa fa-clock-o"></i> 上电时间</span>
                <div class="count">20 小时</div>
                <span class="count_bottom"><i class="fa fa-sort-asc"></i><i class="green">4% </i>自昨日</span>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                <span class="count_top"><i class="fa fa-clock-o"></i> 工作时间</span>
                <div class="count">15 小时</div>
                <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>3% </i>自昨日</span>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                <span class="count_top"><i class="fa fa-clock-o"></i> 切削时间</span>
                <div class="count">8 小时</div>
                <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i>自昨日</span>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                <span class="count_top"><i class="fa fa-percent"></i> 工作效率</span>
                <div class="count">60%</div>
                <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>12% </i>自昨日</span>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                <span class="count_top"><i class="fa fa-exclamation-triangle"></i> 报警数量</span>
                <div class="count">0</div>
                <span class="count_bottom"><i class="green"><i
                        class="fa fa-sort-desc"></i>100% </i> 自昨日</span>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                <span class="count_top"><i class="fa fa-code"></i> 当前程序</span>
                <div class="count">1111</div>
                <span class="count_bottom"> 上一程序 1110</span>
            </div>
        </div>
        <!-- /second tiles -->

        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>主轴负载
                            <small>主轴负载实时更新线图</small>
                        </h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Settings 1</a>
                                    </li>
                                    <li><a href="#">Settings 2</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a class="close-link"><i class="fa fa-close"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <canvas id="chart_plot_spindle_load"></canvas>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-sm-6 col-xs-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>主轴速率
                            <small>主轴速率实时更新线图</small>
                        </h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Settings 1</a>
                                    </li>
                                    <li><a href="#">Settings 2</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a class="close-link"><i class="fa fa-close"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <canvas id="chart_plot_spindle_speed"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>XYZ坐标
                            <small>XYZ坐标实时更新线图</small>
                        </h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Settings 1</a>
                                    </li>
                                    <li><a href="#">Settings 2</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a class="close-link"><i class="fa fa-close"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <canvas id="xyzLineChart"></canvas>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-sm-6 col-xs-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>AC摆角
                            <small>AC摆角实时更新线图</small>
                        </h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Settings 1</a>
                                    </li>
                                    <li><a href="#">Settings 2</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a class="close-link"><i class="fa fa-close"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <canvas id="abcLineChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
{% endblock content %}

{% block javascripts %}
    <!-- Template variables -->
    <script>
        var device_pk = "{{ cnc.pk }}";
    </script>

    {{ block.super }}
    <!-- Chart.js -->
    <script src="{% static 'vendors/Chart.js/dist/Chart.min.js' %}"></script>
    <!-- gauge.js -->
    <script src="{% static 'vendors/gauge.js/dist/gauge.min.js' %}"></script>
    <!-- Skycons -->
    <script src="{% static 'vendors/skycons/skycons.js' %}"></script>
    <!-- Flot -->
    <script src="{% static 'vendors/Flot/jquery.flot.js' %}"></script>
    <script src="{% static 'vendors/Flot/jquery.flot.pie.js' %}"></script>
    <script src="{% static 'vendors/Flot/jquery.flot.time.js' %}"></script>
    <script src="{% static 'vendors/Flot/jquery.flot.stack.js' %}"></script>
    <script src="{% static 'vendors/Flot/jquery.flot.resize.js' %}"></script>
    <!-- Flot plugins -->
    <script src="{% static 'vendors/flot.orderbars/js/jquery.flot.orderBars.js' %}"></script>
    <script src="{% static 'vendors/flot-spline/js/jquery.flot.spline.min.js' %}"></script>
    <script src="{% static 'vendors/flot.curvedlines/curvedLines.js' %}"></script>
    <!-- DateJS -->
    <script src="{% static 'vendors/DateJS/build/date.js' %}"></script>
    <!-- JQVMap -->
    <script src="{% static 'vendors/jqvmap/dist/jquery.vmap.js' %}"></script>
    <script src="{% static 'vendors/jqvmap/dist/maps/jquery.vmap.world.js' %}"></script>
    <script src="{% static 'vendors/jqvmap/examples/js/jquery.vmap.sampledata.js' %}"></script>
    <!-- Socket.io -->
    <script src="{% static 'vendors/socketio/socket.io.js' %}"></script>
    <script src="{% static 'app/js/socketio.js' %}"></script>
{% endblock javascripts %}