From 948c03caf5f24206ed6b55338a68ac6e386c932c Mon Sep 17 00:00:00 2001
From: zhangjun1 <zhangjun@bd-apaas.com>
Date: Fri, 6 Nov 2020 17:13:17 +0800
Subject: [PATCH] =?UTF-8?q?=E9=83=A8=E7=BD=B2=E7=9A=84=E5=BA=94=E7=94=A8?=
 =?UTF-8?q?=E8=BF=90=E8=A1=8C=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/card.vue                       |   4 +-
 src/pages/workbench/fwgl/serviceDetail.vue    |   2 +-
 .../workbench/yygl/deploy_app_detail.vue      | 192 +++++++++++++-----
 3 files changed, 142 insertions(+), 56 deletions(-)

diff --git a/src/components/card.vue b/src/components/card.vue
index 6241e2b..7aaa627 100644
--- a/src/components/card.vue
+++ b/src/components/card.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="card" :style="flag?{borderRadius: '0px 12px 0px 0px'}:{}">
-        <div class="card_title"><div class="circle"></div>{{title}}</div>
+        <div class="card_title" :style="{backgroundColor:bgc}"><div class="circle"></div>{{title}}</div>
         <div class="card_contain">
             <slot></slot>
         </div>
@@ -9,7 +9,7 @@
 
 <script>
 export default {
-    props: ['title','flag'],
+    props: ['title','flag','bgc'],
     components: {
 
     },
diff --git a/src/pages/workbench/fwgl/serviceDetail.vue b/src/pages/workbench/fwgl/serviceDetail.vue
index 462e9e3..269a5c6 100644
--- a/src/pages/workbench/fwgl/serviceDetail.vue
+++ b/src/pages/workbench/fwgl/serviceDetail.vue
@@ -1146,7 +1146,7 @@ export default {
     },
     iconChange (val) {
       // el-select实际上是两层div包裹的input
-      this.port_select = val;
+      this.port_select_server = val;
       // 获取当前el-select标签第一层div
       const dom = this.$refs['select_icon'].$el;
       if(dom.children[0].children[0].tagName == 'SPAN'){
diff --git a/src/pages/workbench/yygl/deploy_app_detail.vue b/src/pages/workbench/yygl/deploy_app_detail.vue
index d2ec1b6..8667211 100644
--- a/src/pages/workbench/yygl/deploy_app_detail.vue
+++ b/src/pages/workbench/yygl/deploy_app_detail.vue
@@ -68,7 +68,7 @@
           </div>
 
           <!-- <div v-if="now_service == 1&&image_arr.length"> -->
-          <div v-if="now_service == 1">
+          <div v-show="now_service == 1">
             <p class="service_title">
               <span></span>应用概况
             </p>
@@ -107,75 +107,93 @@
             </div>
             <p class="service_title" style="margin-top:20px;">
               <span></span>微服务
+              <el-select v-model="now_micor_service" ref="select_icon" @change="iconChange" placeholder="请选择">
+                <el-option v-for="item in service_list_arr" :key="item.service" :label="item.service" :value="item.index">
+                  <span v-if="item.is_unhealth" :style="{display:'inline-block',marginRight:'8px',width:'36px',height:'18px',marginLeft:'-10px',borderRadius:'4px',backgroundColor:'#e15260',lineHeight:'18px',textAlign:'center'}">故障</span>
+                  <span v-else :style="{display:'inline-block',marginRight:'8px',width:'36px',height:'18px',borderRadius:'4px',marginLeft:'-10px',}"></span>
+                  {{item.service}}
+                </el-option>
+              </el-select>
             </p>
             <div style="overflow:hidden;height:700px;" class="limit-elscroll">
-              <el-scrollbar class="service_list">
+              <!-- <el-scrollbar class="service_list">
                 <div class="service_box" @click="change_micor(index)" :style="now_micor_service==index?{paddingLeft:'30px',borderLeft:'8px solid #515fe7',backgroundColor:'#fbfcfe'}:''" v-for="(item,index) in service_list_arr" :key="index+60000">{{item.service}}
                   <span v-if="item.is_unhealth" class="service_tips">故障</span>
                 </div>
-              </el-scrollbar>
+              </el-scrollbar> -->
+              <div class="service_type_ab">
+                <div v-for="item in mesh_options"  @click="mesh_value=item.value" :key="item.value" :style="mesh_value==item.value?{backgroundColor:'#515fe7',color:'#f4f7fc',}:''">
+                  {{item.label}}
+                </div>
+              </div>
               <div class="service_detail">
-                <nor-card title="服务概况" flag="true">
-                  <template>
-                    <div style="overflow:hidden;height:160px;padding-top:10px;">
-                      <div style="height:115px;padding-top:10px;" class="service_card_box">
-                        <p style="color: #707693;font-size: 16px;text-align:center;">服务状态</p>
+                <div class="service_title_card">
+                  <nor-card title="服务状态" class="service_card" bgc="#e4f4fb">
+                    <template>
+                      <div style="height:125px;padding-top:10px;">
                         <waveIcon :state="micor_state.state=='running'?'运行中':'停止'" style="margin:10px auto;"></waveIcon>
                         <p style="color: #58617a;font-size: 16px;text-align:center;">{{ micor_state.state=='running'?'运行中':'停止' }}</p>
                       </div>
-
-                      <div style="height:115px;" class="service_num service_card_box">
-                        <span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">服务平均响应时间</span>
+                    </template>
+                  </nor-card>
+                  <nor-card title="服务平均响应时间" class="service_card" bgc="#e4f4fb">
+                    <template>
+                      <div style="height:125px;padding-top:20px;" class="service_num">
                         <p>{{ micor_state.averageTime }}ms</p>
                         <p>最大响应时间：{{ micor_state.maxTime }}ms</p>
                       </div>
-
-                      <div style="height:115px;" class="service_num service_card_box">
-                        <span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">吞吐率</span>
+                    </template>
+                  </nor-card>
+                  <nor-card title="吞吐率" class="service_card" bgc="#e4f4fb">
+                    <template>
+                      <div style="height:125px;padding-top:20px;" class="service_num">
                         <p>{{ micor_state.averageTraffic }}dps</p>
                         <p>最大吞吐率：{{ micor_state.maxTraffic }}dps</p>
                       </div>
-
-                      <div style="height:115px;padding-top:30px;" class="service_num service_card_box">
-                        <span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">内存使用</span>
+                    </template>
+                  </nor-card>
+                  <nor-card title="内存使用" class="service_card" bgc="#e4f4fb">
+                    <template>
+                      <div style="height:125px;padding-top:40px;" class="service_num">
                         <p>{{ micor_state.memory }}MB</p>
                       </div>
+                    </template>
+                  </nor-card>
+                </div>
 
-                    </div>
-                  </template>
-                </nor-card>
-
-                <nor-card title="服务设置" flag="true" v-show="is_current_user">
-                  <div class="addimage">
+                <!-- <nor-card title="服务设置" flag="true" v-show="is_current_user"> -->
+                  <!-- <div class="addimage">
                     <el-select v-model="mesh_value" placeholder="请选择">
                       <el-option v-for="item in mesh_options" :key="item.value" :label="item.label" :value="item.value">
                       </el-option>
                     </el-select>
-                  </div>
-                  <p class="imagebox">
-                    <span @click="image_select = index;getImageInfo()" :style="
-                        image_select == index
-                          ? { backgroundColor: '#8390ee', color: '#f8f9fd' }
-                          : {}
-                      " v-for="(item, index) in image_arr" :key="index + 6000">{{ item.name }}</span>
-                  </p>
-                  <el-table :data="image_arr[index].data" v-for="(item, index) in image_arr" :key="index+7000" v-show="image_select == index" stripe height="376" style="width: 100%">
-                    <el-table-column prop="tag" align="center" label="版本号">
-                    </el-table-column>
-                    <el-table-column prop="date" align="center" label="在线日期">
-                    </el-table-column>
-                    <el-table-column label="操作" align="center" width="300">
-                      <template slot-scope="scope">
-                        <el-button @click="update(scope.row)" type="text" size="small" :disabled="up_flag" v-if="(!scope.row.subsets)&&scope.$index<Math.min(...now_image_version)">升级</el-button>
-                        <el-button @click="update(scope.row)" type="text" size="small" :disabled="up_flag" v-if="(!scope.row.subsets)&&scope.$index>Math.max(...now_image_version)">回滚</el-button>
-                        <el-button @click="together(scope.row)" type="text" size="small" :disabled="up_flag" v-if="(!scope.row.subsets)&&scope.$index<Math.min(...now_image_version)">蓝绿发布</el-button>
-                        <el-button type="text" size="small" :disabled="true" v-if="scope.row.subsets">当前版本</el-button>
-                        <el-button @click="delete_ver(scope.row)" style="color:#830f53;font-weight:600;" type="text" size="small" :disabled="up_flag" v-if="scope.row.subsets&&now_image_version.length>=2">删除</el-button>
-                      </template>
-                    </el-table-column>
+                  </div> -->
+                  <div v-show="is_current_user" class="tag_ox">
+                    <p class="imagebox">
+                      <span @click="image_select = index;getImageInfo()" :style="
+                          image_select == index
+                            ? { backgroundColor: '#8390ee', color: '#f8f9fd' }
+                            : {}
+                        " v-for="(item, index) in image_arr" :key="index + 6000">{{ item.name }}</span>
+                    </p>
+                    <el-table :data="image_arr[index].data" v-for="(item, index) in image_arr" :key="index+7000" v-show="image_select == index" stripe height="376" style="width: 100%">
+                      <el-table-column prop="tag" align="center" label="版本号">
+                      </el-table-column>
+                      <el-table-column prop="date" align="center" label="在线日期">
+                      </el-table-column>
+                      <el-table-column label="操作" align="center" width="300">
+                        <template slot-scope="scope">
+                          <el-button @click="update(scope.row)" type="text" size="small" :disabled="up_flag" v-if="(!scope.row.subsets)&&scope.$index<Math.min(...now_image_version)">升级</el-button>
+                          <el-button @click="update(scope.row)" type="text" size="small" :disabled="up_flag" v-if="(!scope.row.subsets)&&scope.$index>Math.max(...now_image_version)">回滚</el-button>
+                          <el-button @click="together(scope.row)" type="text" size="small" :disabled="up_flag" v-if="(!scope.row.subsets)&&scope.$index<Math.min(...now_image_version)">蓝绿发布</el-button>
+                          <el-button type="text" size="small" :disabled="true" v-if="scope.row.subsets">当前版本</el-button>
+                          <el-button @click="delete_ver(scope.row)" style="color:#830f53;font-weight:600;" type="text" size="small" :disabled="up_flag" v-if="scope.row.subsets&&now_image_version.length>=2">删除</el-button>
+                        </template>
+                      </el-table-column>
 
-                  </el-table>
-                </nor-card>
+                    </el-table>
+                  </div>
+                <!-- </nor-card> -->
               </div>
             </div>
           </div>
@@ -292,7 +310,7 @@ export default {
         memory: ""
       },
       public_flag: false,
-      now_micor_service: 0,
+      now_micor_service: '',
       image_arr: [],
       area_arr: [],
       now_image_version: [],
@@ -499,6 +517,30 @@ export default {
   },
   mounted() {},
   methods: {
+    iconChange(val){
+      this.now_micor_service = val
+      // 获取当前el-select标签第一层div
+      const dom = this.$refs['select_icon'].$el;
+      if(dom.children[0].children[0].tagName == 'SPAN'){
+        dom.children[0].children[0].remove()
+      }
+      // 创建需要添加到其中的标签 并填充内容
+      const svgDom = document.createElement('span'); // ('<svg-icon ref="iconRef" icon-class="' + val + '" style="float: left;width: 3%;height: 30px;border: 1px solid #dcdfe6;border-right:none;" />');
+      svgDom.setAttribute('class', 'el-input__prefix');
+      if(this.service_list_arr[val].is_unhealth==0){
+        svgDom.innerHTML = '<span class="el-input__prefix-inner" style="margin-top:15px;margin-left:10px;display:inline-block;width:0px;height:18px;border-radius:4px;"></span>';
+      }else{
+        svgDom.innerHTML = '<span class="el-input__prefix-inner" style="margin-top:10px;margin-left:10px;display:inline-block;width:36px;color:#fff;height:18px;line-height:18px;border-radius:4px;background-color:#e15260;">故障</span>';
+      }
+      // 将创建的标签添加到父节点(第二层div)
+      dom.children[0].appendChild(svgDom);
+      // 得到el-select中的input标签
+      const inputDom = dom.children[0].children[0];
+      inputDom.setAttribute('style', 'padding-left: 60px;');
+      // 将添加的标签放到input前面
+      dom.children[0].insertBefore(svgDom, inputDom);
+      this.get_micro_service();
+    },
     get_service_arae() {
       this.$http
         .get("/apaas/service/v3/service/manager/servarea")
@@ -938,10 +980,20 @@ export default {
         .get(`/apaas/hubApi/market/services/${this.$route.params.deploy_id}`)
         .then(response => {
           if (response.data.success) {
-            this.service_list_arr = response.data.data;
-            if (this.service_list_arr && this.service_list_arr.length) {
-              this.get_micro_service();
-            }
+            var temp = []
+            response.data.data.forEach((e,idx) => {
+              temp.push({
+                ...e,
+                index:idx
+              })
+            });
+            this.service_list_arr = temp;
+            setTimeout(()=>{
+              this.iconChange(0)
+            },2000)
+            // if (this.service_list_arr && this.service_list_arr.length) {
+            //   this.get_micro_service();
+            // }
           }
         });
     }
@@ -1016,8 +1068,19 @@ export default {
 .addimage .el-input__icon {
   line-height: 28px;
 }
+.service_title .el-input__inner{
+  background-color: #f7f8f9;
+  height: 32px;
+  line-height: 32px;
+}
+.tag_ox .el-table thead{
+  color: #1a2236;
+}
 </style>
 <style scoped>
+.service_title .el-select{
+  margin-left: 10px;
+}
 .info_contain >>> .apass_dialog .el-dialog__footer {
   padding-top: 0;
 }
@@ -1189,6 +1252,7 @@ export default {
   overflow: hidden;
   margin-bottom: 20px;
   padding-left: 40px;
+  margin-top: 20px;
 }
 .imagebox span {
   height: 34px;
@@ -1244,7 +1308,8 @@ export default {
 .service_detail {
   float: left;
   height: 270px;
-  width: calc(100% - 425px);
+  width: 100%;
+  /* width: calc(100% - 425px); */
 }
 .service_card_box {
   float: left;
@@ -1265,4 +1330,25 @@ export default {
 .dialog-content .formname:nth-of-type(1) {
   margin-top: 0px;
 }
+.service_type_ab{
+  height: 48px;
+  width: 300px;
+  background-color: #f6f7fb;
+	border-radius: 8px;
+  overflow: hidden;
+  margin: 0px 0 10px 0px;
+  padding: 6px;
+  box-sizing: border-box;
+}
+.service_type_ab div{
+  float: left;
+  height: 36px;
+  width: 33.3%;
+  line-height: 36px;
+  text-align: center;
+  color: #58617a;
+  cursor: pointer;
+  font-weight: 600;
+  border-radius: 6px;
+}
 </style>
-- 
2.26.0