From ed836f76d06785c6eca294c7d4e083fd318a3a67 Mon Sep 17 00:00:00 2001
From: xuyiming <xuyiming@bd-apaas.com>
Date: Sat, 4 Jul 2020 18:53:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E7=AE=A1=E7=90=86-=E7=BB=84?=
 =?UTF-8?q?=E7=BB=87=E7=AE=A1=E7=90=86=E5=91=98-=E4=BA=91=E8=B5=84?=
 =?UTF-8?q?=E6=BA=90=E7=AE=A1=E7=90=86=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/apass-list.vue         |   9 +-
 src/components/image-detail.vue       | 315 ++++----------------
 src/pages/workbench/app_build.vue     |   6 +-
 src/pages/workbench/fwgl/fwglList.vue | 399 ++++++++++++++++++++------
 4 files changed, 369 insertions(+), 360 deletions(-)

diff --git a/src/components/apass-list.vue b/src/components/apass-list.vue
index d511ced..0f5fd94 100644
--- a/src/components/apass-list.vue
+++ b/src/components/apass-list.vue
@@ -3,9 +3,12 @@
     <div class="apass_breadcrumb">
       <slot name="breadcrumb"></slot>
     </div>
-    <div class="main-container">
+
+    <div class="main-container top_container" v-if="$slots.top">
       <slot name="top"></slot>
+    </div>
 
+    <div class="main-container">
       <div class="header-container" v-if="!hideHeader">
         <div class="header-left apass_button">
           <el-button
