From 72b04d283d96482aada792938b62abb35e895f3a Mon Sep 17 00:00:00 2001
From: xyc <jc_xiong@hotmail.com>
Date: 星期一, 04 三月 2024 08:50:33 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
web/src/views/modules/taskReliability/RBD-edit-img.vue | 1355 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 1,355 insertions(+), 0 deletions(-)
diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue
new file mode 100644
index 0000000..1991943
--- /dev/null
+++ b/web/src/views/modules/taskReliability/RBD-edit-img.vue
@@ -0,0 +1,1355 @@
+<template>
+ <div>
+ <el-row :gutter="[8,8]">
+ <el-col :span="5">
+ <div :style="'height:' +left_p+'px'">
+ <div class="fa-card-a" style="height: 100%">
+ <div id="stencilImg"></div>
+ </div>
+ </div>
+ </el-col>
+ <el-col :span="19">
+ <div class="fa-card-a">
+ <el-form :inline="true">
+ <el-form-item prop="projectId" style="margin-left:10px;width: 180px;">
+ <zt-select v-model="projectId" :datas="projectList" clearable placeholder="宸ョ▼椤圭洰"
+ @change="projectChange"></zt-select>
+ </el-form-item>
+ <el-form-item>
+ <el-select v-model="diagramId" :disabled="diagramIdDisabled" placeholder="璇烽�夋嫨"
+ @change="diagramIdChanges">
+ <el-option v-for="item in diagramList"
+ :key="item.diagramId"
+ :label="item.diagramName"
+ :value="item.diagramId">
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="saveDiagram()">淇濆瓨</el-button>
+ <!-- <zt-button type="primary" v-show="pageCode === 'wlt_sp' && flowInfo.myStatus ===1" @click="reject()">椹冲洖</zt-button>-->
+ <el-button v-show="pageCode === 'wlt_pz' && flowInfo.myStatus ===1" type="warning" @click="finish">瀹屾垚
+ </el-button>
+ </el-form-item>
+ <el-form-item>
+ <el-tooltip class="item" effect="dark" content="宸﹀榻�" placement="left">
+ <el-button class="" style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF;"
+ @click="leftAlign()"><i style="font-size: 2rem;"
+ class="wt-iconfont icon-zuoduiqi"></i></el-button>
+ </el-tooltip>
+ </el-form-item>
+ <el-form-item>
+ <el-tooltip class="item" effect="dark" content="灞呬腑瀵归綈" placement="left">
+ <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
+ @click="centerAlign()"><i style="font-size: 2rem;"
+ class="wt-iconfont icon-chuizhiduiqi"></i></el-button>
+ </el-tooltip>
+ </el-form-item>
+ <el-form-item>
+ <el-tooltip class="item" effect="dark" content="鍙冲榻�" placement="left">
+ <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
+ @click="rightAlign()"><i style="font-size: 2rem;"
+ class="wt-iconfont icon-youduiqi"></i></el-button>
+ </el-tooltip>
+ </el-form-item>
+ <el-form-item>
+ <el-tooltip class="item" effect="dark" content="椤堕儴瀵归綈" placement="left">
+ <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
+ @click="topAlign()"><i style="font-size: 2rem;"
+ class="wt-iconfont icon-dingduiqi"></i></el-button>
+ </el-tooltip>
+ </el-form-item>
+ <el-form-item>
+ <el-tooltip class="item" effect="dark" content="姘村钩瀵归綈" placement="left">
+ <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
+ @click="shuipingAlign()"><i style="font-size: 2rem;"
+ class="wt-iconfont icon-shuipingduiqi"></i></el-button>
+ </el-tooltip>
+ </el-form-item>
+ <el-form-item>
+ <el-tooltip class="item" effect="dark" content="搴曢儴瀵归綈" placement="left">
+ <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
+ @click="bottomAlign()"><i style="font-size: 2rem;"
+ class="wt-iconfont icon-diduiqi"></i></el-button>
+ </el-tooltip>
+ </el-form-item>
+ </el-form>
+ <div id="containerImg" style="border: 1px solid #EAEBEE;border-radius: 6px;
+ box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);">
+ </div>
+ <config-node v-show="type === 'node'" :id="id" :diagramId="diagramId" :globalGridAttr="globalGridAttr"
+ :graph="graph"
+ :projectId="projectId"
+ :shape="shape"/>
+ <config-edge v-show="type === 'edge'" :id="id" :globalGridAttr="globalGridAttr" :graph="graph"/>
+ </div>
+ </el-col>
+ </el-row>
+ </div>
+</template>
+
+<script>
+ import {Graph, Shape, Addon, Cell} from '@antv/x6'
+ import ConfigNode from './ConfigNode/index.vue'
+ import ConfigEdge from './ConfigEdge/index.vue'
+ import {removeCurrentTabHandle} from '@/commonJS/common'
+ import {setHartBeat} from '@/commonJS/common';
+
+ export default {
+ name: 'RBD-edit-img',
+ /*props: {
+
+ },*/
+ props: {
+ projectId: {
+ type: String
+ },
+ diagarmId: {
+ type: String
+ },
+ pageCode: {
+ default: 'wlt_pz'
+ },
+ flowCode: {
+ type: String,
+ default: 'wltFlow'
+ },
+ },
+ components: {
+ ConfigNode,
+ ConfigEdge
+ },
+ data() {
+ return {
+ timer: null,
+ imgsList:[
+ {imgPath:'start',imgName:'start',nodeType:'start',imgWidth:60,imgHeight:60,imgId:'1',data:{}},
+ {imgPath:'end',imgName:'end',nodeType:'end',imgWidth:60,imgHeight:60,imgId:'2',data:{}},
+ {imgPath:'parallelLeft',imgName:'parallelLeft',nodeType:'parallelLeft',imgWidth:60,imgHeight:60,imgId:'3',data:{}},
+ {imgPath:'parallelRight',imgName:'parallelRight',nodeType:'parallelRight',imgWidth:60,imgHeight:60,imgId:'4',data:{}},
+ {imgPath:'switchRight',imgName:'switchRight',nodeType:'switchRight',imgWidth:60,imgHeight:60,imgId:'5',data:{}},
+ {imgPath:'voteRight',imgName:'voteRight',nodeType:'voteRight',imgWidth:60,imgHeight:60,imgId:'6',data:{}},
+ ],
+ imgsList2:[
+ {imgPath:'logo',imgName:'logo',nodeType:'node',imgWidth:60,imgHeight:60,imgId:'100',data:{dataId:'123456',nodeTypeExt:'aaa'}},
+ ],
+ first: true,
+ shape: '',
+ projectList: [],
+ diagramList: [],
+ diagramId: '',
+ projectId: '',
+ diagramJson: '',
+ diagramIdDisabled: false,
+ dataForm: {
+ id: null,
+ projectId: null,
+ diagramId: null,
+ content: null,
+ publishContent: null,
+ hasPublish: 0,
+ modelId: 1,
+ },
+ flowInfo: {
+ bizId: '',
+ bizGroupId: '',
+ flowCode: '',
+ flowStepMark: '',
+ status: 0,
+ myStatus: 0
+ },
+ // emptyJson: {
+ // // 鑺傜偣
+ // nodes: [
+ // {
+ // id: 'node1', // String锛屽彲閫夛紝鑺傜偣鐨勫敮涓�鏍囪瘑
+ // width: 500, // Number锛屽彲閫夛紝鑺傜偣澶у皬鐨� width 鍊�
+ // height: 300, // Number锛屽彲閫夛紝鑺傜偣澶у皬鐨� height 鍊�
+ // label: '璇ラ」鐩繕鏈厤缃巶瀹剁綉缁滃浘',
+ // attrs: {
+ // body: {
+ // strokeWidth: 0
+ // },
+ // }
+ // // text: {
+ // // text: '璇ラ」鐩繕鏈紪鍒剁綉缁滃浘',
+ // // // fontSize: 56,
+ // // fill: 'rgba(0,0,0,0.7)'
+ // // },
+ // // },
+ // }
+ // ],
+ // },
+ type: '',
+ id: '',
+ graph: null,
+ globalGridAttr: {
+ type: 'mesh',
+ size: 10,
+ color: '#e5e5e5',
+ thickness: 1,
+ colorSecond: '#d0d0d0',
+ thicknessSecond: 1,
+ factor: 4,
+ bgColor: '#e5e5e5',
+ showImage: true,
+ repeat: 'watermark',
+ position: 'center',
+ bgSize: JSON.stringify({width: 150, height: 150}),
+ opacity: 0.1,
+
+ stroke: '#5F95FF',
+ strokeWidth: 1,
+ connector: 'normal',
+ label: '',
+ nodeStroke: '#5F95FF',
+ nodeStrokeWidth: 1,
+ nodeFill: '#ffffff',
+ nodeFontSize: 12,
+ nodeColor: '#080808',
+ nodeText: '',
+ nodeDate: '',
+ nodeUsers: '',
+ nodeDataDate: '',
+ nodeDataText: '',
+ dataId: '',
+ inspectName: '',
+ distance: 0.5,
+ angle: 0,
+ },
+ isReady: false,
+ curCel: Cell,
+ left_p: document.documentElement.clientHeight-220,
+ ports: {
+ groups: {
+ top: {
+ position: 'top',
+ attrs: {
+ circle: {
+ r: 4,
+ magnet: true,
+ stroke: '#5F95FF',
+ strokeWidth: 1,
+ fill: '#fff',
+ style: {
+ visibility: 'hidden',
+ },
+ },
+ },
+ },
+ right: {
+ position: 'right',
+ attrs: {
+ circle: {
+ r: 4,
+ magnet: true,
+ stroke: '#5F95FF',
+ strokeWidth: 1,
+ fill: '#fff',
+ style: {
+ visibility: 'hidden',
+ },
+ },
+ },
+ },
+ bottom: {
+ position: 'bottom',
+ attrs: {
+ circle: {
+ r: 4,
+ magnet: true,
+ stroke: '#5F95FF',
+ strokeWidth: 1,
+ fill: '#fff',
+ style: {
+ visibility: 'hidden',
+ },
+ },
+ },
+ },
+ left: {
+ position: 'left',
+ attrs: {
+ circle: {
+ r: 4,
+ magnet: true,
+ stroke: '#5F95FF',
+ strokeWidth: 1,
+ fill: '#fff',
+ style: {
+ visibility: 'hidden',
+ },
+ },
+ },
+ },
+ },
+ items: [
+ {
+ group: 'top',
+ },
+ {
+ group: 'right',
+ },
+ {
+ group: 'bottom',
+ },
+ {
+ group: 'left',
+ },
+ ],
+ }
+ }
+ },
+ watch: {
+ '$route.params.configId'() {
+ // alert('$route.params.projectId change')
+ this.projectId = this.$route.params.projectId
+ //this.diagramId = this.$route.params.diagramId
+ console.log(this.$route.params.projectId, 'this.$route.params.projectId')
+ console.log(this.$route.params.diagramId, 'this.$route.params.diagramId')
+ this.projectChange2(this.$route.params.diagramId)
+ }
+ },
+ mounted() {
+ this.getProject()
+ this.init()
+ this.type = 'grid'
+ },
+ methods: {
+ async finish() {
+ if (await this.$tip.confirm('纭畾瑕佽繘琛屾彁浜ゆ搷绾靛悧?')) {
+ let submitForm = {
+ params: {
+ wfIdCode: 'wltFlow',
+ bizId: this.dataForm.projectId,
+ stepIdMark: this.pageCode
+ }
+ }
+ let res = await this.$http.get('/wf/approvePass', submitForm)
+ if (res.success) {
+ await this.$alert('鎻愪氦鎴愬姛', '鍙嬫儏鎻愮ず')
+ removeCurrentTabHandle(this)
+ this.$EventBus.$emit('taskRefeshEvent', '缃戠粶鍥�')
+ }
+ }
+ },
+ async getProject() {
+ //let res = await this.$http.get(`/maintain/projectNetworkDiagram/getProjectList`)
+ let res = await this.$http.get(`/homeFunction/projectSelect`)
+
+ this.projectList = res.data
+ if (this.$store.state.user.isAdmin || this.$store.state.user.isAssistant) {
+ this.projectList.push({id: '10000', name: '鏍峰紡妯℃澘'})
+ }
+ if (this.$route.params.projectId) {
+ this.projectId = this.$route.params.projectId
+ this.diagramId = this.$route.params.diagramId
+ } else {
+ if (this.projectList.length > 0) {
+ this.projectId = this.projectList[0].id
+ this.diagramId = this.projectId
+ console.log(this.diagramId, '123456789')
+ }
+ }
+ await this.projectChange2(this.diagramId)
+ },
+
+ projectChange() {
+ // alert(555)
+ this.projectChange2(this.projectId)
+ },
+
+ async projectChange2(diagramId) {
+ // alert(1)
+ let params = {
+ wfIdCodes: 'wltFlow',
+ bizId: this.projectId,
+ stepIdMark: 'wlt_pz'
+ }
+ this.$http.get(`/wf/getFlowStepStatus`, {params: params}).then(res => {
+ console.log(res, 'getFlowStepStatus res')
+ if (res.data) {
+ this.flowInfo = res.data
+ }
+ })
+
+ this.diagramName = ''
+ this.dataForm.projectId = this.projectId
+ this.dataForm.diagramId = diagramId
+ this.diagramId = diagramId
+ if (!this.$store.state.user.isZcRole && !this.$store.state.user.isAdmin) {
+ this.diagramIdDisabled = true
+ console.log(this.$store.state.user.deptId, 'this.$store.state.user.deptId')
+ this.diagramId = this.$store.state.user.deptId
+ this.dataForm.diagramId = this.diagramId
+ } else {
+ this.diagramIdDisabled = false
+ }
+ //this.getDiagramIdList(this.projectId)
+ let res = await this.$http.get(`/maintain/projectNetworkDiagram/getDiagramCjList?projectId=${this.projectId}`)
+ this.diagramList = res.data
+ console.log(this.diagramList, 'this.diagramId asdfgh')
+ if (this.diagramList.length > 0) {
+ this.diagramId = this.diagramList[0].diagramId
+ console.log(this.dataForm.diagramId, 'this.dataForm.diagramId.........................')
+ }
+ await this.getDiagram()
+ },
+
+ diagramIdChanges() {
+ this.dataForm.diagramId = this.diagramId
+ // this.diagramIdChange(this.diagramId)
+ this.getDiagram()
+ },
+ async getDiagram() {
+ let includeCj = false
+ console.log(this.diagramList, 'this.diagramList')
+ console.log(this.diagramId, 'this.diagramId')
+ for (let val of this.diagramList) {
+ if (val.diagramId == this.diagramId) {
+ includeCj = true
+ break
+ }
+ }
+ console.log(includeCj, 'includeCj')
+ if (includeCj) {
+ // alert(3)
+ let params = {
+ projectId: this.dataForm.projectId,
+ diagramId: this.dataForm.diagramId,
+ isShow: 'edit'
+ }
+ console.log(params, 'params')
+ let res = await this.$http.get(`/maintain/projectNetworkDiagram/getDiagram`, {params: params})
+ if (res.data !== null && res.data.content != null) {
+ this.dataForm = res.data
+ this.diagramJson = JSON.parse(this.dataForm.content)
+ // console.log(this.dataForm.content,'this.Diagram content')
+ console.log(this.diagramJson, 'this.Diagram json')
+ this.graph.fromJSON(this.diagramJson)
+ this.graph.centerContent()
+ this.graph.zoomToFit()
+ } else {
+ this.dataForm.id = null
+ // this.graph.fromJSON(this.emptyJson)
+ this.graph.centerContent()
+ this.graph.zoomToFit()
+ // this.graph.freeze()
+ }
+ } else {
+ this.dataForm.id = null
+ console.log(this.data, 'this.data asdfg')
+ // this.graph.fromJSON(this.emptyJson)
+ this.graph.positionContent('left',{ padding: { left: 200 }})
+ // this.graph.centerContent()
+ // this.graph.zoomToFit()
+ }
+ },
+ init() {
+ this.timer = setHartBeat(10, 240);
+
+ console.log(document.documentElement.clientWidth, 'document.documentElement.clientWidth')
+ console.log(document.documentElement.clientHeight, 'document.documentElement.clientHeight')
+ this.graph = new Graph({
+ container: document.getElementById('containerImg'),
+ width: document.documentElement.clientWidth,
+ height: document.documentElement.clientHeight - 220,
+ // async: true,
+ grid: {
+ visible: true,
+ },
+ onToolItemCreated({tool}) {
+ const handle = tool
+ const options = handle.options
+ if (options && options.index % 2 === 1) {
+ tool.setAttrs({fill: 'red'})
+ }
+ },
+ autoResize: true,
+ history: true,
+ // panning: {
+ // enabled: true,
+ // },
+ scroller: {
+ enabled: true,
+ pageVisible: true,
+ pageBreak: true,
+ pannable: true,
+ },
+ mousewheel: {
+ enabled: true,
+ zoomAtMousePosition: true,
+ modifiers: 'ctrl',
+ minScale: 0.1,
+ maxScale: 10,
+ },
+ connecting: {
+ router: {
+ name: 'normal',
+ // args: {
+ // padding: 1,
+ // },
+ },
+ connector: {
+ name: 'rounded',
+ args: {
+ radius: 8,
+ },
+ },
+ // anchor: 'center',
+ connectionPoint: 'anchor',
+ allowBlank: false,
+ snap: {
+ radius: 20,
+ },
+ createEdge() {
+ return new Shape.Edge({
+ attrs: {
+ line: {
+ stroke: '#A2B1C3',
+ strokeWidth: 2,
+ targetMarker: 'classic'
+ }
+ },
+ labels: [{
+ attrs: {
+ body: {
+ stroke: '#5F95FF',
+ },
+ text: {
+ text: ''
+ }
+ },
+ position: {
+ distance: 0.5,
+ angle: 180,
+ options: {
+ keepGradient: true,
+ ensureLegibility: true
+ }
+ }
+ }],
+ zIndex: 0,
+ })
+ },
+ validateConnection({targetMagnet}) {
+ return !!targetMagnet
+ },
+ },
+ highlighting: {
+ magnetAdsorbed: {
+ name: 'stroke',
+ args: {
+ attrs: {
+ fill: '#5F95FF',
+ stroke: '#5F95FF',
+ },
+ },
+ },
+ },
+ resizing: {
+ enabled: true,
+ restricted: true
+ },
+ rotating: true,
+ selecting: {
+ enabled: true,
+ rubberband: true,
+ rubberEdge: true,
+ showNodeSelectionBox: true,
+ },
+ snapline: true,
+ keyboard: true,
+ clipboard: true,
+ })
+ this.graph.centerContent()
+ const stencil = new Addon.Stencil({
+ title: '',
+ target: this.graph,
+ stencilGraphWidth: 230,
+ stencilGraphHeight: 300,
+ collapsable: false,
+ groups: [
+ {
+ title: '杩愮畻绗﹀彿',
+ name: 'group1',
+ collapsable: false
+ },
+ {
+ title: '璁惧鑺傜偣',
+ name: 'group2',
+ collapsable: false
+ }
+ ],
+ layoutOptions: {
+ columns: 2,
+ columnWidth: 110,
+ // rowHeight: 75,
+ },
+ })
+ document.getElementById('stencilImg').appendChild(stencil.container)
+
+ Graph.registerNode(
+ 'custom-rect',
+ {
+ inherit: 'rect',
+ width: 86,
+ height: 26,
+ zIndex: 10,
+ data: {
+ dataId: '',
+ finishDate: '',
+ inspectName: ''
+ },
+ attrs: {
+ body: {
+ strokeWidth: 1,
+ stroke: 'none',
+ fill: 'none',
+ },
+ text: {
+ // fontFamily: '浠垮畫',
+ fontSize: 20,
+ fill: '#000',
+ },
+ label: {
+ refX: 0,
+ refY: 0.5,
+ textAnchor: 'start',
+ textVerticalAnchor: 'middle',
+ textWrap: {
+ text: '鏂囧瓧妯℃澘',
+ width: -10, // 瀹藉害鍑忓皯 10px
+ ellipsis: false, // 鏂囨湰瓒呭嚭鏄剧ず鑼冨洿鏃讹紝鑷姩娣诲姞鐪佺暐鍙�
+ breakWord: true, // 鏄惁鎴柇鍗曡瘝
+ }
+ },
+ },
+ ports: {...this.ports},
+ },
+ true,
+ )
+
+ Graph.registerNode(
+ 'custom-polygon',
+ {
+ inherit: 'polygon',
+ width: 86,
+ height: 56,
+ attrs: {
+ body: {
+ strokeWidth: 1,
+ stroke: '#5F95FF',
+ fill: '#EFF4FF',
+ },
+ // title:{
+ // text:'',
+ // refX: 40,
+ // refY: 38,
+ // fontSize: 20,
+ // fill: '#262626',
+ // 'text-anchor': 'start',
+ // },
+ text: {
+ // refX: 40,
+ // refY: 20,
+ fontSize: 20,
+ fill: '#262626',
+ // 'text-anchor': 'start',
+ },
+ },
+ // markup: [
+ // {
+ // tagName: 'polygon',
+ // selector: 'body',
+ // },
+ // {
+ // tagName: 'text',
+ // selector: 'title',
+ // },
+ // {
+ // tagName: 'text',
+ // selector: 'text',
+ // },
+ // ],
+ ports: {
+ ...this.ports
+ // items: [
+ // {
+ // group: 'top',
+ // },
+ // {
+ // group: 'bottom',
+ // },
+ // ],
+ },
+ },
+ true,
+ )
+ //
+ Graph.registerNode(
+ 'custom-circle',
+ {
+ inherit: 'ellipse',
+ width: 120,
+ height: 120,
+ data: {
+ dataId: '',
+ finishDate: ''
+ },
+ attrs: {
+ body: {
+ strokeWidth: 1,
+ stroke: '#5F95FF',
+ fill: '#EFF4FF',
+ },
+ //鏃ユ湡
+ title: {
+ text: '',
+ fontSize: 12,
+ fill: '#262626',
+ refX: 0.5,
+ refY: '100%',
+ refY2: -10,
+ textAnchor: 'middle',
+ textVerticalAnchor: 'bottom',
+ },
+ // 鍚嶇О
+ text: {
+ // fontFamily: '浠垮畫',
+ fontSize: 20,
+ fill: '#262626',
+ textWrap: {
+ width: 80, // 瀹藉害涓� 80px鎹㈣
+ ellipsis: false, // 鏂囨湰瓒呭嚭鏄剧ず鑼冨洿鏃讹紝鑷姩娣诲姞鐪佺暐鍙�
+ breakWord: true, // 鏄惁鎴柇鍗曡瘝
+ }
+ },
+ },
+ markup: [
+ {
+ tagName: 'ellipse',
+ selector: 'body',
+ },
+ {
+ tagName: 'text',
+ selector: 'title',
+ },
+ {
+ tagName: 'text',
+ selector: 'text',
+ },
+ ],
+ ports: {...this.ports},
+ },
+ true,
+ )
+ Graph.registerNode(
+ 'custom-circle1',
+ {
+ inherit: 'ellipse',
+ width: 65,
+ height: 65,
+ data: {
+ dataId: '',
+ finishDate: ''
+ },
+ attrs: {
+ body: {
+ strokeWidth: 1,
+ stroke: '#5F95FF',
+ fill: '#EFF4FF',
+ },
+ //鏃ユ湡
+ text: {
+ // fontFamily: '浠垮畫',
+ fontSize: 12,
+ text: '鏃ユ湡鑺傜偣',
+ fill: '#262626',
+ },
+ },
+ ports: {...this.ports},
+ },
+ true,
+ )
+ Graph.registerNode(
+ 'custom-text',
+ {
+ inherit: 'text-block',
+ width: 86,
+ height: 56,
+ attrs: {
+ body: {
+ strokeWidth: 1,
+ stroke: '#5F95FF',
+ fill: '#EFF4FF',
+ },
+ text: {
+ text: '涓撲笟',
+ fontSize: 20,
+ style: {
+ color: this.globalGridAttr.nodeColor
+ },
+ refX: '0',
+ refY: -0.5,
+ refY2: 1,
+ textAnchor: 'middle',
+ textVerticalAnchor: 'middle',
+ },
+ },
+ markup: [
+ {
+ tagName: 'rect',
+ selector: 'body',
+ },
+ {
+ tagName: 'text',
+ selector: 'text',
+ },
+ ],
+ ports: {...this.ports},
+ },
+ true,
+ )
+ Graph.registerNode(
+ 'rectangle',
+ {
+ width: 86,
+ height: 56,
+ attrs: {
+ body: {
+ fill: '#FFF',
+ stroke: '#000',
+ strokeWidth: 1,
+ },
+ icon: {
+ class: 'el-icon-refresh', // Element UI鍥炬爣鐨刢lass鍚嶇О
+ 'xlink:href': '', // 濡傛灉闇�瑕佷娇鐢⊿VG鍥炬爣锛岃璁剧疆xlink:href灞炴�ф潵寮曞叆SVG鏂囦欢
+ refX: '50%',
+ refY: '50%',
+ yAlignment: 'middle',
+ xAlignment: 'middle',
+ },
+ },
+ markup: [
+ {
+ tagName: 'rect',
+ selector: 'body',
+ },
+ {
+ tagName: 'i',
+ selector: 'icon',
+ },
+ ],
+ ports: {...this.ports},
+ },
+ true
+ )
+ // 涓�绾х綉缁滃浘鐨勬棩鏈熸枃瀛楄妭鐐�
+ const r5 = this.graph.createNode({
+ shape: 'custom-circle',
+ data: {
+ dataId: '',
+ finishDate: '',
+ inspectName: ''
+ },
+ label: '闃舵',
+ })
+
+ // 浜岀骇缃戠粶鍥炬棩鏈熻妭鐐�
+ const r6 = this.graph.createNode({
+ shape: 'custom-circle1',
+ data: {
+ dataId: '',
+ finishDate: '',
+ inspectName: ''
+ },
+ })
+ // 浜岀骇缃戠粶鍥炬枃瀛楄妭鐐�
+ const r9 = this.graph.createNode({
+ shape: 'custom-rect'
+ })
+ const imageNodes = this.imgsList.map((item) =>
+ this.graph.createNode({
+ shape: 'image',
+ imageUrl: require('/public/modelImg/'+item.imgPath+'.png'),
+ width: item.imgWidth,
+ height: item.imgHeight,
+ x: item.imgWidth,
+ y: item.imgHeight,
+ data: {
+ dataId: '',
+ nodeType: item.nodeType,
+ nodeTypeExt: ''
+ },
+ attrs: {
+ text:{
+ text: item.imgName,
+ fontSize: 14,
+ style: {
+ color: this.globalGridAttr.nodeColor
+ },
+ refX: 0.5,
+ refY: '100%',
+ refY2: 4,
+ textAnchor: 'middle',
+ textVerticalAnchor: 'top',
+ },
+ },
+ ports: {...this.ports},
+ }),
+ )
+ const imageNodes2 = this.imgsList2.map((item) =>
+ this.graph.createNode({
+ shape: 'image',
+ imageUrl: require('/public/modelImg/'+item.imgPath+'.png'),
+ width:item.imgWidth,
+ height:item.imgHeight,
+ x:item.imgWidth,
+ y:item.imgHeight,
+ data: {
+ dataId: item.data.dataId,
+ nodeType: item.nodeType,
+ nodeTypeExt: item.data.nodeTypeExt
+ },
+ attrs: {
+ text:{
+ text: item.imgName,
+ fontSize: 14,
+ style: {
+ color: this.globalGridAttr.nodeColor
+ },
+ refX: 0.5,
+ refY: '100%',
+ refY2: 4,
+ textAnchor: 'middle',
+ textVerticalAnchor: 'top',
+ },
+ },
+ ports: {...this.ports},
+ }),
+ )
+ // r1.push(r5,r6,r9)
+ console.log(imageNodes,'group1')
+ stencil.load(imageNodes, 'group1')
+ stencil.load(imageNodes2, 'group2')
+
+ this.graph.bindKey(['meta+c', 'ctrl+c'], () => {
+ const cells = this.graph.getSelectedCells()
+ if (cells.length) {
+ this.graph.copy(cells)
+ }
+ return false
+ })
+
+ this.graph.bindKey(['meta+x', 'ctrl+x'], () => {
+ const cells = this.graph.getSelectedCells()
+ if (cells.length) {
+ this.graph.cut(cells)
+ }
+ return false
+ })
+ this.graph.bindKey(['meta+v', 'ctrl+v'], () => {
+ if (!this.graph.isClipboardEmpty()) {
+ const cells = this.graph.paste({offset: 32})
+ this.graph.cleanSelection()
+ this.graph.select(cells)
+ }
+ return false
+ })
+//undo redo
+ this.graph.bindKey(['meta+z', 'ctrl+z'], () => {
+ if (this.graph.history.canUndo()) {
+ this.graph.history.undo()
+ }
+ return false
+ })
+
+ this.graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
+ if (this.graph.history.canRedo()) {
+ this.graph.history.redo()
+ }
+ return false
+ })
+
+// select all
+ this.graph.bindKey(['meta+a', 'ctrl+a'], () => {
+ const nodes = this.graph.getNodes()
+ if (nodes) {
+ this.graph.select(nodes)
+ }
+ })
+//delete
+ this.graph.bindKey('delete', () => {
+ const cells = this.graph.getSelectedCells()
+ if (cells.length) {
+ this.$confirm('鏄惁鍒犻櫎璇ヨ妭鐐�?', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }).then(() => {
+ this.$message({
+ type: 'success',
+ message: '鍒犻櫎鎴愬姛!'
+ })
+ this.graph.removeCells(cells)
+ }).catch(() => {
+ this.$message({
+ type: 'info',
+ message: '宸插彇娑堝垹闄�'
+ })
+ })
+ }
+ })
+// zoom
+ this.graph.bindKey(['ctrl+1', 'meta+1'], () => {
+ const zoom = this.graph.zoom()
+ if (zoom < 1.5) {
+ this.graph.zoom(0.1)
+ }
+ })
+
+ this.graph.bindKey(['ctrl+2', 'meta+2'], () => {
+ const zoom = this.graph.zoom()
+ if (zoom > 0.5) {
+ this.graph.zoom(-0.1)
+ }
+ })
+
+ this.graph.on('blank:click', ({cell}) => {
+ this.reset()
+ // this.type.value = "grid"
+ this.type = 'grid'
+ // this.id = cell.id
+ })
+
+ this.graph.on('cell:click', ({cell}) => {
+ // this.type.value = cell.isNode() ? "node" : "edge"
+ this.type = cell.isNode() ? 'node' : 'edge'
+ this.shape = cell.shape
+ this.id = cell.id
+ console.log(this.shape, 'this.shape')
+ // this.nodeOpt(this.id, this.globalGridAttr)
+ })
+ //鍗曞嚮杈硅妭鐐�
+ this.graph.on('edge:click', ({edge}) => {
+ this.reset()
+ edge.attr('line/stroke', 'orange')
+ edge.prop('labels/0', {
+ attrs: {
+ body: {
+ stroke: 'orange',
+ },
+ },
+
+ })
+ })
+ // 鍗曞嚮node鑺傜偣
+ this.graph.on('node:click', ({node}) => {
+ this.reset()
+ node.attr('line/stroke', 'orange')
+ node.prop('labels/0', {
+ attrs: {
+ body: {
+ stroke: 'orange',
+ },
+ },
+ })
+ })
+ // 鎺у埗杩炴帴妗╂樉绀�/闅愯棌
+ this.graph.on('node:delete', ({view, e}) => {
+ e.stopPropagation()
+ view.cell.remove()
+ })
+
+ this.graph.on('node:customevent', ({name, view, e}) => {
+ if (name === 'node:delete') {
+ e.stopPropagation()
+ view.cell.remove()
+ }
+ })
+ // 鍙屽嚮缂栬緫
+ this.graph.on('cell:dblclick', ({cell, e}) => {
+ const isNode = cell.isNode()
+ const name = cell.isNode() ? 'node-editor' : 'edge-editor'
+ cell.removeTool(name)
+ cell.addTools({
+ name,
+ args: {
+ event: e,
+ attrs: {
+ backgroundColor: isNode ? '#EFF4FF' : '#FFF',
+ text: {
+ fontSize: 16,
+ fill: '#262626',
+ },
+ },
+ },
+ })
+ })
+
+ this.graph.on('node:mouseenter', ({node}) => {
+ const container = document.getElementById('containerImg')
+ const ports = container.querySelectorAll(
+ '.x6-port-body',
+ )
+ this.showPorts(ports, true)
+ })
+
+ this.graph.on('node:mouseleave', ({node}) => {
+ // if (node.hasTool('button-remove')) {
+ // node.removeTool('button-remove')
+ // }
+ const container = document.getElementById('containerImg')
+ const ports = container.querySelectorAll(
+ '.x6-port-body',
+ )
+ this.showPorts(ports, false)
+ })
+
+ this.graph.on('edge:mouseenter', ({cell, view}) => {
+ // alert(123)
+ cell.addTools([
+ {
+ name: 'source-arrowhead',
+ },
+ {
+ name: 'target-arrowhead',
+ args: {
+ attrs: {
+ fill: 'red',
+ },
+ },
+ },
+ ])
+ cell.addTools(
+ [
+ {
+ name: 'segments',
+ args: {snapRadius: 20, attrs: {fill: '#444'}}
+ }
+ ]
+ )
+ })
+
+ this.graph.on('edge:mouseleave', ({cell}) => {
+ cell.removeTools()
+ })
+ },
+ showPorts(ports, show) {
+ for (let i = 0, len = ports.length; i < len; i = i + 1) {
+ ports[i].style.visibility = show ? 'visible' : 'hidden'
+ }
+ },
+ reset() {
+ this.graph.drawBackground({color: '#fff'})
+ const nodes = this.graph.getNodes()
+ const edges = this.graph.getEdges()
+ nodes.forEach((node) => {
+ node.attr('body/stroke', '#5F95FF')
+ })
+ edges.forEach((edge) => {
+ edge.attr('line/stroke', '#5F95FF')
+ edge.prop('labels/0', {
+ attrs: {
+ body: {
+ stroke: '#5F95FF',
+ },
+ },
+ })
+ })
+ },
+ // nodeOpt(id, globalGridAttr) {
+ // this.curCel = null
+ // if (id) {
+ // let cell = this.graph.getCellById(id)
+ // console.log(cell, 'let cell 123456')
+ // if (!cell || !cell.isNode()) {
+ // return
+ // }
+ // this.curCel = cell
+ // globalGridAttr.nodeStroke = cell.attr('body/stroke')
+ // globalGridAttr.nodeStrokeWidth = cell.attr('body/strokeWidth')
+ // globalGridAttr.nodeFill = cell.attr('body/fill')
+ // globalGridAttr.nodeFontSize = cell.attr('text/fontSize')
+ // globalGridAttr.nodeFontSize = cell.attr('title/fontSize')
+ // globalGridAttr.nodeColor = cell.attr('text/fill')
+ // globalGridAttr.nodeColor = cell.attr('title/fill')
+ // globalGridAttr.nodeColor = cell.attr('text/style/color')
+ // globalGridAttr.nodeColor = cell.attr('title/style/color')
+ // globalGridAttr.nodeUsers = cell.attr('approve/users')
+ // globalGridAttr.nodeText = cell.attr('text/text')
+ // globalGridAttr.nodeDate = cell.attr('title/text')
+ // // let data={
+ // // dataId:this.projectId,
+ // // finishDate: globalGridAttr.nodeDate,
+ // // }
+ // cell.getData()
+ // console.log( cell.getData(),' cell.getData() 909')
+ // }
+ // return this.curCel;
+ // },
+ async saveDiagram() {
+ console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
+ this.dataForm.content = JSON.stringify(this.graph.toJSON())
+ console.log(this.dataForm, 'dataFrom')
+ await this.$http[this.dataForm.id === null ? 'post' : 'put'](`/taskReliability/ModelLine/`, this.dataForm).then(async res => {
+ if (res.msg === 'success') {
+ this.$alert('淇濆瓨鎴愬姛', '鎻愮ず', {
+ confirmButtonText: '纭畾'
+ })
+ }
+ })
+ },
+ // AlignmentsChanges(val){
+ // console.log(val,'align.value')
+ // if(val ==='閫夐」1'){
+ // console.log(val,'align.value')
+ // this.leftAlign()
+ // }
+ // if(val ==='閫夐」2') {
+ // console.log('鍙冲榻�','align.value')
+ // this.rightAlign()
+ // }
+ // },
+ leftAlign() {
+ const NODE = this.graph.getSelectedCells()
+ let leftX = null
+ for (let a of NODE) {
+ if (leftX == null || a.getBBox().x < leftX) {
+ leftX = a.getBBox().x
+ }
+ }
+ for (let a of NODE) {
+ let y = a.getBBox().y
+ a.position(leftX, y)
+ // console.log(leftX, ':', y, ' x:y')
+ }
+ },
+ topAlign() {
+ const NODE = this.graph.getSelectedCells()
+ let topY = null
+ for (let a of NODE) {
+ console.log(a.getBBox(), 'a.getBBox()')
+ if (topY == null || a.getBBox().y < topY) {
+ topY = a.getBBox().y
+ }
+ }
+ for (let a of NODE) {
+ let x = a.getBBox().x
+ a.position(x, topY)
+ // console.log(leftX, ':', y, ' x:y')
+ }
+ },
+ centerAlign() {
+ const NODE = this.graph.getSelectedCells()
+ let rightX = null
+ let leftX = null
+ for (let a of NODE) {
+ if (leftX == null || a.getBBox().x < leftX) {
+ leftX = a.getBBox().x
+ }
+ }
+ for (let a of NODE) {
+ if (rightX == null || a.getBBox().x + a.getBBox().width > rightX) {
+ rightX = a.getBBox().x + a.getBBox().width
+ }
+ }
+
+ let centerX = leftX + (rightX - leftX) / 2
+
+ for (let a of NODE) {
+ let y = a.getBBox().y
+ a.position(centerX - a.getBBox().width / 2, y)
+ // console.log(leftX, ':', y, ' x:y')
+ }
+ },
+ shuipingAlign() {
+ const NODE = this.graph.getSelectedCells()
+ let bottomY = null
+ let topY = null
+ for (let a of NODE) {
+ if (topY == null || a.getBBox().y || 0 < topY) {
+ topY = a.getBBox().y
+ }
+ }
+ for (let a of NODE) {
+ if (bottomY == null || a.getBBox().y + a.getBBox().height > bottomY) {
+ bottomY = a.getBBox().y + a.getBBox().height
+ }
+ }
+
+ let centerY = topY + (bottomY - topY) / 2
+ for (let a of NODE) {
+ let x = a.getBBox().x
+ let centerHei = a.getBBox().height / 2
+ a.position(x, centerY - centerHei)
+ }
+ },
+ rightAlign() {
+ const NODE = this.graph.getSelectedCells()
+ let rightX = null
+ for (let a of NODE) {
+ if (rightX == null || a.getBBox().x + a.getBBox().width > rightX) {
+ rightX = a.getBBox().x + a.getBBox().width
+ }
+ }
+ for (let a of NODE) {
+ let y = a.getBBox().y
+ a.position(rightX - a.getBBox().width, y)
+ }
+ },
+ bottomAlign() {
+ const NODE = this.graph.getSelectedCells()
+ let bottomY = null
+ for (let a of NODE) {
+ if (bottomY == null || (a.getBBox().y + a.getBBox().height) > bottomY) {
+ bottomY = a.getBBox().y + a.getBBox().height
+ }
+ }
+
+ for (let a of NODE) {
+ let x = a.getBBox().x
+ a.position(x, bottomY - a.getBBox().height)
+ }
+ },
+ close() {
+ if (this.timer){
+ window.clearInterval(this.timer)
+ }
+ },
+ },
+
+ }
+</script>
+
+<style>
+#containerImg {
+ display: flex;
+ border: 1px solid #dfe3e8;
+ height:400px ;
+ width: 100% !important;
+}
+
+.x6-graph-scroller.x6-graph-scroller-pannable {
+ width: 100% !important;
+}
+
+#stencilImg {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ border-right: 1px solid #dfe3e8;
+}
+
+.x6-widget-stencil {
+ position: relative;
+ height: 100%;
+}
+
+.x6-widget-stencil-content {
+ position: relative;
+ height: 100%;
+}
+
+</style>
--
Gitblit v1.9.1