pref:修改状态监控页面显示效果

f489d1f8 · liucan · 40c8610d · f489d1f8 · f489d1f8 · f489d1f8
Commit f489d1f8 authored Nov 17, 2025 by liucan
15 changed files
--- a/src/utils/formatExactLargeNum.ts
+++ b/src/utils/formatExactLargeNum.ts
--- a/src/views/os-dataDisplay/components/esDataTab.vue
+++ b/src/views/os-dataDisplay/components/esDataTab.vue
@@ -2,18 +2,12 @@
  <div class="text-left p-4 toolbarStyle">
    <div class="formStyle">
      <el-form inline>
-        <el-form-item>
-          <el-text class="mx-1">目标名称:</el-text>
-        </el-form-item>
-        <el-form-item>
+        <el-form-item label="目标名称:">
          <div>
-            <el-input placeholder="请输入" v-model="searchTargetName" style="width: 180px" />
+            <el-input placeholder="请输入目标名称:" v-model="searchTargetName" style="width: 180px" />
          </div>
        </el-form-item>
-        <el-form-item>
-          <el-text class="mx-1">获取时间:</el-text>
-        </el-form-item>
-        <el-form-item>
+        <el-form-item label="获取时间:">
          <el-config-provider :locale="zhCn">
            <el-date-picker
              type="datetimerange"
@@ -28,16 +22,13 @@
            />
          </el-config-provider>
        </el-form-item>
-        <el-form-item>
-          <el-text class="mx-1">站点名称:</el-text>
-        </el-form-item>
-        <el-form-item>
+        <el-form-item label="站点名称:">
          <el-input placeholder="请输入" v-model="searchStation" style="width: 170.5px" />
        </el-form-item>
        <el-form-item>
          <el-space>
-            <el-button type="primary" @click="handleSearch">查询</el-button>
-            <el-button type="primary" @click="getData">重置表格</el-button>
+            <el-button plain type="primary" @click="handleSearch">查询</el-button>
+            <el-button plain @click="getData">重置表格</el-button>
          </el-space>
        </el-form-item>
      </el-form>
@@ -96,12 +87,14 @@
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="85">
        <template #default="scope">
+          <div class="btns">
            <el-button link type="primary" size="small" @click="handleMissionDetails(scope.row.data.mission)">
              目标信息
            </el-button>
            <el-button link type="primary" size="small" @click="handleStationDetails(scope.row.data.station)"
              >站点信息</el-button
            >
+          </div>
        </template>
      </el-table-column>
    </el-table>
@@ -125,7 +118,7 @@
          <el-card>
            <div class="title">目标信息：</div>
            <el-divider style="margin: 0"></el-divider>
-            <el-row :gutter="20" style="display: flex; justify-content: space-between">
+            <el-row :gutter="50" style="display: flex; justify-content: space-between">
              <el-col :span="12">
                <div class="info-item">
                  <span class="item-title">目标名称：</span>
@@ -222,7 +215,7 @@
          <el-card>
            <div class="title">站点信息：</div>
            <el-divider style="margin: 0"></el-divider>
-            <el-row :gutter="20" style="display: flex; justify-content: space-between">
+            <el-row :gutter="50" style="display: flex; justify-content: space-between">
              <el-col :span="12">
                <div class="info-item">
                  <span class="item-title">站点名称：</span>
