Skip to content

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

Merge branch 'yzh' into 'main' 

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

See merge request !6
parents 2d356fa8 d7495360
Showing with 3053 additions and 2597 deletions
src/api/apiPaths.ts
...@@ -69,3 +69,11 @@ export const statsApi = { ...@@ -69,3 +69,11 @@ export const statsApi = {
removeStats: '/statsCollection/delete', removeStats: '/statsCollection/delete',
clearAllStats: '/statsCollection/clearAll' // TODO 未实现 clearAllStats: '/statsCollection/clearAll' // TODO 未实现
} as const } as const
export const userApi = {
// 系统用户相关接口
userList: '/user/list',
addUser: '/user/insert',
updateUser: '/user/update',
deleteUser: '/user/delete',
} as const
\ No newline at end of file
src/api/user.ts
import { request, POST } from '@/utils/request' import { request, POST } from '@/utils/request'
import type { ApiResponse, QueryParams } from '@/utils/request' import type { ApiResponse, UserQueryParams } from '@/utils/request'
import { authApi } from './apiPaths' import { authApi,userApi } from './apiPaths'
// 用户登录 // 用户登录
export function login(data: { username: string, password: string }): Promise<ApiResponse> { export function login(data: { username: string, password: string }): Promise<ApiResponse> {
...@@ -32,3 +32,39 @@ export function logout(): Promise<ApiResponse> { ...@@ -32,3 +32,39 @@ export function logout(): Promise<ApiResponse> {
method: POST method: POST
}) as unknown as Promise<ApiResponse> }) as unknown as Promise<ApiResponse>
} }
// 获取用户列表
export function getUserList(data: UserQueryParams) {
return request({
url: userApi.userList,
method: POST,
data
}) as unknown as Promise<ApiResponse>
}
// 新建用户
export function addUser(data: UserQueryParams) {
return request({
url: userApi.addUser,
method: POST,
data
}) as unknown as Promise<ApiResponse>
}
// 更新用户
export function updateUser(data: UserQueryParams) {
return request({
url: userApi.updateUser,
method: POST,
data
}) as unknown as Promise<ApiResponse>
}
// 删除用户
export function deleteUser(data: UserQueryParams) {
return request({
url: userApi.deleteUser,
method: POST,
data
}) as unknown as Promise<ApiResponse>
}
\ No newline at end of file
src/components/Delete/index.vue
<template> <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/components/pagination/index.vue
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
<template> <template>
<el-pagination <el-pagination
v-show="total > 0" v-show="total > 0"
v-model:current-page="currentPage" v-model:current-page="currentPage"
v-model:page-size="pageSize" v-model:page-size="pageSize"
:background="true" :background="true"
:page-sizes="[5,10, 20, 30, 50, 100]" :page-sizes="[10]"
:pager-count="pagerCount" :pager-count="pagerCount"
:total="total" :total="total"
class="mt-4" class="mt-4"
......
src/layout/components/Sidebar/index.vue
...@@ -19,7 +19,7 @@ const routes = computed(() => { ...@@ -19,7 +19,7 @@ const routes = computed(() => {
const filterHiddenRoutes = (routes: RouteRecordRaw[]): RouteRecordRaw[] => { const filterHiddenRoutes = (routes: RouteRecordRaw[]): RouteRecordRaw[] => {
return routes.filter((route: any) => { return routes.filter((route: any) => {
console.log(route,'每一项'); // console.log(route,'每一项');
// 如果当前路由标记为 hidden，则过滤掉 // 如果当前路由标记为 hidden，则过滤掉
if (route.meta?.hidden || route.hidden) { if (route.meta?.hidden || route.hidden) {
return false; return false;
......
src/router/index.ts
...@@ -215,8 +215,8 @@ export const constantRoutes: Array<RouteRecordRaw> = [ ...@@ -215,8 +215,8 @@ export const constantRoutes: Array<RouteRecordRaw> = [
{ {
path: "/os-status", path: "/osStatus",
redirect: "/os-status/list", // redirect: "list",
component: Layout, component: Layout,
children: [ children: [
{ {
...@@ -230,8 +230,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [ ...@@ -230,8 +230,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
{ {
path: "/os-taskInformation", path: "/osTaskInformation",
redirect: "/os-taskInformation/list",
component: Layout, component: Layout,
children: [ children: [
{ {
...@@ -244,8 +243,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [ ...@@ -244,8 +243,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
} as unknown as RouteRecordRaw, } as unknown as RouteRecordRaw,
{ {
path: "/os-taskRecord", path: "/osTaskRecord",
redirect: "/os-taskRecord/list",
component: Layout, component: Layout,
children: [ children: [
{ {
...@@ -258,8 +256,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [ ...@@ -258,8 +256,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
} as unknown as RouteRecordRaw, } as unknown as RouteRecordRaw,
{ {
path: "/os-dataDisplay", path: "/osDataDisplay",
redirect: "/os-dataDisplay/list",
component: Layout, component: Layout,
children: [ children: [
{ {
...@@ -272,8 +269,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [ ...@@ -272,8 +269,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
} as unknown as RouteRecordRaw, } as unknown as RouteRecordRaw,
{ {
path: "/os-spiderManager", path: "/osSpiderManager",
redirect: "/os-spiderManager/list",
component: Layout, component: Layout,
children: [ children: [
{ {
...@@ -286,8 +282,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [ ...@@ -286,8 +282,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
} as unknown as RouteRecordRaw, } as unknown as RouteRecordRaw,
{ {
path: "/os-system", path: "/osSystem",
redirect: "/os-system/list",
component: Layout, component: Layout,
children: [ children: [
{ {
......
src/utils/request.ts
...@@ -98,3 +98,13 @@ export interface QueryParams { ...@@ -98,3 +98,13 @@ export interface QueryParams {
export const request = (config: RequestConfig) => { export const request = (config: RequestConfig) => {
return instance(config); return instance(config);
} }
export interface UserQueryParams {
page?: number
size?: number
username?: string
nickname?: string
password?: string
role?: number
status?: boolean
}
\ No newline at end of file
src/views/home/home.vue
...@@ -32,7 +32,7 @@ const resetData = (id: string) => { ...@@ -32,7 +32,7 @@ const resetData = (id: string) => {
:scrapyd-server-id="scrapydServerId" :scrapyd-server-id="scrapydServerId"
/> />
<home-system-info /> <home-system-info />
<!-- <home-config /> --> <home-config />
</div> </div>
</div> </div>
</template> </template>
......
src/views/os-dataDisplay/components/allDataTab.vue
<template> <template>
<div class="text-left p-4 toolbarStyle"> <div class="text-left p-4 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-input placeholder="请选择" style="width: 220px" /> <el-input placeholder="请选择" style="width: 220px" />
</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-date-picker v-model="timeValue" type="datetimerange" start-placeholder="开始时间" <el-date-picker v-model="timeValue" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"
end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" />
time-format="A hh:mm:ss" /> </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 placeholder="请输入" style="width: 220px" />
<el-input placeholder="请输入" style="width: 220px" /> </el-form-item>
</el-form-item> <br></br>
<br></br> <el-form-item>
<el-form-item> <el-text class="mx-1">Norad Cat ID:</el-text>
<el-text class="mx-1">Norad Cat ID:</el-text> </el-form-item>
</el-form-item> <el-form-item>
<el-form-item> <el-input placeholder="请输入" style="width: 220px" />
<el-input placeholder="请输入" style="width: 220px" /> </el-form-item>
</el-form-item> <el-form-item>
<el-form-item> <el-text class="mx-1">SNS Notice ID:</el-text>
<el-text class="mx-1">SNS Notice ID:</el-text> </el-form-item>
</el-form-item> <el-form-item>
<el-form-item> <el-input placeholder="请输入" style="width: 220px" />
<el-input placeholder="请输入" style="width: 220px" /> </el-form-item>
</el-form-item> <el-form-item>
<el-form-item> <el-space>
<el-space> <el-button type="primary" @click="handleExport">导出最近</el-button>
<el-button type="primary" @click="handleExport">导出最近</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="handleExport">导出选中</el-button>
<el-button type="primary" @click="handleExport">导出选中</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">查询</el-button>
<el-button type="primary">查询</el-button> </el-space>
</el-space> </el-form-item>
</el-form-item> </el-form>
</el-form> </div>
</div> </div>
</div> <div class="m-t-5" />
<div>
<div class="m-t-5"> <el-table :data="tableData" style="width: 100%" border :row-style="{ height: '45px' }"
</div> :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
<div> <el-table-column type="selection" width="40" />
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '45px' }" <el-table-column property="number" label="序号" width="55" />
:header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"> <el-table-column property="targetName" label="目标名称" show-overflow-tooltip />
<el-table-column type="selection" width="40" /> <el-table-column property="stationPosition" label="站点位置" show-overflow-tooltip />
<el-table-column property="name" label="序号" width="55" /> <el-table-column property="stationName" label="站点名称" show-overflow-tooltip />
<el-table-column property="name" label="目标名称" show-overflow-tooltip /> <el-table-column property="NoradCatId" label="Norad Cat ID" show-overflow-tooltip />
<el-table-column property="name" label="站点位置" show-overflow-tooltip /> <el-table-column property="SNSNoticeId" label="SNS Notice ID" show-overflow-tooltip />
<el-table-column property="name" label="站点名称" show-overflow-tooltip /> <el-table-column property="dataTime" label="数据时间" show-overflow-tooltip />
<el-table-column property="name" label="Norad Cat ID" show-overflow-tooltip /> <el-table-column property="recordTime" label="记录时间" show-overflow-tooltip />
<el-table-column property="name" label="SNS Notice ID" show-overflow-tooltip /> <el-table-column property="tle" label="TLE" show-overflow-tooltip />
<el-table-column property="name" label="数据时间" show-overflow-tooltip /> <el-table-column property="isSync" label="是否为同步" show-overflow-tooltip />
<el-table-column property="name" label="记录时间" show-overflow-tooltip /> <el-table-column label="操作" width="60">
<el-table-column property="name" label="TLE" show-overflow-tooltip /> <template #default="scope">
<el-table-column property="name" label="是否为同步" show-overflow-tooltip /> <el-button type="primary" plain link @click="handleDetails(scope.row)">
<el-table-column label="操作" width="60"> 详情
<template #default="scope"> </el-button>
<el-button type="primary" plain link @click="handleDetails(scope.row)"> </template>
详情 </el-table-column>
</el-button> </el-table>
</template> <div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
</el-table-column> <Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
</el-table> @pagination="getData" />
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4"> </div>
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize" </div>
@pagination="getData" /> <div class="detailForm">
</div> <el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose" draggable>
</div> <template #header>
<div class="text-center font-size-8">
<div class="detailForm"> 详情
<el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose" draggable> </div>
<template #header> </template>
<div class="text-center font-size-8"> <el-form label-width="155px" size="small" class="px-4">
详情 <div>
</div> <el-row :gutter="20">
</template> <el-col :span="12">
<el-form label-width="155px" size="small" class="px-4"> <el-form-item label="SNS Notice ID:" label-position="left">
<div> <el-input v-model="snsId" />
<el-row :gutter="20"> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="SNS Notice ID:" label-position="left"> <el-col :span="12">
<el-input v-model="snsId" /> <el-form-item label="主管部门:" label-position="left">
</el-form-item> <el-input v-model="department" />
</el-col> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="主管部门:" label-position="left"> </el-row>
<el-input v-model="department" /> <el-row :gutter="20">
</el-form-item> <el-col :span="12">
</el-col> <el-form-item label="目标名称:" label-position="left">
</el-row> <el-input v-model="targetName" />
<el-row :gutter="20"> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="目标名称:" label-position="left"> <el-col :span="12">
<el-input v-model="targetName" /> <el-form-item label="计划/非计划类型:" label-position="left">
</el-form-item> <el-select placeholder=" ">
</el-col> <el-option label="计划" value="planned" />
<el-col :span="12"> <el-option label="非计划" value="unplanned" />
<el-form-item label="计划/非计划类型:" label-position="left"> </el-select>
<el-select placeholder=" "> </el-form-item>
<el-option label="计划" value="planned" /> </el-col>
<el-option label="非计划" value="unplanned" /> </el-row>
</el-select> <el-row :gutter="20">
</el-form-item> <el-col :span="12">
</el-col> <el-form-item label="是否为同步:" label-position="left">
</el-row> <el-input v-model="syncType" />
<el-row :gutter="20"> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="是否为同步:" label-position="left"> <el-col :span="12">
<el-input v-model="syncType"/> <el-form-item label="同步位置:" label-position="left">
</el-form-item> <el-input v-model="syncPosition" />
</el-col> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="同步位置:" label-position="left"> </el-row>
<el-input v-model="syncPosition"/> <el-row :gutter="20">
</el-form-item> <el-col :span="12">
</el-col> <el-form-item label="近地点:" label-position="left">
</el-row> <el-input v-model="perigee" />
<el-row :gutter="20"> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="近地点:" label-position="left"> <el-col :span="12">
<el-input v-model="perigee"/> <el-form-item label="远地点:" label-position="left">
</el-form-item> <el-input v-model="apogee" />
</el-col> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="远地点:" label-position="left"> </el-row>
<el-input v-model="apogee"/> <el-row :gutter="20">
</el-form-item> <el-col :span="12">
</el-col> <el-form-item label="最低海拔:" label-position="left">
</el-row> <el-input v-model="lowestAltitude" />
<el-row :gutter="20"> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="最低海拔:" label-position="left"> <el-col :span="12">
<el-input v-model="lowestAltitude"/> <el-form-item label="参考主体:" label-position="left">
</el-form-item> <el-input v-model="referenceSubject" />
</el-col> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="参考主体:" label-position="left"> </el-row>
<el-input v-model="referenceSubject"/> <el-row :gutter="20">
</el-form-item> <el-col :span="12">
</el-col> <el-form-item label="最低频率:" label-position="left">
</el-row> <el-input v-model="lowestFrequency" />
<el-row :gutter="20"> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="最低频率:" label-position="left"> <el-col :span="12">
<el-input v-model="lowestFrequency"/> <el-form-item label="最高频率:" label-position="left">
</el-form-item> <el-input v-model="highestFrequency" />
</el-col> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="最高频率:" label-position="left"> </el-row>
<el-input v-model="highestFrequency"/> <el-row :gutter="20">
</el-form-item> <el-col :span="12">
</el-col> <el-form-item label="状态:" label-position="left">
</el-row> <el-input v-model="status" />
<el-row :gutter="20"> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="状态:" label-position="left"> <el-col :span="12">
<el-input v-model="status"/> <el-form-item label="有效期:" label-position="left">
</el-form-item> <el-input v-model="validityPeriod" />
</el-col> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="有效期:" label-position="left"> </el-row>
<el-input v-model="validityPeriod"/> <el-row :gutter="20">
</el-form-item> <el-col :span="12">
</el-col> <el-form-item label="最早使用日期:" label-position="left">
</el-row> <el-input v-model="earliestUsageDate" />
<el-row :gutter="20"> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="最早使用日期:" label-position="left"> <el-col :span="12">
<el-input v-model="earliestUsageDate"/> <el-form-item label="是否确认使用:" label-position="left">
</el-form-item> <el-input v-model="isUsed" />
</el-col> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="是否确认使用:" label-position="left"> </el-row>
<el-input v-model="isUsed"/> <el-row :gutter="20">
</el-form-item> <el-col :span="12">
</el-col> <el-form-item label="是否暂停使用:" label-position="left">
</el-row> <el-input v-model="isPauseUsed" />
<el-row :gutter="20"> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="是否暂停使用:" label-position="left"> <el-col :span="12">
<el-input v-model="isPauseUsed"/> <el-form-item label="记录时间:" label-position="left">
</el-form-item> <el-input v-model="recordTime" />
</el-col> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="记录时间:" label-position="left"> </el-row>
<el-input v-model="recordTime"/> <el-row :gutter="20">
</el-form-item> <el-col :span="12">
</el-col> <el-form-item label="是否纳入国际频率总表:" label-position="left">
</el-row> <el-input v-model="IsInTheInternationalFrequencyList" />
<el-row :gutter="20"> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="是否纳入国际频率总表:" label-position="left"> <el-col :span="12">
<el-input v-model="IsInTheInternationalFrequencyList"/> <el-form-item label="最早监管日期:" label-position="left">
</el-form-item> <el-input v-model="earliestRegulatoryDate" />
</el-col> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="最早监管日期:" label-position="left"> </el-row>
<el-input v-model="earliestRegulatoryDate"/> <el-row :gutter="20">
</el-form-item> <el-col :span="12">
</el-col> <el-form-item label="是否恢复使用:" label-position="left">
</el-row> <el-input v-model="isRestoreUsed" />
<el-row :gutter="20"> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="是否恢复使用:" label-position="left"> <el-col :span="12">
<el-input v-model="isRestoreUsed"/> <el-form-item label="有效期卫星网络旧名称:" label-position="left">
</el-form-item> <el-input v-model="BFIFICdate" />
</el-col> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="有效期卫星网络旧名称:" label-position="left"> </el-row>
<el-input v-model="BFIFICdate"/> <el-row :gutter="20">
</el-form-item> <el-col :span="24">
</el-col> <el-form-item label="最新相关 BR IFIC 发布日期:" label-position="left">
</el-row> <el-input v-model="roundTripTime" />
<el-row :gutter="20"> </el-form-item>
<el-col :span="24"> </el-col>
<el-form-item label="最新相关 BR IFIC 发布日期:" label-position="left"> </el-row>
<el-input v-model="roundTripTime"/> <el-row :gutter="20">
</el-form-item> <el-col :span="12">
</el-col> <el-form-item label="往返光时(s):" label-position="left">
</el-row> <el-input v-model="distance" />
<el-row :gutter="20"> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="往返光时(s):" label-position="left"> <el-col :span="12">
<el-input v-model="distance"/> <el-form-item label="距离(km):" label-position="left">
</el-form-item> <el-input v-model="targetAzimuth" />
</el-col> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="距离(km):" label-position="left"> </el-row>
<el-input v-model="targetAzimuth"/> <el-row :gutter="20">
</el-form-item> <el-col :span="12">
</el-col> <el-form-item label="目标方位:" label-position="left">
</el-row> <el-input v-model="targetElevation" />
<el-row :gutter="20"> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="目标方位:" label-position="left"> <el-col :span="12">
<el-input v-model="targetElevation"/> <el-form-item label="目标俯仰:" label-position="left">
</el-form-item> <el-input v-model="upstreamSignalSource" />
</el-col> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="目标俯仰:" label-position="left"> </el-row>
<el-input v-model="upstreamSignalSource"/> <el-row :gutter="20">
</el-form-item> <el-col :span="12">
</el-col> <el-form-item label="上行信号来源:" label-position="left">
</el-row> <el-input v-model="upstreamSignalSource" />
<el-row :gutter="20"> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="上行信号来源:" label-position="left"> <el-col :span="12">
<el-input v-model="upstreamSignalSource"/> <el-form-item label="上行发射功率:" label-position="left">
</el-form-item> <el-input v-model="upstreamLaunchPower" />
</el-col> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="上行发射功率:" label-position="left"> </el-row>
<el-input v-model="upstreamLaunchPower"/> <el-row :gutter="20">
</el-form-item> <el-col :span="12">
</el-col> <el-form-item label="上行信号频段:" label-position="left">
</el-row> <el-input v-model="upstreamFrequencyBand" />
<el-row :gutter="20"> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="上行信号频段:" label-position="left"> <el-col :span="12">
<el-input v-model="upstreamFrequencyBand"/> <el-form-item label="风速(km/kr):" label-position="left">
</el-form-item> <el-input v-model="windSpeed" />
</el-col> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="风速(km/kr):" label-position="left"> </el-row>
<el-input v-model="windSpeed"/> <el-row :gutter="20">
</el-form-item> <el-col :span="12">
</el-col> <el-form-item label="下行信号来源:" label-position="left">
</el-row> <el-input v-model="downstreamSignalSource" />
<el-row :gutter="20"> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="下行信号来源:" label-position="left"> <el-col :span="12">
<el-input v-model="downstreamSignalSource"/> <el-form-item label="下行信号频段:" label-position="left">
</el-form-item> <el-input v-model="downstreamFrequencyBand" />
</el-col> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="下行信号频段:" label-position="left"> </el-row>
<el-input v-model="downstreamFrequencyBand"/> <el-row :gutter="20">
</el-form-item> <el-col :span="12">
</el-col> <el-form-item label="下行接收功率:" label-position="left">
</el-row> <el-input v-model="downstreamReceptionPower" />
<el-row :gutter="20"> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="下行接收功率:" label-position="left"> <el-col :span="12">
<el-input v-model="downstreamReceptionPower"/> <el-form-item label="类型:" label-position="left">
</el-form-item> <el-input v-model="type" />
</el-col> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="类型:" label-position="left"> </el-row>
<el-input v-model="type"/> <el-row :gutter="20">
</el-form-item> <el-col :span="12">
</el-col> <el-form-item label="INTLDES:" label-position="left">
</el-row> <el-input v-model="intldes" />
<el-row :gutter="20"> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="INTLDES:" label-position="left"> <el-col :span="12">
<el-input v-model="intldes"/> <el-form-item label="失效时间:" label-position="left">
</el-form-item> <el-input v-model="expirationTime" />
</el-col> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="失效时间:" label-position="left"> </el-row>
<el-input v-model="expirationTime"/> <el-row :gutter="20">
</el-form-item> <el-col :span="12">
</el-col> <el-form-item label="周期(min):" label-position="left">
</el-row> <el-input v-model="period" />
<el-row :gutter="20"> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="周期(min):" label-position="left"> <el-col :span="12">
<el-input v-model="period"/> <el-form-item label="INCL:" label-position="left">
</el-form-item> <el-input v-model="incl" />
</el-col> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="INCL:" label-position="left"> </el-row>
<el-input v-model="incl"/> <el-row :gutter="20">
</el-form-item> <el-col :span="12">
</el-col> <el-form-item label="RCS:" label-position="left">
</el-row> <el-input v-model="rcs" />
<el-row :gutter="20"> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="RCS:" label-position="left"> <el-col :span="12">
<el-input v-model="rcs"/> <el-form-item label="SITE:" label-position="left">
</el-form-item> <el-input v-model="site" />
</el-col> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="SITE:" label-position="left"> </el-row>
<el-input v-model="site"/> <el-row :gutter="20">
</el-form-item> <el-col :span="24">
</el-col> <el-form-item label="TLE:" label-position="left">
</el-row> <el-input type="textarea" :rows="3" v-model="tle" />
<el-row :gutter="20"> </el-form-item>
<el-col :span="24"> </el-col>
<el-form-item label="TLE:" label-position="left"> </el-row>
<el-input type="textarea" :rows="3" v-model="tle"/> </div>
</el-form-item> </el-form>
</el-col> </el-dialog>
</el-row> </div>
</div> <exportDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleExportConfirm" />
</el-form>
</el-dialog>
</div>
<exportDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleExportConfirm" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
...@@ -416,7 +411,7 @@ const roundTripTime = ref('') ...@@ -416,7 +411,7 @@ const roundTripTime = ref('')
// 距离 // 距离
const distance = ref('') const distance = ref('')
// 目标方位 // 目标方位
const targetAzimuth = ref('') const targetAzimuth = ref('')
// 目标俯仰 // 目标俯仰
const targetElevation = ref('') const targetElevation = ref('')
// 上行信号来源 // 上行信号来源
...@@ -450,53 +445,62 @@ const site = ref('') ...@@ -450,53 +445,62 @@ const site = ref('')
// TLE // TLE
const tle = ref('') const tle = ref('')
const tableData = ref([ const tableData = ref([
{ {
name: '1', number: '1',
}, targetName: 'VOYAGER-2',
{ stationPosition: '[148.98,-35.22]',
name: '1', stationName: 'CANBERRA',
}, NoradCatId: '2134',
{ SNSNoticeId: '90504649',
name: '1', dataTime: '2025-06-24 14:35:23',
}, recordTime: '2025-06-25 14:35:23',
{ tle: '-',
name: '1', isSync: '是',
}, },
{ {
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) => {
console.log(row); console.log(row);
detailVisibleValue.value = true detailVisibleValue.value = true
} }
const getData = () => { const getData = () => {
console.log('getData'); console.log('getData');
} }
const handleClose = () => { const handleClose = () => {
detailVisibleValue.value = false detailVisibleValue.value = false
} }
const handleExportConfirm = () => { const handleExportConfirm = () => {
...@@ -504,99 +508,107 @@ const handleExportConfirm = () => { ...@@ -504,99 +508,107 @@ const handleExportConfirm = () => {
} }
const handleExport = () => { const handleExport = () => {
showDeleteDialog.value = true showDeleteDialog.value = true
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
// 调整表单项间距 // 调整表单项间距
.detailForm { .detailForm {
.el-form-item { .el-form-item {
margin-bottom: 7px !important; margin-bottom: 7px !important;
} }
} }
/* 工具栏样式 */ /* 工具栏样式 */
.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: 1px;
margin-top: 1%; margin-top: 1%;
} }
/* 文字样式 */ /* 文字样式 */
.el-text { .el-text {
color: #FFFFFF; color: #FFFFFF;
} }
</style> </style>
<style> <style>
/* 修改el文本域的背景颜色与边框 */ /* 修改el文本域的背景颜色与边框 */
.el-textarea__inner{ .el-textarea__inner {
background-color: #1d5484; background-color: #1d5484;
--el-input-border-color: none; --el-input-border-color: none;
} }
/* 修改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>
<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>
\ No newline at end of file
src/views/os-dataDisplay/components/dsnData/dsnDataTab.vue
<template> <template>
<div class="text-left p-1 toolbarStyle"> <div class="text-left p-1 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-input placeholder="请输入" style="width: 220px" /> <el-input placeholder="请输入" style="width: 220px" />
</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-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" <el-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始时间"
start-placeholder="开始时间" end-placeholder="结束时间" date-format="YYYY/MM/DD ddd" end-placeholder="结束时间" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" />
time-format="A hh:mm:ss" /> </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 placeholder="请输入" style="width: 220px" />
<el-input placeholder="请输入" style="width: 220px" /> </el-form-item>
</el-form-item> <br></br>
<br></br> <el-form-item>
<el-form-item> <el-space>
<el-space> <el-button type="primary" @click="handleExport">导出最近</el-button>
<el-button type="primary" @click="handleExport">导出最近</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="handleExport">导出选中</el-button>
<el-button type="primary" @click="handleExport">导出选中</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">查询</el-button>
<el-button type="primary">查询</el-button> </el-space>
</el-space> </el-form-item>
</el-form-item> </el-form>
</el-form> </div>
</div> </div>
</div>
<div class="m-t-5"> <div class="m-t-5" />
<div>
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '41px' }"
:header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
<el-table-column type="selection" width="40" />
<el-table-column property="number" label="序号" width="55" />
<el-table-column property="targetName" label="目标名称" show-overflow-tooltip />
<el-table-column property="distance" label="距离(km)" show-overflow-tooltip />
<el-table-column property="roundTripTime" label="往返光时(s)" show-overflow-tooltip />
<el-table-column property="stationName" label="站点名称" show-overflow-tooltip />
<el-table-column property="targetAzimuth" label="目标方位" show-overflow-tooltip />
<el-table-column property="targetElevation" label="目标俯仰" show-overflow-tooltip />
<el-table-column property="targetDistance" label="目标距离" show-overflow-tooltip />
<el-table-column property="windSpeed" label="风速(km/hr)" show-overflow-tooltip />
<el-table-column property="upSignalSource" label="上行信号来源" show-overflow-tooltip />
<el-table-column property="upSignalFrequencyBand" label="上行信号频段" show-overflow-tooltip />
<el-table-column property="upSignalLaunchPower" label="上行发射功率" show-overflow-tooltip />
<el-table-column property="downSignalSignalSource" label="下行信号来源" show-overflow-tooltip />
<el-table-column property="downSignalFrequencyBand" label="下行信号频段" show-overflow-tooltip />
<el-table-column property="downSignalReceptionPower" label="下行接收功率" show-overflow-tooltip />
<el-table-column property="dataTime" label="数据时间" show-overflow-tooltip />
<el-table-column label="操作" width="60">
<template #default="scope">
<el-button type="primary" plain link @click="handleDetails(scope.row)">
详情
</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
@pagination="getData" />
</div>
</div>
</div> <div class="detailForm">
<div> <el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose" draggable>
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '41px' }" <template #header>
:header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"> <div class="text-center font-size-8">
<el-table-column type="selection" width="40" /> 详情
<el-table-column property="name" label="序号" width="55" /> </div>
<el-table-column property="name" label="目标名称" show-overflow-tooltip /> </template>
<el-table-column property="name" label="距离(km)" show-overflow-tooltip /> <el-form label-width="94px" size="small" class="px-4">
<el-table-column property="name" label="往返光时(s)" show-overflow-tooltip /> <div>
<el-table-column property="name" label="站点名称" show-overflow-tooltip /> <el-row :gutter="20">
<el-table-column property="name" label="目标方位" show-overflow-tooltip /> <el-col :span="12">
<el-table-column property="name" label="目标俯仰" show-overflow-tooltip /> <el-form-item label="目标名称:" label-position="left">
<el-table-column property="name" label="目标距离" show-overflow-tooltip /> <el-input v-model="targetName" />
<el-table-column property="name" label="风速(km/hr)" show-overflow-tooltip /> </el-form-item>
<el-table-column property="name" label="上行信号来源" show-overflow-tooltip /> </el-col>
<el-table-column property="name" label="上行信号频段" show-overflow-tooltip /> <el-col :span="12">
<el-table-column property="name" label="上行发射功率" show-overflow-tooltip /> <el-form-item label="距离(km):" label-position="left">
<el-table-column property="name" label="下行信号来源" show-overflow-tooltip /> <el-input v-model="distance" />
<el-table-column property="name" label="下行信号频段" show-overflow-tooltip /> </el-form-item>
<el-table-column property="tle" label="下行接收功率" show-overflow-tooltip /> </el-col>
<el-table-column property="tle" label="数据时间" show-overflow-tooltip /> </el-row>
<el-table-column label="操作" width="60"> <el-row :gutter="20">
<template #default="scope"> <el-col :span="12">
<el-button type="primary" plain link @click="handleDetails(scope.row)"> <el-form-item label="往返光时:" label-position="left">
详情 <el-input v-model="roundTripTime" />
</el-button> </el-form-item>
</template> </el-col>
</el-table-column> <el-col :span="12">
</el-table> <el-form-item label="站点名称:" label-position="left">
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4"> <el-input v-model="stationName" />
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize" </el-form-item>
@pagination="getData" /> </el-col>
</div> </el-row>
</div> <el-row :gutter="20">
<el-col :span="12">
<el-form-item label="目标方位:" label-position="left">
<el-input v-model="targetAzimuth" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="目标俯仰:" label-position="left">
<el-input v-model="targetElevation" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="目标距离:" label-position="left">
<el-input v-model="targetDistance" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="风速(km/hr):" label-position="left">
<el-input v-model="windSpeed" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="上行信号来源:" label-position="left">
<el-input v-model="upSignalSource" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="上行信号频段:" label-position="left">
<el-input v-model="upSignalFrequencyBand" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="上行发射功率:" label-position="left">
<el-input v-model="upSignalLaunchPower" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="下行信号来源:" label-position="left">
<el-input v-model="downSignalSignalSource" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="下行信号频段:" label-position="left">
<el-input v-model="downSignalFrequencyBand" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="下行接收功率:" label-position="left">
<el-input v-model="downSignalReceptionPower" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="数据时间:" label-position="left">
<el-input v-model="dataTime" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="记录时间:" label-position="left">
<el-input v-model="recordTime" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="是否暂停使用:" label-position="left">
<el-input v-model="isSuspended" />
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</el-dialog>
</div>
<div class="detailForm"> <exportDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleExportConfirm" />
<el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose"
draggable>
<template #header>
<div class="text-center font-size-8">
详情
</div>
</template>
<el-form label-width="94px" size="small" class="px-4">
<div>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="目标名称:" label-position="left">
<el-input v-model="targetName" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="距离(km):" label-position="left">
<el-input v-model="distance" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="往返光时:" label-position="left">
<el-input v-model="roundTripTime" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="站点名称:" label-position="left">
<el-input v-model="stationName" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="目标方位:" label-position="left">
<el-input v-model="targetAzimuth" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="目标俯仰:" label-position="left">
<el-input v-model="targetElevation" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="目标距离:" label-position="left">
<el-input v-model="targetDistance" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="风速(km/hr):" label-position="left">
<el-input v-model="windSpeed" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="上行信号来源:" label-position="left">
<el-input v-model="upSignalSource" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="上行信号频段:" label-position="left">
<el-input v-model="upSignalFrequencyBand" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="上行发射功率:" label-position="left">
<el-input v-model="upSignalLaunchPower" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="下行信号来源:" label-position="left">
<el-input v-model="downSignalSignalSource" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="下行信号频段:" label-position="left">
<el-input v-model="downSignalFrequencyBand" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="下行接收功率:" label-position="left">
<el-input v-model="downSignalReceptionPower" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="数据时间:" label-position="left">
<el-input v-model="dataTime" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="记录时间:" label-position="left">
<el-input v-model="recordTime" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="是否暂停使用:" label-position="left">
<el-input v-model="isSuspended" />
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</el-dialog>
</div>
<exportDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleExportConfirm" />
</template> </template>
...@@ -220,7 +216,7 @@ const roundTripTime = ref('') ...@@ -220,7 +216,7 @@ const roundTripTime = ref('')
// 站点名称 // 站点名称
const stationName = ref('') const stationName = ref('')
// 目标方位 // 目标方位
const targetAzimuth = ref('') const targetAzimuth = ref('')
// 目标俯仰 // 目标俯仰
const targetElevation = ref('') const targetElevation = ref('')
// 目标距离 // 目标距离
...@@ -247,139 +243,153 @@ const recordTime = ref('') ...@@ -247,139 +243,153 @@ const recordTime = ref('')
const isSuspended = ref('') const isSuspended = ref('')
const tableData = ref([ const tableData = ref([
{ {
name: '1', number: '1',
tle: 'CALSPHERE 1 1 00900U 64063C 25250.97134884 .00000721 00000+0 72980-3 0 99942 00900 90.2130 65.2545 0027289 68.6758 54.6817 13.76179512 32605' targetName: 'maven',
}, distance: '2000',
{ roundTripTime: '12',
name: '1', stationName: 'CANBERRA',
}, targetAzimuth: '11',
{ targetElevation: '24',
name: '1', targetDistance: '2000',
}, windSpeed: '10',
{ upSignalSource: 'maven',
name: '1', upSignalFrequencyBand: 'X',
}, upSignalLaunchPower: '123',
{ downSignalSignalSource: 'maven',
name: '1', downSignalFrequencyBand: 'S',
}, downSignalReceptionPower: '23',
{ dataTime: '2025-06-21 12: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',
},
]) ])
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);
detailVisibleValue.value = true detailVisibleValue.value = true
} }
const getData = () => { const getData = () => {
console.log('getData'); console.log('getData');
} }
const handleClose = () => { const handleClose = () => {
detailVisibleValue.value = false detailVisibleValue.value = false
} }
const handleExportConfirm = () => { const handleExportConfirm = () => {
} }
const handleExport = () => { const handleExport = () => {
showDeleteDialog.value = true showDeleteDialog.value = true
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
// 调整表单项间距 // 调整表单项间距
.detailForm { .detailForm {
.el-dialog-title { .el-dialog-title {
font-size: 180px; font-size: 180px;
} }
.el-form-item { .el-form-item {
margin-bottom: 30px !important; margin-bottom: 30px !important;
} }
} }
/* 工具栏样式 */ /* 工具栏样式 */
.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/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="default" /> <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/components/dsnData/newsDataTab.vue
<template> <template>
<div class="text-left p-1 toolbarStyle"> <div class="text-left p-1 toolbarStyle">
<div class="formStyle m-l-20"> <div class="formStyle m-l-20">
<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-input placeholder="请输入" style="width: 220px" /> <el-input placeholder="请输入" style="width: 220px" />
</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-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" <el-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始时间"
start-placeholder="开始时间" end-placeholder="结束时间" date-format="YYYY/MM/DD ddd" end-placeholder="结束时间" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" />
time-format="A hh:mm:ss" /> </el-form-item>
</el-form-item> <el-form-item>
<el-form-item> <el-space>
<el-space> <el-button type="primary" @click="handleExport">导出最近</el-button>
<el-button type="primary" @click="handleExport">导出最近</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="handleExport">导出选中</el-button>
<el-button type="primary" @click="handleExport">导出选中</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">查询</el-button>
<el-button type="primary">查询</el-button> </el-space>
</el-space> </el-form-item>
</el-form-item> </el-form>
</el-form> </div>
</div> </div>
</div>
<div class="m-t-5"> <div class="m-t-5" />
<div>
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '48px' }"
:header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
<el-table-column type="selection" width="40" />
<el-table-column property="number" label="序号" width="55" />
<el-table-column property="newsTitle" label="新闻标题" show-overflow-tooltip />
<el-table-column property="newsSource" label="新闻来源" show-overflow-tooltip />
<el-table-column property="newsDate" label="新闻日期" show-overflow-tooltip />
<el-table-column property="newsGetTime" label="获取时间" show-overflow-tooltip />
<el-table-column label="操作" width="60">
<template #default="scope">
<el-button type="primary" plain link @click="handleDetails(scope.row)">
详情
</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
@pagination="getData" />
</div>
</div>
</div> <div class="detailForm">
<div> <el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose" draggable>
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '48px' }" <template #header>
:header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"> <div class="text-center font-size-8">
<el-table-column type="selection" width="40" /> 详情
<el-table-column property="name" label="序号" width="55" /> </div>
<el-table-column property="name" label="新闻标题" show-overflow-tooltip /> </template>
<el-table-column property="name" label="新闻来源" show-overflow-tooltip /> <el-form label-width="70px" size="small" class="px-4">
<el-table-column property="name" label="新闻日期" show-overflow-tooltip /> <div>
<el-table-column property="name" label="获取时间" show-overflow-tooltip /> <el-row :gutter="20">
<el-table-column label="操作" width="60"> <el-col :span="12">
<template #default="scope"> <el-form-item label="新闻标题:" label-position="left">
<el-button type="primary" plain link @click="handleDetails(scope.row)"> <el-input v-model="newsTitle" />
详情 </el-form-item>
</el-button> </el-col>
</template> <el-col :span="12">
</el-table-column> <el-form-item label="新闻来源:" label-position="left">
</el-table> <el-input v-model="newsSource" />
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4"> </el-form-item>
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize" </el-col>
@pagination="getData" /> </el-row>
</div> <el-row :gutter="20">
</div> <el-col :span="12">
<el-form-item label="新闻日期:" label-position="left">
<el-input v-model="newsDate" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="获取时间:" label-position="left">
<el-select placeholder=" ">
<el-input v-model="newsGetTime" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="新闻内容:" label-position="top">
<el-input type="textarea" :rows="12" v-model="newsContent" />
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</el-dialog>
</div>
<div class="detailForm"> <exportDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleExportConfirm" />
<el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose"
draggable>
<template #header>
<div class="text-center font-size-8">
详情
</div>
</template>
<el-form label-width="70px" size="small" class="px-4">
<div>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="新闻标题:" label-position="left">
<el-input v-model="newsTitle" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="新闻来源:" label-position="left">
<el-input v-model="newsSource" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="新闻日期:" label-position="left">
<el-input v-model="newsDate" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="获取时间:" label-position="left">
<el-select placeholder=" ">
<el-input v-model="newsGetTime" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="新闻内容:" label-position="top">
<el-input type="textarea" :rows="12" v-model="newsContent" />
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</el-dialog>
</div>
<exportDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleExportConfirm" />
</template> </template>
...@@ -134,142 +130,146 @@ const newsGetTime = ref('') ...@@ -134,142 +130,146 @@ const newsGetTime = ref('')
// 新闻内容 // 新闻内容
const newsContent = ref('') const newsContent = ref('')
const tableData = ref([ const tableData = ref([
{ {
name: '1', number: '1',
tle: 'CALSPHERE 1 1 00900U 64063C 25250.97134884 .00000721 00000+0 72980-3 0 99942 00900 90.2130 65.2545 0027289 68.6758 54.6817 13.76179512 32605' newsTitle: 'satellite task',
}, newsSource: 'nasa',
{ newsDate: '2025-09-01 12:00:00',
name: '1', newsGetTime: '2025-09-01 12: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) => {
console.log(row); console.log(row);
detailVisibleValue.value = true detailVisibleValue.value = true
} }
const handleConfirm = (row: any) => { const handleConfirm = (row: any) => {
console.log(row); console.log(row);
} }
const getData = () => { const getData = () => {
console.log('getData'); console.log('getData');
} }
const handleClose = () => { const handleClose = () => {
detailVisibleValue.value = false detailVisibleValue.value = false
} }
const handleExportConfirm = () => { const handleExportConfirm = () => {
} }
const handleExport = () => { const handleExport = () => {
showDeleteDialog.value = true showDeleteDialog.value = true
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
// 调整表单项间距 // 调整表单项间距
.detailForm { .detailForm {
.el-dialog-title { .el-dialog-title {
font-size: 180px; font-size: 180px;
} }
.el-form-item { .el-form-item {
margin-bottom: 30px !important; margin-bottom: 30px !important;
} }
} }
/* 工具栏样式 */ /* 工具栏样式 */
.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/components/ituDataTab.vue
<template> <template>
<div class="text-left p-4 toolbarStyle"> <div class="text-left p-4 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-input placeholder="请输入" style="width: 220px" /> <el-input placeholder="请输入" style="width: 220px" />
</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-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" <el-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始时间"
start-placeholder="开始时间" end-placeholder="结束时间" date-format="YYYY/MM/DD ddd" end-placeholder="结束时间" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" />
time-format="A hh:mm:ss" /> </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 placeholder="请输入" style="width: 220px" />
<el-input placeholder="请输入" style="width: 220px" /> </el-form-item>
</el-form-item> <br></br>
<br></br> <el-form-item>
<el-form-item> <el-text class="mx-1">SNS Notice ID:</el-text>
<el-text class="mx-1">SNS Notice ID:</el-text> </el-form-item>
</el-form-item> <el-form-item>
<el-form-item> <el-input placeholder="请输入" style="width: 188.5px" />
<el-input placeholder="请输入" style="width: 188.5px" /> </el-form-item>
</el-form-item> <el-form-item>
<el-form-item> <el-space>
<el-space> <el-button type="primary" @click="handleExport">导出最近</el-button>
<el-button type="primary" @click="handleExport">导出最近</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="handleExport">导出选中</el-button>
<el-button type="primary" @click="handleExport">导出选中</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">查询</el-button>
<el-button type="primary">查询</el-button> </el-space>
</el-space> </el-form-item>
</el-form-item> </el-form>
</el-form> </div>
</div> </div>
</div>
<div class="m-t-5"> <div class="m-t-5" />
<div>
</div> <el-table :data="tableData" style="width: 100%" border :row-style="{ height: '42.5px' }"
<div> :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '42.5px' }" <el-table-column type="selection" width="40" />
:header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"> <el-table-column property="number" label="序号" width="55" />
<el-table-column type="selection" width="40" /> <el-table-column property="SNSNoticeID" label="SNS Notice ID" show-overflow-tooltip />
<el-table-column property="name" label="SNS Notice ID" show-overflow-tooltip /> <el-table-column property="department" label="主管部门" show-overflow-tooltip />
<el-table-column property="name" label="主管部门" show-overflow-tooltip /> <el-table-column property="targetName" label="目标名称" show-overflow-tooltip />
<el-table-column property="name" label="目标名称" show-overflow-tooltip /> <el-table-column property="planType" label="计划/非计划类型" show-overflow-tooltip />
<el-table-column property="name" label="计划/非计划类型" show-overflow-tooltip /> <el-table-column property="syncType" label="是否为同步" show-overflow-tooltip />
<el-table-column property="name" label="是否为同步" show-overflow-tooltip /> <el-table-column property="syncPosition" label="同步位置" show-overflow-tooltip />
<el-table-column property="name" label="同步位置" show-overflow-tooltip /> <el-table-column property="perigee" label="近地点" show-overflow-tooltip />
<el-table-column property="name" label="近地点" show-overflow-tooltip /> <el-table-column property="apogee" label="远地点" show-overflow-tooltip />
<el-table-column property="name" label="远地点" show-overflow-tooltip /> <el-table-column property="lowestAltitude" label="最低海拔" show-overflow-tooltip />
<el-table-column property="name" label="最低海拔" show-overflow-tooltip /> <el-table-column property="referenceSubject" label="参考主体" show-overflow-tooltip />
<el-table-column property="name" label="参考主体" show-overflow-tooltip /> <el-table-column property="highestFrequency" label="最高频率" show-overflow-tooltip />
<el-table-column property="name" label="最高频率" show-overflow-tooltip /> <el-table-column property="lowestFrequency" label="最低频率" show-overflow-tooltip />
<el-table-column property="name" label="最低频率" show-overflow-tooltip /> <el-table-column property="status" label="状态" show-overflow-tooltip />
<el-table-column property="name" label="状态" show-overflow-tooltip /> <el-table-column property="validityPeriod" label="有效期" show-overflow-tooltip />
<el-table-column property="name" label="有效期" show-overflow-tooltip /> <el-table-column property="earliestUsageDate" label="最早使用日期" show-overflow-tooltip />
<el-table-column property="name" label="最早使用日期" show-overflow-tooltip /> <el-table-column property="isUsed" label="是否确认使用" show-overflow-tooltip />
<el-table-column property="name" label="是否确认使用" show-overflow-tooltip /> <el-table-column property="isPauseUsed" label="是否暂停使用" show-overflow-tooltip />
<el-table-column property="name" label="是否暂停使用" show-overflow-tooltip /> <el-table-column label="操作" width="60">
<el-table-column label="操作" width="60"> <template #default="scope">
<template #default="scope"> <el-button type="primary" plain link @click="handleDetails(scope.row)">
<el-button type="primary" plain link @click="handleDetails(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> </div>
</div>
<div class="detailForm">
<el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose"
draggable>
<template #header>
<div class="text-center font-size-8">
详情
</div>
</template>
<el-form label-width="135px" size="small" class="px-4">
<div>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="SNS Notice ID:" label-position="left">
<el-input v-model="snsId" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="主管部门:" label-position="left">
<el-input v-model="department" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="目标名称:" label-position="left">
<el-input v-model="targetName" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="计划/非计划类型:" label-position="left">
<el-input v-model="planType" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="是否为同步:" label-position="left">
<el-input v-model="syncType" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="同步位置:" label-position="left">
<el-input v-model="syncPosition" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="近地点:" label-position="left">
<el-input v-model="perigee" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="远地点:" label-position="left">
<el-input v-model="apogee" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="最低海拔:" label-position="left">
<el-input v-model="lowestAltitude" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="参考主体:" label-position="left">
<el-input v-model="referenceSubject" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="最低频率:" label-position="left">
<el-input v-model="lowestFrequency" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="最高频率:" label-position="left">
<el-input v-model="highestFrequency" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="状态:" label-position="left">
<el-input v-model="status" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="有效期:" label-position="left">
<el-input v-model="validityPeriod" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="最早使用日期:" label-position="left">
<el-input v-model="earliestUsageDate" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否确认使用:" label-position="left">
<el-input v-model="isUsed" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="是否暂停使用:" label-position="left">
<el-input v-model="isPauseUsed" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="记录时间:" label-position="left">
<el-input v-model="recordTime" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="是否纳入国际频率总表:" label-position="left">
<el-input v-model="IsInTheInternationalFrequencyList" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="最早监管日期:" label-position="left">
<el-input v-model="earliestRegulatoryDate" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="是否恢复使用:" label-position="left">
<el-input v-model="isRestoreUsed" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="有效期卫星网络旧名称:" label-position="left">
<el-input v-model="validityPeriodSatelliteNetworkOldName" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="最新相关 BR IFIC 发布日期:" label-position="top">
<el-input v-model="BFIFICdate" />
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</el-dialog>
</div>
<exportDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleExportConfirm" />
<div class="detailForm">
<el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose" draggable>
<template #header>
<div class="text-center font-size-8">
详情
</div>
</template>
<el-form label-width="135px" size="small" class="px-4">
<div>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="SNS Notice ID:" label-position="left">
<el-input v-model="snsId" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="主管部门:" label-position="left">
<el-input v-model="department" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="目标名称:" label-position="left">
<el-input v-model="targetName" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="计划/非计划类型:" label-position="left">
<el-input v-model="planType" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="是否为同步:" label-position="left">
<el-input v-model="syncType" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="同步位置:" label-position="left">
<el-input v-model="syncPosition" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="近地点:" label-position="left">
<el-input v-model="perigee" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="远地点:" label-position="left">
<el-input v-model="apogee" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="最低海拔:" label-position="left">
<el-input v-model="lowestAltitude" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="参考主体:" label-position="left">
<el-input v-model="referenceSubject" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="最低频率:" label-position="left">
<el-input v-model="lowestFrequency" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="最高频率:" label-position="left">
<el-input v-model="highestFrequency" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="状态:" label-position="left">
<el-input v-model="status" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="有效期:" label-position="left">
<el-input v-model="validityPeriod" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="最早使用日期:" label-position="left">
<el-input v-model="earliestUsageDate" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否确认使用:" label-position="left">
<el-input v-model="isUsed" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="是否暂停使用:" label-position="left">
<el-input v-model="isPauseUsed" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="记录时间:" label-position="left">
<el-input v-model="recordTime" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="是否纳入国际频率总表:" label-position="left">
<el-input v-model="IsInTheInternationalFrequencyList" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="最早监管日期:" label-position="left">
<el-input v-model="earliestRegulatoryDate" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="是否恢复使用:" label-position="left">
<el-input v-model="isRestoreUsed" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="有效期卫星网络旧名称:" label-position="left">
<el-input v-model="validityPeriodSatelliteNetworkOldName" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="最新相关 BR IFIC 发布日期:" label-position="top">
<el-input v-model="BFIFICdate" />
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</el-dialog>
</div>
<exportDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleExportConfirm" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
...@@ -302,132 +296,153 @@ const validityPeriodSatelliteNetworkOldName = ref('') ...@@ -302,132 +296,153 @@ const validityPeriodSatelliteNetworkOldName = ref('')
// 最新相关 BR IFIC 发布日期 // 最新相关 BR IFIC 发布日期
const BFIFICdate = ref('') const BFIFICdate = ref('')
const tableData = ref([ const tableData = ref([
{ {
name: '1', number: '1',
}, SNSNoticeID: '86550007',
{ department: 'ARG',
name: '1', targetName: 'ARGOS',
}, planType: '计划',
{ syncType: '否',
name: '1', syncPosition: '-',
}, perigee: '2000',
{ apogee: '2500',
name: '1', lowestAltitude: '165',
}, referenceSubject: '地球',
{ lowestFrequency: 'None',
name: '1', highestFrequency: 'None',
}, status: 'None',
{ validityPeriod: '-',
name: '1', earliestUsageDate: 'None',
}, isUsed: 'No',
{ isPauseUsed: 'No',
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) => {
console.log(row); console.log(row);
detailVisibleValue.value = true detailVisibleValue.value = true
} }
const getData = () => { const getData = () => {
console.log('getData'); console.log('getData');
} }
const handleClose = () => { const handleClose = () => {
detailVisibleValue.value = false detailVisibleValue.value = false
} }
const handleExportConfirm = () => { const handleExportConfirm = () => {
} }
const handleExport = () => { const handleExport = () => {
showDeleteDialog.value = true showDeleteDialog.value = true
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
// 调整表单项间距 // 调整表单项间距
.detailForm { .detailForm {
.el-dialog-title { .el-dialog-title {
font-size: 180px; font-size: 180px;
} }
.el-form-item {
margin-bottom: 20px !important; .el-form-item {
} margin-bottom: 20px !important;
}
} }
/* 工具栏样式 */ /* 工具栏样式 */
.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/components/stDataTab.vue
<template> <template>
<div class="text-left p-4 toolbarStyle"> <div class="text-left p-4 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-input placeholder="请输入" style="width: 220px" /> <el-input placeholder="请输入" style="width: 220px" />
</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-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" <el-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始时间"
start-placeholder="开始时间" end-placeholder="结束时间" date-format="YYYY/MM/DD ddd" end-placeholder="结束时间" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" />
time-format="A hh:mm:ss" /> </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 placeholder="请输入" style="width: 220px" />
<el-input placeholder="请输入" style="width: 220px" /> </el-form-item>
</el-form-item> <br></br>
<br></br> <el-form-item>
<el-form-item> <el-text class="mx-1">NORAD CAT ID:</el-text>
<el-text class="mx-1">NORAD CAT ID:</el-text> </el-form-item>
</el-form-item> <el-form-item>
<el-form-item> <el-input placeholder="请输入" style="width: 188.5px" />
<el-input placeholder="请输入" style="width: 188.5px" /> </el-form-item>
</el-form-item> <el-form-item>
<el-form-item> <el-space>
<el-space> <el-button type="primary" @click="handleExport">导出最近</el-button>
<el-button type="primary" @click="handleExport">导出最近</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="handleExport">导出选中</el-button>
<el-button type="primary" @click="handleExport">导出选中</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">查询</el-button>
<el-button type="primary">查询</el-button> </el-space>
</el-space> </el-form-item>
</el-form-item> </el-form>
</el-form> </div>
</div> </div>
</div>
<div class="m-t-5"> <div class="m-t-5" />
<div>
</div> <el-table :data="tableData" style="width: 100%" border :row-style="{ height: '42.5px' }"
<div> :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '42.5px' }" <el-table-column type="selection" width="40" />
:header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"> <el-table-column property="number" label="序号" width="55" />
<el-table-column type="selection" width="40" /> <el-table-column property="NoradCatID" label="Norad Cat ID" show-overflow-tooltip />
<el-table-column property="name" label="序号" width="55" /> <el-table-column property="targetName" label="目标名称" show-overflow-tooltip />
<el-table-column property="name" label="Norad Cat ID" show-overflow-tooltip /> <el-table-column property="intleds" label="INTLDES" show-overflow-tooltip />
<el-table-column property="name" label="目标名称" show-overflow-tooltip /> <el-table-column property="type" label="类型" show-overflow-tooltip />
<el-table-column property="name" label="INTLDES" show-overflow-tooltip /> <el-table-column property="belongCountry" label="所属国家" width="82" show-overflow-tooltip />
<el-table-column property="name" label="类型" show-overflow-tooltip /> <el-table-column property="runningTime" label="运行时间" show-overflow-tooltip />
<el-table-column property="name" label="所属国家" width="82" show-overflow-tooltip /> <el-table-column property="site" label="SITE" show-overflow-tooltip />
<el-table-column property="name" label="运行时间" show-overflow-tooltip /> <el-table-column property="failTime" label="失效时间" show-overflow-tooltip />
<el-table-column property="name" label="SITE" show-overflow-tooltip /> <el-table-column property="period" label="周期" show-overflow-tooltip />
<el-table-column property="name" label="失效时间" show-overflow-tooltip /> <el-table-column property="perigee" label="近地点" show-overflow-tooltip />
<el-table-column property="name" label="周期" show-overflow-tooltip /> <el-table-column property="apogee" label="远地点" show-overflow-tooltip />
<el-table-column property="name" label="近地点" show-overflow-tooltip /> <el-table-column property="incl" label="INCL" show-overflow-tooltip />
<el-table-column property="name" label="远地点" show-overflow-tooltip /> <el-table-column property="rcs" label="RCS" show-overflow-tooltip />
<el-table-column property="name" label="INCL" show-overflow-tooltip /> <el-table-column property="tle" label="TLE" show-overflow-tooltip />
<el-table-column property="name" label="RCS" show-overflow-tooltip /> <el-table-column label="操作" width="60">
<el-table-column property="tle" label="TLE" show-overflow-tooltip /> <template #default="scope">
<el-table-column label="操作" width="60"> <el-button type="primary" plain link @click="handleDetails(scope.row)">
<template #default="scope"> 详情
<el-button type="primary" plain link @click="handleDetails(scope.row)"> </el-button>
详情 </template>
</el-button> </el-table-column>
</template> </el-table>
</el-table-column> <div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
</el-table> <Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4"> @pagination="getData" />
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize" </div>
@pagination="getData" /> </div>
</div>
</div>
<div class="detailForm">
<el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose"
draggable>
<template #header>
<div class="text-center font-size-8">
详情
</div>
</template>
<el-form label-width="70px" size="small" class="px-4">
<div>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="NoradCatID:" label-position="left">
<el-input v-model="NoradCatID" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="目标名称:" label-position="left">
<el-input v-model="targetName" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="INTLDES:" label-position="left">
<el-input v-model="intleds" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="类型:" label-position="left">
<el-input v-model="type" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="运行时间:" label-position="left">
<el-input v-model="workTime" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="失效时间:" label-position="left">
<el-input v-model="failTime" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="记录时间:" label-position="left">
<el-input v-model="recordTime" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属国家:" label-position="left">
<el-input v-model="belongCountry" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="近地点:" label-position="left">
<el-input v-model="perigee" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="远地点:" label-position="left">
<el-input v-model="apogee" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="周期(min):" label-position="left">
<el-input v-model="period" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="INCL:" label-position="left">
<el-input v-model="incl" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="RCS:" label-position="left">
<el-input v-model="rcs" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="SITE:" label-position="left">
<el-input v-model="site" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="TLE:" label-position="left">
<el-input type="textarea" :rows="3" v-model="tle" />
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</el-dialog>
</div>
<exportDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleExportConfirm" />
<div class="detailForm">
<el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose" draggable>
<template #header>
<div class="text-center font-size-8">
详情
</div>
</template>
<el-form label-width="70px" size="small" class="px-4">
<div>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="NoradCatID:" label-position="left">
<el-input v-model="NoradCatID" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="目标名称:" label-position="left">
<el-input v-model="targetName" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="INTLDES:" label-position="left">
<el-input v-model="intleds" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="类型:" label-position="left">
<el-input v-model="type" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="运行时间:" label-position="left">
<el-input v-model="workTime" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="失效时间:" label-position="left">
<el-input v-model="failTime" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="记录时间:" label-position="left">
<el-input v-model="recordTime" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属国家:" label-position="left">
<el-input v-model="belongCountry" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="近地点:" label-position="left">
<el-input v-model="perigee" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="远地点:" label-position="left">
<el-input v-model="apogee" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="周期(min):" label-position="left">
<el-input v-model="period" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="INCL:" label-position="left">
<el-input v-model="incl" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="RCS:" label-position="left">
<el-input v-model="rcs" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="SITE:" label-position="left">
<el-input v-model="site" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="TLE:" label-position="left">
<el-input type="textarea" :rows="3" v-model="tle" />
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</el-dialog>
</div>
<exportDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleExportConfirm" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
...@@ -236,136 +230,150 @@ const site = ref('') ...@@ -236,136 +230,150 @@ const site = ref('')
const tle = ref('') const tle = ref('')
const tableData = ref([ const tableData = ref([
{ {
name: '1', number: '1',
tle: 'CALSPHERE 1 1 00900U 64063C 25250.97134884 .00000721 00000+0 72980-3 0 99942 00900 90.2130 65.2545 0027289 68.6758 54.6817 13.76179512 32605' NoradCatID: '1358',
}, targetName: 'SL-1 R/B',
{ intleds: '1957-001A',
name: '1', type: 'ROCKET BODY',
}, belongCountry: 'RUS',
{ runningTime: '1957-10-14',
name: '1', site: 'TTMTR',
}, failTime: '1958-12-01',
{ period: '96.19',
name: '1', perigee: '214',
}, apogee: '938',
{ incl: '65.14',
name: '1', rcs: 'LARGE',
}, tle: '-',
{ },
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) => {
console.log(row); console.log(row);
detailVisibleValue.value = true detailVisibleValue.value = true
} }
const getData = () => { const getData = () => {
console.log('getData'); console.log('getData');
} }
const handleClose = () => { const handleClose = () => {
detailVisibleValue.value = false detailVisibleValue.value = false
} }
const handleExportConfirm = () => { const handleExportConfirm = () => {
} }
const handleExport = () => { const handleExport = () => {
showDeleteDialog.value = true showDeleteDialog.value = true
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
// 调整表单项间距 // 调整表单项间距
.detailForm { .detailForm {
.el-dialog-title { .el-dialog-title {
font-size: 180px; font-size: 180px;
} }
.el-form-item { .el-form-item {
margin-bottom: 30px !important; margin-bottom: 30px !important;
} }
} }
/* 工具栏样式 */ /* 工具栏样式 */
.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
...@@ -24,26 +24,51 @@ ...@@ -24,26 +24,51 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref, onMounted } from 'vue'
import allDataTab from './components/allDataTab.vue' import { useRoute } from 'vue-router'
import ituDataTab from './components/ituDataTab.vue' import { useRouter } from 'vue-router'
import stDataTab from './components/stDataTab.vue' import allDataTab from './components/allDataTab.vue'
import dsnDataTab from './components/dsnData/dsnTab.vue' import ituDataTab from './components/ituDataTab.vue'
import stDataTab from './components/stDataTab.vue'
import dsnDataTab from './components/dsnData/dsnTab.vue'
const mode = ref('综合数据') const mode = ref('综合数据')
const sizeOptions = ['综合数据', 'DSN数据', 'ITU数据', 'ST数据'] const sizeOptions = ['综合数据', 'DSN数据', 'ITU数据', 'ST数据']
const route = useRoute()
const router = useRouter()
const modeValue = ref<any>('数据展示')
const goToStatus = () => {
router.push({
path: '/osStatus/list',
})
}
onMounted(() => {
console.log('数据展示');
console.log(route.query);
if (route.query.mode) {
modeValue.value = route.query.mode
mode.value = modeValue.value
}
})
</script> </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 {
background-image: url("@/assets/picture/back.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 5vh;
width: 5%;
display: flex;
margin-left: 0.8%;
}
</style> </style>
src/views/os-log/index.vue
...@@ -19,31 +19,29 @@ const router = useRouter() ...@@ -19,31 +19,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: 8vh; height: 5vh;
width: 9%; width: 5%;
display: flex; display: flex;
margin-left: 2.5%; 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
...@@ -25,68 +25,79 @@ ...@@ -25,68 +25,79 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref, onMounted } from 'vue'
import Pagination from '@/components/pagination/index.vue' import Pagination from '@/components/pagination/index.vue'
import { useRouter } from 'vue-router'
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({
path: '/osTaskInformation/list',
query: {
jump: 'yes'
}
})
} }
const getData = () => { const getData = () => {
console.log('getData'); console.log('getData');
} }
onMounted(() => {
})
</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">
<div class="dataCard"> <span class="textStyle">数据统计</span>
<div class="titleStyle"> <div class="dataCard" @click="goToAllDataPage">
<span>数据统计</span> <div class="titleStyle">
</div> <span>数据统计</span>
<div class="wordStyle"> </div>
<span>总数据量: {{ totalDataNumber }} 条</span> <div class="wordStyle">
</div> <span>总数据量: {{ totalDataNumber }} 1230</span>
<div class="wordStyle"> </div>
<span>采集的页面数量: {{ totalPageNumber }} 页</span> <div class="wordStyle">
</div> <span>采集的页面数量: {{ totalPageNumber }} 85</span>
<div class="wordStyle"> </div>
<span>采集的目标数量: {{ totalTargetNumber }} 个</span> <div class="wordStyle">
</div> <span>采集的目标数量: {{ totalTargetNumber }} 569</span>
</div> </div>
<div class="dataCard"> </div>
<div class="titleStyle"> <div class="dataCard" @click="goToTaskRecordPage">
<span>任务执行统计</span> <div class="titleStyle">
</div> <span>任务执行统计</span>
<div class="wordStyle"> </div>
<span>任务执行成功统计: {{ successTask }} 个</span> <div class="wordStyle">
</div> <span>任务执行成功统计: {{ successTask }} 36</span>
<div class="wordStyle"> </div>
<span>任务执行失败统计: {{ failTask }} 个</span> <div class="wordStyle">
</div> <span>任务执行失败统计: {{ failTask }} 0</span>
<div class="wordStyle"> </div>
<span>任务异常数统计: {{ unusualTask }} 个</span> <div class="wordStyle">
</div> <span>任务异常数统计: {{ unusualTask }} 1</span>
</div> </div>
<div class="dataCard"> </div>
<div class="titleStyle"> <div class="dataCard">
<span>性能统计</span> <div class="titleStyle">
</div> <span>性能统计</span>
<div class="wordStyle"> </div>
<span>平均成功率: {{ speed }}%</span> <div class="wordStyle">
</div> <span>平均成功率: {{ speed }} 98%</span>
<div class="wordStyle"> </div>
<span>平均错误率: {{ errorRate }}% </span> <div class="wordStyle">
</div> <span>平均错误率: {{ errorRate }} 0%</span>
<div class="wordStyle"> </div>
<span>平均异常率: {{ errorRate }}% </span> <div class="wordStyle">
</div> <span>平均异常率: {{ errorRate }} 2%</span>
</div> </div>
</div> </div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useRouter } from 'vue-router';
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 = () => {
router.push({
path: '/osDataDisplay/list',
query: {
jump: 'yes',
mode: '综合数据'
}
})
}
const goToTaskRecordPage = () => {
router.push({
path: '/osTaskRecord/list',
query: {
jump: 'yes',
mode: '状态监控'
}
})
}
</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: 34px; font-size: 30px;
margin-top: 3.5%; margin-top: 5%;
color: #FFFFFF; color: #FFFFFF;
} }
.wordStyle { .wordStyle {
font-size: 24px; font-size: 20px;
color: #FFFFFF; color: #FFFFFF;
margin-top: 2%;
}
.textStyle {
writing-mode: vertical-lr;
font-size: 26px;
letter-spacing: 3px;
margin-left: 0.5%;
color: #FFFFFF;
// display: flex;
} }
</style> </style>
src/views/os-status/components/qbDataMonitor.vue
<template> <template>
<div class="flex gap-10"> <div class="flex gap-10">
<div class="dataCard"> <span class="textStyle">QB数据管理</span>
<div class="titleStyle"> <div class="dataCard" @click="goToAllDataPage">
<span>综合数据</span> <div class="titleStyle">
</div> <span>综合数据</span>
<div class="wordStyle"> </div>
<span>总数据量: {{ totalDataNumber }} 条</span> <div class="iconStyle" />
</div> </div>
<div class="wordStyle"> <div class="dataCard" @click="goToDSNDataPage">
<span>采集的页面数量: {{ totalPageNumber }} 页</span> <div class="titleStyle">
</div> <span>DSN数据</span>
<div class="wordStyle"> </div>
<span>采集的目标数量: {{ totalTargetNumber }} 个</span> <div class="iconStyle" />
</div> </div>
</div> <div class="dataCard" @click="goToITUDataPage">
<div class="dataCard"> <div class="titleStyle">
<div class="titleStyle"> <span>ITU数据</span>
<span>DSN数据</span> </div>
</div> <div class="iconStyle" />
<div class="wordStyle"> </div>
<span>任务执行成功统计: {{ successTask }} 个</span> <div class="dataCard" @click="goToSTDataPage">
</div> <div class="titleStyle">
<div class="wordStyle"> <span>ST数据</span>
<span>任务执行失败统计: {{ failTask }} 个</span> </div>
</div> <div class="iconStyle" />
<div class="wordStyle"> </div>
<span>任务异常数统计: {{ unusualTask }} 个</span> </div>
</div>
</div>
<div class="dataCard">
<div class="titleStyle">
<span>ITU数据</span>
</div>
<div class="wordStyle">
<span>平均成功率: {{ speed }}%</span>
</div>
<div class="wordStyle">
<span>平均错误率: {{ errorRate }}% </span>
</div>
<div class="wordStyle">
<span>平均异常率: {{ errorRate }}% </span>
</div>
</div>
<div class="dataCard">
<div class="titleStyle">
<span>ST数据</span>
</div>
<div class="wordStyle">
<span>总数据量: {{ totalDataNumber }} 条</span>
</div>
<div class="wordStyle">
<span>采集的页面数量: {{ totalPageNumber }} 页</span>
</div>
<div class="wordStyle">
<span>采集的目标数量: {{ totalTargetNumber }} 个</span>
</div>
</div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useRouter } from 'vue-router'
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 = () => {
router.push({
path: '/osDataDisplay/list',
query: {
mode: '综合数据',
jump: 'yes'
}
})
}
const goToDSNDataPage = () => {
router.push({
path: '/osDataDisplay/list',
query: {
mode: 'DSN数据',
jump: 'yes'
}
})
}
const goToITUDataPage = () => {
router.push({
path: '/osDataDisplay/list',
query: {
mode: 'ITU数据',
jump: 'yes'
}
})
}
const goToSTDataPage = () => {
router.push({
path: '/osDataDisplay/list',
query: {
mode: 'ST数据',
jump: 'yes'
}
})
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.iconStyle {
background-image: url("@/assets/picture/wenjianjia.png");
background-size: 100% 120%;
background-repeat: no-repeat;
margin-top: 3%;
display: flex;
// border: 1.5px solid rgb(193, 188, 188);
height: 50%;
width: 50%;
}
.dataCard { .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: 280px; width: 260px;
height: 100%; height: 100%;
border-radius: 5px; border-radius: 5px;
display: flex;
flex-direction: column;
// justify-content: center;
align-items: center;
} }
.titleStyle { .titleStyle {
font-size: 34px; font-size: 30px;
margin-top: 3.5%; margin-top: 5%;
color: #FFFFFF; color: #FFFFFF;
} }
.wordStyle { .wordStyle {
font-size: 24px; font-size: 20px;
color: #FFFFFF; color: #FFFFFF;
margin-top: 2%;
}
.textStyle {
writing-mode: vertical-lr;
font-size: 26px;
letter-spacing: 3px;
margin-left: 0.5%;
color: #FFFFFF;
// display: flex;
} }
</style> </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">
<!-- <img src="@/assets/picture/box1.png" alt="Description of the image" style="max-width: 100%; height: auto;"> --> <div class="data-card-wrapper">
<span class="textStyle">数据统计</span> <dataCard></dataCard>
<div class="data-card-wrapper">
<dataCard></dataCard>
</div>
</div> </div>
<div class="taskCard"> </div>
<span class="textStyle">任务统计</span> <div class="taskCard">
<div class="data-card-wrapper"> <div class="data-card-wrapper">
<taskCard></taskCard> <taskCard></taskCard>
</div>
</div> </div>
<div class="qbCard"> </div>
<span class="textStyle">QB数据管理</span> <div class="qbCard">
<div class="data-card-wrapper"> <div class="data-card-wrapper">
<qbCard></qbCard> <qbCard></qbCard>
</div>
</div> </div>
</div>
</div> </div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import dataCard from './dataCard.vue' import dataCard from './dataCard.vue'
import taskCard from '@/views/os-status/components/taskCard.vue'; import taskCard from '@/views/os-status/components/taskCard.vue';
import qbCard from '@/views/os-status/components/qbDataMonitor.vue'; import qbCard from '@/views/os-status/components/qbDataMonitor.vue';
import { onMounted } from 'vue';
defineProps({ defineProps({
title: { title: {
type: String, type: String,
default: '' default: ''
}, },
desc: { desc: {
type: String, type: String,
default: '' default: ''
} }
})
onMounted(() => {
}) })
</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;
// background: #ffffff; height: 22.5vh;
// border: 1.7px solid rgb(193, 188, 188); width: 96%;
height: 22.5vh; display: flex;
width: 96%; gap: 21.5px;
display: flex; padding: 10px;
gap: 21.5px;
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;
// background: #ffffff; height: 26.5vh;
// border: 1.7px solid rgb(193, 188, 188); width: 96%;
height: 26.5vh; display: flex;
width: 96%; gap: 21.5px;
display: flex; padding: 10px;
gap: 21.5px;
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;
// background: #ffffff; height: 22vh;
// border: 1.7px solid rgb(193, 188, 188); width: 96%;
height: 22vh; display: flex;
width: 96%; padding: 10px;
display: flex;
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;
} }
.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">
<div class="dataCard"> <span class="textStyle">任务统计</span>
<!-- <img src="@/assets/picture/box1.png" style="max-width: 100%; height: auto;"> --> <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 }} 条</span> </div>
</div> <div class="wordStyle">
<div class="wordStyle"> <span>任务执行成功统计: {{ totalPageNumber }} 79</span>
<span>任务执行成功统计: {{ totalPageNumber }} 页</span> </div>
</div> <div class="wordStyle">
<div class="wordStyle"> <span>采集速度: {{ totalTargetNumber }} 324</span>
<span>采集速度: {{ totalTargetNumber }} </span> </div>
</div> <div class="wordStyle">
<div class="wordStyle"> <span>错误率: {{ totalTargetNumber }} 1%</span>
<span>错误率: {{ totalTargetNumber }} </span> </div>
</div> </div>
</div> <div class="dataCard" @click="goToITUTaskRecordPage">
<div class="dataCard"> <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 }} 条</span> </div>
</div> <div class="wordStyle">
<div class="wordStyle"> <span>任务执行成功统计: {{ totalPageNumber }} 98</span>
<span>任务执行成功统计: {{ totalPageNumber }} 页</span> </div>
</div> <div class="wordStyle">
<div class="wordStyle"> <span>采集速度: {{ totalTargetNumber }} 322</span>
<span>采集速度: {{ totalTargetNumber }} </span> </div>
</div> <div class="wordStyle">
<div class="wordStyle"> <span>错误率: {{ totalTargetNumber }} 1%</span>
<span>错误率: {{ totalTargetNumber }} </span> </div>
</div> </div>
</div> <div class="dataCard" @click="goToSTTaskRecordPage">
<div class="dataCard"> <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 }} 条</span> </div>
</div> <div class="wordStyle">
<div class="wordStyle"> <span>任务执行成功统计: {{ totalPageNumber }} 86</span>
<span>任务执行成功统计: {{ totalPageNumber }} 页</span> </div>
</div> <div class="wordStyle">
<div class="wordStyle"> <span>采集速度: {{ totalTargetNumber }} 342</span>
<span>采集速度: {{ totalTargetNumber }} </span> </div>
</div> <div class="wordStyle">
<div class="wordStyle"> <span>错误率: {{ totalTargetNumber }} 0%</span>
<span>错误率: {{ totalTargetNumber }} </span> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useRouter } from 'vue-router'
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 = () => {
router.push({
path: '/osTaskRecord/list',
query: {
mode: 'dsn',
jump: 'yes'
}
})
}
const goToITUTaskRecordPage = () => {
router.push({
path: '/osTaskRecord/list',
query: {
mode: 'itu',
jump: 'yes'
}
})
}
const goToSTTaskRecordPage = () => {
router.push({
path: '/osTaskRecord/list',
query: {
mode: 'st',
jump: 'yes'
}
})
}
</script> </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: 34px; font-size: 30px;
margin-top: 3.5%; margin-top: 5%;
color: #FFFFFF; color: #FFFFFF;
} }
.wordStyle { .wordStyle {
font-size: 24px; font-size: 20px;
color: #FFFFFF; color: #FFFFFF;
margin-top: 2%;
}
.textStyle {
writing-mode: vertical-lr;
font-size: 26px;
letter-spacing: 3px;
margin-left: 0.5%;
color: #FFFFFF;
// display: flex;
} }
</style> </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="用户账号:"> <div v-if="currentMode === '1'">
<el-input v-model="taskName" /> <el-form :inline="true" >
</el-form-item> <el-form-item label="用户账号:">
<el-form-item label="用户名称:"> <el-input v-model="addNickName" />
<el-input v-model="taskFrequency" /> </el-form-item>
</el-form-item> <el-form-item label="用户名称:" >
</el-form> <el-input v-model="addUserName" />
<div class="m-t-4"> </el-form-item>
</div> </el-form>
<el-form :inline="true"> <div class="m-t-4" />
<el-form-item label="用户备注:"> <el-form :inline="true">
<el-input v-model="taskName" /> <el-form-item label="用户状态:">
</el-form-item> <el-select v-model="userStatusValue" placeholder=" " style="width: 180px;">
<el-form-item label="用户密码:"> <el-option v-for="item in userStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
<el-input v-model="taskFrequency" /> </el-select>
</el-form-item> </el-form-item>
</el-form> <el-form-item label="用户密码:">
<div class="m-t-4"> <el-input v-model="userPassword" />
</div> </el-form-item>
<template #footer> </el-form>
<div class="dialog-footer"> <div class="m-t-4" />
<el-button @click="handleClose">取消</el-button> <el-form :inline="true">
<el-button type="primary" @click="handleConfirm"> <el-form-item label="用户角色:">
确定 <el-select v-model="userRoleValue" placeholder=" " style="width: 180px;">
</el-button> <el-option v-for="item in userRoleOptions" :key="item.value" :label="item.label" :value="item.value" />
</div> </el-select>
</template> </el-form-item>
</el-dialog> </el-form>
</div>
<div class="m-t-4">
</div>
<div v-if="currentMode === '2'">
<el-form :inline="true" v-if="currentMode === '2'">
<el-form-item label="用户名称:" >
<el-input v-model="addNickName" />
</el-form-item>
<el-form-item label="用户角色:">
<el-select v-model="userRoleValue" placeholder=" " style="width: 180px;">
<el-option v-for="item in userRoleOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-form>
<div class="m-t-4" />
<el-form :inline="true" v-if="currentMode === '2'">
<el-form-item label="用户状态:">
<el-select v-model="userStatusValue" placeholder=" " style="width: 180px;">
<el-option v-for="item in userStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="用户密码:">
<el-input v-model="userPassword" />
</el-form-item>
</el-form>
</div>
<div class="m-t-4" />
<template #footer>
<div class="dialog-footer">
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="handleConfirm">
确定
</el-button>
</div>
</template>
</el-dialog>
</template> </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'
import { getUserList, addUser, deleteUser, updateUser } from '@/api/user.ts'
const userStatusValue = ref(true)
const userRoleValue = ref(1)
const userStatusOptions = [
{
value: true,
label: '启用'
},
{
value: '0',
label: '停用'
}
]
const userRoleOptions = [
{
value: false,
label: '管理员'
},
{
value: '0',
label: '普通用户'
}
]
const props = defineProps({ const props = defineProps({
dialogVisible: { dialogVisible: {
type: Boolean, type: Boolean,
default: false default: false
}, },
mode: { mode: {
type: String, type: String,
default: 'add' default: 'add'
}, },
userCount: { nickName: {
type: String, type: String,
default: '' default: ''
}, },
userName: { userName: {
type: String, type: String,
default: '' default: ''
}, },
userRemark: { id: {
type: String, type: Number,
default: false default: false
}, },
userPassword: { userPassword: {
type: String, type: String,
default: '' default: ''
} },
userStatus: {
type: Boolean,
default: ''
},
userRole: {
type: Number,
default: ''
}
}) })
// 向父组件传递dialog值 // 向父组件传递dialog值
const emit = defineEmits(['update:dialogVisible', 'confirm']) const emit = defineEmits(['update:dialogVisible', 'confirm','getUserList'])
// 组件的状态 // 组件的状态
const currentVisible = ref(props.dialogVisible) const currentVisible = ref(props.dialogVisible)
const currentMode = ref(props.mode) const currentMode = ref(props.mode)
const taskName = ref('') const addNickName = ref('')
const taskFrequency = ref('') const addUserName = ref('')
const userRemark = ref('')
const userPassword = ref('')
// 关闭的方法 // 关闭的方法
const handleClose = () => { const handleClose = () => {
currentVisible.value = false currentVisible.value = false
} }
// 确定的方法 // 确定的方法
const handleConfirm = () => { const handleConfirm = async () => {
emit('confirm') if (currentMode.value === '1') {
currentVisible.value = false await addUser({
nickname: addNickName.value,
username: addUserName.value,
password: userPassword.value,
role: userRoleValue.value,
status: userStatusValue.value
})
console.log(addUserName.value);
emit('getUserList')
} else if (currentMode.value === '2') {
}
currentVisible.value = false
} }
// 监听props变化，同步给组件内部 // 监听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
} }
) )
watch(
// 监听需要同步的 props 集合
[() => props.dialogVisible, () => props.mode, () => props.nickName, () => props.userPassword, () => props.userStatus, () => props.userRole],
// 任一值变化时执行
([newVisible, newMode, newNickName, newPwd, newStatus, newRole]) => {
if (newVisible && newMode === '2') {
addNickName.value = newNickName;
userPassword.value = newPwd;
userStatusValue.value = newStatus;
userRoleValue.value = newRole;
}
// 弹窗关闭时，清空表单
if (!newVisible) {
addNickName.value = '';
addUserName.value = '';
userPassword.value = '';
}
},
{ immediate: true }
);
</script> </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-input__inner{
color: #ffffff;
}
.el-select__wrapper{
background-color:#1d5484 ;
box-shadow: 0,0,0,0;
border: none;
.el-select__placeholder{
color: #ffffff;
}
}
} }
/* 修改表单样式 */ /* 修改表单样式 */
.el-form { .el-form {
.el-form-item__label { .el-form-item__label {
color: #ffffff; color: #ffffff;
} }
} }
</style> </style>
<style>
</style>
\ No newline at end of file
src/views/os-system/index.vue
...@@ -43,104 +43,92 @@ ...@@ -43,104 +43,92 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref, onMounted } from 'vue'
import Pagination from '@/components/pagination/index.vue' import Pagination from '@/components/pagination/index.vue'
import deleteDialog from '@/components/Delete/index.vue' import deleteDialog from '@/components/Delete/index.vue'
import addUserDialog from './components/addUserDialog.vue' import addUserDialog from './components/addUserDialog.vue'
import { getUserList, addUser, deleteUser, updateUser } from '@/api/user.ts'
const userCount = ref('') const userId = ref(0)
const nickName = ref('')
const userName = ref('') const userName = ref('')
const userRemark = ref('') const userRole = ref(0)
const userStatus = ref(true)
const userPassword = ref('') const userPassword = ref('')
const showDeleteDialog = ref(false) const showDeleteDialog = ref(false)
const deleteMode = ref('2') 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',
},
{
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: 12,
pageSize: 10, pageSize: 10,
pageNo: 1 pageNo: 1
}) })
const handleDetails = (row: any) => { const handleEdit = async (row: any) => {
mode.value = '2' mode.value = '2'
// userCount.value = row.name nickName.value = row.nickname
// userName.value = row.name userName.value = row.username
// userRemark.value = row.name userRole.value = row.role
// userPassword.value = row.name userStatus.value = row.status
dialogVisible.value = true userPassword.value = row.password
console.log(row); dialogVisible.value = true
// console.log(row);
} }
const handleConfirm = (row: any) => { const handleDelete = (row: any) => {
showDeleteDialog.value = true showDeleteDialog.value = true
} }
const getData = () => { const getData = (number: number) => {
console.log('getData'); // console.log('getData');
console.log(number);
} }
const handleDeleteConfirm = () => { const handleDeleteConfirm = () => {
} }
const openAddUserDialog = () => { const openAddUserDialog = () => {
mode.value = '1' mode.value = '1'
dialogVisible.value = true dialogVisible.value = true
}
const getUserListData = async () => {
const userList = await getUserList({
page: 1,
size: 10
})
tableData.value = userList.data
console.log(tableData.value);
} }
onMounted(async () => {
getUserListData()
})
</script> </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="新增" 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-6" v-for="task in taskList" :key="task.taskId">
<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">编辑</el-button> <el-button type="primary" @click="editTask" class="editButton">编辑</el-button>
<el-button type="success">执行记录</el-button> <el-button type="success" @click="goToTaskRecord" class="recordButton">执行记录 </el-button>
<el-button type="danger" @click="deleteTask">删除</el-button> <el-button type="danger" @click="deleteTask" class="deleteButton">删除</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="task.status" :active-value="1" :inactive-value="0" @change="changeStatus(task)" />
<span class="wordStyle">执行频率: {{ successTask }} </span> <span class="wordStyle">执行频率: {{ task.frequency }} </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">执行次数: {{ task.executeCount }} 个; </span>
<span class="wordStyle">成功次数: {{ failTask }} 个</span> <span class="wordStyle">成功次数: {{ task.successCount }} 个</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">失败次数: {{ task.failCount }} 个; </span>
<span class="wordStyle">异常记录: {{ unusualTask }} 个</span> <span class="wordStyle">异常记录: {{ task.unusualCount }} 个</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>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'
import { useRouter } from 'vue-router'
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 router = useRouter()
const editMode = ref('') const editMode = ref('')
const deleteMode = ref('1') const deleteMode = ref('1')
const showDeleteDialog = ref(false) const showDeleteDialog = ref(false)
const showTaskDialog = ref(false) const showTaskDialog = ref(false)
const taskSwitch = ref(false) const taskSwitch = ref(false)
const options = [ const taskList = ref([
{ {
value: 'year', taskId: '1',
label: '近一年', taskName: '任务1',
}, status: 1,
{ frequency: '1',
value: 'month', executeCount: '2',
label: '近一月', successCount: '3',
}, failCount: '4',
{ unusualCount: '5'
value: 'week', },
label: '近一周', {
}, taskId: '2',
{ taskName: '任务2',
value: 'day', status: 0,
label: '近一日', frequency: '6',
}, executeCount: '7',
{ successCount: '8',
value: 'year', failCount: '9',
label: '近一年', unusualCount: '10'
}, },
{ {
value: 'month', taskId: '3',
label: '近一月', taskName: '任务3',
}, status: 1,
] frequency: '11',
executeCount: '12',
successCount: '13',
failCount: '14',
unusualCount: '15'
},
{
taskId: '4',
taskName: '任务4',
status: 0,
frequency: '16',
executeCount: '17',
successCount: '18',
failCount: '19',
unusualCount: '20'
},
{
taskId: '5',
taskName: '任务5',
status: 1,
frequency: '21',
executeCount: '22',
successCount: '23',
failCount: '24',
unusualCount: '25'
},
{
taskId: '6',
taskName: '任务6',
status: 0,
frequency: '26',
executeCount: '27',
successCount: '28',
failCount: '29',
unusualCount: '30'
},
])
const deleteTask = () => { 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 goToTaskRecord = () => {
router.push({
path: '/osTaskRecord/list',
query: {
jump: 'yes',
mode: '任务信息'
}
})
}
const changeStatus = (task: any) => {
} }
const handleEdit = () => { const handleEdit = () => {
...@@ -113,31 +162,59 @@ const handleDeleteConfirm = () => { ...@@ -113,31 +162,59 @@ const handleDeleteConfirm = () => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// .editButton{
// background: none;
// background-image: url("@/assets/picture/button1.png");
// background-size: 100% 100%;
// background-repeat: no-repeat;
// }
// .recordButton{
// background: none;
// background-image: url("@/assets/picture/button2.png");
// background-size: 100% 100%;
// background-repeat: no-repeat;
// }
// .deleteButton{
// background: none;
// background-image: url("@/assets/picture/button3.png");
// background-size: 100% 100%;
// background-repeat: no-repeat;
// }
// 任务卡片样式 // 任务卡片样式
.taskCard { .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;
color: #ffffff;
border: none;
} }
</style> </style>
<style>
/* .el-button{
color: #ffffff;
border: none;
} */
</style>
\ No newline at end of file
src/views/os-taskInformation/index.vue
...@@ -36,11 +36,11 @@ ...@@ -36,11 +36,11 @@
</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" />
...@@ -49,112 +49,135 @@ ...@@ -49,112 +49,135 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref, onMounted } from 'vue'
import Pagination from '@/components/pagination/index.vue' import Pagination from '@/components/pagination/index.vue'
import taskCard from './components/taskCard.vue' import taskCard from './components/taskCard.vue'
import addTaskDialog from './components/addTaskDialog.vue' import addTaskDialog from './components/addTaskDialog.vue'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
const route = useRoute()
const router = useRouter()
const editMode = ref('1') const 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
} }
const goToTaskInformation = () => {
router.push({ path: '/osSpiderManager/list' })
}
onMounted(() => {
})
</script> </script>
<style scoped> <style scoped>
/* 返回样式 */
.backStyle {
background-image: url("@/assets/picture/back.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 5vh;
width: 5%;
display: flex;
margin-left: 0.8%;
}
/* 卡片样式 */ /* 卡片样式 */
.cardStyle { .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: 0.5%;
padding: 3px; padding: 2px;
} }
</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
src/views/os-taskRecord/index.vue
...@@ -78,228 +78,247 @@ ...@@ -78,228 +78,247 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref, onMounted } from 'vue'
import Pagination from '@/components/pagination/index.vue' import Pagination from '@/components/pagination/index.vue'
import { Search } from '@element-plus/icons-vue' import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter() const router = useRouter()
const searchInput = ref('')
const errorValue = ref('')
const taskValue = ref('') const taskValue = ref('')
const timeValue = ref('') const timeValue = 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 errorOptions = [
{
value: 'task1',
label: '网络中断',
},
{
value: 'task2',
label: '地址不存在',
},
{
value: 'task3',
label: '反爬虫',
},
] ]
const tableData = ref([ const tableData = ref([
{ {
name: '1', number: '1',
address: 'sk网', taskName: 'dsn爬虫任务',
address1: '成功', scheduleMode: '自动',
address2: '100', scheduleStatus: '自动',
address3: '0', errorMessage: '无',
address4: '无', runningStatus: '完成',
address5: '10s', duration: '10s',
address6: '2023-05-13 10:00:00', scheduleTime: '2023-05-13 10:00:00',
status: 0
}, },
{ {
name: '1', name: '1',
address: 'sk网', address: 'sk网',
address1: '成功', address1: '成功',
address2: '100', address2: '100',
address3: '0', address3: '0',
address4: '无', address4: '无',
address5: '10s', address5: '10s',
address6: '2023-05-13 10:00:00', address6: '2023-05-13 10:00:00',
status: 0 status: 0
}, },
{ {
name: '1', name: '1',
address: 'sk网', address: 'sk网',
address1: '成功', address1: '成功',
address2: '100', address2: '100',
address3: '0', address3: '0',
address4: '无', address4: '无',
address5: '10s', address5: '10s',
address6: '2023-05-13 10:00:00', address6: '2023-05-13 10:00:00',
status: 0 status: 0
}, },
{ {
name: '1', name: '1',
address: 'sk网', address: 'sk网',
address1: '成功', address1: '成功',
address2: '100', address2: '100',
address3: '0', address3: '0',
address4: '无', address4: '无',
address5: '10s', address5: '10s',
address6: '2023-05-13 10:00:00', address6: '2023-05-13 10:00:00',
status: 0 status: 0
}, },
{ {
name: '1', name: '1',
address: 'sk网', address: 'sk网',
address1: '成功', address1: '成功',
address2: '100', address2: '100',
address3: '0', address3: '0',
address4: '无', address4: '无',
address5: '10s', address5: '10s',
address6: '2023-05-13 10:00:00', address6: '2023-05-13 10:00:00',
status: 0 status: 0
}, },
{ {
name: '1', name: '1',
address: 'sk网', address: 'sk网',
address1: '成功', address1: '成功',
address2: '100', address2: '100',
address3: '0', address3: '0',
address4: '无', address4: '无',
address5: '10s', address5: '10s',
address6: '2023-05-13 10:00:00', address6: '2023-05-13 10:00:00',
status: 0 status: 0
}, { }, {
name: '1', name: '1',
address: 'sk网', address: 'sk网',
address1: '成功', address1: '成功',
address2: '100', address2: '100',
address3: '0', address3: '0',
address4: '无', address4: '无',
address5: '10s', address5: '10s',
address6: '2023-05-13 10:00:00', address6: '2023-05-13 10:00:00',
status: 0 status: 0
} }
, { , {
name: '1', name: '1',
address: 'sk网', address: 'sk网',
address1: '成功', address1: '成功',
address2: '100', address2: '100',
address3: '0', address3: '0',
address4: '无', address4: '无',
address5: '10s', address5: '10s',
address6: '2023-05-13 10:00:00', address6: '2023-05-13 10:00:00',
status: 0 status: 0
}, },
{ {
name: '1', name: '1',
address: 'sk网', address: 'sk网',
address1: '成功', address1: '成功',
address2: '100', address2: '100',
address3: '0', address3: '0',
address4: '无', address4: '无',
address5: '10s', address5: '10s',
address6: '2023-05-13 10:00:00', address6: '2023-05-13 10:00:00',
status: 0 status: 0
}, },
{ {
name: '1', name: '1',
address: 'sk网', address: 'sk网',
address1: '成功', address1: '成功',
address2: '100', address2: '100',
address3: '0', address3: '0',
address4: '无', address4: '无',
address5: '10s', address5: '10s',
address6: '2023-05-13 10:00:00', address6: '2023-05-13 10:00:00',
status: 0 status: 0
} }
]) ])
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-log/list', path: '/os-log/list',
query: { query: {
id: row.id id: row.id
} }
}) })
} }
const goToStatus = () => {
if (route.query.mode === '状态监控') {
router.push({
path: '/osStatus/list',
})
} else {
router.push({
path: '/osTaskInformation/list',
})
}
}
const getData = () => { const getData = () => {
console.log('getData'); console.log('getData');
} }
onMounted(() => {
})
</script> </script>
<style scoped> <style scoped>
/* 工具栏样式 */ /* 工具栏样式 */
.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;
} }
/* 文字样式 */ /* 文字样式 */
.el-text { .el-text {
color: #FFFFFF; color: #FFFFFF;
}
.backStyle {
background-image: url("@/assets/picture/back.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 5vh;
width: 5%;
display: flex;
margin-left: 0.8%;
} }
</style> </style>
<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按钮的边框为none */
.el-button:focus { .el-button:focus {
outline: none; outline: none;
}
/* 修改el日期选择器的边框为none */
.el-date-editor {
--el-input-border-color: none
} }
</style> </style>
\ No newline at end of file
vite.config.ts
...@@ -30,7 +30,7 @@ export default defineConfig({ ...@@ -30,7 +30,7 @@ export default defineConfig({
proxy: { proxy: {
// 代理API请求，使用更精确的路径匹配 // 代理API请求，使用更精确的路径匹配
'/api': { '/api': {
target: 'http://127.0.0.1:5000/', target: 'http://192.168.0.200:5001/',
changeOrigin: true, changeOrigin: true,
}, },
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment