hyj change shuohuang

heyujie

2021-11-03 a827dbadd7dcc86067cb71d36a62abbf3418a91f

 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;
  }
}