0815

src/layouts/components/VabLogo/index.vue

@@ -15,7 +15,7 @@
       <span class="time-line utc-time">
         {{ "天文时间：" + formattedUTCTime }}
       </span>
- &nbsp;&nbsp;
+      <br />
       <span class="time-line local-time">
         {{ "绝对时间：" + formattedLocalTime }}
       </span>
@@ -24,150 +24,147 @@
 </template>
 
 <script>
-  import { mapGetters } from "vuex";
-
-  export default {
-    name: "VabLogo",
-    data() {
-      return {
-        title: this.$baseTitle,
-        timer: null,
-        currentTime: new Date(),
-      };
+import { mapGetters } from "vuex";
+
+export default {
+  name: "VabLogo",
+  data() {
+    return {
+      title: this.$baseTitle,
+      timer: null,
+      currentTime: new Date(),
+    };
+  },
+  computed: {
+    ...mapGetters({
+      logo: "settings/logo",
+      layout: "settings/layout",
+    }),
+    formattedUTCTime() {
+      return this.formatUTCTime(this.currentTime);
     },
-    computed: {
-      ...mapGetters({
-        logo: "settings/logo",
-        layout: "settings/layout",
-      }),
-      formattedUTCTime() {
-        return this.formatUTCTime(this.currentTime);
-      },
-      formattedLocalTime() {
-        return this.formatLocalTime(this.currentTime);
-      },
+    formattedLocalTime() {
+      return this.formatLocalTime(this.currentTime);
     },
-    mounted() {
-      // 改为每10毫秒更新一次（确保毫秒级精度）
-      this.timer = setInterval(() => {
-        this.currentTime = new Date();
-      }, 10);
+  },
+  mounted() {
+    // 改为每10毫秒更新一次（确保毫秒级精度）
+    this.timer = setInterval(() => {
+      this.currentTime = new Date();
+    }, 10);
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
+  },
+  methods: {
+    // 格式化UTC时间（包含毫秒）
+    formatUTCTime(date) {
+      const pad = (num, length = 2) => String(num).padStart(length, "0");
+      return `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(
+        date.getUTCDate()
+      )} ${pad(date.getUTCHours())}:${pad(date.getUTCMinutes())}:${pad(
+        date.getUTCSeconds()
+      )} UTC`;
     },
-    beforeDestroy() {
-      clearInterval(this.timer);
+    // 格式化本地时间（包含毫秒）
+    formatLocalTime(date) {
+      const pad = (num, length = 2) => String(num).padStart(length, "0");
+      const hours = date.getHours();
+      const ampm = hours >= 12 ? "PM" : "AM";
+      const displayHours = hours % 12 || 12;
+      return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(
+        date.getDate()
+      )} ${pad(displayHours)}:${pad(date.getMinutes())}:${pad(
+        date.getSeconds()
+      )} ${ampm}`;
     },
-    methods: {
-      // 格式化UTC时间（包含毫秒）
-      formatUTCTime(date) {
-        const pad = (num, length = 2) => String(num).padStart(length, "0");
-        return `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(
-          date.getUTCDate()
-        )} ${pad(date.getUTCHours())}:${pad(date.getUTCMinutes())}:${pad(
-          date.getUTCSeconds()
-        )} UTC`;
-      },
-      // 格式化本地时间（包含毫秒）
-      formatLocalTime(date) {
-        const pad = (num, length = 2) => String(num).padStart(length, "0");
-        const hours = date.getHours();
-        const ampm = hours >= 12 ? "PM" : "AM";
-        const displayHours = hours % 12 || 12;
-        return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(
-          date.getDate()
-        )} ${pad(displayHours)}:${pad(date.getMinutes())}:${pad(
-          date.getSeconds()
-        )} ${ampm}`;
-      },
-    },
-  };
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  @mixin container {
-    position: relative;
-    height: $base-top-bar-height;
-    overflow: hidden;
-    line-height: $base-top-bar-height;
-    background: $base-menu-background;
-  }
-
-  @mixin logo {
-    display: inline-block;
-    width: 34px;
-    height: 34px;
-    margin-right: 3px;
-    color: $base-title-color;
-    vertical-align: middle;
+@mixin container {
+  position: relative;
+  height: $base-top-bar-height;
+  overflow: hidden;
+  line-height: $base-top-bar-height;
+  background: $base-menu-background;
+}
+
+@mixin logo {
+  display: inline-block;
+  width: 34px;
+  height: 34px;
+  margin-right: 3px;
+  color: $base-title-color;
+  vertical-align: middle;
+}
+
+@mixin title {
+  display: inline-block;
+  overflow: hidden;
+  font-size: 20px;
+  line-height: 55px;
+  color: $base-title-color;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.logo-container-horizontal {
+  @include container;
+
+  .logo {
+    @include logo;
   }
 
-  @mixin title {
-    display: inline-block;
-    overflow: hidden;
-    font-size: 20px;
-    line-height: 55px;
-    color: $base-title-color;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    vertical-align: middle;
+  .title {
+    @include title;
   }
+}
 
-  .logo-container-horizontal {
-    @include container;
+.logo-container-vertical {
+  @include container;
 
-    .logo {
-      @include logo;
-    }
+  height: $base-logo-height;
+  line-height: $base-logo-height;
+  text-align: center;
 
-    .title {
-      @include title;
-    }
+  .logo {
+    @include logo;
   }
 
-  .logo-container-vertical {
-    @include container;
-
-    height: $base-logo-height;
-    line-height: $base-logo-height;
-    text-align: center;
-
-    .logo {
-      @include logo;
-    }
-
-    .title {
-      @include title;
+  .title {
+    @include title;
 
-      max-width: calc(#{$base-left-menu-width} - 60px);
-    }
+    max-width: calc(#{$base-left-menu-width} - 60px);
   }
+}
+
+.compact-time-display {
+  font-family: "Courier New", monospace;
+  padding: 12px;
+  border-radius: 6px;
+  background-color: transparent;
+  line-height: 1.5;
+  display: inline-block;
+  vertical-align: middle;
+
+  .time-line {
+    font-weight: 800;
+    white-space: nowrap;
+    font-size: 12px;
 
-  .compact-time-display {
-    font-size: 20px;
-    font-family: "Courier New", monospace;
-    padding: 12px;
-    border-radius: 6px;
-    background-color: transparent;
-    line-height: 1.5;
-    display: inline-block;
-    vertical-align: middle;
-
-    .time-line {
+    &.utc-time {
+      color: #8d978f;
+      font-size: 1rem;
       font-weight: 800;
-      white-space: nowrap;
-      font-size: 12px;
-
-      &.utc-time {
-        color: #8d978f;
-        font-size: 18px;
-        font-weight: 800;
-
-      }
+    }
 
-      &.local-time {
-        color: #8d978f;
-        font-size: 18px;
-      }
+    &.local-time {
+      color: #8d978f;
+      font-size: 1rem;
     }
   }
-
+}
 </style>

src/views/Deduction/stratDeduction/index.vue

@@ -27,7 +27,7 @@
           </div>
           <div class="panel-content" v-show="panelStates.simulation">
             <div class="tabs">
-              <div class="tab" :class="{active: activeTab === 'situation'}" @click="activeTab = 'situation'">态势</div>
+              <div class="tab" :class="{active: activeTab === 'situation'}" @click="activeTab = 'situation'">zb信息</div>
               <div class="tab" :class="{active: activeTab === 'events'}" @click="activeTab = 'events'">事件</div>
 <!--              <div class="tab" :class="{active: activeTab === 'metrics'}" @click="activeTab = 'metrics'">指标</div>-->
             </div>

src/views/planningSchem/Interference/index_back.vue

@@ -1,1335 +0,0 @@
-<template>
-  <GlobalLayout title="干扰方案">
-    <template #header-controls>
-      <el-button icon="el-icon-plus" type="primary">添加知识</el-button>
-      <el-button icon="el-icon-upload" type="success">导入</el-button>
-      <el-button icon="el-icon-download" type="warning">导出</el-button>
-    </template>
-
-    <!-- 主内容区域 -->
-    <div class="main-container">
-      <!-- 左侧区域 -->
-      <div class="left-section">
-        <!-- 上半部分：任务卡片 -->
-        <div class="task-cards-section">
-          <!--          <h3 class="section-title">任务列表</h3>
-                    <div class="task-cards-container">
-                      <TaskCard
-                        v-for="task in tasks"
-                        :key="task.id"
-                        :task="task"
-                        @execute="executeTask"
-                        @view-details="viewDetails"
-                      />
-                    </div>-->
-          <h3 class="section-title">干扰设备列表</h3>
-          <div class="equipment-grid">
-            <InterferenceEquipmentCard
-              v-for="equip in equipmentList"
-              :key="equip.id"
-              :equipment="equip"
-              @edit="handleEditEquipment"
-              @select="handleSelectEquipment"
-            />
-          </div>
-        </div>
-
-        <!-- 下半部分：任务编辑区域 -->
-        <div class="task-editor-section">
-          <h3 class="section-title dark-title">任务配置</h3>
-          <el-card class="editor-card dark-card" shadow="hover">
-            <div class="editor-content">
-              <el-form
-                ref="taskForm"
-                :model="currentTask"
-                :rules="formRules"
-                class="dark-form"
-                label-width="120px"
-              >
-                <!-- 任务信息部分 -->
-                <h4 class="form-section-title">任务信息</h4>
-                <el-form-item label="任务名称" prop="name">
-                  <el-input v-model="currentTask.name" clearable placeholder="请输入任务名称"/>
-                </el-form-item>
-
-                <el-form-item label="任务类型" prop="type">
-                  <el-select v-model="currentTask.type" placeholder="请选择任务类型" style="width:100%">
-                    <el-option label="弹道导弹" value="弹道导弹"/>
-                    <el-option label="巡航导弹" value="巡航导弹"/>
-                    <el-option label="反舰导弹" value="反舰导弹"/>
-                  </el-select>
-                </el-form-item>
-
-                <el-form-item label="目标位置" prop="targetLocation">
-                  <el-input v-model="currentTask.targetLocation" clearable placeholder="请输入目标坐标"/>
-                </el-form-item>
-
-                <el-form-item label="预计时间" prop="estimatedTime">
-                  <el-date-picker
-                    v-model="currentTask.estimatedTime"
-                    placeholder="选择日期时间"
-                    style="width:100%"
-                    type="datetime"
-                    value-format="yyyy-MM-dd HH:mm"
-                  />
-                </el-form-item>
-
-                <el-form-item label="优先级" prop="priority">
-                  <el-rate v-model="currentTask.priority" :max="3" :texts="['低', '中', '高']" show-text/>
-                </el-form-item>
-
-                <el-form-item label="任务状态" prop="status">
-                  <el-select v-model="currentTask.status" placeholder="请选择状态" style="width:100%">
-                    <el-option label="规划中" value="规划中"/>
-                    <el-option label="准备中" value="准备中"/>
-                    <el-option label="待执行" value="待执行"/>
-                    <el-option label="已完成" value="已完成"/>
-                  </el-select>
-                </el-form-item>
-
-                <el-form-item label="任务描述" prop="description">
-                  <el-input
-                    v-model="currentTask.description"
-                    :rows="3"
-                    placeholder="请输入任务描述"
-                    type="textarea"
-                  />
-                </el-form-item>
-
-                <!-- 设备信息部分 -->
-                <h4 class="form-section-title">设备信息</h4>
-                <el-form-item label="设备名称" prop="equipment.name">
-                  <el-input v-model="currentTask.equipment.name" clearable placeholder="请输入设备名称"/>
-                </el-form-item>
-
-                <el-form-item label="设备类型" prop="equipment.type">
-                  <el-select v-model="currentTask.equipment.type" placeholder="请选择设备类型" style="width:100%">
-                    <el-option label="电子干扰设备" value="电子干扰设备"/>
-                    <el-option label="红外干扰设备" value="红外干扰设备"/>
-                    <el-option label="雷达干扰设备" value="雷达干扰设备"/>
-                    <el-option label="发烟设备" value="发烟设备"/>
-                    <el-option label="角反射器" value="角反射器"/>
-                  </el-select>
-                </el-form-item>
-
-                <el-form-item label="设备状态" prop="equipment.status">
-                  <el-select v-model="currentTask.equipment.status" placeholder="请选择设备状态" style="width:100%">
-                    <el-option label="可用" value="可用"/>
-                    <el-option label="使用中" value="使用中"/>
-                    <el-option label="维修中" value="维修中"/>
-                    <el-option label="待命" value="待命"/>
-                  </el-select>
-                </el-form-item>
-
-                <el-row :gutter="20">
-                  <el-col :span="12">
-                    <el-form-item label="频段范围" prop="equipment.frequencyRange">
-                      <el-input v-model="currentTask.equipment.frequencyRange" placeholder="如: 2-18GHz"/>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="12">
-                    <el-form-item label="干扰功率" prop="equipment.power">
-                      <el-input v-model="currentTask.equipment.power" placeholder="如: 200W"/>
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-
-                <el-row :gutter="20">
-                  <el-col :span="12">
-                    <el-form-item label="覆盖范围" prop="equipment.coverage">
-                      <el-input v-model="currentTask.equipment.coverage" placeholder="如: 360°"/>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="12">
-                    <el-form-item label="响应时间" prop="equipment.responseTime">
-                      <el-input v-model="currentTask.equipment.responseTime" placeholder="如: <0.5s"/>
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-
-                <el-row :gutter="20">
-                  <el-col :span="12">
-                    <el-form-item label="布设位置" prop="equipment.deploymentLocation">
-                      <el-input v-model="currentTask.equipment.deploymentLocation" placeholder="请输入布设位置"/>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="12">
-                    <el-form-item label="布设角度" prop="equipment.deploymentAngle">
-                      <el-input v-model="currentTask.equipment.deploymentAngle" placeholder="如: 45°"/>
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-
-                <el-row :gutter="20">
-                  <el-col :span="12">
-                    <el-form-item label="仰角" prop="equipment.elevation">
-                      <el-input v-model="currentTask.equipment.elevation" placeholder="如: 30°"/>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="12">
-                    <el-form-item label="方位角" prop="equipment.azimuth">
-                      <el-input v-model="currentTask.equipment.azimuth" placeholder="如: 120°"/>
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-
-                <el-row :gutter="20">
-                  <el-col :span="12">
-                    <el-form-item label="干扰范围" prop="equipment.interferenceRange">
-                      <el-input v-model="currentTask.equipment.interferenceRange" placeholder="如: 5km"/>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="12">
-                    <el-form-item label="重量" prop="equipment.weight">
-                      <el-input v-model="currentTask.equipment.weight" placeholder="如: 15kg"/>
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-
-                <el-form-item label="干扰类型" prop="equipment.interferenceTypes">
-                  <el-select
-                    v-model="currentTask.equipment.interferenceTypes"
-                    multiple
-                    placeholder="请选择干扰类型"
-                    style="width:100%"
-                  >
-                    <el-option label="雷达干扰" value="雷达干扰"/>
-                    <el-option label="通信干扰" value="通信干扰"/>
-                    <el-option label="红外干扰" value="红外干扰"/>
-                    <el-option label="视觉干扰" value="视觉干扰"/>
-                    <el-option label="GPS干扰" value="GPS干扰"/>
-                  </el-select>
-                </el-form-item>
-
-                <el-form-item label="设备图片" prop="equipment.image">
-                  <el-input v-model="currentTask.equipment.image" clearable placeholder="请输入图片URL">
-                    <template #append>
-                      <el-button :disabled="!currentTask.equipment.image"
-                                 @click="showImagePreview(currentTask.equipment.image)">
-                        预览
-                      </el-button>
-                    </template>
-                  </el-input>
-                </el-form-item>
-
-                <el-form-item>
-                  <el-button type="primary" @click="submitForm">保存</el-button>
-                  <el-button @click="resetForm">重置</el-button>
-                </el-form-item>
-              </el-form>
-            </div>
-          </el-card>
-        </div>
-        <!-- 任务调整区域 -->
-        <div class="task-adjustment-section">
-          <h3 class="section-title dark-title">任务调整</h3>
-          <el-card class="editor-card dark-card" shadow="hover">
-            <!-- 编辑器工具栏容器 -->
-            <div id="editor-toolbar-container"></div>
-            <!-- 编辑器容器 -->
-            <div id="editor-container" style="height: 300px;"></div>
-
-            <div class="editor-actions">
-              <el-button type="primary" @click="saveAdjustment">保存调整</el-button>
-              <el-button @click="clearEditor">清空内容</el-button>
-            </div>
-          </el-card>
-        </div>
-      </div>
-      <!-- 右侧问答区域 -->
-      <div class="right-section">
-        <!-- 新增切换按钮 -->
-        <div class="toggle-button-container">
-          <div
-            class="toggle-button"
-            @click="toggleContent"
-            @mouseenter="toggleHover(true)"
-            @mouseleave="toggleHover(false)"
-          >
-            <el-tooltip
-              :content="isExpanded ? '收起' : '展开'"
-              effect="dark"
-              placement="left"
-            >
-              <i :class="buttonIcon"></i>
-            </el-tooltip>
-            <transition name="fade">
-              <span v-show="isHovered || isExpanded" class="button-text">
-                {{ buttonText }}
-              </span>
-            </transition>
-          </div>
-        </div>
-
-        <!-- 内容区域 -->
-        <!-- 在父组件中替换原来的右侧内容 -->
-        <div v-if="showRequirements" class="requirements-section">
-          <TaskContent
-            :task="currentTask"
-            :history-solutions="historySolutions"
-            :interference-equipments="interferenceEquipments"
-            @edit-equipment="handleEditEquipment"
-            @select-equipment="handleSelectEquipment"
-          />
-        </div>
-        <!-- 智能问答 -->
-        <QAChat v-else :messages="qaMessages" @question="handleQuestion" />
-
-      </div>
-    </div>
-  </GlobalLayout>
-</template>
-
-<script>
-import E from 'wangeditor'
-
-import GlobalLayout from '@/components/Components/GlobalLayout.vue'
-import TaskCard from "@/components/Components/TaskCard.vue"
-import QAChat from "@/components/Components/QAChat.vue"
-import InterferenceEquipmentCard from '@/views/planningSchem/Interference/components/InterferenceEquipmentCard.vue'
-import TaskContent from "@/views/planningSchem/Interference/components/taskContent.vue";
-export default {
-  components: {GlobalLayout, TaskCard, QAChat, InterferenceEquipmentCard, TaskContent},
-  data() {
-    return {
-      editor: null,
-      adjustmentContent: '',
-      isHovered: false,
-      isExpanded: false,
-      showRequirements: true,
-      // 模拟任务数据
-      equipmentList: [
-        {
-          id: 'eq-001',
-          name: '电子战干扰系统A型',
-          type: '电子干扰设备',
-          status: '可用',
-          frequencyRange: '2-18GHz',
-          power: '200W',
-          coverage: '360°',
-          responseTime: '<0.5s',
-          deploymentLocation: '前线阵地A区',
-          deploymentAngle: '45°',
-          elevation: '30°',
-          azimuth: '120°',
-          interferenceRange: '5km',
-          weight: '15kg',
-          image: 'https://example.com/equipment1.jpg',
-          interferenceTypes: ['雷达干扰', '通信干扰']
-        },
-        {
-          id: 'eq-002',
-          name: '红外干扰机B型',
-          type: '红外干扰设备',
-          status: '可用',
-          frequencyRange: '3-5μm, 8-12μm',
-          power: '50W',
-          coverage: '120°',
-          responseTime: '<0.2s',
-          deploymentLocation: '前线阵地B区',
-          deploymentAngle: '30°',
-          elevation: '15°',
-          azimuth: '90°',
-          interferenceRange: '3km',
-          weight: '8kg',
-          image: 'https://example.com/equipment2.jpg',
-          interferenceTypes: ['红外干扰']
-        },
-        {
-          id: 'eq-003',
-          name: '移动式发烟罐系统',
-          type: '发烟设备',
-          status: '待命',
-          coverage: '500m²',
-          responseTime: '10s',
-          deploymentLocation: '机动部队',
-          deploymentAngle: '0°',
-          elevation: '0°',
-          azimuth: '0°',
-          interferenceRange: '1km',
-          weight: '25kg',
-          image: 'https://example.com/equipment3.jpg',
-          interferenceTypes: ['视觉干扰', '红外干扰']
-        },
-        {
-          id: 'eq-004',
-          name: '角反射器阵列',
-          type: '角反射器',
-          status: '可用',
-          frequencyRange: '1-18GHz',
-          coverage: '全向',
-          responseTime: '即时',
-          deploymentLocation: '沿海防御区',
-          deploymentAngle: '60°',
-          elevation: '10°',
-          azimuth: '180°',
-          interferenceRange: '10km',
-          weight: '10kg',
-          image: 'https://example.com/equipment4.jpg',
-          interferenceTypes: ['雷达干扰']
-        },
-        {
-          id: 'eq-005',
-          name: '多功能干扰系统',
-          type: '电子干扰设备',
-          status: '使用中',
-          frequencyRange: '1-40GHz',
-          power: '500W',
-          coverage: '360°',
-          responseTime: '<0.3s',
-          deploymentLocation: '指挥中心',
-          deploymentAngle: '90°',
-          elevation: '45°',
-          azimuth: '270°',
-          interferenceRange: '8km',
-          weight: '30kg',
-          image: 'https://example.com/equipment5.jpg',
-          interferenceTypes: ['雷达干扰', '通信干扰', 'GPS干扰']
-        },
-      ],
-      historySolutions: [
-        {
-          time: '2023-05-10 14:30',
-          description: '针对雷达制导导弹的干扰方案',
-          equipments: [
-            {
-              id: 'eq-001',
-              name: '电子战干扰系统A型',
-              type: '电子干扰设备',
-              status: '可用',
-              frequencyRange: '2-18GHz',
-              power: '200W',
-              coverage: '360°',
-              responseTime: '<0.5s'
-            },
-            {
-              id: 'eq-004',
-              name: '角反射器阵列',
-              type: '角反射器',
-              status: '可用',
-              coverage: '全向',
-              responseTime: '即时'
-            }
-          ]
-        },
-        {
-          time: '2023-04-28 09:15',
-          description: '针对红外制导导弹的干扰方案',
-          equipments: [
-            {
-              id: 'eq-002',
-              name: '红外干扰机B型',
-              type: '红外干扰设备',
-              status: '可用',
-              frequencyRange: '3-5μm, 8-12μm',
-              power: '50W',
-              coverage: '120°',
-              responseTime: '<0.2s'
-            },
-            {
-              id: 'eq-003',
-              name: '移动式发烟罐系统',
-              type: '发烟设备',
-              status: '待命',
-              coverage: '500m²',
-              responseTime: '10s'
-            }
-          ]
-        }
-      ],
-      interferenceEquipments: [
-        {
-          id: 'eq-001',
-          name: '电子战干扰系统A型',
-          type: '电子干扰设备',
-          status: '可用',
-          frequencyRange: '2-18GHz',
-          power: '200W',
-          coverage: '360°',
-          responseTime: '<0.5s'
-        },
-        {
-          id: 'eq-005',
-          name: '多功能干扰系统',
-          type: '电子干扰设备',
-          status: '使用中',
-          frequencyRange: '1-40GHz',
-          power: '500W',
-          coverage: '360°',
-          responseTime: '<0.3s'
-        },
-        {
-          id: 'eq-002',
-          name: '红外干扰机B型',
-          type: '红外干扰设备',
-          status: '可用',
-          frequencyRange: '3-5μm, 8-12μm',
-          power: '50W',
-          coverage: '120°',
-          responseTime: '<0.2s'
-        }
-      ],
-      // 当前编辑的任务
-      currentTask: {
-        id: 'task-2023-001',
-        name: "东海舰队反导拦截任务",
-        description: "针对本次试验为新型弹道导弹实战化打击效能验证，在东海预定靶场海域模拟高对抗环境下的导弹攻击全流程。试验将重点考核导弹在复杂电磁环境中的突防能力、多模复合制导系统的抗干扰性能以及战斗部对典型海上目标的毁伤效果，同步验证靶场测控设备对高速机动目标的跟踪精度和毁伤评估能力。试验要求所有监测设备在导弹进入末段弹道前完成战备状态，确保完整采集从发射到命中的全过程数据。",
-        type: "弹道导弹",
-        targetLocation: "东经122.5°，北纬28.3°",
-        estimatedTime: "2023-06-15 14:30",
-        priority: 2,
-        status: "准备中",
-        equipment: {
-          id: 'eq-005',
-          name: '多功能干扰系统',
-          type: '电子干扰设备',
-          status: '使用中',
-          frequencyRange: '1-40GHz',
-          power: '500W',
-          coverage: '360°',
-          responseTime: '<0.3s',
-          deploymentLocation: '东海舰队旗舰甲板',
-          deploymentAngle: '90°',
-          elevation: '45°',
-          azimuth: '270°',
-          interferenceRange: '8km',
-          weight: '30kg',
-          image: 'https://example.com/multifunctional-jammer.jpg',
-          interferenceTypes: ['雷达干扰', '通信干扰', 'GPS干扰']
-        }
-      },
-      formRules: {
-        name: [
-          {required: true, message: '请输入任务名称', trigger: 'blur'},
-          {min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur'}
-        ],
-        type: [
-          {required: true, message: '请选择任务类型', trigger: 'change'}
-        ],
-        targetLocation: [
-          {required: true, message: '请输入目标位置', trigger: 'blur'}
-        ],
-        estimatedTime: [
-          {required: true, message: '请选择预计时间', trigger: 'change'}
-        ],
-        'equipment.name': [
-          {required: true, message: '请输入设备名称', trigger: 'blur'}
-        ],
-        'equipment.type': [
-          {required: true, message: '请选择设备类型', trigger: 'change'}
-        ],
-        'equipment.status': [
-          {required: true, message: '请选择设备状态', trigger: 'change'}
-        ],
-        'equipment.frequencyRange': [
-          {required: true, message: '请输入频段范围', trigger: 'blur'}
-        ],
-        'equipment.interferenceTypes': [
-          {type: 'array', required: true, message: '请至少选择一种干扰类型', trigger: 'change'}
-        ]
-      },
-      // 暂存的任务数据
-      stashedTask: null,
-      // 问答数据
-      qaMessages: [
-        {
-          type: "answer",
-          content: "欢迎使用导弹打击系统智能助手，请问有什么可以帮助您的？",
-          time: "09:00"
-        }
-      ]
-    }
-  },
-  computed: {
-    buttonIcon() {
-      return this.showRequirements ? 'el-icon-chat-line-round' : 'el-icon-tickets'
-    },
-    buttonText() {
-      return this.showRequirements ? '智能问答' : '任务要求'
-    }
-  },
-  mounted() {
-    this.initEditor()
-  },
-  beforeDestroy() {
-    // 组件销毁时销毁编辑器
-    if (this.editor) {
-      this.editor.destroy()
-      this.editor = null
-    }
-  },
-  methods: {
-    initEditor() {
-      // 确保DOM已经渲染完成
-      this.$nextTick(() => {
-        this.editor = new E('#editor-toolbar-container', '#editor-container')
-
-        // 自定义配置
-        this.editor.config.zIndex = 100
-        this.editor.config.placeholder = '请输入任务调整内容...'
-        this.editor.config.uploadImgShowBase64 = true // 使用 base64 保存图片
-        this.editor.config.uploadImgServer = '/api/upload' // 你的图片上传接口
-        this.editor.config.uploadFileName = 'file' // 上传图片的参数名
-
-        // 自定义菜单
-        this.editor.config.menus = [
-          'head', // 标题
-          'bold', // 粗体
-          'italic', // 斜体
-          'underline', // 下划线
-          'strikeThrough', // 删除线
-          'foreColor', // 文字颜色
-          'backColor', // 背景颜色
-          'link', // 插入链接
-          'list', // 列表
-          'justify', // 对齐方式
-          'quote', // 引用
-          'image', // 插入图片
-          'table', // 表格
-          'code', // 插入代码
-          'undo', // 撤销
-          'redo' // 重复
-        ]
-
-        // 监听内容变化
-        this.editor.config.onchange = (html) => {
-          this.adjustmentContent = html
-        }
-
-        // 创建编辑器
-        this.editor.create()
-
-        // 设置暗黑主题样式
-        this.setEditorDarkTheme()
-      })
-    },
-
-    setEditorDarkTheme() {
-      // 设置编辑器暗黑主题
-      const editorContainer = document.querySelector('#editor-container .w-e-text-container')
-      if (editorContainer) {
-        editorContainer.style.backgroundColor = '#1f2a38'
-        editorContainer.style.color = '#e0e6ed'
-        editorContainer.style.borderColor = '#425163'
-      }
-
-      const toolbar = document.querySelector('#editor-toolbar-container .w-e-toolbar')
-      if (toolbar) {
-        toolbar.style.backgroundColor = '#2d3a4b'
-        toolbar.style.borderColor = '#425163'
-      }
-    },
-
-    saveAdjustment() {
-      if (!this.adjustmentContent) {
-        this.$message.warning('请填写调整内容')
-        return
-      }
-
-      // 这里添加保存逻辑，例如：
-      this.currentTask.adjustment = this.adjustmentContent
-      this.$message.success('任务调整已保存')
-
-      // 或者调用API保存
-      // this.saveTaskAdjustmentToServer()
-    },
-
-    clearEditor() {
-      this.editor.txt.clear()
-      this.adjustmentContent = ''
-    },
-    submitForm() {
-      this.$refs.taskForm.validate(valid => {
-        if (valid) {
-          this.saveTask()
-        } else {
-          this.$message.error('请检查表单填写是否正确')
-          return false
-        }
-      })
-    },
-
-    showImagePreview(url) {
-      if (url) {
-        this.$alert(`<img src="${url}" style="max-width:100%">`, '图片预览', {
-          dangerouslyUseHTMLString: true,
-          customClass: 'image-preview-modal'
-        })
-      }
-    },
-    handleSelectEquipment(equip) {
-      this.$message.success(`已选用设备: ${equip.name}`)
-      // 处理设备选用逻辑
-    },
-    handleEditEquipment(equipment) {
-      // 深拷贝设备数据
-      this.currentTask.equipment = JSON.parse(JSON.stringify(equipment))
-
-      // 可选：自动切换到设备标签页
-      // 需要给el-tabs添加ref="taskTabs"
-      // this.$refs.taskTabs.setActiveName('1') // '1'是设备标签页的name
-
-      this.$message.success(`正在编辑设备: ${equipment.name}`)
-    },
-    handleUploadSuccess(file) {
-      this.$message.success(`图片 ${file.name} 上传成功`)
-      // 可以在这里添加额外的处理逻辑，比如：
-
-      // 1. 自动将第一张上传的图片设为封面
-      if (this.currentTask.images.length === 1 && !this.currentTask.coverImage) {
-        this.currentTask.coverImage = this.currentTask.images[0].url
-        this.$message.info('已自动设置为封面图片')
-      }
-
-      // 2. 触发自动保存
-      // this.autoSaveTask()
-
-      // 3. 记录上传日志
-      // this.logAction(`上传图片: ${file.name}`)
-    },
-    executeTask(task) {
-      this.$message.success(`开始执行任务: ${task.name}`)
-      // 实际执行逻辑...
-    },
-
-    viewDetails(task) {
-      // 保存当前编辑内容到暂存区
-      if (this.currentTask.id && this.hasChanges(this.currentTask)) {
-        this.stashedTask = JSON.parse(JSON.stringify(this.currentTask))
-        this.$message.info(`已暂存当前编辑的任务: ${this.currentTask.name}`)
-      }
-
-      // 加载新任务到编辑区
-      this.currentTask = JSON.parse(JSON.stringify(task))
-      this.$message.info(`正在编辑任务: ${task.name}`)
-    },
-
-    hasChanges(task) {
-      // 检查任务是否有修改
-      if (!task.id) return false
-      const original = this.tasks.find(t => t.id === task.id)
-      if (!original) return true
-
-      return Object.keys(task).some(key => {
-        return JSON.stringify(task[key]) !== JSON.stringify(original[key])
-      })
-    },
-
-    saveTask() {
-      this.$refs.taskForm.validate(valid => {
-        if (!valid) {
-          this.$message.warning("请填写完整的任务信息")
-          return
-        }
-
-        if (this.currentTask.id) {
-          // 更新现有任务
-          const index = this.tasks.findIndex(t => t.id === this.currentTask.id)
-          if (index !== -1) {
-            this.tasks.splice(index, 1, {...this.currentTask})
-            this.$message.success(`任务 "${this.currentTask.name}" 更新成功`)
-          }
-        } else {
-          // 新增任务
-          this.currentTask.id = Date.now() // 使用时间戳作为临时ID
-          this.tasks.push({...this.currentTask})
-          this.$message.success(`任务 "${this.currentTask.name}" 创建成功`)
-        }
-
-        this.resetForm()
-      })
-    },
-
-    stashTask() {
-      if (!this.currentTask.name) {
-        this.$message.warning("请至少填写任务名称")
-        return
-      }
-
-      this.stashedTask = JSON.parse(JSON.stringify(this.currentTask))
-      this.$message.success("任务已暂存")
-
-      // 如果是暂存新任务，重置表单
-      if (!this.currentTask.id) {
-        this.resetForm()
-      }
-    },
-
-    applyStashedTask() {
-      if (this.stashedTask) {
-        this.currentTask = JSON.parse(JSON.stringify(this.stashedTask))
-        this.stashedTask = null
-        this.$message.success("已恢复暂存的任务")
-      }
-    },
-
-    resetForm() {
-      this.$refs.taskForm.resetFields()
-      this.currentTask = {
-        id: null,
-        name: "",
-        description: "",
-        type: "",
-        targetLocation: "",
-        estimatedTime: "",
-        priority: 1,
-        status: "规划中"
-      }
-    },
-
-    handleQuestion(question) {
-      // 添加用户问题到聊天记录
-      this.qaMessages.push({
-        type: "question",
-        content: question,
-        time: new Date().toLocaleTimeString('zh-CN', {hour12: false})
-      })
-
-      // 模拟AI回答
-      setTimeout(() => {
-        const answer = this.generateAnswer(question)
-        this.$refs.qaChat.addAnswer(answer)
-      }, 800)
-    },
-
-    generateAnswer(question) {
-      if (question.includes("东风")) {
-        return "东风系列导弹是中国自主研发的洲际弹道导弹，具有射程远、精度高的特点。"
-      } else if (question.includes("巡航")) {
-        return "巡航导弹具有飞行高度低、突防能力强的特点，适合精确打击高价值目标。"
-      } else if (question.includes("反舰")) {
-        return "反舰导弹专门用于攻击海上舰艇目标，具备较强的抗干扰能力和精确制导系统。"
-      } else {
-        return "关于导弹打击系统的问题，我已经记录，稍后会有专业人员为您解答。"
-      }
-    },
-
-    clearHistory() {
-      this.qaMessages = [{
-        type: "answer",
-        content: "对话记录已清空，如有其他问题请继续提问。",
-        time: new Date().toLocaleTimeString('zh-CN', {hour12: false})
-      }]
-    },
-
-    handleEmptyQuestion() {
-      this.$message.warning("请输入问题内容")
-    },
-    toggleHover(state) {
-      this.isHovered = state
-    },
-
-    toggleContent() {
-      this.showRequirements = !this.showRequirements
-      this.isExpanded = true
-    }
-  }
-}
-</script>
-
-<style scoped>
-/*干扰设备卡片*/
-.equipment-container {
-  padding: 15px;
-}
-
-.form-section-title {
-  color: #409EFF;
-  margin: 20px 0 15px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #425163;
-}
-
-.el-row {
-  margin-bottom: 10px;
-}
-
-/* 图片预览模态框样式 */
-::v-deep.image-preview-modal {
-  width: auto;
-  max-width: 80%;
-}
-
-::v-deep.image-preview-modal .el-message-box__content {
-  text-align: center;
-}
-
-.equipment-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 15px;
-}
-
-.section-title {
-  margin: 0 0 15px 0;
-  font-size: 18px;
-  color: #ffffff;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #ebeef5;
-}
-
-/*干扰设备卡片*/
-/* 新增切换按钮样式 */
-.toggle-button-container {
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 10;
-}
-
-.toggle-button {
-  display: flex;
-  align-items: center;
-  padding: 12px 8px;
-  background-color: #409EFF;
-  color: white;
-  border-radius: 4px 0 0 4px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
-}
-
-.toggle-button:hover {
-  background-color: #66b1ff;
-}
-
-.toggle-button i {
-  font-size: 20px;
-}
-
-.button-text {
-  margin-left: 8px;
-  white-space: nowrap;
-  font-size: 14px;
-}
-
-.fade-enter-active, .fade-leave-active {
-  transition: opacity 0.3s;
-}
-
-.fade-enter, .fade-leave-to {
-  opacity: 0;
-}
-
-/* 调整右侧区域布局 */
-.right-section {
-  position: relative;
-  height: 100%;
-}
-
-.toggle-content {
-  height: 100%;
-  padding-left: 40px; /* 为按钮留出空间 */
-}
-
-.requirements-section {
-  height: 100%;
-  padding: 20px;
-  background-color: #2d3a4b;
-  color: #e0e6ed;
-  border-radius: 4px;
-}
-
-.requirements-section h3 {
-  margin-top: 0;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #425163;
-}
-
-.requirements-section ul {
-  padding-left: 20px;
-}
-
-.requirements-section li {
-  margin-bottom: 8px;
-}
-
-/* 切换按钮样式 */
-
-/*编辑区主题样式*/
-.dark-card {
-  background-color: #2d3a4b;
-  border: 1px solid #425163;
-  color: #e0e6ed;
-}
-
-.dark-card ::v-deep .el-card__header {
-  background-color: #1f2a38;
-  border-bottom: 1px solid #425163;
-  color: #ffffff;
-}
-
-.dark-title {
-  color: #ffffff;
-  border-bottom: 1px solid #425163;
-}
-
-.dark-form ::v-deep .el-form-item__label {
-  color: #8796ad;
-}
-
-.dark-form ::v-deep .el-input__inner,
-.dark-form ::v-deep .el-textarea__inner,
-.dark-form ::v-deep .el-select .el-input__inner {
-  background-color: #1f2a38;
-  border: 1px solid #425163;
-  color: #e0e6ed;
-}
-
-.dark-form ::v-deep .el-input__inner::placeholder,
-.dark-form ::v-deep .el-textarea__inner::placeholder {
-  color: #606d82;
-}
-
-.dark-form ::v-deep .el-date-editor .el-input__inner,
-.dark-form ::v-deep .el-date-editor .el-input__prefix,
-.dark-form ::v-deep .el-date-editor .el-input__suffix {
-  color: #e0e6ed;
-}
-
-.dark-form ::v-deep .el-rate__item .el-rate__icon {
-  color: #606d82;
-}
-
-.dark-form ::v-deep .el-rate__item.is-on .el-rate__icon {
-  color: #f7ba2a;
-}
-
-/* 按钮样式调整 */
-.dark-form ::v-deep .el-button {
-  border: 1px solid;
-}
-
-.dark-form ::v-deep .el-button--primary {
-  background-color: #3475b5;
-  border-color: #3475b5;
-  color: #e0e6ed;
-}
-
-.dark-form ::v-deep .el-button--primary:hover {
-  background-color: #4084c9;
-  border-color: #4084c9;
-}
-
-.dark-form ::v-deep .el-button--info {
-  background-color: #425163;
-  border-color: #5a6b7d;
-  color: #e0e6ed;
-}
-
-.dark-form ::v-deep .el-button--info:hover {
-  background-color: #5a6b7d;
-  border-color: #677a8c;
-}
-
-.dark-form ::v-deep .el-button:not(.el-button--primary):not(.el-button--info) {
-  background-color: transparent;
-  border-color: #5a6b7d;
-  color: #e0e6ed;
-}
-
-.dark-form ::v-deep .el-button:not(.el-button--primary):not(.el-button--info):hover {
-  border-color: #677a8c;
-  color: #ffffff;
-}
-
-/*编辑区主题样式*/
-.main-container {
-  display: grid;
-  grid-template-columns: 60% 40%; /* 6:4 比例 */
-  gap: 20px;
-  height: calc(100vh - 120px); /* 减去header和footer的高度 */
-  padding: 20px;
-  box-sizing: border-box;
-}
-
-.left-section {
-  /*display: grid;*/
-  display: flex;
-  flex-direction: column;
-  /*grid-template-rows: 1fr 1fr;*/ /* 上下两部分等高 */
-  gap: 20px;
-  /*height: 100%;*/
-}
-
-.right-section {
-  height: 100%;
-}
-
-/* 任务卡片区域 */
-.task-cards-section {
-  display: flex;
-  flex-direction: column;
-  /*height: 100%;*/
-}
-
-.task-cards-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 15px;
-  overflow-y: auto;
-  padding: 10px;
-  flex: 1;
-}
-
-/* 任务编辑区域 */
-.task-editor-section {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.editor-card {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.editor-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 20px;
-}
-
-/* 滚动条样式 */
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: #c1c1c1;
-  border-radius: 3px;
-}
-
-::-webkit-scrollbar-track {
-  background-color: #f1f1f1;
-}
-
-/* 右侧区域样式 */
-.requirements-section {
-  height: 100%;
-  padding: 20px;
-  background-color: #2d3a4b;
-  color: #e0e6ed;
-  border-radius: 4px;
-  overflow-y: auto;
-}
-
-
-
-.task-description p {
-  line-height: 1.6;
-  color: #c0c4cc;
-}
-
-/* 描述列表样式 */
-
-
-.dark-descriptions ::v-deep(.el-descriptions__header) {
-  margin-bottom: 10px;
-}
-
-.dark-descriptions ::v-deep(.el-descriptions__label) {
-  color: #8796ad;
-  width: 100px;
-}
-
-.dark-descriptions ::v-deep(.el-descriptions__content) {
-  color: #e0e6ed;
-}
-
-/* 历史方案样式 */
-.solution-card {
-  background-color: #1f2a38;
-  border: 1px solid #425163;
-  margin-bottom: 10px;
-}
-
-.solution-content p {
-  margin-bottom: 15px;
-  color: #c0c4cc;
-}
-
-/* 推荐设备样式 */
-.recommended-equipments .equipment-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: 15px;
-}
-
-/* 时间线样式 */
-::v-deep(.el-timeline) {
-  padding-left: 10px;
-}
-
-::v-deep(.el-timeline-item__timestamp) {
-  color: #8796ad;
-  margin-bottom: 5px;
-}
-
-/* 右侧区域样式 */
-/* 深色描述列表样式 */
-.dark-descriptions {
-  margin-top: 10px;
-  background-color: #1f2a38;
-  border-color: #425163;
-}
-
-.dark-descriptions ::v-deep(.el-descriptions__header) {
-  margin-bottom: 10px;
-  color: #ffffff;
-}
-
-.dark-descriptions ::v-deep(.el-descriptions__body) {
-  background-color: #1f2a38;
-}
-
-.dark-descriptions ::v-deep(.el-descriptions__table) {
-  border-color: #425163;
-}
-
-.dark-descriptions ::v-deep(.el-descriptions__table tr) {
-  background-color: #1f2a38;
-}
-
-.dark-descriptions ::v-deep(.el-descriptions__table th.el-descriptions-item__cell) {
-  background-color: #1f2a38;
-  border-color: #425163;
-}
-
-.dark-descriptions ::v-deep(.el-descriptions__table td.el-descriptions-item__cell) {
-  border-color: #425163;
-}
-
-/* 标签样式 */
-.dark-label {
-  color: #8796ad !important;
-  width: 100px;
-  background-color: #1f2a38 !important;
-}
-
-.dark-descriptions ::v-deep(.el-descriptions__content) {
-  color: #e0e6ed;
-}
-
-/* 深色评分组件 */
-.dark-rate ::v-deep(.el-rate__icon) {
-  color: #606d82;
-}
-
-.dark-rate ::v-deep(.el-rate__item.is-on .el-rate__icon) {
-  color: #f7ba2a;
-}
-
-/* 状态标签样式 */
-.dark-tag {
-  border: none;
-}
-
-.dark-tag.el-tag--success {
-  background-color: #2b4a2e;
-  color: #67c23a;
-}
-
-.dark-tag.el-tag--warning {
-  background-color: #4a3e2b;
-  color: #e6a23c;
-}
-
-.dark-tag.el-tag--danger {
-  background-color: #4a2b2b;
-  color: #f56c6c;
-}
-
-.dark-tag.el-tag--info {
-  background-color: #2b3a4a;
-  color: #909399;
-}
-/* 富文本编辑器区域 */
-.task-adjustment-section {
-  margin-top: 20px;
-}
-
-#editor-toolbar-container {
-  border: 1px solid #425163;
-  border-bottom: none;
-}
-
-#editor-container {
-  border: 1px solid #425163;
-  border-top: none;
-}
-
-.editor-actions {
-  margin-top: 15px;
-  text-align: right;
-}
-
-/* 暗黑主题适配 */
-.w-e-menu {
-  color: #e0e6ed !important;
-}
-
-.w-e-drop-list {
-  background-color: #2d3a4b !important;
-  border-color: #425163 !important;
-}
-
-.w-e-drop-list .w-e-droplist-item {
-  color: #e0e6ed !important;
-}
-
-.w-e-drop-list .w-e-droplist-item:hover {
-  background-color: #409EFF !important;
-}
-
-.w-e-modal {
-  background-color: #2d3a4b !important;
-  border-color: #425163 !important;
-}
-
-.w-e-modal .w-e-modal-title {
-  color: #e0e6ed !important;
-}
-
-.w-e-modal .w-e-modal-close {
-  color: #e0e6ed !important;
-}
-
-.w-e-modal .w-e-modal-body {
-  background-color: #1f2a38 !important;
-}
-
-.w-e-modal .w-e-modal-footer button {
-  background-color: #3475b5 !important;
-  border-color: #3475b5 !important;
-  color: #e0e6ed !important;
-}
-
-.w-e-modal .w-e-modal-footer button:hover {
-  background-color: #4084c9 !important;
-  border-color: #4084c9 !important;
-}
-
-/* 响应式设计 */
-@media (max-width: 1200px) {
-  .main-container {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto auto;
-  }
-
-  .left-section {
-    grid-template-rows: auto auto;
-  }
-
-  .task-cards-container {
-    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  }
-
-  .right-section {
-    margin-top: 20px;
-  }
-}
-</style>

src/views/showSituation/countdown.vue

@@ -75,7 +75,7 @@
             @click="equipmentDrawerVisible = true"
           >
             <i class="el-icon-cpu"></i>
-            <span>设备状态</span>
+            <span>设备检测</span>
           </el-button>
 
         </div>

src/views/showSituation/largeScreen.vue

@@ -143,7 +143,7 @@
                   </div>
                 </div>
                 <div class="time-list-carousel">
-                  <transition name="carousel-fade">
+                  <transition name="carousel-slide-up">
                     <div class="event-slide" :key="carouselEventIndex">
                       <div class="event-slide-item"
                            :class="['event-item', currentCarouselEvent.dotClass]"
@@ -635,7 +635,9 @@ export default {
   color: #f0f0f0;
   margin-bottom: 5px;
   padding-bottom: 5px;
-  border-bottom: 1px solid #4a5063;
+  border-bottom: 1px solid rgba(100, 120, 150, 0.5);
+  text-transform: uppercase;
+  letter-spacing: 1px;
 }
 
 .weather-details {
@@ -652,10 +654,17 @@ export default {
 }
 
 .time-detail-item {
-  background-color: transparent;
+  background-color: rgba(30, 40, 60, 0.2);
   padding: 10px;
   border-radius: 5px;
-  border-left: 4px solid #1890ff;
+  border-left: 4px solid rgba(24, 144, 255, 0.6);
+  backdrop-filter: blur(4px);
+  transition: all 0.4s ease;
+}
+
+.time-detail-item:hover {
+  background-color: rgba(30, 40, 60, 0.5);
+  border-left-color: rgba(24, 144, 255, 1);
 }
 
 .time-label {
@@ -671,7 +680,7 @@ export default {
   letter-spacing: 1px;
 }
 
-/* 基础样式 - 深灰色系背景 */
+/* 基础样式 - 军事深色系背景 */
 * {
   margin: 0;
   padding: 0;
@@ -682,12 +691,16 @@ export default {
 html, body {
   height: 100%;
   overflow: hidden;
-  background-color: #2c313c;
+  background-color: #1a1e28;
+  background-image:
+    linear-gradient(rgba(30, 40, 60, 0.1) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(30, 40, 60, 0.1) 1px, transparent 1px);
+  background-size: 20px 20px;
 }
 
 .full-container {
   height: 100%;
-  background-color: #2c313c;
+  background-color: transparent;
   color: #e6e6e6;
 }
 
@@ -706,7 +719,7 @@ html, body {
 .main-map {
   flex: 1;
   position: relative;
-  background-color: #232730;
+  background-color: transparent;
   padding: 0;
   overflow: hidden;
   width: 100%;
@@ -720,7 +733,7 @@ html, body {
     width: 100%;
     height: 100%;
     object-fit: cover;
-    filter: brightness(0.9);
+    filter: brightness(0.75) contrast(1.1) saturate(0.9);
   }
 
   .arrow-overlay {
@@ -741,24 +754,25 @@ html, body {
     transform: translateX(-50%);
     width: 60%;
     z-index: 15;
-    background-color: rgba(35, 39, 48, 0.6);
-    border: 1px solid rgba(74, 80, 99, 0.5);
+    background-color: rgba(20, 30, 50, 0.3);
+    border: 1px solid rgba(100, 120, 150, 0.2);
     border-radius: 6px;
     padding: 12px;
-    backdrop-filter: blur(6px);
+    backdrop-filter: blur(8px);
     transition: all 0.4s ease;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
   }
 
   .event-progress-container:hover {
-    background-color: rgba(35, 39, 48, 0.85);
+    background-color: rgba(20, 30, 50, 0.7);
+    border-color: rgba(100, 120, 150, 0.5);
     transform: translateX(-50%) translateY(-3px);
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
   }
 
   .progress-bar {
     height: 6px;
-    background-color: rgba(74, 80, 99, 0.5);
+    background-color: rgba(100, 120, 150, 0.2);
     border-radius: 3px;
     position: relative;
     margin-bottom: 10px;
@@ -766,13 +780,14 @@ html, body {
   }
 
   .event-progress-container:hover .progress-bar {
-    background-color: rgba(74, 80, 99, 0.7);
+    background-color: rgba(100, 120, 150, 0.3);
   }
 
   .progress-fill {
     height: 100%;
     border-radius: 3px;
     transition: width 0.5s ease;
+    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
   }
 
   .progress-markers {
@@ -790,16 +805,17 @@ html, body {
     width: 12px;
     height: 12px;
     border-radius: 50%;
-    background-color: #8a91a6;
+    background-color: rgba(255, 255, 255, 0.6);
     cursor: pointer;
     transition: all 0.3s ease;
     border: 2px solid transparent;
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
   }
 
   .progress-marker:hover {
     transform: translate(-50%, -50%) scale(1.4);
     background-color: #fff;
-    box-shadow: 0 0 8px rgba(255,255,255,0.6);
+    box-shadow: 0 0 8px rgba(255,255,255,0.8);
   }
 
   .progress-marker.active {
@@ -820,6 +836,7 @@ html, body {
     width: 8px;
     height: 8px;
     border-radius: 50%;
+    box-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
   }
 
   .event-indicator.info {
@@ -836,6 +853,7 @@ html, body {
 
   .event-indicator.critical {
     background-color: #ff4d4f;
+    box-shadow: 0 0 5px rgba(255, 77, 79, 0.8);
   }
 
   .event-name {
@@ -846,6 +864,7 @@ html, body {
     overflow: hidden;
     text-overflow: ellipsis;
     color: #f0f0f0;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
   }
 
   .event-time {
@@ -861,7 +880,7 @@ html, body {
     transition: all 0.5s ease;
     margin-top: 8px;
     padding-top: 8px;
-    border-top: 1px dashed rgba(74, 80, 99, 0.5);
+    border-top: 1px dashed rgba(100, 120, 150, 0.3);
   }
 
   .event-progress-container:hover .current-event-detail {
@@ -889,11 +908,12 @@ html, body {
   right: 5px;
   top: 50%;
   z-index: 20;
+  transform: translateY(-50%);
 }
 
 .legend-toggle {
-  background: rgba(35, 39, 48, 0.9);
-  border: 1px solid #4a5063;
+  background: rgba(20, 30, 50, 0.3);
+  border: 1px solid rgba(100, 120, 150, 0.2);
   color: #e0e0e0;
   padding: 6px 12px;
   border-radius: 4px;
@@ -901,10 +921,13 @@ html, body {
   font-size: 13px;
   transition: all 0.3s ease;
   backdrop-filter: blur(4px);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 
 .legend-toggle:hover {
-  background: rgba(60, 65, 78, 0.9);
+  background: rgba(30, 40, 60, 0.7);
+  border-color: rgba(100, 120, 150, 0.5);
 }
 
 .legend-toggle.expanded {
@@ -913,8 +936,8 @@ html, body {
 }
 
 .legend-control {
-  background: rgba(35, 39, 48, 0.9);
-  border: 1px solid #4a5063;
+  background: rgba(20, 30, 50, 0.3);
+  border: 1px solid rgba(100, 120, 150, 0.2);
   border-top: none;
   padding: 12px;
   border-radius: 0 0 4px 4px;
@@ -946,6 +969,7 @@ html, body {
     height: 2px;
     margin-right: 8px;
     vertical-align: middle;
+    box-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
 
     &.red {
       background: #ff4d4f;
@@ -968,13 +992,14 @@ html, body {
   right: 20px;
   width: 12vw;
   max-width: 180px;
-  border: 1px solid #4a5063;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-  background-color: #232730;
+  border: 1px solid rgba(100, 120, 150, 0.2);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  background-color: rgba(20, 30, 50, 0.2);
   z-index: 10;
   transition: all 0.3s ease;
   overflow: hidden;
-  opacity: 0.85;
+  opacity: 0.8;
+  backdrop-filter: blur(4px);
 }
 
 .pip-container:hover {
@@ -982,6 +1007,9 @@ html, body {
   max-width: 250px;
   opacity: 1;
   z-index: 30;
+  border-color: rgba(100, 120, 150, 0.7);
+  background-color: rgba(20, 30, 50, 0.5);
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
 }
 
 .pip-container img {
@@ -990,23 +1018,27 @@ html, body {
   display: block;
   transition: all 0.3s ease;
   cursor: pointer;
+  filter: brightness(0.9) contrast(1.1);
 }
 
 /* 画中画预览弹窗样式 */
 .pip-preview-dialog {
-  background-color: #1a1d24 !important;
-  border: 1px solid #4a5063;
+  background-color: rgba(20, 30, 50, 0.8) !important;
+  border: 1px solid rgba(100, 120, 150, 0.5);
   border-radius: 6px;
+  backdrop-filter: blur(8px);
 }
 
 ::v-deep .pip-preview-dialog .el-dialog__header {
-  background-color: #2c313c;
-  border-bottom: 1px solid #4a5063;
+  background-color: rgba(20, 30, 50, 0.7);
+  border-bottom: 1px solid rgba(100, 120, 150, 0.3);
 }
 
 ::v-deep .pip-preview-dialog .el-dialog__title {
   color: #f0f0f0;
   font-size: 16px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
 }
 
 ::v-deep .pip-preview-dialog .el-dialog__body {
@@ -1015,7 +1047,7 @@ html, body {
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #1a1d24;
+  background-color: rgba(10, 20, 30, 0.9);
   overflow: hidden;
 }
 
@@ -1033,6 +1065,7 @@ html, body {
   max-height: 100%;
   object-fit: contain;
   transition: all 0.3s ease;
+  filter: brightness(0.9) contrast(1.1);
 }
 
 .preview-image.loading {
@@ -1040,21 +1073,30 @@ html, body {
 }
 
 ::v-deep .pip-preview-dialog .el-dialog__footer {
-  background-color: #2c313c;
-  border-top: 1px solid #4a5063;
+  background-color: rgba(20, 30, 50, 0.7);
+  border-top: 1px solid rgba(100, 120, 150, 0.3);
 }
 
 /* 时间列表轮播样式 */
 .telemetry-card {
   height: 100%;
-  background-color: transparent;
-  border: 1px solid #4a5063;
+  background-color: rgba(20, 30, 50, 0.2);
+  border: 1px solid rgba(100, 120, 150, 0.2);
   border-radius: 6px;
   padding: 15px;
   display: flex;
   flex-direction: column;
   gap: 10px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(6px);
+  transition: all 0.4s ease;
+}
+
+.telemetry-card:hover {
+  background-color: rgba(20, 30, 50, 0.5);
+  border-color: rgba(100, 120, 150, 0.5);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  transform: translateY(-3px);
 }
 
 .time-list-header {
@@ -1068,6 +1110,8 @@ html, body {
   font-size: 15px;
   font-weight: 600;
   color: #f0f0f0;
+  text-transform: uppercase;
+  letter-spacing: 1px;
 }
 
 .carousel-controls {
@@ -1093,7 +1137,7 @@ html, body {
   flex: 1;
   padding: 15px;
   border-radius: 5px;
-  background-color: transparent;
+  background-color: rgba(30, 40, 60, 0.2);
   cursor: pointer;
   transition: all 0.3s ease;
   display: flex;
@@ -1102,28 +1146,30 @@ html, body {
   margin: 0 auto;
   width: 100%;
   max-height: 100%;
+  border: 1px solid transparent;
 }
 
 .event-slide-item:hover {
-  background-color: #414859;
+  background-color: rgba(40, 50, 70, 0.5);
   transform: translateY(-3px);
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+  border-color: rgba(100, 120, 150, 0.5);
 }
 
 .event-item.info {
-  border-left: 4px solid #1890ff;
+  border-left: 4px solid rgba(24, 144, 255, 0.6);
 }
 
 .event-item.warning {
-  border-left: 4px solid #faad14;
+  border-left: 4px solid rgba(250, 173, 20, 0.6);
 }
 
 .event-item.success {
-  border-left: 4px solid #52c41a;
+  border-left: 4px solid rgba(82, 196, 26, 0.6);
 }
 
 .event-item.critical {
-  border-left: 4px solid #ff4d4f;
+  border-left: 4px solid rgba(255, 77, 79, 0.6);
 }
 
 .event-slide-item .event-time {
@@ -1141,18 +1187,23 @@ html, body {
   font-weight: 500;
 }
 
-/* 淡入淡出动画效果 */
-.carousel-fade-enter-active,
-.carousel-fade-leave-active {
-  transition: opacity 0.5s ease;
+/* 从底部往上轮播动画效果 */
+.carousel-slide-up-enter-active,
+.carousel-slide-up-leave-active {
+  transition: all 0.5s ease-out;
+}
+
+.carousel-slide-up-enter {
+  transform: translateY(100%);
+  opacity: 0;
 }
 
-.carousel-fade-enter,
-.carousel-fade-leave-to {
+.carousel-slide-up-leave-to {
+  transform: translateY(-100%);
   opacity: 0;
 }
 
-.carousel-fade-leave-active {
+.carousel-slide-up-leave-active {
   position: absolute;
   top: 0;
   left: 0;
@@ -1172,8 +1223,13 @@ html, body {
   justify-content: center;
   padding: 8px;
   min-width: 0;
-  background-color: rgba(74, 80, 99, 0.1);
+  background-color: rgba(30, 40, 60, 0.2);
   border-radius: 4px;
+  transition: all 0.4s ease;
+}
+
+.telemetry-record:hover {
+  background-color: rgba(30, 40, 60, 0.5);
 }
 
 .telemetry-label {
@@ -1194,7 +1250,7 @@ html, body {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 }
 
 .status-info {
@@ -1208,49 +1264,39 @@ html, body {
 .status-success {
   color: #66d2a0;
 }
-/* 卡片内文字颜色优化 */
-.telemetry-label,
-.event-time,
-.detail-status {
-  color: rgba(200, 210, 230, 0.85); /* 稍淡但不模糊的次要文字 */
-}
 
-.event-name,
-.telemetry-value,
-.list-title,
-.section-title {
-  color: rgba(240, 245, 255, 0.95); /* 主文字更亮，确保可读性 */
+/* 按钮样式优化 */
+::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;
 }
 
-/* 进度条背景调整，与容器融合 */
-.progress-bar {
-  background-color: rgba(74, 80, 99, 0.3); /* 更透明的进度条背景 */
+::v-deep .el-button:hover {
+  background-color: rgba(40, 50, 70, 0.7);
+  border-color: rgba(100, 120, 150, 0.8);
+  color: #fff;
 }
 
-/* 事件标记点优化 */
-.progress-marker {
-  background-color: rgba(255, 255, 255, 0.7); /* 半透明白色，减少突兀 */
-}
-.progress-marker.active {
-  background-color: rgba(255, 255, 255, 0.9);
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
+::v-deep .el-button--primary {
+  background-color: rgba(24, 144, 255, 0.4);
+  border-color: rgba(24, 144, 255, 0.6);
 }
-/* 卡片悬停效果 */
-.telemetry-card:hover,
-.event-progress-container:hover {
-  background-color: rgba(35, 39, 48, 0.75); /* 悬停时稍加深，增强交互感 */
-  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
-  transform: translateY(-2px); /* 轻微上浮，强化悬浮感 */
-  transition: all 0.3s ease;
+
+::v-deep .el-button--primary:hover {
+  background-color: rgba(24, 144, 255, 0.8);
+  border-color: rgba(24, 144, 255, 1);
 }
 
-/* 画中画容器优化 */
-.pip-container {
-  background-color: rgba(35, 39, 48, 0.5); /* 更透明的背景 */
-  backdrop-filter: blur(4px);
-  opacity: 0.9;
+/* 复选框样式优化 */
+::v-deep .el-checkbox__inner {
+  background-color: rgba(30, 40, 60, 0.3);
+  border-color: rgba(100, 120, 150, 0.3);
 }
-.pip-container:hover {
-  background-color: rgba(35, 39, 48, 0.7);
+
+::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
+  background-color: #1890ff;
+  border-color: #1890ff;
 }
 </style>

src/views/showSituation/now.vue

@@ -1,31 +1,79 @@
 <template>
   <div class="situation-container">
-    <!-- 头部 -->
-    <div class="header">
-      <h1>实景态势</h1>
-      <div class="header-controls">
-        <el-button
-          v-for="tab in tabs"
-          :key="tab.key"
-          :type="activeTab === tab.key ? 'primary' : 'default'"
-          class="header-btn"
-          @click="activeTab = tab.key"
-        >
-          {{ tab.name }}
-        </el-button>
-      </div>
-    </div>
-
     <!-- 主内容区域 -->
     <div class="main-container">
-      <!-- 左侧边栏 -->
+      <!-- 左侧侧边栏 -->
       <div class="sidebar">
         <div class="sidebar-section">
-          <h3>态势信息</h3>
+          <h3>作业信息</h3>
           <div class="info-list">
-            <div v-for="item in situationInfo" :key="item.key" class="info-item">
-              <span class="info-label">{{ item.label }}:</span>
-              <span class="info-value">{{ item.value }}</span>
+            <!-- 作业时间相关 -->
+            <div class="info-group">
+              <div class="info-item">
+                <span class="info-label">作业时间:</span>
+                <span class="info-value">{{ operationInfo.operationTime }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">作业零点时间:</span>
+                <span class="info-value">{{ operationInfo.operationZeroTime }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">射余时间(S):</span>
+                <span class="info-value">{{ operationInfo.remainingTime }}</span>
+              </div>
+            </div>
+
+            <!-- 弹道相关 -->
+            <div class="info-group">
+              <div class="info-item">
+                <span class="info-label">弹目距离(M):</span>
+                <span class="info-value">{{ operationInfo.projectileTargetDistance }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">高度(M):</span>
+                <span class="info-value">{{ operationInfo.altitude }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">弹道偏差:</span>
+                <span class="info-value">{{ operationInfo.ballisticDeviation }}</span>
+              </div>
+            </div>
+
+            <!-- 位置与状态 -->
+            <div class="info-group">
+              <div class="info-item">
+                <span class="info-label">经度:</span>
+                <span class="info-value">{{ operationInfo.longitude }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">纬度:</span>
+                <span class="info-value">{{ operationInfo.latitude }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">目标状态:</span>
+<!--                <span class="info-value status">{{ operationInfo.targetStatus | statusClass }}">{{ operationInfo.targetStatus }}</span>-->
+                <span class="info-value status">{{ operationInfo.targetStatus }}</span>
+              </div>
+            </div>
+
+            <!-- 气象信息 -->
+            <div class="info-group">
+              <div class="info-item">
+                <span class="info-label">风速(KM/H):</span>
+                <span class="info-value">{{ operationInfo.windSpeed }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">风向:</span>
+                <span class="info-value">{{ operationInfo.windDirection }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">能见度(KM):</span>
+                <span class="info-value">{{ operationInfo.visibility }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">温度(℃):</span>
+                <span class="info-value">{{ operationInfo.temperature }}</span>
+              </div>
             </div>
           </div>
         </div>
@@ -50,55 +98,6 @@
             </div>
           </div>
         </div>
-        <!-- 右侧面板 -->
-        <div class="right-panel">
-          <div v-if="selectedDevice" class="panel-section">
-            <h3>设备详情</h3>
-            <div class="detail-content">
-              <div class="detail-header">
-                <h4>{{ selectedDevice.name }}</h4>
-                <el-tag :type="getStatusTagType(selectedDevice.status)">
-                  {{ selectedDevice.status }}
-                </el-tag>
-              </div>
-
-              <!-- 通用信息 -->
-              <div class="detail-item">
-                <span class="detail-label">设备类型:</span>
-                <span class="detail-value">{{ getDeviceTypeName(selectedDevice.type) }}</span>
-              </div>
-
-              <!-- 动态详情 -->
-              <template v-if="selectedDevice.type === 'interference'">
-                <div v-if="selectedDevice.subType === 'optical'" class="detail-item">
-                  <span class="detail-label">干扰类型:</span>
-                  <span class="detail-value">光电对抗干扰</span>
-                </div>
-                <div v-if="selectedDevice.subType === 'electromagnetic'" class="detail-item">
-                  <span class="detail-label">干扰类型:</span>
-                  <span class="detail-value">电磁对抗干扰</span>
-                </div>
-              </template>
-
-              <!-- 动态详情字段 -->
-              <div
-                v-for="(value, key) in selectedDevice.details"
-                :key="key"
-                class="detail-item"
-              >
-                <span class="detail-label">{{ getDetailLabel(key) }}:</span>
-                <span class="detail-value">{{ value }}</span>
-              </div>
-
-              <!-- 操作按钮 -->
-              <div class="device-actions">
-                <el-button size="small" type="primary">控制</el-button>
-                <el-button size="small">日志</el-button>
-              </div>
-            </div>
-          </div>
-
-        </div>
       </div>
 
       <!-- 主地图区域 -->
@@ -131,7 +130,6 @@
         <!-- 地图视图 -->
         <div class="map-view">
           <div class="map-grid"></div>
-          <!--          <img :src="currentMapImage" alt="态势地图" class="map-image" />-->
           <img alt="态势地图" class="map-image" src="/img/banner.jpg"/>
           <!-- 设备标记 -->
           <div
@@ -139,9 +137,9 @@
             :key="device.id"
             :class="['device-marker', device.type, device.subType, { active: selectedDevice && selectedDevice.id === device.id }]"
             :style="{
-      left: device.position.x + '%',
-      top: device.position.y + '%'
-    }"
+              left: device.position.x + '%',
+              top: device.position.y + '%'
+            }"
             :title="device.name"
             @click="selectDevice(device)"
           >
@@ -171,17 +169,54 @@
           </div>
         </div>
       </div>
-    </div>
 
-    <!-- 底部状态栏 -->
-    <div class="status-bar">
-      <div class="status-item">
-        <span class="status-label">系统状态:</span>
-        <span class="status-value online">在线</span>
-      </div>
-      <div class="status-item">
-        <span class="status-label">更新时间:</span>
-        <span class="status-value">{{ currentTime }}</span>
+      <!-- 右侧面板 -->
+      <div class="right-panel">
+        <div v-if="selectedDevice" class="panel-section">
+          <h3>设备详情</h3>
+          <div class="detail-content">
+            <div class="detail-header">
+              <h4>{{ selectedDevice.name }}</h4>
+              <el-tag :type="getStatusTagType(selectedDevice.status)">
+                {{ selectedDevice.status }}
+              </el-tag>
+            </div>
+
+            <!-- 通用信息 -->
+            <div class="detail-item">
+              <span class="detail-label">设备类型:</span>
+              <span class="detail-value">{{ getDeviceTypeName(selectedDevice.type) }}</span>
+            </div>
+
+            <!-- 动态详情 -->
+            <template v-if="selectedDevice.type === 'interference'">
+              <div v-if="selectedDevice.subType === 'optical'" class="detail-item">
+                <span class="detail-label">干扰类型:</span>
+                <span class="detail-value">光电对抗干扰</span>
+              </div>
+              <div v-if="selectedDevice.subType === 'electromagnetic'" class="detail-item">
+                <span class="detail-label">干扰类型:</span>
+                <span class="detail-value">电磁对抗干扰</span>
+              </div>
+            </template>
+
+            <!-- 动态详情字段 -->
+            <div
+              v-for="(value, key) in selectedDevice.details"
+              :key="key"
+              class="detail-item"
+            >
+              <span class="detail-label">{{ getDetailLabel(key) }}:</span>
+              <span class="detail-value">{{ value }}</span>
+            </div>
+
+            <!-- 操作按钮 -->
+            <!--            <div class="device-actions">
+                          <el-button size="small" type="primary">控制</el-button>
+                          <el-button size="small">日志</el-button>
+                        </div>-->
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -190,9 +225,34 @@
 <script>
 export default {
   name: "SituationView",
+  filters: {
+    statusClass(status) {
+      const map = {
+        '锁定': 'locked',
+        '跟踪中': 'tracking',
+        '待确认': 'pending',
+        '正常': 'normal',
+        '警告': 'warning'
+      }
+      return map[status] || 'normal'
+    }
+  },
   data() {
     return {
-      selectedDevice: null,
+      selectedDevice:  {
+        id: 1,
+        name: '发烟罐烟幕生成模拟系统',
+        type: 'interference',
+        subType: 'optical',
+        position: {x: 17, y: 72},
+        status: '正常',
+        details: {
+          power: '220V',
+          coverage: '500m²',
+          duration: '30min',
+          material: '环保烟雾剂'
+        }
+      },
       devices: [
         // 光电对抗干扰设备
         {
@@ -295,24 +355,26 @@ export default {
         interference: true,
         target: true
       },
-
-      activeTab: 'before',
       selectedTarget: null,
       showPIP: true,
       compassAngle: 0,
       currentTime: new Date().toLocaleString(),
-      tabs: [
-        {key: 'before', name: '打击前'},
-        {key: 'during', name: '打击时'},
-        {key: 'after', name: '打击后'},
-        {key: '3d', name: '3D实景'}
-      ],
-      situationInfo: [
-        {key: 'area', label: '作战区域', value: '东海战区'},
-        {key: 'time', label: '当前时间', value: '2024-01-15 14:30:00'},
-        {key: 'weather', label: '天气状况', value: '晴朗'},
-        {key: 'visibility', label: '能见度', value: '良好'}
-      ],
+      // 作业相关信息
+      operationInfo: {
+        operationTime: '00:05:31.770',
+        operationZeroTime: '08:00:00.000',
+        remainingTime: '3494.0',
+        projectileTargetDistance: '65485.33',
+        altitude: '519.3',
+        ballisticDeviation: '78.5',
+        longitude: '98°26\'75\"E',
+        latitude: '39°54\'15\"N',
+        targetStatus: '锁定',
+        windSpeed: '12.7',
+        windDirection: '东北',
+        visibility: '10.0',
+        temperature: '25.5'
+      },
       targets: [
         {id: 1, name: '目标A', status: '已锁定', icon: 'el-icon-location'},
         {id: 2, name: '目标B', status: '跟踪中', icon: 'el-icon-location'},
@@ -332,52 +394,29 @@ export default {
         {key: 'hide-coverage', icon: 'el-icon-map-location', tooltip: '隐藏覆盖范围'},
         {key: 'hide-effects', icon: 'el-icon-lightning', tooltip: '隐藏交战效果'},
         {key: 'normal-view', icon: 'el-icon-picture-outline', tooltip: '普通视图'}
-      ],
-      currentDetails: [
-        {key: 'position', label: '位置', value: '东经120°15′，北纬30°20′'},
-        {key: 'altitude', label: '高度', value: '5000米'},
-        {key: 'speed', label: '速度', value: '800km/h'},
-        {key: 'direction', label: '方向', value: '东北'}
-      ],
-      operationLogs: [
-        {id: 1, time: '14:30:15', content: '系统启动完成'},
-        {id: 2, time: '14:30:20', content: '目标A锁定成功'},
-        {id: 3, time: '14:30:25', content: '态势数据更新'}
       ]
     }
   },
   computed: {
     filteredDevices() {
       return this.devices.filter(device => this.visibleDeviceTypes[device.type]);
-    },
-    currentMapImage() {
-      const mapImages = {
-        before: 'https://via.placeholder.com/1200x800/2c3e50/ffffff?text=打击前态势',
-        during: 'https://via.placeholder.com/1200x800/597A37/ffffff?text=打击时态势',
-        after: 'https://via.placeholder.com/1200x800/e74c3c/ffffff?text=打击后态势',
-        '3d': 'https://via.placeholder.com/1200x800/3498db/ffffff?text=3D实景'
-      }
-      return mapImages[this.activeTab]
-    },
-    pipImage() {
-      return 'https://via.placeholder.com/200x150/34495e/ffffff?text=画中画'
     }
   },
   methods: {
     selectDevice(device) {
       this.selectedDevice = device;
     },
-
     getStatusTagType(status) {
       const map = {
         '正常': 'success',
         '警告': 'warning',
         '故障': 'danger',
-        '运行中': 'primary'
+        '运行中': 'primary',
+        '待机': 'info',
+        '就绪': 'success'
       };
       return map[status] || 'info';
     },
-
     getDeviceTypeName(type) {
       const map = {
         'measurement': '测量设备',
@@ -401,8 +440,17 @@ export default {
         'responseTime': '响应时间',
         'altitude': '高度',
         'speed': '速度',
-        'resolution': '分辨率'
-        // 添加更多字段映射...
+        'resolution': '分辨率',
+        'frameRate': '帧率',
+        'storage': '存储容量',
+        'triggerMode': '触发模式',
+        'size': '尺寸',
+        'material': '材料',
+        'rcs': '雷达截面积',
+        'heatSignature': '热特征',
+        'model': '型号',
+        'deploymentTime': '部署时间',
+        'channels': '通道数'
       };
       return map[key] || key;
     },
@@ -412,68 +460,59 @@ export default {
     handleMapControl(key) {
       switch (key) {
         case 'zoom-in':
-          this.zoomIn();
+          console.log('放大地图');
           break;
         case 'zoom-out':
-          this.zoomOut();
+          console.log('缩小地图');
           break;
         case 'reset':
-          this.resetView();
+          console.log('重置视图');
           break;
         case 'fullscreen':
-          // 全屏逻辑
           console.log('切换全屏');
           break;
         case 'show-all':
-          // 显示所有层逻辑
           console.log('显示所有层');
           break;
         case 'observation':
-          // 观测装置逻辑
           console.log('切换观测装置显示');
           break;
         case 'interference':
-          // 干扰装备逻辑
           console.log('切换干扰装备显示');
           break;
         case 'protection-target':
-          // 防护目标逻辑
           console.log('切换防护目标显示');
           break;
         case 'red-equipment':
-          // 红方装备逻辑
           console.log('切换红方装备显示');
           break;
         case 'hide-path':
-          // 隐藏路径逻辑
-          this.toggleGrid();
           console.log('隐藏路径');
           break;
         case 'hide-coverage':
-          // 隐藏覆盖范围逻辑
-          this.toggleGrid();
           console.log('隐藏覆盖范围');
           break;
         case 'hide-effects':
-          // 隐藏交战效果逻辑
-          this.toggleGrid();
           console.log('隐藏交战效果');
           break;
         case 'normal-view':
-          // 普通视图逻辑
-          this.toggleGrid();
           console.log('切换普通视图');
           break;
         default:
           console.log('未知控制按钮:', key);
       }
-    },
-    mounted() {
-      // 更新时间
-      setInterval(() => {
-        this.currentTime = new Date().toLocaleString()
-      }, 1000)
     }
+  },
+  mounted() {
+    // 更新时间
+    setInterval(() => {
+      this.currentTime = new Date().toLocaleString()
+    }, 1000)
+
+    // 模拟罗盘旋转
+    setInterval(() => {
+      this.compassAngle = (this.compassAngle + 1) % 360;
+    }, 1000);
   }
 }
 </script>
@@ -481,8 +520,7 @@ export default {
 <style lang="scss" scoped>
 .situation-container {
   display: grid;
-  grid-template-columns: 300px 1fr 320px;
-  grid-template-rows: 60px 1fr 40px;
+  grid-template-columns: 320px 1fr 320px;
   height: calc(100vh - 5vh);
   gap: 1px;
   background-color: #333;
@@ -490,45 +528,14 @@ export default {
   font-family: "Microsoft YaHei", Arial, sans-serif;
 }
 
-.header {
-  grid-column: 1 / 4;
-  background-color: #2c3e50;
-  display: flex;
-  align-items: center;
-  padding: 0 20px;
-  justify-content: space-between;
-  border-bottom: 1px solid #4a6572;
-
-  h1 {
-    font-size: 1.5rem;
-    color: #ecf0f1;
-  }
-
-  .header-controls {
-    display: flex;
-    gap: 15px;
-  }
-
-  .header-btn {
-    background-color: #597A37;
-    border-color: #597A37;
-
-    &:hover {
-      background-color: #4a672e;
-      border-color: #4a672e;
-    }
-  }
-}
-
 .main-container {
   display: flex;
   grid-column: 1 / 4;
-  grid-row: 2;
   overflow: hidden;
 }
 
 .sidebar {
-  width: 300px;
+  width: 320px;
   background-color: #2c3e50;
   display: flex;
   flex-direction: column;
@@ -537,30 +544,80 @@ export default {
   padding: 15px;
 
   .sidebar-section {
-    margin-bottom: 20px;
+    margin-bottom: 25px;
+    background-color: rgba(0, 0, 0, 0.15);
+    border-radius: 6px;
+    padding: 15px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
     h3 {
       color: #ecf0f1;
-      margin-bottom: 10px;
+      margin-bottom: 15px;
       font-size: 1rem;
+      padding-bottom: 8px;
+      border-bottom: 1px solid #34495e;
+      display: flex;
+      align-items: center;
+
+      &:before {
+        content: '';
+        display: inline-block;
+        width: 4px;
+        height: 16px;
+        background-color: #597A37;
+        margin-right: 8px;
+        border-radius: 2px;
+      }
     }
   }
 
   .info-list {
+    .info-group {
+      margin-bottom: 15px;
+      padding-bottom: 10px;
+      border-bottom: 1px dashed #34495e;
+
+      &:last-child {
+        border-bottom: none;
+        margin-bottom: 0;
+        padding-bottom: 0;
+      }
+    }
+
     .info-item {
       display: flex;
       justify-content: space-between;
       padding: 8px 0;
-      border-bottom: 1px solid #34495e;
 
       .info-label {
         color: #bdc3c7;
         font-size: 0.9rem;
+        width: 45%;
+        text-align: left;
       }
 
       .info-value {
         color: #ecf0f1;
         font-weight: bold;
+        width: 55%;
+        text-align: right;
+        padding-left: 10px;
+
+        &.status-locked {
+          color: #2ecc71;
+        }
+
+        &.status-tracking {
+          color: #3498db;
+        }
+
+        &.status-pending {
+          color: #f39c12;
+        }
+
+        &.status-warning {
+          color: #e67e22;
+        }
       }
     }
   }
@@ -575,6 +632,7 @@ export default {
       cursor: pointer;
       transition: background-color 0.3s;
       margin-bottom: 5px;
+      background-color: rgba(0, 0, 0, 0.1);
 
       &:hover, &.active {
         background-color: #597A37;
@@ -627,10 +685,6 @@ export default {
       display: flex;
       flex-direction: column;
       gap: 5px;
-      /*所有元素左边距10px*/
-      ::v-deep .el-button {
-        margin-left: 0 !important;
-      }
     }
 
     .map-control-btn {
@@ -778,6 +832,7 @@ export default {
 }
 
 .right-panel {
+  width: 320px;
   background-color: #2c3e50;
   border-left: 1px solid #4a6572;
   overflow-y: auto;
@@ -831,37 +886,6 @@ export default {
   }
 }
 
-.status-bar {
-  grid-column: 1 / 4;
-  grid-row: 3;
-  background-color: #2c3e50;
-  display: flex;
-  align-items: center;
-  padding: 0 20px;
-  justify-content: space-between;
-  border-top: 1px solid #4a6572;
-
-  .status-item {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-
-    .status-label {
-      color: #bdc3c7;
-      font-size: 0.9rem;
-    }
-
-    .status-value {
-      color: #ecf0f1;
-      font-weight: bold;
-
-      &.online {
-        color: #27ae60;
-      }
-    }
-  }
-}
-
 // 设备标记样式
 .device-marker {
   position: absolute;
@@ -1028,5 +1052,4 @@ export default {
     }
   }
 }
-
 </style>

src/views/showSituation/whenStriking.vue

@@ -15,7 +15,7 @@
         </div>
         <div class="panel-content" v-if="panels.simulationInfo">
           <el-tabs v-model="activeTab" @tab-click="handleTabClick">
-            <el-tab-pane label="态势" name="situation"></el-tab-pane>
+            <el-tab-pane label="zb信息" name="situation"></el-tab-pane>
             <el-tab-pane label="事件" name="events"></el-tab-pane>
           </el-tabs>
           <!-- 态势标签内容 -->
@@ -640,6 +640,10 @@ export default {
 
       // 遥测数据
       telemetry: {
+        windDirection:'东北',
+        temperature:'25.3',
+        visibility:'10.0',
+        windSpeed:'12.7',
         timeRemaining: 3495.0,
         distance: 65535.00,
         altitude: 500.0,

src/views/testEnvironmentMage/realTimeDevice/index.vue

@@ -29,7 +29,7 @@
         <el-form-item>
           <el-button type="primary" size="small" @click="handleQuery">查询</el-button>
           <el-button size="small" @click="resetQuery">重置</el-button>
-<!--          <el-button type="success" size="small" @click="handleAdd">新增设备</el-button>-->
+          <!--          <el-button type="success" size="small" @click="handleAdd">新增设备</el-button>-->
         </el-form-item>
       </el-form>
     </el-card>
@@ -506,7 +506,7 @@ export default {
             model: 'HW-IR-2000',
             accuracy: '±0.5℃',
             frequencyBand: '3-5μm',
-            imageUrl:'',
+            imageUrl:'/deviceImg/meas/中波红外热像仪.png',
             status: 'normal',
             remark: '用于远距离目标温度测量',
             associatedEquipments: []
@@ -517,7 +517,7 @@ export default {
             type: 'measurement',
             model: 'VC-1200',
             accuracy: '0.1像素',
-            imageUrl:'',
+            imageUrl:'/deviceImg/meas/可见光相机.png',
             frequencyBand: '400-700nm',
             status: 'normal',
             remark: '高分辨率可见光成像设备',
@@ -530,7 +530,7 @@ export default {
             model: 'HW-IR-2000',
             accuracy: '±0.5℃',
             frequencyBand: '3-5μm',
-            imageUrl:'',
+            imageUrl:'/deviceImg/meas/中波红外热像仪.png',
             status: 'normal',
             remark: '用于远距离目标温度测量',
             associatedEquipments: []
@@ -541,7 +541,7 @@ export default {
             type: 'measurement',
             model: 'VC-1200',
             accuracy: '0.1像素',
-            imageUrl:'',
+            imageUrl:'/deviceImg/meas/可见光相机.png',
             frequencyBand: '400-700nm',
             status: 'normal',
             remark: '高分辨率可见光成像设备',
@@ -552,7 +552,7 @@ export default {
             name: '激光测距仪',
             type: 'measurement',
             model: 'LR-5000',
-            imageUrl:'',
+            imageUrl:'/deviceImg/meas/激光测距仪.png',
             accuracy: '±1m',
             frequencyBand: '1064nm',
             status: 'fault',
@@ -563,7 +563,7 @@ export default {
             id: 'meas-004',
             name: '雷达测速仪',
             type: 'measurement',
-            imageUrl:'',
+            imageUrl:'/deviceImg/meas/雷达测速仪.png',
             model: 'RS-3000',
             accuracy: '±0.5km/h',
             frequencyBand: 'K波段',
@@ -579,7 +579,7 @@ export default {
             type: 'interference',
             model: 'RS-C-100',
             power: '500W',
-            imageUrl:'',
+            imageUrl:'/deviceImg/int/C频段辐射源.png',
             effectiveDistance: '50km',
             status: 'normal',
             remark: 'C频段干扰信号发生器',
@@ -589,7 +589,7 @@ export default {
             id: 'inter-002',
             name: '发烟机/罐',
             type: 'interference',
-            imageUrl:'',
+            imageUrl:'/deviceImg/int/发烟机.png',
             model: 'SM-200',
             power: 'N/A',
             effectiveDistance: '1km',
@@ -601,7 +601,7 @@ export default {
             id: 'inter-003',
             name: '电磁干扰器',
             type: 'interference',
-            imageUrl:'',
+            imageUrl:'/deviceImg/int/电磁干扰器.png',
             model: 'EMI-400',
             power: '1000W',
             effectiveDistance: '10km',
@@ -613,8 +613,8 @@ export default {
         target: [
           {
             id: 'target-001',
-            name: '模拟机/油库',
-            imageUrl:'',
+            name: '模拟油库',
+            imageUrl:'/img/s04.png',
             type: 'target',
             model: 'TM-100',
             targetType: '固定目标',
@@ -626,7 +626,7 @@ export default {
           {
             id: 'target-002',
             name: '机动式防御雷达车',
-            imageUrl:'',
+            imageUrl:'/deviceImg/targ/机动式防御雷达车.png',
             type: 'target',
             model: 'TR-200',
             targetType: '雷达目标',
@@ -639,7 +639,7 @@ export default {
             id: 'target-003',
             name: '空中目标模拟器',
             type: 'target',
-            imageUrl:'',
+            imageUrl:'/deviceImg/targ/空中目标模拟器.png',
             model: 'ATS-500',
             targetType: '空中目标',
             speed: 'Mach 2',