From 677a5fa9accf86d9407060ebbea22b21cc5c7f6c Mon Sep 17 00:00:00 2001
From: Zzc <1373857752@qq.com>
Date: Fri, 21 Nov 2025 18:16:29 +0800
Subject: [PATCH] =?UTF-8?q?feat(screen):=20=E6=B7=BB=E5=8A=A0=E5=8F=AF?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E7=9A=84=E8=AE=A1=E5=88=92=E6=AD=A5=E9=AA=A4?=
 =?UTF-8?q?=E5=92=8C=E5=9F=BA=E4=BA=8E=E7=AB=99=E7=82=B9=E7=9A=84=E8=B0=83?=
 =?UTF-8?q?=E5=BA=A6=E8=AE=A1=E5=88=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用el-input将静态计划步骤和后续文本转换为可编辑输入框
- 使清场步骤和调度计划具有响应性，支持动态站点分配
- 添加用于添加和删除调度计划的UI元素（当前已禁用）
- 为新的交互组件更新样式并改善布局
- 从父组件集成stations属性以实现站点名称的自动分配
---
 .../shared/EmergencyPlanContent.vue           | 236 ++++++++++++++++--
 .../3DSituationalAwarenessRefactor/index.vue  |   2 +-
 2 files changed, 218 insertions(+), 20 deletions(-)

diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/EmergencyPlanContent.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/EmergencyPlanContent.vue
index 7f9ff39..917003b 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/EmergencyPlanContent.vue
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/EmergencyPlanContent.vue
@@ -144,7 +144,12 @@
         <div class="plan-steps">
           <div v-for="step in clearanceSteps" :key="step.id" class="step-item">
             <label class="step-label">{{ step.number }}{{ step.title }}</label>
-            <div class="step-content">{{ step.content }}</div>
+            <el-input
+              v-model="step.content"
+              type="textarea"
+              :autosize="{ minRows: 2, maxRows: 4 }"
+              class="step-content-input"
+            />
           </div>
         </div>
       </div>
@@ -159,7 +164,10 @@
           class="title-icon"
         />
         <h3 class="section-title">力量调派方案</h3>
-        <button class="add-btn" @click="handleAddPlan">新增</button>
+        <button class="add-btn" @click="handleAddPlan">
+          <span class="add-icon">+</span>
+          <span>新增</span>
+        </button>
       </div>
       <div class="section-body">
         <div class="dispatch-plans">
@@ -168,9 +176,10 @@
             :key="plan.id"
             class="dispatch-card"
           >
+            <button class="close-btn" @click="handleDeletePlan(plan.id)" title="删除">×</button>
             <h4 class="plan-name">
               <span class="plan-icon"></span>
-              {{ plan.name }}
+              基地{{ plan.id }}：{{ plan.stationName || 'xxxxx名称' }}
             </h4>
             <div class="resource-grid">
               <div
@@ -198,16 +207,34 @@
         <h3 class="section-title">后续处治</h3>
       </div>
       <div class="section-body">
-        <p class="follow-up-text">{{ followUpText }}</p>
+        <el-input
+          v-model="followUpText"
+          type="textarea"
+          :autosize="{ minRows: 3, maxRows: 6 }"
+          class="follow-up-textarea"
+        />
       </div>
     </section>
   </div>
 </template>
 
 <script setup>
