Skip to content

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

修改冲突

上级 377f30c9 367c86e4
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 543 行增加 和 2 行删除
src/router/index.js
浏览文件 @ 3164101f
......@@ -44,6 +44,9 @@ import MarketSingleCaseDeepdig from "@/views/marketAccessRestrictions/singleCase
// 智能写报
import WrittingAsstaint from '@/views/writtingAsstaint/index.vue'
// 门户
import Portal1 from '@/views/portals/portal1/index.vue';
import Portal2 from '@/views/portals/portal2/index.vue';
const routes = [
// 智能写报
......@@ -380,11 +383,75 @@ const routes = [
meta: {
title: "科研资助"
}
}
},
// 门户路由放在这块
{
path: "/portal1",
name: "portal1",
component: Portal1,
meta: {
title: "门户1"
}
},
{
path: "/portal2",
name: "portal2",
component: Portal2,
meta: {
title: "门户2"
}
},
// 转移过来的页面
{
path: "/analysis",
name: "analysis",
component: () => import("@/views/analysis/index.vue"),
meta: {
title: "分析页"
}
},
{
path: "/infoplatform",
name: "infoplatform",
component: () => import("@/views/infoPlatform/index.vue"),
meta: {
title: "信息平台"
}
},
{
path: "/rulelimit",
name: "rulelimit",
component: () => import("@/views/ruleLimit/index.vue"),
meta: {
title: "规则限制"
}
},
{
path: "/ruledetail",
name: "ruledetail",
component: () => import("@/views/ruleDetail/index.vue"),
meta: {
title: "规则详情"
}
},
{
path: "/researchfunding",
name: "researchfunding",
component: () => import("@/views/researchFunding/index.vue"),
meta: {
title: "科研资助"
}
},
{
path: "/decree",
name: "decree",
component: () => import("@/views/decree/index.vue"),
meta: {
title: "政令信息"
}
},
];
......
src/views/portals/components/CardCustom.vue 0 → 100644
浏览文件 @ 3164101f
<template>
<el-card class="card">
<div class="wrap">
<div class="line" :style="{ backgroundColor: lineColor }"></div>
<div class="header" :style="{ height: headerHeight }">
<div class="iconWrap" :style="{ width: iconWidth }">
<slot name="icon">
<el-icon :size="20">
<Edit />
</el-icon>
</slot>
</div>
<div
class="titleWrap"
:style="{
backgroundColor: titleBackgroundColor,
color: titleColor,
paddingLeft: titleTextAlign === 'left' ? '0px' : '20px'
}"
>
{{ 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"
},
titleColor: {
type: String,
default: "#fff"
},
titleTextAlign: {
type: String,
default: "center"
},
lineColor: {
type: String,
default: "transparent"
},
title: {
type: String,
default: "风险信号"
},
iconWidth: {
type: String,
default: "60px"
},
headerHeight: {
type: String,
default: "48px"
}
});
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
浏览文件 @ 3164101f
<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/portal1/index.vue 0 → 100644
浏览文件 @ 3164101f
差异被折叠。
src/views/portals/portal2/index.vue 0 → 100644
浏览文件 @ 3164101f
<template>
<div class="wrap">
<el-row>
<CardCustom
title="热门数据"
title-text-align="left"
title-color="rgba(10, 87, 166, 1)"
:style="{ width: '520px', height: '459px' }"
title-background-color="rgba(255, 255, 255, 1)"
header-height="53px"
>
<template #icon>
<div class="icon icon5"></div>
</template>
<template #right>
<div></div>
</template>
<div class="item" v-for="(item, index) in List" :key="index">
<span class="itemNumber" :style="{ color: getColor(index) }">
{{ index + 1 }}
</span>
<div class="itemText">{{ item.title }}</div>
<span class="itemClass">{{ item.class }}</span>
</div>
</CardCustom>
<CardCustom
title="数据分布"
title-text-align="left"
title-color="rgba(10, 87, 166, 1)"
:style="{ width: '1064px', height: '459px', marginLeft: '16px' }"
title-background-color="rgba(255, 255, 255, 1)"
header-height="53px"
>
<template #icon>
<div class="icon icon3"></div>
</template>
<template #right>
<div></div>
</template>
</CardCustom>
</el-row>
<div class="gap">
<el-row class="cardContainer">
<div class="itemCard">
<div class="itemCardTitle">科研学术</div>
<div class="itemCardNumber">2465</div>
</div>
</el-row>
</div>
</div>
</template>
<script setup>
import CardCustom from "../components/CardCustom.vue";
import { ref } from "vue";
function getColor(index) {
const mapColor = ["rgba(206, 79, 81, 1)", "rgba(255, 169, 64, 1)", "rgba(255, 197, 61, 1)"];
let color = mapColor[index];
return color || "transparent";
}
const List = ref([
{
title: "H.R.1-119th-大而美法案",
class: "科技法案"
},
{
title: "欧盟单方面宣布对中国电动汽车加征反补贴...",
class: "媒体报道"
},
{
title: "禁止在中国建设半导体产能",
class: "总统政令"
},
{
title: "2025年实体清单",
class: "实体清单"
},
{
title: "2025年实体清单",
class: "实体清单"
},
{
title: "2025年实体清单",
class: "实体清单"
},
{
title: "2025年实体清单",
class: "实体清单"
},
{
title: "2025年实体清单",
class: "实体清单"
},
{
title: "2025年实体清单",
class: "实体清单"
},
{
title: "2025年实体清单",
class: "实体清单"
}
]);
</script>
<style lang="scss" scoped>
.wrap {
width: 1600px;
margin: 30px auto;
}
.gap {
margin-top: 24px;
}
.icon {
width: 18px;
height: 18px;
background-size: contain;
background-repeat: no-repeat;
}
.icon3 {
background-image: url("../assets/img/icon3.png");
}
.icon5 {
background-image: url("../assets/img/icon5.png");
}
.item {
display: flex;
flex-direction: row;
align-items: center;
margin-top: 7px;
}
.itemNumber {
width: 40px;
}
.itemText {
flex: 1;
}
.itemClass {
color: rgba(132, 136, 142, 1);
}
.cardContainer {
justify-content: space-between;
}
.itemCard{
/* 容器 245 */
width: 186px;
height: 80px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 4px;
}
.itemCardTitle{
font-size: 20px;
font-weight: 700;
}
.itemCardNumber{
margin-top: 5px;
font-size: 16px;
}
</style>
src/views/portals/utils/charts.js 0 → 100644
浏览文件 @ 3164101f
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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论