From e5d196730b97fef77894756636f0069b23b01a0d Mon Sep 17 00:00:00 2001
From: xuyiming <xuyiming@bd-apaas.com>
Date: Tue, 11 Aug 2020 11:52:34 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E8=AF=A6=E6=83=85=E6=9C=8D?=
 =?UTF-8?q?=E5=8A=A1=E8=B0=83=E7=94=A8=E5=88=97=E8=A1=A8=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=AD=97=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/workbench/fwgl/serviceDetail.vue | 271 +++++++++++++--------
 1 file changed, 167 insertions(+), 104 deletions(-)

diff --git a/src/pages/workbench/fwgl/serviceDetail.vue b/src/pages/workbench/fwgl/serviceDetail.vue
index 1d03dd6..306fa83 100644
--- a/src/pages/workbench/fwgl/serviceDetail.vue
+++ b/src/pages/workbench/fwgl/serviceDetail.vue
@@ -1,7 +1,15 @@
 <template>
   <div class="detail_contain">
     <p class="now_page_title">
-      我的服务 / {{now_user==0||now_user==4?'注册发布的服务':now_user==1?'组织服务管理':'平台服务管理'}} /
+      我的服务 /
+      {{
+        now_user == 0 || now_user == 4
+          ? "注册发布的服务"
+          : now_user == 1
+          ? "组织服务管理"
+          : "平台服务管理"
+      }}
+      /
       <span>服务详情</span>
     </p>
     <div class="info_contain">
@@ -16,28 +24,38 @@
             :style="
               now_service == index ? { borderBottom: '4px solid #f5ab4c' } : {}
             "
-          >{{ item }}</div>
+          >
+            {{ item }}
+          </div>
         </div>
         <div class="type_box_select">
           <info-list
             :list_arr="now_service == 0 ? list_arr : servicead_arr"
             v-if="now_service == 0 || now_service == 1"
           >
-            <table-um :headers="header_arr" :datas="res_data" :stripe="true" slot="zd_table"></table-um>
+            <table-um
+              :headers="header_arr"
+              :datas="res_data"
+              :stripe="true"
+              slot="zd_table"
+            ></table-um>
             <v-apaas-code :datas="code_arr" slot="zd_code"></v-apaas-code>
           </info-list>
           <div v-show="now_service == 2">
-            <p class="service_title">
-              <span></span>服务运行概况
-            </p>
+            <p class="service_title"><span></span>服务运行概况</p>
             <div class="service_title_card">
               <nor-card title="服务状态" class="service_card">
                 <template>
                   <div style="height:115px;padding-top:10px;">
-                    <waveIcon :state="yx_state.state" style="margin:10px auto;"></waveIcon>
+                    <waveIcon
+                      :state="yx_state.state"
+                      style="margin:10px auto;"
+                    ></waveIcon>
                     <p
                       style="color: #58617a;font-size: 16px;text-align:center;"
-                    >{{ yx_state.state }}</p>
+                    >
+                      {{ yx_state.state }}
+                    </p>
                   </div>
                 </template>
               </nor-card>
@@ -59,7 +77,10 @@
               </nor-card>
               <nor-card title="资源使用" class="service_card">
                 <template>
-                  <div style="height:115px;padding-top:30px;" class="service_num">
+                  <div
+                    style="height:115px;padding-top:30px;"
+                    class="service_num"
+                  >
                     <p>{{ yx_state.memory }}</p>
                   </div>
                 </template>
@@ -68,10 +89,11 @@
             <nor-card title="服务调用拓扑图" class="service_card_charts">
               <Topology :datas="datas" />
             </nor-card>
-            <p class="service_title">
-              <span></span>服务调用列表
-            </p>
-            <table-um :headers="header_use_arr" :datas="service_use_arr"></table-um>
+            <p class="service_title"><span></span>服务调用列表</p>
+            <table-um
+              :headers="header_use_arr"
+              :datas="service_use_arr"
+            ></table-um>
             <list-pagination
               :total="listTotal"
               :page-sizes="pageSizes"
@@ -83,19 +105,34 @@
           </div>
           <div v-show="now_service == 3">
             <p style="color: #8890a7;">服务规格：</p>
-            <table-um :stripe="true" :headers="service_size_arr" :datas="service_size_data"></table-um>
+            <table-um
+              :stripe="true"
+              :headers="service_size_arr"
+              :datas="service_size_data"
+            ></table-um>
             <p style="color: #8890a7;">购买方式：</p>
             <p style="color: #242c43;margin:10px 0px;">
               {{
-              buy_type == 1
-              ? "按月购买"
-              : buy_type == 2
-              ? "按年购买"
-              : "按月购买&按年购买"
+                buy_type == 1
+                  ? "按月购买"
+                  : buy_type == 2
+                  ? "按年购买"
+                  : "按月购买&按年购买"
               }}
             </p>
