Skip to content

F
fk-spider-web
Commit aafd1af0 by yzh
Options

feat：完成了状态监控静态页面

parent bb285481
Showing with 437 additions and 238 deletions
src/layout/components/AppMain.vue
......@@ -17,6 +17,9 @@ const key = computed(() => route.path)
<style scoped>
.app-main {
/*50 = navbar */
background-image: url("@/assets/picture/background1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
min-height: calc(100vh - 50px);
width: 100%;
position: relative;
......
src/router/index.ts
......@@ -227,7 +227,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
children: [
{
path: "list",
name: "statusMonitor",
name: "taskManager",
component: () => import("@/views/os-taskManager/index.vue"),
meta: { title: "任务管理", icon: "Key" }
},
......
src/styles/_sidebar.scss
......@@ -76,7 +76,7 @@
.hideSidebar {
.sidebar-container {
width: 54px !important;
width: 60px !important;
}
.main-container {
......
src/views/os-status/components/dataCard.vue
<template>
<div class="flex gap-21">
<div class="flex gap-10">
<div class="dataCard">
<div class="titleStyle">
<span>数据统计</span>
......@@ -33,15 +33,17 @@
<span>性能统计</span>
</div>
<div class="wordStyle">
<span>采集速度: {{ speed }}</span>
<span>平均成功率: {{ speed }}%</span>
</div>
<div class="wordStyle">
<span>错误率: {{ errorRate }}% </span>
<span>平均错误率: {{ errorRate }}% </span>
</div>
<div class="wordStyle">
<span>平均异常率: {{ errorRate }}% </span>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
......@@ -83,18 +85,25 @@ defineProps({
<style lang="scss" scoped>
.dataCard {
background: #c6ebfc;
border: 1.5px solid rgb(193, 188, 188);
width: 400px;
height: 14vh;
background-image: url("@/assets/picture/box2.png");
background-size: 100% 100%;
background-repeat: no-repeat;
// background: #c6ebfc;
// border: 1.5px solid rgb(193, 188, 188);
width: 360px;
height: 100%;
border-radius: 5px;
// min-width: 200px;
.titleStyle {
font-size: 22px;
}
}
.wordStyle {
font-size: 16px;
}
.titleStyle {
font-size: 34px;
margin-top: 3.5%;
color: #FFFFFF;
}
.wordStyle {
font-size: 24px;
color: #FFFFFF;
}
</style>
src/views/os-status/components/integratedMonitoringBox.vue deleted 100644 → 0
<!-- 综合监控盒子组件 -->
<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'
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%;
display: flex;
gap: 21.5px;
.textStyle {
writing-mode: vertical-lr;
font-size: 24px;
letter-spacing: 3px;
text-align: center;
}
}
</style>
src/views/os-status/components/qbDataMonitor.vue 0 → 100644
<template>
<div class="flex gap-10">
<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>
<div class="dataCard">
<div class="titleStyle">
<span>DSN数据</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>ITU数据</span>
</div>
<div class="wordStyle">
<span>平均成功率: {{ speed }}%</span>
</div>
<div class="wordStyle">
<span>平均错误率: {{ errorRate }}% </span>
</div>
<div class="wordStyle">
<span>平均异常率: {{ errorRate }}% </span>
</div>
</div>
<div class="dataCard">
<div class="titleStyle">
<span>ST数据</span>
</div>
<div class="wordStyle">
<span>总数据量: {{ totalDataNumber }} 条</span>
</div>
<div class="wordStyle">
<span>采集的页面数量: {{ totalPageNumber }} 页</span>
</div>
<div class="wordStyle">
<span>采集的目标数量: {{ totalTargetNumber }} 个</span>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
defineProps({
totalDataNumber: {
type: String,
default: ''
},
totalPageNumber: {
type: String,
default: ''
},
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>
<style lang="scss" scoped>
.dataCard {
background-image: url("@/assets/picture/box2.png");
background-size: 100% 100%;
background-repeat: no-repeat;
// background: #c6ebfc;
// border: 1.5px solid rgb(193, 188, 188);
width: 280px;
height: 100%;
border-radius: 5px;
}
.titleStyle {
font-size: 34px;
margin-top: 3.5%;
color: #FFFFFF;
}
.wordStyle {
font-size: 24px;
color: #FFFFFF;
}
</style>
src/views/os-status/components/statusMonitor.vue 0 → 100644
<template>
<div class="card-container">
<div class="monitoringCard">
<!-- <img src="@/assets/picture/box1.png" alt="Description of the image" style="max-width: 100%; height: auto;"> -->
<span class="textStyle">数据统计</span>
<div class="data-card-wrapper">
<dataCard></dataCard>
</div>
</div>
<div class="taskCard">
<span class="textStyle">任务统计</span>
<div class="data-card-wrapper">
<taskCard></taskCard>
</div>
</div>
<div class="qbCard">
<span class="textStyle">QB数据管理</span>
<div class="data-card-wrapper">
<qbCard></qbCard>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import dataCard from './dataCard.vue'
import taskCard from '@/views/os-status/components/taskCard.vue';
import qbCard from '@/views/os-status/components/qbDataMonitor.vue';
defineProps({
title: {
type: String,
default: ''
},
desc: {
type: String,
default: ''
}
})
</script>
<style lang="scss" scoped>
.card-container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10px;
gap: 30px;
}
.monitoringCard {
background-image: url("@/assets/picture/box1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
// background: #ffffff;
// border: 1.7px solid rgb(193, 188, 188);
height: 22.5vh;
width: 96%;
display: flex;
gap: 21.5px;
padding: 10px;
}
.taskCard {
background-image: url("@/assets/picture/box1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
// background: #ffffff;
// border: 1.7px solid rgb(193, 188, 188);
height: 26.5vh;
width: 96%;
display: flex;
gap: 21.5px;
padding: 10px;
}
.qbCard {
background-image: url("@/assets/picture/box1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
// background: #ffffff;
// border: 1.7px solid rgb(193, 188, 188);
height: 22vh;
width: 96%;
display: flex;
padding: 10px;
}
.textStyle {
writing-mode: vertical-lr;
font-size: 26px;
letter-spacing: 3px;
margin-left: 2%;
color: #FFFFFF;
}
.data-card-wrapper {
flex: 1;
display: flex;
justify-content: center; /* 水平居中 */
// gap: 20px;
}
</style>
\ No newline at end of file
src/views/os-status/components/taskCard.vue 0 → 100644
<template>
<div class="flex gap-10">
<div class="dataCard">
<!-- <img src="@/assets/picture/box1.png" style="max-width: 100%; height: auto;"> -->
<div class="titleStyle">
<span>DSN爬取任务</span>
</div>
<div class="wordStyle">
<span>任务采集目标数: {{ totalDataNumber }} 条</span>
</div>
<div class="wordStyle">
<span>任务执行成功统计: {{ totalPageNumber }} 页</span>
</div>
<div class="wordStyle">
<span>采集速度: {{ totalTargetNumber }} </span>
</div>
<div class="wordStyle">
<span>错误率: {{ totalTargetNumber }} </span>
</div>
</div>
<div class="dataCard">
<div class="titleStyle">
<span>ITU爬取任务</span>
</div>
<div class="wordStyle">
<span>任务采集目标数: {{ totalDataNumber }} 条</span>
</div>
<div class="wordStyle">
<span>任务执行成功统计: {{ totalPageNumber }} 页</span>
</div>
<div class="wordStyle">
<span>采集速度: {{ totalTargetNumber }} </span>
</div>
<div class="wordStyle">
<span>错误率: {{ totalTargetNumber }} </span>
</div>
</div>
<div class="dataCard">
<div class="titleStyle">
<span>ST爬取任务</span>
</div>
<div class="wordStyle">
<span>任务采集目标数: {{ totalDataNumber }} 条</span>
</div>
<div class="wordStyle">
<span>任务执行成功统计: {{ totalPageNumber }} 页</span>
</div>
<div class="wordStyle">
<span>采集速度: {{ totalTargetNumber }} </span>
</div>
<div class="wordStyle">
<span>错误率: {{ totalTargetNumber }} </span>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
defineProps({
totalDataNumber: {
type: String,
default: ''
},
totalPageNumber: {
type: String,
default: ''
},
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>
<style lang="scss" scoped>
.dataCard {
background-image: url("@/assets/picture/box2.png");
background-size: 100% 100%;
background-repeat: no-repeat;
// background: #c6ebfc;
// border: 1.5px solid rgb(193, 188, 188);
width: 360px;
height: 100%;
border-radius: 5px;
}
.titleStyle {
font-size: 34px;
margin-top: 3.5%;
color: #FFFFFF;
}
.wordStyle {
font-size: 24px;
color: #FFFFFF;
}
</style>
src/views/os-status/components/taskMonitoringBox.vue
......@@ -12,7 +12,7 @@
<script lang="ts" setup>
import taskMonitoringCard from './taskMonitoringCard.vue'
import taskMonitoringCard from './taskCard.vue'
defineProps({
title: {
......
src/views/os-status/components/taskMonitoringCard.vue deleted 100644 → 0
<!-- 任务执行统计卡片组件 -->
<template>
<div class="taskCard m-r-21" v-for="i in options" :key="i.value">
<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: #c6ebfc;
margin-bottom: 20px;
border: 1.5px solid rgb(193, 188, 188);
width: 400px;
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="text-left timeStyle">
</div>
<div class="border-100">
<integratedMonitoringBox>
</integratedMonitoringBox>
<taskMonitoringBox>
</taskMonitoringBox>
<statusMonitor></statusMonitor>
</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'
import statusMonitor from './components/statusMonitor.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(() => {
});
......@@ -59,8 +28,8 @@ const changeTime = () => {
<style lang="scss" scoped>
.timeStyle {
margin-top: 10px;
padding: 20px;
margin-top: 5px;
padding: 10px;
}
.integratedMonitoringBox {
......@@ -68,4 +37,6 @@ const changeTime = () => {
margin-bottom: 20px;
border: 1.5px solid rgb(193, 188, 188);
}
</style>
src/views/os-taskInformation/components/taskCard.vue
<!-- 任务执行统计卡片组件 -->
<template>
<div class="taskCard m-r-16 p-7" v-for="i in options" :key="i.value">
<div class="taskCard p-7" v-for="i in options" :key="i.value">
<div class="titleStyle">
<span>xx任务</span>
<span> 启用 </span>
......@@ -72,36 +72,30 @@ const options = [
value: 'month',
label: '近一月',
},
{
value: 'week',
label: '近一周',
},
{
value: 'day',
label: '近一日',
},
{
value: 'year',
label: '近一年',
},
]
</script>
<style lang="scss" scoped>
.taskCard {
background: #c6ebfc;
background-image: url("@/assets/picture/box2.png");
background-size: 100% 100%;
background-repeat: no-repeat;
// background: #c6ebfc;
margin-bottom: 20px;
border: 1.5px solid rgb(255, 255, 255);
// border: 1.5px solid rgb(255, 255, 255);
width: 350px;
font-size: 20px;
height: 15.5vh;
height: 100%;
border-radius: 7px;
.titleStyle {
font-size: 22px;
margin-top: -5px;
color: #FFFFFF;
}
.wordStyle {
font-size: 16px;
color: #FFFFFF;
}
}
.el-button:focus {
......
src/views/os-taskInformation/index.vue
<template>
<div class="text-left p-8">
<div class="text-left p-6">
<el-form inline>
<el-form-item label="关键词搜索:">
<el-input v-model="searchInput" style="width: 240px" placeholder="Search" :prefix-icon="Search" />
<el-form-item label="所属爬虫:">
<el-select v-model="taskValue" placeholder="请选择" style="width: 220px" />
</el-form-item>
<el-form-item label="任务名称:">
<el-input v-model="taskValue" style="width: 220px" />
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">查询</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-button type="primary">创建任务</el-button>
<el-space>
<el-button type="primary">新建任务</el-button>
</el-space>
</el-form-item>
</el-form>
</div>
<div class="flex flex-wrap m-t--2 justify-center">
<div class="cardStyle">
<taskCard successTask="100" failTask="10" unusualTask="1" />
</div>
<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"
<div class="text-right">
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
@pagination="getData" />
</div>
</div>
</template>
<script setup lang="ts">
......@@ -87,4 +95,13 @@ const getData = () => {
}
</script>
<style scoped></style>
<style scoped>
.cardStyle{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-top: 1.5%;
padding: 10px;
height: 25vh;
}
</style>
src/views/os-taskManager/index.vue
<template>
<div class="text-left p-10">
<el-form inline>
<el-form-item label="关键词搜索:">
<el-input v-model="searchInput" style="width: 220px" placeholder="Search" :prefix-icon="Search" />
<el-form-item label="所属爬虫:">
<el-select v-model="taskValue" placeholder="请选择" style="width: 220px" />
</el-form-item>
<el-form-item label="任务名称:">
<el-input v-model="taskValue" style="width: 220px" />
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">查询</el-button>
<el-button type="primary">创建任务</el-button>
<el-button type="danger">批量删除</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">新建任务</el-button>
</el-space>
</el-form-item>
</el-form>
......@@ -22,10 +28,6 @@
<template #default="scope">
<el-switch
v-model="scope.row.status"
:active-value="1"
:inactive-value="2"
active-color="#02538C"
inactive-color="#B9B9B9"
@change="changeSwitch(scope.row)"/>
</template>
</el-table-column>
......
vite.config.ts
......@@ -30,7 +30,7 @@ export default defineConfig({
proxy: {
// 代理API请求，使用更精确的路径匹配
'/api': {
target: 'http://127.0.0.1:5001/',
target: 'http://127.0.0.1:5000/',
changeOrigin: true,
},
}
......
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