实现部分页面的加载后自动朗读

web/README.md

@@ -48,4 +48,16 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 
 第二次加载一个组件实例，起初为默认设置状态，自动从storage读取到设置，同步给该组件，因为该组件新设置状态与storage中相同，不会再同步回storage，over。
 
-在另一个页面改变组件实例设置状态，自动把该组件新的设置状态保存到storage，触发storage事件，自动把storage数据同步给当前所有加载了的组件，导致有些组件状态变化，但所有组件的新状态都和storage相同不会再同步回storege，over。
+在另一个页面改变组件实例设置状态，自动把该组件新的设置状态保存到storage，触发storage事件，自动把storage数据同步给当前所有加载了的组件，导致有些组件状态变化，但所有组件的新状态都和storage相同不会再同步回storege，over。
+
+## 无障碍组件与外界的消息沟通
+
+### 向外发出
+* show：组件显示
+* hide：组件隐藏
+* audio-end: 音频播放结束
+* audio-error: 音频出错
+* audio-abort: 音频中止（并非暂停，还不知道什么情况下会触发这个）
+
+### 从外部接受
+* request-read: 请求朗读指定的文本

web/src/main.js

@@ -7,12 +7,14 @@ import 'element-ui/lib/theme-chalk/index.css';
 import './assets/css/base.css'
 Vue.use(ElementUI);
 
-Vue.mixin({
-})
+// Vue.mixin({
+// })
 
 // 不能通过location去判断
 Vue.prototype.$homePageUrl = 'http://192.168.0.81:8081/main'
 
