feat: 修改机巢详情分页

张含笑

2025-04-11 404b573437b30018d0fbdaeab7b1d375bfc0d7bb

 src/views/Home/HomeLeft/OverviewNext.vue

@@ -1,6 +1,6 @@
<!-- 机巢概况 -->
<template>
  <common-title :style="{ marginLeft: pxToRem(14) }" @details="detailsFun"></common-title>
  <common-title title="机巢概况" :style="{ marginLeft: pxToRem(14) }" @details="detailsFun"></common-title>
  <div class="overview-next">
    <MachineNestTotal @searchNickName="handleSearch" />
    <div class="table-list">
@@ -19,7 +19,10 @@
            <img width="13" height="15" src="../../../assets/images/home/homeLeft/table-icon.png" alt="" />
            {{ item.nickname }}
          </div>
          <div class="status" :class="item.status==='WORKING'?'atcive':''" @click="signMachineNestClick(item)">
          <div class="status" :class="{
            'active': item.status === 'WORKING',
            'idle-active': item.status === 'LEISURE'
          }" @click="signMachineNestClick(item)">
            {{ item.status==='OFFLINE'?'离线中':(item.status==='WORKING'?'作业中':'空闲中') }}
          </div>
        </div>
@@ -56,7 +59,6 @@
const getTableList = () => {
  const params = {
    nickname: searchText.value,
    is_execute: true,
    current: pageParams.value.current,
    size: pageParams.value.size
  };
@@ -114,7 +116,7 @@
  border-radius: 0px 0px 0px 0px;
  opacity: 0.85;
  margin-bottom: 10px;
  

  .table-list {
    font-family: Source Han Sans CN, Source Han Sans CN;
    margin: 16px;
@@ -151,14 +153,25 @@
        top: 14px;
        left: 10px;
      }
      .name {
        display: flex;
        align-items: center;
        gap: 8px; // 添加图片和文字之间的间距
        img {
          vertical-align: middle;
        }
      }
      .status {
        color: #6fc3ff;
        color: #fff;
        cursor: pointer;
      }
      .atcive {
        color: #04f020;
      .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%);
      }
      .idle-active {
        color: #FFA768;
      }
    }
    .custom-empty {
      margin: 16px 0;