Skip to content

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

feat:更新关系图组件

上级 d133fbef
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 1202 行增加 和 30 行删除
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
差异被折叠。
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/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/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/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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论