修改所有测试页面样式

frontend/src/performance/components/testPlan/AllTestPlan.vue

@@ -1,22 +1,26 @@
 <template>
   <div class="testplan-container">
-    <div>
-      <el-row>
-        <el-col :span="22" :offset="1">
-          <el-table
-            stripe
-            ref="multipleTable"
-            :data="tableData"
-            tooltip-effect="dark"
-            style="width: 100%"
-            @selection-change="handleSelectionChange">
+    <div class="main-content">
+      <el-card>
+        <div slot="header">
+          <el-row type="flex" justify="space-between" align="middle">
+            <span class="title">测试</span>
+            <span class="search">
+            <el-input type="text" size="small" placeholder="根据ID，名称搜索" prefix-icon="el-icon-search" maxlength="60"
+                      v-model="condition" clearable/>
+          </span>
+          </el-row>
+        </div>
+        <el-table :data="tableData" style="width: 100%">
           <el-table-column
             type="selection"
             width="55">
           </el-table-column>
           <el-table-column
             prop="name"
-              label="名称">
+            label="名称"
+            width="150"
+            show-overflow-tooltip>
           </el-table-column>
           <el-table-column
             prop="description"
@@ -25,22 +29,26 @@
           </el-table-column>
           <el-table-column
             prop="projectName"
-              label="所属项目">
+            label="所属项目"
+            width="150"
+            show-overflow-tooltip>
           </el-table-column>
           <el-table-column
+            width="250"
             label="创建时间">
             <template slot-scope="scope">
               <span>{{ scope.row.createTime | timestampFormatDate }}</span>
             </template>
           </el-table-column>
           <el-table-column
-              prop="updateTime"
+            width="250"
             label="更新时间">
             <template slot-scope="scope">
               <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
             </template>
           </el-table-column>
           <el-table-column
+            width="150"
             label="操作">
             <template slot-scope="scope">
               <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
@@ -48,8 +56,7 @@
             </template>
           </el-table-column>
         </el-table>
-        </el-col>
-      </el-row>
+        <div>
           <el-row>
             <el-col :span="22" :offset="1">
               <div class="table-page">
@@ -66,6 +73,8 @@
             </el-col>
           </el-row>
         </div>
+      </el-card>
+    </div>
   </div>
 </template>
 
@@ -75,6 +84,7 @@
       return {
         queryPath: "/testplan/list",
         deletePath: "/testplan/delete",
+        condition: "",
         tableData: [],
         multipleSelection: [],
         currentPage: 1,
@@ -155,7 +165,16 @@
 
 <style scoped>
   .testplan-container {
-    background: white;
+    padding: 15px;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+  }
+
+  .main-content {
+    margin: 0 auto;
+    width: 100%;
+    max-width: 1200px;
   }
 
   .table-page {

frontend/src/performance/components/testPlan/components/PressureConfig.vue

@@ -1,12 +1,63 @@
-<style>
-
-</style>
-
 <template>
+  <el-row>
+    <el-col :span="8">
       <div>
-    我是第二个子组件
-    <el-button @click="testChange()" type="text" size="small">修改TestPlan值</el-button>
+        <el-row>
+          <el-col :span="12">
+            <div>
+              并发用户：
+              <el-input
+                type="number"
+                placeholder="请输入线程数"
+                v-model="threadNumber"
+                show-word-limit
+              >
+              </el-input>
             </div>
+          </el-col>
+          <el-col :span="12">
+            <div>
+              压测时长：
+              <el-input
+                type="number"
+                placeholder="请输入时长（min）"
+                v-model="duration"
+                show-word-limit
+              >
+              </el-input>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <div>
+            在
+            <div style="width: 80px;">
+              <el-input
+                type="number"
+                v-model="rampUpTime"
+                show-word-limit
+              >
+              </el-input>
+            </div>
+            分钟内，分
+            <div style="width: 80px;">
+              <el-input
+                type="number"
+                v-model="rampUpCount"
+                show-word-limit
+              >
+              </el-input>
+            </div>
+            次增加并发用户
+          </div>
+        </el-row>
+      </div>
+    </el-col>
+    <el-col :span="16">
+      压力预估图
+
+    </el-col>
+  </el-row>
 </template>
 
 <script>
@@ -14,6 +65,10 @@
     name: "TestPlanPressureConfig",
     data() {
       return {
+        threadNumber: 10,
+        duration: 10,
+        rampUpTime: 5,
+        rampUpCount: 2,
       }
     },
     methods: {