Skip to content

F
fk-spider-web
Commit c59f4f33 by yzh
Options

feat:完成前端静态页面剩下的样式修改。

parent e869180c
Showing with 473 additions and 246 deletions
src/components/pagination/index.vue
......@@ -2,10 +2,10 @@
<template>
<el-pagination
v-show="total > 0"
v-model:current-page="currentPage"
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:background="true"
:page-sizes="[5,10, 20, 30, 50, 100]"
:page-sizes="[10]"
:pager-count="pagerCount"
:total="total"
class="mt-4"
......
src/router/index.ts
......@@ -215,8 +215,8 @@ export const constantRoutes: Array<RouteRecordRaw> = [
{
path: "/os-status",
redirect: "/os-status/list",
path: "/osStatus",
// redirect: "list",
component: Layout,
children: [
{
......@@ -230,8 +230,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
{
path: "/os-taskInformation",
redirect: "/os-taskInformation/list",
path: "/osTaskInformation",
component: Layout,
children: [
{
......@@ -244,8 +243,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
} as unknown as RouteRecordRaw,
{
path: "/os-taskRecord",
redirect: "/os-taskRecord/list",
path: "/osTaskRecord",
component: Layout,
children: [
{
......@@ -258,8 +256,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
} as unknown as RouteRecordRaw,
{
path: "/os-dataDisplay",
redirect: "/os-dataDisplay/list",
path: "/osDataDisplay",
component: Layout,
children: [
{
......@@ -272,8 +269,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
} as unknown as RouteRecordRaw,
{
path: "/os-spiderManager",
redirect: "/os-spiderManager/list",
path: "/osSpiderManager",
component: Layout,
children: [
{
......@@ -286,8 +282,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
} as unknown as RouteRecordRaw,
{
path: "/os-system",
redirect: "/os-system/list",
path: "/osSystem",
component: Layout,
children: [
{
......
src/views/home/home.vue
......@@ -32,7 +32,7 @@ const resetData = (id: string) => {
:scrapyd-server-id="scrapydServerId"
/>
<home-system-info />
<!-- <home-config /> -->
<home-config />
</div>
</div>
</template>
......
src/views/os-dataDisplay/components/allDataTab.vue
<template>
<div class="text-left p-4 toolbarStyle">
<div class="formStyle">
<el-form inline>
......@@ -62,16 +63,16 @@
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '45px' }"
:header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
<el-table-column type="selection" width="40" />
<el-table-column property="name" label="序号" width="55" />
<el-table-column property="name" label="目标名称" show-overflow-tooltip />
<el-table-column property="name" label="站点位置" show-overflow-tooltip />
<el-table-column property="name" label="站点名称" show-overflow-tooltip />
<el-table-column property="name" label="Norad Cat ID" show-overflow-tooltip />
<el-table-column property="name" label="SNS Notice ID" show-overflow-tooltip />
<el-table-column property="name" label="数据时间" show-overflow-tooltip />
<el-table-column property="name" label="记录时间" show-overflow-tooltip />
<el-table-column property="name" label="TLE" show-overflow-tooltip />
<el-table-column property="name" label="是否为同步" show-overflow-tooltip />
<el-table-column property="number" label="序号" width="55" />
<el-table-column property="targetName" label="目标名称" show-overflow-tooltip />
<el-table-column property="stationPosition" label="站点位置" show-overflow-tooltip />
<el-table-column property="stationName" label="站点名称" show-overflow-tooltip />
<el-table-column property="NoradCatId" label="Norad Cat ID" show-overflow-tooltip />
<el-table-column property="SNSNoticeId" label="SNS Notice ID" show-overflow-tooltip />
<el-table-column property="dataTime" label="数据时间" show-overflow-tooltip />
<el-table-column property="recordTime" label="记录时间" show-overflow-tooltip />
<el-table-column property="tle" label="TLE" show-overflow-tooltip />
<el-table-column property="isSync" label="是否为同步" show-overflow-tooltip />
<el-table-column label="操作" width="60">
<template #default="scope">
<el-button type="primary" plain link @click="handleDetails(scope.row)">
......@@ -451,7 +452,16 @@ const site = ref('')
const tle = ref('')
const tableData = ref([
{
name: '1',
number: '1',
targetName: 'VOYAGER-2',
stationPosition:'[148.98,-35.22]',
stationName:'CANBERRA',
NoradCatId:'2134',
SNSNoticeId:'90504649',
dataTime:'2025-06-24 14:35:23',
recordTime:'2025-06-25 14:35:23',
tle:'-',
isSync:'是',
},
{
name: '1',
......@@ -527,7 +537,7 @@ const handleExport = () => {
.formStyle {
display: flex;
justify-content: space-around;
padding: 3px;
padding: 1px;
margin-top: 1%;
}
......
src/views/os-dataDisplay/components/dsnData/dsnDataTab.vue
......@@ -51,22 +51,22 @@
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '41px' }"
:header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
<el-table-column type="selection" width="40" />
<el-table-column property="name" label="序号" width="55" />
<el-table-column property="name" label="目标名称" show-overflow-tooltip />
<el-table-column property="name" label="距离(km)" show-overflow-tooltip />
<el-table-column property="name" label="往返光时(s)" show-overflow-tooltip />
<el-table-column property="name" label="站点名称" show-overflow-tooltip />
<el-table-column property="name" label="目标方位" show-overflow-tooltip />
<el-table-column property="name" label="目标俯仰" show-overflow-tooltip />
<el-table-column property="name" label="目标距离" show-overflow-tooltip />
<el-table-column property="name" label="风速(km/hr)" show-overflow-tooltip />
<el-table-column property="name" label="上行信号来源" show-overflow-tooltip />
<el-table-column property="name" label="上行信号频段" show-overflow-tooltip />
<el-table-column property="name" label="上行发射功率" show-overflow-tooltip />
<el-table-column property="name" label="下行信号来源" show-overflow-tooltip />
<el-table-column property="name" label="下行信号频段" show-overflow-tooltip />
<el-table-column property="tle" label="下行接收功率" show-overflow-tooltip />
<el-table-column property="tle" label="数据时间" show-overflow-tooltip />
<el-table-column property="number" label="序号" width="55" />
<el-table-column property="targetName" label="目标名称" show-overflow-tooltip />
<el-table-column property="distance" label="距离(km)" show-overflow-tooltip />
<el-table-column property="roundTripTime" label="往返光时(s)" show-overflow-tooltip />
<el-table-column property="stationName" label="站点名称" show-overflow-tooltip />
<el-table-column property="targetAzimuth" label="目标方位" show-overflow-tooltip />
<el-table-column property="targetElevation" label="目标俯仰" show-overflow-tooltip />
<el-table-column property="targetDistance" label="目标距离" show-overflow-tooltip />
<el-table-column property="windSpeed" label="风速(km/hr)" show-overflow-tooltip />
<el-table-column property="upSignalSource" label="上行信号来源" show-overflow-tooltip />
<el-table-column property="upSignalFrequencyBand" label="上行信号频段" show-overflow-tooltip />
<el-table-column property="upSignalLaunchPower" label="上行发射功率" show-overflow-tooltip />
<el-table-column property="downSignalSignalSource" label="下行信号来源" show-overflow-tooltip />
<el-table-column property="downSignalFrequencyBand" label="下行信号频段" show-overflow-tooltip />
<el-table-column property="downSignalReceptionPower" label="下行接收功率" show-overflow-tooltip />
<el-table-column property="dataTime" label="数据时间" show-overflow-tooltip />
<el-table-column label="操作" width="60">
<template #default="scope">
<el-button type="primary" plain link @click="handleDetails(scope.row)">
......@@ -248,8 +248,22 @@ const isSuspended = ref('')
const tableData = ref([
{
name: '1',
tle: 'CALSPHERE 1 1 00900U 64063C 25250.97134884 .00000721 00000+0 72980-3 0 99942 00900 90.2130 65.2545 0027289 68.6758 54.6817 13.76179512 32605'
number: '1',
targetName: 'maven',
distance: '2000',
roundTripTime: '12',
stationName: 'CANBERRA',
targetAzimuth: '11',
targetElevation: '24',
targetDistance: '2000',
windSpeed: '10',
upSignalSource: 'maven',
upSignalFrequencyBand: 'X',
upSignalLaunchPower: '123',
downSignalSignalSource: 'maven',
downSignalFrequencyBand: 'S',
downSignalReceptionPower: '23',
dataTime: '2025-06-21 12:00:00',
},
{
name: '1',
......
src/views/os-dataDisplay/components/dsnData/dsnTab.vue
<template>
<div class="text-left p-s">
<div class="segmentedStyle">
<el-segmented v-model="mode" :options="sizeOptions" style="margin-bottom: 1rem" size="default" />
<el-segmented v-model="mode" :options="sizeOptions" style="margin-bottom: 1rem" size="small" />
</div>
</div>
<dsnDataTab v-if="mode === 'DSN数据'">
......
src/views/os-dataDisplay/components/ituDataTab.vue
......@@ -57,23 +57,24 @@
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '42.5px' }"
:header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
<el-table-column type="selection" width="40" />
<el-table-column property="name" label="SNS Notice ID" show-overflow-tooltip />
<el-table-column property="name" label="主管部门" show-overflow-tooltip />
<el-table-column property="name" label="目标名称" show-overflow-tooltip />
<el-table-column property="name" label="计划/非计划类型" show-overflow-tooltip />
<el-table-column property="name" label="是否为同步" show-overflow-tooltip />
<el-table-column property="name" label="同步位置" show-overflow-tooltip />
<el-table-column property="name" label="近地点" show-overflow-tooltip />
<el-table-column property="name" label="远地点" show-overflow-tooltip />
<el-table-column property="name" label="最低海拔" show-overflow-tooltip />
<el-table-column property="name" label="参考主体" show-overflow-tooltip />
<el-table-column property="name" label="最高频率" show-overflow-tooltip />
<el-table-column property="name" label="最低频率" show-overflow-tooltip />
<el-table-column property="name" label="状态" show-overflow-tooltip />
<el-table-column property="name" label="有效期" show-overflow-tooltip />
<el-table-column property="name" label="最早使用日期" show-overflow-tooltip />
<el-table-column property="name" label="是否确认使用" show-overflow-tooltip />
<el-table-column property="name" label="是否暂停使用" show-overflow-tooltip />
<el-table-column property="number" label="序号" width="55" />
<el-table-column property="SNSNoticeID" label="SNS Notice ID" show-overflow-tooltip />
<el-table-column property="department" label="主管部门" show-overflow-tooltip />
<el-table-column property="targetName" label="目标名称" show-overflow-tooltip />
<el-table-column property="planType" label="计划/非计划类型" show-overflow-tooltip />
<el-table-column property="syncType" label="是否为同步" show-overflow-tooltip />
<el-table-column property="syncPosition" label="同步位置" show-overflow-tooltip />
<el-table-column property="perigee" label="近地点" show-overflow-tooltip />
<el-table-column property="apogee" label="远地点" show-overflow-tooltip />
<el-table-column property="lowestAltitude" label="最低海拔" show-overflow-tooltip />
<el-table-column property="referenceSubject" label="参考主体" show-overflow-tooltip />
<el-table-column property="highestFrequency" label="最高频率" show-overflow-tooltip />
<el-table-column property="lowestFrequency" label="最低频率" show-overflow-tooltip />
<el-table-column property="status" label="状态" show-overflow-tooltip />
<el-table-column property="validityPeriod" label="有效期" show-overflow-tooltip />
<el-table-column property="earliestUsageDate" label="最早使用日期" show-overflow-tooltip />
<el-table-column property="isUsed" label="是否确认使用" show-overflow-tooltip />
<el-table-column property="isPauseUsed" label="是否暂停使用" show-overflow-tooltip />
<el-table-column label="操作" width="60">
<template #default="scope">
<el-button type="primary" plain link @click="handleDetails(scope.row)">
......@@ -303,7 +304,24 @@ const validityPeriodSatelliteNetworkOldName = ref('')
const BFIFICdate = ref('')
const tableData = ref([
{
name: '1',
number: '1',
SNSNoticeID: '86550007',
department:'ARG',
targetName:'ARGOS',
planType:'计划',
syncType:'否',
syncPosition:'-',
perigee:'2000',
apogee:'2500',
lowestAltitude:'165',
referenceSubject:'地球',
lowestFrequency:'None',
highestFrequency:'None',
status:'None',
validityPeriod:'-',
earliestUsageDate:'None',
isUsed:'No',
isPauseUsed:'No',
},
{
name: '1',
......
src/views/os-dataDisplay/components/stDataTab.vue
......@@ -57,20 +57,20 @@
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '42.5px' }"
:header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
<el-table-column type="selection" width="40" />
<el-table-column property="name" label="序号" width="55" />
<el-table-column property="name" label="Norad Cat ID" show-overflow-tooltip />
<el-table-column property="name" label="目标名称" show-overflow-tooltip />
<el-table-column property="name" label="INTLDES" show-overflow-tooltip />
<el-table-column property="name" label="类型" show-overflow-tooltip />
<el-table-column property="name" label="所属国家" width="82" show-overflow-tooltip />
<el-table-column property="name" label="运行时间" show-overflow-tooltip />
<el-table-column property="name" label="SITE" show-overflow-tooltip />
<el-table-column property="name" label="失效时间" show-overflow-tooltip />
<el-table-column property="name" label="周期" show-overflow-tooltip />
<el-table-column property="name" label="近地点" show-overflow-tooltip />
<el-table-column property="name" label="远地点" show-overflow-tooltip />
<el-table-column property="name" label="INCL" show-overflow-tooltip />
<el-table-column property="name" label="RCS" show-overflow-tooltip />
<el-table-column property="number" label="序号" width="55" />
<el-table-column property="NoradCatID" label="Norad Cat ID" show-overflow-tooltip />
<el-table-column property="targetName" label="目标名称" show-overflow-tooltip />
<el-table-column property="intleds" label="INTLDES" show-overflow-tooltip />
<el-table-column property="type" label="类型" show-overflow-tooltip />
<el-table-column property="belongCountry" label="所属国家" width="82" show-overflow-tooltip />
<el-table-column property="runningTime" label="运行时间" show-overflow-tooltip />
<el-table-column property="site" label="SITE" show-overflow-tooltip />
<el-table-column property="failTime" label="失效时间" show-overflow-tooltip />
<el-table-column property="period" label="周期" show-overflow-tooltip />
<el-table-column property="perigee" label="近地点" show-overflow-tooltip />
<el-table-column property="apogee" label="远地点" show-overflow-tooltip />
<el-table-column property="incl" label="INCL" show-overflow-tooltip />
<el-table-column property="rcs" label="RCS" show-overflow-tooltip />
<el-table-column property="tle" label="TLE" show-overflow-tooltip />
<el-table-column label="操作" width="60">
<template #default="scope">
......@@ -237,8 +237,21 @@ const tle = ref('')
const tableData = ref([
{
name: '1',
tle: 'CALSPHERE 1 1 00900U 64063C 25250.97134884 .00000721 00000+0 72980-3 0 99942 00900 90.2130 65.2545 0027289 68.6758 54.6817 13.76179512 32605'
number: '1',
NoradCatID: '1358',
targetName: 'SL-1 R/B',
intleds: '1957-001A',
type: 'ROCKET BODY',
belongCountry: 'RUS',
runningTime: '1957-10-14',
site: 'TTMTR',
failTime: '1958-12-01',
period: '96.19',
perigee: '214',
apogee: '938',
incl: '65.14',
rcs: 'LARGE',
tle: '-',
},
{
name: '1',
......
src/views/os-dataDisplay/index.vue
<template>
<div class="text-left p-4">
<div class="custom-style">
<el-segmented v-model="mode" :options="sizeOptions" style="margin-bottom: 1rem" size="large" />
<div >
<div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToStatus">
</div>
<div class="text-left p-4 ">
<div class="custom-style">
<el-segmented v-model="mode" :options="sizeOptions" style="margin-bottom: 1rem" size="default" />
</div>
</div>
<!-- 综合数据页面组件 -->
<allDataTab v-if="mode === '综合数据'">
</allDataTab>
<!-- DSN数据页面组件 -->
<dsnDataTab v-if="mode === 'DSN数据'">
</dsnDataTab>
<!-- ITU数据页面组件 -->
<ituDataTab v-if="mode === 'ITU数据'">
</ituDataTab>
<!-- ST数据页面组件 -->
<stDataTab v-if="mode === 'ST数据'">
</stDataTab>
</div>
<!-- 综合数据页面组件 -->
<allDataTab v-if="mode === '综合数据'">
</allDataTab>
<!-- DSN数据页面组件 -->
<dsnDataTab v-if="mode === 'DSN数据'">
</dsnDataTab>
<!-- ITU数据页面组件 -->
<ituDataTab v-if="mode === 'ITU数据'">
</ituDataTab>
<!-- ST数据页面组件 -->
<stDataTab v-if="mode === 'ST数据'">
</stDataTab>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import allDataTab from './components/allDataTab.vue'
import ituDataTab from './components/ituDataTab.vue'
import stDataTab from './components/stDataTab.vue'
import dsnDataTab from './components/dsnData/dsnTab.vue'
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import allDataTab from './components/allDataTab.vue'
import ituDataTab from './components/ituDataTab.vue'
import stDataTab from './components/stDataTab.vue'
import dsnDataTab from './components/dsnData/dsnTab.vue'
const mode = ref('综合数据')
const sizeOptions = ['综合数据', 'DSN数据', 'ITU数据', 'ST数据']
const route = useRoute()
const router = useRouter()
const ooo = ref<any>('数据展示')
const goToStatus = () => {
router.push({
path: '/osStatus/list',
})
}
onMounted(()=>{
console.log('数据展示');
console.log(route.query);
ooo.value = route.query.mode
mode.value = ooo.value
})
</script>
<style scoped lang="scss">
......@@ -43,5 +63,13 @@ const sizeOptions = ['综合数据', 'DSN数据', 'ITU数据', 'ST数据']
color: #FFFFFF;
}
.backStyle {
background-image: url("@/assets/picture/back.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 5vh;
width: 5%;
display: flex;
margin-left: 0.8%;
}
</style>
src/views/os-log/index.vue
......@@ -29,10 +29,10 @@ const bactToRecord = () => {
background-image: url("@/assets/picture/back.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 8vh;
width: 9%;
height: 5vh;
width: 5%;
display: flex;
margin-left: 2.5%;
margin-left: 0.8%;
}
......
src/views/os-spiderManager/index.vue
......@@ -23,9 +23,11 @@
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ref, onMounted } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const tableData = ref([
{
name: '1',
......@@ -76,10 +78,17 @@ const pageObj = ref({
})
const handleDetails = (row: any) => {
console.log(row);
router.push({
path: '/os-taskInformation',
})
}
const getData = () => {
console.log('getData');
}
onMounted(()=>{
console.log('爬虫管理');
})
</script>
<style scoped>
......
src/views/os-status/components/dataCard.vue
<template>
<div class="flex gap-10">
<div class="dataCard">
<div class="titleStyle">
<span class="textStyle">数据统计</span>
<div class="dataCard" @click="goToAllDataPage">
<div class="titleStyle" >
<span>数据统计</span>
</div>
<div class="wordStyle">
<span>总数据量: {{ totalDataNumber }} 条</span>
<span>总数据量: {{ totalDataNumber }} 1230</span>
</div>
<div class="wordStyle">
<span>采集的页面数量: {{ totalPageNumber }} 页</span>
<span>采集的页面数量: {{ totalPageNumber }} 85</span>
</div>
<div class="wordStyle">
<span>采集的目标数量: {{ totalTargetNumber }} 个</span>
<span>采集的目标数量: {{ totalTargetNumber }} 569</span>
</div>
</div>
<div class="dataCard">
<div class="dataCard" @click="goToTaskRecordPage">
<div class="titleStyle">
<span>任务执行统计</span>
</div>
<div class="wordStyle">
<span>任务执行成功统计: {{ successTask }} 个</span>
<span>任务执行成功统计: {{ successTask }} 36</span>
</div>
<div class="wordStyle">
<span>任务执行失败统计: {{ failTask }} 个</span>
<span>任务执行失败统计: {{ failTask }} 0</span>
</div>
<div class="wordStyle">
<span>任务异常数统计: {{ unusualTask }} 个</span>
<span>任务异常数统计: {{ unusualTask }} 1</span>
</div>
</div>
<div class="dataCard">
......@@ -33,13 +34,13 @@
<span>性能统计</span>
</div>
<div class="wordStyle">
<span>平均成功率: {{ speed }}%</span>
<span>平均成功率: {{ speed }} 98%</span>
</div>
<div class="wordStyle">
<span>平均错误率: {{ errorRate }}% </span>
<span>平均错误率: {{ errorRate }} 0%</span>
</div>
<div class="wordStyle">
<span>平均异常率: {{ errorRate }}% </span>
<span>平均异常率: {{ errorRate }} 2%</span>
</div>
</div>
</div>
......@@ -47,6 +48,9 @@
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
const router = useRouter();
defineProps({
totalDataNumber: {
type: String,
......@@ -81,6 +85,26 @@ defineProps({
default: ''
}
})
const goToAllDataPage = () => {
router.push({
path: '/osDataDisplay/list',
query: {
jump: 'yes',
mode:'综合数据'
}
})
}
const goToTaskRecordPage = () => {
router.push({
path: '/osTaskRecord/list',
query: {
jump: 'yes'
}
})
}
</script>
<style lang="scss" scoped>
......@@ -96,13 +120,23 @@ defineProps({
}
.titleStyle {
font-size: 34px;
margin-top: 3.5%;
font-size: 30px;
margin-top: 5%;
color: #FFFFFF;
}
.wordStyle {
font-size: 24px;
font-size: 20px;
color: #FFFFFF;
margin-top: 2%;
}
.textStyle {
writing-mode: vertical-lr;
font-size: 26px;
letter-spacing: 3px;
margin-left: 0.5%;
color: #FFFFFF;
// display: flex;
}
</style>
src/views/os-status/components/qbDataMonitor.vue
<template>
<div class="flex gap-10">
<div class="dataCard">
<span class="textStyle">QB数据管理</span>
<div class="dataCard" @click="goToAllDataPage">
<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 class="iconStyle">
</div>
</div>
<div class="dataCard">
<div class="dataCard" @click="goToDSNDataPage">
<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 class="iconStyle">
</div>
</div>
<div class="dataCard">
<div class="dataCard" @click="goToITUDataPage">
<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 class="iconStyle">
</div>
</div>
<div class="dataCard">
<div class="dataCard" @click="goToSTDataPage">
<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 class="iconStyle">
</div>
</div>
</div>
......@@ -61,6 +34,9 @@
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
const router = useRouter()
defineProps({
totalDataNumber: {
type: String,
......@@ -95,28 +71,89 @@ defineProps({
default: ''
}
})
const goToAllDataPage = () => {
router.push({
path: '/osDataDisplay/list',
query: {
mode: '综合数据',
jump:'yes'
}
})
}
const goToDSNDataPage = () => {
router.push({
path: '/osDataDisplay/list',
query: {
mode: 'DSN数据',
jump:'yes'
}
})
}
const goToITUDataPage = () => {
router.push({
path: '/osDataDisplay/list',
query: {
mode: 'ITU数据',
jump:'yes'
}
})
}
const goToSTDataPage = () => {
router.push({
path: '/osDataDisplay/list',
query: {
mode: 'ST数据',
jump:'yes'
}
})
}
</script>
<style lang="scss" scoped>
.iconStyle {
background-image: url("@/assets/picture/wenjianjia.png");
background-size: 100% 120%;
background-repeat: no-repeat;
margin-top: 3%;
display: flex;
// border: 1.5px solid rgb(193, 188, 188);
height: 50%;
width: 50%;
}
.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;
width: 260px;
height: 100%;
border-radius: 5px;
display: flex;
flex-direction: column;
// justify-content: center;
align-items: center;
}
.titleStyle {
font-size: 34px;
margin-top: 3.5%;
font-size: 30px;
margin-top: 5%;
color: #FFFFFF;
}
.wordStyle {
font-size: 24px;
font-size: 20px;
color: #FFFFFF;
margin-top: 2%;
}
.textStyle {
writing-mode: vertical-lr;
font-size: 26px;
letter-spacing: 3px;
margin-left: 0.5%;
color: #FFFFFF;
// display: flex;
}
</style>
src/views/os-status/components/statusMonitor.vue
<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="textStyle">
<span>数据统计</span>
</div> -->
<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>
......@@ -26,6 +25,7 @@
import dataCard from './dataCard.vue'
import taskCard from '@/views/os-status/components/taskCard.vue';
import qbCard from '@/views/os-status/components/qbDataMonitor.vue';
import { onMounted } from 'vue';
defineProps({
title: {
......@@ -37,11 +37,14 @@ defineProps({
default: ''
}
})
onMounted(()=>{
console.log('状态监控');
})
</script>
<style lang="scss" scoped>
.card-container {
height: 100%;
display: flex;
flex-direction: column;
......@@ -49,26 +52,24 @@ defineProps({
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;
......@@ -79,8 +80,6 @@ defineProps({
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;
......@@ -93,6 +92,7 @@ defineProps({
letter-spacing: 3px;
margin-left: 2%;
color: #FFFFFF;
// display: flex;
}
.data-card-wrapper {
......
src/views/os-status/components/taskCard.vue
<template>
<div class="flex gap-10">
<div class="dataCard">
<!-- <img src="@/assets/picture/box1.png" style="max-width: 100%; height: auto;"> -->
<span class="textStyle">任务统计</span>
<div class="dataCard" @click="goToDSNTaskRecordPage">
<div class="titleStyle">
<span>DSN爬取任务</span>
</div>
<div class="wordStyle">
<span>任务采集目标数: {{ totalDataNumber }} 条</span>
<span>任务采集目标数: {{ totalDataNumber }} 638</span>
</div>
<div class="wordStyle">
<span>任务执行成功统计: {{ totalPageNumber }} 页</span>
<span>任务执行成功统计: {{ totalPageNumber }} 79</span>
</div>
<div class="wordStyle">
<span>采集速度: {{ totalTargetNumber }} </span>
<span>采集速度: {{ totalTargetNumber }} 324</span>
</div>
<div class="wordStyle">
<span>错误率: {{ totalTargetNumber }} </span>
<span>错误率: {{ totalTargetNumber }} 1%</span>
</div>
</div>
<div class="dataCard">
<div class="dataCard" @click="goToITUTaskRecordPage">
<div class="titleStyle">
<span>ITU爬取任务</span>
</div>
<div class="wordStyle">
<span>任务采集目标数: {{ totalDataNumber }} 条</span>
<span>任务采集目标数: {{ totalDataNumber }} 148</span>
</div>
<div class="wordStyle">
<span>任务执行成功统计: {{ totalPageNumber }} 页</span>
<span>任务执行成功统计: {{ totalPageNumber }} 98</span>
</div>
<div class="wordStyle">
<span>采集速度: {{ totalTargetNumber }} </span>
<span>采集速度: {{ totalTargetNumber }} 322</span>
</div>
<div class="wordStyle">
<span>错误率: {{ totalTargetNumber }} </span>
<span>错误率: {{ totalTargetNumber }} 1%</span>
</div>
</div>
<div class="dataCard">
<div class="dataCard" @click="goToSTTaskRecordPage">
<div class="titleStyle">
<span>ST爬取任务</span>
</div>
<div class="wordStyle">
<span>任务采集目标数: {{ totalDataNumber }} 条</span>
<span>任务采集目标数: {{ totalDataNumber }} 136</span>
</div>
<div class="wordStyle">
<span>任务执行成功统计: {{ totalPageNumber }} 页</span>
<span>任务执行成功统计: {{ totalPageNumber }} 86</span>
</div>
<div class="wordStyle">
<span>采集速度: {{ totalTargetNumber }} </span>
<span>采集速度: {{ totalTargetNumber }} 342</span>
</div>
<div class="wordStyle">
<span>错误率: {{ totalTargetNumber }} </span>
<span>错误率: {{ totalTargetNumber }} 0%</span>
</div>
</div>
</div>
......@@ -58,6 +57,8 @@
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
const router = useRouter()
defineProps({
totalDataNumber: {
type: String,
......@@ -92,6 +93,36 @@ defineProps({
default: ''
}
})
const goToDSNTaskRecordPage = () => {
router.push({
path: '/osTaskRecord/list',
query: {
mode: 'dsn',
jump:'yes'
}
})
}
const goToITUTaskRecordPage = () => {
router.push({
path: '/osTaskRecord/list',
query: {
mode: 'itu',
jump:'yes'
}
})
}
const goToSTTaskRecordPage = () => {
router.push({
path: '/osTaskRecord/list',
query: {
mode: 'st',
jump:'yes'
}
})
}
</script>
<style lang="scss" scoped>
......@@ -107,13 +138,23 @@ defineProps({
}
.titleStyle {
font-size: 34px;
margin-top: 3.5%;
font-size: 30px;
margin-top: 5%;
color: #FFFFFF;
}
.wordStyle {
font-size: 24px;
font-size: 20px;
color: #FFFFFF;
margin-top: 2%;
}
.textStyle {
writing-mode: vertical-lr;
font-size: 26px;
letter-spacing: 3px;
margin-left: 0.5%;
color: #FFFFFF;
// display: flex;
}
</style>
src/views/os-system/index.vue
......@@ -41,7 +41,7 @@
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ref, onMounted } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import deleteDialog from '@/components/Delete/index.vue'
import addUserDialog from './components/addUserDialog.vue'
......@@ -116,6 +116,10 @@ const openAddUserDialog = () => {
mode.value = '1'
dialogVisible.value = true
}
onMounted(()=>{
console.log('系统管理');
})
</script>
<style scoped>
......
src/views/os-taskInformation/components/addTaskDialog.vue
<template>
<el-dialog v-model="currentVisible" title="新增" width="610" center align-center @close="handleClose" draggable>
<el-dialog v-model="currentVisible" :title="currentMode === '1' ? '新增' : '修改'" width="610" center align-center @close="handleClose" draggable>
<el-form :inline="true" v-if="currentMode === '1'">
<el-form-item label="任务名称:">
<el-input v-model="taskName" placeholder="请输入任务名称" />
......
src/views/os-taskInformation/components/taskCard.vue
......@@ -8,8 +8,8 @@
</div>
<div class="flex justify-center">
<el-form-item>
<el-button type="primary" @click="editTask">编辑</el-button>
<el-button type="success">执行记录</el-button>
<el-button type="primary" @click="editTask" class="editButton">编辑</el-button>
<el-button type="success">执行记录 </el-button>
<el-button type="danger" @click="deleteTask">删除</el-button>
</el-form-item>
</div>
......@@ -113,6 +113,11 @@ const handleDeleteConfirm = () => {
</script>
<style lang="scss" scoped>
// .editButton{
// background-image: url("@/assets/picture/box2.png");
// background-size: 100% 100%;
// background-repeat: no-repeat;
// }
// 任务卡片样式
.taskCard {
background-image: url("@/assets/picture/box2.png");
......
src/views/os-taskInformation/index.vue
......@@ -47,7 +47,7 @@
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ref, onMounted } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import taskCard from './components/taskCard.vue'
import addTaskDialog from './components/addTaskDialog.vue'
......@@ -88,6 +88,10 @@ const handleDeleteConfirm = () => {
const openTaskDialog = () => {
showDialog.value = true
}
onMounted(()=>{
console.log('任务信息');
})
</script>
<style scoped>
......
src/views/os-taskRecord/index.vue
<template>
<div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToStatus">
</div>
<div class="m-t-7">
</div>
<div class="text-left p-6 toolbarStyle">
......@@ -46,26 +48,27 @@
</div>
<div>
<el-table :data="tableData" style="width: 100%" border :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
<el-table-column type="selection" width="40" />
<el-table-column property="name" label="序号" width="55" />
<el-table-column property="address" label="任务名称" show-overflow-tooltip />
<el-table-column property="address" label="调度模式" show-overflow-tooltip />
<el-table-column property="status" label="调度状态" show-overflow-tooltip />
<el-table-column property="address" label="错误消息" show-overflow-tooltip />
<el-table-column property="address" label="运行状态" show-overflow-tooltip />
<el-table-column property="address" label="持续时间" show-overflow-tooltip />
<el-table-column property="address" label="调度时间" width="200" show-overflow-tooltip />
<el-table-column label="运行日志" width="120">
<template #default="scope">
<el-button size="small" plain type="primary" @click="handleDetails(scope.row)">
日志
</el-button>
</template>
</el-table-column>
</el-table>
<el-table :data="tableData" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }">
<el-table-column type="selection" width="40" />
<el-table-column property="number" label="序号" width="55" />
<el-table-column property="taskName" label="任务名称" show-overflow-tooltip />
<el-table-column property="scheduleMode" label="调度模式" show-overflow-tooltip />
<el-table-column property="scheduleStatus" label="调度状态" show-overflow-tooltip />
<el-table-column property="errorMessage" label="错误消息" show-overflow-tooltip />
<el-table-column property="runningStatus" label="运行状态" show-overflow-tooltip />
<el-table-column property="duration" label="持续时间" show-overflow-tooltip />
<el-table-column property="scheduleTime" label="调度时间" width="200" show-overflow-tooltip />
<el-table-column label="运行日志" width="120">
<template #default="scope">
<el-button size="small" plain type="primary" @click="handleDetails(scope.row)">
日志
</el-button>
</template>
</el-table-column>
</el-table>
</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"
@pagination="getData" />
......@@ -76,14 +79,13 @@
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ref, onMounted } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import { Search } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const searchInput = ref('')
const errorValue = ref('')
const taskValue = ref('')
const timeValue = ref('')
const taskOptions = [
......@@ -100,31 +102,17 @@ const taskOptions = [
label: '网',
},
]
const errorOptions = [
{
value: 'task1',
label: '网络中断',
},
{
value: 'task2',
label: '地址不存在',
},
{
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',
status: 0
number: '1',
taskName: 'dsn爬虫任务',
scheduleMode: '自动',
scheduleStatus: '自动',
errorMessage: '无',
runningStatus: '完成',
duration: '10s',
scheduleTime: '2023-05-13 10:00:00',
},
{
name: '1',
......@@ -239,10 +227,19 @@ const handleDetails = (row: any) => {
}
})
}
const goToStatus = () => {
router.push({
path: '/osStatus/list',
})
}
const getData = () => {
console.log('getData');
}
onMounted(() => {
console.log('任务执行记录');
})
</script>
<style scoped>
......@@ -252,19 +249,30 @@ const getData = () => {
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* 表格样式 */
.formStyle {
display: flex;
justify-content: space-around;
padding: 3px;
}
/* 文字样式 */
.el-text {
color: #FFFFFF;
}
.backStyle {
background-image: url("@/assets/picture/back.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 5vh;
width: 5%;
display: flex;
margin-left: 0.8%;
}
</style>
<style>
/* 修改el选择器的样式 */
.el-select__wrapper {
background-color: #1d5484;
......@@ -297,7 +305,13 @@ const getData = () => {
color: #409eff;
}
/* 修改el按钮的边框为none */
.el-button:focus {
outline: none;
}
/* 修改el日期选择器的边框为none */
.el-date-editor {
--el-input-border-color: none
}
</style>
\ No newline at end of file
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