From 1a6dcd7c86d6ae6acc0c523d38a8ae46e461fa75 Mon Sep 17 00:00:00 2001
From: xjj <xjj@123>
Date: 星期四, 29 二月 2024 13:27:02 +0800
Subject: [PATCH] tt
---
zy-asrs-flow/package.json | 1
zy-asrs-flow/src/pages/home/index.jsx | 100 ++++++++++++++++++++++--
zy-asrs-flow/src/pages/home/data.js | 101 +++++++++++++++++++++++++
zy-asrs-flow/src/pages/home/index.css | 10 ++
zy-asrs-flow/src/config/setting.ts | 2
5 files changed, 203 insertions(+), 11 deletions(-)
diff --git a/zy-asrs-flow/package.json b/zy-asrs-flow/package.json
index 22c9023..3ebcb7a 100644
--- a/zy-asrs-flow/package.json
+++ b/zy-asrs-flow/package.json
@@ -48,6 +48,7 @@
"dependencies": {
"@ant-design/icons": "^5.3.0",
"@ant-design/pro-components": "^2.6.48",
+ "@antv/g6": "^4.8.24",
"@antv/xflow": "^2.0.4",
"@umijs/route-utils": "^2.2.2",
"antd": "^5.13.2",
diff --git a/zy-asrs-flow/src/config/setting.ts b/zy-asrs-flow/src/config/setting.ts
index 882ce08..9038b15 100644
--- a/zy-asrs-flow/src/config/setting.ts
+++ b/zy-asrs-flow/src/config/setting.ts
@@ -1,5 +1,5 @@
// 鎺ュ彛鍦板潃
-export const API_BASE_URL: string = 'http://localhost:9090/wcs';
+export const API_BASE_URL: string = 'http://172.16.0.219:9090/wcs';
// 椤圭洰鍚嶇О
export const PROJECT_NAME: string = 'admin';
diff --git a/zy-asrs-flow/src/pages/home/data.js b/zy-asrs-flow/src/pages/home/data.js
new file mode 100644
index 0000000..5e062c3
--- /dev/null
+++ b/zy-asrs-flow/src/pages/home/data.js
@@ -0,0 +1,101 @@
+export const data = {
+ nodes: [
+ {
+ id: '1',
+ label: '鍏徃1',
+ },
+ {
+ id: '2',
+ label: '鍏徃2',
+ },
+ {
+ id: '3',
+ label: '鍏徃3'
+ },
+ {
+ id: '4',
+ label: '鍏徃4'
+ },
+ {
+ id: '5',
+ label: '鍏徃5'
+ },
+ {
+ id: '6',
+ label: '鍏徃6'
+ },
+ {
+ id: '7',
+ label: '鍏徃7'
+ },
+ {
+ id: '8',
+ label: '鍏徃8'
+ }
+ ],
+ edges: [
+ {
+ source: '1',
+ target: '2',
+ data: {
+ type: 'name1',
+ amount: '100,000,000,00 鍏�',
+ date: '2019-08-03'
+ }
+ },
+ {
+ source: '1',
+ target: '3',
+ data: {
+ type: 'name2',
+ amount: '100,000,000,00 鍏�',
+ date: '2019-08-03'
+ }
+ },
+ {
+ source: '2',
+ target: '5',
+ data: {
+ type: 'name1',
+ amount: '100,000,000,00 鍏�',
+ date: '2019-08-03'
+ }
+ },
+ {
+ source: '5',
+ target: '6',
+ data: {
+ type: 'name2',
+ amount: '100,000,000,00 鍏�',
+ date: '2019-08-03'
+ }
+ },
+ {
+ source: '3',
+ target: '4',
+ data: {
+ type: 'name3',
+ amount: '100,000,000,00 鍏�',
+ date: '2019-08-03'
+ }
+ },
+ {
+ source: '4',
+ target: '7',
+ data: {
+ type: 'name2',
+ amount: '100,000,000,00 鍏�',
+ date: '2019-08-03'
+ }
+ },
+ {
+ source: '1',
+ target: '8',
+ data: {
+ type: 'name2',
+ amount: '100,000,000,00 鍏�',
+ date: '2019-08-03'
+ }
+ }
+ ]
+ };
\ No newline at end of file
diff --git a/zy-asrs-flow/src/pages/home/index.css b/zy-asrs-flow/src/pages/home/index.css
new file mode 100644
index 0000000..d3d4eaa
--- /dev/null
+++ b/zy-asrs-flow/src/pages/home/index.css
@@ -0,0 +1,10 @@
+ /* 鎻愮ず妗嗙殑鏍峰紡 */
+ .g6-tooltip {
+ border: 1px solid #e2e2e2;
+ border-radius: 4px;
+ font-size: 12px;
+ color: #545454;
+ background-color: rgba(255, 255, 255, 0.9);
+ padding: 10px 8px;
+ box-shadow: rgb(174, 174, 174) 0px 0px 10px;
+ }
\ No newline at end of file
diff --git a/zy-asrs-flow/src/pages/home/index.jsx b/zy-asrs-flow/src/pages/home/index.jsx
index cbfa9c0..92634cc 100644
--- a/zy-asrs-flow/src/pages/home/index.jsx
+++ b/zy-asrs-flow/src/pages/home/index.jsx
@@ -1,11 +1,91 @@
-import ProSkeleton from '@ant-design/pro-skeleton';
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { data } from './data';
+import G6 from '@antv/g6';
+import "./index.css"
-export default () => (
- <div
- style={{
- padding: 24,
- }}
- >
- <ProSkeleton type="list" />
- </div>
-);
\ No newline at end of file
+export default function() {
+ const ref = React.useRef(null);
+ let graph = null;
+
+ useEffect(() => {
+ if (!graph) {
+ graph = new G6.Graph({
+ container: ReactDOM.findDOMNode(ref.current),
+ width: document.documentElement.clientWidth,
+ height: document.documentElement.clientHeight,
+ modes: {
+ default: [
+ 'drag-canvas',
+ 'zoom-canvas',
+ 'drag-node',
+ ],
+ edit: ['click-select']
+ },
+ layout: {
+ type: 'dagre',
+ direction: 'LR',
+ },
+ defaultNode: {
+ shape: 'node',
+ type: 'rect',
+ labelCfg: {
+ style: {
+ fill: '#000000A6',
+ fontSize: 14,
+ },
+ },
+ style: {
+ // 浠呭湪 keyShape 涓婄敓鏁�
+ fill: 'lightblue',
+ stroke: '#888',
+ lineWidth: 1,
+ radius: 7,
+ },
+ linkPoints: {
+ top: true,
+ bottom: true,
+ left: true,
+ right: true,
+ // ... 鍥涗釜鍦嗙殑鏍峰紡鍙互鍦ㄨ繖閲屾寚瀹�
+ },
+ },
+ defaultEdge: {
+ shape: 'polyline',
+ },
+ nodeStateStyles: {
+ // 鍚勭姸鎬佷笅鐨勬牱寮忥紝骞抽摵鐨勯厤缃」浠呭湪 keyShape 涓婄敓鏁堛�傞渶瑕佸湪鍏朵粬 shape 鏍峰紡涓婂搷搴旂姸鎬佸彉鍖栧垯鍐欐硶涓嶅悓锛屽弬瑙佷笂鏂囨彁鍒扮殑 閰嶇疆鐘舵�佹牱寮� 閾炬帴
+ hover: {
+ fillOpacity: 0.1,
+ lineWidth: 1,
+ },
+ },
+ });
+ }
+ graph.data(data);
+ graph.render();
+
+ // 鐩戝惉榧犳爣杩涘叆鑺傜偣浜嬩欢
+ graph.on('node:mouseenter', (evt) => {
+ const node = evt.item;
+ // 婵�娲昏鑺傜偣鐨� hover 鐘舵��
+ graph.setItemState(node, 'hover', true);
+ });
+
+ // 鐩戝惉榧犳爣绂诲紑鑺傜偣浜嬩欢
+ graph.on('node:mouseleave', (evt) => {
+ const node = evt.item;
+ // 鍏抽棴璇ヨ妭鐐圭殑 hover 鐘舵��
+ graph.setItemState(node, 'hover', false);
+ });
+
+ graph.on('node:click', (evt) => {
+ const node = evt.item;
+ const model = node.getModel();
+ // 鍦ㄨ繖閲屾墦寮�妯℃�佹鎴栬�呯紪杈戣〃鏍硷紝浼犲叆model浠ヤ究鐢ㄤ簬鍒濆鍖栫紪杈戝唴瀹�
+ showModal(model);
+ });
+ }, []);
+
+ return <div ref={ref}></div>;
+}
\ No newline at end of file
--
Gitblit v1.9.1