通报情况和 超期情况统计 卡片 饼图

src/api/notificationAnalysis/situationOverdue.ts

@@ -0,0 +1,17 @@
+import request from '@/utils/request';
+
+// 获取超期情况统计信息
+export function getTimeLimitTotalCardApi() {
+	return request({
+		url: `/business/timeLimit/totalCard`,
+		method: 'get',
+	});
+}
+
+// 获取超期情况统计信息-饼图
+export function getTimeLimitTotalPieApi() {
+	return request({
+		url: `/business/timeLimit/totalPie`,
+		method: 'get',
+	});
+}

src/views/notificationAnalysis/mattersStatistics/components/majorStatisticalChart.vue

@@ -34,8 +34,10 @@ const initChart = () => {
 		legend: {
 			data: ['专项发布通报事项数量', '发布同比', '发布环比', '专项接收通报事项数量', '接收同比', '接收环比'],
 			formatter: name => {
-				if (name.includes('发布')) return name.replace('发布', '');
-				if (name.includes('接收')) return name.replace('接收', '');
+				if (name.includes('发布同比')) return name.replace('发布', '');
+				if (name.includes('发布环比')) return name.replace('发布', '');
+				if (name.includes('接收同比')) return name.replace('接收', '');
+				if (name.includes('接收环比')) return name.replace('接收', '');
 				return name;
 			},
 			selected: { 发布环比: false, 接收环比: false },
@@ -69,20 +71,39 @@ const initChart = () => {
 				let html = `<div style="font-weight:bold;margin-bottom:4px;">${filtered[0].name}</div>`;
 				filtered.forEach((item: any) => {
 					let percentValue = '';
-					if (isfbHuanbi || isjsHuanbi) {
-						percentValue = ` 环比： ${item.data.momCount}%`;
-						html += `<div style='margin:10px 0'>${item.marker} ${
-							item.seriesName
-						}: <span style="font-weight:bold;margin-right:50px;">${item.value} 件</span> ${
-							item.data.yoyCount + '%'
-						}   <span style='margin-left:30px;'>${percentValue}</span></div>`;
-					} else {
-						percentValue = ` 同比： ${item.data.yoyCount}%`;
-						html += `<div style='margin:10px 0'>${item.marker} ${
-							item.seriesName
-						}: <span style="font-weight:bold;margin-right:50px;">${item.value} 件</span>${
-							item.data.momCount + '%'
-						}  <span style='margin-left:30px;'>${percentValue}</div>`;
+					if (item.seriesName === '专项发布通报事项数量') {
+						if (isfbHuanbi) {
+							percentValue = `环比： ${item.data.momCount}%`;
+							html += `<div style='margin:10px 0'>${item.marker} ${
+								item.seriesName
+							}:<span style="font-weight:bold;margin-right:20px;">${item.value} 件</span> ${
+								item.data.yoyCount + '%'
+							}<span style='margin-left:30px;'>${percentValue}</span></div>`;
+						} else {
+							percentValue = `同比： ${item.data.yoyCount}%`;
+							html += `<div style='margin:10px 0'>${item.marker} ${
+								item.seriesName
+							}:<span style="font-weight:bold;margin-right:20px;">${item.value} 件</span>${
+								item.data.momCount + '%'
+							}<span style='margin-left:30px;'>${percentValue}</div>`;
+						}
+					}
+					if (item.seriesName === '专项接收通报事项数量') {
+						if (isjsHuanbi) {
+							percentValue = `环比： ${item.data.momCount}%`;
+							html += `<div style='margin:10px 0'>${item.marker} ${
+								item.seriesName
+							}:<span style="font-weight:bold;margin-right:20px;">${item.value} 件</span> ${
+								item.data.yoyCount + '%'
+							}<span style='margin-left:30px;'>${percentValue}</span></div>`;
+						} else {
+							percentValue = `同比： ${item.data.yoyCount}%`;
+							html += `<div style='margin:10px 0'>${item.marker} ${
+								item.seriesName
+							}:<span style="font-weight:bold;margin-right:20px;">${item.value} 件</span>${
+								item.data.momCount + '%'
+							}<span style='margin-left:30px;'>${percentValue}</div>`;
+						}
 					}
 				});
 				return html;

src/views/notificationAnalysis/mattersStatistics/components/statisticalChart.vue

@@ -68,20 +68,39 @@ const initChart = () => {
 				let html = `<div style="font-weight:bold;margin-bottom:4px;">${filtered[0].name}</div>`;
 				filtered.forEach((item: any) => {
 					let percentValue = '';
-					if (isfbHuanbi || isjsHuanbi) {
-						percentValue = ` 环比： ${item.data.momCount}%`;
-						html += `<div style='margin:10px 0'>${item.marker} ${
-							item.seriesName
-						}: <span style="font-weight:bold;margin-right:50px;">${item.value} 件</span> ${
-							item.data.yoyCount + '%'
-						}   <span style='margin-left:30px;'>${percentValue}</span></div>`;
-					} else {
-						percentValue = ` 同比： ${item.data.yoyCount}%`;
-						html += `<div style='margin:10px 0'>${item.marker} ${
-							item.seriesName
-						}: <span style="font-weight:bold;margin-right:50px;">${item.value} 件</span>${
-							item.data.momCount + '%'
-						}  <span style='margin-left:30px;'>${percentValue}</div>`;
+					if (item.seriesName === '发布通报事项数量') {
+						if (isfbHuanbi) {
+							percentValue = `环比： ${item.data.momCount}%`;
+							html += `<div style='margin:10px 0'>${item.marker} ${
+								item.seriesName
+							}:<span style="font-weight:bold;margin-right:20px;">${item.value} 件</span> ${
+								item.data.yoyCount + '%'
+							}<span style='margin-left:30px;'>${percentValue}</span></div>`;
+						} else {
+							percentValue = `同比： ${item.data.yoyCount}%`;
+							html += `<div style='margin:10px 0'>${item.marker} ${
+								item.seriesName
+							}:<span style="font-weight:bold;margin-right:20px;">${item.value} 件</span>${
+								item.data.momCount + '%'
+							}<span style='margin-left:30px;'>${percentValue}</div>`;
+						}
+					}
+					if (item.seriesName === '接收通报事项数量') {
+						if (isjsHuanbi) {
+							percentValue = `环比： ${item.data.momCount}%`;
+							html += `<div style='margin:10px 0'>${item.marker} ${
+								item.seriesName
+							}:<span style="font-weight:bold;margin-right:20px;">${item.value} 件</span> ${
+								item.data.yoyCount + '%'
+							}<span style='margin-left:30px;'>${percentValue}</span></div>`;
+						} else {
+							percentValue = `同比： ${item.data.yoyCount}%`;
+							html += `<div style='margin:10px 0'>${item.marker} ${
+								item.seriesName
+							}:<span style="font-weight:bold;margin-right:20px;">${item.value} 件</span>${
+								item.data.momCount + '%'
+							}<span style='margin-left:30px;'>${percentValue}</div>`;
+						}
 					}
 				});
 				return html;

src/views/notificationAnalysis/situationOverdueStatistics/components/industryOverdueStatistics.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="scroll-wrapper">
+	<div class="scroll-wrapper" v-show="isShow">
 		<div class="title-name">
 			<!-- <el-icon><TrendCharts /></el-icon> -->
 			<span>{{ titleName }}</span>
@@ -8,16 +8,16 @@
 			<!-- 固定首列 -->
 			<div class="fixed-first start-card card-border-total">
 				<div class="card-title card-title-total">
-					<div>{{ dataList[0].title }}</div>
+					<div>{{ dataList?.[0]?.title }}</div>
 				</div>
 				<div class="card-body">
 					<div class="card-body-left">
-						<div class="card-count">{{ dataList[0].count }}</div>
-						<div class="card-text">{{ dataList[0].countName }}</div>
+						<div class="card-count">{{ dataList?.[0]?.count }}</div>
+						<div class="card-text">{{ dataList?.[0]?.countName }}</div>
 					</div>
 					<div class="card-body-right">
-						<div class="card-count">{{ dataList[0].percent }}%</div>
-						<div class="card-text">{{ dataList[0].percentName }}</div>
+						<div class="card-count">{{ dataList?.[0]?.percent }}%</div>
+						<div class="card-text">{{ dataList?.[0]?.percentName }}</div>
 					</div>
 				</div>
 			</div>
@@ -25,7 +25,7 @@
 			<div class="scroll-content-wrapper">
 				<div class="scroll-content">
 					<div
-						v-for="(item, index) in dataList.slice(1)"
+						v-for="(item, index) in dataList?.slice(1)"
 						:key="index"
 						class="start-card"
 						:class="item.isMain ? 'card-border-total' : 'card-border-point'"
@@ -51,6 +51,8 @@
 </template>
 
 <script setup lang="ts">
+import useSystemStore from '@/store/main';
+import { getTimeLimitTotalCardApi } from '@/api/notificationAnalysis/situationOverdue';
 interface DataList {
 	title: string;
 	count: number;
@@ -60,79 +62,31 @@ interface DataList {
 	isMain?: boolean;
 }
 
-interface IProps {
-	dataList: Array<DataList>;
-	titleName: string;
-}
-const dataList = reactive<DataList[]>([
-	{
-		title: '超出情况总数',
-		count: 2873,
-		countName: '超报超期（件）',
-		percent: 100,
-		percentName: '占比（%）',
-		isMain: true,
-	},
-	{
-		title: '地方政府',
-		count: 2873,
-		countName: '超报超期（件）',
-		percent: 100,
-		percentName: '占比（%）',
-		isMain: false,
-	},
-	{
-		title: '地方政府',
-		count: 2873,
-		countName: '超报超期（件）',
-		percent: 100,
-		percentName: '占比（%）',
-		isMain: false,
-	},
-	{
-		title: '地方政府',
-		count: 2873,
-		countName: '超报超期（件）',
-		percent: 100,
-		percentName: '占比（%）',
-		isMain: false,
-	},
-	{
-		title: '地方政府',
-		count: 2873,
-		countName: '超报超期（件）',
-		percent: 100,
-		percentName: '占比（%）',
-		isMain: false,
-	},
-	{
-		title: '地方政府',
-		count: 2873,
-		countName: '超报超期（件）',
-		percent: 100,
-		percentName: '占比（%）',
-		isMain: false,
+// 使用pinia数据
+const systemStore = useSystemStore();
+const { pageList, resDate, searchObj } = storeToRefs(systemStore);
+watch(
+	[() => pageList, () => searchObj.value],
+	([newPageList, newSearchObj], [oldPageList, oldSearchObj]) => {
+		getTimeLimitTotalCardData();
 	},
-	{
-		title: '地方政府',
-		count: 2873,
-		countName: '超报超期（件）',
-		percent: 100,
-		percentName: '占比（%）',
-		isMain: false,
-	},
-	{
-		title: '地方政府',
-		count: 2873,
-		countName: '超报超期（件）',
-		percent: 100,
-		percentName: '占比（%）',
-		isMain: false,
-	},
-]);
+	{ deep: true }
+);
+// onMounted(() => {
+// 	getTimeLimitTotalCardData();
+// });
+const isShow = ref<any>(false);
+const dataList = ref<DataList[]>();
 const titleName = '行业外超期情况总览';
-
-const props = defineProps<IProps>();
+async function getTimeLimitTotalCardData() {
+	const res: any = await getTimeLimitTotalCardApi();
+	if (res.code === 200) {
+		isShow.value = true;
+		dataList.value = res.data[1];
+	} else {
+		return [];
+	}
+}
 </script>
 
 <style scoped lang="scss">
@@ -146,7 +100,7 @@ const props = defineProps<IProps>();
 	padding: 20px 15px;
 	font-weight: 700;
 	span {
-		padding-left: 5px;
+		padding-left: 10px;
 	}
 }
 :deep(.el-icon) {

src/views/notificationAnalysis/situationOverdueStatistics/components/overdueStatistics.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="scroll-wrapper">
+	<div class="scroll-wrapper" v-show="isShow">
 		<div class="title-name">
 			<!-- <el-icon><TrendCharts /></el-icon> -->
 			<span>{{ titleName }}</span>
@@ -8,16 +8,16 @@
 			<!-- 固定首列 -->
 			<div class="fixed-first start-card card-border-total">
 				<div class="card-title card-title-total">
-					<div>{{ dataList[0].title }}</div>
+					<div>{{ dataList?.[0]?.title }}</div>
 				</div>
 				<div class="card-body">
 					<div class="card-body-left">
-						<div class="card-count">{{ dataList[0].count }}</div>
-						<div class="card-text">{{ dataList[0].countName }}</div>
+						<div class="card-count">{{ dataList?.[0]?.count }}</div>
+						<div class="card-text">{{ dataList?.[0]?.countName }}</div>
 					</div>
 					<div class="card-body-right">
-						<div class="card-count">{{ dataList[0].percent }}%</div>
-						<div class="card-text">{{ dataList[0].percentName }}</div>
+						<div class="card-count">{{ dataList?.[0]?.percent }}%</div>
+						<div class="card-text">{{ dataList?.[0]?.percentName }}</div>
 					</div>
 				</div>
 			</div>
@@ -25,7 +25,7 @@
 			<div class="scroll-content-wrapper">
 				<div class="scroll-content">
 					<div
-						v-for="(item, index) in dataList.slice(1)"
+						v-for="(item, index) in dataList?.slice(1)"
 						:key="index"
 						class="start-card"
 						:class="item.isMain ? 'card-border-total' : 'card-border-point'"
@@ -51,6 +51,8 @@
 </template>
 
 <script setup lang="ts">
+import useSystemStore from '@/store/main';
+import { getTimeLimitTotalCardApi } from '@/api/notificationAnalysis/situationOverdue';
 interface DataList {
 	title: string;
 	count: number;
@@ -60,79 +62,31 @@ interface DataList {
 	isMain?: boolean;
 }
 
-interface IProps {
-	dataList: Array<DataList>;
-	titleName: string;
-}
-const dataList = reactive<DataList[]>([
-	{
-		title: '超出情况总数',
-		count: 2873,
-		countName: '超报超期（件）',
-		percent: 100,
-		percentName: '占比（%）',
-		isMain: true,
-	},
-	{
-		title: '海南海事局',
-		count: 2873,
-		countName: '超报超期（件）',
-		percent: 100,
-		percentName: '占比（%）',
-		isMain: false,
-	},
-	{
-		title: '海南海事局',
-		count: 2873,
-		countName: '超报超期（件）',
-		percent: 100,
-		percentName: '占比（%）',
-		isMain: false,
-	},
-	{
-		title: '海南海事局',
-		count: 2873,
-		countName: '超报超期（件）',
-		percent: 100,
-		percentName: '占比（%）',
-		isMain: false,
-	},
-	{
-		title: '海南海事局',
-		count: 2873,
-		countName: '超报超期（件）',
-		percent: 100,
-		percentName: '占比（%）',
-		isMain: false,
-	},
-	{
-		title: '海南海事局',
-		count: 2873,
-		countName: '超报超期（件）',
-		percent: 100,
-		percentName: '占比（%）',
-		isMain: false,
+// 使用pinia数据
+const systemStore = useSystemStore();
+const { pageList, resDate, searchObj } = storeToRefs(systemStore);
+watch(
+	[() => pageList, () => searchObj.value],
+	([newPageList, newSearchObj], [oldPageList, oldSearchObj]) => {
+		getTimeLimitTotalCardData();
 	},
-	{
-		title: '海南海事局',
-		count: 2873,
-		countName: '超报超期（件）',
-		percent: 100,
-		percentName: '占比（%）',
-		isMain: false,
-	},
-	{
-		title: '海南海事局',
-		count: 2873,
-		countName: '超报超期（件）',
-		percent: 100,
-		percentName: '占比（%）',
-		isMain: false,
-	},
-]);
+	{ deep: true }
+);
+// onMounted(() => {
+// 	getTimeLimitTotalCardData();
+// });
+const dataList = ref<DataList[]>();
+const isShow = ref<any>(false);
 const titleName = '超期情况总览';
-
-const props = defineProps<IProps>();
+async function getTimeLimitTotalCardData() {
+	const res: any = await getTimeLimitTotalCardApi();
+	if (res.code === 200) {
+		isShow.value = true;
+		dataList.value = res.data[0];
+	} else {
+		return [];
+	}
+}
 </script>
 
 <style scoped lang="scss">

src/views/notificationAnalysis/situationOverdueStatistics/components/statisticalChartPie.vue

@@ -16,15 +16,35 @@
 <script setup lang="ts">
 import { ref, onMounted, markRaw } from 'vue';
 import * as echarts from 'echarts';
-
+import useSystemStore from '@/store/main';
+import { getTimeLimitTotalPieApi } from '@/api/notificationAnalysis/situationOverdue';
+// 使用pinia数据
+const systemStore = useSystemStore();
+const { pageList, resDate, searchObj } = storeToRefs(systemStore);
+watch(
+	[() => pageList, () => searchObj.value],
+	([newPageList, newSearchObj], [oldPageList, oldSearchObj]) => {
+		getTimeLimitTotalPieApiData();
+	},
+	{ deep: true }
+);
+// onMounted(() => {
+// 	getTimeLimitTotalPieApiData();
+// });
+async function getTimeLimitTotalPieApiData() {
+	const res: any = await getTimeLimitTotalPieApi();
+	if (res.code === 200) {
+		getChartType1(res.data[0]);
+		getChartType2(res.data[1]);
+	} else {
+		return [];
+	}
+}
 const chartType = ref<any>(null);
 
-onMounted(() => {
-	getChartType1();
-	getChartType2();
-});
+onMounted(() => {});
 
-const getChartType1 = () => {
+const getChartType1 = data => {
 	chartType.value = markRaw(echarts.init(document.getElementById('item-echart-1') as HTMLDivElement));
 
 	const options = {
@@ -41,13 +61,7 @@ const getChartType1 = () => {
 				name: 'Access From',
 				type: 'pie',
 				radius: '50%',
-				data: [
-					{ value: 1048, name: 'Search Engine' },
-					{ value: 735, name: 'Direct' },
-					{ value: 580, name: 'Email' },
-					{ value: 484, name: 'Union Ads' },
-					{ value: 300, name: 'Video Ads' },
-				],
+				data: data,
 				emphasis: {
 					itemStyle: {
 						shadowBlur: 10,
@@ -65,7 +79,7 @@ const getChartType1 = () => {
 		chartType.value.resize();
 	});
 };
-const getChartType2 = () => {
+const getChartType2 = data => {
 	chartType.value = markRaw(echarts.init(document.getElementById('item-echart-2') as HTMLDivElement));
 
 	const options = {
@@ -82,13 +96,7 @@ const getChartType2 = () => {
 				name: 'Access From',
 				type: 'pie',
 				radius: '50%',
-				data: [
-					{ value: 1048, name: 'Search Engine' },
-					{ value: 735, name: 'Direct' },
-					{ value: 580, name: 'Email' },
-					{ value: 484, name: 'Union Ads' },
-					{ value: 300, name: 'Video Ads' },
-				],
+				data: data,
 				emphasis: {
 					itemStyle: {
 						shadowBlur: 10,

src/views/notificationAnalysis/situationOverdueStatistics/index.vue

@@ -2,8 +2,8 @@
 	<div class="sensitive-words flex">
 		<div class="table-box">
 			<pageSearch ref="searchTableRef" :searchConfig="searchConfig" @handleSure="handerSearch" />
-			<overdueStatistics :contentStatistics="contentStatistics"></overdueStatistics>
-			<industryOverdueStatistics :contentStatistics="contentStatistics"></industryOverdueStatistics>
+			<overdueStatistics></overdueStatistics>
+			<industryOverdueStatistics></industryOverdueStatistics>
 			<statisticalChartPie class="mt20"></statisticalChartPie>
 			<statisticalChartBar class="mt20"></statisticalChartBar>
 			<pageContent
@@ -123,7 +123,16 @@ import {
 const router = useRouter();
 // 使用pinia数据
 const systemStore = useSystemStore();
-const { pageDetailInfo, searchObj } = storeToRefs(systemStore);
+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]);
@@ -147,59 +156,9 @@ const handleUnitdetail = async (id?: string) => {
 // 查询回调 请求参数 并去获取图表及统计
 const handerSearch = async data => {
 	console.log('data', data);
-	handleStatistics();
 };
 
-const contentStatistics = ref<any>([]);
-const handleStatistics = async () => {
-	contentStatistics.value = [];
-	contentStatistics.value = [
-		{
-			label: '通报事项总计',
-			icon: '/assets/icon/1.png',
-			value: '1762',
-		},
-		{
-			label: '已完成发布通报',
-			value: '233',
-			icon: '/assets/icon/1.png',
-		},
-		{
-			label: '已完成接收通报',
-			value: '368',
-			icon: '/assets/icon/2.png',
-		},
-		{
-			label: '已完成处置反馈通报',
-			value: '12',
-			icon: '/assets/icon/3.png',
-		},
-		{
-			label: '已完成处置处理',
-			value: '102',
-			icon: '/assets/icon/3.png',
-		},
-		{
-			label: '已结案',
-			value: '22',
-			icon: '/assets/icon/3.png',
-		},
-
-		{
-			label: '未完成接收',
-			value: '33',
-			icon: '/assets/icon/3.png',
-		},
-		{
-			label: '未完成处置反馈',
-			value: '2',
-			icon: '/assets/icon/3.png',
-		},
-	];
-};
-onMounted(() => {
-	handleStatistics();
-});
+onMounted(() => {});
 const handleDownload = async () => {
 	ElMessageBox.confirm(`确定要导出所选数据信息？`, '提示', {
 		confirmButtonText: '确定',