bj-maritime-dcds-web/src/views/notificationAnalysis/releaseReceiptStatistics/components/statisticalReport.vue

<template>
	<div style="background-color: #fff">
		<div class="title">2025年1月-2025年2月通报事项统计</div>

		<div>
			<el-table
				v-loading="isLoading"
				:data="tableData"
				border
				width="100%"
				row-key="id"
				:span-method="objectSpanMethod"
				@expand-change="expandChange"
			>
				<template v-for="item in columns">
					<template v-if="item.id === 'unit'">
						<el-table-column :label="item.name" :key="item.id" align="center" fixed>
							<el-table-column type="" prop="unitType" :width="110" fixed label="类别" align="center">
								<template #default="{ row }">
									{{ UnitType[row.unitType] }}
								</template>
							</el-table-column>
							<el-table-column prop="unit" fixed align="center" :width="185" label="名称">
								<template #default="scope">
									<span
										v-if="clickableTitle(scope.row)"
										class="unit-name"
										@click="viewDetail(scope.row.unit)"
										>{{ scope.row.unit }}</span
									>
									<span v-else>{{ scope.row.unit }}</span>
								</template>
							</el-table-column>
						</el-table-column>
					</template>
					<template v-else-if="item.children">
						<el-table-column
							:label="item.name"
							:key="item.id"
							align="center"
							:prop="item.id"
							:fixed="item.id === 'unit'"
						>
							<template v-for="itx in item.children">
								<template v-if="itx?.children">
									<el-table-column :label="itx?.name" :key="itx?.id" align="center">
										<template v-for="it in itx?.children" :key="it?.id">
											<el-table-column
												:label="it?.name"
												align="center"
												:sortable="it?.sortable"
												:prop="it.id"
											/>
										</template>
									</el-table-column>
								</template>
								<el-table-column
									v-else
									:label="itx?.name"
									:key="itx?.id"
									align="center"
									:sortable="itx?.sortable"
									:prop="itx?.id"
								/>
							</template>
						</el-table-column>
					</template>
					<el-table-column v-else :label="item.name" :key="item.id" align="center" :prop="item.id" />
				</template>
			</el-table>
		</div>
	</div>
</template>
<script setup lang="ts">
import { defineProps } from 'vue';
import type { TableColumnCtx } from 'element-plus';
interface Column {
	id: string;
	name: string;
	fixed?: boolean;
	sortable?: boolean;
	children?: Array<Column>;
}

// 定义Props
const props = defineProps({
	// 表头数据（columns格式）
	columns: {
		type: Array<Column>,
		required: true,
		default: () => [],
	},
	// 表格数据
	tableData: {
		type: Array,
		required: true,
		default: () => [],
	},
	// 表格边框
	border: {
		type: Boolean,
		default: true,
	},
});
interface SpanMethodProps {
	row: ReportList;
	column: TableColumnCtx<ReportList>;
	rowIndex: number;
	columnIndex: number;
}
interface ReportList {
	id: number;
	unit: string;
	unitType: string;
	total: string;
	proportion: string;
	shanghaiMaritimeTotal: string;
	shanghaiMaritimeProportion: string;
	tinajinMaritimeTotal: string;
	tinajinMaritimeProportion: string;
	liaoningMaritimeTotal: string;
	liaoningMaritimeProportion: string;
	hebeiMaritimeTotal: string;
	hebeiMaritimeProportion: string;
	shandongMaritimeTotal: string;
	shandongMaritimeProportion: string;
	departTransTotal: string;
	departTransProportion: string;
	beijingDepartTransTotal: string;
	beijingDepartTransProportion: string;
	shanghaiDepartTransTotal: string;
	shanghaiDepartTransProportion: string;
	hebeiDepartTransTotal: string;
	hebeiDepartTransProportion: string;
	shanxiDepartTransTotal: string;
	shanxiDepartTransProportion: string;
	neimengDepartTransTotal: string;
	neimengDepartTransProportion: string;
	chinaClassificationSocietyTotal: string;
	chinaClassificationSocietyProportion: string;
	yangtzeRiverTotal: string;
	yangtzeRiverProportion: string;
	PearlRiverTotal: string;
	PearlRiverProportion: string;
	children?: Array<ReportList>;
}
const groupCounts = ref({
	release: 0,
	releaseRowIndex: 0,
	receive: 0,
	receiveRowIndex: 0,
	measure: 0,
	measureRowIndex: 0,
});
const UnitType = {
	release: '发布通报',
	receive: '接收通报',
	measure: '采取措施',
};

