提交 5a82c938 authored 作者: huhuiqing's avatar huhuiqing

数据总览接口对接,报告原文跳转与政策接口修改

上级 db0abf0c
...@@ -192,6 +192,16 @@ export function getThinkTankPerson(params) { ...@@ -192,6 +192,16 @@ export function getThinkTankPerson(params) {
}) })
} }
//智库报告:获取报告全局信息
export const getThinkTankReportSummary = (params) => {
return request(
{
method: 'GET',
url: `/api/thinkTankReport/summary/${params}`,
}
);
}
//获取报告内容摘要 //获取报告内容摘要
export function getThinkTankReportAbstract(params) { export function getThinkTankReportAbstract(params) {
return request({ return request({
......
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
<div class="icon"> <div class="icon">
<img src="./images/btn-icon2.png" alt="" /> <img src="./images/btn-icon2.png" alt="" />
</div> </div>
<div class="text">{{ "报告原文" }}</div> <div class="text" @click="toReport()">{{ "报告原文" }}</div>
</div> </div>
<div class="btn"> <div class="btn">
<div class="icon"> <div class="icon">
...@@ -71,16 +71,41 @@ ...@@ -71,16 +71,41 @@
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref, onMounted } from "vue";
import ReportAnalysis from './reportAnalysis/index.vue' import ReportAnalysis from './reportAnalysis/index.vue'
import PolicyTracking from './policyTracking/index.vue' import PolicyTracking from './policyTracking/index.vue'
import {
getThinkTankReportSummary
} from "@/api/thinkTank/overview";
import { useRouter } from "vue-router";
const router = useRouter();
const reportUrl = ref('')
// 获取报告全局信息
const handleGetThinkTankReportSummary = async () => {
try {
const res = await getThinkTankReportSummary(router.currentRoute._value.params.id);
console.log("报告全局信息", res);
if (res.code === 200 && res.data) {
reportUrl.value = res.data.reportUrl
}
} catch (error) {
console.error("获取报告全局信息error", error);
}
};
const toReport = () => {
window.open(reportUrl.value, "_blank");
}
const tabActiveName = ref("报告分析"); const tabActiveName = ref("报告分析");
const switchTab = name => { const switchTab = name => {
tabActiveName.value = name; tabActiveName.value = name;
}; };
onMounted(async () => {
handleGetThinkTankReportSummary()
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
...@@ -12,13 +12,8 @@ ...@@ -12,13 +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 <el-option v-for="(item, index) in box1YearList" :key="index" :label="item.label" :value="item.value"
v-for="(item, index) in box1YearList" @click="handleGetThinkPolicyIndustry()" />
:key="index"
:label="item.label"
:value="item.value"
@click="handleGetThinkPolicyIndustry()"
/>
</el-select> </el-select>
</div> </div>
<div id="box1Chart"></div> <div id="box1Chart"></div>
...@@ -35,26 +30,16 @@ ...@@ -35,26 +30,16 @@
<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 <el-option v-for="item in box2YearList" :key="item.value" :label="item.label" :value="item.value"
v-for="item in box2YearList" @click="handleGetThinkPolicyIndustryTotal()" />
: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.industry }}</div> <div class="name">{{ item.industry }}</div>
<el-progress <el-progress :show-text="false" :color="box2ColorList[index]" style="width: 170px" stroke-width="8"
:show-text="false" :percentage="item.percent" />
:color="box2ColorList[index]"
style="width: 170px"
stroke-width="8"
:percentage="item.percent"
/>
<div class="num">{{ item.amount + "项" }} / {{ item.totalAmount + "项" }}</div> <div class="num">{{ item.amount + "项" }} / {{ item.totalAmount + "项" }}</div>
<div class="per">{{ item.percent + "%" }}</div> <div class="per">{{ item.percent + "%" }}</div>
</div> </div>
...@@ -75,13 +60,8 @@ ...@@ -75,13 +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 <el-option v-for="item in box3YearList" :key="item.value" :label="item.label" :value="item.value"
v-for="item in box3YearList" @click="handleGetThinkPolicyIndustryChange()" />
: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>
...@@ -119,14 +99,8 @@ ...@@ -119,14 +99,8 @@
class="filter-checkbox"> class="filter-checkbox">
{{ item }} {{ item }}
</el-checkbox> --> </el-checkbox> -->
<el-checkbox <el-checkbox style="width: 180px" v-for="research in areaList" :key="research.id"
style="width: 180px" v-model="selectedAreaList" :label="research.id" class="filter-checkbox">
v-for="research in areaList"
:key="research.id"
v-model="selectedAreaList"
:label="research.id"
class="filter-checkbox"
>
{{ research.name }} {{ research.name }}
</el-checkbox> </el-checkbox>
</div> </div>
...@@ -140,8 +114,8 @@ ...@@ -140,8 +114,8 @@
<img :src="item.imageUrl" alt="" /> <img :src="item.imageUrl" alt="" />
</div> </div>
<div class="item-right"> <div class="item-right">
<div class="title">{{ item.name }}</div> <div class="title">{{ item.content }}</div>
<div class="info">{{ item.times }} · {{ item.content }}</div> <div class="info">{{ item.times }} · {{ item.name }}</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 }}
...@@ -169,14 +143,8 @@ ...@@ -169,14 +143,8 @@
<div class="right-footer"> <div class="right-footer">
<div class="info">{{ total }}项调查</div> <div class="info">{{ total }}项调查</div>
<div class="page-box"> <div class="page-box">
<el-pagination <el-pagination :page-size="12" background layout="prev, pager, next" :total="total"
:page-size="12" @current-change="handleCurrentChange" :current-page="currentPage" />
background
layout="prev, pager, next"
:total="total"
@current-change="handleCurrentChange"
:current-page="currentPage"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -797,6 +765,7 @@ onMounted(() => { ...@@ -797,6 +765,7 @@ onMounted(() => {
.select-box { .select-box {
margin-top: 21px; margin-top: 21px;
.select-box-header { .select-box-header {
display: flex; display: flex;
gap: 17px; gap: 17px;
......
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
<img :src="item.logo" alt="" /> <img :src="item.logo" alt="" />
</div> </div>
<div class="rank" :class="{ rank1: item.rank === 1, rank2: item.rank === 2, rank3: item.rank === 3 }"> <div class="rank" :class="{ rank1: item.rank === 1, rank2: item.rank === 2, rank3: item.rank === 3 }">
{{ "No." + item.rank }} {{ "No." + (index + 1) }}
</div> </div>
</div> </div>
<div class="card-title"> <div class="card-title">
...@@ -673,21 +673,21 @@ const messageList = ref([ ...@@ -673,21 +673,21 @@ const messageList = ref([
// 政策建议趋势分布 // 政策建议趋势分布
const box5Data = ref({ const box5Data = ref({
title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"], // title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
data: [ // data: [
{ // {
name: "人工智能", // name: "人工智能",
value: [73, 32, 42, 48, 38, 49, 63, 75, 70, 86, 95, 87] // value: [73, 32, 42, 48, 38, 49, 63, 75, 70, 86, 95, 87]
}, // },
{ // {
name: "集成电路", // name: "集成电路",
value: [8, 3, 2, 8, 9, 10, 12, 18, 16, 18, 20, 22] // value: [8, 3, 2, 8, 9, 10, 12, 18, 16, 18, 20, 22]
}, // },
{ // {
name: "量子科技", // name: "量子科技",
value: [1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 2, 3] // value: [1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 2, 3]
} // }
] // ]
}); });
//获取当前时间x年前的日期 //获取当前时间x年前的日期
...@@ -723,12 +723,45 @@ function changeBox5Data(value) { ...@@ -723,12 +723,45 @@ function changeBox5Data(value) {
} }
// 政策建议趋势分布 // 政策建议趋势分布
const handleGetThinkTankPolicyIndustryChange = async date => { const handleGetThinkTankPolicyIndustryChange = async date => {
try { try {
const res = await getThinkTankPolicyIndustryChange(date); const res = await getThinkTankPolicyIndustryChange(date);
console.log("政策建议趋势分布", res); console.log("政策建议趋势分布", res);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
const originalData = res.data
// 提取年份
const years = originalData.map(item => item.year);
// 提取所有行业名称
const industries = new Set();
originalData.forEach(item => {
item.industryList.forEach(industry => {
industries.add(industry.industry);
});
});
// 初始化目标数据结构
const result = {
title: years,
data: []
};
// 遍历每个行业,生成对应的 value 数组
industries.forEach(industry => {
const industryData = {
name: industry,
value: []
};
originalData.forEach(yearData => {
const amount = yearData.industryList.find(i => i.industry === industry)?.amount || 0;
industryData.value.push(amount);
});
result.data.push(industryData);
});
box5Data.value = result;
console.log(box5Data.value, 'console.log(box5Data.value)console.log(box5Data.value)')
} else { } else {
box5Data.value = []; box5Data.value = []
} }
} catch (error) { } catch (error) {
console.error("获取政策建议趋势分布error", error); console.error("获取政策建议趋势分布error", error);
...@@ -736,12 +769,11 @@ const handleGetThinkTankPolicyIndustryChange = async date => { ...@@ -736,12 +769,11 @@ const handleGetThinkTankPolicyIndustryChange = async date => {
}; };
const handleBox5 = async date => { const handleBox5 = async date => {
await handleGetThinkTankPolicyIndustryChange(date); await handleGetThinkTankPolicyIndustryChange(date);
let box5Chart = getMultiLineChart( console.log(box5Data.value, 'console.log(box5Data.value)console.log(box5Data.value)')
box5Data.value.title,
box5Data.value.data[0].value, let box5Chart = box5Data.value ? getMultiLineChart(
box5Data.value.data[1].value, box5Data.value
box5Data.value.data[2].value ) : ''
);
setChart(box5Chart, "box5Chart"); setChart(box5Chart, "box5Chart");
}; };
...@@ -812,6 +844,13 @@ const handleGetThinkTankPolicyIndustry = async () => { ...@@ -812,6 +844,13 @@ const handleGetThinkTankPolicyIndustry = async () => {
const res = await getThinkTankPolicyIndustry(params); const res = await getThinkTankPolicyIndustry(params);
console.log("政策建议领域分布", res); console.log("政策建议领域分布", res);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
box6Data.value = res.data.map((item, index) => ({
name: item.industry,
value: item.amount,
color: colors[index % colors.length] // 循环使用颜色数组
}));
} else { } else {
box6Data.value = []; box6Data.value = [];
} }
......
import * as echarts from 'echarts' import * as echarts from 'echarts';
const getMultiLineChart = (data) => {
// 提取标题和系列数据
// const { title, series } = data;
const title = data.title
const series = data.data
// 动态生成 series 配置
const echartsSeries = series.map((item, index) => ({
name: item.name,
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: item.color || `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.7)` // 随机颜色
},
{
offset: 1,
color: item.color ? `${item.color.replace('0.7', '0')}` : `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0)` // 随机颜色
}
])
},
emphasis: {
focus: 'series'
},
data: item.value
}));
const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => {
return { return {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
...@@ -21,14 +48,14 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => { ...@@ -21,14 +48,14 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => {
legend: { legend: {
show: true, show: true,
top: 10, top: 10,
left:'center' left: 'center'
}, },
color: ['rgba(10, 87, 166, 0.7)', 'rgba(255, 172, 77, 0.7)','rgba(114, 46, 209, 0.7)'], color: series.map(item => item.color || `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.7)`), // 动态颜色
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: dataX data: title
} }
], ],
yAxis: [ yAxis: [
...@@ -36,61 +63,8 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => { ...@@ -36,61 +63,8 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => {
type: 'value' type: 'value'
} }
], ],
series: [ series: echartsSeries
{ };
name: '人工智能', };
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(10, 87, 166, 0.7)' // 起始颜色
}, {
offset: 1,
color: 'rgba(10, 87, 166, 0)' // 结束颜色
}])
},
emphasis: {
focus: 'series'
},
data: dataY1
},
{
name: '集成电路',
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 172, 77, 0.7)' // 起始颜色
}, {
offset: 1,
color: 'rgba(255, 172, 77, 0)' // 结束颜色
}])
},
emphasis: {
focus: 'series'
},
data: dataY2
},
{
name: '量子科技',
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(114, 46, 209, 0.7)' // 起始颜色
}, {
offset: 1,
color: 'rgba(114, 46, 209, 0)' // 结束颜色
}])
},
emphasis: {
focus: 'series'
},
data: dataY3
}
]
}
}
export default getMultiLineChart export default getMultiLineChart;
\ No newline at end of file \ No newline at end of file
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论