Skip to content

R
risk-monitor
提交 fe67cdaa authored 作者: 张烨's avatar 张烨
浏览文件
操作

feat:科技政令增政令关系挖掘页面

上级 a9b8232b
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 52 行增加 和 461 行删除
src/views/decree/decreeLayout/influence/ChartChain.vue
浏览文件 @ fe67cdaa
......@@ -5,7 +5,7 @@
<div class="hintWrap">
<div class="icon1"></div>
<div class="title">
2025年实体清单制裁范围扩大至芯片制造环节，为中国的芯片制造能力划定“技术天花板”，阻止其向更先进水平发展。制裁范围向上游设备和材料、下游先进封装以及关键工具（如EDA软件）延伸，意图瓦解中国构建自主可控产业链的努力。
这项政令标志着中美AI竞争进入一个新阶段，其核心特征是 “精准封锁”与“体系输出”相结合。它短期内无疑会给中国AI产业链带来压力，但长期看，这场竞争更可能是一场围绕技术路线、生态系统和治理规则的持久战。
</div>
<div class="icon2Wrap">
<div class="icon2"></div>
......@@ -14,20 +14,20 @@
<div class="right-main-content-main">
<div class="fishbone-wrapper">
<div class="fishbone-scroll-container" ref="scrollContainerRef">
<div class="fishbone" ref="fishboneRef" v-if="fishboneDataList.length > 0">
<div class="main-line" :style="{ width: fishboneDataList.length * 200 + 300 + 'px' }">
<div class="fishbone" v-if="dataList.length > 0">
<div class="main-line" :style="{ width: dataList.length * 200 + 300 + 'px' }">
<!-- 主轴上的标签 -->
<div class="main-line-text" v-for="(item, index) in mainLineLabels" :key="'label-' + index"
<div class="main-line-text" v-for="(item, index) in dataList" :key="'label-' + index"
:class="{
'blue-theme': index < 2,
'green-theme': index >= 2 && index < 4,
'purple-theme': index >= 4
}" :style="{ left: index * 200 + 220 + 'px' }">
{{ item }}
{{ item.text }}
</div>
</div>
<!-- 奇数索引的数据组放在上方 -->
<div v-for="(causeGroup, groupIndex) in getOddGroups(fishboneDataList)" :key="'top-' + groupIndex"
<div v-for="(causeGroup, groupIndex) in onFilterData(1)" :key="'top-' + groupIndex"
:class="getTopBoneClass(groupIndex)" :style="{ left: groupIndex * 400 + 420 + 'px' }">
<div class="left-bone">
<div class="left-bone-item" v-for="(item, index) in getLeftItems(causeGroup.causes)" :key="'left-' + index">
......@@ -46,7 +46,7 @@
</div>
<!-- 偶数索引的数据组放在下方 -->
<div v-for="(causeGroup, groupIndex) in getEvenGroups(fishboneDataList)" :key="'bottom-' + groupIndex"
<div v-for="(causeGroup, groupIndex) in onFilterData(0)" :key="'bottom-' + groupIndex"
:class="getBottomBoneClass(groupIndex)" :style="{ left: groupIndex * 400 + 220 + 'px' }">
<div class="left-bone">
<div class="left-bone-item" v-for="(item, index) in getLeftItems(causeGroup.causes)" :key="'left-bottom-' + index">
......@@ -157,11 +157,32 @@ const getCnEntityOnChainData = async () => {
}
}
// 实体清单-深度挖掘-产业链鱼骨图信息
const fishboneDataList = ref([]);
const mainLineLabels = ref([]);
// 产业链鱼骨数据
const dataList = ref([]);
// 奇数索引的数据组放在上方, 偶数索引的数据组放在下方
const onFilterData = (num) => {
return dataList.value.filter((_, index) => index % 2 === num);
};
// 获取左侧显示的项目（前半部分）
const getLeftItems = items => {
const midpoint = Math.ceil(items.length / 2);
return items.slice(0, midpoint);
};
// 获取右侧显示的项目（后半部分）
const getRightItems = items => {
const midpoint = Math.ceil(items.length / 2);
return items.slice(midpoint);
};
// 获取上方鱼骨图位置类名
const getTopBoneClass = index => {
const positions = ["top-bone", "top-bone1", "top-bone2"];
return positions[index % 3] || "top-bone";
};
// 获取下方鱼骨图位置类名
const getBottomBoneClass = index => {
const positions = ["bottom-bone", "bottom-bone1", "bottom-bone2"];
return positions[index % 3] || "bottom-bone";
};
const getFishboneData = async () => {
const currentSanction = sanctionList.value.find(item => item.id === currentSanctionId.value);
const date = currentSanction ? currentSanction.date : '';
......@@ -177,51 +198,34 @@ const getFishboneData = async () => {
try {
const res = await getDeepMiningIndustryFishbone(params);
console.log("获取产业链数据:", res);
if (res.code === 200 && res.data && res.data.causes && res.data.causes.length > 0) {
const rootCauses = res.data.causes;
if (rootCauses.length > 0 && rootCauses[0].causes) {
fishboneDataList.value = rootCauses.map(group => {
return {
causes: group.causes || []
};
});
mainLineLabels.value = rootCauses.map(group => group.text || '');
} else {
fishboneDataList.value = [];
mainLineLabels.value = [];
}
if (res.code === 200 && res.data?.causes?.length) {
dataList.value = res.data.causes;
} else {
fishboneDataList.value = [];
mainLineLabels.value = [];
dataList.value = [];
}
} catch (error) {
console.error("获取产业链鱼骨图数据失败:", error);
fishboneDataList.value = [];
dataList.value = [];
}
}
// 实体清单-深度挖掘-产业链列表信息
const industryList = ref([]);
const selectedIndustryId = ref(null);
const getIndustryList = async () => {
try {
const res = await getDeepMiningIndustry();
if (res.code === 200 && res.data && res.data.length > 0) {
industryList.value = res.data;
selectedIndustryId.value = res.data[0].id;
getFishboneData();
getCnEntityOnChainData();
} else {
industryList.value = [];
selectedIndustryId.value = null;
}
} catch (error) {
console.error("获取产业链列表数据失败:", error);
industryList.value = [];
selectedIndustryId.value = null;
}
}
......@@ -283,40 +287,6 @@ const sanctionList = ref([
]);
const currentSanctionId = ref(5);
// 获取奇数索引的数据组（放在上方）
const getOddGroups = data => {
return data.filter((_, index) => index % 2 !== 0);
};
// 获取偶数索引的数据组（放在下方）
const getEvenGroups = data => {
return data.filter((_, index) => index % 2 === 0);
};
// 获取上方鱼骨图位置类名
const getTopBoneClass = index => {
const positions = ["top-bone", "top-bone1", "top-bone2"];
return positions[index % 3] || "top-bone";
};
// 获取下方鱼骨图位置类名
const getBottomBoneClass = index => {
const positions = ["bottom-bone", "bottom-bone1", "bottom-bone2"];
return positions[index % 3] || "bottom-bone";
};
// 获取左侧显示的项目（前半部分）
const getLeftItems = items => {
const midpoint = Math.ceil(items.length / 2);
return items.slice(0, midpoint);
};
// 获取右侧显示的项目（后半部分）
const getRightItems = items => {
const midpoint = Math.ceil(items.length / 2);
return items.slice(midpoint);
};
// 格式化比率
const formatRate = (rate, ratio=false) => {
if (!rate) return '0.00';
......@@ -454,7 +424,6 @@ onMounted(() => {
left: 0;
width: 100%;
height: 100%;
// background: repeating-linear-gradient(to right, rgba(174, 208, 255, 1) 0, rgba(174, 208, 255, 1) 10px, transparent 10px, transparent 20px);
}
// 添加中间的文字块
......
src/views/decree/decreeLayout/influence/ChartRelation.vue
浏览文件 @ fe67cdaa
<template>
<div class="relation-graph-wrapper">
<div class="graph-controls">
<div v-for="item in controlBtns" :key="item.type"
:class="['control-btn', { 'control-btn-active': currentLayoutType === item.type }]"
@click="handleClickControlBtn(item.type)">
<!-- 这项政令标志着中美AI竞争进入一个新阶段，其核心特征是 “精准封锁”与“体系输出”相结合。它短期内无疑会给中国AI产业链带来压力，但长期看，这场竞争更可能是一场围绕技术路线、生态系统和治理规则的持久战。 -->
<div v-for="item in controlBtns" :key="item.type" :class="['control-btn', { 'control-btn-active': currentLayoutType === item.type }]" @click="handleClickControlBtn(item.type)">
<img :src="item.icon" alt="" />
</div>
</div>
<div ref="containerRef" class="graph-container"></div>
<div v-if="selectedNode" class="node-popup">
<div class="popup-header">
<img :src="selectedNode.image || echartsIcon03" alt="" class="popup-icon" />
<div class="popup-title">{{ selectedNode.name }}</div>
<el-icon class="close-icon" @click="selectedNode = null">
<Close />
</el-icon>
</div>
<div class="popup-body">
<div v-if="selectedNode.isSanctioned" class="tag-row">
<span class="red-dot"></span>
<span class="red-text">被制裁实体</span>
</div>
<p class="desc">{{ selectedNode.description || '暂无描述' }}</p>
</div>
</div>
</div>
</template>
......@@ -56,7 +38,6 @@ const emit = defineEmits(['nodeClick', 'layoutChange'])
const containerRef = ref(null)
const graphInstance = ref(null)
const currentLayoutType = ref(1)
const selectedNode = ref(null)
const controlBtns = [
{ type: 1, icon: echartsIcon01, name: '力导向布局' },
......@@ -594,12 +575,11 @@ const bindGraphEvents = () => {
graphInstance.value.on('node:click', (evt) => {
const node = evt.item
const model = node.getModel()
selectedNode.value = model
emit('nodeClick', model)
})
graphInstance.value.on('canvas:click', () => {
selectedNode.value = null
})
}
......@@ -713,84 +693,4 @@ defineExpose({
background: rgba(231, 243, 255, 1);
}
}
.node-popup {
position: absolute;
bottom: 16px;
left: 16px;
width: 320px;
background: rgba(255, 255, 255, 1);
border-radius: 8px;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(234, 236, 238, 1);
z-index: 20;
.popup-header {
display: flex;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.popup-icon {
width: 32px;
height: 32px;
margin-right: 8px;
border-radius: 50%;
object-fit: cover;
}
.popup-title {
flex: 1;
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
color: rgba(59, 65, 75, 1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.close-icon {
cursor: pointer;
color: rgba(132, 136, 142, 1);
font-size: 16px;
&:hover {
color: rgba(5, 95, 194, 1);
}
}
}
.popup-body {
padding: 12px 16px;
.tag-row {
display: flex;
align-items: center;
margin-bottom: 8px;
.red-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(245, 63, 63, 1);
margin-right: 8px;
}
.red-text {
font-size: 14px;
font-family: "Microsoft YaHei";
color: rgba(245, 63, 63, 1);
}
}
.desc {
font-size: 14px;
font-family: "Microsoft YaHei";
line-height: 22px;
color: rgba(95, 101, 108, 1);
margin: 0;
}
}
}
</style>
\ No newline at end of file
src/views/decree/decreeLayout/influence/index.vue
浏览文件 @ fe67cdaa
......@@ -93,12 +93,12 @@
</template>
<script setup>
import { ref, computed, watch, onMounted } from "vue";
import { ref, onMounted } from "vue";
import setChart from "@/utils/setChart";
import { Search } from '@element-plus/icons-vue'
import getBarChart from "./utils/barChart";
import { getDecreeIndustry, getDecreehylyList, getDecreeCompany, getDecreeAction } from "@/api/decree/influence";
import { getCnEntityOnChain, getChainFishbone, getChainInfoByDomainId, getChainStructure } from "@/api/exportControl";
import { getDecreeIndustry, getDecreehylyList, getDecreeCompany } from "@/api/decree/influence";
import { getCnEntityOnChain, getChainInfoByDomainId } from "@/api/exportControl";
import { getSingleSanctionEntitySupplyChain } from "@/api/exportControlV2.0";
import ChartChain from "./ChartChain.vue";
import ChartRelation from "./ChartRelation.vue";
......
src/views/decree/decreeLayout/overview/introduction/index.vue
浏览文件 @ fe67cdaa
......@@ -77,83 +77,7 @@
</div>
</div>
</div>
</AnalysisBox>
<!-- <div class="box-header">
<div class="header-left">
</div>
<div class="title">基本信息</div>
<div class="header-right">
<div class="icon">
<img src="../assets/icons/header-right-icon1.png" alt="" />
</div>
<div class="icon">
<img src="../assets/icons/header-right-icon2.png" alt="" />
</div>
</div>
</div>
<div class="box1-main">
<div class="box1-main-left" v-if="basicInfo.img">
<img :src="basicInfo.img" alt="" />
</div>
<div v-else class="box1-main-left-img-mock">
<img class="img-mock-badge-img" src="./assets/images/badge.png">
<p class="img-mock-badge-title">{{basicInfo.eName }}</p>
<p class="img-mock-badge-org">The White House</p>
</div>
<div class="box1-main-right">
<div class="item">
<div class="item-left">{{ "政令全称：" }}</div>
<div class="item-right">{{ basicInfo.name }}</div>
</div>
<div class="item">
<div class="item-left">{{ "英文全称：" }}</div>
<div class="item-right text" v-if="basicInfo.eName?.length < 60">
{{ basicInfo.eName }}
</div>
<el-popover v-else effect="dark" :width="500" :content="basicInfo.eName"
placement="top-start">
<template #reference>
<div class="item-right text">
{{ basicInfo.eName }}
</div>
</template>
</el-popover>
</div>
<div class="item">
<div class="item-left">{{ "相关领域：" }}</div>
<div class="item-right tag-box">
<div class="tag" v-for="(area, index) in basicInfo.areaList" :key="index">
{{ area.industryName }}
</div>
</div>
</div>
<div class="item">
<div class="item-left">{{ "签署时间：" }}</div>
<div class="item-right text">{{ basicInfo.signTime }}</div>
</div>
<div class="item">
<div class="item-left">{{ "发布机构：" }}</div>
<div class="item-right text">
{{ basicInfo.proposeOrgName }}
</div>
</div>
<div class="item">
<div class="item-left">{{ "政令编号：" }}</div>
<div class="item-right text">
{{ basicInfo.bh }}
</div>
</div>
<div class="item">
<div class="item-left">{{ "执行期限：" }}</div>
<div class="item-right text">
{{ basicInfo.deadline + " 天" }}
</div>
</div>
</div>
</div> -->
</div>
<div class="box2">
<!-- <AnalysisBox title="主要指令" :showAllBtn="false">
......@@ -245,66 +169,6 @@
</div>
</div>
</AnalysisBox>
<!-- <div class="box-header">
<div class="header-left"></div>
<div class="title">发布机构</div>
<div class="header-right">
<div class="icon">
<img src="../assets/icons/header-right-icon1.png" alt="" />
</div>
<div class="icon">
<img src="../assets/icons/header-right-icon2.png" alt="" />
</div>
</div>
</div>
<div class="box3-top">
<div class="box3-top-top" @click="handleToInstitution(box3TopTopData)">
<div class="left">
<img :src="box3TopTopData.logo ? box3TopTopData.logo : DefaultIcon2" alt="" />
</div>
<div class="right">
<div class="name">{{ box3TopTopData.name + " >" }}</div>
<div class="ename">{{ box3TopTopData.eName }}</div>
</div>
</div>
<div class="box3-top-bottom">
<div class="box3-top-bottom-header">
<div class="icon">
<img src="./assets/images/box3-icon1.png" alt="" />
</div>
<div class="text">{{ "关键人物" }}</div>
</div>
<div class="box3-top-bottom-main">
<div class="box3-top-bottom-item" v-for="(item, index) in box3TopBottomData" :key="index">
<div class="box3-top-bottom-item-left">
<img :src="item.avatar ? item.avatar : DefaultIcon1" alt="" />
</div>
<div class="box3-top-bottom-item-right">
<div class="name">{{ item.name }}</div>
<div class="position">{{ item.job }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="box3-bottom">
<div class="box3-bottom-header">
<div class="header-icon">
<img src="./assets/images/box3-bottom-header-icon.png" alt="" />
</div>
<div class="header-title">{{ "机构动态" }}</div>
</div>
<div class="box3-bottom-main">
<el-timeline style="max-width: 500px">
<el-timeline-item :timestamp="item.newsDate" placement="top"
v-for="(item, index) in eventList?.slice(0, 3)" :key="index">
<div class="timeline-content">
{{ item.newsContent }}
</div>
</el-timeline-item>
</el-timeline>
</div>
</div> -->
</div>
</div>
</div>
......@@ -584,97 +448,17 @@ onMounted(() => {
}
.introduction-wrap {
width: 1600px;
height: 100%;
display: flex;
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 18px;
width: 8px;
height: 20px;
border-radius: 0 4px 4px 0;
background: var(--color-main-active);
}
.title {
margin-left: 14px;
margin-top: 14px;
height: 26px;
line-height: 26px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
}
.header-btn-box {
position: absolute;
z-index: 9999;
width: 325px;
height: 64px;
top: 14px;
right: 82px;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: 5px 8px;
white-space: nowrap;
overflow: hidden;
overflow-y: auto;
padding-right: 5px;
.btn {
min-width: min-content;
height: 28px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 28px;
cursor: pointer;
}
.btnActive {
border: 1px solid var(--color-main-active);
color: var(--color-main-active);
background: rgba(231, 243, 255, 1);
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
height: 28px;
display: flex;
gap: 4px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
}
}
gap: 16px;
.left {
width: 1064px;
width: 20px;
flex: auto;
.box1 {
margin-top: 16px;
width: 1064px;
height: 414px;
.box1-main {
......@@ -775,72 +559,12 @@ onMounted(() => {
.box2 {
margin-top: 16px;
width: 1064px;
height: 330px;
// .box2-main {
// margin-left: 22px;
// height: 280px;
// overflow: hidden;
// overflow-y: auto;
// .box2-item {
// width: 1015px;
// // height: 48px;
// margin-bottom: 8px;
// box-sizing: border-box;
// border: 1px solid rgba(234, 236, 238, 1);
// border-radius: 2px;
// background: rgba(255, 255, 255, 1);
// display: flex;
// align-items: center;
// padding: 12px 0;
// &:nth-child(2n-1) {
// background: rgba(247, 248, 249, 1);
// }
// .id {
// margin-left: 15px;
// width: 24px;
// height: 24px;
// text-align: center;
// line-height: 24px;
// border-radius: 12px;
// background: #e7f3ff;
// color: #0a57a6;
// }
// .title {
// width: 1020px;
// line-height: 24px;
// margin-left: 10px;
// color: rgba(59, 65, 75, 1);
// font-family: Microsoft YaHei;
// font-size: 16px;
// font-weight: 700;
// // overflow: hidden;
// // text-overflow: ellipsis;
// // white-space: nowrap;
// }
// .open {
// width: 16px;
// height: 16px;
// margin-top: 16px;
// img {
// width: 100%;
// height: 100%;
// }
// }
// }
// }
.box2-main {
margin-top: 3px;
margin-left: 31px;
height: 330px;
height: 100%;
width: 1004px;
overflow: hidden;
overflow-y: auto;
......@@ -934,7 +658,6 @@ onMounted(() => {
.right {
width: 520px;
margin-left: 16px;
.box3 {
margin-top: 16px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论