Skip to content

R
risk-monitor
提交 08b76029 authored 作者: liujq23's avatar liujq23
浏览文件
操作

门户页面1完成

上级 f09c15f0
隐藏空白字符变更
内嵌 并排
正在显示 包含 1027 行增加 和 0 行删除
src/router/index.js
浏览文件 @ 08b76029
...@@ -41,6 +41,9 @@ import MarketSingleCaseLayout from "@/views/marketAccessRestrictions/singleCaseL ...@@ -41,6 +41,9 @@ import MarketSingleCaseLayout from "@/views/marketAccessRestrictions/singleCaseL
import MarketSingleCaseOverview from "@/views/marketAccessRestrictions/singleCaseLayout/overview/index.vue"; import MarketSingleCaseOverview from "@/views/marketAccessRestrictions/singleCaseLayout/overview/index.vue";
import MarketSingleCaseDeepdig from "@/views/marketAccessRestrictions/singleCaseLayout/deepdig/index.vue"; import MarketSingleCaseDeepdig from "@/views/marketAccessRestrictions/singleCaseLayout/deepdig/index.vue";
// 门户
import Portals from '@/views/portals/index.vue'
const routes = [ const routes = [
// 智库系统的主要路由 // 智库系统的主要路由
{ {
...@@ -377,6 +380,14 @@ const routes = [ ...@@ -377,6 +380,14 @@ const routes = [
meta: { meta: {
title: "政令信息" title: "政令信息"
} }
},
{
path: "/Portals",
name: "Portals",
component: Portals,
meta: {
title: "门户"
}
} }
]; ];
......
src/views/portals/components/CardCustom.vue 0 → 100644
浏览文件 @ 08b76029
<template>
<el-card class="card">
<div class="wrap">
<div class="line" :style="{ backgroundColor: lineColor }"></div>
<div class="header">
<div class="iconWrap">
<slot name="icon">
<el-icon :size="20">
<Edit />
</el-icon>
</slot>
</div>
<div
class="titleWrap"
:style="{ backgroundColor: titleBackgroundColor }"
>
{{ title }}
</div>
<div class="rightWrap">
<slot name="right">
<div class="moreWrap">
<el-button text @click="moreClick">
<span class="moreText">更多</span>
<el-icon :size="14"> <Plus /> </el-icon>
</el-button>
</div>
</slot>
</div>
</div>
<div class="body">
<slot name="default"> </slot>
</div>
</div>
</el-card>
</template>
<script setup>
import { Edit, Plus } from "@element-plus/icons-vue";
const emit = defineEmits(["moreClick"]);
defineProps({
titleBackgroundColor: {
type: String,
default: "red",
},
lineColor: {
type: String,
default: "transparent",
},
title: {
type: String,
default: "风险信号",
},
});
function moreClick() {
emit("moreClick");
}
</script>
<style lang="scss" scoped>
.card {
position: relative;
:deep(.el-card__body) {
padding: 0;
height: 100%;
}
}
.wrap {
height: 100%;
display: flex;
flex-direction: column;
}
.line {
left: 1px;
right: 1px;
background-color: transparent;
height: 1px;
top: 0;
position: absolute;
}
.header {
height: 48px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
display: flex;
flex-direction: row;
align-items: stretch;
z-index: 1;
position: relative;
flex-shrink: 0;
}
.iconWrap {
width: 60px;
display: flex;
justify-content: center;
align-items: center;
}
.titleWrap {
display: flex;
justify-content: center;
align-items: center;
padding-left: 20px;
padding-right: 20px;
background-color: red;
color: #fff;
font-size: 20px;
font-weight: 700;
}
.rightWrap {
display: flex;
justify-content: end;
align-items: center;
flex: 1;
}
.moreWrap {
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
height: 100%;
padding-left: 10px;
padding-right: 10px;
cursor: pointer;
.moreText {
margin-right: 3px;
}
}
.body {
flex: 1;
padding: 14px 20px;
}
</style>
src/views/portals/components/PieProgress.vue 0 → 100644
浏览文件 @ 08b76029
<template>
<div class="wrap1">
<div class="chart" ref="chart"></div>
<div class="title">{{ data.title }}</div>
<div class="titleSub">{{ data.titleSub }}</div>
<div class="slope">
<div
class="slopeLine"
:style="{
transform: 'rotate(' + (data.current / data.total) * -25 + 'deg)',
top: -88 + (data.current / data.total) * 25 * 0.3 + 'px',
}"
></div>
</div>
</div>
</template>
<script setup>
import { useTemplateRef, onMounted } from "vue";
import { setChart, getPieChart } from "../utils/charts";
const { data } = defineProps({
data: {
type: Object,
},
});
// 第一个参数必须与模板中的 ref 值匹配
const chart = useTemplateRef("chart");
onMounted(() => {
setChart(
getPieChart((data.current / data.total) * 100, data.current, data.total),
chart.value
);
});
</script>
<style lang="scss" scoped>
.wrap1 {
width: 141.6px;
display: flex;
flex-direction: column;
align-items: center;
}
.chart {
width: 94px;
height: 94px;
}
.title {
font-size: 20px;
font-weight: 700;
margin-top: 12px;
color: rgba(59, 65, 75, 1);
}
.titleSub {
font-size: 16px;
font-weight: 400;
margin-top: 2px;
color: rgba(10, 87, 166, 1);
}
.slope {
width: 68px;
height: 40px;
background-color: aqua;
margin-top: 2px;
background: linear-gradient(
180deg,
rgba(20, 67, 187, 0.3),
rgba(20, 67, 187, 0) 100%
);
position: relative;
overflow: hidden;
}
.slopeLine {
height: 100px;
width: 200%;
background-color: #fff;
border-bottom: 1.5px solid blue;
position: absolute;
top: -82px;
left: -50%;
transform: rotate(0deg);
transform-origin: center bottom;
}
</style>
src/views/portals/index.vue 0 → 100644
浏览文件 @ 08b76029
<template>
<div class="wrap">
<el-row>
<CardCustom
@more-click="moreClick"
title="风险信号"
:style="{ width: '986px', height: '540px' }"
title-background-color="rgba(206, 79, 81, 1)"
>
<template #icon>
<div class="icon icon1"></div>
</template>
</CardCustom>
<CardCustom
@more-click="moreClick"
title="安全速递"
:style="{ width: '600px', height: '540px', marginLeft: '14px' }"
title-background-color="rgba(206, 79, 81, 1)"
>
<template #icon>
<div class="icon icon1"></div>
</template>
<div
class="item"
v-for="(item, index) in securityExpressList"
:key="index"
>
<span class="itemLevel" :class="levelMap[item.level].class">
{{ levelMap[item.level].text }}
</span>
<div class="itemText">{{ item.title }}</div>
<span class="itemTime">{{ item.time }}</span>
<span
class="itemFlag"
:style="{ backgroundImage: 'url(' + item.flag + ')' }"
></span>
</div>
</CardCustom>
</el-row>
<el-card class="gap">
<el-row>
<PieProgress v-for="item in List" :data="item" />
</el-row>
</el-card>
<el-row class="gap">
<CardCustom
@more-click="moreClick"
title="科技动态"
:style="{ width: '792px', height: '360px' }"
title-background-color="rgba(10, 87, 166, 1)"
line-color="rgba(10, 87, 166, 1)"
>
<template #icon>
<div class="icon icon2"></div>
</template>
<div
class="itemTrends"
v-for="(item, index) in trendsList"
:key="index"
>
<span class="itemTrendsIcon"> </span>
<div class="itemTrendsText">{{ item.title }}</div>
<span class="itemTrendsTime">{{ item.time }}</span>
</div>
</CardCustom>
<CardCustom
@more-click="moreClick"
title="科技政策"
:style="{ width: '792px', height: '360px', marginLeft: '16px' }"
title-background-color="rgba(10, 87, 166, 1)"
line-color="rgba(10, 87, 166, 1)"
>
<template #icon>
<div class="icon icon3"></div>
</template>
<div
class="itemTrends"
v-for="(item, index) in policyList"
:key="index"
>
<span class="itemTrendsIcon"> </span>
<div class="itemTrendsText">{{ item.title }}</div>
<span class="itemTrendsTime">{{ item.time }}</span>
</div>
</CardCustom>
</el-row>
<div class="gap">
<el-row class="cardContainer">
<div class="itemCard">
<span class="itemCardIcon itemCardIcon1"></span>
<div class="itemCardTitle">业务协同</div>
</div>
<div class="itemCard">
<span class="itemCardIcon itemCardIcon2"></span>
<div class="itemCardTitle">专题研判</div>
</div>
<div class="itemCard">
<span class="itemCardIcon itemCardIcon3"></span>
<div class="itemCardTitle">数据直报</div>
</div>
<div class="itemCard">
<span class="itemCardIcon itemCardIcon4"></span>
<div class="itemCardTitle">专家库</div>
</div>
</el-row>
</div>
<el-row class="gap">
<CardCustom
@more-click="moreClick"
title="最新报告"
:style="{ width: '1600px', height: '360px' }"
title-background-color="rgba(10, 87, 166, 1)"
line-color="rgba(10, 87, 166, 1)"
>
<template #icon>
<div class="icon icon4"></div>
</template>
<template #right>
<div class="moreWrap">
<el-button text @click="moreClick" :style="{ marginLeft: '515px' }">
<span class="moreText">更多</span>
<el-icon :size="14"> <Plus /> </el-icon>
</el-button>
<el-button text @click="moreClick">
<span class="moreText">换一批</span>
<span class="shuaxinIcon"></span>
</el-button>
</div>
</template>
<el-row>
<div :style="{ width: '750px' }">
<div
class="itemTrends"
v-for="(item, index) in policyList"
:key="index"
>
<span class="itemTrendsIcon"> </span>
<div class="itemTrendsText">{{ item.title }}</div>
<span class="itemTrendsTime">{{ item.time }}</span>
</div>
</div>
<div class="CardCustomRight">
<div class="itemCard1" v-for="item in 3">
<div class="itemCard1Img">
<div class="itemCard1Footer">
国内外技术创新合作模式探索与实践
</div>
</div>
</div>
</div>
</el-row>
</CardCustom>
</el-row>
<el-row class="gap spaceBetween">
<el-card v-for="(item, index) in catdList" class="itemCard2" :key="index">
<div
class="itemCard2Line"
:style="{ backgroundColor: item.bgColor }"
></div>
<div class="itemCard2Container">
<div class="itemCard2BigTextWrap" :style="{ color: item.bgColor }">
{{ item.title }}
</div>
<div
class="itemCard2TextWrap"
v-for="(itemText, inde) in item.list"
:key="index"
>
<div class="temCard2Title">{{ itemText.title }}</div>
<div class="temCard2Text">{{ itemText.text }}</div>
</div>
</div>
</el-card>
</el-row>
</div>
</template>
<script setup>
import CardCustom from "./components/CardCustom.vue";
import PieProgress from "./components/PieProgress.vue";
import flag1 from "./assets/img/flag1.png";
import flag2 from "./assets/img/flag2.png";
import flag3 from "./assets/img/flag3.png";
import { ref } from "vue";
const levelMap = {
L1: { text: "特别重大", class: "level1" },
L2: { text: "重大风险", class: "level2" },
L3: { text: "一般风险", class: "level3" },
};
const securityExpressList = ref([
{
title:
"美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实",
level: "L1",
time: "一天前",
flag: flag1,
},
{
title: "美国加强对华AI芯片出口限制，考虑制...",
level: "L1",
time: "一天前",
flag: flag1,
},
{
title: "日本出台《半导体材料出口管制令》...",
level: "L1",
time: "一天前",
flag: flag2,
},
{
title: "日本对GAAFET技术、EUV光刻设备等...",
level: "L1",
time: "一天前",
flag: flag2,
},
{
title: "欧盟签署协议限制高端AI芯片对华出口",
level: "L2",
time: "一天前",
flag: flag3,
},
{
title: "欧盟第18轮制裁中首次将3家中资企业...",
level: "L2",
time: "一天前",
flag: flag3,
},
{
title: "美国发布《保障信息和通信技术与服务...",
level: "L2",
time: "一天前",
flag: flag1,
},
{
title: "日本将42家中国实体列入出口管制“...",
level: "L3",
time: "一天前",
flag: flag2,
},
{
title: "美国政府放慢向英伟达和超威等芯片...",
level: "L3",
time: "一天前",
flag: flag1,
},
{
title: "七国集团成员国就人工智能发表了以...",
level: "L3",
time: "一天前",
flag: flag3,
},
]);
const trendsList = ref([
{
title: "韩研制用于存内计算的小型低功耗神经形态模块",
time: "08-16",
},
{
title: "中国科学院大学等在有机太阳能电池领域取得重要突破",
time: "08-16",
},
{
title: "德国于利希研究中心成功制造并实验验证全球首个二维半金属材料",
time: "08-16",
},
{
title: "浙江大学开发“女娲”AI模型，精准预测基因组调控序列",
time: "08-16",
},
{
title: "我国基于碳量子点材料制备出高效低成本有机太阳能电池",
time: "08-16",
},
{
title: "谷歌Gemini 2.5系列模型更新，实现高速推理与极致性价比",
time: "08-16",
},
{
title: "上海理工大学联合杜克大学在AI赋能仿生视觉技术领域实现突破",
time: "08-16",
},
]);
const policyList = ref([
{
title:
"美国发布《2025财年国防授权法案》，拨款替换华为、中兴设备；禁止国防...",
time: "08-16",
},
{
title:
"美国发布对华投资限制新规，限制美资在半导体、AI、量子技术等领域的对...",
time: "08-16",
},
{
title:
"欧盟发布《网络弹性法案》（CRA），要求数字产品全生命周期安全合规，...",
time: "08-16",
},
{
title:
"欧盟发布对外投资审查建议，要求成员国审查在半导体、AI、量子技术等领...",
time: "08-16",
},
{
title:
"日本出台《半导体出口管制修正》加强对十余种半导体相关物项的出口管制...",
time: "08-16",
},
{
title:
"日本拟出台“许可制”，限制外国留学生（特别提及中国）学习半导体、机...",
time: "08-16",
},
{
title: "日本通过并实施《经济安全保障推进法案》相关措施",
time: "08-16",
},
]);
const List = ref([
{
title: "当月/总数",
titleSub: "较上月+4",
progress: 90,
slope: "add",
total: 8,
current: 7,
},
{
title: "人工智能",
titleSub: "较上月+4",
progress: 50,
slope: "add",
total: 26,
current: 3,
},
{
title: "生物技术",
titleSub: "较上月+4",
progress: 60,
slope: "add",
total: 13,
current: 3,
},
{
title: "航空航天",
titleSub: "较上月+4",
progress: 40,
slope: "add",
total: 15,
current: 3,
},
{
title: "新一代信息技术",
titleSub: "较上月+4",
progress: 50,
slope: "add",
total: 12,
current: 3,
},
{
title: "量子科技",
titleSub: "较上月+4",
progress: 20,
slope: "add",
total: 8,
current: 3,
},
{
title: "新能源",
titleSub: "较上月+4",
progress: 90,
slope: "add",
total: 18,
current: 3,
},
{
title: "集成电路",
titleSub: "较上月+4",
progress: 20,
slope: "add",
total: 16,
current: 3,
},
{
title: "海洋",
titleSub: "较上月+4",
progress: 50,
slope: "add",
total: 8,
current: 3,
},
{
title: "先进制造",
titleSub: "较上月+4",
progress: 50,
slope: "add",
total: 15,
current: 3,
},
{
title: "新材料",
titleSub: "较上月+4",
progress: 50,
slope: "add",
total: 8,
current: 3,
},
]);
const catdList = ref([
{
title: "数据资源管理",
bgColor: "rgba(206, 79, 81, 1)",
list: [
{
title: "数据资源目录",
text: "平台各类数据资源汇总导航",
},
{
title: "数据统计分析",
text: "查看资源发布量、各部门资源注册情况",
},
{
title: "信息空间",
text: "对数据资源的全生命周期进行管理",
},
],
},
{
title: "信息发布与管理",
bgColor: "rgba(19, 168, 168, 1)",
list: [
{
title: "信息编辑",
text: "信息的内容导入、格式编辑",
},
{
title: "信息审核",
text: "发布前内容自动审核、词库屏蔽",
},
{
title: "信息发布",
text: "提供点到点以及点到面的消息发送",
},
],
},
{
title: "应用支撑平台",
bgColor: "rgba(250, 140, 22, 1)",
list: [
{
title: "应用功能目录",
text: "快速访问和使用系统功能",
},
{
title: "应用工具目录",
text: "各项应用工具的使用方法和应用场景",
},
{
title: "应用功能与工具管理",
text: "实现功能及工具快捷访问配置入口",
},
],
},
{
title: "后台服务管理",
bgColor: "rgba(10, 87, 166, 1)",
list: [
{
title: "界面配置管理",
text: "支持界面布局、样式定制化修改",
},
{
title: "数据接口管理",
text: "实现数据接口的访问调用、权限控制等",
},
{
title: "系统配置管理",
text: "支持各分系统配置的定制与调整",
},
],
},
]);
function moreClick(n) {
alert(n);
}
</script>
<style lang="scss" scoped>
.wrap {
width: 1600px;
margin: 30px auto;
}
.gap {
margin-top: 24px;
}
.icon {
width: 24px;
height: 22px;
background-size: contain;
background-repeat: no-repeat;
}
.icon1 {
background-image: url("./assets/img/icon1.png");
}
.icon2 {
background-image: url("./assets/img/icon2.png");
}
.icon3 {
background-image: url("./assets/img/icon3.png");
}
.icon4 {
background-image: url("./assets/img/icon4.png");
}
.item {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 7px;
}
.itemLevel {
width: 40px;
height: 40px;
border-radius: 20px;
font-family: Microsoft YaHei;
font-size: 12px;
font-weight: 400;
line-height: 14px;
padding: 6px 4px;
text-align: center;
margin-right: 5px;
}
.itemTime {
color: rgba(132, 136, 142, 1);
}
.itemFlag {
width: 20px;
height: 20px;
background-size: cover;
background-repeat: no-repeat;
margin-left: 10px;
}
.itemTrends {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 20px;
}
.itemTrendsIcon {
width: 4px;
height: 4px;
background-color: rgba(206, 79, 81, 1);
border-radius: 50%;
margin-right: 14px;
margin-left: 20px;
}
.itemTrendsText {
flex: 1;
}
.itemTrendsTime {
margin-right: 6px;
}
.level1 {
background: rgb(255, 241, 240);
color: rgb(245, 34, 45);
}
.level2 {
color: rgb(250, 140, 22);
background: rgb(255, 247, 230);
}
.level3 {
color: rgb(82, 196, 26);
background: rgb(246, 255, 237);
}
.itemText {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cardContainer {
justify-content: space-between;
}
.itemCardWrap {
width: 400px;
display: flex;
flex-direction: row;
justify-content: center;
}
.itemCard {
width: 388px;
height: 80px;
border-radius: 4px;
background-image: url("./assets/img/cardBg.png");
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
.itemCardIcon {
width: 30px;
height: 30px;
background-size: contain;
margin-right: 7px;
}
.itemCardIcon1 {
background-image: url("./assets/img/cardIcon1.png");
}
.itemCardIcon2 {
background-image: url("./assets/img/cardIcon2.png");
}
.itemCardIcon3 {
background-image: url("./assets/img/cardIcon3.png");
}
.itemCardIcon4 {
background-image: url("./assets/img/cardIcon4.png");
}
.itemCardTitle {
font-size: 24px;
font-weight: 700;
color: #ffffff;
}
}
.moreWrap {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
height: 100%;
padding-left: 10px;
padding-right: 10px;
flex: 1;
.moreText {
margin-right: 3px;
}
.shuaxinIcon {
width: 16px;
height: 16px;
background-image: url("./assets/img/shuaxin.png");
background-size: contain;
}
}
.CardCustomRight {
flex: 1;
padding-left: 50px;
padding-right: 50px;
margin-left: 30px;
display: flex;
justify-content: space-between;
}
.itemCard1 {
.itemCard1Img {
position: relative;
width: 204px;
height: 266px;
background-image: url("./assets/img/book.png");
background-size: contain;
.itemCard1Footer {
position: absolute;
left: 0;
bottom: 0;
width: 204px;
height: 64px;
padding: 10px;
background-color: #000;
color: #fff;
}
}
}
.spaceBetween {
justify-content: space-between;
}
.itemCard2 {
width: 388px;
height: 360px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
:deep(.el-card__body) {
padding-top: 0;
}
.itemCard2Line {
/* 矩形 214 */
width: 320px;
height: 4px;
background-color: rgba(206, 79, 81, 1);
position: absolute;
top: 0;
left: 34px;
}
.itemCard2Container {
width: 320px;
height: 360px;
.itemCard2BigTextWrap {
color: rgba(206, 79, 81, 1);
font-size: 24px;
font-weight: 700;
height: 83px;
display: flex;
flex-direction: column;
justify-content: center;
border-bottom: 1px solid #ddd;
}
.itemCard2TextWrap {
height: 83px;
display: flex;
flex-direction: column;
justify-content: center;
border-bottom: 1px solid #ddd;
}
.temCard2Title {
color: rgba(59, 65, 75, 1);
font-size: 20px;
font-weight: 700;
}
.temCard2Text {
color: rgba(95, 101, 108, 1);
font-size: 16px;
font-weight: 400;
}
}
}
</style>
src/views/portals/utils/charts.js 0 → 100644
浏览文件 @ 08b76029
import * as echarts from "echarts";
const getPieChart = (number, current, total) => {
const option = {
// 图表标题可置于中心，模拟居中文字的一部分
title: {
text: current + '/' + total, // 主百分比文字
left: 'center',
top: 'center',
textStyle: {
fontSize: 20,
fontWeight: 'bold',
color: '#333'
}
},
series: [
// 背景环系列
{
type: 'pie',
radius: ['84%', '96%'], // 细圆环：内半径50%，外半径55% [citation:5]
silent: true, // 禁用交互 [citation:2]
label: { show: false }, // 不显示标签 [citation:2]
data: [
{
value: 100, // 背景环占满100%，模拟完整圆环
itemStyle: {
color: '#f0f0f0' // 背景环颜色，通常为浅色
}
}
]
},
// 数据进度环系列
{
type: 'pie',
radius: ['80%', '100%'], // 与背景环同样粗细
startAngle: 90, // 起始角度，从顶部开始 [citation:4]
labelLine: false,
silent: true,
data: [
{
value: number, // 实际进度值，对应70%
itemStyle: {
// 使用线性渐变
color: {
type: 'linear',
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [{
offset: 0, color: 'rgba(105, 177, 255, 1)' // 渐变起始颜色
}, {
offset: 1, color: 'rgba(255, 120, 117, 1)' // 渐变结束颜色
}]
}
}
},
{
value: 100 - number, // 剩余部分 (100 - 70)%
itemStyle: {
color: 'transparent' // 剩余部分透明，仅显示实际进度部分
}
}
]
}
]
};
return option
}
const setChart = (option, chartDom) => {
let chart = echarts.init(chartDom);
chart.setOption(option);
return chart;
};
export {
getPieChart,
setChart
}
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论