From 5eb690c0c47ce2134e375ae51e9af96e4a72470d Mon Sep 17 00:00:00 2001
From: liudianxin <liudianxin@bd-apaas.com>
Date: Sat, 4 Jul 2020 17:12:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=91=E8=B5=84=E6=BA=90+=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/shop-card.vue             |  53 ++++++---
 src/components/shop-cloud/shop-cloud.vue | 103 +++++++++++++---
 src/components/shop-list.vue             |  20 ++--
 src/pages/service_shop/services_shop.vue | 143 ++++++++++++-----------
 src/request/api/service_shop.js          |  11 ++
 5 files changed, 218 insertions(+), 112 deletions(-)

diff --git a/src/components/shop-card.vue b/src/components/shop-card.vue
index 828ca4e..95789f4 100644
--- a/src/components/shop-card.vue
+++ b/src/components/shop-card.vue
@@ -1,24 +1,25 @@
 <template>
   <div class="shop_card">
-    <div class="shop_car-img" v-if="data.img" @click="intoDetail">
-      <img :src="data.img" width="100%" />
+    <div class="shop_car-img" v-if="showImg" @click="intoDetail">
+      <img :src="data.cover" width="100%" />
     </div>
     <div class="shop_card-top">
       <p
         class="shop_card-title text_clip_2"
-        v-text="data.title"
-        :title="data.title"
+        v-text="data.name"
+        :title="data.name"
         @click="intoDetail"
       ></p>
       <p class="shop_card-text under_text">
-        <span
-          class="text_clip"
-          v-text="data.provider"
-          :title="data.provider"
-        ></span>
+        <span class="text_clip" v-text="data.department_name" :title="data.department_name"></span>
         <span>
-          <i class="el-icon-star-on"></i>
-          <span v-text="data.rate"></span>
+          <el-rate
+            v-model="data.score"
+            disabled
+            show-score
+            text-color="#ea7d19"
+            score-template="{value}"
+          ></el-rate>
         </span>
       </p>
     </div>
@@ -28,16 +29,22 @@
       </p>
       <p class="shop_card-text update_time">
         <img :src="require('@/assets/imgs/icon_shijian.png')" style="margin-right: 5px;" />
-        <span class="text_clip" v-text="'更新时间：' + data.updateTime"></span>
+        <span class="text_clip" v-text="'更新时间：' + helper.dateStringTransform(data.update_date)"></span>
       </p>
       <div class="shop_card-text access">
         <span>
           <img :src="require('@/assets/imgs/icon_liulan.png')" />
-          <span class="text_clip" v-text="data.viewCount + '次浏览'"></span>
+          <span
+            class="text_clip"
+            v-text="helper.numberFormat(data.view_count, 2) + (data.view_count > 10000 ? '万' : '') + '次浏览'"
+          ></span>
         </span>
         <span>
           <img :src="require('@/assets/imgs/icon_huoqu1.png')" />
-          <span class="text_clip" v-text="data.numberOfMonth + '次获取'"></span>
+          <span
+            class="text_clip"
+            v-text="helper.numberFormat(data.apply_count, 2) + (data.apply_count > 10000 ? '万' : '') + '次获取'"
+          ></span>
         </span>
       </div>
     </div>
@@ -45,22 +52,32 @@
 </template>
 
 <script>
+import helper from "@/services/helper";
 export default {
   props: {
     data: {
       type: Object,
-      required: true,
+      default: () => {}
     },
     detailPath: {
       type: String,
-      required: true,
+      required: true
     },
+    showImg: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      helper
+    };
   },
   methods: {
     intoDetail() {
       this.$router.push(this.detailPath + this.data.id);
-    },
-  },
+    }
+  }
 };
 </script>
 
