Skip to content

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

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

parent 2573e0d4
Showing with 2868 additions and 2894 deletions
src/components/Delete/index.vue
<template>
<el-dialog v-model="deleteDialogVisible" title="删除" width="250" center align-center @close="close" draggable>
<div class="text-center">
<span style="color: #fff;font-size: 15px;">确定删除吗？</span>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="handleDelelte">
确定
</el-button>
</div>
</template>
</el-dialog>
<el-dialog v-model="deleteDialogVisible" title="删除" width="250" center align-center @close="close" draggable>
<div class="text-center">
<span style="color: #fff;font-size: 15px;">确定删除吗？</span>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="handleDelelte">
确定
</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
......@@ -19,37 +19,37 @@ import { ref, watch } from 'vue'
import { defineProps } from 'vue';
const props = defineProps({
dialogVisible: {
type: Boolean,
default: false
},
mode: {
type: String,
default: '1'
}
dialogVisible: {
type: Boolean,
default: false
},
mode: {
type: String,
default: '1'
}
})
const emit = defineEmits(['update:dialogVisible', 'confirm'])
const deleteDialogVisible = ref(props.dialogVisible)
// 删除方法
const handleDelelte = () => {
emit('confirm')
deleteDialogVisible.value = false
emit('confirm')
deleteDialogVisible.value = false
}
// 关闭弹窗的方法
const close = () => {
deleteDialogVisible.value = false
deleteDialogVisible.value = false
}
// 监听父组件传过来的值
watch(() => props.dialogVisible,
(newVal) => {
deleteDialogVisible.value = newVal
}
(newVal) => {
deleteDialogVisible.value = newVal
}
)
// 监听组件内的值并向父组件更新
watch(() => deleteDialogVisible.value,
(newVal) => {
emit('update:dialogVisible', newVal)
}
(newVal) => {
emit('update:dialogVisible', newVal)
}
)
</script>
\ No newline at end of file
src/components/Export/index.vue
<template>
<el-dialog v-model="exportDialogVisible" title="导出" width="250" center align-center @close="close" draggable>
<div class="text-center">
<span style="color: #fff;font-size: 15px;">确定导出吗？</span>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="handleExport">
确定
</el-button>
</div>
</template>
</el-dialog>
<el-dialog v-model="exportDialogVisible" title="导出" width="250" center align-center @close="close" draggable>
<div class="text-center">
<span style="color: #fff;font-size: 15px;">确定导出吗？</span>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="handleExport">
确定
</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
......@@ -19,37 +19,37 @@ import { ref, watch } from 'vue'
import { defineProps } from 'vue';
const props = defineProps({
dialogVisible: {
type: Boolean,
default: false
},
mode: {
type: String,
default: '1'
}
dialogVisible: {
type: Boolean,
default: false
},
mode: {
type: String,
default: '1'
}
})
const emit = defineEmits(['update:dialogVisible', 'confirm'])
const exportDialogVisible = ref(props.dialogVisible)
// 导出方法
const handleExport = () => {
emit('confirm')
exportDialogVisible.value = false
emit('confirm')
exportDialogVisible.value = false
}
// 关闭弹窗的方法
const close = () => {
exportDialogVisible.value = false
exportDialogVisible.value = false
}
// 监听父组件传过来的值
watch(() => props.dialogVisible,
(newVal) => {
exportDialogVisible.value = newVal
}
(newVal) => {
exportDialogVisible.value = newVal
}
)
// 监听组件内的值并向父组件更新
watch(() => exportDialogVisible.value,
(newVal) => {
emit('update:dialogVisible', newVal)
}
(newVal) => {
emit('update:dialogVisible', newVal)
}
)
</script>
\ No newline at end of file
src/views/os-dataDisplay/components/allDataTab.vue
<template>
<div class="text-left p-4 toolbarStyle">
<div class="formStyle">
<el-form inline>
<el-form-item>
<el-text class="mx-1">目标名称:</el-text>
</el-form-item>
<el-form-item>
<div>
<el-input placeholder="请选择" style="width: 220px" />
</div>
</el-form-item>
<el-form-item>
<el-text class="mx-1">时间:</el-text>
</el-form-item>
<el-form-item>
<el-date-picker v-model="timeValue" type="datetimerange" start-placeholder="开始时间"
end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss" />
</el-form-item>
<el-form-item>
<el-text class="mx-1">站点名称:</el-text>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入" style="width: 220px" />
</el-form-item>
<br></br>
<el-form-item>
<el-text class="mx-1">Norad Cat ID:</el-text>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入" style="width: 220px" />
</el-form-item>
<el-form-item>
<el-text class="mx-1">SNS Notice ID:</el-text>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入" style="width: 220px" />
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary" @click="handleExport">导出最近</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary" @click="handleExport">导出选中</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">查询</el-button>
</el-space>
</el-form-item>
</el-form>
</div>
</div>
<div class="m-t-5">
</div>
<div>
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '45px' }"
: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="stationPosition" label="站点位置" show-overflow-tooltip />
<el-table-column property="stationName" label="站点名称" show-overflow-tooltip />
<el-table-column property="NoradCatId" label="Norad Cat ID" show-overflow-tooltip />
<el-table-column property="SNSNoticeId" label="SNS Notice ID" show-overflow-tooltip />
<el-table-column property="dataTime" label="数据时间" show-overflow-tooltip />
<el-table-column property="recordTime" label="记录时间" show-overflow-tooltip />
<el-table-column property="tle" label="TLE" show-overflow-tooltip />
<el-table-column property="isSync" 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 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="155px" 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-select placeholder=" ">
<el-option label="计划" value="planned" />
<el-option label="非计划" value="unplanned" />
</el-select>
</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="BFIFICdate"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="最新相关 BR IFIC 发布日期:" label-position="left">
<el-input v-model="roundTripTime"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="往返光时(s):" label-position="left">
<el-input v-model="distance"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="距离(km):" label-position="left">
<el-input v-model="targetAzimuth"/>
</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="targetElevation"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="目标俯仰:" label-position="left">
<el-input v-model="upstreamSignalSource"/>
</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="upstreamSignalSource"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="上行发射功率:" label-position="left">
<el-input v-model="upstreamLaunchPower"/>
</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="upstreamFrequencyBand"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="风速(km/kr):" 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="downstreamSignalSource"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="下行信号频段:" label-position="left">
<el-input v-model="downstreamFrequencyBand"/>
</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="downstreamReceptionPower"/>
</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="INTLDES:" label-position="left">
<el-input v-model="intldes"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="失效时间:" label-position="left">
<el-input v-model="expirationTime"/>
</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="text-left p-4 toolbarStyle">
<div class="formStyle">
<el-form inline>
<el-form-item>
<el-text class="mx-1">目标名称:</el-text>
</el-form-item>
<el-form-item>
<div>
<el-input placeholder="请选择" style="width: 220px" />
</div>
</el-form-item>
<el-form-item>
<el-text class="mx-1">时间:</el-text>
</el-form-item>
<el-form-item>
<el-date-picker v-model="timeValue" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"
format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" />
</el-form-item>
<el-form-item>
<el-text class="mx-1">站点名称:</el-text>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入" style="width: 220px" />
</el-form-item>
<br></br>
<el-form-item>
<el-text class="mx-1">Norad Cat ID:</el-text>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入" style="width: 220px" />
</el-form-item>
<el-form-item>
<el-text class="mx-1">SNS Notice ID:</el-text>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入" style="width: 220px" />
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary" @click="handleExport">导出最近</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary" @click="handleExport">导出选中</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">查询</el-button>
</el-space>
</el-form-item>
</el-form>
</div>
</div>
<div class="m-t-5" />
<div>
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '45px' }"
: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="stationPosition" label="站点位置" show-overflow-tooltip />
<el-table-column property="stationName" label="站点名称" show-overflow-tooltip />
<el-table-column property="NoradCatId" label="Norad Cat ID" show-overflow-tooltip />
<el-table-column property="SNSNoticeId" label="SNS Notice ID" show-overflow-tooltip />
<el-table-column property="dataTime" label="数据时间" show-overflow-tooltip />
<el-table-column property="recordTime" label="记录时间" show-overflow-tooltip />
<el-table-column property="tle" label="TLE" show-overflow-tooltip />
<el-table-column property="isSync" 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 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="155px" 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-select placeholder=" ">
<el-option label="计划" value="planned" />
<el-option label="非计划" value="unplanned" />
</el-select>
</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="BFIFICdate" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="最新相关 BR IFIC 发布日期:" label-position="left">
<el-input v-model="roundTripTime" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="往返光时(s):" label-position="left">
<el-input v-model="distance" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="距离(km):" label-position="left">
<el-input v-model="targetAzimuth" />
</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="targetElevation" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="目标俯仰:" label-position="left">
<el-input v-model="upstreamSignalSource" />
</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="upstreamSignalSource" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="上行发射功率:" label-position="left">
<el-input v-model="upstreamLaunchPower" />
</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="upstreamFrequencyBand" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="风速(km/kr):" 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="downstreamSignalSource" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="下行信号频段:" label-position="left">
<el-input v-model="downstreamFrequencyBand" />
</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="downstreamReceptionPower" />
</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="INTLDES:" label-position="left">
<el-input v-model="intldes" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="失效时间:" label-position="left">
<el-input v-model="expirationTime" />
</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>
<script setup lang="ts">
......@@ -417,7 +411,7 @@ const roundTripTime = ref('')
// 距离
const distance = ref('')
// 目标方位
const targetAzimuth = ref('')
const targetAzimuth = ref('')
// 目标俯仰
const targetElevation = ref('')
// 上行信号来源
......@@ -451,62 +445,62 @@ const site = ref('')
// TLE
const tle = ref('')
const tableData = ref([
{
number: '1',
targetName: 'VOYAGER-2',
stationPosition:'[148.98,-35.22]',
stationName:'CANBERRA',
NoradCatId:'2134',
SNSNoticeId:'90504649',
dataTime:'2025-06-24 14:35:23',
recordTime:'2025-06-25 14:35:23',
tle:'-',
isSync:'是',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
number: '1',
targetName: 'VOYAGER-2',
stationPosition: '[148.98,-35.22]',
stationName: 'CANBERRA',
NoradCatId: '2134',
SNSNoticeId: '90504649',
dataTime: '2025-06-24 14:35:23',
recordTime: '2025-06-25 14:35:23',
tle: '-',
isSync: '是',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
])
const pageObj = ref({
total: 10,
pageSize: 10,
pageNo: 1
total: 10,
pageSize: 10,
pageNo: 1
})
const handleDetails = (row: any) => {
console.log(row);
detailVisibleValue.value = true
console.log(row);
detailVisibleValue.value = true
}
const getData = () => {
console.log('getData');
console.log('getData');
}
const handleClose = () => {
detailVisibleValue.value = false
detailVisibleValue.value = false
}
const handleExportConfirm = () => {
......@@ -514,99 +508,107 @@ const handleExportConfirm = () => {
}
const handleExport = () => {
showDeleteDialog.value = true
showDeleteDialog.value = true
}
</script>
<style scoped lang="scss">
// 调整表单项间距
.detailForm {
.el-form-item {
margin-bottom: 7px !important;
}
.el-form-item {
margin-bottom: 7px !important;
}
}
/* 工具栏样式 */
.toolbarStyle {
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* 表格样式 */
.formStyle {
display: flex;
justify-content: space-around;
padding: 1px;
margin-top: 1%;
display: flex;
justify-content: space-around;
padding: 1px;
margin-top: 1%;
}
/* 文字样式 */
.el-text {
color: #FFFFFF;
color: #FFFFFF;
}
</style>
<style>
/* 修改el文本域的背景颜色与边框 */
.el-textarea__inner{
background-color: #1d5484;
--el-input-border-color: none;
.el-textarea__inner {
background-color: #1d5484;
--el-input-border-color: none;
}
/* 修改el选择器的样式 */
.el-select__wrapper {
background-color: #1d5484;
box-shadow: none;
background-color: #1d5484;
box-shadow: none;
}
/* 删除el选择器选中时的边框 */
.is-hovering {
box-shadow: none !important;
box-shadow: none !important;
}
/* 修改el输入框的样式 */
.el-input__wrapper {
background-color: #1d5484;
box-shadow: none;
background-color: #1d5484;
box-shadow: none;
}
/* 修改el下拉框的背景颜色 */
.el-select-dropdown {
background-color: #1d5484;
background-color: #1d5484;
}
/* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item {
color: #FFFFFF;
color: #FFFFFF;
}
/* 修改el下拉框选项选中时的文字颜色 */
.el-select-dropdown__item:hover {
color: #409eff;
color: #409eff;
}
/* 修改el日期选择器的边框为none */
.el-date-editor {
--el-input-border-color: none
--el-input-border-color: none
}
/* 去除按钮点击后的黑边框 */
.el-button:focus {
outline: none;
outline: none;
}
</style>
<style>
/* 修改弹窗样式 */
.el-dialog {
background: transparent;
background-image: url("@/assets/picture/dialog1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
color: #ffffff;
background: transparent;
background-image: url("@/assets/picture/dialog1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
color: #ffffff;
.el-dialog__title {
color: #ffffff;
}
.el-dialog__title {
color: #ffffff;
}
}
/* 修改表单样式 */
.el-form {
.el-form-item__label {
color: #ffffff;
}
.el-form-item__label {
color: #ffffff;
}
}
</style>
\ No newline at end of file
src/views/os-dataDisplay/components/dsnData/dsnDataTab.vue
<template>
<div class="text-left p-1 toolbarStyle">
<div class="formStyle">
<el-form inline>
<el-form-item>
<el-text class="mx-1">目标名称:</el-text>
</el-form-item>
<el-form-item>
<div>
<el-input placeholder="请输入" style="width: 220px" />
</div>
</el-form-item>
<el-form-item>
<el-text class="mx-1">获取时间:</el-text>
</el-form-item>
<el-form-item>
<el-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
start-placeholder="开始时间" end-placeholder="结束时间" date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss" />
</el-form-item>
<el-form-item>
<el-text class="mx-1">站点名称:</el-text>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入" style="width: 220px" />
</el-form-item>
<br></br>
<el-form-item>
<el-space>
<el-button type="primary" @click="handleExport">导出最近</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary" @click="handleExport">导出选中</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">查询</el-button>
</el-space>
</el-form-item>
</el-form>
</div>
</div>
<div class="text-left p-1 toolbarStyle">
<div class="formStyle">
<el-form inline>
<el-form-item>
<el-text class="mx-1">目标名称:</el-text>
</el-form-item>
<el-form-item>
<div>
<el-input placeholder="请输入" style="width: 220px" />
</div>
</el-form-item>
<el-form-item>
<el-text class="mx-1">获取时间:</el-text>
</el-form-item>
<el-form-item>
<el-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始时间"
end-placeholder="结束时间" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" />
</el-form-item>
<el-form-item>
<el-text class="mx-1">站点名称:</el-text>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入" style="width: 220px" />
</el-form-item>
<br></br>
<el-form-item>
<el-space>
<el-button type="primary" @click="handleExport">导出最近</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary" @click="handleExport">导出选中</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">查询</el-button>
</el-space>
</el-form-item>
</el-form>
</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>
<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 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="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>
<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="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" />
<exportDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleExportConfirm" />
</template>
......@@ -220,7 +216,7 @@ const roundTripTime = ref('')
// 站点名称
const stationName = ref('')
// 目标方位
const targetAzimuth = ref('')
const targetAzimuth = ref('')
// 目标俯仰
const targetElevation = ref('')
// 目标距离
......@@ -247,153 +243,153 @@ const recordTime = ref('')
const isSuspended = ref('')
const tableData = ref([
{
number: '1',
targetName: 'maven',
distance: '2000',
roundTripTime: '12',
stationName: 'CANBERRA',
targetAzimuth: '11',
targetElevation: '24',
targetDistance: '2000',
windSpeed: '10',
upSignalSource: 'maven',
upSignalFrequencyBand: 'X',
upSignalLaunchPower: '123',
downSignalSignalSource: 'maven',
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',
},
{
number: '1',
targetName: 'maven',
distance: '2000',
roundTripTime: '12',
stationName: 'CANBERRA',
targetAzimuth: '11',
targetElevation: '24',
targetDistance: '2000',
windSpeed: '10',
upSignalSource: 'maven',
upSignalFrequencyBand: 'X',
upSignalLaunchPower: '123',
downSignalSignalSource: 'maven',
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',
},
])
const pageObj = ref({
total: 10,
pageSize: 10,
pageNo: 1
total: 10,
pageSize: 10,
pageNo: 1
})
const handleDetails = (row: any) => {
console.log(row);
detailVisibleValue.value = true
console.log(row);
detailVisibleValue.value = true
}
const getData = () => {
console.log('getData');
console.log('getData');
}
const handleClose = () => {
detailVisibleValue.value = false
detailVisibleValue.value = false
}
const handleExportConfirm = () => {
}
const handleExport = () => {
showDeleteDialog.value = true
showDeleteDialog.value = true
}
</script>
<style scoped lang="scss">
// 调整表单项间距
.detailForm {
.el-dialog-title {
font-size: 180px;
}
.el-dialog-title {
font-size: 180px;
}
.el-form-item {
margin-bottom: 30px !important;
}
.el-form-item {
margin-bottom: 30px !important;
}
}
/* 工具栏样式 */
.toolbarStyle {
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* 表格样式 */
.formStyle {
display: flex;
justify-content: space-around;
padding: 3px;
margin-top: 1%;
display: flex;
justify-content: space-around;
padding: 3px;
margin-top: 1%;
}
/* 文字样式 */
.el-text {
color: #FFFFFF;
color: #FFFFFF;
}
</style>
<style>
.el-input {
--el-input-text-color: #FFFFFF;
--el-input-text-color: #FFFFFF;
}
/* 修改el选择器的样式 */
.el-select__wrapper {
background-color: #1d5484;
box-shadow: none;
background-color: #1d5484;
box-shadow: none;
}
/* 删除el选择器选中时的边框 */
.is-hovering {
box-shadow: none !important;
box-shadow: none !important;
}
/* 修改el输入框的样式 */
.el-input__wrapper {
background-color: #1d5484;
box-shadow: none;
background-color: #1d5484;
box-shadow: none;
}
/* 修改el下拉框的背景颜色 */
.el-select-dropdown {
background-color: #1d5484;
background-color: #1d5484;
}
/* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item {
color: #FFFFFF;
color: #FFFFFF;
}
/* 修改el下拉框选项选中时的文字颜色 */
.el-select-dropdown__item:hover {
color: #409eff;
color: #409eff;
}
/* 修改el日期选择器的边框为none */
.el-date-editor {
--el-input-border-color: none
--el-input-border-color: none
}
.el-button:focus {
outline: none;
outline: none;
}
</style>
\ No newline at end of file
src/views/os-dataDisplay/components/dsnData/dsnTab.vue
<template>
<div class="text-left p-s">
<div class="segmentedStyle">
<el-segmented v-model="mode" :options="sizeOptions" style="margin-bottom: 1rem" size="small" />
</div>
</div>
<dsnDataTab v-if="mode === 'DSN数据'">
</dsnDataTab>
<newsDataTab v-if="mode === '新闻'">
</newsDataTab>
<div class="text-left p-s">
<div class="segmentedStyle">
<el-segmented v-model="mode" :options="sizeOptions" style="margin-bottom: 1rem" size="small" />
</div>
</div>
<dsnDataTab v-if="mode === 'DSN数据'">
</dsnDataTab>
<newsDataTab v-if="mode === '新闻'">
</newsDataTab>
</template>
<script setup lang="ts">
......@@ -25,68 +23,68 @@ const sizeOptions = ['DSN数据', '新闻']
<style scoped lang="scss">
/* 工具栏样式 */
.toolbarStyle {
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* 表格样式 */
.formStyle {
display: flex;
justify-content: space-around;
padding: 3px;
margin-top: 1%;
display: flex;
justify-content: space-around;
padding: 3px;
margin-top: 1%;
}
/* 文字样式 */
.el-text {
color: #FFFFFF;
color: #FFFFFF;
}
</style>
<style>
.el-input {
--el-input-text-color: #FFFFFF;
--el-input-text-color: #FFFFFF;
}
/* 修改el选择器的样式 */
.el-select__wrapper {
background-color: #1d5484;
box-shadow: none;
background-color: #1d5484;
box-shadow: none;
}
/* 删除el选择器选中时的边框 */
.is-hovering {
box-shadow: none !important;
box-shadow: none !important;
}
/* 修改el输入框的样式 */
.el-input__wrapper {
background-color: #1d5484;
box-shadow: none;
background-color: #1d5484;
box-shadow: none;
}
/* 修改el下拉框的背景颜色 */
.el-select-dropdown {
background-color: #1d5484;
background-color: #1d5484;
}
/* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item {
color: #FFFFFF;
color: #FFFFFF;
}
/* 修改el下拉框选项选中时的文字颜色 */
.el-select-dropdown__item:hover {
color: #409eff;
color: #409eff;
}
/* 修改el日期选择器的边框为none */
.el-date-editor {
--el-input-border-color: none
--el-input-border-color: none
}
.el-button:focus {
outline: none;
outline: none;
}
</style>
\ No newline at end of file
src/views/os-dataDisplay/components/dsnData/newsDataTab.vue
<template>
<div class="text-left p-1 toolbarStyle">
<div class="formStyle m-l-20">
<el-form inline>
<el-form-item>
<el-text class="mx-1">新闻标题:</el-text>
</el-form-item>
<el-form-item>
<div>
<el-input placeholder="请输入" style="width: 220px" />
</div>
</el-form-item>
<el-form-item>
<el-text class="mx-1">获取时间:</el-text>
</el-form-item>
<el-form-item>
<el-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
start-placeholder="开始时间" end-placeholder="结束时间" date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss" />
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary" @click="handleExport">导出最近</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary" @click="handleExport">导出选中</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">查询</el-button>
</el-space>
</el-form-item>
</el-form>
</div>
</div>
<div class="text-left p-1 toolbarStyle">
<div class="formStyle m-l-20">
<el-form inline>
<el-form-item>
<el-text class="mx-1">新闻标题:</el-text>
</el-form-item>
<el-form-item>
<div>
<el-input placeholder="请输入" style="width: 220px" />
</div>
</el-form-item>
<el-form-item>
<el-text class="mx-1">获取时间:</el-text>
</el-form-item>
<el-form-item>
<el-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始时间"
end-placeholder="结束时间" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" />
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary" @click="handleExport">导出最近</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary" @click="handleExport">导出选中</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">查询</el-button>
</el-space>
</el-form-item>
</el-form>
</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>
<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="name" label="序号" width="55" />
<el-table-column property="name" label="新闻标题" show-overflow-tooltip />
<el-table-column property="name" label="新闻来源" show-overflow-tooltip />
<el-table-column property="name" label="新闻日期" show-overflow-tooltip />
<el-table-column property="name" 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 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="新闻标题:" 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>
<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="新闻标题:" 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" />
<exportDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleExportConfirm" />
</template>
......@@ -134,142 +130,146 @@ const newsGetTime = ref('')
// 新闻内容
const newsContent = ref('')
const tableData = ref([
{
name: '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'
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
number: '1',
newsTitle: 'satellite task',
newsSource: 'nasa',
newsDate: '2025-09-01 12:00:00',
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',
},
])
const pageObj = ref({
total: 10,
pageSize: 10,
pageNo: 1
total: 10,
pageSize: 10,
pageNo: 1
})
const handleDetails = (row: any) => {
console.log(row);
detailVisibleValue.value = true
console.log(row);
detailVisibleValue.value = true
}
const handleConfirm = (row: any) => {
console.log(row);
console.log(row);
}
const getData = () => {
console.log('getData');
console.log('getData');
}
const handleClose = () => {
detailVisibleValue.value = false
detailVisibleValue.value = false
}
const handleExportConfirm = () => {
}
const handleExport = () => {
showDeleteDialog.value = true
showDeleteDialog.value = true
}
</script>
<style scoped lang="scss">
// 调整表单项间距
.detailForm {
.el-dialog-title {
font-size: 180px;
}
.el-dialog-title {
font-size: 180px;
}
.el-form-item {
margin-bottom: 30px !important;
}
.el-form-item {
margin-bottom: 30px !important;
}
}
/* 工具栏样式 */
.toolbarStyle {
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* 表格样式 */
.formStyle {
display: flex;
// justify-content: space-around;
padding: 3px;
margin-top: 1%;
display: flex;
// justify-content: space-around;
padding: 3px;
margin-top: 1%;
}
/* 文字样式 */
.el-text {
color: #FFFFFF;
color: #FFFFFF;
}
</style>
<style>
.el-input {
--el-input-text-color: #FFFFFF;
--el-input-text-color: #FFFFFF;
}
/* 修改el选择器的样式 */
.el-select__wrapper {
background-color: #1d5484;
box-shadow: none;
background-color: #1d5484;
box-shadow: none;
}
/* 删除el选择器选中时的边框 */
.is-hovering {
box-shadow: none !important;
box-shadow: none !important;
}
/* 修改el输入框的样式 */
.el-input__wrapper {
background-color: #1d5484;
box-shadow: none;
background-color: #1d5484;
box-shadow: none;
}
/* 修改el下拉框的背景颜色 */
.el-select-dropdown {
background-color: #1d5484;
background-color: #1d5484;
}
/* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item {
color: #FFFFFF;
color: #FFFFFF;
}
/* 修改el下拉框选项选中时的文字颜色 */
.el-select-dropdown__item:hover {
color: #409eff;
color: #409eff;
}
/* 修改el日期选择器的边框为none */
.el-date-editor {
--el-input-border-color: none
--el-input-border-color: none
}
.el-button:focus {
outline: none;
outline: none;
}
</style>
\ No newline at end of file
src/views/os-dataDisplay/components/ituDataTab.vue
<template>
<div class="text-left p-4 toolbarStyle">
<div class="formStyle">
<el-form inline>
<el-form-item>
<el-text class="mx-1">目标名称:</el-text>
</el-form-item>
<el-form-item>
<div>
<el-input placeholder="请输入" style="width: 220px" />
</div>
</el-form-item>
<el-form-item>
<el-text class="mx-1">获取时间:</el-text>
</el-form-item>
<el-form-item>
<el-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
start-placeholder="开始时间" end-placeholder="结束时间" date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss" />
</el-form-item>
<el-form-item>
<el-text class="mx-1">站点名称:</el-text>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入" style="width: 220px" />
</el-form-item>
<br></br>
<el-form-item>
<el-text class="mx-1">SNS Notice ID:</el-text>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入" style="width: 188.5px" />
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary" @click="handleExport">导出最近</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary" @click="handleExport">导出选中</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">查询</el-button>
</el-space>
</el-form-item>
</el-form>
</div>
</div>
<div class="text-left p-4 toolbarStyle">
<div class="formStyle">
<el-form inline>
<el-form-item>
<el-text class="mx-1">目标名称:</el-text>
</el-form-item>
<el-form-item>
<div>
<el-input placeholder="请输入" style="width: 220px" />
</div>
</el-form-item>
<el-form-item>
<el-text class="mx-1">获取时间:</el-text>
</el-form-item>
<el-form-item>
<el-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始时间"
end-placeholder="结束时间" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" />
</el-form-item>
<el-form-item>
<el-text class="mx-1">站点名称:</el-text>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入" style="width: 220px" />
</el-form-item>
<br></br>
<el-form-item>
<el-text class="mx-1">SNS Notice ID:</el-text>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入" style="width: 188.5px" />
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary" @click="handleExport">导出最近</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary" @click="handleExport">导出选中</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">查询</el-button>
</el-space>
</el-form-item>
</el-form>
</div>
</div>
<div class="m-t-5">
</div>
<div>
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '42.5px' }"
: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="SNSNoticeID" label="SNS Notice ID" show-overflow-tooltip />
<el-table-column property="department" label="主管部门" show-overflow-tooltip />
<el-table-column property="targetName" label="目标名称" show-overflow-tooltip />
<el-table-column property="planType" label="计划/非计划类型" show-overflow-tooltip />
<el-table-column property="syncType" label="是否为同步" show-overflow-tooltip />
<el-table-column property="syncPosition" label="同步位置" show-overflow-tooltip />
<el-table-column property="perigee" label="近地点" show-overflow-tooltip />
<el-table-column property="apogee" label="远地点" show-overflow-tooltip />
<el-table-column property="lowestAltitude" label="最低海拔" show-overflow-tooltip />
<el-table-column property="referenceSubject" label="参考主体" show-overflow-tooltip />
<el-table-column property="highestFrequency" label="最高频率" show-overflow-tooltip />
<el-table-column property="lowestFrequency" label="最低频率" show-overflow-tooltip />
<el-table-column property="status" label="状态" show-overflow-tooltip />
<el-table-column property="validityPeriod" label="有效期" show-overflow-tooltip />
<el-table-column property="earliestUsageDate" label="最早使用日期" show-overflow-tooltip />
<el-table-column property="isUsed" label="是否确认使用" show-overflow-tooltip />
<el-table-column property="isPauseUsed" 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 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="m-t-5" />
<div>
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '42.5px' }"
: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="SNSNoticeID" label="SNS Notice ID" show-overflow-tooltip />
<el-table-column property="department" label="主管部门" show-overflow-tooltip />
<el-table-column property="targetName" label="目标名称" show-overflow-tooltip />
<el-table-column property="planType" label="计划/非计划类型" show-overflow-tooltip />
<el-table-column property="syncType" label="是否为同步" show-overflow-tooltip />
<el-table-column property="syncPosition" label="同步位置" show-overflow-tooltip />
<el-table-column property="perigee" label="近地点" show-overflow-tooltip />
<el-table-column property="apogee" label="远地点" show-overflow-tooltip />
<el-table-column property="lowestAltitude" label="最低海拔" show-overflow-tooltip />
<el-table-column property="referenceSubject" label="参考主体" show-overflow-tooltip />
<el-table-column property="highestFrequency" label="最高频率" show-overflow-tooltip />
<el-table-column property="lowestFrequency" label="最低频率" show-overflow-tooltip />
<el-table-column property="status" label="状态" show-overflow-tooltip />
<el-table-column property="validityPeriod" label="有效期" show-overflow-tooltip />
<el-table-column property="earliestUsageDate" label="最早使用日期" show-overflow-tooltip />
<el-table-column property="isUsed" label="是否确认使用" show-overflow-tooltip />
<el-table-column property="isPauseUsed" 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 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>
<script setup lang="ts">
......@@ -303,149 +296,153 @@ const validityPeriodSatelliteNetworkOldName = ref('')
// 最新相关 BR IFIC 发布日期
const BFIFICdate = ref('')
const tableData = ref([
{
number: '1',
SNSNoticeID: '86550007',
department:'ARG',
targetName:'ARGOS',
planType:'计划',
syncType:'否',
syncPosition:'-',
perigee:'2000',
apogee:'2500',
lowestAltitude:'165',
referenceSubject:'地球',
lowestFrequency:'None',
highestFrequency:'None',
status:'None',
validityPeriod:'-',
earliestUsageDate:'None',
isUsed:'No',
isPauseUsed:'No',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
number: '1',
SNSNoticeID: '86550007',
department: 'ARG',
targetName: 'ARGOS',
planType: '计划',
syncType: '否',
syncPosition: '-',
perigee: '2000',
apogee: '2500',
lowestAltitude: '165',
referenceSubject: '地球',
lowestFrequency: 'None',
highestFrequency: 'None',
status: 'None',
validityPeriod: '-',
earliestUsageDate: 'None',
isUsed: 'No',
isPauseUsed: 'No',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
])
const pageObj = ref({
total: 10,
pageSize: 10,
pageNo: 1
total: 10,
pageSize: 10,
pageNo: 1
})
const handleDetails = (row: any) => {
console.log(row);
detailVisibleValue.value = true
console.log(row);
detailVisibleValue.value = true
}
const getData = () => {
console.log('getData');
console.log('getData');
}
const handleClose = () => {
detailVisibleValue.value = false
detailVisibleValue.value = false
}
const handleExportConfirm = () => {
}
const handleExport = () => {
showDeleteDialog.value = true
showDeleteDialog.value = true
}
</script>
<style scoped lang="scss">
// 调整表单项间距
.detailForm {
.el-dialog-title {
font-size: 180px;
}
.el-form-item {
margin-bottom: 20px !important;
}
.el-dialog-title {
font-size: 180px;
}
.el-form-item {
margin-bottom: 20px !important;
}
}
/* 工具栏样式 */
.toolbarStyle {
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* 表格样式 */
.formStyle {
display: flex;
justify-content: space-around;
padding: 3px;
margin-top: 1%;
display: flex;
justify-content: space-around;
padding: 3px;
margin-top: 1%;
}
/* 文字样式 */
.el-text {
color: #FFFFFF;
color: #FFFFFF;
}
</style>
<style>
.el-input {
--el-input-text-color: #FFFFFF;
--el-input-text-color: #FFFFFF;
}
/* 修改el选择器的样式 */
.el-select__wrapper {
background-color: #1d5484;
box-shadow: none;
background-color: #1d5484;
box-shadow: none;
}
/* 删除el选择器选中时的边框 */
.is-hovering {
box-shadow: none !important;
box-shadow: none !important;
}
/* 修改el输入框的样式 */
.el-input__wrapper {
background-color: #1d5484;
box-shadow: none;
background-color: #1d5484;
box-shadow: none;
}
/* 修改el下拉框的背景颜色 */
.el-select-dropdown {
background-color: #1d5484;
background-color: #1d5484;
}
/* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item {
color: #FFFFFF;
color: #FFFFFF;
}
/* 修改el下拉框选项选中时的文字颜色 */
.el-select-dropdown__item:hover {
color: #409eff;
color: #409eff;
}
/* 修改el日期选择器的边框为none */
.el-date-editor {
--el-input-border-color: none
--el-input-border-color: none
}
.el-button:focus {
outline: none;
outline: none;
}
</style>
\ No newline at end of file
src/views/os-dataDisplay/components/stDataTab.vue
<template>
<div class="text-left p-4 toolbarStyle">
<div class="formStyle">
<el-form inline>
<el-form-item>
<el-text class="mx-1">目标名称:</el-text>
</el-form-item>
<el-form-item>
<div>
<el-input placeholder="请输入" style="width: 220px" />
</div>
</el-form-item>
<el-form-item>
<el-text class="mx-1">获取时间:</el-text>
</el-form-item>
<el-form-item>
<el-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
start-placeholder="开始时间" end-placeholder="结束时间" date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss" />
</el-form-item>
<el-form-item>
<el-text class="mx-1">站点名称:</el-text>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入" style="width: 220px" />
</el-form-item>
<br></br>
<el-form-item>
<el-text class="mx-1">NORAD CAT ID:</el-text>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入" style="width: 188.5px" />
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary" @click="handleExport">导出最近</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary" @click="handleExport">导出选中</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">查询</el-button>
</el-space>
</el-form-item>
</el-form>
</div>
</div>
<div class="text-left p-4 toolbarStyle">
<div class="formStyle">
<el-form inline>
<el-form-item>
<el-text class="mx-1">目标名称:</el-text>
</el-form-item>
<el-form-item>
<div>
<el-input placeholder="请输入" style="width: 220px" />
</div>
</el-form-item>
<el-form-item>
<el-text class="mx-1">获取时间:</el-text>
</el-form-item>
<el-form-item>
<el-date-picker v-model="timeValue" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始时间"
end-placeholder="结束时间" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" />
</el-form-item>
<el-form-item>
<el-text class="mx-1">站点名称:</el-text>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入" style="width: 220px" />
</el-form-item>
<br></br>
<el-form-item>
<el-text class="mx-1">NORAD CAT ID:</el-text>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入" style="width: 188.5px" />
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary" @click="handleExport">导出最近</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary" @click="handleExport">导出选中</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">查询</el-button>
</el-space>
</el-form-item>
</el-form>
</div>
</div>
<div class="m-t-5">
</div>
<div>
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '42.5px' }"
: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="NoradCatID" label="Norad Cat ID" show-overflow-tooltip />
<el-table-column property="targetName" label="目标名称" show-overflow-tooltip />
<el-table-column property="intleds" label="INTLDES" show-overflow-tooltip />
<el-table-column property="type" label="类型" show-overflow-tooltip />
<el-table-column property="belongCountry" label="所属国家" width="82" show-overflow-tooltip />
<el-table-column property="runningTime" label="运行时间" show-overflow-tooltip />
<el-table-column property="site" label="SITE" show-overflow-tooltip />
<el-table-column property="failTime" label="失效时间" show-overflow-tooltip />
<el-table-column property="period" label="周期" show-overflow-tooltip />
<el-table-column property="perigee" label="近地点" show-overflow-tooltip />
<el-table-column property="apogee" label="远地点" show-overflow-tooltip />
<el-table-column property="incl" label="INCL" show-overflow-tooltip />
<el-table-column property="rcs" label="RCS" show-overflow-tooltip />
<el-table-column property="tle" label="TLE" 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 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="m-t-5" />
<div>
<el-table :data="tableData" style="width: 100%" border :row-style="{ height: '42.5px' }"
: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="NoradCatID" label="Norad Cat ID" show-overflow-tooltip />
<el-table-column property="targetName" label="目标名称" show-overflow-tooltip />
<el-table-column property="intleds" label="INTLDES" show-overflow-tooltip />
<el-table-column property="type" label="类型" show-overflow-tooltip />
<el-table-column property="belongCountry" label="所属国家" width="82" show-overflow-tooltip />
<el-table-column property="runningTime" label="运行时间" show-overflow-tooltip />
<el-table-column property="site" label="SITE" show-overflow-tooltip />
<el-table-column property="failTime" label="失效时间" show-overflow-tooltip />
<el-table-column property="period" label="周期" show-overflow-tooltip />
<el-table-column property="perigee" label="近地点" show-overflow-tooltip />
<el-table-column property="apogee" label="远地点" show-overflow-tooltip />
<el-table-column property="incl" label="INCL" show-overflow-tooltip />
<el-table-column property="rcs" label="RCS" show-overflow-tooltip />
<el-table-column property="tle" label="TLE" 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 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>
<script setup lang="ts">
......@@ -236,149 +230,150 @@ const site = ref('')
const tle = ref('')
const tableData = ref([
{
number: '1',
NoradCatID: '1358',
targetName: 'SL-1 R/B',
intleds: '1957-001A',
type: 'ROCKET BODY',
belongCountry: 'RUS',
runningTime: '1957-10-14',
site: 'TTMTR',
failTime: '1958-12-01',
period: '96.19',
perigee: '214',
apogee: '938',
incl: '65.14',
rcs: 'LARGE',
tle: '-',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
number: '1',
NoradCatID: '1358',
targetName: 'SL-1 R/B',
intleds: '1957-001A',
type: 'ROCKET BODY',
belongCountry: 'RUS',
runningTime: '1957-10-14',
site: 'TTMTR',
failTime: '1958-12-01',
period: '96.19',
perigee: '214',
apogee: '938',
incl: '65.14',
rcs: 'LARGE',
tle: '-',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
])
const pageObj = ref({
total: 10,
pageSize: 10,
pageNo: 1
total: 10,
pageSize: 10,
pageNo: 1
})
const handleDetails = (row: any) => {
console.log(row);
detailVisibleValue.value = true
console.log(row);
detailVisibleValue.value = true
}
const getData = () => {
console.log('getData');
console.log('getData');
}
const handleClose = () => {
detailVisibleValue.value = false
detailVisibleValue.value = false
}
const handleExportConfirm = () => {
}
const handleExport = () => {
showDeleteDialog.value = true
showDeleteDialog.value = true
}
</script>
<style scoped lang="scss">
// 调整表单项间距
.detailForm {
.el-dialog-title {
font-size: 180px;
}
.el-dialog-title {
font-size: 180px;
}
.el-form-item {
margin-bottom: 30px !important;
}
.el-form-item {
margin-bottom: 30px !important;
}
}
/* 工具栏样式 */
.toolbarStyle {
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* 表格样式 */
.formStyle {
display: flex;
justify-content: space-around;
padding: 3px;
margin-top: 1%;
display: flex;
justify-content: space-around;
padding: 3px;
margin-top: 1%;
}
/* 文字样式 */
.el-text {
color: #FFFFFF;
color: #FFFFFF;
}
</style>
<style>
.el-input {
--el-input-text-color: #FFFFFF;
--el-input-text-color: #FFFFFF;
}
/* 修改el选择器的样式 */
.el-select__wrapper {
background-color: #1d5484;
box-shadow: none;
background-color: #1d5484;
box-shadow: none;
}
/* 删除el选择器选中时的边框 */
.is-hovering {
box-shadow: none !important;
box-shadow: none !important;
}
/* 修改el输入框的样式 */
.el-input__wrapper {
background-color: #1d5484;
box-shadow: none;
background-color: #1d5484;
box-shadow: none;
}
/* 修改el下拉框的背景颜色 */
.el-select-dropdown {
background-color: #1d5484;
background-color: #1d5484;
}
/* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item {
color: #FFFFFF;
color: #FFFFFF;
}
/* 修改el下拉框选项选中时的文字颜色 */
.el-select-dropdown__item:hover {
color: #409eff;
color: #409eff;
}
/* 修改el日期选择器的边框为none */
.el-date-editor {
--el-input-border-color: none
--el-input-border-color: none
}
.el-button:focus {
outline: none;
outline: none;
}
</style>
\ No newline at end of file
src/views/os-dataDisplay/index.vue
<template>
<div>
<div class="text-left p-4">
<div class="custom-style">
<el-segmented v-model="mode" :options="sizeOptions" style="margin-bottom: 1rem" size="large" />
</div>
</div>
<!-- 综合数据页面组件 -->
<allDataTab v-if="mode === '综合数据'">
</allDataTab>
<!-- DSN数据页面组件 -->
<dsnDataTab v-if="mode === 'DSN数据'">
</dsnDataTab>
<!-- ITU数据页面组件 -->
<ituDataTab v-if="mode === 'ITU数据'">
</ituDataTab>
<!-- ST数据页面组件 -->
<stDataTab v-if="mode === 'ST数据'">
</stDataTab>
</div>
<div>
<div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToStatus" />
<div class="text-left p-4 ">
<div class="custom-style">
<el-segmented v-model="mode" :options="sizeOptions" style="margin-bottom: 1rem" size="default" />
</div>
</div>
<!-- 综合数据页面组件 -->
<allDataTab v-if="mode === '综合数据'">
</allDataTab>
<!-- DSN数据页面组件 -->
<dsnDataTab v-if="mode === 'DSN数据'">
</dsnDataTab>
<!-- ITU数据页面组件 -->
<ituDataTab v-if="mode === 'ITU数据'">
</ituDataTab>
<!-- ST数据页面组件 -->
<stDataTab v-if="mode === 'ST数据'">
</stDataTab>
</div>
</template>
<script setup lang="ts">
......@@ -36,37 +34,39 @@ const mode = ref('综合数据')
const sizeOptions = ['综合数据', 'DSN数据', 'ITU数据', 'ST数据']
const route = useRoute()
const router = useRouter()
const ooo = ref<any>('数据展示')
const modeValue = ref<any>('数据展示')
const goToStatus = () => {
router.push({
path: '/osStatus/list',
})
router.push({
path: '/osStatus/list',
})
}
onMounted(()=>{
console.log('数据展示');
console.log(route.query);
ooo.value = route.query.mode
mode.value = ooo.value
onMounted(() => {
console.log('数据展示');
console.log(route.query);
if (route.query.mode) {
modeValue.value = route.query.mode
mode.value = modeValue.value
}
})
</script>
<style scoped lang="scss">
.el-button:focus {
outline: none;
outline: none;
}
/* 文字样式 */
.el-text {
color: #FFFFFF;
color: #FFFFFF;
}
.backStyle {
background-image: url("@/assets/picture/back.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 5vh;
width: 5%;
display: flex;
margin-left: 0.8%;
background-image: url("@/assets/picture/back.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 5vh;
width: 5%;
display: flex;
margin-left: 0.8%;
}
</style>
src/views/os-log/index.vue
<template>
<div>
<div class="backStyle" @click="bactToRecord()">
</div>
<div class="m-t-4">
</div>
<div>
<el-input v-model="textarea" style="width: 93%" :rows="33" type="textarea" placeholder=" " />
</div>
</div>
<div>
<div class="backStyle" @click="bactToRecord()">
</div>
<div class="m-t-4" />
<div>
<el-input v-model="textarea" style="width: 93%" :rows="33" type="textarea" placeholder=" " />
</div>
</div>
</template>
<script setup lang="ts">
......@@ -19,31 +17,29 @@ const router = useRouter()
const textarea = ref('')
const bactToRecord = () => {
router.push({
path: '/os-taskRecord/list',
})
router.push({
path: '/os-taskRecord/list',
})
}
</script>
<style scoped>
.backStyle{
background-image: url("@/assets/picture/back.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 5vh;
width: 5%;
display: flex;
margin-left: 0.8%;
.backStyle {
background-image: url("@/assets/picture/back.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 5vh;
width: 5%;
display: flex;
margin-left: 0.8%;
}
</style>
<style>
.el-textarea__inner,.el-input__inner {
background: transparent !important;
color: #FFFFFF;
.el-textarea__inner,
.el-input__inner {
background: transparent !important;
color: #FFFFFF;
}
</style>
\ No newline at end of file
src/views/os-spiderManager/index.vue
<template>
<div>
<div class="mt-20">
</div>
<div>
<el-table :data="tableData" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }" :row-style="{ height: '60px' }">
<el-table-column type="selection" width="40" height="40" />
<el-table-column property="name" label="序号" />
<el-table-column property="address" label="爬虫名称" show-overflow-tooltip />
<el-table-column label="查看任务">
<template #default="scope">
<el-button type="primary" plain @click="handleDetails(scope.row)">
任务
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<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="mt-20" />
<div>
<el-table :data="tableData" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }" :row-style="{ height: '60px' }">
<el-table-column type="selection" width="40" height="40" />
<el-table-column property="number" label="序号" />
<el-table-column property="spiderName" label="爬虫名称" show-overflow-tooltip />
<el-table-column label="查看任务">
<template #default="scope">
<el-button type="primary" plain @click="handleDetails(scope.row)">
任务
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<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>
</template>
<script setup lang="ts">
......@@ -31,71 +30,71 @@ import { useRouter } from 'vue-router'
const router = useRouter()
const tableData = ref([
{
name: '1',
address: 'sk网',
},
{
name: '2',
address: 'sk网',
},
{
name: '3',
address: 'sk网',
},
{
name: '4',
address: 'sk网',
},
{
name: '5',
address: 'sk网',
},
{
name: '6',
address: 'sk网',
},
{
name: '7',
address: 'sk网',
},
{
name: '8',
address: 'sk网',
},
{
name: '9',
address: 'sk网',
},
{
name: '10',
address: 'sk网',
},
{
number: '1',
spiderName: 'sk网爬虫',
},
{
name: '2',
address: 'sk网',
},
{
name: '3',
address: 'sk网',
},
{
name: '4',
address: 'sk网',
},
{
name: '5',
address: 'sk网',
},
{
name: '6',
address: 'sk网',
},
{
name: '7',
address: 'sk网',
},
{
name: '8',
address: 'sk网',
},
{
name: '9',
address: 'sk网',
},
{
name: '10',
address: 'sk网',
},
])
const pageObj = ref({
total: 10,
pageSize: 10,
pageNo: 1
total: 10,
pageSize: 10,
pageNo: 1
})
const handleDetails = (row: any) => {
console.log(row);
router.push({
path: '/os-taskInformation',
})
console.log(row);
router.push({
path: '/os-taskInformation',
})
}
const getData = () => {
console.log('getData');
console.log('getData');
}
onMounted(()=>{
console.log('爬虫管理');
onMounted(() => {
console.log('爬虫管理');
})
</script>
<style scoped>
/* 去除按钮边框 */
.el-button:focus {
outline: none;
outline: none;
}
</style>
src/views/os-status/components/dataCard.vue
<template>
<div class="flex gap-10">
<span class="textStyle">数据统计</span>
<div class="dataCard" @click="goToAllDataPage">
<div class="titleStyle" >
<span>数据统计</span>
</div>
<div class="wordStyle">
<span>总数据量: {{ totalDataNumber }} 1230</span>
</div>
<div class="wordStyle">
<span>采集的页面数量: {{ totalPageNumber }} 85</span>
</div>
<div class="wordStyle">
<span>采集的目标数量: {{ totalTargetNumber }} 569</span>
</div>
</div>
<div class="dataCard" @click="goToTaskRecordPage">
<div class="titleStyle">
<span>任务执行统计</span>
</div>
<div class="wordStyle">
<span>任务执行成功统计: {{ successTask }} 36</span>
</div>
<div class="wordStyle">
<span>任务执行失败统计: {{ failTask }} 0</span>
</div>
<div class="wordStyle">
<span>任务异常数统计: {{ unusualTask }} 1</span>
</div>
</div>
<div class="dataCard">
<div class="titleStyle">
<span>性能统计</span>
</div>
<div class="wordStyle">
<span>平均成功率: {{ speed }} 98%</span>
</div>
<div class="wordStyle">
<span>平均错误率: {{ errorRate }} 0%</span>
</div>
<div class="wordStyle">
<span>平均异常率: {{ errorRate }} 2%</span>
</div>
</div>
</div>
<div class="flex gap-10">
<span class="textStyle">数据统计</span>
<div class="dataCard" @click="goToAllDataPage">
<div class="titleStyle">
<span>数据统计</span>
</div>
<div class="wordStyle">
<span>总数据量: {{ totalDataNumber }} 1230</span>
</div>
<div class="wordStyle">
<span>采集的页面数量: {{ totalPageNumber }} 85</span>
</div>
<div class="wordStyle">
<span>采集的目标数量: {{ totalTargetNumber }} 569</span>
</div>
</div>
<div class="dataCard" @click="goToTaskRecordPage">
<div class="titleStyle">
<span>任务执行统计</span>
</div>
<div class="wordStyle">
<span>任务执行成功统计: {{ successTask }} 36</span>
</div>
<div class="wordStyle">
<span>任务执行失败统计: {{ failTask }} 0</span>
</div>
<div class="wordStyle">
<span>任务异常数统计: {{ unusualTask }} 1</span>
</div>
</div>
<div class="dataCard">
<div class="titleStyle">
<span>性能统计</span>
</div>
<div class="wordStyle">
<span>平均成功率: {{ speed }} 98%</span>
</div>
<div class="wordStyle">
<span>平均错误率: {{ errorRate }} 0%</span>
</div>
<div class="wordStyle">
<span>平均异常率: {{ errorRate }} 2%</span>
</div>
</div>
</div>
</template>
......@@ -52,56 +52,56 @@ import { useRouter } from 'vue-router';
const router = useRouter();
defineProps({
totalDataNumber: {
type: String,
default: ''
},
totalPageNumber: {
type: String,
default: ''
},
totalTargetNumber: {
type: String,
default: ''
},
successTask: {
type: String,
default: ''
},
failTask: {
type: String,
default: ''
},
unusualTask: {
type: String,
default: ''
},
speed: {
type: String,
default: ''
},
errorRate: {
type: String,
default: ''
}
totalDataNumber: {
type: String,
default: ''
},
totalPageNumber: {
type: String,
default: ''
},
totalTargetNumber: {
type: String,
default: ''
},
successTask: {
type: String,
default: ''
},
failTask: {
type: String,
default: ''
},
unusualTask: {
type: String,
default: ''
},
speed: {
type: String,
default: ''
},
errorRate: {
type: String,
default: ''
}
})
const goToAllDataPage = () => {
router.push({
path: '/osDataDisplay/list',
query: {
jump: 'yes',
mode:'综合数据'
}
})
router.push({
path: '/osDataDisplay/list',
query: {
jump: 'yes',
mode: '综合数据'
}
})
}
const goToTaskRecordPage = () => {
router.push({
path: '/osTaskRecord/list',
query: {
jump: 'yes'
}
})
router.push({
path: '/osTaskRecord/list',
query: {
jump: 'yes'
}
})
}
......@@ -109,34 +109,34 @@ const goToTaskRecordPage = () => {
<style lang="scss" scoped>
.dataCard {
background-image: url("@/assets/picture/box2.png");
background-size: 100% 100%;
background-repeat: no-repeat;
// background: #c6ebfc;
// border: 1.5px solid rgb(193, 188, 188);
width: 360px;
height: 100%;
border-radius: 5px;
background-image: url("@/assets/picture/box2.png");
background-size: 100% 100%;
background-repeat: no-repeat;
// background: #c6ebfc;
// border: 1.5px solid rgb(193, 188, 188);
width: 360px;
height: 100%;
border-radius: 5px;
}
.titleStyle {
font-size: 30px;
margin-top: 5%;
color: #FFFFFF;
font-size: 30px;
margin-top: 5%;
color: #FFFFFF;
}
.wordStyle {
font-size: 20px;
color: #FFFFFF;
margin-top: 2%;
font-size: 20px;
color: #FFFFFF;
margin-top: 2%;
}
.textStyle {
writing-mode: vertical-lr;
font-size: 26px;
letter-spacing: 3px;
margin-left: 0.5%;
color: #FFFFFF;
// display: flex;
writing-mode: vertical-lr;
font-size: 26px;
letter-spacing: 3px;
margin-left: 0.5%;
color: #FFFFFF;
// display: flex;
}
</style>
src/views/os-status/components/qbDataMonitor.vue
<template>
<div class="flex gap-10">
<span class="textStyle">QB数据管理</span>
<div class="dataCard" @click="goToAllDataPage">
<div class="titleStyle">
<span>综合数据</span>
</div>
<div class="iconStyle">
</div>
</div>
<div class="dataCard" @click="goToDSNDataPage">
<div class="titleStyle">
<span>DSN数据</span>
</div>
<div class="iconStyle">
</div>
</div>
<div class="dataCard" @click="goToITUDataPage">
<div class="titleStyle">
<span>ITU数据</span>
</div>
<div class="iconStyle">
</div>
</div>
<div class="dataCard" @click="goToSTDataPage">
<div class="titleStyle">
<span>ST数据</span>
</div>
<div class="iconStyle">
</div>
</div>
</div>
<div class="flex gap-10">
<span class="textStyle">QB数据管理</span>
<div class="dataCard" @click="goToAllDataPage">
<div class="titleStyle">
<span>综合数据</span>
</div>
<div class="iconStyle" />
</div>
<div class="dataCard" @click="goToDSNDataPage">
<div class="titleStyle">
<span>DSN数据</span>
</div>
<div class="iconStyle" />
</div>
<div class="dataCard" @click="goToITUDataPage">
<div class="titleStyle">
<span>ITU数据</span>
</div>
<div class="iconStyle" />
</div>
<div class="dataCard" @click="goToSTDataPage">
<div class="titleStyle">
<span>ST数据</span>
</div>
<div class="iconStyle" />
</div>
</div>
</template>
<script lang="ts" setup>
......@@ -38,122 +33,123 @@ import { useRouter } from 'vue-router'
const router = useRouter()
defineProps({
totalDataNumber: {
type: String,
default: ''
},
totalPageNumber: {
type: String,
default: ''
},
totalTargetNumber: {
type: String,
default: ''
},
successTask: {
type: String,
default: ''
},
failTask: {
type: String,
default: ''
},
unusualTask: {
type: String,
default: ''
},
speed: {
type: String,
default: ''
},
errorRate: {
type: String,
default: ''
}
totalDataNumber: {
type: String,
default: ''
},
totalPageNumber: {
type: String,
default: ''
},
totalTargetNumber: {
type: String,
default: ''
},
successTask: {
type: String,
default: ''
},
failTask: {
type: String,
default: ''
},
unusualTask: {
type: String,
default: ''
},
speed: {
type: String,
default: ''
},
errorRate: {
type: String,
default: ''
}
})
const goToAllDataPage = () => {
router.push({
path: '/osDataDisplay/list',
query: {
mode: '综合数据',
jump:'yes'
}
})
router.push({
path: '/osDataDisplay/list',
query: {
mode: '综合数据',
jump: 'yes'
}
})
}
const goToDSNDataPage = () => {
router.push({
path: '/osDataDisplay/list',
query: {
mode: 'DSN数据',
jump:'yes'
}
})
router.push({
path: '/osDataDisplay/list',
query: {
mode: 'DSN数据',
jump: 'yes'
}
})
}
const goToITUDataPage = () => {
router.push({
path: '/osDataDisplay/list',
query: {
mode: 'ITU数据',
jump:'yes'
}
})
router.push({
path: '/osDataDisplay/list',
query: {
mode: 'ITU数据',
jump: 'yes'
}
})
}
const goToSTDataPage = () => {
router.push({
path: '/osDataDisplay/list',
query: {
mode: 'ST数据',
jump:'yes'
}
})
router.push({
path: '/osDataDisplay/list',
query: {
mode: 'ST数据',
jump: 'yes'
}
})
}
</script>
<style lang="scss" scoped>
.iconStyle {
background-image: url("@/assets/picture/wenjianjia.png");
background-size: 100% 120%;
background-repeat: no-repeat;
margin-top: 3%;
display: flex;
// border: 1.5px solid rgb(193, 188, 188);
height: 50%;
width: 50%;
background-image: url("@/assets/picture/wenjianjia.png");
background-size: 100% 120%;
background-repeat: no-repeat;
margin-top: 3%;
display: flex;
// border: 1.5px solid rgb(193, 188, 188);
height: 50%;
width: 50%;
}
.dataCard {
background-image: url("@/assets/picture/box2.png");
background-size: 100% 100%;
background-repeat: no-repeat;
// background: #c6ebfc;
// border: 1.5px solid rgb(193, 188, 188);
width: 260px;
height: 100%;
border-radius: 5px;
display: flex;
flex-direction: column;
// justify-content: center;
align-items: center;
background-image: url("@/assets/picture/box2.png");
background-size: 100% 100%;
background-repeat: no-repeat;
// background: #c6ebfc;
// border: 1.5px solid rgb(193, 188, 188);
width: 260px;
height: 100%;
border-radius: 5px;
display: flex;
flex-direction: column;
// justify-content: center;
align-items: center;
}
.titleStyle {
font-size: 30px;
margin-top: 5%;
color: #FFFFFF;
font-size: 30px;
margin-top: 5%;
color: #FFFFFF;
}
.wordStyle {
font-size: 20px;
color: #FFFFFF;
margin-top: 2%;
font-size: 20px;
color: #FFFFFF;
margin-top: 2%;
}
.textStyle {
writing-mode: vertical-lr;
font-size: 26px;
letter-spacing: 3px;
margin-left: 0.5%;
color: #FFFFFF;
// display: flex;
writing-mode: vertical-lr;
font-size: 26px;
letter-spacing: 3px;
margin-left: 0.5%;
color: #FFFFFF;
// display: flex;
}
</style>
src/views/os-status/components/statusMonitor.vue
<template>
<div>
<div class="card-container">
<div class="monitoringCard">
<!-- <div class="textStyle">
<span>数据统计</span>
</div> -->
<div class="data-card-wrapper">
<dataCard></dataCard>
</div>
<div class="monitoringCard">
<div class="data-card-wrapper">
<dataCard></dataCard>
</div>
<div class="taskCard">
<div class="data-card-wrapper">
<taskCard></taskCard>
</div>
</div>
<div class="taskCard">
<div class="data-card-wrapper">
<taskCard></taskCard>
</div>
<div class="qbCard">
<div class="data-card-wrapper">
<qbCard></qbCard>
</div>
</div>
<div class="qbCard">
<div class="data-card-wrapper">
<qbCard></qbCard>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
......@@ -28,79 +28,81 @@ import qbCard from '@/views/os-status/components/qbDataMonitor.vue';
import { onMounted } from 'vue';
defineProps({
title: {
type: String,
default: ''
},
desc: {
type: String,
default: ''
}
title: {
type: String,
default: ''
},
desc: {
type: String,
default: ''
}
})
onMounted(()=>{
console.log('状态监控');
onMounted(() => {
console.log('状态监控');
})
</script>
<style lang="scss" scoped>
.card-container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10px;
gap: 30px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10px;
gap: 30px;
}
.monitoringCard {
background-image: url("@/assets/picture/box1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 22.5vh;
width: 96%;
display: flex;
gap: 21.5px;
padding: 10px;
background-image: url("@/assets/picture/box1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 22.5vh;
width: 96%;
display: flex;
gap: 21.5px;
padding: 10px;
}
.taskCard {
background-image: url("@/assets/picture/box1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 26.5vh;
width: 96%;
display: flex;
gap: 21.5px;
padding: 10px;
background-image: url("@/assets/picture/box1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 26.5vh;
width: 96%;
display: flex;
gap: 21.5px;
padding: 10px;
}
.qbCard {
background-image: url("@/assets/picture/box1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 22vh;
width: 96%;
display: flex;
padding: 10px;
background-image: url("@/assets/picture/box1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 22vh;
width: 96%;
display: flex;
padding: 10px;
}
.textStyle {
writing-mode: vertical-lr;
font-size: 26px;
letter-spacing: 3px;
margin-left: 2%;
color: #FFFFFF;
// display: flex;
writing-mode: vertical-lr;
font-size: 26px;
letter-spacing: 3px;
margin-left: 2%;
color: #FFFFFF;
// display: flex;
}
.data-card-wrapper {
flex: 1;
display: flex;
justify-content: center; /* 水平居中 */
// gap: 20px;
flex: 1;
display: flex;
justify-content: center;
/* 水平居中 */
// gap: 20px;
}
</style>
\ No newline at end of file
</style>
\ No newline at end of file
src/views/os-status/components/taskCard.vue
<template>
<div class="flex gap-10">
<span class="textStyle">任务统计</span>
<div class="dataCard" @click="goToDSNTaskRecordPage">
<div class="titleStyle">
<span>DSN爬取任务</span>
</div>
<div class="wordStyle">
<span>任务采集目标数: {{ totalDataNumber }} 638</span>
</div>
<div class="wordStyle">
<span>任务执行成功统计: {{ totalPageNumber }} 79</span>
</div>
<div class="wordStyle">
<span>采集速度: {{ totalTargetNumber }} 324</span>
</div>
<div class="wordStyle">
<span>错误率: {{ totalTargetNumber }} 1%</span>
</div>
</div>
<div class="dataCard" @click="goToITUTaskRecordPage">
<div class="titleStyle">
<span>ITU爬取任务</span>
</div>
<div class="wordStyle">
<span>任务采集目标数: {{ totalDataNumber }} 148</span>
</div>
<div class="wordStyle">
<span>任务执行成功统计: {{ totalPageNumber }} 98</span>
</div>
<div class="wordStyle">
<span>采集速度: {{ totalTargetNumber }} 322</span>
</div>
<div class="wordStyle">
<span>错误率: {{ totalTargetNumber }} 1%</span>
</div>
</div>
<div class="dataCard" @click="goToSTTaskRecordPage">
<div class="titleStyle">
<span>ST爬取任务</span>
</div>
<div class="wordStyle">
<span>任务采集目标数: {{ totalDataNumber }} 136</span>
</div>
<div class="wordStyle">
<span>任务执行成功统计: {{ totalPageNumber }} 86</span>
</div>
<div class="wordStyle">
<span>采集速度: {{ totalTargetNumber }} 342</span>
</div>
<div class="wordStyle">
<span>错误率: {{ totalTargetNumber }} 0%</span>
</div>
</div>
</div>
<div class="flex gap-10">
<span class="textStyle">任务统计</span>
<div class="dataCard" @click="goToDSNTaskRecordPage">
<div class="titleStyle">
<span>DSN爬取任务</span>
</div>
<div class="wordStyle">
<span>任务采集目标数: {{ totalDataNumber }} 638</span>
</div>
<div class="wordStyle">
<span>任务执行成功统计: {{ totalPageNumber }} 79</span>
</div>
<div class="wordStyle">
<span>采集速度: {{ totalTargetNumber }} 324</span>
</div>
<div class="wordStyle">
<span>错误率: {{ totalTargetNumber }} 1%</span>
</div>
</div>
<div class="dataCard" @click="goToITUTaskRecordPage">
<div class="titleStyle">
<span>ITU爬取任务</span>
</div>
<div class="wordStyle">
<span>任务采集目标数: {{ totalDataNumber }} 148</span>
</div>
<div class="wordStyle">
<span>任务执行成功统计: {{ totalPageNumber }} 98</span>
</div>
<div class="wordStyle">
<span>采集速度: {{ totalTargetNumber }} 322</span>
</div>
<div class="wordStyle">
<span>错误率: {{ totalTargetNumber }} 1%</span>
</div>
</div>
<div class="dataCard" @click="goToSTTaskRecordPage">
<div class="titleStyle">
<span>ST爬取任务</span>
</div>
<div class="wordStyle">
<span>任务采集目标数: {{ totalDataNumber }} 136</span>
</div>
<div class="wordStyle">
<span>任务执行成功统计: {{ totalPageNumber }} 86</span>
</div>
<div class="wordStyle">
<span>采集速度: {{ totalTargetNumber }} 342</span>
</div>
<div class="wordStyle">
<span>错误率: {{ totalTargetNumber }} 0%</span>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
const router = useRouter()
defineProps({
totalDataNumber: {
type: String,
default: ''
},
totalPageNumber: {
type: String,
default: ''
},
totalTargetNumber: {
type: String,
default: ''
},
successTask: {
type: String,
default: ''
},
failTask: {
type: String,
default: ''
},
unusualTask: {
type: String,
default: ''
},
speed: {
type: String,
default: ''
},
errorRate: {
type: String,
default: ''
}
totalDataNumber: {
type: String,
default: ''
},
totalPageNumber: {
type: String,
default: ''
},
totalTargetNumber: {
type: String,
default: ''
},
successTask: {
type: String,
default: ''
},
failTask: {
type: String,
default: ''
},
unusualTask: {
type: String,
default: ''
},
speed: {
type: String,
default: ''
},
errorRate: {
type: String,
default: ''
}
})
const goToDSNTaskRecordPage = () => {
router.push({
path: '/osTaskRecord/list',
query: {
mode: 'dsn',
jump:'yes'
}
})
router.push({
path: '/osTaskRecord/list',
query: {
mode: 'dsn',
jump: 'yes'
}
})
}
const goToITUTaskRecordPage = () => {
router.push({
path: '/osTaskRecord/list',
query: {
mode: 'itu',
jump:'yes'
router.push({
path: '/osTaskRecord/list',
query: {
mode: 'itu',
jump: 'yes'
}
})
}
})
}
const goToSTTaskRecordPage = () => {
router.push({
path: '/osTaskRecord/list',
query: {
mode: 'st',
jump:'yes'
router.push({
path: '/osTaskRecord/list',
query: {
mode: 'st',
jump: 'yes'
}
})
}
})
}
</script>
<style lang="scss" scoped>
.dataCard {
background-image: url("@/assets/picture/box2.png");
background-size: 100% 100%;
background-repeat: no-repeat;
// background: #c6ebfc;
// border: 1.5px solid rgb(193, 188, 188);
width: 360px;
height: 100%;
border-radius: 5px;
background-image: url("@/assets/picture/box2.png");
background-size: 100% 100%;
background-repeat: no-repeat;
// background: #c6ebfc;
// border: 1.5px solid rgb(193, 188, 188);
width: 360px;
height: 100%;
border-radius: 5px;
}
.titleStyle {
font-size: 30px;
margin-top: 5%;
color: #FFFFFF;
font-size: 30px;
margin-top: 5%;
color: #FFFFFF;
}
.wordStyle {
font-size: 20px;
color: #FFFFFF;
margin-top: 2%;
font-size: 20px;
color: #FFFFFF;
margin-top: 2%;
}
.textStyle {
writing-mode: vertical-lr;
font-size: 26px;
letter-spacing: 3px;
margin-left: 0.5%;
color: #FFFFFF;
// display: flex;
writing-mode: vertical-lr;
font-size: 26px;
letter-spacing: 3px;
margin-left: 0.5%;
color: #FFFFFF;
// display: flex;
}
</style>
src/views/os-status/components/taskMonitoringBox.vue
<!-- 任务监控盒子组件 -->
<template>
<div class="card">
<div class="text-left textStyle ">
<span>任务监控</span>
</div>
<div class="flex flex-wrap ">
<taskMonitoringCard></taskMonitoringCard>
</div>
</div>
<div class="card">
<div class="text-left textStyle ">
<span>任务监控</span>
</div>
<div class="flex flex-wrap ">
<taskMonitoringCard></taskMonitoringCard>
</div>
</div>
</template>
<script lang="ts" setup>
import taskMonitoringCard from './taskCard.vue'
defineProps({
title: {
type: String,
default: ''
},
desc: {
type: String,
default: ''
}
title: {
type: String,
default: ''
},
desc: {
type: String,
default: ''
}
})
</script>
<style lang="scss" scoped>
.card {
background: #ffffff;
margin-top: 12px;
border: 1.5px solid rgb(193, 188, 188);
height: 53vh;
width: 95.5%;
display: flex;
gap: 20px;
// flex-wrap: wrap;
.textStyle {
writing-mode: vertical-lr;
font-size: 24px;
letter-spacing: 3px;
// margin-top: -1.5%;
text-align: center;
}
}
background: #ffffff;
margin-top: 12px;
border: 1.5px solid rgb(193, 188, 188);
height: 53vh;
width: 95.5%;
display: flex;
gap: 20px;
// flex-wrap: wrap;
.textStyle {
writing-mode: vertical-lr;
font-size: 24px;
letter-spacing: 3px;
// margin-top: -1.5%;
text-align: center;
}
}
</style>
src/views/os-status/index.vue
......@@ -11,20 +11,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import statusMonitor from './components/statusMonitor.vue'
const loading = ref(false);
const statusList = ref([]);
const title = ref(' ');
const timeValue = ref();
onMounted(() => {
});
const changeTime = () => {
console.log(timeValue.value);
}
</script>
<style lang="scss" scoped>
......
src/views/os-system/components/addUserDialog.vue
<template>
<el-dialog v-model="currentVisible" :title="currentMode === '1' ? '新增用户' : '编辑用户'" width="610" center align-center @close="handleClose" draggable>
<el-form :inline="true">
<el-form-item label="用户账号:">
<el-input v-model="taskName" />
</el-form-item>
<el-form-item label="用户名称:">
<el-input v-model="taskFrequency" />
</el-form-item>
</el-form>
<div class="m-t-4">
</div>
<el-form :inline="true">
<el-form-item label="用户备注:">
<el-input v-model="taskName" />
</el-form-item>
<el-form-item label="用户密码:">
<el-input v-model="taskFrequency" />
</el-form-item>
</el-form>
<div class="m-t-4">
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="handleConfirm">
确定
</el-button>
</div>
</template>
</el-dialog>
<el-dialog v-model="currentVisible" :title="currentMode === '1' ? '新增用户' : '编辑用户'" width="610" center align-center
@close="handleClose" draggable>
<el-form :inline="true">
<el-form-item label="用户账号:">
<el-input v-model="taskName" />
</el-form-item>
<el-form-item label="用户名称:">
<el-input v-model="taskFrequency" />
</el-form-item>
</el-form>
<div class="m-t-4" />
<el-form :inline="true">
<el-form-item label="用户备注:">
<el-input v-model="taskName" />
</el-form-item>
<el-form-item label="用户密码:">
<el-input v-model="taskFrequency" />
</el-form-item>
</el-form>
<div class="m-t-4">
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="handleConfirm">
确定
</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { onMounted, ref } from 'vue'
import { defineProps } from 'vue';
import { watch } from 'vue'
const props = defineProps({
dialogVisible: {
type: Boolean,
default: false
},
mode: {
type: String,
default: 'add'
},
userCount: {
type: String,
default: ''
},
userName: {
type: String,
default: ''
},
userRemark: {
type: String,
default: false
},
userPassword: {
type: String,
default: ''
}
dialogVisible: {
type: Boolean,
default: false
},
mode: {
type: String,
default: 'add'
},
userCount: {
type: String,
default: ''
},
userName: {
type: String,
default: ''
},
userRemark: {
type: String,
default: false
},
userPassword: {
type: String,
default: ''
}
})
// 向父组件传递dialog值
const emit = defineEmits(['update:dialogVisible', 'confirm'])
......@@ -75,52 +72,53 @@ const taskFrequency = ref('')
// 关闭的方法
const handleClose = () => {
currentVisible.value = false
currentVisible.value = false
}
// 确定的方法
const handleConfirm = () => {
emit('confirm')
currentVisible.value = false
emit('confirm')
currentVisible.value = false
}
// 监听props变化，同步给组件内部
watch(() => props.dialogVisible,
(newVal) => {
currentVisible.value = newVal
}
(newVal) => {
currentVisible.value = newVal
}
)
// 监听组件内部状态变化，同步给父组件，这样才能做到控制对话框组件的显隐
watch(() => currentVisible.value,
(newVal) => {
emit('update:dialogVisible', newVal)
}
(newVal) => {
emit('update:dialogVisible', newVal)
}
)
watch(() => props.mode,
(newVal) => {
currentMode.value = newVal
}
(newVal) => {
currentMode.value = newVal
}
)
</script>
<style>
/* 修改弹窗样式 */
.el-dialog {
background: transparent;
background-image: url("@/assets/picture/dialog1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
color: #ffffff;
background: transparent;
background-image: url("@/assets/picture/dialog1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
color: #ffffff;
.el-dialog__title {
color: #ffffff;
}
.el-dialog__title {
color: #ffffff;
}
}
/* 修改表单样式 */
.el-form {
.el-form-item__label {
color: #ffffff;
}
.el-form-item__label {
color: #ffffff;
}
}
</style>
src/views/os-system/index.vue
<template>
<div>
<div class="text-left p-8">
<el-form inline>
<el-form-item>
<el-button type="primary" plain @click="openAddUserDialog">创建用户</el-button>
</el-form-item>
<el-form-item>
<el-button type="danger" plain @click="handleConfirm">批量删除</el-button>
</el-form-item>
</el-form>
</div>
<el-table :data="tableData" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }" :row-style="{ height: '58px' }">
<el-table-column type="selection" width="40" />
<el-table-column property="name" label="序号" width="55" />
<el-table-column property="name" label="用户名" show-overflow-tooltip />
<el-table-column property="name" label="用户名称" show-overflow-tooltip />
<el-table-column property="name" label="备注" show-overflow-tooltip />
<el-table-column property="name" label="用户密码" show-overflow-tooltip />
<el-table-column property="name" label="创建时间" width="280" show-overflow-tooltip />
<el-table-column label="操作" width="220">
<template #default="scope">
<el-button type="primary" plain @click="handleDetails(scope.row)">
编辑
</el-button>
<el-button type="danger" plain @click="handleConfirm(scope.row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
@pagination="getData" />
</div>
<!-- 删除弹窗组件 -->
<deleteDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleDeleteConfirm" @mode="deleteMode" />
<!-- 创建用户弹窗组件 -->
<addUserDialog v-model:dialogVisible="dialogVisible" :mode="mode" :user-count="userCount" :user-name="userName"
:user-remark="userRemark" :user-password="userPassword " @confirm="handleConfirm" />
</div>
<div>
<div class="text-left p-8">
<el-form inline>
<el-form-item>
<el-button type="primary" plain @click="openAddUserDialog">创建用户</el-button>
</el-form-item>
<el-form-item>
<el-button type="danger" plain @click="handleConfirm">批量删除</el-button>
</el-form-item>
</el-form>
</div>
<el-table :data="tableData" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }" :row-style="{ height: '58px' }">
<el-table-column type="selection" width="40" />
<el-table-column property="number" label="序号" width="55" />
<el-table-column property="userCount" label="用户账号" show-overflow-tooltip />
<el-table-column property="userName" label="用户名称" show-overflow-tooltip />
<el-table-column property="userRemark" label="备注" show-overflow-tooltip />
<el-table-column property="userPassword" label="用户密码" show-overflow-tooltip />
<el-table-column property="createTime" label="创建时间" width="280" show-overflow-tooltip />
<el-table-column label="操作" width="220">
<template #default="scope">
<el-button type="primary" plain @click="handleDetails(scope.row)">
编辑
</el-button>
<el-button type="danger" plain @click="handleConfirm(scope.row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
@pagination="getData" />
</div>
<!-- 删除弹窗组件 -->
<deleteDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleDeleteConfirm" @mode="deleteMode" />
<!-- 创建用户弹窗组件 -->
<addUserDialog v-model:dialogVisible="dialogVisible" :mode="mode" :user-count="userCount" :user-name="userName"
:user-remark="userRemark" :user-password="userPassword" @confirm="handleConfirm" />
</div>
</template>
<script setup lang="ts">
......@@ -57,94 +57,100 @@ const deleteMode = ref('2')
const dialogVisible = ref(false)
const mode = ref('1')
const tableData = ref([
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
}
{
number: '1',
userCount: 'admin',
userName: '管理员',
userRemark: '-',
userPassword: '123456',
createTime: '2025-01-01 00:00:00',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
},
{
name: '1',
}
])
const pageObj = ref({
total: 10,
pageSize: 10,
pageNo: 1
total: 10,
pageSize: 10,
pageNo: 1
})
const handleDetails = (row: any) => {
mode.value = '2'
// userCount.value = row.name
// userName.value = row.name
// userRemark.value = row.name
// userPassword.value = row.name
dialogVisible.value = true
console.log(row);
mode.value = '2'
// userCount.value = row.name
// userName.value = row.name
// userRemark.value = row.name
// userPassword.value = row.name
dialogVisible.value = true
console.log(row);
}
const handleConfirm = (row: any) => {
showDeleteDialog.value = true
showDeleteDialog.value = true
}
const getData = () => {
console.log('getData');
console.log('getData');
}
const handleDeleteConfirm = () => {
}
const openAddUserDialog = () => {
mode.value = '1'
dialogVisible.value = true
mode.value = '1'
dialogVisible.value = true
}
onMounted(()=>{
console.log('系统管理');
onMounted(() => {
console.log('系统管理');
})
</script>
<style scoped>
/* 去除按钮边框 */
.el-button:focus {
outline: none;
outline: none;
}
</style>
<style>
/* 修改弹窗样式 */
.el-dialog {
background-image: url("@/assets/picture/dialog1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url("@/assets/picture/dialog1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
.el-dialog__title {
color: #ffffff;
}
.el-dialog__title {
color: #ffffff;
}
}
/* 修改el输入框的样式 */
.el-input__wrapper {
background-color: #1d5484;
box-shadow: none;
background-color: #1d5484;
box-shadow: none;
}
</style>
src/views/os-taskInformation/components/addTaskDialog.vue
<template>
<el-dialog v-model="currentVisible" :title="currentMode === '1' ? '新增' : '修改'" width="610" center align-center @close="handleClose" draggable>
<el-form :inline="true" v-if="currentMode === '1'">
<el-form-item label="任务名称:">
<el-input v-model="taskName" placeholder="请输入任务名称" />
</el-form-item>
<el-form-item label="执行时间:">
<el-input v-model="taskFrequency" placeholder="请输入执行时间" />
</el-form-item>
</el-form>
<div class="m-t-4">
</div>
<el-form :inline="true">
<el-form-item label="所属爬虫:">
<el-select v-model="spiderTypeValue" placeholder="请选择爬虫类型" style="width: 183px">
<el-option v-for="item in spiderTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="执行频率:">
<el-input v-model="taskFrequency" placeholder="请输入执行频率" />
</el-form-item>
</el-form>
<div class="m-t-4">
</div>
<el-form :inline="true">
<el-form-item label="启用/停止:">
<el-switch v-model="taskSwitchValue" class="ml-2"
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="handleConfirm">
确定
</el-button>
</div>
</template>
</el-dialog>
<el-dialog v-model="currentVisible" :title="currentMode === '1' ? '新增' : '修改'" width="610" center align-center
@close="handleClose" draggable>
<el-form :inline="true" v-if="currentMode === '1'">
<el-form-item label="任务名称:">
<el-input v-model="taskName" placeholder="请输入任务名称" />
</el-form-item>
<el-form-item label="执行时间:">
<el-input v-model="taskFrequency" placeholder="请输入执行时间" />
</el-form-item>
</el-form>
<div class="m-t-4" />
<el-form :inline="true">
<el-form-item label="所属爬虫:">
<el-select v-model="spiderTypeValue" placeholder="请选择爬虫类型" style="width: 183px">
<el-option v-for="item in spiderTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="执行频率:">
<el-input v-model="taskFrequency" placeholder="请输入执行频率" />
</el-form-item>
</el-form>
<div class="m-t-4" />
<el-form :inline="true">
<el-form-item label="启用/停止:">
<el-switch v-model="taskSwitchValue" class="ml-2"
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="handleConfirm">
确定
</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { ref } from 'vue'
import { defineProps } from 'vue';
import { watch } from 'vue'
const props = defineProps({
dialogVisible: {
type: Boolean,
default: false
},
mode: {
type: String,
default: '1'
},
spiderType: {
type: String,
default: ''
},
frequency: {
type: String,
default: ''
},
taskStatus: {
type: Boolean,
default: false
}
dialogVisible: {
type: Boolean,
default: false
},
mode: {
type: String,
default: '1'
},
spiderType: {
type: String,
default: ''
},
frequency: {
type: String,
default: ''
},
taskStatus: {
type: Boolean,
default: false
}
})
// 向父组件传递dialog值
const emit = defineEmits(['update:dialogVisible', 'confirm'])
......@@ -77,69 +75,70 @@ const taskFrequency = ref('')
const taskSwitchValue = ref(false)
const spiderTypeValue = ref('')
const spiderTypeOptions = ref([
{
value: '选项1',
label: 'DSN爬虫'
},
{
value: '选项2',
label: 'ITU爬虫'
},
{
value: '选项3',
label: 'ST爬虫'
},
{
value: '选项1',
label: 'DSN爬虫'
},
{
value: '选项2',
label: 'ITU爬虫'
},
{
value: '选项3',
label: 'ST爬虫'
},
])
// 关闭的方法
const handleClose = () => {
currentVisible.value = false
currentVisible.value = false
}
// 确定的方法
const handleConfirm = () => {
emit('confirm')
currentVisible.value = false
emit('confirm')
currentVisible.value = false
}
// 监听props变化，同步给组件内部
watch(() => props.dialogVisible,
(newVal) => {
currentVisible.value = newVal
}
(newVal) => {
currentVisible.value = newVal
}
)
// 监听组件内部状态变化，同步给父组件，这样才能做到控制对话框组件的显隐
watch(() => currentVisible.value,
(newVal) => {
emit('update:dialogVisible', newVal)
}
(newVal) => {
emit('update:dialogVisible', newVal)
}
)
watch(() => props.mode,
(newVal) => {
currentMode.value = newVal
}
(newVal) => {
currentMode.value = newVal
}
)
</script>
<style>
/* 修改弹出框样式 */
.el-dialog {
background: transparent;
background-image: url("@/assets/picture/dialog1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
color: #ffffff;
background: transparent;
background-image: url("@/assets/picture/dialog1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
color: #ffffff;
.el-dialog__title {
color: #ffffff;
}
.el-dialog__title {
color: #ffffff;
}
}
/* 修改表单样式 */
.el-form {
.el-form-item__label {
color: #ffffff;
}
.el-form-item__label {
color: #ffffff;
}
}
</style>
src/views/os-taskInformation/components/taskCard.vue
<!-- 任务执行统计卡片组件 -->
<template>
<div class="taskCard p-7" v-for="i in options" :key="i.value">
<div class="flex justify-center">
<el-form-item>
<span class="titleStyle">任务名称</span>
</el-form-item>
</div>
<div class="flex justify-center">
<el-form-item>
<el-button type="primary" @click="editTask" class="editButton">编辑</el-button>
<el-button type="success">执行记录 </el-button>
<el-button type="danger" @click="deleteTask">删除</el-button>
</el-form-item>
</div>
<div class="wordStyle flex justify-center">
<el-form-item>
<el-space>
<span class="wordStyle">启用/停止: </span>
<el-switch v-model="taskSwitch" />
<span class="wordStyle">执行频率: {{ successTask }} </span>
</el-space>
</el-form-item>
</div>
<div class="wordStyle flex justify-center">
<el-form-item>
<el-space>
<span class="wordStyle">执行次数: {{ failTask }} 个; </span>
<span class="wordStyle">成功次数: {{ failTask }} 个</span>
</el-space>
</el-form-item>
</div>
<div class="wordStyle flex justify-center">
<el-form-item>
<el-space>
<span class="wordStyle">失败次数: {{ failTask }} 个; </span>
<span class="wordStyle">异常记录: {{ unusualTask }} 个</span>
</el-space>
</el-form-item>
</div>
</div>
<div class="taskCard p-7" v-for="i in options" :key="i.value">
<div class="flex justify-center">
<el-form-item>
<span class="titleStyle">任务名称</span>
</el-form-item>
</div>
<div class="flex justify-center">
<el-form-item>
<el-button type="primary" @click="editTask" class="editButton">编辑</el-button>
<el-button type="success">执行记录 </el-button>
<el-button type="danger" @click="deleteTask">删除</el-button>
</el-form-item>
</div>
<div class="wordStyle flex justify-center">
<el-form-item>
<el-space>
<span class="wordStyle">启用/停止: </span>
<el-switch v-model="taskSwitch" />
<span class="wordStyle">执行频率: {{ successTask }} </span>
</el-space>
</el-form-item>
</div>
<div class="wordStyle flex justify-center">
<el-form-item>
<el-space>
<span class="wordStyle">执行次数: {{ failTask }} 个; </span>
<span class="wordStyle">成功次数: {{ failTask }} 个</span>
</el-space>
</el-form-item>
</div>
<div class="wordStyle flex justify-center">
<el-form-item>
<el-space>
<span class="wordStyle">失败次数: {{ failTask }} 个; </span>
<span class="wordStyle">异常记录: {{ unusualTask }} 个</span>
</el-space>
</el-form-item>
</div>
</div>
<deleteDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleDeleteConfirm" @mode="deleteMode"/>
<addTaskDialog v-model:dialogVisible="showTaskDialog" @confirm="handleEdit" :mode="editMode" />
<deleteDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleDeleteConfirm" @mode="deleteMode" />
<addTaskDialog v-model:dialogVisible="showTaskDialog" @confirm="handleEdit" :mode="editMode" />
</template>
......@@ -51,18 +50,18 @@ import { ref } from 'vue'
import deleteDialog from '@/components/Delete/index.vue'
import addTaskDialog from './addTaskDialog.vue'
defineProps({
successTask: {
type: String,
default: ''
},
failTask: {
type: String,
default: ''
},
unusualTask: {
type: String,
default: ''
}
successTask: {
type: String,
default: ''
},
failTask: {
type: String,
default: ''
},
unusualTask: {
type: String,
default: ''
}
})
const editMode = ref('')
const deleteMode = ref('1')
......@@ -70,39 +69,39 @@ const showDeleteDialog = ref(false)
const showTaskDialog = ref(false)
const taskSwitch = ref(false)
const options = [
{
value: 'year',
label: '近一年',
},
{
value: 'month',
label: '近一月',
},
{
value: 'week',
label: '近一周',
},
{
value: 'day',
label: '近一日',
},
{
value: 'year',
label: '近一年',
},
{
value: 'month',
label: '近一月',
},
{
value: 'year',
label: '近一年',
},
{
value: 'month',
label: '近一月',
},
{
value: 'week',
label: '近一周',
},
{
value: 'day',
label: '近一日',
},
{
value: 'year',
label: '近一年',
},
{
value: 'month',
label: '近一月',
},
]
const deleteTask = () => {
deleteMode.value = '1'
showDeleteDialog.value = true
deleteMode.value = '1'
showDeleteDialog.value = true
}
const editTask = () => {
editMode.value = '2'
showTaskDialog.value = true
editMode.value = '2'
showTaskDialog.value = true
}
const handleEdit = () => {
......@@ -120,29 +119,30 @@ const handleDeleteConfirm = () => {
// }
// 任务卡片样式
.taskCard {
background-image: url("@/assets/picture/box2.png");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-bottom: 20px;
width: 380px;
font-size: 20px;
height: 100%;
border-radius: 7px;
background-image: url("@/assets/picture/box2.png");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-bottom: 20px;
width: 380px;
font-size: 20px;
height: 100%;
border-radius: 7px;
.titleStyle {
font-size: 22px;
margin-top: -5px;
color: #FFFFFF;
}
.titleStyle {
font-size: 22px;
margin-top: -5px;
color: #FFFFFF;
}
.wordStyle {
font-size: 16px;
color: #FFFFFF;
.wordStyle {
font-size: 16px;
color: #FFFFFF;
}
}
}
// 去除按钮边框
.el-button:focus {
outline: none;
outline: none;
}
</style>
src/views/os-taskInformation/index.vue
<template>
<div>
<div class="m-t-7">
</div>
<div class="m-t-7" />
<div class="text-left p-6 toolbarStyle">
<div class="formStyle">
<el-form inline>
<el-form-item>
<el-text class="mx-1">所属爬虫:</el-text>
</el-form-item>
<el-form-item>
<div>
<el-select v-model="taskValue" placeholder="请选择" style="width: 220px">
<el-option v-for="item in taskOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</div>
</el-form-item>
<el-form-item>
<el-text class="mx-1">任务名称:</el-text>
</el-form-item>
<el-form-item>
<el-input v-model="taskValue" placeholder="请输入" style="width: 220px" />
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">查询</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary" @click="openTaskDialog">新建任务</el-button>
</el-space>
</el-form-item>
</el-form>
</div>
<div class="formStyle">
<el-form inline>
<el-form-item>
<el-text class="mx-1">所属爬虫:</el-text>
</el-form-item>
<el-form-item>
<div>
<el-select v-model="taskValue" placeholder="请选择" style="width: 220px">
<el-option v-for="item in taskOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</el-form-item>
<el-form-item>
<el-text class="mx-1">任务名称:</el-text>
</el-form-item>
<el-form-item>
<el-input v-model="taskValue" placeholder="请输入" style="width: 220px" />
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">查询</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary" @click="openTaskDialog">新建任务</el-button>
</el-space>
</el-form-item>
</el-form>
</div>
</div>
<div class="cardStyle">
<taskCard successTask="100" failTask="10" unusualTask="1" />
<div class="pagination w-full flex flex-row-reverse pr-18 m-t-0">
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
@pagination="getData" />
</div>
<taskCard successTask="100" failTask="10" unusualTask="1" />
<div class="pagination w-full flex flex-row-reverse pr-18 m-t-0">
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
@pagination="getData" />
</div>
</div>
<!-- 添加任务对话框组件 -->
<addTaskDialog v-model:dialogVisible="showDialog" @confirm="handleDeleteConfirm" :mode="editMode" />
......@@ -57,108 +55,112 @@ import addTaskDialog from './components/addTaskDialog.vue'
const editMode = ref('1')
const taskValue = ref('')
const taskOptions = [
{
value: 'task1',
label: 'sk网',
},
{
value: 'task2',
label: 'nasa网',
},
{
value: 'task3',
label: '网',
},
{
value: 'task1',
label: 'sk网',
},
{
value: 'task2',
label: 'nasa网',
},
{
value: 'task3',
label: '网',
},
]
const pageObj = ref({
total: 10,
pageSize: 10,
pageNo: 1
total: 10,
pageSize: 10,
pageNo: 1
})
const getData = () => {
console.log('getData');
console.log('getData');
}
// 控制对话框显示/隐藏的状态变量
const showDialog = ref(false)
// 处理删除确认
const handleDeleteConfirm = () => {
console.log('用户确认删除')
// 在这里执行实际的删除操作
console.log('用户确认删除')
// 在这里执行实际的删除操作
}
const openTaskDialog = () => {
showDialog.value = true
showDialog.value = true
}
onMounted(()=>{
console.log('任务信息');
onMounted(() => {
console.log('任务信息');
})
</script>
<style scoped>
/* 卡片样式 */
.cardStyle {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-top: 1.5%;
padding: 8px;
height: 26vh;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-top: 1.5%;
padding: 8px;
height: 26vh;
}
/* 文本样式 */
.el-text {
color: #FFFFFF;
color: #FFFFFF;
}
/* 工具栏样式 */
.toolbarStyle {
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* 表单样式 */
.formStyle {
display: flex;
justify-content: space-around;
margin-top: 1%;
padding: 3px;
display: flex;
justify-content: space-around;
margin-top: 1%;
padding: 3px;
}
</style>
<style>
/* 修改el选择器的样式 */
.el-select__wrapper {
background-color: #1d5484;
box-shadow: none;
background-color: #1d5484;
box-shadow: none;
}
/* 删除el选择器选中时的边框 */
.is-hovering {
box-shadow: none !important;
box-shadow: none !important;
}
/* 修改el输入框的样式 */
.el-input__wrapper {
background-color: #1d5484;
box-shadow: none;
background-color: #1d5484;
box-shadow: none;
}
/* 修改el下拉框的背景颜色 */
.el-select-dropdown {
background-color: #1d5484;
background-color: #1d5484;
}
/* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item {
color: #FFFFFF;
color: #FFFFFF;
}
/* 修改el下拉框选项选中时的文字颜色 */
.el-select-dropdown__item:hover {
color: #409eff;
color: #409eff;
}
/* 去除按钮边框 */
.el-button:focus {
outline: none;
outline: none;
}
</style>
\ No newline at end of file
src/views/os-taskRecord/index.vue
<template>
<div>
<div class="m-t-7" />
<div class="text-left p-6 toolbarStyle">
<div class="formStyle">
<el-form inline>
<el-form-item>
<el-text class="mx-1">任务名称:</el-text>
</el-form-item>
<el-form-item>
<div>
<el-select v-model="taskValue" placeholder="请选择" style="width: 220px">
<el-option v-for="item in taskOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</div>
</el-form-item>
<el-form-item>
<el-text class="mx-1">时间:</el-text>
</el-form-item>
<el-form-item>
<el-date-picker v-model="timeValue" type="datetimerange" start-placeholder="Start date"
end-placeholder="End date" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss" />
</el-form-item>
<el-form-item>
<el-text class="mx-1">调度状态:</el-text>
</el-form-item>
<el-form-item>
<div>
<el-select v-model="taskValue" placeholder="请选择" style="width: 220px">
<el-option v-for="item in taskOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</div>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">查询</el-button>
</el-space>
</el-form-item>
</el-form>
</div>
</div>
<div class="m-t-10">
</div>
<div>
<el-table :data="tableData" style="width: 100%" border :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="taskName" label="任务名称" show-overflow-tooltip />
<el-table-column property="scheduleMode" label="调度模式" show-overflow-tooltip />
<el-table-column property="scheduleStatus" label="调度状态" show-overflow-tooltip />
<el-table-column property="errorMessage" label="错误消息" show-overflow-tooltip />
<el-table-column property="runningStatus" label="运行状态" show-overflow-tooltip />
<el-table-column property="duration" label="持续时间" show-overflow-tooltip />
<el-table-column property="scheduleTime" label="调度时间" width="200" show-overflow-tooltip />
<el-table-column label="运行日志" width="120">
<template #default="scope">
<el-button size="small" plain type="primary" @click="handleDetails(scope.row)">
日志
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<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="backStyle" v-if="route.query.jump === 'yes'" @click="goToStatus">
</div>
<div class="m-t-7" />
<div class="text-left p-6 toolbarStyle">
<div class="formStyle">
<el-form inline>
<el-form-item>
<el-text class="mx-1">任务名称:</el-text>
</el-form-item>
<el-form-item>
<div>
<el-select v-model="taskValue" placeholder="请选择" style="width: 220px">
<el-option v-for="item in taskOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</el-form-item>
<el-form-item>
<el-text class="mx-1">时间:</el-text>
</el-form-item>
<el-form-item>
<el-date-picker v-model="timeValue" type="datetimerange" start-placeholder="Start date"
end-placeholder="End date" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss" />
</el-form-item>
<el-form-item>
<el-text class="mx-1">调度状态:</el-text>
</el-form-item>
<el-form-item>
<div>
<el-select v-model="taskValue" placeholder="请选择" style="width: 220px">
<el-option v-for="item in taskOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">查询</el-button>
</el-space>
</el-form-item>
</el-form>
</div>
</div>
<div class="m-t-10" />
<div>
<el-table :data="tableData" style="width: 100%" border :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="taskName" label="任务名称" show-overflow-tooltip />
<el-table-column property="scheduleMode" label="调度模式" show-overflow-tooltip />
<el-table-column property="scheduleStatus" label="调度状态" show-overflow-tooltip />
<el-table-column property="errorMessage" label="错误消息" show-overflow-tooltip />
<el-table-column property="runningStatus" label="运行状态" show-overflow-tooltip />
<el-table-column property="duration" label="持续时间" show-overflow-tooltip />
<el-table-column property="scheduleTime" label="调度时间" width="200" show-overflow-tooltip />
<el-table-column label="运行日志" width="120">
<template #default="scope">
<el-button size="small" plain type="primary" @click="handleDetails(scope.row)">
日志
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<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>
</template>
<script setup lang="ts">
......@@ -88,155 +82,155 @@ const router = useRouter()
const taskValue = ref('')
const timeValue = ref('')
const taskOptions = [
{
value: 'task1',
label: 'sk网',
},
{
value: 'task2',
label: 'nasa网',
},
{
value: 'task3',
label: '网',
},
{
value: 'task1',
label: 'sk网',
},
{
value: 'task2',
label: 'nasa网',
},
{
value: 'task3',
label: '网',
},
]
const tableData = ref([
{
number: '1',
taskName: 'dsn爬虫任务',
scheduleMode: '自动',
scheduleStatus: '自动',
errorMessage: '无',
runningStatus: '完成',
duration: '10s',
scheduleTime: '2023-05-13 10:00:00',
{
number: '1',
taskName: 'dsn爬虫任务',
scheduleMode: '自动',
scheduleStatus: '自动',
errorMessage: '无',
runningStatus: '完成',
duration: '10s',
scheduleTime: '2023-05-13 10:00:00',
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
}, {
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
}
, {
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
}
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
}, {
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
}
, {
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
},
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
status: 0
}
])
const pageObj = ref({
total: 10,
pageSize: 10,
pageNo: 1
total: 10,
pageSize: 10,
pageNo: 1
})
const handleDetails = (row: any) => {
console.log(row);
router.push({
path: '/os-log/list',
query: {
id: row.id
}
})
console.log(row);
router.push({
path: '/os-log/list',
query: {
id: row.id
}
})
}
const goToStatus = () => {
router.push({
path: '/osStatus/list',
})
router.push({
path: '/osStatus/list',
})
}
const getData = () => {
console.log('getData');
console.log('getData');
}
onMounted(() => {
console.log('任务执行记录');
console.log('任务执行记录');
})
</script>
......@@ -244,73 +238,73 @@ onMounted(() => {
<style scoped>
/* 工具栏样式 */
.toolbarStyle {
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* 表格样式 */
.formStyle {
display: flex;
justify-content: space-around;
padding: 3px;
display: flex;
justify-content: space-around;
padding: 3px;
}
/* 文字样式 */
.el-text {
color: #FFFFFF;
color: #FFFFFF;
}
.backStyle {
background-image: url("@/assets/picture/back.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 5vh;
width: 5%;
display: flex;
margin-left: 0.8%;
background-image: url("@/assets/picture/back.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 5vh;
width: 5%;
display: flex;
margin-left: 0.8%;
}
</style>
<style>
/* 修改el选择器的样式 */
.el-select__wrapper {
background-color: #1d5484;
box-shadow: none;
background-color: #1d5484;
box-shadow: none;
}
/* 删除el选择器选中时的边框 */
.is-hovering {
box-shadow: none !important;
box-shadow: none !important;
}
/* 修改el输入框的样式 */
.el-input__wrapper {
background-color: #1d5484;
box-shadow: none;
background-color: #1d5484;
box-shadow: none;
}
/* 修改el下拉框的背景颜色 */
.el-select-dropdown {
background-color: #1d5484;
background-color: #1d5484;
}
/* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item {
color: #FFFFFF;
color: #FFFFFF;
}
/* 修改el下拉框选项选中时的文字颜色 */
.el-select-dropdown__item:hover {
color: #409eff;
color: #409eff;
}
/* 修改el按钮的边框为none */
.el-button:focus {
outline: none;
outline: none;
}
/* 修改el日期选择器的边框为none */
.el-date-editor {
--el-input-border-color: none
--el-input-border-color: none
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment