Merge branch 'ldx' of cloud.wodcloud.com:apaas/apaas-v3-ui into ldx

src/components/apass-list.vue

@@ -4,6 +4,8 @@
       <slot name="breadcrumb"></slot>
     </div>
     <div class="main-container">
+      <slot name="top"></slot>
+
       <div class="header-container" v-if="!hideHeader">
         <div class="header-left apass_button">
           <el-button
@@ -18,6 +20,28 @@
               "
             ></i>
           </el-button>
+
+          <div
+            v-for="(item, index) in selectFilter"
+            :key="'select_' + index"
+            class="select_container"
+          >
+            <span class="select_title" v-text="item.name"></span>
+            <el-select
+              v-model="item.value"
+              placeholder="请选择"
+              @change="listAction"
+            >
+              <el-option
+                v-for="(v, i) in item.options"
+                :key="'select_' + index + '_option_' + i"
+                :label="v.name"
+                :value="v.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+
           <slot name="header-left"></slot>
         </div>
         <div class="header-center">
@@ -51,7 +75,7 @@
         <list-table
           :header="listHeader"
           :data="listData"
-          :padding-left="35"
+          :padding-left="listPaddingLeft"
         ></list-table>
       </div>
 
@@ -84,6 +108,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    otherFilter: {
+      type: Array,
+      default: () => [],
+    },
     listHeader: {
       type: Array,
       default: () => [],
@@ -116,8 +144,21 @@ export default {
     currentPage: 1,
     timer: null,
     pageSizes: [15, 50, 100],
+    selectFilter: [],
   }),
   methods: {
+    initOtherFilter() {
+      this.otherFilter.forEach((item) => {
+        this.$set(this.filter, item.prop, item.default);
+
+        this.selectFilter.push({
+          name: item.name,
+          prop: item.prop,
+          value: item.default,
+          options: item.options,
+        });
+      });
+    },
     searchAction(value) {
       this.listAction();
     },
@@ -140,8 +181,15 @@ export default {
       }
 
       this.timer = setTimeout(() => {
+        let selectFilter = {};
+
+        this.selectFilter.forEach((item) => {
+          selectFilter[item.prop] = item.value;
+        });
+
         this.$emit("list-action", {
           ...this.filter,
+          ...selectFilter,
           keyword: this.searchValue,
           size: this.pageSize,
           page: this.currentPage,
@@ -150,6 +198,10 @@ export default {
     },
   },
   mounted() {
+    if (this.otherFilter && this.otherFilter.length > 0) {
+      this.initOtherFilter();
+    }
+
     this.listAction();
   },
 };
@@ -182,7 +234,17 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-.header-container .el-button + .el-button {
+.header-container .select_container {
+  display: inline-block;
+  vertical-align: middle;
+}
+.header-container .select_container .select_title {
+  font-size: 14px;
+  color: #242c43;
+  margin-right: 10px;
+}
+.header-container .el-button + .el-button,
+.header-container .select_container + .select_container {
   margin-left: 25px;
 }
 .apass_filter {

src/components/apass-table.vue

 <template>
   <div class="apass_table">
     <el-table :data="data">
-      <el-table-column :width="Math.max(paddingLeft - 10, 0)"></el-table-column>
+      <el-table-column
+        v-if="paddingLeft > 10"
+        :width="paddingLeft - 10"
+      ></el-table-column>
       <el-table-column
         v-for="(item, index) in header"
         :label="item.label"
@@ -43,6 +46,33 @@
               @click="item.callback && item.callback(scope.row)"
             ></a>
           </div>
+          <div v-else-if="item.type === 'image'" class="img_content">
+            <img
+              :src="item.getImage && item.getImage(scope.row)"
+              :width="item.size"
+            />
+          </div>
+          <div
+            v-else-if="
+              item.type === 'tooltip' &&
+                item.getLength &&
+                item.getLength(scope.row) > 1
+            "
+          >
+            <el-tooltip
+              placement="right-start"
+              popper-class="apass_table_tooltip"
+            >
+              <div
+                slot="content"
+                v-html="item.getContent && item.getContent(scope.row)"
+              ></div>
+              <span
+                v-text="(item.getText && item.getText(scope.row)) + '..'"
+                style="text-decoration: underline;color: #515fe7;"
+              ></span>
+            </el-tooltip>
+          </div>
           <span
             v-else
             v-text="
@@ -73,3 +103,19 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.img_content {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>
+
+<style>
+.apass_table_tooltip {
+  font-size: 12px;
+  line-height: 20px;
+}
+</style>

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/e-charts/line_chart.vue

@@ -6,7 +6,7 @@
 import uuidv1 from "uuid/v1";
 var echarts = require("echarts");
 export default {
-  props: [],
+  props: ['data'],
   components: {},
   data() {
     return {
@@ -16,9 +16,11 @@ export default {
   watch: {},
   computed: {},
   created() {},
-  mounted() {},
+  mounted() {
+      this.init_line_charts(this.data.xaxis,this.data.data)
+  },
   methods: {
-    init_line_charts() {
+    init_line_charts(xAxisData,yarr) {
       let bgColor = "#fff";
       let color = [
         "#0090FF",
@@ -28,55 +30,6 @@ export default {
         "#8B5CFF",
         "#00CA69",
       ];
-      let echartData = [
-        {
-          name: "1",
-          value1: 100,
-          value2: 233,
-        },
-        {
-          name: "2",
-          value1: 138,
-          value2: 233,
-        },
-        {
-          name: "3",
-          value1: 350,
-          value2: 200,
-        },
-        {
-          name: "4",
-          value1: 173,
-          value2: 180,
-        },
-        {
-          name: "5",
-          value1: 180,
-          value2: 199,
-        },
-        {
-          name: "6",
-          value1: 150,
-          value2: 233,
-        },
-        {
-          name: "7",
-          value1: 180,
-          value2: 210,
-        },
-        {
-          name: "8",
-          value1: 230,
-          value2: 180,
-        },
-      ];
-
-      let xAxisData = echartData.map((v) => v.name);
-      //  ["1", "2", "3", "4", "5", "6", "7", "8"]
-      let yAxisData1 = echartData.map((v) => v.value1);
-      // [100, 138, 350, 173, 180, 150, 180, 230]
-      let yAxisData2 = echartData.map((v) => v.value2);
-      // [233, 233, 200, 180, 199, 233, 210, 180]
       const hexToRgba = (hex, opacity) => {
         let rgbaColor = "";
         let reg = /^#[\da-f]{6}$/i;
@@ -88,13 +41,65 @@ export default {
         return rgbaColor;
       };
 
-      option = {
+      var series = []
+
+      yarr.forEach((e,idx) => {
+          series.push(
+              {
+            name: e.name,
+            type: "line",
+            smooth: true,
+            showSymbol: false,
+            // symbolSize: 8,
+            zlevel: 3,
+            lineStyle: {
+              normal: {
+                color: color[idx],
+                shadowBlur: 5,
+                shadowColor: hexToRgba(color[idx], 0.5),
+                shadowOffsetY: 10,
+              },
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: hexToRgba(color[idx], 0.3),
+                    },
+                    {
+                      offset: 1,
+                      color: hexToRgba(color[idx], 0.1),
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: hexToRgba(color[idx], 0.1),
+                shadowBlur: 10,
+              },
+            },
+            emphasis: {
+              itemStyle: {
+                borderWidth: 5,
+              },
+            },
+            data: e.arr,
+          },
+          )
+      });
+
+      var option = {
         backgroundColor: bgColor,
         color: color,
         legend: {
           //   show:false,//是否显示图例
           right: "center",
-          bottom: 10,
+          bottom: 0,
           itemWidth: 10,
           itemHeight: 10,
           icon: "roundRect",
@@ -111,7 +116,10 @@ export default {
           },
         },
         grid: {
-          top: 100,
+          top: 10,
+          left:10,
+          right:10,
+          bottom:30,
           containLabel: true,
         },
         xAxis: [
@@ -167,102 +175,18 @@ export default {
             },
           },
         ],
-        series: [
-          {
-            name: "2018",
-            type: "line",
-            smooth: true,
-            showSymbol: false,
-            // symbolSize: 8,
-            zlevel: 3,
-            lineStyle: {
-              normal: {
-                color: color[0],
-                shadowBlur: 5,
-                shadowColor: hexToRgba(color[0], 0.5),
-                shadowOffsetY: 10,
-              },
-            },
-            areaStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(
-                  0,
-                  0,
-                  0,
-                  1,
-                  [
-                    {
-                      offset: 0,
-                      color: hexToRgba(color[0], 0.3),
-                    },
-                    {
-                      offset: 1,
-                      color: hexToRgba(color[0], 0.1),
-                    },
-                  ],
-                  false
-                ),
-                shadowColor: hexToRgba(color[0], 0.1),
-                shadowBlur: 10,
-              },
-            },
-            emphasis: {
-              itemStyle: {
-                borderWidth: 4,
-              },
-            },
-            data: yAxisData1,
-          },
-          {
-            name: "2019",
-            type: "line",
-            smooth: true,
-            showSymbol: false,
-            // symbolSize: 8,
-            zlevel: 3,
-            lineStyle: {
-              normal: {
-                color: color[1],
-                shadowBlur: 5,
-                shadowColor: hexToRgba(color[1], 0.5),
-                shadowOffsetY: 10,
-              },
-            },
-            areaStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(
-                  0,
-                  0,
-                  0,
-                  1,
-                  [
-                    {
-                      offset: 0,
-                      color: hexToRgba(color[1], 0.3),
-                    },
-                    {
-                      offset: 1,
-                      color: hexToRgba(color[1], 0.1),
-                    },
-                  ],
-                  false
-                ),
-                shadowColor: hexToRgba(color[1], 0.1),
-                shadowBlur: 10,
-              },
-            },
-            emphasis: {
-              itemStyle: {
-                borderWidth: 4,
-              },
-            },
-            data: yAxisData2,
-          },
-        ],
+        series: series,
       };
+      window[this.line] = echarts.init(document.getElementById(this.line));
+      window[this.line].setOption(option, true);
     },
   },
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.dashboard {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/menu.vue

 <template>
   <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">
+    <div
+      style="float:right;cursor: pointer;position:relative;"
+      class="user_hover"
+    >
       <span
-        v-if="userInfo.user_name && userInfo.user_name !=''"
+        v-if="userInfo.user_name && userInfo.user_name != ''"
         class="user"
-      >{{ userInfo.user_name }}</span>
+        >{{ userInfo.user_name }}</span
+      >
       <span v-else @click="gotopage('login')" class="user">请登录</span>
       <img
-        :class="userInfo.picture_path ? 'user_pic': 'user_default'"
+        :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-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>
+        >
+          {{ item.name }}
+        </div>
       </div>
-      <div v-if="userInfo.user_name && userInfo.user_name !=''" class="sj"></div>
+      <div
+        v-if="userInfo.user_name && userInfo.user_name != ''"
+        class="sj"
+      ></div>
     </div>
     <div
       style="float:right;cursor: pointer;position:relative;"
@@ -28,10 +40,18 @@
       @click="gotopage('/shop/shopping_cart')"
     >
       <div class="car">
-        <el-badge v-if="menuCartNum != 0" :value="menuCartNum" :max="99" class="number"></el-badge>
+        <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
+        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"
@@ -42,35 +62,44 @@
           <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
+                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
+                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
+                item.service_id == 0
+                  ? item.application.org
+                  : item.service.organization_name
               }}
             </p>
           </div>
           <div>
-            <img @click.stop="deleteItem(item.id)" src="../assets/imgs/ic_delete.png" alt />
+            <img
+              @click.stop="deleteItem(item.id)"
+              src="../assets/imgs/ic_delete.png"
+              alt
+            />
           </div>
         </div>
         <div class="shop_footer">
-          <el-button @click="settlement" size="small" class="shop_settlement">去购物车申请结算</el-button>
+          <el-button @click="settlement" size="small" class="shop_settlement"
+            >去购物车申请结算</el-button
+          >
         </div>
       </div>
-      <div v-if="userInfo.user_name && userInfo.user_name !=''" class="shop_sj"></div>
+      <div
+        v-if="userInfo.user_name && userInfo.user_name != ''"
+        class="shop_sj"
+      ></div>
     </div>
 
     <div style="float:right">
@@ -82,14 +111,24 @@
         :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
+          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>
+          >
+            {{ v.menu_name }}
+          </div>
         </div>
-        <div class="sj" v-if="item.Child && item.Child.length" style="left: 60px;"></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>
       </div>
     </div>
@@ -107,10 +146,10 @@ export default {
         { name: "消息通知", path: "/user/message" },
         { name: "收银中心", path: "" },
         { name: "关于BD-aPaaS", path: "" },
-        { name: "退出登录", path: "logout" }
+        { name: "退出登录", path: "logout" },
       ],
       shopping_list: [],
-      menuCartNum: 0
+      menuCartNum: 0,
     };
   },
   mounted() {
@@ -123,12 +162,12 @@ export default {
     },
     userInfo() {
       return this.$store.state.userInfo || {};
-    }
+    },
   },
   watch: {
     getMenuCartState(newVal) {
       this.getList();
-    }
+    },
   },
   methods: {
     gotopage(n) {
@@ -146,7 +185,7 @@ export default {
     },
     deleteItem(id) {
       let query = [id];
-      this.$api.serviceShop.delShoppingCart(query).then(response => {
+      this.$api.serviceShop.delShoppingCart(query).then((response) => {
         this.getList();
       });
     },
@@ -175,7 +214,7 @@ export default {
       }
     },
     getList() {
-      this.$api.serviceShop.getShoppingCart().then(response => {
+      this.$api.serviceShop.getShoppingCart().then((response) => {
         if (response.data.success == "1") {
           this.menuCartNum = response.data.data.valid
             ? response.data.data.valid.length
@@ -194,14 +233,15 @@ export default {
       this.now_menu = visit_url ? visit_url : "/services_shop";
     },
     getNowMenu() {
-      this.$api.general.getNowMenu({ teamName: "APAAS3" }).then(response => {
+      this.$api.general.getNowMenu({ teamName: "APAAS3" }).then((response) => {
         if (response.data.success == 1) {
-          this.menu_arr = response.data.data[0].Child;
+          this.menu_arr =
+            (response.data.data[0] && response.data.data[0].Child) || [];
           this.getMenuIndex();
         }
       });
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -415,4 +455,4 @@ export default {
   line-height: 18px;
   padding: 0 7px;
 }
-</style>
+</style>
\ No newline at end of file

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/components/service-tabs/service-tab-comments.vue

@@ -50,11 +50,11 @@ export default {
       score: 0,
       starInfo: [
         {
-          star: 1,
+          star: 5,
           percent: 0,
         },
         {
-          star: 2,
+          star: 4,
           percent: 0,
         },
         {
@@ -62,11 +62,11 @@ export default {
           percent: 0,
         },
         {
-          star: 4,
+          star: 2,
           percent: 0,
         },
         {
-          star: 5,
+          star: 1,
           percent: 0,
         },
       ],
@@ -79,7 +79,7 @@ export default {
 
       return {
         score: data.avgScore || 0,
-        starInfo: [1, 2, 3, 4, 5].map((star) => {
+        starInfo: [5,4,3,2,1].map((star) => {
           let percent =
             this.commentsTtotal > 0
               ? (((data.scoreStatic && data.scoreStatic[star]) || 0) /

src/components/service-tabs/service-tabs.vue

@@ -13,7 +13,7 @@
       ></service-tab-detail>
     </el-tab-pane>
 
-    <!-- 规格定价 -->
+    <!-- 规格说明 -->
     <el-tab-pane
       :label="specificationTitle"
       name="specification"
@@ -25,7 +25,7 @@
       ></service-tab-specification>
     </el-tab-pane>
 
-    <!-- 提供机构 -->
+    <!-- 提供组织 -->
     <el-tab-pane :label="providerTitle" name="provider" v-if="providerData">
       <service-tab-provider
         class="service_info"
@@ -65,11 +65,11 @@ export default {
     },
     specificationTitle: {
       type: String,
-      default: () => "规格定价",
+      default: () => "规格说明",
     },
     providerTitle: {
       type: String,
-      default: () => "提供机构",
+      default: () => "提供组织",
     },
     commentsTitle: {
       type: String,

src/pages/data-analysis/my-service.vue

@@ -30,7 +30,9 @@
             <block-radius class="block"></block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
-            <block-radius class="block"></block-radius>
+            <block-radius class="block">
+              <line-chart :data="line_data"></line-chart>
+            </block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
             <block-radius class="block">
@@ -76,6 +78,7 @@ import BlockRadius from "@/components/general/block-radius";
 import Dashboard from "@/components/e-charts/dashboard";
 import multipleCircle from '@/components/e-charts/multiple_circle'
 import singleCircle from '@/components/e-charts/single_circle'
+import lineChart from '@/components/e-charts/line_chart'
 import Toplist from "@/components/e-charts/toplist";
 import Starlist from "@/components/e-charts/starlist";
 export default {
@@ -85,7 +88,8 @@ export default {
     multipleCircle,
     singleCircle,
     Toplist,
-    Starlist
+    Starlist,
+    lineChart
   },
   data: () => ({
     navList: [],
@@ -99,6 +103,23 @@ export default {
       num:12,
       color:'#515fe7',
       text:'共享'
+    },
+    line_data:{
+      xaxis:['01-01','01-02','01-03','01-04','01-05','01-06','01-07','01-08'],
+      data:[
+        {
+          name:'开发者应用',
+          arr:[100,120,130,150,160,120,110,100]
+        },
+        {
+          name:'平台应用',
+          arr:[120,130,140,130,140,120,100,90]
+        },
+        {
+          name:'未上架',
+          arr:[80,90,100,110,100,70,80,90]
+        },
+      ],
     }
   }),
   mounted() {},

src/pages/service_shop/yysdDetail.vue

@@ -14,8 +14,10 @@
 
     <service-tabs
       :detail-data="detailData"
+      detail-title="应用详情信息"
       :provider-data="providerData"
       :comments-url="commentsUrl"
+      comments-title="应用评价信息"
       :is_app_detail="true"
     ></service-tabs>
   </div>

src/pages/workbench/app_build.vue

@@ -94,6 +94,7 @@
             下一步
           </el-button>
         </div>
+        <image-detail ref="imageDetail" :image="selectedImage"></image-detail>
       </app-build-step>
       <app-build-step
         title="上传部署文件"
@@ -282,6 +283,7 @@ import appBuildStep from "@/components/app-build-steps/app-build-step";
 import apassTable from "@/components/apass-table";
 import uploadFile from "@/components/general/upload_file";
 import apassDialog from "@/components/apass-dialog";
+import imageDetail from "@/components/image-detail";
 
 export default {
   components: {
@@ -290,6 +292,7 @@ export default {
     apassTable,
     uploadFile,
     apassDialog,
+    imageDetail,
   },
   data: () => ({
     step: 0,
@@ -357,6 +360,7 @@ export default {
       msg: "",
       submit: null,
     },
+    selectedImage: null,
   }),
   methods: {
     preStep() {
@@ -570,8 +574,9 @@ export default {
         return "";
       }
     },
-    showDetail(item) {
-      console.log(item);
+    showImageDetail(item) {
+      this.selectedImage = item;
+      this.$refs.imageDetail.showDialog();
     },
   },
   mounted() {
@@ -581,7 +586,7 @@ export default {
         prop: "name",
         align: "left",
         type: "button",
-        callback: this.showDetail,
+        callback: this.showImageDetail,
       },
       {
         label: "版本号",

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>

src/store/index.js

@@ -8,9 +8,9 @@ const store = new Vuex.Store({
     userInfo: null, // 用户信息
     serviceShopMenu: "/shop/data_service_list", // 服务超市侧边栏
     fwglNav: [
-      ["注册发布的服务", "申请的服务" /* , "云资源服务" */], // 普通用户
-      ["组织服务管理", "服务审批管理" /* , "云资源管理" */], // 组织管理员
-      ["平台服务管理", "服务审批管理" /* , "云资源管理" */], // 超级管理员
+      ["注册发布的服务", "申请的服务", "云资源服务"], // 普通用户
+      ["组织服务管理", "服务审批管理", "云资源管理"], // 组织管理员
+      ["平台服务管理", "服务审批管理", "云资源管理"], // 超级管理员
     ], // 服务管理列表，onlyRead
     yyglNav: [
       ["应用仓库", "我部署的应用", "申请的应用"], // 普通用户