Skip to content

F
fk-spider-web
Commit 55269de1 by 周田
Options

Merge branch 'yzh' into 'main' 

修改了任务信息页面的开关组件逻辑

See merge request !6
parents 2d356fa8 d7495360
Showing with 808 additions and 374 deletions
src/api/apiPaths.ts
......@@ -69,3 +69,11 @@ export const statsApi = {
removeStats: '/statsCollection/delete',
clearAllStats: '/statsCollection/clearAll' // TODO 未实现
} as const
export const userApi = {
// 系统用户相关接口
userList: '/user/list',
addUser: '/user/insert',
updateUser: '/user/update',
deleteUser: '/user/delete',
} as const
\ No newline at end of file
src/api/user.ts
import { request, POST } from '@/utils/request'
import type { ApiResponse, QueryParams } from '@/utils/request'
import { authApi } from './apiPaths'
import type { ApiResponse, UserQueryParams } from '@/utils/request'
import { authApi,userApi } from './apiPaths'
// 用户登录
export function login(data: { username: string, password: string }): Promise<ApiResponse> {
......@@ -32,3 +32,39 @@ export function logout(): Promise<ApiResponse> {
method: POST
}) as unknown as Promise<ApiResponse>
}
// 获取用户列表
export function getUserList(data: UserQueryParams) {
return request({
url: userApi.userList,
method: POST,
data
}) as unknown as Promise<ApiResponse>
}
// 新建用户
export function addUser(data: UserQueryParams) {
return request({
url: userApi.addUser,
method: POST,
data
}) as unknown as Promise<ApiResponse>
}
// 更新用户
export function updateUser(data: UserQueryParams) {
return request({
url: userApi.updateUser,
method: POST,
data
}) as unknown as Promise<ApiResponse>
}
// 删除用户
export function deleteUser(data: UserQueryParams) {
return request({
url: userApi.deleteUser,
method: POST,
data
}) as unknown as Promise<ApiResponse>
}
\ No newline at end of file
src/components/pagination/index.vue
......@@ -5,7 +5,7 @@
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/layout/components/Sidebar/index.vue
......@@ -19,7 +19,7 @@ const routes = computed(() => {
const filterHiddenRoutes = (routes: RouteRecordRaw[]): RouteRecordRaw[] => {
return routes.filter((route: any) => {
console.log(route,'每一项');
// console.log(route,'每一项');
// 如果当前路由标记为 hidden，则过滤掉
if (route.meta?.hidden || route.hidden) {
return false;
......
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/utils/request.ts
......@@ -98,3 +98,13 @@ export interface QueryParams {
export const request = (config: RequestConfig) => {
return instance(config);
}
export interface UserQueryParams {
page?: number
size?: number
username?: string
nickname?: string
password?: string
role?: number
status?: boolean
}
\ No newline at end of file
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/dsnData/dsnDataTab.vue
......@@ -14,9 +14,8 @@
<el-text class="mx-1">获取时间:</el-text>
</el-form-item>
<el-form-item>
<el-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
start-placeholder="开始时间" end-placeholder="结束时间" date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss" />
<el-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始时间"
end-placeholder="结束时间" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" />
</el-form-item>
<el-form-item>
<el-text class="mx-1">站点名称:</el-text>
......@@ -44,29 +43,27 @@
</div>
</div>
<div class="m-t-5">
</div>
<div class="m-t-5" />
<div>
<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)">
......@@ -82,8 +79,7 @@
</div>
<div class="detailForm">
<el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose"
draggable>
<el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose" draggable>
<template #header>
<div class="text-center font-size-8">
详情
......@@ -248,8 +244,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数据'">
</dsnDataTab>
<newsDataTab v-if="mode === '新闻'">
</newsDataTab>
</template>
<script setup lang="ts">
......
src/views/os-dataDisplay/components/dsnData/newsDataTab.vue
......@@ -14,9 +14,8 @@
<el-text class="mx-1">获取时间:</el-text>
</el-form-item>
<el-form-item>
<el-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
start-placeholder="开始时间" end-placeholder="结束时间" date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss" />
<el-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始时间"
end-placeholder="结束时间" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" />
</el-form-item>
<el-form-item>
<el-space>
......@@ -37,18 +36,16 @@
</div>
</div>
<div class="m-t-5">
</div>
<div class="m-t-5" />
<div>
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '48px' }"
: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="获取时间" show-overflow-tooltip />
<el-table-column property="number" label="序号" width="55" />
<el-table-column property="newsTitle" label="新闻标题" show-overflow-tooltip />
<el-table-column property="newsSource" label="新闻来源" show-overflow-tooltip />
<el-table-column property="newsDate" label="新闻日期" show-overflow-tooltip />
<el-table-column property="newsGetTime" label="获取时间" show-overflow-tooltip />
<el-table-column label="操作" width="60">
<template #default="scope">
<el-button type="primary" plain link @click="handleDetails(scope.row)">
......@@ -64,8 +61,7 @@
</div>
<div class="detailForm">
<el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose"
draggable>
<el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose" draggable>
<template #header>
<div class="text-center font-size-8">
详情
......@@ -135,8 +131,11 @@ const newsGetTime = ref('')
const newsContent = 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',
newsTitle: 'satellite task',
newsSource: 'nasa',
newsDate: '2025-09-01 12:00:00',
newsGetTime: '2025-09-01 12:00:00',
},
{
name: '1',
......@@ -206,6 +205,7 @@ const handleExport = () => {
margin-bottom: 30px !important;
}
}
/* 工具栏样式 */
.toolbarStyle {
background-image: url("@/assets/picture/box3.png");
......
src/views/os-dataDisplay/components/ituDataTab.vue
......@@ -14,9 +14,8 @@
<el-text class="mx-1">获取时间:</el-text>
</el-form-item>
<el-form-item>
<el-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
start-placeholder="开始时间" end-placeholder="结束时间" date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss" />
<el-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始时间"
end-placeholder="结束时间" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" />
</el-form-item>
<el-form-item>
<el-text class="mx-1">站点名称:</el-text>
......@@ -50,30 +49,29 @@
</div>
</div>
<div class="m-t-5">
</div>
<div class="m-t-5" />
<div>
<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)">
......@@ -88,10 +86,8 @@
</div>
</div>
<div class="detailForm">
<el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose"
draggable>
<el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose" draggable>
<template #header>
<div class="text-center font-size-8">
详情
......@@ -242,9 +238,7 @@
</el-form>
</el-dialog>
</div>
<exportDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleExportConfirm" />
</template>
<script setup lang="ts">
......@@ -303,7 +297,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',
......@@ -362,16 +373,19 @@ const handleExport = () => {
.el-dialog-title {
font-size: 180px;
}
.el-form-item {
margin-bottom: 20px !important;
}
}
/* 工具栏样式 */
.toolbarStyle {
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* 表格样式 */
.formStyle {
display: flex;
......@@ -379,6 +393,7 @@ const handleExport = () => {
padding: 3px;
margin-top: 1%;
}
/* 文字样式 */
.el-text {
color: #FFFFFF;
......
src/views/os-dataDisplay/components/stDataTab.vue
......@@ -14,9 +14,8 @@
<el-text class="mx-1">获取时间:</el-text>
</el-form-item>
<el-form-item>
<el-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
start-placeholder="开始时间" end-placeholder="结束时间" date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss" />
<el-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始时间"
end-placeholder="结束时间" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" />
</el-form-item>
<el-form-item>
<el-text class="mx-1">站点名称:</el-text>
......@@ -50,27 +49,25 @@
</div>
</div>
<div class="m-t-5">
</div>
<div class="m-t-5" />
<div>
<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">
......@@ -87,8 +84,7 @@
</div>
<div class="detailForm">
<el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose"
draggable>
<el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose" draggable>
<template #header>
<div class="text-center font-size-8">
详情
......@@ -191,9 +187,7 @@
</el-form>
</el-dialog>
</div>
<exportDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleExportConfirm" />
</template>
<script setup lang="ts">
......@@ -237,8 +231,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',
......@@ -302,6 +309,7 @@ const handleExport = () => {
margin-bottom: 30px !important;
}
}
/* 工具栏样式 */
.toolbarStyle {
background-image: url("@/assets/picture/box3.png");
......
src/views/os-dataDisplay/index.vue
......@@ -24,7 +24,9 @@
</template>
<script setup lang="ts">
import { ref } from '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'
......@@ -32,7 +34,22 @@ import dsnDataTab from './components/dsnData/dsnTab.vue'
const mode = ref('综合数据')
const sizeOptions = ['综合数据', 'DSN数据', 'ITU数据', 'ST数据']
const route = useRoute()
const router = useRouter()
const modeValue = ref<any>('数据展示')
const goToStatus = () => {
router.push({
path: '/osStatus/list',
})
}
onMounted(() => {
console.log('数据展示');
console.log(route.query);
if (route.query.mode) {
modeValue.value = route.query.mode
mode.value = modeValue.value
}
})
</script>
<style scoped lang="scss">
......@@ -45,5 +62,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
......@@ -27,22 +27,20 @@ const bactToRecord = () => {
<style scoped>
.backStyle{
.backStyle {
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%;
}
</style>
<style>
.el-textarea__inner,.el-input__inner {
.el-textarea__inner,
.el-input__inner {
background: transparent !important;
color: #FFFFFF;
}
......
src/views/os-spiderManager/index.vue
......@@ -25,13 +25,15 @@
</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',
address: 'sk网',
number: '1',
spiderName: 'sk网爬虫',
},
{
name: '2',
......@@ -78,10 +80,19 @@ const pageObj = ref({
})
const handleDetails = (row: any) => {
console.log(row);
router.push({
path: '/osTaskInformation/list',
query: {
jump: 'yes'
}
})
}
const getData = () => {
console.log('getData');
}
onMounted(() => {
})
</script>
<style scoped>
......
src/views/os-status/components/dataCard.vue
<template>
<div class="flex gap-10">
<div class="dataCard">
<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,27 @@ defineProps({
default: ''
}
})
const goToAllDataPage = () => {
router.push({
path: '/osDataDisplay/list',
query: {
jump: 'yes',
mode: '综合数据'
}
})
}
const goToTaskRecordPage = () => {
router.push({
path: '/osTaskRecord/list',
query: {
jump: 'yes',
mode: '状态监控'
}
})
}
</script>
<style lang="scss" scoped>
......@@ -96,13 +121,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 class="iconStyle" />
</div>
<div class="wordStyle">
<span>采集的页面数量: {{ totalPageNumber }} 页</span>
</div>
<div class="wordStyle">
<span>采集的目标数量: {{ totalTargetNumber }} 个</span>
</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 class="iconStyle" />
</div>
<div class="wordStyle">
<span>任务异常数统计: {{ unusualTask }} 个</span>
</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>
<div class="iconStyle" />
</div>
</div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
const router = useRouter()
defineProps({
totalDataNumber: {
type: String,
......@@ -95,28 +66,90 @@ 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>
<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>
</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';
import { onMounted } from 'vue';
defineProps({
title: {
......@@ -37,11 +37,13 @@ defineProps({
default: ''
}
})
onMounted(() => {
})
</script>
<style lang="scss" scoped>
.card-container {
height: 100%;
display: flex;
flex-direction: column;
......@@ -49,38 +51,36 @@ 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;
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;
......@@ -93,14 +93,15 @@ defineProps({
letter-spacing: 3px;
margin-left: 2%;
color: #FFFFFF;
// display: flex;
}
.data-card-wrapper {
flex: 1;
display: flex;
justify-content: center; /* 水平居中 */
justify-content: center;
/* 水平居中 */
// gap: 20px;
}
</style>
\ No newline at end of file
\ No newline at end of file
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>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
const router = useRouter()
defineProps({
totalDataNumber: {
type: String,
......@@ -92,6 +92,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 +137,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/taskMonitoringBox.vue
......@@ -11,7 +11,6 @@
</template>
<script lang="ts" setup>
import taskMonitoringCard from './taskCard.vue'
defineProps({
......@@ -45,6 +44,4 @@ defineProps({
text-align: center;
}
}
</style>
src/views/os-status/index.vue
......@@ -11,20 +11,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import statusMonitor from './components/statusMonitor.vue'
const loading = ref(false);
const statusList = ref([]);
const title = ref(' ');
const timeValue = ref();
onMounted(() => {
});
const changeTime = () => {
console.log(timeValue.value);
}
</script>
<style lang="scss" scoped>
......
src/views/os-system/components/addUserDialog.vue
<template>
<el-dialog v-model="currentVisible" :title="currentMode === '1' ? '新增用户' : '编辑用户'" width="610" center align-center @close="handleClose" draggable>
<el-form :inline="true">
<el-dialog v-model="currentVisible" :title="currentMode === '1' ? '新增用户' : '编辑用户'" width="610" center align-center
@close="handleClose" draggable>
<div v-if="currentMode === '1'">
<el-form :inline="true" >
<el-form-item label="用户账号:">
<el-input v-model="taskName" />
<el-input v-model="addNickName" />
</el-form-item>
<el-form-item label="用户名称:">
<el-input v-model="taskFrequency" />
<el-form-item label="用户名称:" >
<el-input v-model="addUserName" />
</el-form-item>
</el-form>
<div class="m-t-4">
</div>
<div class="m-t-4" />
<el-form :inline="true">
<el-form-item label="用户备注:">
<el-input v-model="taskName" />
<el-form-item label="用户状态:">
<el-select v-model="userStatusValue" placeholder=" " style="width: 180px;">
<el-option v-for="item in userStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="用户密码:">
<el-input v-model="taskFrequency" />
<el-input v-model="userPassword" />
</el-form-item>
</el-form>
<div class="m-t-4" />
<el-form :inline="true">
<el-form-item label="用户角色:">
<el-select v-model="userRoleValue" placeholder=" " style="width: 180px;">
<el-option v-for="item in userRoleOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-form>
</div>
<div class="m-t-4">
</div>
<div v-if="currentMode === '2'">
<el-form :inline="true" v-if="currentMode === '2'">
<el-form-item label="用户名称:" >
<el-input v-model="addNickName" />
</el-form-item>
<el-form-item label="用户角色:">
<el-select v-model="userRoleValue" placeholder=" " style="width: 180px;">
<el-option v-for="item in userRoleOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-form>
<div class="m-t-4" />
<el-form :inline="true" v-if="currentMode === '2'">
<el-form-item label="用户状态:">
<el-select v-model="userStatusValue" placeholder=" " style="width: 180px;">
<el-option v-for="item in userStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="用户密码:">
<el-input v-model="userPassword" />
</el-form-item>
</el-form>
</div>
<div class="m-t-4" />
<template #footer>
<div class="dialog-footer">
<el-button @click="handleClose">取消</el-button>
......@@ -29,16 +65,36 @@
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { defineProps } from 'vue';
import { watch } from 'vue'
import { getUserList, addUser, deleteUser, updateUser } from '@/api/user.ts'
const userStatusValue = ref(true)
const userRoleValue = ref(1)
const userStatusOptions = [
{
value: true,
label: '启用'
},
{
value: '0',
label: '停用'
}
]
const userRoleOptions = [
{
value: false,
label: '管理员'
},
{
value: '0',
label: '普通用户'
}
]
const props = defineProps({
dialogVisible: {
type: Boolean,
......@@ -48,7 +104,7 @@ const props = defineProps({
type: String,
default: 'add'
},
userCount: {
nickName: {
type: String,
default: ''
},
......@@ -56,30 +112,53 @@ const props = defineProps({
type: String,
default: ''
},
userRemark: {
type: String,
id: {
type: Number,
default: false
},
userPassword: {
type: String,
default: ''
},
userStatus: {
type: Boolean,
default: ''
},
userRole: {
type: Number,
default: ''
}
})
// 向父组件传递dialog值
const emit = defineEmits(['update:dialogVisible', 'confirm'])
const emit = defineEmits(['update:dialogVisible', 'confirm','getUserList'])
// 组件的状态
const currentVisible = ref(props.dialogVisible)
const currentMode = ref(props.mode)
const taskName = ref('')
const taskFrequency = ref('')
const addNickName = ref('')
const addUserName = ref('')
const userRemark = ref('')
const userPassword = ref('')
// 关闭的方法
const handleClose = () => {
currentVisible.value = false
}
// 确定的方法
const handleConfirm = () => {
emit('confirm')
const handleConfirm = async () => {
if (currentMode.value === '1') {
await addUser({
nickname: addNickName.value,
username: addUserName.value,
password: userPassword.value,
role: userRoleValue.value,
status: userStatusValue.value
})
console.log(addUserName.value);
emit('getUserList')
} else if (currentMode.value === '2') {
}
currentVisible.value = false
}
......@@ -96,12 +175,32 @@ watch(() => currentVisible.value,
emit('update:dialogVisible', newVal)
}
)
watch(() => props.mode,
(newVal) => {
currentMode.value = newVal
}
)
watch(
// 监听需要同步的 props 集合
[() => props.dialogVisible, () => props.mode, () => props.nickName, () => props.userPassword, () => props.userStatus, () => props.userRole],
// 任一值变化时执行
([newVisible, newMode, newNickName, newPwd, newStatus, newRole]) => {
if (newVisible && newMode === '2') {
addNickName.value = newNickName;
userPassword.value = newPwd;
userStatusValue.value = newStatus;
userRoleValue.value = newRole;
}
// 弹窗关闭时，清空表单
if (!newVisible) {
addNickName.value = '';
addUserName.value = '';
userPassword.value = '';
}
},
{ immediate: true }
);
</script>
<style>
......@@ -116,7 +215,19 @@ watch(() => props.mode,
.el-dialog__title {
color: #ffffff;
}
.el-input__inner{
color: #ffffff;
}
.el-select__wrapper{
background-color:#1d5484 ;
box-shadow: 0,0,0,0;
border: none;
.el-select__placeholder{
color: #ffffff;
}
}
}
/* 修改表单样式 */
.el-form {
.el-form-item__label {
......@@ -124,3 +235,7 @@ watch(() => props.mode,
}
}
</style>
<style>
</style>
\ No newline at end of file
src/views/os-system/index.vue
......@@ -43,72 +43,47 @@
</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'
import { getUserList, addUser, deleteUser, updateUser } from '@/api/user.ts'
const userCount = ref('')
const userId = ref(0)
const nickName = ref('')
const userName = ref('')
const userRemark = ref('')
const userRole = ref(0)
const userStatus = ref(true)
const userPassword = ref('')
const showDeleteDialog = ref(false)
const deleteMode = ref('2')
const dialogVisible = ref(false)
const mode = ref('1')
const tableData = ref([
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
}
])
const tableData = ref()
const pageObj = ref({
total: 10,
total: 12,
pageSize: 10,
pageNo: 1
})
const handleDetails = (row: any) => {
const handleEdit = async (row: any) => {
mode.value = '2'
// userCount.value = row.name
// userName.value = row.name
// userRemark.value = row.name
// userPassword.value = row.name
nickName.value = row.nickname
userName.value = row.username
userRole.value = row.role
userStatus.value = row.status
userPassword.value = row.password
dialogVisible.value = true
console.log(row);
// console.log(row);
}
const handleConfirm = (row: any) => {
const handleDelete = (row: any) => {
showDeleteDialog.value = true
}
const getData = () => {
console.log('getData');
const getData = (number: number) => {
// console.log('getData');
console.log(number);
}
const handleDeleteConfirm = () => {
......@@ -118,6 +93,18 @@ const openAddUserDialog = () => {
mode.value = '1'
dialogVisible.value = true
}
const getUserListData = async () => {
const userList = await getUserList({
page: 1,
size: 10
})
tableData.value = userList.data
console.log(tableData.value);
}
onMounted(async () => {
getUserListData()
})
</script>
<style scoped>
......@@ -138,6 +125,7 @@ const openAddUserDialog = () => {
color: #ffffff;
}
}
/* 修改el输入框的样式 */
.el-input__wrapper {
background-color: #1d5484;
......
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="请输入任务名称" />
......@@ -8,8 +9,7 @@
<el-input v-model="taskFrequency" placeholder="请输入执行时间" />
</el-form-item>
</el-form>
<div class="m-t-4">
</div>
<div class="m-t-4" />
<el-form :inline="true">
<el-form-item label="所属爬虫:">
<el-select v-model="spiderTypeValue" placeholder="请选择爬虫类型" style="width: 183px">
......@@ -20,15 +20,13 @@
<el-input v-model="taskFrequency" placeholder="请输入执行频率" />
</el-form-item>
</el-form>
<div class="m-t-4">
</div>
<div class="m-t-4" />
<el-form :inline="true">
<el-form-item label="启用/停止:">
<el-switch v-model="taskSwitchValue" class="ml-2"
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="handleClose">取消</el-button>
......@@ -136,6 +134,7 @@ watch(() => props.mode,
color: #ffffff;
}
}
/* 修改表单样式 */
.el-form {
.el-form-item__label {
......
src/views/os-taskInformation/components/taskCard.vue
<!-- 任务执行统计卡片组件 -->
<template>
<div class="taskCard p-7" v-for="i in options" :key="i.value">
<div class="taskCard p-6" v-for="task in taskList" :key="task.taskId">
<div class="flex justify-center">
<el-form-item>
<span class="titleStyle">任务名称</span>
</el-form-item>
</div>
<div class="flex justify-center">
<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="danger" @click="deleteTask">删除</el-button>
<el-button type="primary" @click="editTask" class="editButton">编辑</el-button>
<el-button type="success" @click="goToTaskRecord" class="recordButton">执行记录 </el-button>
<el-button type="danger" @click="deleteTask" class="deleteButton">删除</el-button>
</el-form-item>
</div>
<div class="wordStyle flex justify-center">
<el-form-item>
<el-space>
<span class="wordStyle">启用/停止: </span>
<el-switch v-model="taskSwitch" />
<span class="wordStyle">执行频率: {{ successTask }} </span>
<el-switch v-model="task.status" :active-value="1" :inactive-value="0" @change="changeStatus(task)" />
<span class="wordStyle">执行频率: {{ task.frequency }} </span>
</el-space>
</el-form-item>
</div>
<div class="wordStyle flex justify-center">
<el-form-item>
<el-space>
<span class="wordStyle">执行次数: {{ failTask }} 个; </span>
<span class="wordStyle">成功次数: {{ failTask }} 个</span>
<span class="wordStyle">执行次数: {{ task.executeCount }} 个; </span>
<span class="wordStyle">成功次数: {{ task.successCount }} 个</span>
</el-space>
</el-form-item>
</div>
<div class="wordStyle flex justify-center">
<el-form-item>
<el-space>
<span class="wordStyle">失败次数: {{ failTask }} 个; </span>
<span class="wordStyle">异常记录: {{ unusualTask }} 个</span>
<span class="wordStyle">失败次数: {{ task.failCount }} 个; </span>
<span class="wordStyle">异常记录: {{ task.unusualCount }} 个</span>
</el-space>
</el-form-item>
</div>
</div>
<deleteDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleDeleteConfirm" @mode="deleteMode"/>
<deleteDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleDeleteConfirm" @mode="deleteMode" />
<addTaskDialog v-model:dialogVisible="showTaskDialog" @confirm="handleEdit" :mode="editMode" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import deleteDialog from '@/components/Delete/index.vue'
import addTaskDialog from './addTaskDialog.vue'
defineProps({
......@@ -64,37 +64,74 @@ defineProps({
default: ''
}
})
const router = useRouter()
const editMode = ref('')
const deleteMode = ref('1')
const showDeleteDialog = ref(false)
const showTaskDialog = ref(false)
const taskSwitch = ref(false)
const options = [
const taskList = ref([
{
value: 'year',
label: '近一年',
taskId: '1',
taskName: '任务1',
status: 1,
frequency: '1',
executeCount: '2',
successCount: '3',
failCount: '4',
unusualCount: '5'
},
{
value: 'month',
label: '近一月',
taskId: '2',
taskName: '任务2',
status: 0,
frequency: '6',
executeCount: '7',
successCount: '8',
failCount: '9',
unusualCount: '10'
},
{
value: 'week',
label: '近一周',
taskId: '3',
taskName: '任务3',
status: 1,
frequency: '11',
executeCount: '12',
successCount: '13',
failCount: '14',
unusualCount: '15'
},
{
value: 'day',
label: '近一日',
taskId: '4',
taskName: '任务4',
status: 0,
frequency: '16',
executeCount: '17',
successCount: '18',
failCount: '19',
unusualCount: '20'
},
{
value: 'year',
label: '近一年',
taskId: '5',
taskName: '任务5',
status: 1,
frequency: '21',
executeCount: '22',
successCount: '23',
failCount: '24',
unusualCount: '25'
},
{
value: 'month',
label: '近一月',
taskId: '6',
taskName: '任务6',
status: 0,
frequency: '26',
executeCount: '27',
successCount: '28',
failCount: '29',
unusualCount: '30'
},
]
])
const deleteTask = () => {
deleteMode.value = '1'
......@@ -104,6 +141,18 @@ const editTask = () => {
editMode.value = '2'
showTaskDialog.value = true
}
const goToTaskRecord = () => {
router.push({
path: '/osTaskRecord/list',
query: {
jump: 'yes',
mode: '任务信息'
}
})
}
const changeStatus = (task: any) => {
}
const handleEdit = () => {
}
......@@ -113,6 +162,24 @@ const handleDeleteConfirm = () => {
</script>
<style lang="scss" scoped>
// .editButton{
// background: none;
// background-image: url("@/assets/picture/button1.png");
// background-size: 100% 100%;
// background-repeat: no-repeat;
// }
// .recordButton{
// background: none;
// background-image: url("@/assets/picture/button2.png");
// background-size: 100% 100%;
// background-repeat: no-repeat;
// }
// .deleteButton{
// background: none;
// background-image: url("@/assets/picture/button3.png");
// background-size: 100% 100%;
// background-repeat: no-repeat;
// }
// 任务卡片样式
.taskCard {
background-image: url("@/assets/picture/box2.png");
......@@ -136,8 +203,18 @@ const handleDeleteConfirm = () => {
}
}
// 去除按钮边框
.el-button:focus {
outline: none;
color: #ffffff;
border: none;
}
</style>
<style>
/* .el-button{
color: #ffffff;
border: none;
} */
</style>
\ No newline at end of file
src/views/os-taskInformation/index.vue
......@@ -49,11 +49,14 @@
</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'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
const route = useRoute()
const router = useRouter()
const editMode = ref('1')
const taskValue = ref('')
const taskOptions = [
......@@ -84,15 +87,31 @@ const showDialog = ref(false)
// 处理删除确认
const handleDeleteConfirm = () => {
console.log('用户确认删除')
// 在这里执行实际的删除操作
}
const openTaskDialog = () => {
showDialog.value = true
}
const goToTaskInformation = () => {
router.push({ path: '/osSpiderManager/list' })
}
onMounted(() => {
})
</script>
<style scoped>
/* 返回样式 */
.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%;
}
/* 卡片样式 */
.cardStyle {
display: flex;
......@@ -102,22 +121,25 @@ const openTaskDialog = () => {
padding: 8px;
height: 26vh;
}
/* 文本样式 */
.el-text {
color: #FFFFFF;
}
/* 工具栏样式 */
.toolbarStyle {
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* 表单样式 */
.formStyle {
display: flex;
justify-content: space-around;
margin-top: 1%;
padding: 3px;
margin-top: 0.5%;
padding: 2px;
}
</style>
......@@ -153,6 +175,7 @@ const openTaskDialog = () => {
.el-select-dropdown__item:hover {
color: #409eff;
}
/* 去除按钮边框 */
.el-button:focus {
outline: none;
......
src/views/os-taskRecord/index.vue
......@@ -78,14 +78,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 = [
......@@ -102,31 +101,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',
......@@ -241,10 +226,27 @@ const handleDetails = (row: any) => {
}
})
}
const goToStatus = () => {
if (route.query.mode === '状态监控') {
router.push({
path: '/osStatus/list',
})
} else {
router.push({
path: '/osTaskInformation/list',
})
}
}
const getData = () => {
console.log('getData');
}
onMounted(() => {
})
</script>
<style scoped>
......@@ -254,19 +256,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;
......@@ -299,7 +312,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
vite.config.ts
......@@ -30,7 +30,7 @@ export default defineConfig({
proxy: {
// 代理API请求，使用更精确的路径匹配
'/api': {
target: 'http://127.0.0.1:5000/',
target: 'http://192.168.0.200:5001/',
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