cesium-map-object/ruoyi-ui/src/views/childRoom/index.vue

<template>
  <!-- 以地图为绝对定位背景，所有组件浮动其上 -->
  <div class="mission-planning-container">
    <div id="gis-map-background" class="map-background">
    <!-- 地图背景 -->
    <div id="gis-map-background" class="map-background">
      <!-- cesiummap组件 -->
      <cesiumMap :drawDomClick="drawDom"/>
      <div class="map-overlay-text">
        <i class="el-icon-location-outline text-3xl mb-2 block"></i>
        <p>二维GIS地图区域</p>
        <p class="text-sm mt-1">支持标绘/航线/空域/实时态势</p>
      </div>


      <!-- 地图中间的浮动红点（触发左侧菜单） -->
      <div
        class="floating-red-dot left-red-dot"
        :class="{ hidden: !isMenuHidden }"
        @click="showMenu"
        title="显示左侧菜单"
      >
        <div class="red-dot"></div>
        <i class="el-icon-s-unfold icon-inside"></i>
      </div>
    </div>

    <!-- 顶部导航栏 -->
    <top-header
      :room-code="roomCode"
      :online-count="onlineCount"
      :combat-time="combatTime"
      :astro-time="astroTime"
      :user-avatar="userAvatar"
      @select-nav="selectTopNav"
      @save-plan="savePlan"
      @import-plan-file="importPlanFile"
      @import-acd="importACD"
      @import-ato="importATO"
      @import-layer="importLayer"
      @import-route="importRoute"
      @export-plan="exportPlan"
      @route-edit="routeEdit"
      @military-marking="militaryMarking"
      @icon-edit="iconEdit"
      @attribute-edit="attributeEdit"
      @time-settings="timeSettings"
      @aircraft-settings="aircraftSettings"
      @key-event-edit="keyEventEdit"
      @missile-launch="missileLaunch"
      @toggle-2d-3d="toggle2D3D"
      @toggle-ruler="toggleRuler"
      @toggle-grid="toggleGrid"
      @save-scale="saveScale"
      @load-terrain="loadTerrain"
      @change-projection="changeProjection"
      @load-aero-chart="loadAeroChart"
      @save-power-zone="savePowerZone"
      @threat-zone="threatZone"
      @route-calculation="routeCalculation"
      @conflict-display="conflictDisplay"
      @data-materials="dataMaterials"
      @coordinate-conversion="coordinateConversion"
      @page-layout="pageLayout"
      @data-storage-path="dataStoragePath"
      @save-external-params="saveExternalParams"
      @import-airport="importAirport"
      @import-route-data="importRouteData"
      @import-landmark="importLandmark"
      @toggle-airport="toggleAirport"
      @toggle-landmark="toggleLandmark"
      @toggle-route="toggleRoute"
      @system-description="systemDescription"
      @layer-favorites="layerFavorites"
      @route-favorites="routeFavorites"
      @show-online-members="showOnlineMembersDialog"
    />

    <!-- 左侧折叠菜单栏 - 蓝色主题 -->
    <left-menu
      :is-hidden="isMenuHidden"
      :menu-items="menuItems"
      :active-menu="activeMenu"
      @hide="hideMenu"
      @select="selectMenu"
    />

    <!-- 右侧实体列表（浮动）- 蓝色主题 -->
    <right-panel
      :is-hidden="isRightPanelHidden"
      :active-tab="activeRightTab"
      :routes="routes"
      :selected-route-id="selectedRouteId"
      :selected-route-details="selectedRouteDetails"
      :conflicts="conflicts"
      :conflict-count="conflictCount"
      :air-platforms="airPlatforms"
      :sea-platforms="seaPlatforms"
      :ground-platforms="groundPlatforms"
      @hide="hideRightPanel"
      @select-route="selectRoute"
      @create-route="createRoute"
      @open-route-dialog="openRouteDialog"
      @open-waypoint-dialog="openWaypointDialog"
      @add-waypoint="addWaypoint"
      @cancel-route="cancelRoute"
      @view-conflict="viewConflict"
      @resolve-conflict="resolveConflict"
      @run-conflict-check="runConflictCheck"
      @open-platform-dialog="openPlatformDialog"
    />

    <!-- 左下角工具面板 -->
    <bottom-left-panel />

    <!-- 底部时间轴（最初版本的样式）- 蓝色主题 -->
    <div
      class="floating-timeline blue-theme"
      :class="{ 'show': showKTimePopup }"
    >
      <!-- 隐藏按钮（向下箭头） -->
      <div class="popup-hide-btn" @click="hideKTimePopup" title="隐藏K时">
        <i class="el-icon-arrow-down"></i>
      </div>

      <div class="timeline-controls">
        <div class="current-time blue-time">
          <i class="el-icon-time"></i>
          <span class="time-text">{{ currentTime }}</span>
        </div>

        <div class="timeline-slider">
          <el-slider
            v-model="timeProgress"
            :max="100"
            :format-tooltip="formatTimeTooltip"
            class="compact-slider blue-slider"
          />
        </div>

        <div class="playback-controls">
          <button
            class="control-btn blue-control-btn"
            @click="togglePlay"
            :title="isPlaying ? '暂停' : '播放'"
          >
            <i :class="isPlaying ? 'el-icon-video-pause' : 'el-icon-video-play'"></i>
          </button>

          <div class="speed-control">
            <button
              class="control-btn blue-control-btn"
              @click="decreaseSpeed"
              :disabled="playbackSpeed <= 1"
              title="减速"
            >
              <i class="el-icon-arrow-down"></i>
            </button>
            <span class="speed-text">{{ playbackSpeed }}x</span>
            <button
              class="control-btn blue-control-btn"
              @click="increaseSpeed"
              :disabled="playbackSpeed >= 25"
              title="加速"
            >
              <i class="el-icon-arrow-up"></i>
            </button>
          </div>
        </div>
      </div>


    </div>

    <!-- 在线成员弹窗 -->
    <online-members-dialog
      v-model="showOnlineMembers"
    />

    <!-- 平台编辑弹窗 -->
    <platform-edit-dialog
      v-model="showPlatformDialog"
      :platform="selectedPlatform"
      @save="updatePlatform"
    />

    <!-- 航线编辑弹窗 -->
    <route-edit-dialog
      v-model="showRouteDialog"
      :route="selectedRoute"
      @save="updateRoute"
    />

    <!-- 航点编辑弹窗 -->
    <waypoint-edit-dialog
      v-model="showWaypointDialog"
      :waypoint="selectedWaypoint"
      @save="updateWaypoint"
    />
  </div>
