Skip to content

R
risk-monitor
提交 3d27f2af authored 作者: coderBryanFu's avatar coderBryanFu
浏览文件
操作

update

上级 5aa089fb
显示空白字符变更
内嵌 并排
正在显示 包含 582 行增加 和 54 行删除
src/views/ZMOverView/components/fourSuppress/components/allGovernment/index.vue
浏览文件 @ 3d27f2af
...@@ -79,11 +79,11 @@ ...@@ -79,11 +79,11 @@
</div> </div>
<div class="text-item-content"> <div class="text-item-content">
<div v-for="(item, index) in dynamicList" :key="index" class="dynamic-item"> <div v-for="(item, index) in dynamicList" :key="index" class="dynamic-item">
<img :src="defaultImg" alt="" class="item-icon" /> <img :src="item.logoUrl ? item.logoUrl : defaultImg" alt="" class="item-icon" />
<div class="item-right"> <div class="item-right">
<div class="dynamic-item-header"> <div class="dynamic-item-header">
<span class="item-title" @click="handleNewsClick(item)">{{ item.title }}</span> <span class="item-title" @click="handleNewsClick(item)">{{ item.title }}</span>
<span class="item-date">{{ item.date }} · {{ item.orgName }}</span> <span class="item-date">{{ item.date }}</span>
</div> </div>
<el-tooltip <el-tooltip
effect="dark" effect="dark"
...@@ -164,12 +164,12 @@ ...@@ -164,12 +164,12 @@
<span>美政府部门对我打压遏制时间线</span> <span>美政府部门对我打压遏制时间线</span>
</div> </div>
<div class="bottom-item-select"> <div class="bottom-item-select">
<div class="select-btn" :class="{ active: measureType === 'history' }" @click="measureType = 'history'"> <!-- <div class="select-btn" :class="{ active: measureType === 'history' }" @click="measureType = 'history'">
历史举措 历史举措
</div> </div>
<div class="select-btn" :class="{ active: measureType === 'future' }" @click="measureType = 'future'"> <div class="select-btn" :class="{ active: measureType === 'future' }" @click="measureType = 'future'">
未来举措 未来举措
</div> </div> -->
<el-select v-model="selectedField" placeholder="全部领域" class="field-select"> <el-select v-model="selectedField" placeholder="全部领域" class="field-select">
<el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
...@@ -277,12 +277,18 @@ const getUSGovernmentSanctionHistoryData = async () => { ...@@ -277,12 +277,18 @@ const getUSGovernmentSanctionHistoryData = async () => {
loadingHistory.value = true; loadingHistory.value = true;
try { try {
const params = { const params = {
onlyHistory: measureType.value === "history", // onlyHistory: measureType.value === "history",
onlyFuture: measureType.value === "future", // onlyFuture: measureType.value === "future",
field: selectedField.value || null onlyHistory: false,
onlyFuture: true,
field: selectedField.value || null,
startDate: new Date(),
endDate: new Date(new Date().setMonth(new Date().getMonth() + 3))
}; };
const res = await getUSGovernmentSanctionHistory(params); const res = await getUSGovernmentSanctionHistory(params);
console.log('遏制时间线', res);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
// 如果返回的是 content 数组（分页结构）或直接是数组 // 如果返回的是 content 数组（分页结构）或直接是数组
const rawList = res.data.content || res.data; const rawList = res.data.content || res.data;
...@@ -361,6 +367,8 @@ const getUSGovernmentLatestDynamicData = async () => { ...@@ -361,6 +367,8 @@ const getUSGovernmentLatestDynamicData = async () => {
try { try {
const res = await getUSGovernmentLatestDynamic(); const res = await getUSGovernmentLatestDynamic();
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
console.log("美政府部门打压遏制最新动态", res);
dynamicList.value = res.data.map(item => ({ dynamicList.value = res.data.map(item => ({
title: item.orgName ? `${item.orgName}：${item.title}` : item.title, title: item.orgName ? `${item.orgName}：${item.title}` : item.title,
date: item.time ? item.time.replace(/^(\d{4})-(\d{2})-(\d{2})$/, "$1年$2月$3日") : "", date: item.time ? item.time.replace(/^(\d{4})-(\d{2})-(\d{2})$/, "$1年$2月$3日") : "",
...@@ -368,7 +376,8 @@ const getUSGovernmentLatestDynamicData = async () => { ...@@ -368,7 +376,8 @@ const getUSGovernmentLatestDynamicData = async () => {
content: item.content || item.title, content: item.content || item.title,
tags: item.industrylist || [], tags: item.industrylist || [],
id: item.id, id: item.id,
orgName: item.orgName || "" orgName: item.orgName || "",
logoUrl: item.logoUrl
})); }));
} }
} catch (error) { } catch (error) {
...@@ -777,12 +786,15 @@ const initSlider = () => { ...@@ -777,12 +786,15 @@ const initSlider = () => {
// 设定总范围：2010年1月1日 - 当前年份年底 // 设定总范围：2010年1月1日 - 当前年份年底
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
const rangeMin = new Date(2018, 0, 1).getTime(); const rangeMin = new Date().setHours(0, 0, 0, 0);
const rangeMax = new Date(currentYear, 11, 31).getTime(); const rangeMax = new Date(new Date().setMonth(new Date().getMonth() + 12)).setHours(0, 0, 0, 0);
// 设定默认选中范围：2025-01-01 到 2025-04-25 // 设定默认选中范围：2025-01-01 到 2025-04-25
const defaultStart = new Date(2025, 0, 1).getTime(); // const defaultStart = new Date(2025, 0, 1).getTime();
const defaultEnd = new Date(2025, 3, 25).getTime(); // const defaultEnd = new Date(2025, 3, 25).getTime();
const defaultStart = new Date().setHours(0, 0, 0, 0);
const defaultEnd = new Date(new Date().setMonth(new Date().getMonth() + 3)).setHours(0, 0, 0, 0);
// 初始化 dateRange 为默认选中范围 // 初始化 dateRange 为默认选中范围
dateRange.value = [defaultStart, defaultEnd]; dateRange.value = [defaultStart, defaultEnd];
...@@ -1060,9 +1072,9 @@ const prev = () => { ...@@ -1060,9 +1072,9 @@ const prev = () => {
background-size: 358px 358px; background-size: 358px 358px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
filter: blur(20px); // filter: blur(20px);
z-index: 0; z-index: 0;
opacity: 0.8; // opacity: 0.8;
// background-color: rgba(5, 33, 77, 0.7); // 调整为更明显的深蓝色 // background-color: rgba(5, 33, 77, 0.7); // 调整为更明显的深蓝色
&::after { &::after {
...@@ -1072,7 +1084,9 @@ const prev = () => { ...@@ -1072,7 +1084,9 @@ const prev = () => {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: linear-gradient(90deg, rgba(5, 33, 77, 1) 0%, rgba(5, 33, 77, 0) 50%, rgba(5, 33, 77, 1) 100%); // background: linear-gradient(90deg, rgba(5, 33, 77, 1) 0%, rgba(5, 33, 77, 0) 50%, rgba(5, 33, 77, 1) 100%);
// background: linear-gradient(180deg, rgba(34, 41, 52, 0.8) 0%, rgba(34, 41, 52, 0.4) 100%);
backdrop-filter: blur(100px);
background: linear-gradient(180deg, rgba(34, 41, 52, 0.8) 0%, rgba(34, 41, 52, 0.4) 100%); background: linear-gradient(180deg, rgba(34, 41, 52, 0.8) 0%, rgba(34, 41, 52, 0.4) 100%);
} }
} }
......
src/views/ZMOverView/components/gameProfile/index.vue
浏览文件 @ 3d27f2af
...@@ -57,7 +57,8 @@ ...@@ -57,7 +57,8 @@
<template #default="scope"> <template #default="scope">
<div style="display: flex"> <div style="display: flex">
<div class="progress-text"> <div class="progress-text">
{{ "NO." + scope.row.usRank + " " + scope.row.usScore }} <div class="rank">{{ "No." + scope.row.usRank }}</div>
<div class="score">{{ scope.row.usScore }}</div>
</div> </div>
<div <div
class="progress-wrapper left" class="progress-wrapper left"
...@@ -81,11 +82,17 @@ ...@@ -81,11 +82,17 @@
:percentage="scope.row.usScore" :percentage="scope.row.usScore"
:stroke-width="20" :stroke-width="20"
class="right-progress" class="right-progress"
:class="{ cLead: scope.row.chinaRank < scope.row.usRank }"
:show-text="false" :show-text="false"
/> />
</div> </div>
<div class="progress-text" style="color: rgba(206, 79, 81, 1)"> <div class="progress-text" style="color: rgba(206, 79, 81, 1)">
{{ "NO." + scope.row.chinaRank + " " + scope.row.chinaScore }} <div class="rank" :class="{ cLeadRank: scope.row.chinaRank < scope.row.usRank }">
{{ "No." + scope.row.chinaRank }}
</div>
<div class="score" :class="{ cLeadScore: scope.row.chinaRank < scope.row.usRank }">
{{ scope.row.chinaScore }}
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -94,13 +101,62 @@ ...@@ -94,13 +101,62 @@
</div> </div>
</div> </div>
</div> </div>
<div class="card-box" style="margin-top: 16px"> <div class="card-box" style="margin-top: 16px" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay(true)">
<div class="card-title"> <div class="card-title">
<img class="icon" src="../../assets/icons/title-icon2.png" /> <img class="icon" src="../../assets/icons/title-icon2.png" />
<img class="text" src="../../assets/icons/title-text2.svg" /> <img class="text" src="../../assets/icons/title-text2.svg" />
</div> </div>
<div style="display: flex; height: 650px"> <div class="card-main">
<Timeline :data="course" text-key="title" id-key="seq" /> <!-- <Timeline :data="course" text-key="title" id-key="seq" /> -->
<div class="line"></div>
<div class="card-content-mask">
<div class="card-content" :style="{ transform: `translateX(-${currentIndex * (240 + 16)}px)` }">
<div class="card-item" v-for="(val, idx) in course" :key="idx">
<div class="card-item-top">{{ val.eventStrategy }}</div>
<div class="card-item-line"></div>
<div class="card-item-main">
<div class="logo">
<img :src="val.eventCountryImg" alt="" />
</div>
<div class="time">{{ val.eventDate }}</div>
<div class="title">{{ val.eventName }}</div>
<div class="desc">{{ val.eventDesc }}</div>
<div class="info">{{ val.eventOrg + " · " + val.eventType }}</div>
<div class="tag">
<div
class="tag-item"
:class="{
tag1: Number(area.id) < 3,
tag2: Number(area.id) > 2 && Number(area.id) < 5,
tag3: Number(area.id) > 4 && Number(area.id) < 7,
tag4: Number(area.id) > 6 && Number(area.id) < 9,
tag5: Number(area.id) > 8 && Number(area.id) < 11,
tag6: Number(area.id) > 10
}"
v-for="(area, idxx) in val.domainList"
:key="idxx"
>
{{ area.name }}
</div>
</div>
</div>
</div>
</div>
</div>
<img
src="@/assets/icons/card-btn-left.png"
alt=""
class="left-btn"
@click="prev"
:class="{ disabled: currentIndex === 0 }"
/>
<img
src="@/assets/icons/card-btn-right.png"
alt=""
class="right-btn"
@click="next"
:class="{ disabled: currentIndex >= course.length - 5 }"
/>
</div> </div>
</div> </div>
<div class="btn-box"> <div class="btn-box">
...@@ -108,7 +164,7 @@ ...@@ -108,7 +164,7 @@
v-for="(value, index) in btnList" v-for="(value, index) in btnList"
:key="index" :key="index"
class="btn-item" class="btn-item"
aria-disabled="true" @click="handleClickBottomBtn"
:style="{ :style="{
background: value.background background: value.background
}" }"
...@@ -152,6 +208,7 @@ import Img5 from "./assets/images/btn-icon-4.png"; ...@@ -152,6 +208,7 @@ import Img5 from "./assets/images/btn-icon-4.png";
import Img6 from "./assets/images/btn-icon-5.png"; import Img6 from "./assets/images/btn-icon-5.png";
import Img7 from "./assets/images/btn-icon-6.png"; import Img7 from "./assets/images/btn-icon-6.png";
import Img8 from "./assets/images/btn-icon-7.png"; import Img8 from "./assets/images/btn-icon-7.png";
import { ElMessage } from "element-plus";
const course = ref([ const course = ref([
{ {
...@@ -287,6 +344,7 @@ onMounted(async () => { ...@@ -287,6 +344,7 @@ onMounted(async () => {
// myChart.setOption(option); // myChart.setOption(option);
// // setChart(option, "char7"); // // setChart(option, "char7");
startAutoPlay();
}); });
const tableData = ref([ const tableData = ref([
...@@ -409,6 +467,51 @@ const btnList = ref([ ...@@ -409,6 +467,51 @@ const btnList = ref([
img: Img8 img: Img8
} }
]); ]);
const currentIndex = ref(0);
let autoTimer = null;
const startAutoPlay = isContinue => {
if (!isContinue) {
currentIndex.value = 0;
}
stopAutoPlay();
if (course.value.length > 5) {
autoTimer = setInterval(() => {
next();
}, 3000);
}
};
const stopAutoPlay = () => {
if (autoTimer) {
clearInterval(autoTimer);
autoTimer = null;
}
};
const next = () => {
let arr = [...course.value];
if (currentIndex.value < course.value.length - 5) {
currentIndex.value++;
} else {
course.value = [...course.value, ...arr];
currentIndex.value++;
// currentIndex.value = 0;
}
};
const prev = () => {
if (currentIndex.value > 0) {
currentIndex.value--;
} else {
currentIndex.value = Math.max(0, course.value.length - 5);
}
};
const handleClickBottomBtn = () => {
ElMessage.warning("当前功能正在开发中，敬请期待！");
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -446,15 +549,242 @@ const btnList = ref([ ...@@ -446,15 +549,242 @@ const btnList = ref([
margin: 8px 0px; margin: 8px 0px;
} }
} }
.card-main {
height: 650px;
position: relative;
.line {
margin-top: 36px;
width: 1600px;
height: 4px;
background: rgba(231, 243, 255, 1);
}
.card-content-mask {
margin: -15px auto 0;
width: 1520px;
height: 594px;
overflow: hidden;
.card-content {
margin: 0 auto 0;
// width: 1520px;
width: max-content;
height: 594px;
display: flex;
gap: 16px;
transition: transform 0.75s ease; // 平滑过渡动画
.card-item {
width: 240px;
height: 594px;
.card-item-top {
margin: 0 auto;
width: max-content;
height: 32px;
padding: 0px 12px;
box-sizing: border-box;
border: 1px solid rgba(174, 214, 255, 1);
border-radius: 50px;
background: rgba(231, 243, 255, 1);
text-align: center;
line-height: 30px;
color: var(--color-main-active);
font-family: Source Han Sans CN;
font-style: Bold;
font-size: 18px;
font-weight: 700;
letter-spacing: 0px;
}
.card-item-line {
width: 2px;
height: 30px;
background: rgba(174, 214, 255, 1);
margin-left: 119px;
}
.card-item-main {
width: 240px;
height: 532px;
box-sizing: border-box;
border: 1px solid rgba(174, 214, 255, 1);
border-radius: 10px;
background: rgba(246, 250, 255, 1);
.logo {
margin-top: 24px;
margin-left: 24px;
width: 48px;
height: 48px;
border-radius: 24px;
overflow: hidden;
img {
width: 100px;
height: 100%;
}
}
.time {
margin-top: 16px;
margin-left: 24px;
width: 192px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Source Han Sans CN;
font-style: Bold;
font-size: 18px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.title {
margin-top: 16px;
margin-left: 24px;
width: 192px;
height: 48px;
color: rgba(59, 65, 75, 1);
font-family: Source Han Sans CN;
font-style: Bold;
font-size: 18px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
overflow: hidden;
}
.desc {
margin-top: 16px;
margin-left: 24px;
width: 192px;
height: 150px;
color: rgba(95, 101, 108, 1);
font-family: Source Han Sans CN;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
overflow: hidden;
}
.info {
margin-top: 16px;
margin-left: 24px;
width: 192px;
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Source Han Sans CN;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
overflow: hidden;
}
.tag {
height: 24px;
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 16px;
margin-left: 24px;
.tag-item {
// width: 72px;
height: 24px;
padding: 0 8px;
box-sizing: border-box;
// border: 1px solid rgba(211, 173, 247, 1);
border-radius: 4px;
// background: rgba(249, 240, 255, 1);
// color: rgba(114, 46, 209, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: center;
}
.tag1 {
border: 1px solid rgba(217, 247, 190, 1);
background: rgba(246, 255, 237, 1);
color: rgba(82, 196, 26, 1);
}
.tag2 {
border: 1px solid rgba(186, 224, 255, 1);
background: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.tag3 {
border: 1px solid rgba(135, 232, 222, 1);
background: rgba(230, 255, 251, 1);
color: rgba(19, 168, 168, 1);
}
.tag4 {
border: 1px solid rgba(211, 173, 247, 1);
background: rgba(249, 240, 255, 1);
color: rgba(114, 46, 209, 1);
}
.tag5 {
border: 1px solid rgba(255, 229, 143, 1);
background: rgba(255, 251, 230, 1);
color: rgba(250, 173, 20, 1);
}
.tag6 {
border: 1px solid rgba(255, 163, 158, 1);
background: rgba(255, 241, 240, 1);
color: rgba(245, 34, 45, 1);
}
}
}
}
}
}
.left-btn {
position: absolute;
width: 24px;
height: 48px;
top: 297px;
left: 0;
cursor: pointer;
}
.right-btn {
position: absolute;
width: 24px;
height: 48px;
top: 297px;
right: 0;
cursor: pointer;
}
}
} }
} }
.progress-text { .progress-text {
/* No.1 92.5 */ /* No.1 92.5 */
width: 80px; width: 90px;
height: 22px; height: 22px;
color: rgba(5, 95, 194, 1); display: flex;
gap: 8px;
.rank {
width: 42px;
height: 22px;
padding: 0 2px;
border-radius: 4px;
background: rgba(231, 243, 255, 1);
color: var(--color-main-active);
font-family: YouSheBiaoTiHei;
font-style: Regular;
font-size: 12px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: center;
}
.cLeadRank {
background: rgba(206, 79, 81, 0.1);
color: rgba(206, 79, 81, 1);
}
.score {
width: 36px;
height: 22px;
color: var(--color-main-active);
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-style: Bold; font-style: Bold;
font-size: 14px; font-size: 14px;
...@@ -462,6 +792,10 @@ const btnList = ref([ ...@@ -462,6 +792,10 @@ const btnList = ref([
line-height: 22px; line-height: 22px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
}
.cLeadScore {
color: rgba(206, 79, 81, 1);
}
} }
/* ========== 公共外壳 ========== */ /* ========== 公共外壳 ========== */
...@@ -522,7 +856,8 @@ const btnList = ref([ ...@@ -522,7 +856,8 @@ const btnList = ref([
.right-progress :deep(.el-progress-bar__outer) { .right-progress :deep(.el-progress-bar__outer) {
border-radius: 0; border-radius: 0;
clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0);
background: #ffccc7; // background: #ffccc7;
background: rgba(231, 243, 255, 1);
overflow: hidden; overflow: hidden;
height: 10px !important; height: 10px !important;
margin-top: 6px; margin-top: 6px;
...@@ -531,10 +866,19 @@ const btnList = ref([ ...@@ -531,10 +866,19 @@ const btnList = ref([
.right-progress :deep(.el-progress-bar__inner) { .right-progress :deep(.el-progress-bar__inner) {
border-radius: 0; border-radius: 0;
clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0);
background: #ce4f51; // background: #ce4f51;
background: #055fc2;
height: 10px !important; height: 10px !important;
} }
.cLead :deep(.el-progress-bar__outer) {
background: #ffccc7;
}
.cLead :deep(.el-progress-bar__inner) {
background: #ce4f51;
}
:deep(.el-table .cell) { :deep(.el-table .cell) {
padding: 0; padding: 0;
...@@ -617,6 +961,7 @@ const btnList = ref([ ...@@ -617,6 +961,7 @@ const btnList = ref([
line-height: 30px; line-height: 30px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: center; text-align: center;
cursor: pointer;
} }
/* 隐藏原生箭头 */ /* 隐藏原生箭头 */
...@@ -684,12 +1029,6 @@ const btnList = ref([ ...@@ -684,12 +1029,6 @@ const btnList = ref([
padding: 12px 0; padding: 12px 0;
} }
.btn-item[aria-disabled="true"] {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
:deep(.el-table .el-table__cell) { :deep(.el-table .el-table__cell) {
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
......
src/views/ZMOverView/components/newRisk/index.vue
浏览文件 @ 3d27f2af
...@@ -62,7 +62,6 @@ ...@@ -62,7 +62,6 @@
class="risk-signals-item" class="risk-signals-item"
v-for="(item, index) in warningList" v-for="(item, index) in warningList"
:key="index" :key="index"
@click="handleClickToDetailO(item)"
@mouseenter="onMouseEnter(item, index)" @mouseenter="onMouseEnter(item, index)"
@mouseleave="onMouseLeave" @mouseleave="onMouseLeave"
:class="['risk-signals-item', { 'risk-signals-item-hightLight': riskSignalActiveIndex === index }]" :class="['risk-signals-item', { 'risk-signals-item-hightLight': riskSignalActiveIndex === index }]"
...@@ -133,18 +132,23 @@ ...@@ -133,18 +132,23 @@
<div class="carousel-bottom"> <div class="carousel-bottom">
<div class="left"> <div class="left">
{{ {{ News.hotspotDate }}
News.hotspotDate +
" " +
(News.hotspotOrgName ? News.hotspotOrgName : "暂无发布机构数据")
}}
</div> </div>
<div class="right"> <div class="right">
<div v-for="tag in News.domainList" class="tag"> <div v-for="(tag, index) in News.domainList" :key="index" class="tag">
{{ tag.name }} {{ tag.name }}
</div> </div>
</div> </div>
</div> </div>
<div class="carousel-footer">
<div class="footer-left">
<div class="type">{{ News.hotspotType +'——' }}</div>
<div class="text">{{ News.eventTitle }}</div>
</div>
<div class="footer-right">
<img src="@/assets/icons/arrow-right.png" alt="">
</div>
</div>
</div> </div>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
...@@ -569,10 +573,6 @@ const handleClickToDetail = () => { ...@@ -569,10 +573,6 @@ const handleClickToDetail = () => {
}; };
// 查看详情 传递参数 // 查看详情 传递参数
const handleClickToDetailO = item => { const handleClickToDetailO = item => {
// window.sessionStorage.setItem("billId", item.billId);
// window.sessionStorage.setItem("curTabName", item.name || item.signalTitle);
// const route = router.resolve("/billLayout?billId=" + item.billId);
// window.open(route.href, "_blank");
window.sessionStorage.setItem("curTabName", item.signalTitle); window.sessionStorage.setItem("curTabName", item.signalTitle);
// console.log("item", item); // console.log("item", item);
let curRoute; let curRoute;
...@@ -665,7 +665,7 @@ const onMouseEnter = (item, index) => { ...@@ -665,7 +665,7 @@ const onMouseEnter = (item, index) => {
}; };
const onMouseLeave = () => { const onMouseLeave = () => {
currentHoveredSignalId.value = null; // currentHoveredSignalId.value = null;
timer2 = setInterval(() => { timer2 = setInterval(() => {
if (riskSignalActiveIndex.value < warningList.value.length - 1) { if (riskSignalActiveIndex.value < warningList.value.length - 1) {
riskSignalActiveIndex.value++; riskSignalActiveIndex.value++;
...@@ -1457,7 +1457,7 @@ onUnmounted(() => { ...@@ -1457,7 +1457,7 @@ onUnmounted(() => {
.news-carousel-content { .news-carousel-content {
width: 664px; width: 664px;
margin-top: 16px; margin-top: 16px;
height: 270px; height: 210px;
/* 调整为可用空间 */ /* 调整为可用空间 */
overflow-y: auto; overflow-y: auto;
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
...@@ -1514,6 +1514,55 @@ onUnmounted(() => { ...@@ -1514,6 +1514,55 @@ onUnmounted(() => {
} }
} }
} }
.carousel-footer {
margin-top: 10px;
width: 664px;
height: 42px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 50px;
background: rgba(246, 250, 255, 1);
display: flex;
padding: 0 13px;
align-items: center;
justify-content: space-between;
cursor: pointer;
.footer-left {
display: flex;
.type {
color: var(--color-main-active);
font-family: Source Han Sans CN;
font-style: bold;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.text {
width: 500px;
color: var(--color-main-active);
font-family: Source Han Sans CN;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.footer-right {
width: 12px;
height: 11px;
img {
width: 100%;
height: 100%;
}
}
}
} }
} }
......
src/views/newsAnalysis/index.vue
浏览文件 @ 3d27f2af
...@@ -30,13 +30,14 @@ ...@@ -30,13 +30,14 @@
<div class="box-header"> <div class="box-header">
<div class="icon"></div> <div class="icon"></div>
<div class="title">{{ "新闻内容" }}</div> <div class="title">{{ "新闻内容" }}</div>
<div class="header-right"> <div class="header-right" @click="handleWarning">
<div class="mask"></div>
<el-switch v-model="highlightEntities" /> <el-switch v-model="highlightEntities" />
高亮实体 高亮实体
</div> </div>
</div> </div>
<div class="box1-main"> <div class="box1-main">
<div class="main-header"> <!-- <div class="main-header">
<div class="main-header-left">{{ "原文" }}</div> <div class="main-header-left">{{ "原文" }}</div>
<div class="main-header-center"></div> <div class="main-header-center"></div>
<div class="main-header-right"> <div class="main-header-right">
...@@ -45,7 +46,7 @@ ...@@ -45,7 +46,7 @@
<img src="./assets/images/arrow-down.png" alt="" /> <img src="./assets/images/arrow-down.png" alt="" />
</div> </div>
</div> </div>
</div> </div> -->
<div class="main-content"> <div class="main-content">
<!-- {{ newsContentInfo.newsContent }} --> <!-- {{ newsContentInfo.newsContent }} -->
{{ {{
...@@ -69,8 +70,14 @@ ...@@ -69,8 +70,14 @@
<div class="title">{{ "相关新闻" }}</div> <div class="title">{{ "相关新闻" }}</div>
</div> </div>
<div class="box2-main"> <div class="box2-main">
<div class="news-list"> <div class="box2-item" v-for="(item, index) in relevantNews" :key="index">
<NewsList :list-data="customNewsData" /> <div class="box2-item-left">
<img :src="item.newsImage" alt="" />
</div>
<div class="box2-item-right">
<div class="title">{{ item.newsTitle }}</div>
<div class="info">{{ item.newsDate + " · " + item.newsOrg }}</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -88,6 +95,7 @@ import NewsList from "@/views/exportControl/components/news.vue"; ...@@ -88,6 +95,7 @@ import NewsList from "@/views/exportControl/components/news.vue";
import newsImg from "@/assets/images/img-news.png"; import newsImg from "@/assets/images/img-news.png";
import openIcon from "@/assets/images/icon-open.png"; import openIcon from "@/assets/images/icon-open.png";
import dotIcon from "@/assets/images/dot.png"; import dotIcon from "@/assets/images/dot.png";
import { ElMessage } from "element-plus";
const route = useRoute(); const route = useRoute();
...@@ -186,8 +194,60 @@ const handleGetNewsEvent = async () => { ...@@ -186,8 +194,60 @@ const handleGetNewsEvent = async () => {
} }
}; };
const handleWarning = () => {
ElMessage.warning("当前功能正在开发中，敬请期待！");
return;
};
// 相关新闻 // 相关新闻
const customNewsData = ref([]); const relevantNews = ref([
{
newsImage: null,
newsTitle: "美国将6家中企列入实体清单，合肥宝龙达被移出！",
newsETitle: null,
newsDateTime: null,
newsDate: "2025-01-08",
newsOrg: "芯智讯",
industryList: null,
newsSrc: null,
newsId: null
},
{
newsImage: null,
newsTitle: "美国将39家中企列入“实体清单”，还有42个实体被列入SDN名单！",
newsETitle: null,
newsDateTime: null,
newsDate: "2024-08-24",
newsOrg: "芯智讯",
industryList: null,
newsSrc: null,
newsId: null
},
{
newsImage: null,
newsTitle: "美国商务部实体清单新增列6个实体，包括2家中国企业",
newsETitle: null,
newsDateTime: null,
newsDate: "2024-07-05",
newsOrg: "贸易与合规",
industryList: null,
newsSrc: null,
newsId: null
},
{
newsImage: null,
newsTitle: "近日美国商务部新增实体清单条目，涉及多家中国实体",
newsETitle: null,
newsDateTime: null,
newsDate: "2024-02-29",
newsOrg: "贸易与投资便利化促进会",
industryList: null,
newsSrc: null,
newsId: null
}
]);
const handleGetRelationNews = async () => { const handleGetRelationNews = async () => {
const params = { const params = {
newsId: route.query.newsId newsId: route.query.newsId
...@@ -196,14 +256,16 @@ const handleGetRelationNews = async () => { ...@@ -196,14 +256,16 @@ const handleGetRelationNews = async () => {
const res = await getRelationNews(params); const res = await getRelationNews(params);
console.log("相关新闻", res); console.log("相关新闻", res);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
relevantNews.value = res.data
} else { } else {
customNewsData.value = []; relevantNews.value = [];
} }
} catch (error) { } catch (error) {
customNewsData.value = []; relevantNews.value = [];
} }
}; };
onMounted(() => { onMounted(() => {
handleGetNewsSummary(); handleGetNewsSummary();
handleGetNewsContent(); handleGetNewsContent();
...@@ -346,6 +408,15 @@ onMounted(() => { ...@@ -346,6 +408,15 @@ onMounted(() => {
position: absolute; position: absolute;
top: 18px; top: 18px;
right: 37px; right: 37px;
cursor: pointer;
.mask {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 9999;
}
} }
} }
.left { .left {
...@@ -437,10 +508,65 @@ onMounted(() => { ...@@ -437,10 +508,65 @@ onMounted(() => {
width: 520px; width: 520px;
.box2 { .box2 {
width: 520px; width: 520px;
height: 400px; height: 600px;
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px; border-radius: 10px;
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
.box2-main {
width: 483px;
height: 520px;
margin: 0 auto;
overflow: hidden;
overflow-y: auto;
.box2-item {
width: 483px;
height: 60px;
display: flex;
margin-bottom: 8px;
.box2-item-left {
margin-left: 8px;
margin-top: 6px;
width: 64px;
height: 48px;
img {
width: 100%;
height: 100%;
}
}
.box2-item-right {
width: 395px;
height: 48px;
margin-left: 14px;
margin-top: 5px;
.title {
width: 395px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.info {
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Source Han Sans CN;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
}
}
}
} }
} }
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论