展示ip 端口 版本 格式化 状态

src/filters/index.js

@@ -40,3 +40,25 @@ export function numberFormatter(num, digits) {
 export function toThousandFilter(num) {
   return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
 }
+export function formatStatus(tsatus) {
+  switch (tsatus) {
+    case 'Normal':
+      return '正常'
+    case 'Abnormal' :
+      return '服务异常'
+    case 'Waiting' :
+      return '服务等待中'
+    case 'Paused' :
+      return '更新暂停中'
+    case 'Updating' :
+      return '服务更新中'
+    case 'RollingBack' :
+      return '服务回滚中'
+    default :
+      return '未知状态'
+  }
+}
+export function formatImages(images) {
+  return images.replace('ccr.ccs.tencentyun.com/qa-base/', '')
+}
+

src/views/docker/envDetail.vue

@@ -32,15 +32,36 @@
           prop="serviceName"
           label="服务名"
         />
+        <el-table-column
+          prop="serviceIp"
+          label="ip地址"
+        />
+        <el-table-column
+          prop="portMappings"
+          label="服务端口"
+          width="300px">
+          <template slot-scope="scope">
+            <span v-for="item in scope.row.portMappings" :key="item.containerPort" class="port">{{ item.containerPort }}>{{ item.lbPort }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="image"
+          label="镜像版本">
+          <template slot-scope="scope">
+            {{ scope.row.image | formatImages }}
+          </template>
+        </el-table-column>
         <el-table-column
           prop="createdAt"
           label="日期"
         />
-        <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
-          <el-table-column
-            prop="status"
-            label="运行状态"/>
-        </el-tooltip>
+        <el-table-column
+          prop="status"
+          label="运行状态">
+          <template slot-scope="scope">
+            {{ scope.row.status | formatStatus }}
+          </template>
+        </el-table-column>
         <el-table-column label="更多" width="80" fixed="right">
           <template slot-scope="scope">
             <el-dropdown>
@@ -88,7 +109,11 @@
         />
         <el-table-column
           prop="status"
-          label="运行状态"/>
+          label="运行状态">
+          <template slot-scope="scope">
+            {{ scope.row.status | formatStatus }}
+          </template>
+        </el-table-column>
         <el-table-column
           label="调试状态">
           <template slot-scope="scope">
@@ -556,5 +581,11 @@ export default {
   .elSelect {
     width: 100%;
   }
-
+.port{
+  display: inline-block;
+  padding: 2px;
+  /*background: #f0f0f0;*/
+  border: 1px solid #f0f2f5;
+  margin: 2px;
+}
 </style>