Home Explore Help
Register Sign In
factory18
/
fronend
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Change stuff and realtime JS made

Guichuan Yu 6 years ago
parent
f2dc5d64f9
commit
c173b4c3ca
5 changed files with 329 additions and 31 deletions
Unified View Show Diff Stats
  1. 205 22
      dapingmu.html
  2. 1 1
      example.html
  3. 2 1
      js/basic.js
  4. 107 0
      js/basic1.js
  5. 14 7
      lazhang.html

+ 205 - 22
dapingmu.html
View File 

@@ -79,23 +79,19 @@
 
 
 
 </head>
 
 </head>
 
 
 
-<body  class="theme-red" style="height: 100%" onload="startTime()">
 
+<body  class="theme-red" style="height: 100%;background-color: #17253f !important;" onload="startTime()">
 
     <section class="content" style="margin: 0 auto;height: 100%">
 
     <section class="content" style="margin: 0 auto;height: 100%">
 
-        <div class="row" style="font-size: 2em;height: 7%;background-color: black">
 
-
 
-            <div class="col-6 text-right"  style="color: #ffffff">大屏幕产能监控系统</div>
 
-            <div class="col-6 text-left" ><font color="black" style="color: #ffffff"><span id="nowDateTimeSpan"></span></font></div>
 
-
 
-
 
-        </div>
 
-        <script>
 
-            function addContent(name){
 
-                console.log( $(name));
 
-                $(name).tab('show');
 
-            }
 
-        </script>
 
-            <!-- #END# CPU Usage -->
 
-            <div class="row clearfix" style="height: 13%">
 
+        <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>
 
+        <!-- #END# CPU Usage -->
 
+        <div class="row clearfix" style="height: 13%">
 
                 <!-- Visitors -->
 
                 <!-- Visitors -->
 
                 <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
 
                 <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
 
                     <div class="card" style="margin-bottom: 0.2em">
 
                     <div class="card" style="margin-bottom: 0.2em">
 
@@ -130,8 +126,8 @@
 
                 <!-- #END# Answered Tickets -->
 
                 <!-- #END# Answered Tickets -->
 
             </div>
 
             </div>
 
         <div class="container-fluid" style="height: 80%">
 
         <div class="container-fluid" style="height: 80%">
 
-            <div id="container3" style="height:50%"></div>
 
-            <div id="container5" style="height:50%;padding-top: 0.2em"></div>
 
+            <div id="graph-1" ></div>
 
+            <div id="graph-2" ></div>
 
         </div>
 
         </div>
 
 
 
 
 
@@ -172,13 +168,15 @@
 
     <!-- Sparkline Chart Plugin Js -->
 
     <!-- Sparkline Chart Plugin Js -->
 
     <script src="plugins/jquery-sparkline/jquery.sparkline.js"></script>
 
     <script src="plugins/jquery-sparkline/jquery.sparkline.js"></script>
 
 
 
-    <!-- Custom Js -->
 
-    <!--<script src="js/admin.js"></script>
 
-    <script src="js/pages/index.js"></script>
 
+    <script src="js/admin.js"></script>
 
+    <!--<script src="js/pages/index.js"></script>-->
 
 
 
     <!-- Demo Js -->
 
     <!-- Demo Js -->
 
+    <script src="js/demo.js"></script>
 
+
 
     <!--<script src="js/demo.js"></script> -->
 
     <!--<script src="js/demo.js"></script> -->
 
-    <script src="js/basic.js"></script>
 
+    <script src="js/basic1.js"></script>
 
+
 
     <script>
 
     <script>
 
         var chart = Highcharts.chart('container1', {
 
         var chart = Highcharts.chart('container1', {
 
             chart: {
 
             chart: {
 
@@ -538,6 +536,191 @@
 
             }]
 
             }]
 
         });
 
         });
 
     </script>
 
     </script>
 
+    <script>
 
