Merge remote-tracking branch 'origin/dev' into dev

src/api/routineCommandMap/index.ts

@@ -39,3 +39,12 @@ export function getReportsList(params) {
     params: params
   });
 }
+
+// 获取培训记录列表
+export function getTrainingList(params) {
+  return request({
+    url: '/api/emergency_plan/training/list',
+    method: 'get',
+    params: params
+  });
+}

src/api/routineCommandMap/type.ts

@@ -104,6 +104,8 @@ export interface UserForm {
   Content?: string;
   peopleNum?: string;
   trainingWay?: string;
+  page: number;
+  pageSize: number;
 }
 export interface AddUserParams {
   theme: string;

src/types/components.d.ts

@@ -16,9 +16,12 @@ declare module 'vue' {
     Dialog: typeof import('./../components/Dialog/index.vue')['default']
     DictTag: typeof import('./../components/DictTag/index.vue')['default']
     Editor: typeof import('./../components/Editor/index.vue')['default']
+    ElAnchor: typeof import('element-plus/es')['ElAnchor']
+    ElAnchorLink: typeof import('element-plus/es')['ElAnchorLink']
     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']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
@@ -93,7 +96,6 @@ declare module 'vue' {
     UserSelect: typeof import('./../components/UserSelect/index.vue')['default']
     VideoContainer: typeof import('./../components/HKVideo/video-container.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/routineCommandMap/RightSection/DrillRecord.vue

@@ -0,0 +1,280 @@
+<template>
+  <el-card shadow="hover">
+    <!-- <template #header>
+      <el-row :gutter="10">
+        <el-col :span="1.5">
+          <el-button type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button type="danger" plain :disabled="multiple" icon="Delete" @click="handleDelete()"> 删除 </el-button>
+        </el-col>
+      </el-row>
+    </template> -->
+
+    <el-table
+      v-loading="loading"
+      :default-sort="{ prop: 'startTime,endTime', order: 'descending' }"
+      :data="dataList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="50" align="center" />
+      <el-table-column label="培训主题" align="center" prop="theme" :show-overflow-tooltip="true" />
+      <el-table-column label="培训单位" align="center" prop="unitName" :show-overflow-tooltip="true" />
+      <el-table-column label="培训内容" align="center" prop="Content" :show-overflow-tooltip="true" />
+      <el-table-column label="参与人数" align="center" prop="peopleNum" width="120" />
+      <el-table-column label="培训方式" align="center" prop="trainingWay" width="120" />
+      <el-table-column label="开始时间" sortable align="center" prop="startTime" width="160">
+        <template #default="scope">
+          <span>{{ scope.row.startTime }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="结束时间" sortable align="center" prop="endTime" width="160">
+        <template #default="scope">
+          <span>{{ scope.row.endTime }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column key="address" label="培训地点" align="center" prop="address" :show-overflow-tooltip="true" />
+      <el-table-column fixed="right" label="操作" width="100">
+        <template #default="scope">
+          <el-tooltip v-if="scope.row.textId !== 1" content="编辑" placement="top">
+            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
+          </el-tooltip>
+          <el-tooltip v-if="scope.row.textId !== 1" content="删除" placement="top">
+            <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)"></el-button>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > queryParams.pageSize"
+      v-model:page="queryParams.page"
+      v-model:limit="queryParams.pageSize"
+      :total="total"
+      @pagination="getList"
+    />
+  </el-card>
+  <!-- 添加或修改培训记录配置对话框 -->
+  <el-dialog ref="formDialogRef" v-model="visible" :title="title" width="500px" append-to-body @close="closeDialog">
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
+      <el-form-item label="培训主题" prop="theme">
+        <el-input v-model="form.theme" placeholder="请输入培训主题" />
+      </el-form-item>
+      <el-form-item label="培训单位" prop="unitName">
+        <el-input v-model="form.unitName" placeholder="请输入培训单位" />
+      </el-form-item>
+      <el-form-item label="培训方式" prop="trainingWay">
+        <el-select v-model="form.trainingWay" placeholder="请选择培训方式">
+          <el-option label="线上培训" value="1" />
+          <el-option label="线下培训" value="2" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="参与人数" prop="peopleNum">
+        <el-input v-model="form.peopleNum" placeholder="请输入参与人数" />
+      </el-form-item>
+      <el-form-item label="开始时间" prop="startTime">
+        <el-date-picker v-model="form.startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间" />
+      </el-form-item>
+      <el-form-item label="结束时间" prop="endTime">
+        <el-date-picker v-model="form.endTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="结束时间" />
+      </el-form-item>
+      <el-form-item label="培训地点" prop="address">
+        <el-input v-model="form.address" placeholder="请选择培训地点" readonly>
+          <template #append>
+            <div style="cursor: pointer" @click="openMapDialog">地图定位</div>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="培训内容" prop="Content">
+        <el-input v-model="form.Content" type="textarea" placeholder="请输入培训内容"></el-input>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+  <!-- 地图弹窗 -->
+  <company-map v-model:visible="mapDialogVisible" :address="form.address" @confirm="handleMapChange"></company-map>
+</template>
+<script setup lang="ts">
+import {
+  getTrainingList,
+  addTraining,
+  updateTraining,
+  getTrainingDetail,
+  deleteTraining
+} from '@/api/riskPrevention/planManage';
+import { to } from 'await-to-js';
+import { ref } from 'vue';
+import { PlanVO } from '@/api/routineCommandMap/type';
+
+const props = defineProps({
+  id: String
+});
+
+const formRef = ref<ElFormInstance>();
+const ids = ref<string[]>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const selectedRow = ref<PlanVO | null>(null);
+const dataList = ref([]);
+const loading = ref(true);
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const emits = defineEmits(['update:modelValue', 'getList']);
+let visible = ref(false);
+let buttonLoading = ref(false);
+let title = ref('');
+const queryParams = reactive({
+  page: 1,
+  pageSize: 10
+});
+const form = ref({
+  trainingId: '',
+  theme: '',
+  unitName: '',
+  address: '',
+  lon: '',
+  lat: '',
+  startTime: '',
+  endTime: '',
+  peopleNum: '',
+  Content: '',
+  trainingWay: ''
+});
+const rules = reactive({
+  theme: [{ required: true, message: '培训主题不能为空', trigger: 'blur' }],
+  unitName: [{ required: true, message: '培训单位不能为空', trigger: 'blur' }],
+  peopleNum: [{ required: true, message: '参与人数不能为空', trigger: 'blur' }],
+  trainingWay: [{ required: true, message: '培训方式不能为空', trigger: 'blur' }],
+  address: [{ required: true, message: '培训地点不能为空', trigger: 'blur' }],
+  Content: [{ required: true, message: '培训内容不能为空', trigger: 'blur' }],
+  startTime: [{ required: true, message: '开始时间不能为空', trigger: 'change' }],
+  endTime: [{ required: true, message: '结束时间不能为空', trigger: 'change' }]
+});
+
+// 获取列表数据
+const getList = () => {
+  loading.value = true;
+  getTrainingList({ ...queryParams, planNum: props.id })
+    .then((res) => {
+      dataList.value = res.data;
+      total.value = res.total;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+
+watch(
+  () => props.id,
+  () => {
+    if (props.id) {
+      getList();
+    }
+  },
+  {
+    immediate: true
+  }
+);
+
+/** 重置操作表单 */
+const reset = () => {
+  form.value = {
+    trainingId: '',
+    theme: '',
+    unitName: '',
+    address: '',
+    lon: '',
+    lat: '',
+    startTime: '',
+    endTime: '',
+    peopleNum: '',
+    Content: '',
+    trainingWay: ''
+  };
+  formRef.value?.resetFields();
+};
+/** 取消按钮 */
+const cancel = () => {
+  resetForm();
+  visible.value = false;
+};
+
+/**
+ * 关闭用户弹窗
+ */
+const closeDialog = () => {
+  emits('update:modelValue', false);
+  resetForm();
+};
+
+const resetForm = () => {
+  formRef.value?.resetFields();
+  formRef.value?.clearValidate();
+};
+
+const handleUpdate = async (row) => {
+  if (row) {
+    resetForm();
+    const res = await getTrainingDetail(row.trainingId);
+    form.value = res.data;
+    visible.value = true;
+    title.value = '修改培训记录';
+  }
+};
+
+const handleAdd = () => {
+  resetForm();
+  visible.value = true;
+  title.value = '添加培训记录';
+};
+
+/**提交按钮 */
+const submitForm = () => {
+  formRef.value?.validate(async (valid) => {
+    if (valid) {
+      try {
+        buttonLoading.value = true;
+        form.value.trainingId ? await updateTraining({ ...form.value, planId: props.id }) : await addTraining({ ...form.value, planId: props.id });
+        proxy?.$modal.msgSuccess(form.value.trainingId ? '修改成功' : '新增成功');
+        visible.value = false;
+        getList();
+      } finally {
+        buttonLoading.value = false;
+      }
+    }
+  });
+};
+
+const handleSelectionChange = (selection) => {
+  ids.value = selection.map((item) => item.trainingId);
+  selectedRow.value = selection.length === 1 ? selection[0] : null;
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+
+const handleDelete = async (row) => {
+  const deleteIds = row && row.trainingId ? [row?.trainingId] : ids.value;
+  const [err] = await to(proxy?.$modal.confirm('是否确认删除选择的培训记录？') as any);
+  if (!err) {
+    await deleteTraining(deleteIds);
+    getList();
+    proxy?.$modal.msgSuccess('删除成功');
+  }
+};
+
+// 地图定位
+const mapDialogVisible = ref(false);
+const openMapDialog = () => {
+  mapDialogVisible.value = true;
+};
+const handleMapChange = (data) => {
+  form.value.address = data.address;
+  form.value.lon = data.lnglat[0];
+  form.value.lat = data.lnglat[1];
+  mapDialogVisible.value = false;
+};
+</script>

src/views/routineCommandMap/RightSection/TrainingRecord.vue

@@ -0,0 +1,279 @@
+<template>
+  <el-card shadow="hover">
+    <!-- <template #header>
+      <el-row :gutter="10">
+        <el-col :span="1.5">
+          <el-button type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button type="danger" plain :disabled="multiple" icon="Delete" @click="handleDelete()"> 删除 </el-button>
+        </el-col>
+      </el-row>
+    </template> -->
+
+    <el-table
+      v-loading="loading"
+      :default-sort="{ prop: 'startTime,endTime', order: 'descending' }"
+      :data="dataList"
+      @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="50" align="center" />
+      <el-table-column label="培训主题" align="center" prop="theme" :show-overflow-tooltip="true" />
+      <el-table-column label="培训单位" align="center" prop="unitName" :show-overflow-tooltip="true" />
+      <el-table-column label="培训内容" align="center" prop="Content" :show-overflow-tooltip="true" />
+      <el-table-column label="参与人数" align="center" prop="peopleNum" width="120" />
+      <el-table-column label="培训方式" align="center" prop="trainingWay" width="120" />
+      <el-table-column label="开始时间" sortable align="center" prop="startTime" width="160">
+        <template #default="scope">
+          <span>{{ scope.row.startTime }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="结束时间" sortable align="center" prop="endTime" width="160">
+        <template #default="scope">
+          <span>{{ scope.row.endTime }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column key="address" label="培训地点" align="center" prop="address" :show-overflow-tooltip="true" />
+      <el-table-column fixed="right" label="操作" width="100">
+        <template #default="scope">
+          <el-tooltip v-if="scope.row.textId !== 1" content="编辑" placement="top">
+            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
+          </el-tooltip>
+          <el-tooltip v-if="scope.row.textId !== 1" content="删除" placement="top">
+            <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)"></el-button>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > queryParams.pageSize"
+      v-model:page="queryParams.page"
+      v-model:limit="queryParams.pageSize"
+      :total="total"
+      @pagination="getList"
+    />
+  </el-card>
+  <!-- 添加或修改培训记录配置对话框 -->
+  <el-dialog ref="formDialogRef" v-model="visible" :title="title" width="500px" append-to-body @close="closeDialog">
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
+      <el-form-item label="培训主题" prop="theme">
+        <el-input v-model="form.theme" placeholder="请输入培训主题" />
+      </el-form-item>
+      <el-form-item label="培训单位" prop="unitName">
+        <el-input v-model="form.unitName" placeholder="请输入培训单位" />
+      </el-form-item>
+      <el-form-item label="培训方式" prop="trainingWay">
+        <el-select v-model="form.trainingWay" placeholder="请选择培训方式">
+          <el-option label="线上培训" value="1" />
+          <el-option label="线下培训" value="2" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="参与人数" prop="peopleNum">
+        <el-input v-model="form.peopleNum" placeholder="请输入参与人数" />
+      </el-form-item>
+      <el-form-item label="开始时间" prop="startTime">
+        <el-date-picker v-model="form.startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间" />
+      </el-form-item>
+      <el-form-item label="结束时间" prop="endTime">
+        <el-date-picker v-model="form.endTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="结束时间" />
+      </el-form-item>
+      <el-form-item label="培训地点" prop="address">
+        <el-input v-model="form.address" placeholder="请选择培训地点" readonly>
+          <template #append>
+            <div style="cursor: pointer" @click="openMapDialog">地图定位</div>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="培训内容" prop="Content">
+        <el-input v-model="form.Content" type="textarea" placeholder="请输入培训内容"></el-input>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+  <!-- 地图弹窗 -->
+  <company-map v-model:visible="mapDialogVisible" :address="form.address" @confirm="handleMapChange"></company-map>
+</template>
+<script setup lang="ts">
+import {
+  getTrainingList,
+  addTraining,
+  updateTraining,
+  getTrainingDetail,
+  deleteTraining
+} from '@/api/riskPrevention/planManage';
+import { to } from 'await-to-js';
+import { ref } from 'vue';
+import { PlanVO } from '@/api/system/user/types';
+
+const props = defineProps({
+  id: String
+});
+
+const formRef = ref<ElFormInstance>();
+const ids = ref<string[]>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const selectedRow = ref<PlanVO | null>(null);
+const dataList = ref([]);
+const loading = ref(true);
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const emits = defineEmits(['update:modelValue', 'getList']);
+let visible = ref(false);
+let buttonLoading = ref(false);
+let title = ref('');
+const queryParams = reactive({
+  page: 1,
+  pageSize: 10
+});
+const form = ref({
+  trainingId: '',
+  theme: '',
+  unitName: '',
+  address: '',
+  lon: '',
+  lat: '',
+  startTime: '',
+  endTime: '',
+  peopleNum: '',
+  Content: '',
+  trainingWay: ''
+});
+const rules = reactive({
+  theme: [{ required: true, message: '培训主题不能为空', trigger: 'blur' }],
+  unitName: [{ required: true, message: '培训单位不能为空', trigger: 'blur' }],
+  peopleNum: [{ required: true, message: '参与人数不能为空', trigger: 'blur' }],
+  trainingWay: [{ required: true, message: '培训方式不能为空', trigger: 'blur' }],
+  address: [{ required: true, message: '培训地点不能为空', trigger: 'blur' }],
+  Content: [{ required: true, message: '培训内容不能为空', trigger: 'blur' }],
+  startTime: [{ required: true, message: '开始时间不能为空', trigger: 'change' }],
+  endTime: [{ required: true, message: '结束时间不能为空', trigger: 'change' }]
+});
+
+// 获取列表数据
+const getList = () => {
+  loading.value = true;
+  getTrainingList({ ...queryParams, planNum: props.id })
+    .then((res) => {
+      dataList.value = res.data;
+      total.value = res.total;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+
+watch(
+  () => props.id,
+  () => {
+    if (props.id) {
+      getList();
+    }
+  },
+  {
+    immediate: true
+  }
+);
+
+/** 重置操作表单 */
+const reset = () => {
+  form.value = {
+    trainingId: '',
+    theme: '',
+    unitName: '',
+    address: '',
+    lon: '',
+    lat: '',
+    startTime: '',
+    endTime: '',
+    peopleNum: '',
+    Content: '',
+    trainingWay: ''
+  };
+  formRef.value?.resetFields();
+};
+/** 取消按钮 */
+const cancel = () => {
+  resetForm();
+  visible.value = false;
+};
+
+/**
+ * 关闭用户弹窗
+ */
+const closeDialog = () => {
+  emits('update:modelValue', false);
+  resetForm();
+};
+
+const resetForm = () => {
+  formRef.value?.resetFields();
+  formRef.value?.clearValidate();
+};
+
+const handleUpdate = async (row) => {
+  if (row) {
+    resetForm();
+    const res = await getTrainingDetail(row.trainingId);
+    form.value = res.data;
+    visible.value = true;
+    title.value = '修改培训记录';
+  }
+};
+
+const handleAdd = () => {
+  resetForm();
+  visible.value = true;
+  title.value = '添加培训记录';
+};
+
+/**提交按钮 */
+const submitForm = () => {
+  formRef.value?.validate(async (valid) => {
+    if (valid) {
+      try {
+        buttonLoading.value = true;
+        form.value.trainingId ? await updateTraining({ ...form.value, planId: props.id }) : await addTraining({ ...form.value, planId: props.id });
+        proxy?.$modal.msgSuccess(form.value.trainingId ? '修改成功' : '新增成功');
+        visible.value = false;
+        getList();
+      } finally {
+        buttonLoading.value = false;
+      }
+    }
+  });
+};
+
+const handleSelectionChange = (selection) => {
+  ids.value = selection.map((item) => item.trainingId);
+  selectedRow.value = selection.length === 1 ? selection[0] : null;
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+
+const handleDelete = async (row) => {
+  const deleteIds = row && row.trainingId ? [row?.trainingId] : ids.value;
+  const [err] = await to(proxy?.$modal.confirm('是否确认删除选择的培训记录？') as any);
+  if (!err) {
+    await deleteTraining(deleteIds);
+    getList();
+    proxy?.$modal.msgSuccess('删除成功');
+  }
+};
+
+// 地图定位
+const mapDialogVisible = ref(false);
+const openMapDialog = () => {
+  mapDialogVisible.value = true;
+};
+const handleMapChange = (data) => {
+  form.value.address = data.address;
+  form.value.lon = data.lnglat[0];
+  form.value.lat = data.lnglat[1];
+  mapDialogVisible.value = false;
+};
+</script>

src/views/routineCommandMap/RightSection/checkview.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="app-container">
+    <transition name="fade">
+      <div class="mb-[5px]">
+        <h3>{{ detailData.planName }}</h3>
+        <el-card shadow="hover">
+          <el-tabs v-model="activeName" type="border-card" class="demo-tabs" @tab-click="handleClick2">
+            <el-tab-pane label="总则" name="first">
+              <div>
+                <el-row>
+                  <el-col :span="4">
+                    <el-anchor :container="containerRef" direction="vertical" type="default" :offset="30" @click="handleClick1">
+                      <el-anchor-link href="#part1" title="编制目的" />
+                      <el-anchor-link href="#part2" title="编制依据" />
+                      <el-anchor-link href="#part3" title="适用范围" />
+                      <el-anchor-link href="#part4" title="工作原则" />
+                    </el-anchor>
+                  </el-col>
+                  <el-col :span="20">
+                    <div ref="containerRef" style="height: 300px; overflow-y: auto">
+                      <div id="part1" style="height: auto; margin-top: 20px; font-size: 14px">
+                        <h3 style="font-weight: 600">1.1 编制目的</h3>
+                        <span style="text-indent: 2em">这是内容这是内容</span>
+                      </div>
+                      <div id="part2" style="height: auto; margin-top: 15px; font-size: 14px">
+                        <h3 style="font-weight: 600">1.2 编制依据</h3>
+                        <span style="text-indent: 28px">这是内容这是内容这是内容</span>
+                      </div>
+                      <div id="part3" style="height: auto; margin-top: 15px; font-size: 14px">
+                        <h3 style="font-weight: 600">1.3 适用范围</h3>
+                        <span style="text-indent: 28px">这是内容这是内容</span>
+                      </div>
+                      <div id="part4" style="height: auto; margin-top: 15px; font-size: 14px">
+                        <h3 style="font-weight: 600">1.4 工作原则</h3>
+                        <span style="text-indent: 28px">这是内容这是内容</span>
+                      </div>
+                    </div>
+                  </el-col>
+                </el-row>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="组织体系" name="second">组织体系</el-tab-pane>
+            <el-tab-pane label="运行机制" name="third">运行机制</el-tab-pane>
+            <el-tab-pane label="应急保障" name="fourth">应急保障</el-tab-pane>
+            <el-tab-pane label="监督管理" name="fifth">监督管理</el-tab-pane>
+            <el-tab-pane label="附则" name="sixth">附则</el-tab-pane>
+            <el-tab-pane label="附件" name="seventh">附件</el-tab-pane>
+
+            <el-tab-pane label="培训记录" :lg="30" :xs="24">
+              <!-- <h3>培训记录</h3> -->
+              <TrainingRecord :id="planId" />
+            </el-tab-pane>
+            <el-tab-pane label="演练记录" :lg="30" :xs="24">
+              <!-- <h3>演练记录</h3> -->
+              <DrillRecord :id="planId" />
+            </el-tab-pane>
+            <el-tab-pane label="响应记录" :lg="30" :xs="24">
+              <h3>响应记录</h3>
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { TabsPaneContext } from 'element-plus';
+import { getPlanDetail } from '@/api/riskPrevention/planManage';
+import { UserVO, UserForm, PlanVO, PlanForm } from '@/api/routineCommandMap/type';
+import { addDateRange } from '@/utils/ruoyi';
+import { getTrainingList } from '@/api/routineCommandMap/index';
+import DrillRecord from '@/views/routineCommandMap/RightSection/DrillRecord.vue';
+import TrainingRecord from '@/views/routineCommandMap/RightSection/TrainingRecord.vue';
+
+const router = useRouter();
+const showSearch = ref(true);
+const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
+const dataList = ref([]);
+// const loading = ref(true);
+const demoList = ref<PlanVO[]>([]);
+
+let visible = ref(false);
+const demoFormRef = ref(null);
+const total = ref(0);
+const containerRef = ref<HTMLElement | null>(null);
+const activeName = ref('first');
+
+const handleClick2 = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event);
+};
+
+const handleClick1 = (e: MouseEvent) => {
+  e.preventDefault();
+};
+
+const props = defineProps({
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  planId: String
+  //   data: form
+});
+
+
+
+/***培训记录编辑界面时间选择 */
+const route = useRoute();
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { plan_type } = toRefs<any>(proxy?.useDict('plan_type'));
+
+// 预案编辑
+let detailData = ref({
+  planId: '',
+  planName: '',
+  planType: '',
+  publishDate: '',
+  organizingUnit: '',
+  document: '',
+  fileList: []
+});
+
+const getList = async () => {
+  loading.value = true;
+  const res = await getTrainingList(addDateRange(props.planId, dateRange.value));
+  demoList.value = res.data;
+  total.value = res.total;
+  dataList.value = res.data;
+};
+
+onMounted(() => {
+  getList();
+  debugger;
+  getPlanDetail(props.planId).then((res) => {
+    detailData.value = res.data;
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.demo-tabs > .el-tabs__content {
+  padding: 32px;
+  color: #6b778c;
+  font-size: 32px;
+  font-weight: 600;
+}
+</style>

src/views/routineCommandMap/RightSection/index.vue

@@ -65,6 +65,7 @@
 </template>
 
 <script lang="ts" setup name="RightSection">
+
 // 视频监控
 import { getEmergencyPlanList, getEmergencyVideoCata, getReportsList } from '@/api/routineCommandMap';
 import KnowledgeDialog from '@/views/routineCommandMap/RightSection/KnowledgeDialog.vue';

src/views/routineCommandMap/RightSection/planManageDialog.vue

@@ -41,14 +41,17 @@
       <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 content="查看" placement="top" class="item" effect="dark">
+            <el-button type="text" @click="showKnowledgeBaseDetail(scope.row)">查看</el-button>
           </el-tooltip>
         </template>
       </el-table-column>
     </el-table>
-    <!-- 添加对话框 -->
+    <Dialog v-model="planManageState.showDetailDialog"  width="100%">
 
+      <!-- v-model="planManageState.showListDialog" -->
+      <checkview :planId="planId" />
+    </Dialog>
     <!-- // 底部分页 -->
     <pagination v-show="total > 0" v-model:page="planForm.pageNum" v-model:limit="planForm.pageSize" :total="total" @pagination="getList" />
   </div>
@@ -60,19 +63,13 @@ 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';
+import checkview from '@/views/routineCommandMap/RightSection/checkview.vue';
 
 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);
+let planId = ref();
 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();
@@ -85,34 +82,38 @@ const planForm = reactive({
   sortBy: 'publish_date',
   sortOrder: 'desc'
 });
+
 let form = ref({
   planId: '',
   planName: '',
   planType: '',
   document: '',
   organizingUnit: '',
-  publish_date: ''
-  // fileList: []  应该是预案附件的地方吧
+  publishDate: '',
+  fileList: []
 });
 
-let showDetailDialog = ref(false);
+const planManageState = reactive({
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    sortBy: 'publish_date',
+    sortOrder: 'desc'
+  },
+  listData: [],
+  showListDialog: true,
+  showDetailDialog: false
+});
 
-const planTypeSelection = ref([]);
-// 控制对话框显示
-const dialogVisible = ref(false);
+const showKnowledgeBaseList = () => {
+  planManageState.showListDialog = true;
+};
 
-// const dialog = reactive({
-//   visible: false,
-//   title: ''
-// });
+const showKnowledgeBaseDetail = (row) => {
+  planManageState.showDetailDialog = true;
+  planId.value = row.planId;
+};
 
-// 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) => {
@@ -137,13 +138,6 @@ const resetQuery = () => {
   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) => {
@@ -155,33 +149,27 @@ const handleView = (row: PlanVO) => {
   });
 };
 
-// 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>
+
+<style>
+.custom-dialog {
+  width: 100%;
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.img-item {
+  width: 280px;
+  height: 500px;
+  margin-left: 215px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+}
+</style>