语音播报

package.json

@@ -14,6 +14,7 @@
     "axios": "^0.18.0",
     "babel-polyfill": "^6.26.0",
     "echarts": "^5.3.2",
+    "speak-tts": "^2.0.8",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
     "vue": "^2.5.2",

src/assets/css/iconfont.styl

@@ -7,7 +7,7 @@
 
 .iconfont {
   font-family: "iconfont" !important;
-  font-size: 16px;
+  font-size: .16rem;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -15,4 +15,12 @@
 
 .icon-guanbi:before {
   content: "\e60f";
-}
+}
+
+.ifon_broadcast
+  color #fff
+.ifon_broadcast:before {
+  content: '\e600'
+}
+.ifon_broadcast_active
+  color #f17d3a

src/assets/css/iconfont/iconfont.json

@@ -1,30 +1,16 @@
 {
-  "id": "1255596",
+  "id": "3109872",
-  "name": "nl-hht-hl",
+  "name": "no name",
   "font_family": "iconfont",
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
     {
-      "icon_id": "2229060",
+      "icon_id": "201560",
-      "name": "无信号",
+      "name": "喇叭",
-      "font_class": "no-signal",
+      "font_class": "laba",
-      "unicode": "e76b",
+      "unicode": "e600",
-      "unicode_decimal": 59243
+      "unicode_decimal": 58880
-    },
-    {
-      "icon_id": "400034",
-      "name": "下拉",
-      "font_class": "htmal5icon03",
-      "unicode": "e626",
-      "unicode_decimal": 58918
-    },
-    {
-      "icon_id": "731140",
-      "name": "选择",
-      "font_class": "guanbi1",
-      "unicode": "e608",
-      "unicode_decimal": 58888
     },
     {
       "icon_id": "4736203",

src/assets/js/getData2.js

@@ -40,3 +40,16 @@ export const getDeviceYearMainPlan = (id) => post('api/deviceBigScreen/getDevice
 export const getDeviceGroupStatus = (id) => post('api/deviceBigScreen/getDeviceGroupStatus', {})
 /** 8.1当日任务列表 */
 export const getTodayTask = (id) => post('api/deviceBigScreen/getTodayTask', {})
+// export const getTodayTask = (id) => {
+//   let res = {
+//     code: '1',
+//     srb: {
+//       device_group_arr: [{fault_desc: '三六九1', needcast: '1', id: '1'}, {fault_desc: '三六九等了房椒粉', needcast: '1', id: '2'}, {fault_desc: '1', needcast: '1', id: '3'}]
+//     }
+//   }
+//   return res
+// }
+/** 9.1当日任务列表播报列表 */
+export const updateWarnTime = (ids) => post('api/deviceBigScreen/updateWarnTime', {
+  ids: ids
+})

src/assets/js/http.js

@@ -37,7 +37,7 @@ axios.interceptors.response.use(
         case 401:
           toast(error.response.data.message)
           store.dispatch('setSignOut')
-          router.push('/login')
+          router.push('/setup1')
           break
       }
       return Promise.reject(error.response.data)

src/pages/DeviceManage.vue

@@ -146,7 +146,7 @@
                         <div class="scroll-ul_1_div">{{e.input_time}}</div>
                         <div class="scroll-ul_1_div">{{e.device_name}}</div>
                         <div class="scroll-ul_1_div">{{e.extend_code}}</div>
-                        <div class="scroll-ul_1_div">{{e.fault_desc}}</div>
+                        <div class="scroll-ul_1_div">{{e.fault_desc}}<span v-show="e.needcast === '1'" class="iconfont ifon_broadcast" :class="{'ifon_broadcast_active': e.id = pkId}"></span></div>
                         <div class="scroll-ul_1_div">{{e.dept_name}}</div>
                         <div class="scroll-ul_1_div">{{e.invstatus}}</div>
                         <div class="scroll-ul_1_div">{{e.user_name}}</div>
@@ -242,7 +242,8 @@
 
 <script>
 import THeader from '@components/header.vue'
-import {getDeviceTime, getDeviceNumber, getDeviceFault, getDeviceRunStatus, getDeviceYearStatus, getDeviceYearMainPlan, getDeviceGroupStatus, getTodayTask} from '@js/getData2.js'
+import {getDeviceTime, getDeviceNumber, getDeviceFault, getDeviceRunStatus, getDeviceYearStatus, getDeviceYearMainPlan, getDeviceGroupStatus, getTodayTask, updateWarnTime} from '@js/getData2.js'
+import Speech from 'speak-tts'
 export default {
   name: 'DeviceManage',
   components: {
@@ -265,7 +266,10 @@ export default {
       gridArr2: [],
       gridArr3: [],
       gridArr4: [],
-      gridArr5: []
+      gridArr5: [],
+      speech: null,
+      ids: [],
+      pkId: ''
     }
   },
   computed: {
@@ -331,6 +335,7 @@ export default {
     }
   },
   mounted () {
+    this.SpeechInit() // 需要初始化
     this._getDeviceTime()
     this._getDeviceFault()
     this._getDeviceNumber()
@@ -342,9 +347,41 @@ export default {
     this.refresh()
   },
   beforeDestroy () {
+    this.speech.cancel()
     window.clearInterval(this.timer)
   },
   methods: {
+    SpeechInit () {
+      this.speech = new Speech()
+      this.speech.setLanguage('zh-CN')
+      this.speech.init().then(() => {})
+    },
+    // 播放函数
+    play (textContent, id, needcast, i, len) {
+      if (needcast === '0') {
+        return
+      }
+      this.speech.speak({
+        text: textContent, // 播放的文本内容
+        listeners: {
+          // 开始播放
+          onstart: () => {
+            this.pkId = id
+          },
+          // 判断播放是否完毕
+          onend: () => {
+            this.pkId = ''
+            this.ids.push(id)
+            console.log(this.ids)
+            if (i === len - 1) {
+              this._updateWarnTime()
+            }
+          },
+          // 恢复播放
+          onresume: () => {}
+        }
+      }).then(() => {})
+    },
     refresh () {
       this.timer = setInterval(() => {
         this._getDeviceTime()
@@ -834,12 +871,27 @@ export default {
     },
     /** 当日任务列表 */
     async _getTodayTask () {
+      this.ids = []
       let res = await getTodayTask()
       if (res.code === '1') {
         this.gridArr5 = [...res.srb.device_group_arr]
+        if (this.gridArr5.length > 0) {
+          this.gridArr5.map((el, i) => {
+            this.play(el.fault_desc, el.id, el.needcast, i, this.gridArr5.length)
+          })
+        }
       } else {
         this.Dialog(res.desc)
       }
+    },
+    async _updateWarnTime () {
+      debugger
+      let res = await updateWarnTime(this.ids)
+      if (res.code === '1') {
+        // this.toast(res.desc)
+      } else {
+        this.toast(res.desc)
+      }
     }
   }
 }
@@ -964,8 +1016,6 @@ export default {
     &:nth-child(even)
       background rgba(1,24,52,0.60)
       box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
-    &:last-child
-      border-bottom none
 .content-block-scroll-ul_1
   li
     .scroll-ul_1_div

src/pages/playVoice.vue

@@ -0,0 +1,52 @@
+<template>
+     <button @click="play('播放')">播放语音</button>
+</template>
+<script>
+import Speech from 'speak-tts'
+export default {
+  data () {
+    return {
+      speech: null
+    }
+  },
+  mounted () {
+    this.SpeechInit() // 需要初始化
+    setInterval(() => {
+      this.play('播放')
+    }, 5000)
+  },
+  methods: {
+    SpeechInit () {
+      this.speech = new Speech()
+      this.speech.setLanguage('zh-CN')
+      this.speech.init().then(() => {})
+    },
+    // 播放函数
+    play (textContent) {
+      this.speech.speak({
+        text: textContent, // 播放的文本内容
+        listeners: {
+          // 开始播放
+          onstart: () => { console.log('Start utterance') },
+          // 判断播放是否完毕
+          onend: () => { console.log('End utterance') },
+          // 恢复播放
+          onresume: () => { console.log('Resume utterance') }
+        }
+      }).then(() => { console.log('读取成功') })
+    },
+    // 暂停
+    paused () {
+      this.speech.pause()
+    },
+    // 从暂停处继续播放
+    goahead () {
+      this.speech.resume()
+    }
+  },
+  // 离开页面取消语音，不取消可能会造成奇妙的bug
+  destroyed () {
+    this.speech.cancel()
+  }
+}
+</script>

src/router/index.js

@@ -6,6 +6,7 @@ const Setup1 = r => require.ensure([], () => r(require('@page/Setup1')), 'Setup1
 const TaskScreen = r => require.ensure([], () => r(require('@page/TaskScreen')), 'TaskScreen')
 const WorkStep = r => require.ensure([], () => r(require('@page/WorkStep')), 'WorkStep')
 const DeviceManage = r => require.ensure([], () => r(require('@page/DeviceManage')), 'DeviceManage')
+const playVoice = r => require.ensure([], () => r(require('@page/playVoice')), 'playVoice')
 
 Vue.use(Router)
 
@@ -35,6 +36,10 @@ export default new Router({
     {
       path: '/DeviceManage',
       component: DeviceManage
+    },
+    {
+      path: '/playVoice',
+      component: playVoice
     }
   ]
 })

yarn.lock

@@ -6394,6 +6394,11 @@ spdy@^3.4.1:
     select-hose "^2.0.0"
     spdy-transport "^2.0.18"
 
+speak-tts@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/speak-tts/-/speak-tts-2.0.8.tgz#9ed6660fcd710840fcc01144e73ba5ea35f99c1e"
+  integrity sha512-VY6Q6mRjdou6bF+x0LspvM7GJhBxHx8CLyGPTNQQ7jrztiGutyI4QNZn0cA17c4uk0FnFbA4PaMI3skeZ6PiFg==
+
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "http://registry.npm.taobao.org/split-string/download/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"