From a827dbadd7dcc86067cb71d36a62abbf3418a91f Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 03 十一月 2021 17:38:26 +0800
Subject: [PATCH] hyj change shuohuang

---
 src/pages/shuohuangMonitorAnalyze/components/transferMemo.vue |  229 ++++++++++++++++++++++++++++++++++++--------------------
 1 files changed, 146 insertions(+), 83 deletions(-)

diff --git a/src/pages/shuohuangMonitorAnalyze/components/transferMemo.vue b/src/pages/shuohuangMonitorAnalyze/components/transferMemo.vue
index 1a5f8b3..249e8db 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/transferMemo.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/transferMemo.vue
@@ -2,7 +2,7 @@
   <div class="transfer-memo">
     <div class="filter-bar flex-box">
       <div>
-        <label>鎿嶄綔鏃堕棿:</label>
+        <label>鎿嶄綔鏃堕棿</label>
         <el-date-picker
           v-model="searchTime"
           type="datetimerange"
@@ -12,20 +12,26 @@
           start-placeholder="寮�濮嬫棩鏈�"
           end-placeholder="缁撴潫鏃ユ湡"
           align="right"
+          style="max-width: 350px"
         ></el-date-picker>
       </div>
       <div>
-        <label>鎿嶄綔浜�:</label>
+        <label>鎿嶄綔浜�</label>
         <div>
-          <el-input v-model="Operator" size="small"></el-input>
+          <el-input
+            v-model="Operator"
+            size="small"
+            style="width: 130px"
+          ></el-input>
         </div>
       </div>
       <div>
-        <label>杞偍鐘舵��:</label>
+        <label>杞偍鐘舵��</label>
         <div>
           <el-select v-model="Status" size="small">
             <el-option value="" label="鍏ㄩ儴"></el-option>
             <el-option
+              style="width: 190px"
               v-for="item in allTransferStatus"
               :key="item.id"
               :value="item.name"
@@ -35,26 +41,43 @@
         </div>
       </div>
       <div class="btns">
-        <el-button type="primary" size="small" @click="renderTable">鏌ヨ</el-button>
-        <el-button type="primary" size="small" @click="resetFilter">閲嶇疆</el-button>
+        <el-button
+          type="primary"
+          size="small"
+          @click="renderTable"
+          class="query-btn"
+          >鏌ヨ</el-button
+        >
+        <el-button
+          type="primary"
+          size="small"
+          @click="resetFilter"
+          class="reset-btn"
+          >閲嶇疆</el-button
+        >
       </div>
     </div>
     <div class="table-area">
-      <el-table :data="tableData" fit>
+      <el-table
+        :data="tableData"
+        fit
+        stripe
+        :header-cell-style="{
+          background: '#2D52D7',
+          color: '#fff',
+          height: '50px',
+        }"
+      >
         <el-table-column prop="OperaterDate" label="鎿嶄綔鏃堕棿"></el-table-column>
         <el-table-column prop="Operator" label="鎿嶄綔浜�"></el-table-column>
         <el-table-column prop="tranferDevice" label="杞偍璁惧鍚嶇О">
           <template slot-scope="scope">
-            <div>
-              璁惧{{scope.row.DeviceID}}
-            </div>
+            <div>璁惧{{ scope.row.DeviceID }}</div>
           </template>
         </el-table-column>
         <el-table-column prop="SlotID" label="鍗℃Ы浣嶇疆">
           <template slot-scope="scope">
-            <div>
-              鎻掓Ы{{scope.row.SlotID}}
-            </div>
+            <div>鎻掓Ы{{ scope.row.SlotID }}</div>
           </template>
         </el-table-column>
         <el-table-column prop="Status" label="杞偍鐘舵��"></el-table-column>
@@ -76,125 +99,159 @@
 </template>
 
 <script>
