Skip to content

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

显示问题

上级 b690ba04
显示空白字符变更
内嵌 并排
正在显示 包含 698 行增加 和 223 行删除
src/api/Zodiac.js
浏览文件 @ 91845458
/* /*
* @Author: Z 1518051043@qq.com * @Author: Z 1518051043@qq.com
* @Date: 2025-12-08 17:37:05 * @Date: 2025-12-08 17:37:05
* @LastEditors: Z 1518051043@qq.com * @LastEditors: zwy 1518051043@qq.com
* @LastEditTime: 2025-12-23 10:16:05 * @LastEditTime: 2025-12-27 17:21:52
* @FilePath: \yuanxinPro\src\api\Zodiac.js * @FilePath: \yuanxinPro\src\api\Zodiac.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%A * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%A
*/ */
...@@ -58,3 +58,19 @@ export function subSystemStatisticsInfoApi(data) { ...@@ -58,3 +58,19 @@ export function subSystemStatisticsInfoApi(data) {
data: data 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="height: 100%;background-color: blueviolet;" >
<div style="width: 100%;height: 100%;"> <div style="width: 100%;height: 100%;">
<div class="main"> <div class="main">
...@@ -314,17 +314,236 @@ export default { ...@@ -314,17 +314,236 @@ export default {
// myChart.clear() // 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> </script>
<style scoped>
<script setup>
import * as echarts from 'echarts';
import { onMounted, onUnmounted, ref } from 'vue';
.main { // 生成唯一的图表ID
width: 100%; const chartId = ref('hexagonHeatMap_' + Math.random().toString(36).substr(2, 9));
height: 100%; 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度
overflow: hidden; // 生成类似巴西地图轮廓的六边形点
for (let r = startRadius; r < endRadius; r += radius * 0.85) {
// 根据半径调整角度数量，形成不规则形状
const angleCount = Math.round(8 - r/10) + Math.floor(Math.random() * 2);
border: 1px solid #3A4C5B; 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;
}
// 初始化图表
function initChart() {
const chartDom = document.getElementById(chartId.value);
chartDom.style.width = '100%';
chartDom.style.height = '150px';
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> </style>
\ No newline at end of file
src/pages/footer/component/timers.vue
浏览文件 @ 91845458
...@@ -519,7 +519,7 @@ const timeMarkers = computed(() => { ...@@ -519,7 +519,7 @@ const timeMarkers = computed(() => {
// 判断标记是否在选中范围内 // 判断标记是否在选中范围内
const isMarkerInSelectedRange = (marker) => { const isMarkerInSelectedRange = (marker) => {
console.log("-----------------------,",marker); // console.log("-----------------------,",marker);
const markerTime = marker.time.getTime(); const markerTime = marker.time.getTime();
const startTime = selectedStartTime.value.getTime(); const startTime = selectedStartTime.value.getTime();
...@@ -720,7 +720,7 @@ const startAutoPlay = () => { ...@@ -720,7 +720,7 @@ const startAutoPlay = () => {
// 设置新的定时器，每秒更新一次 // 设置新的定时器，每秒更新一次
playbackInterval.value = setInterval(() => { playbackInterval.value = setInterval(() => {
moveEndHandle(); moveEndHandle();
}, 1000 / playbackSpeed.value); // 根据播放速度调整间隔 }, 1000 ); // 根据播放速度调整间隔
}; };
// 停止自动播放 // 停止自动播放
......
src/pages/footer2/timers.vue
浏览文件 @ 91845458
...@@ -80,11 +80,13 @@ ...@@ -80,11 +80,13 @@
class="time-marker" class="time-marker"
:style="{ left: marker.position + '%' }" :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 <span
class="marker-label" class="marker-label"
:class="{ 'selected-label': isMarkerInSelectedRange(marker) }" :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" v-html="marker.label"
></span> ></span>
</div> </div>
...@@ -172,7 +174,12 @@ const loading = ref(''); ...@@ -172,7 +174,12 @@ const loading = ref('');
if(loading.value){ if(loading.value){
(loading.value).close() (loading.value).close()
} }
startAutoPlay(); // startAutoPlay();
if (endDateTime.value === selectedEndTime.value.toISOString()) {
stopAutoPlay();
}else{
playForward();
}
} }
// 使用 Promise 包装 setTimeout // 使用 Promise 包装 setTimeout
...@@ -223,6 +230,13 @@ const loading = ref(''); ...@@ -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 endDateTime = ref(new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString()); // 当前时间作为结束时间
const startDateTime = ref(new Date(Date.now() - 4 * 24 * 60 * 60 * 1000).toISOString()); // 三天前作为开始时间 const startDateTime = ref(new Date(Date.now() - 4 * 24 * 60 * 60 * 1000).toISOString()); // 三天前作为开始时间
...@@ -650,13 +664,7 @@ const toggleAutoPlay = () => { ...@@ -650,13 +664,7 @@ const toggleAutoPlay = () => {
status = 'stop'; status = 'stop';
console.log("我是切换自动播放状态stopAutoPlay()",isPlaying.value); console.log("我是切换自动播放状态stopAutoPlay()",isPlaying.value);
stopAutoPlay(); stopAutoPlay();
wssOpenHandle({
// isRealtime: useAppStoreInstance.globalSubsystemIsFastForward? true: false,
status: 'stop',
taskCode: toNumber(useAppStoreInstance.globalSubsystemTaskCode),
satelliteId: useAppStoreInstance.globalSatelliteSearchID,
})
} else { } else {
status = 'continue'; status = 'continue';
isConfirmedWithRange.value = false; // 开始播放时重置标记 isConfirmedWithRange.value = false; // 开始播放时重置标记
...@@ -770,14 +778,20 @@ const startAutoPlay = () => { ...@@ -770,14 +778,20 @@ const startAutoPlay = () => {
// 设置新的定时器，每秒更新一次 // 设置新的定时器，每秒更新一次
playbackInterval.value = setInterval(() => { playbackInterval.value = setInterval(() => {
moveEndHandle(); moveEndHandle();
}, 1000 / playbackSpeed.value); // 根据播放速度调整间隔 }, 1000); // 根据播放速度调整间隔
}; };
// 停止自动播放 // 停止自动播放
const stopAutoPlay = () => { const stopAutoPlay = () => {
isPlaying.value = false; isPlaying.value = false;
console.log("停止自动播放", playbackInterval.value); console.log("停止自动播放", playbackInterval.value);
wssOpenHandle({
// isRealtime: useAppStoreInstance.globalSubsystemIsFastForward? true: false,
status: 'stop',
taskCode: toNumber(useAppStoreInstance.globalSubsystemTaskCode),
satelliteId: useAppStoreInstance.globalSatelliteSearchID,
})
if (playbackInterval.value) { if (playbackInterval.value) {
clearInterval(playbackInterval.value); clearInterval(playbackInterval.value);
playbackInterval.value = null; playbackInterval.value = null;
......
src/pages/lefts/index.vue
浏览文件 @ 91845458
...@@ -265,7 +265,6 @@ import errorDialog from '@/pages/lefts/component/errorDialog.vue' ...@@ -265,7 +265,6 @@ import errorDialog from '@/pages/lefts/component/errorDialog.vue'
import wss from '@/utils/requestSocekt.js' import wss from '@/utils/requestSocekt.js'
import useAppStore from '@/store/module/app' import useAppStore from '@/store/module/app'
import local from '@/utils/local.js' import local from '@/utils/local.js'
import { da } from 'element-plus/es/locales.mjs';
const useAppStoreInstance = useAppStore(); const useAppStoreInstance = useAppStore();
// 激活的标签页 // 激活的标签页
...@@ -327,7 +326,7 @@ const activeTabHandleClickTab = (value) => { ...@@ -327,7 +326,7 @@ const activeTabHandleClickTab = (value) => {
pageNum: 0, pageNum: 0,
pageSize: -1, pageSize: -1,
}).then(res => { }).then(res => {
console.log(typeof res.data,"s---------a"); console.log( res.data,"s---------a");
primitiveFaultData.value = transformgroudSatelliteData(res.data) primitiveFaultData.value = transformgroudSatelliteData(res.data)
faultData.value = primitiveFaultData.value faultData.value = primitiveFaultData.value
...@@ -336,7 +335,7 @@ const activeTabHandleClickTab = (value) => { ...@@ -336,7 +335,7 @@ const activeTabHandleClickTab = (value) => {
} }
if (value === 'equipment') { if (value === 'equipment') {
siteDataInfoListApi().then(res => { siteDataInfoListApi().then(res => {
// console.log(res.data,"s---------a"); console.log(res.data,"s---------a");
primitiveSatelliteData.value = transformgroudSatelliteData(res.data) primitiveSatelliteData.value = transformgroudSatelliteData(res.data)
equipmentData.value = primitiveSatelliteData.value equipmentData.value = primitiveSatelliteData.value
...@@ -537,6 +536,51 @@ const errorDeviceList = ref('') ...@@ -537,6 +536,51 @@ const errorDeviceList = ref('')
// watch(()=>errorDeviceList.value, (newVal, oldVal) => { // watch(()=>errorDeviceList.value, (newVal, oldVal) => {
// console.log('*******111112errorDeviceList 变化了:', 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) => { const transformgroudSatelliteData = (data) => {
// console.log("*******11111222111111************", data,data.groundNetworkElementResponses); // console.log("*******11111222111111************", data,data.groundNetworkElementResponses);
// 检查 data 是否为对象且不为 null // 检查 data 是否为对象且不为 null
......
src/pages/lefts2/component/cruve.vue
浏览文件 @ 91845458
...@@ -3,27 +3,7 @@ ...@@ -3,27 +3,7 @@
<div class="container"> <div class="container">
<div class="main"> <div class="main">
<div :id="idName" class="cdfCurve"></div> <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> </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> </div>
</template> </template>
...@@ -34,12 +14,8 @@ export default { ...@@ -34,12 +14,8 @@ export default {
</script> </script>
<script setup> <script setup>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
// import childrenCdfCurve from './childrenCdfCurve.vue' import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
import { onMounted, onUnmounted, ref } from 'vue';
const props = defineProps({ const props = defineProps({
idName: { idName: {
...@@ -56,36 +32,15 @@ const props = defineProps({ ...@@ -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; 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(() => { onMounted(() => {
initChart(); initChart();
}); });
...@@ -97,122 +52,253 @@ onUnmounted(() => { ...@@ -97,122 +52,253 @@ 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); const chartDom = document.getElementById(props.idName);
chartDom.style.height = '300px';
chartDom.style.width = '360px';
if (!chartDom) {
console.error("DOM 元素未找到:", props.idName);
return;
}
myChart = echarts.init(chartDom); myChart = echarts.init(chartDom);
// 设置新 option
const option = { const option = {
legend: { // tooltip: {
show: true, // trigger: 'axis',
data: ['CDF曲线图'], // position: function (pt) {
textStyle: { // return [pt[0], '10%'];
color: '#fff', // },
fontSize: 12 // backgroundColor: 'rgba(50,50,50,0.8)',
}, // borderColor: '#333',
// top: 'center', // borderWidth: 1,
left: 'center', // padding: 10,
backgroundColor: 'transparent', // textStyle: {
borderColor: 'transparent', // color: '#fff',
padding: [5, 10], // fontSize: 12
// 添加图标样式控制 // }
icon: 'rect', // 使用矩形图标 // },
itemWidth: 15, // 图例宽度 // title: {
itemHeight: 5, // 图例高度，设为较小值形成线条效果 // left: 'center',
// text: props.propsDate.chartName || 'CDF Curve',
}, // textStyle: {
grid: { // color: '#fff'
top: '15%', // }
right: '4%', // },
bottom: '10%', // toolbox: {
left: '8%' // feature: {
}, // dataZoom: {
// yAxisIndex: 'none'
// },
// restore: {},
// saveAsImage: {}
// }
// },
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], data: props.propsDate.dataX,
axisLine: {
lineStyle: {
color: '#fff'
}
},
axisLabel: { axisLabel: {
interval: 0, color: '#fff'
rotate: 0,
fontSize: 10,
color: '#fff',
} }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
max: 120, boundaryGap: [0, '100%'],
splitLine: { axisLine: {
show: true,
lineStyle: { lineStyle: {
color: 'rgba(255, 255, 255, 0.3)', color: '#fff'
width: 1,
type: 'dashed'
} }
}, },
splitNumber: 5,
axisLabel: { axisLabel: {
color: '#fff', color: '#fff'
fontSize: 10, },
formatter: function (value) { splitLine: {
return value.toFixed(0); lineStyle: {
color: 'rgba(255, 255, 255, 0.2)'
} }
} }
}, },
dataZoom: [
{
type: 'inside',
start: 0,
end: 100
},
{
start: 0,
end: 100
}
],
series: [ series: [
{ {
name: 'CDF曲线图', name: props.propsDate.chartName || 'CDF',
data: [12, 13, 85, 53, 19, 23, 18],
type: 'line', type: 'line',
smooth: 0.6, smooth: true,
symbol: 'none', symbol: 'none',
lineStyle: { lineStyle: {
color: lineColor, width: 2
width: 5
}, },
areaStyle: { areaStyle: {
color: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ {
offset: 0, offset: 0,
color: lineColor color: 'rgba(58, 77, 233, 0.8)'
}, },
{ {
offset: 1, offset: 1,
color: 'rgba(0,0,0,0.31)' color: 'rgba(58, 77, 233, 0.1)'
}
])
},
data: props.propsDate.dataY
} }
], ],
global: false 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
},
// 固定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'
} }
}, },
markLine: { axisLabel: {
symbol: 'none', color: '#fff'
label: { }
show: false
}, },
data: [ yAxis: {
{ type: 'value',
yAxis: 45, boundaryGap: [0, '100%'],
axisLine: {
lineStyle: { lineStyle: {
color: '#ff0000', color: '#fff'
width: 2, }
type: 'dashed'
}, },
axisLabel: {
color: '#fff',
formatter: function (value) {
return value.toFixed(2); // 保留三位小数
}
}, },
{ splitLine: {
yAxis: 70,
lineStyle: { lineStyle: {
color: '#ff55f5', color: 'rgba(255, 255, 255, 0.2)'
width: 2, }
type: 'dashed' }
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 100
}, },
{
start: 0,
end: 100
} }
] ],
series: [
{
name: '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: [12, 13, 85, 53, 19, 23, 18]
} }
], ],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
...@@ -227,9 +313,7 @@ function initChart() { ...@@ -227,9 +313,7 @@ function initChart() {
fontSize: 12 fontSize: 12
}, },
// 固定tooltip位置在顶部 // 固定tooltip位置在顶部
// position: function (pos, params, dom, rect, size) {
// return ['10%', pos[1]];
// }
} }
}; };
...@@ -256,7 +340,6 @@ function resizeChart() { ...@@ -256,7 +340,6 @@ function resizeChart() {
.main { .main {
width: 100%; width: 100%;
height: 95%; height: 95%;
/* border: 1px solid #3A4C5B; */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
...@@ -265,54 +348,8 @@ function resizeChart() { ...@@ -265,54 +348,8 @@ function resizeChart() {
.cdfCurve { .cdfCurve {
width: 100%; width: 100%;
/* flex: 1; */
min-height: 180px; min-height: 180px;
/* 改为min-height确保足够空间 */
position: relative; position: relative;
z-index: 1; 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> </style>
\ No newline at end of file
src/pages/lefts2/index.vue
浏览文件 @ 91845458
<template> <template>
<div class="equipment-panel_header11"> <!-- <div class="left2all"> -->
<!-- <div class="equipment-panel_header11">
<div class="equipment-panel_header11_content"> <div class="equipment-panel_header11_content">
<div class="header-item header-item-left" @click="backHomeClick"> <div class="header-item header-item-left" @click="backHomeClick">
<span class="header-label"> <span class="header-label">
...@@ -10,7 +11,7 @@ ...@@ -10,7 +11,7 @@
</div> </div>
<div class="header-item header-item-center"> <div class="header-item header-item-center">
<span class="header-label header-item-center_label_title"> <span class="header-label header-item-center_label_title">
<!-- {{ headerItemAllContent.forwardContent.imgUrl }} -->
<img :src="headerItemAllContent.forwardContent.imgUrl" alt="@" srcset="" <img :src="headerItemAllContent.forwardContent.imgUrl" alt="@" srcset=""
style="width: 50px; height: 30px;padding-right: 10px;position: relative;top: -5px;"> style="width: 50px; height: 30px;padding-right: 10px;position: relative;top: -5px;">
</span> </span>
...@@ -42,7 +43,7 @@ ...@@ -42,7 +43,7 @@
</div> </div>
</div> </div>
</div> </div> -->
<div class="constellation-panel"> <div class="constellation-panel">
<!-- 顶部区域：标题与核心指标 --> <!-- 顶部区域：标题与核心指标 -->
...@@ -84,12 +85,27 @@ ...@@ -84,12 +85,27 @@
<span class="equipment-panel_header-item-value">姿轨控系统</span> <span class="equipment-panel_header-item-value">姿轨控系统</span>
</div> --> </div> -->
<div class="query-panel"> <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-row">
<!-- 时间段选择 --> <!-- 时间段选择 -->
<div class="query-group time-range-group"> <div class="query-group time-range-group">
<label class="query-label">时间段</label> <label class="query-label">时间段</label>
<div class="time-range-container"> <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" start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
prefix-icon="none" class="time-picker" :popper-options="{ prefix-icon="none" class="time-picker" :popper-options="{
placement: 'bottom-start', placement: 'bottom-start',
...@@ -111,15 +127,15 @@ ...@@ -111,15 +127,15 @@
<!-- 卫星粒度选择 --> <!-- 卫星粒度选择 -->
<div class="query-group satellite-group"> <div class="query-group satellite-group">
<label class="query-label">卫星粒度</label> <label class="query-label">卫星粒度</label>
<el-select v-model="satelliteGranularity" class="satellite-select"> <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-option v-for="item in satelliteOptions" :key="item.value" :label="item.label" :value="item.value" @click="handleSatelliteGranularityChange(item.value)" />
</el-select> </el-select>
</div> </div>
</div> </div>
<!-- 查询按钮 --> <!-- 查询按钮 -->
<div class="query-button-container"> <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>
</div> </div>
...@@ -134,10 +150,11 @@ ...@@ -134,10 +150,11 @@
</div> </div>
<div class="equipment-panel"> <div class="equipment-panel">
<curve></curve> <curve :propsDate="left2BottomOpition"></curve>
</div> </div>
</div> </div>
</div> </div>
<!-- </div> -->
</template> </template>
<script setup> <script setup>
...@@ -147,15 +164,39 @@ import useAppStore from '@/store/module/app.js'; ...@@ -147,15 +164,39 @@ import useAppStore from '@/store/module/app.js';
// import Header from './component/header.vue' // import Header from './component/header.vue'
import wss from '@/utils/subSystemRequestSocket.js' import wss from '@/utils/subSystemRequestSocket.js'
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { getSubSystemOpitionListApi,getSubSystemCurveListApi } from '../../api/Zodiac'
import { message } from 'ant-design-vue';
const router = useRouter(); const router = useRouter();
const useAppStoreInstance = useAppStore(); const useAppStoreInstance = useAppStore();
const activeIndex = ref(0); const activeIndex = ref(0);
const arcHistoryActiveIndex = ref(0);
const currentTelemetryData = ref([]); 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 = [ const tabs = [
"姿轨控分系统", "姿轨控分系统",
...@@ -562,29 +603,112 @@ const THERMAL_wssTransformGroundSatelliteData = (data) => { ...@@ -562,29 +603,112 @@ const THERMAL_wssTransformGroundSatelliteData = (data) => {
return []; 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([ const satelliteOptions = ref([
{ label: 'TMK505轨道系姿态角Euler X', value: 'TMK505' }, // { 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' }
]); ]);
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 = () => { const cureSearchHandleFn = () => {
console.log('查询参数:', { if (!isFlagOfSeletctType.value) {
dateRange: dateRange.value, message.error('请选择卫星粒度');
satelliteGranularity: satelliteGranularity.value }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) => { const wssOpenHandle = (data) => {
...@@ -661,6 +785,10 @@ const handleTabClick = (index) => { ...@@ -661,6 +785,10 @@ const handleTabClick = (index) => {
}; };
onBeforeMount(() => { onBeforeMount(() => {
subSystemOptionsFn("CONTROL");
// console.log("12222222222222222222222222",satelliteOptions.value[0].code);
// 发送api请求 // 发送api请求
// subSystemStatisticsInfoApi({ // subSystemStatisticsInfoApi({
// id: 0, // id: 0,
...@@ -695,6 +823,9 @@ useAppStoreInstance.subsystemSocket.onmessage = (event) => { ...@@ -695,6 +823,9 @@ useAppStoreInstance.subsystemSocket.onmessage = (event) => {
// console.log('我是left2,type == time获取的wssRespone:', data); // console.log('我是left2,type == time获取的wssRespone:', data);
}; };
left2BottomOpition.value = {
isFirstSearch:false,
}
nextTick(() => { nextTick(() => {
watch(() => useAppStoreInstance.subsystemSocketContent, (newVal, oldValue) => { watch(() => useAppStoreInstance.subsystemSocketContent, (newVal, oldValue) => {
// const newValue = useAppStoreInstance.subsystemSocketContent // const newValue = useAppStoreInstance.subsystemSocketContent
...@@ -786,7 +917,17 @@ watch(() => useAppStoreInstance.subsystemSocketContent, (newVal, oldValue) => { ...@@ -786,7 +917,17 @@ watch(() => useAppStoreInstance.subsystemSocketContent, (newVal, oldValue) => {
overflow-y: auto; overflow-y: auto;
background-color: #010102; 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 { .equipment-panel_header11 {
position: fixed; position: fixed;
...@@ -962,6 +1103,9 @@ watch(() => useAppStoreInstance.subsystemSocketContent, (newVal, oldValue) => { ...@@ -962,6 +1103,9 @@ watch(() => useAppStoreInstance.subsystemSocketContent, (newVal, oldValue) => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 15px; gap: 15px;
/* 添加 */
/* max-height: 400px; */
} }
/* 标题栏 */ /* 标题栏 */
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论