From 17ce02ec6fefa4e8b9ac870e2b52dea0942f5597 Mon Sep 17 00:00:00 2001
From: wente <329538422@qq.com>
Date: 星期四, 05 十二月 2024 09:40:30 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
web/src/views/modules/taskReliability/TimeDiagram.vue | 802 ++++++++++++++++-----------------------------------------
1 files changed, 225 insertions(+), 577 deletions(-)
diff --git a/web/src/views/modules/taskReliability/TimeDiagram.vue b/web/src/views/modules/taskReliability/TimeDiagram.vue
index 5275e55..5aaf2c8 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,51 @@
<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">
- <el-input v-model="dataForm.samplPeriod" readonly="false">
+ <zt-form-item label="鏃堕棿鍒嗙墖" prop="samplPeriod">
+ <el-input v-model="dataForm.samplPeriod" readonly="false" style="width: 150px;vertical-align: baseline;">
+ <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 v-model="dataForm.simulatFrequency" readonly="false" style="width: 150px;">
</el-input>
</zt-form-item>
- <zt-form-item >
- <zt-button @click="getDiagram()">鏌ョ湅鏃跺簭鍥�</zt-button>
+ <zt-form-item>
+ <zt-button @click="getDiagram(null)">鏌ョ湅鏃跺簭鍥�</zt-button>
+ <el-dropdown style="margin-left: 10px" @command="download">
+ <el-button type="primary">
+ 涓嬭浇xml<i class="el-icon-arrow-down el-icon--right"></i>
+ </el-button>
+ <el-dropdown-menu slot="dropdown">
+ <el-dropdown-item command="1">杈撳叆xml</el-dropdown-item>
+ <el-dropdown-item command="2">杈撳嚭xml</el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
</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 +65,20 @@
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"
+ import qs from "qs";
+ import Cookies from "js-cookie";
export default {
data() {
return {
+ bigWidth:0,
+ left:400,
+ title:'',
+ knob:HTMLDivElement,
dialogVisible2: false,
timers: '',
shape: '',
@@ -69,6 +91,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 +141,45 @@
}
}
},
+ created() {
+ let scrollView = this.$refs['scrollView']
+ window.addEventListener('scroll', this.handleScroll,{passive:false});
+ },
+ destroyed() {
+ let scrollView = this.$refs['scrollView']
+ window.removeEventListener('scroll', this.handleScroll);
+ },
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
+ 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,125 +195,51 @@
})
}
},
- 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,
+ 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,
+ targetMarker: null,
+ }
},
- },
+ 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,
- },
- })
+ 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',
{
@@ -300,7 +270,7 @@
textVerticalAnchor: 'middle',
textWrap: {
text: '鏂囧瓧妯℃澘',
- width: -10, // 瀹藉害鍑忓皯 10px
+ width: 120, // 瀹藉害鍑忓皯 10px
ellipsis: false, // 鏂囨湰瓒呭嚭鏄剧ず鑼冨洿鏃讹紝鑷姩娣诲姞鐪佺暐鍙�
breakWord: true, // 鏄惁鎴柇鍗曡瘝
}
@@ -310,319 +280,6 @@
},
true,
)
-
- Graph.registerNode(
- 'custom-polygon',
- {
- inherit: 'polygon',
- width: 86,
- height: 56,
- attrs: {
- body: {
- strokeWidth: 1,
- stroke: '#5F95FF',
- fill: '#EFF4FF',
- },
- text: {
- fontSize: 20,
- fill: '#262626',
- },
- },
- 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,
- )
- // 涓�绾х綉缁滃浘鐨勬棩鏈熸枃瀛楄妭鐐�
- 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()
@@ -639,49 +296,27 @@
})
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', '#5F95FF')
- edge.prop('labels/0', {
- attrs: {
- body: {
- stroke: '#5F95FF',
- },
- },
-
- })
})
// 鍗曞嚮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}) => {
@@ -690,77 +325,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 = {
@@ -772,32 +378,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
@@ -808,6 +395,7 @@
this.$nextTick(() => {
this.$refs.ProductModelTree.getProductList()
})
+ // this.init()
},
onTaskSelected(data) {
console.log(data, ' onProductSelected(data)')
@@ -826,33 +414,93 @@
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')
- console.log(this.diagramJson, 'this.Diagram json')
+ this.diagramJson = JSON.parse(res.data.diagramJson)
+ let textDiagramJson = JSON.parse(res.data.textDiagramJson)
+ let smallDiagramJson = JSON.parse(res.data.smallDiagramJson)
this.graph.fromJSON(this.diagramJson)
- this.graph.centerContent()
- this.graph.zoomToFit()
+ this.graph.positionContent('left',{ padding: { left: 0 }})
+ this.bigWidth = this.graph.getContentBBox().width
+ // 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))
+ this.graph.setScrollbarPosition(pointX, null)
+ },
+ async download(selsect) {
+ if(this.dataForm.id){
+ let param = qs.stringify({
+ 'token': Cookies.get('token'),
+ type: 'sxt',
+ xml:selsect,
+ id: this.dataForm.id
+ })
+ let apiURL = `/taskReliability/SimulatAssess/downloadXml`
+ window.location.href = `${window.SITE_CONFIG['apiURL']}${apiURL}?${param}`
+ }else{
+ this.$alert('杩樻湭閫夋嫨浠跨湡璁板綍')
+ }
},
}
}
</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