辅助指挥

src/components/GlobalComponents/ImporTaskCard.vue

@@ -1,35 +1,29 @@
 <template>
-  <el-card
-    shadow="hover"
-  >
-    <div class="plan-header">
-      <div class="plan-secret-tag" :style="secretTagStyle">
-        {{ plan.secretLevel }}
+  <el-card shadow="hover" class="virtual-card">
+    <!-- 头部插槽 -->
+    <template #header>
+      <div class="plan-header">
+        <div class="plan-secret-tag" :style="secretTagStyle">
+          {{ plan.secretLevel }}
+        </div>
+        <el-tooltip
+          :content="plan.planName + '-' + plan.simulationParticipantTasks"
+          placement="top"
+          :disabled="!isPlanNameOverflow"
+        >
+          <h3 ref="planNameRef" class="plan-name" style="color: #e0e6ed">
+            {{ plan.planName + "-" + plan.simulationParticipantTasks }}
+          </h3>
+        </el-tooltip>
+        <span></span>
       </div>
-      <el-tooltip
-        :content="plan.planName + '-' + plan.simulationParticipantTasks"
-        placement="top"
-        :disabled="!isPlanNameOverflow"
-      >
-        <h3 ref="planNameRef" class="plan-name" style="color: #e0e6ed">
-          {{ plan.planName + "-" + plan.simulationParticipantTasks }}
-        </h3>
-      </el-tooltip>
-      <!--      <el-tag
-              :type="statusTagType"
-              size="small"
-              class="plan-status"
-              effect="dark"
-            >
-              {{ plan.status }}
-            </el-tag>-->
-      <span></span>
-    </div>
+    </template>
 
+    <!-- 卡片内容区域 -->
     <div class="plan-content">
       <div class="plan-main-info">
         <div class="info-row">
-          <span class="info-label dark-label">任务名称:</span>
+          <span class="info-label dark-label">仿真推演任务名称:</span>
           <el-tooltip
             :content="plan.simulationTaskName"
             placement="top"
@@ -44,7 +38,7 @@
           </el-tooltip>
         </div>
         <div class="info-row">
-          <span class="info-label dark-label">开始时间:</span>
+          <span class="info-label dark-label">仿真推演开始时间:</span>
           <el-tooltip
             :content="plan.simulationStartTime"
             placement="top"
@@ -59,7 +53,7 @@
           </el-tooltip>
         </div>
         <div class="info-row">
-          <span class="info-label dark-label">结束时间:</span>
+          <span class="info-label dark-label">仿真推演结束时间:</span>
           <el-tooltip
             :content="plan.simulationEndTime"
             placement="top"
@@ -74,7 +68,7 @@
           </el-tooltip>
         </div>
         <div class="info-row">
-          <span class="info-label dark-label">次数:</span>
+          <span class="info-label dark-label">仿真推演次数:</span>
           <el-tooltip
             :content="plan.simulationCount"
             placement="top"
@@ -92,7 +86,7 @@
 
       <div class="plan-additional-info">
         <div class="info-row">
-          <span class="info-label dark-label">参试任务:</span>
+          <span class="info-label dark-label">仿真推演参试任务:</span>
           <el-tooltip
             :content="plan.simulationParticipantTasks"
             placement="top"
@@ -111,10 +105,10 @@
           <el-tooltip
             :content="plan.taskType"
             placement="top"
-            :disabled="!isSimulationTaskType"
+            :disabled="!isSimulationTaskTypeOverflow"
           >
             <span
-              ref="isSimulationTaskTypeOverflow"
+              ref="simulationTaskTypeRef"
               class="info-value dark-value text-ellipsis"
             >
               {{ plan.taskType || "-" }}
@@ -154,11 +148,12 @@
       </div>
     </div>
 
+    <!-- 操作按钮区域 -->
     <div class="plan-actions">
-      <el-button size="mini" class="dark-button" @click="editTask">
+      <el-button type="info" icon="el-icon-document" @click="editTask">
         任务详情
       </el-button>
-      <el-button size="mini" class="dark-button" @click="chooseTask">
+      <el-button icon="el-icon-check" class="blue-btn" @click="chooseTask">
         选择任务
       </el-button>
     </div>
