知识库、值班管理

src/views/emergencyCommandMap/RightSection/dutyManagement.vue

@@ -0,0 +1,87 @@
+<template>
+  // type分别为sm、md、lg
+  <Dialog custom-show type="sm" title="值班信息" @close="closeDialog">
+    <div class="dialog-content">
+      <p class="form-group">当天值班:{{ currentDate }}</p>
+      <div class="form-group">
+        <p v-for="item in tableData" :key="item" class="text item">值班领导: {{ item.class_leader }}</p>
+      </div>
+      <div class="form-group">
+        <p v-for="item in tableData" :key="item" class="text item">主班: {{ item.main_class }}</p>
+      </div>
+      <div class="form-group">
+        <p v-for="item in tableData" :key="item" class="text item">副班: {{ item.deputy_class }}</p>
+      </div>
+      <div class="form-group">
+        <p v-for="item in tableData" :key="item" class="text item">备班: {{ item.prepare_class }}</p>
+      </div>
+    </div>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { reactive } from 'vue';
+const tableData = [
+  {
+    class_leader: '梁文龙',
+    main_class: '邓思远',
+    deputy_class: '姚意恒',
+    prepare_class: '张三'
+  }
+];
+const currentDate = new Date()
+  .toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  })
+  .replace(/\//g, '年')
+  .replace(/(\d{2})$/, '月$1日');
+const emit = defineEmits(['update:show']);
+const closeDialog = () => {
+  emit('update:show', false);
+};
+</script>
+
+<style scoped>
+.dialog-content {
+  padding: 20px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.form-group {
+  margin-bottom: 15px;
+  font-size: 48px;
+}
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 10px;
+}
+button {
+  margin-left: 10px;
+  padding: 5px 15px;
+  border: none;
+  background-color: #3498db;
+  color: white;
+  border-radius: 4px;
+  cursor: pointer;
+}
+button:hover {
+  background-color: #2980b9;
+}
+textarea,
+select,
+input[type='text'] {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 5px;
+  margin-top: 5px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+}
+.error-message {
+  color: red;
+  font-size: 14px;
+}
+</style>

src/views/emergencyCommandMap/RightSection/index.vue

@@ -25,12 +25,18 @@
         </div>
         <div class="task-text gradient-text">任务登记</div>
       </div>
-      <div class="task-item">
+      <div class="task-item" @click="openKnowledgeWarehouse">
         <div class="icon">
           <div class="icon5"></div>
         </div>
         <div class="task-text gradient-text">知识库</div>
       </div>
+      <div class="task-item" @click="openDutyManagement">
+        <div class="icon">
+          <div class="icon3"></div>
+        </div>
+        <div class="task-text gradient-text">值班管理</div>
+      </div>
     </div>
     <RightTop :event-id="eventId" />
     <PublicOpinionSupervision />
@@ -38,6 +44,8 @@
     <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" :event-id="eventId" />
+    <dutyManagement v-if="dutyManagementState.show" v-model:show="dutyManagementState.show" :event-id="eventId" />
+    <knowledgeWarehouse v-if="knowledgeWarehouseState.show" v-model:show="knowledgeWarehouseState.show" :event-id="eventId" />
   </div>
 </template>
 
@@ -51,11 +59,31 @@ import StartPlan from './StartPlan.vue';
 import SelectPlan from './SelectPlan.vue';
 import PublicOpinionSupervision from '@/views/emergencyCommandMap/RightSection/PublicOpinionSupervision.vue';
 import RenWuDengJi from '@/views/emergencyCommandMap/RightSection/RenWuDengJi.vue';
+import dutyManagement from './dutyManagement.vue';
+import knowledgeWarehouse from './knowledgeWarehouse.vue';
 
 const route = useRoute();
 let eventId = ref('');
 // let tempEventId = ref<string | null>(null);
 
+// 创建值班管理的状态管理
+const dutyManagementState = reactive({
+  show: false
+});
+// 打开值班管理弹窗
+const openDutyManagement = () => {
+  dutyManagementState.show = true;
+};
+
+// 创建知识库的状态管理
+const knowledgeWarehouseState = reactive({
+  show: false
+});
+// 打开知识库弹窗
+const openKnowledgeWarehouse = () => {
+  knowledgeWarehouseState.show = true;
+};
+
 // 创建任务登记弹窗的状态管理
 const renWuDengJiState = reactive({
   show: false
@@ -89,10 +117,10 @@ const getEventIdFromUrl = () => {
 */
 
 // 更新 startPlan 方法
-const startPlan = async() => {
-  const response = await getEventDetail({ event_id: eventId.value })
-  const event_data = (response.data);
-  if(event_data.emergency_notify_count > 0) {
+const startPlan = async () => {
+  const response = await getEventDetail({ event_id: eventId.value });
+  const event_data = response.data;
+  if (event_data.emergency_notify_count > 0) {
     ElMessage.warning('预案已启动');
     return;
   }
@@ -106,7 +134,7 @@ const startPlan = async() => {
     nextTick().then(() => {
       console.log('DOM updated, showing StartPlan:', startPlanState.show);
     });
-  } else if(event_data.del_flag === '9') {
+  } else if (event_data.del_flag === '9') {
     selectPlanState.title = '预案任务下发';
     selectPlanState.tempEventId = eventId.value;
     selectPlanState.show = true;
@@ -127,7 +155,7 @@ const loadPlans = () => {
 
 // 初始化数据
 const initData = () => {
-  eventId.value = route.query.event_id as string || '';
+  eventId.value = (route.query.event_id as string) || '';
   // getEventIdFromUrl();
   console.log('URL中的eventId:', route.query.event_id);
 };

src/views/emergencyCommandMap/RightSection/knowledgeWarehouse.vue

@@ -0,0 +1,84 @@
+<template>
+  <Dialog custom-show type="xl" title="事件管理列表" @close="closeDialog">
+    <!-- 表格组件 -->
+    <div class="common-table">
+      <div class="table-header">
+        <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 tableData" :key="index" class="tr">
+        <div class="td">{{ item.report_id }}</div>
+        <div class="td">{{ item.report_name }}</div>
+        <div class="td">{{ item.source_unit }}</div>
+        <div class="td">{{ item.keyword }}</div>
+        <div class="td">{{ item.event_type }}</div>
+        <div class="td">{{ item.abstract }}</div>
+        <div class="td">{{ item.release_time }}</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>-->
+    <!--    <CloseEventDialog-->
+    <!--      v-model="closeDialogState.show"-->
+    <!--      :data="closeDialogState.form"-->
+    <!--      :event-id="eventId"-->
+    <!--      @update:model-value="handleCloseEventDialog"-->
+    <!--    />-->
+  </Dialog>
+</template>
+<script setup lang="ts">
+import CloseEventDialog from '@/views/routineCommandMap/eventing/CloseEventDialog.vue';
+import { reactive } from 'vue';
+
+const emit = defineEmits(['update:show']);
+const closeDialog = () => {
+  emit('update:show', false);
+};
+const queryParams = reactive({
+  page: 1,
+  page_size: 10
+});
+
+const tableData = [
+  {
+    report_id: '001',
+    report_name: '测试报告1',
+    source_unit: '市应急局',
+    keyword: '干旱',
+    event_type: ' drought',
+    abstract: '干旱事件',
+    release_time: '2023-05-01'
+  },
+  {
+    report_id: '002',
+    report_name: '测试报告2',
+    source_unit: '市应急局',
+    keyword: ' flood',
+    event_type: 'flood',
+    abstract: '水灾事件',
+    release_time: '2023-05-02'
+  },
+  {
+    report_id: '003',
+    report_name: '测试报告3',
+    source_unit: '市应急局',
+    keyword: ' wildfire',
+    event_type: 'wildfire',
+    abstract: ' bushfire事件',
+    release_time: '2023-05-03'
+  }
+];
+</script>