From 019b5016872f53c85b944fba97c69dbab3bbd2b6 Mon Sep 17 00:00:00 2001
From: haha <lj7788@126.com>
Date: Sat, 25 May 2024 00:35:22 +0800
Subject: [PATCH] update code

---
 .../dashboard/components/ServiceStatus.vue    | 212 ++++++++++++++++++
 src/views/dashboard/index.vue                 |   5 +-
 2 files changed, 216 insertions(+), 1 deletion(-)
 create mode 100644 src/views/dashboard/components/ServiceStatus.vue

diff --git a/src/views/dashboard/components/ServiceStatus.vue b/src/views/dashboard/components/ServiceStatus.vue
new file mode 100644
index 0000000..afb0ad2
--- /dev/null
+++ b/src/views/dashboard/components/ServiceStatus.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 60fee12..385515c 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -100,7 +100,8 @@
         <div class="row2-top">
           <div style="color:#333;font-weight: bold;font-size:15px;">服务器运行状态</div>        
         </div>
-      </template>    
+      </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" },