</template>

<script>
import cesiumMap from '@/views/cesiumMap'
import OnlineMembersDialog from '@/views/dialogs/OnlineMembersDialog'
import PlatformEditDialog from '@/views/dialogs/PlatformEditDialog'
import RouteEditDialog from '@/views/dialogs/RouteEditDialog'
import WaypointEditDialog from '@/views/dialogs/WaypointEditDialog'
import LeftMenu from './LeftMenu'
import RightPanel from './RightPanel'
import BottomLeftPanel from './BottomLeftPanel'
import TopHeader from './TopHeader'
export default {
  name: 'MissionPlanningView',
  components: {
    cesiumMap,
    OnlineMembersDialog,
    PlatformEditDialog,
    RouteEditDialog,
    WaypointEditDialog,
    LeftMenu,
    RightPanel,
    BottomLeftPanel,
    TopHeader
  },
  data() {
    return {
      drawDom:false,
      // 在线成员弹窗
      showOnlineMembers: false,
      // 编辑弹窗控制
      showPlatformDialog: false,
      selectedPlatform: null,
      showRouteDialog: false,
      selectedRoute: null,
      showWaypointDialog: false,
      selectedWaypoint: null,

      // 作战信息
      roomCode: 'JTF-7-ALPHA',
      onlineCount: 30,
      combatTime: 'K+01:30:45',
      astroTime: '',

      // 左侧菜单栏
      isMenuHidden: true,      // 是否完全隐藏左侧菜单
      activeMenu: 'file',

      // 右侧面板控制
      isRightPanelHidden: true, // 是否完全隐藏右侧面板

      // K时弹出框控制
      showKTimePopup: false,

      // 显示/隐藏控制
      showAirport: true,
      showLandmark: true,
      showRoute: true,

      menuItems: [
        { id: 'file', name: '方案', icon: 'el-icon-s-operation' },
        { id: 'start', name: '冲突', icon: 'el-icon-warning-outline' },
        { id: 'insert', name: '平台', icon: 'el-icon-ship' },
        { id: 'pattern', name: '图案', icon: 'el-icon-picture-outline' },
        { id: 'deduction', name: '推演', icon: 'el-icon-video-play' },
        { id: 'modify', name: '修改', icon: 'el-icon-edit' },
        { id: 'refresh', name: '刷新', icon: 'el-icon-refresh' },
        { id: 'basemap', name: '底图', icon: 'el-icon-map-location' },
        { id: 'import', name: '导入', icon: 'el-icon-upload2' },
        { id: 'export', name: '导出', icon: 'el-icon-download' }
      ],

      // 右侧面板
      activeRightTab: 'plan',
      selectedRouteId: 101,
      selectedRouteDetails: null,

      // 冲突数据
      conflictCount: 2,
      conflicts: [
        {
          id: 1,
          title: '航线空间冲突',
          routes: ['Alpha进场航线', 'Beta巡逻航线'],
          time: 'K+01:20:00',
          position: 'E116° N39°',
          severity: 'high'
        },
        {
          id: 2,
          title: '时间窗口重叠',
          routes: ['侦察覆盖区', '无人机巡逻'],
          time: 'K+02:15:00',
          position: 'E117° N38°',
          severity: 'medium'
        }
      ],

      // 平台数据
      activePlatformTab: 'air',
      airPlatforms: [
        { id: 1, name: 'J-20 歼击机', type: '战斗机', icon: 'el-icon-fighter', color: '#52c41a', status: 'ready' },
        { id: 2, name: 'KJ-2000 预警机', type: '预警机', icon: 'el-icon-s-promotion', color: '#1890ff', status: 'flying' },
        { id: 3, name: 'UAV-01 无人机', type: '侦察无人机', icon: 'el-icon-drone', color: '#fa8c16', status: 'scouting' },
        { id: 4, name: 'H-6K 轰炸机', type: '轰炸机', icon: 'el-icon-bomb', color: '#722ed1', status: 'ready' },
      ],
      seaPlatforms: [
        { id: 5, name: '辽宁舰', type: '航空母舰', icon: 'el-icon-ship', color: '#1890ff', status: 'sailing' },
        { id: 6, name: '055型驱逐舰', type: '驱逐舰', icon: 'el-icon-ship', color: '#52c41a', status: 'patrol' },
        { id: 7, name: '093型潜艇', type: '核潜艇', icon: 'el-icon-ship', color: '#333', status: 'hidden' },
      ],
      groundPlatforms: [
        { id: 8, name: 'HQ-9防空系统', type: '防空导弹', icon: 'el-icon-mic', color: '#f5222d', status: 'alert' },
        { id: 9, name: 'PLZ-05自行火炮', type: '自行火炮', icon: 'el-icon-aim', color: '#fa8c16', status: 'ready' },
        { id: 10, name: '指挥控制车', type: '指挥车', icon: 'el-icon-monitor', color: '#1890ff', status: 'operating' },
      ],

      // 航线数据
      routes: [
        { id: 101, name: 'Alpha进场航线', points: 8, conflict: true },
        { id: 102, name: 'Beta巡逻航线', points: 6, conflict: false },
        { id: 103, name: '侦察覆盖区', points: 4, conflict: false },
      ],

      // 时间控制
      timeProgress: 45,
      currentTime: 'K+01:15:30',
      isPlaying: false,
      playbackSpeed: 1,
      playbackInterval: null,

      // 用户
      userAvatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    };
  },
  mounted() {
    // 初始化时左侧菜单隐藏
    this.isMenuHidden = true;
    // 初始化时右侧面板隐藏
    this.isRightPanelHidden = true;

    // 更新时间
    this.updateTime();
    setInterval(this.updateTime, 1000);
    // 作战时间也需要实时更新
    setInterval(this.updateCombatTime, 1000);
  },
  beforeDestroy() {
    // 清除播放定时器
    if (this.playbackInterval) {
      clearInterval(this.playbackInterval);
      this.playbackInterval = null;
    }
  },
  methods: {
    // 显示在线成员弹窗

    // 平台编辑弹窗相关方法
    openPlatformDialog(platform) {
      this.selectedPlatform = platform;
      this.showPlatformDialog = true;
    },
    updatePlatform(updatedPlatform) {
      // 这里可以添加实际的更新逻辑
      this.$message.success('平台更新成功');
    },
    // 航线编辑弹窗相关方法
    openRouteDialog(route) {
      this.selectedRoute = route;
      this.showRouteDialog = true;
    },
    // 更新航线数据（修改后）
    updateRoute(updatedRoute) {
      const index = this.routes.findIndex(r => r.id === updatedRoute.id);
      if (index !== -1) {
        // 使用 splice 触发响应式更新
        const newRouteData = { ...this.routes[index], ...updatedRoute };
        this.routes.splice(index, 1, newRouteData);

        // 如果当前选中的是这条航线，同步更新详情中的名称
        if (this.selectedRouteDetails && this.selectedRouteId === updatedRoute.id) {
          this.selectedRouteDetails.name = updatedRoute.name;
        }

        this.$message.success('航线名称更新成功');
      }
    },
    // 新建航线（占位）
    createRoute() {
      this.$message.info('新建航线功能开发中...');
    },
    // 航点编辑弹窗相关方法
    openWaypointDialog(waypoint) {
      this.selectedWaypoint = waypoint;
      this.showWaypointDialog = true;
    },
    updateWaypoint(updatedWaypoint) {
      // 1. 检查是否有正在编辑的航线详情
      if (this.selectedRouteDetails && this.selectedRouteDetails.waypoints) {

        // 2. 找到当前被编辑的这个航点在数组中的位置
        const index = this.selectedRouteDetails.waypoints.indexOf(this.selectedWaypoint);

        if (index !== -1) {
          // 3. 使用 splice 方法替换数据
          this.selectedRouteDetails.waypoints.splice(index, 1, updatedWaypoint);

          // 4. 更新当前的选中引用，以便连续编辑
          this.selectedWaypoint = updatedWaypoint;

          this.$message.success('航点更新成功');
        } else {
          // 如果用 indexOf 没找到，尝试用名字匹配兜底
          const nameIndex = this.selectedRouteDetails.waypoints.findIndex(p => p.name === this.selectedWaypoint.name);
          if (nameIndex !== -1) {
            this.selectedRouteDetails.waypoints.splice(nameIndex, 1, updatedWaypoint);
            this.selectedWaypoint = updatedWaypoint;
            this.$message.success('航点更新成功');
          } else {
            this.$message.error('更新失败：未找到对应航点');
          }
        }
      }
    },
    updateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = (now.getMonth() + 1).toString().padStart(2, '0');
      const day = now.getDate().toString().padStart(2, '0');
      const hours = now.getHours().toString().padStart(2, '0');
      const minutes = now.getMinutes().toString().padStart(2, '0');
      const seconds = now.getSeconds().toString().padStart(2, '0');
      this.astroTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },

    updateCombatTime() {
      // 模拟作战时间（K时）的更新
      // 这里简单模拟，实际应该根据业务逻辑计算
      const now = new Date();
      const baseSeconds = 5400; // 1小时30分钟 = 5400秒
      const currentSeconds = now.getSeconds() + now.getMinutes() * 60 + now.getHours() * 3600;
      const combatSeconds = baseSeconds + (currentSeconds % 86400);

      const hours = Math.floor(combatSeconds / 3600);
      const minutes = Math.floor((combatSeconds % 3600) / 60);
      const seconds = combatSeconds % 60;

      this.combatTime = `K+${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    },

    // 左侧菜单栏操作
    showMenu() {
      this.isMenuHidden = false;
      this.$message.info('显示左侧菜单');
    },

    hideMenu() {
      this.isMenuHidden = true;
      this.$message.info('隐藏左侧菜单');
    },

    // 右侧面板操作
    showRightPanel() {
      this.isRightPanelHidden = false;
      this.$message.info('显示右侧面板');
    },

    // 文件下拉菜单方法
    savePlan() {
      this.$message.success('保存计划');
    },

    importPlanFile() {
      this.$message.success('导入计划');
    },

    importACD() {
      this.$message.success('导入ACD');
    },

    importATO() {
      this.$message.success('导入ATO');
    },

    importLayer() {
      this.$message.success('导入图层');
    },

    importRoute() {
      this.$message.success('导入航线');
    },

    exportPlan() {
      this.$message.success('导出计划');
    },

    // 编辑下拉菜单方法
    routeEdit() {
      this.$message.success('航线编辑');
    },

    militaryMarking() {
      this.$message.success('军事标绘');
    },

    iconEdit() {
      this.$message.success('图标编辑');
    },

    attributeEdit() {
      this.$message.success('属性修改');
    },

    timeSettings() {
      this.$message.success('时间设置');
    },

    aircraftSettings() {
      this.$message.success('机型设置');
    },

    keyEventEdit() {
      this.$message.success('关键事件编辑');
    },

    missileLaunch() {
      this.$message.success('导弹发射');
    },

    // 视图下拉菜单方法
    toggle2D3D() {
      this.$message.success('2D/3D切换');
    },

    toggleRuler() {
      this.$message.success('显示/隐藏标尺');
    },

    toggleGrid() {
      this.$message.success('显示/隐藏网格');
    },

    saveScale(scale) {
      console.log('保存比例尺:', scale)
      const scaleText = `${scale.scaleNumerator}:${scale.scaleDenominator}`
      this.$message.success(`比例尺 "${scaleText}" 保存成功`);
    },

    // 地图下拉菜单方法
    loadTerrain() {
      this.$message.success('加载/切换地形');
    },

    changeProjection() {
      this.$message.success('投影');
    },

    loadAeroChart() {
      this.$message.success('航空图');
    },

    // 空域下拉菜单方法
    savePowerZone(powerZone) {
      console.log('保存威力区:', powerZone)
      this.$message.success(`威力区 "${powerZone.name}" 保存成功`);
    },

    threatZone() {
      this.$message.success('威胁区');
    },

    // 工具下拉菜单方法
    routeCalculation() {
      this.$message.success('航线计算');
    },

    conflictDisplay() {
      this.$message.success('冲突显示');
    },

    dataMaterials() {
      this.$message.success('数据资料');
    },

    coordinateConversion() {
      this.$message.success('坐标换算');
    },

    // 选项下拉菜单方法
    pageLayout() {
      this.$message.success('页面布局');
    },

    dataStoragePath() {
      this.$message.success('数据存储路径');
    },

    saveExternalParams(externalParams) {
      console.log('保存外部参数:', externalParams)
      this.$message.success('外部参数保存成功');
    },

    importAirport(path) {
      console.log('导入机场:', path)
      this.$message.success('机场数据导入成功');
    },

    importRouteData(path) {
      console.log('导入航路:', path)
      this.$message.success('航路数据导入成功');
    },

    importLandmark(path) {
      console.log('导入地标:', path)
      this.$message.success('地标数据导入成功');
    },

    toggleAirport() {
      this.showAirport = !this.showAirport;
      this.$message.success(this.showAirport ? '显示机场' : '隐藏机场');
    },

    toggleLandmark() {
      this.showLandmark = !this.showLandmark;
      this.$message.success(this.showLandmark ? '显示地标' : '隐藏地标');
    },

    toggleRoute() {
      this.showRoute = !this.showRoute;
      this.$message.success(this.showRoute ? '显示航线' : '隐藏航线');
    },

    systemDescription() {
      this.$message.success('系统说明');
    },

    // 收藏下拉菜单方法
    layerFavorites() {
      this.$message.success('图层收藏');
    },

    routeFavorites() {
      this.$message.success('航线收藏');
    },

    showOnlineMembersDialog() {
      this.showOnlineMembers = true;
    },

    hideRightPanel() {
      this.isRightPanelHidden = true;
      this.$message.info('隐藏右侧面板');
    },

    selectMenu(item) {
      this.activeMenu = item.id;

      // 点击左侧的方案、冲突、平台时，切换右侧面板内容
      if (item.id === 'file') {
        // 如果当前已经是方案标签页，则关闭右侧面板
        if (this.activeRightTab === 'plan' && !this.isRightPanelHidden) {
          this.isRightPanelHidden = true;
        } else {
          this.activeRightTab = 'plan';
          this.isRightPanelHidden = false;
        }
      } else if (item.id === 'start') {
        // 如果当前已经是冲突标签页，则关闭右侧面板
        if (this.activeRightTab === 'conflict' && !this.isRightPanelHidden) {
          this.isRightPanelHidden = true;
        } else {
          this.activeRightTab = 'conflict';
          this.isRightPanelHidden = false;
        }
      } else if (item.id === 'insert') {
        // 如果当前已经是平台标签页，则关闭右侧面板
        if (this.activeRightTab === 'platform' && !this.isRightPanelHidden) {
          this.isRightPanelHidden = true;
        } else {
          this.activeRightTab = 'platform';
          this.isRightPanelHidden = false;
        }
      } else if(item.id === 'modify'){
          this.drawDom = !this.drawDom
          console.log(this.drawDom,999999)
        }
      if (item.id === 'deduction') {
        // 点击推演按钮，显示/隐藏K时弹出框
        this.showKTimePopup = !this.showKTimePopup;
      }
    },

    // K时弹出框操作
    hideKTimePopup() {
      this.showKTimePopup = false;
      this.$message.info('隐藏推演时钟控制');
    },

    // 播放控制
    togglePlay() {
      this.isPlaying = !this.isPlaying;
      if (this.isPlaying) {
        this.startPlayback();
        this.$message.success('开始播放');
      } else {
        this.stopPlayback();
        this.$message.info('暂停播放');
      }
    },

    startPlayback() {
      if (this.playbackInterval) {
        clearInterval(this.playbackInterval);
      }
      this.playbackInterval = setInterval(() => {
        this.timeProgress += this.playbackSpeed * 0.1;
        if (this.timeProgress >= 100) {
          this.timeProgress = 0;
        }
        this.updateTimeFromProgress();
      }, 100);
    },

    stopPlayback() {
      if (this.playbackInterval) {
        clearInterval(this.playbackInterval);
        this.playbackInterval = null;
      }
    },

    increaseSpeed() {
      if (this.playbackSpeed < 25) {
        this.playbackSpeed++;
        if (this.isPlaying) {
          this.startPlayback();
        }
      }
    },

    decreaseSpeed() {
      if (this.playbackSpeed > 1) {
        this.playbackSpeed--;
        if (this.isPlaying) {
          this.startPlayback();
        }
      }
    },

    updateTimeFromProgress() {
      const totalSeconds = Math.floor(this.timeProgress * 72);
      const hours = Math.floor(totalSeconds / 3600) - 2;
      const minutes = Math.floor((totalSeconds % 3600) / 60);
      const seconds = totalSeconds % 60;

      const sign = hours >= 0 ? '+' : '-';
      const absHours = Math.abs(hours);

      this.currentTime = `K${sign}${String(absHours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
    },

    // 时间控制（保留用于底部时间轴）
    play() {
      this.$message.success('推演开始');
    },

    pause() {
      this.$message.info('推演暂停');
    },

    reset() {
      this.timeProgress = 0;
      this.currentTime = 'K+00:00:00';
      this.$message.info('推演已重置');
    },

    formatTimeTooltip(val) {
      const hours = Math.floor(val / 4);
      const minutes = (val % 4) * 15;
      return `K+${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`;
    },

    // 航线操作
    selectRoute(route) {
      this.selectedRouteId = route.id;
      // 模拟获取航点数据
      this.selectedRouteDetails = {
        name: route.name,
        waypoints: [
          { name: 'WP1', altitude: 5000, speed: '800km/h', eta: 'K+00:40:00' },
          { name: 'WP2', altitude: 6000, speed: '850km/h', eta: 'K+00:55:00' },
          { name: 'WP3', altitude: 5500, speed: '820km/h', eta: 'K+01:10:00' },
          { name: 'WP4', altitude: 5800, speed: '830km/h', eta: 'K+01:25:00' },
        ]
      };
      // 移除原有的 this.openRouteDialog(route);
    },

    addWaypoint() {
      if (this.selectedRouteDetails) {
        const count = this.selectedRouteDetails.waypoints.length + 1;
        this.selectedRouteDetails.waypoints.push({
          name: `WP${count}`,
          altitude: 5000,
          speed: '800km/h',
          eta: `K+01:${(count * 15).toString().padStart(2, '0')}:00`
        });
        this.$message.success('添加航点成功');
      }
    },

    cancelRoute() {
      this.selectedRouteId = null;
      this.selectedRouteDetails = null;
      this.$message.info('已取消选中');
    },

    // 冲突操作
    runConflictCheck() {
      this.conflictCount = 2;
      this.$message.warning('检测到2处航线冲突');
    },

    viewConflict(conflict) {
      this.$message.info(`查看冲突：${conflict.title}`);
    },

    resolveConflict(conflict) {
      this.$message.success(`解决冲突：${conflict.title}`);
      // 移除已解决的冲突
      this.conflicts = this.conflicts.filter(c => c.id !== conflict.id);
      this.conflictCount = this.conflicts.length;
    },

    // 系统功能
    exportReport() {
      this.$message.success('作战报表导出成功');
    },

    // 新增导入功能
    importData() {
      this.$message.success('导入数据成功');
    }
  }
};
</script>

<style scoped>
.mission-planning-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* 地图背景 - 保持不变 */
.map-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a2f4b 0%, #2c3e50 100%);
  /* 正确的写法，直接复制这行替换 */
background: url('~@/assets/map-background.png');
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.map-overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
  font-size: 18px;
  pointer-events: none;
}

