界面调整

css/dashboard.css

@@ -102,7 +102,7 @@ body{
     font-size:16px;
 }
 .task-block-text{
-    line-height: 25px;
+    line-height: 22px;
     color:#3087bc;
     font-size:14px;
 }

js/content/mycharts.js

@@ -5,9 +5,31 @@
  */
 
 var ChartsService = {
+    // 大间隔
+    getGridSpanBig:function(){
+        return {
+            grid:{
+                left:"20%",
+                right:"10%",
+                bottom:"25%",
+                top:"10%"
+            }
+        };
+    },
+    // 小间隔
+    getGridSpanSmall:function(){
+        return {
+            grid:{
+                left:"10%",
+                right:"10%",
+                bottom:"15%",
+                top:"10%"
+            }
+        };
+    },
     // 通用的柱状图
     // divId:待显示的div id, data：json对象
-    initCommonBar: function (divId, data) {
+    initCommonBar: function (divId, data, grid) {
         var myChart = echarts.init(document.getElementById(divId));
         const xDataList = [];
         const yDataList = [];
@@ -93,6 +115,9 @@ var ChartsService = {
             }]
         };
 
+        if (grid != null && grid != undefined){
+            option.grid = grid;
+        }
 
         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
@@ -102,7 +127,7 @@ var ChartsService = {
     },
     // 带阴影柱状图柱状图
     // divId:待显示的div id, data：json对象
-    initBarWithShade: function (divId, data) {
+    initBarWithShade: function (divId, data, grid) {
         var myChart = echarts.init(document.getElementById(divId));
         const xDataList = [];
         const yDataList = [];
@@ -187,7 +212,9 @@ var ChartsService = {
                 },
             }]
         };
-
+        if (grid != null && grid != undefined){
+            option.grid = grid;
+        }
 
         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
@@ -197,7 +224,7 @@ var ChartsService = {
     },
     // 上下两端都有数字的柱状图，算比例
     // divId:待显示的div id, data：json数组,label,sum1:下柱数,sum2:总熟
