fzty/src/views/command/taskEdit/OverallPlan.vue

<template>
  <GlobalLayout title="试验任务参数调整">
    <template #header-controls>
      <el-button icon="el-icon-close" @click="close">关闭</el-button>
      <el-button type="success" icon="el-icon-download">暂存</el-button>
      <el-button type="primary" icon="el-icon-plus" @click="submitForm">保存</el-button>
    </template>

    <div class="main-container">
      <div class="left-section">
        <!-- 任务配置区 -->
        <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="measurementForm"
                :model="measurementData"
                :rules="formRules"
                class="dark-form"
                label-width="150px"
              >
                <h4 class="form-section-title">任务基本信息</h4>
                <el-form-item label="干扰保障方案名称" prop="schemeName">
                  <el-input
                    v-model="measurementData.schemeName"
                    placeholder="请输入测量保障方案名称"
                    clearable
                    disabled
                  />
                </el-form-item>

                <el-form-item label="任务名称" prop="taskName">
                  <el-input
                    v-model="measurementData.taskName"
                    placeholder="请输入任务名称"
                    clearable
                    disabled
                  />
                </el-form-item>

                <el-form-item label="任务代号" prop="taskCode">
                  <el-input
                    v-model="measurementData.taskCode"
                    placeholder="请输入任务代号"
                    clearable
                    disabled
                  />
                </el-form-item>

                <el-form-item label="任务开始时间" prop="startTime">
                  <el-date-picker
                    v-model="measurementData.startTime"
                    type="datetime"
                    placeholder="选择开始时间"
                    style="width: 100%"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    disabled
                  />
                </el-form-item>

                <el-form-item label="任务结束时间" prop="endTime">
                  <el-date-picker
                    v-model="measurementData.endTime"
                    type="datetime"
                    placeholder="选择结束时间"
                    style="width: 100%"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    disabled
                  />
                </el-form-item>

                <el-form-item label="干扰方案编制状态" prop="status">
                  <el-select
                    v-model="measurementData.status"
                    placeholder="请选择状态"
                    style="width: 100%"
                    disabled
                  >
                    <el-option label="进行中" value="进行中" />
                    <el-option label="未开始" value="未开始" />
                    <el-option label="已完成" value="已完成" />
                  </el-select>
                </el-form-item>

                <el-form-item label="秘级" prop="securityLevel">
                  <el-select
                    v-model="measurementData.securityLevel"
                    placeholder="请选择秘级"
                    style="width: 100%"
                    disabled
                  >
                    <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="securityYears">
                  <el-input-number
                    v-model="measurementData.securityYears"
                    :min="1"
                    :max="30"
                    controls-position="right"
                    style="width: 100%"
                    disabled
                  />
                </el-form-item>


                <el-form-item label="任务依据" prop="taskBasis">
                  <el-input
                    v-model="measurementData.taskBasis"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入任务依据"
                    disabled
                  />
                </el-form-item>

                <el-form-item label="任务要求" prop="taskRequirements">
                  <el-input
                    v-model="measurementData.taskRequirements"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入任务要求"
                    disabled
                  />
                </el-form-item>

                <el-form-item label="蓝方干扰要求" prop="blueSideRequirements">
                  <el-input
                    v-model="measurementData.blueSideRequirements"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入蓝方干扰要求"
                    disabled
                  />
                </el-form-item>
              </el-form>
            </div>
            <!--方案配置区-->
            <el-tabs v-model="activeTab">
              <el-tab-pane v-if="currentRole === 'int'" label="干扰方案配置" name="interference">
              </el-tab-pane>
              <el-tab-pane v-if="currentRole === 'mea'" label="测量方案配置" name="meas">
              </el-tab-pane>
              <el-tab-pane v-if="currentRole === 'targ'" label="靶标方案配置" name="target">
              </el-tab-pane>
            </el-tabs>
            <!--干扰-->
            <div v-if="currentRole === 'int'">
              <!-- 干扰装备配置区域 -->
              <div class="card-config-section">
                <div class="section-header">
                  <h3>导弹一干扰装备保障配置</h3>
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleAddEquipment('missile2')"
                  >
                    添加保障配置目标
                  </el-button>
                </div>

                <div class="equipment-grid">
                  <MeasEquipmentConfig
                    v-for="(item, index) in interferenceConfigList"
                    :key="item.id"
                    :equipment="item"
                    :unit-options="unitOptions"
                    @update="handleUpdateEquipment"
                    @delete="handleDeleteEquipment"
                    class="equipment-card-item"
                  />
                </div>
              </div>
              <div class="card-config-section">
                <div class="section-header">
                  <h3>导弹二干扰装备保障配置</h3>
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleAddEquipment('missile2')"
                  >
                    添加保障配置目标
                  </el-button>
                </div>

                <div class="equipment-grid">
                  <MeasEquipmentConfig
                    v-for="(item, index) in interferenceConfigList"
                    :key="item.id"
                    :equipment="item"
                    :unit-options="unitOptions"
                    @update="handleUpdateEquipment"
                    @delete="handleDeleteEquipment"
                    class="equipment-card-item"
                  />
                </div>
              </div>
              <div class="card-config-section">
                <div class="section-header">
                  <h3>导弹三干扰装备保障配置</h3>
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleAddEquipment('missile2')"
                  >
                    添加保障配置目标
                  </el-button>
                </div>

                <div class="equipment-grid">
                  <MeasEquipmentConfig
                    v-for="(item, index) in interferenceConfigList"
                    :key="item.id"
                    :equipment="item"
                    :unit-options="unitOptions"
                    @update="handleUpdateEquipment"
                    @delete="handleDeleteEquipment"
                    class="equipment-card-item"
                  />
                </div>
              </div>
            </div>
            <!--测量-->
            <div v-if="currentRole === 'meas'">
              <div class="card-config-section">
                <div class="section-header">
                  <h3>导弹一测量装备保障配置</h3>
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleAddEquipment('missile2')"
                  >
                    添加保障配置目标
                  </el-button>
                </div>

                <div class="equipment-grid">
                  <MeasEquipmentConfig
                    v-for="(item, index) in MeasEquipmentConfigList"
                    :key="item.id"
                    :equipment="item"
                    :unit-options="unitOptions"
                    @update="handleUpdateEquipment"
                    @delete="handleDeleteEquipment"
                    class="equipment-card-item"
                  />
                </div>
              </div>
              <div class="card-config-section">
                <div class="section-header">
                  <h3>导弹二测量装备保障配置</h3>
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleAddEquipment('missile2')"
                  >
                    添加保障配置目标
                  </el-button>
                </div>

                <div class="equipment-grid">
                  <MeasEquipmentConfig
                    v-for="(item, index) in MeasEquipmentConfigList"
                    :key="item.id"
                    :equipment="item"
                    :unit-options="unitOptions"
                    @update="handleUpdateEquipment"
                    @delete="handleDeleteEquipment"
                    class="equipment-card-item"
                  />
                </div>
              </div>
              <div class="card-config-section">
                <div class="section-header">
                  <h3>导弹三测量装备保障配置</h3>
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleAddEquipment('missile2')"
                  >
                    添加保障配置目标
                  </el-button>
                </div>

                <div class="equipment-grid">
                  <MeasEquipmentConfig
                    v-for="(item, index) in MeasEquipmentConfigList"
                    :key="item.id"
                    :equipment="item"
                    :unit-options="unitOptions"
                    @update="handleUpdateEquipment"
                    @delete="handleDeleteEquipment"
                    class="equipment-card-item"
                  />
                </div>
              </div>
            </div>
            <!--靶标-->
            <div  v-if="currentRole === 'targ'">
              <div class="card-config-section">
                <div class="section-header">
                  <h3>导弹一靶标装备保障配置</h3>
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleAddEquipment('missile2')"
                  >
                    添加保障配置目标
                  </el-button>
                </div>

                <div class="equipment-grid">
                  <TargetConfig
                    v-for="(item, index) in attackedTargetList"
                    :key="item.id"
                    :target="item"
                    :unit-options="unitOptions"
                    @update="handleUpdateEquipment"
                    @delete="handleDeleteEquipment"
                    class="equipment-card-item"
                  />
                </div>
              </div>
              <div class="card-config-section">
                <div class="section-header">
                  <h3>导弹三靶标装备保障配置</h3>
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleAddEquipment('missile1')"
                  >
                    添加保障配置目标
                  </el-button>
                </div>

                <div class="equipment-grid">
                  <TargetConfig
                    v-for="(item, index) in attackedTargetList"
                    :key="item.id"
                    :target="item"
                    :unit-options="unitOptions"
                    @update="handleUpdateEquipment"
                    @delete="handleDeleteEquipment"
                    class="equipment-card-item"
                  />
                </div>
              </div>
              <div class="card-config-section">
                <div class="section-header">
                  <h3>导弹二靶标装备保障配置</h3>
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleAddEquipment('missile2')"
                  >
                    添加保障配置目标
                  </el-button>
                </div>

                <div class="equipment-grid">
                  <TargetConfig
                    v-for="(item, index) in attackedTargetList"
                    :key="item.id"
                    :target="item"
                    :unit-options="unitOptions"
                    @update="handleUpdateEquipment"
                    @delete="handleDeleteEquipment"
                    class="equipment-card-item"
                  />
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>

      <!-- 时序列表和时间线区域 -->
      <div class="right-section">
        <h3 class="section-title dark-title">干扰装置时序运行表</h3>
        <el-card class="dark-card time-sequence-card">
          <div class="time-sequence-header">
            <el-button type="primary" size="small" @click="showAddTimeSequenceDialog()">
              <i class="el-icon-plus"></i> 添加时序记录
            </el-button>
          </div>
          <!-- 时序表格 -->
          <el-table
            :data="sortedTimeSequenceList"
            border
            style="width: 100%; margin-top: 10px;"
            :header-cell-style="{background: '#2d3a4b', color: '#e0e6ed', borderColor: '#425163'}"
            :row-style="{background: '#1f2a38', color: '#e0e6ed', borderColor: '#425163'}"
          >
            <el-table-column
              prop="timePoint"
              label="时间点"
              width="120"
            >
              <template slot-scope="scope">
                <span v-if="!scope.row.editing">{{ scope.row.timePoint }}</span>
                <el-input
                  v-if="scope.row.editing"
                  v-model="scope.row.timePoint"
                  size="small"
                  placeholder="如T0-30分钟"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="equipmentName"
              label="设备名称"
              width="150"
            >
              <template slot-scope="scope">
                <span v-if="!scope.row.editing">{{ scope.row.equipmentName }}</span>
                <el-select
                  v-if="scope.row.editing"
                  v-model="scope.row.equipmentId"
                  size="small"
                  placeholder="选择设备"
                >
                  <el-option
                    v-for="equip in allEquipmentList"
                    :key="equip.id"
                    :label="equip.equipmentName"
                    :value="equip.id"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              prop="operation"
              label="操作内容"
            >
              <template slot-scope="scope">
                <span v-if="!scope.row.editing">{{ scope.row.operation }}</span>
                <el-input
                  v-if="scope.row.editing"
                  v-model="scope.row.operation"
                  size="small"
                  placeholder="输入操作内容"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
            >
              <template slot-scope="scope">
                <el-button
                  v-if="!scope.row.editing"
                  size="mini"
                  type="text"
                  @click="handleEditTimeSequence(scope.$index, scope.row)"
                >编辑</el-button>
                <el-button
                  v-if="scope.row.editing"
                  size="mini"
                  type="text"
                  @click="handleSaveTimeSequence(scope.$index, scope.row)"
                >保存</el-button>
                <el-button
                  size="mini"
                  type="text"
                  @click="handleDeleteTimeSequence(scope.row.id)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 时间线展示 -->
          <div class="timeline-container">
            <h4 class="timeline-title">时序时间线</h4>
            <el-timeline>
              <el-timeline-item
                v-for="(item, index) in sortedTimeSequenceList"
                :key="item.id"
                :timestamp="item.timePoint"
                :icon="getTimelineIcon(item.status)"
                :type="getStatusTagType(item.status)"
                placement="top"
              >
                <div class="timeline-content-title">{{ item.equipmentName }}</div>
                <div class="timeline-content-desc">{{ item.operation }}</div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 添加时序记录对话框 -->
    <el-dialog
      title="添加时序记录"
      :visible.sync="addTimeSequenceVisible"
      width="500px"
    >
      <el-form
        :model="newTimeSequence"
        ref="timeSequenceForm"
        label-width="100px"
        class="dark-form"
      >
        <el-form-item label="时间点" prop="timePoint">
          <el-input
            v-model="newTimeSequence.timePoint"
            placeholder="如T0-30分钟"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备名称" prop="equipmentId">
          <el-select
            v-model="newTimeSequence.equipmentId"
            placeholder="选择设备"
          >
            <el-option
              v-for="equip in allEquipmentList"
              :key="equip.id"
              :label="equip.equipmentName"
              :value="equip.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作内容" prop="operation">
          <el-input
            v-model="newTimeSequence.operation"
            type="textarea"
            :rows="3"
            placeholder="输入操作内容"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addTimeSequenceVisible = false">取消</el-button>
        <el-button type="primary" @click="saveNewTimeSequence">确定</el-button>
      </div>
    </el-dialog>
  </GlobalLayout>
