Skip to content

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

update

上级 08966e42
隐藏空白字符变更
内嵌 并排
正在显示 包含 566 行增加 和 473 行删除
src/router/modules/writtingAssitant.js
浏览文件 @ 5aa089fb
......@@ -2,7 +2,7 @@
import WrittingAsstaint from "@/views/writtingAsstaint/index.vue";
const writtingRoutes = [
// 法案系统路由
// 智能写报路由
{
path: "/writtingAsstaint",
name: "writtingAsstaint",
......
src/views/ZMOverView/components/newRisk/index.vue
浏览文件 @ 5aa089fb
......@@ -14,7 +14,12 @@
>
<img class="section-title" :src="section.title" />
<div class="stats">
<div class="ball-item" v-for="value,idx in sections[index].waveBall" :key="idx" @click="highLight(value.type)">
<div
class="ball-item"
v-for="(value, idx) in sections[index].waveBall"
:key="idx"
@click="highLight(value.type)"
>
<WaveBall :percent="value.percent" :data="value" :color="section.waterColor" :size="128" />
<div class="text-box">
<div class="waveBall-text">
......@@ -24,16 +29,20 @@
</div>
</div>
</div>
<div class="bottm-box" :style="sections[index].waveBall.length === 2 ? 'width: 350px' : 'width:503px'">
<div
class="bottm-box"
:style="sections[index].waveBall.length === 2 ? 'width: 350px' : 'width:503px'"
@click="handleClickCardBottomInfo(cardBottomInfo[index])"
>
<img src="./icon/title-icon-1.png" />
<div
class="bottm-box-text"
:style="sections[index].waveBall.length === 2 ? 'width: 225px' : 'width:378px'"
>
{{ sections[index].title }}
{{ cardBottomInfo[index]?.title || "暂无新增数据" }}
</div>
<div style="width: 50px; color: #ffffff">
{{ sections[index].date }}
<div style="width: 115px; color: #ffffff">
{{ cardBottomInfo[index]?.date }}
</div>
</div>
</div>
......@@ -54,12 +63,9 @@
v-for="(item, index) in warningList"
:key="index"
@click="handleClickToDetailO(item)"
@mouseenter="onMouseEnter(item.signalId)"
@mouseenter="onMouseEnter(item, index)"
@mouseleave="onMouseLeave"
:class="[
'risk-signals-item',
{ 'risk-signals-item-hightLight': item.eventType === highlightedEventType }
]"
:class="['risk-signals-item', { 'risk-signals-item-hightLight': riskSignalActiveIndex === index }]"
>
<div
class="item-left"
......@@ -79,10 +85,20 @@
</div>
</div>
<div class="news">
<div class="box1-left" @click="handleSwithCurNews('left')">
<div
class="box1-left"
@click="handleSwithCurNews('left')"
@mouseenter="handleInBtn"
@mouseleave="handleOutBtn"
>
<img :src="leftBtn" alt="" />
</div>
<div class="box1-right" @click="handleSwithCurNews('right')">
<div
class="box1-right"
@click="handleSwithCurNews('right')"
@mouseenter="handleInBtn"
@mouseleave="handleOutBtn"
>
<img :src="rightBtn" alt="" />
</div>
<el-carousel
......@@ -118,7 +134,9 @@
<div class="carousel-bottom">
<div class="left">
{{
News.hotspotDate + ' ' + (News.hotspotOrgName ? News.hotspotOrgName : "暂无发布机构数据")
News.hotspotDate +
" " +
(News.hotspotOrgName ? News.hotspotOrgName : "暂无发布机构数据")
}}
</div>
<div class="right">
......@@ -283,6 +301,43 @@ const sections = ref([
}
]);
const cardList1 = ref([]);
const cardList2 = ref([]);
const cardList3 = ref([]);
const cardList4 = ref([]);
const cardBottomInfo = ref([
{
type: "",
id: "",
title: "",
date: ""
},
{
type: "",
id: "",
title: "",
date: ""
},
{
type: "",
id: "",
title: "",
date: ""
},
{
type: "",
id: "",
title: "",
date: ""
}
]);
const cardShowIndex1 = ref(0);
const cardShowIndex2 = ref(0);
const cardShowIndex3 = ref(0);
const cardShowIndex4 = ref(0);
// 最新风险动态统计
const handleGetLatestRiskUpdates = async () => {
try {
......@@ -431,6 +486,56 @@ const handleGetLatestRisks = async () => {
warningList.value = res.data.riskVOS;
hotNewsList.value = res.data.hotspotVOS;
riskTotal.value = res.data.riskCount;
cardList1.value = warningList.value
.filter(item => {
return item.eventType === "法案" || item.eventType === "行政令";
})
.map(val => {
return {
type: val.eventType,
id: val.signalId,
title: val.eventType + ":" + val.signalTitle,
date: val.signalTime
};
});
console.log("cardList1", cardList1.value);
cardList2.value = hotNewsList.value
.filter(item => {
return item.eventType === "实体清单" || item.eventType === "CCL";
})
.map(val => {
return {
type: val.eventType,
id: val.signalId,
title: val.eventType + ":" + val.signalTitle,
date: val.signalTime
};
});
cardList3.value = hotNewsList.value
.filter(item => {
return item.eventType === "SDN" || item.eventType === "涉军企业";
})
.map(val => {
return {
type: val.eventType,
id: val.signalId,
title: val.eventType + ":" + val.signalTitle,
date: val.signalTime
};
});
cardList4.value = hotNewsList.value
.filter(item => {
return item.eventType === "337调查" || item.eventType === "232调查" || item.eventType === "301调查";
})
.map(val => {
return {
type: val.eventType,
id: val.signalId,
title: val.eventType + ":" + val.signalTitle,
date: val.signalTime
};
});
console.log(hotNewsList.value, "hotNewsList.value");
}
} catch (error) {
......@@ -464,20 +569,111 @@ const handleClickToDetail = () => {
};
// 查看详情 传递参数
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("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);
// console.log("item", item);
let curRoute;
switch (item.eventType) {
case "法案":
curRoute = router.resolve({
path: "/billLayout",
query: {
billId: item.signalId
}
});
break;
case "行政令":
curRoute = router.resolve({
path: "/decreeLayout",
query: {
id: item.signalId
}
});
break;
case "实体清单":
curRoute = router.resolve({
path: "/exportControl/singleSanction",
query: {
id: item.signalId
}
});
break;
case "CCL":
curRoute = router.resolve({
path: "/exportControl/singleSanction",
query: {
id: item.signalId
}
});
break;
case "SDN":
curRoute = router.resolve({
path: "/billLayout",
query: {
billId: item.signalId
}
});
break;
case "涉军企业":
curRoute = router.resolve({
name: "companyPages",
params: {
id: item.signalId
}
});
break;
case "337调查":
curRoute = router.resolve({
path: "/marketSingleCaseLayout/overview",
query: {
id: "337",
searchId: item.signalId + ""
}
});
break;
case "232调查":
curRoute = router.resolve({
path: "/marketSingleCaseLayout/overview",
query: {
id: "232",
searchId: item.signalId + ""
}
});
break;
case "301调查":
curRoute = router.resolve({
path: "/marketSingleCaseLayout/overview",
query: {
id: "301",
searchId: item.signalId + ""
}
});
break;
}
window.open(curRoute.href, "_blank");
};
const currentHoveredSignalId = ref(null);
const onMouseEnter = signalId => {
currentHoveredSignalId.value = signalId;
const onMouseEnter = (item, index) => {
currentHoveredSignalId.value = item.signalId;
riskSignalActiveIndex.value = index;
clearInterval(timer2);
};
const onMouseLeave = () => {
currentHoveredSignalId.value = null;
timer2 = setInterval(() => {
if (riskSignalActiveIndex.value < warningList.value.length - 1) {
riskSignalActiveIndex.value++;
} else {
riskSignalActiveIndex.value = 0;
}
currentHoveredSignalId.value = warningList.value[riskSignalActiveIndex.value].signalId;
}, 3000);
};
// 计算属性或使用 watchEffect 来动态计算 filteredHotNewsList
......@@ -559,19 +755,214 @@ const toDetaile = (id, type) => {
};
const handleSwithCurNews = name => {
if (name === "left") {
carouselRef.value.prev();
// carouselRef.value.prev();
if (riskSignalActiveIndex.value > 0) {
riskSignalActiveIndex.value--;
} else {
riskSignalActiveIndex.value = warningList.value.length - 1;
}
} else {
carouselRef.value.next();
// carouselRef.value.next();
if (riskSignalActiveIndex.value < warningList.value.length - 1) {
riskSignalActiveIndex.value++;
} else {
riskSignalActiveIndex.value = 0;
}
}
currentHoveredSignalId.value = warningList.value[riskSignalActiveIndex.value].signalId;
};
const handleInBtn = () => {
clearInterval(timer2);
};
const handleOutBtn = () => {
currentHoveredSignalId.value = null;
timer2 = setInterval(() => {
if (riskSignalActiveIndex.value < warningList.value.length - 1) {
riskSignalActiveIndex.value++;
} else {
riskSignalActiveIndex.value = 0;
}
currentHoveredSignalId.value = warningList.value[riskSignalActiveIndex.value].signalId;
}, 3000);
};
// 实体清单，CCL，SDN，涉军企业，337调查，232调查，301调查
const handleClickCardBottomInfo = item => {
window.sessionStorage.setItem("curTabName", item.title);
console.log("item", item);
let curRoute;
switch (item.type) {
case "法案":
curRoute = router.resolve({
path: "/billLayout",
query: {
billId: item.id
}
});
break;
case "行政令":
curRoute = router.resolve({
path: "/decreeLayout",
query: {
id: item.id
}
});
break;
case "实体清单":
curRoute = router.resolve({
path: "/exportControl/singleSanction",
query: {
id: item.id
}
});
break;
case "CCL":
curRoute = router.resolve({
path: "/exportControl/singleSanction",
query: {
id: item.id
}
});
break;
case "SDN":
curRoute = router.resolve({
path: "/billLayout",
query: {
billId: item.id
}
});
break;
case "涉军企业":
curRoute = router.resolve({
name: "companyPages",
params: {
id: item.id
}
});
break;
case "337调查":
curRoute = router.resolve({
path: "/marketSingleCaseLayout/overview",
query: {
id: "337",
searchId: item.id + ""
}
});
break;
case "232调查":
curRoute = router.resolve({
path: "/marketSingleCaseLayout/overview",
query: {
id: "232",
searchId: item.id + ""
}
});
break;
case "301调查":
curRoute = router.resolve({
path: "/marketSingleCaseLayout/overview",
query: {
id: "301",
searchId: item.id + ""
}
});
break;
}
window.open(curRoute.href, "_blank");
};
const riskSignalActiveIndex = ref(0);
const riskSignalsRef = ref(null); // 引用risk-signals容器
let intervalId;
let timer1;
let timer2;
onMounted(async () => {
await handleGetLatestRiskUpdates();
await handleGetLatestRisks();
// console.log("cardList1111111", cardList1.value);
timer1 = setInterval(() => {
if (cardList1.value.length) {
if (cardShowIndex1.value < cardList1.value.length - 1) {
cardShowIndex1.value++;
cardBottomInfo.value[0].type = cardList1.value[cardShowIndex1.value].type;
cardBottomInfo.value[0].id = cardList1.value[cardShowIndex1.value].id;
cardBottomInfo.value[0].title = cardList1.value[cardShowIndex1.value].title;
cardBottomInfo.value[0].date = cardList1.value[cardShowIndex1.value].date;
} else {
cardShowIndex1.value = 0;
cardBottomInfo.value[0].type = cardList1.value[cardShowIndex1.value].type;
cardBottomInfo.value[0].id = cardList1.value[cardShowIndex1.value].id;
cardBottomInfo.value[0].title = cardList1.value[cardShowIndex1.value].title;
cardBottomInfo.value[0].date = cardList1.value[cardShowIndex1.value].date;
}
}
if (cardList2.value.length) {
if (cardShowIndex2.value < cardList2.value.length - 1) {
cardShowIndex2.value++;
cardBottomInfo.value[1].type = cardList2.value[cardShowIndex2.value].type;
cardBottomInfo.value[1].id = cardList2.value[cardShowIndex2.value].id;
cardBottomInfo.value[1].title = cardList2.value[cardShowIndex2.value].title;
cardBottomInfo.value[1].date = cardList2.value[cardShowIndex2.value].date;
} else {
cardShowIndex2.value = 0;
cardBottomInfo.value[1].id = cardList2.value[0].id;
cardBottomInfo.value[1].type = cardList2.value[0].type;
cardBottomInfo.value[1].title = cardList2.value[0].title;
cardBottomInfo.value[1].date = cardList2.value[0].date;
}
}
if (cardList3.value.length) {
if (cardShowIndex3.value < cardList3.value.length - 1) {
cardShowIndex3.value++;
cardBottomInfo.value[2].type = cardList3.value[cardShowIndex3.value].type;
cardBottomInfo.value[2].id = cardList3.value[cardShowIndex3.value].id;
cardBottomInfo.value[2].title = cardList3.value[cardShowIndex3.value].title;
cardBottomInfo.value[2].date = cardList3.value[cardShowIndex3.value].date;
} else {
cardShowIndex3.value = 0;
cardBottomInfo.value[2].type = cardList3.value[0].type;
cardBottomInfo.value[2].id = cardList3.value[0].id;
cardBottomInfo.value[2].title = cardList3.value[0].title;
cardBottomInfo.value[2].date = cardList3.value[0].date;
}
}
if (cardList4.value.length) {
if (cardShowIndex4.value < cardList4.value.length - 1) {
cardShowIndex4.value++;
cardBottomInfo.value[3].type = cardList4.value[cardShowIndex4.value].type;
cardBottomInfo.value[3].id = cardList4.value[cardShowIndex4.value].id;
cardBottomInfo.value[3].title = cardList4.value[cardShowIndex4.value].title;
cardBottomInfo.value[3].date = cardList4.value[cardShowIndex4.value].date;
} else {
cardShowIndex4.value = 0;
cardBottomInfo.value[3].type = cardList4.value[0].type;
cardBottomInfo.value[3].id = cardList4.value[0].id;
cardBottomInfo.value[3].title = cardList4.value[0].title;
cardBottomInfo.value[3].date = cardList4.value[0].date;
}
}
// console.log('cardBottomInfo',cardBottomInfo.value[0].title);
}, 3000);
timer2 = setInterval(() => {
if (riskSignalActiveIndex.value < warningList.value.length - 1) {
riskSignalActiveIndex.value++;
} else {
riskSignalActiveIndex.value = 0;
}
currentHoveredSignalId.value = warningList.value[riskSignalActiveIndex.value].signalId;
}, 3000);
const scrollInterval = 2000; // 每隔2秒滚动一次
let currentScroll = 0;
......@@ -593,6 +984,8 @@ onMounted(async () => {
});
onUnmounted(() => {
clearInterval(intervalId); // 清除定时器
clearInterval(timer1); // 清除定时器
clearInterval(timer2); // 清除定时器
});
// onBeforeUnmount(() => {
// andleGetLatestRiskUpdates()
......@@ -788,6 +1181,7 @@ onUnmounted(() => {
line-height: 24px;
letter-spacing: 0px;
text-align: left;
cursor: pointer;
.bottm-box-text {
white-space: nowrap;
......@@ -991,6 +1385,7 @@ onUnmounted(() => {
top: 200px;
width: 24px;
height: 48px;
cursor: pointer;
img {
width: 100%;
height: 100%;
......@@ -1003,6 +1398,7 @@ onUnmounted(() => {
top: 200px;
width: 24px;
height: 48px;
cursor: pointer;
img {
width: 100%;
height: 100%;
......
src/views/newsAnalysis/index.vue
浏览文件 @ 5aa089fb
......@@ -26,119 +26,54 @@
<div class="page-content">
<div class="left">
<custom-container style="margin-bottom: 16px" block title="新闻内容" :titleIcon="houseIcon" height="1180px">
<template #header-right>
<div class="page-content-right-switch">
<div class="box1">
<div class="box-header">
<div class="icon"></div>
<div class="title">{{ "新闻内容" }}</div>
<div class="header-right">
<el-switch v-model="highlightEntities" />
高亮实体
</div>
<el-button type="primary" @click="handleToDetail"> 译文 </el-button>
</template>
<template #default>
<!-- 内容区域 - 分三块-->
<!-- <div class="page-content-news-abstract">
<div class="news-abstract-header">
<img src="./assets/images/abstract-header.png" alt="" />
</div>
<div class="news-abstract-content">
{{
" 美国众议院共和党人正在起草一项新提案，以限制美国对中国的投资。此前，参议院已将其纳入国防政策立法中。知情人士向Semafor透露，众议院工作人员希望在11月7日前就该提案达成共识，并将财政部的反馈纳入由肯塔基州共和党众议员安迪·巴尔提出的配套提案中（尽管政府停摆可能推迟这一时间表）。随后，众议员将利用该文本与参议员就最终《国防授权法案》的内容进行协商。此前一届国会中，类似的尝试因北卡罗来纳州前众议员帕特里克·麦克亨利的反对而失败，但本届国会中，“所有人都在共同努力”。知情人士补充说，领导人并不担心此举会剥夺特朗普在周四与中国领导人习近平会谈时的谈判筹码，因为财政部已开始实施类似的指导方针。"
}}
</div>
</div> -->
<div class="page-content-news-artical">
<div class="page-content-news-artical-zn">
{{ newsContentInfo.newsContent }}
<!-- <p>
据<span class="highlight">华盛顿邮报</span>报道，了解谈判情况的知情人士透露，<span
class="highlight"
>美国众议院</span
>、<span class="highlight">共和党人</span
>正在起草一项新的提案，以限制美国对华投资。目前<span class="highlight">参议院</span
>已将其相关法案作为国防政策立法的一部分通过。
</p>
<p>
谈判各方希望能在11月7日前就这项措施的文本达成共识（尽管政府停摆、可能推迟这一日期）。该措施已将财政部的反馈意见纳入<span
class="highlight"
>肯塔基州</span
>、<span class="highlight">共和党众议员</span
><span class="highlight">安迪·巴尔</span>的<span class="highlight">配套提案中</span>。
</p>
<p>
此后，<span class="highlight">国会议员</span
>们将利用这份文本来与参议员进行协商，以决定哪些内容能最终纳入定版的《国防授权法案》中。
</p>
<p>
在上届国会期间，类似的立法尝试曾因<span class="highlight">北卡罗来纳州</span>、<span
class="highlight"
>共和党前众议员</span
><span class="highlight">帕特里克·麦克亨利</span>的反对而失败。但在本届国会中，<span
class="highlight"
>一位知情人士</span
>表示，"现在所有人实际上都在共同努力"。
</p>
<p>
该人士还补充说，领导层并不担心此举会剥夺<span class="highlight">特朗普</span
><span class="highlight">总统</span>的一个谈判工具。
</p> -->
</div>
<div class="page-content-news-artical-en">
<!-- <p class="indented-paragraph">
<span class="highlight">House Republicans</span> are drafting a fresh proposal to curb US
investments in China after the <span class="highlight">Senate</span> passed its bill as
part of defense policy legislation, people familiar with the talks told Semafor.
</p>
<p class="indented-paragraph">
Staff hope to reach consensus on the measure, which incorporates
<span class="highlight">Treasury Department</span> feedback into a companion proposal from
Rep. <span class="highlight">Andy Barr</span>, R-Ky., by
<span class="highlight">Nov. 7</span> (though the shutdown could delay that date).
</p>
<p class="indented-paragraph">
Members will then use that text to negotiate with senators over what makes it into the
final <span class="highlight">National Defense Authorization Act</span>.
</p>
<p class="indented-paragraph">
Last Congress, similar attempts to add language implored amid pushback from former Rep.
<span class="highlight">Patrick McHenry</span>, R-N.C.; this Congress, "everyone's
actually working together" now, one of the people said.
</p>
<p class="indented-paragraph">
They added that leaders are unconcerned about depriving
<span class="highlight">Trump</span> of a negotiating tool in talks with Chinese leader
<span class="highlight">Xi Jinping</span> on Thursday because
<span class="highlight">Treasury</span> is already implementing parallel guidance.
</p> -->
</div>
<div class="box1-main">
<div class="main-header">
<div class="main-header-left">{{ "原文" }}</div>
<div class="main-header-center"></div>
<div class="main-header-right">
<div class="text">{{ "展开" }}</div>
<div class="icon">
<img src="./assets/images/arrow-down.png" alt="" />
</div>
</div>
</div>
<div class="page-content-news-img">
<img :src="newsContentInfo.newsImage" alt="新闻图片">
<!-- <el-image :src="newsContentInfo.newsImage" alt="新闻图片" fit="contain" /> -->
<!-- <el-image :src="newsImg2" alt="新闻图片" fit="contain" />
<el-image :src="newsImg3" alt="新闻图片" fit="contain" /> -->
<div class="main-content">
<!-- {{ newsContentInfo.newsContent }} -->
{{
` 据华盛顿邮报报道，了解谈判情况的知情人士透露，美国众议院 共和党人正在起草一项新的提案，以限制美国对华投资。目前参议院 已将其相关法案作为国防政策立法的一部分通过。
谈判各方希望能在11月7日前就这项措施的文本达成共识（尽管政府停摆 可能推迟这一日期）。该措施已将财政部的反馈意见纳入肯塔基州 共和党众议员安迪·巴尔 的配套提案中。
此后，议员们将利用这份文本来与参议员进行协商，以决定哪些内容能最终纳入定版的《国防授权法案》 中。
在上届国会期间，类似的立法尝试曾因北卡罗来纳州 共和党前众议员帕特里克·麦克亨利 的反对而失败。但在本届国会中，一位知情人士表示，“现在所有人实际上都在共同努力”。
该人士还补充说，领导层并不担心此举会剥夺特朗普 总统的一个谈判工具。`
}}
</div>
</template>
</custom-container>
<div class="main-img-box">
<img :src="newsContentInfo.newsImage" alt="新闻图片" />
</div>
</div>
</div>
</div>
<div class="right">
<custom-container block title="相关新闻" :titleIcon="houseIcon" height="400px">
<template #default>
<div class="box2">
<div class="box-header">
<div class="icon"></div>
<div class="title">{{ "相关新闻" }}</div>
</div>
<div class="box2-main">
<div class="news-list">
<NewsList :list-data="customNewsData" />
</div>
</template>
</custom-container>
</div>
</div>
</div>
</div>
</div>
......@@ -150,16 +85,10 @@ import { useRoute } from "vue-router";
import { getNewsSummary, getNewsContent, getNewsEvent, getRelationNews } from "@/api/news/newsDetail";
import CustomContainer from "@/components/Container/index.vue";
import NewsList from "@/views/exportControl/components/news.vue";
import Graph from "./relation.vue";
import newsImg from "@/assets/images/img-news.png";
import openIcon from "@/assets/images/icon-open.png";
import dotIcon from "@/assets/images/dot.png";
import newsImg1 from "@/assets/images/news-image-1.png";
import newsImg2 from "@/assets/images/news-image-2.png";
import newsImg3 from "@/assets/images/news-image-3.png";
import newsImg4 from "@/assets/images/news-img.png";
const route = useRoute();
const summaryInfo = ref({
......@@ -258,36 +187,7 @@ const handleGetNewsEvent = async () => {
};
// 相关新闻
const customNewsData = ref([
{
image: newsImg4,
title: "市场因结束美国政府关门协议的希望而提振",
time: "",
source: "",
description: "2017-08-30 · Channel NewsAsia..."
},
{
image: newsImg4,
title: "市场因结束美国政府关门协议的希望而提振",
time: "",
source: "",
description: "2017-08-30 · Channel NewsAsia..."
},
{
image: newsImg4,
title: "市场因结束美国政府关门协议的希望而提振",
time: "",
source: "",
description: "2017-08-30 · Channel NewsAsia..."
},
{
image: newsImg4,
title: "市场因结束美国政府关门协议的希望而提振",
time: "",
source: "",
description: "2017-08-30 · Channel NewsAsia..."
}
]);
const customNewsData = ref([]);
const handleGetRelationNews = async () => {
const params = {
newsId: route.query.newsId
......@@ -314,7 +214,6 @@ onMounted(() => {
<style scoped lang="scss">
.page-container {
/* padding: 20px; */
width: 100%;
height: 100%;
overflow: hidden;
......@@ -322,7 +221,10 @@ onMounted(() => {
}
.page-header {
position: sticky;
top: 0;
display: flex;
z-index: 9999;
align-items: center;
justify-content: center;
height: 120px;
......@@ -416,155 +318,130 @@ onMounted(() => {
padding: 20px 160px;
display: flex;
gap: 17px;
.left {
width: 1063px;
}
.right {
width: 520px;
}
&-news-abstract {
height: 260px;
width: 100%;
padding: 10px;
background: linear-gradient(to bottom, rgba(246, 250, 255, 1), rgba(246, 250, 255, 0));
font-size: 16px;
font-weight: 400;
line-height: 30px;
border-radius: 4px;
border: 1px solid rgba(246, 250, 255, 1);
text-indent: 2em;
.news-abstract-header {
margin-top: 6px;
width: 135px;
height: 32px;
img {
width: 100%;
height: 100%;
}
.box-header {
height: 50px;
display: flex;
position: relative;
.icon {
margin-top: 18px;
width: 8px;
height: 20px;
border-radius: 0 4px 4px 0;
background: var(--color-main-active);
}
.news-abstract-content {
margin-top: 16px;
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 30px;
.title {
margin-top: 14px;
margin-left: 14px;
height: 26px;
color: var(--color-main-active);
font-family: Source Han Sans CN;
font-style: Bold;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: justify;
}
}
&-news-artical {
// height: 480px;
margin-top: 16px;
line-height: 1.8;
color: #303133;
// display: flex;
// align-items: flex-start;
// justify-content: space-between;
gap: 25px;
&-zn,
&-en {
width: 100%;
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
}
p {
text-align: justify;
text-indent: 2em; /* 段落开头缩进2个字符 */
margin-bottom: -1px;
line-height: 28px;
text-align: left;
}
.highlight {
color: rgba(5, 95, 194, 1); /* 指定的蓝色高亮 */
font-weight: 500;
.header-right {
position: absolute;
top: 18px;
right: 37px;
}
}
&-news-img {
height: 370px;
// border-top: 1px solid rgba(234, 236, 238, 1);
padding: 15px 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
overflow: hidden;
overflow-y: auto;
img{
height: 100%;
width: auto;
}
}
.box4 {
.box4-item {
display: flex;
gap: 10px;
align-items: flex-start;
padding-bottom: 30px;
.box4-item-left {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 8px;
position: relative;
.box4-item-left-icon {
width: 10px;
height: 10px;
}
.box4-item-left-line {
width: 1px;
height: 120px;
position: absolute;
top: 15px;
border-left: 1px solid rgba(10, 87, 166, 0.3);
}
}
.box4-item-right {
display: flex;
flex-direction: column;
gap: 5px;
.box4-item-right-header {
.left {
width: 1063px;
.box1 {
width: 1063px;
height: 865px;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
background: rgba(255, 255, 255, 1);
.box1-main {
width: 992px;
margin: 0 auto;
.main-header {
width: 992px;
margin-top: 22px;
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 12px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
&-title {
width: 60%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 16px;
height: 24px;
.main-header-left {
width: 36px;
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: left;
}
&-desc {
font-size: 14px;
font-weight: 400;
color: rgba(95, 101, 108, 1);
.main-header-center {
margin-left: 12px;
width: 878px;
height: 1px;
background: rgba(234, 236, 238, 1);
}
.main-header-right {
display: flex;
gap: 12px;
margin-left: 12px;
.text {
width: 32px;
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;
}
.icon {
width: 10px;
height: 5px;
img {
width: 100%;
height: 100%;
}
}
}
}
.box4-item-right-content {
// margin-top: 10px;
.main-content {
margin-top: 22px;
font-family: Source Han Sans CN;
font-style: Regular;
font-size: 16px;
color: rgb(59, 65, 75);
font-weight: 400;
color: rgba(95, 101, 108, 1);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
height: 48px;
line-height: 24px;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
}
.main-img-box {
margin-top: 30px;
display: flex;
justify-content: center;
flex-wrap: wrap;
img {
height: 240px;
width: auto;
}
}
}
}
}
.right {
width: 520px;
.box2 {
width: 520px;
height: 400px;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
background: rgba(255, 255, 255, 1);
}
}
}
</style>
src/views/newsAnalysis/relation.vue deleted 100644 → 0
浏览文件 @ 08966e42
<!-- src/components/HuaweiSupplyChainChart.vue -->
<template>
<div class="chart-container" ref="chartRef"></div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
// import { graphData } from "./mockData";
import Img from "./assets/images/img.png";
import Img1 from "./assets/images/img1.png";
import Img2 from "./assets/images/img2.png";
import Img3 from "./assets/images/img3.png";
import Img4 from "./assets/images/img4.png";
import Img5 from "./assets/images/img5.png";
import Img6 from "./assets/images/img6.png";
import Img7 from "./assets/images/img7.png";
import Img8 from "./assets/images/img8.png";
const graphData = {
nodes: [
{ id: "huawei", name: "美国众议院", category: 0, symbolSize: 60, symbol: `image://${Img}` },
{ id: "foxconn", name: "唐纳德·特朗普", category: 1, symbolSize: 42, symbol: `image://${Img1}` },
{ id: "huawei-cloud", name: "约翰·斯奎尔斯", category: 2, symbolSize: 42, symbol: `image://${Img2}` },
{ id: "huawei-digital-energy", name: "马尔科·卢比奥", category: 2, symbolSize: 42, symbol: `image://${Img3}` },
{ id: "huawei-intelligent-car", name: "埃隆·马斯克", category: 2, symbolSize: 42, symbol: `image://${Img4}` },
{ id: "qualcomm", name: "道格·伯格姆", category: 2, symbolSize: 42, symbol: `image://${Img5}` },
{ id: "intel", name: "斯科特·贝森特", category: 2, symbolSize: 42, symbol: `image://${Img6}` },
{ id: "mediatek", name: "杰弗里·凯斯勒", category: 2, symbolSize: 42, symbol: `image://${Img7}` },
{ id: "shenghongda", name: "杰弗里·凯德勒", category: 2, symbolSize: 42, symbol: `image://${Img8}` }
// { id: "luxshare", name: "立讯精密", category: 1, symbolSize: 20 },
// { id: "tianma", name: "天马微电子", category: 1, symbolSize: 20 },
// { id: "desay", name: "德赛电池", category: 1, symbolSize: 20 },
// { id: "auspicious-sound", name: "瑞声科技", category: 1, symbolSize: 20 },
// { id: "goertek", name: "歌尔股份", category: 1, symbolSize: 20 },
// { id: "sony-semiconductor", name: "索尼半导体", category: 1, symbolSize: 20 },
// { id: "ibm", name: "IBM", category: 1, symbolSize: 20 },
// { id: "lg-innotek", name: "LG伊诺特", category: 1, symbolSize: 20 },
// { id: "micron", name: "美光科技", category: 1, symbolSize: 20 }
// { id: "nokia", name: "诺基亚", category: 1, symbolSize: 20 },
// { id: "google", name: "谷歌", category: 1, symbolSize: 20 },
// { id: "vodafone", name: "沃达丰", category: 1, symbolSize: 20 },
// { id: "microsoft", name: "微软", category: 1, symbolSize: 20 },
// { id: "china-unicom", name: "中国联通", category: 1, symbolSize: 20 },
// { id: "china-mobile", name: "中国移动", category: 1, symbolSize: 20 },
// { id: "tsmc", name: "台积电", category: 1, symbolSize: 20 }
// { id: "orange", name: "Orange", category: 1, symbolSize: 20 },
// { id: "germany-telecom", name: "德国电信", category: 1, symbolSize: 20 },
// { id: "byd-electronics", name: "比亚迪电子", category: 1, symbolSize: 20 },
// { id: "boe", name: "京东方", category: 1, symbolSize: 20 },
// { id: "dali-optical", name: "大力光", category: 1, symbolSize: 20 },
// { id: "lg-display", name: "LG显示", category: 1, symbolSize: 20 },
// { id: "sunny-optical", name: "舜宇光学", category: 1, symbolSize: 20 }
],
links: [
{ source: "huawei", target: "huawei-cloud" },
{ source: "huawei", target: "huawei-digital-energy" },
{ source: "huawei", target: "huawei-intelligent-car" },
{ source: "huawei", target: "qualcomm" },
{ source: "huawei", target: "intel" },
{ source: "huawei", target: "mediatek" },
{ source: "huawei", target: "shenghongda" },
{ source: "huawei", target: "foxconn" }
// { source: "huawei", target: "luxshare" },
// { source: "huawei", target: "tianma" },
// { source: "huawei", target: "desay" },
// { source: "huawei", target: "auspicious-sound" },
// { source: "huawei", target: "goertek" },
// { source: "huawei", target: "sony-semiconductor" },
// { source: "huawei", target: "ibm" },
// { source: "huawei", target: "lg-innotek" },
// { source: "huawei", target: "micron" }
// { source: "huawei", target: "nokia" },
// { source: "huawei", target: "google" },
// { source: "huawei", target: "vodafone" },
// { source: "huawei", target: "microsoft" },
// { source: "huawei", target: "china-unicom" },
// { source: "huawei", target: "china-mobile" },
// { source: "huawei", target: "tsmc" }
// { source: "huawei", target: "orange" },
// { source: "huawei", target: "germany-telecom" },
// { source: "huawei", target: "byd-electronics" },
// { source: "huawei", target: "boe" },
// { source: "huawei", target: "dali-optical" },
// { source: "huawei", target: "lg-display" },
// { source: "huawei", target: "sunny-optical" }
],
categories: [{ name: "子业务" }, { name: "合作商" }]
};
const chartRef = ref(null);
onMounted(() => {
const chart = echarts.init(chartRef.value);
const option = {
title: { text: "", left: "center" },
tooltip: {},
// legend: {
// data: graphData.categories.map(item => item.name),
// left: "left"
// },
series: [
{
type: "graph",
layout: "force", // 力导向布局
force: {
repulsion: 1000, // 节点排斥力
edgeLength: [50, 200] // 边长度范围
},
data: graphData.nodes,
links: graphData.links,
categories: graphData.categories,
roam: true, // 支持缩放、平移
label: {
show: true,
fontSize: 14,
position: "bottom",
formatter: function (params) {
// 根据条件返回不同样式的文本
if (params.data.category === 0) {
return `{a|${params.name}}`; // 使用富文本样式
} else if (params.data.category === 1) {
return `{b|${params.name}}`;
} else {
return params.name; // 默认样式
}
},
rich: {
a: {
// 重要节点的样式
color: "#000",
fontSize: 18,
fontWeight: "bold",
padding: [2, 4],
borderRadius: 2
},
b: {
// 普通节点的样式
color: "rgba(5, 95, 194, 1)",
fontSize: 14,
}
}
},
edgeSymbol: ["arrow", "none"], // 边的箭头
edgeSymbolSize: [8, 50],
itemStyle: {
color: "rgba(5, 95, 194, 1)"
// borderColor: "red",
// borderWidth: 1
},
lineStyle: {
color: "rgba(174, 214, 255, 1)",
width: 2,
opacity: 0.5
},
emphasis: {
focus: "adjacency",
lineStyle: {
width: 2
}
}
}
]
};
chart.setOption(option);
// 窗口resize时自适应
window.addEventListener("resize", () => chart.resize());
});
</script>
<style scoped>
.chart-container {
width: 100%;
height: 430px;
margin: 0 auto;
background-color: #f7f8f9; /* 深色背景，模拟原图风格 */
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论