Food/food
3
0
Fork 0
Code Issues 60 Pull Requests Actions Packages Projects Releases Wiki Activity

【类 型】：feat

Browse Source 
【主	题】：语音播报
【描	述】：
	[原因]：现阶段主要用于按钮 点击反馈语音播报
	[过程]：调用responsivevoice api
	[影响]：
【结	束】

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动
This commit is contained in:
tk 2024-06-14 20:51:33 +08:00
parent 9f1d50bd63
commit 194a02607c
4 changed files with 74 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
public/index.html
View File

@ -1,17 +1,25 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8"> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
</head> <!-- 声音api -->
<body> <script src="https://code.responsivevoice.org/responsivevoice.js?key=i5XN3zfI"></script>
<noscript> <title>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <%= htmlWebpackPlugin.options.title %>
</noscript> </title>
<div id="app"></div> </head>
<!-- built files will be auto injected -->
</body> <body>
</html> <noscript>
<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>

2
src/components/Breadcrumb.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<el-breadcrumb separator-class="el-icon-caret-right" class="app-breadcrumb"> <el-breadcrumb separator-class="el-icon-caret-right" class="app-breadcrumb">
<el-breadcrumb-item> <el-breadcrumb-item>
<router-link to="/">主控</router-link> <router-link to="/">飞机主控</router-link>
</el-breadcrumb-item> </el-breadcrumb-item>
<el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index"> <el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index">
<router-link :to="item.path">{{ item.title }}</router-link> <router-link :to="item.path">{{ item.title }}</router-link>

68
src/components/ControllerTabs.vue
View File