@@ -192,7 +187,7 @@
       return {
         isPlanNameOverflow: false,
         isSimulationTaskNameOverflow: false,
-        isSimulationTaskType: false,
+        isSimulationTaskTypeOverflow: false,
         isSimulationStartTimeOverflow: false,
         isSimulationEndTimeOverflow: false,
         isSimulationCountOverflow: false,
@@ -245,7 +240,7 @@
           this.$refs.simulationTaskNameRef
         );
         this.isSimulationTaskTypeOverflow = this.checkElementOverflow(
-          this.$refs.simulationTaskNameRefOverflow
+          this.$refs.simulationTaskTypeRef
         );
         this.isSimulationStartTimeOverflow = this.checkElementOverflow(
           this.$refs.simulationStartTimeRef
@@ -283,6 +278,18 @@
 </script>
 
 <style scoped>
+  .blue-btn:hover {
+    background: #004466;
+    border: 2px solid #4085ac;
+    color: #fff;
+  }
+  .virtual-card {
+    padding: 0;
+  }
+
+  ::v-deep .el-card__header {
+    background-color: #123e7f;
+  }
   .target-plan-card {
     margin-bottom: 15px;
     transition: all 0.3s ease;
@@ -299,25 +306,24 @@
   .plan-header {
     display: flex;
     align-items: center;
-    margin-bottom: 12px;
   }
 
   .plan-secret-tag {
     padding: 2px 8px;
     border-radius: 4px;
     color: white;
-    font-size: 12px;
+    font-size: 14px;
     margin-right: 8px;
   }
 
   .plan-name {
     flex: 1;
     margin: 0;
-    font-size: 16px;
+    font-size: 18px;
+    font-weight: bold;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    max-width: 180px;
   }
 
   .plan-status {
@@ -325,7 +331,7 @@
   }
 
   .plan-content {
-    margin-bottom: 12px;
+    padding: 14px 16px;
     flex: 1;
   }
 
@@ -347,7 +353,7 @@
 
   .dark-label {
     color: #8796ad;
-    width: 70px;
+    width: 120px;
     display: inline-block;
     flex-shrink: 0;
   }
@@ -368,6 +374,8 @@
   .plan-actions {
     display: flex;
     justify-content: space-between;
+    padding: 14px 16px;
+    border-top: 1px solid #425163;
   }
 
   .dark-button {

src/router/index.js

@@ -143,6 +143,13 @@ export const constantRoutes = [
     component: () => import("@/views/command/taskEdit/OverallPlan.vue"),
     hidden: true,
   },
+    /*实验任务环境构建 定编辑*/
+  {
+    path: "/testBuild/orderEdit",
+    name: "orderEdit",
+    component: () => import("@/views/decision/testBuild/components/orderEdit.vue"),
+    hidden: true,
+  },
 
 ];
 

src/views/decision/testBuild/baseFunctionMage/index.vue

@@ -1,11 +0,0 @@
-<script>
-
-</script>
-
-<template>
-<div>基础管理功能</div>
-</template>
-
-<style scoped lang="scss">
-
-</style>

src/views/decision/testBuild/choosePlan/index.vue

@@ -1,11 +0,0 @@
-<script>
-
-</script>
-
-<template>
-<div>实验方案选择</div>
-</template>
-
-<style scoped lang="scss">
-
-</style>

src/views/decision/testBuild/components/InterferenceCard.vue

@@ -0,0 +1,362 @@
+<template>
+  <el-card shadow="hover" class="virtual-card">
+    <!-- 头部插槽 -->
+    <template #header>
+      <div class="plan-header">
+        <div class="plan-secret-tag" :style="secretTagStyle">
+          {{ plan.secretLevel }}
+        </div>
+        <el-tooltip
+            :content="plan.planName"
+            placement="top"
+            :disabled="!isPlanNameOverflow"
+        >
+          <h3 ref="planNameRef" class="plan-name" style="color: #e0e6ed">
+            {{ plan.planName }}
+          </h3>
+        </el-tooltip>
+        <el-tag
+            :type="statusTagType"
+            size="small"
+            class="plan-status"
+            effect="dark"
+        >
+          {{ plan.status }}
+        </el-tag>
+      </div>
+    </template>
+
+    <!-- 卡片内容区域 -->
+    <div class="plan-content">
+      <div class="plan-main-info">
+        <div class="info-row">
+          <span class="info-label dark-label">任务名称:</span>
+          <el-tooltip
+              :content="plan.taskName"
+              placement="top"
+              :disabled="!isTaskNameOverflow"
+          >
+            <span ref="taskNameRef" class="info-value dark-value text-ellipsis">
+              {{ plan.taskName || "-" }}
+            </span>
+          </el-tooltip>
+        </div>
+        <div class="info-row">
+          <span class="info-label dark-label">任务代号:</span>
+          <el-tooltip
+              :content="plan.taskCode"
+              placement="top"
+              :disabled="!isTaskCodeOverflow"
+          >
+            <span ref="taskCodeRef" class="info-value dark-value text-ellipsis">
+              {{ plan.taskCode || "-" }}
+            </span>
+          </el-tooltip>
+        </div>
+        <div class="info-row">
+          <span class="info-label dark-label">开始时间:</span>
+          <el-tooltip
+              :content="plan.startTime"
+              placement="top"
+              :disabled="!isStartTimeOverflow"
+          >
+            <span
+                ref="startTimeRef"
+                class="info-value dark-value text-ellipsis"
+            >
+              {{ plan.startTime || "-" }}
+            </span>
+          </el-tooltip>
+        </div>
+        <div class="info-row">
+          <span class="info-label dark-label">结束时间:</span>
+          <el-tooltip
+              :content="plan.endTime"
+              placement="top"
+              :disabled="!isEndTimeOverflow"
+          >
+            <span ref="endTimeRef" class="info-value dark-value text-ellipsis">
+              {{ plan.endTime || "-" }}
+            </span>
+          </el-tooltip>
+        </div>
+      </div>
+
+      <div class="plan-additional-info">
+        <div class="info-row">
+          <span class="info-label dark-label">干扰方案编制状态:</span>
+          <el-tag
+              :type="compileStatusTagType"
+              size="small"
+              effect="dark"
+              class="info-value"
+          >
+            {{ plan.compileStatus }}
+          </el-tag>
+        </div>
+        <div class="info-row">
+          <span class="info-label dark-label">秘级年限:</span>
+          <el-tooltip
+              :content="plan.secretYears"
+              placement="top"
+              :disabled="!isSecretYearsOverflow"
+          >
+            <span
+                ref="secretYearsRef"
+                class="info-value dark-value text-ellipsis"
+            >
+              {{ plan.secretYears || "-" }}
+            </span>
+          </el-tooltip>
+        </div>
+      </div>
+    </div>
+
+    <!-- 操作按钮区域 -->
+    <div class="plan-actions">
+      <el-checkbox
+          v-model="isChecked"
+          @change="handleCheckChange"
+          :label="plan.id"
+          size="mini"
+          class="check-box"
+      >选择</el-checkbox>
+    </div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: "InterferenceCard",
+  props: {
+    plan: {
+      type: Object,
+      required: true,
+      default: () => ({
+        id: "",
+        planName: "",
+        taskName: "",
+        taskCode: "",
+        startTime: "",
+        endTime: "",
+        compileStatus: "",
+        secretLevel: "秘密",
+        secretYears: "10年",
+        status: "有效",
+        isSelected: false
+      }),
+    },
+  },
+  data() {
+    return {
+      isChecked: this.plan.isSelected || false,
+      isPlanNameOverflow: false,
+      isTaskNameOverflow: false,
+      isTaskCodeOverflow: false,
+      isSecretYearsOverflow: false,
+      isStartTimeOverflow: false,
+      isEndTimeOverflow: false,
+    };
+  },
+  watch: {
+    'plan.isSelected'(newVal) {
+      this.isChecked = newVal;
+    }
+  },
+  computed: {
+    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";
+    },
+  },
+  mounted() {
+    this.checkOverflows();
+  },
+  updated() {
+    this.checkOverflows();
+  },
+  methods: {
+    handleCheckChange(checked) {
+      this.$emit('check', {plan: this.plan, checked});
+    },
+    checkOverflows() {
+      this.isPlanNameOverflow = this.checkElementOverflow(
+          this.$refs.planNameRef
+      );
+      this.isTaskNameOverflow = this.checkElementOverflow(
+          this.$refs.taskNameRef
+      );
+      this.isTaskCodeOverflow = this.checkElementOverflow(
+          this.$refs.taskCodeRef
+      );
+      this.isStartTimeOverflow = this.checkElementOverflow(
+          this.$refs.startTimeRef
+      );
+      this.isEndTimeOverflow = this.checkElementOverflow(
+          this.$refs.endTimeRef
+      );
+      this.isSecretYearsOverflow = this.checkElementOverflow(
+          this.$refs.secretYearsRef
+      );
+    },
+    checkElementOverflow(element) {
+      return element ? element.scrollWidth > element.clientWidth : false;
+    }
+  },
+}
+</script>
+
+<style scoped>
+.virtual-card {
+  padding: 0;
+}
+
+::v-deep .el-card__header {
+  background-color: #123e7f;
+}
+
+.plan-header {
+  display: flex;
+  align-items: center;
+}
+
+.plan-secret-tag {
+  padding: 2px 8px;
+  border-radius: 4px;
+  color: white;
+  font-size: 14px;
+  margin-right: 8px;
+}
+
+.plan-name {
+  flex: 1;
+  margin: 0;
+  font-size: 18px;
+  font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.plan-status {
+  margin-left: 8px;
+}
+
+.plan-content {
+  padding: 14px 16px;
+  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: 120px;
+  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: flex-end;
+  padding: 14px 16px;
+  border-top: 1px solid #425163;
+}
+
+.check-box {
+  color: #e0e6ed;
+}
+
+/* 不同秘级的边框颜色 */
+.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;
+}
+</style>

src/views/decision/testBuild/components/MeasCard.vue

