Merge remote-tracking branch 'origin/develop' into develop

8 months ago · 8fbacdd3ae
1 changed files with 157 additions and 0 deletions
--- a/ruoyi-ui/src/views/text/index.vue
+++ b/ruoyi-ui/src/views/text/index.vue
@ -0,0 +1,157 @@
 <!--<template>-->
 <!--  <div>-->
 <!--    WebSocket Test-->
 <!--  </div>-->
 <!--</template>-->
 <!--<script>-->
 <!--import {mapState} from "vuex";-->
 <!--const synth = window.speechSynthesis // 启用文本-->
 <!--const msg = new SpeechSynthesisUtterance()-->
 <!--export default {-->
 <!--  name: 'WebSocketTest',-->
 <!--  data() {-->
 <!--    return {-->
 <!--      ws: null, // WebSocket实例-->
 <!--      name:'', // WebSocket实例-->
 <!--      // 添加用于配置WebSocket的响应式数据-->
 <!--      socketConfig: {-->
 <!--        password: 'zc&ws123',-->
 <!--        // tokenSN: this.token, // 如-->
 <!--        heartRate: 1000, // 示例心跳间隔时间-->
 <!--      },-->
 <!--    };-->
 <!--  },-->
 <!--  computed: {-->
 <!--    ...mapState({-->
 <!--      token: state => state.user.token,-->
 <!--      websocket: state => state.user.websocket-->
 <!--    })-->
 <!--  },-->
 <!--  created() {-->
 <!--    this.initWebSocket();-->
 <!--  },-->
 <!--  beforeDestroy() {-->
 <!--    if (this.ws) {-->
 <!--      this.ws.close();-->
 <!--    }-->
 <!--  },-->
 <!--  methods: {-->
 <!--    // 语音播报的函数-->
 <!--    handleSpeak(text) {-->
 <!--      msg.text = text // 内容-->
 <!--      msg.lang = 'zh-CN' // 使用的语言:中文-->
 <!--      msg.volume = 1 // 声音音量：1-->
 <!--      msg.rate = 1 // 语速：1-->
 <!--      msg.pitch = 1 // 音高：1-->
 <!--      synth.speak(msg) // 播放-->
 <!--    },-->
 <!--    // 语音停止-->
 <!--    handleStop(e) {-->
 <!--      msg.text = e-->
 <!--      msg.lang = 'zh-CN'-->
 <!--      synth.cancel(msg) // 取消该次语音播放-->
 <!--    },-->
 <!--    open2(message){-->
 <!--      this.$notify({-->
 <!--        title: '提示',-->
 <!--        message: message,-->
 <!--        duration: 0-->
 <!--      });-->
 <!--    },-->
 <!--    initWebSocket() {-->
 <!--      const { password, heartRate ,tokenSN} = this.socketConfig;-->
 <!--      const url = 'ws://' + location.hostname + ':7789/ws';-->
 <!--      this.ws = new WebSocket(url);-->
 <!--      this.ws.onmessage = (message) => {-->
 <!--        console.log('WebSocket 收到的数据', message.data);-->
 <!--        message = JSON.parse(message.data);-->
 <!--        const method = message.method;-->
 <!--        if (method !== 'event') {-->
 <!--          return;-->
 <!--        }-->
 <!--        const params = message.params;-->
 <!--        const subEvent = params.subEvent;-->
 <!--        const content = params.content;-->
 <!--        switch (subEvent) {-->
 <!--          case '1':-->
 <!--            console.log('WebSocket 视频AI:', content);-->
 <!--            this.handleSpeak(content) // 传入需要播放的文字-->
 <!--            break;-->
 <!--          case '0':-->
 <!--            console.log('WebSocket 手动录入:', content);-->
 <!--            console.log('WebSocket 手动录入:', content.event);-->
 <!--            console.log('WebSocket 手动录入:', content.content);-->
 <!--            this.open2(content.content);-->
 <!--            this.handleSpeak(content) // 传入需要播放的文字-->
 <!--            break;-->
 <!--          default:-->
 <!--        }-->
 <!--      };-->
 <!--      // 添加其他WebSocket事件监听-->
 <!--      this.ws.onopen = this.onOpen;-->
 <!--      this.ws.onerror = this.onError;-->
 <!--      this.ws.onclose = this.onClose;-->
 <!--    },-->
 <!--    onOpen(event) {-->
 <!--      console.log('WebSocket opened:', event);-->
 <!--    },-->
 <!--    onError(event) {-->
 <!--      console.error('WebSocket error:', event);-->
 <!--    },-->
 <!--    onClose(event) {-->
 <!--      console.log('WebSocket closed:', event);-->
 <!--    },-->
 <!--  },-->
 <!--};-->
 <!--</script>-->
 <template>
  <div>
    <input v-model="inputValue" @input="formatInput" type="text">
    <p>格式化后的值: {{ formattedValue }}</p>
  </div>
 </template>
 <script>
 export default {
  data() {
    return {
      inputValue: '', // 用户输入的原始值
      formattedValue: '' // 格式化后的值，用于显示
    };
  },
  watch: {
    inputValue(newValue) {
      this.formattedValue = this.formatToThreeDigits(newValue);
    },
  },
  methods: {
    formatInput(e) {
      // 确保输入只包含数字，并且最多三位
      const value = e.target.value.replace(/[^0-9]/g, '');
      if (value.length > 3) {
        this.inputValue = value.slice(0, 3); // 如果超过三位，截取前三位
      } else {
        this.inputValue = value;
      }
    },
    formatToThreeDigits(value) {
      return value.padStart(3, '0'); // 不足三位前面补0
    },
  },
 };
 </script>