v3-school-level-big-data-web/src/views/resourceDevice/pageList/instrumentRankingComponentTable.vue

<template>
  <div class="instrumentRankingComponentTable">
    <div class="top-title-max-ox">
      <p></p>
      <p>大仪使用排行</p>
      <p></p>
      <div class="title-button" @click="outButton">
        <img src="@/assets/ZDimages/icon_yh_fh@1x.png">
        <p>返回</p>
      </div>
    </div>
    <div class="table-title-box">
      <p class="table-title-p">数据筛选</p>
      <el-form :model="queryParams" class="form-box" ref="queryForm"
               :inline="true" style="width:100%;">
        <el-form-item label="设备：" prop="deviceName">
          <el-input
            v-model="queryParams.deviceName"
            placeholder="输入设备"
            style="width:178px;"
          />
        </el-form-item>
        <p class="form-inquire-common-style-button" @click="handleQuery">查询</p>
        <p class="form-reset-common-style-button" @click="resetQuery">重置</p>
      </el-form>
    </div>
    <div class="table-list-box">
      <p class="table-list-p">数据列表</p>
      <div class="table-list">
        <el-table class="table-box"
                  :data="dataList" @sort-change="sortChange">
          <el-table-column align="center" label="序号"  width="150"  type="index"/>
          <el-table-column align="center" label="设备名称" prop="deviceName" show-overflow-tooltip/>
          <el-table-column align="center" sortable="custom" label="使用机时" prop="useTime" width="400" show-overflow-tooltip/>
          <el-table-column align="center" sortable="custom" label="预约费用" prop="appointFee" width="400" show-overflow-tooltip/>
          <el-table-column align="center" sortable="custom" label="测试样品" prop="testSample" width="400" show-overflow-tooltip/>
        </el-table>
        <pagination :page-sizes="[20, 30, 40, 50]"
                    v-show="total>0"
                    :total="total"
                    layout="total,sizes, prev, pager, next"
                    :page.sync="queryParams.page"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>
<script>
  import { reportReportBsEquipRankList} from "@/api/index";
  export default {
    name: 'instrumentRankingComponentTable',
    data () {
      return {
        //查询条件
        queryParams:{
          page:1,
          pageSize:20,
          deviceName:"",
          ascOrDesc:'',
          type:'',
        },
        //列表数据
        dataList:[],
        //数据数量
        total:0,
      }
    },
    created(){

    },
    mounted(){
      this.getList();
    },
    methods:{
      outButton(){
        this.$parent.checkComponentType(null)
      },
      //排序方法
      sortChange(val){
        if(val.prop == 'useTime'){
          this.$set(this.queryParams,'ascOrDesc',val.order=='ascending'?true:(val.order=='descending'?false:''));
          this.$set(this.queryParams,'type',1);
          this.handleQuery();
        }else if(val.prop == 'appointFee'){
          this.$set(this.queryParams,'ascOrDesc',val.order=='ascending'?true:(val.order=='descending'?false:''));
          this.$set(this.queryParams,'type',2);
          this.handleQuery();
        }else if(val.prop == 'testSample'){
          this.$set(this.queryParams,'ascOrDesc',val.order=='ascending'?true:(val.order=='descending'?false:''));
          this.$set(this.queryParams,'type',3);
          this.handleQuery();
        }else{
          this.$set(this.queryParams,'ascOrDesc','');
          this.$set(this.queryParams,'type','');
          this.handleQuery();
        }
      },
      //列表查询
      getList(){
        reportReportBsEquipRankList(this.queryParams).then(response => {
          this.$set(this,'dataList',response.data.records);
          this.$set(this,'total',response.data.total);
        });
      },
      //查询按钮
      handleQuery(){
        this.$set(this.queryParams,'page',1);
        this.getList();
      },
      //重置按钮
      resetQuery(){
        this.$set(this,'queryParams',{
          page:1,
          pageSize:20,
          deviceName:"",
          ascOrDesc:'',
          type:'',
        });
        this.getList();
      },
    },
  }
</script>
<style scoped lang="scss">
  .instrumentRankingComponentTable{
    padding:0 62px;
    height:1340px;
    display: flex;
    flex-direction: column;
    flex:1;
    overflow: hidden;
    .top-title-max-ox{
      display: flex;
      margin:20px 0;
      p:nth-child(1){
        width:10px;
        height:30px;
        background-color: #15827C;
        margin:5px 20px 0 0;
      }
      p:nth-child(2){
        color:#00FFFF;
        font-size:26px;
        line-height:40px;
      }
      p:nth-child(3){
        flex:1;
      }
      .title-button{
        width:120px;
        height:40px;
        background-color: #021D20;
        border:1px solid #15827C;
        display: flex;
        cursor: pointer;
        img{
          display: block;
          width:24px;
          height:24px;
          margin:8px 15px 0 12px;
        }
        p{
          font-size:18px;
          line-height:42px;
          color:#fff;
        }
      }
    }
    .table-title-box{
      height:200px;
      background-color: #002329;
      margin-bottom:20px;
      .table-title-p{
        line-height:80px;
        border-bottom:1px solid #15827C;
        padding-left:30px;
        font-size:24px;
        color:#fff;
      }
    }
    .table-list-box{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(4, 117, 129, 0.2) 0%, rgba(0, 15, 22, 0) 100%);
      .table-list-p{
        line-height:80px;
        border-bottom:1px solid #15827C;
        padding-left:30px;
        font-size:24px;
        color:#fff;
      }
      .table-list{
        padding:35px 30px 0;
        flex:1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
    }
  }
</style>