</template>

<script>
import E from 'wangeditor'
import GlobalLayout from '@/components/Components/GlobalLayout.vue'
import InterferenceEquipmentConfig from '@/views/command/taskEdit/components/InterferenceEquipmentConfig.vue'

export default {
  components: { GlobalLayout, InterferenceEquipmentConfig },
  data() {
    // 校验结束时间必须大于开始时间
    const validateEndTime = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请选择结束时间'))
      } else if (new Date(value) <= new Date(this.measurementData.startTime)) {
        callback(new Error('结束时间必须大于开始时间'))
      } else {
        callback()
      }
    }

    return {
      currentRole:'',
      activeTab:this.currentRole,
      editor: null,
      adjustmentContent: '',
      measurementData: {
        schemeName: '2023年度东海靶场导弹干扰保障方案',
        taskName: '东风-17导弹飞行轨迹干扰任务',
        taskCode: 'DF17-2023-001',
        startTime: '2023-06-15 08:00:00',
        endTime: '2023-06-15 18:00:00',
        status: '进行中',
        securityLevel: '机密',
        securityYears: 10,
        taskBasis: '根据《XXXXX试验计划》和《XXXX靶场干扰保障要求》开展本次干扰任务',
        taskRequirements: '1. 全程跟踪dd飞行轨迹\n2. 记录关键节点数据\n3. 确保干扰精度误差不超过0.5%\n4. 实时传输干扰数据至指挥中心',
        blueSideRequirements: '1. 提供dd发射前30分钟预警\n2. 确保干扰设备不受电子干扰\n3. 提供靶场安全区域坐标\n4. 配合完成干扰数据校验'
      },
      // 分导弹类型存储装备列表
      missile1EquipmentList: [
        {
          id: "missile1-equip-001",
          objective: "测试目标001",
          equipmentName: "角反装置",
          longitude: "116.404",
          latitude: "39.915",
          mission: "20KM",
          altitude: "T0+15分钟",
          secretLevel: "秘密",
          status: "有效",
          launchPosition: "发射架位1",
          task: "使用角反装置干扰目标",
          isEditing: false
        }
      ],
      missile2EquipmentList: [
        {
          id: "missile2-equip-001",
          objective: "边境监测任务",
          equipmentName: "发烟罐",
          longitude: "121.473",
          latitude: "31.230",
          mission: "20KM",
          altitude: "T0+15分钟",
          secretLevel: "机密",
          status: "待审核",
          launchPosition: "发射架位1",
          task: "使用发烟罐干扰目标",
          isEditing: false
        }
      ],
      missile3EquipmentList: [
        {
          id: "missile3-equip-001",
          objective: "海上巡逻监测",
          equipmentName: "箔条干扰装置",
          longitude: "122.058",
          latitude: "37.496",
          mission: "20KM",
          altitude: "T0+15分钟",
          secretLevel: "绝密",
          status: "有效",
          launchPosition: "发射架位1",
          task: "使用箔条干扰装置干扰信号",
          isEditing: false
        }
      ],
      //干扰
      interferenceConfigList: [
        {
          id: "equip-001",
          objective: "测试目标001", // 目标
          equipmentName: "角反装置", // 装备名称
          longitude: "116.404", // 经度
          latitude: "39.915", // 纬度
          mission: "20KM", // 任务
          altitude: "T0+15分钟", // 离地高度(米)
          secretLevel: "秘密",
          status: "有效",
          launchPosition:"发射架位1",
          task:"使用角反装置干扰目标"
        },
        {
          id: "equip-002",
          objective: "边境监测任务", // 目标
          equipmentName: "发烟罐", // 装备名称
          longitude: "121.473", // 经度
          latitude: "31.230", // 纬度
          mission: "20KM", // 任务
          altitude: "T0+15分钟", // 离地高度(米)
          secretLevel: "机密",
          status: "待审核",
          launchPosition:"发射架位1",
          task:"使用发烟罐干扰目标"
        },
        {
          id: "equip-003",
          objective: "海上巡逻监测", // 目标
          equipmentName: "箔条干扰装置", // 装备名称
          longitude: "122.058", // 经度
          latitude: "37.496", // 纬度
          mission: "20KM", // 任务
          altitude: "T0+15分钟", // 离地高度(米)
          secretLevel: "绝密",
          status: "有效",
          launchPosition:"发射架位1",
          task:"使用箔条干扰装置干扰信号"
        }
      ],
      //靶标
      attackedTargetList:  [
        {
          id: "target-001",
          targetName: "海上移动靶标-A1",
          longitude: "122.058",
          latitude: "37.496",
          mission: "用于海上移动目标射击训练\n1. 每日检查靶标状态\n2. 实时监控靶标位置",
          secretLevel: "秘密",
          status: "有效"
        },
        {
          id: "target-002",
          targetName: "固定靶标-北区",
          longitude: "116.404",
          latitude: "39.915",
          mission: "基础射击训练使用\n1. 每周检查靶标状态\n2. 设置安全警戒区",
          secretLevel: "机密",
          status: "待审核"
        },
        {
          id: "target-003",
          targetName: "电子模拟靶场系统",
          longitude: "121.473",
          latitude: "31.230",
          mission: "提供全天候电子靶标训练\n1. 定期系统维护\n2. 备用电源保障",
          secretLevel: "秘密",
          status: "有效"
        }
      ],
      //测量
      MeasEquipmentConfigList: [
        {
          id: "equip-001",
          objective: "测试目标001", // 目标
          equipmentName: "雷达探测仪-X1", // 装备名称
          longitude: "116.404", // 经度
          latitude: "39.915", // 纬度
          mission: "执行区域探测任务", // 任务
          altitude: "1500", // 离地高度(米)
          secretLevel: "秘密",
          status: "有效"
        },
        {
          id: "equip-002",
          objective: "边境监测任务", // 目标
          equipmentName: "红外热像仪-Pro", // 装备名称
          longitude: "121.473", // 经度
          latitude: "31.230", // 纬度
          mission: "24小时边境热源监测", // 任务
          altitude: "800", // 离地高度(米)
          secretLevel: "机密",
          status: "待审核"
        },
        {
          id: "equip-003",
          objective: "海上巡逻监测", // 目标
          equipmentName: "声呐探测系统-S2", // 装备名称
          longitude: "122.058", // 经度
          latitude: "37.496", // 纬度
          mission: "海上目标探测与追踪", // 任务
          altitude: "海平面下50米", // 离地高度(米)
          secretLevel: "绝密",
          status: "有效"
        }
      ],
      //
      unitOptions: [
        {value: "unit1", label: "第一测量队"},
        {value: "unit2", label: "第二测量队"},
        {value: "unit3", label: "第三测量队"},
      ],
      formRules: {
        schemeName: [
          {required: true, message: '请输入测量保障方案名称', trigger: 'blur'},
          {min: 2, max: 50, message: '长度在2到50个字符', trigger: 'blur'}
        ],
        taskName: [
          {required: true, message: '请输入任务名称', trigger: 'blur'},
          {min: 2, max: 30, message: '长度在2到30个字符', trigger: 'blur'}
        ],
        taskCode: [
          {required: true, message: '请输入任务代号', trigger: 'blur'}
        ],
        startTime: [
          {required: true, message: '请选择开始时间', trigger: 'change'}
        ],
        endTime: [
          {required: true, message: '请选择结束时间', trigger: 'change'},
          {validator: validateEndTime, trigger: 'change'}
        ],
        status: [
          {required: true, message: '请选择状态', trigger: 'change'}
        ],
        securityLevel: [
          {required: true, message: '请选择秘级', trigger: 'change'}
        ],
        securityYears: [
          {required: true, message: '请输入秘级年限', trigger: 'blur'},
          {type: 'number', min: 1, max: 30, message: '年限必须在1-30之间', trigger: 'blur'}
        ],
        taskBasis: [
          {required: true, message: '请输入任务依据', trigger: 'blur'}
        ],
        taskRequirements: [
          {required: true, message: '请输入任务要求', trigger: 'blur'}
        ],
        blueSideRequirements: [
          {required: true, message: '请输入蓝方干扰要求', trigger: 'blur'}
        ]
      },
      // 时序相关数据
      timeSequenceList: [
        {
          id: "time-001",
          timePoint: "T0-30分钟",
          equipmentId: "equip-001",
          equipmentName: "角反装置",
          status: "准备中",
          operation: "设备启动检查，确认电源供应正常",
          editing: false
        },
        {
          id: "time-002",
          timePoint: "T0-15分钟",
          equipmentId: "equip-002",
          equipmentName: "发烟罐",
          status: "运行中",
          operation: "开始释放烟雾，形成干扰屏障",
          editing: false
        },
        {
          id: "time-003",
          timePoint: "T0-5分钟",
          equipmentId: "equip-003",
          equipmentName: "箔条干扰装置",
          status: "待审核",
          operation: "部署箔条干扰弹，准备电子干扰",
          editing: false
        }
      ],
      addTimeSequenceVisible: false,
      newTimeSequence: {
        timePoint: '',
        equipmentId: '',
        operation: ''
      }
    }
  },
  computed: {
    sortedTimeSequenceList() {
      // 按时间点排序
      return [...this.timeSequenceList].sort((a, b) => {
        return a.timePoint.localeCompare(b.timePoint);
      });
    },
    allEquipmentList() {
      // 合并所有装备列表
      return [
        ...this.missile1EquipmentList,
        ...this.missile2EquipmentList,
        ...this.missile3EquipmentList
      ];
    }
  },
  methods: {
    // 初始化富文本编辑器
    initEditor() {
      this.editor = new E('#editor-toolbar-container', '#editor-container');
      // 可以根据需要配置编辑器
      this.editor.config.menus = [
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        'link', // 插入链接
        'list', // 列表
        'justify', // 对齐方式
        'quote', // 引用
        'emoticon', // 表情
        'image', // 插入图片
        'table', // 表格
        'code', // 代码
        'undo', // 撤销
        'redo' // 重做
      ];
      this.editor.create();
    },
    // 关闭页面
    close() {
      this.$router.go(-1);
    },
    // 提交表单
    submitForm() {
      this.$refs.measurementForm.validate((valid) => {
        if (valid) {
          // 获取编辑器内容
          const content = this.editor.txt.html();
          // 构建提交数据
          const submitData = {
            ...this.measurementData,
            adjustmentContent: content,
            missile1EquipmentList: this.missile1EquipmentList,
            missile2EquipmentList: this.missile2EquipmentList,
            missile3EquipmentList: this.missile3EquipmentList,
            timeSequenceList: this.timeSequenceList
          };

          // 这里添加实际提交逻辑
          console.log('提交数据:', submitData);
          this.$message.success('保存成功');
        } else {
          this.$message.error('表单验证失败，请检查填写内容');
          return false;
        }
      });
    },
    // 添加装备
    handleAddEquipment(type) {
      const newId = `${type}-equip-${Date.now()}`;
      const newEquip = {
        id: newId,
        objective: `新目标-${newId.slice(-4)}`,
        equipmentName: `新干扰设备-${newId.slice(-4)}`,
        longitude: '',
        latitude: '',
        mission: '',
        altitude: '',
        secretLevel: '内部',
        status: '待审核',
        launchPosition: '',
        task: '',
        isEditing: true
      };

      this[`${type}EquipmentList`].push(newEquip);
    },
    // 更新装备
    handleUpdateEquipment(type, index, data) {
      this[`${type}EquipmentList`].splice(index, 1, data);
    },
    // 删除装备
    handleDeleteEquipment(type, id) {
      this[`${type}EquipmentList`] = this[`${type}EquipmentList`].filter(item => item.id !== id);
      this.$message.success('装备已删除');
    },
    // 显示添加时序记录对话框
    showAddTimeSequenceDialog() {
      this.addTimeSequenceVisible = true;
      this.newTimeSequence = {
        timePoint: '',
        equipmentId: '',
        status: '',
        operation: ''
      };
    },
    // 保存新的时序记录
    saveNewTimeSequence() {
      if (!this.newTimeSequence.timePoint) {
        this.$message.error('请输入时间点');
        return;
      }
      if (!this.newTimeSequence.equipmentId) {
        this.$message.error('请选择设备');
        return;
      }
      if (!this.newTimeSequence.status) {
        this.$message.error('请选择运行状态');
        return;
      }
      if (!this.newTimeSequence.operation) {
        this.$message.error('请输入操作内容');
        return;
      }

      // 查找设备名称
      const equip = this.allEquipmentList.find(item => item.id === this.newTimeSequence.equipmentId);
      this.timeSequenceList.push({
        id: `time-${Date.now()}`,
        ...this.newTimeSequence,
        equipmentName: equip ? equip.equipmentName : '',
        editing: false
      });

      this.addTimeSequenceVisible = false;
      this.$message.success('时序记录添加成功');
    },
    // 编辑时序记录
    handleEditTimeSequence(index, row) {
      this.$set(row, 'editing', true);
    },
    // 保存时序记录编辑
    handleSaveTimeSequence(index, row) {
      if (!row.timePoint) {
        this.$message.error('请输入时间点');
        return;
      }
      if (!row.equipmentId) {
        this.$message.error('请选择设备');
        return;
      }
      if (!row.status) {
        this.$message.error('请选择运行状态');
        return;
      }
      if (!row.operation) {
        this.$message.error('请输入操作内容');
        return;
      }

      // 更新设备名称
      const equip = this.allEquipmentList.find(item => item.id === row.equipmentId);
      if (equip) {
        this.$set(row, 'equipmentName', equip.equipmentName);
      }

      this.$set(row, 'editing', false);
      this.$message.success('时序记录已更新');
    },
    // 删除时序记录
    handleDeleteTimeSequence(id) {
      this.timeSequenceList = this.timeSequenceList.filter(item => item.id !== id);
      this.$message.success('时序记录已删除');
    },
    // 获取状态标签类型
    getStatusTagType(status) {
      switch(status) {
        case '有效':
        case '运行中':
          return 'success';
        case '待审核':
        case '准备中':
          return 'warning';
        case '已失效':
        case '故障':
          return 'danger';
        case '已完成':
          return 'info';
        case '未启动':
          return 'default';
        default:
          return 'default';
      }
    },
    // 获取时间线图标
    getTimelineIcon(status) {
      switch(status) {
        case '运行中':
          return 'el-icon-loading';
        case '已完成':
          return 'el-icon-check';
        case '故障':
          return 'el-icon-error';
        case '准备中':
          return 'el-icon-time';
        case '未启动':
          return 'el-icon-circle-close';
        default:
          return 'el-icon-info';
      }
    }
  },
  mounted() {
    this.$nextTick(() =>{
      this.currentRole = this.$route.query.planType;
      this.activeTab = this.currentRole;
      console.log("是否显示编辑按钮：", this.currentRole)
    })
    // 初始化编辑器
    this.initEditor();
  },
  beforeDestroy() {
    // 销毁编辑器
    if (this.editor) {
      this.editor.destroy();
    }
  }
}
</script>

