bxztApp/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/EmergencyPlanContent.vue

<template>
  <div class="emergency-plan-content">
    <!-- 1. 现场指挥部 -->
    <section class="plan-section">
      <div class="section-header">
        <img
          src="../../assets/images/modal/弹窗title.png"
          alt=""
          class="title-icon"
        />
        <h3 class="section-title">现场指挥部</h3>
      </div>
      <div class="section-body">
        <div class="form-grid">
          <div class="form-item">
            <label>指挥长</label>
            <el-select
              v-model="formData.commander"
              class="custom-select"
              popper-class="custom-dropdown"
            >
              <el-option label="王军" value="王军" />
              <el-option label="李明" value="李明" />
              <el-option label="张伟" value="张伟" />
            </el-select>
          </div>
          <div class="form-item">
            <label>副指挥长</label>
            <el-select
              v-model="formData.viceCommander"
              class="custom-select"
              popper-class="custom-dropdown"
            >
              <el-option label="刘勇" value="刘勇" />
              <el-option label="陈强" value="陈强" />
              <el-option label="赵军" value="赵军" />
            </el-select>
          </div>
        </div>
      </div>
    </section>

    <!-- 2. 多路协同处置三级指挥中心 -->
    <section class="plan-section">
      <div class="section-header">
        <img
          src="../../assets/images/modal/弹窗title.png"
          alt=""
          class="title-icon"
        />
        <h3 class="section-title">多路协同处置三级指挥中心</h3>
      </div>
      <div class="section-body">
        <div class="form-grid grid-2x2">
          <div class="form-item">
            <label>交通管控</label>
            <el-select
              v-model="formData.trafficControl"
              class="custom-select"
              popper-class="custom-dropdown"
            >
              <el-option label="公安交警、交通执法队" value="公安交警、交通执法队" />
              <el-option label="交通管理局" value="交通管理局" />
            </el-select>
          </div>
          <div class="form-item">
            <label>交通信息发布</label>
            <el-select
              v-model="formData.infoRelease"
              class="custom-select"
              popper-class="custom-dropdown"
            >
              <el-option label="融媒体中心" value="融媒体中心" />
              <el-option label="新闻中心" value="新闻中心" />
            </el-select>
          </div>
          <div class="form-item">
            <label>人车调拨</label>
            <el-select
              v-model="formData.vehicleDispatch"
              class="custom-select"
              popper-class="custom-dropdown"
            >
              <el-option label="xxx消防队" value="xxx消防队" />
              <el-option label="应急救援队" value="应急救援队" />
            </el-select>
          </div>
          <div class="form-item">
            <label>人员救援</label>
            <el-select
              v-model="formData.personnelRescue"
              class="custom-select"
              popper-class="custom-dropdown"
            >
              <el-option label="xx医院" value="xx医院" />
              <el-option label="中心医院" value="中心医院" />
            </el-select>
          </div>
        </div>
      </div>
    </section>

    <!-- 3. 公路抢通方案 -->
    <section class="plan-section">
      <div class="section-header">
        <img
          src="../../assets/images/modal/弹窗title.png"
          alt=""
          class="title-icon"
        />
        <h3 class="section-title">公路抢通方案</h3>
      </div>
      <div class="section-body">
        <div class="form-grid grid-2-cols">
          <div class="form-item">
            <label>抢通方式</label>
            <el-select
              v-model="formData.clearanceMethod"
              class="custom-select"
              popper-class="custom-dropdown"
            >
              <el-option
                label="两端对接抢通，必要时开辟工作面"
                value="两端对接抢通，必要时开辟工作面"
              />
              <el-option label="单端推进抢通" value="单端推进抢通" />
              <el-option label="多点同时作业" value="多点同时作业" />
            </el-select>
          </div>
          <div class="form-item">
            <label>预计抢通时间</label>
            <el-select
              v-model="formData.estimatedTime"
              class="custom-select"
              popper-class="custom-dropdown"
            >
              <el-option label="6小时" value="6小时" />
              <el-option label="8小时" value="8小时" />
              <el-option label="12小时" value="12小时" />
              <el-option label="24小时" value="24小时" />
            </el-select>
          </div>
        </div>
        <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>
            <el-input
              v-model="step.content"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              class="step-content-input"
            />
          </div>
        </div>
      </div>
    </section>

    <!-- 4. 力量调派方案 -->
    <section class="plan-section">
      <div class="section-header">
        <img
          src="../../assets/images/modal/弹窗title.png"
          alt=""
          class="title-icon"
        />
        <h3 class="section-title">力量调派方案</h3>
        <button class="add-btn" @click="handleAddPlan">
          <span class="add-icon">+</span>
          <span>新增</span>
        </button>
      </div>
      <div class="section-body">
        <div class="dispatch-plans">
          <div
            v-for="plan in dispatchPlans"
            :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.id }}：{{ plan.stationName || 'xxxxx名称' }}
            </h4>
            <div class="resource-grid">
              <div
                v-for="(resource, index) in plan.resources"
                :key="index"
                class="resource-item"
              >
                <span class="resource-label">{{ resource.label }}</span>
                <span class="resource-value">{{ resource.value }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 5. 后续处治 -->
    <section class="plan-section">
      <div class="section-header">
        <img
          src="../../assets/images/modal/弹窗title.png"
          alt=""
          class="title-icon"
        />
        <h3 class="section-title">后续处治</h3>
      </div>
      <div class="section-body">
        <el-input
          v-model="followUpText"
          type="textarea"
          :autosize="{ minRows: 3, maxRows: 6 }"
          class="follow-up-textarea"
        />
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch } from "vue";

