| | |
| | | <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"> |
| | |
| | | </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; |
| | |
| | | </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:{ |
| | |
| | | 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: { |
| | |
| | | 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; |
| | |
| | | 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; |