实体制裁文件同步滚动

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

@@ -239,8 +239,8 @@ const initNormalGraph = (layoutType, width, height) => {
 	// 中心节点坐标
 	const centerX = width / 2;
 	const centerY = height / 2;
-	const upperY = centerY - 200; // 上方节点 Y 坐标
-	const lowerY = centerY + 200; // 下方节点 Y 坐标
+	const upperY = centerY - 240; // 上方节点 Y 坐标
+	const lowerY = centerY + 240; // 下方节点 Y 坐标
 	const nodeSpacing = 100; // 节点水平间距
 
 	// 分离中心节点和其他节点

src/views/exportControl/v2.0SingleSanction/originPage/index-back.vue

+<template>
+	<div class="entity-list">
+		<div class="header">
+			<div class="header-title">
+				<img :src="headerTitle.img" alt="" />
+				<div>
+					<div class="title">
+						{{ headerTitle.title }}
+						<!-- <span>{{ headerTitle.titleEn }}</span> -->
+					</div>
+					<div class="department">
+						{{ headerTitle.department }}
+					</div>
+				</div>
+				<!-- <div class="btn">
+                <img :src="icon01" alt="">切换
+            </div> -->
+			</div>
+		</div>
+		<div class="main">
+			<div class="pdf-container">
+				<iframe v-if="headerTitle.srcUrl" :src="headerTitle.srcUrl" width="100%" height="100%" frameborder="0"></iframe>
+				<div v-else class="no-pdf">暂无原文</div>
+			</div>
+			<div class="pdf-container">
+				<iframe
+					v-if="headerTitle.transUrl"
+					:src="headerTitle.transUrl"
+					width="100%"
+					height="100%"
+					frameborder="0"
+				></iframe>
+				<div v-else class="no-pdf">暂无译文</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { getSingleSanctionOverview } from "@/api/exportControlV2.0.js";
+import title from "../assets/title.png";
+import icon01 from "../assets/icon01.png";
+
+// 单次制裁-制裁概况-基本信息
+const singleSanctionOverview = ref({});
+const getSingleSanctionOverviewData = async () => {
+	if (!sanRecordId.value) return;
+	try {
+		const res = await getSingleSanctionOverview({
+			sanRecordId: sanRecordId.value
+		});
+		if (res.code === 200) {
+			singleSanctionOverview.value = res.data || {};
+
+			// 格式化日期
+			let dateStr = "";
+			if (singleSanctionOverview.value.postDate) {
+				const date = new Date(singleSanctionOverview.value.postDate);
+				if (!isNaN(date.getTime())) {
+					dateStr = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
+				} else {
+					dateStr = singleSanctionOverview.value.postDate;
+				}
+			}
+
+			// 更新头部信息
+			headerTitle.value = {
+				...headerTitle.value,
+				title: `${dateStr}《${singleSanctionOverview.value.sanTitleZh || singleSanctionOverview.value.sanTitle}》`,
+				titleEn: singleSanctionOverview.value.sanTitle || "",
+				department: singleSanctionOverview.value.fileCode || "",
+				srcUrl: singleSanctionOverview.value.srcUrl || "",
+				transUrl: singleSanctionOverview.value.transUrl || ""
+			};
+		}
+	} catch (error) {
+		console.error("获取制裁概况失败:", error);
+	}
+};
+
+const headerTitle = ref({
+	img: title
+});
+// 获取URL参数
+const sanRecordId = ref("");
+const getUrlParams = () => {
+	const urlParams = new URLSearchParams(window.location.search);
+	sanRecordId.value = urlParams.get("id") || "";
+};
+onMounted(() => {
+	getUrlParams();
+	getSingleSanctionOverviewData();
+});
+</script>
+
+<style scoped lang="scss">
+* {
+	margin: 0;
+	padding: 0;
+}
+.entity-list {
+	width: 100%;
+	height: 100%;
+	.header {
+		width: 100%;
+		height: 148px;
+		background-color: #fff;
+		padding-top: 16px;
+		.header-title {
+			width: 1601px;
+			height: 72px;
+			background-color: rgba(246, 250, 255, 1);
+			margin: 0 auto;
+			border-radius: 10px;
+			border: 2px solid rgba(174, 214, 255, 1);
+			display: flex;
+			align-items: center;
+			margin-bottom: 12px;
+			position: relative;
+			img {
+				width: 54px;
+				height: 54px;
+				margin-left: 15px;
+				margin-right: 11px;
+			}
+			.title {
+				font-size: 20px;
+				font-weight: 700;
+				font-family: "Microsoft YaHei";
+				line-height: 26px;
+				color: rgb(59, 65, 75);
+				span {
+					font-size: 16px;
+					font-weight: 400;
+					font-family: "Microsoft YaHei";
+					line-height: 24px;
+					color: rgb(95, 101, 108);
+					margin-left: 11px;
+				}
+			}
+			.department {
+				font-size: 16px;
+				font-weight: 400;
+				font-family: "Microsoft YaHei";
+				line-height: 24px;
+				color: rgb(95, 101, 108);
+			}
+			.btn {
+				cursor: pointer;
+				display: flex;
+				align-items: center;
+				position: absolute;
+				right: 16px;
+				top: 25px;
+				font-size: 18px;
+				font-weight: 700;
+				font-family: "Microsoft YaHei";
+				line-height: 24px;
+				color: rgb(5, 95, 194);
+				img {
+					width: 20px;
+					height: 20px;
+					margin-right: 7px;
+				}
+			}
+		}
+		.header-nav {
+			width: 1601px;
+			margin: 0 auto;
+			height: 48px;
+			display: flex;
+			align-items: center;
+
+			.nav-item {
+				display: flex;
+				align-items: center;
+				height: 100%;
+				margin-right: 32px;
+				cursor: pointer;
+				position: relative;
+				font-size: 18px;
+				font-weight: 400;
+				font-family: "Microsoft YaHei";
+				color: rgb(59, 65, 75);
+
+				&:last-child {
+					margin-right: 0;
+				}
+
+				img {
+					width: 16px;
+					height: 16px;
+					margin-right: 4px;
+				}
+
+				&.active {
+					color: rgb(5, 95, 194);
+					font-weight: 700;
+				}
+
+				.active-line {
+					position: absolute;
+					bottom: 0;
+					left: 0;
+					width: 100%;
+					height: 3px;
+					background-color: #055fc2;
+					border-radius: 1.5px;
+				}
+			}
+
+			.original-text-btn {
+				margin-left: auto;
+				width: 152px;
+				height: 36px;
+				background: #ffffff;
+				border-radius: 4px;
+				border: 1px solid rgba(230, 231, 232, 1);
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				cursor: pointer;
+
+				img {
+					width: 16px;
+					height: 16px;
+					margin-right: 8px;
+				}
+
+				span {
+					font-size: 16px;
+					font-weight: 400;
+					color: rgb(95, 101, 108);
+					font-family: "Microsoft YaHei";
+					line-height: 24px;
+				}
+			}
+		}
+	}
+	.main {
+		width: 1601px;
+		height: calc(100% - 148px);
+		background-color: #f7f8f9;
+		margin: 0 auto;
+		display: flex;
+		justify-content: space-between;
+		padding-top: 20px;
+		box-sizing: border-box;
+
+		.pdf-container {
+			width: 790px;
+			height: calc(100% - 20px);
+			background-color: #fff;
+			// border: 1px solid rgba(174, 214, 255, 1);
+			border-radius: 4px;
+			overflow: hidden;
+
+			.no-pdf {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				height: 100%;
+				color: #909399;
+				font-size: 16px;
+				background-color: #fff;
+			}
+		}
+	}
+}
+</style>