Skip to content

F
fk-spider-web
Commit 93eafedc by yzh
Options

feat:修改所有页面的缩进。

parent 2573e0d4
Showing with 1149 additions and 1165 deletions
src/components/Delete/index.vue
<template> <template>
<el-dialog v-model="deleteDialogVisible" title="删除" width="250" center align-center @close="close" draggable> <el-dialog v-model="deleteDialogVisible" title="删除" width="250" center align-center @close="close" draggable>
<div class="text-center"> <div class="text-center">
<span style="color: #fff;font-size: 15px;">确定删除吗？</span> <span style="color: #fff;font-size: 15px;">确定删除吗？</span>
</div> </div>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="close">取消</el-button> <el-button @click="close">取消</el-button>
<el-button type="primary" @click="handleDelelte"> <el-button type="primary" @click="handleDelelte">
确定 确定
</el-button> </el-button>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
...@@ -19,37 +19,37 @@ import { ref, watch } from 'vue' ...@@ -19,37 +19,37 @@ import { ref, watch } from 'vue'
import { defineProps } from 'vue'; import { defineProps } from 'vue';
const props = defineProps({ const props = defineProps({
dialogVisible: { dialogVisible: {
type: Boolean, type: Boolean,
default: false default: false
}, },
mode: { mode: {
type: String, type: String,
default: '1' default: '1'
} }
}) })
const emit = defineEmits(['update:dialogVisible', 'confirm']) const emit = defineEmits(['update:dialogVisible', 'confirm'])
const deleteDialogVisible = ref(props.dialogVisible) const deleteDialogVisible = ref(props.dialogVisible)
// 删除方法 // 删除方法
const handleDelelte = () => { const handleDelelte = () => {
emit('confirm') emit('confirm')
deleteDialogVisible.value = false deleteDialogVisible.value = false
} }
// 关闭弹窗的方法 // 关闭弹窗的方法
const close = () => { const close = () => {
deleteDialogVisible.value = false deleteDialogVisible.value = false
} }
// 监听父组件传过来的值 // 监听父组件传过来的值
watch(() => props.dialogVisible, watch(() => props.dialogVisible,
(newVal) => { (newVal) => {
deleteDialogVisible.value = newVal deleteDialogVisible.value = newVal
} }
) )
// 监听组件内的值并向父组件更新 // 监听组件内的值并向父组件更新
watch(() => deleteDialogVisible.value, watch(() => deleteDialogVisible.value,
(newVal) => { (newVal) => {
emit('update:dialogVisible', newVal) emit('update:dialogVisible', newVal)
} }
) )
</script> </script>
\ No newline at end of file
src/components/Export/index.vue
<template> <template>
<el-dialog v-model="exportDialogVisible" title="导出" width="250" center align-center @close="close" draggable> <el-dialog v-model="exportDialogVisible" title="导出" width="250" center align-center @close="close" draggable>
<div class="text-center"> <div class="text-center">
<span style="color: #fff;font-size: 15px;">确定导出吗？</span> <span style="color: #fff;font-size: 15px;">确定导出吗？</span>
</div> </div>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="close">取消</el-button> <el-button @click="close">取消</el-button>
<el-button type="primary" @click="handleExport"> <el-button type="primary" @click="handleExport">
确定 确定
</el-button> </el-button>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
...@@ -19,37 +19,37 @@ import { ref, watch } from 'vue' ...@@ -19,37 +19,37 @@ import { ref, watch } from 'vue'
import { defineProps } from 'vue'; import { defineProps } from 'vue';
const props = defineProps({ const props = defineProps({
dialogVisible: { dialogVisible: {
type: Boolean, type: Boolean,
default: false default: false
}, },
mode: { mode: {
type: String, type: String,
default: '1' default: '1'
} }
}) })
const emit = defineEmits(['update:dialogVisible', 'confirm']) const emit = defineEmits(['update:dialogVisible', 'confirm'])
const exportDialogVisible = ref(props.dialogVisible) const exportDialogVisible = ref(props.dialogVisible)
// 导出方法 // 导出方法
const handleExport = () => { const handleExport = () => {
emit('confirm') emit('confirm')
exportDialogVisible.value = false exportDialogVisible.value = false
} }
// 关闭弹窗的方法 // 关闭弹窗的方法
const close = () => { const close = () => {
exportDialogVisible.value = false exportDialogVisible.value = false
} }
// 监听父组件传过来的值 // 监听父组件传过来的值
watch(() => props.dialogVisible, watch(() => props.dialogVisible,
(newVal) => { (newVal) => {
exportDialogVisible.value = newVal exportDialogVisible.value = newVal
} }
) )
// 监听组件内的值并向父组件更新 // 监听组件内的值并向父组件更新
watch(() => exportDialogVisible.value, watch(() => exportDialogVisible.value,
(newVal) => { (newVal) => {
emit('update:dialogVisible', newVal) emit('update:dialogVisible', newVal)
} }
) )
</script> </script>
\ No newline at end of file
src/views/os-dataDisplay/components/dsnData/dsnTab.vue
<template> <template>
<div class="text-left p-s"> <div class="text-left p-s">
<div class="segmentedStyle"> <div class="segmentedStyle">
<el-segmented v-model="mode" :options="sizeOptions" style="margin-bottom: 1rem" size="small" /> <el-segmented v-model="mode" :options="sizeOptions" style="margin-bottom: 1rem" size="small" />
</div> </div>
</div> </div>
<dsnDataTab v-if="mode === 'DSN数据'"> <dsnDataTab v-if="mode === 'DSN数据'">
</dsnDataTab> </dsnDataTab>
<newsDataTab v-if="mode === '新闻'">
<newsDataTab v-if="mode === '新闻'"> </newsDataTab>
</newsDataTab>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
...@@ -25,68 +23,68 @@ const sizeOptions = ['DSN数据', '新闻'] ...@@ -25,68 +23,68 @@ const sizeOptions = ['DSN数据', '新闻']
<style scoped lang="scss"> <style scoped lang="scss">
/* 工具栏样式 */ /* 工具栏样式 */
.toolbarStyle { .toolbarStyle {
background-image: url("@/assets/picture/box3.png"); background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
/* 表格样式 */ /* 表格样式 */
.formStyle { .formStyle {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
padding: 3px; padding: 3px;
margin-top: 1%; margin-top: 1%;
} }
/* 文字样式 */ /* 文字样式 */
.el-text { .el-text {
color: #FFFFFF; color: #FFFFFF;
} }
</style> </style>
<style> <style>
.el-input { .el-input {
--el-input-text-color: #FFFFFF; --el-input-text-color: #FFFFFF;
} }
/* 修改el选择器的样式 */ /* 修改el选择器的样式 */
.el-select__wrapper { .el-select__wrapper {
background-color: #1d5484; background-color: #1d5484;
box-shadow: none; box-shadow: none;
} }
/* 删除el选择器选中时的边框 */ /* 删除el选择器选中时的边框 */
.is-hovering { .is-hovering {
box-shadow: none !important; box-shadow: none !important;
} }
/* 修改el输入框的样式 */ /* 修改el输入框的样式 */
.el-input__wrapper { .el-input__wrapper {
background-color: #1d5484; background-color: #1d5484;
box-shadow: none; box-shadow: none;
} }
/* 修改el下拉框的背景颜色 */ /* 修改el下拉框的背景颜色 */
.el-select-dropdown { .el-select-dropdown {
background-color: #1d5484; background-color: #1d5484;
} }
/* 修改el下拉框选项的字体颜色 */ /* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item { .el-select-dropdown__item {
color: #FFFFFF; color: #FFFFFF;
} }
/* 修改el下拉框选项选中时的文字颜色 */ /* 修改el下拉框选项选中时的文字颜色 */
.el-select-dropdown__item:hover { .el-select-dropdown__item:hover {
color: #409eff; color: #409eff;
} }
/* 修改el日期选择器的边框为none */ /* 修改el日期选择器的边框为none */
.el-date-editor { .el-date-editor {
--el-input-border-color: none --el-input-border-color: none
} }
.el-button:focus { .el-button:focus {
outline: none; outline: none;
} }
</style> </style>
\ No newline at end of file
src/views/os-dataDisplay/index.vue
<template> <template>
<div> <div>
<div class="text-left p-4"> <div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToStatus" />
<div class="custom-style"> <div class="text-left p-4 ">
<el-segmented v-model="mode" :options="sizeOptions" style="margin-bottom: 1rem" size="large" /> <div class="custom-style">
</div> <el-segmented v-model="mode" :options="sizeOptions" style="margin-bottom: 1rem" size="default" />
</div> </div>
<!-- 综合数据页面组件 --> </div>
<allDataTab v-if="mode === '综合数据'"> <!-- 综合数据页面组件 -->
</allDataTab> <allDataTab v-if="mode === '综合数据'">
<!-- DSN数据页面组件 --> </allDataTab>
<dsnDataTab v-if="mode === 'DSN数据'"> <!-- DSN数据页面组件 -->
</dsnDataTab> <dsnDataTab v-if="mode === 'DSN数据'">
<!-- ITU数据页面组件 --> </dsnDataTab>
<ituDataTab v-if="mode === 'ITU数据'"> <!-- ITU数据页面组件 -->
</ituDataTab> <ituDataTab v-if="mode === 'ITU数据'">
<!-- ST数据页面组件 --> </ituDataTab>
<stDataTab v-if="mode === 'ST数据'"> <!-- ST数据页面组件 -->
</stDataTab> <stDataTab v-if="mode === 'ST数据'">
</div> </stDataTab>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
...@@ -36,37 +34,39 @@ const mode = ref('综合数据') ...@@ -36,37 +34,39 @@ const mode = ref('综合数据')
const sizeOptions = ['综合数据', 'DSN数据', 'ITU数据', 'ST数据'] const sizeOptions = ['综合数据', 'DSN数据', 'ITU数据', 'ST数据']
const route = useRoute() const route = useRoute()
const router = useRouter() const router = useRouter()
const ooo = ref<any>('数据展示') const modeValue = ref<any>('数据展示')
const goToStatus = () => { const goToStatus = () => {
router.push({ router.push({
path: '/osStatus/list', path: '/osStatus/list',
}) })
} }
onMounted(()=>{ onMounted(() => {
console.log('数据展示'); console.log('数据展示');
console.log(route.query); console.log(route.query);
ooo.value = route.query.mode if (route.query.mode) {
mode.value = ooo.value modeValue.value = route.query.mode
mode.value = modeValue.value
}
}) })
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.el-button:focus { .el-button:focus {
outline: none; outline: none;
} }
/* 文字样式 */ /* 文字样式 */
.el-text { .el-text {
color: #FFFFFF; color: #FFFFFF;
} }
.backStyle { .backStyle {
background-image: url("@/assets/picture/back.png"); background-image: url("@/assets/picture/back.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
height: 5vh; height: 5vh;
width: 5%; width: 5%;
display: flex; display: flex;
margin-left: 0.8%; margin-left: 0.8%;
} }
</style> </style>
src/views/os-log/index.vue
<template> <template>
<div> <div>
<div class="backStyle" @click="bactToRecord()"> <div class="backStyle" @click="bactToRecord()">
</div> </div>
<div class="m-t-4"> <div class="m-t-4" />
<div>
</div> <el-input v-model="textarea" style="width: 93%" :rows="33" type="textarea" placeholder=" " />
<div> </div>
<el-input v-model="textarea" style="width: 93%" :rows="33" type="textarea" placeholder=" " /> </div>
</div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
...@@ -19,31 +17,29 @@ const router = useRouter() ...@@ -19,31 +17,29 @@ const router = useRouter()
const textarea = ref('') const textarea = ref('')
const bactToRecord = () => { const bactToRecord = () => {
router.push({ router.push({
path: '/os-taskRecord/list', path: '/os-taskRecord/list',
}) })
} }
</script> </script>
<style scoped> <style scoped>
.backStyle{ .backStyle {
background-image: url("@/assets/picture/back.png"); background-image: url("@/assets/picture/back.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
height: 5vh; height: 5vh;
width: 5%; width: 5%;
display: flex; display: flex;
margin-left: 0.8%; margin-left: 0.8%;
} }
</style> </style>
<style> <style>
.el-textarea__inner,.el-input__inner { .el-textarea__inner,
background: transparent !important; .el-input__inner {
color: #FFFFFF; background: transparent !important;
color: #FFFFFF;
} }
</style> </style>
\ No newline at end of file
src/views/os-spiderManager/index.vue
<template> <template>
<div> <div>
<div class="mt-20"> <div class="mt-20" />
</div> <div>
<div> <el-table :data="tableData" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }"
<el-table :data="tableData" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" :row-style="{ height: '60px' }">
:cell-style="{ textAlign: 'center' }" :row-style="{ height: '60px' }"> <el-table-column type="selection" width="40" height="40" />
<el-table-column type="selection" width="40" height="40" /> <el-table-column property="number" label="序号" />
<el-table-column property="name" label="序号" /> <el-table-column property="spiderName" label="爬虫名称" show-overflow-tooltip />
<el-table-column property="address" label="爬虫名称" show-overflow-tooltip /> <el-table-column label="查看任务">
<el-table-column label="查看任务"> <template #default="scope">
<template #default="scope"> <el-button type="primary" plain @click="handleDetails(scope.row)">
<el-button type="primary" plain @click="handleDetails(scope.row)"> 任务
任务 </el-button>
</el-button> </template>
</template> </el-table-column>
</el-table-column> </el-table>
</el-table> </div>
</div> <div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4"> <Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize" @pagination="getData" />
@pagination="getData" /> </div>
</div> </div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
...@@ -31,71 +30,71 @@ import { useRouter } from 'vue-router' ...@@ -31,71 +30,71 @@ import { useRouter } from 'vue-router'
const router = useRouter() const router = useRouter()
const tableData = ref([ const tableData = ref([
{ {
name: '1', number: '1',
address: 'sk网', spiderName: 'sk网爬虫',
}, },
{ {
name: '2', name: '2',
address: 'sk网', address: 'sk网',
}, },
{ {
name: '3', name: '3',
address: 'sk网', address: 'sk网',
}, },
{ {
name: '4', name: '4',
address: 'sk网', address: 'sk网',
}, },
{ {
name: '5', name: '5',
address: 'sk网', address: 'sk网',
}, },
{ {
name: '6', name: '6',
address: 'sk网', address: 'sk网',
}, },
{ {
name: '7', name: '7',
address: 'sk网', address: 'sk网',
}, },
{ {
name: '8', name: '8',
address: 'sk网', address: 'sk网',
}, },
{ {
name: '9', name: '9',
address: 'sk网', address: 'sk网',
}, },
{ {
name: '10', name: '10',
address: 'sk网', address: 'sk网',
}, },
]) ])
const pageObj = ref({ const pageObj = ref({
total: 10, total: 10,
pageSize: 10, pageSize: 10,
pageNo: 1 pageNo: 1
}) })
const handleDetails = (row: any) => { const handleDetails = (row: any) => {
console.log(row); console.log(row);
router.push({ router.push({
path: '/os-taskInformation', path: '/os-taskInformation',
}) })
} }
const getData = () => { const getData = () => {
console.log('getData'); console.log('getData');
} }
onMounted(()=>{ onMounted(() => {
console.log('爬虫管理'); console.log('爬虫管理');
}) })
</script> </script>
<style scoped> <style scoped>
/* 去除按钮边框 */ /* 去除按钮边框 */
.el-button:focus { .el-button:focus {
outline: none; outline: none;
} }
</style> </style>
src/views/os-status/components/dataCard.vue
<template> <template>
<div class="flex gap-10"> <div class="flex gap-10">
<span class="textStyle">数据统计</span> <span class="textStyle">数据统计</span>
<div class="dataCard" @click="goToAllDataPage"> <div class="dataCard" @click="goToAllDataPage">
<div class="titleStyle" > <div class="titleStyle">
<span>数据统计</span> <span>数据统计</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>总数据量: {{ totalDataNumber }} 1230</span> <span>总数据量: {{ totalDataNumber }} 1230</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>采集的页面数量: {{ totalPageNumber }} 85</span> <span>采集的页面数量: {{ totalPageNumber }} 85</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>采集的目标数量: {{ totalTargetNumber }} 569</span> <span>采集的目标数量: {{ totalTargetNumber }} 569</span>
</div> </div>
</div> </div>
<div class="dataCard" @click="goToTaskRecordPage"> <div class="dataCard" @click="goToTaskRecordPage">
<div class="titleStyle"> <div class="titleStyle">
<span>任务执行统计</span> <span>任务执行统计</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>任务执行成功统计: {{ successTask }} 36</span> <span>任务执行成功统计: {{ successTask }} 36</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>任务执行失败统计: {{ failTask }} 0</span> <span>任务执行失败统计: {{ failTask }} 0</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>任务异常数统计: {{ unusualTask }} 1</span> <span>任务异常数统计: {{ unusualTask }} 1</span>
</div> </div>
</div> </div>
<div class="dataCard"> <div class="dataCard">
<div class="titleStyle"> <div class="titleStyle">
<span>性能统计</span> <span>性能统计</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>平均成功率: {{ speed }} 98%</span> <span>平均成功率: {{ speed }} 98%</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>平均错误率: {{ errorRate }} 0%</span> <span>平均错误率: {{ errorRate }} 0%</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>平均异常率: {{ errorRate }} 2%</span> <span>平均异常率: {{ errorRate }} 2%</span>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
...@@ -52,56 +52,56 @@ import { useRouter } from 'vue-router'; ...@@ -52,56 +52,56 @@ import { useRouter } from 'vue-router';
const router = useRouter(); const router = useRouter();
defineProps({ defineProps({
totalDataNumber: { totalDataNumber: {
type: String, type: String,
default: '' default: ''
}, },
totalPageNumber: { totalPageNumber: {
type: String, type: String,
default: '' default: ''
}, },
totalTargetNumber: { totalTargetNumber: {
type: String, type: String,
default: '' default: ''
}, },
successTask: { successTask: {
type: String, type: String,
default: '' default: ''
}, },
failTask: { failTask: {
type: String, type: String,
default: '' default: ''
}, },
unusualTask: { unusualTask: {
type: String, type: String,
default: '' default: ''
}, },
speed: { speed: {
type: String, type: String,
default: '' default: ''
}, },
errorRate: { errorRate: {
type: String, type: String,
default: '' default: ''
} }
}) })
const goToAllDataPage = () => { const goToAllDataPage = () => {
router.push({ router.push({
path: '/osDataDisplay/list', path: '/osDataDisplay/list',
query: { query: {
jump: 'yes', jump: 'yes',
mode:'综合数据' mode: '综合数据'
} }
}) })
} }
const goToTaskRecordPage = () => { const goToTaskRecordPage = () => {
router.push({ router.push({
path: '/osTaskRecord/list', path: '/osTaskRecord/list',
query: { query: {
jump: 'yes' jump: 'yes'
} }
}) })
} }
...@@ -109,34 +109,34 @@ const goToTaskRecordPage = () => { ...@@ -109,34 +109,34 @@ const goToTaskRecordPage = () => {
<style lang="scss" scoped> <style lang="scss" scoped>
.dataCard { .dataCard {
background-image: url("@/assets/picture/box2.png"); background-image: url("@/assets/picture/box2.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
// background: #c6ebfc; // background: #c6ebfc;
// border: 1.5px solid rgb(193, 188, 188); // border: 1.5px solid rgb(193, 188, 188);
width: 360px; width: 360px;
height: 100%; height: 100%;
border-radius: 5px; border-radius: 5px;
} }
.titleStyle { .titleStyle {
font-size: 30px; font-size: 30px;
margin-top: 5%; margin-top: 5%;
color: #FFFFFF; color: #FFFFFF;
} }
.wordStyle { .wordStyle {
font-size: 20px; font-size: 20px;
color: #FFFFFF; color: #FFFFFF;
margin-top: 2%; margin-top: 2%;
} }
.textStyle { .textStyle {
writing-mode: vertical-lr; writing-mode: vertical-lr;
font-size: 26px; font-size: 26px;
letter-spacing: 3px; letter-spacing: 3px;
margin-left: 0.5%; margin-left: 0.5%;
color: #FFFFFF; color: #FFFFFF;
// display: flex; // display: flex;
} }
</style> </style>
src/views/os-status/components/qbDataMonitor.vue
<template> <template>
<div class="flex gap-10"> <div class="flex gap-10">
<span class="textStyle">QB数据管理</span> <span class="textStyle">QB数据管理</span>
<div class="dataCard" @click="goToAllDataPage"> <div class="dataCard" @click="goToAllDataPage">
<div class="titleStyle"> <div class="titleStyle">
<span>综合数据</span> <span>综合数据</span>
</div> </div>
<div class="iconStyle"> <div class="iconStyle" />
</div> </div>
</div> <div class="dataCard" @click="goToDSNDataPage">
<div class="dataCard" @click="goToDSNDataPage"> <div class="titleStyle">
<div class="titleStyle"> <span>DSN数据</span>
<span>DSN数据</span> </div>
</div> <div class="iconStyle" />
<div class="iconStyle"> </div>
</div> <div class="dataCard" @click="goToITUDataPage">
</div> <div class="titleStyle">
<div class="dataCard" @click="goToITUDataPage"> <span>ITU数据</span>
<div class="titleStyle"> </div>
<span>ITU数据</span> <div class="iconStyle" />
</div> </div>
<div class="iconStyle"> <div class="dataCard" @click="goToSTDataPage">
</div> <div class="titleStyle">
</div> <span>ST数据</span>
<div class="dataCard" @click="goToSTDataPage"> </div>
<div class="titleStyle"> <div class="iconStyle" />
<span>ST数据</span> </div>
</div> </div>
<div class="iconStyle">
</div>
</div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
...@@ -38,122 +33,123 @@ import { useRouter } from 'vue-router' ...@@ -38,122 +33,123 @@ import { useRouter } from 'vue-router'
const router = useRouter() const router = useRouter()
defineProps({ defineProps({
totalDataNumber: { totalDataNumber: {
type: String, type: String,
default: '' default: ''
}, },
totalPageNumber: { totalPageNumber: {
type: String, type: String,
default: '' default: ''
}, },
totalTargetNumber: { totalTargetNumber: {
type: String, type: String,
default: '' default: ''
}, },
successTask: { successTask: {
type: String, type: String,
default: '' default: ''
}, },
failTask: { failTask: {
type: String, type: String,
default: '' default: ''
}, },
unusualTask: { unusualTask: {
type: String, type: String,
default: '' default: ''
}, },
speed: { speed: {
type: String, type: String,
default: '' default: ''
}, },
errorRate: { errorRate: {
type: String, type: String,
default: '' default: ''
} }
}) })
const goToAllDataPage = () => { const goToAllDataPage = () => {
router.push({ router.push({
path: '/osDataDisplay/list', path: '/osDataDisplay/list',
query: { query: {
mode: '综合数据', mode: '综合数据',
jump:'yes' jump: 'yes'
} }
}) })
} }
const goToDSNDataPage = () => { const goToDSNDataPage = () => {
router.push({ router.push({
path: '/osDataDisplay/list', path: '/osDataDisplay/list',
query: { query: {
mode: 'DSN数据', mode: 'DSN数据',
jump:'yes' jump: 'yes'
} }
}) })
} }
const goToITUDataPage = () => { const goToITUDataPage = () => {
router.push({ router.push({
path: '/osDataDisplay/list', path: '/osDataDisplay/list',
query: { query: {
mode: 'ITU数据', mode: 'ITU数据',
jump:'yes' jump: 'yes'
} }
}) })
} }
const goToSTDataPage = () => { const goToSTDataPage = () => {
router.push({ router.push({
path: '/osDataDisplay/list', path: '/osDataDisplay/list',
query: { query: {
mode: 'ST数据', mode: 'ST数据',
jump:'yes' jump: 'yes'
} }
}) })
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.iconStyle { .iconStyle {
background-image: url("@/assets/picture/wenjianjia.png"); background-image: url("@/assets/picture/wenjianjia.png");
background-size: 100% 120%; background-size: 100% 120%;
background-repeat: no-repeat; background-repeat: no-repeat;
margin-top: 3%; margin-top: 3%;
display: flex; display: flex;
// border: 1.5px solid rgb(193, 188, 188); // border: 1.5px solid rgb(193, 188, 188);
height: 50%; height: 50%;
width: 50%; width: 50%;
} }
.dataCard { .dataCard {
background-image: url("@/assets/picture/box2.png"); background-image: url("@/assets/picture/box2.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
// background: #c6ebfc; // background: #c6ebfc;
// border: 1.5px solid rgb(193, 188, 188); // border: 1.5px solid rgb(193, 188, 188);
width: 260px; width: 260px;
height: 100%; height: 100%;
border-radius: 5px; border-radius: 5px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// justify-content: center; // justify-content: center;
align-items: center; align-items: center;
} }
.titleStyle { .titleStyle {
font-size: 30px; font-size: 30px;
margin-top: 5%; margin-top: 5%;
color: #FFFFFF; color: #FFFFFF;
} }
.wordStyle { .wordStyle {
font-size: 20px; font-size: 20px;
color: #FFFFFF; color: #FFFFFF;
margin-top: 2%; margin-top: 2%;
} }
.textStyle { .textStyle {
writing-mode: vertical-lr; writing-mode: vertical-lr;
font-size: 26px; font-size: 26px;
letter-spacing: 3px; letter-spacing: 3px;
margin-left: 0.5%; margin-left: 0.5%;
color: #FFFFFF; color: #FFFFFF;
// display: flex; // display: flex;
} }
</style> </style>
src/views/os-status/components/statusMonitor.vue
<template> <template>
<div>
<div class="card-container"> <div class="card-container">
<div class="monitoringCard"> <div class="monitoringCard">
<!-- <div class="textStyle"> <div class="data-card-wrapper">
<span>数据统计</span> <dataCard></dataCard>
</div> -->
<div class="data-card-wrapper">
<dataCard></dataCard>
</div>
</div> </div>
<div class="taskCard"> </div>
<div class="data-card-wrapper"> <div class="taskCard">
<taskCard></taskCard> <div class="data-card-wrapper">
</div> <taskCard></taskCard>
</div> </div>
<div class="qbCard"> </div>
<div class="data-card-wrapper"> <div class="qbCard">
<qbCard></qbCard> <div class="data-card-wrapper">
</div> <qbCard></qbCard>
</div> </div>
</div>
</div> </div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
...@@ -28,79 +28,81 @@ import qbCard from '@/views/os-status/components/qbDataMonitor.vue'; ...@@ -28,79 +28,81 @@ import qbCard from '@/views/os-status/components/qbDataMonitor.vue';
import { onMounted } from 'vue'; import { onMounted } from 'vue';
defineProps({ defineProps({
title: { title: {
type: String, type: String,
default: '' default: ''
}, },
desc: { desc: {
type: String, type: String,
default: '' default: ''
} }
}) })
onMounted(()=>{ onMounted(() => {
console.log('状态监控'); console.log('状态监控');
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.card-container { .card-container {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 10px; padding: 10px;
gap: 30px; gap: 30px;
} }
.monitoringCard { .monitoringCard {
background-image: url("@/assets/picture/box1.png"); background-image: url("@/assets/picture/box1.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
height: 22.5vh; height: 22.5vh;
width: 96%; width: 96%;
display: flex; display: flex;
gap: 21.5px; gap: 21.5px;
padding: 10px; padding: 10px;
} }
.taskCard { .taskCard {
background-image: url("@/assets/picture/box1.png"); background-image: url("@/assets/picture/box1.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
height: 26.5vh; height: 26.5vh;
width: 96%; width: 96%;
display: flex; display: flex;
gap: 21.5px; gap: 21.5px;
padding: 10px; padding: 10px;
} }
.qbCard { .qbCard {
background-image: url("@/assets/picture/box1.png"); background-image: url("@/assets/picture/box1.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
height: 22vh; height: 22vh;
width: 96%; width: 96%;
display: flex; display: flex;
padding: 10px; padding: 10px;
} }
.textStyle { .textStyle {
writing-mode: vertical-lr; writing-mode: vertical-lr;
font-size: 26px; font-size: 26px;
letter-spacing: 3px; letter-spacing: 3px;
margin-left: 2%; margin-left: 2%;
color: #FFFFFF; color: #FFFFFF;
// display: flex; // display: flex;
} }
.data-card-wrapper { .data-card-wrapper {
flex: 1; flex: 1;
display: flex; display: flex;
justify-content: center; /* 水平居中 */ justify-content: center;
// gap: 20px; /* 水平居中 */
// gap: 20px;
} }
</style> </style>
\ No newline at end of file
\ No newline at end of file
src/views/os-status/components/taskCard.vue
<template> <template>
<div class="flex gap-10"> <div class="flex gap-10">
<span class="textStyle">任务统计</span> <span class="textStyle">任务统计</span>
<div class="dataCard" @click="goToDSNTaskRecordPage"> <div class="dataCard" @click="goToDSNTaskRecordPage">
<div class="titleStyle"> <div class="titleStyle">
<span>DSN爬取任务</span> <span>DSN爬取任务</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>任务采集目标数: {{ totalDataNumber }} 638</span> <span>任务采集目标数: {{ totalDataNumber }} 638</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>任务执行成功统计: {{ totalPageNumber }} 79</span> <span>任务执行成功统计: {{ totalPageNumber }} 79</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>采集速度: {{ totalTargetNumber }} 324</span> <span>采集速度: {{ totalTargetNumber }} 324</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>错误率: {{ totalTargetNumber }} 1%</span> <span>错误率: {{ totalTargetNumber }} 1%</span>
</div> </div>
</div> </div>
<div class="dataCard" @click="goToITUTaskRecordPage"> <div class="dataCard" @click="goToITUTaskRecordPage">
<div class="titleStyle"> <div class="titleStyle">
<span>ITU爬取任务</span> <span>ITU爬取任务</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>任务采集目标数: {{ totalDataNumber }} 148</span> <span>任务采集目标数: {{ totalDataNumber }} 148</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>任务执行成功统计: {{ totalPageNumber }} 98</span> <span>任务执行成功统计: {{ totalPageNumber }} 98</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>采集速度: {{ totalTargetNumber }} 322</span> <span>采集速度: {{ totalTargetNumber }} 322</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>错误率: {{ totalTargetNumber }} 1%</span> <span>错误率: {{ totalTargetNumber }} 1%</span>
</div> </div>
</div> </div>
<div class="dataCard" @click="goToSTTaskRecordPage"> <div class="dataCard" @click="goToSTTaskRecordPage">
<div class="titleStyle"> <div class="titleStyle">
<span>ST爬取任务</span> <span>ST爬取任务</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>任务采集目标数: {{ totalDataNumber }} 136</span> <span>任务采集目标数: {{ totalDataNumber }} 136</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>任务执行成功统计: {{ totalPageNumber }} 86</span> <span>任务执行成功统计: {{ totalPageNumber }} 86</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>采集速度: {{ totalTargetNumber }} 342</span> <span>采集速度: {{ totalTargetNumber }} 342</span>
</div> </div>
<div class="wordStyle"> <div class="wordStyle">
<span>错误率: {{ totalTargetNumber }} 0%</span> <span>错误率: {{ totalTargetNumber }} 0%</span>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
const router = useRouter() const router = useRouter()
defineProps({ defineProps({
totalDataNumber: { totalDataNumber: {
type: String, type: String,
default: '' default: ''
}, },
totalPageNumber: { totalPageNumber: {
type: String, type: String,
default: '' default: ''
}, },
totalTargetNumber: { totalTargetNumber: {
type: String, type: String,
default: '' default: ''
}, },
successTask: { successTask: {
type: String, type: String,
default: '' default: ''
}, },
failTask: { failTask: {
type: String, type: String,
default: '' default: ''
}, },
unusualTask: { unusualTask: {
type: String, type: String,
default: '' default: ''
}, },
speed: { speed: {
type: String, type: String,
default: '' default: ''
}, },
errorRate: { errorRate: {
type: String, type: String,
default: '' default: ''
} }
}) })
const goToDSNTaskRecordPage = () => { const goToDSNTaskRecordPage = () => {
router.push({ router.push({
path: '/osTaskRecord/list', path: '/osTaskRecord/list',
query: { query: {
mode: 'dsn', mode: 'dsn',
jump:'yes' jump: 'yes'
} }
}) })
} }
const goToITUTaskRecordPage = () => { const goToITUTaskRecordPage = () => {
router.push({ router.push({
path: '/osTaskRecord/list', path: '/osTaskRecord/list',
query: { query: {
mode: 'itu', mode: 'itu',
jump:'yes' jump: 'yes'
} }
}) })
} }
const goToSTTaskRecordPage = () => { const goToSTTaskRecordPage = () => {
router.push({ router.push({
path: '/osTaskRecord/list', path: '/osTaskRecord/list',
query: { query: {
mode: 'st', mode: 'st',
jump:'yes' jump: 'yes'
} }
}) })
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.dataCard { .dataCard {
background-image: url("@/assets/picture/box2.png"); background-image: url("@/assets/picture/box2.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
// background: #c6ebfc; // background: #c6ebfc;
// border: 1.5px solid rgb(193, 188, 188); // border: 1.5px solid rgb(193, 188, 188);
width: 360px; width: 360px;
height: 100%; height: 100%;
border-radius: 5px; border-radius: 5px;
} }
.titleStyle { .titleStyle {
font-size: 30px; font-size: 30px;
margin-top: 5%; margin-top: 5%;
color: #FFFFFF; color: #FFFFFF;
} }
.wordStyle { .wordStyle {
font-size: 20px; font-size: 20px;
color: #FFFFFF; color: #FFFFFF;
margin-top: 2%; margin-top: 2%;
} }
.textStyle { .textStyle {
writing-mode: vertical-lr; writing-mode: vertical-lr;
font-size: 26px; font-size: 26px;
letter-spacing: 3px; letter-spacing: 3px;
margin-left: 0.5%; margin-left: 0.5%;
color: #FFFFFF; color: #FFFFFF;
// display: flex; // display: flex;
} }
</style> </style>
src/views/os-status/components/taskMonitoringBox.vue
<!-- 任务监控盒子组件 --> <!-- 任务监控盒子组件 -->
<template> <template>
<div class="card"> <div class="card">
<div class="text-left textStyle "> <div class="text-left textStyle ">
<span>任务监控</span> <span>任务监控</span>
</div> </div>
<div class="flex flex-wrap "> <div class="flex flex-wrap ">
<taskMonitoringCard></taskMonitoringCard> <taskMonitoringCard></taskMonitoringCard>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import taskMonitoringCard from './taskCard.vue' import taskMonitoringCard from './taskCard.vue'
defineProps({ defineProps({
title: { title: {
type: String, type: String,
default: '' default: ''
}, },
desc: { desc: {
type: String, type: String,
default: '' default: ''
} }
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.card { .card {
background: #ffffff; background: #ffffff;
margin-top: 12px; margin-top: 12px;
border: 1.5px solid rgb(193, 188, 188); border: 1.5px solid rgb(193, 188, 188);
height: 53vh; height: 53vh;
width: 95.5%; width: 95.5%;
display: flex; display: flex;
gap: 20px; gap: 20px;
// flex-wrap: wrap; // flex-wrap: wrap;
.textStyle {
writing-mode: vertical-lr;
font-size: 24px;
letter-spacing: 3px;
// margin-top: -1.5%;
text-align: center;
}
}
.textStyle {
writing-mode: vertical-lr;
font-size: 24px;
letter-spacing: 3px;
// margin-top: -1.5%;
text-align: center;
}
}
</style> </style>
src/views/os-status/index.vue
...@@ -11,20 +11,7 @@ ...@@ -11,20 +11,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue';
import statusMonitor from './components/statusMonitor.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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
src/views/os-system/components/addUserDialog.vue
<template> <template>
<el-dialog v-model="currentVisible" :title="currentMode === '1' ? '新增用户' : '编辑用户'" width="610" center align-center @close="handleClose" draggable> <el-dialog v-model="currentVisible" :title="currentMode === '1' ? '新增用户' : '编辑用户'" width="610" center align-center
<el-form :inline="true"> @close="handleClose" draggable>
<el-form-item label="用户账号:"> <el-form :inline="true">
<el-input v-model="taskName" /> <el-form-item label="用户账号:">
</el-form-item> <el-input v-model="taskName" />
<el-form-item label="用户名称:"> </el-form-item>
<el-input v-model="taskFrequency" /> <el-form-item label="用户名称:">
</el-form-item> <el-input v-model="taskFrequency" />
</el-form> </el-form-item>
<div class="m-t-4"> </el-form>
</div> <div class="m-t-4" />
<el-form :inline="true"> <el-form :inline="true">
<el-form-item label="用户备注:"> <el-form-item label="用户备注:">
<el-input v-model="taskName" /> <el-input v-model="taskName" />
</el-form-item> </el-form-item>
<el-form-item label="用户密码:"> <el-form-item label="用户密码:">
<el-input v-model="taskFrequency" /> <el-input v-model="taskFrequency" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="m-t-4"> <div class="m-t-4">
</div> </div>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="handleClose">取消</el-button> <el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="handleConfirm"> <el-button type="primary" @click="handleConfirm">
确定 确定
</el-button> </el-button>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
import { defineProps } from 'vue'; import { defineProps } from 'vue';
import { watch } from 'vue' import { watch } from 'vue'
const props = defineProps({ const props = defineProps({
dialogVisible: { dialogVisible: {
type: Boolean, type: Boolean,
default: false default: false
}, },
mode: { mode: {
type: String, type: String,
default: 'add' default: 'add'
}, },
userCount: { userCount: {
type: String, type: String,
default: '' default: ''
}, },
userName: { userName: {
type: String, type: String,
default: '' default: ''
}, },
userRemark: { userRemark: {
type: String, type: String,
default: false default: false
}, },
userPassword: { userPassword: {
type: String, type: String,
default: '' default: ''
} }
}) })
// 向父组件传递dialog值 // 向父组件传递dialog值
const emit = defineEmits(['update:dialogVisible', 'confirm']) const emit = defineEmits(['update:dialogVisible', 'confirm'])
...@@ -75,52 +72,53 @@ const taskFrequency = ref('') ...@@ -75,52 +72,53 @@ const taskFrequency = ref('')
// 关闭的方法 // 关闭的方法
const handleClose = () => { const handleClose = () => {
currentVisible.value = false currentVisible.value = false
} }
// 确定的方法 // 确定的方法
const handleConfirm = () => { const handleConfirm = () => {
emit('confirm') emit('confirm')
currentVisible.value = false currentVisible.value = false
} }
// 监听props变化，同步给组件内部 // 监听props变化，同步给组件内部
watch(() => props.dialogVisible, watch(() => props.dialogVisible,
(newVal) => { (newVal) => {
currentVisible.value = newVal currentVisible.value = newVal
} }
) )
// 监听组件内部状态变化，同步给父组件，这样才能做到控制对话框组件的显隐 // 监听组件内部状态变化，同步给父组件，这样才能做到控制对话框组件的显隐
watch(() => currentVisible.value, watch(() => currentVisible.value,
(newVal) => { (newVal) => {
emit('update:dialogVisible', newVal) emit('update:dialogVisible', newVal)
} }
) )
watch(() => props.mode, watch(() => props.mode,
(newVal) => { (newVal) => {
currentMode.value = newVal currentMode.value = newVal
} }
) )
</script> </script>
<style> <style>
/* 修改弹窗样式 */ /* 修改弹窗样式 */
.el-dialog { .el-dialog {
background: transparent; background: transparent;
background-image: url("@/assets/picture/dialog1.png"); background-image: url("@/assets/picture/dialog1.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
color: #ffffff; color: #ffffff;
.el-dialog__title { .el-dialog__title {
color: #ffffff; color: #ffffff;
} }
} }
/* 修改表单样式 */ /* 修改表单样式 */
.el-form { .el-form {
.el-form-item__label { .el-form-item__label {
color: #ffffff; color: #ffffff;
} }
} }
</style> </style>
src/views/os-system/index.vue
<template> <template>
<div> <div>
<div class="text-left p-8"> <div class="text-left p-8">
<el-form inline> <el-form inline>
<el-form-item> <el-form-item>
<el-button type="primary" plain @click="openAddUserDialog">创建用户</el-button> <el-button type="primary" plain @click="openAddUserDialog">创建用户</el-button>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="danger" plain @click="handleConfirm">批量删除</el-button> <el-button type="danger" plain @click="handleConfirm">批量删除</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<el-table :data="tableData" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }" <el-table :data="tableData" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }" :row-style="{ height: '58px' }"> :cell-style="{ textAlign: 'center' }" :row-style="{ height: '58px' }">
<el-table-column type="selection" width="40" /> <el-table-column type="selection" width="40" />
<el-table-column property="name" label="序号" width="55" /> <el-table-column property="number" label="序号" width="55" />
<el-table-column property="name" label="用户名" show-overflow-tooltip /> <el-table-column property="userCount" label="用户账号" show-overflow-tooltip />
<el-table-column property="name" label="用户名称" show-overflow-tooltip /> <el-table-column property="userName" label="用户名称" show-overflow-tooltip />
<el-table-column property="name" label="备注" show-overflow-tooltip /> <el-table-column property="userRemark" label="备注" show-overflow-tooltip />
<el-table-column property="name" label="用户密码" show-overflow-tooltip /> <el-table-column property="userPassword" label="用户密码" show-overflow-tooltip />
<el-table-column property="name" label="创建时间" width="280" show-overflow-tooltip /> <el-table-column property="createTime" label="创建时间" width="280" show-overflow-tooltip />
<el-table-column label="操作" width="220"> <el-table-column label="操作" width="220">
<template #default="scope"> <template #default="scope">
<el-button type="primary" plain @click="handleDetails(scope.row)"> <el-button type="primary" plain @click="handleDetails(scope.row)">
编辑 编辑
</el-button> </el-button>
<el-button type="danger" plain @click="handleConfirm(scope.row)"> <el-button type="danger" plain @click="handleConfirm(scope.row)">
删除 删除
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4"> <div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize" <Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
@pagination="getData" /> @pagination="getData" />
</div> </div>
<!-- 删除弹窗组件 --> <!-- 删除弹窗组件 -->
<deleteDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleDeleteConfirm" @mode="deleteMode" /> <deleteDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleDeleteConfirm" @mode="deleteMode" />
<!-- 创建用户弹窗组件 --> <!-- 创建用户弹窗组件 -->
<addUserDialog v-model:dialogVisible="dialogVisible" :mode="mode" :user-count="userCount" :user-name="userName" <addUserDialog v-model:dialogVisible="dialogVisible" :mode="mode" :user-count="userCount" :user-name="userName"
:user-remark="userRemark" :user-password="userPassword " @confirm="handleConfirm" /> :user-remark="userRemark" :user-password="userPassword" @confirm="handleConfirm" />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
...@@ -57,94 +57,100 @@ const deleteMode = ref('2') ...@@ -57,94 +57,100 @@ const deleteMode = ref('2')
const dialogVisible = ref(false) const dialogVisible = ref(false)
const mode = ref('1') const mode = ref('1')
const tableData = ref([ const tableData = ref([
{ {
name: '1', number: '1',
}, userCount: 'admin',
{ userName: '管理员',
name: '1', userRemark: '-',
}, userPassword: '123456',
{ createTime: '2025-01-01 00:00:00',
name: '1', },
}, {
{ name: '1',
name: '1', },
}, {
{ name: '1',
name: '1', },
}, {
{ name: '1',
name: '1', },
}, {
{ name: '1',
name: '1', },
}, {
{ name: '1',
name: '1', },
}, {
{ name: '1',
name: '1', },
}, {
{ name: '1',
name: '1', },
} {
name: '1',
},
{
name: '1',
}
]) ])
const pageObj = ref({ const pageObj = ref({
total: 10, total: 10,
pageSize: 10, pageSize: 10,
pageNo: 1 pageNo: 1
}) })
const handleDetails = (row: any) => { const handleDetails = (row: any) => {
mode.value = '2' mode.value = '2'
// userCount.value = row.name // userCount.value = row.name
// userName.value = row.name // userName.value = row.name
// userRemark.value = row.name // userRemark.value = row.name
// userPassword.value = row.name // userPassword.value = row.name
dialogVisible.value = true dialogVisible.value = true
console.log(row); console.log(row);
} }
const handleConfirm = (row: any) => { const handleConfirm = (row: any) => {
showDeleteDialog.value = true showDeleteDialog.value = true
} }
const getData = () => { const getData = () => {
console.log('getData'); console.log('getData');
} }
const handleDeleteConfirm = () => { const handleDeleteConfirm = () => {
} }
const openAddUserDialog = () => { const openAddUserDialog = () => {
mode.value = '1' mode.value = '1'
dialogVisible.value = true dialogVisible.value = true
} }
onMounted(()=>{ onMounted(() => {
console.log('系统管理'); console.log('系统管理');
}) })
</script> </script>
<style scoped> <style scoped>
/* 去除按钮边框 */ /* 去除按钮边框 */
.el-button:focus { .el-button:focus {
outline: none; outline: none;
} }
</style> </style>
<style> <style>
/* 修改弹窗样式 */ /* 修改弹窗样式 */
.el-dialog { .el-dialog {
background-image: url("@/assets/picture/dialog1.png"); background-image: url("@/assets/picture/dialog1.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
.el-dialog__title { .el-dialog__title {
color: #ffffff; color: #ffffff;
} }
} }
/* 修改el输入框的样式 */ /* 修改el输入框的样式 */
.el-input__wrapper { .el-input__wrapper {
background-color: #1d5484; background-color: #1d5484;
box-shadow: none; box-shadow: none;
} }
</style> </style>
src/views/os-taskInformation/components/addTaskDialog.vue
<template> <template>
<el-dialog v-model="currentVisible" :title="currentMode === '1' ? '新增' : '修改'" width="610" center align-center @close="handleClose" draggable> <el-dialog v-model="currentVisible" :title="currentMode === '1' ? '新增' : '修改'" width="610" center align-center
<el-form :inline="true" v-if="currentMode === '1'"> @close="handleClose" draggable>
<el-form-item label="任务名称:"> <el-form :inline="true" v-if="currentMode === '1'">
<el-input v-model="taskName" placeholder="请输入任务名称" /> <el-form-item label="任务名称:">
</el-form-item> <el-input v-model="taskName" placeholder="请输入任务名称" />
<el-form-item label="执行时间:"> </el-form-item>
<el-input v-model="taskFrequency" placeholder="请输入执行时间" /> <el-form-item label="执行时间:">
</el-form-item> <el-input v-model="taskFrequency" placeholder="请输入执行时间" />
</el-form> </el-form-item>
<div class="m-t-4"> </el-form>
</div> <div class="m-t-4" />
<el-form :inline="true"> <el-form :inline="true">
<el-form-item label="所属爬虫:"> <el-form-item label="所属爬虫:">
<el-select v-model="spiderTypeValue" placeholder="请选择爬虫类型" style="width: 183px"> <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-option v-for="item in spiderTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="执行频率:"> <el-form-item label="执行频率:">
<el-input v-model="taskFrequency" placeholder="请输入执行频率" /> <el-input v-model="taskFrequency" placeholder="请输入执行频率" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="m-t-4"> <div class="m-t-4" />
</div> <el-form :inline="true">
<el-form :inline="true"> <el-form-item label="启用/停止:">
<el-form-item label="启用/停止:"> <el-switch v-model="taskSwitchValue" class="ml-2"
<el-switch v-model="taskSwitchValue" class="ml-2" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" /> </el-form-item>
</el-form-item> </el-form>
</el-form> <template #footer>
<div class="dialog-footer">
<template #footer> <el-button @click="handleClose">取消</el-button>
<div class="dialog-footer"> <el-button type="primary" @click="handleConfirm">
<el-button @click="handleClose">取消</el-button> 确定
<el-button type="primary" @click="handleConfirm"> </el-button>
确定 </div>
</el-button> </template>
</div> </el-dialog>
</template>
</el-dialog>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'
import { defineProps } from 'vue'; import { defineProps } from 'vue';
import { watch } from 'vue' import { watch } from 'vue'
const props = defineProps({ const props = defineProps({
dialogVisible: { dialogVisible: {
type: Boolean, type: Boolean,
default: false default: false
}, },
mode: { mode: {
type: String, type: String,
default: '1' default: '1'
}, },
spiderType: { spiderType: {
type: String, type: String,
default: '' default: ''
}, },
frequency: { frequency: {
type: String, type: String,
default: '' default: ''
}, },
taskStatus: { taskStatus: {
type: Boolean, type: Boolean,
default: false default: false
} }
}) })
// 向父组件传递dialog值 // 向父组件传递dialog值
const emit = defineEmits(['update:dialogVisible', 'confirm']) const emit = defineEmits(['update:dialogVisible', 'confirm'])
...@@ -77,69 +75,70 @@ const taskFrequency = ref('') ...@@ -77,69 +75,70 @@ const taskFrequency = ref('')
const taskSwitchValue = ref(false) const taskSwitchValue = ref(false)
const spiderTypeValue = ref('') const spiderTypeValue = ref('')
const spiderTypeOptions = ref([ const spiderTypeOptions = ref([
{ {
value: '选项1', value: '选项1',
label: 'DSN爬虫' label: 'DSN爬虫'
}, },
{ {
value: '选项2', value: '选项2',
label: 'ITU爬虫' label: 'ITU爬虫'
}, },
{ {
value: '选项3', value: '选项3',
label: 'ST爬虫' label: 'ST爬虫'
}, },
]) ])
// 关闭的方法 // 关闭的方法
const handleClose = () => { const handleClose = () => {
currentVisible.value = false currentVisible.value = false
} }
// 确定的方法 // 确定的方法
const handleConfirm = () => { const handleConfirm = () => {
emit('confirm') emit('confirm')
currentVisible.value = false currentVisible.value = false
} }
// 监听props变化，同步给组件内部 // 监听props变化，同步给组件内部
watch(() => props.dialogVisible, watch(() => props.dialogVisible,
(newVal) => { (newVal) => {
currentVisible.value = newVal currentVisible.value = newVal
} }
) )
// 监听组件内部状态变化，同步给父组件，这样才能做到控制对话框组件的显隐 // 监听组件内部状态变化，同步给父组件，这样才能做到控制对话框组件的显隐
watch(() => currentVisible.value, watch(() => currentVisible.value,
(newVal) => { (newVal) => {
emit('update:dialogVisible', newVal) emit('update:dialogVisible', newVal)
} }
) )
watch(() => props.mode, watch(() => props.mode,
(newVal) => { (newVal) => {
currentMode.value = newVal currentMode.value = newVal
} }
) )
</script> </script>
<style> <style>
/* 修改弹出框样式 */ /* 修改弹出框样式 */
.el-dialog { .el-dialog {
background: transparent; background: transparent;
background-image: url("@/assets/picture/dialog1.png"); background-image: url("@/assets/picture/dialog1.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
color: #ffffff; color: #ffffff;
.el-dialog__title { .el-dialog__title {
color: #ffffff; color: #ffffff;
} }
} }
/* 修改表单样式 */ /* 修改表单样式 */
.el-form { .el-form {
.el-form-item__label { .el-form-item__label {
color: #ffffff; color: #ffffff;
} }
} }
</style> </style>
src/views/os-taskInformation/components/taskCard.vue
<!-- 任务执行统计卡片组件 --> <!-- 任务执行统计卡片组件 -->
<template> <template>
<div class="taskCard p-7" v-for="i in options" :key="i.value"> <div class="taskCard p-7" v-for="i in options" :key="i.value">
<div class="flex justify-center"> <div class="flex justify-center">
<el-form-item> <el-form-item>
<span class="titleStyle">任务名称</span> <span class="titleStyle">任务名称</span>
</el-form-item> </el-form-item>
</div> </div>
<div class="flex justify-center"> <div class="flex justify-center">
<el-form-item> <el-form-item>
<el-button type="primary" @click="editTask" class="editButton">编辑</el-button> <el-button type="primary" @click="editTask" class="editButton">编辑</el-button>
<el-button type="success">执行记录 </el-button> <el-button type="success">执行记录 </el-button>
<el-button type="danger" @click="deleteTask">删除</el-button> <el-button type="danger" @click="deleteTask">删除</el-button>
</el-form-item> </el-form-item>
</div> </div>
<div class="wordStyle flex justify-center"> <div class="wordStyle flex justify-center">
<el-form-item> <el-form-item>
<el-space> <el-space>
<span class="wordStyle">启用/停止: </span> <span class="wordStyle">启用/停止: </span>
<el-switch v-model="taskSwitch" /> <el-switch v-model="taskSwitch" />
<span class="wordStyle">执行频率: {{ successTask }} </span> <span class="wordStyle">执行频率: {{ successTask }} </span>
</el-space> </el-space>
</el-form-item> </el-form-item>
</div> </div>
<div class="wordStyle flex justify-center"> <div class="wordStyle flex justify-center">
<el-form-item> <el-form-item>
<el-space> <el-space>
<span class="wordStyle">执行次数: {{ failTask }} 个; </span> <span class="wordStyle">执行次数: {{ failTask }} 个; </span>
<span class="wordStyle">成功次数: {{ failTask }} 个</span> <span class="wordStyle">成功次数: {{ failTask }} 个</span>
</el-space> </el-space>
</el-form-item> </el-form-item>
</div> </div>
<div class="wordStyle flex justify-center"> <div class="wordStyle flex justify-center">
<el-form-item> <el-form-item>
<el-space> <el-space>
<span class="wordStyle">失败次数: {{ failTask }} 个; </span> <span class="wordStyle">失败次数: {{ failTask }} 个; </span>
<span class="wordStyle">异常记录: {{ unusualTask }} 个</span> <span class="wordStyle">异常记录: {{ unusualTask }} 个</span>
</el-space> </el-space>
</el-form-item> </el-form-item>
</div> </div>
</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" />
<addTaskDialog v-model:dialogVisible="showTaskDialog" @confirm="handleEdit" :mode="editMode" />
</template> </template>
...@@ -51,18 +50,18 @@ import { ref } from 'vue' ...@@ -51,18 +50,18 @@ import { ref } from 'vue'
import deleteDialog from '@/components/Delete/index.vue' import deleteDialog from '@/components/Delete/index.vue'
import addTaskDialog from './addTaskDialog.vue' import addTaskDialog from './addTaskDialog.vue'
defineProps({ defineProps({
successTask: { successTask: {
type: String, type: String,
default: '' default: ''
}, },
failTask: { failTask: {
type: String, type: String,
default: '' default: ''
}, },
unusualTask: { unusualTask: {
type: String, type: String,
default: '' default: ''
} }
}) })
const editMode = ref('') const editMode = ref('')
const deleteMode = ref('1') const deleteMode = ref('1')
...@@ -70,39 +69,39 @@ const showDeleteDialog = ref(false) ...@@ -70,39 +69,39 @@ const showDeleteDialog = ref(false)
const showTaskDialog = ref(false) const showTaskDialog = ref(false)
const taskSwitch = ref(false) const taskSwitch = ref(false)
const options = [ const options = [
{ {
value: 'year', value: 'year',
label: '近一年', label: '近一年',
}, },
{ {
value: 'month', value: 'month',
label: '近一月', label: '近一月',
}, },
{ {
value: 'week', value: 'week',
label: '近一周', label: '近一周',
}, },
{ {
value: 'day', value: 'day',
label: '近一日', label: '近一日',
}, },
{ {
value: 'year', value: 'year',
label: '近一年', label: '近一年',
}, },
{ {
value: 'month', value: 'month',
label: '近一月', label: '近一月',
}, },
] ]
const deleteTask = () => { const deleteTask = () => {
deleteMode.value = '1' deleteMode.value = '1'
showDeleteDialog.value = true showDeleteDialog.value = true
} }
const editTask = () => { const editTask = () => {
editMode.value = '2' editMode.value = '2'
showTaskDialog.value = true showTaskDialog.value = true
} }
const handleEdit = () => { const handleEdit = () => {
...@@ -120,29 +119,30 @@ const handleDeleteConfirm = () => { ...@@ -120,29 +119,30 @@ const handleDeleteConfirm = () => {
// } // }
// 任务卡片样式 // 任务卡片样式
.taskCard { .taskCard {
background-image: url("@/assets/picture/box2.png"); background-image: url("@/assets/picture/box2.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
margin-bottom: 20px; margin-bottom: 20px;
width: 380px; width: 380px;
font-size: 20px; font-size: 20px;
height: 100%; height: 100%;
border-radius: 7px; border-radius: 7px;
.titleStyle { .titleStyle {
font-size: 22px; font-size: 22px;
margin-top: -5px; margin-top: -5px;
color: #FFFFFF; color: #FFFFFF;
} }
.wordStyle { .wordStyle {
font-size: 16px; font-size: 16px;
color: #FFFFFF; color: #FFFFFF;
} }
} }
// 去除按钮边框 // 去除按钮边框
.el-button:focus { .el-button:focus {
outline: none; outline: none;
} }
</style> </style>
src/views/os-taskInformation/index.vue
<template> <template>
<div> <div>
<div class="m-t-7"> <div class="m-t-7" />
</div>
<div class="text-left p-6 toolbarStyle"> <div class="text-left p-6 toolbarStyle">
<div class="formStyle"> <div class="formStyle">
<el-form inline> <el-form inline>
<el-form-item> <el-form-item>
<el-text class="mx-1">所属爬虫:</el-text> <el-text class="mx-1">所属爬虫:</el-text>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<div> <div>
<el-select v-model="taskValue" placeholder="请选择" style="width: 220px"> <el-select v-model="taskValue" placeholder="请选择" style="width: 220px">
<el-option v-for="item in taskOptions" :key="item.value" :label="item.label" <el-option v-for="item in taskOptions" :key="item.value" :label="item.label" :value="item.value" />
:value="item.value" /> </el-select>
</el-select> </div>
</div> </el-form-item>
</el-form-item> <el-form-item>
<el-form-item> <el-text class="mx-1">任务名称:</el-text>
<el-text class="mx-1">任务名称:</el-text> </el-form-item>
</el-form-item> <el-form-item>
<el-form-item> <el-input v-model="taskValue" placeholder="请输入" style="width: 220px" />
<el-input v-model="taskValue" placeholder="请输入" style="width: 220px" /> </el-form-item>
</el-form-item> <el-form-item>
<el-form-item> <el-space>
<el-space> <el-button type="primary">查询</el-button>
<el-button type="primary">查询</el-button> </el-space>
</el-space> </el-form-item>
</el-form-item> <el-form-item>
<el-form-item> <el-space>
<el-space> <el-button type="primary" @click="openTaskDialog">新建任务</el-button>
<el-button type="primary" @click="openTaskDialog">新建任务</el-button> </el-space>
</el-space> </el-form-item>
</el-form-item> </el-form>
</el-form> </div>
</div>
</div> </div>
<div class="cardStyle"> <div class="cardStyle">
<taskCard successTask="100" failTask="10" unusualTask="1" /> <taskCard successTask="100" failTask="10" unusualTask="1" />
<div class="pagination w-full flex flex-row-reverse pr-18 m-t-0"> <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 :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
@pagination="getData" /> @pagination="getData" />
</div> </div>
</div> </div>
<!-- 添加任务对话框组件 --> <!-- 添加任务对话框组件 -->
<addTaskDialog v-model:dialogVisible="showDialog" @confirm="handleDeleteConfirm" :mode="editMode" /> <addTaskDialog v-model:dialogVisible="showDialog" @confirm="handleDeleteConfirm" :mode="editMode" />
...@@ -57,108 +55,112 @@ import addTaskDialog from './components/addTaskDialog.vue' ...@@ -57,108 +55,112 @@ import addTaskDialog from './components/addTaskDialog.vue'
const editMode = ref('1') const editMode = ref('1')
const taskValue = ref('') const taskValue = ref('')
const taskOptions = [ const taskOptions = [
{ {
value: 'task1', value: 'task1',
label: 'sk网', label: 'sk网',
}, },
{ {
value: 'task2', value: 'task2',
label: 'nasa网', label: 'nasa网',
}, },
{ {
value: 'task3', value: 'task3',
label: '网', label: '网',
}, },
] ]
const pageObj = ref({ const pageObj = ref({
total: 10, total: 10,
pageSize: 10, pageSize: 10,
pageNo: 1 pageNo: 1
}) })
const getData = () => { const getData = () => {
console.log('getData'); console.log('getData');
} }
// 控制对话框显示/隐藏的状态变量 // 控制对话框显示/隐藏的状态变量
const showDialog = ref(false) const showDialog = ref(false)
// 处理删除确认 // 处理删除确认
const handleDeleteConfirm = () => { const handleDeleteConfirm = () => {
console.log('用户确认删除') console.log('用户确认删除')
// 在这里执行实际的删除操作 // 在这里执行实际的删除操作
} }
const openTaskDialog = () => { const openTaskDialog = () => {
showDialog.value = true showDialog.value = true
} }
onMounted(()=>{ onMounted(() => {
console.log('任务信息'); console.log('任务信息');
}) })
</script> </script>
<style scoped> <style scoped>
/* 卡片样式 */ /* 卡片样式 */
.cardStyle { .cardStyle {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; justify-content: space-around;
margin-top: 1.5%; margin-top: 1.5%;
padding: 8px; padding: 8px;
height: 26vh; height: 26vh;
} }
/* 文本样式 */ /* 文本样式 */
.el-text { .el-text {
color: #FFFFFF; color: #FFFFFF;
} }
/* 工具栏样式 */ /* 工具栏样式 */
.toolbarStyle { .toolbarStyle {
background-image: url("@/assets/picture/box3.png"); background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
/* 表单样式 */ /* 表单样式 */
.formStyle { .formStyle {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
margin-top: 1%; margin-top: 1%;
padding: 3px; padding: 3px;
} }
</style> </style>
<style> <style>
/* 修改el选择器的样式 */ /* 修改el选择器的样式 */
.el-select__wrapper { .el-select__wrapper {
background-color: #1d5484; background-color: #1d5484;
box-shadow: none; box-shadow: none;
} }
/* 删除el选择器选中时的边框 */ /* 删除el选择器选中时的边框 */
.is-hovering { .is-hovering {
box-shadow: none !important; box-shadow: none !important;
} }
/* 修改el输入框的样式 */ /* 修改el输入框的样式 */
.el-input__wrapper { .el-input__wrapper {
background-color: #1d5484; background-color: #1d5484;
box-shadow: none; box-shadow: none;
} }
/* 修改el下拉框的背景颜色 */ /* 修改el下拉框的背景颜色 */
.el-select-dropdown { .el-select-dropdown {
background-color: #1d5484; background-color: #1d5484;
} }
/* 修改el下拉框选项的字体颜色 */ /* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item { .el-select-dropdown__item {
color: #FFFFFF; color: #FFFFFF;
} }
/* 修改el下拉框选项选中时的文字颜色 */ /* 修改el下拉框选项选中时的文字颜色 */
.el-select-dropdown__item:hover { .el-select-dropdown__item:hover {
color: #409eff; color: #409eff;
} }
/* 去除按钮边框 */ /* 去除按钮边框 */
.el-button:focus { .el-button:focus {
outline: none; outline: none;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment