Merge remote-tracking branch 'origin/master'

src/views/showSituation/before.vue

@@ -4,7 +4,7 @@
     <el-container direction="horizontal" class="main-horizontal-container">
       <!-- 主内容区域 -->
       <el-container direction="vertical" class="main-content-container">
-        <!-- 主要地图区域 - 占80%高度 -->
+        <!-- 主要地图区域 -->
         <el-main class="main-map">
           <div class="map-container">
             <img src="/img/map.png" alt="军事地图" class="map-image">
@@ -62,7 +62,7 @@
               />
             </svg>
 
-            <!-- 事件进度条组件 - 半透明背景 -->
+            <!-- 事件进度条组件 -->
             <div class="event-progress-container" @mouseenter="showEventDetail = true" @mouseleave="showEventDetail = false">
               <div class="progress-bar">
                 <div
@@ -108,7 +108,7 @@
               >
             </div>
 
-            <!-- 线路显示控制（默认折叠） -->
+            <!-- 线路显示控制 -->
             <div class="legend-container">
               <div
                 class="legend-toggle"
@@ -167,23 +167,9 @@
             </div>
 
 
-            <!-- 作业时间和气象信息卡片 - 右下角 -->
-            <div class="info-card-container">
-              <div class="telemetry-card combined-card">
-                <!-- 作业时间 -->
-                <!--                <div class="section-title">作业时间</div>
-                                <div class="time-details">
-                                  <div class="time-detail-item">
-                                    <div class="time-label">作业时间</div>
-                                    <div class="time-value military-time">{{ operationTime }}</div>
-                                  </div>
-                                  <div class="time-detail-item">
-                                    <div class="time-label">作业零点时间</div>
-                                    <div class="time-value military-time">{{ zeroTime }}</div>
-                                  </div>
-                                </div>-->
-
-                <!-- 气象信息 -->
+            <!-- 气象信息卡片 - 左上角（缩小版） -->
+            <div class="small-weather-card">
+              <div class="telemetry-card small-card">
                 <div class="section-title">气象信息</div>
                 <div class="weather-details">
                   <div class="telemetry-row">
@@ -226,12 +212,63 @@
                 <div class="view-label">{{ view.label }}</div>
               </div>
             </div>
+
+            <!-- 临机调整建议（右下角，使用走马灯） -->
+            <div class="adjustment-container">
+              <div class="telemetry-card advice-card highlight-card">
+                <div class="advice-header">
+                  <div class="advice-title">临机调整建议</div>
+                  <!-- 添加手动控制按钮 -->
+                  <div class="advice-controls">
+                    <el-button
+                      icon="el-icon-arrow-left"
+                      size="mini"
+                      @click="prevAdvice"
+                      :disabled="adjustmentAdvices.length <= 1"
+                    ></el-button>
+                    <el-button
+                      icon="el-icon-arrow-right"
+                      size="mini"
+                      @click="nextAdvice"
+                      :disabled="adjustmentAdvices.length <= 1"
+                    ></el-button>
+                  </div>
+                </div>
+                <div class="advice-carousel">
+                  <el-carousel
+                    ref="adviceCarousel"
+                    direction="vertical"
+                    :autoplay="false"
+                    indicator-position="none"
+                    height="180px"
+                    @change="handleAdviceChange"
+                  >
+                    <el-carousel-item v-for="(item, index) in adjustmentAdvices" :key="item.id">
+                      <div
+                        class="advice-item"
+                        @click="showAdjustmentDetail(item)"
+                      >
+                        <div class="advice-title">
+                          <span class="adjustment-dot" :class="item.type"></span>
+                          {{ item.title }}
+                          <span v-if="item.isNew" class="new-badge">新</span>
+                        </div>
+                        <div class="advice-time">{{ item.time }}</div>
+                        <div class="advice-description">
+                          {{ item.description }}
+                        </div>
+                      </div>
+                    </el-carousel-item>
+                  </el-carousel>
+                </div>
+              </div>
+            </div>
           </div>
         </el-main>
       </el-container>
     </el-container>
 
-    <!-- 临机调整弹窗 - 深色背景 -->
+    <!-- 临机调整弹窗 - 优化样式 -->
     <el-dialog
       title="临机调整建议"
       :visible.sync="adjustmentDialogVisible"
