Skip to content

R
risk-monitor
提交 996c47ff authored 作者: yanpeng's avatar yanpeng
浏览文件
操作

补充部分缺漏

上级 06aa3267
隐藏空白字符变更
内嵌 并排
正在显示 包含 352 行增加 和 174 行删除
src/views/exportControl/v2.0SingleSanction/originPage/index-back.vue
浏览文件 @ 996c47ff
...@@ -4,74 +4,138 @@ ...@@ -4,74 +4,138 @@
<div class="header-title"> <div class="header-title">
<img :src="headerTitle.img" alt="" /> <img :src="headerTitle.img" alt="" />
<div> <div>
<div class="title"> <div class="title">{{ headerTitle.title }}</div>
{{ headerTitle.title }} <div class="department">{{ headerTitle.department }}</div>
<!-- <span>{{ headerTitle.titleEn }}</span> -->
</div>
<div class="department">
{{ headerTitle.department }}
</div>
</div> </div>
<!-- <div class="btn">
<img :src="icon01" alt="">切换
</div> -->
</div> </div>
</div> </div>
<div class="main"> <div class="main">
<div class="pdf-container"> <div class="main-header">
<iframe v-if="headerTitle.srcUrl" :src="headerTitle.srcUrl" width="100%" height="100%" frameborder="0"></iframe> <div class="header-left">实体清单制裁文件</div>
<div v-else class="no-pdf">暂无原文</div> <div class="header-right">
<!-- 中英文切换开关 -->
<div class="toggle-group">
<span :class="{ active: !showChinese }">英文</span>
<el-switch
v-model="showChinese"
active-text="中"
inactive-text="英"
:inline-prompt="true"
@change="handleToggleChange"
/>
<span :class="{ active: showChinese }">中文</span>
</div>
<!-- 下载按钮 -->
<el-button type="primary" :icon="Download" @click="handleDownload"> 下载 </el-button>
</div>
</div> </div>
<div class="pdf-container"> <!-- 外层滚动容器，统一控制两侧滚动 -->
<iframe <div class="report-box" ref="reportBoxRef">
v-if="headerTitle.transUrl" <div class="pdf-pane-wrap" :class="{ 'center-mode': !showChinese }">
:src="headerTitle.transUrl" <pdf ref="leftPdfRef" :pdfUrl="headerTitle.srcUrl" class="pdf-pane-inner" />
width="100%" </div>
height="100%" <div class="pdf-pane-wrap" v-if="showChinese">
frameborder="0" <pdf ref="rightPdfRef" :pdfUrl="headerTitle.transUrl" class="pdf-pane-inner" />
></iframe> </div>
<div v-else class="no-pdf">暂无译文</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, onMounted } from "vue"; import { ref, onMounted, watch, computed } from "vue";
import { Download } from "@element-plus/icons-vue";
import { getSingleSanctionOverview } from "@/api/exportControlV2.0.js"; import { getSingleSanctionOverview } from "@/api/exportControlV2.0.js";
import title from "../assets/title.png"; import title from "../assets/title.png";
import icon01 from "../assets/icon01.png"; import pdf from "./pdf.vue";
const leftPdfRef = ref(null);
const rightPdfRef = ref(null);
const reportBoxRef = ref(null);
const headerTitle = ref({
img: title,
title: "",
department: "",
srcUrl: "",
transUrl: ""
});
const sanRecordId = ref("");
const isSyncing = ref(false);
// ✅ 控制中文 PDF 显示
const showChinese = ref(true);
// ✅ 计算当前显示模式
const showMode = computed(() => {
return showChinese.value ? "both" : "en";
});
// ✅ 切换中英文显示
const handleToggleChange = value => {
console.log("切换中英文显示:", value ? "中英双栏" : "仅英文");
showChinese.value = value;
};
// ✅ 下载功能
const handleDownload = async () => {
const files = [
{ url: headerTitle.value.srcUrl, name: "英文原版.pdf" },
{ url: headerTitle.value.transUrl, name: "中文翻译.pdf" }
];
for (const file of files) {
if (file.url) {
try {
const response = await fetch(file.url);
const blob = await response.blob();
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = file.name;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(link.href);
} catch (error) {
console.error(`下载${file.name}失败:`, error);
}
}
}
};
const getUrlParams = () => {
const urlParams = new URLSearchParams(window.location.search);
sanRecordId.value = urlParams.get("id") || "";
};
// 单次制裁-制裁概况-基本信息
const singleSanctionOverview = ref({});
const getSingleSanctionOverviewData = async () => { const getSingleSanctionOverviewData = async () => {
if (!sanRecordId.value) return; if (!sanRecordId.value) return;
try { try {
const res = await getSingleSanctionOverview({ const res = await getSingleSanctionOverview({
sanRecordId: sanRecordId.value sanRecordId: sanRecordId.value
}); });
if (res.code === 200) { if (res.code === 200 && res.data) {
singleSanctionOverview.value = res.data || {}; const singleSanctionOverview = res.data || {};
// 格式化日期 // 格式化日期
let dateStr = ""; let dateStr = "";
if (singleSanctionOverview.value.postDate) { if (singleSanctionOverview.postDate) {
const date = new Date(singleSanctionOverview.value.postDate); const date = new Date(singleSanctionOverview.postDate);
if (!isNaN(date.getTime())) { if (!isNaN(date.getTime())) {
dateStr = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`; dateStr = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
} else { } else {
dateStr = singleSanctionOverview.value.postDate; dateStr = singleSanctionOverview.postDate;
} }
} }
// 更新头部信息 // 更新头部信息
headerTitle.value = { headerTitle.value = {
...headerTitle.value, ...headerTitle.value,
title: `${dateStr}《${singleSanctionOverview.value.sanTitleZh || singleSanctionOverview.value.sanTitle}》`, title: `${dateStr}《${singleSanctionOverview.sanTitleZh || singleSanctionOverview.sanTitle}》`,
titleEn: singleSanctionOverview.value.sanTitle || "", department: singleSanctionOverview.fileCode || "",
department: singleSanctionOverview.value.fileCode || "", srcUrl: singleSanctionOverview.srcUrl || "",
srcUrl: singleSanctionOverview.value.srcUrl || "", transUrl: singleSanctionOverview.transUrl || ""
transUrl: singleSanctionOverview.value.transUrl || ""
}; };
} }
} catch (error) { } catch (error) {
...@@ -79,34 +143,64 @@ const getSingleSanctionOverviewData = async () => { ...@@ -79,34 +143,64 @@ const getSingleSanctionOverviewData = async () => {
} }
}; };
const headerTitle = ref({ // 同步滚动处理
img: title const handleSyncScroll = () => {
}); if (isSyncing.value) return;
// 获取URL参数 isSyncing.value = true;
const sanRecordId = ref("");
const getUrlParams = () => { requestAnimationFrame(() => {
const urlParams = new URLSearchParams(window.location.search); isSyncing.value = false;
sanRecordId.value = urlParams.get("id") || ""; });
};
// 监听滚动事件
const setupScrollSync = () => {
const reportBox = reportBoxRef.value;
if (!reportBox) return;
reportBox.addEventListener("scroll", handleSyncScroll, { passive: true });
}; };
// 监听 PDF 加载完成
watch(
() => [headerTitle.value.srcUrl, headerTitle.value.transUrl],
() => {
setTimeout(() => {
setupScrollSync();
}, 1000);
},
{ deep: true }
);
onMounted(() => { onMounted(() => {
getUrlParams(); getUrlParams();
getSingleSanctionOverviewData(); getSingleSanctionOverviewData();
setTimeout(() => {
setupScrollSync();
}, 500);
}); });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
* { // * {
margin: 0; // margin: 0;
padding: 0; // padding: 0;
} // }
.entity-list { .entity-list {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: auto;
.header { .header {
width: 100%; width: 100%;
height: 148px; height: 148px;
background-color: #fff; background-color: #fff;
padding-top: 16px; padding-top: 16px;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
.header-title { .header-title {
width: 1601px; width: 1601px;
height: 72px; height: 72px;
...@@ -118,27 +212,22 @@ onMounted(() => { ...@@ -118,27 +212,22 @@ onMounted(() => {
align-items: center; align-items: center;
margin-bottom: 12px; margin-bottom: 12px;
position: relative; position: relative;
img { img {
width: 54px; width: 54px;
height: 54px; height: 54px;
margin-left: 15px; margin-left: 15px;
margin-right: 11px; margin-right: 11px;
} }
.title { .title {
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
line-height: 26px; line-height: 26px;
color: rgb(59, 65, 75); 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 { .department {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
...@@ -146,126 +235,109 @@ onMounted(() => { ...@@ -146,126 +235,109 @@ onMounted(() => {
line-height: 24px; line-height: 24px;
color: rgb(95, 101, 108); 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; .main {
height: 48px; margin: 0 auto;
background: rgb(255, 255, 255);
width: 1601px;
height: calc(100vh - 148px);
margin-bottom: 20px;
border: 1px solid rgb(234, 236, 238);
box-shadow: 0 0 20px 0 rgba(25, 69, 130, 0.1);
.main-header {
height: 64px;
border-bottom: 1px solid rgb(234, 236, 238);
background: rgb(255, 255, 255);
margin: 0 70px;
color: rgba(59, 65, 75, 1);
font-family: "Source Han Sans CN";
font-size: 20px;
font-weight: 700;
line-height: 26px;
width: 1456px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
.nav-item { .header-right {
display: flex; display: flex;
align-items: center; align-items: center;
height: 100%; gap: 24px;
margin-right: 32px;
cursor: pointer;
position: relative;
font-size: 18px;
font-weight: 400;
font-family: "Microsoft YaHei";
color: rgb(59, 65, 75);
&:last-child { .toggle-group {
margin-right: 0; display: flex;
} align-items: center;
gap: 10px;
img { span {
width: 16px; font-size: 14px;
height: 16px; color: rgb(150, 150, 150);
margin-right: 4px; transition: color 0.3s;
}
&.active { &.active {
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
font-weight: 700; font-weight: 600;
} }
}
.active-line { :deep(.el-switch) {
position: absolute; --el-switch-on-color: #055fc2;
bottom: 0; --el-switch-off-color: #e6e7e8;
left: 0;
width: 100%;
height: 3px;
background-color: #055fc2;
border-radius: 1.5px;
}
}
.original-text-btn { .el-switch__label {
margin-left: auto; color: #fff;
width: 152px; font-size: 12px;
height: 36px; font-weight: 600;
background: #ffffff;
border-radius: 4px;
border: 1px solid rgba(230, 231, 232, 1);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
img { &.is-active {
width: 16px; color: #fff;
height: 16px; }
margin-right: 8px; }
}
} }
span { :deep(.el-button) {
font-size: 16px; --el-button-bg-color: #055fc2;
font-weight: 400; --el-button-border-color: #055fc2;
color: rgb(95, 101, 108); --el-button-hover-bg-color: #044c9b;
font-family: "Microsoft YaHei"; --el-button-hover-border-color: #044c9b;
line-height: 24px;
font-size: 14px;
padding: 10px 20px;
} }
} }
} }
}
.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 { .report-box {
width: 790px; margin-left: 70px;
height: calc(100% - 20px); width: 1456px;
background-color: #fff; height: calc(100% - 64px);
// border: 1px solid rgba(174, 214, 255, 1); display: flex;
border-radius: 4px; overflow-y: auto;
overflow: hidden; overflow-x: hidden;
}
.no-pdf { .pdf-pane-wrap {
display: flex; flex: 0 0 50%;
align-items: center; max-width: 50%;
justify-content: center; height: 100%;
height: 100%; min-width: 0;
color: #909399; transition: all 0.3s;
font-size: 16px;
background-color: #fff; &.center-mode {
flex: 0 0 100%;
max-width: 100%;
margin: 0 auto;
} }
} }
.pdf-pane-inner {
width: 100%;
height: 100%;
}
} }
} }
</style> </style>
src/views/exportControl/v2.0SingleSanction/originPage/index.vue
浏览文件 @ 996c47ff
...@@ -4,22 +4,29 @@ ...@@ -4,22 +4,29 @@
<div class="header-title"> <div class="header-title">
<img :src="headerTitle.img" alt="" /> <img :src="headerTitle.img" alt="" />
<div> <div>
<div class="title"> <div class="title">{{ headerTitle.title }}</div>
{{ headerTitle.title }} <div class="department">{{ headerTitle.department }}</div>
</div>
<div class="department">
{{ headerTitle.department }}
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="main"> <div class="main">
<div class="main-header"> <div class="main-header">
<div>实体清单制裁文件</div> <div class="header-left">实体清单制裁文件</div>
<div class="header-right">
<!-- 中英文切换开关 -->
<div class="toggle-group">
<!-- <span :class="{ active: !showChinese }">英文</span> -->
<el-switch v-model="showChinese" @change="handleToggleChange" />
<img :src="transIcon" alt="" />
<span :class="{ active: showChinese }">显示原文</span>
</div>
<!-- 下载按钮 -->
<el-button plain :icon="Download" @click="handleDownload"> 下载 </el-button>
</div>
</div> </div>
<!-- 外层滚动容器，统一控制两侧滚动 --> <!-- 外层滚动容器，统一控制两侧滚动 -->
<div class="report-box" ref="reportBoxRef"> <div class="report-box" ref="reportBoxRef">
<div class="pdf-pane-wrap"> <div class="pdf-pane-wrap" v-if="showChinese" :class="{ 'center-mode': !showChinese }">
<pdf ref="leftPdfRef" :pdfUrl="headerTitle.srcUrl" class="pdf-pane-inner" /> <pdf ref="leftPdfRef" :pdfUrl="headerTitle.srcUrl" class="pdf-pane-inner" />
</div> </div>
<div class="pdf-pane-wrap"> <div class="pdf-pane-wrap">
...@@ -31,9 +38,11 @@ ...@@ -31,9 +38,11 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted, watch } from "vue"; import { ref, onMounted, watch, computed } from "vue";
import { Download } from "@element-plus/icons-vue";
import { getSingleSanctionOverview } from "@/api/exportControlV2.0.js"; import { getSingleSanctionOverview } from "@/api/exportControlV2.0.js";
import title from "../assets/title.png"; import title from "../assets/title.png";
import transIcon from "../assets/icon-translation.png";
import pdf from "./pdf.vue"; import pdf from "./pdf.vue";
const leftPdfRef = ref(null); const leftPdfRef = ref(null);
...@@ -51,6 +60,46 @@ const headerTitle = ref({ ...@@ -51,6 +60,46 @@ const headerTitle = ref({
const sanRecordId = ref(""); const sanRecordId = ref("");
const isSyncing = ref(false); const isSyncing = ref(false);
// ✅ 控制中文 PDF 显示
const showChinese = ref(true);
// ✅ 计算当前显示模式
const showMode = computed(() => {
return showChinese.value ? "both" : "en";
});
// ✅ 切换中英文显示
const handleToggleChange = value => {
console.log("切换中英文显示:", value ? "中英双栏" : "仅英文");
showChinese.value = value;
};
// ✅ 下载功能
const handleDownload = async () => {
const files = [
{ url: headerTitle.value.srcUrl, name: "英文原版.pdf" },
{ url: headerTitle.value.transUrl, name: "中文翻译.pdf" }
];
for (const file of files) {
if (file.url) {
try {
const response = await fetch(file.url);
const blob = await response.blob();
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = file.name;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(link.href);
} catch (error) {
console.error(`下载${file.name}失败:`, error);
}
}
}
};
const getUrlParams = () => { const getUrlParams = () => {
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
sanRecordId.value = urlParams.get("id") || ""; sanRecordId.value = urlParams.get("id") || "";
...@@ -112,7 +161,6 @@ const setupScrollSync = () => { ...@@ -112,7 +161,6 @@ const setupScrollSync = () => {
watch( watch(
() => [headerTitle.value.srcUrl, headerTitle.value.transUrl], () => [headerTitle.value.srcUrl, headerTitle.value.transUrl],
() => { () => {
// PDF URL 变化时，等待渲染完成后设置滚动监听
setTimeout(() => { setTimeout(() => {
setupScrollSync(); setupScrollSync();
}, 1000); }, 1000);
...@@ -124,18 +172,17 @@ onMounted(() => { ...@@ -124,18 +172,17 @@ onMounted(() => {
getUrlParams(); getUrlParams();
getSingleSanctionOverviewData(); getSingleSanctionOverviewData();
// 等待 DOM 渲染完成后设置滚动监听
setTimeout(() => { setTimeout(() => {
setupScrollSync(); setupScrollSync();
}, 500); }, 500);
}); });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
* { // * {
margin: 0; // margin: 0;
padding: 0; // padding: 0;
} // }
.entity-list { .entity-list {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -207,9 +254,57 @@ onMounted(() => { ...@@ -207,9 +254,57 @@ onMounted(() => {
font-weight: 700; font-weight: 700;
line-height: 26px; line-height: 26px;
width: 1456px; width: 1456px;
text-align: left;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
.header-right {
display: flex;
align-items: center;
gap: 24px;
.toggle-group {
display: flex;
align-items: center;
gap: 10px;
span {
font-size: 14px;
color: rgb(150, 150, 150);
transition: color 0.3s;
&.active {
color: rgb(5, 95, 194);
font-weight: 600;
}
}
:deep(.el-switch) {
--el-switch-on-color: #055fc2;
--el-switch-off-color: #e6e7e8;
.el-switch__label {
color: #fff;
font-size: 12px;
font-weight: 600;
&.is-active {
color: #fff;
}
}
}
}
// :deep(.el-button) {
// --el-button-bg-color: #055fc2;
// --el-button-border-color: #055fc2;
// --el-button-hover-bg-color: #044c9b;
// --el-button-hover-border-color: #044c9b;
// font-size: 14px;
// padding: 10px 20px;
// }
}
} }
.report-box { .report-box {
...@@ -217,8 +312,10 @@ onMounted(() => { ...@@ -217,8 +312,10 @@ onMounted(() => {
width: 1456px; width: 1456px;
height: calc(100% - 64px); height: calc(100% - 64px);
display: flex; display: flex;
overflow-y: auto; /* 统一滚动条，控制两侧一起滚动 */ overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
// ✅ 添加居中对齐
justify-content: center;
} }
.pdf-pane-wrap { .pdf-pane-wrap {
...@@ -226,6 +323,15 @@ onMounted(() => { ...@@ -226,6 +323,15 @@ onMounted(() => {
max-width: 50%; max-width: 50%;
height: 100%; height: 100%;
min-width: 0; min-width: 0;
transition: all 0.3s;
&.center-mode {
flex: 0 0 100%;
max-width: 100%;
// ✅ 添加居中样式
width: 728px; // 约一半宽度，保持单栏时美观
margin: 0 auto;
}
} }
.pdf-pane-inner { .pdf-pane-inner {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论