Skip to content

R
risk-monitor
提交 a924d505 authored 作者: huhuiqing's avatar huhuiqing
浏览文件
操作

智库动态接口对接

上级 cba2ee51
隐藏空白字符变更
内嵌 并排
正在显示 包含 428 行增加 和 133 行删除
src/api/thinkTank/overview.js
浏览文件 @ a924d505
...@@ -81,4 +81,33 @@ export function getThinkTankReport(params) { ...@@ -81,4 +81,33 @@ export function getThinkTankReport(params) {
url: `/api/thinkTankOverview/report`, url: `/api/thinkTankOverview/report`,
params: params params: params
}) })
} }
\ No newline at end of file
/********* 智库信息 */
//智库百科:获取全局信息
export function getThinkTankSummary(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/summary/${params.id}`,
})
}
//智库报告:获取智库报告类型
export function getThinkDynamicsReportType() {
return request({
method: 'GET',
url: `/api/thinkTankInfo/reportType`,
})
}
//智库动态:获取智库报告
export function getThinkDynamicsReport(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/report/${params.id}/${params.startDate}`,
params: params.parmas
})
}
src/views/thinkTank/ThinkTankDetail/index.vue
浏览文件 @ a924d505
...@@ -7,15 +7,15 @@ ...@@ -7,15 +7,15 @@
</div> </div>
<div class="header-top-center"> <div class="header-top-center">
<div class="center-top"> <div class="center-top">
<div class="name">{{ "兰德公司" }}</div> <div class="name">{{ thinkTank.name }}</div>
<div class="e-name">{{ "RAND Corporation" }}</div> <div class="e-name">{{ thinkTank.ename }}</div>
</div> </div>
<div class="center-center"> <div class="center-center">
{{ "全球顶尖政策研究机构，专注于国家安全、科技政策、医疗卫生、能源政策、公共安全等领域的研究。 " }} {{ thinkTank.describe }}
</div> </div>
<div class="center-footer"> <div class="center-footer">
<div class="tag">{{ "国家安全" }}</div> <div class="tag" v-for="tag in thinkTank.tags">{{ tag.industryName }}</div>
<div class="tag">{{ "科技政策" }}</div>
</div> </div>
</div> </div>
<!-- <div class="header-top-right">{{ '查看智库官网' }}</div> --> <!-- <div class="header-top-right">{{ '查看智库官网' }}</div> -->
...@@ -58,19 +58,44 @@ import { ref, reactive, computed, onMounted } from "vue"; ...@@ -58,19 +58,44 @@ import { ref, reactive, computed, onMounted } from "vue";
import ThinkDaynamics from "./thinkDynamics/index.vue" import ThinkDaynamics from "./thinkDynamics/index.vue"
import PolicyTracking from "./PolicyTracking/index.vue"; import PolicyTracking from "./PolicyTracking/index.vue";
import ThinkInfo from "./thinkInfo/index.vue"; import ThinkInfo from "./thinkInfo/index.vue";
import {
getThinkTankSummary
} from "@/api/thinkTank/overview";
import { useRouter } from "vue-router";
const router = useRouter();
const tabActiveName = ref("智库动态"); const tabActiveName = ref("智库动态");
const switchTab = name => { const switchTab = name => {
tabActiveName.value = name; tabActiveName.value = name;
}; };
const thinkTank = ref({})
// 获取智库基本信息
const handleGetThinkTankSummary = async () => {
try {
const parmas = {
id: router.currentRoute._value.params.id
}
const res = await getThinkTankSummary(parmas);
console.log("智库信息", res);
if (res.code === 200 && res.data) {
thinkTank.value = res.data
}
} catch (error) {
console.error("获取智库列表error", error);
}
};
onMounted(async () => {
handleGetThinkTankSummary()
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap { .wrap {
width: 1920px; width: 1920px;
height: 984px; height: 984px;
.header { .header {
width: 1920px; width: 1920px;
height: 188px; height: 188px;
...@@ -81,18 +106,23 @@ const switchTab = name => { ...@@ -81,18 +106,23 @@ const switchTab = name => {
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
position: relative; position: relative;
.header-top { .header-top {
margin-top: 24px; margin-top: 24px;
display: flex; display: flex;
.header-top-left { .header-top-left {
width: 88px; width: 88px;
height: 88px; height: 88px;
background: purple; background: purple;
} }
.header-top-center { .header-top-center {
margin-left: 22px; margin-left: 22px;
.center-top { .center-top {
display: flex; display: flex;
.name { .name {
height: 26px; height: 26px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
...@@ -103,6 +133,7 @@ const switchTab = name => { ...@@ -103,6 +133,7 @@ const switchTab = name => {
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
} }
.e-name { .e-name {
margin-left: 11px; margin-left: 11px;
height: 26px; height: 26px;
...@@ -115,6 +146,7 @@ const switchTab = name => { ...@@ -115,6 +146,7 @@ const switchTab = name => {
text-align: left; text-align: left;
} }
} }
.center-center { .center-center {
margin-top: 4px; margin-top: 4px;
width: 769px; width: 769px;
...@@ -126,10 +158,12 @@ const switchTab = name => { ...@@ -126,10 +158,12 @@ const switchTab = name => {
line-height: 24px; line-height: 24px;
letter-spacing: 0px; letter-spacing: 0px;
} }
.center-footer { .center-footer {
margin-top: 9px; margin-top: 9px;
display: flex; display: flex;
gap: 8px; gap: 8px;
.tag { .tag {
height: 26px; height: 26px;
line-height: 26px; line-height: 26px;
...@@ -148,6 +182,7 @@ const switchTab = name => { ...@@ -148,6 +182,7 @@ const switchTab = name => {
} }
} }
} }
.header-footer { .header-footer {
width: 340px; width: 340px;
height: 48px; height: 48px;
...@@ -156,8 +191,9 @@ const switchTab = name => { ...@@ -156,8 +191,9 @@ const switchTab = name => {
left: 160px; left: 160px;
display: flex; display: flex;
gap: 24px; gap: 24px;
.tab { .tab {
width: 92px; width: 94px;
height: 48px; height: 48px;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -165,14 +201,17 @@ const switchTab = name => { ...@@ -165,14 +201,17 @@ const switchTab = name => {
gap: 4px; gap: 4px;
cursor: pointer; cursor: pointer;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
.icon { .icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.text { .text {
height: 24px; height: 24px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
...@@ -181,23 +220,28 @@ const switchTab = name => { ...@@ -181,23 +220,28 @@ const switchTab = name => {
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
} }
.textActive { .textActive {
color: rgba(5, 95, 194, 1); color: rgba(5, 95, 194, 1);
font-weight: 700; font-weight: 700;
} }
} }
.tabActive { .tabActive {
border-bottom: 2px solid rgba(5, 95, 194, 1); border-bottom: 2px solid rgba(5, 95, 194, 1);
} }
} }
} }
.main { .main {
margin: 0 auto; margin: 0 auto;
width: 1600px; width: 1600px;
.main-header { .main-header {
height: 64px; height: 64px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.search-box { .search-box {
margin-top: 16px; margin-top: 16px;
display: flex; display: flex;
...@@ -207,25 +251,30 @@ const switchTab = name => { ...@@ -207,25 +251,30 @@ const switchTab = name => {
border: 1px solid rgba(230, 231, 232, 1); border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px; border-radius: 4px;
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
.icon { .icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
margin: 8px 7px; margin: 8px 7px;
cursor: pointer; cursor: pointer;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
} }
.select-box { .select-box {
margin-top: 16px; margin-top: 16px;
margin-right: 5px; margin-right: 5px;
} }
} }
.main-content { .main-content {
display: flex; display: flex;
gap: 16px; gap: 16px;
.left { .left {
width: 300px; width: 300px;
height: 806px; height: 806px;
...@@ -235,11 +284,14 @@ const switchTab = name => { ...@@ -235,11 +284,14 @@ const switchTab = name => {
box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1); box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
position: relative; position: relative;
.select-box { .select-box {
margin-top: 21px; margin-top: 21px;
.select-box-header { .select-box-header {
display: flex; display: flex;
gap: 17px; gap: 17px;
.icon { .icon {
margin-top: 4px; margin-top: 4px;
width: 8px; width: 8px;
...@@ -247,6 +299,7 @@ const switchTab = name => { ...@@ -247,6 +299,7 @@ const switchTab = name => {
background: var(--color-main-active); background: var(--color-main-active);
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
} }
.title { .title {
height: 24px; height: 24px;
color: var(--color-main-active); color: var(--color-main-active);
...@@ -258,39 +311,47 @@ const switchTab = name => { ...@@ -258,39 +311,47 @@ const switchTab = name => {
text-align: left; text-align: left;
} }
} }
.select-main { .select-main {
margin-left: 25px; margin-left: 25px;
} }
.select-main1 { .select-main1 {
width: 100px; width: 100px;
} }
} }
} }
.right { .right {
width: 1284px; width: 1284px;
height: 1377px; height: 1377px;
.card-box { .card-box {
width: 1284px; width: 1284px;
height: 1248px; height: 1248px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
.footer-card { .footer-card {
width: 418px; width: 418px;
height: 300px; height: 300px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
.footer-card-top { .footer-card-top {
width: 384px; width: 384px;
height: 206px; height: 206px;
margin: 0 auto; margin: 0 auto;
margin-top: 15px; margin-top: 15px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.footer-card-title { .footer-card-title {
margin: 0 auto; margin: 0 auto;
margin-top: 13px; margin-top: 13px;
...@@ -302,6 +363,7 @@ const switchTab = name => { ...@@ -302,6 +363,7 @@ const switchTab = name => {
font-weight: 700; font-weight: 700;
line-height: 24px; line-height: 24px;
} }
.footer-card-footer { .footer-card-footer {
margin: 0 auto; margin: 0 auto;
margin-top: 5px; margin-top: 5px;
...@@ -317,10 +379,12 @@ const switchTab = name => { ...@@ -317,10 +379,12 @@ const switchTab = name => {
} }
} }
} }
.right-footer { .right-footer {
margin-top: 43px; margin-top: 43px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.info { .info {
height: 19px; height: 19px;
color: rgba(132, 136, 142, 1); color: rgba(132, 136, 142, 1);
...@@ -341,6 +405,7 @@ const switchTab = name => { ...@@ -341,6 +405,7 @@ const switchTab = name => {
box-shadow: none; box-shadow: none;
border-radius: 10px; border-radius: 10px;
} }
:deep(.el-input__wrapper:hover) { :deep(.el-input__wrapper:hover) {
box-shadow: none !important; box-shadow: none !important;
} }
......
src/views/thinkTank/ThinkTankDetail/thinkDynamics/index.vue
浏览文件 @ a924d505
...@@ -2,15 +2,23 @@ ...@@ -2,15 +2,23 @@
<div class="wrap"> <div class="wrap">
<div class="main-header"> <div class="main-header">
<div class="search-box"> <div class="search-box">
<el-input placeholder="搜索智库报告" v-model="searchReport" style="width: 270px" /> <el-input placeholder="搜索智库报告" v-model="searchReport" style="width: 270px" />
<div class="icon"> <div class="icon">
<img src="./images/search-icon.png" alt="" /> <img src="./images/search-icon.png" alt="" @click="handleGetThinkDynamicsReport()" />
</div> </div>
</div> </div>
<div class="select-box"> <div>
<el-select v-model="selectedYear" placeholder="选择时间" style="width: 120px"> <div class="select-box">
<el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" /> <el-select v-model="selectedYear" placeholder="选择时间" style="width: 120px">
</el-select> <el-option @click="handleGetThinkDynamicsReport()" v-for="item in yearList" :key="item.value"
:label="item.label" :value="item.value" />
</el-select>
<el-select v-model="sort" placeholder="发布时间" style="width: 120px">
<el-option @click="handleGetThinkDynamicsReport()" :key="true" label="正序" :value="true" />
<el-option @click="handleGetThinkDynamicsReport()" :key="false" label="倒序" :value="false" />
</el-select>
</div>
</div> </div>
</div> </div>
<div class="main-content"> <div class="main-content">
...@@ -22,14 +30,9 @@ ...@@ -22,14 +30,9 @@
</div> </div>
<div class="select-main"> <div class="select-main">
<div class="checkbox-group"> <div class="checkbox-group">
<el-checkbox <el-checkbox v-for="type in reportTypeList" :key="type.id" v-model="selectedReportTypeList"
v-for="type in reportTypeList" :label="type.id" class="filter-checkbox" @change="handleGetThinkDynamicsReport()">
:key="type.id" {{ type.typeName }}
v-model="selectedReportTypeList"
:label="type.id"
class="filter-checkbox"
>
{{ type.name }}
</el-checkbox> </el-checkbox>
</div> </div>
</div> </div>
...@@ -41,25 +44,20 @@ ...@@ -41,25 +44,20 @@
</div> </div>
<div class="select-main"> <div class="select-main">
<div class="checkbox-group"> <div class="checkbox-group">
<el-checkbox <el-checkbox v-for="type in researchTypeList" :key="type.id" v-model="selectedResearchTypeList"
v-for="type in researchTypeList" :label="type.id" class="filter-checkbox" @change="handleGetThinkDynamicsReport()">
:key="type.id"
v-model="selectedResearchTypeList"
:label="type.id"
class="filter-checkbox"
>
{{ type.name }} {{ type.name }}
</el-checkbox> </el-checkbox>
</div> </div>
</div> </div>
</div> </div>
<div class="select-box"> <div class="select-box">
<div class="select-box-header"> <div class="select-box-header">
<div class="icon"></div> <div class="icon"></div>
<div class="title">{{ "作者" }}</div> <div class="title">{{ "作者" }}</div>
</div> </div>
<div class="input-main"> <div class="input-main">
<el-input placeholder="输入作者名字" v-model="author" /> <el-input placeholder="输入作者名字" v-model="author" @input="handleGetThinkDynamicsReport()" />
</div> </div>
</div> </div>
</div> </div>
...@@ -67,23 +65,24 @@ ...@@ -67,23 +65,24 @@
<div class="card-box"> <div class="card-box">
<div class="footer-card" v-for="(item, index) in curFooterList" :key="index" @click="handleToReportDetail()"> <div class="footer-card" v-for="(item, index) in curFooterList" :key="index" @click="handleToReportDetail()">
<div class="footer-card-top"> <div class="footer-card-top">
<img :src="item.img" alt="" /> <img :src="item.imageUrl" alt="" />
</div> </div>
<div class="footer-card-title"> <div class="footer-card-title">
{{ item.title }} {{ item.name }}
</div> </div>
<div class="footer-card-footer"> <div class="footer-card-footer">
<div class="time">{{ item.time }}</div> <div class="time">{{ item.times }}</div>
<div class="from">{{ item.from }}</div> <div class="from">{{ item.thinkTankName }}</div>
</div> </div>
</div> </div>
</div> </div>
<div class="right-footer"> <div class="right-footer">
<div class="info"> <div class="info">
{{ `共1059篇智库报告` }} 共{{ total }}篇智库报告
</div> </div>
<div class="page-box"> <div class="page-box">
<el-pagination :page-size="12" background layout="prev, pager, next" :total="120" /> <el-pagination :page-size="12" background layout="prev, pager, next" :total="total"
@current-change="handleCurrentChange" :current-page="currentPage" />
</div> </div>
</div> </div>
</div> </div>
...@@ -93,22 +92,31 @@ ...@@ -93,22 +92,31 @@
<script setup> <script setup>
import { ref, reactive, onMounted } from "vue"; import { ref, reactive, onMounted } from "vue";
import router from "@/router"; // import Img1 from "./images/img1.png";
import Img1 from "./images/img1.png"; // import Img2 from "./images/img2.png";
import Img2 from "./images/img2.png"; // import Img3 from "./images/img3.png";
import Img3 from "./images/img3.png"; // import Img4 from "./images/img4.png";
import Img4 from "./images/img4.png"; // import Img5 from "./images/img5.png";
import Img5 from "./images/img5.png"; // import Img6 from "./images/img6.png";
import Img6 from "./images/img6.png"; // import Img7 from "./images/img7.png";
import Img7 from "./images/img7.png"; // import Img8 from "./images/img8.png";
import Img8 from "./images/img8.png"; // import Img9 from "./images/img9.png";
import Img9 from "./images/img9.png"; // import Img10 from "./images/img10.png";
import Img10 from "./images/img10.png"; // import Img11 from "./images/img11.png";
import Img11 from "./images/img11.png"; // import Img12 from "./images/img12.png";
import Img12 from "./images/img12.png"; //getThinkDynamicsReport
import {
getThinkDynamicsReportType,
getHylyList,
getThinkDynamicsReport
} from "@/api/thinkTank/overview";
import { useRouter } from "vue-router";
const searchReport = ref('')
const router = useRouter();
const handleToReportDetail = () => { const handleToReportDetail = () => {
const route = router.resolve({ const route = router.resolve({
name: 'ReportDetail', name: 'ReportDetail',
params: { params: {
id: 1 id: 1
...@@ -135,7 +143,7 @@ const reportTypeList = ref([ ...@@ -135,7 +143,7 @@ const reportTypeList = ref([
name: '期刊文章', name: '期刊文章',
}, },
]) ])
const selectedReportTypeList = ref(['研究报告']) const selectedReportTypeList = ref([])
const researchTypeList = ref([ const researchTypeList = ref([
{ {
...@@ -155,108 +163,195 @@ const researchTypeList = ref([ ...@@ -155,108 +163,195 @@ const researchTypeList = ref([
name: '期刊文章', name: '期刊文章',
}, },
]) ])
const selectedResearchTypeList = ref(['研究报告']) const selectedResearchTypeList = ref([])
const author = ref('') // 作者 const author = ref('') // 作者
const curFooterList = ref([ const curFooterList = ref([
{ // {
title: "中国对AI的转型产业政策", // title: "中国对AI的转型产业政策",
time: "2025年6月26日", // time: "2025年6月26日",
from: "兰德科技智库", // from: "兰德科技智库",
img: Img1 // img: Img1
}, // },
{ // {
title: "中美对抗、竞争和合作跨越人工智能通用领域...", // title: "中美对抗、竞争和合作跨越人工智能通用领域...",
time: "2025年6月26日", // time: "2025年6月26日",
from: "兰德科技智库", // from: "兰德科技智库",
img: Img2 // img: Img2
}, // },
{ // {
title: "中国、智慧城市和中东：地区和美国的选择", // title: "中国、智慧城市和中东：地区和美国的选择",
time: "2025年6月26日", // time: "2025年6月26日",
from: "兰德科技智库", // from: "兰德科技智库",
img: Img3 // img: Img3
}, // },
{ // {
title: "中国对AI的转型产业政策", // title: "中国对AI的转型产业政策",
time: "2025年6月26日", // time: "2025年6月26日",
from: "兰德科技智库", // from: "兰德科技智库",
img: Img4 // img: Img4
}, // },
{ // {
title: "中美经济竞争：复杂经济和地缘政治关系中的...", // title: "中美经济竞争：复杂经济和地缘政治关系中的...",
time: "2025年6月26日", // time: "2025年6月26日",
from: "兰德科技智库", // from: "兰德科技智库",
img: Img5 // img: Img5
}, // },
{ // {
title: "中国、智慧城市和中东：留给地区和美国的选择", // title: "中国、智慧城市和中东：留给地区和美国的选择",
time: "2025年6月26日", // time: "2025年6月26日",
from: "兰德科技智库", // from: "兰德科技智库",
img: Img6 // img: Img6
}, // },
{ // {
title: "中国对AI的转型产业政策", // title: "中国对AI的转型产业政策",
time: "2025年6月26日", // time: "2025年6月26日",
from: "兰德科技智库", // from: "兰德科技智库",
img: Img7 // img: Img7
}, // },
{ // {
title: "中美对抗、竞争和合作跨越人工智能通用领域...", // title: "中美对抗、竞争和合作跨越人工智能通用领域...",
time: "2025年6月26日", // time: "2025年6月26日",
from: "", // from: "",
img: Img8 // img: Img8
}, // },
{ // {
title: "中国、智慧城市和中东：地区和美国的选择", // title: "中国、智慧城市和中东：地区和美国的选择",
time: "2025年6月26日", // time: "2025年6月26日",
from: "兰德科技智库", // from: "兰德科技智库",
img: Img9 // img: Img9
}, // },
{ // {
title: "中国对AI的转型产业政策", // title: "中国对AI的转型产业政策",
time: "2025年6月26日", // time: "2025年6月26日",
from: "兰德科技智库", // from: "兰德科技智库",
img: Img10 // img: Img10
}, // },
{ // {
title: "中美对抗、竞争和合作跨越人工智能通用领域...", // title: "中美对抗、竞争和合作跨越人工智能通用领域...",
time: "2025年6月26日", // time: "2025年6月26日",
from: "兰德科技智库", // from: "兰德科技智库",
img: Img11 // img: Img11
}, // },
{ // {
title: "中国、智慧城市和中东：地区和美国的选择", // title: "中国、智慧城市和中东：地区和美国的选择",
time: "2025年6月26日", // time: "2025年6月26日",
from: "兰德科技智库", // from: "兰德科技智库",
img: Img12 // img: Img12
} // }
]); ]);
const yearList = ref([ const yearList = ref([
{ {
label: "近一年发布", label: "近一年发布",
value: "近一年发布" value: 1
}, },
{ {
label: "近两年发布", label: "近两年发布",
value: "近两年发布" value: 2
}, },
{ {
label: "近三年发布", label: "近三年发布",
value: "近三年发布" value: 3
} }
]); ]);
const selectedYear = ref("近一年发布"); const selectedYear = ref(1);
const sort = ref(true)
//获取当前时间x年前的日期
function getDateYearsAgo(years) {
// 获取当前日期
const currentDate = new Date();
// 计算指定年数之前的日期
const pastDate = new Date(currentDate.getFullYear() - years, currentDate.getMonth(), currentDate.getDate());
// 格式化日期为 "YYYY-MM-DD" 的形式
const year = pastDate.getFullYear();
const month = String(pastDate.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
const day = String(pastDate.getDate()).padStart(2, "0");
return `${year}-${month}-${day}`;
}
//获取智库研究类型
const handleGetThinkDynamicsReportType = async () => {
try {
const res = await getThinkDynamicsReportType();
console.log("智库研究类型信息", res);
if (res.code === 200 && res.data) {
reportTypeList.value = res.data
}
} catch (error) {
console.error("获取研究类型error", error);
}
};
//获取行业领域字典
// getHylyList
const handleGetHylyList = async () => {
try {
const res = await getHylyList();
console.log("行业领域字典", res);
if (res.code === 200 && res.data) {
researchTypeList.value = res.data;
}
} catch (error) {
console.error("获取行业领域字典error", error);
}
};
const currentPage = ref(1);
// 处理页码改变事件
const handleCurrentChange = page => {
currentPage.value = page;
handleGetThinkDynamicsReport()
};
// 获取智库动态报告
const handleGetThinkDynamicsReport = async () => {
console.log(selectedReportTypeList.value, 'selectedReportTypeList.value')
console.log(selectedResearchTypeList.value, 'selectedResearchTypeList.value')
try {
const parmas = {
id: router.currentRoute._value.params.id,
startDate: getDateYearsAgo(selectedYear.value),
parmas: {
sortFun: sort.value,
authorName: author.value ? author.value : null,
currentPage: currentPage.value,
pageSize: 12,
reportTypeIds: selectedReportTypeList.value ? selectedReportTypeList.value : null,
researchTypeIds: selectedResearchTypeList.value ? selectedResearchTypeList.value : null
}
}
const res = await getThinkDynamicsReport(parmas);
console.log("智库动态报告", res);
if (res.code === 200 && res.data) {
curFooterList.value = res.data.content
total.value = res.data.totalElements
}
} catch (error) {
console.error("获取智库动态报告error", error);
}
};
const total = ref(0)
onMounted(async () => {
handleGetThinkDynamicsReportType()
handleGetHylyList()
handleGetThinkDynamicsReport()
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.main-header { .main-header {
height: 64px; height: 64px;
width: 1600px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.search-box { .search-box {
margin-top: 16px; margin-top: 16px;
display: flex; display: flex;
...@@ -266,39 +361,48 @@ const selectedYear = ref("近一年发布"); ...@@ -266,39 +361,48 @@ const selectedYear = ref("近一年发布");
border: 1px solid rgba(230, 231, 232, 1); border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px; border-radius: 4px;
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
.icon { .icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
margin: 8px 7px; margin: 8px 7px;
cursor: pointer; cursor: pointer;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
} }
.select-box { .select-box {
margin-top: 16px; margin-top: 16px;
margin-right: 5px; margin-right: 5px;
} }
} }
.main-content { .main-content {
display: flex; display: flex;
gap: 16px; gap: 16px;
.left { .left {
width: 300px; width: 300px;
height: 520px; height: 100%;
padding-bottom: 36px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1); box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
position: relative; position: relative;
.select-box { .select-box {
margin-top: 21px; margin-top: 21px;
.select-box-header { .select-box-header {
display: flex; display: flex;
gap: 17px; gap: 17px;
.icon { .icon {
margin-top: 4px; margin-top: 4px;
width: 8px; width: 8px;
...@@ -306,6 +410,7 @@ const selectedYear = ref("近一年发布"); ...@@ -306,6 +410,7 @@ const selectedYear = ref("近一年发布");
background: var(--color-main-active); background: var(--color-main-active);
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
} }
.title { .title {
height: 26px; height: 26px;
color: var(--color-main-active); color: var(--color-main-active);
...@@ -317,13 +422,16 @@ const selectedYear = ref("近一年发布"); ...@@ -317,13 +422,16 @@ const selectedYear = ref("近一年发布");
text-align: left; text-align: left;
} }
} }
.select-main { .select-main {
margin-left: 25px; margin-left: 25px;
} }
.select-main1 { .select-main1 {
width: 100px; width: 100px;
} }
.input-main{
.input-main {
margin: 10px auto; margin: 10px auto;
width: 250px; width: 250px;
height: 34px; height: 34px;
...@@ -332,15 +440,18 @@ const selectedYear = ref("近一年发布"); ...@@ -332,15 +440,18 @@ const selectedYear = ref("近一年发布");
} }
} }
} }
.right { .right {
width: 1284px; width: 1284px;
height: 1377px; height: 1377px;
.card-box { .card-box {
width: 1284px; width: 1284px;
height: 1248px; height: 1248px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
.footer-card { .footer-card {
width: 418px; width: 418px;
height: 300px; height: 300px;
...@@ -348,21 +459,26 @@ const selectedYear = ref("近一年发布"); ...@@ -348,21 +459,26 @@ const selectedYear = ref("近一年发布");
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
transition: transform 0.3s ease, box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease;
&:hover { &:hover {
transform: translateY(-3px); transform: translateY(-3px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
} }
cursor: pointer; cursor: pointer;
.footer-card-top { .footer-card-top {
width: 384px; width: 384px;
height: 206px; height: 206px;
margin: 0 auto; margin: 0 auto;
margin-top: 15px; margin-top: 15px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.footer-card-title { .footer-card-title {
margin: 0 auto; margin: 0 auto;
margin-top: 13px; margin-top: 13px;
...@@ -374,6 +490,7 @@ const selectedYear = ref("近一年发布"); ...@@ -374,6 +490,7 @@ const selectedYear = ref("近一年发布");
font-weight: 700; font-weight: 700;
line-height: 24px; line-height: 24px;
} }
.footer-card-footer { .footer-card-footer {
margin: 0 auto; margin: 0 auto;
margin-top: 5px; margin-top: 5px;
...@@ -389,10 +506,12 @@ const selectedYear = ref("近一年发布"); ...@@ -389,10 +506,12 @@ const selectedYear = ref("近一年发布");
} }
} }
} }
.right-footer { .right-footer {
margin-top: 43px; margin-top: 43px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.info { .info {
height: 19px; height: 19px;
color: rgba(132, 136, 142, 1); color: rgba(132, 136, 142, 1);
...@@ -410,4 +529,85 @@ const selectedYear = ref("近一年发布"); ...@@ -410,4 +529,85 @@ const selectedYear = ref("近一年发布");
.filter-checkbox { .filter-checkbox {
width: 180px; width: 180px;
} }
.page {
width: 1600px;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
margin: 36px 0 0 0;
padding-left: 11px;
.count {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
}
:deep(.el-pagination) {
display: flex;
align-items: center;
}
:deep(.el-pagination.is-background .el-pager li) {
min-width: 32px;
height: 32px;
line-height: 32px;
border-radius: 6px;
margin: 0 6px;
border: 1px solid rgba(0, 0, 0, 0.15);
background-color: #fff;
color: rgb(95, 101, 108);
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
}
:deep(.el-pagination.is-background .el-pager li.is-active) {
background-color: #fff;
color: rgba(22, 119, 255, 1);
border-color: rgba(22, 119, 255, 1);
}
:deep(.el-pagination.is-background .el-pager li.is-ellipsis) {
border: none;
background-color: transparent;
color: rgb(95, 101, 108);
min-width: 16px;
margin: 0 6px;
}
:deep(.el-pagination.is-background .btn-prev),
:deep(.el-pagination.is-background .btn-next) {
min-width: 32px;
height: 32px;
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.15);
background-color: #fff;
color: rgb(95, 101, 108);
font-size: 16px;
font-family: "Microsoft YaHei";
margin: 0 6px;
}
:deep(.el-pagination.is-background .btn-prev.is-disabled),
:deep(.el-pagination.is-background .btn-next.is-disabled) {
color: rgba(95, 101, 108, 0.45);
border-color: rgb(235, 238, 242);
background-color: #fff;
}
</style> </style>
\ No newline at end of file
src/views/thinkTank/index.vue
浏览文件 @ a924d505
...@@ -684,7 +684,7 @@ const box5Data = ref({ ...@@ -684,7 +684,7 @@ const box5Data = ref({
] ]
}); });
//获取当前时间十年前的日期 //获取当前时间x年前的日期
function getDateYearsAgo(years) { function getDateYearsAgo(years) {
// 获取当前日期 // 获取当前日期
const currentDate = new Date(); const currentDate = new Date();
...@@ -1202,8 +1202,9 @@ const handleGetetThinkTankReport = async () => { ...@@ -1202,8 +1202,9 @@ const handleGetetThinkTankReport = async () => {
}; };
const handleClick = tank => { const handleClick = tank => {
console.log(tank)
// router.push({ name: "ThinkTankDetail", params: { id: tank.id } }); // router.push({ name: "ThinkTankDetail", params: { id: tank.id } });
const curRoute = router.resolve({ name: "ThinkTankDetail", params: { id: tank.id } }); const curRoute = router.resolve({ name: "ThinkTankDetail", params: { id: tank.id, name: tank.name } });
window.open(curRoute.href, "_blank"); window.open(curRoute.href, "_blank");
}; };
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论