feat: 修改机巢列表：去掉分页和滚动条，更换为下拉刷新

张含笑

2025-04-12 1019064784840550f3da8124e418e738baa0f551

feat: 修改机巢列表：去掉分页和滚动条，更换为下拉刷新

 src/views/Home/HomeLeft/MachineNestList.vue

@@ -1,11 +1,23 @@
<!-- 机巢详情列表 -->
<template>
    <common-title title="机巢概况" text="返回" :style="{ marginLeft: pxToRem(14) }" @details="detailsFun"></common-title>

    <div class="machine-nest-list">
        <MachineNestTotal @searchNickName="handleSearch" />
        <div class="content-wrapper">
            <div class="table-list">
                <div :class="[index % 2 ==1 ? 'table-itemeven':'table-item']" v-for="(item,index) in tableList" :key="index">
            <div
                class="table-list"
                v-if="tableList.length > 0"
                infinite-scroll-distance="6"
                v-infinite-scroll="loadMore"
                :infinite-scroll-disabled="busy"
                infinite-scroll-immediate="true"
            >
                <div
                    :class="[index % 2 == 1 ? 'table-itemeven' : 'table-item']"
                    v-for="(item, index) in tableList"
                    :key="index"
                >
                    <img src="/src/assets/images/home/homeLeft/machinenestlist-sign.png" alt="" />
                    <div class="middle">
                        <div class="title">{{ item.nickname }}</div>
@@ -19,14 +31,17 @@
                            >个 飞行时长：<span>{{ item.hour }}</span
                            >h
                        </div>
                        <div class="numbering">23HK1453</div>
                    </div>
                    <div class="right" :class="item.status === 'WORKING' ? 'atcive' : item.status === 'OFFLINE'? 'offine' :'freetime'      " @click="signMachineNestClick(item)">
                    <div
                        class="right"
                        :class="item.status === 'WORKING' ? 'atcive' : item.status === 'OFFLINE' ? 'offine' : 'freetime'"
                        @click="signMachineNestClick(item)"
                    >
                        {{ item.status === 'OFFLINE' ? '离线中' : item.status === 'WORKING' ? '作业中' : '空闲中' }}
                    </div>
                </div>
            </div>
            <div class="pagination-container">
            <!-- <div class="pagination-container">
                <el-pagination
                    v-model:current-page="pageParams.current"
                    v-model:page-size="pageParams.size"
@@ -37,7 +52,7 @@
                    @current-change="handleCurrentChange"
                    background
                />
            </div>
            </div> -->
        </div>
    </div>
</template>
@@ -49,7 +64,9 @@
import { useStore } from 'vuex'

const store = useStore()

const isMore = ref(true)
// 控制加载状态
const busy = ref(false)
const searchText = ref('')
// 分页参数
const pageParams = ref({
@@ -69,11 +86,18 @@
    }
    selectDevicePage(params).then(res => {
        if (res.data.code !== 0) return
        tableList.value = res.data.data.records
        pageParams.value.total = res.data.data.total
        if (res.data.data.records.length === 0) return (isMore.value = false)
        pageParams.value.current += 1
        tableList.value = [...tableList.value, ...res.data.data.records]
        busy.value = false
    })
}

// 加载更多数据
const loadMore = async () => {
    busy.value = true
    if (!isMore.value) return
    getTableList()
}
// 搜索数据
const handleSearch = name => {
    searchText.value = name
@@ -129,6 +153,13 @@
            font-weight: 500;
            font-size: 16px;
            color: #fff;
            // 滚动条
            &::-webkit-scrollbar {
                width: 0;
                display: none;
            }
            -ms-overflow-style: none; /* IE and Edge */
            scrollbar-width: none; /* Firefox */
            .table-item {
                display: flex;
                justify-content: space-between;
@@ -136,7 +167,7 @@
                padding-top: 6px;
                margin-top: 10px;

                height: 120px;
                height: 100px;
                background: linear-gradient(
                    90deg,
                    rgba(0, 122, 255, 0) 0%,
@@ -144,7 +175,7 @@
                    rgba(0, 73, 153, 0) 100%
                );
            }
          .table-itemeven {
            .table-itemeven {
                display: flex;
                justify-content: space-between;
                justify-items: center;
@@ -152,7 +183,6 @@
                margin-top: 10px;

                height: 120px;

            }
            img {
                width: 45px;
@@ -182,15 +212,15 @@
                cursor: pointer;
                font-size: 16px;
            }
      // 离线中
      .offine {
      color: #fff;
      }
      // 空闲中
      .freetime{
      color: #FFA768;
      }
      // 作业中
            // 离线中
            .offine {
                color: #fff;
            }
            // 空闲中
            .freetime {
                color: #ffa768;
            }
            // 作业中
            .atcive {
                color: #04f020;
                background: linear-gradient(90deg, rgba(12, 45, 92, 1) 0%, #154671 50%, rgba(12, 45, 92, 1) 100%),