From d984b8190404a19fee90c5e99893e580d1d81adf Mon Sep 17 00:00:00 2001
From: wente <329538422@qq.com>
Date: 星期六, 12 十月 2024 09:50:18 +0800
Subject: [PATCH] 桥联关联上下边ID
---
web/src/views/modules/taskReliability/TimeDiagram.vue | 516 +++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 496 insertions(+), 20 deletions(-)
diff --git a/web/src/views/modules/taskReliability/TimeDiagram.vue b/web/src/views/modules/taskReliability/TimeDiagram.vue
index a5fc186..e7b0071 100644
--- a/web/src/views/modules/taskReliability/TimeDiagram.vue
+++ b/web/src/views/modules/taskReliability/TimeDiagram.vue
@@ -2,7 +2,7 @@
<div class="fa-card-a">
<el-row :gutter="5">
<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,36 +12,57 @@
<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">
+ <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(null)">鏌ョ湅鏃跺簭鍥�</zt-button>
+ </zt-form-item>
</el-form>
<div>
<el-col :span="4">
<div style="margin-right: 5px;height: calc(88vh - 100px)" v-if="isSelect">
- <product-model-tree @on-selected="onTreeSelected" showXdy="false"
- ref="ProductModelTree" :isShow="false" basic="5"/>
+ <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>
- <SimulatCurve ref="SimulatCurve"></SimulatCurve>
+ <div id="timeDiagram" style="border: 1px solid #EAEBEE;border-radius: 6px;
+ box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);">
</div>
</div>
</el-col>
</div>
</div>
</el-row>
+ <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";
export default {
data() {
return {
+ title: '',
+ knob: HTMLDivElement,
+ dialogVisible2: false,
timers: '',
+ shape: '',
isSelect: false,
isShow: false,
productList: [],
@@ -49,6 +70,42 @@
taskList: [],
MTBF: '',
MTTR: '',
+ diagramJson: '',
+ 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,
+ },
dataForm: {
id: '',
pid: '',
@@ -66,14 +123,384 @@
this.getProductList()
},
components: {
+ ModelView,
ProductModelTree,
SimulatCurve,
},
-
methods: {
+ init() {
+ console.log(document.documentElement.clientWidth, 'document.documentElement.clientWidth')
+ console.log(document.documentElement.clientHeight, 'document.documentElement.clientHeight')
+ this.graph = new Graph({
+ container: document.getElementById('timeDiagram'),
+ width: document.documentElement.clientWidth,
+ height: document.documentElement.clientHeight - 220,
+ // async: true,
+ grid: {
+ visible: false,
+ },
+ 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,
+ pageVisible: true,
+ pageBreak: true,
+ pannable: true,
+ },
+ mousewheel: {
+ enabled: true,
+ zoomAtMousePosition: true,
+ modifiers: 'ctrl',
+ minScale: 0.1,
+ maxScale: 10,
+ },
+ createEdge() {
+ return new Shape.Edge({
+ data: {
+ id: '',
+ status: '',
+ startTime: '',
+ endTime: '',
+ },
+ attrs: {
+ line: {
+ stroke: '#A2B1C3',
+ strokeWidth: 2,
+ sourceMarker: 'none',
+ targetMarker: 'none'
+ }
+ },
+ 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.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: -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',
+ },
+ 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,
+ )
+// 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', '#5F95FF')
+ edge.prop('labels/0', {
+ attrs: {
+ body: {
+ stroke: '#5F95FF',
+ },
+ },
+
+ })
+ })
+ // 鍗曞嚮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() {
let res = await this.$http.get('/basicInfo/XhProductModel/getTaskProductList')
this.productList = res.data
+ this.onProductSelected(this.productList[0])
},
async getTaskList() {
let params = {
@@ -85,24 +512,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)
- let params = {
- productId: this.dataForm.productId,
- taskId: this.dataForm.taskModelId,
- fzId: '1722218139013042135'
- }
- let res = await this.$http.get('/taskReliability/SimulatAssess/getStatus', {params: params})
- console.log(res.data)
- },
+
// 鑾峰彇淇℃伅
onProductSelected(data) {
this.isSelect = true
@@ -110,6 +526,10 @@
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)')
@@ -117,14 +537,70 @@
this.getSimulatList()
this.dataForm.id = ''
},
- onSimulatSelected(data) {
+ async onSimulatSelected(data) {
this.dataForm.id = data.id
this.dataForm.samplPeriod = data.samplPeriod
- this.$refs.SimulatCurve.initEcharts(this.dataForm);
+ 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.smallDiagramJson)
+ console.log(this.diagramJson, 'this.Diagram json')
+ this.graph.fromJSON(this.diagramJson)
+ this.graph.centerContent()
+ //this.graph.zoomToFit()
+ this.graph.freeze()
+ } else {
+ this.graph.fromJSON(this.emptyJson)
+ this.graph.centerContent()
+ //this.graph.zoomToFit()
+ this.graph.freeze()
+ }
+ console.log(res.data)
},
}
}
</script>
<style>
+ #timeDiagram {
+ display: flex;
+ border: 1px solid #dfe3e8;
+ width: 100% !important;
+ }
+ #timeDiagram .x6-cell.x6-node {
+ cursor: inherit;
+ }
+
+ .x6-graph-scroller.x6-graph-scroller-pannable {
+ width: 100% !important;
+ }
+
+ .x6-widget-stencil {
+ position: relative;
+ height: 100%;
+ }
+
+ .x6-widget-stencil-content {
+ position: relative;
+ height: 100%;
+ }
</style>
--
Gitblit v1.9.1