|
@@ -20,11 +20,10 @@
|
|
|
<div class="col-sm-6 col-md-3">
|
|
|
<div class="card bg-primary">
|
|
|
<div class="card-body clearfix">
|
|
|
- <div class="pull-right">
|
|
|
- <p class="h6 text-white m-t-0">今年产量</p>
|
|
|
- <p class="h3 text-white m-b-0 fa-1-5x">102,125.00</p>
|
|
|
+ <div class="pull-right" id="day">
|
|
|
+
|
|
|
</div>
|
|
|
- <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-currency-cny fa-1-5x"></i></span> </div>
|
|
|
+ <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><img src="images/dayCount.png"/></span> </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -32,11 +31,10 @@
|
|
|
<div class="col-sm-6 col-md-3">
|
|
|
<div class="card bg-danger">
|
|
|
<div class="card-body clearfix">
|
|
|
- <div class="pull-right">
|
|
|
- <p class="h6 text-white m-t-0">当月产量</p>
|
|
|
- <p class="h3 text-white m-b-0 fa-1-5x">920,000</p>
|
|
|
+ <div class="pull-right" id="month">
|
|
|
+
|
|
|
</div>
|
|
|
- <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-account fa-1-5x"></i></span> </div>
|
|
|
+ <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><img src="images/monthCount.png"/></span> </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -44,11 +42,10 @@
|
|
|
<div class="col-sm-6 col-md-3">
|
|
|
<div class="card bg-success">
|
|
|
<div class="card-body clearfix">
|
|
|
- <div class="pull-right">
|
|
|
- <p class="h6 text-white m-t-0">当日产量</p>
|
|
|
- <p class="h3 text-white m-b-0 fa-1-5x">34,005,000</p>
|
|
|
+ <div class="pull-right" id="year">
|
|
|
+
|
|
|
</div>
|
|
|
- <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-arrow-down-bold fa-1-5x"></i></span> </div>
|
|
|
+ <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><img src="images/yearCount.png"/></span> </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -56,11 +53,10 @@
|
|
|
<div class="col-sm-6 col-md-3">
|
|
|
<div class="card bg-purple">
|
|
|
<div class="card-body clearfix">
|
|
|
- <div class="pull-right">
|
|
|
- <p class="h6 text-white m-t-0">当月新增订单量</p>
|
|
|
- <p class="h3 text-white m-b-0 fa-1-5x">153 </p>
|
|
|
+ <div class="pull-right" id="sales">
|
|
|
+
|
|
|
</div>
|
|
|
- <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-comment-outline fa-1-5x"></i></span> </div>
|
|
|
+ <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><img src="images/yearSales.png"></span> </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -71,7 +67,7 @@
|
|
|
<div class="col-md-6">
|
|
|
<div class="card">
|
|
|
<div class="card-header">
|
|
|
- <h4>周产量</h4>
|
|
|
+ <h4>月度产量</h4>
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
<canvas class="js-chartjs-bars"></canvas>
|
|
@@ -105,110 +101,15 @@
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>#</th>
|
|
|
- <th>生产令名称</th>
|
|
|
+ <th>生产令编号</th>
|
|
|
<th>开始日期</th>
|
|
|
<th>截止日期</th>
|
|
|
<th>状态</th>
|
|
|
<th>进度</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
- <tbody>
|
|
|
- <tr>
|
|
|
- <td>1</td>
|
|
|
- <td>生产令1</td>
|
|
|
- <td>10/02/2019</td>
|
|
|
- <td>12/05/2019</td>
|
|
|
- <td><span class="label label-warning">待定</span></td>
|
|
|
- <td>
|
|
|
- <div class="progress progress-striped progress-sm">
|
|
|
- <div class="progress-bar progress-bar-warning" style="width: 45%;"></div>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>2</td>
|
|
|
- <td>生产令2</td>
|
|
|
- <td>01/03/2019</td>
|
|
|
- <td>12/04/2019</td>
|
|
|
- <td><span class="label label-success">进行中</span></td>
|
|
|
- <td>
|
|
|
- <div class="progress progress-striped progress-sm">
|
|
|
- <div class="progress-bar progress-bar-success" style="width: 30%;"></div>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>3</td>
|
|
|
- <td>生产令3</td>
|
|
|
- <td>10/10/2019</td>
|
|
|
- <td>12/11/2019</td>
|
|
|
- <td><span class="label label-warning">待定</span></td>
|
|
|
- <td>
|
|
|
- <div class="progress progress-striped progress-sm">
|
|
|
- <div class="progress-bar progress-bar-warning" style="width: 25%;"></div>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>4</td>
|
|
|
- <td>生产令4</td>
|
|
|
- <td>25/01/2019</td>
|
|
|
- <td>09/05/2019</td>
|
|
|
- <td><span class="label label-success">进行中</span></td>
|
|
|
- <td>
|
|
|
- <div class="progress progress-striped progress-sm">
|
|
|
- <div class="progress-bar progress-bar-success" style="width: 55%;"></div>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>5</td>
|
|
|
- <td>生产令5</td>
|
|
|
- <td>10/10/2019</td>
|
|
|
- <td>12/12/2019</td>
|
|
|
- <td><span class="label label-danger">未开始</span></td>
|
|
|
- <td>
|
|
|
- <div class="progress progress-striped progress-sm">
|
|
|
- <div class="progress-bar progress-bar-danger" style="width: 0%;"></div>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>6</td>
|
|
|
- <td>生产令6</td>
|
|
|
- <td>10/01/2019</td>
|
|
|
- <td>29/03/2019</td>
|
|
|
- <td><span class="label label-success">进行中</span></td>
|
|
|
- <td>
|
|
|
- <div class="progress progress-striped progress-sm">
|
|
|
- <div class="progress-bar progress-bar-success" style="width: 75%;"></div>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>7</td>
|
|
|
- <td>生产令7</td>
|
|
|
- <td>25/02/2019</td>
|
|
|
- <td>12/05/2019</td>
|
|
|
- <td><span class="label label-danger">暂停</span></td>
|
|
|
- <td>
|
|
|
- <div class="progress progress-striped progress-sm">
|
|
|
- <div class="progress-bar progress-bar-danger" style="width: 15%;"></div>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>8</td>
|
|
|
- <td>生产令8</td>
|
|
|
- <td>10/02/2019</td>
|
|
|
- <td>01/03/2019</td>
|
|
|
- <td><span class="label label-warning">完成</span></td>
|
|
|
- <td>
|
|
|
- <div class="progress progress-striped progress-sm">
|
|
|
- <div class="progress-bar progress-bar-success" style="width: 100%;"></div>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
+ <tbody id="productionOrder">
|
|
|
+
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
@@ -228,47 +129,122 @@
|
|
|
<script type="text/javascript" src="js/Chart.js"></script>
|
|
|
<script type="text/javascript">
|
|
|
$(document).ready(function(e) {
|
|
|
+ const day = document.querySelector('#day');
|
|
|
+ const month = document.querySelector('#month');
|
|
|
+ const year = document.querySelector('#year');
|
|
|
+ const sales = document.querySelector('#sales');
|
|
|
+ const productionOrder = document.querySelector('#productionOrder');
|
|
|
+
|
|
|
+ init();
|
|
|
+ function init(){
|
|
|
+ all();
|
|
|
+ }
|
|
|
+
|
|
|
+ function all(){
|
|
|
+ $.ajax({
|
|
|
+ url: "/bigScreen/getBusinessData",
|
|
|
+ type: "POST", // 指定请求类型为 POST
|
|
|
+ contentType: "application/json", // 设置请求的内容类型为 JSON
|
|
|
+ dataType: "JSON",
|
|
|
+ success: function (resp) {
|
|
|
+ var data=resp.data;
|
|
|
+ top(data);
|
|
|
+ center(data);
|
|
|
+ button(data);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ function top(data){
|
|
|
+ day.innerHTML=`<p class="h6 text-white m-t-0">日产量</p>
|
|
|
+ <p class="h3 text-white m-b-0 fa-1-5x">${data.dayCount}</p>`;
|
|
|
+ month.innerHTML=`<p class="h6 text-white m-t-0">月产量</p>
|
|
|
+ <p class="h3 text-white m-b-0 fa-1-5x">${data.monthCount}</p>`;
|
|
|
+ year.innerHTML=`<p class="h6 text-white m-t-0">年产量</p>
|
|
|
+ <p class="h3 text-white m-b-0 fa-1-5x">${data.yearCount}</p>`;
|
|
|
+ sales.innerHTML=`<p class="h6 text-white m-t-0">当月新增订单量</p>
|
|
|
+ <p class="h3 text-white m-b-0 fa-1-5x">${data.daySales}</p>`;
|
|
|
+
|
|
|
+ }
|
|
|
+ function center(data){
|
|
|
+
|
|
|
var $dashChartBarsCnt = jQuery( '.js-chartjs-bars' )[0].getContext( '2d' ),
|
|
|
- $dashChartLinesCnt = jQuery( '.js-chartjs-lines' )[0].getContext( '2d' );
|
|
|
+ $dashChartLinesCnt = jQuery( '.js-chartjs-lines' )[0].getContext( '2d' );
|
|
|
|
|
|
var $dashChartBarsData = {
|
|
|
- labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
|
|
- datasets: [
|
|
|
- {
|
|
|
- label: '周产量',
|
|
|
- borderWidth: 1,
|
|
|
- borderColor: 'rgba(0,0,0,0)',
|
|
|
- backgroundColor: 'rgba(51,202,185,0.5)',
|
|
|
- hoverBackgroundColor: "rgba(51,202,185,0.7)",
|
|
|
- hoverBorderColor: "rgba(0,0,0,0)",
|
|
|
- data: [2500, 1500, 1200, 3200, 4800, 3500, 1500]
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
+ labels: data.monthList,
|
|
|
+ datasets: [
|
|
|
+ {
|
|
|
+ label: '月度产量',
|
|
|
+ borderWidth: 1,
|
|
|
+ borderColor: 'rgba(0,0,0,0)',
|
|
|
+ backgroundColor: 'rgba(51,202,185,0.5)',
|
|
|
+ hoverBackgroundColor: "rgba(51,202,185,0.7)",
|
|
|
+ hoverBorderColor: "rgba(0,0,0,0)",
|
|
|
+ data: data.monthInt
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
var $dashChartLinesData = {
|
|
|
- labels: ['2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014'],
|
|
|
- datasets: [
|
|
|
- {
|
|
|
- label: '报废数量',
|
|
|
- data: [20, 25, 40, 30, 45, 40, 55, 40, 48, 40, 42, 50],
|
|
|
- borderColor: '#358ed7',
|
|
|
- backgroundColor: 'rgba(53, 142, 215, 0.175)',
|
|
|
- borderWidth: 1,
|
|
|
- fill: false,
|
|
|
- lineTension: 0.5
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
+ labels: data.monthList,
|
|
|
+ datasets: [
|
|
|
+ {
|
|
|
+ label: '报废数量',
|
|
|
+ data: data.scrapInt,
|
|
|
+ borderColor: '#358ed7',
|
|
|
+ backgroundColor: 'rgba(53, 142, 215, 0.175)',
|
|
|
+ borderWidth: 1,
|
|
|
+ fill: false,
|
|
|
+ lineTension: 0.5
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
|
|
|
new Chart($dashChartBarsCnt, {
|
|
|
- type: 'bar',
|
|
|
- data: $dashChartBarsData
|
|
|
+ type: 'bar',
|
|
|
+ data: $dashChartBarsData
|
|
|
});
|
|
|
|
|
|
var myLineChart = new Chart($dashChartLinesCnt, {
|
|
|
- type: 'line',
|
|
|
- data: $dashChartLinesData,
|
|
|
+ type: 'line',
|
|
|
+ data: $dashChartLinesData,
|
|
|
});
|
|
|
+ }
|
|
|
+
|
|
|
+ function button(data) {
|
|
|
+ button.innerHTML = `<p class="h6 text-white m-t-0">日产量</p>
|
|
|
+ <p class="h3 text-white m-b-0 fa-1-5x">${data.dayCount}</p>`;
|
|
|
+
|
|
|
+ data.productionOrder.forEach(function (order, index) {
|
|
|
+ let status = order.status;
|
|
|
+ let classStatus="";
|
|
|
+ let strStatus="";
|
|
|
+ if(status === "0"){
|
|
|
+ classStatus="warning";
|
|
|
+ strStatus="未开始";
|
|
|
+ }else if(status === "1"){
|
|
|
+ classStatus="success";
|
|
|
+ strStatus="进行中";
|
|
|
+ }else if(status === "2"){
|
|
|
+ classStatus="success";
|
|
|
+ strStatus="完成";
|
|
|
+ }
|
|
|
+ productionOrder.innerHTML += `
|
|
|
+ <tr>
|
|
|
+ <td>`+(index+1)+`</td>
|
|
|
+ <td>${order.productionOrderCode}</td>
|
|
|
+ <td>${order.startTime===null?"":order.startTime}</td>
|
|
|
+ <td>${order.endTime===null?"":order.endTime}</td>
|
|
|
+ <td><span class="label label-`+classStatus+`">`+strStatus+`</span></td>
|
|
|
+ <td>
|
|
|
+ <div class="progress progress-striped progress-sm">
|
|
|
+ <div class="progress-bar progress-bar-`+classStatus+`" style="width: ${order.width}%;"></div>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>`;
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|