|
|
@ -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;
|
|
|
|