服务管理-普通用户-云资源服务列表

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 {

src/components/apass-table.vue

 <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>

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,6 +124,9 @@ export default {
   },
   methods: {
     initFilter() {
+      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"),
@@ -92,6 +148,7 @@ export default {
           .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: [
+          },
+        ];
+        this.listData = [
           {
-                label: "查看详情",
-                callback: this.detailItem,
+            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"],
           },
         ];
       }
@@ -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 = [
+        this.cloud_admin = {
+          dashboard_list: [
             {
-            label: "所属组织",
-            prop: "name",
+              name: "cpu使用量",
+              value: 6,
+              total: 10,
+              unit: "（核）",
             },
             {
-            label: "CPU使用量",
-            prop: "name",
-            align: "center",
+              name: "内存使用量",
+              value: 13,
+              total: 20,
+              unit: "（GB）",
             },
             {
-            label: "内存使用量",
-            prop: "name",
-            align: "center",
+              name: "数据盘使用量",
+              value: 240,
+              total: 560,
+              unit: "（GB）",
             },
             {
-            label: "工作区域数量",
-            prop: "name",
-            align: "center",
-          },
-          {
-            label: "创建时间",
-            prop: "name",
-            align: "center",
-          },
-          {
-            label: "操作",
-            type: "buttons",
-            align: "center",
-            actionList: [
-              {
-                label: "删除",
-                callback: this.deleteItem,
+              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>

src/store/index.js

@@ -8,9 +8,9 @@ const store = new Vuex.Store({
     userInfo: null, // 用户信息
     serviceShopMenu: "/shop/data_service_list", // 服务超市侧边栏
     fwglNav: [
-      ["注册发布的服务", "申请的服务" /* , "云资源服务" */], // 普通用户
-      ["组织服务管理", "服务审批管理" /* , "云资源管理" */], // 组织管理员
-      ["平台服务管理", "服务审批管理" /* , "云资源管理" */], // 超级管理员
+      ["注册发布的服务", "申请的服务", "云资源服务"], // 普通用户
+      ["组织服务管理", "服务审批管理", "云资源管理"], // 组织管理员
+      ["平台服务管理", "服务审批管理", "云资源管理"], // 超级管理员
     ], // 服务管理列表，onlyRead
     yyglNav: [
       ["应用仓库", "我部署的应用", "申请的应用"], // 普通用户