+Vue.prototype.$eventBus = new Vue({})
+
 Vue.config.productionTip = false
 new Vue({
   router,

web/src/views/Exhibitions/index.vue

@@ -76,10 +76,29 @@ export default {
   //监控data中的数据变化
   watch: {
     // 监听地址栏参数变化
-    $route() {
-      // 拿到路由参数id
-      let temp = this.$route.params.id;
-      this.topId = Number(temp);
+    $route: {
+      handler: function() {
+        // 拿到路由参数id
+        let temp = this.$route.params.id;
+        this.topId = Number(temp);
+        switch (temp) {
+          case '1':
+            this.$eventBus.$emit('request-read', `You have reached the Current Exhibitions page of the Exhibitions section. This page includes one navigation section, six window sections, and two interactive section. To choose an section, please hit the shortcut key.`)
+            break;
+          case '2':
+            this.$eventBus.$emit('request-read', `You have reached the Permanent Exhibitions page of the Exhibitions section. This page includes one navigation section, six window sections, and two interactive section. To choose an section, please hit the shortcut key.`)
+            break;
+          case '3':
+            this.$eventBus.$emit('request-read', `You have reached the Past Exhibitions page of the Exhibitions section. This page includes one navigation section, six window sections, and two interactive section. To choose an section, please hit the shortcut key.`)
+            break;
+          case '4':
+            this.$eventBus.$emit('request-read', `You have reached the Overseas Exhibitions page of the Exhibitions section. This page includes one navigation section, six window sections, and two interactive section. To choose an section, please hit the shortcut key.`)
+            break;
+          default:
+            break;
+        }
+      },
+      immediate: true
     },
   },
   //方法集合
@@ -90,9 +109,6 @@ export default {
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    // 拿到路由参数id
-    let temp = this.$route.params.id;
-    this.topId = Number(temp);
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},

web/src/views/Exhibitions/info.vue

@@ -219,6 +219,8 @@ export default {
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
+    this.$eventBus.$emit('request-read', `You've reached the tertiary exhibition page. There is one navigation section, eight window sections, and one interactive section on this page. To choose a section, please hit the shortcut key.`)
+    
     let { id, k } = this.$route.query;
     id = Number(id);
     k = Number(k);

web/src/views/Home/index.vue

@@ -108,7 +108,9 @@ export default {
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.$eventBus.$emit('request-read', `You've reached the Home Page, which features one navigation section, four window sections, and one interactive section. To choose a section, please hit the shortcut key.`)
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前

web/src/views/Visit/Visit1.vue

@@ -31,7 +31,7 @@ created() {
 },
 //生命周期 - 挂载完成（可以访问DOM元素）
 mounted() {
-
+  this.$eventBus.$emit('request-read', `You've reached the Hours, Directions, and Admission page under the Visit section. This page includes one navigation section, six window sections, and one interactive section. To choose a section, please hit the shortcut key.`)
 },
 beforeCreate() {}, //生命周期 - 创建之前
 beforeMount() {}, //生命周期 - 挂载之前

web/src/views/Visit/Visit2.vue

@@ -564,7 +564,9 @@ export default {
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.$eventBus.$emit('request-read', `You have reached the Reservation page of the Visit section. This page comprises one navigation section, six window sections, and one interactive section. To choose a section, please hit the shortcut key.`)
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前

web/src/views/Visit/Visit3.vue

@@ -37,7 +37,9 @@ export default {
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.$eventBus.$emit('request-read', `You've navigated to the Floor Plans page of the Visit section. This page comprises one navigation section, six window sections, and one interactive section. To choose an area, please hit the shortcut key.`)
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前

web/src/views/Visit/Visit4.vue

@@ -53,7 +53,9 @@ export default {
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.$eventBus.$emit('request-read', `You have reached the Audio Guide & Tour page under the Visit section. This page includes one navigation section, six window sections, and one interactive section. To choose a section, please hit the shortcut key.`)
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前

web/src/views/Visit/Visit5.vue

@@ -58,7 +58,9 @@ export default {
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.$eventBus.$emit('request-read', `You have reached the Accessibility page under the Visit section. This page includes a navigation section, six window sections, and one interactive section. To choose an area, please hit the shortcut key.`)
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前

web/src/views/Visit/Visit6.vue

@@ -49,7 +49,9 @@ export default {
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.$eventBus.$emit('request-read', `You have reached the Café & Shop page of the Visit section. This page includes one navigation section, six window sections, and one interactive section. To choose an section, please hit the shortcut key.`)
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前

web/src/views/Visit/Visit7.vue

@@ -53,7 +53,7 @@ created() {
 },
 //生命周期 - 挂载完成（可以访问DOM元素）
 mounted() {
-
+  this.$eventBus.$emit('request-read', `You have reached the Visitor Guidelines page of the Visit section. This page includes one navigation section, six window sections, and one interactive section. To choose an area, please hit the shortcut key.`)
 },
 beforeCreate() {}, //生命周期 - 创建之前
 beforeMount() {}, //生命周期 - 挂载之前

web/src/views/accessibility.vue

@@ -546,6 +546,12 @@ export default {
     document.addEventListener('focusin', this.onFocusIn, {
       passive: true,
     })
+
+    this.$eventBus.$on('request-read', (text) => {
+      console.log('无障碍组件收到request-read消息：', text);
+      this.planToPlayAudio('', text)
+    })
+    
   },
   destroyed() {
     window.removeEventListener('storage', this.loadStoredSettings, {
@@ -565,7 +571,7 @@ export default {
     })
   },
   methods: {
-    planToPlayAudio: utils.debounce(function(taskId) {
+    planToPlayAudio: utils.debounce(function(taskId, text = '') {
       let XHR = new XMLHttpRequest()
       const that = this
       XHR.onreadystatechange = function() {
@@ -595,7 +601,7 @@ export default {
       XHR.open("POST", "http://192.168.0.245:8008/api/tts/toMp3")
       XHR.setRequestHeader("Content-Type", "application/json;charset=UTF-8")
       XHR.send(JSON.stringify({
-        content: this.hoverElemDisc + this.hoverElemContent
+        content: text || this.hoverElemDisc + this.hoverElemContent
       }))
     }, 500),
     keyEventHandler(e) {

web/vue.config.js

@@ -1,3 +1,5 @@
+const webpack = require('webpack')
+
 module.exports = {
   pages: {
     main: 'src/main.js',
@@ -13,6 +15,12 @@ module.exports = {
           }
         }
       ]
-    }
-  }
+    },
+    plugins: [
+      new webpack.ProvidePlugin({
+        utils: ['/src/utils.js', 'default']
+        // mapGetters: ['vuex', 'mapGetters']
+      }),
+    ],
+  },
 }