统计总览组件改名、统计分析总览搜索条件默认当前月及发布接收统计跳转明细

src/api/notificationAnalysis/overviewStatisticalAnalysis.ts

@@ -1,10 +1,11 @@
 import request from '@/utils/request';
 
 // 获取统计分析总览
-export function getOverviewTotal() {
+export function getOverviewTotal(queryInfo) {
 	return request({
 		url: `/business/overview/total`,
 		method: 'get',
+		params: queryInfo,
 	});
 }
 

src/views/notificationAnalysis/overviewStatisticalAnalysis/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="sensitive-words">
 		<div class="queryCondition">
-			<el-form :model="form" label-width="auto">
+			<el-form ref="formRef" :model="form" label-width="auto">
 				<el-row :gutter="20">
 					<el-col :span="2">
 						<div>查询条件</div>
@@ -9,18 +9,21 @@
 					<el-col :span="6"
 						><el-form-item label="发布日期">
 							<el-date-picker
-								v-model="form.releaseDate"
+								v-model="form.dateRange"
 								type="daterange"
 								range-separator="To"
 								start-placeholder="开始日期"
 								end-placeholder="结束日期"
+								format="YYYY-MM-DD"
+								value-format="YYYYMMDD"
+								:disabledDate="disabledDate"
 							/> </el-form-item
 					></el-col>
 					<el-col :span="6">
 						<el-form-item>
 							<div class="btn-box">
-								<el-button type="primary" @click="onSubmit">查询</el-button>
-								<el-button>重置</el-button>
+								<el-button type="primary" @click="getOverviewTotalData">查询</el-button>
+								<el-button @click="resetForm(formRef)">重置</el-button>
 							</div>
 						</el-form-item>
 					</el-col>
@@ -64,29 +67,44 @@ import {
 	getOverviewTotal,
 	NotificationOverviewTotal,
 } from '@/api/notificationAnalysis/overviewStatisticalAnalysis';
-
-import { ElLoading } from 'element-plus';
+import dayjs from 'dayjs';
+import type { FormInstance } from 'element-plus';
 
 const router = useRouter();
+
+// 计算最近一个月的日期范围
+const getLastMonthRange = () => {
+	const today = dayjs();
+	const startDate = today.subtract(1, 'month');
+	const endDate = today;
+	return [startDate.format('YYYYMMDD'), endDate.format('YYYYMMDD')];
+};
+const disabledDate = (time: Date) => {
+	return time.getTime() > Date.now();
+};
 const form = reactive({
-	releaseDate: [],
+	dateRange: [] as string[],
 });
 
-const onSubmit = () => {};
-
 const overviewData = ref<any>({});
 const getOverviewTotalData = async () => {
-	// const loading = ElLoading.service({
-	// 	lock: true,
-	// 	text: 'Loading',
-	// 	background: 'rgba(0, 0, 0, 0.7)',
-	// });
-	const res = await getOverviewTotal();
-	overviewData.value = res.data;
-	console.log(overviewData.value);
-	// loading.close();
+	const res: any = await getOverviewTotal(form);
+	if (res.code === 200) {
+		overviewData.value = res.data;
+	}
+};
+const formRef = ref<FormInstance>();
+const resetForm = (formEl: FormInstance | undefined) => {
+	if (!formEl) return;
+	form.dateRange = getLastMonthRange();
+	formEl.resetFields();
 };
-getOverviewTotalData();
+
+onMounted(() => {
+	form.dateRange = getLastMonthRange(); // 设置默认值
+
+	getOverviewTotalData();
+});
 </script>
 
 <style scoped lang="scss">

src/views/notificationAnalysis/releaseReceiptStatistics/components/StatisticsCard.vue

@@ -1,164 +0,0 @@
-<template>
-	<div class="scroll-wrapper">
-		<div class="statistics-container">
-			<!-- 固定首列 -->
-			<div class="fixed-first">
-				<div class="stat-card">
-					<slot name="first-item" :item="dataList[0]">
-						<div class="card-icon">
-							<component :is="dataList[0].icon" />
-						</div>
-						<div class="card-content">
-							<div>
-								<span class="card-title">{{ dataList[0].title }}</span>
-							</div>
-							<div
-								class="card-body"
-								:style="
-									dataList[0].showNoPercent
-										? 'justify-content: flex-start;'
-										: 'justify-content: space-around;'
-								"
-							>
-								<div>
-									<span class="card-count">{{ formatNumber(dataList[0].value) }}</span>
-									<span class="card-unit">件</span>
-								</div>
-								<div v-if="!dataList[0].showNoPercent">
-									<span class="card-count">{{ calculatePercentage(dataList[0].value) }}%</span>
-									<span class="card-unit">占比</span>
-								</div>
-							</div>
-						</div>
-					</slot>
-				</div>
-			</div>
-			<!-- 可滚动内容 -->
-			<div class="scroll-content-wrapper">
-				<div class="scroll-content">
-					<div v-for="(item, index) in dataList.slice(1)" :key="index" class="stat-card">
-						<div class="card-icon">
-							<component :is="item.icon" />
-						</div>
-						<div class="card-content">
-							<div>
-								<span class="card-title">{{ item.title }}</span>
-							</div>
-							<div class="card-body">
-								<div>
-									<span class="card-count">{{ formatNumber(item.value) }}</span>
-									<span class="card-unit">件</span>
-								</div>
-								<div>
-									<span class="card-count">{{ calculatePercentage(item.value) }}%</span>
-									<span class="card-unit">占比</span>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-interface DataList {
-	title: string;
-	value: number;
-	icon: string;
-	showNoPercent?: boolean;
-}
-
-interface IProps {
-	dataList: Array<DataList>;
-}
-
-const props = defineProps<IProps>();
-
-const formatNumber = num => {
-	return num.toLocaleString();
-};
-const calculatePercentage = value => {
-	const total = props.dataList.reduce((sum, item) => sum + item.value, 0);
-	return total > 0 ? ((value / total) * 100).toFixed(1) : 0;
-};
-</script>
-
-<style scoped lang="scss">
-/* 外层容器 */
-.scroll-wrapper {
-	margin: 15px 0;
-	// padding-bottom: 8px;
-}
-/* 主容器 */
-.statistics-container {
-	display: flex;
-	width: 100%;
-	position: relative;
-}
-/* 固定首列 */
-.fixed-first {
-	position: sticky;
-	left: 0;
-	z-index: 2;
-	margin-left: 0;
-	.stat-card {
-		margin-left: 0;
-	}
-}
-/* 可滚动内容的外层容器 */
-.scroll-content-wrapper {
-	flex: 1;
-	overflow-x: auto;
-	-webkit-overflow-scrolling: touch;
-}
-/* 可滚动内容 */
-.scroll-content {
-	display: flex;
-	width: max-content;
-}
-/* 卡片通用样式 */
-.stat-card {
-	display: flex;
-	flex-direction: row;
-	flex-shrink: 0;
-	width: 320px;
-	padding: 16px;
-	margin-left: 12px;
-	background: white;
-	border-radius: 4px;
-	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-.card-icon {
-	width: 60px;
-	height: 60px;
-	border-radius: 50%;
-	background-color: #f5f7fa;
-	margin-right: 20px;
-}
-.card-content {
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-}
-.card-title {
-	font-size: 14px;
-	color: rgb(115, 118, 122);
-}
-.card-body {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-around;
-	font-size: 14px;
-	& > div:last-child {
-		margin-left: 10px;
-	}
-}
-.card-count {
-	font-size: 20px;
-	margin-right: 10px;
-}
-</style>

src/views/notificationAnalysis/releaseReceiptStatistics/components/notificationStatisticsLineChart.vue

@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div style="background-color: #fff">
 		<div class="statistics-header">
 			<div class="statistics-title">
 				<el-icon><TrendCharts /></el-icon>

src/views/notificationAnalysis/releaseReceiptStatistics/components/notificationStatisticsMeasureChart.vue

@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div style="background-color: #fff">
 		<div class="statistics-header">
 			<div class="statistics-title">
 				<el-icon><TrendCharts /></el-icon>

src/views/notificationAnalysis/releaseReceiptStatistics/components/statisticalReport.vue

@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div style="background-color: #fff">
 		<div class="title">2025年1月-2025年2月通报事项统计</div>
 
 		<div>
@@ -20,7 +20,14 @@
 									{{ UnitType[row.unitType] }}
 								</template>
 							</el-table-column>
-							<el-table-column prop="unit" fixed :label="item.name" align="center" :width="185" />
+							<el-table-column prop="unit" fixed align="center" :width="185" label="名称">
+								<template #default="scope">
+									<span class="unit-name" @click="viewDetail(scope.row.unit)">{{ scope.row.unit }}</span>
+									<!-- <el-button type="primary" @click="viewDetail(scope.row.unit)" text>{{
+										scope.row.unit
+									}}</el-button> -->
+								</template>
+							</el-table-column>
 						</el-table-column>
 					</template>
 					<template v-else-if="item.children">
@@ -806,6 +813,15 @@ const columns = ref([
 		],
 	},
 ]);
