105 lines
2.7 KiB
Vue
105 lines
2.7 KiB
Vue
<template>
|
|
<div>
|
|
<el-dialog v-loading="Loading" v-if="SuperFlowData.dialogVisible" :visible.sync="SuperFlowData.dialogVisible" :title="'流程图'" width="80%">
|
|
<div style="height:600px;">
|
|
<SeeksRelationGraph
|
|
ref="seeksRelationGraph"
|
|
:options="SuperFlowData.graphOptions"
|
|
/>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="SuperFlowData.dialogVisible = false">关 闭</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import SeeksRelationGraph from 'relation-graph'
|
|
import { requestFN } from '@/utils/request'
|
|
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
|
|
|
|
export default {
|
|
components: { Pagination, SeeksRelationGraph },
|
|
data() {
|
|
return {
|
|
Loading: false,
|
|
SuperFlowData: {
|
|
dialogVisible: false,
|
|
graphOptions: {
|
|
debug: true,
|
|
disableDragNode: true,
|
|
layouts: [
|
|
{
|
|
label: '中心',
|
|
layoutName: 'tree',
|
|
layoutClassName: 'seeks-layout-center',
|
|
defaultJunctionPoint: 'border',
|
|
defaultNodeShape: 0,
|
|
defaultLineShape: 1,
|
|
from: 'left',
|
|
min_per_width: '200',
|
|
max_per_width: '500',
|
|
min_per_height: '40',
|
|
max_per_height: '60',
|
|
levelDistance: ''
|
|
}
|
|
],
|
|
defaultNodeShape: 1,
|
|
defaultNodeWidth: '100',
|
|
defaultLineShape: 4,
|
|
defaultJunctionPoint: 'lr',
|
|
defaultNodeBorderWidth: 0
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
init(row) {
|
|
this.Loading = true
|
|
console.log(row)
|
|
this.SuperFlowData.dialogVisible = true
|
|
this.getInformation(row)
|
|
},
|
|
getInformation(row) {
|
|
requestFN(
|
|
'/safetyenvironmental/getFlowChart',
|
|
{
|
|
HIDDEN_ID: row.HIDDEN_ID
|
|
}
|
|
).then((data) => {
|
|
console.log(data.nodes, data.from)
|
|
this.viewFlowChart(data.nodes, data.from)
|
|
this.Loading = false
|
|
}).catch((e) => {
|
|
this.Loading = false
|
|
})
|
|
},
|
|
viewFlowChart(nodes, from) {
|
|
console.log(nodes)
|
|
console.log(from)
|
|
this.$nextTick(() => {
|
|
const __graph_json_data = {
|
|
nodes: nodes,
|
|
links: from
|
|
}
|
|
this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
|
|
// 这些写上当图谱初始化完成后需要执行的代码
|
|
this.Loading = false
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="sass" >
|
|
.print-approval-img
|
|
width: 2px
|
|
height: 97px
|
|
display: inline-block
|
|
img
|
|
width: 20px
|
|
height: 20px
|
|
</style>
|