@ -42,8 +42,9 @@
</el-dialog> </el-dialog>
<!-- 侧边 tab --> <!-- 侧边 tab -->
<div class="tab-container"> <div class="tab-container">
<el-button size="medium" type="primary" :class="activeIndex === index ? 'butIconGroupBG' : ''" class="butIconGroup" <el-button size="medium" type="primary" :class="activeIndex === index ? 'butIconGroupBG' : ''"
v-for="(item, index) in controlItems" :key="index" @click="toggleContent(index)"> 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> <i :class="item.icon" class="iconfont f-s-35"></i>
<div class="m-t-5 fb">{{ item.title }}</div> <div class="m-t-5 fb">{{ item.title }}</div>
</el-button> </el-button>
@ -74,7 +75,7 @@
<font class="m-l-5">航线锁定</font> <font class="m-l-5">航线锁定</font>
</el-button> </el-button>
<el-button size="mini" class="f-s-14" v-if="planeState & 1 && !airLock" type="primary" <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> <font class="m-l-5">提交任务</font>
</el-button> </el-button>
<el-button size="mini" class="f-s-14" v-if="planeState & 2" key="wirteBut" type="info" <el-button size="mini" class="f-s-14" v-if="planeState & 2" key="wirteBut" type="info"
@ -83,12 +84,12 @@
</el-button> </el-button>
<el-button size="mini" class="f-s-14" v-if="planeState & 4 && !(planeState & 16)" type="warning" <el-button size="mini" class="f-s-14" v-if="planeState & 4 && !(planeState & 16)" type="warning"
icon="f-s-14 iconfont icon-jiesuo" 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> <font class="m-l-5">解锁飞机</font>
</el-button> </el-button>
<el-button size="mini" class="f-s-14" v-if="planeState & 16 && !(planeState & 1) && !(planeState & 2)" <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" 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> <font class="m-l-5">执行任务</font>
</el-button> </el-button>
</el-button-group> </el-button-group>
@ -96,11 +97,11 @@
<el-form-item label="任务操作"> <el-form-item label="任务操作">
<el-button-group> <el-button-group>
<el-button size="mini" class="f-s-14" type="danger" icon="iconfont icon-meiyoudingdan-01" key="celBUt" <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> <font class="m-l-5">取消任务</font>
</el-button> </el-button>
<el-button size="mini" class="f-s-14" type="success" icon="iconfont icon-qiandai" key="bingBut" <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> <font class="m-l-5">已送达</font>
</el-button> </el-button>
</el-button-group> </el-button-group>
@ -116,36 +117,36 @@
</div> </div>
<div class="butIconBox"> <div class="butIconBox">
<el-button size="medium" type="primary" class="butIcon border" <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> <i class="iconfont icon-jiesuo f-s-24"></i>
<div class="m-t-5">解锁</div> <div class="m-t-5">解锁</div>
</el-button> </el-button>
<el-button size="medium" type="primary" class="butIcon border" <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> <i class=" iconfont icon-suoding f-s-24"></i>
<div class="m-t-5">加锁</div> <div class="m-t-5">加锁</div>
</el-button> </el-button>
<el-button size="medium" type="primary" class="butIcon border" <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> <i class="iconfont icon-yangshi_icon_tongyong_departure f-s-24"></i>
<div class="m-t-5">起飞</div> <div class="m-t-5">起飞</div>
</el-button> </el-button>
<el-button size="medium" type="primary" class="butIcon border" <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> <i class="iconfont icon-fengzheng1 f-s-24"></i>
<div class="m-t-5">悬停</div> <div class="m-t-5">悬停</div>
</el-button> </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> <i class="iconfont icon-duandianxufei f-s-24"></i>
<div class="m-t-5">复航</div> <div class="m-t-5">复航</div>
</el-button> </el-button>
<el-button size="medium" type="primary" class="butIcon border" <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> <i class="iconfont icon-yijianfanhang f-s-24"></i>
<div class="m-t-5">返航</div> <div class="m-t-5">返航</div>
</el-button> </el-button>
<el-button size="medium" type="primary" class="butIcon border" <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> <i class="iconfont icon-yangshi_icon_tongyong_arriving f-s-24"></i>
<div class="m-t-5">降落</div> <div class="m-t-5">降落</div>
</el-button> </el-button>
@ -159,19 +160,23 @@
<span>挂载仓控制</span> <span>挂载仓控制</span>
</div> </div>
<div class="butIconBox"> <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> <i class="iconfont icon-zhongliang f-s-24"></i>
<div class="m-t-5">归零</div> <div class="m-t-5">归零</div>
</el-button> </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> <i class="iconfont icon-xiangshang f-s-24"></i>
<div class="m-t-5">收钩</div> <div class="m-t-5">收钩</div>
</el-button> </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> <i class="iconfont icon-qiyong f-s-24"></i>
<div class="m-t-5">继续</div> <div class="m-t-5">继续</div>
</el-button> </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> <i class="iconfont icon-xuanting-zanting f-s-24"></i>
<div class="m-t-5">暂停</div> <div class="m-t-5">暂停</div>
</el-button> </el-button>
@ -183,22 +188,22 @@
</div> </div>
<div class="butIconBox"> <div class="butIconBox">
<el-button size="medium" type="primary" class="butIcon border" <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> <i class="iconfont icon-icon-rotation f-s-24"></i>
<div class="m-t-5">回中</div> <div class="m-t-5">回中</div>
</el-button> </el-button>
<el-button size="medium" type="primary" class="butIcon border" <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> <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>
<el-button size="medium" type="primary" class="butIcon border" <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> <i class="iconfont icon-chukong f-s-24"></i>
<div class="m-t-5">手动</div> <div class="m-t-5">手动</div>
</el-button> </el-button>
<el-button size="medium" type="primary" class="butIcon border" <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> <i class="iconfont icon-fangda f-s-24"></i>
<div class="m-t-5">焦距</div> <div class="m-t-5">焦距</div>
</el-button> </el-button>
@ -223,15 +228,16 @@
<span>飞机调试</span> <span>飞机调试</span>
</div> </div>
<div class="butIconBox"> <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> <i class="iconfont icon-zhinanzhen f-s-24"></i>
<div class="m-t-5">磁罗盘</div> <div class="m-t-5">磁罗盘</div>
</el-button> </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> <i class="iconfont icon-zuobiaozhoupeizhixiang f-s-24"></i>
<div class="m-t-5">加速度计</div> <div class="m-t-5">加速度计</div>
</el-button> </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> <i class="iconfont icon-canshupeizhi f-s-24"></i>
<div class="m-t-5">写入参数</div> <div class="m-t-5">写入参数</div>
</el-button> </el-button>
@ -245,6 +251,7 @@
<script> <script>
import { questAss } from '@/utils/api/table' import { questAss } from '@/utils/api/table'
import mqtt from '@/utils/mqtt' import mqtt from '@/utils/mqtt'
import { speakText } from '@/utils/index'
export default { export default {
name: 'TabController', name: 'TabController',
@ -258,10 +265,10 @@ export default {
scaleValue: 50, // 摄像头控制滑动条 焦距值 scaleValue: 50, // 摄像头控制滑动条 焦距值
takeoffValue: 2, // 起飞高度 takeoffValue: 2, // 起飞高度
controlItems: [// 菜单 controlItems: [// 菜单
{ title: '任务', icon: 'icon-songcanfuwu' }, { title: '任务', icon: 'icon-songcanfuwu', voice: '设置送餐任务' },
{ title: '控制', icon: 'icon-youxishoubing' }, { title: '控制', icon: 'icon-youxishoubing', voice: '控制飞机' },
{ title: '扩展', icon: 'icon-linghuokuozhan' }, { title: '扩展', icon: 'icon-linghuokuozhan', voice: '控制扩展组件' },
{ title: '调试', icon: 'icon-banshou_Line' } { title: '调试', icon: 'icon-banshou_Line', voice: '调试飞机' }
], ],
activeIndex: null, // 当前选中的菜单 activeIndex: null, // 当前选中的菜单
tabIsOpen: false, // 判断tab 是否弹出 tabIsOpen: false, // 判断tab 是否弹出
@ -320,6 +327,7 @@ export default {
}, },
methods: { methods: {
questAss, questAss,
speakText,
/** /**
* @description: 摄像头 滑动条松开 * @description: 摄像头 滑动条松开
* @param {string} item 项目 * @param {string} item 项目

12
src/utils/index.js
View File

@ -129,3 +129,15 @@ export function countSelIdArr (selection) {
selection.map((item) => idArr.push(item.id)) selection.map((item) => idArr.push(item.id))
return idArr return idArr
} }
/**
* @description: 封装文本转语音功能 responsiveVoice接口
* @param {*} text 要播放的文本
*/
export function speakText (text) {
if (!text || text.trim() === '') {
console.error('请输入要转换的文本！')
return
}
window.responsiveVoice.speak(text, 'Chinese Female')
}