情绪检测—技术方案

一、 技术方案

1.系统架构

如图是系统架构图，分为前端、交互层、设备端、业务层、数据层、数据库及运行环境计几大模块。前端采用Vue框架开发，系统UI采用的是流行的ElementUI，整个报表的展示采用Ecahrts开发。提供整个设备管理，数据报表可视化的页面。设备端采用树莓派制作，使用4G网络与前端后端通过MQTT、WebSocket进行通信及数据交互。业务层使用当下流行的SpringBoot框架开发，通过SpringBoot整合Quartz来实现异步任务的调度。整个业务层主要的功能是提供给前端及设备端一些接口以及对设备端传输的文本数据使用百度的API进行情感分析。数据层采用Mybatis及Durid开发。数据库采用的MySql数据库。

2.前端

2.1 开发框架

系统的Web界面基于Vue.js2.0版本框架开发，通过引入element-ui、vant、echarts和axios等UI、可视化与通信组件，实现了对情绪监控设备的管理，数据的可视化查看，以及前后端分离的实现。
Vue.js 是一套用于构建用户界面的渐进式框架,是一个基于MVVM模式的JavaScript 库。与其它大型框架相比，不同的地方是，Vue.js 的设计是自底向上逐层应用。一方面，Vue.js 的核心库专注于View层，且便于与第三方库或已有的项目进行整合;另一方面，与现代化的工具链以及各种支持类库结合使用时，Vue.js也完全能够为复杂的单页应用提供驱动。对于掌握了HTML/CSS/JavaScript的中级知识的开发者来说，Vue.js还是非常易于上手的，即便无使用框架的经验也无碍，当然有其他框架经验者更佳。
总的来说Vue.js 主要用于web交互界面的，其中有以下特点:

• 数据驱动：自动追踪依赖的模板表达式和计算属性。
• 组件化：用解耦、可复用的组件来构造界面。
• 轻量：24kb min+gzip，无依赖。
• 快速：精确有效的异步批量DOM更新。
• 模块友好：通过NPM安装，易于融入你的工作流。

2.2 开发准备

首先是开发环境的配置，以下是需要安装的软件与功能说明。
开发的IDE选择的是Visual Studio Code（以下简称VS Code），相较于其他前端开发IDE，VS Code更加轻量化。当然也可以使用WebStorm等IDE。可以访问Visual Studio Code - Code Editing. Redefined官网进行下载安装。
接下来需要安装Node.js，Node.js是 Web 前端开发必不可少的基础设施。注意，Web 前端的 JS 代码最终还是运行在浏览器中的，所以运行的时候，或者说在产品环境下，不依赖于 Node.js 。但是，Node.js 诞生以后，前端大爆发，类似 React/Vuejs 这样的前端框架的开发环境变得非常强大和负责，Node.js 是这些开发环境运行的基础。同时它还为我们提供了npm包管理仓库，我们系统中的element-ui、echarts和axios等组件都是通过npm进行安装的。Node.js 引发了前后端开发的爆发，尤其是前端。 JS 开发者众多，所以贡献开源代码的人就非常多，所有这些凝结成了 npm 这个世界上最大的软件包仓库。
npm 是 Node Package Manager 的缩写，意思是 Node 的包管理系统。Nodejs 现在如日中天，其中 npm https://www.npmjs.com/ 这个功不可没。在这里，我们要实现各种功能几乎都能找到现成的别人写好的包，直接拿了用就好了。
很多 npm 包都对应一个 Github 项目，但是如果只有代码，那么使用起来还不是特别方便。而当系统上安装好了 Node.js 之后，就会配套安装一个命令，叫做 npm 。

npm install moment

执行 npm install moment 就可以把 moment 这个包从 npm 的软件包仓库中下载这个包，然后安装到本地了。而 npm 的软件包仓库中，有数以万计的 moment 这样的包。 访问Node.js 中文网 (nodejs.cn)进行安装。


安装完成后基本的开发环境我们就配置好了，接下来需要使用到Node.js去安装一些组件。使用win+R输入cmd打开系统的终端，首先安装的是vue-cli脚手架工具。vue-cli是vue 官方提供的搭建交互式的项目脚手架，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需数分钟的时间即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。在终端中输入 npm install -g @vue/cli命令进行安装。


