我要发布详情页面联调

src/api/notificationInfoManage/myPublish.ts

@@ -7,4 +7,12 @@ export function fetchNotificationMattersList(data) {
         method: 'post',
         data
     })
+}
+
+// 获取我要发布详细信息
+export function fetchReleaseDetail(releasedId) {
+    return request({
+        url: `/business/released/${releasedId}`,
+        method: 'get',
+    })
 }

src/components/notificationDetailsParts/operationLog.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="ship-info-form">
+    <el-collapse class="el-collapse" v-model="activeNames">
+      <el-collapse-item name="1">
+        <template #title="{ isActive }">
+          <div class="collapse-title">
+            操作记录
+          </div>
+        </template>
+        <el-table 
+          :data="tableData" 
+          style="width: 100%"
+          :span-method="objectSpanMethod"
+          border
+        >
+          <el-table-column fixed type="index" label="序号" width="80" />
+          <el-table-column prop="receiver" label="接收单位" width="200" />
+          <el-table-column prop="date" label="操作时间" width="200" />
+          <el-table-column prop="step" label="通报环节" width="200" />
+          <el-table-column prop="unit" label="发布/接收单位" width="200" />
+          <el-table-column prop="action" label="操作记录" width="200" />
+          <el-table-column prop="status" label="状态" width="200" />
+          <el-table-column prop="measureType" label="处置措施类型" width="200" />
+          <el-table-column prop="measure" label="采取措施" width="200" />
+          <el-table-column prop="remark" label="其他措施说明" width="200" />
+          <el-table-column prop="operator" label="发布/接收人员" width="200" />
+          <el-table-column prop="opinion" label="处置意见" width="200" />
+          <el-table-column fixed="right" label="附件查看" width="200">
+            <template #default="scope">
+              <el-button link type="primary" @click="viewAttachment(scope.row)">查看</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+const activeNames = ref(['1'])
+
+// 模拟数据（相同接收单位的数据连续排列）
+const tableData = ref([
+  {
+    id: 1,
+    receiver: '韶关海事局',
+    date: '2023-06-01 09:00',
+    step: '接收',
+    unit: '广东省应急厅',
+    action: '接收通报',
+    status: '已接收',
+    measureType: '初步处置',
+    measure: '启动应急预案',
+    remark: '',
+    operator: '张三',
+    opinion: '需进一步核查'
+  },
+  {
+    id: 2,
+    receiver: '韶关海事局',
+    date: '2023-06-01 10:30',
+    step: '处置',
+    unit: '韶关海事局',
+    action: '现场核查',
+    status: '处置中',
+    measureType: '现场处置',
+    measure: '派员现场检查',
+    remark: '发现违规行为',
+    operator: '李四',
+    opinion: '需行政处罚'
+  },
+  {
+    id: 3,
+    receiver: '广州海事局',
+    date: '2023-06-02 08:00',
+    step: '接收',
+    unit: '广东省应急厅',
+    action: '接收通报',
+    status: '已接收',
+    measureType: '初步处置',
+    measure: '启动应急预案',
+    remark: '',
+    operator: '王五',
+    opinion: '需进一步核查'
+  },
+  {
+    id: 4,
+    receiver: '深圳海事局',
+    date: '2023-06-02 09:00',
+    step: '接收',
+    unit: '广东省应急厅',
+    action: '接收通报',
+    status: '已接收',
+    measureType: '初步处置',
+    measure: '启动应急预案',
+    remark: '',
+    operator: '赵六',
+    opinion: '需进一步核查'
+  }
+])
+
+// 存储合并配置
+const spanArr = ref<number[]>([])
+const position = ref(0)
+
+// 计算合并规则
+const computeSpan = () => {
+  spanArr.value = []
+  position.value = 0
+  
+  // 按接收单位分组计算
+  tableData.value.forEach((item, index) => {
+    if (index === 0) {
+      spanArr.value.push(1)
+      position.value = 0
+    } else {
+      if (item.receiver === tableData.value[index - 1].receiver) {
+        spanArr.value[position.value] += 1
+        spanArr.value.push(0)
+      } else {
+        spanArr.value.push(1)
+        position.value = index
+      }
+    }
+  })
+}
+
+// 合并单元格方法
+const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
+  if (columnIndex === 1) {
+    const rowspan = spanArr.value[rowIndex]
+    const colspan = rowspan > 0 ? 1 : 0
+    
+    return {
+      rowspan,
+      colspan
+    }
+  }
+}
+
+// 查看附件
+const viewAttachment = (row) => {
+  console.log('查看附件:', row)
+  // 这里实现附件查看逻辑
+}
+
+// 初始化时计算合并规则
+onMounted(() => {
+  computeSpan()
+})
+</script>
+
+<style scoped>
+.ship-info-form {
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+}
+
+:deep .el-collapse-item__header {
+  color: #5070ae;
+  font-size: 16px;
+  font-weight: bold;
+  background: linear-gradient(135deg, #d2e8ff, #fcfeff);
+  box-shadow: 0 8px 20px #fcfeff;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding-left: 20px;
+  height: 50px;
+}
+
+:deep .el-collapse-item__wrap {
+  padding: 20px;
+}
+
+.collapse-title {
+  display: flex;
+  align-items: center;
+}
+
+/* 合并单元格样式优化 */
+:deep .el-table .merged-cell {
+  background-color: #f5f7fa;
+}
+</style>

src/components/notificationDetailsParts/publishUnitInformation.vue

@@ -8,8 +8,8 @@
           </div>
         </template>
         <div class="flex mb20 mt20">
-          <div class="mr20">发布单位：交通运输部海事局</div>
-          <div>发布日期：2025-04-17</div>
+          <div class="mr20">发布单位：{{ information.releasedUnit }}</div>
+          <div>发布日期：{{ information.releasedDate }}</div>
         </div>
         <div>
           根据《交通运输部办公厅关于印发〈水上交通安全信息共享共治专项行动方案〉的通知》（交办海涵），现将相关情况向你单位通报，请予以处理。
@@ -20,6 +20,12 @@
 </template>
 
 <script setup lang="ts">
+interface IProps {
+  information: any;
+}
+const prop = withDefaults(defineProps<IProps>(),{
+  information: {}
+})
   const activeNames = ref(['1']);
 </script>
 

src/components/notificationDetailsParts/questionInformation.vue

@@ -23,27 +23,27 @@
             <!-- 第一行：中文船名、英文船名、船舶识别号 -->
             <el-row :gutter="24">
               <el-col :span="8">
-                <el-form-item label="中文船名" prop="chineseName" required>
+                <el-form-item label="中文船名" prop="chineseVesselName" required>
                   <el-input 
-                    v-model="formData.chineseName" 
+                    v-model="formData.chineseVesselName" 
                     placeholder="请填写中文船名"
                     :disabled="!isEditable"
                   />
                 </el-form-item>
               </el-col>
               <el-col :span="8">
-                <el-form-item label="英文船名" prop="englishName">
+                <el-form-item label="英文船名" prop="englishVesselName">
                   <el-input 
-                    v-model="formData.englishName" 
+                    v-model="formData.englishVesselName" 
                     placeholder="请填写英文船名"
                     :disabled="!isEditable"
                   />
                 </el-form-item>
               </el-col>
               <el-col :span="8">
-                <el-form-item label="船舶识别号" prop="vesselId">
+                <el-form-item label="船舶识别号" prop="vesselIdenNumber">
                   <el-input 
-                    v-model="formData.vesselId" 
+                    v-model="formData.vesselIdenNumber" 
                     placeholder="请填写船舶识别号"
                     :disabled="!isEditable"
                   />
@@ -85,9 +85,9 @@
             <!-- 第三行：牌薄号、船舶种类、船籍港 -->
             <el-row :gutter="24">
               <el-col :span="8">
-                <el-form-item label="牌薄号" prop="registrationNo">
+                <el-form-item label="牌薄号" prop="licensePlateNumber">
                   <el-input 
-                    v-model="formData.registrationNo" 
+                    v-model="formData.licensePlateNumber" 
                     placeholder="请填写牌薄号"
                     :disabled="!isEditable"
                   />
@@ -134,18 +134,18 @@
             <!-- 第五行：船舶所有人、所有人电话 -->
             <el-row :gutter="24">
               <el-col :span="12">
-                <el-form-item label="船舶所有人" prop="owner" required>
+                <el-form-item label="船舶所有人" prop="theShipowner" required>
                   <el-input 
-                    v-model="formData.owner" 
+                    v-model="formData.theShipowner" 
                     placeholder="请填写船舶所有人"
                     :disabled="!isEditable"
                   />
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item label="所有人电话" prop="ownerPhone">
+                <el-form-item label="所有人电话" prop="ePhoneNumbers">
                   <el-input 
-                    v-model="formData.ownerPhone" 
+                    v-model="formData.ePhoneNumbers" 
                     placeholder="请填写船舶所有人联系电话"
                     :disabled="!isEditable"
                   />
@@ -156,18 +156,18 @@
             <!-- 第六行：船舶经营人、经营人电话 -->
             <el-row :gutter="24">
               <el-col :span="12">
-                <el-form-item label="船舶经营人" prop="operator" required>
+                <el-form-item label="船舶经营人" prop="shipOperators" required>
                   <el-input 
-                    v-model="formData.operator" 
+                    v-model="formData.shipOperators" 
                     placeholder="请填写船舶经营人"
                     :disabled="!isEditable"
                   />
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item label="经营人电话" prop="operatorPhone">
+                <el-form-item label="经营人电话" prop="oPhoneNumbers">
                   <el-input 
-                    v-model="formData.operatorPhone" 
+                    v-model="formData.oPhoneNumbers" 
                     placeholder="请填写船舶经营人联系电话"
                     :disabled="!isEditable"
                   />
@@ -178,18 +178,18 @@
             <!-- 第七行：其他相关组织、其他相关组织电话 -->
             <el-row :gutter="24">
               <el-col :span="12">
-                <el-form-item label="其他相关组织" prop="otherOrg">
+                <el-form-item label="其他相关组织" prop="oro">
                   <el-input 
-                    v-model="formData.otherOrg" 
+                    v-model="formData.oro" 
                     placeholder="请填写其他相关组织"
                     :disabled="!isEditable"
                   />
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item label="其他相关组织电话" prop="otherOrgPhone">
+                <el-form-item label="其他相关组织电话" prop="tnforo">
                   <el-input 
-                    v-model="formData.otherOrgPhone" 
+                    v-model="formData.tnforo" 
                     placeholder="请填写其他相关组织联系电话"
                     :disabled="!isEditable"
                   />
@@ -200,9 +200,9 @@
             <!-- 第八行：船舶信息描述 -->
             <el-row :gutter="24">
               <el-col :span="24">
-                <el-form-item label="船舶信息描述" prop="description">
+                <el-form-item label="船舶信息描述" prop="sid">
                   <el-input 
-                    v-model="formData.description" 
+                    v-model="formData.sid" 
                     placeholder="请填写船舶信息描述"
                     type="textarea" 
                     :rows="4"
@@ -256,27 +256,27 @@ const isShowAdd = ref(true); // 是否显示添加按钮
 
 // 表单数据与验证规则
 const formData = reactive({
-  chineseName: '',
-  englishName: '',
-  vesselId: '',
+  chineseVesselName: '',
+  englishVesselName: '',
+  vesselIdenNumber: '',
   mmsi: '',
   imoNumber: '',
   callSign: '',
-  registrationNo: '',
+  licensePlateNumber: '',
   vesselType: '',
   portOfRegistry: '',
   nationality: '',
-  owner: '',
-  ownerPhone: '',
-  operator: '',
-  operatorPhone: '',
-  otherOrg: '',
-  otherOrgPhone: '',
-  description: ''
+  theShipowner: '',
+  ePhoneNumbers: '',
+  shipOperators: '',
+  oPhoneNumbers: '',
+  oro: '',
+  tnforo: '',
+  sid: ''
 });
 
 const formRules = reactive<FormRules>({
-  chineseName: [
+  chineseVesselName: [
     { required: true, message: '请输入中文船名', trigger: 'blur' },
     { max: 50, message: '长度不能超过50个字符', trigger: 'blur' }
   ],
@@ -287,18 +287,18 @@ const formRules = reactive<FormRules>({
     { required: true, message: '请输入船籍港', trigger: 'blur' },
     { max: 30, message: '长度不能超过30个字符', trigger: 'blur' }
   ],
-  owner: [
+  theShipowner: [
     { required: true, message: '请输入船舶所有人', trigger: 'blur' },
     { max: 50, message: '长度不能超过50个字符', trigger: 'blur' }
   ],
-  operator: [
+  shipOperators: [
     { required: true, message: '请输入船舶经营人', trigger: 'blur' },
     { max: 50, message: '长度不能超过50个字符', trigger: 'blur' }
   ],
-  ownerPhone: [
+  ePhoneNumbers: [
     { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
   ],
-  operatorPhone: [
+  oPhoneNumbers: [
     { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
   ]
 });
@@ -329,16 +329,16 @@ onMounted(() => {
 const fetchShipData = () => {
   // 实际项目中替换为接口请求
   setTimeout(() => {
-    formData.chineseName = '扬子10';
-    formData.englishName = 'YANGZE 10';
+    formData.chineseVesselName = '扬子10';
+    formData.englishVesselName = 'YANGZE 10';
     formData.mmsi = '636017533';
     formData.imoNumber = '9574444';
     formData.callSign = 'D5LK6';
     formData.vesselType = 'bulkCarrier'; // 散货船
     formData.portOfRegistry = '蒙罗维亚';
     formData.nationality = '利比里亚';
-    formData.owner = '扬子航运有限公司';
-    formData.operator = '扬子船务代理公司';
+    formData.theShipowner = '扬子航运有限公司';
+    formData.shipOperators = '扬子船务代理公司';
     isShowAdd.value = false; // 编辑/详情场景隐藏添加按钮
   }, 500);
 };

src/router/index.ts

@@ -132,6 +132,12 @@ export const constantRoutes: RouteRecordRaw[] = [
 				meta: { title: '新增发布', icon: 'user' },
 			},
 			{
+				path: 'detailPublish',
+				component: () => import('@/views/notificationInfoManage/myPublish/components/detail.vue'),
+				name: 'detailPublish',
+				meta: { title: '查看发布', icon: 'user' },
+			},
+			{
 				path: 'myReceptionDisposal',
 				component: () => import('@/views/notificationInfoManage/myReceptionDisposal/index.vue'),
 				name: 'myReceptionDisposal',

src/views/notificationInfoManage/myPublish/components/detail.vue

@@ -5,16 +5,18 @@
 		</div>
 
 		<!-- 发布单位信息 -->
-		<PublishUnitInformation class="mb20" />
+		<PublishUnitInformation :information="formData" class="mb20" />
 		<!-- 涉事主体基本信息 -->
-		<QuestionInformation />
+		<QuestionInformation :information="formData" />
 		<!-- 水上交通安全通报信息 -->
-		<WaterSafetyInformation ref="noticeChildRef" />
+		<WaterSafetyInformation ref="noticeChildRef" :information="formData" />
+		<!-- 操作记录 -->
+		<operationLog />
 		<!-- 底部按钮区 -->
 		<div class="form-actions">
 			<slot name="btn">
-				<el-button type="primary" @click="handleSubmit">保存</el-button>
-				<el-button type="primary" @click="handleSubmit">发布</el-button>
+				<el-button v-if="route.query.type !== 'detail'" type="primary" @click="handleSubmit">保存</el-button>
+				<el-button v-if="route.query.type !== 'detail'" type="primary" @click="handleSubmit">发布</el-button>
 				<el-button type="primary" @click="router.back">返回</el-button>
 			</slot>
 		</div>
@@ -27,6 +29,7 @@ import { useRoute, useRouter } from 'vue-router';
 import PublishUnitInformation from '@/components/notificationDetailsParts/publishUnitInformation.vue';
 import QuestionInformation from '@/components/notificationDetailsParts/questionInformation.vue';
 import WaterSafetyInformation from '@/components/notificationDetailsParts/waterSafetyInformation.vue';
+import operationLog from '@/components/notificationDetailsParts/operationLog.vue';
 
 // --- 路由与Store ---
 const route = useRoute();
@@ -36,9 +39,13 @@ const pageTitle = ref(''); // 页面标题
 const isDetail = ref(false); // 是否为详情模式
 const isEdit = ref(false); // 是否为编辑模式
 const noticeChildRef = ref<any>();
+const formData = ref()
 
 onMounted(async () => {
-	const { type, id } = route.query;
+	const { type, info } = route.query;
+	if (typeof info === 'string') {
+		formData.value = JSON.parse(info)
+	}
 	try {
 		switch (type as string) {
 			case 'add':

src/views/notificationInfoManage/myPublish/config/search.config.ts

@@ -40,7 +40,6 @@ const searchConfig = {
 			label: '发出单位',
 			prop: 'releasedUnit',
 			type: 'select',
-			multiple: true,
 			options: [] as OptionsType[],
 			span: 6,
 			placeholder: '请选择发出单位',
@@ -49,7 +48,6 @@ const searchConfig = {
 			label: '接收单位',
 			prop: 'receivingUnitName',
 			type: 'select',
-			multiple: true,
 			options: [] as OptionsType[],
 			span: 6,
 			placeholder: '请选择接收单位',
@@ -58,7 +56,6 @@ const searchConfig = {
 			label: '通报状态',
 			prop: 'notificationStatus',
 			type: 'select',
-			multiple: true,
 			options: [] as OptionsType[],
 			span: 6,
 			placeholder: '请选择通报状态',
@@ -67,7 +64,6 @@ const searchConfig = {
 			label: '采取措施',
 			prop: 'takeMeasures',
 			type: 'select',
-			multiple: true,
 			options: [] as OptionsType[],
 			span: 6,
 			placeholder: '请选择采取措施',
@@ -76,7 +72,6 @@ const searchConfig = {
 			label: '超期状态',
 			prop: 'overdueStatus',
 			type: 'select',
-			multiple: true,
 			options: [] as OptionsType[],
 			span: 6,
 			placeholder: '请选择超期状态',
@@ -106,14 +101,13 @@ const searchConfig = {
 			label: '是否需要反馈',
 			prop: 'wfir',
 			type: 'select',
-			multiple: true,
 			options: [] as OptionsType[],
 			span: 6,
 			placeholder: '请选择是否需要反馈',
 		},
 		{
 			label: '发布日期',
-			prop: 'releasedDate',
+			prop: 'releasedDates',
 			type: 'date-picker',
 			span: 6,
 			placeholder: '请选择发布日期',

src/views/notificationInfoManage/myPublish/index.vue

@@ -27,16 +27,16 @@
 										<div class="red">接收单位处理/处置完成超期提醒</div>
 									</div>
 								</div>
-								<el-table :data="[]">
-									<el-table-column prop="receivingUnitStr" label="接收单位" />
-									<el-table-column prop="userPhone" label="联络人电话" />
-									<el-table-column prop="notificationStatus" label="通报状态" />
-									<el-table-column prop="takeMeasures" label="采取措施" />
-									<el-table-column prop="overdueStatus" label="超期状态" />
-									<el-table-column prop="acceptanceDate" label="受理日期" />
+								<el-table :data="mattersList">
+									<el-table-column show-overflow-tooltip prop="receivingUnitStr" label="接收单位" />
+									<el-table-column show-overflow-tooltip prop="userPhone" label="联络人电话" width="200" />
+									<el-table-column show-overflow-tooltip prop="notificationStatus" label="通报状态" />
+									<el-table-column show-overflow-tooltip prop="takeMeasures" label="采取措施" />
+									<el-table-column show-overflow-tooltip prop="overdueStatus" label="超期状态" />
+									<el-table-column show-overflow-tooltip prop="acceptanceDate" label="受理日期" />
 									<el-table-column fixed="right" label="操作">
 										<template #default>
-											<el-button link type="primary" size="small">查看</el-button>
+											<el-button link type="primary" size="small" @click="handleDetails(scope.row.releasedId)">查看</el-button>
 										</template>
 									</el-table-column>
 								</el-table>
@@ -44,13 +44,13 @@
 						</el-popover>
 					</template>
 					<template #operate="scope">
-							<el-button type="primary" link @click="handleDetails(scope.row.rentalCompanyId)">
+							<el-button type="primary" link @click="handleDetails(scope.row.releasedId)">
 									查看
 							</el-button>
-							<el-button type="primary" link @click="handleEdit(scope.row.rentalCompanyId)">
+							<el-button type="primary" link @click="handleEdit(scope.row.releasedId)">
 									编辑
 							</el-button>
-							<el-button type="primary" link @click="handleDelete(scope.row.rentalCompanyId)">
+							<el-button type="primary" link @click="handleDelete(scope.row.releasedId)">
 									删除
 							</el-button>
 					</template>
@@ -67,7 +67,7 @@ import searchConfig from './config/search.config';
 import pageSearch from '@/components/components/pageSearch.vue';
 import useSystemStore from '@/store/main';
 import { outTypeList } from '@/libs/commonMeth';
-import { fetchNotificationMattersList } from '@/api/notificationInfoManage/myPublish';
+import { fetchNotificationMattersList, fetchReleaseDetail } from '@/api/notificationInfoManage/myPublish';
 // 通报整体状态
 const allNotificationStatus = outTypeList('bj_notify_os');
 // 通报事项类别
@@ -88,6 +88,7 @@ const pageSize = ref([10, 20, 30]);
 const tableData = ref([]);
 const tableListRef = ref();
 const router = useRouter();
+const mattersList = ref([])
 
 const getNotificationMattersList = async(id) => {
 	console.log(searchTableRef.value.searchForm);
@@ -99,7 +100,7 @@ const getNotificationMattersList = async(id) => {
 		releasedDate: searchTableRef.value.searchForm.releasedDate,
 	}
 	const response = await fetchNotificationMattersList(params)
-	console.log(response);
+	mattersList.value = response.data
 }
 
 const onClickNames = (id) => {
@@ -114,9 +115,11 @@ const handleEdit = async (id: string) => {
 };
 
 const handleDetails = async (id: string) => {
+	const response = await fetchReleaseDetail(id)
+	
 	router.push({
-    name: 'addPublish',
-    query: { type: 'detail' }
+    name: 'detailPublish',
+    query: { type: 'detail', info: JSON.stringify(response.data) }
   });
 };
 

src/views/notificationInfoManage/myReceptionDisposal/components/detail.vue

@@ -10,11 +10,14 @@
 		<QuestionInformation />
 		<!-- 水上交通安全通报信息 -->
 		<WaterSafetyInformation ref="noticeChildRef" />
-		<!-- 接收单位处置意见 -->
+		<OperationLog />
+		<!-- 接收单位处置意见 如果需要反馈则隐藏 -->
 		<ReceivingUnitOpinion />
-		<div class="flex">
+		<!-- 接收单位处理意见 -->
+		<ReceivingUnitDealOpinion />
+		<div class="book flex">
 			<div>水上交通安全相关通报文书：</div>
-			<div>《水上交通安全信息通报函》</div>
+			<div class="blue">《水上交通安全信息通报函》</div>
 		</div>
 		<!-- 底部按钮区 -->
 		<div class="form-actions">
@@ -31,8 +34,10 @@ import { ref, onMounted, onBeforeUnmount } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import PublishUnitInformation from '@/components/notificationDetailsParts/publishUnitInformation.vue';
 import QuestionInformation from '@/components/notificationDetailsParts/questionInformation.vue';
+import ReceivingUnitDealOpinion from './receivingUnitDealOpinion.vue';
 import WaterSafetyInformation from '@/components/notificationDetailsParts/waterSafetyInformation.vue';
 import ReceivingUnitOpinion from './receivingUnitOpinion.vue';
+import operationLog from '@/components/notificationDetailsParts/operationLog.vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -55,7 +60,7 @@ onMounted(async () => {
 				isEdit.value = true;
 				break;
 			case 'detail':
-				pageTitle.value = '水上交通安全信息发布与处置完成管理 查看发布';
+				pageTitle.value = '信息处置管理查看';
 				isDetail.value = true;
 				break;
 			default:
@@ -118,6 +123,11 @@ const handleSubmit = async () => {
 	}
 }
 
+.book {
+	font-size: 14px;
+	margin-top: 20px;
+}
+
 // 响应式调整
 @media (max-width: 768px) {
 	.form-container {