合并

src/assets/css/index.css

@@ -67,7 +67,8 @@ html {
 }
 body {
   margin: 0;
-  font-family: PingFangSC-Regular, sans-serif;
+  font-family: Microsoft YaHei, sans-serif;
+  /* font-size: 17px; */
 }
 ul {
   list-style: none;

src/assets/i18n/language-zh.js

@@ -17,6 +17,9 @@ export const lang = {
 
     // work bench
     workBench: "工作台",
+    cloudResourcesService: "云资源服务",
+    cloudResourcesManagement: "云资源管理",
+    cloudResourcesDetail: "云资源详情",
 
     // data analysis
     dataAnalysis: "数据分析中心",

src/components/allot-info-confirm.vue

+<template>
+  <apass-dialog
+    ref="confrim"
+    class="allot_info_confirm"
+    width="600px"
+    title="分配信息确认"
+  >
+    <template slot="content">
+      <div class="confirm_container">
+        <div class="info_list" style="width: 100%;">
+          <p class="info_text text_grey">申请组织：</p>
+          <p
+            class="info_text"
+            v-text="(detail && detail['department_name']) || '-'"
+          ></p>
+        </div>
+        <div class="info_list" style="width: 50%;">
+          <p class="info_text text_grey">申请用户：</p>
+          <p
+            class="info_text"
+            v-text="(detail && detail['user_name']) || '-'"
+          ></p>
+        </div>
+        <div class="info_list" style="width: 50%;">
+          <p class="info_text text_grey">联系电话：</p>
+          <p class="info_text" v-text="(detail && detail['phone']) || '-'"></p>
+        </div>
+        <div class="info_list" style="width: 100%;">
+          <p class="info_text text_grey">上传申请文件：</p>
+          <p class="info_text" v-text="(detail && detail['file']) || '-'"></p>
+        </div>
+        <div class="info_list" style="width: 100%;">
+          <!-- <p class="detail_title info_text text_grey">原规格：</p> -->
+          <div class="detail_info">
+            <div class="detail_list">
+              <p class="info_text">基本信息：</p>
+              <p class="info_text info_cell">
+                <span class="text_grey">工作区域名称：</span>
+                <span v-text="(detail && detail['namespace']) || '-'"></span>
+              </p>
+              <p class="info_text info_cell">
+                <span class="text_grey">中文名称：</span>
+                <span v-text="(detail && detail['workplace']) || '-'"></span>
+              </p>
+              <p class="info_text info_cell">
+                <span class="text_grey">描述信息：</span>
+                <span
+                  v-text="(detail && detail['workplacedesc']) || '-'"
+                ></span>
+              </p>
+            </div>
+            <div class="detail_list">
+              <p class="info_text">工作区域申请规格：</p>
+              <p class="info_text info_cell">
+                <span class="text_grey">CPU：</span>
+                <span v-text="(detail && detail['cpu']) || '-'"></span>
+              </p>
+              <p class="info_text info_cell">
+                <span class="text_grey"> 内存：</span>
+                <span v-text="(detail && detail['memory']) || '-'"></span>
+              </p>
+            </div>
+            <div class="detail_list">
+              <p class="info_text">申请时长：</p>
+              <p class="info_text info_cell">
+                <span class="text_grey"> 申请时长：</span>
+                <span
+                  v-text="(detail && detail['duration_time']) || '-'"
+                ></span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template slot="action">
+      <el-button type="defalut" size="mini" @click="hideDialog">
+        取消
+      </el-button>
+      <el-button
+        type="primary"
+        size="mini"
+        :loading="submitLoading"
+        @click="confrimAction"
+      >
+        确认提交
+      </el-button>
+    </template>
+  </apass-dialog>
+</template>
+
+<script>
+import apassDialog from "@/components/apass-dialog";
+
+export default {
+  components: { apassDialog },
+  data: () => ({
+    detail: null,
+    submitLoading: false,
+  }),
+  methods: {
+    showDialog() {
+      this.$refs.confrim.show();
+    },
+    hideDialog() {
+      this.$refs.confrim.hide();
+    },
+    getDetail(apply_id) {
+      this.$http
+        .get("/apaas/service/v3/resource/apply/distributionDisplay", {
+          params: {
+            apply_id: apply_id,
+          },
+        })
+        .then(({ data }) => {
+          if (data.success) {
+            let datas = data.data;
+
+            this.detail = {
+              ...datas,
+              cpu: `最高${datas.max_cpu}核，默认${datas.min_cpu}核`,
+              memory: `最高${datas.max_memory}GB，默认${datas.min_memory}GB`,
+            };
+          } else {
+            this.$message({
+              message: "获取详情失败",
+              type: "warning",
+            });
+          }
+        })
+        .catch((error) => {
+          this.$message({
+            message: "获取详情失败",
+            type: "warning",
+          });
+        });
+
+      this.showDialog();
+    },
+    confrimAction() {
+      this.submitLoading = true;
+
+      this.$http
+        .put("/apaas/service/v3/resource/apply/distribution", null, {
+          params: {
+            id: this.detail.id,
+            user_id: this.detail.user_id,
+          },
+        })
+        .then(({ data }) => {
+          this.submitLoading = false;
+
+          if (data.success) {
+            this.$message({
+              message: "分配成功",
+              type: "success",
+            });
+
+            this.$emit("allot-success");
+            this.hideDialog();
+          } else {
+            this.$message({
+              message: "分配失败",
+              type: "warning",
+            });
+          }
+        })
+        .catch((error) => {
+          this.submitLoading = false;
+
+          this.$message({
+            message: "分配失败",
+            type: "warning",
+          });
+        });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.confirm_container {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  align-content: flex-start;
+  flex-wrap: wrap;
+  text-align: left;
+}
+.info_list + .info_list,
+.detail_list + .detail_list {
+  margin-top: 15px;
+}
+.info_text {
+  font-size: 14px;
+  line-height: 27px;
+  color: #242c43;
+}
+.text_grey {
+  color: #8890a7;
+}
+.detail_title {
+  margin-bottom: 7px;
+}
+.detail_info {
+  background-color: #f8f9fd;
+  padding: 15px;
+  border-radius: 7px;
+  overflow: hidden;
+}
+.info_cell {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.info_cell > span:nth-child(1) {
+  width: 8em;
+  flex-shrink: 0;
+  text-align: right;
+  margin-right: 10px;
+}
+.info_cell > span:nth-child(2) {
+  flex-grow: 1;
+}
+</style>

src/components/apass-list.vue

@@ -143,10 +143,10 @@ export default {
     showListFilter: false,
     filter: {},
     searchValue: "",
-    pageSize: 15,
+    pageSize: 10,
     currentPage: 1,
     timer: null,
-    pageSizes: [15, 50, 100],
+    pageSizes: [10, 20, 50],
     selectFilter: [],
   }),
   methods: {

src/components/comments-pagination.vue

@@ -49,7 +49,7 @@ export default {
   data: () => ({}),
   computed: {
     totalPages() {
-      return Math.floor(this.total / this.pageSize) + 1 || 1;
+      return Math.ceil(this.total / this.pageSize) || 1;
     },
     preDisabled() {
       return this.currentPage === 1;

src/components/image-detail.vue

 <template>
   <div class="image_detail">
-    <apass-dialog ref="listdialog" :title="title" width="985px">
+    <apass-dialog ref="listdialog" :title="title" width="1200px">
       <template slot="content">
         <div class="apass_table">
           <el-table :data="imageData">
             <el-table-column width="20"></el-table-column>
-            <el-table-column label="版本号" align="left">
+            <el-table-column label="版本号" width="120" align="left">
               <template slot-scope="scope">
                 {{ scope.row.name }}
               </template>
@@ -15,6 +15,11 @@
                 {{ scope.row.author }}
               </template>
             </el-table-column>
+            <el-table-column label="镜像地址" align="left">
+              <template slot-scope="scope">
+                {{ scope.row.image_url }}
+              </template>
+            </el-table-column>
             <el-table-column label="创建时间" width="180" align="center">
               <template slot-scope="scope">
                 {{ dateTransform(scope.row.created) }}
@@ -25,7 +30,7 @@
                 {{ getSize(scope.row.size) }}
               </template>
             </el-table-column>
-            <el-table-column label="漏洞" width="160" align="center">
+            <el-table-column label="漏洞" align="center">
               <template slot-scope="scope">
                 <image-bugs
                   v-if="scope.row.scan_overview"

src/components/menu.vue

@@ -2,37 +2,54 @@
   <div class="menu">
     <img src="../assets/imgs/home_img_logo.png" alt class="logo" />
     <div style="float:right;cursor: pointer;position:relative;" class="user_hover">
-      <span v-if="userInfo.user_name && userInfo.user_name != ''" class="user">{{ userInfo.user_name }}</span>
+      <span
+        v-if="userInfo.user_name && userInfo.user_name != ''"
+        class="user"
+      >{{ userInfo.user_name }}</span>
       <span v-else @click="gotopage('login')" class="user">请登录</span>
-      <img :class="userInfo.picture_path ? 'user_pic' : 'user_default'" :src="
+      <img
+        :class="userInfo.picture_path ? 'user_pic' : 'user_default'"
+        :src="
           userInfo.picture_path || require('../assets/imgs/home_ic_user.png')
-        " />
+        "
+      />
       <div v-if="userInfo.user_name && userInfo.user_name != ''" class="user_menu">
-        <div v-for="(item, index) in user_arr" :key="index + 700" @click="gotopage(item.path)">
-          {{ item.name }}
-        </div>
+        <div
+          v-for="(item, index) in user_arr"
+          :key="index + 700"
+          @click="gotopage(item.path)"
+        >{{ item.name }}</div>
       </div>
       <div v-if="userInfo.user_name && userInfo.user_name != ''" class="sj"></div>
     </div>
-    <div style="float:right;cursor: pointer;position:relative;" class="shop_hover" @click="gotopage('/shop/shopping_cart')">
+    <div
+      style="float:right;cursor: pointer;position:relative;"
+      class="shop_hover"
+      @click="gotopage('/shop/shopping_cart')"
+    >
       <div class="car">
         <el-badge v-if="menuCartNum != 0" :value="menuCartNum" :max="99" class="number"></el-badge>
         <img src="../assets/imgs/home_ic_shop.png" alt class="car_img" />
       </div>
       <div v-if="userInfo.user_name && userInfo.user_name != ''" class="shop_menu">
         <div class="shop_list_title">最近加入的服务：</div>
-        <div v-for="(item, index) in shopping_list" :key="'shopping' + index" class="shop_list_cell shop_line">
-          <img :src="item.service.cover" class="shop_img" />
+        <div
+          v-for="(item, index) in shopping_list"
+          :key="'shopping' + index"
+          class="shop_list_cell shop_line"
+        >
+          <img :src="item.service_id == 0 ? item.application.logo : item.service.cover" class="shop_img" />
           <div class="shop_cell_msgs">
-            <p @click="getDetail(item.id)" class="shop_cell_name over_one">
-              {{ item.service_id == 0 ? item.application.app_name : item.service.name }}
-            </p>
-            <p class="shop_cell_msg bover_one">
-              {{ item.service_id == 0 ? item.application.ywly : item.service.sectors_name }}
-            </p>
-            <p class="shop_cell_msg over_one">
-              {{ item.service_id == 0 ? item.application.org : item.service.organization_name }}
-            </p>
+            <p
+              @click="getDetail(item.id)"
+              class="shop_cell_name over_one"
+            >{{ item.service_id == 0 ? item.application.app_name : item.service.name }}</p>
+            <p
+              class="shop_cell_msg bover_one"
+            >{{ item.service_id == 0 ? item.application.ywly_name : item.service.sectors_name }}</p>
+            <p
+              class="shop_cell_msg over_one"
+            >{{ item.service_id == 0 ? item.application.org_name : item.service.organization_name }}</p>
           </div>
           <div>
             <img @click.stop="deleteItem(item.id)" src="../assets/imgs/ic_delete.png" alt />
@@ -46,12 +63,20 @@
     </div>
 
     <div style="float:right">
-      <div v-for="(item, index) in menu_arr" :key="index + 200" class="menu_box user_hover" @click="navAction(item.visit_url)" :style="{ color: now_menu == item.visit_url ? '#fff' : '' }">
+      <div
+        v-for="(item, index) in menu_arr"
+        :key="index + 200"
+        class="menu_box user_hover"
+        @click="navAction(item.visit_url)"
+        :style="{ color: now_menu == item.visit_url ? '#fff' : '' }"
+      >
         {{ item.menu_name }}
         <div class="user_menu" v-if="item.Child && item.Child.length" style="left: 30px;">
-          <div v-for="(v, indexs) in item.Child" :key="indexs + 700" @click.stop="gotoChildPage(v, item.visit_url)">
-            {{ v.menu_name }}
-          </div>
+          <div
+            v-for="(v, indexs) in item.Child"
+            :key="indexs + 700"
+            @click.stop="gotoChildPage(v, item.visit_url)"
+          >{{ v.menu_name }}</div>
         </div>
         <div class="sj" v-if="item.Child && item.Child.length" style="left: 60px;"></div>
         <div class="bottom_show" v-if="now_menu == item.visit_url"></div>
@@ -140,7 +165,6 @@ export default {
         this.now_menu = parent;
         window.sessionStorage.setItem("menuVisitUrl", parent);
       }
-      
     },
     getList() {
       this.$api.serviceShop.getShoppingCart().then(response => {

src/components/organization-list/organization-card.vue

 <template>
   <div class="organization_card">
-    <a class="remove_btn" @click.prevent="deleteAction">
+    <a class="remove_btn" @click.prevent="deleteAction" v-if="!hideDelete">
       <i class="el-icon-close"></i>
     </a>
     <div class="organization_card-icon">
-      <el-avatar shape="square" :size="56" fit="cover" :src="data.picture_path" />
+      <el-avatar
+        shape="square"
+        :size="56"
+        fit="cover"
+        :src="data.picture_path"
+      />
     </div>
     <div class="organization_card-info">
       <p
@@ -52,9 +57,12 @@ export default {
       type: String,
       default: 0,
     },
+    hideDelete: {
+      type: Boolean,
+      default: false,
+    },
   },
-  created(){
-  },
+  created() {},
   methods: {
     deleteAction() {
       this.$emit("delete-action", this.data);

src/components/organization-list/organization-list.vue

@@ -5,6 +5,7 @@
       :key="'organization_card_' + index"
       :data="item"
       @delete-action="deleteAction"
+      :hide-delete="hideDelete"
       :details-url="detailsUrl"
       :style="{ width: 'calc(100% / ' + rowNum + ' - 36px)' }"
     ></organization-card>
@@ -27,6 +28,10 @@ export default {
       type: String,
       default: 0,
     },
+    hideDelete: {
+      type: Boolean,
+      default: false,
+    },
   },
   data: () => ({
     rowNum: 5,

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

@@ -40,7 +40,9 @@ export default {
   }),
   computed: {
     tableData() {
-      return this.data.filter((item) => item.type === this.type);
+      return this.data.filter(
+        (item) => item.type === this.type || item.type === 3
+      );
     },
   },
 };

src/components/shop-cloud/shop-cloud.vue

@@ -53,48 +53,78 @@
                   <el-col :span="22">
                     <el-form-item prop="workplacedesc" class="form_item">
                       <div class="form_item_title">描述信息：</div>
-                      <el-input type="textarea" v-model="formNew.workplacedesc" placeholder="请输入工作区域描述信息"></el-input>
+                      <el-input
+                        type="textarea"
+                        v-model="formNew.workplacedesc"
+                        placeholder="请输入工作区域描述信息"
+                      ></el-input>
                     </el-form-item>
                   </el-col>
                   <el-col :span="24">
                     <div class="form_title">工作区域申请规格</div>
                   </el-col>
                   <el-col :span="22">
-                    <el-form-item class="form_item input_has_right">
+                    <el-form-item prop="cpu" class="form_item input_has_right">
                       <div class="form_item_title">CPU：</div>
                       <el-select v-model="formNew.cpu" placeholder="请选择CPU使用量">
-                        <el-option v-for="item in optionsCPU" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                        <el-option
+                          v-for="item in optionsCPU"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        ></el-option>
                       </el-select>
                       <div class="input_right input_right_top">核</div>
                     </el-form-item>
                   </el-col>
                   <el-col :span="22">
-                    <el-form-item class="form_item input_has_right">
+                    <el-form-item prop="memory" class="form_item input_has_right">
                       <div class="form_item_title">内存：</div>
                       <el-select v-model="formNew.memory" placeholder="请选择内存使用量">
-                        <el-option v-for="item in optionsRAM" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                        <el-option
+                          v-for="item in optionsRAM"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        ></el-option>
                       </el-select>
                       <div class="input_right input_right_top">GB</div>
                     </el-form-item>
                   </el-col>
                   <el-col :span="22">
-                    <el-form-item class="form_item input_has_right">
+                    <el-form-item prop="containerGroup" class="form_item input_has_right">
                       <div class="form_item_title">容器组：</div>
-                      <el-input-number v-model="formNew.containerGroup" controls-position="right" :min="0" :max="24" placeholder="取值范围[0，24]"></el-input-number>
+                      <el-input-number
+                        v-model="formNew.containerGroup"
+                        controls-position="right"
+                        :min="0"
+                        :max="24"
+                        placeholder="取值范围[0，24]"
+                      ></el-input-number>
                       <div class="input_right">个</div>
                     </el-form-item>
                   </el-col>
                   <el-col :span="11">
                     <el-form-item class="form_item input_has_right">
                       <div class="form_item_title">数据盘（可选）：</div>
-                      <el-input-number v-model="formNew.dataDisk" controls-position="right" :min="0" placeholder="请选择数量"></el-input-number>
+                      <el-input-number
+                        v-model="formNew.dataDisk"
+                        controls-position="right"
+                        :min="0"
+                        placeholder="请选择数量"
+                      ></el-input-number>
                       <div class="input_right">块</div>
                     </el-form-item>
                   </el-col>
                   <el-col :span="11">
                     <el-form-item class="form_item input_has_right">
                       <div class="form_item_title">每块数据盘容量：</div>
-                      <el-input-number v-model="formNew.perDataDisk" controls-position="right" :min="0" placeholder="请选择容量"></el-input-number>
+                      <el-input-number
+                        v-model="formNew.perDataDisk"
+                        controls-position="right"
+                        :min="0"
+                        placeholder="请选择容量"
+                      ></el-input-number>
                       <div class="input_right">GB</div>
                     </el-form-item>
                   </el-col>
@@ -105,16 +135,28 @@
                     <div class="form_item_title">CPU：</div>
                   </el-col>
                   <el-col :span="11">
-                    <el-form-item class="form_item input_has_left_right">
+                    <el-form-item prop="perCPUs" class="form_item input_has_left_right">
                       <div class="input_left">最高</div>
-                      <el-input-number v-model="formNew.perCPUs" controls-position="right" :min="0" :max="10" placeholder="请选择CPU最高使用量"></el-input-number>
+                      <el-input-number
+                        v-model="formNew.perCPUs"
+                        controls-position="right"
+                        :min="0"
+                        :max="10"
+                        placeholder="请选择CPU最高使用量"
+                      ></el-input-number>
                       <div class="input_right">核</div>
                     </el-form-item>
                   </el-col>
                   <el-col :span="11">
-                    <el-form-item class="form_item input_has_left_right">
+                    <el-form-item prop="perCPU" class="form_item input_has_left_right">
                       <div class="input_left">默认</div>
-                      <el-input-number v-model="formNew.perCPU" controls-position="right" :min="0" :max="10" placeholder="请选择CPU默认使用量"></el-input-number>
+                      <el-input-number
+                        v-model="formNew.perCPU"
+                        controls-position="right"
+                        :min="0"
+                        :max="10"
+                        placeholder="请选择CPU默认使用量"
+                      ></el-input-number>
                       <div class="input_right">核</div>
                     </el-form-item>
                   </el-col>
@@ -122,16 +164,28 @@
                     <div class="form_item_title">内存：</div>
                   </el-col>
                   <el-col :span="11">
-                    <el-form-item class="form_item input_has_left_right">
+                    <el-form-item prop="perRAMs" class="form_item input_has_left_right">
                       <div class="input_left">最高</div>
-                      <el-input-number v-model="formNew.perRAMs" controls-position="right" :min="0" :max="10" placeholder="请选择内存最高使用量"></el-input-number>
+                      <el-input-number
+                        v-model="formNew.perRAMs"
+                        controls-position="right"
+                        :min="0"
+                        :max="10"
+                        placeholder="请选择内存最高使用量"
+                      ></el-input-number>
                       <div class="input_right">核</div>
                     </el-form-item>
                   </el-col>
                   <el-col :span="11">
-                    <el-form-item class="form_item input_has_left_right">
+                    <el-form-item prop="perRAM" class="form_item input_has_left_right">
                       <div class="input_left">默认</div>
-                      <el-input-number v-model="formNew.perRAM" controls-position="right" :min="0" :max="10" placeholder="请选择内存默认使用量"></el-input-number>
+                      <el-input-number
+                        v-model="formNew.perRAM"
+                        controls-position="right"
+                        :min="0"
+                        :max="10"
+                        placeholder="请选择内存默认使用量"
+                      ></el-input-number>
                       <div class="input_right">核</div>
                     </el-form-item>
                   </el-col>
@@ -139,11 +193,24 @@
                     <div class="form_title">其他信息</div>
                   </el-col>
                   <el-col :span="22">
-                    <el-form-item class="form_item input_has_right_select">
+                    <el-form-item prop="appDuration" class="form_item input_has_right_select">
                       <div class="form_item_title">申请时长：</div>
-                      <el-input-number v-model="formNew.appDuration" controls-position="right" :min="0"></el-input-number>
-                      <el-select v-model="formNew.durType" class="input_right_select" placeholder="请选择申请时长">
-                        <el-option v-for="item in durationOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                      <el-input-number
+                        v-model="formNew.appDuration"
+                        controls-position="right"
+                        :min="0"
+                      ></el-input-number>
+                      <el-select
+                        v-model="formNew.durType"
+                        class="input_right_select"
+                        placeholder="请选择申请时长"
+                      >
+                        <el-option
+                          v-for="item in durationOptions"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        ></el-option>
                       </el-select>
                     </el-form-item>
                   </el-col>
@@ -151,7 +218,14 @@
                     <el-form-item class="form_item">
                       <div class="form_item_title">申请文件：</div>
                       <info-list :list_arr="docTemplate" class="doc_template"></info-list>
-                      <upload-file :multiple="false" :max="1" type="zip" :readOnly="false" :drag="true" @getNewList="getNewList"></upload-file>
+                      <upload-file
+                        :multiple="false"
+                        :max="1"
+                        type="zip"
+                        :readOnly="false"
+                        :drag="true"
+                        @getNewList="getNewList"
+                      ></upload-file>
                     </el-form-item>
                   </el-col>
                 </el-row>
@@ -165,15 +239,20 @@
               <div class="select_title">选择要进行调整的工作区域：</div>
               <div class="form_item">
                 <el-select v-model="workSpace" @change="getForm" placeholder="请选择">
-                  <el-option v-for="(item, index) in workSpaceOptions" :key="index" :label="item.namespace" :value="index"></el-option>
+                  <el-option
+                    v-for="(item, index) in workSpaceOptions"
+                    :key="index"
+                    :label="item.namespace"
+                    :value="index"
+                  ></el-option>
                 </el-select>
               </div>
             </el-col>
           </el-row>
-          <div v-if="formShow">
+          <div v-show="formShow">
             <el-row>
               <el-col :span="12">
-                <el-form ref="formNew" :model="formOld">
+                <el-form ref="formOld" :model="formOld" :rules="ruleOld">
                   <el-row>
                     <el-col :span="24">
                       <div class="form_title">工作区域规格调整</div>
@@ -181,55 +260,95 @@
                     <el-col :span="24">
                       <div class="now_spec">当前规格：</div>
                       <div class="now_spec_cards">
-                        <div class="now_spec_card" v-for="(item, index) in specArr" :key="index + 'spec'">
-                          <img class="now_spec_card_img" :src="require('@/assets/imgs/' + item.src + '.png')" />
+                        <div
+                          class="now_spec_card"
+                          v-for="(item, index) in specArr"
+                          :key="index + 'spec'"
+                        >
+                          <img
+                            class="now_spec_card_img"
+                            :src="require('@/assets/imgs/' + item.src + '.png')"
+                          />
                           <span class="now_spec_card_title">{{ item.title }}</span>
-                          <span class="now_spec_card_val">{{ item.val + " " + (item.title == "CPU" ? "核" : item.title == "内存" ? "GB" : "个") }}</span>
+                          <span
+                            class="now_spec_card_val"
+                          >{{ item.val + " " + (item.title == "CPU" ? "核" : item.title == "内存" ? "GB" : "个") }}</span>
                         </div>
                       </div>
                     </el-col>
                     <el-col :span="22">
-                      <el-form-item class="form_item input_has_right">
+                      <el-form-item prop="cpu" class="form_item input_has_right">
                         <div class="form_item_title">申请CPU调整为：</div>
                         <el-select v-model="formOld.cpu" placeholder="请选择CPU使用量">
-                          <el-option v-for="item in optionsCPU" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                          <el-option
+                            v-for="item in optionsCPU"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                          ></el-option>
                         </el-select>
                         <div class="input_right input_right_top">核</div>
                       </el-form-item>
                     </el-col>
                     <el-col :span="22">
-                      <el-form-item class="form_item input_has_right">
+                      <el-form-item prop="memory" class="form_item input_has_right">
                         <div class="form_item_title">申请内存调整为：</div>
                         <el-select v-model="formOld.memory" placeholder="请选择内存使用量">
-                          <el-option v-for="item in optionsRAM" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                          <el-option
+                            v-for="item in optionsRAM"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                          ></el-option>
                         </el-select>
                         <div class="input_right input_right_top">GB</div>
                       </el-form-item>
                     </el-col>
                     <el-col :span="22">
-                      <el-form-item class="form_item input_has_right">
+                      <el-form-item prop="containerGroup" class="form_item input_has_right">
                         <div class="form_item_title">申请容器组调整为：</div>
-                        <el-input-number v-model="formOld.containerGroup" controls-position="right" :min="0" :max="24" placeholder="取值范围[0，24]"></el-input-number>
+                        <el-input-number
+                          v-model="formOld.containerGroup"
+                          controls-position="right"
+                          :min="0"
+                          :max="24"
+                          placeholder="取值范围[0，24]"
+                        ></el-input-number>
                         <div class="input_right">个</div>
                       </el-form-item>
                     </el-col>
                     <el-col :span="22" v-if="dataDiskList.length != 0">
                       <el-form-item class="form_item input_has_right">
                         <div class="form_item_title">调整数据盘：</div>
-                        <table-um ref="apply_service_state_table" :headers="dataDiskHeaders" :stripe="true" :datas="dataDiskList" @primary-del="delItem"></table-um>
+                        <table-um
+                          ref="apply_service_state_table"
+                          :headers="dataDiskHeaders"
+                          :stripe="true"
+                          :datas="dataDiskList"
+                          @primary-del="delItem"
+                          height="300"
+                        ></table-um>
                       </el-form-item>
                     </el-col>
                     <el-col :span="11">
                       <el-form-item class="form_item input_has_right">
                         <div class="form_item_title">增加数据盘：</div>
-                        <el-input-number v-model="formOld.dataDisk" controls-position="right" :min="0"></el-input-number>
+                        <el-input-number
+                          v-model="formOld.dataDisk"
+                          controls-position="right"
+                          :min="0"
+                        ></el-input-number>
                         <div class="input_right">块</div>
                       </el-form-item>
                     </el-col>
                     <el-col :span="11">
                       <el-form-item class="form_item input_has_right">
                         <div class="form_item_title">每块数据盘容量：</div>
-                        <el-input-number v-model="formOld.perDataDisk" controls-position="right" :min="0"></el-input-number>
+                        <el-input-number
+                          v-model="formOld.perDataDisk"
+                          controls-position="right"
+                          :min="0"
+                        ></el-input-number>
                         <div class="input_right">GB</div>
                       </el-form-item>
                     </el-col>
@@ -239,13 +358,24 @@
                     <el-col :span="24">
                       <div class="now_spec">当前规格：</div>
                       <div class="now_spec_cards">
-                        <div class="now_rqz_card" v-for="(item, index) in rqzArr" :key="index + 'rqz'">
-                          <img class="now_rqz_card_img" :src="require('@/assets/imgs/' + item.src + '.png')" />
+                        <div
+                          class="now_rqz_card"
+                          v-for="(item, index) in rqzArr"
+                          :key="index + 'rqz'"
+                        >
+                          <img
+                            class="now_rqz_card_img"
+                            :src="require('@/assets/imgs/' + item.src + '.png')"
+                          />
                           <span class="now_rqz_card_title">{{ item.title }}</span>
                           <div class="now_rqz_card_val_div">
-                            <span class="now_rqz_card_val">最高&nbsp;{{ item.max }}&nbsp;{{ item.title == "CPU" ? "核" : "GB" }}</span>
+                            <span
+                              class="now_rqz_card_val"
+                            >最高&nbsp;{{ item.max }}&nbsp;{{ item.title == "CPU" ? "核" : "GB" }}</span>
                             <br />
-                            <span class="now_rqz_card_val">默认&nbsp;{{ item.default }}&nbsp;{{ item.title == "CPU" ? "核" : "GB" }}</span>
+                            <span
+                              class="now_rqz_card_val"
+                            >默认&nbsp;{{ item.default }}&nbsp;{{ item.title == "CPU" ? "核" : "GB" }}</span>
                           </div>
                         </div>
                       </div>
@@ -254,16 +384,28 @@
                       <div class="form_item_title">CPU：</div>
                     </el-col>
                     <el-col :span="11">
-                      <el-form-item class="form_item input_has_left_right">
+                      <el-form-item prop="perCPUs" class="form_item input_has_left_right">
                         <div class="input_left">最高</div>
-                        <el-input-number v-model="formOld.perCPUs" controls-position="right" :min="0" :max="10" placeholder="请设置CPU最高使用量"></el-input-number>
+                        <el-input-number
+                          v-model="formOld.perCPUs"
+                          controls-position="right"
+                          :min="0"
+                          :max="10"
+                          placeholder="请设置CPU最高使用量"
+                        ></el-input-number>
                         <div class="input_right">核</div>
                       </el-form-item>
                     </el-col>
                     <el-col :span="11">
-                      <el-form-item class="form_item input_has_left_right">
+                      <el-form-item prop="perCPU" class="form_item input_has_left_right">
                         <div class="input_left">默认</div>
-                        <el-input-number v-model="formOld.perCPU" controls-position="right" :min="0" :max="10" placeholder="请设置CPU默认使用量"></el-input-number>
+                        <el-input-number
+                          v-model="formOld.perCPU"
+                          controls-position="right"
+                          :min="0"
+                          :max="10"
+                          placeholder="请设置CPU默认使用量"
+                        ></el-input-number>
                         <div class="input_right">核</div>
                       </el-form-item>
                     </el-col>
@@ -271,16 +413,28 @@
                       <div class="form_item_title">内存：</div>
                     </el-col>
                     <el-col :span="11">
-                      <el-form-item class="form_item input_has_left_right">
+                      <el-form-item prop="perRAMs" class="form_item input_has_left_right">
                         <div class="input_left">最高</div>
-                        <el-input-number v-model="formOld.perRAMs" controls-position="right" :min="0" :max="10" placeholder="请设置内存最高使用量"></el-input-number>
+                        <el-input-number
+                          v-model="formOld.perRAMs"
+                          controls-position="right"
+                          :min="0"
+                          :max="10"
+                          placeholder="请设置内存最高使用量"
+                        ></el-input-number>
                         <div class="input_right">核</div>
                       </el-form-item>
                     </el-col>
                     <el-col :span="11">
-                      <el-form-item class="form_item input_has_left_right">
+                      <el-form-item prop="perRAM" class="form_item input_has_left_right">
                         <div class="input_left">默认</div>
-                        <el-input-number v-model="formOld.perRAM" controls-position="right" :min="0" :max="10" placeholder="请设置内存默认使用量"></el-input-number>
+                        <el-input-number
+                          v-model="formOld.perRAM"
+                          controls-position="right"
+                          :min="0"
+                          :max="10"
+                          placeholder="请设置内存默认使用量"
+                        ></el-input-number>
                         <div class="input_right">核</div>
                       </el-form-item>
                     </el-col>
@@ -290,7 +444,10 @@
                         <div class="now_spec">当前规格：</div>
                         <div class="now_spec_card_time">
                           <div>
-                            <img class="now_spec_card_time_img" :src="require('@/assets/imgs/ic_shijian.png')" />
+                            <img
+                              class="now_spec_card_time_img"
+                              :src="require('@/assets/imgs/ic_shijian.png')"
+                            />
                             <span class="now_spec_card_time_title">当前工作区域到期时间</span>
                             <span class="now_spec_card_time_val">2020-05-05 08:00:00</span>
                           </div>
@@ -298,11 +455,24 @@
                       </el-col>
                     </el-col>
                     <el-col :span="22">
-                      <el-form-item class="form_item input_has_right_select">
+                      <el-form-item prop="appDuration" class="form_item input_has_right_select">
                         <div class="form_item_title">申请续期：</div>
-                        <el-input-number v-model="formOld.appDuration" controls-position="right" :min="0"></el-input-number>
-                        <el-select v-model="formOld.durType" class="input_right_select" placeholder="请选择续期时长">
-                          <el-option v-for="item in durationOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                        <el-input-number
+                          v-model="formOld.appDuration"
+                          controls-position="right"
+                          :min="0"
+                        ></el-input-number>
+                        <el-select
+                          v-model="formOld.durType"
+                          class="input_right_select"
+                          placeholder="请选择续期时长"
+                        >
+                          <el-option
+                            v-for="item in durationOptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                          ></el-option>
                         </el-select>
                       </el-form-item>
                     </el-col>
@@ -310,7 +480,14 @@
                       <el-form-item class="form_item">
                         <div class="form_item_title">申请文件：</div>
                         <info-list :list_arr="docTemplate" class="doc_template"></info-list>
-                        <upload-file :multiple="false" :max="1" type="zip" :readOnly="false" :drag="true" @getNewList="getNewListOld"></upload-file>
+                        <upload-file
+                          :multiple="false"
+                          :max="1"
+                          type="zip"
+                          :readOnly="false"
+                          :drag="true"
+                          @getNewList="getNewListOld"
+                        ></upload-file>
                       </el-form-item>
                     </el-col>
                   </el-row>
@@ -387,7 +564,9 @@
               </div>
               <div class="dia_block_item_in">
                 <span class="dia_block_item_title">数据盘：</span>
-                <span class="dia_block_item_val">{{ diaForm.dataDisk }}块，每块{{ diaForm.perDataDisk }}GB</span>
+                <span
+                  class="dia_block_item_val"
+                >{{ diaForm.dataDisk }}块，每块{{ diaForm.perDataDisk }}GB</span>
               </div>
             </div>
             <span class="dia_item_all_title">单个容器组规格：</span>
@@ -411,7 +590,9 @@
             <div class="dia_block_item">
               <div class="dia_block_item_in">
                 <span class="dia_block_item_title">申请时长</span>
-                <span class="dia_block_item_val">{{ diaForm.appDuration }}{{ diaForm.durType == 1 ? "个月" : "年" }}</span>
+                <span
+                  class="dia_block_item_val"
+                >{{ diaForm.appDuration }}{{ diaForm.durType == 1 ? "个月" : "年" }}</span>
               </div>
             </div>
           </div>
@@ -474,13 +655,17 @@
                   <span class="dia_block_item_title">容器组：</span>
                   <span class="dia_block_item_val">{{ diaForm.containerGroup }}个</span>
                 </div>
-                <div class="dia_block_item_in">
+                <div class="dia_block_item_in" v-if="diaForm.dataDisk != 0">
                   <span class="dia_block_item_title">新增数据盘：</span>
-                  <span class="dia_block_item_val">{{ diaForm.dataDisk }}块，每块{{ diaForm.perDataDisk }}GB</span>
+                  <span
+                    class="dia_block_item_val"
+                  >{{ diaForm.dataDisk }}块，每块{{ diaForm.perDataDisk }}GB</span>
                 </div>
-                <div class="dia_block_item_in">
+                <div class="dia_block_item_in" v-if="delDataDiskList.length != 0">
                   <span class="dia_block_item_title">删除数据盘：</span>
-                  <span class="dia_block_item_val">{{ dataDiskList.join(",") }}</span>
+                  <span
+                    class="dia_block_item_val"
+                  >{{ delDataDiskList.map(item => {return item.app_name}).join("、") }}</span>
                 </div>
               </div>
               <span class="dia_item_all_title">单个容器组规格：</span>
@@ -504,11 +689,18 @@
               <div class="dia_block_item">
                 <div class="dia_block_item_in">
                   <span class="dia_block_item_title">是否续期：</span>
-                  <span class="dia_block_item_val">{{ diaForm.appDuration && diaForm.appDuration != 0 ? "是": "否" }}</span>
+                  <span
+                    class="dia_block_item_val"
+                  >{{ diaForm.appDuration && diaForm.appDuration != 0 ? "是": "否" }}</span>
                 </div>
-                <div class="dia_block_item_in" v-if="diaForm.appDuration && diaForm.appDuration != 0">
+                <div
+                  class="dia_block_item_in"
+                  v-if="diaForm.appDuration && diaForm.appDuration != 0"
+                >
                   <span class="dia_block_item_title">续期时长：</span>
-                  <span class="dia_block_item_val">{{ diaForm.appDuration }}{{ diaForm.durType == 1 ? "个月" : "年" }}</span>
+                  <span
+                    class="dia_block_item_val"
+                  >{{ diaForm.appDuration }}{{ diaForm.durType == 1 ? "个月" : "年" }}</span>
                 </div>
               </div>
             </div>
@@ -559,28 +751,59 @@ export default {
       perRAMs: undefined,
       perRAM: undefined,
       appDuration: undefined,
-      durType: "",
+      durType: 1,
       apply_file: "",
       apply_file_name: ""
     },
     ruleNew: {
       namespace: [
-        { required: true, message: "请输入联系电话", trigger: "blur" }
+        { required: true, message: "请输入工作区域名称", trigger: "blur" }
       ],
       workplace: [
-        { required: true, message: "请输入联系电话", trigger: "blur" }
+        { required: true, message: "请输入中文名称", trigger: "blur" }
+      ],
+      workplacedesc: [
+        { required: true, message: "请输入描述信息", trigger: "blur" }
+      ],
+      cpu: [{ required: true, message: "请选择CPU使用量", trigger: "blur" }],
+      memory: [
+        { required: true, message: "请选择内存使用量", trigger: "blur" }
+      ],
+      containerGroup: [
+        { required: true, message: "请输入容器组规格", trigger: "blur" }
+      ],
+      perCPUs: [
+        { required: true, message: "请输入CPU最大使用量", trigger: "blur" }
+      ],
+      perCPU: [
+        { required: true, message: "请输入CPU默认使用量", trigger: "blur" }
+      ],
+      perRAMs: [
+        { required: true, message: "请输入内存最大使用量", trigger: "blur" }
+      ],
+      perRAM: [
+        { required: true, message: "请输入内存默认使用量", trigger: "blur" }
+      ],
+      appDuration: [
+        { required: true, message: "请输入申请时长", trigger: "blur" }
       ]
     },
-    durationOptions: [{ value: "1", label: "月" }, { value: "2", label: "年" }],
+    durationOptions: [
+      { value: 1, label: "月" },
+      { value: 2, label: "年" }
+    ],
     workSpace: "",
     workSpaceOptions: [],
-    optionsCPU: [{ value: "8", label: "8" }, { value: "16", label: "16" }],
+    optionsCPU: [
+      { value: "8", label: "8" },
+      { value: "16", label: "16" }
+    ],
     optionsRAM: [
       { value: "8", label: "8" },
       { value: "16", label: "16" },
       { value: "32", label: "32" }
     ],
-    formShow: true,
+    formShow: false,
     specArr: [
       { title: "CPU", val: "4", src: "ic_CPU" },
       { title: "内存", val: "4", src: "ic_neicun" },
@@ -599,9 +822,6 @@ export default {
       }
     ],
     formOld: {
-      namespace: "",
-      workplace: "",
-      workplacedesc: "",
       cpu: "",
       memory: "",
       containerGroup: undefined,
@@ -612,14 +832,11 @@ export default {
       perRAMs: undefined,
       perRAM: undefined,
       appDuration: undefined,
-      durType: "",
+      durType: 1,
       apply_file: "",
       apply_file_name: ""
     },
     paramsOld: {
-      namespace: "",
-      workplace: "",
-      workplacedesc: "",
       cpu: "",
       memory: "",
       containerGroup: undefined,
@@ -630,22 +847,54 @@ export default {
       perRAMs: undefined,
       perRAM: undefined,
       appDuration: undefined,
-      durType: "",
+      durType: 1,
       apply_file: "",
       apply_file_name: ""
     },
-    ruleOld: [],
+    ruleOld: {
+      namespace: [
+        { required: true, message: "请输入工作区域名称", trigger: "blur" }
+      ],
+      workplace: [
+        { required: true, message: "请输入中文名称", trigger: "blur" }
+      ],
+      workplacedesc: [
+        { required: true, message: "请输入描述信息", trigger: "blur" }
+      ],
+      cpu: [{ required: true, message: "请选择CPU使用量", trigger: "blur" }],
+      memory: [
+        { required: true, message: "请选择内存使用量", trigger: "blur" }
+      ],
+      containerGroup: [
+        { required: true, message: "请输入容器组规格", trigger: "blur" }
+      ],
+      perCPUs: [
+        { required: true, message: "请输入CPU最大使用量", trigger: "blur" }
+      ],
+      perCPU: [
+        { required: true, message: "请输入CPU默认使用量", trigger: "blur" }
+      ],
+      perRAMs: [
+        { required: true, message: "请输入内存最大使用量", trigger: "blur" }
+      ],
+      perRAM: [
+        { required: true, message: "请输入内存默认使用量", trigger: "blur" }
+      ],
+      appDuration: [
+        { required: true, message: "请输入申请时长", trigger: "blur" }
+      ]
+    },
     dialogVisible: false,
     diaForm: {},
     dataDiskHeaders: [
       {
         label: "数据盘容量",
-        prop: "capacity",
+        prop: "disk_cap",
         align: "center"
       },
       {
         label: "部署的应用",
-        prop: "app",
+        prop: "app_name",
         align: "center"
       },
       {
@@ -660,20 +909,7 @@ export default {
         ]
       }
     ],
-    dataDiskList: [
-      {
-        capacity: "www",
-        app: "wewaewa"
-      },
-      {
-        capacity: "www",
-        app: "wewaewa"
-      },
-      {
-        capacity: "www",
-        app: "wewaewa"
-      }
-    ],
+    dataDiskList: [],
     delDataDiskList: []
   }),
   mounted() {
@@ -702,12 +938,13 @@ export default {
         this.formOld.cpu = paramsOld.cpu;
         this.formOld.memory = paramsOld.memory;
         this.formOld.containerGroup = paramsOld.containers;
-        this.formOld.dataDisk = paramsOld.dataDisk;
-        this.formOld.perDataDisk = paramsOld.perDataDisk;
+        this.formOld.dataDisk = "";
+        this.formOld.perDataDisk = "";
         this.formOld.perCPUs = paramsOld.one_cpu_max;
         this.formOld.perCPU = paramsOld.one_cpu_min;
         this.formOld.perRAMs = paramsOld.one_memory_max;
         this.formOld.perRAM = paramsOld.one_memory_min;
+        this.dataDiskList = paramsOld.disk_list;
         this.formShow = true;
       } else {
         this.formShow = false;
@@ -716,13 +953,28 @@ export default {
     submitApp() {
       let formParams = {};
       if (this.activeName == 0) {
-        formParams = this.formNew;
+        this.$refs["formNew"].validate(valid => {
+          if (valid) {
+            formParams = this.formNew;
+            this.dialogVisible = true;
+            this.diaForm = Object.assign(formParams, this.form);
+          } else {
+            console.log("error submit!!");
+            return false;
+          }
+        });
       } else if (this.activeName == 1) {
-        formParams = this.formOld;
+        this.$refs["formOld"].validate(valid => {
+          if (valid) {
+            formParams = this.formOld;
+            this.dialogVisible = true;
+            this.diaForm = Object.assign(formParams, this.form);
+          } else {
+            console.log("error submit!!");
+            return false;
+          }
+        });
       }
-      this.dialogVisible = true;
-      this.diaForm = Object.assign(formParams, this.form);
-      console.log(formParams, this.diaForm);
     },
     determineSubmit() {
       if (this.activeName == 0) {
@@ -795,11 +1047,9 @@ export default {
       });
     },
     delItem(val) {
-      this.delDataDiskList.push(val.app);
-      let delItem = this.dataDiskList.findIndex(v => v.app === val.app);
-      if (delItem) {
-        console.log(delItem);
-      }
+      let delIndex = this.dataDiskList.findIndex(v => v.id === val.id);
+      this.dataDiskList.splice(delIndex, 1);
+      this.delDataDiskList.push(val);
     }
   }
 };
@@ -1041,7 +1291,7 @@ export default {
   color: #242c43;
 }
 .cloud_form .input_right_top {
-  top: 41px;
+  top: 40px;
 }
 .cloud_form .el-select {
   width: 100%;

src/components/shopping-cart/shopping-cart-cell.vue

@@ -35,10 +35,10 @@
                 v-if="cellIsService"
                 class="shopping_cell_type"
               >{{ cellItems.service.sectors_name }}</div>
-              <div v-else class="shopping_cell_type">{{ cellItems.application.ywly }}</div>
+              <div v-else class="shopping_cell_type">{{ cellItems.application.ywly_name }}</div>
               <div
                 class="shopping_cell_creator"
-              >{{ cellIsService ? cellItems.service.organization_name:cellItems.application.org }}</div>
+              >{{ cellIsService ? cellItems.service.organization_name:cellItems.application.org_name }}</div>
             </div>
           </div>
         </div>
@@ -119,13 +119,15 @@
         </div>
       </el-col>
       <el-col :span="4" class="shopping_cell_num">
-        <el-input-number
-          :disabled="readOnly"
-          v-model="cellItems.duration"
-          @change="changeNum"
-          size="mini"
-          :min="1"
-        ></el-input-number>
+        <div v-if="cellIsService">
+          <el-input-number
+            :disabled="readOnly"
+            v-model="cellItems.duration"
+            @change="changeNum"
+            size="mini"
+            :min="1"
+          ></el-input-number>
+        </div>
       </el-col>
       <el-col :span="4" class="shopping_cell_options">
         <el-checkbox

src/main.js

@@ -37,6 +37,7 @@ import "echarts/lib/component/legend"; // 图例
 import "echarts/lib/component/title"; // 标题
 import 'echarts/lib/component/polar'; // 极坐标系
 import 'echarts/lib/chart/scatter'; // 散点图
+import 'echarts/lib/component/dataZoom'
 
 import Sparkline from 'vue-sparklines'
 

src/pages/service_shop/services_shop.vue

@@ -132,6 +132,7 @@ export default {
     this.init("hotdata");
     this.init("hgmap");
     this.init("zhapp");
+    this.getGeneralOverview();
   }
 };
 </script>

src/pages/user/order/order_detail.vue

@@ -177,26 +177,25 @@
       </div>
       <div v-if="orderDetail.order_type == 3">
         <div class="detail_s_title">工作区域描述：</div>
-        <div class="detail_app_scence">{{ orderDetail.scene }}</div>
       </div>
       <div v-if="orderDetail.order_type == 3" class="params_block">
         <span class="params_block_title">申请规格：</span>
         <div class="params_block_item">
           <div class="params_block_item_in">
             <span class="params_block_item_title">CPU：</span>
-            <span class="params_block_item_val">2核</span>
+            <span class="params_block_item_val">{{ orderDetail.cpu }}核</span>
           </div>
           <div class="params_block_item_in">
             <span class="params_block_item_title">内存：</span>
-            <span class="params_block_item_val">4GB</span>
+            <span class="params_block_item_val">{{ orderDetail.memory }}GB</span>
           </div>
           <div class="params_block_item_in">
             <span class="params_block_item_title">容器组：</span>
-            <span class="params_block_item_val">2核</span>
+            <span class="params_block_item_val">{{ orderDetail.memory }}核</span>
           </div>
           <div class="params_block_item_in">
             <span class="params_block_item_title">数据盘：</span>
-            <span class="params_block_item_val">2核</span>
+            <span class="params_block_item_val">{{ orderDetail.disk_num}}块，每块{{orderDetail.disk_cap }}GB</span>
           </div>
         </div>
         <span class="params_block_title margin_top_20">单个容器组规格：</span>
@@ -204,15 +203,15 @@
           <div class="params_block_item_in">
             <span class="params_block_item_title">CPU：</span>
             <p class="params_block_item_val">
-              <span class="val_has_2">最高&nbsp;2核</span>
-              <span class="val_has_2">默认&nbsp;2核</span>
+              <span class="val_has_2">最高&nbsp;{{ orderDetail.one_cpu_max }}核</span>
+              <span class="val_has_2">默认&nbsp;{{ orderDetail.one_cpu_min }}核</span>
             </p>
           </div>
           <div class="params_block_item_in">
             <span class="params_block_item_title">CPU：</span>
             <p class="params_block_item_val">
-              <span class="val_has_2">最高&nbsp;2核</span>
-              <span class="val_has_2">默认&nbsp;2核</span>
+              <span class="val_has_2">最高&nbsp;{{ orderDetail.one_memory_max }}核</span>
+              <span class="val_has_2">默认&nbsp;{{ orderDetail.one_memory_min }}核</span>
             </p>
           </div>
         </div>
@@ -706,7 +705,7 @@ export default {
   line-height: 22px;
 }
 .params_block_title {
-  padding-left: 10px;
+  padding-left: 5px;
   color: #242c43;
 }
 .params_block_item {
@@ -719,12 +718,12 @@ export default {
 }
 .params_block_item_title {
   color: #8890a7;
-  width: 120px;
+  width: 80px;
   text-align: right;
 }
 .params_block_item_val {
   color: #242c43;
-  width: calc(100% - 130px);
+  width: calc(100% - 82px);
 }
 .val_has_2 {
   margin-right: 20px;

src/pages/workbench/app_build.vue

@@ -384,6 +384,7 @@ export default {
           this.image_noMore = false;
         })
         .catch((error) => {
+          this.image_loading = false;
           console.log(error);
         });
     },

src/pages/workbench/fwgl/cloud-detail.vue

+<template>
+  <div>
+    <el-breadcrumb separator="/" class="bread_crumb1 bread_left">
+      <el-breadcrumb-item
+        :to="{ path: getUrl() }"
+      >{{ this.$route.params.level == 1 ? $t('lang.cloudResourcesService') : $t('lang.cloudResourcesManagement') }}</el-breadcrumb-item>
+      <el-breadcrumb-item>{{ $t('lang.cloudResourcesDetail') }}</el-breadcrumb-item>
+    </el-breadcrumb>
+    <BlockRadius class="in_cloud_block">
+      <div class="cloud_block_head">
+        <div class="head_left">
+          <el-image class="head_left_img" :src="url" fit="fill"></el-image>
+        </div>
+        <div class="head_right">
+          <div class="head_right_name">aPaaS V3.0</div>
+          <div class="head_right_msg">
+            <p class="head_right_msg_p">
+              申请用户：
+              <span class="head_right_msg_item">张三</span>
+              联系电话：
+              <span class="head_right_msg_item">12345678901</span>
+              资源申请状态：
+              <span
+                class="head_right_msg_item"
+                :class="true ? 'apply_success' : ''"
+              >审批通过</span>
+            </p>
+            <p class="head_right_msg_p">
+              业务系统名：
+              <span class="head_right_msg_item">aPaaS V3.0 一期</span>
+              资源申请时间：
+              <span class="head_right_msg_item">2020-02-12 15:54:21</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="cloud_params">
+        <InfoList @download="download" :list_arr="list_arr" class="detail_s_val">
+          <div ref="ApplyParams" slot="ApplyParams" class="params_block">
+            <span class="params_block_title">申请规格：</span>
+            <div class="params_block_item">
+              <div class="params_block_item_in">
+                <span class="params_block_item_title">CPU：</span>
+                <span class="params_block_item_val">{{ orderDetail.cpu }}核</span>
+              </div>
+              <div class="params_block_item_in">
+                <span class="params_block_item_title">内存：</span>
+                <span class="params_block_item_val">{{ orderDetail.memory }}GB</span>
+              </div>
+              <div class="params_block_item_in">
+                <span class="params_block_item_title">容器组：</span>
+                <span class="params_block_item_val">{{ orderDetail.memory }}核</span>
+              </div>
+              <div class="params_block_item_in">
+                <span class="params_block_item_title">数据盘：</span>
+                <span
+                  class="params_block_item_val"
+                >{{ orderDetail.disk_num}}块，每块{{orderDetail.disk_cap }}GB</span>
+              </div>
+            </div>
+            <span class="params_block_title margin_top_20">单个容器组规格：</span>
+            <div class="params_block_item">
+              <div class="params_block_item_in">
+                <span class="params_block_item_title">CPU：</span>
+                <div class="params_block_item_val">
+                  <span class="val_has_2">最高&nbsp;{{ orderDetail.one_cpu_max }}核</span>
+                  <span class="val_has_2">默认&nbsp;{{ orderDetail.one_cpu_min }}核</span>
+                </div>
+              </div>
+              <div class="params_block_item_in">
+                <span class="params_block_item_title">CPU：</span>
+                <div class="params_block_item_val">
+                  <span class="val_has_2">最高&nbsp;{{ orderDetail.one_memory_max }}核</span>
+                  <span class="val_has_2">默认&nbsp;{{ orderDetail.one_memory_min }}核</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div ref="ApplyDesc" slot="ApplyDesc">
+            {{ desc }}
+          </div>
+        </InfoList>
+      </div>
+    </BlockRadius>
+  </div>
+</template>
+
+<script>
+import BlockRadius from "@/components/general/block-radius";
+import InfoList from "@/components/infoList";
+import helper from "@/services/helper.js";
+export default {
+  components: {
+    BlockRadius,
+    InfoList
+  },
+  data() {
+    return {
+      url:
+        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+      orderDetail: {},
+      helper,
+      list_arr: [
+        {
+          title: "云资源详情：",
+          prop: "title"
+        },
+        {
+          title: "工作区域申请规格：",
+          type: "solt",
+          solt_name: "ApplyParams"
+        },
+        {
+          title: "资源申请文件：",
+          info: "2222222222222222222222.docs",
+          url: "",
+          type: "down"
+        },
+        {
+          title: "工作区域描述：",
+          type: "solt",
+          solt_name: "ApplyDesc",
+        }
+      ],
+      desc: "工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述："
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  mounted() {
+    this.getUrl();
+  },
+  methods: {
+    getUrl() {
+      return this.$route.path.substring(0, 9);
+    },
+    download() {}
+  }
+};
+</script>
+<style>
+.in_cloud_block {
+  margin: 0 20px;
+}
+.cloud_block_head {
+  padding-top: 10px;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 30px;
+}
+.head_left {
+  width: 150px;
+}
+.head_left_img {
+  width: 144px;
+  height: 144px;
+  border-radius: 8px;
+}
+.head_right {
+  width: calc(100% - 160px);
+}
+.head_right_name {
+  font-size: 18px;
+  font-weight: bold;
+  color: #0d1847;
+  line-height: 30px;
+  margin-left: 10px;
+  margin-bottom: 18px;
+}
+.head_right_msg {
+  border-radius: 8px;
+  height: 96px;
+  background-color: #f6f7fb;
+  padding: 10px 20px;
+}
+.head_right_msg_p {
+  font-size: 14px;
+  line-height: 38px;
+  color: #8890a7;
+}
+.head_right_msg_item {
+  display: inline-block;
+  font-size: 14px;
+  font-weight: bold;
+  color: #242c43;
+  margin-right: 48px;
+}
+.apply_success {
+  color: #515fe7;
+}
+.cloud_params .service_title {
+  padding: 0 10px;
+}
+.cloud_params p {
+  padding: 0 15px;
+}
+.cloud_params p span {
+  display: inline;
+  line-height: 21px;
+}
+.params_block {
+  background-color: #f8f9fd;
+  border-radius: 8px;
+  margin: 10px 0;
+  padding: 20px;
+  font-size: 14px;
+  line-height: 22px;
+}
+.params_block_title {
+  padding-left: 5px;
+  color: #242c43;
+}
+.params_block_item {
+  padding: 10px 0 0 0;
+}
+.params_block_item_in {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 5px;
+}
+.params_block_item_title {
+  color: #8890a7;
+  width: 80px;
+  text-align: right;
+}
+.params_block_item_val {
+  color: #242c43;
+  width: calc(100% - 82px);
+}
+.margin_top_20 {
+  display: block;
+  margin-top: 20px;
+}
+</style>

src/pages/workbench/fwgl/fwglList.vue

@@ -17,11 +17,11 @@
       </el-breadcrumb>
 
       <template slot="top">
-        <div class="cloud_info" v-if="cloud_zuzhi">
-          <div class="zuzhi_title">
-            <span>{{ cloud_zuzhi.org_name }}</span>
+        <div class="zuzhi_preview" v-if="cloud_zuzhi">
+          <div class="cloud_title">
+            <span>{{ userInfo && userInfo.department_name }}</span>
             <span>
-              {{ "在用工作区域：" + (cloud_zuzhi.used_area || 0) + "个" }}
+              {{ "在用工作区域：" + cloud_zuzhi.count_zy + "个" }}
             </span>
           </div>
           <div class="dashboard_contaner">
@@ -31,7 +31,7 @@
               :key="index"
             >
               <chart
-                :options="getDashboardOptions(item)"
+                :options="getDashboardOption(item)"
                 class="dashboard_chart"
               />
               <p class="dashboard_info">
@@ -45,11 +45,58 @@
             </div>
           </div>
         </div>
+
+        <div class="admin_preview" v-if="cloud_admin">
+          <div class="admin_preview-left">
+            <div class="cloud_title">
+              <span>云资源概览</span>
+            </div>
+            <div class="dashboard_contaner">
+              <div
+                class="dashborad_list"
+                v-for="(item, index) in cloud_admin.dashboard_list"
+                :key="index"
+              >
+                <chart
+                  :options="getDashboardOption(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>
+          <div class="admin_preview-right">
+            <chart
+              ref="adminHistogram"
+              :options="getHistogramOption()"
+              style="width:100%;height:100%;"
+            />
+          </div>
+        </div>
+      </template>
+
+      <template slot="header-left">
+        <div class="cloud_title" v-if="cloud_admin">
+          <span>组织概览</span>
+        </div>
       </template>
 
-      <div slot="list" v-if="level == 2 && type == 2">
-        <p style="text-align: center;margin-top: 20px;">组织列表</p>
-      </div>
+      <!-- 超管的云资源管理展示的是组织列表 -->
+      <template slot="list" v-if="level == 2 && type == 2">
+        <organization-list
+          slot="list"
+          :data="listData"
+          details-url="/authority/organization/detail/"
+          :hide-delete="true"
+        ></organization-list>
+      </template>
     </apass-list>
 
     <apass-dialog
@@ -58,6 +105,11 @@
       :msg="dialogInfo.msg"
       :submit="dialogInfo.submit"
     ></apass-dialog>
+
+    <allot-info-confirm
+      ref="allotConfirm"
+      @allot-success="allotSuccess"
+    ></allot-info-confirm>
   </div>
 </template>
 
@@ -67,10 +119,18 @@ import { mapState } from "vuex";
 import helper from "@/services/helper.js";
 import apassList from "@/components/apass-list";
 import apassDialog from "@/components/apass-dialog";
+import allotInfoConfirm from "@/components/allot-info-confirm";
 import Dashboard from "@/components/e-charts/dashboard";
+import organizationList from "@/components/organization-list/organization-list";
 
 export default {
-  components: { apassList, apassDialog, Dashboard },
+  components: {
+    apassList,
+    apassDialog,
+    allotInfoConfirm,
+    Dashboard,
+    organizationList,
+  },
   data: () => ({
     level: 0, // 用户等级
     type: 0, // 访问的页面
@@ -95,6 +155,7 @@ export default {
   computed: {
     ...mapState({
       fwglNav: "fwglNav",
+      userInfo: "userInfo",
     }),
     pathName() {
       return this.fwglNav[this.level][this.type];
@@ -368,78 +429,55 @@ export default {
       }
       // 普通用户 --- 云资源服务
       else if (level == 0 && type == 2) {
-        this.listUrl = "";
+        this.listUrl = "/apaas/service/v3/resource/user/apply/list";
         this.paddingLeft = 0;
         this.filterList2 = [
           {
             name: "初次申请状态",
             prop: "state1",
-            default: 0,
+            default: "",
             options: [
               {
                 name: "全部",
-                value: 0,
+                value: "",
               },
               {
                 name: "待审批",
-                value: 1,
+                value: 0,
               },
               {
                 name: "审批通过",
-                value: 2,
+                value: 1,
               },
               {
                 name: "审批未通过",
-                value: 3,
+                value: -1,
               },
             ],
           },
           {
             name: "资源调整状态",
             prop: "state2",
-            default: 0,
+            default: "",
             options: [
               {
                 name: "全部",
-                value: 0,
+                value: "",
               },
               {
                 name: "待审批",
-                value: 1,
-              },
-              {
-                name: "审批通过",
-                value: 2,
-              },
-              {
-                name: "审批未通过",
-                value: 3,
-              },
-            ],
-          },
-          /* {
-            name: "申请状态",
-            prop: "state3",
-            default: 0,
-            options: [
-              {
-                name: "全部",
                 value: 0,
               },
-              {
-                name: "待审批",
-                value: 1,
-              },
               {
                 name: "审批通过",
-                value: 2,
+                value: 1,
               },
               {
                 name: "审批未通过",
-                value: 3,
+                value: -1,
               },
             ],
-          }, */
+          },
         ];
         this.listHeader = [
           {
@@ -454,23 +492,23 @@ export default {
           },
           {
             label: "工作区域",
-            prop: "name",
+            prop: "name_space",
             type: "button",
             callback: this.cloudDetail,
           },
           {
             label: "CPU（核）",
-            prop: "name",
+            prop: "cpu",
             align: "center",
           },
           {
             label: "内存（GB）",
-            prop: "name",
+            prop: "memory",
             align: "center",
           },
           {
             label: "容器组（个）",
-            prop: "name",
+            prop: "containers",
             align: "center",
           },
           {
@@ -478,15 +516,18 @@ export default {
             type: "tooltip",
             align: "center",
             getLength(item) {
-              return item.sjp.length;
+              let disks = (item.disk && item.disk.trim().split(" ")) || [];
+              return disks.length;
             },
             getText(item) {
-              return item.sjp[0];
+              let disks = (item.disk && item.disk.trim().split(" ")) || [];
+              return disks[0];
             },
             getContent(item) {
+              let disks = (item.disk && item.disk.trim().split(" ")) || [];
               let htmlStr = `<span>数据盘（块/GB）</span><br />`;
 
-              item.sjp.forEach((v) => {
+              disks.forEach((v) => {
                 htmlStr += `<span>数据盘：${v}</span><br />`;
               });
 
@@ -495,35 +536,26 @@ export default {
           },
           {
             label: "申请时间",
-            prop: "name",
+            prop: "apply_time",
             align: "center",
           },
           {
             label: "初次申请状态",
-            prop: "name",
             align: "center",
+            getText(item) {
+              return ["未通过", "待审批", "通过"][
+                (item.approve_state || 0) + 1
+              ];
+            },
           },
           {
             label: "资源调整结果",
-            prop: "name",
             align: "center",
-          },
-        ];
-        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"],
+            getText(item) {
+              return ["未通过", "待审批", "通过"][
+                (item.approve_update_state || 0) + 1
+              ];
+            },
           },
         ];
       }
@@ -736,52 +768,52 @@ export default {
       }
       // 组织管理员 --- 云资源管理
       else if (level == 1 && type == 2) {
-        this.listUrl = "";
+        this.listUrl = "/apaas/service/v3/resource/user/apply/list";
         this.paddingLeft = 0;
         this.filterList2 = [
           {
             name: "初次申请状态",
             prop: "state1",
-            default: 0,
+            default: "",
             options: [
               {
                 name: "全部",
-                value: 0,
+                value: "",
               },
               {
                 name: "待审批",
-                value: 1,
+                value: 0,
               },
               {
                 name: "审批通过",
-                value: 2,
+                value: 1,
               },
               {
                 name: "审批未通过",
-                value: 3,
+                value: -1,
               },
             ],
           },
           {
             name: "资源调整状态",
             prop: "state2",
-            default: 0,
+            default: "",
             options: [
               {
                 name: "全部",
-                value: 0,
+                value: "",
               },
               {
                 name: "待审批",
-                value: 1,
+                value: 0,
               },
               {
                 name: "审批通过",
-                value: 2,
+                value: 1,
               },
               {
                 name: "审批未通过",
-                value: 3,
+                value: -1,
               },
             ],
           },
@@ -799,53 +831,79 @@ export default {
           },
           {
             label: "工作区域名称",
-            prop: "name",
+            prop: "name_space",
             type: "button",
             callback: this.cloudDetail,
           },
           {
             label: "CPU（核）",
-            prop: "name",
+            prop: "cpu",
             align: "center",
           },
           {
             label: "内存（GB）",
-            prop: "name",
+            prop: "memory",
             align: "center",
           },
           {
             label: "容器组（个）",
-            prop: "name",
+            prop: "containers",
             align: "center",
           },
           {
             label: "数据盘（块/GB）",
-            prop: "name",
+            type: "tooltip",
             align: "center",
+            getLength(item) {
+              let disks = (item.disk && item.disk.trim().split(" ")) || [];
+              return disks.length;
+            },
+            getText(item) {
+              let disks = (item.disk && item.disk.trim().split(" ")) || [];
+              return disks[0];
+            },
+            getContent(item) {
+              let disks = (item.disk && item.disk.trim().split(" ")) || [];
+              let htmlStr = `<span>数据盘（块/GB）</span><br />`;
+
+              disks.forEach((v) => {
+                htmlStr += `<span>数据盘：${v}</span><br />`;
+              });
+
+              return htmlStr;
+            },
           },
           {
             label: "申请用户",
-            prop: "name",
+            prop: "user_name",
             align: "center",
           },
           {
             label: "业务系统名",
-            prop: "name",
+            prop: "system_name",
             align: "center",
           },
           {
             label: "初次申请状态",
-            prop: "name",
             align: "center",
+            getText(item) {
+              return ["未通过", "待审批", "通过"][
+                (item.approve_state || 0) + 1
+              ];
+            },
           },
           {
-            label: "资源调整状态",
-            prop: "name",
+            label: "资源调整结果",
             align: "center",
+            getText(item) {
+              return ["未通过", "待审批", "通过"][
+                (item.approve_update_state || 0) + 1
+              ];
+            },
           },
           {
             label: "用户申请时间",
-            prop: "name",
+            prop: "apply_time",
             align: "center",
           },
           {
@@ -855,68 +913,17 @@ export default {
             width: 80,
             actionList: [
               {
-                label: "分配",
                 getLabel(item) {
-                  return item.allot == 0 ? "分配" : "已分配";
+                  return item.use_uid ? "已分配" : "分配";
                 },
                 callback: this.cloudAllot,
                 disabledRule(item) {
-                  return item.allot == 1;
+                  return item.use_uid;
                 },
               },
             ],
           },
         ];
-        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: "（个）",
-            },
-          ],
-        };
       }
 
       // 超级管理员 --- 平台服务管理
@@ -1136,35 +1143,7 @@ export default {
       }
       // 超级管理员 --- 云资源管理
       else if (level == 2 && type == 2) {
-        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: {},
-        };
+        this.listUrl = "/apaas/service/v3/resource/user/apply/list";
       }
 
       // Error
@@ -1173,46 +1152,148 @@ export default {
       }
     },
     init(filter) {
-      console.log(filter);
+      // console.log(filter);
 
       if (!this.listUrl) {
         return;
       }
 
+      let params = {};
+
       this.tempFliter = filter;
 
+      if (this.type == 2) {
+        params = {
+          search: filter.keyword,
+          page: filter.page,
+          limit: filter.size,
+          depart: "",
+          state1: filter.state1,
+          state2: filter.state2,
+        };
+      } else {
+        params = {
+          keyword: filter.keyword,
+          page: filter.page,
+          size: filter.size,
+          data_service_type:
+            (filter.service_type_1 &&
+              filter.service_type_1.map((item) => item.value).join(",")) ||
+            "", // 服务类型
+          sectors:
+            (filter.service_area &&
+              filter.service_area.map((item) => item.value).join(",")) ||
+            "", // 服务领域
+          openness:
+            (filter.openness &&
+              filter.openness.map((item) => item.value).join(",")) ||
+            "", // 开放程度
+          state:
+            (filter.state &&
+              filter.state.map((item) => item.value).join(",")) ||
+            "", // 服务状态
+        };
+      }
+
       this.$http
-        .get(this.listUrl, {
-          params: {
-            data_service_type:
-              (filter.service_type_1 &&
-                filter.service_type_1.map((item) => item.value).join(",")) ||
-              "", // 服务类型
-            sectors:
-              (filter.service_area &&
-                filter.service_area.map((item) => item.value).join(",")) ||
-              "", // 服务领域
-            openness:
-              (filter.openness &&
-                filter.openness.map((item) => item.value).join(",")) ||
-              "", // 开放程度
-            state:
-              (filter.state &&
-                filter.state.map((item) => item.value).join(",")) ||
-              "", // 服务状态
-            keyword: filter.keyword,
-            page: filter.page,
-            size: filter.size,
-          },
-        })
+        .get(this.listUrl, { params })
         .then(({ data }) => {
-          // console.log(data.data);
-          this.listTotal = data.data.total;
-          this.listData = data.data.data;
+          // console.log(data);
+
+          if (this.type == 2) {
+            const cloud = data.data.cloud_resource_count;
+
+            if (this.level == 1) {
+              this.listTotal = data.total;
+              this.listData = data.data.cloud_apply_list;
+              this.cloud_zuzhi = {
+                count_zy: cloud.count_zy,
+                dashboard_list: [
+                  {
+                    name: "cpu使用量",
+                    value: cloud.cpu_use,
+                    total: cloud.cpu_total,
+                    unit: "（核）",
+                  },
+                  {
+                    name: "内存使用量",
+                    value: cloud.memory_use,
+                    total: cloud.memory_total,
+                    unit: "（GB）",
+                  },
+                  {
+                    name: "数据盘使用量",
+                    value: cloud.disk_use,
+                    total: cloud.disk_total,
+                    unit: "（GB）",
+                  },
+                  {
+                    name: "容器组使用量",
+                    value: cloud.containers_use,
+                    total: cloud.containers_total,
+                    unit: "（个）",
+                  },
+                ],
+              };
+            } else if (this.level == 2) {
+              this.cloud_admin = {
+                dashboard_list: [
+                  {
+                    name: "cpu使用量",
+                    value: cloud.cpu_use,
+                    total: cloud.cpu_total,
+                    unit: "（核）",
+                  },
+                  {
+                    name: "内存使用量",
+                    value: cloud.memory_use,
+                    total: cloud.memory_total,
+                    unit: "（GB）",
+                  },
+                  {
+                    name: "数据盘使用量",
+                    value: cloud.disk_use,
+                    total: cloud.disk_total,
+                    unit: "（GB）",
+                  },
+                  {
+                    name: "容器组使用量",
+                    value: cloud.containers_use,
+                    total: cloud.containers_total,
+                    unit: "（个）",
+                  },
+                ],
+              };
+            }
+          } else {
+            this.listTotal = data.data.total;
+            this.listData = data.data.data;
+          }
         })
         .catch((error) => {
           console.log(error);
         });
+
+      // 超管的云资源管理展示的是组织列表
+      if (this.level == 2 && this.type == 2) {
+        this.$http
+          .get("/apaas/backmgt/department/list", {
+            params: {
+              search: filter.keyword,
+              page: filter.page,
+              limit: filter.size,
+            },
+          })
+          .then(({ data }) => {
+            // console.log(data);
+
+            this.listTotal = data.total;
+            this.listData = data.data;
+          })
+          .catch((error) => {
+            console.log(error);
+          });
+      }
     },
     showDialog() {
       this.$refs.dialog.show();
@@ -1406,10 +1487,13 @@ export default {
       console.log("cloudDetail - " + item.name);
     },
     cloudAllot(item) {
-      console.log("cloudAllot - " + item.name);
+      this.$refs.allotConfirm.getDetail(item.apply_id);
     },
-    getDashboardOptions(item) {
-      let percent = Math.round((item.value / item.total) * 100);
+    allotSuccess() {
+      this.init(this.tempFliter);
+    },
+    getDashboardOption(item) {
+      let percent = Math.round((item.value / item.total) * 100) || 0;
       let colors = ["#515fe7", "#e7ecfd"];
 
       if (percent >= 80) {
@@ -1564,6 +1648,335 @@ export default {
         ],
       };
     },
+    getHistogramOption(_xAxisData, _series) {
+      return {
+        tooltip: {
+          trigger: "axis",
+          /* axisPointer: {
+            crossStyle: {
+              color: "#999",
+            },
+          }, */
+          backgroundColor: "#242c43",
+          textStyle: {
+            fontSize: 12,
+            lineHeight: 20,
+            color: "#fff",
+          },
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 25,
+          top: 45,
+          containLabel: true,
+        },
+        color: ["#525e98", "#90b7c1", "#d06d1f", "#e4aa4f"],
+        legend: {
+          right: "center",
+          top: 0,
+          itemWidth: 10,
+          itemHeight: 10,
+          icon: "roundRect",
+          orient: "horizontal",
+          backgroundColor: "#f8f9fd",
+          textStyle: {
+            fontSize: 12,
+            lineHeight: 20,
+            color: "#a9aec0",
+          },
+          data: ["CPU", "内存", "数据盘", "容器组"],
+        },
+        xAxis: [
+          {
+            type: "category",
+            axisLabel: {
+              textStyle: {
+                color: "#0d1847",
+                fontSize: 12,
+                lineHeight: 20,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#e3e5ef",
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            /* splitArea: {
+              show: true,
+              areaStyle: {
+                color: ["#f4f5fd", "#fff"],
+                opacity: 0.5,
+              },
+            }, */
+            axisPointer: {
+              type: "shadow",
+            },
+            data: [
+              "办公费",
+              "印刷费",
+              "水费",
+              "水费",
+              "邮电费",
+              "物业管理费",
+              "差旅费",
+              "因公出国（境）费用",
+              "维修（护）费",
+              "会议费",
+              "租聘费",
+              "培训费",
+              "取暖费",
+              "公务接待费",
+              "公务用车运行",
+              "其他交通费用",
+              "房屋建筑物购建",
+              "办公设备购置",
+              "大型修缮",
+              "信息网络及软件购置更新",
+              "公务用车购置",
+              "咨询费",
+              "手续费",
+              "劳务费",
+              "委托业务费",
+              "其他商品和服务支出",
+              "专用设备购置",
+              "基础设施建设",
+              "其他交通工具购置",
+              "其他资本性支出",
+            ],
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            min: 0,
+            axisLabel: {
+              formatter: "{value}",
+              textStyle: {
+                color: "#a9aec0",
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#e3e5ef",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                type: "dashed",
+                color: ["#f2f2f2"],
+                width: 1,
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            barMaxWidth: 12,
+            data: [
+              17931.63,
+              2420.69,
+              399.4,
+              2581.2,
+              1571.79,
+              3028.14,
+              8041.46,
+              1616.08,
+              7159.78,
+              3122.55,
+              2211.05,
+              10573.26,
+              1325.09,
+              1290.44,
+              2301.95,
+              3344.42,
+              5687.6,
+              2117.72,
+              442.4,
+              14853.71,
+              96.25,
+              170.19,
+              40.74,
+              3947.28,
+              12558.87,
+              12546.87,
+              6945.36,
+              683.28,
+              73.17,
+              169.15,
+            ],
+            itemStyle: {
+              normal: {
+                barBorderRadius: [6, 6, 6, 6],
+              },
+            },
+            name: "CPU",
+          },
+          {
+            type: "bar",
+            barMaxWidth: 12,
+            data: [
+              17931.63,
+              2420.69,
+              399.4,
+              2581.2,
+              1571.79,
+              3028.14,
+              8041.46,
+              1616.08,
+              7159.78,
+              3122.55,
+              2211.05,
+              10573.26,
+              1325.09,
+              1290.44,
+              2301.95,
+              3344.42,
+              5687.6,
+              2117.72,
+              442.4,
+              14853.71,
+              96.25,
+              170.19,
+              40.74,
+              3947.28,
+              12558.87,
+              12546.87,
+              6945.36,
+              683.28,
+              73.17,
+              169.15,
+            ],
+            itemStyle: {
+              normal: {
+                barBorderRadius: [6, 6, 6, 6],
+              },
+            },
+            name: "内存",
+          },
+          {
+            type: "bar",
+            barMaxWidth: 12,
+            data: [
+              17931.63,
+              2420.69,
+              399.4,
+              2581.2,
+              1571.79,
+              3028.14,
+              8041.46,
+              1616.08,
+              7159.78,
+              3122.55,
+              2211.05,
+              10573.26,
+              1325.09,
+              1290.44,
+              2301.95,
+              3344.42,
+              5687.6,
+              2117.72,
+              442.4,
+              14853.71,
+              96.25,
+              170.19,
+              40.74,
+              3947.28,
+              12558.87,
+              12546.87,
+              6945.36,
+              683.28,
+              73.17,
+              169.15,
+            ],
+            itemStyle: {
+              normal: {
+                barBorderRadius: [6, 6, 6, 6],
+              },
+            },
+            name: "数据盘",
+          },
+          {
+            type: "bar",
+            barMaxWidth: 12,
+            data: [
+              17931.63,
+              2420.69,
+              399.4,
+              2581.2,
+              1571.79,
+              3028.14,
+              8041.46,
+              1616.08,
+              7159.78,
+              3122.55,
+              2211.05,
+              10573.26,
+              1325.09,
+              1290.44,
+              2301.95,
+              3344.42,
+              5687.6,
+              2117.72,
+              442.4,
+              14853.71,
+              96.25,
+              170.19,
+              40.74,
+              3947.28,
+              12558.87,
+              12546.87,
+              6945.36,
+              683.28,
+              73.17,
+              169.15,
+            ],
+            itemStyle: {
+              normal: {
+                barBorderRadius: [6, 6, 6, 6],
+              },
+            },
+            name: "容器组",
+          },
+        ],
+        dataZoom: [
+          { type: "inside", start: 0, end: 20 },
+          {
+            show: true,
+            type: "slider",
+            height: 20,
+            bottom: 0,
+            start: 0,
+            end: 100,
+            fillerColor: "#e6ebfe",
+            handleStyle: { color: "#b4c0f5" },
+            backgroundColor: "#f8f9fd",
+            borderColor: "#f8f9fd",
+            textStyle: { color: "transparent", fontSize: "12px" },
+            dataBackground: {
+              lineStyle: { color: "transparent" },
+              areaStyle: { color: "transparent" },
+            },
+          },
+        ],
+      };
+    },
+    resizeColumn() {
+      if (this.$refs.adminHistogram) {
+        this.$refs.adminHistogram.resize();
+      }
+    },
   },
   created() {
     this.level = parseInt(this.$route.params.level);
@@ -1587,6 +2000,12 @@ export default {
       }
     });
   },
+  mounted() {
+    window.addEventListener("resize", this.resizeColumn);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.resizeColumn);
+  },
 };
 </script>
 
@@ -1594,35 +2013,36 @@ export default {
 .service_management_list {
   height: 100%;
 }
-.zuzhi_title {
+.cloud_title {
   margin-top: 15px;
 }
-.zuzhi_title > span,
-.zuzhi_title > span::before {
+.cloud_title > span,
+.cloud_title > span::before {
   display: inline-block;
   vertical-align: middle;
 }
-.zuzhi_title > span:nth-child(1)::before {
+.cloud_title > span:nth-child(1)::before {
   content: "";
   width: 4px;
   height: 16px;
   border-radius: 2px;
   background-color: #515fe7;
   margin-right: 10px;
+  margin-bottom: 2px;
 }
-.zuzhi_title > span:nth-child(1) {
+.cloud_title > span:nth-child(1) {
   font-size: 16px;
   color: #242c43;
   line-height: 30px;
 }
-.zuzhi_title > span:nth-child(2)::before {
+.cloud_title > span:nth-child(2)::before {
   content: "";
   width: 2px;
   height: 12px;
   background-color: #b4c0f5;
   margin: 0 10px;
 }
-.zuzhi_title > span:nth-child(2) {
+.cloud_title > span:nth-child(2) {
   font-size: 14px;
   line-height: 1;
   color: #58617a;
@@ -1658,4 +2078,17 @@ export default {
 .dashboard_info > span:nth-of-type(2) {
   color: #0d1847;
 }
+.admin_preview {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.admin_preview > * {
+  width: calc(50% - 10px);
+}
+.admin_preview-right {
+  height: 250px;
+  margin-top: 15px;
+  box-sizing: border-box;
+}
 </style>

src/router/index.js

@@ -68,6 +68,11 @@ export default new Router({
               component: () =>
                 import("@/pages/workbench/fwgl/approval_service_detail"),
             }, // 审批的服务 - 详情
+            {
+              path: "/fwgl/:level/:type/cloud_detail/:id",
+              name: "servicedetail",
+              component: () => import("@/pages/workbench/fwgl/cloud-detail"),
+            }, // 云资源 - 详情
           ],
         }, // 工作台 - 服务管理模块
         {

yarn.lock

@@ -6074,6 +6074,11 @@ resize-detector@^0.1.10:
   resolved "https://registry.yarnpkg.com/resize-detector/-/resize-detector-0.1.10.tgz#1da3f961aa5f914ccbcfd3752d52fd45beeb692c"
   integrity sha512-iLcXC8A6Fb0DfA+TRiywrK/0A22bFqkhntjMJMEzXDA4XkcEkfwpNbv7W8iewUiD0xYIaeiXOfiEehTqGKsUFw==
 
+resize-detector@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.npm.taobao.org/resize-detector/download/resize-detector-0.2.2.tgz#b207e72912bef0bda9fb825fe894ed9686ca965e"
+  integrity sha1-sgfnKRK+8L2p+4Jf6JTtlobKll4=
+
 resize-observer-polyfill@^1.5.0:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
@@ -7207,6 +7212,13 @@ vue-router@^3.0.2:
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.1.6.tgz#45f5a3a3843e31702c061dd829393554e4328f89"
   integrity sha512-GYhn2ynaZlysZMkFE5oCHRUTqE8BWs/a9YbKpNLi0i7xD6KG1EzDqpHQmv1F5gXjr8kL5iIVS8EOtRaVUEXTqA==
 
+vue-sparklines@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.npm.taobao.org/vue-sparklines/download/vue-sparklines-0.2.1.tgz#2c754b49af5d86a62308930f72bad8fc376d3beb"
+  integrity sha1-LHVLSa9dhqYjCJMPcrrY/DdtO+s=
+  dependencies:
+    vue "^2.2.1"
+
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
@@ -7228,7 +7240,7 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue@^2.6.10:
+vue@^2.2.1, vue@^2.6.10:
   version "2.6.11"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
   integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==