页面调整

js/content/mycharts.js

@@ -147,6 +147,126 @@ var ChartsService = {
             myChart.resize();
         });
     },
+    initCommonBar2: function (divId, data, grid) {
+        var myChart = echarts.init(document.getElementById(divId));
+        const xDataList = [];
+        const yDataList = [];
+        for (var val in data) {
+            xDataList.push(val);
+            yDataList.push(data[val]);
+        }
+
+        var option = {
+            color: ['#37a2da'],
+            grid:{
+                left:"20%",
+                right:"10%",
+                bottom:"25%",
+                top:"10%"
+            },
+            xAxis: {
+                type: 'category',
+                data: xDataList,
+                axisLabel: {
+                    show: true,
+                    textStyle: {
+                        color: '#ffffff', //更改坐标轴文字颜色
+                        fontSize: 14 //更改坐标轴文字大小
+                    }
+                    // ,
+                    // interval:0,  
+                    // rotate:30  
+                    ,
+                     //换行显示
+                    formatter: function(value) {
+                        let result = '' //拼接加\n返回的类目项
+                        let maxLength = 5 //每项显示文字个数
+                        let valLength = value.length //X轴类目项的文字个数
+                        let rowNumber = Math.ceil(valLength / maxLength) //类目项需要换行的行数
+                        if (rowNumber > 1) {
+                        //如果文字大于3,
+                        for (let i = 0; i < rowNumber; i++) {
+                            let temp = '' //每次截取的字符串
+                            let start = i * maxLength //开始截取的位置
+                            let end = start + maxLength //结束截取的位置
+                            temp = value.substring(start, end) + '\n'
+                            result += temp //拼接生成最终的字符串
+                        }
+                        return result
+                        } else {
+                        return value
+                        }
+                    }
+                },
+                axisLine: {
+                    lineStyle: {
+                        type: 'solid',
+                        color: '#37a2da', //左边线的颜色
+                        width: '1' //坐标线的宽度
+                    }
+                },
+                splitLine: {
+                    show: false
+                }
+            },
+            yAxis: {
+                type: 'value',
+                axisLabel: {
+                    show: true,
+                    formatter:'{value}%',
+                    textStyle: {
+                        color: '#ffffff', //更改坐标轴文字颜色
+                        fontSize: 14 //更改坐标轴文字大小
+                    }
+                },
+                axisLine: {
+                    lineStyle: {
+                        type: 'solid',
+                        color: '#37a2da', //左边线的颜色
+                        width: '1' //坐标线的宽度
+                    }
+                },
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: ['#37a2da'],
+                        width: 1,
+                        type: 'solid'
+                    }
+                }
+            },
+            series: [{
+                data: yDataList,
+                type: 'bar',
+                showBackground: false,
+                backgroundStyle: {
+                    color: 'rgba(220, 220, 220, 0.8)'
+                },
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'top',
+                            formatter: '{c}%',//显示百分号
+                            textStyle: {
+                                color: '#ffffff'
+                            }
+                        }
+                    }
+                },
+            }]
+        };
+
+        if (grid != null && grid != undefined){
+            option.grid = grid;
+        }
+
+        // 使用刚指定的配置项和数据显示图表。
+        myChart.setOption(option);
+        window.addEventListener("resize", function () {
+            myChart.resize();
+        });
+    },
     // 带阴影柱状图柱状图
     // divId:待显示的div id, data：json对象
     initBarWithShade: function (divId, data, grid) {
@@ -337,9 +457,10 @@ var ChartsService = {
                 type: 'value',
                 axisLabel: {
                     show: true,
+                    formatter:'{value}%',
                     textStyle: {
                         color: '#ffffff', //更改坐标轴文字颜色
-                        fontSize: 14 //更改坐标轴文字大小
+                        fontSize: 12 //更改坐标轴文字大小
                     }
                 },
                 axisLine: {
@@ -364,6 +485,7 @@ var ChartsService = {
                     stack: '总量',
                     label: {
                         show: true,
+                        formatter: '{c}%',//显示百分号
                         position: 'insideRight'
                     },
                     data: yDataList
@@ -374,6 +496,7 @@ var ChartsService = {
                     stack: '总量',
                     label: {
                         show: true,
+                        formatter: '{c}%',//显示百分号
                         position: 'insideRight'
                     },
                     data: yDataList2
@@ -798,7 +921,8 @@ var ChartsService = {
                     stack: '总量',
                     label: {
                         show: true
-                    },
+                    }
+                    ,
                     data: yDataList1
                 },
                 {
@@ -822,5 +946,247 @@ var ChartsService = {
             myChart.resize();
         });
     },
+    initBarAndLine2: function (divId, data, grid) {
+        var myChart = echarts.init(document.getElementById(divId));
+        if (data.length == 0)
+            return;
+        const yLabel1 = data[0].label1;
+        const yLabel2 = data[0].label2;
+        const xDataList = [];
+        const yDataList1 = [];
+        const yDataList2 = [];
+        $.each(data, function (index, item) {
+            xDataList.push(item.label);
+            yDataList1.push(item.sum1);
+            yDataList2.push(item.sum2);
+        });
+
+        // option2 = {
+        //     color: ['#ff9f7f', '#ffd85c'],
+        //     grid:{
+        //         left:"20%",
+        //         right:"10%",
+        //         bottom:"25%",
+        //         top:"10%"
+        //     },
+        //     xAxis: {
+        //         type: 'category',
+        //         boundaryGap: false,
+        //         data: xDataList,
+        //         axisLabel: {
+        //             show: true,
+        //             textStyle: {
+        //                 color: '#ffffff', //更改坐标轴文字颜色
+        //                 fontSize: 14 //更改坐标轴文字大小
+        //             },
+        //             // interval:0,  
+        //             // rotate:30  
+        //             //换行显示
+        //             formatter: function(value) {
+        //                 let result = '' //拼接加\n返回的类目项
+        //                 let maxLength = 5 //每项显示文字个数
+        //                 let valLength = value.length //X轴类目项的文字个数
+        //                 let rowNumber = Math.ceil(valLength / maxLength) //类目项需要换行的行数
+        //                 if (rowNumber > 1) {
+        //                 //如果文字大于3,
+        //                 for (let i = 0; i < rowNumber; i++) {
+        //                     let temp = '' //每次截取的字符串
+        //                     let start = i * maxLength //开始截取的位置
+        //                     let end = start + maxLength //结束截取的位置
+        //                     temp = value.substring(start, end) + '\n'
+        //                     result += temp //拼接生成最终的字符串
+        //                 }
+        //                 return result
+        //                 } else {
+        //                 return value
+        //                 }
+        //             }
+        //         },
+        //         axisLine: {
+        //             lineStyle: {
+        //                 type: 'solid',
+        //                 color: '#37a2da', //左边线的颜色
+        //                 width: '1' //坐标线的宽度
+        //             }
+        //         },
+        //         splitLine: {
+        //             show: false
+        //         }
+        //     },
+        //     yAxis: {
+        //         type: 'value',
+        //         axisLabel: {
+        //             show: true,
+        //             textStyle: {
+        //                 color: '#ffffff', //更改坐标轴文字颜色
+        //                 fontSize: 14 //更改坐标轴文字大小
+        //             }
+        //         },
+        //         axisLine: {
+        //             lineStyle: {
+        //                 type: 'solid',
+        //                 color: '#37a2da', //左边线的颜色
+        //                 width: '1' //坐标线的宽度
+        //             }
+        //         },
+        //         splitLine: {
+        //             show: true,
+        //             lineStyle: {
+        //                 color: ['#37a2da'],
+        //                 width: 1,
+        //                 type: 'solid'
+        //             }
+        //         }
+        //     },
+        //     series: [{
+        //         data: yDataList1,
+        //         type: 'line',
+        //         stack: '总量',
+        //         label: {
+        //             show: true
+        //         },
+        //     },
+        //     {
+        //         data: yDataList2,
+        //         type: 'line',
+        //         label: {
+        //             show: true
+        //         },
+        //     }
+        //     ]
+        // };
+        
+
+        var option = {
+            color: ['#ff9f7f', '#37a2da'],
+            grid:{
+                left:"20%",
+                right:"10%",
+                bottom:"25%",
+                top:"10%"
+            },
+            tooltip: {
+                trigger: 'axis'
+            },
+            legend: {
+
+                data: [{
+                        name: yLabel1,
+                        textStyle: {
+                            color: '#ffffff'
+                        }
+                    },
+                    {
+                        name: yLabel2,
+                        textStyle: {
+                            color: '#ffffff'
+                        }
+                    }
+                ]
+            },
+            xAxis: {
+                type: 'category',
+                axisTick: {
+                    alignWithLabel: true
+                },
+                data: xDataList,
+                axisLabel: {
+                    show: true,
+                    textStyle: {
+                        color: '#ffffff', //更改坐标轴文字颜色
+                        fontSize: 14 //更改坐标轴文字大小
+                    },
+                    // interval:0,  
+                    // rotate:30  
+                    //换行显示
+                    formatter: function(value) {
+                        let result = '' //拼接加\n返回的类目项
+                        let maxLength = 5 //每项显示文字个数
+                        let valLength = value.length //X轴类目项的文字个数
+                        let rowNumber = Math.ceil(valLength / maxLength) //类目项需要换行的行数
+                        if (rowNumber > 1) {
+                        //如果文字大于3,
+                        for (let i = 0; i < rowNumber; i++) {
+                            let temp = '' //每次截取的字符串
+                            let start = i * maxLength //开始截取的位置
+                            let end = start + maxLength //结束截取的位置
+                            temp = value.substring(start, end) + '\n'
+                            result += temp //拼接生成最终的字符串
+                        }
+                        return result
+                        } else {
+                        return value
+                        }
+                    }
+                },
+                axisLine: {
+                    lineStyle: {
+                        type: 'solid',
+                        color: '#37a2da', //左边线的颜色
+                        width: '1' //坐标线的宽度
+                    }
+                },
+                splitLine: {
+                    show: false
+                }
+            },
+            yAxis: {
+                type: 'value',
+                axisLabel: {
+                    show: true,
+                    formatter:'{value}%',
+                    textStyle: {
+                        color: '#ffffff', //更改坐标轴文字颜色
+                        fontSize: 14 //更改坐标轴文字大小
+                    }
+                },
+                axisLine: {
+                    lineStyle: {
+                        type: 'solid',
+                        color: '#37a2da', //左边线的颜色
+                        width: '1' //坐标线的宽度
+                    }
+                },
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: ['#37a2da'],
+                        width: 1,
+                        type: 'solid'
+                    }
+                }
+            },
+            series: [{
+                    name: yLabel1,
+                    type: 'line',
+                    stack: '总量',
+                    label: {
+                        show: false
+                    }
+                    ,
+                    data: yDataList1
+                },
+                {
+                    name: yLabel2,
+                    type: 'bar',
+                    stack: '总量2',
+                    label: {
+                        show: true,
+                        formatter: '{c}%',//显示百分号
+                    },
+                    data: yDataList2
+                }
+            ]
+        };
+
+        if (grid != null && grid != undefined){
+            option.grid = grid;
+        }
+        // 使用刚指定的配置项和数据显示图表。
+        myChart.setOption(option);
+        window.addEventListener("resize", function () {
+            myChart.resize();
+        });
+    },
 
 }

