Skip to content

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

Merge branch 'master' into zy-dev

上级 fe67cdaa 67c1079a
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 453 行增加 和 170 行删除
src/components/base/messageBubble/index.vue
浏览文件 @ e24a2a85
......@@ -8,7 +8,7 @@
<div class="header-title">
<slot name="title">{{ "社交媒体" }}</slot>
</div>
<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
<!-- <div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div> -->
</div>
<div class="msg-bubble-main">
<div class="message-bubble" v-for="(item, index) in messageList" :key="index" @click="handleClickPerson(item)">
......
src/styles/common.scss
浏览文件 @ e24a2a85
......@@ -178,56 +178,88 @@
font-size: 12px;
}
.main-color{
.main-color {
color: rgb(5, 95, 194);
}
// 业务主色 高亮背景
.color-bg-active{
.color-bg-active {
background: rgb(246, 250, 255);
}
// 黑色
.text-primary-clor{
.text-primary-clor {
color: #0a121e;
}
// 黑色90% / 主标题文字颜色
.text-primary-90-clor{
.text-primary-90-clor {
color: #222934;
}
// 黑色80% / 小标题文字颜色
.text-primary-80-clor{
.text-primary-80-clor {
color: #3b414b;
}
// 黑色65% / 正文颜色
.text-primary-65-clor{
.text-primary-65-clor {
color: #5f656c;
}
// 黑色50%
.text-primary-50-clor{
.text-primary-50-clor {
color: #84888e;
}
// 黑色10%
.bg-black-10{
.bg-black-10 {
background: #E6E7E8;
}
// 黑色5%
.bg-black-5{
.bg-black-5 {
background: #EAECEE;
}
// 黑色2%
.bg-black-2{
.bg-black-2 {
background: #F7F8F9;
}
// 白色主色
.bg-white-100{
.bg-white-100 {
background: #FFFFFF;
}
.color-red-100 {
color: rgb(206, 79, 81);
}
.bg-red-10 {
background: rgba(206, 79, 81, 0.1);
}
.color-orange-100 {
color: rgb(255, 149, 77)
}
.bg-orange-10 {
background: rgba(255, 149, 77, 0.1)
}
.color-yellow-100 {
color: rgb(232, 189, 11);
}
.bg-yellow-10 {
background: rgba(232, 189, 11, 0.1);
}
.color-green-100 {
color: rgb(33, 129, 57);
}
.bg-green-10 {
background: rgba(33, 129, 57, 0.1);
}
\ No newline at end of file
src/styles/components/textStyle.vue
浏览文件 @ e24a2a85
......@@ -96,7 +96,19 @@ const tableData = ref([
{ name: '白色主色', className: 'bg-white-100'},
{name: '主色', className: 'main-color'},
{name: '高亮背景色', className: 'color-bg-active'}
{name: '高亮背景色', className: 'color-bg-active'},
{name: '红色', className: 'color-red-100'},
{name: '红色10%', className: 'bg-red-10'},
{name: '橙色', className: 'color-orange-100'},
{name: '橙色10%', className: 'bg-orange-10'},
{name: '黄色', className: 'color-yellow-100'},
{name: '黄色10%', className: 'bg-yellow-10'},
{name: '绿色', className: 'color-green-100'},
{name: '绿色10%', className: 'bg-green-10'},
])
</script>
......
src/views/ZMOverView/components/fourSuppress/components/addDomain/index.vue
浏览文件 @ e24a2a85
......@@ -1084,7 +1084,8 @@ const processRankingData = rawData => {
// 新增字段
domains: item.domainList ? item.domainList.map(d => d.name) : [],
date: formattedDate,
member: item.keyMember || "-"
member: item.keyMember || "-",
province: item.province || ""
};
});
};
......
src/views/ZMOverView/components/fourSuppress/components/allGovernment/components/CalendarHeatmap.vue
浏览文件 @ e24a2a85
......@@ -37,22 +37,55 @@
</div>
</div>
</div> -->
<el-dialog v-model="tooltipVisible" width="690px">
<el-dialog v-model="tooltipVisible" width="1298px">
<div class="tooltip-header flex-display">
<div class="tooltip-header-left text-title-3-bold">{{ currentDate }}</div>
<div class="tooltip-header-right text-title-3-show">{{ `${currentOrgNum}个部门/${currentDetailList.length}项举措` }}
<div class="tooltip-header-right text-title-3-show">{{ `涉及${currentDetailList.length}项行政令` }}
</div>
</div>
<div class="tooltip-main">
<div class="tooltip-main-item" v-for="item, index in currentDetailList" :key="index">
<div class="item-footer color-bg-active flex-display" @click="handleToDetail(item)">
<div class="footer-text text-tip-2 main-color">{{ item.name }}</div>
<div class="footer-arrow">
<img src="./right-arrow.svg" alt="">
<div class="item-main-header flex-display" @click="handleToDetail(item)">
<div class="item-main-header-left">
<div class="item-main-header-type color-bg-active text-tip-1 main-color">{{ '政令' }}</div>
<div class="text-title-3-bold main-color">{{ item.administrativeOrderInfoTitle }}</div>
</div>
<div class="item-main-header-right text-tip-1-bold main-color">
{{ `涉及${item.orgNum}个部门` }}
</div>
</div>
<div class="item-list" v-for="val, idx in item.list" :key="idx">
<div class="item-header flex-display">
<div class="item-list">
<div class="item-list-item flex-display" v-for="val, idx in item.innerList" :key="idx">
<div class="item-list-left flex-display">
<div class="id text-bold main-color color-bg-active">{{ idx + 1 }}</div>
<div class="info">
<div class="content text-regular text-primary-80-clor">{{ val.name }}</div>
<div class="area-box flex-display">
<AreaTag v-for="tag, tagIdx in val.techDomainList" :key="tagIdx" :tagName="tag"></AreaTag>
</div>
</div>
</div>
<div class="item-list-right ">
<div class="right-list-item flex-display" v-for="org, orgIdx in val.orgList" :key="orgIdx">
<div class="org-box flex-display">
<div class="logo">
<img style="width: 100%; height: 100%;" :src="org.orgLogoUrl" alt="">
</div>
<div class="org-name text-tip-1 text-primary-80-clor">{{ org.orgName }}</div>
</div>
<div class="status">
<div class="status-on text-tip-2" v-if="org.stauts === 2">{{ '已落实' }}</div>
<div class="status-off text-tip-2" v-else>{{ '未落实' }}</div>
</div>
</div>
</div>
</div>
<!-- <div class="item-header flex-display">
<div class="item-header-left flex-display">
<div class="logo">
<img style="width:100%; height: 100%" :src="val.orgLogoUrl" alt="logo">
......@@ -67,7 +100,7 @@
<AreaTag v-for="tag, idxx in val.techDomainList.slice(0, 3)" :key="idxx" :tagName="tag"></AreaTag>
</div>
</div>
<div class="item-content text-compact">{{ val.name }}</div>
<div class="item-content text-compact">{{ val.name }}</div> -->
</div>
......@@ -184,7 +217,13 @@ function buildDataMap(arr) {
});
}
const d = map.get(date);
d.count += 1;
// d.count += 1;
// 按 administrativeOrderInfoTitle 去重计数
if (!d._titleSet) d._titleSet = new Set();
if (item.administrativeOrderInfoTitle && !d._titleSet.has(item.administrativeOrderInfoTitle)) {
d._titleSet.add(item.administrativeOrderInfoTitle);
d.count += 1;
}
if (item.status === 2) d.resolved += 1;
if (d.logos.length < 3 && item.orgLogoUrl) d.logos.push(item.orgLogoUrl);
d.status = 'has_events';
......@@ -373,7 +412,7 @@ function getOption() {
groupChildren.push({
type: 'text',
style: {
text: `${item.count}项`,
text: `${item.count}项行政令`,
x: x + 8,
y: y + cellHeight - 12,
textAlign: 'left',
......@@ -430,6 +469,8 @@ function getOption() {
// 点击政令，跳转详情
const handleToDetail = (item) => {
console.log('item', item);
const path = "/decreeLayout/overview/introduction";
const query = { id: item.orderId };
const route = router.resolve({ path, query });
......@@ -452,22 +493,47 @@ onMounted(() => {
if (list.length > 0) {
currentDate.value = date
// 按 administrativeOrderInfoTitle 分类
// const grouped = [];
// const map = new Map();
// 按 sanctionId 分类，sanctionId 相同合为一个元素，形式为 { name: 'xxx', info: {} }
const grouped = [];
const map = new Map();
const titleMap = new Map();
list.forEach(item => {
const key = item.administrativeOrderInfoTitle;
if (!map.has(key)) {
map.set(key, { name: key, list: [] });
grouped.push(map.get(key));
const title = item.administrativeOrderInfoTitle || '';
if (!titleMap.has(title)) {
titleMap.set(title, { administrativeOrderInfoTitle: title, innerList: [], orgNum: 0, orderId: item.orderId });
grouped.push(titleMap.get(title));
}
// 统计 orgNum
const group = titleMap.get(title);
// 用 Set 统计不同 orgName
if (!group._orgSet) group._orgSet = new Set();
group._orgSet.add(item.orgName);
group.orgNum = group._orgSet.size;
// 按 sanctionId 分类
const innerList = titleMap.get(title).innerList;
let sanctionGroup = innerList.find(g => g.sanctionId === item.sanctionId);
if (!sanctionGroup) {
sanctionGroup = {
sanctionId: item.sanctionId,
name: item.name,
techDomainList: item.techDomainList || [],
orgList: [],
info: []
};
innerList.push(sanctionGroup);
}
map.get(key).list.push(item);
sanctionGroup.orgList.push({
orgName: item.orgName,
orgLogoUrl: item.orgLogoUrl,
status: item.status
});
sanctionGroup.info.push({ ...item });
});
currentDetailList.value = grouped;
console.log('currentDetailList', currentDetailList.value);
// 统计不同 orgName 的个数
const orgNames = new Set(list.map(item => item.orgName));
currentOrgNum.value = orgNames.size
tooltipVisible.value = true
} else {
tooltipVisible.value = false
......@@ -503,27 +569,39 @@ onBeforeUnmount(() => {
/* pointer-events: none; */
/* 让鼠标事件穿透到图表，避免闪烁 */
z-index: 1000;
width: 670px;
width: 1278px;
background: rgb(255, 255, 255);
}
.tooltip-header {
height: 50px;
height: 56px;
box-sizing: border-box;
padding: 13px 24px;
padding: 12px 24px;
justify-content: space-between;
border-bottom: 1px solid rgb(234, 236, 238);
}
.tooltip-main {
padding: 0 24px 10px;
.tooltip-header-left{
margin-top: 10px;
}
.tooltip-header-right{
height: 34px;
background: rgba(206, 79, 81, 0.1);
border-radius: 17px;
color: rgba(206, 79, 81);
padding: 5px 12px;
}
/* .tooltip-main {
padding: 0 24px 10px;
} */
.tooltip-main-item {
padding: 10px 0;
width: 622px;
width: 1254px;
/* height: 144px; */
border-bottom: 1px solid rgb(234, 236, 238);
}
......@@ -540,6 +618,50 @@ onBeforeUnmount(() => {
}
.item-list-item{
padding: 12px 12px 16px 20px;
border-bottom: 1px solid rgb(234, 236, 238);
}
.item-list-left{
width: 848px;
}
.area-box {
margin-top: 8px;
gap: 8px;
}
.id{
width: 30px;
height: 30px;
border-radius: 15px;
text-align: center;
line-height: 30px;
}
.info{
width: 800px;
}
.item-list-right{
width: 356px;
justify-content: space-between;
}
.right-list-item {
justify-content: space-between;
margin-bottom: 8px;
}
.org-box {
gap: 8px;
}
.org-name{
width: 234px;
}
.logo {
width: 24px;
height: 24px;
......@@ -559,36 +681,33 @@ onBeforeUnmount(() => {
background: rgba(206, 79, 81, 0.1);
}
.item-content {
height: 48px;
display: -webkit-box;
-webkit-line-clamp: 2;
/* 限制显示2行 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
/* 可选：防止单词被截断 */
}
.item-header-right {
gap: 8px;
}
.item-footer {
width: 622px;
height: 40px;
.item-main-header {
width: 1254px;
height: 68px;
padding: 0 8px;
margin-top: 4px;
border-radius: 4px;
justify-content: space-between;
align-items: center;
cursor: pointer;
border-bottom: 1px solid rgb(234, 236, 238);
}
.item-main-header-left {
display: flex;
gap: 8px;
align-items: center;
}
.footer-arrow {
width: 20px;
height: 20px;
.item-main-header-type {
height: 28px;
border-radius: 4px;
padding: 0 8px;
line-height: 28px;
text-align: center;
}
</style>
src/views/ZMOverView/components/fourSuppress/components/allUnion/index.vue
浏览文件 @ e24a2a85
......@@ -148,7 +148,7 @@
<div class="warning">
<div class="warning-title">
<img src="./assets/warning.png" alt />
<span>新增排华联盟预警1</span>
<span>新增排华联盟预警</span>
</div>
<div class="warning-content">
<div class="content-item" v-for="(item, index) in warningList" :key="index">
......
src/views/ZMOverView/components/gameProfile/index.vue
浏览文件 @ e24a2a85
......@@ -469,43 +469,45 @@ const handleIndicatorChange = indicator => {
{
name: "中国",
type: "line",
symbolSize: 10,
symbolSize: 8,
smooth: true,
itemStyle: {
color: "#CE4F51"
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(206, 79, 81, .8)"
},
{
offset: 1,
color: "rgb(206, 79, 81, .3)"
}
])
},
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: "rgb(206, 79, 81, .8)"
// },
// {
// offset: 1,
// color: "rgb(206, 79, 81, .3)"
// }
// ])
// },
data: chinaValues
},
{
name: "美国",
type: "line",
symbolSize: 10,
smooth: true,
symbolSize: 8,
itemStyle: {
color: "#055FC2"
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(5, 95, 194,.8)"
},
{
offset: 1,
color: "rgb(5, 95, 194, .3)"
}
])
},
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: "rgb(5, 95, 194,.8)"
// },
// {
// offset: 1,
// color: "rgb(5, 95, 194, .3)"
// }
// ])
// },
data: usaValues
}
];
......@@ -540,22 +542,25 @@ const lineOption = ref({
xAxis: {
type: "category",
boundaryGap: false,
minInterval: 1,
scale: true,
axisLine: {
lineStyle: {
color: "#ccc",
color: "#e0e0e0",
width: 1
}
},
axisTick: {
show: true,
show: false,
lineStyle: {
color: "#ccc"
}
},
axisLabel: {
color: "#ccc",
fontSize: 16,
fontWeight: 400
color: "#666",
fontSize: 13,
fontWeight: 500,
margin: 12
},
data: ["2021", "2022", "2023", "2024", "2025"]
},
......@@ -571,9 +576,9 @@ const lineOption = ref({
padding: [0, 0, 10, 0]
},
axisLine: {
show: false,
show: true,
lineStyle: {
color: "#ccc",
color: "#e0e0e0",
width: 1
}
},
......
src/views/bill/billHome/OverviewCard.vue
浏览文件 @ e24a2a85
......@@ -34,10 +34,10 @@ defineProps({
.overview-card {
height: 450px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border: 1px solid var(--border-black-5);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
background: var(--bg-white-100);
overflow: hidden;
.overview-card-header {
......
src/views/bill/billHome/utils/worldCloudChart.js
浏览文件 @ e24a2a85
......@@ -25,7 +25,7 @@ const getWordCloudChart = (data = []) => {
// shape: 'star' // 星形
// shape: 'cardioid' // 心形
gridSize: 15, // 网格大小，影响词间距。
sizeRange: [10, 30], // 定义词云中文字大小的范围
sizeRange: [16, 36], // 定义词云中文字大小的范围
rotationRange: [0, 0],
rotationStep: 15,
drawOutOfBound: false, // 是否超出画布
......
src/views/bill/deepDig/poliContribution/index.vue
浏览文件 @ e24a2a85
......@@ -246,7 +246,7 @@
</template>
<script setup>
import { ref, onMounted, watch, computed } from "vue";
import { ref, onMounted, watch, computed, nextTick } from "vue";
import { getBillPoliContribution, getBillMainPoliContribution, getBillPersonPoliContribution } from "@/api/deepdig";
import setChart from "@/utils/setChart";
......@@ -488,6 +488,27 @@ const chart2Data = ref([]);
const chart2ColorList = ref(["#4096FF", "#FFA39E", "#ADC6FF", "#FFC069", "#B5F5EC", "#B37FEB", "#D6E4FF"]);
// 使用静态行业分布数据，用于“政治献金领域分布”模块展示
const useStaticIndustryData = true;
const staticChart2Data = [
{ name: "集成电路", value: 21 },
{ name: "能源", value: 18 },
{ name: "量子科技", value: 16 },
{ name: "航空航天", value: 14 },
{ name: "通信设备", value: 12 },
{ name: "生物科技", value: 11 },
{ name: "其他", value: 8 }
];
const staticAreaList = [
{ name: "集成电路", amount: 186000, insNum: 8 },
{ name: "能源", amount: 180000, insNum: 5 },
{ name: "量子科技", amount: 171000, insNum: 2 },
{ name: "航空航天", amount: 75000, insNum: 3 },
{ name: "通信设备", amount: 70000, insNum: 2 }
];
const sankeyColors = [
"#5470c6",
"#91cc75",
......@@ -617,7 +638,7 @@ const getMainPoliContribution = async () => {
const fullSourceList = ref([]);
const showAllSankeyData = ref(false);
const renderSankeyChart = () => {
const renderSankeyChart = async () => {
const sourceList = showAllSankeyData.value ? fullSourceList.value : fullSourceList.value.slice(0, 5);
if (sourceList.length > 0) {
......@@ -626,33 +647,39 @@ const renderSankeyChart = () => {
const totalAmount = sourceList.reduce((sum, item) => sum + (item.amount || 0), 0);
const orgNodes = sourceList.map((item, index) => ({
name: item.orgNameZh || item.orgName || `机构${index + 1}`,
value: item.amount,
itemStyle: {
color: sankeyColors[index % sankeyColors.length]
}
}));
const nodes = [
...orgNodes,
{
name: personName,
value: totalAmount,
label: { position: "left" },
itemStyle: {
color: "#FF1493"
color: "#34C38F"
}
},
...sourceList.map((item, index) => ({
name: item.orgNameZh,
value: item.amount,
itemStyle: {
color: sankeyColors[index % sankeyColors.length]
}
}))
}
];
const links = sourceList.map(item => ({
source: item.orgNameZhZh,
target: personName,
value: item.amount
}));
const links = sourceList
.map((item, index) => ({
source: item.orgNameZh || item.orgName || `机构${index + 1}`,
target: personName,
value: item.amount
}))
.filter(item => !!item.source && !!item.target);
// `chart1` 容器由 v-if/v-else 动态渲染，必须等 DOM 挂载后再 init
await nextTick();
let chart1 = getSankeyChart(nodes, links);
setChart(chart1, "chart1");
} else {
await nextTick();
let chart1 = getSankeyChart([], []);
setChart(chart1, "chart1");
}
......@@ -678,33 +705,46 @@ const getPersonPoliContribution = async personId => {
if (res.code === 200 && res.data) {
personPoliContribution.value = res.data;
// 政治献金流向：始终使用真实接口数据渲染桑基图
fullSourceList.value = res.data.sourceList || [];
showAllSankeyData.value = false; // Reset to default (top 5)
renderSankeyChart();
// Update Industry List (Chart 2 and List)
const industries = res.data.industryList || [];
// 政治献金领域分布：根据配置选择静态数据或接口数据
if (useStaticIndustryData) {
// 饼图数据（左侧圆环）
chart2Data.value = staticChart2Data;
const chart2Static = getPieChart(chart2Data.value, chart2ColorList.value);
setChart(chart2Static, "chart2");
// 右侧列表（Top5 领域）
areaList.value = staticAreaList.map(item => ({
name: item.name,
num: item.amount,
numtext: `$${item.amount.toLocaleString()}`,
insNum: item.insNum
}));
} else {
// 使用接口返回的行业分布
const industries = res.data.industryList || [];
// Update Chart 2 Data
chart2Data.value = industries.map(item => ({
name: item.industryName,
value: item.amount
}));
chart2Data.value = industries.map(item => ({
name: item.industryName,
value: item.amount
}));
// Re-render Chart 2
let chart2 = getPieChart(chart2Data.value, chart2ColorList.value);
setChart(chart2, "chart2");
const chart2Dynamic = getPieChart(chart2Data.value, chart2ColorList.value);
setChart(chart2Dynamic, "chart2");
// Update List Data
// Sort by amount desc to ensure first item is max for progress bar
const sortedIndustries = [...industries].sort((a, b) => (b.amount || 0) - (a.amount || 0));
const sortedIndustries = [...industries].sort((a, b) => (b.amount || 0) - (a.amount || 0));
areaList.value = sortedIndustries.map(item => ({
name: item.industryName,
num: item.amount,
numtext: `$${(item.amount || 0).toLocaleString()}`,
insNum: item.orgNum
}));
areaList.value = sortedIndustries.map(item => ({
name: item.industryName,
num: item.amount,
numtext: `$${(item.amount || 0).toLocaleString()}`,
insNum: item.orgNum
}));
}
} else {
personPoliContribution.value = [];
fullSourceList.value = [];
......@@ -712,8 +752,8 @@ const getPersonPoliContribution = async personId => {
chart2Data.value = [];
areaList.value = [];
let chart2 = getPieChart([], chart2ColorList.value);
setChart(chart2, "chart2");
const chart2Empty = getPieChart([], chart2ColorList.value);
setChart(chart2Empty, "chart2");
}
} catch (error) {
console.error(error);
......@@ -723,8 +763,8 @@ const getPersonPoliContribution = async personId => {
chart2Data.value = [];
areaList.value = [];
let chart2 = getPieChart([], chart2ColorList.value);
setChart(chart2, "chart2");
const chart2Error = getPieChart([], chart2ColorList.value);
setChart(chart2Error, "chart2");
}
};
......
src/views/bill/deepDig/poliContribution/utils/sankey.js
浏览文件 @ e24a2a85
......@@ -8,30 +8,87 @@ const getSankeyChart = (data = [], links = []) => {
},
series: {
type: 'sankey',
layout: 'none',
left: '1%',
right: '1%',
top: '5%',
bottom: '5%',
// 禁止鼠标拖拽/缩放平移，避免图表被交互改变
draggable: false,
roam: false,
left: 16,
right: 16,
top: 14,
bottom: 14,
nodeAlign: 'right', // 目标效果：人名贴右侧
emphasis: {
focus: 'adjacency'
},
nodeWidth: 50,
nodeGap: 2,
// 所有色块宽度增加三倍
nodeWidth: 54,
nodeGap: 10,
layoutIterations: 32,
lineStyle: {
color: 'source',
curveness: 0.5
color: 'rgba(0, 0, 0, 0.08)', // 浅灰“行背景带”的基色
opacity: 1,
curveness: 0.2
},
label: {
show: true,
formatter: function (params) {
return `${params.name} $${params.value.toLocaleString()}`;
return `${params.name}`;
},
position: 'right',
fontSize: 16,
color: '#555'
color: '#303133',
overflow: 'truncate',
width: 140
},
edgeLabel: {
show: true,
formatter: function (params) {
const val = params.value || 0;
return `$${Number(val).toLocaleString()}`;
},
color: '#303133',
fontSize: 16,
overflow: 'truncate',
width: 140,
align: 'center'
},
itemStyle: {
borderWidth: 0
},
nodeSort: 'descending',
levels: [
// depth = 0（机构节点）
{
depth: 0,
itemStyle: {
borderWidth: 0
},
label: {
position: 'right',
color: '#303133',
fontSize: 16,
overflow: 'truncate',
width: 140
}
},
// depth = 1（人物节点）
{
depth: 1,
itemStyle: {
color: '#34C38F'
},
label: {
// 人物名称移至色块左侧
position: 'left',
// 让文字最右侧紧贴绿色色块左侧
distance: 5,
color: '#303133',
fontSize: 16,
overflow: 'truncate',
width: 120,
align: 'right'
}
}
],
data: data,
links: links
}
......
src/views/decree/decreeHome/index.vue
浏览文件 @ e24a2a85
......@@ -2025,6 +2025,7 @@ onMounted(async () => {
margin-top: 21px;
height: 450px;
display: flex;
gap:16px;
.box3 {
width: 792px;
......
src/views/exportControl/index.vue
浏览文件 @ e24a2a85
......@@ -274,7 +274,7 @@
<el-row :gutter="20" style="width: 1600px; margin: 0 auto; height: 528px; margin-top: 64px">
<CustomTitle id="position3" title="数据总览" />
<el-col :span="24">
<custom-container title="发布频度" :titleIcon="box3Icon" height="450px">
<custom-container title="发布频度" :titleIcon="box3Icon" height="400px">
<template #default>
<div class="box3">
<div class="box3-content">
......
src/views/exportControl/v2.0SingleSanction/components/deepMining/index.vue
浏览文件 @ e24a2a85
<template>
<div class="deep-mining" :class="{ deepMiningChartmode: isInChart }">
<div class="side-nav">
<div v-for="(item, index) in activeTab" :key="index" class="tab-item" :class="{ active: index === activeIndex }"
@click="activeIndex = index">
<div
v-for="(item, index) in activeTab"
:key="index"
class="tab-item"
:class="{ active: index === activeIndex }"
@click="activeIndex = index"
>
{{ item }}
<span v-if="index === activeIndex" class="arrow"></span>
</div>
......@@ -47,8 +52,13 @@
<span class="group-count">{{ group.count }}家</span>
</div>
<div class="group-children custom-scrollbar" v-show="group.expanded">
<div class="entity-item" v-for="item in group.children" :key="item.id"
:class="{ active: activeEntityId === item.id }" @click="selectEntity(item)">
<div
class="entity-item"
v-for="item in group.children"
:key="item.id"
:class="{ active: activeEntityId === item.id }"
@click="selectEntity(item)"
>
<div class="item-icon">
<img :src="defaultTitle" alt="" class="item-img" />
</div>
......@@ -63,12 +73,19 @@
<div class="right" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
<div class="title-com custom-right-header">
<div class="toggle-group">
<div class="toggle-btn" :class="{ active: rightActiveTab === 'supplyChain' }"
@click="rightActiveTab = 'supplyChain'">
<div
class="toggle-btn"
:class="{ active: rightActiveTab === 'supplyChain' }"
@click="rightActiveTab = 'supplyChain'"
>
<img :src="rightActiveTab === 'supplyChain' ? icon01Active : icon01" alt="" />
<span>供应链</span>
</div>
<div class="toggle-btn" :class="{ active: rightActiveTab === 'equity' }" @click="rightActiveTab = 'equity'">
<div
class="toggle-btn"
:class="{ active: rightActiveTab === 'equity' }"
@click="rightActiveTab = 'equity'"
>
<img :src="rightActiveTab === 'equity' ? icon02Active : icon02" alt="" />
<span>股权</span>
</div>
......@@ -115,8 +132,8 @@ import {
getSingleSanctionEntitySupplyChain,
getSingleSanctionEntityEquity
} from "@/api/exportControlV2.0";
import RelationGraph from './components/RelationGraph.vue';
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue';
import RelationGraph from "./components/RelationGraph.vue";
import AnalysisBox from "@/components/base/boxBackground/analysisBox.vue";
const sanRecordId = ref("");
const activeTab = ref(["实体穿透分析"]);
......@@ -170,11 +187,11 @@ const handleMouseLeave = () => {
isInChart.value = false;
};
const handleNodeClick = (node) => {
const handleNodeClick = node => {
selectedNode.value = node;
};
const handleLayoutChange = (type) => {
const handleLayoutChange = type => {
controlActive.value = type;
if (type !== 2) {
isInChart.value = true;
......@@ -184,9 +201,8 @@ const handleLayoutChange = (type) => {
};
const updateGraphData = () => {
const data = rightActiveTab.value === 'supplyChain'
? singleSanctionEntitySupplyChainData.value
: singleSanctionEntityEquityData.value;
const data =
rightActiveTab.value === "supplyChain" ? singleSanctionEntitySupplyChainData.value : singleSanctionEntityEquityData.value;
if (!data) return;
......@@ -214,7 +230,7 @@ const updateGraphData = () => {
links.push({
source: `p-${item.id || index}`,
target: "0",
name: rightActiveTab.value === 'supplyChain' ? "供应商" : (item.type || "持股")
name: rightActiveTab.value === "supplyChain" ? "供应商" : item.type || "持股"
});
});
......@@ -231,14 +247,14 @@ const updateGraphData = () => {
links.push({
source: "0",
target: `c-${item.id || index}`,
name: rightActiveTab.value === 'supplyChain' ? "客户" : (item.type || "投资")
name: rightActiveTab.value === "supplyChain" ? "客户" : item.description || "投资"
});
});
graphData.value = { nodes, links };
};
const updateTreeData = (data) => {
const updateTreeData = data => {
if (!data) return;
treeData.value = {
......@@ -318,17 +334,17 @@ const getSingleSanctionEntityListRequest = async () => {
}
};
watch(rightActiveTab, async (newTab) => {
if (newTab === 'supplyChain') {
watch(rightActiveTab, async newTab => {
if (newTab === "supplyChain") {
await getSingleSanctionEntitySupplyChainRequest();
} else {
await getSingleSanctionEntityEquityRequest();
}
});
watch(activeEntityId, async (newId) => {
watch(activeEntityId, async newId => {
if (newId) {
if (rightActiveTab.value === 'supplyChain') {
if (rightActiveTab.value === "supplyChain") {
await getSingleSanctionEntitySupplyChainRequest();
} else {
await getSingleSanctionEntityEquityRequest();
......@@ -337,7 +353,7 @@ watch(activeEntityId, async (newId) => {
});
watch(is50PercentRule, async () => {
if (rightActiveTab.value === 'equity') {
if (rightActiveTab.value === "equity") {
await getSingleSanctionEntityEquityRequest();
}
});
......@@ -857,7 +873,6 @@ onMounted(async () => {
}
.title-com.custom-right-header {
.box,
.text {
display: none;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论