Skip to content

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

update

上级 e23612cd 1a1761f7
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 357 行增加 和 72 行删除
src/router/modules/InnovationSubject.js
浏览文件 @ fe57c553
//创新主体
import InnovationSubject from "@/views/innovationSubject/index.vue";
import InnovationInstitution from "@/views/innovationSubject/innovativeInstitutions/index.vue";
const innovationSubjectRoutes = [
//创新主体
......@@ -10,6 +11,14 @@ const innovationSubjectRoutes = [
meta: {
title: "主要创新主体"
}
},
{
path: "/InnovativeInstitutions",
name: "InnovativeInstitutions",
component: InnovationInstitution,
meta: {
title: "学校详情"
},
}
]
......
src/views/innovationSubject/index.vue
浏览文件 @ fe57c553
......@@ -168,7 +168,6 @@
class="box2-main-item"
v-for="(item, index) in warningList"
:key="index"
@click="handleClickToDetail()"
>
<div
class="item-left"
......@@ -326,6 +325,7 @@
</div>
<img src="./assets/images/icon-right.png" alt="" />
</div>
</div>
</div>
<div v-if="activeCate === '研究布局'">
......@@ -352,7 +352,8 @@
/>
</el-select>
</div>
</div>
</div>
</div>
<div class="center-footer-layout">
<div class="content-header">
......@@ -361,7 +362,25 @@
</div>
<div class="title">{{ "研究领域布局情况" }}</div>
</div>
<div class="center-footer-layout-content"></div>
<div class="center-footer-layout-content">
<div class="center-footer-layout-content-item">
<EChart :option="pieOption" autoresize :style="{ height: '370px',width:'750px' }" />
<div class="center-footer-elx-footer">
<img src="./assets/images/ai.png" alt="" />
<div class="center-footer-elx-footer-text">人工智能与信息技术占据最大份额，反映了数字经济的核心地位;生物医学与健康是第二大研发领域，特别是在疫情后投入显著增加;能源与环境技术和先进制造与材料作为基础支撑领域保持稳定投入;国家安全与国防和航空航天作为战略领域保持专项投入。</div>
<img src="./assets/images/icon-right.png" alt="" />
</div>
</div>
<div style="width: 1px;height: 432px;background: rgba(234, 236, 238, 1);"></div>
<div class="center-footer-layout-content-item">
<EChart :option="raderOption" autoresize :style="{ height: '370px',width:'750px' }" />
<div class="center-footer-elx-footer">
<img src="./assets/images/ai.png" alt="" />
<div class="center-footer-elx-footer-text">研究型大学在基础科学领域(生物医学、材料科学)占据主导地位；科技企业高度集中于人工智能和信息技术领域；国家实验室在能源技术和国家安全相关领域有显著优势；国防承包商的研究高度集中于航空航天和国家安全领域。</div>
<img src="./assets/images/icon-right.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
......@@ -386,8 +405,8 @@
</div>
</div>
<div class="home-main-footer-main">
<div class="footer-main-item" v-for="item in universityList" :key="item.name">
<img :src="item.pic" style="height: 32px; width: 32px" />
<div class="footer-main-item" v-for="item in universityList" :key="item.name" @click="handleClickToDetail">
<img :src="item.pic" style="height: 32px; width: 32px;" />
<div class="item-text">{{ item.name }}</div>
<div class="item-text2">{{ item.adder }}</div>
<div class="item-text2">{{ item.area }}</div>
......@@ -437,6 +456,8 @@ import { useContainerScroll } from "@/hooks/useScrollShow";
import getBarChart from "./utils/barChart";
import getPieChart from "./utils/piechart";
import getCalendarHeatChart from "./utils/cleandarHeat";
import EChart from "@/components/Chart/index.vue";
import {pieOption, raderOption} from "./utils/charts";
import setChart from "@/utils/setChart";
......@@ -449,7 +470,6 @@ import News5 from "./assets/images/news5.png";
import Message1 from "./assets/images/iconp9.png";
import Message2 from "./assets/images/iconp8.png";
import Message3 from "./assets/images/iconp5.png";
import { Adder } from "d3";
// 返回首页
const handleBackHome = () => {
......@@ -525,8 +545,7 @@ const zhouList = ref([
// 点击查看详情
const handleClickToDetail = () => {
// router.push("/decreeLayout");
const route = router.resolve("/decreeLayout");
const route = router.resolve("/InnovativeInstitutions");
window.open(route.href, "_blank");
};
......@@ -637,44 +656,35 @@ const messageList = ref([
}
]);
// 政令发布频度
const chart1Data = ref({
dataX: ["2019", "2020", "2021", "2022", "2023", "2024", "2025"],
dataY: [219, 228, 129, 159, 152, 157, 78]
});
// 政令涉及领域
const chart2Data = ref([
{
name: "集成电路",
value: 50
},
const chart1Data = ref([
{
name: "人工智能",
value: 46
name: "人工智能与信息技术",
value: 27
},
{
name: "通信网络",
value: 40
name: "生物医学与健康",
value: 22
},
{
name: "量子科技",
value: 32
name: "能源与环境技术",
value: 18
},
{
name: "能源",
value: 31
name: "先进制造与材料",
value: 15
},
{
name: "生物科技",
value: 30
name: "国家安全与国防",
value: 12
},
{
name: "航空航天",
value: 24
value: 8
}
]);
const colorList = ["#69B1FF", "#FFC069", "#87E8DE", "#85A5FF", "#FF7875", "#B37FEB", "#4096FF"];
const colorList = ["#69B1FF", "#FFC069", "#87E8DE", "#85A5FF", "#FF7875", "#B37FEB"];
const innoItemList = [
{
......@@ -881,11 +891,10 @@ const handleToPosi = id => {
};
onMounted(async () => {
let chart1 = getBarChart(chart1Data.value.dataX, chart1Data.value.dataY);
let chart1 = getPieChart(chart1Data.value, colorList);
setChart(chart1, "chart1");
let chart2 = getPieChart(chart2Data.value, colorList);
setChart(chart2, "chart2");
});
</script>
......@@ -1908,10 +1917,39 @@ onMounted(async () => {
.center-footer-layout-content {
display: flex;
flex-direction: row;
.center-footer-layout-content-item {
.center-footer-layout-content-item{
height: 480px;
width: 800px;
display: flex;
flex-direction: column;
margin-left: 24px;
.center-footer-elx-footer{
width: 750px;
height: 88px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
gap: 10px;
padding: 6px 12px 6px 12px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
.center-footer-elx-footer-text{
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
width: 726px;
height: 76px;
}
}
}
}
}
......@@ -1990,7 +2028,8 @@ onMounted(async () => {
padding: 16px;
display: flex;
flex-direction: column;
.item-text {
cursor: pointer;
.item-text{
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
......
src/views/innovationSubject/innovativeInstitutions/index.vue 0 → 100644
浏览文件 @ fe57c553
<template>
<div class="wrap">
<div class="header">
<div class="header-left">
<img src="./assets/images/icon-harvard.png" 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="tag-box">
<div class="tag" v-for="(tag, index) in institutionInfo.tagList" :key="index">
{{ tag }}
</div>
</div>
</div>
<div class="header-btn">
<div class="icon">
<img src="@/assets/images/links-icon.png" alt="" />
</div>
<div class="text">{{ "查看官网" }}</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"
>
{{ item.name }}
</div>
</div>
<div class="main">
<overView v-if="activeTabName === '学校详情'"></overView>
<researchStrength v-else-if="activeTabName === '科研实力'"></researchStrength>
<cooperationStatus v-else-if="activeTabName === '合作情况'"></cooperationStatus>
<otherStatus v-else-if="activeTabName === '其他情况'"></otherStatus>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import overView from "./overView/index.vue";
import researchStrength from "./researchStrength/index.vue";
import cooperationStatus from "./cooperationStatus/index.vue";
import otherStatus from "./otherStatus/index.vue";
const institutionInfo = ref({
name: "哈佛大学",
enName: "Harvard University",
desc: "哈佛大学是 1636 年创立于美国马萨诸塞州剑桥市的顶尖私立研究型大学，为常春藤盟校成员、科研与学术影响力卓著。",
tagList: ["常春藤", "精英摇篮"]
});
const activeTabName = ref("学校详情");
const tabList = ref([
{
name: "学校详情",
active: true
},
{
name: "科研实力",
active: false
},
{
name: "合作情况",
active: false
},
{
name: "其他情况",
active: false
}
]);
const handleClickTab = (val, index) => {
tabList.value.forEach(item => {
item.active = false;
});
tabList.value[index].active = true;
activeTabName.value = val.name;
};
</script>
<style lang="scss" scoped>
.wrap {
width: 1920px;
height: 100%;
background-image: url("./assets/images/bg.png");
background-repeat: no-repeat;
background-size: 100% auto;
padding-top: 16px;
.header {
width: 1600px;
height: 200px;
margin: 0 auto 16px;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
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;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 32px;
font-weight: 700;
line-height: 42px;
letter-spacing: 0px;
text-align: left;
}
.en-title {
margin-top: 8px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.desc {
margin-top: 6px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.tag-box {
margin-top: 14px;
display: flex;
gap: 8px;
.tag {
height: 24px;
padding: 0px 8px;
border-radius: 4px;
background: rgba(231, 243, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0px;
}
}
}
.header-btn {
position: absolute;
top: 26px;
right: 30px;
width: 120px;
height: 36px;
border-radius: 6px;
background: rgba(5, 95, 194, 1);
display: flex;
gap: 3px;
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);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
}
}
.tab-box {
width: 1600px;
height: 64px;
margin: 0 auto;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 0.8);
display: flex;
justify-content: space-between;
align-items: center;
.tab {
width: 397px;
height: 54px;
box-sizing: border-box;
border: 2px solid transparent;
border-radius: 10px;
text-align: center;
line-height: 50px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
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);
color: rgba(5, 95, 194, 1);
font-size: 24px;
font-weight: 700;
}
}
.main {
width: 1600px;
margin: 16px auto;
}
}
</style>
\ No newline at end of file
src/views/innovationSubject/utils/charts.js 0 → 100644
浏览文件 @ fe57c553
差异被折叠。
src/views/innovationSubject/utils/piechart.js
浏览文件 @ fe57c553
const getPieChart = (data,colorList) => {
let option = {
color: colorList,
series: [
{
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: [110, 143],
height: '100%',
left: 'center',
width: '100%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
alignTo: 'edge',
formatter: '{name|{b}}\n{time|{c} 条 {d}%}',
minMargin: 5,
edgeDistance: 10,
lineHeight: 24,
rich: {
time: {
fontSize: 16,
color: '#999'
}
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < 556 / 2;
const points = params.labelLinePoints;
// Update the end point.
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
show: false
},
data: data
}]
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
}
return option
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论