From 5d890e8411798012ab950dc6066849fe8855f85d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Wed, 12 Apr 2023 10:31:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=8A=A5=E8=AD=A6=E8=AF=B7?=
 =?UTF-8?q?=E6=B1=82=E9=97=B4=E9=9A=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/layout/index.vue | 37 +++++++++++++++++++----------------
 ruoyi-ui/src/views/index.vue  | 23 +++++++++++++++-------
 2 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/ruoyi-ui/src/layout/index.vue b/ruoyi-ui/src/layout/index.vue
index 76ebb28..693af2f 100644
--- a/ruoyi-ui/src/layout/index.vue
+++ b/ruoyi-ui/src/layout/index.vue
@@ -1,22 +1,22 @@
 <template>
-  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
+  <div :class="classObj" :style="{ '--current-color': theme }" class="app-wrapper">
     <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <sidebar v-if="!sidebar.hide" class="sidebar-container" />
+    <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
     <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
       <div :class="{ 'fixed-header': fixedHeader }">
-        <navbar @setLayout="setLayout" />
-        <tags-view v-if="needTagsView" />
+        <navbar @setLayout="setLayout"/>
+        <tags-view v-if="needTagsView"/>
       </div>
-      <app-main />
-      <settings ref="settingRef" />
+      <app-main/>
+      <settings ref="settingRef"/>
     </div>
   </div>
 </template>
 
 <script setup>
-import { useWindowSize } from '@vueuse/core'
+import {useWindowSize} from '@vueuse/core'
 import Sidebar from './components/Sidebar/index.vue'
-import { AppMain, Navbar, Settings, TagsView } from './components'
+import {AppMain, Navbar, Settings, TagsView} from './components'
 import defaultSettings from '@/settings'
 
 import useAppStore from '@/store/modules/app'
@@ -39,41 +39,44 @@ const classObj = computed(() => ({
   mobile: device.value === 'mobile'
 }))
 
-const { width, height } = useWindowSize();
+const {width, height} = useWindowSize();
 const WIDTH = 992; // refer to Bootstrap's responsive design
 
 watchEffect(() => {
   if (device.value === 'mobile' && sidebar.value.opened) {
-    useAppStore().closeSideBar({ withoutAnimation: false })
+    useAppStore().closeSideBar({withoutAnimation: false})
   }
   if (width.value - 1 < WIDTH) {
     useAppStore().toggleDevice('mobile')
-    useAppStore().closeSideBar({ withoutAnimation: true })
+    useAppStore().closeSideBar({withoutAnimation: true})
   } else {
     useAppStore().toggleDevice('desktop')
   }
 })
 
 function handleClickOutside() {
-  useAppStore().closeSideBar({ withoutAnimation: false })
+  useAppStore().closeSideBar({withoutAnimation: false})
 }
 
 const settingRef = ref(null);
+
 function setLayout() {
   settingRef.value.openSetting();
 }
+
 const userStore = useUserStore()
 console.log(userStore.name)
 const getWebsocket = () => {
+  console.log(document.getElementById('app-main'))
   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\"}")
+    let info = JSON.parse(event?.data || "{\"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'),
+      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' ? '低电压' : ''} 报警`,
     })
   }
@@ -81,12 +84,12 @@ const getWebsocket = () => {
     setTimeout(getWebsocket, 1000)
   };
 }
-setTimeout(getWebsocket,0)
+setTimeout(getWebsocket, 0)
 </script>
 
 <style lang="scss" scoped>
-  @import "@/assets/styles/mixin.scss";
-  @import "@/assets/styles/variables.module.scss";
+@import "@/assets/styles/mixin.scss";
+@import "@/assets/styles/variables.module.scss";
 
 .app-wrapper {
   @include clearfix;
diff --git a/ruoyi-ui/src/views/index.vue b/ruoyi-ui/src/views/index.vue
index e379474..630cc37 100644
--- a/ruoyi-ui/src/views/index.vue
+++ b/ruoyi-ui/src/views/index.vue
@@ -72,7 +72,7 @@
               style="width: 90%;height: 150px;margin-left: 5%;background-color: rgba(0,0,0,0.4);margin-top: 10px;border-radius: 5px;overflow: hidden;">
             <div
                 style="width: 20%;height: calc(100% - 20px);border-right: 1px solid #ccc;margin-top: 10px;display: inline-block;text-align: center;color:#fff;padding: 20px 0 0 0 ">
-              <div style="font-size: 32px;font-weight: 600;line-height: 50px">16</div>
+              <div style="font-size: 32px;font-weight: 600;line-height: 50px">{{ warningInfo?.total }}</div>
               <div>报警总数</div>
             </div>
             <div style="display: inline-block;width: 20%;height:100%;color:#fff;text-align: center;position:relative;">
@@ -117,8 +117,9 @@
           <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="`${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">
+              <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 ? '低压' : '' }}
                 {{ i?.ispresshigh === 1 ? '高压' : '' }} {{ i?.istemperaturehigh === 1 ? '高温' : '' }}
@@ -190,6 +191,7 @@ export default {
         ispresshigh: 0,
         ispresslower: 0,
         istemperaturehigh: 0,
+        total:0
       },
       chartData: [...(chinaMap.features.map(e => {
         return {
@@ -239,11 +241,11 @@ export default {
       // }
       // timeoutF()
       setInterval(() => {
-        if (first && this.warringWaitList.length > 0 && (this.warringWaitList.length+this.warringList.length)>listLength) {
+        if (first && this.warringWaitList.length > 0 && (this.warringWaitList.length + this.warringList.length) > listLength) {
           let lastData = this.warringList.splice(0, 1)
-          setTimeout(()=>{
+          setTimeout(() => {
             this.warringList.splice(this.warringList.length, 0, lastData[0] || this.warringWaitList.splice(0, 1)[0])
-          },200)
+          }, 200)
         }
       }, 2000)
     })
@@ -262,7 +264,14 @@ export default {
   methods: {
     async setInfo() {
       await getIndexdata().then(response => {
-        this.warringWaitList = [...response.data.warringList],
+        this.warningInfo = {
+          ispowerinvalue: response.data.ispowerinvalue,
+          ispresshigh: response.data.ispresshigh,
+          ispresslower: response.data.ispresslower,
+          istemperaturehigh: response.data.istemperaturehigh,
+          total:response.data.ispowerinvalue+response.data.ispresshigh+response.data.ispresslower+response.data.istemperaturehigh
+        },
+            this.warringWaitList = [...response.data.warringList],
             this.carData = {
               carBindGps: response.data.carBindGps,
               carTotal: response.data.carTotal,