fix(断路器): 日志上限改成200条，格式化代码
This commit is contained in:
fhysy
parent
6257501187
commit
3af303b605
|
|
@ -1,171 +1,160 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-header style="display: flex; font-size: 16px">
|
<el-header style="display: flex; font-size: 16px">
|
||||||
<div class='header-left'>
|
<div class="header-left">
|
||||||
<img :src="logo" alt="">
|
<img :src="logo" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class='haeder-menu' :style="{width:menuWidth + 'px'}">
|
<div class="haeder-menu" :style="{ width: menuWidth + 'px' }">
|
||||||
<el-menu
|
<el-menu default-active="/system" mode="horizontal" router="true">
|
||||||
default-active="/system"
|
<el-menu-item index="/system">系统模板</el-menu-item>
|
||||||
mode="horizontal"
|
<!-- <el-menu-item index="/test">测试</el-menu-item>-->
|
||||||
router="true"
|
</el-menu>
|
||||||
>
|
</div>
|
||||||
<el-menu-item index="/system">系统模板</el-menu-item>
|
<div class="haeder-right">
|
||||||
<!-- <el-menu-item index="/test">测试</el-menu-item>-->
|
<div class="block" style="margin-right: 25px">
|
||||||
</el-menu>
|
<el-icon size="24" color="#80b3e6"><BellFilled /></el-icon>
|
||||||
</div>
|
</div>
|
||||||
<div class="haeder-right">
|
<div class="user-name" style="margin-right: 10px">admin</div>
|
||||||
<div class="block" style="margin-right: 25px">
|
<el-dropdown trigger="click">
|
||||||
<el-icon size="24" color="#80b3e6"><BellFilled /></el-icon>
|
<div class="el-dropdown-link avatar-box" style="cursor: pointer">
|
||||||
</div>
|
<img :src="avatar" alt="" />
|
||||||
<div class="user-name" style="margin-right: 10px">
|
</div>
|
||||||
admin
|
<template #dropdown>
|
||||||
</div>
|
<el-dropdown-menu>
|
||||||
<el-dropdown trigger="click">
|
<el-dropdown-item>admin</el-dropdown-item>
|
||||||
<div class="el-dropdown-link avatar-box" style="cursor: pointer">
|
<!-- <el-dropdown-item @click="LogOut">退出登录</el-dropdown-item>-->
|
||||||
<img :src="avatar" alt="">
|
</el-dropdown-menu>
|
||||||
</div>
|
</template>
|
||||||
<template #dropdown>
|
</el-dropdown>
|
||||||
<el-dropdown-menu>
|
</div>
|
||||||
<el-dropdown-item>admin</el-dropdown-item>
|
</el-header>
|
||||||
<!-- <el-dropdown-item @click="LogOut">退出登录</el-dropdown-item>-->
|
</div>
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
</div>
|
|
||||||
</el-header>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, watch } from "vue"
|
import { ref, watch } from 'vue';
|
||||||
|
|
||||||
import logo from '@renderer/assets/image/logo.png'
|
import logo from '@renderer/assets/image/logo.png';
|
||||||
import avatar from '@renderer/assets/image/avatar.png'
|
import avatar from '@renderer/assets/image/avatar.png';
|
||||||
|
|
||||||
const screenWidth = ref(document.documentElement.clientWidth || document.body.clientWidth)
|
const screenWidth = ref(document.documentElement.clientWidth || document.body.clientWidth);
|
||||||
|
|
||||||
const timer = ref(false);
|
const timer = ref(false);
|
||||||
const domWidth = ref(document.body.clientWidth);
|
const domWidth = ref(document.body.clientWidth);
|
||||||
const menuWidth = ref(document.body.clientWidth - 363);
|
const menuWidth = ref(document.body.clientWidth - 363);
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
(screenWidth.value = () => {
|
(screenWidth.value = () => {
|
||||||
console.log("页面变化",document.body.clientWidth)
|
// 为了避免频繁触发导致页面卡顿，使用定时器
|
||||||
// 为了避免频繁触发导致页面卡顿，使用定时器
|
if (!timer.value) {
|
||||||
if (!timer.value) {
|
if (domWidth.value != document.body.clientWidth) {
|
||||||
if(domWidth.value != document.body.clientWidth){
|
domWidth.value = document.body.clientWidth;
|
||||||
console.log("更新页面")
|
menuWidth.value = document.body.clientWidth - 363;
|
||||||
domWidth.value = document.body.clientWidth
|
}
|
||||||
menuWidth.value = document.body.clientWidth - 363
|
timer.value = true;
|
||||||
}
|
setTimeout(function () {
|
||||||
timer.value = true;
|
timer.value = false;
|
||||||
setTimeout(function () {
|
}, 500);
|
||||||
timer.value = false
|
}
|
||||||
}, 200)
|
})
|
||||||
}
|
|
||||||
})
|
|
||||||
);
|
);
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.el-header {
|
.el-header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #0066cc;
|
background-color: #0066cc;
|
||||||
color: var(--el-text-color-primary);
|
color: var(--el-text-color-primary);
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
.header-left{
|
.header-left {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 180px;
|
width: 180px;
|
||||||
img{
|
img {
|
||||||
width: 154px;
|
width: 154px;
|
||||||
height: 37px;
|
height: 37px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.haeder-menu{
|
.haeder-menu {
|
||||||
width: calc(100% - 180px - 183px);
|
width: calc(100% - 180px - 183px);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
:deep(.el-scrollbar__bar.is-vertical) {
|
:deep(.el-scrollbar__bar.is-vertical) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
:deep(a) {
|
:deep(a) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.el-menu.el-menu--horizontal {
|
.el-menu.el-menu--horizontal {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background: #0066cc;
|
background: #0066cc;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
.el-menu-item{
|
.el-menu-item {
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
width: 124px;
|
width: 124px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
border: none;
|
border: none;
|
||||||
text-indent: 10px;
|
text-indent: 10px;
|
||||||
|
|
||||||
&.is-active{
|
&.is-active {
|
||||||
background: #267dd4;
|
background: #267dd4;
|
||||||
position: relative;
|
position: relative;
|
||||||
&:after{
|
&:after {
|
||||||
content: "";
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 22px;
|
top: 22px;
|
||||||
left: 20px;
|
left: 20px;
|
||||||
width: 5px;
|
width: 5px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:not(.is-disabled):hover{
|
&:not(.is-disabled):hover {
|
||||||
background: #4c94db;
|
background: #4c94db;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.haeder-right{
|
.haeder-right {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 165px;
|
width: 165px;
|
||||||
margin-right: 18px;
|
margin-right: 18px;
|
||||||
.user-name{
|
.user-name {
|
||||||
font-family: Source Han Sans CN;
|
font-family: Source Han Sans CN;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #FFFFFF;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
.avatar-box{
|
.avatar-box {
|
||||||
img{
|
img {
|
||||||
width: 54px;
|
width: 54px;
|
||||||
height: 54px;
|
height: 54px;
|
||||||
margin-bottom: -2px;
|
margin-bottom: -2px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar {
|
.toolbar {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-dropdown-menu__item {
|
.el-dropdown-menu__item {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-color {
|
.icon-color {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1004,12 +1004,18 @@ const clearLog = () => {
|
||||||
const getSocketMeassage = message => {
|
const getSocketMeassage = message => {
|
||||||
let msg = JSON.parse(message.data);
|
let msg = JSON.parse(message.data);
|
||||||
if (msg.msgType !== undefined) {
|
if (msg.msgType !== undefined) {
|
||||||
|
if (logList.value.length > 200) {
|
||||||
|
logList.value.shift();
|
||||||
|
}
|
||||||
logList.value.push({
|
logList.value.push({
|
||||||
time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
||||||
msg: msg.data,
|
msg: msg.data,
|
||||||
type: msg.msgType
|
type: msg.msgType
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
|
if (logList.value.length > 200) {
|
||||||
|
logList.value.shift();
|
||||||
|
}
|
||||||
logList.value.push({
|
logList.value.push({
|
||||||
time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
||||||
msg,
|
msg,
|
||||||
|
|
@ -1064,7 +1070,6 @@ const switchSocketStatus = computed(() => {
|
||||||
const searchLogList = computed(() => {
|
const searchLogList = computed(() => {
|
||||||
if (!logSearch.value) {
|
if (!logSearch.value) {
|
||||||
return logList.value.filter(item => {
|
return logList.value.filter(item => {
|
||||||
console.log(item, logType.value.indexOf(item.type));
|
|
||||||
return logType.value.indexOf(item.type) !== -1;
|
return logType.value.indexOf(item.type) !== -1;
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue