update code
parent
3ba667188e
commit
019b501687
|
|
@ -0,0 +1,212 @@
|
|||
<template>
|
||||
<div class="service-status">
|
||||
<div class="sv-chart">
|
||||
<div :id="id" :class="className" :style="{ height, width }">
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-title">内核温度</div>
|
||||
<div class="chart-bars">
|
||||
<div class="chart-bar">
|
||||
<div class="bar-title">内存</div>
|
||||
<div class="chart-line">
|
||||
<div class="chart-line-inner" style="width:75%"></div>
|
||||
</div>
|
||||
<div class="bar-title">75%</div>
|
||||
</div>
|
||||
<div class="chart-bar">
|
||||
<div class="bar-title">CPU</div>
|
||||
<div class="chart-line">
|
||||
<div class="chart-line-inner" style="width:45%"></div>
|
||||
</div>
|
||||
<div class="bar-title">45%</div>
|
||||
</div>
|
||||
<div class="chart-bar">
|
||||
<div class="bar-title">硬盘</div>
|
||||
<div class="chart-line">
|
||||
<div class="chart-line-inner" style="width:65%"></div>
|
||||
</div>
|
||||
<div class="bar-title">65%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import * as echarts from "echarts";
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
default: "serviceStatus",
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: "200px",
|
||||
required: true,
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: "200px",
|
||||
required: true,
|
||||
},
|
||||
val: {
|
||||
type: Number,
|
||||
default: 77.5,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const options = {
|
||||
grid: {
|
||||
left: "20%",
|
||||
right: "20%",
|
||||
bottom: "20%",
|
||||
top: "20%",
|
||||
containLabel: true,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: 200,
|
||||
endAngle: -20,
|
||||
min: 0,
|
||||
max: 150,
|
||||
splitNumber: 15,
|
||||
itemStyle: {
|
||||
color: '#409eff',
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
width: 10
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 10
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
distance: -14,
|
||||
splitNumber: 2,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#409eff'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
distance: -20,
|
||||
length: 14,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#409eff'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
distance: -18,
|
||||
color: '#409eff',
|
||||
fontSize: 10
|
||||
},
|
||||
anchor: {
|
||||
show: false
|
||||
},
|
||||
title: {
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
width: '60%',
|
||||
lineHeight: 20,
|
||||
borderRadius: 8,
|
||||
offsetCenter: [0, '10%'],
|
||||
fontSize: 20,
|
||||
fontWeight: 'bolder',
|
||||
formatter: '{value} °C',
|
||||
color: '#409eff'
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: props.val
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const chart = ref<any>("");
|
||||
onMounted(() => {
|
||||
// 图表初始化
|
||||
chart.value = markRaw(
|
||||
echarts.init(document.getElementById(props.id) as HTMLDivElement)
|
||||
);
|
||||
|
||||
chart.value.setOption(options);
|
||||
|
||||
// 大小自适应
|
||||
window.addEventListener("resize", () => {
|
||||
chart.value.resize();
|
||||
});
|
||||
});
|
||||
|
||||
onActivated(() => {
|
||||
if (chart.value) {
|
||||
chart.value.resize();
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
<style scoped lang='scss'>
|
||||
.service-status {
|
||||
position: relative;
|
||||
|
||||
.sv-chart {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 130px;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.chart-bars {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
top:-30px;
|
||||
.chart-bar {
|
||||
display: flex;
|
||||
padding: 0px 15%;
|
||||
line-height: 30px;
|
||||
align-items: center;
|
||||
|
||||
.bar-title {
|
||||
font-size: 12px;
|
||||
margin: 0px 8px;
|
||||
}
|
||||
|
||||
.chart-line {
|
||||
height: 8px;
|
||||
background-color: #ccc;
|
||||
flex-grow: 1;
|
||||
border-radius: 4px;
|
||||
|
||||
.chart-line-inner {
|
||||
background-color: var(--el-color-primary);
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -101,6 +101,7 @@
|
|||
<div style="color:#333;font-weight: bold;font-size:15px;">服务器运行状态</div>
|
||||
</div>
|
||||
</template>
|
||||
<ServiceStatus :val="svTemp" width="200px" height="200px"></ServiceStatus>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -111,6 +112,8 @@
|
|||
import { reactive } from 'vue'
|
||||
import ModelFlow from './components/ModelFlow.vue'
|
||||
import IndexNotice from './components/IndexNotice.vue'
|
||||
import ServiceStatus from './components/ServiceStatus.vue'
|
||||
let svTemp=ref(55.5)
|
||||
let topInfos = reactive([
|
||||
{ title: '模型总数', count: 158, clsName: 'c1', icon: "images/nav/nav1.png" },
|
||||
{ title: '算子总数', count: 158, clsName: 'c1', icon: "images/nav/nav2.png" },
|
||||
|
|
|
|||
Loading…
Reference in New Issue