修改报警请求间隔

master
夜笙歌 2 years ago
parent f2d55f12ec
commit 5d890e8411

@ -1,22 +1,22 @@
<template> <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"/> <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="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
<div :class="{ 'fixed-header': fixedHeader }"> <div :class="{ 'fixed-header': fixedHeader }">
<navbar @setLayout="setLayout" /> <navbar @setLayout="setLayout"/>
<tags-view v-if="needTagsView" /> <tags-view v-if="needTagsView"/>
</div> </div>
<app-main /> <app-main/>
<settings ref="settingRef" /> <settings ref="settingRef"/>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { useWindowSize } from '@vueuse/core' import {useWindowSize} from '@vueuse/core'
import Sidebar from './components/Sidebar/index.vue' 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 defaultSettings from '@/settings'
import useAppStore from '@/store/modules/app' import useAppStore from '@/store/modules/app'
@ -39,41 +39,44 @@ const classObj = computed(() => ({
mobile: device.value === 'mobile' mobile: device.value === 'mobile'
})) }))
const { width, height } = useWindowSize(); const {width, height} = useWindowSize();
const WIDTH = 992; // refer to Bootstrap's responsive design const WIDTH = 992; // refer to Bootstrap's responsive design
watchEffect(() => { watchEffect(() => {
if (device.value === 'mobile' && sidebar.value.opened) { if (device.value === 'mobile' && sidebar.value.opened) {
useAppStore().closeSideBar({ withoutAnimation: false }) useAppStore().closeSideBar({withoutAnimation: false})
} }
if (width.value - 1 < WIDTH) { if (width.value - 1 < WIDTH) {
useAppStore().toggleDevice('mobile') useAppStore().toggleDevice('mobile')
useAppStore().closeSideBar({ withoutAnimation: true }) useAppStore().closeSideBar({withoutAnimation: true})
} else { } else {
useAppStore().toggleDevice('desktop') useAppStore().toggleDevice('desktop')
} }
}) })
function handleClickOutside() { function handleClickOutside() {
useAppStore().closeSideBar({ withoutAnimation: false }) useAppStore().closeSideBar({withoutAnimation: false})
} }
const settingRef = ref(null); const settingRef = ref(null);
function setLayout() { function setLayout() {
settingRef.value.openSetting(); settingRef.value.openSetting();
} }
const userStore = useUserStore() const userStore = useUserStore()
console.log(userStore.name) console.log(userStore.name)
const getWebsocket = () => { const getWebsocket = () => {
console.log(document.getElementById('app-main'))
let websocket = new WebSocket("ws://10.11.41.249:8080/websocket/message/" + userStore.name) let websocket = new WebSocket("ws://10.11.41.249:8080/websocket/message/" + userStore.name)
websocket.onopen = function (event) { websocket.onopen = function (event) {
}; };
websocket.onmessage = 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({ ElNotification({
type: 'warning', type: 'warning',
title: info.carLicense, 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' ? '低电压' : ''} 报警`, 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, 1000)
}; };
} }
setTimeout(getWebsocket,0) setTimeout(getWebsocket, 0)
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/assets/styles/mixin.scss"; @import "@/assets/styles/mixin.scss";
@import "@/assets/styles/variables.module.scss"; @import "@/assets/styles/variables.module.scss";
.app-wrapper { .app-wrapper {
@include clearfix; @include clearfix;

@ -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;"> 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 <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 "> 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>
</div> </div>
<div style="display: inline-block;width: 20%;height:100%;color:#fff;text-align: center;position:relative;"> <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"> <TransitionGroup class="container" name="fade" tag="div">
<div v-for="(i,index) in warringList" :key='i' ref="warningRef" <div v-for="(i,index) in warringList" :key='i' ref="warningRef"
style="position:relative;color:#fff;height: 120px;"> 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':''}`" <img
style="width: 40px;height: 40px;position: absolute;top: 10px;left: 0px"> :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"> <div style="position: absolute;top: 10px;left: 50px;font-size: 16px">
{{ i?.ispresslower === 1 ? '低压' : '' }} {{ i?.ispresslower === 1 ? '低压' : '' }}
{{ i?.ispresshigh === 1 ? '高压' : '' }} {{ i?.istemperaturehigh === 1 ? '高温' : '' }} {{ i?.ispresshigh === 1 ? '高压' : '' }} {{ i?.istemperaturehigh === 1 ? '高温' : '' }}
@ -190,6 +191,7 @@ export default {
ispresshigh: 0, ispresshigh: 0,
ispresslower: 0, ispresslower: 0,
istemperaturehigh: 0, istemperaturehigh: 0,
total:0
}, },
chartData: [...(chinaMap.features.map(e => { chartData: [...(chinaMap.features.map(e => {
return { return {
@ -239,11 +241,11 @@ export default {
// } // }
// timeoutF() // timeoutF()
setInterval(() => { 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) let lastData = this.warringList.splice(0, 1)
setTimeout(()=>{ setTimeout(() => {
this.warringList.splice(this.warringList.length, 0, lastData[0] || this.warringWaitList.splice(0, 1)[0]) this.warringList.splice(this.warringList.length, 0, lastData[0] || this.warringWaitList.splice(0, 1)[0])
},200) }, 200)
} }
}, 2000) }, 2000)
}) })
@ -262,7 +264,14 @@ export default {
methods: { methods: {
async setInfo() { async setInfo() {
await getIndexdata().then(response => { 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 = { this.carData = {
carBindGps: response.data.carBindGps, carBindGps: response.data.carBindGps,
carTotal: response.data.carTotal, carTotal: response.data.carTotal,

Loading…
Cancel
Save