|
|
@@ -0,0 +1,874 @@
|
|
|
+<template>
|
|
|
+ <div class="system-cache-container">
|
|
|
+ <div class="flex-row gap-3">
|
|
|
+ <el-col :span="8" class="marg-b-15">
|
|
|
+ <el-card class="box-card-height" style="height:auto">
|
|
|
+ <template #header>
|
|
|
+ <div class="card-header">
|
|
|
+ <span>info Keyspace</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <table cellspacing="0" style="height: 230px;width: 100%">
|
|
|
+ <tbody v-if="sysInfo.keyspace">
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">当前数据库key总数: </div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">{{ sysInfo.keyspace.db0.keys }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">带有过期时间的key总数: </div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">{{ sysInfo.keyspace.db0.expires }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">平均存活时间: </div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">{{ sysInfo.keyspace.db0.avg_ttl }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" class="marg-b-15">
|
|
|
+ <el-card class="box-card-height" style="height:auto">
|
|
|
+ <template #header>
|
|
|
+ <div class="card-header">
|
|
|
+ <span>客户端信息</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <table cellspacing="0" style="height: 230px;width: 100%">
|
|
|
+ <tbody v-if="sysInfo.clients">
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">当前客户端连接数: </div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">{{ sysInfo.clients.connected_clients }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">输出缓冲区中队列对象个数的最大值: </div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">{{ sysInfo.clients.client_recent_max_output_buffer }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">输入缓冲区中占用的最大容量:</div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">{{ sysInfo.clients.client_recent_max_input_buffer }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">等待阻塞命令的客户端数量:</div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">{{ sysInfo.clients.blocked_clients }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ <!-- <div style="height: 250px" ref="chartsWarningRef4"></div> -->
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" class="marg-b-15">
|
|
|
+ <el-card class="box-card-height" style="height:auto">
|
|
|
+ <template #header>
|
|
|
+ <div class="card-header">
|
|
|
+ <span>info CPU</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <table cellspacing="0" style="height: 230px;width: 100%">
|
|
|
+ <tbody v-if="sysInfo.cpu">
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">Redis主进程在内核态所占用的CPU时钟总和: </div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">{{ sysInfo.cpu.used_cpu_sys }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">Redis主进程在用户态所占用的CPU时钟总和: </div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">{{ sysInfo.cpu.used_cpu_user }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">Redis子进程在内核态所占用的CPU时钟总和:</div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">{{ sysInfo.cpu.used_cpu_sys_children }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">Redis子进程在用户态所占用的CPU时钟总和:</div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">{{ sysInfo.cpu.used_cpu_user_children }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ <!-- <div style="height: 250px" ref="chartsWarningRef4"></div> -->
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
+ <div class="flex-row gap-3">
|
|
|
+ <el-col :span="12" class="marg-b-15">
|
|
|
+ <el-card class="box-card-height" style="height:auto">
|
|
|
+ <template #header>
|
|
|
+ <div class="card-header">
|
|
|
+ <span>server信息</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <table cellspacing="0" style="height: 300px;width: 100%">
|
|
|
+ <tbody v-if="sysInfo.clients">
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">Redis服务版本: </div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">{{ sysInfo.server.redis_version }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">运行模式: </div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">{{ sysInfo.server.redis_mode }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">Redis所在机器的操作系统:</div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">{{ sysInfo.server.os }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">架构:</div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">{{ sysInfo.server.arch_bits }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">Redis所使用的事件处理机制:</div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">{{ sysInfo.server.multiplexing_api }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">自Redis服务启动以来，运行的秒数:</div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">{{ sysInfo.server.uptime_in_seconds }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">自Redis服务启动以来，运行的天数:</div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">{{ sysInfo.server.uptime_in_days }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">serverCron每秒运行次数:</div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">{{ sysInfo.server.hz }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ <!-- <div style="height: 250px" ref="chartsWarningRef5"></div> -->
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="marg-b-15">
|
|
|
+ <el-card class="box-card-height" style="height:auto">
|
|
|
+ <template #header>
|
|
|
+ <div class="card-header">
|
|
|
+ <span>内存信息</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <table v-if='sysInfo.memory' cellspacing="0" style="height: 300px;width: 100%">
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">Redis分配器分配的内存总量: </div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">{{ sysInfo.memory.used_memory }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">以可读的格式返回used_memory: </div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">{{ sysInfo.memory.used_memory_human }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">从操作系统的角度，Redis进程占用的物理内存总量:</div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">{{ sysInfo.memory.used_memory_rss }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">内存使用的最大值:</div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">{{ sysInfo.memory.used_memory_peak }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">以可读的格式返回used_memory_peak:</div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">{{ sysInfo.memory.used_memory_peak_human }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">Lua引擎所消耗的内存大小:</div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">{{ sysInfo.memory.used_memory_lua }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">内存碎片率:</div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">{{ sysInfo.memory.mem_fragmentation_ratio }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">Redis所使用的内存分配器:</div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="cell-card">{{ sysInfo.memory.mem_allocator }}</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ <!-- <div style="height: 250px" ref="chartsWarningRef6"></div> -->
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
+ <div class="flex-row gap-3">
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" class="marg-b-15">
|
|
|
+ <el-card class="box-card-height" style="height:auto">
|
|
|
+ <template #header>
|
|
|
+ <div class="card-header">
|
|
|
+ <span>基础统计信息</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="flex-row">
|
|
|
+ <el-form v-if="sysInfo.stats" label-position="right" label-width="160px" class="flex1" style="max-width: 460px">
|
|
|
+ <el-form-item label="连接过的客户端总数">{{sysInfo.stats.total_connections_received}}</el-form-item>
|
|
|
+ <el-form-item label="执行过的命令总数">{{sysInfo.stats.total_commands_processed}}</el-form-item>
|
|
|
+ <el-form-item label="每秒处理命令条数">{{sysInfo.stats.instantaneous_ops_per_sec}}</el-form-item>
|
|
|
+ <el-form-item label="拒绝的连接个数">{{sysInfo.stats.rejected_connections}}</el-form-item>
|
|
|
+ <el-form-item label="key数量">{{sysInfo.stats.evicted_keys}}</el-form-item>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-form v-if="sysInfo.stats" label-position="right" label-width="160px" class="flex1" style="max-width: 460px">
|
|
|
+ <el-form-item label="输入总网络流量">{{sysInfo.stats.total_net_input_bytes}} Byte</el-form-item>
|
|
|
+ <el-form-item label="输出总网络流量">{{sysInfo.stats.total_net_output_bytes}} Byte</el-form-item>
|
|
|
+ <el-form-item label="每秒输入字节数">{{sysInfo.stats.instantaneous_input_kbps}}</el-form-item>
|
|
|
+ <el-form-item label="每秒输出字节数">{{sysInfo.stats.instantaneous_output_kbps}}</el-form-item>
|
|
|
+ <el-form-item label="最近fork消耗时间">{{sysInfo.stats.evicted_keys}} μs</el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-form v-if="sysInfo.stats" label-position="right" label-width="160px" class="flex1" style="max-width: 460px">
|
|
|
+ <el-form-item label=" ">{{sysInfo.stats.sync_full}}</el-form-item>
|
|
|
+ <el-form-item label="主从部分同步成功次数">{{sysInfo.stats.sync_partial_ok}}</el-form-item>
|
|
|
+ <el-form-item label="主从部分同步失败次数">{{sysInfo.stats.sync_partial_err}}</el-form-item>
|
|
|
+ <el-form-item label="正migrate的Redis个数">{{sysInfo.stats.migrate_cached_sockets}} μs</el-form-item>
|
|
|
+ <el-form-item label="过期的key数量">{{sysInfo.stats.expired_keys}}</el-form-item>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-form v-if="sysInfo.stats" label-position="right" label-width="160px" class="flex1" style="max-width: 460px">
|
|
|
+ <el-form-item label="当前使用中的频道数量">{{sysInfo.stats.pubsub_channels}}</el-form-item>
|
|
|
+ <el-form-item label="当前使用中的模式数量">{{sysInfo.stats.pubsub_patterns}}</el-form-item>
|
|
|
+ <el-form-item label="不命中次数">{{sysInfo.stats.keyspace_misses}}</el-form-item>
|
|
|
+ <el-form-item label="命中次数">{{sysInfo.stats.keyspace_hits}}</el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+import { toRefs, reactive, onMounted, getCurrentInstance, defineComponent } from 'vue';
|
|
|
+import * as echarts from 'echarts';
|
|
|
+import 'echarts-wordcloud';
|
|
|
+import dayjs from 'dayjs';
|
|
|
+import getOrigin from '/@/utils/origin'
|
|
|
+let interval: any = null;
|
|
|
+export default defineComponent({
|
|
|
+ name: 'monitor',
|
|
|
+ components: {},
|
|
|
+ setup() {
|
|
|
+ const { proxy } = getCurrentInstance() as any;
|
|
|
+ const state: any = reactive({
|
|
|
+ myCharts: [],
|
|
|
+ sysInfo: {},
|
|
|
+ });
|
|
|
+
|
|
|
+ let myChart1: any;
|
|
|
+ let myChart2: any;
|
|
|
+ let myChart3: any;
|
|
|
+ let myChart4: any;
|
|
|
+ let myChart5: any;
|
|
|
+ let myChart6: any;
|
|
|
+ // const hostData = reactive({
|
|
|
+ // "bootTime": "2022-11-24T11:12:13+08:00",
|
|
|
+ // "hostId": "8be74718-1a53-4208-be22-9c126d891ddd",
|
|
|
+ // "hostname": "iZ2zee04uvnkmhvglw9oghZ",
|
|
|
+ // "intranet_ip": "172.17.47.62",
|
|
|
+ // "kernelArch": "x86_64",
|
|
|
+ // "kernelVersion": "3.10.0-1127.19.1.el7.x86_64",
|
|
|
+ // "os": "linux",
|
|
|
+ // "platform": "centos",
|
|
|
+ // "platformFamily": "rhel",
|
|
|
+ // "platformVersion": "7.7.1908",
|
|
|
+ // "procs": 138,
|
|
|
+ // "public_ip": "101.200.198.249",
|
|
|
+ // "uptime": 6393278,
|
|
|
+ // "virtualizationRole": "guest",
|
|
|
+ // "virtualizationSystem": ""
|
|
|
+ // });
|
|
|
+ // const goInfoData = reactive({
|
|
|
+ // "goOs": "-", "arch": "-", "goVersion": "-", "goMem": "-", "goName": "-", "goSize": "-", "goVersion": "-", "goroutine": '-', "pwd": "-", "rootPath": "-",
|
|
|
+ // "runTime": '', "startTime": "-", "intranet_ip": "-"
|
|
|
+ // });
|
|
|
+
|
|
|
+ //
|
|
|
+ // const stats = reactive({
|
|
|
+ // "total_connections_received": "-",
|
|
|
+ // "arch": "-",
|
|
|
+ // "goVersion": "-",
|
|
|
+ // "goMem": "-",
|
|
|
+ // "goName": "-",
|
|
|
+ // "goSize": "-",
|
|
|
+ // "goVersion": "-",
|
|
|
+ // "goroutine": '-',
|
|
|
+ // "pwd": "-",
|
|
|
+ // "rootPath": "-",
|
|
|
+ // "runTime": '',
|
|
|
+ // "startTime": "-",
|
|
|
+ // "intranet_ip": "-"
|
|
|
+ // });
|
|
|
+ //
|
|
|
+
|
|
|
+ // function goInfo(event: { data: any; }) {
|
|
|
+ // const data = JSON.parse(event.data);
|
|
|
+ // Object.assign(goInfoData, data);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // function hostInfo(event: { data: any; }) {
|
|
|
+ // const data = JSON.parse(event.data);
|
|
|
+ // Object.assign(hostData, data);
|
|
|
+ // }
|
|
|
+
|
|
|
+ const myChart4Data: any = {
|
|
|
+ name: [],
|
|
|
+ value: [],
|
|
|
+ }
|
|
|
+ const myChart5Data: any = {
|
|
|
+ name: [],
|
|
|
+ value: [],
|
|
|
+ }
|
|
|
+ const myChart6Data: any = {
|
|
|
+ name: [],
|
|
|
+ value: [],
|
|
|
+ }
|
|
|
+
|
|
|
+ const moveOption = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 10,
|
|
|
+ bottom: 20,
|
|
|
+ left: 10,
|
|
|
+ right: 10,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ boundaryGap: [0, '100%'],
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '使用率',
|
|
|
+ type: 'line',
|
|
|
+ showSymbol: false,
|
|
|
+ data: []
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+ function setOptChart1(value: number) {
|
|
|
+ myChart1.setOption({
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: value,
|
|
|
+ name: '',//cpu
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ }
|
|
|
+ function setOptChart2(value: number) {
|
|
|
+ myChart2.setOption({
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: value,
|
|
|
+ name: '',//内存
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ }
|
|
|
+ function setOptChart3(value: number) {
|
|
|
+ myChart3.setOption({
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: value,
|
|
|
+ name: '',//磁盘
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ }
|
|
|
+ function setOptChart(myChart: any, myChartData: any, value: number) {
|
|
|
+ myChartData.name.push(dayjs().format('HH:mm:ss'));
|
|
|
+ myChartData.value.push(value);
|
|
|
+ myChart.setOption({
|
|
|
+ xAxis: {
|
|
|
+ data: myChartData.name
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: myChartData.value
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ //CPU
|
|
|
+ const initChartCPU = () => {
|
|
|
+ myChart1 = echarts.init(proxy.$refs.chartsWarningRef1);
|
|
|
+ const option = {
|
|
|
+ tooltip: {
|
|
|
+ formatter: '{a} <br/>{b} : {c}%',
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'gauge',
|
|
|
+ name: 'CPU',
|
|
|
+ radius: '90%', //修改表盘大小
|
|
|
+ title: {
|
|
|
+ show: true, //控制表盘title(今日预计用电量)字体是否显示
|
|
|
+ fontSize: 12, //控制表盘title(今日预计用电量)字体大小
|
|
|
+ 'color': 'green', //控制表盘title(今日预计用电量)字体颜色
|
|
|
+ offsetCenter: [-2, '30%'], //设置表盘title(今日预计用电量)位置
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ // 属性lineStyle控制线条样式
|
|
|
+ color: [
|
|
|
+ [0.3, '#4dabf7'],
|
|
|
+ [0.6, '#69db7c'],
|
|
|
+ [0.8, '#ffa94d'],
|
|
|
+ [1, '#ff6b6b'],
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitNumber: 5, //分割线之间的刻度
|
|
|
+
|
|
|
+ detail: {
|
|
|
+ valueAnimation: true,
|
|
|
+ formatter: '{value}%',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 20,
|
|
|
+ color: 'red',
|
|
|
+ },
|
|
|
+ offsetCenter: ['0', '80%'], //表盘数据(30%)位置
|
|
|
+ },
|
|
|
+ // data: [
|
|
|
+ // {
|
|
|
+ // value: 15,
|
|
|
+ // name: 'CPU使用率',
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ myChart1.setOption(option);
|
|
|
+ state.myCharts.push(myChart1);
|
|
|
+ };
|
|
|
+ //内存
|
|
|
+ const initChartRAM = () => {
|
|
|
+ myChart2 = echarts.init(proxy.$refs.chartsWarningRef2);
|
|
|
+ const option = {
|
|
|
+ tooltip: {
|
|
|
+ formatter: '{a} <br/>{b} : {c}%',
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'gauge',
|
|
|
+ name: '内存',
|
|
|
+ radius: '90%', //修改表盘大小
|
|
|
+ title: {
|
|
|
+ show: true, //控制表盘title(今日预计用电量)字体是否显示
|
|
|
+ fontSize: 12, //控制表盘title(今日预计用电量)字体大小
|
|
|
+ 'color': 'green', //控制表盘title(今日预计用电量)字体颜色
|
|
|
+ offsetCenter: [-2, '30%'], //设置表盘title(今日预计用电量)位置
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ // 属性lineStyle控制线条样式
|
|
|
+ color: [
|
|
|
+ [0.3, '#4dabf7'],
|
|
|
+ [0.6, '#69db7c'],
|
|
|
+ [0.8, '#ffa94d'],
|
|
|
+ [1, '#ff6b6b'],
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitNumber: 5, //分割线之间的刻度
|
|
|
+
|
|
|
+ detail: {
|
|
|
+ valueAnimation: true,
|
|
|
+ formatter: '{value}%',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 20,
|
|
|
+ color: 'red',
|
|
|
+ },
|
|
|
+ offsetCenter: ['0', '80%'], //表盘数据(30%)位置
|
|
|
+ },
|
|
|
+ // data: [
|
|
|
+ // {
|
|
|
+ // value: 30,
|
|
|
+ // name: '内存使用率',
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ myChart2.setOption(option);
|
|
|
+ state.myCharts.push(myChart2);
|
|
|
+ };
|
|
|
+ //磁盘
|
|
|
+ const initChartDISK = () => {
|
|
|
+ myChart3 = echarts.init(proxy.$refs.chartsWarningRef3);
|
|
|
+ const option = {
|
|
|
+ tooltip: {
|
|
|
+ formatter: '{a} <br/>{b} : {c}%',
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'gauge',
|
|
|
+ name: '磁盘',
|
|
|
+ radius: '90%', //修改表盘大小
|
|
|
+ title: {
|
|
|
+ show: true, //控制表盘title(今日预计用电量)字体是否显示
|
|
|
+ fontSize: 12, //控制表盘title(今日预计用电量)字体大小
|
|
|
+ 'color': 'green', //控制表盘title(今日预计用电量)字体颜色
|
|
|
+ offsetCenter: [-2, '30%'], //设置表盘title(今日预计用电量)位置
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ // 属性lineStyle控制线条样式
|
|
|
+ color: [
|
|
|
+ [0.3, '#4dabf7'],
|
|
|
+ [0.6, '#69db7c'],
|
|
|
+ [0.8, '#ffa94d'],
|
|
|
+ [1, '#ff6b6b'],
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitNumber: 5, //分割线之间的刻度
|
|
|
+
|
|
|
+ detail: {
|
|
|
+ valueAnimation: true,
|
|
|
+ formatter: '{value}%',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 20,
|
|
|
+ color: 'red',
|
|
|
+ },
|
|
|
+ offsetCenter: ['0', '80%'], //表盘数据(30%)位置
|
|
|
+ },
|
|
|
+ // data: [
|
|
|
+ // {
|
|
|
+ // value: 30,
|
|
|
+ // name: '内存使用率',
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ myChart3.setOption(option);
|
|
|
+ state.myCharts.push(myChart3);
|
|
|
+ };
|
|
|
+
|
|
|
+ //cpu运行状态
|
|
|
+ // const initChartCPURun = () => {
|
|
|
+ // myChart4 = echarts.init(proxy.$refs.chartsWarningRef4);
|
|
|
+ // myChart4.setOption({ ...moveOption });
|
|
|
+ // state.myCharts.push(myChart4);
|
|
|
+ // };
|
|
|
+
|
|
|
+ // //内存运行状态
|
|
|
+ // const initChartRAMRun = () => {
|
|
|
+ // myChart5 = echarts.init(proxy.$refs.chartsWarningRef5);
|
|
|
+ // myChart5.setOption({ ...moveOption });
|
|
|
+ // state.myCharts.push(myChart5);
|
|
|
+ // };
|
|
|
+
|
|
|
+ // //磁盘运行状态
|
|
|
+ // const initChartDISKRun = () => {
|
|
|
+ // myChart6 = echarts.init(proxy.$refs.chartsWarningRef6);
|
|
|
+ // myChart6.setOption({ ...moveOption });
|
|
|
+ // state.myCharts.push(myChart6);
|
|
|
+ // };
|
|
|
+
|
|
|
+ // 页面加载时
|
|
|
+ // onMounted(() => {
|
|
|
+ // initChartCPU();
|
|
|
+ // initChartRAM();
|
|
|
+ // initChartDISK();
|
|
|
+ // initChartCPURun();
|
|
|
+ // initChartRAMRun();
|
|
|
+ // initChartDISKRun();
|
|
|
+ // });
|
|
|
+
|
|
|
+ function startWs() {
|
|
|
+ // ws = null;
|
|
|
+ // ws = new WebSocket(import.meta.env.VITE_WS_URL + '/monitorServer/ws');
|
|
|
+ // ws.onopen = () => {};
|
|
|
+ // ws.onmessage = ({ data: dataStr }) => {
|
|
|
+ // const data = JSON.parse(dataStr);
|
|
|
+ // state.sysInfo = data;
|
|
|
+ // setOptChart1(data.cpuUsed);
|
|
|
+ // setOptChart2(data.memUsage);
|
|
|
+ // setOptChart3(data.diskUsedPercent);
|
|
|
+ // };
|
|
|
+
|
|
|
+ const es = new EventSource(getOrigin(import.meta.env.VITE_SERVER_URL + "/subscribe/redisinfo"));
|
|
|
+
|
|
|
+ es.addEventListener("stats", statsInfoMsg);
|
|
|
+ es.addEventListener("clients", clientsInfoMsg);
|
|
|
+ es.addEventListener("cpu", cpuInfoMsg);
|
|
|
+ es.addEventListener("server", serverInfoMsg);
|
|
|
+ es.addEventListener("memory", memoryInfoMsg);
|
|
|
+ es.addEventListener("keyspace", keyspaceInfoMsg);
|
|
|
+ }
|
|
|
+
|
|
|
+ startWs();
|
|
|
+
|
|
|
+ function keyspaceInfoMsg(event: { data: any; }) {
|
|
|
+ const data = JSON.parse(event.data);
|
|
|
+ state.sysInfo.keyspace = data
|
|
|
+ }
|
|
|
+
|
|
|
+ function memoryInfoMsg(event: { data: any; }) {
|
|
|
+ const data = JSON.parse(event.data);
|
|
|
+ state.sysInfo.memory = data
|
|
|
+ }
|
|
|
+
|
|
|
+ function serverInfoMsg(event: { data: any; }) {
|
|
|
+ const data = JSON.parse(event.data);
|
|
|
+ state.sysInfo.server = data
|
|
|
+ }
|
|
|
+
|
|
|
+ function cpuInfoMsg(event: { data: any; }) {
|
|
|
+ const data = JSON.parse(event.data);
|
|
|
+ state.sysInfo.cpu = data
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ function statsInfoMsg(event: { data: any; }) {
|
|
|
+ const data = JSON.parse(event.data);
|
|
|
+ state.sysInfo.stats = data
|
|
|
+ }
|
|
|
+
|
|
|
+ function clientsInfoMsg(event: { data: any; }) {
|
|
|
+ const data = JSON.parse(event.data);
|
|
|
+ state.sysInfo.clients = data
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ ...toRefs(state),
|
|
|
+ // goInfoData,
|
|
|
+ // hostData,
|
|
|
+ // setOptChart1,
|
|
|
+ // setOptChart2,
|
|
|
+ // setOptChart3,
|
|
|
+
|
|
|
+ // ws,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ unmounted() {
|
|
|
+ if (interval) {
|
|
|
+ clearInterval(interval);
|
|
|
+ interval = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ memorySizeFormat(size: any) {
|
|
|
+ size = parseFloat(size);
|
|
|
+ let rank = 0;
|
|
|
+ let rankchar = 'Bytes';
|
|
|
+ while (size > 1024 && rankchar != 'TB') {
|
|
|
+ size = size / 1024;
|
|
|
+ rank++;
|
|
|
+ if (rank == 1) {
|
|
|
+ rankchar = 'KB';
|
|
|
+ } else if (rank == 2) {
|
|
|
+ rankchar = 'MB';
|
|
|
+ } else if (rank == 3) {
|
|
|
+ rankchar = 'GB';
|
|
|
+ } else if (rank == 4) {
|
|
|
+ rankchar = 'TB';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return size.toFixed(2) + ' ' + rankchar;
|
|
|
+ },
|
|
|
+ timeFormat(second: any) {
|
|
|
+ if (!second) return '-'
|
|
|
+ second = parseFloat(second);
|
|
|
+ let rank = 0;
|
|
|
+ let rankchar = '秒';
|
|
|
+ while ((second > 60 && rankchar != '小时' && rankchar != '天') || (second > 24 && rankchar == '小时')) {
|
|
|
+ if (rankchar == '小时') {
|
|
|
+ second = second / 24;
|
|
|
+ } else {
|
|
|
+ second = second / 60;
|
|
|
+ }
|
|
|
+ rank++;
|
|
|
+ if (rank == 1) {
|
|
|
+ rankchar = '分';
|
|
|
+ } else if (rank == 2) {
|
|
|
+ rankchar = '小时';
|
|
|
+ } else if (rank == 3) {
|
|
|
+ rankchar = '天';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return second.toFixed(2) + ' ' + rankchar;
|
|
|
+ },
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.el-card {
|
|
|
+ height: 300px;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.marg-b-15 {
|
|
|
+ margin-bottom: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.cell {
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: normal;
|
|
|
+ word-break: break-all;
|
|
|
+ line-height: 36px;
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.cell-card {
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: normal;
|
|
|
+ word-break: break-all;
|
|
|
+ line-height: 36px;
|
|
|
+}
|
|
|
+
|
|
|
+.box-card {
|
|
|
+ min-height: 380px;
|
|
|
+}
|
|
|
+
|
|
|
+.box-card-meter {
|
|
|
+ height: 230px;
|
|
|
+
|
|
|
+ min-height: 180px;
|
|
|
+}
|
|
|
+</style>
|
