From 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Mon, 21 Apr 2025 18:29:09 +0800
Subject: [PATCH] fix: 天气显示
---
src/views/Home/HomeLeft/MachineNestList.vue | 117 +++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 70 insertions(+), 47 deletions(-)
diff --git a/src/views/Home/HomeLeft/MachineNestList.vue b/src/views/Home/HomeLeft/MachineNestList.vue
index 5831f29..19fa753 100644
--- a/src/views/Home/HomeLeft/MachineNestList.vue
+++ b/src/views/Home/HomeLeft/MachineNestList.vue
@@ -1,27 +1,48 @@
<!-- 机巢详情列表 -->
<template>
- <common-title text="返回" :style="{ marginLeft: pxToRem(14) }" @details="detailsFun"></common-title>
+ <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="table-list"
+ v-if="tableList.length > 0"
+ >
+ <div
+ :class="[index % 2 === 1 ? 'table-itemeven' : 'table-item']"
+ v-for="(item, index) in tableList"
+ :key="index" @click="signMachineNestClick(item)"
+ >
<img src="/src/assets/images/home/homeLeft/machinenestlist-sign.png" alt="" />
<div class="middle">
<div class="title">{{ item.nickname }}</div>
<div class="number">
- 飞行次数：<span>{{ item.fly_count }}</span
- >次 飞行里程：<span>{{ item.flight_mileage }}</span
- >km
+ 飞行次数：
+ <span>{{ item.fly_count }}</span>
+ 次 飞行里程：
+ <span>{{ item.flight_mileage }}</span>
+ km
</div>
<div class="result">
- 任务成果：<span>{{ item.accumulate_data }}</span
- >个 飞行时长：<span>{{ item.hour }}</span
- >h
+ 任务成果：
+ <span>{{ item.accumulate_data }}</span>
+ 个 飞行时长：
+ <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'">
{{ item.status === 'OFFLINE' ? '离线中' : item.status === 'WORKING' ? '作业中' : '空闲中' }}
</div>
</div>
@@ -49,12 +70,14 @@
import { useStore } from 'vuex'
const store = useStore()
-
+const isMore = ref(true)
+// 控制加载状态
+const busy = ref(false)
const searchText = ref('')
// 分页参数
const pageParams = ref({
current: 1,
- size: 8,
+ size: 99,
total: 0,
})
@@ -64,34 +87,29 @@
const getTableList = () => {
const params = {
nickname: searchText.value,
- current: pageParams.value.current,
+ current: 1,
size: pageParams.value.size,
}
selectDevicePage(params).then(res => {
if (res.data.code !== 0) return
- tableList.value = res.data.data.records
- pageParams.value.total = res.data.data.total
- console.log('标题', tableList.value)
+ if (res.data.data.records.length === 0) return (isMore.value = false)
+ // pageParams.value.current += 1
+ // pageParams.value.size += 8
+ 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 handleSearch = name => {
searchText.value = name
pageParams.value.current = 1
tableList.value = []
- getTableList()
-}
-
-// 分页方法
-const handleSizeChange = val => {
- pageParams.value.size = val
- pageParams.value.current = 1
- getTableList()
-}
-
-const handleCurrentChange = val => {
- pageParams.value.current = val
getTableList()
}
@@ -130,6 +148,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;
@@ -137,7 +162,7 @@
padding-top: 6px;
margin-top: 10px;
- height: 120px;
+ height: 100px;
background: linear-gradient(
90deg,
rgba(0, 122, 255, 0) 0%,
@@ -145,15 +170,14 @@
rgba(0, 73, 153, 0) 100%
);
}
- .table-itemeven {
+ .table-itemeven {
display: flex;
justify-content: space-between;
justify-items: center;
padding-top: 6px;
margin-top: 10px;
- height: 120px;
-
+ height: 100px;
}
img {
width: 45px;
@@ -183,19 +207,18 @@
cursor: pointer;
font-size: 16px;
}
- // 离线中
- .offine {
- color: #fff;
- }
- // 空闲中
- .freetime{
- color: #FFA768;
- }
- // 作业中
- .atcive {
+ // 离线中
+ .offine {
+ color: #fff;
+ }
+ // 空闲中
+ .freetime {
color: #04f020;
- 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%);
+ }
+ // 作业中
+ .atcive {
+ color: #ffa768;
+
}
.numbering {
font-size: 12px;
@@ -244,4 +267,4 @@
}
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3