Change stuff and realtime JS made

dapingmu.html

@@ -125,10 +125,11 @@
 
                 <!-- #END# Answered Tickets -->
             </div>
-        <div class="container-fluid" style="height: 80%">
+        <section >
             <div id="graph-1" ></div>
+            <div class="row" style="height: 6em"></div>
             <div id="graph-2" ></div>
-        </div>
+        </section>
 
 
     </section>
@@ -176,386 +177,27 @@
 
     <!--<script src="js/demo.js"></script> -->
     <script src="js/basic1.js"></script>
-
-    <script>
-        var chart = Highcharts.chart('container1', {
-            chart: {
-                type: 'area',
-                backgroundColor:'#E91E63',
-                style:{
-                    color:'#FFFFFF',
-                    fontSize:"20px",
-                }
-
-
-            },
-            colors: [ '#ffffff'
-
-            ],
-            legend: {
-                enabled: false
-            },
-            credits: {
-                enabled:false,
-            },
-            title: {
-                text: '全厂产能',
-                style:{
-                    color:'#FFFFFF',
-                    fontSize:"20px",
-                }
-
-            },
-
-            xAxis: {
-                categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
-                labels:{
-                    enabled:false,
-                    style:{
-                        fontSize:16,
-                        color:'#ffffff',
-                    }
-                }
-            },
-           yAxis: {
-                title: {
-                    text: null
-                },
-                labels:{
-                    style:{
-                        fontSize:16,
-                        color:'#ffffff',
-                    }
-                }
-            },
-          /*  plotOptions: {
-               line: {
-                    dataLabels: {
-                        // 开启数据标签
-                        enabled: true
-                    },
-                    // 关闭鼠标跟踪，对应的提示框、点击事件会失效
-                    enableMouseTracking: false
-                }
-               series: {
-                    dataLabels: {
-                        enabled: true,
-                        color: 'red',
-                    }
-            },*/
-            plotOptions: {
-                series: {
-                    dataLabels: {
-                        enabled: true,
-                        color: 'black'
-                    }
-                }
-            },
-            series: [{
-                name: '东京',
-                data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
-
-            }]
-        });
-
-    </script>
-    <script>
-        var chart = Highcharts.chart('container2', {
-            chart: {
-                type: 'line',
-
-
-            },
-
-            exporting: {
-                enabled: false
-            },
-            credits: {
-                enabled:false,
-            },
-            title: {
-                text: '全厂坏品数'
-            },
-
-            xAxis: {
-                categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
-            },
-            yAxis: {
-                title: {
-                    text: '气温 (°C)'
-                }
-            },
-            plotOptions: {
-                line: {
-                    dataLabels: {
-                        // 开启数据标签
-                        enabled: true
-                    },
-                    // 关闭鼠标跟踪，对应的提示框、点击事件会失效
-                    enableMouseTracking: false
-                }
-            },
-            series: [{
-                name: '东京',
-                data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
-            }, {
-                name: '伦敦',
-                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
-            }]
-        });
-    </script>
-    <script>
-        var chart = Highcharts.chart('container3', {
-            title: {
-                text: null
-            },
-            chart: {
-                zoomType: 'xy'
-            },
-            credits:{
-                enabled: false // 禁用版权信息
-            },
-            exporting: {
-                enabled: false
-            },
-            xAxis: [{
-                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
-                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-                labels: {
-                    enabled: false,
-                }
-            }],
-            yAxis: [{ // Primary yAxis
-                labels: {
-                    format: '{value}',
-                    style: {
-                        color: '#ffc107',
-                        fontSize:'20px'
-                    }
-                },
-
-                title: {
-                    text: '堆积数',
-                    style: {
-                        color: '#ffc107',
-                        fontSize:'20px'
-                    }
-                }
-            }, { // Secondary yAxis
-                title: {
-                    text: '不良率',
-                    style: {
-                        color: 'red',
-                        fontSize:'20px'
-                    }
-                },
-                min:0,
-                max:25,
-                labels: {
-                    format: '{value} %',
-                    style: {
-                        color: 'red',
-                        fontSize:'20px'
-                    }
-                },
-                opposite: true
-            }],
-            tooltip: {
-                shared: true
-            },
-            legend: {
-                layout: 'vertical',
-                align: 'right',
-                x: -120,
-                verticalAlign: 'top',
-                y: 0,
-                floating: true,
-                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
-            },
-            series: [ {
-                name: '堆积数',
-                color:'#ffc107',
-                type: 'area',
-                data: [10,15, 12, 14.5, 18.2, 15, 10, 13, 13.3, 14.3, 13.9, 9.6],
-                tooltip: {
-                    valueSuffix: ''
-                }
-            },{
-                name: '不良率',
-                type: 'spline',
-                color:'#ff0000',
-                yAxis: 1,
-                data: [10, 11, 12, 10.1, 10.2, 1, 5, 7, 8, 10, 5, 7],
-                tooltip: {
-                    valueSuffix: ' %'
-                }
-            }]
-        });
-    </script>
-    <script>
-        /*var chart = Highcharts.chart('container4', {
-            chart: {
-                type: 'line',
-
-
-            },
-            credits: {
-                enabled:false,
-            },
-            title: {
-                text: null
-            },
-
-            xAxis: {
-                categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
-            },
-            yAxis: [{ // Primary yAxis
-                labels: {
-                    format: '{value}',
-                    style: {
-                        color: Highcharts.getOptions().colors[1]
-                    }
-                },
-                title: {
-                    text: '堆积数',
-                    style: {
-                        color: Highcharts.getOptions().colors[1]
-                    }
-                }
-            }, { // Secondary yAxis
-                title: {
-                    text: '不良率',
-                    style: {
-                        color: Highcharts.getOptions().colors[0]
-                    }
-                },
-                labels: {
-                    format: '{value} %',
-                    style: {
-                        color: Highcharts.getOptions().colors[0]
-                    }
-                },
-                opposite: true
-            }],
-            plotOptions: {
-                line: {
-                    dataLabels: {
-                        // 开启数据标签
-                        enabled: true
-                    },
-                    // 关闭鼠标跟踪，对应的提示框、点击事件会失效
-                    enableMouseTracking: false
-                }
-            },
-            series: [{
-                name: '不良率',
-                type: 'spline',
-                yAxis: 1,
-                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
-                tooltip: {
-                    valueSuffix: ' %'
-                }
-            }, {
-                name: '堆积数',
-                type: 'spline',
-                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
-                tooltip: {
-                    valueSuffix: ''
-                }
-            }]
-        });*/
-    </script>
-    <script>
-        var chart = Highcharts.chart('container5',{
-            chart: {
-                type: 'column'
-            },
-            credits:{
-                enabled: false // 禁用版权信息
-            },
-            legend: {
-                enabled: false
-            },
-            exporting: {
-                enabled: false
-            },
-            title: {
-                text: '每拉实时产能',
-                style:{
-                    fontSize:"20px",
-                }
-            },
-
-            xAxis: {
-                categories: [
-                    '一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'
-                ],
-                crosshair: true,
-                labels:{
-                    style:{
-                        fontSize:'20px'
-                    }
-                }
-            },
-            yAxis: {
-                min: 0,
-                title: null,
-                labels:{
-                    style:{
-                        fontSize:'20px'
-                    }
-                }
-
-            },
-            tooltip: {
-                // head + 每个 point + footer 拼接成完整的 table
-                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
-                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
-                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
-                footerFormat: '</table>',
-                shared: true,
-                useHTML: true
-            },
-            plotOptions: {
-                column: {
-                    borderWidth: 0
-                }
-            },
-            series: [{
-                name: '东京',
-                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
-            }, {
-                name: '纽约',
-                data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
-            }, {
-                name: '伦敦',
-                data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
-            }, {
-                name: '柏林',
-                data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
-            }]
-        });
-    </script>
     <script>
