Skip to content

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

2026/1/15

上级 83ca81d5
显示空白字符变更
内嵌 并排
正在显示 包含 777 行增加 和 388 行删除
src/pages/all/components/loadingComponent/index.js
浏览文件 @ 542613e6
/*
* @Author: zwy 1518051043@qq.com
* @Date: 2026-01-04 09:13:55
* @LastEditors: zwy 1518051043@qq.com
* @LastEditTime: 2026-01-15 01:21:36
* @FilePath: \yuanxinPro\src\pages\all\components\loadingComponent\index.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
const Loading = (function() {
let loadingCount = 0;
let loadingInstance = null;
let styleInstance = null;
......@@ -13,41 +20,45 @@ const Loading = (function() {
spinnerSize = '40px'
} = options;
if (loadingCount === 0) {
// Create loading element if it doesn't exist
// 如果已经存在，直接复用（避免重复创建）
if (loadingInstance) return;
loadingInstance = document.createElement('div');
loadingInstance.className = 'custom-loading';
loadingInstance.style.position = 'fixed';
loadingInstance.style.top = '0';
loadingInstance.style.left = '0';
loadingInstance.style.width = '100%';
loadingInstance.style.height = '100%';
loadingInstance.style.backgroundColor = background;
loadingInstance.style.display = 'flex';
loadingInstance.style.justifyContent = 'center';
loadingInstance.style.alignItems = 'center';
loadingInstance.style.zIndex = zIndex;
loadingInstance.style.flexDirection = 'column';
Object.assign(loadingInstance.style, {
position: 'fixed',
top: '0',
left: '0',
width: '100%',
height: '100%',
backgroundColor: background,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
zIndex: String(zIndex),
flexDirection: 'column'
});
// Create spinner element
const spinnerEl = document.createElement('div');
spinnerEl.className = 'custom-loading-spinner';
spinnerEl.style.border = `4px solid rgba(0, 0, 0, 0.3)`;
spinnerEl.style.borderRadius = '50%';
spinnerEl.style.borderTop = `4px solid ${spinnerColor}`;
spinnerEl.style.width = spinnerSize;
spinnerEl.style.height = spinnerSize;
spinnerEl.style.animation = 'spin 1s linear infinite';
Object.assign(spinnerEl.style, {
border: '4px solid rgba(0, 0, 0, 0.3)',
borderRadius: '50%',
borderTop: `4px solid ${spinnerColor}`,
width: spinnerSize,
height: spinnerSize,
animation: 'spin 1s linear infinite'
});
// Create text element
const textEl = document.createElement('p');
textEl.className = 'custom-loading-text';
textEl.textContent = text;
textEl.style.color = color;
textEl.style.marginTop = '20px';
textEl.style.fontFamily = 'Arial, sans-serif';
Object.assign(textEl.style, {
color: color,
marginTop: '20px',
fontFamily: 'Arial, sans-serif'
});
// Add animation styles
styleInstance = document.createElement('style');
styleInstance.textContent = `
@keyframes spin {
......@@ -56,21 +67,14 @@ const Loading = (function() {
}
`;
// Assemble elements
loadingInstance.appendChild(spinnerEl);
loadingInstance.appendChild(textEl);
document.head.appendChild(styleInstance);
document.body.appendChild(loadingInstance);
}
loadingCount++;
}
function destroyLoading() {
if (loadingCount <= 0) return;
loadingCount--;
if (loadingCount === 0 && loadingInstance) {
if (loadingInstance) {
document.body.removeChild(loadingInstance);
document.head.removeChild(styleInstance);
loadingInstance = null;
......@@ -80,8 +84,7 @@ const Loading = (function() {
return {
show: createLoading,
hide: destroyLoading,
getCount: () => loadingCount // Optional: add method to get current loading count
hide: destroyLoading
};
})();
......
src/pages/all/index.vue
浏览文件 @ 542613e6
......@@ -115,34 +115,49 @@ const searchSatelliteRef = ref(null)
const handleSwitchChange = (item) => {
console.log("初始化调用11111",item.enabled,item);
switch (item.label) {
case '时间轴':
useAppStoreInstance.setisTimeLineShow(item.enabled)
if (window.ue5) {
window.ue5("callBackControlSwitchShowFn", String(JSON.stringify({
type: "TimeLineShow",
status: item.enabled ? "open" : "close"
})));}
break;
case '图例':
useAppStoreInstance.setislegendShow(item.enabled)
useAppStoreInstance.setisSourceLegendShow(item.enabled)
if (window.ue5) {
window.ue5("callBackControlSwitchShowFn", String(JSON.stringify({
type: "LegendShow",
status: item.enabled ? "open" : "close"
})));}
break;
case '数据面板':
useAppStoreInstance.setisdataPanelShow(item.enabled)
if (window.ue5) {
window.ue5("callBackControlSwitchShowFn", String(JSON.stringify({
type: "DataPanelShow",
status: item.enabled ? "open" : "close"
})));}
break;
case '卫星轨道':
useAppStoreInstance.setissatelliteOrbitShow(item.enabled)
if (window.ue5) {
window.ue5("callBackSatelliteOrbitShowFn", String(JSON.stringify({
value: item.enabled
})));
}
window.ue5("callBackControlSwitchShowFn", String(JSON.stringify({
type: "SatelliteOrbitShow",
status: item.enabled ? "open" : "close"
})));}
break;
case '卫星波束':
useAppStoreInstance.setissatelliteBeamShow(item.enabled)
if (window.ue5) {
window.ue5("callBackSatelliteBeamShowFn", String(JSON.stringify({
value: item.enabled
})));
}
window.ue5("callBackControlSwitchShowFn", String(JSON.stringify({
type: "SatelliteBeamShow",
status: item.enabled ? "open" : "close"
})));}
break;
default:
......@@ -181,7 +196,6 @@ watch(useAppStoreInstance, () => {
document.getElementById('all_footer').style.width = '100%'
// document.getElementById('all_footer').style.bottom = '10px'
// if (!useAppStoreInstance.islegendShow) {document.getElementById('all_footer').style.bottom = '20px'}
// document.getElementById('search_panel').style.left = '30px'
document.getElementById('control_panel1').style.right = '-30px'
......@@ -227,6 +241,7 @@ onActivated(() => {
});
onMounted(() => {
checkScreenSize();
handleSwitchChange({disabled: false,enabled: useAppStoreInstance.islegendShow,label: "图例"})
window.addEventListener('resize', checkScreenSize);
// console.log("111111111111114ononMounted",useAppStoreInstance.islegendShow,useAppStoreInstance.isTimeLineShow);
controls.value = [
......
src/pages/footer/component/timers.vue
浏览文件 @ 542613e6
......@@ -29,7 +29,7 @@
}"
/>
<div class="right_block">
<el-button class="right_block_confirm_btn" size="mini" @click="handleDateRangeChange(pick_select_date)">确认</el-button>
<el-button class="right_block_confirm_btn" size="mini" @click="handleDateRangeChange(pick_select_date)" :disabled="!is_flag_confirmAndPauseAndSpeed">确认</el-button>
<div class="right_block_center">
<!-- <el-button circle class="right_block_conter_btn" @click="playBackward">
<el-icon>
......@@ -40,13 +40,14 @@
circle
class="right_block_conter_btn_center"
@click="toggleAutoPlay"
:disabled="!is_flag_confirmAndPauseAndSpeed"
>
<el-icon >
<img v-if="!isPlaying" src="@/assets/images/footers/videoPause.png" alt="" style="width: 8px; height: 10px;" />
<img v-if="isPlaying" src="@/assets/images/footers/videoPlay.png" alt="" style="width: 8px; height: 10px;" />
</el-icon>
</el-button>
<el-button size="mini" @click="jumpToSpecificTime(new Date('2025-11-03 00:00:00'),true)">时间</el-button>
<!-- <el-button size="mini" @click="jumpToSpecificTime(new Date('2025-11-03 00:00:00'),true)">时间</el-button> -->
<!-- <el-button circle class="right_block_conter_btn" @click="playForward">
<el-icon>
<img src="@/assets/images/footers/videoPlay_right.png" alt="" style="width: 8px; height: 10px;" />
......@@ -54,7 +55,7 @@
</el-button> -->
</div>
<el-button size="mini" circle @click="changeSpeed" :disabled="is_flag_isRealtime" class="right_block_conter_btn_playbackSpeed" style="background: none;">x{{ playbackSpeed }}</el-button>
<el-button size="mini" circle @click="changeSpeed" :disabled="is_flag_isRealtime || !is_flag_confirmAndPauseAndSpeed" class="right_block_conter_btn_playbackSpeed" style="background: none;">x{{ playbackSpeed }}</el-button>
</div>
</div>
</div>
......@@ -72,13 +73,11 @@
class="time-marker"
:style="{ left: marker.position + '%' }"
>
<div
class="marker-line" :class="{ 'major-line': marker.isMajor, 'minor-line_color': index % showLengthmarkerLine === 0 }"></div>
<div class="marker-line" :class="{ 'major-line': marker.isMajor, 'minor-line_color': (index) % showLengthmarkerLine === 0 || index === timeMarkers.length - 1 }"></div>
<span
class="marker-label"
:class="{ 'selected-label': isMarkerInSelectedRange(marker) }"
v-if=" ((index-1) % showLength === 0 || index === timeMarkers.length - 1)"
v-if=" ((index) % showLength === 0 || index === timeMarkers.length - 1) "
v-html="marker.label"
></span>
......@@ -125,17 +124,18 @@ import Loading from '@/pages/all/components/loadingComponent/index.js'
import { ref, onMounted, onUnmounted, computed, watch, nextTick, onDeactivated } from 'vue';
import wss from '@/utils/requestSocekt.js'
import useAppStore from '@/store/module/app'
import { time } from 'echarts';
import { tr } from 'element-plus/es/locales.mjs';
// import { loading } from 'vxe-pc-ui';
const useAppStoreInstance = useAppStore();
const flagIsPlaying = ref(false)
const is_flag_confirmAndPauseAndSpeed = ref(true)
// 跳转到指定时间点
const jumpToSpecificTime = (targetTime,PerformDrag=false) => {
// console.log('跳转到指定时间点:', targetTime);
console.log('跳转到指定时间点:', targetTime);
isChange_flag_firstBackDate.value = false;
hasPlayed.value = false;
try {
......@@ -146,10 +146,10 @@ const jumpToSpecificTime = (targetTime,PerformDrag=false) => {
}
// 停止当前自动播放
if (isPlaying.value) {
console.log("我走了这里3")
stopAutoPlay();
}
// if (isPlaying.value) {
// console.log("我走了这里3")
// stopAutoPlay();
// }
const start = new Date(startDateTime.value).getTime();
const end = new Date(endDateTime.value).getTime();
......@@ -204,7 +204,7 @@ const jumpToSpecificTime = (targetTime,PerformDrag=false) => {
// // });
// // }
// });
playForward();
// playForward();
if(PerformDrag) {
endDrag();
// moveEndHandle();
......@@ -274,7 +274,7 @@ const wssMessageHandle = () => {
wss.onmessage = (event) => {
const data = JSON.parse(event.data);
// 只有history和实时模式数据，回复已收到数据的确认。要修改以下代码
if ((data.type === 'history') ) {
if ((data.type === 'history' && !(data?.isLagrangeInterpolation === true)) ) {
wssOpenHandle({
type: "confirm",
......@@ -291,9 +291,10 @@ const wssMessageHandle = () => {
// }, 2000);
}
// console.log('setTimeout:', (1000*60)/playbackSpeed.value,playbackSpeed.value);
if ((data.type === 'history' && (data?.isLagrangeInterpolation === true)) && (data.controlType === 'SMOOTH')) {
// playForward();
hasPlayed.value = true;
}
// 使用 Promise 包装 setTimeout
// await new Promise(resolve => {
// setTimeout(() => {
......@@ -302,19 +303,36 @@ const wssMessageHandle = () => {
// }, 2000)
// })
console.log('我是timer获取的wssRespone:', data);
console.log("我走了seekConfirm",!(data?.isLagrangeInterpolation === true));
let flagToNext = 0
Loading.hide()
if (data.type === 'control') {
if (data.dataTime ) {
preTimeWindowEnd.value = data.dataTime ;
if (data.type === 'control' && !(data.controlType === 'stop') && !(data.controlType === 'continue')) {
if (data.nextTimestamp ) {
preTimeWindowEnd.value = data.nextTimestamp || data.dataTime ;
}
if (!hasPlayed.value) {
playForward();
hasPlayed.value = true;
}
jumpToNextTime.value = data.remainingTimeMs || 0;
hasDraged_first_falseToTrue.value = true;
console.log("000000new Date(subtractSecondsAndFormat(alignTo56Seconds(selectedEndTime.value).toISOString(), jumpToNextTime.value+1))",new Date(subtractSecondsAndFormat(alignTo56Seconds(selectedEndTime.value).toISOString(), jumpToNextTime.value+2)));
jumpToSpecificTime(new Date(subtractSecondsAndFormat(alignTo56Seconds(selectedEndTime.value).toISOString(), jumpToNextTime.value+2)));
console.log("我走了ElMessage",hasDraged_first_falseToTrue.value , !(data?.isLagrangeInterpolation === true) , (data.controlType === 'seekConfirm'));
if (hasDraged_first_falseToTrue.value && !(data?.isLagrangeInterpolation === true) && (data.controlType === 'seekConfirm')) {
ElMessage({
type: 'success',
message: `${jumpToNextTime.value/1000}秒后可进行下次时间轴拖动！！！`,
})
}
}
if (data.type === 'error') {
wssResponeFlag_isSuccess.value = false;
// eleplate plus 关闭loading
// (loading.value).close()
Loading.hide()
ElMessage({
type: 'error',
message: data.message || `已暂停，没有查询到该时间段的历史数据！！！`,
......@@ -327,23 +345,33 @@ const wssMessageHandle = () => {
hasPlayed.value = false;
// 处理任务数据
}
if (data.type === 'history') {
if (data.type === 'history' && !(data?.isLagrangeInterpolation === true) ) {
// 处理日志数据
// console.log("endDateTime.value === selectedEndTime.value:", endDateTime.value , selectedEndTime.value.toISOString(),endDateTime.value === selectedEndTime.value);
useAppStoreInstance.setglobalStartWss(true)
if (data.nextTimestamp || data.timeWindowEnd ) {
preTimeWindowEnd.value = data.nextTimestamp || data.timeWindowEnd ;
}
hasDraged_first_falseToTrue.value = false;
if (!(is_flag_confirmAndPauseAndSpeed.value) && !(is_flag_isRealtime.value)) {
console.log("我走了is_flag_confirmAndPauseAndSpeed",!(is_flag_confirmAndPauseAndSpeed.value) && !(is_flag_isRealtime.value));
is_flag_confirmAndPauseAndSpeed.value = true;
}
// 跳转到上次时间点
// if (useAppStoreInstance.footerTimeHasedSelectTimeToSub) {
// jumpToSpecificTime(new Date(useAppStoreInstance.globalTimeLineEndSelectTime),true)
// }
preTimeAllDate.value = data;
// clearTimeout(WwflagToNext);
if (flagToNext !== 0) {
clearTimeout(flagToNext);
}
isChange_flag_firstBackDate.value = true;
// console.log("跳转再次获取数据1",(Date.now(formatDateTime(selectedStartTime.value)+1000*onMessageIndex.value)));
// 只进行时间上的跳转，不执行拖动的逻辑
// jumpToSpecificTime((Date.now(formatDateTime(selectedStartTime.value)+1000*onMessageIndex.value)) ,false)
onMessageIndex.value += 1
if (endDateTime.value === selectedEndTime.value.toISOString()) {
......@@ -385,7 +413,10 @@ const wssMessageHandle = () => {
useAppStoreInstance.setglobalStartWss(false)
// useAppStoreInstance.setglobalStartWss(false)
isChange_flag_firstBackDate.value = false;
console.log("我走了这里5")
ElMessage({
type: 'error',
message: data.message || `已暂停，没有查询到该时间段的历史数据！！！`,
})
stopAutoPlay();
// console.log('我是left,type == time获取的wssRespone:', JSONdata, typeof JSONdata.time);
// console.log('我是left,type == time获取的wssRespone:', JSONdata.time, typeof JSONdata.time);
......@@ -404,8 +435,8 @@ const wssMessageHandle = () => {
// 日期时间状态 (精确到秒)
const endDateTime = ref(new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString()); // 当前时间作为结束时间
const startDateTime = ref(new Date(Date.now() - 3 *24 * 60 * 60 * 1000).toISOString()); // 三天前作为开始时间
const endDateTime = ref(new Date(Date.now() ).toISOString()); // 当前时间作为结束时间
const startDateTime = ref(new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString()); // 三天前作为开始时间
const dateRange = ref([]);
// 滑块位置（百分比）
......@@ -457,35 +488,35 @@ const disabledDate = (time) => {
};
// 日期选择器快捷选项
const shortcuts = [
{
text: '最近一周',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
},
},
{
text: '最近一个月',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
},
},
{
text: '最近三个月',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
},
},
];
// const shortcuts = [
// {
// text: '最近一周',
// value: () => {
// const end = new Date();
// const start = new Date();
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
// return [start, end];
// },
// },
// {
// text: '最近一个月',
// value: () => {
// const end = new Date();
// const start = new Date();
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
// return [start, end];
// },
// },
// {
// text: '最近三个月',
// value: () => {
// const end = new Date();
// const start = new Date();
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
// return [start, end];
// },
// },
// ];
const pick_select_date = ref();
const pick_select_date_handFn = (val) => {
......@@ -512,12 +543,13 @@ const toNumber = (value) => {
}
// 点击确认后，处理日期范围变化
const handleDateRangeChange = async (val,flag = false) => {
console.log("0000000.02222",val,val.length,flag);
jiangerTime.value = 0;
isChange_flag_firstBackDate.value = false;
hasPlayed.value = false;
taskCode_everyChange.value = String(Date.now());
useAppStoreInstance.setglobalSubsystemTaskCode(toNumber(Date.now()));
useAppStoreInstance.setglobalSubsystemTaskCode(String(Date.now()));
useAppStoreInstance.setFooterTimeHasedSelectTimeToSub(true);
if (val && val.length > 0) {
......@@ -532,19 +564,21 @@ const handleDateRangeChange = async (val,flag = false) => {
// })
if(!flag) {
Loading.show()
console.log("cao cao1,Loading.show()");
}
// Loading.show()
if (val && val.length === 2) {
console.log("cao cao",val[0]);
console.log("cao cao11",val);
startDateTime.value = new Date((new Date(val[0])).setSeconds(56)).toISOString();
// preTimeWindowEnd.value = new Date((new Date(val[0])).setSeconds(56+60)).toISOString();
endDateTime.value = val[1].toISOString();
endDateTime.value = new Date((new Date(val[1]))).toISOString();
// console.log("//////////////////",val[0],"4444444444--",pick_select_date.value[0]);
// preTimeWindowEnd.value = new Date((new Date(new Date(selectedStartTime.value))).setSeconds(56+60)).toISOString();
useAppStoreInstance.setglobalSubsystemSelectedStartTime(val);
useAppStoreInstance.setglobalSubsystemSelectedEndTime(formatDateTime(val[1]));
// useAppStoreInstance.setglobalSubsystemSelectedEndTime(formatDateTime(val[1]));
isDraged.value = false;
......@@ -574,8 +608,9 @@ const handleDateRangeChange = async (val,flag = false) => {
})
window.ue5("callBackTimeFn", String(JSON.stringify({
isRealtime: is_flag_isRealtime.value? true: false,
startTime: formatDateTime(val[0]),
endTime: formatDateTime(val[1]),
startTime: (formatDateTime(val[0])),
speed:playbackSpeed.value,
endTime: (formatDateTime(val[1])),
taskCode: String(taskCode_everyChange.value),
//时间参数
......@@ -619,12 +654,13 @@ const handleDateRangeChange = async (val,flag = false) => {
is_flag_isRealtime.value = true;
isChange_flag_select_date.value = false;//表示已经选过时间段了
playbackSpeed.value = 1;
stopAutoPlay();
// 切换实时模式的时候，之前的播放任务停止
wssOpenHandle({
isRealtime: is_flag_isRealtime.value? true: false,
status: "stop",
taskCode: String(taskCode_everyChange.value),
})
// wssOpenHandle({
// isRealtime: is_flag_isRealtime.value? true: false,
// // status: "stop",
// // taskCode: String(taskCode_everyChange.value),
// })
// 标志实时模式
// if(window.ue5) {
// window.ue5("callBackTimeFn", String(JSON.stringify({
......@@ -665,7 +701,7 @@ watch(() => wssResponeFlag_isSuccess.value, (newVal) => {
const isDateRangeNotEmpty = ref(false);
const autoUpdateDateRange = ref(null);
autoUpdateDateRange.value = setInterval(() => {
autoHandleDateRangeChange([new Date(new Date(Date.now() - 3*24 * 60 * 60 * 1000).toISOString()),new Date(new Date(Date.now() ).toISOString())]);
autoHandleDateRangeChange([new Date(new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString()),new Date(new Date(Date.now() ).toISOString())]);
}, 1000);
watch(() => isDateRangeNotEmpty.value, (newVal) => {
......@@ -673,11 +709,11 @@ watch(() => isDateRangeNotEmpty.value, (newVal) => {
if (newVal) {
autoUpdateDateRange.value = setInterval(() => {
console.log("开启循环",autoUpdateDateRange.value);
autoHandleDateRangeChange([new Date(new Date(Date.now() - 3*24 * 60 * 60 * 1000).toISOString()),new Date(new Date(Date.now() ).toISOString())]);
// console.log("开启循环",autoUpdateDateRange.value);
autoHandleDateRangeChange([new Date(new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString()),new Date(new Date(Date.now() ).toISOString())]);
}, 1000);
} else {
console.log("关闭循环",autoUpdateDateRange.value);
// console.log("关闭循环",autoUpdateDateRange.value);
clearInterval(autoUpdateDateRange.value);
}
});
......@@ -704,7 +740,7 @@ const generateTimelineDates = () => {
while (current <= end) {
dates.push(new Date(current));
current.setDate(current.getDate() + 1);
current.setDate(current.getDate() + 60);
}
timelineDates.value = dates;
......@@ -717,39 +753,35 @@ const timeMarkers = computed(() => {
const end = new Date(endDateTime.value);
const totalMs = totalMilliseconds.value;
// 生成每半小时的刻度
const currentTime = new Date(start);
currentTime.setMinutes(0, 0, 0); // 重置到整点
if (totalMs <= 0) return []; // 防止除零错误
while (currentTime <= end) {
// 确保时间在范围内
if (currentTime >= start) {
const position = ((currentTime.getTime() - start.getTime()) / totalMs) * 100;
// 将0分和30分设为主要刻度
const minutes = currentTime.getMinutes();
const isMajor = minutes === 0 ;
// 格式化标签显示
const year = currentTime.getFullYear();
const month = String(currentTime.getMonth() + 1).padStart(2, '0');
const day = String(currentTime.getDate()).padStart(2, '0');
const hours = String(currentTime.getHours()).padStart(2, '0');
const mins = String(currentTime.getMinutes()).padStart(2, '0');
// 第一个刻度：直接使用 start 时间（保留原始分钟/秒）
const firstMarkerTime = new Date(start);
const firstPosition = 0; // 因为就是起点
markers.push({
time: firstMarkerTime,
label: `${firstMarkerTime.getFullYear()}-${String(firstMarkerTime.getMonth() + 1).padStart(2, '0')}-${String(firstMarkerTime.getDate()).padStart(2, '0')} <br>${String(firstMarkerTime.getHours()).padStart(2, '0')}:${String(firstMarkerTime.getMinutes()).padStart(2, '0')}`,
position: firstPosition,
isMajor: true, // 起始点视为主刻度
showLabel: true
});
// 对于主要刻度显示完整时间，次要刻度只显示时间
let label = `${year}-${month}-${day} <br>${hours}:${mins}`;
// 后续刻度：从 start 的下一个**整点**开始，每 60 分钟加一个
const nextHour = new Date(start);
nextHour.setMinutes(0, 0, 0); // 先对齐到当前小时整点
nextHour.setHours(nextHour.getHours() + 1); // 跳到下一个整点（避免重复）
let current = new Date(nextHour);
while (current <= end) {
const position = ((current.getTime() - start.getTime()) / totalMs) * 100;
markers.push({
time: new Date(currentTime),
label: label,
position: position,
isMajor: isMajor,
time: new Date(current),
label: `${current.getFullYear()}-${String(current.getMonth() + 1).padStart(2, '0')}-${String(current.getDate()).padStart(2, '0')} <br>${String(current.getHours()).padStart(2, '0')}:${String(current.getMinutes()).padStart(2, '0')}`,
position,
isMajor: true, // 每小时都是主刻度
showLabel: true
});
}
// 增加30分钟
currentTime.setMinutes(currentTime.getMinutes() +60);
current.setHours(current.getHours() + 1); // 每次 +1 小时
}
return markers;
......@@ -839,7 +871,7 @@ const updateSelectedTimes = () => {
selectedStartTime.value = startTime;
selectedEndTime.value = endTime;
if(!is_flag_isRealtime.value){
useAppStoreInstance.setGlobalTimeLineEndSelectTime(formatDateTime(startTime));
useAppStoreInstance.setGlobalTimeLineEndSelectTime(formatDateTime(selectedEndTime.value));
}
// console.log("************",useAppStoreInstance.globalTimeLineEndSelectTime);
......@@ -871,7 +903,7 @@ const toggleAutoPlay = () => {
window.ue5("callBackSpeedFn", String(JSON.stringify({
isRealtime: is_flag_isRealtime.value? true: false,
status: "stop",
step: playbackSpeed.value,
speed: playbackSpeed.value,
taskCode: String(taskCode_everyChange.value),
})));
......@@ -891,11 +923,15 @@ const toggleAutoPlay = () => {
isConfirmedWithRange.value = false; // 开始播放时重置标记
jiangerTime.value = 0;
playForward();
// console.log("我走了jumpToSpecificTime，-21",formatDateTime(selectedEndTime.value));
jumpToSpecificTime(new Date(addOneSecond(formatDateTime(selectedEndTime.value),1)));
// console.log("我走了jumpToSpecificTime，-21---------2",formatDateTime(selectedEndTime.value),subtractSecondsAndFormat(new Date((formatDateTime(selectedEndTime.value)).replace(' ', 'T') + '+08:00').toString(),-21));
if(window.ue5) {
window.ue5("callBackSpeedFn", String(JSON.stringify({
isRealtime: is_flag_isRealtime.value? true: false,
status: 'continue',
step: playbackSpeed.value,
speed: playbackSpeed.value,
taskCode: String(taskCode_everyChange.value),
})));
// window.ue5("callBackTimeFn", String(JSON.stringify({
......@@ -926,6 +962,9 @@ const is_flag_playBackwarding = ref(true);
// 开始向前播放
const playForward = async () => {
is_flag_playBackwarding.value = true;
if (flag_SetTimeOutCycle.value === null) {
handleSetTimeOutCycle();
}
if (1) {
console.log("再次我是开始向前播放stopAutoPlay()",isPlaying.value);
......@@ -1024,7 +1063,10 @@ const stopAutoPlay = () => {
playbackInterval.value = null;
}
if (flag_SetTimeOutCycle.value !== null) {
clearInterval(flag_SetTimeOutCycle.value);
flag_SetTimeOutCycle.value = null;
}
// 强制更新视图
nextTick(() => {
......@@ -1088,7 +1130,7 @@ const changeSpeed = () => {
wssOpenHandle({
isRealtime: is_flag_isRealtime.value? true: false,
isFastForward: playbackSpeed.value === 1 || playbackSpeed.value === '1'?false:true,
speed: playbackSpeed.value,
step: playbackSpeed.value,
taskCode: String(taskCode_everyChange.value),
})
}
......@@ -1109,17 +1151,22 @@ const startDrag = (handle, e) => {
isDragging.value = true;
currentDragHandle.value = handle;
e.preventDefault();
console.log("拖动开始",selectedEndTime.value);
// 手动拖动时停止自动播放
if (isPlaying.value) {
console.log("我是拖动开始stopAutoPlay()",isPlaying.value);
console.log("我走了这里9")
stopAutoPlay();
}
// if (isPlaying.value) {
// console.log("我是拖动开始stopAutoPlay()",isPlaying.value);
// console.log("我走了这里9")
// stopAutoPlay();
// }
if(!hasDraged_first_falseToTrue.value) {
// 添加全局事件监听器
window.addEventListener('mousemove', handleDrag);
window.addEventListener('mouseup', endDrag);
}else{
ElMessage.warning("已拖动过，请等待执行下次拖动！");
}
};
// 处理拖动
......@@ -1127,11 +1174,11 @@ const handleDrag = (e) => {
if (!isDragging.value || !currentDragHandle.value || !sliderTrack.value) return;
// 手动拖动时停止自动播放
if (isPlaying.value) {
console.log("我是处理拖动stopAutoPlay()",isPlaying.value);
console.log("我走了这里10")
stopAutoPlay();
}
// if (isPlaying.value) {
// console.log("我是处理拖动stopAutoPlay()",isPlaying.value);
// console.log("我走了这里10")
// stopAutoPlay();
// }
const rect = sliderTrack.value.getBoundingClientRect();
let percentage = ((e.clientX - rect.left) / rect.width) * 100;
......@@ -1149,13 +1196,91 @@ const handleDrag = (e) => {
updateSelectedTimes();
};
const alignTo56Seconds = (date) => {
const d = new Date(date); // 避免修改原对象
const seconds = d.getSeconds();
if (seconds <= 56) {
// 当前分钟的 56 秒
d.setSeconds(56, 0); // 设置秒为56，毫秒为0
} else {
// 超过56秒，跳到下一分钟的56秒
d.setMinutes(d.getMinutes() + 1);
d.setSeconds(56, 0);
}
return d;
};
const addOneSecond = (timeStr,sec = 1) => {
// 解析输入字符串为 Date 对象（注意：需指定时区为本地时间）
const [datePart, timePart] = timeStr.split(' ');
const [year, month, day] = datePart.split('-').map(Number);
const [hour, minute, second] = timePart.split(':').map(Number);
// 创建本地时间的 Date 对象（避免 UTC 解析偏差）
const date = new Date(year, month - 1, day, hour, minute, second);
// 加 1 秒（1000 毫秒）
date.setTime(date.getTime() + sec*1000);
// 格式化回 YYYY-MM-DD HH:mm:ss
const pad = (n) => String(n).padStart(2, '0');
const newYear = date.getFullYear();
const newMonth = pad(date.getMonth() + 1);
const newDay = pad(date.getDate());
const newHour = pad(date.getHours());
const newMinute = pad(date.getMinutes());
const newSecond = pad(date.getSeconds());
return `${newYear}-${newMonth}-${newDay} ${newHour}:${newMinute}:${newSecond}`;
};
const subtractSecondsAndFormat = (isoString, secondsToSubtract) => {
// 1. 解析 ISO 字符串（它代表 UTC 时间）
const date = new Date(isoString); // 这个 Date 对象内部是 UTC，但 JS 会按本地时区显示
// 2. 减去指定秒数
const newTime = date.getTime() - (secondsToSubtract) ;
// （毫秒）的话
// const newTime = date.getTime() - secondsToSubtract *1000;
const newDate = new Date(newTime);
// 3. 使用本地时间（中国标准时间）格式化，秒不补零
const year = newDate.getFullYear(); // 本地年
const month = String(newDate.getMonth() + 1).padStart(2, '0');
const day = String(newDate.getDate()).padStart(2, '0');
const hours = String(newDate.getHours()).padStart(2, '0'); // 本地小时（CST）
const minutes = String(newDate.getMinutes()).padStart(2, '0');
const seconds = newDate.getSeconds(); // 不补零！
console.log("我走了isoString",isoString,secondsToSubtract,`${year}-${month}-${day} ${hours}:${minutes}:${seconds}`);
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
const jumpToNextTime = ref(0);
const hasDraged_first_falseToTrue = ref(false);
// 结束拖动
const endDrag = () => {
console.log("开始执行");
isDragging.value = false;
currentDragHandle.value = null;
hasPlayed.value = false;
// console.log("拖动结束",alignTo56Seconds(selectedEndTime.value),"\n-------",alignTo56Seconds(selectedEndTime.value).toISOString(),"\n-------",jumpToNextTime.value,"\n-------",subtractSecondsAndFormat(alignTo56Seconds(selectedEndTime.value).toISOString(), jumpToNextTime.value));
// setTimeout(() => {
// jumpToSpecificTime(new Date(subtractSecondsAndFormat(alignTo56Seconds(selectedEndTime.value).toISOString(), jumpToNextTime.value)));
// jumpToNextTime.value = 0;
// }, 500);
// hasPlayed.value = true;
// 调用UE5回调函数
if (window.ue5) {
......@@ -1165,7 +1290,7 @@ const endDrag = () => {
console.log("开始isPlaying.value发送1111");
window.ue5("callBackTimeFn", String(JSON.stringify({
isRealtime: false,
replayTime: formatDateTime(selectedEndTime.value),
replayTime: (formatDateTime(selectedEndTime.value)),
taskCode: String(taskCode_everyChange.value),
})));
wssOpenHandle({
......@@ -1195,6 +1320,8 @@ const endDrag = () => {
window.removeEventListener('mousemove', handleDrag);
window.removeEventListener('mouseup', endDrag);
updateSelectedTimes();
is_flag_confirmAndPauseAndSpeed.value = false;
stopAutoPlay();
};
// 更新时间轴
......@@ -1211,13 +1338,73 @@ const updateTimeline = () => {
startHandlePercent.value = 0;
endHandlePercent.value = 0 ;
};
// 2025.11.02-06.00.00转换成2025-11-02 06:00:00并返回
const convertTimeFormat = (input) => {
// 使用正则匹配格式：YYYY.MM.DD-HH.mm.ss
const match = input.match(/^(\d{4})\.(\d{2})\.(\d{2})-(\d{2})\.(\d{2})\.(\d{2})$/);
if (!match) {
console.warn('Invalid time format:', input);
return null; // 抛出错误
}
const [, year, month, day, hour, minute, second] = match;
return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
};
// 2025-11-02 06:00:00转换成2025.11.02-06.00.00并返回
const trackCycleTimePoint = (timeStr) => {
// 支持传入 Date 对象或字符串
const date = timeStr instanceof Date ? timeStr : new Date(timeStr);
if (isNaN(date.getTime())) {
console.error('Invalid time string:', timeStr);
return '';
}
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
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 `${year}.${month}.${day}-${hours}.${minutes}.${seconds}`;
};
const flag_SetTimeOutCycle = ref(null)
const handleSetTimeOutCycle = () => {
if (flag_SetTimeOutCycle.value === null) {
flag_SetTimeOutCycle.value =setInterval(() => {
console.log("我走了setInterval",trackCycleTimePoint(formatDateTime(selectedEndTime.value)));
if (window.ue5) {
window.ue5("callBackCycleTimePointFn", String(JSON.stringify({
currentTime: trackCycleTimePoint(formatDateTime(selectedEndTime.value)),
})));
}
}, 1000*2);
}
}
watch(() => is_flag_isRealtime.value, (newVal, oldVal) => {
if (newVal === false && isPlaying.value) {
handleSetTimeOutCycle();
}else {
// 👇 切换到实时模式，关闭循环
if (flag_SetTimeOutCycle.value !== null) {
clearInterval(flag_SetTimeOutCycle.value);
flag_SetTimeOutCycle.value = null;
}
}
});
onMounted(() => {
if (useAppStoreInstance.globalisFromTosub) {
console.log("00000000.000从分系统进来");
if (useAppStoreInstance.footerTimeHasedSelectTimeToSub) {
const tempDateTime = useAppStoreInstance.globalTimeLineEndSelectTime
console.log("00000000.000从分系统进来",tempDateTime);
handleDateRangeChange(useAppStoreInstance.globalSubsystemSelectedStartTime,true);
// jumpToSpecificTime(new Date(useAppStoreInstance.globalTimeLineEndSelectTime),true)
dateRange.value = [new Date((new Date(useAppStoreInstance.globalSubsystemSelectedStartTime[0]))).toISOString(),new Date((new Date(useAppStoreInstance.globalSubsystemSelectedStartTime[1]))).toISOString()]
handleDateRangeChange(useAppStoreInstance.globalSubsystemSelectedStartTime);
// Loading.show();
// jumpToSpecificTime(new Date(tempDateTime))
}else {
updateTimeline();
......@@ -1239,6 +1426,7 @@ console.log("00000000.111默认进来");
// })
}
}
useAppStoreInstance.setGlobalisFromTosub(false)
});
// 定义定时器引用
......@@ -1312,12 +1500,19 @@ watch(
{ deep: true, immediate: true }
);
const getDayRangeFromTime = (timeStr) => {
const [datePart] = timeStr.split(' ');
const [year, month, day] = datePart.split('-').map(Number);
const startOfDay = new Date(year, month - 1, day, 0, 0, 0);
const endOfDay = new Date(year, month - 1, day + 1, 0, 0, 0);
return [startOfDay,endOfDay];
};
onUnmounted(() => {
stopAutoPlay();
window.removeEventListener('mousemove', handleDrag);
window.removeEventListener('mouseup', endDrag);
console.log("jieshuli 1，组件卸载时要发暂停");
useAppStoreInstance.setGlobalSubsystemSelectedTimeRange(getDayRangeFromTime(useAppStoreInstance.globalTimeLineEndSelectTime));
console.log("jieshuli 1，组件卸载时要发暂停",getDayRangeFromTime(useAppStoreInstance.globalTimeLineEndSelectTime)[0],getDayRangeFromTime(useAppStoreInstance.globalTimeLineEndSelectTime)[1]);
if(is_flag_isRealtime.value){
// 实时传输时，组件卸载时要发暂停
}else{
......@@ -1350,6 +1545,8 @@ onUnmounted(() => {
</script>
<style scoped>
.timeline-container {
min-width: 800px;
......
src/pages/footer2/timers.vue
浏览文件 @ 542613e6
......@@ -44,7 +44,7 @@
<img src="@/assets/images/footers/videoPlay_left.png" alt="" style="width: 8px; height: 10px;" />
</el-icon>
</el-button> -->
<el-button
<!-- <el-button
circle
class="right_block_conter_btn_center"
@click="toggleAutoPlay"
......@@ -54,8 +54,8 @@
<img v-if="!isPlaying" src="@/assets/images/footers/videoPause.png" alt="" style="width: 8px; height: 10px;" />
<img v-if="isPlaying" src="@/assets/images/footers/videoPlay.png" alt="" style="width: 8px; height: 10px;" />
</el-icon>
</el-button>
<el-button size="mini" @click="jumpToSpecificTime(new Date('2025-11-03 00:00:00'))">时间</el-button>
</el-button> -->
<!-- <el-button size="mini" @click="jumpToSpecificTime(new Date('2025-11-03 00:00:00'))">时间</el-button> -->
<!-- <el-button circle class="right_block_conter_btn" @click="playForward">
<el-button circle class="right_block_conter_btn" @click="playForward">
<el-icon>
......@@ -64,7 +64,7 @@
</el-button> -->
</div>
<el-button size="mini" circle @click="changeSpeed" :disabled="is_flag_isRealtime" class="right_block_conter_btn_playbackSpeed" style="background: none;">x{{ playbackSpeed }}</el-button>
<!-- <el-button size="mini" circle @click="changeSpeed" :disabled="is_flag_isRealtime" class="right_block_conter_btn_playbackSpeed" style="background: none;">x{{ playbackSpeed }}</el-button> -->
</div>
</div>
</div>
......@@ -82,13 +82,11 @@
class="time-marker"
:style="{ left: marker.position + '%' }"
>
<div
class="marker-line" :class="{ 'major-line': marker.isMajor, 'minor-line_color': index % showLengthmarkerLine === 0 }"></div>
<div class="marker-line" :class="{ 'major-line': marker.isMajor, 'minor-line_color': (index) % showLengthmarkerLine === 0 || index === timeMarkers.length - 1 }"></div>
<span
class="marker-label"
:class="{ 'selected-label': isMarkerInSelectedRange(marker) }"
v-if=" (index % showLength === 0 || index === timeMarkers.length - 1)"
v-if=" ((index) % showLength === 0 || index === timeMarkers.length - 1) "
v-html="marker.label"
></span>
</div>
......@@ -109,11 +107,11 @@
<div class="handle-tooltip">{{ formatDateTime(selectedStartTime) }}</div>
</div>
<!-- 结束滑块 -->
<!-- 结束滑块 @mousedown="startDrag('end', $event)" -->
<div
class="slider-handle end-handle"
:style="{ left: endHandlePosition }"
@mousedown="startDrag('end', $event)"
>
<div class="handle-rail">
<div class="handle-tooltip" :class="{'handle-tooltip_auto': !is_flag_isRealtime}">{{ formatDateTime(selectedEndTime) }}</div>
......@@ -128,18 +126,41 @@
<script setup>
import { VideoPlay, VideoPause, CaretLeft, CaretRight } from '@element-plus/icons-vue';
import { Hide, View } from '@element-plus/icons-vue'
import { ElLoading, ElMessage } from 'element-plus'
import Loading from '@/pages/all/components/loadingComponent/index.js'
import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue';
// import wss from '@/utils/subSystemRequestSocket.js'
import useAppStore from '@/store/module/app'
import { Hide, View } from '@element-plus/icons-vue'
import SubWss from '@/utils/subSystemRequestSocket.js'
import { useRoute } from 'vue-router';
import { el, tr } from 'element-plus/es/locales.mjs';
import { fa } from 'element-plus/es/locales.mjs';
// 获取要跳转的时间点
const subtractSeconds = (timeStr, sec) => {
// 解析输入字符串为 Date 对象（注意：需指定时区为本地时间）
const [datePart, timePart] = timeStr.split(' ');
const [year, month, day] = datePart.split('-').map(Number);
const [hour, minute, second] = timePart.split(':').map(Number);
// 创建本地时间的 Date 对象（避免 UTC 解析偏差）
const date = new Date(year, month - 1, day, hour, minute, second);
// 减去 sec 秒（1000 毫秒）
date.setTime(date.getTime() - sec * 1000);
// 格式化回 YYYY-MM-DD HH:mm:ss
const pad = (n) => String(n).padStart(2, '0');
const newYear = date.getFullYear();
const newMonth = pad(date.getMonth() + 1);
const newDay = pad(date.getDate());
const newHour = pad(date.getHours());
const newMinute = pad(date.getMinutes());
const newSecond = pad(date.getSeconds());
return `${newYear}-${newMonth}-${newDay} ${newHour}:${newMinute}:${newSecond}`;
};
// 跳转到指定时间点
const jumpToSpecificTime = (targetTime) => {
......@@ -154,6 +175,7 @@ const jumpToSpecificTime = (targetTime) => {
// 停止当前自动播放
if (isPlaying.value) {
console.log("我走了这里3")
stopAutoPlay();
}
......@@ -228,14 +250,14 @@ const useAppStoreInstance = useAppStore();
const isFlagTimeLineShow = ref(true);
const wssOpenHandle = (data) => {
// console.log('wssOpenHandle', wss,wss.readyState, WebSocket.OPEN);
if (useAppStoreInstance.subsystemSocket.readyState === WebSocket.OPEN) {
if (SubWss.readyState === WebSocket.OPEN) {
// 如果连接已打开，直接发送数据
useAppStoreInstance.subsystemSocket.send(JSON.stringify(data));
SubWss.send(JSON.stringify(data));
} else
{
// 否则等待连接打开后再发送
useAppStoreInstance.subsystemSocket.onopen = () => {
useAppStoreInstance.subsystemSocket.send(JSON.stringify(data));
SubWss.onopen = () => {
SubWss.send(JSON.stringify(data));
};
}
};
......@@ -244,8 +266,9 @@ const hasPlayed = ref(false);
const loading = ref('');
const wssMessageHandle = () => {
useAppStoreInstance.subsystemSocket.onmessage = (event) => {
SubWss.onmessage = (event) => {
const Jsondata = JSON.parse(event.data);
console.log("我走了这里，收到数据1");
// wssOpenHandle({
// type: "confirm",
// taskCode: toNumber(useAppStoreInstance.globalSubsystemTaskCode),
......@@ -253,15 +276,20 @@ const loading = ref('');
// })
let flagToNext = 0
if (Jsondata.type === 'status') {
Jsondata.status === 'STOP' ? stopAutoPlay() : "不执行";
console.log("我走了这里，收到数据2");
if (Jsondata.status === 'STOP') {
console.log("我走了这里4")
stopAutoPlay()
hasPlayed.value = false;
}
isChange_flag_firstBackDate.value = false;
hasPlayed.value = false;
if (Jsondata.nextTimestamp || Jsondata.timeWindowEnd) {
preTimeWindowEnd.value = Jsondata.nextTimestamp || Jsondata.timeWindowEnd ;
}
}
// console.log("222222222FOOT2---------",Jsondata);
if (Jsondata.type === 'no_data') {
else if (Jsondata.type === 'no_data') {
console.log("我走了这里，收到数据3");
isChange_flag_firstBackDate.value = false;
// wssResponeFlag_isSuccess.value = false;
// 关闭eleplate loading
......@@ -271,24 +299,30 @@ const loading = ref('');
type: 'error',
message: `已暂停，没有查询到该时间段的历史数据！！！`,
})
console.log("我走了这里5")
stopAutoPlay();
// hasPlayed.value = false;
// console.log("获取的wssResponeFlag_isSuccess信息2:", wssResponeFlag_isSuccess.value);
}else if (Jsondata.type === 'data_end') {
}
else if (Jsondata.type === 'data_end') {
console.log("我走了这里，收到数据4");
isChange_flag_firstBackDate.value = false;
Loading.hide()
ElMessage({
type: 'error',
message: `已暂停，数据推送完成！！！`,
})
console.log("我走了这里6")
stopAutoPlay();
}else {
wssOpenHandle({
type: "confirm",
taskCode: String(useAppStoreInstance.globalSubsystemTaskCode),
clientType: "web"
})
// 此时的后端还没写确认的逻辑
// wssOpenHandle({
// type: "confirm",
// taskCode: String(useAppStoreInstance.globalSubsystemTaskCode),
// clientType: "web"
// })
console.log("我走了这里，收到数据4");
if (Jsondata.nextTimestamp || Jsondata.timeWindowEnd) {
preTimeWindowEnd.value = Jsondata.nextTimestamp || Jsondata.timeWindowEnd ;
......@@ -306,6 +340,7 @@ const loading = ref('');
// startAutoPlay();
if (endDateTime.value === selectedEndTime.value.toISOString()) {
stopAutoPlay();
console.log("我走了这里7")
}else{
if (!hasPlayed.value) {
playForward();
......@@ -373,8 +408,8 @@ const showLength = computed(() => {
})
// 日期时间状态 (精确到秒)
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 endDateTime = ref(new Date(Date.now() ).toISOString()); // 当前时间作为结束时间
const startDateTime = ref(new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString()); // 三天前作为开始时间
const dateRange = ref([]);
// 滑块位置（百分比）
......@@ -416,35 +451,35 @@ const disabledDate = (time) => {
};
// 日期选择器快捷选项
const shortcuts = [
{
text: '最近一周',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
},
},
{
text: '最近一个月',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
},
},
{
text: '最近三个月',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
},
},
];
// const shortcuts = [
// {
// text: '最近一周',
// value: () => {
// const end = new Date();
// const start = new Date();
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
// return [start, end];
// },
// },
// {
// text: '最近一个月',
// value: () => {
// const end = new Date();
// const start = new Date();
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
// return [start, end];
// },
// },
// {
// text: '最近三个月',
// value: () => {
// const end = new Date();
// const start = new Date();
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
// return [start, end];
// },
// },
// ];
const pick_select_date = ref();//未使用
// const pick_select_date_handFn = (val) => {
......@@ -586,7 +621,7 @@ watch(() => wssResponeFlag_isSuccess.value, (newVal) => {
}
else {
console.log("我是watch(())stopAutoPlay()");
console.log("我走了这里8")
stopAutoPlay();
// wss.close()
}
......@@ -595,7 +630,7 @@ watch(() => wssResponeFlag_isSuccess.value, (newVal) => {
const isDateRangeNotEmpty = ref(false);
const autoUpdateDateRange = ref(null);
autoUpdateDateRange.value = setInterval(() => {
autoHandleDateRangeChange([new Date(new Date(Date.now() - 3*24 * 60 * 60 * 1000).toISOString()),new Date(new Date(Date.now() ).toISOString())]);
autoHandleDateRangeChange([new Date(new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString()),new Date(new Date(Date.now() ).toISOString())]);
}, 1000);
watch(() => isDateRangeNotEmpty.value, (newVal) => {
......@@ -611,7 +646,7 @@ watch(() => isDateRangeNotEmpty.value, (newVal) => {
autoHandleDateRangeChange([new Date(new Date(Date.now() - 3*24 * 60 * 60 * 1000).toISOString()),new Date(new Date(Date.now() ).toISOString())]);
autoHandleDateRangeChange([new Date(new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString()),new Date(new Date(Date.now() ).toISOString())]);
}, 1000);
} else {
console.log("关闭循环",autoUpdateDateRange.value);
......@@ -654,39 +689,35 @@ const timeMarkers = computed(() => {
const end = new Date(endDateTime.value);
const totalMs = totalMilliseconds.value;
// 生成每半小时的刻度
const currentTime = new Date(start);
currentTime.setMinutes(0, 0, 0); // 重置到整点
while (currentTime <= end) {
// 确保时间在范围内
if (currentTime >= start) {
const position = ((currentTime.getTime() - start.getTime()) / totalMs) * 100;
// 将0分和30分设为主要刻度
const minutes = currentTime.getMinutes();
const isMajor = minutes === 0 ;
if (totalMs <= 0) return []; // 防止除零错误
// 格式化标签显示
const year = currentTime.getFullYear();
const month = String(currentTime.getMonth() + 1).padStart(2, '0');
const day = String(currentTime.getDate()).padStart(2, '0');
const hours = String(currentTime.getHours()).padStart(2, '0');
const mins = String(currentTime.getMinutes()).padStart(2, '0');
// 第一个刻度：直接使用 start 时间（保留原始分钟/秒）
const firstMarkerTime = new Date(start);
const firstPosition = 0; // 因为就是起点
markers.push({
time: firstMarkerTime,
label: `${firstMarkerTime.getFullYear()}-${String(firstMarkerTime.getMonth() + 1).padStart(2, '0')}-${String(firstMarkerTime.getDate()).padStart(2, '0')} <br>${String(firstMarkerTime.getHours()).padStart(2, '0')}:${String(firstMarkerTime.getMinutes()).padStart(2, '0')}`,
position: firstPosition,
isMajor: true, // 起始点视为主刻度
showLabel: true
});
// 对于主要刻度显示完整时间，次要刻度只显示时间
let label = `${year}-${month}-${day} <br>${hours}:${mins}`;
// 后续刻度：从 start 的下一个**整点**开始，每 60 分钟加一个
const nextHour = new Date(start);
nextHour.setMinutes(0, 0, 0); // 先对齐到当前小时整点
nextHour.setHours(nextHour.getHours() + 1); // 跳到下一个整点（避免重复）
let current = new Date(nextHour);
while (current <= end) {
const position = ((current.getTime() - start.getTime()) / totalMs) * 100;
markers.push({
time: new Date(currentTime),
label: label,
position: position,
isMajor: isMajor,
time: new Date(current),
label: `${current.getFullYear()}-${String(current.getMonth() + 1).padStart(2, '0')}-${String(current.getDate()).padStart(2, '0')} <br>${String(current.getHours()).padStart(2, '0')}:${String(current.getMinutes()).padStart(2, '0')}`,
position,
isMajor: true, // 每小时都是主刻度
showLabel: true
});
}
// 增加30分钟
currentTime.setMinutes(currentTime.getMinutes() + 30);
current.setHours(current.getHours() + 1); // 每次 +1 小时
}
return markers;
......@@ -809,6 +840,7 @@ const toggleAutoPlay = () => {
if (isPlaying.value) {
status = 'stop';
console.log("我是切换自动播放状态stopAutoPlay()",isPlaying.value);
console.log("我走了这里9")
stopAutoPlay();
if (window.ue5) {
window.ue5("callBackSpeedFn", String(JSON.stringify({
......@@ -995,6 +1027,7 @@ const moveEndHandle = () => {
endHandlePercent.value = 100;
useAppStoreInstance.setglobalStartWss(false)
console.log("我是移动结束滑块stopAutoPlay()",isPlaying.value);
console.log("我走了这里10")
stopAutoPlay();
}
// wssOpenHandle({
......@@ -1063,6 +1096,7 @@ const startDrag = (handle, e) => {
// 手动拖动时停止自动播放
if (isPlaying.value) {
console.log("我是拖动开始stopAutoPlay()",isPlaying.value);
console.log("我走了这里11")
stopAutoPlay();
}
......@@ -1078,6 +1112,7 @@ const handleDrag = (e) => {
// 手动拖动时停止自动播放
if (isPlaying.value) {
console.log("我是处理拖动stopAutoPlay()",isPlaying.value);
console.log("我走了这里12")
stopAutoPlay();
}
......@@ -1163,7 +1198,6 @@ preTimeWindowEnd.value = "2026-11-01 00:00:00"
// 添加实时模式的时间出路逻辑
if(!useAppStoreInstance.footerTimeHasedSelectTimeToSub) {
updateTimeline();
useAppStoreInstance.setglobalSubsystemTaskCode(Date.now())
// 这里修改发送实时模式的数据内容
// wssOpenHandle({
......@@ -1181,12 +1215,14 @@ if(!useAppStoreInstance.footerTimeHasedSelectTimeToSub) {
// Loading.show();
}else {
updateTimeline();
console.log("我是初始",useAppStoreInstance.globalSubsystemSelectedStartTime);
console.log("我是初始",useAppStoreInstance.globalSubsystemSelectedTimeRange);
useAppStoreInstance.setGlobalSubsystemSelectedTimeRange(useAppStoreInstance.globalSubsystemSelectedTimeRange);
dataPickFalg.value = route.query.disabled || false;
dateRange.value = useAppStoreInstance.globalSubsystemSelectedStartTime
dataPickStartTime.value = formatDateTime(useAppStoreInstance.globalSubsystemSelectedStartTime[0]);
dataPickEndTime.value = formatDateTime(useAppStoreInstance.globalSubsystemSelectedStartTime[1]);
handleDateRangeChange(useAppStoreInstance.globalSubsystemSelectedStartTime);
dateRange.value = useAppStoreInstance.globalSubsystemSelectedTimeRange
dataPickStartTime.value = formatDateTime(useAppStoreInstance.globalSubsystemSelectedTimeRange[0]);
dataPickEndTime.value = formatDateTime(useAppStoreInstance.globalSubsystemSelectedTimeRange[1]);
handleDateRangeChange(useAppStoreInstance.globalSubsystemSelectedTimeRange);
hasPlayed.value = false;
wssOpenHandle({
// isRealtime: useAppStoreInstance.globalSubsystemIsFastForward? true: false,
isFastForward: useAppStoreInstance.globalSubsystemIsFastForward? true: false,
......@@ -1199,34 +1235,35 @@ if(!useAppStoreInstance.footerTimeHasedSelectTimeToSub) {
taskCode: String(useAppStoreInstance.globalSubsystemTaskCode),
satelliteId: useAppStoreInstance.globalSatelliteSearchID,
})
Loading.show();
// 初始化时，默认实时传输
// const realtimeTaskCode = Date.now();
watch(() => useAppStoreInstance.globalSatelliteSearchID, (newValue, oldValue) => {
console.log("................",newValue,oldValue,newValue !== oldValue,newValue === oldValue);
if(newValue !== oldValue) {
wssOpenHandle({
// isRealtime: useAppStoreInstance.globalSubsystemIsFastForward? true: false,
isFastForward: useAppStoreInstance.globalSubsystemIsFastForward? true: false,
speed: useAppStoreInstance.globalSubsystemSpeed,
startTime: dataPickStartTime.value,
endTime: dataPickEndTime.value,
// startTime: formatDateTime(new Date(new Date(Date.now() - 3*24 * 60 * 60 * 1000).toISOString())),
// endTime: formatDateTime(new Date(new Date(Date.now() ).toISOString())),
taskCode: String(useAppStoreInstance.globalSubsystemTaskCode),
satelliteId: useAppStoreInstance.globalSatelliteSearchID,
})
}
if(newValue===oldValue){
wssOpenHandle({
// isRealtime: useAppStoreInstance.globalSubsystemIsFastForward? true: false,
status: 'continue',
speed: useAppStoreInstance.globalSubsystemSpeed,
taskCode: String(useAppStoreInstance.globalSubsystemTaskCode),
satelliteId: useAppStoreInstance.globalSatelliteSearchID,
})
}
});
// watch(() => useAppStoreInstance.globalSatelliteSearchID, (newValue, oldValue) => {
// console.log("................",newValue,oldValue,newValue !== oldValue,newValue === oldValue);
// if(newValue !== oldValue) {
// wssOpenHandle({
// // isRealtime: useAppStoreInstance.globalSubsystemIsFastForward? true: false,
// isFastForward: useAppStoreInstance.globalSubsystemIsFastForward? true: false,
// speed: useAppStoreInstance.globalSubsystemSpeed,
// startTime: dataPickStartTime.value,
// endTime: dataPickEndTime.value,
// // startTime: formatDateTime(new Date(new Date(Date.now() - 3*24 * 60 * 60 * 1000).toISOString())),
// // endTime: formatDateTime(new Date(new Date(Date.now() ).toISOString())),
// taskCode: String(useAppStoreInstance.globalSubsystemTaskCode),
// satelliteId: useAppStoreInstance.globalSatelliteSearchID,
// })
// }
// if(newValue===oldValue){
// wssOpenHandle({
// // isRealtime: useAppStoreInstance.globalSubsystemIsFastForward? true: false,
// status: 'continue',
// speed: useAppStoreInstance.globalSubsystemSpeed,
// taskCode: String(useAppStoreInstance.globalSubsystemTaskCode),
// satelliteId: useAppStoreInstance.globalSatelliteSearchID,
// })
// }
// });
}
});
......@@ -1262,23 +1299,24 @@ watch(
console.log("我走了",compareTime(formatDateTime(selectedEndTime.value), preTimeWindowEnd.value),formatDateTime(selectedEndTime.value),preTimeWindowEnd.value,300%7.8947 ===0.0014);
// 间隔5分钟即300秒，发送时轴de 当前时间给ue
const adjustedStep = Math.ceil(300 / playbackSpeed.value);
if (jiangerTime.value % adjustedStep === 0) {
if (window.ue5) {
window.ue5("callTimeLineCurrentTimeFn", String(JSON.stringify({
year: selectedEndTime.value.getFullYear(),
month: selectedEndTime.value.getMonth() + 1,
day: selectedEndTime.value.getDate(),
hour: selectedEndTime.value.getHours(),
minute: selectedEndTime.value.getMinutes(),
second: selectedEndTime.value.getSeconds(),
})));
}
}
// const adjustedStep = Math.ceil(300 / playbackSpeed.value);
// if (jiangerTime.value % adjustedStep === 0) {
// if (window.ue5) {
// window.ue5("callTimeLineCurrentTimeFn", String(JSON.stringify({
// year: selectedEndTime.value.getFullYear(),
// month: selectedEndTime.value.getMonth() + 1,
// day: selectedEndTime.value.getDate(),
// hour: selectedEndTime.value.getHours(),
// minute: selectedEndTime.value.getMinutes(),
// second: selectedEndTime.value.getSeconds(),
// })));
// }
// }
jiangerTime.value += 1;
if (compareTime(formatDateTime(selectedEndTime.value), preTimeWindowEnd.value)) {
console.log("我走了这里2，因为返回的数据不包含preTimeWindowEnd.value，所以会自动停止")
if(isPlaying.value){
console.log("我走了这里13")
stopAutoPlay();
hasPlayed.value = false;
isChange_flag_firstBackDate.value = false;
......@@ -1315,6 +1353,7 @@ watch(
{ deep: true, immediate: true }
);
onUnmounted(() => {
console.log("我走了这里14")
stopAutoPlay();
window.removeEventListener('mousemove', handleDrag);
window.removeEventListener('mouseup', endDrag);
......
src/pages/header/component/screenConfigCase.vue
浏览文件 @ 542613e6
......@@ -17,7 +17,7 @@
<label class="selector-label">{{ item.label }}</label>
<div class="custom-select">
<!-- 粒度 -->
<el-select v-model="item.default" effect="dark" placeholder="Select" style="width: 100%;" >
<el-select v-model="item.default" placeholder="Select" style="width: 100%;" >
<el-option
v-for="itemele in item.options"
:key="itemele.value"
......@@ -202,7 +202,7 @@ const objectSelector = [
.templateCase_right_content_body {
height: 92%;
width: 100%;
width: 120%;
/* background-color: #73df2b; */
}
......
src/pages/header/component/screenConfigeDialog.vue
浏览文件 @ 542613e6
......@@ -55,7 +55,7 @@
<label class="selector-label">{{ item.label }}</label>
<div class="custom-select">
<!-- 粒度 -->
<el-select v-model="item.default" effect="dark" placeholder="Select" style="width: 100%;" >
<el-select v-model="item.default" placeholder="Select" style="width: 100%;" >
<el-option
v-for="itemele in item.options"
:key="itemele.value"
......@@ -102,7 +102,7 @@
<instant :allIdName="allIdName[1]"></instant>
</div>
<div>
<el-button type="primary" class="apply-btn">应用</el-button>
<el-button type="primary" class="apply-btn apply-btn-right">应用</el-button>
</div>
</div>
</div>
......@@ -128,7 +128,9 @@
<div class="templateCase_right templateCase">
<screenConfigCase></screenConfigCase>
</div>
</div>
<el-button type="primary" class="apply-btn">应用</el-button>
</div>
</div>
</main>
......@@ -673,11 +675,14 @@ const indicatorStyle = computed(() => {
border-right: 1px solid #1b1b1b; /* 右边框样式 */
}
.apply-btn-right{
position: absolute;
bottom: 16px;
}
:deep(.apply-btn){
width: 100px;
height: 30px;
margin-top: 10%;
/* margin-top: 10%; */
border: none;
border-radius: 0px;
background: linear-gradient(to bottom, #2c78f5 0, rgba(0, 0, 0, 1));
......
src/pages/header/index.vue
浏览文件 @ 542613e6
......@@ -205,14 +205,16 @@ const handletoLinkClick = () => {
// location.replace('/subsystem');
router.push('/');
console.log("1111111111111111111111111",useAppStoreInstance.isSourceLegendShow);
useAppStoreInstance.setGlobalisFromTosub(true);
useAppStoreInstance.setislegendShow(useAppStoreInstance.isSourceLegendShow?true:false );
console.log("11111111111111111111111112",useAppStoreInstance.islegendShow);
useAppStoreInstance.setiscontrolPanelShow(true);
useAppStoreInstance.setGlobalSubsystemSelectedTimeRange([]);
}
if (!toSubSystemFlag.value) {
// location.replace('/');
useAppStoreInstance.setiscontrolPanelShow(false);
// useAppStoreInstance.setGlobalisFromTosub(true);
// useAppStoreInstance.setglobalSatelliteSearchID('4096');
if (!useAppStoreInstance.islegendShow) {
useAppStoreInstance.setislegendShow(true);
......@@ -338,11 +340,12 @@ onMounted(() => {
// }
}
);
toSubSystemFlag.value = !toSubSystemFlag.value;
}
if (resData.locationReplace === 'false') {
router.push('/');
console.log("1111111111111111111111111",useAppStoreInstance.isSourceLegendShow);
useAppStoreInstance.setGlobalisFromTosub(true);
useAppStoreInstance.setislegendShow(useAppStoreInstance.isSourceLegendShow?true:false );
console.log("11111111111111111111111112",useAppStoreInstance.islegendShow);
useAppStoreInstance.setiscontrolPanelShow(true);
......
src/pages/lefts/index.vue
浏览文件 @ 542613e6
......@@ -331,7 +331,9 @@ const activeTabHandleClickTab = (value) => {
console.log("11111EIRP111111*****",primitiveFaultData.value);
faultData.value = primitiveFaultData.value
if (searchEquipmentValue.value !== '') {
searchEquipmentList()
}
})
}
if (value === 'equipment') {
......@@ -340,7 +342,10 @@ const activeTabHandleClickTab = (value) => {
primitiveSatelliteData.value = transformgroudSatelliteData(res.data)
equipmentData.value = primitiveSatelliteData.value
if (searchEquipmentValue.value !== '') {
searchEquipmentList()
}
})
}
}
......@@ -377,6 +382,8 @@ const satelliteData = ref();
const searchSateValue = ref('')
function searchSatelliteList() {
console.log("cao cao2",primitiveSatelliteData.value);
const filteredData = primitiveSatelliteData.value.filter(item =>
item.name.toLowerCase().includes(searchSateValue.value.toLowerCase()) ||
item.station.toLowerCase().includes(searchSateValue.value.toLowerCase()) ||
......@@ -434,6 +441,7 @@ const faultData = ref(primitiveFaultData.value);
const baseDeviceList = ref({})
const satlTitle = ref('')
function tableHandleRowClickFn(row, column, event) {
if (activeTab.value === 'fault') {
......@@ -443,7 +451,7 @@ function tableHandleRowClickFn(row, column, event) {
satlTitle.value = row.station ? row.station : '未知名称'
baseDeviceList.value = equipmentData.value.filter(item => item.siteId === row.siteId)[0]?.originCrossDeviceExtractResponseList || []
console.log('点击的行数据:', equipmentData.value.filter(item => item.siteId === row.siteId)[0]?.originCrossDeviceExtractResponseList);
console.log('11111EIRP111111row过滤数据:', equipmentData.value.filter(item => item.siteId === row.siteId)[0]?.originCrossDeviceExtractResponseList);
// row: 点击行的数据
// column: 点击的列信息
// event: 原生事件对象
......@@ -458,7 +466,7 @@ function errorDialoghandleClose() {
function handleCarouselChange(index) {
// 处理 carousel 切换时的逻辑
// console.log('切换到索引:', orbitMetrics.value[index].headerTitle);
coreMetrics.value = orbitMetrics.value[index].headerTitle
coreMetrics.value = orbitMetrics.value[index]?.headerTitle
}
......@@ -753,6 +761,10 @@ onBeforeMount(() => {
leftGetAllListInfo();
});
// 监听 webSocket 结束变化，再根据api查一次数据库
watch(() => useAppStoreInstance.globalStartWss, (newValue, oldValue) => {
if (!newValue) {
......@@ -798,14 +810,27 @@ const messageHandler = ref('')
onMounted(() => {
messageHandler.value = (event) => {
const JSONdata = JSON.parse(event.data);
if (JSONdata.type === 'history') {
primitiveSatelliteData.value = wssTransformSatelliteData(JSONdata.satelliteList)
console.log("我走了onMounted",JSONdata.type === 'history' , !(JSONdata?.isLagrangeInterpolation === true));
if (JSONdata.type === 'history' && !(JSONdata?.isLagrangeInterpolation === true) && (JSONdata.groundSystem !== undefined)) {
const satelliteList = []
JSONdata.CurrData.forEach(items => {
const temp = items.satelliteBasicInfoResponse
temp.siteName = items?.siteName || null
satelliteList.push(temp)
});
primitiveSatelliteData.value = wssTransformSatelliteData(satelliteList)
primitiveSatelliteData.value.sort((a, b) => {
return a.name.localeCompare(b.name, undefined, {
numeric: true, // 启用数字排序
sensitivity: 'base' // 忽略大小写和重音符号
});
});
console.log("cao cao2,",primitiveSatelliteData.value,);
satelliteData.value = primitiveSatelliteData.value
primitiveEquipmentData.value = equipmentData.value
console.log('我是left,type == history获取的wssRespone:', JSONdata.groundStationDeviceCount);
......@@ -815,21 +840,74 @@ onMounted(() => {
groundMetrics.value = wssTransformGroundSatelliteData(JSONdata.groundSystem)
// 地面数据，下层数据
if (1) {
primitiveFaultData.value = []
primitiveFaultData.value = wssTransformgroudSatelliteData(JSONdata.deviceFaultCondition)
faultData.value = primitiveFaultData.value
console.log("此时的fault", primitiveFaultData.value);
if (searchEquipmentValue.value !== '') {
searchEquipmentList()
}
if (1) {
primitiveSatelliteData.value = []
primitiveSatelliteData.value = wssTransformgroudSatelliteData(JSONdata.groundStationDeviceCount)
console.log("此时的equipment", primitiveSatelliteData.value);
equipmentData.value = primitiveSatelliteData.value
primitiveEquipmentData.value = []
primitiveEquipmentData.value = wssTransformgroudSatelliteData(JSONdata.groundStationDeviceCount)
console.log("此时的equipment", primitiveEquipmentData.value);
equipmentData.value = primitiveEquipmentData.value
if (searchEquipmentValue.value !== '') {
searchEquipmentList()
}
}
if (JSONdata.type === 'realtime') {
console.log("11111EIRP111111rowrealtime");
const satelliteList = []
JSONdata.CurrData.forEach(items => {
const temp = items.satelliteBasicInfoResponse
temp.siteName = items.siteName
satelliteList.push(temp)
});
primitiveSatelliteData.value = wssTransformSatelliteData(satelliteList)
primitiveSatelliteData.value.sort((a, b) => {
return a.name.localeCompare(b.name, undefined, {
numeric: true, // 启用数字排序
sensitivity: 'base' // 忽略大小写和重音符号
});
});
console.log("cao cao2,",primitiveSatelliteData.value,);
satelliteData.value = primitiveSatelliteData.value
primitiveEquipmentData.value = equipmentData.value
// console.log('我是left,type == history获取的wssRespone:', JSONdata.groundStationDeviceCount);
// 地面数据，上层数据
// groundMetrics.value = wssTransformGroundSatelliteData(JSONdata.groundSystem)
// 地面数据，下层数据
// primitiveFaultData.value = []
// primitiveFaultData.value = wssTransformgroudSatelliteData(JSONdata.deviceFaultCondition)
// faultData.value = primitiveFaultData.value
// console.log("此时的fault", primitiveFaultData.value);
// if (searchEquipmentValue.value !== '') {
// searchEquipmentList()
// }
// primitiveEquipmentData.value = []
// primitiveEquipmentData.value = wssTransformgroudSatelliteData(JSONdata.groundStationDeviceCount)
// console.log("此时的equipment", primitiveEquipmentData.value);
// equipmentData.value = primitiveEquipmentData.value
// if (searchEquipmentValue.value !== '') {
// searchEquipmentList()
// }
}
// console.log('我是left,type !!!= history获取的wssRespone:', JSONdata, typeof JSONdata.satelliteList);
......@@ -1589,6 +1667,7 @@ onUnmounted(() => {
:deep(.el-table tr) {
background: black;
color: #ffffff;
}
:deep(.custom-table .el-table__body tr:hover) {
......@@ -1740,9 +1819,17 @@ onUnmounted(() => {
:deep(.el-input__wrapper) {
background-color: #1C212B;
box-shadow: 0 0 1px #bfc1c4;
/* box-shadow: 0 0 1px #bfc1c4; */
}
:deep(.is-disabled .el-input__wrapper){
background-color: #1C212B;
}
:deep(.el-input__wrapper .el-input__inner){
background-color: #1C212B;
color: #fff;
}
:deep(.el-input__inner) {
background-color: #1C212B;
color: #fff;
......
src/pages/lefts2/component/cruve.vue
浏览文件 @ 542613e6
......@@ -2,7 +2,7 @@
<!-- CDF曲线图 -->
<div class="container">
<div class="main">
<div :id="idName" class="cdfCurve"></div>
<div :id="props.idName" class="cdfCurve"></div>
</div>
</div>
</template>
......@@ -21,7 +21,7 @@ import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
const props = defineProps({
idName: {
type: String,
default: 'main'
default: 'left2_bottom'
},
propsDate: {
type: Object,
......@@ -42,7 +42,7 @@ watch(() => props.propsDate, (newVal, oldVal) => {
})
return;
}
changeCharte();
changeCharte(props.idName,props.propsDate);
// console.log("完全不一样的数据",newVal);
}
}, { immediate: true, deep: true })
......@@ -60,25 +60,26 @@ onUnmounted(() => {
}
});
function changeCharte() {
function changeCharte(idName,NewOption) {
// 销毁旧实例
if (myChart) {
myChart.dispose();
myChart = null;
// 清空 DOM 元素内容
const chartDom = document.getElementById(props.idName);
const chartDom = document.getElementById(idName);
if (chartDom) {
chartDom.innerHTML = '';
}
}
// 初始化新实例
const chartDom = document.getElementById(props.idName);
const chartDom = document.getElementById(idName);
chartDom.style.height = '300px';
chartDom.style.width = '360px';
if (!chartDom) {
console.error("DOM 元素未找到:", props.idName);
console.error("DOM 元素未找到:", idName);
return;
}
......@@ -118,7 +119,7 @@ function changeCharte() {
// },
legend: {
show: true,
data: [props.propsDate.chartName],
data: [NewOption.chartName],
textStyle: {
color: '#fff',
fontSize: 12
......@@ -144,7 +145,7 @@ function changeCharte() {
type: 'category',
boundaryGap: false,
show:false,
data: props.propsDate.dataX,
data: NewOption.dataX,
axisLine: {
lineStyle: {
color: '#fff'
......@@ -156,8 +157,8 @@ function changeCharte() {
},
yAxis: {
type: 'value',
min:props.propsDate.minY,
max:props.propsDate.maxY,
min:NewOption.minY,
max:NewOption.maxY,
boundaryGap: [0, '100%'],
axisLine: {
......@@ -190,7 +191,7 @@ function changeCharte() {
],
series: [
{
name: props.propsDate.chartName || 'CDF',
name: NewOption.chartName || 'CDF',
type: 'line',
smooth: true,
symbol: 'none',
......@@ -209,7 +210,7 @@ function changeCharte() {
}
])
},
data: props.propsDate.dataY
data: NewOption.dataY
}
],
tooltip: {
......
src/pages/lefts2/index.vue
浏览文件 @ 542613e6
......@@ -105,7 +105,7 @@
<div class="time-range-container">
<el-date-picker v-model="historyTimeDateRange"
type="daterange" range-separator="→"
disabled="true"
start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
prefix-icon="none" class="time-picker" :popper-options="{
placement: 'bottom-start',
......@@ -128,7 +128,10 @@
<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" @click="handleSatelliteGranularityChange(item.value)" />
<el-option v-for="item in satelliteOptions"
:key="item.value" :label="item.label" :value="item.value"
:default-first-option = true
@click="handleSatelliteGranularityChange(item.value)" />
</el-select>
</div>
</div>
......@@ -150,7 +153,7 @@
</div>
<div class="equipment-panel">
<curve :propsDate="left2BottomOpition"></curve>
<curve :propsDate="left2BottomOpition" :idName="left2_bottom"></curve>
</div>
</div>
</div>
......@@ -159,15 +162,16 @@
<script setup>
import 'element-plus/dist/index.css'
import { ref, onMounted, onBeforeMount, nextTick, watch } from 'vue';
import { ref, onMounted, onBeforeMount, nextTick, watch, onUnmounted } from 'vue';
import { ElMessage } from 'element-plus'
import curve from './component/cruve.vue';
import useAppStore from '@/store/module/app.js';
// import Header from './component/header.vue'
import wss from '@/utils/subSystemRequestSocket.js'
// import wss from '@/utils/subSystemRequestSocket.js'
import { useRouter } from 'vue-router';
import { getSubSystemOpitionListApi,getSubSystemCurveListApi } from '../../api/Zodiac'
import { tr } from 'element-plus/es/locales.mjs';
import SubWss from '@/utils/subSystemRequestSocket.js'
const router = useRouter();
const useAppStoreInstance = useAppStore();
......@@ -198,6 +202,7 @@ const handleArcHistoryTabClick = (index) => {
isFalgStartSearch.value = false;
subSystemOptionsFn(arcHistorySubSystemOptions[index]);
// cureSearchHandleFn()
}
// 系统标签
const tabs = [
......@@ -254,7 +259,7 @@ const backHomeClick = () => {
useAppStoreInstance.setislegendShow(useAppStoreInstance.isSourceLegendShow ? true : false);
// console.log("11111111111111111111111112", useAppStoreInstance.islegendShow);
useAppStoreInstance.setiscontrolPanelShow(true);
// useAppStoreInstance.subsystemSocket.close(1000, "正常关闭");
// SubWss.close(1000, "正常关闭");
wssOpenHandle({
// isRealtime: useAppStoreInstance.globalSubsystemIsFastForward? true: false,
status: 'stop',
......@@ -338,7 +343,7 @@ const CONTROL_wssTransformGroundSatelliteData = (data) => {
// }
// 如果 data 不是对象也不是数组，返回空数组
return [];
// return [];
};
const PAYLOAD_wssTransformGroundSatelliteData = (data) => {
// 检查 data 是否为对象且不为 null
......@@ -450,7 +455,7 @@ const PAYLOAD_wssTransformGroundSatelliteData = (data) => {
// }
// 如果 data 不是对象也不是数组，返回空数组
return [];
// return [];
};
const ELECTRONICS_wssTransformGroundSatelliteData = (data) => {
// 检查 data 是否为对象且不为 null
......@@ -500,7 +505,7 @@ const ELECTRONICS_wssTransformGroundSatelliteData = (data) => {
// }
// 如果 data 不是对象也不是数组，返回空数组
return [];
// return [];
};
const POWER_wssTransformGroundSatelliteData = (data) => {
// 检查 data 是否为对象且不为 null
......@@ -545,7 +550,7 @@ const POWER_wssTransformGroundSatelliteData = (data) => {
// }
// 如果 data 不是对象也不是数组，返回空数组
return [];
// return [];
};
const THERMAL_wssTransformGroundSatelliteData = (data) => {
......@@ -614,7 +619,7 @@ const THERMAL_wssTransformGroundSatelliteData = (data) => {
// }
// 如果 data 不是对象也不是数组，返回空数组
return [];
// return [];
};
// 时间格式化函数
......@@ -674,6 +679,8 @@ const left2BottomOpition = ref({
// 查询处理函数
const cureSearchHandleFn = () => {
console.log("11111111111111-------1111:",isFlagOfSeletctType.value);
if (!isFlagOfSeletctType.value) {
ElMessage({
type: 'error',
......@@ -704,7 +711,7 @@ isFalgStartSearch.value = true;
satelliteId: useAppStoreInstance.globalSatelliteSearchID==='0'? "4097": (useAppStoreInstance.globalSatelliteSearchID),
startTime: historyTimeDateRange.value[0],
subSystemType: arcHistorySubSystemOptions[arcHistoryActiveIndex.value],
code: historyCode.value,
code: historyCode.value ,
});
getSubSystemCurveListApi({
......@@ -823,17 +830,17 @@ const floorForMinValue = (value) => {
};
const wssOpenHandle = (data) => {
// console.log('wssOpenHandle', wss,wss.readyState, WebSocket.OPEN);
if (useAppStoreInstance.subsystemSocket.readyState === WebSocket.OPEN) {
if (SubWss.readyState === WebSocket.OPEN) {
// 如果连接已打开，直接发送数据
// console.log('连接yi打开...');
useAppStoreInstance.subsystemSocket.send(JSON.stringify(data));
SubWss.send(JSON.stringify(data));
} else
{
// 否则等待连接打开后再发送
// console.log('连接未打开，等待...');
useAppStoreInstance.subsystemSocket.onopen = () => {
useAppStoreInstance.subsystemSocket.send(JSON.stringify(data));
SubWss.onopen = () => {
SubWss.send(JSON.stringify(data));
};
}
};
......@@ -862,13 +869,13 @@ const handleTabClick = (index) => {
type: socketTypeMap[index] || 'CONTROL',
satelliteId:useAppStoreInstance.globalSatelliteSearchID==='0'? "4097": (useAppStoreInstance.globalSatelliteSearchID),
})
useAppStoreInstance.subsystemSocket.onmessage = (event) => {
// console.log('收到 WebSocket 消息:', event);
// SubWss.onmessage = (event) => {
// console.log('我走了这里，收到数据21');
const data = JSON.parse(event.data);
// console.log('我是left2,type == time获取的wssRespone:', data);
useAppStoreInstance.setSubsystemSocketContent(data)
};
// const data = JSON.parse(event.data);
// // console.log('我是left2,type == time获取的wssRespone:', data);
// useAppStoreInstance.setSubsystemSocketContent(data)
// };
// switch (useAppStoreInstance.globalSubsystemActiveIndex) {
// case 0:
// if (window.ue5) {
......@@ -905,38 +912,62 @@ onBeforeMount(() => {
// }).then(res => {
// console.log(res);
// })
useAppStoreInstance.subsystemSocket.onmessage = (event) => {
console.log('收到2 WebSocket 消息:', event);
// SubWss.onmessage = (event) => {
// console.log('我走了这里，收到数据22');
const data = JSON.parse(event.data);
const transformedData = CONTROL_wssTransformGroundSatelliteData(data);
currentTelemetryData.value = transformedData;
// const data = JSON.parse(event.data);
// const transformedData = CONTROL_wssTransformGroundSatelliteData(data);
// currentTelemetryData.value = transformedData;
// transformConstellationData(JSONdata)
// console.log('我是left2,type == time获取的wssRespone:', data);
// // transformConstellationData(JSONdata)
// // console.log('我是left2,type == time获取的wssRespone:', data);
};
// };
})
const force_Refresh = ref(0)
// 日期时间格式化函数
const mountformatDateTime = (date) => {
if (!date) return '未选择';
// 确保传入的是Date对象
const d = new Date(date);
// 获取年月日时分秒
const year = d.getFullYear();
const month = String(d.getMonth() + 1).padStart(2, '0');
const day = String(d.getDate()).padStart(2, '0');
const hours = String(d.getHours()).padStart(2, '0');
const minutes = String(d.getMinutes()).padStart(2, '0');
const seconds = String(d.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
onMounted(() => {
nextTick(() => {
console.log("我走了globalSubsystemSelectedTimeRange---left2",mountformatDateTime(useAppStoreInstance.globalSubsystemSelectedTimeRange[0]), mountformatDateTime(useAppStoreInstance.globalSubsystemSelectedTimeRange[1]));
if(useAppStoreInstance.footerTimeHasedSelectTimeToSub) {
historyTimeDateRange.value = [ formatDateTime(useAppStoreInstance.globalSubsystemSelectedStartTime[0]), formatDateTime(useAppStoreInstance.globalSubsystemSelectedStartTime[1])]
// historyTimeDateRange.value = [new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),new Date(Date.now()).toISOString()];
historyTimeDateRange.value = [ mountformatDateTime(useAppStoreInstance.globalSubsystemSelectedTimeRange[0]), mountformatDateTime(useAppStoreInstance.globalSubsystemSelectedTimeRange[1])]
}else {
historyTimeDateRange.value = [new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),new Date(Date.now()).toISOString()];
}
useAppStoreInstance.setiscontrolPanelShow(false);
useAppStoreInstance.subsystemSocket.onmessage = (event) => {
console.log('收到3 WebSocket 消息:', event);
// SubWss.onmessage = (event) => {
// console.log('我走了这里，收到数据23');
const data = JSON.parse(event.data);
const transformedData = CONTROL_wssTransformGroundSatelliteData(data);
currentTelemetryData.value = transformedData;
// const data = JSON.parse(event.data);
// const transformedData = CONTROL_wssTransformGroundSatelliteData(data);
// currentTelemetryData.value = transformedData;
// transformConstellationData(JSONdata)
// console.log('我是left2,type == time获取的wssRespone:', data);
// // transformConstellationData(JSONdata)
// // console.log('我是left2,type == time获取的wssRespone:', data);
};
// };
left2BottomOpition.value = {
isFirstSearch:false,
}
......@@ -946,7 +977,7 @@ watch(() => useAppStoreInstance.subsystemSocketContent, (newVal, oldValue) => {
// console.log("22222222222left******************",useAppStoreInstance.globalSubsystemActiveIndex,newValue);
// handleTabClick(useAppStoreInstance.globalSubsystemActiveIndex)
force_Refresh.value += 1
switch (toNumber(useAppStoreInstance.globalSubsystemActiveIndex)) {
case 0:
const transformedData = CONTROL_wssTransformGroundSatelliteData(newVal);
......@@ -1013,8 +1044,11 @@ watch(() => useAppStoreInstance.subsystemSocketContent, (newVal, oldValue) => {
},{ deep: true, immediate: true });
})
})
});
onUnmounted(() => {
// useAppStoreInstance.setGlobalSubsystemSelectedTimeRange([]);
});
</script>
......@@ -1456,9 +1490,10 @@ watch(() => useAppStoreInstance.subsystemSocketContent, (newVal, oldValue) => {
color: #ffffff;
}
:deep(.el-range-input) {
:deep(.el-date-editor .el-range-input) {
color: #ffffff;
font-size: 10px;
background: #000000;
}
/* 日历图标 */
......
src/pages/rights2/index.vue
浏览文件 @ 542613e6
......@@ -106,7 +106,7 @@
import { nextTick, onMounted, ref } from 'vue';
import errorDataShowComponent from './component/errorDataShowComponent.vue'
import useAppStore from '@/store/module/app'
import { da } from 'element-plus/es/locales.mjs';
const useAppStoreInstance = useAppStore();
// 星座构型提取转换函数
......
src/store/module/app.js
浏览文件 @ 542613e6
......@@ -2,7 +2,7 @@
* @Author: Z 1518051043@qq.com
* @Date: 2025-09-12 13:51:43
* @LastEditors: zwy 1518051043@qq.com
* @LastEditTime: 2026-01-08 09:15:58
* @LastEditTime: 2026-01-14 17:24:05
* @FilePath: \yuanxinPro\src\store\module\app.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -20,6 +20,7 @@ const useAppStore = defineStore(
globalTimeLineEndTime: "2025-11-02 00:00:00",
globalisFromTosub: false,
footerTimeHasedSelectTimeToSub: false,
globalSubsystemSelectedTimeRange: ['Sun Nov 02 2025 00:00:00 GMT+0800 (中国标准时间) ','Tue Nov 04 2025 00:00:00 GMT+0800 (中国标准时间) '],
subsystemSocket: null,
subsystemSocketContent: '',
......@@ -49,6 +50,9 @@ const useAppStore = defineStore(
setFooterTimeHasedSelectTimeToSub(status) {
this.footerTimeHasedSelectTimeToSub = status
},
setGlobalSubsystemSelectedTimeRange(range) {
this.globalSubsystemSelectedTimeRange = range;
},
setGlobalisFromTosub(status) {
this.globalisFromTosub = status
},
......
src/utils/subSystemRequestSocket.js
浏览文件 @ 542613e6
......@@ -2,7 +2,7 @@
* @Author: Z 1518051043@qq.com
* @Date: 2025-12-01 13:52:20
* @LastEditors: zwy 1518051043@qq.com
* @LastEditTime: 2026-01-05 15:11:15
* @LastEditTime: 2026-01-15 02:49:42
* @FilePath: \yuanxinPro\src\utils\requestSocekt.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -10,8 +10,8 @@ import ueHeartbeatInterval from '@/store/module/app.js'
import useAppStore from '@/store/module/app.js'
const useAppStoreInstance = useAppStore()
const apiUrl = `ws://121.229.107.155:19021/systemData`
const wss = new WebSocket(apiUrl);
useAppStoreInstance.setSubsystemSocket(wss)
const SubWss = new WebSocket(apiUrl);
useAppStoreInstance.setSubsystemSocket(SubWss)
// wss.onclose = () => {
// clearInterval(ueHeartbeatInterval);
// console.log('WebSocket disconnected, attempting reconnect...');
......@@ -21,4 +21,4 @@ useAppStoreInstance.setSubsystemSocket(wss)
// }, 5000);
// };
export default wss;
export default SubWss;
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论