cell style audio

src/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
    
   <router-view />
-    <audio ref="audio" id="my_audio" src="./assets/audio/19000.wav" controls autoplay hidden="hidden"/>
+    <audio ref="audio" id="my_audio" src="./assets/audio/urgent.wav" muted autoplay />
     <transition name="tipalerm">
       <div class="tips" v-if="tflag">
         <p>提示</p>
@@ -33,6 +33,12 @@ export default {
       alevel: {
         color: "",
       },
+      audioUrl: '',
+      audioObj: {
+        '一般': 'commonly.wav',
+        '重要': 'importang.wav',
+        '紧急': 'urgent.wav',
+      }
     };
   },
   computed: {
@@ -65,13 +71,13 @@ export default {
   },
   mounted() {
     let audioPlay = document.getElementById("my_audio");
-    // this.websocket = socket({
-    //   onmessage: this.receiveMessage,
-    // });
     EventBus.$on("dialogAlarm", (data) => {
       // 接收消息之后 声音弹窗显示
-      audioPlay.play();
       this.msg = data;
+      this.audioUrl = './assets/audio/' + this.audioObj[data.level]
+      setTimeout(() => {
+        audioPlay.play();
+      },500)
 
       this.levelcolor();
       this.tflag = true;
@@ -83,10 +89,6 @@ export default {
       this.websocket.close();
       console.log('关闭ws');
     });
-    // EventBus.$on("wsOpen", () => {
-    //   audioPlay.play()
-    //   // this.websocket.onopen();
-    // });
   },
   watch: {
     $route(to, from) {

src/const/index.js

@@ -7,4 +7,11 @@ export const alarmLeval = {
 export const ConnectStatusEnum = {
   0: '连接正常',
   1: '连接异常'
+}
+
+export const levelStyle = {
+  '-1': 'level_G',
+  '0': 'level_Y',
+  '1': 'level_O',
+  '2': 'level_R',
 }
\ No newline at end of file

src/styles/common.scss

@@ -31,16 +31,12 @@
 .flex_clo {
   display: flex;
   flex-direction: column;
-  // height: 880px;
 }
-// .leakage-box{
-//   height: 60px;
-// }
+
 .leakage-cable .leakage-top{
   padding-right: 10px;
-
-  
 }
+
 .el-button-group{
   position: absolute;
 }
@@ -111,3 +107,19 @@
   min-width:52px;
 }
 
+.level_G {
+  color: #00D100;
+}
+
+.level_R {
+  color: #FF1744;
+}
+
+.level_O {
+  color: #FF6D00;
+}
+
+.level_Y {
+  color: #FFAB00;
+}
+

src/views/alarm/cableTime/index.vue

@@ -53,8 +53,8 @@
         align="center"
       >
         <template slot-scope="scope">
-          <div v-for="(item, index) in scope.row.alarmInfo" :key="index">
-            <span>距离：{{ item.distance }}</span>
+          <div v-for="(item, index) in scope.row.alarmInfo" :key="index" :class="levelStyle[item.level]">
+            <span>距离：{{ item.distance }}</span>&nbsp;&nbsp;
             <span>驻波比：{{ item.value }}</span>
           </div>
           <div>漏缆百米损耗： {{ scope.row.lossValue }}</div>
@@ -184,6 +184,7 @@ import { exportLeakyCable } from "@/api/export";
 import search from "@/views/monitor/leakageCable/components/search.vue";
 import download from "@/utils/download";
 import { successAlert, warningAlert } from "@/utils/alert";
+import { levelStyle } from '@/const/index'
 export default {
   data() {
     return {
@@ -210,6 +211,7 @@ export default {
       istrue: 0,
       searchOption: {},
       exids: [],
+      levelStyle
     };
   },
   components: { search },
@@ -253,14 +255,14 @@ export default {
       cableTimeList(param).then((res) => {
         let list = res.records || [];
         list.forEach(item => {
-          if(item.alarmInfo != '') {
+          if(item.alarmInfo != '' && item.alarmInfo != null) {
             item.alarmInfo = JSON.parse(item.alarmInfo)
             item.lossValue = eval(item.alarmInfo.map(k => k.lossValue).join('+'))
           }
         });
         this.tableData = list;
         this.total = res.total;
-        this.exids = list.map((i) => i.id);
+        this.exids = list.map(i => i.id);
         if (this.istrue == 1) {
           if (this.tableData.length != 0) {
             successAlert("操作成功");
@@ -312,10 +314,6 @@ export default {
       }
     },
   },
-  computed: {
-  },
-  watch: {
-  },
   mounted() {
     this.getTableData();
   },

src/views/dashboard/components/type3.vue

@@ -251,7 +251,6 @@ export default {
   data() {
     return {
       colspan:14,
-    
     };
   },
   mixins: [DetailMixins],

src/views/monitor/leakageCable/index.vue

@@ -39,6 +39,13 @@
       >
       </el-table-column>
       <el-table-column prop="alarmInfo" label="告警信息" align="center">
+        <template slot-scope="scope">
+          <div v-for="(item, index) in scope.row.alarmInfo" :key="index" :class="levelStyle[item.level]">
+            <span>距离：{{ item.distance }}</span>&nbsp;&nbsp;
+            <span>驻波比：{{ item.value }}</span>
+          </div>
+          <div>漏缆百米损耗： {{ scope.row.lossValue }}</div>
+        </template>
       </el-table-column>
       <el-table-column
         prop="lateUploadTime"
@@ -57,8 +64,8 @@
 </template>
 
 <script>
-import { CableStatusList, CableStatusExport } from "../api";
-import { ConnectStatusEnum } from "@/const/index";
+import { CableStatusList } from "../api";
+import { ConnectStatusEnum, levelStyle} from "@/const/index";
 import search from "./components/search.vue";
 import { exportLeakyCableTime } from "@/api/export";
 import download from "@/utils/download";
@@ -67,6 +74,7 @@ export default {
   data() {
     return {
       ConnectStatusEnum,
+      levelStyle,
       params: {
         curent: 1,
         size: 10,
@@ -120,8 +128,14 @@ export default {
       CableStatusList(params).then((res) => {
         let list = res.records || [];
         this.tableData = list;
+        list.forEach(item => {
+          if(item.alarmInfo != '' && item.alarmInfo != null) {
+            item.alarmInfo = JSON.parse(item.alarmInfo)
+            item.lossValue = eval(item.alarmInfo.map(k => k.lossValue).join('+'))
+          }
+        });
         this.total = res.records.length;
-        this.exids = list.map((i) => i.id);
+        this.exids = list.map(i => i.id);
          if (this.istrue==1) {
            if (this.tableData.length != 0) {
             successAlert("操作成功");
@@ -133,10 +147,6 @@ export default {
       });
     },
     toExport() {
-      let params = {
-        ...this.params,
-        ...this.searchOption,
-      };
       if (this.exids.length == 0) {
         this.$message.warning("暂无数据");
         return false;

src/views/setting/add/comp/leakyCable.vue

@@ -165,9 +165,9 @@ export default {
         antennaFeederLength: [
           { required: true, message: "请输入天馈线长度", trigger: "blur" },
         ],
-        hundredMetersLoss: [
-          { required: true, message: "请输入漏缆百米损耗", trigger: "blur" },
-        ],
+        // hundredMetersLoss: [
+        //   { required: true, message: "请输入漏缆百米损耗", trigger: "blur" },
+        // ],
         inserterLength: [
           { required: true, message: "请输入插入器长度", trigger: "blur" },
         ],