新增预案管理-查看更多弹窗列表和数据

src/api/riskPrevention/planManage.ts

@@ -0,0 +1,108 @@
+import request from '@/utils/request';
+
+export function getDrillList(params) {
+  return request({
+    url: '/api/emergency_plan/drill/list',
+    method: 'get',
+    params: params
+  });
+}
+export function getTrainingList(params) {
+  return request({
+    url: '/api/emergency_plan/training/list',
+    method: 'get',
+    params: params
+  });
+}
+
+export function getPlanList(params) {
+  return request({
+    url: '/api/emergency_plan/plan/list',
+    method: 'get',
+    params: params
+  });
+}
+
+export function getPlanDetail(planId: string) {
+  return request({
+    url: '/api/emergency_plan/plan/' + planId,
+    method: 'get'
+  });
+}
+
+export function getResponseDetail(responseId) {
+  return request({
+    url: '/api/emergency_plan/plan/' + responseId,
+    method: 'get'
+  });
+}
+
+// 修改预案
+export const updateReport = (data) => {
+  return request({
+    url: `/api/reports/update`,
+    method: 'put',
+    data: data
+  });
+};
+
+// 删除预案
+export const deletePlan = (data) => {
+  return request({
+    url: `/api/emergency_plan/plan/delete`,
+    method: 'delete',
+    data: data
+  });
+};
+
+// 新增预案
+export const addReport = (data) => {
+  return request({
+    url: '/api/emergency_plan/plan/create',
+    method: 'post',
+    data: data
+  });
+};
+
+export const listDrill = (params) => {
+  return request({
+    url: '/api/emergency_plan/drill/list',
+    method: 'get',
+    params: params
+  });
+};
+
+// 新增培训记录
+export const addTraining = (data) => {
+  return request({
+    url: '/api/emergency_plan/training/create',
+    method: 'post',
+    data: data
+  });
+};
+
+// 修改培训记录
+export const updateTraining = (data) => {
+  return request({
+    url: '/api/emergency_plan/training/update',
+    method: 'put',
+    data: data
+  });
+};
+
+// 培训记录详情
+export const getTrainingDetail = (trainingId) => {
+  return request({
+    url: '/api/emergency_plan/training/' + trainingId,
+    method: 'get'
+  });
+};
+
+// 删除培训记录
+export const deleteTraining = (data) => {
+  return request({
+    url: '/api/emergency_plan/training/delete',
+    method: 'delete',
+    data: data
+  });
+};

src/api/routineCommandMap/type.ts

@@ -2,3 +2,218 @@ export interface EmergencyVideoParams {
   current: number;
   size: number;
 }