-            <div class="editbtn" v-if="now_user == 1" @click="sizeset_flag = true">编辑</div>
-            <p v-if="now_user == 1 && sizeset_flag" style="color: #8890a7;margin-bottom:10px;">规格设置：</p>
+            <div
+              class="editbtn"
+              v-if="now_user == 1"
+              @click="sizeset_flag = true"
+            >
+              编辑
+            </div>
+            <p
+              v-if="now_user == 1 && sizeset_flag"
+              style="color: #8890a7;margin-bottom:10px;"
+            >
+              规格设置：
+            </p>
             <table-um
               v-if="now_user == 1 && sizeset_flag"
               :headers="edit_size_arr"
@@ -108,17 +145,24 @@
               :datas="service_size_data"
               @changeTable="now_size_data"
             ></table-um>
-            <p v-if="now_user == 1 && sizeset_flag" style="color: #8890a7;margin:10px 0;">购买方式：</p>
+            <p
+              v-if="now_user == 1 && sizeset_flag"
+              style="color: #8890a7;margin:10px 0;"
+            >
+              购买方式：
+            </p>
             <el-button
               v-if="now_user == 1 && sizeset_flag"
               :type="buy_style.indexOf(1) !== -1 ? 'primary' : ''"
               @click="change_buy(1)"
-            >按月购买</el-button>
+              >按月购买</el-button
+            >
             <el-button
               v-if="now_user == 1 && sizeset_flag"
               :type="buy_style.indexOf(2) !== -1 ? 'primary' : ''"
               @click="change_buy(2)"
-            >按年购买</el-button>
+              >按年购买</el-button
+            >
             <div class="savebtn" v-if="now_user == 1 && sizeset_flag">
               <el-button @click="change_service_size">保存</el-button>
               <el-button @click="sizeset_flag = false">取消</el-button>
