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
c6395b7bc5
commit
e03c7a5d57
4 changed files with 135 additions and 75 deletions
Unified View Show Diff Stats
  1. 42 36
      dapingmu.html
  2. 45 2
      example.html
  3. 9 0
      js/basic.js
  4. 39 37
      lazhang.html

+ 42 - 36
dapingmu.html
View File 

@@ -1,4 +1,4 @@
 
-<!DOCTYPE html>
 
+<!DOCTYPE html>
 
 <html style="height: 100%">
 
 <html style="height: 100%">
 
 
 
 <head>
 
 <head>
 
@@ -41,45 +41,50 @@
 
     <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
 
     <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/modules/exporting.js"></script>
 
     <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
 
     <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
 
-    <script>
 
-        var timer=null;
 
-        function displayClock(num){//num是传入的startClock中的动态值
 
-            if(num<10){
 
-                return "0"+num;
 
-            }
 
-            else{
 
-                return num;
 
-            }
 
-        }
 
-        //停止计时
 
-        function stopClock(){
 
-            clearTimeout(timer);
 
+    <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 startClock(){
 
-            var time =new Date();
 
-            var hours=displayClock(time.getHours())+":";
 
-            var minutes=displayClock(time.getMinutes())+":";
 
-            var seconds=displayClock(time.getSeconds());
 
-            //显示时间
 
-            show.innerHTML=hours+minutes+seconds;//在id为show的块区域显示
 
-            timer=setTimeout("startClock()",1000);//延时器
 
+
 
+        function checkTime(i)
 
+        {
 
+            if (i<10){
 
+                i="0" + i;
 
+            }
 
+            return i;
 
         }
 
         }
 
     </script>
 
     </script>
 
+
 
 </head>
 
 </head>
 
-<style>
 
-    #show{
 
-        font-size: 30px;
 
-        color:#black;
 
-        text-align:center;
 
-    }
 
-</style>
 
-<body onload="startClock()" onunload="stopClock()" class="theme-red" style="height: 100%">
 
+
 
+<body  class="theme-red" style="height: 100%" 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%">
 
+        <div class="row" style="font-size: 2em;height: 7%;background-color: black">
 
 
 
-            <div class="col-6 text-right" >大屏幕产能监控系统</div>
 
-            <div class="col-6 text-left" id="show" ></div>
 
+            <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>
 
         </div>
 
@@ -168,11 +173,12 @@
 
     <script src="plugins/jquery-sparkline/jquery.sparkline.js"></script>
 
     <script src="plugins/jquery-sparkline/jquery.sparkline.js"></script>
 
 
 
     <!-- Custom Js -->
 
     <!-- Custom Js -->
 
-    <script src="js/admin.js"></script>
 
