增加磁盘信息卡片的适配

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',
+  })
+}

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)

src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue

@@ -31,7 +31,7 @@ const iconText = computed(() => {
   }
   return ''
 })
-const refreshInterval = 50000
+const refreshInterval = 5000
 </script>
 
 <template>

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>

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>
 

src/components/deskModule/SystemMonitor/typings.ts

@@ -27,3 +27,7 @@ export interface GenericProgressStyleExtendParam {
   color: string
   backgroundColor: string
 }
+
+export interface DiskExtendParam extends GenericProgressStyleExtendParam {
+  path: string
+}

src/typings/systemMonitor.d.ts

@@ -34,4 +34,10 @@ declare namespace SystemMonitor {
         netIOCountersInfo: NetIOCountersInfo[]
         memoryInfo: MemoryInfo
     }
+
+    interface Mountpoint{
+        device:string
+        mountpoint:string
+        fstype:string
+    }
 }