123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269 |
- <style>
- .trend-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- }
- .trend_echart {
- margin-top: 15px;
- }
- .data-box {
- /*box-shadow: 0 0.125rem 0.3rem rgba(0,0,0,.075);*/
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
- padding: 0 20px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-top: 10px;
- margin-bottom: 20px;
- background: #ffffff;
- }
- .data-box .icon {
- font-size: 20px;
- }
- .data-pie {
- margin-top: 20px;
- background: #ffffff;
- height: 360px;
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
- padding: 20px 20px 0 20px;
- }
- .average-time {
- margin-top: 20px;
- }
- .average-time .progress {
- border-radius: 6px;
- height: 10px;
- margin-bottom: 30px;
- }
- .average-time .progress .progress-bar-info {
- background-color: #00A4FF;
- }
- .average-time-title {
- font-size: 14px;
- color: #999999;
- margin-bottom: 6px;
- display: flex;
- justify-content: space-between;
- }
- .average-time-tis {
- color: #999999;
- display: flex;
- align-items: center;
- justify-content: space-between;
- text-align: justify-all;
- font-size: 14px;
- }
- .average-time-tis-p {
- text-align: center;
- }
- .average-time-strpad {
- display: inline-block;
- width: calc(100% - 60px);
- overflow: hidden;
- white-space: nowrap;
- text-align: center;
- }
- .average-time-h4 {
- margin-bottom: 40px;
- font-weight: bold;
- font-size: 18px;
- color: #666666;
- }
- .panel-top10 {
- margin-top: 20px;
- }
- .panel-top10 .table {
- margin-bottom: 0;
- }
- </style>
- <div class="data-boxs row">
- <div class="col-lg-3 col-xs-6">
- <div class="data-box">
- <div class="inner">
- <h3>{$wo_total}</h3>
- <p>{:__('Total number of work orders')}</p>
- </div>
- <div class="icon">
- <i class="fa fa-commenting-o text-info"></i>
- </div>
- </div>
- </div>
- <div class="col-lg-3 col-xs-6">
- <div class="data-box">
- <div class="inner">
- <h3>{$pending_wo_total}</h3>
- <p>{:__('Communication in progress')}</p>
- </div>
- <div class="icon">
- <i class="fa fa-ellipsis-h text-warning"></i>
- </div>
- </div>
- </div>
- <div class="col-lg-3 col-xs-6">
- <div class="data-box">
- <div class="inner">
- <h3>{$open_wo_total}</h3>
- <p>{:__('Total open bill')}</p>
- </div>
- <div class="icon">
- <i class="fa fa-clock-o text-warning"></i>
- </div>
- </div>
- </div>
- <div class="col-lg-3 col-xs-6">
- <div class="data-box">
- <div class="inner">
- <h3>{$assign_wo_total}</h3>
- <p>{:__('To be assigned')}</p>
- </div>
- <div class="icon">
- <i class="fa fa-question-circle text-red"></i>
- </div>
- </div>
- </div>
- </div>
- <div class="panel panel-default panel-intro">
- <div class="panel-body">
- <div class="trend-header">
- <h4 class="no-margin">{:__('Work order trend')}</h4>
- <div id="datefilter">
- <form action="" role="form" novalidate="novalidate" class="form-inline nice-validator n-default n-bootstrap">
- <a href="javascript:;" class="btn btn-primary btn-refresh"><i class="fa fa-refresh"></i></a>
- <a href="javascript:;" class="btn btn-success btn-filter">{:__('today')}</a>
- <a href="javascript:;" class="btn btn-success btn-filter">{:__('yesterday')}</a>
- <a href="javascript:;" class="btn btn-success btn-filter">{:__('Last 7 days')}</a>
- <a href="javascript:;" class="btn btn-success btn-filter">{:__('Last 30 days')}</a>
- <a href="javascript:;" class="btn btn-success btn-filter">{:__('Last month')}</a>
- <a href="javascript:;" class="btn btn-success btn-filter">{:__('This month')}</a>
- <div class="input-group">
- <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
- <input type="text" class="form-control input-inline datetimerange" placeholder="{:__('Designated date')}"/>
- </div>
- <a href="javascript:;" class="btn btn-info btn-number"><span id="number">0</span> {:__('Work orders')}</a>
- </form>
- </div>
- </div>
- <div class="trend_echart" id="trend_echart" style="height:300px;width:100%;"></div>
- </div>
- </div>
- <div class="data-pies row">
- <div class="col-lg-4 col-xs-12">
- <div class="data-pie">
- <h4 class="average-time-h4">{:__('Overall response time')}</h4>
- <div class="average-time">
- <div class="average-time-title">
- <span>{:__('Average response time')}</span>
- <span>{$average_time.response.value}</span>
- </div>
- <div class="progress">
- <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="{$average_time.response.progress}" aria-valuemax="100" style="width: {$average_time.response.progress}%"></div>
- </div>
- </div>
- <div class="average-time">
- <div class="average-time-title">
- <span>{:__('Average solution time')}</span>
- <span>{$average_time.solution.value}</span>
- </div>
- <div class="progress">
- <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="{$average_time.solution.progress}" aria-valuemax="100" style="width: {$average_time.solution.progress}%;"></div>
- </div>
- </div>
- <div class="average-time">
- <div class="average-time-title">
- <span>{:__('Average first response time')}</span>
- <span>{$average_time.first_response.value}</span>
- </div>
- <div class="progress">
- <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="{$average_time.first_response.progress}" aria-valuemax="100" style="width: {$average_time.first_response.progress}%"></div>
- </div>
- </div>
- <div class="average-time-tis">
- <span><span class="text-black">0</span> <i class="fa fa-caret-left"></i></span>
- <span class="average-time-strpad">{:str_pad('',200,'·')}</span>
- <span><i class="fa fa-caret-right"></i> <span class="text-black">100</span></span>
- </div>
- <p class="average-time-tis-p">hrs</p>
- </div>
- </div>
- <div class="col-lg-4 col-xs-12">
- <div id="pie-solve" class="data-pie"></div>
- </div>
- <div class="col-lg-4 col-xs-12">
- <div id="pie-pleased" class="data-pie"></div>
- </div>
- </div>
- <div class="row">
- <div class="col-lg-4 col-xs-12">
- <div class="panel panel-default panel-intro panel-top10">
- <div class="panel-body">
- <p>{:__('Category work order quantity top 10')}</p>
- <table class="table">
- <tr>
- <th width="60%">{:__('Work order category')}</th>
- <th width="20%" class="text-center">{:__('Number of work orders')}</th>
- <th>{:__('Proportion')}</th>
- </tr>
- {volist name="workorder_category_top10" id="cat" empty="<tr><td colspan='3'>暂时没有数据...</td></tr>"}
- <tr>
- <td>{$cat.name}</td>
- <td class="text-center">{$cat.order_quantity}</td>
- <td>
- <div class="progress">
- <div class="progress-bar progress-bar-success" data-toggle="tooltip" data-title="{$cat.progress}%" style="width: {$cat.progress}%"></div>
- </div>
- </td>
- </tr>
- {/volist}
- </table>
- </div>
- </div>
- </div>
- <div class="col-lg-4 col-xs-12">
- <div class="panel panel-default panel-intro panel-top10">
- <div class="panel-body">
- <p>{:__('Top 10 orders received by engineers')}</p>
- <table class="table">
- <tr>
- <th width="60%">{:__('Engineers')}</th>
- <th class="text-center" width="40%">{:__('Engineers Work order quantity')}</th>
- </tr>
- {volist name="workorder_engineers_top10" id="engineer" empty="<tr><td colspan='2'>暂时没有数据...</td></tr>"}
- <tr>
- <td>{$engineer.title}</td>
- <td class="text-center">{$engineer.work_order_quantity}</td>
- </tr>
- {/volist}
- </table>
- </div>
- </div>
- </div>
- <div class="col-lg-4 col-xs-12">
- <div class="panel panel-default panel-intro panel-top10">
- <div class="panel-body">
- <p>{:__("Top 10 engineers' response speed")}</p>
- <table class="table">
- <tr>
- <th width="70%">{:__('Engineers')}</th>
- <th class="text-center" width="40%">{:__('Avg Response Time')}</th>
- </tr>
- {volist name="avg_response_time_top10" id="response_time" empty="<tr><td colspan='2'>暂时没有数据...</td></tr>"}
- <tr>
- <td>{$response_time.title}</td>
- <td class="text-center">{$response_time.avg_response_time}</td>
- </tr>
- {/volist}
- </table>
- </div>
- </div>
- </div>
- </div>
|