+
+
+// 定义获取报告列表接口的请求参数类型
+import {UnwrapRef} from "vue";
+
+// 定义查询参数的类型
+export interface QueryParams {
+  pageNum: number;
+  pageSize: number;
+  eventType?: string;
+  publishDate?: [string, string];
+  subject?: string;
+  sortBy: string;
+  sortOrder: string;
+  query: string;
+  publishDateRange?: string;
+}
+
+// 定义报告项的类型
+export interface ReportItem {
+  reportName: string;
+  reportId?: string;
+  publishDate: string;
+  summary: string;
+  updateTime: string | null;
+  subject: string;
+  eventType: string;
+  publishingUnit: string;
+  notificationType: string;
+  base_code: string;
+}
+
+// 定义新增报告接口的请求参数类型
+export interface AddReportParams {
+  reportName: string;
+  summary: string;
+  publishDate: string;
+  subject: string;
+  eventType: string;
+  publishingUnit: string;
+  fileNames: [];
+}
+
+// 定义获取报告列表接口响应的数据结构,total
+export interface FetchReportsResponse {
+  code: number;
+  msg: string;
+  pages: number;
+  total: number;
+  currentPage: number;
+  pageSize: number;
+  data: ReportItem[];
+
+  map(param: (item: ReportItem) => {
+    summary: string;
+    publishingUnit: string;
+    reportName: string;
+    reportId?: string;
+    subject: string;
+    publishDate: string;
+    base_code: string;
+    updateTime: string | null;
+    eventType: string;
+    notificationType: string
+  }): UnwrapRef<ReportItem[]>;
+}
+
+//培训记录
+/**
+ * 培训记录查询对象类型
+ */
+export interface UserQuery extends PageQuery {
+  theme?: string;
+  unitName?: string;
+}
+/**
+ * 培训记录返回对象
+ */
+export interface UserVO {
+  textId: string;
+  theme: string;
+  unitName: string;
+  address: string;
+  startTime: string;
+  endTime: string;
+  peopleNum: string;
+  Content: string;
+  trainingWay: string;
+}
+/**
+ * 培训记录表单类型
+ */
+export interface UserForm {
+  textId?: string;
+  theme: string;
+  unitName?: string;
+  address?: string;
+  startTime?: string;
+  endTime?: string;
+  Content?: string;
+  peopleNum?: string;
+  trainingWay?: string;
+}
+export interface AddUserParams {
+  theme: string;
+  unitName: string;
+  address: string;
+  startTime: string;
+  endTime: string;
+  Content: string;
+  peopleNum: string;
+  trainingWay: string;
+}
+export interface UserInfoVO {
+  user: UserVO;
+}
+//预案
+/**预案查询对象类型**/
+
+export interface PlanQuery extends PageQuery {
+  planName?: string;
+}
+/**
+ * 预案返回对象
+ */
+export interface PlanVO {
+  planId: string;
+  planName: string;
+  planType: string;
+  publish_date: string;
+  organUnit: string;
+  document: string;
+}
+/**
+ * 预案表单类型
+ */
+export interface PlanForm {
+  pageNum: number;
+  pageSize: number;
+  publish_date?: [string, string];
+  planName: string;
+  planType?: string;
+  keywords?: string;
+}
+export interface PlanInfoVO {
+  plan: PlanVO;
+}
+// 定义预案列表接口响应的数据结构,total
+export interface FetchPlanResponse {
+  data: PlanVO[];
+  total: number;
+}
+//演练
+/**演练查询对象类型**/
+
+export interface DrillQuery {
+  planId?: string;
+}
+/**
+ * 演练返回对象
+ */
+export interface DrillVO {
+  drillId: string;
+  drillName: string;
+  drillUnit: string;
+  year: string;
+  drillTime: string;
+  drillAddress: string;
+  drillProject: string;
+  drillVideo: string;
+  drillPicture: string;
+}
+/**
+ * 演练表单类型
+ */
+export interface DrillForm {
+  pageNum: number;
+  pageSize: number;
+  planId?: number;
+}
+export interface DrillInfoVO {
+  drill: DrillVO;
+}
+// 定义演练列表接口响应的数据结构,total
+export interface FetchDrillResponse {
+  data: DrillVO[];
+  total: number;
+}
+//响应
+/**响应查询对象类型**/
+
+export interface ResponseQuery {
+  responseId?: string;
+}
+/**
+ * 响应返回对象
+ */
+export interface ResponseVO {
+  responseId: string;
+  eventName: string;
+  eventType: string;
+  responseUnit: string;
+  eventAddress: string;
+  responseLevel: string;
+  responseStartTime: string;
+  responseEndTime: string;
+}
+/**
+ * 响应表单类型
+ */
+export interface responseForm {
+  pageNum: number;
+  pageSize: number;
+  planId?: string;
+}

src/types/components.d.ts

