Skip to content

S
SatelliteDigital
提交 7a431cb5 authored 作者: 汪雄's avatar 汪雄
浏览文件
操作

update

上级 1bd1bc0c
显示空白字符变更
内嵌 并排
正在显示 包含 514 行增加 和 417 行删除
src/api/Zodiac.js
浏览文件 @ 7a431cb5
......@@ -7,65 +7,57 @@
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%A
*/
import request from '@/utils/request'
import request from "@/utils/request";
// 左侧菜单-星座构型信息
export function stellationInfoApi() {
return request({
url: '/constellationInfo/list',
method: 'get',
})
url: "/constellationInfo/list",
method: "get",
});
}
// 左侧菜单-卫星列表信息
export function stellateListInfoApi() {
return request({
url: '/SatelliteBasicInfo/list',
method: 'get',
})
url: "/SatelliteBasicInfo/list",
method: "get",
});
}
// 左侧菜单-地面系统信息
export function siteDataInfoListApi() {
return request({
url: '/SiteData/list',
method: 'get'
})
url: "/SiteData/list",
method: "get",
});
}
export function siteDataPageErrorInfoApi(data) {
return request({
url: '/SiteData/pageError',
method: 'post',
params: data
})
url: "/SiteData/pageError",
method: "post",
params: data,
});
}
export function groundSystemStatisticsInfoApi() {
return request({
url: '/GroundSystem/statistics',
method: 'get',
})
url: "/GroundSystem/statistics",
method: "get",
});
}
export function subSystemStatisticsInfoApi() {
return request({
url: '/GroundSystem/statistics',
method: 'get',
url: "/GroundSystem/statistics",
method: "get",
// data: data
})
});
}
export function getSubSystemOpitionListApi(data) {
return request({
url: '/subSystem/getSubSystem?subSystemType='+data.subSystemType,
method: 'get',
})
url: "/subSystem/getSubSystem?subSystemType=" + data.subSystemType,
method: "get",
});
}
// //console.log("propsDate-min--3333333333--------",{
......@@ -77,7 +69,66 @@ export function getSubSystemOpitionListApi(data) {
// });
export function getSubSystemCurveListApi(data) {
return request({
url: '/subSystem/getSubSystemCurve?satelliteId='+data.satelliteId+'&startTime='+data.startTime+'&endTime='+data.endTime+'&code='+data.code +'&subSystemType='+data.subSystemType,
method: 'get'
})
url:
"/subSystem/getSubSystemCurve?satelliteId=" +
data.satelliteId +
"&startTime=" +
data.startTime +
"&endTime=" +
data.endTime +
"&code=" +
data.code +
"&subSystemType=" +
data.subSystemType,
method: "get",
});
}
//配置模板中的区域数据
export function getRegionPanel() {
return request({
url: "/commPanel/getRegionPanel",
method: "get",
});
}
//配置模板中的信关站数据
export function getSignalSitePanel() {
return request({
url: "/commPanel/getSignalSitePanel",
method: "get",
});
}
//配置模板中的网格数据
export function getGridPanel() {
return request({
url: "/commPanel/getGridPanel",
method: "get",
});
}
// 容量/流量数据
export function getCapacityAndTraffic(data) {
return request({
url: "/commPanel/getCapacityAndTraffic",
method: "get",
params: {
gridCodes: data.gridCodes || null,
granularity: data.granularity,
startTime: data.startTime,
endTime: data.endTime,
regionName:data.regionName || null,
signalSiteCode: data.signalSiteCode || null,
},
});
}
//格网数据
export function getGridInfoList() {
return request({
url: "/GridInfo/list",
method: "get",
});
}
\ No newline at end of file
src/pages/header/component/screenConfigCase.vue
浏览文件 @ 7a431cb5
......@@ -8,22 +8,21 @@
</div>
<div class="templateCase_right_content_body">
<div class="horizontal-sections">
<div class="section-item" v-for="(item, index) in 3" :key="index">
<div class="section-item" v-for="(item, index) in titles" :key="index">
<div class="section-item_title">
<span>内容{{item}}</span>
<span>{{ item.title }}</span>
</div>
<div class="section-item_content_up">
<div class="selector-item" v-for="(item, index) in objectSelector" :key="index">
<label class="selector-label">{{ item.label }}</label>
<!-- <div v-for="(element,index) in [template1Selector,template2Selector]" :key="index">
</div> -->
<div class="selector-item" v-for="(item, key) in item.templateSelector" :key="key">
<label class="selector-label">{{ item.label}}</label>
<div class="custom-select">
<!-- 粒度 -->
<el-select v-model="item.default" placeholder="Select" style="width: 100%;" >
<el-option
v-for="itemele in item.options"
:key="itemele.value"
:label="itemele.label"
:value="itemele.value"
/>
<el-select v-model="item.default" placeholder="" style="width: 100%;">
<el-option v-for="itemele in item.options" :key="itemele.value" :label="itemele.label"
:value="itemele.value" />
</el-select>
</div>
</div>
......@@ -44,142 +43,242 @@
import hotMapComponent from '@/pages/all/components/hotMapComponents/index.vue';
import cdf from '@/pages/all/components/cdf/index.vue';
import instant from '@/pages/all/components/instant/index.vue';
const allIdName = ref([['allIdName11', 'allIdName12'], ['allIdName21', 'allIdName22']]);
const allIdName = ref([['allIdName11', 'allIdName12'], ['allIdName21', 'allIdName22']]);
// 组件逻辑可以在这里添加
const objectSelector = [
const titles = [
{
label: '地面粒度',
default: '区域',
title: '容量/流量',
templateSelector: [
{
label: '曲线类型',
default: '热力图',
options: [
{
value: '区域',
label: '区域',
value: '瞬时值曲线',
label: '瞬时值曲线',
},
{
value: 'PDF曲线',
label: 'PDF曲线',
},
{
value: '热力图',
label: '热力图',
},
]
},
{
value: '站点',
label: '站点',
label: '地理标准',
default: '最小值',
options: [
{
value: '最小值',
label: '最小值',
},
{
value: '设备类型',
label: '设备类型',
value: '最大值',
label: '最大值',
},
{
value: '具体设备',
label: '具体设备',
value: '平均值',
label: '平均值',
}
]
},
{
label: '卫星粒度',
default: '卫星',
label: '时间标准',
default: '最小值',
options: [
{
value: '卫星',
label: '卫星',
value: '最小值',
label: '最小值',
},
{
value: '星座',
label: '星座',
value: '最大值',
label: '最大值',
},
{
value: '波束',
label: '波束',
value: '平均值',
label: '平均值',
}
]
},
]
},
{
value: '转发器',
label: '转发器',
}
title: '可用性',
templateSelector: [
{
label: '曲线类型',
default: '热力图',
options: [
{
value: 'PDF曲线',
label: 'PDF曲线',
},
{
value: '热力图',
label: '热力图',
},
]
},
{
label: '模板',
default: 'Example #1',
label: '地理标准',
default: '最小值',
options: [
{
value: 'Example #1',
label: 'Example #1',
value: '最小值',
label: '最小值',
},
{
value: 'Example #2',
label: 'Example #2',
value: '最大值',
label: '最大值',
},
{
value: 'Example #3',
label: 'Example #3',
value: '平均值',
label: '平均值',
}
]
},
{
value: '自定义模板',
label: '自定义模板',
label: '时间标准',
default: '最小值',
options: [
{
value: '最小值',
label: '最小值',
},
{
value: '最大值',
label: '最大值',
},
{
value: '平均值',
label: '平均值',
}
]
},
]
},
{
label: '地面粒度',
default: '区域',
title: '网络时延/丢包',
templateSelector: [
{
label: '时延曲线类型',
default: '瞬时值曲线',
options: [
{
value: '区域',
label: '区域',
value: '瞬时值曲线',
label: '瞬时值曲线',
},
{
value: 'PDF曲线',
label: 'PDF曲线',
},
{
value: '站点',
label: '站点',
value: '热力图',
label: '热力图',
},
]
},
{
value: '设备类型',
label: '设备类型',
label: '地理标准',
default: '最小值',
options: [
{
value: '最小值',
label: '最小值',
},
{
value: '具体设备',
label: '具体设备',
value: '最大值',
label: '最大值',
},
{
value: '平均值',
label: '平均值',
}
]
},
{
label: '卫星粒度',
default: '卫星',
label: '时间标准',
default: '最小值',
options: [
{
value: '卫星',
label: '卫星',
value: '最小值',
label: '最小值',
},
{
value: '最大值',
label: '最大值',
},
{
value: '星座',
label: '星座',
value: '平均值',
label: '平均值',
}
]
},
{
value: '波束',
label: '波束',
label: '丢包曲线类型',
default: '瞬时值曲线',
options: [
{
value: '最小值',
label: '最小值',
},
{
value: '转发器',
label: '转发器',
value: '最大值',
label: '最大值',
},
{
value: '平均值',
label: '平均值',
}
]
},
{
label: '模板',
default: 'Example #1',
label: '地理标准',
default: '最小值',
options: [
{
value: 'Example #1',
label: 'Example #1',
value: '最小值',
label: '最小值',
},
{
value: 'Example #2',
label: 'Example #2',
value: '最大值',
label: '最大值',
},
{
value: 'Example #3',
label: 'Example #3',
value: '平均值',
label: '平均值',
}
]
},
{
value: '自定义模板',
label: '自定义模板',
label: '时间标准',
default: '最小值',
options: [
{
value: '最小值',
label: '最小值',
},
{
value: '最大值',
label: '最大值',
},
{
value: '平均值',
label: '平均值',
}
]
},
]
}
];
const template2Selector = []
</script>
<style scoped>
......@@ -208,22 +307,26 @@ const objectSelector = [
}
.horizontal-sections {
display: flex; /* 启用弹性布局来水平排列 */
display: flex;
/* 启用弹性布局来水平排列 */
height: 100%;
border-right: 1px solid rgba(255, 0, 0, 0.1);
}
.section-item {
flex: 1; /* 平均分配宽度 */
flex: 1;
/* 平均分配宽度 */
height: 100%;
/* background-color: #f5f10c; */
/* border: 1px solid rgba(255, 255, 255, 0.1); */
padding: 0px 10px;
padding-top: 5px;
display: flex; /* 使内部内容也使用弹性布局 */
flex-direction: column; /* 垂直排列子元素 */
/* overflow-y: auto; */
display: flex;
/* 使内部内容也使用弹性布局 */
flex-direction: column;
/* 垂直排列子元素 */
/* overflow-y: auto; */
}
.templateCase_right_content_header_item {
......@@ -237,13 +340,13 @@ const objectSelector = [
.section-item_title{
.section-item_title {
height: 5%;
/* background-color: #051020; */
display: flex;
align-items: center;
justify-content: left;
padding-left: 5px ;
padding-left: 5px;
border-left: 1px solid #2e7dff;
font-size: 14px;
color: #fff;
......@@ -261,30 +364,41 @@ const objectSelector = [
/* height: 42%; */
width: 100%;
/* background-color: #2d20a0; */
display: flex; /* 启用弹性布局 */
flex-wrap: wrap; /* 允许换行 */
gap: 10px; /* 元素间距 */
padding: 10px; /* 内边距 */
box-sizing: border-box; /* 包含padding */
align-content: flex-start; /* 对齐方式 */
display: flex;
/* 启用弹性布局 */
flex-wrap: wrap;
/* 允许换行 */
gap: 10px;
/* 元素间距 */
padding: 10px;
/* 内边距 */
box-sizing: border-box;
/* 包含padding */
align-content: flex-start;
/* 对齐方式 */
}
.selector-item {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 100px; /* 最小宽度 */
flex: 1; /* 弹性增长 */
min-width: 100px;
/* 最小宽度 */
flex: 1;
/* 弹性增长 */
}
.custom-select {
position: relative;
width: 100%; /* 自适应宽度 */
width: 100%;
/* 自适应宽度 */
}
:deep(.custom-select .el-select__wrapper) {
height: 12.5px;
}
.section-item_content_down{
.section-item_content_down {
width: 100%;
/* background-color: #9520a0; */
padding: 10px 0;
......
src/pages/header/component/screenConfigeDialog.vue
浏览文件 @ 7a431cb5
<template>
<div class="dashboard-container">
<!-- 顶部导航栏 -->
<header class="dashboard-header">
......@@ -26,18 +27,11 @@
<main class="dashboard-main">
<!-- 标签页导航 -->
<div class="tabs-container">
<div
class="tab-item"
:class="{ 'active': activeTab === 'equipmentCount' }"
@click="activeTab = 'equipmentCount'"
>
<div class="tab-item" :class="{ 'active': activeTab === 'equipmentCount' }"
@click="activeTab = 'equipmentCount'">
对象选取
</div>
<div
class="tab-item"
:class="{ 'active': activeTab === 'failureStatus' }"
@click="activeTab = 'failureStatus'"
>
<div class="tab-item" :class="{ 'active': activeTab === 'failureStatus' }" @click="activeTab = 'failureStatus'">
模板列表
</div>
<div class="tab-indicator" :style="indicatorStyle"></div>
......@@ -51,50 +45,39 @@
<div class="equipment-content">
<!-- 下拉选择器区域 -->
<div class="selector-container">
<div class="selector-item" v-for="(item, index) in objectSelector" :key="index">
<label class="selector-label">{{ item.label }}</label>
<div class="selector-item">
<label class="selector-label">{{ keliSelector.label }}</label>
<div class="custom-select">
<!-- 粒度 -->
<el-select v-model="item.default" placeholder="Select" style="width: 100%;" >
<el-option
v-for="itemele in item.options"
:key="itemele.value"
:label="itemele.label"
:value="itemele.value"
/>
<el-select v-model="keliSelector.value" placeholder="" style="width: 100%;" @change="keliOnChange">
<el-option v-for="item in keliSelector.options" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</div>
</div>
<!-- <div class="selector-item">
<label class="selector-label">{{ objectSelector[1].label }}</label>
<div class="selector-item" v-if="!isGlobal">
<label class="selector-label" style="visibility: hidden;">占位符</label>
<div class="custom-select">
<div class="select-trigger" @click="toggleDropdown(1)">
<span class="select-value">{{ selectedValues[1] }}</span>
<i class="select-arrow">▼</i>
</div>
<div class="select-dropdown" v-if="dropdownVisible[1]">
<div class="dropdown-option" v-for="option in objectSelector[1].options" :key="option" @click="selectOption(1, option)">
{{ option }}
</div>
</div>
<el-select v-model="childrenSelector.value" placeholder="" style="width: 100%;" :disabled="isGlobal">
<el-option v-for="item in childrenSelector.options" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</div>
</div>
<div class="selector-item">
<label class="selector-label">{{ objectSelector[2].label }}</label>
<label class="selector-label">{{ templateSelector.label }}</label>
<div class="custom-select">
<div class="select-trigger" @click="toggleDropdown(2)">
<span class="select-value">{{ selectedValues[2] }}</span>
<i class="select-arrow">▼</i>
</div>
<div class="select-dropdown" v-if="dropdownVisible[2]">
<div class="dropdown-option" v-for="option in objectSelector[2].options" :key="option" @click="selectOption(2, option)">
{{ option }}
</div>
<!-- 粒度 -->
<el-select v-model="templateSelector.value" placeholder="" style="width: 100%;">
<el-option v-for="item in templateSelector.options" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</div>
</div>
</div> -->
</div>
<div class="content-item">
<hotMapComponent></hotMapComponent>
......@@ -114,19 +97,18 @@
<div class="templateCase_left_header">
<div class="templateCase_left_header_item_title">模板列表</div>
<div class="templateCase_left_header_item_tool">
<el-icon @click="templateCasedeleteHandFn"><Delete /></el-icon>
<el-icon @click="templateCaseAddHandFn"><Plus /></el-icon>
<el-icon @click="templateCasedeleteHandFn">
<Delete />
</el-icon>
<el-icon @click="templateCaseAddHandFn">
<Plus />
</el-icon>
</div>
</div>
<div class="templateCase_left_content">
<div
class="templateCase_left_content_item"
v-for="(item, index) in templateCaseList"
:key="index"
@click="templateCaseClickFn(index)"
:class="{ 'CaseClickActive': activeTemplateIndex === index }"
>
<div class="templateCase_left_content_item" v-for="(item, index) in templateCaseList" :key="index"
@click="templateCaseClickFn(index)" :class="{ 'CaseClickActive': activeTemplateIndex === index }">
{{ item }}
</div>
</div>
......@@ -145,85 +127,83 @@
<script setup>
import { ref, computed, onMounted } from 'vue';
import { ref, computed, onMounted, watch } from 'vue';
import hotMapComponent from '@/pages/all/components/hotMapComponents/index.vue';
import cdf from '@/pages/all/components/cdf/index.vue';
import instant from '@/pages/all/components/instant/index.vue';
import screenConfigCase from './screenConfigCase.vue';
import { getCapacityAndTraffic } from '@/api/Zodiac';
import useAppStore from '@/store/module/app'
const appStore = useAppStore();
const emits = defineEmits(['handleScreenConfigeClose']);
const allIdName = ref([['allIdName11', 'allIdName12'], ['allIdName21', 'allIdName22']]);
// 标签页状态管理
const activeTab = ref('equipmentCount'); // 默认选中"地面站设备数量"
const objectSelector = [
const keliSelector = ref(
{
label: '地面粒度',
default: '区域',
value: 'global',
options: [
{
value: '区域',
label: '区域',
value: 'global',
label: '全球',
},
{
value: '站点',
label: '站点',
value: 'region',
label: '区域',
},
{
value: '设备类型',
label: '设备类型',
value: 'station',
label: '信关站',
},
{
value: '具体设备',
label: '具体设备',
value: 'grid',
label: '格网',
}
]
},
{
label: '卫星粒度',
default: '卫星',
options: [
{
value: '卫星',
label: '卫星',
},
{
value: '星座',
label: '星座',
},
{
value: '波束',
label: '波束',
},
});
//根据前选择器决定后选择器
const childrenSelector = ref(
{
value: '转发器',
label: '转发器',
label: '',
value: '',
options: []
}
]
},
)
const isGlobal = computed(() => keliSelector.value.value === 'global');
const templateSelector = ref(
{
label: '模板',
default: 'Example #1',
label: '模板选择',
value: '模板1',
options: [
{
value: 'Example #1',
label: 'Example #1',
value: '模板1',
label: '模板1',
},
{
value: 'Example #2',
label: 'Example #2',
value: '模板2',
label: '模板2',
},
{
value: 'Example #3',
label: 'Example #3',
value: '模板3',
label: '模板3',
},
{
value: '自定义模板',
label: '自定义模板',
value: '模板4',
}
]
}
];
const templateCaseList = ref(['模板1', '模板2', '模板3', '模板4', '模板26', '模板27', '模板28'])
)
const templateCaseList = ref(['模板1', '模板2'])
// 下拉选择器状态
const selectedValues = ref([]);
const dropdownVisible = ref([false, false, false]);
......@@ -234,8 +214,8 @@ const templateCaseAddHandFn = () => {
//console.log('templateCaseAddHandFn');
};
// 初始化选中值
onMounted(() => {
selectedValues.value = objectSelector.map(item => item.default);
onMounted(async () => {
await getCapacityAndTrafficData()
});
// 切换下拉菜单显示
......@@ -244,11 +224,20 @@ const toggleDropdown = (index) => {
dropdownVisible.value = dropdownVisible.value.map((val, i) => i === index ? !val : false);
};
// 选择下拉选项
const selectOption = (index, option) => {
selectedValues.value[index] = option;
dropdownVisible.value[index] = false; // 选择后关闭下拉菜单
};
const getCapacityAndTrafficData = async () => {
const res = await getCapacityAndTraffic({
granularity: keliSelector.value.value,
startTime: '2025-11-03 00:00:00',
endTime: '2025-11-06 00:00:00',
regionName: '',
signalSiteCode: '',
gridCodes: ''
})
console.log(res)
}
const activeTemplateIndex = ref(0);
const templateCaseClickFn = (index) => {
//console.log('templateCaseClickFn', index);
......@@ -267,6 +256,24 @@ const indicatorStyle = computed(() => {
? { left: '0%', width: '50%' }
: { left: '50%', width: '50%' };
});
const keliOnChange = () => {
childrenSelector.value.value = ''
switch (keliSelector.value.value) {
case 'region':
childrenSelector.value.options = appStore.regionPanelData
break;
case 'grid':
childrenSelector.value.options = appStore.gridPanelData
break;
case 'station':
childrenSelector.value.options = appStore.signalSitePanelData
break;
}
}
watch(() => keliSelector.value.value, keliOnChange)
</script>
<style scoped>
......@@ -282,7 +289,8 @@ const indicatorStyle = computed(() => {
position: fixed; /* 改为fixed定位 */
position: fixed;
/* 改为fixed定位 */
left: 10%;
top: 10%;
......@@ -438,14 +446,17 @@ const indicatorStyle = computed(() => {
border-radius: 8px;
padding: 5px 15px;
}
.equipment-content{
.equipment-content {
height: 600px;
}
.tab-panel {
min-height: 600px;
/* max-height: 700px; */
color: #e2e8f0;
}
.failure-content {
display: flex;
flex-direction: row;
......@@ -455,7 +466,8 @@ const indicatorStyle = computed(() => {
/* height: 500px; */
/* background-color: rgba(1, 73, 241, 0.5); */
/* padding: 15px; 添加内边距 */
border-radius: 8px; /* 添加圆角 */
border-radius: 8px;
/* 添加圆角 */
}
.templateCase {
......@@ -466,7 +478,8 @@ const indicatorStyle = computed(() => {
/* border-radius: 6px; 添加圆角 */
/* border: 1px solid rgba(255, 255, 255, 0.1); 添加边框 */
/* padding: 10px; 添加内边距 */
overflow: hidden; /* 防止内容溢出 */
overflow: hidden;
/* 防止内容溢出 */
}
/* 可以为左右两侧添加不同样式 */
......@@ -492,7 +505,7 @@ const indicatorStyle = computed(() => {
}
.templateCase_right_content{
.templateCase_right_content {
display: flex;
flex-direction: column;
height: 100%;
......@@ -500,7 +513,8 @@ const indicatorStyle = computed(() => {
/* background-color: #2b70df; */
/* padding: 10px 10px; */
}
.templateCase_right_content_header{
.templateCase_right_content_header {
display: flex;
flex-direction: column;
height: 8%;
......@@ -508,11 +522,13 @@ const indicatorStyle = computed(() => {
padding: 10px 10px;
/* background-color: #df2b34; */
}
.templateCase_right_content_body{
.templateCase_right_content_body {
height: 92%;
width: 100%;
background-color: #73df2b;
}
/* 新增样式 */
.horizontal-sections {
display: flex;
......@@ -523,12 +539,15 @@ const indicatorStyle = computed(() => {
.section-item {
flex: 1;
height: 100%;
background-color: #1e293b; /* 您可以选择合适的背景色 */
border: 1px solid rgba(255, 255, 255, 0.1); /* 可选：边框 */
background-color: #1e293b;
/* 您可以选择合适的背景色 */
border: 1px solid rgba(255, 255, 255, 0.1);
/* 可选：边框 */
padding: 10px 10px;
/* border-radius: 4px; 可选：圆角 */
}
.templateCase_right_content_header_item{
.templateCase_right_content_header_item {
height: 100%;
width: 8%;
......@@ -538,34 +557,39 @@ const indicatorStyle = computed(() => {
/* background-color: #6ffcba; */
}
.templateCase_left_header{
.templateCase_left_header {
display: flex;
padding: 10px 0;
}
.templateCase_left_header_item_title{
.templateCase_left_header_item_title {
flex: 0.61;
padding-left: 10px;
/* background-color: #2c60b4; */
}
.templateCase_left_header_item_tool {
display: flex;
justify-content: flex-end;
flex: 0.39;
gap: 15px;
padding-right: 10px;
align-items: center; /* 垂直居中对齐 */
align-items: center;
/* 垂直居中对齐 */
}
.templateCase_left_content{
.templateCase_left_content {
/* background-color: #6ffcba; */
width: 100%;
height: 100%;
overflow-y: auto;
}
.templateCase_left_content_item{
.templateCase_left_content_item {
height: 40px;
width: 100%;
display: flex;
......@@ -578,13 +602,14 @@ const indicatorStyle = computed(() => {
/* background-color: #2c78f5; */
}
.CaseClickActive{
.CaseClickActive {
background: linear-gradient(to right, #193d77 0, rgba(0, 0, 0, 1) 100%);
}
.templateCase_left_content_item:hover{
.templateCase_left_content_item:hover {
background: linear-gradient(to right, #2b70df 0, rgba(0, 0, 0, 1) 100%);
}
/* 下拉选择器样式 */
.selector-container {
display: flex;
......@@ -609,19 +634,22 @@ const indicatorStyle = computed(() => {
position: relative;
width: 160px;
/* color: #ffffff; */
border:1px solid #000000;
border: 1px solid #000000;
}
:deep(.custom-select .el-select__wrapper) {
height: 12.5px;
}
:deep(.custom-select .el-select ){
:deep(.custom-select .el-select) {
background: #000000;
border:1px solid #000000;
border: 1px solid #000000;
/* color: #ffffff; */
}
:deep(.custom-select .el-select .el-select__wrapper ){
:deep(.custom-select .el-select .el-select__wrapper) {
background: #000000;
border:1px solid #000000;
border: 1px solid #000000;
box-shadow: 0 0 2px rgba(131, 131, 131, 0.95);
/* color: #ffffff; */
}
......@@ -631,15 +659,18 @@ const indicatorStyle = computed(() => {
/* font-size: 10px; */
}
:deep(.el-popper){
:deep(.el-popper) {
background-color: #000000 !important;
}
:deep(.el-select-dropdown){
:deep(.el-select-dropdown) {
background: #000000 !important;
}
:deep(.el-select-dropdown){
:deep(.el-select-dropdown) {
background-color: #000000 !important;
}
.select-trigger {
display: flex;
justify-content: space-between;
......@@ -693,7 +724,8 @@ const indicatorStyle = computed(() => {
background-color: #334155;
color: #ffffff;
}
.content-item{
.content-item {
display: flex;
flex-direction: row;
gap: 20px;
......@@ -701,20 +733,23 @@ const indicatorStyle = computed(() => {
/* background-color: #1c5abe; */
}
.content-item > * {
.content-item>* {
flex: 1;
min-width: 0;
}
.content-item > *:not(:last-child) {
.content-item>*:not(:last-child) {
padding-right: 10px;
border-right: 1px solid #1b1b1b; /* 右边框样式 */
border-right: 1px solid #1b1b1b;
/* 右边框样式 */
}
.apply-btn-right{
.apply-btn-right {
position: absolute;
bottom: 16px;
}
:deep(.apply-btn){
:deep(.apply-btn) {
width: 100px;
height: 30px;
/* margin-top: 10%; */
......@@ -726,6 +761,7 @@ const indicatorStyle = computed(() => {
cursor: pointer;
border-bottom: 1px solid #2c78f5;
}
/* 滚动条样式 */
.select-dropdown::-webkit-scrollbar {
width: 6px;
......
src/pages/header/index.vue
浏览文件 @ 7a431cb5
......@@ -8,7 +8,8 @@
<div class="navbar-left">
<div class="status-item weather-info">
<span class="icon">
<img src="@/assets/images/headers/yuanxin.png" alt="图标" class="weather-icon" style="width: 100%; height: 100%;">
<img src="@/assets/images/headers/yuanxin.png" alt="图标" class="weather-icon"
style="width: 100%; height: 100%;">
</span>
<!-- <span class="text">晴 18℃</span> -->
</div>
......@@ -30,13 +31,8 @@
<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"
@error="handleImageError"
>
<img v-if="!imageError" src="@/assets/images/headers/header_style.png" alt="大屏配置" class="company-logo"
@error="handleImageError">
<span class="control-label">跳转</span>
</div>
......@@ -44,40 +40,26 @@
<div class="control-item digital-person-item" :class="{ active: digitalPersonShow }">
<el-switch
v-model="digitalPersonShow"
/>
<el-switch v-model="digitalPersonShow" />
<span class="control-label">数字人</span>
</div>
<div class="control-item company-item" @click="handleCompanyClick">
<img
v-if="!imageError"
src="@/assets/images/headers/header_style.png"
alt="大屏配置"
class="company-logo"
@error="handleImageError"
>
<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>
</div>
<div class="control-item rightTime" >
<div class="control-item rightTime">
<span class="timeColor">{{ currentTime.split(" ")[0] }}</span>
<span >{{ currentTime.split(" ")[1] }}</span>
<span>{{ currentTime.split(" ")[1] }}</span>
</div>
</div>
</div>
<el-dialog
v-model="screenConfigeDialogVisible"
:destroy-on-close="true"
:modal="false"
width="100"
:show-close="false"
:before-close="handleScreenConfigeClose"
style=" background-color: rgba(0, 0, 0,0);padding: 0;margin: 0;"
>
<el-dialog v-model="screenConfigeDialogVisible" :destroy-on-close="true" :modal="false" width="100"
:show-close="false" :before-close="handleScreenConfigeClose"
style=" background-color: rgba(0, 0, 0,0);padding: 0;margin: 0;">
<screenConfige @handleScreenConfigeClose="handleScreenConfigeClose"></screenConfige>
<!-- <div style="width: 100px;height: 100px;background-color: blueviolet;"></div> -->
</el-dialog>
......@@ -94,12 +76,7 @@
:close-on-click-modal="false"
>
</el-dialog> -->
<div
v-if="digitalPersonShow"
class="draggable-box"
:style="{ left: pos.x + 'px', top: pos.y + 'px' }"
>
<div v-if="digitalPersonShow" class="draggable-box" :style="{ left: pos.x + 'px', top: pos.y + 'px' }">
<span class="title" @mousedown="startDrag">拖拽我（带边界限制）</span>
<!-- <el-input v-model="value" placeholder="请输入内容" /> -->
<!-- <Sender v-model="senderValue" variant="updown" clearable allow-speech /> -->
......@@ -112,11 +89,12 @@
<script setup>
// import { BubbleList, Sender } from 'vue-element-plus-x';
import { ref, onUnmounted, watch, onBeforeMount, onDeactivated ,onMounted} from 'vue';
import { ref, onUnmounted, watch, onBeforeMount, onDeactivated, onMounted } from 'vue';
import local from '@/utils/local.js'
import screenConfige from './component/screenConfigeDialog.vue'
import { useRouter } from 'vue-router';
import useAppStore from '@/store/module/app'
import { getRegionPanel, getSignalSitePanel, getGridPanel } from "@/api/Zodiac";
import errorDialog from '@/pages/lefts/component/errorDialog.vue'
......@@ -126,16 +104,6 @@ const useAppStoreInstance = useAppStore()
// 在 setup 中
const router = useRouter();
const senderRef = ref();
const senderValue = ref('');
// 数字人显示状态
const digitalPersonShow = ref(false);
// 实时更新时间
......@@ -159,8 +127,8 @@ const handleScreenConfigeClose = () => {
screenConfigeDialogVisible.value = false;
if (window.ue5) {
window.ue5("callBackAllDialogFn", String(JSON.stringify({
type:"LargeScreenConfigurationDialog",
status:"close"
type: "LargeScreenConfigurationDialog",
status: "close"
})));
}
};
......@@ -183,35 +151,7 @@ const handleImageError = (e) => {
e.target.style.display = 'none';
};
// try {
// // 确保对象结构存在
// if (typeof window.ue5 !== 'object' || window.ue5 === null) {
// window.ue5 = {};
// }
// if (typeof window.ue5.interface !== 'object' || window.ue5.interface === null) {
// window.ue5.interface = {};
// }
// window.ue5.interface.emitUIInteraction = (res) => {
// //console.log("收到UE交互:", res.name);
// try {
// const resData = JSON.parse(res.data);
// //console.log("Received from UE:", resData);
// if (resData.locationReplace === true) {
// location.replace('/subsystem');
// }
// if (resData.locationReplace === false) {
// location.replace('/');
// }
// } catch (parseError) {
// console.error("Error parsing JSON:", parseError);
// }
// };
// } catch (initError) {
// console.error("Failed to initialize ue5 interface:", initError);
// }
const toSubSystemFlag = ref(false);
const handletoLinkClick = () => {
try {
......@@ -221,7 +161,7 @@ const handletoLinkClick = () => {
router.push('/');
//console.log("1111111111111111111111111",useAppStoreInstance.isSourceLegendShow);
useAppStoreInstance.setGlobalisFromTosub(true);
useAppStoreInstance.setislegendShow(useAppStoreInstance.isSourceLegendShow?true:false );
useAppStoreInstance.setislegendShow(useAppStoreInstance.isSourceLegendShow ? true : false);
//console.log("11111111111111111111111112",useAppStoreInstance.islegendShow);
useAppStoreInstance.setiscontrolPanelShow(true);
useAppStoreInstance.setGlobalSubsystemSelectedTimeRange([]);
......@@ -254,12 +194,11 @@ const handletoLinkClick = () => {
};
const handleCompanyClick = () => {
// 可以添加点击事件逻辑
// //console.log('大屏配置按钮点击');
screenConfigeDialogVisible.value = !screenConfigeDialogVisible.value;
if (window.ue5) {
window.ue5("callBackAllDialogFn", String(JSON.stringify({
type:"LargeScreenConfigurationDialog",
status:"open"
type: "LargeScreenConfigurationDialog",
status: "open"
})));
}
};
......@@ -275,65 +214,8 @@ onBeforeMount(() => {
}, 1000);
});
// const handleUEMessage = () => {
// //console.log("我是handleUEMessage里面的window",window);
// window.emitUIInteraction = (res) => {
// // //console.log('Received from UE:', data);
// //console.log("我是handleUEMessage,收到UE交互:", res);
// try {
// const resData = JSON.parse(res.data);
// if (window.ue5) {
// window.ue5("callBackTimeFn", String(JSON.stringify({
// taskCode: String("从UE里面传输的数据",resData,res),
// })))
// }
// //console.log("handleUEMessage，Received from UE:", resData);
// if (resData.locationReplace === true) {
// router.push('/subsystem');
// }
// if (resData.locationReplace === false) {
// router.push('/');
// }
// } catch (parseError) {
// console.error("Error parsing JSON:", parseError);
// }
// };
// };
// const handleUEMessage1 = () => {
// //console.log("我是handleUEMessage1里面的window",window);
// window.emitUIInteraction = (res) => {
// // //console.log('Received from UE:', data);
// //console.log("我是handleUEMessage1,收到UE交互:", res);
// try {
// const resData = JSON.parse(res.data);
// if (window.ue5) {
// window.ue5("callBackTimeFn", String(JSON.stringify({
// taskCode: String("handleUEMessage1从UE里面传输的数据",resData,res),
// })))
// }
// //console.log("Received from UE:", resData);
// if (resData.locationReplace === true) {
// router.push('/subsystem');
// }
// if (resData.locationReplace === false) {
// router.push('/');
// }
// } catch (parseError) {
// console.error("Error parsing JSON:", parseError);
// }
// };
// };
onMounted(() => {
onMounted(async () => {
// window.addEventListener('message', handleUEMessage);
// window.addEventListener('emitUIInteraction', handleUEMessage1);
window.ue.interface.emitUIInteraction = (res) => {
......@@ -369,7 +251,7 @@ onMounted(() => {
//console.log("1111111111111111111111111",useAppStoreInstance.isSourceLegendShow);
useAppStoreInstance.setGlobalisFromTosub(true);
useAppStoreInstance.setislegendShow(useAppStoreInstance.isSourceLegendShow?true:false );
useAppStoreInstance.setislegendShow(useAppStoreInstance.isSourceLegendShow ? true : false);
//console.log("11111111111111111111111112",useAppStoreInstance.islegendShow);
useAppStoreInstance.setiscontrolPanelShow(true);
useAppStoreInstance.setGlobalSubsystemSelectedTimeRange([]);
......@@ -394,6 +276,9 @@ onMounted(() => {
await initChartData();
});
......@@ -435,6 +320,14 @@ const stopDrag = () => {
};
const initChartData = async () => {
// console.log("初始化数据",useAppStoreInstance);
const [res1,res2,res3] = await Promise.all([getRegionPanel(), getSignalSitePanel(), getGridPanel()])
useAppStoreInstance.regionPanelData = res1.code==200?res1.data.map(item=>({value:item,label:item})):[]
useAppStoreInstance.signalSitePanelData = res2.code==200?res2.data.map((item)=>({value:item.siteId,label:item.siteName})):[]
useAppStoreInstance.gridPanelData = res3.code==200?res3.data.map(item=>({value:item.gridCode,label:item.gridName})):[]
};
......@@ -443,7 +336,7 @@ const stopDrag = () => {
</script>
<style scoped>
*{
* {
margin: 0;
padding: 0;
}
......@@ -470,7 +363,8 @@ const stopDrag = () => {
text-align: center;
font-weight: bold;
flex-shrink: 0;
user-select: none; /* 防止拖拽时选中文本 */
user-select: none;
/* 防止拖拽时选中文本 */
}
......@@ -514,11 +408,12 @@ const stopDrag = () => {
height: 55px;
max-width: 1920px;
margin: 0 auto;
background: url("@/assets/images/headers/header_bg.png") ;
background: url("@/assets/images/headers/header_bg.png");
/* padding: 0.6rem 0; */
position: relative;
overflow: hidden;
background-size: 100% 160%; /* 或者 cover/auto */
background-size: 100% 160%;
/* 或者 cover/auto */
background-repeat: no-repeat;
background-position: center;
......@@ -608,13 +503,16 @@ const stopDrag = () => {
padding-top: 10px;
/* background-color: #d10e0e; */
}
.timeColor{
.timeColor {
color: #ddd;
}
.rightTime{
.rightTime {
border-left: 1px solid #ddd;
height: 10px;
}
.control-item {
display: flex;
align-items: center;
......@@ -702,15 +600,18 @@ const stopDrag = () => {
}
@media (max-width: 992px) {
/* .navbar-left {
display: none;
} */
.company-item{
.company-item {
display: none;
}
.digital-person-item{
.digital-person-item {
display: none;
}
.navbar-right {
gap: 1rem;
}
......
src/store/module/app.js
浏览文件 @ 7a431cb5
......@@ -52,6 +52,11 @@ const useAppStore = defineStore(
globalSubsystemSelectedEndTime: '2025-11-04 00:00:00',//暂未使用
globalDisableTimeLine: true,
gridPanelData:[], //格网面板
regionPanelData:[], //区域面板
signalSitePanelData:[], //信关站面板
}),
actions: {
setGlobalRecordMainSysTaskCode(status) {
......
src/utils/request.js
浏览文件 @ 7a431cb5
......@@ -26,17 +26,6 @@ const service = axios.create({
// request拦截器
service.interceptors.request.use(config => {
//console.log('--------------config', config)
// // 是否需要设置 token
// const isToken = (config.headers || {}).isToken === false
// //console.log('--------------isToken', isToken)
// // 是否需要防止数据重复提交
// const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
// //console.log('--------------isRepeatSubmit', isRepeatSubmit,(config.headers || {}).repeatSubmit,config.headers.repeatSubmit,undefined===false)
// if (getToken() && !isToken) {
// config.headers['token'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
// }
// get请求映射params参数
if (config.method === 'get' && config.params) {
let url = config.url + '?' + tansParams(config.params);
url = url.slice(0, -1);
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论