programs_info/三资项目/删除前备份/前段代码/workflow/components/myProcess/payCanvas.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="containerPay" style="width: 100%" v-if="chartStatus"></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, 250],
		symbol: 'image://' + require('../asste/huifangkuai.png'),
		symbolSize: [110, 60]
	},
	{
		nodeKey: 'dept_superior_1_0_1',
		name: '直接上级审核',
		value: [125, 250],
		symbol: 'image://' + require('../asste/huifangkuai.png'),
		symbolSize: [110, 60]
	},
	{
		nodeKey: 'dept_head_1_0_1',
		name: '部门负责人审核',
		value: [205, 250],
		symbol: 'image://' + require('../asste/huifangkuai.png'),
		symbolSize: [110, 60]
	},
	{
		nodeKey: 'flow_fgld_1_0_1',
		name: '分管领导审核',
		value: [285, 250],
		symbol: 'image://' + require('../asste/huifangkuai.png'),
		symbolSize: [110, 60]
	},
	{
		nodeKey: 'flow_sjfgld_1_0_1',
		name: '上级分管领导\n审核',
		value: [365, 250],
		symbol: 'image://' + require('../asste/huifangkuai.png'),
		symbolSize: [110, 60]
	},
	{
		nodeKey: 'flow_zyld_1_0_1',
		name: '主要领导\n审核',
		value: [445, 250],
		symbol: 'image://' + require('../asste/huifangkuai.png'),
		symbolSize: [110, 60]
	},
	{
		nodeKey: 'flow_cnzf_0_0_1',
		name: '出纳支付',
		value: [525, 250],
		symbol: 'image://' + require('../asste/huifangkuai.png'),
		symbolSize: [110, 60]
	},
	{
		nodeKey: 'flow_zffh_0_0_1',
		name: '支付审核',
		value: [525, 100],
		symbol: 'image://' + require('../asste/huifangkuai.png'),
		symbolSize: [110, 60]
	},
	{
		name: '结束',
		value: [445, 100],
		symbol: 'image://' + require('../asste/huifangkuai.png'),
		symbolSize: [110, 60]
	},
	{
		label: {
			show: true,
			color: 'red', // 节点文字颜色
			backgroundColor: '#f5f5f5'
		},
		itemStyle: {
			color: '#f5f5f5'
		},
		name: '返回上一节点',
		value: [550, 180]
	},

	{
		label: {
			show: true,
			color: 'red', // 节点文字颜色
			backgroundColor: '#f5f5f5'
		},
		itemStyle: {
			color: '#f5f5f5'
		},
		name: '退回发起人   ',
		value: [450, 600],
		symbolSize: [70, 20]
	},
	{
		label: {
			show: true,
			color: 'red', // 节点文字颜色
			backgroundColor: '#f5f5f5'
		},
		itemStyle: {
			color: '#f5f5f5'
		},
		name: '退回发起人',
		value: [350, 550],
		symbolSize: [70, 20]
	},
	{
		label: {
			show: true,
			color: 'red', // 节点文字颜色
			backgroundColor: '#f5f5f5'
		},
		itemStyle: {
			color: '#f5f5f5'
		},
		name: '  退回发起人  ',
		value: [300, 500],
		symbolSize: [20, 20]
	},
	{
		label: {
			show: true,
			color: 'red', // 节点文字颜色
			backgroundColor: '#f5f5f5'
		},
		itemStyle: {
			color: '#f5f5f5'
		},
		name: ' 退回发起人 ',
		value: [250, 450],
		symbolSize: [20, 20]
	},
	{
		label: {
			show: true,
			color: 'red', // 节点文字颜色
			backgroundColor: '#f5f5f5'
		},
		itemStyle: {
			color: '#f5f5f5'
		},
		name: ' 退回发起人  ',
		value: [250, 450],
		symbolSize: [20, 20]
	},
	{
		label: {
			show: true,
			color: 'red', // 节点文字颜色
			backgroundColor: '#f5f5f5'
		},
		itemStyle: {
			color: '#f5f5f5'
		},
		name: ' 退回发起人   ',
		value: [175, 400],
		symbolSize: [20, 20]
	},
	{
		label: {
			show: true,
			color: 'red', // 节点文字颜色
			backgroundColor: '#f5f5f5'
		},
		itemStyle: {
			color: '#f5f5f5'
		},
		name: '  退回发起人   ',
		value: [100, 350],
		symbolSize: [20, 20]
	}

]
const linesData = [ // 连线
	{
		nodeKey: 'curr_user',
		lineStyle: lineStyle,
		coords: [[45, 250], [105, 250]]
	},
	{
		nodeKey: 'dept_superior_1_0_1',
		lineStyle: lineStyle,
		coords: [[125, 250], [185, 250]]
	},
	{

		nodeKey: 'dept_head_1_0_1',
		lineStyle: lineStyle,
		coords: [[205, 250], [265, 250]]
	},
	{
		nodeKey: 'flow_fgld_1_0_1',
		lineStyle: lineStyle,
		coords: [[285, 250], [345, 250]]
	},
	{
		nodeKey: 'flow_sjfgld_1_0_1',
		lineStyle: lineStyle,
		coords: [[365, 250], [425, 250]]
	},
	{
		nodeKey: 'flow_zyld_1_0_1',
		lineStyle: lineStyle,
		coords: [[445, 250], [505, 250]]
	},
	{
		name: '主要领导退回',
		nodeKey: 'flow_zyld_1_0_1_back',
		lineStyle: lineStyle,
		coords: [[450, 250], [450, 550]],
		symbol: 'none'
	},
	{

		name: '上级分管退回',
		nodeKey: 'flow_sjfgld_1_0_1_back',
		lineStyle: lineStyle,
		coords: [[370, 250], [370, 500]],
		symbol: 'none'
	},
	{
		nodeKey: 'flow_fgld_1_0_1_back',
		lineStyle: lineStyle,
		coords: [[290, 250], [290, 450]],
		symbol: 'none'
	},
	{
		nodeKey: 'dept_head_1_0_1_back',
		lineStyle: lineStyle,
		name: '部门负责人退回',
		coords: [[210, 250], [210, 400]],
		symbol: 'none'
	},
	{
		nodeKey: 'dept_superior_1_0_1_back',
		name: '直接上级退回',
		lineStyle: lineStyle,
		coords: [[130, 250], [130, 350]],
		symbol: 'none'
	},
	{

		name: '终点线1',
		nodeKey: 'dept_superior_1_0_1_back',
		lineStyle: lineStyle,
		coords: [[50, 250], [50, 350]],
		symbol: 'none'
	},
	{
		nodeKey: 'dept_head_1_0_1_back',
		name: '终点线2',
		lineStyle: lineStyle,
		coords: [[50, 350], [50, 400]],
		symbol: 'none'
	},
	{
		name: '终点线3',
		nodeKey: 'flow_fgld_1_0_1_back',
		lineStyle: lineStyle,
		coords: [[50, 400], [50, 450]],
		symbol: 'none'
	},
	{
		name: '终点线4',
		nodeKey: 'flow_sjfgld_1_0_1_back',
		lineStyle: lineStyle,
		coords: [[50, 450], [50, 500]],
		symbol: 'none'
	},
	{
		nodeKey: 'flow_zyld_1_0_1_back',
		name: '主要领导退回',
		lineStyle: lineStyle,
		coords: [[50, 500], [50, 550]],
		symbol: 'none'
	},
	{

		name: '终点线6',
		lineStyle: lineStyle,
		coords: [[50, 550], [50, 600]],
		symbol: 'none'
	},
	{
		nodeKey: 'flow_cnzf_0_0_1_back',
		name: '终点线',
		lineStyle: lineStyle,
		coords: [[50, 250], [50, 600]],
		symbol: 'none'
	},

	{

		name: '主要领导退回',
		nodeKey: 'flow_zyld_1_0_1_back',
		lineStyle: lineStyle,
		coords: [[450, 550], [50, 550]],
		symbol: 'none'
	},
	{

		name: '上级分管退回',
		nodeKey: 'flow_sjfgld_1_0_1_back',
		lineStyle: lineStyle,
		coords: [[370, 500], [50, 500]],
		symbol: 'none'
	},
	{

		name: '分管领导退回',
		nodeKey: 'flow_fgld_1_0_1_back',
		lineStyle: lineStyle,
		coords: [[290, 450], [50, 450]],
		symbol: 'none'
	},
	{

		nodeKey: 'dept_head_1_0_1_back',
		name: '部门负责人退回',
		lineStyle: lineStyle,
		coords: [[210, 400], [50, 400]],
		symbol: 'none'
	},
	{
		nodeKey: 'dept_superior_1_0_1_back',
		name: '直接上级退回',
		lineStyle: lineStyle,
		coords: [[130, 350], [50, 350]],
		symbol: 'none'
	},
	{
		nodeKey: 'flow_cnzf_0_0_1_back',
		name: '出纳退回',
		lineStyle: lineStyle,
		coords: [[50, 600], [530, 600]],
		symbol: 'none'
	},
	{
		nodeKey: 'flow_cnzf_0_0_1_back',
		name: '出纳退回',
		lineStyle: lineStyle,
		coords: [[530, 600], [530, 250]],
		symbol: 'none'
	},
	{
		name: '出纳支付',
		nodeKey: 'flow_zffh_0_0_1',
		lineStyle: redLinestyle,
		coords: [[530, 250], [530, 130]]
	},
	{
		name: '支付审核退回',
		lineStyle: lineStyle,
		coords: [[535, 130], [535, 220]]
	},
	{
		name: '结束',
		lineStyle: lineStyle,
		// nodeKey: 'flow_zffh_0_0_1',
		coords: [[525, 100], [475, 100]]
	}

]

