【类型】：feat

【主题】：语音播报【描述】： [原因]：现阶段主要用于按钮点击反馈语音播报 [过程]：调用responsivevoice api [影响]：【结束】 # 类型包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style：格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
2024-06-14 20:51:33 +08:00 · 2024-06-14 20:51:33 +08:00 · 194a02607c
commit 194a02607c
parent 9f1d50bd63
4 changed files with 74 additions and 46 deletions
--- a/public/index.html
+++ b/public/index.html
@ -1,17 +1,25 @@
 <!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 rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+  <!-- 声音api -->
+  <script src="https://code.responsivevoice.org/responsivevoice.js?key=i5XN3zfI"></script>
+  <title>
+    <%= htmlWebpackPlugin.options.title %>
+  </title>
 </head>
+
 <body>
  <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
 </body>
+
 </html>
--- a/src/components/Breadcrumb.vue
+++ b/src/components/Breadcrumb.vue
@ -1,7 +1,7 @@
 <template>
  <el-breadcrumb separator-class="el-icon-caret-right" class="app-breadcrumb">
    <el-breadcrumb-item>
-      <router-link to="/">主控</router-link>
+      <router-link to="/">飞机主控</router-link>
    </el-breadcrumb-item>
    <el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index">
      <router-link :to="item.path">{{ item.title }}</router-link>
--- a/src/components/ControllerTabs.vue
+++ b/src/components/ControllerTabs.vue
@ -42,8 +42,9 @@
    </el-dialog>
    <!-- 侧边 tab -->
    <div class="tab-container">
-      <el-button size="medium" type="primary" :class="activeIndex === index ? 'butIconGroupBG' : ''" class="butIconGroup"
-        v-for="(item, index) in controlItems" :key="index" @click="toggleContent(index)">
+      <el-button size="medium" type="primary" :class="activeIndex === index ? 'butIconGroupBG' : ''"
+        class="butIconGroup" v-for="(item, index) in controlItems" :key="index"
+        @click="toggleContent(index); speakText(item.voice)">
        <i :class="item.icon" class="iconfont f-s-35"></i>
        <div class="m-t-5 fb">{{ item.title }}</div>
      </el-button>
@ -74,7 +75,7 @@
                  <font class="m-l-5">航线锁定</font>
                </el-button>
                <el-button size="mini" class="f-s-14" v-if="planeState & 1 && !airLock" type="primary"
-                  icon="f-s-14 iconfont icon-chakanzhihangrizhi" @click="runQuest">
+                  icon="f-s-14 iconfont icon-chakanzhihangrizhi" @click="runQuest; speakText('提交任务，锁定航线。')">
                  <font class="m-l-5">提交任务</font>
                </el-button>
                <el-button size="mini" class="f-s-14" v-if="planeState & 2" key="wirteBut" type="info"
@ -83,12 +84,12 @@
                </el-button>
                <el-button size="mini" class="f-s-14" v-if="planeState & 4 && !(planeState & 16)" type="warning"
                  icon="f-s-14 iconfont icon-jiesuo"
-                  @click="publishFun('{setPlaneState:{bit:3,state:1,count:2,param:[1,0]}}')">
+                  @click="publishFun('{setPlaneState:{bit:3,state:1,count:2,param:[1,0]}}'); speakText('解锁飞机')">
                  <font class="m-l-5">解锁飞机</font>
                </el-button>
                <el-button size="mini" class="f-s-14" v-if="planeState & 16 && !(planeState & 1) && !(planeState & 2)"
                  type="success" icon="f-s-14 iconfont icon-yangshi_icon_tongyong_departure"
-                  @click="publishFun('{setPlaneState:{bit:5,state:1}')">
+                  @click="publishFun('{setPlaneState:{bit:5,state:1}'); speakText('准备起飞，执行送餐任务')">
                  <font class="m-l-5">执行任务</font>
                </el-button>
              </el-button-group>
@ -96,11 +97,11 @@
            <el-form-item label="任务操作">
              <el-button-group>
                <el-button size="mini" class="f-s-14" type="danger" icon="iconfont icon-meiyoudingdan-01" key="celBUt"
-                  @click="reQuest">
+                  @click="reQuest; speakText('任务取消，退回未备货状态')">
                  <font class="m-l-5">取消任务</font>
                </el-button>
                <el-button size="mini" class="f-s-14" type="success" icon="iconfont icon-qiandai" key="bingBut"
-                  @click="overQuest">
+                  @click="overQuest; speakText('任务完成')">
                  <font class="m-l-5">已送达</font>
                </el-button>
              </el-button-group>
@ -116,36 +117,36 @@
          </div>
          <div class="butIconBox">
            <el-button size="medium" type="primary" class="butIcon border"
