Merge http://39.104.94.153:3000/yf_zy/MingGao_vue

minggao/config/index.js

@@ -23,7 +23,7 @@ module.exports = {
     },
 
     // Various Dev Server settings
-    host: '192.168.1.29', // can be overwritten by process.env.HOST
+    host: 'localhost', // can be overwritten by process.env.HOST
     port: 8888, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,

minggao/src/assets/icon/demo_index.html

@@ -55,6 +55,18 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon iconfont">&#xe640;</span>
+                <div class="name">最大化</div>
+                <div class="code-name">&amp;#xe640;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe645;</span>
+                <div class="name">最小化</div>
+                <div class="code-name">&amp;#xe645;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon iconfont">&#xe67e;</span>
                 <div class="name">地点</div>
                 <div class="code-name">&amp;#xe67e;</div>
@@ -810,9 +822,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1646124670247') format('woff2'),
-       url('iconfont.woff?t=1646124670247') format('woff'),
-       url('iconfont.ttf?t=1646124670247') format('truetype');
+  src: url('iconfont.woff2?t=1646902321349') format('woff2'),
+       url('iconfont.woff?t=1646902321349') format('woff'),
+       url('iconfont.ttf?t=1646902321349') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -839,6 +851,24 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon iconfont icon-zuidahua"></span>
+            <div class="name">
+              最大化
+            </div>
+            <div class="code-name">.icon-zuidahua
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zuixiaohua"></span>
+            <div class="name">
+              最小化
+            </div>
+            <div class="code-name">.icon-zuixiaohua
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon iconfont icon-didian"></span>
             <div class="name">
               地点
@@ -1974,6 +2004,22 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zuidahua"></use>
+                </svg>
+                <div class="name">最大化</div>
+                <div class="code-name">#icon-zuidahua</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zuixiaohua"></use>
+                </svg>
+                <div class="name">最小化</div>
+                <div class="code-name">#icon-zuixiaohua</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-didian"></use>
                 </svg>
                 <div class="name">地点</div>

minggao/src/assets/icon/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: 'iconfont';  /* Project id 1738837 */
-  src: url('//at.alicdn.com/t/font_1738837_7aca1c6twkl.woff2?t=1646124664018') format('woff2'),
-       url('//at.alicdn.com/t/font_1738837_7aca1c6twkl.woff?t=1646124664018') format('woff'),
-       url('//at.alicdn.com/t/font_1738837_7aca1c6twkl.ttf?t=1646124664018') format('truetype');
+  src: url('//at.alicdn.com/t/font_1738837_98dclv30h25.woff2?t=1646902310465') format('woff2'),
+       url('//at.alicdn.com/t/font_1738837_98dclv30h25.woff?t=1646902310465') format('woff'),
+       url('//at.alicdn.com/t/font_1738837_98dclv30h25.ttf?t=1646902310465') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-zuidahua:before {
+  content: "\e640";
+}
+
+.icon-zuixiaohua:before {
+  content: "\e645";
+}
+
 .icon-didian:before {
   content: "\e67e";
 }

minggao/src/assets/icon/iconfont.json

@@ -6,6 +6,20 @@
   "description": "",
   "glyphs": [
     {
+      "icon_id": "991640",
+      "name": "最大化",
+      "font_class": "zuidahua",
+      "unicode": "e640",
+      "unicode_decimal": 58944
+    },
+    {
+      "icon_id": "26659380",
+      "name": "最小化",
+      "font_class": "zuixiaohua",
+      "unicode": "e645",
+      "unicode_decimal": 58949
+    },
+    {
       "icon_id": "10268565",
       "name": "地点",
       "font_class": "didian",

minggao/src/page/commandCenter/realTime.vue

@@ -178,12 +178,20 @@
             playsinline
             :muted="true"
           ></video> -->
-          <video
+          <!-- <video
             style="width: 100%; height: 100%"
             :ref="idName1"
             autoplay
             playsinline
             :muted="true"
+          ></video> -->
+
+          <video
+            style="width: 100%; height: 100%"
+            :ref="idName"
+            autoplay
+            playsinline
+            :muted="true"
           ></video>
         </div>
 
@@ -196,12 +204,20 @@
             playsinline
             :muted="true"
           ></video> -->
-          <video
+          <!-- <video
             style="width: 100%; height: 100%"
             :ref="idName"
             autoplay
             playsinline
             :muted="true"
+          ></video> -->
+
+          <video
+            style="width: 100%; height: 100%"
+            :ref="idName1"
+            autoplay
+            playsinline
+            :muted="true"
           ></video>
         </div>
 
@@ -414,12 +430,21 @@ export default {
       url:
         // "ws://192.168.1.17:12345/api/api_gateway?method=control_center.real_time.im_message",
         "ws" +
+        // "https" +
         this.$wsUrl +
         "/api/api_gateway?method=control_center.real_time.im_message",
       websock: null,
       getUserObj: {}, // 获取到当前点击的行数据
       msgList: [], //当前点击的账号消息列表
       userName: "",
+
+      // 心跳、重连机制
+      ws: null, //建立的连接
+      lockReconnect: false, //是否真正建立连接
+      timeout: 5 * 1000, //30秒一次心跳
+      timeoutObj: null, //心跳心跳倒计时
+      serverTimeoutObj: null, //心跳倒计时
+      timeoutnum: null, //断开 重连倒计时
     };
   },
   //监听属性 类似于data概念
@@ -752,6 +777,7 @@ export default {
             },
           };
           this.websock.send(JSON.stringify(obj1));
