Skip to content

S
SatelliteDigital
提交 477d68b1 authored 作者: liujiaxing's avatar liujiaxing
浏览文件
操作

最新代码提交--样式修改

上级 c62bcf89
隐藏空白字符变更
内嵌 并排
正在显示 包含 367 行增加 和 478 行删除
src/pages/all/components/cdf/cdfCurve.vue
浏览文件 @ 477d68b1
......@@ -54,10 +54,14 @@ const props = defineProps({
lineArray: {
type: Boolean,
default: false
},
yName: {//y轴名称
type: Array,
default: () => []
}
})
setTimeout(() => {
console.log(props.data, 'cdf权限去');
// console.log(props.data, 'cdf权限去');
}, 2000);
const dataX = computed(() => {
......@@ -205,7 +209,7 @@ function initChart() {
}
})
}
console.log(seriesArr, '总数据对比');
// console.log(seriesArr, '总数据对比');
const option = {
......@@ -283,8 +287,14 @@ function initChart() {
},
yAxis: {
type: 'value',
name: props.yName,//y轴名称
// max: 120,
minInterval: 1,
nameTextStyle: { // 文本样式
fontSize: 12,
fontWeight: 'bold',
color: '#fff'
},
splitLine: {
show: true,
lineStyle: {
......
src/pages/all/components/cdf/childrenCdfCurve.vue
浏览文件 @ 477d68b1
......@@ -182,7 +182,7 @@ onMounted(() => {
// 初始化所有图表
chartConfigs.value.forEach(config => {
alert(config)
console.log('初始化config', config)
// console.log('初始化config', config)
const chartDom = document.getElementById(config.id);
if (chartDom) {
initChart(chartDom, config);
......
src/pages/all/components/cdf/index.vue
浏览文件 @ 477d68b1
......@@ -55,21 +55,23 @@
<!-- 核心数据指标 -->
<div class="container" v-if="!props.lineArray">
<div class="flex-box flex-left">
<cdfCurve :legendName="props.legendName[0]" :data="props.data[0]"></cdfCurve>
<cdfCurve :legendName="props.legendName[0]" :yName="props.yName" :data="props.data[0]" color="#ff9f7f"
:isShowDetial="true"></cdfCurve>
</div>
<div class="flex-box flex-right">
<cdfCurve :legendName="props.legendName[1]" :data="props.data[1]" color="#6ffcba" :isShowDetial="true">
<cdfCurve :legendName="props.legendName[1]" :yName="props.yName" :data="props.data[1]" color="#6ffcba"
:isShowDetial="true">
</cdfCurve>
</div>
</div>
<div class="container" v-if="props.lineArray">
<div class="flex-box">
<cdfCurve :lineArray="props.lineArray" :legendName="props.legendName" :data="props.data" :color="colorList"
:isShowDetial="true">
<cdfCurve :lineArray="props.lineArray" :yName="props.yName" :legendName="props.legendName" :data="props.data"
:color="colorList" :isShowDetial="true">
</cdfCurve>
</div>
</div>
<el-dialog v-model="bigStatus" :modal='true' :show-close="true" modal-class="dialogModel" :modal-penetrable='true'
<el-dialog v-model="bigStatus" :modal='true' :show-close="true" class="dialogModel" :modal-penetrable='true'
width="200" :before-close="closeDialogFn" style="margin: 0;padding: 0; ">
<div class="dashboard-container">
<!-- 顶部导航栏 -->
......@@ -98,17 +100,18 @@
<!-- 核心数据指标 判断一个图表中是否有多个曲线-->
<div class="container" v-if="!props.lineArray">
<div class="flex-box flex-left">
<cdfCurve :legendName="props.legendName[0]" :data="props.data[0]"></cdfCurve>
<cdfCurve :legendName="props.legendName[0]" :yName="props.yName" :data="props.data[0]"></cdfCurve>
</div>
<div class="flex-box flex-right">
<cdfCurve :legendName="props.legendName[1]" :data="props.data[1]" color="#6ffcba" :isShowDetial="true">
<cdfCurve :legendName="props.legendName[1]" :yName="props.yName" :data="props.data[1]" color="#6ffcba"
:isShowDetial="true">
</cdfCurve>
</div>
</div>
<div class="container" v-if="props.lineArray">
<div class="flex-box">
<cdfCurve :lineArray="props.lineArray" :legendName="props.legendName" :data="props.data"
:color="colorList" :isShowDetial="true">
<cdfCurve :lineArray="props.lineArray" :yName="props.yName" :legendName="props.legendName"
:data="props.data" :color="colorList" :isShowDetial="true">
</cdfCurve>
</div>
</div>
......@@ -147,10 +150,14 @@ const props = defineProps({
lineArray: {
type: Boolean,
default: false
},
yName: {//y轴名称
type: Array,
default: () => []
}
});
console.log("actualAvailabilityData", props.data[1])
// console.log("actualAvailabilityData", props.data[1])
onBeforeUnmount(() => {
//console.log("中，zhelixieza");
......@@ -160,7 +167,6 @@ const dateValue = ref([])//时间段
const setdia = ref(false)//弹框是否展开
//设置问题
const setclick = () => {
console.log("哦口口");
timeValue.value = '1'
setdia.value = !setdia.value
historyS.value = false
......@@ -240,7 +246,6 @@ function getPreviousMonthDate() {
const bigStatus = ref(false)
//点击放大窗口详细查看曲线
const clickBig = () => {
console.log('放大');
bigStatus.value = true
if (window.ue5) {
window.ue5("callBackAllDialogFn", String(JSON.stringify({
......@@ -475,7 +480,7 @@ const componentProps = ref({});
/* background-color: red; */
}
:deep().dashboard-container {
:deep().dialogModel .dashboard-container {
border: 1px solid #cccccc2a;
}
......
src/pages/all/components/hotMapComponents/hotMap.vue
浏览文件 @ 477d68b1
......@@ -33,13 +33,15 @@ const props = defineProps({
mapCenter: {
type: Array,
default: () => []
},
yName: {//y轴名称
type: Array,
default: () => []
}
})
watch(() => props.data, (newVal) => {
// // updateChart();
console.log('触发时');
setTimeout(() => {
initChart();
}, 0)
......@@ -53,14 +55,10 @@ const obj = {
}
watch(() => appStore.currentHotMapCountry, (newVal, oldVal) => {
console.log('触发时5555');
initChart()
})
watch(() => maxValue.value, (newVal) => {
console.log('562626触发时');
if (myChart && newVal > 0) {
myChart.setOption({
visualMap: {
......@@ -292,7 +290,7 @@ function initChart() {
},
}
} else {
console.log('val', val)
// console.log('val', val)
}
return {
......@@ -338,7 +336,6 @@ function resizeChart() {
}
onMounted(async () => {
console.log(6636);
// 确保DOM渲染完成后初始化图表
// nextTick(() => {
......
src/pages/all/components/hotMapComponents/index.vue
浏览文件 @ 477d68b1
......@@ -63,13 +63,14 @@
<!-- 核心数据指标 -->
<div class="container">
<div class="flex-box " v-if="hotStatus">
<hotMap :title="props.legendName[selectedValue]" :data="props.data[selectedValue]"></hotMap>
<hotMap :title="props.legendName[selectedValue]" :yName="props.yName" :data="props.data[selectedValue]">
</hotMap>
</div>
<!-- <div class="flex-box flex-right">
<hotMap :title="props.legendName[1]" :data="props.data[1]"></hotMap>
</div> -->
</div>
<el-dialog v-model="bigStatus" :modal='true' :show-close="true" modal-class="dialogModel" :modal-penetrable='true'
<el-dialog v-model="bigStatus" :modal='true' :show-close="true" class="dialogModel" :modal-penetrable='true'
width="200" :before-close="closeDialogFn" style="margin: 0;padding: 0; ">
<div class="dashboard-container">
<!-- 顶部导航栏 -->
......@@ -98,10 +99,10 @@
<div class="container" v-if="bigStatus">
<!-- 核心数据指标 热力图-->
<div class="flex-box flex-left">
<hotMap :title="props.legendName[0]" :data="props.data[0]"></hotMap>
<hotMap :title="props.legendName[0]" :yName="props.yName" :data="props.data[0]"></hotMap>
</div>
<div class="flex-box flex-right">
<hotMap :title="props.legendName[1]" :data="props.data[1]"></hotMap>
<hotMap :title="props.legendName[1]" :yName="props.yName" :data="props.data[1]"></hotMap>
</div>
</div>
</main>
......@@ -129,11 +130,15 @@ const props = defineProps({
data: {
type: Array,
default: () => []
},
yName: {//y轴名称
type: Array,
default: () => []
}
})
const hotStatus = ref(true)
const selectedValue = ref(0)//热力图下拉框
console.log(props, '热力图数据')
// console.log(props, '热力图数据')
......@@ -229,7 +234,6 @@ const hotSelectFn = () => {
}
//点击放大窗口详细查看曲线
const clickBig = () => {
console.log('放大');
bigStatus.value = true
if (window.ue5) {
window.ue5("callBackAllDialogFn", String(JSON.stringify({
......@@ -477,7 +481,7 @@ const closeDialogFn = () => {
/* background-color: red; */
}
:deep().dashboard-container {
:deep().dialogModel .dashboard-container {
border: 1px solid #cccccc2a;
}
......
src/pages/all/components/hotMapComponents/testMap.vue
浏览文件 @ 477d68b1
......@@ -204,7 +204,7 @@ function initChart() {
// };
myChart.setOption(option);
resizeChart();
......@@ -220,7 +220,7 @@ function resizeChart() {
onMounted(async () => {
const ret = await getGridInfoList()
console.log('ret', ret)
// console.log('ret', ret)
// 确保DOM渲染完成后初始化图表
nextTick(() => {
initChart();
......
src/pages/all/components/instant/index.vue
浏览文件 @ 477d68b1
......@@ -57,20 +57,24 @@
<div class="flex-box flex-left">
<!-- <div>{{ props.data[0] }}-----</div> -->
<instantCurve :idName="`instant-left-${props.allIdName}`" :data="props.data[0]"
:legendName="props.legendName[0]" :propsDate="componentProps" :istemplate="props.istemplate"></instantCurve>
:legendName="props.legendName[0]" :yName="props.yName[0] ? props.yName[0] : ''" :propsDate="componentProps"
:istemplate="props.istemplate"></instantCurve>
</div>
<div class="flex-box flex-right">
<instantCurve :idName="`instant-right-${props.allIdName}`" :data="props.data[1]" color="#6ffcba"
:legendName="props.legendName[1]" :isShowDetail="true" :istemplate="props.istemplate"></instantCurve>
:legendName="props.legendName[1]" :yName="props.yName[1] ? props.yName[1] : ''" :propsDate="componentProps"
isShowDetail="true" :istemplate="props.istemplate">
</instantCurve>
</div>
</div>
<div class="container" v-if="props.lineArray">
<div class="flex-box">
<instantCurve :lineArray="props.lineArray" :data="props.data" :legendName="props.legendName"
:propsDate="componentProps" :color="colorList" :istemplate="props.istemplate"></instantCurve>
<instantCurve :lineArray="props.lineArray" :yName="props.yName[0]" :data="props.data"
:legendName="props.legendName" :propsDate="componentProps" :color="colorList" :istemplate="props.istemplate">
</instantCurve>
</div>
</div>
<el-dialog v-model="bigStatus" :modal='true' :show-close="true" modal-class="dialogModel" :modal-penetrable='true'
<el-dialog v-model="bigStatus" :modal='true' :show-close="true" class="dialogModel" :modal-penetrable='true'
width="200" :before-close="closeDialogFn" style="margin: 0;padding: 0; ">
<div class="dashboard-container">
<!-- 顶部导航栏 -->
......@@ -99,18 +103,19 @@
<!-- 核心数据指标 判断一个图表中是否有多个曲线-->
<div class="container" v-if="!props.lineArray">
<div class="flex-box flex-left">
<instantCurve :idName="`instant-left-${props.allIdName}`" :data="props.data[0]"
:legendName="props.legendName[0]" :propsDate="componentProps"></instantCurve>
<instantCurve :idName="`instant-left-${props.allIdName}`" :yName="props.yName[0] ? props.yName[0] : ''"
:data="props.data[0]" :legendName="props.legendName[0]" :propsDate="componentProps"></instantCurve>
</div>
<div class="flex-box flex-right">
<instantCurve :idName="`instant-right-${props.allIdName}`" :data="props.data[1]" color="#6ffcba"
:legendName="props.legendName[1]" :isShowDetail="true"></instantCurve>
<instantCurve :idName="`instant-right-${props.allIdName}`" :yName="props.yName[1] ? props.yName[1] : ''"
:data="props.data[1]" color="#6ffcba" :legendName="props.legendName[1]" :isShowDetail="true">
</instantCurve>
</div>
</div>
<div class="container" v-if="props.lineArray">
<div class="flex-box">
<instantCurve :lineArray="props.lineArray" :data="props.data" :legendName="props.legendName"
:propsDate="componentProps" :color="colorList"></instantCurve>
<instantCurve :lineArray="props.lineArray" :yName="props.yName[0]" :data="props.data"
:legendName="props.legendName" :propsDate="componentProps" :color="colorList"></instantCurve>
</div>
</div>
</main>
......@@ -154,12 +159,16 @@ const props = defineProps({
istemplate: {//判断是不是配置曲线还是右边显示曲线
type: Boolean,
default: false
},
yName: {//y轴名称
type: Array,
default: () => []
}
});
const colorList = ["#6ffcba", "#5470c6"]//同一个图标中不同曲线的颜色设置
setTimeout(() => {
console.log('瞬时值曲线', props)
// console.log('瞬时值曲线', props)
}, 2000);
const historyS = ref(false)//是否查询历史模式
const dateValue = ref([])//时间段
......@@ -245,7 +254,7 @@ function getPreviousMonthDate() {
const bigStatus = ref(false)
//点击放大窗口详细查看曲线
const clickBig = () => {
console.log('放大');
// console.log('放大');
bigStatus.value = true
if (window.ue5) {
window.ue5("callBackAllDialogFn", String(JSON.stringify({
......@@ -480,7 +489,7 @@ const componentProps = ref({})
/* background-color: red; */
}
:deep().dashboard-container {
:deep().dialogModel .dashboard-container {
border: 1px solid #cccccc2a;
}
......
src/pages/all/components/instant/instantCurve.vue
浏览文件 @ 477d68b1
......@@ -56,6 +56,10 @@ const props = defineProps({
istemplate: {//判断是配置模版还是右侧正常显示
type: Boolean,
default: false
},
yName: {//y轴名称
type: Array,
default: () => []
}
})
watch(() => props.data, (newVal) => {
......@@ -325,6 +329,12 @@ function initChart() {
},
yAxis: {
type: 'value',
name: props.yName,//y轴名称
nameTextStyle: { // 文本样式
fontSize: 12,
fontWeight: 'bold',
color: '#fff'
},
// max: 120,
minInterval: 1,
splitLine: {
......
src/pages/all/index.vue
浏览文件 @ 477d68b1
......@@ -64,7 +64,6 @@
</div>
</el-footer>
</el-main>
<!-- 右侧边栏 -->
<el-aside class="fixed-aside right-aside" v-if="useAppStoreInstance.isdataPanelShow">
<div class="aside-content">
......
src/pages/footer/component/timers.vue
浏览文件 @ 477d68b1
......@@ -22,7 +22,7 @@
<div class="right_block">
<!--限制 :disabled="!is_flag_confirmAndPauseAndSpeed" -->
<el-button class="right_block_confirm_btn" size="small"
@click="handleDateRangeChange(pick_select_date, false, true)">确认</el-button>
@click="handleDateRangeChange(pick_select_date, false, true, 1)">确认</el-button>
<div class="right_block_center">
<!-- <el-button circle class="right_block_conter_btn" @click="playBackward">
<el-icon>
......@@ -38,8 +38,8 @@
style="width: 8px; height: 10px;" />
</el-icon>
</el-button>
</div>
<!-- 倍速选择 -->
<el-select v-model="playbackSpeed" style="width: 70px" class="satellite-select"
:disabled="is_flag_isRealtime">
<el-option v-for="item in playbackSpeedOptions" :key="item.value" :label="item.label" :value="item.value"
......@@ -48,7 +48,6 @@
changeSpeed()
}" />
</el-select>
<!-- <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>
......@@ -138,25 +137,15 @@ const playbackSpeedOptions = ref([
])
const useAppStoreInstance = useAppStore();
const is_flag_confirmAndPauseAndSpeed = ref(true)
// const is_flag_confirmAndPauseAndSpeed = ref(true)
// 跳转到指定时间点
const jumpToSpecificTime = (targetTime, PerformDrag = false) => {
console.log('跳转到指定时间点:', targetTime);
// isChange_flag_firstBackDate.value = false;
hasPlayed.value = false;
try {
if (!startDateTime.value || !endDateTime.value) {
console.error("时间轴起始时间或结束时间未定义");
ElMessage.error('时间轴未初始化');
return false;
}
// 停止当前自动播放
// if (isPlaying.value) {
// //console.log("我走了这里3")
// stopAutoPlay();
// }
const start = new Date(startDateTime.value).getTime();
const end = new Date(endDateTime.value).getTime();
const totalMs = totalMilliseconds.value;
......@@ -169,7 +158,6 @@ const jumpToSpecificTime = (targetTime, PerformDrag = false) => {
}
const targetMs = targetTime.getTime();
// 校验目标时间是否在范围内
if (targetMs < start || targetMs > end) {
console.error("目标时间不在时间轴范围内:", targetTime);
......@@ -179,23 +167,19 @@ const jumpToSpecificTime = (targetTime, PerformDrag = false) => {
// 计算目标时间点的百分比位置
const percentPosition = ((targetMs - start) / totalMs) * 100;
// 只更新结束滑块位置
endHandlePercent.value = Math.max(0, Math.min(100, percentPosition));
// 更新选中时间
updateSelectedTimes();
// 标记为手动选择时间点
isDraged.value = true;
// is_flag_isRealtime.value = false;
isConfirmedWithRange.value = false; // 设置为false以显示完整的选中区域
// playForward();
if (PerformDrag) {
endDrag();
// moveEndHandle();
}
// if (PerformDrag) {
// endDrag();//拖动函数
// // moveEndHandle();
// }
return true;
} catch (error) {
......@@ -205,7 +189,7 @@ const jumpToSpecificTime = (targetTime, PerformDrag = false) => {
}
};
// websock发送数据并接受数据
const wssOpenHandle = (data) => {
console.log("发送数据", (wssInstance.value).readyState);
if ((wssInstance.value).readyState === WebSocket.OPEN) {
......@@ -228,6 +212,7 @@ const wssOpenHandle = (data) => {
};
wssMessageHandle();
}
console.log("触发1");
startAutoPlay();
};
const wssResponeFlag_isSuccess = ref(true);
......@@ -236,7 +221,7 @@ const loading = ref('');
// 对比时间
const compareTime = (time1, time2) => {
// console.log('cao每隔开始compareTime----------1', time1, time2);
// 将时间字符串转换为 Date 对象
......@@ -262,21 +247,6 @@ const compareTime = (time1, time2) => {
}
};
// 将科学计数法，转换为普通数字字符串
const toPlainNumber = (num) => {
if (typeof num !== 'number' && typeof num !== 'string') return num;
const str = String(num);
// 如果不是科学计数法格式，直接返回
if (!/e/i.test(str)) return str;
const [mantissa, exponent] = str.toLowerCase().split('e');
const precision = Math.max(0, -parseInt(exponent) + (mantissa.includes('.') ? mantissa.split('.')[1].length : 0));
return Number(num).toFixed(precision);
};
const wsTimeInstanceFn = () => {
if (wsTimeInstance.value) {
(wsTimeInstance.value).onmessage = (event) => {
......@@ -318,22 +288,19 @@ const wsTimeInstanceFn = () => {
const preTimeWindowEnd = ref(null);
const preTimeAllDate = ref(null);
// watch(() => selectedEndTime.value, val => {
// if (compareTime(formatDateTime(val),preTimeWindowEnd.value)) {
// stopAutoPlay();
// }
// }, { deep: true, immediate: true });
const onMessageIndex = ref(0);
const hasPlayed = ref(false);//只是个标志
// const hasPlayed = ref(false);//判断是否在自动播放中
const unlesscount = ref(0);
const subSysToMainSysFirstDataBack = ref(true);
const wssMessageHandle = () => {
// let WwflagToNext = 0
(wssInstance.value).onmessage = (event) => {
const data = JSON.parse(event.data);
console.log('data', data)
if (data.type === "realtime") {
playForward();
console.log('是否开始播放');
playForward();//开始播放
useAppStoreInstance.setGlobalLeftWssCONTINE(data);
}
// 只有history和实时模式数据，回复已收到数据的确认。要修改以下代码
......@@ -345,13 +312,13 @@ const wssMessageHandle = () => {
})
}
if (data.type === 'control' && (data.controlType === 'continue' && data?.messageTypeFalg === 'true')) {
// 跳到指定时间点
jumpToSpecificTime(new Date(subtractSecondsAndFormat(alignTo56Seconds(tempDateTime.value).toISOString(), data.remainingTimeMs + 1)), false)
if (!hasPlayed.value) {
//console.log("我是playForward--3");
playForward();
hasPlayed.value = true;
}
playForward();//开始播放
// if (!hasPlayed.value) {
//console.log("我是playForward--3");
// hasPlayed.value = true;
// }
}
// //console.log('setTimeout:', (1000*60)/playbackSpeed.value,playbackSpeed.value);
if ((data.type === 'history' && (data?.isLagrangeInterpolation === true)) && (data.controlType === 'SMOOTH')) {
......@@ -364,7 +331,7 @@ const wssMessageHandle = () => {
isChange_flag_firstBackDate.value = true;
playForward();
hasPlayed.value = true;
// hasPlayed.value = true;
useAppStoreInstance.setGlobalLeftWssCONTINE(data);
// console.log("useAppStoreInstance.globalLeftWssCONTINE;执行了");
......@@ -385,12 +352,6 @@ const wssMessageHandle = () => {
if (data.nextTimestamp) {
preTimeWindowEnd.value = data.nextTimestamp || data.dataTime;
}
// if (!hasPlayed.value) {
// //console.log("我是playForward--2");
// playForward();
// hasPlayed.value = true;
// }
// jumpToNextTime.value = data.remainingTimeMs || 0;
hasDraged_first_falseToTrue.value = true;
jumpToSpecificTime(new Date(subtractSecondsAndFormat(alignTo56Seconds(selectedEndTime.value).toISOString(), data.remainingTimeMs + 1)));
......@@ -404,10 +365,12 @@ const wssMessageHandle = () => {
}
isChange_flag_firstBackDate.value = true;
}
if (data.type === 'error') {
wssResponeFlag_isSuccess.value = false;
// eleplate plus 关闭loading
// (loading.value).close()
console.log(data.type, data.type === 'error', '为什么会进来33');
ElMessage({
type: 'error',
......@@ -418,7 +381,7 @@ const wssMessageHandle = () => {
//console.log("我走了这里4")
stopAutoPlay();
// isChange_flag_firstBackDate.value = false;
hasPlayed.value = false;
// hasPlayed.value = false;
// 处理任务数据
}
if (data.type === 'history' && !(data?.isLagrangeInterpolation === true)) {
......@@ -426,17 +389,17 @@ const wssMessageHandle = () => {
// 处理日志数据
// //console.log("endDateTime.value === selectedEndTime.value:", endDateTime.value , selectedEndTime.value.toISOString(),endDateTime.value === selectedEndTime.value);
useAppStoreInstance.setglobalStartWss(true)
speedChangedNormalDataBack.value = false;
speedChangedNormalDataBack.value = false;//多余
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));
// 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;
}
// is_flag_confirmAndPauseAndSpeed.value = true;
// }
preTimeAllDate.value = data;
// clearTimeout(WwflagToNext);
......@@ -452,30 +415,22 @@ const wssMessageHandle = () => {
stopAutoPlay();
} else {
if (!hasPlayed.value) {
//console.log("我是playForward--3");
playForward();
hasPlayed.value = true;
}
playForward();
// if (!hasPlayed.value) {
// //console.log("我是playForward--3");
// hasPlayed.value = true;
// }
// startAutoPlay()
}
wssResponeFlag_isSuccess.value = true;
// message.success("同步时间轴数据状态成功！！！");
// //console.log('我是history的数据:', data);
// //console.log("compareTime*******",compareTime( formatDateTime(selectedEndTime.value),data.timeWindowEnd));
// preTimeWindowEnd.value = new Date(formatDateTime(selectedStartTime.value))
// if (data.timeWindowEnd ) {
// }
// if (compareTime( formatDateTime(selectedEndTime.value),preTimeWindowEnd.value)) {
// stopAutoPlay();
// }
}
if (data.type === 'EndProcess') {
useAppStoreInstance.setglobalStartWss(false)
// useAppStoreInstance.setglobalStartWss(false)
// isChange_flag_firstBackDate.value = false;
console.log(data.type, data.type === 'error', '为什么会进来11');
ElMessage({
type: 'error',
message: data.message || `已暂停，没有查询到该时间段的历史数据！！！`,
......@@ -487,11 +442,7 @@ const wssMessageHandle = () => {
}
unlesscount.value += 1
// 处理服务器返回的数据,减去1000毫秒延迟，防止setTimeout和返回数据重叠在一个时间点上
// flagToNext = setTimeout(() => {
// stopAutoPlay();
// hasPlayed.value = false;
// }, ((1000*60)/playbackSpeed.value)-1000);
};
}
......@@ -518,7 +469,7 @@ const endHandlePercent = ref(0);
// 拖动状态
const isDragging = ref(false);
const currentDragHandle = ref(null);
// const currentDragHandle = ref(null);
// 滑块DOM引用
const sliderTrack = ref(null);
......@@ -528,7 +479,8 @@ const selectedStartTime = ref(new Date(startDateTime.value));
const selectedEndTime = ref(new Date(startDateTime.value));
// 自动播放相关状态
const isPlaying = ref(false);
const isPlaying = ref(false);//true--代表正在播放,false---代表暂停
const playbackSpeed = ref(1); // 播放速度倍数
const playbackDirection = ref(1); // 1表示向前播放，-1表示向后播放
const playbackInterval = ref(null);
......@@ -563,16 +515,18 @@ const disabledDate = (time) => {
const pick_select_date = ref();
const pick_select_date_handFn = (val) => {
if (pick_select_date.value == val) {
return ElMessage({
type: 'warning',
message: `当前时间段未发生变化，请重新选时间段`,
})
}
pick_select_date.value = val;
//console.log("dddddd",val);
isChange_flag_select_date.value = true;
}
const isChange_flag_select_date = ref(false);
const taskCode_everyChange = ref('');
// 点击确认后，处理日期范围变化
const handleDateRangeChange = async (val, flag = false, RemoveSat) => {
const handleDateRangeChange = async (val, flag = false, RemoveSat, speed) => {
if (RemoveSat) {
is_flag_isRealtime.value = false;
localStorage.setItem("is_flag_isRealtime", false);
......@@ -585,7 +539,7 @@ const handleDateRangeChange = async (val, flag = false, RemoveSat) => {
useAppStoreInstance.setglobalSubsystemSelectedStartTime(val);
jiangerTime.value = 0;
isChange_flag_firstBackDate.value = false;
hasPlayed.value = false;
// hasPlayed.value = false;
if (!flag) {
taskCode_everyChange.value = String(Date.now());
useAppStoreInstance.setglobalSubsystemTaskCode(taskCode_everyChange.value);
......@@ -593,85 +547,68 @@ const handleDateRangeChange = async (val, flag = false, RemoveSat) => {
useAppStoreInstance.setFooterTimeHasedSelectTimeToSub(true);
}
if (val && val.length > 0) {
if (isChange_flag_select_date.value || useAppStoreInstance.globalisFromTosub) {
wssResponeFlag_isSuccess.value = true;
isPlaying.value = false;
if (!flag) {
Loading.show()
}
if (val && val.length === 2) {
//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 = 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.setglobalSubsystemSelectedEndTime(formatDateTime(val[1]));
isDraged.value = false;
isDateRangeNotEmpty.value = false;
isConfirmedWithRange.value = true; // 标记为带范围确认
clearInterval(autoUpdateDateRange.value);
updateTimeline();
// 重置滑块位置到开始位置
startHandlePercent.value = 0;
endHandlePercent.value = 0;
wssResponeFlag_isSuccess.value = true;
isPlaying.value = false;
if (!flag) {
Loading.show()
}
if (val && val.length === 2) {
//console.log("cao cao11",val);
startDateTime.value = new Date((new Date(val[0])).setSeconds(56)).toISOString();
endDateTime.value = new Date((new Date(val[1]))).toISOString();
isDraged.value = false;
isDateRangeNotEmpty.value = false;
isConfirmedWithRange.value = true; // 标记为带范围确认
clearInterval(autoUpdateDateRange.value);
updateTimeline();
// 强制更新视图
nextTick(() => {
updateSelectedTimes(); //更新选中的时间滑块位置 → 实际时间的转换
});
}
// 重置滑块位置到开始位置
startHandlePercent.value = 0;
endHandlePercent.value = 0;
playbackSpeed.value = 1;
if (!flag) {
wssOpenHandle({
isRealtime: is_flag_isRealtime.value ? true : false,
startTime: formatDateTime(val[0]),
endTime: formatDateTime(val[1]),
taskCode: String(taskCode_everyChange.value) === "" ? useAppStoreInstance.globalRecordMainSysTaskCode || (useAppStoreInstance.globalSubsystemTaskCode) : String(taskCode_everyChange.value),
})
}
if (window.ue5) {
// 强制更新视图
nextTick(() => {
updateSelectedTimes(); //更新选中的时间滑块位置 → 实际时间的转换
});
}
window.ue5("callBackTimeFn", String(JSON.stringify({
isRealtime: is_flag_isRealtime.value ? true : false,
startTime: (formatDateTime(val[0])),
speed: playbackSpeed.value,
endTime: (formatDateTime(val[1])),
taskCode: String(taskCode_everyChange.value) === "" ? useAppStoreInstance.globalRecordMainSysTaskCode || (useAppStoreInstance.globalSubsystemTaskCode) : String(taskCode_everyChange.value),
currentTime: (formatDateTime(selectedEndTime.value)),
status: isPlaying.value ? "stop" : "continue",
})))
console.log("走了这里3");
playbackSpeed.value = Number(speed);//倍速设置
console.log("倍速设置", playbackSpeed.value);
if (!flag) {
wssOpenHandle({
isRealtime: is_flag_isRealtime.value ? true : false,
startTime: formatDateTime(val[0]),
endTime: formatDateTime(val[1]),
taskCode: String(taskCode_everyChange.value) === "" ? useAppStoreInstance.globalRecordMainSysTaskCode || (useAppStoreInstance.globalSubsystemTaskCode) : String(taskCode_everyChange.value),
})
}
if (window.ue5) {
}
wssMessageHandle()
} else {
window.ue5("callBackTimeFn", String(JSON.stringify({
isRealtime: is_flag_isRealtime.value ? true : false,
startTime: (formatDateTime(val[0])),
speed: playbackSpeed.value,
endTime: (formatDateTime(val[1])),
taskCode: String(taskCode_everyChange.value) === "" ? useAppStoreInstance.globalRecordMainSysTaskCode || (useAppStoreInstance.globalSubsystemTaskCode) : String(taskCode_everyChange.value),
currentTime: (formatDateTime(selectedEndTime.value)),
status: isPlaying.value ? "continue" : "stop",
})))
console.log("走了这里3");
ElMessage({
type: 'warning',
message: `当前时间段未发生变化，请重新选时间段`,
})
// dateRange.value = [];
}
isChange_flag_select_date.value = false;
// dateRange.value = [];
wssMessageHandle()
} else {
ElMessage({
type: 'warning',
message: `时间范围为空，自动执行最近24小时`,
})
useAppStoreInstance.setGlobalisFromTosub(false);
useAppStoreInstance.setFooterTimeHasedSelectTimeToSub(false);
// useAppStoreInstance.setGlobalisFromTosub(false);
// useAppStoreInstance.setFooterTimeHasedSelectTimeToSub(false);
useAppStoreInstance.setFooterTimeHasedSelectTimeToSub(true);//true--历史模式,false--实时模式
isDateRangeNotEmpty.value = true;
isConfirmedWithRange.value = false; // 重置标记
is_flag_isRealtime.value = true;
isChange_flag_select_date.value = false;//表示已经选过时间段了
playbackSpeed.value = 1;
stopAutoPlay();
......@@ -686,7 +623,7 @@ watch(() => wssResponeFlag_isSuccess.value, (newVal) => {
//console.log("我是这里再监测数值变化，",newVal);
if (newVal) {
console.log("触发2");
startAutoPlay();
}
......@@ -755,7 +692,7 @@ const generateTimelineDates = () => {
timelineDates.value = dates;
updateSelectedTimes();
};
//时间刻度
const timeMarkers = computed(() => {
const markers = [];
const start = new Date(startDateTime.value);
......@@ -782,7 +719,7 @@ const timeMarkers = computed(() => {
let current = dayjs(start).toDate();
// console.log(dayjs(current).format('YYYY-MM-DD HH:mm'))
console.log('end', dayjs(end).format('YYYY-MM-DD HH:mm'))
console.log(dayjs(start).format('YYYY-MM-DD HH:mm'), '发送日期', dayjs(end).format('YYYY-MM-DD HH:mm'))
while (current < end) {
const position = ((current.getTime() - start.getTime()) / totalMs) * 100;
markers.push({
......@@ -799,10 +736,9 @@ const timeMarkers = computed(() => {
return markers;
});
//用于显示刻度样式
const isMarkerInSelectedRange = (marker) => {
// //console.log("-----------------------,",marker);
const markerTime = marker.time.getTime();
const startTime = selectedStartTime.value.getTime();
const endTime = selectedEndTime.value.getTime();
......@@ -810,26 +746,11 @@ const isMarkerInSelectedRange = (marker) => {
return markerTime >= startTime && markerTime <= endTime;
};
// 日期格式化函数 - 修改为只显示 MM-DD
const formatDate = (date) => {
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${month}-${day}`;
};
// 时间格式化函数
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();
if (!date || date == undefined) return '未选择';
if (!isDateString(date)) 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');
......@@ -837,7 +758,11 @@ const formatDateTime = (date) => {
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
//判断字符串是不是时间
function isDateString(dateString) {
var date = new Date(dateString);
return date instanceof Date && !isNaN(date);
}
// 修改后的选中区域样式计算属性
const selectedRangeStyle = computed(() => {
// 如果是带范围确认且未在播放状态，则选中区域宽度为0
......@@ -861,9 +786,8 @@ const selectedRangeStyle = computed(() => {
// 滑块位置计算
const startHandlePosition = computed(() => `${startHandlePercent.value}%`);
// 结束时滑块距离左侧的位置
const endHandlePosition = computed(() => {
if (isConfirmedWithRange.value && !isPlaying.value) {
return `${startHandlePercent.value}%`;
}
......@@ -871,7 +795,7 @@ const endHandlePosition = computed(() => {
return `${endHandlePercent.value}%`;
});
//更新时间
const updateSelectedTimes = () => {
if (!startDateTime.value || !endDateTime.value) return;
......@@ -892,73 +816,96 @@ const updateSelectedTimes = () => {
// //console.log("************",useAppStoreInstance.globalTimeLineEndSelectTime);
};
const isDraged = ref(false);
// false: 播放方向为向前播放，true: 播放方向为向后播放
const curplaybackDirection = ref(false);
// 切换自动播放状态
const toggleAutoPlay = () => {
if (is_flag_isRealtime.value) {
if (is_flag_isRealtime.value) {//实时模式
// ElMessage({
// type: 'warning',
// message: '当前为实时播放模式,不可执行播放操作！',
// })
//实时模式下的暂停后端还没有上线
isPlaying.value = !isPlaying.value
console.log('isPlaying', isPlaying.value)
if (isPlaying.value) {
// stopAutoPlay();
if (window.ue5) {
if (isPlaying.value) { }//false--需要暂停,true--需要代表继续播放
// stopAutoPlay();
if (window.ue5) {
console.log("触发3");
if (isPlaying.value) {
//开始播放
startAutoPlay()
taskCode_everyChange.value = String(Date.now());
useAppStoreInstance.setglobalSubsystemTaskCode(taskCode_everyChange.value);
useAppStoreInstance.setGlobalRecordMainSysTaskCode(taskCode_everyChange.value)
useAppStoreInstance.setFooterTimeHasedSelectTimeToSub(true);
console.log('is_flag_isRealtime', is_flag_isRealtime.value)
console.log('taskCode', taskCode_everyChange.value)
// console.log('startTime',selectedStartTime.value)
// console.log('endTime',selectedEndTime.value)
console.log('startTime', formatDateTime(new Date(startDateTime.value)))
console.log('endTime', formatDateTime(new Date(endDateTime.value)))
console.log('currentTime', (formatDateTime(selectedEndTime.value)))
// return
wssOpenHandle({
isRealtime: is_flag_isRealtime.value ? true : false,
startTime: formatDateTime(new Date(startDateTime.value)),
endTime: formatDateTime(new Date(endDateTime.value)),
taskCode: String(taskCode_everyChange.value) === "" ? useAppStoreInstance.globalRecordMainSysTaskCode || (useAppStoreInstance.globalSubsystemTaskCode) : String(taskCode_everyChange.value),
isRealtime: true,//实时模式
isFastForward: false,//不加速,实时模式没有倍速概念
status: "continue"
})
window.ue5("callBackTimeFn", String(JSON.stringify({
isRealtime: is_flag_isRealtime.value ? true : false,
startTime: formatDateTime(new Date(startDateTime.value)),
endTime: formatDateTime(new Date(endDateTime.value)),
speed: playbackSpeed.value,
taskCode: String(taskCode_everyChange.value) === "" ? useAppStoreInstance.globalRecordMainSysTaskCode || (useAppStoreInstance.globalSubsystemTaskCode) : String(taskCode_everyChange.value),
currentTime: (formatDateTime(selectedEndTime.value)),
status: isPlaying.value ? "stop" : "continue",
//时间参数
})))
console.log("走了这里4");
} else {
wssOpenHandle({
isRealtime: true,//实时模式
isFastForward: false,//不加速,实时模式没有倍速概念
status: "stop"
})
//暂停
stopAutoPlay();
}
taskCode_everyChange.value = String(Date.now());
useAppStoreInstance.setglobalSubsystemTaskCode(taskCode_everyChange.value);
useAppStoreInstance.setGlobalRecordMainSysTaskCode(taskCode_everyChange.value)
useAppStoreInstance.setFooterTimeHasedSelectTimeToSub(false);//true--历史模式,false--实时模式
console.log('is_flag_isRealtime', is_flag_isRealtime.value)
console.log('taskCode', taskCode_everyChange.value)
// console.log('startTime',selectedStartTime.value)
// console.log('endTime',selectedEndTime.value)
console.log('startTime', formatDateTime(new Date(startDateTime.value)))
console.log('endTime', formatDateTime(new Date(endDateTime.value)))
console.log('currentTime', (formatDateTime(selectedEndTime.value)))
// return
// wssOpenHandle({
// isRealtime: is_flag_isRealtime.value ? true : false,
// startTime: formatDateTime(new Date(startDateTime.value)),
// endTime: formatDateTime(new Date(endDateTime.value)),
// taskCode: String(taskCode_everyChange.value) === "" ? useAppStoreInstance.globalRecordMainSysTaskCode || (useAppStoreInstance.globalSubsystemTaskCode) : String(taskCode_everyChange.value),
// })
console.log(String(JSON.stringify({
isRealtime: true,
startTime: formatDateTime(new Date(startDateTime.value)),
endTime: formatDateTime(new Date(endDateTime.value)),
speed: playbackSpeed.value,
taskCode: String(taskCode_everyChange.value) === "" ? useAppStoreInstance.globalRecordMainSysTaskCode || (useAppStoreInstance.globalSubsystemTaskCode) : String(taskCode_everyChange.value),
currentTime: (formatDateTime(selectedEndTime.value)),
status: isPlaying.value ? "continue" : "stop",
//时间参数
})), '传给ue5的参数');
window.ue5("callBackTimeFn", String(JSON.stringify({
isRealtime: true,
startTime: formatDateTime(new Date(startDateTime.value)),
endTime: formatDateTime(new Date(endDateTime.value)),
speed: playbackSpeed.value,
taskCode: String(taskCode_everyChange.value) === "" ? useAppStoreInstance.globalRecordMainSysTaskCode || (useAppStoreInstance.globalSubsystemTaskCode) : String(taskCode_everyChange.value),
currentTime: (formatDateTime(selectedEndTime.value)),
status: isPlaying.value ? "continue" : "stop",
//时间参数
})))
console.log("走了这里4");
}
} else {
} else {//历史模式
is_flag_playBackwarding.value = true;
if (isPlaying.value) {
//console.log("我是切换自动播放状态stopAutoPlay()",isPlaying.value);
//console.log("我走了这里7")
stopAutoPlay();
stopAutoPlay();//停止自动播放
if (window.ue5) {
window.ue5("callBackSpeedFn", String(JSON.stringify({
......@@ -978,8 +925,8 @@ const toggleAutoPlay = () => {
isConfirmedWithRange.value = false; // 开始播放时重置标记
jiangerTime.value = 0;
playForward();
playForward();//开始播放
// 跳转到指定的时间点
jumpToSpecificTime(new Date(addOneSecond(formatDateTime(selectedEndTime.value), 1)));
if (window.ue5) {
window.ue5("callBackSpeedFn", String(JSON.stringify({
......@@ -1022,6 +969,7 @@ const playForward = async () => {
isConfirmedWithRange.value = false; // 重置标记
curplaybackDirection.value = false;
playbackDirection.value = 1;
console.log("触发4");
startAutoPlay();
// 强制更新视图
......@@ -1038,61 +986,14 @@ const playForward = async () => {
is_flag_playForwarding.value = false;
};
// 开始向后播放
// const playBackward = async () => {
// is_flag_playForwarding.value = true;
// if (is_flag_playBackwarding.value) {
// const loading = ElLoading.service({
// lock: true,
// text: 'Loading',
// background: 'rgba(0, 0, 0, 0.7)',
// })
// // 使用 Promise 包装 setTimeout
// await new Promise(resolve => {
// setTimeout(() => {
// loading.close()
// resolve()
// }, 2000)
// })
// stopAutoPlay(); // 先停止当前播放
// isPlaying.value = true;
// isConfirmedWithRange.value = false; // 重置标记
// curplaybackDirection.value = true;
// playbackDirection.value = -1;
// startAutoPlay();
// // 强制更新视图
// nextTick(() => {
// updateSelectedTimes();
// });
// } else {
// message.warning('正在后向播放！');
// }
// is_flag_playBackwarding.value = false;
// };
// 开始自动播放 第一版
// const startAutoPlay = () => {
// // 清除之前的定时器
// if (playbackInterval.value) {
// clearInterval(playbackInterval.value);
// }
// // 设置新的定时器，每秒更新一次
// playbackInterval.value = setInterval(() => {
// moveEndHandle();
// }, 1000 ); // 根据播放速度调整间隔
// };
// 第二版
// 第二版开始播放
const startAutoPlay = () => {
console.log('开始播放?', !isPlaying.value);
if (playbackInterval.value) {
clearInterval(playbackInterval.value);
}
let expectedTime = Date.now() + (1000 / playbackSpeed.value);
const update = () => {
const drift = Date.now() - expectedTime;
moveEndHandle();
......@@ -1100,14 +1001,14 @@ const startAutoPlay = () => {
// 第4步：递归调用（根据漂移量修正间隔）
playbackInterval.value = setTimeout(update, Math.max(0, (1000 / playbackSpeed.value) - drift));
};
// hasPlayed.value = true;
playbackInterval.value = setTimeout(update, 1000 / playbackSpeed.value);
};
// 停止自动播放
const stopAutoPlay = () => {
isPlaying.value = false;
//console.log("停止自动播放", playbackInterval.value);
console.log("停止自动播放", playbackInterval.value);
if (playbackInterval.value) {
clearInterval(playbackInterval.value);
playbackInterval.value = null;
......@@ -1165,11 +1066,11 @@ const moveEndHandle = () => {
// 切换播放速度
const changeSpeed = () => {
//console.log("我是changeSpeed",playbackSpeed.value);
speedChangedNormalDataBack.value = true;
speedChangedNormalDataBack.value = true;//多余
// const speeds = [1, 2, 4, 8, 10];
// const currentIndex = speeds.indexOf(playbackSpeed.value);
// const nextIndex = (currentIndex + 1) % speeds.length;
hasPlayed.value = false;
// hasPlayed.value = false;
// playbackSpeed.value = speeds[nextIndex];
jiangerTime.value = 0;
if (window.ue5) {
......@@ -1189,11 +1090,12 @@ const changeSpeed = () => {
// 如果正在播放，重新开始自动播放以应用新的速度
if (isPlaying.value) {
console.log("触发5");
startAutoPlay();
}
};
//结束拖动
const startDrag = (handle, e) => {
//console.log("开始拖动");
// if (is_flag_isRealtime.value) {
......@@ -1204,14 +1106,13 @@ const startDrag = (handle, e) => {
// return
// }
// is_flag_isRealtime.value = false;
isDateRangeNotEmpty.value = false;
// isDateRangeNotEmpty.value = false;
clearInterval(autoUpdateDateRange.value);
isDraged.value = true;
isDragging.value = true;
currentDragHandle.value = handle;
// currentDragHandle.value = handle;
e.preventDefault();
endDrag_opeartioning.value = false
console.log("拖动开始", selectedEndTime.value);
// console.log("拖动开始", currentDragHandle.value);
// 手动拖动时停止自动播放
// if (isPlaying.value) {
......@@ -1233,29 +1134,16 @@ const startDrag = (handle, e) => {
};
// 拖动过程中函数回显样式等信息
const handleDrag = (e) => {
if (!isDragging.value || !currentDragHandle.value || !sliderTrack.value) return;
// 手动拖动时停止自动播放
// if (isPlaying.value) {
// //console.log("我是处理拖动stopAutoPlay()",isPlaying.value);
// //console.log("我走了这里10")
// stopAutoPlay();
// }
if (!isDragging.value || !sliderTrack.value) return;
const rect = sliderTrack.value.getBoundingClientRect();
let percentage = ((e.clientX - rect.left) / rect.width) * 100;
// 限制在0-100%之间
percentage = Math.max(0, Math.min(100, percentage));
if (currentDragHandle.value === 'start') {
startHandlePercent.value = percentage;
} else {
endHandlePercent.value = percentage;
}
//100份中的多少份
endHandlePercent.value = percentage;
// 更新选中时间
updateSelectedTimes();
};
......@@ -1276,7 +1164,7 @@ const alignTo56Seconds = (date) => {
return d;
};
// 换算成指定的时间单位
const addOneSecond = (timeStr, sec = 1) => {
// 解析输入字符串为 Date 对象（注意：需指定时区为本地时间）
const [datePart, timePart] = timeStr.split(' ');
......@@ -1300,8 +1188,7 @@ const addOneSecond = (timeStr, sec = 1) => {
return `${newYear}-${newMonth}-${newDay} ${newHour}:${newMinute}:${newSecond}`;
};
//时间格式转换
const subtractSecondsAndFormat = (isoString, secondsToSubtract) => {
......@@ -1329,14 +1216,11 @@ const subtractSecondsAndFormat = (isoString, secondsToSubtract) => {
const jumpToNextTime = ref(0);
const hasDraged_first_falseToTrue = ref(false);
const endDrag_opeartioning = ref(false)
//拖动结束
const endDrag = () => {
endDrag_opeartioning.value = true
isDragging.value = false;
currentDragHandle.value = null;
hasPlayed.value = false;
// currentDragHandle.value = null;
// hasPlayed.value = false;
if (window.ue5) {
console.log(window.ue5, "拖动结束", isDraged.value, is_flag_isRealtime.value, useAppStoreInstance.globalLeftWssCONTINE);
......@@ -1393,11 +1277,11 @@ const endDrag = () => {
window.removeEventListener('mousemove', handleDrag);
window.removeEventListener('mouseup', endDrag);
updateSelectedTimes();
is_flag_confirmAndPauseAndSpeed.value = false;
// is_flag_confirmAndPauseAndSpeed.value = false;
stopAutoPlay();
};
// 重置滑块-重置当天日期
const updateTimeline = () => {
// 验证时间范围
if (new Date(startDateTime.value) >= new Date(endDateTime.value)) {
......@@ -1411,37 +1295,8 @@ const updateTimeline = () => {
startHandlePercent.value = 0;
endHandlePercent.value = 0;
};
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}`;
};
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 formatDateTimeOne = (timeStr) => {
// 支持传入 Date 对象或字符串
const date = timeStr instanceof Date ? timeStr : new Date(timeStr);
......@@ -1459,52 +1314,47 @@ const formatDateTimeOne = (timeStr) => {
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
const handleSetTimeOutCycle = () => {
if (flag_SetTimeOutCycle.value === null) {
flag_SetTimeOutCycle.value = setInterval(() => {
// //console.log("我走了setInterval",(formatDateTimeOne(selectedEndTime.value)));
if (window.ue5) {
window.ue5("callBackCycleTimePointFn", String(JSON.stringify({
// currentTime: trackCycleTimePoint(formatDateTime(selectedEndTime.value)),
currentTime: (formatDateTimeOne(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;
// }
// const handleSetTimeOutCycle = () => {
// if (flag_SetTimeOutCycle.value === null) {
// flag_SetTimeOutCycle.value = setInterval(() => {
// // //console.log("我走了setInterval",(formatDateTimeOne(selectedEndTime.value)));
// if (window.ue5) {
// window.ue5("callBackCycleTimePointFn", String(JSON.stringify({
// // currentTime: trackCycleTimePoint(formatDateTime(selectedEndTime.value)),
// currentTime: (formatDateTimeOne(selectedEndTime.value)),
// })));
// }
// }, 1000 * 2);
// }
// });
// }
const tempDateTime = ref(new Date(useAppStoreInstance.globalTimeLineEndSelectTime))
onMounted(() => {
wsTimeInstanceFn();
wsTimeInstanceFn();//接受实时模式下的数据
//进入前时间
tempDateTime.value = ""
if (useAppStoreInstance.footerTimeHasedSelectTimeToSub) {
console.log(useAppStoreInstance.footerTimeHasedSelectTimeToSub, '逻辑对比');
console.log(localStorage.getItem("is_flag_isRealtime"), '跳转前模式');
if (useAppStoreInstance.footerTimeHasedSelectTimeToSub) {//判断是实时模式还是历史模式
is_flag_isRealtime.value = localStorage.getItem("is_flag_isRealtime") === "true";
console.log("初始化走上面（历史模式恢复）", is_flag_isRealtime.value, useAppStoreInstance.globalLeftWssCONTINE.mode);
tempDateTime.value = useAppStoreInstance.globalTimeLineEndSelectTime
subSysToMainSysFirstDataBack.value = false;
// subSysToMainSysFirstDataBack.value = false;
//历史模式时间范围
if (!is_flag_isRealtime.value) {
dateRange.value = [new Date((new Date(useAppStoreInstance.globalSubsystemSelectedStartTime[0]))).toISOString(), new Date((new Date(useAppStoreInstance.globalSubsystemSelectedStartTime[1]))).toISOString()]
pick_select_date.value = [new Date(dateRange.value[0]).toString(), new Date(dateRange.value[1]).toString()]
}
{
console.log(localStorage.getItem("playbackSpeed"), '判断是否走了历史模式', useAppStoreInstance.globalSubsystemSelectedStartTime);
// ⚠️ 保存离开前的 isRealtime 状态，因为 handleDateRangeChange 内部会把 is_flag_isRealtime 设为 false
// const wasRealtime = useAppStoreInstance.globalLeftWssCONTINE.type === "realtime";
handleDateRangeChange(useAppStoreInstance.globalSubsystemSelectedStartTime, true);
//点击了确认按钮---下拉时间框的
handleDateRangeChange(useAppStoreInstance.globalSubsystemSelectedStartTime, true, false, localStorage.getItem("playbackSpeed"));
// handleDateRangeChange 之后恢复 isRealtime 标志（否则实时模式会变成历史模式）
// if (wasRealtime) {
// is_flag_isRealtime.value = true;
......@@ -1519,6 +1369,7 @@ onMounted(() => {
if (tempDateTime.value) {
const restored = new Date(tempDateTime.value);
if (!isNaN(restored.getTime())) {
//跳转到指定时间
jumpToSpecificTime(restored, false);
console.log("滑块恢复到离开前位置:", tempDateTime.value);
}
......@@ -1537,6 +1388,7 @@ onMounted(() => {
}
} else {
//实时模式
updateTimeline();
console.log("初始化走下面");
if (window.ue5) {
......@@ -1549,7 +1401,7 @@ onMounted(() => {
console.log("走了这里1");
}
}
useAppStoreInstance.setGlobalisFromTosub(false)
// useAppStoreInstance.setGlobalisFromTosub(false)
// ⚠️ 如果是从分系统返回，上面已经在 nextTick 里恢复了滑块和 wssOpenHandle
// 不能再调 realTimeData()，否则会生成新 taskCode、重置 WS，把之前的恢复全部覆盖
......@@ -1560,7 +1412,6 @@ onMounted(() => {
console.log('isPlaying', isPlaying.value)
if (!isPlaying.value) {
if (window.ue5) {
isChange_flag_select_date.value = true
realTimeData()
}
......@@ -1568,13 +1419,13 @@ onMounted(() => {
});
// 定义定时器引用
// 定义定时器引用--时间开始
const realTimeData = () => {
// startAutoPlay()
taskCode_everyChange.value = String(Date.now());
useAppStoreInstance.setglobalSubsystemTaskCode(taskCode_everyChange.value);
useAppStoreInstance.setGlobalRecordMainSysTaskCode(taskCode_everyChange.value)
useAppStoreInstance.setFooterTimeHasedSelectTimeToSub(true);
useAppStoreInstance.setFooterTimeHasedSelectTimeToSub(true);//判断是实时模式还是历史模式
wssOpenHandle({
isRealtime: true,
taskCode: String(taskCode_everyChange.value) === "" ? useAppStoreInstance.globalRecordMainSysTaskCode || (useAppStoreInstance.globalSubsystemTaskCode) : String(taskCode_everyChange.value),
......@@ -1590,7 +1441,7 @@ const realTimeData = () => {
taskCode: String(taskCode_everyChange.value) === "" ? useAppStoreInstance.globalRecordMainSysTaskCode || (useAppStoreInstance.globalSubsystemTaskCode) : String(taskCode_everyChange.value),
currentTime: dayjs(selectedEndTime.value).format('YYYY-MM-DD HH:mm'),
status: isPlaying.value ? "stop" : "continue",
status: isPlaying.value ? "continue" : "stop",
//时间参数
})))
......@@ -1604,28 +1455,25 @@ const realTimeData = () => {
const isChange_flag_firstBackDate = ref(false)
const intervalTimer = ref(null);
// 监听 selectedEndTime 的变化，二无停，时间是2025-11-02 16:01:00
// 监听 selectedEndTime(拖动后的当前时间) 的变化，二无停，时间是2025-11-02 16:01:00
// 检测时间间隔
const jiangerTime = ref(0)
const isFirst = ref(true)
watch(
() => selectedEndTime.value,
(val) => {
// console.log("每隔1秒，callBackTimeFn", val);
// //console.log("每隔111111111122222-----bianhua");
// 每次改变时间时向ue发送当前时间
if (window.ue5) {
// console.log("每隔1秒，callBackCycleTimePointFn",(formatDateTimeOne(selectedEndTime.value)));
window.ue5("callBackCycleTimePointFn", String(JSON.stringify({
// currentTime: trackCycleTimePoint(formatDateTime(selectedEndTime.value)),
currentTime: (formatDateTimeOne(selectedEndTime.value)),
})));
endDrag_opeartioning.value = false;
}
// 检查是否满足条件
if (isChange_flag_firstBackDate.value) {
// preTimeWindowEnd.value = new Date((new Date(new Date(selectedStartTime.value))).setSeconds(56+60)).toISOString();
// //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) {
......@@ -1641,47 +1489,24 @@ watch(
}
}
jiangerTime.value += 1;
// console.log("111111111111111",formatDateTime(selectedEndTime.value), preTimeWindowEnd.value);
if (compareTime(formatDateTime(selectedEndTime.value), preTimeWindowEnd.value)) {
//console.log("我走了这里2")
if (isPlaying.value) {
stopAutoPlay();
hasPlayed.value = false;
// hasPlayed.value = false;
isChange_flag_firstBackDate.value = false;
}
// clearInterval(intervalTimer.value);
// intervalTimer.value = null;
}
// if (!intervalTimer.value) {
// intervalTimer.value = setInterval(() => {
// //console.log("每隔一秒执行一次逻辑",compareTime(formatDateTime(selectedEndTime.value), preTimeWindowEnd.value));
// // 在这里执行你需要的逻辑
// if (compareTime(formatDateTime(selectedEndTime.value), preTimeWindowEnd.value)) {
// stopAutoPlay();
// clearInterval(intervalTimer.value);
// intervalTimer.value = null;
// hasPlayed.value = false;
// isChange_flag_firstBackDate.value = false;
// }
// }, 1000*10);
// }
}
// else {
// // 如果条件不满足，清除定时器
// if (intervalTimer.value) {
// //console.log("清理定时器");
// clearInterval(intervalTimer.value);
// intervalTimer.value = null;
// }
// }
},
{ deep: true, immediate: true }
);
// 年月日时间函数
const getDayRangeFromTime = (timeStr) => {
const [datePart] = timeStr.split(' ');
const [year, month, day] = datePart.split('-').map(Number);
......@@ -1697,7 +1522,12 @@ onUnmounted(() => {
// 不能依赖 globalLeftWssCONTINE，因为它会被 lefts/index.vue 用 wss 实例覆盖
useAppStoreInstance.setGlobalIsRealtimeBeforeSub(is_flag_isRealtime.value);
useAppStoreInstance.setGlobalSubsystemSelectedTimeRange(getDayRangeFromTime(useAppStoreInstance.globalTimeLineEndSelectTime));
console.log(is_flag_isRealtime.value, '判断状态');
// is_flag_isRealtime--true代表实时模式,false--代表历史模式
//console.log("jieshuli 1，组件卸载时要发暂停",getDayRangeFromTime(useAppStoreInstance.globalTimeLineEndSelectTime)[0],getDayRangeFromTime(useAppStoreInstance.globalTimeLineEndSelectTime)[1]);
// 储存跳转前的模式--实时模式-true,还是历史模式-false
localStorage.setItem("is_flag_isRealtime", is_flag_isRealtime.value)
localStorage.setItem("playbackSpeed", playbackSpeed.value)//储存倍速
if (is_flag_isRealtime.value) {
// 实时传输时，组件卸载时要发暂停
if (window.ue5) {
......
src/pages/header/index.vue
浏览文件 @ 477d68b1
......@@ -160,7 +160,7 @@ const handletoLinkClick = () => {
// location.replace('/subsystem');
router.push('/');
//console.log("1111111111111111111111111",useAppStoreInstance.isSourceLegendShow);
useAppStoreInstance.setGlobalisFromTosub(true);
// useAppStoreInstance.setGlobalisFromTosub(true);
useAppStoreInstance.setislegendShow(useAppStoreInstance.isSourceLegendShow ? true : false);
//console.log("11111111111111111111111112",useAppStoreInstance.islegendShow);
useAppStoreInstance.setiscontrolPanelShow(true);
......@@ -218,16 +218,17 @@ const getGridInfoListData = async () => {
onMounted(async () => {
console.log("onMounted加兹安");
// window.addEventListener('message', handleUEMessage);
await getGridInfoListData()
window.ue.interface.emitUIInteraction = (res) => {
const resData = JSON.parse(res);
console.log("我是handleUEMessage,收到UE交互:", resData);
if (resData.locationReplace === 'true') {
useAppStoreInstance.setiscontrolPanelShow(false);
useAppStoreInstance.setglobalSatelliteSearchID(resData.SatelliteSearchID || '4097');
if (!useAppStoreInstance.islegendShow) {
if (resData.locationReplace === 'true') {//进入分系统
useAppStoreInstance.setiscontrolPanelShow(false);//分系统右上角悬浮框
useAppStoreInstance.setglobalSatelliteSearchID(resData.SatelliteSearchID || '4097');//点击的卫星id
if (!useAppStoreInstance.islegendShow) {//判断下方图例是否隐藏
useAppStoreInstance.setislegendShow(true);
}
router.push(
......@@ -246,13 +247,14 @@ onMounted(async () => {
})
//console.log("1111111111111111111111111",useAppStoreInstance.isSourceLegendShow);
useAppStoreInstance.setGlobalisFromTosub(true);
// useAppStoreInstance.setGlobalisFromTosub(true);
useAppStoreInstance.setislegendShow(useAppStoreInstance.isSourceLegendShow ? true : false);
//console.log("11111111111111111111111112",useAppStoreInstance.islegendShow);
useAppStoreInstance.setiscontrolPanelShow(true);
useAppStoreInstance.setGlobalSubsystemSelectedTimeRange([]);
}
}
//调取接口回显
await initChartData();
});
......
src/pages/lefts/index.vue
浏览文件 @ 477d68b1
......@@ -24,7 +24,7 @@
<div class="orbit-visualization">
<!-- <ordit></ordit> -->
<el-carousel :key="carouselKey" indicator-position="none" height="120px" :loop="true"
<el-carousel :key="carouselKey" indicator-position="none" :loop="true" class="carouselClass"
:autoplay="globaleAutoPlay" :interval="Number(globalIntervalTime)" @change="handleCarouselChange">
<el-carousel-item v-for="indexs in orbitMetrics.length" :key="indexs"
style="text-align: center;height: 100%;">
......@@ -965,6 +965,7 @@ onUnmounted(() => {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
gap: 10px;
overflow-y: auto;
background-color: #010102;
......@@ -973,8 +974,11 @@ onUnmounted(() => {
/* 顶部容器 */
.header-container {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
/* align-items: center; */
gap: 5px;
/* 方法1: 在定义变量时就计算好 */
......@@ -1913,6 +1917,19 @@ onUnmounted(() => {
margin-left: 10px;
}
.satellite-section,
.ground-system-section {
flex: 1;
}
:deep(.carouselClass) {
min-height: 120px;
}
:deep(.el-carousel__container) {
height: 100% !important;
min-height: 120px;
}
/* 响应式调整 */
@media (max-width: 768px) {
......
src/pages/lefts2/index.vue
浏览文件 @ 477d68b1
......@@ -386,9 +386,9 @@ const headerItemAllContent = ref({
const backHomeClick = () => {
console.log("我执行了");
router.push('/');
// router.push('/');--通过通信进行跳转
// //console.log("1111111111111111111111111", useAppStoreInstance.isSourceLegendShow);
useAppStoreInstance.setGlobalisFromTosub(true);
// useAppStoreInstance.setGlobalisFromTosub(true);
useAppStoreInstance.setislegendShow(useAppStoreInstance.isSourceLegendShow ? true : false);
// //console.log("11111111111111111111111112", useAppStoreInstance.islegendShow);
useAppStoreInstance.setiscontrolPanelShow(true);
......
src/pages/rights/index.vue
浏览文件 @ 477d68b1
......@@ -4,13 +4,14 @@
<!-- 顶部区域：标题与核心指标 -->
<div class="header-container">
<component :is="component1" :data="[capacityData, trafficData]" zoomHeight="2" :title="titles[0]" slogan="容量/流量"
:legendName="['链路层容量', '用户实际流量']" :lineArray="true" @changeTime="changeTimeFn(1, $event)"></component>
:legendName="['链路层容量', '用户实际流量']" :yName="yName1" :lineArray="true" @changeTime="changeTimeFn(1, $event)">
</component>
</div>
<!-- 卫星列表 -->
<div class="satellite-section">
<!-- <cdf></cdf> -->
<component :is="component2" :data="[availabilityData, actualAvailabilityData]" zoomHeight="14"
:title="titles[1]" slogan="可用性" :legendName="['规划可用性', '实际可用性']" :lineArray="true"
:title="titles[1]" slogan="可用性" :yName="yName2" :legendName="['规划可用性', '实际可用性']" :lineArray="true"
@changeTime="changeTimeFn(2, $event)">
</component>
</div>
......@@ -19,7 +20,8 @@
<div class="ground-system-section">
<!-- <instant></instant> -->
<component :is="component3" :data="[delayData, lossRateData]" zoomHeight="14" :title="titles[2]"
slogan="网络时延/丢包" :legendName="['搜星时延', '丢包率']" :lineArray="false" @changeTime="changeTimeFn(3, $event)">
slogan="网络时延/丢包" :legendName="['搜星时延', '丢包率']" :yName="yName3" :lineArray="false"
@changeTime="changeTimeFn(3, $event)">
</component>
</div>
</template>
......@@ -38,6 +40,10 @@ import Loading from '@/pages/all/components/loadingComponent/index.js'
const startTime = ref('')
const endTime = ref('')
const timeclick = ref(true)//选择时间时更新组件
// y轴单位
const yName1 = ref(["Mbps"])
const yName2 = ref([])
const yName3 = ref(["ms", ""])
//组件返回时信息根据type区分判断
const changeTimeFn = (type, times) => {
console.log(times, '对比', type);
......
src/store/module/app.js
浏览文件 @ 477d68b1
......@@ -35,17 +35,17 @@ const useAppStore = defineStore("app", {
subsystemSocketContent: "",
HeartbeatInterval: null,
isTimeLineShow: true,
islegendShow: true,
islegendShow: true,//主系统时间下方图例是否隐藏
isSourceLegendShow: true,
isdataPanelShow: true,
issatelliteOrbitShow: false,
issatelliteBeamShow: true,
iscontrolPanelShow: true,
iscontrolPanelShow: true,//控制主系统右上角悬浮框,分系统右上角悬浮框
globaleAutoPlay: true,
globalIntervalTime: 3000,
globalStartWss: false,
globalSatelliteSearchID: "4097",
globalSatelliteSearchID: "4097",//卫星id
globalSubsystemActiveIndex: "0",
globalSubsystemIsFastForward: false,
globalSubsystemSpeed: 1,
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论