Skip to content

S
SatelliteDigital
提交 91845458 authored 作者: 周文艺's avatar 周文艺
浏览文件
操作

显示问题

上级 b690ba04
隐藏空白字符变更
内嵌 并排
正在显示 包含 713 行增加 和 238 行删除
src/api/Zodiac.js
浏览文件 @ 91845458
/*
* @Author: Z 1518051043@qq.com
* @Date: 2025-12-08 17:37:05
* @LastEditors: Z 1518051043@qq.com
* @LastEditTime: 2025-12-23 10:16:05
* @LastEditors: zwy 1518051043@qq.com
* @LastEditTime: 2025-12-27 17:21:52
* @FilePath: \yuanxinPro\src\api\Zodiac.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%A
*/
......@@ -57,4 +57,20 @@ export function subSystemStatisticsInfoApi(data) {
method: 'get',
data: data
})
}
export function getSubSystemOpitionListApi(data) {
return request({
url: '/subSystem/getSubSystem',
method: 'get',
params: data
})
}
export function getSubSystemCurveListApi(data) {
return request({
url: '/subSystem/getSubSystemCurve',
method: 'post',
data: data
})
}
\ No newline at end of file
src/pages/all/components/hotMapComponents/hotMap.vue
浏览文件 @ 91845458
<template>
<!--热力图-->
<!-- <template>
<热力图
<div style="height: 100%;background-color: blueviolet;" >
<div style="width: 100%;height: 100%;">
<div class="main">
......@@ -14,7 +14,7 @@ export default {
}
</script>
<script setup>
<script setup>
// import { onMounted, onBeforeUnmount, computed, ref, reactive, nextTick, markRaw, watch } from "vue";
// import * as echarts from 'echarts';
// import { getLanguage, setLanguage } from '@/utils/auth'
......@@ -314,17 +314,236 @@ export default {
// myChart.clear()
// }
// })
// </script>
// <style scoped>
// .main {
// width: 100%;
// height: 100%;
// overflow: hidden;
// border: 1px solid #3A4C5B;
// }
// </style> >-->
<template>
<!--热力图-->
<div style="height: 100%; background-color: #000;">
<div style="width: 100%; height: 100%;">
<div :id="chartId" class="main"></div>
</div>
</div>
</template>
<script>
export default {
name: "hotMap_chart"
}
</script>
<style scoped>
<script setup>
import * as echarts from 'echarts';
import { onMounted, onUnmounted, ref } from 'vue';
.main {
width: 100%;
height: 100%;
// 生成唯一的图表ID
const chartId = ref('hexagonHeatMap_' + Math.random().toString(36).substr(2, 9));
let myChart = null;
// 生成六边形热力图数据
function generateHexagonData() {
// 模拟巴西地图形状的六边形网格数据
const data = [];
const centerX = 0;
const centerY = 0;
// 六边形排列参数
const radius = 15;
const startRadius = 10;
const endRadius = 40;
const angleStep = Math.PI / 3; // 60度
// 生成类似巴西地图轮廓的六边形点
for (let r = startRadius; r < endRadius; r += radius * 0.85) {
// 根据半径调整角度数量，形成不规则形状
const angleCount = Math.round(8 - r/10) + Math.floor(Math.random() * 2);
for (let i = 0; i < angleCount; i++) {
// 基础角度，添加偏移使形状更接近巴西地图
const baseAngle = angleStep * i;
let angleOffset = 0;
// 根据位置添加偏移，形成不规则形状
if (r < startRadius + 15) angleOffset = 0.3;
else if (r > endRadius - 15) angleOffset = -0.2;
else if (i > angleCount/2) angleOffset = 0.1;
const angle = baseAngle + angleOffset;
// 计算坐标
const x = centerX + r * Math.cos(angle);
const y = centerY + r * Math.sin(angle);
// 根据位置生成不同的值（模拟容量）
let value;
// 左侧区域值较低（蓝色）
if (x < -10) {
value = Math.random() * 30;
}
// 右侧区域值较高（红色）
else if (x > 20) {
value = 70 + Math.random() * 30;
}
// 中间区域值中等（黄、绿）
else {
value = 30 + Math.random() * 40;
}
data.push({
value: [x, y, value],
itemStyle: {
opacity: 0.9
}
});
}
}
// 添加东南部突出部分（类似巴西东南角）
for (let i = 0; i < 5; i++) {
const angle = -Math.PI/4 + i * angleStep/2;
const r = endRadius - 5 + i * 3;
const x = centerX + r * Math.cos(angle);
const y = centerY + r * Math.sin(angle);
data.push({
value: [x, y, 80 + Math.random() * 20],
itemStyle: {
opacity: 0.9
}
});
}
return data;
}
overflow: hidden;
// 初始化图表
function initChart() {
const chartDom = document.getElementById(chartId.value);
chartDom.style.width = '100%';
chartDom.style.height = '150px';
border: 1px solid #3A4C5B;
if (!chartDom) return;
myChart = echarts.init(chartDom);
// 生成热力图数据
const data = generateHexagonData();
const option = {
backgroundColor: '#000',
title: {
text: '链路层容量',
left: 'center',
// top: 10,
textStyle: {
color: '#fff',
fontSize: 10,
fontWeight: 'normal'
}
},
tooltip: {
formatter: function(params) {
return `容量: ${params.data[2].toFixed(1)}`;
},
backgroundColor: 'rgba(0, 0, 0, 0.7)',
borderColor: '#444',
textStyle: {
color: '#fff'
}
},
visualMap: {
min: 0,
max: 100,
calculable: true,
orient: 'horizontal',
left: 'center',
// bottom: 30,
inRange: {
color: ['#0050b3', '#1890ff', '#7cb305', '#ffd500', '#ff4d4f']
},
textStyle: {
color: '#fff'
},
// itemWidth: 40,
// itemHeight: 10,
borderWidth: 0
},
xAxis: {
type: 'value',
show: false,
min: -50,
max: 50
},
yAxis: {
type: 'value',
show: false,
min: -50,
max: 50
},
series: [{
name: '链路容量',
type: 'scatter',
coordinateSystem: 'cartesian2d',
symbol: 'path://M0,-10 L10,5 L10,15 L0,20 L-10,15 L-10,5 Z', // 六边形路径
symbolSize: [15, 15], // 六边形大小
data: data,
label: {
show: false
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
myChart.setOption(option);
resizeChart();
}
// 响应式调整图表大小
function resizeChart() {
if (myChart) {
myChart.resize();
}
}
onMounted(() => {
// 确保DOM渲染完成后初始化图表
setTimeout(() => {
initChart();
window.addEventListener('resize', resizeChart);
}, 0);
});
onUnmounted(() => {
if (myChart) {
window.removeEventListener('resize', resizeChart);
myChart.dispose();
myChart = null;
}
});
</script>
<style scoped>
.main {
width: 100%;
height: 100%;
/* min-height: 400px; */
/* overflow: hidden; */
}
</style>
\ No newline at end of file
src/pages/footer/component/timers.vue
浏览文件 @ 91845458
......@@ -519,7 +519,7 @@ const timeMarkers = computed(() => {
// 判断标记是否在选中范围内
const isMarkerInSelectedRange = (marker) => {
console.log("-----------------------,",marker);
// console.log("-----------------------,",marker);
const markerTime = marker.time.getTime();
const startTime = selectedStartTime.value.getTime();
......@@ -720,7 +720,7 @@ const startAutoPlay = () => {
// 设置新的定时器，每秒更新一次
playbackInterval.value = setInterval(() => {
moveEndHandle();
}, 1000 / playbackSpeed.value); // 根据播放速度调整间隔
}, 1000 ); // 根据播放速度调整间隔
};
// 停止自动播放
......
src/pages/footer2/timers.vue
浏览文件 @ 91845458
......@@ -80,11 +80,13 @@
class="time-marker"
:style="{ left: marker.position + '%' }"
>
<div class="marker-line" :class="{ 'major-line': marker.isMajor, 'minor-line_color': index % 12 === 0}"></div>
<div
class="marker-line" :class="{ 'major-line': marker.isMajor, 'minor-line_color': index % showLengthmarkerLine === 0 }"></div>
<span
class="marker-label"
:class="{ 'selected-label': isMarkerInSelectedRange(marker) }"
v-if="marker.showLabel && index % 12 === 0"
v-if=" (index % showLength === 0 || index === timeMarkers.length - 1)"
v-html="marker.label"
></span>
</div>
......@@ -172,7 +174,12 @@ const loading = ref('');
if(loading.value){
(loading.value).close()
}
startAutoPlay();
// startAutoPlay();
if (endDateTime.value === selectedEndTime.value.toISOString()) {
stopAutoPlay();
}else{
playForward();
}
}
// 使用 Promise 包装 setTimeout
......@@ -223,6 +230,13 @@ const loading = ref('');
}
const showLengthmarkerLine = computed(() => {
return Math.round(timeMarkers.value.length / 8);
})
const showLength = computed(() => {
return Math.round(timeMarkers.value.length / 8);
})
// 日期时间状态 (精确到秒)
const endDateTime = ref(new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString()); // 当前时间作为结束时间
const startDateTime = ref(new Date(Date.now() - 4 * 24 * 60 * 60 * 1000).toISOString()); // 三天前作为开始时间
......@@ -650,13 +664,7 @@ const toggleAutoPlay = () => {
status = 'stop';
console.log("我是切换自动播放状态stopAutoPlay()",isPlaying.value);
stopAutoPlay();
wssOpenHandle({
// isRealtime: useAppStoreInstance.globalSubsystemIsFastForward? true: false,
status: 'stop',
taskCode: toNumber(useAppStoreInstance.globalSubsystemTaskCode),
satelliteId: useAppStoreInstance.globalSatelliteSearchID,
})
} else {
status = 'continue';
isConfirmedWithRange.value = false; // 开始播放时重置标记
......@@ -770,14 +778,20 @@ const startAutoPlay = () => {
// 设置新的定时器，每秒更新一次
playbackInterval.value = setInterval(() => {
moveEndHandle();
}, 1000 / playbackSpeed.value); // 根据播放速度调整间隔
}, 1000); // 根据播放速度调整间隔
};
// 停止自动播放
const stopAutoPlay = () => {
isPlaying.value = false;
console.log("停止自动播放", playbackInterval.value);
wssOpenHandle({
// isRealtime: useAppStoreInstance.globalSubsystemIsFastForward? true: false,
status: 'stop',
taskCode: toNumber(useAppStoreInstance.globalSubsystemTaskCode),
satelliteId: useAppStoreInstance.globalSatelliteSearchID,
})
if (playbackInterval.value) {
clearInterval(playbackInterval.value);
playbackInterval.value = null;
......
src/pages/lefts/index.vue
浏览文件 @ 91845458
......@@ -265,7 +265,6 @@ import errorDialog from '@/pages/lefts/component/errorDialog.vue'
import wss from '@/utils/requestSocekt.js'
import useAppStore from '@/store/module/app'
import local from '@/utils/local.js'
import { da } from 'element-plus/es/locales.mjs';
const useAppStoreInstance = useAppStore();
// 激活的标签页
......@@ -327,7 +326,7 @@ const activeTabHandleClickTab = (value) => {
pageNum: 0,
pageSize: -1,
}).then(res => {
console.log(typeof res.data,"s---------a");
console.log( res.data,"s---------a");
primitiveFaultData.value = transformgroudSatelliteData(res.data)
faultData.value = primitiveFaultData.value
......@@ -336,7 +335,7 @@ const activeTabHandleClickTab = (value) => {
}
if (value === 'equipment') {
siteDataInfoListApi().then(res => {
// console.log(res.data,"s---------a");
console.log(res.data,"s---------a");
primitiveSatelliteData.value = transformgroudSatelliteData(res.data)
equipmentData.value = primitiveSatelliteData.value
......@@ -537,6 +536,51 @@ const errorDeviceList = ref('')
// watch(()=>errorDeviceList.value, (newVal, oldVal) => {
// console.log('*******111112errorDeviceList 变化了:', newVal, oldVal);
// })
// 告警列表转换
const transformgroudSatelliteDafultData = (data) => {
// console.log("*******11111222111111************", data,data.groundNetworkElementResponses);
// 检查 data 是否为对象且不为 null
if (typeof data === 'object' && data !== null && !Array.isArray(data) ) {
// 如果是单个对象，直接转换为数组形式
return [{
station: data.siteName === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : data.siteName,
ku: data.controlAntennaNum === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : data.controlAntennaNum,
qv: data.controlBaseStationNum2 === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : data.controlBaseStationNum2,
monitor: data.controlBaseStationNum === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : data.controlBaseStationNum,
baseband: data.baseStationNum === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : data.baseStationNum,
originErrorList:data.groundNetworkElementResponses ,
antennaAzimuth: data.antennaAzimuth || '-',
antennaEip: data.antennaEip || '-',
antennaElevation: data.antennaElevation || '-',
antennaTransmitPower: data.antennaTransmitPower || '-',
}];
} else if (Array.isArray(data)) {
// 如果是数组，遍历每个元素并转换
return data.map(item => ({
station: item.siteName === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : item.siteName,
// 测试是否更新socket数据
// ku: item.controlAntennaNum === 0 ? (activeTab.value === 'equipment' ? 0 : '-111') : item.controlAntennaNum,
ku: item.controlAntennaNum === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : item.controlAntennaNum,
qv: item.controlBaseStationNum2 === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : item.controlBaseStationNum2,
monitor: item.controlBaseStationNum === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : item.controlBaseStationNum,
baseband: item.baseStationNum === 0 ? (activeTab.value === 'equipment' ? 0 : '-') : item.baseStationNum,
originErrorList: item.groundNetworkElementResponses || [] ,
antennaAzimuth: data.antennaAzimuth || '-',
antennaEip: data.antennaEip || '-',
antennaElevation: data.antennaElevation || '-',
antennaTransmitPower: data.antennaTransmitPower || '-',
}));
}
// 如果 data 不是对象也不是数组，返回空数组
return [];
};
const transformgroudSatelliteData = (data) => {
// console.log("*******11111222111111************", data,data.groundNetworkElementResponses);
// 检查 data 是否为对象且不为 null
......
src/pages/lefts2/component/cruve.vue
浏览文件 @ 91845458
......@@ -3,27 +3,7 @@
<div class="container">
<div class="main">
<div :id="idName" class="cdfCurve"></div>
<!-- <div class="showValue">
<div v-for="(item, index) in markLineData" :key="index">
<span style="font-weight: 700;font-size: 10px; padding: 0 5.5px;" :style="{ color: item.color }">--</span>{{ item.descript }}
</div>
</div> -->
</div>
<!-- <el-dialog
v-model="isDetialDialogVisible"
:show-close="false"
:modal="false"
custom-class="custom-cdf-dialog"
width="200"
height="100"
destroy-on-close="true"
:before-close="isDetialDialogVisibleHandleClose"
style="margin: 0;padding: 0; background-color: rgba(0, 0, 0, 0);"
>
<childrenCdfCurve ref="childrenCdfRef" :propsDate="propsDate" @isDetialDialogVisibleHandleClose="isDetialDialogVisibleHandleClose" />
</el-dialog> -->
</div>
</template>
......@@ -34,12 +14,8 @@ export default {
</script>
<script setup>
import * as echarts from 'echarts';
// import childrenCdfCurve from './childrenCdfCurve.vue'
import { onMounted, onUnmounted, ref } from 'vue';
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
const props = defineProps({
idName: {
......@@ -56,36 +32,15 @@ const props = defineProps({
}
})
const showView = ref(false);
watch(() => props.propsDate, (newVal, oldVal) => {
if (newVal?.isFirstSearch) {
changeCharte();
console.log("完全不一样的数据");
}
}, { immediate: true, deep: true })
var lineColor = '#5470C6';
const markLineData = ref([
{
color: '#89dac4',
descript: "最大值：12"
},
{
color: '#da45ds',
descript: "最小值：12"
},
{
color: '#56fds9',
descript: "平均值：12"
},
])
let myChart = null;
const isDetialDialogVisible = ref(false);
function showViewClick() {
// console.log("时间");
isDetialDialogVisible.value = !isDetialDialogVisible.value;
showView.value = true;
// console.log("当前的值:",showView.value);
}
function isDetialDialogVisibleHandleClose() {
isDetialDialogVisible.value = false;
showView.value = false;
}
onMounted(() => {
initChart();
});
......@@ -97,124 +52,255 @@ onUnmounted(() => {
}
});
function initChart() {
function changeCharte() {
// 销毁旧实例
if (myChart) {
myChart.dispose();
myChart = null;
// 清空 DOM 元素内容
const chartDom = document.getElementById(props.idName);
if (chartDom) {
chartDom.innerHTML = '';
}
}
// 初始化新实例
const chartDom = document.getElementById(props.idName);
myChart = echarts.init(chartDom);
chartDom.style.height = '300px';
chartDom.style.width = '360px';
if (!chartDom) {
console.error("DOM 元素未找到:", props.idName);
return;
}
myChart = echarts.init(chartDom);
// 设置新 option
const option = {
legend: {
show: true,
data: ['CDF曲线图'],
// tooltip: {
// trigger: 'axis',
// position: function (pt) {
// return [pt[0], '10%'];
// },
// backgroundColor: 'rgba(50,50,50,0.8)',
// borderColor: '#333',
// borderWidth: 1,
// padding: 10,
// textStyle: {
// color: '#fff',
// fontSize: 12
// }
// },
// title: {
// left: 'center',
// text: props.propsDate.chartName || 'CDF Curve',
// textStyle: {
// color: '#fff'
// }
// },
// toolbox: {
// feature: {
// dataZoom: {
// yAxisIndex: 'none'
// },
// restore: {},
// saveAsImage: {}
// }
// },
xAxis: {
type: 'category',
boundaryGap: false,
data: props.propsDate.dataX,
axisLine: {
lineStyle: {
color: '#fff'
}
},
axisLabel: {
color: '#fff'
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
axisLine: {
lineStyle: {
color: '#fff'
}
},
axisLabel: {
color: '#fff'
},
splitLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.2)'
}
}
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 100
},
{
start: 0,
end: 100
}
],
series: [
{
name: props.propsDate.chartName || 'CDF',
type: 'line',
smooth: true,
symbol: 'none',
lineStyle: {
width: 2
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(58, 77, 233, 0.8)'
},
{
offset: 1,
color: 'rgba(58, 77, 233, 0.1)'
}
])
},
data: props.propsDate.dataY
}
],
tooltip: {
trigger: 'axis',
// 确保tooltip显示在最上层
extraCssText: 'z-index: 999999 !important;',
backgroundColor: 'rgba(50,50,50,0.8)',
borderColor: '#333',
borderWidth: 1,
padding: 10,
textStyle: {
color: '#fff',
fontSize: 12
},
// top: 'center',
left: 'center',
backgroundColor: 'transparent',
borderColor: 'transparent',
padding: [5, 10],
// 添加图标样式控制
icon: 'rect', // 使用矩形图标
itemWidth: 15, // 图例宽度
itemHeight: 5, // 图例高度，设为较小值形成线条效果
},
grid: {
top: '15%',
right: '4%',
bottom: '10%',
left: '8%'
},
// 固定tooltip位置在顶部
}
};
myChart.setOption(option, { notMerge: true });
resizeChart();
}
function initChart() {
const chartDom = document.getElementById(props.idName);
chartDom.style.height = '300px';
chartDom.style.width = '360px';
myChart = echarts.init(chartDom);
const option = {
// tooltip: {
// trigger: 'axis',
// position: function (pt) {
// return [pt[0], '10%'];
// },
// backgroundColor: 'rgba(50,50,50,0.8)',
// borderColor: '#333',
// borderWidth: 1,
// padding: 10,
// textStyle: {
// color: '#fff',
// fontSize: 12
// }
// },
// title: {
// left: 'center',
// text: 'CDF Curve',
// textStyle: {
// color: '#fff'
// }
// },
// toolbox: {
// feature: {
// dataZoom: {
// yAxisIndex: 'none'
// },
// restore: {},
// saveAsImage: {}
// }
// },
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine: {
lineStyle: {
color: '#fff'
}
},
axisLabel: {
interval: 0,
rotate: 0,
fontSize: 10,
color: '#fff',
color: '#fff'
}
},
yAxis: {
type: 'value',
max: 120,
splitLine: {
show: true,
boundaryGap: [0, '100%'],
axisLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)',
width: 1,
type: 'dashed'
color: '#fff'
}
},
splitNumber: 5,
axisLabel: {
color: '#fff',
fontSize: 10,
formatter: function (value) {
return value.toFixed(0);
axisLabel: {
color: '#fff',
formatter: function (value) {
return value.toFixed(2); // 保留三位小数
}
},
splitLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.2)'
}
}
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 100
},
{
start: 0,
end: 100
}
],
series: [
{
name: 'CDF曲线图',
data: [12, 13, 85, 53, 19, 23, 18],
name: 'CDF',
type: 'line',
smooth: 0.6,
smooth: true,
symbol: 'none',
lineStyle: {
color: lineColor,
width: 5
width: 2
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: lineColor
},
{
offset: 1,
color: 'rgba(0,0,0,0.31)'
}
],
global: false
}
},
markLine: {
symbol: 'none',
label: {
show: false
},
data: [
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
yAxis: 45,
lineStyle: {
color: '#ff0000',
width: 2,
type: 'dashed'
},
offset: 0,
color: 'rgba(58, 77, 233, 0.8)'
},
{
yAxis: 70,
lineStyle: {
color: '#ff55f5',
width: 2,
type: 'dashed'
},
offset: 1,
color: 'rgba(58, 77, 233, 0.1)'
}
]
}
])
},
data: [12, 13, 85, 53, 19, 23, 18]
}
],
tooltip: {
tooltip: {
trigger: 'axis',
// 确保tooltip显示在最上层
extraCssText: 'z-index: 999999 !important;',
......@@ -227,9 +313,7 @@ function initChart() {
fontSize: 12
},
// 固定tooltip位置在顶部
// position: function (pos, params, dom, rect, size) {
// return ['10%', pos[1]];
// }
}
};
......@@ -256,7 +340,6 @@ function resizeChart() {
.main {
width: 100%;
height: 95%;
/* border: 1px solid #3A4C5B; */
display: flex;
flex-direction: column;
box-sizing: border-box;
......@@ -265,54 +348,8 @@ function resizeChart() {
.cdfCurve {
width: 100%;
/* flex: 1; */
min-height: 180px;
/* 改为min-height确保足够空间 */
position: relative;
z-index: 1;
}
.showDetial{
position: absolute;
/* flex-direction: row; */
font: 12px "微软雅黑";
color: #8a8a8a;
top: 0;
right: 10px;
z-index: 1;
/* background-color: aquamarine; */
/* justify-content: center;
align-items: center; */
}
.showDetial .icon{
margin: 0;
padding: 0;
top: 2px;
}
.showDetial span{
padding-left: 5px;
}
.showDetial:hover{
/* background-color: rgba(255, 255, 255, 0.91); */
color: #607FB0;
}
/* .custom-cdf-dialog{
position: absolute;
left: 100px;
} */
.showValue {
width: 100%;
/* padding: 5px; */
height: 40px;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
flex-wrap: wrap;
font-size: 10px;
/* background-color: black; */
z-index: 0;
/* overflow: hidden; */
/* 确保在图表下方 */
}
</style>
\ No newline at end of file
src/pages/lefts2/index.vue
浏览文件 @ 91845458
<template>
<div class="equipment-panel_header11">
<!-- <div class="left2all"> -->
<!-- <div class="equipment-panel_header11">
<div class="equipment-panel_header11_content">
<div class="header-item header-item-left" @click="backHomeClick">
<span class="header-label">
......@@ -10,7 +11,7 @@
</div>
<div class="header-item header-item-center">
<span class="header-label header-item-center_label_title">
<!-- {{ headerItemAllContent.forwardContent.imgUrl }} -->
<img :src="headerItemAllContent.forwardContent.imgUrl" alt="@" srcset=""
style="width: 50px; height: 30px;padding-right: 10px;position: relative;top: -5px;">
</span>
......@@ -42,7 +43,7 @@
</div>
</div>
</div>
</div> -->
<div class="constellation-panel">
<!-- 顶部区域：标题与核心指标 -->
......@@ -84,12 +85,27 @@
<span class="equipment-panel_header-item-value">姿轨控系统</span>
</div> -->
<div class="query-panel">
<div class="header-container" style="height: 50px;padding-bottom: 10px;">
<div class="system-tabs">
<div v-for="(item, index) in arcHistorytabs" :key="index" class="tab-item" :class="{ active: arcHistoryActiveIndex === index }"
@click="handleArcHistoryTabClick(index)">
{{ item }}
</div>
</div>
</div>
<!-- <div class="query-button-container">
<el-button type="primary" class="query-button" @click="handleQuery">查询</el-button>
<el-button type="primary" class="query-button" @click="handleQuery">查询</el-button>
<el-button type="primary" class="query-button" @click="handleQuery">查询</el-button>
</div> -->
<div class="query-row">
<!-- 时间段选择 -->
<div class="query-group time-range-group">
<label class="query-label">时间段</label>
<div class="time-range-container">
<el-date-picker v-model="historyTimeDateRange" type="daterange" range-separator="→"
<el-date-picker v-model="historyTimeDateRange"
type="daterange" range-separator="→"
start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
prefix-icon="none" class="time-picker" :popper-options="{
placement: 'bottom-start',
......@@ -111,15 +127,15 @@
<!-- 卫星粒度选择 -->
<div class="query-group satellite-group">
<label class="query-label">卫星粒度</label>
<el-select v-model="satelliteGranularity" class="satellite-select">
<el-option v-for="item in satelliteOptions" :key="item.value" :label="item.label" :value="item.value" />
<el-select v-model="satelliteGranularity" class="satellite-select" >
<el-option v-for="item in satelliteOptions" :key="item.value" :label="item.label" :value="item.value" @click="handleSatelliteGranularityChange(item.value)" />
</el-select>
</div>
</div>
<!-- 查询按钮 -->
<div class="query-button-container">
<el-button type="primary" class="query-button" @click="handleQuery">查询</el-button>
<el-button type="primary" class="query-button" @click="cureSearchHandleFn">查询</el-button>
</div>
</div>
......@@ -134,10 +150,11 @@
</div>
<div class="equipment-panel">
<curve></curve>
<curve :propsDate="left2BottomOpition"></curve>
</div>
</div>
</div>
<!-- </div> -->
</template>
<script setup>
......@@ -147,15 +164,39 @@ import useAppStore from '@/store/module/app.js';
// import Header from './component/header.vue'
import wss from '@/utils/subSystemRequestSocket.js'
import { useRouter } from 'vue-router';
import { getSubSystemOpitionListApi,getSubSystemCurveListApi } from '../../api/Zodiac'
import { message } from 'ant-design-vue';
const router = useRouter();
const useAppStoreInstance = useAppStore();
const activeIndex = ref(0);
const arcHistoryActiveIndex = ref(0);
const currentTelemetryData = ref([]);
const arcHistorytabs = [
"姿轨控分系统",
"能源分系统",
"热控分系统"
]
const handleSatelliteGranularityChange = (value) => {
// satelliteGranularity.value = value;
console.log("999999999999999",value);
historyCode.value = value;
isFlagOfSeletctType.value = true;
}
const arcHistorySubSystemOptions = ['CONTROL','POWER','THERMAL'];
const handleArcHistoryTabClick = (index) => {
arcHistoryActiveIndex.value = index;
isFlagOfSeletctType.value = false;
isFalgStartSearch.value = false;
subSystemOptionsFn(arcHistorySubSystemOptions[index]);
}
// 系统标签
const tabs = [
"姿轨控分系统",
......@@ -562,29 +603,112 @@ const THERMAL_wssTransformGroundSatelliteData = (data) => {
return [];
};
// 时间格式化函数
const formatTime = (date) => {
if (!date) return '';
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${hours}:${minutes}:${seconds}`;
};
// 日期时间格式化函数
const formatDateTime = (date) => {
if (!date) return '未选择';
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day} ${formatTime(date)}`;
};
// 日期范围选择
const historyTimeDateRange = ref(['2024-06-13', '2024-06-17']);
const historyTimeDateRange = ref([ formatDateTime(useAppStoreInstance.globalSubsystemSelectedStartTime[0]), formatDateTime(useAppStoreInstance.globalSubsystemSelectedStartTime[1])]);
// 卫星粒度选择
const satelliteGranularity = ref('TMK505');
const satelliteGranularity = ref();
const satelliteOptions = ref([
{ label: 'TMK505轨道系姿态角Euler X', value: 'TMK505' },
{ label: 'TMK506轨道系姿态角Euler Y', value: 'TMK506' },
{ label: 'TMK507轨道系姿态角Euler Z', value: 'TMK507' },
{ label: 'TMK508轨道系角速度wx', value: 'TMK508' },
{ label: 'TMK509轨道系角速度wy', value: 'TMK509' },
{ label: 'TMK510轨道系角速度wz', value: 'TMK510' }
// { label: 'TMK505轨道系姿态角Euler X', value: 'TMK505' },
]);
const subSystemOptionsFn = (subSystemTypeValue)=>{
getSubSystemOpitionListApi({subSystemType:subSystemTypeValue}).then(res => {
console.log("getSubSystemOpitionListApi-----------",res);
satelliteOptions.value = res.map(item => ({
label: item.name,
value: item.code
}));
// console.log("************",satelliteGranularity.value,satelliteGranularity.value[0]);
satelliteGranularity.value =""
// historyCode.value = satelliteGranularity.value[0].code;
})
}
const historyCode = ref("11")
const isFlagOfSeletctType = ref(false)
const left2BottomOpitionX = ref([])
const left2BottomOpitionY = ref([])
const isFalgStartSearch = ref(false)
const left2BottomOpition = ref({
isFirstSearch:false,
})
// 查询处理函数
const handleQuery = () => {
console.log('查询参数:', {
dateRange: dateRange.value,
satelliteGranularity: satelliteGranularity.value
});
// 这里添加实际查询逻辑
const cureSearchHandleFn = () => {
if (!isFlagOfSeletctType.value) {
message.error('请选择卫星粒度');
}else{
// console.log('查询参数:', {
// // dateRange: historyTimeDateRange.value,
// code: historyCode.value,
// endTime: historyTimeDateRange.value[1],
// satelliteId: useAppStoreInstance.globalSatelliteSearchID==='0'? "4097": (useAppStoreInstance.globalSatelliteSearchID),
// startTime: historyTimeDateRange.value[0],
// subSystemType: arcHistorySubSystemOptions[arcHistoryActiveIndex.value],
// // satelliteGranularity: satelliteGranularity.value
// });
isFalgStartSearch.value = true;
getSubSystemCurveListApi({
endTime: historyTimeDateRange.value[1],
satelliteId: useAppStoreInstance.globalSatelliteSearchID==='0'? "4097": (useAppStoreInstance.globalSatelliteSearchID),
startTime: historyTimeDateRange.value[0],
subSystemType: arcHistorySubSystemOptions[arcHistoryActiveIndex.value],
code: historyCode.value,
}).then(res => {
left2BottomOpitionX.value = []
left2BottomOpitionY.value = []
res.data.map(item => (
left2BottomOpitionX.value.push(item.x),
left2BottomOpitionY.value.push(item.y)
))
console.log("propsDate---3333333333--------",res.data,left2BottomOpitionX.value);
left2BottomOpition.value = {
// falgStartSearch:isFalgStartSearch.value,
isFirstSearch:true,
dataX:left2BottomOpitionX.value,
dataY:left2BottomOpitionY.value,
type:'line',
chartName:satelliteOptions.value.filter((item) => (String(historyCode.value)===String(item.value)))[0].label
}
})
}
};
const wssOpenHandle = (data) => {
......@@ -661,6 +785,10 @@ const handleTabClick = (index) => {
};
onBeforeMount(() => {
subSystemOptionsFn("CONTROL");
// console.log("12222222222222222222222222",satelliteOptions.value[0].code);
// 发送api请求
// subSystemStatisticsInfoApi({
// id: 0,
......@@ -695,6 +823,9 @@ useAppStoreInstance.subsystemSocket.onmessage = (event) => {
// console.log('我是left2,type == time获取的wssRespone:', data);
};
left2BottomOpition.value = {
isFirstSearch:false,
}
nextTick(() => {
watch(() => useAppStoreInstance.subsystemSocketContent, (newVal, oldValue) => {
// const newValue = useAppStoreInstance.subsystemSocketContent
......@@ -786,7 +917,17 @@ watch(() => useAppStoreInstance.subsystemSocketContent, (newVal, oldValue) => {
overflow-y: auto;
background-color: #010102;
}
.left2all{
color: #e0e7ff;
/* padding: 15px; */
border-radius: 8px;
height: 100%;
display: flex;
flex-direction: column;
gap: 20px;
overflow-y: hidden;
background-color: #010102;
}
.equipment-panel_header11 {
position: fixed;
......@@ -962,6 +1103,9 @@ watch(() => useAppStoreInstance.subsystemSocketContent, (newVal, oldValue) => {
display: flex;
flex-direction: column;
gap: 15px;
/* 添加 */
/* max-height: 400px; */
}
/* 标题栏 */
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论