优化系统布局
This commit is contained in:
不做码农
parent
dc197e57cf
commit
562115c084
@ -1,16 +1,5 @@
|
||||
// cover some element-ui styles
|
||||
|
||||
.el-breadcrumb__inner,
|
||||
.el-breadcrumb__inner a {
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
// .el-upload {
|
||||
// input[type="file"] {
|
||||
// display: none !important;
|
||||
// }
|
||||
// }
|
||||
|
||||
.el-upload__input {
|
||||
display: none;
|
||||
}
|
||||
@ -21,11 +10,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.small-padding {
|
||||
.cell {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
// table 里面操作按钮样式覆盖
|
||||
.el-table__cell .cell {
|
||||
.el-button.is-text{
|
||||
padding: 8px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.status-col {
|
||||
@ -50,7 +39,7 @@
|
||||
|
||||
.el-header {
|
||||
--el-header-padding: 0 0px !important;
|
||||
--el-header-height: 50px !important;
|
||||
// --el-header-height: 50px !important;
|
||||
}
|
||||
// el 2.2.0 text button
|
||||
.el-button.is-text {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
@import './sidebar.scss';
|
||||
@import './btn.scss';
|
||||
@import './waves.scss';
|
||||
@import './black.scss';
|
||||
// @import './black.scss';
|
||||
|
||||
html,
|
||||
body,
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
#app {
|
||||
.layout-sidebar__container {
|
||||
transition: width 0.28s ease;
|
||||
background-color: var(--base-menu-background);
|
||||
// background-color: var(--base-menu-background);
|
||||
height: 100%;
|
||||
position: relative;
|
||||
font-size: 0px;
|
||||
@ -78,7 +78,8 @@
|
||||
|
||||
.layout-sidebar__container {
|
||||
transition: transform 0.28s;
|
||||
position: fixed;
|
||||
position: fixed;
|
||||
background: var(--base-menu-background, #fff);
|
||||
}
|
||||
|
||||
&.hideSidebar {
|
||||
|
||||
@ -10,31 +10,47 @@ $panGreen: #30b08f;
|
||||
|
||||
// 默认菜单主题风格
|
||||
:root {
|
||||
--base-menu-background: #ffffff;
|
||||
--base-logo-title-color: #ffffff;
|
||||
--base-topBar-background: #ffffff;
|
||||
--base-topBar-color: #5a5e66;
|
||||
--base-sidebar-width: 220px;
|
||||
--base-sidebar-left: 64px;
|
||||
// --base-menu-background: #ffffff;
|
||||
// --base-logo-title-color: #ffffff;
|
||||
// --base-topBar-background: #ffffff;
|
||||
// --base-topBar-color: #5a5e66;
|
||||
|
||||
--base-text-color-rgba: rgba(0, 0, 0, 0.85);
|
||||
--base-sidebar-width: 220px;
|
||||
--el-aside-width: 220px;
|
||||
--el-header-height: 50px;
|
||||
--base-footer-height: 40px;
|
||||
--base-tags-height: 34px;
|
||||
}
|
||||
/***默认主题颜色配置***/
|
||||
[data-theme='theme-light'] {
|
||||
// 菜单背景
|
||||
--base-menu-background: #ffffff;
|
||||
// logo部分文字颜色
|
||||
--base-logo-title-color: #001529;
|
||||
// 顶部导航栏背景色
|
||||
--base-topBar-background: #ffffff;
|
||||
// --base-menu-background: #ffffff;
|
||||
// // logo部分文字颜色
|
||||
// --base-logo-title-color: #001529;
|
||||
// // 顶部导航栏背景色
|
||||
// --base-topBar-background: #ffffff;
|
||||
}
|
||||
/***深色主题颜色配置***/
|
||||
[data-theme='theme-dark'] {
|
||||
--base-menu-background: #304156;
|
||||
--base-logo-title-color: #ffffff;
|
||||
--base-topBar-background: #ffffff;
|
||||
// --base-menu-background: #304156;
|
||||
// --base-logo-title-color: #ffffff;
|
||||
// --base-topBar-background: #ffffff;
|
||||
|
||||
// el-ement ui 设置
|
||||
--el-fill-color-blank: #304156;
|
||||
--el-text-color-primary: #bfcbd9;
|
||||
// // el-ement ui 设置
|
||||
// --el-fill-color-blank: #304156;
|
||||
// --el-text-color-primary: #bfcbd9;
|
||||
}
|
||||
html.dark {
|
||||
/* custom dark bg color */
|
||||
// --el-bg-color: #626aef;
|
||||
--base-color-white: #ffffff;
|
||||
--base-text-color-rgba: #fff;
|
||||
--base-menu-background: var(--el-bg-color);
|
||||
}
|
||||
html.cafe {
|
||||
filter: sepia(0.9) hue-rotate(315deg) brightness(0.9);
|
||||
}
|
||||
html.contrast {
|
||||
filter: contrast(2);
|
||||
}
|
||||
|
||||
@ -1,99 +1,90 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
<div ref="chartRef" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
<script setup>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
// import("echarts/theme/macarons"); // echarts theme
|
||||
import { debounce } from "@/utils";
|
||||
// import { debounce } from '@/utils'
|
||||
import { useDebounceFn } from '@vueuse/core'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: "业务指标",
|
||||
},
|
||||
min: {
|
||||
type: [Object, Number],
|
||||
default: 0,
|
||||
},
|
||||
max: {
|
||||
type: [Object, Number],
|
||||
default: 0,
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{
|
||||
value: "",
|
||||
name: "占比",
|
||||
},
|
||||
],
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: "chart",
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: "100%",
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: "300px",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize();
|
||||
}
|
||||
}, 100);
|
||||
window.addEventListener("resize", this.__resizeHandler);
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return;
|
||||
}
|
||||
window.removeEventListener("resize", this.__resizeHandler);
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, "macarons");
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
formatter: "{a} <br/>{b} : {c}",
|
||||
},
|
||||
// toolbox: {
|
||||
// feature: {
|
||||
// restore: {},
|
||||
// saveAsImage: {},
|
||||
// },
|
||||
// },
|
||||
series: [
|
||||
{
|
||||
name: this.name,
|
||||
type: "gauge",
|
||||
min: this.min,
|
||||
max: this.max,
|
||||
detail: {
|
||||
formatter: "{value}%",
|
||||
},
|
||||
data: this.data,
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
const props = defineProps({
|
||||
name: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
};
|
||||
min: {
|
||||
type: [Object, Number],
|
||||
default: 0,
|
||||
},
|
||||
max: {
|
||||
type: [Object, Number],
|
||||
default: 0,
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{
|
||||
value: '',
|
||||
name: '占比',
|
||||
},
|
||||
],
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px',
|
||||
},
|
||||
})
|
||||
let chart = null
|
||||
const chartRef = ref()
|
||||
|
||||
//重绘图表函数
|
||||
const resizeHandler = () => {
|
||||
chart.resize()
|
||||
}
|
||||
function initChart() {
|
||||
chart = echarts.init(proxy.$refs.chartRef, 'macarons')
|
||||
|
||||
chart.setOption({
|
||||
tooltip: {
|
||||
formatter: '{a} <br/>{b} : {c}',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: props.name,
|
||||
type: 'gauge',
|
||||
min: props.min,
|
||||
max: props.max,
|
||||
detail: {
|
||||
formatter: '{value}%',
|
||||
},
|
||||
data: props.data,
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
const debouncedFn = useDebounceFn(() => {
|
||||
// do something
|
||||
resizeHandler()
|
||||
}, 500)
|
||||
|
||||
document.addEventListener('resize', debouncedFn)
|
||||
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', debouncedFn)
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -66,7 +66,8 @@ export default {
|
||||
fixed: 'fixed',
|
||||
show: 'show',
|
||||
dynamicTitle: 'dynamic title',
|
||||
darkMode: 'dark mode',
|
||||
darkMode: 'dark',
|
||||
lightMode: 'light',
|
||||
saveConfig: 'save',
|
||||
resetConfig: 'reset',
|
||||
logOutConfirm: 'Are you sure you want to exit the current login?',
|
||||
|
||||
@ -66,7 +66,8 @@ export default {
|
||||
fixed: '固定',
|
||||
show: '显示',
|
||||
dynamicTitle: '动态标题',
|
||||
darkMode: '深色模式',
|
||||
darkMode: '深色',
|
||||
lightMode: '明亮',
|
||||
saveConfig: '保存配置',
|
||||
resetConfig: '重置配置',
|
||||
logOutConfirm: '你確定要退出当前登录吗？',
|
||||
|
||||
@ -66,7 +66,8 @@ export default {
|
||||
fixed: '固定',
|
||||
show: '顯示',
|
||||
dynamicTitle: '動態標題',
|
||||
darkMode: '深色模式',
|
||||
darkMode: '深色',
|
||||
lightMode: '明亮',
|
||||
saveConfig: '保存配置',
|
||||
resetConfig: '重置配置',
|
||||
logOutConfirm: '你確定要退出当前登录吗？',
|
||||
|
||||
@ -94,14 +94,15 @@ function setLayout() {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// .el-menu {
|
||||
// // display: inline-table;
|
||||
// .el-menu-item {
|
||||
// vertical-align: center;
|
||||
// }
|
||||
// }
|
||||
.el-menu {
|
||||
// display: inline-table;
|
||||
border-bottom: none;
|
||||
.el-menu-item {
|
||||
vertical-align: center;
|
||||
}
|
||||
}
|
||||
.navbar {
|
||||
height: 50px;
|
||||
// height: 50px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: var(--base-topBar-background);
|
||||
@ -135,7 +136,7 @@ function setLayout() {
|
||||
|
||||
.right-menu {
|
||||
height: 100%;
|
||||
line-height: 50px;
|
||||
line-height: 60px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<h3 class="drawer-title">{{ $t('layout.themeStyleSet') }}</h3>
|
||||
</div>
|
||||
<div class="setting-drawer-block-checbox">
|
||||
<div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
|
||||
<!-- <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
|
||||
<img src="@/assets/images/dark.svg" alt="dark" />
|
||||
<div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
|
||||
<el-icon><Check /></el-icon>
|
||||
@ -15,15 +15,22 @@
|
||||
<div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
|
||||
<el-icon><Check /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-drawer-block-checkbox-item drawer-title" @click="handleTheme('theme-black')">
|
||||
<div v-if="sideTheme === 'theme-black'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
|
||||
<el-icon><Check /></el-icon>
|
||||
</div>
|
||||
<el-icon><moon /></el-icon>
|
||||
{{ $t('layout.darkMode') }}
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
<div class="drawer-item">
|
||||
<el-radio-group v-model="mode" size="small">
|
||||
<el-radio label="dark">{{$t('layout.darkMode')}}</el-radio>
|
||||
<el-radio label="light">{{$t('layout.lightMode')}}</el-radio>
|
||||
<el-radio label="cafe">cafe</el-radio>
|
||||
<!-- <el-radio label="contrast">contrast</el-radio> -->
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<!-- <div class="drawer-item">
|
||||
<span>暗黑模式</span>
|
||||
<span class="comp-style">
|
||||
<el-switch v-model="isDark" class="mt-2" inline-prompt />
|
||||
</span>
|
||||
</div> -->
|
||||
<div class="drawer-item">
|
||||
<span>{{ $t('layout.themeColor') }}</span>
|
||||
<span class="comp-style">
|
||||
@ -76,9 +83,9 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import variables from '@/assets/styles/variables.module.scss'
|
||||
import originElementPlus from 'element-plus/theme-chalk/index.css'
|
||||
|
||||
import 'element-plus/theme-chalk/index.css'
|
||||
import 'element-plus/theme-chalk/dark/css-vars.css'
|
||||
import { useDark, useCycleList, useColorMode } from '@vueuse/core'
|
||||
import { useDynamicTitle } from '@/utils/dynamicTitle'
|
||||
import { getLightColor } from '@/utils/index'
|
||||
|
||||
@ -90,7 +97,16 @@ const sideTheme = ref(store.state.settings.sideTheme)
|
||||
const storeSettings = computed(() => store.state.settings)
|
||||
const predefineColors = ref(['#409EFF', '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585'])
|
||||
|
||||
const blackTheme = ref(false)
|
||||
// 可以手动更改当前值 model.value = 'cafe'
|
||||
const mode = useColorMode({
|
||||
modes: {
|
||||
// custom colors
|
||||
contrast: 'dark contrast',
|
||||
cafe: 'cafe',
|
||||
},
|
||||
})
|
||||
const { next } = useCycleList(['dark', 'light', 'cafe', 'contrast'], { initialValue: mode })
|
||||
const isDark = useDark()
|
||||
|
||||
/** 是否需要topnav */
|
||||
const topNav = computed({
|
||||
@ -161,10 +177,12 @@ watch(
|
||||
watch(
|
||||
() => sideTheme,
|
||||
(val) => {
|
||||
console.log(val.value)
|
||||
const body = document.documentElement
|
||||
if (val.value == 'theme-black') body.setAttribute('data-theme', 'theme-black')
|
||||
else body.setAttribute('data-theme', '')
|
||||
if (val.value == 'theme-black') {
|
||||
//body.setAttribute('data-theme', 'theme-black')
|
||||
} else {
|
||||
//body.setAttribute('data-theme', '')
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
@ -196,8 +214,6 @@ function handleTheme(val) {
|
||||
const body = document.documentElement
|
||||
if (val == 'theme-black') body.setAttribute('data-theme', 'theme-black')
|
||||
else body.setAttribute('data-theme', '')
|
||||
console.log('change ' + val)
|
||||
blackTheme.value = val === 'theme-black'
|
||||
}
|
||||
function saveSetting() {
|
||||
proxy.$modal.loading('正在保存到本地，请稍候...')
|
||||
@ -211,7 +227,7 @@ function saveSetting() {
|
||||
theme: storeSettings.value.theme,
|
||||
}
|
||||
localStorage.setItem('layout-setting', JSON.stringify(layoutSetting))
|
||||
setTimeout(proxy.$modal.closeLoading(), 1000)
|
||||
setTimeout(proxy.$modal.closeLoading(), 500)
|
||||
}
|
||||
function resetSetting() {
|
||||
proxy.$modal.loading('正在清除设置缓存并刷新，请稍候...')
|
||||
@ -230,7 +246,7 @@ defineExpose({
|
||||
<style lang="scss" scoped>
|
||||
.setting-drawer-title {
|
||||
margin-bottom: 12px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
color: var(--base-text-color-rgba);
|
||||
line-height: 22px;
|
||||
font-weight: bold;
|
||||
.drawer-title {
|
||||
@ -244,7 +260,7 @@ defineExpose({
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.setting-drawer-block-checbox-item {
|
||||
.item {
|
||||
position: relative;
|
||||
margin-right: 16px;
|
||||
border-radius: 2px;
|
||||
@ -278,7 +294,7 @@ defineExpose({
|
||||
}
|
||||
|
||||
.drawer-item {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
color: var(--base-text-color-rgba);
|
||||
padding: 12px 0;
|
||||
font-size: 14px;
|
||||
|
||||
|
||||
@ -14,7 +14,6 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import variables from '@/assets/styles/variables.module.scss'
|
||||
import logo from '@/assets/logo/logo.png'
|
||||
|
||||
defineProps({
|
||||
|
||||
@ -20,7 +20,6 @@
|
||||
<script setup>
|
||||
import Logo from './Logo'
|
||||
import SidebarItem from './SidebarItem'
|
||||
import variables from '@/assets/styles/variables.module.scss'
|
||||
|
||||
const route = useRoute()
|
||||
const store = useStore()
|
||||
@ -40,7 +39,3 @@ const activeMenu = computed(() => {
|
||||
return path
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@/assets/styles/variables.module.scss';
|
||||
</style>
|
||||
|
||||
@ -10,8 +10,7 @@
|
||||
class="tags-view-item"
|
||||
:style="activeStyle(tag)"
|
||||
@click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
|
||||
@contextmenu.prevent="openMenu(tag, $event)"
|
||||
>
|
||||
@contextmenu.prevent="openMenu(tag, $event)">
|
||||
<span v-if="tag.meta && tag.meta.titleKey">{{ $t(tag.meta.titleKey) }}</span>
|
||||
<span v-else>{{ tag.title }}</span>
|
||||
<span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
|
||||
@ -21,7 +20,9 @@
|
||||
</scroll-pane>
|
||||
<ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
|
||||
<li @click="refreshSelectedTag(selectedTag)"><refresh-right style="width: 1em; height: 1em" /> {{ $t('tagsView.refresh') }}</li>
|
||||
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><close style="width: 1em; height: 1em" /> {{ $t('tagsView.close') }}</li>
|
||||
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
|
||||
<close style="width: 1em; height: 1em" /> {{ $t('tagsView.close') }}
|
||||
</li>
|
||||
<li @click="closeOthersTags"><circle-close style="width: 1em; height: 1em" /> {{ $t('tagsView.closeOther') }}</li>
|
||||
<li v-if="!isFirstView()" @click="closeLeftTags"><back style="width: 1em; height: 1em" /> {{ $t('tagsView.closeLeft') }}</li>
|
||||
<li v-if="!isLastView()" @click="closeRightTags"><right style="width: 1em; height: 1em" /> {{ $t('tagsView.closeRight') }}</li>
|
||||
@ -237,7 +238,7 @@ function handleScroll() {
|
||||
cursor: pointer;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
border: 1px solid #ccc;
|
||||
// border: 1px solid #ccc;
|
||||
color: var(--el-text-color-regular);
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
@ -249,6 +250,10 @@ function handleScroll() {
|
||||
&:last-of-type {
|
||||
margin-right: 15px;
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--el-color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
&.active {
|
||||
background-color: var(--el-color-primary);
|
||||
border-color: var(--el-color-primary);
|
||||
|
||||
@ -17,6 +17,9 @@
|
||||
</transition>
|
||||
</router-view>
|
||||
</el-main>
|
||||
<el-footer>
|
||||
<div v-html="defaultSettings.copyright"></div>
|
||||
</el-footer>
|
||||
<settings ref="settingRef" />
|
||||
</el-container>
|
||||
</el-container>
|
||||
@ -53,18 +56,18 @@ const WIDTH = 992 // refer to Bootstrap's responsive design
|
||||
|
||||
watchEffect(() => {
|
||||
if (device.value === 'mobile' && sidebar.value.opened) {
|
||||
store.dispatch('app/closeSideBar', { withoutAnimation: false })
|
||||
store.dispatch('app/closeSideBar')
|
||||
}
|
||||
if (width.value - 1 < WIDTH) {
|
||||
store.dispatch('app/toggleDevice', 'mobile')
|
||||
store.dispatch('app/closeSideBar', { withoutAnimation: true })
|
||||
store.dispatch('app/closeSideBar')
|
||||
} else {
|
||||
store.dispatch('app/toggleDevice', 'desktop')
|
||||
}
|
||||
})
|
||||
|
||||
function handleClickOutside() {
|
||||
store.dispatch('app/closeSideBar', { withoutAnimation: false })
|
||||
store.dispatch('app/closeSideBar')
|
||||
}
|
||||
|
||||
const settingRef = ref(null)
|
||||
@ -75,7 +78,6 @@ function setLayout() {
|
||||
|
||||
<style lang="scss">
|
||||
@import '@/assets/styles/mixin.scss';
|
||||
@import '@/assets/styles/variables.module.scss';
|
||||
|
||||
.main-container {
|
||||
min-height: 100%;
|
||||
@ -127,16 +129,20 @@ function setLayout() {
|
||||
|
||||
.el-header {
|
||||
--el-header-padding: 0 0px !important;
|
||||
--el-header-height: 50px !important;
|
||||
// --el-header-height: 50px !important;
|
||||
}
|
||||
.el-footer {
|
||||
--el-footer-height: var(--base-footer-height);
|
||||
line-height: var(--base-footer-height);
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.hasTagsView {
|
||||
.app-main {
|
||||
/* 84 = navbar + tags-view = 50 + 34 */
|
||||
min-height: calc(100vh - 84px);
|
||||
}
|
||||
// .app-main {
|
||||
// min-height: calc(100vh - 84px - var(--base-footer-height));
|
||||
// }
|
||||
.el-header {
|
||||
--el-header-height: 84px !important;
|
||||
--el-header-height: var(--el-header-height) + var(--el-tags-height) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,7 +2,6 @@ import { createApp } from 'vue'
|
||||
import Cookies from 'js-cookie'
|
||||
|
||||
import ElementPlus from 'element-plus'
|
||||
import elZhCn from 'element-plus/lib/locale/lang/zh-cn' // 中文语言
|
||||
import 'dayjs/locale/zh-cn'
|
||||
import '@/assets/styles/index.scss' // global css
|
||||
|
||||
|
||||
@ -55,5 +55,5 @@ export default {
|
||||
/**
|
||||
* 版权信息
|
||||
*/
|
||||
copyright: 'Copyright ©2022 izhaorui.cn All Rights Reserved.'
|
||||
copyright: 'Copyright ©2022 <a target="_black" href="http://www.izhaorui.cn">izhaorui.cn</a> All Rights Reserved.'
|
||||
}
|
||||
@ -50,8 +50,8 @@ const actions = {
|
||||
toggleSideBar({ commit }) {
|
||||
commit('TOGGLE_SIDEBAR')
|
||||
},
|
||||
closeSideBar({ commit }, { withoutAnimation }) {
|
||||
commit('CLOSE_SIDEBAR', withoutAnimation)
|
||||
closeSideBar({ commit }) {
|
||||
commit('CLOSE_SIDEBAR', '')
|
||||
},
|
||||
toggleDevice({ commit }, device) {
|
||||
commit('TOGGLE_DEVICE', device)
|
||||
|
||||
@ -140,7 +140,6 @@
|
||||
</el-card> -->
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -244,7 +244,6 @@ function onOpenGitee() {}
|
||||
}
|
||||
}
|
||||
.dashboard-editor-container {
|
||||
padding: 18px;
|
||||
background-color: var(--base-bg-main);
|
||||
position: relative;
|
||||
|
||||
|
||||
@ -57,7 +57,7 @@
|
||||
|
||||
<!-- 底部 -->
|
||||
<div class="el-login-footer">
|
||||
<span>{{ defaultSettings.copyright }}</span>
|
||||
<div v-html="defaultSettings.copyright"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -231,9 +231,5 @@ getCookie()
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 10px;
|
||||
|
||||
.svg-icon {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
31
src/views/monitor/cache/index.vue
vendored
31
src/views/monitor/cache/index.vue
vendored
@ -22,7 +22,7 @@
|
||||
<div class="cell">运行模式</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell" v-if="cache.info">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</div>
|
||||
<div class="cell" v-if="cache.info">{{ cache.info.redis_mode == 'standalone' ? '单机' : '集群' }}</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell">端口</div>
|
||||
@ -68,7 +68,7 @@
|
||||
<div class="cell">AOF是否开启</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</div>
|
||||
<div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == '0' ? '否' : '是' }}</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell">RDB是否成功</div>
|
||||
@ -80,13 +80,15 @@
|
||||
<div class="cell">Key数量</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell" v-if="cache.dbSize">{{ cache.dbSize }} </div>
|
||||
<div class="cell" v-if="cache.dbSize">{{ cache.dbSize }}</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell">网络入口/出口</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell" v-if="cache.info">{{ cache.info.instantaneous_input_kbps }}kps/{{cache.info.instantaneous_output_kbps}}kps</div>
|
||||
<div class="cell" v-if="cache.info">
|
||||
{{ cache.info.instantaneous_input_kbps }}kps/{{ cache.info.instantaneous_output_kbps }}kps
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -116,8 +118,15 @@
|
||||
</div>
|
||||
</template>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<gauge name="内存消耗" :max="100"
|
||||
:data="[{ value: (parseFloat(cache.info.used_memory_human) / parseFloat(cache.info.total_system_memory_human)).toFixed(2), name: '内存消耗'}]" />
|
||||
<gauge
|
||||
name="内存消耗"
|
||||
:max="100"
|
||||
:data="[
|
||||
{
|
||||
value: (parseFloat(cache.info.used_memory_human) / parseFloat(cache.info.total_system_memory_human)).toFixed(2),
|
||||
name: '内存消耗',
|
||||
},
|
||||
]" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
@ -129,7 +138,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<gauge name="CPU" :max="100" :data="[{ value: parseFloat(cache.info.used_cpu_user_children * 100).toFixed(0), name: 'CPU消耗'}]" />
|
||||
<gauge name="CPU" :max="100" :data="[{ value: parseFloat(cache.info.used_cpu_user_children * 100).toFixed(0), name: 'CPU消耗' }]" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
@ -140,7 +149,7 @@
|
||||
<script setup name="cache">
|
||||
import { getCache } from '@/api/monitor/cache'
|
||||
import * as echarts from 'echarts'
|
||||
// import Gauge from '@/components/Echarts/Gauge.vue'
|
||||
import Gauge from '@/components/Echarts/Gauge.vue'
|
||||
|
||||
// 统计命令信息
|
||||
const commandstats = ref(null)
|
||||
@ -180,5 +189,7 @@ function getList() {
|
||||
})
|
||||
}
|
||||
|
||||
getList()
|
||||
</script>
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -4,65 +4,61 @@
|
||||
<el-col :lg="24" class="card-box">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header clearfix">
|
||||
<span style="font-weight: bold;color: #666;font-size: 15px">状态</span>
|
||||
</div>
|
||||
<span>状态</span>
|
||||
</template>
|
||||
<div>
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
|
||||
<div class="title">CPU使用率</div>
|
||||
<el-tooltip placement="top-end">
|
||||
<div class="content" v-if="server.cpu">
|
||||
<el-progress type="dashboard" :percentage="parseFloat(server.cpu.cpuRate)" />
|
||||
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
|
||||
<div class="title">CPU使用率</div>
|
||||
<el-tooltip placement="top-end">
|
||||
<div class="content" v-if="server.cpu">
|
||||
<el-progress type="dashboard" :percentage="parseFloat(server.cpu.cpuRate)" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<div class="footer" v-if="server.sys">{{ server.sys.cpuNum }} 核心</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" v-if="server.cpu">
|
||||
<div class="title">内存使用率</div>
|
||||
<el-tooltip placement="top-end">
|
||||
<template #content>
|
||||
<div style="font-size: 12px">
|
||||
<div style="padding: 3px">总量：{{ server.cpu.totalRAM }}</div>
|
||||
<div style="padding: 3px">已使用：{{ server.cpu.usedRam }}</div>
|
||||
<div style="padding: 3px">空闲：{{ server.cpu.freeRam }}</div>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<div class="footer" v-if="server.sys">{{ server.sys.cpuNum }} 核心</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px" v-if="server.cpu">
|
||||
<div class="title">内存使用率</div>
|
||||
</template>
|
||||
|
||||
<div class="content">
|
||||
<el-progress type="dashboard" :percentage="parseFloat(server.cpu.ramRate)" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<div class="footer">{{ server.cpu.usedRam }} / {{ server.cpu.totalRAM }}</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="24" class="card-box">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<span>磁盘状态</span>
|
||||
</template>
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" v-for="sysFile in server.disk" :key="sysFile.diskName">
|
||||
<div class="title">{{ sysFile.diskName }}盘使用率</div>
|
||||
<div class="content">
|
||||
<el-tooltip placement="top-end">
|
||||
<template #content>
|
||||
<div style="font-size: 12px;">
|
||||
<div style="padding: 3px;">
|
||||
总量：{{ server.cpu.totalRAM }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
已使用：{{ server.cpu.usedRam }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
空闲：{{ server.cpu.freeRam }}
|
||||
</div>
|
||||
<div style="font-size: 12px">
|
||||
<div style="padding: 3px">总量：{{ sysFile.totalSize }}GB</div>
|
||||
<div style="padding: 3px">空闲：{{ sysFile.availableFreeSpace }}GB</div>
|
||||
<div style="padding: 3px">已用：{{ sysFile.used }}GB</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="content">
|
||||
<el-progress type="dashboard" :percentage="parseFloat( server.cpu.ramRate)" />
|
||||
<el-progress type="dashboard" :percentage="parseFloat(sysFile.availablePercent)" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<div class="footer"> {{server.cpu.usedRam}} / {{ server.cpu.totalRAM }}</div>
|
||||
</el-col>
|
||||
<!--
|
||||
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
|
||||
<div class="title">磁盘使用率</div>
|
||||
<div class="content">
|
||||
<el-tooltip placement="top-end">
|
||||
<div slot="content" style="font-size: 12px;">
|
||||
<div style="padding: 3px">
|
||||
总量：{{ 1 }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
空闲：{{ 1 }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<el-progress type="dashboard" :percentage="parseFloat(3)" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="footer">{{ 1 }} / {{ 100 }}</div>
|
||||
</el-col> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">{{ sysFile.availableFreeSpace }}GB可用，共{{ sysFile.totalSize }}GB</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
@ -74,7 +70,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<table cellspacing="0" style="width: 100%;" v-if="server.sys">
|
||||
<table cellspacing="0" style="width: 100%" v-if="server.sys">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
@ -124,49 +120,13 @@
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" class="card-box">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>磁盘状态</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" v-for="sysFile in server.disk" :key="sysFile.diskName" style="margin-bottom: 10px">
|
||||
<div class="title">{{sysFile.diskName }}盘使用率</div>
|
||||
<div class="content">
|
||||
<el-tooltip placement="top-end">
|
||||
<template #content>
|
||||
<div style="font-size: 12px;">
|
||||
<div style="padding: 3px">
|
||||
总量：{{ sysFile.totalSize }}GB
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
空闲：{{ sysFile.availableFreeSpace }}GB
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
已用：{{ sysFile.used }}GB
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="content">
|
||||
<el-progress type="dashboard" :percentage="parseFloat(sysFile.availablePercent)" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="footer">{{ sysFile.availableFreeSpace }}GB可用，共{{ sysFile.totalSize }}GB</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="24" class="card-box">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div>
|
||||
<span>.NET Core信息</span>
|
||||
</div>
|
||||
<span>.NET Core信息</span>
|
||||
</template>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<table cellspacing="0" style="width: 100%;">
|
||||
<table cellspacing="0" style="width: 100%">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
@ -207,7 +167,7 @@
|
||||
<div class="cell">启动地址</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell" v-if="server.app">{{server.app.host}}</div>
|
||||
<div class="cell" v-if="server.app">{{ server.app.host }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -229,7 +189,6 @@
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
@ -323,4 +282,4 @@ table tr {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
<svg-icon :name="scope.row.icon" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="menuId" label="菜单id" :show-overflow-tooltip="true" width="60" align="center"></el-table-column>
|
||||
<el-table-column prop="menuId" label="菜单id" :show-overflow-tooltip="true" width="80" align="center"></el-table-column>
|
||||
<el-table-column prop="menuType" label="类型" align="center" width="80">
|
||||
<template #default="scope">
|
||||
<el-tag type="danger" v-if="scope.row.menuType == 'M' && scope.row.isFrame == 1">链接</el-tag>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user