const clickableTitle = (row: ReportList) => !['总数', '占比', '环比', '同比'].includes(row.unit);

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
	if (columnIndex !== 0) return;
	if (row.unitType === 'release') {
		const firstIndex = tableData.value.findIndex(item => item.unitType === 'release');

		if (rowIndex === firstIndex) {
			const rowspan = groupCounts.value.release - 1;
			return {
				rowspan,
				colspan: 1,
			};
		} else {
			return {
				rowspan: 0,
				colspan: 0,
			};
		}
	}
	if (row.unitType === 'receive') {
		const firstIndex = tableData.value.findIndex(item => item.unitType === 'receive');

		if (rowIndex === groupCounts.value.releaseRowIndex) {
			return {
				rowspan: groupCounts.value.receive - 1,
				colspan: 1,
			};
		} else {
			return {
				rowspan: 0,
				colspan: 0,
			};
		}
	}
	if (row.unitType === 'measure') {
		const firstIndex = tableData.value.findIndex(item => item.unitType === 'measure');
		if (rowIndex === groupCounts.value.releaseRowIndex + groupCounts.value.receiveRowIndex) {
			const rowspan = groupCounts.value.measure;
			return {
				rowspan,
				colspan: 1,
			};
		} else {
			return {
				rowspan: 0,
				colspan: 0,
			};
		}
	}
};
const expandChange = (row: ReportList, expandedRows: any[]) => {
	if (expandedRows) {
		groupCounts.value[row.unitType] += row?.children?.length;
	} else {
		const count = row?.children?.length as number;
		groupCounts.value[row.unitType] = groupCounts.value[row.unitType] - count;
	}
};

