曲线和简化地址

.env.development

@@ -20,4 +20,8 @@
 # MODE_ENV = development
 
 # # 本地环境接口地址
-VITE_API_URL = /api
+VITE_API_URL = /api
\ No newline at end of file
+# 线上环境部署
+VITE_WS_URL = 121.229.107.155:19021
+# 本地环境部署
+# VITE_WS_URL = 127.0.0.1:19021

.env.production

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

 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

@@ -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)