SpringBoot+Vue实现指定账号审批单据时前端进行语音播报

场景

若依前后端分离版本地搭建开发环境并运行项目的教程：

若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-CSDN博客_若依前后端分离搭建

基于上面搭建起来架构的基础上，业务需求是某单据需要审批时，通过语音播报及时通知对应的账号。

一种思路：

后端与前端使用websocket建立连接，连接时使用登录账号作为标识。

后台使用定时任务，判断当单据状态为待审批的数据个数不为0时，向指定的账户推送消息，前端收到消息时，进行语音播报。

这个思路要考虑websocket在切换页面时的销毁和连接后台websocket失败时的重连机制。

另一种思路：

后台只写接口，接口中接收参数为账号，根据账号查询该账户是否为要播报的账户，如果是要播报的账户并且待审批的数据个数不为0

时，则接口返回true,否则返回false。前端新建定时器，固定时间带着当前登录用户的账户请求接口。

这种思路需要前端频繁的请求接口，不大合适，但是如果后台接口的地址是对接的第三方的系统，第三方的系统只提供对外的接口情况下，该思路较为适合。下面介绍这种思路的实现。

该思路用在并发量不大的前提下。

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、首先实现指定的账户进行播报中配置指定的账户。

前端实现一个从所有账户中勾选账户的方式比较友好，这里为了简单实现，所有采用手动输入配置账号的方式实现。

 

实现如上多选配置的操作可以参考如下

Vue中使用el-tag标签实现输入多个字符串实现新增和修改回显(字符数组拼接和拆分)：

Vue中使用el-tag标签实现输入多个字符串实现新增和修改回显(字符数组拼接和拆分)_BADAO_LIUMANG_QIZHI的博客-CSDN博客_el-tag vue

最终存储进数据的形式如下

2、然后编写后台接口用来判断是否需要进行播报

@RestController
@RequestMapping(("/remindDispatcher"))
@Slf4j
public class BusRemindDispatcherController extends BaseController {

    @Autowired
    private BusRemindDispatcherService busRemindDispatcherService;

    @GetMapping("/remind")
    public AjaxResult remind(String user) {
        return AjaxResult.success(busRemindDispatcherService.remind(user));
    }

}

接口的业务逻辑实现：

获取上面设置中的字符串然后使用→符合分割成字符串list

然后如果待审批的数据不为0且传递的账号在要进行播报的账户中，则返回true,否则返回false

    public Map remind(String user) {
        Map result = new HashMap<>();
        result.put("isRemind", false);

        BusParameterSetting busParameterSetting = busParameterSettingMapper.selectBusParameterSetting_redis(new BusParameterSetting());
        List userList = busParameterSetting.getRemindDispatcher() != null ? Arrays.asList(busParameterSetting.getRemindDispatcher().split("→")) : Arrays.asList("");

        BusLogisticsTask busLogisticsTask = new BusLogisticsTask();
        busLogisticsTask.setOrderStatus("1");
        List logisticsTasks = busLogisticsTaskService.selectBusLogisticsTaskList(busLogisticsTask);

        if (logisticsTasks.size() != 0 && userList.contains(user)) {
            result.put("isRemind", true);
        }

        return result;
    }

但是这里注意查询配置的哪些账户可以接收播报的数据不用每次都从数据库中查询。

这里的selectBusParameterSetting_redis使用了缓存注解实现优先从Redis缓存层查询，如果redis中没有则

从数据库mysql中查询并将其更新到redis中一份。并且当调用更新接口更新数据时也会从数据中更新一份最新的更新

到redis中。实现可以参考如下：

SpringBoot中通过自定义缓存注解(AOP切面拦截)实现数据库数据缓存到Redis：

SpringBoot中通过自定义缓存注解(AOP切面拦截)实现数据库数据缓存到Redis_BADAO_LIUMANG_QIZHI的博客-CSDN博客

3、前端实现定时器调用接口

首先在登录成功之后的页面初始化之后调用建立定时器的操作，这里使用的ruoyi框架，所以是在layout下的index.vue

 

  mounted() {
    this.getApplyCarBroadCast();
  },

然后方法实现

    // 语音播报
    getApplyCarBroadCast() {
      if (this.applyCarTime) {
        clearInterval(this.applyCarTime);
      }
      //获取当前登录用户
      var userName = this.$store.state.user.name;
      this.applyCarTime = setInterval(() => {
        getApplyCarInfo(userName).then((res) => {
          let isRemind = res.data.isRemind;
          if(isRemind){
            //播报
            this.speech.speak({ text: "您有新的用车申请，请及时审批" }).then(() => {
             
            });
          }
        });
      }, 5000);
    },

注意这里的判断定时器已经存在，先将之前的清除掉，再声明新的。

然后若依前端框架中获取登录用户的账户的方法是

var userName = this.$store.state.user.name;

定时器这里设定的是每5秒调用一次接口，接口的引入

import { getApplyCarInfo } from "@/api/home/home";

接口的实现

import request from '@/utils/requestWithOutAlert'

export function getApplyCarInfo(query) {
    return request({
        url: '/fzys/remindDispatcher/remind',
        method: 'get',
        params:
        {
          user:query
        }
    })
}

注意这里的请求参数的传递形式。request是若依框架封装的请求的工具类

这里复制了一份出来并修改了

将原来接口返回500等错误情况的弹窗提示修改为控制台输出。避免因后台接口出现问题导致前端页面一直弹窗提示错误的情况。

4、语音播报的实现

上面语音播报通过

            this.speech.speak({ text: "您有新的用车申请，请及时审批" }).then(() => {
             
            });

完整的实现流程参考如下

Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音)：

Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音)_BADAO_LIUMANG_QIZHI的博客-CSDN博客_tts插件