Home Explore Help
Sign In
yuanMM
/
test-demo
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

first commit

Ming 3 years ago
commit
4c2ca23ad8
7 changed files with 665 additions and 0 deletions
Split View Show Diff Stats
  1. 270 0
      css/base.css
  2. 74 0
      css/index.css
  3. 89 0
      index.html
  4. 82 0
      js/index.js
  5. 92 0
      js/index2.js
  6. 1 0
      js/jquery.js
  7. 57 0
      js/util.js

+ 270 - 0
css/base.css
View File 

@@ -0,0 +1,270 @@
 
+@charset "utf-8";
 
+
 
+/* CSS Document */
 
+
 
+@charset "utf-8";
 
+
 
+/*!
 
+ * @名称：base.css
 
+ * @功能：1、重设浏览器默认样式
 
+ *       2、设置通用原子类
 
+ */
 
+
 
+
 
+/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
 
+
 
+html {
 
+    background: white;
 
+    color: black;
 
+}
 
+
 
+
 
+/* 内外边距通常让各个浏览器样式的表现位置不同 */
 
+
 
+body,
 
+div,
 
+dl,
 
+dt,
 
+dd,
 
+ul,
 
+ol,
 
+li,
 
+h1,
 
+h2,
 
+h3,
 
+h4,
 
+h5,
 
+h6,
 
+pre,
 
+code,
 
+form,
 
+fieldset,
 
+legend,
 
+input,
 
+textarea,
 
+p,
 
+blockquote,
 
+th,
 
+td,
 
+hr,
 
+button,
 
+article,
 
+aside,
 
+details,
 
+figcaption,
 
+figure,
 
+footer,
 
+header,
 
+hgroup,
 
+menu,
 
+nav,
 
+section {
 
+    margin: 0;
 
+    padding: 0;
 
+}
 
+
 
+
 
+/* 要注意表单元素并不继承父级 font 的问题 */
 
+
 
+body,
 
+button,
 
+input,
 
+select,
 
+textarea {
 
+    font: 14px \5b8b\4f53, arial, sans-serif;
 
+}
 
+
 
+input,
 
+select,
 
+textarea {
 
+    font-size: 100%;
 
+}
 
+
 
+
 
+/* 去掉 table cell 的边距并让其边重合 */
 
+
 
+table {
 
+    border-collapse: collapse;
 
+    border-spacing: 0;
 
+}
 
+
 
+
 
+/* ie bug：th 不继承 text-align */
 
+
 
+th {
 
+    text-align: inherit;
 
+}
 
+
 
+
 
+/* 去除默认边框 */
 
+
 
+fieldset,
 
+img {
 
+    border: none;
 
+}
 
+
 
+
 
+/* ie6 7 8(q) bug 显示为行内表现 */
 
+
 
+iframe {
 
+    display: block;
 
+}
 
+
 
+
 
+/* 去掉 firefox 下此元素的边框 */
 
+
 
+abbr,
 
+acronym {
 
+    border: none;
 
+    font-variant: normal;
 
+}
 
+
 
+
 
+/* 一致的 del 样式 */
 
+
 
+del {
 
+    text-decoration: line-through;
 
+}
 
+
 
+address,
 
+caption,
 
+cite,
 
+code,
 
+dfn,
 
+em,
 
+th,
 
+var {
 
+    font-style: normal;
 
+    font-weight: 500;
 
+}
 
+
 
+
 
+/* 去掉列表前的标识，li 会继承 */
 
+
 
+ol,
 
+ul {
 
+    list-style: none;
 
+}
 
+
 
+
 
+/* 对齐是排版最重要的因素，别让什么都居中 */
 
+
 
+caption,
 
+th {
 
+    text-align: left;
 
+}
 
+
 
+
 
+/* 来自yahoo，让标题都自定义，适应多个系统应用 */
 
+
 
+h1,
 
+h2,
 
+h3,
 
+h4,
 
+h5,
 
+h6 {
 
+    font-size: 100%;
 
+    font-weight: 500;
 
+}
 
+
 
+q:before,
 
+q:after {
 
+    content: '';
 
+}
 
+
 
+
 
+/* 统一上标和下标 */
 
