From b9669fd4b22ca2ef7485884fcdc5be1e61d438c4 Mon Sep 17 00:00:00 2001
From: Gzx1999 <guozhengxin@kylinos.cn>
Date: Wed, 22 Nov 2023 15:29:19 +0800
Subject: [PATCH] request and display department machines graph

---
 frontend/src/request/overview.ts              |  8 +++++
 .../views/Overview/components/DepartChart.vue | 33 ++++++++++++++++---
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/frontend/src/request/overview.ts b/frontend/src/request/overview.ts
index d0eb9e2..aea121e 100644
--- a/frontend/src/request/overview.ts
+++ b/frontend/src/request/overview.ts
@@ -6,4 +6,12 @@ export function machinesOverview() {
     url: '/overview/info',
     method: 'get',
   });
+}
+
+// 获取各个部门机器集群概览信息
+export function departMachinesOverview() {
+  return request({
+    url: '/overview/depart_info',
+    method: 'get',
+  });
 }
\ No newline at end of file
diff --git a/frontend/src/views/Overview/components/DepartChart.vue b/frontend/src/views/Overview/components/DepartChart.vue
index dace899..8f2bb94 100644
--- a/frontend/src/views/Overview/components/DepartChart.vue
+++ b/frontend/src/views/Overview/components/DepartChart.vue
@@ -6,6 +6,10 @@
 <script lang="ts" setup>
 import { ref, onMounted } from "vue";
 import * as echarts from "echarts";
+import { ElMessage } from 'element-plus';
+
+import { departMachinesOverview } from "@/request/overview";
+import { RespCodeOK } from "@/request/request";
 
 const chart = ref<any>();
 const option = ref({
@@ -22,7 +26,7 @@ const option = ref({
     },
     xAxis: {
         type: 'category',
-        data: [],
+        data: [] as string[],
     },
     yAxis: {
         type: 'value'
@@ -35,7 +39,7 @@ const option = ref({
     series: [
         {
             name: '在线',
-            data: [],
+            data: [] as number[],
             type: 'bar',
             itemStyle: {
                 color: 'rgb(92, 123, 217)',
@@ -48,7 +52,7 @@ const option = ref({
         },
         {
             name: '离线',
-            data: [],
+            data: [] as number[],
             type: 'bar',
             itemStyle: {
                 color: 'rgb(202, 205, 210)',
@@ -61,7 +65,7 @@ const option = ref({
         },
         {
             name: '未分配',
-            data: [],
+            data: [] as number[],
             type: 'bar',
             itemStyle: {
                 color: 'rgb(253, 190, 0)',
@@ -77,7 +81,26 @@ const option = ref({
 
 onMounted(() => {
     chart.value = echarts.init(document.getElementById("department-chart"))
-    chart.value.setOption(option.value)
+
+    departMachinesOverview().then((resp: any) => {
+        if (resp.code === RespCodeOK) {
+            // overview.value = resp.data.data.AgentStatus
+            console.log("resp", resp)
+            let data = resp.data.data
+            data.forEach((item: any) => {
+                option.value.xAxis.data.push(item.depart);
+                option.value.series[0].data.push(item.AgentStatus.normal);
+                option.value.series[1].data.push(item.AgentStatus.offline);
+                option.value.series[2].data.push(item.AgentStatus.free);
+            });
+
+            chart.value.setOption(option.value)
+        } else {
+            ElMessage.error("failed to get department machines overview info: " + resp.msg)
+        }
+    }).catch((err: any) => {
+        ElMessage.error("failed to get department machines overview info:" + err.msg)
+    })
 })
 
 </script>
-- 
Gitee