统一任务清单页面风格

src/views/task/components/realTime.vue

@@ -1,91 +1,94 @@
 <template>
-  <div style="padding:5px 10px;">
-    <el-table :data="taskData" border header-row-class-name="custom-table-header" :maxHeight="tableHeight - 150" v-loading="loadingCancel" element-loading-text = "请耐心等待，数据正在加载中...">
-            <el-table-column label="任务名称" prop="taskName" align="center" show-overflow-tooltip></el-table-column>
-            <!-- <el-table-column label="任务数量" prop="total" align="center" show-overflow-tooltip>
+  <div style="padding:5px 10px;" class="realTime">
+    <el-table :data="taskData" border header-row-class-name="custom-table-header" :maxHeight="tableHeight - 150"
+      v-loading="loadingCancel" element-loading-text="请耐心等待，数据正在加载中..." :row-class-name="tableRowClassName">
+      <el-table-column label="任务名称" prop="taskName" align="center" show-overflow-tooltip></el-table-column>
+      <!-- <el-table-column label="任务数量" prop="total" align="center" show-overflow-tooltip>
               <template slot-scope="scope">
                 <div>
                   <span>{{ scope.row.total?scope.row.total:scope.row.allNum }}</span>
                 </div>
               </template>
             </el-table-column> -->
-            <!-- <el-table-column label="当前下标" prop="index" align="center" show-overflow-tooltip>
+      <!-- <el-table-column label="当前下标" prop="index" align="center" show-overflow-tooltip>
               <template slot-scope="scope">
                 <div>
                   <span>{{ scope.row.index?scope.row.index:scope.row.successNum }}</span>
                 </div>
               </template>
             </el-table-column> -->
