From e602e7229a696cf50bc9e9e971a2d8f40ea9017a Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Thu, 10 Apr 2025 18:06:38 +0800
Subject: [PATCH] feat: 修改首页机场详情样式效果
---
src/views/Home/HomeLeft/MachineNestList.vue | 364 ++++++++++++++++++++++++++++++----------------------
1 files changed, 210 insertions(+), 154 deletions(-)
diff --git a/src/views/Home/HomeLeft/MachineNestList.vue b/src/views/Home/HomeLeft/MachineNestList.vue
index e5d862e..5831f29 100644
--- a/src/views/Home/HomeLeft/MachineNestList.vue
+++ b/src/views/Home/HomeLeft/MachineNestList.vue
@@ -1,191 +1,247 @@
<!-- 机巢详情列表 -->
<template>
- <common-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="table-item" v-for="item in tableList">
- <img src="" alt="">
- <div class="middle">
- <div class="title">{{ item.nickname }}</div>
- <div class="number">飞行次数：{{ item.fly_count }}次 飞行里程：{{ item.flight_mileage }}km</div>
- <div class="result">任务成果：{{ item.accumulate_data }}个 飞行时长：{{ item.hour }}h</div>
- </div>
- <div class="right" :class="item.status==='WORKING'?'atcive':''" @click="signMachineNestClick(item)">
- {{ item.status==='OFFLINE'?'离线中':(item.status==='WORKING'?'作业中':'空闲中') }}
- </div>
- </div>
- </div>
- <div class="pagination-container">
- <el-pagination
- v-model:current-page="pageParams.current"
- v-model:page-size="pageParams.size"
- :total="pageParams.total"
- :page-sizes="[5, 10, 20]"
- layout="total, prev, pager, next"
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- background
- />
- </div>
- </div>
- </div>
+ <common-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">
+ <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
+ </div>
+ <div class="result">
+ 任务成果：<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)">
+ {{ item.status === 'OFFLINE' ? '离线中' : item.status === 'WORKING' ? '作业中' : '空闲中' }}
+ </div>
+ </div>
+ </div>
+ <!-- <div class="pagination-container">
+ <el-pagination
+ v-model:current-page="pageParams.current"
+ v-model:page-size="pageParams.size"
+ :total="pageParams.total"
+ :page-sizes="[5, 10, 20]"
+ layout="total, prev, pager, next"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ background
+ />
+ </div> -->
+ </div>
+ </div>
</template>
<script setup>
-import CommonTitle from '@/components/CommonTitle.vue';
-import MachineNestTotal from './components/MachineNestTotal.vue';
+import CommonTitle from '@/components/CommonTitle.vue'
+import MachineNestTotal from './components/MachineNestTotal.vue'
import { selectDevicePage } from '@/api/home/machineNest.js'
-import { useStore } from 'vuex';
+import { useStore } from 'vuex'
-const store = useStore();
+const store = useStore()
-const searchText = ref('');
+const searchText = ref('')
// 分页参数
const pageParams = ref({
- current: 1,
- size: 8,
- total: 0
-});
+ current: 1,
+ size: 8,
+ total: 0,
+})
// 机巢列表
-const tableList = ref([]);
+const tableList = ref([])
// 机巢列表数据
const getTableList = () => {
- const params = {
- nickname: searchText.value,
- current: pageParams.value.current,
- 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;
- });
-};
+ const params = {
+ nickname: searchText.value,
+ current: pageParams.value.current,
+ 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)
+ })
+}
// 搜索数据
-const handleSearch = (name) => {
- searchText.value = name;
- pageParams.value.current = 1;
- tableList.value = [];
- 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 handleSizeChange = val => {
+ pageParams.value.size = val
+ pageParams.value.current = 1
+ getTableList()
+}
-const handleCurrentChange = (val) => {
- pageParams.value.current = val;
- getTableList();
-};
+const handleCurrentChange = val => {
+ pageParams.value.current = val
+ getTableList()
+}
// 单个机巢详情
-const signMachineNestClick = (item) => {
- store.commit('setSingleUavHome', item);
+const signMachineNestClick = item => {
+ store.commit('setSingleUavHome', item)
}
// 返回
const detailsFun = () => {
- store.commit('setMachineNestDetail', false);
-};
+ store.commit('setMachineNestDetail', false)
+}
onMounted(() => {
- getTableList();
-});
+ getTableList()
+})
</script>
<style scoped lang="scss">
.machine-nest-list {
- font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
- margin-left: 29px;
- padding: 16px 16px;
- width: 390px;
- height: 838px;
- background: linear-gradient(
- 270deg,
- rgba(31, 62, 122, 0) 0%,
- rgba(31, 62, 122, 0.35) 21%,
- #1f3e7a 100%
- );
- border-radius: 0px 0px 0px 0px;
- opacity: 0.85;
- .content-wrapper {
- position: relative;
- height: calc(100% - 130px);
- .table-list {
- height: calc(100% - 50px);
- overflow-y: auto;
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: 500;
- font-size: 16px;
+ font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+ margin-left: 29px;
+ padding: 16px 16px;
+ width: 390px;
+ height: 838px;
+ background: linear-gradient(270deg, rgba(31, 62, 122, 0) 0%, rgba(31, 62, 122, 0.35) 21%, #1f3e7a 100%);
+ border-radius: 0px 0px 0px 0px;
+ opacity: 0.85;
+ .content-wrapper {
+ position: relative;
+ height: calc(100% - 130px);
+ .table-list {
+ height: calc(100% - 50px);
+ overflow-y: auto;
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ font-weight: 500;
+ font-size: 16px;
+ color: #fff;
+ .table-item {
+ display: flex;
+ justify-content: space-between;
+ justify-items: center;
+ padding-top: 6px;
+ margin-top: 10px;
+
+ height: 120px;
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 122, 255, 0) 0%,
+ rgba(0, 98, 204, 0.3) 57%,
+ rgba(0, 73, 153, 0) 100%
+ );
+ }
+ .table-itemeven {
+ display: flex;
+ justify-content: space-between;
+ justify-items: center;
+ padding-top: 6px;
+ margin-top: 10px;
+
+ height: 120px;
+
+ }
+ img {
+ width: 45px;
+ height: 58px;
+ }
+ .middle {
+ .number,
+ .result {
+ font-size: 12px;
+ margin-bottom: 11px;
+ span {
+ color: #ffdd7f;
+ font-size: 14px;
+ }
+ }
+ .title {
+ margin-bottom: 9px;
+ font-weight: bold;
+ font-size: 16px;
+ color: #ffffff;
+ line-height: 19px;
+ text-align: left;
+ }
+ }
+ .right {
+ color: #6fc3ff;
+ cursor: pointer;
+ font-size: 16px;
+ }
+ // 离线中
+ .offine {
color: #fff;
- .table-item {
- display: flex;
- justify-content: space-between;
- justify-items: center;
- align-items: center;
- margin-top: 10px;
- img {
- width: 48px;
- height: 48px;
- }
- .middle {
- .number,
- .result {
- font-size: 12px;
- }
- }
- .right {
- color: #6fc3ff;
- cursor: pointer;
- }
- .atcive {
- 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%);
- }
}
- }
- .pagination-container {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- margin-top: 20px;
- display: flex;
- justify-content: center;
-
- :deep(.el-pagination) {
- --el-pagination-bg-color: transparent;
- --el-pagination-text-color: #fff;
- --el-pagination-button-color: #fff;
- --el-pagination-hover-color: #409eff;
-
- .el-pagination__total {
- color: #fff;
- }
-
- .btn-prev,
- .btn-next,
- .number {
- background-color: transparent;
- color: #fff;
-
- &:hover {
- color: #409eff;
- }
- }
-
- .is-active {
- color: #409eff;
- }
+ // 空闲中
+ .freetime{
+ color: #FFA768;
}
- }
- }
+ // 作业中
+ .atcive {
+ 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%);
+ }
+ .numbering {
+ font-size: 12px;
+ color: #f6fffa;
+ text-align: center;
+ width: 67px;
+ height: 18px;
+ background: #0039c9;
+ border-radius: 50px 50px 50px 50px;
+ }
+ }
+ .pagination-container {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ margin-top: 20px;
+ display: flex;
+ justify-content: center;
+
+ :deep(.el-pagination) {
+ --el-pagination-bg-color: transparent;
+ --el-pagination-text-color: #fff;
+ --el-pagination-button-color: #fff;
+ --el-pagination-hover-color: #409eff;
+
+ .el-pagination__total {
+ color: #fff;
+ }
+
+ .btn-prev,
+ .btn-next,
+ .number {
+ background-color: transparent;
+ color: #fff;
+
+ &:hover {
+ color: #409eff;
+ }
+ }
+
+ .is-active {
+ color: #409eff;
+ }
+ }
+ }
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3