首页上传

src/api/home.js

+import request from '@/utils/request'
+
+/**
+ * 获取数据信息
+ * @param {*} data 
+ * @returns 
+ */
+export function getHomePage(data) {
+  return request({
+    url: '/core/datasystem/getHomePage',
+    method: 'post',
+    data: data
+  })
+}
\ No newline at end of file

src/components/HomeCharts/index.vue

@@ -4,15 +4,6 @@ import * as echarts from "echarts";
 
 const homeChartData: any = inject("homeChartData");
 const barChart = ref();
-const colorList =[
-            "#9c27b0",
-            "#00bcd4",
-            "#ff7800",
-            "#2598f3",
-            "#53b257",
-            "#2598f3",
-            "#9c27b0",
-          ]
 
 let myChart;
 watch(
@@ -77,7 +68,7 @@ watch(
               itemStyle: {
                 normal: {
                   color: (params) => {
-                    return colorList[params.dataIndex]
+                    return generateRandomColors();
                   },
                 },
               },
@@ -103,6 +94,14 @@ watch(
   { deep: true, immediate: true }
 );
 
+const generateRandomColors = () => {
+  const hue = Math.floor(Math.random() * 360);
+    const saturation = Math.floor(Math.random() * 30) + 70;
+    const lightness = Math.floor(Math.random() * 20) + 40;
+    const color = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+    return color;
+}
+
 onMounted(() => {
   myChart = echarts.init(barChart.value);
 });

src/views/index.vue

@@ -3,51 +3,80 @@ import { onMounted, ref, reactive } from 'vue'
 import { CountUp } from 'view-ui-plus';
 import img from '@/assets/images/index/index.js'
 import HomeCharts from '@/components/HomeCharts/index.vue'
+import { getHomePage } from '@/api/home'
 
 const topList = ref([
   {
     name: '应用',
     icon: img.icon1,
-    num: 1,
+    num: 0,
     unit: '个'
   },
   {
     name: '数据源',
     icon: img.icon2,
-    num: 4,
+    num: 0,
     unit: '个'
   },
   {
     name: '表',
     icon: img.icon3,
-    num: 680,
+    num: 0,
     unit: '个'
   },
   {
     name: '字段',
     icon: img.icon4,
-    num: 8090,
+    num: 0,
     unit: '个'
   },
   {
     name: '加密表数量',
     icon: img.icon5,
-    num: 1,
+    num: 0,
     unit: '个'
   },
   {
     name: '加密字段数量',
     icon: img.icon6,
-    num: 1,
+    num: 0,
     unit: '个'
   }
 ])
+const dataObj = ref({
+  cpuCount: 0,
+  percentCpuLoad: 0,
+  totalvirtualMemory: 0,
+  percentMemoryLoad: 0,
+})
 const homeChartData = reactive({
-  xList: ['/run/user/0','/boot/efi','/boot','/run/lock','/dev/shm','/','/run'],
-  yList1: [4,0.01,0.25,0.00,0.00,14.00,0.00],
-  yList2: [1.6,1.10,1.5,0.00,,7.9,97.00,1.60],
+  xList: [],
+  yList1: [],
+  yList2: [],
 })
 provide('homeChartData', homeChartData)
+
+const getHomePageFunc = () => {
+  getHomePage({}).then(res => {
+    const { data } = res
+    dataObj.value = data
+    topList.value[0].num = data.projectNum
+    topList.value[1].num = data.dataBaseNum
+    topList.value[2].num = data.tableNum
+    topList.value[3].num = data.fieldNum
+    topList.value[4].num = data.encryptTableCount
+    topList.value[5].num = data.encryptColumnCount
+    console.log(dataObj.value)
+
+    homeChartData.xList = data.space.map(item => item.path)
+    homeChartData.yList1 = data.space.map(item => item.usedpace)
+    homeChartData.yList2 = data.space.map(item => item.freespace)
+  })
+}
+
+onMounted(() => {
+  getHomePageFunc()
+})
 </script>
 
 <template>
@@ -59,7 +88,9 @@ provide('homeChartData', homeChartData)
           <img class="icon" :src="item.icon" alt="">
           <div class="name">{{ item.name }}</div>
           <div class="num">
-            <div><CountUp :end="item.num" :duration="3" /></div>
+            <div>
+              <CountUp :end="item.num" :duration="3" />
+            </div>
             <div class="unit">{{ item.unit }}</div>
           </div>
         </div>
@@ -67,17 +98,21 @@ provide('homeChartData', homeChartData)
     </el-card>
     <el-card class="box-card mt20" :body-style="{ padding: '0' }">
       <div class="title">系统资源</div>
-      <div class="bottom">
+      <div class="bottom" v-if="dataObj">
         <div class="bottomItem">
           <img class="icon" :src="img.img1" alt="">
           <div class="name name1">
-            <div><CountUp :end="8" :duration="2" /></div>
+            <div>
+              <CountUp :end="dataObj.cpuCount" :duration="2" />
+            </div>
             <div class="unit">核</div>
           </div>
           <div class="type">CPU</div>
-          <el-progress type="circle" width="140" :indeterminate="true" :percentage="25">
+          <el-progress type="circle" width="140" :indeterminate="true" :percentage="dataObj.percentCpuLoad">
             <div class="circle">
-              <span class="name1"><CountUp :end="1" :duration="3" />%</span>
+              <span class="name1">
+                <CountUp :end="dataObj.percentCpuLoad" :duration="3" />%
+              </span>
               <div>使用率</div>
             </div>
           </el-progress>
@@ -86,13 +121,17 @@ provide('homeChartData', homeChartData)
         <div class="bottomItem">
           <img class="icon" :src="img.img2" alt="">
           <div class="name name2">
-            <div><CountUp :end="16" :duration="2" /></div>
+            <div>
+              <CountUp :end="dataObj.totalvirtualMemory" :duration="2" />
+            </div>
             <div class="unit">G</div>
           </div>
           <div class="type">内存</div>
-          <el-progress type="circle" width="140" color="rgb(250, 114, 86)" :indeterminate="true" :percentage="25">
+          <el-progress type="circle" width="140" color="rgb(250, 114, 86)" :indeterminate="true" :percentage="dataObj.percentMemoryLoad">
             <div class="circle">
-              <span class="name2"><CountUp :end="95" :duration="3" />%</span>
+              <span class="name2">
+                <CountUp :end="dataObj.percentMemoryLoad" :duration="3" />%
+              </span>
               <div>使用率</div>
             </div>
           </el-progress>
@@ -117,89 +156,89 @@ provide('homeChartData', homeChartData)
     color: #333;
     font-weight: 700;
   }
-  .top{
+  .top {
     display: flex;
     justify-content: space-around;
     padding: 40px 20px;
     align-items: center;
     height: calc(400px - 120px - 25px);
-    .topItem{
+    .topItem {
       width: calc(100% / 6);
       display: flex;
       flex-direction: column;
       align-items: center;
-      .icon{
+      .icon {
         width: 90px;
         height: 90px;
       }
-      .name{
+      .name {
         margin-top: -10px;
         margin-bottom: 5px;
         font-size: 12px;
         color: #7a8495;
         text-align: center;
       }
-      .num{
+      .num {
         display: flex;
         align-items: center;
         font-size: 18px;
         color: #666;
-        .unit{
+        .unit {
           margin-left: 5px;
           font-size: calc(0.46875vw);
         }
       }
     }
   }
-  .bottom{
+  .bottom {
     display: flex;
     align-items: center;
     padding: 20px;
     height: 304px;
-    .bottomItem{
+    .bottomItem {
       width: calc(((100% - 2px) / 3) - 50px);
       height: 100%;
       display: flex;
       flex-direction: column;
       align-items: center;
-      .name{
+      .name {
         display: flex;
         align-items: center;
         font-size: 30px;
-        .unit{
+        .unit {
           margin-top: 5px;
           margin-left: 3px;
           font-weight: bold;
           font-size: 18px;
         }
       }
-      .name1{
+      .name1 {
         color: rgb(31, 133, 223);
       }
-      .name2{
+      .name2 {
         color: rgb(250, 114, 86);
       }
-      .type{
+      .type {
         font-size: 16px;
         padding-bottom: 15px;
         color: #7a8495;
       }
-      .circle{
-        span{
+      .circle {
+        span {
           font-size: 16px;
           font-weight: bold;
         }
-        div{
+        div {
           line-height: 20px;
           font-size: 14px;
         }
       }
     }
-    .bottomItem:last-child{
+    .bottomItem:last-child {
       padding: 0 50px;
       width: calc(((100% - 2px) / 3) + 100px);
     }
-    .line{
+    .line {
       background: #dfe1e3;
       height: 150px;
       width: 1px;