@@ -0,0 +1,362 @@
+<template>
+  <el-card shadow="hover" class="virtual-card">
+    <!-- 头部插槽 -->
+    <template #header>
+      <div class="plan-header">
+        <div class="plan-secret-tag" :style="secretTagStyle">
+          {{ plan.secretLevel }}
+        </div>
+        <el-tooltip
+            :content="plan.planName"
+            placement="top"
+            :disabled="!isPlanNameOverflow"
+        >
+          <h3 ref="planNameRef" class="plan-name" style="color: #e0e6ed">
+            {{ plan.planName }}
+          </h3>
+        </el-tooltip>
+        <el-tag
+            :type="statusTagType"
+            size="small"
+            class="plan-status"
+            effect="dark"
+        >
+          {{ plan.status }}
+        </el-tag>
+      </div>
+    </template>
+
+    <!-- 卡片内容区域 -->
+    <div class="plan-content">
+      <div class="plan-main-info">
+        <div class="info-row">
+          <span class="info-label dark-label">任务名称:</span>
+          <el-tooltip
+              :content="plan.taskName"
+              placement="top"
+              :disabled="!isTaskNameOverflow"
+          >
+            <span ref="taskNameRef" class="info-value dark-value text-ellipsis">
+              {{ plan.taskName || "-" }}
+            </span>
+          </el-tooltip>
+        </div>
+        <div class="info-row">
+          <span class="info-label dark-label">任务代号:</span>
+          <el-tooltip
+              :content="plan.taskCode"
+              placement="top"
+              :disabled="!isTaskCodeOverflow"
+          >
+            <span ref="taskCodeRef" class="info-value dark-value text-ellipsis">
+              {{ plan.taskCode || "-" }}
+            </span>
+          </el-tooltip>
+        </div>
+        <div class="info-row">
+          <span class="info-label dark-label">开始时间:</span>
+          <el-tooltip
+              :content="plan.startTime"
+              placement="top"
+              :disabled="!isStartTimeOverflow"
+          >
+            <span
+                ref="startTimeRef"
+                class="info-value dark-value text-ellipsis"
+            >
+              {{ plan.startTime || "-" }}
+            </span>
+          </el-tooltip>
+        </div>
+        <div class="info-row">
+          <span class="info-label dark-label">结束时间:</span>
+          <el-tooltip
+              :content="plan.endTime"
+              placement="top"
+              :disabled="!isEndTimeOverflow"
+          >
+            <span ref="endTimeRef" class="info-value dark-value text-ellipsis">
+              {{ plan.endTime || "-" }}
+            </span>
+          </el-tooltip>
+        </div>
+      </div>
+
+      <div class="plan-additional-info">
+        <div class="info-row">
+          <span class="info-label dark-label">测量方案编制状态:</span>
+          <el-tag
+              :type="compileStatusTagType"
+              size="small"
+              effect="dark"
+              class="info-value"
+          >
+            {{ plan.compileStatus }}
+          </el-tag>
+        </div>
+        <div class="info-row">
+          <span class="info-label dark-label">秘级年限:</span>
+          <el-tooltip
+              :content="plan.secretYears"
+              placement="top"
+              :disabled="!isSecretYearsOverflow"
+          >
+            <span
+                ref="secretYearsRef"
+                class="info-value dark-value text-ellipsis"
+            >
+              {{ plan.secretYears || "-" }}
+            </span>
+          </el-tooltip>
+        </div>
+      </div>
+    </div>
+
+    <!-- 操作按钮区域 -->
+    <div class="plan-actions">
+      <el-checkbox
+          v-model="isChecked"
+          @change="handleCheckChange"
+          :label="plan.id"
+          size="mini"
+          class="check-box"
+      >选择</el-checkbox>
+    </div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: "MeasCard",
+  props: {
+    plan: {
+      type: Object,
+      required: true,
+      default: () => ({
+        id: "",
+        planName: "",
+        taskName: "",
+        taskCode: "",
+        startTime: "",
+        endTime: "",
+        compileStatus: "",
+        secretLevel: "秘密",
+        secretYears: "10年",
+        status: "有效",
+        isSelected: false
+      }),
+    },
+  },
+  data() {
+    return {
+      isChecked: this.plan.isSelected || false,
+      isPlanNameOverflow: false,
+      isTaskNameOverflow: false,
+      isTaskCodeOverflow: false,
+      isSecretYearsOverflow: false,
+      isStartTimeOverflow: false,
+      isEndTimeOverflow: false,
+    };
+  },
+  watch: {
+    'plan.isSelected'(newVal) {
+      this.isChecked = newVal;
+    }
+  },
+  computed: {
+    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";
+    },
+  },
+  mounted() {
+    this.checkOverflows();
+  },
+  updated() {
+    this.checkOverflows();
+  },
+  methods: {
+    handleCheckChange(checked) {
+      this.$emit('check', { plan: this.plan, checked });
+    },
+    checkOverflows() {
+      this.isPlanNameOverflow = this.checkElementOverflow(
+          this.$refs.planNameRef
+      );
+      this.isTaskNameOverflow = this.checkElementOverflow(
+          this.$refs.taskNameRef
+      );
+      this.isTaskCodeOverflow = this.checkElementOverflow(
+          this.$refs.taskCodeRef
+      );
+      this.isStartTimeOverflow = this.checkElementOverflow(
+          this.$refs.startTimeRef
+      );
+      this.isEndTimeOverflow = this.checkElementOverflow(
+          this.$refs.endTimeRef
+      );
+      this.isSecretYearsOverflow = this.checkElementOverflow(
+          this.$refs.secretYearsRef
+      );
+    },
+    checkElementOverflow(element) {
+      return element ? element.scrollWidth > element.clientWidth : false;
+    }
+  },
+};
+</script>
+
+<style scoped>
+.virtual-card {
+  padding: 0;
+}
+
+::v-deep .el-card__header {
+  background-color: #123e7f;
+}
+
+.plan-header {
+  display: flex;
+  align-items: center;
+}
+
+.plan-secret-tag {
+  padding: 2px 8px;
+  border-radius: 4px;
+  color: white;
+  font-size: 14px;
+  margin-right: 8px;
+}
+
+.plan-name {
+  flex: 1;
+  margin: 0;
+  font-size: 18px;
+  font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.plan-status {
+  margin-left: 8px;
+}
+
+.plan-content {
+  padding: 14px 16px;
+  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: 120px;
+  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: flex-end;
+  padding: 14px 16px;
+  border-top: 1px solid #425163;
+}
+
+.check-box {
+  color: #e0e6ed;
+}
+
+/* 不同秘级的边框颜色 */
+.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;
+}
+</style>

src/views/decision/testBuild/components/TargetCard.vue

