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/index.vue | 319 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 312 insertions(+), 7 deletions(-)
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