Browse Source

fix: 部署页面没用总div包裹,导致跳转需要刷新

icenaked 3 years ago
parent
commit
878f5edcc2
1 changed files with 76 additions and 41 deletions
  1. 76 41
      src/views/ml/Deployment.vue

+ 76 - 41
src/views/ml/Deployment.vue

@@ -1,51 +1,53 @@
 <template>
   <div>
-    <div class="crumbs">
-      <el-breadcrumb separator="/">
-        <el-breadcrumb-item>
-          <i class="el-icon-takeaway-box"></i> 模型部署
-        </el-breadcrumb-item>
-      </el-breadcrumb>
+    <div>
+      <div class="crumbs">
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item>
+            <i class="el-icon-takeaway-box"></i> 模型部署
+          </el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
     </div>
-  </div>
 
-  <div class="container">
-    <el-table
-        :data="tableData" border class="table" ref="multipleTable"
-        header-cell-class-name="table-header"
-    >
-      <el-table-column prop="deploymentName" label="部署名"></el-table-column>
-      <el-table-column prop="createdTime" label="开始时间"></el-table-column>
-      <el-table-column label="部署状态">
-        <template #default="scope">
-          <div v-if="scope.row.deploymentState === 'SUCCESS'">
-            部署成功
-          </div>
-          <div v-else-if="scope.row.deploymentState === 'WAITING'">
-            未部署
-          </div>
-          <div v-else-if="scope.row.deploymentState === 'ON_GOING'">
-            部署中
-          </div>
-          <div v-else>
-            部署失败
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column prop="finishTime" label="完成时间"></el-table-column>
+    <div class="container">
+      <el-table
+          :data="tableData" border class="table" ref="multipleTable"
+          header-cell-class-name="table-header"
+      >
+        <el-table-column prop="deploymentName" label="部署名"></el-table-column>
+        <el-table-column prop="createdTime" label="开始时间"></el-table-column>
+        <el-table-column label="部署状态">
+          <template #default="scope">
+            <div v-if="scope.row.deploymentState === 'SUCCESS'">
+              部署成功
+            </div>
+            <div v-else-if="scope.row.deploymentState === 'WAITING'">
+              未部署
+            </div>
+            <div v-else-if="scope.row.deploymentState === 'ON_GOING'">
+              部署中
+            </div>
+            <div v-else>
+              部署失败
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="finishTime" label="完成时间"></el-table-column>
 
-      <el-table-column label="操作" width="180" align="center">
-        <template #default="scope">
-          <el-button type="text" class="red" @click="handleDelete(scope.row.id)">删除</el-button>
-        </template>
-      </el-table-column>
+        <el-table-column label="操作" width="180" align="center">
+          <template #default="scope">
+            <el-button type="text" class="red" @click="handleDelete(scope.row.id)">删除</el-button>
+          </template>
+        </el-table-column>
 
-    </el-table>
-    <div class="pagination">
-      <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
-                     :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
-    </div>
+      </el-table>
+      <div class="pagination">
+        <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
+                       :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
+      </div>
 
+    </div>
   </div>
 </template>
 
@@ -87,5 +89,38 @@ export default {
 </script>
 
 <style scoped>
+.handle-box {
+  margin-bottom: 20px;
+}
 
+.handle-select {
+  width: 120px;
+}
+
+.handle-input {
+  width: 300px;
+  display: inline-block;
+}
+.table {
+  width: 100%;
+  font-size: 14px;
+}
+.red {
+  color: #ff0000;
+}
+.green {
+  color: rgb(32, 220, 88)
+}
+.yellow{
+  color:yellowgreen;
+}
+.mr10 {
+  margin-right: 10px;
+}
+.table-td-thumb {
+  display: block;
+  margin: auto;
+  width: 40px;
+  height: 40px;
+}
 </style>