@@ -153,7 +197,7 @@ export default {
     Topology,
     serviceHeader,
     dialogAction,
-    ListPagination
+    ListPagination,
   },
   data() {
     return {
@@ -171,7 +215,7 @@ export default {
         maxTime: "",
         averageTraffic: "",
         maxTraffic: "",
-        memory: ""
+        memory: "",
       },
       service_use_arr: [],
       res_data: [], //响应参数
@@ -181,7 +225,7 @@ export default {
       service_arr: [
         ["服务基本信息", "接口详细信息", "服务运行状态"],
         ["服务基本信息", "接口详细信息", "服务运行状态", "服务计费规则"],
-        ["服务基本信息", "接口详细信息", "服务运行状态", "服务规格"]
+        ["服务基本信息", "接口详细信息", "服务运行状态", "服务规格"],
       ],
       service_size_data: [], //服务规格数组
       service_header_arr: {
@@ -192,29 +236,29 @@ export default {
         first: [
           {
             name: "服务类型",
-            text: ""
+            text: "",
           },
           {
             name: "申请次数",
-            text: ""
+            text: "",
           },
           {
             name: "调用次数",
-            text: ""
+            text: "",
           },
           {
             name: "服务状态",
-            text: ""
-          }
+            text: "",
+          },
         ],
         second: [
           {
             name: "服务接口地址",
-            text: ""
-          }
+            text: "",
+          },
         ],
         fixed: true,
-        fixedurl: this.$route.path.replace("servicedetail", "serviceedit")
+        fixedurl: this.$route.path.replace("servicedetail", "serviceedit"),
       },
       now_service: 0,
       datas: {},
@@ -223,90 +267,102 @@ export default {
           prop: "name",
           label: "字段编码",
           minWidth: "20%",
-          align: "left"
+          align: "left",
         },
         {
           prop: "label",
           label: "字段名称",
           minWidth: "20%",
-          align: "center"
+          align: "center",
         },
         {
           prop: "show_type",
           label: "字段类型",
           width: "100px",
-          align: "center"
+          align: "center",
         },
         {
           prop: "descript",
           label: "字段说明",
           minWidth: "30%",
-          align: "left"
+          align: "left",
         },
         {
           prop: "example",
           label: "字段示例数值",
           width: "120px",
-          align: "left"
-        }
+          align: "left",
+        },
       ],
       header_use_arr: [
         {
           prop: "dydw",
           label: "调用单位",
           minWidth: "20%",
-          align: "left"
+          align: "left",
         },
         {
           prop: "dyr",
           label: "调用人",
           width: "100px",
-          align: "center"
+          align: "center",
         },
         {
           prop: "dyyw",
           label: "调用业务系统",
           minWidth: "20%",
-          align: "left"
+          align: "left",
         },
         {
           prop: "ywxt",
           label: "业务系统网址",
           minWidth: "20%",
-          align: "left"
+          align: "left",
         },
         {
           prop: "cjms",
           label: "场景描述",
           minWidth: "40%",
-          align: "left"
+          align: "left",
+        },
+        {
+          prop: "sqgg",
+          label: "申请规格",
+          minWidth: "40%",
+          align: "center",
+        },
+        {
+          prop: "sqsc",
+          label: "申请时长",
+          minWidth: "40%",
+          align: "center",
         },
         {
           prop: "sqsj",
           label: "申请调用时间",
           width: "160px",
-          align: "right"
-        }
+          align: "right",
+        },
       ],
       service_size_arr: [
         {
           prop: "count",
           label: "访问次数（次/日）",
           minWidth: "33.33%",
-          align: "center"
+          align: "center",
         },
         {
           prop: "pv",
           label: "访问量（PV/日）",
           minWidth: "33.33%",
-          align: "center"
+          align: "center",
         },
         {
           prop: "des",
           label: "规格说明",
           minWidth: "33.33%",
-          align: "left"
-        }
+          align: "left",
+        },
       ],
       edit_size_arr: [
         {
@@ -314,21 +370,21 @@ export default {
           label: "访问次数（次/日）",
           minWidth: "33.33%",
           align: "center",
-          type: "inputNumber"
+          type: "inputNumber",
         },
         {
           prop: "pv",
           label: "访问量（PV/日）",
           minWidth: "33.33%",
           align: "center",
-          type: "inputNumber"
+          type: "inputNumber",
         },
         {
           prop: "des",
           label: "规格说明",
           minWidth: "33.33%",
           align: "left",
-          type: "input"
+          type: "input",
         },
         {
           label: "操作",
@@ -339,48 +395,48 @@ export default {
             {
               type: "action-delete",
               label: "删除",
-              local: true
-            }
-          ]
-        }
+              local: true,
+            },
+          ],
+        },
       ],
       size_arr_down: [],
       servicead_arr: [
         {
           title: "请求方式：",
-          info: ""
+          info: "",
         },
         {
           title: "请求参数：",
-          info: ""
+          info: "",
         },
         {
           title: "请求示例：",
-          info: ""
+          info: "",
         },
         {
           title: "编码格式：",
-          info: ""
+          info: "",
         },
         {
           title: "响应参数：",
           info: "",
           type: "solt",
-          solt_name: "zd_table"
+          solt_name: "zd_table",
         },
         {
           title: "响应示例：",
           info: "",
           type: "solt",
-          solt_name: "zd_code"
-        }
+          solt_name: "zd_code",
+        },
       ],
       service_type_arr: [
         "数据服务",
         "时空服务",
         "视频服务",
         "感知服务",
-        "综合应用"
+        "综合应用",
       ],
       scrvice_area_arr: [
         "经济建设",
@@ -392,49 +448,49 @@ export default {
         "文化休闲",
         "社会团体",
         "教育机构",
-        "其他"
+        "其他",
       ],
       open_arr: ["共享", "受限", "敏感"],
-      service_state_arr: ["已下架", "已上架", "审核中","审核中"],
+      service_state_arr: ["已下架", "已上架", "审核中", "审核中"],
       request_arr: ["GET", "POST", "PUT", "DELETE"],
       list_arr: [
         {
           title: "服务描述：",
-          info: ""
+          info: "",
         },
         {
           title: "服务领域：",
-          info: ""
+          info: "",
         },
         {
           title: "所属组织：",
-          info: ""
+          info: "",
         },
         {
           title: "开放程度：",
-          info: ""
+          info: "",
         },
         {
           title: "接口编码：",
-          info: ""
+          info: "",
         },
         {
           title: "注册发布时间：",
-          info: ""
-        }
-      ]
+          info: "",
+        },
+      ],
     };
   },
   computed: {
     ...mapGetters(["level"]),
-    ...mapState(["userInfo"])
+    ...mapState(["userInfo"]),
   },
   watch: {
     now_service(n, o) {
       if (n == 2) {
         this.getData();
       }
-    }
+    },
   },
   created() {
     if (this.userInfo) {
@@ -463,18 +519,24 @@ export default {
         .get(
           `/apaas/service/v3/service/manager/service/applys?service_id=${this.$route.params.id}&page=${this.currentPage}&size=${this.pageSize}`
         )
-        .then(response => {
+        .then((response) => {
           console.log(response);
           if (response.data.success) {
             this.listTotal = response.data.data.total;
-            response.data.data.data.forEach(e => {
+            let data = response.data.data.data || [];
+
+            data.forEach((e) => {
               this.service_use_arr.push({
                 dydw: e.apply_org_name,
                 dyr: e.apply_user_info.user_name,
                 dyyw: e.business_name,
                 ywxt: e.business_url,
                 cjms: e.scene,
-                sqsj: e.apply_time.split('+')[0].replace('T',' ')
+                sqsj: e.apply_time.split("+")[0].replace("T", " "),
+                sqgg: e.request_spcs
+                  ? `访问次数：${e.request_spcs.count}/日 访问量：${e.request_spcs.pv}/日`
+                  : "",
+                sqsc: e.duration + ["", "个月", "年"][e.duration_unit || 0],
               });
             });
           }
@@ -503,7 +565,7 @@ export default {
       });
     },
     getData() {
-      this.$api.workbench.getServiceTopology().then(response => {
+      this.$api.workbench.getServiceTopology().then((response) => {
         this.datas = response.data.elements;
       });
     },
@@ -513,11 +575,15 @@ export default {
           "/apaas/service/v3/service/manager?service_id=" +
             this.$route.params.id
         )
-        .then(response => {
+        .then((response) => {
           if (response.data.success === 1) {
             let data = response.data.data;
             this.$set(this.service_header_arr, "portal_id", data.portal_id); // 时空服务id
-            this.$set(this.service_header_arr, "isMap", data.data_service_type1 === 6);
+            this.$set(
+              this.service_header_arr,
+              "isMap",
+              data.data_service_type1 === 6
+            );
             this.$set(this.service_header_arr, "name", data.name);
             this.$set(
               this.service_header_arr["first"][0],
@@ -545,12 +611,8 @@ export default {
               data.req_url
             );
             this.$set(this.service_header_arr, "url", data.cover);
-            if(this.now_user==1){
-              this.$set(
-              this.service_header_arr,
-              "fixed",
-              false
-            );
+            if (this.now_user == 1) {
+              this.$set(this.service_header_arr, "fixed", false);
             }
             this.$set(
               this.service_header_arr,
@@ -592,7 +654,7 @@ export default {
           } else {
             this.$message({
               message: response.data.errMsg,
-              type: "warning"
+              type: "warning",
             });
           }
         })
@@ -608,7 +670,7 @@ export default {
           "/apaas/service/v3/service/manager/request/spcs/list?service_id=" +
             this.$route.params.id
         )
-        .then(response => {
+        .then((response) => {
           let data = response.data.data;
           console.log(data);
           this.service_size_data = data.data;
@@ -623,7 +685,7 @@ export default {
     },
     change_service_size() {
       let temp = [];
-      this.size_arr_down.forEach(e => {
+      this.size_arr_down.forEach((e) => {
         if (e.pv && e.count) {
           if (e.flag) {
             e.id = 0;
@@ -646,9 +708,9 @@ export default {
       this.$http
         .post("/apaas/service/v3/service/manager/request/spcs/save", {
           service_id: parseInt(this.$route.params.id),
-          data: temp
+          data: temp,
         })
-        .then(response => {
+        .then((response) => {
           console.log(response);
           if (response.data.success) {
             this.$message.success("保存成功");
@@ -665,7 +727,7 @@ export default {
         .get(
           `/apaas/istio/service/apaas-proxy/overview/apaas-proxy-${this.$route.params.id}`
         )
-        .then(response => {
+        .then((response) => {
           if (response.data.success) {
             let data = response.data.data;
             this.yx_state = {
@@ -674,22 +736,22 @@ export default {
               maxTime: data.respTime.max + "ms",
               averageTraffic: data.throughput.avg + "dps",
               maxTraffic: data.throughput.max + "dps",
-              memory: data.resource.memory + "MB"
+              memory: data.resource.memory + "MB",
             };
           }
         })
-        .catch(response => {
+        .catch((response) => {
           this.yx_state = {
             state: "停止",
             averageTime: "0ms",
             maxTime: "0ms",
             averageTraffic: "0dps",
             maxTraffic: "0dps",
-            memory: "0MB"
+            memory: "0MB",
           };
         });
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -750,8 +812,8 @@ export default {
   padding: 30px 10px 10px 10px;
   width: 100%;
 }
-.type_box_select >>> .outlist .list p{
-  word-wrap:break-word; 
+.type_box_select >>> .outlist .list p {
+  word-wrap: break-word;
 }
 .service_title {
   font-size: 16px;
@@ -801,6 +863,7 @@ export default {
 .service_card_charts {
   width: 100%;
   margin-top: 30px;
+  margin-bottom: 30px;
 }
 .editbtn {
   width: 124px;
-- 
2.26.0