From 6f8b1f5d25c5f060bf7615cbdb9814856af511c4 Mon Sep 17 00:00:00 2001
From: xuyiming <xuyiming@bd-apaas.com>
Date: Sat, 4 Jul 2020 11:59:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E7=AE=A1=E7=90=86-=E6=99=AE?=
 =?UTF-8?q?=E9=80=9A=E7=94=A8=E6=88=B7-=E4=BA=91=E8=B5=84=E6=BA=90?=
 =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/imgs/ic_guoqi.png          | Bin 0 -> 1399 bytes
 src/assets/imgs/ic_true.png           | Bin 1549 -> 1543 bytes
 src/components/apass-list.vue         |  66 +++-
 src/components/apass-table.vue        |  48 ++-
 src/pages/workbench/fwgl/fwglList.vue | 459 ++++++++++++++++++++------
 src/store/index.js                    |   6 +-
 6 files changed, 475 insertions(+), 104 deletions(-)
 create mode 100644 src/assets/imgs/ic_guoqi.png

diff --git a/src/assets/imgs/ic_guoqi.png b/src/assets/imgs/ic_guoqi.png
new file mode 100644
index 0000000000000000000000000000000000000000..6b3f62152c2621d31b9ba7da00ba9b8cf5d0818c
GIT binary patch
literal 1399
zcmeAS@N?(olHy`uVBq!ia0vp^LLkh+1|-AI^@Rf|$r9IylHmNblJdl&R0hYC{G?O`
z&)mfH)S%SFl*+=BsWuD@%*vS|5hW46K32*3xq68pHF_1f1wh>l3^w)^1&PVosU-?Y
zsp*+{wo31J?^jaDOtDo8H}y5}EpSfF$n>ZxN)4{^3rViZPPR-@vbR&PsjvbXkegbP
zs8ErclUHn2VXFi-*9yo63F|8<fR&VF+bTgE72zA8;GAESs$i;TrkiYNVxeGesb^?r
zVqk2hqhMrUXsK^tp>JrcYhY+)U}j}%t^fr}K--E^(yW49+@N*=dA3R!B_#z``ugSN
z<$C4Ddih1^`i7R4Kr@W=jf`}GDs+o0^GXscbn}XpVJ5hw7AF^F7L;V>=P7_pOiaoz
zEwNPsx)kDt+yc0<dBxCR0tT3VMPh-zp`HQAOE87LzW9~q=E7AMmjtCE+>6!V;*iRM
zRQ;gT;{4L0WMIUlDTAykuyQU+O)SYT3dzsUfrVl~Mt(_taYlZDf)UV33L4>=c`5nj
z#hPFZzP?tTdBr7(dC94sF1AWQBlI#eQ>={5%nTfjO^lpe94!qET^$`wTwNWF3{1_9
zfm~xl1DIZy{N&Qy)Vvay-V}shW1M<HX(6`&XtPUdQD#|cid#{Bt^(N4R++fnVt~^;
zsNNLZZZX8ES0CsYeNfCI#WYL^n0!D?c)A60;3+>f518DGfa%(1sdqF31LG@C7srr_
zTT?>3^_c@j?2KhIwIza=UeR8{sWdTS!aI+nLAyRiL~fYy!*!b2jfC{&7b{$pbX3fC
z2{g5t#O2<~I4Sa6y4=k)_}1i_;`cMF&zV2J_j~R{rQhi($%@B%B&?6@mUf%6@!Snf
zzkm-GmbT_|79QLeCpS%EvDp*GM%H6`$rC>(DZQWVVWDi3W0+NH>)+X~UgeppF}>RS
z+Fd>MtJkkjIR9GFweW%S@j1o^Q>r7TAGsEAQqZ~9bLq=hzxqD?<ln73`LJSe`11KC
zTgCFa1XGTrOfa10JE{A0g{P3jHG$@cCmk`IF3AZ;%K|)iwnfBV_Y5&%Ta;PRdHlJ(
z_QusZA3x;my1Z#el9!rs$jXOCK06;=yJdL#*}XLlH&+U5-CB`5`SJJuEt>>QpFQhs
zViw&S8rJ^Bc=D3?rX!r+9n{y~ob&P0pGWo2O2Q&r7cELYqp;1(H+bzFXMwee&pv0h
z-8f}><d>A~vfW*0a#utJia2k4DwQ-**-D9Nk^eE7Cww>AcSWC6oW71HyYbz&Lt-=8
z+jVxy$I7HFG2Pn7_KW#Rex8ApsJU`+(bn6pb<<d`v2a$YoZ0#OTE5GKw}s~Xi_3TH
zZeFYF%QD3vC;i-?UXil;jRD6bCokexjL>*Lt?<B&BQracH@@+1U}VUyTrjmL>p%^t
ODD-sob6Mw<&;$UpO8=w)

literal 0
HcmV?d00001

diff --git a/src/assets/imgs/ic_true.png b/src/assets/imgs/ic_true.png
index 7b0fb73962ad00595f9ecde919272d497fa66dda..e93a2fa62d11a6612af7c210d051d0bef78792e4 100644
GIT binary patch
delta 893
zcmeC>Y3G^X$*4ThYqElcg1M!hp_z$+v6+s7k%6J5zJZ0lp|P%kp_PG|m8tp0zY2^j
zMuvI@lU111<sB^yUCbQaoLn3&4Gmo#EnQt)EuD;w94$<o&D@*}CucFqLew}J;8e4W
z$uJsXjted|N(#j#L8)n0Df!8zxv6<2o-VdZ6}bg^DVZr&#t^-(xb#joVs@%`{wl-8
zz`#`H>EaktajPf9J3}~7#MXG`tjt+QBzE~`IDQCr+^FHYAuIcK>(z!CtJcm=5q#+t
z^TIDiLPJDwNk`ejyD!{gIM%tW>HRA0BA%P!x@4nhd8=CBr<tCQ_O8!QN)~?GYW%+Z
zedYJP<?l55lOwNe&^wfQ^VicmN{N#`)KB>E=RHHO{p0U-T?c<|D7H4;&e@(lA%ALz
zz%q`*BIf#!!#bZl5HR)USQoRdXJ$+1lSz#st5mMp%1KB4mAX}yaiO%;yes%jp;Gt9
zT}u7OX6{kW@l*5l*?USkUgNrzk(sH6MbU-6X<`$dyDm7+2%p(wkT}t1?wPBqiP{pW
z4-ePxlTl6<ReO~dW_PaprHxtEo7rbOc`X;`sYyKuOgbmB`|oLyQ-70gwC-LU_t1K_
z!P=#ap>~F1VrTzPis7)lcscX<n{?+hACn`B5|!k?hlO<|r9Iii-mEV3+M}&~&WpEK
zK7OiYG*>r@=+%tWvr}8OYev$>o?>-b4!PgXVwRU%>i;dax>u)>P-4?Nspoo**Hndi
zfo&W8rcLke=vykd_lcXviw4K<8;-73x^TVYhdQ%zxsj-l*>>-(yYBB4e=gVEtLyGx
z|J6+@Ud+dZZMMLh{3FLDnJ-3X&Pe;3{G(RXc7NI;_B*#dyHYo9{CjFz;nOOq`291R
zp4_@oCG_p?)iA~SUFT0ddtttY-Ft%c#(jEsgUrK^FrMq!&b9GQ<-+MQYtFoydO}J_
zZ=yl*icP<Eb}_g3Xj{%%+I?^LZNBy4tzL4omMz$Mv+bL0*+w<b2xi8vxvT%UsYLdy
zs<gk(7g~ON-#0dcR}%8-DSzFrh1E~}$6?zNyooPz1M4B7#91FYKKMw-c^<9fHeh(d
W{X)~J=#f4H5O})!xvX<aXaWG75q5e2

delta 884
zcmZqY>E)T=$*4BbYqEl=g1M!hp_#FXrKOI7k%6IwzJZ0lp|P%^nU#rwm66fLzY2`(
z&dwky%gKsN>hgvzrf$Y=hEA4-7KVndj!v!yt`@G&#umnghK42vCX>^dWT9$|aH?6%
zWT*i)$JGs&8YP9|lAzQytCYzFOd?PN4R9%*tk3LJ-&o=sz`(#%>*?YcQgN#%<i2-s
zqC{QUtky@{o?Yv2)b3i)QP&VSllAHmp(s{S?j9xQX|6xmOOjio1nx?NTyZt85_S|1
z6q&fyM^}H%gj2JPyxgX3Ov>B!a@)P<KjvDNYR6Zc`~JB0{_{Qe%jbQcF-yKrvAdF`
z{pt>vx3!{MIP2eW%=7a%_#9aNcJ{suySH(whf5Fk={(UE`P1~gDR|QL<)73#t|aZ|
z`OZ2mL#OlG_QX9ug<L<BJAD_weO4oKTK}d}F_ANue=N#7c~d)u@t5zbj5SZD9{BdK
zSj7C6lY>p?8nbZcwa5Fep61^1OIbtoOQwqO9lyyozoyP^QL{T{P(RI5>$=OLqD^jY
z!opL}T#`5~6B=mQSrb$GmGA#<A)hPvqMp0_KbvIx?dk5s!;ddtQFrtIf1=(q>YPPj
zXrklw-+{H=@`opIcix%9+j8vdT!&`v-hDrfJ@S6ewb*pJsajuY#V)HQ`RvY|%7=Ux
zMWp#DO+0jSaoHT}jM;norP#CT_lViN=y`Bps(eEsbMZ1RBaH~pxja0*2QQm+To;d7
zVIS8LVbj{`nl|T7`q9VlH1<rd_nXwQGbdA$ui%=mQdh4_$I=a-|CE=Q=(tV3ztG+G
zwWQ-y*Oe(YrcaNkdVlWCWbeOr>gKeqt-EeyT+9%Pe$9UIx8}0R6;kZ!6Aa33|EhON
zzUq`3JYnt?=coyrH{9}SUzk_sBI*5L^(xJBt3N^wHoE4`Ka4zXD5;-Vxbj`P_<Qk|
z>mCP|ChNVqnQ&C8J!YXA>ulcw{S(dQi$lL_PBJJ~`JVjCe9;M}OJ`@_u)cJ6>2CAe
z4o?i^mf!l(n^N}Q<mW=C0*|kXtkU8imS5G|A*WrjXq`%KJ*xx*@7Md$q9$`~7=Xaj
L)z4*}Q$iB}#`bs5

diff --git a/src/components/apass-list.vue b/src/components/apass-list.vue
index 46dbea1..d511ced 100644
--- a/src/components/apass-list.vue
+++ b/src/components/apass-list.vue
@@ -4,6 +4,8 @@
       <slot name="breadcrumb"></slot>
     </div>
     <div class="main-container">
+      <slot name="top"></slot>
+
       <div class="header-container" v-if="!hideHeader">
         <div class="header-left apass_button">
           <el-button
@@ -18,6 +20,28 @@
               "
             ></i>
           </el-button>
+
+          <div
+            v-for="(item, index) in selectFilter"
+            :key="'select_' + index"
+            class="select_container"
+          >
+            <span class="select_title" v-text="item.name"></span>
+            <el-select
+              v-model="item.value"
+              placeholder="请选择"
+              @change="listAction"
+            >
+              <el-option
+                v-for="(v, i) in item.options"
+                :key="'select_' + index + '_option_' + i"
+                :label="v.name"
+                :value="v.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+
           <slot name="header-left"></slot>
         </div>
         <div class="header-center">
@@ -51,7 +75,7 @@
         <list-table
           :header="listHeader"
           :data="listData"
-          :padding-left="35"
+          :padding-left="listPaddingLeft"
         ></list-table>
       </div>
 
@@ -84,6 +108,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    otherFilter: {
+      type: Array,
+      default: () => [],
+    },
     listHeader: {
       type: Array,
       default: () => [],
@@ -116,8 +144,21 @@ export default {
     currentPage: 1,
     timer: null,
     pageSizes: [15, 50, 100],
+    selectFilter: [],
   }),
   methods: {
+    initOtherFilter() {
+      this.otherFilter.forEach((item) => {
+        this.$set(this.filter, item.prop, item.default);
+
+        this.selectFilter.push({
+          name: item.name,
+          prop: item.prop,
+          value: item.default,
+          options: item.options,
+        });
+      });
+    },
     searchAction(value) {
       this.listAction();
     },
@@ -140,8 +181,15 @@ export default {
       }
 
       this.timer = setTimeout(() => {
+        let selectFilter = {};
+
+        this.selectFilter.forEach((item) => {
+          selectFilter[item.prop] = item.value;
+        });
+
         this.$emit("list-action", {
           ...this.filter,
+          ...selectFilter,
           keyword: this.searchValue,
           size: this.pageSize,
           page: this.currentPage,
@@ -150,6 +198,10 @@ export default {
     },
   },
   mounted() {
+    if (this.otherFilter && this.otherFilter.length > 0) {
+      this.initOtherFilter();
+    }
+
     this.listAction();
   },
 };
@@ -182,7 +234,17 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-.header-container .el-button + .el-button {
+.header-container .select_container {
+  display: inline-block;
+  vertical-align: middle;
+}
+.header-container .select_container .select_title {
+  font-size: 14px;
+  color: #242c43;
+  margin-right: 10px;
+}
+.header-container .el-button + .el-button,
+.header-container .select_container + .select_container {
   margin-left: 25px;
 }
 .apass_filter {
diff --git a/src/components/apass-table.vue b/src/components/apass-table.vue
index bfab22d..7c07779 100644
--- a/src/components/apass-table.vue
+++ b/src/components/apass-table.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="apass_table">
     <el-table :data="data">
-      <el-table-column :width="Math.max(paddingLeft - 10, 0)"></el-table-column>
+      <el-table-column
+        v-if="paddingLeft > 10"
+        :width="paddingLeft - 10"
+      ></el-table-column>
       <el-table-column
         v-for="(item, index) in header"
         :label="item.label"
@@ -43,6 +46,33 @@
               @click="item.callback && item.callback(scope.row)"
             ></a>
           </div>
+          <div v-else-if="item.type === 'image'" class="img_content">
+            <img
+              :src="item.getImage && item.getImage(scope.row)"
+              :width="item.size"
+            />
+          </div>
+          <div
+            v-else-if="
+              item.type === 'tooltip' &&
+                item.getLength &&
+                item.getLength(scope.row) > 1
+            "
+          >
+            <el-tooltip
+              placement="right-start"
+              popper-class="apass_table_tooltip"
+            >
+              <div
+                slot="content"
+                v-html="item.getContent && item.getContent(scope.row)"
+              ></div>
+              <span
+                v-text="(item.getText && item.getText(scope.row)) + '..'"
+                style="text-decoration: underline;color: #515fe7;"
+              ></span>
+            </el-tooltip>
+          </div>
           <span
             v-else
             v-text="
@@ -73,3 +103,19 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.img_content {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>
+
+<style>
+.apass_table_tooltip {
+  font-size: 12px;
+  line-height: 20px;
+}
+</style>
diff --git a/src/pages/workbench/fwgl/fwglList.vue b/src/pages/workbench/fwgl/fwglList.vue
index fe96785..af2b748 100644
--- a/src/pages/workbench/fwgl/fwglList.vue
+++ b/src/pages/workbench/fwgl/fwglList.vue
@@ -5,15 +5,63 @@
       search-placeholder="请输入关键字"
       :list-total="listTotal"
       :list-filter="filterList"
+      :other-filter="filterList2"
       :list-header="listHeader"
       :list-data="listData"
-      :list-padding-left="35"
+      :list-padding-left="paddingLeft"
       @list-action="init"
     >
       <el-breadcrumb separator="/" slot="breadcrumb">
         <el-breadcrumb-item :to="`/fwgl/${level}`">我的服务</el-breadcrumb-item>
         <el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item>
       </el-breadcrumb>
+
+      <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>
+          <div class="dashboard_contaner">
+            <div
+              class="dashborad_list"
+              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>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <div slot="list" v-if="level == 2 && type == 2">
+        <p style="text-align: center;margin-top: 20px;">组织列表</p>
+      </div>
     </apass-list>
 
     <apass-dialog
@@ -26,20 +74,23 @@
 </template>
 
 <script>
-import helper from "@/services/helper.js";
 import { mapState } from "vuex";
+import helper from "@/services/helper.js";
 import apassList from "@/components/apass-list";
 import apassDialog from "@/components/apass-dialog";
+import Dashboard from "@/components/e-charts/dashboard";
 
 export default {
-  components: { apassList, apassDialog },
+  components: { apassList, apassDialog, Dashboard },
   data: () => ({
     level: 0, // 用户等级
     type: 0, // 访问的页面
+    paddingLeft: 35,
     listTotal: 0,
     listHeader: [],
     listData: [],
     filterList: [],
+    filterList2: [],
     otherFilter: [],
     dialogInfo: {
       title: "",
@@ -49,6 +100,8 @@ export default {
     listUrl: "",
     deleteUrl: "",
     tempFliter: null,
+    cloud_zuzhi: null,
+    cloud_admin: null,
   }),
   computed: {
     ...mapState({
@@ -71,27 +124,31 @@ export default {
   },
   methods: {
     initFilter() {
-      Promise.all([
-        this.$http.get("/apaas/service/v3/service/manager/servtype"),
-        this.$http.get("/apaas/service/v3/service/manager/servarea"),
-      ])
-        .then((response) => {
-          let data = response.map((item) => {
-            return {
-              name: item.body.data[0].type_name,
-              prop: item.body.data[0].type_code,
-              data: item.body.data.map((v) => ({
-                name: v.name,
-                value: v.id,
-              })),
-            };
-          });
+      if (this.type == 2) {
+        //
+      } else {
+        Promise.all([
+          this.$http.get("/apaas/service/v3/service/manager/servtype"),
+          this.$http.get("/apaas/service/v3/service/manager/servarea"),
+        ])
+          .then((response) => {
+            let data = response.map((item) => {
+              return {
+                name: item.body.data[0].type_name,
+                prop: item.body.data[0].type_code,
+                data: item.body.data.map((v) => ({
+                  name: v.name,
+                  value: v.id,
+                })),
+              };
+            });
 
-          this.filterList = [...data, ...this.otherFilter];
-        })
-        .catch((error) => {
-          console.log(error);
-        });
+            this.filterList = [...data, ...this.otherFilter];
+          })
+          .catch((error) => {
+            console.log(error);
+          });
+      }
     },
     initHeader() {
       let _self = this;
@@ -149,9 +206,7 @@ export default {
               },
               {
                 getLabel(item) {
-                  return (
-                    ["申请上架", "申请下架", "审核中"][item.state] || "-"
-                  );
+                  return ["申请上架", "申请下架", "审核中"][item.state] || "-";
                 },
                 callback(item) {
                   if (item.state == 0) {
@@ -322,18 +377,74 @@ export default {
           },
         ];
       }
-      // TODO: 普通用户 --- 云资源服务
+      // 普通用户 --- 云资源服务
       else if (level == 0 && type == 2) {
-        this.listUrl = "xxxxxx";
+        this.listUrl = "";
+        this.paddingLeft = 0;
+        this.filterList2 = [
+          {
+            name: "初次申请状态",
+            prop: "state0",
+            default: 0,
+            options: [
+              {
+                name: "全部",
+                value: 0,
+              },
+              {
+                name: "待审批",
+                value: 1,
+              },
+              {
+                name: "审批通过",
+                value: 2,
+              },
+              {
+                name: "审批未通过",
+                value: 3,
+              },
+            ],
+          },
+          {
+            name: "资源调整状态",
+            prop: "state1",
+            default: 0,
+            options: [
+              {
+                name: "全部",
+                value: 0,
+              },
+              {
+                name: "待审批",
+                value: 1,
+              },
+              {
+                name: "审批通过",
+                value: 2,
+              },
+              {
+                name: "审批未通过",
+                value: 3,
+              },
+            ],
+          },
+        ];
         this.listHeader = [
           {
-            label: "工作区域",
-            prop: "name",
+            label: "运行状态",
+            align: "center",
+            type: "image",
+            getImage(item) {
+              return item.state == 0
+                ? require("@/assets/imgs/ic_true.png")
+                : require("@/assets/imgs/ic_guoqi.png");
+            },
           },
           {
-            label: "网络环境",
+            label: "工作区域",
             prop: "name",
-            align: "center",
+            type: "button",
+            callback: this.cloudDetail,
           },
           {
             label: "CPU（核）",
@@ -346,14 +457,29 @@ export default {
             align: "center",
           },
           {
-            label: "资源总量（GB）",
+            label: "容器组（个）",
             prop: "name",
             align: "center",
           },
           {
-            label: "实例数（个）",
-            prop: "name",
+            label: "数据盘（块/GB）",
+            type: "tooltip",
             align: "center",
+            getLength(item) {
+              return item.sjp.length;
+            },
+            getText(item) {
+              return item.sjp[0];
+            },
+            getContent(item) {
+              let htmlStr = `<span>数据盘（块/GB）</span><br />`;
+
+              item.sjp.forEach((v) => {
+                htmlStr += `<span>数据盘：${v}</span><br />`;
+              });
+
+              return htmlStr;
+            },
           },
           {
             label: "申请时间",
@@ -361,21 +487,31 @@ export default {
             align: "center",
           },
           {
-            label: "申请状态",
+            label: "初次申请状态",
             prop: "name",
             align: "center",
           },
           {
-            label: "操作",
-            type: "buttons",
+            label: "资源调整结果",
+            prop: "name",
             align: "center",
-            width: 160,
-            actionList: [
-              {
-                label: "查看详情",
-                callback: this.detailItem,
-              },
-            ],
+          },
+        ];
+        this.listData = [
+          {
+            name: "区域1",
+            state: 0,
+            sjp: ["8/60"],
+          },
+          {
+            name: "区域2",
+            state: 1,
+            sjp: ["2/3", "22/33"],
+          },
+          {
+            name: "区域3",
+            state: 0,
+            sjp: ["2/100", "22/33", "55/66"],
           },
         ];
       }
@@ -509,7 +645,7 @@ export default {
                 (item.service_apply_info &&
                   item.service_apply_info.approval_time) ||
                 "";
-                
+
               return item.service_apply_info &&
                 item.service_apply_info.approval_status == 1
                 ? helper.dateStringTransform(date)
@@ -586,41 +722,111 @@ export default {
           },
         ];
       }
-      // TODO: 组织管理员 --- 云资源管理
+      // 组织管理员 --- 云资源管理
       else if (level == 1 && type == 2) {
-        this.listUrl = "xxxxxx";
+        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 = [
+          {
+            name: "初次申请状态",
+            prop: "state1",
+            data: [
+              {
+                name: "待审批",
+                value: 1,
+              },
+              {
+                name: "审批通过",
+                value: 2,
+              },
+              {
+                name: "审批未通过",
+                value: 3,
+              },
+            ],
+          },
+          {
+            name: "资源调整状态",
+            prop: "state2",
+            data: [
+              {
+                name: "待审批",
+                value: 1,
+              },
+              {
+                name: "审批通过",
+                value: 2,
+              },
+              {
+                name: "审批未通过",
+                value: 3,
+              },
+            ],
+          },
+        ];
         this.listHeader = [
           {
-            label: "工作区域",
+            label: "工作区域名称",
             prop: "name",
+            type: "button",
+            callback: this.cloudDetail,
           },
           {
-            label: "网络环境",
+            label: "CPU（核）",
             prop: "name",
             align: "center",
           },
           {
-            label: "CPU（核）",
+            label: "内存（GB）",
             prop: "name",
             align: "center",
           },
           {
-            label: "内存（GB）",
+            label: "容器组（个）",
             prop: "name",
             align: "center",
           },
           {
-            label: "资源总量（GB）",
+            label: "数据盘（块/GB）",
             prop: "name",
             align: "center",
           },
           {
-            label: "实例数（个）",
+            label: "申请用户",
             prop: "name",
             align: "center",
           },
           {
-            label: "使用用户",
+            label: "业务系统名",
             prop: "name",
             align: "center",
           },
@@ -629,6 +835,21 @@ export default {
             prop: "name",
             align: "center",
           },
+          {
+            label: "初次申请状态",
+            prop: "name",
+            align: "center",
+          },
+          {
+            label: "资源调整状态",
+            prop: "name",
+            align: "center",
+          },
+          {
+            label: "运行状态",
+            prop: "name",
+            align: "center",
+          },
           {
             label: "操作",
             type: "buttons",
@@ -637,7 +858,7 @@ export default {
             actionList: [
               {
                 label: "分配",
-                callback: this.allotItem,
+                callback: this.cloudAllot,
               },
             ],
           },
@@ -859,46 +1080,37 @@ export default {
           },
         ];
       }
-      // TODO: 超级管理员 --- 云资源管理
+      // 超级管理员 --- 云资源管理
       else if (level == 2 && type == 2) {
-        this.listUrl = "xxxxxx";
-        this.listHeader = [
-          {
-            label: "所属组织",
-            prop: "name",
-          },
-          {
-            label: "CPU使用量",
-            prop: "name",
-            align: "center",
-          },
-          {
-            label: "内存使用量",
-            prop: "name",
-            align: "center",
-          },
-          {
-            label: "工作区域数量",
-            prop: "name",
-            align: "center",
-          },
-          {
-            label: "创建时间",
-            prop: "name",
-            align: "center",
-          },
-          {
-            label: "操作",
-            type: "buttons",
-            align: "center",
-            actionList: [
-              {
-                label: "删除",
-                callback: this.deleteItem,
-              },
-            ],
-          },
-        ];
+        this.cloud_admin = {
+          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: "（个）",
+            },
+          ],
+          histogram: {},
+        };
       }
 
       // Error
@@ -907,6 +1119,12 @@ export default {
       }
     },
     init(filter) {
+      console.log(filter);
+
+      if (!this.listUrl) {
+        return;
+      }
+
       this.tempFliter = filter;
 
       this.$http
@@ -1130,9 +1348,12 @@ export default {
         `/fwgl/${this.level}/${this.type}/approvalserviceedit/${item.service_apply_info.id}`
       );
     }, // 审批服务
-    allotItem(item) {
-      console.log("allotItem - " + item.name);
-    }, // TODO: 云资源分配
+    cloudDetail(item) {
+      console.log("cloudDetail - " + item.name);
+    },
+    cloudAllot(item) {
+      console.log("cloudAllot - " + item.name);
+    },
   },
   created() {
     this.level = parseInt(this.$route.params.level);
@@ -1163,4 +1384,46 @@ export default {
 .service_management_list {
   height: 100%;
 }
+
+.cloud_info {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 20px;
+}
+.cloud_info > .info_container {
+  flex-shrink: 0;
+}
+.cloud_info > .info_container > p:nth-child(1) {
+  font-size: 24px;
+  line-height: 36px;
+}
+.cloud_info > .info_container > p:nth-child(2) {
+  font-size: 18px;
+  line-height: 36px;
+}
+.cloud_info > .dashboard_contaner {
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.cloud_info > .dashboard_contaner > .dashborad_list {
+  text-align: center;
+  margin: 0 25px;
+  font-size: 18px;
+}
+
+.admin_title {
+  margin-top: 20px;
+  text-align: center;
+}
+.admin_header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 20px;
+}
+.admin_header > span {
+  font-size: 24px;
+}
 </style>
diff --git a/src/store/index.js b/src/store/index.js
index 5a21a20..a503ae8 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -8,9 +8,9 @@ const store = new Vuex.Store({
     userInfo: null, // 用户信息
     serviceShopMenu: "/shop/data_service_list", // 服务超市侧边栏
     fwglNav: [
-      ["注册发布的服务", "申请的服务" /* , "云资源服务" */], // 普通用户
-      ["组织服务管理", "服务审批管理" /* , "云资源管理" */], // 组织管理员
-      ["平台服务管理", "服务审批管理" /* , "云资源管理" */], // 超级管理员
+      ["注册发布的服务", "申请的服务", "云资源服务"], // 普通用户
+      ["组织服务管理", "服务审批管理", "云资源管理"], // 组织管理员
+      ["平台服务管理", "服务审批管理", "云资源管理"], // 超级管理员
     ], // 服务管理列表，onlyRead
     yyglNav: [
       ["应用仓库", "我部署的应用", "申请的应用"], // 普通用户
-- 
2.26.0