Skip to content

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

智库百科

上级 65555134
隐藏空白字符变更
内嵌 并排
正在显示 包含 265 行增加 和 34 行删除
src/api/thinkTank/overview.js
浏览文件 @ 0bceced4
......@@ -142,4 +142,51 @@ export function getThinkPolicy(params) {
method: 'GET',
url: `/api/thinkTankInfo/policy/${params.id}/${params.startDate}`,
})
}
\ No newline at end of file
}
//智库百科基本信息
export function getThinkTankInfoBasic(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/basic/${params}`,
})
}
//获取全球分支机构
export function getThinkTankInfoBranch(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/branch/${params}`,
})
}
//获取经费来源统计
export function getThinkTankFundsTotal(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/fundsTotal/${params}`,
})
}
//获取经费来源
export function getThinkTankFundsSource(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/fundsSource/${params}`,
})
}
//获取研究领域演变
export function getThinkTankResearchAreae(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/researchArea/${params}`,
})
}
//获取核心研究人员
export function getThinkTankPerson(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/person/${params}`,
})
}
src/views/thinkTank/ThinkTankDetail/thinkInfo/index.vue
浏览文件 @ 0bceced4
......@@ -16,7 +16,7 @@
</div>
<div class="left-top-item">
<div class="item-left">{{ "成立时间：" }}</div>
<div class="item-right">{{ basicInfo.time }}</div>
<div class="item-right">{{ basicInfo.foundingDate }}年</div>
</div>
<div class="left-top-item">
<div class="item-left">{{ "总部位置：" }}</div>
......@@ -24,15 +24,15 @@
</div>
<div class="left-top-item">
<div class="item-left">{{ "机构性质：" }}</div>
<div class="item-right">{{ basicInfo.type }}</div>
<div class="item-right">{{ basicInfo.nature }}</div>
</div>
<div class="left-top-item">
<div class="item-left">{{ "员工数量：" }}</div>
<div class="item-right">{{ basicInfo.num }}</div>
<div class="item-right">约 {{ basicInfo.memnum }}名员工</div>
</div>
<div class="left-top-item">
<div class="item-left">{{ "年度预算：" }}</div>
<div class="item-right">{{ basicInfo.money }}</div>
<div class="item-right">约{{ basicInfo.budget }}亿美元</div>
</div>
</div>
</div>
......@@ -42,11 +42,11 @@
<div class="title">{{ "全球分支机构" }}</div>
</div>
<div class="left-bottom-main">
<div class="left-bottom-item">
<div class="item-left">{{ "北美:" }}</div>
<div class="item-right">{{ worldInfo.position1 }}</div>
<div class="left-bottom-item" v-for="item in worldInfo">
<div class="item-left">{{ item.area }}:</div>
<div class="item-right">{{ item.city }}</div>
</div>
<div class="left-bottom-item">
<!-- <div class="left-bottom-item">
<div class="item-left">{{ "欧洲:" }}</div>
<div class="item-right">{{ worldInfo.position2 }}</div>
</div>
......@@ -57,7 +57,7 @@
<div class="left-bottom-item">
<div class="item-left">{{ "澳大利亚:" }}</div>
<div class="item-right">{{ worldInfo.position4 }}</div>
</div>
</div> -->
</div>
</div>
</div>
......@@ -82,15 +82,15 @@
<div class="box1-main-left">
<div class="card1">
<div class="card-title">{{ "总计" }}</div>
<div class="card-num">{{ box1LeftData.total }}</div>
<div class="card-num">{{ box1LeftData.totalJe / 100000000 }}亿美元</div>
</div>
<div class="card2">
<div class="card-title">{{ "政府部门" }}</div>
<div class="card-num">{{ box1LeftData.gov }}</div>
<div class="card-num">{{ box1LeftData.zfJe }}亿美元</div>
</div>
<div class="card3">
<div class="card-title">{{ "其他机构" }}</div>
<div class="card-num">{{ box1LeftData.other }}</div>
<div class="card-num">{{ box1LeftData.otherJe }}亿美元</div>
</div>
</div>
<div class="box1-main-right" id="box1Chart"></div>
......@@ -120,12 +120,8 @@
<img src="@/assets/images/icon/card-btn-right.png" alt="" />
</div>
<div class="box2-line-box"></div>
<div
class="box2-item"
:class="{ box2ItemFooter: index % 2 }"
v-for="(item, index) in timeLineList"
:key="index"
>
<div class="box2-item" :class="{ box2ItemFooter: index % 2 }" v-for="(item, index) in timeLineList"
:key="index">
<div class="point" :class="{ pointFooter: index % 2 }">
<img src="./images/point.png" alt="" />
</div>
......@@ -133,7 +129,7 @@
<div class="title">{{ item.time }}</div>
</div>
<div class="box2-item-content">
{{ item.content }}
{{ item.describe }}
</div>
</div>
</div>
......@@ -159,14 +155,14 @@
<div class="box3-main-right">
<div class="box3-right-item" v-for="(item, index) in box3RightData" :key="index">
<div class="icon">
<img :src="item.img" alt="" />
<img :src="item.imageUrl" alt="" />
</div>
<div class="info">
<div class="info-header">
<div class="name">{{ item.name }}</div>
<div class="position">{{ item.postion }}</div>
<div class="position">{{ item.positionTitle }}</div>
</div>
<div class="info-footer">{{ item.desc }}</div>
<div class="info-footer">{{ item.describe }}</div>
</div>
</div>
</div>
......@@ -181,7 +177,18 @@ import { ref, onMounted } from "vue";
import setChart from "@/utils/setChart";
import getPieChart from "./utils/piechart";
import getTreeMapChart from "./utils/treeMapChart";
import {
getThinkTankInfoBasic,
getThinkTankInfoBranch,
getThinkTankFundsTotal,
getThinkTankFundsSource,
getThinkTankResearchAreae,
getThinkTankPerson
} from "@/api/thinkTank/overview";
import { useRouter } from "vue-router";
const router = useRouter();
import InfoImg from "./images/img.png";
import Icon1 from "./images/icon1.png";
import Icon2 from "./images/icon2.png";
......@@ -191,14 +198,29 @@ import Icon5 from "./images/icon5.png";
// 基本信息
const basicInfo = ref({
img: InfoImg,
country: "美国",
time: "1948年",
position: "美国加利福尼亚州圣莫尼卡 ",
type: "非营利性研究与分析机构 ",
num: "约1,700名员工 ",
money: "约3.5亿美元 "
// img: InfoImg,
// country: "美国",
// time: "1948年",
// position: "美国加利福尼亚州圣莫尼卡 ",
// type: "非营利性研究与分析机构 ",
// num: "约1,700名员工 ",
// money: "约3.5亿美元 "
});
// getThinkTankInfoBasic
const handleGetThinkTankInfoBasic = async () => {
try {
const res = await getThinkTankInfoBasic(router.currentRoute._value.params.id);
console.log("基本信息", res);
if (res.code === 200 && res.data) {
basicInfo.value = res.data
}
} catch (error) {
console.error("获取基本信息error", error);
}
};
// 全球分支机构
const worldInfo = ref({
position1: "圣莫尼卡（总部）、华盛顿特区、匹兹堡、波士顿",
......@@ -207,6 +229,41 @@ const worldInfo = ref({
position4: "堪培拉 "
});
// 全球分支机构
const handleGetThinkTankInfoBranch = async () => {
try {
const res = await getThinkTankInfoBranch(router.currentRoute._value.params.id);
console.log("全球分支机构", res);
if (res.code === 200 && res.data) {
// 创建一个对象来存储分组后的数据
const groupedData = {};
// 遍历数据，按 area 分组
res.data.forEach(item => {
if (!groupedData[item.area]) {
groupedData[item.area] = {
area: item.area,
city: []
};
}
groupedData[item.area].city.push(item.city);
});
// 将每个分组中的 city 转换为逗号分隔的字符串
const result = Object.values(groupedData).map(group => ({
area: group.area,
city: group.city.join(", ")
}));
worldInfo.value = result
}
} catch (error) {
console.error("获取全球分支机构error", error);
}
};
// 经费来源
const box1LeftData = ref({
total: "4.358亿美元",
......@@ -252,6 +309,41 @@ const box1ChartData = ref([
}
]);
const handleGetThinkTankFundsTotal = async () => {
try {
const res = await getThinkTankFundsTotal(router.currentRoute._value.params.id);
console.log("获取经费来源统计", res);
if (res.code === 200 && res.data) {
box1LeftData.value = res.data
}
} catch (error) {
console.error("获取经费来源统计error", error);
}
};
const handleGetThinkTankFundsSource = async () => {
try {
const res = await getThinkTankFundsSource(router.currentRoute._value.params.id);
console.log("获取经费来源", res);
if (res.code === 200 && res.data) {
let data = []
res.data.map(item => {
data.push({
name: item.institution,
value: item.amount,
})
})
box1ChartData.value = data
const box1Chart = getPieChart(box1ChartData.value);
setChart(box1Chart, "box1Chart");
}
} catch (error) {
console.error("获取经费来源error", error);
}
};
// 研究领域演变
const timeLineList = ref([
{
......@@ -276,7 +368,18 @@ const timeLineList = ref([
}
]);
const handleGetThinkTankResearchAreae = async () => {
try {
const res = await getThinkTankResearchAreae(router.currentRoute._value.params.id);
console.log("研究领域演变", res);
if (res.code === 200 && res.data) {
timeLineList.value = res.data
}
} catch (error) {
console.error("获取研究领域演变error", error);
}
};
// 核心研究人员
const handleBox3Chart = () => {
// 将分类数据转换为树状图格式
......@@ -361,9 +464,26 @@ const box3RightData = ref([
}
]);
const handleGetThinkPerson = async () => {
try {
const res = await getThinkTankPerson(router.currentRoute._value.params.id);
console.log("核心研究人员", res);
if (res.code === 200 && res.data) {
box3RightData.value = res.data
}
} catch (error) {
console.error("获取核心研究人员error", error);
}
};
onMounted(() => {
const box1Chart = getPieChart(box1ChartData.value);
setChart(box1Chart, "box1Chart");
handleGetThinkTankInfoBasic()
handleGetThinkTankInfoBranch()
handleGetThinkTankFundsTotal()
handleGetThinkTankFundsSource()
handleGetThinkTankResearchAreae()
handleGetThinkPerson()
handleBox3Chart();
});
......@@ -375,17 +495,20 @@ onMounted(() => {
height: 100%;
display: flex;
gap: 16px;
.left {
margin-top: 16px;
width: 480px;
height: 796px;
height: 100%;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.left-box-header {
display: flex;
.icon {
margin-top: 5px;
width: 8px;
......@@ -393,6 +516,7 @@ onMounted(() => {
border-radius: 0 4px 4px 0;
background: var(--color-main-active);
}
.title {
margin-left: 14px;
color: var(--color-main-active);
......@@ -404,26 +528,31 @@ onMounted(() => {
text-align: left;
}
}
.left-top {
margin-top: 14px;
height: 515px;
.img-box {
width: 437px;
height: 204px;
margin: 0 auto;
margin-top: 16px;
margin-bottom: 22px;
img {
width: 100%;
height: 100%;
}
}
.left-top-item {
display: flex;
margin-top: 12px;
width: 332px;
height: 24px;
margin-left: 34px;
.item-left {
width: 88px;
height: 24px;
......@@ -435,6 +564,7 @@ onMounted(() => {
letter-spacing: 1px;
text-align: left;
}
.item-right {
width: 240px;
height: 24px;
......@@ -448,14 +578,17 @@ onMounted(() => {
}
}
}
.left-bottom {
.left-bottom-main {
margin-top: 4px;
.left-bottom-item {
display: flex;
width: 354px;
margin-left: 34px;
margin-top: 12px;
.item-left {
width: 88px;
height: 24px;
......@@ -467,6 +600,7 @@ onMounted(() => {
letter-spacing: 1px;
text-align: left;
}
.item-right {
margin-left: 4px;
width: 240px;
......@@ -482,9 +616,11 @@ onMounted(() => {
}
}
}
.right {
width: 1104px;
height: 1245px;
.box {
width: 1104px;
height: 390px;
......@@ -494,10 +630,12 @@ onMounted(() => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 20px;
width: 8px;
......@@ -505,6 +643,7 @@ onMounted(() => {
border-radius: 0 4px 4px 0;
background: var(--color-main-active);
}
.title {
margin-left: 14px;
margin-top: 20px;
......@@ -516,6 +655,7 @@ onMounted(() => {
font-weight: 700;
line-height: 16px;
}
.header-right {
position: absolute;
top: 14px;
......@@ -523,9 +663,11 @@ onMounted(() => {
display: flex;
justify-content: flex-end;
gap: 4px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
......@@ -533,17 +675,21 @@ onMounted(() => {
}
}
}
.box1-main {
display: flex;
.box1-main-left {
width: 156px;
margin-left: 41px;
margin-top: 26px;
.card1 {
width: 156px;
height: 72px;
border-radius: 4px;
background: linear-gradient(180deg, rgba(230, 244, 255, 1), rgba(230, 244, 255, 0) 100%);
.card-title {
height: 24px;
margin-top: 8px;
......@@ -556,6 +702,7 @@ onMounted(() => {
letter-spacing: 0px;
text-align: left;
}
.card-num {
margin-top: 5px;
margin-left: 19px;
......@@ -569,12 +716,14 @@ onMounted(() => {
text-align: left;
}
}
.card2 {
margin-top: 20px;
width: 156px;
height: 72px;
border-radius: 4px;
background: linear-gradient(180deg, rgba(255, 241, 240, 1), rgba(255, 241, 240, 0) 100%);
.card-title {
height: 24px;
margin-top: 8px;
......@@ -587,6 +736,7 @@ onMounted(() => {
letter-spacing: 0px;
text-align: left;
}
.card-num {
margin-top: 5px;
margin-left: 19px;
......@@ -600,12 +750,14 @@ onMounted(() => {
text-align: left;
}
}
.card3 {
margin-top: 20px;
width: 156px;
height: 72px;
border-radius: 4px;
background: linear-gradient(180deg, rgba(230, 255, 251, 1), rgba(230, 255, 251, 0) 100%);
.card-title {
height: 24px;
margin-top: 8px;
......@@ -618,6 +770,7 @@ onMounted(() => {
letter-spacing: 0px;
text-align: left;
}
.card-num {
margin-top: 5px;
margin-left: 19px;
......@@ -632,6 +785,7 @@ onMounted(() => {
}
}
}
.box1-main-right {
margin-left: 38px;
margin-top: 26px;
......@@ -639,11 +793,13 @@ onMounted(() => {
height: 270px;
}
}
.box2-main {
height: 320px;
display: flex;
position: relative;
padding-left: 150px;
.box2-arrow-left {
width: 24px;
height: 48px;
......@@ -651,11 +807,13 @@ onMounted(() => {
left: 0;
top: 130px;
z-index: 999;
img {
width: 100%;
height: 100%;
}
}
.box2-arrow-right {
width: 24px;
height: 48px;
......@@ -663,6 +821,7 @@ onMounted(() => {
right: 0;
top: 130px;
z-index: 999;
img {
width: 100%;
height: 100%;
......@@ -677,6 +836,7 @@ onMounted(() => {
width: 1100px;
background: url("./images/line-bg.png") repeat;
}
.box2-item {
margin-top: 4px;
width: 300px;
......@@ -686,9 +846,11 @@ onMounted(() => {
padding-left: 13px;
margin-left: -100px;
border-left: 1px solid #0a57a6;
.box2-item-header {
display: flex;
width: 240px;
.title {
color: var(--color-main-active);
height: 26px;
......@@ -697,6 +859,7 @@ onMounted(() => {
font-weight: 700;
}
}
.box2-item-content {
width: 210px;
min-height: 48px;
......@@ -711,28 +874,33 @@ onMounted(() => {
line-height: 24px;
overflow: hidden;
}
.point {
position: absolute;
left: -8px;
bottom: -7px;
width: 15px;
height: 15px;
img {
width: 100%;
height: 100%;
}
}
.pointFooter {
position: absolute;
left: -8px;
top: -7px;
width: 15px;
height: 15px;
img {
width: 100%;
height: 100%;
}
}
.time {
height: 24px;
color: var(--color-main-active);
......@@ -748,6 +916,7 @@ onMounted(() => {
left: 0;
}
}
.box2ItemFooter {
margin-top: 154px;
margin-left: -100px;
......@@ -758,35 +927,43 @@ onMounted(() => {
.box3-main {
display: flex;
.box3-main-left {
width: 536px;
height: 326px;
margin-left: 10px;
}
.box3-main-right {
margin-left: 10px;
width: 536px;
height: 326px;
.box3-right-item {
display: flex;
width: 520px;
height: 64px;
align-items: center;
.icon {
width: 48px;
height: 48px;
margin-left: 8px;
img {
width: 100%;
height: 100%;
}
}
.info {
width: 459px;
margin-left: 13px;
.info-header {
display: flex;
justify-content: space-between;
.name {
height: 24px;
color: rgba(59, 65, 75, 1);
......@@ -796,6 +973,7 @@ onMounted(() => {
line-height: 24px;
letter-spacing: 1px;
}
.position {
height: 22px;
color: var(--color-main-active);
......@@ -807,6 +985,7 @@ onMounted(() => {
text-align: right;
}
}
.info-footer {
height: 22px;
color: rgba(95, 101, 108, 1);
......@@ -816,6 +995,12 @@ onMounted(() => {
line-height: 22px;
letter-spacing: 0px;
text-align: left;
white-space: nowrap;
/* 禁止自动换行 */
overflow: hidden;
/* 隐藏超出部分 */
text-overflow: ellipsis;
/* 显示省略号 */
}
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论