音视频，机器人

src/components/Detail/audio.vue

@@ -1,18 +1,16 @@
 <template>
   <div id="audioDetail" class="app" ref="elementAsconten">
-    <van-sticky>
-      <div class="head">
-        <audio-player
-          ref="audioEle"
-          color="#e42417"
-          @playing="playing"
-          :show-prev-button="false"
-          :show-next-button="false"
-          :audio-list="[item.videoUrl]"
-          :before-play="onBeforePlay"
-        ></audio-player>
-      </div>
-    </van-sticky>
+    <div class="head">
+      <audio-player
+        ref="audioEle"
+        color="#e42417"
+        @playing="playing"
+        :show-prev-button="false"
+        :show-next-button="false"
+        :audio-list="[item.videoUrl]"
+        :before-play="onBeforePlay"
+      ></audio-player>
+    </div>
     <div v-if="item.id">
       <van-cell-group>
         <van-cell title="" :value="item.publishTime" />
@@ -34,13 +32,11 @@ import { currentUrlToParams } from "@/utils/common.js";
 import {
   Cell as vanCell,
   CellGroup as vanCellGroup,
-  Sticky as vanSticky,
   Empty as vanEmpty
 } from "vant";
 import "video.js/dist/video-js.css";
 import "vant/lib/cell-group/style";
 import "vant/lib/nav-bar/style";
-import "vant/lib/sticky/style";
 import "vant/lib/empty/style";
 import "vant/lib/cell/style";
 import "vant/lib/toast/style";
@@ -68,6 +64,7 @@ export default {
       showIntrodu: true,
       value: "",
       more: false,
+      pleayStatus: false,
       audioList: []
     };
   },
@@ -96,6 +93,14 @@ export default {
       //   progress: pro
       // });
       window.Progress.progress = pro;
+    },
+    autoPlay() {
+      console.log("客户端调用");
+      if (this.$refs.audioEle.isPlaying) {
+        this.$refs.audioEle.pause();
+      } else {
+        this.$refs.audioEle.play();
+      }
     }
   },
   mounted() {
@@ -109,12 +114,16 @@ export default {
       );
     this.$pageParams = currentUrlToParams();
     this.timeout = new Date();
+    let _this = this;
+    this.$refs.audioEle &&
+      (window["autoPlay"] = function() {
+        _this.autoPlay();
+      });
   },
   beforeDestroy: function() {},
   components: {
     vanCellGroup,
     AudioPlayer,
-    vanSticky,
     vanEmpty,
     vanCell
   }
@@ -122,6 +131,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 #audioDetail {
+  padding-top: 6em;
   .van-button {
     border: none;
   }
@@ -138,7 +148,9 @@ export default {
     text-indent: 2em;
   }
   .head {
-    padding: 10em 2em 2em 2em;
+    padding: 4em 2em 2em 2em;
+    background-image: url("../../assets/image/audiobg.png");
+    background-size: 100% 100%;
   }
 
   .selectText {

src/components/Detail/video.vue

@@ -21,16 +21,15 @@
       >
       </video-player>
     </van-sticky>
-    <div v-if="item.id">
-      <van-cell-group>
-        <van-cell :title="item.title" :value="item.publishTime" />
-        <div
-          @click="showIntrodu = !showIntrodu"
-          :class="{ introduction: true, 'van-ellipsis': !showIntrodu }"
-          v-text="item.normalizedContent"
-          v-if="item.normalizedContent"
-        ></div>
-      </van-cell-group>
+    <div class="videoItem" v-if="item.id">
+      <p class="title van-ellipsis">{{ item.title }}</p>
+      <p class="publistTime">{{ item.publishTime }}</p>
+      <div
+        @click="showIntrodu = !showIntrodu"
+        :class="{ introduction: true }"
+        v-text="item.normalizedContent"
+        v-if="item.normalizedContent"
+      ></div>
     </div>
     <van-empty v-else description="内容没找到" />
   </div>
@@ -38,17 +37,10 @@
 
 <script>
 // import { progress } from "@/api/article/article.js";
-import {
-  Cell as vanCell,
-  CellGroup as vanCellGroup,
-  Sticky as vanSticky,
-  Empty as vanEmpty
-} from "vant";
-import "vant/lib/cell-group/style";
+import { Sticky as vanSticky, Empty as vanEmpty } from "vant";
 import "vant/lib/sticky/style";
 import "vant/lib/empty/style";
 import "vant/lib/toast/style";
-import "vant/lib/cell/style";
 import "video.js/dist/video-js.css";
 import { videoPlayer } from "vue-video-player";
 
@@ -74,15 +66,18 @@ export default {
       showIntrodu: true,
       video: {},
       playerOptions: {},
-      more: false
+      more: false,
+      pleayStatus: false
     };
   },
   timeout: null,
   methods: {
     onPlayerPlay() {
+      this.pleayStatus = true;
       console.log("开始播放");
     },
     onPlayerPause() {
+      this.pleayStatus = false;
       console.log("暂停播放");
     },
     onPlayerEnded() {
@@ -129,6 +124,15 @@ export default {
         window.H5Listener.setWebviewHeight(
           this.$refs.elementAsconten.offsetHeight
         );
+    },
+    autoPlay() {
+      console.log("客户端调用");
+      if (this.pleayStatus) {
+        this.$refs.videoPlayer.player.pause();
+      } else {
+        this.$refs.videoPlayer.player.play();
+      }
+      this.pleayStatus = !this.pleayStatus;
     }
   },
   mounted() {
@@ -148,12 +152,16 @@ export default {
       poster: "/static/images/author.jpg"
     };
     this.timeout = new Date() - 0;
+
+    let _this = this;
+    this.$refs.videoPlayer &&
+      (window["autoPlay"] = function() {
+        _this.autoPlay();
+      });
   },
   beforeDestroy: function() {},
   components: {
     videoPlayer,
-    vanCell,
-    vanCellGroup,
     vanSticky,
     vanEmpty
   }
@@ -167,11 +175,25 @@ export default {
       left: 50%;
     }
   }
