feat:完成了任务执行记录静态页面

src/components/pagination/index.vue

+<!-- 基于 ruoyi-vue3 的 Pagination 重构，核心是简化无用的属性，并使用 ts 重写 -->
+<template>
+  <el-pagination
+    v-show="total > 0"
+    v-model:current-page="currentPage"
+    v-model:page-size="pageSize"
+    :background="true"
+    :page-sizes="[5,10, 20, 30, 50, 100]"
+    :pager-count="pagerCount"
+    :total="total"
+    class="mt-4"
+    layout="total, sizes, prev, pager, next, jumper"
+    @size-change="handleSizeChange"
+    @current-change="handleCurrentChange"
+  />
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue'
+defineOptions({ name: 'Pagination' })
+
+
+
+const props = defineProps({
+  // 总条目数
+  total: {
+    required: true,
+    type: Number
+  },
+  // 当前页数：pageNo
+  page: {
+    type: Number,
+    default: 1
+  },
+  // 每页显示条目个数：pageSize
+  limit: {
+    type: Number,
+    default: 20
+  },
+  // 设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠
+  // 移动端页码按钮的数量端默认值 5
+  pagerCount: {
+    type: Number,
+    default: document.body.clientWidth < 992 ? 5 : 7
+  }
+})
+
+const emit = defineEmits(['update:page', 'update:limit', 'pagination'])
+const currentPage = computed({
+  get() {
+    return props.page
+  },
+  set(val) {
+    // 触发 update:page 事件，更新 limit 属性，从而更新 pageNo
+    emit('update:page', val)
+  }
+})
+const pageSize = computed({
+  get() {
+    return props.limit
+  },
+  set(val) {
+    // 触发 update:limit 事件，更新 limit 属性，从而更新 pageSize
+    emit('update:limit', val)
+  }
+})
+const handleSizeChange = (val:number) => {
+  // 如果修改后超过最大页面，强制跳转到第 1 页
+  if (currentPage.value * val > props.total) {
+    currentPage.value = 1
+  }
+  // 触发 pagination 事件，重新加载列表
+  emit('pagination', { page: currentPage.value, limit: val })
+}
+const handleCurrentChange = (val:number) => {
+  // 触发 pagination 事件，重新加载列表
+  emit('pagination', { page: val, limit: pageSize.value })
+}
+</script>

src/components/search/index.vue

+<template>
+    <div>
+        <span>关键词搜索</span>
+        <el-input v-model="input2" style="width: 240px" placeholder="Search" :prefix-icon="Search" />
+    </div>
+</template>
+
+<script>
+const props = defineProps({
+    to: {
+        type: String,
+        required: true
+    }
+})
+
+</script>
\ No newline at end of file

src/views/os-status/components/dataCard.vue

 <template>
+    <div class="flex gap-21">
         <div class="dataCard">
             <div class="titleStyle">
                 <span>数据统计</span>
@@ -13,6 +14,33 @@
                 <span>采集的目标数量: {{ totalTargetNumber }} 个</span>
             </div>
         </div>
+        <div class="dataCard">
+            <div class="titleStyle">
+                <span>任务执行统计</span>
+            </div>
+            <div class="wordStyle">
+                <span>任务执行成功统计: {{ successTask }} 个</span>
+            </div>
+            <div class="wordStyle">
+                <span>任务执行失败统计: {{ failTask }} 个</span>
+            </div>
+            <div class="wordStyle">
+                <span>任务异常数统计: {{ unusualTask }} 个</span>
+            </div>
+        </div>
+        <div class="dataCard">
+            <div class="titleStyle">
+                <span>性能统计</span>
+            </div>
+            <div class="wordStyle">
+                <span>采集速度: {{ speed }}</span>
+            </div>
+            <div class="wordStyle">
+                <span>错误率: {{ errorRate }}% </span>
+            </div>
+        </div>
+    </div>
+
 
 </template>
 
@@ -29,6 +57,26 @@ defineProps({
     totalTargetNumber: {
         type: String,
         default: ''
+    },
+    successTask: {
+        type: String,
+        default: ''
+    },
+    failTask: {
+        type: String,
+        default: ''
+    },
+    unusualTask: {
+        type: String,
+        default: ''
+    },
+    speed: {
+        type: String,
+        default: ''
+    },
+    errorRate: {
+        type: String,
+        default: ''
     }
 })
 </script>
