完善

css/index.css

@@ -37,7 +37,13 @@ body {
 }
 
 .openWebsocket {
-    cursor: pointer
+    cursor: pointer;
+    margin-right: 10px;
+}
+
+.closeWebsocket {
+    cursor: not-allowed;
+    opacity: .5
 }
 
 .param-sec input {
@@ -59,14 +65,25 @@ body {
     margin-top: 30px;
     width: 100%;
     height: calc(100vh - 340px);
+    /* height: 100vh; */
     border: 1px solid #000;
     overflow-y: auto;
 }
 
-.send-request {
-    margin-bottom: 40px
+.receive-time {
+    color: blue
+}
+
+.send-time {
+    color: green
+}
+
+.send-status {
+    color: red
 }
 
+.send-status,
+.send-request,
 .send-time,
 .receive-time,
 .receive-request {

index.html

@@ -16,13 +16,14 @@
         <div class="connect-sec">
             <div class="filter-item">
                 <span>服务端IP:</span>
-                <input type="text" placeholder="192.168.11">
+                <input type="text" id="ip" placeholder="请输入ip地址" value="wss://iot.usky.cn">
             </div>
             <div class="filter-item">
                 <span>服务端口:</span>
-                <input type="text" placeholder="6601" style="width:40px">
+                <input type="text" id="sort" placeholder="请输入端口" value="55120" style="width:40px">
             </div>
             <button class="openWebsocket">打开websocket</button>
+            <button class="closeWebsocket">断开websocket</button>
         </div>
 
         <div class="param-sec">
@@ -57,7 +58,7 @@
 
         <div class="button-sec">
             <button class="siteCondition">站点工况</button>
-            <button>站点详情</button>
+            <button class="siteDetail">站点详情</button>
             <button>设备采集</button>
             <button>点位数据</button>
             <button>巡检记录</button>
@@ -65,22 +66,23 @@
         </div>
 
         <div class="data-view">
-            <div class="send-time">
-                <!-- [2016-06-17 15:31:21 发出] -->
-            </div>
-            <pre class="send-request">
-            </pre>
-
-            <div class="receive-time"></div>
-            <pre class="receive-request">
-            </pre>
+            <div class="send-status"></div>
+            <!-- <div class="send-time"> -->
+            <!-- [2016-06-17 15:31:21 发出] -->
         </div>
+        <!-- <pre class="send-request">
+            </pre> -->
+
+        <!-- <div class="receive-time"></div> -->
+        <!-- <pre class="receive-request">
+            </pre> -->
+    </div>
 
 
     </div>
     <script src="js/jquery.js"></script>
     <script src="js/util.js"></script>
-    <script src="js/index2.js"></script>
+    <script src="js/index.js"></script>
     <script>
     </script>
 

js/index.js

@@ -1,43 +1,59 @@
  // 站点工况（websocket实时推送）
  (function() {
-     var flag = false;
-     var aa = false;
-     var arrData = [];
-     var wsUri = "wss://iot.usky.cn:55120";
+
+
      var websocket;
 
+     var isOpen = false;
+
      function initWebSocket() {
          try {
              if (typeof MozWebSocket == 'function')
                  WebSocket = MozWebSocket;
+
+             var address = $('#ip').val() + ':' + $('#sort').val()
+             var arrData = [];
+             var wsUri = address;
+             //  var wsUri = "wss://iot.usky.cn:55120";
+
+
              websocket = new WebSocket(wsUri);
              websocket.onopen = function(evt) {
+
+                 if (websocket.readyState == 1) {
+                     $('.data-view').append('<div class="send-status">Websocket连接 (' + wsUri + ')  已建立，正在等待数据...</div>')
+                     scrollBottom();
+                 }
                  var json = {};
                  json.agentid = 'admin';
-                 console.log("Connected.");
                  (function() {})()
                  websocket.send(JSON.stringify(json));
              };
              websocket.onclose = function(evt) {
                  console.log("DisConnected.");
+                 $('.data-view').append('<div class="send-status">和服务器断开连接！</div>')
+                 scrollBottom();
                  (function() {})()
-                 initWebSocket();
+                 //  initWebSocket();
              };
              websocket.onmessage = function(evt) {
                  var siteData = eval('(' + evt.data + ')');
                  console.log('siteData')
                  console.log(siteData)
-                     //  console.log('arrData')
-                     //  console.log(arrData)
 
                  //返回值渲染
-                 if (siteData.time && aa) {
-                     $('.receive-time').text('[' + siteData.time + ' 收到]')
-                     $(".receive-request").text(JSON.stringify(siteData, null, 2));
+                 //  if (siteData.time && aa) {   
+                 if (siteData.time) {
+                     $('.data-view').append('<div class="receive-time">[' + siteData.time + ' 收到]</div>');
+                     $('.data-view').append('<pre class="receive-request">' + JSON.stringify(siteData, null, 2) + '</pre>')
+                     scrollBottom();
+
+
                  }
              };
 
              websocket.onerror = function(evt) {
+                 alert(1)
                  console.log("Error:", evt.data);
                  (function() {})()
              };
@@ -48,35 +64,70 @@
      }
 
 
-     //打开websocket
+     //打开websocket   
      $('.openWebsocket').on('click', function() {
-         initWebSocket();
-         flag = true;
+         if (!isOpen) {
+             isOpen = true;
+             initWebSocket();
+             $('.openWebsocket').css({ 'cursor': 'not-allowed', 'opacity': '.5' })
+             $('.closeWebsocket').css({ 'cursor': 'pointer', 'opacity': '1' })
+         }
+
+     })
+
+     //关闭websocket   
+     $('.closeWebsocket').on('click', function() {
+         isOpen = false;
+         websocket.close();
+         $('.closeWebsocket').css({ 'cursor': 'not-allowed', 'opacity': '.5' })
+         $('.openWebsocket').css({ 'cursor': 'pointer', 'opacity': '1' })
+
      })
 
 
      //站点工况点击
      $('.siteCondition').on('click', function() {
-         aa = true;
-         if (!flag) {
-             alert('请先打开连接')
+         if (isOpen) {
+             var stationId = $('#stationId').val()
+             var stationName = $('#stationName').val()
+             var json = {};
+             json.CMD = 'getStationInfo';
+             json.StationID = stationId;
+             json.StationName = stationName;
+
+             //发送时间和请求参数页面渲染
+             $('.data-view').append('<pre class="send-time">[' + time() + '发出]</pre>');
+             $('.data-view').append('<pre class="send-request">' + JSON.stringify(json, null, 2) + '</pre>')
+             scrollBottom();
+
+             websocket.send(JSON.stringify(json));
+         } else {
+             alert('请先打开websocket连接！')
              return
          }
 
-         var stationId = $('#stationId').val()
-         var stationName = $('#stationName').val()
-         var json = {};
-         json.CMD = 'getStationInfo';
-         json.StationID = stationId;
-         json.StationName = stationName;
+     })
 
-         //发送时间和请求参数页面渲染
-         time('.send-time');
-         $(".send-request").text(JSON.stringify(json, null, 2));
+     //站点详情点击
+     $('.siteDetail').on('click', function() {
+         if (isOpen) {
+             var stationId = $('#stationId').val()
+             var json = {};
+             json.CMD = 'getStationDetail';
+             json.StationID = stationId;
 
-         websocket.send(JSON.stringify(json));
-     })
+             //发送时间和请求参数页面渲染
+             $('.data-view').append('<pre class="send-time">[' + time() + '发出]</pre>');
+             $('.data-view').append('<pre class="send-request">' + JSON.stringify(json, null, 2) + '</pre>')
+             scrollBottom();
+             websocket.send(JSON.stringify(json));
 
+         } else {
+             alert('请先打开websocket连接！')
+             return
 
+         }
+
+     })
 
  })()

js/util.js

@@ -22,7 +22,7 @@ function syntaxHighlight(json) {
 
 // var t = null;
 // t = setTimeout(time, 1000); //開始运行
-function time(obj) {
+function time() {
     // clearTimeout(t); //清除定时器
     dt = new Date();
     var y = dt.getFullYear();
@@ -31,20 +31,8 @@ function time(obj) {
     var h = dt.getHours(); //获取时
     var m = dt.getMinutes(); //获取分
     var s = dt.getSeconds(); //获取秒
-    document.querySelector(obj).innerHTML =
-        "[" +
-        Appendzero(y) +
-        "-" +
-        Appendzero(mt) +
-        "-" +
-        Appendzero(day) +
-        " " +
-        Appendzero(h) +
-        ":" +
-        Appendzero(m) +
-        ":" +
-        Appendzero(s) +
-        " 发出]";
+    return Appendzero(y) + "-" + Appendzero(mt) + "-" + Appendzero(day) + " " + Appendzero(h) + ":" + Appendzero(m) + ":" + Appendzero(s);
+
     // t = setTimeout(time, 1000); //设定定时器，循环运行
 }
 
@@ -54,4 +42,10 @@ function time(obj) {
 function Appendzero(obj) {
     if (obj < 10) return "0" + obj;
     else return obj;
+}
+
+//滚动到底部
+function scrollBottom() {
+    $('.data-view').animate({ scrollTop: $('.data-view').prop('scrollHeight') }, 1000);
+
 }