/* 地图中间的浮动红点 - 通用样式 */
.floating-red-dot {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
  border: 2px solid rgba(255, 0, 0, 0.8);
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
  cursor: pointer;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  animation: pulse-red 2s infinite;
}

.floating-red-dot:hover {
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 0 25px rgba(255, 0, 0, 0.8);
}

.floating-red-dot.hidden {
  display: none;
}

/* 左侧红点 */
.left-red-dot {
  left: 20px;
  transform: translateY(-50%);
}

.red-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff4444, #cc0000);
  position: relative;
}

.icon-inside {
  position: absolute;
  color: white;
  font-size: 16px;
}

@keyframes pulse-red {
  0% {
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
  }
  50% {
    box-shadow: 0 0 25px rgba(255, 0, 0, 0.8);
  }
  100% {
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
  }
}

/* 蓝色主题通用类 */
.blue-theme {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 138, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 138, 255, 0.2);
}

.blue-btn {
  background: rgba(0, 138, 255, 0.8);
  border: 1px solid rgba(0, 138, 255, 0.9);
  color: white;
  transition: all 0.3s;
}

.blue-btn:hover {
  background: rgba(0, 138, 255, 0.9);
  border-color: rgba(0, 138, 255, 1);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 138, 255, 0.3);
}

.blue-text-btn {
  color: #008aff;
}

