修改报警请求间隔

ruoyi-ui/src/App.vue

@@ -14,32 +14,4 @@ onMounted(() => {
     handleThemeStyle(useSettingsStore().theme)
   })
 })
-const userStore = useUserStore()
-console.log(userStore.name)
-const getWebsocket = () => {
-  let websocket = new WebSocket("ws://10.11.41.249:8080/websocket/message/" + userStore.name)
-  websocket.onopen = function (event) {
-    // console.log('onopen', event)
-  };
-  websocket.onmessage = function (event) {
-    // console.log('onmessage', event)
-    // let info = JSON.parse(event.data)
-    let info = JSON.parse("{\"carLicense\":\"鲁B66666\",\"ispowerinvalue\":\"0\",\"ispresshigh\":\"0\",\"ispresslower\":\"1\",\"istemperaturehigh\":\"0\",\"params\":{},\"reportTime\":\"2023-04-11 15:14:36\",\"tyrePosition\":\"1-1-1\"}")
-    ElNotification({
-      dangerouslyUseHTMLString: true,
-      message: `<div style="color: #fff"><img src="/src/assets/icons/highTemperature.png"
-               style="width: 40px;height: 40px;position: absolute;top: 10px;left: 0px">
-          <div style="position: absolute;top: 10px;left: 50px;font-size: 16px"> ${info.ispresslower === '1' ? '低压' : ''}  ${info.ispresshigh === '1' ? '高压' : ''}  ${info.istemperaturehigh === '1' ? '高温' : ''}  ${info.ispowerinvalue === '1' ? '低电压' : ''}</div>
-          <div style="position: absolute;top:50px;left: 0px">${info.reportTime}</div>
-          <div style="position: absolute;top:70px;left: 0px">信息</div>
-          <div style="position: absolute;top: 10px;right: 0px;font-size: 24px">${info.carLicense}</div>
-          <div style="position: absolute;top: 50px;right: 0px">${info.tyrePosition.split('-')[0]}排${info.tyrePosition.split('-')[1] === '1' ? '左' : '右'}侧${info.tyrePosition.split('-')[2] === '1' ? '外' : '内'}胎</div>
-</div>`,
-    })
-  }
-  websocket.onerror = function () {
-    setTimeout(getWebsocket, 1000)
-  };
-}
-getWebsocket()
 </script>

ruoyi-ui/src/layout/components/AppMain.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="app-main">
+  <section id="app-main" class="app-main">
     <router-view v-slot="{ Component, route }">
       <transition name="fade-transform" mode="out-in">
         <keep-alive :include="tagsViewStore.cachedViews">

ruoyi-ui/src/layout/index.vue

@@ -21,6 +21,8 @@ import defaultSettings from '@/settings'
 
 import useAppStore from '@/store/modules/app'
 import useSettingsStore from '@/store/modules/settings'
+import useUserStore from "@/store/modules/user";
+import {ElNotification} from "element-plus";
 
 const settingsStore = useSettingsStore()
 const theme = computed(() => settingsStore.theme);
@@ -60,6 +62,26 @@ const settingRef = ref(null);
 function setLayout() {
   settingRef.value.openSetting();
 }
+const userStore = useUserStore()
+console.log(userStore.name)
+const getWebsocket = () => {
+  let websocket = new WebSocket("ws://10.11.41.249:8080/websocket/message/" + userStore.name)
+  websocket.onopen = function (event) {
+  };
+  websocket.onmessage = function (event) {
+    let info = JSON.parse("{\"carLicense\":\"鲁B66666\",\"ispowerinvalue\":\"0\",\"ispresshigh\":\"0\",\"ispresslower\":\"1\",\"istemperaturehigh\":\"0\",\"params\":{},\"reportTime\":\"2023-04-11 15:14:36\",\"tyrePosition\":\"1-1-1\"}")
+    ElNotification({
+      type: 'warning',
+      title: info.carLicense,
+      appendTo:document.getElementById('app-main'),
+      message: ` ${info.tyrePosition.split('-')[0]}排${info.tyrePosition.split('-')[1] === '1' ? '左' : '右'}侧${info.tyrePosition.split('-')[2] === '1' ? '外' : '内'}胎 ${info.ispresslower === '1' ? '低压' : ''}  ${info.ispresshigh === '1' ? '高压' : ''}  ${info.istemperaturehigh === '1' ? '高温' : ''}  ${info.ispowerinvalue === '1' ? '低电压' : ''} 报警`,
+    })
+  }
+  websocket.onerror = function () {
+    setTimeout(getWebsocket, 1000)
+  };
+}
+setTimeout(getWebsocket,0)
 </script>
 
 <style lang="scss" scoped>

