yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: redis view

pull/3/head
xingyuv 2023-03-23 17:30:40 +08:00
parent afec346d64
commit 8ae8be8e49
2 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/views/infra/redis/components/Memory.vue
View File

@ -11,7 +11,7 @@ import { propTypes } from '@/utils/propTypes'
const props = defineProps({ const props = defineProps({
loading: Boolean, loading: Boolean,
cacheInfo: Object, memoryHuman: String,
width: propTypes.string.def('100%'), width: propTypes.string.def('100%'),
height: propTypes.string.def('300px') height: propTypes.string.def('300px')
}) })
@ -19,8 +19,6 @@ const props = defineProps({
const chartRef = ref<HTMLDivElement | null>(null) const chartRef = ref<HTMLDivElement | null>(null)
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>) const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
const optionsData = ref<any>(props.cacheInfo)
watch( watch(
() => props.loading, () => props.loading,
() => { () => {
@ -29,7 +27,7 @@ watch(
} }
setOptions({ setOptions({
tooltip: { tooltip: {
formatter: '{b} <br/>{a} : ' + optionsData.value.used_memory_human formatter: '{b} <br/>{a} : ' + props.memoryHuman
}, },
series: [ series: [
{ {
@ -38,11 +36,11 @@ watch(
min: 0, min: 0,
max: 100, max: 100,
detail: { detail: {
formatter: optionsData.value.used_memory_human formatter: props.memoryHuman
}, },
data: [ data: [
{ {
value: parseFloat(optionsData.value.used_memory_human), value: parseFloat(props.memoryHuman as unknown as number),
name: '内存消耗' name: '内存消耗'
} }
] ]

4
src/views/infra/redis/index.vue
View File

@ -9,7 +9,7 @@
/> />
<div class="md:flex enter-y mt-4"> <div class="md:flex enter-y mt-4">
<CommandStats class="md:w-1/2 w-full" :loading="loading" :commandStats="commandStats" /> <CommandStats class="md:w-1/2 w-full" :loading="loading" :commandStats="commandStats" />
<Memory class="md:w-1/2 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" :cacheInfo="cacheInfo" /> <Memory class="md:w-1/2 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" :memoryHuman="memoryHuman" />
</div> </div>
</div> </div>
</template> </template>
@ -27,10 +27,12 @@ const Memory = createAsyncComponent(() => import('./components/Memory.vue'))
const loading = ref(true) const loading = ref(true)
const cacheInfo = ref<any>() const cacheInfo = ref<any>()
const commandStats = ref<any[]>([]) const commandStats = ref<any[]>([])
const memoryHuman = ref<any>()
async function getList() { async function getList() {
const res = await getCache() const res = await getCache()
cacheInfo.value = res.info cacheInfo.value = res.info
memoryHuman.value = res.info.used_memory_human
await res.commandStats.forEach((val) => { await res.commandStats.forEach((val) => {
commandStats.value.push({ name: val.command, value: val.calls }) commandStats.value.push({ name: val.command, value: val.calls })
}) })