+        function showChart() {
 
+
 
+            var stackdata = [];
 
+            var passdata=[];
 
+            var faildata=[];
 
+            var failrate=[];
 
+            var failmax=0;
 
+            for (i = 0; i < passNumber.length; i++) {
 
+                passdata.push(passeverynum[i]);
 
+                faildata.push(faileverynum[i]);
 
+                stackdata.push(0);
 
+                failrate.push(failrate[i])
 
+                if (failmax < failrate[i]) {
 
+                    failmax = failrate[i];
 
+                }
 
+            }
 
+
 
+            //showEachSpot();
 
+            failmax = Math.max(failmax, 5);
 
+            stackAndFailChart = Highcharts.chart('graph-1', {
 
+                chart: {
 
+                    zoomType: 'xy',
 
+                    height: (4 / 16 * 100) + '%' // 16:9 ratio
 
+                },
 
+                title: {
 
+                    text: '各产线今日产能'
 
+                },
 
+                credits: {
 
+                    enabled: false // 禁用版权信息
 
+                },
 
+                exporting: {
 
+                    enabled: false
 
+                },
 
+                xAxis: [{
 
+                    crosshair: true,
 
+                    labels: {
 
+                        style: {
 
+                            fontSize: '1.5em'
 
+                        }
 
+                    }
 
+                }],
 
+                yAxis: [{ // Primary yAxis
 
+                    labels: {
 
+                        format: '{value}',
 
+                        style: {
 
+                            color: Highcharts.getOptions().colors[0],
 
+                            fontSize: '1.5em'
 
+                        }
 
+                    },
 
+                    min: 0,
 
+                    max: 10000,
 
+                    title: {
 
+
 
+                        style: {
 
+                            color: Highcharts.getOptions().colors[0],
 
+                            fontSize: '1em'
 
+                        }
 
+                    }
 
+                },
 
+                ],
 
+                tooltip: {
 
+                    shared: true
 
+                },
 
+                legend: {
 
+                    layout: 'vertical',
 
+                    align: 'right',
 
+                    x: -100,
 
+                    verticalAlign: 'top',
 
+                    y: 0,
 
+                    floating: true,
 
+                    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
 
+                },
 
+                series: [{
 
+                    type: 'column',
 
+                    data: passdata,
 
+
 
+                }, {
 
+                    type: 'column',
 
+                    data: faildata,
 
+
 
+                },
 
+                    {
 
+                        type: 'column',
 
+                        data: stackdata,
 
+
 
+                    },]
 
+            });
 
+            FailChart = Highcharts.chart('graph-2', {
 
+                chart: {
 
+
 
+                    height: (4 / 16 * 100) + '%' // 16:9 ratio
 
+                },
 
+                title: {
 
+                    text: '各产线今日不良率'
 
+                },
 
+                credits: {
 
+                    enabled: false // 禁用版权信息
 
+                },
 
+                exporting: {
 
+                    enabled: false
 
+                },
 
+                xAxis: [{
 
+                    crosshair: true,
 
+                    labels: {
 
+                        style: {
 
+                            fontSize: '1.5em'
 
+                        }
 
+                    }
 
+                }],
 
+                yAxis: [ { // Secondary yAxis
 
+                    title: {
 
+                        text: '不良率',
 
+                        style: {
 
+                            color: 'red',
 
+                            fontSize: '1em'
 
+                        }
 
+                    },
 
+                    min: 0,
 
+                    max: 1.5 * failmax,
 
+                    labels: {
 
+                        formatter: function () {
 
+                            return Math.floor(this.value) + "%";
 
+                        },
 
+                        style: {
 
+                            color: 'red',
 
+                            fontSize: '20px'
 
+                        }
 
+                    },
 
+
 
+                }],
 
+                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: '不良率',
 
+                    type: 'spline',
 
+
 
+                    data: failrate,
 
+                    color: 'red',
 
+                    tooltip: {
 
+                        valueSuffix: '%'
 
+                    }
 
+                }]
 
+            });
 
+
 
+        }
 
+        function updateChart() {
 
+            var stackdata = [];
 
+            var passdata=[];
 
+            var faildata=[];
 
+            var failrate=[];
 
+            for (i = 0; i < passNumber.length; i++) {
 
+                passdata.push(passeverynum[i]);
 
+                faildata.push(faileverynum[i]);
 
+                stackdata.push(0);
 
+                failrate.push(failrate[i])
 
+
 
+            }
 
+
 
+
 
+            // https://api.hcharts.cn/highcharts#Series.addPoint;
 
+            stackAndFailChart.series[0].setData(passdata);
 
+            stackAndFailChart.series[1].setData(faildata);
 
+            stackAndFailChart.series[2].setData(stackdata);
 
+            FailChart.series[0].setData(failrate);
 
+
 
+
 
+            // showEachSpot();
 
+        }
 
