Skip to content

F
fk-spider-web
Commit 79046fce by yzh
Options

feat:完成了任务执行记录静态页面

parent 0c43dc2e
Showing with 285 additions and 128 deletions
src/components/pagination/index.vue 0 → 100644
<!-- 基于 ruoyi-vue3 的 Pagination 重构，核心是简化无用的属性，并使用 ts 重写 -->
<template>
<el-pagination
v-show="total > 0"
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:background="true"
:page-sizes="[5,10, 20, 30, 50, 100]"
:pager-count="pagerCount"
:total="total"
class="mt-4"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
defineOptions({ name: 'Pagination' })
const props = defineProps({
// 总条目数
total: {
required: true,
type: Number
},
// 当前页数：pageNo
page: {
type: Number,
default: 1
},
// 每页显示条目个数：pageSize
limit: {
type: Number,
default: 20
},
// 设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠
// 移动端页码按钮的数量端默认值 5
pagerCount: {
type: Number,
default: document.body.clientWidth < 992 ? 5 : 7
}
})
const emit = defineEmits(['update:page', 'update:limit', 'pagination'])
const currentPage = computed({
get() {
return props.page
},
set(val) {
// 触发 update:page 事件，更新 limit 属性，从而更新 pageNo
emit('update:page', val)
}
})
const pageSize = computed({
get() {
return props.limit
},
set(val) {
// 触发 update:limit 事件，更新 limit 属性，从而更新 pageSize
emit('update:limit', val)
}
})
const handleSizeChange = (val:number) => {
// 如果修改后超过最大页面，强制跳转到第 1 页
if (currentPage.value * val > props.total) {
currentPage.value = 1
}
// 触发 pagination 事件，重新加载列表
emit('pagination', { page: currentPage.value, limit: val })
}
const handleCurrentChange = (val:number) => {
// 触发 pagination 事件，重新加载列表
emit('pagination', { page: val, limit: pageSize.value })
}
</script>
src/components/search/index.vue 0 → 100644
<template>
<div>
<span>关键词搜索</span>
<el-input v-model="input2" style="width: 240px" placeholder="Search" :prefix-icon="Search" />
</div>
</template>
<script>
const props = defineProps({
to: {
type: String,
required: true
}
})
</script>
\ No newline at end of file
src/views/os-status/components/dataCard.vue
<template>
<div class="flex gap-21">
<div class="dataCard">
<div class="titleStyle">
<span>数据统计</span>
......@@ -13,6 +14,33 @@
<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>
</div>
</template>
......@@ -29,6 +57,26 @@ defineProps({
totalTargetNumber: {
type: String,
default: ''
},
successTask: {
type: String,
default: ''
},
failTask: {
type: String,
default: ''
},
unusualTask: {
type: String,
default: ''
},
speed: {
type: String,
default: ''
},
errorRate: {
type: String,
default: ''
}
})
</script>
......@@ -36,17 +84,16 @@ defineProps({
<style lang="scss" scoped>
.dataCard {
background: #eae6e6;
margin-bottom: 20px;
border: 1.5px solid rgb(193, 188, 188);
width: 400px;
// position: relative;
// left: 80px;
height: 14vh;
border-radius: 5px;
.titleStyle{
.titleStyle {
font-size: 22px;
}
.wordStyle{
.wordStyle {
font-size: 16px;
}
}
......
src/views/os-status/components/integratedMonitoringBox.vue
<!-- 综合监控盒子组件 -->
<template>
<div class="card">
<div class="text-left textStyle ">
<span>综合监控</span>
</div>
<dataCard>
</dataCard>
</div>
</template>
<script lang="ts" setup>
import dataCard from './dataCard.vue'
import taskCard from './taskCard.vue'
import powerCard from './powerCard.vue'
defineProps({
title: {
......@@ -29,7 +33,8 @@ defineProps({
border: 1.5px solid rgb(193, 188, 188);
height: 13.5vh;
width: 95.5%;
display: flex;
gap: 21.5px;
.textStyle {
writing-mode: vertical-lr;
font-size: 24px;
......@@ -37,16 +42,5 @@ defineProps({
text-align: center;
}
.layoutStyle {
// margin-top: -110px;
background: #eae6e6;
margin-bottom: 20px;
border: 1.5px solid rgb(193, 188, 188);
width: 400px;
// left: 16px;
font-size: 20px;
height: 15vh;
border-radius: 5px;
}
}
</style>
src/views/os-status/components/powerCard.vue deleted 100644 → 0
<!-- 性能统计卡片组件 -->
<template>
<div class="powerCard">
<div class="titleStyle">
<span>性能统计</span>
</div>
<div class="wordStyle">
<span>采集速度: {{ speed }}</span>
</div>
<div class="wordStyle">
<span>错误率: {{ errorRate }}% </span>
</div>
</div>
</template>
<script lang="ts" setup>
defineProps({
speed: {
type: String,
default: ''
},
errorRate: {
type: String,
default: ''
}
})
</script>
<style lang="scss" scoped>
.powerCard {
background: #eae6e6;
margin-bottom: 20px;
border: 1.5px solid rgb(193, 188, 188);
width: 400px;
position: absolute;
left: 70.5%;
height: 14vh;
text-align: center;
border-radius: 5px;
.titleStyle{
font-size: 22px;
}
.wordStyle{
font-size: 16px;
}
}
</style>
src/views/os-status/components/taskCard.vue deleted 100644 → 0
<!-- 任务执行统计卡片组件 -->
<template>
<div class="taskCard">
<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>
</template>
<script lang="ts" setup>
defineProps({
successTask: {
type: String,
default: ''
},
failTask: {
type: String,
default: ''
},
unusualTask: {
type: String,
default: ''
}
})
</script>
<style lang="scss" scoped>
.taskCard {
background: #eae6e6;
margin-bottom: 20px;
border: 1.5px solid rgb(193, 188, 188);
width: 400px;
// position: absolute;
// left: 38.5%;
font-size: 20px;
height: 14vh;
border-radius: 5px;
.titleStyle{
font-size: 22px;
}
.wordStyle{
font-size: 16px;
}
}
</style>
src/views/os-status/components/taskMonitoringBox.vue
......@@ -4,7 +4,7 @@
<div class="text-left textStyle ">
<span>任务监控</span>
</div>
<div class="flex flex-wrap rightBox">
<div class="flex flex-wrap ">
<taskMonitoringCard></taskMonitoringCard>
</div>
</div>
......@@ -44,11 +44,6 @@ defineProps({
// margin-top: -1.5%;
text-align: center;
}
.rightBox{
position: relative;
left: 60px;
}
}
......
src/views/os-status/components/taskMonitoringCard.vue
<!-- 任务执行统计卡片组件 -->
<template>
<div class="taskCard m-r-22" v-for="i in options" :key="i">
<div class="taskCard m-r-21" v-for="i in options" :key="i.value">
<div class="titleStyle">
<span>任务</span>
<span> 任务状况:</span>
......@@ -86,7 +86,6 @@ const options = [
margin-bottom: 20px;
border: 1.5px solid rgb(193, 188, 188);
width: 400px;
// left: 16px;
font-size: 20px;
height: 15vh;
border-radius: 5px;
......
src/views/os-taskInformation/index.vue
<template>
111
</template>
<script>
</script>
\ No newline at end of file
src/views/os-taskRecord/index.vue
<template>
<div class="text-left p-10">
<el-form inline>
<el-form-item label="任务选择:">
<el-select v-model="taskValue" placeholder=" " style="width: 240px">
<el-option v-for="item in taskOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="异常选择:">
<el-select v-model="errorValue" placeholder=" " style="width: 240px">
<el-option v-for="item in taskOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="时间:">
<el-date-picker v-model="timeValue" type="datetimerange" range-separator="-" start-placeholder="开始时间"
end-placeholder="结束时间" />
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">查询</el-button>
<el-button type="danger">批量确认</el-button>
</el-space>
</el-form-item>
</el-form>
</div>
<el-table :data="tableData" style="width: 100%" border>
<el-table-column type="selection" width="55" />
<el-table-column property="name" label="序号" width="60" />
<el-table-column property="address" label="任务名称" width="150" show-overflow-tooltip />
<el-table-column property="address" label="执行结果" width="150" show-overflow-tooltip />
<el-table-column property="address" label="收集数" width="130" show-overflow-tooltip />
<el-table-column property="address" label="丢弃数" width="130" show-overflow-tooltip />
<el-table-column property="address" label="异常信息" width="170" show-overflow-tooltip />
<el-table-column property="address" label="持续时间" width="170" show-overflow-tooltip />
<el-table-column property="address" label="开始时间" width="170" show-overflow-tooltip />
<el-table-column property="address" label="结束时间" width="170" show-overflow-tooltip />
<el-table-column label="操作">
<template #default="scope">
<el-button size="small" type="success" @click="handleDetails(scope.row)">
详情
</el-button>
<el-button size="small" type="danger" @click="handleConfirm(scope.row)">
异常确认
</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
@pagination="getData" />
<!-- <el-pagination background v-model:current-page="currentPage4" v-model:page-size="pageSize4"
:page-sizes="[10, 20, 50, 100]" :size="paginationSize" :disabled="disabled"
layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
@current-change="handleCurrentChange" /> -->
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Pagination from '@/components/pagination/index.vue'
const errorValue = ref('')
const taskValue = ref('')
const timeValue = ref('')
const taskOptions = [
{
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',
}
])
const pageObj = ref({
total: 10,
pageSize: 10,
pageNo: 1
})
const paginationSize = ref('default')
const disabled = ref(false)
const background = ref(false)
const currentPage4 = ref(4)
const pageSize4 = ref(10)
const handleSizeChange = (val: number) => {
}
const handleCurrentChange = (val: number) => {
}
const handleDetails = (row: any) => {
console.log(row);
}
const handleConfirm = (row: any) => {
console.log(row);
}
const getData = () => {
console.log('getData');
}
</script>
<style scoped></style>
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