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

<template>
	<div class="sensitive-words flex">
		<div class="table-box">
			<pageSearch ref="searchTableRef" :searchConfig="searchConfig" />
			<statisticsItem></statisticsItem>
			<statisticalChart class="mt20"></statisticalChart>
			<majorStatisticalChart class="mt20"></majorStatisticalChart>
			<pageContent ref="tableListRef" :total="total" v-loading="loading" :contentConfig="contentConfig">
				<!-- 单位 -->
				<template #unitNameStr="scope">
					<el-link @click="handleUnitdetail(scope.row.unitName)" type="primary">{{
						scope.row.unitNameStr
					}}</el-link>
				</template>
				<template #belongsDeptStr1="scope">
					<el-link @click="handleUnitdetail(scope.row.unitName)" type="primary">{{
						scope.row.unitNameStr
					}}</el-link>
				</template>
				<template #contactName1="scope">
					<el-link @click="handleUnitdetail(scope.row.unitName)" type="primary">{{
						scope.row.unitNameStr
					}}</el-link>
				</template>
				<template #contactName2="scope">
					<el-link @click="handleUnitdetail(scope.row.unitName)" type="primary">{{
						scope.row.unitNameStr
					}}</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 statisticsItem from './components/statisticsItem.vue';
import statisticalChart from './components/statisticalChart.vue';
import majorStatisticalChart from './components/majorStatisticalChart.vue';
import { useRouter } from 'vue-router';
import useSystemStore from '@/store/main';

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 tableListRef: any = ref<InstanceType<typeof pageContent>>();

const searchTableRef: any = ref<InstanceType<typeof pageSearch>>();
// 操作弹框
import usePageModal from '@/components/components/hooks/usePageDetails';
const { modalRef, handleNewDataClick, handleEditDataClick, handleCheckDataClick, handlePageDetail } =
	usePageModal();
const loading = ref(false);

const handleUnitdetail = async (id?: string) => {
	router.push({
		path: '/notificationAnalysis/notificationMattersDetail',
		query: { id: id },
	});
};

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>