-import { reactive } from "vue";
-// 导入 Element Plus 组件（如果项目已全局注册则可省略）
-// import { ElSelect, ElOption } from 'element-plus'
+import { ref, reactive, computed, watch } from "vue";
+
+/**
+ * Props 定义
+ */
+const props = defineProps({
+  stations: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+/**
+ * 可用站点列表（从快速匹配传入）
+ */
+const availableStations = computed(() => props.stations);
 
 /**
  * 表单数据
@@ -226,7 +253,7 @@ const formData = reactive({
 /**
  * 公路抢通方案步骤
  */
-const clearanceSteps = [
+const clearanceSteps = reactive([
   {
     id: 1,
     number: "①",
@@ -268,17 +295,17 @@ const clearanceSteps = [
     title: "全断面抢通",
     content: "将剩余集聚废弃物的清理清除，恢复道路原貌状。",
   },
-];
+]);
 
 /**
  * 力量调派预案
  */
-const dispatchPlans = [
+const dispatchPlans = ref([
   {
     id: 1,
-    name: "基地1：xxxxx名称",
+    stationName: "", // 站点名称，从 stations 自动赋值
     resources: [
-      { label: "装载机挖掘机", value: "1台" },
+      { label: "轮播挖掘机挖掘机", value: "1台" },
       { label: "平板拖车", value: "1台" },
       { label: "自卸货车", value: "4台" },
       { label: "工程车", value: "1台" },
@@ -291,9 +318,9 @@ const dispatchPlans = [
   },
   {
     id: 2,
-    name: "基地2：xxxxx名称",
+    stationName: "",
     resources: [
-      { label: "装载机挖掘机", value: "1台" },
+      { label: "轮播挖掘机挖掘机", value: "1台" },
       { label: "平板拖车", value: "1台" },
       { label: "自卸货车", value: "4台" },
       { label: "工程车", value: "1台" },
@@ -304,20 +331,94 @@ const dispatchPlans = [
       { label: "麻袋、砂石袋等", value: "若干" },
     ],
   },
-];
+]);
 
 /**
  * 后续处治文本
  */
-const followUpText =
-  '将该处于方案大部分障碍清点，设置"注意落石"等标志牌，进行巡逻管控，进行巡逻处理信号监测统设备。';
+const followUpText = ref(
+  '将该处于方案大部分障碍清点，设置"注意落石"等标志牌，进行巡逻管控，进行巡逻处理信号监测统设备。'
+);
+
+/**
+ * 根据站点索引获取站点名称
+ * @param {number} index - 站点索引（从0开始）
+ * @returns {string} 站点名称
+ */
+const getStationNameByIndex = (index) => {
+  if (availableStations.value && availableStations.value.length > index) {
+    return availableStations.value[index].name;
+  }
+  return "";
+};
+
+/**
+ * 自动为所有基地分配站点名称
+ */
+const assignStationNames = () => {
+  dispatchPlans.value.forEach((plan, index) => {
+    plan.stationName = getStationNameByIndex(index);
+  });
+};
+
+/**
+ * 监听站点数据变化，自动分配站点名称
+ */
+watch(
+  () => props.stations,
+  (newStations) => {
+    console.log("[EmergencyPlanContent] 站点数据变化检测:", newStations);
+    if (newStations && newStations.length > 0) {
+      assignStationNames();
+      console.log("[EmergencyPlanContent] 站点数据更新，自动分配站点名称");
+      console.log("[EmergencyPlanContent] 当前基地列表:", dispatchPlans.value);
+    } else {
+      console.log("[EmergencyPlanContent] 站点数据为空或未定义");
+    }
+  },
+  { immediate: true, deep: true }
+);
 
 /**
  * 处理新增预案按钮点击
  */
 const handleAddPlan = () => {
+  // 暂时禁止新增预案
+  return
   console.log("[EmergencyPlanContent] 点击新增预案");
-  // TODO: 后续可以打开新增预案弹窗或添加新预案
+  const newId = Math.max(...dispatchPlans.value.map((p) => p.id)) + 1;
+  const newIndex = dispatchPlans.value.length;
+
+  dispatchPlans.value.push({
+    id: newId,
+    stationName: getStationNameByIndex(newIndex),
+    resources: [
+      { label: "轮播挖掘机挖掘机", value: "1台" },
+      { label: "平板拖车", value: "1台" },
+      { label: "自卸货车", value: "4台" },
+      { label: "工程车", value: "1台" },
+      { label: "人员", value: "15人" },
+      { label: "标志标牌", value: "5块" },
+      { label: "铁锹", value: "30件" },
+      { label: "铁镐", value: "10件" },
+      { label: "麻袋、砂石袋等", value: "若干" },
+    ],
+  });
+};
+
+/**
+ * 处理删除预案
+ */
+const handleDeletePlan = (id) => {
+  // 暂时禁止删除预案
+  return
+  console.log("[EmergencyPlanContent] 删除预案", id);
+  const index = dispatchPlans.value.findIndex((p) => p.id === id);
+  if (index > -1) {
+    dispatchPlans.value.splice(index, 1);
+    // 删除后重新分配站点名称，保持顺序
+    assignStationNames();
+  }
 };
 </script>
 
@@ -374,6 +475,15 @@ const handleAddPlan = () => {
     font-family: SourceHanSansCN-Medium, sans-serif;
     cursor: pointer;
     transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: vw(6);
+
+    .add-icon {
+      font-size: fs(18);
+      font-weight: bold;
+      line-height: 1;
+    }
 
     &:hover {
       background: var(--primary-light);
@@ -591,6 +701,35 @@ const handleAddPlan = () => {
     background: #052044;
     border-radius: vw(4);
   }
+
+  .step-content-input {
+    flex: 1;
+
+    :deep(.el-textarea__inner) {
+      background: #052044 !important;
+      border: 1px solid rgba(28, 161, 255, 0.3) !important;
+      border-radius: vw(4);
+      color: var(--text-white);
+      font-size: fs(13);
+      font-family: SourceHanSansCN-Regular, sans-serif;
+      line-height: 1.6;
+      padding: vh(8) vw(12);
+      transition: border-color 0.3s ease;
+
+      &:hover {
+        border-color: var(--primary-color) !important;
+      }
+
+      &:focus {
+        border-color: var(--primary-color) !important;
+        box-shadow: none !important;
+      }
+
+      &::placeholder {
+        color: rgba(255, 255, 255, 0.3);
+      }
+    }
+  }
 }
 
 /* 调派预案 */
@@ -605,13 +744,45 @@ const handleAddPlan = () => {
   border: 1px solid rgba(28, 161, 255, 0.2);
   border-radius: vw(8);
   padding: vh(12) vw(14);
+  position: relative;
+
+  .close-btn {
+    position: absolute;
+    top: vh(12);
+    right: vw(14);
+    width: vw(24);
+    height: vw(24);
+    border-radius: 50%;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    font-size: fs(20);
+    line-height: 1;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: rgba(255, 77, 79, 0.2);
+      border-color: #ff4d4f;
+      color: #ff4d4f;
+      transform: rotate(90deg);
+    }
+
+    &:active {
+      transform: rotate(90deg) scale(0.95);
+    }
+  }
 
   .plan-name {
     font-size: fs(15);
     font-family: SourceHanSansCN-Bold, sans-serif;
     font-weight: bold;
     color: var(--text-white);
-    margin: 0 0 vh(10) 0;
+    margin: 0 vw(30) vh(10) 0;
+
     .plan-icon {
       display: inline-block;
       width: 9px;
@@ -660,6 +831,33 @@ const handleAddPlan = () => {
   background: #052044;
   border-radius: vw(4);
 }
+
+.follow-up-textarea {
+  :deep(.el-textarea__inner) {
+    background: #052044 !important;
+    border: 1px solid rgba(28, 161, 255, 0.3) !important;
+    border-radius: vw(4);
+    color: var(--text-white);
+    font-size: fs(13);
+    font-family: SourceHanSansCN-Regular, sans-serif;
+    line-height: 1.8;
+    padding: vh(10) vw(14);
+    transition: border-color 0.3s ease;
+
+    &:hover {
+      border-color: var(--primary-color) !important;
+    }
+
+    &:focus {
+      border-color: var(--primary-color) !important;
+      box-shadow: none !important;
+    }
+
+    &::placeholder {
+      color: rgba(255, 255, 255, 0.3);
+    }
+  }
+}
 </style>
 
 <style lang="scss">
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue
index 595eb5d..13a8ed7 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue
@@ -178,7 +178,7 @@
       width="clamp(100px, 50vw, 1400px)"
     >
       <!-- 使用应急方案内容组件 -->
-      <EmergencyPlanContent />
+      <EmergencyPlanContent :stations="disasterData.forcePreset.value.stations" />
 
       <!-- 底部一键启动按钮 -->
       <template #footer>