Android 系统TTS播报记录贴

<template>
  <div class="content">
    <div class="home-top-box">
      <div class="tite ccy1">{{tableData.confData.hospitalName}}</div>
      <div class="certant">
        {{tableData.deptName}}
      </div>
      <div class="time-box">
        <div class="week-date">
          <p class="ccy1">{{nowDate.time}}</p>
          <p class="ccy2">{{nowDate.date}}&nbsp;&nbsp;{{nowDate.week}}</p>
        </div>
      </div>
    </div>
	<!-- <view style="display: flex;">
		<button class="title" size="mini" @click="showToast">Toast</button>
		<view style="width: 10rpx;"></view>
		<button class="title" size="mini" @click="init">Init TTS</button>
		<view style="width: 10rpx;"></view>
		<button class="title" size="mini" @click="getInstallTTS">获取已安装的TTS</button>
		<view style="width: 10rpx;"></view>
		<view style="width: 10rpx;"></view> 
		<button class="title" size="mini" @click="play">播放</button>
		<view style="width: 10rpx;"></view>
	</view>
	<view style="width: 700rpx;">
	  <view class="uni-form-item uni-column">
	  <view class="title">已安装的TTS引擎列表: </view>
	      <radio-group name="radio" @change="onRadioChange">
	        <label v-for="(item, index) in ttsList" :key="item.value">
	          <radio :value="item.value" :checked="ttsName === item.value" />
	          <text>{{item.name}}</text>
	        </label>
	      </radio-group>
	  </view>
	</view> -->
		
	<div class="container" style="width: 96%; margin: 0 auto;">
	    <div class="left-section" style="width: 75%; float: left;">
	        <table class="no-border">
	            <thead>
	                <tr>
	                    <th class="header">诊室</th>
	                    <th class="header">当前就诊</th>
	                    <th class="header">等待就诊</th>
	                </tr>
	            </thead>
	            <tbody>
	                <tr v-for="(row, index) in tableData.patList" :key="index" :class="{'odd': index % 2 !== 0, 'even': index % 2 === 0}">
	                    <td>{{ row.roomName }}</td>
	                    <td class="current-patient" :style="{ color: '#ff3b0b' }">
	                        <template v-if="row.curData && row.curData.patientName">
	                            {{ row.curData.sortNum }} {{ addStar(row.curData.patientName) }}
	                        </template>
	                        <template v-else>
	                            {{ ' ' }}
	                        </template>
	                    </td>
	                    <td>
	                        <template v-if="row.patList && row.patList.length > 0">
	                            <div class="data-box" style="width: 50%; float: left; text-align: center;">
	                                {{ row.patList[0] ? `${row.patList[0].sortNum} ${addStar(row.patList[0].patientName)}` : '' }}
	                            </div>
	                            <div class="data-box" style="width: 50%; float: left; text-align: center;">
	                                {{ row.patList[1] ? `${row.patList[1].sortNum} ${addStar(row.patList[1].patientName)}` : '' }}
	                            </div>
	                        </template>
	                        <template v-else>
	                            {{ ' ' }}
	                        </template>
	                    </td>
	                </tr>
	                <tr v-for="index in 6 - (tableData.patList.length || 0)" :key="`empty-${index}`" :class="{'even': (tableData.patList.length + index) % 2 !== 0, 'odd': (tableData.patList.length + index) % 2 === 0}">
	                    <td colspan="3"></td>
	                </tr>
	            </tbody>
	        </table>
	    </div>
	    <div class="right-section" style="width: 25%; float: right;">
	        <table class="no-border">
	            <thead>
	                <tr>
	                    <th class="header">过号</th>
	                </tr>
	            </thead>
	            <tbody>
	                <tr v-if="passMark.length > 0" v-for="(subArray, subIndex) in passMark" :key="subIndex" class="even">
	                    <td>
	                        <template v-if="subArray.length > 0">
	                            <div class="data-box" style="width: 50%; float: left; text-align: center;">
	                                {{ subArray[0] ? `${subArray[0].sortNum} ${addStar(subArray[0].patientName)}` : '' }}
	                            </div>
	                            <div class="data-box" style="width: 50%; float: left; text-align: center;">
	                                {{ subArray[1] ? `${subArray[1].sortNum} ${addStar(subArray[1].patientName)}` : '' }}
	                            </div>
	                        </template>
	                        <template v-else>
	                            {{ ' ' }}
	                        </template>
	                    </td>
	                </tr>
	                <tr v-for="index in 6 - (passMark.length || 0)" :key="`empty-${index}`" class="even">
	                    <td></td>
	                </tr>
	            </tbody>
	        </table>
	    </div>
	</div>
	<div class="marquee-container">
	  <div class="marquee">
			温馨提示:请排队等待就诊，过号请重新取号!
		    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		    温馨提示:请排队等待就诊，过号请重新取号!
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			温馨提示:请排队等待就诊，过号请重新取号!
	  </div>
	</div>
  </div>
