Skip to content

F
fk-spider-web
Commit 1838255a by liucan
Options

feat:新增状态监控页loading效果，重写表单搜索栏组件，调整文字排版

parent 56d11da4
Showing with 594 additions and 290 deletions
src/assets/picture/data-icon.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 20 20"><g fill="none"><path fill="url(#SVG4JAgqc9r)" d="M16 17V5.5a.5.5 0 0 0-.812-.39l-4.735 3.787l-3.205-1.831a.5.5 0 0 0-.451-.023L3 8.731V17z"/><path fill="url(#SVGazSFLmzC)" fill-opacity="0.3" d="M16 17V5.5a.5.5 0 0 0-.812-.39l-4.735 3.787l-3.205-1.831a.5.5 0 0 0-.451-.023L3 8.731V17z"/><path fill="url(#SVGctjeee0c)" fill-opacity="0.3" d="M16 17V5.5a.5.5 0 0 0-.812-.39l-4.735 3.787l-3.205-1.831a.5.5 0 0 0-.451-.023L3 8.731V17z"/><path fill="url(#SVGZhcbtstm)" fill-opacity="0.3" d="M16 17V5.5a.5.5 0 0 0-.812-.39l-4.735 3.787l-3.205-1.831a.5.5 0 0 0-.451-.023L3 8.731V17z"/><path fill="url(#SVGaypZDdDD)" d="M2.75 2a.75.75 0 0 1 .75.75v12.5c0 .69.56 1.25 1.25 1.25h12.5a.75.75 0 0 1 0 1.5H4.75A2.75 2.75 0 0 1 2 15.25V2.75A.75.75 0 0 1 2.75 2"/><defs><linearGradient id="SVG4JAgqc9r" x1="-1.5" x2="20" y1="6.5" y2="19" gradientUnits="userSpaceOnUse"><stop offset=".164" stop-color="#3bd5ff"/><stop offset=".537" stop-color="#9c6cfe"/><stop offset=".908" stop-color="#e656eb"/></linearGradient><linearGradient id="SVGctjeee0c" x1="9.5" x2="9.5" y1="15" y2="17" gradientUnits="userSpaceOnUse"><stop stop-color="#163697" stop-opacity="0"/><stop offset="1" stop-color="#163697"/></linearGradient><linearGradient id="SVGZhcbtstm" x1="5" x2="3" y1="13.5" y2="13.5" gradientUnits="userSpaceOnUse"><stop stop-color="#163697" stop-opacity="0"/><stop offset="1" stop-color="#163697"/></linearGradient><linearGradient id="SVGaypZDdDD" x1="16.5" x2="2.498" y1="3" y2="23.849" gradientUnits="userSpaceOnUse"><stop stop-color="#70777d"/><stop offset="1" stop-color="#b9c0c7"/></linearGradient><radialGradient id="SVGazSFLmzC" cx="0" cy="0" r="1" gradientTransform="matrix(-10.00002 8.99995 -9.1043 -10.11597 14 7)" gradientUnits="userSpaceOnUse"><stop offset=".636" stop-color="#0fafff" stop-opacity="0"/><stop offset=".962" stop-color="#0067bf"/></radialGradient></defs></g></svg>
\ No newline at end of file
src/components/MenuTitle.vue 0 → 100644
<template>
<div style="margin-bottom: 0" class="menu-title">
<div class="title">{{ props.title }}</div>
<div class="low-titme">{{ props.subtitle }}</div>
</div>
</template>
<script setup lang="ts">
const props = defineProps<{
title?: string;
subtitle?: string;
}>();
</script>
<style scoped>
.title {
text-align: left;
font-size: 18px;
font-weight: 500;
color: white;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.low-titme {
color: rgba(255, 255, 255, 0.8);
text-align: left;
margin-left: 20px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.menu-title {
padding: 20px 0 10px 20px;
user-select: none;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 0 10px rgba(255, 255, 255, 0.05);
}
</style>
src/components/TableSearch.vue 0 → 100644
<template>
<div class="box">
<div class="left"></div>
<div class="content">
<slot></slot>
</div>
<div class="right"></div>
</div>
</template>
<script setup lang="ts"></script>
<style scoped>
.box {
position: relative;
}
.content {
width: 95%;
height: 80px;
margin: auto;
border: 1.5px solid #0270b6;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-top-right-radius: 20px;
border-left: none;
border-right: none;
background-image: linear-gradient(
120deg,
rgba(7, 47, 70, 0.6) 0%,
/* 起始色：80% 透明度 */ rgba(6, 20, 37, 0.4) 100% /* 结束色：60% 透明度 */
);
}
.left {
width: 50px;
height: 40px;
background-color: white;
position: absolute;
top: 50%;
transform: translateY(-50%);
background-image: linear-gradient(to right, #00a8ff, #003366);
}
.right {
width: 50px;
height: 40px;
background-color: white;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
background-image: linear-gradient(to left, #00a8ff, #003366);
}
</style>
src/layout/components/Navbar.vue
<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/user'
import { useAppStore } from '@/store/app'
import { storeToRefs } from 'pinia'
import Breadcrumb from '@/components/Breadcrumb/index.vue'
import Hamburger from '@/components/Hamburger/index.vue'
const router = useRouter()
const userStore = useUserStore()
const appStore = useAppStore()
const { sidebar } = storeToRefs(appStore)
const avatar = computed(() => userStore.avatar || 'user-avatar.gif')
import { computed } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store/user";
import { useAppStore } from "@/store/app";
import { storeToRefs } from "pinia";
import Breadcrumb from "@/components/Breadcrumb/index.vue";
import Hamburger from "@/components/Hamburger/index.vue";
const router = useRouter();
const userStore = useUserStore();
const appStore = useAppStore();
const { sidebar } = storeToRefs(appStore);
const avatar = computed(() => userStore.avatar || "user-avatar.gif");
const toggleSideBar = () => {
appStore.toggleSidebar()
}
appStore.toggleSidebar();
};
const logout = async () => {
await userStore.logout()
router.push(`/login?redirect=${router.currentRoute.value.fullPath}`)
}
await userStore.logout();
router.push(`/login?redirect=${router.currentRoute.value.fullPath}`);
};
</script>
<template>
......@@ -30,18 +30,16 @@ const logout = async () => {
<div class="right-menu">
<el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper">
<img :src="avatar" class="user-avatar">
<img :src="avatar" class="user-avatar" />
<el-icon><CaretBottom /></el-icon>
</div>
<template #dropdown>
<el-dropdown-menu class="user-dropdown">
<router-link to="/">
<el-dropdown-item>
首页
</el-dropdown-item>
<el-dropdown-item> 首页 </el-dropdown-item>
</router-link>
<el-dropdown-item divided @click="logout">
<span style="display:block;">退出</span>
<span style="display: block">退出</span>
</el-dropdown-item>
</el-dropdown-menu>
</template>
......@@ -56,18 +54,18 @@ const logout = async () => {
overflow: hidden;
position: relative;
background: #fff;
box-shadow: 0 1px 4px rgba(0,21,41,.08);
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.hamburger-container {
line-height: 46px;
height: 100%;
float: left;
cursor: pointer;
transition: background .3s;
-webkit-tap-highlight-color:transparent;
transition: background 0.3s;
-webkit-tap-highlight-color: transparent;
&:hover {
background: rgba(0, 0, 0, .025)
background: rgba(0, 0, 0, 0.025);
}
}
......@@ -94,10 +92,10 @@ const logout = async () => {
&.hover-effect {
cursor: pointer;
transition: background .3s;
transition: background 0.3s;
&:hover {
background: rgba(0, 0, 0, .025)
background: rgba(0, 0, 0, 0.025);
}
}
}
......
src/layout/components/Sidebar/Logo.vue
......@@ -53,6 +53,7 @@ const logo = ""; // 暂时为空
& .sidebar-title {
display: inline-block;
letter-spacing: 2px;
margin: 0;
color: #fff;
font-weight: 600;
......
src/settings.ts
interface ISettings {
title: string
fixedHeader: boolean
sidebarLogo: boolean
title: string;
fixedHeader: boolean;
sidebarLogo: boolean;
}
const settings: ISettings = {
title: 'Spider Admin Pro',
title: "互联网信息采集",
fixedHeader: true,
sidebarLogo: true
}
sidebarLogo: true,
};
export default settings
export default settings;
src/store/app.ts
import { defineStore } from 'pinia'
import { defineStore } from "pinia";
import { useSlideStateStore } from "./slideState";
interface AppState {
sidebar: {
opened: boolean
withoutAnimation: boolean
},
device: 'desktop' | 'mobile'
opened: boolean;
withoutAnimation: boolean;
};
device: "desktop" | "mobile";
}
export const useAppStore = defineStore('app', {
export const useAppStore = defineStore("app", {
state: (): AppState => ({
sidebar: {
opened: localStorage.getItem('sidebarStatus')
? !!+localStorage.getItem('sidebarStatus')! // 将获取到的值转换为布尔值 其中 + 为先转为数字 !! 为转成 bool 值
opened: localStorage.getItem("sidebarStatus")
? !!+localStorage.getItem("sidebarStatus")! // 将获取到的值转换为布尔值 其中 + 为先转为数字 !! 为转成 bool 值
: true,
withoutAnimation: false
withoutAnimation: false,
},
device: 'desktop',
device: "desktop",
}),
actions: {
toggleSidebar() {
this.sidebar.opened = !this.sidebar.opened
this.sidebar.withoutAnimation = false
const slideStateStore = useSlideStateStore();
this.sidebar.opened = !this.sidebar.opened;
this.sidebar.withoutAnimation = false;
if (this.sidebar.opened) {
localStorage.setItem('sidebarStatus', '1')
localStorage.setItem("sidebarStatus", "1");
} else {
localStorage.setItem('sidebarStatus', '0')
localStorage.setItem("sidebarStatus", "0");
}
slideStateStore.setSlideState(this.sidebar.opened ? "1" : "0");
},
closeSideBar(options: { withoutAnimation: boolean }) {
this.sidebar.opened = false
this.sidebar.withoutAnimation = options.withoutAnimation
localStorage.setItem('sidebarStatus', '0')
this.sidebar.opened = false;
this.sidebar.withoutAnimation = options.withoutAnimation;
localStorage.setItem("sidebarStatus", "0");
const slideStateStore = useSlideStateStore();
slideStateStore.setSlideState("0");
},
toggleDevice(device: 'desktop' | 'mobile') {
this.device = device
}
}
})
toggleDevice(device: "desktop" | "mobile") {
this.device = device;
},
},
});
src/store/slideState.ts 0 → 100644
import { defineStore } from "pinia";
import { ref } from "vue";
export const useSlideStateStore = defineStore("slideState", () => {
const slideState = ref<boolean>(localStorage.getItem("sidebarStatus") == "1");
function getSlideState(): boolean {
return slideState.value;
}
function setSlideState(state: any) {
slideState.value = state == "1" ? true : false;
}
return {
slideState,
getSlideState,
setSlideState,
};
});
src/utils/formatExactLargeNum.ts
const formatExactLargeNum = (num: number | string) => {
if (num === null || num === undefined) return num;
const formatExactLargeNum = (num: number | string | null) => {
if (num === null || num === undefined) return "";
if (typeof num !== "number" && typeof num !== "string") return num;
const parsedNum = typeof num === "string" ? Number(num.replace(/,/g, "")) : num;
......
src/views/os-dataDisplay/components/dsnData/dsnDataTab.vue
......@@ -311,7 +311,7 @@ onMounted(async () => {
}
.title {
color: white;
color: #4edaff;
font-size: 18px;
font-weight: 500;
}
......@@ -324,7 +324,7 @@ onMounted(async () => {
}
.item-title {
color: #fff;
color: #b0dfff;
}
.item {
......
src/views/os-dataDisplay/components/esDataTab.vue
<template>
<div class="text-left p-4 toolbarStyle">
<div class="formStyle">
<el-form inline>
<el-form-item label="目标名称:">
<div class="text-left">
<table-search>
<div class="form-content">
<div class="left">
<div>
<span style="color: white">目标名称：</span>
<el-input placeholder="请输入目标名称:" v-model="searchTargetName" style="width: 180px" />
</div>
</el-form-item>
<el-form-item label="获取时间:">
<div>
<span style="color: white">时间范围：</span>
<el-config-provider :locale="zhCn">
<el-date-picker
type="datetimerange"
......@@ -21,19 +22,20 @@
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-config-provider>
</el-form-item>
<el-form-item label="站点名称:">
</div>
<div>
<span style="color: white">站点名称：</span>
<el-input placeholder="请输入" v-model="searchStation" style="width: 170.5px" />
</el-form-item>
<el-form-item>
<el-space>
</div>
</div>
<div class="btns">
<el-button plain type="primary" @click="handleSearch">查询</el-button>
<el-button plain @click="getData">重置表格</el-button>
</el-space>
</el-form-item>
</el-form>
</div>
</div>
</table-search>
</div>
<div class="m-t-5" />
<div class="table-content">
......@@ -354,6 +356,7 @@ import { ElMessage } from "element-plus";
import { ElConfigProvider } from "element-plus";
// 引入中文包
import zhCn from "element-plus/es/locale/lang/zh-cn";
import TableSearch from "@/components/TableSearch.vue";
defineOptions({ name: "Pagination" });
// 更改分页文字
zhCn.el.pagination.total = "共 `{total} 条`";
......@@ -679,7 +682,7 @@ onMounted(() => {
}
.title {
color: white;
color: #4edaff;
font-size: 18px;
font-weight: 500;
}
......@@ -692,7 +695,7 @@ onMounted(() => {
}
.item-title {
color: #fff;
color: #b0dfff;
}
.item {
......@@ -705,11 +708,24 @@ onMounted(() => {
}
.target-desc {
color: white;
color: #d0e8ff;
}
.btns {
display: flex;
justify-content: center;
}
.form-content {
display: flex;
height: 80px;
align-items: center;
padding: 0 30px;
justify-content: space-between;
}
.left {
display: flex;
gap: 10px;
}
</style>
......
src/views/os-dataDisplay/components/ituDataTab.vue
<template>
<div class="text-left p-4 toolbarStyle">
<div class="formStyle">
<el-form inline>
<el-form-item label="目标名称:">
<div class="text-left">
<TableSearch>
<div class="form-content">
<div class="left">
<div>
<span style="color: white">目标名称：</span>
<el-input placeholder="请输入目标名称" v-model="searchTargetName" style="width: 180px" />
</div>
</el-form-item>
<el-form-item label="获取时间:">
<div>
<span style="color: white">时间范围：</span>
<el-config-provider :locale="zhCn">
<el-date-picker
type="datetimerange"
......@@ -21,17 +22,19 @@
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-config-provider>
</el-form-item>
<el-form-item label="SNS Notice ID:">
</div>
<div>
<span style="color: white">SNS Notice ID：</span>
<el-input placeholder="请输入ID" v-model="searchTargetId" style="width: 170.5px" />
</el-form-item>
<el-form-item>
</div>
</div>
<div class="btns">
<el-button plain type="primary" @click="handleSearch">查询</el-button>
<el-button plain="" @click="getData">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</TableSearch>
</div>
<div class="m-t-5" />
<div class="itu-table">
......@@ -48,7 +51,7 @@
<!-- <el-table-column type="selection" width="40" /> -->
<el-table-column property="number" label="序号" width="55" type="index" />
<el-table-column property="item.ntc_id" label="SNS Notice ID" show-overflow-tooltip />
<el-table-column property="identity.adm_name_e" label="主管部门" show-overflow-tooltip />
<el-table-column min-width="100" property="identity.adm_name_e" label="主管部门" show-overflow-tooltip />
<el-table-column property="identity.sat_name" label="目标名称" show-overflow-tooltip />
<el-table-column property="item.plan_txt" label="计划/非计划类型" show-overflow-tooltip />
<el-table-column property="identity.ntc_type" label="是否为同步" show-overflow-tooltip>
......@@ -78,7 +81,12 @@
{{ scope.row.regulatory_status.d_reg_limit === null ? "-" : scope.row.regulatory_status.d_reg_limit }}
</template>
</el-table-column>
<el-table-column property="regulatory_status.f_biu_grps" label="是否确认使用" show-overflow-tooltip />
<el-table-column
min-width="100"
property="regulatory_status.f_biu_grps"
label="是否确认使用"
show-overflow-tooltip
/>
<el-table-column property="regulatory_status.resumption_list" label="是否暂停使用" show-overflow-tooltip />
<el-table-column label="操作" width="60">
<template #default="scope">
......@@ -218,6 +226,7 @@ import Pagination from "@/components/pagination/index.vue";
import exportDialog from "@/components/Export/index.vue";
import { getItuList, getItuDetail } from "@/api/spiderData";
import { ElMessage } from "element-plus";
import TableSearch from "@/components/TableSearch.vue";
// ElConfigProvider 组件
import { ElConfigProvider } from "element-plus";
// 引入中文包
......@@ -402,11 +411,15 @@ onMounted(() => {
}
.title {
color: white;
color: #4edaff;
font-size: 18px;
font-weight: 500;
}
.left {
display: flex;
gap: 10px;
}
.info-item {
display: flex;
align-items: center;
......@@ -415,12 +428,19 @@ onMounted(() => {
}
.item-title {
color: #fff;
color: #b0dfff;
}
.item {
color: #eee;
}
.form-content {
display: flex;
height: 80px;
justify-content: space-between;
align-items: center;
padding: 0 30px;
}
</style>
<style>
......
src/views/os-dataDisplay/components/stDataTab.vue
<template>
<div class="text-left p-4 toolbarStyle">
<div class="formStyle">
<el-form inline>
<el-form-item label="目标名称:">
<div class="text-left">
<table-search>
<div class="form-content">
<div class="left">
<div>
<span style="color: white">目标名称：</span>
<el-input placeholder="请输入目标名称" style="width: 180px" v-model="searchTargetName" />
</el-form-item>
<el-form-item label="获取时间:">
</div>
<div>
<span style="color: white">时间范围：</span>
<el-config-provider :locale="zhCn">
<el-date-picker
v-model="timeValue"
......@@ -19,24 +22,19 @@
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-config-provider>
</el-form-item>
<el-form-item label="NORAD CAT ID:">
</div>
<div>
<span style="color: white">Norad Cat ID：</span>
<el-input placeholder="请输入ID" style="width: 170.5px" v-model="noradCatId" />
</el-form-item>
<!-- <el-form-item>
<el-space>
<el-button type="primary" @click="handleExport">导出最近</el-button>
</el-space>
</el-form-item> -->
<el-form-item>
<el-space>
</div>
</div>
<div class="btns">
<el-button plain type="primary" @click="handleSearch">查询</el-button>
<el-button plain @click="getData">重置表格</el-button>
</el-space>
</el-form-item>
</el-form>
</div>
</div>
</table-search>
</div>
<div class="m-t-5" />
<div class="table-content">
......@@ -137,6 +135,12 @@
<span class="item-title">雷达截面积：</span>
<span class="item">{{ rcsSize }}</span>
</div>
</el-col>
</el-row>
<div class="title">TLE数据：</div>
<el-divider style="margin: 0"></el-divider>
<el-row>
<el-col>
<div class="info-item">
<span class="item-title">TLE第一行数据：</span>
<span class="item">{{ tleLine0 }}</span>
......@@ -167,6 +171,7 @@ import { getStList, getStDetail } from "@/api/spiderData";
import { ElMessage } from "element-plus";
// ElConfigProvider 组件
import { ElConfigProvider } from "element-plus";
import TableSearch from "@/components/TableSearch.vue";
// 引入中文包
import zhCn from "element-plus/es/locale/lang/zh-cn";
defineOptions({ name: "Pagination" });
......@@ -340,9 +345,9 @@ onMounted(() => {
}
.title {
color: white;
font-size: 18px;
font-weight: 500;
color: #4edaff;
}
.info-item {
......@@ -353,12 +358,23 @@ onMounted(() => {
}
.item-title {
color: #fff;
color: #b0dfff;
}
.item {
color: #eee;
}
.form-content {
display: flex;
height: 80px;
align-items: center;
padding: 0 30px;
justify-content: space-between;
}
.left {
display: flex;
gap: 10px;
}
</style>
<style>
......
src/views/os-dataDisplay/index.vue
<template>
<div>
<el-card style="margin-bottom: 0">
<div class="title">数据展示</div>
<div class="low-titme">Data Display</div>
<el-divider class="divider" style="margin-bottom: 0" />
</el-card>
<MenuTitle title="数据展示" subtitle="Data Display" />
<div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToStatus" />
<div class="segment-content">
<div class="custom-style flex gap-4">
......@@ -37,6 +33,7 @@ import dsnDataTab from "./components/dsnData/dsnTab.vue";
import esDataTab from "./components/esDataTab.vue";
import exportDialog from "@/components/Export/index.vue";
import type { UploadInstance } from "element-plus";
import MenuTitle from "@/components/MenuTitle.vue";
const mode = ref(sessionStorage.getItem("dataDisplayMode") || "DSN数据");
const showDeleteDialog = ref(false);
......@@ -44,7 +41,6 @@ const sizeOptions = ["DSN数据", "ITU数据", "ST数据", "ESA数据"];
const route = useRoute();
const router = useRouter();
const modeValue = ref<any>("数据展示");
const upload = ref<UploadInstance>();
const goToStatus = () => {
router.push({
......
src/views/os-spiderManager/index.vue
<template>
<div>
<el-card>
<div class="title">爬虫管理</div>
<div class="low-titme">Spider Manager</div>
<el-divider class="divider" />
</el-card>
<MenuTitle title="爬虫管理" subtitle="Spider Manager" />
<div class="table-content">
<el-table
:data="tableData"
......@@ -24,7 +20,7 @@
<template #default="scope">
<div class="btn-group">
<el-button type="primary" plain @click="handleDetails(scope.row)">查看任务</el-button>
<el-button type="primary" plain @click="handleEditSateId">编辑</el-button>
<el-button type="primary" plain @click="handleEditSateId" v-if="scope.row.editable">编辑</el-button>
</div>
</template>
</el-table-column>
......@@ -104,6 +100,7 @@ import { useRouter } from "vue-router";
import { getSpiderList, addSateNo, getSateIdList } from "@/api/system.ts";
import NoItem from "./components/NoItem.vue";
import { ElMessage } from "element-plus";
import MenuTitle from "@/components/MenuTitle.vue";
const router = useRouter();
const tableData = ref([]);
......@@ -126,6 +123,7 @@ const handleDetails = (row: any) => {
const getData = async () => {
const res = await getSpiderList({ scrapydServerId: "1", project: "spiders" });
tableData.value = res.data;
console.log(res.data);
};
const editDialogVisible = ref(false);
......@@ -238,6 +236,7 @@ onMounted(() => {
.table-content {
padding: 10px;
margin-top: 30px;
}
.title {
......
src/views/os-status/components/dataCard.vue
<template>
<div class="flex">
<span class="textStyle">数据统计</span>
<span class="textStyle" :class="{ toRight0: slideState }">数据统计</span>
<div class="dataCard" @click="goToAllDataPage">
<div class="titleStyle">
<span>数据统计</span>
</div>
<div class="items">
<div class="wordStyle">
<span>总数据量:</span>
<span class="total-num">{{ formatExactLargeNum(totalDataNumber) }}</span>
<span class="total-num" v-if="totalDataNumber != null">{{ formatExactLargeNum(totalDataNumber) }}</span>
<span class="loading" v-else></span>
</div>
<div class="wordStyle">
<span>采集的页面数量:</span>
<span class="total-num"> {{ formatExactLargeNum(totalPageNumber) }}</span>
<span class="total-num" v-if="totalPageNumber != null"> {{ formatExactLargeNum(totalPageNumber) }}</span>
<span class="loading" v-else></span>
</div>
<div class="wordStyle">
<span>采集的目标数量:</span>
<span class="total-num"> {{ formatExactLargeNum(totalTargetNumber) }}</span>
<span class="total-num" v-if="totalTargetNumber != null"> {{ formatExactLargeNum(totalTargetNumber) }}</span>
<span class="loading" v-else></span>
</div>
</div>
</div>
<div class="dataCard" @click="goToTaskRecordPage">
<div class="titleStyle">
<span>任务执行统计</span>
</div>
<div class="items">
<div class="wordStyle">
<span>任务执行成功统计:</span>
<span class="total-num">{{ formatExactLargeNum(successTask) }}</span>
<span class="total-num" v-if="successTask != null">{{ formatExactLargeNum(successTask) }}</span>
<span class="loading" v-else></span>
</div>
<div class="wordStyle">
<span>任务执行失败统计:</span>
<span class="total-num">{{ formatExactLargeNum(failTask) }}</span>
<span class="total-num" v-if="failTask != null">{{ formatExactLargeNum(failTask) }}</span>
<span class="loading" v-else></span>
</div>
<div class="wordStyle">
<span>任务异常数统计:</span>
<span class="total-num">{{ formatExactLargeNum(unusualTask) }}</span>
<span class="total-num" v-if="unusualTask != null">{{ formatExactLargeNum(unusualTask) }}</span>
<span class="loading" v-else></span>
</div>
</div>
</div>
<div class="dataCard">
<div class="titleStyle">
<span>性能统计</span>
</div>
<div class="items">
<div class="wordStyle">
<span>平均成功率:</span>
<span class="total-num"> {{ speed !== "" ? speed : "加载中..." }}</span>
<span class="total-num" v-if="speed != null"> {{ speed }}</span>
<span class="loading" v-else></span>
</div>
<div class="wordStyle">
<span>平均错误率: </span>
<span class="total-num">{{ errorRate !== "" ? errorRate : "加载中..." }}</span>
<span class="total-num" v-if="errorRate != null">{{ errorRate }}</span>
<span class="loading" v-else></span>
</div>
<div class="wordStyle">
<span>平均异常率:</span>
<span class="total-num">{{ unusualRate !== "" ? unusualRate : "加载中..." }}</span>
<span class="total-num" v-if="unusualRate != null">{{ unusualRate }}</span>
<span class="loading" v-else></span>
</div>
</div>
</div>
</div>
......@@ -60,18 +75,22 @@ import { useRouter } from "vue-router";
import { getStatsDataList, getSpiderTaskList, getPerformanceList } from "@/api/staticData";
import { onMounted, ref } from "vue";
import formatExactLargeNum from "@/utils/formatExactLargeNum";
import { ElSkeleton } from "element-plus";
import { useSlideStateStore } from "@/store/slideState";
import { storeToRefs } from "pinia";
const slideStateStore = useSlideStateStore();
const { slideState } = storeToRefs(slideStateStore);
const router = useRouter();
const totalDataNumber = ref("");
const totalPageNumber = ref("");
const totalTargetNumber = ref("");
const successTask = ref("");
const failTask = ref("");
const unusualTask = ref("");
const speed = ref("");
const errorRate = ref("");
const unusualRate = ref("");
const totalDataNumber = ref(null);
const totalPageNumber = ref(null);
const totalTargetNumber = ref(null);
const successTask = ref(null);
const failTask = ref(null);
const unusualTask = ref(null);
const speed = ref(null);
const errorRate = ref(null);
const unusualRate = ref(null);
const goToAllDataPage = () => {
router.push({
......@@ -109,6 +128,8 @@ const getData = async () => {
unusualRate.value = performance.data.exception;
};
//sidebarStatus
onMounted(() => {
getData();
});
......@@ -121,8 +142,7 @@ onMounted(() => {
background-repeat: no-repeat;
// background: #c6ebfc;
// border: 1.5px solid rgb(193, 188, 188);
width: 360px;
height: 100%;
width: 500px;
border-radius: 5px;
}
......@@ -134,7 +154,7 @@ onMounted(() => {
text-align: center;
text-shadow: 0 0 8px rgba(100, 200, 255, 0.8);
letter-spacing: 2px;
margin-top: 10px;
margin-top: 15px;
}
.wordStyle {
......@@ -151,9 +171,10 @@ onMounted(() => {
writing-mode: vertical-lr;
font-size: 22px;
letter-spacing: 3px;
margin-left: 0.5%;
color: #ffffff;
font-weight: 500;
transform: translateX(-30px);
transition: 0.2s;
}
.total-num {
......@@ -163,5 +184,53 @@ onMounted(() => {
text-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
letter-spacing: 1px;
margin-right: 30px;
animation: visible 0.6s;
}
@keyframes visible {
0% {
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
.toRight0 {
transform: translateX(-10px);
}
.items {
display: flex;
flex-direction: column;
padding-left: 15px;
padding-top: 20px;
}
.loading {
width: 45px;
aspect-ratio: 2;
margin-right: 30px;
--_g: no-repeat radial-gradient(circle closest-side, #4edaff 90%, #0000);
background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
background-size: calc(100% / 3) 50%;
animation: l3 1s infinite linear;
}
@keyframes l3 {
20% {
background-position: 0% 0%, 50% 50%, 100% 50%;
}
40% {
background-position: 0% 100%, 50% 0%, 100% 50%;
}
60% {
background-position: 0% 50%, 50% 100%, 100% 0%;
}
80% {
background-position: 0% 50%, 50% 50%, 100% 100%;
}
}
</style>
src/views/os-status/components/qbDataMonitor.vue
<template>
<div class="flex">
<span class="textStyle">QB数据管理</span>
<!-- <div class="dataCard" @click="goToAllDataPage">
<div class="titleStyle">
<span>综合数据</span>
</div>
<div class="iconStyle" />
</div> -->
<span class="textStyle" :class="{ toRight0: !slideState }">数据管理</span>
<div class="dataCard" @click="goToDSNDataPage">
<div class="titleStyle">
<span>DSN数据</span>
......@@ -25,11 +19,22 @@
</div>
<div class="iconStyle" />
</div>
<div class="dataCard" @click="goToESADataPage">
<div class="titleStyle">
<span>ESA数据</span>
</div>
<div class="iconStyle" />
</div>
</div>
</template>
<script lang="ts" setup>
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { useSlideStateStore } from "@/store/slideState";
const slideStateStore = useSlideStateStore();
const { slideState } = storeToRefs(slideStateStore);
const router = useRouter();
defineProps({
......@@ -103,14 +108,23 @@ const goToSTDataPage = () => {
},
});
};
const goToESADataPage = () => {
router.push({
path: "/osDataDisplay/list",
query: {
mode: "ESA数据",
jump: "yes",
},
});
};
</script>
<style lang="scss" scoped>
.iconStyle {
background-image: url("@/assets/picture/wenjianjia.png");
background-size: 100% 120%;
background-image: url("@/assets/picture/data-icon.svg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-top: -5%;
margin-top: 5%;
display: flex;
// border: 1.5px solid rgb(193, 188, 188);
height: 65%;
......@@ -118,12 +132,13 @@ const goToSTDataPage = () => {
}
.dataCard {
cursor: pointer;
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;
width: 375px;
height: 100%;
border-radius: 5px;
display: flex;
......@@ -133,9 +148,13 @@ const goToSTDataPage = () => {
}
.titleStyle {
font-size: 24px;
margin-top: 5%;
color: #ffffff;
color: #dff6ff;
font-size: 18px;
font-weight: 600;
text-align: center;
text-shadow: 0 0 8px rgba(100, 200, 255, 0.8);
letter-spacing: 2px;
margin-top: 15px;
}
.wordStyle {
......@@ -148,9 +167,13 @@ const goToSTDataPage = () => {
writing-mode: vertical-lr;
font-size: 22px;
letter-spacing: 3px;
margin-left: 0.5%;
color: #ffffff;
font-weight: 500;
// display: flex;
transform: translateX(-10px);
transition: 0.2s;
}
.toRight0 {
transform: translateX(-25px);
}
</style>
src/views/os-status/components/statusMonitor.vue
......@@ -21,24 +21,23 @@
</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';
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: ''
default: "",
},
desc: {
type: String,
default: ''
}
})
default: "",
},
});
onMounted(() => {
})
onMounted(() => {});
</script>
<style lang="scss" scoped>
......@@ -50,14 +49,13 @@ onMounted(() => {
align-items: center;
padding: 10px;
gap: 30px;
}
.monitoringCard {
background-image: url("@/assets/picture/box1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 22.5vh;
height: 20vh;
width: 96%;
display: flex;
gap: 21.5px;
......@@ -68,7 +66,7 @@ onMounted(() => {
background-image: url("@/assets/picture/box1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 26.5vh;
height: 25vh;
width: 96%;
display: flex;
gap: 21.5px;
......@@ -90,7 +88,7 @@ onMounted(() => {
font-size: 26px;
letter-spacing: 3px;
margin-left: 2%;
color: #FFFFFF;
color: #ffffff;
// display: flex;
}
......@@ -100,6 +98,5 @@ onMounted(() => {
justify-content: center;
/* 水平居中 */
// gap: 20px;
}
</style>
src/views/os-status/components/taskCard.vue
<template>
<div class="flex">
<span class="textStyle">任务统计</span>
<span class="textStyle" :class="{ toRight0: slideState }">任务统计</span>
<div class="dataCard" @click="goToDSNTaskRecordPage">
<div class="titleStyle">
<span>DSN爬取任务</span>
</div>
<div class="items">
<div class="wordStyle">
<span>DSN爬虫任务数:</span>
<span class="total-num">{{
dsnTotalTaskNumber !== "" ? formatExactLargeNum(dsnTotalTaskNumber) : "加载中..."
}}</span>
<span class="total-num" v-if="dsnTotalTaskNumber != null">{{ dsnTotalTaskNumber }}</span>
<span class="loading" v-else></span>
</div>
<div class="wordStyle">
<span>任务执行成功统计:</span>
<span class="total-num">{{
dsnTaskSuccessNumber !== "" ? formatExactLargeNum(dsnTaskSuccessNumber) : "加载中..."
}}</span>
<span class="total-num" v-if="dsnTaskSuccessNumber != null">{{ dsnTaskSuccessNumber }}</span>
<span class="loading" v-else></span>
</div>
<div class="wordStyle">
<span>任务执行失败统计:</span>
<span class="total-num">{{
dsnTaskFailNumber !== "" ? formatExactLargeNum(dsnTaskFailNumber) : "加载中..."
}}</span>
<span class="total-num" v-if="dsnTaskFailNumber != null">{{ dsnTaskFailNumber }}</span>
<span class="loading" v-else></span>
</div>
<div class="wordStyle">
<span>错误率: {{ dsnErrorRate }} </span>
<span class="total-num">{{ dsnErrorRate !== "" ? dsnErrorRate : "加载中..." }}</span>
<span class="total-num" v-if="dsnErrorRate != null">{{ dsnErrorRate }}</span>
<span class="loading" v-else></span>
</div>
</div>
</div>
<div class="dataCard" @click="goToITUTaskRecordPage">
<div class="titleStyle">
<span>ITU爬取任务</span>
</div>
<div class="items">
<div class="wordStyle">
<span>ITU爬虫任务数:</span>
<span class="total-num">{{
ituTotalTaskNumber !== "" ? formatExactLargeNum(ituTotalTaskNumber) : "加载中..."
}}</span>
<span class="total-num" v-if="ituTotalTaskNumber != null">{{ ituTotalTaskNumber }}</span>
<span class="loading" v-else></span>
</div>
<div class="wordStyle">
<span>任务执行成功统计:</span>
<span class="total-num">{{
ituTaskSuccessNumber !== "" ? formatExactLargeNum(ituTaskSuccessNumber) : "加载中..."
}}</span>
<span class="total-num" v-if="ituTaskSuccessNumber != null">{{ ituTaskSuccessNumber }}</span>
<span class="loading" v-else></span>
</div>
<div class="wordStyle">
<span>任务执行失败统计:</span>
<span class="total-num">{{
ituTaskFailNumber !== "" ? formatExactLargeNum(ituTaskFailNumber) : "加载中..."
}}</span>
<span class="total-num" v-if="ituTaskFailNumber != null">{{ ituTaskFailNumber }}</span>
<span class="loading" v-else></span>
</div>
<div class="wordStyle">
<span>任务执行失败统计:</span>
<span class="total-num" v-if="ituTaskFailNumber != null">{{ ituTaskFailNumber }}</span>
<span class="loading" v-else></span>
</div>
<div class="wordStyle">
<span>错误率:</span>
<span class="total-num">{{ ituErrorRate !== "" ? ituErrorRate : "加载中..." }}</span>
<span class="total-num" v-if="ituErrorRate != null">{{ ituErrorRate }}</span>
<span class="loading" v-else></span>
</div>
</div>
</div>
<div class="dataCard" @click="goToSTTaskRecordPage">
<div class="titleStyle">
<span>ST爬取任务</span>
</div>
<div class="items">
<div class="wordStyle">
<span>ST爬虫任务数:</span>
<span class="total-num">{{
stTotalTaskNumber !== "" ? formatExactLargeNum(stTotalTaskNumber) : "加载中..."
}}</span>
<span class="total-num" v-if="stTotalTaskNumber != null">{{ stTotalTaskNumber }}</span>
<span class="loading" v-else></span>
</div>
<div class="wordStyle">
<span>任务执行成功统计:</span>
<span class="total-num">{{
stTaskSuccessNumber !== "" ? formatExactLargeNum(stTaskSuccessNumber) : "加载中..."
}}</span>
<span class="total-num" v-if="stTaskSuccessNumber != null">{{ stTaskSuccessNumber }}</span>
<span class="loading" v-else></span>
</div>
<div class="wordStyle">
<span>采集速度:</span>
<span class="total-num">{{
stTaskFailNumber !== "" ? formatExactLargeNum(stTaskFailNumber) : "加载中..."
}}</span>
<span class="total-num" v-if="stTaskFailNumber != null">{{ stTaskFailNumber }}</span>
<span class="loading" v-else></span>
</div>
<div class="wordStyle">
<span>错误率:</span>
<span class="total-num">{{ stErrorRate !== "" ? stErrorRate : "加载中..." }}</span>
<span class="total-num" v-if="stErrorRate != null">{{ stErrorRate }}</span>
<span class="loading" v-else></span>
</div>
</div>
</div>
</div>
......@@ -90,22 +95,26 @@ import { useRouter } from "vue-router";
import { getAllSpiderTaskStatistics } from "@/api/staticData";
import { onMounted, ref } from "vue";
import { getSpiderTaskList } from "@/api/spiderTask";
import formatExactLargeNum from "@/utils/formatExactLargeNum";
import { useSlideStateStore } from "@/store/slideState";
import { storeToRefs } from "pinia";
const slideStateStore = useSlideStateStore();
const { slideState } = storeToRefs(slideStateStore);
const router = useRouter();
const dsnTotalTaskNumber = ref("");
const dsnTaskSuccessNumber = ref("");
const dsnTaskFailNumber = ref("");
const dsnErrorRate = ref("");
const ituTotalTaskNumber = ref("");
const ituTaskSuccessNumber = ref("");
const ituTaskFailNumber = ref("");
const ituErrorRate = ref("");
const stTotalTaskNumber = ref("");
const stTaskSuccessNumber = ref("");
const stTaskFailNumber = ref("");
const stErrorRate = ref("");
const dsnTotalTaskNumber = ref(null);
const dsnTaskSuccessNumber = ref(null);
const dsnTaskFailNumber = ref(null);
const dsnErrorRate = ref(null);
const ituTotalTaskNumber = ref(null);
const ituTaskSuccessNumber = ref(null);
const ituTaskFailNumber = ref(null);
const ituErrorRate = ref(null);
const stTotalTaskNumber = ref(null);
const stTaskSuccessNumber = ref(null);
const stTaskFailNumber = ref(null);
const stErrorRate = ref(null);
const goToDSNTaskRecordPage = () => {
router.push({
......@@ -169,7 +178,7 @@ onMounted(() => {
background-repeat: no-repeat;
// background: #c6ebfc;
// border: 1.5px solid rgb(193, 188, 188);
width: 360px;
width: 500px;
height: 100%;
border-radius: 5px;
}
......@@ -181,7 +190,7 @@ onMounted(() => {
text-align: center;
text-shadow: 0 0 8px rgba(100, 200, 255, 0.8);
letter-spacing: 2px;
margin-top: 10px;
margin-top: 15px;
}
.wordStyle {
......@@ -198,9 +207,10 @@ onMounted(() => {
writing-mode: vertical-lr;
font-size: 22px;
letter-spacing: 3px;
margin-left: 0.5%;
color: #ffffff;
font-weight: 500;
transform: translateX(-25px);
transition: 0.2s;
}
.total-num {
......@@ -210,5 +220,53 @@ onMounted(() => {
text-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
letter-spacing: 1px;
margin-right: 30px;
animation: visible 0.6s;
}
.toRight0 {
transform: translateX(-10px);
}
.items {
display: flex;
flex-direction: column;
padding-left: 15px;
padding-top: 20px;
}
.loading {
width: 45px;
aspect-ratio: 2;
margin-right: 30px;
--_g: no-repeat radial-gradient(circle closest-side, #4edaff 90%, #0000);
background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
background-size: calc(100% / 3) 50%;
animation: l3 1s infinite linear;
}
@keyframes l3 {
20% {
background-position: 0% 0%, 50% 50%, 100% 50%;
}
40% {
background-position: 0% 100%, 50% 0%, 100% 50%;
}
60% {
background-position: 0% 50%, 50% 100%, 100% 0%;
}
80% {
background-position: 0% 50%, 50% 50%, 100% 100%;
}
}
@keyframes visible {
0% {
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
</style>
src/views/os-status/index.vue
<template>
<div>
<MenuTitle title="状态监控" subtitle="Status Monitor" />
<div>
<el-card style="margin-bottom: 0">
<div class="title">状态监控</div>
<div class="low-titme">Status Monitor</div>
<el-divider class="divider" style="margin-bottom: 0" />
</el-card>
<div class="text-left timeStyle" />
<div class="border-100">
<statusMonitor />
......@@ -16,6 +12,7 @@
<script setup lang="ts">
import statusMonitor from "./components/statusMonitor.vue";
import MenuTitle from "@/components/MenuTitle.vue";
</script>
<style lang="scss" scoped>
......
src/views/os-system/index.vue
<template>
<div class="sys-content">
<MenuTitle title="系统管理" subtitle="System Manager" />
<el-card>
<div class="title">系统管理</div>
<div class="low-titme">System Manager</div>
<el-divider class="divider" />
<div class="btns">
<el-button test-element="userSystem-AddUser" type="primary" plain @click="openAddUserDialog"
>创建用户</el-button
......@@ -86,6 +84,7 @@ import { getUserList } from "@/api/user.ts";
import { DeleteMode } from "@/components/Delete/enum.ts";
import { AddMode } from "./components/enum.ts";
import { ElMessage } from "element-plus";
import MenuTitle from "@/components/MenuTitle.vue";
const userId = ref<number>(-1);
const userIds = ref<number[]>([]);
const nickName = ref<string>("");
......
src/views/os-taskInformation/components/taskCard.vue
<!-- 任务执行统计卡片组件 -->
<template>
<div>
<div class="m-t-2" />
<div class="text-left p-4 toolbarStyle">
<div class="formStyle">
<el-form inline>
<el-row>
<el-col :span="16" style="display: flex; padding-left: 40px">
<el-form-item label="所属爬虫:">
<div>
<TableSearch>
<div class="form-content">
<div class="ipt">
<span style="color: white">所属爬虫：</span>
<el-select
v-model="searchCondition.spiders"
placeholder="请选择"
......@@ -23,25 +19,19 @@
/>
</el-select>
</div>
</el-form-item>
</el-col>
<el-col :span="8" style="display: flex; justify-content: end">
<el-form-item>
<div class="btns">
<el-button plain type="primary" @click="search">查询</el-button>
<el-button @click="resetData" style="margin-right: 20px">重置</el-button>
<el-button plain type="primary" @click="openTaskDialog">新建任务</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
</TableSearch>
<div class="cardStyle">
<div v-if="taskList.length === 0 && !isLoading" class="empty-tip">暂无任务数据</div>
<div
v-loading="taskList.length == 0"
element-loading-background="rgba(48, 65, 86, 0.7)"
class="taskCard p-6"
class="taskCard p-2"
v-for="task in taskList || []"
:key="task?.id || task?.taskId"
>
......@@ -81,7 +71,6 @@
</div>
</div>
</div>
<addTaskDialog
v-model:dialogVisible="showTaskDialog"
@confirm="handleEdit"
......@@ -108,6 +97,7 @@ import deleteDialog from "./deleteDialog.vue";
import { ElMessage } from "element-plus";
import { getSpiderList } from "@/api/system.ts";
import formatExactLargeNum from "@/utils/formatExactLargeNum";
import TableSearch from "@/components/TableSearch.vue";
const props = defineProps({
spiderType: {
......@@ -343,7 +333,6 @@ onMounted(() => {
color: white;
}
.cardStyle {
margin-top: 1.5%;
padding: 18px;
gap: 15px;
width: auto !important;
......@@ -363,6 +352,8 @@ onMounted(() => {
.task-name {
color: #fff !important;
font-size: 18px;
font-weight: 500;
}
/* 任务卡片样式 */
......@@ -371,7 +362,6 @@ onMounted(() => {
background-size: 100% 100%;
background-repeat: no-repeat;
font-size: 20px;
min-height: 240px;
min-width: 300px;
border-radius: 7px;
}
......@@ -431,4 +421,16 @@ onMounted(() => {
color: #fff;
padding: 50px 0;
}
.header {
margin-top: 10px;
}
.form-content {
height: 80px;
padding: 0 30px;
justify-content: space-between;
display: flex;
align-items: center;
}
</style>
src/views/os-taskInformation/index.vue
<template>
<div>
<el-card style="margin-bottom: 0">
<div class="title">任务信息</div>
<div class="low-titme">Task Information</div>
<el-divider class="divider" style="margin-bottom: 0" />
</el-card>
<MenuTitle title="任务信息" subtitle="Task Information" />
<div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToTaskInformation" />
<div class="m-t-8" />
<div>
......@@ -18,6 +14,7 @@ import { ref } from "vue";
import taskCard from "./components/taskCard.vue";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import MenuTitle from "@/components/MenuTitle.vue";
const route = useRoute();
const router = useRouter();
......
src/views/os-taskRecord/index.vue
<template>
<div>
<el-card style="margin-bottom: 0">
<div class="title">任务执行记录</div>
<div class="low-titme">Task Record</div>
<el-divider class="divider" style="margin-bottom: 0" />
</el-card>
<MenuTitle title="任务执行记录" subtitle="Task Record" />
<div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToStatus" />
<div class="m-t-7" />
<div class="text-left toolbarStyle">
<div class="formStyle">
<div class="m-t-8" />
<table-search>
<div class="form-content">
<el-form inline>
<el-row>
<el-col :span="12">
<el-form-item label="时间:">
<div class="timer">
<span style="color: white">时间：</span>
<el-config-provider :locale="zhCn">
<el-date-picker
v-model="timeValue"
......@@ -26,20 +19,13 @@
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-config-provider>
</el-form-item>
</el-col>
<el-col :span="12" style="display: flex; justify-content: end">
<el-form-item>
</div>
<div class="btns">
<el-button plain type="primary" @click="searchData">查询</el-button>
<el-button plain @click="getData">重置</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
</div>
<div class="m-t-10" />
</table-search>
<div class="table-content">
<div>
<el-table
......@@ -93,6 +79,8 @@ import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
import { getSpiderTaskRecord } from "@/api/spiderTask.ts";
import { ElMessage } from "element-plus";
import MenuTitle from "@/components/MenuTitle.vue";
import TableSearch from "@/components/TableSearch.vue";
// ElConfigProvider 组件
import { ElConfigProvider } from "element-plus";
// 引入中文包
......@@ -203,11 +191,7 @@ onMounted(() => {
.table-content {
padding: 0 10px;
}
.form-content {
margin-top: 20px;
padding-left: 50px;
margin-top: 18px;
}
.backStyle {
......@@ -235,6 +219,14 @@ onMounted(() => {
.divider {
margin-top: 15px;
}
.form-content {
height: 80px;
justify-content: space-between;
display: flex;
align-items: center;
padding: 0 30px;
}
</style>
<style>
/* 修改el选择器的样式 */
......
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