| | |
| | | <div class="fa-card-a"> |
| | | <el-form :inline="true"> |
| | | <el-form-item> |
| | | 模型ID |
| | | 模型名称:{{modelName}} |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-input placeholder="搜索模型ID" v-model="dataForm.modelId" clearable class="input-with-select"> |
| | | <el-button slot="append" icon="el-icon-search" @click="search()"></el-button> |
| | | </el-input> |
| | | </el-form-item> |
| | | |
| | | <el-form-item> |
| | | <el-button type="primary" @click="saveDiagram()">保存</el-button> |
| | | <el-button type="primary" @click="analyzeDiagram()">解析</el-button> |
| | | <el-button type="primary" @click="saveDiagram()">暂存</el-button> |
| | | <el-button type="primary" @click="analyzeDiagram()">保存</el-button> |
| | | <el-button type="primary" @click="clearDiagram()">清空图形</el-button> |
| | | </el-form-item> |
| | | <el-form-item> |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | modelId: '', |
| | | modelName: '', |
| | | modelType:'', |
| | | 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:'connect',imgName:'connect',nodeType:'connect',imgWidth:30,imgHeight:30,imgId:'3',data:{}}, |
| | | {imgPath:'connect',imgName:'connect',nodeType:'connect',imgWidth:20,imgHeight:20,imgId:'3',data:{}}, |
| | | // {imgPath:'parallelLeft',imgName:'parallelLeft',nodeType:'parallelLeft',imgWidth:60,imgHeight:60,imgId:'3',data:{}}, |
| | | {imgPath:'parallelRight',imgName:'parallel',nodeType:'parallel',imgWidth:60,imgHeight:60,imgId:'4',data:{}}, |
| | | // {imgPath:'parallelRight',imgName:'parallel',nodeType:'parallel',imgWidth:60,imgHeight:60,imgId:'4',data:{}}, |
| | | {imgPath:'switchRight',imgName:'switch',nodeType:'switch',imgWidth:60,imgHeight:60,imgId:'5',data:{}}, |
| | | {imgPath:'voteRight',imgName:'vote',nodeType:'vote',imgWidth:60,imgHeight:60,imgId:'6',data:{}}, |
| | | ], |
| | | imgsList2:[ |
| | | {imgPath:'logo',imgName:'logo',nodeType:'node',statusImg:'',imgWidth:60,imgHeight:60,imgId:'100',data:{dataId:'123456',nodeTypeExt:''}}, |
| | | // {imgPath:'logo',imgName:'logo',nodeType:'node',,nodeTypeExt:'',productType:'',statusImg:'',imgWidth:60,imgHeight:60,imgId:'100',dataId:'123456'}, |
| | | ], |
| | | nodeType:'', |
| | | first: true, |
| | |
| | | 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: { |
| | | // // 节点 |
| | |
| | | //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.initDigram() |
| | | 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', '网络图') |
| | | } |
| | | } |
| | | init(row){ |
| | | this.modelName = row.modelName |
| | | this.dataForm.id = row.id |
| | | // this.productId = row.productId |
| | | // this.getProduct(row.productId) |
| | | this.initDigram(row.productId) |
| | | console.log(this.dataForm,'init(row){') |
| | | }, |
| | | 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) |
| | | async getDiagram(modelId) { |
| | | 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 clearDiagram() { |
| | | this.dataForm.id = null |
| | | // this.graph.fromJSON(this.emptyJson) |
| | | this.graph.fromJSON('') |
| | | this.graph.centerContent() |
| | | this.graph.zoomToFit() |
| | | // this.graph.freeze() |
| | | }, |
| | | async getDiagram() { |
| | | let params = { |
| | | modelId : this.dataForm.modelId |
| | | modelId : modelId |
| | | } |
| | | let res = await this.$http.get(`/taskReliability/ModelLine/getDiagram`, {params: params}) |
| | | if (res.data !== null && res.data.content != null) { |
| | | console.log(res,'async getDiagram( res') |
| | | if (res.data !== null && res.data.content != null) { |
| | | this.dataForm = res.data |
| | | console.log(this.dataForm, 'this.dataForm in getDiagram') |
| | | this.diagramJson = JSON.parse(this.dataForm.content) |
| | |
| | | } else { |
| | | await this.clearDiagram() |
| | | } |
| | | |
| | | }, |
| | | init() { |
| | | this.timer = setHartBeat(10, 240); |
| | | async clearDiagram() { |
| | | this.dataForm.id = null |
| | | // this.graph.fromJSON(this.emptyJson) |
| | | this.graph.fromJSON('') |
| | | this.graph.centerContent() |
| | | this.graph.zoomToFit() |
| | | // this.graph.freeze() |
| | | }, |
| | | async initDigram(productId) { |
| | | |
| | | |
| | | 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 - 100, |
| | | height: document.documentElement.clientHeight - 200, |
| | | // async: true, |
| | | grid: { |
| | | visible: true, |
| | |
| | | pageVisible: true, |
| | | pageBreak: true, |
| | | pannable: true, |
| | | minVisibleWidth:200, |
| | | minVisibleHeight:200, |
| | | modifiers: 'shift', |
| | | }, |
| | | // panning: { |
| | | // enabled: true, |
| | | // modifiers: 'shift', |
| | | // }, |
| | | mousewheel: { |
| | | enabled: true, |
| | | zoomAtMousePosition: true, |
| | |
| | | enabled: true, |
| | | rubberband: true, |
| | | rubberEdge: true, |
| | | showNodeSelectionBox: true, |
| | | // showNodeSelectionBox: true, |
| | | }, |
| | | snapline: true, |
| | | keyboard: true, |
| | |
| | | ports: {...this.ports}, |
| | | }), |
| | | ) |
| | | let params = { |
| | | productId : productId |
| | | } |
| | | let res = await this.$http.get(`/basicInfo/XhProductModel/getProduct`, {params: params}) |
| | | this.imgsList2 = res.data |
| | | console.log(this.imgsList2 ,'getProduct(productId)234567890') |
| | | const imageNodes2 = this.imgsList2.map((item) => |
| | | this.graph.createNode({ |
| | | shape: 'image', |
| | | imageUrl: require('/public/modelImg/'+item.imgPath+'.png'), |
| | | imageUrl: `${window.SITE_CONFIG['apiURL']}/sys/oss/content2?fileId=${item.imgPath}`, |
| | | width:item.imgWidth, |
| | | height:item.imgHeight, |
| | | x:item.imgWidth, |
| | | y:item.imgHeight, |
| | | data: { |
| | | dataId: item.data.dataId, |
| | | dataId: item.dataId, |
| | | nodeType: item.nodeType, |
| | | nodeTypeExt: item.data.nodeTypeExt, |
| | | nodeTypeExt: item.nodeTypeExt, |
| | | productType: item.productType, |
| | | statusImg:item.statusImg |
| | | }, |
| | | attrs: { |
| | |
| | | cell.removeTools() |
| | | }) |
| | | |
| | | this.getDiagram() |
| | | await this.getDiagram(this.dataForm.id) |
| | | }, |
| | | showPorts(ports, show) { |
| | | for (let i = 0, len = ports.length; i < len; i = i + 1) { |