解决任务更新，任务登记bug，完成样式设计，完成查看更多功能

src/api/emergencyCommandMap/JointDuty.ts

@@ -69,14 +69,11 @@ export function addTask(data) {
   });
 }
 // 任务查询
-export function selectTask(data) {
+export function selectTask(params) {
   return request({
     url: '/api/taskRegistration/select',
     method: 'get',
-    params: {
-      sortBy: 'creation_time'
-
-    }
+    params: params
   });
 }
 // 任务更新

src/types/components.d.ts

@@ -102,7 +102,6 @@ declare module 'vue' {
     VideoContainer: typeof import('./../components/HKVideo/video-container.vue')['default']
     VideoContainer2: typeof import('./../components/HKVideo/video-container2.vue')['default']
     YMap: typeof import('./../components/Map/YMap.vue')['default']
-    YMapold: typeof import('./../components/Map/YMapold.vue')['default']
     YztMap: typeof import('./../components/Map/YztMap/index.vue')['default']
   }
   export interface ComponentCustomProperties {

src/views/emergencyCommandMap/RightSection/RenWuDengJi.vue

@@ -45,7 +45,6 @@
 <script lang="ts" setup>
 import { ref, reactive, onMounted } from 'vue';
 import { addTask } from '@/api/emergencyCommandMap/JointDuty.ts';
-import { PointType } from '@/api/globalMap/type'; // 确保API路径正确
 
 const showRegisterDialog = ref(true);
 const newTask = reactive({
@@ -55,14 +54,9 @@ const newTask = reactive({
 });
 const units = ref([]);
 
-
-
-interface Props {
-  data: string;
-}
-const props = withDefaults(defineProps<Props>(), {});
-
-const id = props.data;
+const props = defineProps<{
+  eventId?: string;
+}>();
 
 // 获取单位数据
 const fetchUnits = async () => {
@@ -89,6 +83,7 @@ const closeDialog = () => {
 // 确认登记任务
 const confirmRegister = async () => {
   try {
+    newTask.event_code = props.eventId;
     const response = await addTask(newTask);
     if (response.code === 200) {
       console.log('任务登记成功');
@@ -105,6 +100,16 @@ const confirmRegister = async () => {
 onMounted(() => {
   fetchUnits();
 });
+
+// 监听 eventId 的变化
+watch(
+  () => props.eventId,
+  () => {
+    if (!!props.eventId) {
+      console.log('Received eventId in RenWuDengJi3333:', props.eventId);
+    }
+  }
+);
 </script>
 
 <style lang="scss" scoped>

src/views/emergencyCommandMap/RightSection/RenWuGenZong.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="table-content" :class="{ 'show-scroll': showScroll }">
+  <div class="table-content">
     <div v-for="(item, index) in dataList" :key="index" class="box1">
       <div :class="item.processing_status === '已完成' ? 'success-icon' : 'processing-icon'"></div>
       <div class="box2">
@@ -15,15 +15,19 @@
       </div>
     </div>
   </div>
-  <button @click="toggleScroll" class="toggle-scroll-btn">{{ showScroll ? '收起' : '查看更多 >>' }}</button>
+  <div class="more" @click="showMoreEventManageList">查看更多</div>
 
   <RenWuGengXin
     v-model="newSectionState.showListDialog"
     :task="selectedTask"
-    @update-success="handleUpdateSuccess"
+    :event-id="eventId"
     title="任务进度更新"
     width="70%"
+    @update-success="handleUpdateSuccess"
   />
+
+  <!--弹窗-->
+  <RenWuGenZongInfo v-model="eventManageState.showListDialog" :event-id="eventId" />
 </template>
 
 <script lang="ts" setup>
@@ -31,6 +35,7 @@ import { onMounted, ref, reactive } from 'vue';
 import { selectTask } from '@/api/emergencyCommandMap/JointDuty';
 import { parseTime } from '@/utils/ruoyi';
 import RenWuGengXin from '@/views/emergencyCommandMap/RightSection/RenWuGengXin.vue';
+import RenWuGenZongInfo from '@/views/emergencyCommandMap/RightSection/RenWuGenZongInfo.vue';
 
 const newSectionState = reactive({
   showListDialog: false
@@ -43,7 +48,6 @@ const selectedTask = ref({
   pageNum: 2,
   pageSize: 20
 });
-
 // ref()创建一个响应式对象
 const dataList = ref([]);
 const showScroll = ref(false);
@@ -52,10 +56,21 @@ const props = defineProps<{
   eventId?: string; // 使用可选属性
 }>();
 
+// 事件接报
+const eventManageState = reactive({
+  showListDialog: false
+});
+
+// 显示事件管理列表弹窗
+const showMoreEventManageList = () => {
+  eventManageState.showListDialog = true;
+};
+
 // 请求数据
 const fetchData = async () => {
   try {
-    const res = await selectTask();
+    console.log('请求任务数据:', props.eventId);
+    const res = await selectTask({ event_code: props.eventId });
     res.data.forEach((item) => {
       item.update_time = parseTime(item.update_time);
     });
@@ -96,7 +111,7 @@ watch(
 .table-content {
   width: 100%;
   height: 550px;
-  overflow-y: hidden;
+  overflow-y: auto;
   &.show-scroll {
     overflow-y: auto;
   }
@@ -186,14 +201,23 @@ watch(
     background: url('@/assets/images/taskTracking/processing.png') no-repeat;
   }
 }
-
-.toggle-scroll-btn {
-  display: block;
-  margin: 20px auto;
-  font-size: 36px;
-  color: #3498db;
-  background: none;
-  border: none;
+.more {
+  position: absolute;
+  bottom: 10px; /* 根据需要调整位置 */
+  right: 50%; /* 根据需要调整位置 */
+  transform: translateX(50%);
+  color: #1890ff;
   cursor: pointer;
 }
+@keyframes slide {
+  0% {
+    transform: translateX(-100%);
+  }
+  80% {
+    transform: translateX(92px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
 </style>

src/views/emergencyCommandMap/RightSection/RenWuGenZongInfo.vue

@@ -0,0 +1,338 @@
+<template>
+  <Dialog v-model="show" type="xl" title="任务跟踪列表" hide-footer>
+    <transition name="fade">
+      <div v-show="showSearch" class="mb-[20px]">
+        <el-form ref="queryFormRef" :model="queryParams">
+          <el-row :gutter="20">
+            <!-- 第一行 -->
+            <el-col :span="6">
+              <el-form-item label="任务ID" prop="task_id">
+                <el-input v-model="queryParams.task_id" placeholder="请输入任务ID" clearable />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="事件代码" prop="event_code">
+                <el-input v-model="queryParams.event_code" placeholder="请输入事件代码" clearable />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="排序依据" prop="sortBy">
+                <el-select v-model="queryParams.sortBy" placeholder="选择排序依据" clearable>
+                  <el-option label="创建时间" value="creation_time"></el-option>
+                  <el-option label="更新时间" value="update_time"></el-option>
+                  <el-option label="任务ID" value="task_id"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="排序顺序" prop="sortOrder">
+                <el-select v-model="queryParams.sortOrder" placeholder="选择排序顺序" clearable>
+                  <el-option label="升序" value="asc"></el-option>
+                  <el-option label="降序" value="desc"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mt-[10px]">
+            <el-col :span="6">
+              <div class="flex">
+                <div class="common-btn-primary" @click="handleQuery">搜索</div>
+                <div class="common-btn" @click="resetQuery">重置</div>
+              </div>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+    </transition>
+    <!-- 表格组件 -->
+    <div class="common-table">
+      <div class="table-header">
+        <div class="td">任务ID</div>
+        <div class="td">单位名称</div>
+        <div class="td">任务描述</div>
+        <div class="td">登记人</div>
+        <div class="td">创建时间</div>
+        <div class="td">更新时间</div>
+        <div class="td">处理状态</div>
+        <div class="td">操作</div>
+      </div>
+      <div v-for="(item, index) in taskList" :key="index" class="tr">
+        <div class="td">{{ item.task_id }}</div>
+        <div class="td">{{ item.unit_name }}</div>
+        <div class="td">{{ item.task_description }}</div>
+        <div class="td">{{ item.registrar }}</div>
+        <div class="td">{{ formatDateTime(item.creation_time) }}</div>
+        <div class="td">{{ formatDateTime(item.update_time) }}</div>
+        <div class="td">{{ item.processing_status }}</div>
+        <div class="td">
+          <div>更新</div>
+        </div>
+      </div>
+    </div>
+    <div class="footer">
+      <pagination
+        v-show="total > 0"
+        v-model:page="queryParams.page"
+        v-model:limit="queryParams.page_size"
+        :total="total"
+        layout="total, prev, pager, next"
+        @pagination="getList"
+      />
+    </div>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, toRefs, onMounted } from 'vue';
+import { selectTask } from '@/api/emergencyCommandMap/JointDuty';
+
+const taskList = ref([]);
+const total = ref(0);
+const queryParams = reactive({
+  page: 1,
+  page_size: 10,
+  task_id: '',
+  event_code: '',
+  sortBy: '',
+  sortOrder: ''
+});
+
+const getList = () => {
+  if (props.eventId) {
+    queryParams.event_code = props.eventId; // 使用 eventId
+  }
+
+  selectTask(queryParams).then((res) => {
+    if (res.code === 200) {
+      taskList.value = res.data;
+      total.value = res.total;
+    }
+  });
+};
+const formatDateTime = (dateTimeString: string) => {
+  const date = new Date(dateTimeString);
+  return date.toLocaleString();
+};
+
+const handleQuery = () => {
+  queryParams.page = 1;
+  getList();
+};
+
+const resetQuery = () => {
+  Object.assign(queryParams, {
+    page: 1,
+    page_size: 10,
+    task_id: '',
+    event_code: '',
+    sortBy: '',
+    sortOrder: ''
+  });
+  getList();
+};
+
+const handleSelectionChange = (selection) => {
+  ids.value = selection.map((item) => item.eventId);
+  selectedRow.value = selection.length === 1 ? selection[0] : null;
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+
+const eventEditDialogState = reactive({
+  show: false,
+  title: ''
+});
+const eventDetailsState = reactive({
+  show: false,
+  title: ''
+});
+
+//查看事件详情
+const handleView = (row) => {
+  // 查看事件详情逻辑
+  eventId.value = row.event_id;
+  eventDetailsState.title = '查看事件';
+  eventDetailsState.show = true;
+};
+
+// 关闭事件
+const closeDialogState = reactive({
+  show: false,
+  form: {
+    eventId: '',
+    deaths: '',
+    injuries: '',
+    missing: '',
+    fileNames: []
+  }
+});
+
+const handleClose = (row) => {
+  if (row) {
+    console.log(row);
+    closeDialogState.form.eventId = row.event_id;
+    closeDialogState.form.deaths = row.deaths;
+    closeDialogState.form.injuries = row.injuries;
+    closeDialogState.form.missing = row.missing;
+    closeDialogState.show = true;
+  }
+};
+
+const handleCloseEventDialog = (b) => {
+  console.log('handleCloseEventDialog', b);
+};
+const props = defineProps<{
+  modelValue?: boolean;
+  title?: string;
+  height?: string;
+  eventId?: string;
+}>();
+const emit = defineEmits(['update:modelValue']);
+
+let show = ref(false);
+
+// 你可以在这里使用 props.eventId，例如在 fetchData 函数中：
+const fetchData = async () => {
+  if (props.eventId) {
+    try {
+      const res = await selectTask({ event_code: props.eventId });
+      // 处理 res ...
+    } catch (error) {
+      console.error('请求任务数据失败:', error);
+    }
+  }
+};
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    show.value = newValue;
+    if (newValue) {
+      getList();
+    }
+  },
+  {
+    immediate: true
+  }
+);
+
+// 关闭弹窗
+const closeDialog = () => {
+  show.value = false;
+  emit('update:modelValue', false);
+};
+</script>
+
+<style lang="scss" scoped>
+.dialog-wrap {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 2000;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .overlay {
+    background-color: rgba(0, 0, 0, 0.5);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    cursor: pointer;
+  }
+
+  .dialog {
+    width: 5000px;
+    height: 2000px;
+    margin: 0 auto;
+    background-color: #fff;
+    border-radius: 20px;
+  }
+}
+
+.dialog {
+  padding: 0 50px;
+
+  .dialog-header {
+    width: 100%;
+    height: 150px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .icon-close {
+      cursor: pointer;
+    }
+  }
+}
+
+.footer {
+  height: 64px;
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 30px;
+
+  .pagination-container {
+    height: 64px;
+    margin: 0;
+  }
+
+  :deep(.el-pagination__total) {
+    color: #a7ccdf;
+    font-size: 32px;
+  }
+
+  :deep(.el-pagination) {
+    .btn-next,
+    .btn-prev {
+      background-color: transparent;
+      border: none;
+
+      .el-icon {
+        font-size: 22px;
+        color: #a7ccdf;
+      }
+    }
+
+    .btn-prev:disabled,
+    .btn-next:disabled {
+      background-color: transparent;
+      border: none;
+    }
+
+    .el-pager li {
+      width: 64px;
+      height: 64px;
+      line-height: 64px;
+      text-align: center;
+      font-size: 32px;
+      color: #a7ccdf;
+      background-color: #0e3064;
+      border: 1px solid #0c57a7;
+      margin: 0 6px;
+
+      &:hover {
+        background-color: #038dff;
+        border: 1px solid #038dff;
+      }
+    }
+
+    .el-pager li.is-active {
+      background-color: #038dff;
+      border: 1px solid #038dff;
+    }
+  }
+}
+
+.flex {
+  display: flex;
+  align-items: flex-start;
+}
+</style>

src/views/emergencyCommandMap/RightSection/RenWuGengXin.vue

@@ -1,34 +1,36 @@
 <template>
-  <div v-if="visible" class="dialog">
-    <div class="dialog-content">
-      <div class="dialog-header">
-        <span>任务进度更新</span>
-        <button @click="closeDialog">×</button>
-      </div>
-
-      <div class="dialog-body">
-        <div class="form-group">
-          <label>任务描述：</label>
-          <input v-model="newTask.task_description" type="text" readonly />
-        </div>
-        <div class="form-group">
-          <label>执行单位：</label>
-          <input v-model="newTask.unit_name" type="text" readonly />
-        </div>
-        <div class="form-group">
-          <label>完成进度：</label>
-          <select v-model="newTask.registrar">
-            <option v-for="unit in units" :key="unit" :value="unit">{{ unit }}</option>
-          </select>
-        </div>
-      </div>
+  <Dialog v-model="visible" type="xl" title="任务进度更新" hide-footer>
+    <div class="dialog-body">
+      <el-form ref="taskForm" :model="newTask">
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="任务描述">
+              <el-input v-model="newTask.task_description" readonly />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="执行单位">
+              <el-input v-model="newTask.unit_name" readonly />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="完成进度">
+              <el-select v-model="newTask.registrar">
+                <el-option v-for="unit in units" :key="unit" :label="unit" :value="unit"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
 
-      <div class="dialog-footer">
-        <button @click="confirmRegister" :disabled="!isFormValid">确定</button>
-        <button @click="closeDialog">取消</button>
+    <div class="footer">
+      <div class="flex">
+        <div class="common-btn-primary" :disabled="!isFormValid" @click="confirmRegister">确定</div>
+        <div class="common-btn" @click="closeDialog">取消</div>
       </div>
     </div>
-  </div>
+  </Dialog>
 </template>
 
 <script lang="ts" setup>
@@ -36,37 +38,22 @@ import { ref, reactive, defineEmits, computed, watch } from 'vue';
 import { updateTaskRegistration } from '@/api/emergencyCommandMap/JointDuty.ts';
 
 const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    required: true
-  },
-  task: {
-    type: Object,
-    default: () => ({
-      task_id: '',
-      task_description: '',
-      unit_name: '',
-      registrar: ''
-    })
-  }
+  modelValue: { type: Boolean, required: true },
+  task: { type: Object, default: () => ({ task_id: '', task_description: '', unit_name: '', registrar: '' }) },
+  eventId: { type: String, required: true }
 });
 
 const emit = defineEmits(['update:modelValue', 'update-success']);
-const newTask = reactive({ ...props.task }); // 初始化任务数据
+const newTask = reactive({ ...props.task });
 const units = ref(['已处理', '已完成']);
 
-// 控制弹窗显示状态
 const visible = computed({
   get: () => props.modelValue,
   set: (val) => {
     emit('update:modelValue', val);
-    if (!val) {
-      resetForm(); // 关闭时重置表单
-    }
+    if (!val) resetForm();
   }
 });
-
-// 表单有效性检查
 const isFormValid = computed(() => newTask.registrar !== '');
 
 const resetForm = () => {
@@ -75,15 +62,15 @@ const resetForm = () => {
   newTask.registrar = '';
 };
 
-// 确认登记任务
 const confirmRegister = async () => {
   try {
     const response = await updateTaskRegistration({
       task_id: newTask.task_id,
-      processing_status: newTask.registrar // 假设 registrar 作为状态
+      processing_status: newTask.registrar,
+      event_code: props.eventId
     });
     if (response.code === 200) {
-      emit('update-success', newTask); // 发出更新成功事件
+      emit('update-success', newTask);
       closeDialog();
     } else {
       console.error('任务进度更新失败:', response.msg);
@@ -93,76 +80,38 @@ const confirmRegister = async () => {
   }
 };
 
-// 关闭弹窗
 const closeDialog = () => {
-  visible.value = false; // 控制弹窗显示
+  visible.value = false;
 };
 
-// 监听任务数据变化
 watch(
   () => props.task,
   (newTaskData) => {
-    Object.assign(newTask, newTaskData); // 更新任务数据
+    Object.assign(newTask, newTaskData);
   },
-  { immediate: true } // 初始加载时同步
+  { immediate: true }
 );
 </script>
 
-<style scoped>
-.dialog {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: white;
-  border-radius: 8px;
-  box-shadow: 0 50px 50px rgba(0, 0, 0, 0.1);
-  width: 600px; /* 调整宽度 */
-}
-
-.dialog-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #eee;
-  padding: 10px;
-}
-
+<style lang="scss" scoped>
 .dialog-body {
-  padding: 10px;
+  padding: 20px;
 }
 
-.form-group {
-  margin-bottom: 15px;
-}
-
-.dialog-footer {
+.footer {
   display: flex;
   justify-content: flex-end;
-  padding: 10px;
-}
+  margin-top: 20px;
 
-button {
-  margin-left: 10px;
-  padding: 5px 15px;
-  border: none;
-  background-color: #3498db;
-  color: white;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-button:hover {
-  background-color: #2980b9;
-}
+  .flex {
+    display: flex;
+    align-items: center;
 
-input[type='text'],
-select {
-  width: 100%;
-  box-sizing: border-box;
-  padding: 5px;
-  margin-top: 5px;
-  border-radius: 4px;
-  border: 1px solid #ccc;
+    .common-btn-primary,
+    .common-btn {
+      margin-left: 10px;
+      cursor: pointer;
+    }
+  }
 }
 </style>

src/views/emergencyCommandMap/RightSection/RightTop.vue

@@ -56,9 +56,6 @@ const props = defineProps<{
   eventId?: string; // 使用可选属性
 }>();
 
-// 输出 eventId 以验证是否正确获取
-console.log('Received eventId in RightTop:', props.eventId);
-
 // 定义 tabs
 const tabs = reactive([
   { id: '任务跟踪', label: '任务跟踪' },

src/views/emergencyCommandMap/RightSection/index.vue

@@ -38,7 +38,7 @@
   </div>
   <StartPlan v-if="startPlanState.show" v-model:show="startPlanState.show" :title="startPlanState.title" :event-id="startPlanState.eventId" />
   <SelectPlan v-model="selectPlanState.show" :title="selectPlanState.title" :temp-event-id="eventId" @update-plan="updatePlan" />
-  <RenWuDengJi v-if="renWuDengJiState.show" v-model:show="renWuDengJiState.show" />
+  <RenWuDengJi v-if="renWuDengJiState.show" v-model:show="renWuDengJiState.show" :event-id="eventId" />
 </template>
 
 <script lang="ts" setup>
@@ -63,7 +63,6 @@ const renWuDengJiState = reactive({
 // 打开任务登记弹窗
 const openRenWuDengJi = () => {
   renWuDengJiState.show = true;
-  console.log('Showing RenWuDengJi modal');
 };
 // 启动预案弹窗
 const startPlanState = reactive({
@@ -93,7 +92,7 @@ const getEventIdFromUrl = () => {
 const startPlan = async() => {
   const response = await getEventDetail({ event_id: eventId.value })
   const event_data = (response.data);
-  if(event_data.del_flag === '0') {
+  if (event_data.del_flag === '0') {
     // 正式事件
     startPlanState.title = '启动预案';
     startPlanState.eventId = eventId.value;
@@ -125,7 +124,7 @@ const loadPlans = () => {
 const initData = () => {
   eventId.value = route.query.event_id as string || '';
   // getEventIdFromUrl();
-  console.log('Event ID from URL:', eventId.value); // 输出从 URL 获取的 eventId
+  console.log('URL中的eventId:', route.query.event_id);
 };
 
 // 监听路由变化

src/views/emergencyCommandMap/index.vue

@@ -38,7 +38,7 @@ onMounted(() => {
   }
 });
 onUnmounted(() => {
-  if ( location.hostname === 'localhost___') {
+  if (location.hostname === 'localhost___') {
     autofit.off();
   }
 });

src/views/globalMap/RightMenu/WarningInfo.vue

@@ -384,7 +384,6 @@ export default defineComponent({
   position: relative; /* 为内部定位做准备 */
 }
 
-
 .alert-icon {
   // 向左偏移 50% 的宽度，使图标居中
   margin-left: -50px;