+
 
+        var stackAndFailChart = null;
 
+        var FailChart = null;
 
+
 
+        $(document).ready(on_document_load);
 
+    </script>
 
 </body>
 
 </body>
 
 
 
 </html>
 
 </html>

+ 1 - 1
example.html
View File 

@@ -374,7 +374,7 @@
 
 <script src="js/basic.js"></script>
 
 <script src="js/basic.js"></script>
 
 
 
 <script>
 
 <script>
 
-    var thisPageFlow = 1;
 
+
 
     function showChart() {
 
     function showChart() {
 
 
 
         var data = [];
 
         var data = [];

+ 2 - 1
js/basic.js
View File 

@@ -51,7 +51,8 @@ var stacknum = 0;
 
 var stackeverynum = [];
 
 var stackeverynum = [];
 
 var failnum=0;
 
 var failnum=0;
 
 var passnum=0
 
 var passnum=0
 
-
 
+var passdata=[];
 
+var faildata=[];
 
 function firsttime_load_spots_data() {
 
 function firsttime_load_spots_data() {
 
     get_data("fcWorkRaw/allSpots?flowId=" + thisPageFlow, first_success)
 
     get_data("fcWorkRaw/allSpots?flowId=" + thisPageFlow, first_success)
 
 }
 
 }

+ 107 - 0
js/basic1.js
View File 

@@ -0,0 +1,107 @@
 
+var SVR_URL = "/server/";  //http://172.30.84.3:8803
 
+if(location.host.indexOf("niimei") === -1){
 
+    SVR_URL = "http://172.30.84.3:8803/server/";
 
+}
 
+
 
+function get_data(url, callback) {
 
+    $.ajax({
 
+        url: SVR_URL + url,
 
+        apiName: url,
 
+        sendTime: new Date()
 
+    }).done(callback).fail(on_fail);
 
+}
 
+function on_fail(msg) {
 
+    alert("很抱歉，网络错误，请查看Console");
 
+    console.log("-----   网络请求失败 ---------")
 
+    console.log(JSON.stringify(this));
 
+    console.log("----------------------------")
 
+}
 
+function first_parse(ajax, obj) {
 
+    if (typeof obj === "string") {
 
+        obj = JSON.parse(obj);
 
+    }
 
+
 
+    if (typeof obj !== "object") {
 
+        console.log(ajax);
 
+        throw "Error ! Parsing JSON failed ." + JSON.stringify(obj);
 
+    }
 
+
 
+    if (obj.ret == "10000" || obj.ret == 10000 || obj.ret == 1000) {
 
+        return obj.model;
 
+    } else {
 
+        console.log(ajax);
 
+        throw "Error ! Server returned error." + JSON.stringify(obj);
 
+    }
 
+}
 
+
 
+var faileverynum=[];
 
+var passeverynum=[];
 
+var stackeverynum=[];
 
+var failrate=[];
 
+function on_document_load() {
 
+
 
+    get_data("fcWorkRaw/allFlows" , on_load_success_spots)
 
+}
 
+
 
+function on_load_success_spots(obj, status) {
 
+    var spotsList = first_parse(this, obj);
 
+    //在这里排序 spo\
 
+    console.log("spot List : ");
 
+    console.log(spotsList);
 
+
 
+    var i, j, temp=[];
 
+    for (i = 0; i < spotsList.length - 1; i++) {
 
+        for (j = 0; j < spotsList.length - i - 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++) {
 
+        passeverynum[i] = spotsList[i].flowPass;
 
+        faileverynum[i] = spotsList[i].flowFail;
 
+        stackeverynum[i] = 0;
 
+    }
 
+    for (i = 0; i < spotsList.length - 1; i++) {
 
+        if (passeverynum[i] + faileverynum[i] == 0) {
 
+            failrate[i] = 0;
 
+        }
 
+        else {
 
+            failrate[i] = faileverynum[i] / (faileverynum[i] + passeverynum[i]) * 100;
 
+        }
 
+
 
+    }
 
+
 
+
 
+
 
+    showChart();
 
+    setInterval(function(){
 
+        get_data("fcWorkRaw/allFlows" , realtime_success);
 
+    },1000);
 
+}
 
+
 
+function realtime_success(obj, sta) {
 
+
 
+    var output = first_parse(this, obj);
 
+    var i, j;
 
+    for (i = 0; i < output.length - 1; i++) {
 
+        passeverynum[i] = output[i].flowPass;
 
+        faileverynum[i] = output[i].flowFail;
 
+        stackeverynum[i] = 0
 
+    }
 
+    for (i = 0; i < output.length - 1; i++) {
 
+        if (passeverynum[i] + faileverynum[i] == 0) {
 
+            failrate[i] = 0;
 
+        }
 
+        else {
 
+            failrate[i] = faileverynum[i] / (faileverynum[i] + passeverynum[i]) * 100;
 
+        }
 
+
 
+    }
 
+
 
+    updateChart();
 
+
 
+}
 
+

+ 14 - 7
lazhang.html
View File 

@@ -714,7 +714,7 @@
 
         });
 
         });
 
         FailChart = Highcharts.chart('graph-2', {
 
         FailChart = Highcharts.chart('graph-2', {
 
             chart: {
 
             chart: {
 
-                zoomType: 'xy',
 
+
 
                 height: (4 / 16 * 100) + '%' // 16:9 ratio
 
                 height: (4 / 16 * 100) + '%' // 16:9 ratio
 
             },
 
             },
 
             title: {
 
             title: {
 
@@ -765,7 +765,7 @@
 
             tooltip: {
 
             tooltip: {
 
                 shared: true
 
                 shared: true
 
             },
 
             },
 
-            legend: {
 
+           legend: {
 
                 layout: 'vertical',
 
                 layout: 'vertical',
 
                 align: 'right',
 
                 align: 'right',
 
                 x: -120,
 
                 x: -120,
 
@@ -777,7 +777,7 @@
 
             series: [{
 
             series: [{
 
                 name: '不良率',
 
                 name: '不良率',
 
                 type: 'spline',
 
                 type: 'spline',
 
-                yAxis: 1,
 
+
 
                 data: ratedata,
 
                 data: ratedata,
 
                 color: 'red',
 
                 color: 'red',
 
                 tooltip: {
 
                 tooltip: {
 
@@ -793,7 +793,8 @@
 
         var ratedata = [];
 
         var ratedata = [];
 
         var stackmax = 0;
 
         var stackmax = 0;
 
         var failmax = 0;
 
         var failmax = 0;
 
-
 
+        var passdata=[];
 
+        var faildata=[];
 
         for (i = 0; i < passNumber.length; i++) {
 
         for (i = 0; i < passNumber.length; i++) {
 
             if (stackmax < stackeverynum[i]) {
 
             if (stackmax < stackeverynum[i]) {
 
                 stackmax = stackeverynum[i];
 
                 stackmax = stackeverynum[i];
 
@@ -803,14 +804,20 @@
 
             }
 
             }
 
             data.push(stackeverynum[i]);
 
             data.push(stackeverynum[i]);
 
             ratedata.push(Math.floor(failrate[i]));
 
             ratedata.push(Math.floor(failrate[i]));
 
+            passdata.push(passNumber[i]);
 
+            faildata.push(failNumber[i])
 
         }
 
         }
 
 
 
         stackmax = Math.max(stackmax, 5);
 
         stackmax = Math.max(stackmax, 5);
 
         failmax = Math.max(failmax, 5);
 
         failmax = Math.max(failmax, 5);
 
         // https://api.hcharts.cn/highcharts#Series.addPoint;
 
         // https://api.hcharts.cn/highcharts#Series.addPoint;
 
-        stackAndFailChart.series[0].setData(data);
 
-        stackAndFailChart.series[1].setData(ratedata);
 
-       // showEachSpot();
 
+        stackAndFailChart.series[0].setData(passdata);
 
+        stackAndFailChart.series[1].setData(faildata);
 
+        stackAndFailChart.series[2].setData(data);
 
+        FailChart.series[0].setData(ratedata);
 
+
 
+
 
+        // showEachSpot();
 
     }
 
     }
 
 
 
     var stackAndFailChart = null;
 
     var stackAndFailChart = null;