/**
 * Props 定义
 */
const props = defineProps({
  stations: {
    type: Array,
    default: () => [],
  },
});

/**
 * 可用站点列表（从快速匹配传入）
 */
const availableStations = computed(() => props.stations);

/**
 * 表单数据
 */
const formData = reactive({
  commander: "王军",
  viceCommander: "刘勇",
  trafficControl: "公安交警、交通执法队",
  infoRelease: "融媒体中心",
  vehicleDispatch: "xxx消防队",
  personnelRescue: "xx医院",
  clearanceMethod: "两端对接抢通，必要时开辟工作面",
  estimatedTime: "6小时",
});

/**
 * 公路抢通方案步骤
 */
const clearanceSteps = reactive([
  {
    id: 1,
    number: "①",
    title: "评估封控",
    content:
      "对现场进行封控，清点各类应急物资提前到达现场，划定作业区与危险区，设立观察哨，全程监控边坡状况。",
  },
  {
    id: 2,
    number: "②",
    title: "边坡排险",
    content:
      "在确保安全的前提下，使用长臂挖掘机或人工在安全地域进行清除工作。注意下方施救作业。",
  },
  {
    id: 3,
    number: "③",
    title: "梯形清方",
    content:
      '按照机械自上而下，装载机抢先挖入土石堆入车，确土车上车主生，增土车队运输，将受阻路段疏通清理通道。确保抢险不停工，形成高效的"挖一装一运"循环。',
  },
  {
    id: 4,
    number: "④",
    title: "开辟工作面",
    content:
      "根据地质情况而规划车，利用挖掘机、装载机完成设备增加的工作面。增加作业效率。",
  },
  {
    id: 5,
    number: "⑤",
    title: "交通疏导",
    content:
      "清理出足够疏散车辆的临时性通道，临时道路根据道路情况设置限量所制路牌。在应急抢险下，试行错位通车。",
  },
  {
    id: 6,
    number: "⑥",
    title: "全断面抢通",
    content: "将剩余集聚废弃物的清理清除，恢复道路原貌状。",
  },
]);

/**
 * 力量调派预案
 */
const dispatchPlans = ref([
  {
    id: 1,
    stationName: "", // 站点名称，从 stations 自动赋值
    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: "若干" },
    ],
  },
  {
    id: 2,
    stationName: "",
    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 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] 点击新增预案");
  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>

<style scoped lang="scss">
@use "@/styles/mixins.scss" as *;

.emergency-plan-content {
  padding: 0;
  color: var(--text-white);
}

/* 区块样式 */
.plan-section {
  margin-bottom: vh(16);
  // border: 1px solid rgba(28, 161, 255, 0.3);
  border-radius: vw(4);
  overflow: hidden;

  &:last-child {
    margin-bottom: 0;
  }
}

/* 区块头部 */
.section-header {
  display: flex;
  align-items: center;
  gap: vw(8);
  padding: vh(2) vw(18);
  background: #1f497a;

  .title-icon {
    width: vw(8);
    height: vh(32);
    object-fit: contain;
  }

  .section-title {
    font-size: fs(18);
    font-family: SourceHanSansCN-Bold, sans-serif;
    font-weight: bold;
    color: var(--text-white);
    margin: 0;
  }

  .add-btn {
    margin-left: auto;
    padding: vh(6) vw(16);
    background: var(--primary-color);
    border: none;
    border-radius: vw(4);
    color: var(--text-white);
    font-size: fs(14);
    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);
      transform: translateY(-1px);
    }

    &:active {
      transform: translateY(0);
    }
  }
}

