Merge branch 'xym' into dev

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/components/service-tabs/service-tab-comments.vue

@@ -50,11 +50,11 @@ export default {
       score: 0,
       starInfo: [
         {
-          star: 1,
+          star: 5,
           percent: 0,
         },
         {
-          star: 2,
+          star: 4,
           percent: 0,
         },
         {
@@ -62,11 +62,11 @@ export default {
           percent: 0,
         },
         {
-          star: 4,
+          star: 2,
           percent: 0,
         },
         {
-          star: 5,
+          star: 1,
           percent: 0,
         },
       ],
@@ -79,7 +79,7 @@ export default {
 
       return {
         score: data.avgScore || 0,
-        starInfo: [1, 2, 3, 4, 5].map((star) => {
+        starInfo: [5,4,3,2,1].map((star) => {
           let percent =
             this.commentsTtotal > 0
               ? (((data.scoreStatic && data.scoreStatic[star]) || 0) /

src/components/service-tabs/service-tabs.vue

@@ -13,7 +13,7 @@
       ></service-tab-detail>
     </el-tab-pane>
 
-    <!-- 规格定价 -->
+    <!-- 规格说明 -->
     <el-tab-pane
       :label="specificationTitle"
       name="specification"
@@ -25,7 +25,7 @@
       ></service-tab-specification>
     </el-tab-pane>
 
-    <!-- 提供机构 -->
+    <!-- 提供组织 -->
     <el-tab-pane :label="providerTitle" name="provider" v-if="providerData">
       <service-tab-provider
         class="service_info"
@@ -65,11 +65,11 @@ export default {
     },
     specificationTitle: {
       type: String,
-      default: () => "规格定价",
+      default: () => "规格说明",
     },
     providerTitle: {
       type: String,
-      default: () => "提供机构",
+      default: () => "提供组织",
     },
     commentsTitle: {
       type: String,

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,97 @@ export default {
           },
         ];
       }
-      // TODO: 普通用户 --- 云资源服务
+      // 普通用户 --- 云资源服务
       else if (level == 0 && type == 2) {
-        this.listUrl = "xxxxxx";
+        this.listUrl = "";
+        this.paddingLeft = 0;
+        this.filterList2 = [
+          {
+            name: "初次申请状态",
+            prop: "state1",
+            default: 0,
+            options: [
+              {
+                name: "全部",
+                value: 0,
+              },
+              {
+                name: "待审批",
+                value: 1,
+              },
+              {
+                name: "审批通过",
+                value: 2,
+              },
+              {
+                name: "审批未通过",
+                value: 3,
+              },
+            ],
+          },
+          {
+            name: "资源调整状态",
+            prop: "state2",
+            default: 0,
+            options: [
+              {
+                name: "全部",
+                value: 0,
+              },
+              {
+                name: "待审批",
+                value: 1,
+              },
+              {
+                name: "审批通过",
+                value: 2,
+              },
+              {
+                name: "审批未通过",
+                value: 3,
+              },
+            ],
+          },
+          /* {
+            name: "申请状态",
+            prop: "state3",
+            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 +480,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 +510,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 +668,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 +745,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 +858,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 +881,7 @@ export default {
             actionList: [
               {
                 label: "分配",
-                callback: this.allotItem,
+                callback: this.cloudAllot,
               },
             ],
           },
@@ -859,46 +1103,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 +1142,12 @@ export default {
       }
     },
     init(filter) {
+      console.log(filter);
+
+      if (!this.listUrl) {
+        return;
+      }
+
       this.tempFliter = filter;
 
       this.$http
@@ -1130,9 +1371,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 +1407,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: [
       ["应用仓库", "我部署的应用", "申请的应用"], // 普通用户