feat: websocket展示资源利用率

frontend/src/components/echart/echart-system-info.vue

@@ -0,0 +1,107 @@
+<script setup>
+import Echart from './echart.vue'
+import { computed } from 'vue'
+
+const props = defineProps({
+  cpuValue: {
+    type: String,
+    require: true
+  },
+  memoryValue: {
+    type: String,
+    require: true
+  },
+  diskValue: {
+    type: String,
+    require: true
+  },
+  style: {
+    type: Object
+  }
+})
+
+const options = computed(() => {
+  const gaugeData = [
+    {
+      value: props.cpuValue,
+      name: 'CPU',
+      title: {
+        offsetCenter: ['-60%', '80%']
+      },
+      detail: {
+        offsetCenter: ['-60%', '95%']
+      }
+    },
+    {
+      value: props.memoryValue,
+      name: 'MEMORY',
+      title: {
+        offsetCenter: ['0%', '80%']
+      },
+      detail: {
+        offsetCenter: ['0%', '95%']
+      }
+    },
+    {
+      value: props.diskValue,
+      name: 'DISK',
+      title: {
+        offsetCenter: ['60%', '80%']
+      },
+      detail: {
+        offsetCenter: ['60%', '95%']
+      }
+    }
+  ]
+  return {
+    series: [
+      {
+        type: 'gauge',
+        anchor: {
+          show: true,
+          showAbove: true,
+          size: 18,
+          itemStyle: {
+            color: '#FAC858'
+          }
+        },
+        pointer: {
+          icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
+          width: 8,
+          length: '80%',
+          offsetCenter: [0, '8%']
+        },
+        progress: {
+          show: true,
+          overlap: true,
+          roundCap: true
+        },
+        axisLine: {
+          roundCap: true
+        },
+        data: gaugeData,
+        title: {
+          fontSize: 14
+        },
+        detail: {
+          width: 40,
+          height: 14,
+          fontSize: 14,
+          color: '#fff',
+          backgroundColor: 'auto',
+          borderRadius: 3,
+          formatter: '{value}%'
+        }
+      }
+    ]
+  }
+})
+</script>
+
+<template>
+  <div class="system-info">
+    <Echart :options="options" :style="style" />
+  </div>
+</template>
+
+<style scoped></style>

frontend/src/components/echart/echart.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { ref, onMounted, watchEffect } from 'vue'
+import * as echarts from 'echarts'
+
+const props = defineProps({
+  options: {
+    type: Object,
+    require: true
+  },
+  style: {
+    type: Object,
+    default: () => ({
+      width: '100%',
+      height: '360px'
+    })
+  }
+})
+
+const echartRef = ref()
+
+onMounted(() => {
+  const instance = echarts.init(echartRef.value)
+
+  // props 变化就重新设置值
+  watchEffect(() => {
+    console.log('eachart 基础组件')
+    instance.setOption(props.options)
+  })
+})
+</script>
+
+<template>
+  <div class="echart">
+    <div ref="echartRef" :style="style"></div>
+  </div>
+</template>
+
+<style scoped></style>

frontend/src/views/main/setting/about/about.vue

@@ -1,7 +1,46 @@
-<script setup></script>
+<script setup>
+import { onUnmounted, ref } from 'vue'
+
+import EchartSystemInfo from '@/components/echart/echart-system-info.vue'
+
+/** websocket */
+let ws = new WebSocket('ws://localhost:8000/ws')
+
+const wsData = ref()
+ws.onmessage = (e) => {
+  // 接收消息
+  wsData.value = JSON.parse(e.data)
+}
+
+onUnmounted(() => {
+  ws.close()
+})
+</script>
 
 <template>
-  <div>about</div>
+  <div class="about">
+    <a-card class="system">
+      <template #title> 资源使用率(虚拟数据) </template>
+      <EchartSystemInfo
+        :cpu-value="wsData?.usage.cpu"
+        :disk-value="wsData?.usage.disk"
+        :memory-value="wsData?.usage.memory"
+        :style="{ width: '100%', height: '300px' }"
+      />
+    </a-card>
+  </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.about {
+  width: 100%;
+  height: 100%;
+}
+.system {
+  width: 50%;
+}
+
+.header .ant-card {
+  width: 40%;
+}
+</style>

frontend/src/views/main/system/role/role.vue

@@ -6,7 +6,6 @@ import { PlusOutlined } from '@ant-design/icons-vue'
 import { getRoles, queryRole, delRole, putRole, addRole } from '@/service/role'
 import { getMenus } from '@/service/menu'
 import { columns, rules, treeFieldNames } from './conf'
-import { formatTime } from '@/utils/format'
 import { message } from 'ant-design-vue'
 import { getMenus as getRoleMenu } from '@/service/user'
 
@@ -239,10 +238,10 @@ watch(
               </a-tag>
             </template>
             <template v-else-if="column.key === 'created'">
-              {{ formatTime(record.created) }}
+              {{ $$formatTime(record.created) }}
             </template>
             <template v-else-if="column.key === 'modified'">
-              {{ formatTime(record.modified) }}
+              {{ $$formatTime(record.modified) }}
             </template>
             <template v-else-if="column.key === 'action'">
               <span>