Skip to content

F
fk-spider-web
Commit e869180c by yzh
Options

feat:完成了数据展示的所有对话框

parent d6d735c4
Showing with 504 additions and 29 deletions
src/components/Export/index.vue 0 → 100644
<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>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { defineProps } from 'vue';
const props = defineProps({
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
}
// 关闭弹窗的方法
const close = () => {
exportDialogVisible.value = false
}
// 监听父组件传过来的值
watch(() => props.dialogVisible,
(newVal) => {
exportDialogVisible.value = newVal
}
)
// 监听组件内的值并向父组件更新
watch(() => exportDialogVisible.value,
(newVal) => {
emit('update:dialogVisible', newVal)
}
)
</script>
\ No newline at end of file
src/views/os-dataDisplay/components/dsnData/dsnDataTab.vue
...@@ -27,12 +27,12 @@ ...@@ -27,12 +27,12 @@
<br></br> <br></br>
<el-form-item> <el-form-item>
<el-space> <el-space>
<el-button type="primary">导出最近</el-button> <el-button type="primary" @click="handleExport">导出最近</el-button>
</el-space> </el-space>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-space> <el-space>
<el-button type="primary">导出选中</el-button> <el-button type="primary" @click="handleExport">导出选中</el-button>
</el-space> </el-space>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
...@@ -81,14 +81,171 @@ ...@@ -81,14 +81,171 @@
</div> </div>
</div> </div>
<div class="detailForm">
<el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose"
draggable>
<template #header>
<div class="text-center font-size-8">
详情
</div>
</template>
<el-form label-width="94px" size="small" class="px-4">
<div>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="目标名称:" label-position="left">
<el-input v-model="targetName" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="距离(km):" label-position="left">
<el-input v-model="distance" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="往返光时:" label-position="left">
<el-input v-model="roundTripTime" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="站点名称:" label-position="left">
<el-input v-model="stationName" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="目标方位:" label-position="left">
<el-input v-model="targetAzimuth" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="目标俯仰:" label-position="left">
<el-input v-model="targetElevation" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="目标距离:" label-position="left">
<el-input v-model="targetDistance" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="风速(km/hr):" label-position="left">
<el-input v-model="windSpeed" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="上行信号来源:" label-position="left">
<el-input v-model="upSignalSource" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="上行信号频段:" label-position="left">
<el-input v-model="upSignalFrequencyBand" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="上行发射功率:" label-position="left">
<el-input v-model="upSignalLaunchPower" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="下行信号来源:" label-position="left">
<el-input v-model="downSignalSignalSource" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="下行信号频段:" label-position="left">
<el-input v-model="downSignalFrequencyBand" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="下行接收功率:" label-position="left">
<el-input v-model="downSignalReceptionPower" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="数据时间:" label-position="left">
<el-input v-model="dataTime" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="记录时间:" label-position="left">
<el-input v-model="recordTime" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="是否暂停使用:" label-position="left">
<el-input v-model="isSuspended" />
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</el-dialog>
</div>
<exportDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleExportConfirm" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import Pagination from '@/components/pagination/index.vue' import Pagination from '@/components/pagination/index.vue'
import exportDialog from '@/components/Export/index.vue'
const showDeleteDialog = ref(false)
const timeValue = ref('') const timeValue = ref('')
const size = ref('DSN数据') const detailVisibleValue = ref(false)
const sizeOptions = ['DSN数据', '新闻'] // 目标名称
const targetName = ref('')
// 距离(km)
const distance = ref('')
// 往返光时
const roundTripTime = ref('')
// 站点名称
const stationName = ref('')
// 目标方位
const targetAzimuth = ref('')
// 目标俯仰
const targetElevation = ref('')
// 目标距离
const targetDistance = ref('')
// 风速(km/hr)
const windSpeed = ref('')
// 上行信号来源
const upSignalSource = ref('')
// 上行信号频段
const upSignalFrequencyBand = ref('')
// 上行发射功率
const upSignalLaunchPower = ref('')
// 下行信号来源
const downSignalSignalSource = ref('')
// 下行信号频段
const downSignalFrequencyBand = ref('')
// 下行接收功率
const downSignalReceptionPower = ref('')
// 数据时间
const dataTime = ref('')
// 记录时间
const recordTime = ref('')
// 是否暂停使用
const isSuspended = ref('')
const tableData = ref([ const tableData = ref([
{ {
name: '1', name: '1',
...@@ -129,18 +286,36 @@ const pageObj = ref({ ...@@ -129,18 +286,36 @@ const pageObj = ref({
}) })
const handleDetails = (row: any) => { const handleDetails = (row: any) => {
console.log(row); console.log(row);
} detailVisibleValue.value = true
const handleConfirm = (row: any) => {
console.log(row);
} }
const getData = () => { const getData = () => {
console.log('getData'); console.log('getData');
} }
const handleClose = () => {
detailVisibleValue.value = false
}
const handleExportConfirm = () => {
}
const handleExport = () => {
showDeleteDialog.value = true
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
// 调整表单项间距
.detailForm {
.el-dialog-title {
font-size: 180px;
}
.el-form-item {
margin-bottom: 30px !important;
}
}
/* 工具栏样式 */ /* 工具栏样式 */
.toolbarStyle { .toolbarStyle {
background-image: url("@/assets/picture/box3.png"); background-image: url("@/assets/picture/box3.png");
......
src/views/os-dataDisplay/components/dsnData/newsDataTab.vue
...@@ -20,12 +20,12 @@ ...@@ -20,12 +20,12 @@
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-space> <el-space>
<el-button type="primary">导出最近</el-button> <el-button type="primary" @click="handleExport">导出最近</el-button>
</el-space> </el-space>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-space> <el-space>
<el-button type="primary">导出选中</el-button> <el-button type="primary" @click="handleExport">导出选中</el-button>
</el-space> </el-space>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
...@@ -63,14 +63,76 @@ ...@@ -63,14 +63,76 @@
</div> </div>
</div> </div>
<div class="detailForm">
<el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose"
draggable>
<template #header>
<div class="text-center font-size-8">
详情
</div>
</template>
<el-form label-width="70px" size="small" class="px-4">
<div>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="新闻标题:" label-position="left">
<el-input v-model="newsTitle" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="新闻来源:" label-position="left">
<el-input v-model="newsSource" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="新闻日期:" label-position="left">
<el-input v-model="newsDate" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="获取时间:" label-position="left">
<el-select placeholder=" ">
<el-input v-model="newsGetTime" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="新闻内容:" label-position="top">
<el-input type="textarea" :rows="12" v-model="newsContent" />
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</el-dialog>
</div>
<exportDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleExportConfirm" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import Pagination from '@/components/pagination/index.vue' import Pagination from '@/components/pagination/index.vue'
import exportDialog from '@/components/Export/index.vue'
const showDeleteDialog = ref(false)
const timeValue = ref('') const timeValue = ref('')
const size = ref('DSN数据') const detailVisibleValue = ref(false)
const sizeOptions = ['DSN数据', '新闻'] // 新闻标题
const newsTitle = ref('')
// 新闻来源
const newsSource = ref('')
// 新闻日期
const newsDate = ref('')
// 获取时间
const newsGetTime = ref('')
// 新闻内容
const newsContent = ref('')
const tableData = ref([ const tableData = ref([
{ {
name: '1', name: '1',
...@@ -111,6 +173,7 @@ const pageObj = ref({ ...@@ -111,6 +173,7 @@ const pageObj = ref({
}) })
const handleDetails = (row: any) => { const handleDetails = (row: any) => {
console.log(row); console.log(row);
detailVisibleValue.value = true
} }
const handleConfirm = (row: any) => { const handleConfirm = (row: any) => {
...@@ -120,9 +183,29 @@ const handleConfirm = (row: any) => { ...@@ -120,9 +183,29 @@ const handleConfirm = (row: any) => {
const getData = () => { const getData = () => {
console.log('getData'); console.log('getData');
} }
const handleClose = () => {
detailVisibleValue.value = false
}
const handleExportConfirm = () => {
}
const handleExport = () => {
showDeleteDialog.value = true
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
// 调整表单项间距
.detailForm {
.el-dialog-title {
font-size: 180px;
}
.el-form-item {
margin-bottom: 30px !important;
}
}
/* 工具栏样式 */ /* 工具栏样式 */
.toolbarStyle { .toolbarStyle {
background-image: url("@/assets/picture/box3.png"); background-image: url("@/assets/picture/box3.png");
......
src/views/os-dataDisplay/components/stDataTab.vue
...@@ -33,12 +33,12 @@ ...@@ -33,12 +33,12 @@
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-space> <el-space>
<el-button type="primary">导出最近</el-button> <el-button type="primary" @click="handleExport">导出最近</el-button>
</el-space> </el-space>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-space> <el-space>
<el-button type="primary">导出选中</el-button> <el-button type="primary" @click="handleExport">导出选中</el-button>
</el-space> </el-space>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
...@@ -86,14 +86,155 @@ ...@@ -86,14 +86,155 @@
</div> </div>
</div> </div>
<div class="detailForm">
<el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose"
draggable>
<template #header>
<div class="text-center font-size-8">
详情
</div>
</template>
<el-form label-width="70px" size="small" class="px-4">
<div>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="NoradCatID:" label-position="left">
<el-input v-model="NoradCatID" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="目标名称:" label-position="left">
<el-input v-model="targetName" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="INTLDES:" label-position="left">
<el-input v-model="intleds" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="类型:" label-position="left">
<el-input v-model="type" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="运行时间:" label-position="left">
<el-input v-model="workTime" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="失效时间:" label-position="left">
<el-input v-model="failTime" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="记录时间:" label-position="left">
<el-input v-model="recordTime" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属国家:" label-position="left">
<el-input v-model="belongCountry" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="近地点:" label-position="left">
<el-input v-model="perigee" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="远地点:" label-position="left">
<el-input v-model="apogee" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="周期(min):" label-position="left">
<el-input v-model="period" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="INCL:" label-position="left">
<el-input v-model="incl" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="RCS:" label-position="left">
<el-input v-model="rcs" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="SITE:" label-position="left">
<el-input v-model="site" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="TLE:" label-position="left">
<el-input type="textarea" :rows="3" v-model="tle" />
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</el-dialog>
</div>
<exportDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleExportConfirm" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import Pagination from '@/components/pagination/index.vue' import Pagination from '@/components/pagination/index.vue'
import exportDialog from '@/components/Export/index.vue'
const showDeleteDialog = ref(false)
const timeValue = ref('') const timeValue = ref('')
const size = ref('综合数据') const detailVisibleValue = ref(false)
const sizeOptions = ['综合数据', 'DSN数据', 'ITU数据', 'ST数据'] // NoradCatID
const NoradCatID = ref('')
// 目标名称
const targetName = ref('')
// INTLDES
const intleds = ref('')
// 类型
const type = ref('')
// 运行时间
const workTime = ref('')
// 失效时间
const failTime = ref('')
// 记录时间
const recordTime = ref('')
// 所属国家
const belongCountry = ref('')
// 近地点
const perigee = ref('')
// 远地点
const apogee = ref('')
// 周期
const period = ref('')
// INCL
const incl = ref('')
// RCS
const rcs = ref('')
// SITE
const site = ref('')
// TLE
const tle = ref('')
const tableData = ref([ const tableData = ref([
{ {
name: '1', name: '1',
...@@ -134,18 +275,33 @@ const pageObj = ref({ ...@@ -134,18 +275,33 @@ const pageObj = ref({
}) })
const handleDetails = (row: any) => { const handleDetails = (row: any) => {
console.log(row); console.log(row);
detailVisibleValue.value = true
} }
const handleConfirm = (row: any) => {
console.log(row);
}
const getData = () => { const getData = () => {
console.log('getData'); console.log('getData');
} }
const handleClose = () => {
detailVisibleValue.value = false
}
const handleExportConfirm = () => {
}
const handleExport = () => {
showDeleteDialog.value = true
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
// 调整表单项间距
.detailForm {
.el-dialog-title {
font-size: 180px;
}
.el-form-item {
margin-bottom: 30px !important;
}
}
/* 工具栏样式 */ /* 工具栏样式 */
.toolbarStyle { .toolbarStyle {
background-image: url("@/assets/picture/box3.png"); background-image: url("@/assets/picture/box3.png");
......
src/views/os-dataDisplay/index.vue
...@@ -4,19 +4,17 @@ ...@@ -4,19 +4,17 @@
<el-segmented v-model="mode" :options="sizeOptions" style="margin-bottom: 1rem" size="large" /> <el-segmented v-model="mode" :options="sizeOptions" style="margin-bottom: 1rem" size="large" />
</div> </div>
</div> </div>
<!-- 综合数据页面组件 -->
<allDataTab v-if="mode === '综合数据'"> <allDataTab v-if="mode === '综合数据'">
</allDataTab> </allDataTab>
<!-- DSN数据页面组件 -->
<dsnDataTab v-if="mode === 'DSN数据'"> <dsnDataTab v-if="mode === 'DSN数据'">
</dsnDataTab> </dsnDataTab>
<!-- ITU数据页面组件 -->
<ituDataTab v-if="mode === 'ITU数据'"> <ituDataTab v-if="mode === 'ITU数据'">
</ituDataTab> </ituDataTab>
<!-- ST数据页面组件 -->
<stDataTab v-if="mode === 'ST数据'"> <stDataTab v-if="mode === 'ST数据'">
</stDataTab> </stDataTab>
......
src/views/os-system/index.vue
...@@ -33,7 +33,9 @@ ...@@ -33,7 +33,9 @@
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize" <Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
@pagination="getData" /> @pagination="getData" />
</div> </div>
<!-- 删除弹窗组件 -->
<deleteDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleDeleteConfirm" @mode="deleteMode" /> <deleteDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleDeleteConfirm" @mode="deleteMode" />
<!-- 创建用户弹窗组件 -->
<addUserDialog v-model:dialogVisible="dialogVisible" :mode="mode" :user-count="userCount" :user-name="userName" <addUserDialog v-model:dialogVisible="dialogVisible" :mode="mode" :user-count="userCount" :user-name="userName"
:user-remark="userRemark" :user-password="userPassword " @confirm="handleConfirm" /> :user-remark="userRemark" :user-password="userPassword " @confirm="handleConfirm" />
</template> </template>
...@@ -134,4 +136,9 @@ const openAddUserDialog = () => { ...@@ -134,4 +136,9 @@ const openAddUserDialog = () => {
color: #ffffff; color: #ffffff;
} }
} }
/* 修改el输入框的样式 */
.el-input__wrapper {
background-color: #1d5484;
box-shadow: none;
}
</style> </style>
src/views/os-taskInformation/components/addTaskDialog.vue
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, ref } from 'vue' import { ref } from 'vue'
import { defineProps } from 'vue'; import { defineProps } from 'vue';
import { watch } from 'vue' import { watch } from 'vue'
......
src/views/os-taskInformation/index.vue
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
@pagination="getData" /> @pagination="getData" />
</div> </div>
</div> </div>
<!-- 添加任务对话框组件 -->
<addTaskDialog v-model:dialogVisible="showDialog" @confirm="handleDeleteConfirm" :mode="editMode" /> <addTaskDialog v-model:dialogVisible="showDialog" @confirm="handleDeleteConfirm" :mode="editMode" />
</template> </template>
......
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