const tableData = ref([
	{
		id: 1,
		unit: '总数',
		unitType: 'release',
		total: '10050',
		proportion: '68%',
		shanghaiMaritimeTotal: '5672',
		shanghaiMaritimeProportion: '18%',
		tinajinMaritimeTotal: '5672',
		tinajinMaritimeProportion: '18%',
		liaoningMaritimeTotal: '5672',
		liaoningMaritimeProportion: '18%',
		hebeiMaritimeTotal: '5672',
		hebeiMaritimeProportion: '18%',
		shandongMaritimeTotal: '5672',
		shandongMaritimeProportion: '18%',
		departTransTotal: '10050',
		departTransProportion: '68%',
		beijingDepartTransTotal: '5672',
		beijingDepartTransProportion: '18%',
		shanghaiDepartTransTotal: '5672',
		shanghaiDepartTransProportion: '18%',
		hebeiDepartTransTotal: '5672',
		hebeiDepartTransProportion: '18%',
		shanxiDepartTransTotal: '5672',
		shanxiDepartTransProportion: '18%',
		neimengDepartTransTotal: '5672',
		neimengDepartTransProportion: '18%',
		chinaClassificationSocietyTotal: '10050',
		chinaClassificationSocietyProportion: '68%',
		yangtzeRiverTotal: '10050',
		yangtzeRiverProportion: '68%',
		PearlRiverTotal: '10050',
		PearlRiverProportion: '68%',
	},
	{
		id: 2,
		unit: '直属海事管理机构',
		unitType: 'release',
		total: '10050',
		proportion: '68%',
		shanghaiMaritimeTotal: '5672',
		shanghaiMaritimeProportion: '18%',
		tinajinMaritimeTotal: '5672',
		tinajinMaritimeProportion: '18%',
		liaoningMaritimeTotal: '5672',
		liaoningMaritimeProportion: '18%',
		hebeiMaritimeTotal: '5672',
		hebeiMaritimeProportion: '18%',
		shandongMaritimeTotal: '5672',
		shandongMaritimeProportion: '18%',
		departTransTotal: '10050',
		departTransProportion: '68%',
		beijingDepartTransTotal: '5672',
		beijingDepartTransProportion: '18%',
		shanghaiDepartTransTotal: '5672',
		shanghaiDepartTransProportion: '18%',
		hebeiDepartTransTotal: '5672',
		hebeiDepartTransProportion: '18%',
		shanxiDepartTransTotal: '5672',
		shanxiDepartTransProportion: '18%',
		neimengDepartTransTotal: '5672',
		neimengDepartTransProportion: '18%',
		chinaClassificationSocietyTotal: '10050',
		chinaClassificationSocietyProportion: '68%',
		yangtzeRiverTotal: '10050',
		yangtzeRiverProportion: '68%',
		PearlRiverTotal: '10050',
		PearlRiverProportion: '68%',
		children: [
			{
				id: 21,
				unit: '上海海事局',
				unitType: 'release',
				total: '10050',
				proportion: '68%',
				shanghaiMaritimeTotal: '5672',
				shanghaiMaritimeProportion: '18%',
				tinajinMaritimeTotal: '5672',
				tinajinMaritimeProportion: '18%',
				liaoningMaritimeTotal: '5672',
				liaoningMaritimeProportion: '18%',
				hebeiMaritimeTotal: '5672',
				hebeiMaritimeProportion: '18%',
				shandongMaritimeTotal: '5672',
				shandongMaritimeProportion: '18%',
				departTransTotal: '10050',
				departTransProportion: '68%',
				beijingDepartTransTotal: '5672',
				beijingDepartTransProportion: '18%',
				shanghaiDepartTransTotal: '5672',
				shanghaiDepartTransProportion: '18%',
				hebeiDepartTransTotal: '5672',
				hebeiDepartTransProportion: '18%',
				shanxiDepartTransTotal: '5672',
				shanxiDepartTransProportion: '18%',
				neimengDepartTransTotal: '5672',
				neimengDepartTransProportion: '18%',
				chinaClassificationSocietyTotal: '10050',
				chinaClassificationSocietyProportion: '68%',
				yangtzeRiverTotal: '10050',
				yangtzeRiverProportion: '68%',
				PearlRiverTotal: '10050',
				PearlRiverProportion: '68%',
			},
		],
	},
	{
		id: 3,
		unit: '总数',
		unitType: 'receive',
		total: '10050',
		proportion: '68%',
		shanghaiMaritimeTotal: '5672',
		shanghaiMaritimeProportion: '18%',
		tinajinMaritimeTotal: '5672',
		tinajinMaritimeProportion: '18%',
		liaoningMaritimeTotal: '5672',
		liaoningMaritimeProportion: '18%',
		hebeiMaritimeTotal: '5672',
		hebeiMaritimeProportion: '18%',
		shandongMaritimeTotal: '5672',
		shandongMaritimeProportion: '18%',
		departTransTotal: '10050',
		departTransProportion: '68%',
		beijingDepartTransTotal: '5672',
		beijingDepartTransProportion: '18%',
		shanghaiDepartTransTotal: '5672',
		shanghaiDepartTransProportion: '18%',
		hebeiDepartTransTotal: '5672',
		hebeiDepartTransProportion: '18%',
		shanxiDepartTransTotal: '5672',
		shanxiDepartTransProportion: '18%',
		neimengDepartTransTotal: '5672',
		neimengDepartTransProportion: '18%',
		chinaClassificationSocietyTotal: '10050',
		chinaClassificationSocietyProportion: '68%',
		yangtzeRiverTotal: '10050',
		yangtzeRiverProportion: '68%',
		PearlRiverTotal: '10050',
		PearlRiverProportion: '68%',
	},
	{
		id: 4,
		unit: '直属海事管理机构',
		unitType: 'receive',
		total: '10050',
		proportion: '68%',
		shanghaiMaritimeTotal: '5672',
		shanghaiMaritimeProportion: '18%',
		tinajinMaritimeTotal: '5672',
		tinajinMaritimeProportion: '18%',
		liaoningMaritimeTotal: '5672',
		liaoningMaritimeProportion: '18%',
		hebeiMaritimeTotal: '5672',
		hebeiMaritimeProportion: '18%',
		shandongMaritimeTotal: '5672',
		shandongMaritimeProportion: '18%',
		departTransTotal: '10050',
		departTransProportion: '68%',
		beijingDepartTransTotal: '5672',
		beijingDepartTransProportion: '18%',
		shanghaiDepartTransTotal: '5672',
		shanghaiDepartTransProportion: '18%',
		hebeiDepartTransTotal: '5672',
		hebeiDepartTransProportion: '18%',
		shanxiDepartTransTotal: '5672',
		shanxiDepartTransProportion: '18%',
		neimengDepartTransTotal: '5672',
		neimengDepartTransProportion: '18%',
		chinaClassificationSocietyTotal: '10050',
		chinaClassificationSocietyProportion: '68%',
		yangtzeRiverTotal: '10050',
		yangtzeRiverProportion: '68%',
		PearlRiverTotal: '10050',
		PearlRiverProportion: '68%',
		children: [
			{
				id: 41,
				unit: '上海海事局',
				unitType: 'receive',
				total: '10050',
				proportion: '68%',
				shanghaiMaritimeTotal: '5672',
				shanghaiMaritimeProportion: '18%',
				tinajinMaritimeTotal: '5672',
				tinajinMaritimeProportion: '18%',
				liaoningMaritimeTotal: '5672',
				liaoningMaritimeProportion: '18%',
				hebeiMaritimeTotal: '5672',
				hebeiMaritimeProportion: '18%',
				shandongMaritimeTotal: '5672',
				shandongMaritimeProportion: '18%',
				departTransTotal: '10050',
				departTransProportion: '68%',
				beijingDepartTransTotal: '5672',
				beijingDepartTransProportion: '18%',
				shanghaiDepartTransTotal: '5672',
				shanghaiDepartTransProportion: '18%',
				hebeiDepartTransTotal: '5672',
				hebeiDepartTransProportion: '18%',
				shanxiDepartTransTotal: '5672',
				shanxiDepartTransProportion: '18%',
				neimengDepartTransTotal: '5672',
				neimengDepartTransProportion: '18%',
				chinaClassificationSocietyTotal: '10050',
				chinaClassificationSocietyProportion: '68%',
				yangtzeRiverTotal: '10050',
				yangtzeRiverProportion: '68%',
				PearlRiverTotal: '10050',
				PearlRiverProportion: '68%',
			},
		],
	},
	{
		id: 5,
		unit: '总数',
		unitType: 'measure',
		total: '10050',
		proportion: '68%',
		shanghaiMaritimeTotal: '5672',
		shanghaiMaritimeProportion: '18%',
		tinajinMaritimeTotal: '5672',
		tinajinMaritimeProportion: '18%',
		liaoningMaritimeTotal: '5672',
		liaoningMaritimeProportion: '18%',
		hebeiMaritimeTotal: '5672',
		hebeiMaritimeProportion: '18%',
		shandongMaritimeTotal: '5672',
		shandongMaritimeProportion: '18%',
		departTransTotal: '10050',
		departTransProportion: '68%',
		beijingDepartTransTotal: '5672',
		beijingDepartTransProportion: '18%',
		shanghaiDepartTransTotal: '5672',
		shanghaiDepartTransProportion: '18%',
		hebeiDepartTransTotal: '5672',
		hebeiDepartTransProportion: '18%',
		shanxiDepartTransTotal: '5672',
		shanxiDepartTransProportion: '18%',
		neimengDepartTransTotal: '5672',
		neimengDepartTransProportion: '18%',
		chinaClassificationSocietyTotal: '10050',
		chinaClassificationSocietyProportion: '68%',
		yangtzeRiverTotal: '10050',
		yangtzeRiverProportion: '68%',
		PearlRiverTotal: '10050',
		PearlRiverProportion: '68%',
	},
	{
		id: 6,
		unit: '直属海事管理机构',
		unitType: 'measure',
		total: '10050',
		proportion: '68%',
		shanghaiMaritimeTotal: '5672',
		shanghaiMaritimeProportion: '18%',
		tinajinMaritimeTotal: '5672',
		tinajinMaritimeProportion: '18%',
		liaoningMaritimeTotal: '5672',
		liaoningMaritimeProportion: '18%',
		hebeiMaritimeTotal: '5672',
		hebeiMaritimeProportion: '18%',
		shandongMaritimeTotal: '5672',
		shandongMaritimeProportion: '18%',
		departTransTotal: '10050',
		departTransProportion: '68%',
		beijingDepartTransTotal: '5672',
		beijingDepartTransProportion: '18%',
		shanghaiDepartTransTotal: '5672',
		shanghaiDepartTransProportion: '18%',
		hebeiDepartTransTotal: '5672',
		hebeiDepartTransProportion: '18%',
		shanxiDepartTransTotal: '5672',
		shanxiDepartTransProportion: '18%',
		neimengDepartTransTotal: '5672',
		neimengDepartTransProportion: '18%',
		chinaClassificationSocietyTotal: '10050',
		chinaClassificationSocietyProportion: '68%',
		yangtzeRiverTotal: '10050',
		yangtzeRiverProportion: '68%',
		PearlRiverTotal: '10050',
		PearlRiverProportion: '68%',
		children: [
			{
				id: 61,
				unit: '上海海事局',
				unitType: 'measure',
				total: '10050',
				proportion: '68%',
				shanghaiMaritimeTotal: '5672',
				shanghaiMaritimeProportion: '18%',
				tinajinMaritimeTotal: '5672',
				tinajinMaritimeProportion: '18%',
				liaoningMaritimeTotal: '5672',
				liaoningMaritimeProportion: '18%',
				hebeiMaritimeTotal: '5672',
				hebeiMaritimeProportion: '18%',
				shandongMaritimeTotal: '5672',
				shandongMaritimeProportion: '18%',
				departTransTotal: '10050',
				departTransProportion: '68%',
				beijingDepartTransTotal: '5672',
				beijingDepartTransProportion: '18%',
				shanghaiDepartTransTotal: '5672',
				shanghaiDepartTransProportion: '18%',
				hebeiDepartTransTotal: '5672',
				hebeiDepartTransProportion: '18%',
				shanxiDepartTransTotal: '5672',
				shanxiDepartTransProportion: '18%',
				neimengDepartTransTotal: '5672',
				neimengDepartTransProportion: '18%',
				chinaClassificationSocietyTotal: '10050',
				chinaClassificationSocietyProportion: '68%',
				yangtzeRiverTotal: '10050',
				yangtzeRiverProportion: '68%',
				PearlRiverTotal: '10050',
				PearlRiverProportion: '68%',
			},
		],
	},
]);
const isLoading = ref(false);

