348 lines
9.6 KiB
Vue
348 lines
9.6 KiB
Vue
<template>
|
||
<div class="w-100%">
|
||
<div class="flex justify-between items-center">
|
||
<div
|
||
class="w-[calc(50%-50px)] py-16px px-20px bg-#fff border-rd-10px b-1px .dark:bg-#1D1E1F .dark:b-#2A2B2C .dark:b-solid"
|
||
>
|
||
<h5 class="text">服务器基本信息</h5>
|
||
<div class="w-100% inline-grid grid-cols-4 gap-4 text-center">
|
||
<div class="left-bottom-box" v-for="(item, index) in topLeftData" :key="index">
|
||
<p>{{ item.title }}</p>
|
||
<div>
|
||
<span>{{ item.num }}</span> {{ item.dw }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="flex w-[calc(50%-50px)] px-20px bg-#fff border-rd-10px justify-between items-center b-1px .dark:bg-#1D1E1F .dark:b-#2A2B2C .dark:b-solid"
|
||
>
|
||
<div class="conter-right-box" v-for="(item, index) in arr" :key="index">
|
||
<p class="text-conter">{{ item.title }}</p>
|
||
<div class="chart">
|
||
<Echart :options="syl_pie_option" width="140px" height="130px"></Echart>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="conter-right-box">
|
||
<p class="text-conter">内存使用率</p>
|
||
<div class="chart">
|
||
<Echart :options="syl_pie_option" width="140px" height="130px"></Echart>
|
||
</div>
|
||
</div>
|
||
<div class="conter-right-box">
|
||
<p class="text-conter">系统平均负载（1m）</p>
|
||
<div class="chart">
|
||
<Echart :options="syl_pie_option" width="140px" height="130px"></Echart>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-between mt-20px">
|
||
<div
|
||
class="w-[calc(50%-50px)] bg-#fff border-rd-10px p-20px b-1px .dark:bg-#1D1E1F .dark:b-#2A2B2C .dark:b-solid"
|
||
>
|
||
<Echart :options="cpu_line_option" width="100%" height="350px" />
|
||
</div>
|
||
<div
|
||
class="w-[calc(50%-50px)] bg-#fff border-rd-10px p-20px b-1px .dark:bg-#1D1E1F .dark:b-#2A2B2C .dark:b-solid"
|
||
>
|
||
<Echart :options="nc_line_option" width="100%" height="350px" />
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-between mt-20px">
|
||
<div
|
||
class="w-[calc(50%-50px)] bg-#fff border-rd-10px p-20px b-1px .dark:bg-#1D1E1F .dark:b-#2A2B2C .dark:b-solid"
|
||
>
|
||
<Echart :options="ll_line_option" width="100%" height="350px" />
|
||
</div>
|
||
<div
|
||
class="w-[calc(50%-50px)] bg-#fff border-rd-10px p-20px b-1px .dark:bg-#1D1E1F .dark:b-#2A2B2C .dark:b-solid"
|
||
>
|
||
<Echart :options="cp_line_option" width="100%" height="350px" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { useAppStore } from '@/store/modules/app'
|
||
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
|
||
import { batchGetTableList } from '@/api/design/report'
|
||
|
||
defineOptions({ name: 'Home3' })
|
||
|
||
interface TopLeftData {
|
||
title: string
|
||
dw: string
|
||
dictionary: string
|
||
num?: number
|
||
}
|
||
|
||
const topLeftData = ref<TopLeftData[]>([
|
||
{ title: '系统运行时间', dw: '天', dictionary: 'xtyxsj' },
|
||
{ title: 'cpu核心数', dw: '', dictionary: 'cpuhxs' },
|
||
{ title: '内存总量', dw: 'G', dictionary: 'nczl' },
|
||
{ title: '系统平均负数', dw: '', dictionary: 'xtpjfz' }
|
||
])
|
||
|
||
const arr = ref<any>([
|
||
{ title: 'CPU使用率（1m）', dictionary: 'cpusyl' },
|
||
{ title: '内存使用率', dictionary: 'ncsyl' },
|
||
{ title: '系统平均负载（1m）', dictionary: 'xtpjfzl' }
|
||
])
|
||
|
||
const syl_pie_option = ref<any>({
|
||
title: { text: '50%', left: 'center', top: 'center' },
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
stillShowZeroSum: false,
|
||
label: { show: false },
|
||
hoverAnimation: false,
|
||
data: [
|
||
{ value: 100, name: 'A' },
|
||
{ value: 0, name: 'B' }
|
||
],
|
||
itemStyle: {
|
||
normal: {
|
||
color: function (params) {
|
||
var colors = ['#e9e9e9', '#0099ff', '#51d351']
|
||
return colors[params.dataIndex % colors.length]
|
||
}
|
||
}
|
||
},
|
||
radius: ['50%', '70%']
|
||
}
|
||
]
|
||
})
|
||
|
||
const cpuLineXAxis = ref<string[]>([])
|
||
const cpuLineSeries = ref<string[]>([])
|
||
const cpu_line_option = reactive<any>({
|
||
title: {
|
||
text: 'CPU使用率',
|
||
textStyle: {}
|
||
},
|
||
tooltip: {},
|
||
legend: { data: ['使用率'], x: 'right', selectedMode: false },
|
||
xAxis: {
|
||
data: cpuLineXAxis.value
|
||
},
|
||
yAxis: { type: 'value' },
|
||
series: [
|
||
{
|
||
name: '使用率',
|
||
data: cpuLineSeries.value,
|
||
type: 'line',
|
||
stack: 'x',
|
||
areaStyle: { color: '#ffd7dc' },
|
||
itemStyle: { normal: { color: '#ffd7dc', lineStyle: { color: '#ff7a8c' } } }
|
||
}
|
||
]
|
||
})
|
||
const ncLineXAxis = ref<string[]>([])
|
||
const ncLineSeries = ref<string[]>([])
|
||
const nc_line_option = reactive<any>({
|
||
title: {
|
||
text: '内存使用率',
|
||
textStyle: {}
|
||
},
|
||
tooltip: {},
|
||
legend: { data: ['使用率'], x: 'right', selectedMode: false },
|
||
xAxis: {
|
||
data: ncLineXAxis.value
|
||
},
|
||
yAxis: { type: 'value' },
|
||
series: [
|
||
{
|
||
name: '使用率',
|
||
data: ncLineSeries.value,
|
||
type: 'line',
|
||
stack: 'x',
|
||
areaStyle: { color: '#b2e0ff' },
|
||
itemStyle: { normal: { color: '#b2e0ff', lineStyle: { color: '#0099ff' } } }
|
||
}
|
||
]
|
||
})
|
||
const llLineXAxis = ref<string[]>([])
|
||
const llLineSeries1 = ref<string[]>([])
|
||
const llLineSeries2 = ref<string[]>([])
|
||
const ll_line_option = reactive<any>({
|
||
title: {
|
||
text: '服务器流量',
|
||
textStyle: {}
|
||
},
|
||
tooltip: {},
|
||
legend: { data: ['上传', '下载'], x: 'right', selectedMode: false },
|
||
xAxis: { data: llLineXAxis.value },
|
||
yAxis: { type: 'value' },
|
||
series: [
|
||
{
|
||
name: '上传',
|
||
data: llLineSeries1.value,
|
||
type: 'line',
|
||
// stack: 'x',
|
||
areaStyle: { color: '#caf1ca' },
|
||
itemStyle: { normal: { color: '#51d351', lineStyle: { color: '#51d351' } } }
|
||
},
|
||
{
|
||
name: '下载',
|
||
data: llLineSeries2.value,
|
||
type: 'line',
|
||
// stack: 'x',
|
||
areaStyle: { color: '#ffe5c9' },
|
||
itemStyle: { normal: { color: '#ffb465', lineStyle: { color: '#ffb465' } } }
|
||
}
|
||
]
|
||
})
|
||
const cpLineXAxis = ref<string[]>([])
|
||
const cpLineSeries1 = ref<string[]>([])
|
||
const cpLineSeries2 = ref<string[]>([])
|
||
const cp_line_option = reactive<any>({
|
||
title: {
|
||
text: '服务器磁盘IO',
|
||
textStyle: {}
|
||
},
|
||
tooltip: {},
|
||
legend: { data: ['输出', '输入'], x: 'right', selectedMode: false },
|
||
xAxis: { data: cpLineXAxis.value },
|
||
yAxis: { type: 'value' },
|
||
series: [
|
||
{
|
||
name: '输出',
|
||
data: cpLineSeries1.value,
|
||
type: 'line',
|
||
// stack: 'x',
|
||
areaStyle: { color: '#bdf1f1' },
|
||
itemStyle: { normal: { color: '#78e3e4', lineStyle: { color: '#78e3e4' } } }
|
||
},
|
||
{
|
||
name: '输入',
|
||
data: cpLineSeries2.value,
|
||
type: 'line',
|
||
// stack: 'x',
|
||
areaStyle: { color: '#d9d1fc' },
|
||
itemStyle: { normal: { color: '#8167f5', lineStyle: { color: '#8167f5' } } }
|
||
}
|
||
]
|
||
})
|
||
const textStyle = reactive({
|
||
color: ''
|
||
})
|
||
const appStore = useAppStore()
|
||
|
||
const init = async () => {
|
||
let oneres = await batchGetTableList(
|
||
'example_systemmonitor_server_information,example_systemmonitor_cpu_utilization,example_systemmonitor_memory_utilization,example_systemmonitor_server_traffic,example_systemmonitor_disk_io'
|
||
)
|
||
|
||
let serverInformation = oneres.example_systemmonitor_server_information.records[0]
|
||
topLeftData.value = topLeftData.value.map((item) => {
|
||
return (item = {
|
||
...item,
|
||
num: serverInformation[item.dictionary]
|
||
})
|
||
})
|
||
arr.value = arr.value.map((item) => {
|
||
syl_pie_option.value.title.text = serverInformation[item.dictionary] + '%'
|
||
syl_pie_option.value.series[0].data[1].value = serverInformation[item.dictionary]
|
||
return item
|
||
})
|
||
//CPU使用率
|
||
let cpuUtilization = oneres.example_systemmonitor_cpu_utilization.records
|
||
cpuUtilization.forEach((ele) => {
|
||
cpuLineXAxis.value.push(ele.sj)
|
||
cpuLineSeries.value.push(ele.syl)
|
||
})
|
||
//内存使用率
|
||
let memoryUtilization = oneres.example_systemmonitor_memory_utilization.records
|
||
memoryUtilization.forEach((ele) => {
|
||
ncLineXAxis.value.push(ele.sj)
|
||
ncLineSeries.value.push(ele.syl)
|
||
})
|
||
//服务器流量
|
||
let serverTraffic = oneres.example_systemmonitor_server_traffic.records
|
||
serverTraffic.forEach((ele) => {
|
||
llLineXAxis.value.push(ele.sj)
|
||
llLineSeries1.value.push(ele.sc)
|
||
llLineSeries2.value.push(ele.xz)
|
||
})
|
||
//服务器磁盘IO
|
||
let diskIo = oneres.example_systemmonitor_disk_io.records
|
||
diskIo.forEach((ele) => {
|
||
cpLineXAxis.value.push(ele.sj)
|
||
cpLineSeries1.value.push(ele.sc)
|
||
cpLineSeries2.value.push(ele.sr)
|
||
})
|
||
}
|
||
|
||
onMounted(async () => {
|
||
await init()
|
||
// 判断是否为暗色模式
|
||
const { wsCache } = useCache()
|
||
if (wsCache.get(CACHE_KEY.IS_DARK)) {
|
||
textStyle.color = '#E5EAF3'
|
||
cpu_line_option.title.textStyle = textStyle
|
||
nc_line_option.title.textStyle = textStyle
|
||
ll_line_option.title.textStyle = textStyle
|
||
cp_line_option.title.textStyle = textStyle
|
||
}
|
||
})
|
||
|
||
watch(
|
||
() => appStore.isDark,
|
||
(val) => {
|
||
if (val) {
|
||
textStyle.color = '#E5EAF3'
|
||
} else {
|
||
textStyle.color = 'black'
|
||
}
|
||
cpu_line_option.title.textStyle = textStyle
|
||
nc_line_option.title.textStyle = textStyle
|
||
ll_line_option.title.textStyle = textStyle
|
||
cp_line_option.title.textStyle = textStyle
|
||
}
|
||
)
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
h5,
|
||
p {
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.conter-right-box {
|
||
width: 200px;
|
||
text-align: center;
|
||
|
||
.text-conter {
|
||
margin-top: 15px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.chart {
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.left-bottom-box {
|
||
margin: 20px 0;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
|
||
span {
|
||
font-size: 28px;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.text {
|
||
margin-bottom: 20px;
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
</style>
|