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

基础完成了增改查cpu和内存状态

Browse Source
This commit is contained in:
Sun 2024-01-05 21:14:57 +08:00
parent bdbcd50aa1
commit 21e8e8f1b8
9 changed files with 255 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/common/ItemCard/index.vue
View File

@ -6,7 +6,7 @@ interface Prop {
cardTypeStyle: PanelPanelConfigStyleEnum
class?: string
backgroundColor?: string
iconTextIconHideTitle: boolean // 隐藏小图标标题
iconTextIconHideTitle?: boolean // 隐藏小图标标题
iconTextColor?: string // 小图标文字颜色
iconText?: string // 小图标文字
}

47
src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue
View File

@ -1,10 +1,5 @@
<script setup lang="ts">
// -------------------
// 系统监控图标临时使用（与 AppIcon/index.vue 一致）
// 如果确定这种方案将 AppIcon/index.vue 封装成通用组件
// -------------------
import { ref } from 'vue'
import { computed } from 'vue'
import { MonitorType } from '../typings'
import type { CardStyle } from '../typings'
import GenericMonitorCard from '../components/GenericMonitorCard/index.vue'
@ -23,14 +18,20 @@ interface Prop {
cardStyle: CardStyle
}
withDefaults(defineProps<Prop>(), {})
const props = withDefaults(defineProps<Prop>(), {})
const iconText = ref('自定义')
const refreshInterval = 5
const svgStyle = {
width: '35px',
height: '35px',
}
const iconText = computed(() => {
switch (props.monitorType) {
case MonitorType.cpu:
return 'CPU'
case MonitorType.disk:
return props.extendParam.path
case MonitorType.memory:
return 'RAM'
}
return ''
})
const refreshInterval = 50000
</script>
<template>
@ -39,15 +40,17 @@ const svgStyle = {
:icon-text-icon-hide-title="false"
:card-type-style="cardTypeStyle"
:icon-text="iconText"
:icon-text-color="iconTextColor"
:background-color="extendParam.backgroundColor"
class="hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)]"
>
<template #icon>
<!-- 图标 -->
<div class="w-[60px] h-[70px]">
<div class="w-[60px] h-full flex items-center justify-center text-white">
<SvgIcon v-if="monitorType === MonitorType.cpu" icon="solar-cpu-bold" :style="svgStyle" />
<SvgIcon v-if="monitorType === MonitorType.memory" icon="material-symbols-memory-alt-rounded" :style="svgStyle" />
<SvgIcon v-if="monitorType === MonitorType.disk" icon="clarity-hard-disk-solid" :style="svgStyle" />
<SvgIcon v-if="monitorType === MonitorType.cpu" icon="solar-cpu-bold" :style="{ color: extendParam.color }" style="width:35px;height:35px" />
<SvgIcon v-if="monitorType === MonitorType.memory" icon="material-symbols-memory-alt-rounded" :style="{ color: extendParam.color }" style="width:35px;height:35px" />
<SvgIcon v-if="monitorType === MonitorType.disk" icon="clarity-hard-disk-solid" :style="{ color: extendParam.color }" style="width:35px;height:35px" />
</div>
</div>
</template>
@ -61,7 +64,7 @@ const svgStyle = {
:card-type-style="PanelPanelConfigStyleEnum.info"
:progress-color="extendParam?.progressColor"
:progress-rail-color="extendParam?.progressRailColor"
:text-color="extendParam?.textColor"
:text-color="extendParam?.color"
:refresh-interval="refreshInterval"
/>
<Memory
@ -69,7 +72,7 @@ const svgStyle = {
:card-type-style="PanelPanelConfigStyleEnum.info"
:progress-color="extendParam?.progressColor"
:progress-rail-color="extendParam?.progressRailColor"
:text-color="extendParam?.textColor"
:text-color="extendParam?.color"
:refresh-interval="refreshInterval"
/>
<Disk
@ -77,7 +80,7 @@ const svgStyle = {
:card-type-style="PanelPanelConfigStyleEnum.info"
:progress-color="extendParam?.progressColor"
:progress-rail-color="extendParam?.progressRailColor"
:text-color="extendParam?.textColor"
:text-color="extendParam?.color"
:path="extendParam?.path"
:refresh-interval="refreshInterval"
/>
@ -89,7 +92,7 @@ const svgStyle = {
:card-type-style="PanelPanelConfigStyleEnum.icon"
:progress-color="extendParam?.progressColor"
:progress-rail-color="extendParam?.progressRailColor"
:text-color="extendParam?.textColor"
:text-color="extendParam?.color"
:refresh-interval="refreshInterval"
/>
<Memory
@ -97,7 +100,7 @@ const svgStyle = {
:card-type-style="PanelPanelConfigStyleEnum.icon"
:progress-color="extendParam?.progressColor"
:progress-rail-color="extendParam?.progressRailColor"
:text-color="extendParam?.textColor"
:text-color="extendParam?.color"
:refresh-interval="refreshInterval"
/>
<Disk
@ -105,7 +108,7 @@ const svgStyle = {
:card-type-style="PanelPanelConfigStyleEnum.icon"
:progress-color="extendParam?.progressColor"
:progress-rail-color="extendParam?.progressRailColor"
:text-color="extendParam?.textColor"
:text-color="extendParam?.color"
:path="extendParam?.path"
:refresh-interval="refreshInterval"
/>

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

@ -1,30 +1,37 @@
<script setup lang="ts">
import { ref } from 'vue'
import { computed } from 'vue'
import { NColorPicker, NForm, NFormItem } from 'naive-ui'
import type { GenericProgressStyleExtendParam } from '../../typings'
import GenericMonitorCard from '../../components/GenericMonitorCard/index.vue'
import GenericProgress from '../../components/GenericProgress/index.vue'
import { PanelPanelConfigStyleEnum } from '@/enums'
interface Emit {
(e: 'update:genericProgressStyleExtendParam', visible: GenericProgressStyleExtendParam): void
}
const props = defineProps<{
genericProgressStyleExtendParam: GenericProgressStyleExtendParam
}>()
const emit = defineEmits<Emit>()
// const emit = defineEmits<{
// (e: 'update:genericProgressStyleExtendParam', visible: ProgressStyle): void
// }>()
const data = ref(props.genericProgressStyleExtendParam)
const data = computed({
get: () => props.genericProgressStyleExtendParam,
set: (visible) => {
emit('update:genericProgressStyleExtendParam', visible)
},
})
</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"
class="hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)]"
icon="solar-cpu-bold"
:background-color="data.backgroundColor"
:text-color="data.color"
@ -48,7 +55,6 @@ const data = ref(props.genericProgressStyleExtendParam)
<GenericMonitorCard
icon-text-icon-hide-title
:card-type-style="PanelPanelConfigStyleEnum.icon"
class="hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)]"
icon="solar-cpu-bold"
:background-color="data.backgroundColor"
:icon-text-color="data.color"
@ -66,7 +72,7 @@ const data = ref(props.genericProgressStyleExtendParam)
</div>
</div>
<NForm ref="formRef">
<NForm ref="formRef" v-model="data">
<NFormItem label="主色">
<NColorPicker v-model:value="data.progressColor" :modes="['hex']" size="small" />
</NFormItem>

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

@ -1,12 +1,16 @@
<script setup lang="ts">
import { computed, defineEmits, defineProps, ref } from 'vue'
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 { add, saveByIndex } from '../common'
import GenericProgressStyleEditor from './GenericProgressStyleEditor/index.vue'
interface Props {
visible: boolean
monitorData: MonitorData | null
index: number | null
}
const props = defineProps<Props>()
@ -14,22 +18,27 @@ const emit = defineEmits<Emit>()
// 默认通用的进度扩展参数
const defaultGenericProgressStyleExtendParam: GenericProgressStyleExtendParam = {
progressColor: 'white',
progressRailColor: 'white',
color: 'white',
progressColor: '#fff',
progressRailColor: '#CFCFCFA8',
color: '#fff',
backgroundColor: '#2a2a2a6b',
}
// const currentData = ref<MonitorData>(props.monitorData)
const defaultMonitorData: MonitorData = {
extendParam: defaultGenericProgressStyleExtendParam,
monitorType: MonitorType.cpu,
}
const currentDataExterdParam = ref<GenericProgressStyleExtendParam>(defaultGenericProgressStyleExtendParam)
const active = ref<string>(MonitorType.cpu)
const currentMonitorData = ref<MonitorData>(props.monitorData || { ...defaultMonitorData })
const currentGenericProgressStyleExtendParam = ref<GenericProgressStyleExtendParam>({ ...defaultGenericProgressStyleExtendParam })
const ms = useMessage()
const submitLoading = ref(false)
interface Emit {
(e: 'update:visible', visible: boolean): void
(e: 'done', item: MonitorData): void// 创建完成
(e: 'done', item: boolean): void
}
// 更新值父组件传来的值
@ -39,28 +48,78 @@ const show = computed({
emit('update:visible', visible)
},
})
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 }
if (!value)
handleResetGenericProgressStyleExtendParam()
})
function handleResetGenericProgressStyleExtendParam() {
currentGenericProgressStyleExtendParam.value = { ...defaultGenericProgressStyleExtendParam }
}
// 保存提交
async function handleSubmit() {
if (currentMonitorData.value.monitorType === MonitorType.cpu || currentMonitorData.value.monitorType === MonitorType.memory) {
currentMonitorData.value.monitorType = active.value as MonitorType
currentMonitorData.value.extendParam = currentGenericProgressStyleExtendParam
console.log('保存', currentMonitorData.value.extendParam)
}
if (props.index !== null) {
const res = await saveByIndex(props.index, currentMonitorData.value)
if (res) {
show.value = false
emit('done', true)
}
else {
ms.error('保存失败')
}
}
else {
const res = await add(currentMonitorData.value)
if (res) {
show.value = false
emit('done', true)
}
else {
ms.error('保存失败')
}
}
}
</script>
<template>
<NModal v-model:show="show" preset="card" size="small" style="width: 600px;border-radius: 1rem;" :title="monitorData ? '修改项目' : '添加项目'">
<!-- 选择监视器 -->
<div>
progressStyle值：{{ JSON.stringify(currentDataExterdParam) }}
<!-- progressStyle值：{{ JSON.stringify(currentGenericProgressStyleExtendParam) }} -->
</div>
<NTabs type="segment">
<NTabPane name="chap1" tab="CPU">
<GenericProgressStyleEditor v-model:genericProgressStyleExtendParam="currentDataExterdParam" />
<NTabs v-model:value="active" type="segment">
<NTabPane :name="MonitorType.cpu" tab="CPU状态">
<GenericProgressStyleEditor v-model:genericProgressStyleExtendParam="currentGenericProgressStyleExtendParam" />
<NButton @click="handleResetGenericProgressStyleExtendParam">
重置
</NButton>
</NTabPane>
<NTabPane name="chap2" tab="内存">
<!-- -->
<NTabPane :name="MonitorType.memory" tab="内存状态">
<GenericProgressStyleEditor v-model:genericProgressStyleExtendParam="currentGenericProgressStyleExtendParam" />
<NButton @click="handleResetGenericProgressStyleExtendParam">
重置
</NButton>
</NTabPane>
<NTabPane name="chap3" tab="磁盘">
<NTabPane :name="MonitorType.disk" tab="磁盘状态">
<!-- -->
</NTabPane>
</NTabs>
<template #footer>
<NButton type="success" :loading="submitLoading" style="float: right;" @click="handleValidateButtonClick">
<NButton type="success" :loading="submitLoading" style="float: right;" @click="handleSubmit">
确定
</NButton>
</template>

87
src/components/deskModule/SystemMonitor/common.ts Normal file
View File

@ -0,0 +1,87 @@
import type { MonitorData } from './typings'
import { useModuleConfig } from '@/store/modules'
const modelName = 'systemMonitor'
const moduleConfig = useModuleConfig()
export async function saveAll(value: MonitorData[]) {
return await moduleConfig.saveToCloud(modelName, { list: value })
}
export async function getAll(): Promise< MonitorData[]> {
const res = await moduleConfig.getValueByNameFromCloud<{ list: MonitorData[] }>(modelName)
if (res.code === 0 && res.data && res.data.list)
return res.data.list
return []
}
export async function add(value: MonitorData): Promise<boolean> {
let success = true
let newData: MonitorData[] = []
try {
const data = await getAll()
if (data)
newData = data
newData.push(value)
const res = await saveAll(newData)
if (res.code !== 0)
console.log('save failed', res)
}
catch (error) {
console.error(error)
success = false
}
return success
}
export async function saveByIndex(index: number | undefined, value: MonitorData): Promise<boolean> {
if (!index)
index = 0
let success = true
let newData: MonitorData[] = []
try {
const data = await getAll()
if (data)
newData = data
newData[index] = value
const res = await saveAll(newData)
if (res.code !== 0)
console.log('save failed', res)
}
catch (error) {
console.error(error)
success = false
}
return success
}
export async function getByIndex(index: number): Promise<MonitorData | null> {
try {
const data = await getAll()
if (data[index])
return data[index]
}
catch (error) {
}
return null
}
export async function deleteByIndex(index: number): Promise<boolean> {
let success = true
try {
const data = await getAll()
if (data[index])
data.splice(index, 1)
saveAll(data)
}
catch (error) {
success = false
}
return success
}

5
src/components/deskModule/SystemMonitor/components/GenericMonitorCard/index.vue
View File

@ -12,7 +12,7 @@ interface Prop {
// size?: number // 默认70
extendParam?: any
iconTextColor?: string
iconTextIconHideTitle: boolean
iconTextIconHideTitle?: boolean
iconText?: string
textColor?: string
cardTypeStyle: PanelPanelConfigStyleEnum
@ -29,11 +29,12 @@ const propClass = ref(props.class)
<template>
<div class="w-full">
<ItemCard
icon-text-icon-hide-title
:card-type-style="cardTypeStyle"
:icon-text="iconText"
:icon-text-color="iconTextColor"
:class="propClass"
:background-color="backgroundColor"
:icon-text-icon-hide-title="iconTextIconHideTitle"
>
<template #info>
<!-- 图标 -->

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

@ -1,11 +1,11 @@
<script setup lang="ts">
import { ref } from 'vue'
import { onMounted, ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
import { NButton } from 'naive-ui'
import AppIconSystemMonitor from './AppIconSystemMonitor/index.vue'
import { MonitorType } from './typings'
import type { CardStyle, MonitorData, ProgressStyle } from './typings'
import type { CardStyle, MonitorData } from './typings'
import Edit from './Edit/index.vue'
import { getAll } from './common'
import { useAuthStore, usePanelState } from '@/store'
import { PanelPanelConfigStyleEnum } from '@/enums'
import { VisitMode } from '@/enums/auth'
@ -18,21 +18,25 @@ interface MonitorGroup extends Panel.ItemIconGroup {
}
const panelState = usePanelState()
const authStore = useAuthStore()
const systemMonitorData = ref<SystemMonitor.GetAllRes | null>(null)
// const systemMonitorData = ref<SystemMonitor.GetAllRes | null>(null)
const monitorGroup = ref<MonitorGroup>({
hoverStatus: false,
sortStatus: false,
})
const progressStyle = ref<ProgressStyle>({
color: 'white',
railColor: 'rgba(0, 0, 0, 0.2)',
height: 5,
})
// const progressStyle = ref<ProgressStyle>({
// color: 'white',
// railColor: 'rgba(0, 0, 0, 0.2)',
// height: 5,
// })
const EditShowStatus = ref<boolean>(true)
const editShowStatus = ref<boolean>(false)
const editData = ref<MonitorData | null>(null)
const editIndex = ref<number | null>(null)
function handleAddItem() {
EditShowStatus.value = true
editShowStatus.value = true
editData.value = null
editIndex.value = null
}
function handleSetSortStatus(sortStatus: boolean) {
@ -54,31 +58,25 @@ const cardStyle: CardStyle = {
background: '#2a2a2a6b',
}
const monitorDatas = ref<MonitorData[]>([
{
monitorType: MonitorType.cpu,
extendParam: {
progressStyle,
},
description: 'CPU状态',
cardStyle,
},
{
monitorType: MonitorType.memory,
cardStyle,
extendParam: {
progressStyle,
},
},
{
monitorType: MonitorType.disk,
extendParam: {
progressStyle,
path: 'C:',
},
cardStyle,
},
])
const monitorDatas = ref<MonitorData[]>([])
function handleClick(index: number, item: MonitorData) {
editShowStatus.value = true
editData.value = item
editIndex.value = index
}
async function getData() {
monitorDatas.value = await getAll()
}
onMounted(() => {
getData()
})
function handleSaveDone() {
getData()
}
</script>
<template>
@ -109,7 +107,6 @@ const monitorDatas = ref<MonitorData[]>([
</div>
<!-- 详情图标 -->
<!-- <div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.info"> -->
<div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.info">
<VueDraggable
v-model="monitorDatas" item-key="sort" :animation="300"
@ -117,7 +114,12 @@ const monitorDatas = ref<MonitorData[]>([
filter=".not-drag"
:disabled="!monitorGroup.sortStatus"
>
<div v-for="item, index in monitorDatas" :key="index" :title="item.description" @contextmenu="(e) => handleContextMenu(e, itemGroupIndex, item)">
<div
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"
:icon-text-icon-hide-title="false"
@ -139,7 +141,12 @@ const monitorDatas = ref<MonitorData[]>([
filter=".not-drag"
:disabled="!monitorGroup.sortStatus"
>
<div v-for="item, index in monitorDatas" :key="index" :title="item.description" @contextmenu="(e) => handleContextMenu(e, itemGroupIndex, item)">
<div
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"
:icon-text-icon-hide-title="false"
@ -168,7 +175,7 @@ const monitorDatas = ref<MonitorData[]>([
</div>
</div>
<Edit v-model:visible="EditShowStatus" />
<Edit v-model:visible="editShowStatus" :monitor-data="editData" :index="editIndex" @done="handleSaveDone" />
</div>
</template>

2
src/components/deskModule/SystemMonitor/typings.ts
View File

@ -12,7 +12,7 @@ export interface MonitorData {
monitorType: MonitorType
extendParam?: { [key: string]: [value:any] } | any
description?: string
cardStyle: CardStyle
// cardStyle: CardStyle
}
export interface ProgressStyle {

4
src/store/modules/moduleConfig/index.ts
View File

@ -33,10 +33,10 @@ export const useModuleConfig = defineStore('module-config-store', {
},
// 保存到网络
saveToCloud(name: string, value: any) {
async saveToCloud(name: string, value: any) {
const moduleName = `module-${name}`
// 保存至网络
save(moduleName, value)
return save(moduleName, value)
},
// 从网络同步