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

<template>
  <div class="duty-card">
    <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">
      <div v-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" :class="statusClasses[notification.status]">{{ notification.status }}</span>
                <button @click="updateTask(index)">更新</button>
              </div>
              <div class="content">{{ notification.content }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { selectTask, updateTask } from '@/api/emergencyCommandMap/JointDuty.ts'; // 确保API路径正确

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 notifications = ref([]);
const statusClasses = reactive({
  '已完成': 'success',
  '处理中': 'processing'
});

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

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

    const response = await selectTask({ 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 updateTask = (tasks) => {
//   notifications.value = tasks.map((task) => ({
//     unit: tasks.unit_name,
//     date: tasks.update_time,
//     status: task.processing_status,
//     content: task.task_description
//   }));
// };

// 更新任务
const updateTask = async (index) => {
  try {
    const task = notifications.value[index];
    const response = await updateTask(task);

    if (response.code === 200) {
      console.log('任务更新成功');
      fetchData(); // 重新加载任务列表
    } else {
      console.error('任务更新失败:', response.msg);
    }
  } catch (error) {
    console.error('请求任务更新失败:', error);
  }
};

// 在组件挂载时获取数据
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: 0 0;
  background: rgba(0, 0, 0, 0.3);
  .active {
    border-bottom: 3px solid #00e8ff;
  }
  li {
    cursor: pointer;
    padding: 20px;
    font-size: 36px;
    color: #fff;
    &:hover {
      background-color: rgba(0, 0, 0, 0.5);
    }
  }
}

.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: 2601px;
  height: 879px;
  background: url('@/assets/images/emergencyCommandMap/videoBox1.png') no-repeat 100% 100%;
  position: relative;
  color: #fff;
  .card-content {
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px; /* 减小顶部填充 */
    padding-left: 100px;
    width: 2500px;
  }
}
</style>