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