-  .introduction {
-    padding: 0.5em;
-    font-size: 0.14rem;
-    color: #969799;
-    text-indent: 2em;
+  .videoItem {
+    padding: 0 0.5em;
+    padding-left: 1 0px;
+    .title {
+      padding-top: 16px;
+      color: #3d3d3d;
+      font-size: 15px;
+    }
+    .publistTime {
+      color: #919191;
+      font-size: 12px;
+      margin-top: 11px;
+    }
+    .introduction {
+      margin-top: 17px;
+      font-size: 0.12rem;
+      color: #3d3d3d;
+      text-indent: 2em;
+    }
   }
 }
 </style>

src/config/index.js

@@ -13,6 +13,7 @@ export default {
   robotBaseWss: "wss://robot.baidu.com",
   robotClientSecret: "y3ir4fjVLGaYZTJL",
   robotClientId: "45eJGpH9",
+  robotMoveTimeout: 300,
   apiUrl: useApiUrl,
   corporation: "广电融媒体",
   siteName: "",

src/pages/robot/Index.vue

@@ -1,22 +1,23 @@
 <template>
   <div>
-    <van-sticky :offset-top="0" v-if="dialogueLst.length">
+    <van-sticky :offset-top="0" v-if="robotList.length">
       <van-dropdown-menu>
         <van-dropdown-item
           @change="change"
-          v-model="robot"
+          v-model="deviceId"
           :options="robotList"
         />
       </van-dropdown-menu>
     </van-sticky>
+    <van-cell title="党建机器人" size="large" value="" />
     <div id="robot" class="app">
       <div class="van-hairline--surround msg" ref="scroll">
         <div class="" ref="msgScroll">
           <div
             class="msgBg"
-            v-for="item in dialogueLst"
+            v-for="item in dialogueList"
             :style="'text-align: ' + (item.type === 'local' ? 'right' : 'left')"
-            :key="item.text"
+            :key="item.reply"
           >
             <div
               style="display: inline-block;text-align: left;"
@@ -33,32 +34,36 @@
           </van-button>
         </div>
       </div>
-      <van-cell title="控制机器人" value="" />
+      <van-cell title="遥控器" value="" />
       <van-row>
         <van-col span="12">
           <div class="control">
             <van-button
               type="default"
-              @keydown="() => toOperation('head', 'up')"
+              @touchstart="() => toOperation('head', 'up')"
+              @touchend="() => (touch = false)"
             >
               上
             </van-button>
             <div class="conBtnGroup">
               <van-button
                 type="default"
-                @keydown="() => toOperation('head', 'left')"
+                @touchstart="() => toOperation('head', 'left')"
+                @touchend="() => (touch = false)"
               >
                 左
               </van-button>
               <van-button
                 type="default"
-                @keydown="() => toOperation('head', 'down')"
+                @touchstart="() => toOperation('head', 'down')"
+                @touchend="() => (touch = false)"
               >
                 下
               </van-button>
               <van-button
                 type="default"
-                @keydown="() => toOperation('head', 'right')"
+                @touchstart="() => toOperation('head', 'right')"
+                @touchend="() => (touch = false)"
               >
                 右
               </van-button>
@@ -70,26 +75,30 @@
           <div class="control">
             <van-button
               type="default"
-              @keydown="() => toOperation('wheel', 'forward')"
+              @touchstart="() => toOperation('wheel', 'forward')"
+              @touchend="() => (touch = false)"
             >
               前
             </van-button>
             <div class="conBtnGroup">
               <van-button
                 type="default"
-                @keydown="() => toOperation('wheel', 'left')"
+                @touchstart="() => toOperation('wheel', 'left')"
+                @touchend="() => (touch = false)"
               >
                 左
               </van-button>
               <van-button
                 type="default"
-                @keydown="() => toOperation('wheel', 'backward')"
+                @touchstart="() => toOperation('wheel', 'backward')"
+                @touchend="() => (touch = false)"
               >
                 后
               </van-button>
               <van-button
                 type="default"
-                @keydown="() => toOperation('wheel', 'right')"
+                @touchstart="() => toOperation('wheel', 'right')"
+                @touchend="() => (touch = false)"
               >
                 右
               </van-button>
@@ -129,48 +138,86 @@ export default {
   name: "app",
   robotToken: "",
   scoket: undefined,
-  deviceId: "",
   status: true,
+  timeout: undefined,
   data: function() {
     return {
       robotList: [],
-      dialogueLst: [],
-      robot: 0,
+      dialogueList: [],
+      remoteControl: [
+        {
+          typeL: "head",
+          btn: {
+            up: "上",
+            left: "左",
+            down: "下",
+            right: "右"
+          }
+        },
+        {
+          typeL: "wheel",
+          btn: {
+            forward: "前",
+            left: "左",
+            backward: "后",
+            right: "右"
+          }
+        }
+      ],
+      touch: false,
+      deviceId: "",
       message: ""
     };
   },
   methods: {
+    creatID() {
+      const T =
+        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+      let id = "";
+      for (let i = 0; i < 8; i++) {
+        id += T[Math.floor(Math.random() * 62)];
+      }
+      return id;
+    },
     tomsg() {
       if (!this.status) return Toast("链接已断开！");
       if (!this.message) return;
       let dialogue = {
         type: "local",
-        text: this.message
+        reply: this.message
       };
-      let dialogueLst = JSON.parse(JSON.stringify(this.dialogueLst));
-      dialogueLst.push(dialogue);
-      this.dialogueLst = dialogueLst;
-      this.scoket &&
-        this.scoket.send({
-          id: this.deviceId,
-          dialog: {
-            reply: this.message
-          }
-        });
+      console.log("发送------>", dialogue);
+      let dialogueList = JSON.parse(JSON.stringify(this.dialogueList));
+      dialogueList.push(dialogue);
+      this.dialogueList = dialogueList;
+      let p = {
+        id: this.creatID(),
+        dialog: {
+          reply: this.message
+        }
+      };
+      this.scoket && this.scoket.send(JSON.stringify(p));
+      this.message = "";
     },
     toOperation(type, opera) {
       if (!this.status) return Toast("链接已断开！");
-      let p = {};
-      p[type] = opera;
-      this.scoket &&
-        this.scoket.send({
-          id: this.deviceId,
-          controller: p
-        });
+      if (this.timeout) clearInterval(this.timeout);
+      this.touch = true;
+      this.timeout = setInterval(() => {
+        if (!this.touch) clearInterval(this.timeout);
+        let p = {
+          id: this.creatID(),
+          controller: {}
+        };
+        p.controller[type] = opera;
+        this.scoket && this.scoket.send(JSON.stringify(p));
+      }, Config.robotMoveTimeout);
     },
     createRobotLink() {
       if (!window.WebSocket) return Toast("该版本暂时不支持");
-      this.scoket && this.scoket.close() && (this.scoket = undefined);
+      let _this = this;
+      this.scoket && this.scoket.onclose() && (this.scoket = undefined);
+      console.log("开始链接");
       this.scoket = new WebSocket(
         Config.robotBaseWss +
           "/ws/app/event?clientId=" +
@@ -181,30 +228,34 @@ export default {
           this.robotToken
       );
       this.scoket.onmessage = function(event) {
-        var data = event.data;
-        console.log(data);
+        var data = JSON.parse(event.data || "{}");
         // 处理数据
         let dialogue = {
           type: "",
           text: data.reply
         };
-        let dialogueLst = JSON.parse(JSON.stringify(this.dialogueLst));
-        dialogueLst.push(dialogue);
-        this.dialogueLst = dialogueLst;
+        console.log("接收------>", data);
+        let dialogueList = JSON.parse(JSON.stringify(this.dialogueList));
+        dialogueList.push(dialogue);
+        this.dialogueList = dialogueList;
       };
       this.scoket.onopen = function() {
-        this.status = true;
+        _this.status = true;
+        console.log("链接成功");
       };
       this.scoket.onerror = function() {
-        this.status = false;
+        _this.status = false;
+        console.log("链接错误");
         Toast("链接已断开！");
       };
       this.scoket.onclose = function() {
-        this.status = false;
+        _this.status = false;
+        console.log("链接断开");
         Toast("链接已断开！");
       };
     },
     change(e) {
+      if (!e) return;
       this.deviceId = e;
       this.createRobotLink();
     }
@@ -225,6 +276,7 @@ export default {
             value: v.deviceId
           };
         });
+        this.change(this.robotList[0] ? this.robotList[0].value : "");
       });
     });
   },
@@ -265,7 +317,6 @@ export default {
   .msgBg {
     padding: 5px 3px;
     > div {
-      width: 70%;
       padding: 5px;
       color: #fff;
       border-radius: 5px;