yjdp-web/src/views/emergencyCommandMap/RightSection/StartPlan.vue

<template>
  <div class="dialog">
    <div class="title gradient-text">启动预案</div>
    <div class="close-icon" @click="onClose"></div>
    <!-- 响应等级选择和操作按钮 -->
    <div class="section-box">
      <div class="title2">响应等级</div>
      <el-select
        v-model="selectedLevel"
        placeholder="请选择响应等级"
        class="custom-select"
        popper-class="custom-select-popper"
        :teleported="false"
        style="width: 1200px; margin-left: 30px"
        @change="change_response_level"
      >
        <el-option v-for="level in responseLevels" :key="level.value" :label="level.name" :value="level.value"></el-option>
      </el-select>
      <div class="common-btn-primary2" @click="onStartPlan" v-show="planId === ''">启动预案</div>
      <div class="common-btn-primary2" @click="onCancelPlan" v-show="planId != ''">取消响应</div>
      <div class="common-btn-primary2" @click="onTaskDelivery" v-show="planId === ''">预案任务下发</div>
    </div>
    <div class="title-box">{{ planTitle }}</div>

    <div class="plan-content">
      <!-- 预案内容的标签页 -->
      <div class="tabs">
        <div v-for="(item, index) in tabs" :key="index" :class="index === activeTab ? 'tab tabActive' : 'tab'" @click="handleClickTab(index)">{{ item.title }}</div>
      </div>
      <div class="tab-content">
        <div class="tabs2">
          <div
            v-for="(item, index) in tabs[activeTab]?.items"
            :key="index"
            :class="index === activeTab2 ? 'tab tab-active2' : 'tab'"
            @click="handleClickTab2(index)"
          >
            <div class="text">{{ item.title }}</div>
          </div>
        </div>
        <div class="tab-content2" v-html="tabs[activeTab].items[activeTab2].value" v-if="tabs[activeTab] && tabs[activeTab].items && tabs[activeTab].items[activeTab2]"></div>
        <!--
        <div class="tab-content2">
          {{
            tabs[activeTab] && tabs[activeTab].items && tabs[activeTab].items[activeTab2] ? tabs[activeTab].items[activeTab2].value : ''
          }}
        </div>
        -->
      </div>
    </div>

    <TaskDelivery v-model="taskDeliveryState.show" :title="taskDeliveryState.title" :planId="planData.plan_id" :eventId="props.eventId" />
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, defineProps, defineEmits, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import TaskDelivery from './TaskDelivery.vue';
import { matchingPlan, launchPlan, getPlanDoc, cancelPlan, updatePlanResponseLevel } from '@/api/duty/eventing';
import { getEventDetail } from '@/api/duty/eventing';
// 内部状态
const planId = ref('');
const planTitle = ref(''); // 预案名称
const selectedLevel = ref(''); // 默认响应等级为空
const response_level = ref('');

// 定义组件接收的属性类型
interface Props {
  show: boolean;
  eventId: string;
  title: string;
}
// 初始化组件属性
const props = defineProps<Props>();

const responseLevels = [
  // 响应等级选项
  { value: '1', name: '特重大（I级）' },
  { value: '2', name: '重大（II级）' },
  { value: '3', name: '较大（III级）' },
  { value: '4', name: '一般（IV级）' }
];

const get_response_level_text = (val) => {
    return responseLevels.find(item => item.value == val).name
}

const planData = reactive({
    //purpose: '',
    //basis: '',
    //scope: '',
    //principles: '',
    plan_id: ''
});

// let plan_id = '';
const tabs = ref([
  {
    title: '总则',
    value: '',
    items: [
      { title: '编制目的', value: '编制目的内容' },
      { title: '编制依据', value: '编制依据内容' },
      { title: '适用范围', value: '适用范围内容' },
      { title: '工作原则', value: '工作原则内容' }
    ]
  },
  { title: '组织体系', items: [] },
  { title: '运行机制', items: [] },
  { title: '应急保障', items: [] },
  { title: '附则', items: [] },
  { title: '附件', items: [] }
]);
const activeTab = ref(0); // 当前激活的标签页
const activeTab2 = ref(0); // 当前激活的标签页

const handleClickTab = (key) => {
  activeTab.value = key;
};
const handleClickTab2 = (key) => {
  activeTab2.value = key;
};

// 定义事件发射器
const emit = defineEmits(['update:show']);

// 对话框关闭时执行的操作
const onClose = () => {
  emit('update:show', false);
};

const change_response_level = async() => {
  if(planId.value != "") {
    let confirm_msg = "";
    if (parseInt(selectedLevel.value) < parseInt(response_level.value)) {
      confirm_msg = "是否确认升级预案等级为" + get_response_level_text(selectedLevel.value);
    }
    else {
      confirm_msg = "是否确认降级预案等级为" + get_response_level_text(selectedLevel.value);
    }
    ElMessageBox.confirm(confirm_msg, '系统提示', {
      type: 'warning'
    }).then((res) => {
      updatePlanResponseLevel({eventId: props.eventId, response_level: selectedLevel.value, plan_id: planData.plan_id})
      ElMessage.success("变更预案等级成功");
      setTimeout(()=>{onClose()}, 1000);
    })
  }
  console.log(selectedLevel.value);
};

// 处理启动预案的函数
const onStartPlan = async () => {
  // 检查是否选择了响应等级
  if (!selectedLevel.value) {
    ElMessage.error('请先选择响应等级！');
    return;
  }

  // 收集数据
  const data = {
    response_level: selectedLevel.value,
    eventId: props.eventId,
    plan_id: planData.plan_id // 确保 planData 中包含正确的 plan_id
  };

  try {
    // 调用后端API启动预案
    const response = await launchPlan(data);
    if (response && response.code === 200) {
      response_level.value = selectedLevel.value;
      ElMessage.success('预案启动成功！');
    } else if (response && response.code !== 200) {
      ElMessage.error(`预案启动失败，后端返回错误码：${response.code}`);
    }
  } catch (error) {
    console.error('启动预案时发生的错误:', error);
    if (error.response && error.response.data && error.response.data.message) {
      ElMessage.error(error.response.data.message);
    } else if (error.response && error.response.status) {
      ElMessage.error(`启动预案时发生错误，HTTP 状态码：${error.response.status}`);
    } else {
      // ElMessage.error('启动预案时发生未知错误，请稍后再试。');
    }
  }
};

const onCancelPlan = async() => {
  ElMessageBox.confirm('是否取消响应？', '系统提示', {
      type: 'warning'
    }).then((res) => {
      cancelPlan({eventId: props.eventId})
      ElMessage.success("取消响应成功");
      setTimeout(()=>{onClose()}, 1000);
    })
}

// 处理标签页点击事件
const onTabClick = (tab: any, event: Event) => {
  // 实现标签页点击的逻辑
};

// 控制 taskDelivery 弹窗的显示状态
const taskDeliveryState = reactive({
  show: ref(false),
  title: '' as string
});

// 处理预案任务下发内容的函数
const onTaskDelivery = () => {
  taskDeliveryState.title = '预案任务下发';
  taskDeliveryState.show = true;
};

// 调用接口获取预案数据
const fetchPlanData = async () => {
  try {
    if (!props.eventId) {
      ElMessage.warning('eventId 为空，无法获取预案数据');
      return;
    }
    const response = await matchingPlan({ eventId: props.eventId });
    if (response && response.code === 200) {
      const data = response.data;
      planTitle.value = `预案名称: ${data.plan_name}`;
      if (data.response_level) {
        const isValidLevel = responseLevels.some((level) => level.value === data.response_level);
        if (isValidLevel) {
          selectedLevel.value = data.response_level;
        } else {
          ElMessage.error('无效的响应等级，请检查数据');
          selectedLevel.value = '';
        }
      } else {
        selectedLevel.value = '';
      }
      //planData.purpose = data.purpose || '这是内容...';
      //planData.basis = data.basis || '这是内容...';
      //planData.scope = data.scope || '这是内容...';
      //planData.principles = data.principles || '这是内容...';
      planData.plan_id = data.plan_id; // 确保 planData 中包含 plan_id
      getPlanDocInfo(planData.plan_id);
    } else {
      ElMessage.error('未能从服务器获取有效的预案数据');
    }
  } catch (error) {
    console.log('error:', error);
    ElMessage.error('获取预案数据失败');
  }
};

const getPlanDocInfo = (plan_id) => {
  getPlanDoc({plan_id: plan_id}).then((res)=> {
    if(res.code === 200) {
      tabs.value = res.data;
    }
  });
}


// 在组件挂载时尝试获取预案数据
onMounted(async() => {
  if (props.eventId) {
    const response = await getEventDetail({ event_id: props.eventId });
    const event_data = response.data;
    planId.value = event_data.plan_id;
    
    fetchPlanData();
  }
});

// 监听 eventId 变化
watch(
  () => props.eventId,
  (newEventId) => {
    if (newEventId) {
      fetchPlanData();
    }
  }
);
</script>

<style scoped>
.dialog {
  position: absolute;
  top: 478px;
  left: 50%;
  transform: translateX(-50%);
  width: 2839px;
  height: 1263px;
  background: url('@/assets/images/plan/dialog.png') no-repeat;
  padding-top: 200px;
  color: #fff;
  font-size: 36px;
  .title {
    position: absolute;
    top: 30px;
    left: 55px;
    font-size: 80px;
  }
  .close-icon {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 75px;
    height: 70px;
    background: url('@/assets/images/map/rightMenu/close.png') no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }
  .section-box {
    display: flex;
    align-items: center;
    padding: 15px 60px;
    border-bottom: 6px solid rgba(50, 132, 251, 0.4);
    .common-btn-primary2 {
      margin-left: 40px;
    }
  }
  .title-box {
    background-image: url('@/assets/images/plan/titleBox.png');
    background-repeat: no-repeat;
    background-size: 354px 28px;
    background-position: bottom left;
    margin: 40px 60px 0;
    font-family: 'YouSheBiaoTiHei';
    font-size: 56px;
    padding-left: 50px;
  }
}

h2 {
  text-align: center;
}
/* 样式 */
.plan-content {
  display: flex;
  flex-direction: column;
  margin: 40px 60px;
}

.button-container {
  display: flex;
  justify-content: flex-end;
}

.content-row {
  margin-top: 20px;
}
.tabs {
  display: flex;
  width: 100%;
  overflow-x: auto;
  .tab {
    width: 350px;
    min-height: 78px;
    background: url('@/assets/images/plan/tab.png') no-repeat;
    background-size: 350px 78px;
    background-position: bottom;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-left: 50px;
    font-family: 'YouSheBiaoTiHei';
    font-size: 38px;
    cursor: pointer;
    padding: 0 35px;
    text-align: center;
    &:hover {
      background: url('@/assets/images/plan/tabActive.png') no-repeat;
      background-position: bottom;
    }
    &:first-child {
      margin-left: 0;
    }
  }
  .tabActive {
    background: url('@/assets/images/plan/tabActive.png') no-repeat;
    background-position: bottom;
  }
}
.tab-content {
  display: flex;
  margin-top: 30px;
  .tabs2 {
    height: 560px;

    overflow-y: auto;
    .tab {
      /*width: 399px;*/
      width: 600px;
      height: 70px;
      background: url('@/assets/images/plan/tab2.png') no-repeat;
      display: flex;
      align-items: center;
      padding-left: 76px;
      color: #9badc4;
      font-size: 36px;
      font-weight: bold;
      margin-top: 60px;
      position: relative;
      cursor: pointer;
      .text {
        white-space:nowrap;
      }
      &::before {
        content: '';
        width: 2px;
        height: 68px;
        background: #2b88bd;
        position: absolute;
        top: -63px;
        left: 42px;
      }
      &:first-child {
        margin-top: 0;
        &::before {
          display: none;
        }
      }
      &:hover {
        /*width: 439px;*/
        width: 600px;
        background: url('@/assets/images/plan/tab2Active.png') no-repeat;
        .text {
          /* 设置字体透明 */
          color: transparent;
          /* 设置线性渐变，从红色渐变到蓝色 */
          background-image: linear-gradient(to bottom, #fff 30%, #57c3fc 50%, #3aa1ea 100%);
          /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
          -webkit-background-clip: text;
          /* 非Webkit内核浏览器需要使用标准前缀 */
          background-clip: text;
          /* 把当前元素设置为行内块，以便能够应用背景 */
          display: inline-block;
        }
      }
    }
    .tab-active2 {
      /*width: 439px;*/
      width: 600px;
      background: url('@/assets/images/plan/tab2Active.png') no-repeat;
      .text {
        /* 设置字体透明 */
        color: transparent;
        /* 设置线性渐变，从红色渐变到蓝色 */
        background-image: linear-gradient(to bottom, #fff 40%, #5cc4fa 50%, #40a2e7 100%);
        /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
        -webkit-background-clip: text;
        /* 非Webkit内核浏览器需要使用标准前缀 */
        background-clip: text;
        /* 把当前元素设置为行内块，以便能够应用背景 */
        display: inline-block;
      }
    }
  }
  .tab-content2 {
    padding-left: 20px;
    height: 560px;
    flex: 1;
    overflow-y: auto;
  }
}
</style>