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