<template>
|
<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" >
|
<zt-form-item label="产品节点" prop="productId">
|
<zt-select v-model="dataForm.productId" :datas="productList" @change="onProductSelected"/>
|
</zt-form-item>
|
<zt-form-item label="总体任务" prop="taskModelId">
|
<zt-select v-model="dataForm.taskModelId" :datas="taskList" @change="onTaskSelected"/>
|
</zt-form-item>
|
<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" 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" style="width: 150px;">
|
</el-input>
|
</zt-form-item>
|
<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 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>
|
</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>
|
</div>
|
</div>
|
</div>
|
</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>
|
|
<script>
|
import SimulatCurve from "./SimulatCurve";
|
import ProductModelTree from "../basicInfo/ProductModelTree";
|
import {Graph, Shape, Addon, Cell} from '@antv/x6'
|
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: '',
|
isSelect: false,
|
isShow: false,
|
productList: [],
|
simulatList: [],
|
taskList: [],
|
MTBF: '',
|
MTTR: '',
|
diagramJson: '',
|
graph: null,
|
timeDiagramWidth:document.documentElement.clientWidth - 300,
|
timeDiagramHeight:document.documentElement.clientHeight - 133,
|
smallTimeDiagramWidth:document.documentElement.clientWidth - 600,
|
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,
|
},
|
dataForm: {
|
id: '',
|
pid: '',
|
productId: '',
|
showProductId: '',
|
taskModelId: '',
|
dataType: 'his',
|
samplPeriod: '',
|
simulatFrequency: '',
|
simulatTime: ''
|
}
|
}
|
},
|
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(Cookies.get('productId'))
|
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)
|
},
|
getPath(){
|
if (Cookies.get('productId') != null){
|
this.dataForm.id = Cookies.get('fzId')
|
this.dataForm.productId = Cookies.get('productId')
|
this.dataForm.taskModelId = Cookies.get('taskModelId')
|
console.log(this.dataForm.id)
|
this.getTaskList()
|
this.$nextTick(() => {
|
this.onProductSelected({id:this.dataForm.productId})
|
this.onTaskSelected({id:Cookies.get('taskModelId')})
|
this.onSimulatSelected({id:Cookies.get('fzId')})
|
})
|
}
|
},
|
init() {
|
this.graph = new Graph({
|
container: document.getElementById('timeDiagram'),
|
// width: document.documentElement.clientWidth - 100,
|
height: document.documentElement.clientHeight - 440,
|
// async: true,
|
grid: {
|
visible: false,
|
},
|
virtual:true,
|
embedding: {
|
enabled: true,
|
findParent({node}) {
|
const bbox = node.getBBox()
|
return this.getNodes().filter((node) => {
|
// 只有 data.parent 为 true 的节点才是父节点
|
const data = node.getData()
|
if (data && data.parent) {
|
const targetBBox = node.getBBox()
|
return bbox.isIntersectWithRect(targetBBox)
|
}
|
return false
|
})
|
}
|
},
|
autoResize: true,
|
scroller: {
|
enabled: 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,
|
},
|
createEdge() {
|
return new Shape.Edge({
|
data: {
|
id: '',
|
status: '',
|
startTime:'',
|
endTime: '',
|
},
|
attrs: {
|
line: {
|
stroke: '#A2B1C3',
|
strokeWidth: 2,
|
targetMarker: null,
|
}
|
},
|
tools: {
|
name: 'vertices',
|
},
|
zIndex: 0,
|
})
|
},
|
keyboard: true,
|
})
|
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',
|
{
|
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: 120, // 宽度减少 10px
|
ellipsis: false, // 文本超出显示范围时，自动添加省略号
|
breakWord: true, // 是否截断单词
|
}
|
},
|
},
|
ports: {...this.ports},
|
},
|
true,
|
)
|
// 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.type = 'grid'
|
})
|
this.graph.on('cell:click', ({cell}) => {
|
this.type = cell.isNode() ? 'node' : 'edge'
|
this.shape = cell.shape
|
this.id = cell.id
|
})
|
// 单击node节点
|
this.graph.on('node:click', ({node}) => {
|
// this.reset()
|
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}) => {
|
if (name === 'node:delete') {
|
e.stopPropagation()
|
view.cell.remove()
|
}
|
})
|
|
// 鼠标移入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')
|
}
|
}
|
})
|
// 鼠标移出edge节点
|
this.graph.on('edge:mouseleave', ({edge}) => {
|
// console.log('edge:mouseleave')
|
const style = this.knob.style
|
style.display = 'none'
|
})
|
},
|
async getProductList(productId) {
|
let res = await this.$http.get('/basicInfo/XhProductModel/getTaskProductList')
|
this.productList = res.data
|
if(productId!=null){
|
this.getPath()
|
}else{
|
this.onProductSelected(this.productList[0])
|
}
|
},
|
async getTaskList() {
|
let params = {
|
productId: this.dataForm.productId
|
}
|
let res = await this.$http.get('/taskReliability/Task/getTaskList', {params: params})
|
console.log(res.data)
|
this.taskList = res.data
|
},
|
async getSimulatList() {
|
let params = {
|
taskModelId: this.dataForm.taskModelId
|
}
|
let res = await this.$http.get('/taskReliability/SimulatAssess/getSimulatList', {params: params})
|
console.log(res.data)
|
this.simulatList = res.data
|
},
|
|
// 获取信息
|
onProductSelected(data) {
|
this.isSelect = true
|
console.log(data, ' onProductSelected(data)')
|
this.dataForm.productId = data.id
|
this.getTaskList()
|
this.dataForm.taskModelId = ''
|
this.$nextTick(() => {
|
this.$refs.ProductModelTree.getProductList()
|
})
|
// this.init()
|
},
|
onTaskSelected(data) {
|
console.log(data, ' onProductSelected(data)')
|
this.dataForm.taskModelId = data.id
|
this.getSimulatList()
|
this.dataForm.id = ''
|
},
|
async onSimulatSelected(data) {
|
this.dataForm.id = data.id
|
this.dataForm.samplPeriod = data.samplPeriod
|
let param = {
|
id: this.dataForm.id,
|
taskModelId: this.dataForm.taskModelId
|
}
|
let result = await this.$http.get('/taskReliability/SimulatAssess/getSimulatParams', {params: param})
|
this.dataForm.samplPeriod = result.data.samplPeriod
|
this.dataForm.simulatFrequency = result.data.simulatFrequency
|
},
|
async onTreeSelected(data) {
|
await this.getDiagram(data.id)
|
},
|
async getDiagram(productId) {
|
this.graph.unfreeze()
|
let params = {
|
productId: productId ? productId : this.dataForm.productId,
|
taskId: this.dataForm.taskModelId,
|
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.diagramJson)
|
let textDiagramJson = JSON.parse(res.data.textDiagramJson)
|
let smallDiagramJson = JSON.parse(res.data.smallDiagramJson)
|
this.graph.fromJSON(this.diagramJson)
|
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.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和Opera */
|
}
|
.zt.light .el-tab-pane .mod-taskReliability-simulatAssess .el-form{
|
margin-top: 5px;
|
margin-bottom: 0;
|
}
|
</style>
|
