消息通知数据自动筛选

spring

2025-05-21 ee2882cff02d3545b66c7591f88ed4800f730a9a

 src/components/view/a6-device-overview.vue

@@ -39,13 +39,13 @@
  .card {
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, 375px);
    grid-template-columns: repeat(auto-fit, 415px);
    /* justify-content: center; */
    grid-gap: 16px;
    min-height: 300px;
  }
  .card li{
    width: 375px;
    width: 415px;
    height: 165px;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #EEEEEE;
@@ -127,7 +127,7 @@
   <div class="role_manage">
      <div>
         <el-row class="title">
            <el-col :span="12" style="padding-left: 20px;">设备总览</el-col>
            <el-col :span="12" style="padding-left: 20px;text-align: left;">设备总览</el-col>
         </el-row>
      </div>
      <div class="search">
@@ -148,11 +148,12 @@
         </div>
         <div class="search_thing" style="padding-left: 30px;">
            <el-button size="small" @click="refresh()">重 置</el-button>
            <el-button size="small" type="primary" @click="currentPage= 1,list=[],finishLoding = false,refreshTable()">查 询</el-button>
            <el-button size="small" type="primary" @click="currentPage= 1,keyMap = {},list=[],finishLoding = false,refreshTable()">查 询</el-button>
         </div>
      </div>
      <div class="table" @scroll="scrollFn">
      <ul v-loading="loading" class="card">
      <div class="table" v-loading="loading">
      <scroll-pagination @load="refreshTable" :finishLoding="finishLoding" :list="list" v-if="list.length>0||loading">
        <ul class="card">
        <li v-for="(m,i) in list" :key="i">
          <el-image class="img" :src="javaApi+'/img/'+m.imageUpload">
            <div slot="error" class="image-error" style="width: 112px;
@@ -192,27 +193,18 @@
          </div>
        </li>
      </ul>
      <div v-if="list.length<1&&!loading&&!isLoding" style="color:#909399;font-size:14px;text-align: center;margin-top:200px" >暂无数据</div>
      <div v-if="list.length>0">
        <el-button
          v-if="isLoding"
          type="text"
          style="display: flex; margin: 0 auto; color: #909399"
          ><i class="el-icon-loading" style="font-size:20px"></i
        ></el-button>
         <el-button
          type="text"
          v-if="finishLoding"
          style="display: flex; margin: 0 auto; color: #909399"
          >已经没有更多啦~</el-button
        >
      </div>
      </scroll-pagination>
      <div v-if="list.length<1&&!loading" style="color:#909399;font-size:14px;text-align: center;margin-top:200px" >暂无数据</div>
      </div>
   </div>
</template>

<script>
import ScrollPagination from '../tool/scroll-paging.vue'
   export default {
    components: {
      ScrollPagination
    },
      data() {
         return {
        entity:{
@@ -226,25 +218,29 @@
        pageSize: 16, // 一页16条
        total: '',
        loading: true, // 组件loading的展示,默认为true
        isLoding: false, // 加载中，loading图标,默认为true
        finishLoding: false // 加载完成，显示已经没有更多了
        finishLoding: false, // 加载完成，显示已经没有更多了
        keyMap: {}
         }
      },
    created() {
      this.selectEnumByCategory()
      this.keyMap = {};
      this.currentPage = 1;
      this.list = [];
      this.refreshTable();
    },
      methods: {
         refreshTable() {
        if(this.currentPage>1){
          this.isLoding = true
        }else{
          this.loading = true
        const key = `_${this.currentPage}`
        const value = this.keyMap[key]
        // 如果value存在，表示缓存有值，那么阻止请求
        if(value) {
          return
        }
        if(this.list.length==0){
          window.addEventListener("scroll", this.throttle(this.scrollFn, 20000));
        // value不存在，表示第一次请求,设置占位
        this.keyMap[key] = 'temp'
        if(this.currentPage==1){
          this.loading = true
        }
        this.$axios.post(this.$api.deviceScope.selectDeviceParameter,{
               page: {
@@ -261,15 +257,15 @@
            this.total = res.data.body.total
            let list = res.data.body.records.map(m=>{
              switch (m.deviceStatus){
                case '0':
                case 0:
                  // 正常
                  m.type ='success'
                  break;
                case '1':
                case 1:
                  // 报废
                  m.type ='warning'
                  break;
                case '2':
                case 2:
                  // 保修
                  m.type ='danger'
                  break;
@@ -291,13 +287,14 @@
              if(this.total==this.list.length){
                this.finishLoding = true;
              }
              this.currentPage++;
            }
          }
          this.loading = false
          this.isLoding = false;
            })
         },
         refresh() {
        this.keyMap = {};
        this.currentPage= 1;
        this.list=[];
        this.finishLoding = false;