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

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属性,可以循环播放,不需要你自己取操作播放

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • 大大泡泡糖1996 2022-07-14 13:55
    关注

    后台有没有推送机制?如果可以推送,你只需要负责监听就好了,让后台告诉你哪个设备正在报警,然后找到对应的设备播放音频。
    没有的话就定时轮询

    评论
  • 音药 2022-07-14 13:56
    关注

    写一个audio就可以了,根据逻辑去控制src

    评论 编辑记录
查看更多回答(2条)

报告相同问题?

问题事件

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

悬赏问题

  • ¥15 有没有哪位厉害的人可以用C#可视化呀
  • ¥15 可以帮我看看代码哪里错了吗
  • ¥15 设计一个成绩管理系统
  • ¥15 PCL注册的选点等函数如何取消注册
  • ¥15 问一下各位,为什么我用蓝牙直接发送模拟输入的数据,接收端显示乱码呢,米思齐软件上usb串口显示正常的字符串呢?
  • ¥15 Python爬虫程序
  • ¥15 crypto 这种的应该怎么找flag?
  • ¥15 代码已写好,求帮我指出错误,有偿!
  • ¥15 matlab+波形匹配算法
  • ¥15 转录组分析做聚类树图时癌旁组被分到了癌组