bj-maritime-dcds-web/src/views/notificationAnalysis/situationOverdueStatistics/index.vue

<template>
	<div class="sensitive-words flex">
		<div class="table-box">
			<pageSearch ref="searchTableRef" :searchConfig="searchConfig" @handleSure="handerSearch" />
			<overdueStatistics></overdueStatistics>
			<industryOverdueStatistics></industryOverdueStatistics>
			<statisticalChartPie class="mt20"></statisticalChartPie>
			<statisticalChartBar class="mt20"></statisticalChartBar>
			<pageContent
				ref="tableListRef"
				:total="total"
				v-loading="loading"
				:contentConfig="contentConfig"
				:pageList="tableData"
			>
				<!-- 通报完成情况 -->

				<!-- 已完成发布数量（件） -->
				<template #beenPublishCount="scope">
					<el-link @click="handleUnitdetail(scope.row.unitName)" type="primary">{{
						scope.row.beenPublishCount
					}}</el-link>
				</template>
				<!-- 已完成接收数量（件） -->
				<template #beenReceiveCount="scope">
					<el-link @click="handleUnitdetail(scope.row.unitName)" type="primary">{{
						scope.row.beenReceiveCount
					}}</el-link>
				</template>
				<!-- 已完成处置反馈数量(件) -->
				<template #beenFeedbackCount="scope">
					<el-link @click="handleUnitdetail(scope.row.unitName)" type="primary">{{
						scope.row.beenFeedbackCount
					}}</el-link>
				</template>
				<!-- 已完成处置处理数量(件) -->
				<template #beenHandleCount="scope">
					<el-link @click="handleUnitdetail(scope.row.unitName)" type="primary">{{
						scope.row.beenHandleCount
					}}</el-link>
				</template>
				<!-- 已结案（件） -->
				<template #beenClosedCount="scope">
					<el-link @click="handleUnitdetail(scope.row.unitName)" type="primary">{{
						scope.row.beenClosedCount
					}}</el-link>
				</template>

				<!-- 通报未完成情况 -->

				<!-- 未完成接收数量（件） -->
				<template #notReceiveCount="scope">
					<el-link @click="handleUnitdetail(scope.row.unitName)" type="primary">{{
						scope.row.notReceiveCount
					}}</el-link>
				</template>
				<!-- 未完成处置反馈数量（件） -->
				<template #notFeedbackCount="scope">
					<el-link @click="handleUnitdetail(scope.row.unitName)" type="primary">{{
						scope.row.notFeedbackCount
					}}</el-link>
				</template>
				<!-- 未完成处置处理数量(件) -->
				<template #notHandleCount="scope">
					<el-link @click="handleUnitdetail(scope.row.unitName)" type="primary">{{
						scope.row.notHandleCount
					}}</el-link>
				</template>

				<!-- 通报未完成情况 -->

				<!-- 正常接收（件）-->
				<template #noOverdueCount="scope">
					<el-link @click="handleUnitdetail(scope.row.unitName)" type="primary">{{
						scope.row.noOverdueCount
					}}</el-link>
				</template>
				<!-- 接收超期（件） -->
				<template #receiveOverdueCount="scope">
					<el-link @click="handleUnitdetail(scope.row.unitName)" type="primary">{{
						scope.row.receiveOverdueCount
					}}</el-link>
				</template>
				<!-- 处理超期（件） -->
				<template #handleOverdueCount="scope">
					<el-link @click="handleUnitdetail(scope.row.unitName)" type="primary">{{
						scope.row.handleOverdueCount
					}}</el-link>
				</template>
				<!-- 处置完成超期（件） -->
				<template #closedOverdueCount="scope">
					<el-link @click="handleUnitdetail(scope.row.unitName)" type="primary">{{
						scope.row.closedOverdueCount
					}}</el-link>
				</template>
			</pageContent>
		</div>
	</div>
</template>

<script setup lang="ts">
import contentConfig from './config/content.config';
import pageContent from './components/pageContent.vue';
import searchConfig from './config/search.config';
import pageSearch from './components/pageSearch.vue';
import overdueStatistics from './components/overdueStatistics.vue';
import industryOverdueStatistics from './components/industryOverdueStatistics.vue';
import statisticalChartPie from './components/statisticalChartPie.vue';
import statisticalChartBar from './components/statisticalChartBar.vue';
import { useRouter } from 'vue-router';
import useSystemStore from '@/store/main';
import { nextTick, onMounted } from 'vue';