.blue-text-btn:hover {
  color: #0066cc;
}

.blue-badge {
  background: rgba(0, 138, 255, 0.8);
  color: white;
}

.blue-tag {
  background: rgba(0, 138, 255, 0.2);
  color: #008aff;
  border: 1px solid rgba(0, 138, 255, 0.3);
}

.blue-time {
  background: rgba(0, 138, 255, 0.1);
  border: 1px solid rgba(0, 138, 255, 0.3);
  color: #008aff;
}

.blue-success {
  color: #008aff;
}

.blue-warning {
  color: #ff9900;
}

.blue-mark {
  color: #008aff;
}

.status-dot.operating {
  background: #008aff;
  animation: pulse 2s infinite;
  box-shadow: 0 0 10px rgba(0, 138, 255, 0.8);
}

.blue-tabs >>> .el-tabs__item {
  color: #666;
  transition: all 0.3s;
}

.blue-tabs >>> .el-tabs__item:hover {
  color: #008aff;
}

.blue-tabs >>> .el-tabs__item.is-active {
  color: #008aff;
  font-weight: 600;
}

.blue-tabs >>> .el-tabs__active-bar {
  background-color: #008aff;
  box-shadow: 0 0 6px rgba(0, 138, 255, 0.5);
}

.blue-tabs >>> .el-tabs__nav-wrap::after {
  background-color: rgba(0, 138, 255, 0.3);
}