@@ -0,0 +1,362 @@
+<template>
+  <el-card shadow="hover" class="virtual-card">
+    <!-- 头部插槽 -->
+    <template #header>
+      <div class="plan-header">
+        <div class="plan-secret-tag" :style="secretTagStyle">
+          {{ plan.secretLevel }}
+        </div>
+        <el-tooltip
+            :content="plan.planName"
+            placement="top"
+            :disabled="!isPlanNameOverflow"
+        >
+          <h3 ref="planNameRef" class="plan-name" style="color: #e0e6ed">
+            {{ plan.planName }}
+          </h3>
+        </el-tooltip>
+        <el-tag
+            :type="statusTagType"
+            size="small"
+            class="plan-status"
+            effect="dark"
+        >
+          {{ plan.status }}
+        </el-tag>
+      </div>
+    </template>
+
+    <!-- 卡片内容区域 -->
+    <div class="plan-content">
+      <div class="plan-main-info">
+        <div class="info-row">
+          <span class="info-label dark-label">任务名称:</span>
+          <el-tooltip
+              :content="plan.taskName"
+              placement="top"
+              :disabled="!isTaskNameOverflow"
+          >
+            <span ref="taskNameRef" class="info-value dark-value text-ellipsis">
+              {{ plan.taskName || "-" }}
+            </span>
+          </el-tooltip>
+        </div>
+        <div class="info-row">
+          <span class="info-label dark-label">任务代号:</span>
+          <el-tooltip
+              :content="plan.taskCode"
+              placement="top"
+              :disabled="!isTaskCodeOverflow"
+          >
+            <span ref="taskCodeRef" class="info-value dark-value text-ellipsis">
+              {{ plan.taskCode || "-" }}
+            </span>
+          </el-tooltip>
+        </div>
+        <div class="info-row">
+          <span class="info-label dark-label">开始时间:</span>
+          <el-tooltip
+              :content="plan.startTime"
+              placement="top"
+              :disabled="!isStartTimeOverflow"
+          >
+            <span
+                ref="startTimeRef"
+                class="info-value dark-value text-ellipsis"
+            >
+              {{ plan.startTime || "-" }}
+            </span>
+          </el-tooltip>
+        </div>
+        <div class="info-row">
+          <span class="info-label dark-label">结束时间:</span>
+          <el-tooltip
+              :content="plan.endTime"
+              placement="top"
+              :disabled="!isEndTimeOverflow"
+          >
+            <span ref="endTimeRef" class="info-value dark-value text-ellipsis">
+              {{ plan.endTime || "-" }}
+            </span>
+          </el-tooltip>
+        </div>
+      </div>
+
+      <div class="plan-additional-info">
+        <div class="info-row">
+          <span class="info-label dark-label">靶标方案编制状态:</span>
+          <el-tag
+              :type="compileStatusTagType"
+              size="small"
+              effect="dark"
+              class="info-value"
+          >
+            {{ plan.compileStatus }}
+          </el-tag>
+        </div>
+        <div class="info-row">
+          <span class="info-label dark-label">秘级年限:</span>
+          <el-tooltip
+              :content="plan.secretYears"
+              placement="top"
+              :disabled="!isSecretYearsOverflow"
+          >
+            <span
+                ref="secretYearsRef"
+                class="info-value dark-value text-ellipsis"
+            >
+              {{ plan.secretYears || "-" }}
+            </span>
+          </el-tooltip>
+        </div>
+      </div>
+    </div>
+
+    <!-- 操作按钮区域 -->
+    <div class="plan-actions">
+      <el-checkbox
+          v-model="isChecked"
+          @change="handleCheckChange"
+          :label="plan.id"
+          size="mini"
+          class="check-box"
+      >选择</el-checkbox>
+    </div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: "TargetCard",
+  props: {
+    plan: {
+      type: Object,
+      required: true,
+      default: () => ({
+        id: "",
+        planName: "",
+        taskName: "",
+        taskCode: "",
+        startTime: "",
+        endTime: "",
+        compileStatus: "",
+        secretLevel: "秘密",
+        secretYears: "10年",
+        status: "有效",
+        isSelected: false
+      }),
+    },
+  },
+  data() {
+    return {
+      isChecked: this.plan.isSelected || false,
+      isPlanNameOverflow: false,
+      isTaskNameOverflow: false,
+      isTaskCodeOverflow: false,
+      isSecretYearsOverflow: false,
+      isStartTimeOverflow: false,
+      isEndTimeOverflow: false,
+    };
+  },
+  watch: {
+    'plan.isSelected'(newVal) {
+      this.isChecked = newVal;
+    }
+  },
+  computed: {
+    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";
+    },
+  },
+  mounted() {
+    this.checkOverflows();
+  },
+  updated() {
+    this.checkOverflows();
+  },
+  methods: {
+    handleCheckChange(checked) {
+      this.$emit('check', { plan: this.plan, checked });
+    },
+    checkOverflows() {
+      this.isPlanNameOverflow = this.checkElementOverflow(
+          this.$refs.planNameRef
+      );
+      this.isTaskNameOverflow = this.checkElementOverflow(
+          this.$refs.taskNameRef
+      );
+      this.isTaskCodeOverflow = this.checkElementOverflow(
+          this.$refs.taskCodeRef
+      );
+      this.isStartTimeOverflow = this.checkElementOverflow(
+          this.$refs.startTimeRef
+      );
+      this.isEndTimeOverflow = this.checkElementOverflow(
+          this.$refs.endTimeRef
+      );
+      this.isSecretYearsOverflow = this.checkElementOverflow(
+          this.$refs.secretYearsRef
+      );
+    },
+    checkElementOverflow(element) {
+      return element ? element.scrollWidth > element.clientWidth : false;
+    }
+  },
+};
+</script>
+
+<style scoped>
+.virtual-card {
+  padding: 0;
+}
+
+::v-deep .el-card__header {
+  background-color: #123e7f;
+}
+
+.plan-header {
+  display: flex;
+  align-items: center;
+}
+
+.plan-secret-tag {
+  padding: 2px 8px;
+  border-radius: 4px;
+  color: white;
+  font-size: 14px;
+  margin-right: 8px;
+}
+
+.plan-name {
+  flex: 1;
+  margin: 0;
+  font-size: 18px;
+  font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.plan-status {
+  margin-left: 8px;
+}
+
+.plan-content {
+  padding: 14px 16px;
+  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: 120px;
+  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: flex-end;
+  padding: 14px 16px;
+  border-top: 1px solid #425163;
+}
+
+.check-box {
+  color: #e0e6ed;
+}
+
+/* 不同秘级的边框颜色 */
+.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;
+}
+</style>

src/views/decision/testBuild/components/orderEdit.vue

