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

@@ -8,3 +8,10 @@ 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/icons/svg/railway_Z.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="201" height="200" viewBox="0 0 201 200">
+  <image id="图层_0" data-name="图层 0" x="24" y="14" width="149" height="170" xlink:href="data:img/png;base64,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"/>
+</svg>

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" },
         ],