<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5">
<!-- 一个小时刷新一下当前页 -->
<meta http-equiv="refresh" content="3600">
<title>制造管理看板</title>
<link href="/lib/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="/css/dashboard.css" rel="stylesheet" />
<script type="text/javascript" src="/js/service.js"></script>
<script type="text/javascript" src="/js/session.js"></script>
<script type="text/javascript" src="/js/service/method-get-service.js"></script>
<script type="text/javascript" src="/lib/jquery-3.4.1.js"></script>
<script type="text/javascript" src="/lib/jquery-3.4.1.min.js"></script>
</head>
<body id="container" class="container-fluid">
<div class="row no-padding head-bar" style="height:81px">
<div class="col-lg-1 col-md-1">
</div>
<div class="col-lg-4 col-md-4 page-title">
制造管理看板
</div>
<div class="col-lg-4 col-md-4 block-padding">
<button type="button" class="btn btn-warning"
onclick="window.location.replace('/pages/dashboard/warehouse.html');">仓库看板</button>
<button type="button" class="btn btn-warning"
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>
<button type="button" class="btn btn-warning"
onclick="window.location.replace('/pages/dashboard/video1.html');">云看板</button>
</div>
<div class="col-lg-4 col-md-4">
</div>
</div>
<div class="my-container" id="div-main">
<div class="row">
<div class="col-lg-3 col-md-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:290px" 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:290px" 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:290px" id="charts_13"></div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<!--月生产计划-->
<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-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-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-1 col-md-1 center no-padding">实际工时</div>
<div class="col-lg-2 col-md-2 center no-padding">完成进度(已/未)</div>
<!-- <span style="background-color:#5bc0de"> </span> -->
</div>
<div class="row">
<div class="col-lg-12 col-md-12" style="height: 350px;">
<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.define12}}</div>
<div style="overflow:hidden; word-break:break-all;white-space:nowrap" 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 style="overflow:hidden; word-break:break-all;white-space:nowrap" class="col-lg-2 col-md-2 left 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-1 col-md-1 center no-padding">{{product.manHoursInvested}}</div>
<div class="col-lg-2 col-md-2 center no-padding progress">
<span style="z-index:999;position:absolute;">{{product.completePercent}}</span>
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" :style="{width:product.completePercent}">
<!-- {{product.completePercent}} -->
</div>
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" :style="{width:product.incompletePercent}">
<!-- {{product.incompletePercent}} -->
</div>
</div>
</div>
</div>
</div>
<div class="row block-padding">
<div class="col-lg-6 col-md-6">
<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:250px" 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:250px" id="charts_22"></div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<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:250px" 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:250px" id="charts_24"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3" style="height: 100%;">
<div class="row block-padding" >
<div class="col-lg-12 col-md-12 center block-title" >当月生产效率</div>
</div>
<div class="row block-padding" style="height: 33%;min-height: 290px;">
<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" style="height: 33%;min-height: 290px;">
<!-- <div class="col-lg-12 col-md-12" style="height:280px" id="charts_32"></div> -->
<!--月生产计划-->
<div class="col-lg-12 col-md-12">
<!-- <div class="col-lg-3 col-md-3 center no-padding">工单号</div> -->
<div class="col-lg-3 col-md-3 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-3 col-md-3 center no-padding">完工百分比</div>
</div>
<div class="col-lg-12 col-md-12">
<div class="col-lg-12 col-md-12" >
<div class="row" v-for="product in projectScheduleCompletionList">
<!-- <div class="col-lg-3 col-md-3 center no-padding">{{product.productionOrderNumberName}}</div> -->
<div class="col-lg-3 col-md-3 center no-padding" style="overflow:hidden; word-break:break-all;white-space:nowrap">{{product.define12}}</div>
<div class="col-lg-2 col-md-2 center no-padding">{{product.planSum}}</div>
<div class="col-lg-2 col-md-2 center no-padding">{{product.workHour}}</div>
<div class="col-lg-2 col-md-2 center no-padding">{{product.manHoursInvested}}</div>
<div class="col-lg-3 col-md-3 center no-padding progress">
<span style="z-index:999;position:absolute;">{{product.completePercent}}</span>
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" :style="{width:product.completePercent}">
<!-- {{product.completePercent}} -->
</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>
</div>
<div class="row block-padding">
<div class="col-lg-12 col-md-12 center block-title">月度项目发货统计</div>
</div>
<div class="row" style="height: 33%;">
<div class="col-lg-12 col-md-12" style="height:250px" id="charts_33"></div>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="/lib/jquery.min.js"></script>
<script src="/lib/vue.min.js"></script>
<script src="/lib/echarts/echarts.min.js"></script>
<script src="/lib/echarts/theme/macarons.js"></script>
<script src="/js/service/material.js?_v=2"></script>
<script src="/js/service/product.js?_v=2"></script>
<script src="/js/service/person.js?_v=2"></script>
<script src="/js/service/produce-task.js?_v=2"></script>
<script src="/js/service/workhour.js?_v=2"></script>
<script src="/js/content/mycharts.js?_v=2"></script>
<script type="text/javascript">
// 参数说明：beginFun("图表ID"，"list形式数据"，"翻页时间（毫秒）"，"本页面唯一id（不可重复）")
// ChartsService.initBarWithShade("charts_24", ServiceProduct.getWeekInByCategory(),
// ChartsService.getGridSpanSmall());
var initSize = 3;
var pageSize = 3;
var pageIndex = 0;
var pageSizeA = 3;
var pageIndexA = 0;
const weekInBycategoryList = ServiceProduct.getWeekInByCategory();
setTimeout(beginFun("charts_24",weekInBycategoryList,10000,"charts_24"),500);
var pageSizeMonthGoodB = 3;
var pageIndexMonthGoodB = 0;
const monthExceptionByCategory = ServiceProduct.getMonthExceptionByCategory();
// setTimeout(beginFunA("charts_23",monthExceptionByCategory,10000,"charts_23"),500);
setTimeout(beB,500);
function beB(){
var lsitMonth = monthExceptionByCategory.slice(pageIndexMonthGoodB,pageSizeMonthGoodB);
pageIndexMonthGoodB = pageSizeMonthGoodB;
pageSizeMonthGoodB = pageSizeMonthGoodB + initSize;
ChartsService.initBarWithTwoNumberRate("charts_23", lsitMonth,
ChartsService.getGridSpanSmall());
if(monthExceptionByCategory.length <= pageIndexMonthGoodB){
return;
}
setInterval(beginScrollB,10000);
}
function beginScrollB(){
var lsitMonth = monthExceptionByCategory.slice(pageIndexMonthGoodB,pageSizeMonthGoodB);
pageIndexMonthGoodB = pageSizeMonthGoodB;
pageSizeMonthGoodB = pageSizeMonthGoodB + initSize;
if(monthExceptionByCategory.length <= pageIndexMonthGoodB){
pageIndexMonthGoodB = 0;
pageSizeMonthGoodB = initSize;
}
ChartsService.initBarWithTwoNumberRate("charts_23", lsitMonth,
ChartsService.getGridSpanSmall());
}
const monthGoodList = ServiceProduct.getMonthGood();
setTimeout(beA,500);
var pageSizeMonthGood = 3;
var pageIndexMonthGood = 0;
function beA(){
var lsitMonth = monthGoodList.slice(pageIndexMonthGood,pageSizeMonthGood);
pageIndexMonthGood = pageSizeMonthGood;
pageSizeMonthGood = pageSizeMonthGood + initSize;
ChartsService.initBarWithTwoNumberRate("charts_22", lsitMonth,
ChartsService.getGridSpanSmall());
if(monthGoodList.length <= pageIndexMonthGood){
return;
}
setInterval(beginScrollA,10000);
}
function beginScrollA(){
var lsitMonth = monthGoodList.slice(pageIndexMonthGood,pageSizeMonthGood);
pageIndexMonthGood = pageSizeMonthGood;
pageSizeMonthGood = pageSizeMonthGood + initSize;
if(monthGoodList.length <= pageIndexMonthGood){
pageIndexMonthGood = 0;
pageSizeMonthGood = initSize;
}
ChartsService.initBarWithTwoNumberRate("charts_22", lsitMonth,
ChartsService.getGridSpanSmall());
}
var vm = new Vue({
el: '#div-main',
data: {
mouthProduceTaskList: [],
projectScheduleCompletionList:[],
cacheDataObject: {}, // 从服务器加载的全数据，界面只取某几条
timer_long: '', // 定时取服务器数据
timer_short: '' // 数据超长定时轮播
},
methods: {
// 从服务器加载数据并显示
refreshData: function () {
// 关闭定时器
clearInterval(this.timer_short);
// 刷新报表
ChartsService.initCommonPie("charts_11", ServiceProduceTask.getCompleteInfo(), [ '#ff9f7f', '#37a2da']);
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;
const keyPar = dataList.slice(startIndex, startIndex + pagesize);
if(keyPar.length < 1){
continue;
}
this[key] = dataList.slice(startIndex, startIndex + pagesize);
}
}
},
// 从服务器加载数据
loadData: function () {
this.cacheDataObject = {};
// 月度生产计划
const mouthProduceTaskList = ServiceProduceTask.getMonthList();
this.cacheDataObject.mouthProduceTaskList = {
data: mouthProduceTaskList,
pagesize: 9,
pageindex: 0
}
this.mouthProduceTaskList = mouthProduceTaskList.slice(0, this.cacheDataObject
.mouthProduceTaskList.pagesize);
//项目进度完工百分比
const projectScheduleCompletionList = ServiceProduceTask.getProjectScheduleCompletion();
this.cacheDataObject.projectScheduleCompletionList = {
data: projectScheduleCompletionList,
pagesize: 8,
pageindex: 0
}
this.projectScheduleCompletionList = projectScheduleCompletionList.slice(0, this.cacheDataObject
.projectScheduleCompletionList.pagesize);
}
},
mounted() {
this.timer_long = setInterval(this.refreshData, 100000);
this.refreshData();
},
beforeDestroy() {
clearInterval(this.timer_long);
clearInterval(this.timer_short);
}
});
</script>
</body>
</html>