风险与博弈接口对接

src/api/zmOverview/risk/index.js

+import request from "@/api/request.js";
+
+// 中美博弈概览V2:最新风险动态统计
+export function getLatestRiskUpdates(params) {
+  return request({
+    method: 'GET',
+    url: `/api/rivalryIndexV2/LatestRiskUpdates`,
+    params: params
+  })
+}
+
+
+// 中美博弈概览V2:最新风险信号
+export function getLatestRisks() {
+  return request({
+    method: 'GET',
+    url: `/api/rivalryIndexV2/LatestRisks`,
+
+  })
+}
+
+
+// 中美博弈概览V2:美对华制裁措施数量趋势
+export function geDomainContainmentTrend(params) {
+  return request({
+    method: 'GET',
+    url: `/api/rivalryIndexV2/DomainContainmentTrend`,
+    params: params
+  })
+}
+
+
+
+// 中美博弈概况:获取榜单字典
+export function getChartDict() {
+  return request({
+    method: 'GET',
+    url: `/api/union/summary/chartDict`,
+  })
+}
+
+
+// 中美博弈概况:中美科技实力对比
+export function getCompare(id) {
+  return request({
+    method: 'GET',
+    url: `/api/union/summary/compare/${id}`,
+  })
+}
+
+// 中美博弈分析
+export function getTechnologyGameAnalysis() {
+  return request({
+    method: 'GET',
+    url: `/api/rivalryIndexV2/TechnologyGameAnalysis`,
+
+  })
+}
+
+
+//中美博弈概览V7:美国政府部门对华制裁最新动态
+export function getGovernmentSanctionsDynamics() {
+  return request({
+    method: 'GET',
+    url: `/api/rivalryIndex/governmentSanctionsDynamics`,
+
+  })
+}
\ No newline at end of file

src/views/ZMOverView/components/fourSuppress/components/allGovernment/index.vue

@@ -20,13 +20,8 @@
 				</div>
 			</div>
 			<img :src="leftBtn" alt="" class="left-btn" @click="prev" :class="{ disabled: currentIndex === 0 }" />
-			<img
-				:src="rightBtn"
-				alt=""
-				class="right-btn"
-				@click="next"
-				:class="{ disabled: currentIndex >= cardList.length - 5 }"
-			/>
+			<img :src="rightBtn" alt="" class="right-btn" @click="next"
+				:class="{ disabled: currentIndex >= cardList.length - 5 }" />
 		</div>
 		<div class="main-charts">
 			<div class="charts-title">
@@ -64,13 +59,8 @@
 								<span class="item-title">{{ item.title }}</span>
 								<span class="item-date">{{ item.date }} · {{ item.type }}</span>
 							</div>
-							<el-tooltip
-								effect="dark"
-								:content="item.content"
-								popper-class="common-prompt-popper"
-								placement="top"
-								:show-after="500"
-							>
+							<el-tooltip effect="dark" :content="item.content" popper-class="common-prompt-popper" placement="top"
+								:show-after="500">
 								<div class="dynamic-item-body">
 									{{ item.content }}
 								</div>
@@ -94,13 +84,7 @@
 						<div class="ranking-header">
 							<div class="header-left">
 								<div class="dept-icons">
-									<img
-										v-for="(dept, dIndex) in rank.depts"
-										:key="dIndex"
-										:src="defaultImg"
-										alt=""
-										class="dept-icon"
-									/>
+									<img v-for="(dept, dIndex) in rank.depts" :key="dIndex" :src="defaultImg" alt="" class="dept-icon" />
 								</div>
 								<span class="dept-names">{{ rank.depts.join(" / ") }}</span>
 							</div>
@@ -114,13 +98,8 @@
 									<span class="item-type" :class="item.type === '法案' ? 'type-bill' : 'type-order'">{{
 										item.type
 									}}</span>
-									<el-tooltip
-										effect="dark"
-										:content="item.title"
-										popper-class="common-prompt-popper"
-										placement="top"
-										:show-after="500"
-									>
+									<el-tooltip effect="dark" :content="item.title" popper-class="common-prompt-popper" placement="top"
+										:show-after="500">
 										<span class="item-title">{{ item.title }}</span>
 									</el-tooltip>
 								</div>
@@ -171,13 +150,8 @@
 											<div class="light" :class="{ active: event.level === 'red', red: true }"></div>
 										</div>
 									</div>
-									<el-tooltip
-										effect="dark"
-										:content="event.content"
-										popper-class="common-prompt-popper"
-										placement="top"
-										:show-after="500"
-									>
+									<el-tooltip effect="dark" :content="event.content" popper-class="common-prompt-popper" placement="top"
+										:show-after="500">
 										<div class="event-content">{{ event.content }}</div>
 									</el-tooltip>
 									<div class="event-tags">
