feat:添加表格分页切换loading，修复分页时重置搜索条件问题

src/components/MenuTitle.vue

 <template>
   <div style="margin-bottom: 0" class="menu-title">
     <div class="title">{{ props.title }}</div>
-    <div class="low-titme">{{ props.subtitle }}</div>
+    <div class="sub-title">{{ props.subtitle }}</div>
   </div>
 </template>
 
@@ -21,7 +21,7 @@ const props = defineProps<{
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 
-.low-titme {
+.sub-title {
   color: rgba(255, 255, 255, 0.8);
   text-align: left;
   margin-left: 20px;

src/views/os-dataDisplay/components/dsnData/dsnDataTab.vue

@@ -8,7 +8,7 @@
   <div class="table-content">
     <el-table
       v-loading="!tableData"
-      element-loading-background="rgba(48, 65, 86, 0.7)"
+      element-loading-background="rgba(48, 65, 86, 0.3)"
       :data="tableData"
       style="width: 100%"
       border

src/views/os-dataDisplay/components/esDataTab.vue

@@ -31,7 +31,7 @@
 
         <div class="btns">
           <el-button plain type="primary" @click="handleSearch">查询</el-button>
-          <el-button plain @click="getData">重置表格</el-button>
+          <el-button plain @click="resetForm">重置表格</el-button>
         </div>
       </div>
     </table-search>
@@ -46,8 +46,8 @@
       :row-style="{ height: '45.5px' }"
       :header-cell-style="{ textAlign: 'center' }"
       :cell-style="{ textAlign: 'center' }"
-      v-loading="tableData.length == 0"
-      element-loading-background="rgba(48, 65, 86, 0.7)"
+      v-loading="tableLoading"
+      element-loading-background="rgba(48, 65, 86, 0.3)"
     >
       <el-table-column property="number" label="序号" width="55" type="index" />
       <el-table-column property="data.mission" label="目标名称" width="86" show-overflow-tooltip />
@@ -618,16 +618,22 @@ const handleMissionDetails = async (id: any) => {
   }
   detailVisibleValue.value = true;
 };
-
-// 获取esa数据列表的方法
-const getData = async () => {
-  tableData.value.length = 0;
+//表格loading标记
+const tableLoading = ref(false);
+//重置搜索条件
+const resetForm = () => {
   searchStation.value = "";
   searchTargetName.value = "";
   searchTimeValue.value = "";
+  getData();
+};
+// 获取esa数据列表的方法
+const getData = async () => {
+  tableLoading.value = true;
   const res = await getESAList({ page: pageObj.value.pageNo, size: pageObj.value.pageSize });
   pageObj.value.total = res.data.total;
   tableData.value = res.data.list;
+  tableLoading.value = false;
 };
 const handleClose = () => {
   detailVisibleValue.value = false;

src/views/os-dataDisplay/components/ituDataTab.vue

@@ -30,7 +30,7 @@
         </div>
         <div class="btns">
           <el-button plain type="primary" @click="handleSearch">查询</el-button>
-          <el-button plain="" @click="getData">重置</el-button>
+          <el-button plain="" @click="resetForm">重置</el-button>
         </div>
       </div>
     </TableSearch>
@@ -45,8 +45,8 @@
       :row-style="{ height: '45px' }"
       :header-cell-style="{ textAlign: 'center' }"
       :cell-style="{ textAlign: 'center' }"
-      v-loading="tableData.length == 0"
-      element-loading-background="rgba(48, 65, 86, 0.7)"
+      v-loading="tableLoading"
+      element-loading-background="rgba(48, 65, 86, 0.3)"
     >
       <!-- <el-table-column type="selection" width="40" /> -->
       <el-table-column property="number" label="序号" width="55" type="index" />
@@ -335,15 +335,23 @@ const handleDetails = async (id: any) => {
   BFIFICdate.value = res.data.regulatory_status.d_wic === null ? "-" : res.data.regulatory_status.d_wic;
   detailVisibleValue.value = true;
 };
+
+//表单loading标记
+const tableLoading = ref(false);
 // 获取itu数据列表的方法
-const getData = async () => {
-  tableData.value.length = 0;
-  const res = await getItuList({ page: pageObj.value.pageNo, size: pageObj.value.pageSize });
+//重置搜索条件
+const resetForm = () => {
   searchTargetName.value = "";
   searchTargetId.value = "";
   searchTimeValue.value = "";
+  getData();
+};
+const getData = async () => {
+  tableLoading.value = true;
+  const res = await getItuList({ page: pageObj.value.pageNo, size: pageObj.value.pageSize });
   pageObj.value.total = res.data.total;
   tableData.value = res.data.list;
+  tableLoading.value = false;
 };
 const handleClose = () => {
   detailVisibleValue.value = false;
@@ -353,6 +361,7 @@ const handleSearch = async () => {
     ElMessage.warning("请输入搜索内容");
     return;
   }
+  tableLoading.value = true;
   const res = await getItuList({
     sat_name: searchTargetName.value,
     ntc_id: searchTargetId.value,
@@ -362,6 +371,7 @@ const handleSearch = async () => {
   });
   pageObj.value.total = res.data.total;
   tableData.value = res.data.list;
+  tableLoading.value = false;
 };
 
 onMounted(() => {
@@ -431,7 +441,7 @@ onMounted(() => {
 }
 
 .item-title {
-  color: #fff;
+  color: #b0dfff;
 }
 
 .item {

src/views/os-dataDisplay/components/stDataTab.vue

@@ -30,7 +30,7 @@
         </div>
         <div class="btns">
           <el-button plain type="primary" @click="handleSearch">查询</el-button>
-          <el-button plain @click="getData">重置表格</el-button>
+          <el-button plain @click="resetForm">重置表格</el-button>
         </div>
       </div>
     </table-search>
@@ -40,8 +40,8 @@
   <div class="table-content">
     <el-table
       :data="tableData"
-      v-loading="tableData.length == 0"
-      element-loading-background="rgba(48, 65, 86, 0.7)"
+      v-loading="tableLoading"
+      element-loading-background="rgba(48, 65, 86, 0.3)"
       style="width: 100%"
       border
       :row-style="{ height: '45.5px' }"
@@ -297,15 +297,22 @@ ${res.data.data[0].TLE_LINE1}
 ${res.data.data[0].TLE_LINE2}`;
   detailVisibleValue.value = true;
 };
+//表单loading标记
+const tableLoading = ref(false);
+//重置搜索条件
+const resetForm = () => {
+  noradCatId.value = "";
+  searchTargetName.value = "";
+  timeValue.value = "";
+  getData();
+};
 // 获取st数据列表的方法
 const getData = async () => {
-  tableData.value.length = 0;
+  tableLoading.value = true;
   const res = await getStList({ page: pageObj.value.pageNo, size: pageObj.value.pageSize });
   pageObj.value.total = res.data.total;
   tableData.value = res.data.list;
-  noradCatId.value = "";
-  searchTargetName.value = "";
-  timeValue.value = "";
+  tableLoading.value = false;
 };
 const handleClose = () => {
   detailVisibleValue.value = false;

src/views/os-spiderManager/index.vue

@@ -10,7 +10,7 @@
         :cell-style="{ textAlign: 'center' }"
         :row-style="{ height: '60px' }"
         v-loading="tableData.length == 0"
-        element-loading-background="rgba(48, 65, 86, 0.7)"
+        element-loading-background="rgba(48, 65, 86, 0.3)"
       >
         <el-table-column property="number" label="序号" type="index" width="80" />
         <el-table-column property="spider" label="爬虫代号" show-overflow-tooltip />

src/views/os-system/index.vue

@@ -18,7 +18,7 @@
         :row-style="{ height: '58px' }"
         @selection-change="handleSelectionChange"
         v-loading="tableData?.length == 0"
-        element-loading-background="rgba(48, 65, 86, 0.7)"
+        element-loading-background="rgba(48, 65, 86, 0.3)"
       >
         <el-table-column type="selection" width="40" />
         <el-table-column property="number" label="序号" width="55" type="index" />

src/views/os-taskInformation/components/taskCard.vue

@@ -26,15 +26,9 @@
         </div>
       </div>
     </TableSearch>
-    <div class="cardStyle">
+    <div class="cardStyle" v-loading="isLoading" element-loading-background="rgba(48, 65, 86, 0.3)">
       <div v-if="taskList.length === 0 && !isLoading" class="empty-tip">暂无任务数据</div>
-      <div
-        v-loading="taskList.length == 0"
-        element-loading-background="rgba(48, 65, 86, 0.7)"
-        class="taskCard p-2"
-        v-for="task in taskList || []"
-        :key="task?.id || task?.taskId"
-      >
+      <div class="taskCard p-2" v-for="task in taskList || []" :key="task?.id || task?.taskId">
         <div class="header">
           <span class="task-name"
             >任务名称: {{ (task?.kwargs?.options && JSON.parse(task.kwargs.options).jobName) || "无名称" }}</span
@@ -48,9 +42,9 @@
           <el-button plain type="danger" @click="deleteTask(task)" class="deleteButton" :disabled="!task?.id"
             >删除</el-button
           >
-        </div>
+        </div>s
         <div class="info">
-          <div class="item">
+          <div class="item">s
             <span class="wordStyle">启用/停止: </span>
             <el-switch
               v-model="task.status"
@@ -329,6 +323,9 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+:deep(.el-select__selected-item) {
+  color: white !important;
+}
 :deep(.el-form-item__label) {
   color: white;
 }

src/views/os-taskRecord/index.vue

@@ -22,15 +22,15 @@
         </div>
         <div class="btns">
           <el-button plain type="primary" @click="searchData">查询</el-button>
-          <el-button plain @click="getData">重置</el-button>
+          <el-button plain @click="resetQuery">重置</el-button>
         </div>
       </div>
     </table-search>
     <div class="table-content">
       <div>
         <el-table
-          v-loading="tableData.length == 0"
-          element-loading-background="rgba(48, 65, 86, 0.7)"
+          v-loading="tableLoading"
+          element-loading-background="rgba(48, 65, 86, 0.3)"
           :data="tableData"
           style="width: 100%"
           border
@@ -127,14 +127,26 @@ const goToStatus = () => {
     });
   }
 };
+
+//表单loading标记
+const tableLoading = ref(false);
+
+//重置查询
+const resetQuery = () => {
+  timeValue.value = "";
+  getData();
+};
+
 // 获取任务执行记录列表
 const getData = async () => {
-  tableData.value.length = 0;
+  tableLoading.value = true;
   const res = await getSpiderTaskRecord({ page: pageObj.value.pageNo, size: pageObj.value.pageSize, status: "total" });
   pageObj.value.total = res.data.total;
   tableData.value = res.data.list;
+  tableLoading.value = false;
 };
-//  数据的方法
+
+//查询数据的方法
 const searchData = async () => {
   if (!timeValue.value) {
     ElMessage.warning("请先选择时间段");
@@ -145,6 +157,7 @@ const searchData = async () => {
   const endTime = timeValue.value[1];
   resTime.push(startTime);
   resTime.push(endTime);
+  tableLoading.value = true;
   const res = await getSpiderTaskRecord({
     page: pageObj.value.pageNo,
     size: pageObj.value.pageSize,
@@ -153,6 +166,7 @@ const searchData = async () => {
   });
   pageObj.value.total = res.data.total;
   tableData.value = res.data.list;
+  tableLoading.value = false;
 };
 
 onMounted(() => {