-            <el-table-column label="实时进度" align="center" min-width="200px" show-overflow-tooltip>
-              <template slot-scope="scope">
-                <div style="display:flex">
-                  <span style="width:100%"><el-progress :text-inside="true" :stroke-width="20" :percentage="scope.row.percentage?scope.row.percentage:Math.floor(Number(scope.row.successNum)/Number(scope.row.total)*100)" :color="customColors"></el-progress></span>
-                  <span ><span >{{ scope.row.successNum }}/</span><span>{{ scope.row.total }}</span></span>
-                </div>
-                
-              </template>
-            </el-table-column>
-            <el-table-column label="当前状态" align="center" min-width="100px" show-overflow-tooltip>
-              <template slot-scope="scope">
-                <span>{{ statusObj[scope.row.status] }}</span>
-              </template>
-            </el-table-column>
-       
-            <el-table-column label="操作" align="center" width="120" v-if="form === 2">
-                        <template slot-scope="scope">
-                          <div class="operate">
-                            <span v-if="!scope.row.url">等待中</span>
-                            <el-link v-else type="primary" @click.native="handleDownload(scope.row)">
-                              <el-tooltip class="item" effect="dark" content="下载" placement="top">
-                                <i class="iconfont icon-xiazai"></i>
-                              </el-tooltip>
-                            </el-link>
-                            <el-link class="margin-left_10" type="primary" @click="handleCancelZan(scope.row)" v-if="scope.row.status==4">
-                              <el-tooltip class="item" effect="dark" content="继续" placement="top">
-                                <i class="iconfont icon-zanting"></i> 
-                              </el-tooltip>
-                            </el-link>
-                            <el-link class="margin-left_10" type="primary" @click="handleCancelZan(scope.row)" v-if="scope.row.status==1">
-                              <el-tooltip class="item" effect="dark" content="暂停" placement="top">
-                                <i class="iconfont icon-zanting1"></i>
-                              </el-tooltip>
-                            </el-link>
-                          </div>
-                            
-                        </template>
-              </el-table-column> 
-          
-         
-                <el-table-column label="操作" align="center" width="150" v-else>
-                    <template slot-scope="scope">
-                      <div class="operate">
-                         <!-- <p v-if="scope.row.status!=5"> -->
-                        
-                        <el-link class="margin-left_10" type="primary"  @click="handleCancelZan(scope.row)" v-if="scope.row.status==4">
-                          <el-tooltip class="item" effect="dark" content="继续" placement="top">
-                            <i class="iconfont icon-zanting"></i> 
-                          </el-tooltip>
-                        </el-link>
-                        <!-- <span class="loadCss" type="danger" @click="handleCancelZan(scope.row)" v-else-if="scope.row.taskDetailState==8" >暂停中</span> -->
-                        <el-link class="margin-left_10" type="primary" @click="handleCancelZan(scope.row)" v-if="scope.row.status==1">
-                          <el-tooltip class="item" effect="dark" content="暂停" placement="top">
-                            <i class="iconfont icon-zanting1"></i>
-                          </el-tooltip>
-                        </el-link>
-                        <el-link class="margin-left_10" type="danger"  @click="cancel(scope.row)" v-if="scope.row.status!=2">
-                          <el-tooltip class="item" effect="dark" content="取消" placement="top">
-                            <i class="iconfont icon-quxiaorenwu1"></i> 
-                          </el-tooltip>
-                        </el-link>
-                        <!-- </p> -->
-                        <!-- <p class="margin-left_10" type="danger" v-else>已取消</p> -->
-                      </div>
-                       
-                    </template>
-                </el-table-column>
-           
-            
-          </el-table>
+      <el-table-column label="实时进度" align="center" min-width="200px" show-overflow-tooltip>
+        <template slot-scope="scope">
+          <div style="display:flex">
+            <span style="width:100%"><el-progress :text-inside="true" :stroke-width="20"
+                :percentage="scope.row.percentage ? scope.row.percentage : Math.floor(Number(scope.row.successNum) / Number(scope.row.total) * 100)"
+                :color="customColors"></el-progress></span>
+            <span><span>{{ scope.row.successNum }}/</span><span>{{ scope.row.total }}</span></span>
+          </div>
+
+        </template>
+      </el-table-column>
+      <el-table-column label="当前状态" align="center" min-width="100px" show-overflow-tooltip>
+        <template slot-scope="scope">
+          <span>{{ statusObj[scope.row.status] }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="操作" align="center" width="120" v-if="form === 2">
+        <template slot-scope="scope">
+          <div class="operate">
+            <span v-if="!scope.row.url">等待中</span>
+            <el-link v-else type="primary" @click.native="handleDownload(scope.row)">
+              <el-tooltip class="item" effect="dark" content="下载" placement="top">
+                <i class="iconfont icon-xiazai"></i>
+              </el-tooltip>
+            </el-link>
+            <el-link class="margin-left_10" type="primary" @click="handleCancelZan(scope.row)" v-if="scope.row.status == 4">
+              <el-tooltip class="item" effect="dark" content="继续" placement="top">
+                <i class="iconfont icon-zanting"></i>
+              </el-tooltip>
+            </el-link>
+            <el-link class="margin-left_10" type="primary" @click="handleCancelZan(scope.row)" v-if="scope.row.status == 1">
+              <el-tooltip class="item" effect="dark" content="暂停" placement="top">
+                <i class="iconfont icon-zanting1"></i>
+              </el-tooltip>
+            </el-link>
+          </div>
+
+        </template>
+      </el-table-column>
+
+
+      <el-table-column label="操作" align="center" width="150" v-else>
+        <template slot-scope="scope">
+          <div class="operate">
+            <!-- <p v-if="scope.row.status!=5"> -->
+
+            <el-link class="margin-left_10" type="primary" @click="handleCancelZan(scope.row)" v-if="scope.row.status == 4">
+              <el-tooltip class="item" effect="dark" content="继续" placement="top">
+                <i class="iconfont icon-zanting"></i>
+              </el-tooltip>
+            </el-link>
+            <!-- <span class="loadCss" type="danger" @click="handleCancelZan(scope.row)" v-else-if="scope.row.taskDetailState==8" >暂停中</span> -->
+            <el-link class="margin-left_10" type="primary" @click="handleCancelZan(scope.row)" v-if="scope.row.status == 1">
+              <el-tooltip class="item" effect="dark" content="暂停" placement="top">
+                <i class="iconfont icon-zanting1"></i>
+              </el-tooltip>
+            </el-link>
+            <el-link class="margin-left_10" type="danger" @click="cancel(scope.row)" v-if="scope.row.status != 2">
+              <el-tooltip class="item" effect="dark" content="取消" placement="top">
+                <i class="iconfont icon-quxiaorenwu1"></i>
+              </el-tooltip>
+            </el-link>
+            <!-- </p> -->
+            <!-- <p class="margin-left_10" type="danger" v-else>已取消</p> -->
+          </div>
+
+        </template>
+      </el-table-column>
+
+
+    </el-table>
   </div>
 </template>
 
@@ -95,23 +98,23 @@ import { common } from './mixins';
 export default {
   components: {},
   props: [],
-  mixins:[common],
+  mixins: [common],
   data() {
     return {
-      taskData:[],
-      loadingCancel:false,
+      taskData: [],
+      loadingCancel: false,
       customColors: [
-        {color: '#f56c6c', percentage: 20},
-        {color: '#e6a23c', percentage: 40},
-        {color: '#5cb87a', percentage: 60},
-        {color: '#1989fa', percentage: 80},
-        {color: '#6f7ad3', percentage: 100}
+        { color: '#f56c6c', percentage: 20 },
+        { color: '#e6a23c', percentage: 40 },
+        { color: '#5cb87a', percentage: 60 },
+        { color: '#1989fa', percentage: 80 },
+        { color: '#6f7ad3', percentage: 100 }
       ],
-      queryParams:{
-        taskStatus:[0,1,4],
-        projectId:this.projectId,
-        productId:this.productId,
-        reportId:this.reportId,
+      queryParams: {
+        taskStatus: [0, 1, 4],
+        projectId: this.projectId,
+        productId: this.productId,
+        reportId: this.reportId,
       }
     };
   },
@@ -119,7 +122,7 @@ export default {
   computed: {
     ...mapGetters(['webSocket', 'userinfo'])
   },
-  created() {},
+  created() { },
   mounted() {
     this.initTask()
     this.getList()
@@ -131,36 +134,36 @@ export default {
         const { code, data, message } = JSON.parse(e.data)
         console.log({ code, data, message });
         if (code === 903 || code === 904) {
-          const index = this.taskData.findIndex(item=>{return item.id == data.taskId})
+          const index = this.taskData.findIndex(item => { return item.id == data.taskId })
           // const index = this.taskData.findIndex(item=>{return item.id == data.id})
           if (index === -1) {
-            if(data.projectId == this.projectId){
+            if (data.projectId == this.projectId) {
               this.getList()
             }
-            
+
             // this.taskData.unshift(data)
           } else {
             var arr = this.taskData[index]
             arr.index = data.index
             arr.percentage = data.percentage
-            arr.successNum =  data.index
-            arr.status =  data.taskStatus
+            arr.successNum = data.index
+            arr.status = data.taskStatus
             this.$set(this.taskData, index, arr)
           }
           if (data.complete) {
-            if(data.taskType!=2){
+            if (data.taskType != 2) {
               this.$message.success(`导入任务完成`)
-               for(var i = 0;i<this.taskData.length;i++){
-                if(this.taskData[i].complete==true){
-                  this.taskData.splice(i,1)
+              for (var i = 0; i < this.taskData.length; i++) {
+                if (this.taskData[i].complete == true) {
+                  this.taskData.splice(i, 1)
                 }
               }
-            }else{
+            } else {
               this.$message.success(`导出任务完成`)
             }
-            
+
             // console.log(this.form)
-           
+
             this.getList()
           }
         } else if (code === 803 || code === 804) {
@@ -169,61 +172,81 @@ export default {
         }
       }
     },
-    getList(){
+    getList() {
       this.loadingCancel = true
-      this.$api.getTasks(this.queryParams).then(response=>{
-        if(response.code == 200){
+      this.$api.getTasks(this.queryParams).then(response => {
+        if (response.code == 200) {
           this.taskData = response.data.records
           this.loadingCancel = false
         }
-      }).catch(error=>{
+      }).catch(error => {
         this.loadingCancel = false
       })
     },
-   
+
     // 实时进度暂停继续
     handleCancelZan(row) {
       let task = {
         taskId: row.id,
         // state:0
       }
-      if (row.status==4) {
+      if (row.status == 4) {
         //  task.state = 0
-         this.$api.resumeJobTask(task).then(res => {
-          if (res.code==200) {
+        this.$api.resumeJobTask(task).then(res => {
+          if (res.code == 200) {
             this.$message.success('继续执行')
-              // this.getList()
-              row.status = res.data
-            }
-         }).catch(error => {
-            this.$message.error(error.message)
-            this.loadingCancel=false
-         })
-      } else if (row.status==1) {
+            // this.getList()
+            row.status = res.data
+          }
+        }).catch(error => {
+          this.$message.error(error.message)
+          this.loadingCancel = false
+        })
+      } else if (row.status == 1) {
         // task.state = 8
         this.$api.pauseJobTask(task).then(res => {
-          if (res.code==200) {
+          if (res.code == 200) {
             this.$message.success('已暂停')
             // this.getList()
             row.status = 4
-            }
+          }
         }).catch(error => {
           this.$message.error(error.message)
-          this.loadingCancel=false
+          this.loadingCancel = false
         })
       }
     },
+    // row隔行变色
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 === 0) {
+        return 'height-row'
+      }
+    },
   },
 };
 </script>
+<style lang="scss">
+.realTime {
+
+  .custom-table-header>th {
+    background: #deedff !important;
+    color: #7ba6d5 !important;
+    font-weight: 400 !important;
+  }
+
+  .height-row {
+    background: #f5faff !important;
+  }
+}
+</style>
 <style lang="scss" scoped>
-.operate{
-  i{
+.operate {
+  i {
     font-size: 24px;
   }
 }
+
 .pagination {
-    text-align: center;
-    margin: 20px 0;
-  }
-</style>
+  text-align: center;
+  margin: 20px 0;
+}</style>

src/views/task/components/todoList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="padding:5px 10px;">
+  <div style="padding:5px 10px;" class="todoList">
     <el-form inline>
       <el-form-item style="width: 150px;">
         <el-select v-model="query" size="small">
@@ -9,7 +9,8 @@
       </el-form-item>
       <el-form-item>
         <template v-if="query == 'createName'">
-          <el-input v-model="queryParams[query]" size="small" clearable placeholder="请输入创建人名称" style="width: 215px;"></el-input>
+          <el-input v-model="queryParams[query]" size="small" clearable placeholder="请输入创建人名称"
+            style="width: 215px;"></el-input>
         </template>
         <template v-else-if="query == 'taskType'">
           <el-select v-model="queryParams.taskType" size="small" clearable placeholder="请选择任务类型">
@@ -29,7 +30,7 @@
       </el-form-item>
     </el-form>
     <el-table v-loading="loading" :data="tableData" border header-row-class-name="custom-table-header"
-      @sort-change="sortChange" :maxHeight="tableHeight - 220">
+      @sort-change="sortChange" :maxHeight="tableHeight - 220" :row-class-name="tableRowClassName">
       <el-table-column label="#" type="index" align="center" width="55">
         <template slot-scope="scope">
           <span>{{ (scope.$index + 1) + ((queryParams.current - 1) * queryParams.size) }}</span>
@@ -337,10 +338,30 @@ export default {
       })
 
     },
+    // row隔行变色
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 === 0) {
+        return 'height-row'
+      }
+    },
 
   },
 };
 </script>
+<style lang="scss">
+.todoList {
+
+  .custom-table-header>th {
+    background: #deedff !important;
+    color: #7ba6d5 !important;
+    font-weight: 400 !important;
+  }
+
+  .height-row {
+    background: #f5faff !important;
+  }
+}
+</style>
 <style lang="scss" scoped>
 .operate {
   i {