update

src/App.vue

@@ -17,7 +17,8 @@
 								@mouseleave="handleShowMenu(index, false)"
 							>
 								<div class="text" :class="{ textActive: homeActiveTitleIndex === index }">
-									{{ item.name }}</div>
+									{{ item.name }}
+								</div>
 								<div class="bottom-line" v-if="homeActiveTitleIndex === index"></div>
 							</div>
 						</div>
@@ -95,12 +96,27 @@
 				</div>
 			</div>
 
-			<div class="ai-btn" @click="openAiBox">
+			<div class="tool-box" aria-disabled="true">
+				<div class="tool-item">
+					<img src="@/assets/icons/tool-item-icon1.png" alt="" />
+				</div>
+				<div class="tool-item">
+					<img src="@/assets/icons/tool-item-icon2.png" alt="" />
+				</div>
+				<div class="tool-item">
+					<img src="@/assets/icons/tool-item-icon3.png" alt="" />
+				</div>
+				<div class="tool-item">
+					<img src="@/assets/icons/tool-item-icon4.png" alt="" />
+				</div>
+			</div>
+
+			<!-- <div class="ai-btn" @click="openAiBox">
 				<div class="icon">
 					<img src="@/assets/icons/ai-icon.png" alt="" />
 				</div>
 				<div class="text">智能问答</div>
-			</div>
+			</div> -->
 
 			<div class="ai-dialog" v-if="isShowAiBox">
 				<AiBox @close="closeAiBox" />
@@ -681,6 +697,33 @@ body {
 		}
 	}
 
+	.tool-box {
+		position: absolute;
+		top: 400px;
+		right: 28px;
+		top: 681px;
+		width: 62px;
+		height: 217px;
+		box-sizing: border-box;
+		border: 1px solid rgba(255, 255, 255, 1);
+		border-radius: 10px;
+		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
+		background: rgba(255, 255, 255, 0.65);
+		box-sizing: border-box;
+		padding: 24px 18px;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		.tool-item {
+			width: 24px;
+			height: 24px;
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+
 	.ai-btn {
 		position: absolute;
 		bottom: 240px;
@@ -749,4 +792,9 @@ body {
 	pointer-events: none;
 }
 
+.tool-box[aria-disabled="true"] {
+	opacity: 0.3;
+	cursor: not-allowed;
+	pointer-events: none;
+}
 </style>

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

@@ -3,10 +3,15 @@
 	<div class="content-wrapper">
 		<div class="policy-monitoring">
 			<div class="header">
-				<div class="section" v-for="(section, index) in sectionTab" :key="index" :style="{
-					width: sections[index].waveBall.length === 2 ? '350px' : '503px',
-					background: section.background
-				}">
+				<div
+					class="section"
+					v-for="(section, index) in sectionTab"
+					:key="index"
+					:style="{
+						width: sections[index].waveBall.length === 2 ? '350px' : '503px',
+						background: section.background
+					}"
+				>
 					<img class="section-title" :src="section.title" />
 					<div class="stats">
 						<div v-for="value in sections[index].waveBall" @click="highLight(value.type)">
@@ -19,7 +24,10 @@
 					</div>
 					<div class="bottm-box" :style="sections[index].waveBall.length === 2 ? 'width: 350px' : 'width:503px'">
 						<img src="./icon/title-icon-1.png" />
-						<div class="bottm-box-text" :style="sections[index].waveBall.length === 2 ? 'width: 225px' : 'width:378px'">
+						<div
+							class="bottm-box-text"
+							:style="sections[index].waveBall.length === 2 ? 'width: 225px' : 'width:378px'"
+						>
 							{{ sections[index].title }}
 						</div>
 						<div style="width: 50px; color: #ffffff">
@@ -34,20 +42,30 @@
 
 					<div>风险信号</div>
 					<div class="num">{{ riskTotal }}</div>
-					<div class="manage-btn" @click="handleToRiskManage">
-						风险信号管理 >
-					</div>
+					<div class="manage-btn" @click="handleToRiskManage">风险信号管理 ></div>
 				</div>
 				<div style="display: flex">
 					<!-- 风险信号列表 -->
 					<div class="risk-signals" ref="riskSignalsRef">
-						<div class="risk-signals-item" v-for="(item, index) in warningList" :key="index"
-							@click="handleClickToDetailO(item)" @mouseenter="onMouseEnter(item.signalId)" @mouseleave="onMouseLeave"
-							:class="['risk-signals-item', { 'risk-signals-item-hightLight': item.eventType === highlightedEventType }]">
-							<div class="item-left" :class="{
-								itemLeftStatus1: item.signalLevel === '特别重大',
-								itemLeftStatus2: item.signalLevel === '重大风险'
-							}">
+						<div
+							class="risk-signals-item"
+							v-for="(item, index) in warningList"
+							:key="index"
+							@click="handleClickToDetailO(item)"
+							@mouseenter="onMouseEnter(item.signalId)"
+							@mouseleave="onMouseLeave"
+							:class="[
+								'risk-signals-item',
+								{ 'risk-signals-item-hightLight': item.eventType === highlightedEventType }
+							]"
+						>
+							<div
+								class="item-left"
+								:class="{
+									itemLeftStatus1: item.signalLevel === '特别重大',
+									itemLeftStatus2: item.signalLevel === '重大风险'
+								}"
+							>
 								{{ item.signalLevel ? item.signalLevel : "一般风险" }}
 							</div>
 							<div class="item-right">
