131 lines
3.8 KiB
Vue
Executable File
131 lines
3.8 KiB
Vue
Executable File
<script lang="ts" setup>
|
|
import {useDataStore} from "~/strores/DataStore";
|
|
import {useMainLayoutStore} from "~/strores/UseMainLayoutStore";
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: "CPU使用率",
|
|
},
|
|
info:{
|
|
type:Array,
|
|
default:()=>[],
|
|
},
|
|
unit: {
|
|
type: String,
|
|
default: "%"
|
|
},
|
|
watcher: {
|
|
type: [String, Array],
|
|
default: "cpuTotalUsage",
|
|
validator: (value) => {
|
|
return typeof value === 'string' || Array.isArray(value);
|
|
}
|
|
},
|
|
reverse: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
const values=ref<string[]>(Array( Array.isArray(props.watcher)?props.watcher.length:1).fill('0'))
|
|
const dataStore = useDataStore()
|
|
const mainStore = useMainLayoutStore()
|
|
const status=ref<string>("success")
|
|
//监听dataStore变更
|
|
dataStore.$subscribe((_, state) => {
|
|
//获得d3YT#cpuUserUsage的key的value
|
|
const watcher = Array.isArray(props.watcher) ? [...props.watcher] : [props.watcher];
|
|
// 使用map函数从state.data中取出每个watcherKey对应的值
|
|
values.value = watcher.map(watcherKey => state.data[watcherKey as string]);
|
|
//检测第一个值超过50则warning 超过80则error
|
|
const value=Number(values.value[0])
|
|
status.value = value > 80 ? "error" : value > 50 ? "warning" : "success";
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<n-popover trigger="hover" placement="bottom">
|
|
<template #trigger>
|
|
<div class="mini-card-box">
|
|
<!-- <svg fill="none" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">-->
|
|
<!-- <circle cx="36" cy="36" r="32" stroke="#E9ECEF" stroke-width="2"/>-->
|
|
<!-- <circle :id="title" :stroke-dasharray="circumference" cx="36"-->
|
|
<!-- cy="36" r="32" stroke="red"-->
|
|
<!-- stroke-linecap="round"-->
|
|
<!-- stroke-width="4" transform="rotate(-90, 36, 36)"/>-->
|
|
<!-- <path-->
|
|
<!-- :id="title+'Arrow'"-->
|
|
<!-- d="M26.1904 44.784C25.8209 45.1944 25.854 45.8267 26.2645 46.1963C26.6749 46.5658 27.3072 46.5327 27.6767 46.1223L26.1904 44.784ZM43.7763 27.8042C43.7474 27.2527 43.2768 26.829 42.7253 26.8579L33.7376 27.3289C33.1861 27.3578 32.7624 27.8284 32.7913 28.3799C32.8202 28.9314 33.2908 29.3551 33.8423 29.3262L41.8313 28.9075L42.25 36.8965C42.2789 37.4481 42.7495 37.8717 43.301 37.8428C43.8525 37.8139 44.2762 37.3434 44.2473 36.7919L43.7763 27.8042ZM27.6767 46.1223L43.5208 28.5257L42.0345 27.1874L26.1904 44.784L27.6767 46.1223Z"-->
|
|
<!-- fill="#ADB5BD"/>-->
|
|
<!-- </svg>-->
|
|
<n-progress type="dashboard" processing gap-position="bottom" :status="status" :percentage="
|
|
values[0]
|
|
" style="width: 4.427vw; max-width:120px;min-width: 80px" />
|
|
<div class="text">
|
|
<h3>
|
|
{{ title }}
|
|
</h3>
|
|
<h2>
|
|
<span>{{ Number(values[0]??0).toFixed(2)}}{{ unit }}</span>
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<n-tag type="info" v-for="i in info">
|
|
{{ i }}
|
|
</n-tag>
|
|
</n-popover>
|
|
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "../../base";
|
|
|
|
.mini-card-box {
|
|
display: flex;
|
|
align-items: center;
|
|
background: $light-bg-color;
|
|
padding: $padding*1.5;
|
|
border-radius: $radius;
|
|
box-shadow: 0 10px 30px 0 rgba(17, 38, 146, 0.05);
|
|
gap: $gap*3;
|
|
border: $border;
|
|
*{
|
|
@include SC_Font()
|
|
}
|
|
> svg {
|
|
width: 68px;
|
|
height: 68px;
|
|
}
|
|
|
|
.dark-mode & {
|
|
background: $dark-bg-color;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $gap;
|
|
|
|
h2, h3 {
|
|
color: $light-unfocused-color;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: 175%; /* 28px */
|
|
//不允许换行
|
|
text-wrap: nowrap;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 25px;
|
|
font-weight: 800;
|
|
color: $light-text-color;
|
|
.dark-mode & {
|
|
color: $dark-text-color;
|
|
}
|
|
}
|
|
}
|
|
</style> |