Skip to content

F
fk-spider-web
Commit d1356d4d by liucan
Options

feat:优化页面显示效果

parent 1838255a
Showing with 157 additions and 89 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>
import { ref, watch } from 'vue'
import { defineProps } from 'vue';
import { getUserList, addUser, deleteUser, updateUser, batchDeleteUser } from '@/api/user.ts'
import { DeleteMode } from '@/components/Delete/enum.ts'
import { ref, watch } from "vue";
import { defineProps } from "vue";
import { deleteUser, batchDeleteUser } from "@/api/user.ts";
import { DeleteMode } from "@/components/Delete/enum.ts";
interface deleteDialogPropType {
dialogVisible: boolean,
deleteMode: DeleteMode,
id: number,
ids: number[],
dialogVisible: boolean;
deleteMode: DeleteMode;
id: number;
ids: number[];
}
const props = defineProps<deleteDialogPropType>()
const emit = defineEmits(['update:dialogVisible', 'confirm', 'getUserList', 'update:deleteMode'])
const deleteDialogVisible = ref(props.dialogVisible)
const deleteMode = ref(props.deleteMode)
const props = defineProps<deleteDialogPropType>();
const emit = defineEmits(["update:dialogVisible", "confirm", "getUserList", "update:deleteMode"]);
const deleteDialogVisible = ref(props.dialogVisible);
const deleteMode = ref(props.deleteMode);
// 删除方法
const handleDelelte = async () => {
if (props.deleteMode == DeleteMode.SINGLE_DELETE) {
await deleteUser({ id: props.id })
emit('getUserList')
deleteDialogVisible.value = false
}
else if (props.deleteMode == DeleteMode.BATCH_DELETE) {
console.log(props.ids);
await batchDeleteUser({ ids: props.ids })
emit('getUserList')
deleteDialogVisible.value = false
}
}
if (props.deleteMode == DeleteMode.SINGLE_DELETE) {
await deleteUser({ id: props.id });
emit("getUserList");
deleteDialogVisible.value = false;
} else if (props.deleteMode == DeleteMode.BATCH_DELETE) {
console.log(props.ids);
await batchDeleteUser({ ids: props.ids });
emit("getUserList");
deleteDialogVisible.value = false;
}
};
// 关闭弹窗的方法
const close = () => {
deleteDialogVisible.value = false
}
deleteDialogVisible.value = false;
};
// 监听父组件传过来的值
watch(() => props.dialogVisible,
(newVal) => {
deleteDialogVisible.value = newVal
}
)
watch(
() => props.dialogVisible,
(newVal) => {
deleteDialogVisible.value = newVal;
}
);
// 监听组件内的值并向父组件更新
watch(() => deleteDialogVisible.value,
(newVal) => {
emit('update:dialogVisible', newVal)
}
)
watch(
() => deleteDialogVisible.value,
(newVal) => {
emit("update:dialogVisible", newVal);
}
);
// 监听父组件传过来的值
watch(() => props.deleteMode,
(newVal) => {
deleteMode.value = newVal
}
)
watch(
() => props.deleteMode,
(newVal) => {
deleteMode.value = newVal;
}
);
// 监听组件内的值并向父组件更新
watch(() => deleteMode.value,
(newVal) => {
emit('update:deleteMode', newVal)
}
)
</script>
\ No newline at end of file
watch(
() => deleteMode.value,
(newVal) => {
emit("update:deleteMode", newVal);
}
);
</script>
src/views/os-dataDisplay/components/dsnData/dsnDataTab.vue
......@@ -330,6 +330,15 @@ onMounted(async () => {
.item {
color: #eee;
}
.table-content {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(8px);
border: 1px solid rgba(78, 237, 255, 0.2);
box-shadow: 0 0 15px rgba(78, 237, 255, 0.1);
border-radius: 8px;
padding: 10px !important;
}
</style>
<style>
......
src/views/os-dataDisplay/components/esDataTab.vue
......@@ -727,6 +727,15 @@ onMounted(() => {
display: flex;
gap: 10px;
}
.table-content {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(8px);
border: 1px solid rgba(78, 237, 255, 0.2);
box-shadow: 0 0 15px rgba(78, 237, 255, 0.1);
border-radius: 8px;
padding: 10px !important;
}
</style>
<style>
......
src/views/os-dataDisplay/components/ituDataTab.vue
......@@ -374,9 +374,6 @@ onMounted(() => {
}
// 调整表单项间距
.detailForm {
// background-image: url("@/assets/picture/dialog1.png");
// background-size: 100% 100%;
// background-repeat: no-repeat;
.el-dialog-title {
font-size: 180px;
}
......@@ -394,7 +391,12 @@ onMounted(() => {
}
.itu-table {
padding: 0 10px;
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(8px);
border: 1px solid rgba(78, 237, 255, 0.2);
box-shadow: 0 0 15px rgba(78, 237, 255, 0.1);
border-radius: 8px;
padding: 10px;
}
/* 表格样式 */
......@@ -428,7 +430,7 @@ onMounted(() => {
}
.item-title {
color: #b0dfff;
color: #fff;
}
.item {
......
src/views/os-dataDisplay/components/stDataTab.vue
......@@ -141,17 +141,35 @@
<el-divider style="margin: 0"></el-divider>
<el-row>
<el-col>
<div class="info-item">
<span class="item-title">TLE第一行数据：</span>
<span class="item">{{ tleLine0 }}</span>
<div class="info-item-tle">
<el-row>
<el-col :span="4">
<span class="item-title">TLE第一行数据：</span>
</el-col>
<el-col :span="20">
<span class="item">{{ tleLine0 }}</span>
</el-col>
</el-row>
</div>
<div class="info-item">
<span class="item-title">TLE第二行数据：</span>
<span class="item">{{ tleLine1 }}</span>
<div class="info-item-tle">
<el-row>
<el-col :span="4">
<span class="item-title">TLE第二行数据：</span>
</el-col>
<el-col :span="20">
<span class="item">{{ tleLine1 }}</span>
</el-col>
</el-row>
</div>
<div class="info-item">
<span class="item-title">TLE第三行数据：</span>
<span class="item">{{ tleLine2 }}</span>
<div class="info-item-tle">
<el-row>
<el-col :span="4">
<span class="item-title">TLE第三行数据：</span>
</el-col>
<el-col :span="20">
<span class="item">{{ tleLine2 }}</span>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
......@@ -357,6 +375,19 @@ onMounted(() => {
justify-content: space-between;
}
.info-item-tle {
margin: 10px 0;
}
.table-content {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(8px);
border: 1px solid rgba(78, 237, 255, 0.2);
box-shadow: 0 0 15px rgba(78, 237, 255, 0.1);
border-radius: 8px;
padding: 10px !important;
}
.item-title {
color: #b0dfff;
}
......
src/views/os-spiderManager/index.vue
......@@ -25,14 +25,14 @@
</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 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>
<el-dialog style="z-index: 999999" draggable v-model="editDialogVisible" title="指定下载以下卫星" width="400">
......@@ -237,6 +237,12 @@ onMounted(() => {
.table-content {
padding: 10px;
margin-top: 30px;
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(8px);
border: 1px solid rgba(78, 237, 255, 0.2);
box-shadow: 0 0 15px rgba(78, 237, 255, 0.1);
border-radius: 8px;
padding: 15px;
}
.title {
......
src/views/os-status/components/dataCard.vue
<template>
<div class="flex">
<span class="textStyle" :class="{ toRight0: slideState }">数据统计</span>
<div class="dataCard" @click="goToAllDataPage">
<div class="dataCard" @click="goToAllDataPage" style="cursor: pointer">
<div class="titleStyle">
<span>数据统计</span>
</div>
......@@ -23,7 +23,7 @@
</div>
</div>
</div>
<div class="dataCard" @click="goToTaskRecordPage">
<div class="dataCard" @click="goToTaskRecordPage" style="cursor: pointer">
<div class="titleStyle">
<span>任务执行统计</span>
</div>
......@@ -211,7 +211,7 @@ onMounted(() => {
}
.loading {
width: 45px;
width: 40px;
aspect-ratio: 2;
margin-right: 30px;
--_g: no-repeat radial-gradient(circle closest-side, #4edaff 90%, #0000);
......
src/views/os-status/components/taskCard.vue
......@@ -181,6 +181,7 @@ onMounted(() => {
width: 500px;
height: 100%;
border-radius: 5px;
cursor: pointer;
}
.titleStyle {
......@@ -235,7 +236,7 @@ onMounted(() => {
}
.loading {
width: 45px;
width: 40px;
aspect-ratio: 2;
margin-right: 30px;
--_g: no-repeat radial-gradient(circle closest-side, #4edaff 90%, #0000);
......
src/views/os-system/index.vue
......@@ -203,6 +203,11 @@ onMounted(async () => {
}
.table-content {
padding: 0 10px;
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(8px);
border: 1px solid rgba(78, 237, 255, 0.2);
box-shadow: 0 0 15px rgba(78, 237, 255, 0.1);
border-radius: 8px;
padding: 10px !important;
}
</style>
src/views/os-taskRecord/index.vue
......@@ -190,7 +190,12 @@ onMounted(() => {
}
.table-content {
padding: 0 10px;
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(8px);
border: 1px solid rgba(78, 237, 255, 0.2);
box-shadow: 0 0 15px rgba(78, 237, 255, 0.1);
border-radius: 8px;
padding: 10px !important;
margin-top: 18px;
}
......
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