From ccee429d379e0108b7445f72ade8d97c110a6fb3 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 09 十一月 2021 18:01:59 +0800
Subject: [PATCH] 问题修复
---
src/pages/shuohuangMonitorAnalyze/components/transferMemo.vue | 251 ++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 223 insertions(+), 28 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/transferMemo.vue b/src/pages/shuohuangMonitorAnalyze/components/transferMemo.vue
index 9dbc0bc..f3f816c 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/transferMemo.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/transferMemo.vue
@@ -2,77 +2,263 @@
<div class="transfer-memo">
<div class="filter-bar flex-box">
<div>
- <label>鎿嶄綔鏃堕棿:</label>
- <div></div>
+ <label>鎿嶄綔鏃堕棿</label>
+ <el-date-picker
+ v-model="searchTime"
+ type="datetimerange"
+ size="small"
+ :picker-options="pickerOptions"
+ range-separator="鑷�"
+ 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="transferStatus" size="small">
+ <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.id"
+ :value="item.name"
:label="item.name"
></el-option>
</el-select>
</div>
</div>
<div class="btns">
- <el-button type="primary" size="small">鏌ヨ</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-column prop="time" label="鎿嶄綔鏃堕棿"></el-table-column>
- <el-table-column prop="operator" label="鎿嶄綔浜�"></el-table-column>
- <el-table-column prop="tranferDevice" label="杞偍璁惧鍚嶇О"></el-table-column>
- <el-table-column prop="pos" label="鍗℃Ы浣嶇疆"></el-table-column>
- <el-table-column prop="transferStatus" label="杞偍鐘舵��"></el-table-column>
- <el-table-column prop="pic" label="鐜板満鍥剧墖"></el-table-column>
- <el-table-column prop="content" label="杞偍鍐呭"></el-table-column>
+ <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>
+ </template>
+ </el-table-column>
+ <el-table-column prop="SlotID" label="鍗℃Ы浣嶇疆">
+ <template slot-scope="scope">
+ <div>鎻掓Ы{{ scope.row.SlotID }}</div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="Status" label="杞偍鐘舵��"></el-table-column>
+ <el-table-column prop="Cover" label="鐜板満鍥剧墖"></el-table-column>
+ <el-table-column prop="Content" label="杞偍鍐呭"></el-table-column>
</el-table>
- <el-pagination background layout="prev, pager, next" :total="tableDataTotal"></el-pagination>
+ <el-pagination
+ class="pagination-under-table"
+ @size-change="handleTableSizeChange"
+ @current-change="handleCurrentChange"
+ :current-page.sync="PageIndex"
+ :page-size="PageSize"
+ :page-sizes="pageSizes"
+ layout="total,sizes, prev, pager, next"
+ :total="tableTotal"
+ ></el-pagination>
</div>
</div>
</template>
<script>
+import { getTransferStatusList, getTransferRecord } from "@/api/shuohuang";
export default {
- data () {
+ data() {
return {
- transferStatus: '',
- operator: '',
+ 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]);
+ },
+ },
+ ],
+ },
+ Status: "",
+ Operator: "",
allTransferStatus: [],
tableData: [],
- tableDataTotal: 5
- }
- }
-}
+ 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"),
+ ],
+ };
+ },
+ mounted() {
+ this.renderTable();
+ this.renderTransferStatusList();
+ },
+ methods: {
+ handleCurrentChange() {
+ this.renderTable();
+ },
+ resetFilter() {
+ this.searchTime = [];
+ this.Operator = "";
+ this.Status = "";
+ this.renderTable();
+ },
+ handleTableSizeChange(size) {
+ this.tablePageSize = size;
+ this.renderTable();
+ },
+ renderTransferStatusList() {
+ let _this = this;
+ getTransferStatusList().then((res) => {
+ _this.allTransferStatus = res.data.map((item, index) => {
+ return {
+ id: "sta" + index,
+ name: item,
+ };
+ });
+ });
+ },
+ 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] : "",
+ };
+
+ 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;
+ height: 100%;
+border-radius: 10px;
+box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
+ .table-area .el-table {
+ border: none;
+ }
+ .el-table th.el-table__cell > .cell {
+ color: #fff;
+}
+ .btns {
+ .reset-btn {
+ background-color: #a6b5cb !important;
+ border-color: #a6b5cb !important;
+ }
+ .query-btn {
+ background-color: #2d52d7 !important;
+ }
+ button span {
+ color: #fff;
+ }
+ }
+ .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;
@@ -80,6 +266,15 @@
.operation {
cursor: pointer;
}
+ .el-table--striped
+ .el-table__body
+ tr.el-table__row--striped
+ td.el-table__cell {
+ background: #f4f6f9;
+ }
+ }
+ .pagination-under-table {
+ margin-top: 20px;
}
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0