a543462378 2022-07-14 13:34 采纳率: 84.7%
浏览 99
已结题

vue项目中报警声音结束之后怎么重新进行报警?

vue项目,页面有·超标报警功能,就是后台传值isExceeding= ‘1’就报警,现在完成了按顺序依次报警
就是判断设备有没有超标,超标了就按照第几台设备对应报警,从第一台开始,按顺序一台一台判断并报警。

img

<template>
  <div class="shore-power-general">
    <el-card>
      <div style="margin-right:2%; display: flex;align-items: center; justify-content: flex-end;">
        <div class="switch">是否开启声音报警:</div>
        <el-switch v-model="startAudio" />
      </div>
    </el-card>
    <div class="equipment-list">
      <div
        v-for="(i, idx) in equipmentList"
        :key="idx"
        class="equipment-list-item align-center"
      >
        <div class="equipment-list-item-bottom">
          <div v-if="startAudio === true">
            <div v-if="audios === '0'">
              <div v-if="idx === 0">
                <audio
                  v-if="i.isExceeding == '1'"
                  id="audiosStart"
                  src="./newjingbao1.mp3"
                />
              </div>
              <div v-if="idx === 1">
                <audio
                  v-if="i.isExceeding == '1'"
                  id="audiosStart"
                  src="./newjingbao2.mp3"
                />
              </div>
              <div v-if="idx === 2">
                <audio
                  v-if="i.isExceeding == '1'"
                  id="audiosStart"
                  src="./newjingbao3.mp3"
                />
              </div>
              <div v-if="idx === 3">
                <audio
                  v-if="i.isExceeding == '1'"
                  id="audiosStart"
                  src="./newjingbao4.mp3"
                />
              </div>
              <div v-if="idx === 4">
                <audio
                  v-if="i.isExceeding == '1'"
                  id="audiosStart"
                  src="./newjingbao5.mp3"
                />
              </div>
              <div v-if="idx === 5">
                <audio
                  v-if="i.isExceeding == '1'"
                  id="audiosStart"
                  src="./newjingbao6.mp3"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { getEquipmentInfo } from '@/api/IntelligentIOT'
export default {
  data() {
    return {
      // 报警声音
      startAudio: false,
      audios: '1',
      clockInterval: null,
      form: {
        currentPage: 1,
        pageSize: 100
      },
      equipmentList: [],
      timer: null
    }
  },
  watch: {
    startAudio: function() {
      if (this.audios === '0') {
        var timer = setTimeout(() => {
          this.playAudio()
          clearTimeout(timer)
        }, 500)
      }
    }
  },
  created() {
    this.init()
    this.timer = setInterval(() => {
      // console.error("11111");
      this._getEquipmentInfo()
      this.audios = '0'
    }, 9000)
  },
  methods: {
    async init() {
      await this._getEquipmentInfo()
      this.startAudio = true
      this.audios = '0'
    },
    // 语音播放
    playAudio() {
      var audios = document.getElementsByTagName('audio')
      for (var i = 0; i < audios.length; i++) {
        var current = audios[i]
        current.addEventListener('ended', function() {
          console.log(`${this.src} ended`)
          var audioArr = document.getElementsByTagName('audio')
          for (var j = 0; j < audioArr.length; j++) {
            if (this === audioArr[j]) {
              var nextAudio = audioArr[j + 1]
              nextAudio.play()
              console.log(`${nextAudio.src} started.`)
              break
            }
          }
        }, false)
      }
      audios[0].play()
    },
    // 设备清单
    async _getEquipmentInfo() {
      this.currentTime = 30
      const res = await getEquipmentInfo({
        companyFid: this.$store.getters.companys.companyFid
      })
      if (res.code === '0') {
        this.equipmentList = res.data
      }
    }
  }
}
</script>

现在想报警完成之后从头开始判断当前设备是否超标,再来一轮报警,这要怎么办?

  • 写回答

3条回答 默认 最新

  • eq0284 2022-07-14 13:51
    关注

    audio有loop属性,可以循环播放,不需要你自己取操作播放

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 7月22日
  • 已采纳回答 7月14日
  • 修改了问题 7月14日
  • 创建了问题 7月14日

悬赏问题

  • ¥65 LineageOs-21.0系统编译问题
  • ¥30 关于#c++#的问题,请各位专家解答!
  • ¥15 App的会员连续扣费
  • ¥15 不同数据类型的特征融合应该怎么做
  • ¥15 用proteus软件设计一个基于8086微处理器的简易温度计
  • ¥15 用联想小新14Pro
  • ¥15 multisim中关于74ls192n和DSWPK开关仿真图分析(减法计数器)
  • ¥15 w3wp,exe 中发生未处理的 Microsoft ,NETFramework 异常。
  • ¥20 C51单片机程序及仿真(加减器)
  • ¥15 AQWA | 水动力分析 二阶波浪力