Skip to content

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

update

上级 8f982b4d
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 570 行增加 和 254 行删除
src/api/decree/home.js
浏览文件 @ 1c65be4e
......@@ -25,10 +25,11 @@ export function getDecreeRiskSignal() {
}
// 行政令发布频度
export function getDecreeYearOrder() {
export function getDecreeYearOrder(params) {
return request({
method: 'GET',
url: `/api/administrativeOrderOverview/yearOrder`,
url: `/api/administrativeOrderOverview/yearOrder/${params.year}`,
params
})
}
......
src/api/news/newsBrief.js
浏览文件 @ 1c65be4e
import request from "@/api/request.js";
// 今日要闻
export function getTodayNew() {
export function getTodayNews() {
return request({
method: 'GET',
url: `/api/news/latestNews`,
......@@ -28,7 +28,7 @@ export function getHotNews() {
})
}
// 今日要闻-带参
// 中美博弈专题-带参
/**
* @param {industryId}
*/
......@@ -39,3 +39,19 @@ export function getHotNewsByArea(params) {
params
})
}
// 获取模块类别
export function getMoudleType() {
return request({
method: 'GET',
url: `/api/commonDict/moduleType`,
})
}
// 获取领域列表
export function getAreaList() {
return request({
method: 'GET',
url: `/api/commonDict/areaType`,
})
}
\ No newline at end of file
src/api/riskSignal/index.js 0 → 100644
浏览文件 @ 1c65be4e
import request from "@/api/request.js";
// 基本统计信息
export function getCountInfo() {
return request({
method: 'GET',
url: `/api/riskSignal/getCountInfo`,
})
}
// 每日统计信息
export function getDailyCount() {
return request({
method: 'GET',
url: `/api/riskSignal/getDailyCount`,
})
}
// 按条件分页查询风险信号信息
export function getPageQuery(data) {
return request({
method: 'POST',
url: `/api/riskSignal/pageQuery`,
data: data
})
}
src/views/comprehensiveSearch/chat/index.vue
浏览文件 @ 1c65be4e
......@@ -58,7 +58,7 @@
class="source-item"
v-for="(item, index) in message.source"
:key="index"
v-html="item"
v-html="renderMarkdown(item)"
></div>
</div>
<div v-if="message.content" class="answer-title">正文内容</div>
......@@ -71,7 +71,8 @@
<!-- 用户消息 -->
<div v-else class="user-item">
<div class="user-bubble">
<div class="user-content">{{ message.content }}</div>
<!-- <div class="user-content">{{ message.content }}</div> -->
<div class="user-content" v-html="renderMarkdown(message.content)"></div>
</div>
</div>
</div>
......@@ -726,7 +727,7 @@ const sendMessage = async () => {
}
userInput.value = "";
aiMessage.value = ""
aiMessage.value = "";
if (curArea.value === "法案") {
await connectSSE(question);
} else {
......
src/views/decree/decreeHome/index.vue
浏览文件 @ 1c65be4e
......@@ -242,9 +242,14 @@
</div>
</div>
<div class="box3-main">
<div class="box3-item" v-for="(news, index) in newsList" :key="index" @click="handleToNewsAnalysis(news)">
<div
class="box3-item"
v-for="(news, index) in newsList"
:key="index"
@click="handleToNewsAnalysis(news)"
>
<div class="left">
<img :src="news.img" alt="" />
<img :src="news.img ? news.img : DefaultIconNews" alt="" />
</div>
<div class="right">
<div class="right-top">
......@@ -266,7 +271,7 @@
<div class="box4-main">
<div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
<div class="left" @click="handleClickPerson()">
<img :src="item.img" alt="" />
<img :src="item.img ? item.img : DefaultIcon1" alt="" />
</div>
<div class="right">
<div class="right-top">
......@@ -290,7 +295,25 @@
<div class="box5-header-title">{{ "行政令发布频度" }}</div>
</div>
</div>
<div class="box5-main" id="chart1"></div>
<div class="box5-main">
<div class="box5-chart" id="chart1"></div>
<div class="box5-selectbox">
<el-select
@change="handleBox5YearChange"
v-model="box5SelectedYear"
placeholder="选择时间"
style="width: 80px"
>
<el-option
v-for="item in box5YearList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</div>
</div>
<div class="box6">
<div class="box6-header">
......@@ -341,17 +364,6 @@
<div class="home-main-footer">
<DivideHeader id="position4" class="divide4" :titleText="'资源库'"></DivideHeader>
<div class="home-main-footer-header">
<div class="btn-box">
<div
class="btn"
:class="{ btnActive: activeCate === cate.id }"
v-for="(cate, index) in categoryList"
:key="index"
@click="handleClickCate(cate)"
>
{{ cate.name }}
</div>
</div>
<div class="select-box">
<div class="paixu-btn" @click="handleSwithSort">
<div class="icon1">
......@@ -368,6 +380,27 @@
</div>
<div class="home-main-footer-main">
<div class="left">
<div class="select-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "发布机构" }}</div>
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox
v-for="cate in govInsList"
:key="cate.id"
v-model="checkedGovIns"
:label="cate.name"
style="width: 180px"
class="filter-checkbox"
@change="handleChangeCheckedGovIns"
>
{{ cate.name }}
</el-checkbox>
</div>
</div>
</div>
<div class="select-box">
<div class="select-box-header">
<div class="icon"></div>
......@@ -505,6 +538,7 @@ import setChart from "@/utils/setChart";
import DefaultIcon1 from "@/assets/icons/default-icon1.png";
import DefaultIcon2 from "@/assets/icons/default-icon2.png";
import DefaultIconNews from "@/assets/icons/default-icon-news.png";
import p1 from "./assets/images/iconp1.png";
import p2 from "./assets/images/iconp2.png";
......@@ -575,39 +609,15 @@ const govInsList = ref([
// img: Gov2,
// name: "美国财政部"
// },
// {
// img: Gov3,
// name: "美国能源部"
// },
// {
// img: Gov4,
// name: "美国商务部"
// },
// {
// img: Gov5,
// name: "美国战争部"
// },
// {
// img: Gov6,
// name: "联邦通信委员会 "
// },
// {
// img: Gov7,
// name: "食品药品监督管理局 (FDA)"
// },
// {
// img: Gov8,
// name: "美国航空航天局 (NASA)"
// },
// {
// img: Gov9,
// name: "美国国家卫生基金会 (NSF)"
// },
// {
// img: Gov10,
// name: "美国国立卫生研究院 (NIH)"
// }
]);
const checkedGovIns = ref(['白宫'])
const handleChangeCheckedGovIns = (val) => {
}
const handleGetDepartmentList = async () => {
try {
const res = await getDepartmentList();
......@@ -782,15 +792,13 @@ const handleGetNews = async () => {
};
handleGetNews();
// 点击新闻条目，跳转到新闻分析页
const handleToNewsAnalysis = (news) => {
const route = router.resolve(
{
const handleToNewsAnalysis = news => {
const route = router.resolve({
path: "/newsAnalysis",
query: {
newsId: news.newsId
}
}
);
});
window.open(route.href, "_blank");
};
......@@ -844,27 +852,54 @@ const chart1Data = ref({
dataY: []
});
const box5YearList = ref([
{
label: "2025",
value: "2025"
},
{
label: "2024",
value: "2024"
},
{
label: "2023",
value: "2023"
},
{
label: "2022",
value: "2022"
},
{
label: "2021",
value: "2021"
}
]);
const box5SelectedYear = ref("2025");
const handleGetDecreeYearOrder = async () => {
const params = {
year: box5SelectedYear.value
};
try {
const res = await getDecreeYearOrder();
const res = await getDecreeYearOrder(params);
console.log("行政令发布频度", res);
if (res.code === 200 && res.data) {
chart1Data.value.dataX = res.data
.map(item => {
chart1Data.value.dataX = res.data.map(item => {
return item.year;
})
.reverse();
chart1Data.value.dataY = res.data
.map(item => {
});
chart1Data.value.dataY = res.data.map(item => {
return item.count;
})
.reverse();
});
}
} catch (error) {
console.error("行政令发布频度error", error);
}
};
const handleBox5YearChange = val => {
handleBox5();
};
const handleBox5 = async () => {
await handleGetDecreeYearOrder();
let chart1 = getBarChart(chart1Data.value.dataX, chart1Data.value.dataY);
......@@ -977,19 +1012,6 @@ const handleSwithSort = () => {
isSort.value = !isSort.value;
};
const categoryList = computed(() => {
let obj = {
name: "全部分类",
id: "",
img: ""
};
return [obj, ...govInsList.value];
});
const activeCate = ref("白宫");
const handleClickCate = cate => {
activeCate.value = cate.id;
};
const handleToPosi = id => {
// 0 618 1240 2350
......@@ -1066,12 +1088,13 @@ const decreeList = ref([
]);
const handleGetDecreeOrderList = async () => {
const p0 = checkedGovIns.value.join(',')
const p1 = activeAreaList.value.join(",");
const p2 = activePubTime.value.join(",");
const params = {
currentPage: 0,
pageSize: 999999,
proposeName: activeCate.value,
proposeName: p0,
researchTypeIds: p1,
sortFun: isSort.value,
years: p2
......@@ -1123,18 +1146,19 @@ watch(
);
watch(
() => activeCate.value,
() => isSort.value,
val => {
handleGetDecreeOrderList();
}
);
watch(
() => isSort.value,
() => checkedGovIns.value,
val => {
handleGetDecreeOrderList();
}
);
)
// 切换当前政令
const handleSwithCurDecree = name => {
......@@ -2545,6 +2569,15 @@ onMounted(async () => {
}
.box5-main {
height: 397px;
position: relative;
.box5-selectbox {
position: absolute;
right: 10px;
top: 10px;
}
.box5-chart {
height: 397px;
}
}
}
.box6 {
......@@ -2755,10 +2788,10 @@ onMounted(async () => {
}
.home-main-footer-header {
width: 1600px;
height: 70px;
margin: 36px auto 16px;
height: 50px;
margin: 0 auto 16px;
display: flex;
justify-content: space-between;
justify-content: flex-end;
.btn-box {
margin-top: 10px;
width: 1450px;
......@@ -2853,7 +2886,7 @@ onMounted(async () => {
gap: 16px;
.left {
width: 300px;
height: 666px;
// height: 666px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
box-sizing: border-box;
......@@ -3045,7 +3078,7 @@ onMounted(async () => {
.footer-box {
margin: 0 30px;
height: 32px;
margin-top: 30px;
margin-top: 20px;
display: flex;
justify-content: space-between;
.footer-left {
......
src/views/decree/decreeHome/utils/barChart.js
浏览文件 @ 1c65be4e
......@@ -4,7 +4,7 @@ const getBarChart = (nameList, valueList) => {
const option = {
tooltip: {},
grid: {
top: '3%',
top: '8%',
right: '3%',
bottom: '3%',
left: '3%',
......
src/views/decree/decreeHome/utils/piechart.js
浏览文件 @ 1c65be4e
......@@ -13,7 +13,7 @@ const getPieChart = (data) => {
},
label: {
alignTo: 'edge',
formatter: '{name|{b}}\n{time|{c} 条 {d}%}',
formatter: '{name|{b}}\n{time|{d}%}',
minMargin: 5,
edgeDistance: 10,
lineHeight: 24,
......
src/views/decree/decreeLayout/overview/background/index.vue
浏览文件 @ 1c65be4e
......@@ -66,9 +66,9 @@
<div class="item-right">{{ item.time }}</div>
</div>
</div>
<div class="box2-footer">
<!-- <div class="box2-footer">
<img src="./assets/images/more-icon.png" alt="" />
</div>
</div> -->
</div>
</div>
<div class="right">
......@@ -368,8 +368,10 @@ onMounted(() => {
.box2-main {
margin-top: 3px;
margin-left: 31px;
height: 310px;
height: 330px;
width: 1090px;
overflow: hidden;
overflow-y: auto;
.box2-item {
display: flex;
height: 60px;
......@@ -420,16 +422,16 @@ onMounted(() => {
}
}
}
.box2-footer {
margin: 5px auto 0;
width: 108px;
height: 32px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
// .box2-footer {
// margin: 5px auto 0;
// width: 108px;
// height: 32px;
// cursor: pointer;
// img {
// width: 100%;
// height: 100%;
// }
// }
}
}
.right {
......
src/views/decree/decreeLayout/overview/introduction/index.vue
浏览文件 @ 1c65be4e
......@@ -297,7 +297,7 @@ const handleClickBox3Btn = (btn, index) => {
eventList.value = box3Data.value[index].newsList.map(val => {
return {
time: val.newsDate,
title: newsTitle
title: val.newsTitle
};
});
};
......@@ -352,7 +352,7 @@ const handleGetOrgnization = async () => {
eventList.value = res.data[0].newsList.map(val => {
return {
time: val.newsDate,
title: newsTitle
title: val.newsTitle
};
});
} else {
......@@ -382,7 +382,12 @@ const handleGetOrgnization = async () => {
eventList.value = [];
}
};
onMounted(() => {
handleGetOrgnization();
})
</script>
<style lang="scss" scoped>
......@@ -545,13 +550,16 @@ handleGetOrgnization();
color: #0a57a6;
}
.title {
width: 1000px;
width: 1020px;
line-height: 48px;
margin-left: 13px;
margin-left: 5px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.open {
width: 16px;
......
src/views/newsAnalysis/index.vue
浏览文件 @ 1c65be4e
......@@ -2,14 +2,15 @@
<div class="page-container">
<div class="page-header">
<div class="page-header-left">
<el-image :src="newsImg" alt="新闻" class="page-header-left-img"></el-image>
<el-image :src="summaryInfo.newsImg" alt="新闻" class="page-header-left-img"></el-image>
<div class="page-header-left-top">
<div class="page-header-left-top-title">众议院共和党人起草新的中国投资限制</div>
<div class="page-header-left-top-en">House Republicans draft new China investment curbs</div>
<div class="page-header-left-top-title">{{ summaryInfo.newsTitle }}</div>
<div class="page-header-left-top-en">{{ summaryInfo.newsETitle }}</div>
<div class="page-header-left-top-desc">
2025年11月11日 10:33 · 福克斯新闻网
<el-tag type="primary">生物科技</el-tag>
<el-tag type="primary">人工智能</el-tag>
<div class="text">{{ summaryInfo.newsDateTime }} · {{ summaryInfo.newsOrg }}</div>
<div class="tag-box">
<div class="tag" v-for="(tag, index) in summaryInfo.industryList" :key="index">{{ tag }}</div>
</div>
</div>
</div>
</div>
......@@ -168,7 +169,9 @@
</template>
<script setup>
import { ref } from "vue";
import { ref, onMounted } from "vue";
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";
......@@ -179,15 +182,66 @@ 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({
newsImg: "",
newsTitle: "",
newsETitle: "",
newsDateTime: "",
newsOrg: "",
industryList: [],
newsSrc: "",
newsId: ""
});
const handleGetNewsSummary = async () => {
const params = {
newsId: route.query.newsId
};
try {
const res = await getNewsSummary(params);
console.log("新闻全局信息", res);
if (res.code === 200 && res.data) {
summaryInfo.value = res.data;
summaryInfo.value.newsDateTime = summaryInfo.value.newsDateTime.replace("T", " ");
}
} catch (error) {}
};
const highlightEntities = ref(false);
const handleToDetail = () => {
// window.open("https://www.foxnews.com/technology/house-republicans-draft-new-china-investment-curbs");
};
// 历次制裁过程
// 新闻内容
const newsContentInfo = ref({
newsId: "",
newsDate: "",
newsContent: "",
newsTitle: "",
newsOrg: "",
newsImage: ""
})
const handleGetNewsContent = async () => {
const params = {
newsId: route.query.newsId
}
try {
const res = await getNewsContent(params)
console.log('新闻内容', res);
if(res.code === 200 && res.data) {
newsContentInfo.value = res.data
}
} catch (error) {
}
}
// 事件脉络
const sanctionProcessList = ref([
{
title: "减税与就业法案的出台与立法博弈",
......@@ -215,7 +269,23 @@ const sanctionProcessList = ref([
content: "法案通过恰逢美国对多国“90天关税暂缓期”即将到期（2025年7月9日）。欧盟、..."
}
]);
const handleGetNewsEvent = async () => {
const params = {
newsId: route.query.newsId
};
try {
const res = await getNewsEvent(params);
console.log("事件脉络", res);
if (res.code === 200 && res.data) {
} else {
sanctionProcessList.value = [];
}
} catch (error) {
sanctionProcessList.value = [];
}
};
// 相关新闻
const customNewsData = ref([
{
image: newsImg4,
......@@ -246,6 +316,28 @@ const customNewsData = ref([
description: "2017-08-30 · Channel NewsAsia..."
}
]);
const handleGetRelationNews = async () => {
const params = {
newsId: route.query.newsId
};
try {
const res = await getRelationNews(params);
console.log("相关新闻", res);
if (res.code === 200 && res.data) {
} else {
customNewsData.value = [];
}
} catch (error) {
customNewsData.value = [];
}
};
onMounted(() => {
handleGetNewsSummary();
handleGetNewsContent()
handleGetNewsEvent();
handleGetRelationNews();
});
</script>
<style scoped lang="scss">
......@@ -280,25 +372,59 @@ const customNewsData = ref([
justify-content: flex-start;
gap: 5px;
&-title {
color: rgba(59, 65, 75, 1);
height: 32px;
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 24px;
font-weight: 700;
// margin-bottom: 10px;
color: rgba(59, 65, 75, 1);
line-height: 32px;
letter-spacing: 0px;
text-align: left;
}
&-en {
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
// margin-bottom: 10px;
color: rgba(59, 65, 75, 1);
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
&-desc {
height: 24px;
display: flex;
gap: 12px;
.text {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
color: rgba(95, 101, 108, 1);
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.tag-box {
height: 24px;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
gap: 4px;
.tag {
height: 24px;
line-height: 24px;
padding: 0 8px;
border-radius: 4px;
background: rgba(231, 243, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
}
}
}
}
}
......
src/views/newsBrief/Headlines.vue
浏览文件 @ 1c65be4e
......@@ -13,13 +13,13 @@
<div class="main">
<div class="main-header">
<div
v-for="(item, index) in btnList"
v-for="(item, index) in areaList"
:key="index"
class="header-btn"
:class="{ headerBtnSelect: btnSelect === item }"
@click="changeBtn(item)"
:class="{ headerBtnSelect: areaActive === item.id }"
@click="changeModule(item)"
>
{{ item }}
{{ item.name }}
</div>
</div>
<div class="content-box">
......@@ -46,56 +46,76 @@
</template>
<script setup>
import { ref } from "vue";
import Index from "../innovationSubject/index.vue";
import { ref, onMounted } from "vue";
import { getAreaList, getTodayNewByArea } from "@/api/news/newsBrief";
import { ElMessage } from "element-plus";
const btnList = ref(["全部", "军事", "政治", "经济", "科技", "涉我"]);
const btnSelect = ref("全部");
const HeadlinesData = ref([
{
title: "黎巴嫩真主党指责美国破坏黎稳定 谴责以色列“蓄意挑衅”",
from: "人民网",
time: "2025-10-05",
tag: ["以色列", "美国"],
image: "/testData/HeadlinesData-img.png"
},
{
title: "IMF上调中东和北非地区经济增长预期",
from: "CNN",
time: "2025-10-05",
tag: ["经济", "中东", "IMF"],
image: "/testData/HeadlinesData-img.png"
},
{
title: "日本外务省亚洲大洋洲局局长金井正彰启程访华 预计18日与中方会面",
from: "人民网",
time: "2025-10-05",
tag: ["日本", "访华"],
image: "/testData/HeadlinesData-img.png"
},
{
title: "韩日因独岛主权争议暂停本月联合搜救演习",
from: "凤凰网",
time: "2025-10-05",
tag: ["独岛", "联合军演", "韩国", "日本"],
image: "/testData/HeadlinesData-img.png"
},
{
title: "美“福特”号航母抵达加勒比海 于委内瑞拉附近展开大规模军事集结",
from: "央视网",
time: "2025-10-05",
tag: ["美国", "航母", "加勒比海"],
image: "/testData/HeadlinesData-img.png"
// 模块类别
const areaList = ref([]);
const areaActive = ref("");
const handleGetTodayNewsByArea = async () => {
const params = {
industryId: areaActive.value
};
try {
const res = await getTodayNewByArea(params);
console.log("领域今日要闻", res);
if (res.code === 200 && res.data) {
HeadlinesData.value = res.data;
} else {
ElMessage.error(res.message);
HeadlinesData.value = [];
}
} catch (error) {
HeadlinesData.value = [];
}
};
const handleGetModuleList = async () => {
try {
const res = await getAreaList();
console.log("领域列表", res);
if (res.code === 200 && res.data) {
areaList.value = res.data;
areaActive.value = areaList.value[0].id;
handleGetTodayNewsByArea();
}
} catch (error) {}
};
const HeadlinesData = ref([
// {
// title: "黎巴嫩真主党指责美国破坏黎稳定 谴责以色列“蓄意挑衅”",
// from: "人民网",
// time: "2025-10-05",
// tag: ["以色列", "美国"],
// image: "/testData/HeadlinesData-img.png"
// },
// {
// title: "IMF上调中东和北非地区经济增长预期",
// from: "CNN",
// time: "2025-10-05",
// tag: ["经济", "中东", "IMF"],
// image: "/testData/HeadlinesData-img.png"
// }
]);
function changeBtn(btn) {
btnSelect.value = btn;
function changeModule(btn) {
areaActive.value = btn.id;
handleGetTodayNewsByArea();
}
const emit = defineEmits(["back"]);
function back() {
emit("back", "home");
}
onMounted(() => {
handleGetModuleList();
});
</script>
<style lang="scss" scoped>
// @import url("./style.css");
......@@ -180,8 +200,9 @@ function back() {
border-radius: 10px;
background: rgba(255, 255, 255, 0.8);
.main-header {
height: 64px;
// height: 64px;
display: flex;
flex-wrap: wrap;
gap: 16px;
padding-top: 24px;
padding-left: 24px;
......@@ -190,6 +211,7 @@ function back() {
line-height: 40px;
padding: 0 20px;
border-radius: 32px;
border: 1px solid rgba(32, 33, 35, 0.07);
background: rgba(32, 33, 35, 0.07);
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
......@@ -197,6 +219,7 @@ function back() {
font-weight: 400;
letter-spacing: 0px;
text-align: center;
cursor: pointer;
}
.headerBtnSelect {
box-sizing: border-box;
......
src/views/newsBrief/Subject.vue
浏览文件 @ 1c65be4e
......@@ -13,31 +13,32 @@
<div class="main">
<div class="main-header">
<div
v-for="(item, index) in btnList"
v-for="(item, index) in areaList"
:key="index"
class="header-btn"
:class="{ headerBtnSelect: btnSelect === item }"
@click="changeBtn(item)"
:class="{ headerBtnSelect: moduleActive === item.id }"
@click="changeArea(item)"
>
{{ item }}
{{ item.name }}
</div>
</div>
<div class="content-box">
<div class="item" v-for="(item, index) in HeadlinesData" :key="index">
<div class="item-left">
<div class="title">{{ item.title }}</div>
<div class="title">{{ item.newsTitle }}</div>
<div class="content">
<div class="source">新闻来源： {{ item.from }}</div>
<div class="time">发表时间：{{ item.time }}</div>
<div class="source">新闻来源： {{ item.newsOrg }}</div>
<div class="time">发表时间：{{ item.newsDate }}</div>
</div>
<div class="tag-box">
<div v-for="(tag, index) in item.tag" class="tag" :key="index">
<div v-for="(tag, index) in item.industryList" class="tag" :key="index">
{{ tag }}
</div>
</div>
</div>
<div class="item-right">
<img :src="`src/assets/icons/arrow-${item.arrow}.png`" />
<img v-if="item.hot" :src="`src/assets/icons/arrow-0.png`" />
<img v-else :src="`src/assets/icons/arrow-1.png`" />
</div>
</div>
</div>
......@@ -46,55 +47,75 @@
</template>
<script setup>
import { ref } from "vue";
import { ref, onMounted } from "vue";
import { getAreaList, getHotNewsByArea } from "@/api/news/newsBrief";
import { ElMessage } from "element-plus";
const btnList = ref(["全部", "军事", "政治", "经济", "敌我"]);
const btnSelect = ref("新闻纵览");
const HeadlinesData = ref([
{
title: "黎巴嫩真主党指责美国破坏黎稳定 谴责以色列“蓄意挑衅”",
from: "人民网",
time: "2025-10-05",
tag: ["以色列", "美国"],
arrow: "0"
},
{
title: "IMF上调中东和北非地区经济增长预期",
from: "CNN",
time: "2025-10-05",
tag: ["经济", "中东", "IMF"],
arrow: "1"
},
{
title: "日本外务省亚洲大洋洲局局长金井正彰启程访华 预计18日与中方会面",
from: "人民网",
time: "2025-10-05",
tag: ["日本", "访华"],
arrow: "1"
},
{
title: "韩日因独岛主权争议暂停本月联合搜救演习",
from: "凤凰网",
time: "2025-10-05",
tag: ["独岛", "联合军演", "韩国", "日本"],
arrow: "0"
},
{
title: "美“福特”号航母抵达加勒比海 于委内瑞拉附近展开大规模军事集结",
from: "央视网",
time: "2025-10-05",
tag: ["美国", "航母", "加勒比海"],
arrow: "0"
// 模块类别
const areaList = ref([]);
const moduleActive = ref("");
const handleGetHotNewsByArea = async () => {
const params = {
industryId: moduleActive.value
};
try {
const res = await getHotNewsByArea(params);
console.log("领域中美博弈专题", res);
if (res.code === 200 && res.data) {
HeadlinesData.value = res.data;
} else {
ElMessage.error(res.message);
HeadlinesData.value = [];
}
} catch (error) {
HeadlinesData.value = [];
}
};
const handleGetModuleList = async () => {
try {
const res = await getAreaList();
console.log("领域列表", res);
if (res.code === 200 && res.data) {
areaList.value = res.data;
moduleActive.value = areaList.value[0].id;
handleGetHotNewsByArea();
}
} catch (error) {}
};
const HeadlinesData = ref([
// {
// title: "黎巴嫩真主党指责美国破坏黎稳定 谴责以色列“蓄意挑衅”",
// from: "人民网",
// time: "2025-10-05",
// tag: ["以色列", "美国"],
// arrow: "0"
// },
// {
// title: "IMF上调中东和北非地区经济增长预期",
// from: "CNN",
// time: "2025-10-05",
// tag: ["经济", "中东", "IMF"],
// arrow: "1"
// },
]);
function changeBtn(btn) {
btnSelect.value = btn;
function changeArea(area) {
moduleActive.value = area.id;
handleGetHotNewsByArea()
}
const emit = defineEmits(["back"]);
function back() {
emit("back", "home");
}
onMounted(() => {
handleGetModuleList();
});
</script>
<style lang="scss" scoped>
.newsBrief-page {
......@@ -182,8 +203,9 @@ function back() {
border-radius: 10px;
background: rgba(255, 255, 255, 0.8);
.main-header {
height: 64px;
// height: 64px;
display: flex;
flex-wrap: wrap;
gap: 16px;
padding-top: 24px;
padding-left: 24px;
......@@ -192,6 +214,7 @@ function back() {
line-height: 40px;
padding: 0 20px;
border-radius: 32px;
border: 1px solid rgba(32, 33, 35, 0.07);
background: rgba(32, 33, 35, 0.07);
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
......@@ -199,6 +222,7 @@ function back() {
font-weight: 400;
letter-spacing: 0px;
text-align: center;
cursor: pointer;
}
.headerBtnSelect {
box-sizing: border-box;
......@@ -216,7 +240,7 @@ function back() {
overflow-y: auto;
.item {
width: 952px;
height: 114px;
max-height: 114px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
display: flex;
justify-content: space-between;
......
src/views/newsBrief/index.vue
浏览文件 @ 1c65be4e
......@@ -10,18 +10,20 @@
<div class="btn-box">
<div
v-for="(item, index) in btnList"
v-for="(item, index) in moduleList"
:key="index"
:class="btnSelect !== item ? 'header-btn' : 'header-btn-select'"
@click="changeBtn(item)"
:class="moduleActiveId !== item.moduleId ? 'header-btn' : 'header-btn-select'"
@click="handleToWorldHot(item)"
@mouseenter="handleActiveModule(true, item)"
@mouseleave="handleActiveModule(false, item)"
>
<div class="btn-box-text">{{ item }}</div>
<div class="btn-box-text">{{ item.moduleName }}</div>
<div class="btn-box-icon">
<img v-if="btnSelect === item" src="@/assets/icons/btn-arrow-right-active.png" alt="" />
<img v-if="moduleActiveId === item.moduleId" src="@/assets/icons/btn-arrow-right-active.png" alt="" />
<img v-else src="@/assets/icons/btn-arrow-right.png" alt="" />
</div>
</div>
<div class="header-btn-more">
<div class="header-btn-more" v-if="moduleList.length">
<img src="@/assets/icons/adjustment.png" />
</div>
</div>
......@@ -62,20 +64,28 @@
<div class="box">
<div class="box-header">
<div class="box-header-img"><img src="@/assets/icons/subject-icon.png" /></div>
<div class="box-header-title" @click="changePage('subject')">中美博弈专题</div>
<div class="box-header-title">中美博弈专题</div>
</div>
<div class="divider"></div>
<div v-for="(item, index) in subjectData" :key="index">
<div class="subject-line">
<div style="display: flex; align-items: center">
<div class="subject-line-id" :class="{ subjectLineId1: index===0, subjectLineId2: index === 1, subjectLineId3: index === 2 }">
<div
class="subject-line-id"
:class="{
subjectLineId1: index === 0,
subjectLineId2: index === 1,
subjectLineId3: index === 2
}"
>
{{ index <= 2 ? index + 1 : "•" }}
</div>
<div class="text" :class="{ textTop: index < 3 }">
{{ item.text }}
{{ item.newsTitle }}
</div>
</div>
<img :src="`src/assets/icons/arrow-${item.arrow}.png`" />
<img v-if="item.hot" :src="`src/assets/icons/arrow-0.png`" />
<img v-else :src="`src/assets/icons/arrow-1.png`" />
</div>
</div>
</div>
......@@ -88,15 +98,30 @@
</template>
<script setup>
import { ref } from "vue";
import { ref, onMounted } from "vue";
import { getMoudleType, getTodayNews, getHotNews } from "@/api/news/newsBrief";
import { useRoute } from "vue-router";
import Headlines from "./Headlines.vue";
import Subject from "./Subject.vue";
// import style from './style.css'
const route = useRoute();
//顶部数据搜索
const searchInput = ref("");
const btnList = ref(["新闻纵览", "焦点新闻", "全球热点", "军事热点", "台湾动向", "美国政治", "亚洲局势", "东亚动态"]);
const btnSelect = ref("新闻纵览");
const moduleList = ref([]);
const moduleActiveId = ref("");
const handleGetModuleType = async () => {
try {
const res = await getMoudleType();
console.log("模块类别", res);
if (res.code === 200 && res.data) {
moduleList.value = res.data;
}
} catch (error) {}
};
// 今日要闻
const HeadlinesData = ref([
{
title: "黎巴嫩真主党指责美国破坏黎稳定 谴责以色列“蓄意挑衅”",
......@@ -134,32 +159,62 @@ const HeadlinesData = ref([
image: "/testData/HeadlinesData-img.png"
}
]);
function changeBtn(btn) {
btnSelect.value = btn;
}
const handleGetTodayNews = async () => {
try {
const res = await getTodayNews();
console.log("今日要闻", res);
if (res.code === 200 && res.data) {
} else {
HeadlinesData.value = [];
}
} catch (error) {
HeadlinesData.value = [];
}
};
//当前页面显示
const showPage = ref("home");
function changePage(page) {
const changePage = page => {
console.log(page);
showPage.value = page;
}
};
//博弈专题新闻数据
const subjectData = ref([
{ id: 1, text: "乌克兰与法国签署意向书 将获 100 架“阵风”战机及多套防空系统", arrow: 0 },
{ id: 2, text: "安理会通过涉加沙决议 建立和平委员会作为过渡行政机构", arrow: 1 },
{ id: 3, text: "日本首相高市早苗涉台及修“无核三原则”言论遭多方强烈反对", arrow: 1 },
{ id: 4, text: "美“福特”号航母打击群进入加勒比海 委方谴责其意图策动政权更迭", arrow: 1 },
{ id: 5, text: "BBC回应特朗普10亿-50亿美元索赔诉讼 称诽谤指控无依据", arrow: 1 },
{ id: 6, text: "俄军打击乌142个区域设施 乌军击落或压制91架俄无人机", arrow: 1 },
{ id: 7, text: "中国女法官张玲玲以第一高票当选联合国上诉法庭法官", arrow: 0 },
{ id: 8, text: "美股三大股指17日收盘普跌 比特币跌破92000美元", arrow: 1 },
{ id: 9, text: "高盛大幅下调2026年布伦特和WTI原油价格预测", arrow: 1 },
{ id: 10, text: "2026米兰冬奥会火炬传递完整路线公布 将穿越意大利全部20个大区", arrow: 1 },
{ id: 11, text: "特朗普宣称若重掌白宫将推动美国开展自1992年以来首次核试验", arrow: 1 },
{ id: 12, text: "欧盟发布2025年秋季经济预测 欧元区今年GDP预计增长1.3%", arrow: 1 }
// { id: 1, text: "乌克兰与法国签署意向书 将获 100 架“阵风”战机及多套防空系统", arrow: 0 },
// { id: 2, text: "安理会通过涉加沙决议 建立和平委员会作为过渡行政机构", arrow: 1 },
// { id: 3, text: "日本首相高市早苗涉台及修“无核三原则”言论遭多方强烈反对", arrow: 1 },
// { id: 4, text: "美“福特”号航母打击群进入加勒比海 委方谴责其意图策动政权更迭", arrow: 1 },
// { id: 5, text: "BBC回应特朗普10亿-50亿美元索赔诉讼 称诽谤指控无依据", arrow: 1 },
// { id: 6, text: "俄军打击乌142个区域设施 乌军击落或压制91架俄无人机", arrow: 1 },
]);
const handleGetHotNews = async () => {
try {
const res = await getHotNews();
console.log("中美博弈专题", res);
if (res.code === 200 && res.data) {
subjectData.value = res.data;
} else {
subjectData.value = [];
}
} catch (error) {
subjectData.value = [];
}
};
const handleActiveModule = (isIn, module) => {
moduleActiveId.value = isIn ? module.moduleId : "";
};
const handleToWorldHot = () => {
showPage.value = 'subject'
moduleActiveId.value = ''
};
onMounted(() => {
handleGetModuleType();
handleGetTodayNews();
handleGetHotNews();
});
</script>
<style lang="scss" scoped>
@import url("./style.css");
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论