@@ -656,6 +649,9 @@ onMounted(() => {
 </script>

 <style scoped lang="scss">
+:deep(.el-form-item__label) {
+  color: white;
+}
 // 调整表单项间距
 .detailForm {
  .el-dialog-title {
@@ -711,6 +707,10 @@ onMounted(() => {
 .target-desc {
  color: white;
 }
+
+.btns {
+  display: flex;
+}
 </style>

 <style>

--- a/src/views/os-dataDisplay/components/ituDataTab.vue
+++ b/src/views/os-dataDisplay/components/ituDataTab.vue
@@ -2,18 +2,12 @@
  <div class="text-left p-4 toolbarStyle">
    <div class="formStyle">
      <el-form inline>
-        <el-form-item>
-          <el-text class="mx-1">目标名称:</el-text>
-        </el-form-item>
-        <el-form-item>
+        <el-form-item label="目标名称:">
          <div>
-            <el-input placeholder="请输入" v-model="searchTargetName" style="width: 180px" />
+            <el-input placeholder="请输入目标名称" v-model="searchTargetName" style="width: 180px" />
          </div>
        </el-form-item>
-        <el-form-item>
-          <el-text class="mx-1">获取时间:</el-text>
-        </el-form-item>
-        <el-form-item>
+        <el-form-item label="获取时间:">
          <el-config-provider :locale="zhCn">
            <el-date-picker
              type="datetimerange"
@@ -28,15 +22,12 @@
            />
          </el-config-provider>
        </el-form-item>
-        <el-form-item>
-          <el-text class="mx-1">SNS Notice ID:</el-text>
-        </el-form-item>
-        <el-form-item>
-          <el-input placeholder="请输入" v-model="searchTargetId" style="width: 170.5px" />
+        <el-form-item label="SNS Notice ID:">
+          <el-input placeholder="请输入ID" v-model="searchTargetId" style="width: 170.5px" />
        </el-form-item>
        <el-form-item>
-          <el-button type="primary" @click="handleSearch">查询</el-button>
-          <el-button type="primary" @click="getData">重置表格</el-button>
+          <el-button plain type="primary" @click="handleSearch">查询</el-button>
+          <el-button plain="" @click="getData">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
@@ -369,6 +360,9 @@ onMounted(() => {
 </script>

 <style scoped lang="scss">
+:deep(.el-form-item__label) {
+  color: white;
+}
 // 调整表单项间距
 .detailForm {
  // background-image: url("@/assets/picture/dialog1.png");

--- a/src/views/os-dataDisplay/components/stDataTab.vue
+++ b/src/views/os-dataDisplay/components/stDataTab.vue
@@ -2,18 +2,10 @@
  <div class="text-left p-4 toolbarStyle">
    <div class="formStyle">
      <el-form inline>
-        <el-form-item>
-          <el-text class="mx-1">目标名称:</el-text>
-        </el-form-item>
-        <el-form-item>
-          <div>
-            <el-input placeholder="请输入" style="width: 180px" v-model="searchTargetName" />
-          </div>
-        </el-form-item>
-        <el-form-item>
-          <el-text class="mx-1">获取时间:</el-text>
+        <el-form-item label="目标名称:">
+          <el-input placeholder="请输入目标名称" style="width: 180px" v-model="searchTargetName" />
        </el-form-item>
-        <el-form-item>
+        <el-form-item label="获取时间:">
          <el-config-provider :locale="zhCn">
            <el-date-picker
              v-model="timeValue"
@@ -28,11 +20,8 @@
            />
          </el-config-provider>
        </el-form-item>
-        <el-form-item>
-          <el-text class="mx-1">NORAD CAT ID:</el-text>
-        </el-form-item>
-        <el-form-item>
-          <el-input placeholder="请输入" style="width: 170.5px" v-model="noradCatId" />
+        <el-form-item label="NORAD CAT ID:">
+          <el-input placeholder="请输入ID" style="width: 170.5px" v-model="noradCatId" />
        </el-form-item>
        <!-- <el-form-item>
 					<el-space>
@@ -41,8 +30,8 @@
 				</el-form-item> -->
        <el-form-item>
          <el-space>
-            <el-button type="primary" @click="handleSearch">查询</el-button>
-            <el-button type="primary" @click="getData">重置表格</el-button>
+            <el-button plain type="primary" @click="handleSearch">查询</el-button>
+            <el-button plain @click="getData">重置表格</el-button>
          </el-space>
        </el-form-item>
      </el-form>
@@ -100,7 +89,7 @@
          <el-card>
            <div class="title">目标信息：</div>
            <el-divider style="margin: 0"></el-divider>
-            <el-row :gutter="20" style="display: flex;justify-content: space-between;">
+            <el-row :gutter="50" style="display: flex; justify-content: space-between">
              <el-col :span="12">
                <div class="info-item">
                  <span class="item-title">目标名称：</span>
@@ -316,6 +305,9 @@ onMounted(() => {
 </script>

 <style scoped lang="scss">
+:deep(.el-form-item__label) {
+  color: white;
+}
 // 调整表单项间距
 .detailForm {
  .el-dialog-title {

--- a/src/views/os-dataDisplay/index.vue
+++ b/src/views/os-dataDisplay/index.vue
 <template>
  <div>
+    <el-card style="margin-bottom: 0">
+      <div class="title">数据展示</div>
+      <div class="low-titme">Data Display</div>
+      <el-divider class="divider" style="margin-bottom: 0" />
+    </el-card>
    <div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToStatus" />
    <div class="segment-content">
      <div class="custom-style flex gap-4">
@@ -76,6 +81,22 @@ onMounted(() => {
  outline: none;
 }

+.title {
+  text-align: left;
+  font-size: 18px;
+  font-weight: 500;
+  color: white;
+}
+
+.low-titme {
+  color: #ccc;
+  text-align: left;
+  margin-left: 20px;
+}
+.divider {
+  margin-top: 15px;
+}
+
 /* 文字样式 */
 .el-text {
  color: #ffffff;

--- a/src/views/os-spiderManager/index.vue
+++ b/src/views/os-spiderManager/index.vue
@@ -39,7 +39,6 @@
      />
    </div>

-    //编辑弹窗
    <el-dialog style="z-index: 999999" draggable v-model="editDialogVisible" title="指定下载以下卫星" width="400">
      <div class="No-Content" ref="noContentRef">
        <TransitionGroup
@@ -72,7 +71,26 @@
        </div>
        <div class="btn">
          <el-button :disabled="curSateNo == ''" plain type="primary" @click="addNoToList">添加</el-button>
-          <el-button plain type="danger" @click="delNoList">删除</el-button>
+          <el-popconfirm title="确定删除选中编号吗？" width="200">
+            <template #reference>
+              <el-button :disabled="curSelSateNo.length === 0" plain type="danger">删除</el-button>
+            </template>
+            <template #actions="{ confirm, cancel }">
+              <el-button size="small" @click="cancel">取消</el-button>
+              <el-button
+                type="danger"
+                size="small"
+                @click="
+                  () => {
+                    confirm();
+                    delNoList();
+                  }
+                "
+              >
+                确定
+              </el-button>
+            </template>
+          </el-popconfirm>
        </div>
      </div>
    </el-dialog>

--- a/src/views/os-status/components/dataCard.vue
+++ b/src/views/os-status/components/dataCard.vue
@@ -7,19 +7,15 @@
      </div>
      <div class="wordStyle">
        <span>总数据量:</span>
-        <span class="total-num">{{ totalDataNumber !== "" ? formatExactLargeNum(totalDataNumber) : "加载中..." }}</span>
+        <span class="total-num">{{ formatExactLargeNum(totalDataNumber) }}</span>
      </div>
      <div class="wordStyle">
        <span>采集的页面数量:</span>
-        <span class="total-num">
-          {{ totalPageNumber !== "" ? formatExactLargeNum(totalPageNumber) : "加载中..." }}</span
-        >
+        <span class="total-num"> {{ formatExactLargeNum(totalPageNumber) }}</span>
      </div>
      <div class="wordStyle">
        <span>采集的目标数量:</span>
-        <span class="total-num">
-          {{ totalTargetNumber !== "" ? formatExactLargeNum(totalTargetNumber) : "加载中..." }}</span
-        >
+        <span class="total-num"> {{ formatExactLargeNum(totalTargetNumber) }}</span>
      </div>
    </div>
    <div class="dataCard" @click="goToTaskRecordPage">
@@ -28,15 +24,15 @@
      </div>
      <div class="wordStyle">
        <span>任务执行成功统计:</span>
-        <span class="total-num">{{ successTask !== "" ? formatExactLargeNum(successTask) : "加载中..." }}</span>
+        <span class="total-num">{{ formatExactLargeNum(successTask) }}</span>
      </div>
      <div class="wordStyle">
        <span>任务执行失败统计:</span>
-        <span class="total-num">{{ failTask !== "" ? formatExactLargeNum(failTask) : "加载中..." }}</span>
+        <span class="total-num">{{ formatExactLargeNum(failTask) }}</span>
      </div>
      <div class="wordStyle">
        <span>任务异常数统计:</span>
-        <span class="total-num">{{ unusualTask !== "" ? formatExactLargeNum(unusualTask) : "加载中..." }}</span>
+        <span class="total-num">{{ formatExactLargeNum(unusualTask) }}</span>
      </div>
    </div>
    <div class="dataCard">
@@ -64,6 +60,7 @@ import { useRouter } from "vue-router";
 import { getStatsDataList, getSpiderTaskList, getPerformanceList } from "@/api/staticData";
 import { onMounted, ref } from "vue";
 import formatExactLargeNum from "@/utils/formatExactLargeNum";
+import { ElSkeleton } from "element-plus";

 const router = useRouter();
 const totalDataNumber = ref("");
@@ -129,16 +126,21 @@ onMounted(() => {
  border-radius: 5px;
 }

+/* 标题区 */
 .titleStyle {
-  font-size: 20px;
-  margin-top: 5%;
-  color: #ffffff;
+  color: #dff6ff;
+  font-size: 18px;
+  font-weight: 600;
+  text-align: center;
+  text-shadow: 0 0 8px rgba(100, 200, 255, 0.8);
+  letter-spacing: 2px;
+  margin-top: 10px;
 }

 .wordStyle {
  font-size: 18px;
  color: #ffffff;
-  margin-top: 2%;
+  margin-top: 1%;
  display: flex;
  margin-left: 15px;
  display: flex;
@@ -147,16 +149,19 @@ onMounted(() => {

 .textStyle {
  writing-mode: vertical-lr;
-  font-size: 26px;
+  font-size: 22px;
  letter-spacing: 3px;
  margin-left: 0.5%;
  color: #ffffff;
  font-weight: 500;
-  // display: flex;
 }

 .total-num {
+  color: #4edaff;
+  font-size: 16px;
+  font-weight: 600;
+  text-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
+  letter-spacing: 1px;
  margin-right: 30px;
-  color: skyblue;
 }
 </style>
--- a/src/views/os-status/components/qbDataMonitor.vue
+++ b/src/views/os-status/components/qbDataMonitor.vue
 <template>
-	<div class="flex gap-10">
+  <div class="flex">
    <span class="textStyle">QB数据管理</span>
    <!-- <div class="dataCard" @click="goToAllDataPage">
 			<div class="titleStyle">
@@ -29,80 +29,80 @@
 </template>

 <script lang="ts" setup>
-import { useRouter } from 'vue-router'
-const router = useRouter()
+import { useRouter } from "vue-router";
+const router = useRouter();

 defineProps({
  totalDataNumber: {
    type: String,
-		default: ''
+    default: "",
  },
  totalPageNumber: {
    type: String,
-		default: ''
+    default: "",
  },
  totalTargetNumber: {
    type: String,
-		default: ''
+    default: "",
  },
  successTask: {
    type: String,
-		default: ''
+    default: "",
  },
  failTask: {
    type: String,
-		default: ''
+    default: "",
  },
  unusualTask: {
    type: String,
-		default: ''
+    default: "",
  },
  speed: {
    type: String,
-		default: ''
+    default: "",
  },
  errorRate: {
    type: String,
-		default: ''
-	}
-})
+    default: "",
+  },
+});

 const goToAllDataPage = () => {
  router.push({
-		path: '/osDataDisplay/list',
+    path: "/osDataDisplay/list",
    query: {
-			mode: '综合数据',
-			jump: 'yes'
-		}
-	})
-}
+      mode: "综合数据",
+      jump: "yes",
+    },
+  });
+};
 const goToDSNDataPage = () => {
  router.push({
-		path: '/osDataDisplay/list',
+    path: "/osDataDisplay/list",
    query: {
-			mode: 'DSN数据',
-			jump: 'yes'
-		}
-	})
-}
+      mode: "DSN数据",
+      jump: "yes",
+    },
+  });
+};
 const goToITUDataPage = () => {
  router.push({
-		path: '/osDataDisplay/list',
+    path: "/osDataDisplay/list",
    query: {
-			mode: 'ITU数据',
-			jump: 'yes'
-		}
-	})
-}
+      mode: "ITU数据",
+      jump: "yes",
+    },
+  });
+};
 const goToSTDataPage = () => {
  router.push({
-		path: '/osDataDisplay/list',
+    path: "/osDataDisplay/list",
    query: {
-			mode: 'ST数据',
-			jump: 'yes'
-		}
-	})
-}
+      mode: "ST数据",
+      jump: "yes",
+    },
+  });
+};
 </script>

 <style lang="scss" scoped>
