通报事项统计table 调整

src/views/notificationAnalysis/mattersStatistics/components/pageContent.vue

@@ -111,6 +111,7 @@
 											v-bind="itx"
 											:prop="itx.prop"
 											:sortable="itx.sortable || false"
+											:header-cell-style="{ background: 'red', color: '#606266' }"
 											:column-key="itx.prop"
 										/>
 										<!-- 倒序类 -->
@@ -213,7 +214,14 @@
 									:prop="itx.prop"
 									:sortable="itx.sortable || false"
 									:column-key="itx.prop"
-								/>
+								>
+									<template #header>
+										<!-- 注意：自己包一层 th，scope 里拿到 column 对象 -->
+										<th :title="itx.label" class="header-custom-th">
+											<span class="corner-blue" v-if="itx.isDiy"></span><span>{{ itx.label }}</span>
+										</th>
+									</template>
+								</el-table-column>
 								<!-- 倒序类 -->
 								<el-table-column
 									:fixed="itx.fixed"
@@ -419,7 +427,6 @@ watch(
 	() => pageList,
 	(newValue: any) => {
 		calcMergeMap();
-		props.contentConfig.propsList[2].children[0].label = '测试';
 		if (clearFlag.value) {
 			multipleTableRef.value!.clearSelection();
 			subtotal.value = 0;
@@ -531,4 +538,33 @@ defineExpose({
 :deep .el-table__footer {
 	width: 100% !important;
 }
+:deep .el-table__header .is-group .el-table__cell {
+	position: relative;
+}
+.header-custom-th {
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+}
+
+.corner-blue {
+	position: absolute;
+	left: 0px;
+	top: 0px;
+	border-style: solid;
+	border-width: 30px 30px 0 0; /* 三角大小 */
+	border-color: #1890ff transparent transparent transparent;
+	font-size: x-small;
+	color: #fff;
+	pointer-events: none;
+}
+.corner-blue::after {
+	content: '专';
+	position: absolute;
+	left: 2px;
+	top: -30px;
+	transform-origin: left top;
+	font-weight: 400;
+}
 </style>

src/views/notificationAnalysis/mattersStatistics/components/statisticsItem.vue

@@ -7,6 +7,7 @@
 		<div class="statistics-container">
 			<!-- 固定首列 -->
 			<div class="fixed-first start-card card-border-total">
+				<span class="corner-blue"></span>
 				<div class="card-title card-title-total">
 					<div>{{ dataList?.[0].title }}</div>
 				</div>
@@ -24,13 +25,8 @@
 			<!-- 可滚动内容 -->
 			<div class="scroll-content-wrapper">
 				<div class="scroll-content">
-					<div
-						v-for="(item, index) in dataList?.slice(1)"
-						:key="index"
-						class="start-card"
-						:class="item.isMain ? 'card-border-total' : 'card-border-point'"
-					>
-						<div class="card-title" :class="item.isMain ? 'card-title-total' : 'card-title-point'">
+					<div v-for="(item, index) in dataList?.slice(1)" :key="index" class="start-card card-border-point">
+						<div class="card-title card-title-point">
 							<div>{{ item.title }}</div>
 						</div>
 						<div class="card-body">
@@ -221,4 +217,24 @@ async function getReportItemTotalCardData() {
 .card-text {
 	color: #666666;
 }
+
+.corner-blue {
+	position: absolute;
+	left: 0px;
+	top: 0px;
+	border-style: solid;
+	border-width: 30px 30px 0 0; /* 三角大小 */
+	border-color: #1890ff transparent transparent transparent;
+	font-size: x-small;
+	color: #fff;
+	pointer-events: none;
+}
+.corner-blue::after {
+	content: '专';
+	position: absolute;
+	left: 2px;
+	top: -28px;
+	transform-origin: left top;
+	font-weight: 400;
+}
 </style>

src/views/notificationAnalysis/mattersStatistics/config/content.config.ts

@@ -80,13 +80,13 @@ const contentConfig = {
 				},
 				{
 					type: 'normal',
-					label: '长三角1',
+					label: '长三角',
 					prop: 'contactNumber',
 					width: 140,
 					children: [
 						{
 							type: 'custom',
-							label: '合计2',
+							label: '合计',
 							sortable: true,
 							prop: 'contactName',
 							slotName: 'contactName1',
@@ -104,8 +104,264 @@ const contentConfig = {
 			sortable: false,
 			width: 140,
 			children: [
-				{ type: 'normal', label: '暂无', sortable: false, prop: 'belongsDeptStr', width: 140 },
-				{ type: 'normal', label: '暂无', sortable: false, prop: 'position', width: 140 },
+				{
+					type: 'normal',
+					label: '涉客船舶相关违法违规行为(包括客船、12人以下小型涉客船艇、夜游船、电池动力客船等)',
+					sortable: false,
+					prop: 'belongsDeptStr',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '从事休闲活动船舶相关违法违规行为(包括游艇、乡镇船舶、农(自)用船等船舶)',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '渔船相关违法违规信息',
+					sortable: false,
+					isDiy: true,
+					prop: 'position',
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '水上新业态风险隐患信息',
+					sortable: false,
+					isDiy: true,
+					prop: 'position',
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '通航水域船舶碰撞桥梁垮塌风险',
+					isDiy: true,
+					sortable: false,
+					prop: 'position',
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '10人以上未按规定洗舱清舱作业',
+					isDiy: true,
+					sortable: false,
+					prop: 'position',
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '水上交通安全重大风险隐患',
+					isDiy: true,
+					sortable: false,
+					prop: 'position',
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '托运人托运危险货物相关违法违规信息',
+					isDiy: true,
+					sortable: false,
+					prop: 'position',
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '载运危险货物的船舶相关违法违规信息',
+					isDiy: true,
+					sortable: false,
+					prop: 'position',
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '船舶油料供给单位未按照有关安全和防治污染规范要求从事供受油作业，或者所提供的船舶油料超标的',
+					isDiy: true,
+					sortable: false,
+					prop: 'position',
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '船舶、码头等相关防污染违法违规行为',
+					isDiy: true,
+					sortable: false,
+					prop: 'position',
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label:
+						'船舶存在检验重大质量问题、因发生事故，影响船舶适航性能或者存在重大安全缺陷影响航行和环境安全，海事管理机构责成检验的',
+					sortable: false,
+					isDiy: true,
+					prop: 'position',
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '船舶建造、改造存在重大问题的',
+					isDiy: true,
+					sortable: false,
+					prop: 'position',
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '船舶修造企业相关违法违规行为',
+					isDiy: true,
+					sortable: false,
+					prop: 'position',
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '船舶登记相关违法违规行为',
+					isDiy: true,
+					sortable: false,
+					prop: 'position',
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '外国籍船舶进入领海未报告',
+					isDiy: true,
+					sortable: false,
+					prop: 'position',
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '船舶被滞留、禁止船舶进港或责令船舶离港的',
+					isDiy: true,
+					sortable: false,
+					prop: 'position',
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '船舶超核定载重线装载货物',
+					sortable: false,
+					isDiy: true,
+					prop: 'position',
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '船舶被列入或脱离重点跟踪船舶的',
+					isDiy: true,
+					sortable: false,
+					prop: 'position',
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '违规进入船舶危险密闭空间等专项行动中发现的违法违规信息',
+					isDiy: true,
+					sortable: false,
+					prop: 'position',
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '船舶注销登记相关信息',
+					isDiy: true,
+					sortable: false,
+					prop: 'position',
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '航运公司安全管理相关信息及突出违法行为',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '被列入或脱离重点跟踪航运公司的',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '船员违规获取船员证书或违规获取船员健康证明',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '船员培训机构相关违法违规信息',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label:
+						'船员用人单位或船员服务机构存在违反劳动和社会保障法律、行政法规规定的行为的、海员外派机构不及时准确报备外派海员信息',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '从事国内沿海及内河的船员服务相关业务违法违规行为处理',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '违法行为涉嫌构成犯罪，依法需要追究刑事责任的',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '水上无线电秩序干扰及违法行为',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '水上导助航设施标志异常情况',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '内地一香港一澳门三地通报事项',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '涉外水上交通安全信息',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
 			],
 		},
 		{
@@ -115,8 +371,126 @@ const contentConfig = {
 			sortable: false,
 			width: 140,
 			children: [
-				{ type: 'normal', label: '暂无', sortable: false, prop: 'belongsDeptStr', width: 140 },
-				{ type: 'normal', label: '暂无', sortable: false, prop: 'position', width: 140 },
+				{
+					type: 'normal',
+					label: '渤海重点水域、重点时段安全与防污染监管信息',
+					sortable: false,
+					prop: 'belongsDeptStr',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '涉客船舶安全监管风险隐患相关信息',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '电煤、LNG等能源物资运输船舶协同保障',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '环渤海水上交通异常情况',
+					sortable: false,
+					isDiy: true,
+					prop: 'position',
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '海上搜救应急相关信息',
+					sortable: false,
+					isDiy: true,
+					prop: 'position',
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '环渤海区域内航行作业船舶的安全与防止污染风险隐患信息',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '渤海海上石油勘探有关信息',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '海上平台作业船舶和油田作业船舶监管风险隐患',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '新能源汽车海运出口申报信息',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '船籍港管理相关信息',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '海砂采运船舶风险隐患信息',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '商渔共治相关通报信息',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '燃料供应单位和供应船舶相关信息',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '环渤海内支线集装箱船舶相关信息',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '渤西海事协同示范区相关通报事项',
+					sortable: false,
+					prop: 'position',
+					width: 140,
+					isDiy: true,
+				},
 			],
 		},
 		{
@@ -126,26 +500,232 @@ const contentConfig = {
 			sortable: false,
 			width: 140,
 			children: [
-				{ type: 'normal', label: '暂无', sortable: false, prop: 'belongsDeptStr', width: 140 },
-				{ type: 'normal', label: '暂无', sortable: false, prop: 'position', width: 140 },
+				{
+					type: 'normal',
+					label: '外国籍船舶因紧急情况进入琼州海峡水域或违反《外国籍非军用船舶通过琼州海峡管理规则',
+					sortable: false,
+					prop: 'belongsDeptStr',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '琼州海峡客滚船常见违法行为',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '琼州海峡水域过路船舶安全信息',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '琼州海峡水域船舶载运危险货物进出海口港、徐闻港、北海港许可信息',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '暂琼州海峡水域污染物接收单位防污染违法违规信息',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '琼州海峡客滚船监管信息',
+					sortable: false,
+					isDiy: true,
+					prop: 'position',
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '违反琼州海峡定线制航行规则',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '违反琼州海峡报告制航行规则',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '琼州海峡水域内运动、娱乐船艇违法违规信息',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '琼州海峡水域发现涉嫌走私或非法运输的违法信息',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '为琼州海峡客滚船提供检修检测的服务机构违规开展检修检测服务信息',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '琼州海峡发现“三无”船舶违法行为',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '琼州海峡海上油气平台防台人员大规模撤离',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '游艇码头的港口污染应急防治能力不足',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '渔船点检未应答',
+					sortable: false,
+					isDiy: true,
+					prop: 'position',
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '在琼州海峡定线制水域下渔网、捕鱼',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
 			],
 		},
 		{
 			type: 'normal',
-			label: '珠三角2',
+			label: '珠三角',
 			prop: 'contactName',
 			sortable: false,
 			width: 140,
 			children: [
 				{
 					type: 'custom',
-					label: '暂无',
+					label: '未经许可的龙舟活动影响通航安全',
 					sortable: false,
 					slotName: 'contactName2',
 					prop: 'belongsDeptStr',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '船籍港管理相关信息',
+					sortable: false,
+					isDiy: true,
+					prop: 'position',
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '桥区水域相关违法违规信息',
+					sortable: false,
+					isDiy: true,
+					prop: 'position',
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '水上水下活动安全信息通报',
+					sortable: false,
+					isDiy: true,
+					prop: 'position',
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '未遵守港珠澳大桥广东水域通航安全管理办法规定',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '渡运安全生产隐患',
+					sortable: false,
+					isDiy: true,
+					prop: 'position',
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '未经许可向海洋倾倒废弃物',
+					isDiy: true,
+					sortable: false,
+					prop: 'position',
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '未按规定落实防台风预案和要求的',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '河道非法采砂相关违法违规行为',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '船舶违反通航建筑物运行相关规定',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '船舶非法从事洗砂洗泥活动相关违法违规行为',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
 					width: 140,
 				},
-				{ type: 'normal', label: '暂无', sortable: false, prop: 'position', width: 140 },
 			],
 		},
 		{
@@ -155,8 +735,70 @@ const contentConfig = {
 			sortable: false,
 			width: 140,
 			children: [
-				{ type: 'normal', label: '暂无', sortable: false, prop: 'belongsDeptStr', width: 140 },
-				{ type: 'normal', label: '暂无', sortable: false, prop: 'position', width: 140 },
+				{
+					type: 'normal',
+					label: '国际邮轮、省际客船相关违法违规行为',
+					sortable: false,
+					prop: 'belongsDeptStr',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '与公安机关、海警机构、法院相关信息通报',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '水上水下施工作业和活动相关违法违规信息',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '引航员在引领船舶期间未按规定操纵船舶',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '船舶试航、拖航作业相关信息通报',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '船舶不符合安全开航条件冒险开航等违法违规行为',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '码头岸电配备、使用和供应方面违法违规信息的',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
+				{
+					type: 'normal',
+					label: '载运食用油船舶违法违规信息',
+					sortable: false,
+					prop: 'position',
+					isDiy: true,
+					width: 140,
+				},
 			],
 		},
 	],

src/views/notificationAnalysis/situationOverdueStatistics/components/industryOverdueStatistics.vue

@@ -24,13 +24,8 @@
 			<!-- 可滚动内容 -->
 			<div class="scroll-content-wrapper">
 				<div class="scroll-content">
-					<div
-						v-for="(item, index) in dataList?.slice(1)"
-						:key="index"
-						class="start-card"
-						:class="item.isMain ? 'card-border-total' : 'card-border-point'"
-					>
-						<div class="card-title" :class="item.isMain ? 'card-title-total' : 'card-title-point'">
+					<div v-for="(item, index) in dataList?.slice(1)" :key="index" class="start-card card-border-point">
+						<div class="card-title card-title-point">
 							<div>{{ item.title }}</div>
 						</div>
 						<div class="card-body">

src/views/notificationAnalysis/situationOverdueStatistics/components/overdueStatistics.vue

@@ -24,13 +24,8 @@
 			<!-- 可滚动内容 -->
 			<div class="scroll-content-wrapper">
 				<div class="scroll-content">
-					<div
-						v-for="(item, index) in dataList?.slice(1)"
-						:key="index"
-						class="start-card"
-						:class="item.isMain ? 'card-border-total' : 'card-border-point'"
-					>
-						<div class="card-title" :class="item.isMain ? 'card-title-total' : 'card-title-point'">
+					<div v-for="(item, index) in dataList?.slice(1)" :key="index" class="start-card card-border-point">
+						<div class="card-title card-title-point">
 							<div>{{ item.title }}</div>
 						</div>
 						<div class="card-body">