diff --git a/src/components/shop-cloud/shop-cloud.vue b/src/components/shop-cloud/shop-cloud.vue
index 1d40e75..775e8f6 100644
--- a/src/components/shop-cloud/shop-cloud.vue
+++ b/src/components/shop-cloud/shop-cloud.vue
@@ -111,7 +111,6 @@
                         v-model="formNew.dataDisk"
                         controls-position="right"
                         :min="0"
-                        :max="10"
                         placeholder="请选择数量"
                       ></el-input-number>
                       <div class="input_right">块</div>
@@ -124,7 +123,6 @@
                         v-model="formNew.perDataDisk"
                         controls-position="right"
                         :min="0"
-                        :max="10"
                         placeholder="请选择容量"
                       ></el-input-number>
                       <div class="input_right">GB</div>
@@ -219,6 +217,7 @@
                   <el-col :span="22">
                     <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"
@@ -234,10 +233,10 @@
             </el-col>
           </el-row>
         </el-tab-pane>
-        <el-tab-pane label="升级现有工作区域" name="1">
+        <el-tab-pane label="调整现有工作区域" name="1">
           <el-row>
             <el-col :span="11">
-              <div class="select_title">选择要进行升级的工作区域：</div>
+              <div class="select_title">选择要进行调整的工作区域：</div>
               <div class="form_item">
                 <el-select v-model="workSpace" @change="getForm" placeholder="请选择">
                   <el-option
@@ -256,7 +255,7 @@
                 <el-form ref="formNew" :model="formOld">
                   <el-row>
                     <el-col :span="24">
-                      <div class="form_title">工作区域升级规格</div>
+                      <div class="form_title">工作区域规格调整</div>
                     </el-col>
                     <el-col :span="24">
                       <div class="now_spec">当前规格：</div>
@@ -279,7 +278,7 @@
                     </el-col>
                     <el-col :span="22">
                       <el-form-item class="form_item input_has_right">
-                        <div class="form_item_title">申请CPU升级至：</div>
+                        <div class="form_item_title">申请CPU调整为：</div>
                         <el-select v-model="formOld.cpu" placeholder="请选择CPU使用量">
                           <el-option
                             v-for="item in optionsCPU"
@@ -293,7 +292,7 @@
                     </el-col>
                     <el-col :span="22">
                       <el-form-item class="form_item input_has_right">
-                        <div class="form_item_title">申请内存升级至：</div>
+                        <div class="form_item_title">申请内存调整为：</div>
                         <el-select v-model="formOld.memory" placeholder="请选择内存使用量">
                           <el-option
                             v-for="item in optionsRAM"
@@ -307,7 +306,7 @@
                     </el-col>
                     <el-col :span="22">
                       <el-form-item class="form_item input_has_right">
-                        <div class="form_item_title">申请容器组升级至：</div>
+                        <div class="form_item_title">申请容器组调整为：</div>
                         <el-input-number
                           v-model="formOld.containerGroup"
                           controls-position="right"
@@ -318,6 +317,18 @@
                         <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>
+                      </el-form-item>
+                    </el-col>
                     <el-col :span="11">
                       <el-form-item class="form_item input_has_right">
                         <div class="form_item_title">增加数据盘：</div>
@@ -325,7 +336,6 @@
                           v-model="formOld.dataDisk"
                           controls-position="right"
                           :min="0"
-                          :max="10"
                         ></el-input-number>
                         <div class="input_right">块</div>
                       </el-form-item>
@@ -337,7 +347,6 @@
                           v-model="formOld.perDataDisk"
                           controls-position="right"
                           :min="0"
-                          :max="10"
                         ></el-input-number>
                         <div class="input_right">GB</div>
                       </el-form-item>
@@ -469,6 +478,7 @@
                     <el-col :span="22">
                       <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"
@@ -628,7 +638,7 @@
                 </div>
               </div>
             </div>
-            <span class="dia_item_title margin_top_10">升级至：</span>
+            <span class="dia_item_title margin_top_10">调整至：</span>
             <div class="dia_block">
               <span class="dia_item_all_title">工作区域：</span>
               <div class="dia_block_item">
