Skip to content

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

曲线和简化地址

上级 cd979434
隐藏空白字符变更
内嵌 并排
正在显示 包含 210 行增加 和 76 行删除
.env.development
浏览文件 @ ae38ba01
......@@ -20,4 +20,8 @@
# MODE_ENV = development
# # 本地环境接口地址
VITE_API_URL = /api
\ No newline at end of file
VITE_API_URL = /api
# 线上环境部署
VITE_WS_URL = 121.229.107.155:19021
# 本地环境部署
# VITE_WS_URL = 127.0.0.1:19021
.env.production
浏览文件 @ ae38ba01
......@@ -23,3 +23,7 @@
# VITE_API_URL = http://172.16.13.11:32088
# VITE_API_URL = /prod-api
VITE_API_URL = /api
# 线上环境部署
VITE_WS_URL = 121.229.107.155:19021
# 本地环境部署
# VITE_WS_URL = 127.0.0.1:19021
\ No newline at end of file
src/pages/all/components/cdf/cdfCurve.vue
浏览文件 @ ae38ba01
......@@ -295,7 +295,7 @@ function initChart() {
fontSize: 12,
fontWeight: 'bold',
color: '#fff',
padding: [0, 40, 0, 0]
// padding: [0, 40, 0, 0]
},
splitLine: {
show: true,
......@@ -377,6 +377,14 @@ function initChart() {
resizeChart();
window.addEventListener('resize', resizeChart);
}
//将时间戳转换成时分秒
function timestampToHMS(timestamp) {
const date = new Date(timestamp); // 如果传入的是秒，需要乘以1000转换为毫秒
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
const seconds = date.getSeconds().toString().padStart(2, '0');
return `${hours}:${minutes}:${seconds}`;
}
function hexToRgba(hex, alpha) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
......
src/pages/all/components/cdf/index.vue
浏览文件 @ ae38ba01
......@@ -30,7 +30,7 @@
<label class="selector-label">时间窗口</label>
<div class="custom-select">
<!-- 地面粒度 -->
<el-select v-model="timeValue" placeholder="" style="width: 100%;">
<el-select v-model="timeValue" placeholder="" size="small" style="width: 100%;">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value"
@click="dateClick()" />
</el-select>
......@@ -44,11 +44,19 @@
</div>
</div>
<div class="selector-item" v-if="historyS">
<label class="selector-label">时间段</label>
<label class="selector-label">开始时间</label>
<div class="custom-select">
<el-date-picker class="dateclass" v-model="dateValue" type="daterange" range-separator="~"
start-placeholder="开始时间" end-placeholder="结束时间" @change="dateClick" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" />
<el-date-picker class="dateclass" fallback-placements="bottom" v-model="dateValue1" type="date"
placeholder="开始时间" @change="dateClick('start', dateValue1)" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
size="small" />
</div>
</div>
<div class="selector-item" v-if="historyS">
<label class="selector-label">结束时间</label>
<div class="custom-select">
<el-date-picker class="dateclass" fallback-placements="bottom" v-model="dateValue2" type="date"
placeholder="结束时间" :disabled="!dateValue1" @change="dateClick('end', dateValue2)" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" size="small" />
</div>
</div>
</div>
......@@ -127,7 +135,9 @@
import { onBeforeUnmount } from 'vue';
import cdfCurve from './cdfCurve.vue'
const colorList = ["#6ffcba", "#5470c6"]//同一个图标中不同曲线的颜色设置
import { ElLoading, ElMessage } from 'element-plus'
const dateValue1 = ref('')//开始时间
const dateValue2 = ref('')//结束时间
const props = defineProps({
title: {
type: String,
......@@ -189,14 +199,24 @@ const timeList = ref([
])
const emit = defineEmits();
const timeValue = ref('1')
// 判断时间大小
function isTimeDudge(startTime, endTime) {
const start = new Date(startTime).getTime();
const end = new Date(endTime).getTime();
return end > start || end == start;
}
//点击时隐弹框调取接口
const dateClick = (e) => {
const dateClick = (type, value) => {
var startTime, endTime
if (e && e != undefined) {
dateValue.value = []
startTime = e[0]
endTime = e[1]
} else {
if (type == 'end') {
if (!isTimeDudge(dateValue1.value, value)) {//判断结束时间是否大于或者等于开始时间
dateValue2.value = ""
return ElMessage.warning('结束时间不能小于开始时间!')
}
}
if (!type) {
const now = new Date();
const year = now.getFullYear(); // 年份，如 2026
const month = now.getMonth() + 1; // 月份，需要 +1，结果范围 1~12
......@@ -210,6 +230,12 @@ const dateClick = (e) => {
} else if (timeValue.value == 3) {//近一个月
startTime = getPreviousMonthDate()
}
} else {
startTime = dateValue1.value
endTime = dateValue2.value
if (!dateValue2.value) {
return
}
}
emit("changeTime", [startTime, endTime]);
setdia.value = false
......@@ -553,6 +579,9 @@ const componentProps = ref({});
z-index: 2;
border-radius: 8px;
padding: 10px;
display: flex;
flex-direction: column;
row-gap: 5px;
}
.selector-label {
......@@ -582,6 +611,6 @@ const componentProps = ref({});
}
:deep(.dateclass) {
width: 250px !important;
width: 180px !important;
}
</style>
\ No newline at end of file
src/pages/all/components/hotMapComponents/index.vue
浏览文件 @ ae38ba01
......@@ -38,7 +38,7 @@
<label class="selector-label">时间窗口</label>
<div class="custom-select">
<!-- 地面粒度 -->
<el-select v-model="timeValue" placeholder="" style="width: 100%;">
<el-select v-model="timeValue" placeholder="" style="width: 100%;" size="small">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value"
@click="dateClick()" />
</el-select>
......@@ -52,11 +52,19 @@
</div>
</div>
<div class="selector-item" v-if="historyS">
<label class="selector-label">时间段</label>
<label class="selector-label">开始时间</label>
<div class="custom-select">
<el-date-picker class="dateclass" v-model="dateValue" type="daterange" range-separator="~"
start-placeholder="开始时间" end-placeholder="结束时间" @change="dateClick" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" />
<el-date-picker class="dateclass" fallback-placements="bottom" v-model="dateValue1" type="date"
placeholder="开始时间" @change="dateClick('start', dateValue1)" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
size="small" />
</div>
</div>
<div class="selector-item" v-if="historyS">
<label class="selector-label">结束时间</label>
<div class="custom-select">
<el-date-picker class="dateclass" fallback-placements="bottom" v-model="dateValue2" type="date"
placeholder="结束时间" :disabled="!dateValue1" @change="dateClick('end', dateValue2)" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" size="small" />
</div>
</div>
</div>
......@@ -118,6 +126,9 @@
<script setup>
import { ref } from 'vue';
import hotMap from './hotMap.vue'
import { ElLoading, ElMessage } from 'element-plus'
const dateValue1 = ref('')//开始时间
const dateValue2 = ref('')//结束时间
const props = defineProps({
slogan: {
type: String,
......@@ -145,7 +156,6 @@ const selectedValue = ref(0)//热力图下拉框
// console.log(props, '热力图数据')
const historyS = ref(false)//是否查询历史模式
const dateValue = ref([])//时间段
const setdia = ref(false)//弹框是否展开
......@@ -171,14 +181,24 @@ const timeList = ref([
])
const emit = defineEmits();
const timeValue = ref('1')
// 判断时间大小
function isTimeDudge(startTime, endTime) {
const start = new Date(startTime).getTime();
const end = new Date(endTime).getTime();
return end > start || end == start;
}
//点击时隐弹框调取接口
const dateClick = (e) => {
const dateClick = (type, value) => {
var startTime, endTime
if (e && e != undefined) {
dateValue.value = []
startTime = e[0]
endTime = e[1]
} else {
if (type == 'end') {
if (!isTimeDudge(dateValue1.value, value)) {//判断结束时间是否大于或者等于开始时间
dateValue2.value = ""
return ElMessage.warning('结束时间不能小于开始时间!')
}
}
if (!type) {
const now = new Date();
const year = now.getFullYear(); // 年份，如 2026
const month = now.getMonth() + 1; // 月份，需要 +1，结果范围 1~12
......@@ -192,6 +212,12 @@ const dateClick = (e) => {
} else if (timeValue.value == 3) {//近一个月
startTime = getPreviousMonthDate()
}
} else {
startTime = dateValue1.value
endTime = dateValue2.value
if (!dateValue2.value) {
return
}
}
emit("changeTime", [startTime, endTime]);
setdia.value = false
......@@ -556,6 +582,9 @@ const closeDialogFn = () => {
z-index: 2;
border-radius: 8px;
padding: 10px;
display: flex;
flex-direction: column;
row-gap: 5px;
}
.selector-label {
......@@ -585,6 +614,6 @@ const closeDialogFn = () => {
}
:deep(.dateclass) {
width: 250px !important;
width: 180px !important;
}
</style>
\ No newline at end of file
src/pages/all/components/instant/index.vue
浏览文件 @ ae38ba01
......@@ -30,7 +30,7 @@
<label class="selector-label">时间窗口</label>
<div class="custom-select">
<!-- 地面粒度 -->
<el-select v-model="timeValue" placeholder="" style="width: 100%;">
<el-select v-model="timeValue" placeholder="" size="small" style="width: 100%;">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value"
@click="dateClick()" />
</el-select>
......@@ -44,18 +44,25 @@
</div>
</div>
<div class="selector-item" v-if="historyS">
<label class="selector-label">时间段</label>
<label class="selector-label">开始时间</label>
<div class="custom-select">
<el-date-picker class="dateclass" v-model="dateValue" type="daterange" range-separator="~"
start-placeholder="开始时间" end-placeholder="结束时间" @change="dateClick" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" />
<el-date-picker class="dateclass" fallback-placements="bottom" v-model="dateValue1" type="date"
placeholder="开始时间" @change="dateClick('start', dateValue1)" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
size="small" />
</div>
</div>
<div class="selector-item" v-if="historyS">
<label class="selector-label">结束时间</label>
<div class="custom-select">
<el-date-picker class="dateclass" fallback-placements="bottom" v-model="dateValue2" type="date"
placeholder="结束时间" :disabled="!dateValue1" @change="dateClick('end', dateValue2)" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" size="small" />
</div>
</div>
</div>
<!-- 核心数据指标 判断一个图表中是否有多个曲线-->
<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]"
:yName="props.yName ? { type: props.yName?.type, value: props.yName?.value[0] ? props.yName?.value[0] : '' } : {}"
......@@ -133,7 +140,9 @@
import instantCurve from './instantCurve.vue'
import bigdialog from '../../../header/component/bigdialog.vue'
import { ElLoading, ElMessage } from 'element-plus'
const dateValue1 = ref('')//开始时间
const dateValue2 = ref('')//结束时间
const instantCurveRight = ref('instantCurve_chart-right');
const instantCurveLeft = ref('instantCurve_chart-left');
const props = defineProps({
......@@ -202,14 +211,24 @@ const timeList = ref([
])
const emit = defineEmits();
const timeValue = ref('1')
// 判断时间大小
function isTimeDudge(startTime, endTime) {
const start = new Date(startTime).getTime();
const end = new Date(endTime).getTime();
return end > start || end == start;
}
//点击时隐弹框调取接口
const dateClick = (e) => {
const dateClick = (type, value) => {
var startTime, endTime
if (e && e != undefined) {
dateValue.value = []
startTime = e[0]
endTime = e[1]
} else {
if (type == 'end') {
if (!isTimeDudge(dateValue1.value, value)) {//判断结束时间是否大于或者等于开始时间
dateValue2.value = ""
return ElMessage.warning('结束时间不能小于开始时间!')
}
}
if (!type) {
const now = new Date();
const year = now.getFullYear(); // 年份，如 2026
const month = now.getMonth() + 1; // 月份，需要 +1，结果范围 1~12
......@@ -223,6 +242,12 @@ const dateClick = (e) => {
} else if (timeValue.value == 3) {//近一个月
startTime = getPreviousMonthDate()
}
} else {
startTime = dateValue1.value
endTime = dateValue2.value
if (!dateValue2.value) {
return
}
}
emit("changeTime", [startTime, endTime]);
setdia.value = false
......@@ -567,6 +592,9 @@ const componentProps = ref({})
z-index: 2;
border-radius: 8px;
padding: 10px;
display: flex;
flex-direction: column;
row-gap: 5px;
}
.selector-label {
......@@ -596,6 +624,6 @@ const componentProps = ref({})
}
:deep(.dateclass) {
width: 250px !important;
width: 180px !important;
}
</style>
\ No newline at end of file
src/pages/all/components/instant/instantCurve.vue
浏览文件 @ ae38ba01
......@@ -371,7 +371,7 @@ function initChart() {
fontSize: 12,
fontWeight: 'bold',
color: '#fff',
padding: [0, 40, 0, 0]
// padding: [0, 40, 0, 0]
},
// max: 120,
minInterval: 1,
......@@ -438,7 +438,7 @@ function initChart() {
fontSize: 12
},
formatter: function (params) {
let res = params[0].axisValue + '<br>';
let res = timestampToHMS(params[0].axisValue) + '<br>';
res += `${params[0].marker} ${params[0].seriesName}: ${params[0].value[1]} ${props.lineArray ? props.yName?.value[params[0].seriesIndex] : props.yName?.value}`;
return res;
},
......
src/pages/footer/component/timers.vue
浏览文件 @ ae38ba01
......@@ -78,15 +78,20 @@
<!-- 开始滑块 -->
<div class="slider-handle start-handle" :style="{ left: startHandlePosition }">
<div class="handle-rail"></div>
<div class="handle-tooltip">{{ formatDateTime(selectedStartTime) }}</div>
<div class="handle-tooltip">
<div>{{ formatDateTime(selectedStartTime)?.split(' ')[1] }}</div>
<div>{{ formatDateTime(selectedStartTime)?.split(' ')[0] }}</div>
</div>
</div>
<!-- 结束滑块 -->
<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>
<div class="handle-tooltip" :class="{ 'handle-tooltip_auto': !is_flag_isRealtime }">
<div>{{ formatDateTime(selectedEndTime)?.split(' ')[1] }}</div>
<div>{{ formatDateTime(selectedEndTime)?.split(' ')[0] }}</div>
</div>
</div>
</div>
</div>
......@@ -1351,11 +1356,13 @@ const resetclick = () => {
// 向 UE5 发送实时模式消息（页面初始加载时的参数格式）
if (window.ue5) {
// 给ue发送消息让ue切换模式
window.ue5("callBackTimeFn", String(JSON.stringify({
isRealtime: true,
taskCode: String(taskCode_everyChange.value) === "" ? useAppStoreInstance.globalRecordMainSysTaskCode || (useAppStoreInstance.globalSubsystemTaskCode) : String(taskCode_everyChange.value),
speed: playbackSpeed.value,
})));
//给ue发送消息让ue移除卫星
window.ue5("RemoveSat", String(JSON.stringify({
Sat: true,
})))
......@@ -1489,8 +1496,8 @@ 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: "continue",
// status: isPlaying.value ? "continue" : "stop",
// status: "continue",
status: isPlaying.value ? "continue" : "stop",
//时间参数
})))
......@@ -1541,18 +1548,18 @@ watch(
// console.log(formatDateTime(selectedEndTime.value), preTimeWindowEnd.value, '时间对比');
//对比时间----判断是否需要停止,拖动后后端连续返回三条数据,第一条是提示,第二第三条是ue用来定位和平滑的数据,这是后不应该停止时间,到56秒后应该接收到下一条数据时
// if (compareTime(formatDateTime(selectedEndTime.value), preTimeWindowEnd.value)) {
// if (isPlaying.value) {
// console.log('歘告诉过');
if (compareTime(formatDateTime(selectedEndTime.value), preTimeWindowEnd.value)) {
if (isPlaying.value) {
console.log('歘告诉过');
// stopAutoPlay();
// // hasPlayed.value = false;
// isChange_flag_firstBackDate.value = false;
// }
stopAutoPlay();
// hasPlayed.value = false;
isChange_flag_firstBackDate.value = false;
}
// // clearInterval(intervalTimer.value);
// // intervalTimer.value = null;
// }
// clearInterval(intervalTimer.value);
// intervalTimer.value = null;
}
}
},
......@@ -1845,7 +1852,10 @@ onUnmounted(() => {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
pointer-events: none;
z-index: 10;
z-index: 10000;
display: flex;
flex-direction: column;
align-items: center;
}
/* 当鼠标悬停在.handle-rail上时显示.tooltip */
......
src/pages/header/component/screenConfigeDialog.vue
浏览文件 @ ae38ba01
......@@ -9,9 +9,9 @@
</i>
<span class="logo_header_content">通信曲线</span>
</div>
<div class="logo_header_right">
<!-- <div class="logo_header_right">
<span class="logo_header_right_content">[区域一特事故]</span>
</div>
</div> -->
</div>
<div class="logo logo_right">
......
src/pages/lefts/index.vue
浏览文件 @ ae38ba01
......@@ -133,8 +133,8 @@
</template>
</el-input>
</div>
<el-table :data="satelliteData" size="small" :height="pxScale(170)" class="custom-table">
<!-- <div class="tableclass"> -->
<el-table :data="satelliteData" size="small" class="custom-table">
<el-table-column prop="" label="" :width="pxScale(30)">
<template #default="">
<img src='@/assets/images/lefts/satellite.png' alt="" class="satellite-icon">
......@@ -169,6 +169,7 @@
</el-table>
<!-- </div> -->
</div>
</div>
......@@ -220,8 +221,8 @@
</el-input>
</div>
<el-table :data="activeTab === 'equipment' ? equipmentData : faultData" size="small" :height="pxScale(160)"
<!-- <div class="tableclass"> -->
<el-table :data="activeTab === 'equipment' ? equipmentData : faultData" size="small"
@row-click="tableHandleRowClickFn" :fit="false" class="custom-table custom-table-foot ">
<el-table-column prop="" label="" :width="pxScale(30)">
<template #default="">
......@@ -258,7 +259,7 @@
</el-table-column>
</el-table>
<!-- </div> -->
</div>
</div>
</div>
......@@ -1140,6 +1141,7 @@ onUnmounted(() => {
/* border: 1px solid rgba(59, 130, 246, 0.3); */
border-radius: 8px;
padding-top: 10px;
flex: 1;
/* height: 200px; */
/* margin: 10px 0; */
}
......@@ -1500,6 +1502,9 @@ onUnmounted(() => {
width: 100%;
margin-top: 5px;
overflow: hidden;
flex: 1;
display: flex;
flex-direction: column;
}
.equipment-table-container {
......@@ -1570,13 +1575,24 @@ onUnmounted(() => {
color: #94a3b8;
}
.tableclass {
width: 100%;
flex: 1;
min-height: 160px;
overflow-y: auto;
/* background-color: red; */
}
.custom-table {
background: #000000;
border: 1px solid rgba(59, 130, 246, 0.3);
border-radius: 6px;
max-height: 170px;
overflow-y: auto;
margin-right: 20px;
min-height: 160px;
/* height: 100% !important; */
/* overflow-y: auto; */
/* flex-shrink: 1; */
/* font-size: 15px !important; */
}
......@@ -1929,9 +1945,12 @@ onUnmounted(() => {
.satellite-section,
.ground-system-section {
flex: 1;
display: flex;
flex-direction: column;
}
:deep(.carouselClass) {
height: 100%;
min-height: 120px;
}
......
src/pages/rights/index.vue
浏览文件 @ ae38ba01
......@@ -47,7 +47,7 @@ const yName1 = ref({
})
const yName2 = ref({
type: false,
value: ['s', 'dB']
value: ['s', 's']
})
const yName3 = ref({
type: true,
......
src/utils/requestSocekt.js
浏览文件 @ ae38ba01
......@@ -51,8 +51,8 @@
import useAppStore from '@/store/module/app.js';
const apiUrl = `ws://121.229.107.155:19021/TestTimeSend`; //线上
// const apiUrl = `ws://127.0.0.1:19021/TestTimeSend`; //本地
// const apiUrl = `ws://${import.meta.env.VITE_WS_URL}/TestTimeSend`; //线上
const apiUrl = `ws://${import.meta.env.VITE_WS_URL}/TestTimeSend`; //本地
let wss = null;
let timer = null;
const appStore = useAppStore();
......
src/utils/requestSocektTime.js
浏览文件 @ ae38ba01
import useAppStore from '@/store/module/app.js';
const apiUrl = `ws://121.229.107.155:19021/time`; //线上
// const apiUrl = `ws://127.0.0.1:19021/time`; //本地
// const apiUrl = `ws://${import.meta.env.VITE_WS_URL}/time`; //线上
const apiUrl = `ws://${import.meta.env.VITE_WS_URL}/time`; //本地
let Timewss = null;
let timer = null;
const appStore = useAppStore();
......
src/utils/subSystemRequestSocket.js
浏览文件 @ ae38ba01
......@@ -9,8 +9,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 apiUrl = `ws://127.0.0.1:19021/systemData`//本地地址
// const apiUrl = `ws://121.229.107.155:19021/systemData`
const apiUrl = `ws://${import.meta.env.VITE_WS_URL}/systemData`//本地地址
const SubWss = new WebSocket(apiUrl);
useAppStoreInstance.setSubsystemSocket(SubWss)
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论