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 1564 additions and 1158 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/Delete/index.vue
<template>
<el-dialog v-model="deleteDialogVisible" title="删除" width="250" center align-center @close="close" draggable>
<div class="text-center">
<span style="color: #fff;font-size: 15px;">确定删除吗？</span>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="handleDelelte">
确定
</el-button>
</div>
</template>
</el-dialog>
<el-dialog v-model="deleteDialogVisible" title="删除" width="250" center align-center @close="close" draggable>
<div class="text-center">
<span style="color: #fff;font-size: 15px;">确定删除吗？</span>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="handleDelelte">
确定
</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
......@@ -19,37 +19,37 @@ import { ref, watch } from 'vue'
import { defineProps } from 'vue';
const props = defineProps({
dialogVisible: {
type: Boolean,
default: false
},
mode: {
type: String,
default: '1'
}
dialogVisible: {
type: Boolean,
default: false
},
mode: {
type: String,
default: '1'
}
})
const emit = defineEmits(['update:dialogVisible', 'confirm'])
const deleteDialogVisible = ref(props.dialogVisible)
// 删除方法
const handleDelelte = () => {
emit('confirm')
deleteDialogVisible.value = false
emit('confirm')
deleteDialogVisible.value = false
}
// 关闭弹窗的方法
const close = () => {
deleteDialogVisible.value = false
deleteDialogVisible.value = false
}
// 监听父组件传过来的值
watch(() => props.dialogVisible,
(newVal) => {
deleteDialogVisible.value = newVal
}
(newVal) => {
deleteDialogVisible.value = newVal
}
)
// 监听组件内的值并向父组件更新
watch(() => deleteDialogVisible.value,
(newVal) => {
emit('update:dialogVisible', newVal)
}
(newVal) => {
emit('update:dialogVisible', newVal)
}
)
</script>
\ No newline at end of file
src/components/Export/index.vue
<template>
<el-dialog v-model="exportDialogVisible" title="导出" width="250" center align-center @close="close" draggable>
<div class="text-center">
<span style="color: #fff;font-size: 15px;">确定导出吗？</span>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="handleExport">
确定
</el-button>
</div>
</template>
</el-dialog>
<el-dialog v-model="exportDialogVisible" title="导出" width="250" center align-center @close="close" draggable>
<div class="text-center">
<span style="color: #fff;font-size: 15px;">确定导出吗？</span>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="handleExport">
确定
</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
......@@ -19,37 +19,37 @@ import { ref, watch } from 'vue'
import { defineProps } from 'vue';
const props = defineProps({
dialogVisible: {
type: Boolean,
default: false
},
mode: {
type: String,
default: '1'
}
dialogVisible: {
type: Boolean,
default: false
},
mode: {
type: String,
default: '1'
}
})
const emit = defineEmits(['update:dialogVisible', 'confirm'])
const exportDialogVisible = ref(props.dialogVisible)
// 导出方法
const handleExport = () => {
emit('confirm')
exportDialogVisible.value = false
emit('confirm')
exportDialogVisible.value = false
}
// 关闭弹窗的方法
const close = () => {
exportDialogVisible.value = false
exportDialogVisible.value = false
}
// 监听父组件传过来的值
watch(() => props.dialogVisible,
(newVal) => {
exportDialogVisible.value = newVal
}
(newVal) => {
exportDialogVisible.value = newVal
}
)
// 监听组件内的值并向父组件更新
watch(() => exportDialogVisible.value,
(newVal) => {
emit('update:dialogVisible', newVal)
}
(newVal) => {
emit('update:dialogVisible', newVal)
}
)
</script>
\ No newline at end of file
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/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/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" />
</div>
</div>
<dsnDataTab v-if="mode === 'DSN数据'">
</dsnDataTab>
<newsDataTab v-if="mode === '新闻'">
</newsDataTab>
<div class="text-left p-s">
<div class="segmentedStyle">
<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">
......@@ -25,68 +23,68 @@ const sizeOptions = ['DSN数据', '新闻']
<style scoped lang="scss">
/* 工具栏样式 */
.toolbarStyle {
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* 表格样式 */
.formStyle {
display: flex;
justify-content: space-around;
padding: 3px;
margin-top: 1%;
display: flex;
justify-content: space-around;
padding: 3px;
margin-top: 1%;
}
/* 文字样式 */
.el-text {
color: #FFFFFF;
color: #FFFFFF;
}
</style>
<style>
.el-input {
--el-input-text-color: #FFFFFF;
--el-input-text-color: #FFFFFF;
}
/* 修改el选择器的样式 */
.el-select__wrapper {
background-color: #1d5484;
box-shadow: none;
background-color: #1d5484;
box-shadow: none;
}
/* 删除el选择器选中时的边框 */
.is-hovering {
box-shadow: none !important;
box-shadow: none !important;
}
/* 修改el输入框的样式 */
.el-input__wrapper {
background-color: #1d5484;
box-shadow: none;
background-color: #1d5484;
box-shadow: none;
}
/* 修改el下拉框的背景颜色 */
.el-select-dropdown {
background-color: #1d5484;
background-color: #1d5484;
}
/* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item {
color: #FFFFFF;
color: #FFFFFF;
}
/* 修改el下拉框选项选中时的文字颜色 */
.el-select-dropdown__item:hover {
color: #409eff;
color: #409eff;
}
/* 修改el日期选择器的边框为none */
.el-date-editor {
--el-input-border-color: none
--el-input-border-color: none
}
.el-button:focus {
outline: none;
outline: none;
}
</style>
\ No newline at end of file
src/views/os-dataDisplay/index.vue
......@@ -24,26 +24,51 @@
</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 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">
.el-button:focus {
outline: none;
outline: none;
}
/* 文字样式 */
.el-text {
color: #FFFFFF;
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
......@@ -19,31 +19,29 @@ const router = useRouter()
const textarea = ref('')
const bactToRecord = () => {
router.push({
path: '/os-taskRecord/list',
})
router.push({
path: '/os-taskRecord/list',
})
}
</script>
<style scoped>
.backStyle{
background-image: url("@/assets/picture/back.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 8vh;
width: 9%;
display: flex;
margin-left: 2.5%;
.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-textarea__inner,.el-input__inner {
background: transparent !important;
color: #FFFFFF;
.el-textarea__inner,
.el-input__inner {
background: transparent !important;
color: #FFFFFF;
}
</style>
\ No newline at end of file
src/views/os-spiderManager/index.vue
......@@ -25,68 +25,79 @@
</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网',
},
{
name: '2',
address: 'sk网',
},
{
name: '3',
address: 'sk网',
},
{
name: '4',
address: 'sk网',
},
{
name: '5',
address: 'sk网',
},
{
name: '6',
address: 'sk网',
},
{
name: '7',
address: 'sk网',
},
{
name: '8',
address: 'sk网',
},
{
name: '9',
address: 'sk网',
},
{
name: '10',
address: 'sk网',
},
{
number: '1',
spiderName: 'sk网爬虫',
},
{
name: '2',
address: 'sk网',
},
{
name: '3',
address: 'sk网',
},
{
name: '4',
address: 'sk网',
},
{
name: '5',
address: 'sk网',
},
{
name: '6',
address: 'sk网',
},
{
name: '7',
address: 'sk网',
},
{
name: '8',
address: 'sk网',
},
{
name: '9',
address: 'sk网',
},
{
name: '10',
address: 'sk网',
},
])
const pageObj = ref({
total: 10,
pageSize: 10,
pageNo: 1
total: 10,
pageSize: 10,
pageNo: 1
})
const handleDetails = (row: any) => {
console.log(row);
console.log(row);
router.push({
path: '/osTaskInformation/list',
query: {
jump: 'yes'
}
})
}
const getData = () => {
console.log('getData');
console.log('getData');
}
onMounted(() => {
})
</script>
<style scoped>
/* 去除按钮边框 */
.el-button:focus {
outline: none;
outline: none;
}
</style>
src/views/os-status/components/dataCard.vue
<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>任务执行统计</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>性能统计</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>
<div class="flex gap-10">
<span class="textStyle">数据统计</span>
<div class="dataCard" @click="goToAllDataPage">
<div class="titleStyle">
<span>数据统计</span>
</div>
<div class="wordStyle">
<span>总数据量: {{ totalDataNumber }} 1230</span>
</div>
<div class="wordStyle">
<span>采集的页面数量: {{ totalPageNumber }} 85</span>
</div>
<div class="wordStyle">
<span>采集的目标数量: {{ totalTargetNumber }} 569</span>
</div>
</div>
<div class="dataCard" @click="goToTaskRecordPage">
<div class="titleStyle">
<span>任务执行统计</span>
</div>
<div class="wordStyle">
<span>任务执行成功统计: {{ successTask }} 36</span>
</div>
<div class="wordStyle">
<span>任务执行失败统计: {{ failTask }} 0</span>
</div>
<div class="wordStyle">
<span>任务异常数统计: {{ unusualTask }} 1</span>
</div>
</div>
<div class="dataCard">
<div class="titleStyle">
<span>性能统计</span>
</div>
<div class="wordStyle">
<span>平均成功率: {{ speed }} 98%</span>
</div>
<div class="wordStyle">
<span>平均错误率: {{ errorRate }} 0%</span>
</div>
<div class="wordStyle">
<span>平均异常率: {{ errorRate }} 2%</span>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
const router = useRouter();
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: ''
}
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: ''
}
})
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>
.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;
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;
font-size: 30px;
margin-top: 5%;
color: #FFFFFF;
}
.wordStyle {
font-size: 24px;
color: #FFFFFF;
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">
<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>
<div class="flex gap-10">
<span class="textStyle">QB数据管理</span>
<div class="dataCard" @click="goToAllDataPage">
<div class="titleStyle">
<span>综合数据</span>
</div>
<div class="iconStyle" />
</div>
<div class="dataCard" @click="goToDSNDataPage">
<div class="titleStyle">
<span>DSN数据</span>
</div>
<div class="iconStyle" />
</div>
<div class="dataCard" @click="goToITUDataPage">
<div class="titleStyle">
<span>ITU数据</span>
</div>
<div class="iconStyle" />
</div>
<div class="dataCard" @click="goToSTDataPage">
<div class="titleStyle">
<span>ST数据</span>
</div>
<div class="iconStyle" />
</div>
</div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
const router = useRouter()
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: ''
}
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: ''
}
})
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;
height: 100%;
border-radius: 5px;
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: 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%;
color: #FFFFFF;
font-size: 30px;
margin-top: 5%;
color: #FFFFFF;
}
.wordStyle {
font-size: 24px;
color: #FFFFFF;
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 class="monitoringCard">
<div class="data-card-wrapper">
<dataCard></dataCard>
</div>
<div class="taskCard">
<span class="textStyle">任务统计</span>
<div class="data-card-wrapper">
<taskCard></taskCard>
</div>
</div>
<div class="taskCard">
<div class="data-card-wrapper">
<taskCard></taskCard>
</div>
<div class="qbCard">
<span class="textStyle">QB数据管理</span>
<div class="data-card-wrapper">
<qbCard></qbCard>
</div>
</div>
<div class="qbCard">
<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: {
type: String,
default: ''
},
desc: {
type: String,
default: ''
}
title: {
type: String,
default: ''
},
desc: {
type: String,
default: ''
}
})
onMounted(() => {
})
</script>
<style lang="scss" scoped>
.card-container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10px;
gap: 30px;
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;
background-image: url("@/assets/picture/box1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
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;
background-image: url("@/assets/picture/box1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
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;
background-image: url("@/assets/picture/box1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 22vh;
width: 96%;
display: flex;
padding: 10px;
}
.textStyle {
writing-mode: vertical-lr;
font-size: 26px;
letter-spacing: 3px;
margin-left: 2%;
color: #FFFFFF;
writing-mode: vertical-lr;
font-size: 26px;
letter-spacing: 3px;
margin-left: 2%;
color: #FFFFFF;
// display: flex;
}
.data-card-wrapper {
flex: 1;
display: flex;
justify-content: center; /* 水平居中 */
// gap: 20px;
flex: 1;
display: flex;
justify-content: center;
/* 水平居中 */
// gap: 20px;
}
</style>
\ No newline at end of file
</style>
\ 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;"> -->
<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>
<div class="flex gap-10">
<span class="textStyle">任务统计</span>
<div class="dataCard" @click="goToDSNTaskRecordPage">
<div class="titleStyle">
<span>DSN爬取任务</span>
</div>
<div class="wordStyle">
<span>任务采集目标数: {{ totalDataNumber }} 638</span>
</div>
<div class="wordStyle">
<span>任务执行成功统计: {{ totalPageNumber }} 79</span>
</div>
<div class="wordStyle">
<span>采集速度: {{ totalTargetNumber }} 324</span>
</div>
<div class="wordStyle">
<span>错误率: {{ totalTargetNumber }} 1%</span>
</div>
</div>
<div class="dataCard" @click="goToITUTaskRecordPage">
<div class="titleStyle">
<span>ITU爬取任务</span>
</div>
<div class="wordStyle">
<span>任务采集目标数: {{ totalDataNumber }} 148</span>
</div>
<div class="wordStyle">
<span>任务执行成功统计: {{ totalPageNumber }} 98</span>
</div>
<div class="wordStyle">
<span>采集速度: {{ totalTargetNumber }} 322</span>
</div>
<div class="wordStyle">
<span>错误率: {{ totalTargetNumber }} 1%</span>
</div>
</div>
<div class="dataCard" @click="goToSTTaskRecordPage">
<div class="titleStyle">
<span>ST爬取任务</span>
</div>
<div class="wordStyle">
<span>任务采集目标数: {{ totalDataNumber }} 136</span>
</div>
<div class="wordStyle">
<span>任务执行成功统计: {{ totalPageNumber }} 86</span>
</div>
<div class="wordStyle">
<span>采集速度: {{ totalTargetNumber }} 342</span>
</div>
<div class="wordStyle">
<span>错误率: {{ totalTargetNumber }} 0%</span>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
const router = useRouter()
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: ''
}
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: ''
}
})
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>
.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;
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;
font-size: 30px;
margin-top: 5%;
color: #FFFFFF;
}
.wordStyle {
font-size: 24px;
color: #FFFFFF;
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
<!-- 任务监控盒子组件 -->
<template>
<div class="card">
<div class="text-left textStyle ">
<span>任务监控</span>
</div>
<div class="flex flex-wrap ">
<taskMonitoringCard></taskMonitoringCard>
</div>
</div>
<div class="card">
<div class="text-left textStyle ">
<span>任务监控</span>
</div>
<div class="flex flex-wrap ">
<taskMonitoringCard></taskMonitoringCard>
</div>
</div>
</template>
<script lang="ts" setup>
import taskMonitoringCard from './taskCard.vue'
defineProps({
title: {
type: String,
default: ''
},
desc: {
type: String,
default: ''
}
title: {
type: String,
default: ''
},
desc: {
type: String,
default: ''
}
})
</script>
<style lang="scss" scoped>
.card {
background: #ffffff;
margin-top: 12px;
border: 1.5px solid rgb(193, 188, 188);
height: 53vh;
width: 95.5%;
display: flex;
gap: 20px;
// flex-wrap: wrap;
.textStyle {
writing-mode: vertical-lr;
font-size: 24px;
letter-spacing: 3px;
// margin-top: -1.5%;
text-align: center;
}
}
background: #ffffff;
margin-top: 12px;
border: 1.5px solid rgb(193, 188, 188);
height: 53vh;
width: 95.5%;
display: flex;
gap: 20px;
// flex-wrap: wrap;
.textStyle {
writing-mode: vertical-lr;
font-size: 24px;
letter-spacing: 3px;
// margin-top: -1.5%;
text-align: center;
}
}
</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-form-item label="用户账号:">
<el-input v-model="taskName" />
</el-form-item>
<el-form-item label="用户名称:">
<el-input v-model="taskFrequency" />
</el-form-item>
</el-form>
<div class="m-t-4">
</div>
<el-form :inline="true">
<el-form-item label="用户备注:">
<el-input v-model="taskName" />
</el-form-item>
<el-form-item label="用户密码:">
<el-input v-model="taskFrequency" />
</el-form-item>
</el-form>
<div class="m-t-4">
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="handleConfirm">
确定
</el-button>
</div>
</template>
</el-dialog>
<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="addNickName" />
</el-form-item>
<el-form-item label="用户名称:" >
<el-input v-model="addUserName" />
</el-form-item>
</el-form>
<div class="m-t-4" />
<el-form :inline="true">
<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 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>
<el-button type="primary" @click="handleConfirm">
确定
</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
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,
default: false
},
mode: {
type: String,
default: 'add'
},
userCount: {
type: String,
default: ''
},
userName: {
type: String,
default: ''
},
userRemark: {
type: String,
default: false
},
userPassword: {
type: String,
default: ''
}
dialogVisible: {
type: Boolean,
default: false
},
mode: {
type: String,
default: 'add'
},
nickName: {
type: String,
default: ''
},
userName: {
type: String,
default: ''
},
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
currentVisible.value = false
}
// 确定的方法
const handleConfirm = () => {
emit('confirm')
currentVisible.value = false
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
}
// 监听props变化，同步给组件内部
watch(() => props.dialogVisible,
(newVal) => {
currentVisible.value = newVal
}
(newVal) => {
currentVisible.value = newVal
}
)
// 监听组件内部状态变化，同步给父组件，这样才能做到控制对话框组件的显隐
watch(() => currentVisible.value,
(newVal) => {
emit('update:dialogVisible', newVal)
}
(newVal) => {
emit('update:dialogVisible', newVal)
}
)
watch(() => props.mode,
(newVal) => {
currentMode.value = newVal
}
(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>
/* 修改弹窗样式 */
.el-dialog {
background: transparent;
background-image: url("@/assets/picture/dialog1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
color: #ffffff;
background: transparent;
background-image: url("@/assets/picture/dialog1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
color: #ffffff;
.el-dialog__title {
color: #ffffff;
}
.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 {
color: #ffffff;
}
.el-form-item__label {
color: #ffffff;
}
}
</style>
<style>
</style>
\ No newline at end of file
src/views/os-system/index.vue
......@@ -43,104 +43,92 @@
</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,
pageSize: 10,
pageNo: 1
total: 12,
pageSize: 10,
pageNo: 1
})
const handleDetails = (row: any) => {
mode.value = '2'
// userCount.value = row.name
// userName.value = row.name
// userRemark.value = row.name
// userPassword.value = row.name
dialogVisible.value = true
console.log(row);
const handleEdit = async (row: any) => {
mode.value = '2'
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);
}
const handleConfirm = (row: any) => {
showDeleteDialog.value = true
const handleDelete = (row: any) => {
showDeleteDialog.value = true
}
const getData = () => {
console.log('getData');
const getData = (number: number) => {
// console.log('getData');
console.log(number);
}
const handleDeleteConfirm = () => {
}
const openAddUserDialog = () => {
mode.value = '1'
dialogVisible.value = true
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>
/* 去除按钮边框 */
.el-button:focus {
outline: none;
outline: none;
}
</style>
<style>
/* 修改弹窗样式 */
.el-dialog {
background-image: url("@/assets/picture/dialog1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url("@/assets/picture/dialog1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
.el-dialog__title {
color: #ffffff;
}
.el-dialog__title {
color: #ffffff;
}
}
/* 修改el输入框的样式 */
.el-input__wrapper {
background-color: #1d5484;
box-shadow: none;
background-color: #1d5484;
box-shadow: none;
}
</style>
src/views/os-taskInformation/components/addTaskDialog.vue
<template>
<el-dialog v-model="currentVisible" title="新增" 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="请输入任务名称" />
</el-form-item>
<el-form-item label="执行时间:">
<el-input v-model="taskFrequency" placeholder="请输入执行时间" />
</el-form-item>
</el-form>
<div class="m-t-4">
</div>
<el-form :inline="true">
<el-form-item label="所属爬虫:">
<el-select v-model="spiderTypeValue" placeholder="请选择爬虫类型" style="width: 183px">
<el-option v-for="item in spiderTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="执行频率:">
<el-input v-model="taskFrequency" placeholder="请输入执行频率" />
</el-form-item>
</el-form>
<div class="m-t-4">
</div>
<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>
<el-button type="primary" @click="handleConfirm">
确定
</el-button>
</div>
</template>
</el-dialog>
<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="请输入任务名称" />
</el-form-item>
<el-form-item label="执行时间:">
<el-input v-model="taskFrequency" placeholder="请输入执行时间" />
</el-form-item>
</el-form>
<div class="m-t-4" />
<el-form :inline="true">
<el-form-item label="所属爬虫:">
<el-select v-model="spiderTypeValue" placeholder="请选择爬虫类型" style="width: 183px">
<el-option v-for="item in spiderTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="执行频率:">
<el-input v-model="taskFrequency" placeholder="请输入执行频率" />
</el-form-item>
</el-form>
<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>
<el-button type="primary" @click="handleConfirm">
确定
</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { ref } from 'vue'
import { defineProps } from 'vue';
import { watch } from 'vue'
const props = defineProps({
dialogVisible: {
type: Boolean,
default: false
},
mode: {
type: String,
default: '1'
},
spiderType: {
type: String,
default: ''
},
frequency: {
type: String,
default: ''
},
taskStatus: {
type: Boolean,
default: false
}
dialogVisible: {
type: Boolean,
default: false
},
mode: {
type: String,
default: '1'
},
spiderType: {
type: String,
default: ''
},
frequency: {
type: String,
default: ''
},
taskStatus: {
type: Boolean,
default: false
}
})
// 向父组件传递dialog值
const emit = defineEmits(['update:dialogVisible', 'confirm'])
......@@ -77,69 +75,70 @@ const taskFrequency = ref('')
const taskSwitchValue = ref(false)
const spiderTypeValue = ref('')
const spiderTypeOptions = ref([
{
value: '选项1',
label: 'DSN爬虫'
},
{
value: '选项2',
label: 'ITU爬虫'
},
{
value: '选项3',
label: 'ST爬虫'
},
{
value: '选项1',
label: 'DSN爬虫'
},
{
value: '选项2',
label: 'ITU爬虫'
},
{
value: '选项3',
label: 'ST爬虫'
},
])
// 关闭的方法
const handleClose = () => {
currentVisible.value = false
currentVisible.value = false
}
// 确定的方法
const handleConfirm = () => {
emit('confirm')
currentVisible.value = false
emit('confirm')
currentVisible.value = false
}
// 监听props变化，同步给组件内部
watch(() => props.dialogVisible,
(newVal) => {
currentVisible.value = newVal
}
(newVal) => {
currentVisible.value = newVal
}
)
// 监听组件内部状态变化，同步给父组件，这样才能做到控制对话框组件的显隐
watch(() => currentVisible.value,
(newVal) => {
emit('update:dialogVisible', newVal)
}
(newVal) => {
emit('update:dialogVisible', newVal)
}
)
watch(() => props.mode,
(newVal) => {
currentMode.value = newVal
}
(newVal) => {
currentMode.value = newVal
}
)
</script>
<style>
/* 修改弹出框样式 */
.el-dialog {
background: transparent;
background-image: url("@/assets/picture/dialog1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
color: #ffffff;
background: transparent;
background-image: url("@/assets/picture/dialog1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
color: #ffffff;
.el-dialog__title {
color: #ffffff;
}
.el-dialog__title {
color: #ffffff;
}
}
/* 修改表单样式 */
.el-form {
.el-form-item__label {
color: #ffffff;
}
.el-form-item__label {
color: #ffffff;
}
}
</style>
src/views/os-taskInformation/components/taskCard.vue
<!-- 任务执行统计卡片组件 -->
<template>
<div class="taskCard p-7" v-for="i in options" :key="i.value">
<div class="flex justify-center">
<el-form-item>
<span class="titleStyle">任务名称</span>
</el-form-item>
</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="danger" @click="deleteTask">删除</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-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>
</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>
</el-space>
</el-form-item>
</div>
</div>
<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 ">
<el-form-item>
<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="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">执行次数: {{ 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">失败次数: {{ 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"/>
<addTaskDialog v-model:dialogVisible="showTaskDialog" @confirm="handleEdit" :mode="editMode" />
<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({
successTask: {
type: String,
default: ''
},
failTask: {
type: String,
default: ''
},
unusualTask: {
type: String,
default: ''
}
successTask: {
type: String,
default: ''
},
failTask: {
type: String,
default: ''
},
unusualTask: {
type: String,
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 = [
{
value: 'year',
label: '近一年',
},
{
value: 'month',
label: '近一月',
},
{
value: 'week',
label: '近一周',
},
{
value: 'day',
label: '近一日',
},
{
value: 'year',
label: '近一年',
},
{
value: 'month',
label: '近一月',
},
]
const taskList = ref([
{
taskId: '1',
taskName: '任务1',
status: 1,
frequency: '1',
executeCount: '2',
successCount: '3',
failCount: '4',
unusualCount: '5'
},
{
taskId: '2',
taskName: '任务2',
status: 0,
frequency: '6',
executeCount: '7',
successCount: '8',
failCount: '9',
unusualCount: '10'
},
{
taskId: '3',
taskName: '任务3',
status: 1,
frequency: '11',
executeCount: '12',
successCount: '13',
failCount: '14',
unusualCount: '15'
},
{
taskId: '4',
taskName: '任务4',
status: 0,
frequency: '16',
executeCount: '17',
successCount: '18',
failCount: '19',
unusualCount: '20'
},
{
taskId: '5',
taskName: '任务5',
status: 1,
frequency: '21',
executeCount: '22',
successCount: '23',
failCount: '24',
unusualCount: '25'
},
{
taskId: '6',
taskName: '任务6',
status: 0,
frequency: '26',
executeCount: '27',
successCount: '28',
failCount: '29',
unusualCount: '30'
},
])
const deleteTask = () => {
deleteMode.value = '1'
showDeleteDialog.value = true
deleteMode.value = '1'
showDeleteDialog.value = true
}
const editTask = () => {
editMode.value = '2'
showTaskDialog.value = true
editMode.value = '2'
showTaskDialog.value = true
}
const goToTaskRecord = () => {
router.push({
path: '/osTaskRecord/list',
query: {
jump: 'yes',
mode: '任务信息'
}
})
}
const changeStatus = (task: any) => {
}
const handleEdit = () => {
......@@ -113,31 +162,59 @@ 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");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-bottom: 20px;
width: 380px;
font-size: 20px;
height: 100%;
border-radius: 7px;
background-image: url("@/assets/picture/box2.png");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-bottom: 20px;
width: 380px;
font-size: 20px;
height: 100%;
border-radius: 7px;
.titleStyle {
font-size: 22px;
margin-top: -5px;
color: #FFFFFF;
}
.titleStyle {
font-size: 22px;
margin-top: -5px;
color: #FFFFFF;
}
.wordStyle {
font-size: 16px;
color: #FFFFFF;
.wordStyle {
font-size: 16px;
color: #FFFFFF;
}
}
}
// 去除按钮边框
.el-button:focus {
outline: none;
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
......@@ -36,11 +36,11 @@
</div>
</div>
<div class="cardStyle">
<taskCard successTask="100" failTask="10" unusualTask="1" />
<div class="pagination w-full flex flex-row-reverse pr-18 m-t-0">
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
@pagination="getData" />
</div>
<taskCard successTask="100" failTask="10" unusualTask="1" />
<div class="pagination w-full flex flex-row-reverse pr-18 m-t-0">
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
@pagination="getData" />
</div>
</div>
<!-- 添加任务对话框组件 -->
<addTaskDialog v-model:dialogVisible="showDialog" @confirm="handleDeleteConfirm" :mode="editMode" />
......@@ -49,112 +49,135 @@
</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 = [
{
value: 'task1',
label: 'sk网',
},
{
value: 'task2',
label: 'nasa网',
},
{
value: 'task3',
label: '网',
},
{
value: 'task1',
label: 'sk网',
},
{
value: 'task2',
label: 'nasa网',
},
{
value: 'task3',
label: '网',
},
]
const pageObj = ref({
total: 10,
pageSize: 10,
pageNo: 1
total: 10,
pageSize: 10,
pageNo: 1
})
const getData = () => {
console.log('getData');
console.log('getData');
}
// 控制对话框显示/隐藏的状态变量
const showDialog = ref(false)
// 处理删除确认
const handleDeleteConfirm = () => {
console.log('用户确认删除')
// 在这里执行实际的删除操作
console.log('用户确认删除')
}
const openTaskDialog = () => {
showDialog.value = true
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;
flex-wrap: wrap;
justify-content: space-around;
margin-top: 1.5%;
padding: 8px;
height: 26vh;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-top: 1.5%;
padding: 8px;
height: 26vh;
}
/* 文本样式 */
.el-text {
color: #FFFFFF;
color: #FFFFFF;
}
/* 工具栏样式 */
.toolbarStyle {
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
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;
display: flex;
justify-content: space-around;
margin-top: 0.5%;
padding: 2px;
}
</style>
<style>
/* 修改el选择器的样式 */
.el-select__wrapper {
background-color: #1d5484;
box-shadow: none;
background-color: #1d5484;
box-shadow: none;
}
/* 删除el选择器选中时的边框 */
.is-hovering {
box-shadow: none !important;
box-shadow: none !important;
}
/* 修改el输入框的样式 */
.el-input__wrapper {
background-color: #1d5484;
box-shadow: none;
background-color: #1d5484;
box-shadow: none;
}
/* 修改el下拉框的背景颜色 */
.el-select-dropdown {
background-color: #1d5484;
background-color: #1d5484;
}
/* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item {
color: #FFFFFF;
color: #FFFFFF;
}
/* 修改el下拉框选项选中时的文字颜色 */
.el-select-dropdown__item:hover {
color: #409eff;
color: #409eff;
}
/* 去除按钮边框 */
.el-button:focus {
outline: none;
outline: none;
}
</style>
\ No newline at end of file
src/views/os-taskRecord/index.vue
......@@ -78,228 +78,247 @@
</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 = [
{
value: 'task1',
label: 'sk网',
},
{
value: 'task2',
label: 'nasa网',
},
{
value: 'task3',
label: '网',
},
]
const errorOptions = [
{
value: 'task1',
label: '网络中断',
},
{
value: 'task2',
label: '地址不存在',
},
{
value: 'task3',
label: '反爬虫',
},
{
value: 'task1',
label: 'sk网',
},
{
value: 'task2',
label: 'nasa网',
},
{
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
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
}, {
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
}
, {
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
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',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
}, {
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
}
, {
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
}
])
const pageObj = ref({
total: 10,
pageSize: 10,
pageNo: 1
total: 10,
pageSize: 10,
pageNo: 1
})
const handleDetails = (row: any) => {
console.log(row);
router.push({
path: '/os-log/list',
query: {
id: row.id
}
})
console.log(row);
router.push({
path: '/os-log/list',
query: {
id: row.id
}
})
}
const goToStatus = () => {
if (route.query.mode === '状态监控') {
router.push({
path: '/osStatus/list',
})
} else {
router.push({
path: '/osTaskInformation/list',
})
}
}
const getData = () => {
console.log('getData');
console.log('getData');
}
onMounted(() => {
})
</script>
<style scoped>
/* 工具栏样式 */
.toolbarStyle {
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* 表格样式 */
.formStyle {
display: flex;
justify-content: space-around;
padding: 3px;
display: flex;
justify-content: space-around;
padding: 3px;
}
/* 文字样式 */
.el-text {
color: #FFFFFF;
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;
box-shadow: none;
background-color: #1d5484;
box-shadow: none;
}
/* 删除el选择器选中时的边框 */
.is-hovering {
box-shadow: none !important;
box-shadow: none !important;
}
/* 修改el输入框的样式 */
.el-input__wrapper {
background-color: #1d5484;
box-shadow: none;
background-color: #1d5484;
box-shadow: none;
}
/* 修改el下拉框的背景颜色 */
.el-select-dropdown {
background-color: #1d5484;
background-color: #1d5484;
}
/* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item {
color: #FFFFFF;
color: #FFFFFF;
}
/* 修改el下拉框选项选中时的文字颜色 */
.el-select-dropdown__item:hover {
color: #409eff;
color: #409eff;
}
/* 修改el按钮的边框为none */
.el-button:focus {
outline: none;
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