<style scoped>
::v-deep .el-tabs__item {
  color: white;
}
.main-container {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 20px;
  height: calc(100vh - 120px);
  padding: 20px;
  box-sizing: border-box;
}

.left-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  overflow-y: auto;
}

.right-section {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.time-sequence-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.time-sequence-header {
  padding: 10px 15px;
  border-bottom: 1px solid #425163;
}

.el-table {
  flex: 0 0 40%;
  overflow-y: auto;
}
::v-deep .el-table .cell{
  color: white !important;
}
/* 时间线样式 - 无卡片展示 */
.timeline-container {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  border-top: 1px solid #425163;
  margin-top: 10px;
  background-color: #1a2332;
}

.timeline-title {
  color: #e0e6ed;
  margin-bottom: 25px;
  padding-bottom: 10px;
  border-bottom: 1px solid #425163;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.timeline-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #409eff;
  margin-right: 8px;
  border-radius: 2px;
}

::v-deep .el-timeline {
  padding-left: 24px;
  position: relative;
}

/* 时间线主轴线 */
::v-deep .el-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px;
  width: 2px;
  background: linear-gradient(to bottom,
  #425163 0%,
  #409eff 50%,
  #425163 100%);
}

::v-deep .el-timeline-item {
  margin-bottom: 30px;
  position: relative;
  padding-bottom: 10px;
}

::v-deep .el-timeline-item:last-child {
  margin-bottom: 10px;
  padding-bottom: 0;
}

/* 时间点样式 */
::v-deep .el-timeline-item__timestamp {
  color: #409eff;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  padding-left: 8px;
}

/* 时间线节点样式 */
::v-deep .el-timeline-item__node {
  width: 20px;
  height: 20px;
  left: -24px;
  background-color: #2d3a4b;
  border-color: #409eff;
  border-width: 2px;
  transition: all 0.3s;
}

::v-deep .el-timeline-item:hover .el-timeline-item__node {
  transform: scale(1.2);
  box-shadow: 0 0 10px rgba(64, 158, 255, 0.5);
}

::v-deep .el-timeline-item__node--success {
  background-color: #00b42a;
  border-color: #00b42a;
}

::v-deep .el-timeline-item__node--warning {
  background-color: #ff7d00;
  border-color: #ff7d00;
}

::v-deep .el-timeline-item__node--danger {
  background-color: #f53f3f;
  border-color: #f53f3f;
}

::v-deep .el-timeline-item__node--info {
  background-color: #86909c;
  border-color: #86909c;
}

/* 时间线内容样式 */
::v-deep .el-timeline-item__content {
  color: #e0e6ed;
  padding: 8px 12px;
  border-left: 2px solid #425163;
  margin-left: 10px;
  transition: all 0.3s;
}

::v-deep .el-timeline-item:hover .el-timeline-item__content {
  border-left-color: #409eff;
  padding-left: 16px;
}

/* 内容标题和描述样式 */
.timeline-content-title {
  color: #ffffff;
  font-weight: 500;
  margin-bottom: 5px;
  font-size: 14px;
}

.timeline-content-desc {
  color: #c9cdcf;
  font-size: 13px;
  line-height: 1.6;
}

.status-label {
  margin-top: 8px;
  display: inline-block;
}

/* 添加时序记录弹窗样式优化 */
::v-deep .el-dialog {
  background-color: #2d3a4b;
  border: 1px solid #425163;
  border-radius: 6px;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
}

::v-deep .el-dialog__header {
  border-bottom: 1px solid #425163;
  padding: 15px 20px;
}

::v-deep .el-dialog__title {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
}

::v-deep .el-dialog__body {
  padding: 20px;
  color: #e0e6ed;
  max-height: 60vh;
  overflow-y: auto;
}

::v-deep .el-dialog__footer {
  border-top: 1px solid #425163;
  padding: 15px 20px;
  background-color: #273344;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* 弹窗内表单样式 */
::v-deep .el-dialog .el-form-item {
  margin-bottom: 18px;
}

::v-deep .el-dialog .el-form-item__label {
  color: #8796ad;
  font-weight: 400;
}

::v-deep .el-dialog .el-input__inner,
::v-deep .el-dialog .el-textarea__inner,
::v-deep .el-dialog .el-select .el-input__inner {
  background-color: #1f2a38;
  border: 1px solid #425163;
  color: #e0e6ed;
  transition: all 0.3s;
}

::v-deep .el-dialog .el-input__inner:focus,
::v-deep .el-dialog .el-textarea__inner:focus,
::v-deep .el-dialog .el-select .el-input__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 弹窗内下拉菜单样式 */
::v-deep .el-dialog .el-select-dropdown {
  background-color: #2d3a4b;
  border: 1px solid #425163;
}

::v-deep .el-dialog .el-select-dropdown__item {
  color: #e0e6ed;
  background-color: #2d3a4b;
}

::v-deep .el-dialog .el-select-dropdown__item:hover {
  background-color: #384860;
}

::v-deep .el-dialog .el-select-dropdown__item.selected {
  background-color: #409eff1a;
  color: #409eff;
}

/* 弹窗按钮样式 */
::v-deep .el-dialog .el-button {
  border-radius: 4px;
  transition: all 0.2s;
}

::v-deep .el-dialog .el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
}

::v-deep .el-dialog .el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

::v-deep .el-dialog .el-button:not(.el-button--primary) {
  background-color: #1f2a38;
  border-color: #425163;
  color: #e0e6ed;
}

::v-deep .el-dialog .el-button:not(.el-button--primary):hover {
  background-color: #384860;
  border-color: #556680;
}

/* 弹窗关闭按钮 */
::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: #8796ad;
  transition: all 0.2s;
}

