From e5e65bb50cbfb973f98191993ab559767eff7a53 Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期二, 30 七月 2024 17:06:34 +0800
Subject: [PATCH] 页面添加（知识图谱，数据统计，数据分析，站点管理）
---
src/views/visual/atlas/index.vue | 363 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 360 insertions(+), 3 deletions(-)
diff --git a/src/views/visual/atlas/index.vue b/src/views/visual/atlas/index.vue
index a0e89d6..d890e9f 100644
--- a/src/views/visual/atlas/index.vue
+++ b/src/views/visual/atlas/index.vue
@@ -1,10 +1,335 @@
<template>
- <div class="atlasBox"></div>
+ <div class="atlasBox">
+ <div id="container" class="container" v-show="!showEcharts">
+ <svg class="keywords" @mousemove="listener($event)">
+ <a href="javascript:void(0)" v-for="(tag, index) in tags" :key="index"
+ @contextmenu="removeClick($event, tag)" @click="nodeClick(tag)">
+ <text class="text" :x="tag.x" :y="tag.y" :font-size="20 * (600 / (600 - tag.z))"
+ :fill-opacity="(400 + tag.z) / 600" :fill="tag.color">{{ tag.text }}</text>
+ </a>
+ </svg>
+ </div>
+ <div class="graphicBox" v-show="showEcharts">
+ <div class="konwReturn fl">
+ <el-link @click="showEcharts = false">
+ <i class="el-icon-d-arrow-left"></i>
+ </el-link>
+ 褰撳墠棰嗗煙:{{ targetName }}
+ </div>
+ <div id="graphicContent" v-loading="g_loading" class="graphicContent">
+ <RelationGraph ref="graphRef" :options="graphOptions" :on-node-expand="onNodeExpand"
+ :on-node-collapse="onNodeCollapse">
+ </RelationGraph>
+ </div>
+ </div>
+ </div>
</template>
<script>
+import G6 from '@antv/g6';
+import { kg_getGraph, kg_queryGraphResult } from '@/api/mapView/map.js';
+import RelationGraph from 'relation-graph'
export default {
-
+ components: { RelationGraph },
+ data() {
+ return {
+ width: null,
+ height: null,
+ tags: [],
+ showEcharts: false,
+ speedX: Math.PI / 360,
+ speedY: Math.PI / 360,
+ CX: 600,
+ CY: 300,
+ RADIUS: 200,
+ ZRADIUS: 200,
+ targetName: null,
+ // 鍥捐氨
+ g_loading: true,
+ demoname: '---',
+ graphOptions: {
+ layout:
+ {
+ label: '涓績',
+ layoutName: 'tree',
+ layoutClassName: 'seeks-layout-center',
+ defaultJunctionPoint: 'border',
+ defaultNodeShape: 0,
+ defaultLineShape: 1,
+ from: 'left',
+ max_per_width: 300,
+ min_per_height: 40
+ },
+ defaultLineMarker: {
+ markerWidth: 12,
+ markerHeight: 12,
+ refX: 6,
+ refY: 6,
+ data: 'M2,2 L10,6 L2,10 L6,6 L2,2'
+ },
+ moveToCenterWhenRefresh: false,
+ defaultExpandHolderPosition: 'right',
+ defaultNodeShape: 1,
+ defaultNodeWidth: 100,
+ defaultLineShape: 4,
+ defaultJunctionPoint: 'lr',
+ defaultNodeBorderWidth: 0,
+ defaultLineColor: 'rgba(0, 186, 189, 1)',
+ defaultNodeColor: 'rgba(0, 206, 209, 1)'
+ }
+ }
+ },
+
+ mounted() {
+
+ // ;
+ this.setResizeStart();
+ },
+ methods: {
+ nodeClick(tag) {
+ this.showEcharts = true;
+ this.targetName = tag.text
+ this.g_loading = true
+ this.getGraphData(tag.text)
+
+ },
+
+ getGraphData(name) {
+
+
+
+ this.graphOptions.layout.max_per_width = this.width
+ kg_queryGraphResult(
+ { domain: name }
+ ).then(response => {
+ if (response.data.code != 200) return
+ this.g_loading = false;
+ const data = response.data.data
+ if (!this.width) {
+ this.width = document.getElementById('container').innerWidth;
+ }
+ const obj = data.node.filter(item => {
+ if (item.name == name) {
+ return item
+ }
+ })
+ this.getGraphicNodes(data.node, data.relationship, obj)
+ })
+ },
+ onNodeCollapse(node, e) {
+ // const graphInstance = this.$refs.graphRef.getInstance();
+ // graphInstance.doLayout();
+ },
+ // 閫氳繃onNodeExpand浜嬩欢鐩戝惉鑺傜偣鐨勫睍寮�浜嬩欢锛屽湪琚睍寮�鐨勬椂鍊欐湁閫夋嫨鐨勫幓浠庡悗鍙拌幏鍙栨暟鎹紝濡傛灉宸茬粡浠庡悗鍙板姞杞借繃鏁版嵁锛屽垯璁╁綋鍓嶅浘璋辨牴鎹綋鍓嶇殑鑺傜偣閲嶆柊甯冨眬
+ onNodeExpand(node, e) {
+ const graphInstance = this.$refs.graphRef.getInstance();
+ // 鏍规嵁鍏蜂綋鐨勪笟鍔￠渶瑕佸喅瀹氭槸鍚﹂渶瑕佷粠鍚庡彴鍔犺浇鏁版嵁
+ if (!node.data.isNeedLoadDataFromRemoteServer) {
+ console.log('杩欎釜鑺傜偣鐨勫瓙鑺傜偣宸茬粡鍔犺浇杩囦簡');
+ graphInstance.doLayout();
+ return;
+ }
+ // 鍒ゆ柇鏄惁宸茬粡鍔ㄦ�佸姞杞芥暟鎹簡
+ if (node.data.childrenLoaded) {
+ console.log('杩欎釜鑺傜偣鐨勫瓙鑺傜偣宸茬粡鍔犺浇杩囦簡');
+ graphInstance.doLayout();
+ return;
+ }
+ // this.g_loading = true;
+ node.data.childrenLoaded = true;
+ this.loadChildNodesFromRemoteServer(node);
+ },
+ loadChildNodesFromRemoteServer(node) {
+ var graphInstance = this.$refs.graphRef.getInstance();
+ graphInstance.doLayout();
+ },
+ getGraphicNodes(res, lines, obj) {
+ const std = [];
+ const ids = [];
+
+ lines.filter(item => {
+
+ if (ids.indexOf(item.sourceId) < 0) {
+ ids.push(item.sourceId)
+ }
+ if (obj && obj.length > 0) {
+ if (item.targetId == obj[0].uuid) {
+ ids.push(item.targetId)
+ }
+ }
+
+ })
+
+ res.filter(item => {
+ var poi = false;
+ if (item.poi && item.poi == 1) {
+ poi = true;
+ }
+
+ const expand = ids.indexOf(item.uuid) > -1 ? false : true
+ if (!expand) {
+
+ std.push({
+ // 'uuid': item.id ? item.id : new Date().getTime(),
+ 'id': item.uuid,
+ 'text': item.name,
+ // expandHolderPosition: 'right',
+ // expanded: true,
+ // data: { isNeedLoadDataFromRemoteServer: true, childrenLoaded: false },
+ })
+ } else {
+ std.push({
+ // 'uuid': item.id ? item.id : new Date().getTime(),
+ 'id': item.uuid,
+ 'text': item.name,
+ // expandHolderPosition: 'right',
+ // expanded: false,
+ // data: { isNeedLoadDataFromRemoteServer: true, childrenLoaded: false },
+ })
+ }
+
+ })
+ this.getGraphicLines(std, lines)
+ },
+ getGraphicLines(nodes, res) {
+ const std = [];
+ res.filter(item => {
+ std.push({
+ "from": "" + item.sourceId + "",
+ "to": "" + item.targetId + "",
+ "text": "鍖呭惈",
+ })
+
+ })
+ const json_data = {
+ 'rootId': 'a',
+ 'nodes': nodes,
+ 'lines': std
+ };
+ this.setGraphic(json_data)
+ },
+ setGraphic(res) {
+
+
+
+ setTimeout(() => {
+
+ this.$refs.graphRef.setJsonData(res, (graphInstance) => {
+ // 杩欎簺鍐欎笂褰撳浘璋卞垵濮嬪寲瀹屾垚鍚庨渶瑕佹墽琛岀殑浠ｇ爜
+ graphInstance.doLayout();
+ });
+
+ }, 1000);
+
+
+ setTimeout(() => {
+
+ var graphInstance = this.$refs.graphRef.getInstance();
+
+ }, 2000);
+ },
+ removeClick() { },
+ rotateX(speedX) {
+ var cos = Math.cos(speedX);
+ var sin = Math.sin(speedX);
+ for (let tag of this.tags) {
+ var y1 = (tag.y - this.CY) * cos - tag.z * sin + this.CY;
+ var z1 = tag.z * cos + (tag.y - this.CY) * sin;
+ tag.y = y1;
+ tag.z = z1;
+ }
+ },
+ rotateY(speedY) {
+ var cos = Math.cos(speedY);
+ var sin = Math.sin(speedY);
+ for (let tag of this.tags) {
+ var x1 = (tag.x - this.CX) * cos - tag.z * sin + this.CX;
+ var z1 = tag.z * cos + (tag.x - this.CX) * sin;
+ tag.x = x1;
+ tag.z = z1;
+ }
+ },
+ resizeWindow() {
+ if (this.showEcharts) return;
+ let height = document.getElementById('container').clientHeight;
+ let width = document.getElementById('container').clientWidth;
+ width = width * 0.85;
+ if (width > 1200) {
+ this.CX = width / 2;
+ }
+ height = height - 150;
+ this.CY = height / 2;
+ let radius = Math.min(this.CY, this.CX) / 2;
+ if (radius > 200) {
+ this.RADIUS = radius;
+ }
+ this.setCreateGraph();
+ },
+ setResizeStart() {
+ this.resizeWindow();
+ window.addEventListener('resize', this.resizeWindow);
+ this.setCreateGraph();
+ //浣跨悆寮�濮嬫棆杞�
+ const interval = setInterval(() => {
+ this.rotateX(this.speedX);
+ this.rotateY(this.speedY);
+ }, 17);
+ this.$once('hook:beforedestroy', () => {
+ interval && clearInterval(interval);
+ window.removeEventListener('resize', this.resizeWindow);
+ });
+ },
+ //鍥捐氨鍒濆鍖�
+ setCreateGraph() {
+ kg_getGraph({
+ command: 0,
+ pageIndex: 1,
+ pageSize: 5000,
+ }).then((response) => {
+ if (response.data.code != 200) return;
+
+ this.setGraphStart(response.data.data.nodeList);
+ });
+ },
+ listener(event) {
+ var x = event.clientX - this.CX;
+ var y = event.clientY - this.CY;
+ if (event.target.tagName == 'text') {
+ this.speedX = 0;
+ this.speedY = 0;
+ } else {
+ this.speedX = x * 0.00001 > 0 ? Math.min(this.RADIUS * 0.00002, x * 0.0001) : Math.max(-this.RADIUS * 0.00002, x * 0.0001);
+ this.speedY = y * 0.00001 > 0 ? Math.min(this.RADIUS * 0.00002, y * 0.0001) : Math.max(-this.RADIUS * 0.00002, y * 0.0001);
+ }
+
+ // var val = document.getElementById("removeLabel").style.display;
+ // if (val == "none") {
+ // document.getElementById("removeLabel").style.top = event.clientY - 20 + 'px';
+ // document.getElementById("removeLabel").style.left = event.clientX + 10 + 'px';
+ // }
+ },
+ setGraphStart(arr) {
+ const field = 'label';
+ const obj = arr.filter((item, index) => {
+ return arr.findIndex((i) => i[field] === item[field]) === index;
+ });
+ let tags = [];
+ const length = obj.length;
+ for (let i = 0; i < length; i++) {
+ let tag = {};
+ let k = -1 + (2 * (i + 1) - 1) / length;
+ let a = Math.acos(k);
+ let b = a * Math.sqrt(length * Math.PI);
+ tag.text = obj[i].label;
+ (tag.id = obj[i].id), (tag.label = obj[i].label), (tag.x = this.CX + this.RADIUS * Math.sin(a) * Math.cos(b));
+ tag.y = this.CY + this.RADIUS * Math.sin(a) * Math.sin(b);
+ tag.z = this.ZRADIUS * Math.cos(a);
+ tag.color = 'rgb(' + parseInt(Math.random() * 255) + ',' + parseInt(Math.random() * 255) + ',' + parseInt(Math.random() * 255) + ')';
+ tags.push(tag);
+ }
+ this.tags = [].concat(tags);
+ },
+ },
};
</script>
@@ -15,6 +340,38 @@
position: absolute;
margin: 10px;
border-radius: 5px;
- background: skyblue;
+
+ // background: skyblue;
+ .container {
+ width: 100%;
+ height: 100%;
+ }
+
+ .keywords {
+ width: 100%;
+ height: 100%;
+ }
+
+ .keywords .text:hover {
+ font-size: 200%;
+ }
+
+ .SVGBox {
+ width: 100%;
+ height: 100%;
+ }
+
+ .graphicBox {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+
+ .graphicContent {
+ padding: 10px;
+ flex: 1;
+
+ }
+ }
}
</style>
--
Gitblit v1.9.3