feat:完成了任务监控页面

src/layout/components/Sidebar/SidebarItem.vue

@@ -35,6 +35,8 @@ const alwaysShowRootMenu = computed(() => {
 
 // 解析路径
 const resolvePath = (routePath: string) => {
+  console.log(routePath,'222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222');
+  
   if (isExternal(routePath)) {
     return routePath
   }
@@ -78,7 +80,7 @@ const hasOneShowingChild = (children: MenuItem[] = [], parent: MenuItem): boolea
   return false
 }
 
-onMounted(()=>{
+onMounted(() => {
   // console.log(props.item,'555555555555555555');
   // console.log(onlyOneChild.value,'6666666666666666666666');
 })
@@ -86,13 +88,10 @@ onMounted(()=>{
 
 <template>
   <div v-if="!item.meta?.hidden" class="sidebar-item-container">
-    <template v-if="hasOneShowingChild(item.children as MenuItem[], item) && (!onlyOneChild?.children?.length || onlyOneChild?.meta?.noShowingChildren) && !alwaysShowRootMenu">
-      <app-link
-        v-if="onlyOneChild?.meta"
-        :to="resolvePath(onlyOneChild.path)"
-        class="sidebar-link"
-      >
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" >
+    <template
+      v-if="hasOneShowingChild(item.children as MenuItem[], item) && (!onlyOneChild?.children?.length || onlyOneChild?.meta?.noShowingChildren) && !alwaysShowRootMenu">
+      <app-link v-if="onlyOneChild?.meta" :to="resolvePath(onlyOneChild.path)" class="sidebar-link">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)">
           <el-icon v-if="onlyOneChild.meta?.icon">
             <component :is="onlyOneChild.meta.icon" />
           </el-icon>
@@ -108,14 +107,8 @@ onMounted(()=>{
         </el-icon>
         <span v-if="item.meta?.title">{{ item.meta.title }}</span>
       </template>
-      <sidebar-item
-        v-for="child in item.children"
-        :key="child.path"
-        :is-nest="true"
-        :item="child"
-        :base-path="resolvePath(child.path)"
-        class="nest-menu"
-      />
+      <sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child"
+        :base-path="resolvePath(child.path)" class="nest-menu" />
     </el-sub-menu>
   </div>
 </template>
@@ -125,7 +118,8 @@ onMounted(()=>{
   text-decoration: none;
 }
 
-.el-menu-item, .el-sub-menu {
+.el-menu-item,
+.el-sub-menu {
   background-color: transparent !important;
 }
 </style>

src/router/index.ts

@@ -220,7 +220,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
   } as unknown as RouteRecordRaw,
 
   {
-    path: "os-taskInformation",
+    path: "/os-taskInformation",
     component: Layout,
     children: [
       {

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

+<template>
+    <div class="dataCard">
+        <div class="titleStyle">
+            <span>数据统计</span>
+        </div>
+        <div class="wordStyle">
+            <span>总数据量: {{  totalDataNumber  }} 条</span>
+        </div>
+        <div class="wordStyle">
+            <span>采集的页面数量: {{ totalPageNumber }} 页</span>
+        </div>
+        <div class="wordStyle">
+            <span>采集的目标数量: {{ totalTargetNumber }} 个</span>
+        </div>
+    </div>
+
+</template>
+
+<script lang="ts" setup>
+defineProps({
+    totalDataNumber: {
+        type: String,
+        default: ''
+    },
+    totalPageNumber: {
+        type: String,
+        default: ''
+    },
+    totalTargetNumber: {
+        type: String,
+        default: ''
+    }
+})
+</script>
+
+<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{
+        font-size: 22px;
+    }
+    .wordStyle{
+        font-size: 16px;
+    }
+}
+</style>

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

+<!-- 综合监控盒子组件 -->
+<template>
+    <div class="card">
+       
+    </div>
+</template>
+
+<script lang="ts" setup>
+import dataCard from './dataCard.vue'
+import taskCard from './taskCard.vue'
+import powerCard from './powerCard.vue'
+
+defineProps({
+    title: {
+        type: String,
+        default: ''
+    },
+    desc: {
+        type: String,
+        default: ''
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.card {
+    background: #ffffff;
+    // margin-bottom: 20px;
+    border: 1.5px solid rgb(193, 188, 188);
+    height: 13.5vh;
+    width: 95.5%;
+
+    .textStyle {
+        writing-mode: vertical-lr;
+        font-size: 24px;
+        letter-spacing: 3px;
+        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

+<!-- 任务监控盒子组件 -->
+<template>
+    <div class="card">
+        <div class="text-left textStyle ">
+            <span>任务监控</span>
+        </div>
+        <div class="flex flex-wrap rightBox">
+            <taskMonitoringCard></taskMonitoringCard>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+
+import taskMonitoringCard from './taskMonitoringCard.vue'
+
+defineProps({
+    title: {
+        type: String,
+        default: ''
+    },
+    desc: {
+        type: String,
+        default: ''
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.card {
+    background: #ffffff;
+    margin-top: 12px;
+    border: 1.5px solid rgb(193, 188, 188);
+    height: 53vh;
+    width: 95.5%;
+    display: flex;
+    gap: 20px;
+    // flex-wrap: wrap;
+    
+    .textStyle {
+        writing-mode: vertical-lr;
+        font-size: 24px;
+        letter-spacing: 3px;
+        // margin-top: -1.5%;
+        text-align: center;
+    }
+
+    .rightBox{
+        position: relative;
+        left: 60px;
+    }
+}
+
+
+</style>

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

+<!-- 任务执行统计卡片组件 -->
+<template>
+    <div class="taskCard m-r-22" v-for="i in options" :key="i">
+        <div class="titleStyle">
+            <span>任务</span>
+            <span> 任务状况:</span>
+        </div>
+        <div class="wordStyle">
+            <span>数据量: {{ successTask }} 条; </span>
+            <span> 采集页面数量: {{ successTask }} 个</span>
+        </div>
+        <div class="wordStyle">
+            <span>采集的目标数量: {{ failTask }} 个; </span>
+            <span> 任务执行成功统计: {{ failTask }} 个</span>
+        </div>
+        <div class="wordStyle">
+            <span>任务执行失败统计: {{ failTask }} 个; </span>
+            <span> 任务异常数统计: {{ unusualTask }} 个</span>
+        </div>
+        <div class="wordStyle">
+            <span>采集速度: {{ failTask }} ;</span>
+            <span> 错误率: {{ unusualTask }} %</span>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+    successTask: {
+        type: String,
+        default: ''
+    },
+    failTask: {
+        type: String,
+        default: ''
+    },
+    unusualTask: {
+        type: String,
+        default: ''
+    }
+})
+
+const options = [
+    {
+        value: 'year',
+        label: '近一年',
+    },
+    {
+        value: 'month',
+        label: '近一月',
+    },
+    {
+        value: 'week',
+        label: '近一周',
+    },
+    {
+        value: 'day',
+        label: '近一日',
+    },
+    {
+        value: 'year',
+        label: '近一年',
+    },
+    {
+        value: 'month',
+        label: '近一月',
+    },
+    {
+        value: 'week',
+        label: '近一周',
+    },
+    {
+        value: 'day',
+        label: '近一日',
+    },
+    {
+        value: 'year',
+        label: '近一年',
+    },
+]
+</script>
+
+<style lang="scss" scoped>
+.taskCard {
+    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;
+    .titleStyle {
+        font-size: 22px;
+    }
+
+    .wordStyle {
+        font-size: 16px;
+    }
+}
+</style>

src/views/os-status/index.vue

+<template>
+  <div class="text-left timeStyle">
+    <el-form-item label="时间">
+      <el-select v-model="timeValue" placeholder=" " style="width: 300px" @change="changeTime" clearable
+        size="default">
+        <el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+    </el-form-item>
+  </div>
+
+  <div class="border-100">
+    <integratedMonitoringBox>
+  </integratedMonitoringBox>
+
+  <taskMonitoringBox>
+  </taskMonitoringBox>
+  </div>
+  
+  <div>
+    
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import integratedMonitoringBox from './components/integratedMonitoringBox.vue'
+import taskMonitoringBox from './components/taskMonitoringBox.vue'
+
+const loading = ref(false);
+const statusList = ref([]);
+const title = ref('   ');
+const timeValue = ref();
+const timeOptions = [
+  {
+    value: 'year',
+    label: '近一年',
+  },
+  {
+    value: 'month',
+    label: '近一月',
+  },
+  {
+    value: 'week',
+    label: '近一周',
+  },
+  {
+    value: 'day',
+    label: '近一日',
+  },
+]
+onMounted(() => {
+
+});
+
+const changeTime = () => {
+  console.log(timeValue.value);
+}
+</script>
+
+<style lang="scss" scoped>
+.timeStyle {
+  margin-top: 10px;
+  padding: 20px;
+}
+
+.integratedMonitoringBox {
+  background: #ffffff;
+  margin-bottom: 20px;
+  border: 1.5px solid rgb(193, 188, 188);
+}
+</style>