141 lines
2.8 KiB
Vue
Executable File
141 lines
2.8 KiB
Vue
Executable File
<script lang="ts" setup>
|
|
import {charts} from "~/config/charts";
|
|
import type {PropType} from "vue";
|
|
import type {serverValueItem} from "~/components/SettingCard.vue";
|
|
import {useMainLayoutStore} from "~/strores/UseMainLayoutStore";
|
|
|
|
|
|
const mainLayoutStore = useMainLayoutStore()
|
|
const visible = ref(false)
|
|
const cardRef = ref(null)
|
|
const {width} = useElementBounding(cardRef)
|
|
const rangeNum = ref(6)
|
|
const targetIsVisible = useElementVisibility(cardRef)
|
|
const isSwitched = ref(false)
|
|
const props = defineProps({
|
|
id: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
title: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
chart: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
values: {
|
|
type: Array as PropType<serverValueItem[]>,
|
|
required: true
|
|
},
|
|
isDraggable: {
|
|
type: Boolean,
|
|
required: false
|
|
}
|
|
})
|
|
|
|
watch(() => mainLayoutStore.SelectServer.value, () => {
|
|
isSwitched.value = true
|
|
setTimeout(() => {
|
|
isSwitched.value = false
|
|
})
|
|
})
|
|
watchDebounced(
|
|
width,
|
|
() => {
|
|
//更新图表过滤
|
|
rangeNum.value = Math.floor(width.value / 40)
|
|
//最大12
|
|
rangeNum.value = rangeNum.value > 24 ? 24 : rangeNum.value
|
|
},
|
|
{debounce: 500, maxWait: 1000},
|
|
)
|
|
// watchDebounced(
|
|
// ()=>useColorMode().value,
|
|
//
|
|
// {debounce: 500, maxWait: 1000}
|
|
// )
|
|
watch(()=>useColorMode().value,()=>{
|
|
isSwitched.value = true
|
|
setTimeout(() => {
|
|
isSwitched.value = false
|
|
})
|
|
})
|
|
const valueIds = computed(() => props.values.map(x => x.dataType))
|
|
const valueNames = computed(() => props.values.map(x => x.dataName))
|
|
const items = [
|
|
{
|
|
label: '全屏查看',
|
|
command: () => {
|
|
|
|
}
|
|
}, {
|
|
label: '刷新',
|
|
command: () => {
|
|
}
|
|
}, {
|
|
label: '弹出',
|
|
command: () => {
|
|
}
|
|
}, {
|
|
label: '删除',
|
|
command: () => {
|
|
mainLayoutStore.deleteLayout(props.id)
|
|
}
|
|
}, {
|
|
label: '设置',
|
|
command: () => {
|
|
visible.value = true
|
|
}
|
|
}
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<div :id="`card_${id}`" ref="cardRef" class="card-layout ">
|
|
<div :id="'item' + id" class="card-title vue-draggable-handle">
|
|
<h3>{{ title ?? "默认标题" }}</h3>
|
|
</div>
|
|
<div class="card-content">
|
|
<component :is="charts.find(x => x.id === chart)?.component" v-if="targetIsVisible&&!isSwitched"
|
|
:rangeNum="rangeNum"
|
|
:valueIds="valueIds"
|
|
:valueNames="valueNames"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "base";
|
|
|
|
.card-layout {
|
|
height: 100%;
|
|
width: 100%;
|
|
background: $light-bg-color;
|
|
display: grid;
|
|
grid-template-rows: 40px 1fr;
|
|
|
|
.dark-mode & {
|
|
background: $dark-bg-color;
|
|
}
|
|
}
|
|
|
|
.card-title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 20px;
|
|
|
|
h3 {
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
text-align: left;
|
|
color: #333;
|
|
}
|
|
}
|
|
.card-content{
|
|
padding: 0 20px 20px;
|
|
}
|
|
</style>
|