+    <!--<script src="js/admin.js"></script>
 
     <script src="js/pages/index.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/basic.js"></script>
 
     <script>
 
     <script>
 
         var chart = Highcharts.chart('container1', {
 
         var chart = Highcharts.chart('container1', {
 
             chart: {
 
             chart: {

+ 45 - 2
example.html
View File 

@@ -1,9 +1,10 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
-<html lang="en">
 
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta http-equiv="X-UA-Compatible" content="IE=Edge">
 
     <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">
 
     <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
 
+    <meta http-equiv="Content-Type" content="text/html"/>
 
     <title>流水线管理页</title>
 
     <title>流水线管理页</title>
 
     <!-- Favicon-->
 
     <!-- Favicon-->
 
     <link rel="icon" href="favicon.ico" type="image/x-icon">
 
     <link rel="icon" href="favicon.ico" type="image/x-icon">
 
@@ -48,8 +49,50 @@
 
     <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
 
     <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/modules/exporting.js"></script>
 
     <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
 
     <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.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 +" " + hh+":"+mm+":"+ss+"   " + day;
 
+            setTimeout('startTime()',1000);//每一秒中重新加载startTime()方法
 
+        }
 
+
 
+        function checkTime(i)
 
+        {
 
+            if (i<10){
 
+                i="0" + i;
 
+            }
 
+            return i;
 
+        }
 
+    </script>
 
+    <style>
 
+
 
+        .time1{width:100%; height:50px; background:#FFF000; line-height:50px; text-align:center;}
 
+
 
+    </style>
 
 </head>
 
 </head>
 
-<body>
 
+    <body onload="startTime()">
 
+当前时间：<font color="black"><span id="nowDateTimeSpan"></span></font>
 
+
 
 
 
 <div class="row">
 
 <div class="row">
 
     <div class=" col-lg-3 col-md-3 col-sm-6 col-xs-12">
 
     <div class=" col-lg-3 col-md-3 col-sm-6 col-xs-12">

+ 9 - 0
js/basic.js
View File 

@@ -49,6 +49,8 @@ var failNumber = [];
 
 var failrate = [];
 
 var failrate = [];
 
 var stacknum = 0;
 
 var stacknum = 0;
 
 var stackeverynum = [];
 
 var stackeverynum = [];
 
+var failnum=0;
 
+var passnum=0
 
 
 
 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)
 
@@ -62,9 +64,11 @@ function first_success(obj, sta) {
 
     var i, j;
 
     var i, j;
 
     for (i = 0; i < output.length - 1; i++) {
 
     for (i = 0; i < output.length - 1; i++) {
 
         passNumber[i] = output[i].passNum;
 
         passNumber[i] = output[i].passNum;
 
+        passnum=passNumber[i]+passnum;
 
     }
 
     }
 
     for (i = 0; i < output.length - 1; i++) {
 
     for (i = 0; i < output.length - 1; i++) {
 
         failNumber[i] = output[i].failNum;
 
         failNumber[i] = output[i].failNum;
 
+        failnum=failNumber[i]+failnum;
 
     }
 
     }
 
     for (i = 0; i < output.length - 1; i++) {
 
     for (i = 0; i < output.length - 1; i++) {
 
         if (failNumber[i] + passNumber[i] == 0) {
 
         if (failNumber[i] + passNumber[i] == 0) {
 
@@ -85,6 +89,10 @@ function first_success(obj, sta) {
 
     setInterval(function(){
 
     setInterval(function(){
 
         get_data("fcWorkRaw/allSpots?flowId=" + thisPageFlow, realtime_success);
 
         get_data("fcWorkRaw/allSpots?flowId=" + thisPageFlow, realtime_success);
 
     },1000);
 
     },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 realtime_success(obj, sta) {
 
 function realtime_success(obj, sta) {
 
@@ -148,3 +156,4 @@ function on_document_load() {
 
 
 
 
 
 var namedata = [];
 
 var namedata = [];
 
+

+ 39 - 37
lazhang.html
View File 

@@ -48,48 +48,50 @@
 
     <script src="https://img.hcharts.cn/highcharts/modules/exporting.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-plugins/highcharts-zh_CN.js"></script>
 
     <script src="https://img.hcharts.cn/highcharts/themes/dark-unica.js"></script>
 
     <script src="https://img.hcharts.cn/highcharts/themes/dark-unica.js"></script>
 
-    <script>
 
-        var timer = null;
 
-
 
-        function displayClock(num) {//num是传入的startClock中的动态值
 
-            if (num < 10) {
 
-                return "0" + num;
 
-            }
 
-            else {
 
-                return num;
 
-            }
 
-        }
 
-
 
-        //停止计时
 
-        function stopClock() {
 
-            clearTimeout(timer);
 
+    <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 +" " + hh+":"+mm+":"+ss+"   " + day;
 
+            setTimeout('startTime()',1000);//每一秒中重新加载startTime()方法
 
         }
 
         }
 
 
 
-        //开始计时
 
-        function startClock() {
 
-            var time = new Date();
 
-            var hours = displayClock(time.getHours()) + ":";
 
-            var minutes = displayClock(time.getMinutes()) + ":";
 
-            var seconds = displayClock(time.getSeconds());
 
-            //显示时间
 
-            $("#clockt").innerHTML = hours + minutes + seconds;//在id为show的块区域显示
 
-            timer = setTimeout("startClock()", 1000);//延时器
 
+        function checkTime(i)
 
+        {
 
+            if (i<10){
 
+                i="0" + i;
 
+            }
 
+            return i;
 
         }
 
         }
 
     </script>
 
     </script>
 
 </head>
 
 </head>
 
-<style>
 
-    #show1 {
 
-        font-size: 30px;
 
-        color: black;
 
-        text-align: center;
 
-    }
 
-</style>
 
-<body class="theme-black" style="background-color: #17253f !important;">
 
+
 
+<body class="theme-black" style="background-color: #17253f !important;" onload="startTime()">
 
 <nav class="navbar">
 
 <nav class="navbar">
 
     <div class="container-fluid">
 
     <div class="container-fluid">
 
         <div class="navbar-header">
 
         <div class="navbar-header">
 
             <a class="navbar-brand" href="index.html">工厂产能监控系统</a>
 
             <a class="navbar-brand" href="index.html">工厂产能监控系统</a>
 
         </div>
 
         </div>
 
+        <font color="#ffffff"><span id="nowDateTimeSpan"></span></font>
 
         <div class="collapse navbar-collapse" id="navbar-collapse">
 
         <div class="collapse navbar-collapse" id="navbar-collapse">
 
             <ul class="nav navbar-nav navbar-right">
 
             <ul class="nav navbar-nav navbar-right">
 
                 <!-- Call Search -->
 
                 <!-- Call Search -->
 
@@ -331,7 +333,7 @@
 
 </nav>-->
 
 </nav>-->
 
 <section class="content" style="margin: 0 auto; margin-top: 100px;">
 
 <section class="content" style="margin: 0 auto; margin-top: 100px;">
 
     <div class="row"></div>
 
     <div class="row"></div>
 
-    <div class="container-fluid " style="margin-bottom: 1em">
 
+    <div class="container-fluid " style="margin-bottom: 1em;">
 
         <div class="row text-center">
 
         <div class="row text-center">
 
             <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
 
             <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
 
                 <div class="info-box bg-green hover-expand-effect" style="margin: 0;">
 
                 <div class="info-box bg-green hover-expand-effect" style="margin: 0;">
 
@@ -341,7 +343,7 @@
 
                     <div class="content">
 
                     <div class="content">
 
                         <div class="row text-center" style="margin: 0 auto">
 
                         <div class="row text-center" style="margin: 0 auto">
 
                             <div class="text" style="font-size: 1.5em;padding-top: 0.2em">合格数:</div>
 
                             <div class="text" style="font-size: 1.5em;padding-top: 0.2em">合格数:</div>
 
-                            <div class="number" style="font-size: 3em">555</div>
 
+                            <div class="number" style="font-size: 3em" id="test1"></div>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
@@ -354,7 +356,7 @@
 
                     <div class="content">
 
                     <div class="content">
 
                         <div class="row text-center" style="margin: 0 auto">
 
                         <div class="row text-center" style="margin: 0 auto">
 
                             <div class="text" style="font-size: 1.5em;padding-top: 0.2em">不合格数:</div>
 
                             <div class="text" style="font-size: 1.5em;padding-top: 0.2em">不合格数:</div>
 
-                            <div class="number" style="font-size: 3em">5255</div>
 
+                            <div class="number" style="font-size: 3em" id="test2"></div>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
@@ -367,7 +369,7 @@
 
                     <div class="content">
 
                     <div class="content">
 
                         <div class="row text-center" style="margin: 0 auto">
 
                         <div class="row text-center" style="margin: 0 auto">
 
                             <div class="text" style="font-size: 1.5em;padding-top: 0.2em">合格率:</div>
 
                             <div class="text" style="font-size: 1.5em;padding-top: 0.2em">合格率:</div>
 
-                            <div class="number" style="font-size: 3em">55%</div>
 
+                            <div class="number" style="font-size: 3em" id="test3"></div>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
@@ -380,7 +382,7 @@
 
                     <div class="content">
 
                     <div class="content">
 
                         <div class="row text-center" style="margin: 0 auto">
 
                         <div class="row text-center" style="margin: 0 auto">
 
                             <div class="text" style="font-size: 1.5em;padding-top: 0.2em">堆积数:</div>
 
                             <div class="text" style="font-size: 1.5em;padding-top: 0.2em">堆积数:</div>
 
-                            <div class="number" style="font-size: 3em">235</div>
 
+                            <div class="number" style="font-size: 3em" id="test4"></div>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>