From 3c2e46fef0e866901cbb5de889166b6fda748e5d Mon Sep 17 00:00:00 2001 From: xyc <jc_xiong@hotmail.com> Date: 星期二, 22 十月 2024 14:39:09 +0800 Subject: [PATCH] 同类设备有多个的修改 --- web/src/views/modules/taskReliability/TimeDiagram.vue | 626 ++++++++++++++++++++------------------------------------ 1 files changed, 228 insertions(+), 398 deletions(-) diff --git a/web/src/views/modules/taskReliability/TimeDiagram.vue b/web/src/views/modules/taskReliability/TimeDiagram.vue index 34b9656..3e6d46f 100644 --- a/web/src/views/modules/taskReliability/TimeDiagram.vue +++ b/web/src/views/modules/taskReliability/TimeDiagram.vue @@ -1,8 +1,8 @@ <template> - <div class="fa-card-a"> - <el-row :gutter="5"> + <div class="fa-card-a" style="width: calc(100% - 20px);height: calc(100vh - 128px)"> + <div > <div class="mod-taskReliability-simulatAssess"> - <el-form :inline="true" :model="dataForm" ref="dataForm" :disabled="dataForm.disabled" label-width="80px"> + <el-form :inline="true" :model="dataForm" ref="dataForm" :disabled="dataForm.disabled" > <zt-form-item label="浜у搧鑺傜偣" prop="productId"> <zt-select v-model="dataForm.productId" :datas="productList" @change="onProductSelected"/> </zt-form-item> @@ -12,37 +12,44 @@ <zt-form-item label="浠跨湡璁板綍" prop="simulatHis"> <zt-select v-model="dataForm.id" :datas="simulatList" @change="onSimulatSelected"/> </zt-form-item> - <zt-form-item label="閲囨牱鍛ㄦ湡" prop="samplPeriod"> + <zt-form-item label="鏃堕棿鍒嗙墖" prop="samplPeriod"> <el-input v-model="dataForm.samplPeriod" readonly="false"> + <template slot="append">鍒嗛挓</template> </el-input> </zt-form-item> <zt-form-item label="浠跨湡娆℃暟" prop="simulatFrequency"> <el-input v-model="dataForm.simulatFrequency" readonly="false"> </el-input> </zt-form-item> - <zt-form-item > - <zt-button @click="getDiagram()">鏌ョ湅鏃跺簭鍥�</zt-button> + <zt-form-item> + <zt-button @click="getDiagram(null)">鏌ョ湅鏃跺簭鍥�</zt-button> +<!-- <zt-button @click="graphRightTranslate()">鐢诲竷鍙崇Щ</zt-button>--> +<!-- <zt-button @click="graphLeftTranslate()">鐢诲竷宸︾Щ</zt-button>--> </zt-form-item> </el-form> - <div> - <el-col :span="4"> + <div style="display: flex"> + <div style="width: 300px"> <div style="margin-right: 5px;height: calc(88vh - 100px)" v-if="isSelect"> <product-model-tree @on-selected="onTreeSelected" ref="ProductModelTree" :isShow="false" :productId="dataForm.productId"/> </div> - </el-col> - <el-col :span="20"> - <div style="margin-top: 20px"> - <div id="container" style="border: 1px solid #EAEBEE;border-radius: 6px; + </div> + <div style="height: calc(100vh - 233px);width: calc(100% - 300px);margin-left:10px"> + <div style="margin-top:15px;width:100%; height:100%;border: 1px solid #EAEBEE;border-left:none;border-radius: 6px; box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);"> +<!-- <div style="width:100%;height: 150px" id="thumbnail" class="minimap-container"></div>--> + <timeDiagramThumbnail ref="timeDiagramThumbnail" @getPoint="getPoint"></timeDiagramThumbnail> + <div id="flexLayout" style="display:flex;"> + <textDiagram class="flexLayout-item_1" ref="textDiagram"></textDiagram> + <div id="timeDiagram" class="flexLayout-item_2" style="height: 300px" ref="scrollView" @mousewheel="handleScroll"></div> </div> </div> - </el-col> + </div> </div> </div> - </el-row> - <el-dialog v-dialogDrag title="妯″瀷璁捐" top="1vh" width='95%' :visible.sync="dialogVisible2" v-if="dialogVisible2"> - <RBDEditImg ref="rbdEditImg"></RBDEditImg> + </div> + <el-dialog v-dialogDrag :title="title" top="1vh" width='95%' :visible.sync="dialogVisible2" v-if="dialogVisible2"> + <model-view ref="modelView"></model-view> </el-dialog> </div> </template> @@ -51,12 +58,18 @@ import SimulatCurve from "./SimulatCurve"; import ProductModelTree from "../basicInfo/ProductModelTree"; import {Graph, Shape, Addon, Cell} from '@antv/x6' - import RBDEditImg from './RBD-edit-img' + import ModelView from "./ModelView"; + import textDiagram from "./textDiagram"; + import timeDiagramThumbnail from "./timeDiagramThumbnail" export default { data() { return { + bigWidth:0, + left:400, + title:'', + knob:HTMLDivElement, dialogVisible2: false, timers: '', shape: '', @@ -69,6 +82,9 @@ MTTR: '', diagramJson: '', graph: null, + timeDiagramWidth:document.documentElement.clientWidth - 300, + timeDiagramHeight:document.documentElement.clientHeight - 133, + smallTimeDiagramWidth:document.documentElement.clientWidth - 600, globalGridAttr: { type: 'mesh', size: 10, @@ -116,26 +132,46 @@ } } }, + created() { + let scrollView = this.$refs['scrollView'] + window.addEventListener('scroll', this.handleScroll,true); + }, + destroyed() { + let scrollView = this.$refs['scrollView'] + window.removeEventListener('scroll', this.handleScroll,true); + }, mounted() { this.getProductList() - + this.init() + this.$refs.textDiagram.init() + this.$refs.timeDiagramThumbnail.init() }, components: { + ModelView, ProductModelTree, SimulatCurve, + textDiagram, + timeDiagramThumbnail }, methods: { + handleScroll(){ + this.graph.getScrollbarPosition() + let left = this.graph.getScrollbarPosition().left + console.log(left,'left left') + let top = this.graph.getScrollbarPosition().top + this.$refs.textDiagram.setScroll(top) + this.$refs.timeDiagramThumbnail.getNodePointX(left,this.bigWidth) + }, init() { - console.log(document.documentElement.clientWidth, 'document.documentElement.clientWidth') - console.log(document.documentElement.clientHeight, 'document.documentElement.clientHeight') this.graph = new Graph({ - container: document.getElementById('container'), - width: document.documentElement.clientWidth, - height: document.documentElement.clientHeight - 220, + container: document.getElementById('timeDiagram'), + // width: document.documentElement.clientWidth - 100, + height: document.documentElement.clientHeight - 440, // async: true, grid: { - visible: true, + visible: false, }, + virtual:true, embedding: { enabled: true, findParent({node}) { @@ -151,126 +187,66 @@ }) } }, - 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, + className:'my-scroller-drag', + pageWidth:100, + pageVisible:true, + // pageBreak:true, + padding: { + top: 0, + right: 0, + bottom: 0, + left: 0, + }, + minVisibleWidth: 500, + minVisibleHeight:300, 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, + // minimap: { + // enabled: true, + // container: document.getElementById('thumbnail'), + // scalable:false, + // width: document.documentElement.clientWidth - 400, + // height: 150, + // }, + // mousewheel: { + // enabled: true, + // zoomAtMousePosition: true, + // modifiers: 'ctrl', + // minScale: 0.1, + // maxScale: 10, + // }, + createEdge() { + return new Shape.Edge({ + data: { + id: '', + status: '', + startTime:'', + endTime: '', }, - }, - // anchor: 'center', - connectionPoint: 'anchor', - snap: { - radius: 20, - }, - createEdge() { - return new Shape.Edge({ - attrs: { - line: { - stroke: '#A2B1C3', - strokeWidth: 2, - targetMarker: 'classic' - } - }, - tools: { - name: 'vertices', - }, - labels: [{ - attrs: { - body: { - stroke: '#5F95FF', - }, - text: { - // fontFamily: '浠垮畫', - text: '' - } - }, - }], - zIndex: 0, - }) - }, - // validateConnection({targetMagnet}) { - // return !!targetMagnet - // }, - }, - highlighting: { - magnetAdsorbed: { - name: 'stroke', - args: { - attrs: { - fill: '#5F95FF', - stroke: '#5F95FF', - }, + attrs: { + line: { + stroke: '#A2B1C3', + strokeWidth: 2, + sourceMarker: 'none', + targetMarker: 'none' + } }, - }, + tools: { + name: 'vertices', + }, + zIndex: 0, + }) }, - 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: 260, - stencilGraphHeight: 700, - collapsable: false, - groups: [ - { - title: '鍥惧厓', - name: 'group1', - collapsable: false - } - ], - layoutOptions: { - columns: 2, - columnWidth: 130, - rowHeight: 100, - }, - }) - document.getElementById('stencil').appendChild(stencil.container) + this.knob = document.createElement('div',false) + this.knob.style.position = 'absolute' + document.getElementById('timeDiagram').appendChild(this.knob) + this.graph.positionContent('left',{ padding: { left: 0 }}) + // this.graph.centerContent() Graph.registerNode( 'custom-rect', { @@ -468,162 +444,6 @@ }, 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 scaleImgCenter = this.graph.createNode({ - shape: 'image', - imageUrl: require('@/assets/img/scale/center.jpg'), - width: 36, - height: 20, - data: { - imagePost: 'center' - } - }) - - const scaleImgTop = this.graph.createNode({ - shape: 'image', - imageUrl: require('@/assets/img/scale/top.jpg'), - width: 36, - height: 20, - data: { - imagePost: 'top' - } - }) - - const scaleImgRight = this.graph.createNode({ - shape: 'image', - imageUrl: require('@/assets/img/scale/right.jpg'), - width: 36, - height: 20, - data: { - imagePost: 'right' - } - }) - const scaleImgBottom = this.graph.createNode({ - shape: 'image', - imageUrl: require('@/assets/img/scale/bottom.jpg'), - width: 36, - height: 20, - data: { - imagePost: 'bottom' - } - }) - const scaleImgLeft = this.graph.createNode({ - shape: 'image', - imageUrl: require('@/assets/img/scale/left.jpg'), - width: 36, - height: 20, - data: { - imagePost: 'left' - } - }) - - // scaleImgTop.setAttribute('crossOrigin', 'Anonymous') - stencil.load([r5, r6, r9, scaleImgTop, scaleImgCenter, scaleImgRight, scaleImgBottom, scaleImgLeft], 'group1') - 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 - }) - // 鐩戝惉 stencil 鐨勬嫋鎷藉紑濮嬩簨浠� - this.graph.on('node:embed', ({node, e}) => { - // 闃绘浜嬩欢鍐掓场 - e.stopPropagation() - console.log(node.shape, 'node node') - let parent - let child - if (node.shape === 'custom-rect') { - child = node - } else { - parent = node - } - console.log('parent:' + parent, 'child:' + child) - // parent.addChild(child); - }) - 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() @@ -645,7 +465,9 @@ this.type = 'grid' // this.id = cell.id }) - + this.graph.on('translate', ({ tx, ty }) => { + console.log(`褰撳墠鍋忕Щ閲忎綅缃�: x=${tx}, y=${ty}`); + }); this.graph.on('cell:click', ({cell}) => { // this.type.value = cell.isNode() ? "node" : "edge" this.type = cell.isNode() ? 'node' : 'edge' @@ -670,19 +492,17 @@ // 鍗曞嚮node鑺傜偣 this.graph.on('node:click', ({node}) => { // this.reset() - node.attr('line/stroke', '#5F95FF') - node.prop('labels/0', { - attrs: { - body: { - stroke: '#5F95FF', - }, - }, - }) - }) - // 鎺у埗杩炴帴妗╂樉绀�/闅愯棌 - this.graph.on('node:delete', ({view, e}) => { - e.stopPropagation() - view.cell.remove() + if (node.getData().dataId) { + this.dialogVisible2 = true + let param = { + id: node.getData().dataId, + modelName: node.attr('label/textWrap/modelName'), + } + this.title=node.attr('label/textWrap/modelName') + "妯″瀷璁捐" + this.$nextTick(() => { + this.$refs.modelView.init(param) + }) + } }) this.graph.on('node:customevent', ({name, view, e}) => { @@ -691,77 +511,48 @@ 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('container') - const ports = container.querySelectorAll( - '.x6-port-body', - ) - this.showPorts(ports, true) + // 榧犳爣绉诲叆edge鑺傜偣 + this.graph.on('edge:mouseenter', ({edge,e}) => { + const style = this.knob.style + // e.stopPropagation() + // console.log('edge:mouseenter') + if (e && edge.data) { + if (edge.getData().status==='F') { + //console.log(edge.getData(),"eee edge.getData()") + let startTimes = edge.getData().startTimes + let endTimes = edge.getData().endTimes + //console.log(e,'eee') + const p = this.graph.clientToGraph(e.clientX, e.clientY) + setTimeout(()=>{ + style.display = 'block' + style.left = `${p.x}px` + style.top = `${p.y}px` + style.width = 200+ 'px' + style.height = 80 + 'px' + style.textAlign = 'center' + style.background = '#000' + style.color = '#fff' + style.lineHeight = (40 + 'px') + style.zIndex = 100 + this.knob.innerText = `寮�濮嬫椂闂达細${startTimes}\n缁撴潫鏃堕棿锛�${endTimes}` + },0) + // console.log(p,'p p p') + // console.log(style,this.knob,'style style') + } + } }) - - this.graph.on('node:mouseleave', ({node}) => { - // if (node.hasTool('button-remove')) { - // node.removeTool('button-remove') - // } - const container = document.getElementById('container') - 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() +// 榧犳爣绉诲嚭edge鑺傜偣 + this.graph.on('edge:mouseleave', ({edge}) => { + // console.log('edge:mouseleave') + const style = this.knob.style + style.display = 'none' }) }, async getProductList() { let res = await this.$http.get('/basicInfo/XhProductModel/getTaskProductList') this.productList = res.data + this.onProductSelected(this.productList[0]) }, async getTaskList() { let params = { @@ -773,32 +564,13 @@ }, async getSimulatList() { let params = { - productId: this.dataForm.productId, taskModelId: this.dataForm.taskModelId } let res = await this.$http.get('/taskReliability/SimulatAssess/getSimulatList', {params: params}) console.log(res.data) this.simulatList = res.data }, - async onTreeSelected(data) { - this.dataForm.productId = data.id - console.log(this.dataForm.productId) - if (!this.dataForm.taskModelId) { - this.$alert("璇峰厛閫夋嫨鍏蜂綋浠诲姟") - return - } - if (!this.dataForm.id) { - this.$alert("璇峰厛閫夋嫨鍏蜂綋浠跨湡璁板綍") - return - } - let params = { - productId: this.dataForm.productId, - taskId: this.dataForm.taskModelId, - fzId: this.dataForm.id - } - let res = await this.$http.get('/taskReliability/SimulatAssess/getStatus', {params: params}) - console.log(res.data) - }, + // 鑾峰彇淇℃伅 onProductSelected(data) { this.isSelect = true @@ -809,6 +581,7 @@ this.$nextTick(() => { this.$refs.ProductModelTree.getProductList() }) + // this.init() }, onTaskSelected(data) { console.log(data, ' onProductSelected(data)') @@ -827,33 +600,90 @@ this.dataForm.samplPeriod = result.data.samplPeriod this.dataForm.simulatFrequency = result.data.simulatFrequency }, - async getDiagram() { - this.init() + async onTreeSelected(data) { + await this.getDiagram(data.id) + }, + async getDiagram(productId) { + this.graph.unfreeze() let params = { - productId: this.dataForm.productId, + productId: productId ? productId : this.dataForm.productId, taskId: this.dataForm.taskModelId, - fzId: this.dataForm.id + fzId: this.dataForm.id, + smallWidth: 1200, + minPointNum: 5 } let res = await this.$http.get('/taskReliability/SimulatAssess/getStatus', {params: params}) if (res.data !== null) { - this.diagramJson = JSON.parse(res.data) - // console.log(this.dataForm.content,'this.Diagram content') + this.diagramJson = JSON.parse(res.data.diagramJson) + let textDiagramJson = JSON.parse(res.data.textDiagramJson) + let smallDiagramJson = JSON.parse(res.data.smallDiagramJson) console.log(this.diagramJson, 'this.Diagram json') + console.log(smallDiagramJson, 'smallDiagramJson') this.graph.fromJSON(this.diagramJson) - this.graph.centerContent() - this.graph.zoomToFit() + // this.graph.centerContent() + this.graph.positionContent('left',{ padding: { left: 0 }}) + // this.graph.zoomToFit() + this.bigWidth = this.graph.getContentBBox().width + console.log(this.bigWidth,'getContentBBox') + // this.graph.resize(this.graph.getContentBBox().width,this.graph.getContentBBox().height) this.graph.freeze() + this.$refs.textDiagram.getTextDiagram(textDiagramJson) + this.$refs.timeDiagramThumbnail.getThumbnail(smallDiagramJson) } else { this.graph.fromJSON(this.emptyJson) - this.graph.centerContent() - this.graph.zoomToFit() + this.graph.positionContent('left',{ padding: { left: 0 }}) + // this.graph.centerContent() + //this.graph.zoomToFit() this.graph.freeze() } console.log(res.data) }, + getPoint(x,smallWidth){ + let pointX = Number((x * (this.bigWidth / smallWidth )).toFixed(0)) + // console.log(pointX) + this.graph.setScrollbarPosition(pointX, null) + // if(pointX<600){ + // this.graph.setScrollbarPosition(pointX, null, { animation: { duration: 400 }}) + // }else { + // this.graph.scrollToPoint(pointX, null, {animation: {duration: 400}}) + // } + } } } </script> <style> + #timeDiagram { + display: flex; + /*border: 1px solid #dfe3e8;*/ + /*width: 60% !important;*/ + } + #timeDiagram .x6-cell.x6-node { + cursor: inherit; + } + + #flexLayout .x6-graph-scroller.x6-graph-scroller-pannable { + width: 92% !important; + } + .x6-widget-stencil { + position: relative; + height: 100%; + } + + .x6-widget-stencil-content { + position: relative; + height: 100%; + } + .my-scroller-drag { + overflow: auto; /* 闇�瑕佹粴鍔ㄦ椂淇濇寔杩欎釜灞炴�� */ + scrollbar-width: none; /* 瀵逛簬Firefox */ + } + + .my-scroller-drag::-webkit-scrollbar { + display: none; /* 瀵逛簬Chrome, Safari鍜孫pera */ + } + .zt.light .el-tab-pane .mod-taskReliability-simulatAssess .el-form{ + margin-top: 5px; + margin-bottom: 0; +} </style> -- Gitblit v1.9.1