@@ -257,4 +260,8 @@ export default {
 .list-container {
   flex-grow: 1;
 }
+.top_container {
+  flex-grow: 0;
+  margin-bottom: 20px;
+}
 </style>
diff --git a/src/components/image-detail.vue b/src/components/image-detail.vue
index 9d3e812..c8008c2 100644
--- a/src/components/image-detail.vue
+++ b/src/components/image-detail.vue
@@ -10,14 +10,14 @@
                 {{ scope.row.name }}
               </template>
             </el-table-column>
-            <el-table-column label="作者" align="left">
+            <el-table-column label="作者" width="200" align="left">
               <template slot-scope="scope">
-                {{ scope.row.creator }}
+                {{ scope.row.author }}
               </template>
             </el-table-column>
             <el-table-column label="创建时间" width="180" align="center">
               <template slot-scope="scope">
-                {{ scope.row.created }}
+                {{ dateTransform(scope.row.created) }}
               </template>
             </el-table-column>
             <el-table-column label="大小" align="center">
@@ -27,7 +27,10 @@
             </el-table-column>
             <el-table-column label="漏洞" width="160" align="center">
               <template slot-scope="scope">
-                <image-bugs :data="scope.row.scan_overview"></image-bugs>
+                <image-bugs
+                  v-if="scope.row.scan_overview"
+                  :data="scope.row.scan_overview"
+                ></image-bugs>
               </template>
             </el-table-column>
             <el-table-column label="操作" width="160" align="center">
@@ -54,6 +57,7 @@
 </template>
 
 <script>
+import helper from "@/services/helper";
 import apassDialog from "./apass-dialog";
 import imageBugs from "./image-bugs";
 
@@ -62,260 +66,14 @@ export default {
     apassDialog,
     imageBugs,
   },
-  props: {
-    image: {
-      type: Object,
-      default: () => null,
-    },
-  },
   data: () => ({
-    imageData: [
-      {
-        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
-        scan_overview: {
-          components: {
-            summary: [
-              { count: 2, severity: 2 },
-              { count: 25, severity: 1 },
-            ],
-            total: 27,
-            severity_count: 2,
-          },
-          severity: 5,
-          creation_time: "2020-05-27T10:17:40.671664Z",
-          update_time: "2020-07-02T22:39:27.97828Z",
-        },
-        size: 20950567,
-        name: "1.0",
-        creator: "RamHsu",
-        created: "1994-03-26 11:10:00",
-      },
-      {
-        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
-        scan_overview: {
-          components: {
-            summary: [
-              { count: 2, severity: 2 },
-              { count: 25, severity: 1 },
-            ],
-            total: 27,
-            severity_count: 2,
-          },
-          severity: 4,
-          creation_time: "2020-05-27T10:17:40.671664Z",
-          update_time: "2020-07-02T22:39:27.97828Z",
-        },
-        size: 20950567,
-        name: "1.0",
-        creator: "RamHsu",
-        created: "1994-03-26 11:10:00",
-      },
-      {
-        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
-        scan_overview: {
-          components: {
-            summary: [
-              { count: 2, severity: 2 },
-              { count: 25, severity: 1 },
-            ],
-            total: 27,
-            severity_count: 2,
-          },
-          severity: 3,
-          creation_time: "2020-05-27T10:17:40.671664Z",
-          update_time: "2020-07-02T22:39:27.97828Z",
-        },
-        size: 20950567,
-        name: "1.0",
-        creator: "RamHsu",
-        created: "1994-03-26 11:10:00",
-      },
-      {
-        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
-        scan_overview: {
-          components: {
-            summary: [
-              { count: 2, severity: 2 },
-              { count: 25, severity: 1 },
-            ],
-            total: 27,
-            severity_count: 2,
-          },
-          severity: 2,
-          creation_time: "2020-05-27T10:17:40.671664Z",
-          update_time: "2020-07-02T22:39:27.97828Z",
-        },
-        size: 20950567,
-        name: "1.0",
-        creator: "RamHsu",
-        created: "1994-03-26 11:10:00",
-      },
-      {
-        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
-        scan_overview: {
-          components: {
-            summary: [
-              { count: 2, severity: 2 },
-              { count: 25, severity: 1 },
-            ],
-            total: 27,
-            severity_count: 4,
-          },
-          severity: 1,
-          creation_time: "2020-05-27T10:17:40.671664Z",
-          update_time: "2020-07-02T22:39:27.97828Z",
-        },
-        size: 20950567,
-        name: "1.0",
-        creator: "RamHsu",
-        created: "1994-03-26 11:10:00",
-      },
-      {
-        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
-        scan_overview: {
-          components: {
-            summary: [
-              { count: 2, severity: 2 },
-              { count: 25, severity: 1 },
-            ],
-            total: 27,
-            severity_count: 2,
-          },
-          severity: 2,
-          creation_time: "2020-05-27T10:17:40.671664Z",
-          update_time: "2020-07-02T22:39:27.97828Z",
-        },
-        size: 20950567,
-        name: "1.0",
-        creator: "RamHsu",
-        created: "1994-03-26 11:10:00",
-      },
-      {
-        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
-        scan_overview: {
-          components: {
-            summary: [
-              { count: 2, severity: 2 },
-              { count: 25, severity: 1 },
-            ],
-            total: 27,
-            severity_count: 2,
-          },
-          severity: 2,
-          creation_time: "2020-05-27T10:17:40.671664Z",
-          update_time: "2020-07-02T22:39:27.97828Z",
-        },
-        size: 20950567,
-        name: "1.0",
-        creator: "RamHsu",
-        created: "1994-03-26 11:10:00",
-      },
-      {
-        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
-        scan_overview: {
-          components: {
-            summary: [
-              { count: 2, severity: 2 },
-              { count: 25, severity: 1 },
-            ],
-            total: 27,
-            severity_count: 2,
-          },
-          severity: 2,
-          creation_time: "2020-05-27T10:17:40.671664Z",
-          update_time: "2020-07-02T22:39:27.97828Z",
-        },
-        size: 20950567,
-        name: "1.0",
-        creator: "RamHsu",
-        created: "1994-03-26 11:10:00",
-      },
-      {
-        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
-        scan_overview: {
-          components: {
-            summary: [
-              { count: 2, severity: 2 },
-              { count: 25, severity: 1 },
-            ],
-            total: 27,
-            severity_count: 2,
-          },
-          severity: 2,
-          creation_time: "2020-05-27T10:17:40.671664Z",
-          update_time: "2020-07-02T22:39:27.97828Z",
-        },
-        size: 20950567,
-        name: "1.0",
-        creator: "RamHsu",
-        created: "1994-03-26 11:10:00",
-      },
-      {
-        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
-        scan_overview: {
-          components: {
-            summary: [
-              { count: 2, severity: 2 },
-              { count: 25, severity: 1 },
-            ],
-            total: 27,
-            severity_count: 2,
-          },
-          severity: 2,
-          creation_time: "2020-05-27T10:17:40.671664Z",
-          update_time: "2020-07-02T22:39:27.97828Z",
-        },
-        size: 20950567,
-        name: "1.0",
-        creator: "RamHsu",
-        created: "1994-03-26 11:10:00",
-      },
-      {
-        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
-        scan_overview: {
-          components: {
-            summary: [
-              { count: 2, severity: 2 },
-              { count: 25, severity: 1 },
-            ],
-            total: 27,
-            severity_count: 2,
-          },
-          severity: 2,
-          creation_time: "2020-05-27T10:17:40.671664Z",
-          update_time: "2020-07-02T22:39:27.97828Z",
-        },
-        size: 20950567,
-        name: "1.0",
-        creator: "RamHsu",
-        created: "1994-03-26 11:10:00",
-      },
-      {
-        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
-        scan_overview: {
-          components: {
-            summary: [
-              { count: 2, severity: 2 },
-              { count: 25, severity: 1 },
-            ],
-            total: 27,
-            severity_count: 2,
-          },
-          severity: 2,
-          creation_time: "2020-05-27T10:17:40.671664Z",
-          update_time: "2020-07-02T22:39:27.97828Z",
-        },
-        size: 20950567,
-        name: "1.0",
-        creator: "RamHsu",
-        created: "1994-03-26 11:10:00",
-      },
-    ],
+    imageData: [],
     dialogInfo: {
       title: "",
       msg: "",
       submit: null,
     },
+    image: null,
   }),
   computed: {
     title() {
@@ -323,23 +81,47 @@ export default {
     },
   },
   methods: {
-    showDialog() {
+    showDialog(image) {
+      this.image = image;
+      this.imageData = [];
+      this.getImageDetail();
       this.$refs.listdialog.show();
     },
     downloadAction(item) {
-      console.log("download " + item.name);
+      let evtUuid = Math.random()
+        .toString(16)
+        .substr(3);
+      let evtSource = new EventSource(
+        `/apaas/hubApi/image/subscribe/${evtUuid}`
+      );
+
+      evtSource.addEventListener("message", (event) => {
+        console.log(event);
+      });
+
+      const a = document.createElement("a");
+      a.setAttribute("download", "");
+      a.setAttribute(
+        "href",
+        `/apaas/hubApi/image/download/publish/${evtUuid}?image=${this.image.name}&tag=${item.name}&packageType=tar`
+      );
+      a.click();
     },
     deleteAction(item) {
       this.dialogInfo.title = "";
       this.dialogInfo.msg = "是否删除该镜像？";
       this.dialogInfo.submit = () => {
-        console.log("delete " + item.name);
-
-        /* this.$http
-          .delete(`/apaas/hubApi/image/del/${item.name}`)
+        this.$http
+          .delete(
+            `/apaas/hubApi/image/image/${this.image.name}/tags/${item.name}`
+          )
           .then((response) => {
             if (response.data.success == 1) {
-              //
+              this.$message({
+                message: `删除成功`,
+                type: "success",
+              });
+              this.getImageDetail();
             } else {
               this.$message({
                 message: `删除失败`,
@@ -353,13 +135,26 @@ export default {
               message: `删除失败`,
               type: "warning",
             });
-          }); */
+          });
       };
       this.$refs.actiondialog.show();
     },
     getSize(value = 0) {
       return (value / 1024 / 1024).toFixed(2) + "MB";
     },
+    dateTransform(datestr) {
+      return helper.dateStringTransform(datestr);
+    },
+    getImageDetail() {
+      this.$http
+        .get(`/apaas/hubApi/image/imageDetails/${this.image.name}`)
+        .then(({ data }) => {
+          this.imageData = data.data || [];
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
   },
 };
 </script>
diff --git a/src/pages/workbench/app_build.vue b/src/pages/workbench/app_build.vue
index 911ebf5..7bc438d 100644
--- a/src/pages/workbench/app_build.vue
+++ b/src/pages/workbench/app_build.vue
@@ -94,7 +94,7 @@
             下一步
           </el-button>
         </div>
-        <image-detail ref="imageDetail" :image="selectedImage"></image-detail>
+        <image-detail ref="imageDetail"></image-detail>
       </app-build-step>
       <app-build-step
         title="上传部署文件"
@@ -360,7 +360,6 @@ export default {
       msg: "",
       submit: null,
     },
-    selectedImage: null,
   }),
   methods: {
     preStep() {
@@ -575,8 +574,7 @@ export default {
       }
     },
     showImageDetail(item) {
-      this.selectedImage = item;
-      this.$refs.imageDetail.showDialog();
+      this.$refs.imageDetail.showDialog(item);
     },
   },
   mounted() {
diff --git a/src/pages/workbench/fwgl/fwglList.vue b/src/pages/workbench/fwgl/fwglList.vue
index 71a18b1..779c104 100644
--- a/src/pages/workbench/fwgl/fwglList.vue
+++ b/src/pages/workbench/fwgl/fwglList.vue
@@ -18,11 +18,11 @@
 
       <template slot="top">
         <div class="cloud_info" v-if="cloud_zuzhi">
-          <div class="info_container">
-            <p v-text="cloud_zuzhi.org_name"></p>
-            <p
-              v-text="'在用工作区域：' + (cloud_zuzhi.used_area || 0) + '个'"
-            ></p>
+          <div class="zuzhi_title">
+            <span>{{ cloud_zuzhi.org_name }}</span>
+            <span>
+              {{ "在用工作区域：" + (cloud_zuzhi.used_area || 0) + "个" }}
+            </span>
           </div>
           <div class="dashboard_contaner">
             <div
@@ -30,30 +30,18 @@
               v-for="(item, index) in cloud_zuzhi.dashboard_list"
               :key="index"
             >
-              <dashboard style="width:150px;height:150px;"></dashboard>
-              <p v-text="item.value + ' / ' + item.total + item.unit"></p>
-            </div>
-          </div>
-        </div>
-
-        <div class="admin_info" v-if="cloud_admin">
-          <h1 class="admin_title">云上贵州</h1>
-          <div class="admin_header apass_button">
-            <span>云资源概览</span>
-            <el-button type="primary">
-              工作区域审批（1）
-            </el-button>
-          </div>
-          <div class="cloud_info">
-            <div class="dashboard_contaner">
-              <div
-                class="dashborad_list"
-                v-for="(item, index) in cloud_admin.dashboard_list"
-                :key="index"
-              >
-                <dashboard style="width:150px;height:150px;"></dashboard>
-                <p v-text="item.value + ' / ' + item.total + item.unit"></p>
-              </div>
+              <chart
+                :options="getDashboardOptions(item)"
+                class="dashboard_chart"
+              />
+              <p class="dashboard_info">
+                <span>物理总量</span>
+                <span v-text="item.total + item.unit"></span>
+              </p>
+              <p class="dashboard_info">
+                <span>剩余量</span>
+                <span v-text="item.value + item.unit"></span>
+              </p>
             </div>
           </div>
         </div>
@@ -74,6 +62,7 @@
 </template>
 
 <script>
+import { graphic } from "echarts/lib/export";
 import { mapState } from "vuex";
 import helper from "@/services/helper.js";
 import apassList from "@/components/apass-list";
@@ -748,41 +737,17 @@ export default {
       // 组织管理员 --- 云资源管理
       else if (level == 1 && type == 2) {
         this.listUrl = "";
-        this.cloud_zuzhi = {
-          org_name: "北京比格大数据",
-          used_area: 2,
-          dashboard_list: [
-            {
-              name: "cpu使用量",
-              value: 6,
-              total: 10,
-              unit: "（核）",
-            },
-            {
-              name: "内存使用量",
-              value: 13,
-              total: 20,
-              unit: "（GB）",
-            },
-            {
-              name: "数据盘使用量",
-              value: 240,
-              total: 560,
-              unit: "（GB）",
-            },
-            {
-              name: "容器组使用量",
-              value: 10,
-              total: 18,
-              unit: "（个）",
-            },
-          ],
-        };
-        this.filterList = [
+        this.paddingLeft = 0;
+        this.filterList2 = [
           {
             name: "初次申请状态",
             prop: "state1",
-            data: [
+            default: 0,
+            options: [
+              {
+                name: "全部",
+                value: 0,
+              },
               {
                 name: "待审批",
                 value: 1,
@@ -800,7 +765,12 @@ export default {
           {
             name: "资源调整状态",
             prop: "state2",
-            data: [
+            default: 0,
+            options: [
+              {
+                name: "全部",
+                value: 0,
+              },
               {
                 name: "待审批",
                 value: 1,
@@ -817,6 +787,16 @@ export default {
           },
         ];
         this.listHeader = [
+          {
+            label: "运行状态",
+            align: "center",
+            type: "image",
+            getImage(item) {
+              return item.state == 0
+                ? require("@/assets/imgs/ic_true.png")
+                : require("@/assets/imgs/ic_guoqi.png");
+            },
+          },
           {
             label: "工作区域名称",
             prop: "name",
@@ -853,11 +833,6 @@ export default {
             prop: "name",
             align: "center",
           },
-          {
-            label: "用户申请时间",
-            prop: "name",
-            align: "center",
-          },
           {
             label: "初次申请状态",
             prop: "name",
@@ -869,7 +844,7 @@ export default {
             align: "center",
           },
           {
-            label: "运行状态",
+            label: "用户申请时间",
             prop: "name",
             align: "center",
           },
@@ -877,15 +852,71 @@ export default {
             label: "操作",
             type: "buttons",
             align: "center",
-            width: 160,
+            width: 80,
             actionList: [
               {
                 label: "分配",
+                getLabel(item) {
+                  return item.allot == 0 ? "分配" : "已分配";
+                },
                 callback: this.cloudAllot,
+                disabledRule(item) {
+                  return item.allot == 1;
+                },
               },
             ],
           },
         ];
+        this.listData = [
+          {
+            name: "区域1",
+            state: 0,
+            sjp: ["8/60"],
+            allot: 1,
+          },
+          {
+            name: "区域2",
+            state: 1,
+            sjp: ["2/3", "22/33"],
+            allot: 0,
+          },
+          {
+            name: "区域3",
+            state: 0,
+            sjp: ["2/100", "22/33", "55/66"],
+            allot: 1,
+          },
+        ];
+        this.cloud_zuzhi = {
+          org_name: "北京比格大数据",
+          used_area: 2,
+          dashboard_list: [
+            {
+              name: "cpu使用量",
+              value: 6,
+              total: 10,
+              unit: "（核）",
+            },
+            {
+              name: "内存使用量",
+              value: 13,
+              total: 20,
+              unit: "（GB）",
+            },
+            {
+              name: "数据盘使用量",
+              value: 500,
+              total: 560,
+              unit: "（GB）",
+            },
+            {
+              name: "容器组使用量",
+              value: 10,
+              total: 18,
+              unit: "（个）",
+            },
+          ],
+        };
       }
 
       // 超级管理员 --- 平台服务管理
@@ -1377,6 +1408,162 @@ export default {
     cloudAllot(item) {
       console.log("cloudAllot - " + item.name);
     },
+    getDashboardOptions(item) {
+      let percent = Math.round((item.value / item.total) * 100);
+      let colors = ["#515fe7", "#e7ecfd"];
+
+      if (percent >= 80) {
+        colors = ["#e3606d", "#f6d0d0"];
+      }
+
+      return {
+        title: {
+          text: percent + "%",
+          subtext: item.name,
+          x: "center",
+          y: "center",
+          textVerticalAlign: "auto",
+          textStyle: {
+            fontSize: 34,
+            fontWeight: "100",
+            color: ["#0d1847"],
+          },
+          subtextStyle: {
+            fontSize: 12,
+            fontWeight: "100",
+            color: "#707693",
+          },
+        },
+        angleAxis: {
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          min: 0,
+          max: 138,
+          boundaryGap: ["0", "100"],
+          startAngle: 220,
+          endAngle: -40,
+        },
+        radiusAxis: {
+          type: "category",
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
+          },
+        },
+        polar: {
+          radius: "110%",
+        },
+        series: [
+          {
+            type: "bar",
+            data: [, percent],
+            coordinateSystem: "polar",
+            barMaxWidth: 10,
+            z: 1,
+            name: "B",
+            roundCap: true,
+            itemStyle: {
+              normal: {
+                color: new graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: colors[0] },
+                  { offset: 1, color: colors[1] },
+                ]),
+              },
+            },
+            barGap: "-100%",
+          },
+          {
+            type: "bar",
+            data: [, 100],
+            z: 0,
+            silent: true,
+            coordinateSystem: "polar",
+            barMaxWidth: 10,
+            name: "C",
+            roundCap: true,
+            color: "#ddd",
+            barGap: "-100%",
+          },
+          {
+            type: "gauge",
+            radius: "70%",
+            min: 0, //最小刻度
+            max: 100, //最大刻度
+            splitNumber: 10, //刻度数量
+            startAngle: 220,
+            endAngle: -40,
+            axisLabel: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                width: 0.5,
+                color: [[1, "rgba(0,0,0,0)"]],
+              },
+            }, //仪表盘轴线
+            axisLabel: {
+              show: false,
+            }, //刻度标签。
+            axisTick: {
+              show: true,
+              splitNumber: 5,
+              lineStyle: {
+                color: "#e3e4ea",
+                width: 0.5,
+              },
+              length: 3,
+            }, //刻度样式
+            splitLine: {
+              show: true,
+              length: 4,
+              lineStyle: {
+                color: "#e3e4ea",
+                width: 0.5,
+              },
+            }, //分隔线样式
+            detail: {
+              show: false,
+            },
+            pointer: {
+              show: false,
+            },
+          },
+          {
+            name: "point",
+            type: "scatter",
+            coordinateSystem: "polar",
+            barGap: "-100%",
+            zlevel: 0,
+            symbol: "circle",
+            symbolSize: 6,
+            itemStyle: {
+              normal: {
+                show: true,
+                color: "#fff",
+              },
+            },
+
+            data: [, percent],
+          },
+        ],
+      };
+    },
   },
   created() {
     this.level = parseInt(this.$route.params.level);
@@ -1407,46 +1594,68 @@ export default {
 .service_management_list {
   height: 100%;
 }
-
-.cloud_info {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding-top: 20px;
+.zuzhi_title {
+  margin-top: 15px;
 }
-.cloud_info > .info_container {
-  flex-shrink: 0;
+.zuzhi_title > span,
+.zuzhi_title > span::before {
+  display: inline-block;
+  vertical-align: middle;
 }
-.cloud_info > .info_container > p:nth-child(1) {
-  font-size: 24px;
-  line-height: 36px;
+.zuzhi_title > span:nth-child(1)::before {
+  content: "";
+  width: 4px;
+  height: 16px;
+  border-radius: 2px;
+  background-color: #515fe7;
+  margin-right: 10px;
 }
-.cloud_info > .info_container > p:nth-child(2) {
-  font-size: 18px;
-  line-height: 36px;
+.zuzhi_title > span:nth-child(1) {
+  font-size: 16px;
+  color: #242c43;
+  line-height: 30px;
 }
-.cloud_info > .dashboard_contaner {
-  display: inline-flex;
-  justify-content: flex-start;
+.zuzhi_title > span:nth-child(2)::before {
+  content: "";
+  width: 2px;
+  height: 12px;
+  background-color: #b4c0f5;
+  margin: 0 10px;
+}
+.zuzhi_title > span:nth-child(2) {
+  font-size: 14px;
+  line-height: 1;
+  color: #58617a;
+  line-height: 24px;
+  margin-top: 3px;
+}
+.dashboard_contaner {
+  display: flex;
+  justify-content: space-around;
   align-items: center;
+  margin-top: 20px;
 }
-.cloud_info > .dashboard_contaner > .dashborad_list {
+.dashborad_list {
   text-align: center;
   margin: 0 25px;
   font-size: 18px;
 }
-
-.admin_title {
-  margin-top: 20px;
-  text-align: center;
+.dashboard_chart {
+  width: 136px;
+  height: 136px;
 }
-.admin_header {
+.dashboard_info {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-top: 20px;
+  font-size: 14px;
+  line-height: 30px;
+  color: #8890a7;
+}
+.dashboard_info:nth-of-type(1) {
+  margin-top: -10px;
 }
-.admin_header > span {
-  font-size: 24px;
+.dashboard_info > span:nth-of-type(2) {
+  color: #0d1847;
 }
 </style>
-- 
2.26.0