Change stuff and realtime JS made

dapingmu.html

@@ -91,6 +91,111 @@
             </div>
         </nav>
         <!-- #END# CPU Usage -->
+        <section style="margin-top: 100px;color: #ffffff" >
+            <div style="width: 38%;float: left">
+                <div class="text-center">全厂产能统计</div>
+                <table class="table table-bordered text-center" style="color: #ffffff">
+                    <thead>
+                    <tr>
+                        <th scope="col">时间</th>
+                        <th scope="col">良品数</th>
+                        <th scope="col">不良品数</th>
+                        <th scope="col">堆积数</th>
+                        <th scope="col">不良率</th>
+                    </tr>
+                    </thead>
+                    <tbody id="rank-one">
+
+                    </tbody>
+                </table>
+            </div>
+            <div style="width: 60%;float: right">
+                <div class="text-center">本厂今日生产能手榜</div>
+                <table class="table table-bordered text-center" style="color: #ffffff;width: 50%;float: left" >
+                    <thead>
+                    <tr >
+                        <th scope="col" colspan="4">红榜</th>
+
+                    </tr>
+                    <tr >
+                        <th >人员</th>
+                        <th >良品数</th>
+                        <th >人员</th>
+                        <th >不良率</th>
+
+                    </tr>
+                    </thead>
+                    <tbody id="rank-two">
+                    <tr>
+                        <th scope="row">1</th>
+                        <td>Mark</td>
+                        <td>Otto</td>
+                        <td>@mdo</td>
+
+                    </tr>
+                    <tr>
+                        <th scope="row">2</th>
+                        <td>Jacob</td>
+                        <td>Thornton</td>
+                        <td>@fat</td>
+                    </tr>
+                    <tr>
+                        <th scope="row">2</th>
+                        <td>Jacob</td>
+                        <td>Thornton</td>
+                        <td>@fat</td>
+                    </tr>
+                    <tr>
+                        <th scope="row">3</th>
+                        <td>Larry</td>
+                        <td>the Bird</td>
+                        <td>@twitter</td>
+                    </tr>
+                    </tbody>
+                </table>
+                <table class="table table-bordered text-center" style="color: #ffffff;width: 50%;float: right" >
+                    <thead>
+                    <tr >
+                        <th scope="col" colspan="4">黑榜</th>
+                    </tr>
+                    <tr >
+                        <th >人员</th>
+                        <th >良品数</th>
+                        <th >人员</th>
+                        <th >不良率</th>
+
+                    </tr>
+                    </thead>
+                    <tbody id="rank-three">
+                    <tr>
+                        <th scope="row">1</th>
+                        <td>Mark</td>
+                        <td>Otto</td>
+                        <td>@mdo</td>
+
+                    </tr>
+                    <tr>
+                        <th scope="row">2</th>
+                        <td>Jacob</td>
+                        <td>Thornton</td>
+                        <td>@fat</td>
+                    </tr>
+                    <tr>
+                        <th scope="row">2</th>
+                        <td>Jacob</td>
+                        <td>Thornton</td>
+                        <td>@fat</td>
+                    </tr>
+                    <tr>
+                        <th scope="row">3</th>
+                        <td>Larry</td>
+                        <td>the Bird</td>
+                        <td>@twitter</td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        </section>
 
         <section style="margin-top: 5em" >
             <div id="graph-1" ></div>
@@ -145,6 +250,82 @@
     <!--<script src="js/demo.js"></script> -->
     <script src="js/basic1.js"></script>
     <script>