::v-deep .el-dialog__headerbtn .el-dialog__close:hover {
  color: #ffffff;
  background-color: #384860;
  border-radius: 50%;
}

.section-title {
  margin: 0 0 15px 0;
  font-size: 18px;
  color: #ffffff;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.task-editor-section {
  flex: 1;
}

.editor-card {
  height: 100%;
}

.editor-content {
  height: calc(100% - 60px);
  overflow-y: auto;
  padding: 20px;
}

/* 暗色主题样式 */
.dark-card {
  background-color: #2d3a4b;
  border: 1px solid #425163;
  color: #e0e6ed;
  overflow: auto !important;
}

.dark-title {
  color: #ffffff;
}

.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,
.dark-form ::v-deep .el-input-number__input {
  background-color: #1f2a38;
  border: 1px solid #425163;
  color: #e0e6ed;
}

.task-detail-section {
  margin-bottom: 30px;
  padding: 15px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.equipment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.equipment-card-item {
  transition: all 0.3s ease;
}

.equipment-card-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.task-adjustment-section {
  margin-top: 20px;
  margin-bottom: 30px;
}

.editor-toolbar {
  border: 1px solid #425163;
  border-bottom: none;
  background-color: #2d3a4b;
}

.editor-main {
  height: 300px;
  border: 1px solid #425163;
  background-color: #1f2a38;
  color: #e0e6ed;
}

.editor-actions {
  margin-top: 15px;
  text-align: right;
}

.form-section-title {
  color: #409eff;
  margin: 20px 0 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #425163;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .main-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .right-section {
    margin-top: 20px;
    height: 800px;
  }

  .el-table {
    flex: 0 0 30%;
  }

  .equipment-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 992px) {
  .equipment-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (max-width: 768px) {
  .equipment-grid {
    grid-template-columns: 1fr;
  }
}

</style>