js/service/material.js

@@ -638,7 +638,7 @@ var ServiceMaterial={
         var list=MethodGetService.methodGet("/fbsPuArrivalvouch/fbsArrivalVouchs/getLastSixMonthQualityTargetCompareWeb");
         $.each(list, function (index, item) {
             item.label = item.month;
-            item.label1 = "质量目标";
+            item.label1 = "质量目标 "+item.target+"%";
             item.sum1 = item.target;
             item.label2 = "合格率";
             item.sum2 = item.real;

js/session.js

@@ -118,6 +118,35 @@ function autoInitDate(chartsID,dataMap,autoTime,timeName,grid){
     
 }
 
+function beginFun3(chartsID,dataMap,autoTime,timeName,grid){
+    return function(){autoInitDate2(chartsID,dataMap,autoTime,timeName,grid)} 
+}
+
+function autoInitDate2(chartsID,dataMap,autoTime,timeName,grid){
+    let DataList = [];
+    for(let key in dataMap) {
+        DataList.push([key, dataMap[key]]);
+    }
+    if(DataList.length < 1){
+        return;
+    }
+    let lsit = DataList.slice(pageIndex, pageSize);
+    pageIndex = pageSize;
+    pageSize = pageSize + initSize;
+    let map = {}
+    for(let key in lsit) {
+        map[lsit[key][0]] = lsit[key][1];
+    }
+    ChartsService.initCommonBar2(chartsID,map,grid);
+
+    if(DataList.length <= initSize){
+        return;
+    }
+
+    timeName = setInterval(beginFun2(chartsID,DataList,timeName,grid),autoTime);
+    
+}
+
 function beginFun2(chartsID,DataList,timeName,grid){
  
     return function(){autoLoadDate(chartsID,DataList,timeName,grid)} 

pages/dashboard/quality.html

@@ -59,10 +59,10 @@
                 </div>
                 <div class="row block-padding">
                     <div style="width: 6%;" class="col-lg-1 col-md-1 center no-padding padding-line">序号</div>
-                    <div style="width: 14%;" class="col-lg-2 col-md-2 center no-padding padding-line">计划<br/>到货日期</div>
-                    <div style="width: 14%;" class="col-lg-2 col-md-2 center no-padding padding-line">供应商</div>
+                    <div style="width: 16%;" class="col-lg-2 col-md-2 center no-padding padding-line">计划<br/>到货日期</div>
+                    <div style="width: 16%;" class="col-lg-2 col-md-2 center no-padding padding-line">供应商</div>
                     <div style="width: 18%;" class="col-lg-1 col-md-1 center no-padding padding-line">物料号</div>
-                    <div style="width: 20%;" class="col-lg-2 col-md-2 center no-padding padding-line">名称</div>
+                    <div style="width: 16%;" class="col-lg-2 col-md-2 center no-padding padding-line">名称</div>
                     <!-- <div class="col-lg-2 col-md-2 center no-padding padding-line">型号规格</div> -->
                     <div style="width: 10%;" class="col-lg-1 col-md-1 center no-padding padding-line">到货<br />数量</div>
                     <div style="width: 14%;"  class="col-lg-2 col-md-2 center no-padding padding-line">备注</div>
@@ -71,10 +71,10 @@
                     <div class="col-lg-12 col-md-12" >
                         <div class="row" v-for="product in willArriveMeterialList" style="overflow:hidden;word-wrap: break-word;">
                             <div style="width: 6%;" class="col-lg-1 col-md-1 center no-padding">{{product.index}}</div>
-                            <div style="width: 14%;" class="col-lg-2 col-md-2 center no-padding">{{product.arriveDate}}</div>
-                            <div style="width: 14%;" class="col-lg-2 col-md-2 center no-padding">{{product.cvenCode}}</div>
+                            <div style="width: 16%;" class="col-lg-2 col-md-2 center no-padding">{{product.arriveDate}}</div>
+                            <div style="width: 16%;" class="col-lg-2 col-md-2 center no-padding">{{product.cvenCode}}</div>
                             <div style="overflow:hidden; word-break:break-all;white-space:nowrap;width: 18%;" class="col-lg-1 col-md-1 left no-padding">{{product.materialCode}}</div>
-                            <div style="overflow:hidden; word-break:break-all;white-space:nowrap;width: 20%;" class="col-lg-2 col-md-1 left no-padding">{{product.materialName}}</div>
+                            <div style="overflow:hidden; word-break:break-all;white-space:nowrap;width: 16%;" class="col-lg-2 col-md-1 left no-padding">{{product.materialName}}</div>
                             <!-- <div class="col-lg-2 col-md-2 center no-padding">{{product.specs}}</div> -->
                             <div style="width: 10%;" class="col-lg-1 col-md-1 center no-padding">{{product.arriveSum}}</div>
                             <div style="width: 14%;overflow:hidden; word-break:break-all;white-space:nowrap;text-align: left;" class="col-lg-2 col-md-3 center no-padding">{{product.citemname}}</div>
@@ -88,7 +88,7 @@
                     <div class="col-lg-12 col-md-12" style="height:300px" id="charts_11"></div>
                 </div> -->
             </div>
-            <div class="col-lg-4 col-md-4" style="width: 30%;margin-left: 10px;" >
+            <div class="col-lg-4 col-md-4" style="width: 30%;margin-left: 15px;" >
                 <div class="row" style="padding-top:50px;padding-bottom: 50px;">
                     <div class="col-lg-6 col-md-6">
                         <div class="quality-block-1 center">当天到货批数</div>
@@ -226,7 +226,7 @@
         var pageSize = 7;
         var pageIndex = 0;
         const checkRateByBatchnoList = ServiceMaterial.getCheckRateByBatchno();
-        setTimeout(beginFun("charts_21",checkRateByBatchnoList,10000,"charts_21"),500);
+        setTimeout(beginFun3("charts_21",checkRateByBatchnoList,10000,"charts_21"),500);
       
         //年度合格率
         const monthGoodList =  ServiceMaterial.getLastSixMonthQualityTargetCompare()
@@ -237,7 +237,7 @@
             var lsitMonth = monthGoodList.slice(pageIndexMonthGood,pageSizeMonthGood);
             pageIndexMonthGood = pageSizeMonthGood;
             pageSizeMonthGood = pageSizeMonthGood + 6;
-            ChartsService.initBarAndLine("charts_11", lsitMonth,
+            ChartsService.initBarAndLine2("charts_11", lsitMonth,
                         ChartsService.getGridSpanSmall());
             if(monthGoodList.length <= pageIndexMonthGood){
                 return;
@@ -252,7 +252,7 @@
                 pageIndexMonthGood = 0;
                 pageSizeMonthGood = 6;
             }
-            ChartsService.initBarAndLine("charts_11", lsitMonth,
+            ChartsService.initBarAndLine2("charts_11", lsitMonth,
                         ChartsService.getGridSpanSmall());
         }