programs_info/三资项目/删除前备份/前段代码/workflow/components/myProcess/lxSjWorkCanvas.vue

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

	</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_superior_1_0_1',
        name: '直接上级审核',
        value: [125, 100],
        symbol: 'image://' + require('../asste/huifangkuai.png'),
        symbolSize: [110, 60]
    },
    {
        nodeKey: 'dept_head_1_0_1',
        name: '部门负责人审核',
        value: [205, 100],
        symbol: 'image://' + require('../asste/huifangkuai.png'),
        symbolSize: [110, 60]
    },
    {
        nodeKey: 'flow_cwfzr_1_0_1',
        name: '财务负责人',
        value: [285, 100],
        symbol: 'image://' + require('../asste/huifangkuai.png'),
        symbolSize: [110, 60]
    },
    {
        nodeKey: 'flow_fgld_1_0_1',
        name: '分管领导审核',
        value: [365, 100],
        symbol: 'image://' + require('../asste/huifangkuai.png'),
        symbolSize: [110, 60]
    },
    {
        nodeKey: 'flow_sjfgld_1_0_1',
        name: '上级分管领导\n审核',
        value: [445, 100],
        symbol: 'image://' + require('../asste/huifangkuai.png'),
        symbolSize: [110, 60]
    },
    {
        nodeKey: 'flow_zjl_1_0_1',
        name: '总经理（董事长）\n审核',
        value: [605, 100],
        symbol: 'image://' + require('../asste/huifangkuai.png'),
        symbolSize: [110, 60]
    },
    {
        name: '结束',
        value: [685, 100],
        symbol: 'image://' + require('../asste/huifangkuai.png'),
        symbolSize: [110, 60]
    },
    {
        label: {
            show: true,
            color: 'red', // 节点文字颜色
            backgroundColor: '#f5f5f5'
        },
        itemStyle: {
            color: '#f5f5f5'
        },
        name: '  退回发起人    ',
        value: [450, 500],
        symbolSize: [70, 20]
    },
    // {
    //     label: {
    //         show: true,
    //         color: 'red', // 节点文字颜色
    //         backgroundColor: '#f5f5f5'
    //     },
    //     itemStyle: {
    //         color: '#f5f5f5'
    //     },
    //     name: '退回发起人  ',
    //     value: [400, 450],
    //     symbolSize: [70, 20]
    // },
    {
        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: 'rgb(0,0,0,0)'
        },
        name: ' 项目金额<200万 ',
        value: [525, 40],
        symbolSize: [20, 20]
    },
    {
        label: {
            show: true,
            color: 'red', // 节点文字颜色
            backgroundColor: '#f5f5f5'
        },
        itemStyle: {
            color: 'rgb(0,0,0,0)'
        },
        name: ' 项目金额≥200万 ',
        value:  [525, 100],
        symbolSize: [110, 60]
    },
    {
        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], [100, 100]]
    },
    {
        nodeKey: 'dept_superior_1_0_1',
        lineStyle: lineStyle,
        coords: [[125, 100], [180, 100]]
    },
    {
        nodeKey: 'dept_head_1_0_1',
        lineStyle: lineStyle,
        coords: [[205, 100], [260, 100]]
    },
    {
        nodeKey: 'flow_cwfzr_1_0_1',
        lineStyle: lineStyle,
        coords: [[285, 100], [340, 100]]
    },
    {
        nodeKey: 'flow_fgld_1_0_1',
        lineStyle: lineStyle,
        coords: [[365, 100], [420, 100]]
    },
    {
        nodeKey: 'flow_sjfgld_1_0_1',
        lineStyle: lineStyle,
        coords: [[445, 100], [580, 100]]
    },
    {
        nodeKey: 'flow_zjl_1_0_1',
        lineStyle: lineStyle,
        coords: [[600, 100], [660, 100]]
    },
    {
        nodeKey: 'flow_zjl_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[610, 100], [610, 500]],
        symbol: 'none'
    },
    {
        nodeKey: 'less_3day1',
        lineStyle: lineStyle,
        coords: [[450, 70], [450, 40]],
        symbol: 'none'
    },
    {
        nodeKey: 'less_3day1',
        lineStyle: lineStyle,
        coords: [[450, 40], [685, 40]],
        symbol: 'none'
    },
    {
        nodeKey: 'less_3day1',
        lineStyle: lineStyle,
        coords: [[685, 40], [685, 70]]
    },
    {
        nodeKey: 'flow_sjfgld_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[450, 100], [450, 400]],
        symbol: 'none'
    },
    {
        nodeKey: 'flow_fgld_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[370, 100], [370, 350]],
        symbol: 'none'
    },
    {
        nodeKey: 'flow_cwfzr_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[290, 100], [290, 300]],
        symbol: 'none'
    },
    {
        nodeKey: 'dept_head_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[210, 100], [210, 250]],
        symbol: 'none'
    },
    {
        nodeKey: 'dept_superior_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[130, 100], [130, 200]],
        symbol: 'none'
    },
    // {
    //     lineStyle: lineStyle,
    //     coords: [[50, 500],[50, 130]]
    // },
    {
        nodeKey: 'flow_zjl_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[610, 500], [50, 500]],
        symbol: 'none'
    },
    {
        nodeKey: 'flow_zjl_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[50, 500],[50, 130]]
    },
    // {
    //     lineStyle: lineStyle,
    //     coords: [[530, 450], [50, 450]],
    //     symbol: 'none'
    // },
    {
        nodeKey: 'flow_sjfgld_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[450, 400], [50, 400]],
        symbol: 'none'
    },
    {
        nodeKey: 'flow_sjfgld_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[50, 400],[50, 130]]
    },
    {
        nodeKey: 'flow_fgld_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[370, 350], [50, 350]],
        symbol: 'none'
    },
    {
        nodeKey: 'flow_fgld_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[50, 350],[50, 130]]
    },
    {
        nodeKey: 'flow_cwfzr_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[290, 300], [50, 300]],
        symbol: 'none'
    },
    {
        nodeKey: 'flow_cwfzr_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[50, 300],[50, 130]]
    },
    {
        nodeKey: 'dept_head_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[210, 250], [50, 250]],
        symbol: 'none'
    },
    {
        nodeKey: 'dept_head_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[50, 250],[50, 130]]
    },
    {
        nodeKey: 'dept_superior_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[130, 200], [50, 200]],
        symbol: 'none'
    },
    {
        nodeKey: 'dept_superior_1_0_1_back',
        lineStyle: lineStyle,
        coords: [[50, 200],[50, 130]]
    },
    {
        lineStyle: lineStyle,
        coords: [[50, 150], [50, 150]],
        symbol: 'none'
    },
    {
        lineStyle: lineStyle,
        coords: [[50, 150],[50, 130]]
    }

]
export default {
	name: 'lxSjWorkCanvas',
	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('222222222222222222222222222prosale')
            console.log(row)
			console.log(data)
			for (let i = 0; i < data.length; i++) {
				let 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_superior_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_superior_1_0_1_back')
							this.getImgUrl(index, data[i].type)
						}
						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)
						}
						if (data[i].isPass == '1') {
							this.getLineStyle('only_tiaoxiujia1')
							let 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_cwfzr_1_0_1':
                        this.getImgUrl(index, data[i].type)

                        if (data[i].type == 1) {
                            this.getLineStyle('flow_cwfzr_1_0_1')
                        }
                        if (data[i].type == 2) {
                            this.getLineStyle('flow_cwfzr_1_0_1_back')

                        }
                        break

					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':
                        if(!row.prosale||(row.prosale&&row.prosale<2000000)){
                            this.getLineStyle('less_3day1')
                        }else{
                            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')

						}
                        if (data[i].type == 1&&(!row.prosale||(row.prosale&&row.prosale<2000000))) {
                            let endIndex = this.node.findIndex((e) => e.name == '结束')
                            this.getImgUrl(endIndex, '1')
                        }
						break

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

                        if (data[i].type == 2) {

                            this.getLineStyle('flow_zjl_1_0_1_back')
                            // this.node[index].symbol = 'image://' + require('../asste/lanselingxin.jpg')

                        }
                        if (data[i].type == 3) {
                            this.getLineStyle('flow_sjfgld_1_0_1')
                            this.getImgUrl(index, data[i].type)
                            // 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')
							let 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':
					console.log(index)
					console.log(this.node[index])
					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(() => {
				let chartDom = document.getElementById('containeraddworkdetail2')
				let myCharts = null
				myCharts = echarts.init(chartDom)
				let charts = {
					nodes: this.node,
					linesData: this.linesData
				}
				let option = {
					xAxis: {
						min: 0,
						max: 760,
						padding: [0, 50, 0, 50],
						show: false,
						type: 'value'
					},
					yAxis: {
						min: 0,
						max: 650,
						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>
.dis_flex {
    display: flex;
}

.node_info {
    width: 100%;
    display: block;
    margin: 0 auto;
    display: flex;
    padding-top: 10px;
    justify-content: center;
    background: #F5F5F5;
}

.node_class {
    height: 15px;
    width: 15px;
    background: white;
    margin: 0 10px;
    border-radius: 0.2rem;
}
</style>