运行状态样式

src/components/card.vue

 <template>
-    <div class="card">
+    <div class="card" :style="flag?{borderRadius: '0px 12px 0px 0px'}:{}">
         <div class="card_title"><div class="circle"></div>{{title}}</div>
         <div class="card_contain">
             <slot></slot>
@@ -9,7 +9,7 @@
 
 <script>
 export default {
-    props: ['title'],
+    props: ['title','flag'],
     components: {
 
     },

src/components/service-header.vue

@@ -57,7 +57,9 @@ export default {
   methods: {
       subevent(val){
           if(val == 0){
-              this.$emit('deploy',this.data)
+              // this.$emit('deploy',this.data)
+              this.$router.push(`/yygl/${this.$route.params.level}/${this.$route.params.type}/deployment/${this.$route.params.id}`)
+              console.log(this.$route);
           }else if(val == 1){
               this.$emit('editapp')
           }else if(val == 2){

src/pages/workbench/yygl/deploy_app_detail.vue

@@ -125,34 +125,77 @@
               </nor-card>
             </div>
             <p class="service_title" style="margin-top:20px;">
-              <span></span>应用设置
+              <span></span>微服务
             </p>
-            <div class="addimage">多版本回滚</div>
-            <p class="imagebox">
-              <span
-                @click="image_select = index"
-                :style="
-                  image_select == index
-                    ? { backgroundColor: '#8390ee', color: '#f8f9fd' }
-                    : {}
-                "
-                v-for="(item, index) in image_arr"
-                :key="index + 6000"
-              >{{ item.name }}</span>
-            </p>
-            <table-um
-              v-for="(item, index) in image_arr"
-              :key="index+7000"
-              v-show="image_select == index"
-              :headers="header_image_arr"
-              :datas="image_arr[index].data"
-              :stripe="true"
-              :paginationShow="true"
-              @update="update"
-              @rollback="rollback"
-              @grouppublic="grouppublic"
-              @online="online"
-            ></table-um>
+            <div style="overflow:hidden;height:700px;">
+              <el-scrollbar class="service_list">
+                <div class="service_box" 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>
+              <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>
+                        <waveIcon :state="yx_state.state" style="margin:10px auto;"></waveIcon>
+                        <p
+                          style="color: #58617a;font-size: 16px;text-align:center;"
+                        >{{ yx_state.state }}</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>
+                        <p>{{ yx_state.averageTime }}</p>
+                        <p>最大响应时间：{{ yx_state.maxTime }}</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>
+                        <p>{{ yx_state.averageTraffic }}</p>
+                        <p>最大吞吐率：{{ yx_state.maxTraffic }}</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>
+                        <p>{{ yx_state.memory }}</p>
+                      </div>
+
+                    </div>
+                  </template>
+                </nor-card>
+
+                <nor-card title="服务设置" flag="true">
+                  <div class="addimage">多版本回滚</div>
+                  <!-- <p class="imagebox">
+                    <span
+                      @click="image_select = index"
+                      :style="
+                        image_select == index
+                          ? { backgroundColor: '#8390ee', color: '#f8f9fd' }
+                          : {}
+                      "
+                      v-for="(item, index) in image_arr"
+                      :key="index + 6000"
+                    >{{ item.name }}</span>
+                  </p> -->
+                  <table-um
+                    v-for="(item, index) in image_arr"
+                    :key="index+7000"
+                    v-show="image_select == index"
+                    :headers="header_image_arr"
+                    :datas="image_arr[index].data"
+                    :stripe="true"
+                    :paginationShow="true"
+                    @update="update"
+                    @rollback="rollback"
+                    @grouppublic="grouppublic"
+                    @online="online"
+                  ></table-um>
+                </nor-card>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -191,6 +234,84 @@ export default {
       oldpag_name: "镜像文件002.rar",
       imgList: [],
       imgList1: [],
+      service_list_arr:[
+        {
+          service:'cemplat-api1',
+          is_unhealth:1
+        },
+        {
+          service:'cemplat-api1',
+          is_unhealth:1
+        },
+        {
+          service:'cemplat-api1',
+          is_unhealth:0
+        },
+        {
+          service:'cemplat-api1',
+          is_unhealth:0
+        },
+        {
+          service:'cemplat-api1',
+          is_unhealth:0
+        },
+        {
+          service:'cemplat-api1',
+          is_unhealth:0
+        },
+        {
+          service:'cemplat-api1',
+          is_unhealth:0
+        },
+        {
+          service:'cemplat-api1',
+          is_unhealth:0
+        },
+        {
+          service:'cemplat-api1',
+          is_unhealth:0
+        },
+        {
+          service:'cemplat-api1',
+          is_unhealth:0
+        },
+        {
+          service:'cemplat-api1',
+          is_unhealth:0
+        },
+        {
+          service:'cemplat-api1',
+          is_unhealth:0
+        },
+        {
+          service:'cemplat-api1',
+          is_unhealth:0
+        },
+        {
+          service:'cemplat-api1',
+          is_unhealth:0
+        },
+        {
+          service:'cemplat-api1',
+          is_unhealth:0
+        },
+        {
+          service:'cemplat-api1',
+          is_unhealth:0
+        },
+        {
+          service:'cemplat-api1',
+          is_unhealth:0
+        },
+        {
+          service:'cemplat-api1',
+          is_unhealth:0
+        },
+        {
+          service:'cemplat-api1',
+          is_unhealth:0
+        },
+      ],
       yx_state: {
         state: "",
         averageTime: "",
@@ -477,6 +598,7 @@ export default {
     this.getServiceBaseInfo();
     this.getServiceyxztInfo();
     this.getImageInfo();
+    this.get_service_list();
     if (this.$route.query.showstate) {
       this.now_service = 1;
     }
@@ -662,12 +784,24 @@ export default {
           let data = response.data.data;
           this.markdown = data;
         });
+    },
+    get_service_list(){
+      this.$http
+        .get(`/apaas/hubApi/market/services/${this.$route.params.deploy_id}`)
+        .then(response => {
+          if(response.data.success){
+            this.service_list_arr = response.data.data
+          }
+        })
     }
   }
 };
 </script>
 
 <style>
+.el-scrollbar__wrap {
+  overflow-x: hidden;
+}
 .savebtn .el-button {
   float: right;
   margin-left: 20px;
@@ -684,7 +818,8 @@ export default {
 .info_contain2 .el-input__inner {
   background-color: #f7f8f9;
   width: 1022px;
-}
+} 
+
 </style>
 <style scoped>
 .detail_contain {
@@ -772,6 +907,7 @@ export default {
   border-radius: 8px;
   margin-top: 20px;
   margin-bottom: 30px;
+  margin-left: 40px;
   cursor: pointer;
 }
 .use_know p {
@@ -881,4 +1017,50 @@ export default {
   overflow: hidden;
   -webkit-box-orient: vertical;
 }
+.service_list{
+  float: left;
+  width: 400px;
+  height: 100%;
+  overflow-x: hidden;
+  border: 1px solid #e5f0ff;
+  border-radius: 12px 0px 0px 12px;
+}
+.service_box{
+  width: 400px;
+	height: 48px;
+  line-height: 48px;
+  text-align: left;
+  padding-left: 38px;
+  border-bottom: 1px solid #e5f0ff;
+  position: relative;
+  cursor: pointer;
+}
+.service_tips{
+  display: inline-block;
+  position: absolute;
+  font-size: 12px;
+  color: #e15260;
+  width: 42px;
+	height: 20px;
+  line-height: 20px;
+  text-align: center;
+  background-color: #ffefef;
+	border-radius: 4px;
+	border: solid 1px #d7a4a9;
+  top:13px;
+  right:50px;
+}
+.service_detail{
+  float: left;
+  height: 270px;
+  width: calc(100% - 425px);
+}
+.service_card_box{
+  float: left;
+  border-right: 1px solid #e5f0ff;
+  width: calc(25%);
+}
+.card_contain .service_card_box:nth-last-of-type(1){
+  border-right:0;
+}
 </style>