Skip to content

F
fk-spider-web
Commit aafd1af0 by yzh
Options

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

parent bb285481
Showing with 434 additions and 235 deletions
src/layout/components/AppMain.vue
...@@ -17,6 +17,9 @@ const key = computed(() => route.path) ...@@ -17,6 +17,9 @@ const key = computed(() => route.path)
<style scoped> <style scoped>
.app-main { .app-main {
/*50 = navbar */ /*50 = navbar */
background-image: url("@/assets/picture/background1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
min-height: calc(100vh - 50px); min-height: calc(100vh - 50px);
width: 100%; width: 100%;
position: relative; position: relative;
......
src/router/index.ts
...@@ -227,7 +227,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [ ...@@ -227,7 +227,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
children: [ children: [
{ {
path: "list", path: "list",
name: "statusMonitor", name: "taskManager",
component: () => import("@/views/os-taskManager/index.vue"), component: () => import("@/views/os-taskManager/index.vue"),
meta: { title: "任务管理", icon: "Key" } meta: { title: "任务管理", icon: "Key" }
}, },
......
src/styles/_sidebar.scss
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
.hideSidebar { .hideSidebar {
.sidebar-container { .sidebar-container {
width: 54px !important; width: 60px !important;
} }
.main-container { .main-container {
......
src/views/os-status/components/dataCard.vue
<template> <template>
<div class="flex gap-21"> <div class="flex gap-10">
<div class="dataCard"> <div class="dataCard">
<div class="titleStyle"> <div class="titleStyle">
<span>数据统计</span> <span>数据统计</span>
...@@ -33,14 +33,16 @@ ...@@ -33,14 +33,16 @@
<span>性能统计</span> <span>性能统计</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>采集速度: {{ speed }}</span> <span>平均成功率: {{ speed }}%</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>错误率: {{ errorRate }}% </span> <span>平均错误率: {{ errorRate }}% </span>
</div>
<div class="wordStyle">
<span>平均异常率: {{ errorRate }}% </span>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
...@@ -83,18 +85,25 @@ defineProps({ ...@@ -83,18 +85,25 @@ defineProps({
<style lang="scss" scoped> <style lang="scss" scoped>
.dataCard { .dataCard {
background: #c6ebfc; background-image: url("@/assets/picture/box2.png");
border: 1.5px solid rgb(193, 188, 188); background-size: 100% 100%;
width: 400px; background-repeat: no-repeat;
height: 14vh; // background: #c6ebfc;
// border: 1.5px solid rgb(193, 188, 188);
width: 360px;
height: 100%;
border-radius: 5px; 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> </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 @@ ...@@ -12,7 +12,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import taskMonitoringCard from './taskMonitoringCard.vue' import taskMonitoringCard from './taskCard.vue'
defineProps({ defineProps({
title: { 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> <template>
<div>
<div class="text-left timeStyle"> <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>
<div class="border-100"> <div class="border-100">
<integratedMonitoringBox> <statusMonitor></statusMonitor>
</integratedMonitoringBox>
<taskMonitoringBox>
</taskMonitoringBox>
</div> </div>
<div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import integratedMonitoringBox from './components/integratedMonitoringBox.vue' import statusMonitor from './components/statusMonitor.vue'
import taskMonitoringBox from './components/taskMonitoringBox.vue'
const loading = ref(false); const loading = ref(false);
const statusList = ref([]); const statusList = ref([]);
const title = ref(' '); const title = ref(' ');
const timeValue = ref(); const timeValue = ref();
const timeOptions = [
{
value: 'year',
label: '近一年',
},
{
value: 'month',
label: '近一月',
},
{
value: 'week',
label: '近一周',
},
{
value: 'day',
label: '近一日',
},
]
onMounted(() => { onMounted(() => {
}); });
...@@ -59,8 +28,8 @@ const changeTime = () => { ...@@ -59,8 +28,8 @@ const changeTime = () => {
<style lang="scss" scoped> <style lang="scss" scoped>
.timeStyle { .timeStyle {
margin-top: 10px; margin-top: 5px;
padding: 20px; padding: 10px;
} }
.integratedMonitoringBox { .integratedMonitoringBox {
...@@ -68,4 +37,6 @@ const changeTime = () => { ...@@ -68,4 +37,6 @@ const changeTime = () => {
margin-bottom: 20px; margin-bottom: 20px;
border: 1.5px solid rgb(193, 188, 188); border: 1.5px solid rgb(193, 188, 188);
} }
</style> </style>
src/views/os-taskInformation/components/taskCard.vue
<!-- 任务执行统计卡片组件 --> <!-- 任务执行统计卡片组件 -->
<template> <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"> <div class="titleStyle">
<span>xx任务</span> <span>xx任务</span>
<span> 启用 </span> <span> 启用 </span>
...@@ -72,36 +72,30 @@ const options = [ ...@@ -72,36 +72,30 @@ const options = [
value: 'month', value: 'month',
label: '近一月', label: '近一月',
}, },
{
value: 'week',
label: '近一周',
},
{
value: 'day',
label: '近一日',
},
{
value: 'year',
label: '近一年',
},
] ]
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.taskCard { .taskCard {
background: #c6ebfc; background-image: url("@/assets/picture/box2.png");
background-size: 100% 100%;
background-repeat: no-repeat;
// background: #c6ebfc;
margin-bottom: 20px; margin-bottom: 20px;
border: 1.5px solid rgb(255, 255, 255); // border: 1.5px solid rgb(255, 255, 255);
width: 350px; width: 350px;
font-size: 20px; font-size: 20px;
height: 15.5vh; height: 100%;
border-radius: 7px; border-radius: 7px;
.titleStyle { .titleStyle {
font-size: 22px; font-size: 22px;
margin-top: -5px; margin-top: -5px;
color: #FFFFFF;
} }
.wordStyle { .wordStyle {
font-size: 16px; font-size: 16px;
color: #FFFFFF;
} }
} }
.el-button:focus { .el-button:focus {
......
src/views/os-taskInformation/index.vue
<template> <template>
<div class="text-left p-8"> <div class="text-left p-6">
<el-form inline> <el-form inline>
<el-form-item label="关键词搜索:"> <el-form-item label="所属爬虫:">
<el-input v-model="searchInput" style="width: 240px" placeholder="Search" :prefix-icon="Search" /> <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-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-item>
</el-form> </el-form>
</div> </div>
<div class="flex flex-wrap m-t--2 justify-center"> <div class="cardStyle">
<taskCard successTask="100" failTask="10" unusualTask="1" /> <taskCard successTask="100" failTask="10" unusualTask="1" />
</div> <div class="text-right">
<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 :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
@pagination="getData" /> @pagination="getData" />
</div> </div>
</div>
</template> </template>
...@@ -87,4 +95,13 @@ const getData = () => { ...@@ -87,4 +95,13 @@ const getData = () => {
} }
</script> </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> <template>
<div class="text-left p-10"> <div class="text-left p-10">
<el-form inline> <el-form inline>
<el-form-item label="关键词搜索:"> <el-form-item label="所属爬虫:">
<el-input v-model="searchInput" style="width: 220px" placeholder="Search" :prefix-icon="Search" /> <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-form-item> <el-form-item>
<el-space> <el-space>
<el-button type="primary">查询</el-button> <el-button type="primary">查询</el-button>
<el-button type="primary">创建任务</el-button> </el-space>
<el-button type="danger">批量删除</el-button> </el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">新建任务</el-button>
</el-space> </el-space>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -22,10 +28,6 @@ ...@@ -22,10 +28,6 @@
<template #default="scope"> <template #default="scope">
<el-switch <el-switch
v-model="scope.row.status" v-model="scope.row.status"
:active-value="1"
:inactive-value="2"
active-color="#02538C"
inactive-color="#B9B9B9"
@change="changeSwitch(scope.row)"/> @change="changeSwitch(scope.row)"/>
</template> </template>
</el-table-column> </el-table-column>
......
vite.config.ts
...@@ -30,7 +30,7 @@ export default defineConfig({ ...@@ -30,7 +30,7 @@ export default defineConfig({
proxy: { proxy: {
// 代理API请求，使用更精确的路径匹配 // 代理API请求，使用更精确的路径匹配
'/api': { '/api': {
target: 'http://127.0.0.1:5001/', target: 'http://127.0.0.1:5000/',
changeOrigin: true, 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