+
 
+sub,
 
+sup {
 
+    font-size: 75%;
 
+    line-height: 0;
 
+    position: relative;
 
+    vertical-align: baseline;
 
+}
 
+
 
+sup {
 
+    top: -0.5em;
 
+}
 
+
 
+sub {
 
+    bottom: -0.25em;
 
+}
 
+
 
+
 
+/* 让链接在 hover 状态下显示下划线 */
 
+
 
+a:hover {
 
+    text-decoration: underline;
 
+}
 
+
 
+
 
+/* 默认不显示下划线，保持页面简洁 */
 
+
 
+ins,
 
+a {
 
+    text-decoration: none;
 
+}
 
+
 
+
 
+/* 去除 ie6 & ie7 焦点点状线 */
 
+
 
+a:focus,
 
+*:focus {
 
+    outline: none;
 
+}
 
+
 
+
 
+/* 清除浮动 */
 
+
 
+.clearfix:before,
 
+.clearfix:after {
 
+    content: "";
 
+    display: table;
 
+}
 
+
 
+.clearfix:after {
 
+    clear: both;
 
+    overflow: hidden;
 
+}
 
+
 
+.clearfix {
 
+    zoom: 1;
 
+    /* for ie6 & ie7 */
 
+}
 
+
 
+.clear {
 
+    clear: both;
 
+    display: block;
 
+    font-size: 0;
 
+    height: 0;
 
+    line-height: 0;
 
+    overflow: hidden;
 
+}
 
+
 
+
 
+/* 设置显示和隐藏，通常用来与 js 配合 */
 
+
 
+.hide {
 
+    display: none;
 
+}
 
+
 
+.block {
 
+    display: block;
 
+}
 
+
 
+
 
+/* 设置浮动，减少浮动带来的 bug */
 
+
 
+.fl,
 
+.fr {
 
+    display: inline;
 
+}
 
+
 
+.fl {
 
+    float: left;
 
+}
 
+
 
+.fr {
 
+    float: right;
 
+}

+ 74 - 0
css/index.css
View File 

@@ -0,0 +1,74 @@
 
+input,
 
+button {
 
+    /* line-height: 20px; */
 
+    font-size: 13px;
 
+    padding: 3px 5px
 
+}
 
+
 
+body {
 
+    height: 100vh;
 
+    background: #ccc;
 
+}
 
+
 
+.container {
 
+    padding: 30px 30px;
 
+    width: 1000px;
 
+    margin: 0 auto;
 
+    /* border: 1px solid pink; */
 
+    background: #fff
 
+    /* height: 400px; */
 
+    /* background: pink */
 
+}
 
+
 
+.filter-item {
 
+    display: inline-block;
 
+    margin-right: 20px;
 
+    margin-bottom: 20px;
 
+}
 
+
 
+.filter-item span {
 
+    width: 92px;
 
+    display: inline-block;
 
+    text-align: right;
 
+}
 
+
 
+.connect-sec input {
 
+    width: 120px;
 
+}
 
+
 
+.openWebsocket {
 
+    cursor: pointer
 
+}
 
+
 
+.param-sec input {
 
+    width: 280px;
 
+}
 
+
 
+.xunJian-sec input {
 
+    width: 140px;
 
+}
 
+
 
+.button-sec button {
 
+    margin-right: 30px;
 
+    cursor: pointer
 
+}
 
+
 
+.data-view {
 
+    box-sizing: border-box;
 
+    padding: 20px;
 
+    margin-top: 30px;
 
+    width: 100%;
 
+    height: calc(100vh - 340px);
 
+    border: 1px solid #000;
 
+    overflow-y: auto;
 
+}
 
+
 
+.send-request {
 
+    margin-bottom: 40px
 
+}
 
+
 
+.send-time,
 
+.receive-time,
 
+.receive-request {
 
+    margin-bottom: 10px;
 
+}

+ 89 - 0
index.html
View File 

@@ -0,0 +1,89 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <link href="css/base.css" rel="stylesheet">
 
+    <link href="css/index.css" rel="stylesheet">
 
+    <title>测试demo</title>
 
+</head>
 
+
 
+<body>
 
+    <div style="height:30px"></div>
 
