Skip to content

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

update

上级 d1c60abe 360ea9fc
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 1335 行增加 和 24 行删除
src/components/button/button.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="button" @click="emit('click')" :class="{ activeButton: isActive }">
<slot name="default"></slot>
</div>
</template>
<script setup>
const props = defineProps({
isActive: {
type: Boolean,
default: false
}
});
const emit = defineEmits(["click"]);
</script>
<style lang="scss" scoped>
.button {
/* 复选标签 */
height: 28px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: 1px solid rgb(230, 231, 232);
border-radius: 4px;
background-color: rgb(255, 255, 255);
color: rgb(59, 65, 75);
font-size: 16px;
font-weight: 400;
cursor: pointer;
padding-left: 8px;
padding-right: 8px;
}
.activeButton {
border: 1px solid rgb(10, 87, 166);
background: rgb(246, 250, 255);
color: rgb(10, 87, 166);
}
</style>
src/components/buttonList/buttonList.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="buttonList" :style="{ gap: gap + 'px' }">
<Button class="button" @click="setActiveIndex(item)" :is-active="isActive(item)" v-for="item in list" :key="item.id">
<slot name="item" :item="item">
{{ item.text }}
</slot>
</Button>
</div>
</template>
<script setup>
import { ref } from "vue";
import Button from "../button/button.vue";
const props = defineProps({
activeId: {
type: [Number, Array],
default: 0
},
gap: {
type: Number,
default: 8
},
multiple: {
type: Boolean,
default: false
},
list: {
type: Array,
default: function () {
return [];
}
}
});
const emit = defineEmits(["click"]);
const isActive = item => {
if (!props.multiple) {
return item.id === props.activeId;
} else {
return props.activeId.includes(item.id);
}
};
function setActiveIndex(item) {
if (!props.multiple) {
if (props.activeId === item.id) {
return;
}
emit("click", item.id);
} else {
let idList;
if (props.activeId.includes(item.id)) {
idList = props.activeId.filter(currentId => currentId !== item.id);
} else {
idList = props.activeId.concat(item.id);
}
emit("click", idList);
}
}
</script>
<style lang="scss" scoped>
.buttonList {
display: flex;
gap: 8px;
}
</style>
src/router/index.js
浏览文件 @ f0b6e7f7
......@@ -67,6 +67,12 @@ import ComprehensiveSearch from '@/views/comprehensiveSearch/index.vue'
import SearchResults from '@/views/comprehensiveSearch/searchResults/index.vue'
import Chat from '@/views/comprehensiveSearch/chat/index.vue'
// 合作限制
import CooperationRestrictions from "@/views/coopRestriction/index.vue";
import CooperationRestrictionsDetail from "@/views/coopRestriction/detail/index.vue";
const routes = [
// 智能写报
{
......@@ -77,15 +83,6 @@ const routes = [
title: "智能写报"
}
},
{
path: "/chat",
name: "chat",
component: Chat,
meta: {
title: "智能问答"
}
},
{
path: "/",
redirect: "/overView"
......@@ -265,17 +262,6 @@ const routes = [
}
]
},
// 出口管制首页
{
path: "/exportControl",
name: "ExportControl",
component: ExportControl,
meta: {
title: "出口管制"
}
},
// 政令首页
{
path: "/decree",
......@@ -401,15 +387,50 @@ const routes = [
}
]
},
// 出口管制首页
{
path: "/exportControl",
name: "ExportControl",
component: ExportControl,
meta: {
title: "出口管制"
}
},
// 出口管制转移过来的页面
{
path: "/exportControl/analysis",
name: "analysis",
path: "/exportControlAnalysis",
name: "exportControlAnalysis",
component: () => import("@/views/exportControl/analysis/index.vue"),
redirect: "/exportControlAnalysis/overview",
meta: {
title: "分析页"
}
},
children: [
{
path: "overview",
name: "exportControlAnalysisOverview",
component: () => import("@/views/exportControl/analysis/content/overview.vue"),
meta: {
title: "制裁概况"
}
},
{
path: "deepDig",
name: "exportControlAnalysisDeepDig",
component: () => import("@/views/exportControl/analysis/content/deepDig.vue"),
meta: {
title: "深度挖掘"
}
},
{
path: "influence",
name: "exportControlAnalysisInfluence",
component: () => import("@/views/exportControl/analysis/content/influence.vue"),
meta: {
title: "影响分析"
}
},
]
},
{
path: "/exportControl/infoplatform",
......@@ -519,6 +540,49 @@ const routes = [
]
},
// 综合搜索
{
path: "/comprehensiveSearch",
name: "comprehensiveSearch",
component: ComprehensiveSearch,
meta: {
title: "综合搜索"
}
},
{
path: "/searchResults",
name: "searchResults",
component: SearchResults,
meta: {
title: "搜索结果"
}
},
{
path: "/chat",
name: "chat",
component: Chat,
meta: {
title: "智能问答"
}
},
// 合作限制
{
path: "/cooperationRestrictions",
name: "CooperationRestrictions",
component: CooperationRestrictions,
meta: {
title: "合作限制"
}
},
// 合作限制详情
{
path: "/coopRestriction/detail",
name: "CooperationRestrictionsDetail",
component: CooperationRestrictionsDetail,
meta: {
title: "合作限制详情"
}
},
// 出口管制转移过来的页面
{
path: "/exportControl/analysis",
......
src/views/coopRestriction/common/comTitle.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="com-title">
<div class="cl1"></div>
<div class="cl2"></div>
<div class="title">{{ title }}</div>
<div class="cl3"></div>
</div>
</template>
<script setup>
import { ref } from "vue";
// 传入的title数据
const props = defineProps({
title: {
type: String,
default: ""
}
});
</script>
<style scoped lang="scss">
* {
margin: 0;
padding: 0;
}
.com-title {
width: 1575px;
height: 42px;
display: flex;
align-items: center;
.cl1 {
width: 24px;
height: 30px;
background-color: rgba(174, 214, 255, 1);
margin-right: 8px;
}
.cl2 {
width: 8px;
height: 30px;
background-color: rgba(174, 214, 255, 1);
margin-right: 8px;
}
.title {
width: 152px;
height: 42px;
text-align: center;
font-size: 32px;
font-weight: 700;
font-family: 'Microsoft YaHei';
line-height: 42px;
margin-right: 8px;
}
.cl3 {
width: 1367px;
height: 1px;
background-color: rgba(174, 214, 255, 1);
box-sizing: border-box;
}
}
</style>
src/views/coopRestriction/components/dataNew/index.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="data-new">
<div class="left">
<img src="./assets/leftbtn.png" alt="" class="left-btn" />
<img src="./assets/rightbtn.png" alt="" class="right-btn" />
<div class="left-top">
<img src="./assets/icon01.png" alt="" />
<div class="left-top-title">合作限制动态</div>
<span>查看详情 ></span>
</div>
<div class="left-center">
<img src="./assets/usImg.png" alt="" />
<div class="left-center-main">
<div class="left-center-main-title">保护美国资金与专业知识免受敌对研究利用法案</div>
<div class="left-center-main-ul">
<ul>
<li>
<span class="ul-title">数据来源：</span>
<span class="ul-content">美国国会</span>
</li>
<li>
<span class="ul-title">合作限制类型：</span>
<span class="ul-content">科研合作限制</span>
</li>
<li>
<span class="ul-title">发布日期：</span>
<span class="ul-content">2025年10月7日</span>
</li>
<li>
<span class="ul-title">涉及领域</span>
<span class="ul-pie cl1">航空航天</span>
<span class="ul-pie cl2">人工智能</span>
<span class="ul-pie cl3">集成电路</span>
</li>
</ul>
</div>
</div>
<div class="left-center-title">国会法案</div>
</div>
<div class="left-bottom">
<ul>
<li class="left-bottom-li">内容摘要：</li>
</ul>
<div class="left-bottom-content">
该法案已被纳入《国防授权法案》（NDAA）的讨论范畴，并已在参议院通过审议
。该法案规定，将禁止任何与中国等被视为“敌对国”有合作关系的科学家获得联邦资助
。其限制范围极其宽泛，从联合研究、合著论文到指导研究生或博士后几乎全覆盖
。更严厉的是，该条款具有追溯效力，可追溯至过去5年的合作。
</div>
</div>
</div>
<div class="right">
<div class="right-top">
<img src="./assets/icon02.png" alt="" />
<div class="right-top-title">
风险信号
<span>4</span>
</div>
</div>
<div style="margin: 6px 34px 0 23px">
<div v-for="item in list" :key="item.id" class="right-main">
<div class="main-left" :class="{ cl4: item.title === '特别重大', cl5: item.title === '重大风险' }">
{{ item.title }}
</div>
<div class="main-center">{{ item.content }}</div>
<div class="main-right">{{ item.time }}</div>
</div>
</div>
<div class="right-mainbtn">
<img src="./assets/btn.png" alt="" />
查看更多
</div>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
const list = ref([
{
id: 1,
title: "特别重大",
content: "保护美国资金与专业知识免受敌对研究利用法案",
time: "一天前"
},
{
id: 2,
title: "特别重大",
content: "美国国土安全部终止哈佛大学SEVP认证",
time: "一天前"
},
{
id: 3,
title: "重大风险",
content: "众议院“美中战略竞争特别委员会”向国会提...",
time: "一天前"
},
{
id: 4,
title: "重大风险",
content: '2026财年拨款法案要求重启"中国行动计划"',
time: "一天前"
}
]);
</script>
<style scoped lang="scss">
* {
margin: 0;
padding: 0;
}
.data-new {
width: 1600px;
height: 460px;
display: flex;
justify-content: space-between;
.left {
width: 1064px;
height: 460px;
margin-right: 16px;
border-radius: 10px;
background-color: #fff;
border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
position: relative;
.left-btn {
width: 24px;
height: 48px;
position: absolute;
top: 223px;
left: 0px;
cursor: pointer;
}
.right-btn {
width: 24px;
height: 48px;
position: absolute;
top: 223px;
right: 0px;
cursor: pointer;
}
.left-top {
width: 100%;
height: 48px;
position: relative;
border-bottom: 1px solid rgb(234, 236, 238);
img {
width: 18px;
height: 18px;
position: absolute;
top: 15px;
left: 23px;
}
span {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
position: absolute;
top: 19px;
right: 40px;
color: rgb(5, 95, 194);
cursor: pointer;
}
.left-top-title {
margin-left: 60px;
width: 152px;
height: 48px;
background-color: rgb(5, 95, 194);
color: #fff;
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
text-align: center;
padding: 11px 16px;
}
}
.left-center {
width: 967px;
height: 208px;
margin-top: 33px;
margin-left: 62px;
border-bottom: 1px solid rgb(234, 236, 238);
position: relative;
img {
width: 148px;
height: 148px;
margin-right: 21px;
}
display: flex;
.left-center-main {
width: 439px;
height: 175px;
.left-center-main-title {
margin-left: 19px;
margin-bottom: 17px;
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
color: rgb(5, 95, 194);
}
.left-center-main-ul {
width: 439px;
height: 132px;
ul {
list-style-position: inside;
li {
width: 100%;
height: 24px;
margin-bottom: 12px;
.ul-title {
display: inline-block;
width: 120px;
height: 24px;
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
}
.ul-content {
color: rgb(59, 65, 75);
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.ul-pie {
display: inline-block;
box-sizing: border-box;
padding: 2px 8px;
border: 1px solid;
border-radius: 4px;
margin-right: 8px;
}
.cl1 {
border-color: rgba(186, 224, 255, 1);
background-color: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.cl2 {
border-color: rgba(255, 163, 158, 1);
background-color: rgba(255, 241, 240, 1);
color: rgba(245, 34, 45, 1);
}
.cl3 {
border-color: rgba(135, 232, 222, 1);
background-color: rgba(230, 255, 251, 1);
color: rgba(19, 168, 168, 1);
}
}
}
}
}
.left-center-title {
padding: 3px 8px 5px;
height: 32px;
border-radius: 4px;
background-color: rgba(231, 243, 255, 1);
font-size: 18px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(5, 95, 194);
position: absolute;
right: 0px;
top: -1px;
}
}
.left-bottom {
margin: 17px 0 0 62px;
ul {
list-style-position: inside;
.left-bottom-li {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
margin-bottom: 10px;
}
}
.left-bottom-content {
width: 943px;
margin-left: 22px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 30px;
color: rgb(59, 65, 75);
}
}
}
.right {
width: 520px;
height: 460px;
border-radius: 10px;
background-color: #fff;
border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
position: relative;
.right-top {
width: 520px;
height: 48px;
border-bottom: 1px solid rgb(234, 236, 238);
position: relative;
img {
width: 21px;
height: 16.84px;
position: absolute;
top: 15.1px;
left: 19.5px;
}
.right-top-title {
padding: 11px 16px;
width: 148px;
height: 48px;
background-color: rgb(206, 79, 81);
font-size: 20px;
font-family: "Microsoft YaHei";
font-weight: 700;
line-height: 26px;
text-align: center;
color: #fff;
margin-left: 60px;
span {
display: inline-block;
width: 24px;
height: 20px;
background-color: rgba(255, 255, 255, 0.3);
font-size: 14px;
font-family: "Microsoft YaHei";
font-weight: 400;
line-height: 22px;
text-align: center;
color: #fff;
border-radius: 100px;
}
}
}
.right-main {
width: 463px;
height: 47px;
border-radius: 2px;
display: flex;
align-items: center;
.main-left {
width: 40px;
height: 40px;
margin: 4px 13px 3px 2px;
border-radius: 50%;
font-size: 12px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 14px;
padding: 6px 4px;
text-align: center;
}
.cl4 {
background-color: rgba(255, 241, 240, 1);
color: rgb(206, 79, 81);
}
.cl5 {
background-color: rgba(255, 247, 230, 1);
color: rgba(250, 140, 22, 1);
}
.main-center {
width: 347px;
height: 30px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 30px;
color: rgb(59, 65, 75);
margin-right: 2px;
}
.main-right {
width: 60px;
height: 24px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(132, 136, 142);
text-align: right;
}
}
.right-mainbtn {
width: 460px;
height: 42px;
border-radius: 6px;
position: absolute;
left: 26px;
bottom: 21px;
background-color: rgb(5, 95, 194);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
img {
width: 16px;
height: 16px;
margin-right: 8px;
}
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
}
}
}
</style>
src/views/coopRestriction/detail/index.vue 0 → 100644
浏览文件 @ f0b6e7f7
差异被折叠。
src/views/coopRestriction/index.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="coop-page">
<!-- 面包屑 -->
<div class="breadcrumb">
<div class="breadcrumb-box">
<div class="breadcrumb-item">国家科技安全</div>
<div class="breadcrumb-item">&nbsp;>&nbsp;</div>
<div class="breadcrumb-item back-item" @click="handleBackHome">中美博弈概览</div>
<div class="breadcrumb-item">&nbsp;>&nbsp;</div>
<div class="breadcrumb-item">合作限制</div>
</div>
</div>
<!-- 主页面 -->
<div class="main-content">
<!-- 搜索栏部分 -->
<div class="search">
<div class="search-main">
<input v-model="input" placeholder="搜索合作限制" class="search-input" />
<div class="search-btn">
<img src="./assets/icons/search-icon.png" alt="" />
搜索
</div>
</div>
<div class="search-center">
<div class="search-item">
<div class="search-item-num">32</div>
<div class="search-item-name">相关法案</div>
</div>
<div class="search-item">
<div class="search-item-num">9</div>
<div class="search-item-name">相关政令</div>
</div>
<div class="search-item">
<div class="search-item-num">41</div>
<div class="search-item-name">相关政府公告</div>
</div>
</div>
<div class="search-bottom">
<div class="btn">
<div class="btn-text">最新动态</div>
<div class="btn-icon">></div>
</div>
<div class="btn">
<div class="btn-text">咨询要闻</div>
<div class="btn-icon">></div>
</div>
<div class="btn">
<div class="btn-text">数据总览</div>
<div class="btn-icon">></div>
</div>
<div class="btn">
<div class="btn-text">资源库</div>
<div class="btn-icon">></div>
</div>
</div>
</div>
<!-- 最新动态 -->
<div class="newdata">
<com-title title="最新动态" />
<div class="newdata-main">
<newData />
</div>
</div>
<!-- 资讯要问 -->
<div class="ask">
<com-title title="咨询要闻" />
<div class="ask-main">
<askPage />
</div>
</div>
<!-- 数据总览 -->
<div class="datasub">
<com-title title="数据总览" />
<div class="datasub-main">
<dataSub />
</div>
</div>
<!-- 资源库 -->
<div class="reslib">
<com-title title="资源库" />
<div class="reslib-main">
<resLib />
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import comTitle from "./common/comTitle.vue";
import newData from "./components/dataNew/index.vue";
import askPage from "./components/askPage/index.vue";
import dataSub from "./components/dataSub/index.vue";
import resLib from "./components/resLib/index.vue";
import { useContainerScroll } from "@/hooks/useScrollShow";
// 搜索框
const input = ref("");
const router = useRouter();
// 返回首页
const handleBackHome = () => {
router.push({
path: "/overview"
});
};
</script>
<style scoped lang="scss">
* {
margin: 0;
padding: 0;
}
.coop-page {
width: 100%;
height: 100%;
.breadcrumb {
width: 100%;
height: 64px;
background-image: url("./assets/images/bread-bg.png");
background-size: cover;
padding: 17px 0px 21px 0px;
.breadcrumb-box {
margin-left: 160px;
display: flex;
// align-items: center;
.breadcrumb-item {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 30px;
color: #fff;
}
.back-item {
cursor: pointer;
&:hover {
color: #999;
}
}
}
}
.main-content {
overflow: auto;
width: 100%;
height: calc(100% - 64px);
background: url("./assets/images/background.png");
background-size: 100% 100%;
padding: 44px 160px 30px 160px;
.search {
width: 960px;
height: 225px;
margin: 0 auto 68px auto;
.search-main {
display: flex;
padding-right: 3px;
align-items: center;
justify-content: space-between;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
width: 960px;
height: 48px;
background-color: rgba(255, 255, 255, 0.65);
border-radius: 10px;
border: 1px solid #fff;
.search-input {
border: none;
outline: none;
width: 800px;
height: 48px;
background-color: transparent;
font-size: 16px;
padding: 12px 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(132, 136, 142);
}
.search-btn {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 42px;
border-radius: 8px;
background-color: rgb(5, 95, 194);
font-size: 18px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: #fff;
img {
width: 22px;
height: 22px;
margin-right: 8px;
}
}
}
.search-center {
width: 440px;
height: 57px;
margin: 36px auto;
display: flex;
align-items: center;
justify-content: space-between;
.search-item {
box-sizing: border-box;
width: 120px;
height: 57px;
.search-item-num {
width: 120px;
height: 22px;
font-size: 36px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 22px;
color: rgb(5, 95, 194);
text-align: center;
cursor: pointer;
}
.search-item-name {
width: 120px;
height: 24px;
margin-top: 11px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(95, 101, 108);
text-align: center;
}
}
}
.search-bottom {
width: 688px;
height: 48px;
margin: 0 auto;
display: flex;
justify-content: space-between;
// gap: 16px;
.btn {
display: flex;
width: 160px;
height: 48px;
border: 1px solid rgba(174, 214, 255, 1);
box-sizing: border-box;
border-radius: 32px;
justify-content: center;
align-items: center;
background: rgba(231, 243, 255, 1);
position: relative;
cursor: pointer;
padding: 10px 40px 12px 36px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
&:hover {
background: #cae3fc;
}
.btn-text {
color: rgb(5, 95, 194);
font-family: "Microsoft YaHei";
font-size: 20px;
font-weight: 400;
line-height: 26px;
height: 26px;
}
.btn-icon {
position: absolute;
top: 14px;
right: 19px;
color: rgb(5, 95, 194);
font-size: 20px;
font-weight: 400;
}
}
}
}
.newdata {
width: 1600px;
height: 538px;
margin: 36px auto 64px auto;
.newdata-main {
width: 1600px;
height: 460px;
margin-top: 36px;
}
}
.ask {
width: 1600px;
height: 528px;
margin: 0 auto 64px auto;
.ask-main {
width: 1600px;
height: 450px;
margin-top: 36px;
}
}
.datasub {
width: 1600px;
height: 538px;
margin: 0 auto 88px auto;
.datasub-main {
width: 1600px;
height: 460px;
margin-top: 36px;
}
}
.reslib {
width: 1600px;
height: 1633px;
margin: 0 auto 0px auto;
.reslib-main {
width: 1600px;
height: 1565px;
margin-top: 26px;
}
}
}
}
</style>
src/views/exportControl/analysis/components/mapCharts.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="mapChartsWrap">
<Echarts :option="mapOption"></Echarts>
</div>
</template>
<script setup>
import Echarts from "@/components/Chart/index.vue";
import { getMapOption } from "../../utils/charts";
import { ref, onMounted, shallowRef } from "vue";
const mapOption = shallowRef({});
onMounted(() => {
mapOption.value = getMapOption();
});
</script>
<style lang="scss" scoped>
.mapChartsWrap {
width: 100%;
height: 100%;
}
</style>
src/views/exportControl/analysis/components/panel1.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="panel1Wrap">
<div class="row">
<CardCustom title="实体清单制裁强度" :style="{ width: '798px', height: '422px' }">
<div class="sunPanel1"></div>
</CardCustom>
<CardCustom title="新增实体数量增长趋势" :style="{ width: '798px', height: '422px' }">
<div class="sunPanel2"></div>
</CardCustom>
</div>
<div class="row">
<CardCustom title="实体清单更新频率" :style="{ width: '798px', height: '422px' }">
<div class="sunPanel3"></div>
</CardCustom>
<CardCustom title="重点实体列表" :style="{ width: '798px', height: '422px' }">
<div class="sunPanel4"></div>
</CardCustom>
</div>
</div>
</template>
<script setup>
import CardCustom from "../../components/CardCustom.vue";
</script>
<style lang="scss" scoped>
.panel1Wrap {
width: 1600px;
margin: 0px auto 0 auto;
padding-bottom: 20px;
}
.row {
display: flex;
flex-direction: row;
gap: 16px;
margin-top: 15px;
}
.subPanel1 {
height: 100%;
padding: 2px 24px 0 24px;
display: flex;
}
</style>
src/views/exportControl/analysis/components/panel2.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="panel2">panel2</div>
</template>
<script setup></script>
<style lang="scss" scoped></style>
src/views/exportControl/analysis/components/panel3.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="panel3">panel3</div>
</template>
<script setup></script>
<style lang="scss" scoped></style>
src/views/exportControl/analysis/components/panel4.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="panel4">panel4</div>
</template>
<script setup></script>
<style lang="scss" scoped></style>
src/views/exportControl/analysis/components/pieCharts.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="pieChartsWrap">
<div class="item">
<Echarts :option="pie1Option"></Echarts>
</div>
<div class="item">
<Echarts :option="pie2Option"></Echarts>
</div>
</div>
</template>
<script setup>
import Echarts from "@/components/Chart/index.vue";
import { getPieOption } from "../../utils/charts";
import { ref, onMounted, shallowRef } from "vue";
const pie1Option = shallowRef({});
const pie2Option = shallowRef({});
onMounted(() => {
pie1Option.value = getPieOption(
[
{ name: "能源领域", value: 30 },
{ name: "集成电路领域", value: 20 },
{ name: "人工智能领域", value: 12 },
{ name: "通信网络领域", value: 18 },
{ name: "量子科技领域", value: 10 },
{ name: "生物科技领域", value: 10 }
],
"领域分布"
);
pie2Option.value = getPieOption(
[
{ name: "能源领域", value: 30 },
{ name: "集成电路领域", value: 20 },
{ name: "人工智能领域", value: 12 },
{ name: "通信网络领域", value: 18 },
{ name: "量子科技领域", value: 10 },
{ name: "生物科技领域", value: 10 }
],
"类别分布"
);
});
</script>
<style lang="scss" scoped>
.pieChartsWrap {
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
gap: 16px;
padding-top: 6px;
.item {
width: 460px;
height: 388px;
background-color: rgba(231, 243, 255, 0.5);
}
}
</style>
src/views/exportControl/analysis/content/deepDig.vue 0 → 100644
浏览文件 @ f0b6e7f7
<template>
<div class="deepDig">
<div class="row">
<div class="panelButtonList">
<div
class="item"
:class="{ activeItem: activePanelId === item.id }"
v-for="item in panelListData"
:key="item.id"
@click="setActivePanelId(item.id)"
>
<div
class="line"
:class="{
lineActive: activePanelId === item.id,
lineUp: activePanelId !== item.id && item.isUp,
lineDown: activePanelId !== item.id && !item.isUp
}"
></div>
<div class="infoWrap">
<div
class="number"
:class="{
numberActive: activePanelId === item.id,
numberUp: activePanelId !== item.id && item.isUp,
numberDown: activePanelId !== item.id && !item.isUp
}"
>
{{ item.number }}
</div>
<div class="name">{{ item.name }}</div>
</div>
<div class="text">较上次{{ item.isUp ? "增加" : "减少" }}{{ item.ComparisonNumber }}个</div>
<div
class="icon"
:class="{
iconActiveUp: activePanelId === item.id && item.isUp,
iconActiveDown: activePanelId === item.id && !item.isUp,
iconUp: activePanelId !== item.id && item.isUp,
iconDown: activePanelId !== item.id && !item.isUp
}"
></div>
</div>
</div>
</div>
<div class="row">
<panel1 v-if="activePanelId === panelListData[0].id"></panel1>
<panel2 v-if="activePanelId === panelListData[1].id"></panel2>
<panel3 v-if="activePanelId === panelListData[2].id"></panel3>
<panel4 v-if="activePanelId === panelListData[3].id"></panel4>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import Panel1 from "../components/panel1.vue";
import Panel2 from "../components/panel2.vue";
import Panel3 from "../components/panel3.vue";
import Panel4 from "../components/panel4.vue";
const panelListData = [
{
id: 1,
name: "新增实体数量",
number: "37",
isUp: true,
ComparisonNumber: "31"
},
{
id: 2,
name: "上市企业数量",
number: "6",
isUp: true,
ComparisonNumber: "2"
},
{
id: 3,
name: "涉及领域数量",
number: "2",
isUp: false,
ComparisonNumber: "1"
},
{
id: 4,
name: "实体类别数量",
number: "4",
isUp: true,
ComparisonNumber: "1"
}
];
const activePanelId = ref(panelListData[0].id);
const setActivePanelId = id => {
activePanelId.value = id;
};
</script>
<style lang="scss" scoped>
.deepDig {
width: 1600px;
margin: 0px auto 0 auto;
padding-bottom: 20px;
}
.row {
display: flex;
flex-direction: row;
gap: 16px;
margin-top: 15px;
}
.panelButtonList {
display: flex;
justify-content: center;
gap: 16px;
.item {
width: 388px;
height: 80px;
border-radius: 4px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
display: flex;
align-items: center;
cursor: pointer;
.line {
width: 4px;
height: 49px;
margin-right: 26px;
}
.lineActive {
background-color: rgba(255, 255, 255, 1);
}
.lineUp {
background-color: rgba(206, 79, 81, 1);
}
.lineDown {
background-color: rgba(33, 129, 57, 1);
}
.infoWrap {
flex: 1;
display: flex;
flex-direction: column;
.number {
font-size: 30px;
font-weight: 700;
line-height: 24px;
}
.numberActive {
color: rgba(255, 255, 255, 1);
}
.numberUp {
color: rgba(206, 79, 81, 1);
}
.numberDown {
color: rgba(33, 129, 57, 1);
}
.name {
color: rgba(34, 41, 52, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
.text {
color: rgba(34, 41, 52, 1);
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
.icon {
width: 32px;
height: 32px;
margin-right: 15px;
margin-left: 8px;
background-size: 100% 100%;
}
.iconActiveUp {
background-image: url("../../assets/images/activeUp.png");
}
.iconActiveDown {
background-image: url("../../assets/images/activeDown.png");
}
.iconUp {
background-image: url("../../assets/images/UnActiveUp.png");
}
.iconDown {
background-image: url("../../assets/images/UnActiveDown.png");
}
}
.activeItem {
background-color: rgba(5, 95, 194, 1);
.infoWrap {
.name {
color: rgba(255, 255, 255, 1);
}
}
.text {
color: rgba(255, 255, 255, 1);
}
}
}
</style>
src/views/exportControl/assets/images/aiIcon.png 0 → 100644
浏览文件 @ f0b6e7f7
差异被折叠。
src/views/exportControl/utils/China.json 0 → 100644
浏览文件 @ f0b6e7f7
差异被折叠。
src/views/exportControl/utils/charts.js 0 → 100644
浏览文件 @ f0b6e7f7
差异被折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论