<div class="row"> <div class="col-lg-12 col-layer"> <section class="widget"> <header> <h4> <span class="font13" style="font-weight: bold"> <i class="fa fa-sort-amount-asc"></i> Active Requirement </span> </h4> <div class="widget-controls"> <a data-widgster="toleft" title="change width to left" href="#"> <i class="glyphicon glyphicon-chevron-left"></i> </a> <a data-widgster="expand" title="Expand" href="#"> <i class="glyphicon glyphicon-chevron-up"></i> </a> <a data-widgster="collapse" title="Collapse" href="#"> <i class="glyphicon glyphicon-chevron-down"></i> </a> <a data-widgster="toright" title="change width to right" href="#"> <i class="glyphicon glyphicon-chevron-right"></i> </a> <a data-widgster="restore" title="Restore" href="#"> <span class="glyphicon glyphicon-repeat"></span> </a> <a data-widgster="fullscreen" title="Fullscreen" href="#"> <i class="glyphicon glyphicon-fullscreen" style="font-size: 11px"> </i> </a> </div> </header> <div class="body"> <div class="gradient_middle_border" style="width: 100%; height: 2px"></div> <blockquote class="font13" style="margin-top: 5px;"> 선택한 제품(서비스)와 버전의 관점(Time / Scope / Resource)별 요구사항 현황 <div style="float: right;"> <button class="btn btn-transparent btn-xs" style="margin-top: -3px; color: #acacac; background: rgba(51,51,51,.2); padding: 1px 9px;" onclick="window.open('docs/guide.html#requirement_regist_inquiry')"> Help <i class="fa fa-question" style="font-size: 14px; vertical-align: middle; color: #acacac"></i> </button> </div> </blockquote> <div class="row"> <div class="col-md-3 color-legend-widget"> <section class="widget"> <header style="margin-bottom: 15px"> <h4> <span class="font13" style="font-weight: bold"> <i class="fa fa-asterisk"></i> 제품(서비스) - 버전 선택 </span> </h4> </header> <div class="body"> <div class="column"> <span>1. Product<sup>service</sup> 를 선택해 주세요</span> <div class="control-group" class="darkBack" style="padding-top: 10px; padding-bottom: 10px; border: 0"> <div class="controls form-group" class="darkBack" style="margin-bottom: 5px !important"> <select id="selected_pdService" required="required" data-placeholder="Select Product(Service)" class="select-block-level chzn-select darkBack" tabindex="-1" name="selected_pdService" style="width: 100% !important"> <option value=""></option> </select> </div> </div> <span>2. Product<sup>service</sup>의 버전을 선택해 주세요</span> <div class="control-group" style="padding-top: 10px; padding-bottom: 10px; border: 0"> <div class="controls form-group" style="margin-bottom: 5px !important"> <select multiple="multiple" id="multiversion" class="multiple-select btn-block darkBack" placeholder=" Select Version"> </select> </div> </div> </div> </div> </section> </div> <div class="col-md-3 color-legend-widget"> <section class="widget"> <header style="margin-bottom: 15px"> <h4> <span class="font13" style="font-weight: bold"> <i class="fa fa-clock-o"></i> Time ( 작업 일정 ) </span> </h4> </header> <div class="body"> <div class="control-group" class="darkBack" style="padding-bottom: 10px; border: 0"> <div class="controls form-group" class="darkBack" style="margin-bottom: 5px !important; padding-top: 5px !important;"> <span>✔ 총 제품(서비스) 버전 개수 : <a id="version_count" style="font-weight: bold;">n/a</a> 개</span><br> <span>✔ 요구사항이 있는 제품(서비스) 버전 개수 : <a id="active_version_count" style="font-weight: bold;">n/a</a> 개</span><br> </div> <div class="control-group" class="darkBack" style="padding-bottom: 10px; border: 0"> <div class="controls form-group darkBack" id="version_progress_status" style="margin-bottom: 5px !important;"> </div> </div> </div> <ul class="color-labels"> <div id="light"> <span class="active" id="red"></span> <span id="orange"></span> <span id="green"></span> </div> <button class="btn btn-primary btn-block btn-sm hidden">Switch Light</button> </ul> </div> </section> </div> <div class="col-md-3 color-legend-widget"> <section class="widget"> <header style="margin-bottom: 15px"> <h4> <span class="font13" style="font-weight: bold"> <i class="fa fa-calendar-o"></i> Scope ( 요구사항 및 연결이슈 수 ) </span> </h4> </header> <div class="body"> <div class="control-group" class="darkBack" style="padding-bottom: 10px; border: 0"> <div class="controls form-group" class="darkBack" style="margin-bottom: 5px !important; padding-top: 5px !important;"> <span>✔ 총 제품(서비스) 요구사항 개수 : <a id="req_count" style="font-weight: bold;">n/a</a> 개</span><br> <span>✔ 요구사항 연결이슈 및 하위이슈 개수: <a id="linkedIssue_subtask_count" style="font-weight: bold;">n/a</a> 개</span><br> <span>✔ 요구사항 별 연결된 평균 이슈 개수: <a id="linkedIssue_subtask_count" style="font-weight: bold;">n/a</a> 개</span><br> <span>✔ 요구사항 별 연결된 평균 처리일: <a id="linkedIssue_subtask_count" style="font-weight: bold;">n/a</a> 개</span><br> </div> <div class="control-group" class="darkBack" style="padding-bottom: 10px; border: 0"> <div class="controls form-group darkBack" id="scope_progress_status" style="margin-bottom: 5px !important;"> </div> </div> </div> </div> </section> </div> <div class="col-md-3 color-legend-widget"> <section class="widget"> <header style="margin-bottom: 15px"> <h4> <span class="font13" style="font-weight: bold"> <i class="fa fa-dollar"></i> Resource ( 자원분배 ) </span> </h4> </header> <div class="body"> <div class="control-group" class="darkBack" style="padding-bottom: 10px; border: 0"> <div class="controls form-group" class="darkBack" style="margin-bottom: 5px !important; padding-top: 5px !important;"> <span>✔ 제품(서비스)에 투입된 총 인원 : <a id="resource_count" style="font-weight: bold;">n/a</a> 개</span><br> <span>✔ 버전별 인원 평균: <a id="resource_per_version" style="font-weight: bold;">n/a</a> 개</span><br> <span>✔ 투입 인원 월평균 요구사항 수: <a id="avg_req_count" style="font-weight: bold;">n/a</a> 개</span><br> <span>✔ 투입 인원 월평균 요구사항 처리 수: <a id="avg_req_resolve_or_close_count" style="font-weight: bold;">n/a</a> 개</span><br> <span>✔ 투입 인원 월평균 요구사항 연결 이슈 수: <a id="avg_req_linkedIssue_subtask_count" style="font-weight: bold;">n/a</a> 개</span><br> <span>✔ 투입 인원 월평균 요구사항 연결 이슈 처리 수: <a id="avg_req_linkedIssue_resolve_or_close_count" style="font-weight: bold;">n/a</a> 개</span><br> </div> <div class="control-group" class="darkBack" style="padding-bottom: 10px; border: 0"> <div class="controls form-group darkBack" id="scope_progress_status" style="margin-bottom: 5px !important;"> </div> </div> </div> </div> </section> </div> </div> </div> </section> </div> </div> <div class="row"> <div class="card card-widget widget-user"> <div class="row"> <div class="widget-user-header text-white"> <div class="col-lg-6 col-layer"> <section class="widget"> <header> <h4> <span class="font13" style="font-weight: bold"> <i class="fa fa-sort-amount-asc"></i> 제품(서비스) 버전별 진행 현황 </span> </h4> <div class="widget-controls"> <a data-widgster="toleft" title="change width to left" href="#"> <i class="glyphicon glyphicon-chevron-left"></i> </a> <a data-widgster="expand" title="Expand" href="#"> <i class="glyphicon glyphicon-chevron-up"></i> </a> <a data-widgster="collapse" title="Collapse" href="#"> <i class="glyphicon glyphicon-chevron-down"></i> </a> <a data-widgster="toright" title="change width to right" href="#"> <i class="glyphicon glyphicon-chevron-right"></i> </a> <a data-widgster="restore" title="Restore" href="#"> <span class="glyphicon glyphicon-repeat"></span> </a> <a data-widgster="fullscreen" title="Fullscreen" href="#"> <i class="glyphicon glyphicon-fullscreen" style="font-size: 11px"> </i> </a> </div> </header> <div class="body"> <div class="gradient_middle_border" style="width: 100%; height: 2px"></div> <!-- <blockquote class="font13" style="margin-top: 5px;"> 프로덕트의 요구사항 해결 추이 <div style="float: right;"> <button class="btn btn-transparent btn-xs" style="margin-top: -3px; color: #acacac; background: rgba(51,51,51,.2); padding: 1px 9px;" onclick="window.open('docs/guide.html#requirement_regist_inquiry')"> Help <i class="fa fa-question" style="font-size: 14px; vertical-align: middle; color: #acacac"></i> </button> </div> </blockquote>--> <div class="row"> <div class="col-lg-4 col-layer" style="padding-right: 4px !important;"> <section class="widget large"> <header> <h4> <span class="font13" style="font-weight: bold"> <i class="fa fa-tasks"></i> 버전별 기한 중 현 시점 </span> </h4> </header> <div class="body" id="project-progress-wrapper"> <div style="display: flex; flex-direction: row; height: 42%; justify-content: space-between"> <div id="project-start" class="box col-md-6 fade-in-box" style="width: 47%; position: relative; display: none"> <span>시작일로부터</span> <br /> <span class="project-date" id="fastestStartDate"></span> <div class="day-progress" id="startDDay"></div> </div> <div id="project-end" class="box col-sm-6 fade-in-box" style="width: 47%; position: relative; display: none"> <span>종료일까지</span> <br /> <span class="project-date" id="latestEndDate"></span> <div class="day-progress" id="endDDay"></div> </div> <div class="box" id="notifyNoVersion" style="width: 100%; text-align: center; color: #e49400"> 현재 선택된 제품이 없습니다. </div> </div> <div id="versionGaugeChart"></div> </div> </section> </div> <div class="col-lg-8" style="padding-left: 0px !important;"> <section class="widget large"> <header> <h4> <span class="font13" style="font-weight: bold"> <i class="fa fa-tasks"></i> 제품(서비스) 버전별 타임라인 </span> </h4> </header> <div class="body" id="version-timeline-wrapper"> <div class="box" id="notifyNoVersion2" style="width: 100%; text-align: center; color: #e49400"> 현재 선택된 제품이 없습니다. </div> <div id="version-timeline-bar" class="time_element"></div> </div> </section> </div> </div> </div> </section> </div> <div class="col-lg-6 col-layer"> <section class="widget"> <header> <h4> <span class="font13" style="font-weight: bold"> <i class="fa fa-sort-amount-asc"></i> 프로덕트의 요구사항 해결 추이 </span> </h4> <div class="widget-controls"> <a data-widgster="toleft" title="change width to left" href="#"> <i class="glyphicon glyphicon-chevron-left"></i> </a> <a data-widgster="expand" title="Expand" href="#"> <i class="glyphicon glyphicon-chevron-up"></i> </a> <a data-widgster="collapse" title="Collapse" href="#"> <i class="glyphicon glyphicon-chevron-down"></i> </a> <a data-widgster="toright" title="change width to right" href="#"> <i class="glyphicon glyphicon-chevron-right"></i> </a> <a data-widgster="restore" title="Restore" href="#"> <span class="glyphicon glyphicon-repeat"></span> </a> <a data-widgster="fullscreen" title="Fullscreen" href="#"> <i class="glyphicon glyphicon-fullscreen" style="font-size: 11px"> </i> </a> </div> </header> <div class="body"> <!-- <div class="gradient_middle_border" style="width: 100%; height: 2px"></div>--> <!-- <blockquote class="font13"--> <!-- style="margin-top: 5px;">--> <!-- 프로덕트의 요구사항 해결 추이--> <!-- <div style="float: right;">--> <!-- <button class="btn btn-transparent btn-xs"--> <!-- style="margin-top: -3px; color: #acacac; background: rgba(51,51,51,.2); padding: 1px 9px;"--> <!-- onclick="window.open('docs/guide.html#requirement_regist_inquiry')">--> <!-- Help--> <!-- <i class="fa fa-question"--> <!-- style="font-size: 14px; vertical-align: middle; color: #acacac"></i>--> <!-- </button>--> <!-- </div>--> <!-- </blockquote>--> <div class="row"> <div class="col-md-6 col-layer"> <section class="widget"> <header> <h4> <span class="font13" style="font-weight: bold"> <i class="fa fa-tasks"></i> 제품별 버전 및 작업자 </span> </h4> </header> <div class="body" id="chart-product-manpower" style="height: 288px"> </div> </section> </div> <div class="col-md-6 col-layer"> <section class="widget"> <header> <h4> <span class="font13" style="font-weight: bold"> <i class="fa fa-tasks"></i> 작업자별 요구사항 관여 </span> </h4> </header> <div class="body" id="chart-manpower-requirement" style="height: 288px"> </div> </section> </div> </div> </div> </section> </div> </div> </div> <div class="row"> <div class="widget-user-header text-white"> <div class="col-lg-6 col-layer"> <section class="widget"> <header> <h4> <span class="font13" style="font-weight: bold"> <i class="fa fa-sort-amount-asc"></i> Product Overview </span> </h4> <div class="widget-controls"> <a data-widgster="toleft" title="change width to left" href="#"> <i class="glyphicon glyphicon-chevron-left"></i> </a> <a data-widgster="expand" title="Expand" href="#"> <i class="glyphicon glyphicon-chevron-up"></i> </a> <a data-widgster="collapse" title="Collapse" href="#"> <i class="glyphicon glyphicon-chevron-down"></i> </a> <a data-widgster="toright" title="change width to right" href="#"> <i class="glyphicon glyphicon-chevron-right"></i> </a> <a data-widgster="restore" title="Restore" href="#"> <span class="glyphicon glyphicon-repeat"></span> </a> <a data-widgster="fullscreen" title="Fullscreen" href="#"> <i class="glyphicon glyphicon-fullscreen" style="font-size: 11px"> </i> </a> </div> </header> <div class="body"> <div class="row"> <div class="col-lg-4"> <section class="widget large"> <header> <h4><i class="fa fa-pie-chart"></i> 제품의 이슈 상태 현황 </h4> </header> <div class="body" id="donut-chart"></div> </section> </div> <div class="col-lg-8"> <section class="widget large"> <header> <h4><i class="fa fa-bar-chart"></i> 월 별 제품의 요구사항 및 이슈 상태 누적 현황 </h4> </header> <div class="body" id="combination-chart"></div> </section> </div> </div> </div> </section> </div> <div class="col-lg-6 col-layer"> <section class="widget"> <header> <h4> <span class="font13" style="font-weight: bold"> <i class="fa fa-sort-amount-asc"></i> Product Overview </span> </h4> <div class="widget-controls"> <a data-widgster="toleft" title="change width to left" href="#"> <i class="glyphicon glyphicon-chevron-left"></i> </a> <a data-widgster="expand" title="Expand" href="#"> <i class="glyphicon glyphicon-chevron-up"></i> </a> <a data-widgster="collapse" title="Collapse" href="#"> <i class="glyphicon glyphicon-chevron-down"></i> </a> <a data-widgster="toright" title="change width to right" href="#"> <i class="glyphicon glyphicon-chevron-right"></i> </a> <a data-widgster="restore" title="Restore" href="#"> <span class="glyphicon glyphicon-repeat"></span> </a> <a data-widgster="fullscreen" title="Fullscreen" href="#"> <i class="glyphicon glyphicon-fullscreen" style="font-size: 11px"> </i> </a> </div> </header> <div class="body"> <div class="row"> <div class="col-lg-4"> <section class="widget large"> <header> <h4><i class="fa fa-pie-chart"></i> 투입 인력별 퍼포먼스 </h4> </header> <div class="body" id="polar_bar"></div> </section> </div> <div class="col-lg-8"> <section class="widget large"> <header> <h4><i class="fa fa-bar-chart"></i> 월 별 제품의 요구사항 및 이슈 상태 누적 현황 </h4> </header> <div class="body" id="combination-chart2"></div> </section> </div> </div> </div> </section> </div> </div> </div> <div class="widget-user-image"> <img src="./img/index/str.png" alt="User Avatar"> </div> </div> </div> <style> .card-widget { border: 0; position: relative; } .card { margin-bottom: 1rem; } .card { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; min-width: 0; word-wrap: break-word; background-clip: border-box; border: 0 solid rgba(0,0,0,.125); border-radius: 0.25rem; } .widget-user .widget-user-image>img { height: auto; width: 200px; } .widget-user .widget-user-image { left: 50%; margin-left: -100px; position: absolute; top: 150px; } .widget-user .widget-user-header { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; height: 135px; padding: 1rem; text-align: center; } .img-circle { border-radius: 50%; } img { vertical-align: middle; border-style: none; } /*! Light */ #light { background-color: #000; box-shadow: 0 0 5px rgba(0,0,0, .8); overflow: hidden; padding: 0 0 4px; width: 40px; margin-left: 30px; transform:rotate(270deg); } #light span { border-radius: 50px; display: block; height: 30px; margin: 4px auto 0; opacity: .5; width: 30px; } /*! Light colours */ #red { background-color: red; } #orange { background-color: orange; } #green { background-color: green; } /*! Active states */ #light span.active { opacity: 1; } #light #red.active { box-shadow: 0 0 10px red; } #light #orange.active { box-shadow: 0 0 10px orange; } #light #green.active { box-shadow: 0 0 10px green; } /*! Toggle button */ button { margin-top: 10px; } .project-date { font-size: 10px; color: #a4c6ff; } .day-progress { position: absolute; top: 85%; left: 50%; translate: -50% -50%; font-size: 12px; font-weight: bold; } .timeline:before { left: 0px !important; } .time_element { overflow-x: scroll; white-space:nowrap; } .node rect { fill-opacity: 0.9; shape-rendering: crispEdges; } .node text { pointer-events: none; text-shadow: 0 1px 0 #fff; } .link { fill: none; stroke: #000; stroke-opacity: 0.2; } .link:hover { stroke-opacity: 0.5; } </style>