| | |
| | | <div class="name">机巢名称</div> |
| | | <div class="status">机巢状态</div> |
| | | </div> |
| | | <div |
| | | <!-- <div |
| | | class="table-body" |
| | | v-if="tableList.length > 0" |
| | | infinite-scroll-distance="6" |
| | | v-infinite-scroll="loadMore" |
| | | :infinite-scroll-disabled="busy" |
| | | infinite-scroll-immediate="true" |
| | | > |
| | | > --> |
| | | <div |
| | | class="table-body" |
| | | v-if="tableList.length > 0"> |
| | | <div |
| | | class="table-item" |
| | | :class="[index % 2 === 1 ? '' : 'table-item-odd']" |
| | |
| | | // 分页参数 |
| | | const pageParams = ref({ |
| | | current: 1, |
| | | size: 5, |
| | | size: 99, |
| | | total: 0, |
| | | }) |
| | | // 机巢列表 |
| | |
| | | selectDevicePage(params).then(res => { |
| | | if (res.data.code !== 0) return |
| | | if (res.data.data.records.length === 0) return (isMore.value = false) |
| | | pageParams.value.current += 1 |
| | | tableList.value = [...tableList.value, ...res.data.data.records] |
| | | // pageParams.value.current += 1 |
| | | // pageParams.value.size += 5; |
| | | tableList.value = res.data.data.records;// [...tableList.value, ...res.data.data.records] |
| | | busy.value = false |
| | | }) |
| | | } |
| | | |
| | | // 加载更多数据 |
| | | const loadMore = async () => { |
| | | busy.value = true |
| | | if (!isMore.value) return |
| | | getTableList() |
| | | } |
| | | // const loadMore = async () => { |
| | | // busy.value = true |
| | | // if (!isMore.value) return |
| | | // getTableList() |
| | | // } |
| | | |
| | | // 搜索数据 |
| | | const handleSearch = name => { |
| | | searchText.value = name |
| | | pageParams.value.current = 1 |
| | | // pageParams.value.size = 5; |
| | | tableList.value = [] |
| | | isMore.value = true |
| | | getTableList() |
| | |
| | | margin-bottom: 13px; |
| | | .name { |
| | | margin-left: 46px; |
| | | |
| | | } |
| | | } |
| | | .table-body { |
| | | height: 190px; |
| | | |
| | | overflow: auto; |
| | | &::-webkit-scrollbar { |
| | | width: 0; |
| | |
| | | cursor: pointer; |
| | | } |
| | | .active { |
| | | color: #8effac; |
| | | background: linear-gradient(90deg, rgba(12, 45, 92, 1) 0%, #154671 50%, rgba(12, 45, 92, 1) 100%), |
| | | linear-gradient(90deg, rgba(12, 45, 92, 1) 0%, rgba(12, 45, 92, 1) 50%, rgba(12, 45, 92, 1) 100%); |
| | | color: #ffa768; |
| | | |
| | | } |
| | | .idle-active { |
| | | color: #ffa768; |
| | | color: #8effac; |
| | | } |
| | | .imageicon { |
| | | object-fit: cover; |