-import { getTransferStatusList,getTransferRecord } from "@/api/shuohuang"
+import { getTransferStatusList, getTransferRecord } from "@/api/shuohuang";
 export default {
-  data () {
+  data() {
     return {
       pickerOptions: {
-        shortcuts: [{
-          text: '浠婂ぉ',
-          onClick (picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setHours(0, 0, 0);
-            picker.$emit('pick', [start, end]);
-          }
-        }, {
-          text: '鏄ㄥぉ',
-          onClick (picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24);
-            start.setHours(0, 0, 0);
-            end.setTime(end.getTime() - 3600 * 1000 * 24);
-            end.setHours(23, 59, 59);
-            picker.$emit('pick', [start, end]);
-          }
-        }, {
-          text: '杩戜笁澶�',
-          onClick (picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
-            picker.$emit('pick', [start, end]);
-          }
-        }, {
-          text: '杩戜竴鍛�',
-          onClick (picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-            //start.setHours(0,0,0);
-            picker.$emit('pick', [start, end]);
-          }
-        }]
+        shortcuts: [
+          {
+            text: "浠婂ぉ",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setHours(0, 0, 0);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "鏄ㄥぉ",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24);
+              start.setHours(0, 0, 0);
+              end.setTime(end.getTime() - 3600 * 1000 * 24);
+              end.setHours(23, 59, 59);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "杩戜笁澶�",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "杩戜竴鍛�",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              //start.setHours(0,0,0);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
       },
-      Status: '',
-      Operator: '',
+      Status: "",
+      Operator: "",
       allTransferStatus: [],
       tableData: [],
       tableTotal: 0,
       PageIndex: 1,
       pageSizes: [8, 15, 20],
       PageSize: 8,
-      searchTime: ["2020-01-01 00:00:00", this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss")],
-    }
+      searchTime: [
+        "2020-01-01 00:00:00",
+        this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
+      ],
+    };
   },
-  mounted () {
+  mounted() {
     this.renderTable();
     this.renderTransferStatusList();
   },
   methods: {
-    handleCurrentChange(){
+    handleCurrentChange() {
       this.renderTable();
     },
-    resetFilter(){
+    resetFilter() {
       this.searchTime = [];
-      this.Operator = '';
-      this.Status = '';
+      this.Operator = "";
+      this.Status = "";
       this.renderTable();
     },
-    handleTableSizeChange (size) {
+    handleTableSizeChange(size) {
       this.tablePageSize = size;
       this.renderTable();
     },
-    renderTransferStatusList(){
+    renderTransferStatusList() {
       let _this = this;
-      getTransferStatusList().then(res=>{
-        _this.allTransferStatus = res.data.map((item,index)=>{
+      getTransferStatusList().then((res) => {
+        _this.allTransferStatus = res.data.map((item, index) => {
           return {
-            id: 'sta'+index,
-            name: item
-          }
+            id: "sta" + index,
+            name: item,
+          };
         });
-      })
+      });
     },
-    renderTable () {
+    renderTable() {
       let _this = this;
       let params = {
         Operator: this.Operator,
         Status: this.Status,
         PageIndex: this.PageIndex,
         PageSize: this.PageSize,
-        StartDate: this.searchTime ? this.searchTime[0]:'',
-        EndDate: this.searchTime ? this.searchTime[1]:'',
+        StartDate: this.searchTime ? this.searchTime[0] : "",
+        EndDate: this.searchTime ? this.searchTime[1] : "",
       };
-      
-      getTransferRecord(params).then(res=>{
+
+      getTransferRecord(params).then((res) => {
         _this.tableData = res.data;
         _this.tableTotal = res.total;
-      })
-    }
-  }
-}
+      });
+    },
+  },
+};
 </script>
 
 <style lang="scss">
 .transfer-memo {
-  padding: 20px;
+  padding: 33px;
+  background-color: #fff;
+  margin: 31px;    height: 100%;
+
+  .table-area .el-table {
+    border: none;
+  }
+  .btns {
+    .reset-btn {
+      background-color: #a6b5cb !important;
+      border-color: #a6b5cb !important;
+    }
+    .query-btn {
+      background-color: #2d52d7 !important;
+    }
+  }
+  .flex-box {
+    margin-bottom: 23px;
+  }
   .filter-bar.flex-box {
     & > div {
       display: flex;
       align-items: center;
-      margin-right: 10px;
+      margin-right: 35px;
+      font-size: 13px;
       label {
-        padding-right: 10px;
+        padding-right: 15px;
+        color: #425277;
       }
     }
   }
+  .el-table tbody tr:hover > td {
+    background-color: inherit !important;
+  }
+  .el-table th.el-table__cell.is-leaf,
+  .el-table td.el-table__cell {
+    border-bottom: none;
+  }
   .el-table {
     border: 1px solid #dedede;
-    margin-top: 10px;
     th {
       background: #f5f5f5;
       color: #333;
@@ -202,8 +259,14 @@
     .operation {
       cursor: pointer;
     }
+    .el-table--striped
+      .el-table__body
+      tr.el-table__row--striped
+      td.el-table__cell {
+      background: #f4f6f9;
+    }
   }
-  .pagination-under-table{
+  .pagination-under-table {
     margin-top: 20px;
   }
 }

--
Gitblit v1.8.0