{% extends "base/base.html" %}
{% load staticfiles %}

{% block staticfile %}
<link rel="stylesheet" href="{% static 'css/productionDetail.css' %}">
<script type="text/javascript" src="{% static 'js/production.js' %}"></script>
{% endblock staticfile %}

{% block content %}
            <div id="ContentWrap">
                <div id="warpWrap">
                    <h3>정경</h3>
                    <div> <!-- 윗줄 -->
                        <div>
                            <div></div>
                            <div>
                                <div></div>
                                <div></div>
                            </div>
                        </div> <!-- 1con -->
                        <div>
                            <div>
                                <div></div>
                                <div></div>
                            </div>
                            <div>
                                <div></div>
                                <div></div>
                            </div>
                        </div> <!-- 2con -->
                        <div>
                            <div>
                                <div></div>
                                <div></div>
                            </div>
                            <div>
                                <table>

                                </table>
                            </div>
                        </div> <!-- 3con -->
                    </div>
                </div>

                <div id="knitWrap">
                    <h3>편직</h3>
                    <div class="fix"> <!-- 윗줄 -->
                        <div class="knitGrid fix">
                            <div class="sectionBox mr">
                                <div class="halfBoxCol2">
                                    <div id="circle1">
                                        <span class="e_text">편직 진행률</span>
                                    </div>
                                    <div class="e_botText">
                                        <p>총 오더수량: <span class="knitTotalQty">9000</span></p>
                                        <p>현재 재직수량: <span class="knitQty">4000</span></p>
                                    </div>
                                </div>
                            </div>
                            <div class="sectionBox">
                                <div class="halfBox mb">
                                    <p class="knitTitle">기계코드</p>
                                    <p class="knitContent">Trs-c001</p>
                                </div>
                                <div class="halfBox">
                                    <p class="knitTitle">RPM</p>
                                    <p class="knitContent">500</p>
                                </div>
                            </div>
                        </div> <!-- 1con -->
                        <div class="knitGrid fix">
                            <div class="sectionBox mr">
                                <div class="halfBox mb">
                                    <p class="knitTitle">예상 일일생산량</p>
                                    <p class="knitContent">20000y</p>
                                </div>
                                <div class="halfBox">
                                    <p class="knitTitle">1회 생산량</p>
                                    <p class="knitContent">2000y</p>
                                </div>
                            </div>
                            <div class="sectionBox">
                                <div class="halfBox mb">
                                    <p class="knitTitle">작업자</p>
                                    <p class="knitContent">admin</p>
                                </div>
                                <div class="halfBox">
                                    <p class="knitTitle">?????</p>
                                    <p class="knitContent">?????</p>
                                </div>
                            </div>
                        </div> <!-- 2con -->
                        <div class="knitGrid fix">
                            <div class="sectionBox mr">
                                <div class="halfBox mb">
                                    <p class="knitTitle">시작시간</p>
                                    <p class="knitContent">2019-02-02 12:00</p>
                                </div>
                                <div class="halfBox">
                                    <p class="knitTitle">예상종료시간</p>
                                    <p class="knitContent">2019-02-04 12:00</p>
                                </div>
                            </div>
                            <div>
                                <div class="halfBoxCol2">
                                    <table>

                                    </table>
                                </div>
                            </div>
                        </div> <!-- 3con -->
                    </div>
                </div>
            </div>
    <script>
        $(document).ready(function(){
            var knitProgress = $('.knitQty').text() / $('.knitTotalQty').text() * 100;

            $("#circle1").circliful({
                    animationStep: 3,
                    backgroundColor: '#e4e4e4',
                    foregroundColor: '#3D56A6',
                    percent: knitProgress
            });
        })
    </script>
{% endblock content %}