中屏知识库+值班管理

src/types/components.d.ts

@@ -22,12 +22,19 @@ declare module 'vue' {
     DistributionMap: typeof import('./../components/Map/YztMap/DistributionMap.vue')['default']
     DrawMap: typeof import('./../components/Map/YztMap/DrawMap.vue')['default']
     Editor: typeof import('./../components/Editor/index.vue')['default']
+    ElAnchor: typeof import('element-plus/es')['ElAnchor']
+    ElAnchorLink: typeof import('element-plus/es')['ElAnchorLink']
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
@@ -38,8 +45,10 @@ declare module 'vue' {
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElLink: typeof import('element-plus/es')['ElLink']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
@@ -49,15 +58,25 @@ declare module 'vue' {
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSegmented: typeof import('element-plus/es')['ElSegmented']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
+    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
+    ElSlider: typeof import('element-plus/es')['ElSlider']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
+    ElTimeline: typeof import('element-plus/es')['ElTimeline']
+    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
+    ElUpload: typeof import('element-plus/es')['ElUpload']
     ExcelEditor: typeof import('./../components/ExcelEditor/index.vue')['default']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
     FooterSection: typeof import('./../components/FooterSection/index.vue')['default']
@@ -70,6 +89,7 @@ declare module 'vue' {
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
     IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
     IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
+    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']

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: 32px;
+}
+.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 />
@@ -39,6 +45,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>
 
@@ -53,11 +61,28 @@ import SelectPlan from './SelectPlan.vue';
 import InitConsultation from './InitConsultation.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

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>