朔黄转储设备相关页面更新

hanbaoshan

2021-02-01 0e0944361a66439f7be48567c2fe6c482dd37a5c

 src/pages/shuohuangMonitorAnalyze/components/transferMemo.vue

@@ -3,55 +3,177 @@
    <div class="filter-bar flex-box">
      <div>
        <label>操作时间:</label>
        <div></div>
        <el-date-picker
          v-model="searchTime"
          type="datetimerange"
          size="small"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        ></el-date-picker>
      </div>
      <div>
        <label>操作人:</label>
        <div>
          <el-input v-model="operator" size="small"></el-input>
          <el-input v-model="Operator" size="small"></el-input>
        </div>
      </div>
      <div>
        <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
              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">查询</el-button>
        <el-button type="primary" size="small" @click="resetFilter">重置</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-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.$index}}
            </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 () {
    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: [this.$moment(new Date().getTime() - 3600 * 1000 * 24 * 5).format("YYYY-MM-DD HH:mm:ss"), 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;
      })
    }
  }
}
@@ -81,5 +203,8 @@
      cursor: pointer;
    }
  }
  .pagination-under-table{
    margin-top: 20px;
  }
}
</style>