-    initBarWithTwoNumberRate: function (divId, data) {
+    initBarWithTwoNumberRate: function (divId, data, grid) {
         var myChart = echarts.init(document.getElementById(divId));
         const xDataList = [];
         const yDataList = [];
@@ -288,7 +315,9 @@ var ChartsService = {
             ]
         };
 
-
+        if (grid != null && grid != undefined){
+            option.grid = grid;
+        }
         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
         window.addEventListener("resize", function () {
@@ -297,7 +326,7 @@ var ChartsService = {
     },
     // 折线图，带阴影
     // divId:待显示的div id, data：json对象
-    initLineWithShade: function (divId, data) {
+    initLineWithShade: function (divId, data, grid) {
         var myChart = echarts.init(document.getElementById(divId));
         const xDataList = [];
         const yDataList = [];
@@ -381,7 +410,9 @@ var ChartsService = {
             }]
         };
 
-
+        if (grid != null && grid != undefined){
+            option.grid = grid;
+        }
         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
         window.addEventListener("resize", function () {
@@ -398,7 +429,8 @@ var ChartsService = {
             total += data[val] * 1;
         }
         for (var val in data) {
-            const desc = val + " " + data[val] + " " + (data[val] * 1 / total * 100).toFixed(1) + "%";
+            //const desc = val + " " + data[val] + " " + (data[val] * 1 / total * 100).toFixed(1) + "%";
+            const desc = val + " " + (data[val] * 1 / total * 100).toFixed(1) + "%";
             chartData.push({
                 value: data[val],
                 name: desc
@@ -482,7 +514,7 @@ var ChartsService = {
     },
     // 柱状图和折线图对吧
     // divId:待显示的div id, data：json数组：label-x坐标名称,label1-y1名称，label2-y2名称,sum1-y1数量,sum2-y2数量
-    initBarAndLine: function (divId, data) {
+    initBarAndLine: function (divId, data, grid) {
         var myChart = echarts.init(document.getElementById(divId));
         if (data.length == 0)
             return;
@@ -594,7 +626,9 @@ var ChartsService = {
             ]
         };
 
-
+        if (grid != null && grid != undefined){
+            option.grid = grid;
+        }
         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
         window.addEventListener("resize", function () {

js/service/material.js

@@ -839,11 +839,6 @@ var ServiceMaterial={
         });
         var i = 1;
         $.each(materialList, function(index,item){
-            if (i == 1){
-                item.bg = "selectrow";
-            }else{
-                item.bg = "";
-            }
             item.index = i++;
             item.passRate = ((item.checkSum-item.unpassSum)/item.checkSum*100).toFixed(0)+"%";
 

js/service/produce-task.js

@@ -25,6 +25,7 @@ var ServiceProduceTask = {
     getMonthList: function () {
         const taskList = [];
         taskList.push({
+            projectName: "项目1",
             orderSheetCode: "G10001",
             materialCode: "10001",
             materialName: "物料A",
@@ -34,6 +35,7 @@ var ServiceProduceTask = {
             completeSum: 15
         });
         taskList.push({
+            projectName: "项目1",
             orderSheetCode: "G10002",
             materialCode: "10002",
             materialName: "物料B",
@@ -43,6 +45,7 @@ var ServiceProduceTask = {
             completeSum: 18
         });
         taskList.push({
+            projectName: "项目1",
             orderSheetCode: "G10003",
             materialCode: "10003",
             materialName: "物料C",
@@ -52,6 +55,7 @@ var ServiceProduceTask = {
             completeSum: 60
         });
         taskList.push({
+            projectName: "项目1",
             orderSheetCode: "G10001",
             materialCode: "10001",
             materialName: "物料A",
@@ -61,6 +65,7 @@ var ServiceProduceTask = {
             completeSum: 15
         });
         taskList.push({
+            projectName: "项目1",
             orderSheetCode: "G10002",
             materialCode: "10002",
             materialName: "物料B",
@@ -70,6 +75,7 @@ var ServiceProduceTask = {
             completeSum: 18
         });
         taskList.push({
+            projectName: "项目1",
             orderSheetCode: "G10003",
             materialCode: "10003",
             materialName: "物料C",
@@ -79,6 +85,7 @@ var ServiceProduceTask = {
             completeSum: 60
         });
         taskList.push({
+            projectName: "项目1",
             orderSheetCode: "G10001",
             materialCode: "10001",
             materialName: "物料A",
@@ -88,6 +95,7 @@ var ServiceProduceTask = {
             completeSum: 15
         });
         taskList.push({
+            projectName: "项目1",
             orderSheetCode: "G10002",
             materialCode: "10002",
             materialName: "物料B",
@@ -110,6 +118,7 @@ var ServiceProduceTask = {
     getDayList: function () {
         const taskList = [];
         taskList.push({
+            projectCode:"项目001",
             orderSheetCode: "G10001",
             materialCode: "10001",
             materialName: "物料A",
@@ -119,6 +128,7 @@ var ServiceProduceTask = {
             completeSum: 15
         });
         taskList.push({
+            projectCode:"项目001",
             orderSheetCode: "G10002",
             materialCode: "10002",
             materialName: "物料B",
@@ -128,6 +138,7 @@ var ServiceProduceTask = {
             completeSum: 18
         });
         taskList.push({
+            projectCode:"项目001",
             orderSheetCode: "G10003",
             materialCode: "10003",
             materialName: "物料C",
@@ -137,6 +148,7 @@ var ServiceProduceTask = {
             completeSum: 60
         });
         taskList.push({
+            projectCode:"项目001",
             orderSheetCode: "G10001",
             materialCode: "10001",
             materialName: "物料A",
@@ -146,6 +158,7 @@ var ServiceProduceTask = {
             completeSum: 15
         });
         taskList.push({
+            projectCode:"项目001",
             orderSheetCode: "G10002",
             materialCode: "10002",
             materialName: "物料B",
@@ -155,6 +168,7 @@ var ServiceProduceTask = {
             completeSum: 18
         });
         taskList.push({
+            projectCode:"项目001",
             orderSheetCode: "G10003",
             materialCode: "10003",
             materialName: "物料C",
@@ -164,6 +178,7 @@ var ServiceProduceTask = {
             completeSum: 60
         });
         taskList.push({
+            projectCode:"项目001",
             orderSheetCode: "G10001",
             materialCode: "10001",
             materialName: "物料A",
@@ -173,6 +188,7 @@ var ServiceProduceTask = {
             completeSum: 15
         });
         taskList.push({
+            projectCode:"项目001",
             orderSheetCode: "G10002",
             materialCode: "10002",
             materialName: "物料B",
@@ -182,6 +198,7 @@ var ServiceProduceTask = {
             completeSum: 18
         });
         taskList.push({
+            projectCode:"项目001",
             orderSheetCode: "G10001",
             materialCode: "10001",
             materialName: "物料A",
@@ -191,6 +208,7 @@ var ServiceProduceTask = {
             completeSum: 15
         });
         taskList.push({
+            projectCode:"项目001",
             orderSheetCode: "G10002",
             materialCode: "10002",
             materialName: "物料B",
@@ -200,6 +218,7 @@ var ServiceProduceTask = {
             completeSum: 18
         });
         taskList.push({
+            projectCode:"项目001",
             orderSheetCode: "G10003",
             materialCode: "10003",
             materialName: "物料C",
@@ -228,7 +247,8 @@ var ServiceProduceTask = {
             completeSum: 15,
             projectName:"",
             orderCode:"O0001",
-            planCompleteDate:"2020-10-1"
+            planCompleteDate:"2020-10-1",
+            planStartDate:"2020-10-1"
         });
         taskList.push({
             materialName: "节能灯",
@@ -237,7 +257,8 @@ var ServiceProduceTask = {
             completeSum: 10,
             projectName:"希望小学工程",
             orderCode:"",
-            planCompleteDate:"2020-10-20"
+            planCompleteDate:"2020-10-20",
+            planStartDate:"2020-10-1"
         });
         taskList.push({
             materialName: "节能灯",
@@ -246,7 +267,8 @@ var ServiceProduceTask = {
             completeSum: 40,
             projectName:"",
             orderCode:"O0002",
-            planCompleteDate:"2020-10-20"
+            planCompleteDate:"2020-10-20",
+            planStartDate:"2020-10-1"
         });
         taskList.push({
             materialName: "节能灯",
@@ -255,7 +277,8 @@ var ServiceProduceTask = {
             completeSum: 30,
             projectName:"市政工程",
             orderCode:"",
-            planCompleteDate:"2020-10-20"
+            planCompleteDate:"2020-10-20",
+            planStartDate:"2020-10-1"
         });
         taskList.push({
             materialName: "节能灯",
@@ -264,7 +287,8 @@ var ServiceProduceTask = {
             completeSum: 20,
             projectName:"",
             orderCode:"O0003",
-            planCompleteDate:"2020-10-20"
+            planCompleteDate:"2020-10-20",
+            planStartDate:"2020-10-1"
         });
         taskList.push({
             materialName: "节能灯",
@@ -273,7 +297,8 @@ var ServiceProduceTask = {
             completeSum: 10,
             projectName:"希望小学工程",
             orderCode:"",
-            planCompleteDate:"2020-10-20"
+            planCompleteDate:"2020-10-20",
+            planStartDate:"2020-10-1"
         });
         $.each(taskList, function (index, item) {
             item.incompleteSum = item.planSum - item.completeSum;

js/service/workhour.js

@@ -17,10 +17,10 @@ var ServiceWorkhour={
     // 当天根据物料统计
     getDayByMaterial:function(){
         return {
-            "物料A 20*30":150,
-            "物料B 20*35":250,
-            "物料C 20*35":200,
-            "物料D 20*35":400,
+            "物料A":150,
+            "物料B":250,
+            "物料C":200,
+            "物料D":400,
         };
     },
     // 获取物料的标准工时和实际工时

pages/dashboard/line.html

@@ -33,8 +33,6 @@
                 onclick="window.location.replace('/pages/dashboard/produce.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,7 +45,7 @@
 
                     <div class="col-lg-12  col-md-12 center block-title">班组装人员信息</div>
                 </div>
-                <div class="row">
+                <div class="row" style="height: 150px;">
                     <div class="person-div" v-for="user in userList">
                         <div>
                             <img v-bind:src="user.avatar" border="0" />
@@ -64,19 +62,19 @@
                     <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:200px" id="charts_11"></div>
+                    <div class="col-lg-12 col-md-12" style="height:220px" 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">
-                    <div class="col-lg-12 col-md-2" style="height:200px" id="charts_12"></div>
+                    <div class="col-lg-12 col-md-2" style="height:220px" id="charts_12"></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_13"></div>
+                    <div class="col-lg-12 col-md-2" style="height:220px" id="charts_13"></div>
                 </div>
             </div>
             <div class="col-lg-6">
@@ -93,7 +91,8 @@
                                     <div class="task-block-title-small center" style="padding-top:17px;">已完工总数</div>
                                     <div class="task-block-title-big center">{{task.completeSum}}</div>
                                 </div>
-                                <div class="col-lg-8 col-md-8" style="padding-left: 4px;padding-top: 20px;">
+                                <div class="col-lg-8 col-md-8" style="padding-left: 4px;padding-top: 10px;">
+                                    <div class="task-block-text">预计开工日期：{{task.planStartDate}}</div>
                                     <div class="task-block-text">完工日期：{{task.planCompleteDate}}</div>
                                     <div class="task-block-text">存货：{{task.materialName}}</div>
                                     <div class="task-block-text">规格：{{task.specs}}</div>
@@ -125,20 +124,22 @@
                     <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-1 col-md-1 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-2 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 dayProduceTaskList">
+                    <div class="col-lg-1 col-md-1 center no-padding">{{product.projectCode}}</div>
                     <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-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-2 col-md-2 center no-padding">{{product.planSum}}</div>
+                    <div class="col-lg-2 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"
@@ -163,19 +164,19 @@
                     <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:190px" id="charts_22"></div>
+                    <div class="col-lg-12 col-md-12" style="height:200px" id="charts_22"></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:190px" id="charts_23"></div>
+                    <div class="col-lg-12 col-md-12" style="height:200px" id="charts_23"></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:190px" id="charts_24"></div>
+                    <div class="col-lg-12 col-md-12" style="height:200px" id="charts_24"></div>
                 </div>
             </div>
         </div>
@@ -193,28 +194,101 @@
     <script src="/js/service/produce-task.js"></script>
     <script src="/js/content/mycharts.js"></script>
     <script type="text/javascript">
-        const userList = ServicePerson.getWorkPersonList();
-        // 生产计划
-        const dayProduceTaskList = ServiceProduceTask.getDayList();
-        // 在生产图片
-        const doingTaskList = ServiceProduceTask.getDoingListByOrder();
-
         var vm = new Vue({
             el: '#div-main',
             data: {
-                userList: userList,
-                dayProduceTaskList: dayProduceTaskList,
-                doingTaskList: doingTaskList
+                userList: [],
+                dayProduceTaskList: [],
+                doingTaskList: [],
+
+                cacheDataObject: {}, // 从服务器加载的全数据，界面只取某几条
+
+                timer_long: '', // 定时取服务器数据
+                timer_short: '' // 数据超长定时轮播
+            },
+            methods: {
+                // 从服务器加载数据并显示
+                refreshData: function () {
+                    // 关闭定时器
+                    clearInterval(this.timer_short);
+                    // 刷新报表
+                    ChartsService.initBarAndLine("charts_11", ServiceWorkhour
+                        .getDayStandAndRealByMaterial(), ChartsService.getGridSpanSmall());
+                    ChartsService.initBarWithTwoNumberRate("charts_12", ServiceProduct.getDayGood(), ChartsService.getGridSpanSmall());
+                    ChartsService.initBarWithShade("charts_13", ServiceProduct.getDayExceptionByCategory(), ChartsService.getGridSpanSmall());
+
+                    ChartsService.initCommonPanel("charts_21", ServiceProduct.getDayProduceRate());
+                    ChartsService.initCommonPie("charts_22", ServiceWorkhour.getDayByMaterial());
+                    ChartsService.initCommonPie("charts_23", ServiceProduceTask.getDayCompleteInfo());
+                    ChartsService.initCommonPie("charts_24", ServicePerson.getDayAttendance());
+                    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);
+                        }
+                    }
+
+                },
+                // 从服务器加载数据
+                loadData: function () {
+                    this.cacheDataObject = {};
+
+                    const userList = ServicePerson.getWorkPersonList();
+                    this.cacheDataObject.userList = {
+                        data: userList,
+                        pagesize: 5,
+                        pageindex: 0
+                    }
+                    this.userList = userList.slice(0, this.cacheDataObject.userList.pagesize);
+                    // 生产计划
+                    const dayProduceTaskList = ServiceProduceTask.getDayList();
+                    this.cacheDataObject.dayProduceTaskList = {
+                        data: dayProduceTaskList,
+                        pagesize: 15,
+                        pageindex: 0
+                    }
+                    this.dayProduceTaskList = dayProduceTaskList.slice(0, this.cacheDataObject
+                        .dayProduceTaskList.pagesize);
+                    // 在生产图片
+                    const doingTaskList = ServiceProduceTask.getDoingListByOrder();
+                    this.cacheDataObject.doingTaskList = {
+                        data: doingTaskList,
+                        pagesize: 6,
+                        pageindex: 0
+                    }
+                    this.doingTaskList = doingTaskList.slice(0, this.cacheDataObject.doingTaskList
+                        .pagesize);
+
+                }
+            },
+            mounted() {
+                this.timer_long = setInterval(this.refreshData, 60000);
+                this.refreshData();
+
+            },
+            beforeDestroy() {
+                clearInterval(this.timer_long);
+                clearInterval(this.timer_short);
             }
         });
-        ChartsService.initBarAndLine("charts_11", ServiceWorkhour.getDayStandAndRealByMaterial());
-        ChartsService.initBarWithTwoNumberRate("charts_12", ServiceProduct.getDayGood());
-        ChartsService.initBarWithShade("charts_13", ServiceProduct.getDayExceptionByCategory());
-
-        ChartsService.initCommonPanel("charts_21", ServiceProduct.getDayProduceRate());
-        ChartsService.initCommonPie("charts_22", ServiceWorkhour.getDayByMaterial());
-        ChartsService.initCommonPie("charts_23", ServiceProduceTask.getDayCompleteInfo());
-        ChartsService.initCommonPie("charts_24", ServicePerson.getDayAttendance());
     </script>
 
 </body>

pages/dashboard/produce.html

@@ -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>

pages/dashboard/quality.html

@@ -17,13 +17,15 @@
     <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>
 <script>
-    $(function () {
-        ServiceLoginOperation.Login();
-    })
+    
+    // $(function () {
+    //     ServiceLoginOperation.Login();
+    // })
 </script>
+
 <body id="container" class="container-fluid">
     <div class="row no-padding head-bar" style="height:81px">
         <div class="col-lg-1 col-md-1">
@@ -39,8 +41,6 @@
                 onclick="window.location.replace('/pages/dashboard/produce.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/esop.html');">E-SOP</button>
         </div>
         <div class="col-lg-4 col-md-4">
         </div>
@@ -61,15 +61,19 @@
                     <div class="col-lg-1 col-md-1 center no-padding">到货<br />数量</div>
                     <div class="col-lg-1 col-md-1 center no-padding padding-line">备注</div>
                 </div>
-                <div class="row" v-for="product in willArriveMeterialList">
-                    <div class="col-lg-1 col-md-1 center no-padding">{{product.index}}</div>
-                    <div class="col-lg-2 col-md-2 center no-padding">{{product.arriveDate}}</div>
-                    <div class="col-lg-2 col-md-2 center no-padding">{{product.vendorName}}</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.materialName}}</div>
-                    <div class="col-lg-2 col-md-2 center no-padding">{{product.specs}}</div>
-                    <div class="col-lg-1 col-md-1 center no-padding">{{product.arriveSum}}</div>
-                    <div class="col-lg-1 col-md-1 center no-padding">{{product.memo}}</div>
+                <div class="row">
+                    <div class="col-lg-12 col-md-12" style="height: 120px;">
+                        <div class="row" v-for="product in willArriveMeterialList">
+                            <div class="col-lg-1 col-md-1 center no-padding">{{product.index}}</div>
+                            <div class="col-lg-2 col-md-2 center no-padding">{{product.arriveDate}}</div>
+                            <div class="col-lg-2 col-md-2 center no-padding">{{product.vendorName}}</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.materialName}}</div>
+                            <div class="col-lg-2 col-md-2 center no-padding">{{product.specs}}</div>
+                            <div class="col-lg-1 col-md-1 center no-padding">{{product.arriveSum}}</div>
+                            <div class="col-lg-1 col-md-1 center no-padding">{{product.memo}}</div>
+                        </div>
+                    </div>
                 </div>
                 <div class="row block-padding">
                     <div class="col-lg-12 col-md-12 center block-title">近六个月的月度合格率</div>
@@ -118,15 +122,19 @@
                     <div class="col-lg-1 col-md-1 center no-padding">到货<br />数量</div>
                     <div class="col-lg-1 col-md-1 center no-padding padding-line">备注</div>
                 </div>
-                <div class="row" v-for="product in waitingInList">
-                    <div class="col-lg-1 col-md-1 center no-padding">{{product.index}}</div>
-                    <div class="col-lg-2 col-md-2 center no-padding">{{product.arriveDate}}</div>
-                    <div class="col-lg-2 col-md-2 center no-padding">{{product.vendorName}}</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.materialName}}</div>
-                    <div class="col-lg-2 col-md-2 center no-padding">{{product.specs}}</div>
-                    <div class="col-lg-1 col-md-1 center no-padding">{{product.arriveSum}}</div>
-                    <div class="col-lg-1 col-md-1 center no-padding">{{product.memo}}</div>
+                <div class="row">
+                    <div class="col-lg-12 col-md-12" style="height: 120px;">
+                        <div class="row" v-for="product in waitingInList">
+                            <div class="col-lg-1 col-md-1 center no-padding">{{product.index}}</div>
+                            <div class="col-lg-2 col-md-2 center no-padding">{{product.arriveDate}}</div>
+                            <div class="col-lg-2 col-md-2 center no-padding">{{product.vendorName}}</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.materialName}}</div>
+                            <div class="col-lg-2 col-md-2 center no-padding">{{product.specs}}</div>
+                            <div class="col-lg-1 col-md-1 center no-padding">{{product.arriveSum}}</div>
+                            <div class="col-lg-1 col-md-1 center no-padding">{{product.memo}}</div>
+                        </div>
+                    </div>
                 </div>
                 <div class="row block-padding">
                     <div class="col-lg-12 col-md-12 center block-title">当月供应商合格率实时展示</div>
@@ -178,7 +186,8 @@
             </d>
             <div class="col-md-4 col-lg-4 center">
                 <div class="row">
-                    <div class="col-md-4 col-lg-4 center " style="padding-bottom: 5px;" v-for="showimage in showImageList">
+                    <div class="col-md-4 col-lg-4 center " style="padding-bottom: 5px;"
+                        v-for="showimage in showImageList">
                         <img :src="showimage" border="0" style="width:150px;height:130px;" />
                     </div>
                 </div>
@@ -196,61 +205,146 @@
     <script src="/js/service/product.js"></script>
     <script src="/js/content/mycharts.js"></script>
     <script type="text/javascript">
-        // 未来3天到货
-        const willArriveMeterialList = ServiceMaterial.getWillArriveList(3);
-        // 未入库
-        const waitingInList = ServiceMaterial.getWatingInList();
-        // 当天到货批数
-        const todayArriveSum = ServiceMaterial.getTodayArriveSum();
-        // 未来3天到货
-        const willArriveSum = ServiceMaterial.getWillArriveSum(3);
-        // 当月到货批数
-        const thisMonthArriveSum = ServiceMaterial.getThisMonthArriveSum();
-        // 为入库总批数
-        const notInSum = ServiceMaterial.getNotInSum();
-        // 质量异常
-        const unpassList = ServiceMaterial.getQualityUnpassList();
-
         var vm = new Vue({
             el: '#div-main',
             data: {
-                willArriveMeterialList: willArriveMeterialList,
-                waitingInList: waitingInList,
-                todayArriveSum: todayArriveSum,
-                willArriveSum: willArriveSum,
-                thisMonthArriveSum: thisMonthArriveSum,
-                notInSum: notInSum,
-                unpassList: unpassList,
-                showImageList: unpassList[0].images,
-                timer: ''
+                willArriveMeterialList: [],
+                waitingInList: [],
+                todayArriveSum: 0,
+                willArriveSum: 0,
+                thisMonthArriveSum: 0,
+                notInSum: 0,
+                unpassList: [],
+                showImageList: [],
+
+                timer_quality: '',
+
+                cacheDataObject: {}, // 从服务器加载的全数据，界面只取某几条
+
+                timer_long: '', // 定时取服务器数据
+                timer_short: '' // 数据超长定时轮播
             },
             methods: {
-                execute: function () {
+                // 质量异常滚动
+                scrollQuality: function () {
                     var i = 0
                     for (; i < this.unpassList.length; i++) {
                         if (this.unpassList[i].bg == "selectrow")
                             break;
                     }
-                    this.unpassList[i].bg = "";
-                    if (i == this.unpassList.length - 1)
+                    // 未找到，找第一条
+                    if (i >= this.unpassList.length) {
                         i = 0;
-                    else
-                        i++;
+                    } else {
+                        this.unpassList[i].bg = "";
+                        if (i == this.unpassList.length - 1)
+                            i = 0;
+                        else
+                            i++;
+                    }
                     this.unpassList[i].bg = "selectrow";
                     this.showImageList = this.unpassList[i].images;
+                },
+
+                // 从服务器加载数据并显示
+                refreshData: function () {
+                    // 关闭定时器
+                    clearInterval(this.timer_short);
+                    // 关闭质量异常定时器
+                    clearInterval(this.timer_quality);
+                    // 刷新报表
+                    ChartsService.initBarAndLine("charts_11", ServiceMaterial
+                        .getLastSixMonthQualityTargetCompare(), ChartsService.getGridSpanSmall());
+                    ChartsService.initBarWithShade("charts_31", ServiceMaterial.getPassRateByVendor(),
+                        ChartsService.getGridSpanSmall());
+                    ChartsService.initBarWithShade("charts_21", ServiceMaterial.getCheckRateByBatchno(),
+                        ChartsService.getGridSpanSmall());
+                    this.loadData();
+                    // 开启定时器
+                    this.timer_short = setInterval(this.scrollData, 30000);
+
+                    this.scrollQuality();
+                    this.timer_quality = setInterval(this.scrollQuality, 4000);
+                },
+                // 轮播数据
+                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);
+                        }
+                    }
+
+                    
+
+                },
+                // 从服务器加载数据
+                loadData: function () {
+                    this.cacheDataObject = {};
+
+                    // 未来3天到货
+                    const willArriveMeterialList = ServiceMaterial.getWillArriveList(3);
+                    this.cacheDataObject.willArriveMeterialList = {
+                        data: willArriveMeterialList,
+                        pagesize: 6,
+                        pageindex: 0
+                    }
+                    this.willArriveMeterialList = willArriveMeterialList.slice(0, this.cacheDataObject
+                        .willArriveMeterialList.pagesize);
+                    // 未入库
+                    const waitingInList = ServiceMaterial.getWatingInList();
+                    this.cacheDataObject.waitingInList = {
+                        data: waitingInList,
+                        pagesize: 6,
+                        pageindex: 0
+                    }
+                    this.waitingInList = waitingInList.slice(0, this.cacheDataObject
+                        .waitingInList.pagesize);
+                    // 当天到货批数
+                    this.todayArriveSum = ServiceMaterial.getTodayArriveSum();
+                    // 未来3天到货
+                    this.willArriveSum = ServiceMaterial.getWillArriveSum(3);
+                    // 当月到货批数
+                    this.thisMonthArriveSum = ServiceMaterial.getThisMonthArriveSum();
+                    // 为入库总批数
+                    this.notInSum = ServiceMaterial.getNotInSum();
+                    // 质量异常
+                    const unpassList = ServiceMaterial.getQualityUnpassList();
+                    this.cacheDataObject.unpassList = {
+                        data: unpassList,
+                        pagesize: 15,
+                        pageindex: 0
+                    }
+                    this.unpassList = unpassList.slice(0, this.cacheDataObject
+                        .unpassList.pagesize);
+
                 }
             },
             mounted() {
-                this.timer = setInterval(this.execute, 5000);
+                this.timer_long = setInterval(this.refreshData, 600000);
+                this.refreshData();
+
             },
             beforeDestroy() {
-                clearInterval(this.timer);
+                clearInterval(this.timer_quality);
+                clearInterval(this.timer_long);
+                clearInterval(this.timer_short);
             }
         });
-
-        ChartsService.initBarAndLine("charts_11", ServiceMaterial.getLastSixMonthQualityTargetCompare());
-        ChartsService.initBarWithShade("charts_31", ServiceMaterial.getPassRateByVendor());
-        ChartsService.initBarWithShade("charts_21", ServiceMaterial.getCheckRateByBatchno());
     </script>
 
 </body>

pages/dashboard/warehouse.html

@@ -218,19 +218,21 @@
                         </div>
                         <div class="row block-padding">
                             <div class="col-lg-2 col-md-2 center no-padding">物料号</div>
-                            <div class="col-lg-4 col-md-4 center no-padding">名称</div>
-                            <div class="col-lg-2 col-md-2 center no-padding">规格</div>
+                            <div class="col-lg-6 col-md-6 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>
-                        <div class="row" v-for="material in materialStockList">
-                            <div class="col-lg-2 col-md-2 center no-padding">{{material.materialCode}}</div>
-                            <div class="col-lg-4 col-md-4 center no-padding">{{material.materialName}}</div>
-                            <div class="col-lg-2 col-md-2 center no-padding">{{material.specs}}</div>
-                            <div class="col-lg-2 col-md-2 center no-padding"
-                                :class="getMaterialStockNotEnoughClass(material)">
-                                {{material.realStockSum}}</div>
-                            <div class="col-lg-2 col-md-2 center no-padding">{{material.safeStockSum}}</div>
+                        <div class="row">
+                            <div class="col-lg-12 col-md-12" style="height: 300px;">
+                                <div class="row" v-for="material in materialStockList">
+                                    <div class="col-lg-2 col-md-2 center no-padding">{{material.materialCode}}</div>
+                                    <div class="col-lg-6 col-md-6 center no-padding">{{material.materialName}}</div>
+                                    <div class="col-lg-2 col-md-2 center no-padding"
+                                        :class="getMaterialStockNotEnoughClass(material)">
+                                        {{material.realStockSum}}</div>
+                                    <div class="col-lg-2 col-md-2 center no-padding">{{material.safeStockSum}}</div>
+                                </div>
+                            </div>
                         </div>
                     </div>
                     <div class="col-lg-6">
@@ -264,15 +266,19 @@
                     <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>
-                <div class="row" v-for="material in orderSheetMaterialList">
-                    <div class="col-lg-2 col-md-2 center no-padding">{{material.orderSheetCode}}</div>
-                    <div class="col-lg-2 col-md-2 center no-padding">{{material.materialCode}}</div>
-                    <div class="col-lg-2 col-md-2 center no-padding">{{material.materialName}}</div>
-                    <div class="col-lg-2 col-md-2 center no-padding">{{material.specs}}</div>
-                    <div class="col-lg-2 col-md-2 center no-padding"
-                        :class="getOrderSheetStockNotEnoughClass(material)">
-                        {{material.needSum}}</div>
-                    <div class="col-lg-2 col-md-2 center no-padding">{{material.stockSum}}</div>
+                <div class="row">
+                    <div class="col-lg-12 col-md-12" style="height: 180px;">
+                        <div class="row" v-for="material in orderSheetMaterialList">
+                            <div class="col-lg-2 col-md-2 center no-padding">{{material.orderSheetCode}}</div>
+                            <div class="col-lg-2 col-md-2 center no-padding">{{material.materialCode}}</div>
+                            <div class="col-lg-2 col-md-2 center no-padding">{{material.materialName}}</div>
+                            <div class="col-lg-2 col-md-2 center no-padding">{{material.specs}}</div>
+                            <div class="col-lg-2 col-md-2 center no-padding"
+                                :class="getOrderSheetStockNotEnoughClass(material)">
+                                {{material.needSum}}</div>
+                            <div class="col-lg-2 col-md-2 center no-padding">{{material.stockSum}}</div>
+                        </div>
+                    </div>
                 </div>
 
                 <!--工单缺料-->
@@ -292,14 +298,19 @@
                     <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>
-                <div class="row" v-for="material in orderSheetMaterialNotEnoughList">
-                    <div class="col-lg-2 col-md-2 center no-padding">{{material.orderSheetCode}}</div>
-                    <div class="col-lg-2 col-md-2 center no-padding">{{material.materialCode}}</div>
-                    <div class="col-lg-2 col-md-2 center no-padding">{{material.materialName}}</div>
-                    <div class="col-lg-2 col-md-2 center no-padding">{{material.specs}}</div>
-                    <div class="col-lg-2 col-md-2 center no-padding">{{material.needSum}}</div>
-                    <div class="col-lg-2 col-md-2 center no-padding">{{material.stockSum}}</div>
+                <div class="row">
+                    <div class="col-lg-12 col-md-12" style="height: 180px;">
+                        <div class="row" v-for="material in orderSheetMaterialNotEnoughList">
+                            <div class="col-lg-2 col-md-2 center no-padding">{{material.orderSheetCode}}</div>
+                            <div class="col-lg-2 col-md-2 center no-padding">{{material.materialCode}}</div>
+                            <div class="col-lg-2 col-md-2 center no-padding">{{material.materialName}}</div>
+                            <div class="col-lg-2 col-md-2 center no-padding">{{material.specs}}</div>
+                            <div class="col-lg-2 col-md-2 center no-padding">{{material.needSum}}</div>
+                            <div class="col-lg-2 col-md-2 center no-padding">{{material.stockSum}}</div>
+                        </div>
+                    </div>
                 </div>
+
                 <!--工单齐套-->
                 <div class="row block-padding">
 
@@ -317,13 +328,17 @@
                     <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>
-                <div class="row" v-for="material in orderSheetMaterialEnoughList">
-                    <div class="col-lg-2 col-md-2 center no-padding">{{material.orderSheetCode}}</div>
-                    <div class="col-lg-2 col-md-2 center no-padding">{{material.materialCode}}</div>
-                    <div class="col-lg-2 col-md-2 center no-padding">{{material.materialName}}</div>
-                    <div class="col-lg-2 col-md-2 center no-padding">{{material.specs}}</div>
-                    <div class="col-lg-2 col-md-2 center no-padding">{{material.needSum}}</div>
-                    <div class="col-lg-2 col-md-2 center no-padding">{{material.stockSum}}</div>
+                <div class="row">
+                    <div class="col-lg-12 col-md-12" style="height: 180px;">
+                        <div class="row" v-for="material in orderSheetMaterialEnoughList">
+                            <div class="col-lg-2 col-md-2 center no-padding">{{material.orderSheetCode}}</div>
+                            <div class="col-lg-2 col-md-2 center no-padding">{{material.materialCode}}</div>
+                            <div class="col-lg-2 col-md-2 center no-padding">{{material.materialName}}</div>
+                            <div class="col-lg-2 col-md-2 center no-padding">{{material.specs}}</div>
+                            <div class="col-lg-2 col-md-2 center no-padding">{{material.needSum}}</div>
+                            <div class="col-lg-2 col-md-2 center no-padding">{{material.stockSum}}</div>
+                        </div>
+                    </div>
                 </div>
                 <!--领料申请-->
                 <div class="row block-padding">
@@ -342,13 +357,17 @@
                     <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>
-                <div class="row" v-for="material in applyMaterialList">
-                    <div class="col-lg-2 col-md-2 center no-padding">{{material.orderSheetCode}}</div>
-                    <div class="col-lg-2 col-md-2 center no-padding">{{material.materialCode}}</div>
-                    <div class="col-lg-2 col-md-2 center no-padding">{{material.materialName}}</div>
-                    <div class="col-lg-2 col-md-2 center no-padding">{{material.specs}}</div>
-                    <div class="col-lg-2 col-md-2 center no-padding">{{material.applyPerson}}</div>
-                    <div class="col-lg-2 col-md-2 center no-padding">{{material.applysum}}</div>
+                <div class="row">
+                    <div class="col-lg-12 col-md-12" style="height: 160px;">
+                        <div class="row" v-for="material in applyMaterialList">
+                            <div class="col-lg-2 col-md-2 center no-padding">{{material.orderSheetCode}}</div>
+                            <div class="col-lg-2 col-md-2 center no-padding">{{material.materialCode}}</div>
+                            <div class="col-lg-2 col-md-2 center no-padding">{{material.materialName}}</div>
+                            <div class="col-lg-2 col-md-2 center no-padding">{{material.specs}}</div>
+                            <div class="col-lg-2 col-md-2 center no-padding">{{material.applyPerson}}</div>
+                            <div class="col-lg-2 col-md-2 center no-padding">{{material.applysum}}</div>
+                        </div>
+                    </div>
                 </div>
                 <div class="row">
                     <div class="col-lg-12 col-md-12 progress no-padding">
@@ -549,7 +568,7 @@
                         orderSheetMaterialNeedSum * 100).toFixed("0");
                     this.cacheDataObject.orderSheetMaterialList = {
                         data: orderSheetMaterialList,
-                        pagesize: 8,
+                        pagesize: 9,
                         pageindex: 0
                     }
                     this.orderSheetMaterialList = orderSheetMaterialList.slice(0, this.cacheDataObject
@@ -559,7 +578,7 @@
                     this.orderSheetMaterialNotEnoughSum = orderSheetMaterialNotEnoughList.length;
                     this.cacheDataObject.orderSheetMaterialNotEnoughList = {
                         data: orderSheetMaterialNotEnoughList,
-                        pagesize: 8,
+                        pagesize: 9,
                         pageindex: 0
                     }
                     this.orderSheetMaterialNotEnoughList = orderSheetMaterialNotEnoughList.slice(0, this
@@ -569,7 +588,7 @@
                     this.orderSheetMaterialEnoughSum = orderSheetMaterialEnoughList.length;
                     this.cacheDataObject.orderSheetMaterialEnoughList = {
                         data: orderSheetMaterialEnoughList,
-                        pagesize: 8,
+                        pagesize: 9,
                         pageindex: 0
                     }
                     this.orderSheetMaterialEnoughList = orderSheetMaterialEnoughList.slice(0, this