提交 3c94c444 authored 作者: 朱政's avatar 朱政

feat:修改合作限制动态的样式,将合作限制后端更改的数据展示出来

上级 a5b56c23
流水线 #225 已通过 于阶段
in 1 分 34 秒
......@@ -69,7 +69,8 @@ router.beforeEach((to, from, next) => {
if (to.meta.title) {
if (to.meta.dynamicTitle) {
console.log('to', to);
document.title = window.sessionStorage.getItem("curTabName") || to.meta.title;
const storageKey = to.meta.titleStorageKey || "curTabName";
document.title = window.sessionStorage.getItem(storageKey) || to.meta.title;
} else {
document.title = to.meta.title
......
......@@ -20,7 +20,8 @@ const cooperationRestrictionsRoutes = [
component: CooperationRestrictionsDetail,
meta: {
title: "合作限制详情",
dynamicTitle: true
dynamicTitle: true,
titleStorageKey: "cooperationRestrictionsTabName"
}
},
......
......@@ -6,7 +6,7 @@
<div class="left-top">
<img src="./assets/icon01.png" alt="" />
<div class="left-top-title">合作限制动态</div>
<div class="more" @click="handleClickToDetail">查看详情 ></div>
<div class="more" @click="handleClickToDetail">{{ "查看详情 >" }}</div>
</div>
<el-carousel ref="carouselRef" height="412px" direction="horizontal" :autoplay="true" :interval="5000"
......@@ -46,7 +46,7 @@
</div>
</div>
<div class="left-center-type" v-if="item.type">{{ item.type }}</div>
<div class="left-center-type" v-if="item.limitMeans">{{ item.limitMeans }}</div>
<!-- <div class="left-center-title">{{ item.LIMITTYPE }}</div> -->
</div>
<div class="left-bottom">
......@@ -188,12 +188,12 @@ const riskSignals = ref([]);
// 点击查看详情
const handleClickToDetail = item => {
const activeItem = item && item.ID ? item : mainTrend.value;
const id = activeItem?.ID;
const id = activeItem?.ID || activeItem?.id || activeItem?.limitId;
if (!id) return;
window.sessionStorage.setItem("curTabName", activeItem?.LIMITNAME);
window.sessionStorage.setItem("cooperationRestrictionsTabName", activeItem?.LIMITNAME || "");
const curRoute = router.resolve({
path: "/cooperationRestrictions/detail",
name: "CooperationRestrictionsDetail",
query: { id: id }
});
window.open(curRoute.href, "_blank");
......@@ -201,9 +201,11 @@ const handleClickToDetail = item => {
// 点击风险信号详情
const handleToRiskDetail = (item) => {
const id = item?.cooperationId || item?.ID || item?.id || item?.limitId;
if (!id) return;
const curRoute = router.resolve({
path: "/cooperationRestrictions/detail",
query: { id: item.cooperationId },
name: "CooperationRestrictionsDetail",
query: { id },
});
window.open(curRoute.href, "_blank");
};
......@@ -318,7 +320,7 @@ onMounted(() => {
width: 967px;
height: 208px;
margin-top: 33px;
margin-left: 62px;
margin-left: 57px;
border-bottom: 1px solid rgb(234, 236, 238);
position: relative;
......@@ -326,6 +328,7 @@ onMounted(() => {
width: 148px;
height: 148px;
margin-right: 21px;
margin-left: 5px;
}
display: flex;
......
......@@ -121,8 +121,8 @@ const getMainDataList = async () => {
date: item.limitDate,
domain: item.limitArea || [],
type: item.limitMeans,
// 使用默认图片
img: defaultImg
// 优先使用接口返回的机构 logo(limitOrgLogo),空则回退默认图
img: item.limitOrgLogo || defaultImg
}));
total.value = res.data.totalElements || 0;
} else {
......@@ -139,10 +139,16 @@ const getMainDataList = async () => {
const router = useRouter();
const handleClick = item => {
const id = item?.id || item?.limitId || item?.ID;
if (!id) return;
window.sessionStorage.setItem(
"cooperationRestrictionsTabName",
item?.limitName || item?.title || item?.name || ""
);
const routeData = router.resolve({
path: "/cooperationRestrictions/detail",
name: "CooperationRestrictionsDetail",
query: {
id: item.id
id
}
});
window.open(routeData.href, "_blank");
......
......@@ -45,9 +45,9 @@
<AnalysisBox title="相关实体" :showAllBtn="true">
<div class="left-bottom-main">
<div v-for="item in coopRelatedData" :key="item.id" class="main-box" @click="handleClickOnEntity(item)">
<img :src="item.img || defaultCom" alt="" />
<img :src="item.img || defaultCom" alt="" class="img-left-item" />
<div class="name">{{ item.ENTITYNAME }}</div>
<div class="type">{{ item.type }}</div>
<div class="type">{{ item.position }}</div>
</div>
</div>
</AnalysisBox>
......@@ -80,8 +80,15 @@
<span>{{ chineseNumbers[index] }}{{ item.TITLE }} </span>
<img src="./assets/打开按钮.png" alt="">
</div>
<div class="clause-item-content">
{{ item.CONTENT }}
<!-- contentList:单条按原样式展示;多条则逐条展示并加 1.2.3. 前缀 -->
<div v-if="Array.isArray(item.contentList) && item.contentList.length > 1" class="clause-item-content-list">
<div v-for="(row, i) in item.contentList" :key="i" class="clause-item-content-row">
<span class="row-index">{{ i + 1 }}.</span>
<span class="row-text">{{ row.CONTENT }}</span>
</div>
</div>
<div v-else class="clause-item-content-row">
<span class="row-text">{{ item.contentList?.[0]?.CONTENT || "" }}</span>
</div>
</div>
</div>
......@@ -163,13 +170,17 @@ const getcoopRelatedData = async () => {
limitId: route.query.id
});
if (res && res.code === 200) {
coopRelatedData.value = res.data || {};
// 展示图片:优先后端返回的 imageUrl,其次用已有 img 字段,再兜底默认图
coopRelatedData.value = (Array.isArray(res.data) ? res.data : []).map((row) => ({
...row,
img: row?.imageUrl || row?.img || row?.IMAGEURL || row?.image || ""
}));
} else {
coopRelatedData.value = {};
coopRelatedData.value = [];
}
} catch (error) {
console.error("获取合作限制相关实体数据失败:", error);
coopRelatedData.value = {};
coopRelatedData.value = [];
}
};
// 点击跳转关联实体详情
......@@ -271,11 +282,21 @@ const filteredBackgroundList = computed(() => {
const active2 = ref("涉华条款");
const chineseNumbers = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十"];
const filteredClauseList = computed(() => {
const list = Array.isArray(limitClauseData.value) ? limitClauseData.value : [];
if (active2.value === "全部条款") {
return limitClauseData.value;
} else {
return limitClauseData.value.filter(item => item.ISCN === "Y");
}
// 展示全部条款及全部段落
return list.map((item) => ({
...item,
contentList: Array.isArray(item?.contentList) ? item.contentList : []
}));
}
// 涉华条款:仅展示 contentList 中 ISCN=Y 的段落;若过滤后为空则不展示该条款
return list
.map((item) => {
const contentList = (Array.isArray(item?.contentList) ? item.contentList : []).filter((row) => row?.ISCN === "Y");
return { ...item, contentList };
})
.filter((item) => Array.isArray(item?.contentList) && item.contentList.length > 0);
});
const dataList = ref([
......@@ -671,6 +692,12 @@ const dataList3 = ref([
img {
width: 24px;
height: 24px;
border-radius: 50%;
display: inline-block;
object-fit: cover;
object-position: center;
}
.name {
......@@ -934,7 +961,12 @@ const dataList3 = ref([
}
}
.clause-item-content {
.clause-item-content-list {
width: 1022px;
}
/* 每条段落的展示:padding / 描边 / 间距保持与旧版单条 CONTENT 一致 */
.clause-item-content-row {
width: 1022px;
padding: 12px 24px 12px 54px;
font-size: 16px;
......@@ -944,6 +976,17 @@ const dataList3 = ref([
color: rgb(59, 65, 75);
border-bottom: 1px solid rgb(234, 236, 238);
white-space: pre-line;
display: flex;
gap: 8px;
.row-index {
flex: 0 0 auto;
}
.row-text {
flex: 1;
min-width: 0;
}
}
}
}
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论