diff --git a/src/api/system/systemMonitor.ts b/src/api/system/systemMonitor.ts index 684c90b..0e17ff2 100644 --- a/src/api/system/systemMonitor.ts +++ b/src/api/system/systemMonitor.ts @@ -24,3 +24,9 @@ export function getMemonyState<T>() { url: '/system/monitor/getMemonyState', }) } + +export function getDiskMountpoints<T>() { + return post<T>({ + url: '/system/monitor/getDiskMountpoints', + }) +} diff --git a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue index 41898d2..9443215 100644 --- a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue +++ b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue @@ -31,6 +31,7 @@ function formatdiskToByte(v: number): number { } async function getData() { + console.log(props.path) try { const { data, code } = await getDiskStateByPath<SystemMonitor.DiskInfo>(props.path) if (code === 0) diff --git a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue index 49fd477..d02f466 100644 --- a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue +++ b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue @@ -31,7 +31,7 @@ const iconText = computed(() => { } return '' }) -const refreshInterval = 50000 +const refreshInterval = 5000 </script> <template> diff --git a/src/components/deskModule/SystemMonitor/Edit/DiskEditor/index.vue b/src/components/deskModule/SystemMonitor/Edit/DiskEditor/index.vue new file mode 100644 index 0000000..77606be --- /dev/null +++ b/src/components/deskModule/SystemMonitor/Edit/DiskEditor/index.vue @@ -0,0 +1,120 @@ +<script setup lang="ts"> +import { computed, onMounted, ref } from 'vue' +import { NColorPicker, NForm, NFormItem, NSelect } from 'naive-ui' +import type { DiskExtendParam } from '../../typings' +import GenericMonitorCard from '../../components/GenericMonitorCard/index.vue' +import GenericProgress from '../../components/GenericProgress/index.vue' +import { PanelPanelConfigStyleEnum } from '@/enums' +import { getDiskMountpoints } from '@/api/system/systemMonitor' + +interface Emit { + (e: 'update:diskExtendParam', visible: DiskExtendParam): void +} + +const props = defineProps<{ + diskExtendParam: DiskExtendParam +}>() +const emit = defineEmits<Emit>() + +const mountPointList = ref<{ + label: string + value: string +}[]>([]) + +const data = computed({ + get: () => props.diskExtendParam, + set: (visible) => { + emit('update:diskExtendParam', visible) + }, +}) + +async function getMountPointList() { + try { + const { data } = await getDiskMountpoints<SystemMonitor.Mountpoint[]>() + mountPointList.value = [] + for (let i = 0; i < data.length; i++) { + const element = data[i] + mountPointList.value.push({ + label: element.device, + value: element.mountpoint, + }) + } + } + catch (error) { + + } +} + +onMounted(() => { + getMountPointList() +}) +</script> + +<template> + <div> + <!-- <div>{{ genericProgressStyleExtendParam }}</div> + <div>{{ data }}</div> --> + <div class="flex mb-5 justify-center"> + <div class="w-[200px]"> + <GenericMonitorCard + icon-text-icon-hide-title + :card-type-style="PanelPanelConfigStyleEnum.info" + icon="solar-cpu-bold" + :background-color="data.backgroundColor" + :text-color="data.color" + > + <template #info> + <GenericProgress + :progress-color="data.progressColor" + :progress-rail-color="data.progressRailColor" + :percentage="50" + :progress-height="5" + info-card-left-text="DEMO" + info-card-right-text="TEXT" + :text-color="data.color" + :card-type-style="PanelPanelConfigStyleEnum.info" + /> + </template> + </GenericMonitorCard> + </div> + + <div class="w-[80px] ml-2"> + <GenericMonitorCard + icon-text-icon-hide-title + :card-type-style="PanelPanelConfigStyleEnum.icon" + icon="solar-cpu-bold" + :background-color="data.backgroundColor" + :icon-text-color="data.color" + > + <template #small> + <GenericProgress + :progress-color="data.progressColor" + :progress-rail-color="data.progressRailColor" + :percentage="50" + :text-color="data.color" + :card-type-style="PanelPanelConfigStyleEnum.icon" + /> + </template> + </GenericMonitorCard> + </div> + </div> + + <NForm ref="formRef" v-model="data"> + <NFormItem label="挂载点"> + <NSelect v-model:value="data.path" size="small" :options="mountPointList" /> + </NFormItem> + <NFormItem label="主色"> + <NColorPicker v-model:value="data.progressColor" :modes="['hex']" size="small" /> + </NFormItem> + <NFormItem label="副色"> + <NColorPicker v-model:value="data.progressRailColor" :modes="['hex']" size="small" /> + </NFormItem> + <NFormItem label="文字图标颜色"> + <NColorPicker v-model:value="data.color" :modes="['hex']" size="small" /> + </NFormItem> + <NFormItem label="卡片背景色"> + <NColorPicker v-model:value="data.backgroundColor" :modes="['hex']" size="small" /> + </NFormItem> + </NForm> + </div> +</template> diff --git a/src/components/deskModule/SystemMonitor/Edit/index.vue b/src/components/deskModule/SystemMonitor/Edit/index.vue index a7b3689..3456622 100644 --- a/src/components/deskModule/SystemMonitor/Edit/index.vue +++ b/src/components/deskModule/SystemMonitor/Edit/index.vue @@ -2,10 +2,11 @@ import { computed, defineEmits, defineProps, ref, watch } from 'vue' import { NButton, NModal, NTabPane, NTabs, useMessage } from 'naive-ui' import { MonitorType } from '../typings' -import type { GenericProgressStyleExtendParam, MonitorData } from '../typings' +import type { DiskExtendParam, GenericProgressStyleExtendParam, MonitorData } from '../typings' import { add, saveByIndex } from '../common' import GenericProgressStyleEditor from './GenericProgressStyleEditor/index.vue' +import DiskEditor from './DiskEditor/index.vue' interface Props { visible: boolean @@ -24,6 +25,14 @@ const defaultGenericProgressStyleExtendParam: GenericProgressStyleExtendParam = backgroundColor: '#2a2a2a6b', } +const defaultDiskExtendParam: DiskExtendParam = { + progressColor: '#fff', + progressRailColor: '#CFCFCFA8', + color: '#fff', + backgroundColor: '#2a2a2a6b', + path: '', +} + const defaultMonitorData: MonitorData = { extendParam: defaultGenericProgressStyleExtendParam, monitorType: MonitorType.cpu, @@ -32,6 +41,7 @@ const defaultMonitorData: MonitorData = { const active = ref<string>(MonitorType.cpu) const currentMonitorData = ref<MonitorData>(props.monitorData || { ...defaultMonitorData }) const currentGenericProgressStyleExtendParam = ref<GenericProgressStyleExtendParam>({ ...defaultGenericProgressStyleExtendParam }) +const currentDiskExtendParam = ref<DiskExtendParam>({ ...defaultDiskExtendParam }) const ms = useMessage() const submitLoading = ref(false) @@ -64,12 +74,14 @@ function handleResetGenericProgressStyleExtendParam() { // 保存提交 async function handleSubmit() { - if (currentMonitorData.value.monitorType === MonitorType.cpu || currentMonitorData.value.monitorType === MonitorType.memory) { - currentMonitorData.value.monitorType = active.value as MonitorType + currentMonitorData.value.monitorType = active.value as MonitorType + if (currentMonitorData.value.monitorType === MonitorType.cpu || currentMonitorData.value.monitorType === MonitorType.memory) currentMonitorData.value.extendParam = currentGenericProgressStyleExtendParam - console.log('保存', currentMonitorData.value.extendParam) - } + else if (currentMonitorData.value.monitorType === MonitorType.disk) + currentMonitorData.value.extendParam = currentDiskExtendParam + + console.log('保存', currentMonitorData.value.extendParam) if (props.index !== null) { const res = await saveByIndex(props.index, currentMonitorData.value) @@ -114,7 +126,10 @@ async function handleSubmit() { </NButton> </NTabPane> <NTabPane :name="MonitorType.disk" tab="磁盘状态"> - <!-- --> + <DiskEditor v-model:disk-extend-param="currentDiskExtendParam" /> + <NButton @click="handleResetGenericProgressStyleExtendParam"> + 重置 + </NButton> </NTabPane> </NTabs> diff --git a/src/components/deskModule/SystemMonitor/typings.ts b/src/components/deskModule/SystemMonitor/typings.ts index 148b0b4..2077144 100644 --- a/src/components/deskModule/SystemMonitor/typings.ts +++ b/src/components/deskModule/SystemMonitor/typings.ts @@ -27,3 +27,7 @@ export interface GenericProgressStyleExtendParam { color: string backgroundColor: string } + +export interface DiskExtendParam extends GenericProgressStyleExtendParam { + path: string +} diff --git a/src/typings/systemMonitor.d.ts b/src/typings/systemMonitor.d.ts index 99def4a..7f42e47 100644 --- a/src/typings/systemMonitor.d.ts +++ b/src/typings/systemMonitor.d.ts @@ -34,4 +34,10 @@ declare namespace SystemMonitor { netIOCountersInfo: NetIOCountersInfo[] memoryInfo: MemoryInfo } + + interface Mountpoint{ + device:string + mountpoint:string + fstype:string + } } \ No newline at end of file