机器人

src/api/robot/index.js

@@ -1,4 +1,3 @@
-import request from "@/utils/request.js";
 import Config from "@/config/index.js";
 
 /**
@@ -6,10 +5,10 @@ import Config from "@/config/index.js";
  * @returns Promise
  */
 export function getRobotToken() {
-  return request({
-    url: Config.robotBaseUrl + "/abc-robot/caas/oauth/token/v2",
-    robot: true,
-    method: "post"
+  return fetch(Config.robotBaseUrl + "/abc-robot/caas/oauth/token/v2", {
+    method: "POST"
+  }).then(res => {
+    return res.json();
   });
 }
 
@@ -17,10 +16,17 @@ export function getRobotToken() {
  * 获得机器人设备
  * @returns Promise
  */
-export function getRobotClient() {
-  return request({
-    url: Config.robotBaseUrl + " /push/v1/browser",
-    robot: true,
-    method: "get"
+export function getRobotClient(data) {
+  return fetch(
+    Config.robotBaseUrl +
+      "/push/v1/app/device?clientId=" +
+      data.clientId +
+      "&token=" +
+      data.token,
+    {
+      method: "GET"
+    }
+  ).then(res => {
+    return res.json();
   });
 }

src/config/index.js

@@ -9,9 +9,10 @@ export default {
   requestRetryDelay: 800,
   tokenKey: "ACCESS_TOKEN",
   userInfoKey: "USER_INFO",
-  robotBaseUrl: "https://robot.baidu.com",
-  robotBaseWss: "https://robot.baidu.com",
-  clientId: "",
+  robotBaseUrl: "http://import.smcic.net:804",
+  robotBaseWss: "wss://robot.baidu.com",
+  robotClientSecret: "y3ir4fjVLGaYZTJL",
+  robotClientId: "45eJGpH9",
   apiUrl: useApiUrl,
   corporation: "广电融媒体",
   siteName: "",

src/pages/robot/Index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <van-sticky :offset-top="0">
+    <van-sticky :offset-top="0" v-if="dialogueLst.length">
       <van-dropdown-menu>
         <van-dropdown-item
           @change="change"
@@ -10,7 +10,83 @@
       </van-dropdown-menu>
     </van-sticky>
     <div id="robot" class="app">
-      <div class="van-hairline--surround msg"></div>
+      <div class="van-hairline--surround msg" ref="scroll">
+        <div class="" ref="msgScroll">
+          <div
+            class="msgBg"
+            v-for="item in dialogueLst"
+            :style="'text-align: right;'"
+            :key="item.text"
+          >
+            <div style="display: inline-block" v-text="item.reply"></div>
+          </div>
+          <div class="msgBg" style="text-align: right;">
+            <div style="display: inline-block;text-align: left;">
+              0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
+            </div>
+          </div>
+          <div class="msgBg" style="text-align: right;">
+            <div style="display: inline-block;text-align: left;">
+              0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
+            </div>
+          </div>
+          <div class="msgBg" style="text-align: right;">
+            <div style="display: inline-block;text-align: left;">
+              0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
+            </div>
+          </div>
+          <div class="msgBg" style="text-align: right;">
+            <div style="display: inline-block;text-align: left;">
+              0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
+            </div>
+          </div>
+          <div class="msgBg" style="text-align: right;">
+            <div style="display: inline-block;text-align: left;">
+              0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
+            </div>
+          </div>
+          <div class="msgBg" style="text-align: right;">
+            <div style="display: inline-block;text-align: left;">
+              0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
+            </div>
+          </div>
+          <div class="msgBg" style="text-align: right;">
+            <div style="display: inline-block;text-align: left;">
+              0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
+            </div>
+          </div>
+          <div class="msgBg" style="text-align: right;">
+            <div style="display: inline-block;text-align: left;">
+              0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
+            </div>
+          </div>
+          <div class="msgBg" style="text-align: right;">
+            <div style="display: inline-block;text-align: left;">
+              0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
+            </div>
+          </div>
+          <div class="msgBg" style="text-align: right;">
+            <div style="display: inline-block;text-align: left;">
+              0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
+            </div>
+          </div>
+          <div class="msgBg" style="text-align: right;">
+            <div style="display: inline-block;text-align: left;">
+              0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
+            </div>
+          </div>
+          <div class="msgBg" style="text-align: right;">
+            <div style="display: inline-block;text-align: left;">
+              0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
+            </div>
+          </div>
+          <div class="msgBg" style="text-align: right;">
+            <div style="display: inline-block;text-align: left;">
+              0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
+            </div>
+          </div>
+        </div>
+      </div>
       <div class="van-hairline--left van-hairline--right van-hairline--bottom">
         <van-field v-model="message" rows="1" autosize type="textarea" />
         <div style="text-align: right; padding: 0.1rem">
@@ -23,25 +99,28 @@
       <van-row>
         <van-col span="12">
           <div class="control">
-            <van-button type="default" @click="() => toOperation('head', 'up')">
+            <van-button
+              type="default"
+              @keydown="() => toOperation('head', 'up')"
+            >
               上
             </van-button>
             <div class="conBtnGroup">
               <van-button
                 type="default"
-                @click="() => toOperation('head', 'left')"
+                @keydown="() => toOperation('head', 'left')"
               >
                 左
               </van-button>
               <van-button
                 type="default"
-                @click="() => toOperation('head', 'down')"
+                @keydown="() => toOperation('head', 'down')"
               >
                 下
               </van-button>
               <van-button
                 type="default"
-                @click="() => toOperation('head', 'right')"
+                @keydown="() => toOperation('head', 'right')"
               >
                 右
               </van-button>
@@ -53,26 +132,26 @@
           <div class="control">
             <van-button
               type="default"
-              @click="() => toOperation('wheel', 'forward')"
+              @keydown="() => toOperation('wheel', 'forward')"
             >
               前
             </van-button>
             <div class="conBtnGroup">
               <van-button
                 type="default"
-                @click="() => toOperation('wheel', 'left')"
+                @keydown="() => toOperation('wheel', 'left')"
               >
                 左
               </van-button>
               <van-button
                 type="default"
-                @click="() => toOperation('wheel', 'backward')"
+                @keydown="() => toOperation('wheel', 'backward')"
               >
                 后
               </van-button>
               <van-button
                 type="default"
-                @click="() => toOperation('wheel', 'right')"
+                @keydown="() => toOperation('wheel', 'right')"
               >
                 右
               </van-button>
@@ -105,6 +184,7 @@ import "vant/lib/col/style";
 import "vant/lib/row/style";
 import "vant/lib/field/style";
 import "vant/lib/sticky/style";
+import "vant/lib/toast/style";
 import "vant/lib/dropdown-menu/style";
 import "vant/lib/dropdown-item/style";
 export default {
@@ -112,42 +192,47 @@ export default {
   robotToken: "",
   scoket: undefined,
   deviceId: "",
+  status: true,
   data: function() {
     return {
-      robotList: [
-        { text: "机器人1", value: 0 },
-        { text: "机器人2", value: 1 },
-        { text: "机器人3", value: 2 }
-      ],
+      robotList: [],
+      dialogueLst: [],
       robot: 0,
       message: ""
     };
   },
   methods: {
     tomsg() {
+      if (!this.status) return Toast("链接已断开！");
+      if (!this.message) return;
+      let dialogue = {
+        type: "local",
+        text: this.message
+      };
+      let dialogueLst = JSON.parse(JSON.stringify(this.dialogueLst));
+      dialogueLst.push(dialogue);
+      this.dialogueLst = dialogueLst;
       this.scoket &&
         this.scoket.send({
-          id: "",
+          id: this.deviceId,
           dialog: {
-            reply: ""
+            reply: this.message
           }
         });
     },
     toOperation(type, opera) {
+      if (!this.status) return Toast("链接已断开！");
       let p = {};
       p[type] = opera;
       this.scoket &&
         this.scoket.send({
-          id: "",
-          dialog: {
-            reply: ""
-          },
+          id: this.deviceId,
           controller: p
         });
     },
     createRobotLink() {
       if (!window.WebSocket) return Toast("该版本暂时不支持");
-      this.scoket && this.scoket.close();
+      this.scoket && this.scoket.close() && (this.scoket = undefined);
       this.scoket = new WebSocket(
         Config.robotBaseWss +
           "/ws/app/event?clientId=" +
@@ -161,6 +246,24 @@ export default {
         var data = event.data;
         console.log(data);
         // 处理数据
+        let dialogue = {
+          type: "",
+          text: data.reply
+        };
+        let dialogueLst = JSON.parse(JSON.stringify(this.dialogueLst));
+        dialogueLst.push(dialogue);
+        this.dialogueLst = dialogueLst;
+      };
+      this.scoket.onopen = function() {
+        this.status = true;
+      };
+      this.scoket.onerror = function() {
+        this.status = false;
+        Toast("链接已断开！");
+      };
+      this.scoket.onclose = function() {
+        this.status = false;
+        Toast("链接已断开！");
       };
     },
     change(e) {
@@ -176,8 +279,14 @@ export default {
         clientId: Config.clientId,
         token: this.robotToken
       }).then(r => {
-        if (res.error_code !== 0) return Toast("暂时没有上线设备");
-        this.robotList = r.result || [];
+        this.$refs.scroll.scrollTop = this.$refs.msgScroll.scrollHeight;
+        if (r.error_code !== 0) return Toast("暂无线上设备");
+        this.robotList = (r.result || []).map(v => {
+          return {
+            text: v.deviceName,
+            value: v.deviceId
+          };
+        });
       });
     });
   },
@@ -200,6 +309,7 @@ export default {
   .msg {
     padding: 0.1rem;
     height: 3rem;
+    overflow-y: scroll;
   }
   .control {
     display: inline-block;
@@ -214,5 +324,16 @@ export default {
       font-size: 0.14rem;
     }
   }
+  .msgBg {
+    padding: 5px 3px;
+    > div {
+      width: 70%;
+      padding: 5px;
+      color: #fff;
+      border-radius: 5px;
+      word-wrap: break-word;
+      background-color: #959595;
+    }
+  }
 }
 </style>

src/utils/common.js

@@ -150,3 +150,62 @@ export function toTree(list, propsConfig = {}) {
   }
   return out;
 }
+
+/**
+ * string转base64
+ * @param {*} a
+ * @param {*} fn
+ */
+
+function utf8_encode(input) {
+  input = input.replace(/\r\n/g, "\n");
+  let utftext = "";
+  for (let n = 0; n < input.length; n++) {
+    let c = input.charCodeAt(n);
+    if (c < 128) {
+      utftext += String.fromCharCode(c);
+    } else if (c > 127 && c < 2048) {
+      utftext += String.fromCharCode((c >> 6) | 192);
+      utftext += String.fromCharCode((c & 63) | 128);
+    } else {
+      utftext += String.fromCharCode((c >> 12) | 224);
+      utftext += String.fromCharCode(((c >> 6) & 63) | 128);
+      utftext += String.fromCharCode((c & 63) | 128);
+    }
+  }
+  return utftext;
+}
+
+export function encode(input) {
+  let _keyStr =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
+  let output = "";
+  let chr1, chr2, chr3, enc1, enc2, enc3, enc4;
+  let i = 0;
+  input = utf8_encode(input);
+  while (i < input.length) {
+    chr1 = input.charCodeAt(i++);
+    chr2 = input.charCodeAt(i++);
+    chr3 = input.charCodeAt(i++);
+    enc1 = chr1 >> 2;
+    enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
+    enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
+    enc4 = chr3 & 63;
+    if (isNaN(chr2)) {
+      enc3 = enc4 = 64;
+    } else if (isNaN(chr3)) {
+      enc4 = 64;
+    }
+    output =
+      output +
+      _keyStr.charAt(enc1) +
+      _keyStr.charAt(enc2) +
+      _keyStr.charAt(enc3) +
+      _keyStr.charAt(enc4);
+  }
+  return output;
+}
+
+/**
+ * string转base64 end
+ */

src/utils/request.js

@@ -26,13 +26,8 @@ service.interceptors.request.use(
       // });
     }
     config.err403 && (isApp = config.err403);
-    if (config.robot) {
-      config.headers["Authorization"] =
-        "BasicdDRFSHZpTVQ6YUF3M3Q4dE9BY3hNeEFhYQ==";
-      config.headers["clientId"] = Config.clientId;
-    } else {
-      config.headers["Authorization"] = getToken();
-    }
+    config.headers["Authorization"] = getToken();
+
     return config;
   },
   error => {