@@ -69,8 +87,15 @@
 								<img src="./icon/box1-right.png" alt="" />
 							</div>
 						</div>
-						<el-carousel ref="carouselRef" style="height: 443px; width: 664px" :autoplay="true" :interval="30000"
-							arrow="never" indicator-position="none" @change="handleCarouselChange">
+						<el-carousel
+							ref="carouselRef"
+							style="height: 443px; width: 664px"
+							:autoplay="true"
+							:interval="30000"
+							arrow="never"
+							indicator-position="none"
+							@change="handleCarouselChange"
+						>
 							<el-carousel-item v-for="(News, NewsIndex) in filteredHotNewsList" :key="NewsIndex">
 								<div class="carousel-item" @click="toDetaile(News.hotspotID, News.hotspotType)">
 									<div class="carousel-title">
@@ -82,9 +107,14 @@
 												{{ News.hotspotTag }}
 											</div>
 										</div>
-										<img :src="News.hotspotPicture?News.hotspotPicture:DefaultOrgIcon" style="width: 96px; height: 96px" />
+										<img
+											:src="News.hotspotPicture ? News.hotspotPicture : DefaultOrgIcon"
+											style="width: 96px; height: 96px"
+										/>
 									</div>
-									<div style="/* 矩形 351 */ width: 664px; height: 1px; background: rgba(234, 236, 238, 1)"></div>
+									<div
+										style="/* 矩形 351 */ width: 664px; height: 1px; background: rgba(234, 236, 238, 1)"
+									></div>
 									<div class="news-carousel-content">{{ News.hotspotDesc }}</div>
 
 									<div class="carousel-bottom">
@@ -109,13 +139,13 @@
 import { color } from "echarts";
 import { onMounted, ref, onUnmounted, computed } from "vue";
 import WaveBall from "./WaveBall.vue";
-import { getLatestRiskUpdates, getLatestRisks } from '@/api/zmOverview/risk/index.js'
+import { getLatestRiskUpdates, getLatestRisks } from "@/api/zmOverview/risk/index.js";
 import router from "@/router/index";