@@ -0,0 +1,1247 @@
+<template>
+  <div class="task-setting-container">
+    <!-- 头部 -->
+    <div class="header">
+      <h1>任务想定设置</h1>
+      <div class="header-controls">
+        <el-button type="primary" icon="el-icon-save" @click="saveTask">
+          保存任务
+        </el-button>
+        <el-button type="success" icon="el-icon-video-play" @click="startSimulation">
+          开始推演
+        </el-button>
+        <el-button type="warning" icon="el-icon-refresh" @click="resetTask">
+          重置
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 主内容区域 -->
+    <div class="main-container">
+      <!-- 左侧任务配置 -->
+      <div class="task-panel">
+        <div class="panel-header">
+          <h3>任务配置</h3>
+        </div>
+
+        <div class="task-content">
+          <!-- 基本信息 -->
+          <div class="section-card">
+            <div class="section-header">
+              <h4 class="section-title">
+                <i class="el-icon-info"></i>
+                基本信息
+              </h4>
+            </div>
+            <el-form :model="taskForm" label-width="100px" size="small">
+              <el-form-item label="任务名称">
+                <el-input v-model="taskForm.name" placeholder="请输入任务名称" />
+              </el-form-item>
+              <el-form-item label="任务类型">
+                <el-select v-model="taskForm.type" placeholder="请选择任务类型">
+                  <el-option label="防空作战" value="air-defense" />
+                  <el-option label="对海作战" value="sea-combat" />
+                  <el-option label="对地打击" value="ground-strike" />
+                  <el-option label="电子对抗" value="electronic-warfare" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="执行时间">
+                <el-date-picker
+                    v-model="taskForm.executeTime"
+                    type="datetime"
+                    placeholder="选择执行时间"
+                    format="yyyy-MM-dd HH:mm:ss"
+                    value-format="yyyy-MM-dd HH:mm:ss"
+                />
+              </el-form-item>
+              <el-form-item label="任务描述">
+                <el-input
+                    v-model="taskForm.description"
+                    type="textarea"
+                    :rows="3"
+                    placeholder="请输入任务描述"
+                />
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <!-- 目标设置 -->
+          <div class="section-card">
+            <div class="section-header">
+              <h4 class="section-title">
+                <i class="el-icon-location"></i>
+                目标设置
+              </h4>
+              <el-button type="text" icon="el-icon-plus" @click="addTarget">
+                添加目标
+              </el-button>
+            </div>
+            <div class="target-list">
+              <div
+                  class="target-item"
+                  v-for="target in taskForm.targets"
+                  :key="target.id"
+              >
+                <div class="target-header">
+                  <span class="target-name">{{ target.name }}</span>
+                  <div class="target-actions">
+                    <el-button type="text" icon="el-icon-edit" @click="editTarget(target)" />
+                    <el-button type="text" icon="el-icon-delete" @click="removeTarget(target)" />
+                  </div>
+                </div>
+                <div class="target-info">
+                  <span class="target-type">{{ target.type }}</span>
+                  <span class="target-coord">{{ target.coordinates }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 装备配置 -->
+          <div class="section-card">
+            <div class="section-header">
+              <h4 class="section-title">
+                <i class="el-icon-cpu"></i>
+                装备配置
+              </h4>
+            </div>
+            <div class="equipment-list">
+              <div
+                  class="equipment-item"
+                  v-for="equipment in taskForm.equipment"
+                  :key="equipment.id"
+              >
+                <div class="equipment-icon">
+                  <i :class="equipment.icon"></i>
+                </div>
+                <div class="equipment-info">
+                  <div class="equipment-name">{{ equipment.name }}</div>
+                  <div class="equipment-type">{{ equipment.type }}</div>
+                  <div class="equipment-quantity">
+                    <span>数量:</span>
+                    <el-input-number v-model="equipment.quantity" :min="1" :max="10"/>
+                    <!--                    <div class="quantity-control">
+                                          <el-button
+                                            size="mini"
+                                            icon="el-icon-minus"
+                                            @click="decreaseQuantity(equipment)"
+                                            :disabled="equipment.quantity <= 1"
+                                          />
+                                          <span class="quantity-display">{{ equipment.quantity }}</span>
+                                          <el-button
+                                            size="mini"
+                                            icon="el-icon-plus"
+                                            @click="increaseQuantity(equipment)"
+                                          />
+                                        </div>-->
+                  </div>
+                </div>
+                <div class="equipment-badge" v-if="equipment.status">
+                  {{ equipment.status }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 中间策略设置 -->
+      <div class="strategy-panel">
+        <div class="panel-header">
+          <h3>策略设置</h3>
+        </div>
+
+        <div class="strategy-content">
+          <!-- 作战策略 -->
+          <div class="section-card">
+            <div class="section-header">
+              <h4 class="section-title">
+                <i class="el-icon-s-operation"></i>
+                作战策略
+              </h4>
+            </div>
+            <div class="strategy-grid">
+              <div
+                  class="strategy-card"
+                  v-for="strategy in strategies"
+                  :key="strategy.id"
+                  :class="{ selected: selectedStrategy === strategy.id }"
+                  @click="selectStrategy(strategy)"
+              >
+                <div class="strategy-icon">
+                  <i :class="strategy.icon"></i>
+                </div>
+                <div class="strategy-info">
+                  <div class="strategy-name">{{ strategy.name }}</div>
+                  <div class="strategy-desc">{{ strategy.description }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 装备策略 -->
+          <div class="section-card">
+            <div class="section-header">
+              <h4 class="section-title">
+                <i class="el-icon-setting"></i>
+                装备策略
+              </h4>
+            </div>
+            <div class="equipment-strategy">
+              <div
+                  class="equipment-strategy-item"
+                  v-for="item in equipmentStrategies"
+                  :key="item.id"
+              >
+                <div class="strategy-header">
+                  <span class="equipment-name">{{ item.equipment }}</span>
+                  <el-select v-model="item.strategy" placeholder="选择策略" size="small">
+                    <el-option
+                        v-for="option in item.options"
+                        :key="option.value"
+                        :label="option.label"
+                        :value="option.value"
+                    />
+                  </el-select>
+                </div>
+                <div class="strategy-params" v-if="item.params">
+                  <el-form :model="item.params" label-width="80px" size="mini">
+                    <el-form-item label="优先级">
+                      <el-input-number v-model="item.params.priority" :min="1" :max="10" />
+                    </el-form-item>
+                    <el-form-item label="响应时间">
+                      <el-input-number v-model="item.params.responseTime" :min="1" />
+                    </el-form-item>
+                  </el-form>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 验证结果 -->
+          <div class="validation-card" v-if="validationResult">
+            <div class="validation-icon">
+              <i :class="validationResult.success ? 'el-icon-success' : 'el-icon-warning'"></i>
+            </div>
+            <div class="validation-content">
+              <div class="validation-title">{{ validationResult.title }}</div>
+              <div class="validation-message">{{ validationResult.message }}</div>
+              <div class="validation-actions" v-if="validationResult.actions">
+                <!--                <el-button
+                                  v-for="action in validationResult.actions"
+                                  :key="action.key"
+                                  :type="action.type"
+                                  size="small"
+                                  @click="handleValidationAction(action)"
+                                >
+                                  {{ action.label }}
+                                </el-button>-->
+                <el-button type="primary">优化配置</el-button>
+                <el-button @click="startShow">开始推演</el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧预览 -->
+      <div class="preview-panel">
+        <div class="panel-header">
+          <h3>任务预览</h3>
+        </div>
+
+        <div class="preview-content">
+          <!-- 任务概览 -->
+          <div class="preview-section">
+            <h4>任务概览</h4>
+            <div class="overview-stats">
+              <div class="stat-item">
+                <div class="stat-value">{{ taskForm.targets.length }}</div>
+                <div class="stat-label">目标数量</div>
+              </div>
+              <div class="stat-item">
+                <div class="stat-value">{{ totalEquipment }}</div>
+                <div class="stat-label">装备总数</div>
+              </div>
+              <div class="stat-item">
+                <div class="stat-value">{{ taskForm.type || '未设置' }}</div>
+                <div class="stat-label">任务类型</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 时间轴 -->
+          <div class="preview-section">
+            <h4>执行时间轴</h4>
+            <div class="timeline">
+              <div
+                  class="timeline-item"
+                  v-for="(item, index) in timeline"
+                  :key="index"
+                  :class="{ active: item.active }"
+              >
+                <div class="timeline-marker"></div>
+                <div class="timeline-content">
+                  <div class="timeline-time">{{ item.time }}</div>
+                  <div class="timeline-event">{{ item.event }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 风险评估 -->
+          <div class="preview-section">
+            <h4>风险评估</h4>
+            <div class="risk-assessment">
+              <div class="risk-item" v-for="risk in riskAssessment" :key="risk.id">
+                <div class="risk-header">
+                  <span class="risk-name">{{ risk.name }}</span>
+                  <el-tag :type="risk.level" size="small">{{ risk.levelText }}</el-tag>
+                </div>
+                <div class="risk-desc">{{ risk.description }}</div>
+                <div class="risk-mitigation" v-if="risk.mitigation">
+                  <strong>缓解措施:</strong> {{ risk.mitigation }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 添加目标对话框 -->
+    <DarkDialog
+        title="添加目标"
+        :visible.sync="showTargetDialog"
+        width="50%"
+    >
+      <el-form :model="targetForm" label-width="100px">
+        <el-form-item label="目标名称">
+          <el-input v-model="targetForm.name" placeholder="请输入目标名称" />
+        </el-form-item>
+        <el-form-item label="目标类型">
+          <el-select v-model="targetForm.type" placeholder="请选择目标类型">
+            <el-option label="空中目标" value="air" />
+            <el-option label="海上目标" value="sea" />
+            <el-option label="地面目标" value="ground" />
+            <el-option label="电子目标" value="electronic" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="坐标位置">
+          <el-input v-model="targetForm.coordinates" placeholder="请输入坐标" />
+        </el-form-item>
+        <el-form-item label="威胁等级">
+          <el-rate v-model="targetForm.threatLevel" :max="5" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="showTargetDialog = false">取消</el-button>
+        <el-button type="primary" @click="submitTarget">确定</el-button>
+      </div>
+    </DarkDialog>
+  </div>
+</template>
+
+<script>
+import DarkDialog from "@/components/Components/DarkDialog.vue";
+export default {
+  name: "TaskSettingView",
+  components: {
+    DarkDialog
+  },
+  data() {
+    return {
+      showTargetDialog: false,
+      selectedStrategy: null,
+      targetForm: {
+        name: '',
+        type: '',
+        coordinates: '',
+        threatLevel: 3
+      },
+      taskForm: {
+        name: '',
+        type: '',
+        executeTime: '',
+        description: '',
+        targets: [
+          {
+            id: 1,
+            name: '敌机编队A',
+            type: '空中目标',
+            coordinates: '东经120°15′，北纬30°20′',
+            threatLevel: 4
+          },
+          {
+            id: 2,
+            name: '敌舰编队B',
+            type: '海上目标',
+            coordinates: '东经120°30′，北纬30°10′',
+            threatLevel: 3
+          }
+        ],
+        equipment: [
+          {
+            id: 1,
+            name: 'S-400防空导弹',
+            type: '防空系统',
+            icon: 'el-icon-cpu',
+            quantity: 2,
+            status: '就绪'
+          },
+          {
+            id: 2,
+            name: '歼-20战斗机',
+            type: '战斗机',
+            icon: 'el-icon-cpu',
+            quantity: 4,
+            status: '待命'
+          },
+          {
+            id: 3,
+            name: '预警机',
+            type: '侦察机',
+            icon: 'el-icon-cpu',
+            quantity: 1,
+            status: '就绪'
+          }
+        ]
+      },
+      strategies: [
+        {
+          id: 1,
+          name: '主动防御',
+          description: '主动出击，先发制人',
+          icon: 'el-icon-s-operation'
+        },
+        {
+          id: 2,
+          name: '被动防御',
+          description: '等待时机，后发制人',
+          icon: 'el-icon-s-operation'
+        },
+        {
+          id: 3,
+          name: '混合策略',
+          description: '攻防结合，灵活应对',
+          icon: 'el-icon-s-operation'
+        }
+      ],
+      equipmentStrategies: [
+        {
+          id: 1,
+          equipment: 'S-400防空导弹',
+          strategy: 'auto',
+          options: [
+            { label: '自动模式', value: 'auto' },
+            { label: '手动模式', value: 'manual' },
+            { label: '半自动模式', value: 'semi' }
+          ],
+          params: {
+            priority: 5,
+            responseTime: 30
+          }
+        },
+        {
+          id: 2,
+          equipment: '歼-20战斗机',
+          strategy: 'intercept',
+          options: [
+            { label: '拦截模式', value: 'intercept' },
+            { label: '护航模式', value: 'escort' },
+            { label: '攻击模式', value: 'attack' }
+          ],
+          params: {
+            priority: 3,
+            responseTime: 60
+          }
+        }
+      ],
+      validationResult: {
+        success: true,
+        title: '配置验证通过',
+        message: '当前任务配置符合作战要求，可以开始执行。',
+        actions: [
+          { key: 'optimize', label: '优化配置', type: 'primary' },
+          { key: 'execute', label: '开始执行', type: 'success' }
+        ]
+      },
+      timeline: [
+        { time: 'T-30min', event: '任务准备', active: true },
+        { time: 'T-15min', event: '装备检查', active: true },
+        { time: 'T-5min', event: '目标锁定', active: false },
+        { time: 'T+0min', event: '开始执行', active: false },
+        { time: 'T+30min', event: '任务完成', active: false }
+      ],
+      riskAssessment: [
+        {
+          id: 1,
+          name: '敌情威胁',
+          level: 'warning',
+          levelText: '中等',
+          description: '敌方可能具备电子对抗能力',
+          mitigation: '加强电子防护，准备备用通信方案'
+        },
+        {
+          id: 2,
+          name: '天气影响',
+          level: 'success',
+          levelText: '低',
+          description: '当前天气条件良好',
+          mitigation: '持续监控天气变化'
+        },
+        {
+          id: 3,
+          name: '装备状态',
+          level: 'success',
+          levelText: '良好',
+          description: '所有装备状态正常',
+          mitigation: '定期检查维护'
+        }
+      ]
+    }
+  },
+  computed: {
+    totalEquipment() {
+      return this.taskForm.equipment.reduce((total, item) => total + item.quantity, 0)
+    }
+  },
+  methods: {
+    startShow() {
+      this.$router.push('/Deduction/stratDeduction')
+    },
+    saveTask() {
+      this.$message.success('任务保存成功')
+    },
+    startSimulation() {
+      this.$message.info('开始任务推演...')
+    },
+    resetTask() {
+      this.$confirm('确定要重置任务配置吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.taskForm = {
+          name: '',
+          type: '',
+          executeTime: '',
+          description: '',
+          targets: [],
+          equipment: []
+        }
+        this.$message.success('任务已重置')
+      })
+    },
+    addTarget() {
+      this.targetForm = {
+        name: '',
+        type: '',
+        coordinates: '',
+        threatLevel: 3
+      }
+      this.showTargetDialog = true
+    },
+    editTarget(target) {
+      this.targetForm = { ...target }
+      this.showTargetDialog = true
+    },
+    removeTarget(target) {
+      this.taskForm.targets = this.taskForm.targets.filter(t => t.id !== target.id)
+    },
+    submitTarget() {
+      if (this.targetForm.id) {
+        // 编辑模式
+        const index = this.taskForm.targets.findIndex(t => t.id === this.targetForm.id)
+        if (index !== -1) {
+          this.taskForm.targets[index] = { ...this.targetForm }
+        }
+      } else {
+        // 新增模式
+        this.taskForm.targets.push({
+          ...this.targetForm,
+          id: Date.now()
+        })
+      }
+      this.showTargetDialog = false
+      this.$message.success('目标保存成功')
+    },
+    selectStrategy(strategy) {
+      this.selectedStrategy = strategy.id
+    },
+    increaseQuantity(equipment) {
+      equipment.quantity++
+    },
+    decreaseQuantity(equipment) {
+      if (equipment.quantity > 1) {
+        equipment.quantity--
+      }
+    },
+    handleValidationAction(action) {
+      if (action.key === 'optimize') {
+        this.$message.info('正在优化配置...')
+      } else if (action.key === 'execute') {
+        this.startSimulation()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+/* 基础布局样式 */
+.task-setting-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-color: #333;
+  color: white;
+  font-family: "Microsoft YaHei", Arial, sans-serif;
+}
+
+.header {
+  flex: 0 0 60px;
+  background-color: #2c3e50;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  justify-content: space-between;
+  border-bottom: 1px solid #4a6572;
+
+  h1 {
+    font-size: 1.5rem;
+    color: #ecf0f1;
+    margin: 0;
+    white-space: nowrap;
+  }
+
+  .header-controls {
+    display: flex;
+    gap: 15px;
+
+    .el-button {
+      white-space: nowrap;
+    }
+  }
+}
+
+.main-container {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  min-height: 0; // 修复flex布局中的溢出问题
+}
+
+/* 左侧任务面板 */
+.task-panel {
+  flex: 0 0 280px;
+  background-color: #2c3e50;
+  border-right: 1px solid #4a6572;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+
+  .panel-header {
+    padding: 15px;
+    border-bottom: 1px solid #34495e;
+    flex-shrink: 0;
+
+    h3 {
+      color: #ecf0f1;
+      font-size: 1rem;
+      margin: 0;
+    }
+  }
+
+  .task-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 15px;
+    min-height: 0;
+  }
+}
+
+/* 中间策略面板 */
+.strategy-panel {
+  flex: 1;
+  background-color: #1e272e;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+
+  .panel-header {
+    padding: 15px;
+    background-color: #2c3e50;
+    border-bottom: 1px solid #34495e;
+    flex-shrink: 0;
+
+    h3 {
+      color: #ecf0f1;
+      font-size: 1rem;
+      margin: 0;
+    }
+  }
+
+  .strategy-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 15px;
+    min-height: 0;
+  }
+}
+
+/* 右侧预览面板 */
+.preview-panel {
+  flex: 0 0 350px;
+  background-color: #2c3e50;
+  border-left: 1px solid #4a6572;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+
+  .panel-header {
+    padding: 15px;
+    border-bottom: 1px solid #34495e;
+    flex-shrink: 0;
+
+    h3 {
+      color: #ecf0f1;
+      font-size: 1rem;
+      margin: 0;
+    }
+  }
+
+  .preview-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 15px;
+    min-height: 0;
+  }
+}
+
+/* 通用卡片样式 */
+.section-card {
+  background-color: #34495e;
+  border-radius: 4px;
+  padding: 15px;
+  margin-bottom: 15px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+
+    .section-title {
+      font-size: 1rem;
+      font-weight: bold;
+      color: #ecf0f1;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin: 0;
+
+      i {
+        color: #597A37;
+      }
+    }
+  }
+}
+
+/* 表单样式优化 */
+::v-deep .el-form {
+  .el-form-item {
+    margin-bottom: 16px;
+
+    &__label {
+      color: #bdc3c7;
+      padding-right: 10px;
+      line-height: 32px;
+    }
+
+    &__content {
+      line-height: 32px;
+    }
+  }
+
+  .el-input__inner,
+  .el-textarea__inner,
+  .el-select .el-input__inner {
+    background-color: #2c3e50;
+    border: 1px solid #34495e;
+    color: white;
+    width: 100%;
+
+    &:focus {
+      border-color: #597A37;
+    }
+
+    &::placeholder {
+      color: #7f8c8d;
+    }
+  }
+
+  .el-textarea__inner {
+    min-height: 80px !important;
+  }
+}
+
+/* 目标列表样式 */
+.target-list {
+  .target-item {
+    background-color: #2c3e50;
+    border-radius: 4px;
+    padding: 12px;
+    margin-bottom: 10px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .target-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 8px;
+
+      .target-name {
+        font-weight: bold;
+        color: #ecf0f1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 150px;
+      }
+
+      .target-actions {
+        display: flex;
+
+        .el-button {
+          color: #bdc3c7;
+          padding: 2px;
+          margin-left: 5px;
+
+          &:hover {
+            color: #ecf0f1;
+          }
+        }
+      }
+    }
+
+    .target-info {
+      display: flex;
+      justify-content: space-between;
+      font-size: 0.85rem;
+
+      .target-type {
+        color: #597A37;
+      }
+
+      .target-coord {
+        color: #7f8c8d;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 120px;
+      }
+    }
+  }
+}
+
+/* 装备列表样式 */
+.equipment-list {
+  .equipment-item {
+    background-color: #2c3e50;
+    border-radius: 4px;
+    padding: 12px;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    position: relative;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .equipment-icon {
+      width: 40px;
+      height: 40px;
+      background-color: #34495e;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #597A37;
+      font-size: 1.2rem;
+      flex-shrink: 0;
+    }
+
+    .equipment-info {
+      flex: 1;
+      min-width: 0;
+
+      .equipment-name {
+        font-weight: bold;
+        color: #ecf0f1;
+        margin-bottom: 3px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .equipment-type {
+        color: #7f8c8d;
+        font-size: 0.85rem;
+        margin-bottom: 8px;
+      }
+
+      .equipment-quantity {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .quantity-control {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+
+          .quantity-display {
+            min-width: 30px;
+            text-align: center;
+            color: #ecf0f1;
+          }
+        }
+      }
+    }
+
+    .equipment-badge {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      background-color: #597A37;
+      color: white;
+      font-size: 0.75rem;
+      padding: 2px 6px;
+      border-radius: 10px;
+    }
+  }
+}
+
+/* 策略网格样式 */
+.strategy-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 10px;
+
+  .strategy-card {
+    background-color: #2c3e50;
+    border-radius: 4px;
+    padding: 12px;
+    cursor: pointer;
+    transition: all 0.3s;
+    border: 1px solid transparent;
+    min-width: 0;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    }
+
+    &.selected {
+      border-color: #597A37;
+      background-color: #3a5140;
+    }
+
+    .strategy-icon {
+      width: 40px;
+      height: 40px;
+      background-color: #34495e;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #597A37;
+      font-size: 1.2rem;
+      margin-bottom: 10px;
+    }
+
+    .strategy-info {
+      min-width: 0;
+
+      .strategy-name {
+        font-weight: bold;
+        color: #ecf0f1;
+        margin-bottom: 5px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .strategy-desc {
+        color: #bdc3c7;
+        font-size: 0.85rem;
+        line-height: 1.3;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+    }
+  }
+}
+
+/* 装备策略样式 */
+.equipment-strategy {
+  .equipment-strategy-item {
+    background-color: #2c3e50;
+    border-radius: 4px;
+    padding: 12px;
+    margin-bottom: 10px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .strategy-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+
+      .equipment-name {
+        font-weight: bold;
+        color: #ecf0f1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 120px;
+      }
+    }
+
+    .strategy-params {
+      border-top: 1px solid #34495e;
+      padding-top: 10px;
+    }
+  }
+}
+
+/* 验证卡片样式 */
+.validation-card {
+  background-color: #597A37;
+  border-radius: 4px;
+  padding: 12px;
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+
+  .validation-icon {
+    font-size: 1.2rem;
+    color: white;
+    margin-top: 2px;
+    flex-shrink: 0;
+  }
+
+  .validation-content {
+    flex: 1;
+    min-width: 0;
+
+    .validation-title {
+      font-weight: bold;
+      margin-bottom: 5px;
+      color: white;
+    }
+
+    .validation-message {
+      font-size: 0.9rem;
+      color: #ecf0f1;
+      margin-bottom: 10px;
+    }
+
+    .validation-actions {
+      display: flex;
+      gap: 10px;
+    }
+  }
+}
+
+/* 预览区域样式 */
+.preview-section {
+  margin-bottom: 20px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  h4 {
+    color: #ecf0f1;
+    margin-bottom: 10px;
+    font-size: 1rem;
+  }
+
+  .overview-stats {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+
+    .stat-item {
+      background-color: #34495e;
+      border-radius: 4px;
+      padding: 15px;
+      text-align: center;
+
+      .stat-value {
+        font-size: 1.5rem;
+        font-weight: bold;
+        color: #597A37;
+        margin-bottom: 5px;
+      }
+
+      .stat-label {
+        color: #bdc3c7;
+        font-size: 0.85rem;
+      }
+    }
+  }
+
+  .timeline {
+    .timeline-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 10px;
+      margin-bottom: 15px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .timeline-marker {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background-color: #34495e;
+        border: 2px solid #597A37;
+        flex-shrink: 0;
+        margin-top: 3px;
+      }
+
+      &.active .timeline-marker {
+        background-color: #597A37;
+      }
+
+      .timeline-content {
+        flex: 1;
+        min-width: 0;
+
+        .timeline-time {
+          font-weight: bold;
+          color: #597A37;
+          font-size: 0.9rem;
+          margin-bottom: 3px;
+        }
+
+        .timeline-event {
+          color: #ecf0f1;
+          font-size: 0.9rem;
+        }
+      }
+    }
+  }
+
+  .risk-assessment {
+    .risk-item {
+      background-color: #34495e;
+      border-radius: 4px;
+      padding: 12px;
+      margin-bottom: 10px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .risk-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 8px;
+
+        .risk-name {
+          font-weight: bold;
+          color: #ecf0f1;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          max-width: 150px;
+        }
+      }
+
+      .risk-desc {
+        color: #bdc3c7;
+        font-size: 0.85rem;
+        margin-bottom: 8px;
+      }
+
+      .risk-mitigation {
+        color: #27ae60;
+        font-size: 0.85rem;
+      }
+    }
+  }
+}
+
+/* 响应式处理 */
+@media (max-width: 1200px) {
+  .task-panel {
+    flex: 0 0 240px;
+  }
+
+  .preview-panel {
+    flex: 0 0 300px;
+  }
+}
+
+@media (max-width: 992px) {
+  .main-container {
+    flex-direction: column;
+  }
+
+  .task-panel, .preview-panel {
+    flex: 0 0 auto;
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid #4a6572;
+  }
+}
+
+@media (max-width: 768px) {
+  .header {
+    flex-direction: column;
+    padding: 10px;
+    height: auto;
+
+    h1 {
+      margin-bottom: 10px;
+    }
+
+    .header-controls {
+      width: 100%;
+      justify-content: space-between;
+    }
+  }
+
+  .strategy-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .overview-stats {
+    grid-template-columns: 1fr !important;
+  }
+}
+</style>

