通报事项统计 卡片

.env.development

@@ -17,9 +17,9 @@ VITE_APP_TOKEN =  6617e72a5a7e41eb6c30aa4fa3000022
 # 开发接口地址
 # VITE_APP_API_URL = "http://libai1024.gnway.cc:80"
 # VITE_APP_API_URL = "http://r96896c3.natappfree.cc"
-# VITE_APP_API_URL = "http://106.75.213.212:7070"
+VITE_APP_API_URL = "http://106.75.213.212:7070"
 # VITE_APP_API_URL = "http://192.168.101.73:7070"
-VITE_APP_API_URL = "http://192.168.50.8:7070"
+# VITE_APP_API_URL = "http://192.168.50.8:7070"
 
 # 是否在打包时开启压缩，支持 gzip 和 brotli
 VITE_BUILD_COMPRESS = gzip

src/api/notificationAnalysis/mattersStatistics.ts

@@ -7,3 +7,11 @@ export function getReportItemTotalReportLineApi() {
 		method: 'get',
 	});
 }
+
+// 发布接收通报事项统计-卡片
+export function getReportItemTotalCardApi() {
+	return request({
+		url: `/business/reportItem/totalCard`,
+		method: 'get',
+	});
+}

src/views/notificationAnalysis/mattersStatistics/components/statisticsItem.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 { getReportItemTotalCardApi } from '@/api/notificationAnalysis/mattersStatistics';
 interface DataList {
 	title: string;
 	count: number;
@@ -64,74 +66,33 @@ interface IProps {
 	dataList: Array<DataList>;
 	titleName: string;
 }
-const dataList = reactive<DataList[]>([
-	{
-		title: '通报通报总计',
-		count: 2873,
-		countName: '通报数量（件）',
-		percent: 100,
-		percentName: '占比（%）',
-		isMain: true,
-	},
-	{
-		title: '涉及船舶相关违法违规行为(包括船客12人以下小型涉客船艇、夜游船、电池动力船客等)',
-		count: 2873,
-		countName: '通报数量（件）',
-		percent: 100,
-		percentName: '占比（%）',
-		isMain: false,
-	},
-	{
-		title: '涉及船舶相关违法违规行为(包括船客12人以下小型涉客船艇、夜游船、电池动力船客等)',
-		count: 2873,
-		countName: '通报数量（件）',
-		percent: 100,
-		percentName: '占比（%）',
-		isMain: false,
-	},
-	{
-		title: '涉及船舶相关违法违规行为(包括船客12人以下小型涉客船艇、夜游船、电池动力船客等)',
-		count: 2873,
-		countName: '通报数量（件）',
-		percent: 100,
-		percentName: '占比（%）',
-		isMain: false,
-	},
-	{
-		title: '涉及船舶相关违法违规行为(包括船客12人以下小型涉客船艇、夜游船、电池动力船客等)',
-		count: 2873,
-		countName: '通报数量（件）',
-		percent: 100,
-		percentName: '占比（%）',
-		isMain: false,
-	},
-	{
-		title: '涉及船舶相关违法违规行为(包括船客12人以下小型涉客船艇、夜游船、电池动力船客等)',
-		count: 2873,
-		countName: '通报数量（件）',
-		percent: 100,
-		percentName: '占比（%）',
-		isMain: false,
-	},
-	{
-		title: '涉及船舶相关违法违规行为(包括船客12人以下小型涉客船艇、夜游船、电池动力船客等)',
-		count: 2873,
-		countName: '通报数量（件）',
-		percent: 100,
-		percentName: '占比（%）',
-		isMain: false,
-	},
-	{
-		title: '涉及船舶相关违法违规行为(包括船客12人以下小型涉客船艇、夜游船、电池动力船客等)',
-		count: 2873,
-		countName: '通报数量（件）',
-		percent: 100,
-		percentName: '占比（%）',
-		isMain: false,
+
+const props = defineProps<IProps>();
+// 使用pinia数据
+const systemStore = useSystemStore();
+const { pageList, resDate, searchObj } = storeToRefs(systemStore);
+watch(
+	[() => pageList, () => searchObj.value],
+	([newPageList, newSearchObj], [oldPageList, oldSearchObj]) => {
+		getReportItemTotalCardData();
 	},
-]);
+	{ deep: true }
+);
+// onMounted(() => {
+// 	getReportItemTotalCardData();
+// });
+const dataList = ref<DataList[]>();
+const isShow = ref<any>(false);
 const titleName = '通报事项总览';
-const props = defineProps<IProps>();
+async function getReportItemTotalCardData() {
+	const res: any = await getReportItemTotalCardApi();
+	if (res.code === 200) {
+		isShow.value = true;
+		dataList.value = res.data;
+	} else {
+		return [];
+	}
+}
 </script>
 
 <style scoped lang="scss">