-              @click="publishFun('{setPlaneState:{bit:3,state:1,count:2,param:[1,0]}}')">
+              @click="publishFun('{setPlaneState:{bit:3,state:1,count:2,param:[1,0]}}'); speakText('解锁飞机')">
              <i class="iconfont icon-jiesuo f-s-24"></i>
              <div class="m-t-5">解锁</div>
            </el-button>
            <el-button size="medium" type="primary" class="butIcon border"
-              @click="confirmation('飞机加锁，螺旋桨将停转，请谨慎操作！', '加锁操作', '{setPlaneState:{bit:3,state:0,count:2,param:[0,21196]}}')">
+              @click="confirmation('飞机加锁，螺旋桨将停转，请谨慎操作！', '加锁操作', '{setPlaneState:{bit:3,state:0,count:2,param:[0,21196]}}'); speakText('加锁,请注意安全')">
              <i class=" iconfont icon-suoding f-s-24"></i>
              <div class="m-t-5">加锁</div>
            </el-button>
            <el-button size="medium" type="primary" class="butIcon border"
-              @click="dialogVisible = true; dialogTitle = '起飞参数设置'; dialogItem = 'takeoffBox'">
+              @click="dialogVisible = true; dialogTitle = '起飞参数设置'; dialogItem = 'takeoffBox'; speakText('设置起飞高度')">
              <i class="iconfont icon-yangshi_icon_tongyong_departure f-s-24"></i>
              <div class="m-t-5">起飞</div>
            </el-button>
            <el-button size="medium" type="primary" class="butIcon border"
-              @click="publishFun('{setPlaneState:{bit:7,state:1}')">
+              @click="publishFun('{setPlaneState:{bit:7,state:1}'); speakText('悬停')">
              <i class="iconfont icon-fengzheng1 f-s-24"></i>
              <div class="m-t-5">悬停</div>
            </el-button>
-            <el-button size="medium" type="primary" class="butIcon border">
+            <el-button size="medium" type="primary" class="butIcon border" @click="speakText('继续执行航线')">
              <i class="iconfont icon-duandianxufei f-s-24"></i>
              <div class="m-t-5">复航</div>
            </el-button>
            <el-button size="medium" type="primary" class="butIcon border"
-              @click="publishFun('{setPlaneState:{bit:9,state:1}')">
+              @click="publishFun('{setPlaneState:{bit:9,state:1}'); speakText('返航')">
              <i class="iconfont icon-yijianfanhang f-s-24"></i>
              <div class="m-t-5">返航</div>
            </el-button>
            <el-button size="medium" type="primary" class="butIcon border"
-              @click="publishFun('{setPlaneState:{bit:5,state:1}')">
+              @click="publishFun('{setPlaneState:{bit:5,state:1}'); speakText('降落')">
              <i class="iconfont icon-yangshi_icon_tongyong_arriving f-s-24"></i>
              <div class="m-t-5">降落</div>
            </el-button>
@ -159,19 +160,23 @@
            <span>挂载仓控制</span>
          </div>
          <div class="butIconBox">
-            <el-button size="medium" type="primary" class="butIcon border" @click="publishFun('{hookConteroller:4}')">
+            <el-button size="medium" type="primary" class="butIcon border"
+              @click="publishFun('{hookConteroller:4}'); speakText('重置重量传感器')">
              <i class="iconfont icon-zhongliang f-s-24"></i>
              <div class="m-t-5">归零</div>
            </el-button>
-            <el-button size="medium" type="primary" class="butIcon border" @click="publishFun('{hookConteroller:0}')">
+            <el-button size="medium" type="primary" class="butIcon border"
+              @click="publishFun('{hookConteroller:0}'); speakText('收钩')">
              <i class="iconfont icon-xiangshang f-s-24"></i>
              <div class="m-t-5">收钩</div>
            </el-button>
-            <el-button size="medium" type="primary" class="butIcon border" @click="publishFun('{hookConteroller:3}')">
+            <el-button size="medium" type="primary" class="butIcon border"
+              @click="publishFun('{hookConteroller:3}'); speakText('继续放钩')">
              <i class="iconfont icon-qiyong f-s-24"></i>
              <div class="m-t-5">继续</div>
            </el-button>
-            <el-button size="medium" type="primary" class="butIcon border" @click="publishFun('{hookConteroller:2}')">
+            <el-button size="medium" type="primary" class="butIcon border"
+              @click="publishFun('{hookConteroller:2}'); speakText('暂停放钩')">
              <i class="iconfont icon-xuanting-zanting f-s-24"></i>
              <div class="m-t-5">暂停</div>
            </el-button>
@ -183,22 +188,22 @@
          </div>
          <div class="butIconBox">
            <el-button size="medium" type="primary" class="butIcon border"