@@ -650,6 +660,10 @@
                     class="dia_block_item_val"
                   >{{ diaForm.dataDisk }}块，每块{{ diaForm.perDataDisk }}GB</span>
                 </div>
+                <div class="dia_block_item_in">
+                  <span class="dia_block_item_title">删除数据盘：</span>
+                  <span class="dia_block_item_val">{{ dataDiskList.join(",") }}</span>
+                </div>
               </div>
               <span class="dia_item_all_title">单个容器组规格：</span>
               <div class="dia_block_item">
@@ -700,11 +714,15 @@
 
 <script>
 import BlockRadius from "@/components/general/block-radius";
-import uploadFile from "@/components/general/upload_file";
+import UploadFile from "@/components/general/upload_file";
+import TableUm from "@/components/table/table-um";
+import InfoList from "@/components/infoList";
 export default {
   components: {
     BlockRadius,
-    uploadFile
+    UploadFile,
+    TableUm,
+    InfoList
   },
   props: {
     name: { type: String, default: "" }
@@ -757,7 +775,7 @@ export default {
       { value: "16", label: "16" },
       { value: "32", label: "32" }
     ],
-    formShow: false,
+    formShow: true,
     specArr: [
       { title: "CPU", val: "4", src: "ic_CPU" },
       { title: "内存", val: "4", src: "ic_neicun" },
@@ -767,6 +785,14 @@ export default {
       { title: "CPU", max: "4", default: "2", src: "ic_CPU" },
       { title: "内存", max: "4", default: "2", src: "ic_neicun" }
     ],
+    docTemplate: [
+      {
+        title: "",
+        info: "工作区域申请文件标准模板.PDF",
+        url: "",
+        type: "down"
+      }
+    ],
     formOld: {
       namespace: "",
       workplace: "",
@@ -805,7 +831,45 @@ export default {
     },
     ruleOld: [],
     dialogVisible: false,
-    diaForm: {}
+    diaForm: {},
+    dataDiskHeaders: [
+      {
+        label: "数据盘容量",
+        prop: "capacity",
+        align: "center"
+      },
+      {
+        label: "部署的应用",
+        prop: "app",
+        align: "center"
+      },
+      {
+        label: "操作",
+        type: "Button",
+        align: "center",
+        btnList: [
+          {
+            type: "primary-del",
+            label: "删除"
+          }
+        ]
+      }
+    ],
+    dataDiskList: [
+      {
+        capacity: "www",
+        app: "wewaewa"
+      },
+      {
+        capacity: "www",
+        app: "wewaewa"
+      },
+      {
+        capacity: "www",
+        app: "wewaewa"
+      }
+    ],
+    delDataDiskList: []
   }),
   mounted() {
     this.getUser();
@@ -924,6 +988,12 @@ export default {
           this.workSpaceOptions = response.data.data;
         }
       });
+    },
+    delItem(val) {
+      console.log(val);
+      this.delDataDiskList.push(val.app);
+      let this.dataDiskList.find((v) => v.app === val.app);
+      if ()
     }
   }
 };
@@ -1141,6 +1211,9 @@ export default {
 .val_has_2 {
   margin-right: 20px;
 }
+.doc_template {
+  margin: 0 0 10px 20px;
+}
 </style>
 <style>
 .form_block .el-input .el-input__inner {
diff --git a/src/components/shop-list.vue b/src/components/shop-list.vue
index e1eacd2..d655f83 100644
--- a/src/components/shop-list.vue
+++ b/src/components/shop-list.vue
@@ -9,7 +9,7 @@
 
     <ul class="shop_cards">
       <li v-for="(item, index) in data" :key="'card_' + index">
-        <shop-card :data="item" :detail-path="detailPath"></shop-card>
+        <shop-card :data="item" :showImg="showImg" :detail-path="detailPath"></shop-card>
       </li>
     </ul>
   </div>
@@ -20,33 +20,37 @@ import shopCard from "./shop-card";
 
 export default {
   components: {
-    shopCard,
+    shopCard
   },
   props: {
     name: {
       type: String,
-      required: true,
+      required: true
     },
     to: {
       type: String,
-      required: true,
+      required: true
     },
     detailPath: {
       type: String,
-      required: true,
+      required: true
     },
     data: {
       type: Array,
-      required: true,
+      default: () => []
     },
+    showImg: {
+      type: Boolean,
+      default: false
+    }
   },
   methods: {
     goto() {
       if (this.to) {
         this.$router.push(this.to);
       }
-    },
-  },
+    }
+  }
 };
 </script>
 