+        var timeday=new Array("今日" ,"昨日" ,"本周" ,"本月");
+        function getSpotHtml(htmlbody,  i) {
+            htmlbody += "<tr>";
+            htmlbody += `<tr>
+                                            <td>${timeday[i]}</td>
+                                            <td>${hispass[i]}</td>
+                                            <td>${hisfail[i]}</td>
+                                            <td>${hisstack[i]}</td>
+                                            <td>${hisrate[i]}</td>
+                                        </tr>`;
+            htmlbody += "</tr>";
+            return htmlbody;
+        }
+        function getSpotHtml1(htmlbody,  i) {
+            htmlbody += "<tr>";
+            htmlbody += `<tr>
+                                            <td>${goodid[i]}</td>
+                                            <td>${goodpass[i]}</td>
+                                            <td>${goodid[i]}</td>
+                                            <td>${goodfailrate[i]}</td>
+                                        </tr>`;
+            htmlbody += "</tr>";
+            return htmlbody;
+        }
+        function getSpotHtml2(htmlbody,  i) {
+            htmlbody += "<tr>";
+            htmlbody += `<tr>
+                                            <td>${badid[i]}</td>
+                                            <td>${badpass[i]}</td>
+                                            <td>${badid[i]}</td>
+                                            <td>${badfailrate[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 showEachSpot1() {
+            var htmlbody = "", one_person = "";
+            var i = 0;
+            var triGap = 3;
+
+            htmlbody = "";
+            for (i = 0; i < triGap; i++) {
+
+                htmlbody = getSpotHtml1(htmlbody, i);
+            }
+            $("#rank-two").html(htmlbody);
+            console.log(htmlbody);
+        }
+        function showEachSpot2() {
+            var htmlbody = "", one_person = "";
+            var i = 0;
+            var triGap = 3;
+
+            htmlbody = "";
+            for (i = 0; i < triGap; i++) {
+
+                htmlbody = getSpotHtml2(htmlbody, i);
+            }
+            $("#rank-three").html(htmlbody);
+            console.log(htmlbody);
+        }
         var i =0,j=0;
         function showChart() {
 
@@ -163,7 +344,9 @@
                 }
             }
 
-            //showEachSpot();
+            showEachSpot();
+            showEachSpot1();
+            showEachSpot2();
 
             stackAndFailChart = Highcharts.chart('graph-1', {
                 chart: {
@@ -325,7 +508,9 @@
             FailChart.series[0].setData(ratedata);
 
 
-            // showEachSpot();
+             showEachSpot();
+            showEachSpot1();
+            showEachSpot2();
         }
 
         var stackAndFailChart = null;

denglu.html

@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
+    <title>流水线管理页</title>
+    <!-- Favicon-->
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
+
+    <!-- Google Fonts -->
+    <link href="css/cyllic.css" rel="stylesheet" type="text/css">
+    <link href="css/mateial.css" rel="stylesheet" type="text/css">
+
+    <!-- Bootstrap Core Css -->
+    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"
+          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+
+    <!-- Waves Effect Css -->
+    <link href="plugins/node-waves/waves.css" rel="stylesheet"/>
+
+    <!-- Animation Css -->
+    <link href="plugins/animate-css/animate.css" rel="stylesheet"/>
+
+    <!-- Morris Chart Css-->
+    <link href="plugins/morrisjs/morris.css" rel="stylesheet"/>
+
+    <!-- Custom Css -->
+    <link href="css/style.css" rel="stylesheet">
+
+    <!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes -->
+    <link href="css/themes/all-themes.css" rel="stylesheet"/>
+
+    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
+    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"
+            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
+            crossorigin="anonymous"></script>
+    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"
+            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
+            crossorigin="anonymous"></script>
+
+    <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        /* css 代码  */
+    </style>
+    <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
+    <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
+    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
+    <script src="https://img.hcharts.cn/highcharts/themes/dark-unica.js"></script>
+    <script language="JavaScript">
+        function startTime()
+        {
+            var today=new Date();//定义日期对象
+            var yyyy = today.getFullYear();//通过日期对象的getFullYear()方法返回年
+            var MM = today.getMonth()+1;//通过日期对象的getMonth()方法返回年
+            var dd = today.getDate();//通过日期对象的getDate()方法返回年
+            var hh=today.getHours();//通过日期对象的getHours方法返回小时
+            var mm=today.getMinutes();//通过日期对象的getMinutes方法返回分钟
+            var ss=today.getSeconds();//通过日期对象的getSeconds方法返回秒
+            // 如果分钟或小时的值小于10，则在其值前加0，比如如果时间是下午3点20分9秒的话，则显示15：20：09
+            MM=checkTime(MM);
+            dd=checkTime(dd);
+            mm=checkTime(mm);
+            ss=checkTime(ss);
+            var day; //用于保存星期（getDay()方法得到星期编号）
+            if(today.getDay()==0)   day   =   "星期日 "
+            if(today.getDay()==1)   day   =   "星期一 "
+            if(today.getDay()==2)   day   =   "星期二 "
+            if(today.getDay()==3)   day   =   "星期三 "
+            if(today.getDay()==4)   day   =   "星期四 "
+            if(today.getDay()==5)   day   =   "星期五 "
+            if(today.getDay()==6)   day   =   "星期六 "
+            document.getElementById('nowDateTimeSpan').innerHTML=yyyy+"-"+MM +"-"+ dd +"   " + day+" " + hh+":"+mm+":"+ss;
+            setTimeout('startTime()',1000);//每一秒中重新加载startTime()方法
+        }
+
+        function checkTime(i)
+        {
+            if (i<10){
+                i="0" + i;
+            }
+            return i;
+        }
+    </script>
+</head>
+
+<body class="" style="background-color: #17253f !important;" onload="startTime()">
+<div >
+    <nav class="navbar" style="background-color: red">
+        <div class="container-fluid">
+            <div class="navbar-header">
+                <a class="navbar-brand" href="index.html">工厂产能监控系统</a>
+            </div>
+            <div style="color: #ffffff"><img src="images/logo.jpg" style="width: 10%"> 深圳市度彼电子有限公司——</div>
+            <font color="#ffffff"><span id="nowDateTimeSpan"></span></font>
+        </div>
+    </nav>
+    <div class="container-fluid" style="margin-top: 20em">
+        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width: 30%">
+            拉 <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu">
+            <li><a href="#">生产线1</a></li>
+            <li><a href="#">生产线2</a></li>
+        </ul>
+        <button type="button" class="btn btn-primary btn-lg btn-block" style="float: right;width: 30%">Block level button</button>
+    </div>
+
+    <div class="text-center" style="width: 30%;padding-top: 10em;margin: 0 auto" >
+
+        <button class="btn btn-block bg-pink waves-effect" type="submit" style="">登陆</button>
+
+    </div>
+</div>
+
+<!-- Jquery Core Js -->
+<script src="../../plugins/jquery/jquery.min.js"></script>
+
+<!-- Bootstrap Core Js -->
+<script src="../../plugins/bootstrap/js/bootstrap.js"></script>
+
+<!-- Waves Effect Plugin Js -->
+<script src="../../plugins/node-waves/waves.js"></script>
+
+<!-- Validation Plugin Js -->
+<script src="../../plugins/jquery-validation/jquery.validate.js"></script>
+
+<!-- Custom Js -->
+<script src="../../js/admin.js"></script>
+<script src="../../js/pages/examples/sign-in.js"></script>
+</body>
+
+</html>

js/basic.js

@@ -53,19 +53,35 @@ var failnum=0;
 var passnum=0
 var passdata=[];
 var faildata=[];
-var num=1;
+var num=0;
 var hispass=[];
 var hisfail=[];
 var hisstack=[];
 var hisrate=[];
+var goodpass=[];
+var goodid=[];
+var goodfailrate=[];
+var badpass=[];
+var badid=[];
+var badfailrate=[];
 var t=0;
+var n=0;
+var flowID=1;
 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);
+    get_data("fcBiFlowDaily/list?type=" + num +"&flowId="+flowID, second_success);
     num++;
 }
+function chart_load_spots_data() {
+    get_data("fcBiWorkerDaily/get?type=0&limit=3", chart_success);
+
+}
+function chart1_load_spots_data() {
+    get_data("fcBiWorkerDaily/get?type=4&limit=3", chart1_success);
+
+}
 
 function first_success(obj, sta) {
     var output = first_parse(this, obj);
@@ -100,6 +116,9 @@ function first_success(obj, sta) {
     for(i=1;i<5;i++) {
         secondtime_load_spots_data();
     }
+    chart_load_spots_data();
+    chart1_load_spots_data();
+
 
 
 
@@ -108,33 +127,71 @@ function first_success(obj, sta) {
     setInterval(function(){
         get_data("fcWorkRaw/allSpots?flowId=" + thisPageFlow, realtime_success);
     },1000);
-    document.getElementById("test1").innerHTML = passnum;
-    document.getElementById("test2").innerHTML = failnum;
-    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[i].flowId == thisPageFlow) {
-            hispass[t] = history[t].flowPass;
-            hisfail[t] = history[t].flowFail;
-            hisstack[t] = 0;
+    console.log(" history : ");
+    console.log(history);
+    hispass[t] = 0;
+    hisfail[t] = 0;
+    hisstack[t] = 0;
+    hisrate[t]=0;
+    for(i=0;i<history.length;i++){
 
 
-            if (hispass[t] + hisfail[t] == 0) {
-                hisrate[t] = 0;
-            }
-            else {
-                hisrate[t] = hisfail[i] / (hispass[i] + hisfail[i]) * 100;
-            }
-            hisrate[t]=Math.floor(hisrate[t]);
+            hispass[t] = history[i].passNum+hispass[t];
+            hisfail[t] = history[i].failNum+hisfail[t];
+            hisstack[t] = history[i].avgDue+hisstack[t];
+            hisrate[t] = history[i].failRate;
+            hisrate[t]=hisrate[t]/100;
 
 
-            t++;
-        }
+       }
+       if(history.length!=1){
+        hisrate[t]=hisfail[t]/(hispass[t]+hisfail[t]);
+
     }
+    if(hispass[t]+hisfail[t]==0){
+        hisrate[t]=0;
+    }
+    t++;
+
+}
+function chart_success(obj, sta) {
+    var redchart = first_parse(this, obj);
+    var i, j;
+    i=j=0;
+    console.log(" redchart : ");
+    console.log(redchart);
+
+    for(i=0;i<3;i++){
+        goodid[i]=redchart.list[i].workerId;
+        goodpass[i]=redchart.list[i].passNum;
+        goodfailrate[i]=redchart.list[i].failRate/100;
+
+
+    }
+
+
+}
+function chart1_success(obj, sta) {
+    var blackchart = first_parse(this, obj);
+    var i, j;
+    i=j=0;
+    console.log(" black chart : ");
+    console.log(blackchart);
+
+    for(i=0;i<3;i++){
+        badid[i]=blackchart.list[i].workerId;
+        badpass[i]=blackchart.list[i].passNum;
+        badfailrate[i]=blackchart.list[i].failRate/100;
+
+
+    }
+
+
 }
 
 
@@ -163,10 +220,7 @@ function realtime_success(obj, sta) {
         stacknum = stackeverynum[i] + stacknum;
     }
     updateChart();
-    document.getElementById("test1").innerHTML = passnum;
-    document.getElementById("test2").innerHTML = failnum;
-    document.getElementById("test3").innerHTML = Math.floor(passnum/(passnum+failnum)*100)/100+'%';
-    document.getElementById("test4").innerHTML = stacknum;
+
 }
 
 function on_load_success_spots(obj, status) {

js/basic1.js

@@ -10,12 +10,44 @@ function get_data(url, callback) {
         sendTime: new Date()
     }).done(callback).fail(on_fail);
 }
+
+var faileverynum=[];
+var passeverynum=[];
+var stackeverynum=[];
+var failrate=[];
+var flowID=1;
+var num=0;
+var hispass=[];
+var hisfail=[];
+var hisstack=[];
+var hisrate=[];
+var goodpass=[];
+var goodid=[];
+var goodfailrate=[];
+var badpass=[];
+var badid=[];
+var badfailrate=[];
+var t=0;
+var n=0;
+
 function on_fail(msg) {
     alert("很抱歉，网络错误，请查看Console");
     console.log("-----   网络请求失败 ---------")
     console.log(JSON.stringify(this));
     console.log("----------------------------")
 }
+function secondtime_load_spots_data() {
+    get_data("fcBiFactoryDaily/list?type=" + num +"&flowId="+flowID, second_success);
+    num++;
+}
+function chart_load_spots_data() {
+    get_data("fcBiWorkerDaily/get?type=0&limit=3", chart_success);
+
+}
+function chart1_load_spots_data() {
+    get_data("fcBiWorkerDaily/get?type=4&limit=3", chart1_success);
+
+}
 function first_parse(ajax, obj) {
     if (typeof obj === "string") {
         obj = JSON.parse(obj);
@@ -34,10 +66,7 @@ function first_parse(ajax, obj) {
     }
 }
 
-var faileverynum=[];
-var passeverynum=[];
-var stackeverynum=[];
-var failrate=[];
+
 function on_document_load() {
 
     get_data("fcWorkRaw/allFlows" , on_load_success_spots)
@@ -71,15 +100,86 @@ function on_load_success_spots(obj, status) {
         }
 
     }
-
+    for(i=1;i<5;i++) {
+        secondtime_load_spots_data();
+    }
+    chart_load_spots_data();
+    chart1_load_spots_data();
 
 
     showChart();
+
     setInterval(function(){
         get_data("fcWorkRaw/allFlows" , realtime_success);
     },1000);
 }
 
+function second_success(obj, sta) {
+    var history = first_parse(this, obj);
+    var i, j;
+    console.log(" history : ");
+    console.log(history);
+    hispass[t] = 0;
+    hisfail[t] = 0;
+    hisstack[t] = 0;
+    hisrate[t]=0;
+    for(i=0;i<history.length;i++){
+
+
+        hispass[t] = history[i].passNum+hispass[t];
+        hisfail[t] = history[i].failNum+hisfail[t];
+        hisstack[t] = history[i].avgDue+hisstack[t];
+        hisrate[t] = history[i].failRate;
+        hisrate[t]=hisrate[t]/100;
+
+
+    }
+    if(history.length!=1){
+        hisrate[t]=hisfail[t]/(hispass[t]+hisfail[t]);
+
+    }
+    if(hispass[t]+hisfail[t]==0){
+        hisrate[t]=0;
+    }
+    t++;
+
+}
+function chart_success(obj, sta) {
+    var redchart = first_parse(this, obj);
+    var i, j;
+    i=j=0;
+    console.log(" redchart : ");
+    console.log(redchart);
+
+    for(i=0;i<3;i++){
+        goodid[i]=redchart.list[i].workerId;
+        goodpass[i]=redchart.list[i].passNum;
+        goodfailrate[i]=redchart.list[i].failRate/100;
+
+
+    }
+
+
+}
+function chart1_success(obj, sta) {
+    var blackchart = first_parse(this, obj);
+    var i, j;
+    i=j=0;
+    console.log(" black chart : ");
+    console.log(blackchart);
+
+    for(i=0;i<3;i++){
+        badid[i]=blackchart.list[i].workerId;
+        badpass[i]=blackchart.list[i].passNum;
+        badfailrate[i]=blackchart.list[i].failRate/100;
+
+
+    }
+
+
+}
+
+
 function realtime_success(obj, sta) {
 
     var output = first_parse(this, obj);

lazhang.html

@@ -315,9 +315,17 @@
             <thead>
             <tr >
                 <th scope="col" colspan="4">红榜</th>
+
+            </tr>
+            <tr >
+                <th >人员</th>
+                <th >良品数</th>
+                <th >人员</th>
+                <th >不良率</th>
+
             </tr>
             </thead>
-            <tbody>
+            <tbody id="rank-two">
             <tr>
                 <th scope="row">1</th>
                 <td>Mark</td>
@@ -350,8 +358,15 @@
             <tr >
                 <th scope="col" colspan="4">黑榜</th>
             </tr>
+            <tr >
+                <th >人员</th>
+                <th >良品数</th>
+                <th >人员</th>
+                <th >不良率</th>
+
+            </tr>
             </thead>
-            <tbody>
+            <tbody id="rank-three">
             <tr>
                 <th scope="row">1</th>
                 <td>Mark</td>
@@ -603,17 +618,29 @@
         htmlbody += "</tr>";
         return htmlbody;
     }
-   /* function getSpotHtml(htmlbody, one_person, i) {
+    function getSpotHtml1(htmlbody,  i) {
         htmlbody += "<tr>";
         htmlbody += `<tr>
-                                            <td>${timeday[i]}</td>
-                                            <td>${hispass[i]}</td>
-                                            <td>${hisfail[i]}</td>
-                                            <td>${hisrate[i]}</td>
+                                            <td>${goodid[i]}</td>
+                                            <td>${goodpass[i]}</td>
+                                            <td>${goodid[i]}</td>
+                                            <td>${goodfailrate[i]}</td>
                                         </tr>`;
         htmlbody += "</tr>";
         return htmlbody;
-    }*/
+    }
+    function getSpotHtml2(htmlbody,  i) {
+        htmlbody += "<tr>";
+        htmlbody += `<tr>
+                                            <td>${badid[i]}</td>
+                                            <td>${badpass[i]}</td>
+                                            <td>${badid[i]}</td>
+                                            <td>${badfailrate[i]}</td>
+                                        </tr>`;
+        htmlbody += "</tr>";
+        return htmlbody;
+    }
+
 
     function showEachSpot() {
         var htmlbody = "", one_person = "";
@@ -628,33 +655,33 @@
         $("#rank-one").html(htmlbody);
         console.log(htmlbody);
     }
-   /* function showEachSpot() {
+    function showEachSpot1() {
         var htmlbody = "", one_person = "";
         var i = 0;
-        var triGap = Math.floor(sID.length / 3) + 1;
-        var remain = sID.length - triGap * 2;
-        htmlbody = "";
-        for (i = 0; i < triGap; i++) {
-            one_person = namedata[i];
-            htmlbody = getSpotHtml(htmlbody, one_person, i);
-        }
-        $("#rank-one").html(htmlbody);
+        var triGap = 3;
 
         htmlbody = "";
         for (i = 0; i < triGap; i++) {
-            one_person = namedata[i + triGap];
-            htmlbody = getSpotHtml(htmlbody, one_person, i + triGap);
+
+            htmlbody = getSpotHtml1(htmlbody, i);
         }
-        console.log(htmlbody);
         $("#rank-two").html(htmlbody);
+        console.log(htmlbody);
+    }
+    function showEachSpot2() {
+        var htmlbody = "", one_person = "";
+        var i = 0;
+        var triGap = 3;
 
         htmlbody = "";
-        for (i = 0; i < remain; i++) {
-            one_person = namedata[i + triGap * 2];
-            htmlbody = getSpotHtml(htmlbody, one_person, i + triGap * 2);
+        for (i = 0; i < triGap; i++) {
+
+            htmlbody = getSpotHtml2(htmlbody, i);
         }
         $("#rank-three").html(htmlbody);
-    }*/
+        console.log(htmlbody);
+    }
+
 
     var thisPageFlow = 1;
 
@@ -681,6 +708,9 @@
         }
 
         showEachSpot();
+        showEachSpot1();
+        showEachSpot2();
+
 
         stackmax = Math.max(stackmax, 5);
         failmax = Math.max(failmax, 5);
@@ -869,6 +899,9 @@
 
 
          showEachSpot();
+        showEachSpot1();
+        showEachSpot2();
+
     }
 
     var stackAndFailChart = null;