@@ -295,9 +332,9 @@ import { mapActions, mapGetters } from 'vuex'
 export default {
   data() {
     return {
-      // 初始化作业时间为任务开始后一段时间
+      // 作业时间
       operationTime: '00:05:30.123',
-      // 零点时间设置为任务开始基准时间（非全零）
+      // 零点时间
       zeroTime: '08:00:00.000',
       showRedLine: true,
       showBlueLine: true,
@@ -368,7 +405,7 @@ export default {
         }
       ],
       currentEventIndex: 2, // 时间线当前事件索引
-      carouselEventIndex: 0, // 轮播当前事件索引（独立于时间线）
+      carouselEventIndex: 0, // 轮播当前事件索引
       carouselInterval: null, // 轮播定时器
       // 临机调整建议
       adjustmentAdvices: [
@@ -400,10 +437,26 @@ export default {
             '同步校准B2装置进行协同观测'
           ],
           impact: '将扩大覆盖范围，观测精度保持不变'
+        },
+        {
+          id: 3,
+          title: '增强通信加密',
+          time: 'T+00:05:10',
+          description: '检测到正在尝试破解通信密码，建议立即增强加密等级',
+          type: 'critical',
+          isNew: true,
+          reason: '电子战单位正在实施密码破解攻击',
+          steps: [
+            '启动AES-256加密协议',
+            '每30秒自动更换一次会话密钥',
+            '启用跳频通信模式'
+          ],
+          impact: '通信安全性将显著提升，但可能增加10%的通信延迟'
         }
       ],
       adjustmentDialogVisible: false,
-      currentAdjustment: {}
+      currentAdjustment: {},
+      currentAdviceIndex: 0,//临机调整建议索引
     }
   },
   computed: {
@@ -428,7 +481,7 @@ export default {
       const currentEvent = this.events && this.events[this.currentEventIndex];
       return (currentEvent && colorMap[currentEvent.dotClass]) || '#1890ff';
     },
-    // 当前轮播显示的事件（独立于时间线）
+    // 当前轮播显示的事件
     currentCarouselEvent() {
       return this.events[this.carouselEventIndex] || {};
     },
@@ -441,31 +494,10 @@ export default {
     this.initTimeTracking();
   },
   mounted() {
-    //作业时间
-    this.setTimer();
     this.initTelemetryUpdates();
     window.addEventListener('resize', this.handleResize);
     // 启动自动轮播（3秒一次）
     this.startEventCarousel(3000);
-
-    // 模拟新建议推送效果
-    setTimeout(() => {
-      this.adjustmentAdvices.push({
-        id: 3,
-        title: '增强通信加密',
-        time: 'T+00:05:10',
-        description: '检测到正在尝试破解通信密码，建议立即增强加密等级',
-        type: 'critical',
-        isNew: true,
-        reason: '电子战单位正在实施密码破解攻击',
-        steps: [
-          '启动AES-256加密协议',
-          '每30秒自动更换一次会话密钥',
-          '启用跳频通信模式'
-        ],
-        impact: '通信安全性将显著提升，但可能增加10%的通信延迟'
-      });
-    }, 8000);
   },
   beforeDestroy() {
     window.removeEventListener('resize', this.handleResize);
@@ -515,45 +547,13 @@ export default {
         ].join(':').replace(/:(\d{3})$/, '.$1');
       }, 10);
     },
-    setTimer() {
-      setInterval(() => {
-        const timeParts = this.operationTime.split(/[:.]/).map(Number);
-        let hours = timeParts[0];
-        let minutes = timeParts[1];
-        let seconds = timeParts[2];
-        let milliseconds = timeParts[3];
-
-        // 毫秒级递增 (每10ms更新一次)
-        milliseconds += 10;
-        if (milliseconds >= 1000) {
-          milliseconds = 0;
-          seconds++;
-          if (seconds >= 60) {
-            seconds = 0;
-            minutes++;
-            if (minutes >= 60) {
-              minutes = 0;
-              hours++;
-            }
-          }
-        }
-
-        // 格式化输出，确保数字位数正确
-        this.operationTime = [
-          hours.toString().padStart(2, '0'),
-          minutes.toString().padStart(2, '0'),
-          seconds.toString().padStart(2, '0'),
-          milliseconds.toString().padStart(3, '0')
-        ].join(':').replace(/:(\d{3})$/, '.$1');
-      }, 10);
-    },
     ...mapActions('senPicture', ['updatePipImage']),
     // 点击右侧图片同步
     handleImageClick(imageUrl) {
       this.updatePipImage(imageUrl)
     },
     toggleLine(type) {
-      // 空方法保持事件绑定
+      // 线路切换处理
     },
     showPIP(show) {
       this.pipVisible = show;
@@ -600,7 +600,6 @@ export default {
 
     // 处理走马灯切换事件
     handleCarouselChange(index) {
-      // 如果需要同步其他状态，可以在这里处理
       console.log('Carousel changed to index:', index);
     },
 
@@ -626,9 +625,23 @@ export default {
     },
     sendToInterference() {
       this.adjustmentDialogVisible = false;
+      this.$message.success("已发送至干扰席位")
     },
     sendToMeasurement() {
       this.adjustmentDialogVisible = false;
+      this.$message.success("已发送至干扰席位")
+    },
+    // 临机调整建议手动控制
+    prevAdvice() {
+      this.$refs.adviceCarousel.prev();
+    },
+    nextAdvice() {
+      this.$refs.adviceCarousel.next();
+    },
+    // 处理临机调整建议切换事件
+    handleAdviceChange(index) {
+      this.currentAdviceIndex = index;
+      console.log('Advice carousel changed to index:', index);
     }
   }
 }
