Skip to content

R
risk-monitor
提交 3c102401 authored 作者: 胡卉清's avatar 胡卉清
浏览文件
操作

合并分支 'dev_hhq' 到 'master'

Dev hhq 查看合并请求 !81
上级 c49dbacc dceaf44c
显示空白字符变更
内嵌 并排
正在显示 包含 774 行增加 和 257 行删除
src/api/innovationSubject/overview.js
浏览文件 @ 3c102401
// 智库概览信息
import request from "@/api/request.js";
// 获取新闻资讯
/**
* @param {moduleId}
*/
export function getNews(moduleId = "0105") {
return request({
method: 'GET',
url: `/api/commonFeature/news/${moduleId}`,
})
}
/**
* 社交媒体
*/
export function getSocialMediaInfo(moduleId = "0105") {
return request({
method: "GET",
url: `/api/commonFeature/remarks/${moduleId}`
})
}
// 获取法案风险信号
/**
* @param {moduleId}
*/
export function getBillRiskSignal(moduleId = "0105") {
return request({
method: 'GET',
url: `/api/commonFeature/riskSignal/${moduleId}`,
})
}
//创新主体主页:统计不同创新主体类型对应的主体数量
export function getCountSubjectType() {
return request({
......@@ -59,4 +94,86 @@ export function getResearchFieldSubjectType(params) {
params
})
}
/***********详情页 */
//创新主体详情:基本信息
export function getInfo(params) {
return request({
method: 'GET',
url: `/api/innovateSubject/info/${params.id}`,
params
})
}
//最新动态
export function getDynamics(params) {
return request({
method: 'GET',
url: `/api/innovateSubject/dynamics/${params.orgId}`,
params
})
}
//创新主体详情:历史事件轴
export function getEventList(params) {
return request({
method: 'GET',
url: `/api/innovateSubject/eventList/${params.id}`,
params
})
}
//创新主体详情:重点人物
export function getPersonList(params) {
return request({
method: 'GET',
url: `/api/innovateSubject/personList/${params.id}`,
params
})
}
//创新主体科研实力:专利数量统计
export function getPatentList(params) {
return request({
method: 'GET',
url: `/api/innovateSubject/patentList/${params.id}`,
params
})
}
// 创新主体科研实力:论文数量统计
export function getPaperList(params) {
return request({
method: 'GET',
url: `/api/innovateSubject/paperList/${params.id}`,
params
})
}
//创新主体科研实力:经费增长情况
export function getFundGrowth(params) {
return request({
method: 'GET',
url: `/api/innovateSubject/fundGrowth/${params.id}`,
params
})
}
//创新主体科研实力:经费来源
export function getFundFromList(params) {
return request({
method: 'GET',
url: `/api/innovateSubject/fundFromList/${params.id}`,
params
})
}
//创新主体科研实力:经费分配
export function getFundToList(params) {
return request({
method: 'GET',
url: `/api/innovateSubject/fundToList/${params.id}`,
params
})
}
src/router/modules/InnovationSubject.js
浏览文件 @ 3c102401
......@@ -13,7 +13,7 @@ const innovationSubjectRoutes = [
}
},
{
path: "/InnovativeInstitutions",
path: "/InnovativeInstitutions/:id",
name: "InnovativeInstitutions",
component: InnovationInstitution,
meta: {
......
src/views/bill/background/index.vue
浏览文件 @ 3c102401
......@@ -39,13 +39,8 @@
{{ `共有${total}条${box1BtnActive === 1 ? "涉华" : "全部"}背景` }}
</div>
<div class="page-box">
<el-pagination
background
layout="prev, pager, next"
:total="total"
v-model:current-page="currentPage"
@current-change="handleGetBillBackground"
/>
<el-pagination background layout="prev, pager, next" :total="total" v-model:current-page="currentPage"
@current-change="handleGetBillBackground" />
</div>
</div>
</div>
......@@ -119,21 +114,13 @@
</div> -->
<div class="right-box1-main">
<div class="right-box1-main-top">
<el-icon
style="margin-top: 20px; cursor: pointer"
size="20"
:color="currentIndex > 0 ? '#5f656c' : '#ccc'"
@click="handlePrev"
><CaretLeft
/></el-icon>
<el-icon style="margin-top: 20px; cursor: pointer" size="20"
:color="currentIndex > 0 ? '#5f656c' : '#ccc'" @click="handlePrev">
<CaretLeft />
</el-icon>
<div class="user-list-container">
<div class="user-list-wrapper" :style="{ transform: `translateX(-${currentIndex * 110}px)` }">
<div
class="user-box"
v-for="(item, index) in personList"
:key="index"
@click="handleClickUser(item)"
>
<div class="user-box" v-for="(item, index) in personList" :key="index" @click="handleClickUser(item)">
<div class="img-box">
<img :src="item.image" alt="" />
<div class="icon1">
......@@ -149,21 +136,14 @@
</div>
</div>
</div>
<el-icon
style="margin-top: 20px; cursor: pointer"
size="20"
:color="currentIndex < personList.length - 4 ? '#5f656c' : '#ccc'"
@click="handleNext"
><CaretRight
/></el-icon>
<el-icon style="margin-top: 20px; cursor: pointer" size="20"
:color="currentIndex < personList.length - 4 ? '#5f656c' : '#ccc'" @click="handleNext">
<CaretRight />
</el-icon>
</div>
<div class="right-box1-main-bottom">
<WordCloudMap
:data="wordCloudData"
:selectedName="selectedIndustryName"
shape="circle"
@wordClick="handleWordClick"
/>
<WordCloudMap :data="wordCloudData" :selectedName="selectedIndustryName" shape="circle"
@wordClick="handleWordClick" />
</div>
</div>
</div>
......@@ -320,7 +300,7 @@ const handleGetBillBackground = async () => {
console.log("立法背景", res);
backgroundList.value = res.data.content;
total.value = res.data.totalElements; // 假设API返回totalElements
} catch (error) {}
} catch (error) { }
};
// 获取相关事件
......@@ -345,7 +325,7 @@ const handleGetRelatedEvent = async () => {
item.image = event5;
}
});
} catch (error) {}
} catch (error) { }
};
// 议员相关性分析
......@@ -386,7 +366,7 @@ const handleGetBillPersonAnalyze = async isOppose => {
wordCloudData.value = [];
aboutUserList.value = [];
}
} catch (error) {}
} catch (error) { }
};
......@@ -408,7 +388,7 @@ const handleGetBillPersonAnalyzeDy = async () => {
icon: userIcon,
icon1: m.party === "共和党" ? userIcon2 : userIcon1
}));
} catch (error) {}
} catch (error) { }
};
onMounted(() => {
......@@ -424,10 +404,12 @@ onMounted(() => {
height: 100%;
box-sizing: border-box;
display: flex;
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 18px;
width: 8px;
......@@ -435,6 +417,7 @@ onMounted(() => {
border-radius: 0 4px 4px 0;
background: var(--color-main-active);
}
.title {
margin-left: 14px;
margin-top: 14px;
......@@ -445,15 +428,18 @@ onMounted(() => {
font-size: 20px;
font-weight: 700;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 84px;
display: flex;
.btn {
margin-left: 8px;
}
}
.header-right {
position: absolute;
top: 14px;
......@@ -461,9 +447,11 @@ onMounted(() => {
display: flex;
justify-content: flex-end;
gap: 4px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
......@@ -471,14 +459,17 @@ onMounted(() => {
}
}
}
.background-wrap-left {
width: 1150px;
margin-top: 16px;
.background-wrap-left-box1 {
width: 1150px;
height: 415px;
background: #fff;
border-radius: 4px;
.box1-main {
.box1-main-center {
margin: 0 22px;
......@@ -488,6 +479,7 @@ onMounted(() => {
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
.box1-main-item {
width: 544px;
height: 48px;
......@@ -497,6 +489,7 @@ onMounted(() => {
background: rgba(255, 255, 255, 1);
display: flex;
margin-top: 8px;
.id {
width: 24px;
height: 24px;
......@@ -509,6 +502,7 @@ onMounted(() => {
font-weight: 400;
margin: 12px 16px 12px 18px;
}
.title {
width: 440px;
height: 48px;
......@@ -520,6 +514,7 @@ onMounted(() => {
text-align: left;
overflow: hidden;
}
.share {
margin-left: 13px;
margin-top: 16px;
......@@ -527,6 +522,7 @@ onMounted(() => {
height: 16px;
padding: 2px;
cursor: pointer;
img {
width: 100%;
height: 100%;
......@@ -534,11 +530,13 @@ onMounted(() => {
}
}
}
.box1-main-footer {
margin: 30px 22px 0 22px;
height: 22px;
display: flex;
justify-content: space-between;
.info {
height: 22px;
line-height: 22px;
......@@ -551,18 +549,21 @@ onMounted(() => {
}
}
}
.background-wrap-left-box2 {
margin-top: 15px;
width: 1150px;
height: 415px;
background: #fff;
border-radius: 4px;
.box2-main {
// margin-top: 9px;
width: 1110px;
margin-left: 23px;
height: 349px;
overflow-y: auto;
.box2-main-item {
width: 1103px;
height: 60px;
......@@ -570,21 +571,26 @@ onMounted(() => {
box-sizing: border-box;
padding: 6px 8px;
display: flex;
&:hover {
background: rgba(225, 225, 225, 0.3);
}
.left {
width: 64px;
height: 48px;
border-radius: 2px;
img {
width: 64px;
height: 48px;
}
}
.center {
margin-left: 14px;
width: 900px;
.title {
height: 22px;
color: rgba(59, 65, 75, 1);
......@@ -598,6 +604,7 @@ onMounted(() => {
text-overflow: ellipsis;
white-space: nowrap;
}
.content {
margin-top: 2px;
height: 22px;
......@@ -613,6 +620,7 @@ onMounted(() => {
white-space: nowrap;
}
}
.right {
margin-left: 25px;
line-height: 60px;
......@@ -626,14 +634,17 @@ onMounted(() => {
}
}
}
.box2-footer {
margin-top: 7px;
display: flex;
justify-content: center;
.btn-more {
width: 108px;
height: 32px;
cursor: pointer;
img {
width: 100%;
height: 100%;
......@@ -642,6 +653,7 @@ onMounted(() => {
}
}
}
.background-wrap-right {
margin-right: 18px;
margin-left: 16px;
......@@ -650,22 +662,27 @@ onMounted(() => {
height: 845px;
background: #fff;
border-radius: 4px;
.background-wrap-right-main {
.right-box1 {
height: 365px;
.right-box1-header {
height: 22px;
margin-left: 22px;
display: flex;
.icon {
margin: 1px 12px 3px 0;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.title {
height: 22px;
color: rgba(95, 101, 108, 1);
......@@ -677,37 +694,45 @@ onMounted(() => {
text-align: left;
}
}
.right-box1-main {
width: 502px;
margin-top: 17px;
.right-box1-main-top {
margin-left: 16px;
width: 544px;
display: flex;
justify-content: space-between;
.user-list-container {
width: 440px; // 4个 user-box 的宽度 (110 * 4)
overflow: hidden;
.user-list-wrapper {
display: flex;
transition: transform 0.3s ease;
}
}
.user-box {
width: 110px;
flex-shrink: 0;
height: 80px;
.img-box {
width: 48px;
height: 48px;
position: relative;
margin: 0 auto;
img {
width: 100%;
height: 100%;
border-radius: 50%; // 圆形头像
object-fit: cover;
}
.icon1 {
position: absolute;
left: 5px;
......@@ -717,11 +742,13 @@ onMounted(() => {
border-radius: 10px;
padding: 2px;
background: rgba(255, 255, 255, 0.8);
img {
width: 100%;
height: 100%;
}
}
.icon2 {
position: absolute;
right: 5px;
......@@ -731,12 +758,14 @@ onMounted(() => {
border-radius: 10px;
padding: 2px;
background: rgba(255, 255, 255, 0.8);
img {
width: 100%;
height: 100%;
}
}
}
.name {
margin-top: 10px;
height: 14px;
......@@ -756,6 +785,7 @@ onMounted(() => {
}
}
}
.right-box1-main-bottom {
margin: 17px 16px 0 16px;
border-top: 1px solid rgba(243, 243, 244, 1);
......@@ -781,8 +811,10 @@ onMounted(() => {
// }
}
}
.right-box1-footer {
display: flex;
.left {
width: 70px;
height: 18px;
......@@ -794,6 +826,7 @@ onMounted(() => {
margin-left: 26px;
margin-top: 23px;
}
.right {
flex: 1;
display: flex;
......@@ -801,6 +834,7 @@ onMounted(() => {
margin-right: 20px;
margin-top: 20px;
justify-content: space-between;
.right-tag {
padding: 1px 8px 1px 8px;
// box-sizing: border-box;
......@@ -812,21 +846,25 @@ onMounted(() => {
font-size: 14px;
font-weight: 400;
}
.tag1 {
border: 1px solid rgba(186, 224, 255, 1);
background: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.tag2 {
border: 1px solid rgba(217, 247, 190, 1);
background: rgba(246, 255, 237, 1);
color: rgba(82, 196, 26, 1);
}
.tag3 {
border: 1px solid rgba(255, 204, 199, 1);
background: rgba(255, 241, 240, 1);
color: rgba(255, 77, 79, 1);
}
.tag4 {
border: 1px solid rgba(255, 241, 184, 1);
background: rgba(255, 251, 230, 1);
......@@ -835,22 +873,27 @@ onMounted(() => {
}
}
}
.right-box2 {
height: 423px;
.right-box2-header {
height: 22px;
margin-left: 22px;
padding-top: 10px;
display: flex;
.icon {
margin: 1px 12px 3px 0;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.title {
height: 22px;
color: rgba(95, 101, 108, 1);
......@@ -860,6 +903,7 @@ onMounted(() => {
line-height: 22px;
letter-spacing: 0px;
text-align: left;
.title-active {
color: var(--color-main-active);
font-family: Microsoft YaHei;
......@@ -868,6 +912,7 @@ onMounted(() => {
}
}
}
.right-box2-center {
height: 345px;
overflow: auto;
......@@ -875,6 +920,7 @@ onMounted(() => {
margin-top: 19px;
margin-left: 16px;
width: 544px;
.user-box {
cursor: pointer;
width: 538px;
......@@ -883,22 +929,27 @@ onMounted(() => {
border-bottom: 1px solid rgba(241, 243, 246, 1);
margin-bottom: 0;
display: flex;
&:last-child {
border-bottom: none;
}
.user-left {
margin-left: 14px;
margin-top: 12px;
.img-box {
width: 56px;
height: 56px;
position: relative;
img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.icon1 {
position: absolute;
left: -2px;
......@@ -912,12 +963,14 @@ onMounted(() => {
display: flex;
align-items: center;
justify-content: center;
img {
width: 14px;
height: 14px;
border-radius: 0;
}
}
.icon2 {
position: absolute;
right: -2px;
......@@ -931,6 +984,7 @@ onMounted(() => {
display: flex;
align-items: center;
justify-content: center;
img {
width: 14px;
height: 14px;
......@@ -939,12 +993,15 @@ onMounted(() => {
}
}
}
.user-right {
margin-left: 16px;
flex: 1;
:deep(.text-ellipsis) {
white-space: normal;
}
.name {
margin-top: 10px;
height: 24px;
......@@ -954,6 +1011,7 @@ onMounted(() => {
font-size: 16px;
font-weight: 700;
}
.content {
margin-top: 4px;
color: #666;
......@@ -972,6 +1030,7 @@ onMounted(() => {
}
}
}
// .right-box2-footer {
// margin-top: 7px;
// display: flex;
......@@ -994,15 +1053,18 @@ onMounted(() => {
:deep(.el-steps--simple) {
padding: 6px 10px;
}
:deep(.el-timeline-item) {
padding-bottom: 5px !important;
}
:deep(.el-timeline-item__timestamp) {
color: rgba(95, 101, 108, 1) !important;
font-family: Microsoft YaHei !important;
font-size: 14px !important;
font-weight: 600 !important;
}
.timeline-content {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
......
src/views/innovationSubject/index.vue
浏览文件 @ 3c102401
......@@ -158,16 +158,16 @@
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
<div class="item-left" :class="{
itemLeftStatus1: item.status === '一般风险',
itemLeftStatus2: item.status === '重大风险'
itemLeftStatus1: item.signalLevel === '一般风险',
itemLeftStatus2: item.signalLevel === '重大风险'
}">
{{ item.status }}
{{ item.signalLevel }}
</div>
<div class="item-right">
<div class="text">
{{ item.title }}
{{ item.signalTitle }}
</div>
<div class="time">{{ item.time }}</div>
<div class="time">{{ item.signalTime }}</div>
</div>
</div>
</div>
......@@ -194,14 +194,14 @@
<div class="box3-main">
<div class="box3-item" v-for="(news, index) in newsList" :key="index">
<div class="left">
<img :src="news.img" alt="" />
<img :src="news.newsImage" alt="" />
</div>
<div class="right">
<div class="right-top">
<div class="title">{{ news.title }}</div>
<div class="time">{{ news.from }}</div>
<div class="title">{{ news.newsTitle }}</div>
<div class="time">{{ news.newsDate + '.' + news.newsOrg }}</div>
</div>
<div class="right-footer">{{ news.content }}</div>
<div class="right-footer">{{ news.newsContent }}</div>
</div>
</div>
</div>
......@@ -216,14 +216,14 @@
<div class="box4-main">
<div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
<div class="left">
<img :src="item.img" alt="" />
<img :src="item.personImage" alt="" />
</div>
<div class="right">
<div class="right-top">
<div class="name">{{ item.name }}</div>
<div class="time">{{ item.time }}</div>
<div class="name">{{ item.personName }}</div>
<div class="time">{{ item.time + '.' + item.orgName }}</div>
</div>
<div class="content">{{ item.content }}</div>
<div class="content">{{ item.remarks }}</div>
</div>
</div>
</div>
......@@ -367,7 +367,8 @@
</div>
<div class="home-main-footer-main">
<div style=" width: 1600px;">
<div class="footer-main-item" v-for="item in universityList" :key="item.name" @click="handleClickToDetail">
<div class="footer-main-item" v-for="item in universityList" :key="item.name"
@click="handleClickToDetail(item.orgId)">
<img :src="item.logoUrl" style="height: 32px; width: 32px;" />
<div class="item-text">{{ item.orgName }}</div>
<div class="item-text2">{{ item.address }}</div>
......@@ -411,6 +412,9 @@ import getCalendarHeatChart from "./utils/cleandarHeat";
import EChart from "@/components/Chart/index.vue";
import { pieOption, raderOption } from "./utils/charts";
import {
getNews,
getSocialMediaInfo,
getBillRiskSignal,
getCountGeography,
getCountSubjectType,
getSubjectTypeList,
......@@ -559,9 +563,11 @@ const handleGetCountGeography = async () => {
}
};
// 点击查看详情
const handleClickToDetail = () => {
const route = router.resolve("/InnovativeInstitutions");
window.open(route.href, "_blank");
const handleClickToDetail = (university) => {
const curRoute = router.resolve({ name: "InnovativeInstitutions", params: { id: university } });
window.open(curRoute.href, "_blank");
// const route = router.resolve("/InnovativeInstitutions");
// window.open(route.href, "_blank");
};
// 查看更多风险信号
......@@ -614,7 +620,17 @@ const warningList = ref([
status: "重大风险"
}
]);
const handleGetBillRiskSignal = async () => {
try {
const res = await getBillRiskSignal();
console.log("风险信号", res);
if (res.code === 200 && res.data) {
warningList.value = res.data
}
} catch (error) {
console.error("获取风险信号error", error);
}
};
// 新闻资讯
const newsList = ref([
{
......@@ -648,6 +664,18 @@ const newsList = ref([
from: "11-2 · ​福克斯新闻网"
}
]);
const handleGetNews = async () => {
try {
const res = await getNews();
console.log("新闻资讯", res);
if (res.code === 200 && res.data) {
newsList.value = res.data
}
} catch (error) {
console.error("获取新闻资讯error", error);
}
};
// 社交媒体
const messageList = ref([
......@@ -670,7 +698,17 @@ const messageList = ref([
content: `提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。`
}
]);
const handleGetSocialMediaInfo = async () => {
try {
const res = await getSocialMediaInfo();
console.log("社交媒体", res);
if (res.code === 200 && res.data) {
messageList.value = res.data
}
} catch (error) {
console.error("获取社交媒体error", error);
}
};
// 政令涉及领域
const chart1Data = ref([
......@@ -935,7 +973,6 @@ const areaList = ref([
const categoryList1 = ref(["研究型大学", "国家实验室", "科技企业", "国防承包商"]);
const activeCate1 = ref('');
//类型列表
const handleGetSubjectTypeList = async () => {
try {
......@@ -1000,6 +1037,9 @@ const handleToPosi = id => {
};
onMounted(async () => {
handleGetNews()
handleGetSocialMediaInfo()
handleGetBillRiskSignal()
await handleGetSubjectTypeList()
handleGetCountGeography()
handleGetCountSubjectType()
......@@ -1664,7 +1704,7 @@ onMounted(async () => {
display: flex;
.text {
width: 348px;
width: 310px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
......
src/views/innovationSubject/innovativeInstitutions/index.vue
浏览文件 @ 3c102401
......@@ -2,14 +2,14 @@
<div class="wrap">
<div class="header">
<div class="header-left">
<img src="./assets/images/icon-harvard.png" alt="" />
<img :src="institutionInfo.logoUrl" alt="" />
</div>
<div class="header-right">
<div class="title">{{ institutionInfo.name }}</div>
<div class="en-title">{{ institutionInfo.enName }}</div>
<div class="desc">{{ institutionInfo.desc }}</div>
<div class="title">{{ institutionInfo.orgName }}</div>
<div class="en-title">{{ institutionInfo.orgNameEn }}</div>
<div class="desc">{{ institutionInfo.orgIntroduction }}</div>
<div class="tag-box">
<div class="tag" v-for="(tag, index) in institutionInfo.tagList" :key="index">
<div class="tag" v-for="(tag, index) in institutionInfo.taglist" :key="index">
{{ tag }}
</div>
</div>
......@@ -18,17 +18,12 @@
<div class="icon">
<img src="@/assets/images/links-icon.png" alt="" />
</div>
<div class="text">{{ "查看官网" }}</div>
<div class="text" @click="toURL(institutionInfo.url)">{{ "查看官网" }}</div>
</div>
</div>
<div class="tab-box">
<div
class="tab"
@click="handleClickTab(item, index)"
:class="{ tabActive: item.active }"
v-for="(item, index) in tabList"
:key="index"
>
<div class="tab" @click="handleClickTab(item, index)" :class="{ tabActive: item.active }"
v-for="(item, index) in tabList" :key="index">
{{ item.name }}
</div>
</div>
......@@ -47,6 +42,11 @@ import overView from "./overView/index.vue";
import researchStrength from "./researchStrength/index.vue";
import cooperationStatus from "./cooperationStatus/index.vue";
import otherStatus from "./otherStatus/index.vue";
import { useRouter } from "vue-router";
import {
getInfo
} from "@/api/innovationSubject/overview.js";
const router = useRouter();
const institutionInfo = ref({
name: "哈佛大学",
......@@ -55,6 +55,23 @@ const institutionInfo = ref({
tagList: ["常春藤", "精英摇篮"]
});
const handleGetInfo = async () => {
try {
let params = {
id: router.currentRoute._value.params.id
}
const res = await getInfo(params);
console.log("创新主体详情", res);
if (res.code === 200 && res.data) {
institutionInfo.value = res.data
}
} catch (error) {
console.error("获取创新主体详情error", error);
}
};
const toURL = (url) => {
}
const activeTabName = ref("学校详情");
const tabList = ref([
......@@ -83,6 +100,11 @@ const handleClickTab = (val, index) => {
tabList.value[index].active = true;
activeTabName.value = val.name;
};
onMounted(async () => {
handleGetInfo()
});
</script>
<style lang="scss" scoped>
......@@ -93,6 +115,7 @@ const handleClickTab = (val, index) => {
background-repeat: no-repeat;
background-size: 100% auto;
padding-top: 16px;
.header {
width: 1600px;
height: 200px;
......@@ -104,17 +127,21 @@ const handleClickTab = (val, index) => {
background: rgba(255, 255, 255, 0.8);
display: flex;
position: relative;
.header-left {
width: 160px;
height: 160px;
margin: 20px;
img {
width: 100%;
height: 100%;
}
}
.header-right {
margin-left: 24px;
.title {
margin-top: 26px;
height: 42px;
......@@ -126,6 +153,7 @@ const handleClickTab = (val, index) => {
letter-spacing: 0px;
text-align: left;
}
.en-title {
margin-top: 8px;
height: 24px;
......@@ -137,6 +165,7 @@ const handleClickTab = (val, index) => {
letter-spacing: 0px;
text-align: left;
}
.desc {
margin-top: 6px;
height: 24px;
......@@ -148,10 +177,12 @@ const handleClickTab = (val, index) => {
letter-spacing: 0px;
text-align: justify;
}
.tag-box {
margin-top: 14px;
display: flex;
gap: 8px;
.tag {
height: 24px;
padding: 0px 8px;
......@@ -166,6 +197,7 @@ const handleClickTab = (val, index) => {
}
}
}
.header-btn {
position: absolute;
top: 26px;
......@@ -179,14 +211,17 @@ const handleClickTab = (val, index) => {
justify-content: center;
align-items: center;
cursor: pointer;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 22px;
color: rgba(255, 255, 255, 1);
......@@ -197,6 +232,7 @@ const handleClickTab = (val, index) => {
}
}
}
.tab-box {
width: 1600px;
height: 64px;
......@@ -209,6 +245,7 @@ const handleClickTab = (val, index) => {
display: flex;
justify-content: space-between;
align-items: center;
.tab {
width: 397px;
height: 54px;
......@@ -223,10 +260,12 @@ const handleClickTab = (val, index) => {
font-weight: 400;
letter-spacing: 0px;
cursor: pointer;
&:hover {
background: rgba(231, 243, 255, 1);
}
}
.tabActive {
border: 2px solid rgba(174, 214, 255, 1);
background: rgba(231, 243, 255, 1);
......@@ -235,6 +274,7 @@ const handleClickTab = (val, index) => {
font-weight: 700;
}
}
.main {
width: 1600px;
margin: 16px auto;
......
src/views/innovationSubject/innovativeInstitutions/overView/index.vue
浏览文件 @ 3c102401
<!--学校详情-->
<template>
<div class="detail-wrap">
<div class="left box">
......@@ -5,9 +6,10 @@
<div class="header-left"></div>
<div class="title">最新动态</div>
<div class="header-right">
<el-checkbox checked="true" label="只看涉华动态" />
<div class="btnRightActive">机构动态</div>
<div class="btnRight">主官动态</div>
<el-checkbox :checked="cRelated" label="只看涉华动态" @change="handleGetDynamics()" />
<div :class="dynamicsType === 'org' ? 'btnRightActive' : 'btnRight'" @click="changedynamicsType()">机构动态</div>
<div :class="dynamicsType === 'person' ? 'btnRightActive' : 'btnRight'" @click="changedynamicsType()">主官动态
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
......@@ -18,7 +20,7 @@
</div>
<div class="left-main">
<div class="left-main-item" v-for="(item, index) in curList" :key="index">
<div class="line" ></div>
<div class="line"></div>
<div class="time">
<div class="timetext">{{ item.time }}</div>
<div class="timetext">{{ item.date }}</div>
......@@ -39,10 +41,11 @@
</div>
<div class="left-footer">
<div class="info">
{{ `共有153项动态` }}
{{ `共有` + total + `项动态` }}
</div>
<div class="page-box">
<el-pagination background layout="prev, pager, next" :total="153" />
<el-pagination background layout="prev, pager, next" :total="total" v-model:current-page="currentPage"
@current-change="handleGetDynamics" />
</div>
</div>
</div>
......@@ -62,24 +65,24 @@
</div>
<div class="right-main">
<div class="img-box">
<img :src="basicInfo.image" alt="" />
<img :src="basicInfo.logoUrl" alt="" />
</div>
<div class="info-box">
<div class="info-item">
<div class="info-item-left">{{ "成立时间：" }}</div>
<div class="info-item-right">{{ basicInfo.shijian }}</div>
<div class="info-item-right">{{ basicInfo.establishmentDate }}</div>
</div>
<div class="info-item">
<div class="info-item-left">{{ "总部地址：" }}</div>
<div class="info-item-right">{{ basicInfo.dizhi }}</div>
<div class="info-item-right">{{ basicInfo.address }}</div>
</div>
<div class="info-item">
<div class="info-item-left">{{ "组织性质：" }}</div>
<div class="info-item-right">{{ basicInfo.xingzhi }}</div>
<div class="info-item-right">{{ basicInfo.companyType }}</div>
</div>
<div class="info-item">
<div class="info-item-left">{{ "在校人数：" }}</div>
<div class="info-item-right">{{ basicInfo.stuNum }}</div>
<div class="info-item-right">{{ basicInfo.numberOfEmployees }}</div>
</div>
<div class="info-item">
<div class="info-item-left">{{ "教职工数：" }}</div>
......@@ -102,9 +105,9 @@
{{ "重点人物：" }}
</div>
<div class="user-content">
<div class="user-item" v-for="(item, index) in basicInfo.keyUser" :key="index">
<div class="user-item" v-for="(item, index) in personList" :key="index">
<div class="user-item-left">
<img :src="item.img" alt="" />
<img :src="item.avatarUrl" alt="" />
</div>
<div class="user-item-right">
<div class="name">{{ item.name }}</div>
......@@ -139,9 +142,9 @@
<div class="timeline"></div>
<div class="historyList">
<div class="historyPoint" v-for="item in historyList">
<div class="historytime">{{ item.time }}</div>
<div class="historytime">{{ item.createTime }}</div>
<img src="./assets/images/timepoint.png" alt="" style="z-index: 2;" />
<div class="historyitem">{{ item.event }}</div>
<div class="historyitem">{{ item.content }}</div>
</div>
</div>
</div>
......@@ -152,22 +155,32 @@
<script setup>
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import {
getDynamics,
getInfo,
getEventList,
getPersonList
} from "@/api/innovationSubject/overview.js";
import Img from "./assets/images/img.png";
import User1 from "./assets/images/user1.png";
import User2 from "./assets/images/user2.png";
import User3 from "./assets/images/user3.png";
import User4 from "./assets/images/user4.png";
const router = useRouter();
//只看涉华动态
const cRelated = ref(false)
const dynamicsType = ref('org')
const basicInfo = ref({
image: Img,
shijian: "1636年",
dizhi: "剑桥市，马萨诸塞州，美国",
xingzhi:"私立研究型大学",
stuNum:"约22,000人",
teaNum:"约2,400人",
rate:"#1",
tag:["癌症精准医疗","气候变化解决方案","人工智能伦理","可持续发展能源"],
xingzhi: "私立研究型大学",
stuNum: "约22,000人",
teaNum: "约2,400人",
rate: "#1",
tag: ["癌症精准医疗", "气候变化解决方案", "人工智能伦理", "可持续发展能源"],
keyUser: [
{
name: "艾伦·M·加伯",
......@@ -290,51 +303,128 @@ const curList = ref([
}
]);
const changedynamicsType = () => {
dynamicsType.value === 'person' ? dynamicsType.value = 'org' : dynamicsType.value = 'person'
handleGetDynamics()
}
const handleGetInfo = async () => {
try {
let params = {
id: router.currentRoute._value.params.id
}
const res = await getInfo(params);
console.log("创新主体基本信息", res);
if (res.code === 200 && res.data) {
basicInfo.value = res.data
}
} catch (error) {
console.error("获取基本信息error", error);
}
};
const personList = ref([])
//重点人物
const handleGetPersonList = async () => {
try {
let params = {
id: router.currentRoute._value.params.id
}
const res = await getPersonList(params);
console.log("重点人物", res);
if (res.code === 200 && res.data) {
personList.value = res.data
}
} catch (error) {
console.error("获取重点人物error", error);
}
};
const total = ref(0)
const currentPage = ref(1)
const handleGetDynamics = async () => {
try {
let params = {
currentPage: 1,
pageSize: 10,
cRelated: cRelated.value ? null : 'N',
dynamicsType: dynamicsType.value,
orgId: router.currentRoute._value.params.id
}
const res = await getDynamics(params);
console.log("创新主体最新动态", res);
if (res.code === 200 && res.data) {
curList.value = res.data.content
total.value = res.data.totalElements
}
} catch (error) {
console.error("获取最新动态error", error);
}
};
const awardsList = ref([
{
name:"诺贝尔奖",
num:161
name: "诺贝尔奖",
num: 161
},
{
name:"图灵奖",
num:18
name: "图灵奖",
num: 18
},
{
name:"菲尔兹奖",
num:14
name: "菲尔兹奖",
num: 14
},
{
name:"美国院士",
num:273
name: "美国院士",
num: 273
}
]);
const historyList = ref([
{
time:"2023年",
event:"克劳丁·盖伊成为首位非裔女校长"
time: "2023年",
event: "克劳丁·盖伊成为首位非裔女校长"
},
{
time:"1999年",
event:"拉德克利夫学院转型为“拉德克利夫高等研究院”"
time: "1999年",
event: "拉德克利夫学院转型为“拉德克利夫高等研究院”"
},
{
time:"1977年",
event:"哈佛与拉德克利夫学院正式合并招生"
time: "1977年",
event: "哈佛与拉德克利夫学院正式合并招生"
},
{
time:"1950年",
event:"逐步废除招生中的宗教、种族限制，学生群体多元化"
time: "1950年",
event: "逐步废除招生中的宗教、种族限制，学生群体多元化"
},
{
time:"1908年",
event:"哈佛商学院成立，首创MBA案例教学法"
time: "1908年",
event: "哈佛商学院成立，首创MBA案例教学法"
},
{
time:"1869年",
event:"查尔斯·W·艾略特任校长40年，推行选修制、重建法学院、改革医学院、新建商学院等"
time: "1869年",
event: "查尔斯·W·艾略特任校长40年，推行选修制、重建法学院、改革医学院、新建商学院等"
}
]);
const handleGetEventList = async () => {
try {
let params = {
id: router.currentRoute._value.params.id
}
const res = await getEventList(params);
console.log("历史动态", res);
if (res.code === 200 && res.data) {
historyList.value = res.data
}
} catch (error) {
console.error("获取历史动态error", error);
}
};
onMounted(async () => {
handleGetInfo()
handleGetDynamics()
handleGetEventList()
handleGetPersonList()
});
</script>
<style lang="scss" scoped>
......@@ -342,16 +432,19 @@ const historyList = ref([
display: flex;
gap: 16px;
padding-bottom: 30px;
.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);
}
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 18px;
width: 8px;
......@@ -359,6 +452,7 @@ const historyList = ref([
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 14px;
margin-top: 14px;
......@@ -370,11 +464,13 @@ const historyList = ref([
letter-spacing: 0px;
text-align: left;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 52px;
display: flex;
.btn {
margin-left: 8px;
height: 28px;
......@@ -391,12 +487,14 @@ const historyList = ref([
font-weight: 400;
cursor: pointer;
}
.btnActive {
border: 1px solid rgba(10, 87, 166, 1);
background: rgba(246, 250, 255, 1);
color: rgba(10, 87, 166, 1);
}
}
.header-info {
height: 22px;
position: absolute;
......@@ -404,16 +502,19 @@ const historyList = ref([
top: 17px;
display: flex;
justify-content: flex-end;
.icon {
margin-top: 3px;
width: 14px;
height: 14px;
margin-right: 8px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 22px;
color: rgba(95, 101, 108, 1);
......@@ -423,6 +524,7 @@ const historyList = ref([
line-height: 22px;
}
}
.header-right {
position: absolute;
top: 14px;
......@@ -430,15 +532,18 @@ const historyList = ref([
display: flex;
justify-content: flex-end;
gap: 8px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
.checkboxRight{
.checkboxRight {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
......@@ -447,7 +552,8 @@ const historyList = ref([
letter-spacing: 0px;
text-align: justify;
}
.btnRightActive{
.btnRightActive {
width: 80px;
height: 28px;
display: flex;
......@@ -466,7 +572,8 @@ const historyList = ref([
letter-spacing: 0px;
text-align: center;
}
.btnRight{
.btnRight {
width: 80px;
height: 28px;
display: flex;
......@@ -487,12 +594,15 @@ const historyList = ref([
}
}
}
.left {
width: 1064px;
height: 2083px;
.left-main {
border-top: 1px solid rgba(234, 236, 238, 1);
height: 1905px;
.left-main-item {
display: flex;
margin-top: 20px;
......@@ -500,6 +610,7 @@ const historyList = ref([
margin-left: 31px;
height: 130px;
position: relative;
.line {
background: #e6e7e8;
width: 2px;
......@@ -508,10 +619,12 @@ const historyList = ref([
top: 24px;
left: 106px;
}
.time {
display: flex;
flex-direction: column;
.timetext{
.timetext {
width: 79px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
......@@ -522,20 +635,25 @@ const historyList = ref([
text-align: right;
}
}
.icon {
width: 24px;
height: 24px;
img {
width: 100%;
height: 100%;
}
}
.info {
width: 862px;
.header {
height: 26px;
display: flex;
justify-content: space-between;
.title {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
......@@ -544,6 +662,7 @@ const historyList = ref([
line-height: 26px;
}
}
.content {
margin-top: 8px;
color: rgba(95, 101, 108, 1);
......@@ -552,10 +671,12 @@ const historyList = ref([
font-weight: 400;
line-height: 24px;
}
.tag-box {
margin-top: 12px;
display: flex;
gap: 8px;
.tag {
height: 28px;
padding: 0 8px;
......@@ -571,6 +692,7 @@ const historyList = ref([
}
}
}
.left-footer {
height: 75px;
border-top: 1px solid rgba(234, 236, 238, 1);
......@@ -580,32 +702,40 @@ const historyList = ref([
padding: 0 20px;
}
}
.rightcontent{
.rightcontent {
display: flex;
flex-direction: column;
width: 520px;
gap: 16px;
.right {
width: 520px;
height: 874px;
.right-main {
width: 469px;
margin: 3px auto;
.img-box {
width: 469px;
height: 240px;
img {
width: 100%;
height: 100%;
}
}
.info-box {
margin-top: 26px;
padding-bottom: 50px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.info-item {
display: flex;
margin-top: 12px;
.info-item-left {
width: 88px;
height: 24px;
......@@ -617,6 +747,7 @@ const historyList = ref([
letter-spacing: 1px;
text-align: left;
}
.info-item-right {
width: 356px;
color: rgba(59, 65, 75, 1);
......@@ -627,12 +758,14 @@ const historyList = ref([
letter-spacing: 0px;
text-align: left;
}
.taglist{
.taglist {
width: 358px;
display: flex;
gap: 8px;
flex-wrap: wrap;
.tagdirec{
.tagdirec {
height: 24px;
justify-content: center;
align-items: center;
......@@ -652,8 +785,10 @@ const historyList = ref([
}
}
}
.user-box {
padding-top: 19px;
.user-header {
height: 24px;
color: rgba(59, 65, 75, 1);
......@@ -664,24 +799,29 @@ const historyList = ref([
letter-spacing: 1px;
text-align: left;
}
.user-content {
margin-top: 19px;
display: flex;
flex-wrap: wrap;
gap: 16px 73px;
justify-content: start;
.user-item {
height: 49px;
display: flex;
gap: 8px;
.user-item-left {
width: 48px;
height: 48px;
img {
width: 100%;
height: 100%;
}
}
.user-item-right {
.name {
height: 24px;
......@@ -693,6 +833,7 @@ const historyList = ref([
letter-spacing: 0px;
text-align: left;
}
.position {
height: 24px;
color: rgba(95, 101, 108, 1);
......@@ -709,13 +850,14 @@ const historyList = ref([
}
}
}
.right-Num{
.right-Num {
display: flex;
flex-wrap: wrap;
width: 520px;
gap: 8px;
.numbox{
.numbox {
display: flex;
width: 256px;
height: 80px;
......@@ -725,12 +867,14 @@ const historyList = ref([
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
align-items: center;
.iconrec{
.iconrec {
width: 4px;
height: 49px;
background: rgba(5, 95, 194, 1);
}
.awards{
.awards {
margin-left: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
......@@ -740,7 +884,8 @@ const historyList = ref([
letter-spacing: 0px;
text-align: left;
}
.awardsNum{
.awardsNum {
margin-left: 72px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
......@@ -752,7 +897,8 @@ const historyList = ref([
}
}
}
.right-history{
.right-history {
width: 520px;
height: 1009px;
border: 1px solid rgba(234, 236, 238, 1);
......@@ -760,18 +906,21 @@ const historyList = ref([
/* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.historytimeline{
.historytimeline {
display: flex;
margin-left: 37px;
margin-top: 29px;
.timeline{
.timeline {
position: absolute;
width: 8px;
height: 910px;
background: url("./assets/images/arrow.png") repeat;
}
.historyList{
.historyList {
margin-left: -2px;
display: flex;
......@@ -779,11 +928,12 @@ const historyList = ref([
margin-top: 42px;
gap: 56px;
.historyPoint{
.historyPoint {
width: 458px;
height: 89px;
gap: 6px;
.historytime{
.historytime {
margin-left: 24px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
......@@ -793,7 +943,8 @@ const historyList = ref([
letter-spacing: 1px;
text-align: left;
}
.historyitem{
.historyitem {
margin-left: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
......@@ -813,7 +964,7 @@ const historyList = ref([
::v-deep .el-checkbox__label{
::v-deep .el-checkbox__label {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
......@@ -821,6 +972,5 @@ const historyList = ref([
line-height: 24px;
padding-left: 3px;
padding-right: 10px;
}
}
</style>
\ No newline at end of file
src/views/innovationSubject/innovativeInstitutions/researchStrength/index.vue
浏览文件 @ 3c102401
<!--科研实力-->
<template>
<div class="detail-wrap">
<div class="row">
......@@ -15,7 +16,7 @@
</div>
</div>
<div class="statisticsChart">
<Echarts :option="barOption" height="100%"></Echarts>
<Echarts :option="barOption(patentList)" height="100%"></Echarts>
</div>
<div class="statisticsAI">
<div class="AIbox">
......@@ -39,7 +40,7 @@
</div>
</div>
<div class="statisticsChart">
<Echarts :option="lineChart" height="100%"></Echarts>
<Echarts :option="lineChart(paperList)" height="100%"></Echarts>
</div>
<div class="statisticsAI">
<div class="AIbox">
......@@ -89,7 +90,7 @@
</div>
</div>
<div class="statisticsChart">
<Echarts :option="lineChart1" height="100%"></Echarts>
<Echarts :option="lineChart1(fundGrowth)" height="100%"></Echarts>
</div>
<div class="statisticsAI">
<div class="AIbox">
......@@ -115,7 +116,7 @@
</div>
</div>
<div class="statisticsChart">
<Echarts :option="pieOption1" height="100%"></Echarts>
<Echarts :option="pieOption1(fundFromList)" height="100%"></Echarts>
</div>
<div class="statisticsAI">
<div class="AIbox">
......@@ -146,7 +147,7 @@
letter-spacing: 0px;
text-align: right;">（亿美元）</div>
<div class="statisticsChart" style="height: 298px; ">
<Echarts :option="horizontalBaroption" height="100%" ></Echarts>
<Echarts :option="horizontalBaroption(fundToList)" height="100%"></Echarts>
</div>
<div class="statisticsAI">
<div class="AIbox">
......@@ -164,8 +165,103 @@
import { ref, computed, onMounted } from "vue";
import Echarts from "@/components/Chart/index.vue";
import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalBaroption } from "../../utils/charts.js";
import {
getPatentList,
getPaperList, getFundGrowth, getFundFromList, getFundToList
} from "@/api/innovationSubject/overview.js";
import { useRouter } from "vue-router";
const router = useRouter();
//专利数量统计
const patentList = ref([])
const handleGetPatentList = async () => {
try {
let params = {
id: router.currentRoute._value.params.id
}
const res = await getPatentList(params);
console.log("专利数量统计", res);
if (res.code === 200 && res.data) {
patentList.value = res.data
}
} catch (error) {
console.error("获取专利数量统计error", error);
}
};
//论文数量统计
const paperList = ref([])
const handleGetPaperList = async () => {
try {
let params = {
id: router.currentRoute._value.params.id
}
const res = await getPaperList(params);
console.log("论文数量统计", res);
if (res.code === 200 && res.data) {
paperList.value = res.data
}
} catch (error) {
console.error("获取论文数量统计error", error);
}
};
//经费增长情况
const fundGrowth = ref([])
const handleGetFundGrowth = async () => {
try {
let params = {
id: router.currentRoute._value.params.id
}
const res = await getFundGrowth(params);
console.log("经费增长情况", res);
if (res.code === 200 && res.data) {
fundGrowth.value = res.data
}
} catch (error) {
console.error("获取经费增长情况error", error);
}
};
//经费来源
const fundFromList = ref([])
const handleGetFundFromList = async () => {
try {
let params = {
id: router.currentRoute._value.params.id
}
const res = await getFundFromList(params);
console.log("经费来源", res);
if (res.code === 200 && res.data) {
fundFromList.value = res.data
}
} catch (error) {
console.error("获取经费来源error", error);
}
};
//学院经费分配排序
const fundToList = ref([])
const handlegGetFundToList = async () => {
try {
let params = {
id: router.currentRoute._value.params.id
}
const res = await getFundToList(params);
console.log("学院经费分配排序", res);
if (res.code === 200 && res.data) {
fundToList.value = res.data
}
} catch (error) {
console.error("获取学院经费分配排序error", error);
}
};
onMounted(async () => {
handleGetPatentList()
handleGetPaperList()
handleGetFundGrowth()
handleGetFundFromList()
handlegGetFundToList()
});
</script>
......@@ -175,16 +271,19 @@ import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalB
flex-direction: column;
gap: 16px;
padding-bottom: 30px;
.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);
}
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 18px;
width: 8px;
......@@ -192,6 +291,7 @@ import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalB
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 14px;
margin-top: 14px;
......@@ -203,11 +303,13 @@ import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalB
letter-spacing: 0px;
text-align: left;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 52px;
display: flex;
.btn {
margin-left: 8px;
height: 28px;
......@@ -224,12 +326,14 @@ import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalB
font-weight: 400;
cursor: pointer;
}
.btnActive {
border: 1px solid rgba(10, 87, 166, 1);
background: rgba(246, 250, 255, 1);
color: rgba(10, 87, 166, 1);
}
}
.header-info {
height: 22px;
position: absolute;
......@@ -237,16 +341,19 @@ import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalB
top: 17px;
display: flex;
justify-content: flex-end;
.icon {
margin-top: 3px;
width: 14px;
height: 14px;
margin-right: 8px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 22px;
color: rgba(95, 101, 108, 1);
......@@ -256,6 +363,7 @@ import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalB
line-height: 22px;
}
}
.header-right {
position: absolute;
top: 14px;
......@@ -263,15 +371,18 @@ import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalB
display: flex;
justify-content: flex-end;
gap: 8px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
.checkboxRight{
.checkboxRight {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
......@@ -280,7 +391,8 @@ import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalB
letter-spacing: 0px;
text-align: justify;
}
.btnRightActive{
.btnRightActive {
width: 80px;
height: 28px;
display: flex;
......@@ -299,7 +411,8 @@ import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalB
letter-spacing: 0px;
text-align: center;
}
.btnRight{
.btnRight {
width: 80px;
height: 28px;
display: flex;
......@@ -320,20 +433,24 @@ import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalB
}
}
}
.row{
.row {
display: flex;
width: 1600px;
height: 500px;
gap: 16px;
.statisticsItem{
.statisticsItem {
width: 792px;
height: 500px;
.statisticsChart{
.statisticsChart {
width: 736px;
height: 321px;
margin: 20px auto;
}
.statisticsAI{
.statisticsAI {
margin: 0 auto;
width: 760px;
height: 64px;
......@@ -348,7 +465,8 @@ import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalB
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
.AIbox{
.AIbox {
width: 736px;
height: 52px;
......@@ -359,7 +477,8 @@ import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalB
align-items: center;
gap: 13px;
padding: 2px 0px 2px 0px;
.AItext{
.AItext {
width: 667px;
height: 48px;
display: flex;
......@@ -381,9 +500,4 @@ import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalB
}
}
</style>
\ No newline at end of file
src/views/innovationSubject/utils/charts.js
浏览文件 @ 3c102401
......@@ -91,23 +91,41 @@ var data1 = [
}
];
export const pieOption1 = (data) => {
// 提取部门名称和对应的金额
const colors = [
'rgba(105, 177, 255, 1)',
'rgba(255, 236, 61, 1)',
'rgba(135, 232, 222, 1)',
'rgba(133, 165, 255, 1)',
'rgba(255, 120, 117, 1)'
];
// 提取部门名称和对应的金额
const departmentNames = data.map(item => item.departmentName);
const amounts = data.map(item => item.amount);
// 计算总金额
const getTotal = (data) => {
return data.reduce((total, item) => total + item.amount, 0);
};
export const pieOption1 = {
// 饼图配置
const option = {
legend: {
orient: 'vertical',
x: 'right',
y: 'center',
align: 'left',
left: '60%',
data: data1.map(item => item.name),
data: departmentNames,
textStyle: { // 图例字体样式
color: "rgba(59, 65, 75, 1)",
fontSize: 16
},
formatter: function (name) {
var total = getTotal(data1);
var item = data1.find(item => item.name === name);
var percentage = ((item.value / total) * 100).toFixed(2);
var total = getTotal(data);
var item = data.find(item => item.departmentName === name);
var percentage = ((item.amount / total) * 100).toFixed(2);
return `${name} ${percentage}%`;
}
},
......@@ -122,40 +140,19 @@ export const pieOption1 = {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: [
{
name: "捐赠基金",
value: 27,
itemStyle: { color: 'rgba(105, 177, 255, 1)' }
},
{
name: "政府拨款",
value: 22,
itemStyle: { color: 'rgba(255, 236, 61, 1)' }
},
{
name: "企业合作",
value: 18,
itemStyle: { color: 'rgba(135, 232, 222, 1)' }
},
{
name: "学费收入",
value: 15,
itemStyle: { color: 'rgba(133, 165, 255, 1)' }
},
{
name: "其他来源",
value: 12,
itemStyle: { color: 'rgba(255, 120, 117, 1)' }
data: data.map((item, index) => ({
name: item.departmentName,
value: item.amount,
itemStyle: { color: colors[index % colors.length] } // 使用颜色列表
}))
}
]
}
]
};
};
return option;
}
export const raderOption = (data) => {
// 提取所有可能的 areaName
......@@ -265,8 +262,12 @@ export const raderOption1 = {
}
]
};
export const barOption = {
export const barOption = (data) => {
// 提取年份和对应的专利数量
const years = data.map(item => item.year.toString());
const counts = data.map(item => item.countNum);
// 柱状图配置
const option = {
tooltip: {
trigger: "axis",
axisPointer: {
......@@ -280,7 +281,6 @@ export const barOption = {
left: '1%',
containLabel: true
},
xAxis: [{
axisLine: {
lineStyle: {
......@@ -288,8 +288,7 @@ export const barOption = {
color: "rgba(231, 243, 255, 1)"
}
},
axisTick:
{ show: false },
axisTick: { show: false },
type: "category",
boundaryGap: [100, 100],
axisLabel: {
......@@ -297,9 +296,8 @@ export const barOption = {
// fontSize: 22,
// fontWeight: 400
},
data: ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
data: years, // 动态设置 xAxis 数据
}],
yAxis: {
type: "value",
axisLine: {
......@@ -307,7 +305,6 @@ export const barOption = {
type: "dashed"
}
},
axisLabel: {
color: "rgba(95, 101, 108, 1)",
// fontSize: 22,
......@@ -320,22 +317,19 @@ export const barOption = {
type: "dashed",
color: "rgba(231, 243, 255, 1)"
},
}
},
series: [
{
name: "专利数量",
data: [80, 90, 110, 130, 140, 160, 200, 250, 300, 340],
data: counts, // 动态设置 series 数据
type: "bar",
barWidth: 20,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(46, 165, 255, 1)" },
// { offset: 0.5, color: '#188df0' },
{ offset: 1, color: "rgba(46, 165, 255, 0)" }
])
// borderRadius: [6, 6, 0, 0]
},
label: {
show: false,
......@@ -345,13 +339,19 @@ export const barOption = {
fontWeight: 400,
color: 'rgba(255, 255, 255, 1)'
}
}
}
]
};
};
return option;
export const lineChart = {
}
export const lineChart = (data) => {
// 提取年份和对应的专利数量
const years = data.map(item => item.year.toString());
const counts = data.map(item => item.countNum);
// 折线图配置
const option = {
tooltip: {
trigger: "axis",
axisPointer: {
......@@ -374,12 +374,13 @@ export const lineChart = {
axisLine: {
show: false
},
data: ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
data: years, // 动态设置 xAxis 数据
},
yAxis: {
type: 'value',
splitLine: {
show: true, lineStyle: {
show: true,
lineStyle: {
type: "dashed",
color: "#E7F3FF"
}
......@@ -387,31 +388,32 @@ export const lineChart = {
axisLine: {
show: false
},
},
color: ['rgba(255, 149, 77, 1)'],
series: [
{
data: [50, 60, 80, 100, 110, 140, 180, 260, 280, 330],
data: counts, // 动态设置 series 数据
type: 'line',
emphasis: {
focus: 'series'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 149, 77, 0.5)' // 起始颜色：深色
}, {
offset: 1,
color: 'rgba(255, 149, 77, 0)' // 结束颜色：浅色且透明度降低
}])
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(255, 149, 77, 0.5)' }, // 起始颜色：深色
{ offset: 1, color: 'rgba(255, 149, 77, 0)' } // 结束颜色：浅色且透明度降低
])
},
}
]
};
export const lineChart1 = {
};
return option;
}
export const lineChart1 = (data) => {
// 提取年份和对应的 fundAmount
const years = data.map(item => item.year.toString());
const fundAmounts = data.map(item => item.fundAmount);
// 折线图配置
const option = {
tooltip: {
trigger: "axis",
axisPointer: {
......@@ -434,12 +436,13 @@ export const lineChart1 = {
axisLine: {
show: false
},
data: ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
data: years, // 动态设置 xAxis 数据
},
yAxis: {
type: 'value',
splitLine: {
show: true, lineStyle: {
show: true,
lineStyle: {
type: "dashed",
color: "#E7F3FF"
}
......@@ -447,35 +450,37 @@ export const lineChart1 = {
axisLine: {
show: false
},
},
color: ['rgba(33, 129, 57, 1)'],
series: [
{
data: [50, 60, 80, 100, 110, 140, 180, 260, 280, 330],
data: fundAmounts, // 动态设置 series 数据
type: 'line',
emphasis: {
focus: 'series'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(33, 129, 57, 0.5)' // 起始颜色：深色
}, {
offset: 1,
color: 'rgba(33, 129, 57, 0)' // 结束颜色：浅色且透明度降低
}])
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(33, 129, 57, 0.5)' }, // 起始颜色：深色
{ offset: 1, color: 'rgba(33, 129, 57, 0)' } // 结束颜色：浅色且透明度降低
])
},
}
]
};
};
return option;
}
const nameList = ["教育学院", "文理学院", "法学院", "商学院", "工程学院", "医学院"];
const valueList = [21, 21, 25, 79, 95, 109];
export const horizontalBaroption = (data) => {
// 提取部门名称和对应的金额
const departmentNames = data.map(item => item.departmentName);
const amounts = data.map(item => item.amount);
export const horizontalBaroption = {
// 水平柱状图配置
const option = {
grid: {
top: '0',
right: '3%',
......@@ -493,7 +498,7 @@ export const horizontalBaroption = {
},
yAxis: {
type: 'category',
data: nameList,
data: departmentNames, // 动态设置 yAxis 数据
splitLine: {
show: false
},
......@@ -509,7 +514,7 @@ export const horizontalBaroption = {
},
series: [{
type: 'bar',
data: valueList.map((item, index) => {
data: amounts.map((item, index) => {
return {
value: item,
label: {
......@@ -527,31 +532,20 @@ export const horizontalBaroption = {
itemStyle: {
color: function (params) {
if (params.dataIndex < 3) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: 'rgba(22, 119, 255, 0)'
},
{
offset: 1,
color: '#1778ff'
}
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: 'rgba(22, 119, 255, 0)' },
{ offset: 1, color: '#1778ff' }
]);
} else {
return new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: 'rgba(206, 79, 81, 0)'
},
{
offset: 1,
color: '#ce4f51'
}
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: 'rgba(206, 79, 81, 0)' },
{ offset: 1, color: '#ce4f51' }
]);
}
},
barBorderRadius: 4,
}
}]
};
\ No newline at end of file
};
return option;
}
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论