Skip to content

R
risk-monitor
提交 05fba319 authored 作者: 付康's avatar 付康
浏览文件
操作

合并分支 'lzl-dev' 到 'master'

法案详情提出人更新 查看合并请求 !79
上级 456c435e 192ed7ef
隐藏空白字符变更
内嵌 并排
正在显示 包含 461 行增加 和 281 行删除
src/api/coopRestriction/coopRestriction.js 0 → 100644
浏览文件 @ 05fba319
import request from "@/api/request.js";
// 合作限制-首页统计接口
export function getCoopRestrictionStatistics() {
return request({
method: 'GET',
url: `/api/cooperationlimitinfo/getCount`
})
}
// 合作限制-查询最新动态信息接口
export function getCoopRestrictionTrends() {
return request({
method: 'GET',
url: `/api/cooperationlimitinfo/getLatestTrends`
})
}
// 合作限制-查询风险信号接口
/**
* @param {moduleId}
* @header token
*/
export function getCoopRestrictionSignals(params) {
return request({
method: 'GET',
url: `/api/commonFeature/riskSignal/${params.moduleId}`
})
}
// 合作限制-查询新闻资讯接口
/**
* @param {moduleId}
* @header token
*/
export function getCoopRestrictionNews(params) {
return request({
method: 'GET',
url: `/api/commonFeature/news/${params.moduleId}`
})
}
// 合作限制-查询社交媒体接口
/**
* @param {moduleId}
* @header token
*/
export function getCoopRestrictionSocial(params) {
return request({
method: 'GET',
url: `/api/commonFeature/social/${params.moduleId}`
})
}
// 合作限制-各类型合作限制政策对比接口
/**
* @param {years}
* @header token
*/
export function getCoopRestrictionCompare(params) {
return request({
method: 'GET',
url: `/api/cooperationlimitinfo/getLimitCompare`,
params
})
}
// 合作限制-各领域规则分布情况接口
/**
* @param {year}
* @header token
*/
export function getCoopRestrictionDomain(params) {
return request({
method: 'GET',
url: `/api/cooperationlimitinfo/getLimitArea`,
params
})
}
\ No newline at end of file
src/views/bill/introdoction/STimeline.vue
浏览文件 @ 05fba319
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
</defs> --> </defs> -->
<!-- 节点 --> <!-- 节点 -->
<circle <circle
v-for="(node, idx) in nodes.slice(0, nodes.length)" v-for="(node, idx) in nodes"
:key="'circle' + idx" :key="'circle' + idx"
:cx="node.x" :cx="node.x"
:cy="node.y" :cy="node.y"
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
stroke-width="3" stroke-width="3"
/> />
<line <line
v-for="(node, idx) in nodes.slice(0, nodes.length)" v-for="(node, idx) in nodes"
:key="'line' + idx" :key="'line' + idx"
:x1="node.x" :x1="node.x"
:y1="node.y + 4" :y1="node.y + 4"
...@@ -170,9 +170,11 @@ export default { ...@@ -170,9 +170,11 @@ export default {
return `${date.getFullYear()}年${date.getMonth() + 1}月`; return `${date.getFullYear()}年${date.getMonth() + 1}月`;
}, },
sortedDataList() { sortedDataList() {
if (!this.dataList) return []; if (!this.dataList || !Array.isArray(this.dataList)) return [];
// Clone and sort by date ascending (Old -> New) // Clone and sort by date ascending (Old -> New)
return [...this.dataList].sort((a, b) => new Date(a.actionDate) - new Date(b.actionDate)); return [...this.dataList]
.filter(item => item && item.actionDate)
.sort((a, b) => new Date(a.actionDate) - new Date(b.actionDate));
}, },
nodes() { nodes() {
// 计算每个节点的坐标（蛇形） // 计算每个节点的坐标（蛇形）
...@@ -180,7 +182,6 @@ export default { ...@@ -180,7 +182,6 @@ export default {
const row = Math.floor(idx / this.maxPerRow); const row = Math.floor(idx / this.maxPerRow);
const col = idx % this.maxPerRow; const col = idx % this.maxPerRow;
let x, y; let x, y;
// const leftMargin = 150; // 你可以自定义这个值
if (row % 2 === 0) { if (row % 2 === 0) {
x = this.leftMargin + col * this.nodeGapX + 50; x = this.leftMargin + col * this.nodeGapX + 50;
...@@ -191,12 +192,17 @@ export default { ...@@ -191,12 +192,17 @@ export default {
y = 60 + row * this.nodeGapY; y = 60 + row * this.nodeGapY;
// Format Date: 2025-07-04 -> 7月4日 // Format Date: 2025-07-04 -> 7月4日
const dateObj = new Date(item.actionDate); let formattedDate = "";
const formattedDate = `${dateObj.getMonth() + 1}月${dateObj.getDate()}日`; if (item.actionDate) {
const dateObj = new Date(item.actionDate);
if (!isNaN(dateObj.getTime())) {
formattedDate = `${dateObj.getMonth() + 1}月${dateObj.getDate()}日`;
}
}
// Format Votes // Format Votes
let voteString = ''; let voteString = "";
if (item.agreeVote !== null && item.disagreeVote !== null) { if (item.agreeVote !== null && item.agreeVote !== undefined && item.disagreeVote !== null && item.disagreeVote !== undefined) {
voteString = `${item.agreeVote}票赞成 : ${item.disagreeVote}票反对`; voteString = `${item.agreeVote}票赞成 : ${item.disagreeVote}票反对`;
} }
...@@ -238,7 +244,6 @@ export default { ...@@ -238,7 +244,6 @@ export default {
for (let i = 1; i < this.nodes.length; i++) { for (let i = 1; i < this.nodes.length; i++) {
const prev = this.nodes[i - 1]; const prev = this.nodes[i - 1];
const curr = this.nodes[i]; const curr = this.nodes[i];
console.log("prev", prev);
// 判断是否是行尾转折点 // 判断是否是行尾转折点
const isTurnPoint = i % this.maxPerRow === 0; const isTurnPoint = i % this.maxPerRow === 0;
...@@ -272,7 +277,8 @@ export default { ...@@ -272,7 +277,8 @@ export default {
}, },
svgHeight() { svgHeight() {
// SVG高度 // SVG高度
return Math.ceil(this.dataList.length / this.maxPerRow) * this.nodeGapY + 40; const listLength = (this.dataList && Array.isArray(this.dataList)) ? this.dataList.length : 0;
return Math.ceil(listLength / this.maxPerRow) * this.nodeGapY + 40;
} }
} }
}; };
......
src/views/bill/introdoction/index.vue
浏览文件 @ 05fba319
...@@ -154,15 +154,15 @@ ...@@ -154,15 +154,15 @@
</div> </div>
<div class="introduction-wrap-right-main"> <div class="introduction-wrap-right-main">
<div class="right-main-box1"> <div class="right-main-box1">
<!-- <div class="name-box"> <div class="name-box">
<el-select <!-- <el-select
v-model="selectValue" v-model="selectValue"
placeholder="请选择" placeholder="请选择"
style="width: 180px; margin: 0 10px" style="width: 180px; margin: 0 10px"
@change="handleChangeFaId" @change="handleChangeFaId"
> >
<el-option v-for="item in faList" :key="item.value" :label="item.label" :value="item.id" /> <el-option v-for="item in faList" :key="item.value" :label="item.label" :value="item.id" />
</el-select> </el-select> -->
<div class="person-box"> <div class="person-box">
<div <div
class="person-item" class="person-item"
...@@ -174,7 +174,7 @@ ...@@ -174,7 +174,7 @@
{{ item.name }} {{ item.name }}
</div> </div>
</div> </div>
</div> --> </div>
<div class="info-box"> <div class="info-box">
<div class="info-left"> <div class="info-left">
<img :src="defaultAvatar" alt="" @click="handleClickAvatar(curPerson.id)"/> <img :src="defaultAvatar" alt="" @click="handleClickAvatar(curPerson.id)"/>
...@@ -206,20 +206,20 @@ ...@@ -206,20 +206,20 @@
</div> </div>
</div> </div>
</div> </div>
<div class="right-main-box2"> <div class="right-main-box2" v-if="curPerson.tagList && curPerson.tagList.length">
<!-- <WordCloudMap :data="wordCloudData" :shape="circle" /> --> <!-- <WordCloudMap :data="wordCloudData" :shape="circle" /> -->
<div <div
class="tag-box" class="tag-box"
:class="{ :class="{
status0: index === 0 || index === 4, status0: index % 4 === 0,
status1: index === 1 || index === 5, status1: index % 4 === 1,
status2: index === 2 || index === 6, status2: index % 4 === 2,
status3: index === 3 || index === 7 status3: index % 4 === 3
}" }"
v-for="(tag, index) in curPerson.tagList" v-for="(tag, index) in curPerson.tagList"
:key="index" :key="index"
> >
{{ tag }} {{ tag.industryName }}
</div> </div>
</div> </div>
<div class="right-main-box3"> <div class="right-main-box3">
...@@ -296,19 +296,19 @@ ...@@ -296,19 +296,19 @@
</div> </div>
</div> </div>
<div class="tag-wrapper"> <div class="tag-wrapper" v-if="curPerson.tagList && curPerson.tagList.length">
<div <div
class="tag-box" class="tag-box"
:class="{ :class="{
status0: tag.status === 0, status0: index % 4 === 0,
status1: tag.status === 1, status1: index % 4 === 1,
status2: tag.status === 2, status2: index % 4 === 2,
status3: tag.status === 3 status3: index % 4 === 3
}" }"
v-for="(tag, index) in curPerson.tagList" v-for="(tag, index) in curPerson.tagList"
:key="index" :key="index"
> >
{{ tag.title }} {{ tag.industryName }}
</div> </div>
</div> </div>
<div class="more">更多议员 ></div> <div class="more">更多议员 ></div>
...@@ -371,159 +371,17 @@ const handleClickAvatar = id => { ...@@ -371,159 +371,17 @@ const handleClickAvatar = id => {
}; };
// 获取URL地址里面的billId // 获取URL地址里面的billId
const billId = ref(route.query.billId); const billId = ref(route.query.billId);
// console.log(billId.value)
// const box2BtnActive = ref(1);
// const handleClcikBox2Btn = index => {
// box2BtnActive.value = index;
// };
// const box3BtnActive = ref("");
// const handleClcikBox3Btn = (name, index) => {
// box3BtnActive.value = name;
// curPerson.value = personList.value[index];
// personEventList.value = personList.value[index].eventList;
// };
const dialogBoxBtnActive = ref(0); const dialogBoxBtnActive = ref(0);
const handleClcikDialogBoxBtn = index => { const handleClcikDialogBoxBtn = index => {
dialogBoxBtnActive.value = index; dialogBoxBtnActive.value = index;
}; };
const tagList = ref([
{
title: "共和党",
status: 1
},
{
title: "委员会主席",
status: 0
},
{
title: "财政保守",
status: 2
},
{
title: "深红州",
status: 3
},
{
title: "社会政策激进",
status: 2
},
{
title: "预算委员会",
status: 3
},
{
title: "委员会主席",
status: 0
},
{
title: "深红州",
status: 3
},
{
title: "议程主导权",
status: 1
},
{
title: "财政保守",
status: 2
},
{
title: "传统能源",
status: 1
}
]);
const selectValue = ref("");
const faList = ref([
// {
// value: "众议院初始框架",
// label: "众议院初始框架",
// },
// {
// value: "众议院初始框架1",
// label: "众议院初始框架1",
// },
]);
const handleChangeFaId = val => { const handleChangeFaId = val => {
console.log("val", val); console.log("val", val);
handleGetBillPerson(val); handleGetBillPerson(val);
}; };
const progressList = ref([
{
sjsj: "7月5日",
sjnr: "特朗普于美国独立日签署法案，​公法编号Pub. L. No. 119-21。白宫举行庆典，B-2轰炸机飞越上空，象征“美国新时代”开启。",
fxdj: "特别重大风险"
},
{
sjsj: "7月4日",
sjnr: "众议院最终表决218票赞成 vs 214票反对，修订版法案以4票优势通过，2名共和党议员倒戈，民主党全员反对。",
fxdj: "重大风险"
},
{
sjsj: "7月3日",
sjnr: "民主党领袖杰弗里斯发表 ​8小时45分钟​ 演讲（众议院现代史最长），抗议法案“劫贫济富”，但仍未阻止表决。",
fxdj: "较大风险"
},
{
sjsj: "7月2日",
sjnr: "众议院以 ​219:213​ 通过程序规则，为最终表决铺路。此前4名共和党议员反对程序规则，议长约翰逊紧急游说挽回1票。",
fxdj: "低风险"
},
{
sjsj: "7月1日",
sjnr: "参议院最终表决投票51:50​，副总统万斯（JD Vance）投出关键票打破平局。3名共和党参议员倒戈（蒂利斯、保罗、柯林斯）。",
fxdj: ""
}
]);
const wordCloudData = [
{ name: "财政保守主义", value: 100 },
{ name: "移民与边境安全", value: 5 },
{ name: "削减市民福利", value: 77 },
{ name: "债务驱动型经济", value: 35 },
{ name: "传统能源", value: 96 },
{ name: "与马斯克公开冲突", value: 57 },
{ name: "共和党财政鹰派", value: 72 },
{ name: "财政问责法案", value: 18 },
{ name: "强硬边境政策", value: 34 },
{ name: "扩大军费", value: 16 },
{ name: "债务与赤字警告", value: 72 },
{ name: "批评美国债务膨胀", value: 58 }
];
const stepList = ref([
{
title: "提出",
active: false
},
{
title: "众议院通过",
active: false
},
{
title: "参议院通过",
active: false
},
{
title: "分歧协调",
active: false
},
{
title: "提交总统",
active: false
},
{
title: "法案通过",
active: true
}
]);
const timelineData = ref([]); const timelineData = ref([]);
...@@ -544,37 +402,12 @@ const handleGetBasicInfo = async () => { ...@@ -544,37 +402,12 @@ const handleGetBasicInfo = async () => {
try { try {
const res = await getBillInfo(params); const res = await getBillInfo(params);
console.log("基本信息", res); console.log("基本信息", res);
basicInfo.value = res.data; basicInfo.value = res.data || {};
// if (basicInfo.value.stageList) {
// basicInfo.value.stageList.reverse();
// }
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
}; };
const warningNum = ref(0);
// 法案进展 获取最新进展
// const handleGetBillEvent = async () => {
// warningNum.value = 0;
// const params = {
// id: window.sessionStorage.getItem("billId")
// };
// try {
// const res = await getBillEvent(params);
// console.log("最新进展", res);
// progressList.value = res.data;
// progressList.value.forEach(item => {
// if (item.fxdj) {
// warningNum.value++;
// }
// });
// } catch (error) {
// console.error(error);
// }
// };
// 法案进展 获取前期进展 --也是提出人左上角列表 // 法案进展 获取前期进展 --也是提出人左上角列表
const handleGetBillDyqk = async () => { const handleGetBillDyqk = async () => {
const params = { const params = {
...@@ -583,7 +416,7 @@ const handleGetBillDyqk = async () => { ...@@ -583,7 +416,7 @@ const handleGetBillDyqk = async () => {
try { try {
const res = await getBillDyqk(params); const res = await getBillDyqk(params);
console.log("前期进展", res); console.log("前期进展", res);
timelineData.value = res.data; timelineData.value = res.data || [];
} catch (error) { } catch (error) {
console.error(error); console.error(error);
...@@ -592,11 +425,12 @@ const handleGetBillDyqk = async () => { ...@@ -592,11 +425,12 @@ const handleGetBillDyqk = async () => {
const personList = ref([]); const personList = ref([]);
const curPerson = ref({}); const curPerson = ref({});
const box3BtnActive = ref("");
// 人物动态 const handleClcikBox3Btn = (name, index) => {
const personEventList = ref([]); box3BtnActive.value = name;
curPerson.value = personList.value[index];
};
// 法案提出人 // 法案提出人
const handleGetBillPerson = async () => { const handleGetBillPerson = async () => {
...@@ -606,10 +440,14 @@ const handleGetBillPerson = async () => { ...@@ -606,10 +440,14 @@ const handleGetBillPerson = async () => {
try { try {
const res = await getBillPerson(params); const res = await getBillPerson(params);
console.log("提出人", res); console.log("提出人", res);
// personList.value = res.data; personList.value = res.data || [];
// box3BtnActive.value = res.data.length ? res.data[0].name : ""; if (personList.value.length > 0) {
curPerson.value = res.data.length ? res.data[0] : {}; box3BtnActive.value = personList.value[0].name;
// personEventList.value = res.data.length ? res.data[0].eventList : []; curPerson.value = personList.value[0];
} else {
box3BtnActive.value = "";
curPerson.value = {};
}
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
...@@ -1007,16 +845,31 @@ onMounted(() => { ...@@ -1007,16 +845,31 @@ onMounted(() => {
.introduction-wrap-right-main { .introduction-wrap-right-main {
.right-main-box1 { .right-main-box1 {
// height: 218px; 将选择框去掉后高度变化 // height: 218px; 将选择框去掉后高度变化
height: 171px; min-height: 171px;
height: auto;
padding-bottom: 15px;
// border-bottom: 1px solid rgb(243, 243, 244); // border-bottom: 1px solid rgb(243, 243, 244);
.name-box { .name-box {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
margin-left: 22px;
margin-top: 10px;
.person-box { .person-box {
width: 360px; width: 500px;
overflow-x: auto; overflow-x: auto;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
padding-bottom: 5px;
&::-webkit-scrollbar {
height: 4px;
}
&::-webkit-scrollbar-thumb {
border-radius: 4px;
background: #e1e1e1;
}
&::-webkit-scrollbar-track {
background: transparent;
}
.person-item { .person-item {
height: 28px; height: 28px;
box-sizing: border-box; box-sizing: border-box;
...@@ -1032,8 +885,10 @@ onMounted(() => { ...@@ -1032,8 +885,10 @@ onMounted(() => {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-right: 8px; margin-right: 8px;
padding: 1px 8px; padding: 1px 12px;
cursor: pointer; cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
} }
.nameItemActive { .nameItemActive {
border: 1px solid var(--btn-active-border-color); border: 1px solid var(--btn-active-border-color);
...@@ -1112,9 +967,20 @@ onMounted(() => { ...@@ -1112,9 +967,20 @@ onMounted(() => {
} }
.right-main-box2 { .right-main-box2 {
// width: 576px; // width: 576px;
// height: 150px; max-height: 120px;
overflow-y: auto;
box-sizing: border-box; box-sizing: border-box;
padding: 22px 26px; padding: 10px 26px;
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-thumb {
border-radius: 4px;
background: #e1e1e1;
}
&::-webkit-scrollbar-track {
background: transparent;
}
// border-bottom: 1px solid rgb(243, 243, 244); // border-bottom: 1px solid rgb(243, 243, 244);
// display: flex; // display: flex;
// flex-wrap: wrap; // flex-wrap: wrap;
...@@ -1173,7 +1039,7 @@ onMounted(() => { ...@@ -1173,7 +1039,7 @@ onMounted(() => {
overflow-y: auto; overflow-y: auto;
} }
.right-main-box3-footer { .right-main-box3-footer {
margin-top: 7px; margin-top: 1px;
display: flex; display: flex;
justify-content: center; justify-content: center;
.btn-more { .btn-more {
...@@ -1278,10 +1144,22 @@ onMounted(() => { ...@@ -1278,10 +1144,22 @@ onMounted(() => {
} }
.tag-wrapper { .tag-wrapper {
width: 287px; width: 287px;
height: 150px; max-height: 150px;
overflow-y: auto;
box-sizing: border-box; box-sizing: border-box;
margin-top: 30px; margin-top: 30px;
margin-left: 38px; margin-left: 38px;
padding-right: 5px;
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-thumb {
border-radius: 4px;
background: #e1e1e1;
}
&::-webkit-scrollbar-track {
background: transparent;
}
// border-bottom: 1px solid rgb(243, 243, 244); // border-bottom: 1px solid rgb(243, 243, 244);
// display: flex; // display: flex;
// flex-wrap: wrap; // flex-wrap: wrap;
......
src/views/coopRestriction/components/dataNew/index.vue
浏览文件 @ 05fba319
<template> <template>
<div class="data-new"> <div class="data-new">
<div class="left"> <div class="left">
<img src="./assets/leftbtn.png" alt="" class="left-btn" /> <img src="./assets/leftbtn.png" alt="" class="left-btn" @click="handlePrev" />
<img src="./assets/rightbtn.png" alt="" class="right-btn" /> <img src="./assets/rightbtn.png" alt="" class="right-btn" @click="handleNext" />
<div class="left-top"> <div class="left-top">
<img src="./assets/icon01.png" alt="" /> <img src="./assets/icon01.png" alt="" />
<div class="left-top-title">合作限制动态</div> <div class="left-top-title">合作限制动态</div>
<div class="more" @click="handleClickToDetail">查看详情 ></div> <div class="more" @click="handleClickToDetail">查看详情 ></div>
</div> </div>
<div class="left-center">
<img src="./assets/usImg.png" alt="" /> <el-carousel
<div class="left-center-main"> ref="carouselRef"
<div class="left-center-main-title">保护美国资金与专业知识免受敌对研究利用法案</div> height="412px"
<div class="left-center-main-ul"> direction="horizontal"
<ul> :autoplay="true"
<li> :interval="5000"
<span class="ul-title">数据来源：</span> arrow="never"
<span class="ul-content">美国国会</span> indicator-position="none"
</li> @change="handleCarouselChange"
<li> >
<span class="ul-title">合作限制类型：</span> <el-carousel-item v-for="(item, index) in coopRestrictionTrends" :key="item.ID || index">
<span class="ul-content">科研合作限制</span> <div class="carousel-item-content">
</li> <div class="left-center">
<li> <img :src="item.IMAGEURL || defaultImg" alt="" />
<span class="ul-title">发布日期：</span> <div class="left-center-main">
<span class="ul-content">2025年10月7日</span> <div class="left-center-main-title">{{ item.LIMITNAME || "暂无动态" }}</div>
</li> <div class="left-center-main-ul">
<li> <ul>
<span class="ul-title">涉及领域</span> <li>
<span class="ul-pie cl1">航空航天</span> <span class="ul-title">数据来源：</span>
<span class="ul-pie cl2">人工智能</span> <span class="ul-content">{{ item.ORGNAME || "未知" }}</span>
<span class="ul-pie cl3">集成电路</span> </li>
</li> <li>
</ul> <span class="ul-title">合作限制类型：</span>
<span class="ul-content">{{ item.LIMITTYPE || "未知" }}</span>
</li>
<li>
<span class="ul-title">发布日期：</span>
<span class="ul-content">{{ item.LIMITDATE || "未知" }}</span>
</li>
<li>
<span class="ul-title">涉及领域：</span>
<div class="ul-tags" v-if="item.AREA">
<span
v-for="(field, fIndex) in (typeof item.AREA === 'string' ? item.AREA.split(',') : item.AREA)"
:key="fIndex"
class="ul-pie"
:class="'cl' + ((fIndex % 3) + 1)"
>
{{ field }}
</span>
</div>
<span v-else class="ul-content">未知</span>
</li>
</ul>
</div>
</div>
<!-- <div class="left-center-title">{{ item.LIMITTYPE }}</div> -->
</div>
<div class="left-bottom">
<ul>
<li class="left-bottom-li">内容摘要：</li>
</ul>
<div class="left-bottom-content">
{{ item.INTRODUCTION || "暂无内容摘要" }}
</div>
</div>
</div> </div>
</div> </el-carousel-item>
<div class="left-center-title">国会法案</div>
</div> <!-- 无数据时的占位展示 -->
<div class="left-bottom"> <el-carousel-item v-if="coopRestrictionTrends.length === 0">
<ul> <div class="carousel-item-content">
<li class="left-bottom-li">内容摘要：</li> <div class="left-center">
</ul> <img :src="defaultImg" alt="" />
<div class="left-bottom-content"> <div class="left-center-main">
该法案已被纳入《国防授权法案》（NDAA）的讨论范畴，并已在参议院通过审议 <div class="left-center-main-title">暂无合作限制动态</div>
。该法案规定，将禁止任何与中国等被视为“敌对国”有合作关系的科学家获得联邦资助 <div class="left-center-main-ul">
。其限制范围极其宽泛，从联合研究、合著论文到指导研究生或博士后几乎全覆盖 <ul>
。更严厉的是，该条款具有追溯效力，可追溯至过去5年的合作。 <li><span class="ul-title">数据来源：</span><span class="ul-content">未知</span></li>
</div> <li><span class="ul-title">合作限制类型：</span><span class="ul-content">未知</span></li>
</div> <li><span class="ul-title">发布日期：</span><span class="ul-content">未知</span></li>
<li><span class="ul-title">涉及领域</span><span class="ul-content">未知</span></li>
</ul>
</div>
</div>
</div>
</div>
</el-carousel-item>
</el-carousel>
</div> </div>
<div class="right"> <div class="right">
<div class="right-top"> <div class="right-top">
<img src="./assets/icon02.png" alt="" /> <img src="./assets/icon02.png" alt="" />
<div class="right-top-title"> <div class="right-top-title">
风险信号 风险信号
<span>4</span> <span>{{ riskSignals.length }}</span>
</div> </div>
</div> </div>
<div style="margin: 6px 34px 0 23px"> <div style="margin: 6px 34px 0 23px">
<div v-for="item in list" :key="item.id" class="right-main" @click="handleClickToDetail()"> <div v-for="item in riskSignals" :key="item.id" class="right-main" @click="handleToRiskDetail">
<div class="main-left" :class="{ cl4: item.title === '特别重大', cl5: item.title === '重大风险' }"> <div class="main-left" :class="{ cl4: item.title === '特别重大', cl5: item.title === '重大风险' }">
{{ item.title }} {{ item.title }}
</div> </div>
...@@ -75,10 +116,52 @@ ...@@ -75,10 +116,52 @@
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref, onMounted, computed } from "vue";
import router from "@/router"; import router from "@/router";
import { getCoopRestrictionTrends } from "@/api/coopRestriction/coopRestriction.js";
import defaultImg from "./assets/usImg.png";
const coopRestrictionTrends = ref([]);
const carouselRef = ref(null);
const activeIndex = ref(0);
// 获取合作限制-最新动态数据
const getCoopRestrictionTrendsData = async () => {
try {
const res = await getCoopRestrictionTrends();
if (res && res.code === 200) {
coopRestrictionTrends.value = res.data || [];
}
} catch (error) {
console.error("获取合作限制最新动态数据失败:", error);
}
};
// 轮播图手动切换
const handlePrev = () => {
if (carouselRef.value) {
carouselRef.value.prev();
}
};
const handleNext = () => {
if (carouselRef.value) {
carouselRef.value.next();
}
};
// 轮播切换回调
const handleCarouselChange = (index) => {
activeIndex.value = index;
};
// 左侧展示的主动态
const mainTrend = computed(() => {
if (coopRestrictionTrends.value.length === 0) return null;
return coopRestrictionTrends.value[activeIndex.value] || coopRestrictionTrends.value[0];
});
const list = ref([ // 右侧风险信号列表
const riskSignals = ref([
{ {
id: 1, id: 1,
title: "特别重大", title: "特别重大",
...@@ -106,8 +189,19 @@ const list = ref([ ...@@ -106,8 +189,19 @@ const list = ref([
]); ]);
// 点击查看详情 // 点击查看详情
const handleClickToDetail = () => { const handleClickToDetail = (item) => {
// router.push("/decreeLayout"); const activeItem = (item && item.ID) ? item : mainTrend.value;
const id = activeItem?.ID;
if (!id) return;
const curRoute = router.resolve({
path: "/cooperationRestrictions/detail",
query: { id: id },
});
window.open(curRoute.href, "_blank");
};
// 点击风险信号详情
const handleToRiskDetail = () => {
const curRoute = router.resolve("/cooperationRestrictions/detail"); const curRoute = router.resolve("/cooperationRestrictions/detail");
window.open(curRoute.href, "_blank"); window.open(curRoute.href, "_blank");
}; };
...@@ -118,6 +212,10 @@ const handleToMoreRiskSignal = () => { ...@@ -118,6 +212,10 @@ const handleToMoreRiskSignal = () => {
window.open(route.href, "_blank"); window.open(route.href, "_blank");
}; };
onMounted(() => {
// 合作限制-最新动态数据-获取数据
getCoopRestrictionTrendsData();
});
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -146,6 +244,8 @@ const handleToMoreRiskSignal = () => { ...@@ -146,6 +244,8 @@ const handleToMoreRiskSignal = () => {
top: 223px; top: 223px;
left: 0px; left: 0px;
cursor: pointer; cursor: pointer;
z-index: 100;
pointer-events: auto;
} }
.right-btn { .right-btn {
width: 24px; width: 24px;
...@@ -154,6 +254,8 @@ const handleToMoreRiskSignal = () => { ...@@ -154,6 +254,8 @@ const handleToMoreRiskSignal = () => {
top: 223px; top: 223px;
right: 0px; right: 0px;
cursor: pointer; cursor: pointer;
z-index: 100;
pointer-events: auto;
} }
.left-top { .left-top {
width: 100%; width: 100%;
...@@ -178,6 +280,7 @@ const handleToMoreRiskSignal = () => { ...@@ -178,6 +280,7 @@ const handleToMoreRiskSignal = () => {
right: 40px; right: 40px;
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
cursor: pointer; cursor: pointer;
z-index: 101;
} }
.left-top-title { .left-top-title {
margin-left: 60px; margin-left: 60px;
...@@ -193,6 +296,10 @@ const handleToMoreRiskSignal = () => { ...@@ -193,6 +296,10 @@ const handleToMoreRiskSignal = () => {
padding: 11px 16px; padding: 11px 16px;
} }
} }
.carousel-item-content {
width: 100%;
height: 100%;
}
.left-center { .left-center {
width: 967px; width: 967px;
height: 208px; height: 208px;
...@@ -224,12 +331,13 @@ const handleToMoreRiskSignal = () => { ...@@ -224,12 +331,13 @@ const handleToMoreRiskSignal = () => {
list-style-position: inside; list-style-position: inside;
li { li {
width: 100%; width: 100%;
height: 24px; min-height: 24px;
margin-bottom: 12px; margin-bottom: 12px;
display: flex;
align-items: flex-start;
.ul-title { .ul-title {
display: inline-block; flex-shrink: 0;
width: 120px; width: 120px;
height: 24px;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
...@@ -237,19 +345,28 @@ const handleToMoreRiskSignal = () => { ...@@ -237,19 +345,28 @@ const handleToMoreRiskSignal = () => {
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
} }
.ul-content { .ul-content {
flex: 1;
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
} }
.ul-tags {
flex: 1;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ul-pie { .ul-pie {
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
padding: 2px 8px; padding: 2px 8px;
border: 1px solid; border: 1px solid;
border-radius: 4px; border-radius: 4px;
margin-right: 8px; font-size: 14px;
line-height: 18px;
white-space: nowrap;
} }
.cl1 { .cl1 {
border-color: rgba(186, 224, 255, 1); border-color: rgba(186, 224, 255, 1);
......
src/views/coopRestriction/components/dataSub/index.vue
浏览文件 @ 05fba319
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="left-title"> <div class="left-title">
<img src="./assets/icon01.png" alt="" /> <img src="./assets/icon01.png" alt="" />
<div class="tit">各类型合作限制政策对比</div> <div class="tit">各类型合作限制政策对比</div>
<el-select v-model="value" placeholder="Select" class="select"> <el-select v-model="value" placeholder="Select" class="select" @change="getCoopRestrictionCompareData">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
</div> </div>
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<div class="right-title"> <div class="right-title">
<img src="./assets/icon02.png" alt="" /> <img src="./assets/icon02.png" alt="" />
<div class="tit">各领域规则分布情况</div> <div class="tit">各领域规则分布情况</div>
<el-select v-model="value1" placeholder="Select" class="select"> <el-select v-model="value1" placeholder="Select" class="select" @change="getCoopRestrictionDomainData">
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
</div> </div>
...@@ -30,28 +30,120 @@ ...@@ -30,28 +30,120 @@
<script setup> <script setup>
import { ref, onMounted, onBeforeUnmount } from "vue"; import { ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { getCoopRestrictionCompare, getCoopRestrictionDomain } from "@/api/coopRestriction/coopRestriction";
const value = ref("近十年"); // 合作限制-各领域规则分布情况接口
const value1 = ref("2025年"); const coopRestrictionDomain = ref([]);
const getCoopRestrictionDomainData = async () => {
try {
const res = await getCoopRestrictionDomain({
year: value1.value
});
if (res && res.code === 200) {
coopRestrictionDomain.value = res.data || [];
}
} catch (error) {
console.error("获取合作限制各领域规则分布情况数据失败:", error);
}
};
// 合作限制-各类型合作限制政策对比接口
const coopRestrictionCompare = ref([]);
const getCoopRestrictionCompareData = async () => {
try {
const res = await getCoopRestrictionCompare({
years: value.value
});
if (res && res.code === 200) {
coopRestrictionCompare.value = res.data || [];
}
} catch (error) {
console.error("获取合作限制各类型合作限制政策对比数据失败:", error);
}
};
const value = ref(10);
const value1 = ref("2026");
const options = [ const options = [
{ { value: 1, label: "近一年" },
value: "近十年", { value: 2, label: "近两年" },
label: "近十年" { value: 3, label: "近三年" },
}, { value: 4, label: "近四年" },
{ { value: 5, label: "近五年" },
value: "近五年", { value: 10, label: "近十年" },
label: "近五年" { value: 15, label: "近十五年" },
} { value: 20, label: "近二十年" }
]; ];
const options1 = [ const options1 = [
{
value: "2026",
label: "2026年"
},
{ {
value: "2025年", value: "2025",
label: "2025年" label: "2025年"
}, },
{ {
value: "2024年", value: "2024",
label: "2024年" label: "2024年"
} },
{
value: "2023",
label: "2023年"
},
{
value: "2022",
label: "2022年"
},
{
value: "2021",
label: "2021年"
},
{
value: "2020",
label: "2020年"
},
{
value: "2019",
label: "2019年"
},
{
value: "2018",
label: "2018年"
},
{
value: "2017",
label: "2017年"
},
{
value: "2016",
label: "2016年"
},
{
value: "2015",
label: "2015年"
},
{
value: "2014",
label: "2014年"
},
{
value: "2013",
label: "2013年"
},
{
value: "2012",
label: "2012年"
},
{
value: "2011",
label: "2011年"
},
{
value: "2010",
label: "2010年"
}
]; ];
const leftChartRef = ref(null); const leftChartRef = ref(null);
...@@ -214,7 +306,14 @@ const initRightChart = () => { ...@@ -214,7 +306,14 @@ const initRightChart = () => {
rightChart.setOption(option); rightChart.setOption(option);
}; };
onMounted(() => { initLeftChart(); initRightChart(); }); onMounted(() => {
// 合作限制-各类型合作限制政策对比接口
getCoopRestrictionCompareData();
// 合作限制-各领域规则分布情况接口
getCoopRestrictionDomainData();
initLeftChart();
initRightChart();
});
onBeforeUnmount(() => { window.removeEventListener("resize", handleResize); if (leftChart) { leftChart.dispose(); leftChart = null; } if (rightChart) { rightChart.dispose(); rightChart = null; } }); onBeforeUnmount(() => { window.removeEventListener("resize", handleResize); if (leftChart) { leftChart.dispose(); leftChart = null; } if (rightChart) { rightChart.dispose(); rightChart = null; } });
</script> </script>
...@@ -259,7 +358,7 @@ onBeforeUnmount(() => { window.removeEventListener("resize", handleResize); if ( ...@@ -259,7 +358,7 @@ onBeforeUnmount(() => { window.removeEventListener("resize", handleResize); if (
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
} }
.select { .select {
width: 120px; width: 150px;
height: 28px; height: 28px;
padding: 0px 12px; padding: 0px 12px;
position: absolute; position: absolute;
...@@ -307,7 +406,7 @@ onBeforeUnmount(() => { window.removeEventListener("resize", handleResize); if ( ...@@ -307,7 +406,7 @@ onBeforeUnmount(() => { window.removeEventListener("resize", handleResize); if (
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
} }
.select { .select {
width: 120px; width: 150px;
height: 28px; height: 28px;
padding: 0px 12px; padding: 0px 12px;
position: absolute; position: absolute;
......
src/views/coopRestriction/index.vue
浏览文件 @ 05fba319
...@@ -95,7 +95,7 @@ ...@@ -95,7 +95,7 @@
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref, onMounted } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import comTitle from "./common/comTitle.vue"; import comTitle from "./common/comTitle.vue";
import newData from "./components/dataNew/index.vue"; import newData from "./components/dataNew/index.vue";
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论