+        var i =0,j=0;
         function showChart() {
 
             var stackdata = [];
             var passdata=[];
             var faildata=[];
-            var failrate=[];
+            var ratedata=[];
             var failmax=0;
-            for (i = 0; i < passNumber.length; i++) {
+            for (i = 0; i < passeverynum.length; i++) {
                 passdata.push(passeverynum[i]);
                 faildata.push(faileverynum[i]);
                 stackdata.push(0);
-                failrate.push(failrate[i])
-                if (failmax < failrate[i]) {
-                    failmax = failrate[i];
+                ratedata.push(failrate[i])
+                if (failmax < ratedata[i]) {
+                    failmax = ratedata[i];
                 }
             }
 
             //showEachSpot();
-            failmax = Math.max(failmax, 5);
+
             stackAndFailChart = Highcharts.chart('graph-1', {
                 chart: {
                     zoomType: 'xy',
@@ -610,15 +252,18 @@
                     backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
                 },
                 series: [{
+                    name: '良品数',
                     type: 'column',
                     data: passdata,
 
                 }, {
+                    name: '不良品数',
                     type: 'column',
                     data: faildata,
 
                 },
                     {
+                        name: '堆积数',
                         type: 'column',
                         data: stackdata,
 
@@ -683,7 +328,7 @@
                     name: '不良率',
                     type: 'spline',
 
-                    data: failrate,
+                    data: ratedata,
                     color: 'red',
                     tooltip: {
                         valueSuffix: '%'
@@ -696,12 +341,12 @@
             var stackdata = [];
             var passdata=[];
             var faildata=[];
-            var failrate=[];
-            for (i = 0; i < passNumber.length; i++) {
+            var ratedata=[];
+            for (i = 0; i < passeverynum.length; i++) {
                 passdata.push(passeverynum[i]);
                 faildata.push(faileverynum[i]);
                 stackdata.push(0);
-                failrate.push(failrate[i])
+                ratedata.push(failrate[i])
 
             }
 
@@ -710,7 +355,7 @@
             stackAndFailChart.series[0].setData(passdata);
             stackAndFailChart.series[1].setData(faildata);
             stackAndFailChart.series[2].setData(stackdata);
-            FailChart.series[0].setData(failrate);
+            FailChart.series[0].setData(ratedata);
 
 
             // showEachSpot();

js/basic.js

@@ -53,9 +53,19 @@ var failnum=0;
 var passnum=0
 var passdata=[];
 var faildata=[];
+var num=1;
+var hispass=[];
+var hisfail=[];
+var hisstack=[];
+var hisrate=[];
+var t=0;
 function firsttime_load_spots_data() {
     get_data("fcWorkRaw/allSpots?flowId=" + thisPageFlow, first_success)
 }
+function secondtime_load_spots_data() {
+    get_data("fcWorkRaw/allFlows?type=" + num, second_success);
+    num++;
+}
 
 function first_success(obj, sta) {
     var output = first_parse(this, obj);
@@ -64,15 +74,15 @@ function first_success(obj, sta) {
     console.log(output);
     var i, j;
     failnum=0;
-    for (i = 0; i < output.length - 1; i++) {
+    for (i = 0; i < output.length ; i++) {
         passNumber[i] = output[i].passNum;
         passnum=passNumber[i]
     }
-    for (i = 0; i < output.length - 1; i++) {
+    for (i = 0; i < output.length ; i++) {
         failNumber[i] = output[i].failNum;
         failnum=failNumber[i]+failnum;
     }
-    for (i = 0; i < output.length - 1; i++) {
+    for (i = 0; i < output.length ; i++) {
         if (failNumber[i] + passNumber[i] == 0) {
             failrate[i] = 0;
         }
@@ -82,10 +92,16 @@ function first_success(obj, sta) {
 
     }
     stackeverynum[0] = 0;
-    for (i = 1; i < output.length - 1; i++) {
+    for (i = 1; i < output.length ; i++) {
         stackeverynum[i] = passNumber[i - 1] - passNumber[i] - failNumber[i];
         stacknum = stackeverynum[i] + stacknum;
     }
+    for(i=1;i<5;i++) {
+        secondtime_load_spots_data();
+    }
+
+
+
     showChart();
 
     setInterval(function(){
@@ -96,18 +112,40 @@ function first_success(obj, sta) {
     document.getElementById("test3").innerHTML = Math.floor(passnum/(passnum+failnum)*100)/100+'%';
     document.getElementById("test4").innerHTML = stacknum;
 }
+function second_success(obj, sta) {
+    var history = first_parse(this, obj);
+    var i,j;
+    for(i=0;i<history.length;i++){
+        if(history[t].flowId==thisPageFlow){
+            hispass[t]=history[t].flowPass;
+            hisfail[t]=history[t].flowFail;
+            hisstack[t]=0;
+
+
+            if (hispass[t] + hisfail[t] == 0) {
+                    hisrate[t] = 0;
+                }
+                else {
+                    hisrate[t] = hisfail[i] / (hispass[i] + hisfail[i]) * 100;
+                }
+
+
+            t++;
+    }
+}
+
 
 function realtime_success(obj, sta) {
 
     var output = first_parse(this, obj);
     var i, j;
-    for (i = 0; i < output.length - 1; i++) {
+    for (i = 0; i < output.length ; i++) {
         passNumber[i] = output[i].passNum;
     }
-    for (i = 0; i < output.length - 1; i++) {
+    for (i = 0; i < output.length ; i++) {
         failNumber[i] = output[i].failNum;
     }
-    for (i = 0; i < output.length - 1; i++) {
+    for (i = 0; i < output.length ; i++) {
         if (failNumber[i] + passNumber[i] == 0) {
             failrate[i] = 0;
         }
@@ -117,7 +155,7 @@ function realtime_success(obj, sta) {
 
     }
     stackeverynum[0] = 0;
-    for (i = 1; i < output.length - 1; i++) {
+    for (i = 1; i < output.length ; i++) {
         stackeverynum[i] = passNumber[i - 1] - passNumber[i] - failNumber[i];
         stacknum = stackeverynum[i] + stacknum;
     }
@@ -147,7 +185,7 @@ function on_load_success_spots(obj, status) {
 
     flowData = spotsList.list;
 
-    for (i = 0; i < spotsList.list.length - 1; i++) {
+    for (i = 0; i < spotsList.list.length ; i++) {
         sID[i] = spotsList.list[i].spotId;
         namedata[i] = spotsList.list[i].spotName;
     }

js/basic1.js

@@ -50,21 +50,19 @@ function on_load_success_spots(obj, status) {
     console.log(spotsList);
 
     var i, j, temp=[];
-    for (i = 0; i < spotsList.length - 1; i++) {
-        for (j = 0; j < spotsList.length - i - 1; j++) {
+        for (j = 0; j < spotsList.length-1  ; j++) {
             if (spotsList[j].flowId > spotsList[j + 1].flowId) {
                 temp = spotsList[j];
                 spotsList[j] = spotsList[j + 1];
                 spotsList[j + 1] = temp;
             }
         }
-    }
-    for (i = 0; i < spotsList.length - 1; i++) {
+    for (i = 0; i < spotsList.length ; i++) {
         passeverynum[i] = spotsList[i].flowPass;
         faileverynum[i] = spotsList[i].flowFail;
         stackeverynum[i] = 0;
     }
-    for (i = 0; i < spotsList.length - 1; i++) {
+    for (i = 0; i < spotsList.length ; i++) {
         if (passeverynum[i] + faileverynum[i] == 0) {
             failrate[i] = 0;
         }
@@ -86,12 +84,12 @@ function realtime_success(obj, sta) {
 
     var output = first_parse(this, obj);
     var i, j;
-    for (i = 0; i < output.length - 1; i++) {
+    for (i = 0; i < output.length ; i++) {
         passeverynum[i] = output[i].flowPass;
         faileverynum[i] = output[i].flowFail;
         stackeverynum[i] = 0
     }
-    for (i = 0; i < output.length - 1; i++) {
+    for (i = 0; i < output.length ; i++) {
         if (passeverynum[i] + faileverynum[i] == 0) {
             failrate[i] = 0;
         }

lazhang.html

@@ -303,7 +303,7 @@
                 <th scope="col">Handle</th>
             </tr>
             </thead>
-            <tbody>
+            <tbody id="rank-one">
             <tr>
                 <th scope="row">1</th>
                 <td>Mark</td>
@@ -568,21 +568,46 @@
 <script src="js/basic.js"></script>
 
 <script>
-
-   /* function getSpotHtml(htmlbody, one_person, i) {
+    var timeday=new Array("今日" ,"昨日" ,"本周" ,"本月");
+    function getSpotHtml(htmlbody,  i) {
         htmlbody += "<tr>";
         htmlbody += `<tr>
-                                            <td>${flowData[i].spotName}(${flowData[i].spotId})</td>
-                                            <td>${passNumber[i]}</td>
-                                            <td>${failNumber[i]}</td>
+                                            <td>${timeday[i]}</td>
+                                            <td>${hispass[i]}</td>
+                                            <td>${hisfail[i]}</td>
+                                            <td>${hisrate[i]}</td>
                                         </tr>`;
         htmlbody += "</tr>";
         return htmlbody;
     }
+   /* function getSpotHtml(htmlbody, one_person, i) {
+        htmlbody += "<tr>";
+        htmlbody += `<tr>
+                                            <td>${timeday[i]}</td>
+                                            <td>${hispass[i]}</td>
+                                            <td>${hisfail[i]}</td>
+                                            <td>${hisrate[i]}</td>
+                                        </tr>`;
+        htmlbody += "</tr>";
+        return htmlbody;
+    }*/
 
     function showEachSpot() {
         var htmlbody = "", one_person = "";
         var i = 0;
+        var triGap = 4;
+
+        htmlbody = "";
+        for (i = 0; i < triGap; i++) {
+
+            htmlbody = getSpotHtml(htmlbody, i);
+        }
+        $("#rank-one").html(htmlbody);
+        console.log(htmlbody);
+    }
+   /* function showEachSpot() {
+        var htmlbody = "", one_person = "";
+        var i = 0;
         var triGap = Math.floor(sID.length / 3) + 1;
         var remain = sID.length - triGap * 2;
         htmlbody = "";
@@ -632,7 +657,7 @@
             faildata.push(failNumber[i])
         }
 
-        //showEachSpot();
+        showEachSpot();
 
         stackmax = Math.max(stackmax, 5);
         failmax = Math.max(failmax, 5);
@@ -698,15 +723,18 @@
                 backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
             },
             series: [{
+                name: '良品数',
                 type: 'column',
                 data: passdata,
 
             }, {
+                name: '不良品数',
                 type: 'column',
                 data: faildata,
 
             },
                 {
+                    name: '堆积数',
                     type: 'column',
                     data: data,
 
@@ -817,7 +845,7 @@
         FailChart.series[0].setData(ratedata);
 
 
-        // showEachSpot();
+         showEachSpot();
     }
 
     var stackAndFailChart = null;