提交： 音频自动播放提交测试

public/index.html

@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="//at.alicdn.com/t/font_2506643_9w119og75cs.css">
 
 
-    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_2506643_d5as4r89keo.css">
+    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_2506643_ncb9eqoon2o.css">
 
     <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=aabc97a5e095102787d405719847ecf0"></script>
     <script src="<%= BASE_URL %>js/config.js"></script>

src/views/bigScreen/v3/index.vue

@@ -120,6 +120,9 @@
         </div>
       </div>
     </div>
+    <div style="width: 0; height: 0;">
+      <notification-alarm></notification-alarm>
+    </div>
   </div>
 </template>
 
@@ -128,7 +131,6 @@ import EHead from "./profile/EHead";
 import DeviceProportionWrap from "./profile/deviceProportion";
 import WraringInfoWrap from "./profile/wraringInfo";
 import AlarmTableListWrap from "./profile/alarmTableList";
-// import ETodayRatio from "./profile/ETodayRatio";
 import TypeDistributionWrap from "./profile/typeDistribution";
 import ETrendCensus from "./profile/ETrendCensus";
 import MapWrap from "./profile/mapWrap";
@@ -136,6 +138,7 @@ import MapWrapPersonal from "./profile/personalCenter";
 import { bigWebSocketUrl } from "@/config/env";
 import Cookies from "js-cookie";
 import EProjectCensusTemp from "./profile/EProjectCensusTemp";