-              @click="publishFun('{cameraController:{item:0,val:0}}')">
+              @click="publishFun('{cameraController:{item:0,val:0}}'); speakText('摄像头一键回中')">
              <i class="iconfont icon-icon-rotation f-s-24"></i>
              <div class="m-t-5">回中</div>
            </el-button>
            <el-button size="medium" type="primary" class="butIcon border"
-              @click="publishFun('{cameraController:{item:2,val:0,yaw:0,pitch:-50}}')">
+              @click="publishFun('{cameraController:{item:2,val:0,yaw:0,pitch:-50}}'); speakText('摄像头一键俯瞰')">
              <i class="iconfont icon-down f-s-24"></i>
-              <div class="m-t-5">俯视</div>
+              <div class="m-t-5">俯瞰</div>
            </el-button>
            <el-button size="medium" type="primary" class="butIcon border"
-              @click="dialogVisible = true; dialogTitle = '摄像头控制'; dialogItem = 'cameraBox'">
+              @click="dialogVisible = true; dialogTitle = '摄像头控制'; dialogItem = 'cameraBox'; speakText('手动调整摄像头')">
              <i class="iconfont icon-chukong f-s-24"></i>
              <div class="m-t-5">手动</div>
            </el-button>
            <el-button size="medium" type="primary" class="butIcon border"
-              @click="dialogVisible = true; dialogTitle = '摄像头控制'; dialogItem = 'cameraBox'">
+              @click="dialogVisible = true; dialogTitle = '摄像头控制'; dialogItem = 'cameraBox'; speakText('调整镜头焦距')">
              <i class="iconfont icon-fangda f-s-24"></i>
              <div class="m-t-5">焦距</div>
            </el-button>
@ -223,15 +228,16 @@
            <span>飞机调试</span>
          </div>
          <div class="butIconBox">
-            <el-button size="medium" type="primary" class="butIcon border" @click="publishFun('{bit:11,state:1}')">
+            <el-button size="medium" type="primary" class="butIcon border"
+              @click="publishFun('{bit:11,state:1}'); speakText('校准磁罗盘')">
              <i class="iconfont icon-zhinanzhen f-s-24"></i>
              <div class="m-t-5">磁罗盘</div>
            </el-button>
-            <el-button size="medium" type="primary" class="butIcon border">
+            <el-button size="medium" type="primary" class="butIcon border" @click="speakText('校准加速度计')">
              <i class="iconfont icon-zuobiaozhoupeizhixiang f-s-24"></i>
              <div class="m-t-5">加速度计</div>
            </el-button>
-            <el-button size="medium" type="primary" class="butIcon border">
+            <el-button size="medium" type="primary" class="butIcon border" @click="speakText('写入参数')">
              <i class="iconfont icon-canshupeizhi f-s-24"></i>
              <div class="m-t-5">写入参数</div>
            </el-button>
@ -245,6 +251,7 @@
 <script>
 import { questAss } from '@/utils/api/table'
 import mqtt from '@/utils/mqtt'
+import { speakText } from '@/utils/index'

 export default {
  name: 'TabController',
@ -258,10 +265,10 @@ export default {
      scaleValue: 50, // 摄像头控制滑动条 焦距值
      takeoffValue: 2, // 起飞高度
      controlItems: [// 菜单
-        { title: '任务', icon: 'icon-songcanfuwu' },
-        { title: '控制', icon: 'icon-youxishoubing' },
-        { title: '扩展', icon: 'icon-linghuokuozhan' },
-        { title: '调试', icon: 'icon-banshou_Line' }
+        { title: '任务', icon: 'icon-songcanfuwu', voice: '设置送餐任务' },
+        { title: '控制', icon: 'icon-youxishoubing', voice: '控制飞机' },
+        { title: '扩展', icon: 'icon-linghuokuozhan', voice: '控制扩展组件' },
+        { title: '调试', icon: 'icon-banshou_Line', voice: '调试飞机' }
      ],
      activeIndex: null, // 当前选中的菜单
      tabIsOpen: false, // 判断tab 是否弹出
@ -320,6 +327,7 @@ export default {
  },
  methods: {
    questAss,
+    speakText,
    /**
     * @description: 摄像头 滑动条松开
     * @param {string} item 项目
--- a/src/utils/index.js
+++ b/src/utils/index.js
@ -129,3 +129,15 @@ export function countSelIdArr (selection) {
  selection.map((item) => idArr.push(item.id))
  return idArr
 }
+
+/**
+ * @description: 封装文本转语音功能 responsiveVoice接口
+ * @param {*} text 要播放的文本
+ */
+export function speakText (text) {
+  if (!text || text.trim() === '') {
+    console.error('请输入要转换的文本！')
+    return
+  }
+  window.responsiveVoice.speak(text, 'Chinese Female')
+}