diff --git a/src/pages/service_shop/services_shop.vue b/src/pages/service_shop/services_shop.vue
index f4e0eb2..35ab1a0 100644
--- a/src/pages/service_shop/services_shop.vue
+++ b/src/pages/service_shop/services_shop.vue
@@ -1,12 +1,9 @@
 <template>
   <div class="services_shop-container">
     <div class="services_shop-carousel">
-      <el-carousel height="400px">
-        <el-carousel-item
-          v-for="(banner, index) in banners"
-          :key="'banner_' + index"
-        >
-          <img :src="banner" width="100%" />
+      <el-carousel height="400px" arrow="never">
+        <el-carousel-item v-for="(banner, index) in banners" :key="'banner_' + index">
+          <img :src="banner.image_url" width="100%" @click="goto(banner.url)" />
         </el-carousel-item>
       </el-carousel>
       <ul class="services_shop-info">
@@ -18,16 +15,12 @@
             <div class="right-container">
               <p v-text="item.name"></p>
               <p>
-                <span v-text="item.value"></span>
-                <span v-text="item.unit"></span>
+                <span>{{ helper.numberFormat(item.value, 2) }}</span>
+                <span>{{ item.value > 10000 ? "万" : "" }}</span>
               </p>
             </div>
           </li>
-          <li
-            class="info_line"
-            :key="'line_' + index"
-            v-if="index + 1 < servicesShopInfo.length"
-          ></li>
+          <li class="info_line" :key="'line_' + index" v-if="index + 1 < servicesShopInfo.length"></li>
         </template>
       </ul>
     </div>
@@ -38,6 +31,7 @@
       to="/shop/data_service_list"
       detail-path="/shop/sjfwDetail/"
       :data="hot_datas"
+      :showImg="false"
     ></shop-list>
 
     <!-- 精品地图 -->
@@ -46,6 +40,7 @@
       to="/shop/space_time_service_list"
       detail-path="/shop/skfwDetail/"
       :data="map_datas"
+      :showImg="true"
     ></shop-list>
 
     <!-- 综合应用 -->
@@ -54,84 +49,90 @@
       to="/shop/comprehensive_app_list"
       detail-path="/shop/zhfwDetail/"
       :data="comprehensive_datas"
+      :showImg="true"
     ></shop-list>
   </div>
 </template>
 
 <script>
 import shopList from "@/components/shop-list";