/* 底部时间轴（最初版本的样式）- 蓝色主题 */
.floating-timeline {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 80%;
  border-radius: 12px;
  z-index: 95;
  padding: 10px 20px;
  color: #333;
  transition: all 0.3s ease;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(15px);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 32px rgba(0, 138, 255, 0.25);
  border: 1px solid rgba(0, 138, 255, 0.3);
}

.floating-timeline.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.popup-hide-btn {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 28px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 138, 255, 0.4);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #008aff;
  font-size: 18px;
  transition: all 0.3s;
  z-index: 10;
}

.popup-hide-btn:hover {
  background: rgba(0, 138, 255, 0.2);
  color: #0066cc;
  height: 32px;
  top: -32px;
}

.timeline-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.current-time {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: monospace;
  font-size: 14px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 4px;
}

.timeline-slider {
  flex: 1;
  margin: 0 20px;
}

.compact-slider {
  width: 100%;
}

.blue-slider >>> .el-slider__bar {
  background-color: rgba(0, 138, 255, 0.8);
}

.blue-slider >>> .el-slider__button {
  border-color: rgba(0, 138, 255, 0.8);
  background-color: rgba(0, 138, 255, 0.8);
}

.playback-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.control-btn {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(0, 138, 255, 0.3);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  color: #008aff;
}

.control-btn:hover:not(:disabled) {
  background: rgba(0, 138, 255, 0.1);
  border-color: rgba(0, 138, 255, 0.5);
}

.control-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.control-btn i {
  font-size: 14px;
}

.speed-control {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 138, 255, 0.3);
  border-radius: 4px;
}

.speed-text {
  font-size: 11px;
  font-weight: 600;
  color: #008aff;
  min-width: 24px;
  text-align: center;
}

.system-status {
  display: flex;
  justify-content: center;
  gap: 30px;
  font-size: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 138, 255, 0.4);
}

.status-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.status-label {
  color: #666;
}

.status-value.success {
  font-weight: 500;
}

.status-value.warning {
  font-weight: 500;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 138, 255, 0.1);
  border-radius: 3px;
  backdrop-filter: blur(5px);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, rgba(0, 138, 255, 0.5), rgba(0, 138, 255, 0.7));
  border-radius: 3px;
  box-shadow: 0 0 6px rgba(0, 138, 255, 0.4);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, rgba(0, 138, 255, 0.7), rgba(0, 138, 255, 0.9));
}

.ml-3 {
  margin-left: 10px;
}
</style>