const calculateGroupCounts = () => {
	isLoading.value = true;
	tableData.value.forEach((item: ReportList) => {
		groupCounts.value[`${item.unitType}RowIndex`]++;
		groupCounts.value[item.unitType]++;
		if (item?.children) {
			item.children.forEach((itx: ReportList) => {
				groupCounts.value[`${item.unitType}RowIndex`]++;

				groupCounts.value[itx.unitType]++;
				if (itx?.children) {
					itx.children.forEach((it: ReportList) => {
						groupCounts.value[`${item.unitType}RowIndex`]++;

						groupCounts.value[it.unitType]++;
					});
				}
			});
		}
	});
	isLoading.value = false;
};
calculateGroupCounts();
const columns = ref([
	{
		id: 'unit',
		name: '单位',
	},
	{
		id: 'directlyAdministration',
		name: '直属海事局',
		children: [
			{
				id: 'total',
				name: '合计',
				sortable: true,
			},
			{
				id: 'proportion',
				name: '占比',
				sortable: true,
			},
			{
				id: 'shanghai',
				name: '上海海事局',
				children: [
					{
						id: 'shanghaiMaritimeTotal',
						name: '合计',
						sortable: true,
					},
					{
						id: 'shanghaiMaritimeProportion',
						name: '占比',
						sortable: true,
					},
				],
			},
			{
				id: 'tianjin',
				name: '天津海事局',
				children: [
					{
						id: 'tinajinMaritimeTotal',
						name: '合计',
						sortable: true,
					},
					{
						id: 'tinajinMaritimeProportion',
						name: '占比',
						sortable: true,
					},
				],
			},
			{
				id: 'liaoning',
				name: '辽宁海事局',
				children: [
					{
						id: 'liaoningMaritimeTotal',
						name: '合计',
						sortable: true,
					},
					{
						id: 'liaoningMaritimeProportion',
						name: '占比',
						sortable: true,
					},
				],
			},
			{
				id: 'hebei',
				name: '河北海事局',
				children: [
					{
						id: 'hebeiMaritimeTotal',
						name: '合计',
						sortable: true,
					},
					{
						id: 'hebeiMaritimeProportion',
						name: '占比',
						sortable: true,
					},
				],
			},
			{
				id: 'shandong',
				name: '山东海事局',
				children: [
					{
						id: 'shandongMaritimeTotal',
						name: '合计',
						sortable: true,
					},
					{
						id: 'shandongMaritimeProportion',
						name: '占比',
						sortable: true,
					},
				],
			},
		],
	},
	{
		id: 'departTrans',
		name: '交通运输厅海事局',
		children: [
			{
				id: 'departTransTotal',
				name: '合计',
				sortable: true,
			},
			{
				id: 'departTransProportion',
				name: '占比',
				sortable: true,
			},
			{
				id: 'beijing',
				name: '北京市交通委员会',
				children: [
					{
						id: 'beijingDepartTransTotal',
						name: '合计',
						sortable: true,
					},
					{
						id: 'beijingDepartTransProportion',
						name: '占比',
						sortable: true,
					},
				],
			},
			{
				id: 'shanghai',
				name: '上海市交通委员会',
				children: [
					{
						id: 'shanghaiDepartTransTotal',
						name: '合计',
						sortable: true,
					},
					{
						id: 'shanghaiDepartTransProportion',
						name: '占比',
						sortable: true,
					},
				],
			},
			{
				id: 'hebei',
				name: '河北省交通运输厅',
				children: [
					{
						id: 'hebeiDepartTransTotal',
						name: '合计',
						sortable: true,
					},
					{
						id: 'hebeiDepartTransProportion',
						name: '占比',
						sortable: true,
					},
				],
			},
			{
				id: 'shanxi',
				name: '山西省交通运输厅',
				children: [
					{
						id: 'shanxiDepartTransTotal',
						name: '合计',
						sortable: true,
					},
					{
						id: 'shanxiDepartTransProportion',
						name: '占比',
						sortable: true,
					},
				],
			},
			{
				id: 'neimeng',
				name: '内蒙古自治区交通运输厅',
				children: [
					{
						id: 'neimengDepartTransTotal',
						name: '合计',
						sortable: true,
					},
					{
						id: 'neimengDepartTransProportion',
						name: '占比',
						sortable: true,
					},
				],
			},
		],
	},
	{
		id: 'chinaClassificationSociety',
		name: '中国船级社',
		children: [
			{
				id: 'chinaClassificationSocietyTotal',
				name: '合计',
				sortable: true,
			},
			{
				id: 'chinaClassificationSocietyProportion',
				name: '占比',
				sortable: true,
			},
		],
	},
	{
		id: 'yangtzeRiver',
		name: '长江航务管理局',
		children: [
			{
				id: 'yangtzeRiverProportion',
				name: '合计',
				sortable: true,
			},
			{
				id: 'yangtzeRiverProportion',
				name: '占比',
				sortable: true,
			},
		],
	},
	{
		id: 'pearlRiver',
		name: '珠江航务管理局',
		children: [
			{
				id: 'pearlRiverTotal',
				name: '合计',
				sortable: true,
			},
			{
				id: 'pearlRiverProportion',
				name: '占比',
				sortable: true,
			},
		],
	},
]);
const router = useRouter();
const viewDetail = (unit: string) => {
	router.push({
		path: '/notificationAnalysis/notificationReleaseReceiptDetail',
		query: {
			unit,
		},
	});
};
</script>
<style scoped lang="scss">
.title {
	font-weight: 600;
	padding: 10px;
}
.unit-name {
	cursor: pointer;
	color: #409eff;
}
</style>