+    <div class="container">
 
+        <div class="connect-sec">
 
+            <div class="filter-item">
 
+                <span>服务端IP:</span>
 
+                <input type="text" placeholder="192.168.11">
 
+            </div>
 
+            <div class="filter-item">
 
+                <span>服务端口:</span>
 
+                <input type="text" placeholder="6601" style="width:40px">
 
+            </div>
 
+            <button class="openWebsocket">打开websocket</button>
 
+        </div>
 
+
 
+        <div class="param-sec">
 
+            <div class="filter-item">
 
+                <span>站点ID:</span>
 
+                <input type="text" id="stationId" placeholder="请输入站点id">
 
+            </div>
 
+            <div class="filter-item">
 
+                <span>站点名称:</span>
 
+                <input type="text" id="stationName" placeholder="请输入站点名称">
 
+            </div>
 
+            <div class="filter-item">
 
+                <span>设备ID:</span>
 
+                <input type="text" placeholder="请输入设备ID">
 
+            </div>
 
+        </div>
 
+
 
+        <div class="xunJian-sec">
 
+            <div class="filter-item">
 
+                <span>记录开始序号:</span>
 
+                <input type="text" placeholder="请输入记录开始序号">
 
+            </div>
 
+            <div class="filter-item">
 
+                <span>记录查询数量:</span>
 
+                <input type="text" placeholder="请输入记录查询数量">
 
+            </div>
 
+            <div class="filter-item">
 
+                <span>记录时间:</span>
 
+                <input type="text" placeholder="请输入记录时间">
 
+            </div>
 
+        </div>
 
+
 
+        <div class="button-sec">
 
+            <button class="siteCondition">站点工况</button>
 
+            <button>站点详情</button>
 
+            <button>设备采集</button>
 
+            <button>点位数据</button>
 
+            <button>巡检记录</button>
 
+            <button>记录数据</button>
 
+        </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>
 
+
 
+
 
+    </div>
 
+    <script src="js/jquery.js"></script>
 
+    <script src="js/util.js"></script>
 
+    <script src="js/index2.js"></script>
 
+    <script>
 
+    </script>
 
+
 
+</body>
 
+
 
+</html>

+ 82 - 0
js/index.js
View File 

@@ -0,0 +1,82 @@
 
+ // 站点工况（websocket实时推送）
 
+ (function() {
 
+     var flag = false;
 
+     var aa = false;
 
+     var arrData = [];
 
+     var wsUri = "wss://iot.usky.cn:55120";
 
+     var websocket;
 
+
 
+     function initWebSocket() {
 
+         try {
 
+             if (typeof MozWebSocket == 'function')
 
+                 WebSocket = MozWebSocket;
 
+             websocket = new WebSocket(wsUri);
 
+             websocket.onopen = function(evt) {
 
+                 var json = {};
 
+                 json.agentid = 'admin';
 
+                 console.log("Connected.");
 
+                 (function() {})()
 
+                 websocket.send(JSON.stringify(json));
 
+             };
 
+             websocket.onclose = function(evt) {
 
+                 console.log("DisConnected.");
 
+                 (function() {})()
 
+                 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));
 
+                 }
 
+             };
 
+
 
+             websocket.onerror = function(evt) {
 
+                 console.log("Error:", evt.data);
 
+                 (function() {})()
 
+             };
 
+         } catch (exception) {
 
+             console.log("Exception:", exception);
 
+             (function() {})()
 
+         }
 
+     }
 
+
 
+
 
+     //打开websocket
 
+     $('.openWebsocket').on('click', function() {
 
+         initWebSocket();
 
+         flag = true;
 
+     })
 
+
 
+
 
+     //站点工况点击
 
+     $('.siteCondition').on('click', function() {
 
+         aa = true;
 
+         if (!flag) {
 
+             alert('请先打开连接')
 
+             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));
 
+
 
+         websocket.send(JSON.stringify(json));
 
+     })
 
+
 
+
 
+
 
+ })()

+ 92 - 0
js/index2.js
View File 

@@ -0,0 +1,92 @@
 
+ // 站点工况（websocket实时推送）
 
+
 
+
 
