fast-iot-web/src/views/infra/redis/index.vue

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { baseInfoSchema } from './redis.data'
import { Description } from '@/components/Description'
import { getCache } from '@/api/infra/redis'
import { createAsyncComponent } from '@/utils/factory/createAsyncComponent'

defineOptions({ name: 'InfraRedis' })
const CommandStats = createAsyncComponent(() => import('./components/CommandStats.vue'))
const Memory = createAsyncComponent(() => import('./components/Memory.vue'))

const loading = ref(true)
const cacheInfo = ref<any>()
const commandStats = ref<any[]>([])
const memoryHuman = ref<any>()

async function getList() {
  const res = await getCache()
  cacheInfo.value = res.info
  memoryHuman.value = res.info.used_memory_human
  await res.commandStats.forEach((val) => {
    commandStats.value.push({ name: val.command, value: val.calls })
  })
  loading.value = false
}

onMounted(async () => {
  await getList()
})
</script>

<template>
  <div class="p-4">
    <Description
      title="基础信息"
      :collapse-options="{ canExpand: true, helpMessage: 'Redis 基本信息' }"
      :column="6"
      :data="cacheInfo"
      :schema="baseInfoSchema"
    />
    <div class="md:flex enter-y mt-4">
      <CommandStats class="md:w-1/2 w-full" :loading="loading" :command-stats="commandStats" />
      <Memory class="md:w-1/2 w-full" :loading="loading" :memory-human="memoryHuman" />
    </div>
  </div>
</template>