-import icon1 from './icon/title-1.png'
-import icon2 from './icon/title-2.png'
-import icon3 from './icon/title-3.png'
-import icon4 from './icon/title-4.png'
-import DefaultOrgIcon from '@/assets/icons/default-icon2.png'
+import icon1 from "./icon/title-1.png";
+import icon2 from "./icon/title-2.png";
+import icon3 from "./icon/title-3.png";
+import icon4 from "./icon/title-4.png";
+import DefaultOrgIcon from "@/assets/icons/default-icon2.png";
 const sectionTab = [
 	{
 		textColor: "rgba(9, 88, 217, 1)",
@@ -161,7 +191,7 @@ const sections = ref([
 				change: "+3",
 				unit: "项",
 				title: "法案(提出)",
-				type: '法案'
+				type: "法案"
 			},
 			{
 				percent: 0, // 估算的百分比
@@ -169,7 +199,7 @@ const sections = ref([
 				change: "+2",
 				unit: "个",
 				title: "政令",
-				type: '行政令'
+				type: "行政令"
 			}
 		]
 	},
@@ -183,7 +213,7 @@ const sections = ref([
 				change: "+1",
 				unit: "次",
 				title: "实体清单",
-				type: '实体清单'
+				type: "实体清单"
 			},
 			{
 				percent: 0, // 估算的百分比
@@ -191,7 +221,7 @@ const sections = ref([
 				change: "+1",
 				unit: "次",
 				title: "CCL",
-				type: 'CCL'
+				type: "CCL"
 			}
 		]
 	},
@@ -205,7 +235,7 @@ const sections = ref([
 				change: "+1",
 				unit: "次",
 				title: "SDN",
-				type: 'SDN'
+				type: "SDN"
 			},
 			{
 				percent: 0, // 估算的百分比
@@ -213,7 +243,7 @@ const sections = ref([
 				change: "+1",
 				unit: "家",
 				title: "涉军企业",
-				type: '涉军企业'
+				type: "涉军企业"
 			}
 		]
 	},
@@ -227,7 +257,7 @@ const sections = ref([
 				change: "+1",
 				unit: "次",
 				title: "337调查",
-				type: '337调查'
+				type: "337调查"
 			},
 			{
 				percent: 0, // 估算的百分比
@@ -235,7 +265,7 @@ const sections = ref([
 				change: "无新增",
 				unit: "次",
 				title: "230调查",
-				type: '230调查'
+				type: "230调查"
 			},
 			{
 				percent: 0, // 估算的百分比
@@ -243,7 +273,7 @@ const sections = ref([
 				change: "无新增",
 				unit: "次",
 				title: "301调查",
-				type: '301调查'
+				type: "301调查"
 			}
 		]
 	}
@@ -253,12 +283,11 @@ const sections = ref([
 const handleGetLatestRiskUpdates = async () => {
 	try {
 		const params = {
-			currentDate: '本周'
-		}
+			currentDate: "本周"
+		};
 		const res = await getLatestRiskUpdates(params);
 		console.log("最新风险动态统计", res);
 		if (res.code === 200 && res.data) {
-
 			sections.value = [
 				{
 					title: res.data.policiesRegulations.hotspotTitle,
@@ -270,7 +299,7 @@ const handleGetLatestRiskUpdates = async () => {
 							change: res.data.bill.dailyIncrement,
 							unit: "项",
 							title: "法案(提出)",
-							type: '法案'
+							type: "法案"
 						},
 						{
 							percent: 20, // 估算的百分比
@@ -278,7 +307,7 @@ const handleGetLatestRiskUpdates = async () => {
 							change: res.data.administrativeOrder.dailyIncrement,
 							unit: "个",
 							title: "政令",
-							type: '行政令'
+							type: "行政令"
 						}
 					]
 				},
@@ -293,7 +322,7 @@ const handleGetLatestRiskUpdates = async () => {
 
 							unit: "次",
 							title: "实体清单",
-							type: '实体清单'
+							type: "实体清单"
 						},
 						{
 							percent: 20, // 估算的百分比
@@ -301,7 +330,7 @@ const handleGetLatestRiskUpdates = async () => {
 							change: res.data.CCL.dailyIncrement,
 							unit: "次",
 							title: "CCL",
-							type: 'CCL'
+							type: "CCL"
 						}
 					]
 				},
@@ -315,7 +344,7 @@ const handleGetLatestRiskUpdates = async () => {
 							change: res.data.SDN.dailyIncrement,
 							unit: "次",
 							title: "SDN",
-							type: 'SDN'
+							type: "SDN"
 						},
 						{
 							percent: 5, // 估算的百分比
@@ -323,7 +352,7 @@ const handleGetLatestRiskUpdates = async () => {
 							change: res.data.militaryInvolvement.dailyIncrement,
 							unit: "家",
 							title: "涉军企业",
-							type: '涉军企业'
+							type: "涉军企业"
 						}
 					]
 				},
@@ -333,32 +362,32 @@ const handleGetLatestRiskUpdates = async () => {
 					waveBall: [
 						{
 							percent: 3, // 估算的百分比
-							count: res.data['337Survey'].total,
-							change: res.data['337Survey'].dailyIncrement,
+							count: res.data["337Survey"].total,
+							change: res.data["337Survey"].dailyIncrement,
 							unit: "次",
 							title: "337调查",
-							type: '337调查'
+							type: "337调查"
 						},
 						{
 							percent: 3, // 估算的百分比
-							count: res.data['232Survey'].total,
-							change: res.data['232Survey'].dailyIncrement,
+							count: res.data["232Survey"].total,
+							change: res.data["232Survey"].dailyIncrement,
 							unit: "次",
 							title: "230调查",
-							type: '230调查'
+							type: "230调查"
 						},
 						{
 							percent: 3, // 估算的百分比
-							count: res.data['301Survey'].total,
-							change: res.data['301Survey'].dailyIncrement,
+							count: res.data["301Survey"].total,
+							change: res.data["301Survey"].dailyIncrement,
 							unit: "次",
 							title: "301调查",
-							type: '301调查'
+							type: "301调查"
 						}
 					]
 				}
-			]
-			console.log(sections.value, 'sections.value')
+			];
+			console.log(sections.value, "sections.value");
 		}
 	} catch (error) {
 		console.error("获取最新风险动态统计error", error);
@@ -367,7 +396,7 @@ const handleGetLatestRiskUpdates = async () => {
 
 // 风险信号
 const warningList = ref([]);
-const riskTotal = ref(0)
+const riskTotal = ref(0);
 const hotNewsList = ref([
 	{
 		title: "美国白宫发布关于进一步延长TikTok执法宽限期的行政令",
@@ -376,7 +405,7 @@ const hotNewsList = ref([
 			"2025年1月20日第14166号行政命令第2（a）条（《保护美国免受外国对抗者控制应用法案》对TikTok的适用）规定的执行延迟，并由2025年4月4日第14258号行政命令（延长TikTok执法延迟）和2025年6月19日第14310号行政命令（进一步延长TikTok执法延迟）所延长，进一步延长至2025年12月16日。在此期间，司法部不得采取任何行动执行《保护美国人免受外国对抗者控制应用法案》（以下简称“法案”）（公共法118-50，H部），也不得对任何违反该法案的实体处以任何处罚，包括分发、维护、更新（或促成分发，维护或更新任何外国对手控制的应用，如本法所定义。鉴于本指示，即使在上述规定期限届满后，司法部也应继续与相关部门合作，以确保美国国家安全和公民隐私权利不受威胁。",
 		date: "2025年9月16日",
 		source: "美国白宫·总统行政令",
-		tags: ['人工智能', '通信网络']
+		tags: ["人工智能", "通信网络"]
 	},
 	{
 		title: "美国白宫发布关于进一步延长TikTok执法宽限期的行政令",
@@ -385,7 +414,7 @@ const hotNewsList = ref([
 			"2025年1月20日第14166号行政命令第2（a）条（《保护美国免受外国对抗者控制应用法案》对TikTok的适用）规定的执行延迟，并由2025年4月4日第14258号行政命令（延长TikTok执法延迟）和2025年6月19日第14310号行政命令（进一步延长TikTok执法延迟）所延长，进一步延长至2025年12月16日。在此期间，司法部不得采取任何行动执行《保护美国人免受外国对抗者控制应用法案》（以下简称“法案”）（公共法118-50，H部），也不得对任何违反该法案的实体处以任何处罚，包括分发、维护、更新（或促成分发，维护或更新任何外国对手控制的应用，如本法所定义。鉴于本指示，即使在上述规定期限届满后，司法部也应继续与相关部门合作，以确保美国国家安全和公民隐私权利不受威胁。",
 		date: "2025年9月16日",
 		source: "美国白宫·总统行政令",
-		tags: ['人工智能', '通信网络']
+		tags: ["人工智能", "通信网络"]
 	}
 ]);
 
@@ -395,10 +424,10 @@ const handleGetLatestRisks = async () => {
 		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')
+			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);
@@ -439,7 +468,7 @@ const handleClickToDetailO = item => {
 
 const currentHoveredSignalId = ref(null);
 
-const onMouseEnter = (signalId) => {
+const onMouseEnter = signalId => {
 	currentHoveredSignalId.value = signalId;
 };
 
@@ -458,12 +487,12 @@ const handleToRiskManage = () => {
 	// router.push('/riskSignalManage');
 	const route = router.resolve("/riskSignal");
 	window.open(route.href, "_blank");
-	console.log('跳转到风险信号管理');
+	console.log("跳转到风险信号管理");
 };
 
-const highlightedEventType = ref('')
-const highLight = (title) => {
-	console.log(title)
+const highlightedEventType = ref("");
+const highLight = title => {
+	console.log(title);
 	// 如果再次点击同一个，取消高亮
 	if (highlightedEventType.value === title) {
 		highlightedEventType.value = null;
@@ -472,13 +501,13 @@ const highLight = (title) => {
 	}
 };
 const toDetaile = (id, type) => {
-	console.log(id, type)
-	if (type === '法案') {
+	console.log(id, type);
+	if (type === "法案") {
 		let path = "/billLayout/bill/introduction";
 		let query = { billId: id };
 		const { href } = router.resolve({ path, query });
 		window.open(href, "_blank");
-	} else if (type === '政令') {
+	} else if (type === "政令") {
 		const route = router.resolve({
 			path: "/decreeLayout/overview/introduction",
 			query: {
@@ -486,7 +515,7 @@ const toDetaile = (id, type) => {
 			}
 		});
 		window.open(route.href, "_blank");
-	} else if (type === '实体清单' || type === 'CCL') {
+	} else if (type === "实体清单" || type === "CCL") {
 		const route = router.resolve({
 			path: "/exportControl/singleSanction",
 			query: {
@@ -494,7 +523,7 @@ const toDetaile = (id, type) => {
 			}
 		});
 		window.open(route.href, "_blank");
-	} else if (type === '337') {
+	} else if (type === "337") {
 		const curRoute = router.resolve({
 			path: "/marketSingleCaseLayout/overview",
 			query: {
@@ -503,7 +532,7 @@ const toDetaile = (id, type) => {
 			}
 		});
 		window.open(curRoute.href, "_blank");
-	} else if (type === '203') {
+	} else if (type === "203") {
 		const curRoute = router.resolve({
 			path: "/marketSingleCaseLayout/overview",
 			query: {
@@ -512,7 +541,7 @@ const toDetaile = (id, type) => {
 			}
 		});
 		window.open(curRoute.href, "_blank");
-	} else if (type === '301') {
+	} else if (type === "301") {
 		const curRoute = router.resolve({
 			path: "/marketSingleCaseLayout/overview",
 			query: {
@@ -523,7 +552,7 @@ const toDetaile = (id, type) => {
 		window.open(curRoute.href, "_blank");
 	}
 	//type=涉军企业和SDN未对接
-}
+};
 const handleSwithCurNews = name => {
 	if (name === "left") {
 		carouselRef.value.prev();
@@ -536,19 +565,17 @@ const riskSignalsRef = ref(null); // 引用risk-signals容器
 
 let intervalId;
 onMounted(async () => {
-
-	await handleGetLatestRiskUpdates()
-	await handleGetLatestRisks()
+	await handleGetLatestRiskUpdates();
+	await handleGetLatestRisks();
 
 	const scrollInterval = 2000; // 每隔2秒滚动一次
 	let currentScroll = 0;
 
 	intervalId = setInterval(() => {
 		if (riskSignalsRef.value) {
-
 			const scrollHeight = riskSignalsRef.value.scrollHeight; // 内容总高度
 			const clientHeight = riskSignalsRef.value.clientHeight; // 可视区域高度
-			console.log(scrollHeight, clientHeight)
+			console.log(scrollHeight, clientHeight);
 			// 如果滚动到底，则回到顶部
 			if (currentScroll + clientHeight >= scrollHeight) {
 				currentScroll = 0;
@@ -593,7 +620,7 @@ onUnmounted(() => {
 		height: 568px;
 		box-sizing: border-box;
 		border: 1px solid rgba(255, 255, 255, 1);
-		border-radius: var(---10, 10px);
+		border-radius: 10px;
 		/* 业务系统/模块阴影 */
 		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
 		background: rgba(255, 255, 255, 0.65);
@@ -829,6 +856,10 @@ onUnmounted(() => {
 					overflow: hidden;
 					text-overflow: ellipsis;
 					white-space: nowrap;
+					&:hover {
+						color: var(--color-main-active);
+						font-weight: bold;
+					}
 				}
 
 				.time {
@@ -1096,8 +1127,6 @@ onUnmounted(() => {
 					}
 				}
 			}
-
-
 		}
 	}