安装完毕后输入vue ui，若安装成功系统会自动打开浏览器界面。可以在此初始化一个Vue模板工程。具体步骤可参考以下截图。



为项目取好名字后点击下一步


在这里选择手动配置项目，然后点击下一步，


勾选上Router，然后进行下一步


最后点击创建项目，等待几分钟即可。
项目创建完毕后我们使用VS Code打开项目所在的目录。打开后VS Code可能会提示安装插件，我们直接安装就行。 下图是一个Vue2.0基础代码目录结构的说明。


输入 Ctrl+` 快捷键打开VS Code的集成终端，输入npm run dev，等待编译完成后使用浏览器访问127.0.0.1:8080即可。

2.3 插件选择

对于UI插件的选择，考虑到该项目需要在电脑端和手机端进行显示，同时还有可视化的展示内容，我们最终选择了element-ui、vant与echarts。
Element 是由“饿了么”团队开源出来的一套为开发者、设计师和产品经理使用的基于Vue.js框架2.0版本的桌面端组件库，是一套网站快速成型工具。它将前端开发中常见的内容如表单、表格、消息框等等，封装成组件的形式方便开发者使用，而易于上手、内容丰富。
Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。
Apache ECharts 是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
对于网络通信部分插件的选择，HTTP协议通信部分使用的是Axios，用于前端与后端之间的交互。MQTT协议通信使用的是MQTT.js，用于与终端设备之间的通信。
确定好组件后我们根据插件的教程文档进行安装与使用。

2.4 目录详细说明

• api目录：存放的是网络请求封装后的代码，包括http请求与mqtt的连接。

1.api.js：对后端的API进行封装，供Vue组件进行调用。
2.manage.js：对axios中的http请求方法进行封装，供api.js调用。
3.mqtt.js：对mqtt.js库进行封装，同时在这里配置与mqtt服务器相关的信息。Mqtt服务器的部署在第9节。
4.request.js：创建axios实例，设置服务器的后端地址。

• assets目录：存放系统中所用到的图片和图标等静态资源

1.login-background.jpeg：登录界面的背景图片。 2.exit.svg：首页右上角的退出图标。

• components目录：组件文件夹，用来存放 vue 的公共组件（注册于全局，在整个项目中通过关键词便可直接输出）。

• BigScreenTools目录：存放可视化界面相关的组件。

1.deviceInfo.vue：对应设备信息模块，若设备在线则可以显示出设备的磁盘用量、内存使用率，电池电量三个信息。

2.deviceMap.vue：设备位置显示模块。当页面初次加载时会默认加载设备最后一次定位到的位置，若设备在线并且有GPS信号后则会实时更新设备当前位置。

3.JobConfig.vue：预警任务模块。该组件可以完成任务的配置并开启/停止当前的监控任务。



4.jobConfigPhone.vue：预警任务模块手机端界面组件。功能与JobConfig一致，适配了手机界面的显示。

5.LastLine.vue：24小时内统计信息显示模块。当进入可视化界面时，会自动查询设备最近24小时内说话语句量的折线图。

6.motionPie.vue：情感倾向占比统计图。可以显示用户选择的时间段内语句情感的占比信息。

7.nowList.vue：实时语句统计模块。当设备在线时，采集到语句后就可以实时的看到所采集到的句子、句子的情感状态以及时间信息。默认会同步最近24小时内的语句。

8.timePick.vue：时间段选择模块。用户可以在此选择要统计的信息时间段，以生成可视化数据。

9.timePickPhone.vue：适合移动端界面的时间区间选择器，功能与网页端一致。

10.trackMap.vue：轨迹地图。在这里会向用户展示所选时间段内设备的运行轨迹。

11.wordCloud.vue：词云组件。根据时间段来生成当前时段的词云。若数据量足够多会呈现出一个爱心的形状。

• PC目录：该目录存放的是网页端浏览时的界面组件

1.Aside.vue：侧边栏组件，用于页面的切换。

2.Device_Add.vue：注册设备组件。该组件能完成设备的添加。

3.Device_List.vue：设备管理组件。该界面可以完成当前用户下设备数量的查看，编辑以及进入可视化界面等功能。

4.Header.vue：头部组件。网页的头部显示端，可以查看当前登录的用户名，折叠侧边栏，退出登录三个功能。

5.Main.vue：首页页面。

6.

• Phone目录：存放了移动端浏览时的界面组件。

1.Header.vue：头部显示组件。

2.Main.vue：展示设备列表界面。

• router目录：用来存放index.js，这个js用来配置路由。
• utils目录：存放了封装好的工具类操作，例如地图坐标系的转换，时间戳的转换等。
• views目录：用来放主体页面，虽然和组件文件夹都是 vue 文件，但 views 下的 vue 文件是可以用来充当路由 view 的。

1.BigScreenPC.vue：网页端下的可视化布局设计。通过引入BigScreenTools 目录下的组件完成可视化界面的功能实现。

2.BigScreenPhone.vue：移动端下的可视化界面展示。可以实现与网页端一样的功能。

3.Home.vue：网页端系统界面。通过引入Phone文件夹下的组件构建。同时它可以判断当前是否处于移动端访问状态，如果是，则跳转到移动端的系统界面。

4.homePhone.vue：移动端系统界面的布局。通过引入Phone文件夹下的组件构建。

5.Login.vue：登录与用户注册界面。

• App.vue文件：是项目的主组件，所有页面都是在该组件下进行切换的。
• main.js文件：是项目的入口文件，作用是初始化 vue 实例，并引入所需要的插件。

2.4 前端部署

打开Motion项目的VS Code的终端，输入npm run build，即可完成打包，完毕后可在根目录中找到名为dist的文件夹。
访问http://118.31.116.39:8888/f76fdb3e，输入用户名jeypiawh，密码c8266c51登录宝塔界面。将该文件夹中的文件上传至服务器的网站根目录的文件夹中去即可进行访问。

3.设备端

3.1设备端开发说明

设备端开发使用Pi 4B 8G作为主板，搭载SIM7600CE 4G HAT&LTE Cat-1 HAT模块作为供网模组。电源方面使用UPS HAT (B)供电。4G模块使用USB线连接树莓派实现4G网络通信。 1. 树莓派连接需要网线或者配置网络文件连接，通过内网SSH 或者VNC连接 更常用的方式是通过ssh控制树莓派，putty，SecureCRT，SSH Secure Shell Client等SSH软件。网线连接查询树莓派IP地址，在同一局域网下用电脑打开Xshell等等SSH软件，输入IP地址配置用户名pi，密码raspberry登录（https://shumeipai.nxez.com/2013/09/07/using-putty-to-log-in-to-the-raspberry-pie.html） 通过VNC登录方式连接桌面。使用VNC viewer输入树莓派ip地址，配置用户名pi，密码raspberry登录（https://shumeipai.nxez.com/2018/08/31/raspberry-pi-vnc-viewer-configuration-tutorial.html） 2. SIM7600CE 4G HAT（https://www.waveshare.net/wiki/SIM7600CE-CNSE） 4G模组使用说明：SIM7600模组通过USB口连接到树莓派上，然后执行指令，看是否可以正常识别到ttyUSB2，可以的话，通过minicom打开该端口：在使用SIM7600CE 4G HAT时通过RNDIS拨号上网。 1.ls /dev/ttyUSB* 2.sudo apt-get install minicom 3.sudo minicom -D /dev/ttyUSB2 通过minicom发送以下指令，然后等待模组重启 AT+CUSBPIDSWITCH=9011,1,1

ifconfig 查看是否有识别出一个usb0的网卡

3. UPS HAT (B)（https://www.waveshare.net/wiki/UPS_HAT_(B)） 适用于Raspberry Pi的不间断电源(UPS)模块，采用弹簧顶针设计，支持同时充电和放电,可提供稳定5V电压输出,可达5A大电流输出，可通过I2C接口监测电池的电压、电流、功率等参数。

注意：如果电流为负数则表示电池输出电流(可认为树莓派负载电流)，电流为正数则表示电池充电电流。

3.2 设备端代码说明

1.文件分层：

Count 文件夹为计数文件，noise文件夹为录音文件夹，time_result存储时间戳文件夹。asr_json.py程序为录音转文字。Main.py为设备数据及GPS定位信息。result.txt为翻译过来的文字。

2.主程序代码开发：

录音部分程序分为录音和百度api翻译录音文件转文字功能，以时间戳的形式命名录音文件，并且使用SQLite做本地小型数据库，存储时间戳。程序分为两个线程：inputnoise()函数实现录音，get_wav_nodes()实现翻译。翻译流程需要进行网络状态识别有网络的时候在进行语音转文字识别，无网络的时候不再进行转文字功能。录音文件本地保存之后至有网络时翻译。 设备信息部分实现MQTT协议上传设备信息及POST方法上传GPS经纬度信息。程序分为层层检测，第一步检测有无网络、ttyUSB存活状态。没有问题之后打开GPS获取信息，如若在室内情况无GPS信号则定义GPS经纬度为0。获取到GPS信息之后进行解码，去除多余符号之后解析GPS信息，将所有信息进行打包上传。（注意GPRMC编码解析的GPS信息为WGS-84标准，需要转成对应标准之后才能精准定位（百度为BD-09标准，高德等其他地图为GCJ-02标准））

3.3自启动

目前实现开机自启动程序，设置为服务启动。 启动：systemctl start speech_main.service 停止：systemctl stop speech_main.service

3.4异常处理

程序已完成异常处理操作，基本使用不会出现跳出程序。

4.业务层

4.1 业务层介绍

业务层采用当下最流行的Web开发框架SpringBoot框架开发，异步任务采用Quartz框架实现，整个业务层编写了提供给前端及树莓派端操作数据库及任务调度的API接口。前端及树莓派端可以通过业务层接口实现对数据库的增删改查以及任务的调度。在业务层实现了数据清洗、AI文本情感倾向分析、Echarts数据封装等方法。前端部分图表展示数据只需请求对应的API接口即可，无需对数据进行二次处理。在存入数据库前对文本进行情感分析，待得到分析结果后存入数据库，规避了高并发下引发的数据丢失等问题。

4.2 业务层文件功能说明

bean: 存放实体类及结果类（Status）

1.Device：设备表对应的实体类 2.DeviceGps：设备的位置信息表对应的实体类 3.Sentence：设备语句信息表对应的实体类 4.Status：结果类（所有结果返回格式） 5.User：用户表对应的实体类 config: 存放配置文件

1.CorsConfig：允许跨域配置 2.JacksonConfig：配置Date时区及格式化 controller: 存放提供API的接口类

1.DeviceController：操作数据库设备表接口 2.DeviceGpsController：操作数据库设备位置信息表接口 3.JobController：异步任务调用接口 4.LoginController：登陆注册接口 5.MotionPieController：情感分类饼图数据接口 6.RespberryPiController：提供给树莓派的调用的相关接口 7.SentenceMessageController：操作数据库设备语句信息表的接口 8.WorldCloudController：文本词云图数据接口 job: 存放定时任务类

1.NegativeNumJob：开启消极条数阈值预警任务 2.NegativeProJob：开启消极占比阈值预警任务 3.TimingWarningJOb：开启定时发送预警邮件任务 properties: 存放自定义配置类

1.MotionAPIProperties：百度API相关授权信息配置类 2.MqttProperties：MQTT相关配置类 utils: 相关工具类

1.MailSendUtil：邮件发送工具类 2.MailTempUtil：邮件模板工具类 3.MotionUtil：文本情感分析工具类 4.PahpUtil：Mqtt通信工具类 5.ParticipleUtil：文本分词工具类 6.StatisicalUtil：词频统计工具类 resources: 存放项目配置文件

1.application.yaml：项目配置文件 MotionProjectApplication 项目的主启动类

4.3 业务层逻辑

前端或者设备端请求业务层的API接口后，执行接口对应的方法，数据库操作通过Controller业务层调用xxxServiceImpl实现类，xxxServiceImpl实现了xxxService接口，调用xxxMapper的数据库操作方法来实现对数据库的操作，后端数据库操作及任务调度实现了充分解耦，在业务层可组合不同的数据库操作来实现对数据库的增删改查。

5.数据层

5.1 数据层介绍

数据层采用Mybatis框架开发，连接池采用阿里巴巴的druid数据库连接池。整个项目的数据库操作均使用注解开发，没有xml配置文件，注解开发形式不仅更加美观而且更加便于维护。数据层同样充分解耦，xxxMapper是最基础的数据库操作方法类，xxxService接口定义了想要实现的方法，xxxServiceImpl实现xxxService接口，并调用xxxMapper的数据库操作方法实现接口的方法，可在xxxServiceImpl内实现更加复杂的数据库操作。 Druid数据库连接池提供了数据库及Spring等信息的监控通过访问/druid 来查看监控信息。账号密码默认为admin，部署项目时可通过修改配置文件信息来修改该账号密码。

5.2 数据层文件说明

mapper: 存放数据库操作类

1.DeviceGpsMapper：操作数据库设备位置信息表 2.DeviceMapper：操作数据库设备表 3.SentenceMapper：操作数据库语句信息表 4.UserMapper：操作数据库用户表 service: 存放数据库操作逻辑接口及实现类

1.DeviceGpsServiceImpl实现DeviceGpsService接口：设备信息操作类 2.DeviceServiceImpl实现DeviceService接口：设备位置信息操作类 3.JobServiceImpl实现JobService接口：异步任务调度类 4.SentenceServiceImpl实现SentenceService接口：设备语句信息操作类 5.UserServiceImpl实现UserService接口：用户信息操作类

5.3 数据层逻辑

业务层通过调用xxxServiceImpl内的方法来实现对数据库的操作，xxxServiceMmpl实现了xxxService接口调用xxxMapper内的数据库操作方法来实现对数据库的操作。

6.数据库

6.1 数据库介绍

数据库采用的是当下比较流行的MySql数据库，Mysql数据库是一种关系型数据库，此项目使用的几张表之间有着密不可分的关系，故采用此数据库。

6.2 数据库E-R图

device.create_user_id关联user.id实现设备表关联用户表 sentence.device_id关联device.id实现语句信息表关联设备表 device_gps.device_id关联device.id实现设备GPS信息表关联设备表

6.3 数据库监控

ip:端口/druid 本项目默认访问ip和端口为： 118.31.116.39:8000/druid 监控页面初始账号密码为admin（可在配置文件修改）

7.项目部署

7.1 默认配置部署

将文件夹motion拷贝到服务器后，进入该文件夹，在终端使用如下命令运行项目

sh start.sh 使用如下命令终止项目

sh stop.sh 在项目运行前，请确保已经开启465端口及项目运行的目标端口（未修改配置文件端口时默认使用8000端口） 7.2 自定义配置部署 修改motion文件夹下application.yaml文件的内容完成自定义配置（建议修改前备份文件内容，避免配置修改有误导致无法自定义配置部署项目）

server:
  port: 8000  #配置项目启动端口
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver 
    url: jdbc:mysql://118.31.116.39:3306/motion 
    username: motion  
    password: DcRheHNKadRspFiC  

    druid:
      aop-patterns: com.detection.motion.*  
      filters: stat,wall   

      stat-view-servlet: 
        enabled: true
        login-username: admin   #在此处配置监控页面登陆用户名
        login-password: admin   #在此处配置监控页面登陆密码
        resetEnable: false
      web-stat-filter: 
        enabled: true
        urlPattern: /*
        exclusions: '*.js,*.gif,*.jpg,*.png,*.css,*.ico,/druid/*'
      filter:
        stat: 
          slow-sql-millis: 1000
          logSlowSql: true
          enabled: true
        wall:
          enabled: true
          config:
            drop-table-allow: false
  mail:
    default-encoding: UTF-8
    host: smtp.163.com   #使用的邮箱服务器
    username: qingganfenxi21@163.com   #邮箱账号
    password: KPICHTQMBVFQGUDA    #开通smtp服务后的授权码
    port: 465   #ssh走的465端口
    properties:
      mail:
        smtp:
          ssl:
            enable: true
          auth: true
          starttls:
            enable: true
            required: true

motion:
  api:
    app-id: 25233516    #百度API的app-id
    api-key: w1etS0VbvoMgG0yBi7YpeYUc   #百度API的api-key
    secret-key: r9eE1d3izBep1TYL13oaRzz424avBTjW    #百度API的secret-key

mqtt:
  broker: tcp://118.31.116.39:1883  

带注释说明的参数可以根据实际情况进行修改（不修改即按照此默认配置运行）

8.开通邮箱smtp服务

• 建议使用163邮箱或者qq邮箱（均已测试）

这里以qq邮箱开启为例，登陆qq邮箱网页端后按照如下步骤开启smtp服务即可
密保验证成功后会出现一个授权码（重要，此授权码就是yaml配置文件内的smtp授权码）


网易邮箱开启smtp服务（163邮箱和126邮箱步骤一致，记住授权码）