+ var arrData = [];
 
+ var wsUri = "wss://iot.usky.cn:55120";
 
+ var websocket;
 
+
 
+
 
+ function initWebSocket() {
 
+     return new Promise((res, rej) => {
 
+         try {
 
+             if (typeof MozWebSocket == 'function')
 
+                 WebSocket = MozWebSocket;
 
+             websocket = new WebSocket(wsUri);
 
+             websocket.onopen = function(evt) {
 
+                 var json = {};
 
+                 json.agentid = 'admin';
 
+                 console.log("Connected.");
 
+                 (function() {})()
 
+                 console.log('websocket')
 
+                 console.log(websocket)
 
+                 websocket.send(JSON.stringify(json));
 
+             };
 
+             websocket.onclose = function(evt) {
 
+                 console.log("DisConnected.");
 
+                 (function() {})()
 
+                 //  initWebSocket();
 
+                 console.log(1111111)
 
+             };
 
+             websocket.onmessage = function(evt) {
 
+                 var siteData = eval('(' + evt.data + ')');
 
+                 console.log('siteData')
 
+                 console.log(siteData)
 
+                     //  console.log('arrData')
 
+                     //  console.log(arrData)
 
+
 
+                 //返回值渲染
 
+                 if (siteData.time) {
 
+                     $('.receive-time').text('[' + siteData.time + ' 收到]')
 
+                     $(".receive-request").text(JSON.stringify(siteData, null, 2));
 
+                 }
 
+             };
 
+
 
+             websocket.onerror = function(evt) {
 
+                 console.log("Error:", evt.data);
 
+                 (function() {})()
 
+             };
 
+             res()
 
+         } catch (exception) {
 
+             console.log("Exception:", exception);
 
+             rej()
 
+         }
 
+     })
 
+ }
 
+
 
+
 
+ //打开websocket
 
+ //  $('.openWebsocket').on('click', function() {
 
+ //      initWebSocket();
 
+ //  })
 
+ //  initWebSocket()
 
+
 
+ function isWs(val) {
 
+     if (!websocket) {
 
+         initWebSocket().then(() => { isWs(val) })
 
+     } else if (websocket.readyState == 1) {
 
+         websocket.send(val)
 
+     } else {
 
+         setTimeout(() => {
 
+             isWs(val)
 
+         }, 1000)
 
+     }
 
+ }
 
+
 
+ //站点工况点击
 
+ $('.siteCondition').on('click', function() {
 
+     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));
 
+     if (websocket) {
 
+         websocket.close();
 
+         websocket = '';
 
+     }
 
+     isWs(JSON.stringify(json))
 
+ })

File diff suppressed because it is too large
+ 1 - 0
js/jquery.js


+ 57 - 0
js/util.js
View File 

@@ -0,0 +1,57 @@
 
+function syntaxHighlight(json) {
 
+    if (typeof json != 'string') {
 
+        json = JSON.stringify(json, undefined, 2);
 
+    }
 
+    json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
 
+    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
 
+        var cls = 'number';
 
+        if (/^"/.test(match)) {
 
+            if (/:$/.test(match)) {
 
+                cls = 'key';
 
+            } else {
 
+                cls = 'string';
 
+            }
 
+        } else if (/true|false/.test(match)) {
 
+            cls = 'boolean';
 
+        } else if (/null/.test(match)) {
 
+            cls = 'null';
 
+        }
 
+        return '<span class="' + cls + '">' + match + '</span>';
 
+    });
 
+};
 
+
 
+// var t = null;
 
+// t = setTimeout(time, 1000); //開始运行
 
+function time(obj) {
 
+    // clearTimeout(t); //清除定时器
 
+    dt = new Date();
 
+    var y = dt.getFullYear();
 
+    var mt = dt.getMonth() + 1;
 
+    var day = dt.getDate();
 
+    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) +
 
+        " 发出]";
 
+    // t = setTimeout(time, 1000); //设定定时器，循环运行
 
+}
 
+
 
+
 
+
 
+//个位数补零
 
+function Appendzero(obj) {
 
+    if (obj < 10) return "0" + obj;
 
+    else return obj;
 
+}

Some files were not shown because too many files changed in this diff