提交 91845458 authored 作者: 周文艺's avatar 周文艺

显示问题

上级 b690ba04
/*
* @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
*/
......@@ -58,3 +58,19 @@ export function subSystemStatisticsInfoApi(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
<template>
<!--热力图-->
<!-- <template>
<热力图
<div style="height: 100%;background-color: blueviolet;" >
<div style="width: 100%;height: 100%;">
<div class="main">
......@@ -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度
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>
\ No newline at end of file
......@@ -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 ); // 根据播放速度调整间隔
};
// 停止自动播放
......
......@@ -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;
......
......@@ -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
......
差异被折叠。
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论