/* 区块内容 */
.section-body {
  padding: vh(14) vw(18);
}

/* 表单网格 */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: vw(16) vh(12);

  &.grid-2x2 {
    grid-template-columns: repeat(2, 1fr);
  }

  &.grid-2-cols {
    grid-template-columns: 1fr 1fr;
  }
}

/* 表单项 */
.form-item {
  display: flex;
  align-items: center;
  gap: vw(10);

  label {
    width: vw(100);
    font-size: fs(14);
    font-family: SourceHanSansCN-Regular, sans-serif;
    color: var(--text-gray);
    white-space: nowrap;
    flex-shrink: 0;
  }

  // Element Plus el-select 自定义样式
  :deep(.custom-select) {
    width: 100%;
    background: #052044 !important;

    // 选择器容器
    .el-select__wrapper {
      background: #052044 !important;
      box-shadow: none !important;
    }

    // 输入框包装器
    .el-input {
      background: #052044 !important;

      &__wrapper {
        background-color: #052044 !important;
        background: #052044 !important;
        border: 1px solid rgba(28, 161, 255, 0.3) !important;
        border-radius: vw(4);
        box-shadow: none !important;
        padding: vh(6) vw(12);
        transition: none !important;

        &:hover {
          border-color: var(--primary-color) !important;
          background-color: #052044 !important;
          background: #052044 !important;
        }

        &.is-focus,
        &.is-focused {
          border-color: var(--primary-color) !important;
          box-shadow: none !important;
          background-color: #052044 !important;
          background: #052044 !important;
        }
      }

      &__inner {
        color: #fff !important;
        font-size: fs(13);
        font-family: SourceHanSansCN-Regular, sans-serif;
        height: auto;
        background-color: transparent !important;
        background: transparent !important;

        // 强制覆盖 placeholder 颜色，确保选中值为纯白色
        &:not(:placeholder-shown) {
          color: #fff !important;
          opacity: 1 !important;
        }
      }
    }

    // 选择器内部的输入框
    .el-input {
      color: #fff !important;
      opacity: 1 !important;

      &__inner {
        color: #fff !important;
        opacity: 1 !important;
        -webkit-text-fill-color: #fff !important;

        // 覆盖所有可能的状态
        &[readonly] {
          color: #fff !important;
          opacity: 1 !important;
          -webkit-text-fill-color: #fff !important;
        }

        &:disabled {
          color: #fff !important;
          opacity: 1 !important;
          -webkit-text-fill-color: #fff !important;
        }
      }

      // 输入框后缀区域
      &__suffix {
        background-color: transparent !important;
        background: transparent !important;
      }

      // 输入框前缀区域
      &__prefix {
        background-color: transparent !important;
        background: transparent !important;
      }
    }

    // 输入框文本
    .el-select__input {
      color: #fff !important;
      opacity: 1 !important;
    }

    // 选中的值文本（优先级最高，放在最前）
    .el-select__selected-item {
      color: #fff !important;
      opacity: 1 !important;
    }

    // placeholder 文本（只针对真正的 placeholder）
    .el-input__inner::placeholder {
      color: rgba(255, 255, 255, 0.5) !important;
    }

    // 只在没有选中值时显示半透明的 placeholder
    .el-select__placeholder.is-transparent {
      color: rgba(255, 255, 255, 0.5) !important;
    }

    // 强制覆盖 input 元素的文本颜色（针对 readonly 状态）
    input.el-input__inner {
      color: #fff !important;
      opacity: 1 !important;
      -webkit-text-fill-color: #fff !important;
    }

    // 下拉箭头颜色
    .el-select__caret {
      color: var(--text-gray) !important;
    }

    // 清除按钮颜色
    .el-select__clear {
      color: var(--text-gray) !important;
    }

    // 选中的标签（多选时）
    .el-select__tags {
      background: transparent !important;
    }
  }
}

/* 方案步骤 */
.plan-steps {
  margin-top: vh(16);
  display: flex;
  flex-direction: column;
  gap: vh(12);
}