+import helper from "@/services/helper";
 
 export default {
   components: {
-    shopList,
+    shopList
   },
   data: () => ({
     banners: null,
-    servicesShopInfo: null,
+    servicesShopInfo: [
+      {
+        name: "服务总数",
+        value: 0,
+        icon: require("@/assets/imgs/shop_ic_fuwuzs.png")
+      },
+      {
+        name: "用户总数",
+        value: 0,
+        icon: require("@/assets/imgs/shop_ic_yonghuzs.png")
+      },
+      {
+        name: "接入机构",
+        value: 0,
+        icon: require("@/assets/imgs/shop_ic_jierujg.png")
+      },
+      {
+        name: "接入系统",
+        value: 0,
+        icon: require("@/assets/imgs/shop_ic_jieruxt.png")
+      },
+      {
+        name: "服务请求次数",
+        value: 0,
+        icon: require("@/assets/imgs/shop_ic_fuwuzs.png")
+      }
+    ],
     hot_datas: [],
     map_datas: [],
     comprehensive_datas: [],
+    helper
   }),
   methods: {
-    init() {
-      this.$http
-        .get("./static/serviceshop.json")
-        .then((response) => {
-          let data = response.body;
-          let servicesShopInfo = [
-            {
-              name: "服务总数",
-              value: "",
-              unit: "万",
-              icon: require("@/assets/imgs/shop_ic_fuwuzs.png"),
-            },
-            {
-              name: "用户总数",
-              value: "",
-              unit: "万",
-              icon: require("@/assets/imgs/shop_ic_yonghuzs.png"),
-            },
-            {
-              name: "接入机构",
-              value: "",
-              unit: "",
-              icon: require("@/assets/imgs/shop_ic_jierujg.png"),
-            },
-            {
-              name: "接入系统",
-              value: "",
-              unit: "万",
-              icon: require("@/assets/imgs/shop_ic_jieruxt.png"),
-            },
-            {
-              name: "服务请求次数",
-              value: ".2",
-              unit: "亿",
-              icon: require("@/assets/imgs/shop_ic_fuwuzs.png"),
-            },
-          ];
-
-          this.banners = data.banners;
-          this.servicesShopInfo = servicesShopInfo.map((item) => {
-            let temp = data.servicesShopInfo.find((v) => v.name === item.name);
-
-            return {
-              ...item,
-              value: temp && temp.value,
-            };
-          });
-          this.hot_datas = data.hot_datas;
-          this.map_datas = data.map_datas;
-          this.comprehensive_datas = data.comprehensive_datas;
-        })
-        .catch(function(error) {
-          console.log(error);
-        });
+    init(type) {
+      this.$api.serviceShop.getFeaturedList({ type }).then(response => {
+        if (type == "hotdata") {
+          this.hot_datas = response.data.data;
+        } else if (type == "hgmap") {
+          this.map_datas = response.data.data;
+        } else if (type == "zhapp") {
+          this.comprehensive_datas = response.data.data;
+        }
+      });
+    },
+    getBenner() {
+      this.$api.serviceShop.getBenner().then(response => {
+        this.banners = response.data.data;
+      });
     },
+    getGeneralOverview() {
+      this.$api.serviceShop.getGeneralOverview().then(response => {
+        let data = response.data.data;
+        this.servicesShopInfo[0].value = data.service_num;
+        this.servicesShopInfo[1].value = data.person_num;
+        this.servicesShopInfo[2].value = data.org_num;
+        this.servicesShopInfo[3].value = data.system_num;
+        this.servicesShopInfo[4].value = data.request_num;
+      });
+    },
+    goto(page) {
+      window.location.href = page;
+    }
   },
   mounted() {
-    this.init();
-  },
+    this.getBenner();
+    this.init("hotdata");
+    this.init("hgmap");
+    this.init("zhapp");
+  }
 };
 </script>
 
diff --git a/src/request/api/service_shop.js b/src/request/api/service_shop.js
index 1bd7d9d..73716c9 100644
--- a/src/request/api/service_shop.js
+++ b/src/request/api/service_shop.js
@@ -64,6 +64,17 @@ businessArea=${params.businessArea}&developable=${params.developable}&orgSource=
     submitShoppingCart() {
         return axios.post(`/apaas/serviceapp/v3/shopcart/apply`, params);
     },
+
+    // Service Shop Page
+    getFeaturedList(params) {
+        return axios.get(`/apaas/service/v3/recommend/show/featured/list/${params.type}`);
+    },
+    getBenner() {
+        return axios.get(`/apaas/service/v3/recommend/show/banners/list`);
+    },
+    getGeneralOverview() {
+        return axios.get(`/apaas/service/v3/statistics/other/index`);
+    }
 }
 
 export default serviceShop;
-- 
2.26.0