@@ -133,23 +133,24 @@ const goToSTDataPage = () => {
 }

 .titleStyle {
-	font-size: 30px;
+  font-size: 24px;
  margin-top: 5%;
-	color: #FFFFFF;
+  color: #ffffff;
 }

 .wordStyle {
  font-size: 20px;
-	color: #FFFFFF;
+  color: #ffffff;
  margin-top: 2%;
 }

 .textStyle {
  writing-mode: vertical-lr;
-	font-size: 26px;
+  font-size: 22px;
  letter-spacing: 3px;
  margin-left: 0.5%;
-	color: #FFFFFF;
+  color: #ffffff;
+  font-weight: 500;
  // display: flex;
 }
 </style>
--- a/src/views/os-status/components/taskCard.vue
+++ b/src/views/os-status/components/taskCard.vue
 <template>
-  <div class="flex gap-10">
+  <div class="flex">
    <span class="textStyle">任务统计</span>
    <div class="dataCard" @click="goToDSNTaskRecordPage">
      <div class="titleStyle">
@@ -175,15 +175,19 @@ onMounted(() => {
 }

 .titleStyle {
-  font-size: 20px;
-  margin-top: 5%;
-  color: #ffffff;
+  color: #dff6ff;
+  font-size: 18px;
+  font-weight: 600;
+  text-align: center;
+  text-shadow: 0 0 8px rgba(100, 200, 255, 0.8);
+  letter-spacing: 2px;
+  margin-top: 10px;
 }

 .wordStyle {
  font-size: 18px;
  color: #ffffff;
-  margin-top: 2%;
+  margin-top: 1%;
  display: flex;
  margin-left: 15px;
  display: flex;
@@ -192,15 +196,19 @@ onMounted(() => {

 .textStyle {
  writing-mode: vertical-lr;
-  font-size: 26px;
+  font-size: 22px;
  letter-spacing: 3px;
  margin-left: 0.5%;
  color: #ffffff;
-  // display: flex;
+  font-weight: 500;
 }

 .total-num {
+  color: #4edaff;
+  font-size: 16px;
+  font-weight: 600;
+  text-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
+  letter-spacing: 1px;
  margin-right: 30px;
-  color: skyblue;
 }
 </style>
--- a/src/views/os-status/index.vue
+++ b/src/views/os-status/index.vue
 <template>
  <div>
    <div>
+      <el-card style="margin-bottom: 0">
+        <div class="title">状态监控</div>
+        <div class="low-titme">Status Monitor</div>
+        <el-divider class="divider" style="margin-bottom: 0" />
+      </el-card>
      <div class="text-left timeStyle" />
      <div class="border-100">
        <statusMonitor />
      </div>
    </div>
  </div>
-  
 </template>

 <script setup lang="ts">
-import statusMonitor from './components/statusMonitor.vue'
+import statusMonitor from "./components/statusMonitor.vue";
 </script>

 <style lang="scss" scoped>
@@ -26,5 +30,18 @@ import statusMonitor from './components/statusMonitor.vue'
  border: 1.5px solid rgb(193, 188, 188);
 }

-
+.title {
+  text-align: left;
+  font-size: 18px;
+  font-weight: 500;
+  color: white;
+}
+.low-titme {
+  color: #ccc;
+  text-align: left;
+  margin-left: 20px;
+}
+.divider {
+  margin-top: 15px;
+}
 </style>
--- a/src/views/os-system/index.vue
+++ b/src/views/os-system/index.vue
@@ -19,6 +19,8 @@
        :cell-style="{ textAlign: 'center' }"
        :row-style="{ height: '58px' }"
        @selection-change="handleSelectionChange"
+        v-loading="tableData?.length == 0"
+        element-loading-background="rgba(48, 65, 86, 0.7)"
      >
        <el-table-column type="selection" width="40" />
        <el-table-column property="number" label="序号" width="55" type="index" />
@@ -84,8 +86,8 @@ import { getUserList } from "@/api/user.ts";
 import { DeleteMode } from "@/components/Delete/enum.ts";
 import { AddMode } from "./components/enum.ts";
 import { ElMessage } from "element-plus";
-const userId = ref<any>([]);
-const userIds = ref<any>();
+const userId = ref<number>(-1);
+const userIds = ref<number[]>([]);
 const nickName = ref<string>("");
 const userName = ref<string>("");
 const userRole = ref<number>(0);
@@ -95,7 +97,7 @@ const showDeleteDialog = ref(false);
 const deleteMode = ref<DeleteMode>(DeleteMode.SINGLE_DELETE);
 const dialogVisible = ref<boolean>(false);
 const mode = ref<AddMode>(AddMode.ADD_MODE);
-const tableData = ref();
+const tableData = ref([]);
 const pageObj = ref({
  total: 0,
  pageSize: 10,
@@ -117,11 +119,10 @@ const handleDelete = async (row: any) => {
  showDeleteDialog.value = true;
  deleteMode.value = DeleteMode.SINGLE_DELETE;
  userId.value = row.id;
-  console.log(userId.value);
 };
 // 批量删除用户的方法
 const handleBatchDelete = async () => {
-  if (userIds.value == undefined) {
+  if (!userIds.value || userIds.value.length === 0) {
    ElMessage({
      message: "请先选择要删除的用户",
      type: "warning",
@@ -153,7 +154,6 @@ const getUserListData = async () => {
  });
  tableData.value = userList.data.list;
  pageObj.value.total = userList.data.total;
-  console.log(userList);
 };
 onMounted(async () => {
  getUserListData();

--- a/src/views/os-taskInformation/components/taskCard.vue
+++ b/src/views/os-taskInformation/components/taskCard.vue
@@ -5,10 +5,9 @@
    <div class="text-left p-4 toolbarStyle">
      <div class="formStyle">
        <el-form inline>
-          <el-form-item>
-            <el-text class="mx-1" style="color: #fff">所属爬虫:</el-text>
-          </el-form-item>
-          <el-form-item>
+          <el-row>
+            <el-col :span="16" style="display: flex; padding-left: 40px">
+              <el-form-item label="所属爬虫:">
                <div>
                  <el-select
                    v-model="searchCondition.spiders"
@@ -25,47 +24,44 @@
                  </el-select>
                </div>
              </el-form-item>
+            </el-col>
+            <el-col :span="8" style="display: flex; justify-content: end">
              <el-form-item>
-            <el-space>
-              <el-button type="primary" @click="search">查询</el-button>
-              <el-button type="primary" @click="resetData">重置列表</el-button>
-              <el-button type="primary" @click="openTaskDialog">新建任务</el-button>
-            </el-space>
+                <el-button plain type="primary" @click="search">查询</el-button>
+                <el-button @click="resetData" style="margin-right: 20px">重置</el-button>
+                <el-button plain type="primary" @click="openTaskDialog">新建任务</el-button>
              </el-form-item>
+            </el-col>
+          </el-row>
        </el-form>
      </div>
    </div>
    <div class="cardStyle">
-      <!-- 加载状态优化：用专门的 loading 变量，避免依赖 taskList 长度 -->
-      <el-row v-loading="isLoading" element-loading-background="rgba(48, 65, 86, 0.7)">
-        <!-- 任务列表为空时显示提示，避免空循环 -->
      <div v-if="taskList.length === 0 && !isLoading" class="empty-tip">暂无任务数据</div>
-        <!-- 循环前确保 taskList 是数组，key 用安全的 id -->
-        <div class="taskCard p-6" v-for="task in taskList || []" :key="task?.id || task?.taskId">
-          <div class="taskContent">
-            <div>
-              <el-form-item class="form-item">
-                <!-- 安全访问 JSON 解析，避免 options 为 undefined 或 JSON 解析失败 -->
-                <span class="titleStyle">{{
-                  (task?.kwargs?.options && JSON.parse(task.kwargs.options).jobName) || "无名称"
-                }}</span>
-              </el-form-item>
+      <div
+        v-loading="taskList.length == 0"
+        element-loading-background="rgba(48, 65, 86, 0.7)"
+        class="taskCard p-6"
+        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
+          >
+          <el-divider style="margin-top: 5px"></el-divider>
        </div>
-            <div>
-              <el-form-item class="form-item">
-                <el-button type="primary" @click="editTask(task)" class="editButton" :disabled="!task?.id"
+        <div class="btns">
+          <el-button plain type="primary" @click="editTask(task)" class="editButton" :disabled="!task?.id"
            >编辑</el-button
          >
-                <el-button type="danger" @click="deleteTask(task)" class="deleteButton" :disabled="!task?.id"
+          <el-button plain type="danger" @click="deleteTask(task)" class="deleteButton" :disabled="!task?.id"
            >删除</el-button
          >
-              </el-form-item>
        </div>
-            <div class="wordStyle">
-              <el-form-item class="form-item">
-                <el-space>
+        <div class="info">
+          <div class="item">
            <span class="wordStyle">启用/停止: </span>
-                  <!-- 确保 task.status 有默认值，避免 v-model 绑定 undefined -->
            <el-switch
              v-model="task.status"
              :active-value="'running'"
@@ -73,41 +69,18 @@
              @change="(newStatus: any) => changeStatus(task, newStatus)"
              :disabled="!task?.id"
            />
-                </el-space>
-              </el-form-item>
          </div>
-            <div class="wordStyle">
-              <el-form-item class="form-item">
-                <el-space>
-                  <span class="wordStyle"
-                    >执行频率:
-                    <span style="color: skyblue">{{ parseCronExpression(task?.kwargs?.cron) || "未设置" }} </span>
-                  </span>
-                </el-space>
-              </el-form-item>
+          <div class="item">
+            <span class="wordStyle">执行频率: </span>
+            <span class="wordStyle">{{ parseCronExpression(task?.kwargs?.cron) || "未设置" }} </span>
          </div>
-            <div class="wordStyle">
-              <el-form-item class="form-item">
-                <el-space>
-                  <span class="wordStyle"
-                    >执行次数: <span style="color: skyblue">{{ formatExactLargeNum(task?.count || 0) }}</span>
-                  </span>
-                </el-space>
-              </el-form-item>
+          <div class="item">
+            <span class="wordStyle">执行次数: </span>
+            <span class="wordStyle">{{ formatExactLargeNum(task?.count || 0) }}</span>
          </div>
-            <div class="wordStyle">
-              <el-form-item class="form-item">
-                <el-space>
-                  <span class="wordStyle"
-                    >所属爬虫: <span style="color: skyblue"> {{ task?.kwargs?.spider || "未知" }}</span></span
-                  >
-                </el-space>
-              </el-form-item>
        </div>
      </div>
    </div>
-      </el-row>
-    </div>

    <addTaskDialog
      v-model:dialogVisible="showTaskDialog"
@@ -158,7 +131,6 @@ const searchCondition = ref({
  options: "",
 });

-const belongSpider = ref("");
 const taskName = ref("");
 const taskValue = ref("");
 const belongSpiderType = ref("");
@@ -198,16 +170,6 @@ const editTask = (task: any) => {
  showTaskDialog.value = true;
 };

-const goToTaskRecord = () => {
-  router.push({
-    path: "/osTaskRecord/list",
-    query: {
-      jump: "yes",
-      mode: "任务信息",
-    },
-  });
-};
-
 // 启动与停止任务的方法
 const changeStatus = async (task: any, newStatus: string) => {
  if (!task?.id) return; // 避免 task 为 undefined
@@ -377,6 +339,9 @@ onMounted(() => {
 </script>

 <style lang="scss" scoped>
+:deep(.el-form-item__label) {
+  color: white;
+}
 .cardStyle {
  margin-top: 1.5%;
  padding: 18px;
@@ -390,25 +355,25 @@ onMounted(() => {
  display: flex;
  flex-direction: column;
  align-items: center;
-  justify-content: center;
+  justify-content: start;
  height: 100%;
  gap: 6px;
  padding: 5px 0;
 }

+.task-name {
+  color: #fff !important;
+}
+
 /* 任务卡片样式 */
 .taskCard {
-  margin-left: 1%;
  background-image: url("@/assets/picture/box2.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
-  margin-bottom: 10px;
-  width: 380px;
  font-size: 20px;
  min-height: 240px;
+  min-width: 300px;
  border-radius: 7px;
-  display: flex;
-  flex-direction: column;
 }

 /* 减小表单的间距 */
@@ -417,10 +382,23 @@ onMounted(() => {
 }

 .taskCard .titleStyle {
-  font-size: 22px;
+  display: flex;
+  font-size: 20px;
  color: #ffffff;
 }

+.task-name {
+  color: #ccc;
+}
+
+.item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  margin: 8px 0;
+}
+
 .taskCard .wordStyle {
  font-size: 16px;
  color: #ffffff;
@@ -442,8 +420,6 @@ onMounted(() => {

 /* 表单样式 */
 .formStyle {
-  display: flex;
-  justify-content: space-around;
  margin-top: 0.5%;
  padding: 2px;
 }

--- a/src/views/os-taskInformation/index.vue
+++ b/src/views/os-taskInformation/index.vue
 <template>
  <div>
+    <el-card style="margin-bottom: 0">
+      <div class="title">任务信息</div>
+      <div class="low-titme">Task Information</div>
+      <el-divider class="divider" style="margin-bottom: 0" />
+    </el-card>
    <div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToTaskInformation" />
    <div class="m-t-8" />
    <div>
      <taskCard :spiderType="spiderType" failTask="10" unusualTask="1" />
-      <!-- <div class="pagination w-full flex flex-row-reverse pr-18 m-t-0">
-        <Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
-          @pagination="getData" />
-      </div> -->
    </div>
  </div>
 </template>

 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import Pagination from '@/components/pagination/index.vue'
-import taskCard from './components/taskCard.vue'
-import { useRouter } from 'vue-router'
-import { useRoute } from 'vue-router'
-import { getSpiderTaskList,getTaskData } from '@/api/spiderTask'
-import { AddMode } from './components/enum'
-
-const route = useRoute()
-const router = useRouter()
-const spiderType = ref<any>(route.query.spiderType)
-const taskValue = ref('')
-const taskList = ref([])
-const taskOptions = [
-  {
-    value: 'task1',
-    label: 'sk网',
-  },
-  {
-    value: 'task2',
-    label: 'nasa网',
-  },
-  {
-    value: 'task3',
-    label: '网',
-  },
-]
-const pageObj = ref({
-  total: 10,
-  pageSize: 10,
-  pageNo: 1
-})
+import { ref } from "vue";
+import taskCard from "./components/taskCard.vue";
+import { useRouter } from "vue-router";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+const router = useRouter();
+const spiderType = ref<any>(route.query.spiderType);

 const goToTaskInformation = () => {
-  if(route.query.page === 'spiderManager'){
-    router.push({ path: '/osSpiderManager/list' })
-  }else{
-    router.push({ path: '/osStatus/list' })
+  if (route.query.page === "spiderManager") {
+    router.push({ path: "/osSpiderManager/list" });
+  } else {
+    router.push({ path: "/osStatus/list" });
  }
-}
-
-onMounted(async () => {  
-  // if(route.query.spiderType){
-  //   spiderType.value = route.query.spiderType
-  // }
-})
+};
 </script>

 <style scoped>
+.title {
+  text-align: left;
+  font-size: 18px;
+  font-weight: 500;
+  color: white;
+}
+
+.low-titme {
+  color: #ccc;
+  text-align: left;
+  margin-left: 20px;
+}
+.divider {
+  margin-top: 15px;
+}
 /* 返回样式 */
 .backStyle {
  background-image: url("@/assets/picture/back.png");
@@ -85,7 +71,7 @@ onMounted(async () => {

 /* 文本样式 */
 .el-text {
-  color: #FFFFFF;
+  color: #ffffff;
 }

 /* 工具栏样式 */
@@ -129,7 +115,7 @@ onMounted(async () => {

 /* 修改el下拉框选项的字体颜色 */
 .el-select-dropdown__item {
-  color: #FFFFFF;
+  color: #ffffff;
 }

 /* 修改el下拉框选项选中时的文字颜色 */

--- a/src/views/os-taskRecord/index.vue
+++ b/src/views/os-taskRecord/index.vue
 <template>
  <div>
+    <el-card style="margin-bottom: 0">
+      <div class="title">任务执行记录</div>
+      <div class="low-titme">Task Record</div>
+      <el-divider class="divider" style="margin-bottom: 0" />
+    </el-card>
    <div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToStatus" />
    <div class="m-t-7" />
-    <div class="text-left p-6 toolbarStyle">
+    <div class="text-left toolbarStyle">
      <div class="formStyle">
+        <div class="form-content">
          <el-form inline>
-          <el-form-item>
-            <el-text class="mx-1">时间:</el-text>
-          </el-form-item>
-          <el-form-item>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="时间:">
                  <el-config-provider :locale="zhCn">
                    <el-date-picker
                      v-model="timeValue"
@@ -22,15 +27,18 @@
                    />
                  </el-config-provider>
                </el-form-item>
+              </el-col>
+              <el-col :span="12" style="display: flex; justify-content: end">
                <el-form-item>
-            <el-space>
-              <el-button type="primary" @click="searchData">查询</el-button>
-              <el-button type="primary" @click="getData">重置表格</el-button>
-            </el-space>
+                  <el-button plain type="primary" @click="searchData">查询</el-button>
+                  <el-button plain @click="getData">重置</el-button>
                </el-form-item>
+              </el-col>
+            </el-row>
          </el-form>
        </div>
      </div>
+    </div>
    <div class="m-t-10" />
    <div class="table-content">
      <div>
@@ -97,7 +105,6 @@ zhCn.el.pagination.pagesize = "条/页";
 zhCn.el.pagination.pageClassifier = "页";
 const route = useRoute();
 const router = useRouter();
-const taskValue = ref("");
 const timeValue = ref("");
 const taskOptions = [
  {
@@ -174,6 +181,9 @@ onMounted(() => {
 </script>

 <style scoped>
+:deep(.el-form-item__label) {
+  color: white;
+}
 /* 工具栏样式 */
 .toolbarStyle {
  background-image: url("@/assets/picture/box3.png");
@@ -183,8 +193,6 @@ onMounted(() => {

 /* 表格样式 */
 .formStyle {
-  display: flex;
-  justify-content: space-around;
  padding: 3px;
 }

@@ -197,6 +205,11 @@ onMounted(() => {
  padding: 0 10px;
 }

+.form-content {
+  margin-top: 20px;
+  padding-left: 50px;
+}
+
 .backStyle {
  background-image: url("@/assets/picture/back.png");
  background-size: 100% 100%;
@@ -206,6 +219,22 @@ onMounted(() => {
  display: flex;
  margin-left: 0.8%;
 }
+
+.title {
+  text-align: left;
+  font-size: 18px;
+  font-weight: 500;
+  color: white;
+}
+
+.low-titme {
+  color: #ccc;
+  text-align: left;
+  margin-left: 20px;
+}
+.divider {
+  margin-top: 15px;
+}
 </style>
 <style>
 /* 修改el选择器的样式 */

--- a/src/views/system/SystemIndex.vue
+++ b/src/views/system/SystemIndex.vue
-<template>
-  <h1>system index</h1>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-
-</script>