+import NotificationAlarm from './profile/NotificationAlarm';
 
 import { getWarningAnalysis, homeCount, appProjectList } from "@/api/app";
 import {
@@ -155,6 +158,7 @@ export default {
     MapWrap,
     MapWrapPersonal,
     EProjectCensusTemp,
+    NotificationAlarm,
   },
   data() {
     return {

src/views/bigScreen/v3/profile/NotificationAlarm.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="e-notification-alarm">
+    <audio
+      controls="controls"
+      hidden
+      autoplay
+      src="/images/alarm_tips.mp3"
+      ref="audio"
+    ></audio>
+    <el-button @click="handleTextSend">ws 告警通知</el-button>
+    <div class="e-dialog-div" v-show="dialogShow">
+      <div class="dialog-top">
+        <span class="info-title">报警提醒</span>
+        <img class="info-close" @click="handleCloseDialog" src="@/assets/images/big/clors_map.png" />
+      </div>
+      <div class="dialog-center">
+        <div class="info-label">
+          <div class="t1">项目<span class="tt">:</span></div>
+          <div class="t1">地址<span class="tt">:</span></div>
+        </div>
+        <div class="info-value">
+          <div class="v1">
+            <span
+              style="
+                width: 100%;
+                display: inline-block;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                letter-spacing: 1px;
+              "
+            >
+              {{ alarmInfo['projectName'] }}
+            </span>
+          </div>
+          <div class="v1">
+            <marquee
+              style="margin: 0"
+              behavior="alternate"
+              scrollamount="1"
+              width="100%"
+            >
+              <span style="letter-spacing: 1px">
+                {{ alarmInfo['address'] }}
+              </span>
+            </marquee>
+          </div>
+        </div>
+        <div class="alarm-info">
+          <img class="alarm-icon" src="@/assets/images/big/map_alarm.png" />
+          <span
+            >{{ alarmInfo['alarmContent'] }}</span
+          >
+        </div>
+      </div>
+
+      <div class="dialog-footer"></div>
+    </div>
+  </div>
+</template>
+<script>
+import { webSocketProjectGatewayUrl } from "@/config/env";
+export default {
+  name: "NotificationAlarm",
+  props: {},
+  data() {
+    return {
+      stompClient: null,
+      socket_flag: true,
+      timeout_flag: null,
+      dialogShow: false,
+      interval: null,
+      intervalTime: 10,
+      alarmInfo: {
+        projectName: '中海创项目',
+        address: '福建省福州市闽侯县高新区软件园二',
+        alarmContent: '电池异常高温告警'
+      }
+    };
+  },
+  watch: {},
+  created() {
+    setTimeout(this.handleTextSend, 10000);
+  },
+  methods: {
+    handleTextSend() {
+      this.dialogShow = true;
+      this.handlePlayAudio();
+    },
+    handleCloseDialog() {
+      this.dialogShow = false;
+      this.handlePauseAudio();
+    },
+    // 告警 声音 关闭
+    handlePauseAudio() {
+      if (this.$refs.audio) {
+        this.$refs.audio.pause()
+        if(this.interval) {
+          clearInterval(this.interval)
+        };
+      };
+    },
+    // 告警 方法 触发情况
+    handlePlayAudio() {
+      this.$refs.audio.currentTime = 0; //从头开始播放提示音
+      this.$refs.audio.play(); //播放
+      if (this.interval) {
+        clearInterval(this.interval);
+      }
+      this.interval = setInterval(this.handlePauseAudio, this.intervalTime * 1000);
+    },
+    // 创建一个ws 监听获取报警实时数据
+    connection() {
+      if (this.stompClient) {
+        return;
+      }
+      if (!webSocketProjectGatewayUrl) {
+        return;
+      }
+      if (!this.list || this.length <= 0) {
+        return;
+      }
+      let deviceIds = this.list.map((v) => v["deviceId"]);
+      this.stompClient = new WebSocket(
+        `${webSocketProjectGatewayUrl}/${this.getGuid()}/${deviceIds.toString()}`
+      );
+      this.stompClient.onmessage = this.socket_message;
+      this.stompClient.onclose = this.socket_onclose;
+    },
+    socket_message(evt) {
+      console.log("wsljcg:=", evt);
+      const data = JSON.parse(evt.data);
+      console.log("socket-message:", data);
+      // this.handleDeviceInfo(data)
+      this.$forceUpdate();
+    },
+    socket_onclose(e) {
+      this.stompClient = null;
+      if (this.socket_flag) {
+        this.socket_flag = false;
+        let _this = this;
+        this.timeout_flag = setTimeout(function () {
+          _this.socket_flag = true;
+          _this.connection();
+        }, 10000);
+      }
+    },
+    closeSocket() {
+      if (this.stompClient) {
+        this.stompClient.close();
+      }
+      this.socket_flag = false;
+      this.stompClient = null;
+      clearTimeout(this.timeout_flag);
+    },
+    getGuid() {
+      return "xxxxxxx_xxxxx_4xxx_yxxx_xxxxxxxxxxxx".replace(
+        /[xy]/g,
+        function (c) {
+          var r = (Math.random() * 16) | 0,
+            v = c == "x" ? r : (r & 0x3) | 0x8;
+          return v.toString(16);
+        }
+      );
+    },
+  },
+  destroyed() {
+    this.closeSocket();
+  },
+};
+</script>
+<style lang="scss">
+.e-notification-alarm {
+  .e-dialog-div {
+    top: calc(calc((100vh - 130px) / 2));
+    width: 300px;
+    height: 120px;
+    position: absolute;
+    left: calc(calc((100% - 260px) / 2));
+    font-size: 16px;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    z-index: 999;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    .dialog-top {
+      width: 100%;
+      height: 40px;
+      background-image: url("../../../../assets/images/big/map_top.png");
+      background-size: 100% 100%;
+      .info-title {
+        font-size: 16px;
+        font-family: "Microsoft YaHei";
+        font-weight: 400;
+        color: #ff3739;
+        line-height: 24px;
+        z-index: 1;
+        position: relative;
+        left: calc((100% - 60px) / 2);
+        top: -3px;
+      }
+      .info-close {
+        position: relative;
+        top: 5px;
+        z-index: 1;
+        width: 25px;
+        height: 25px;
+        left: calc(100% - 75px);
+      }
+    }
+    .dialog-center {
+      color: #07beff;
+      letter-spacing: 7px;
+      width: 100%;
+      height: 100%;
+      background-image: url("../../../../assets/images/big/mapbj_c_1.png");
+      background-size: 100% 100%;
+      display: flex;
+      flex-wrap: wrap;
+      .info-label {
+        color: #07beff;
+        margin-right: 8px;
+        margin-left: 25px;
+        letter-spacing: 7px;
+        width: 60px;
+        .t1 {
+          height: 29px;
+          display: flex;
+          align-items: flex-end;
+          .tt {
+            margin-left: -6px;
+          }
+        }
+      }
+      .info-value {
+        width: calc(100% - 115px);
+        text-overflow: ellipsis;
+        overflow: hidden;
+        .v1 {
+          display: flex;
+          align-items: flex-end;
+          height: 29px;
+        }
+      }
+      .alarm-info {
+        width: 100%;
+        height: 40px;
+        display: flex;
+        justify-content: flex-start;
+        padding: 0 5px;
+        > img {
+          width: 35px;
+          height: 40px;
+          margin: 0 10px 0 20px;
+        }
+        > span {
+          width: calc(100% - 75px);
+          height: 40px;
+          display: block;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          font-size: 22px;
+          color: #ff3739;
+          letter-spacing: 0px;
+          white-space: nowrap;
+          font-weight: 600;
+          line-height: 43px;
+        }
+      }
+    }
+    .dialog-footer {
+      width: 100%;
+      height: 30px;
+      background-image: url("../../../../assets/images/big/map_bottom.png");
+      background-size: 100% 100%;
+    }
+  }
+}
+</style>