+          // this.start(); //开启心跳
         };
         this.websock.onmessage = (event) => {
           // console.log("WebSocket:消息");
@@ -813,10 +839,12 @@ export default {
         this.websock.onerror = (event) => {
           console.log("WebSocket:发生错误 ");
           console.log(event);
+          // that.reconnect(); // 重连
         };
         this.websock.onclose = (event) => {
           console.log("WebSocket:已关闭");
           console.log(event);
+          // that.reconnect(); // 重连
         };
       }
     },
@@ -929,6 +957,73 @@ export default {
         console.log("不兼容");
       }
     },
+
+    // 心跳机制
+    start() {
+      //开启心跳
+      var self = this;
+      self.timeoutObj && clearTimeout(self.timeoutObj);
+      self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
+      self.timeoutObj = setTimeout(function () {
+        //这里发送一个心跳，后端收到后，返回一个心跳消息，
+        console.log("心跳中。。。", self.websock.readyState);
+        // if (self.websock.readyState == 1) {
+        //   //如果连接正常
+        //   self.websock.send(
+        //     JSON.stringify({
+        //       data: {
+        //         action: "list",
+        //         recv_user_id: '',
+        //         data: {
+        //           msg_status: false,
+        //           msg_info: "",
+        //         },
+        //       },
+        //     })
+        //   );
+        // } else {
+        //   //否则重连
+        //   self.reconnect();
+        // }
+        //如果连接正常
+        var obj1 = {};
+        obj1 = {
+          action: "list",
+          recv_user_id: "",
+          data: {
+            msg_status: false,
+            msg_info: "",
+          },
+        };
+        self.websock.send(JSON.stringify(obj1));
+        // self.serverTimeoutObj = setTimeout(function () {
+        //   //超时关闭
+        //   self.websock.close();
+        // }, self.timeout);
+      }, self.timeout);
+    },
+    reset() {
+      //重置心跳
+      var that = this;
+      clearTimeout(that.timeoutObj); //清除时间
+      clearTimeout(that.serverTimeoutObj); //清除时间
+      // that.start(); //重启心跳
+    },
+
+    // 重连机制
+    reconnect() {
+      var that = this;
+      if (that.lockReconnect) {
+        return;
+      }
+      that.lockReconnect = true;
+      // 没连接上会一直重连，设置延迟避免请求过多
+      that.timeoutnum && clearTimeout(that.timeoutnum);
+      that.timeoutnum = setTimeout(function () {
+        that.msgInit(); //新连接
+        that.lockReconnect = false;
+      }, 5000);
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -943,9 +1038,9 @@ export default {
     // this.loading2 = true;
     // this.organizationData(); //获取左侧组织列表
     // this.userListData(); // 获取右侧用户列表
-    console.log("---------------------------");
-    console.log(this.websock);
-    console.log("---------------------------");
+    // console.log("---------------------------");
+    // console.log(this.websock);
+    // console.log("---------------------------");
     if (this.websock == null) {
       this.msgInit(); // 文本消息功能初始化
     }

minggao/src/util/http.js

@@ -15,11 +15,11 @@ Vue.prototype.DOMIN = DOMIN
 Vue.prototype.wsUrl = wsUrl // 实时通信Url
 Vue.prototype.mapJson = mapJson //请求地图json,不带端口号
 // console.log(DOMIN)
-axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
-axios.defaults.timeout = 30000;
-axios.defaults.withCredentials = true //axios请求时携带session
-axios.defaults.crossDomain = true
-axios.defaults.baseURL = DOMIN
+// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
+// axios.defaults.timeout = 30000;
+// axios.defaults.withCredentials = true //axios请求时携带session
+// axios.defaults.crossDomain = true
+// axios.defaults.baseURL = DOMIN
 
 
 // axios请求前的拦截

minggao/src/util/server.js

@@ -23,7 +23,8 @@ var mapJson = "";
 const origin = location.origin //当前访问域名
 mapJson = origin
 DOMIN = origin
-wsUrl = origin.split('http')[1]
+// wsUrl = origin.split('https')[1] || origin.split('http')[1] 
+wsUrl = '://192.168.1.17:12345'
 export {
   DOMIN,
   mapJson,