by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor: 修改为setup形式

Browse Source
This commit is contained in:
dap 2025-03-23 13:30:40 +08:00
parent 731c9be4f1
commit ba6785931d
2 changed files with 122 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
apps/web-antd/src/views/monitor/cache/components/command-chart.vue vendored
View File

@ -1,46 +1,41 @@
<script lang="ts">
import type { PropType } from 'vue';
<script setup lang="ts">
import type { EchartsUIType } from '@vben/plugins/echarts';
import { defineComponent, onActivated, onMounted, ref, watch } from 'vue';
import { onActivated, onMounted, ref, watch } from 'vue';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
export default defineComponent({
components: { EchartsUI },
props: {
data: {
default: () => [],
type: Array as PropType<{ name: string; value: string }[]>,
},
},
setup(props, { expose }) {
expose({});
interface Props {
data?: { name: string; value: string }[];
}
const chartRef = ref<EchartsUIType>();
const { renderEcharts, resize } = useEcharts(chartRef);
const props = withDefaults(defineProps<Props>(), {
data: () => [],
});
watch(
const chartRef = ref<EchartsUIType>();
const { renderEcharts, resize } = useEcharts(chartRef);
watch(
() => props.data,
() => {
if (!chartRef.value) return;
setEchartsOption(props.data);
},
{ immediate: true },
);
);
onMounted(() => {
onMounted(() => {
setEchartsOption(props.data);
});
/**
});
/**
* 从其他页面切换回来会有一个奇怪的动画效果 需要调用resize
* 该饼图组件需要关闭animation
*/
onActivated(() => resize(false));
onActivated(() => resize(false));
type EChartsOption = Parameters<typeof renderEcharts>['0'];
function setEchartsOption(data: any[]) {
type EChartsOption = Parameters<typeof renderEcharts>['0'];
function setEchartsOption(data: any[]) {
const option: EChartsOption = {
series: [
{
@ -60,13 +55,7 @@ export default defineComponent({
},
};
renderEcharts(option);
}
return {
chartRef,
};
},
});
}
</script>
<template>

55
apps/web-antd/src/views/monitor/cache/components/memory-chart.vue vendored
View File

@ -1,56 +1,53 @@
<script lang="ts">
<script setup lang="ts">
import type { EchartsUIType } from '@vben/plugins/echarts';
import { defineComponent, onActivated, onMounted, ref, watch } from 'vue';
import { onActivated, onMounted, ref, watch } from 'vue';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
export default defineComponent({
components: { EchartsUI },
props: {
data: {
default: '0',
type: String,
},
},
setup(props, { expose }) {
expose({});
interface Props {
data?: string;
}
const memoryHtmlRef = ref<EchartsUIType>();
const { renderEcharts, resize } = useEcharts(memoryHtmlRef);
const props = withDefaults(defineProps<Props>(), {
data: '0',
});
watch(
const memoryHtmlRef = ref<EchartsUIType>();
const { renderEcharts, resize } = useEcharts(memoryHtmlRef);
watch(
() => props.data,
() => {
if (!memoryHtmlRef.value) return;
setEchartsOption(props.data);
},
{ immediate: true },
);
);
onMounted(() => {
onMounted(() => {
setEchartsOption(props.data);
});
// 从其他页面切换回来会有一个奇怪的动画效果 需要调用resize
onActivated(resize);
});
// 从其他页面切换回来会有一个奇怪的动画效果 需要调用resize
onActivated(resize);
/**
/**
* 获取最近的十的幂次
* 该函数用于寻找大于给定数字num的最近的10的幂次
* 主要解决的问题是确定一个数附近较大的十的幂次，这在某些算法中很有用
*
* @param num {number} 输入的数字，用于寻找最近的十的幂次
*/
function getNearestPowerOfTen(num: number) {
function getNearestPowerOfTen(num: number) {
let power = 10;
while (power <= num) {
power *= 10;
}
return power;
}
}
type EChartsOption = Parameters<typeof renderEcharts>['0'];
function setEchartsOption(value: string) {
type EChartsOption = Parameters<typeof renderEcharts>['0'];
function setEchartsOption(value: string) {
// x10
const formattedValue = Math.floor(Number.parseFloat(value));
// 最大值 10以内取10 100以内取100 以此类推
@ -84,13 +81,7 @@ export default defineComponent({
},
};
renderEcharts(options);
}
return {
memoryHtmlRef,
};
},
});
}
</script>
<template>