@@ -19,10 +19,13 @@ declare module 'vue' {
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     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']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
@@ -32,10 +35,15 @@ declare module 'vue' {
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
+    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']
     ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSlider: typeof import('element-plus/es')['ElSlider']
@@ -45,9 +53,13 @@ declare module 'vue' {
     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']
     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']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
     FooterSection: typeof import('./../components/FooterSection/index.vue')['default']
     Hamburger: typeof import('./../components/Hamburger/index.vue')['default']
@@ -56,6 +68,7 @@ declare module 'vue' {
     HikvisionH5player: typeof import('./../components/HKVideo/hikvision-h5player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['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.vue

@@ -75,7 +75,7 @@
 
 <script lang="ts" setup>
 import router from '@/router';
-import { getEmergencyVideoCata } from '@/api/routineCommandMap';
+import { getEmergencyVideoCata} from '@/api/routineCommandMap';
 
 const goToHome = () => {
   router.push({ path: '/' });
@@ -151,6 +151,7 @@ const initData = () => {
   ];
 };
 
+
 onMounted(() => {
   initData();
 });

src/views/routineCommandMap/RightSection/index.vue

@@ -6,10 +6,9 @@
         <div class="more" @click="showVideoMonitorList">查看更多</div>
       </div>
       <div class="card-content video-list">
-        <div v-for="(item, index) in videoMonitorState.listData" :key="index" class="video-box">
+        <div v-for="(item, index) in videoMonitorState.listData" :key="index" class="video-box" @click="showVideoDialog">
           <div class="video-header">
             <span>{{ item.name }}</span>
-<!--            <span>{{ item.time }}</span>-->
           </div>
           <div class="video-content">
             <HKVideo :dot_data="item" />
@@ -54,7 +53,9 @@
     <videoList />
   </Dialog>
   <!--预案管理弹窗-->
-  <Dialog v-model="planManageState.showListDialog" title="预案管理列表" width="70%"></Dialog>
+  <Dialog v-model="planManageState.showListDialog" title="预案管理列表" width="70%">
+    <planManageDialog />
+  </Dialog>
   <Dialog v-model="planManageState.showDetailDialog" title="预案管理详情" width="70%"></Dialog>
   <!--应急知识库弹窗-->
   <Dialog v-model="knowledgeBaseState.showListDialog" title="应急知识库列表" width="70%">
@@ -67,13 +68,16 @@
 // 视频监控
 import { getEmergencyPlanList, getEmergencyVideoCata, getReportsList } from '@/api/routineCommandMap';
 import KnowledgeDialog from '@/views/routineCommandMap/RightSection/KnowledgeDialog.vue';
+import planManageDialog from '@/views/routineCommandMap/RightSection/planManageDialog.vue';
 
+// 视频监控
 const videoMonitorState = reactive({
   listData: [],
   showListDialog: false,
   showDetailDialog: false,
   detailData: { name: '', url: '' }
 });
+
 // 显示视频列表
 const showVideoMonitorList = () => {
   videoMonitorState.showListDialog = true;
@@ -88,7 +92,7 @@ const showVideoDialog = (item) => {
 const planManageState = reactive({
   queryParams: {
     pageNum: 1,
-    pageSize: 5
+    pageSize: 10
   },
   listData: [],
   showListDialog: false,
@@ -112,13 +116,19 @@ const knowledgeBaseState = reactive({
     sortOrder: 'desc'
   },
   listData: [],
-  showListDialog: false
+  showListDialog: false,
+  showDetailDialog: false
 });
 // 显示应急知识库列表
 const showKnowledgeBaseList = () => {
   knowledgeBaseState.showListDialog = true;
 };
 
+// 显示知识管理详情弹窗
+const showKnowledgeBaseDetail = () => {
+  knowledgeBaseState.showDetailDialog = true;
+};
+
 // 初始化数据
 const initData = () => {
   // 视频监控数据
@@ -132,18 +142,19 @@ const initData = () => {
   // 预案管理数据
   getEmergencyPlanList(planManageState.queryParams).then((res) => {
     res.data.forEach((item) => {
-      item.img = 'https://img0.baidu.com/it/u=1918456140,3851309096&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'
+      item.img = 'https://img0.baidu.com/it/u=1918456140,3851309096&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500';
     });
     planManageState.listData = res.data;
   });
   // 应急知识库数据
   getReportsList(knowledgeBaseState.queryParams).then((res) => {
     res.data.forEach((item) => {
-      item.img = 'https://img0.baidu.com/it/u=1918456140,3851309096&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'
+      item.img = 'https://img0.baidu.com/it/u=1918456140,3851309096&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500';
     });
     knowledgeBaseState.listData = res.data;
   });
 };
+
 // 加载完成事件
 onMounted(() => {
   initData();

src/views/routineCommandMap/RightSection/planManageDialog.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="app-container">
+    <transition name="fade">
+      <div class="mb-[10px]">
+        <el-form ref="queryFormRef" :model="planForm" :inline="true">
+          <el-form-item style="width: 200px" label="预案类型" prop="planType">
+            <el-select v-model="planForm.planType" placeholder="全部" clearable>
+              <el-option v-for="item in plan_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="发布日期" prop="publish_date">
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              value-format="YYYY-MM-DD"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <el-input v-model="planForm.keywords" placeholder="请输入预案名称/编制单位" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </transition>
+
+    <!-- 表格组件 -->
+    <el-table v-loading="loading" :data="demoList" @selection-change="handleView">
+      <el-table-column label="预案编号" align="center" prop="planId" />
+      <el-table-column label="预案名称" align="center" prop="planName" />
+      <el-table-column label="预案类型" align="center" prop="planType" />
+      <el-table-column label="发文字号" align="center" prop="document" />
+      <el-table-column label="编制单位" align="center" prop="organizingUnit" />
+      <el-table-column label="发布日期" align="center" prop="publish_date" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-tooltip content="查看" placement="top">
+            <el-button link type="primary" icon="View" @click="handleView(scope.row)"></el-button>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 添加对话框 -->
+
+    <!-- // 底部分页 -->
+    <pagination v-show="total > 0" v-model:page="planForm.pageNum" v-model:limit="planForm.pageSize" :total="total" @pagination="getList" />
+  </div>
+</template>
+
+<script setup lang="ts" name="PlanManageDialog">
+import { ref, reactive, onMounted, toRefs } from 'vue';
+import { PlanForm, PlanVO } from '@/api/routineCommandMap/type';
+import { useRouter } from 'vue-router';
+import { parseTime } from '@/utils/ruoyi';
+import { getEmergencyPlanList } from '@/api/routineCommandMap';
+import { getDicts } from '@/api/system/dict/data';
+
+const router = useRouter();
+const demoFormRef = ref(null);
+const demoList = ref<PlanVO[]>([]);
+const buttonLoading = ref(false);
+const loading = ref(false);
+const showSearch = ref(true);
+const ids = ref<string[]>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const selectedRow = ref<PlanVO | null>(null);
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { plan_type } = toRefs<any>(proxy?.useDict('plan_type'));
+const queryFormRef = ref();
+const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
+const planForm = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  planType: '',
+  keywords: '',
+  sortBy: 'publish_date',
+  sortOrder: 'desc'
+});
+let form = ref({
+  planId: '',
+  planName: '',
+  planType: '',
+  document: '',
+  organizingUnit: '',
+  publish_date: ''
+  // fileList: []  应该是预案附件的地方吧
+});
+
+let showDetailDialog = ref(false);
+
+const planTypeSelection = ref([]);
+// 控制对话框显示
+const dialogVisible = ref(false);
+
+// const dialog = reactive({
+//   visible: false,
+//   title: ''
+// });
+
+// const getList = async () => {
+//   loading.value = true;
+//   const res = await getPlanList(addDateRange2(planForm, dateRange.value));
+//   loading.value = false;
+//   demoList.value = res.data;
+//   total.value = res.total;
+// };
+// 获取预案类型字典
+const getList = () => {
+  getEmergencyPlanList(proxy?.addDateRange(planForm, dateRange.value)).then((res) => {
+    res.data.forEach((item) => {
+      item.publish_date = parseTime(item.publish_date);
+      item.img = 'https://img0.baidu.com/it/u=1918456140,3851309096&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500';
+    });
+    demoList.value = res.data;
+  });
+};
+
+// 搜索
+const handleQuery = () => {
+  planForm.pageNum = 1;
+  getList();
+};
+// 重置
+const resetQuery = () => {
+  planForm.pageNum = 1;
+  planForm.planType = '';
+  planForm.keywords = '';
+  dateRange.value = ['', ''];
+  handleQuery();
+};
+// 显示预案详情
+// const handleSelectionChange = (selection: PlanVO[]) => {
+//   ids.value = selection.map((item) => item.planId);
+//   selectedRow.value = selection.length === 1 ? selection[0] : null;
+//   single.value = selection.length != 1;
+//   multiple.value = !selection.length;
+// };
+
+// 显示预案详情
+const handleView = (row: PlanVO) => {
+  router.push({
+    path: '/riskPrevention/planManage/planList',
+    query: {
+      planId: row.planId
+    }
+  });
+};
+
+// const handleView = (row) => {
+//   showDetailDialog.value = true;
+// };
+
+// 搜索
+// const handleForm = () => {
+//   planForm.page = 1;
+//   getList();
+// };
+// 重置
+// const resetForm = () => {
+//   Object.assign(form.value = {
+//     planId: '',
+//     planName: '',
+//     planType: '',
+//     document: '',
+//     organizingUnit: '',
+//     publishDate: ''
+//   });
+//   demoFormRef.value?.resetFields();
+//   handleForm();
+// };
+
+onMounted(() => {
+  getList();
+  // getDicts('mm_event_type').then((res) => {
+  //   planTypeSelection.value = res.data;
+  // });
+});
+</script>