programs_info/小艾协同/流程图地址/流程从三资开始和保障房合并后搬过来的/前端代码/workflow/components/myProcess/paymentCanvas.vue

<template>
  <div>
    <div class="node_info">
      <div>节点说明：</div>
      <div v-for="item in nodeColor" class="dis_flex">
        <div class="node_class" :style="{backgroundColor: item.nodeback}" />
        {{ item.name }}

      </div>
    </div>
    <div v-show="true" :id="id" style="width: 100%" />

  </div>
</template>

<script>
import * as echarts from 'echarts'

const lineStyle = {
    color: '#999999',
    width: 2,
    type: 'dotted'
}
const redLinestyle = {
    color: 'red',
    width: 2
}
const node = [ // 节点
    {
        nodeKey: 'curr_user',
        name: '经办人发起',
        value: [45, 100],
        symbol: 'image://' + require('../asste/huifangkuai.png'),
        symbolSize: [110, 60]
    },
    {
        nodeKey: 'dept_head_1_0_1',
        name: '部门负责人审核',
        value: [125, 100],
        symbol: 'image://' + require('../asste/huifangkuai.png'),
        symbolSize: [110, 60]
    },
    {
        nodeKey: 'flow_cwld_1_0_1',
        name: '财务负责人审核',
        value: [205, 100],
        symbol: 'image://' + require('../asste/huifangkuai.png'),
        symbolSize: [110, 60]
    },
    {
        nodeKey: 'flow_fgld_1_0_1',
        name: '分管领导审核',
        value: [285, 100],
        symbol: 'image://' + require('../asste/huifangkuai.png'),
        symbolSize: [110, 60]
    },
    {
        name: '总经理审核',
        nodeKey: 'flow_sjfgld_1_0_1',
        value: [365, 100],
        symbol: 'image://' + require('../asste/huifangkuai.png'),
        symbolSize: [110, 60]
    },
    {
        nodeKey: 'flow_zyld_1_0_1',
        name: '董事长审核',
        value: [445, 100],
        symbol: 'image://' + require('../asste/huifangkuai.png'),
        symbolSize: [110, 60]
    },
    {
        name: '结束',
        value: [525, 100],
        symbol: 'image://' + require('../asste/huifangkuai.png'),
        symbolSize: [110, 60]
    },
    {
        label: {
            show: true,
            color: 'red', // 节点文字颜色
            backgroundColor: '#f5f5f5'
        },
        itemStyle: {
            color: '#f5f5f5'
        },
        name: '退回发起人',
        value: [350, 400],
        symbolSize: [70, 20]
    },
    {
        label: {
            show: true,
            color: 'red', // 节点文字颜色
            backgroundColor: '#f5f5f5'
        },
        itemStyle: {
            color: '#f5f5f5'
        },
        name: '  退回发起人  ',
        value: [300, 350],
        symbolSize: [20, 20]
    },
    {
        label: {
            show: true,
            color: 'red', // 节点文字颜色
            backgroundColor: '#f5f5f5'
        },
        itemStyle: {
            color: '#f5f5f5'
        },
        name: ' 退回发起人 ',
        value: [250, 300],
        symbolSize: [20, 20]
    },
    {
        label: {
            show: true,
            color: 'red', // 节点文字颜色
            backgroundColor: '#f5f5f5'
        },
        itemStyle: {
            color: '#f5f5f5'
        },
        name: ' 退回发起人  ',
        value: [250, 300],
        symbolSize: [20, 20]
    },
    {
        label: {
            show: true,
            color: 'red', // 节点文字颜色
            backgroundColor: '#f5f5f5'
        },
        itemStyle: {
            color: '#f5f5f5'
        },
        name: ' 退回发起人   ',
        value: [175, 250],
        symbolSize: [20, 20]
    },
    {
        label: {
            show: true,
            color: 'red', // 节点文字颜色
            backgroundColor: '#f5f5f5'
        },
        itemStyle: {
            color: '#f5f5f5'
        },
        name: '  退回发起人   ',
        value: [100, 200],
        symbolSize: [20, 20]
    }
]
const linesData = [ // 连线
    {
        nodeKey: 'curr_user',
        lineStyle: lineStyle,
        coords: [[45, 100], [105, 100]]
    },
    {
        nodeKey: 'dept_head_1_0_1',
        lineStyle: lineStyle,
        coords: [[125, 100], [185, 100]]
    },
    {
        nodeKey: 'flow_cwld_1_0_1',
        lineStyle: lineStyle,
        coords: [[205, 100], [265, 100]]
    },
    {
        nodeKey: 'flow_fgld_1_0_1',

        lineStyle: lineStyle,
        coords: [[285, 100], [345, 100]]
    },
    {
        nodeKey: 'flow_sjfgld_1_0_1',

        lineStyle: lineStyle,
        coords: [[365, 100], [425, 100]]
    },
    {

        nodeKey: 'flow_zyld_1_0_1',

        lineStyle: lineStyle,
        coords: [[445, 100], [505, 100]]
    },
    {
        nodeKey: 'flow_zyld_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[450, 100], [450, 400]],
        symbol: 'none'
    },
    {

        nodeKey: 'flow_sjfgld_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[370, 100], [370, 350]],
        symbol: 'none'
    },
    {
        nodeKey: 'flow_fgld_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[290, 100], [290, 300]],
        symbol: 'none'
    },
    {

        nodeKey: 'flow_cwld_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[210, 100], [210, 250]],
        symbol: 'none'
    },
    {

        nodeKey: 'dept_head_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[130, 100], [130, 200]],
        symbol: 'none'
    },
    // {
    // 	lineStyle: redLinestyle,
    // 	coords: [[50, 100], [50, 400]],
    // 	symbol: 'none'
    // },
    {
        nodeKey: 'flow_zyld_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[50, 100], [50, 400]],
        symbol: 'none'
    },
    {
        nodeKey: 'flow_sjfgld_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[50, 100], [50, 350]],
        symbol: 'none'
    },
    {
        nodeKey: 'flow_fgld_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[50, 100], [50, 300]],
        symbol: 'none'
    },
    {
        nodeKey: 'flow_cwld_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[50, 100], [50, 250]],
        symbol: 'none'
    },
    {
        nodeKey: 'dept_head_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[50, 100], [50, 200]],
        symbol: 'none'
    },

    {
        lineStyle: lineStyle,
        nodeKey: 'flow_zyld_1_0_1_back',
        coords: [[450, 400], [50, 400]],
        symbol: 'none'
    },
    {
        nodeKey: 'flow_sjfgld_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[370, 350], [50, 350]],
        symbol: 'none'
    },
    {

        nodeKey: 'flow_fgld_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[290, 300], [50, 300]],
        symbol: 'none'
    },
    {

        nodeKey: 'flow_cwld_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[210, 250], [50, 250]],
        symbol: 'none'
    },
    {

        nodeKey: 'dept_head_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[130, 200], [50, 200]],
        symbol: 'none'
    },
    {
        lineStyle: lineStyle,
        coords: [[50, 150], [50, 150]],
        symbol: 'none'
    }

]
export default {
    name: 'AddWorkCanvas',
    props: {
        id: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            linesData: [],
            node: [],
            nodeColor: [
                { name: '审核通过', nodeback: '#2A3980' },
                { name: '未经过', nodeback: '#999999' },
                { name: '退回', nodeback: '#E04242' },
                { name: '审核中', nodeback: '#E08E42' },
                { name: '撤回', nodeback: '#4294E0' }
            ]
        }
    },
    mounted() {

    },
    methods: {

        baseRequest1(prefix, opUrl, postData) {
            return this.$channel.globleRequest(prefix, opUrl, postData, 'project task')
        },
        async createNodeCanvas(row) {
            this.linesData = JSON.parse(JSON.stringify(linesData))
            this.node = JSON.parse(JSON.stringify(node))
            const { data } = await this.baseRequest1('FlowMainController', 'getIMGFlowHistroyByFlowMainId', { flowMainId: row.id })
            console.log(data)
            for (let i = 0; i < data.length; i++) {
                const index = this.node.findIndex((e) => e.nodeKey == data[i].nodeKey)
                switch (data[i].nodeKey) {
                    case 'curr_user':
                        if (data[i].type == 1) {
                            this.getImgUrl(index, data[i].type)
                            this.getLineStyle(data[i].nodeKey)
                        }
                        break
                    case 'dept_head_1_0_1':
                        if (data[i].type == 1 || data[i].type == 3) {
                            this.getImgUrl(index, data[i].type)
                        }
                        if (data[i].type == 1) {
                            this.getLineStyle(data[i].nodeKey)
                        }
                        if (data[i].type == 2) {
                            this.getLineStyle('dept_head_1_0_1_back')
                            this.getImgUrl(index, data[i].type)
                        }
                        break
                    case 'flow_cwld_1_0_1':
                        if (data[i].type == 1 || data[i].type == 3) {
                            this.getImgUrl(index, data[i].type)
                        }
                        if (data[i].type == 1) {
                            this.getLineStyle(data[i].nodeKey)
                        }
                        if (data[i].type == 2) {
                            this.getLineStyle('flow_cwld_1_0_1_back')
                            this.getImgUrl(index, data[i].type)
                        }
                        if (data[i].isPass == '1') {
                            this.getLineStyle('only_tiaoxiujia1')
                            const index2 = this.node.findIndex((e) => e.nodeKey == 'isPass')
                            console.log(this.node, index2)
                            this.node[index2].symbol = 'image://' + require('../asste/lanfangkuai.png')
                        }
                        break
                    case 'only_tiaoxiujia':
                        if (data[i].type == 1 || data[i].type == 3) {
                            this.node[index].symbol = 'image://' + require('../asste/lanselingxin.jpg')
                            this.getLineStyle(data[i].nodeKey)
                        }

                    case 'flow_fgld_1_0_1':
                        this.getImgUrl(index, data[i].type)

                        if (data[i].type == 1) {
                            this.getLineStyle('flow_fgld_1_0_1')
                        }
                        if (data[i].type == 2) {
                            this.getLineStyle('flow_fgld_1_0_1_back')
                        }
                        break

                    case 'flow_sjfgld_1_0_1':

                        this.getLineStyle(data[i].nodeKey)
                        this.getImgUrl(index, data[i].type)
                        if (data[i].type == 2) {
                            this.getLineStyle('flow_sjfgld_1_0_1_back')

                            // this.node[index].symbol = 'image://' + require('../asste/lanselingxin.jpg')
                        }
                        break
                    case 'flow_zyld_1_0_1':
                        this.getLineStyle('less_3day1')

                        if (data[i].type == 1) {
                            this.getLineStyle('flow_sjfgld_1_0_1')
                            this.getLineStyle(data[i].nodeKey)
                            this.getImgUrl(index, data[i].type)
                            this.getLineStyle('less_3day3')
                            const endIndex = this.node.findIndex((e) => e.name == '结束')
                            this.getImgUrl(endIndex, '1')
                        }

                        if (data[i].type == 2) {
                            this.getLineStyle('flow_zyld_1_0_1_back')
                            // this.node[index].symbol = 'image://' + require('../asste/lanselingxin.jpg')
                        }
                        break
				 //
                    default:
                }
            }
            this.getNode()
        },
        reductionLineStyle(nodeKey) {
            for (let i = 0; i < this.linesData.length; i++) {
                if (this.linesData[i].nodeKey == nodeKey) {
                    this.linesData[i].lineStyle = lineStyle
                }
            }
        },
        getLineStyle(nodeKey) {
            for (let i = 0; i < this.linesData.length; i++) {
                if (this.linesData[i].nodeKey == nodeKey) {
                    this.linesData[i].lineStyle = {
                        color: '#2A3980',
                        width: 2
                    }
                }
            }
        },
        getImgUrl(index, type) {
            if (index == -1) return
            switch (type) {
                case '1':

                    this.node[index].symbol = 'image://' + require('../asste/lanfangkuai.png')
                    break
                case '2':
                    this.node[index].symbol = 'image://' + require('../asste/hongfangkuai.jpg')
                    break
                case '3':
                    this.node[index].symbol = 'image://' + require('../asste/huangfanmgkuai.png')
                    break
                case '4' || '5':
                    this.node[index].symbol = 'image://' + require('../asste/qianlanfangkuai.jpg')
                    break
                default:
            }
        },
        getNode() {
            this.$nextTick(() => {
                const chartDom = document.getElementById(this.id)
                let myCharts = null
                myCharts = echarts.init(chartDom)
                const charts = {
                    nodes: this.node,
                    linesData: this.linesData
                }
                const option = {
                    xAxis: {
                        min: 0,
                        max: 600,
                        padding: [0, 50, 0, 50],
                        show: false,
                        type: 'value'
                    },
                    yAxis: {
                        min: 0,
                        max: 450,
                        show: false,
                        type: 'value'
                    },
                    grid: {
                        left: 50,
                        right: 0,
                        bottom: 0,
                        top: 0
                    },

                    series: [
                        {
                            type: 'graph',
                            coordinateSystem: 'cartesian2d',
                            symbol: 'rect',
                            symbolSize: [80, 40],
                            itemStyle: {
                                color: 'rgb(225,7,7)'
                            },
                            symbolOffset: [10, 0],
                            // force: {
                            // 	edgeLength: 100,//连线的长度
                            // 	repulsion: 200 //子节点之间的间距
                            // },

                            label: {
                                show: true,
                                color: 'white' // 节点文字颜色
                            },

                            data: charts.nodes

                        },

                        {
                            type: 'lines',
                            polyline: false,
                            coordinateSystem: 'cartesian2d',
                            symbol: ['', 'arrow'],
                            symbolSize: 10,
                            data: charts.linesData

                        }

                    ]

                }
                myCharts.clear()

                myCharts.setOption(option)
                window.addEventListener('resize', () => {
                    myCharts.resize()
                })
            })
        }
    }
}
</script>

<style scoped>
#containeraddworkdetail1 {
    height: 600px;
    width: 100%;
    background: #F5F5F5;
}
#paymanetDetail{
    height: 600px;
    width: 100%;
    background: #F5F5F5;
}
#paymentConfirm{
    height: 600px;
    width: 100%;
    background: #F5F5F5;
}
</style>