From a85d90985df45af75f8fbc165021b160d5e6500d Mon Sep 17 00:00:00 2001
From: Sun <95302870@qq.com>
Date: Fri, 5 Jan 2024 22:19:47 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=A3=81=E7=9B=98=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF=E5=8D=A1=E7=89=87=E7=9A=84=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/systemMonitor.ts               |   6 +
 .../AppIconSystemMonitor/Disk.vue             |   1 +
 .../AppIconSystemMonitor/index.vue            |   2 +-
 .../SystemMonitor/Edit/DiskEditor/index.vue   | 120 ++++++++++++++++++
 .../deskModule/SystemMonitor/Edit/index.vue   |  27 +++-
 .../deskModule/SystemMonitor/typings.ts       |   4 +
 src/typings/systemMonitor.d.ts                |   6 +
 7 files changed, 159 insertions(+), 7 deletions(-)
 create mode 100644 src/components/deskModule/SystemMonitor/Edit/DiskEditor/index.vue

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