</template>

<script>
import { getNowDate } from "../../utils/data";
import Speech from 'speak-tts';
import { set } from 'vue';
import indexUtils from '../../utils/index.js'
import { EventBus } from '../../utils/event-bus.js';
const SpeechTTS = uni.requireNativePlugin('MT-TTS-Speech');

export default {
  components: {
  },
  data() {
    return {
      nowDate: {
        date: "",
        time: "",
        week: ""
      },
      ptType: '1',
      tableData: {},
      speech: null,
	  passMark: [],
	  ttsName: '',
	  spData: '',
	  ttsList:''
    };
  },
  onShow() {
  	indexUtils.logger('执行onShow：======>')
  	if (!getApp().globalData.indexShowInfo) {
  		uni.navigateTo({
  			url: '/pages/login/login'
  		})
  	}
  	try {
  		this.loadTitle = '资源加载中···'
  		this.load = true
  		let content = JSON.parse(getApp().globalData.indexShowInfo)
  		console.log(content);
  		this.getPageList(content)
  	} catch (e) {
  		//TODO handle the exception
  		this.loadTitle = '资源加载出错'
  	}
  },
  onLoad() {
	indexUtils.logger('执行onLoad：======>')
    const app = getApp();
    const tableData = app.globalData.tableData;
    this.tableData = tableData;
	console.log(this.tableData);
	// this.tableData.patList.forEach((item, index) => {
	// 	item.patList.forEach((item,index)=>{
	// 		const passMarkSubArray = item.filter(patItem => patItem.status === '2').map(patItem => ({
	// 		    sortNum: patItem.sortNum,
	// 		    patientName: patItem.patientName
	// 		}));
	// 		this.passMark[index] = passMarkSubArray;
	// 		console.log(JSON.stringify(this.passMark));
	// 	})
	// });
  },
  created() {
    EventBus.$on('updateData', this.handleUpdateData);
  },
  beforeDestroy() {
    EventBus.$off('updateData', this.handleUpdateData);
  },
  mounted() {
    this.nowDate = getNowDate();
    setInterval(() => {
      this.nowDate = getNowDate();
    }, 1000);
	this.passMark = [];
    // 初始化
    SpeechTTS.init((callback) => {
        console.log('初始化完成');
    });
    SpeechTTS.onDone((res) => {
    });
    SpeechTTS.getInstallTTS(res => {
      console.log(JSON.stringify(res));
      if (!res || res.length <= 0) {
        console.log('>> tts: TTS Engine not found');
        return;
      }
      let list = [];
      res.forEach(v => {
        list.push({
          name: v.label,
          value: v.name,
        });
      });
	  for (let i = 0; i < list.length; i++) {
	    if (list[i].value === 'com.iflytek.speechcloud') {
	        SpeechTTS.setEngine('com.iflytek.speechcloud');
			console.log('com.iflytek.speechcloud');
	        break;
	    }
	  }
    });
    // 添加事件监听器
    // #ifdef APP-PLUS
    plus.key.addEventListener("menubutton", () => {
 	    uni.navigateTo({
 	    	url: '/pages/login/login'
 	    })
    });
    // #endif
  },
  methods: {
    addStar(name) {
      return name.length > 2
        ? name.split('')[0] + new Array(name.length - 1).join('*') + name.split('')[name.length - 1]
        : name.split('')[0] + new Array(name.length).join('*')
    },
	async TTSspeak(Data) {
		// 设置语调和语速
		SpeechTTS.setPitch(70);
		SpeechTTS.setSpeed(65);
		// 播放文本
		const res = await SpeechTTS.speak({ text: Data });
	},
	// showToast(){
	//   SpeechTTS.toast('toast test');
	// },
	// init(){
	//   console.log('>> TTS:init...')
	//   SpeechTTS.init((callback) => {
	//     console.log('初始化完成');
	//   });
	
	//   SpeechTTS.onDone((res) => {
	//   	console.log(">> tts: play end " + res)
	//   });
	// },
	// play(){
	//   SpeechTTS.setPitch(70);
	//   SpeechTTS.setSpeed(65);
	//   const res = SpeechTTS.speak({ text:this.spData });
	//   if(res){
	// 	  console.log('播放完成' + res);
	//   }else{
	// 	  console.log('播放失败');
	//   }
	// },
	// getInstallTTS(){
	//   SpeechTTS.getInstallTTS(res => {
	//     console.log(JSON.stringify(res));
	//     if(!res || res.length <= 0){
	//       console.log('>> tts: TTS Engine not found');
	//       return
	//     }
	//     let list = [];
	//     res.forEach(v => {
	//       list.push({
	//         name: v.label,
	//         value: v.name,
	//       });
	//       console.log(v.label + '： ' +v.name)
	//     })
	//     this.ttsList = list;
	//   })
	// },
	// onRadioChange(e){
	//   this.ttsName = e.target.value;
	//   console.log('>> set Engine:'+this.ttsName);
	//   const res = SpeechTTS.setEngine(this.ttsName);
	//   console.log('>> set Engine = ' + res);
	// },
	
	handleUpdateData(data) {
		try {
	  	  getApp().globalData.indexShowInfo = JSON.parse(data)
		  const newData = JSON.parse(data);
		  const updatedData = newData.noticeInfo.ksData;
		  const upPatInfo = newData.noticeInfo.patInfo;
		  if (!this.tableData) {
		      this.tableData = [];
			  this.$set(this.tableData.patList, this.tableData.patList.length, updatedData);
		  }else{
			  this.tableData.patList = updatedData
			  this.$set(this.tableData.patList, updatedData);
		  }
		  updatedData.forEach((item, index) => {
		      const passMarkSubArray = item.patList.filter(patItem => patItem.status === '2').map(patItem => ({
		          sortNum: patItem.sortNum,
		          patientName: patItem.patientName
		      }));
		      this.passMark[index] = passMarkSubArray;
		  });
		  if (upPatInfo && upPatInfo.status === '0') {
		        const Data = `请${upPatInfo.patientName}到${upPatInfo.deptName}${upPatInfo.roomName}就诊`;
		  		console.log(Data)
		        this.TTSspeak(Data);
		  }
		} catch (e) {
		  console.error('Error parsing data:', e);
		}
	}
  },
  beforeDestroyed() {
  	// #ifdef APP-PLUS
  	plus.key.removeEventListener("menubutton", () => {
  		console.log();
  	});
  	// #endif
  },
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh; /* 视口高度，可根据需要调整 */
}

