zwgczx/zwpanel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

初步完成了增改查包括磁盘状态

Browse Source
This commit is contained in:
Sun 2024-01-06 11:46:59 +08:00
parent a85d90985d
commit 3f4b3c67f2
6 changed files with 81 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue
View File

@ -31,7 +31,6 @@ 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)

57
src/components/deskModule/SystemMonitor/Edit/DiskEditor/index.vue
View File

@ -6,6 +6,7 @@ import GenericMonitorCard from '../../components/GenericMonitorCard/index.vue'
import GenericProgress from '../../components/GenericProgress/index.vue'
import { PanelPanelConfigStyleEnum } from '@/enums'
import { getDiskMountpoints } from '@/api/system/systemMonitor'
import { defautSwatchesBackground } from '@/utils/defaultData'
interface Emit {
(e: 'update:diskExtendParam', visible: DiskExtendParam): void
@ -21,7 +22,7 @@ const mountPointList = ref<{
value: string
}[]>([])
const data = computed({
const extendParam = computed({
get: () => props.diskExtendParam,
set: (visible) => {
emit('update:diskExtendParam', visible)
@ -34,8 +35,11 @@ async function getMountPointList() {
mountPointList.value = []
for (let i = 0; i < data.length; i++) {
const element = data[i]
if (i === 0 && !extendParam.value.path)
extendParam.value.path = element.mountpoint
mountPointList.value.push({
label: element.device,
label: element.mountpoint,
value: element.mountpoint,
})
}
@ -52,26 +56,25 @@ onMounted(() => {
<template>
<div>
<!-- <div>{{ genericProgressStyleExtendParam }}</div>
<div>{{ data }}</div> -->
<div class="flex mb-5 justify-center">
<!-- <div>{{ diskExtendParam }}</div> -->
<div class="flex mb-5 justify-center transparent-grid p-2 rounded-xl border">
<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"
:background-color="extendParam.backgroundColor"
:text-color="extendParam.color"
>
<template #info>
<GenericProgress
:progress-color="data.progressColor"
:progress-rail-color="data.progressRailColor"
:progress-color="extendParam.progressColor"
:progress-rail-color="extendParam.progressRailColor"
:percentage="50"
:progress-height="5"
info-card-left-text="DEMO"
info-card-right-text="TEXT"
:text-color="data.color"
:text-color="extendParam.color"
:card-type-style="PanelPanelConfigStyleEnum.info"
/>
</template>
@ -83,15 +86,15 @@ onMounted(() => {
icon-text-icon-hide-title
:card-type-style="PanelPanelConfigStyleEnum.icon"
icon="solar-cpu-bold"
:background-color="data.backgroundColor"
:icon-text-color="data.color"
:background-color="extendParam.backgroundColor"
:icon-text-color="extendParam.color"
>
<template #small>
<GenericProgress
:progress-color="data.progressColor"
:progress-rail-color="data.progressRailColor"
:progress-color="extendParam.progressColor"
:progress-rail-color="extendParam.progressRailColor"
:percentage="50"
:text-color="data.color"
:text-color="extendParam.color"
:card-type-style="PanelPanelConfigStyleEnum.icon"
/>
</template>
@ -99,22 +102,32 @@ onMounted(() => {
</div>
</div>
<NForm ref="formRef" v-model="data">
<NFormItem label="挂载点">
<NSelect v-model:value="data.path" size="small" :options="mountPointList" />
<NForm ref="formRef" v-model="extendParam">
<NFormItem label="磁盘挂载点">
<NSelect v-model:value="extendParam.path" size="small" :options="mountPointList" />
</NFormItem>
<NFormItem label="主色">
<NColorPicker v-model:value="data.progressColor" :modes="['hex']" size="small" />
<NColorPicker v-model:value="extendParam.progressColor" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
</NFormItem>
<NFormItem label="副色">
<NColorPicker v-model:value="data.progressRailColor" :modes="['hex']" size="small" />
<NColorPicker v-model:value="extendParam.progressRailColor" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
</NFormItem>
<NFormItem label="文字图标颜色">
<NColorPicker v-model:value="data.color" :modes="['hex']" size="small" />
<NColorPicker v-model:value="extendParam.color" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
</NFormItem>
<NFormItem label="卡片背景色">
<NColorPicker v-model:value="data.backgroundColor" :modes="['hex']" size="small" />
<NColorPicker v-model:value="extendParam.backgroundColor" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
</NFormItem>
</NForm>
</div>
</template>
<style>
.transparent-grid {
background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%),
linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%);
background-size: 16px 16px;
background-position: 0 0, 8px 8px;
background-color: #e2e8f0;
}
</style>

21
src/components/deskModule/SystemMonitor/Edit/GenericProgressStyleEditor/index.vue
View File

@ -5,6 +5,7 @@ import type { GenericProgressStyleExtendParam } from '../../typings'
import GenericMonitorCard from '../../components/GenericMonitorCard/index.vue'
import GenericProgress from '../../components/GenericProgress/index.vue'
import { PanelPanelConfigStyleEnum } from '@/enums'
import { defautSwatchesBackground } from '@/utils/defaultData'
interface Emit {
(e: 'update:genericProgressStyleExtendParam', visible: GenericProgressStyleExtendParam): void
@ -27,7 +28,7 @@ const data = computed({
<div>
<!-- <div>{{ genericProgressStyleExtendParam }}</div>
<div>{{ data }}</div> -->
<div class="flex mb-5 justify-center">
<div class="flex mb-5 justify-center transparent-grid p-2 rounded-xl border">
<div class="w-[200px]">
<GenericMonitorCard
icon-text-icon-hide-title
@ -74,17 +75,27 @@ const data = computed({
<NForm ref="formRef" v-model="data">
<NFormItem label="主色">
<NColorPicker v-model:value="data.progressColor" :modes="['hex']" size="small" />
<NColorPicker v-model:value="data.progressColor" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
</NFormItem>
<NFormItem label="副色">
<NColorPicker v-model:value="data.progressRailColor" :modes="['hex']" size="small" />
<NColorPicker v-model:value="data.progressRailColor" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
</NFormItem>
<NFormItem label="文字图标颜色">
<NColorPicker v-model:value="data.color" :modes="['hex']" size="small" />
<NColorPicker v-model:value="data.color" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
</NFormItem>
<NFormItem label="卡片背景色">
<NColorPicker v-model:value="data.backgroundColor" :modes="['hex']" size="small" />
<NColorPicker v-model:value="data.backgroundColor" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
</NFormItem>
</NForm>
</div>
</template>
<style>
.transparent-grid {
background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%),
linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%);
background-size: 16px 16px;
background-position: 0 0, 8px 8px;
background-color: #e2e8f0;
}
</style>

20
src/components/deskModule/SystemMonitor/Edit/index.vue
View File

@ -63,13 +63,16 @@ watch(() => props.visible, (value) => {
active.value = props.monitorData?.monitorType || MonitorType.cpu
if (props.monitorData?.monitorType === MonitorType.cpu || props.monitorData?.monitorType === MonitorType.memory)
currentGenericProgressStyleExtendParam.value = { ...props.monitorData?.extendParam }
else if (props.monitorData?.monitorType === MonitorType.disk)
currentDiskExtendParam.value = { ...props.monitorData?.extendParam }
if (!value)
handleResetGenericProgressStyleExtendParam()
handleResetExtendParam()
})
function handleResetGenericProgressStyleExtendParam() {
function handleResetExtendParam() {
currentGenericProgressStyleExtendParam.value = { ...defaultGenericProgressStyleExtendParam }
currentDiskExtendParam.value = { ...defaultDiskExtendParam }
}
// 保存提交
@ -109,25 +112,26 @@ async function handleSubmit() {
<template>
<NModal v-model:show="show" preset="card" size="small" style="width: 600px;border-radius: 1rem;" :title="monitorData ? '修改项目' : '添加项目'">
<!-- 选择监视器 -->
<div>
<!-- progressStyle值：{{ JSON.stringify(currentGenericProgressStyleExtendParam) }} -->
</div>
<!-- <div>
{{ JSON.stringify(currentGenericProgressStyleExtendParam) }}
{{ JSON.stringify(currentDiskExtendParam) }}
</div> -->
<NTabs v-model:value="active" type="segment">
<NTabPane :name="MonitorType.cpu" tab="CPU状态">
<GenericProgressStyleEditor v-model:genericProgressStyleExtendParam="currentGenericProgressStyleExtendParam" />
<NButton @click="handleResetGenericProgressStyleExtendParam">
<NButton @click="handleResetExtendParam">
重置
</NButton>
</NTabPane>
<NTabPane :name="MonitorType.memory" tab="内存状态">
<GenericProgressStyleEditor v-model:genericProgressStyleExtendParam="currentGenericProgressStyleExtendParam" />
<NButton @click="handleResetGenericProgressStyleExtendParam">
<NButton @click="handleResetExtendParam">
重置
</NButton>
</NTabPane>
<NTabPane :name="MonitorType.disk" tab="磁盘状态">
<DiskEditor v-model:disk-extend-param="currentDiskExtendParam" />
<NButton @click="handleResetGenericProgressStyleExtendParam">
<NButton @click="handleResetExtendParam">
重置
</NButton>
</NTabPane>

11
src/components/deskModule/SystemMonitor/index.vue
View File

@ -62,8 +62,11 @@ const monitorDatas = ref<MonitorData[]>([])
function handleClick(index: number, item: MonitorData) {
editShowStatus.value = true
editData.value = item
editIndex.value = index
console.log(editData.value)
}
async function getData() {
@ -77,6 +80,10 @@ onMounted(() => {
function handleSaveDone() {
getData()
}
function handleSaveSort() {
}
</script>
<template>
@ -118,7 +125,6 @@ function handleSaveDone() {
v-for="item, index in monitorDatas" :key="index"
:title="item.description"
@click="handleClick(index, item)"
@contextmenu="(e) => handleContextMenu(e, itemGroupIndex, item)"
>
<AppIconSystemMonitor
:extend-param="item.extendParam"
@ -145,7 +151,6 @@ function handleSaveDone() {
v-for="item, index in monitorDatas" :key="index"
:title="item.description"
@click="handleClick(index, item)"
@contextmenu="(e) => handleContextMenu(e, itemGroupIndex, item)"
>
<AppIconSystemMonitor
:extend-param="item.extendParam"
@ -163,7 +168,7 @@ function handleSaveDone() {
<!-- 编辑栏 -->
<div v-if="monitorGroup.sortStatus" class="flex mt-[10px]">
<div>
<NButton color="#2a2a2a6b" @click="handleSaveSort(monitorGroup)">
<NButton color="#2a2a2a6b" @click="handleSaveSort()">
<template #icon>
<SvgIcon class="text-white font-xl" icon="material-symbols:save" />
</template>

10
src/utils/defaultData/index.ts Normal file
View File

@ -0,0 +1,10 @@
export const defautSwatchesBackground = [
'#00000000',
'#000000',
'#ffffff',
'#18A058',
'#2080F0',
'#F0A020',
'rgba(208, 48, 80, 1)',
'#C418D1FF',
]