Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-...

chenyao

2025-04-12 df4e3452ecdc510faa09c7310ba4857ed432553d

 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%),