+const router = useRouter();
+const viewDetail = (unit: string) => {
+	router.push({
+		path: '/notificationAnalysis/notificationReleaseReceiptDetail',
+		query: {
+			unit,
+		},
+	});
+};
 onMounted(() => {
 	getTotalPublicTableData();
 });
@@ -816,6 +832,11 @@ onMounted(() => {
 // 	display: none;
 // }
 .title {
-	font-weight: 700;
+	font-weight: 600;
+	padding: 10px;
+}
+.unit-name {
+	cursor: pointer;
+	color: #409eff;
 }
 </style>

src/views/notificationAnalysis/releaseReceiptStatistics/components/StatisticsCardNew.vue → src/views/notificationAnalysis/releaseReceiptStatistics/components/statisticsOverviewCard.vue

@@ -78,7 +78,7 @@ onMounted(() => {
 <style scoped lang="scss">
 /* 外层容器 */
 .scroll-wrapper {
-	margin: 15px 0;
+	padding: 15px 0;
 	background-color: #fff;
 }
 
@@ -151,7 +151,7 @@ onMounted(() => {
 	justify-content: center;
 	align-items: center;
 	height: 40px;
-	font-size: 16px;
+	font-size: 14px;
 	text-align: center;
 	padding: 6px;
 	& > div {

src/views/notificationAnalysis/releaseReceiptStatistics/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="sensitive-words">
 		<pageSearch ref="searchTableRef" :searchConfig="searchConfig"> </pageSearch>
-		<StatisticsCardNew />
+		<statisticsOverviewCard />
 
 		<!-- 发布通报统计 -->
 		<notificationStatisticsLineChart
@@ -27,7 +27,7 @@
 <script setup lang="ts">
 // import { getPublishAndReceiveTotalCard } from '@/api/notificationAnalysis/releaseAndReceive';
 import { getTotalReleaseLine, ReleaseAndReceive } from '@/api/notificationAnalysis/releaseAndReceive';
-import StatisticsCardNew from './components/StatisticsCardNew.vue';
+import statisticsOverviewCard from './components/statisticsOverviewCard.vue';
 import statisticalReport from './components/statisticalReport.vue';
 import notificationStatisticsLineChart from './components/notificationStatisticsLineChart.vue';
 import notificationStatisticsMeasureChart from './components/notificationStatisticsMeasureChart.vue';

src/views/notificationAnalysis/takeMeasuresStatistics/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="sensitive-words">
 		<pageSearch ref="searchTableRef" :searchConfig="searchConfig"> </pageSearch>
-		<StatisticsCardNew :data-list="statsData" :title-name="cardTitleName" />
+		<statisticsOverviewCard :data-list="statsData" :title-name="cardTitleName" />
 		<!-- <StatisticsCard :data-list="statsData" /> -->
 		<measuresStatisticsNew />
 		<measuresStatistics />
@@ -13,7 +13,7 @@
 import type { TabsPaneContext } from 'element-plus';
 import { useRouter } from 'vue-router';
 import StatisticsCard from '../releaseReceiptStatistics/components/StatisticsCard.vue';
-import StatisticsCardNew from '../releaseReceiptStatistics/components/StatisticsCardNew.vue';
+import statisticsOverviewCard from '../releaseReceiptStatistics/components/statisticsOverviewCard.vue';
 import measuresStatistics from './components/measuresStatistics.vue';
 import measuresStatisticsNew from './components/measuresStatisticsNew.vue';
 import searchConfig from './config/search.config';