|
@@ -33,8 +33,6 @@
|
|
|
onclick="window.location.replace('/pages/dashboard/line.html');">产线看板</button>
|
|
|
<button type="button" class="btn btn-warning"
|
|
|
onclick="window.location.replace('/pages/dashboard/quality.html');">品质看板</button>
|
|
|
- <button type="button" class="btn btn-warning"
|
|
|
- onclick="window.location.replace('/pages/dashboard/esop.html');">E-SOP</button>
|
|
|
</div>
|
|
|
<div class="col-lg-4 col-md-4">
|
|
|
</div>
|
|
@@ -47,21 +45,21 @@
|
|
|
<div class="col-lg-12 col-md-12 center block-title">生产计划达成率</div>
|
|
|
</div>
|
|
|
<div class="row block-padding">
|
|
|
- <div class="col-lg-12 col-md-12" style="height:250px" id="charts_11"></div>
|
|
|
+ <div class="col-lg-12 col-md-12" style="height:280px" id="charts_11"></div>
|
|
|
</div>
|
|
|
<!--月工时分布情况-->
|
|
|
<div class="row block-padding">
|
|
|
<div class="col-lg-12 col-md-12 center block-title">月工时分布情况</div>
|
|
|
</div>
|
|
|
<div class="row block-padding">
|
|
|
- <div class="col-lg-12 col-md-12" style="height:250px" id="charts_12"></div>
|
|
|
+ <div class="col-lg-12 col-md-12" style="height:280px" id="charts_12"></div>
|
|
|
</div>
|
|
|
<!--月质量异常分类 -->
|
|
|
<div class="row block-padding">
|
|
|
<div class="col-lg-12 col-md-12 center block-title">月质量异常分类</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
- <div class="col-lg-12 col-md-12" style="height:250px" id="charts_13"></div>
|
|
|
+ <div class="col-lg-12 col-md-12" style="height:280px" id="charts_13"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-6 col-md-6">
|
|
@@ -71,28 +69,34 @@
|
|
|
</div>
|
|
|
<div class="row block-padding">
|
|
|
<div class="col-lg-1 col-md-1 center no-padding">工单号</div>
|
|
|
- <div class="col-lg-2 col-md-2 center no-padding">料号</div>
|
|
|
+ <div class="col-lg-2 col-md-2 center no-padding">项目名</div>
|
|
|
+ <div class="col-lg-1 col-md-1 center no-padding">料号</div>
|
|
|
<div class="col-lg-2 col-md-2 center no-padding">型号规格</div>
|
|
|
<div class="col-lg-2 col-md-2 center no-padding">名称</div>
|
|
|
- <div class="col-lg-2 col-md-2 center no-padding">计划数量</div>
|
|
|
+ <div class="col-lg-1 col-md-1 center no-padding">计划数量</div>
|
|
|
<div class="col-lg-1 col-md-1 center no-padding">工时</div>
|
|
|
<div class="col-lg-2 col-md-2 center no-padding">完成进度(已/未)</div>
|
|
|
</div>
|
|
|
- <div class="row" v-for="product in mouthProduceTaskList">
|
|
|
- <div class="col-lg-1 col-md-1 center no-padding">{{product.orderSheetCode}}</div>
|
|
|
- <div class="col-lg-2 col-md-2 center no-padding">{{product.materialCode}}</div>
|
|
|
- <div class="col-lg-2 col-md-2 center no-padding">{{product.specs}}</div>
|
|
|
- <div class="col-lg-2 col-md-2 center no-padding">{{product.materialName}}</div>
|
|
|
- <div class="col-lg-2 col-md-2 center no-padding">{{product.planSum}}</div>
|
|
|
- <div class="col-lg-1 col-md-1 center no-padding">{{product.workHour}}</div>
|
|
|
- <div class="col-lg-2 col-md-2 center no-padding progress">
|
|
|
- <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60"
|
|
|
- aria-valuemin="0" aria-valuemax="100" :style="{width:product.completePercent}">
|
|
|
- {{product.completeSum}}
|
|
|
- </div>
|
|
|
- <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
|
|
|
- aria-valuemin="0" aria-valuemax="100" :style="{width:product.incompletePercent}">
|
|
|
- {{product.incompleteSum}}
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-lg-12 col-md-12" style="height: 360px;">
|
|
|
+ <div class="row" v-for="product in mouthProduceTaskList">
|
|
|
+ <div class="col-lg-1 col-md-1 center no-padding">{{product.orderSheetCode}}</div>
|
|
|
+ <div class="col-lg-2 col-md-2 center no-padding">{{product.projectName}}</div>
|
|
|
+ <div class="col-lg-1 col-md-1 center no-padding">{{product.materialCode}}</div>
|
|
|
+ <div class="col-lg-2 col-md-2 center no-padding">{{product.specs}}</div>
|
|
|
+ <div class="col-lg-2 col-md-2 center no-padding">{{product.materialName}}</div>
|
|
|
+ <div class="col-lg-1 col-md-1 center no-padding">{{product.planSum}}</div>
|
|
|
+ <div class="col-lg-1 col-md-1 center no-padding">{{product.workHour}}</div>
|
|
|
+ <div class="col-lg-2 col-md-2 center no-padding progress">
|
|
|
+ <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60"
|
|
|
+ aria-valuemin="0" aria-valuemax="100" :style="{width:product.completePercent}">
|
|
|
+ {{product.completeSum}}
|
|
|
+ </div>
|
|
|
+ <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
|
|
|
+ aria-valuemin="0" aria-valuemax="100" :style="{width:product.incompletePercent}">
|
|
|
+ {{product.incompleteSum}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -102,13 +106,13 @@
|
|
|
<div class="col-lg-12 col-md-12 center block-title">人员出勤率</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
- <div class="col-lg-12 col-md-2" style="height:200px" id="charts_21"></div>
|
|
|
+ <div class="col-lg-12 col-md-2" style="height:240px" id="charts_21"></div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-12 col-md-12 center block-title">当月产品良率</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
- <div class="col-lg-12 col-md-2" style="height:200px" id="charts_22"></div>
|
|
|
+ <div class="col-lg-12 col-md-2" style="height:240px" id="charts_22"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-6 col-md-6">
|
|
@@ -116,36 +120,36 @@
|
|
|
<div class="col-lg-12 col-md-12 center block-title">月制程质量异常</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
- <div class="col-lg-12 col-md-2" style="height:200px" id="charts_23"></div>
|
|
|
+ <div class="col-lg-12 col-md-2" style="height:240px" id="charts_23"></div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-12 col-md-12 center block-title">周成品入库数量</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
- <div class="col-lg-12 col-md-2" style="height:200px" id="charts_24"></div>
|
|
|
+ <div class="col-lg-12 col-md-2" style="height:240px" id="charts_24"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-3">
|
|
|
<div class="row block-padding">
|
|
|
- <div class="col-lg-12 col-md-12 center block-title">生产效率</div>
|
|
|
- </div>
|
|
|
- <div class="row block-padding">
|
|
|
- <div class="col-lg-12 col-md-12" style="height:250px" id="charts_31"></div>
|
|
|
- </div>
|
|
|
- <div class="row block-padding">
|
|
|
- <div class="col-lg-12 col-md-12 center block-title">标准工时与实际工时对比</div>
|
|
|
- </div>
|
|
|
- <div class="row block-padding">
|
|
|
- <div class="col-lg-12 col-md-12" style="height:250px" id="charts_32"></div>
|
|
|
- </div>
|
|
|
- <div class="row block-padding">
|
|
|
- <div class="col-lg-12 col-md-12 center block-title">月度项目发货统计</div>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <div class="col-lg-12 col-md-12" style="height:250px" id="charts_33"></div>
|
|
|
- </div>
|
|
|
+ <div class="col-lg-12 col-md-12 center block-title">生产效率</div>
|
|
|
+ </div>
|
|
|
+ <div class="row block-padding">
|
|
|
+ <div class="col-lg-12 col-md-12" style="height:260px" id="charts_31"></div>
|
|
|
+ </div>
|
|
|
+ <div class="row block-padding">
|
|
|
+ <div class="col-lg-12 col-md-12 center block-title">标准工时与实际工时对比</div>
|
|
|
+ </div>
|
|
|
+ <div class="row block-padding">
|
|
|
+ <div class="col-lg-12 col-md-12" style="height:260px" id="charts_32"></div>
|
|
|
+ </div>
|
|
|
+ <div class="row block-padding">
|
|
|
+ <div class="col-lg-12 col-md-12 center block-title">月度项目发货统计</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-lg-12 col-md-12" style="height:260px" id="charts_33"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -162,43 +166,92 @@
|
|
|
<script src="/js/service/workhour.js"></script>
|
|
|
<script src="/js/content/mycharts.js"></script>
|
|
|
<script type="text/javascript">
|
|
|
- // 月度生产计划
|
|
|
- const mouthProduceTaskList = ServiceProduceTask.getMonthList();
|
|
|
-
|
|
|
-
|
|
|
var vm = new Vue({
|
|
|
el: '#div-main',
|
|
|
data: {
|
|
|
- mouthProduceTaskList: mouthProduceTaskList
|
|
|
+ mouthProduceTaskList: [],
|
|
|
+
|
|
|
+
|
|
|
+ cacheDataObject: {}, // 从服务器加载的全数据,界面只取某几条
|
|
|
+
|
|
|
+ timer_long: '', // 定时取服务器数据
|
|
|
+ timer_short: '' // 数据超长定时轮播
|
|
|
},
|
|
|
methods: {
|
|
|
- // 安全库存不足时class
|
|
|
- getMaterialStockNotEnoughClass: function (material) {
|
|
|
- if (material.realStockSum * 1 < material.safeStockSum * 1) {
|
|
|
- return "error-font";
|
|
|
+ // 从服务器加载数据并显示
|
|
|
+ refreshData: function () {
|
|
|
+ // 关闭定时器
|
|
|
+ clearInterval(this.timer_short);
|
|
|
+ // 刷新报表
|
|
|
+ ChartsService.initCommonPie("charts_11", ServiceProduceTask.getCompleteInfo());
|
|
|
+ ChartsService.initCommonPie("charts_12", ServiceWorkhour.getByMaterial());
|
|
|
+ ChartsService.initBarWithShade("charts_13", ServiceProduct
|
|
|
+ .getQualityExceptionByCategory(), ChartsService.getGridSpanSmall());
|
|
|
+
|
|
|
+ ChartsService.initBarWithTwoNumberRate("charts_21", ServicePerson.getMonthAttendance(),
|
|
|
+ ChartsService.getGridSpanSmall());
|
|
|
+ ChartsService.initBarWithTwoNumberRate("charts_22", ServiceProduct.getMonthGood(),
|
|
|
+ ChartsService.getGridSpanSmall());
|
|
|
+ ChartsService.initBarWithShade("charts_23", ServiceProduct
|
|
|
+ .getMonthExceptionByCategory(), ChartsService.getGridSpanSmall());
|
|
|
+ ChartsService.initBarWithShade("charts_24", ServiceProduct.getWeekInByCategory(),
|
|
|
+ ChartsService.getGridSpanSmall());
|
|
|
+
|
|
|
+ ChartsService.initCommonPanel("charts_31", ServiceProduct.getProduceRate());
|
|
|
+ ChartsService.initBarAndLine("charts_32", ServiceWorkhour.getStandAndRealByMaterial());
|
|
|
+ ChartsService.initBarWithShade("charts_33", ServiceProduct.getMonthSendByProject());
|
|
|
+ this.loadData();
|
|
|
+ // 开启定时器
|
|
|
+ this.timer_short = setInterval(this.scrollData, 5000);
|
|
|
+ },
|
|
|
+ // 轮播数据
|
|
|
+ scrollData: function () {
|
|
|
+ for (var key in this.cacheDataObject) {
|
|
|
+ const dataList = this.cacheDataObject[key].data;
|
|
|
+ const pagesize = this.cacheDataObject[key].pagesize;
|
|
|
+ var pageindex = this.cacheDataObject[key].pageindex + 1;
|
|
|
+
|
|
|
+
|
|
|
+ if (dataList.length > pagesize) {
|
|
|
+ const pagesum = (dataList.length / pagesize).toFixed(0) * 1 + (dataList.length %
|
|
|
+ pagesize > 0 ? 1 : 0);
|
|
|
+ if (pageindex >= pagesum)
|
|
|
+ pageindex = 0;
|
|
|
+ this.cacheDataObject[key].pageindex = pageindex;
|
|
|
+ const startIndex = pageindex * pagesize;
|
|
|
+ const remainSum = dataList.length - startIndex;
|
|
|
+ const recordSum = remainSum >= pagesize ? pagesize : remainSum;
|
|
|
+ this[key] = dataList.slice(startIndex, startIndex + pagesize);
|
|
|
+ }
|
|
|
}
|
|
|
- return "";
|
|
|
+
|
|
|
},
|
|
|
- getOrderSheetStockNotEnoughClass: function (material) {
|
|
|
- if (material.needSum * 1 > material.stockSum * 1) {
|
|
|
- return "error-font";
|
|
|
+ // 从服务器加载数据
|
|
|
+ loadData: function () {
|
|
|
+ this.cacheDataObject = {};
|
|
|
+
|
|
|
+ // 月度生产计划
|
|
|
+ const mouthProduceTaskList = ServiceProduceTask.getMonthList();
|
|
|
+ this.cacheDataObject.mouthProduceTaskList = {
|
|
|
+ data: mouthProduceTaskList,
|
|
|
+ pagesize: 10,
|
|
|
+ pageindex: 0
|
|
|
}
|
|
|
- return "";
|
|
|
+ this.mouthProduceTaskList = mouthProduceTaskList.slice(0, this.cacheDataObject
|
|
|
+ .mouthProduceTaskList.pagesize);
|
|
|
+
|
|
|
}
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.timer_long = setInterval(this.refreshData, 60000);
|
|
|
+ this.refreshData();
|
|
|
+
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ clearInterval(this.timer_long);
|
|
|
+ clearInterval(this.timer_short);
|
|
|
}
|
|
|
});
|
|
|
- ChartsService.initCommonPie("charts_11", ServiceProduceTask.getCompleteInfo());
|
|
|
- ChartsService.initCommonPie("charts_12", ServiceWorkhour.getByMaterial());
|
|
|
- ChartsService.initBarWithShade("charts_13", ServiceProduct.getQualityExceptionByCategory());
|
|
|
-
|
|
|
- ChartsService.initBarWithTwoNumberRate("charts_21", ServicePerson.getMonthAttendance());
|
|
|
- ChartsService.initBarWithTwoNumberRate("charts_22", ServiceProduct.getMonthGood());
|
|
|
- ChartsService.initBarWithShade("charts_23", ServiceProduct.getMonthExceptionByCategory());
|
|
|
- ChartsService.initBarWithShade("charts_24", ServiceProduct.getWeekInByCategory());
|
|
|
-
|
|
|
- ChartsService.initCommonPanel("charts_31", ServiceProduct.getProduceRate());
|
|
|
- ChartsService.initBarAndLine("charts_32", ServiceWorkhour.getStandAndRealByMaterial());
|
|
|
- ChartsService.initBarWithShade("charts_33", ServiceProduct.getMonthSendByProject());
|
|
|
</script>
|
|
|
|
|
|
</body>
|