@@ -36,17 +84,16 @@ defineProps({
 <style lang="scss" scoped>
 .dataCard {
     background: #eae6e6;
-    margin-bottom: 20px;
     border: 1.5px solid rgb(193, 188, 188);
     width: 400px;
-    // position: relative;
-    // left: 80px;
     height: 14vh;
     border-radius: 5px;
-    .titleStyle{
+
+    .titleStyle {
         font-size: 22px;
     }
-    .wordStyle{
+
+    .wordStyle {
         font-size: 16px;
     }
 }

src/views/os-status/components/integratedMonitoringBox.vue

 <!-- 综合监控盒子组件 -->
 <template>
     <div class="card">
+        <div class="text-left textStyle ">
+            <span>综合监控</span>
+        </div>
+            <dataCard>
 
+            </dataCard>
     </div>
 </template>
 
 <script lang="ts" setup>
 import dataCard from './dataCard.vue'
-import taskCard from './taskCard.vue'
-import powerCard from './powerCard.vue'
+
 
 defineProps({
     title: {
@@ -29,7 +33,8 @@ defineProps({
     border: 1.5px solid rgb(193, 188, 188);
     height: 13.5vh;
     width: 95.5%;
-
+    display: flex;
+    gap: 21.5px;
     .textStyle {
         writing-mode: vertical-lr;
         font-size: 24px;
@@ -37,16 +42,5 @@ defineProps({
         text-align: center;
     }
 
-    .layoutStyle {
-        // margin-top: -110px;
-        background: #eae6e6;
-        margin-bottom: 20px;
-        border: 1.5px solid rgb(193, 188, 188);
-        width: 400px;
-        // left: 16px;
-        font-size: 20px;
-        height: 15vh;
-        border-radius: 5px;
-    }
 }
 </style>

src/views/os-status/components/powerCard.vue

-<!-- 性能统计卡片组件 -->
-<template>
-    <div class="powerCard">
-        <div class="titleStyle">
-            <span>性能统计</span>
-        </div>
-         <div class="wordStyle">
-            <span>采集速度: {{ speed }}</span>
-        </div>
-         <div class="wordStyle">
-            <span>错误率:  {{ errorRate }}% </span>
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-defineProps({
-    speed: {
-        type: String,
-        default: ''
-    },
-    errorRate: {
-        type: String,
-        default: ''
-    }
-})
-</script>
-
-<style lang="scss" scoped>
-.powerCard {
-    background: #eae6e6;
-    margin-bottom: 20px;
-    border: 1.5px solid rgb(193, 188, 188);
-    width: 400px;
-    position: absolute;
-    left: 70.5%;
-    height: 14vh;
-    text-align: center;
-    border-radius: 5px;
-    .titleStyle{
-        font-size: 22px;
-    }
-    .wordStyle{
-        font-size: 16px;
-    }
-}
-</style>

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

-<!-- 任务执行统计卡片组件 -->
-<template>
-    <div class="taskCard">
-        <div class="titleStyle">
-            <span>任务执行统计</span>
-        </div>
-        <div class="wordStyle">
-            <span>任务执行成功统计: {{ successTask }} 个</span>
-        </div>
-        <div class="wordStyle">
-            <span>任务执行失败统计: {{ failTask }} 个</span>
-        </div>
-        <div class="wordStyle">
-            <span>任务异常数统计: {{ unusualTask }} 个</span>
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-defineProps({
-    successTask: {
-        type: String,
-        default: ''
-    },
-    failTask: {
-        type: String,
-        default: ''
-    },
-    unusualTask: {
-        type: String,
-        default: ''
-    }
-})
-</script>
-
-<style lang="scss" scoped>
-.taskCard {
-    background: #eae6e6;
-    margin-bottom: 20px;
-    border: 1.5px solid rgb(193, 188, 188);
-    width: 400px;
-    // position: absolute;
-    // left: 38.5%;
-    font-size: 20px;
-    height: 14vh;
-    border-radius: 5px;
-    .titleStyle{
-        font-size: 22px;
-    }
-    .wordStyle{
-        font-size: 16px;
-    }
-}
-</style>

src/views/os-status/components/taskMonitoringBox.vue

@@ -4,7 +4,7 @@
         <div class="text-left textStyle ">
             <span>任务监控</span>
         </div>
-        <div class="flex flex-wrap rightBox">
+        <div class="flex flex-wrap ">
             <taskMonitoringCard></taskMonitoringCard>
         </div>
     </div>
@@ -44,11 +44,6 @@ defineProps({
         // margin-top: -1.5%;
         text-align: center;
     }
-
-    .rightBox{
-        position: relative;
-        left: 60px;
-    }
 }
 
 

src/views/os-status/components/taskMonitoringCard.vue

 <!-- 任务执行统计卡片组件 -->
 <template>
-    <div class="taskCard m-r-22" v-for="i in options" :key="i">
+    <div class="taskCard m-r-21" v-for="i in options" :key="i.value">
         <div class="titleStyle">
             <span>任务</span>
             <span> 任务状况:</span>
@@ -86,7 +86,6 @@ const options = [
     margin-bottom: 20px;
     border: 1.5px solid rgb(193, 188, 188);
     width: 400px;
-    // left: 16px;
     font-size: 20px;
     height: 15vh;
     border-radius: 5px;

src/views/os-taskInformation/index.vue

+<template>
+111
+</template>
+
+<script>
+
+</script>
\ No newline at end of file

src/views/os-taskRecord/index.vue

+<template>
+    <div class="text-left p-10">
+        <el-form inline>
+            <el-form-item label="任务选择:">
+                <el-select v-model="taskValue" placeholder=" " style="width: 240px">
+                    <el-option v-for="item in taskOptions" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="异常选择:">
+                <el-select v-model="errorValue" placeholder=" " style="width: 240px">
+                    <el-option v-for="item in taskOptions" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="时间:">
+                <el-date-picker v-model="timeValue" type="datetimerange" range-separator="-" start-placeholder="开始时间"
+                    end-placeholder="结束时间" />
+            </el-form-item>
+            <el-form-item>
+                <el-space>
+                    <el-button type="primary">查询</el-button>
+                    <el-button type="danger">批量确认</el-button>
+                </el-space>
+            </el-form-item>
+        </el-form>
+    </div>
+    <el-table :data="tableData" style="width: 100%" border>
+        <el-table-column type="selection" width="55" />
+        <el-table-column property="name" label="序号" width="60" />
+        <el-table-column property="address" label="任务名称" width="150" show-overflow-tooltip />
+        <el-table-column property="address" label="执行结果" width="150" show-overflow-tooltip />
+        <el-table-column property="address" label="收集数" width="130" show-overflow-tooltip />
+        <el-table-column property="address" label="丢弃数" width="130" show-overflow-tooltip />
+        <el-table-column property="address" label="异常信息" width="170" show-overflow-tooltip />
+        <el-table-column property="address" label="持续时间" width="170" show-overflow-tooltip />
+        <el-table-column property="address" label="开始时间" width="170" show-overflow-tooltip />
+        <el-table-column property="address" label="结束时间" width="170" show-overflow-tooltip />
+        <el-table-column label="操作">
+            <template #default="scope">
+                <el-button size="small" type="success" @click="handleDetails(scope.row)">
+                    详情
+                </el-button>
+                <el-button size="small" type="danger" @click="handleConfirm(scope.row)">
+                    异常确认
+                </el-button>
+            </template>
+        </el-table-column>
+    </el-table>
+    <div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
+        <Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
+            @pagination="getData" />
+        <!-- <el-pagination background v-model:current-page="currentPage4" v-model:page-size="pageSize4"
+            :page-sizes="[10, 20, 50, 100]" :size="paginationSize" :disabled="disabled"
+            layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
+            @current-change="handleCurrentChange" /> -->
+    </div>
+
+
+
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import Pagination from '@/components/pagination/index.vue'
+const errorValue = ref('')
+const taskValue = ref('')
+const timeValue = ref('')
+const taskOptions = [
+    {
+        value: 'task1',
+        label: 'sk网',
+    },
+    {
+        value: 'task2',
+        label: 'nasa网',
+    },
+    {
+        value: 'task3',
+        label: '网',
+    },
+]
+const tableData = ref([
+    {
+        name: '1',
+        address: 'sk网',
+        address1: '成功',
+        address2: '100',
+        address3: '0',
+        address4: '无',
+        address5: '10s',
+        address6: '2023-05-13 10:00:00',
+    }
+])
+const pageObj = ref({
+    total: 10,
+    pageSize: 10,
+    pageNo: 1
+})
+const paginationSize = ref('default')
+const disabled = ref(false)
+const background = ref(false)
+const currentPage4 = ref(4)
+const pageSize4 = ref(10)
+const handleSizeChange = (val: number) => {
+}
+const handleCurrentChange = (val: number) => {
+}
+const handleDetails = (row: any) => {
+    console.log(row);
+}
+
+const handleConfirm = (row: any) => {
+    console.log(row);
+}
+
+const getData = () => {
+    console.log('getData');
+}
+</script>
+
+<style scoped></style>