发布和接收通报统计优化

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

@@ -31,9 +31,11 @@ const ComponentNames = ref({
 watch(
 	() => props.statisticsData,
 	newValue => {
-		console.log('发布和接收统计', newValue);
 		initOption();
 		initEchart();
+	},
+	{
+		deep: true,
 	}
 );
 
@@ -62,7 +64,7 @@ const initOption = () => {
 						params[i].color +
 						'"></span>';
 
-					if (params[i].seriesName.includes('数量')) {
+					if (params[i].seriesName.includes('统计')) {
 						result += marker + params[i].seriesName + ': ' + params[i].value + '件' + '&nbsp&nbsp&nbsp&nbsp';
 					} else {
 						result += marker + params[i].seriesName + ': ' + params[i].value + '%<br/>';
@@ -94,7 +96,6 @@ const initOption = () => {
 			left: '3%',
 			right: '4%',
 			bottom: '15%',
-			// containLabel: true,
 		},
 		xAxis: {
 			type: 'category',
@@ -268,8 +269,8 @@ onMounted(() => {
 	if (!chart.value) {
 		return;
 	}
-	initOption();
-	initEchart();
+	// initOption();
+	// initEchart();
 });
 </script>
 

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

@@ -22,12 +22,51 @@
 							</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
-									>
+									<el-tooltip v-if="clickableTitle(scope.row)" effect="light" placement="right">
+										<span class="unit-name" @click="viewDetail(scope.row.unit)">{{ scope.row.unit }}</span>
+										<template #content>
+											<div>
+												<div>
+													{{ scope.row.unit }} <span style="color: #409eff">{{ scope.row.total }}</span> 件
+												</div>
+												<el-table
+													v-if="scope.row.children && scope.row.children.length"
+													:data="scope.row.children"
+													style="width: 100%"
+												>
+													<el-table-column
+														prop="unit"
+														:label="`${UnitType[scope.row.unitType]}单位`"
+														width="120"
+													/>
+													<el-table-column prop="total" label="通报数量" width="120">
+														<template #default>
+															<div>
+																<span>{{ scope.row.total }}</span> 件
+															</div>
+														</template>
+													</el-table-column>
+													<el-table-column prop="proportion" label="占比">
+														<template #default>
+															<span style="color: #409eff">{{ scope.row.proportion || '-' }}</span>
+														</template>
+													</el-table-column>
+													<el-table-column prop="proportion" label="同比">
+														<template #default>
+															<span style="color: #409eff">{{ scope.row.proportion || '-' }}</span>
+														</template>
+													</el-table-column>
+													<el-table-column prop="proportion" label="环比">
+														<template #default>
+															<span style="color: #409eff">{{ scope.row.proportion || '-' }}</span>
+														</template>
+													</el-table-column>
+												</el-table>
+											</div>
+										</template>
+									</el-tooltip>
+
+									<span v-else>{{ scope.row.unit }}</span>
 								</template>
 							</el-table-column>
 						</el-table-column>

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

@@ -2,7 +2,7 @@
 	<div class="scroll-wrapper" v-show="isCardShow">
 		<div class="title-name">
 			<el-icon><TrendCharts /></el-icon>
-			<span>发布和接收通报统计总览</span>
+			<span>{{ cardTitle }}</span>
 		</div>
 		<div v-if="cardData?.length < 7" class="card-box-limit">
 			<div
@@ -76,6 +76,7 @@
 import { TotalCard } from '@/api/notificationAnalysis/releaseAndReceive';
 
 interface IProps {
+	cardTitle: string;
 	cardData: Array<TotalCard>;
 }
 
@@ -156,7 +157,7 @@ watch(
 	margin-left: 12px;
 	background: white;
 	border-radius: 14px;
-	border: 2px solid #2350aa;
+	border: 1px solid #2350aa;
 	overflow: hidden;
 }
 

src/views/notificationAnalysis/releaseReceiptStatistics/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="sensitive-words">
 		<pageSearch ref="searchTableRef" :searchConfig="searchConfig" @send-data="handleSendData" />
-		<statisticsOverviewCard :card-data="cardData" />
+		<statisticsOverviewCard :card-title="cardTitle" :card-data="cardData" />
 
 		<!-- 发布通报统计 -->
 		<notificationStatisticsLineChart
@@ -131,6 +131,7 @@ const getPublishAndReceiveTotalData = async data => {
 		receiveLineData.onlineYoyData = res.data.receiveOnlineYoyData;
 	}
 };
+const cardTitle = '发布和接收通报统计总览';
 const cardData = ref<TotalCard[]>([
 	{
 		title: '',