|
@@ -0,0 +1,198 @@
|
|
|
+<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>
|