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 @@
<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 class="title">{{ headerTitle.title }}</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 class="main-header">
<div class="header-left">实体清单制裁文件</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 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 class="report-box" ref="reportBoxRef">
<div class="pdf-pane-wrap" :class="{ 'center-mode': !showChinese }">
<pdf ref="leftPdfRef" :pdfUrl="headerTitle.srcUrl" class="pdf-pane-inner" />
</div>
<div class="pdf-pane-wrap" v-if="showChinese">
<pdf ref="rightPdfRef" :pdfUrl="headerTitle.transUrl" class="pdf-pane-inner" />
</div>
</div>
</div>
</div>
</template>
<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 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 () => {
if (!sanRecordId.value) return;
try {
const res = await getSingleSanctionOverview({
sanRecordId: sanRecordId.value
});
if (res.code === 200) {
singleSanctionOverview.value = res.data || {};
if (res.code === 200 && res.data) {
const singleSanctionOverview = res.data || {};
// 格式化日期
let dateStr = "";
if (singleSanctionOverview.value.postDate) {
const date = new Date(singleSanctionOverview.value.postDate);
if (singleSanctionOverview.postDate) {
const date = new Date(singleSanctionOverview.postDate);
if (!isNaN(date.getTime())) {
dateStr = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
} else {
dateStr = singleSanctionOverview.value.postDate;
dateStr = singleSanctionOverview.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 || ""
title: `${dateStr}《${singleSanctionOverview.sanTitleZh || singleSanctionOverview.sanTitle}》`,
department: singleSanctionOverview.fileCode || "",
srcUrl: singleSanctionOverview.srcUrl || "",
transUrl: singleSanctionOverview.transUrl || ""
};
}
} catch (error) {
......@@ -79,34 +143,64 @@ const getSingleSanctionOverviewData = async () => {
}
};
const headerTitle = ref({
img: title
});
// 获取URL参数
const sanRecordId = ref("");
const getUrlParams = () => {
const urlParams = new URLSearchParams(window.location.search);
sanRecordId.value = urlParams.get("id") || "";
// 同步滚动处理
const handleSyncScroll = () => {
if (isSyncing.value) return;
isSyncing.value = true;
requestAnimationFrame(() => {
isSyncing.value = false;
});
};
// 监听滚动事件
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(() => {
getUrlParams();
getSingleSanctionOverviewData();
setTimeout(() => {
setupScrollSync();
}, 500);
});
</script>
<style scoped lang="scss">
* {
margin: 0;
padding: 0;
}
// * {
// margin: 0;
// padding: 0;
// }
.entity-list {
width: 100%;
height: 100%;
overflow-y: auto;
.header {
width: 100%;
height: 148px;
background-color: #fff;
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 {
width: 1601px;
height: 72px;
......@@ -118,27 +212,22 @@ onMounted(() => {
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;
......@@ -146,126 +235,109 @@ onMounted(() => {
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;
}
.main {
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;
align-items: center;
justify-content: space-between;
.nav-item {
.header-right {
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);
gap: 24px;
&:last-child {
margin-right: 0;
}
.toggle-group {
display: flex;
align-items: center;
gap: 10px;
img {
width: 16px;
height: 16px;
margin-right: 4px;
}
span {
font-size: 14px;
color: rgb(150, 150, 150);
transition: color 0.3s;
&.active {
color: rgb(5, 95, 194);
font-weight: 700;
}
&.active {
color: rgb(5, 95, 194);
font-weight: 600;
}
}
.active-line {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background-color: #055fc2;
border-radius: 1.5px;
}
}
:deep(.el-switch) {
--el-switch-on-color: #055fc2;
--el-switch-off-color: #e6e7e8;
.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;
.el-switch__label {
color: #fff;
font-size: 12px;
font-weight: 600;
img {
width: 16px;
height: 16px;
margin-right: 8px;
&.is-active {
color: #fff;
}
}
}
}
span {
font-size: 16px;
font-weight: 400;
color: rgb(95, 101, 108);
font-family: "Microsoft YaHei";
line-height: 24px;
: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;
}
}
}
}
.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;
.report-box {
margin-left: 70px;
width: 1456px;
height: calc(100% - 64px);
display: flex;
overflow-y: auto;
overflow-x: hidden;
}
.no-pdf {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: #909399;
font-size: 16px;
background-color: #fff;
.pdf-pane-wrap {
flex: 0 0 50%;
max-width: 50%;
height: 100%;
min-width: 0;
transition: all 0.3s;
&.center-mode {
flex: 0 0 100%;
max-width: 100%;
margin: 0 auto;
}
}
.pdf-pane-inner {
width: 100%;
height: 100%;
}
}
}
</style>
src/views/exportControl/v2.0SingleSanction/originPage/index.vue
浏览文件 @ 996c47ff
......@@ -4,22 +4,29 @@
<div class="header-title">
<img :src="headerTitle.img" alt="" />
<div>
<div class="title">
{{ headerTitle.title }}
</div>
<div class="department">
{{ headerTitle.department }}
</div>
<div class="title">{{ headerTitle.title }}</div>
<div class="department">{{ headerTitle.department }}</div>
</div>
</div>
</div>
<div class="main">
<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 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" />
</div>
<div class="pdf-pane-wrap">
......@@ -31,9 +38,11 @@
</template>
<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 title from "../assets/title.png";
import transIcon from "../assets/icon-translation.png";
import pdf from "./pdf.vue";
const leftPdfRef = ref(null);
......@@ -51,6 +60,46 @@ const headerTitle = ref({
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") || "";
......@@ -112,7 +161,6 @@ const setupScrollSync = () => {
watch(
() => [headerTitle.value.srcUrl, headerTitle.value.transUrl],
() => {
// PDF URL 变化时，等待渲染完成后设置滚动监听
setTimeout(() => {
setupScrollSync();
}, 1000);
......@@ -124,18 +172,17 @@ onMounted(() => {
getUrlParams();
getSingleSanctionOverviewData();
// 等待 DOM 渲染完成后设置滚动监听
setTimeout(() => {
setupScrollSync();
}, 500);
});
</script>
<style scoped lang="scss">
* {
margin: 0;
padding: 0;
}
// * {
// margin: 0;
// padding: 0;
// }
.entity-list {
width: 100%;
height: 100%;
......@@ -207,9 +254,57 @@ onMounted(() => {
font-weight: 700;
line-height: 26px;
width: 1456px;
text-align: left;
display: flex;
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 {
......@@ -217,8 +312,10 @@ onMounted(() => {
width: 1456px;
height: calc(100% - 64px);
display: flex;
overflow-y: auto; /* 统一滚动条，控制两侧一起滚动 */
overflow-y: auto;
overflow-x: hidden;
// ✅ 添加居中对齐
justify-content: center;
}
.pdf-pane-wrap {
......@@ -226,6 +323,15 @@ onMounted(() => {
max-width: 50%;
height: 100%;
min-width: 0;
transition: all 0.3s;
&.center-mode {
flex: 0 0 100%;
max-width: 100%;
// ✅ 添加居中样式
width: 728px; // 约一半宽度，保持单栏时美观
margin: 0 auto;
}
}
.pdf-pane-inner {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论