src/views/decision/testBuild/index.vue

@@ -0,0 +1,848 @@
+<template>
+  <div>
+    <DarkLayout :query-form="queryForm">
+      <!-- 查询表单插槽 -->
+      <template #query-form>
+        <el-form-item label="任务名称">
+          <el-input
+              v-model="queryForm.name"
+              placeholder="请输入任务名称"
+              clearable
+          />
+        </el-form-item>
+        <el-form-item label="任务代号">
+          <el-input
+              v-model="queryForm.taskCode"
+              placeholder="请输入任务代号"
+              clearable
+          />
+        </el-form-item>
+      </template>
+
+      <!-- Header右侧操作按钮 -->
+      <template #header-actions>
+        <el-button icon="el-icon-search" @click="handleQuery">
+          查询
+        </el-button>
+
+        <el-button
+            @click="resetQuery"
+            icon="el-icon-delete"
+            type="danger"
+        > 重置 </el-button>
+<!--        <el-button
+            @click="addTask"
+            icon="el-icon-delete"
+            type="danger"
+        > 创建方案 </el-button>-->
+      </template>
+
+      <!-- 主要内容 - 使用Tailwind优化卡片布局 -->
+      <template #main>
+        <ImportTaskCard
+            v-for="plan in planList"
+            :key="plan.id"
+            :plan="plan"
+            @view-detail="handleDetail"
+            @choose-task="chooseTask"
+            class="transition-all duration-300 hover:shadow-lg"
+        />
+        <!-- 空状态-->
+        <el-empty v-if="planList.length === 0" description="暂无数据" />
+      </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>
+      <div >
+        <el-button @click="drawerVisible = false" type="info">取消</el-button>
+        <el-button @click="handleConfirm">确定</el-button>
+      </div>
+    </DarkDrawer>
+    <!-- 新增：任务详情抽屉 -->
+    <DarkDrawer
+        title="任务详情"
+        :visible.sync="detailDrawerVisible"
+        size="50%"
+        :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 class="detail-status">
+            <el-tag
+                :type="detailStatusTagType"
+                size="small"
+                effect="dark"
+            >
+              {{ currentDetailPlan.status || '-' }}
+            </el-tag>
+          </div>
+        </div>
+
+        <!-- 详情内容区 -->
+        <div class="detail-content">
+          <!-- 基本信息卡片 -->
+          <div class="detail-card">
+            <h4 class="card-title">基本信息</h4>
+            <div class="info-grid">
+              <div class="info-item">
+                <span class="detail-label">任务名称:</span>
+                <span class="detail-value">{{ currentDetailPlan.simulationTaskName || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="detail-label">任务类型:</span>
+                <span class="detail-value">{{ currentDetailPlan.taskType || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="detail-label">开始时间:</span>
+                <span class="detail-value">{{ currentDetailPlan.simulationStartTime || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="detail-label">结束时间:</span>
+                <span class="detail-value">{{ currentDetailPlan.simulationEndTime || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="detail-label">模拟次数:</span>
+                <span class="detail-value">{{ currentDetailPlan.simulationCount || '-' }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- 参与信息卡片 -->
+          <div class="detail-card">
+            <h4 class="card-title">参与信息</h4>
+            <div class="info-grid">
+              <div class="info-item full-width">
+                <span class="detail-label">参试任务:</span>
+                <span class="detail-value">{{ currentDetailPlan.simulationParticipantTasks || '-' }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- 创建信息卡片 -->
+          <div class="detail-card">
+            <h4 class="card-title">创建信息</h4>
+            <div class="info-grid">
+              <div class="info-item">
+                <span class="detail-label">创建人:</span>
+                <span class="detail-value">{{ currentDetailPlan.username || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="detail-label">创建时间:</span>
+                <span class="detail-value">{{ currentDetailPlan.createTime || '-' }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </DarkDrawer>
+  </div>
+</template>
+
+<script>
+
+import DarkLayout from '@/components/GlobalComponents/DarkLayout.vue'
+import TaskUserCard from '@/components/Components/TaskUserCard.vue'
+import DarkDialog from "@/components/Components/DarkDialog.vue";
+import TargetCard from "./components/TargetCard.vue"
+import MeasCard from "./components/MeasCard.vue"
+import InterferenceCard from "./components/InterferenceCard.vue"
+
+export default {
+  components: {
+    DarkDialog,
+    DarkLayout,
+    TaskUserCard,
+    TargetCard,
+    MeasCard,
+    InterferenceCard,
+  },
+  data() {
+    return {
+      detailDrawerVisible: false,
+      currentDetailPlan: {},
+      role:'ordinary',//角色选择 指挥角色下 不可编辑
+      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: "待审核"
+        }
+      ],
+      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: "待审核"
+        }
+      ],
+      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: '待审核'
+        },
+      ],
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      },
+      showAdvancedSearch: false
+    }
+  },
+  computed: {
+    detailSecretTagStyle() {
+      const colors = {
+        '绝密': '#c45656',
+        '机密': '#b88230',
+        '秘密': '#3475b5',
+      };
+      return {
+        backgroundColor: colors[this.currentDetailPlan.secretLevel] || '#6b7280',
+      };
+    },
+    detailStatusTagType() {
+      const statusMap = {
+        '已确认': 'success',
+        '未确认': 'warning',
+        '草稿': 'info',
+        '有效': 'success',
+        '待审核': 'warning',
+        '已过期': 'danger'
+      };
+      return statusMap[this.currentDetailPlan.status] || 'default';
+    }
+  },
+  methods: {
+    handleDetail(plan) {
+      this.currentDetailPlan = { ...plan };
+      this.detailDrawerVisible = true;
+    },
+    // 干扰方案选择处理
+    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: '/testBuild/orderEdit',  // 跳转到configForPlan页面
+        query: {
+          interferenceName: this.selectedInterference.planName,
+          targetName: this.selectedTarget.planName,
+          measName: this.selectedMeas.planName,
+          role:this.role
+        }
+      });
+
+      this.drawerVisible = false;
+    },
+    handleSelectInt(){
+
+    },
+    handleEditInt(){
+      console.log("选择任务 干扰方案")
+      this.$router.push({ path: '/planningSchem/Interference',query: { planType: '干扰方案' }  })
+    },
+    viewDetailsInt(){
+
+    },
+    handleSelectB(){
+
+    },
+    handleEditB(){
+      console.log("选择任务 靶标方案")
+      this.$router.push({ path: '/taskEdit/TargerEdit',query: { planType: '靶标方案' }  })
+    },
+    viewDetailsB(){
+
+    },
+    handleSelectC(){
+
+    },
+    handleEditC(){
+      console.log("选择任务 测量方案")
+      this.$router.push({ path: '/taskEdit/MeasEdit',query: { planType: '测量方案' }  })
+    },
+    viewDetailsC(){
+
+    },
+    // 根据方案类型过滤数据
+    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: ''})
+    },
+    handleQuery() {
+      // 查询逻辑
+    },
+    //创建任务
+    addTask(){
+
+    },
+    resetQuery() {
+      this.queryForm = {
+        name: '',
+        taskCode: ''
+      }
+      this.handleQuery()
+    },
+    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));
+}
+
+.cards-container {
+  padding: 15px 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 15px;
+}
+
+/* 抽屉滚动条样式优化 */
+.drawer-main::-webkit-scrollbar {
+  width: 6px;
+}
+
+.drawer-main::-webkit-scrollbar-track {
+  background: #2c3e50;
+}
+
+.drawer-main::-webkit-scrollbar-thumb {
+  background: #4a6572;
+  border-radius: 3px;
+}
+
+/* 任务详情抽屉样式优化 */
+.detail-container {
+  padding: 20px;
+  height: 100%;
+  box-sizing: border-box;
+  overflow-y: auto;
+  max-height: 85vh;
+}
+
+.detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 25px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #374151;
+}
+
+.detail-title {
+  font-size: 22px;
+  font-weight: 600;
+  color: #e5e7eb;
+  margin: 0;
+  flex-grow: 1;
+  padding: 0 15px;
+}
+
+.secret-tag {
+  padding: 3px 10px;
+  border-radius: 4px;
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.detail-status {
+  display: flex;
+  align-items: center;
+}
+
+.detail-content {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.detail-card {
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.detail-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #93c5fd;
+  margin-top: 0;
+  margin-bottom: 15px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #374151;
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15px;
+}
+
+.info-item {
+  display: flex;
+  flex-direction: column;
+}
+
+.full-width {
+  grid-column: 1 / -1;
+}
+
+.detail-label {
+  font-size: 14px;
+  color: #9ca3af;
+  margin-bottom: 5px;
+}
+
+.detail-value {
+  font-size: 15px;
+  color: #e5e7eb;
+  word-break: break-word;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .info-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .full-width {
+    grid-column: 1;
+  }
+
+  .detail-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .detail-status {
+    align-self: flex-start;
+  }
+}
+</style>