@@ -646,19 +659,24 @@ export default {
   position: absolute;
   bottom: 20px;
   left: 20px;
-  width: 300px;
+  width: 250px;
   z-index: 15;
 }
 
-/* 信息卡片容器 - 右下角定位 */
-.info-card-container {
+/* 小尺寸气象信息卡片 - 左上角定位 */
+.small-weather-card {
   position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 250px;
+  top: 20px;
+  left: 20px;
+  width: 280px;
   z-index: 15;
 }
 
+.small-card {
+  transform: scale(0.9);
+  transform-origin: top left;
+}
+
 /* 图片列表样式 - 右侧垂直排列 */
 .img-list {
   position: absolute;
@@ -1171,7 +1189,6 @@ html, body {
 
 /* 时间列表轮播样式 */
 .telemetry-card {
-  height: 100%;
   background-color: rgba(20, 30, 50, 0.2);
   border: 1px solid rgba(100, 120, 150, 0.2);
   border-radius: 6px;
@@ -1342,53 +1359,240 @@ html, body {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 }
 
-.status-info {
-  color: #6bbbf7;
+/* 临机调整建议 - 右下角 */
+.adjustment-container {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  width: 250px;
+  z-index: 15;
+}
+
+.advice-card {
+  height: 200px;
+  display: flex;
+  flex-direction: column;
 }
 
-.status-secondary {
-  color: #c5c5c5;
+/* 高亮临机调整建议卡片 */
+.highlight-card {
+  border: 1px solid rgba(250, 173, 20, 0.5);
+  box-shadow: 0 0 15px rgba(250, 173, 20, 0.2);
+  background-color: rgba(30, 25, 10, 0.3);
+  transition: all 0.5s ease;
 }
 
-.status-success {
-  color: #66d2a0;
+.highlight-card:hover {
+  box-shadow: 0 0 20px rgba(250, 173, 20, 0.4);
+  border-color: rgba(250, 173, 20, 0.8);
 }
 
-/* 按钮样式优化 */
-::v-deep .el-button {
-  background-color: rgba(30, 40, 60, 0.3);
-  border-color: rgba(100, 120, 150, 0.3);
-  color: #e0e0e0;
-  transition: all 0.2s ease;
+.advice-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
 }
 
-::v-deep .el-button:hover {
-  background-color: rgba(40, 50, 70, 0.7);
-  border-color: rgba(100, 120, 150, 0.8);
+.advice-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #f0f0f0;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.advice-carousel {
+  flex: 1;
+  overflow: hidden;
+}
+
+.advice-item {
+  padding: 12px;
+  border-radius: 5px;
+  background-color: rgba(40, 35, 20, 0.2);
+  height: 100%;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  border-left: 3px solid transparent;
+}
+
+.advice-item:hover {
+  background-color: rgba(50, 45, 30, 0.5);
+  transform: translateY(-2px);
+}
+
+.advice-item .advice-title {
+  font-size: 14px;
+  margin-bottom: 5px;
+  display: flex;
+  align-items: center;
   color: #fff;
 }
 
-::v-deep .el-button--primary {
-  background-color: rgba(24, 144, 255, 0.4);
-  border-color: rgba(24, 144, 255, 0.6);
+.advice-item .advice-time {
+  font-size: 12px;
+  color: #b0b7c3;
+  margin-bottom: 8px;
 }
 
-::v-deep .el-button--primary:hover {
-  background-color: rgba(24, 144, 255, 0.8);
-  border-color: rgba(24, 144, 255, 1);
+.advice-item .advice-description {
+  font-size: 13px;
+  color: #e0e0e0;
+  flex: 1;
+  line-height: 1.4;
 }
 
-/* 复选框样式优化 */
-::v-deep .el-checkbox__inner {
-  background-color: rgba(30, 40, 60, 0.3);
-  border-color: rgba(100, 120, 150, 0.3);
+/* 调整类型标记点 */
+.adjustment-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 8px;
 }
 
-::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
+.adjustment-dot.info {
   background-color: #1890ff;
-  border-color: #1890ff;
+  box-shadow: 0 0 3px rgba(24, 144, 255, 0.8);
+}
+
+.adjustment-dot.warning {
+  background-color: #faad14;
+  box-shadow: 0 0 3px rgba(250, 173, 20, 0.8);
+}
+
+.adjustment-dot.critical {
+  background-color: #ff4d4f;
+  box-shadow: 0 0 3px rgba(255, 77, 79, 0.8);
+  animation: pulse 2s infinite;
+}
+
+/* 新消息标记 */
+.new-badge {
+  background-color: #ff4d4f;
+  color: white;
+  font-size: 11px;
+  padding: 1px 5px;
+  border-radius: 3px;
+  margin-left: 5px;
+  animation: flash 1.5s infinite alternate;
+}
+
+@keyframes pulse {
+  0% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.2); opacity: 0.8; }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+@keyframes flash {
+  from { opacity: 0.7; }
+  to { opacity: 1; }
+}
+
+/* 临机调整弹窗样式优化 */
+::v-deep .military-dialog {
+  background-color: rgba(20, 30, 50, 0.9) !important;
+  border: 1px solid rgba(100, 120, 150, 0.5);
+  border-radius: 8px;
+  backdrop-filter: blur(8px);
+}
+
+::v-deep .military-dialog .el-dialog__header {
+  background-color: rgba(30, 40, 60, 0.8);
+  border-bottom: 1px solid rgba(100, 120, 150, 0.3);
+  padding: 15px 20px;
+}
+
+::v-deep .military-dialog .el-dialog__title {
+  color: #f0f0f0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+::v-deep .military-dialog .el-dialog__body {
+  padding: 20px;
+  color: #e0e0e0;
+  line-height: 1.6;
+}
+
+.adjustment-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.detail-section h4 {
+  color: #faad14;
+  margin-bottom: 10px;
+  font-size: 16px;
+  font-weight: 600;
+  padding-bottom: 5px;
+  border-bottom: 1px dashed rgba(100, 120, 150, 0.3);
+}
+
+.detail-section p {
+  color: #d0d7e3;
+  font-size: 14px;
+}
+
+.adjustment-steps {
+  padding-left: 20px;
+  color: #d0d7e3;
+}
+
+.adjustment-steps li {
+  margin-bottom: 8px;
+  position: relative;
+  padding-left: 5px;
+}
+
+.adjustment-steps li:before {
+  content: "•";
+  color: #1890ff;
+  font-weight: bold;
+  position: absolute;
+  left: -15px;
+}
+
+::v-deep .military-dialog .el-dialog__footer {
+  background-color: rgba(30, 40, 60, 0.8);
+  border-top: 1px solid rgba(100, 120, 150, 0.3);
+  padding: 15px 20px;
+}
+
+.military-btn {
+  background-color: rgba(40, 50, 70, 0.5);
+  border: 1px solid rgba(100, 120, 150, 0.5);
+  color: #e0e0e0;
+  transition: all 0.3s ease;
+  padding: 8px 16px;
+  border-radius: 4px;
+}
+
+.military-btn:hover {
+  background-color: rgba(50, 60, 80, 0.8);
+  border-color: rgba(100, 120, 150, 0.8);
+  color: #fff;
+}
+
+.military-btn.primary {
+  background-color: rgba(24, 144, 255, 0.6);
+  border-color: rgba(24, 144, 255, 0.8);
+}
+
+.military-btn.primary:hover {
+  background-color: rgba(24, 144, 255, 0.8);
+}
+/* 添加按钮禁用状态样式 */
+.advice-controls .el-button:disabled {
+  background-color: rgba(40, 50, 70, 0.2) !important;
+  border-color: rgba(100, 120, 150, 0.1) !important;
+  color: #666 !important;
+  cursor: not-allowed !important;
 }
 </style>