菜单购物车字段，云资源可缩容，订单，云详情

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/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/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,6 +119,7 @@
         </div>
       </el-col>
       <el-col :span="4" class="shopping_cell_num">
+        <div v-if="cellIsService">
           <el-input-number
             :disabled="readOnly"
             v-model="cellItems.duration"
@@ -126,6 +127,7 @@
             size="mini"
             :min="1"
           ></el-input-number>
+        </div>
       </el-col>
       <el-col :span="4" class="shopping_cell_options">
         <el-checkbox

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