Skip to content

F
fk-spider-web
Commit 0c43dc2e by yzh
Options

feat:完成了任务监控页面

parent 96c336da
Showing with 445 additions and 18 deletions
src/layout/components/Sidebar/SidebarItem.vue
...@@ -35,6 +35,8 @@ const alwaysShowRootMenu = computed(() => { ...@@ -35,6 +35,8 @@ const alwaysShowRootMenu = computed(() => {
// 解析路径 // 解析路径
const resolvePath = (routePath: string) => { const resolvePath = (routePath: string) => {
console.log(routePath,'222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222');
if (isExternal(routePath)) { if (isExternal(routePath)) {
return routePath return routePath
} }
...@@ -78,7 +80,7 @@ const hasOneShowingChild = (children: MenuItem[] = [], parent: MenuItem): boolea ...@@ -78,7 +80,7 @@ const hasOneShowingChild = (children: MenuItem[] = [], parent: MenuItem): boolea
return false return false
} }
onMounted(()=>{ onMounted(() => {
// console.log(props.item,'555555555555555555'); // console.log(props.item,'555555555555555555');
// console.log(onlyOneChild.value,'6666666666666666666666'); // console.log(onlyOneChild.value,'6666666666666666666666');
}) })
...@@ -86,13 +88,10 @@ onMounted(()=>{ ...@@ -86,13 +88,10 @@ onMounted(()=>{
<template> <template>
<div v-if="!item.meta?.hidden" class="sidebar-item-container"> <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"> <template
<app-link v-if="hasOneShowingChild(item.children as MenuItem[], item) && (!onlyOneChild?.children?.length || onlyOneChild?.meta?.noShowingChildren) && !alwaysShowRootMenu">
v-if="onlyOneChild?.meta" <app-link v-if="onlyOneChild?.meta" :to="resolvePath(onlyOneChild.path)" class="sidebar-link">
:to="resolvePath(onlyOneChild.path)" <el-menu-item :index="resolvePath(onlyOneChild.path)">
class="sidebar-link"
>
<el-menu-item :index="resolvePath(onlyOneChild.path)" >
<el-icon v-if="onlyOneChild.meta?.icon"> <el-icon v-if="onlyOneChild.meta?.icon">
<component :is="onlyOneChild.meta.icon" /> <component :is="onlyOneChild.meta.icon" />
</el-icon> </el-icon>
...@@ -108,14 +107,8 @@ onMounted(()=>{ ...@@ -108,14 +107,8 @@ onMounted(()=>{
</el-icon> </el-icon>
<span v-if="item.meta?.title">{{ item.meta.title }}</span> <span v-if="item.meta?.title">{{ item.meta.title }}</span>
</template> </template>
<sidebar-item <sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child"
v-for="child in item.children" :base-path="resolvePath(child.path)" class="nest-menu" />
:key="child.path"
:is-nest="true"
:item="child"
:base-path="resolvePath(child.path)"
class="nest-menu"
/>
</el-sub-menu> </el-sub-menu>
</div> </div>
</template> </template>
...@@ -125,7 +118,8 @@ onMounted(()=>{ ...@@ -125,7 +118,8 @@ onMounted(()=>{
text-decoration: none; text-decoration: none;
} }
.el-menu-item, .el-sub-menu { .el-menu-item,
.el-sub-menu {
background-color: transparent !important; background-color: transparent !important;
} }
</style> </style>
src/router/index.ts
...@@ -220,7 +220,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [ ...@@ -220,7 +220,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
} as unknown as RouteRecordRaw, } as unknown as RouteRecordRaw,
{ {
path: "os-taskInformation", path: "/os-taskInformation",
component: Layout, component: Layout,
children: [ children: [
{ {
......
src/views/os-status/components/dataCard.vue 0 → 100644
<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 0 → 100644
<!-- 综合监控盒子组件 -->
<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 0 → 100644
<!-- 性能统计卡片组件 -->
<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 0 → 100644
<!-- 任务执行统计卡片组件 -->
<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 0 → 100644
<!-- 任务监控盒子组件 -->
<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 0 → 100644
<!-- 任务执行统计卡片组件 -->
<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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment