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

<template>
  <div class="duty-card">
    <div class="title gradient-text">指挥动态</div>
    <ul class="tabs">
      <li v-for="(tab, index) in tabs" :key="index" :class="{ active: tab.id === activeTab }" @click="setActiveTab(tab.id)">
        {{ tab.label }}
      </li>
    </ul>
    <div class="card-content">
      <RenWuGenZong v-if="activeTab === '任务跟踪'" />
      <div v-else-if="activeTab === '预案通知'" class="custom-table">
        <div class="table-content">
          <div v-for="(notification, index) in notifications" :key="index" class="tr">
            <div class="td">
              <div class="unit-date">
                <span class="unit">{{ notification.unit }}</span>
                <span class="date">{{ notification.date }}</span>
                <span :class="['status', { error: notification.status === '发送失败', success: notification.status === '已发送' }]">
                  {{ notification.status === '发送失败' ? '发送失败' : `接收人：${notification.receiver}` }}
                </span>
              </div>
              <div class="content">{{ notification.content }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive } from 'vue';
import { taskList } from '@/api/duty/eventing';
import RenWuGenZong from '@/views/emergencyCommandMap/RightSection/RenWuGenZong.vue'; // 确保 eventing.ts 的路径正确

const props = defineProps<{
  eventId?: string; // 使用可选属性
}>();

// 输出 eventId 以验证是否正确获取
console.log('Received eventId in RightTop:', props.eventId);

// 定义 tabs
const tabs = reactive([
  { id: '任务跟踪', label: '任务跟踪' },
  { id: '预案通知', label: '预案通知' },
  { id: '资源调度', label: '资源调度' }
]);

const activeTab = ref('预案通知');

const setActiveTab = (id) => {
  activeTab.value = id;
};

// 定义 notifications
const notifications = ref([]);

// 请求数据
const fetchData = async () => {
  try {
    if (!props.eventId) {
      console.error('eventId 未找到');
      return;
    }

    const response = await taskList({ eventId: props.eventId });

    if (response.code === 200) {
      console.log('查询成功:', response.data);
      updateTaskList(response.data);
    } else {
      console.error('查询失败:', response.msg);
    }
  } catch (error) {
    console.error('请求失败:', error);
  }
};

// 更新任务列表
const updateTaskList = (tasks) => {
  notifications.value = tasks.map((task) => ({
    unit: task.dept_name,
    date: task.sent_time,
    status: task.sent_status === 0 ? '暂未发送' : '已发送',
    content: task.yzy_content,
    receiver: task.nick_name // 假设所有的任务都有接收者
  }));
};

// 在组件挂载时获取数据
onMounted(() => {
  console.log('Mounting RightTop component');
  if (props.eventId) {
    fetchData();
  } else {
    console.warn('RightTop did not receive eventId:', props.eventId);
  }
});
</script>

<style lang="scss" scoped>
.tabs {
  display: flex;
  justify-content: flex-start; /* 选项卡靠左对齐 */
  padding: 0px 0;
  .active {
    background: url('@/assets/images/emergencyCommandMap/tabActive.png') no-repeat;
  }
  li {
    cursor: pointer;
    padding: 20px;
    font-size: 38px;
    color: #fff;
    width: 349px;
    height: 118px;
    background: url('@/assets/images/emergencyCommandMap/tab.png') no-repeat;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-family: YouSheBiaoTiHei;
    &:hover {
      background: url('@/assets/images/emergencyCommandMap/tabActive.png') no-repeat;
    }
  }
}

.custom-table {
  width: 100%;
  .table-content {
    height: 600px;
    overflow-y: auto;
    .tr {
      display: flex;
      align-items: center;
      .td {
        flex: 1;
        padding: 10px;
        font-size: 36px;
        .unit-date {
          display: flex;
          align-items: center; /* 确保垂直居中 */
          justify-content: space-between; /* 使 status 靠右对齐 */
          span {
            white-space: nowrap;
            &.unit {
              font-size: 36px; /* 调整字体大小 */
              margin-right: 5px; /* 减小单位与日期之间的间距 */
            }
            &.date {
              font-size: 36px; /* 调整字体大小 */
              margin-right: auto; /* 使用 auto 推动 status 靠右 */
            }
            &.status {
              font-size: 36px; /* 调整字体大小 */
              text-align: right; /* 可选：如果需要进一步对齐内部文本 */
            }
            &.error {
              color: #ff4d4f; /* 发送失败时使用红色 */
            }
            &.success {
              color: #fff; /* 发送成功时使用黑色 */
            }
          }
        }
        .content {
          margin-top: 10px;
          font-size: 36px; /* 内容字体大小 */
          line-height: 1.5; /* 增加行高以适应较大的字体 */
        }
      }
    }
  }
}

.duty-card {
  width: 1966px;
  height: 879px;
  background: url('@/assets/images/commandDynamic/dialog.png') no-repeat;
  position: relative;
  color: #fff;
  .card-content {
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px; /* 减小顶部填充 */
    padding-left: 100px;
    width: 2500px;
  }
}
.title {
  position: absolute;
  top: 6px;
  left: 141px;
  font-size: 60px;
}
</style>