0814

src/components/GlobalComponents/ImporTaskCard.vue

@@ -159,7 +159,7 @@
 
     <div class="plan-actions">
       <el-button size="mini" class="dark-button" @click="editTask">
-        任务编辑
+        任务详情
       </el-button>
       <el-button size="mini" class="dark-button" @click="chooseTask">
         选择任务
@@ -276,7 +276,7 @@
         this.$emit("select", this.plan);
       },
       editTask() {
-        this.$emit("edit", this.plan);
+        this.$emit("view-detail", this.plan);
       },
       chooseTask() {
         this.$emit("choose-task", this.plan);

src/components/GlobalComponents/MeasEquipmentConfig.vue

@@ -160,7 +160,6 @@
       </template>
       <template v-else>
         <el-button
-          v-if="isShow"
           size="mini"
           type="primary"
           class="dark-button"
@@ -169,7 +168,6 @@
           编辑
         </el-button>
         <el-button
-          v-if="isShow"
           size="mini"
           class="dark-button"
           @click="handleDelete"
@@ -182,314 +180,314 @@
 </template>
 
 <script>
-  export default {
-    name: "MeasEquipmentConfig",
-    props: {
-      equipment: {
-        type: Object,
-        required: true,
-        default: () => ({
-          id: "",
-          objective: "", // 目标
-          equipmentName: "", // 装备名称
-          longitude: "", // 经度
-          latitude: "", // 纬度
-          mission: "", // 任务
-          altitude: "", // 离地高度
-          secretLevel: "秘密",
-          status: "有效",
-        }),
-      },
-      isShow: {
-        type: Boolean,
-        default: true,
-      },
-      unitOptions: {
-        type: Array,
-        default: () => [],
+export default {
+  name: "MeasEquipmentConfig",
+  props: {
+    equipment: {
+      type: Object,
+      required: true,
+      default: () => ({
+        id: "",
+        objective: "", // 目标
+        equipmentName: "", // 装备名称
+        longitude: "", // 经度
+        latitude: "", // 纬度
+        mission: "", // 任务
+        altitude: "", // 离地高度
+        secretLevel: "秘密",
+        status: "有效",
+      }),
+    },
+    isShow: {
+      type: Boolean,
+      default: true,
+    },
+    unitOptions: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      editing: false,
+      editData: {
+        equipmentName: this.equipment.equipmentName,
+        longitude: this.equipment.longitude,
+        latitude: this.equipment.latitude,
+        mission: this.equipment.mission,
+        altitude: this.equipment.altitude,
       },
+      isPlanNameOverflow: false,
+      isEquipmentNameOverflow: false,
+      isLongitudeOverflow: false,
+      isLatitudeOverflow: false,
+      isMissionOverflow: false,
+      isAltitudeOverflow: false,
+    };
+  },
+  computed: {
+    cardClass() {
+      return {
+        "top-secret": this.equipment.secretLevel === "绝密",
+        secret: this.equipment.secretLevel === "秘密",
+        confidential: this.equipment.secretLevel === "机密",
+        invalid: this.equipment.status === "已失效",
+      };
     },
-    data() {
+    secretTagStyle() {
+      const colors = {
+        绝密: "#c45656",
+        机密: "#b88230",
+        秘密: "#3475b5",
+      };
       return {
-        editing: false,
-        editData: {
-          equipmentName: this.equipment.equipmentName,
-          longitude: this.equipment.longitude,
-          latitude: this.equipment.latitude,
-          mission: this.equipment.mission,
-          altitude: this.equipment.altitude,
-        },
-        isPlanNameOverflow: false,
-        isEquipmentNameOverflow: false,
-        isLongitudeOverflow: false,
-        isLatitudeOverflow: false,
-        isMissionOverflow: false,
-        isAltitudeOverflow: false,
+        backgroundColor: colors[this.equipment.secretLevel] || "#6b7280",
       };
     },
-    computed: {
-      cardClass() {
-        return {
-          "top-secret": this.equipment.secretLevel === "绝密",
-          secret: this.equipment.secretLevel === "秘密",
-          confidential: this.equipment.secretLevel === "机密",
-          invalid: this.equipment.status === "已失效",
-        };
-      },
-      secretTagStyle() {
-        const colors = {
-          绝密: "#c45656",
-          机密: "#b88230",
-          秘密: "#3475b5",
-        };
-        return {
-          backgroundColor: colors[this.equipment.secretLevel] || "#6b7280",
-        };
-      },
-      statusTagType() {
-        const statusMap = {
-          有效: "success",
-          待审核: "warning",
-          已失效: "danger",
-          草稿: "info",
-        };
-        return statusMap[this.equipment.status] || "info";
-      },
+    statusTagType() {
+      const statusMap = {
+        有效: "success",
+        待审核: "warning",
+        已失效: "danger",
+        草稿: "info",
+      };
+      return statusMap[this.equipment.status] || "info";
     },
-    mounted() {
-      this.checkOverflows();
+  },
+  mounted() {
+    this.checkOverflows();
+  },
+  updated() {
+    this.checkOverflows();
+  },
+  methods: {
+    checkOverflows() {
+      this.isPlanNameOverflow = this.checkElementOverflow(
+        this.$refs.planNameRef
+      );
+      this.isEquipmentNameOverflow = this.checkElementOverflow(
+        this.$refs.equipmentNameRef
+      );
+      this.isLongitudeOverflow = this.checkElementOverflow(
+        this.$refs.longitudeRef
+      );
+      this.isLatitudeOverflow = this.checkElementOverflow(
+        this.$refs.latitudeRef
+      );
+      this.isMissionOverflow = this.checkElementOverflow(
+        this.$refs.missionRef
+      );
+      this.isAltitudeOverflow = this.checkElementOverflow(
+        this.$refs.altitudeRef
+      );
     },
-    updated() {
-      this.checkOverflows();
+    checkElementOverflow(element) {
+      return element ? element.scrollWidth > element.clientWidth : false;
     },
-    methods: {
-      checkOverflows() {
-        this.isPlanNameOverflow = this.checkElementOverflow(
-          this.$refs.planNameRef
-        );
-        this.isEquipmentNameOverflow = this.checkElementOverflow(
-          this.$refs.equipmentNameRef
-        );
-        this.isLongitudeOverflow = this.checkElementOverflow(
-          this.$refs.longitudeRef
-        );
-        this.isLatitudeOverflow = this.checkElementOverflow(
-          this.$refs.latitudeRef
-        );
-        this.isMissionOverflow = this.checkElementOverflow(
-          this.$refs.missionRef
-        );
-        this.isAltitudeOverflow = this.checkElementOverflow(
-          this.$refs.altitudeRef
-        );
-      },
-      checkElementOverflow(element) {
-        return element ? element.scrollWidth > element.clientWidth : false;
-      },
-      handleEdit() {
-        this.editData = {
-          equipmentName: this.equipment.equipmentName,
-          longitude: this.equipment.longitude,
-          latitude: this.equipment.latitude,
-          mission: this.equipment.mission,
-          altitude: this.equipment.altitude,
-        };
-        this.editing = true;
-      },
-      handleSave() {
-        this.$emit("update", this.editData);
-        this.editing = false;
-      },
-      handleCancel() {
-        this.editing = false;
-      },
-      handleDelete() {
-        this.$emit("delete", this.equipment.id);
-      },
+    handleEdit() {
+      this.editData = {
+        equipmentName: this.equipment.equipmentName,
+        longitude: this.equipment.longitude,
+        latitude: this.equipment.latitude,
+        mission: this.equipment.mission,
+        altitude: this.equipment.altitude,
+      };
+      this.editing = true;
+    },
+    handleSave() {
+      this.$emit("update", this.editData);
+      this.editing = false;
+    },
+    handleCancel() {
+      this.editing = false;
     },
-  };
+    handleDelete() {
+      this.$emit("delete", this.equipment.id);
+    },
+  },
+};
 </script>
 
 <style scoped>
-  /* 变量定义 */
-  :root {
-    --tag-width: 60px;
-    --header-padding: 0 10px;
-    --card-border-radius: 4px;
-  }
-
-  .target-plan-card {
-    margin-bottom: 15px;
-    transition: all 0.3s ease;
-    border-radius: var(--card-border-radius);
-    border: 1px solid #425163;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .target-plan-card:hover {
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
-  }
-
-  /* 头部布局重构 */
+/* 变量定义 */
+:root {
+  --tag-width: 60px;
+  --header-padding: 0 10px;
+  --card-border-radius: 4px;
+}
+
+.target-plan-card {
+  margin-bottom: 15px;
+  transition: all 0.3s ease;
+  border-radius: var(--card-border-radius);
+  border: 1px solid #425163;
+  display: flex;
+  flex-direction: column;
+}
+
+.target-plan-card:hover {
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
+}
+
+/* 头部布局重构 */
+.plan-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+  width: 100%;
+}
+
+.plan-secret-tag,
+.plan-status {
+  width: var(--tag-width);
+  text-align: center;
+  line-height: inherit;
+  padding: 4px 8px;
+  flex-shrink: 0;
+  border-radius: 3px;
+  font-size: 12px;
+}
+
+.plan-title-container {
+  flex: 1;
+  min-width: 0;
+  padding: var(--header-padding);
+}
+
+.plan-name {
+  margin: 0;
+  font-size: 16px;
+  color: #e0e6ed;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.plan-name .el-input {
+  width: 100%;
+}
+
+.plan-content {
+  margin-bottom: 12px;
+  flex: 1;
+}
+
+.plan-main-info {
+  margin-bottom: 10px;
+}
+
+.plan-additional-info {
+  padding-top: 10px;
+  border-top: 1px dashed #425163;
+}
+
+.info-row {
+  display: flex;
+  margin-bottom: 8px;
+  font-size: 13px;
+  align-items: center;
+}
+
+.dark-label {
+  color: #8796ad;
+  width: 70px;
+  display: inline-block;
+  flex-shrink: 0;
+}
+
+.dark-value {
+  color: #e0e6ed;
+  flex: 1;
+}
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  max-width: 100%;
+}
+
+.plan-actions {
+  display: flex;
+  justify-content: space-between;
+}
+
+.dark-button {
+  background-color: #425163;
+  border-color: #5a6b7d;
+  color: #e0e6ed;
+}
+
+.dark-button:hover {
+  background-color: #5a6b7d;
+  border-color: #677a8c;
+  color: #ffffff;
+}
+
+/* 不同秘级的边框颜色 */
+.top-secret {
+  border-top: 3px solid #c45656;
+}
+
+.secret {
+  border-top: 3px solid #3475b5;
+}
+
+.confidential {
+  border-top: 3px solid #b88230;
+}
+
+/* 失效状态的样式 */
+.invalid {
+  opacity: 0.7;
+  position: relative;
+}
+
+.invalid::after {
+  content: "已失效";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(-15deg);
+  font-size: 24px;
+  font-weight: bold;
+  color: #f56c6c;
+  background-color: rgba(0, 0, 0, 0.7);
+  padding: 5px 15px;
+  border-radius: 4px;
+  z-index: 1;
+}
+
+.el-input,
+.el-select,
+.el-input-number,
+.el-textarea {
+  flex: 1;
+}
+
+.el-textarea {
+  margin-top: 5px;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
   .plan-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 12px;
-    width: 100%;
+    flex-wrap: wrap;
   }
 
   .plan-secret-tag,
   .plan-status {
-    width: var(--tag-width);
-    text-align: center;
-    line-height: inherit;
-    padding: 4px 8px;
-    flex-shrink: 0;
-    border-radius: 3px;
-    font-size: 12px;
+    width: 100%;
+    margin-bottom: 5px;
   }
 
   .plan-title-container {
-    flex: 1;
-    min-width: 0;
-    padding: var(--header-padding);
-  }
-
-  .plan-name {
-    margin: 0;
-    font-size: 16px;
-    color: #e0e6ed;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    text-align: center;
-  }
-
-  .plan-name .el-input {
     width: 100%;
-  }
-
-  .plan-content {
-    margin-bottom: 12px;
-    flex: 1;
-  }
-
-  .plan-main-info {
+    order: -1;
     margin-bottom: 10px;
   }
-
-  .plan-additional-info {
-    padding-top: 10px;
-    border-top: 1px dashed #425163;
-  }
-
-  .info-row {
-    display: flex;
-    margin-bottom: 8px;
-    font-size: 13px;
-    align-items: center;
-  }
-
-  .dark-label {
-    color: #8796ad;
-    width: 70px;
-    display: inline-block;
-    flex-shrink: 0;
-  }
-
-  .dark-value {
-    color: #e0e6ed;
-    flex: 1;
-  }
-
-  .text-ellipsis {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    display: inline-block;
-    max-width: 100%;
-  }
-
-  .plan-actions {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .dark-button {
-    background-color: #425163;
-    border-color: #5a6b7d;
-    color: #e0e6ed;
-  }
-
-  .dark-button:hover {
-    background-color: #5a6b7d;
-    border-color: #677a8c;
-    color: #ffffff;
-  }
-
-  /* 不同秘级的边框颜色 */
-  .top-secret {
-    border-top: 3px solid #c45656;
-  }
-
-  .secret {
-    border-top: 3px solid #3475b5;
-  }
-
-  .confidential {
-    border-top: 3px solid #b88230;
-  }
-
-  /* 失效状态的样式 */
-  .invalid {
-    opacity: 0.7;
-    position: relative;
-  }
-
-  .invalid::after {
-    content: "已失效";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%) rotate(-15deg);
-    font-size: 24px;
-    font-weight: bold;
-    color: #f56c6c;
-    background-color: rgba(0, 0, 0, 0.7);
-    padding: 5px 15px;
-    border-radius: 4px;
-    z-index: 1;
-  }
-
-  .el-input,
-  .el-select,
-  .el-input-number,
-  .el-textarea {
-    flex: 1;
-  }
-
-  .el-textarea {
-    margin-top: 5px;
-  }
-
-  /* 响应式调整 */
-  @media (max-width: 768px) {
-    .plan-header {
-      flex-wrap: wrap;
-    }
-
-    .plan-secret-tag,
-    .plan-status {
-      width: 100%;
-      margin-bottom: 5px;
-    }
-
-    .plan-title-container {
-      width: 100%;
-      order: -1;
-      margin-bottom: 10px;
-    }
-  }
+}
 </style>

src/components/GlobalComponents/TargetConfig.vue

@@ -15,7 +15,7 @@
         <el-tooltip
           :content="target.targetName"
           placement="top"
-          :disabled="!isNameOverflow"
+
         >
           <h3 ref="nameRef" class="target-name">
             {{ target.targetName || "-" }}
@@ -47,7 +47,7 @@
             v-else
             :content="target.targetName"
             placement="top"
-            :disabled="!isLongitudeOverflow"
+
           >
             <span
               ref="longitudeRef"
@@ -69,7 +69,7 @@
             v-else
             :content="target.longitude"
             placement="top"
-            :disabled="!isLongitudeOverflow"
+
           >
             <span
               ref="longitudeRef"
@@ -91,7 +91,6 @@
             v-else
             :content="target.latitude"
             placement="top"
-            :disabled="!isLatitudeOverflow"
           >
             <span ref="latitudeRef" class="info-value dark-value text-ellipsis">
               {{ target.latitude || "-" }}
@@ -115,7 +114,6 @@
             v-else
             :content="target.mission"
             placement="top"
-            :disabled="!isMissionOverflow"
           >
             <span ref="missionRef" class="info-value dark-value text-ellipsis">
               {{ target.mission || "-" }}
@@ -141,7 +139,6 @@
       </template>
       <template v-else>
         <el-button
-          v-if="isShow"
           size="mini"
           type="primary"
           class="dark-button"
@@ -150,7 +147,6 @@
           编辑
         </el-button>
         <el-button
-          v-if="isShow"
           size="mini"
           class="dark-button"
           @click="handleDelete"
@@ -163,292 +159,292 @@
 </template>
 
 <script>
-  export default {
-    name: "TargetConfig",
-    props: {
-      isShow: {
-        type: Boolean,
-        default: true,
-      },
-      target: {
-        type: Object,
-        required: true,
-        default: () => ({
-          isShow: true,
-          id: "",
-          targetName: "", // 被攻击靶标名称
-          longitude: "", // 经度
-          latitude: "", // 纬度
-          mission: "", // 任务
-          secretLevel: "秘密",
-          status: "有效",
-        }),
+export default {
+  name: "TargetConfig",
+  props: {
+    isShow: {
+      type: Boolean,
+      default: true,
+    },
+    target: {
+      type: Object,
+      required: true,
+      default: () => ({
+        isShow: true,
+        id: "",
+        targetName: "", // 被攻击靶标名称
+        longitude: "", // 经度
+        latitude: "", // 纬度
+        mission: "", // 任务
+        secretLevel: "秘密",
+        status: "有效",
+      }),
+    },
+  },
+  data() {
+    return {
+      editing: false,
+      editData: {
+        targetName: this.target.targetName,
+        longitude: this.target.longitude,
+        latitude: this.target.latitude,
+        mission: this.target.mission,
       },
+      isNameOverflow: false,
+      isLongitudeOverflow: false,
+      isLatitudeOverflow: false,
+      isMissionOverflow: false,
+    };
+  },
+  computed: {
+    cardClass() {
+      return {
+        "top-secret": this.target.secretLevel === "绝密",
+        secret: this.target.secretLevel === "秘密",
+        confidential: this.target.secretLevel === "机密",
+        invalid: this.target.status === "已失效",
+      };
     },
-    data() {
+    secretTagStyle() {
+      const colors = {
+        绝密: "#c45656",
+        机密: "#b88230",
+        秘密: "#3475b5",
+      };
       return {
-        editing: false,
-        editData: {
-          targetName: this.target.targetName,
-          longitude: this.target.longitude,
-          latitude: this.target.latitude,
-          mission: this.target.mission,
-        },
-        isNameOverflow: false,
-        isLongitudeOverflow: false,
-        isLatitudeOverflow: false,
-        isMissionOverflow: false,
+        backgroundColor: colors[this.target.secretLevel] || "#6b7280",
       };
     },
-    computed: {
-      cardClass() {
-        return {
-          "top-secret": this.target.secretLevel === "绝密",
-          secret: this.target.secretLevel === "秘密",
-          confidential: this.target.secretLevel === "机密",
-          invalid: this.target.status === "已失效",
-        };
-      },
-      secretTagStyle() {
-        const colors = {
-          绝密: "#c45656",
-          机密: "#b88230",
-          秘密: "#3475b5",
-        };
-        return {
-          backgroundColor: colors[this.target.secretLevel] || "#6b7280",
-        };
-      },
-      statusTagType() {
-        const statusMap = {
-          有效: "success",
-          待审核: "warning",
-          已失效: "danger",
-          草稿: "info",
-        };
-        return statusMap[this.target.status] || "info";
-      },
+    statusTagType() {
+      const statusMap = {
+        有效: "success",
+        待审核: "warning",
+        已失效: "danger",
+        草稿: "info",
+      };
+      return statusMap[this.target.status] || "info";
     },
-    mounted() {
-      console.log("接收的数据", this.target.isShow);
-      this.checkOverflows();
+  },
+  mounted() {
+    console.log("接收的数据", this.target.isShow);
+    this.checkOverflows();
+  },
+  updated() {
+    this.checkOverflows();
+  },
+  methods: {
+    checkOverflows() {
+      this.isNameOverflow = this.checkElementOverflow(this.$refs.nameRef);
+      this.isLongitudeOverflow = this.checkElementOverflow(
+        this.$refs.longitudeRef
+      );
+      this.isLatitudeOverflow = this.checkElementOverflow(
+        this.$refs.latitudeRef
+      );
+      this.isMissionOverflow = this.checkElementOverflow(
+        this.$refs.missionRef
+      );
     },
-    updated() {
-      this.checkOverflows();
+    checkElementOverflow(element) {
+      return element ? element.scrollWidth > element.clientWidth : false;
     },
-    methods: {
-      checkOverflows() {
-        this.isNameOverflow = this.checkElementOverflow(this.$refs.nameRef);
-        this.isLongitudeOverflow = this.checkElementOverflow(
-          this.$refs.longitudeRef
-        );
-        this.isLatitudeOverflow = this.checkElementOverflow(
-          this.$refs.latitudeRef
-        );
-        this.isMissionOverflow = this.checkElementOverflow(
-          this.$refs.missionRef
-        );
-      },
-      checkElementOverflow(element) {
-        return element ? element.scrollWidth > element.clientWidth : false;
-      },
-      handleEdit() {
-        this.editData = {
-          targetName: this.target.targetName,
-          longitude: this.target.longitude,
-          latitude: this.target.latitude,
-          mission: this.target.mission,
-        };
-        this.editing = true;
-      },
-      handleSave() {
-        this.$emit("update", this.editData);
-        this.editing = false;
-      },
-      handleCancel() {
-        this.editing = false;
-      },
-      handleDelete() {
-        this.$emit("delete", this.target.id);
-      },
+    handleEdit() {
+      this.editData = {
+        targetName: this.target.targetName,
+        longitude: this.target.longitude,
+        latitude: this.target.latitude,
+        mission: this.target.mission,
+      };
+      this.editing = true;
+    },
+    handleSave() {
+      this.$emit("update", this.editData);
+      this.editing = false;
+    },
+    handleCancel() {
+      this.editing = false;
+    },
+    handleDelete() {
+      this.$emit("delete", this.target.id);
     },
-  };
+  },
+};
 </script>
 
 <style scoped>
-  /* 变量定义 */
-  :root {
-    --tag-width: 60px;
-    --header-padding: 0 10px;
-    --card-border-radius: 4px;
-  }
-
-  .target-card {
-    margin-bottom: 15px;
-    transition: all 0.3s ease;
-    border-radius: var(--card-border-radius);
-    border: 1px solid #425163;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .target-card:hover {
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
-  }
-
-  /* 头部布局 */
+/* 变量定义 */
+:root {
+  --tag-width: 60px;
+  --header-padding: 0 10px;
+  --card-border-radius: 4px;
+}
+
+.target-card {
+  margin-bottom: 15px;
+  transition: all 0.3s ease;
+  border-radius: var(--card-border-radius);
+  border: 1px solid #425163;
+  display: flex;
+  flex-direction: column;
+}
+
+.target-card:hover {
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
+}
+
+/* 头部布局 */
+.target-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+  width: 100%;
+}
+
+.target-secret-tag,
+.target-status {
+  width: var(--tag-width);
+  text-align: center;
+  line-height: inherit;
+  padding: 4px 8px;
+  flex-shrink: 0;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.target-title-container {
+  flex: 1;
+  min-width: 0;
+  padding: var(--header-padding);
+}
+
+.target-name {
+  margin: 0;
+  font-size: 16px;
+  color: #e0e6ed;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.target-content {
+  margin-bottom: 12px;
+  flex: 1;
+}
+
+.target-main-info {
+  margin-bottom: 10px;
+}
+
+.target-additional-info {
+  padding-top: 10px;
+  border-top: 1px dashed #425163;
+}
+
+.info-row {
+  display: flex;
+  margin-bottom: 8px;
+  font-size: 13px;
+  align-items: center;
+}
+
+.dark-label {
+  color: #8796ad;
+  width: 70px;
+  display: inline-block;
+  flex-shrink: 0;
+}
+
+.dark-value {
+  color: #e0e6ed;
+  flex: 1;
+}
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  max-width: 100%;
+}
+
+.target-actions {
+  display: flex;
+  justify-content: space-between;
+}
+
+.dark-button {
+  background-color: #425163;
+  border-color: #5a6b7d;
+  color: #e0e6ed;
+}
+
+.dark-button:hover {
+  background-color: #5a6b7d;
+  border-color: #677a8c;
+  color: #ffffff;
+}
+
+/* 不同秘级的边框颜色 */
+.top-secret {
+  border-top: 3px solid #c45656;
+}
+
+.secret {
+  border-top: 3px solid #3475b5;
+}
+
+.confidential {
+  border-top: 3px solid #b88230;
+}
+
+/* 失效状态的样式 */
+.invalid {
+  opacity: 0.7;
+  position: relative;
+}
+
+.invalid::after {
+  content: "已失效";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(-15deg);
+  font-size: 24px;
+  font-weight: bold;
+  color: #f56c6c;
+  background-color: rgba(0, 0, 0, 0.7);
+  padding: 5px 15px;
+  border-radius: 4px;
+  z-index: 1;
+}
+
+.el-input,
+.el-textarea {
+  flex: 1;
+}
+
+.el-textarea {
+  margin-top: 5px;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
   .target-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 12px;
-    width: 100%;
+    flex-wrap: wrap;
   }
 
   .target-secret-tag,
   .target-status {
-    width: var(--tag-width);
-    text-align: center;
-    line-height: inherit;
-    padding: 4px 8px;
-    flex-shrink: 0;
-    border-radius: 4px;
-    font-size: 12px;
+    width: 100%;
+    margin-bottom: 5px;
   }
 
   .target-title-container {
-    flex: 1;
-    min-width: 0;
-    padding: var(--header-padding);
-  }
-
-  .target-name {
-    margin: 0;
-    font-size: 16px;
-    color: #e0e6ed;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    text-align: center;
-  }
-
-  .target-content {
-    margin-bottom: 12px;
-    flex: 1;
-  }
-
-  .target-main-info {
+    width: 100%;
+    order: -1;
     margin-bottom: 10px;
   }
-
-  .target-additional-info {
-    padding-top: 10px;
-    border-top: 1px dashed #425163;
-  }
-
-  .info-row {
-    display: flex;
-    margin-bottom: 8px;
-    font-size: 13px;
-    align-items: center;
-  }
-
-  .dark-label {
-    color: #8796ad;
-    width: 70px;
-    display: inline-block;
-    flex-shrink: 0;
-  }
-
-  .dark-value {
-    color: #e0e6ed;
-    flex: 1;
-  }
-
-  .text-ellipsis {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    display: inline-block;
-    max-width: 100%;
-  }
-
-  .target-actions {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .dark-button {
-    background-color: #425163;
-    border-color: #5a6b7d;
-    color: #e0e6ed;
-  }
-
-  .dark-button:hover {
-    background-color: #5a6b7d;
-    border-color: #677a8c;
-    color: #ffffff;
-  }
-
-  /* 不同秘级的边框颜色 */
-  .top-secret {
-    border-top: 3px solid #c45656;
-  }
-
-  .secret {
-    border-top: 3px solid #3475b5;
-  }
-
-  .confidential {
-    border-top: 3px solid #b88230;
-  }
-
-  /* 失效状态的样式 */
-  .invalid {
-    opacity: 0.7;
-    position: relative;
-  }
-
-  .invalid::after {
-    content: "已失效";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%) rotate(-15deg);
-    font-size: 24px;
-    font-weight: bold;
-    color: #f56c6c;
-    background-color: rgba(0, 0, 0, 0.7);
-    padding: 5px 15px;
-    border-radius: 4px;
-    z-index: 1;
-  }
-
-  .el-input,
-  .el-textarea {
-    flex: 1;
-  }
-
-  .el-textarea {
-    margin-top: 5px;
-  }
-
-  /* 响应式调整 */
-  @media (max-width: 768px) {
-    .target-header {
-      flex-wrap: wrap;
-    }
-
-    .target-secret-tag,
-    .target-status {
-      width: 100%;
-      margin-bottom: 5px;
-    }
-
-    .target-title-container {
-      width: 100%;
-      order: -1;
-      margin-bottom: 10px;
-    }
-  }
+}
 </style>

src/store/modules/sendPicture.js

@@ -0,0 +1,30 @@
+// store/modules/sendPicture.js
+const state = {
+  pipImage: "", // 存储当前画中画显示的图片地址
+};
+
+const mutations = {
+  // 更新画中画图片
+  SET_PIP_IMAGE(state, imageUrl) {
+    state.pipImage = imageUrl;
+  },
+};
+
+const actions = {
+  // 触发图片更新的 action
+  updatePipImage({ commit }, imageUrl) {
+    commit("SET_PIP_IMAGE", imageUrl);
+  },
+};
+
+const getters = {
+  getPipImage: (state) => state.pipImage,
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters,
+};

src/views/command/importTask/components/InterferenceCard.vue

@@ -116,6 +116,9 @@
     </div>
 
     <div class="plan-actions">
+      <el-button size="mini" class="dark-button" @click="viewEdit">
+        编辑
+      </el-button>
       <el-button size="mini" class="dark-button" @click="viewDetail">
         详情
       </el-button>
@@ -153,111 +156,108 @@ export default {
       }),
     },
   },
-    data() {
+  data() {
+    return {
+      isChecked: this.plan.isSelected || false, // 初始化选中状态
+      isPlanNameOverflow: false,
+      isTaskNameOverflow: false,
+      isTaskCodeOverflow: false,
+      isTimeRangeOverflow: false,
+      isSecretYearsOverflow: false,
+      isStartTimeOverflow: false,
+      isEndTimeOverflow: false,
+    };
+  },
+  watch: {
+    // 监听外部选中状态变化
+    'plan.isSelected'(newVal) {
+      this.isChecked = newVal;
+    }
+  },
+  computed: {
+    timeRange() {
+      return `${this.plan.startTime} 至 ${this.plan.endTime}`;
+    },
+    cardClass() {
+      return {
+        "top-secret": this.plan.secretLevel === "绝密",
+        secret: this.plan.secretLevel === "秘密",
+        confidential: this.plan.secretLevel === "机密",
+        invalid: this.plan.status === "已失效",
+      };
+    },
+    secretTagStyle() {
+      const colors = {
+        绝密: "#c45656",
+        机密: "#b88230",
+        秘密: "#3475b5",
+      };
       return {
-        isChecked: this.plan.isSelected || false, // 初始化选中状态
-        isPlanNameOverflow: false,
-        isTaskNameOverflow: false,
-        isTaskCodeOverflow: false,
-        isTimeRangeOverflow: false,
-        isSecretYearsOverflow: false,
-        isStartTimeOverflow: false,
-        isEndTimeOverflow: false,
+        backgroundColor: colors[this.plan.secretLevel] || "#6b7280",
       };
     },
-    watch: {
-      // 监听外部选中状态变化
-      'plan.isSelected'(newVal) {
-        this.isChecked = newVal;
-      }
+    statusTagType() {
+      const statusMap = {
+        有效: "success",
+        待审核: "warning",
+        已失效: "danger",
+        草稿: "info",
+      };
+      return statusMap[this.plan.status] || "info";
+    },
+    compileStatusTagType() {
+      const statusMap = {
+        已编制: "success",
+        编制中: "warning",
+        未编制: "danger",
+        已审核: "",
+      };
+      return statusMap[this.plan.compileStatus] || "info";
+    },
+  },
+  mounted() {
+    this.checkOverflows();
+  },
+  updated() {
+    this.checkOverflows();
+  },
+  methods: {
+    handleCheckChange(checked) {
+      this.$emit('check', {plan: this.plan, checked});
     },
-    computed: {
-      timeRange() {
-        return `${this.plan.startTime} 至 ${this.plan.endTime}`;
-      },
-      cardClass() {
-        return {
-          "top-secret": this.plan.secretLevel === "绝密",
-          secret: this.plan.secretLevel === "秘密",
-          confidential: this.plan.secretLevel === "机密",
-          invalid: this.plan.status === "已失效",
-        };
-      },
-      secretTagStyle() {
-        const colors = {
-          绝密: "#c45656",
-          机密: "#b88230",
-          秘密: "#3475b5",
-        };
-        return {
-          backgroundColor: colors[this.plan.secretLevel] || "#6b7280",
-        };
-      },
-      statusTagType() {
-        const statusMap = {
-          有效: "success",
-          待审核: "warning",
-          已失效: "danger",
-          草稿: "info",
-        };
-        return statusMap[this.plan.status] || "info";
-      },
-      compileStatusTagType() {
-        const statusMap = {
-          已编制: "success",
-          编制中: "warning",
-          未编制: "danger",
-          已审核: "",
-        };
-        return statusMap[this.plan.compileStatus] || "info";
-      },
+    checkOverflows() {
+      this.isStartTimeOverflow = this.checkElementOverflow(
+        this.$refs.startTimeRef
+      );
+      this.isEndTimeOverflow = this.checkElementOverflow(
+        this.$refs.endTimeRef
+      );
+      this.isPlanNameOverflow = this.checkElementOverflow(
+        this.$refs.planNameRef
+      );
+      this.isTaskNameOverflow = this.checkElementOverflow(
+        this.$refs.taskNameRef
+      );
+      this.isTaskCodeOverflow = this.checkElementOverflow(
+        this.$refs.taskCodeRef
+      );
+      this.isTimeRangeOverflow = this.checkElementOverflow(
+        this.$refs.timeRangeRef
+      );
+      this.isSecretYearsOverflow = this.checkElementOverflow(
+        this.$refs.secretYearsRef
+      );
     },
-    mounted() {
-      this.checkOverflows();
+    checkElementOverflow(element) {
+      return element ? element.scrollWidth > element.clientWidth : false;
     },
-    updated() {
-      this.checkOverflows();
+    viewDetail() {
+      this.$emit("view-detail", this.plan);
     },
-    methods: {
-      handleCheckChange(checked) {
-        this.$emit('check', {plan: this.plan, checked});
-      },
-      checkOverflows() {
-        this.isStartTimeOverflow = this.checkElementOverflow(
-          this.$refs.startTimeRef
-        );
-        this.isEndTimeOverflow = this.checkElementOverflow(
-          this.$refs.endTimeRef
-        );
-        this.isPlanNameOverflow = this.checkElementOverflow(
-          this.$refs.planNameRef
-        );
-        this.isTaskNameOverflow = this.checkElementOverflow(
-          this.$refs.taskNameRef
-        );
-        this.isTaskCodeOverflow = this.checkElementOverflow(
-          this.$refs.taskCodeRef
-        );
-        this.isTimeRangeOverflow = this.checkElementOverflow(
-          this.$refs.timeRangeRef
-        );
-        this.isSecretYearsOverflow = this.checkElementOverflow(
-          this.$refs.secretYearsRef
-        );
-      },
-      checkElementOverflow(element) {
-        return element ? element.scrollWidth > element.clientWidth : false;
-      },
-      selectPlan() {
-        this.$emit("select", this.plan);
-      },
-      editPlan() {
-        this.$emit("edit", this.plan);
-      },
-      viewDetail() {
-        this.$emit("view-detail", this.plan);
-      },
+    viewEdit() {
+      this.$emit("view-edit", this.plan);
     },
+  },
 }
 </script>
 

src/views/command/importTask/components/MeasCard.vue

@@ -116,6 +116,9 @@
     </div>
 
     <div class="plan-actions">
+      <el-button size="mini" class="dark-button" @click="viewEdit">
+
+      </el-button>
       <el-button size="mini" class="dark-button" @click="viewDetail">
         详情
       </el-button>
@@ -248,15 +251,12 @@ export default {
     checkElementOverflow(element) {
       return element ? element.scrollWidth > element.clientWidth : false;
     },
-    selectPlan() {
-      this.$emit("select", this.plan);
-    },
-    editPlan() {
-      this.$emit("edit", this.plan);
-    },
     viewDetail() {
       this.$emit("view-detail", this.plan);
     },
+    viewEdit() {
+      this.$emit("view-edit", this.plan);
+    },
   },
 };
 </script>

src/views/command/importTask/components/TargetCard.vue

@@ -116,6 +116,9 @@
     </div>
 
     <div class="plan-actions">
+      <el-button size="mini" class="dark-button" @click="viewEdit">
+        编辑
+      </el-button>
       <el-button size="mini" class="dark-button" @click="viewDetail">
         详情
       </el-button>
@@ -248,15 +251,12 @@ export default {
     checkElementOverflow(element) {
       return element ? element.scrollWidth > element.clientWidth : false;
     },
-    selectPlan() {
-      this.$emit("select", this.plan);
-    },
-    editPlan() {
-      this.$emit("edit", this.plan);
-    },
     viewDetail() {
       this.$emit("view-detail", this.plan);
     },
+    viewEdit() {
+      this.$emit("view-edit", this.plan);
+    },
   },
 };
 </script>

src/views/command/importTask/index.vue

@@ -34,15 +34,16 @@
 
       <!-- 主要内容 -->
       <template #main>
-          <ImporTaskCard
-            v-if="planList.length > 0"
-            v-for="plan in planList"
-            :key="plan.id"
-            :plan="plan"
-            @edit="handleEdit"
-            @choose-task="chooseTask"
-          />
-          <!-- 空状态-->
+        <ImporTaskCard
+          v-if="planList.length > 0"
+          v-for="plan in planList"
+          :key="plan.id"
+          :plan="plan"
+          @edit="handleEdit"
+          @view-detail="handleDetail"
+          @choose-task="chooseTask(plan.planName)"
+        />
+        <!-- 空状态-->
         <el-empty v-else description="暂无数据" />
       </template>
       <!-- 底部右侧分页 -->
@@ -58,7 +59,6 @@
         />
       </template>
     </DarkLayout>
-    <!-- 选择方案 -->
     <!-- 选择方案抽屉 -->
     <DarkDrawer
       title="选择方案"
@@ -81,7 +81,7 @@
               v-if="interferencePlanData.length > 0"
               @select="handleSelectInt"
               @check="handleInterferenceCheck"
-            @view-detail="viewDetailsInt"
+              @view-detail="viewDetailsInt"
             />
           </div>
         </div>
@@ -100,7 +100,7 @@
               :plan="plan"
               @select="handleSelectB"
               @check="handleTargetCheck"
-            @view-detail="viewDetailsB"
+              @view-detail="viewDetailsB"
             />
           </div>
         </div>
@@ -119,7 +119,7 @@
               v-if="measPlanData.length > 0"
               @select="handleSelectC"
               @check="handleMeasCheck"
-            @view-detail="viewDetailsC"
+              @view-detail="viewDetailsC"
             />
           </div>
         </div>
@@ -139,15 +139,87 @@
       </div>
 
       <!-- 添加抽屉底部按钮 -->
-<!--      <div slot="footer" class="drawer-footer">
-        <el-button @click="drawerVisible = false">取消</el-button>
-        <el-button type="primary" @click="handleConfirm">确定</el-button>
-      </div>-->
-            <div >
+      <!--      <div slot="footer" class="drawer-footer">
+              <el-button @click="drawerVisible = false">取消</el-button>
+              <el-button type="primary" @click="handleConfirm">确定</el-button>
+            </div>-->
+      <div >
         <el-button @click="drawerVisible = false">取消</el-button>
         <el-button type="primary" @click="handleConfirm">确定</el-button>
       </div>
     </DarkDrawer>
+    <!-- 新增：任务详情抽屉 -->
+    <DarkDrawer
+      title="任务详情"
+      :visible.sync="detailDrawerVisible"
+      size="40%"
+      :show-footer="false"
+    >
+      <div class="detail-container">
+        <div class="detail-header">
+          <div class="secret-tag" :style="detailSecretTagStyle">
+            {{ currentDetailPlan.secretLevel }}
+          </div>
+          <h3 class="detail-title">{{ currentDetailPlan.planName }}</h3>
+        </div>
+
+        <div class="detail-content">
+          <div class="detail-section">
+            <h4 class="section-title">基本信息</h4>
+            <div class="detail-row">
+              <span class="detail-label">任务名称:</span>
+              <span class="detail-value">{{ currentDetailPlan.simulationTaskName || '-' }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">任务类型:</span>
+              <span class="detail-value">{{ currentDetailPlan.taskType || '-' }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">开始时间:</span>
+              <span class="detail-value">{{ currentDetailPlan.simulationStartTime || '-' }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">结束时间:</span>
+              <span class="detail-value">{{ currentDetailPlan.simulationEndTime || '-' }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">模拟次数:</span>
+              <span class="detail-value">{{ currentDetailPlan.simulationCount || '-' }}</span>
+            </div>
+          </div>
+
+          <div class="detail-section">
+            <h4 class="section-title">参与信息</h4>
+            <div class="detail-row">
+              <span class="detail-label">参试任务:</span>
+              <span class="detail-value">{{ currentDetailPlan.simulationParticipantTasks || '-' }}</span>
+            </div>
+          </div>
+
+          <div class="detail-section">
+            <h4 class="section-title">创建信息</h4>
+            <div class="detail-row">
+              <span class="detail-label">创建人:</span>
+              <span class="detail-value">{{ currentDetailPlan.username || '-' }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">创建时间:</span>
+              <span class="detail-value">{{ currentDetailPlan.createTime || '-' }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">状态:</span>
+              <el-tag
+                :type="detailStatusTagType"
+                size="small"
+                effect="dark"
+              >
+                {{ currentDetailPlan.status || '-' }}
+              </el-tag>
+            </div>
+          </div>
+        </div>
+      </div>
+    </DarkDrawer>
   </div>
 </template>
 
@@ -171,6 +243,8 @@ export default {
   },
   data() {
     return {
+      detailDrawerVisible: false,
+      currentDetailPlan: {},
       role:'ordinary',//角色选择 指挥角色下 不可编辑
       selectedInterference: null,
       selectedTarget: null,
@@ -276,7 +350,7 @@ export default {
       planList: [
         {
           id: "import_001",
-          planName: "2024年度导弹防御系统测试方案",
+          planName: "2024年度导弹防御系统测试",
           simulationTaskName: "导弹防御系统联合仿真测试",
           simulationStartTime: "2024-06-15 08:00:00",
           simulationEndTime: "2024-06-20 18:00:00",
@@ -290,7 +364,7 @@ export default {
         },
         {
           id: "import_002",
-          planName: "新型雷达系统性能验证方案",
+          planName: "新型雷达系统性能验证任务",
           simulationTaskName: "相控阵雷达多目标跟踪测试",
           simulationStartTime: "2024-07-10 09:00:00",
           simulationEndTime: "2024-07-15 17:00:00",
@@ -304,7 +378,7 @@ export default {
         },
         {
           id: "import_003",
-          planName: "电子对抗系统实战演练方案",
+          planName: "电子对抗系统实战演练",
           simulationTaskName: "复杂电磁环境下电子对抗演练",
           simulationStartTime: "2024-08-05 08:30:00",
           simulationEndTime: "2024-08-10 19:00:00",
@@ -409,7 +483,40 @@ export default {
       showAdvancedSearch: false
     }
   },
+  computed:{
+    detailSecretTagStyle() {
+      const colors = {
+        '绝密': '#c45656',
+        '机密': '#b88230',
+        '秘密': '#3475b5',
+      };
+      return {
+        backgroundColor: colors[this.currentDetailPlan.secretLevel] || '#6b7280',
+      };
+    },
+    detailStatusTagType() {
+      const statusMap = {
+        '已确认': 'success',
+        '未确认': 'warning',
+        '已失效': 'danger',
+        '草稿': 'info',
+      };
+      return statusMap[this.currentDetailPlan.status] || 'info';
+    }
+  },
   methods: {
+    handleDetail(plan) {
+      this.currentDetailPlan = { ...plan };
+      this.detailDrawerVisible = true;
+    },
+
+    // ... 原有方法保持不变 ...
+    chooseTask(planName) {
+      console.log('任务已经选择，选择方案:', planName)
+      this.currentPlan = planName
+      this.$message.success('任务已经选择，选择: ' + planName)
+      // this.drawerVisible = true
+    },
     // 干扰方案选择处理
     handleInterferenceCheck(data) {
       if (data.checked) {
@@ -501,7 +608,7 @@ export default {
     },
     handleEditB(){
       console.log("选择任务 靶标方案")
-     /* this.$router.push({ path: '/importTask/configForPlan',query: { planType: '靶标方案' }  })*/
+      /* this.$router.push({ path: '/importTask/configForPlan',query: { planType: '靶标方案' }  })*/
       this.$router.push({ path: '/taskEdit/TargerEdit',query: { planType: '靶标方案' }  })
     },
     viewDetailsB(){
@@ -535,11 +642,11 @@ export default {
     handleViewDetail() {
       this.$router.push({ path: '/importTask/configForPlan' })
     },
-    chooseTask(plan) {
+    /*chooseTask(plan) {
       console.log('任务已经选择，选择方案:', plan)
       this.currentPlan = plan
       this.drawerVisible = true
-    },
+    },*/
     // 处理编辑事件
     handleEdit(plan) {
       console.log('编辑计划:', plan)
@@ -571,6 +678,82 @@ export default {
 </script>
 
 <style scoped>
+/* 新增详情抽屉样式 */
+.detail-container {
+  padding: 20px;
+  color: #e0e6ed;
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #425163;
+}
+
+.secret-tag {
+  padding: 4px 10px;
+  border-radius: 4px;
+  color: white;
+  font-size: 14px;
+  margin-right: 12px;
+}
+
+.detail-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: bold;
+  color: #e0e6ed;
+}
+
+.detail-content {
+  padding: 10px 0;
+}
+
+.detail-section {
+  margin-bottom: 25px;
+}
+
+.section-title {
+  position: relative;
+  padding-left: 12px;
+  font-size: 16px;
+  margin-bottom: 15px;
+  color: #67c23a;
+}
+
+.section-title::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 16px;
+  background-color: #67c23a;
+  border-radius: 2px;
+}
+
+.detail-row {
+  display: flex;
+  margin-bottom: 15px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.detail-label {
+  width: 100px;
+  color: #8796ad;
+  flex-shrink: 0;
+}
+
+.detail-value {
+  flex: 1;
+  color: #e0e6ed;
+  word-break: break-word;
+}
+
 .drawer-main {
   padding: 20px;
   max-height: 70vh;

src/views/command/taskEdit/OverallPlan.vue

@@ -2,15 +2,15 @@
   <GlobalLayout title="试验任务参数调整">
     <template #header-controls>
       <el-button icon="el-icon-close" @click="close">关闭</el-button>
-      <el-button  :disabled="!isEdit" type="success" icon="el-icon-download">暂存</el-button>
-      <el-button  :disabled="!isEdit" type="primary" icon="el-icon-plus" @click="submitForm">保存</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>-->
+          <!--          <h3 class="section-title dark-title">干扰方案配置</h3>-->
           <el-card class="editor-card dark-card" shadow="hover">
             <div class="editor-content">
               <el-form
@@ -143,251 +143,239 @@
             </div>
             <!--方案配置区-->
             <el-tabs v-model="activeTab">
-              <el-tab-pane label="干扰方案配置" name="interference">
-                <!-- 干扰装备配置区域 -->
-                <div class="card-config-section">
-                  <div class="section-header">
-                    <h3>导弹一干扰装备保障配置</h3>
-                    <el-button
-                      :disabled="!isEdit"
-                      type="primary"
-                      size="small"
-                      @click="handleAddEquipment('missile2')"
-                    >
-                      添加保障配置目标
-                    </el-button>
-                  </div>
-
-                  <div class="equipment-grid">
-                    <MeasEquipmentConfig
-                      v-for="(item, index) in interferenceConfigList"
-                      :key="item.id"
-                      :isShow="isEdit"
-                      :equipment="item"
-                      :unit-options="unitOptions"
-                      @update="handleUpdateEquipment"
-                      @delete="handleDeleteEquipment"
-                      class="equipment-card-item"
-                    />
-                  </div>
+              <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="card-config-section">
-                  <div class="section-header">
-                    <h3>导弹二干扰装备保障配置</h3>
-                    <el-button
-                      :disabled="!isEdit"
-                      type="primary"
-                      size="small"
-                      @click="handleAddEquipment('missile2')"
-                    >
-                      添加保障配置目标
-                    </el-button>
-                  </div>
-
-                  <div class="equipment-grid">
-                    <MeasEquipmentConfig
-                      v-for="(item, index) in interferenceConfigList"
-                      :key="item.id"
-                      :isShow="isEdit"
-                      :equipment="item"
-                      :unit-options="unitOptions"
-                      @update="handleUpdateEquipment"
-                      @delete="handleDeleteEquipment"
-                      class="equipment-card-item"
-                    />
-                  </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 class="card-config-section">
-                  <div class="section-header">
-                    <h3>导弹三干扰装备保障配置</h3>
-                    <el-button
-                      :disabled="!isEdit"
-                      type="primary"
-                      size="small"
-                      @click="handleAddEquipment('missile2')"
-                    >
-                      添加保障配置目标
-                    </el-button>
-                  </div>
-
-                  <div class="equipment-grid">
-                    <MeasEquipmentConfig
-                      v-for="(item, index) in interferenceConfigList"
-                      :key="item.id"
-                      :isShow="isEdit"
-                      :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>
 
-              </el-tab-pane>
-              <el-tab-pane label="测量方案配置" name="meas">
-                <div class="card-config-section">
-                  <div class="section-header">
-                    <h3>导弹一测量装备保障配置</h3>
-                    <el-button
-                      :disabled="!isEdit"
-                      type="primary"
-                      size="small"
-                      @click="handleAddEquipment('missile2')"
-                    >
-                      添加保障配置目标
-                    </el-button>
-                  </div>
-
-                  <div class="equipment-grid">
-                    <MeasEquipmentConfig
-                      v-for="(item, index) in MeasEquipmentConfigList"
-                      :key="item.id"
-                      :isShow="isEdit"
-                      :equipment="item"
-                      :unit-options="unitOptions"
-                      @update="handleUpdateEquipment"
-                      @delete="handleDeleteEquipment"
-                      class="equipment-card-item"
-                    />
-                  </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="card-config-section">
-                  <div class="section-header">
-                    <h3>导弹二测量装备保障配置</h3>
-                    <el-button
-                      :disabled="!isEdit"
-                      type="primary"
-                      size="small"
-                      @click="handleAddEquipment('missile2')"
-                    >
-                      添加保障配置目标
-                    </el-button>
-                  </div>
-
-                  <div class="equipment-grid">
-                    <MeasEquipmentConfig
-                      v-for="(item, index) in MeasEquipmentConfigList"
-                      :key="item.id"
-                      :isShow="isEdit"
-                      :equipment="item"
-                      :unit-options="unitOptions"
-                      @update="handleUpdateEquipment"
-                      @delete="handleDeleteEquipment"
-                      class="equipment-card-item"
-                    />
-                  </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 class="card-config-section">
-                  <div class="section-header">
-                    <h3>导弹三测量装备保障配置</h3>
-                    <el-button
-                      :disabled="!isEdit"
-                      type="primary"
-                      size="small"
-                      @click="handleAddEquipment('missile2')"
-                    >
-                      添加保障配置目标
-                    </el-button>
-                  </div>
-
-                  <div class="equipment-grid">
-                    <MeasEquipmentConfig
-                      v-for="(item, index) in MeasEquipmentConfigList"
-                      :key="item.id"
-                      :isShow="isEdit"
-                      :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>
-              </el-tab-pane>
-              <el-tab-pane label="靶标方案配置" name="target">
-                <div class="card-config-section">
-                  <div class="section-header">
-                    <h3>导弹一靶标装备保障配置</h3>
-                    <el-button
-                      :disabled="!isEdit"
-                      type="primary"
-                      size="small"
-                      @click="handleAddEquipment('missile2')"
-                    >
-                      添加保障配置目标
-                    </el-button>
-                  </div>
-
-                  <div class="equipment-grid">
-                    <TargetConfig
-                      v-for="(item, index) in attackedTargetList"
-                      :disabled="isEdit"
-                      :key="item.id"
-                      :target="item"
-                      :unit-options="unitOptions"
-                      @update="handleUpdateEquipment"
-                      @delete="handleDeleteEquipment"
-                      class="equipment-card-item"
-                    />
-                  </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="card-config-section">
-                  <div class="section-header">
-                    <h3>导弹三靶标装备保障配置</h3>
-                    <el-button
-                      type="primary"
-                      size="small"
-                      :disabled="!isEdit"
-                      @click="handleAddEquipment('missile1')"
-                    >
-                      添加保障配置目标
-                    </el-button>
-                  </div>
-
-                  <div class="equipment-grid">
-                    <TargetConfig
-                      v-for="(item, index) in attackedTargetList"
-                      :key="item.id"
-                      :isShow="isEdit"
-                      :target="item"
-                      :unit-options="unitOptions"
-                      @update="handleUpdateEquipment"
-                      @delete="handleDeleteEquipment"
-                      class="equipment-card-item"
-                    />
-                  </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="card-config-section">
-                  <div class="section-header">
-                    <h3>导弹二靶标装备保障配置</h3>
-                    <el-button
-                      :disabled="!isEdit"
-                      type="primary"
-                      size="small"
-                      @click="handleAddEquipment('missile2')"
-                    >
-                      添加保障配置目标
-                    </el-button>
-                  </div>
-
-                  <div class="equipment-grid">
-                    <TargetConfig
-                      v-for="(item, index) in attackedTargetList"
-                      :key="item.id"
-                      :isShow="isEdit"
-                      :target="item"
-                      :unit-options="unitOptions"
-                      @update="handleUpdateEquipment"
-                      @delete="handleDeleteEquipment"
-                      class="equipment-card-item"
-                    />
-                  </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>
-              </el-tab-pane>
-            </el-tabs>
+              </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>
@@ -397,11 +385,10 @@
         <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()" :disabled="!isEdit" >
+            <el-button type="primary" size="small" @click="showAddTimeSequenceDialog()">
               <i class="el-icon-plus"></i> 添加时序记录
             </el-button>
           </div>
-
           <!-- 时序表格 -->
           <el-table
             :data="sortedTimeSequenceList"
@@ -469,7 +456,6 @@
                   v-if="!scope.row.editing"
                   size="mini"
                   type="text"
-                  :disabled="!isEdit"
                   @click="handleEditTimeSequence(scope.$index, scope.row)"
                 >编辑</el-button>
                 <el-button
@@ -481,13 +467,11 @@
                 <el-button
                   size="mini"
                   type="text"
-                  :disabled="!isEdit"
                   @click="handleDeleteTimeSequence(scope.row.id)"
                 >删除</el-button>
               </template>
             </el-table-column>
           </el-table>
-
           <!-- 时间线展示 -->
           <div class="timeline-container">
             <h4 class="timeline-title">时序时间线</h4>
@@ -577,9 +561,8 @@ export default {
     }
 
     return {
-      isEdit:false,
       currentRole:'',
-      activeTab:'interference',
+      activeTab:this.currentRole,
       editor: null,
       adjustmentContent: '',
       measurementData: {
@@ -688,34 +671,34 @@ export default {
       ],
       //靶标
       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: "有效"
-      }
-    ],
+        {
+          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: [
         {
@@ -1055,10 +1038,9 @@ export default {
   },
   mounted() {
     this.$nextTick(() =>{
-        this.currentRole = this.$route.query.role;
-      this.isEdit = this.currentRole === 'ordinary';
-        console.log("当前选择的角色为：", this.currentRole);
-      console.log("是否显示编辑按钮：", this.isEdit)
+      this.currentRole = this.$route.query.planType;
+      this.activeTab = this.currentRole;
+      console.log("是否显示编辑按钮：", this.currentRole)
     })
     // 初始化编辑器
     this.initEditor();

src/views/command/taskEdit/components/DarkLayout.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="dark-layout-container">
+    <!-- Header区域 - 查询表单 -->
+    <header class="dark-layout-header">
+      <el-card shadow="never" class="dark-card">
+        <div class="header-content">
+          <div class="query-form-container">
+            <slot name="header">
+              <el-form :model="queryForm" inline class="query-form">
+                <slot name="query-form"></slot>
+              </el-form>
+            </slot>
+          </div>
+          <div class="header-actions">
+            <slot name="header-actions"></slot>
+          </div>
+        </div>
+      </el-card>
+    </header>
+
+    <!-- Main区域 - 内容展示 -->
+    <main class="dark-layout-main">
+      <el-card shadow="never" class="dark-card content-card">
+        <div class="main-content">
+          <slot name="main">
+            <slot></slot>
+          </slot>
+        </div>
+        <div v-if="$slots['footer-actions']" class="footer-container">
+          <div class="footer-divider"></div>
+          <div class="footer-actions">
+            <slot name="footer-actions"></slot>
+          </div>
+        </div>
+      </el-card>
+    </main>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DarkLayout",
+  provide() {
+    return {
+      darkLayout: this, // 提供主题配置给子组件
+    };
+  },
+  props: {
+    queryForm: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      theme: {
+        // 可配置的主题变量
+        "--dark-bg-color": "#1f2a38",
+        "--dark-card-bg": "#2d3a4b",
+        "--dark-border-color": "#425163",
+        "--dark-text-primary": "#e0e6ed",
+        "--dark-text-secondary": "#8796ad",
+        "--dark-primary-color": "#3475b5",
+        "--dark-success-color": "#67c23a",
+        "--dark-warning-color": "#e6a23c",
+        "--dark-danger-color": "#f56c6c",
+        "--dark-info-color": "#909399",
+      },
+    };
+  },
+  created() {
+    this.setThemeVariables();
+  },
+  methods: {
+    setThemeVariables() {
+      Object.keys(this.theme).forEach((key) => {
+        document.documentElement.style.setProperty(key, this.theme[key]);
+      });
+    },
+    updateTheme(newTheme) {
+      this.theme = { ...this.theme, ...newTheme };
+      this.setThemeVariables();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.dark-layout-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-color: var(--dark-bg-color);
+}
+
+.dark-layout-header {
+  padding: 15px;
+  background-color: var(--dark-bg-color);
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.query-form-container {
+  flex: 1;
+  margin-right: 20px;
+}
+
+.header-actions {
+  flex-shrink: 0;
+  padding-top: 4px; /* 对齐表单基线 */
+}
+
+.dark-layout-main {
+  flex: 1;
+  padding: 0 15px 15px;
+  overflow: hidden;
+  background-color: var(--dark-bg-color);
+  display: flex;
+  flex-direction: column;
+}
+
+.dark-card {
+  background-color: var(--dark-card-bg);
+  border: 1px solid var(--dark-border-color);
+  color: var(--dark-text-primary);
+}
+
+.content-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.main-content {
+  min-height: 60vh;
+  flex: 1;
+  overflow: auto;
+  padding: 15px;
+}
+
+.footer-actions {
+  padding-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+  border-top: 1px dashed var(--dark-border-color);
+}
+
+.query-form {
+  margin-bottom: -18px;
+}
+
+.default-content {
+  padding: 20px;
+  color: var(--dark-text-primary);
+}
+</style>
+
+<!-- 保留原有的全局样式 -->
+<style>
+/* 全局深色主题样式 */
+:root {
+  --dark-bg-color: #1f2a38;
+  --dark-card-bg: #2d3a4b;
+  --dark-border-color: #425163;
+  --dark-text-primary: #e0e6ed;
+  --dark-text-secondary: #8796ad;
+  --dark-primary-color: #3475b5;
+  --dark-success-color: #67c23a;
+  --dark-warning-color: #e6a23c;
+  --dark-danger-color: #f56c6c;
+  --dark-info-color: #909399;
+}
+
+/* Element UI 深色主题覆盖 */
+.dark-card .el-card__body {
+  padding: 20px;
+}
+
+.dark-card .el-form-item__label {
+  color: var(--dark-text-secondary);
+}
+
+.dark-card .el-input__inner,
+.dark-card .el-textarea__inner,
+.dark-card .el-select .el-input__inner {
+  background-color: var(--dark-bg-color);
+  border-color: var(--dark-border-color);
+  color: var(--dark-text-primary);
+}
+
+.dark-card .el-input__inner::placeholder {
+  color: var(--dark-text-secondary);
+}
+
+.dark-card .el-table {
+  background-color: var(--dark-card-bg);
+  color: var(--dark-text-primary);
+}
+
+.dark-card .el-table th {
+  background-color: var(--dark-card-bg);
+  border-bottom-color: var(--dark-border-color);
+}
+
+.dark-card .el-table td {
+  border-bottom-color: var(--dark-border-color);
+}
+
+.dark-card .el-table--border {
+  border-color: var(--dark-border-color);
+}
+
+.dark-card .el-table--border th,
+.dark-card .el-table--border td {
+  border-right-color: var(--dark-border-color);
+}
+
+.dark-card .el-table__body tr:hover > td {
+  background-color: rgba(58, 74, 93, 0.7) !important;
+}
+</style>

src/views/command/taskEdit/index.vue

@@ -0,0 +1,987 @@
+<template>
+  <div>
+    <DarkLayout :query-form="queryForm">
+      <!-- 查询表单插槽 -->
+      <template #query-form>
+        <el-form-item label="任务名称">
+          <el-input
+            v-model="queryForm.name"
+            placeholder="请输入任务名称"
+            clearable
+            @input="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="任务代号">
+          <el-input
+            v-model="queryForm.taskCode"
+            placeholder="请输入任务代号"
+            clearable
+            @input="handleQuery"
+          />
+        </el-form-item>
+      </template>
+
+      <!-- Header右侧操作按钮 -->
+      <template #header-actions>
+        <el-button icon="el-icon-search" type="primary" @click="handleQuery">
+          查询
+        </el-button>
+
+        <el-button
+          @click="resetQuery"
+          icon="el-icon-delete"
+          type="primary"
+        > 重置 </el-button>
+        <el-button
+          @click="handleConfirm"
+          icon="el-icon-thumb"
+          type="primary"
+        > 确定方案 </el-button>
+      </template>
+
+      <!-- 主要内容 -->
+      <template #main>
+        <el-tabs v-model="activeTab" @tab-click="handleTabChange">
+          <el-tab-pane label="干扰方案" name="interference">
+            <div class="cards-container">
+              <InterferenceCard
+                v-for="plan in currentInterferencePlans"
+                :key="plan.id"
+                :plan="plan"
+                @select="handleSelectInt"
+                @check="handleInterferenceCheck"
+                @view-detail="viewDetailsInt"
+                @view-edit="viewEditInt"
+              />
+            </div>
+          </el-tab-pane>
+
+          <el-tab-pane label="靶标方案" name="target">
+            <div class="cards-container">
+              <TargetCard
+                v-for="plan in currentTargetPlans"
+                :key="plan.id"
+                :plan="plan"
+                @select="handleSelectB"
+                @check="handleTargetCheck"
+                @view-detail="viewDetailsB"
+                @view-edit="viewEditB"
+              />
+            </div>
+          </el-tab-pane>
+
+          <el-tab-pane label="测量方案" name="measurement">
+            <div class="cards-container">
+              <MeasCard
+                v-for="plan in currentMeasPlans"
+                :key="plan.id"
+                :plan="plan"
+                @select="handleSelectC"
+                @check="handleMeasCheck"
+                @view-detail="viewDetailsC"
+                @view-edit="viewEditC"
+              />
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </template>
+
+      <!-- 底部右侧分页 -->
+      <template #footer-actions>
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="pagination.currentPage"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="pagination.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="pagination.total"
+        />
+      </template>
+    </DarkLayout>
+
+    <!-- 选择方案抽屉 -->
+    <DarkDrawer
+      title="选择方案"
+      :visible.sync="drawerVisible"
+      @confirm="handleConfirm"
+      @cancel="drawerVisible=false"
+    >
+      <div class="drawer-main">
+        <!-- 干扰方案 -->
+        <div class="section-group">
+          <div class="section-header">
+            <h3 class="section-title">干扰方案</h3>
+            <div class="section-divider"></div>
+          </div>
+          <div class="cards-container">
+            <InterferenceCard
+              v-for="plan in interferencePlanData"
+              :key="plan.id"
+              :plan="plan"
+              v-if="interferencePlanData.length > 0"
+              @select="handleSelectInt"
+              @check="handleInterferenceCheck"
+              @view-detail="viewDetailsInt"
+            />
+          </div>
+        </div>
+
+        <!-- 靶标方案 -->
+        <div class="section-group">
+          <div class="section-header">
+            <h3 class="section-title">靶标方案</h3>
+            <div class="section-divider"></div>
+          </div>
+          <div class="cards-container">
+            <TargetCard
+              v-if="planListB.length > 0"
+              v-for="plan in planListB"
+              :key="plan.id"
+              :plan="plan"
+              @select="handleSelectB"
+              @check="handleTargetCheck"
+              @view-detail="viewDetailsB"
+            />
+          </div>
+        </div>
+
+        <!-- 测量方案 -->
+        <div class="section-group">
+          <div class="section-header">
+            <h3 class="section-title">测量方案</h3>
+            <div class="section-divider"></div>
+          </div>
+          <div class="cards-container">
+            <MeasCard
+              v-for="plan in measPlanData"
+              :key="plan.id"
+              :plan="plan"
+              v-if="measPlanData.length > 0"
+              @select="handleSelectC"
+              @check="handleMeasCheck"
+              @view-detail="viewDetailsC"
+            />
+          </div>
+        </div>
+
+        <!-- 当前角色 -->
+        <div class="section-group">
+          <div class="section-header">
+            <h3 class="section-title">当前角色</h3>
+            <div class="section-divider"></div>
+          </div>
+          <div>
+            <el-radio-group v-model="role">
+              <el-radio label="ordinary">普通用户</el-radio>
+              <el-radio label="command">指挥用户</el-radio>
+            </el-radio-group>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <el-button @click="drawerVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleConfirm">确定</el-button>
+      </div>
+    </DarkDrawer>
+  </div>
+</template>
+
+<script>
+import DarkLayout from './components/DarkLayout.vue'
+import TaskUserCard from '@/components/Components/TaskUserCard.vue'
+import DarkDialog from "@/components/Components/DarkDialog.vue";
+import TargetCard from "@/views/command/importTask/components/TargetCard.vue"
+import MeasCard from "@/views/command/importTask/components/MeasCard.vue"
+import InterferenceCard from "@/views/command/importTask/components/InterferenceCard.vue"
+
+export default {
+  components: {
+    DarkDialog,
+    DarkLayout,
+    TaskUserCard,
+    TargetCard,
+    MeasCard,
+    InterferenceCard
+  },
+  data() {
+    return {
+      role: 'ordinary',
+      activeTab: 'interference',
+      selectedInterference: null,
+      selectedTarget: null,
+      selectedMeas: null,
+      drawerQueryForm: {
+        planName: '',
+        taskName: '',
+        status: ''
+      },
+      filteredPlansData: [],
+      drawerVisible: false,
+      tableData: [
+        {
+          date: '2023-06-01',
+          name: '张三',
+          address: '北京市海淀区'
+        },
+        {
+          date: '2023-06-02',
+          name: '李四',
+          address: '上海市浦东新区'
+        }
+      ],
+      plans: [
+        {
+          id: '1',
+          planName: '新型导弹打击试验-综合布设方案',
+          taskName: '新型导弹打击试验',
+          taskCode: 'TASK-2023-001',
+          startTime: '2023-01-01',
+          endTime: '2023-12-31',
+          secretLevel: '秘密',
+          secretYears: '10年',
+          status: '有效',
+          interferenceSchemeStatus: '已编制',
+          measurementSchemeStatus: '已编制',
+          targetSchemeStatus: '已编制',
+          version: 'V1.0.0'
+        },
+        {
+          id: '2',
+          planName: '电子对抗演练-综合布设方案',
+          taskName: '电子对抗演练',
+          taskCode: 'TASK-2023-002',
+          startTime: '2023-02-01',
+          endTime: '2023-11-30',
+          secretLevel: '机密',
+          secretYears: '15年',
+          status: '待审核',
+          interferenceSchemeStatus: '已审核',
+          measurementSchemeStatus: '已编制',
+          targetSchemeStatus: '编制中',
+          version: 'V1.1.0'
+        },
+        {
+          id: '3',
+          planName: '电子对抗演练-综合布设方案',
+          taskName: '电子对抗演练',
+          taskCode: 'TASK-2023-003',
+          startTime: '2023-03-01',
+          endTime: '2023-10-31',
+          secretLevel: '绝密',
+          secretYears: '20年',
+          status: '草稿',
+          interferenceSchemeStatus: '未编制',
+          measurementSchemeStatus: '已编制',
+          targetSchemeStatus: '未编制',
+          version: 'V0.9.0'
+        },
+        {
+          id: '4',
+          planName: '新型导弹打击试验-综合布设方案',
+          taskName: '新型导弹打击试验',
+          taskCode: 'TASK-2023-003',
+          startTime: '2023-03-01',
+          endTime: '2023-10-31',
+          secretLevel: '绝密',
+          secretYears: '20年',
+          status: '草稿',
+          interferenceSchemeStatus: '未编制',
+          measurementSchemeStatus: '已编制',
+          targetSchemeStatus: '未编制',
+          version: 'V0.9.0'
+        },
+        {
+          id: '5',
+          planName: '电子对抗演练-综合布设方案',
+          taskName: '电子对抗演练',
+          taskCode: 'TASK-2023-001',
+          startTime: '2023-01-01',
+          endTime: '2023-12-31',
+          secretLevel: '秘密',
+          secretYears: '10年',
+          status: '有效',
+          interferenceSchemeStatus: '已编制',
+          measurementSchemeStatus: '已编制',
+          targetSchemeStatus: '已编制',
+          version: 'V1.0.0'
+        },
+      ],
+      planList: [
+        {
+          id: "import_001",
+          planName: "2024年度导弹防御系统测试方案",
+          simulationTaskName: "导弹防御系统联合仿真测试",
+          simulationStartTime: "2024-06-15 08:00:00",
+          simulationEndTime: "2024-06-20 18:00:00",
+          simulationCount: "5次",
+          simulationParticipantTasks: "雷达监测、导弹拦截、数据分析",
+          secretLevel: "机密",
+          status: "已确认",
+          username: "张三",
+          createTime: "2024-05-20 14:30:00",
+          taskType: "联合仿真"
+        },
+        {
+          id: "import_002",
+          planName: "新型雷达系统性能验证方案",
+          simulationTaskName: "相控阵雷达多目标跟踪测试",
+          simulationStartTime: "2024-07-10 09:00:00",
+          simulationEndTime: "2024-07-15 17:00:00",
+          simulationCount: "3次",
+          simulationParticipantTasks: "目标识别、轨迹预测、威胁评估",
+          secretLevel: "秘密",
+          status: "未确认",
+          username: "李四",
+          createTime: "2024-06-01 10:15:00",
+          taskType: "性能验证"
+        },
+        {
+          id: "import_003",
+          planName: "电子对抗系统实战演练方案",
+          simulationTaskName: "复杂电磁环境下电子对抗演练",
+          simulationStartTime: "2024-08-05 08:30:00",
+          simulationEndTime: "2024-08-10 19:00:00",
+          simulationCount: "8次",
+          simulationParticipantTasks: "电子干扰、通信保障、频谱监测",
+          secretLevel: "绝密",
+          status: "草稿",
+          username: "王五",
+          createTime: "2024-07-15 16:45:00",
+          taskType: "实战演练"
+        }
+      ],
+      dialogVisible: false,
+      currentPlan: {},
+      queryForm: {
+        name: '',
+        taskCode: ''
+      },
+      planListB: [
+        {
+          id: "target_001",
+          planName: "2024年度东海靶场实弹射击训练方案",
+          taskName: "东海舰队实弹射击训练任务",
+          taskCode: "DH-2024-TS-001",
+          startTime: "2024-06-15 08:00:00",
+          endTime: "2024-06-20 18:00:00",
+          compileStatus: "已编制",
+          secretLevel: "机密",
+          secretYears: "20年",
+          status: "有效"
+        },
+        {
+          id: "target_002",
+          planName: "南海区域反舰导弹靶标测试方案",
+          taskName: "南海舰队反舰导弹测试任务",
+          taskCode: "NH-2024-ASM-002",
+          startTime: "2024-07-10 09:00:00",
+          endTime: "2024-07-15 17:00:00",
+          compileStatus: "编制中",
+          secretLevel: "秘密",
+          secretYears: "10年",
+          status: "待审核"
+        },
+        {
+          id: "target_003",
+          planName: "黄海区域靶标部署方案",
+          taskName: "黄海联合演习任务",
+          taskCode: "HH-2024-TS-003",
+          startTime: "2024-08-01 08:00:00",
+          endTime: "2024-08-05 18:00:00",
+          compileStatus: "已编制",
+          secretLevel: "秘密",
+          secretYears: "10年",
+          status: "有效"
+        },
+        {
+          id: "target_004",
+          planName: "渤海湾靶场实弹训练方案",
+          taskName: "北海舰队实弹训练任务",
+          taskCode: "BH-2024-TS-004",
+          startTime: "2024-09-10 09:00:00",
+          endTime: "2024-09-15 17:00:00",
+          compileStatus: "已审核",
+          secretLevel: "机密",
+          secretYears: "15年",
+          status: "待执行"
+        },
+        {
+          id: "target_005",
+          planName: "远洋靶标测试方案",
+          taskName: "远洋舰队训练任务",
+          taskCode: "YY-2024-TS-005",
+          startTime: "2024-10-05 08:00:00",
+          endTime: "2024-10-20 18:00:00",
+          compileStatus: "编制中",
+          secretLevel: "绝密",
+          secretYears: "20年",
+          status: "草稿"
+        },
+        {
+          id: "target_006",
+          planName: "近海靶标布设方案",
+          taskName: "近海防御演习任务",
+          taskCode: "JH-2024-TS-006",
+          startTime: "2024-11-10 09:00:00",
+          endTime: "2024-11-15 17:00:00",
+          compileStatus: "已编制",
+          secretLevel: "秘密",
+          secretYears: "10年",
+          status: "有效"
+        },
+        {
+          id: "target_007",
+          planName: "岛礁区域靶标部署方案",
+          taskName: "岛礁防御训练任务",
+          taskCode: "DJ-2024-TS-007",
+          startTime: "2024-12-01 08:00:00",
+          endTime: "2024-12-05 18:00:00",
+          compileStatus: "已编制",
+          secretLevel: "机密",
+          secretYears: "15年",
+          status: "待审核"
+        }
+      ],
+      measPlanData: [
+        {
+          id: "meas_001",
+          planName: "2024年度导弹试验测量方案",
+          taskName: "东风系列导弹测试任务",
+          taskCode: "DF-2024-MS-001",
+          startTime: "2024-06-15 08:00:00",
+          endTime: "2024-06-20 18:00:00",
+          compileStatus: "已编制",
+          secretLevel: "机密",
+          secretYears: "20年",
+          status: "有效"
+        },
+        {
+          id: "meas_002",
+          planName: "新型雷达系统测量验证方案",
+          taskName: "相控阵雷达性能验证任务",
+          taskCode: "PA-2024-RD-002",
+          startTime: "2024-07-10 09:00:00",
+          endTime: "2024-07-15 17:00:00",
+          compileStatus: "编制中",
+          secretLevel: "秘密",
+          secretYears: "10年",
+          status: "待审核"
+        },
+        {
+          id: "meas_003",
+          planName: "卫星导航测量方案",
+          taskName: "导航系统精度验证任务",
+          taskCode: "WD-2024-MS-003",
+          startTime: "2024-08-05 08:00:00",
+          endTime: "2024-08-10 18:00:00",
+          compileStatus: "已编制",
+          secretLevel: "机密",
+          secretYears: "15年",
+          status: "有效"
+        },
+        {
+          id: "meas_004",
+          planName: "无人机测量方案",
+          taskName: "无人机侦察系统测试任务",
+          taskCode: "WRJ-2024-MS-004",
+          startTime: "2024-09-10 09:00:00",
+          endTime: "2024-09-15 17:00:00",
+          compileStatus: "已审核",
+          secretLevel: "秘密",
+          secretYears: "10年",
+          status: "待执行"
+        },
+        {
+          id: "meas_005",
+          planName: "舰艇雷达测量方案",
+          taskName: "舰艇雷达性能测试任务",
+          taskCode: "JD-2024-MS-005",
+          startTime: "2024-10-15 08:00:00",
+          endTime: "2024-10-20 18:00:00",
+          compileStatus: "编制中",
+          secretLevel: "机密",
+          secretYears: "15年",
+          status: "草稿"
+        },
+        {
+          id: "meas_006",
+          planName: "光电测量系统验证方案",
+          taskName: "光电探测系统测试任务",
+          taskCode: "GD-2024-MS-006",
+          startTime: "2024-11-05 09:00:00",
+          endTime: "2024-11-10 17:00:00",
+          compileStatus: "已编制",
+          secretLevel: "秘密",
+          secretYears: "10年",
+          status: "有效"
+        },
+        {
+          id: "meas_007",
+          planName: "声呐系统测量方案",
+          taskName: "水下探测系统测试任务",
+          taskCode: "SN-2024-MS-007",
+          startTime: "2024-12-10 08:00:00",
+          endTime: "2024-12-15 18:00:00",
+          compileStatus: "已编制",
+          secretLevel: "绝密",
+          secretYears: "20年",
+          status: "待审核"
+        }
+      ],
+      interferencePlanData: [
+        {
+          id: 'plan-001',
+          planName: '东海靶场2023年度靶标保障方案',
+          taskName: '新型导弹打击试验',
+          taskCode: 'DH-2023-001',
+          startTime: '2023-06-15',
+          endTime: '2023-06-20',
+          compileStatus: '已编制',
+          secretLevel: '秘密',
+          secretYears: '10年',
+          status: '有效'
+        },
+        {
+          id: 'plan-002',
+          planName: '南海靶场电子对抗方案',
+          taskName: '电子对抗演练',
+          taskCode: 'NH-2023-002',
+          startTime: '2023-07-10',
+          endTime: '2023-07-15',
+          compileStatus: '编制中',
+          secretLevel: '机密',
+          secretYears: '5年',
+          status: '待审核'
+        },
+        {
+          id: 'plan-003',
+          planName: '黄海区域电子干扰方案',
+          taskName: '黄海联合演习',
+          taskCode: 'HH-2023-003',
+          startTime: '2023-08-05',
+          endTime: '2023-08-10',
+          compileStatus: '已编制',
+          secretLevel: '秘密',
+          secretYears: '10年',
+          status: '有效'
+        },
+        {
+          id: 'plan-004',
+          planName: '渤海湾电子对抗演练方案',
+          taskName: '北海舰队训练',
+          taskCode: 'BH-2023-004',
+          startTime: '2023-09-15',
+          endTime: '2023-09-20',
+          compileStatus: '已审核',
+          secretLevel: '机密',
+          secretYears: '15年',
+          status: '待执行'
+        },
+        {
+          id: 'plan-005',
+          planName: '远洋电子干扰方案',
+          taskName: '远洋舰队演习',
+          taskCode: 'YY-2023-005',
+          startTime: '2023-10-10',
+          endTime: '2023-10-25',
+          compileStatus: '编制中',
+          secretLevel: '绝密',
+          secretYears: '20年',
+          status: '草稿'
+        },
+        {
+          id: 'plan-006',
+          planName: '近海电子防御方案',
+          taskName: '近海防御训练',
+          taskCode: 'JH-2023-006',
+          startTime: '2023-11-05',
+          endTime: '2023-11-10',
+          compileStatus: '已编制',
+          secretLevel: '秘密',
+          secretYears: '10年',
+          status: '有效'
+        },
+        {
+          id: 'plan-007',
+          planName: '岛礁区域电子对抗方案',
+          taskName: '岛礁防御演习',
+          taskCode: 'DJ-2023-007',
+          startTime: '2023-12-01',
+          endTime: '2023-12-05',
+          compileStatus: '已编制',
+          secretLevel: '机密',
+          secretYears: '15年',
+          status: '待审核'
+        }
+      ],
+      // 分页配置
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      },
+      // 各标签页分页配置
+      interferencePagination: {
+        currentPage: 1,
+        pageSize: 6,
+        total: 0
+      },
+      targetPagination: {
+        currentPage: 1,
+        pageSize: 6,
+        total: 0
+      },
+      measPagination: {
+        currentPage: 1,
+        pageSize: 6,
+        total: 0
+      },
+      showAdvancedSearch: false,
+      // 过滤后的数据
+      filteredInterference: [],
+      filteredTarget: [],
+      filteredMeas: []
+    }
+  },
+  computed: {
+    // 计算当前标签页显示的干扰方案
+    currentInterferencePlans() {
+      const start = (this.interferencePagination.currentPage - 1) * this.interferencePagination.pageSize;
+      const end = start + this.interferencePagination.pageSize;
+      return this.filteredInterference.slice(start, end);
+    },
+    // 计算当前标签页显示的靶标方案
+    currentTargetPlans() {
+      const start = (this.targetPagination.currentPage - 1) * this.targetPagination.pageSize;
+      const end = start + this.targetPagination.pageSize;
+      return this.filteredTarget.slice(start, end);
+    },
+    // 计算当前标签页显示的测量方案
+    currentMeasPlans() {
+      const start = (this.measPagination.currentPage - 1) * this.measPagination.pageSize;
+      const end = start + this.measPagination.pageSize;
+      return this.filteredMeas.slice(start, end);
+    }
+  },
+  created() {
+    // 初始化过滤数据
+    this.filteredInterference = [...this.interferencePlanData];
+    this.filteredTarget = [...this.planListB];
+    this.filteredMeas = [...this.measPlanData];
+
+    // 初始化分页总数
+    this.interferencePagination.total = this.filteredInterference.length;
+    this.targetPagination.total = this.filteredTarget.length;
+    this.measPagination.total = this.filteredMeas.length;
+  },
+  methods: {
+    // 处理标签页切换
+    handleTabChange() {
+      // 切换标签页时重置当前页为1
+      if (this.activeTab === 'interference') {
+        this.interferencePagination.currentPage = 1;
+      } else if (this.activeTab === 'target') {
+        this.targetPagination.currentPage = 1;
+      } else if (this.activeTab === 'measurement') {
+        this.measPagination.currentPage = 1;
+      }
+    },
+
+    // 处理标签页分页大小变化
+    handleTabSizeChange(size, type) {
+      if (type === 'interference') {
+        this.interferencePagination.pageSize = size;
+        this.interferencePagination.currentPage = 1;
+      } else if (type === 'target') {
+        this.targetPagination.pageSize = size;
+        this.targetPagination.currentPage = 1;
+      } else if (type === 'measurement') {
+        this.measPagination.pageSize = size;
+        this.measPagination.currentPage = 1;
+      }
+    },
+
+    // 处理标签页当前页变化
+    handleTabCurrentChange(page, type) {
+      if (type === 'interference') {
+        this.interferencePagination.currentPage = page;
+      } else if (type === 'target') {
+        this.targetPagination.currentPage = page;
+      } else if (type === 'measurement') {
+        this.measPagination.currentPage = page;
+      }
+    },
+
+    // 干扰方案选择处理
+    handleInterferenceCheck(data) {
+      if (data.checked) {
+        this.interferencePlanData = this.interferencePlanData.map(plan => ({
+          ...plan,
+          isSelected: plan.id === data.plan.id
+        }));
+        this.selectedInterference = data.plan;
+      } else {
+        this.selectedInterference = null;
+        const index = this.interferencePlanData.findIndex(plan => plan.id === data.plan.id);
+        if (index !== -1) {
+          this.interferencePlanData[index].isSelected = false;
+        }
+      }
+    },
+
+    // 靶标方案选择处理
+    handleTargetCheck(data) {
+      if (data.checked) {
+        this.planListB = this.planListB.map(plan => ({
+          ...plan,
+          isSelected: plan.id === data.plan.id
+        }));
+        this.selectedTarget = data.plan;
+      } else {
+        this.selectedTarget = null;
+        const index = this.planListB.findIndex(plan => plan.id === data.plan.id);
+        if (index !== -1) {
+          this.planListB[index].isSelected = false;
+        }
+      }
+    },
+
+    // 测量方案选择处理
+    handleMeasCheck(data) {
+      if (data.checked) {
+        this.measPlanData = this.measPlanData.map(plan => ({
+          ...plan,
+          isSelected: plan.id === data.plan.id
+        }));
+        this.selectedMeas = data.plan;
+      } else {
+        this.selectedMeas = null;
+        const index = this.measPlanData.findIndex(plan => plan.id === data.plan.id);
+        if (index !== -1) {
+          this.measPlanData[index].isSelected = false;
+        }
+      }
+    },
+
+    // 确定按钮处理
+    handleConfirm() {
+      if (!this.selectedInterference || !this.selectedTarget || !this.selectedMeas) {
+        this.$message.warning('请分别选择干扰方案、靶标方案和测量方案');
+        return;
+      }
+
+      this.$router.push({
+        path: '/taskEdit/OverallPlan',
+        query: {
+          interferenceName: this.selectedInterference.planName,
+          targetName: this.selectedTarget.planName,
+          measName: this.selectedMeas.planName,
+          role: this.role
+        }
+      });
+
+      this.drawerVisible = false;
+    },
+
+    // 查询处理
+    handleQuery() {
+      const {name, taskCode} = this.queryForm;
+
+      // 过滤干扰方案
+      this.filteredInterference = this.interferencePlanData.filter(plan => {
+        const matchName = name ? plan.taskName.includes(name) : true;
+        const matchCode = taskCode ? plan.taskCode.includes(taskCode) : true;
+        return matchName && matchCode;
+      });
+
+      // 过滤靶标方案
+      this.filteredTarget = this.planListB.filter(plan => {
+        const matchName = name ? plan.taskName.includes(name) : true;
+        const matchCode = taskCode ? plan.taskCode.includes(taskCode) : true;
+        return matchName && matchCode;
+      });
+
+      // 过滤测量方案
+      this.filteredMeas = this.measPlanData.filter(plan => {
+        const matchName = name ? plan.taskName.includes(name) : true;
+        const matchCode = taskCode ? plan.taskCode.includes(taskCode) : true;
+        return matchName && matchCode;
+      });
+
+      // 更新分页总数
+      this.interferencePagination.total = this.filteredInterference.length;
+      this.targetPagination.total = this.filteredTarget.length;
+      this.measPagination.total = this.filteredMeas.length;
+
+      // 重置当前页
+      this.interferencePagination.currentPage = 1;
+      this.targetPagination.currentPage = 1;
+      this.measPagination.currentPage = 1;
+    },
+
+    // 重置查询
+    resetQuery() {
+      this.queryForm = {
+        name: '',
+        taskCode: ''
+      };
+      this.handleQuery();
+    },
+
+    handleSelectInt() {
+    },
+    viewDetailsInt() {
+    },
+    viewEditInt(val){
+      val={
+        ...val,
+        planType: 'int'
+      }
+      this.$router.push({path: '/taskEdit/OverallPlan', query: val})
+      console.log("编辑干扰方案：",val)
+    },
+    handleSelectB() {
+    },
+    viewDetailsB() {
+    },
+    viewEditB(val) {
+      val={
+        ...val,
+        planType: 'targ'
+      }
+      this.$router.push({path: '/taskEdit/OverallPlan', query: val})
+      console.log("编辑靶标方案：",val)
+    },
+    handleSelectC() {
+    },
+    viewDetailsC(val) {
+      console.log("详情测量方案：",val)
+    },
+    viewEditC(val) {
+      val={
+        ...val,
+        planType: 'mea'
+      }
+      this.$router.push({path: '/taskEdit/OverallPlan', query: val})
+      console.log("编辑测量方案：",val)
+    },
+    handleEditInt() {
+      this.$router.push({path: '/planningSchem/Interference', query: {planType: '干扰方案'}})
+    },
+    handleEditB() {
+      this.$router.push({path: '/taskEdit/TargerEdit', query: {planType: '靶标方案'}})
+    },
+    handleEditC() {
+      this.$router.push({path: '/taskEdit/MeasEdit', query: {planType: '测量方案'}})
+    },
+    filteredPlans(type) {
+      const statusField = {
+        interference: 'interferenceSchemeStatus',
+        target: 'targetSchemeStatus',
+        measurement: 'measurementSchemeStatus'
+      }[type];
+
+      return this.plans.filter(plan =>
+        plan[statusField] && plan[statusField] !== '未编制'
+      );
+    },
+    handleViewDetail() {
+      this.$router.push({path: '/importTask/configForPlan'})
+    },
+    chooseTask(plan) {
+      console.log('任务已经选择，选择方案:', plan)
+      this.currentPlan = plan
+      this.drawerVisible = true
+    },
+    handleEdit(plan) {
+      console.log('编辑计划:', plan)
+      this.$router.push({path: ''})
+    },
+    handleSizeChange(val) {
+      this.pagination.pageSize = val
+      this.fetchData()
+    },
+    handleCurrentChange(val) {
+      this.pagination.currentPage = val
+      this.fetchData()
+    },
+    fetchData() {
+      // 获取数据逻辑
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-main {
+  padding: 20px;
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
+.section-group {
+  margin-bottom: 30px;
+}
+
+.section-header {
+  margin-bottom: 15px;
+}
+
+.section-title {
+  color: #e0e6ed;
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+}
+
+.section-title::before {
+  content: '';
+  display: inline-block;
+  width: 4px;
+  height: 18px;
+  background-color: #409EFF;
+  border-radius: 2px;
+  margin-right: 8px;
+}
+
+.section-divider {
+  height: 1px;
+  background: linear-gradient(90deg, rgba(64, 158, 255, 0.5), rgba(64, 158, 255, 0));
+}
+
+/* 卡片容器样式 - 确保每行显示3个，总共6个卡片一页 */
+.cards-container {
+  padding: 15px 0;
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 20px;
+}
+
+/* 标签页分页样式 */
+.tab-pagination {
+  margin-top: 20px;
+  text-align: center;
+  padding: 10px 0;
+}
+
+/* 抽屉滚动条样式优化 */
+.drawer-main::-webkit-scrollbar {
+  width: 6px;
+}
+
+.drawer-main::-webkit-scrollbar-track {
+  background: #2c3e50;
+}
+
+.drawer-main::-webkit-scrollbar-thumb {
+  background: #4a6572;
+  border-radius: 3px;
+}
+::v-deep .el-tabs__item  {
+  color: white;
+}
+</style>

src/views/showSituation/countdown.vue

@@ -91,7 +91,7 @@
         :append-to-body="true"
         :with-header="true"
         :close-on-press-escape="true"
-        :wrapperClosable="false"
+        :wrapperClosable="true"
       >
         <div class="drawer-inner">
           <!-- ✅ 左上角唯一标题（放大） -->
@@ -680,14 +680,14 @@ body { background-color: #1a1a1a; color: white; overflow: hidden; }
 ::v-deep.dark-dialog { background: transparent !important; box-shadow: none; }
 
 /* Drawer 透明修复 */
-:deep(.dark-drawer .el-drawer__body),
-::v-deep(.dark-drawer .el-drawer__body){ background: transparent !important; padding: 0; }
-:deep(.dark-drawer.el-drawer),
-:deep(.dark-drawer .el-drawer__container),
-:deep(.dark-drawer .el-drawer__header),
-::v-deep(.dark-drawer.el-drawer),
-::v-deep(.dark-drawer .el-drawer__container),
-::v-deep(.dark-drawer .el-drawer__header){
+::v-deep .dark-drawer .el-drawer__body,
+::v-deep .dark-drawer .el-drawer__body{ background: transparent !important; padding: 0; }
+::v-deep.dark-drawer.el-drawer,
+::v-deep.dark-drawer .el-drawer__container,
+::v-deep.dark-drawer .el-drawer__header,
+::v-deep.dark-drawer.el-drawer,
+::v-deep.dark-drawer .el-drawer__container,
+::v-deep.dark-drawer .el-drawer__header{
   background: transparent !important; box-shadow: none !important; border: 0 !important; color:#ecf0f1;
 }
 /* 设备状态按钮（方形） */

src/views/showSituation/largeScreen.vue

@@ -1,11 +1,1211 @@
-<script setup>
+<template>
+  <el-container class="full-container">
+    <!-- 主容器 -->
+    <el-container direction="horizontal" class="main-horizontal-container">
+      <!-- 主内容区域 -->
+      <el-container direction="vertical" class="main-content-container">
+        <!-- 主要地图区域 - 占80%高度 -->
+        <el-main class="main-map">
+          <div class="map-container">
+            <img src="/img/map.png" alt="军事地图" class="map-image">
 
-</script>
+            <!-- 箭头覆盖层 -->
+            <svg class="arrow-overlay" v-if="showRedLine">
+              <defs>
+                <marker
+                  id="arrowhead"
+                  markerWidth="10"
+                  markerHeight="7"
+                  refX="10"
+                  refY="3.5"
+                  orient="auto"
+                >
+                  <polygon points="0 0, 10 3.5, 0 7" fill="red" />
+                </marker>
+              </defs>
+              <line
+                x1="62%"
+                y1="62%"
+                x2="39%"
+                y2="15%"
+                stroke="red"
+                stroke-width="2"
+                stroke-dasharray="5,5"
+                marker-end="url(#arrowhead)"
+                class="connecting-arrow"
+              />
+            </svg>
 
-<template>
-<div>000</div>
+            <svg class="arrow-overlay" v-if="showBlueLine">
+              <defs>
+                <marker
+                  id="arrowhead-blue"
+                  markerWidth="10"
+                  markerHeight="7"
+                  refX="10"
+                  refY="3.5"
+                  orient="auto"
+                >
+                  <polygon points="0 0, 10 3.5, 0 7" fill="blue" />
+                </marker>
+              </defs>
+              <line
+                x1="63%"
+                y1="62%"
+                x2="40%"
+                y2="15%"
+                stroke="blue"
+                stroke-width="2"
+                stroke-dasharray="5,5"
+                marker-end="url(#arrowhead-blue)"
+                class="connecting-arrow"
+              />
+            </svg>
+
+            <!-- 事件进度条组件 - 半透明背景 -->
+            <div class="event-progress-container" @mouseenter="showEventDetail = true" @mouseleave="showEventDetail = false">
+              <div class="progress-bar">
+                <div
+                  class="progress-fill"
+                  :style="{ width: `${currentProgress}%`, backgroundColor: currentEventColor }"
+                ></div>
+                <div class="progress-markers">
+                  <div
+                    v-for="(event, index) in events"
+                    :key="index"
+                    class="progress-marker"
+                    :style="{ left: `${event.position}%`, backgroundColor: currentEventIndex === index ? currentEventColor : '' }"
+                    :class="{ 'active': currentEventIndex === index }"
+                    @click="jumpToEvent(index)"
+                    :title="event.title"
+                  ></div>
+                </div>
+              </div>
+
+              <!-- 默认显示：仅事件名称和时间 -->
+              <div class="current-event-basic">
+                <span :class="['event-indicator', events[currentEventIndex] && events[currentEventIndex].dotClass]"></span>
+                <span class="event-name">{{ events[currentEventIndex] && events[currentEventIndex].title || '无事件' }}</span>
+                <span class="event-time">{{ events[currentEventIndex] && events[currentEventIndex].time || '' }}</span>
+              </div>
+
+              <!-- 悬浮显示：完整事件信息 -->
+              <div class="current-event-detail" v-if="showEventDetail && events[currentEventIndex]">
+                <div class="detail-content">{{ events[currentEventIndex].description }}</div>
+                <div class="detail-status">{{ events[currentEventIndex].status }}</div>
+              </div>
+            </div>
+
+            <!-- 画中画 -->
+            <div class="pip-container">
+              <img
+                :src="pipImage"
+                alt=""
+                @mouseover="showPIP(true)"
+                @mouseout="showPIP(false)"
+                @click="openPipPreview"
+                :class="{ 'pip-expanded': pipVisible }"
+              >
+            </div>
+
+            <!-- 线路显示控制（默认折叠） -->
+            <div class="legend-container">
+              <div
+                class="legend-toggle"
+                @click="isLegendExpanded = !isLegendExpanded"
+                :class="{ 'expanded': isLegendExpanded }"
+              >
+                {{ isLegendExpanded ? '收起线路控制 ▲' : '线路控制 ▶' }}
+              </div>
+              <div class="legend-control" v-if="isLegendExpanded">
+                <div class="legend-title">线路显示控制</div>
+                <div class="legend-item">
+                  <el-checkbox v-model="showRedLine" @change="toggleLine('red')">
+                    <span class="line-sample red"></span> 虚拟弹道
+                  </el-checkbox>
+                </div>
+                <div class="legend-item">
+                  <el-checkbox v-model="showBlueLine" @change="toggleLine('blue')">
+                    <span class="line-sample blue"></span> 实际弹道
+                  </el-checkbox>
+                </div>
+              </div>
+            </div>
+
+            <!-- 任务时序 - 左下角 -->
+            <div class="task-timeline-container">
+              <div class="telemetry-card time-list-card">
+                <div class="time-list-header">
+                  <div class="list-title">任务时序</div>
+                  <div class="carousel-controls">
+                    <el-button icon="el-icon-arrow-up" size="mini" @click="prevEvent"></el-button>
+                    <el-button icon="el-icon-arrow-down" size="mini" @click="nextEvent"></el-button>
+                  </div>
+                </div>
+                <div class="time-list-carousel">
+                  <transition name="carousel-fade">
+                    <div class="event-slide" :key="carouselEventIndex">
+                      <div class="event-slide-item"
+                           :class="['event-item', currentCarouselEvent.dotClass]"
+                           @click="selectEvent(currentCarouselEvent.id)">
+                        <div class="event-time">{{ currentCarouselEvent.time }}</div>
+                        <div class="event-title">{{ currentCarouselEvent.title }}</div>
+                      </div>
+                    </div>
+                  </transition>
+                </div>
+              </div>
+            </div>
+
+            <!-- 作业时间和气象信息卡片 - 右下角 -->
+            <div class="info-card-container">
+              <div class="telemetry-card combined-card">
+                <!-- 作业时间 -->
+                <div class="section-title">作业时间</div>
+                <div class="time-details">
+                  <div class="time-detail-item">
+                    <div class="time-label">作业时间</div>
+                    <div class="time-value military-time">{{ operationTime }}</div>
+                  </div>
+                  <div class="time-detail-item">
+                    <div class="time-label">作业零点时间</div>
+                    <div class="time-value military-time">{{ zeroTime }}</div>
+                  </div>
+                </div>
+
+                <!-- 气象信息 -->
+                <div class="section-title">气象信息</div>
+                <div class="weather-details">
+                  <div class="telemetry-row">
+                    <div class="telemetry-record">
+                      <div class="telemetry-label">风速 (km/h)</div>
+                      <div class="telemetry-value status-info">{{ telemetry.windSpeed }}</div>
+                    </div>
+                    <div class="telemetry-record">
+                      <div class="telemetry-label">风向</div>
+                      <div class="telemetry-value status-secondary">{{ telemetry.windDirection }}</div>
+                    </div>
+                  </div>
+                  <div class="telemetry-row">
+                    <div class="telemetry-record">
+                      <div class="telemetry-label">能见度 (km)</div>
+                      <div class="telemetry-value status-success">{{ telemetry.visibility }}</div>
+                    </div>
+                    <div class="telemetry-record">
+                      <div class="telemetry-label">温度 (°C)</div>
+                      <div class="telemetry-value status-secondary">{{ telemetry.temperature }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-main>
+      </el-container>
+    </el-container>
+
+    <!-- 临机调整弹窗 - 深色背景 -->
+    <el-dialog
+      title="临机调整建议"
+      :visible.sync="adjustmentDialogVisible"
+      width="600px"
+      custom-class="military-dialog"
+    >
+      <div class="adjustment-detail">
+        <div class="detail-section">
+          <h4>调整原因</h4>
+          <p>{{ currentAdjustment.reason }}</p>
+        </div>
+
+        <div class="detail-section">
+          <h4>建议调整</h4>
+          <ul class="adjustment-steps">
+            <li v-for="(step, index) in currentAdjustment.steps" :key="index">
+              {{ step }}
+            </li>
+          </ul>
+        </div>
+
+        <div class="detail-section">
+          <h4>影响评估</h4>
+          <p>{{ currentAdjustment.impact }}</p>
+        </div>
+      </div>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button class="military-btn" @click="sendToInterference">发送至干扰席位</el-button>
+        <el-button class="military-btn primary" @click="sendToMeasurement">发送至测量席位</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 画中画预览弹窗 -->
+    <el-dialog
+      title="视频预览"
+      :visible.sync="pipPreviewVisible"
+      width="80%"
+      height="80%"
+      custom-class="pip-preview-dialog"
+      :close-on-click-modal="false"
+    >
+      <div class="preview-container">
+        <img
+          :src="pipImage"
+          alt="战术图像预览"
+          class="preview-image"
+          :class="{ 'loading': isImageLoading }"
+          @load="isImageLoading = false"
+        >
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button class="military-btn primary" @click="pipPreviewVisible = false">关闭预览</el-button>
+      </span>
+    </el-dialog>
+  </el-container>
 </template>
 
-<style scoped lang="scss">
+<script>
+import { mapActions, mapGetters } from 'vuex'
+export default {
+  data() {
+    return {
+      // 初始化作业时间为任务开始后一段时间
+      operationTime: '00:05:30.123',
+      // 零点时间设置为任务开始基准时间（非全零）
+      zeroTime: '08:00:00.000',
+      showRedLine: true,
+      showBlueLine: true,
+      isLegendExpanded: false, // 线路控制折叠状态
+      showEventDetail: false, // 控制事件详情显示
+      telemetry: {
+        windSpeed: '12.8',
+        windDirection: '东北',
+        temperature: '25.3',
+        visibility: '10.0'
+      },
+      views: [
+        { value: '1', label: '主视角' ,img: 'img/x01.png'},
+        { value: '2', label: '俯视图', img: '/img/x02.png' },
+        { value: '3', label: '侧视图' ,img: '/img/x03.png'},
+        { value: '4', label: '红外视角', img: '/img/x04.png' }
+      ],
+      pipVisible: false,
+      // 画中画预览相关
+      pipPreviewVisible: false,
+      isImageLoading: false,
+      // 事件数据
+      events: [
+        {
+          id: 1,
+          title: '蓝方观测装置部署完成',
+          time: 'T-00:05:00',
+          description: '蓝方完成高空观测装置A1、地面观测装置B2和移动观测装置C3的部署。',
+          status: '覆盖率: 92%',
+          dotClass: 'info',
+          position: 10
+        },
+        {
+          id: 2,
+          title: '蓝方干扰装备启动',
+          time: 'T-00:02:30',
+          description: '蓝方干扰装备D1和D2开始启动，进入待命状态。',
+          status: '功率: 60%',
+          dotClass: 'info',
+          position: 30
+        },
+        {
+          id: 3,
+          title: '红方装备A侦察活动开始',
+          time: 'T+00:00:00',
+          description: '红方装备类型A开始进入监视区域，执行侦察任务。',
+          status: '目标: 蓝方指挥中心',
+          dotClass: 'warning',
+          position: 50
+        },
+        {
+          id: 4,
+          title: '蓝方启动干扰',
+          time: 'T+00:02:15',
+          description: '蓝方干扰装备D1提升功率至95%，开始对红方装备A实施定向干扰。',
+          status: '干扰效果: 显著',
+          dotClass: 'success',
+          position: 70
+        },
+        {
+          id: 5,
+          title: '红方电子战装备启动',
+          time: 'T+00:04:30',
+          description: '红方装备B开始对蓝方通信系统实施电子干扰。',
+          status: '网络稳定性: 75%',
+          dotClass: 'critical',
+          position: 90
+        }
+      ],
+      currentEventIndex: 2, // 时间线当前事件索引
+      carouselEventIndex: 0, // 轮播当前事件索引（独立于时间线）
+      carouselInterval: null, // 轮播定时器
+      // 临机调整建议
+      adjustmentAdvices: [
+        {
+          id: 1,
+          title: '调整干扰频率',
+          time: 'T+00:01:45',
+          description: '建议调整D1干扰装备频率至最高以应对红方侦察',
+          type: 'warning',
+          isNew: true,
+          reason: '红方装备A的侦察频率已被识别，当前干扰效果开始减弱',
+          steps: [
+            '将D1干扰装备频率调整至最高',
+            '保持对红方装备A的持续干扰'
+          ],
+          impact: '预计可使红方侦察效率大幅降低'
+        },
+        {
+          id: 2,
+          title: '调整观测角度',
+          time: 'T+00:03:20',
+          description: '建议调整A1观测装置角度以扩大覆盖范围',
+          type: 'info',
+          isNew: false,
+          reason: '当前A1观测装置存在观测盲区',
+          steps: [
+            '降低A1观测装置仰角',
+            '调整水平旋转范围',
+            '同步校准B2装置进行协同观测'
+          ],
+          impact: '将扩大覆盖范围，观测精度保持不变'
+        }
+      ],
+      adjustmentDialogVisible: false,
+      currentAdjustment: {}
+    }
+  },
+  computed: {
+    // 从 Vuex 获取画中画图片
+    ...mapGetters('senPicture', ['getPipImage']),
+    pipImage() {
+      // 优先使用 Vuex 中的图片，默认显示第一个
+      return this.getPipImage || this.views[0].img
+    },
+    // 计算当前进度
+    currentProgress() {
+      return this.events[this.currentEventIndex] && this.events[this.currentEventIndex].position || 0;
+    },
+    // 当前事件颜色
+    currentEventColor() {
+      const colorMap = {
+        info: '#1890ff',
+        warning: '#faad14',
+        success: '#52c41a',
+        critical: '#ff4d4f'
+      };
+      const currentEvent = this.events && this.events[this.currentEventIndex];
+      return (currentEvent && colorMap[currentEvent.dotClass]) || '#1890ff';
+    },
+    // 当前轮播显示的事件（独立于时间线）
+    currentCarouselEvent() {
+      return this.events[this.carouselEventIndex] || {};
+    },
+    // 总轮播页数
+    totalEvents() {
+      return this.events.length;
+    }
+  },
+  created() {
+    this.initTimeTracking();
+  },
+  mounted() {
+    //作业时间
+    this.setTimer();
+    this.initTelemetryUpdates();
+    window.addEventListener('resize', this.handleResize);
+    // 启动自动轮播（3秒一次）
+    this.startEventCarousel(3000);
+
+    // 模拟新建议推送效果
+    setTimeout(() => {
+      this.adjustmentAdvices.push({
+        id: 3,
+        title: '增强通信加密',
+        time: 'T+00:05:10',
+        description: '检测到红方正在尝试破解通信密码，建议立即增强加密等级',
+        type: 'critical',
+        isNew: true,
+        reason: '红方电子战单位正在实施密码破解攻击',
+        steps: [
+          '启动AES-256加密协议',
+          '每30秒自动更换一次会话密钥',
+          '启用跳频通信模式'
+        ],
+        impact: '通信安全性将显著提升，但可能增加10%的通信延迟'
+      });
+    }, 8000);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize);
+    if (this.carouselInterval) {
+      clearInterval(this.carouselInterval);
+    }
+  },
+  methods: {
+    initTimeTracking() {
+      // 解析零点时间作为基准时间
+      const zeroParts = this.zeroTime.split(/[:.]/).map(Number);
+      const baseHours = zeroParts[0];
+      const baseMinutes = zeroParts[1];
+      const baseSeconds = zeroParts[2];
+      const baseMs = zeroParts[3] || 0;
+
+      // 启动定时器更新作业时间（基于零点时间递增）
+      setInterval(() => {
+        // 解析当前作业时间
+        const timeParts = this.operationTime.split(/[:.]/).map(Number);
+        let hours = timeParts[0];
+        let minutes = timeParts[1];
+        let seconds = timeParts[2];
+        let milliseconds = timeParts[3];
+
+        // 毫秒级递增
+        milliseconds += 10;
+        if (milliseconds >= 1000) {
+          milliseconds = 0;
+          seconds++;
+          if (seconds >= 60) {
+            seconds = 0;
+            minutes++;
+            if (minutes >= 60) {
+              minutes = 0;
+              hours++;
+            }
+          }
+        }
+
+        // 格式化作业时间
+        this.operationTime = [
+          hours.toString().padStart(2, '0'),
+          minutes.toString().padStart(2, '0'),
+          seconds.toString().padStart(2, '0'),
+          milliseconds.toString().padStart(3, '0')
+        ].join(':').replace(/:(\d{3})$/, '.$1');
+      }, 10);
+    },
+    setTimer() {
+      setInterval(() => {
+        const timeParts = this.operationTime.split(/[:.]/).map(Number);
+        let hours = timeParts[0];
+        let minutes = timeParts[1];
+        let seconds = timeParts[2];
+        let milliseconds = timeParts[3];
+
+        // 毫秒级递增 (每10ms更新一次)
+        milliseconds += 10;
+        if (milliseconds >= 1000) {
+          milliseconds = 0;
+          seconds++;
+          if (seconds >= 60) {
+            seconds = 0;
+            minutes++;
+            if (minutes >= 60) {
+              minutes = 0;
+              hours++;
+            }
+          }
+        }
+
+        // 格式化输出，确保数字位数正确
+        this.operationTime = [
+          hours.toString().padStart(2, '0'),
+          minutes.toString().padStart(2, '0'),
+          seconds.toString().padStart(2, '0'),
+          milliseconds.toString().padStart(3, '0')
+        ].join(':').replace(/:(\d{3})$/, '.$1');
+      }, 10);
+    },
+    ...mapActions('senPicture', ['updatePipImage']),
+    // 点击右侧图片同步
+    handleImageClick(imageUrl) {
+      this.updatePipImage(imageUrl)
+    },
+    toggleLine(type) {
+      // 空方法保持事件绑定
+    },
+    showPIP(show) {
+      this.pipVisible = show;
+    },
+    // 打开画中画预览
+    openPipPreview() {
+      this.isImageLoading = true;
+      this.pipPreviewVisible = true;
+
+      // 处理图片缓存问题，强制刷新
+      const img = new Image();
+      img.src = this.pipImage + '?t=' + new Date().getTime();
+      img.onload = () => {
+        this.isImageLoading = false;
+      };
+      img.onerror = () => {
+        this.isImageLoading = false;
+        this.$message.error('图片加载失败');
+      };
+    },
+    initTelemetryUpdates() {
+      setInterval(() => {
+        // 模拟数据更新
+        this.telemetry = {
+          ...this.telemetry,
+          windSpeed: (parseFloat(this.telemetry.windSpeed) + (Math.random() * 0.5 - 0.25)).toFixed(1),
+          temperature: (parseFloat(this.telemetry.temperature) + (Math.random() * 0.4 - 0.2)).toFixed(1)
+        };
+      }, 1000);
+    },
+    handleResize() {
+      this.$forceUpdate();
+    },
+    jumpToEvent(index) {
+      this.currentEventIndex = index;
+    },
+    // 独立轮播控制
+    nextEvent() {
+      this.carouselEventIndex = (this.carouselEventIndex + 1) % this.totalEvents;
+    },
+    prevEvent() {
+      this.carouselEventIndex = (this.carouselEventIndex - 1 + this.totalEvents) % this.totalEvents;
+    },
+    selectEvent(eventId) {
+      const index = this.events.findIndex(event => event.id === eventId);
+      if (index !== -1) {
+        this.carouselEventIndex = index;
+      }
+    },
+    // 启动自动轮播
+    startEventCarousel(interval) {
+      this.carouselInterval = setInterval(() => {
+        this.nextEvent();
+      }, interval);
+    },
+    showAdjustmentDetail(item) {
+      // 点击后标记为已读
+      item.isNew = false;
+      this.currentAdjustment = item;
+      this.adjustmentDialogVisible = true;
+    },
+    sendToInterference() {
+      this.adjustmentDialogVisible = false;
+    },
+    sendToMeasurement() {
+      this.adjustmentDialogVisible = false;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.military-time {
+  font-family: 'Consolas', 'Monaco', monospace;
+  letter-spacing: 1px;
+  font-variant-numeric: tabular-nums;
+}
+
+/* 任务时序容器 - 左下角定位 */
+.task-timeline-container {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  width: 300px;
+  z-index: 15;
+}
+
+/* 信息卡片容器 - 右下角定位 */
+.info-card-container {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  width: 350px;
+  z-index: 15;
+}
+
+.combined-card {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.section-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #f0f0f0;
+  margin-bottom: 5px;
+  padding-bottom: 5px;
+  border-bottom: 1px solid #4a5063;
+}
+
+.weather-details {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* 时间详情样式 */
+.time-details {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.time-detail-item {
+  background-color: #363c4a;
+  padding: 10px;
+  border-radius: 5px;
+  border-left: 4px solid #1890ff;
+}
+
+.time-label {
+  font-size: 13px;
+  color: #9aa3b7;
+  margin-bottom: 5px;
+}
+
+.time-value {
+  font-size: 16px;
+  font-weight: 600;
+  color: #69b1ff;
+  letter-spacing: 1px;
+}
+
+/* 基础样式 - 深灰色系背景 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Microsoft YaHei", "SimHei", Arial, sans-serif;
+}
+
+html, body {
+  height: 100%;
+  overflow: hidden;
+  background-color: #2c313c;
+}
+
+.full-container {
+  height: 99vh;
+  background-color: #2c313c;
+  color: #e6e6e6;
+}
+
+.main-horizontal-container {
+  height: 99vh;
+}
+
+.main-content-container {
+  width: 100%;
+  height: 99vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 主要地图区域 */
+.main-map {
+  flex: 1;
+  position: relative;
+  background-color: #232730;
+  padding: 0;
+  overflow: hidden;
+  width: 100%;
+
+  .map-container {
+    height: 100%;
+    position: relative;
+  }
+
+  .map-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    filter: brightness(0.9);
+  }
+
+  .arrow-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 5;
+  }
+
+  /* 事件进度条样式 */
+  .event-progress-container {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80%;
+    z-index: 15;
+    background-color: rgba(35, 39, 48, 0.6);
+    border: 1px solid rgba(74, 80, 99, 0.5);
+    border-radius: 6px;
+    padding: 12px;
+    backdrop-filter: blur(6px);
+    transition: all 0.4s ease;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+  }
+
+  .event-progress-container:hover {
+    background-color: rgba(35, 39, 48, 0.85);
+    transform: translateX(-50%) translateY(-3px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+  }
+
+  .progress-bar {
+    height: 6px;
+    background-color: rgba(74, 80, 99, 0.5);
+    border-radius: 3px;
+    position: relative;
+    margin-bottom: 10px;
+    transition: background-color 0.3s ease;
+  }
+
+  .event-progress-container:hover .progress-bar {
+    background-color: rgba(74, 80, 99, 0.7);
+  }
+
+  .progress-fill {
+    height: 100%;
+    border-radius: 3px;
+    transition: width 0.5s ease;
+  }
+
+  .progress-markers {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .progress-marker {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: #8a91a6;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border: 2px solid transparent;
+  }
+
+  .progress-marker:hover {
+    transform: translate(-50%, -50%) scale(1.4);
+    background-color: #fff;
+    box-shadow: 0 0 8px rgba(255,255,255,0.6);
+  }
+
+  .progress-marker.active {
+    transform: translate(-50%, -50%) scale(1.4);
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
+    z-index: 2;
+  }
+
+  /* 事件信息样式 */
+  .current-event-basic {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .event-indicator {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+  }
+
+  .event-indicator.info {
+    background-color: #1890ff;
+  }
+
+  .event-indicator.warning {
+    background-color: #faad14;
+  }
+
+  .event-indicator.success {
+    background-color: #52c41a;
+  }
+
+  .event-indicator.critical {
+    background-color: #ff4d4f;
+  }
+
+  .event-name {
+    flex: 1;
+    font-size: 14px;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: #f0f0f0;
+  }
+
+  .event-time {
+    font-size: 12px;
+    color: #b0b7c3;
+    white-space: nowrap;
+  }
+
+  .current-event-detail {
+    max-height: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: all 0.5s ease;
+    margin-top: 8px;
+    padding-top: 8px;
+    border-top: 1px dashed rgba(74, 80, 99, 0.5);
+  }
+
+  .event-progress-container:hover .current-event-detail {
+    max-height: 100px;
+    opacity: 1;
+  }
+
+  .detail-content {
+    font-size: 13px;
+    color: #d0d7e3;
+    margin-bottom: 5px;
+    line-height: 1.5;
+  }
+
+  .detail-status {
+    font-size: 12px;
+    color: #9aa3b7;
+    font-style: italic;
+  }
+}
+
+/* 线路显示控制 */
+.legend-container {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  z-index: 20;
+}
+
+.legend-toggle {
+  background: rgba(35, 39, 48, 0.9);
+  border: 1px solid #4a5063;
+  color: #e0e0e0;
+  padding: 6px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(4px);
+}
+
+.legend-toggle:hover {
+  background: rgba(60, 65, 78, 0.9);
+}
+
+.legend-toggle.expanded {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.legend-control {
+  background: rgba(35, 39, 48, 0.9);
+  border: 1px solid #4a5063;
+  border-top: none;
+  padding: 12px;
+  border-radius: 0 0 4px 4px;
+  width: 200px;
+  backdrop-filter: blur(4px);
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-5px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.legend-title {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: #f0f0f0;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.legend-item {
+  margin: 6px 0;
+
+  .line-sample {
+    display: inline-block;
+    width: 20px;
+    height: 2px;
+    margin-right: 8px;
+    vertical-align: middle;
+
+    &.red {
+      background: #ff4d4f;
+    }
+    &.blue {
+      background: #1890ff;
+    }
+  }
+}
+
+::v-deep .el-checkbox__label {
+  font-size: 13px;
+  color: #e0e0e0;
+}
+
+/* 画中画样式 */
+.pip-container {
+  position: absolute;
+  top: 20px;
+  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;
+  z-index: 10;
+  transition: all 0.3s ease;
+  overflow: hidden;
+  opacity: 0.85;
+}
+
+.pip-container:hover {
+  width: 18vw;
+  max-width: 250px;
+  opacity: 1;
+  z-index: 30;
+}
+
+.pip-container img {
+  width: 100%;
+  height: auto;
+  display: block;
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+/* 画中画预览弹窗样式 */
+.pip-preview-dialog {
+  background-color: #1a1d24 !important;
+  border: 1px solid #4a5063;
+  border-radius: 6px;
+}
+
+::v-deep .pip-preview-dialog .el-dialog__header {
+  background-color: #2c313c;
+  border-bottom: 1px solid #4a5063;
+}
+
+::v-deep .pip-preview-dialog .el-dialog__title {
+  color: #f0f0f0;
+  font-size: 16px;
+}
+
+::v-deep .pip-preview-dialog .el-dialog__body {
+  padding: 0;
+  height: calc(80vh - 100px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #1a1d24;
+  overflow: hidden;
+}
+
+.preview-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.preview-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  transition: all 0.3s ease;
+}
+
+.preview-image.loading {
+  opacity: 0.5;
+}
+
+::v-deep .pip-preview-dialog .el-dialog__footer {
+  background-color: #2c313c;
+  border-top: 1px solid #4a5063;
+}
+
+/* 时间列表轮播样式 */
+.telemetry-card {
+  height: 100%;
+  background-color: #2c313c;
+  border: 1px solid #4a5063;
+  border-radius: 6px;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.time-list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.list-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #f0f0f0;
+}
+
+.carousel-controls {
+  display: flex;
+  gap: 8px;
+}
+
+.time-list-carousel {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  min-height: 120px;
+}
+
+.event-slide {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.event-slide-item {
+  flex: 1;
+  padding: 15px;
+  border-radius: 5px;
+  background-color: #363c4a;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 0 auto;
+  width: 100%;
+  max-height: 100%;
+}
+
+.event-slide-item:hover {
+  background-color: #414859;
+  transform: translateY(-3px);
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
+}
+
+.event-item.info {
+  border-left: 4px solid #1890ff;
+}
+
+.event-item.warning {
+  border-left: 4px solid #faad14;
+}
+
+.event-item.success {
+  border-left: 4px solid #52c41a;
+}
+
+.event-item.critical {
+  border-left: 4px solid #ff4d4f;
+}
+
+.event-slide-item .event-time {
+  font-size: 13px;
+  color: #9aa3b7;
+  margin-bottom: 5px;
+}
+
+.event-slide-item .event-title {
+  font-size: 15px;
+  color: #e0e0e0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 500;
+}
+
+/* 淡入淡出动画效果 */
+.carousel-fade-enter-active,
+.carousel-fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.carousel-fade-enter,
+.carousel-fade-leave-to {
+  opacity: 0;
+}
+
+.carousel-fade-leave-active {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+/* 气象信息样式 */
+.telemetry-row {
+  display: flex;
+  gap: 10px;
+}
+
+.telemetry-record {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 8px;
+  min-width: 0;
+  background-color: rgba(74, 80, 99, 0.1);
+  border-radius: 4px;
+}
+
+.telemetry-label {
+  font-size: 13px;
+  color: #9aa3b7;
+  margin-bottom: 5px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.telemetry-value {
+  font-size: 16px;
+  font-weight: 600;
+  color: #f0f0f0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.status-info {
+  color: #6bbbf7;
+}
+
+.status-secondary {
+  color: #c5c5c5;
+}
 
+.status-success {
+  color: #66d2a0;
+}
 </style>

src/views/testEnvironmentMage/realTimeDevice/index.vue

@@ -26,23 +26,10 @@
           </el-select>
         </el-form-item>
 
-        <el-form-item label="设备状态">
-          <el-select
-            v-model="queryForm.status"
-            placeholder="请选择设备状态"
-            clearable
-            size="small"
-          >
-            <el-option label="全部" value=""></el-option>
-            <el-option label="正常" value="normal"></el-option>
-            <el-option label="故障" value="fault"></el-option>
-          </el-select>
-        </el-form-item>
-
         <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>