Skip to content

S
SatelliteDigital
提交 71686d28 authored 作者: liujiaxing's avatar liujiaxing
浏览文件
操作

最新代码

上级 18c3bacb
隐藏空白字符变更
内嵌 并排
正在显示 包含 295 行增加 和 7 行删除
README.md
浏览文件 @ 71686d28
......@@ -203,7 +203,7 @@ layout/index.vue（全局壳）
- **位置**：`pages/footer/component/legend.vue`
- **功能**：卫星状态图例（正常/异常/失效）、小卫星、星间链路、卫星波束、卫星轨道、服务格网等
### 8. 大屏配置模块
### 8. 大屏配置-通信曲线模块
- **位置**：`pages/header/component/screenConfigeDialog.vue`
- **功能**：对象选取（区域/信关站/格网面板数据）、模板配置管理（CRUD）
......
src/pages/all/components/instant/index.vue
浏览文件 @ 71686d28
......@@ -37,12 +37,60 @@
:propsDate="componentProps" :color="colorList"></instantCurve>
</div>
</div>
<el-dialog v-model="bigStatus" :modal='true' :show-close="true" :modal-penetrable='true' width="200"
:before-close="closeDialogFn" style="margin: 0;padding: 0; ">
<div class="dashboard-container">
<!-- 顶部导航栏 -->
<header class="dashboard-header">
<div class="logo">
<div class="logo_header">
<i class="icon-dashboard">
<img src="@/assets/images/headers/config_header.png" alt="" style="width: 20px; height: 20px;">
</i>
<span class="logo_header_content">通信曲线</span>
</div>
<div class="logo_header_right">
<span class="logo_header_right_content">[区域一特事故]</span>
</div>
</div>
<div class="logo logo_right">
<hr class="divider">
</div>
<div class="header-controls">
<button class="close-btn" @click="closeDialogFn">×</button>
</div>
</header>
<!-- 主体内容区 -->
<main class="dashboard-main">
<!-- 核心数据指标 判断一个图表中是否有多个曲线-->
<div class="container" v-if="!props.lineArray">
<div class="flex-box flex-left">
<instantCurve :idName="`instant-left-${props.allIdName}`" :data="props.data[0]"
:legendName="props.legendName[0]" :propsDate="componentProps"></instantCurve>
</div>
<div class="flex-box flex-right">
<instantCurve :idName="`instant-right-${props.allIdName}`" :data="props.data[1]" color="#6ffcba"
:legendName="props.legendName[1]" :isShowDetail="true"></instantCurve>
</div>
</div>
<div class="container" v-if="props.lineArray">
<div class="flex-box">
<instantCurve :lineArray="props.lineArray" :data="props.data" :legendName="props.legendName"
:propsDate="componentProps" :color="colorList"></instantCurve>
</div>
</div>
</main>
</div>
</el-dialog>
</div>
</template>
<script setup>
import instantCurve from './instantCurve.vue'
import bigdialog from '../../../header/component/bigdialog.vue'
const instantCurveRight = ref('instantCurve_chart-right');
const instantCurveLeft = ref('instantCurve_chart-left');
const props = defineProps({
......@@ -75,15 +123,25 @@ const colorList = ["#6ffcba", "#5470c6"]//同一个图标中不同曲线的颜
setTimeout(() => {
console.log('瞬时值曲线', props.lineArray)
}, 2000);
const bigStatus = ref(false)
//点击放大窗口详细查看曲线
const clickBig = () => {
console.log('放大');
bigStatus.value = true
}
const closeDialogFn = () => {
bigStatus.value = false
}
const componentProps = ref({})
</script>
<style scoped>
:deep(.el-dialog .el-dialog__header) {
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
/* 基础样式 */
.header-container {
display: flex;
......@@ -166,4 +224,116 @@ const componentProps = ref({})
.flex-left {
/* background-color: rgb(180, 180, 180); */
}
</style>
<style scoped>
/* 基础样式设置 */
.dashboard-container {
background-color: #000000;
color: #080606;
position: fixed;
/* 改为fixed定位 */
left: 10%;
top: 10%;
width: 1550px;
z-index: 1001;
overflow: hidden;
}
/* 头部样式 */
.dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
padding: 0rem 1rem;
}
.logo {
display: flex;
align-items: center;
height: 100%;
width: 200px;
justify-content: space-between;
color: #ffffff;
}
.logo_header {
width: 90px;
height: 100%;
align-items: center;
justify-content: space-between;
display: flex;
}
.icon-dashboard {
width: 10px;
height: 10px;
display: flex;
align-items: center;
}
.logo_header_content {
font-weight: 900;
font-size: 16px;
/* font-family: 'Consolas', monospace; */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.logo_header_right {
display: flex;
padding-left: 10px;
align-items: center;
width: 100px;
height: 100%;
}
.logo_header_right_content {
color: #000000;
padding: 2px;
font-size: 12px;
border-radius: 5px;
font-weight: 200;
background-color: #6ffcba;
}
.logo_right {
width: 80%;
display: flex;
align-items: center;
justify-content: center;
}
.divider {
width: 100%;
border: none;
border-top: 1px solid #3e3f3f;
margin: 0;
}
.header-controls {
display: flex;
align-items: center;
gap: 1rem;
}
.close-btn {
background: none;
border: none;
color: #8890a6;
cursor: pointer;
font-size: 1.2rem;
transition: color 0.2s;
}
.close-btn:hover {
color: #ffffff;
}
/* 主内容区域 */
.dashboard-main {
height: 70vh;
padding: 1rem;
overflow-y: hidden;
}
</style>
\ No newline at end of file
src/pages/header/component/bigdialog.vue 0 → 100644
浏览文件 @ 71686d28
<template>
</template>
<style scoped>
/* 基础样式设置 */
.dashboard-container {
background-color: #000000;
color: #080606;
position: fixed;
/* 改为fixed定位 */
left: 10%;
top: 10%;
width: 1550px;
z-index: 1001;
overflow: hidden;
}
/* 头部样式 */
.dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
padding: 0rem 1rem;
}
.logo {
display: flex;
align-items: center;
height: 100%;
width: 200px;
justify-content: space-between;
color: #ffffff;
}
.logo_header {
width: 90px;
height: 100%;
align-items: center;
justify-content: space-between;
display: flex;
}
.icon-dashboard {
width: 10px;
height: 10px;
display: flex;
align-items: center;
}
.logo_header_content {
font-weight: 900;
font-size: 16px;
/* font-family: 'Consolas', monospace; */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.logo_header_right {
display: flex;
padding-left: 10px;
align-items: center;
width: 100px;
height: 100%;
}
.logo_header_right_content {
color: #000000;
padding: 2px;
font-size: 12px;
border-radius: 5px;
font-weight: 200;
background-color: #6ffcba;
}
.logo_right {
width: 80%;
display: flex;
align-items: center;
justify-content: center;
}
.divider {
width: 100%;
border: none;
border-top: 1px solid #3e3f3f;
margin: 0;
}
.header-controls {
display: flex;
align-items: center;
gap: 1rem;
}
.close-btn {
background: none;
border: none;
color: #8890a6;
cursor: pointer;
font-size: 1.2rem;
transition: color 0.2s;
}
.close-btn:hover {
color: #ffffff;
}
/* 主内容区域 */
.dashboard-main {
flex: 1;
padding: 1rem;
overflow-y: hidden;
}
</style>
\ No newline at end of file
src/pages/header/component/screenConfigCase.vue
浏览文件 @ 71686d28
<template>
<!-- 大屏配置-模版列表 -->
<!-- 大屏配置-通信曲线-模版列表 -->
<div class="templateCase_right_content">
<!-- 模版名称修改 -->
<div class="templateCase_right_content_header">
......
src/pages/header/component/screenConfigeDialog.vue
浏览文件 @ 71686d28
......@@ -7,7 +7,7 @@
<i class="icon-dashboard">
<img src="@/assets/images/headers/config_header.png" alt="" style="width: 20px; height: 20px;">
</i>
<span class="logo_header_content">大屏配置</span>
<span class="logo_header_content">通信曲线</span>
</div>
<div class="logo_header_right">
<span class="logo_header_right_content">[区域一特事故]</span>
......
src/pages/header/index.vue
浏览文件 @ 71686d28
......@@ -31,7 +31,7 @@
<div class="navbar-right">
<div class="control-item company-item" @click="handletoLinkClick">
<img v-if="!imageError" src="@/assets/images/headers/header_style.png" alt="大屏配置" class="company-logo"
<img v-if="!imageError" src="@/assets/images/headers/header_style.png" alt="通信曲线" class="company-logo"
@error="handleImageError">
<span class="control-label">跳转</span>
......@@ -45,10 +45,10 @@
</div>
<div class="control-item company-item" @click="handleCompanyClick">
<img v-if="!imageError" src="@/assets/images/headers/header_style.png" alt="大屏配置" class="company-logo"
<img v-if="!imageError" src="@/assets/images/headers/header_style.png" alt="通信曲线" class="company-logo"
@error="handleImageError">
<!-- <div v-else class="logo-placeholder">DL</div> -->
<span class="control-label">大屏配置</span>
<span class="control-label">通信曲线</span>
</div>
<div class="control-item rightTime">
<span class="timeColor">{{ currentTime.split(" ")[0] }}</span>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论