import {
	bj_notification_type,
	overdueStatus,
	notificationStatus,
	bj_lssuing_unit,
	categoryOnm,
	isFeedback,
	takeMeasures,
} from '@/plugins/dictData';
const router = useRouter();
// 使用pinia数据
const systemStore = useSystemStore();
const { pageList, resDate, searchObj } = storeToRefs(systemStore);
const statisticsItemData = ref<any>();
watch(
	[() => pageList, () => searchObj.value],
	([newPageList, newSearchObj], [oldPageList, oldSearchObj]) => {
		// console.log(newSearchObj);
		// statisticsItemData.value = resDate.value;
	},
	{ deep: true }
);

const total = ref(0);
const pageSize = ref([10, 20, 30]);
const tableData = ref([]);
const tableListRef: any = ref<InstanceType<typeof pageContent>>();

const activeTab = ref('1');
const searchTableRef: any = ref<InstanceType<typeof pageSearch>>();
// 操作弹框
import usePageModal from '@/components/components/hooks/usePageDetails';
const { modalRef } = usePageModal();

const loading = ref(false);

const handleUnitdetail = async (id?: string) => {
	router.push({
		path: '/notificationAnalysis/situationOverdueStatisticsDetail',
		query: { id: id },
	});
};
// 查询回调 请求参数 并去获取图表及统计
const handerSearch = async data => {
	console.log('data', data);
};

onMounted(() => {});
const handleDownload = async () => {
	ElMessageBox.confirm(`确定要导出所选数据信息？`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		distinguishCancelAndClose: true,
	})
		.then(async () => {
			const isLoading = ElLoading.service({
				lock: true,
				text: 'Loading',
				background: 'rgba(0, 0, 0, 0.7)',
			});
			let data: any = {};
			// 获取表格数据
			// data = cfgSelection.value;
			try {
				// 创建 Blob 对象
				const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
				// 获取列名
				const headers = [
					{ key: 'uuid', label: '目标设备码' },
					{ key: 'client_ip', label: '目标设备IP' },
					{ key: 'type', label: '适用平台' },
					{ key: 'remark', label: '目标设备名称' },
				];
				const headerRow = headers.map(header => header.label).join(',');
				// 构造 CSV 内容
				const csvContent = [
					headerRow,
					...data.map((row: any) => headers.map(header => row[header.key]).join(',')),
				].join('\n');

				// 构造文件名
				const filename = `${timestamp}.csv`; // 指定下载文件的名称;
				// 创建 Blob 对象
				const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8' });
				// 创建下载链接
				const url = URL.createObjectURL(blob);
				const a = document.createElement('a');
				a.href = url;
				a.download = filename;
				a.click();
				URL.revokeObjectURL(url); // 释放 URL 对象
			} finally {
				isLoading.close();
			}
		})
		.catch(() => {});
};

// 筛选-状态赋值 bj_notification_status
async function searchItem() {
	searchConfig.formItems.forEach(item => {
		if (item.prop === 'deliveryUnit') {
			item.options = bj_lssuing_unit;
		}
		if (item.prop === 'releasedUnit') {
			item.options = bj_lssuing_unit;
		}
		if (item.prop === 'notificationStatus') {
			item.options = notificationStatus;
		}
		if (item.prop === 'overdueStatus') {
			item.options = overdueStatus;
		}
		if (item.prop === 'notificationType') {
			item.options = bj_notification_type;
		}
		if (item.prop === 'conm') {
			item.options = categoryOnm;
		}
		if (item.prop === 'wfir') {
			item.options = isFeedback;
		}
		if (item.prop === 'takeMeasures') {
			item.options = takeMeasures;
		}
	});
}
searchItem();
</script>

<style scoped lang="scss">
.sensitive-words {
	height: calc(100vh - 95px);
	margin-top: 0;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: none; /* 可选：隐藏滚动条 */
	&::-webkit-scrollbar {
		display: none;
	}
}

.status {
	cursor: pointer;
	position: relative;

	.status-tip {
		position: absolute;
		top: 2px;
		left: 60px;
	}
}

.dialog-tip {
	text-align: center;
}

.table-box {
	width: 55%;
	display: flex;
	flex-direction: column;
	flex: 3;
}

:deep .el-tabs__item.is-active {
	color: #fff;
	background-color: #409eff;
}
:deep .el-tabs__header {
	padding-left: 20px;
	background-color: #fff;
}
</style>