ruoyi-ui/src/views/index.vue

@@ -84,7 +84,7 @@
               </div>
             </div>
             <div style="display: inline-block;width: 20%;height:100%;color:#fff;text-align: center;position:relative;">
-              <img src="../assets/icons/highTemperature.png"
+              <img src="../assets/icons/ispresshigh.png"
                    style="width: 40px;height: 40px;left: 0px;position: absolute">
               <div style="width: 60%;margin-left: 30%;">
                 <div>{{ warningInfo?.ispresshigh }}</div>
@@ -92,7 +92,7 @@
               </div>
             </div>
             <div style="display: inline-block;width: 20%;height:100%;color:#fff;text-align: center;position:relative;">
-              <img src="../assets/icons/highTemperature.png"
+              <img src="../assets/icons/ispresslower.png"
                    style="width: 40px;height: 40px;left: 0px;position: absolute">
               <div style="width: 60%;margin-left: 30%;">
                 <div>{{ warningInfo?.ispresslower }}</div>
@@ -100,7 +100,7 @@
               </div>
             </div>
             <div style="display: inline-block;width: 20%;height:100%;color:#fff;text-align: center;position:relative;">
-              <img src="../assets/icons/highTemperature.png"
+              <img src="../assets/icons/ispowerinvalue.png"
                    style="width: 40px;height: 40px;left: 0px;position: absolute">
               <div style="width: 60%;margin-left: 30%;">
                 <div>{{ warningInfo?.ispowerinvalue }}</div>
@@ -117,7 +117,7 @@
           <TransitionGroup class="container" name="fade" tag="div">
             <div v-for="(i,index) in warringList" :key='i' ref="warningRef"
                  style="position:relative;color:#fff;height: 120px;">
-              <img src="../assets/icons/highTemperature.png"
+              <img :src="`${i?.ispresslower === 1 ? 'src/assets/icons/ispresslower.png':''}${i?.ispresshigh === 1 ? 'src/assets/icons/ispresshigh.png':''}${i?.istemperaturehigh === 1 ? 'src/assets/icons/highTemperature.png':''}${i?.ispowerinvalue === 1 ? 'src/assets/icons/ispowerinvalue.png':''}`"
                    style="width: 40px;height: 40px;position: absolute;top: 10px;left: 0px">
               <div style="position: absolute;top: 10px;left: 50px;font-size: 16px">
                 {{ i?.ispresslower === 1 ? '低压' : '' }}
@@ -239,7 +239,7 @@ export default {
       // }
       // timeoutF()
       setInterval(() => {
-        if (first && this.warringWaitList.length > 0) {
+        if (first && this.warringWaitList.length > 0 && (this.warringWaitList.length+this.warringList.length)>listLength) {
           let lastData = this.warringList.splice(0, 1)
           setTimeout(()=>{
             this.warringList.splice(this.warringList.length, 0, lastData[0] || this.warringWaitList.splice(0, 1)[0])
@@ -615,12 +615,6 @@ export default {
   background-image: url('../assets/images/indexBg.jpg');
 }
 
-.el-notification {
-  height: 100px;
-  background-color: #040f39;
-  color: #fff
-}
-
 .item {
   width: 100%;
   height: 30px;