Skip to content

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

feat:更新关系图组件

上级 d133fbef
显示空白字符变更
内嵌 并排
正在显示 包含 2267 行增加 和 201 行删除
package-lock.json
浏览文件 @ 3ca78c85
......@@ -29,6 +29,7 @@
"markdown-it": "^14.1.0",
"pdfjs-dist": "^5.5.207",
"pinia": "^3.0.4",
"relation-graph-vue3": "^2.2.11",
"vue": "^3.4.0",
"vue-router": "^4.2.5"
},
......@@ -1208,9 +1209,6 @@
"cpu": [
"arm64"
],
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
......@@ -1231,9 +1229,6 @@
"cpu": [
"arm64"
],
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
......@@ -1254,9 +1249,6 @@
"cpu": [
"riscv64"
],
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
......@@ -1277,9 +1269,6 @@
"cpu": [
"x64"
],
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
......@@ -1300,9 +1289,6 @@
"cpu": [
"x64"
],
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
......@@ -2764,6 +2750,15 @@
"node": ">=0.10.0"
}
},
"node_modules/base64-arraybuffer": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
"integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
"license": "MIT",
"engines": {
"node": ">= 0.6.0"
}
},
"node_modules/baseline-browser-mapping": {
"version": "2.10.0",
"resolved": "https://registry.npmmirror.com/baseline-browser-mapping/-/baseline-browser-mapping-2.10.0.tgz",
......@@ -3161,6 +3156,15 @@
"layout-base": "^1.0.0"
}
},
"node_modules/css-line-break": {
"version": "2.1.0",
"resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz",
"integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
"license": "MIT",
"dependencies": {
"utrie": "^1.0.2"
}
},
"node_modules/cssesc": {
"version": "3.0.0",
"resolved": "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz",
......@@ -4865,6 +4869,19 @@
"integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
"license": "MIT"
},
"node_modules/html2canvas": {
"version": "1.4.1",
"resolved": "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz",
"integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
"license": "MIT",
"dependencies": {
"css-line-break": "^2.1.0",
"text-segmentation": "^1.0.3"
},
"engines": {
"node": ">=8.0.0"
}
},
"node_modules/iconv-lite": {
"version": "0.6.3",
"resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
......@@ -6788,6 +6805,16 @@
"resolved": "https://registry.npmmirror.com/regl/-/regl-1.7.0.tgz",
"integrity": "sha512-bEAtp/qrtKucxXSJkD4ebopFZYP0q1+3Vb2WECWv/T8yQEgKxDxJ7ztO285tAMaYZVR6mM1GgI6CCn8FROtL1w=="
},
"node_modules/relation-graph-vue3": {
"version": "2.2.11",
"resolved": "https://registry.npmmirror.com/relation-graph-vue3/-/relation-graph-vue3-2.2.11.tgz",
"integrity": "sha512-2WyomsAwbIMuYNrfZhzGV63OXDNea24pRX6zwW91a9qmoDyVWOBoWWE4lOK6DYMW6soz4pFgET+G6j9qQ4S/SA==",
"license": "MIT",
"dependencies": {
"html2canvas": "^1.4.1",
"screenfull": "^5.1.0"
}
},
"node_modules/repeat-element": {
"version": "1.1.4",
"resolved": "https://registry.npmmirror.com/repeat-element/-/repeat-element-1.1.4.tgz",
......@@ -7021,6 +7048,18 @@
"url": "https://paulmillr.com/funding/"
}
},
"node_modules/screenfull": {
"version": "5.2.0",
"resolved": "https://registry.npmmirror.com/screenfull/-/screenfull-5.2.0.tgz",
"integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==",
"license": "MIT",
"engines": {
"node": ">=0.10.0"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/scule": {
"version": "1.3.0",
"resolved": "https://registry.npmmirror.com/scule/-/scule-1.3.0.tgz",
......@@ -7469,6 +7508,15 @@
"node": ">=10.13.0"
}
},
"node_modules/text-segmentation": {
"version": "1.0.3",
"resolved": "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz",
"integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
"license": "MIT",
"dependencies": {
"utrie": "^1.0.2"
}
},
"node_modules/thenify": {
"version": "3.3.1",
"resolved": "https://mirrors.huaweicloud.com/repository/npm/thenify/-/thenify-3.3.1.tgz",
......@@ -7963,6 +8011,15 @@
"dev": true,
"license": "MIT"
},
"node_modules/utrie": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz",
"integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
"license": "MIT",
"dependencies": {
"base64-arraybuffer": "^1.0.2"
}
},
"node_modules/uuid": {
"version": "9.0.1",
"resolved": "https://registry.npmmirror.com/uuid/-/uuid-9.0.1.tgz",
......
package.json
浏览文件 @ 3ca78c85
......@@ -38,6 +38,7 @@
"markdown-it": "^14.1.0",
"pdfjs-dist": "^5.5.207",
"pinia": "^3.0.4",
"relation-graph-vue3": "^2.2.11",
"vue": "^3.4.0",
"vue-router": "^4.2.5"
},
......
src/components/base/GraphChart/graphChart.js
浏览文件 @ 3ca78c85
......@@ -33,7 +33,7 @@ const getGraphChart = (nodes, links, layoutType) => {
fontSize: 12
}
},
animation: true,
animation: false,
animationDuration: 1000,
animationEasing: 'cubicOut',
series: [{
......
src/components/base/RelationCenterChart/index.vue 0 → 100644
浏览文件 @ 3ca78c85
<template>
<RelationGraph style="width: 100%; height: 100%;" ref="graphRef" :options="graphOptions" @node-click="onNodeClick"
@line-click="onLineClick" />
</template>
<script setup>
import { defineComponent, ref, onMounted } from 'vue';
import RelationGraph from 'relation-graph-vue3';
// import type { RGJsonData, RGNode, RGLine, RGLink, RGUserEvent, RGOptions, RelationGraphComponent } from 'relation-graph-vue3';
const graphRef = ref(null);
const graphOptions = {
debug: true,
defaultNodeBorderWidth: 0,
defaultNodeColor: 'var(--color-primary-50)',
defaultNodeFontColor: 'var(--text-primary-80-color)',
allowSwitchLineShape: true,
allowSwitchJunctionPoint: true,
defaultLineShape: 1,
distance_coefficient: 1,
layouts: [
{
layoutName: 'center',
// 👇 关键参数：控制各层级之间的距离（值越大，连线越长，节点间距越大）
distance_coefficient: 1.8, // 默认值通常是 1.0，可以调到 1.5-3.0
// 👇 层级间的垂直间距
levelDistance: 80, // 单位：像素，默认约 80-100
// 👇 同一层级内节点之间的水平间距
nodeDistance: 100 // 单位：像素，默认约 100
}
],
defaultJunctionPoint: 'border',
// defaultNodeWidth: 120, // 全局默认节点宽度
// defaultNodeHeight: 120, // 全局默认节点高度
};
const showGraph = async () => {
const __graph_json_data = props.graphData;
const graphInstance = graphRef.value?.getInstance();
if (graphInstance) {
await graphInstance.setJsonData(__graph_json_data);
await graphInstance.moveToCenter();
// await graphInstance.zoomToFit();
await graphInstance.setZoom(65);
}
};
const emit = defineEmits(['nodeClick', 'lineClick'])
const onNodeClick = (nodeObject, $event) => {
console.log('onNodeClick:', nodeObject);
emit('nodeClick', nodeObject)
};
const onLineClick = (lineObject, linkObject, $event) => {
console.log('onLineClick:', lineObject);
emit('lineClick', lineObject)
};
const props = defineProps({
graphData: {
type: Object,
default: {
rootId: '2',
nodes: [
{ id: '1', text: 'Node-1' },
{ id: '2', text: 'Node-2' },
{ id: '3', text: 'Node-3' },
{ id: '4', text: 'Node-4' },
{ id: '6', text: 'Node-6' },
{ id: '7', text: 'Node-7' },
{ id: '8', text: 'Node-8' },
{ id: '9', text: 'Node-9' },
{ id: '71', text: 'Node-71' },
{ id: '72', text: 'Node-72' },
{ id: '73', text: 'Node-73' },
{ id: '81', text: 'Node-81' },
{ id: '82', text: 'Node-82' },
{ id: '83', text: 'Node-83' },
{ id: '84', text: 'Node-84' },
{ id: '85', text: 'Node-85' },
{ id: '91', text: 'Node-91' },
{ id: '92', text: 'Node-82' },
{ id: '51', text: 'Node-51' },
{ id: '52', text: 'Node-52' },
{ id: '53', text: 'Node-53' },
{ id: '54', text: 'Node-54' },
{ id: '55', text: 'Node-55' },
{ id: '5', text: 'Node-5' }
],
lines: [
{ from: '7', to: '71', text: 'Investment' },
{ from: '7', to: '72', text: 'Investment' },
{ from: '7', to: '73', text: 'Investment' },
{ from: '8', to: '81', text: 'Investment' },
{ from: '8', to: '82', text: 'Investment' },
{ from: '8', to: '83', text: 'Investment' },
{ from: '8', to: '84', text: 'Investment' },
{ from: '8', to: '85', text: 'Investment' },
{ from: '9', to: '91', text: 'Investment' },
{ from: '9', to: '92', text: 'Investment' },
{ from: '5', to: '51', text: 'Investment1' },
{ from: '5', to: '52', text: 'Investment' },
{ from: '5', to: '53', text: 'Investment3' },
{ from: '5', to: '54', text: 'Investment4' },
{ from: '5', to: '55', text: 'Investment' },
{ from: '1', to: '2', text: 'Investment' },
{ from: '3', to: '1', text: 'Executive' },
{ from: '4', to: '2', text: 'Executive' },
{ from: '6', to: '2', text: 'Executive' },
{ from: '7', to: '2', text: 'Executive' },
{ from: '8', to: '2', text: 'Executive' },
{ from: '9', to: '2', text: 'Executive' },
{ from: '1', to: '5', text: 'Investment' }
]
}
}
})
onMounted(() => {
showGraph();
});
</script>
<style scoped lang="scss"></style>
src/components/base/RelationChart/index.vue 0 → 100644
浏览文件 @ 3ca78c85
<template>
<RelationGraph style="width: 100%; height: 100%" ref="graphRef" :options="graphOptionsH" :on-node-click="onNodeClick"
:on-line-click="onLineClick">
<template #node="{ node }">
<div class="custom-node" :style="{
backgroundColor: node.color || 'var(--color-primary-50)',
}">
<!-- 在这里自由控制文字样式 -->
<span :style="{
color: node.fontColor || '#ffffff',
fontSize: node.customFontSize || '24px', // 可以从数据中读取
fontWeight: 'normal',
textAlign: 'center',
wordBreak: 'break-word',
padding: '0 8px'
}">
{{ node.text }}
</span>
</div>
</template>
</RelationGraph>
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import RelationGraph from "relation-graph-vue3";
// import RelationGraph, { RGJsonData, RGOptions, RGNode, RGLine, RGLink, RGUserEvent, RelationGraphComponent } from 'relation-graph-vue3';
const graphRef = ref(null);
const graphOptionsH = {
layout: {
layoutName: "tree",
// min_per_width: 40,
// max_per_width: 70,
min_per_height: 'auto',
},
defaultLineMarker: {
markerWidth: 12,
markerHeight: 12,
refX: 6,
refY: 6,
data: "M2,2 L10,6 L2,10 L6,6 L2,2"
},
defaultNodeShape: 1,
defaultNodeWidth: 35,
defaultLineShape: 4,
defaultJunctionPoint: "tb",
defaultNodeBorderWidth: 2,
defaultNodeBorderColor: 'var(--color-primary-100)',
defaultLineColor: "var(--color-primary-50)",
defaultNodeColor: "var(--color-primary-50)",
defaultNodeFontColor: 'var(--text-primary-90-color)', // 默认文字颜色：深灰色
// defaultNodeHeight: 'auto'
};
const graphOptionsV = {
layouts: [
{
// label: "中心",
layoutName: "tree",
// layoutClassName: "seeks-layout-center",
// defaultJunctionPoint: "border",
// defaultNodeShape: 0,
// defaultLineShape: 1,
from: "left",
// max_per_width: "300",
// min_per_height: 35,
max_per_width: 'auto',
}
],
defaultLineMarker: {
markerWidth: 12,
markerHeight: 12,
refX: 6,
refY: 6,
data: "M2,2 L10,6 L2,10 L6,6 L2,2"
},
defaultNodeShape: 1,
defaultNodeWidth: 150,
// defaultNodeHeight: 35,
defaultLineShape: 4,
defaultJunctionPoint: "lr",
defaultNodeBorderWidth: 2,
defaultLineColor: "var(--color-primary-50)",
defaultNodeColor: "var(--color-primary-50)",
defaultNodeFontColor: 'var(--bg-white-100)', // 默认文字颜色：深灰色
};
const props = defineProps({
isVerticalChart: {
type: Boolean,
default: false
},
graphData: {
type: Object,
default: {
rootId: "a",
nodes: [
{ id: "a", text: "a" },
{ id: "b", text: "b" },
{ id: "b1", text: "b1" },
{ id: "b1-1", text: "b1-1" },
{ id: "b1-2", text: "b1-2" },
{ id: "b1-3", text: "b1-3" },
{ id: "b1-4", text: "b1-4" },
{ id: "b1-5", text: "b1-5" },
{ id: "b1-6", text: "b1-6" },
{ id: "b2", text: "b2" },
{ id: "b2-1", text: "b2-1" },
{ id: "b2-2", text: "b2-2" },
{ id: "b2-3", text: "b2-3" },
{ id: "b2-4", text: "b2-4" },
{ id: "b3", text: "b3" },
{ id: "b3-1", text: "b3-1" },
{ id: "b3-2", text: "b3-2" },
{ id: "b3-3", text: "b3-3" },
{ id: "b3-4", text: "b3-4" },
{ id: "b3-5", text: "b3-5" },
{ id: "b3-6", text: "b3-6" },
{ id: "b3-7", text: "b3-7" },
{ id: "b4", text: "b4" },
{ id: "b4-1", text: "b4-1" },
{ id: "b4-2", text: "b4-2" },
{ id: "b4-3", text: "b4-3" },
{ id: "b4-4", text: "b4-4" },
{ id: "b4-5", text: "b4-5" },
{ id: "b4-6", text: "b4-6" },
{ id: "b4-7", text: "b4-7" },
{ id: "b4-8", text: "b4-8" },
{ id: "b4-9", text: "b4-9" },
{ id: "b5", text: "b5" },
{ id: "b5-1", text: "b5-1" },
{ id: "b5-2", text: "b5-2" },
{ id: "b5-3", text: "b5-3" },
{ id: "b5-4", text: "b5-4" },
{ id: "b6", text: "b6" },
{ id: "b6-1", text: "b6-1" },
{ id: "b6-2", text: "b6-2" },
{ id: "b6-3", text: "b6-3" },
{ id: "b6-4", text: "b6-4" },
{ id: "b6-5", text: "b6-5" },
{ id: "c", text: "c" },
{ id: "c1", text: "c1" },
{ id: "c1-1", text: "c1-1" },
{ id: "c1-2", text: "c1-2" },
{ id: "c1-3", text: "c1-3" },
{ id: "c1-4", text: "c1-4" },
{ id: "c1-5", text: "c1-5" },
{ id: "c1-6", text: "c1-6" },
{ id: "c1-7", text: "c1-7" },
{ id: "c2", text: "c2" },
{ id: "c2-1", text: "c2-1" },
{ id: "c2-2", text: "c2-2" },
{ id: "c3", text: "c3" },
{ id: "c3-1", text: "c3-1" },
{ id: "c3-2", text: "c3-2" },
{ id: "c3-3", text: "c3-3" },
{ id: "d", text: "d" },
{ id: "d1", text: "d1" },
{ id: "d1-1", text: "d1-1" },
{ id: "d1-2", text: "d1-2" },
{ id: "d1-3", text: "d1-3" },
{ id: "d1-4", text: "d1-4" },
{ id: "d1-5", text: "d1-5" },
{ id: "d1-6", text: "d1-6" },
{ id: "d1-7", text: "d1-7" },
{ id: "d1-8", text: "d1-8" },
{ id: "d2", text: "d2" },
{ id: "d2-1", text: "d2-1" },
{ id: "d2-2", text: "d2-2" },
{ id: "d3", text: "d3" },
{ id: "d3-1", text: "d3-1" },
{ id: "d3-2", text: "d3-2" },
{ id: "d3-3", text: "d3-3" },
{ id: "d3-4", text: "d3-4" },
{ id: "d3-5", text: "d3-5" },
{ id: "d4", text: "d4" },
{ id: "d4-1", text: "d4-1" },
{ id: "d4-2", text: "d4-2" },
{ id: "d4-3", text: "d4-3" },
{ id: "d4-4", text: "d4-4" },
{ id: "d4-5", text: "d4-5" },
{ id: "d4-6", text: "d4-6" },
{ id: "e", text: "e" },
{ id: "e1", text: "e1" },
{ id: "e1-1", text: "e1-1" },
{ id: "e1-2", text: "e1-2" },
{ id: "e1-3", text: "e1-3" },
{ id: "e1-4", text: "e1-4" },
{ id: "e1-5", text: "e1-5" },
{ id: "e1-6", text: "e1-6" },
{ id: "e2", text: "e2" },
{ id: "e2-1", text: "e2-1" },
{ id: "e2-2", text: "e2-2" },
{ id: "e2-3", text: "e2-3" },
{ id: "e2-4", text: "e2-4" },
{ id: "e2-5", text: "e2-5" },
{ id: "e2-6", text: "e2-6" },
{ id: "e2-7", text: "e2-7" },
{ id: "e2-8", text: "e2-8" },
{ id: "e2-9", text: "e2-9" }
],
lines: [
{ from: "a", to: "b" },
{ from: "b", to: "b1" },
{ from: "b1", to: "b1-1" },
{ from: "b1", to: "b1-2" },
{ from: "b1", to: "b1-3" },
{ from: "b1", to: "b1-4" },
{ from: "b1", to: "b1-5" },
{ from: "b1", to: "b1-6" },
{ from: "b", to: "b2" },
{ from: "b2", to: "b2-1" },
{ from: "b2", to: "b2-2" },
{ from: "b2", to: "b2-3" },
{ from: "b2", to: "b2-4" },
{ from: "b", to: "b3" },
{ from: "b3", to: "b3-1" },
{ from: "b3", to: "b3-2" },
{ from: "b3", to: "b3-3" },
{ from: "b3", to: "b3-4" },
{ from: "b3", to: "b3-5" },
{ from: "b3", to: "b3-6" },
{ from: "b3", to: "b3-7" },
{ from: "b", to: "b4" },
{ from: "b4", to: "b4-1" },
{ from: "b4", to: "b4-2" },
{ from: "b4", to: "b4-3" },
{ from: "b4", to: "b4-4" },
{ from: "b4", to: "b4-5" },
{ from: "b4", to: "b4-6" },
{ from: "b4", to: "b4-7" },
{ from: "b4", to: "b4-8" },
{ from: "b4", to: "b4-9" },
{ from: "b", to: "b5" },
{ from: "b5", to: "b5-1" },
{ from: "b5", to: "b5-2" },
{ from: "b5", to: "b5-3" },
{ from: "b5", to: "b5-4" },
{ from: "b", to: "b6" },
{ from: "b6", to: "b6-1" },
{ from: "b6", to: "b6-2" },
{ from: "b6", to: "b6-3" },
{ from: "b6", to: "b6-4" },
{ from: "b6", to: "b6-5" },
{ from: "a", to: "c" },
{ from: "c", to: "c1" },
{ from: "c1", to: "c1-1" },
{ from: "c1", to: "c1-2" },
{ from: "c1", to: "c1-3" },
{ from: "c1", to: "c1-4" },
{ from: "c1", to: "c1-5" },
{ from: "c1", to: "c1-6" },
{ from: "c1", to: "c1-7" },
{ from: "c", to: "c2" },
{ from: "c2", to: "c2-1" },
{ from: "c2", to: "c2-2" },
{ from: "c", to: "c3" },
{ from: "c3", to: "c3-1" },
{ from: "c3", to: "c3-2" },
{ from: "c3", to: "c3-3" },
{ from: "a", to: "d" },
{ from: "d", to: "d1" },
{ from: "d1", to: "d1-1" },
{ from: "d1", to: "d1-2" },
{ from: "d1", to: "d1-3" },
{ from: "d1", to: "d1-4" },
{ from: "d1", to: "d1-5" },
{ from: "d1", to: "d1-6" },
{ from: "d1", to: "d1-7" },
{ from: "d1", to: "d1-8" },
{ from: "d", to: "d2" },
{ from: "d2", to: "d2-1" },
{ from: "d2", to: "d2-2" },
{ from: "d", to: "d3" },
{ from: "d3", to: "d3-1" },
{ from: "d3", to: "d3-2" },
{ from: "d3", to: "d3-3" },
{ from: "d3", to: "d3-4" },
{ from: "d3", to: "d3-5" },
{ from: "d", to: "d4" },
{ from: "d4", to: "d4-1" },
{ from: "d4", to: "d4-2" },
{ from: "d4", to: "d4-3" },
{ from: "d4", to: "d4-4" },
{ from: "d4", to: "d4-5" },
{ from: "d4", to: "d4-6" },
{ from: "a", to: "e" },
{ from: "e", to: "e1" },
{ from: "e1", to: "e1-1" },
{ from: "e1", to: "e1-2" },
{ from: "e1", to: "e1-3" },
{ from: "e1", to: "e1-4" },
{ from: "e1", to: "e1-5" },
{ from: "e1", to: "e1-6" },
{ from: "e", to: "e2" },
{ from: "e2", to: "e2-1" },
{ from: "e2", to: "e2-2" },
{ from: "e2", to: "e2-3" },
{ from: "e2", to: "e2-4" },
{ from: "e2", to: "e2-5" },
{ from: "e2", to: "e2-6" },
{ from: "e2", to: "e2-7" },
{ from: "e2", to: "e2-8" },
{ from: "e2", to: "e2-9" }
]
}
}
});
const emit = defineEmits(['nodeClick', 'lineClick'])
const showHTree = async () => {
const __graph_json_data = props.graphData;
const graphInstance = graphRef.value?.getInstance();
if (graphInstance) {
await graphInstance.setOptions(graphOptionsH);
await graphInstance.setJsonData(__graph_json_data);
await graphInstance.moveToCenter();
// await graphInstance.zoomToFit();
await graphInstance.setZoom(35);
}
};
const showVTree = async () => {
const __graph_json_data = props.graphData;
const graphInstance = graphRef.value?.getInstance();
if (graphInstance) {
await graphInstance.setOptions(graphOptionsV);
await graphInstance.setJsonData(__graph_json_data);
await graphInstance.moveToCenter();
await graphInstance.zoomToFit();
}
};
const onNodeClick = (nodeObject, $event) => {
console.log("onNodeClick:", nodeObject);
emit('nodeClick', nodeObject)
};
const onLineClick = (lineObject, linkObject, $event) => {
console.log("onLineClick:", lineObject);
emit('lineClick', lineObject)
};
watch(
() => props.isVerticalChart,
val => {
if (val) {
showVTree();
} else {
showHTree();
}
}
);
onMounted(() => {
if (props.isVerticalChart) {
showVTree();
} else {
showHTree();
}
});
</script>
<style lang="scss" scoped>
:deep(.relation-graph) {
.c-node-text {
padding: 0px;
place-items: center;
justify-content: center;
}
}
.c-my-panel {
width: 350px;
text-align: center;
position: absolute;
left: 10px;
top: 10px;
border-radius: 10px;
z-index: 800;
padding: 10px;
background-color: rgba(239, 239, 239, 0.86);
border: #eeeeee solid 1px;
overflow: hidden;
.c-option-name {
color: #666666;
font-size: 14px;
line-height: 40px;
}
}
.custom-node {
// width: 100%;
// height: 100%;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
</style>
src/components/base/RelationForceChart/index.vue 0 → 100644
浏览文件 @ 3ca78c85
<template>
<RelationGraph
style="width: 100%; height: 100%"
ref="graphRef"
:options="graphOptions"
@node-click="onNodeClick"
@line-click="onLineClick"
>
<!-- 自定义节点插槽 - 这是官方推荐的方式 -->
<template #node="{ node }">
<div
class="custom-node"
:style="{
backgroundColor: node.color || 'var(--color-primary-50)'
}"
>
{{ console.log(node) }}
<!-- 在这里自由控制文字样式 -->
<div class="img" v-if="node.data.pic">
<img :src="node.data.pic" alt="" />
</div>
<span
class="text"
:style="{
color: node.fontColor || 'var(--text-primary-80-color)',
fontSize: node.customFontSize || '24px' // 可以从数据中读取
}"
>
{{ node.text }}
</span>
</div>
</template>
</RelationGraph>
</template>
<script setup>
import { onMounted, ref } from "vue";
import RelationGraph from "relation-graph-vue3";
const props = defineProps({
graphData: {
type: Object,
default: {}
}
});
const graphRef = ref(null);
const graphOptions = ref({
debug: false,
defaultNodeBorderWidth: 0,
allowSwitchLineShape: true,
allowSwitchJunctionPoint: true,
defaultNodeColor: "var(--color-primary-50)",
defaultNodeFontColor: "var(--text-primary-90-color)", // 默认文字颜色：深灰色
defaultLineShape: 1,
layout: {
layoutName: "force"
},
defaultJunctionPoint: "border"
// defaultNodeWidth: 150, // 全局默认节点宽度
// defaultNodeHeight: 150, // 全局默认节点高度
});
const showGraph = async () => {
const __graph_json_data = props.graphData;
const graphInstance = graphRef.value.getInstance();
if (graphInstance) {
await graphInstance.setJsonData(__graph_json_data);
await graphInstance.moveToCenter();
// await graphInstance.zoomToFit();
await graphInstance.setZoom(45);
}
};
const emit = defineEmits(["nodeClick", "lineClick"]);
const onNodeClick = (nodeObject, $event) => {
console.log("onNodeClick:", nodeObject);
emit("nodeClick", nodeObject);
};
const onLineClick = (lineObject, linkObject, $event) => {
console.log("onLineClick:", lineObject);
emit("lineClick", lineObject);
};
onMounted(() => {
showGraph();
});
</script>
<style lang="scss" scoped>
.custom-node {
width: 100%;
height: 100%;
border-radius: 50%;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
.img {
position: absolute;
width: 50px;
height: 50px;
img {
width: 100%;
height: 100%;
}
}
.text {
font-weight: normal;
text-align: center;
word-break: break-word;
padding: 0 8px;
white-space: nowrap;
margin-top: 120px;
display: inline-block;
}
}
</style>
src/styles/components/GraphTreeChart/index.vue
浏览文件 @ 3ca78c85
......@@ -11,7 +11,7 @@
`}}
</pre>
<div class="graphtree-chart-box">
<GraphChart :nodes="nodes" :links="links" chartType="force">
<GraphChart :nodes="nodes" :links="links" chartType="circular">
</GraphChart>
</div>
</el-col>
......@@ -176,131 +176,6 @@ const links = ref([
{ source: 16, target: 7, label: { show: true, formatter: '合作', color: 'red', borderColor: 'red' } },
]);
// const nodes = ref([
// {
// "id": 0,
// "name": "布拉德·米勒 (Brad Miller)",
// // "category": 1,
// "symbolSize": 80,
// "symbol": "image://data:image/png;base64,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"
// },
// {
// "id": 1,
// "name": "以利亚·E·卡明斯（Elijah E. Cummings）",
// // "category": 1,
// "symbolSize": 80,
// symbol: `image://${CompanyImg}`,
// },
// {
// "id": 2,
// "name": "托马斯·L·阿什利 (Thomas L. Ashley)",
// // "category": 1,
// "symbolSize": 80,
// symbol: `image://${CompanyImg}`,
// },
// {
// "id": 3,
// "name": "沃伦·拉德曼 (Warren Rudman)",
// // "category": 1,
// "symbolSize": 80,
// symbol: `image://${CompanyImg}`,
// },
// {
// "id": 4,
// "name": "比尔·D·伯利森 (Bill D. Burlison)",
// // "category": 1,
// "symbolSize": 80,
// symbol: `image://${CompanyImg}`,
// },
// {
// "id": 5,
// "name": "柯特·韦尔登 (Curt Weldon)",
// // "category": 1,
// "symbolSize": 80,
// symbol: `image://${CompanyImg}`,
// },
// {
// "id": 6,
// "name": "詹姆斯·R·曼 (James R. Mann)",
// // "category": 1,
// "symbolSize": 80,
// symbol: `image://${CompanyImg}`,
// },
// {
// "id": 7,
// "name": "迈克尔·N·卡斯尔 (Michael N. Castle)",
// // "category": 1,
// "symbolSize": 80,
// symbol: `image://${CompanyImg}`,
// },
// {
// "id": 8,
// "name": "弗兰克·哈里森 (Frank Harrison)",
// // "category": 1,
// "symbolSize": 80,
// symbol: `image://${CompanyImg}`,
// },
// {
// "id": 9,
// "name": "艾伦·努内利（Alan Nunnelee）",
// // "category": 1,
// "symbolSize": 80,
// symbol: `image://${CompanyImg}`,
// },
// {
// "id": 10,
// "name": "阿尔丰索·贝尔 (Alphonzo Bell)",
// // "category": 1,
// "symbolSize": 80,
// symbol: `image://${CompanyImg}`,
// },
// {
// "id": 11,
// "name": "劳拉·吉伦(Laura Gillen)",
// // "category": 1,
// "symbolSize": 80,
// symbol: `image://${CompanyImg}`,
// },
// {
// "id": "c",
// "name": "托德·扬 (Todd Young)",
// // "category": 0,
// "symbolSize": 80,
// symbol: `image://${CompanyImg}`,
// "label": {
// "show": true,
// "position": "bottom",
// "formatter": "{n|{b}}",
// "rich": {
// "n": {
// "color": "rgba(5,95,194,1)",
// "fontSize": 24,
// "fontWeight": 700,
// "fontFamily": "Microsoft YaHei",
// "lineHeight": 36
// }
// }
// }
// }
// ])
// const links = ref(
// [
// { "source": 0, "target": "c", "label": { "show": true, "formatter": "儿子" }, "value": 2 },
// { "source": 1, "target": "c", "label": { "show": true, "formatter": "弟弟" }, "value": 2 },
// { "source": 2, "target": "c", "label": { "show": true, "formatter": "哥哥" }, "value": 2 },
// { "source": 3, "target": "c", "label": { "show": true, "formatter": "经理" }, "value": 2 },
// { "source": 4, "target": "c", "label": { "show": true, "formatter": "属下" }, "value": 2 },
// { "source": 5, "target": "c", "label": { "show": true, "formatter": "领导" }, "value": 2 },
// { "source": 6, "target": "c", "label": { "show": true, "formatter": "同事" }, "value": 2 },
// { "source": 7, "target": "c", "label": { "show": true, "formatter": "投资人" }, "value": 2 },
// { "source": 8, "target": "c", "label": { "show": true, "formatter": "爷爷" }, "value": 2 },
// { "source": 9, "target": "c", "label": { "show": true, "formatter": "妈妈" }, "value": 2 },
// { "source": 10, "target": "c", "label": { "show": true, "formatter": "奶奶" }, "value": 2 },
// { "source": 11, "target": "c", "label": { "show": true, "formatter": "孙子" }, "value": 2 }]
// )
</script>
<style lang="scss" scoped>
......
src/styles/components/RelationCenterChart/index.vue 0 → 100644
浏览文件 @ 3ca78c85
<template>
<el-row class="wrapper layout-grid-line">
<el-col :span="span">
<pre>
{{
`
import RelationCenterChart from '@/components/base/RelationCenterChart/index.vue'
<RelationCenterChart :graph-data="graphData" />
`
}}
</pre>
<div class="chart-box">
<RelationCenterChart @line-click="handleClickLine" @node-click="handleClickNode" :graph-data="graphData" />
</div>
</el-col>
</el-row>
</template>
<script setup>
import { ref } from 'vue'
import '@/styles/common.scss'
import RelationCenterChart from '@/components/base/RelationCenterChart/index.vue'
const span = 24
import Img from '@/assets/icons/symbol.png'
const graphData = ref({
rootId: 'a',
nodes: [
{ id: 'a', text: '上海复龙鸿芯微系统技术有限公司', data: {
pic: Img,
name: "xxx图片"
} },
{ id: 'b', text: 'b' },
{ id: 'b1', text: 'b1' },
{ id: 'b1-1', text: 'b1-1' },
{ id: 'b1-2', text: 'b1-2' },
{ id: 'b1-3', text: 'b1-3' },
{ id: 'b1-4', text: 'b1-4' },
{ id: 'b2', text: 'b2' },
{ id: 'b2-1', text: 'b2-1' },
{ id: 'b2-2', text: 'b2-2' },
{ id: 'b2-3', text: 'b2-3' },
{ id: 'b2-4', text: 'b2-4' },
{ id: 'b3', text: 'b3' },
{ id: 'b3-1', text: 'b3-1' },
{ id: 'b3-2', text: 'b3-2' },
{ id: 'b3-3', text: 'b3-3' },
{ id: 'b3-4', text: 'b3-4' },
{ id: 'b3-5', text: 'b3-5' },
{ id: 'b4', text: 'b4' },
{ id: 'b4-1', text: 'b4-1' },
{ id: 'b4-2', text: 'b4-2' },
{ id: 'b4-3', text: 'b4-3' },
{ id: 'b4-4', text: 'b4-4' },
{ id: 'b4-5', text: 'b4-5' },
{ id: 'b4-6', text: 'b4-6' },
{ id: 'b4-7', text: 'b4-7' },
{ id: 'b4-8', text: 'b4-8' },
{ id: 'b4-9', text: 'b4-9' },
{ id: 'b5', text: 'b5' },
{ id: 'b5-1', text: 'b5-1' },
{ id: 'b5-2', text: 'b5-2' },
{ id: 'b5-3', text: 'b5-3' },
{ id: 'b5-4', text: 'b5-4' },
{ id: 'b6', text: 'b6' },
{ id: 'b6-1', text: 'b6-1' },
{ id: 'b6-2', text: 'b6-2' },
{ id: 'b6-3', text: 'b6-3' },
{ id: 'b6-4', text: 'b6-4' },
{ id: 'b6-5', text: 'b6-5' },
{ id: 'c', text: 'c' },
{ id: 'c1', text: 'c1' },
{ id: 'c1-1', text: 'c1-1' },
{ id: 'c1-2', text: 'c1-2' },
{ id: 'c1-3', text: 'c1-3' },
{ id: 'c1-4', text: 'c1-4' },
{ id: 'c1-5', text: 'c1-5' },
{ id: 'c1-6', text: 'c1-6' },
{ id: 'c1-7', text: 'c1-7' },
{ id: 'c2', text: 'c2' },
{ id: 'c2-1', text: 'c2-1' },
{ id: 'c2-2', text: 'c2-2' },
{ id: 'c3', text: 'c3' },
{ id: 'c3-1', text: 'c3-1' },
{ id: 'c3-2', text: 'c3-2' },
{ id: 'c3-3', text: 'c3-3' },
{ id: 'd', text: 'd' },
{ id: 'd1', text: 'd1' },
{ id: 'd1-1', text: 'd1-1' },
{ id: 'd1-2', text: 'd1-2' },
{ id: 'd1-3', text: 'd1-3' },
{ id: 'd1-4', text: 'd1-4' },
{ id: 'd1-5', text: 'd1-5' },
{ id: 'd1-6', text: 'd1-6' },
{ id: 'd1-7', text: 'd1-7' },
{ id: 'd1-8', text: 'd1-8' },
{ id: 'd2', text: 'd2' },
{ id: 'd2-1', text: 'd2-1' },
{ id: 'd2-2', text: 'd2-2' },
{ id: 'd3', text: 'd3' },
{ id: 'd3-1', text: 'd3-1' },
{ id: 'd3-2', text: 'd3-2' },
{ id: 'd3-3', text: 'd3-3' },
{ id: 'd3-4', text: 'd3-4' },
{ id: 'd3-5', text: 'd3-5' },
{ id: 'd4', text: 'd4' },
{ id: 'd4-1', text: 'd4-1' },
{ id: 'd4-2', text: 'd4-2' },
{ id: 'd4-3', text: 'd4-3' },
{ id: 'd4-4', text: 'd4-4' },
{ id: 'e', text: 'e' },
{ id: 'e1', text: 'e1' },
{ id: 'e1-1', text: 'e1-1' },
{ id: 'e1-2', text: 'e1-2' },
{ id: 'e1-3', text: 'e1-3' },
{ id: 'e1-4', text: 'e1-4' },
{ id: 'e2', text: 'e2' },
{ id: 'e2-1', text: 'e2-1' },
{ id: 'e2-2', text: 'e2-2' },
{ id: 'e2-3', text: 'e2-3' },
{ id: 'e2-4', text: 'e2-4' },
{ id: 'e2-5', text: 'e2-5' },
{ id: 'e2-6', text: 'e2-6' },
],
lines: [
{ from: 'a', to: 'b', text: '控股', fontColor:'red', textOffset_y: -8, color: 'orange', lineWidth: 5 },
{ from: 'b', to: 'b1' },
{ from: 'b1', to: 'b1-1' },
{ from: 'b1', to: 'b1-2' },
{ from: 'b1', to: 'b1-3' },
{ from: 'b1', to: 'b1-4' },
{ from: 'b1', to: 'b1-5' },
{ from: 'b1', to: 'b1-6' },
{ from: 'b', to: 'b2' },
{ from: 'b2', to: 'b2-1' },
{ from: 'b2', to: 'b2-2' },
{ from: 'b2', to: 'b2-3' },
{ from: 'b2', to: 'b2-4' },
{ from: 'b', to: 'b3' },
{ from: 'b3', to: 'b3-1' },
{ from: 'b3', to: 'b3-2' },
{ from: 'b3', to: 'b3-3' },
{ from: 'b3', to: 'b3-4' },
{ from: 'b3', to: 'b3-5' },
{ from: 'b', to: 'b4' },
{ from: 'b4', to: 'b4-1' },
{ from: 'b4', to: 'b4-2' },
{ from: 'b4', to: 'b4-3' },
{ from: 'b4', to: 'b4-4' },
{ from: 'b4', to: 'b4-5' },
{ from: 'b4', to: 'b4-6' },
{ from: 'b4', to: 'b4-7' },
{ from: 'b4', to: 'b4-8' },
{ from: 'b4', to: 'b4-9' },
{ from: 'b', to: 'b5' },
{ from: 'b5', to: 'b5-1' },
{ from: 'b5', to: 'b5-2' },
{ from: 'b5', to: 'b5-3' },
{ from: 'b5', to: 'b5-4' },
{ from: 'b', to: 'b6' },
{ from: 'b6', to: 'b6-1' },
{ from: 'b6', to: 'b6-2' },
{ from: 'b6', to: 'b6-3' },
{ from: 'b6', to: 'b6-4' },
{ from: 'b6', to: 'b6-5' },
{ from: 'a', to: 'c' },
{ from: 'c', to: 'c1' },
{ from: 'c1', to: 'c1-1' },
{ from: 'c1', to: 'c1-2' },
{ from: 'c1', to: 'c1-3' },
{ from: 'c1', to: 'c1-4' },
{ from: 'c1', to: 'c1-5' },
{ from: 'c1', to: 'c1-6' },
{ from: 'c1', to: 'c1-7' },
{ from: 'c', to: 'c2' },
{ from: 'c2', to: 'c2-1' },
{ from: 'c2', to: 'c2-2' },
{ from: 'c', to: 'c3' },
{ from: 'c3', to: 'c3-1' },
{ from: 'c3', to: 'c3-2' },
{ from: 'c3', to: 'c3-3' },
{ from: 'a', to: 'd' },
{ from: 'd', to: 'd1' },
{ from: 'd1', to: 'd1-1' },
{ from: 'd1', to: 'd1-2' },
{ from: 'd1', to: 'd1-3' },
{ from: 'd1', to: 'd1-4' },
{ from: 'd1', to: 'd1-5' },
{ from: 'd1', to: 'd1-6' },
{ from: 'd1', to: 'd1-7' },
{ from: 'd1', to: 'd1-8' },
{ from: 'd', to: 'd2' },
{ from: 'd2', to: 'd2-1' },
{ from: 'd2', to: 'd2-2' },
{ from: 'd', to: 'd3' },
{ from: 'd3', to: 'd3-1' },
{ from: 'd3', to: 'd3-2' },
{ from: 'd3', to: 'd3-3' },
{ from: 'd3', to: 'd3-4' },
{ from: 'd3', to: 'd3-5' },
{ from: 'd', to: 'd4' },
{ from: 'd4', to: 'd4-1' },
{ from: 'd4', to: 'd4-2' },
{ from: 'd4', to: 'd4-3' },
{ from: 'd4', to: 'd4-4' },
{ from: 'a', to: 'e' },
{ from: 'e', to: 'e1' },
{ from: 'e1', to: 'e1-1' },
{ from: 'e1', to: 'e1-2' },
{ from: 'e1', to: 'e1-3' },
{ from: 'e1', to: 'e1-4' },
{ from: 'e', to: 'e2' },
{ from: 'e2', to: 'e2-1' },
{ from: 'e2', to: 'e2-2' },
{ from: 'e2', to: 'e2-3' },
{ from: 'e2', to: 'e2-4' },
{ from: 'e2', to: 'e2-5' },
{ from: 'e2', to: 'e2-6' },
]
})
const handleClickNode = (value) => {
console.log('value', value);
alert('我点击了node-'+ value.text)
}
const handleClickLine = (value) => {
console.log('value', value);
alert('我点击了line-'+ value.text)
}
</script>
<style lang="scss" scoped>
.chart-box {
width: 1600px;
height: 600px;
}
</style>
\ No newline at end of file
src/styles/components/RelationChart/index.vue 0 → 100644
浏览文件 @ 3ca78c85
<template>
<el-row class="wrapper layout-grid-line">
<el-col :span="span">
<pre>
{{
`
import RelationChart from '@/components/base/RelationChart/index.vue'
<div class="chart-box">
<RelationChart :is-vertical-chart="isVerticalChart" :graph-data="graphData" />
</div>
`
}}
</pre>
<div class="tab-box">
<el-radio-group v-model="currentCase" size="large" @change="tabChange">
<el-radio-button label="水平关系图" />
<el-radio-button label="竖直关系图" />
</el-radio-group>
</div>
<div class="chart-box">
<RelationChart @line-click="handleClickLine" @node-click="handleClickNode" :is-vertical-chart="isVerticalChart" :graph-data="graphData" />
</div>
</el-col>
</el-row>
</template>
<script setup>
import { ref } from "vue";
import "@/styles/common.scss";
import RelationChart from "@/components/base/RelationChart/index.vue";
const span = 24;
const currentCase = ref("水平关系图");
const isVerticalChart = ref(false);
const tabChange = () => {
if (currentCase.value === "水平关系图") {
isVerticalChart.value = false;
} else {
isVerticalChart.value = true;
}
};
const graphData = ref({
rootId: "a",
nodes: [
{ id: "a", text: "a" },
{ id: "b", text: "b" },
{ id: "b1", text: "b1" },
{ id: "b1-1", text: "b1-1" },
{ id: "b1-2", text: "b1-2" },
{ id: "b1-3", text: "b1-3" },
{ id: "b1-4", text: "b1-4" },
{ id: "b1-5", text: "b1-5" },
{ id: "b1-6", text: "b1-6" },
{ id: "b2", text: "b2" },
{ id: "b2-1", text: "b2-1" },
{ id: "b2-2", text: "b2-2" },
{ id: "b2-3", text: "b2-3" },
{ id: "b2-4", text: "b2-4" },
{ id: "b3", text: "b3" },
{ id: "b3-1", text: "b3-1" },
{ id: "b3-2", text: "b3-2" },
{ id: "b3-3", text: "b3-3" },
{ id: "b3-4", text: "b3-4" },
{ id: "b3-5", text: "b3-5" },
{ id: "b3-6", text: "b3-6" },
{ id: "b3-7", text: "b3-7" },
{ id: "b4", text: "b4" },
{ id: "b4-1", text: "上海复龙鸿芯微系统技术有限公司" },
{ id: "b4-2", text: "b4-2" },
{ id: "b4-3", text: "b4-3" },
{ id: "b4-4", text: "b4-4" },
{ id: "b4-5", text: "b4-5" },
{ id: "b4-6", text: "b4-6" },
{ id: "b4-7", text: "b4-7" },
{ id: "b4-8", text: "b4-8" },
{ id: "b4-9", text: "b4-9" },
{ id: "b5", text: "b5" },
{ id: "b5-1", text: "b5-1" },
{ id: "b5-2", text: "b5-2" },
{ id: "b5-3", text: "b5-3" },
{ id: "b5-4", text: "b5-4" },
{ id: "b6", text: "b6" },
{ id: "b6-1", text: "b6-1" },
{ id: "b6-2", text: "b6-2" },
{ id: "b6-3", text: "b6-3" },
{ id: "b6-4", text: "b6-4" },
{ id: "b6-5", text: "b6-5" },
{ id: "c", text: "c" },
{ id: "c1", text: "c1" },
{ id: "c1-1", text: "c1-1" },
{ id: "c1-2", text: "c1-2" },
{ id: "c1-3", text: "c1-3" },
{ id: "c1-4", text: "c1-4" },
{ id: "c1-5", text: "c1-5" },
{ id: "c1-6", text: "c1-6" },
{ id: "c1-7", text: "c1-7" },
{ id: "c2", text: "c2" },
{ id: "c2-1", text: "c2-1" },
{ id: "c2-2", text: "c2-2" },
{ id: "c3", text: "c3" },
{ id: "c3-1", text: "c3-1" },
{ id: "c3-2", text: "c3-2" },
{ id: "c3-3", text: "c3-3" },
{ id: "d", text: "d" },
{ id: "d1", text: "d1" },
{ id: "d1-1", text: "d1-1" },
{ id: "d1-2", text: "d1-2" },
{ id: "d1-3", text: "d1-3" },
{ id: "d1-4", text: "d1-4" },
{ id: "d1-5", text: "d1-5" },
{ id: "d1-6", text: "d1-6" },
{ id: "d1-7", text: "d1-7" },
{ id: "d1-8", text: "d1-8" },
{ id: "d2", text: "d2" },
{ id: "d2-1", text: "d2-1" },
{ id: "d2-2", text: "d2-2" },
{ id: "d3", text: "d3" },
{ id: "d3-1", text: "d3-1" },
{ id: "d3-2", text: "d3-2" },
{ id: "d3-3", text: "d3-3" },
{ id: "d3-4", text: "d3-4" },
{ id: "d3-5", text: "d3-5" },
{ id: "d4", text: "d4" },
{ id: "d4-1", text: "d4-1" },
{ id: "d4-2", text: "d4-2" },
{ id: "d4-3", text: "d4-3" },
{ id: "d4-4", text: "d4-4" },
{ id: "d4-5", text: "d4-5" },
{ id: "d4-6", text: "d4-6" },
{ id: "e", text: "e" },
{ id: "e1", text: "上海复龙鸿芯微系统技术鸿芯微系统技术有限公司" },
{ id: "e1-1", text: "上海复龙鸿芯微系统技术鸿芯微系统技术有限公司" },
{ id: "e1-2", text: "e1-2" },
{ id: "e1-3", text: "e1-3" },
{ id: "e1-4", text: "e1-4" },
{ id: "e1-5", text: "e1-5" },
{ id: "e1-6", text: "e1-6" },
{ id: "e2", text: "e2" },
{ id: "e2-1", text: "e2-1" },
{ id: "e2-2", text: "e2-2" },
{ id: "e2-3", text: "e2-3" },
{ id: "e2-4", text: "e2-4" },
{ id: "e2-5", text: "e2-5" },
{ id: "e2-6", text: "e2-6" },
{ id: "e2-7", text: "e2-7" },
{ id: "e2-8", text: "e2-8" },
{ id: "e2-9", text: "e2-9" }
],
lines: [
{ from: "a", to: "b", text: '从属', fontColor: 'var(--color-orange-100)', color: 'orange', textOffset_x: -20, lineWidth: 5},
{ from: "b", to: "b1" },
{ from: "b1", to: "b1-1" },
{ from: "b1", to: "b1-2" },
{ from: "b1", to: "b1-3" },
{ from: "b1", to: "b1-4" },
{ from: "b1", to: "b1-5" },
{ from: "b1", to: "b1-6" },
{ from: "b", to: "b2" },
{ from: "b2", to: "b2-1" },
{ from: "b2", to: "b2-2" },
{ from: "b2", to: "b2-3" },
{ from: "b2", to: "b2-4" },
{ from: "b", to: "b3" },
{ from: "b3", to: "b3-1" },
{ from: "b3", to: "b3-2" },
{ from: "b3", to: "b3-3" },
{ from: "b3", to: "b3-4" },
{ from: "b3", to: "b3-5" },
{ from: "b3", to: "b3-6" },
{ from: "b3", to: "b3-7" },
{ from: "b", to: "b4" },
{ from: "b4", to: "b4-1" },
{ from: "b4", to: "b4-2" },
{ from: "b4", to: "b4-3" },
{ from: "b4", to: "b4-4" },
{ from: "b4", to: "b4-5" },
{ from: "b4", to: "b4-6" },
{ from: "b4", to: "b4-7" },
{ from: "b4", to: "b4-8" },
{ from: "b4", to: "b4-9" },
{ from: "b", to: "b5" },
{ from: "b5", to: "b5-1" },
{ from: "b5", to: "b5-2" },
{ from: "b5", to: "b5-3" },
{ from: "b5", to: "b5-4" },
{ from: "b", to: "b6" },
{ from: "b6", to: "b6-1" },
{ from: "b6", to: "b6-2" },
{ from: "b6", to: "b6-3" },
{ from: "b6", to: "b6-4" },
{ from: "b6", to: "b6-5" },
{ from: "a", to: "c" },
{ from: "c", to: "c1" },
{ from: "c1", to: "c1-1" },
{ from: "c1", to: "c1-2" },
{ from: "c1", to: "c1-3" },
{ from: "c1", to: "c1-4" },
{ from: "c1", to: "c1-5" },
{ from: "c1", to: "c1-6" },
{ from: "c1", to: "c1-7" },
{ from: "c", to: "c2" },
{ from: "c2", to: "c2-1" },
{ from: "c2", to: "c2-2" },
{ from: "c", to: "c3" },
{ from: "c3", to: "c3-1" },
{ from: "c3", to: "c3-2" },
{ from: "c3", to: "c3-3" },
{ from: "a", to: "d" },
{ from: "d", to: "d1" },
{ from: "d1", to: "d1-1" },
{ from: "d1", to: "d1-2" },
{ from: "d1", to: "d1-3" },
{ from: "d1", to: "d1-4" },
{ from: "d1", to: "d1-5" },
{ from: "d1", to: "d1-6" },
{ from: "d1", to: "d1-7" },
{ from: "d1", to: "d1-8" },
{ from: "d", to: "d2" },
{ from: "d2", to: "d2-1" },
{ from: "d2", to: "d2-2" },
{ from: "d", to: "d3" },
{ from: "d3", to: "d3-1" },
{ from: "d3", to: "d3-2" },
{ from: "d3", to: "d3-3" },
{ from: "d3", to: "d3-4" },
{ from: "d3", to: "d3-5" },
{ from: "d", to: "d4" },
{ from: "d4", to: "d4-1" },
{ from: "d4", to: "d4-2" },
{ from: "d4", to: "d4-3" },
{ from: "d4", to: "d4-4" },
{ from: "d4", to: "d4-5" },
{ from: "d4", to: "d4-6" },
{ from: "a", to: "e" },
{ from: "e", to: "e1" },
{ from: "e1", to: "e1-1" },
{ from: "e1", to: "e1-2" },
{ from: "e1", to: "e1-3" },
{ from: "e1", to: "e1-4" },
{ from: "e1", to: "e1-5" },
{ from: "e1", to: "e1-6" },
{ from: "e", to: "e2" },
{ from: "e2", to: "e2-1" },
{ from: "e2", to: "e2-2" },
{ from: "e2", to: "e2-3" },
{ from: "e2", to: "e2-4" },
{ from: "e2", to: "e2-5" },
{ from: "e2", to: "e2-6" },
{ from: "e2", to: "e2-7" },
{ from: "e2", to: "e2-8" },
{ from: "e2", to: "e2-9" }
]
});
const handleClickNode = (value) => {
console.log('value', value);
alert('我点击了node-'+ value.text)
}
const handleClickLine = (value) => {
console.log('value', value);
alert('我点击了line-'+ value.text)
}
</script>
<style lang="scss" scoped>
.tab-box {
margin-top: 20px;
margin-left: 20px;
}
.chart-box {
width: 1600px;
height: 500px;
}
</style>
\ No newline at end of file
src/styles/components/RelationForceChart/index.vue 0 → 100644
浏览文件 @ 3ca78c85
<template>
<el-row class="wrapper layout-grid-line">
<el-col :span="span">
<pre>
{{
`
import RelationForceChart from '@/components/base/RelationForceChart/index.vue'
<div class="chart-box">
<RelationForceChart :graph-data="graphData" />
</div>
`
}}
</pre>
<div class="chart-box">
<RelationForceChart @line-click="handleClickLine" @node-click="handleClickNode" :graph-data="graphData" />
</div>
</el-col>
</el-row>
</template>
<script setup>
import { ref } from "vue";
import "@/styles/common.scss";
import RelationForceChart from "@/components/base/RelationForceChart/index.vue";
const span = 24;
import Img from "@/assets/icons/symbol.png";
const graphData = ref({
rootId: "a",
nodes: [
{
id: "a",
text: "root",
data: {
pic: Img,
name: "xxx图片"
}
},
{ id: "b", text: "b" },
{
id: "b1",
text: "上海复龙鸿芯微系统技术有限公司",
data: {
pic: Img,
name: "xxx图片"
}
},
{ id: "b1-1", text: "b1-1" },
{ id: "b1-2", text: "b1-2" },
{ id: "b1-3", text: "b1-3" },
{ id: "b1-4", text: "b1-4" },
{ id: "b1-5", text: "b1-5" },
{ id: "b1-6", text: "b1-6" },
{ id: "b2", text: "b2" },
{ id: "b2-1", text: "b2-1" },
{ id: "b2-2", text: "b2-2" },
{ id: "b2-3", text: "b2-3" },
{ id: "b2-4", text: "b2-4" },
{ id: "b3", text: "b3" },
{ id: "b3-1", text: "b3-1" },
{ id: "b3-2", text: "b3-2" },
{ id: "b3-3", text: "b3-3" },
{ id: "b3-4", text: "b3-4" },
{ id: "b3-5", text: "b3-5" },
{ id: "b3-6", text: "b3-6" },
{ id: "b3-7", text: "b3-7" },
{ id: "b4", text: "b4" },
{ id: "b4-1", text: "b4-1" },
{ id: "b4-2", text: "b4-2" },
{ id: "b4-3", text: "b4-3" },
{ id: "b4-4", text: "b4-4" },
{ id: "b4-5", text: "b4-5" },
{ id: "b4-6", text: "b4-6" },
{ id: "b4-7", text: "b4-7" },
{ id: "b4-8", text: "b4-8" },
{ id: "b4-9", text: "b4-9" },
{ id: "b5", text: "b5" },
{ id: "b5-1", text: "b5-1" },
{ id: "b5-2", text: "b5-2" },
{ id: "b5-3", text: "b5-3" },
{ id: "b5-4", text: "b5-4" },
{ id: "b6", text: "b6" },
{ id: "b6-1", text: "b6-1" },
{ id: "b6-2", text: "b6-2" },
{ id: "b6-3", text: "b6-3" },
{ id: "b6-4", text: "b6-4" },
{ id: "b6-5", text: "b6-5" },
{ id: "c", text: "c" },
{ id: "c1", text: "c1" },
{ id: "c1-1", text: "c1-1" },
{ id: "c1-2", text: "c1-2" },
{ id: "c1-3", text: "c1-3" },
{ id: "c1-4", text: "c1-4" },
{ id: "c1-5", text: "c1-5" },
{ id: "c1-6", text: "c1-6" },
{ id: "c1-7", text: "c1-7" },
{ id: "c2", text: "c2" },
{ id: "c2-1", text: "c2-1" },
{ id: "c2-2", text: "c2-2" },
{ id: "c3", text: "c3" },
{ id: "c3-1", text: "c3-1" },
{ id: "c3-2", text: "c3-2" },
{ id: "c3-3", text: "c3-3" },
{ id: "d", text: "d" },
{ id: "d1", text: "d1" },
{ id: "d1-1", text: "d1-1" },
{ id: "d1-2", text: "d1-2" },
{ id: "d1-3", text: "d1-3" },
{ id: "d1-4", text: "d1-4" },
{ id: "d1-5", text: "d1-5" },
{ id: "d1-6", text: "d1-6" },
{ id: "d1-7", text: "d1-7" },
{ id: "d1-8", text: "d1-8" },
{ id: "d2", text: "d2" },
{ id: "d2-1", text: "d2-1" },
{ id: "d2-2", text: "d2-2" },
{ id: "d3", text: "d3" },
{ id: "d3-1", text: "d3-1" },
{ id: "d3-2", text: "d3-2" },
{ id: "d3-3", text: "d3-3" },
{ id: "d3-4", text: "d3-4" },
{ id: "d3-5", text: "d3-5" },
{ id: "d4", text: "d4" },
{ id: "d4-1", text: "d4-1" },
{ id: "d4-2", text: "d4-2" },
{ id: "d4-3", text: "d4-3" },
{ id: "d4-4", text: "d4-4" },
{ id: "d4-5", text: "d4-5" },
{ id: "d4-6", text: "d4-6" },
{ id: "e", text: "e" },
{ id: "e1", text: "e1" },
{ id: "e1-1", text: "e1-1" },
{ id: "e1-2", text: "e1-2" },
{ id: "e1-3", text: "e1-3" },
{ id: "e1-4", text: "e1-4" },
{ id: "e1-5", text: "e1-5" },
{ id: "e1-6", text: "e1-6" },
{ id: "e2", text: "e2" },
{ id: "e2-1", text: "e2-1" },
{ id: "e2-2", text: "e2-2" },
{ id: "e2-3", text: "e2-3" },
{ id: "e2-4", text: "e2-4" },
{ id: "e2-5", text: "e2-5" },
{ id: "e2-6", text: "e2-6" },
{ id: "e2-7", text: "e2-7" },
{ id: "e2-8", text: "e2-8" },
{ id: "e2-9", text: "e2-9" }
],
lines: [
{ from: "a", to: "b", text:'控股', color: 'orange',fontColor:'red', lineWidth: 5, textOffset_y: -8, },
{ from: "b", to: "b1" },
{ from: "b1", to: "b1-1" },
{ from: "b1", to: "b1-2" },
{ from: "b1", to: "b1-3" },
{ from: "b1", to: "b1-4" },
{ from: "b1", to: "b1-5" },
{ from: "b1", to: "b1-6" },
{ from: "b", to: "b2" },
{ from: "b2", to: "b2-1" },
{ from: "b2", to: "b2-2" },
{ from: "b2", to: "b2-3" },
{ from: "b2", to: "b2-4" },
{ from: "b", to: "b3" },
{ from: "b3", to: "b3-1" },
{ from: "b3", to: "b3-2" },
{ from: "b3", to: "b3-3" },
{ from: "b3", to: "b3-4" },
{ from: "b3", to: "b3-5" },
{ from: "b3", to: "b3-6" },
{ from: "b3", to: "b3-7" },
{ from: "b", to: "b4" },
{ from: "b4", to: "b4-1" },
{ from: "b4", to: "b4-2" },
{ from: "b4", to: "b4-3" },
{ from: "b4", to: "b4-4" },
{ from: "b4", to: "b4-5" },
{ from: "b4", to: "b4-6" },
{ from: "b4", to: "b4-7" },
{ from: "b4", to: "b4-8" },
{ from: "b4", to: "b4-9" },
{ from: "b", to: "b5" },
{ from: "b5", to: "b5-1" },
{ from: "b5", to: "b5-2" },
{ from: "b5", to: "b5-3" },
{ from: "b5", to: "b5-4" },
{ from: "b", to: "b6" },
{ from: "b6", to: "b6-1" },
{ from: "b6", to: "b6-2" },
{ from: "b6", to: "b6-3" },
{ from: "b6", to: "b6-4" },
{ from: "b6", to: "b6-5" },
{ from: "a", to: "c" },
{ from: "c", to: "c1" },
{ from: "c1", to: "c1-1" },
{ from: "c1", to: "c1-2" },
{ from: "c1", to: "c1-3" },
{ from: "c1", to: "c1-4" },
{ from: "c1", to: "c1-5" },
{ from: "c1", to: "c1-6" },
{ from: "c1", to: "c1-7" },
{ from: "c", to: "c2" },
{ from: "c2", to: "c2-1" },
{ from: "c2", to: "c2-2" },
{ from: "c", to: "c3" },
{ from: "c3", to: "c3-1" },
{ from: "c3", to: "c3-2" },
{ from: "c3", to: "c3-3" },
{ from: "a", to: "d" },
{ from: "d", to: "d1" },
{ from: "d1", to: "d1-1" },
{ from: "d1", to: "d1-2" },
{ from: "d1", to: "d1-3" },
{ from: "d1", to: "d1-4" },
{ from: "d1", to: "d1-5" },
{ from: "d1", to: "d1-6" },
{ from: "d1", to: "d1-7" },
{ from: "d1", to: "d1-8" },
{ from: "d", to: "d2" },
{ from: "d2", to: "d2-1" },
{ from: "d2", to: "d2-2" },
{ from: "d", to: "d3" },
{ from: "d3", to: "d3-1" },
{ from: "d3", to: "d3-2" },
{ from: "d3", to: "d3-3" },
{ from: "d3", to: "d3-4" },
{ from: "d3", to: "d3-5" },
{ from: "d", to: "d4" },
{ from: "d4", to: "d4-1" },
{ from: "d4", to: "d4-2" },
{ from: "d4", to: "d4-3" },
{ from: "d4", to: "d4-4" },
{ from: "d4", to: "d4-5" },
{ from: "d4", to: "d4-6" },
{ from: "a", to: "e" },
{ from: "e", to: "e1" },
{ from: "e1", to: "e1-1" },
{ from: "e1", to: "e1-2" },
{ from: "e1", to: "e1-3" },
{ from: "e1", to: "e1-4" },
{ from: "e1", to: "e1-5" },
{ from: "e1", to: "e1-6" },
{ from: "e", to: "e2" },
{ from: "e2", to: "e2-1" },
{ from: "e2", to: "e2-2" },
{ from: "e2", to: "e2-3" },
{ from: "e2", to: "e2-4" },
{ from: "e2", to: "e2-5" },
{ from: "e2", to: "e2-6" },
{ from: "e2", to: "e2-7" },
{ from: "e2", to: "e2-8" },
{ from: "e2", to: "e2-9" }
]
});
const handleClickNode = (value) => {
console.log('value', value);
alert('我点击了node-'+ value.text)
}
const handleClickLine = (value) => {
console.log('value', value);
alert('我点击了line-'+ value.text)
}
</script>
<style lang="scss" scoped>
.chart-box {
width: 1600px;
height: 600px;
}
</style>
\ No newline at end of file
src/styles/components/TreeChart/index.vue
浏览文件 @ 3ca78c85
......@@ -62,7 +62,554 @@ const treeData = ref([
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: 'b4',
symbolSize: 30,
value: 5,
symbol: `image://${CompanyImg}`,
}
]
}
])
......
src/styles/components/index.vue
浏览文件 @ 3ca78c85
......@@ -61,6 +61,15 @@
<el-tab-pane label="词云图" lazy>
<WordCloudChart />
</el-tab-pane>
<el-tab-pane label="关系图" lazy>
<RelationChart />
</el-tab-pane>
<el-tab-pane label="中心关系图" lazy>
<RelationCenterChart />
</el-tab-pane>
<el-tab-pane label="引力关系图" lazy>
<RelationForceChart />
</el-tab-pane>
</el-tabs>
</div>
</el-space>
......@@ -91,6 +100,9 @@ import NewsPage from './News/index.vue'
import TimeTabPane from './TimeTabPane/index.vue'
import AiInfo from './Ai/AiInfo/index.vue'
import AiSummary from './Ai/AiSummary/index.vue'
import RelationChart from './RelationChart/index.vue'
import RelationCenterChart from './RelationCenterChart/index.vue'
import RelationForceChart from './RelationForceChart/index.vue'
</script>
<style lang="scss" scoped>
......
src/views/bill/billHome/index.vue
浏览文件 @ 3ca78c85
......@@ -24,7 +24,8 @@
</el-radio-group>
</div>
<div class="committee-cards-row">
<div v-for="item in committeeCardList" :key="item.id" class="committee-card">
<div v-for="item in committeeCardList" :key="item.id" class="committee-card"
@click="handleToDataLibrary(item)">
<div class="committee-card-icon">
<img :src="iconCommit" alt="委员会头像" />
</div>
......@@ -1099,7 +1100,7 @@ const handleBox9Data = async () => {
{ label: "参议院通过", value: "参议院通过" },
{ label: "解决分歧", value: "分歧已解决" },
{ label: "完成立法", value: "完成立法" }
]
]
const status = arr.filter(item => {
return item.value === box9LegislativeStatus.value
})[0].label
......@@ -1375,6 +1376,22 @@ const handleResize = () => {
box9ChartInstance && box9ChartInstance.resize();
};
// 下钻至资源库
const handleToDataLibrary = (item) => {
// console.log('item', item);
const selectParam = {
selectedOrg: item.name,
selectedCongress: item.chamber
}
const route = router.resolve({
path: "/dataLibrary/countryBill",
query: selectParam
});
window.open(route.href, "_blank");
}
onMounted(async () => {
window.addEventListener("resize", handleResize);
handleGetHylyList();
......@@ -1787,6 +1804,10 @@ onUnmounted(() => {
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: var(--bg-white-100);
box-sizing: border-box;
cursor: pointer;
&:hover{
background: var(--color-primary-2);
}
.committee-card-icon {
width: 54px;
......
src/views/comprehensiveSearch/searchResults/index.vue
浏览文件 @ 3ca78c85
......@@ -324,6 +324,7 @@ const handleSearch = async () => {
}
searchResults.value = res.data.records;
searchResults.value.forEach(item => {
item.titleText = item.originalTitle
item.originalTitle = highlightText(item.originalTitle, keyword.value);
item.originalDescription = highlightText(item.originalDescription, keyword.value);
});
......@@ -393,7 +394,7 @@ const handleToPage = async item => {
}
} catch (error) {}
}
window.sessionStorage.setItem("curTabName", item.originalTitle);
window.sessionStorage.setItem("curTabName", item.titleText);
let curRoute;
switch (item.typeStr) {
case "法案":
......
src/views/dataLibrary/bill/countryBill/index.vue
浏览文件 @ 3ca78c85
......@@ -1033,7 +1033,7 @@ const initParam = () => {
if (hasQuery) {
selectedArea.value = route.query.domains ? route.query.domains : '全部领域'
if (Array.isArray(JSON.parse(route.query.selectedDate)) && JSON.parse(route.query.selectedDate).length) {
if (route.query.selectedDate && Array.isArray(JSON.parse(route.query.selectedDate)) && JSON.parse(route.query.selectedDate).length) {
selectedDate.value = '自定义'
customTime.value = JSON.parse(route.query.selectedDate)
}
......
src/views/dataLibrary/decree/index.vue
浏览文件 @ 3ca78c85
......@@ -722,15 +722,15 @@ const fetchTableData = async () => {
const params = {
page: currentPage.value,
size: pageSize.value,
keyword: '',
// keyword: '',
type: 2, // type 1= 法案 2= 政令 3 =智库 4=智库报告 5=实体清单【制裁记录】 6= 人物 7= 机构 8=新闻 9= 社媒
domains: selectedArea.value === '全部领域' ? null : [selectedArea.value],
proposedDateStart: customTime.value[0]?customTime.value[0]:null,
proposedDateEnd: customTime.value[1]?customTime.value[1]:null,
organizationName: selectedIns.value === '全部机构' ? null : selectedIns.value,
decreeType: selectedDecreeType.value === '全部类型' ? null : selectedDecreeType.value,
isInvolveCn: isInvolveCn.value ? 'Y' : 'N',
isTechRelated: isInvolveTechnology.value ? 'Y' : 'N',
isInvolveCn: isInvolveCn.value ? 'Y' : null,
isTechRelated: isInvolveTechnology.value ? 'Y' : null,
sort: isSort.value ? 0 : 1 // 0 先按分数降序 后按时间降序 1 先按分数降序，再按时间升序
}
try {
......@@ -794,15 +794,15 @@ const fetchAllData = async () => {
const params = {
page: 1,
size: 9999,
keyword: '',
// keyword: '',
type: 2, // type 1= 法案 2= 政令 3 =智库 4=智库报告 5=实体清单【制裁记录】 6= 人物 7= 机构 8=新闻 9= 社媒
domains: selectedArea.value === '全部领域' ? null : [selectedArea.value],
proposedDateStart: customTime.value[0],
proposedDateEnd: customTime.value[1],
organizationName: selectedIns.value === '全部机构' ? null : selectedIns.value,
decreeType: selectedDecreeType.value === '全部类型' ? null : selectedDecreeType.value,
isInvolveCn: isInvolveCn.value ? 'Y' : 'N',
isTechRelated: isInvolveTechnology.value ? 'Y' : 'N',
isInvolveCn: isInvolveCn.value ? 'Y' : null,
isTechRelated: isInvolveTechnology.value ? 'Y' : null,
sort: isSort.value ? 0 : 1
}
try {
......@@ -955,7 +955,7 @@ const initParam = () => {
if (hasQuery) {
selectedArea.value = route.query.domains ? route.query.domains : '全部领域'
if (Array.isArray(JSON.parse(route.query.selectedDate)) && JSON.parse(route.query.selectedDate).length) {
if (route.query.selectedDate && Array.isArray(JSON.parse(route.query.selectedDate)) && JSON.parse(route.query.selectedDate).length) {
selectedDate.value = '自定义'
customTime.value = JSON.parse(route.query.selectedDate)
}
......
src/views/decree/decreeHome/index.vue
浏览文件 @ 3ca78c85
......@@ -37,18 +37,22 @@
<TimeTabPane @time-click="onKeyOrganization" activeTime="近一年" />
</div>
<div class="home-main-header-item-box" v-if="keyOrganizationList.length">
<div class="organization-item" v-for="(item, index) in keyOrganizationList" :key="index" @click="handleToInstitution(item)">
<div class="organization-item" v-for="(item, index) in keyOrganizationList" :key="index">
<div class="item-left">
<img :src="item.imgUrl || DefaultIcon2" alt="" />
</div>
<div class="item-right one-line-ellipsis">{{ item.orgName }}</div>
<div class="item-total">{{ item.totalOrderNum }}项</div>
<el-icon color="var(--color-primary-100)"><ArrowRightBold /></el-icon>
<div class="item-dot" v-if="item.recentOrderNum">+{{item.recentOrderNum}}</div>
<div class="item-right one-line-ellipsis" @click="handleToInstitution(item)">{{ item.orgName }}</div>
<div class="item-total" @click="handleToDataLibrary(item)">{{ item.totalOrderNum }}项</div>
<el-icon color="var(--color-primary-100)">
<ArrowRightBold />
</el-icon>
<div class="item-dot" v-if="item.recentOrderNum">+{{ item.recentOrderNum }}</div>
</div>
<div class="organization-item" @click="onNavigateTo()">
<div class="item-more">查看全部机构 ({{govInsList.length}}家)</div>
<el-icon color="var(--color-primary-100)"><ArrowRightBold /></el-icon>
<div class="item-more">查看全部机构 ({{ govInsList.length }}家)</div>
<el-icon color="var(--color-primary-100)">
<ArrowRightBold />
</el-icon>
</div>
</div>
</div>
......@@ -135,13 +139,16 @@
</div>
<div class="box5-header-title">{{ "数量变化趋势" }}</div>
<div style="margin-right: 20px;">
<el-select @change="handleBox5" v-model="box5Params.proposeName" :empty-values="[null, undefined]" style="width:150px">
<el-select @change="handleBox5" v-model="box5Params.proposeName" :empty-values="[null, undefined]"
style="width:150px">
<el-option label="全部政府部门" value="" />
<el-option v-for="item in keyOrganizationList" :key="item.orgId" :label="item.orgName" :value="item.orgId" />
<el-option v-for="item in keyOrganizationList" :key="item.orgId" :label="item.orgName"
:value="item.orgId" />
</el-select>
</div>
<div style="margin-right: 20px;">
<el-select @change="handleBox5" v-model="box5Params.domainId" :empty-values="[null, undefined]" style="width:120px">
<el-select @change="handleBox5" v-model="box5Params.domainId" :empty-values="[null, undefined]"
style="width:120px">
<el-option label="全部领域" value="" />
<el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
......@@ -174,13 +181,16 @@
</div>
<div class="box5-header-title">{{ "领域分布情况" }}</div>
<div style="margin-right: 20px;">
<el-select @change="handleBox6YearChange" v-model="box6Params.proposeName" :empty-values="[null, undefined]" style="width:150px">
<el-select @change="handleBox6YearChange" v-model="box6Params.proposeName"
:empty-values="[null, undefined]" style="width:150px">
<el-option label="全部政府部门" value="" />
<el-option v-for="item in keyOrganizationList" :key="item.orgId" :label="item.orgName" :value="item.orgId" />
<el-option v-for="item in keyOrganizationList" :key="item.orgId" :label="item.orgName"
:value="item.orgId" />
</el-select>
</div>
<div style="margin-right: 20px;">
<el-select @change="handleBox6YearChange" v-model="box6Params.year" placeholder="选择时间" style="width: 120px">
<el-select @change="handleBox6YearChange" v-model="box6Params.year" placeholder="选择时间"
style="width: 120px">
<el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
......@@ -208,26 +218,31 @@
</div>
<div class="header-title">{{ "关键科技政令" }}</div>
<div style="margin-right: 20px;">
<el-select @change="handleGetKeyDecree" v-model="box7Params.proposeName" :empty-values="[null, undefined]" style="width:150px">
<el-select @change="handleGetKeyDecree" v-model="box7Params.proposeName"
:empty-values="[null, undefined]" style="width:150px">
<el-option label="全部政府部门" value="" />
<el-option v-for="item in keyOrganizationList" :key="item.orgId" :label="item.orgName" :value="item.orgId" />
<el-option v-for="item in keyOrganizationList" :key="item.orgId" :label="item.orgName"
:value="item.orgId" />
</el-select>
</div>
<div style="margin-right: 20px;">
<el-select @change="handleGetKeyDecree" v-model="box7Params.domainId" :empty-values="[null, undefined]" style="width:120px">
<el-select @change="handleGetKeyDecree" v-model="box7Params.domainId" :empty-values="[null, undefined]"
style="width:120px">
<el-option label="全部领域" value="" />
<el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</div>
<div style="margin-right: 20px;">
<el-select @change="handleGetKeyDecree" v-model="box7Params.year" placeholder="选择时间" style="width:120px">
<el-select @change="handleGetKeyDecree" v-model="box7Params.year" placeholder="选择时间"
style="width:120px">
<el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</div>
<div class="box7-main" v-loading="box7Params.loading">
<div class="box7-list">
<div class="box7-item" v-for="(item, index) in keyDecreeList" :key="index" @click="onNavigateToDetail(item)">
<div class="box7-item" v-for="(item, index) in keyDecreeList" :key="index"
@click="onNavigateToDetail(item)">
<div class="icon">
<img src="./assets/images/warning.png" alt="" />
</div>
......@@ -241,7 +256,8 @@
</div>
</div>
</div>
<SimplePagination v-model:current-page="keyDecreeInfo.page" :page-size="keyDecreeInfo.size" :total="keyDecreeInfo.total" @page-change="handleGetKeyDecree" />
<SimplePagination v-model:current-page="keyDecreeInfo.page" :page-size="keyDecreeInfo.size"
:total="keyDecreeInfo.total" @page-change="handleGetKeyDecree" />
<div class="data-origin-box">
<div class="data-origin-icon">
<img :src="tipsTcon" alt="">
......@@ -256,19 +272,23 @@
</div>
<div class="header-title">{{ "关键条款词云" }}</div>
<div style="margin-right: 20px;">
<el-select @change="handleGetDecreeKeyInstruction" v-model="box8Params.proposeName" :empty-values="[null, undefined]" style="width:150px">
<el-select @change="handleGetDecreeKeyInstruction" v-model="box8Params.proposeName"
:empty-values="[null, undefined]" style="width:150px">
<el-option label="全部政府部门" value="" />
<el-option v-for="item in keyOrganizationList" :key="item.orgId" :label="item.orgName" :value="item.orgId" />
<el-option v-for="item in keyOrganizationList" :key="item.orgId" :label="item.orgName"
:value="item.orgId" />
</el-select>
</div>
<div style="margin-right: 20px;">
<el-select @change="handleGetDecreeKeyInstruction" v-model="box8Params.domainId" :empty-values="[null, undefined]" style="width:120px">
<el-select @change="handleGetDecreeKeyInstruction" v-model="box8Params.domainId"
:empty-values="[null, undefined]" style="width:120px">
<el-option label="全部领域" value="" />
<el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</div>
<div style="margin-right: 20px;">
<el-select @change="handleGetDecreeKeyInstruction" v-model="box8Params.year" placeholder="选择时间" style="width:120px">
<el-select @change="handleGetDecreeKeyInstruction" v-model="box8Params.year" placeholder="选择时间"
style="width:120px">
<el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
......@@ -318,8 +338,8 @@
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox v-for="type in decreeTypeList" :key="type.id" v-model="checkedDecreeType" :label="type.typeId"
style="width: 180px" class="filter-checkbox"
<el-checkbox v-for="type in decreeTypeList" :key="type.id" v-model="checkedDecreeType"
:label="type.typeId" style="width: 180px" class="filter-checkbox"
@change="handleChangeCheckedDecreeType">
{{ type.typeName }}
</el-checkbox>
......@@ -333,12 +353,13 @@
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox v-model="activeAreaList" label="all"
style="width: 100px" class="filter-checkbox" @change="checked => handleAreaChange('all', checked)">
<el-checkbox v-model="activeAreaList" label="all" style="width: 100px" class="filter-checkbox"
@change="checked => handleAreaChange('all', checked)">
{{ "全部领域" }}
</el-checkbox>
<el-checkbox v-for="area in areaList" :key="area.id" v-model="activeAreaList" :label="area.id"
style="width: 100px" class="filter-checkbox" @change="checked => handleAreaChange(area.id, checked)">
style="width: 100px" class="filter-checkbox"
@change="checked => handleAreaChange(area.id, checked)">
{{ area.name }}
</el-checkbox>
</div>
......@@ -352,7 +373,8 @@
<div class="select-main">
<div class="checkbox-group">
<el-checkbox v-for="time in pubTime" :key="time.id" v-model="activePubTime" :label="time.id"
style="width: 100px" class="filter-checkbox" @change="checked => handlePubTimeChange(time.id, checked)">
style="width: 100px" class="filter-checkbox"
@change="checked => handlePubTimeChange(time.id, checked)">
{{ time.name }}
</el-checkbox>
</div>
......@@ -489,7 +511,7 @@ const handleToInstitution = item => {
};
// 跳转全部机构页面
const onNavigateTo = () => {
router.push({name: "allOrganization"});
router.push({ name: "allOrganization" });
}
// 查看更多风险信号
......@@ -503,7 +525,7 @@ const handleToMoreRiskSignal = () => {
const handleToMoreNews = () => {
const route = router.resolve("/newsBrief");
window.open(route.href, "_blank");
// router.push("/newsBrief")
// router.push("/newsBrief")
};
// 最新科技政令
......@@ -599,7 +621,7 @@ const newsList = ref([
]);
const handleGetNews = async () => {
try {
const res = await getNews({moduleId: "0101"});
const res = await getNews({ moduleId: "0101" });
console.log("新闻资讯", res);
if (res.code === 200 && res.data) {
newsList.value = (res.data ?? []).map(item => {
......@@ -767,7 +789,7 @@ const handleGetDecreeYearOrder = async () => {
chart1Data.value.dataY = res.data.map(item => {
return item.count;
});
onChartInterpretation({type:"柱状图",name:"数量变化趋势",data:res.data}, summarize1)
onChartInterpretation({ type: "柱状图", name: "数量变化趋势", data: res.data }, summarize1)
}
} catch (error) {
console.error("行政令发布频度error", error);
......@@ -789,7 +811,7 @@ const onChartInterpretation = async (text, param) => {
"X-API-Key": "aircasKEY19491001",
'Content-Type': 'application/json',
},
body: JSON.stringify({text}),
body: JSON.stringify({ text }),
signal: controller.signal // 👇 新增：绑定中断信号
});
......@@ -829,13 +851,13 @@ const handleBox5 = async () => {
chart1.yAxis.name = "数量";
chart1.yAxis.nameTextStyle = { align: 'right' }
let org = '全部机构'
if(box5Params.proposeName) {
if (box5Params.proposeName) {
org = keyOrganizationList.value.filter(item => {
return item.orgId === box5Params.proposeName
})[0].orgName
}
let domain = '全部领域'
if(box5Params.domainId) {
if (box5Params.domainId) {
domain = areaList.value.filter(item => {
return item.id === box5Params.domainId
})[0].name
......@@ -884,7 +906,7 @@ const handleGetDecreeArea = async () => {
value: item.count
};
});
onChartInterpretation({type:"环形图",name:"领域分布情况",data:res.data}, summarize2)
onChartInterpretation({ type: "环形图", name: "领域分布情况", data: res.data }, summarize2)
}
} catch (error) {
console.error("政令科技领域error", error);
......@@ -894,7 +916,7 @@ const handleGetDecreeArea = async () => {
const handleBox6 = async () => {
await handleGetDecreeArea();
let org = '全部机构'
if(box6Params.proposeName) {
if (box6Params.proposeName) {
org = keyOrganizationList.value.filter(item => {
return item.orgId === box6Params.proposeName
})[0].orgName
......@@ -902,7 +924,7 @@ const handleBox6 = async () => {
const selectParam = {
moduleType: '政令',
orgnizationName: org,
selectedDate: JSON.stringify([box6Params.year+'-01-01', box6Params.year+'-12-31'])
selectedDate: JSON.stringify([box6Params.year + '-01-01', box6Params.year + '-12-31'])
}
let chart2 = getPieChart(chart2Data.value);
setChart(chart2, "chart2", true, selectParam);
......@@ -930,8 +952,8 @@ const handleGetKeyDecree = async () => {
try {
let { year, domainId, proposeName } = box7Params;
const res = await getKeyDecree({
pageSize:keyDecreeInfo.size,
pageNum:keyDecreeInfo.page-1,
pageSize: keyDecreeInfo.size,
pageNum: keyDecreeInfo.page - 1,
year,
domainId: domainId || undefined,
orgId: proposeName || undefined
......@@ -971,8 +993,8 @@ const handleGetDecreeKeyInstruction = async () => {
orgId: proposeName || undefined
});
console.log("政令重点条款", res);
if (res.code==200) {
wordCloudData.value = res.data.map(item => ({name: item.clause, value: item.count}));
if (res.code == 200) {
wordCloudData.value = res.data.map(item => ({ name: item.clause, value: item.count }));
} else {
wordCloudData.value = []
}
......@@ -1213,7 +1235,7 @@ const onKeyOrganization = async (event) => {
if (event?.time === '近一月') day = 30
if (event?.time === '近一年') day = 365
try {
const res = await getKeyOrganization({day});
const res = await getKeyOrganization({ day });
console.log("关键机构", res);
if (res.code === 200) {
keyOrganizationList.value = res.data;
......@@ -1221,6 +1243,19 @@ const onKeyOrganization = async (event) => {
} catch (error) { }
}
// 下钻至数据资源库
const handleToDataLibrary = (item) => {
const selectParam = {
orgnizationName: item.orgName,
isInvolveCn: true
}
const route = router.resolve({
path: "/dataLibrary/dataDecree",
query: selectParam
});
window.open(route.href, "_blank");
}
onMounted(async () => {
onKeyOrganization();
handleGetDepartmentList();
......@@ -1246,18 +1281,23 @@ onMounted(async () => {
right: 0px;
bottom: 15px;
z-index: 2;
:deep(.ai-pane-wrapper) {
display: none;
}
:deep(.ai-button-wrapper) {
display: flex;
}
&:hover {
width: 100%;
bottom: 0px;
:deep(.ai-pane-wrapper) {
display: block;
}
:deep(.ai-button-wrapper) {
display: none;
}
......@@ -1269,16 +1309,19 @@ onMounted(async () => {
display: flex;
align-items: center;
padding: 16px 22px;
.data-origin-icon {
width: 16px;
height: 16px;
font-size: 0px;
margin-right: 8px;
img{
img {
width: 100%;
height: 100%;
}
}
.data-origin-text {
font-family: Source Han Sans CN;
font-size: 14px;
......@@ -1418,11 +1461,13 @@ onMounted(async () => {
height: 16px;
font-size: 0px;
margin-right: 6px;
img {
width: 100%;
height: 100%;
}
}
.date-text {
width: 20px;
flex: auto;
......@@ -1465,6 +1510,7 @@ onMounted(async () => {
width: 48px;
height: 48px;
font-size: 0px;
img {
width: 100%;
height: 100%;
......@@ -1479,6 +1525,11 @@ onMounted(async () => {
font-weight: 700;
line-height: 20px;
margin: 0 16px;
&:hover {
color: var(--color-primary-100);
text-decoration: underline;
}
}
.item-total {
......@@ -1488,6 +1539,10 @@ onMounted(async () => {
font-weight: 700;
line-height: 20px;
color: var(--color-primary-100);
&:hover {
text-decoration: underline;
}
}
.item-more {
......@@ -2015,6 +2070,7 @@ onMounted(async () => {
margin-left: 24px;
width: 17px;
height: 17px;
img {
width: 100%;
height: 100%;
......@@ -2038,6 +2094,7 @@ onMounted(async () => {
flex: auto;
height: 20px;
padding-top: 16px;
.box5-chart {
height: 100%;
}
......@@ -2071,6 +2128,7 @@ onMounted(async () => {
width: 22px;
height: 20px;
margin-left: 25px;
img {
width: 100%;
height: 100%;
......@@ -2093,12 +2151,15 @@ onMounted(async () => {
.box7-main {
height: 20px;
flex: auto;
.box7-list {
padding: 10px 24px 0;
.box7-item {
display: flex;
padding: 10px 0;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
......@@ -2108,6 +2169,7 @@ onMounted(async () => {
width: 24px;
height: 22px;
font-size: 0px;
img {
width: 100%;
height: 100%;
......@@ -2118,6 +2180,7 @@ onMounted(async () => {
margin-left: 13px;
width: 20px;
flex: auto;
.info-header {
height: 24px;
display: flex;
......@@ -2161,6 +2224,7 @@ onMounted(async () => {
}
}
}
:deep(.simple-pagination) {
padding: 0;
}
......@@ -2187,6 +2251,7 @@ onMounted(async () => {
width: 22px;
height: 20px;
margin-left: 25px;
img {
width: 100%;
height: 100%;
......
src/views/thinkTank/index.vue
浏览文件 @ 3ca78c85
......@@ -56,7 +56,7 @@
</div>
</div>
<div class="home-main-header-card-box">
<div class="card" v-for="(item, index) in sortedCardList" :key="index" @click="handleClick(item)">
<div class="card" v-for="(item, index) in sortedCardList" :key="index">
<div class="red-info" v-if="item.increaseReportNumber != 0 && item.increaseReportNumber != null">{{ "+" }}{{
item.increaseReportNumber }}</div>
<div class="card-header">
......@@ -67,12 +67,12 @@
{{ "No." + (index + 1) }}
</div> -->
<div class="rank">
<div class=" number">{{ item.reportNumber }} {{ "篇报告" }}</div>
<div class=" number" @click="handleToDataLibrary(item)">{{ item.reportNumber }} {{ "篇报告" }}</div>
</div>
</div>
<div class="card-title">
<div class="title-left">{{ item.name }}</div>
<div class="title-left" @click="handleClick(item)">{{ item.name }}</div>
<div class="title-right">{{ item.country }}</div>
</div>
......@@ -2110,6 +2110,22 @@ const handleSearch = () => {
window.open(curRoute.href, "_blank");
};
// 下钻至数据资源库
const handleToDataLibrary = (item) => {
if(!item.reportNumber) {
ElMessage.warning('当前智库没有相关报告！')
return
}
const selectParam = {
orgnizationName: item.name
}
const route = router.resolve({
path: "/dataLibrary/dataThinkTank",
query: selectParam
});
window.open(route.href, "_blank");
}
onMounted(async () => {
handleGetThinkTankList();
handleGetAllThinkTankList()
......@@ -2514,6 +2530,11 @@ onMounted(async () => {
margin-top: 4px;
margin-left: 26px;
color: rgb(5, 95, 194);
&:hover {
font-weight: bold;
text-decoration: underline;
}
}
}
......@@ -2538,6 +2559,12 @@ onMounted(async () => {
line-height: 24px;
letter-spacing: 1px;
text-align: left;
&:hover {
color: var(--color-primary-100);
font-weight: bold;
text-decoration: underline;
}
}
.title-right {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论