export default {
	name: 'payCanvas',
	data() {
		return {
			chartStatus: true,
			linesData: [],
			node: [],
			myCharts: null,
			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) {
			try {

				this.linesData = JSON.parse(JSON.stringify(linesData))
				this.node = JSON.parse(JSON.stringify(node))
				const { data } = await this.baseRequest1('FlowMainController', 'getIMGFlowHistroyByFlowMainId', { flowMainId: row.id })

				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.getLineStyle('dept_superior_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')
								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 'less_3day':
							if (data[i].type == 1) {
								this.node[index].symbol = 'image://' + require('../asste/lanselingxin.jpg')
								this.reductionLineStyle('only_tiaoxiujia')
								this.getLineStyle('only_tiaoxiujia1')
								this.getLineStyle(data[i].nodeKey)
								this.getLineStyle('less_3day1')
								this.getLineStyle('less_3day2')
								this.getLineStyle('less_3day3')

							}
							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')
								this.getLineStyle('dept_superior_1_0_1_back')
								this.getLineStyle('dept_head_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.getLineStyle('flow_fgld_1_0_1_back')
								this.getLineStyle('dept_head_1_0_1_back')
								this.getLineStyle('dept_superior_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')
							}

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

								this.getLineStyle('flow_zyld_1_0_1_back')
								this.getLineStyle('flow_sjfgld_1_0_1_back')
								this.getLineStyle('flow_fgld_1_0_1_back')
								this.getLineStyle('dept_head_1_0_1_back')
								this.getLineStyle('dept_superior_1_0_1_back')
								this.getLineStyle('flow_sjfgld_1_0_11')
								// this.node[index].symbol = 'image://' + require('../asste/lanselingxin.jpg')

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

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

							break

					 //
						default:
					}
				}
				this.getNode()
				this.$forceUpdate()
			} catch (e) {
				console.log(e)
			}
		},
		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(() => {
				let chartDom = document.getElementById('containerPay')
				this.myCharts = null
				this.myCharts = echarts.init(chartDom)
				let charts = {
					nodes: this.node,
					linesData: this.linesData
				}
				let option = {
					xAxis: {
						min: 0,
						max: 600,
						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

						}

					]

				}
				this.chartStatus = false

				this.$nextTick(() => {
					this.myCharts.clear()
					this.$forceUpdate()
					this.myCharts.setOption(option, true)
				})
				this.chartStatus = true
				window.addEventListener('resize', () => {
					this.myCharts.resize()
				})
			})
		}
	}
}
</script>

<style>
#containerPay {
	width: 100%;
	height: 600px;
	background: #F5F5F5;
}

</style>