初步完成了编辑器
This commit is contained in:
Sun
parent
1474f796fc
commit
0d0421c8eb
53
src/components/common/ItemCard/index.vue
Normal file
53
src/components/common/ItemCard/index.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { PanelPanelConfigStyleEnum } from '@/enums'
|
||||
|
||||
interface Prop {
|
||||
cardTypeStyle: PanelPanelConfigStyleEnum
|
||||
class?: string
|
||||
backgroundColor?: string
|
||||
iconTextIconHideTitle: boolean // 隐藏小图标标题
|
||||
iconTextColor?: string // 小图标文字颜色
|
||||
iconText?: string // 小图标文字
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Prop>(), {})
|
||||
|
||||
const defaultBackground = '#2a2a2a6b'
|
||||
const propClass = ref(props.class)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<!-- 详情图标 -->
|
||||
<div
|
||||
v-if="cardTypeStyle === PanelPanelConfigStyleEnum.info"
|
||||
class="w-full rounded-2xl transition-all duration-200 flex"
|
||||
:class="propClass"
|
||||
:style="{ backgroundColor: backgroundColor ?? defaultBackground }"
|
||||
>
|
||||
<slot name="info" />
|
||||
</div>
|
||||
|
||||
<!-- 极简图标（APP） -->
|
||||
<div
|
||||
v-if="cardTypeStyle === PanelPanelConfigStyleEnum.icon"
|
||||
>
|
||||
<div
|
||||
class="overflow-hidden rounded-2xl sunpanel w-[70px] h-[70px] mx-auto transition-all duration-200"
|
||||
:class="propClass"
|
||||
:style="{ backgroundColor: backgroundColor ?? defaultBackground }"
|
||||
>
|
||||
<slot name="small" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="!iconTextIconHideTitle"
|
||||
class="text-center app-icon-text-shadow cursor-pointer mt-[2px]"
|
||||
:style="{ color: iconTextColor }"
|
||||
>
|
||||
{{ iconText }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -8,6 +8,7 @@ import RoundCardModal from './RoundCardModal/index.vue'
|
||||
import SvgIconOnline from './SvgIconOnline/index.vue'
|
||||
import JsonImportExport from './JsonImportExport/index.vue'
|
||||
import AppLoader from './AppLoader/index.vue'
|
||||
import ItemCard from './ItemCard/index.vue'
|
||||
|
||||
export {
|
||||
Verification,
|
||||
@ -20,4 +21,5 @@ export {
|
||||
SvgIconOnline,
|
||||
JsonImportExport,
|
||||
AppLoader,
|
||||
ItemCard,
|
||||
}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref } from 'vue'
|
||||
import { NProgress } from 'naive-ui'
|
||||
import type { ProgressStyle } from '../typings'
|
||||
import GenericProgress from '../components/GenericProgress/index.vue'
|
||||
import { getCpuState } from '@/api/system/systemMonitor'
|
||||
import { PanelPanelConfigStyleEnum } from '@/enums'
|
||||
import type { PanelPanelConfigStyleEnum } from '@/enums'
|
||||
|
||||
interface Prop {
|
||||
cardTypeStyle: PanelPanelConfigStyleEnum
|
||||
@ -44,40 +44,13 @@ onUnmounted(() => {
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<div v-if="cardTypeStyle === PanelPanelConfigStyleEnum.info">
|
||||
<div class="mb-1">
|
||||
<span>
|
||||
CPU
|
||||
</span>
|
||||
<span class="float-right">
|
||||
{{ correctionNumber(cpuState?.usages[0] || 0) }}%
|
||||
</span>
|
||||
</div>
|
||||
<NProgress
|
||||
type="line"
|
||||
:color="progressStyle.color"
|
||||
:rail-color="progressStyle.railColor"
|
||||
:height="progressStyle.height"
|
||||
:percentage="correctionNumber(cpuState?.usages[0] || 0)"
|
||||
:show-indicator="false"
|
||||
:stroke-width="15"
|
||||
style="max-width: 135px;"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="flex justify-center h-full w-full mt-3">
|
||||
<NProgress
|
||||
:color="progressStyle.color"
|
||||
:rail-color="progressStyle.railColor"
|
||||
type="dashboard"
|
||||
:percentage="correctionNumber(cpuState?.usages[0] || 0)" :stroke-width="15"
|
||||
style="width: 50px;"
|
||||
>
|
||||
<div class="text-white" style="font-size: 10px;">
|
||||
{{ correctionNumber(cpuState?.usages[0] || 0, 1) }}%
|
||||
</div>
|
||||
</NProgress>
|
||||
</div>
|
||||
</div>
|
||||
<GenericProgress
|
||||
:progress-style="progressStyle"
|
||||
:percentage="correctionNumber(cpuState?.usages[0] || 0)"
|
||||
:card-type-style="cardTypeStyle"
|
||||
:info-card-right-text="`${correctionNumber(cpuState?.usages[0] || 0)}%`"
|
||||
info-card-left-text="CPU"
|
||||
text-color="black"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -4,18 +4,18 @@
|
||||
// 如果确定这种方案将 AppIcon/index.vue 封装成通用组件
|
||||
// -------------------
|
||||
|
||||
import { computed } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
import { MonitorType } from '../typings'
|
||||
import type { CardStyle } from '../typings'
|
||||
import CardCPU from './CPU.vue'
|
||||
import Memory from './Memory.vue'
|
||||
import Disk from './Disk.vue'
|
||||
import { SvgIcon } from '@/components/common'
|
||||
import { ItemCard, SvgIcon } from '@/components/common'
|
||||
import { PanelPanelConfigStyleEnum } from '@/enums'
|
||||
|
||||
interface Prop {
|
||||
size?: number // 默认70
|
||||
extendParam?: { [key: string]: [value: any] }
|
||||
extendParam?: any
|
||||
iconTextColor?: string
|
||||
iconTextIconHideTitle: boolean
|
||||
cardTypeStyle: PanelPanelConfigStyleEnum
|
||||
@ -28,6 +28,7 @@ const props = withDefaults(defineProps<Prop>(), {
|
||||
})
|
||||
|
||||
const defaultBackground = '#2a2a2a6b'
|
||||
const iconText = ref('自定义')
|
||||
const refreshInterval = 5
|
||||
const svgStyle = {
|
||||
width: '35px',
|
||||
@ -50,99 +51,69 @@ const textColor = computed(() => {
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<!-- 详情图标 -->
|
||||
<div
|
||||
v-if="cardTypeStyle === PanelPanelConfigStyleEnum.info"
|
||||
class="w-full rounded-2xl transition-all duration-200 hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)] flex"
|
||||
:style="{ backgroundColor: cardStyle.background }"
|
||||
<ItemCard
|
||||
icon-text-icon-hide-title
|
||||
:card-type-style="cardTypeStyle"
|
||||
:icon-text="iconText"
|
||||
class="hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)]"
|
||||
>
|
||||
<!-- 图标 -->
|
||||
<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" />
|
||||
<template #info>
|
||||
<!-- 图标 -->
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 如果为纯白色，将自动根据背景的明暗计算字体的黑白色 -->
|
||||
<div
|
||||
class=" w-full text-white flex items-center"
|
||||
:style="{ color: (iconTextColor === '#ffffff') ? textColor : iconTextColor, maxWidth: 'calc(100% - 80px)' }"
|
||||
>
|
||||
<CardCPU
|
||||
v-if="monitorType === MonitorType.cpu"
|
||||
:card-type-style="PanelPanelConfigStyleEnum.info"
|
||||
:progress-style="extendParam?.progressStyle as any"
|
||||
:refresh-interval="refreshInterval"
|
||||
/>
|
||||
<Memory
|
||||
v-else-if="monitorType === MonitorType.memory"
|
||||
:card-type-style="PanelPanelConfigStyleEnum.info"
|
||||
:progress-style="extendParam?.progressStyle as any"
|
||||
:refresh-interval="refreshInterval"
|
||||
/>
|
||||
<Disk
|
||||
v-else-if="monitorType === MonitorType.disk"
|
||||
:card-type-style="PanelPanelConfigStyleEnum.info"
|
||||
:progress-style="extendParam?.progressStyle as any"
|
||||
:path="extendParam?.path as any"
|
||||
:refresh-interval="refreshInterval"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 极简图标（APP） -->
|
||||
<div
|
||||
v-if="cardTypeStyle === PanelPanelConfigStyleEnum.icon"
|
||||
>
|
||||
<div
|
||||
class="overflow-hidden rounded-2xl sunpanel w-[70px] h-[70px] mx-auto rounded-2xl transition-all duration-200 hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)]"
|
||||
:style="{ backgroundColor: cardStyle.background }"
|
||||
>
|
||||
<!-- 如果为纯白色，将自动根据背景的明暗计算字体的黑白色 -->
|
||||
<div
|
||||
class=" w-full text-white flex items-center"
|
||||
:style="{ color: (iconTextColor === '#ffffff') ? textColor : iconTextColor, maxWidth: 'calc(100% - 80px)' }"
|
||||
>
|
||||
<CardCPU
|
||||
v-if="monitorType === MonitorType.cpu"
|
||||
:card-type-style="PanelPanelConfigStyleEnum.info"
|
||||
:progress-style="extendParam?.progressStyle"
|
||||
:refresh-interval="refreshInterval"
|
||||
/>
|
||||
<Memory
|
||||
v-else-if="monitorType === MonitorType.memory"
|
||||
:card-type-style="PanelPanelConfigStyleEnum.info"
|
||||
:progress-style="extendParam?.progressStyle"
|
||||
:refresh-interval="refreshInterval"
|
||||
/>
|
||||
<Disk
|
||||
v-else-if="monitorType === MonitorType.disk"
|
||||
:card-type-style="PanelPanelConfigStyleEnum.info"
|
||||
:progress-style="extendParam?.progressStyle"
|
||||
:path="extendParam?.path"
|
||||
:refresh-interval="refreshInterval"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #small>
|
||||
<CardCPU
|
||||
v-if="monitorType === MonitorType.cpu"
|
||||
:card-type-style="PanelPanelConfigStyleEnum.icon"
|
||||
:progress-style="extendParam?.progressStyle as any"
|
||||
:progress-style="extendParam?.progressStyle"
|
||||
:refresh-interval="refreshInterval"
|
||||
/>
|
||||
<Memory
|
||||
v-else-if="monitorType === MonitorType.memory"
|
||||
:card-type-style="PanelPanelConfigStyleEnum.icon"
|
||||
:progress-style="extendParam?.progressStyle as any"
|
||||
:progress-style="extendParam?.progressStyle"
|
||||
:refresh-interval="refreshInterval"
|
||||
/>
|
||||
<Disk
|
||||
v-else-if="monitorType === MonitorType.disk"
|
||||
:card-type-style="PanelPanelConfigStyleEnum.icon"
|
||||
:progress-style="extendParam?.progressStyle as any"
|
||||
:path="extendParam?.path as any"
|
||||
:progress-style="extendParam?.progressStyle"
|
||||
:path="extendParam?.path"
|
||||
:refresh-interval="refreshInterval"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="!iconTextIconHideTitle"
|
||||
class="text-center app-icon-text-shadow cursor-pointer mt-[2px]"
|
||||
:style="{ color: iconTextColor }"
|
||||
>
|
||||
<span
|
||||
v-if="monitorType === MonitorType.cpu"
|
||||
>
|
||||
CPU
|
||||
</span>
|
||||
|
||||
<span
|
||||
v-else-if="monitorType === MonitorType.memory"
|
||||
>
|
||||
RAM
|
||||
</span>
|
||||
|
||||
<span
|
||||
v-else-if="monitorType === MonitorType.disk"
|
||||
>
|
||||
{{ extendParam?.path }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ItemCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -0,0 +1,84 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } 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'
|
||||
|
||||
const props = defineProps<{
|
||||
genericProgressStyleExtendParam: GenericProgressStyleExtendParam
|
||||
}>()
|
||||
|
||||
// const emit = defineEmits<{
|
||||
// (e: 'update:genericProgressStyleExtendParam', visible: ProgressStyle): void
|
||||
// }>()
|
||||
|
||||
const data = ref(props.genericProgressStyleExtendParam)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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"
|
||||
>
|
||||
<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"
|
||||
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"
|
||||
>
|
||||
<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">
|
||||
<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>
|
||||
@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { NColorPicker, NForm, NFormItem } from 'naive-ui'
|
||||
import type { ProgressStyle } from '../../typings'
|
||||
|
||||
const props = defineProps<{
|
||||
progressStyle: ProgressStyle
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:progressStyle', visible: ProgressStyle): void // 定义修改父组件（prop内）的值的事件
|
||||
}>()
|
||||
|
||||
const data = computed({
|
||||
get: () => props.progressStyle,
|
||||
set() {
|
||||
emit('update:progressStyle', data.value)
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<NForm ref="formRef" :model="data">
|
||||
<NFormItem path="url" label="主色">
|
||||
<!-- <NSelect :style="{ width: '100px' }" :options="urlProtocolOptions" /> -->
|
||||
<NColorPicker v-model:value="data.color" size="small" />
|
||||
</NFormItem>
|
||||
<NFormItem path="url" label="背景色">
|
||||
<!-- <NSelect :style="{ width: '100px' }" :options="urlProtocolOptions" /> -->
|
||||
<NColorPicker v-model:value="data.railColor" size="small" />
|
||||
</NFormItem>
|
||||
</NForm>
|
||||
</div>
|
||||
</template>
|
||||
68
src/components/deskModule/SystemMonitor/Edit/index.vue
Normal file
68
src/components/deskModule/SystemMonitor/Edit/index.vue
Normal file
@ -0,0 +1,68 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, defineEmits, defineProps, ref } from 'vue'
|
||||
import { NButton, NModal, NTabPane, NTabs, useMessage } from 'naive-ui'
|
||||
import type { GenericProgressStyleExtendParam, MonitorData } from '../typings'
|
||||
import GenericProgressStyleEditor from './GenericProgressStyleEditor/index.vue'
|
||||
|
||||
interface Props {
|
||||
visible: boolean
|
||||
monitorData: MonitorData | null
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emit>()
|
||||
|
||||
// 默认通用的进度扩展参数
|
||||
const defaultGenericProgressStyleExtendParam: GenericProgressStyleExtendParam = {
|
||||
progressColor: 'white',
|
||||
progressRailColor: 'white',
|
||||
color: 'white',
|
||||
backgroundColor: '#2a2a2a6b',
|
||||
}
|
||||
|
||||
// const currentData = ref<MonitorData>(props.monitorData)
|
||||
|
||||
const currentDataExterdParam = ref<GenericProgressStyleExtendParam>(defaultGenericProgressStyleExtendParam)
|
||||
|
||||
const ms = useMessage()
|
||||
const submitLoading = ref(false)
|
||||
|
||||
interface Emit {
|
||||
(e: 'update:visible', visible: boolean): void
|
||||
(e: 'done', item: MonitorData): void// 创建完成
|
||||
}
|
||||
|
||||
// 更新值父组件传来的值
|
||||
const show = computed({
|
||||
get: () => props.visible,
|
||||
set: (visible: boolean) => {
|
||||
emit('update:visible', visible)
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NModal v-model:show="show" preset="card" size="small" style="width: 600px;border-radius: 1rem;" :title="monitorData ? '修改项目' : '添加项目'">
|
||||
<!-- 选择监视器 -->
|
||||
<div>
|
||||
progressStyle值：{{ JSON.stringify(currentDataExterdParam) }}
|
||||
</div>
|
||||
<NTabs type="segment">
|
||||
<NTabPane name="chap1" tab="CPU">
|
||||
<GenericProgressStyleEditor v-model:genericProgressStyleExtendParam="currentDataExterdParam" />
|
||||
</NTabPane>
|
||||
<NTabPane name="chap2" tab="内存">
|
||||
<!-- -->
|
||||
</NTabPane>
|
||||
<NTabPane name="chap3" tab="磁盘">
|
||||
<!-- -->
|
||||
</NTabPane>
|
||||
</NTabs>
|
||||
|
||||
<template #footer>
|
||||
<NButton type="success" :loading="submitLoading" style="float: right;" @click="handleValidateButtonClick">
|
||||
确定
|
||||
</NButton>
|
||||
</template>
|
||||
</NModal>
|
||||
</template>
|
||||
@ -0,0 +1,60 @@
|
||||
<script setup lang="ts">
|
||||
// -------------------
|
||||
// 系统监控图标临时使用（与 AppIcon/index.vue 一致）
|
||||
// 如果确定这种方案将 AppIcon/index.vue 封装成通用组件
|
||||
// -------------------
|
||||
|
||||
import { ref } from 'vue'
|
||||
import { ItemCard, SvgIcon } from '@/components/common'
|
||||
import type { PanelPanelConfigStyleEnum } from '@/enums'
|
||||
|
||||
interface Prop {
|
||||
// size?: number // 默认70
|
||||
extendParam?: any
|
||||
iconTextColor?: string
|
||||
iconTextIconHideTitle: boolean
|
||||
iconText?: string
|
||||
textColor?: string
|
||||
cardTypeStyle: PanelPanelConfigStyleEnum
|
||||
// monitorType: string
|
||||
icon: string
|
||||
class?: string
|
||||
backgroundColor?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Prop>(), {})
|
||||
const propClass = ref(props.class)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<ItemCard
|
||||
icon-text-icon-hide-title
|
||||
:card-type-style="cardTypeStyle"
|
||||
:icon-text="iconText"
|
||||
:class="propClass"
|
||||
:background-color="backgroundColor"
|
||||
>
|
||||
<template #info>
|
||||
<!-- 图标 -->
|
||||
<div class="w-[60px] h-[70px]">
|
||||
<div class="w-[60px] h-full flex items-center justify-center text-white">
|
||||
<slot name="icon">
|
||||
<SvgIcon :icon="icon" style="width: 35px;height: 35px;" :style="{ color: textColor }" />
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class=" w-full text-white flex items-center"
|
||||
:style=" { maxWidth: 'calc(100% - 80px)' }"
|
||||
>
|
||||
<slot name="info" />
|
||||
</div>
|
||||
</template>
|
||||
<template #small>
|
||||
<slot name="small" />
|
||||
</template>
|
||||
</ItemCard>
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,57 @@
|
||||
<script setup lang="ts">
|
||||
import { NProgress } from 'naive-ui'
|
||||
import { PanelPanelConfigStyleEnum } from '@/enums'
|
||||
|
||||
interface Prop {
|
||||
textColor: string
|
||||
progressColor: string
|
||||
progressRailColor: string
|
||||
progressHeight?: number
|
||||
percentage: number
|
||||
cardTypeStyle: PanelPanelConfigStyleEnum
|
||||
infoCardLeftText?: string
|
||||
infoCardRightText?: string
|
||||
}
|
||||
|
||||
defineProps<Prop>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<div v-if="cardTypeStyle === PanelPanelConfigStyleEnum.info">
|
||||
<div class="mb-1" :style="{ color: textColor }">
|
||||
<span>
|
||||
{{ infoCardLeftText }}
|
||||
</span>
|
||||
<span class="float-right">
|
||||
{{ infoCardRightText }}
|
||||
</span>
|
||||
</div>
|
||||
<NProgress
|
||||
type="line"
|
||||
:color="progressColor"
|
||||
:rail-color="progressRailColor"
|
||||
:height="progressHeight"
|
||||
:percentage="percentage"
|
||||
:show-indicator="false"
|
||||
:stroke-width="15"
|
||||
style="max-width: 135px;"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="flex justify-center h-full w-full mt-3">
|
||||
<NProgress
|
||||
:color="progressColor"
|
||||
:rail-color="progressRailColor"
|
||||
type="dashboard"
|
||||
:percentage="percentage" :stroke-width="15"
|
||||
style="width: 50px;"
|
||||
>
|
||||
<div class="text-white" style="font-size: 8px;" :style="{ color: textColor }">
|
||||
{{ percentage }}%
|
||||
</div>
|
||||
</NProgress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,21 +1,55 @@
|
||||
<script setup lang="ts">
|
||||
import { 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 Edit from './Edit/index.vue'
|
||||
import { useAuthStore, usePanelState } from '@/store'
|
||||
import { PanelPanelConfigStyleEnum } from '@/enums'
|
||||
import { VisitMode } from '@/enums/auth'
|
||||
import { SvgIcon } from '@/components/common'
|
||||
|
||||
interface MonitorGroup extends Panel.ItemIconGroup {
|
||||
sortStatus?: boolean
|
||||
hoverStatus: boolean
|
||||
items?: Panel.ItemInfo[]
|
||||
}
|
||||
const panelState = usePanelState()
|
||||
const authStore = useAuthStore()
|
||||
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 EditShowStatus = ref<boolean>(true)
|
||||
|
||||
function handleAddItem() {
|
||||
EditShowStatus.value = true
|
||||
}
|
||||
|
||||
function handleSetSortStatus(sortStatus: boolean) {
|
||||
monitorGroup.value.sortStatus = sortStatus
|
||||
|
||||
// // 并未保存排序重新更新数据
|
||||
// if (!sortStatus) {
|
||||
// // 单独更新组
|
||||
// if (items.value[groupIndex] && items.value[groupIndex].id)
|
||||
// updateItemIconGroupByNet(groupIndex, items.value[groupIndex].id as number)
|
||||
// }
|
||||
}
|
||||
|
||||
function handleSetHoverStatus(hoverStatus: boolean) {
|
||||
monitorGroup.value.hoverStatus = hoverStatus
|
||||
}
|
||||
|
||||
const cardStyle: CardStyle = {
|
||||
background: '#2a2a2a6b',
|
||||
}
|
||||
@ -49,53 +83,39 @@ const monitorDatas = ref<MonitorData[]>([
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<!-- 分组标题 -->
|
||||
<div class="text-white text-xl font-extrabold mb-[20px] ml-[10px] flex items-center">
|
||||
<span class="text-shadow">
|
||||
系统状态
|
||||
</span>
|
||||
<!-- <div
|
||||
v-if="authStore.visitMode === VisitMode.VISIT_MODE_LOGIN"
|
||||
class="ml-2 delay-100 transition-opacity flex"
|
||||
:class="itemGroup.hoverStatus ? 'opacity-100' : 'opacity-0'"
|
||||
>
|
||||
<span class="mr-2 cursor-pointer" title="添加快捷图标" @click="handleAddItem(itemGroup.id)">
|
||||
<SvgIcon class="text-white font-xl" icon="typcn:plus" />
|
||||
<div
|
||||
class="mt-[50px]"
|
||||
:class="monitorGroup.sortStatus ? 'shadow-2xl border shadow-[0_0_30px_10px_rgba(0,0,0,0.3)] p-[10px] rounded-2xl' : ''"
|
||||
@mouseenter="handleSetHoverStatus(true)"
|
||||
@mouseleave="handleSetHoverStatus(false)"
|
||||
>
|
||||
<!-- 分组标题 -->
|
||||
<div class="text-white text-xl font-extrabold mb-[20px] ml-[10px] flex items-center">
|
||||
<span class="text-shadow">
|
||||
系统状态
|
||||
</span>
|
||||
<span class="mr-2 cursor-pointer " title="排序组快捷图标" @click="handleSetSortStatus(itemGroupIndex, !itemGroup.sortStatus)">
|
||||
<SvgIcon class="text-white font-xl" icon="ri:drag-drop-line" />
|
||||
</span>
|
||||
</div> -->
|
||||
</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"
|
||||
class="icon-info-box"
|
||||
filter=".not-drag"
|
||||
>
|
||||
<div v-for="item, index in monitorDatas" :key="index" :title="item.description" @contextmenu="(e) => handleContextMenu(e, itemGroupIndex, item)">
|
||||
<AppIconSystemMonitor
|
||||
:extend-param="item.extendParam"
|
||||
:icon-text-icon-hide-title="false"
|
||||
:card-type-style="panelState.panelConfig.iconStyle"
|
||||
:monitor-type="item.monitorType"
|
||||
:card-style="cardStyle"
|
||||
:icon-text-color="panelState.panelConfig.iconTextColor"
|
||||
/>
|
||||
<div
|
||||
v-if="authStore.visitMode === VisitMode.VISIT_MODE_LOGIN"
|
||||
class="ml-2 delay-100 transition-opacity flex"
|
||||
:class="monitorGroup.hoverStatus ? 'opacity-100' : 'opacity-0'"
|
||||
>
|
||||
<span class="mr-2 cursor-pointer" title="添加快捷图标" @click="handleAddItem()">
|
||||
<SvgIcon class="text-white font-xl" icon="typcn:plus" />
|
||||
</span>
|
||||
<span class="mr-2 cursor-pointer " title="排序组快捷图标" @click="handleSetSortStatus(!monitorGroup.sortStatus)">
|
||||
<SvgIcon class="text-white font-xl" icon="ri:drag-drop-line" />
|
||||
</span>
|
||||
</div>
|
||||
</VueDraggable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- APP图标宫型盒子 -->
|
||||
<div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.icon">
|
||||
<div v-if="monitorDatas">
|
||||
<!-- 详情图标 -->
|
||||
<!-- <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"
|
||||
class="icon-small-box"
|
||||
class="icon-info-box"
|
||||
filter=".not-drag"
|
||||
:disabled="!monitorGroup.sortStatus"
|
||||
>
|
||||
<div v-for="item, index in monitorDatas" :key="index" :title="item.description" @contextmenu="(e) => handleContextMenu(e, itemGroupIndex, item)">
|
||||
<AppIconSystemMonitor
|
||||
@ -107,14 +127,36 @@ const monitorDatas = ref<MonitorData[]>([
|
||||
:icon-text-color="panelState.panelConfig.iconTextColor"
|
||||
/>
|
||||
</div>
|
||||
</vuedraggable>
|
||||
</VueDraggable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 编辑栏 -->
|
||||
<!-- <div v-if="itemGroup.sortStatus" class="flex mt-[10px]">
|
||||
<!-- APP图标宫型盒子 -->
|
||||
<div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.icon">
|
||||
<div v-if="monitorDatas">
|
||||
<VueDraggable
|
||||
v-model="monitorDatas" item-key="sort" :animation="300"
|
||||
class="icon-small-box"
|
||||
filter=".not-drag"
|
||||
:disabled="!monitorGroup.sortStatus"
|
||||
>
|
||||
<div v-for="item, index in monitorDatas" :key="index" :title="item.description" @contextmenu="(e) => handleContextMenu(e, itemGroupIndex, item)">
|
||||
<AppIconSystemMonitor
|
||||
:extend-param="item.extendParam"
|
||||
:icon-text-icon-hide-title="false"
|
||||
:card-type-style="panelState.panelConfig.iconStyle"
|
||||
:monitor-type="item.monitorType"
|
||||
:card-style="cardStyle"
|
||||
:icon-text-color="panelState.panelConfig.iconTextColor"
|
||||
/>
|
||||
</div>
|
||||
</vuedraggable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 编辑栏 -->
|
||||
<div v-if="monitorGroup.sortStatus" class="flex mt-[10px]">
|
||||
<div>
|
||||
<NButton color="#2a2a2a6b" @click="handleSaveSort(itemGroup)">
|
||||
<NButton color="#2a2a2a6b" @click="handleSaveSort(monitorGroup)">
|
||||
<template #icon>
|
||||
<SvgIcon class="text-white font-xl" icon="material-symbols:save" />
|
||||
</template>
|
||||
@ -123,7 +165,10 @@ const monitorDatas = ref<MonitorData[]>([
|
||||
</div>
|
||||
</NButton>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Edit v-model:visible="EditShowStatus" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -20,3 +20,10 @@ export interface ProgressStyle {
|
||||
railColor: string
|
||||
height: number
|
||||
}
|
||||
|
||||
export interface GenericProgressStyleExtendParam {
|
||||
progressColor: string
|
||||
progressRailColor: string
|
||||
color: string
|
||||
backgroundColor: string
|
||||
}
|
||||
|
||||
0
src/views/exception/test/zujian.vue
Normal file
0
src/views/exception/test/zujian.vue
Normal file
@ -41,6 +41,7 @@ const itemIconInfo = computed({
|
||||
return v
|
||||
},
|
||||
set() {
|
||||
console.log('aaaa')
|
||||
handleChange()
|
||||
},
|
||||
})
|
||||
@ -52,6 +53,7 @@ function handleIconTypeRadioChange(type: number) {
|
||||
}
|
||||
|
||||
function handleChange() {
|
||||
console.log('21222')
|
||||
emit('update:itemIcon', itemIconInfo.value || null)
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user