@@ -819,10 +793,12 @@ const prev = () => {
 .content-wrapper {
 	width: 1666px;
 	height: 2132px;
+
 	.main-content {
 		width: 100%;
 		position: relative;
 		margin-bottom: 16px;
+
 		.cards-mask {
 			width: 100%;
 			overflow: hidden; // 仅在这里隐藏超出部分，不影响外层的按钮
@@ -848,6 +824,7 @@ const prev = () => {
 			border: 1px solid rgba(255, 255, 255, 0.1);
 			box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);
 			cursor: pointer;
+
 			.card-bg {
 				position: absolute;
 				top: 0;
@@ -861,6 +838,7 @@ const prev = () => {
 				z-index: 0;
 				opacity: 0.8;
 				background-color: rgba(5, 33, 77, 0.7); // 调整为更明显的深蓝色
+
 				&::after {
 					content: "";
 					position: absolute;
@@ -931,11 +909,13 @@ const prev = () => {
 			cursor: pointer;
 			z-index: 10;
 			transition: opacity 0.3s;
+
 			&.disabled {
 				opacity: 0.3;
 				cursor: not-allowed;
 			}
 		}
+
 		.right-btn {
 			width: 24px;
 			height: 48px;
@@ -946,12 +926,14 @@ const prev = () => {
 			cursor: pointer;
 			z-index: 10;
 			transition: opacity 0.3s;
+
 			&.disabled {
 				opacity: 0.3;
 				cursor: not-allowed;
 			}
 		}
 	}
+
 	.main-charts {
 		width: 1601px;
 		height: 500px;
@@ -961,6 +943,7 @@ const prev = () => {
 		display: flex;
 		flex-direction: column;
 		margin-bottom: 22px;
+
 		.charts-title {
 			width: 100%;
 			height: 48px;
@@ -971,14 +954,17 @@ const prev = () => {
 			padding-right: 35px;
 			box-sizing: border-box;
 			background: linear-gradient(180deg, rgba(231, 243, 255, 1) 0%, rgba(231, 243, 255, 0) 100%);
+
 			.title-left {
 				display: flex;
 				align-items: center;
+
 				img {
 					width: 18px;
 					height: 18px;
 					margin-right: 14px;
 				}
+
 				span {
 					font-family: YouSheBiaoTiHei;
 					font-size: 24px;
@@ -987,29 +973,36 @@ const prev = () => {
 					color: rgb(5, 95, 194);
 				}
 			}
+
 			.title-right {
 				display: flex;
 				height: 48px;
 				align-items: end;
 				gap: 12px;
 				padding-right: 17px;
+
 				.custom-select {
 					width: 160px;
+
 					:deep(.el-input) {
 						height: 32px;
+
 						.el-input__wrapper {
 							background-color: #fff;
 							box-shadow: 0 0 0 1px #dcdfe6 inset;
 							border-radius: 4px;
 							padding: 0 12px;
 							height: 32px;
+
 							&:hover {
 								box-shadow: 0 0 0 1px #c0c4cc inset;
 							}
+
 							&.is-focus {
 								box-shadow: 0 0 0 1px #409eff inset;
 							}
 						}
+
 						.el-input__inner {
 							font-family: "Microsoft YaHei";
 							font-size: 16px;
@@ -1017,6 +1010,7 @@ const prev = () => {
 							color: rgb(95, 101, 108);
 							height: 32px;
 							line-height: 24px;
+
 							&::placeholder {
 								color: rgb(95, 101, 108);
 							}
@@ -1025,29 +1019,34 @@ const prev = () => {
 				}
 			}
 		}
+
 		.charts-content {
 			flex: 1;
 			width: 100%;
 			padding: 20px 40px 20px 40px;
 			box-sizing: border-box;
+
 			.chart-container {
 				width: 100%;
 				height: 100%;
 			}
 		}
 	}
+
 	.main-text {
 		width: 1601px;
 		height: 700px;
 		display: flex;
 		justify-content: space-between;
 		margin-bottom: 16px;
+
 		.text-item {
 			width: 792px;
 			height: 700px;
 			border-radius: 10px;
 			background-color: rgba(255, 255, 255, 0.65);
 			box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);
+
 			.text-item-title {
 				width: 100%;
 				height: 48px;
@@ -1057,11 +1056,13 @@ const prev = () => {
 				padding-left: 17px;
 				box-sizing: border-box;
 				background: linear-gradient(180deg, rgba(231, 243, 255, 1) 0%, rgba(231, 243, 255, 0) 100%);
+
 				img {
 					width: 18px;
 					height: 18px;
 					margin-right: 14px;
 				}
+
 				span {
 					font-family: YouSheBiaoTiHei;
 					font-size: 24px;
@@ -1070,31 +1071,38 @@ const prev = () => {
 					color: rgb(5, 95, 194);
 				}
 			}
+
 			.text-item-content {
 				width: 100%;
 				height: 652px;
 				padding: 6px 27px 22px 27px;
 				box-sizing: border-box;
 				overflow-y: auto;
+
 				.dynamic-item {
 					display: flex;
 					padding: 16px 0;
 					border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+
 					&:last-child {
 						border-bottom: none;
 					}
+
 					.item-icon {
 						width: 24px;
 						height: 24px;
 						margin-right: 12px;
 						margin-top: 3px;
 					}
+
 					.item-right {
 						flex: 1;
+
 						.dynamic-item-header {
 							display: flex;
 							justify-content: space-between;
 							align-items: flex-start;
+
 							.item-title {
 								font-family: "Microsoft YaHei";
 								font-size: 16px;
@@ -1106,6 +1114,7 @@ const prev = () => {
 								white-space: nowrap;
 								max-width: 500px;
 							}
+
 							.item-date {
 								font-family: "Microsoft YaHei";
 								font-size: 16px;
@@ -1114,6 +1123,7 @@ const prev = () => {
 								color: rgb(95, 101, 108);
 							}
 						}
+
 						.dynamic-item-body {
 							font-family: "Microsoft YaHei";
 							font-size: 16px;
@@ -1127,10 +1137,12 @@ const prev = () => {
 							white-space: nowrap;
 							cursor: pointer;
 						}
+
 						.dynamic-item-tags {
 							display: flex;
 							gap: 8px;
 							margin-top: 5px;
+
 							.tag {
 								padding: 2px 8px;
 								border-radius: 4px;
@@ -1138,16 +1150,19 @@ const prev = () => {
 								font-size: 14px;
 								font-weight: 400;
 								line-height: 20px;
+
 								&.tag-blue {
 									color: #2f79c4;
 									background: rgba(47, 121, 196, 0.1);
 									border: 1px solid rgba(47, 121, 196, 0.3);
 								}
+
 								&.tag-green {
 									color: #52c41a;
 									background: rgba(82, 196, 26, 0.1);
 									border: 1px solid rgba(82, 196, 26, 0.3);
 								}
+
 								&.tag-red {
 									color: #fa541c;
 									background: rgba(250, 84, 28, 0.1);
@@ -1158,12 +1173,14 @@ const prev = () => {
 					}
 				}
 			}
+
 			.text-item-contentOther {
 				width: 100%;
 				height: 652px;
 				padding: 10px 30px 22px 27px;
 				box-sizing: border-box;
 				overflow-y: auto;
+
 				.ranking-card {
 					width: 100%;
 					border-radius: 10px;
@@ -1171,29 +1188,36 @@ const prev = () => {
 					padding: 12px 24px;
 					margin-bottom: 12px;
 					box-sizing: border-box;
+
 					&:last-child {
 						margin-bottom: 0;
 					}
+
 					.ranking-header {
 						display: flex;
 						justify-content: space-between;
 						align-items: center;
 						margin-bottom: 12px;
+
 						.header-left {
 							display: flex;
 							align-items: center;
+
 							.dept-icons {
 								display: flex;
 								margin-right: 12px;
+
 								.dept-icon {
 									width: 24px;
 									height: 24px;
 									margin-right: -8px; // 图标叠加效果
+
 									&:last-child {
 										margin-right: 0;
 									}
 								}
 							}
+
 							.dept-names {
 								font-family: "Microsoft YaHei";
 								font-size: 16px;
@@ -1202,6 +1226,7 @@ const prev = () => {
 								color: rgb(59, 65, 75);
 							}
 						}
+
 						.header-right {
 							.joint-count {
 								font-family: "Microsoft YaHei";
@@ -1212,19 +1237,23 @@ const prev = () => {
 							}
 						}
 					}
+
 					.ranking-body {
 						display: flex;
 						flex-direction: column;
 						gap: 8px;
+
 						.ranking-item {
 							display: flex;
 							justify-content: space-between;
 							align-items: center;
+
 							.item-left {
 								display: flex;
 								align-items: center;
 								flex: 1;
 								overflow: hidden;
+
 								.item-type {
 									padding: 2px 8px;
 									border-radius: 4px;
@@ -1233,17 +1262,20 @@ const prev = () => {
 									font-weight: 400;
 									line-height: 20px;
 									margin-right: 13px;
+
 									&.type-bill {
 										color: #2f79c4;
 										background: rgba(47, 121, 196, 0.1);
 										// border: 1px solid rgba(47, 121, 196, 0.3);
 									}
+
 									&.type-order {
 										color: #2f79c4;
 										background: rgba(47, 121, 196, 0.1);
 										// border: 1px solid rgba(47, 121, 196, 0.3);
 									}
 								}
+
 								.item-title {
 									font-family: "Microsoft YaHei";
 									font-size: 16px;
@@ -1256,6 +1288,7 @@ const prev = () => {
 									cursor: pointer;
 								}
 							}
+
 							.item-date {
 								font-family: "Microsoft YaHei";
 								font-size: 16px;
@@ -1270,12 +1303,14 @@ const prev = () => {
 			}
 		}
 	}
+
 	.main-bottom {
 		width: 100%;
 		height: 700px;
 		border-radius: 10px;
 		background-color: rgba(255, 255, 255, 0.65);
 		box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);
+
 		.bottom-item {
 			width: 100%;
 			height: 48px;
@@ -1286,14 +1321,17 @@ const prev = () => {
 			padding-right: 35px;
 			box-sizing: border-box;
 			background: linear-gradient(180deg, rgba(231, 243, 255, 1) 0%, rgba(231, 243, 255, 0) 100%);
+
 			.bottom-item-title {
 				display: flex;
 				align-items: center;
+
 				img {
 					width: 18px;
 					height: 18px;
 					margin-right: 14px;
 				}
+
 				span {
 					font-family: YouSheBiaoTiHei;
 					font-size: 24px;
@@ -1302,11 +1340,13 @@ const prev = () => {
 					color: rgb(5, 95, 194);
 				}
 			}
+
 			.bottom-item-select {
 				display: flex;
 				height: 48px;
 				align-items: end;
 				gap: 8px;
+
 				.select-btn {
 					padding: 4px 16px;
 					border-radius: 4px;
@@ -1318,6 +1358,7 @@ const prev = () => {
 					color: rgb(95, 101, 108);
 					cursor: pointer;
 					background-color: #fff;
+
 					// transition: all 0.3s;
 					&.active {
 						color: rgb(5, 95, 194);
@@ -1325,8 +1366,10 @@ const prev = () => {
 						background-color: rgba(231, 243, 255, 1);
 					}
 				}
+
 				.field-select {
 					width: 160px;
+
 					:deep(.el-input) {
 						.el-input__wrapper {
 							height: 32px;
@@ -1334,6 +1377,7 @@ const prev = () => {
 							box-sizing: border-box;
 							background-color: transparent;
 							border-radius: 4px;
+
 							.el-input__inner {
 								height: 32px;
 								line-height: 32px;
@@ -1341,6 +1385,7 @@ const prev = () => {
 								font-size: 16px;
 								font-weight: 400;
 								color: rgb(95, 101, 108);
+
 								&::placeholder {
 									color: rgb(95, 101, 108);
 								}
@@ -1350,11 +1395,13 @@ const prev = () => {
 				}
 			}
 		}
+
 		.bottom-content {
 			width: 100%;
 			height: calc(100% - 48px);
 			padding: 14px 23px 19px 23px;
 			box-sizing: border-box;
+
 			.timeline-container {
 				width: 100%;
 				height: 100%;
@@ -1370,9 +1417,11 @@ const prev = () => {
 					overflow-y: auto;
 					padding-right: 8px;
 					padding-bottom: 8px;
+
 					.dept-row {
 						display: flex;
 						margin-bottom: 8px;
+
 						&:last-child {
 							margin-bottom: 0;
 						}
@@ -1403,6 +1452,7 @@ const prev = () => {
 									color: rgb(59, 65, 75);
 									line-height: 24px;
 								}
+
 								.dept-count {
 									font-family: "Microsoft YaHei";
 									font-size: 16px;
@@ -1419,6 +1469,7 @@ const prev = () => {
 							align-items: center;
 							gap: 8px;
 							overflow-x: auto;
+
 							// 隐藏滚动条
 							&::-webkit-scrollbar {
 								display: none;
@@ -1444,14 +1495,38 @@ const prev = () => {
 									left: 0;
 									width: 100%;
 									height: 3px;
-									&.line-blue { background-color: #2f79c4; }
-									&.line-green { background-color: rgb(33, 129, 57); }
-									&.line-red { background-color: rgb(206, 79, 81); }
-									&.line-orange { background-color: #fa8c16; }
-									&.line-yellow { background-color: rgb(232, 189, 11); }
-									&.line-purple { background-color: #722ed1; }
-									&.line-cyan { background-color: #13c2c2; }
-									&.line-default { background-color: rgb(234, 236, 238); }
+
+									&.line-blue {
+										background-color: #2f79c4;
+									}
+
+									&.line-green {
+										background-color: rgb(33, 129, 57);
+									}
+
+									&.line-red {
+										background-color: rgb(206, 79, 81);
+									}
+
+									&.line-orange {
+										background-color: #fa8c16;
+									}
+
+									&.line-yellow {
+										background-color: rgb(232, 189, 11);
+									}
+
+									&.line-purple {
+										background-color: #722ed1;
+									}
+
+									&.line-cyan {
+										background-color: #13c2c2;
+									}
+
+									&.line-default {
+										background-color: rgb(234, 236, 238);
+									}
 								}
 
 								.event-header {
@@ -1484,9 +1559,11 @@ const prev = () => {
 											&.green.active {
 												background-color: rgb(33, 129, 57);
 											}
+
 											&.yellow.active {
 												background-color: rgb(232, 189, 11);
 											}
+
 											&.red.active {
 												background-color: rgb(206, 79, 81);
 											}
@@ -1527,26 +1604,31 @@ const prev = () => {
 											background: rgba(230, 244, 255, 1);
 											border-color: rgba(186, 224, 255, 1);
 										}
+
 										&.tag-green {
 											color: rgba(56, 158, 13, 1);
 											background: rgba(246, 255, 237, 1);
 											border-color: rgba(217, 247, 190, 1);
 										}
+
 										&.tag-red {
 											color: rgba(245, 34, 45, 1);
 											background: rgba(255, 241, 240, 1);
 											border-color: rgba(255, 163, 158, 1);
 										}
+
 										&.tag-orange {
 											color: rgba(250, 140, 22, 1);
 											background: rgba(255, 247, 230, 1);
 											border-color: rgba(255, 213, 145, 1);
 										}
+
 										&.tag-purple {
 											color: rgba(114, 46, 209, 1);
 											background: rgba(249, 240, 255, 1);
 											border-color: rgba(211, 173, 247, 1);
 										}
+
 										&.tag-cyan {
 											color: rgba(19, 194, 194, 1);
 											background: rgba(230, 255, 251, 1);
@@ -1563,10 +1645,12 @@ const prev = () => {
 					width: 100%;
 					height: 552px;
 					overflow-y: auto;
+
 					&::-webkit-scrollbar {
 						display: none;
 					}
 				}
+
 				.timelineBar {
 					width: 100%;
 					height: 51px;
@@ -1592,6 +1676,7 @@ const prev = () => {
 	line-height: 30px !important;
 	color: #fff !important;
 	border: none !important;
+
 	.el-popper__arrow::before {
 		background-color: rgb(59, 65, 75) !important;
 		border-color: rgb(59, 65, 75) !important;

src/views/ZMOverView/components/gameProfile/Timeline.vue

@@ -5,7 +5,7 @@
         <div class="timeline-box">
           <div class="line" style="width:100vw ;" />
           <!-- 一次性渲染全部节点 -->
-          <div v-for="(item, i) in data" :key="item[idKey]" class="node" :style="leftStyle(i)">
+          <div v-for="(item, i) in showList" :key="item[idKey]" class="node" :style="leftStyle(i)">
             <!-- 圆环 -->
             <div class="dot" :class="linePos(item)" :style="{ '--i': item.unit === '中国' ? ' #E29697' : '#69A0DA' }" />
 
@@ -22,20 +22,21 @@
             <!-- 卡片 -->
             <div class="card" :class="[cardPos(item), 'right-side']" @click="$emit('click-card', item)">
               <div style="justify-content: space-between;display: flex;width: 300px;">
-                <div class="tag">{{ item.tag }}</div>
-                <img :src="`/icon/${item.unit}.png`" class="icon"></img>
+                <div class="tag">{{ item.eventStrategy }}</div>
+                <img :src="item.eventCountryImg" class="icon"
+                  style="border-radius: 14px;height: 28px;width: 28px;;"></img>
 
               </div>
               <div class="title" :style="{
 
-              }">{{ item.title }}</div>
-              <div class="time">{{ item.time }}</div>
+              }">{{ item.eventName }}</div>
+              <div class="time">{{ item.eventDate }}</div>
               <!-- <div class="title" :style="{
             color: item.unit === '中国' ? ' #CF4F51' : ''
           }">{{ item.title }}</div>
           <div class="time">{{ item.time }}</div> -->
 
-              <div class="content">{{ item.content }}</div>
+              <div class="content">{{ item.eventDesc }}</div>
             </div>
           </div>
         </div>
@@ -85,7 +86,7 @@ export default {
     },
     /* 卡片上下位置：unit=0 -> 下侧，其余 -> 上侧 */
     cardPos(item) {
-      return item.unit === '中国' ? 'down' : 'up';
+      return item.eventType === '反制措施' ? 'down' : 'up';
     },
     /* 延伸线方向 = 卡片方向 */
     linePos(item) {
@@ -278,7 +279,7 @@ export default {
   width: 120px;
   height: 28px;
   /* 自动布局 */
-  display: flex;
+  /* display: flex; */
   flex-direction: row;
   justify-content: flex-start;
   align-items: flex-start;
@@ -303,7 +304,7 @@ export default {
   width: 120px;
   height: 28px;
   /* 自动布局 */
-  display: flex;
+  /* display: flex; */
   flex-direction: row;
   justify-content: flex-start;
   align-items: flex-start;
@@ -346,5 +347,23 @@ export default {
   line-height: 24px;
   letter-spacing: 0px;
   text-align: justify;
+  width: 300px;
+  /* 设置一个固定的宽度 */
+  height: 100px;
+  /* 设置一个固定的高度，确保只显示 5 行 */
+  font-size: 16px;
+  /* 设置字体大小 */
+  line-height: 20px;
+  /* 设置行高 */
+  overflow: hidden;
+  /* 隐藏超出部分 */
+  display: -webkit-box;
+  /* 使用 Webkit 的 box 模型 */
+  -webkit-line-clamp: 3;
+  /* 限制为 5 行 */
+  -webkit-box-orient: vertical;
+  /* 垂直排列内容 */
+  text-overflow: ellipsis;
+  /* 超出部分显示省略号 */
 }
 </style>
\ No newline at end of file

src/views/ZMOverView/components/gameProfile/index.vue

@@ -8,11 +8,13 @@
 			</div>
 			<div style="display: flex; height: 650px; width: 100%">
 				<div style="width: 50%">
-					<div style="display: flex; justify-content: space-between; margin-right: 50px; line-height: 32px;align-items: center;" >
+					<div
+						style="display: flex; justify-content: space-between; margin-right: 50px; line-height: 32px;align-items: center;">
 						<div style="display: flex; margin-left: 50px">
 							数据来源:
-							<el-select class="select-item" size="default" style="margin-left: 15px; width: 240px; height: 32px">
-								<el-option label="国家创新指数报告" value="last_year" />
+							<el-select class="select-item" size="default" style="margin-left: 15px; width: 240px; height: 32px"
+								v-model="origin" @change="handleGetCompare()">
+								<el-option :value="value.id" :label="value.name" v-for="value in originList" />
 							</el-select>
 						</div>
 						<div style="display: flex">
@@ -25,21 +27,21 @@
 
 					<div style="width: 672px; height: 486px; padding-top: 50px" id="char"></div>
 				</div>
-				<div style="width: 50%">
+				<div style="width: 50%;    height: 620px;overflow: auto;">
 					<el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all>
-						<el-table-column prop="name" label="指标名称" sortable width="350" />
-						<el-table-column prop="percent" label="中国">
+						<el-table-column prop="targetName" label="指标名称" sortable width="350" />
+						<el-table-column prop="chinaScore" label="中国">
 							<template #default="scope">
 								<div class="progress-wrapper left" :style="{ '--i': '40px', '--j': '-20px', marginLeft: '20px' }">
-									<el-progress :percentage="scope.row.percent[0]" :stroke-width="20" class="left-progress"
+									<el-progress :percentage="scope.row.chinaScore" :stroke-width="20" class="left-progress"
 										:show-text="false" />
 								</div>
 							</template>
 						</el-table-column>
-						<el-table-column prop="percent" label="美国">
+						<el-table-column prop="usScore" label="美国">
 							<template #default="scope">
 								<div class="progress-wrapper right" :style="{ '--i': '40px', marginRight: '20px' }">
-									<el-progress :percentage="scope.row.percent[0]" :stroke-width="20" class="right-progress"
+									<el-progress :percentage="scope.row.usScore" :stroke-width="20" class="right-progress"
 										:show-text="false" />
 								</div>
 							</template>
@@ -63,7 +65,8 @@
 			}">
 				<img :src="`/public/icon/ZM/btn-icon-${index}.png`" style="width: 22px; height: 19px; margin: 0 22px" />
 				{{ value.text }}
-				<img :src="`/public/icon/ZM/btn-icon-arrow.png`" style="margin-left: auto; margin-right: 22px; width: 13px; height: 12px" />
+				<img :src="`/public/icon/ZM/btn-icon-arrow.png`"
+					style="margin-left: auto; margin-right: 22px; width: 13px; height: 12px" />
 			</div>
 		</div>
 	</div>
@@ -75,6 +78,8 @@ import * as echarts from "echarts";
 import Timeline from "./Timeline.vue";
 import tableShow from "./tableShow.vue";
 import radarChart from "./radarChart3.js";
+import { getCompare, getChartDict, getTechnologyGameAnalysis } from '@/api/zmOverview/risk/index.js'
+
 const course = ref([
 	{
 		time: "2025-01-15",
@@ -129,22 +134,86 @@ const course = ref([
 	}
 ]);
 
-onMounted(() => {
+const originList = ref([])
+const origin = ref('')
+//数据来源
+const handleGetChartDict = async () => {
+	try {
+
+		const res = await getChartDict();
+		console.log("数据来源", res);
+		if (res.code === 200 && res.data) {
+			originList.value = res.data
+			origin.value = res.data[0].id
+		}
+	} catch (error) {
+		console.error("获取数据来源error", error);
+	}
+};
+//中美科技实力对比
+const handleGetCompare = async () => {
+	try {
+
+		const res = await getCompare(origin.value);
+		console.log("中美科技实力对比", res);
+		if (res.code === 200 && res.data) {
+			tableData.value = res.data
+			const secondLevelData = res.data[0].children;
+			const indicatorNames = secondLevelData.map(item => item.targetName);
+			const chinaScores = secondLevelData.map(item => item.chinaScore);
+			const usScores = secondLevelData.map(item => item.usScore);
 			const dom = document.getElementById("char");
 			const myChart = echarts.init(dom);
-
-	// 2. 传入容器，生成配置
-	const option = radarChart(
-		["创新资源", "知识创造", "企业创新", "创新绩效", "创新环境"],
-		[
-			[4200, 3000, 20000, 35000, 50000, 18000],
-			[1000, 42000, 32000, 35000, 50000, 18000]
+			const radarOption = {
+				indicatorNames: indicatorNames,
+				data: [
+					chinaScores,
+					usScores
 				]
+			};
+			const option = radarChart(
+				radarOption.indicatorNames, radarOption.data
 			);
-
 			myChart.setOption(option);
+			console.log(radarOption)
+		}
+	} catch (error) {
+		console.error("获取中美科技实力对比error", error);
+	}
+};
+
+//中美博弈概览V2:领域打压遏制时间线
+const handlegetTechnologyGameAnalysis = async () => {
+	try {
 
-	// setChart(option, "char7");
+		const res = await getTechnologyGameAnalysis();
+		console.log("中美科技博弈分析", res);
+		if (res.code === 200 && res.data) {
+			course.value = res.data
+		}
+	} catch (error) {
+		console.error("获取中美科技博弈分析error", error);
+	}
+};
+onMounted(async () => {
+	await handleGetChartDict()
+	await handleGetCompare()
+	await handlegetTechnologyGameAnalysis()
+	// const dom = document.getElementById("char");
+	// const myChart = echarts.init(dom);
+
+	// // 2. 传入容器，生成配置
+	// const option = radarChart(
+	// 	["创新资源", "知识创造", "企业创新", "创新绩效", "创新环境"],
+	// 	[
+	// 		[4200, 3000, 20000, 35000, 50000, 18000],
+	// 		[1000, 42000, 32000, 35000, 50000, 18000]
+	// 	]
+	// );
+
+	// myChart.setOption(option);
+
+	// // setChart(option, "char7");
 });
 
 const tableData = ref([
@@ -266,6 +335,7 @@ const btnList = ref([
 	width: 1600px;
 	height: 1600px;
 	margin: 0 auto;
+
 	.card-box {
 		width: 1600px;
 		height: 700px;

src/views/ZMOverView/components/newRisk/WaveBall.vue

@@ -34,7 +34,7 @@ let instance = null
 /* 配置项 */
 const makeOption = () => {
   const p = Math.min(100, Math.max(0, props.percent)) / 100
-  console.log(props.color, 'colorcolorcolor')
+  // console.log(props, 'colorcolorcolor')
   return {
     series: [{
       type: 'liquidFill',
@@ -73,8 +73,8 @@ const makeOption = () => {
         formatter: function () {
           const change = props.data.change;
           const unit = props.data.unit;
-          if (change === '无新增') {
-            return `{noChange|${change}}\n{b|共${props.data.count}${unit}}`
+          if (change === 0) {
+            return `{num|${'无新增'}}`
           }
           return `{num|${change}}{unit| ${unit}}\n{b|共${props.data.count}${unit}}`
         },

src/views/ZMOverView/components/newRisk/index.vue

@@ -23,7 +23,7 @@
 							{{ sections[index].title }}
 						</div>
 						<div style="width: 50px; color: #ffffff">
-							{{ sections[index].date }}
+							{{ sections[index].date.slice(-5) }}
 						</div>
 					</div>
 				</div>
@@ -33,7 +33,7 @@
 					<img class="section-title" src="./icon/title-icon-2.png" />
 
 					<div>风险信号</div>
-					<div class="num">12</div>
+					<div class="num">{{ riskTotal }}</div>
 					<div class="manage-btn" @click="handleToRiskManage">
 						风险信号管理 >
 					</div>
@@ -74,22 +74,22 @@
 									<div class="carousel-title">
 										<div>
 											<div class="title-text">
-												{{ News.title }}
+												{{ News.hotspotTitle }}
 											</div>
 											<div class="title-tag">
-												{{ News.category }}
+												{{ News.hotspotType }}
 											</div>
 										</div>
-										<img src="./icon/矩形 295.png" style="width: 96px; height: 96px" />
+										<img :src="News.hotspotPicture" style="width: 96px; height: 96px" />
 									</div>
 									<div style="/* 矩形 351 */ width: 664px; height: 1px; background: rgba(234, 236, 238, 1)"></div>
-									<div class="news-carousel-content">{{ News.content }}</div>
+									<div class="news-carousel-content">{{ News.hotspotDesc }}</div>
 
 									<div class="carousel-bottom">
-										<div class="left">{{ News.date + News.source }}</div>
+										<div class="left">{{ News.hotspotDate + News.hotspotOrgName }}</div>
 										<div class="right">
-											<div v-for="tag in News.tags" class="tag">
-												{{ tag }}
+											<div v-for="tag in News.domainList" class="tag">
+												{{ tag.name }}
 											</div>
 										</div>
 									</div>
@@ -105,9 +105,10 @@
 
 <script setup>
 import { color } from "echarts";
-import { onMounted, ref, computed } from "vue";
+import { onMounted, ref, computed, onBeforeUnmount } from "vue";
 import WaveBall from "./WaveBall.vue";
 import { getBillRiskSignal } from "@/api/bill/billHome";
+import { getLatestRiskUpdates, getLatestRisks } from '@/api/zmOverview/risk/index.js'
 const sectionTab = [
 	{
 		textColor: "rgba(9, 88, 217, 1)",
@@ -148,14 +149,14 @@ const sections = ref([
 		date: "12-18",
 		waveBall: [
 			{
-				percent: 30, // 估算的百分比
+				percent: 0, // 估算的百分比
 				count: 1626,
 				change: "+3",
 				unit: "项",
 				title: "法案(提出)"
 			},
 			{
-				percent: 20, // 估算的百分比
+				percent: 0, // 估算的百分比
 				count: 69,
 				change: "+2",
 				unit: "个",
@@ -168,14 +169,14 @@ const sections = ref([
 		date: "12-19",
 		waveBall: [
 			{
-				percent: 10, // 估算的百分比
+				percent: 0, // 估算的百分比
 				count: 128,
 				change: "+1",
 				unit: "次",
 				title: "实体清单"
 			},
 			{
-				percent: 20, // 估算的百分比
+				percent: 0, // 估算的百分比
 				count: 69,
 				change: "+1",
 				unit: "次",
@@ -188,15 +189,15 @@ const sections = ref([
 		date: "12-15",
 		waveBall: [
 			{
-				percent: 15, // 估算的百分比
-				count: 35,
+				percent: 0, // 估算的百分比
+				count: 0,
 				change: "+1",
 				unit: "次",
 				title: "SDN"
 			},
 			{
-				percent: 5, // 估算的百分比
-				count: 28,
+				percent: 0, // 估算的百分比
+				count: 0,
 				change: "+1",
 				unit: "家",
 				title: "涉军企业"
@@ -208,22 +209,22 @@ const sections = ref([
 		date: "12-15",
 		waveBall: [
 			{
-				percent: 3, // 估算的百分比
-				count: 215,
+				percent: 0, // 估算的百分比
+				count: 0,
 				change: "+1",
 				unit: "次",
 				title: "337调查"
 			},
 			{
-				percent: 3, // 估算的百分比
-				count: 14,
+				percent: 0, // 估算的百分比
+				count: 0,
 				change: "无新增",
 				unit: "次",
 				title: "230调查"
 			},
 			{
-				percent: 3, // 估算的百分比
-				count: 9,
+				percent: 0, // 估算的百分比
+				count: 0,
 				change: "无新增",
 				unit: "次",
 				title: "301调查"
@@ -231,21 +232,117 @@ const sections = ref([
 		]
 	}
 ]);
-// 风险信号
-const warningList = ref([]);
-// 获取法案风险信号
-const handlegetBillRiskSignal = async () => {
-	const params = {
-		moduleId: "0100"
-	};
+
+// 最新风险动态统计
+const handleGetLatestRiskUpdates = async () => {
 	try {
-		const res = await getBillRiskSignal(params);
-		console.log("法案风险信号", res);
-		if (res.code === 200) {
-			warningList.value = res.data;
+		const params = {
+			currentDate: '本周'
+		}
+		const res = await getLatestRiskUpdates(params);
+		console.log("最新风险动态统计", res);
+		if (res.code === 200 && res.data) {
+
+			sections.value = [
+				{
+					title: res.data.policiesRegulations.hotspotTitle,
+					date: res.data.policiesRegulations.hotspotDate,
+					waveBall: [
+						{
+							percent: 30, // 估算的百分比
+							count: res.data.bill.total,
+							change: res.data.bill.dailyIncrement,
+							unit: "项",
+							title: "法案(提出)"
+						},
+						{
+							percent: 20, // 估算的百分比
+							count: res.data.administrativeOrder.total,
+							change: res.data.administrativeOrder.dailyIncrement,
+							unit: "个",
+							title: "政令"
+						}
+					]
+				},
+				{
+					title: res.data.exportControl.hotspotTitle,
+					date: res.data.exportControl.hotspotDate,
+					waveBall: [
+						{
+							percent: 10, // 估算的百分比
+							count: res.data.Entities.total,
+							change: res.data.Entities.dailyIncrement,
+
+							unit: "次",
+							title: "实体清单"
+						},
+						{
+							percent: 20, // 估算的百分比
+							count: res.data.CCL.total,
+							change: res.data.CCL.dailyIncrement,
+							unit: "次",
+							title: "CCL"
+						}
+					]
+				},
+				{
+					title: res.data.investmentFinancingRestrictions.hotspotTitle,
+					date: res.data.investmentFinancingRestrictions.hotspotDate,
+					waveBall: [
+						{
+							percent: 15, // 估算的百分比
+							count: res.data.SDN.total,
+							change: res.data.SDN.dailyIncrement,
+							unit: "次",
+							title: "SDN"
+						},
+						{
+							percent: 5, // 估算的百分比
+							count: res.data.militaryInvolvement.total,
+							change: res.data.militaryInvolvement.dailyIncrement,
+							unit: "家",
+							title: "涉军企业"
+						}
+					]
+				},
+				{
+					title: res.data.marketAccess.hotspotTitle,
+					date: res.data.marketAccess.hotspotDate,
+					waveBall: [
+						{
+							percent: 3, // 估算的百分比
+							count: res.data['337Survey'].total,
+							change: res.data['337Survey'].dailyIncrement,
+							unit: "次",
+							title: "337调查"
+						},
+						{
+							percent: 3, // 估算的百分比
+							count: res.data['232Survey'].total,
+							change: res.data['232Survey'].dailyIncrement,
+							unit: "次",
+							title: "230调查"
+						},
+						{
+							percent: 3, // 估算的百分比
+							count: res.data['301Survey'].total,
+							change: res.data['301Survey'].dailyIncrement,
+							unit: "次",
+							title: "301调查"
+						}
+					]
+				}
+			]
+			console.log(sections.value, 'sections.value')
+		}
+	} catch (error) {
+		console.error("获取最新风险动态统计error", error);
 	}
-	} catch (error) { }
 };
+
+// 风险信号
+const warningList = ref([]);
+const riskTotal = ref(0)
 const hotNewsList = ref([
 	{
 		title: "美国白宫发布关于进一步延长TikTok执法宽限期的行政令",
@@ -266,6 +363,24 @@ const hotNewsList = ref([
 		tags: ['人工智能', '通信网络']
 	}
 ]);
+
+//最新风险信号
+const handleGetLatestRisks = async () => {
+	try {
+
+		const res = await getLatestRisks();
+		console.log("最新风险信号", res);
+		if (res.code === 200 && res.data) {
+			warningList.value = res.data.riskVOS
+			hotNewsList.value = res.data.hotspotVOS
+			riskTotal.value = res.data.riskCount
+			console.log(hotNewsList.value, 'hotNewsList.value')
+		}
+	} catch (error) {
+		console.error("获取最新风险信号error", error);
+	}
+};
+
 const curNews = ref({});
 const carouselRef = ref(null);
 const curHotNewsListIndex = ref(0);
@@ -289,11 +404,16 @@ const handleSwithCurNews = name => {
 		carouselRef.value.next();
 	}
 };
-onMounted(() => {
-	// 这里可以添加从后端获取数据的代码
-	handlegetBillRiskSignal();
+onMounted(async () => {
+
+	await handleGetLatestRiskUpdates()
+	await handleGetLatestRisks()
+
 	console.log("页面加载完成，可以获取数据了");
 });
+// onBeforeUnmount(() => {
+// 	andleGetLatestRiskUpdates()
+// });
 </script>
 
 <style lang="scss" scoped>
@@ -344,6 +464,7 @@ onMounted(() => {
 			text-align: left;
 			display: flex;
 			align-items: center;
+
 			img {
 				/* 矢量 347 */
 				width: 22px;
@@ -375,8 +496,10 @@ onMounted(() => {
 			}
 
 			.manage-btn {
-				margin-left: auto; /* 推到最右侧 */
-				margin-right: 16px; /* 适当的右边距 */
+				margin-left: auto;
+				/* 推到最右侧 */
+				margin-right: 16px;
+				/* 适当的右边距 */
 				padding: 4px 12px;
 				border-radius: 20px;
 				background-color: rgba(206, 79, 81, 0.1);
@@ -430,7 +553,7 @@ onMounted(() => {
 			font-style: Bold;
 			font-size: 20px;
 			font-weight: 700;
-			line-height: 26px;
+			// line-height: 26px;
 			letter-spacing: 0px;
 			text-align: center;
 			display: flex;