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-24 21:28:31 +08:00
parent 70c87c94c6
commit 104543b96f
1 changed files with 31 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -171,7 +171,7 @@ function handleRightMenuSelect(key: string | number) {
</script> </script>
<template> <template>
<div class="w-full"> <div class="system-monitor w-full">
<div <div
class="mt-[50px]" class="mt-[50px]"
:class="monitorGroup.sortStatus ? 'shadow-2xl border shadow-[0_0_30px_10px_rgba(0,0,0,0.3)] p-[10px] rounded-2xl' : ''" :class="monitorGroup.sortStatus ? 'shadow-2xl border shadow-[0_0_30px_10px_rgba(0,0,0,0.3)] p-[10px] rounded-2xl' : ''"
@ -179,13 +179,13 @@ function handleRightMenuSelect(key: string | number) {
@mouseleave="handleSetHoverStatus(false)" @mouseleave="handleSetHoverStatus(false)"
> >
<!-- 分组标题 --> <!-- 分组标题 -->
<div class="text-white text-xl font-extrabold mb-[20px] ml-[10px] flex items-center"> <div class="system-monitor-header text-white text-xl font-extrabold mb-[20px] ml-[10px] flex items-center">
<span v-if="showTitle" class="text-shadow"> <span v-if="showTitle" class="text-shadow">
{{ $t('deskModule.systemMonitor.systemState') }} {{ $t('deskModule.systemMonitor.systemState') }}
</span> </span>
<div <div
v-if="allowEdit" v-if="allowEdit"
class="ml-2 delay-100 transition-opacity flex" class="system-monitor-buttons ml-2 delay-100 transition-opacity flex"
:class="monitorGroup.hoverStatus ? 'opacity-100' : 'opacity-0'" :class="monitorGroup.hoverStatus ? 'opacity-100' : 'opacity-0'"
> >
<span class="mr-2 cursor-pointer" @click="handleAddItem()"> <span class="mr-2 cursor-pointer" @click="handleAddItem()">
@ -198,7 +198,7 @@ function handleRightMenuSelect(key: string | number) {
</div> </div>
<!-- 详情图标 --> <!-- 详情图标 -->
<div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.info"> <template v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.info">
<VueDraggable <VueDraggable
v-model="monitorDatas" item-key="sort" :animation="300" v-model="monitorDatas" item-key="sort" :animation="300"
class="icon-info-box" class="icon-info-box"
@ -221,39 +221,37 @@ function handleRightMenuSelect(key: string | number) {
/> />
</div> </div>
</VueDraggable> </VueDraggable>
</div> </template>
<!-- APP图标宫型盒子 --> <!-- APP图标宫型盒子 -->
<div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.icon"> <template v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.icon">
<div v-if="monitorDatas"> <VueDraggable
<VueDraggable v-model="monitorDatas" item-key="sort" :animation="300"
v-model="monitorDatas" item-key="sort" :animation="300" class="icon-small-box"
class="icon-small-box" filter=".not-drag"
filter=".not-drag" :disabled="!monitorGroup.sortStatus"
:disabled="!monitorGroup.sortStatus" >
<div
v-for="item, index in monitorDatas" :key="index"
:title="item.description"
@click="handleClick(index, item)"
@contextmenu="(e) => handleContextMenu(e, index, item)"
> >
<div <AppIconSystemMonitor
v-for="item, index in monitorDatas" :key="index" :extend-param="item.extendParam"
:title="item.description" :icon-text-icon-hide-title="false"
@click="handleClick(index, item)" :card-type-style="panelState.panelConfig.iconStyle"
@contextmenu="(e) => handleContextMenu(e, index, item)" :monitor-type="item.monitorType"
> :card-style="cardStyle"
<AppIconSystemMonitor :icon-text-color="panelState.panelConfig.iconTextColor"
:extend-param="item.extendParam" />
:icon-text-icon-hide-title="false" </div>
:card-type-style="panelState.panelConfig.iconStyle" </vuedraggable>
:monitor-type="item.monitorType" </template>
:card-style="cardStyle"
:icon-text-color="panelState.panelConfig.iconTextColor"
/>
</div>
</vuedraggable>
</div>
</div>
<!-- 编辑栏 --> <!-- 编辑栏 -->
<div v-if="monitorGroup.sortStatus && allowEdit" class="flex mt-[10px]"> <template v-if="monitorGroup.sortStatus && allowEdit">
<div> <div class="system-monitor-edit-bar flex mt-[10px]">
<NButton color="#2a2a2a6b" @click="handleSaveSort()"> <NButton color="#2a2a2a6b" @click="handleSaveSort()">
<template #icon> <template #icon>
<SvgIcon class="text-white font-xl" icon="material-symbols:save" /> <SvgIcon class="text-white font-xl" icon="material-symbols:save" />
@ -263,7 +261,7 @@ function handleRightMenuSelect(key: string | number) {
</div> </div>
</NButton> </NButton>
</div> </div>
</div> </template>
</div> </div>
<Edit v-model:visible="editShowStatus" :monitor-data="editData" :index="editIndex" @done="handleSaveDone" /> <Edit v-model:visible="editShowStatus" :monitor-data="editData" :index="editIndex" @done="handleSaveDone" />