.step-item {
  display: flex;
  align-items: center;
  gap: vw(10);

  .step-label {
    width: vw(100);
    font-size: fs(14);
    font-family: SourceHanSansCN-Regular, sans-serif;
    color: var(--text-gray);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .step-content {
    flex: 1;
    font-size: fs(13);
    font-family: SourceHanSansCN-Regular, sans-serif;
    line-height: 1.6;
    color: var(--text-white);
    padding: vh(8) vw(12);
    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);
      }
    }
  }
}

/* 调派预案 */
.dispatch-plans {
  display: flex;
  flex-direction: column;
  gap: vh(12);
}

.dispatch-card {
  background: rgba(255, 255, 255, 0.06);
  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 vw(30) vh(10) 0;

    .plan-icon {
      display: inline-block;
      width: 9px;
      height: 9px;
      border: 2px solid #4fecff;
      border-radius: 50%;
      margin-right: 4px;
    }
  }

  .resource-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: vw(8) vh(8);
  }

  .resource-item {
    display: flex;
    // flex-direction: column;
    gap: vh(2);

    .resource-label {
      font-size: fs(12);
      font-family: SourceHanSansCN-Regular, sans-serif;
      color: var(--text-gray);
      width: vw(100);
    }

    .resource-value {
      font-size: fs(13);
      font-family: SourceHanSansCN-Medium, sans-serif;
      font-weight: 500;
      color: var(--text-white);
    }
  }
}

/* 后续处治文本 */
.follow-up-text {
  font-size: fs(13);
  font-family: SourceHanSansCN-Regular, sans-serif;
  line-height: 1.8;
  color: var(--text-white);
  margin: 0;
  padding: vh(10) vw(14);
  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">
// 全局样式：el-select 输入框背景和文字颜色（强制覆盖）
.custom-select {
  .el-input__wrapper {
    background-color: #052044 !important;
    background: #052044 !important;
  }

  .el-input {
    background-color: #052044 !important;
    background: #052044 !important;
    color: #fff !important;
    opacity: 1 !important;

    &__inner {
      color: #fff !important;
      opacity: 1 !important;
      -webkit-text-fill-color: #fff !important;

      // 覆盖所有可能的状态
      &[readonly] {
        color: #fff !important;
        opacity: 1 !important;
        -webkit-text-fill-color: #fff !important;
      }

      &:disabled {
        color: #fff !important;
        opacity: 1 !important;
        -webkit-text-fill-color: #fff !important;
      }

      // 强制覆盖 placeholder 颜色，确保选中值为纯白色
      &:not(:placeholder-shown) {
        color: #fff !important;
        opacity: 1 !important;
        -webkit-text-fill-color: #fff !important;
      }
    }
  }

  // 输入框文本
  .el-select__input {
    color: #fff !important;
    opacity: 1 !important;
  }

  // 选中的值（优先级最高，先定义）
  .el-select__selected-item {
    color: #fff !important;
    opacity: 1 !important;
  }

  // placeholder 文本（只针对真正的 placeholder）
  .el-input__inner::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
  }

  // 只在没有选中值时显示半透明的 placeholder
  .el-select__placeholder.is-transparent {
    color: rgba(255, 255, 255, 0.5) !important;
  }

  // 强制覆盖 input 元素的文本颜色（针对 readonly 状态）
  input.el-input__inner {
    color: #fff !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #fff !important;
  }
}

// 全局样式：下拉面板（挂载在 body 上，需要非 scoped 样式）
.custom-dropdown {
  background: #052044 !important;
  border: 1px solid rgba(28, 161, 255, 0.3) !important;

  // 下拉列表容器
  .el-select-dropdown__wrap {
    background: #052044 !important;
  }

  // 下拉列表
  .el-select-dropdown__list {
    background: #052044 !important;
    padding: 0;
  }

  // 下拉选项
  .el-select-dropdown__item {
    background: #052044 !important;
    color: #fff;
    font-size: 13px;
    font-family: SourceHanSansCN-Regular, sans-serif;

    &:hover {
      background: rgba(28, 161, 255, 0.2) !important;
    }

    &.is-selected {
      background: rgba(28, 161, 255, 0.3) !important;
      color: #fff;
      font-weight: 500;
    }

    &.is-hovering {
      background: rgba(28, 161, 255, 0.2) !important;
    }
  }

  // 空状态文字颜色
  .el-select-dropdown__empty {
    color: rgba(179, 204, 226, 1);
    background: #052044 !important;
  }

  // 滚动条样式
  .el-scrollbar__view {
    background: #052044 !important;
  }
}
</style>