|
|
|
|
<template>
|
|
|
|
|
<!-- 以地图为绝对定位背景，所有组件浮动其上 -->
|
|
|
|
|
<div class="mission-planning-container">
|
|
|
|
|
<!-- 地图背景 -->
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
<!-- 顶部浮动导航栏 - 最终优化设计 -->
|
|
|
|
|
<div class="floating-header">
|
|
|
|
|
<div class="header-left">
|
|
|
|
|
<div class="system-title">
|
|
|
|
|
<i class="el-icon-s-promotion mr-2 logo-icon"></i>
|
|
|
|
|
<span class="title-text blue-title">联合任务筹划系统</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 顶部导航菜单 -->
|
|
|
|
|
<div class="top-nav-menu">
|
|
|
|
|
<div
|
|
|
|
|
v-for="item in topNavItems"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
class="top-nav-item"
|
|
|
|
|
:class="{ active: activeTopNav === item.id }"
|
|
|
|
|
@click="selectTopNav(item)"
|
|
|
|
|
>
|
|
|
|
|
<i :class="item.icon" class="nav-icon"></i>
|
|
|
|
|
<span class="nav-text">{{ item.name }}</span>
|
|
|
|
|
|
|
|
|
|
<!-- 文件下拉菜单 -->
|
|
|
|
|
<el-dropdown
|
|
|
|
|
v-if="item.id === 'file'"
|
|
|
|
|
trigger="click"
|
|
|
|
|
placement="bottom-start"
|
|
|
|
|
:hide-on-click="false"
|
|
|
|
|
class="file-dropdown"
|
|
|
|
|
>
|
|
|
|
|
<div class="dropdown-trigger"></div>
|
|
|
|
|
<el-dropdown-menu slot="dropdown" class="file-dropdown-menu">
|
|
|
|
|
<el-dropdown-item @click.native="newPlan">新建计划</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item @click.native="openPlan">打开</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item @click.native="savePlan">保存</el-dropdown-item>
|
|
|
|
|
|
|
|
|
|
<!-- 导入二级菜单 -->
|
|
|
|
|
<el-dropdown-item class="submenu-item">
|
|
|
|
|
<span>导入</span>
|
|
|
|
|
<el-dropdown
|
|
|
|
|
trigger="hover"
|
|
|
|
|
placement="right-start"
|
|
|
|
|
class="submenu-dropdown"
|
|
|
|
|
>
|
|
|
|
|
<div class="submenu-trigger"></div>
|
|
|
|
|
<el-dropdown-menu slot="dropdown" class="submenu">
|
|
|
|
|
<el-dropdown-item @click.native="importPlanFile">导入计划</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item @click.native="importACD">导入ACD</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item @click.native="importATO">导入ATO</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item @click.native="importLayer">导入图层</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item @click.native="importRoute">导入航线</el-dropdown-item>
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
</el-dropdown>
|
|
|
|
|
</el-dropdown-item>
|
|
|
|
|
|
|
|
|
|
<el-dropdown-item @click.native="exportPlan">导出</el-dropdown-item>
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
</el-dropdown>
|
|
|
|
|
|
|
|
|
|
<!-- 编辑下拉菜单 -->
|
|
|
|
|
<el-dropdown
|
|
|
|
|
v-if="item.id === 'edit'"
|
|
|
|
|
trigger="click"
|
|
|
|
|
placement="bottom-start"
|
|
|
|
|
:hide-on-click="false"
|
|
|
|
|
class="file-dropdown"
|
|
|
|
|
>
|
|
|
|
|
<div class="dropdown-trigger"></div>
|
|
|
|
|
<el-dropdown-menu slot="dropdown" class="file-dropdown-menu">
|
|
|
|
|
<el-dropdown-item @click.native="routeEdit">航线编辑</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item @click.native="militaryMarking">军事标绘</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item @click.native="iconEdit">图标编辑</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item @click.native="attributeEdit">属性修改</el-dropdown-item>
|
|
|
|
|
|
|
|
|
|
<!-- 推演编辑二级菜单 -->
|
|
|
|
|
<el-dropdown-item class="submenu-item">
|
|
|
|
|
<span>推演编辑</span>
|
|
|
|
|
<el-dropdown
|
|
|
|
|
trigger="hover"
|
|
|
|
|
placement="right-start"
|
|
|
|
|
class="submenu-dropdown"
|
|
|
|
|
>
|
|
|
|
|
<div class="submenu-trigger"></div>
|
|
|
|
|
<el-dropdown-menu slot="dropdown" class="submenu">
|
|
|
|
|
<el-dropdown-item @click.native="timeSettings">时间设置</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item @click.native="aircraftSettings">机型设置</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item @click.native="keyEventEdit">关键事件编辑</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item @click.native="missileLaunch">导弹发射</el-dropdown-item>
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
</el-dropdown>
|
|
|
|
|
</el-dropdown-item>
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
</el-dropdown>
|
|
|
|
|
|
|
|
|
|
<!-- 视图下拉菜单 -->
|
|
|
|
|
<el-dropdown
|
|
|
|
|
v-if="item.id === 'view'"
|
|
|
|
|
trigger="click"
|
|
|
|
|
placement="bottom-start"
|
|
|
|
|
:hide-on-click="false"
|
|
|
|
|
class="file-dropdown"
|
|
|
|
|
>
|
|
|
|
|
<div class="dropdown-trigger"></div>
|
|
|
|
|
<el-dropdown-menu slot="dropdown" class="file-dropdown-menu">
|
|
|
|
|
<el-dropdown-item @click.native="toggle2D3D">2D/3D切换</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item @click.native="toggleRuler">显示/隐藏标尺</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item @click.native="toggleGrid">网格</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item @click.native="toggleScale">比例尺</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item @click.native="toggleCompass">指北针</el-dropdown-item>
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
</el-dropdown>
|
|
|
|
|
|
|
|
|
|
<!-- 地图下拉菜单 -->
|
|
|
|
|
<el-dropdown
|
|
|
|
|
v-if="item.id === 'map'"
|
|
|
|
|
trigger="click"
|
|
|
|
|
placement="bottom-start"
|
|
|
|
|
:hide-on-click="false"
|
|
|
|
|
class="file-dropdown"
|
|
|
|
|
>
|
|
|
|
|
<div class="dropdown-trigger"></div>
|
|
|
|
|
<el-dropdown-menu slot="dropdown" class="file-dropdown-menu">
|
|
|
|
|
<el-dropdown-item @click.native="loadTerrain">加载/切换地形</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item @click.native="changeProjection">投影</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item @click.native="loadAeroChart">航空图</el-dropdown-item>
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
</el-dropdown>
|
|
|
|
|
|
|
|
|
|
<!-- 工具下拉菜单 -->
|
|
|
|
|
<el-dropdown
|
|
|
|
|
v-if="item.id === 'tools'"
|
|
|
|
|
trigger="click"
|
|
|
|
|
placement="bottom-start"
|
|
|
|
|
:hide-on-click="false"
|
|
|
|
|
class="file-dropdown"
|
|
|
|
|
>
|
|
|
|
|
<div class="dropdown-trigger"></div>
|
|
|
|
|
<el-dropdown-menu slot="dropdown" class="file-dropdown-menu">
|
|
|
|
|
<el-dropdown-item @click.native="routeCalculation">航线计算</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item @click.native="conflictDisplay">冲突显示</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item @click.native="dataMaterials">数据资料</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item @click.native="coordinateConversion">坐标换算</el-dropdown-item>
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
</el-dropdown>
|
|
|
|
|
|
|
|
|
|
<!-- 选项下拉菜单 -->
|
|
|
|
|
<el-dropdown
|
|
|
|
|
v-if="item.id === 'options'"
|
|
|
|
|
trigger="click"
|
|
|
|
|
placement="bottom-start"
|
|
|
|
|
:hide-on-click="false"
|
|
|
|
|
class="file-dropdown"
|
|
|
|
|
>
|
|
|
|
|
<div class="dropdown-trigger"></div>
|
|
|
|
|
<el-dropdown-menu slot="dropdown" class="file-dropdown-menu">
|
|
|
|
|
<el-dropdown-item @click.native="settings">设置</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item @click.native="systemDescription">系统说明</el-dropdown-item>
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
</el-dropdown>
|
|
|
|
|
|
|
|
|
|
<!-- 收藏下拉菜单 -->
|
|
|
|
|
<el-dropdown
|
|
|
|
|
v-if="item.id === 'favorites'"
|
|
|
|
|
trigger="click"
|
|
|
|
|
placement="bottom-start"
|
|
|
|
|
:hide-on-click="false"
|
|
|
|
|
class="file-dropdown"
|
|
|
|
|
>
|
|
|
|
|
<div class="dropdown-trigger"></div>
|
|
|
|
|
<el-dropdown-menu slot="dropdown" class="file-dropdown-menu">
|
|
|
|
|
<el-dropdown-item @click.native="layerFavorites">图层收藏</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item @click.native="routeFavorites">航线收藏</el-dropdown-item>
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
</el-dropdown>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="header-right">
|
|
|
|
|
<!-- 作战信息区域 -->
|
|
|
|
|
<div class="combat-info-group">
|
|
|
|
|
<!-- 房间编号 -->
|
|
|
|
|
<div class="info-box">
|
|
|
|
|
<i class="el-icon-office-building info-icon"></i>
|
|
|
|
|
<div class="info-content">
|
|
|
|
|
<div class="info-label">房间编号</div>
|
|
|
|
|
<div class="info-value">{{ roomCode }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 在线人数 -->
|
|
|
|
|
<div class="info-box" @click="showOnlineMembersDialog">
|
|
|
|
|
<i class="el-icon-user info-icon"></i>
|
|
|
|
|
<div class="info-content">
|
|
|
|
|
<div class="info-label">在线人数</div>
|
|
|
|
|
<div class="info-value">{{ onlineCount }}人</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 作战时间 -->
|
|
|
|
|
<div class="info-box">
|
|
|
|
|
<i class="el-icon-timer info-icon"></i>
|
|
|
|
|
<div class="info-content">
|
|
|
|
|
<div class="info-label">作战时间</div>
|
|
|
|
|
<div class="info-value">{{ combatTime }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 天文时间 -->
|
|
|
|
|
<div class="info-box">
|
|
|
|
|
<i class="el-icon-sunny info-icon"></i>
|
|
|
|
|
<div class="info-content">
|
|
|
|
|
<div class="info-label">天文时间</div>
|
|
|
|
|
<div class="info-value">{{ astroTime }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 用户状态区域 -->
|
|
|
|
|
<div class="user-status-area">
|
|
|
|
|
<!-- 用户头像 -->
|
|
|
|
|
<el-avatar :size="32" :src="userAvatar" class="user-avatar" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 左侧折叠菜单栏 - 蓝色主题 -->
|
|
|
|
|
<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"
|
|
|
|
|
@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"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<!-- 底部时间轴（最初版本的样式）- 蓝色主题 -->
|
|
|
|
|
<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="timeline-marks">
|
|
|
|
|
<span class="mark">K-02:00</span>
|
|
|
|
|
<span class="mark">K-01:00</span>
|
|
|
|
|
<span class="mark current blue-mark">K时</span>
|
|
|
|
|
<span class="mark">K+01:00</span>
|
|
|
|
|
<span class="mark">K+02:00</span>
|
|
|
|
|
</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'
|
|
|
|
|
export default {
|
|
|
|
|
name: 'MissionPlanningView',
|
|
|
|
|
components: {
|
|
|
|
|
cesiumMap,
|
|
|
|
|
OnlineMembersDialog,
|
|
|
|
|
PlatformEditDialog,
|
|
|
|
|
RouteEditDialog,
|
|
|
|
|
WaypointEditDialog,
|
|
|
|
|
LeftMenu,
|
|
|
|
|
RightPanel
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
drawDom:false,
|
|
|
|
|
// 在线成员弹窗
|
|
|
|
|
showOnlineMembers: false,
|
|
|
|
|
// 编辑弹窗控制
|
|
|
|
|
showPlatformDialog: false,
|
|
|
|
|
selectedPlatform: null,
|
|
|
|
|
showRouteDialog: false,
|
|
|
|
|
selectedRoute: null,
|
|
|
|
|
showWaypointDialog: false,
|
|
|
|
|
selectedWaypoint: null,
|
|
|
|
|
// 顶部导航
|
|
|
|
|
activeTopNav: 'file',
|
|
|
|
|
topNavItems: [
|
|
|
|
|
{ id: 'file', name: '文件', icon: 'el-icon-document' },
|
|
|
|
|
{ id: 'edit', name: '编辑', icon: 'el-icon-edit' },
|
|
|
|
|
{ id: 'view', name: '视图', icon: 'el-icon-view' },
|
|
|
|
|
{ id: 'map', name: '地图', icon: 'el-icon-map-location' },
|
|
|
|
|
{ id: 'airspace', name: '空域', icon: 'el-icon-s-grid' },
|
|
|
|
|
{ id: 'tools', name: '工具', icon: 'el-icon-setting' },
|
|
|
|
|
{ id: 'options', name: '选项', icon: 'el-icon-s-tools' },
|
|
|
|
|
{ id: 'favorites', name: '收藏', icon: 'el-icon-star-on' }
|
|
|
|
|
],
|
|
|
|
|
|
|
|
|
|
// 作战信息
|
|
|
|
|
roomCode: 'JTF-7-ALPHA',
|
|
|
|
|
onlineCount: 30,
|
|
|
|
|
combatTime: 'K+01:30:45',
|
|
|
|
|
astroTime: '',
|
|
|
|
|
|
|
|
|
|
// 左侧菜单栏
|
|
|
|
|
isMenuHidden: true, // 是否完全隐藏左侧菜单
|
|
|
|
|
activeMenu: 'file',
|
|
|
|
|
|
|
|
|
|
// 右侧面板控制
|
|
|
|
|
isRightPanelHidden: true, // 是否完全隐藏右侧面板
|
|
|
|
|
|
|
|
|
|
// K时弹出框控制
|
|
|
|
|
showKTimePopup: false,
|
|
|
|
|
|
|
|
|
|
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',
|
|
|
|
|
|
|
|
|
|
// 用户
|
|
|
|
|
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);
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 显示在线成员弹窗
|
|
|
|
|
showOnlineMembersDialog() {
|
|
|
|
|
this.showOnlineMembers = true;
|
|
|
|
|
},
|
|
|
|
|
// 平台编辑弹窗相关方法
|
|
|
|
|
openPlatformDialog(platform) {
|
|
|
|
|
this.selectedPlatform = platform;
|
|
|
|
|
this.showPlatformDialog = true;
|
|
|
|
|
},
|
|
|
|
|
updatePlatform(updatedPlatform) {
|
|
|
|
|
// 这里可以添加实际的更新逻辑
|
|
|
|
|
this.$message.success('平台更新成功');
|
|
|
|
|
},
|
|
|
|
|
// 航线编辑弹窗相关方法
|
|
|
|
|
openRouteDialog(route) {
|
|
|
|
|
this.selectedRoute = route;
|
|
|
|
|
this.showRouteDialog = true;
|
|
|
|
|
},
|
|
|
|
|
updateRoute(updatedRoute) {
|
|
|
|
|
// 这里可以添加实际的更新逻辑
|
|
|
|
|
this.$message.success('航线更新成功');
|
|
|
|
|
},
|
|
|
|
|
// 航点编辑弹窗相关方法
|
|
|
|
|
openWaypointDialog(waypoint) {
|
|
|
|
|
this.selectedWaypoint = waypoint;
|
|
|
|
|
this.showWaypointDialog = true;
|
|
|
|
|
},
|
|
|
|
|
updateWaypoint(updatedWaypoint) {
|
|
|
|
|
// 这里可以添加实际的更新逻辑
|
|
|
|
|
this.$message.success('航点更新成功');
|
|
|
|
|
},
|
|
|
|
|
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')}`;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 顶部导航菜单操作
|
|
|
|
|
selectTopNav(item) {
|
|
|
|
|
this.activeTopNav = item.id;
|
|
|
|
|
this.$message.info(`选择菜单: ${item.name}`);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 左侧菜单栏操作
|
|
|
|
|
showMenu() {
|
|
|
|
|
this.isMenuHidden = false;
|
|
|
|
|
this.$message.info('显示左侧菜单');
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
hideMenu() {
|
|
|
|
|
this.isMenuHidden = true;
|
|
|
|
|
this.$message.info('隐藏左侧菜单');
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 右侧面板操作
|
|
|
|
|
showRightPanel() {
|
|
|
|
|
this.isRightPanelHidden = false;
|
|
|
|
|
this.$message.info('显示右侧面板');
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 文件下拉菜单方法
|
|
|
|
|
newPlan() {
|
|
|
|
|
this.$message.success('新建计划');
|
|
|
|
|
// 这里可以添加新建计划的逻辑
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
openPlan() {
|
|
|
|
|
this.$message.success('打开计划');
|
|
|
|
|
// 这里可以添加打开计划的逻辑
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
savePlan() {
|
|
|
|
|
this.$message.success('保存计划');
|
|
|
|
|
// 这里可以添加保存计划的逻辑
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
importPlan() {
|
|
|
|
|
this.$message.success('导入计划');
|
|
|
|
|
// 这里可以添加导入计划的逻辑
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 导入二级菜单方法
|
|
|
|
|
importPlanFile() {
|
|
|
|
|
this.$message.success('导入计划');
|
|
|
|
|
// 这里可以添加导入计划文件的逻辑
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
importACD() {
|
|
|
|
|
this.$message.success('导入ACD');
|
|
|
|
|
// 这里可以添加导入ACD文件的逻辑
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
importATO() {
|
|
|
|
|
this.$message.success('导入ATO');
|
|
|
|
|
// 这里可以添加导入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('属性修改');
|
|
|
|
|
// 这里可以添加属性修改的逻辑
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
deductionEdit() {
|
|
|
|
|
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切换');
|
|
|
|
|
// 这里可以添加2D/3D切换的逻辑
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
toggleRuler() {
|
|
|
|
|
this.$message.success('显示/隐藏标尺');
|
|
|
|
|
// 这里可以添加标尺显示/隐藏的逻辑
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
toggleGrid() {
|
|
|
|
|
this.$message.success('显示/隐藏网格');
|
|
|
|
|
// 这里可以添加网格显示/隐藏的逻辑
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
toggleScale() {
|
|
|
|
|
this.$message.success('显示/隐藏比例尺');
|
|
|
|
|
// 这里可以添加比例尺显示/隐藏的逻辑
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
toggleCompass() {
|
|
|
|
|
this.$message.success('显示/隐藏指北针');
|
|
|
|
|
// 这里可以添加指北针显示/隐藏的逻辑
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 地图下拉菜单方法
|
|
|
|
|
loadTerrain() {
|
|
|
|
|
this.$message.success('加载/切换地形');
|
|
|
|
|
// 这里可以添加地形加载/切换的逻辑
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
changeProjection() {
|
|
|
|
|
this.$message.success('投影');
|
|
|
|
|
// 这里可以添加投影切换的逻辑
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
loadAeroChart() {
|
|
|
|
|
this.$message.success('航空图');
|
|
|
|
|
// 这里可以添加航空图加载的逻辑
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 工具下拉菜单方法
|
|
|
|
|
routeCalculation() {
|
|
|
|
|
this.$message.success('航线计算');
|
|
|
|
|
// 这里可以添加航线计算的逻辑
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
conflictDisplay() {
|
|
|
|
|
this.$message.success('冲突显示');
|
|
|
|
|
// 这里可以添加冲突显示的逻辑
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
dataMaterials() {
|
|
|
|
|
this.$message.success('数据资料');
|
|
|
|
|
// 这里可以添加数据资料管理的逻辑
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
coordinateConversion() {
|
|
|
|
|
this.$message.success('坐标换算');
|
|
|
|
|
// 这里可以添加坐标换算的逻辑
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 选项下拉菜单方法
|
|
|
|
|
settings() {
|
|
|
|
|
this.$message.success('设置');
|
|
|
|
|
// 这里可以添加系统设置的逻辑
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
systemDescription() {
|
|
|
|
|
this.$message.success('系统说明');
|
|
|
|
|
// 这里可以添加系统说明的逻辑
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 收藏下拉菜单方法
|
|
|
|
|
layerFavorites() {
|
|
|
|
|
this.$message.success('图层收藏');
|
|
|
|
|
// 这里可以添加图层收藏的逻辑
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
routeFavorites() {
|
|
|
|
|
this.$message.success('航线收藏');
|
|
|
|
|
// 这里可以添加航线收藏的逻辑
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
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;
|
|
|
|
|
if (this.showKTimePopup) {
|
|
|
|
|
this.$message.info('显示推演时钟控制');
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.info('隐藏推演时钟控制');
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
// 其他菜单的原有逻辑
|
|
|
|
|
this.$message.info(`选择菜单: ${item.name}`);
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// K时弹出框操作
|
|
|
|
|
hideKTimePopup() {
|
|
|
|
|
this.showKTimePopup = false;
|
|
|
|
|
this.$message.info('隐藏推演时钟控制');
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 时间控制（保留用于底部时间轴）
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 顶部导航栏 - 最终优化设计 */
|
|
|
|
|
.floating-header {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
height: 60px;
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
z-index: 100;
|
|
|
|
|
backdrop-filter: blur(15px);
|
|
|
|
|
background: rgba(255, 255, 255, 0.85);
|
|
|
|
|
border-bottom: 1px solid rgba(0, 138, 255, 0.2);
|
|
|
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header-left {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 25px;
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.system-title {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
min-width: 180px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.system-title i {
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
color: #008aff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.blue-title {
|
|
|
|
|
color: #008aff !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 顶部导航菜单 - 优化为简洁文字效果 */
|
|
|
|
|
.top-nav-menu {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 0;
|
|
|
|
|
flex: 1;
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
max-width: 800px;
|
|
|
|
|
padding: 5px 0;
|
|
|
|
|
scrollbar-width: thin;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.top-nav-menu::-webkit-scrollbar {
|
|
|
|
|
height: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.top-nav-menu::-webkit-scrollbar-track {
|
|
|
|
|
background: rgba(0, 138, 255, 0.1);
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.top-nav-menu::-webkit-scrollbar-thumb {
|
|
|
|
|
background: rgba(0, 138, 255, 0.3);
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.top-nav-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 6px;
|
|
|
|
|
padding: 8px 12px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #333;
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
min-width: 60px;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
margin: 0 1px;
|
|
|
|
|
position: relative;
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.top-nav-item:hover {
|
|
|
|
|
color: #008aff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.top-nav-item.active {
|
|
|
|
|
color: #008aff;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 移除了蓝色指示条 */
|
|
|
|
|
.top-nav-item.active::after {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nav-icon {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #333;
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.top-nav-item:hover .nav-icon,
|
|
|
|
|
.top-nav-item.active .nav-icon {
|
|
|
|
|
color: #008aff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nav-text {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 右侧区域 */
|
|
|
|
|
.header-right {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 作战信息组 */
|
|
|
|
|
.combat-info-group {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.info-box {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
padding: 6px 10px;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
background: rgba(255, 255, 255, 0.7);
|
|
|
|
|
border: 1px solid rgba(0, 138, 255, 0.2);
|
|
|
|
|
box-shadow: 0 2px 6px rgba(0, 138, 255, 0.1);
|
|
|
|
|
min-width: 120px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.info-box:hover {
|
|
|
|
|
background: rgba(255, 255, 255, 0.9);
|
|
|
|
|
transform: translateY(-1px);
|
|
|
|
|
box-shadow: 0 4px 10px rgba(0, 138, 255, 0.2);
|
|
|
|
|
border-color: rgba(0, 138, 255, 0.3);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.info-icon {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #008aff;
|
|
|
|
|
min-width: 20px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.info-content {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.info-label {
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
color: #666;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
margin-bottom: 2px;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.info-value {
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
color: #333;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
font-family: 'Courier New', monospace;
|
|
|
|
|
letter-spacing: 0.5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 作战时间和天文时间的特殊样式 */
|
|
|
|
|
.combat-info-group .info-box:nth-child(3) .info-value {
|
|
|
|
|
color: #008aff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.combat-info-group .info-box:nth-child(4) .info-value {
|
|
|
|
|
color: #52c41a;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 用户状态区域 */
|
|
|
|
|
.user-status-area {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.user-avatar {
|
|
|
|
|
border: 2px solid rgba(0, 138, 255, 0.3);
|
|
|
|
|
box-shadow: 0 2px 6px rgba(0, 138, 255, 0.15);
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
background: rgba(255, 255, 255, 0.9);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.user-avatar:hover {
|
|
|
|
|
transform: scale(1.1);
|
|
|
|
|
box-shadow: 0 4px 10px rgba(0, 138, 255, 0.25);
|
|
|
|
|
border-color: rgba(0, 138, 255, 0.6);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 二级菜单样式 */
|
|
|
|
|
.submenu-item {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.submenu-dropdown {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.submenu-trigger {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.submenu {
|
|
|
|
|
margin-left: 5px;
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
|
|
|
|
backdrop-filter: blur(15px);
|
|
|
|
|
background: rgba(255, 255, 255, 0.85);
|
|
|
|
|
border: 1px solid rgba(0, 138, 255, 0.2);
|
|
|
|
|
padding: 0;
|
|
|
|
|
min-width: auto;
|
|
|
|
|
width: fit-content;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.submenu .el-dropdown-menu__item {
|
|
|
|
|
padding: 8px 16px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #333;
|
|
|
|
|
transition: all 0.2s ease;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.submenu .el-dropdown-menu__item:hover {
|
|
|
|
|
background: rgba(0, 138, 255, 0.1);
|
|
|
|
|
color: #008aff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.submenu .el-dropdown-menu__item:not(:last-child) {
|
|
|
|
|
border-bottom: 1px solid rgba(0, 138, 255, 0.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.submenu .el-dropdown-menu__item:last-child {
|
|
|
|
|
border-bottom: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 文件下拉菜单样式 */
|
|
|
|
|
.file-dropdown {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dropdown-trigger {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.file-dropdown-menu {
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
|
|
|
|
backdrop-filter: blur(15px);
|
|
|
|
|
background: rgba(255, 255, 255, 0.85);
|
|
|
|
|
border: 1px solid rgba(0, 138, 255, 0.2);
|
|
|
|
|
padding: 0;
|
|
|
|
|
min-width: auto;
|
|
|
|
|
width: fit-content;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.file-dropdown-menu .el-dropdown-menu__item {
|
|
|
|
|
padding: 8px 16px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #333;
|
|
|
|
|
transition: all 0.2s ease;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.file-dropdown-menu .el-dropdown-menu__item:hover {
|
|
|
|
|
background: rgba(0, 138, 255, 0.1);
|
|
|
|
|
color: #008aff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.file-dropdown-menu .el-dropdown-menu__item:not(:last-child) {
|
|
|
|
|
border-bottom: 1px solid rgba(0, 138, 255, 0.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.file-dropdown-menu .el-dropdown-menu__item:last-child {
|
|
|
|
|
border-bottom: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 顶部导航菜单调整，为下拉菜单留出空间 */
|
|
|
|
|
.top-nav-item {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.timeline-marks {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
color: #666;
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mark.current {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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>
|
