update

src/components/headerMenu.vue

@@ -247,6 +247,7 @@ const rightList = ref([
 	width: 100%;
 	height: 299px;
 	background: rgb(249, 249, 249);
+	box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.3);
 	display: flex;
 	.left {
 		margin-top: 35px;

src/views/companyPages/index.vue

@@ -3,7 +3,7 @@
 		<!-- 公司导航栏 -->
 		<div class="company-nav">
 			<div class="company-logo-title">
-				<img :src="infoData.logoUrl" class="logo-img" />
+				<img :src="infoData.logoUrl?infoData.logoUrl:defaultCompanyIcon" class="logo-img" />
 				<div class="title-group">
 					<h1 class="company-name">{{ infoData.orgName }}</h1>
 					<p class="company-english">{{ infoData.orgNameEn }}</p>
@@ -131,7 +131,7 @@
 						<div class="personnel-grid">
 							<div class="personnel-card" v-for="(person, idx) in mainPersonnel" :key="idx">
 								<div class="personnel-card-header">
-									<img :src="person.avatarUrl" class="person-avatar" />
+									<img :src="person.avatarUrl?person.avatarUrl:defaultUserIcon" class="person-avatar" />
 									<div class="person-info">
 										<h4 class="person-name">{{ person.name }}</h4>
 										<p class="person-position">{{ person.position }}</p>
@@ -193,6 +193,9 @@ import TabIcon2Active from "./images/tab-icon2-active.png";
 import TabIcon3Active from "./images/tab-icon3-active.png";
 import TabIcon4Active from "./images/tab-icon4-active.png";
 
+import defaultUserIcon from "@/assets/icons/default-icon1.png"
+import defaultCompanyIcon from "@/assets/icons/default-icon2.png"
+
 const router = useRouter();
 const tabList = ref([
 	{

src/views/exportControl/index.vue

@@ -1064,8 +1064,8 @@ const handleEntityClick = item => {
 	const route = router.resolve({
 		name: "companyPages",
 		params: {
-			startTime: item.startTime,
-			id: item.id
+			// startTime: item.startTime,
+			id: item.entityId
 		}
 	});
 	window.open(route.href, "_blank");

src/views/exportControl/v2.0EntityList/components/sanctionsOverview/components/listPage/RuleSubsidiaryDialog.vue

@@ -37,7 +37,7 @@
 					<template #default="{ row }">
 						<div class="entity-name-cell">
 							<el-avatar class="avatar" :size="24" :src="row.avatar || defaultIcon" />
-							<div class="name" :title="row.name">{{ row.name }}</div>
+							<div class="name" @click="handleCompClick(row)" :title="row.name">{{ row.name }}</div>
 						</div>
 					</template>
 				</el-table-column>
@@ -79,8 +79,9 @@
 
 <script setup>
 import { ref, defineProps, defineEmits, computed, watch } from "vue";
+import router from "@/router";
 import { Close } from "@element-plus/icons-vue";
-import defaultIcon from "../../../../../assets/icons/default-avatar.png";
+import defaultIcon from "@/assets/icons/default-icon1.png";
 
 const props = defineProps({
 	modelValue: {
@@ -149,6 +150,20 @@ const getTagStyle = tag => {
 	const index = Math.abs(hash) % colorPool.length;
 	return colorPool[index];
 };
+
+// 跳转公司详情页
+const handleCompClick = item => {
+	console.log("item", item);
+	window.sessionStorage.setItem('curTabName', item.entityNameZh || item.entityName)
+	const route = router.resolve({
+		name: "companyPages",
+		params: {
+			id: item.id
+		}
+	});
+	window.open(route.href, "_blank");
+};
+
 </script>
 
 <style lang="scss" scoped>
@@ -271,6 +286,7 @@ const getTagStyle = tag => {
 			overflow: hidden;
 			white-space: nowrap;
 			text-overflow: ellipsis;
+			cursor: pointer;
 		}
 	}
 

src/views/exportControl/v2.0EntityList/components/sanctionsOverview/components/listPage/index.vue

@@ -127,7 +127,7 @@ const handleCompClick = item => {
 	const route = router.resolve({
 		name: "companyPages",
 		params: {
-			id: item.id
+			id: item.entityId
 		}
 	});
 	window.open(route.href, "_blank");

src/views/exportControl/v2.0SingleSanction/components/dataStatistics/index.vue

@@ -475,7 +475,7 @@ const initDomainChart = () => {
 			{
 				name: "制裁实体领域分布",
 				type: "pie",
-				radius: [73.5, 89.5],
+				radius: [65, 81],
 				center: ["50%", "50%"],
 				startAngle: 90,
 				data: data,
@@ -485,24 +485,24 @@ const initDomainChart = () => {
           minMargin: 5,
           edgeDistance: 10,
 					formatter: params => {
-						return "{name|" + params.name + "}\n{value|" + params.value + "家 " + params.percent + "%}";
+						return "{name|" + params.name + "} \n {value|" + params.value + "家 " + params.percent + "%}";
 					},
 					rich: {
 						name: {
 							fontSize: 18,
 							fontWeight: 700,
 							color: "rgb(59, 65, 75)",
-							padding: [0, 0, 5, 0],
+							padding: [10, 0, 10, 0],
 							fontFamily: "Microsoft YaHei",
-							lineHeight: 26
+							lineHeight: 22
 						},
 						value: {
 							fontSize: 16,
 							fontWeight: 400,
 							color: "rgb(95, 101, 108)",
 							fontFamily: "Microsoft YaHei",
-							lineHeight: 24,
-							padding: [5, 0, 0, 0]
+							lineHeight: 22,
+							padding: [10, 0, 10, 0]
 						}
 					}
 				},

src/views/exportControl/v2.0SingleSanction/components/deepMining/index.vue

 <template>
-	<div class="deep-mining">
+	<div class="deep-mining" :class="{ deepMiningChartmode: isInChart }">
 		<div class="side-nav">
 			<div
 				v-for="(item, index) in activeTab"
@@ -68,7 +68,7 @@
 									@click="selectEntity(item)"
 								>
 									<div class="item-icon">
-									<img :src="defaultTitle" alt="" class="item-img">
+										<img :src="defaultTitle" alt="" class="item-img" />
 									</div>
 									<span class="item-name">{{ item.name }}</span>
 								</div>
@@ -77,7 +77,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="right">
+			<div class="right" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
 				<div class="title-com custom-right-header">
 					<div class="toggle-group">
 						<div
@@ -85,7 +85,7 @@
 							:class="{ active: rightActiveTab === 'supplyChain' }"
 							@click="rightActiveTab = 'supplyChain'"
 						>
-							<img :src="rightActiveTab === 'supplyChain' ? icon01Active : icon01" alt="">
+							<img :src="rightActiveTab === 'supplyChain' ? icon01Active : icon01" alt="" />
 							<span>供应链</span>
 						</div>
 						<div
@@ -93,7 +93,7 @@
 							:class="{ active: rightActiveTab === 'equity' }"
 							@click="rightActiveTab = 'equity'"
 						>
-							<img :src="rightActiveTab === 'equity' ? icon02Active : icon02" alt="">
+							<img :src="rightActiveTab === 'equity' ? icon02Active : icon02" alt="" />
 							<span>股权</span>
 						</div>
 					</div>
@@ -131,20 +131,38 @@
 				<div class="right-echarts">
 					<div class="chart-wrapper">
 						<div class="chart-controls">
-							<div class="control-btn"><img :src="echartsIcon01" /></div>
-							<div class="control-btn"><img :src="echartsIcon02" /></div>
-							<div class="control-btn"><img :src="echartsIcon03" /></div>
+							<div
+								class="control-btn"
+								:class="{ controlBtnActive: controlActive === 1 }"
+								@click="handleClickControlBtn(1)"
+							>
+								<img :src="echartsIcon01" />
+							</div>
+							<div
+								class="control-btn"
+								:class="{ controlBtnActive: controlActive === 2 }"
+								@click="handleClickControlBtn(2)"
+							>
+								<img :src="echartsIcon02" />
+							</div>
+							<div
+								class="control-btn"
+								:class="{ controlBtnActive: controlActive === 3 }"
+								@click="handleClickControlBtn(3)"
+							>
+								<img :src="echartsIcon03" />
+							</div>
 						</div>
 						<div class="chart-legend">
 							<div class="legend-item"><span class="dot blue"></span>已被制裁实体</div>
 							<div class="legend-item"><span class="dot grey"></span>未被制裁实体</div>
 						</div>
-						<div ref="chartRef" class="chart-container"></div>
+						<div ref="chartRef" id="chartbox" class="chart-container"></div>
 
 						<div class="node-popup" v-if="selectedNode">
 							<div class="popup-header">
 								<img :src="defaultTitle" class="popup-icon" />
-								<span class="popup-title">{{ selectedNode.name.replace(/\n/g, '') }}</span>
+								<span class="popup-title">{{ selectedNode.name.replace(/\n/g, "") }}</span>
 								<el-icon class="close-icon" @click="selectedNode = null"><Close /></el-icon>
 							</div>
 							<div class="popup-body">
@@ -174,16 +192,55 @@ import { debounce } from "lodash";
 import * as echarts from "echarts";
 import { Search, CaretRight, Close } from "@element-plus/icons-vue";
 import defaultTitle from "../../assets/default-icon2.png";
-import icon01 from "./assets/icon01.png"
-import icon02 from "./assets/icon02.png"
-import icon01Active from "./assets/icon01-active.png"
-import icon02Active from "./assets/icon02-active.png"
-import echartsIcon01 from "./assets/echartsIcon01.png"
-import echartsIcon02 from "./assets/echartsIcon02.png"
-import echartsIcon03 from "./assets/echartsIcon03.png"
-import company from "./assets/company.png"
-import companyActive from "./assets/company-active.png"
-import { getSingleSanctionEntityList, getSingleSanctionEntitySupplyChain, getSingleSanctionEntityEquity } from "@/api/exportControlV2.0";
+import icon01 from "./assets/icon01.png";
+import icon02 from "./assets/icon02.png";
+import icon01Active from "./assets/icon01-active.png";
+import icon02Active from "./assets/icon02-active.png";
+import echartsIcon01 from "./assets/echartsIcon01.png";
+import echartsIcon02 from "./assets/echartsIcon02.png";
+import echartsIcon03 from "./assets/echartsIcon03.png";
+import company from "./assets/company.png";
+import companyActive from "./assets/company-active.png";
+import {
+	getSingleSanctionEntityList,
+	getSingleSanctionEntitySupplyChain,
+	getSingleSanctionEntityEquity
+} from "@/api/exportControlV2.0";
+import getTreeChart from "./utils/treeChart";
+import setChart from "@/utils/setChart";
+
+const controlActive = ref(1);
+
+const treeData = ref([{}]);
+const handleClickControlBtn = btn => {
+	controlActive.value = btn;
+	if (btn === 1 || btn === 3) {
+		isInChart.value = true;
+		initChart();
+	} else if (btn === 2) {
+		isInChart.value = false;
+		if (chartInstance.value) {
+			chartInstance.value.dispose();
+		}
+		console.log("treeData", treeData.value);
+
+		let treeChart = getTreeChart(treeData.value);
+		setChart(treeChart, "chartbox");
+	}
+};
+
+const isInChart = ref(false);
+const handleMouseEnter = () => {
+	if (controlActive.value !== 2) {
+		isInChart.value = true;
+	} else {
+		isInChart.value = false;
+	}
+};
+
+const handleMouseLeave = () => {
+	isInChart.value = false;
+};
 
 // 单次制裁-深度挖掘-制裁实体股权信息-列表
 const singleSanctionEntityEquityData = ref(null);
@@ -192,18 +249,16 @@ const getSingleSanctionEntityEquityRequest = async () => {
 	try {
 		const res = await getSingleSanctionEntityEquity({
 			orgId: activeEntityId.value,
-      rule: is50PercentRule.value,
-    })
+			rule: is50PercentRule.value
+		});
 		if (res.code === 200) {
 			singleSanctionEntityEquityData.value = res.data || null;
 			initChart();
 		}
 	} catch (error) {
-    console.log(error)
+		console.log(error);
 	}
-}
-
-
+};
 
 // 单次制裁-深度挖掘-制裁实体供应链信息-列表
 const singleSanctionEntitySupplyChainData = ref(null);
@@ -211,21 +266,32 @@ const singleSanctionEntitySupplyChainData = ref(null);
 const getSingleSanctionEntitySupplyChainRequest = async () => {
 	try {
 		const res = await getSingleSanctionEntitySupplyChain({
-      orgId: activeEntityId.value,
-    })
+			orgId: activeEntityId.value
+		});
 		if (res.code === 200) {
 			singleSanctionEntitySupplyChainData.value = res.data || null;
 			initChart();
+
+			treeData.value[0].id = res.data.orgId;
+			treeData.value[0].name = res.data.orgName;
+			treeData.value[0].symbol = "image://" + companyActive;
+			treeData.value[0].symbolSize = 50;
+			treeData.value[0].value = 10;
+			treeData.value[0].children = res.data.parentOrgList.map(item => {
+				return {
+					id: item.id,
+					name: item.name,
+					symbolSize: 30,
+					value: 10,
+					symbol: `image://${company}`
+				};
+			});
+			console.log("treeData0", treeData.value);
 		}
 	} catch (error) {
-    console.log(error)
+		console.log(error);
 	}
-}
-
-
-
-
-
+};
 
 // 单次制裁-深度挖掘-本次制裁实体清单列表
 const singleSanctionEntityList = ref([]);
@@ -236,8 +302,8 @@ const getSingleSanctionEntityListRequest = async () => {
 			sanRecordId: sanRecordId.value,
 			isOnlyCn: false,
 			domainId: searchDomain.value || undefined,
-      searchText: searchText.value || undefined,
-    })
+			searchText: searchText.value || undefined
+		});
 		if (res.code === 200) {
 			entityList.value = (res.data || []).map((group, index) => ({
 				id: `group-${index}`,
@@ -260,17 +326,15 @@ const getSingleSanctionEntityListRequest = async () => {
 			}
 		}
 	} catch (error) {
-    console.log(error)
+		console.log(error);
 	}
-}
-
-
+};
 
-const sanRecordId = ref("")
+const sanRecordId = ref("");
 const getUrlParams = () => {
 	const urlParams = new URLSearchParams(window.location.search);
-    sanRecordId.value = urlParams.get("id") || ""
-}
+	sanRecordId.value = urlParams.get("id") || "";
+};
 
 // const activeTab = ref(["实体穿透分析", "重点实体识别"]);
 const activeTab = ref(["实体穿透分析"]);
@@ -287,11 +351,11 @@ const is50PercentRule = ref(false);
 
 const entityList = ref([]);
 
-const toggleGroup = (group) => {
+const toggleGroup = group => {
 	group.expanded = !group.expanded;
 };
 
-const selectEntity = (item) => {
+const selectEntity = item => {
 	activeEntityId.value = item.id;
 	currentEntityName.value = item.name;
 };
@@ -311,7 +375,7 @@ const initChart = () => {
 
 	let option = {};
 
-	if (rightActiveTab.value === 'supplyChain') {
+	if (rightActiveTab.value === "supplyChain") {
 		option = getSupplyChainOption();
 	} else {
 		option = getEquityOption();
@@ -319,15 +383,15 @@ const initChart = () => {
 
 	chartInstance.value.setOption(option);
 
-	chartInstance.value.on('click', (params) => {
-		if (params.dataType === 'node') {
+	chartInstance.value.on("click", params => {
+		if (params.dataType === "node") {
 			selectedNode.value = params.data;
 		} else {
 			selectedNode.value = null;
 		}
 	});
 
-	chartInstance.value.getZr().on('click', (params) => {
+	chartInstance.value.getZr().on("click", params => {
 		if (!params.target) {
 			selectedNode.value = null;
 		}
@@ -345,21 +409,21 @@ const getSupplyChainOption = () => {
 
 	// 中心节点
 	nodes.push({
-		id: '0',
+		id: "0",
 		name: data.orgName,
 		category: 0, // 强制为制裁中
-		symbol: 'image://' + companyActive, // 强制使用制裁中图标
+		symbol: "image://" + companyActive, // 强制使用制裁中图标
 		x: centerX,
 		y: centerY,
 		symbolSize: 50,
 		label: {
 			fontSize: 16,
-			fontWeight: 'bold', 
-			color: '#055FC2', // 使用制裁蓝，在图标下方更清晰
-			position: 'bottom',
+			fontWeight: "bold",
+			color: "#055FC2", // 使用制裁蓝，在图标下方更清晰
+			position: "bottom",
 			distance: 10,
 			width: 150,
-			overflow: 'break'
+			overflow: "break"
 		}
 	});
 
@@ -374,26 +438,26 @@ const getSupplyChainOption = () => {
 		const y = centerY + radius * Math.sin(angle);
 
 		// 动态计算标签位置：根据余弦值判断左右，根据正弦值判断上下
-		let position = 'right';
-		let align = 'left';
+		let position = "right";
+		let align = "left";
 		const cosA = Math.cos(angle);
 		const sinA = Math.sin(angle);
 
 		if (Math.abs(cosA) < 0.3) {
 			// 顶部区域
-			position = 'top';
-			align = 'center';
+			position = "top";
+			align = "center";
 		} else if (cosA < 0) {
 			// 左侧区域
-			position = 'left';
-			align = 'right';
+			position = "left";
+			align = "right";
 		}
 
 		nodes.push({
 			id: `p-${item.id}`,
 			name: item.name,
 			category: item.isSanctioned ? 0 : 1,
-			symbol: 'image://' + (item.isSanctioned ? companyActive : company),
+			symbol: "image://" + (item.isSanctioned ? companyActive : company),
 			x: x,
 			y: y,
 			isSanctioned: item.isSanctioned,
@@ -402,7 +466,7 @@ const getSupplyChainOption = () => {
 				align: align,
 				distance: 8,
 				width: 110,
-				overflow: 'break',
+				overflow: "break",
 				lineHeight: 14,
 				fontSize: 11
 			}
@@ -410,8 +474,8 @@ const getSupplyChainOption = () => {
 
 		links.push({
 			source: `p-${item.id}`,
-			target: '0',
-			value: '供应商',
+			target: "0",
+			value: "供应商",
 			isSanctioned: item.isSanctioned && data.isSanctioned
 		});
 	});
@@ -426,26 +490,26 @@ const getSupplyChainOption = () => {
 		const y = centerY + radius * Math.sin(angle);
 
 		// 动态计算标签位置
-		let position = 'right';
-		let align = 'left';
+		let position = "right";
+		let align = "left";
 		const cosA = Math.cos(angle);
 		const sinA = Math.sin(angle);
 
 		if (Math.abs(cosA) < 0.3) {
 			// 底部区域
-			position = 'bottom';
-			align = 'center';
+			position = "bottom";
+			align = "center";
 		} else if (cosA < 0) {
 			// 左侧区域
-			position = 'left';
-			align = 'right';
+			position = "left";
+			align = "right";
 		}
 
 		nodes.push({
 			id: `c-${item.id}`,
 			name: item.name,
 			category: item.isSanctioned ? 0 : 1,
-			symbol: 'image://' + (item.isSanctioned ? companyActive : company),
+			symbol: "image://" + (item.isSanctioned ? companyActive : company),
 			x: x,
 			y: y,
 			isSanctioned: item.isSanctioned,
@@ -454,16 +518,16 @@ const getSupplyChainOption = () => {
 				align: align,
 				distance: 8,
 				width: 110,
-				overflow: 'break',
+				overflow: "break",
 				lineHeight: 14,
 				fontSize: 11
 			}
 		});
 
 		links.push({
-			source: '0',
+			source: "0",
 			target: `c-${item.id}`,
-			value: '客户',
+			value: "客户",
 			isSanctioned: item.isSanctioned && data.isSanctioned
 		});
 	});
@@ -471,45 +535,45 @@ const getSupplyChainOption = () => {
 	return {
 		tooltip: {
 			show: true,
-			formatter: (params) => {
-				if (params.dataType === 'node') {
+			formatter: params => {
+				if (params.dataType === "node") {
 					return `<div style="padding: 8px; max-width: 300px; white-space: normal; word-break: break-all;">${params.data.name}</div>`;
 				}
-				return '';
+				return "";
 			}
 		},
 		series: [
 			{
-				type: 'graph',
-				layout: 'none',
+				type: "graph",
+				layout: "none",
 				symbolSize: 36,
 				roam: true,
 				label: {
 					show: true,
-					formatter: '{b}',
+					formatter: "{b}",
 					fontSize: 12,
 					hideOverlap: true
 				},
-				edgeSymbol: ['none', 'arrow'],
+				edgeSymbol: ["none", "arrow"],
 				edgeSymbolSize: [4, 8],
 				edgeLabel: {
-					position: 'middle',
+					position: "middle",
 					offset: [0, 13],
 					fontSize: 12,
 					fontWeight: 400,
-					fontFamily: 'Microsoft YaHei',
+					fontFamily: "Microsoft YaHei",
 					lineHeight: 16,
 					show: true,
-					formatter: '{c}',
-					color: 'rgba(170, 173, 177, 1)',
-					backgroundColor: 'rgba(234, 236, 238, 1)',
+					formatter: "{c}",
+					color: "rgba(170, 173, 177, 1)",
+					backgroundColor: "rgba(234, 236, 238, 1)",
 					padding: [4, 8],
 					borderRadius: 20
 				},
 				data: nodes.map(node => ({
 					...node,
 					label: {
-						color: node.category === 0 ? '#055FC2' : '#5F656C',
+						color: node.category === 0 ? "#055FC2" : "#5F656C",
 						...node.label
 					}
 				})),
@@ -517,24 +581,26 @@ const getSupplyChainOption = () => {
 					return {
 						...link,
 						lineStyle: {
-							color: link.isSanctioned ? 'rgba(100, 180, 255, 1)' : 'rgb(180, 181, 182)',
+							color: link.isSanctioned ? "rgba(100, 180, 255, 1)" : "rgb(180, 181, 182)",
 							width: 1,
 							curveness: 0
 						},
-						label: link.isSanctioned ? {
+						label: link.isSanctioned
+							? {
 									show: true,
-							formatter: '{c}',
-							backgroundColor: 'rgba(231, 243, 255, 1)',
-							color: 'rgba(50, 150, 250, 1)',
+									formatter: "{c}",
+									backgroundColor: "rgba(231, 243, 255, 1)",
+									color: "rgba(50, 150, 250, 1)",
 									borderRadius: 20,
 									padding: [4, 8],
 									fontSize: 12,
 									fontWeight: 400,
-							fontFamily: 'Microsoft YaHei',
+									fontFamily: "Microsoft YaHei",
 									lineHeight: 16
-						} : undefined
+							  }
+							: undefined
 					};
-				}),
+				})
 			}
 		]
 	};
@@ -551,21 +617,21 @@ const getEquityOption = () => {
 
 	// 中心节点
 	nodes.push({
-		id: '0',
+		id: "0",
 		name: data.orgName,
 		category: 0, // 强制为制裁中
-		symbol: 'image://' + companyActive, // 强制使用制裁中图标
+		symbol: "image://" + companyActive, // 强制使用制裁中图标
 		x: centerX,
 		y: centerY,
 		symbolSize: 50,
 		label: {
 			fontSize: 16,
-			fontWeight: 'bold', 
-			color: '#055FC2', // 使用制裁蓝，在图标下方更清晰
-			position: 'bottom',
+			fontWeight: "bold",
+			color: "#055FC2", // 使用制裁蓝，在图标下方更清晰
+			position: "bottom",
 			distance: 10,
 			width: 150,
-			overflow: 'break'
+			overflow: "break"
 		}
 	});
 
@@ -583,15 +649,15 @@ const getEquityOption = () => {
 			id: `p-${index}`,
 			name: item.name,
 			category: item.isSanctioned ? 0 : 1,
-			symbol: 'image://' + (item.isSanctioned ? companyActive : company),
+			symbol: "image://" + (item.isSanctioned ? companyActive : company),
 			x: x,
 			y: y,
 			isSanctioned: item.isSanctioned,
 			label: {
-				position: 'top',
+				position: "top",
 				distance: 8,
 				width: 110,
-				overflow: 'break',
+				overflow: "break",
 				lineHeight: 14,
 				fontSize: 11
 			}
@@ -599,8 +665,8 @@ const getEquityOption = () => {
 
 		links.push({
 			source: `p-${index}`,
-			target: '0',
-			value: item.type || '持股', // 使用 type 字段
+			target: "0",
+			value: item.type || "持股", // 使用 type 字段
 			isSanctioned: item.isSanctioned // 中心节点强制制裁，高亮取决于对方
 		});
 	});
@@ -619,24 +685,24 @@ const getEquityOption = () => {
 			id: `c-${index}`,
 			name: item.name,
 			category: item.isSanctioned ? 0 : 1,
-			symbol: 'image://' + (item.isSanctioned ? companyActive : company),
+			symbol: "image://" + (item.isSanctioned ? companyActive : company),
 			x: x,
 			y: y,
 			isSanctioned: item.isSanctioned,
 			label: {
-				position: 'bottom',
+				position: "bottom",
 				distance: 8,
 				width: 110,
-				overflow: 'break',
+				overflow: "break",
 				lineHeight: 14,
 				fontSize: 11
 			}
 		});
 
 		links.push({
-			source: '0',
+			source: "0",
 			target: `c-${index}`,
-			value: item.type || '持股', // 使用 type 字段
+			value: item.type || "持股", // 使用 type 字段
 			isSanctioned: item.isSanctioned // 中心节点强制制裁，高亮取决于对方
 		});
 	});
@@ -644,45 +710,45 @@ const getEquityOption = () => {
 	return {
 		tooltip: {
 			show: true,
-			formatter: (params) => {
-				if (params.dataType === 'node') {
+			formatter: params => {
+				if (params.dataType === "node") {
 					return `<div style="padding: 8px; max-width: 300px; white-space: normal; word-break: break-all;">${params.data.name}</div>`;
 				}
-				return '';
+				return "";
 			}
 		},
 		series: [
 			{
-				type: 'graph',
-				layout: 'none',
+				type: "graph",
+				layout: "none",
 				symbolSize: 36,
 				roam: true,
 				label: {
 					show: true,
-					formatter: '{b}',
+					formatter: "{b}",
 					fontSize: 12,
 					hideOverlap: true
 				},
-				edgeSymbol: ['none', 'arrow'],
+				edgeSymbol: ["none", "arrow"],
 				edgeSymbolSize: [4, 8],
 				edgeLabel: {
-					position: 'middle',
+					position: "middle",
 					offset: [0, 13],
 					fontSize: 12,
 					fontWeight: 400,
-					fontFamily: 'Microsoft YaHei',
+					fontFamily: "Microsoft YaHei",
 					lineHeight: 16,
 					show: true,
-					formatter: '{c}',
-					color: 'rgba(170, 173, 177, 1)',
-					backgroundColor: 'rgba(234, 236, 238, 1)',
+					formatter: "{c}",
+					color: "rgba(170, 173, 177, 1)",
+					backgroundColor: "rgba(234, 236, 238, 1)",
 					padding: [4, 8],
 					borderRadius: 20
 				},
 				data: nodes.map(node => ({
 					...node,
 					label: {
-						color: node.category === 0 ? '#055FC2' : '#5F656C',
+						color: node.category === 0 ? "#055FC2" : "#5F656C",
 						...node.label
 					}
 				})),
@@ -690,24 +756,26 @@ const getEquityOption = () => {
 					return {
 						...link,
 						lineStyle: {
-							color: link.isSanctioned ? 'rgba(100, 180, 255, 1)' : 'rgb(180, 181, 182)',
+							color: link.isSanctioned ? "rgba(100, 180, 255, 1)" : "rgb(180, 181, 182)",
 							width: 1,
 							curveness: 0
 						},
-						label: link.isSanctioned ? {
+						label: link.isSanctioned
+							? {
 									show: true,
-							formatter: '{c}',
-							backgroundColor: 'rgba(231, 243, 255, 1)',
-							color: 'rgba(50, 150, 250, 1)',
+									formatter: "{c}",
+									backgroundColor: "rgba(231, 243, 255, 1)",
+									color: "rgba(50, 150, 250, 1)",
 									borderRadius: 20,
 									padding: [4, 8],
 									fontSize: 12,
 									fontWeight: 400,
-							fontFamily: 'Microsoft YaHei',
+									fontFamily: "Microsoft YaHei",
 									lineHeight: 16
-						} : undefined
+							  }
+							: undefined
 					};
-				}),
+				})
 			}
 		]
 	};
@@ -725,11 +793,11 @@ watch(searchDomain, () => {
 	getSingleSanctionEntityListRequest();
 });
 
-watch(activeIndex, (val) => {
+watch(activeIndex, val => {
 	if (val === 0) {
 		nextTick(() => {
 			if (activeEntityId.value) {
-				if (rightActiveTab.value === 'supplyChain') {
+				if (rightActiveTab.value === "supplyChain") {
 					getSingleSanctionEntitySupplyChainRequest();
 				} else {
 					getSingleSanctionEntityEquityRequest();
@@ -740,9 +808,9 @@ watch(activeIndex, (val) => {
 	}
 });
 
-watch(activeEntityId, (val) => {
+watch(activeEntityId, val => {
 	if (val) {
-		if (rightActiveTab.value === 'supplyChain') {
+		if (rightActiveTab.value === "supplyChain") {
 			getSingleSanctionEntitySupplyChainRequest();
 		} else {
 			getSingleSanctionEntityEquityRequest();
@@ -752,14 +820,16 @@ watch(activeEntityId, (val) => {
 });
 
 watch(is50PercentRule, () => {
-	if (rightActiveTab.value === 'equity' && activeEntityId.value) {
+	if (rightActiveTab.value === "equity" && activeEntityId.value) {
 		getSingleSanctionEntityEquityRequest();
 	}
 });
 
-watch(rightActiveTab, (val) => {
+watch(
+	rightActiveTab,
+	val => {
 		if (activeEntityId.value) {
-		if (val === 'supplyChain') {
+			if (val === "supplyChain") {
 				getSingleSanctionEntitySupplyChainRequest();
 			} else {
 				getSingleSanctionEntityEquityRequest();
@@ -768,8 +838,9 @@ watch(rightActiveTab, (val) => {
 		nextTick(() => {
 			initChart();
 		});
-}, { immediate: true });
-
+	},
+	{ immediate: true }
+);
 
 onMounted(() => {
 	// 获取URL参数
@@ -777,7 +848,7 @@ onMounted(() => {
 	// 单次制裁-深度挖掘-本次制裁实体清单列表-请求
 	getSingleSanctionEntityListRequest();
 
-	window.addEventListener('resize', handleResize);
+	window.addEventListener("resize", handleResize);
 });
 
 onUnmounted(() => {
@@ -787,7 +858,7 @@ onUnmounted(() => {
 	if (debouncedGetList && debouncedGetList.cancel) {
 		debouncedGetList.cancel();
 	}
-	window.removeEventListener('resize', handleResize);
+	window.removeEventListener("resize", handleResize);
 });
 
 const handleResize = () => {
@@ -802,7 +873,12 @@ const handleResize = () => {
 	margin: 0;
 	padding: 0;
 }
+.deepMiningChartmode {
+	height: calc(100vh - 220px) !important;
+	// overflow: hidden;
+}
 .deep-mining {
+	overflow: hidden;
 	width: 1601px;
 	margin: 0 auto;
 	position: relative;
@@ -898,13 +974,13 @@ const handleResize = () => {
 							border-bottom: 1px solid rgb(234, 236, 238);
 
 							&:hover {
-								background-color: #F2F3F5;
+								background-color: #f2f3f5;
 							}
 
 							.arrow-icon {
 								margin-right: 8px;
 								font-size: 14px;
-								color: #86909C;
+								color: #86909c;
 								transition: transform 0.3s;
 
 								&.expanded {
@@ -916,18 +992,17 @@ const handleResize = () => {
 								flex: 1;
 								font-size: 14px;
 								font-weight: 700;
-								color: #1D2129;
+								color: #1d2129;
 								font-family: "Microsoft YaHei";
 							}
 
 							.group-count {
 								font-size: 14px;
-								color: #4E5969;
+								color: #4e5969;
 							}
 						}
 
 						.group-children {
-
 							.entity-item {
 								display: flex;
 								align-items: center;
@@ -939,7 +1014,7 @@ const handleResize = () => {
 								box-sizing: border-box;
 
 								&:hover {
-									background-color: #F7F8FA;
+									background-color: #f7f8fa;
 								}
 
 								&.active {
@@ -973,7 +1048,6 @@ const handleResize = () => {
 									font-family: "Microsoft YaHei";
 									line-height: 24px;
 									word-break: break-all;
-
 								}
 							}
 						}
@@ -1019,15 +1093,23 @@ const handleResize = () => {
 					box-shadow: 0 0px 8px rgba(0, 0, 0, 0.1);
 
 					.control-btn {
-						width: 14px;
-						height: 14px;
+						width: 24px;
+						height: 24px;
+						box-sizing: border-box;
+						padding: 5px;
 						cursor: pointer;
+						&:hover {
+							background: var(--color-bg-hover);
+						}
 
 						img {
 							width: 14px;
 							height: 14px;
 						}
 					}
+					.controlBtnActive {
+						background: var(--color-bg-hover);
+					}
 				}
 
 				.chart-legend {
@@ -1045,10 +1127,10 @@ const handleResize = () => {
 						font-weight: 400;
 						font-family: "Microsoft YaHei";
 						line-height: 24px;
-						color: #5F656C;
+						color: #5f656c;
 
 						&:first-child {
-							color: #055FC2;
+							color: #055fc2;
 						}
 
 						.dot {
@@ -1058,7 +1140,7 @@ const handleResize = () => {
 							margin-right: 8px;
 
 							&.blue {
-								background: #055FC2;
+								background: #055fc2;
 							}
 
 							&.grey {
@@ -1104,7 +1186,7 @@ const handleResize = () => {
 						.close-icon {
 							cursor: pointer;
 							font-size: 16px;
-							color: #86909C;
+							color: #86909c;
 							position: absolute;
 							right: 0;
 							top: 0;
@@ -1180,21 +1262,21 @@ const handleResize = () => {
 
 			:deep(.el-checkbox__label) {
 				font-size: 16px;
-				color: #5F656C;
+				color: #5f656c;
 				font-family: "Microsoft YaHei";
 			}
 
 			:deep(.el-checkbox__inner) {
-				border-color: #C9CDD4;
+				border-color: #c9cdd4;
 			}
 
 			:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
-				background-color: #055FC2;
-				border-color: #055FC2;
+				background-color: #055fc2;
+				border-color: #055fc2;
 			}
 
 			:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
-				color: #5F656C;
+				color: #5f656c;
 			}
 		}
 
@@ -1257,12 +1339,11 @@ const handleResize = () => {
 	}
 }
 
-
 .custom-scrollbar::-webkit-scrollbar {
 	width: 6px;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
-	background: #DCDFE6;
+	background: #dcdfe6;
 	border-radius: 3px;
 }
 .custom-scrollbar::-webkit-scrollbar-track {
@@ -1270,14 +1351,15 @@ const handleResize = () => {
 }
 
 .title-com.custom-right-header {
-	.box, .text {
+	.box,
+	.text {
 		display: none;
 	}
 
 	.toggle-group {
 		display: flex;
 		background: #fff;
-		border: 1px solid #055FC2;
+		border: 1px solid #055fc2;
 		border-radius: 20px;
 		height: 32px;
 		overflow: hidden;

src/views/exportControl/v2.0SingleSanction/components/deepMining/utils/treeChart.js

+
+
+const getTreeChart = (treeData) => {
+  const option = {
+    series: [{
+      type: 'tree',
+      layout: 'orthogonal', // 从上到下布局
+      orient: 'TB', // Top to Bottom
+      data: treeData,
+      top: '10%',
+      bottom: '5%',
+      left: '10%',
+      right: '10%',
+      symbol: 'circle',
+      symbolSize: 40,
+      label: {
+        position: 'bottom',
+        verticalAlign: 'middle',
+        align: 'center'
+      },
+      leaves: {
+        label: {
+          position: 'top',
+          verticalAlign: 'middle',
+          align: 'center'
+        }
+      },
+      lineStyle: {
+        color: '#ccc',
+        width: 2,
+        type: 'dashed' // 虚线
+      },
+      emphasis: {
+        focus: 'descendant'
+      },
+      expandAndCollapse: true,
+      initialTreeDepth: 3
+    }]
+  };
+
+  return option
+}
+
+export default getTreeChart
\ No newline at end of file

src/views/exportControl/v2.0SingleSanction/components/sanctionsOverview/index.vue

@@ -93,7 +93,7 @@
           </div>
         </div>
       </div>
-      <div class="right">
+      <div class="right" v-loading="isLoading">
         <div class="title-com">
           <div class="box"></div>
           <div class="text">制裁清单</div>
@@ -239,8 +239,11 @@ const addRuleCount = ref(0)
 const removeCount = ref(0)
 const removeRuleCount = ref(0)
 
+const isLoading = ref(false)
+
 // 调用单次制裁-制裁概况-制裁清单接口
 const getSanctionOverviewList = async () => {
+  isLoading.value = true
   try {
     const res = await getSingleSanctionOverviewList({
       sanRecordId: sanRecordId.value,
@@ -249,6 +252,7 @@ const getSanctionOverviewList = async () => {
       searchText: searchKeyword.value || undefined,
       searchType: searchType.value
     })
+    isLoading.value = false
     if (res.code === 200) {
       const data = res.data || {}
       addCount.value = data.addCount || 0