img {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.home-top-box {
  height: 6rem;
  width: 100%;
  z-index: 110;
  padding: 0 0.4rem;
  line-height: 0.84rem;
  color: #ffffff;
  box-sizing: border-box;
  background: #1065fe;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .tite {
    font-size: 3rem;
    font-weight: 600;
    margin-left: 5rem;
  }
  .certant{
	  font-size: 4rem;
	  letter-spacing: 1rem;
	  margin-left: 2rem;
  }
  .time-box {
      display: flex;
  
      p {
        font-size: 3rem;
        margin: 0;
      }
  
      .week-date {
        margin-top: 0.3rem;
        margin-right: 3.4rem;
  
        p {
          font-size: 2rem;
          line-height: 0.2rem;
        }
  	  .ccy1{
  		  margin-left: 9.6rem;
  	  }
  	  .ccy2{
  		  margin-left: -0.6rem;
  		  margin-top: 2rem;
  	  }
    }
}

  .type-box {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    width: 30px;

    span {
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 10px;
    }
  }
}
.container {
    overflow: hidden;
  .left-section, .right-section {
      padding: 10px;
      box-sizing: border-box;
  }

  .no-border {
      border: none;
      width: 100%;
  }

  .header {
      color: #fff;
  	  background-color: #1065fe;
	  font-size: 3.4rem;
	  font-weight: 500;
  }

  .odd {
      background-color: #e3eeff;
  }

  .even {
      background-color: #f3f7ff;
  }

  .current-patient {
      color: #ff3b0b;
  }

  tr {
      height: 7rem;
  }
  
  td {
      font-size: 2.8rem;
      text-align: center;
  }
  
  .data-box {
      padding: 10px;
      box-sizing: border-box;
  }
}

.marquee-container {
    width: 94%;
	height: 3rem;
    background-color: #ffebea;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
	padding: 1rem;
	margin: 0 auto;
  }
  .marquee {
    white-space: nowrap;
    font-size: 3rem;
    color: #ff3d00;
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 3rem; 
    text-align: center;
    animation: marquee 20s linear infinite;
  }
  @keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
  }
</style>