指挥动态部分样式

src/api/emergencyCommandMap/JointDuty.ts

@@ -80,7 +80,7 @@ export function selectTask(data) {
   });
 }
 // 任务更新
-export function updateTask(data) {
+export function updateTaskRegistration(data) {
   return request({
     url: '/api/taskRegistration/update',
     method: 'post',

src/views/emergencyCommandMap/RightSection/RenWuGenZong.vue

@@ -1,25 +1,14 @@
 <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 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>
@@ -27,33 +16,18 @@
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-import { selectTask, updateTask } from '@/api/emergencyCommandMap/JointDuty.ts'; // 确保API路径正确
+import { selectTask, updateTaskRegistration } from '@/api/emergencyCommandMap/JointDuty'; // 确保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 {
@@ -75,21 +49,11 @@ const fetchData = async () => {
   }
 };
 
-// 更新任务列表
-// 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);
+    const response = await updateTaskRegistration(task);
 
     if (response.code === 200) {
       console.log('任务更新成功');

src/views/emergencyCommandMap/RightSection/RightTop.vue

@@ -1,12 +1,14 @@
 <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">
-      <div v-if="activeTab === '预案通知'" class="custom-table">
+      <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">
@@ -28,7 +30,8 @@
 
 <script lang="ts" setup>
 import { onMounted, ref, reactive } from 'vue';
-import { taskList } from '@/api/duty/eventing'; // 确保 eventing.ts 的路径正确
+import { taskList } from '@/api/duty/eventing';
+import RenWuGenZong from '@/views/emergencyCommandMap/RightSection/RenWuGenZong.vue'; // 确保 eventing.ts 的路径正确
 
 const props = defineProps<{
   eventId?: string; // 使用可选属性
@@ -39,7 +42,7 @@ console.log('Received eventId in RightTop:', props.eventId);
 
 // 定义 tabs
 const tabs = reactive([
-  { id: '任务追踪', label: '任务追踪' },
+  { id: '任务跟踪', label: '任务跟踪' },
   { id: '预案通知', label: '预案通知' },
   { id: '资源调度', label: '资源调度' }
 ]);
@@ -101,17 +104,23 @@ onMounted(() => {
   display: flex;
   justify-content: flex-start; /* 选项卡靠左对齐 */
   padding: 0px 0;
-  background: rgba(0, 0, 0, 0.3);
   .active {
-    border-bottom: 3px solid #00e8ff;
+    background: url('@/assets/images/emergencyCommandMap/tabActive.png') no-repeat;
   }
   li {
     cursor: pointer;
     padding: 20px;
-    font-size: 36px;
+    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-color: rgba(0, 0, 0, 0.5);
+      background: url('@/assets/images/emergencyCommandMap/tabActive.png') no-repeat;
     }
   }
 }
@@ -165,9 +174,9 @@ onMounted(() => {
 }
 
 .duty-card {
-  width: 2601px;
+  width: 1966px;
   height: 879px;
-  background: url('@/assets/images/emergencyCommandMap/videoBox1.png') no-repeat 100% 100%;
+  background: url('@/assets/images/commandDynamic/dialog.png') no-repeat;
   position: relative;
   color: #fff;
   .card-content {
@@ -178,4 +187,10 @@ onMounted(() => {
     width: 2500px;
   }
 }
+.title {
+  position: absolute;
+  top: 6px;
+  left: 141px;
+  font-size: 60px;
+}
 </style>