Skip to content

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

智库政策

上级 a924d505
显示空白字符变更
内嵌 并排
正在显示 包含 546 行增加 和 300 行删除
src/api/thinkTank/overview.js
浏览文件 @ 65555134
...@@ -111,3 +111,35 @@ export function getThinkDynamicsReport(params) { ...@@ -111,3 +111,35 @@ export function getThinkDynamicsReport(params) {
}) })
} }
//提出建议领域分布
export function getThinkPolicyIndustry(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/policyIndustry/${params.id}/${params.year}`,
})
}
//获取相关政策领域分布
export function getThinkPolicyIndustryTotal(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/policyIndustryTotal/${params.id}/${params.year}`,
})
}
//获取热门研究方向变化趋势
export function getThinkPolicyIndustryChange(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/policyIndustryChange/${params.id}/${params.year}`,
})
}
//获取智库政策
export function getThinkPolicy(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/policy/${params.id}/${params.startDate}`,
})
}
\ No newline at end of file
src/views/thinkTank/ThinkTankDetail/PolicyTracking/index.vue
浏览文件 @ 65555134
...@@ -12,7 +12,8 @@ ...@@ -12,7 +12,8 @@
<div class="box-main"> <div class="box-main">
<div class="select-box"> <div class="select-box">
<el-select v-model="box1SelectYear" placeholder="选择时间" style="width: 100px"> <el-select v-model="box1SelectYear" placeholder="选择时间" style="width: 100px">
<el-option v-for="item in box1YearList" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="(item, index) in box1YearList" :key="index" :label="item.label" :value="item.value"
@click="handleGetThinkPolicyIndustry()" />
</el-select> </el-select>
</div> </div>
<div id="box1Chart"></div> <div id="box1Chart"></div>
...@@ -29,22 +30,18 @@ ...@@ -29,22 +30,18 @@
<div class="box-main"> <div class="box-main">
<div class="select-box"> <div class="select-box">
<el-select v-model="box2SelectYear" placeholder="选择时间" style="width: 100px"> <el-select v-model="box2SelectYear" placeholder="选择时间" style="width: 100px">
<el-option v-for="item in box2YearList" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in box2YearList" :key="item.value" :label="item.label" :value="item.value"
@click="handleGetThinkPolicyIndustryTotal()" />
</el-select> </el-select>
</div> </div>
<div id="box2Chart"> <div id="box2Chart">
<div class="box2-item" v-for="(item, index) in box2Data" :key="index"> <div class="box2-item" v-for="(item, index) in box2Data" :key="index">
<div class="icon" :style="{ background: item.color }"></div> <div class="icon" :style="{ background: item.color }"></div>
<div class="name">{{ item.name }}</div> <div class="name">{{ item.industry }}</div>
<el-progress <el-progress :show-text="false" :color="box2ColorList[index]" style="width: 220px" stroke-width="8"
:show-text="false" :percentage="item.percent" />
:color="item.color" <div class="num">{{ item.amount + "项" }} / {{ item.totalAmount + "项" }}</div>
style="width: 220px" <div class="per">{{ item.percent + "%" }}</div>
stroke-width="8"
:percentage="item.per"
/>
<div class="num">{{ item.value + "项" }} / {{ item.total + "项" }}</div>
<div class="per">{{ item.per + "%" }}</div>
</div> </div>
<div class="box2-item"> <div class="box2-item">
<el-progress :percentage="50" /> <el-progress :percentage="50" />
...@@ -63,7 +60,8 @@ ...@@ -63,7 +60,8 @@
<div class="box-main"> <div class="box-main">
<div class="select-box"> <div class="select-box">
<el-select v-model="box3SelectYear" placeholder="选择时间" style="width: 100px"> <el-select v-model="box3SelectYear" placeholder="选择时间" style="width: 100px">
<el-option v-for="item in box3YearList" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in box3YearList" :key="item.value" :label="item.label" :value="item.value"
@click="handleGetThinkPolicyIndustryChange()" />
</el-select> </el-select>
</div> </div>
<div id="box3Chart"></div> <div id="box3Chart"></div>
...@@ -79,9 +77,13 @@ ...@@ -79,9 +77,13 @@
</div> </div>
</div> </div>
<div class="select-box"> <div class="select-box">
<el-select v-model="selectedYear" placeholder="选择时间" style="width: 120px"> <el-select v-model="selectedYear" placeholder="选择时间" style="width: 120px" @click="handleGetThinkPolicy()">
<el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
<el-select v-model="sort" placeholder="发布时间" style="width: 120px">
<el-option @click="handleGetThinkPolicy()" :key="true" label="正序" :value="true" />
<el-option @click="handleGetThinkPolicy()" :key="false" label="倒序" :value="false" />
</el-select>
</div> </div>
</div> </div>
<div class="bottom-main"> <div class="bottom-main">
...@@ -93,14 +95,13 @@ ...@@ -93,14 +95,13 @@
</div> </div>
<div class="select-main"> <div class="select-main">
<div class="checkbox-group"> <div class="checkbox-group">
<el-checkbox <!-- <el-checkbox v-for="(item, index) in areaList" :key="index" v-model="selectedAreaList" :label="item"
v-for="(item, index) in areaList" class="filter-checkbox">
:key="index"
v-model="selectedAreaList"
:label="item"
class="filter-checkbox"
>
{{ item }} {{ item }}
</el-checkbox> -->
<el-checkbox v-for="research in areaList" :key="research.id" v-model="selectedAreaList"
:label="research.id" @change="handleGetThinkPolicy()" class="filter-checkbox">
{{ research.name }}
</el-checkbox> </el-checkbox>
</div> </div>
</div> </div>
...@@ -110,20 +111,27 @@ ...@@ -110,20 +111,27 @@
<div class="right-main"> <div class="right-main">
<div class="right-main-item" v-for="(item, index) in policyList" :key="index"> <div class="right-main-item" v-for="(item, index) in policyList" :key="index">
<div class="item-left"> <div class="item-left">
<img :src="item.img" alt="" /> <img :src="item.imageUrl" alt="" />
</div> </div>
<div class="item-right"> <div class="item-right">
<div class="title">{{ item.title }}</div> <div class="title">{{ item.name }}</div>
<div class="info">{{ item.time }} · {{ item.desc }}</div> <div class="info">{{ item.times }} · {{ item.content }}</div>
<div class="tag-box"> <div class="tag-box">
<div class="tag" v-for="(tag, idx) in item.tagList" :key="idx"> <div class="tag" v-for="(tag, idx) in item.tagList" :key="idx">
{{ tag }} {{ tag }}
</div> </div>
</div> </div>
<div class="file-box"> <div class="file-box">
<div class="file" v-for="(file, idxx) in item.fileList" :key="idxx"> <div class="file" v-for="(file, idxx) in item.relationBillsList" :key="idxx">
<div class="type">{{ file.type }}</div> <div class="type">法案</div>
<div class="title">{{ file.title }}</div> <div class="title">{{ file.billName }}</div>
<div class="more">
<img src="./images/arrow-right.png" alt="" />
</div>
</div>
<div class="file" v-for="(file, idxx) in item.relationAdList" :key="idxx">
<div class="type">政令</div>
<div class="title">{{ file.adName }}</div>
<div class="more"> <div class="more">
<img src="./images/arrow-right.png" alt="" /> <img src="./images/arrow-right.png" alt="" />
</div> </div>
...@@ -134,10 +142,12 @@ ...@@ -134,10 +142,12 @@
</div> </div>
<div class="right-footer"> <div class="right-footer">
<div class="info"> <div class="info">
{{ `共105项调查` }} 共{{ total }}项调查
</div> </div>
<div class="page-box"> <div class="page-box">
<el-pagination :page-size="10" 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>
...@@ -151,49 +161,59 @@ import { ref, onMounted } from "vue"; ...@@ -151,49 +161,59 @@ import { ref, onMounted } from "vue";
import setChart from "@/utils/setChart"; import setChart from "@/utils/setChart";
import getPieChart from "./utils/piechart"; import getPieChart from "./utils/piechart";
import getMultiLineChart from "./utils/multiLineChart"; import getMultiLineChart from "./utils/multiLineChart";
import {
getThinkPolicyIndustry,
getThinkPolicyIndustryTotal,
getThinkPolicyIndustryChange,
getHylyList,
getThinkPolicy
} from "@/api/thinkTank/overview";
import Img1 from "./images/img1.png"; import { useRouter } from "vue-router";
import Img2 from "./images/img2.png";
import Img3 from "./images/img3.png"; const router = useRouter();
import Img4 from "./images/img4.png"; // import Img1 from "./images/img1.png";
// import Img2 from "./images/img2.png";
// import Img3 from "./images/img3.png";
// import Img4 from "./images/img4.png";
// 提出建议领域分布 // 提出建议领域分布
const box1Data = ref([ const box1Data = ref([
{ // {
name: "半导体", // name: "半导体",
value: 50, // value: 50,
color: "#4096FF" // color: "#4096FF"
}, // },
{ // {
name: "电子设备", // name: "电子设备",
value: 46, // value: 46,
color: "#FFA39E" // color: "#FFA39E"
}, // },
{ // {
name: "显示技术", // name: "显示技术",
value: 40, // value: 40,
color: "#ADC6FF" // color: "#ADC6FF"
}, // },
{ // {
name: "新能源", // name: "新能源",
value: 32, // value: 32,
color: "#FFC069" // color: "#FFC069"
}, // },
{ // {
name: "通信设备", // name: "通信设备",
value: 31, // value: 31,
color: "#B5F5EC" // color: "#B5F5EC"
}, // },
{ // {
name: "汽车", // name: "汽车",
value: 30, // value: 30,
color: "#B37FEB" // color: "#B37FEB"
}, // },
{ // {
name: "其他", // name: "其他",
value: 24, // value: 24,
color: "#D6E4FF" // color: "#D6E4FF"
} // }
]); ]);
const box1SelectYear = ref("2025"); const box1SelectYear = ref("2025");
...@@ -212,52 +232,78 @@ const box1YearList = ref([ ...@@ -212,52 +232,78 @@ const box1YearList = ref([
} }
]); ]);
const handleGetThinkPolicyIndustry = async () => {
try {
const parmas = {
id: router.currentRoute._value.params.id,
year: box1SelectYear.value
}
const res = await getThinkPolicyIndustry(parmas);
console.log("提出建议领域分布", res);
if (res.code === 200 && res.data) {
let data = []
res.data.map(item => {
data.push({
name: item.industry,
value: item.amount,
percent: item.percent
})
})
box1Data.value = data
const box1Chart = getPieChart(box1Data.value);
setChart(box1Chart, "box1Chart");
}
} catch (error) {
console.error("获取提出建议领域分布error", error);
}
};
// 相关政策领域分布 // 相关政策领域分布
const box2Data = ref([ const box2Data = ref([
{ // {
name: "集成电路", // name: "集成电路",
value: 2, // value: 2,
total: 10, // total: 10,
per: 20, // per: 20,
color: "#CE4F51" // color: "#CE4F51"
}, // },
{ // {
name: "人工智能", // name: "人工智能",
value: 1, // value: 1,
total: 6, // total: 6,
per: 17, // per: 17,
color: "#055FC2" // color: "#055FC2"
}, // },
{ // {
name: "通信网络", // name: "通信网络",
value: 2, // value: 2,
total: 7, // total: 7,
per: 26, // per: 26,
color: "#13A8A8" // color: "#13A8A8"
}, // },
{ // {
name: "量子科技", // name: "量子科技",
value: 1, // value: 1,
total: 2, // total: 2,
per: 50, // per: 50,
color: "#722ED1" // color: "#722ED1"
}, // },
{ // {
name: "生物科技", // name: "生物科技",
value: 3, // value: 3,
total: 7, // total: 7,
per: 43, // per: 43,
color: "#FA8C16" // color: "#FA8C16"
}, // },
{ // {
name: "能源", // name: "能源",
value: 11, // value: 11,
total: 20, // total: 20,
per: 55, // per: 55,
color: "#69B1FF" // color: "#69B1FF"
} // }
]); ]);
const box2ColorList = ref(["#CE4F51", "#055FC2", "#13A8A8", "#722ED1", "#FA8C16", "#69B1FF"])
const box2SelectYear = ref("2025"); const box2SelectYear = ref("2025");
const box2YearList = ref([ const box2YearList = ref([
{ {
...@@ -274,26 +320,38 @@ const box2YearList = ref([ ...@@ -274,26 +320,38 @@ const box2YearList = ref([
} }
]); ]);
const handleGetThinkPolicyIndustryTotal = async () => {
try {
const parmas = {
id: router.currentRoute._value.params.id,
year: box2SelectYear.value
}
const res = await getThinkPolicyIndustryTotal(parmas);
console.log("相关政策领域分布", res);
if (res.code === 200 && res.data) {
box2Data.value = res.data
}
} catch (error) {
console.error("获取相关政策领域分布error", error);
}
};
// 热门研究方向变化趋势 // 热门研究方向变化趋势
const box3Data = ref({ const box3Data = ref({
title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"], // title: ["2024-Q1", "2024-Q2", "2024-Q3", "2024-Q4"],
data: [ // data: [
{ // {
name: "人工智能", // name: "新能源",
value: [73, 32, 42, 48, 38, 49, 63, 75, 70, 86, 95, 87] // value: [1,3,4,6]
}, // },
{ // {
name: "集成电路", // name: "人工智能",
value: [8, 3, 2, 8, 9, 10, 12, 18, 16, 18, 20, 22] // value: [1,3,4,2]
}, // },
{ // ...
name: "量子科技", // ]
value: [1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 2, 3]
}
]
}); });
const box3SelectYear = ref("2025"); const box3SelectYear = ref("2024");
const box3YearList = ref([ const box3YearList = ref([
{ {
label: "2025", label: "2025",
...@@ -309,201 +367,307 @@ const box3YearList = ref([ ...@@ -309,201 +367,307 @@ const box3YearList = ref([
} }
]); ]);
const handleGetThinkPolicyIndustryChange = async () => {
try {
const parmas = {
id: router.currentRoute._value.params.id,
year: box3SelectYear.value
}
const res = await getThinkPolicyIndustryChange(parmas);
console.log("热门研究方向变化趋势", res);
if (res.code === 200 && res.data) {
// 提取所有季度信息
const quarters = res.data.map(item => item.yearQuarter);
quarters.sort(); // 按时间排序
// 提取所有行业名称
const industries = new Set();
res.data.forEach(item => {
item.industryList.forEach(industry => {
industries.add(industry.industry);
});
});
// 构建前端数据结构
const frontendData = {
title: quarters,
data: []
};
industries.forEach(industry => {
const industryData = {
name: industry,
value: quarters.map(quarter => {
const quarterData = res.data.find(q => q.yearQuarter === quarter);
const industryAmount = quarterData?.industryList.find(i => i.industry === industry)?.amount || 0;
return industryAmount;
})
};
frontendData.data.push(industryData);
});
box3Data.value = frontendData
let box3Chart = getMultiLineChart(
box3Data.value.title,
box3Data.value.data[0].value,
box3Data.value.data[1].value,
box3Data.value.data[2].value
);
setChart(box3Chart, "box3Chart");
}
} catch (error) {
console.error("获取热门研究方向变化趋势error", error);
}
};
// 搜索政策建议 // 搜索政策建议
const searchPolicy = ref(""); const searchPolicy = ref("");
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 areaList = ref(["人工智能", "半导体/芯片", "能源与气候", "国际关系", "经济政策", "国防与安全"]); const areaList = ref([]);
const selectedAreaList = ref(["人工智能", "半导体/芯片"]); const selectedAreaList = ref(null);
//获取科技领域
const handleGetHylyList = async () => {
try {
const res = await getHylyList();
console.log("智库研究类型信息", res);
if (res.code === 200 && res.data) {
areaList.value = res.data
}
} catch (error) {
console.error("获取研究类型error", error);
}
};
const policyList = ref([ const policyList = ref([
{ // {
img: Img1, // img: Img1,
title: "创建并定制针对人工智能技术的验证、确认与评估技术。", // title: "创建并定制针对人工智能技术的验证、确认与评估技术。",
time: "2025年6月26日", // time: "2025年6月26日",
desc: "保持美国在人工智能与机器学习领域的优势", // desc: "保持美国在人工智能与机器学习领域的优势",
tagList: ["人工智能", "集成电路"], // tagList: ["人工智能", "集成电路"],
fileList: [ // fileList: [
{ // {
type: "法案", // type: "法案",
title: "2024《芯片科学法案》" // title: "2024《芯片科学法案》"
}, // },
{ // {
type: "法案", // type: "法案",
title: "2024《芯片科学法案》" // title: "2024《芯片科学法案》"
} // }
] // ]
}, // },
{ // {
img: Img1, // img: Img1,
title: "为运用人工智能的新作战概念建立开发、测试与评估流程。", // title: "为运用人工智能的新作战概念建立开发、测试与评估流程。",
time: "2025年6月26日", // time: "2025年6月26日",
desc: "保持美国在人工智能与机器学习领域的优势", // desc: "保持美国在人工智能与机器学习领域的优势",
tagList: ["人工智能", "集成电路"], // tagList: ["人工智能", "集成电路"],
fileList: [ // fileList: [
{ // {
type: "法案", // type: "法案",
title: "2024《芯片科学法案》" // title: "2024《芯片科学法案》"
}, // },
{ // {
type: "法案", // type: "法案",
title: "2024《芯片科学法案》" // title: "2024《芯片科学法案》"
} // }
] // ]
}, // },
{ // {
img: Img1, // img: Img1,
title: "通过制定和维护一个前瞻性的人工智能发展路线图来管理预期，该路线图应阐明国防部在近期（一至两年）、中期（三至五年）和远期（六至十年）部署人工智能的现实目标", // title: "通过制定和维护一个前瞻性的人工智能发展路线图来管理预期，该路线图应阐明国防部在近期（一至两年）、中期（三至五年）和远期（六至十年）部署人工智能的现实目标",
time: "2025年6月26日", // time: "2025年6月26日",
desc: "保持美国在人工智能与机器学习领域的优势", // desc: "保持美国在人工智能与机器学习领域的优势",
tagList: ["人工智能", "集成电路"], // tagList: ["人工智能", "集成电路"],
fileList: [ // fileList: [
{ // {
type: "法案", // type: "法案",
title: "2024《芯片科学法案》" // title: "2024《芯片科学法案》"
}, // },
{ // {
type: "政令", // type: "政令",
title: "2025《关于优化美军作战决策结构的建议》" // title: "2025《关于优化美军作战决策结构的建议》"
} // }
] // ]
}, // },
{ // {
img: Img2, // img: Img2,
title: "考虑采取更全面的方法来打击全球供应链中强迫劳动使用的选项。", // title: "考虑采取更全面的方法来打击全球供应链中强迫劳动使用的选项。",
time: "2025年3月15日", // time: "2025年3月15日",
desc: " 美国贸易执法是否发挥了作用，能否做得更多？", // desc: " 美国贸易执法是否发挥了作用，能否做得更多？",
tagList: ["人工智能", "集成电路"], // tagList: ["人工智能", "集成电路"],
fileList: [ // fileList: [
{ // {
type: "法案", // type: "法案",
title: "2024《维吾尔强迫劳动预防法》" // title: "2024《维吾尔强迫劳动预防法》"
} // }
] // ]
}, // },
{ // {
img: Img2, // img: Img2,
title: "与利益相关者共同收集证据，为关于贸易执法的公共讨论提供信息。", // title: "与利益相关者共同收集证据，为关于贸易执法的公共讨论提供信息。",
time: "2025年3月15日", // time: "2025年3月15日",
desc: "美国贸易执法是否发挥了作用，能否做得更多？", // desc: "美国贸易执法是否发挥了作用，能否做得更多？",
tagList: ["人工智能", "集成电路"], // tagList: ["人工智能", "集成电路"],
fileList: [ // fileList: [
{ // {
type: "法案", // type: "法案",
title: "2024《维吾尔强迫劳动预防法》" // title: "2024《维吾尔强迫劳动预防法》"
} // }
] // ]
}, // },
{ // {
img: Img2, // img: Img2,
title: "推动清洁能源生产供内用，化石燃料重新配置出口。", // title: "推动清洁能源生产供内用，化石燃料重新配置出口。",
time: "2025年6月26日", // time: "2025年6月26日",
desc: "美国贸易执法是否发挥了作用，能否做得更多？", // desc: "美国贸易执法是否发挥了作用，能否做得更多？",
tagList: ["人工智能", "集成电路"], // tagList: ["人工智能", "集成电路"],
fileList: [ // fileList: [
{ // {
type: "法案", // type: "法案",
title: "2024《重塑美国人口结构法案》" // title: "2024《重塑美国人口结构法案》"
}, // },
{ // {
type: "法案", // type: "法案",
title: "2024《重塑美国人口结构法案》" // title: "2024《重塑美国人口结构法案》"
} // }
] // ]
}, // },
{ // {
img: Img2, // img: Img2,
title: "允许OPT的国际学生出国旅行并持多次入境签证重新进入美国。", // title: "允许OPT的国际学生出国旅行并持多次入境签证重新进入美国。",
time: "2025年6月26日", // time: "2025年6月26日",
desc: "中美经济竞争：复杂经济和地缘政治关系中的收益与风险", // desc: "中美经济竞争：复杂经济和地缘政治关系中的收益与风险",
tagList: ["人工智能", "集成电路"], // tagList: ["人工智能", "集成电路"],
fileList: [ // fileList: [
{ // {
type: "法案", // type: "法案",
title: "2024《重塑美国人口结构法案》" // title: "2024《重塑美国人口结构法案》"
}, // },
{ // {
type: "法案", // type: "法案",
title: "2025《开放人才法案》" // title: "2025《开放人才法案》"
} // }
] // ]
}, // },
{ // {
img: Img3, // img: Img3,
title: "增加中国公民可获得的 H-1B 签证数量。", // title: "增加中国公民可获得的 H-1B 签证数量。",
time: "2025年6月26日", // time: "2025年6月26日",
desc: "中美经济竞争：复杂经济和地缘政治关系中的收益与风险", // desc: "中美经济竞争：复杂经济和地缘政治关系中的收益与风险",
tagList: ["人工智能", "集成电路"], // tagList: ["人工智能", "集成电路"],
fileList: [ // fileList: [
{ // {
type: "法案", // type: "法案",
title: "2024《重塑美国人口结构法案》" // title: "2024《重塑美国人口结构法案》"
}, // },
{ // {
type: "法案", // type: "法案",
title: "2025《GENIUS法案》" // title: "2025《GENIUS法案》"
} // }
] // ]
}, // },
{ // {
img: Img3, // img: Img3,
title: "通过就业偏好类别增加绿卡的数量。", // title: "通过就业偏好类别增加绿卡的数量。",
time: "2025年6月26日", // time: "2025年6月26日",
desc: "中美经济竞争：复杂经济和地缘政治关系中的收益与风险", // desc: "中美经济竞争：复杂经济和地缘政治关系中的收益与风险",
tagList: ["人工智能", "集成电路"], // tagList: ["人工智能", "集成电路"],
fileList: [ // fileList: [
{ // {
type: "法案", // type: "法案",
title: "2024《重塑美国人口结构法案》" // title: "2024《重塑美国人口结构法案》"
}, // },
{ // {
type: "法案", // type: "法案",
title: "2025《开放人才法案》" // title: "2025《开放人才法案》"
} // }
] // ]
}, // },
{ // {
img: Img4, // img: Img4,
title: "推动清洁能源生产供内用，化石燃料重新配置出口。", // title: "推动清洁能源生产供内用，化石燃料重新配置出口。",
time: "2025年6月26日", // time: "2025年6月26日",
desc: "美国传统能源产业的未来：是走向终结还是持续发展？", // desc: "美国传统能源产业的未来：是走向终结还是持续发展？",
tagList: ["人工智能", "集成电路"], // tagList: ["人工智能", "集成电路"],
fileList: [ // fileList: [
{ // {
type: "法案", // type: "法案",
title: "2024《能源法案》" // title: "2024《能源法案》"
} // }
] // ]
} // }
]); ]);
//获取当前时间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 sort = ref(true)
const currentPage = ref(1);
const total = ref(0)
// 处理页码改变事件
const handleCurrentChange = page => {
currentPage.value = page;
handleGetThinkDynamicsReport()
};
const handleGetThinkPolicy = async () => {
try {
const parmas = {
id: router.currentRoute._value.params.id,
startDate: getDateYearsAgo(selectedYear.value),
parmas: {
sortFun: sort.value,
currentPage: currentPage.value,
pageSize: 12,
researchTypeIds: selectedAreaList.value ? selectedAreaList.value : null,
}
}
const res = await getThinkPolicy(parmas);
console.log("智库政策", res);
if (res.code === 200 && res.data) {
policyList.value = res.data.content
total.value = res.data.totalElements
}
} catch (error) {
console.error("获取智库政策error", error);
}
};
onMounted(() => { onMounted(() => {
const box1Chart = getPieChart(box1Data.value); handleGetThinkPolicyIndustry()
setChart(box1Chart, "box1Chart"); handleGetThinkPolicyIndustryTotal()
let box3Chart = getMultiLineChart( handleGetThinkPolicyIndustryChange()
box3Data.value.title, handleGetHylyList()
box3Data.value.data[0].value, handleGetThinkPolicy()
box3Data.value.data[1].value,
box3Data.value.data[2].value
);
setChart(box3Chart, "box3Chart");
}); });
</script> </script>
...@@ -511,12 +675,14 @@ onMounted(() => { ...@@ -511,12 +675,14 @@ onMounted(() => {
.wrap { .wrap {
width: 100%; width: 100%;
height: 100%; height: 100%;
.top { .top {
height: 420px; height: 420px;
width: 1600px; width: 1600px;
margin: 24px 0; margin: 24px 0;
display: flex; display: flex;
gap: 16px; gap: 16px;
.box { .box {
width: 520px; width: 520px;
height: 420px; height: 420px;
...@@ -525,22 +691,26 @@ onMounted(() => { ...@@ -525,22 +691,26 @@ onMounted(() => {
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);
.box-header { .box-header {
width: 520px; width: 520px;
height: 48px; height: 48px;
border-bottom: 1px solid rgba(234, 236, 238, 1); border-bottom: 1px solid rgba(234, 236, 238, 1);
display: flex; display: flex;
position: relative; position: relative;
.icon { .icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-top: 15px; margin-top: 15px;
margin-left: 22px; margin-left: 22px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.title { .title {
margin-top: 11px; margin-top: 11px;
margin-left: 18px; margin-left: 18px;
...@@ -553,6 +723,7 @@ onMounted(() => { ...@@ -553,6 +723,7 @@ onMounted(() => {
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
} }
.box-header-right { .box-header-right {
position: absolute; position: absolute;
top: 12px; top: 12px;
...@@ -567,28 +738,34 @@ onMounted(() => { ...@@ -567,28 +738,34 @@ onMounted(() => {
text-align: right; text-align: right;
} }
} }
.box-main { .box-main {
height: 360px; height: 360px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
#box1Chart { #box1Chart {
height: 360px; height: 360px;
} }
#box2Chart { #box2Chart {
width: 470px; width: 470px;
margin: 0 auto; margin: 0 auto;
margin-top: 50px; margin-top: 50px;
height: 300px; height: 300px;
.box2-item { .box2-item {
height: 30px; height: 30px;
margin-top: 20px; margin-top: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
.icon { .icon {
width: 12px; width: 12px;
height: 12px; height: 12px;
border-radius: 6px; border-radius: 6px;
} }
.name { .name {
width: 80px; width: 80px;
margin-left: 7px; margin-left: 7px;
...@@ -602,6 +779,7 @@ onMounted(() => { ...@@ -602,6 +779,7 @@ onMounted(() => {
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
} }
.num { .num {
width: 80px; width: 80px;
margin-left: 10px; margin-left: 10px;
...@@ -613,6 +791,7 @@ onMounted(() => { ...@@ -613,6 +791,7 @@ onMounted(() => {
line-height: 22px; line-height: 22px;
text-align: right; text-align: right;
} }
.per { .per {
margin-left: 5px; margin-left: 5px;
height: 22px; height: 22px;
...@@ -624,9 +803,11 @@ onMounted(() => { ...@@ -624,9 +803,11 @@ onMounted(() => {
} }
} }
} }
#box3Chart { #box3Chart {
height: 360px; height: 360px;
} }
.select-box { .select-box {
position: absolute; position: absolute;
z-index: 999; z-index: 999;
...@@ -638,12 +819,15 @@ onMounted(() => { ...@@ -638,12 +819,15 @@ onMounted(() => {
} }
} }
} }
.bottom { .bottom {
width: 1600px; width: 1600px;
.bottom-header { .bottom-header {
height: 48px; height: 48px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.search-box { .search-box {
display: flex; display: flex;
width: 300px; width: 300px;
...@@ -652,24 +836,29 @@ onMounted(() => { ...@@ -652,24 +836,29 @@ onMounted(() => {
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-right: 5px; margin-right: 5px;
} }
} }
.bottom-main { .bottom-main {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.left { .left {
width: 300px; width: 300px;
height: 483px; height: 483px;
...@@ -678,11 +867,14 @@ onMounted(() => { ...@@ -678,11 +867,14 @@ onMounted(() => {
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);
.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;
...@@ -690,6 +882,7 @@ onMounted(() => { ...@@ -690,6 +882,7 @@ onMounted(() => {
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);
...@@ -701,15 +894,18 @@ onMounted(() => { ...@@ -701,15 +894,18 @@ onMounted(() => {
text-align: left; text-align: left;
} }
} }
.select-main { .select-main {
margin-left: 25px; margin-left: 25px;
width: 160px; width: 160px;
} }
.select-main1 { .select-main1 {
width: 100px; width: 100px;
} }
} }
} }
.right { .right {
width: 1284px; width: 1284px;
height: 1670px; height: 1670px;
...@@ -718,27 +914,33 @@ onMounted(() => { ...@@ -718,27 +914,33 @@ onMounted(() => {
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);
.right-main { .right-main {
margin: 17px auto; margin: 17px auto;
width: 1209px; width: 1209px;
height: 1540px; height: 1540px;
.right-main-item { .right-main-item {
height: 154px; height: 154px;
box-sizing: border-box; box-sizing: border-box;
padding-top: 8px; padding-top: 8px;
border-bottom: 1px solid rgba(234, 236, 238, 1); border-bottom: 1px solid rgba(234, 236, 238, 1);
display: flex; display: flex;
.item-left { .item-left {
width: 57px; width: 57px;
height: 77px; height: 77px;
margin-top: 3px; margin-top: 3px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.item-right { .item-right {
margin-left: 15px; margin-left: 15px;
.title { .title {
// height: 24px; // height: 24px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
...@@ -749,6 +951,7 @@ onMounted(() => { ...@@ -749,6 +951,7 @@ onMounted(() => {
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
} }
.info { .info {
margin-top: 7px; margin-top: 7px;
height: 22px; height: 22px;
...@@ -760,10 +963,12 @@ onMounted(() => { ...@@ -760,10 +963,12 @@ onMounted(() => {
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
} }
.tag-box { .tag-box {
margin-top: 7px; margin-top: 7px;
display: flex; display: flex;
gap: 8px; gap: 8px;
.tag { .tag {
height: 22px; height: 22px;
padding: 0 8px; padding: 0 8px;
...@@ -778,10 +983,12 @@ onMounted(() => { ...@@ -778,10 +983,12 @@ onMounted(() => {
line-height: 20px; line-height: 20px;
} }
} }
.file-box { .file-box {
margin-top: 7px; margin-top: 7px;
display: flex; display: flex;
gap: 8px; gap: 8px;
.file { .file {
height: 32px; height: 32px;
padding: 0 8px; padding: 0 8px;
...@@ -791,6 +998,7 @@ onMounted(() => { ...@@ -791,6 +998,7 @@ onMounted(() => {
gap: 8px; gap: 8px;
border-radius: 4px; border-radius: 4px;
background: rgba(246, 250, 255, 1); background: rgba(246, 250, 255, 1);
.type { .type {
height: 22px; height: 22px;
padding: 0 4px; padding: 0 4px;
...@@ -802,6 +1010,7 @@ onMounted(() => { ...@@ -802,6 +1010,7 @@ onMounted(() => {
font-weight: 400; font-weight: 400;
line-height: 22px; line-height: 22px;
} }
.title { .title {
height: 24px; height: 24px;
color: rgba(5, 95, 194, 1); color: rgba(5, 95, 194, 1);
...@@ -810,9 +1019,11 @@ onMounted(() => { ...@@ -810,9 +1019,11 @@ onMounted(() => {
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
} }
.more { .more {
width: 20px; width: 20px;
height: 20px; height: 20px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -823,12 +1034,14 @@ onMounted(() => { ...@@ -823,12 +1034,14 @@ onMounted(() => {
} }
} }
} }
.right-footer { .right-footer {
margin: 0 auto; margin: 0 auto;
width: 1209px; width: 1209px;
height: 96px; height: 96px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.info { .info {
color: rgba(132, 136, 142, 1); color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论