合并分支 'zym-dev' 到 'pre'

src/components/base/SummaryCardsPanel/index.vue

+<template>
+	<div class="summary-cards-panel" :style="{ width: panelWidth }" v-loading="loading">
+		<div class="date-box">
+			<div class="date-icon" v-if="tipIcon">
+				<img :src="tipIcon" alt="" />
+			</div>
+			<div class="date-text">{{ descriptionText }}</div>
+			<TimeTabPane @time-click="onTimeClick" :activeTime="activeTime" />
+		</div>
+
+		<div class="cards-box" v-if="cards.length">
+			<div class="summary-item" v-for="item in cards" :key="item.id || item.name">
+				<div class="item-left">
+					<img :src="item.avatar || defaultAvatar" alt="" />
+				</div>
+				<div class="item-center" @click="emit('name-click', item)">
+					<div class="item-name one-line-ellipsis">{{ item.name }}</div>
+					<div v-if="item.subText" class="item-sub-text one-line-ellipsis">{{ item.subText }}</div>
+				</div>
+				<el-popover content="跳转至数据资源库" placement="top">
+					<template #reference>
+						<div class="item-total" @click="emit('count-click', item)">{{ item.count }}{{ countSuffix }}</div>
+					</template>
+				</el-popover>
+				<el-icon color="var(--color-primary-100)">
+					<ArrowRightBold />
+				</el-icon>
+				<div class="item-dot" v-if="item.delta">+{{ item.delta }}</div>
+			</div>
+
+			<div v-if="shouldShowMoreCard" class="summary-item" @click="emit('more-click')">
+				<div class="item-more">{{ moreText }} ({{ totalCount }}家)</div>
+				<el-icon color="var(--color-primary-100)">
+					<ArrowRightBold />
+				</el-icon>
+			</div>
+		</div>
+
+		<div v-else class="cards-empty">
+			<el-empty :description="emptyText" :image-size="80" />
+		</div>
+	</div>
+</template>
+
+<script setup>
+import TimeTabPane from "@/components/base/TimeTabPane/index.vue";
+import { ArrowRightBold } from "@element-plus/icons-vue";
+
+import { computed } from "vue";
+
+const props = defineProps({
+	descriptionText: {
+		type: String,
+		default: ""
+	},
+	cards: {
+		type: Array,
+		default: () => []
+	},
+	totalCount: {
+		type: Number,
+		default: 0
+	},
+	showMoreCard: {
+		type: Boolean,
+		default: true
+	},
+	moreCardMinCount: {
+		type: Number,
+		default: 8
+	},
+	emptyText: {
+		type: String,
+		default: "暂无数据"
+	},
+	activeTime: {
+		type: String,
+		default: "近一年"
+	},
+	tipIcon: {
+		type: String,
+		default: ""
+	},
+	defaultAvatar: {
+		type: String,
+		default: ""
+	},
+	countSuffix: {
+		type: String,
+		default: "项"
+	},
+	moreText: {
+		type: String,
+		default: "查看全部机构"
+	},
+	panelWidth: {
+		type: String,
+		default: "1600px"
+	},
+	loading: {
+		type: Boolean,
+		default: false
+	}
+});
+
+const emit = defineEmits(["time-click", "name-click", "count-click", "more-click"]);
+
+const shouldShowMoreCard = computed(() => {
+	if (!props.showMoreCard) return false;
+	if (props.moreCardMinCount <= 0) return true;
+	return (props.cards?.length || 0) >= props.moreCardMinCount;
+});
+
+const onTimeClick = event => {
+	emit("time-click", event);
+};
+</script>
+
+<style scoped lang="scss">
+.summary-cards-panel {
+	margin: 48px auto 0;
+
+	.date-box {
+		display: flex;
+		align-items: center;
+
+		.date-icon {
+			width: 16px;
+			height: 16px;
+			font-size: 0;
+			margin-right: 6px;
+
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		.date-text {
+			width: 20px;
+			flex: auto;
+			font-size: 18px;
+			line-height: 18px;
+			font-family: Source Han Sans CN;
+			color: var(--text-primary-80-color);
+		}
+	}
+
+	.cards-box {
+		margin: 20px 0 64px;
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+		grid-auto-rows: 80px;
+		gap: 16px;
+		font-family: Microsoft YaHei;
+
+		.summary-item {
+			padding: 0 16px;
+			display: flex;
+			box-sizing: border-box;
+			background: rgba(255, 255, 255, 0.65);
+			border: 1px solid rgba(255, 255, 255, 1);
+			border-radius: 10px;
+			box-shadow: 0 0 20px 0 rgba(25, 69, 130, 0.1);
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+			transition: transform 0.3s ease, box-shadow 0.3s ease;
+			position: relative;
+
+			&:hover {
+				transform: translateY(-3px);
+				box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+			}
+
+			.item-left {
+				width: 48px;
+				height: 48px;
+				font-size: 0;
+
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+
+			.item-center {
+				width: 20px;
+				flex: auto;
+				margin: 0 16px;
+				cursor: pointer;
+			}
+
+			.item-name {
+				color: rgba(59, 65, 75, 1);
+				font-size: 20px;
+				font-weight: 700;
+				line-height: 20px;
+
+				&:hover {
+					color: var(--color-primary-100);
+					text-decoration: underline;
+				}
+			}
+
+			.item-sub-text {
+				margin-top: 6px;
+				color: var(--text-primary-50-color);
+				font-size: 14px;
+				line-height: 18px;
+			}
+
+			.item-total {
+				font-size: 20px;
+				margin-right: 2px;
+				white-space: nowrap;
+				font-weight: 700;
+				line-height: 20px;
+				color: var(--color-primary-100);
+
+				&:hover {
+					text-decoration: underline;
+				}
+			}
+
+			.item-more {
+				font-size: 16px;
+				margin-right: 12px;
+				white-space: nowrap;
+				font-weight: 700;
+				line-height: 16px;
+				color: var(--color-primary-100);
+			}
+
+			.item-dot {
+				position: absolute;
+				right: -13px;
+				top: -10px;
+				padding: 0 8px;
+				height: 26px;
+				background-color: #ff4d4f;
+				color: white;
+				font-size: 16px;
+				line-height: 26px;
+				font-family: Source Han Sans CN;
+				border-radius: 14px;
+				letter-spacing: 1px;
+			}
+		}
+	}
+
+	.cards-empty {
+		margin: 20px 0 64px;
+		height: 120px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: rgba(255, 255, 255, 0.65);
+		border: 1px solid rgba(255, 255, 255, 1);
+		border-radius: 10px;
+		box-shadow: 0 0 20px 0 rgba(25, 69, 130, 0.1);
+	}
+}
+</style>

src/router/modules/bill.js

@@ -15,6 +15,7 @@ const BillProgressForecast = () => import('@/views/bill/influence/ProgressForeca
 const BillInfluenceScientificResearch = () => import('@/views/bill/influence/scientificResearch/index.vue')
 const BillRelevantCircumstance = () => import('@/views/bill/relevantCircumstance/index.vue')
 const BillVersionCompare = () => import('@/views/bill/versionCompare/index.vue')
+const BillAllCommittee = () => import('@/views/bill/allCommittee/index.vue')
 
 
 const billRoutes = [
@@ -28,6 +29,19 @@ const billRoutes = [
       isShowHeader: true
     }
   },
+  {
+    path: "/bill/allCommittee",
+    name: "BillAllCommittee",
+    component: BillAllCommittee,
+    meta: {
+      title: "法案委员会列表",
+      isShowHeader: true
+    }
+  },
+  {
+    path: "/billAllCommittee",
+    redirect: "/bill/allCommittee"
+  },
   {
     path: "/billLayout",
     name: "BillLayoutContainer",

src/views/bill/allCommittee/index.vue

+<template>
+	<div class="view-box">
+		<div class="container-box">
+			<div class="hard-box">
+				<div class="hard-name text-title-0-show">美国国会委员会</div>
+				<div class="hard-num text-title-2-show">{{ committeeInfo.total }}个</div>
+				<div style="width: 0; flex: auto"></div>
+				<div class="hard-input">
+					<el-input
+						v-model="committeeInfo.keyWord"
+						@keyup.enter="onAllCommittee()"
+						style="width: 100%; height: 100%"
+						:suffix-icon="Search"
+						placeholder="搜索委员会"
+					/>
+				</div>
+			</div>
+
+			<div class="date-box">
+				<div class="date-text">近期美国国会各委员会涉华提案数量汇总</div>
+				<TimeTabPane @time-click="handleDateChange" activeTime="近一年" />
+			</div>
+
+			<div class="committee-list" ref="refCommittee" v-loading="committeeInfo.loading">
+				<div class="committee-item" v-for="item in committeeInfo.list" :key="item.id" @click="handleToDataLibrary(item)">
+					<div class="item-left">
+						<img :src="iconCommit" alt="" />
+					</div>
+					<div class="item-right">
+						<div class="item-name one-line-ellipsis">{{ item.name }}</div>
+						<div class="item-chamber one-line-ellipsis">{{ item.chamber }}</div>
+					</div>
+					<div class="item-total">{{ item.count }}项</div>
+					<el-icon color="var(--color-primary-100)">
+						<ArrowRightBold />
+					</el-icon>
+				</div>
+			</div>
+
+			<div class="pagination-box">
+				<el-pagination
+					@current-change="onAllCommittee"
+					:pageSize="committeeInfo.pageSize"
+					:current-page="committeeInfo.pageNum"
+					background
+					layout="prev, pager, next"
+					:total="committeeInfo.total"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup name="BillAllCommittee">
+import { onMounted, reactive, ref } from "vue";
+import { Search } from "@element-plus/icons-vue";
+import { ArrowRightBold } from "@element-plus/icons-vue";
+import router from "@/router";
+import TimeTabPane from "@/components/base/TimeTabPane/index.vue";
+import { getStatisticsBillCountByCommittee } from "@/api/bill/billHome";
+import iconCommit from "../billHome/assets/icons/icon-commit.png";
+
+const committeeInfo = reactive({
+	loading: false,
+	pageNum: 1,
+	pageSize: 8,
+	total: 0,
+	keyWord: "",
+	dateDesc: "近一年",
+	list: []
+});
+
+const getChamberLabel = orgType => {
+	if (orgType === "Senate") return "参议院";
+	if (orgType === "House") return "众议院";
+	return orgType || "";
+};
+
+const onAllCommittee = async num => {
+	committeeInfo.pageNum = num || 1;
+	committeeInfo.loading = true;
+	try {
+		const res = await getStatisticsBillCountByCommittee({
+			dateDesc: committeeInfo.dateDesc
+		});
+		if (res.code === 200 && Array.isArray(res.data)) {
+			const source = res.data
+				.map(item => ({
+					id: `${item.orgType || ""}-${item.orgName || ""}`,
+					name: item.orgName,
+					chamber: getChamberLabel(item.orgType),
+					count: Number(item.count || 0)
+				}))
+				.filter(item => !committeeInfo.keyWord || item.name?.includes(committeeInfo.keyWord))
+				.sort((a, b) => (b.count || 0) - (a.count || 0));
+
+			committeeInfo.total = source.length;
+			const start = (committeeInfo.pageNum - 1) * committeeInfo.pageSize;
+			committeeInfo.list = source.slice(start, start + committeeInfo.pageSize);
+		} else {
+			committeeInfo.total = 0;
+			committeeInfo.list = [];
+		}
+	} catch (error) {
+		committeeInfo.total = 0;
+		committeeInfo.list = [];
+	}
+	committeeInfo.loading = false;
+};
+
+const handleDateChange = event => {
+	committeeInfo.dateDesc = event?.time || "近一年";
+	onAllCommittee();
+};
+
+const handleToDataLibrary = item => {
+	const route = router.resolve({
+		path: "/dataLibrary/countryBill",
+		query: {
+			selectedOrg: item.name,
+			selectedCongress: item.chamber
+		}
+	});
+	window.open(route.href, "_blank");
+};
+
+const refCommittee = ref();
+onMounted(() => {
+	let height = 2;
+	if (refCommittee.value) {
+		height = Math.floor(refCommittee.value?.clientHeight / 120);
+	}
+	committeeInfo.pageSize = height * 4;
+	onAllCommittee();
+});
+</script>
+
+<style scoped lang="scss">
+.view-box {
+	width: 100%;
+	height: 100%;
+	background: url("../billHome/assets/images/background.png"), linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
+	background-size: 100% 100%;
+	display: flex;
+	justify-content: center;
+
+	.container-box {
+		width: 1600px;
+		padding: 50px 0 20px;
+		display: flex;
+		flex-direction: column;
+
+		.hard-box {
+			display: flex;
+			align-items: center;
+			width: 100%;
+
+			.hard-name {
+				color: var(--text-primary-90-color);
+				height: 62px;
+				line-height: 62px !important;
+			}
+
+			.hard-num {
+				height: 36px;
+				background-color: var(--color-primary-100);
+				color: var(--bg-white-100);
+				border-radius: 18px;
+				line-height: 36px !important;
+				padding: 0 16px;
+				margin-left: 16px;
+			}
+
+			.hard-input {
+				background-color: var(--el-fill-color-blank);
+				border-radius: var(--el-border-radius-base);
+				box-shadow: 0 0 0 1px var(--el-border-color) inset;
+				box-sizing: border-box;
+				margin-left: 20px;
+				width: 180px;
+				height: 32px;
+			}
+		}
+
+		.date-box {
+			margin-top: 6px;
+			display: flex;
+			align-items: center;
+			width: 100%;
+
+			.date-text {
+				width: 20px;
+				flex: auto;
+				font-size: 18px;
+				line-height: 18px;
+				font-family: Source Han Sans CN;
+				color: var(--text-primary-80-color);
+			}
+		}
+
+		.committee-list {
+			width: 100%;
+			height: 20px;
+			padding: 16px 0;
+			margin-top: 10px;
+			flex: auto;
+			display: grid;
+			grid-template-columns: repeat(4, 1fr);
+			grid-auto-rows: 104px;
+			gap: 16px;
+
+			.committee-item {
+				padding: 0 16px;
+				display: flex;
+				background: rgba(255, 255, 255, 0.65);
+				border: 1px solid rgba(255, 255, 255, 1);
+				border-radius: 10px;
+				box-shadow: 0 0 20px 0 rgba(25, 69, 130, 0.1);
+				align-items: center;
+				cursor: pointer;
+				transition: transform 0.3s ease, box-shadow 0.3s ease;
+
+				&:hover {
+					transform: translateY(-3px);
+					box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+				}
+
+				.item-left {
+					width: 48px;
+					height: 48px;
+					margin-right: 12px;
+					img {
+						width: 100%;
+						height: 100%;
+					}
+				}
+
+				.item-right {
+					flex: auto;
+					min-width: 0;
+					.item-name {
+						font-size: 20px;
+						font-weight: 700;
+						line-height: 22px;
+						color: var(--text-primary-80-color);
+					}
+					.item-chamber {
+						margin-top: 6px;
+						font-size: 14px;
+						color: var(--text-primary-50-color);
+					}
+				}
+
+				.item-total {
+					font-size: 20px;
+					font-weight: 700;
+					line-height: 20px;
+					color: var(--color-primary-100);
+					margin-right: 6px;
+				}
+			}
+		}
+
+		.pagination-box {
+			display: flex;
+			justify-content: center;
+		}
+	}
+}
+</style>

src/views/bill/billHome/index.vue

@@ -9,34 +9,22 @@
 						:containerRef="containerRef" areaName="法案" :enableBillTypeSwitch="true" defaultBillSearchType="federal" />
 				</div>
 
-				<div class="committee-cards-section">
-					<div class="committee-cards-filter">
-						<span class="committee-cards-desc">近期美国国会各委员会涉华提案数量汇总</span>
-						<el-radio-group v-model="committeeTimeRange" class="committee-time-switch" size="default">
-							<el-radio-button v-for="item in committeeTimeOptions" :key="item.value" :value="item.value">
-								<span class="committee-time-switch-inner">
-									<el-icon v-if="committeeTimeRange === item.value" class="committee-time-switch-icon">
-										<Calendar />
-									</el-icon>
-									{{ item.label }}
-								</span>
-							</el-radio-button>
-						</el-radio-group>
-					</div>
-					<div class="committee-cards-row">
-						<div v-for="item in committeeCardList" :key="item.id" class="committee-card"
-							@click="handleToDataLibrary(item)">
-							<div class="committee-card-icon">
-								<img :src="iconCommit" alt="委员会头像" />
-							</div>
-							<div class="committee-card-content">
-								<div class="committee-card-name">{{ item.name }}</div>
-								<div class="committee-card-chamber">{{ item.chamber }}</div>
-							</div>
-							<div class="committee-card-count">{{ item.count }}项 &gt;</div>
-						</div>
-					</div>
-				</div>
+				<SummaryCardsPanel
+					descriptionText="近期美国国会各委员会涉华提案数量汇总"
+					:cards="committeeCards"
+					:totalCount="committeeTotalCount"
+					:tipIcon="box7HeaderIcon"
+					:defaultAvatar="iconCommit"
+					:loading="committeeLoading"
+					activeTime="近一年"
+					emptyText="暂无数据"
+					moreText="查看全部委员会"
+					:moreCardMinCount="7"
+					@time-click="handleCommitteeTimeClick"
+					@name-click="handleToDataLibrary"
+					@count-click="handleToDataLibrary"
+					@more-click="handleToCommitteeMore"
+				/>
 
 				<DivideHeader id="position1" class="divide1" :titleText="'最新动态'"></DivideHeader>
 				<div class="home-content-center">
@@ -256,6 +244,7 @@
 
 <script setup>
 import RiskSignal from "@/components/base/riskSignal/index.vue";
+import SummaryCardsPanel from "@/components/base/SummaryCardsPanel/index.vue";
 import { onMounted, ref, onUnmounted, nextTick, watch, computed } from "vue";
 import router from "@/router/index";
 import setChart from "@/utils/setChart";
@@ -275,7 +264,7 @@ import {
 import { getPersonSummaryInfo } from "@/api/common/index";
 import { getChartAnalysis } from "@/api/aiAnalysis/index";
 import DivideHeader from "@/components/DivideHeader.vue";
-import overviewMainBox from "@/components/base/boxBackground/overviewMainBox.vue";
+import OverviewMainBox from "@/components/base/boxBackground/overviewMainBox.vue";
 import OverviewCard from "./OverviewCard.vue";
 import ResourceLibrarySection from "./ResourceLibrarySection.vue";
 import { useContainerScroll } from "@/hooks/useScrollShow";
@@ -294,7 +283,6 @@ import box7HeaderIcon from "./assets/images/box7-header-icon.png";
 import iconCommit from "./assets/icons/icon-commit.png";
 
 import { ElMessage } from "element-plus";
-import { Calendar } from "@element-plus/icons-vue";
 import { useGotoNewsDetail } from "@/router/modules/news";
 
 // 跳转人物主页（MessageBubble 的 person-click 传入整条列表项，需取 personId）
@@ -368,15 +356,11 @@ const handleClickToCharacter = async item => {
 const containerRef = ref(null);
 const { isShow } = useContainerScroll(containerRef);
 
-// 委员会卡片占位数据
-const committeeTimeRange = ref("近一月");
-const committeeTimeOptions = [
-	{ label: "近一周", value: "近一周" },
-	{ label: "近一月", value: "近一月" },
-	{ label: "近一年", value: "近一年" },
-	{label:"全部时间", value: "全部时间"}
-];
+// 委员会卡片数据
+const committeeTimeRange = ref("近一年");
 const committeeCardList = ref([]);
+const committeeTotalCount = ref(0);
+const committeeLoading = ref(false);
 
 const getChamberLabel = orgType => {
 	if (orgType === "Senate") return "参议院";
@@ -384,27 +368,51 @@ const getChamberLabel = orgType => {
 	return orgType || "";
 };
 
+const committeeCards = computed(() => {
+	return committeeCardList.value.map(item => ({
+		id: item.id,
+		name: item.name,
+		subText: item.chamber,
+		count: item.count
+	}));
+});
+
 const handleGetCommitteeBillCount = async () => {
+	committeeLoading.value = true;
 	try {
 		const res = await getStatisticsBillCountByCommittee({
 			dateDesc: committeeTimeRange.value
 		});
 		if (res.code === 200 && Array.isArray(res.data)) {
-			committeeCardList.value = res.data
+			const mappedList = res.data
 				.map(item => ({
 					id: `${item.orgType || ""}-${item.orgName || ""}`,
 					name: item.orgName,
 					chamber: getChamberLabel(item.orgType),
 					count: Number(item.count || 0)
 				}))
-				.sort((a, b) => (b.count || 0) - (a.count || 0))
-				.slice(0, 3);
+				.sort((a, b) => (b.count || 0) - (a.count || 0));
+			committeeTotalCount.value = mappedList.length;
+			committeeCardList.value = mappedList.slice(0, 3);
 		} else {
+			committeeTotalCount.value = 0;
 			committeeCardList.value = [];
 		}
 	} catch (error) {
+		committeeTotalCount.value = 0;
 		committeeCardList.value = [];
 	}
+	committeeLoading.value = false;
+};
+
+const handleCommitteeTimeClick = event => {
+	committeeTimeRange.value = event?.time || "近一年";
+	handleGetCommitteeBillCount();
+};
+
+const handleToCommitteeMore = () => {
+	const route = router.resolve({ path: "/bill/allCommittee" });
+	window.open(route.href, "_blank");
 };
 
 const hotBillList = ref([]); // 热门法案列表
@@ -1364,13 +1372,9 @@ watch(box8selectetedTime, () => {
 	handleBox8Data();
 });
 
-watch(
-	committeeTimeRange,
-	() => {
-		handleGetCommitteeBillCount();
-	},
-	{ immediate: true }
-);
+onMounted(() => {
+	handleGetCommitteeBillCount();
+});
 
 const handleToPosi = id => {
 	const element = document.getElementById(id);
@@ -1406,16 +1410,25 @@ const handleResize = () => {
 // 下钻至资源库
 const handleToDataLibrary = (item) => {
 
-	// console.log('item', item);
-	const selectParam = {
-		selectedOrg: item.name,
-		selectedCongress: item.chamber
-	}
-	const route = router.resolve({
-		path: "/dataLibrary/countryBill",
-		query: selectParam
+	window.sessionStorage.setItem("curTabName", item.id);
+	const curRoute = router.resolve({
+		path: "/institution",
+		query: {
+			id: item.id
+		}
 	});
-	window.open(route.href, "_blank");
+	window.open(curRoute.href, "_blank");
+
+	// console.log('item', item);
+	// const selectParam = {
+	// 	selectedOrg: item.name,
+	// 	selectedCongress: item.chamber
+	// }
+	// const route = router.resolve({
+	// 	path: "/dataLibrary/countryBill",
+	// 	query: selectParam
+	// });
+	// window.open(route.href, "_blank");
 
 }
 

src/views/bill/billLayout/index.vue

@@ -134,9 +134,10 @@ const handleAnalysisClick = analysisType => {
 
 	// 进展预测 -> 法案简介页（法案进展）
 	if (analysisType === "forsee") {
-		router.push({
+		const target = router.resolve({
 			path: `/billLayout/ProgressForecast/${billId}`,
 		});
+		window.open(target.href, "_blank");
 		return;
 	}
 

src/views/bill/deepDig/processAnalysis/index.vue

 <template>
-	<BillPageShell class="wrap">
-		<div class="left">
-			<div class="box1">
-				<!-- <div class="box-header">
-					<div class="header-left"></div>
-					<div class="title">典型阶段耗时</div>
-					<div class="header-right">
-						<div class="icon">
-							<img src="@/assets/icons/box-header-icon1.png" alt="" />
-						</div>
-						<div class="icon">
-							<img src="@/assets/icons/box-header-icon2.png" alt="" />
-						</div>
-						<div class="icon">
-							<img src="@/assets/icons/box-header-icon3.png" alt="" />
-						</div>
-					</div>
-				</div>
-				<div class="box1-main">
-					<div class="box1-main-center" id="chart1"></div>
-					<div class="box1-main-footer">
-						<div class="box-footer-left">
-							<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
-						</div>
-						<div class="box-footer-center">
-							从立法耗时角度分析，大而美法案从提交到签署仅39天，远快于历史同类法案（通常需6个月以上），立法速度极快。
-						</div>
-						<div class="box-footer-right">
-							<img src="../assets/icons/arrow-right.png" alt="" />
-						</div>
-					</div>
-				</div> -->
+	<BillPageShell>
+		<div class="wrap">
+			<div class="left">
+				<div class="box1">
 				<AnalysisBox title="典型阶段耗时分析">
 					<div class="analysis-ai-wrapper analysis-ai-wrapper--box1">
 						<div class="box1-main" :class="{ 'box1-main--full': !timeFooterText }">
@@ -48,7 +20,7 @@
 							</div>
 						</div>
 						<div v-if="!aiPaneVisible.box1" class="analysis-ai-tip-row">
-							<TipTab class="analysis-ai-tip" :text="'与历史同类法案的典型阶段耗时对比分析,数据来源：美国国会官网'"/>
+							<TipTab class="analysis-ai-tip" :text="'与历史同类法案的典型阶段耗时对比分析,数据来源：美国国会官网'" />
 							<AiButton class="analysis-ai-tip-action" @mouseenter="handleShowAiPane('box1')" />
 						</div>
 						<div v-if="aiPaneVisible.box1" class="analysis-ai-pane" @mouseleave="handleHideAiPane('box1')">
@@ -58,36 +30,6 @@
 				</AnalysisBox>
 			</div>
 			<div class="box2">
-				<!-- <div class="box-header">
-					<div class="header-left"></div>
-					<div class="title">修正案次数分析</div>
-					<div class="header-right">
-						<div class="icon">
-							<img src="@/assets/icons/box-header-icon1.png" alt="" />
-						</div>
-						<div class="icon">
-							<img src="@/assets/icons/box-header-icon2.png" alt="" />
-						</div>
-						<div class="icon">
-							<img src="@/assets/icons/box-header-icon3.png" alt="" />
-						</div>
-					</div>
-				</div>
-				<div class="box2-main">
-					<div class="box2-main-center" id="chart2"></div>
-					<div class="box2-main-footer">
-						<div class="box-footer-left">
-							<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
-						</div>
-						<div class="box-footer-center">
-							法案本质是共和党与资本集团的深度联盟，共和党获超
-							​80%利益集团献金，以减税、松监管、军工扩张为核心回报。
-						</div>
-						<div class="box-footer-right">
-							<img src="../assets/icons/arrow-right.png" alt="" />
-						</div>
-					</div>
-				</div> -->
 				<AnalysisBox title="修正案次数分析">
 					<div class="analysis-ai-wrapper analysis-ai-wrapper--box2">
 						<div class="box2-main" :class="{ 'box2-main--full': !amendFooterText }">
@@ -105,7 +47,7 @@
 							</div>
 						</div>
 						<div v-if="!aiPaneVisible.box2" class="analysis-ai-tip-row">
-							<TipTab class="analysis-ai-tip" :text="'与历史同类法案的修正案次数对比分析,数据来源：美国国会官网'"/>
+							<TipTab class="analysis-ai-tip" :text="'与历史同类法案的修正案次数对比分析,数据来源：美国国会官网'" />
 							<AiButton class="analysis-ai-tip-action" @mouseenter="handleShowAiPane('box2')" />
 						</div>
 						<div v-if="aiPaneVisible.box2" class="analysis-ai-pane" @mouseleave="handleHideAiPane('box2')">
@@ -117,272 +59,6 @@
 		</div>
 		<div class="right">
 			<div class="box3">
-				<!-- <div class="box-header">
-					<div class="header-left"></div>
-					<div class="title">投票分析</div>
-					<div class="header-right">
-						<div class="icon">
-							<img src="@/assets/icons/box-header-icon1.png" alt="" />
-						</div>
-						<div class="icon">
-							<img src="@/assets/icons/box-header-icon2.png" alt="" />
-						</div>
-						<div class="icon">
-							<img src="@/assets/icons/box-header-icon3.png" alt="" />
-						</div>
-					</div>
-				</div>
-				<div class="box3-main">
-					<div class="box3-main-center">
-						<div class="box3-main-center-header">
-							<div class="box3-main-center-header-box1">立法阶段</div>
-							<div class="box3-main-center-header-box2">票数</div>
-							<div class="box3-main-center-header-box3">平均区间</div>
-							<div class="box3-main-center-header-box4">占比</div>
-							<div class="box3-main-center-header-box5">
-								倒戈人数<span style="font-weight: normal; display: inline-block">(平均区间)</span>
-							</div>
-							<div class="box3-main-center-header-box6">关键议员</div>
-						</div>
-						<div class="box3-main-center-content">
-							<div class="box3-main-center-content-box" v-for="item in voteAnalysisList" :key="item.actionId">
-								<div class="item">
-									<div class="item-box1">
-										<div class="box1-left">
-											<div style="width: 100%; display: flex; flex-direction: column; align-items: flex-end">
-												<div class="name nameBlod" :title="item.actionTitle" style="
-														white-space: nowrap;
-														overflow: hidden;
-														text-overflow: ellipsis;
-														max-width: 100%;
-													">
-													{{ item.actionTitle }}
-												</div>
-												<div class="time">
-													{{ formatDate(item.actionDate) }}
-												</div>
-											</div>
-										</div>
-										<div class="box1-right">
-											<div class="box1-right-top">
-												<el-progress :percentage="Number(item.agreePercent)" :show-text="false" color="rgb(33, 129, 57)">
-												</el-progress>
-											</div>
-											<div class="box1-right-bottom">
-												<el-progress :percentage="Number(item.againstPercent)" :show-text="false" color="rgb(206, 79, 81)">
-												</el-progress>
-											</div>
-										</div>
-									</div>
-									<div class="item-box2">
-										<div class="box2-1" style="color: rgb(33, 129, 57)">{{ item.agreeCount + "票" }}</div>
-										<div class="box2-2" style="color: rgb(206, 79, 81)">{{ item.againstCount + "票" }}</div>
-									</div>
-									<div class="item-box3">
-										<div class="box3-1"></div>
-										<div class="box3-2"></div>
-									</div>
-									<div class="item-box4">
-										<div class="box4-1" style="color: rgb(33, 129, 57)">{{ item.agreePercent + "%" }}</div>
-										<div class="box4-2" style="color: rgb(206, 79, 81)">{{ item.againstPercent + "%" }}</div>
-									</div>
-									<div class="item-box5"></div>
-									<div class="item-box6">
-										<el-icon size="20" color="#555">
-											<ArrowDownBold />
-										</el-icon>
-									</div>
-								</div>
-								<div class="item">
-									<div class="item-box1">
-										<div class="box1-left">
-											<div class="icon">
-												<img :src="MZD" alt="" />
-											</div>
-											<div class="name">民主党</div>
-										</div>
-										<div class="box1-right">
-											<div class="box1-right-top">
-												<el-progress :percentage="Number(item.dagreePercent)" :show-text="false" color="rgb(33, 129, 57)">
-												</el-progress>
-											</div>
-											<div class="box1-right-bottom">
-												<el-progress :percentage="Number(item.dagainstPercent)" :show-text="false" color="rgb(206, 79, 81)">
-												</el-progress>
-											</div>
-										</div>
-									</div>
-									<div class="item-box2">
-										<div class="box2-1" style="color: rgb(33, 129, 57)">{{ item.dagreeCount + "票" }}</div>
-										<div class="box2-2" style="color: rgb(206, 79, 81)">{{ item.dagainstCount + "票" }}</div>
-									</div>
-									<div class="item-box3"></div>
-									<div class="item-box4">
-										<div class="box4-1" style="color: rgb(33, 129, 57)">{{ item.dagreePercent + "%" }}</div>
-										<div class="box4-2" style="color: rgb(206, 79, 81)">{{ item.dagainstPercent + "%" }}</div>
-									</div>
-									<div class="item-box5">
-										<div class="box5-1" style="color: #ce4f51">{{ item.dreverseCount + "人" }}</div>
-									</div>
-									<div class="item-box6">
-										<div class="img-box" v-if="item.dpersonImageUrl">
-											<img :src="item.dpersonImageUrl" alt="" />
-										</div>
-									</div>
-								</div>
-								<div class="item">
-									<div class="item-box1">
-										<div class="box1-left">
-											<div class="icon">
-												<img :src="GHD" alt="" />
-											</div>
-											<div class="name">共和党</div>
-										</div>
-										<div class="box1-right">
-											<div class="box1-right-top">
-												<el-progress :percentage="Number(item.ragreePercent)" :show-text="false" color="rgb(33, 129, 57)">
-												</el-progress>
-											</div>
-											<div class="box1-right-bottom">
-												<el-progress :percentage="Number(item.ragainstPercent)" :show-text="false" color="rgb(206, 79, 81)">
-												</el-progress>
-											</div>
-										</div>
-									</div>
-									<div class="item-box2">
-										<div class="box2-1" style="color: rgb(33, 129, 57)">{{ item.ragreeCount + "票" }}</div>
-										<div class="box2-2" style="color: rgb(206, 79, 81)">{{ item.ragainstCount + "票" }}</div>
-									</div>
-									<div class="item-box3"></div>
-									<div class="item-box4">
-										<div class="box4-1" style="color: rgb(33, 129, 57)">{{ item.ragreePercent + "%" }}</div>
-										<div class="box4-2" style="color: rgb(206, 79, 81)">{{ item.ragainstPercent + "%" }}</div>
-									</div>
-									<div class="item-box5">
-										<div class="box5-1" style="color: #ce4f51">{{ item.rreverseCount + "人" }}</div>
-									</div>
-									<div class="item-box6">
-										<div class="img-box" v-if="item.rpersonImageUrl">
-											<img :src="item.rpersonImageUrl" alt="" />
-										</div>
-									</div>
-								</div>
-							</div>
-								<div class="item" v-for="(item, index) in voteAnalysisList3" :key="index">
-									<div class="item-box1">
-										<div class="box1-left">
-											<div class="icon" v-if="item.nameIcon">
-												<img :src="item.nameIcon" alt="" />
-											</div>
-											<div>
-												<div class="name" :class="{ nameBlod: item.nameBold }">
-													{{ item.name }}
-												</div>
-												<div class="time">
-													{{ item.time }}
-												</div>
-											</div>
-										</div>
-										<div class="box1-right">
-											<div class="box1-right-top">
-												<el-progress :percentage="item.supportRate" :show-text="false"> </el-progress>
-											</div>
-											<div class="box1-right-bottom">
-												<el-progress :percentage="item.againistRate" :show-text="false"> </el-progress>
-											</div>
-										</div>
-									</div>
-									<div class="item-box2">
-										<div class="box2-1">{{ item.support + "票" }}</div>
-										<div class="box2-2">{{ item.againist + "票" }}</div>
-									</div>
-									<div class="item-box3">
-										<div class="box3-1">{{ item.supportRank }}</div>
-										<div class="box3-2">{{ item.againistRank }}</div>
-									</div>
-									<div class="item-box4">
-										<div class="box4-1">{{ item.supportRate + "%" }}</div>
-										<div class="box4-2">{{ item.againistRate + "%" }}</div>
-									</div>
-									<div class="item-box5">
-										<div class="box5-1" v-if="item.people">{{ item.people+' 人' }}</div>
-										<div class="box5-2" v-if="item.peopleRank">{{ `( ${item.peopleRank} )` }}</div>
-									</div>
-									<div class="item-box6">
-										<div class="img-box" v-if="item.keyUser">
-											<img :src="item.keyUser" alt="" />
-										</div>
-										<div v-else>
-											<el-icon size="20" color="#555"><ArrowDownBold /></el-icon>
-										</div>
-									</div>
-								</div>
-							</div>
-							<div class="box3-main-center-content-box">
-								<div class="item" v-for="(item, index) in voteAnalysisList4" :key="index">
-									<div class="item-box1">
-										<div class="box1-left">
-											<div class="icon" v-if="item.nameIcon">
-												<img :src="item.nameIcon" alt="" />
-											</div>
-											<div>
-												<div class="name" :class="{ nameBlod: item.nameBold }">
-													{{ item.name }}
-												</div>
-												<div class="time">
-													{{ item.time }}
-												</div>
-											</div>
-										</div>
-										<div class="box1-right">
-											<div class="box1-right-top">
-												<el-progress :percentage="item.supportRate" :show-text="false"> </el-progress>
-											</div>
-											<div class="box1-right-bottom">
-												<el-progress :percentage="item.againistRate" :show-text="false"> </el-progress>
-											</div>
-										</div>
-									</div>
-									<div class="item-box2">
-										<div class="box2-1">{{ item.support + "票" }}</div>
-										<div class="box2-2">{{ item.againist + "票" }}</div>
-									</div>
-									<div class="item-box3">
-										<div class="box3-1">{{ item.supportRank }}</div>
-										<div class="box3-2">{{ item.againistRank }}</div>
-									</div>
-									<div class="item-box4">
-										<div class="box4-1">{{ item.supportRate + "%" }}</div>
-										<div class="box4-2">{{ item.againistRate + "%" }}</div>
-									</div>
-									<div class="item-box5">
-										<div class="box5-1" v-if="item.people">{{ item.people+' 人' }}</div>
-										<div class="box5-2" v-if="item.peopleRank">{{ `( ${item.peopleRank} )` }}</div>
-									</div>
-									<div class="item-box6">
-										<div class="img-box" v-if="item.keyUser">
-											<img :src="item.keyUser" alt="" />
-										</div>
-										<div v-else>
-											<el-icon size="20" color="#555"><ArrowDownBold /></el-icon>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-					<div class="box3-main-footer">
-						<div class="box-footer-left">
-							<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
-						</div>
-						<div class="box-footer-center">
-							法案以218:214​（众议院）和51:50​（副总统决胜票）微弱优势强行通过，暴露两党极端对立、党内倒戈频发的特点。
-						</div>
-						<div class="box-footer-right">
-							<img src="../assets/icons/arrow-right.png" alt="" />
-						</div>
-					</div>
-				</div> -->
 				<AnalysisBox title="投票分析">
 					<div class="vote-legend">
 						<div class="vote-legend-item">
@@ -716,6 +392,7 @@
 				</AnalysisBox>
 			</div>
 		</div>
+	</div>
 	</BillPageShell>
 </template>
 

src/views/bill/influence/industry/index.vue

 <template>
-	<div class="industry-wrap">
-		<div class="left">
-			<AnalysisBox title="涉及行业" :showAllBtn="false" width="100%" height="100%">
-				<div class="left-main">
-					<div class="left-center">
-						<el-select v-model="curHylyId" placeholder="请选择领域" class="left-center-select"
-							@change="handleIndustryChange">
-							<el-option v-for="item in industryList" :key="item.id" :label="item.name || item.hylymc"
-								:value="item.id" />
-						</el-select>
-						<el-input v-model="companySearchKeyword" placeholder="搜索实体" class="left-center-search"
-							:suffix-icon="Search" clearable />
-					</div>
-					<div class="left-list">
-						<div class="left-list-title">实体名称</div>
-						<div class="left-list-content">
-							<el-empty v-if="!curCompanyList?.length" style="padding: 60px 0;" description="暂无数据"
-								:image-size="100" />
-							<el-scrollbar v-else height="100%" always>
-								<div class="item-box">
-									<div class="item"
-										:class="{ itemActive: companyActiveIndex === ((currentPage - 1) * pageSize + idx) }"
-										@click="handleClickCompany(val, idx)" v-for="(val, idx) in curCompanyList"
-										:key="val.id">
-										<div class="item-icon">
-											<img :src="defaultIcon2" alt="" class="item-img" />
-										</div>
-										<div class="title"
-											:class="{ titleActive: companyActiveIndex === ((currentPage - 1) * pageSize + idx) }">
-											{{ val.name }}
-										</div>
-										<div class="icon">
-											<img v-if="val.status === 'up'" :src="upIcon" alt="" />
-											<img v-if="val.status === 'down'" :src="downIcon" alt="" />
+	<BillPageShell>
+		<div class="wrap">
+			<div class="left">
+				<AnalysisBox title="涉及行业" :showAllBtn="false" width="100%" height="100%">
+					<div class="left-main">
+						<div class="left-center">
+							<el-select
+								v-model="curHylyId"
+								placeholder="请选择领域"
+								class="left-center-select"
+								@change="handleIndustryChange"
+							>
+								<el-option
+									v-for="item in industryList"
+									:key="item.id"
+									:label="item.name || item.hylymc"
+									:value="item.id"
+								/>
+							</el-select>
+							<el-input
+								v-model="companySearchKeyword"
+								placeholder="搜索实体"
+								class="left-center-search"
+								:suffix-icon="Search"
+								clearable
+							/>
+						</div>
+						<div class="left-list">
+							<div class="left-list-title">实体名称</div>
+							<div class="left-list-content">
+								<el-empty
+									v-if="!curCompanyList?.length"
+									style="padding: 60px 0;"
+									description="暂无数据"
+									:image-size="100"
+								/>
+								<el-scrollbar v-else height="100%" always>
+									<div class="item-box">
+										<div
+											v-for="(val, idx) in curCompanyList"
+											:key="val.id"
+											class="item"
+											:class="{ itemActive: companyActiveIndex === ((currentPage - 1) * pageSize + idx) }"
+											@click="handleClickCompany(val, idx)"
+										>
+											<div class="item-icon">
+												<img :src="defaultIcon2" alt="" class="item-img" />
+											</div>
+											<div
+												class="title"
+												:class="{ titleActive: companyActiveIndex === ((currentPage - 1) * pageSize + idx) }"
+											>
+												{{ val.name }}
+											</div>
+											<div class="icon">
+												<img v-if="val.status === 'up'" :src="upIcon" alt="" />
+												<img v-if="val.status === 'down'" :src="downIcon" alt="" />
+											</div>
 										</div>
 									</div>
-								</div>
-							</el-scrollbar>
+								</el-scrollbar>
+							</div>
 						</div>
-					</div>
-					<div class="left-pagination">
-						<div class="left-pagination-left">{{ `共 ${filteredCompanyList.length} 项` }}</div>
-						<div class="left-pagination-right">
-							<el-pagination @current-change="handleCurrentChange" :pageSize="pageSize"
-								:current-page="currentPage" size="small" background layout="prev, pager, next"
-								:total="filteredCompanyList.length" />
+						<div class="left-pagination">
+							<div class="left-pagination-left">{{ `共 ${filteredCompanyList.length} 项` }}</div>
+							<div class="left-pagination-right">
+								<el-pagination
+									@current-change="handleCurrentChange"
+									:pageSize="pageSize"
+									:current-page="currentPage"
+									size="small"
+									background
+									layout="prev, pager, next"
+									:total="filteredCompanyList.length"
+								/>
+							</div>
 						</div>
 					</div>
-				</div>
-			</AnalysisBox>
-		</div>
-		<div class="box2">
-			<AnalysisBox :showAllBtn="false">
-				<template #custom-title>
-					<div class="custom-title">
-						<div class="title-left">
-							<div :class="['title-item', {'title-active': contentType==1}]" @click="headerContentType(1)">
-								<div class="title-icon">
-									<img :src="contentType==1 ? icon1620 : icon1621" alt="">
+				</AnalysisBox>
+			</div>
+			<div class="right">
+				<AnalysisBox :showAllBtn="false">
+					<template #custom-title>
+						<div class="custom-title">
+							<div class="title-left">
+								<div :class="['title-item', { 'title-active': contentType==1 }]" @click="headerContentType(1)">
+									<div class="title-icon">
+										<img :src="contentType==1 ? icon1620 : icon1621" alt="" />
+									</div>
+									<div>产业链</div>
 								</div>
-								<div>产业链</div>
-							</div>
-							<div :class="['title-item', {'title-active': contentType==2}]" @click="headerContentType(2)">
-								<div class="title-icon">
-									<img :src="contentType==2 ? icon422 : icon423" alt="">
+								<div :class="['title-item', { 'title-active': contentType==2 }]" @click="headerContentType(2)">
+									<div class="title-icon">
+										<img :src="contentType==2 ? icon422 : icon423" alt="" />
+									</div>
+									<div>实体关系</div>
 								</div>
-								<div>实体关系</div>
+							</div>
+							<div class="title-right" v-if="contentType==1">
+								<el-select v-model="industryChain.id" style="width: 100%" @change="onDecreeChainNodes">
+									<el-option v-for="item in industryChain.list" :key="item.id" :label="item.name" :value="item.id" />
+								</el-select>
 							</div>
 						</div>
-						<div class="title-right" v-if="contentType==1">
-							<el-select v-model="industryChain.id" style="width: 100%" @change="onDecreeChainNodes">
-								<el-option v-for="item in industryChain.list" :key="item.id" :label="item.name" :value="item.id" />
-							</el-select>
+					</template>
+					<div class="box2-main">
+						<AiTips :tips="tips" />
+						<div class="graph-box" v-if="contentType==1">
+							<ChartChain :listData="fishbone.list" :baseData="fishbone.base" />
+						</div>
+						<div class="graph-box" v-if="contentType==2 && graphInfo.nodes.length">
+							<GraphChart :nodes="graphInfo.nodes" :links="graphInfo.links" layoutType="force" />
 						</div>
 					</div>
-				</template>
-				<div class="box2-main">
-					<AiTips :tips="tips" />
-					<div class="graph-box" v-if="contentType==1">
-						<ChartChain :listData="fishbone.list" :baseData="fishbone.base" />
-					</div>
-					<div class="graph-box" v-if="contentType==2 && graphInfo.nodes.length">
-						<GraphChart :nodes="graphInfo.nodes" :links="graphInfo.links" layoutType="force" />
-					</div>
-				</div>
-			</AnalysisBox>
+				</AnalysisBox>
+			</div>
 		</div>
-	</div>
+	</BillPageShell>
 </template>
 
 <script setup>
@@ -94,6 +124,8 @@ import { ref, onMounted, onBeforeUnmount, nextTick, computed, watch, reactive }
 import { useRoute } from "vue-router";
 import * as echarts from "echarts";
 
+import BillPageShell from "@/views/bill/components/layout/BillPageShell.vue";
+
 const route = useRoute();
 import { getCompanyList, getHylyList, getCompanyDetail } from "@/api/influence";
 import getLineChart from "./utils/lineChart";
@@ -809,7 +841,7 @@ onMounted(async () => {
 </script>
 
 <style lang="scss" scoped>
-.industry-wrap {
+.wrap {
 	width: 100%;
 	height: 100%;
 	display: flex;
@@ -1012,7 +1044,7 @@ onMounted(async () => {
 	.right {
 		margin-top: 16px;
 		margin-left: 16px;
-		width: 1247px;
+		width: 1104px;
 		height: 847px;
 		position: relative;
 
@@ -1487,7 +1519,7 @@ onMounted(async () => {
 			}
 
 			.box-footer {
-				width: 1218px;
+		width: 100%;
 				height: 40px;
 				display: flex;
 				box-sizing: border-box;
@@ -1510,13 +1542,17 @@ onMounted(async () => {
 				.box-footer-center {
 					margin-left: 13px;
 					margin-top: 8px;
-					width: 1119px;
+			flex: 1;
+			min-width: 0;
 					height: 24px;
 					color: var(--color-main-active);
 					font-family: Microsoft YaHei;
 					font-size: 14px;
 					font-weight: 400;
 					line-height: 24px;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
 				}
 
 				.box-footer-right {
@@ -1539,10 +1575,10 @@ onMounted(async () => {
 		}
 	}
 
-	.box2 {
+	.right {
 		margin-top: 16px;
 		margin-left: 16px;
-		width: 1247px;
+		width: 1104px;
 		height: 847px;
 		position: relative;
 

src/views/decree/decreeHome/index.vue

@@ -29,36 +29,22 @@
 						<div class="item-footer">分析报告</div>
 					</div>
 				</div> -->
-				<div class="date-box" v-if="keyOrganizationList.length">
-					<div class="date-icon">
-						<img :src="tipsTcon" alt="">
-					</div>
-					<div class="date-text">近期美国各联邦政府机构发布涉华政令数量汇总</div>
-					<TimeTabPane @time-click="onKeyOrganization" activeTime="近一年" />
-				</div>
-				<div class="home-main-header-item-box" v-if="keyOrganizationList.length">
-					<div class="organization-item" v-for="(item, index) in keyOrganizationList" :key="index">
-						<div class="item-left">
-							<img :src="item.imgUrl || DefaultIcon2" alt="" />
-						</div>
-						<div class="item-right one-line-ellipsis" @click="handleToInstitution(item)">{{ item.orgName }}</div>
-						<el-popover content="跳转至数据资源库" placement="top">
-							<template #reference>
-								<div class="item-total" @click="handleToDataLibrary(item)">{{ item.totalOrderNum }}项</div>
-							</template>
-						</el-popover>
-						<el-icon color="var(--color-primary-100)">
-							<ArrowRightBold />
-						</el-icon>
-						<div class="item-dot" v-if="item.recentOrderNum">+{{ item.recentOrderNum }}</div>
-					</div>
-					<div class="organization-item" @click="onNavigateTo()">
-						<div class="item-more">查看全部机构 ({{ govInsList.length }}家)</div>
-						<el-icon color="var(--color-primary-100)">
-							<ArrowRightBold />
-						</el-icon>
-					</div>
-				</div>
+				<SummaryCardsPanel
+					descriptionText="近期美国各联邦政府机构发布涉华政令数量汇总"
+					:cards="keyOrganizationCards"
+					:totalCount="govInsList.length"
+					:tipIcon="tipsTcon"
+					:defaultAvatar="DefaultIcon2"
+					:loading="keyOrganizationLoading"
+					activeTime="近一年"
+					emptyText="暂无数据"
+					:moreCardMinCount="7"
+					moreText="查看全部机构"
+					@time-click="onKeyOrganization"
+					@name-click="handleToInstitution"
+					@count-click="handleToDataLibrary"
+					@more-click="onNavigateTo"
+				/>
 			</div>
 			<DivideHeader id="position1" class="divide" :titleText="'最新动态'"></DivideHeader>
 			<div class="home-main-center">
@@ -421,11 +407,11 @@
 </template>
 
 <script setup>
-import { onMounted, ref, watch, nextTick, reactive } from "vue";
+import { onMounted, ref, watch, nextTick, reactive, computed } from "vue";
 import router from "@/router";
 import WordCloudChart from "@/components/base/WordCloundChart/index.vue"
 import SimplePagination from "@/components/SimplePagination.vue";
-import TimeTabPane from '@/components/base/TimeTabPane/index.vue';
+import SummaryCardsPanel from "@/components/base/SummaryCardsPanel/index.vue";
 import AiButton from '@/components/base/Ai/AiButton/index.vue';
 import AiPane from '@/components/base/Ai/AiPane/index.vue';
 import {
@@ -1155,11 +1141,13 @@ const handleSwithCurDecree = name => {
 
 // 关键机构
 const keyOrganizationList = ref([]);
+const keyOrganizationLoading = ref(false);
 const onKeyOrganization = async (event) => {
 	let day = 365
 	if (event?.time === '近一周') day = 7
 	if (event?.time === '近一月') day = 30
 	if (event?.time === '近一年') day = 365
+	keyOrganizationLoading.value = true;
 	try {
 		const res = await getKeyOrganization({ day });
 		console.log("关键机构", res);
@@ -1167,8 +1155,20 @@ const onKeyOrganization = async (event) => {
 			keyOrganizationList.value = res.data;
 		}
 	} catch (error) { }
+	keyOrganizationLoading.value = false;
 }
 
+const keyOrganizationCards = computed(() => {
+	return keyOrganizationList.value.map(item => ({
+		...item,
+		id: item.orgId,
+		name: item.orgName,
+		avatar: item.imgUrl,
+		count: item.totalOrderNum,
+		delta: item.recentOrderNum
+	}));
+});
+
 // 下钻至数据资源库
 const handleToDataLibrary = (item) => {
 	const selectParam = {