From f719b59be68518d10836fc6ba492b21174c11dd0 Mon Sep 17 00:00:00 2001
From: heimawl <1785969728@qq.com>
Date: 星期一, 07 八月 2023 16:50:43 +0800
Subject: [PATCH] 11
---
src/views/patient/viewvant/RightDrawer.vue | 331 +++++++++++++++++++
src/views/patient/viewvant/index.scss | 102 ++++++
src/views/import/index.vue | 2
src/views/patient/viewvant/Graph/methods.js | 152 ++++++++
src/views/patient/viewvant/index.vue | 319 ++++++++++++++++++
src/views/patient/viewvant/iconfont.css | 61 +++
src/components/PageTools/index.vue | 2
7 files changed, 960 insertions(+), 9 deletions(-)
diff --git a/src/components/PageTools/index.vue b/src/components/PageTools/index.vue
index 5861bf4..c8a7cf3 100644
--- a/src/components/PageTools/index.vue
+++ b/src/components/PageTools/index.vue
@@ -39,4 +39,4 @@
};
</script>
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/src/views/import/index.vue b/src/views/import/index.vue
index 2ff68b3..6ee840d 100644
--- a/src/views/import/index.vue
+++ b/src/views/import/index.vue
@@ -52,4 +52,4 @@
};
</script>
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/src/views/patient/viewvant/Graph/methods.js b/src/views/patient/viewvant/Graph/methods.js
new file mode 100644
index 0000000..2065bd2
--- /dev/null
+++ b/src/views/patient/viewvant/Graph/methods.js
@@ -0,0 +1,152 @@
+import '@antv/x6-vue-shape';
+import { Graph,Shape,Addon,FunctionExt} from '@antv/x6'
+// 鎷栨嫿鐢熸垚鍥涜竟褰㈡垨鑰呭渾褰�
+export const startDragToGraph = (graph,type,e) =>{
+ const node =
+ type === 'Rect'
+ ? graph.createNode({
+ width: 100,
+ height: 60,
+ attrs: {
+ label: {
+ text: '姝ｆ柟褰㈣妭鐐�',
+ fill: '#000000',
+ fontSize: 14,
+ textWrap: {
+ width: -10,
+ height: -10,
+ ellipsis: true
+ }
+ },
+ body: {
+ stroke: '#000000',
+ strokeWidth: 1,
+ fill: '#ffffff'
+ }
+ },
+ ports: ports
+ })
+ : type === 'Circle'?graph.createNode({
+ shape: 'ellipse',
+ width: 100,
+ height: 100,
+ attrs: {
+ label: {
+ text: '鍦嗗舰鑺傜偣',
+ fill: '#000000',
+ fontSize: 14,
+ textWrap: {
+ width: -20,
+ height: -10,
+ ellipsis: true
+ }
+ },
+ body: {
+ stroke: '#000000',
+ strokeWidth: 1,
+ fill: '#ffffff'
+ }
+ },
+ ports: ports
+ }):
+ graph.createNode({
+ shape: 'polygon',
+ x: 40,
+ y: 40,
+ width: 120,
+ height: 120,
+ attrs: {
+ label: {
+ text: '鏉′欢鑺傜偣',
+ fill: '#000000',
+ fontSize: 14,
+ textWrap: {
+ width: -50,
+ height: '70%',
+ ellipsis: true
+ }
+ },
+ body: {
+ fill: '#ffffff',
+ stroke: '#000000',
+ refPoints: '0,10 10,0 20,10 10,20',
+ strokeWidth: 1
+ }
+ },
+ ports: ports
+ })
+ const dnd = new Addon.Dnd({target:graph})
+ dnd.start(node,e)
+}
+const ports = {
+ groups: {
+ // 杈撳叆閾炬帴妗╃兢缁勫畾涔�
+ top: {
+ position: 'top',
+ attrs: {
+ circle: {
+ r: 4,
+ magnet: true,
+ stroke: '#2D8CF0',
+ strokeWidth: 2,
+ fill: '#fff',
+ },
+ },
+ },
+ // 杈撳嚭閾炬帴妗╃兢缁勫畾涔�
+ bottom: {
+ position: 'bottom',
+ attrs: {
+ circle: {
+ r: 4,
+ magnet: true,
+ stroke: '#2D8CF0',
+ strokeWidth: 2,
+ fill: '#fff',
+ },
+ },
+ },
+ left: {
+ position: 'left',
+ attrs: {
+ circle: {
+ r: 4,
+ magnet: true,
+ stroke: '#2D8CF0',
+ strokeWidth: 2,
+ fill: '#fff',
+ },
+ },
+ },
+ right: {
+ position: 'right',
+ attrs: {
+ circle: {
+ r: 4,
+ magnet: true,
+ stroke: '#2D8CF0',
+ strokeWidth: 2,
+ fill: '#fff',
+ },
+ },
+ },
+ },
+ items: [
+ {
+ id: 'port1',
+ group: 'top',
+ },
+ {
+ id: 'port2',
+ group: 'bottom',
+ },
+ {
+ id: 'port3',
+ group: 'left',
+ },
+ {
+ id: 'port4',
+ group: 'right',
+ }
+ ],
+}
\ No newline at end of file
diff --git a/src/views/patient/viewvant/RightDrawer.vue b/src/views/patient/viewvant/RightDrawer.vue
new file mode 100644
index 0000000..d9b5175
--- /dev/null
+++ b/src/views/patient/viewvant/RightDrawer.vue
@@ -0,0 +1,331 @@
+<template>
+ <div class="drawer_container">
+ <div v-if="drawerType === 'grid'">
+ <div class="drawer_title">鐢诲竷鑳屾櫙璁剧疆</div>
+ <div class="drawer_wrap">
+ <el-form label-position="left" label-width="85px">
+ <el-form-item label="鏄惁鏄剧ず缃戞牸" label-width="100px">
+ <el-switch v-model="showGrid" @change="changeGrid" />
+ </el-form-item>
+ <div v-show="showGrid">
+ <el-form-item label="缃戞牸绫诲瀷">
+ <el-radio-group v-model="grid.type" @change="changeGridType">
+ <el-radio
+ v-for="item in gridTypeList"
+ :label="item.value"
+ :key="item.value"
+ >
+ <span>{{ item.label }}</span>
+ </el-radio>
+ </el-radio-group>
+ </el-form-item>
+ <el-form-item label-width="70px" label="缃戞牸澶у皬">
+ <el-slider
+ v-model="grid.size"
+ :min="0"
+ :max="30"
+ @change="changeGrid"
+ ></el-slider>
+ </el-form-item>
+ <el-form-item label="缃戞牸棰滆壊">
+ <el-color-picker v-model="grid.args.color" @change="changeGrid" />
+ </el-form-item>
+ <el-form-item label-width="85px" label="缃戞牸绾垮搴�">
+ <el-slider
+ v-model="grid.args.thickness"
+ :min="0"
+ :max="20"
+ @change="changeGrid"
+ ></el-slider>
+ </el-form-item>
+ </div>
+ </el-form>
+ </div>
+ </div>
+ <div v-if="drawerType === 'node'">
+ <div class="drawer_title">浠诲姟鑺傜偣璁剧疆</div>
+ <div class="drawer_wrap">
+ <el-form label-position="left" label-width="80px">
+ <el-form-item label="浠诲姟鍚嶇О">
+ <el-input
+ v-model="drawerNode.nodeText"
+ @change="changeNodeText"
+ ></el-input>
+ </el-form-item>
+ <el-form-item label="浠诲姟鎵ц浜�" label-width="80px">
+ <el-input
+ v-model="drawerNode.nodeText"
+ @change="changeNodeText"
+ ></el-input>
+ </el-form-item>
+ <el-form-item label="鑺傜偣鑳屾櫙">
+ <el-color-picker v-model="drawerNode.fill" @change="changeFill" />
+ </el-form-item>
+ <el-form-item label-width="70px" label="瀛椾綋澶у皬">
+ <el-slider
+ v-model="drawerNode.fontSize"
+ :min="10"
+ :max="20"
+ @change="changefontSize"
+ ></el-slider>
+ </el-form-item>
+ <el-form-item label="瀛椾綋棰滆壊">
+ <el-color-picker
+ v-model="drawerNode.fontFill"
+ @change="changeFontFill"
+ />
+ </el-form-item>
+ <el-form-item label-width="70px" label="杈规瀹藉害">
+ <el-slider
+ v-model="drawerNode.strokeWidth"
+ :min="0"
+ :max="10"
+ @change="changeStrokeWidth"
+ ></el-slider>
+ </el-form-item>
+ <el-form-item label="杈规棰滆壊">
+ <el-color-picker
+ v-model="drawerNode.stroke"
+ @change="changeStroke"
+ />
+ </el-form-item>
+ <el-form-item label="鍔熻兘">
+ <el-button type="primary" icon="el-icon-upload" @click="toTopZIndex"
+ >缃《</el-button
+ >
+ <el-button
+ type="danger"
+ class="margin-left-10"
+ icon="el-icon-delete"
+ @click="deleteNode"
+ >鍒犻櫎</el-button
+ >
+ </el-form-item>
+ </el-form>
+ <el-button
+ type="success"
+ class="margin-left-10"
+ icon="el-icon-download"
+ @click="exportData"
+ >淇濆瓨</el-button
+ >
+ </div>
+ </div>
+ <div v-if="drawerType === 'edge'">
+ <div class="drawer_title">绾挎潯璁剧疆</div>
+ <div class="drawer_wrap">
+ <el-form label-position="left" label-width="80px">
+ <el-form-item label="绾挎潯鏂囨湰">
+ <el-input
+ v-model="drawerEdge.EdgeText"
+ @change="changeEdgeText"
+ ></el-input>
+ </el-form-item>
+ <el-form-item label="绾挎潯瀹藉害" label-width="80px">
+ <el-slider
+ v-model="drawerEdge.edgeWidth"
+ :min="1"
+ :max="10"
+ @change="changeEdgeWidth"
+ ></el-slider>
+ </el-form-item>
+ <el-form-item label="绾挎潯棰滆壊">
+ <el-color-picker
+ v-model="drawerEdge.edgeColor"
+ @change="changeEdgeColor"
+ />
+ </el-form-item>
+ <el-form-item label="鍔熻兘">
+ <el-button type="primary" icon="el-icon-upload" @click="toTopZIndex"
+ >缃《</el-button
+ >
+ <el-button
+ type="danger"
+ class="margin-left-10"
+ icon="el-icon-delete"
+ @click="deleteNode"
+ >鍒犻櫎</el-button
+ >
+ </el-form-item>
+ </el-form>
+ <el-button
+ type="success"
+ class="margin-left-10"
+ icon="el-icon-download"
+ @click="exportData"
+ >淇濆瓨</el-button
+ >
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "RightDrawer",
+ data() {
+ return {
+ gridTypeList: [
+ {
+ label: "鍥涜竟缃戞牸",
+ value: "mesh",
+ },
+ {
+ label: "鐐圭姸缃戞牸",
+ value: "dot",
+ },
+ ],
+ baseData: "",
+ showGrid: true,
+ drawerNode: {
+ fill: "",
+ nodeText: "",
+ fontSize: null,
+ fontFill: "",
+ strokeWidth: null,
+ stroke: "",
+ },
+ drawerEdge: {
+ EdgeText: "",
+ edgeWidth: null,
+ edgeColor: "",
+ },
+ };
+ },
+ props: {
+ drawerType: {
+ type: String,
+ },
+ selectCell: {
+ type: String | Object,
+ },
+ graph: {
+ type: String | Object,
+ },
+ grid: {
+ type: Object,
+ },
+ },
+ created() {},
+ mounted() {},
+ watch: {
+ selectCell: {
+ handler(val) {
+ if (val) {
+ if (val.isNode()) {
+ //鑺傜偣
+ this.drawerNode.fill = val.store.data.attrs.body.fill;
+ this.drawerNode.nodeText = val.store.data.attrs.label.text;
+ this.drawerNode.fontFill = val.store.data.attrs.label.fill;
+ this.drawerNode.fontSize = Number(
+ val.store.data.attrs.label.fontSize
+ );
+ this.drawerNode.strokeWidth = Number(
+ val.store.data.attrs.body.strokeWidth
+ );
+ this.drawerNode.stroke = val.store.data.attrs.body.stroke;
+ } else {
+ //杈�
+ this.drawerEdge.EdgeText = val.store.data.labels
+ ? val.store.data.labels[0].text
+ : "";
+ this.drawerEdge.edgeWidth = Number(
+ val.store.data.attrs.line.strokeWidth
+ );
+ this.drawerEdge.edgeColor = val.store.data.attrs.line.stroke;
+ }
+ }
+ },
+ immediate: true,
+ deep: false,
+ },
+ },
+ methods: {
+ // 缃戞牸璁剧疆
+ changeGrid() {
+ this.showGrid ? this.graph.showGrid() : this.graph.hideGrid();
+ },
+ changeGridType(e) {
+ this.grid.type = e;
+ this.changeGrid();
+ },
+ changeGrid() {
+ this.graph.drawGrid({
+ ...this.grid,
+ });
+ },
+ // 鑺傜偣璁剧疆
+ changeStrokeWidth(val) {
+ this.selectCell.attr("body/strokeWidth", val);
+ },
+ changefontSize(val) {
+ this.selectCell.attr("label/fontSize", val);
+ },
+ changeNodeText() {
+ this.selectCell.attr("label/text", this.drawerNode.nodeText);
+ },
+ changeStroke(val) {
+ this.drawerNode.stroke = val;
+ this.selectCell.attr("body/stroke", this.drawerNode.stroke);
+ },
+ changeFontFill(val) {
+ this.drawerNode.fontFill = val;
+ this.selectCell.attr("label/fill", this.drawerNode.fontFill);
+ },
+ changeFill(val) {
+ this.drawerNode.fill = val;
+ this.selectCell.attr("body/fill", val);
+ },
+ // 杈硅缃�
+ changeEdgeText() {
+ console.log(this.drawerEdge.EdgeText);
+ this.selectCell.setLabels([
+ { attrs: { label: { text: this.drawerEdge.EdgeText } } },
+ ]);
+ },
+ changeEdgeWidth(val) {
+ this.drawerEdge.edgeWidth = val;
+ this.selectCell.attr("line/strokeWidth", this.drawerEdge.edgeWidth);
+ },
+ changeEdgeColor(val) {
+ this.drawerEdge.stroke = val;
+ this.selectCell.attr("line/stroke", this.drawerEdge.stroke);
+ },
+ // 缃《
+ toTopZIndex() {
+ this.selectCell.toFront();
+ },
+ // 鍒犻櫎
+ deleteNode() {
+ this.$emit("deleteNode");
+ },
+ // 瀵煎嚭鏁版嵁
+ exportData() {
+ this.baseData = this.graph.toJSON();
+ console.log(this.baseData);
+ },
+ // 瀵煎叆鏁版嵁
+ importData() {
+ this.graph.fromJSON(this.baseData);
+ },
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+.drawer_container {
+ max-width: 300px;
+ min-width: 300px;
+ .drawer_title {
+ border-bottom: 1px solid #e8eaec;
+ box-sizing: border-box;
+ padding: 14px 16px;
+ color: #333;
+ font-size: 16px;
+ }
+ .drawer_wrap {
+ box-sizing: border-box;
+ padding: 20px 10px 20px 20px;
+ }
+}
+</style>
diff --git a/src/views/patient/viewvant/iconfont.css b/src/views/patient/viewvant/iconfont.css
new file mode 100644
index 0000000..69ffd7b
--- /dev/null
+++ b/src/views/patient/viewvant/iconfont.css
@@ -0,0 +1,61 @@
+@font-face {font-family: "iconfont";
+ src: url('//at.alicdn.com/t/font_2431749_zpzhmewttjs.eot?t=1616140304099'); /* IE9 */
+ src: url('//at.alicdn.com/t/font_2431749_zpzhmewttjs.eot?t=1616140304099#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+ url('//at.alicdn.com/t/font_2431749_zpzhmewttjs.woff?t=1616140304099') format('woff'),
+ url('//at.alicdn.com/t/font_2431749_zpzhmewttjs.ttf?t=1616140304099') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+ url('//at.alicdn.com/t/font_2431749_zpzhmewttjs.svg?t=1616140304099#iconfont') format('svg'); /* iOS 4.1- */
+ }
+
+ .iconfont {
+ font-family: "iconfont" !important;
+ font-size: 16px;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+
+ .icon-straight:before {
+ content: "\e752";
+ }
+
+ .icon-mousepointershubiao:before {
+ content: "\e6df";
+ }
+
+ .icon-ai28:before {
+ content: "\e68e";
+ }
+
+ .icon-baocun:before {
+ content: "\e60b";
+ }
+
+ .icon-Down-Right:before {
+ content: "\e741";
+ }
+
+ .icon-tuozhuai:before {
+ content: "\e636";
+ }
+
+ .icon-circle:before {
+ content: "\e642";
+ }
+
+ .icon-quxian:before {
+ content: "\e637";
+ }
+
+ .icon-square:before {
+ content: "\e676";
+ }
+
+ .icon-shanchu:before {
+ content: "\e696";
+ }
+
+ .icon-jiantou:before {
+ content: "\e7e2";
+ }
+
\ No newline at end of file
diff --git a/src/views/patient/viewvant/index.scss b/src/views/patient/viewvant/index.scss
new file mode 100644
index 0000000..efd0921
--- /dev/null
+++ b/src/views/patient/viewvant/index.scss
@@ -0,0 +1,102 @@
+
+.container_warp {
+ position: relative;
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ .operating {
+ position: absolute;
+ top: 0;
+ z-index: 99;
+ background-color: #ffffff;
+ padding: 20px 10px;
+ box-shadow: 1px 1px 4px 0 #0a0a0a2e;
+ }
+}
+ .btn-group {
+ border-right: 1px solid #efefef;
+ display: inline-block;
+ padding-left: 10px;
+ padding-right: 14px;
+ position: relative;
+ .btn-group_tips {
+ text-align: center;
+ top: 63px;
+ left: 1px;
+ position: absolute;
+ color: #fff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 120px;
+ height: 60px;
+ background: #515a6e;
+ border-radius: 6px;
+ animation: tips 4s;
+ transition: all 1s;
+ &:after {
+ content: "";
+ width: 0;
+ height: 0;
+ position: absolute;
+ top: -5px;
+ left: 46%;
+ border-width: 0 5px 5px;
+ border-style: solid;
+ border-color: transparent transparent #515a6e;
+ }
+ }
+ &:last-of-type {
+ border-right: 0;
+ }
+ .btn {
+ display: inline-block;
+ margin: 2px;
+ width: 30px;
+ height: 30px;
+ line-height: 30px;
+ text-align: center;
+ cursor: pointer;
+ transition: all .4s;
+ border-radius: 6px;
+ border: 1px solid rgba(233, 233, 233, 0);
+ i {
+ font-size: 20px;
+ }
+ }
+ .currentArrow {
+ background: #2d8cf0;
+ color: #fff;
+ }
+}
+ @keyframes tips {
+ 0% {
+ opacity: 0;
+ transform: scale(0);
+ }
+ 10% {
+ opacity: 1;
+ transform: scale(1);
+ }
+ 90% {
+ opacity: 1;
+ transform: scale(1);
+ }
+ 100% {
+ opacity: 0;
+ transform: scale(0);
+ }
+}
+ .rotate-square {
+ display: inline-block;
+ transform: rotate(45deg);
+}
+ .my-snapline {
+ color: #000;
+}
+ .right_drawer {
+ height: 100%;
+ width: 300px;
+ border-left: 1px solid #eee;
+ background: #fff;
+}
\ No newline at end of file
diff --git a/src/views/patient/viewvant/index.vue b/src/views/patient/viewvant/index.vue
index 4be3d7a..17601b5 100644
--- a/src/views/patient/viewvant/index.vue
+++ b/src/views/patient/viewvant/index.vue
@@ -1,17 +1,322 @@
<template>
- <div>瑙嗗浘</div>
+ <div class="container_warp">
+ <div id="containerChart"></div>
+ <RightDrawer
+ class="right_drawer"
+ :drawerType="type"
+ :selectCell="selectCell"
+ :graph="graph"
+ :grid="grid"
+ @deleteNode="deleteNode"
+ ></RightDrawer>
+
+ <div class="operating">
+ <div class="btn-group">
+ <div
+ class="btn"
+ title="鍦嗗舰鑺傜偣"
+ @mousedown="startDrag('Circle', $event)"
+ >
+ <i class="iconfont icon-circle"></i>
+ </div>
+ <div
+ class="btn"
+ title="姝ｆ柟褰㈣妭鐐�"
+ @mousedown="startDrag('Rect', $event)"
+ >
+ <i class="iconfont icon-square"></i>
+ </div>
+ <div class="btn" title="鏉′欢鑺傜偣">
+ <i
+ class="iconfont icon-square rotate-square"
+ @mousedown="startDrag('polygon', $event)"
+ ></i>
+ </div>
+ <div class="btn-group_tips" v-if="showTips">
+ 鎷栨嫿鐢熸垚<br />璧勪骇鎷撴墤鍥惧舰
+ </div>
+ </div>
+ <div class="btn-group">
+ <el-tooltip content="鐩寸嚎绠ご" placement="bottom">
+ <div
+ :class="['btn', currentArrow === 1 ? 'currentArrow' : '']"
+ @click="changeEdgeType('normal')"
+ >
+ <i class="iconfont icon-ai28"></i>
+ </div>
+ </el-tooltip>
+ <el-tooltip content="鏇茬嚎绠ご" placement="bottom">
+ <div
+ :class="['btn', currentArrow === 2 ? 'currentArrow' : '']"
+ @click="changeEdgeType('smooth')"
+ >
+ <i class="iconfont icon-Down-Right"></i>
+ </div>
+ </el-tooltip>
+ <el-tooltip content="鐩磋绠ご" placement="bottom">
+ <div
+ :class="['btn', currentArrow === 3 ? 'currentArrow' : '']"
+ @click="changeEdgeType()"
+ >
+ <i class="iconfont icon-jiantou"></i>
+ </div>
+ </el-tooltip>
+ </div>
+ <div class="btn-group">
+ <el-tooltip content="鍒犻櫎" placement="bottom">
+ <div class="btn" @click="deleteNode()" style="margin-top: 5px">
+ <i class="iconfont icon-shanchu"></i>
+ </div>
+ </el-tooltip>
+ <el-tooltip content="淇濆瓨PNG" placement="bottom">
+ <div class="btn" @click="saveToPNG()" title="淇濆瓨">
+ <i class="iconfont icon-baocun"></i>
+ </div>
+ </el-tooltip>
+ </div>
+ </div>
+ </div>
</template>
<script>
+import "@antv/x6-vue-shape";
+import { Graph, Shape, Addon, FunctionExt, DataUri } from "@antv/x6";
+import RightDrawer from "./RightDrawer";
+import insertCss from "insert-css";
+import { startDragToGraph } from "./Graph/methods.js";
+const data = {};
export default {
data() {
- return {};
+ return {
+ graph: "",
+ value1: true,
+ type: "grid",
+ selectCell: "",
+ connectEdgeType: {
+ //杩炵嚎鏂瑰紡
+ connector: "normal",
+ router: {
+ name: "",
+ },
+ },
+ showTips: false,
+ currentArrow: 1,
+ grid: {
+ // 缃戞牸璁剧疆
+ size: 20, // 缃戞牸澶у皬 10px
+ visible: true, // 娓叉煋缃戞牸鑳屾櫙
+ type: "mesh",
+ args: {
+ color: "#D0D0D0",
+ thickness: 1, // 缃戞牸绾垮搴�/缃戞牸鐐瑰ぇ灏�
+ factor: 10,
+ },
+ },
+ };
},
-
- created() {},
-
- methods: {},
+ components: {
+ RightDrawer,
+ },
+ methods: {
+ initX6() {
+ var _that = this;
+ this.graph = new Graph({
+ container: document.getElementById("containerChart"),
+ width: 1700,
+ height: "100%",
+ grid: _that.grid,
+ resizing: {
+ //璋冩暣鑺傜偣瀹介珮
+ enabled: true,
+ orthogonal: false,
+ },
+ selecting: true, //鍙��
+ snapline: true,
+ interacting: {
+ edgeLabelMovable: true,
+ },
+ connecting: {
+ // 鑺傜偣杩炴帴
+ anchor: "center",
+ connectionPoint: "anchor",
+ allowBlank: false,
+ snap: true,
+ createEdge() {
+ return new Shape.Edge({
+ attrs: {
+ line: {
+ stroke: "#1890ff",
+ strokeWidth: 1,
+ targetMarker: {
+ name: "classic",
+ size: 8,
+ },
+ strokeDasharray: 0, //铏氱嚎
+ style: {
+ animation: "ant-line 30s infinite linear",
+ },
+ },
+ },
+ label: {
+ text: "",
+ },
+ connector: _that.connectEdgeType.connector,
+ router: {
+ name: _that.connectEdgeType.router.name || "",
+ },
+ zIndex: 0,
+ });
+ },
+ },
+ highlighting: {
+ magnetAvailable: {
+ name: "stroke",
+ args: {
+ padding: 4,
+ attrs: {
+ strokeWidth: 4,
+ stroke: "#6a6c8a",
+ },
+ },
+ },
+ },
+ });
+ insertCss(`
+ @keyframes ant-line {
+ to {
+ stroke-dashoffset: -1000
+ }
+ }
+ `);
+ this.graph.fromJSON(data);
+ // 閲嶅仛銆俹ptions 灏嗚浼犻�掑埌浜嬩欢鍥炶皟涓��
+ this.graph.history.redo();
+ // 鎾ら攢銆俹ptions 灏嗚浼犻�掑埌浜嬩欢鍥炶皟涓�
+ this.graph.history.undo();
+ // 榧犳爣绉诲叆绉诲嚭鑺傜偣
+ this.graph.on(
+ "node:mouseenter",
+ FunctionExt.debounce(() => {
+ const container = document.getElementById("containerChart");
+ const ports = container.querySelectorAll(".x6-port-body");
+ this.showPorts(ports, true);
+ }),
+ 500
+ );
+ // 榧犳爣绉诲紑鑺傜偣
+ this.graph.on("node:mouseleave", () => {
+ const container = document.getElementById("containerChart");
+ const ports = container.querySelectorAll(".x6-port-body");
+ this.showPorts(ports, false);
+ });
+ // 鍗曞嚮绌虹櫧
+ this.graph.on("blank:click", () => {
+ this.type = "grid";
+ });
+ // 鍗曞嚮鑺傜偣鎴栬竟
+ this.graph.on("cell:click", ({ cell }) => {
+ this.type = cell.isNode() ? "node" : "edge";
+ });
+ // 閫変腑鐨勮妭鐐�/杈瑰彂鐢熸敼鍙�(澧炲垹)鏃惰Е鍙戙��
+ this.graph.on("selection:changed", (args) => {
+ args.added.forEach((cell) => {
+ this.selectCell = cell;
+ if (cell.isEdge()) {
+ cell.isEdge() && cell.attr("line/strokeDasharray", 5); //铏氱嚎铓傝殎绾�
+ cell.addTools([
+ {
+ name: "vertices",
+ args: {
+ padding: 4,
+ attrs: {
+ strokeWidth: 0.1,
+ stroke: "#2d8cf0",
+ fill: "#ffffff",
+ },
+ },
+ },
+ ]);
+ }
+ });
+ args.removed.forEach((cell) => {
+ cell.isEdge() && cell.attr("line/strokeDasharray", 0); //姝ｅ父绾�
+ cell.removeTools();
+ });
+ });
+ },
+ showPorts(ports, show) {
+ for (let i = 0, len = ports.length; i < len; i = i + 1) {
+ ports[i].style.visibility = show ? "visible" : "hidden";
+ }
+ },
+ // 鎷栨嫿鐢熸垚姝ｆ柟褰㈡垨鑰呭渾褰�
+ startDrag(type, e) {
+ startDragToGraph(this.graph, type, e);
+ },
+ // 鍒犻櫎鑺傜偣
+ deleteNode() {
+ const cell = this.graph.getSelectedCells();
+ this.graph.removeCells(cell);
+ this.type = "grid";
+ },
+ // 淇濆瓨png
+ saveToPNG() {
+ this.$nextTick(() => {
+ this.graph.toPNG(
+ (dataUri) => {
+ // 涓嬭浇
+ DataUri.downloadDataUri(dataUri, "璧勪骇鎷撴墤鍥�.png");
+ },
+ {
+ backgroundColor: "white",
+ padding: {
+ top: 50,
+ right: 50,
+ bottom: 50,
+ left: 50,
+ },
+ quality: 1,
+ copyStyles: false,
+ }
+ );
+ });
+ },
+ // 鏀瑰彉杈瑰舰鐘�
+ changeEdgeType(e) {
+ if (e === "normal") {
+ this.connectEdgeType = {
+ connector: "normal",
+ router: { name: "" },
+ };
+ this.currentArrow = 1;
+ } else if (e === "smooth") {
+ this.connectEdgeType = {
+ connector: "smooth",
+ router: { name: "" },
+ };
+ this.currentArrow = 2;
+ } else {
+ this.connectEdgeType = {
+ connector: "normal",
+ router: { name: "manhattan" },
+ };
+ this.currentArrow = 3;
+ }
+ },
+ },
+ mounted() {
+ this.initX6();
+ setTimeout(() => {
+ this.showTips = true;
+ }, 1000);
+ setTimeout(() => {
+ this.showTips = false;
+ }, 5000);
+ },
};
</script>
-<style lang="scss" scoped></style>
+<style lang="scss">
+@import "./iconfont.css";
+@import "./index.scss";
+</style>
--
Gitblit v1.9.3