programs_info/三资项目/删除前备份/前段代码/workflow/components/myProcess/holidayCanvas.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 v-show="true" id="containerHolidayDetails" style="width: 100%"></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 = [ // 节点
	{
		name: '申请人发起',
		nodeKey: 'curr_user',
		value: [0, 500],
		symbol: 'image://' + require('../asste/huifangkuai.png'),
		symbolSize: [110, 60]
	},
	{
		name: '直接上级审核',
		value: [80, 500],
		nodeKey: 'dept_superior_1_0_1',
		symbol: 'image://' + require('../asste/huifangkuai.png'),
		symbolSize: [110, 60]
	},
	{

		name: '部门负责人审核',
		value: [160, 500],
		nodeKey: 'dept_head_1_0_1',
		symbol: 'image://' + require('../asste/huifangkuai.png'),
		symbolSize: [110, 60]
	},
	{
		label: {
			show: true,
			color: '#777777' // 节点文字颜色
		},

		name: '假别仅有\n调休假',
		nodeKey: 'only_tiaoxiujia',
		value: [240, 500],
		symbol: 'image://' + require('../asste/lingxing.png'),
		symbolSize: [80, 80]
	},
	{
		label: {
			show: true,
			color: 'red', // 节点文字颜色
			backgroundColor: 'rgb(0,0,0,0)'
		},
		itemStyle: {
			color: 'rgb(0,0,0,0)'

		},
		name: '是',
		value: [280, 500],
		symbolSize: [20, 20]
	},
	{
		label: {
			show: true,
			color: '#777777' // 节点文字颜色
		},
		nodeKey: 'less_3day',
		name: '请假天数',
		value: [240, 375],
		symbol: 'image://' + require('../asste/lingxing.png'),
		symbolSize: [80, 80]
	},
	{
		name: '分管领导\n审核',
		value: [310, 225],
		nodeKey: 'flow_fgld_1_0_1',
		symbol: 'image://' + require('../asste/huifangkuai.png'),
		symbolSize: [110, 60]
	},
	{
		name: '上级分管领导\n审核',
		value: [390, 225],
		nodeKey: 'flow_sjfgld_1_0_1',
		symbol: 'image://' + require('../asste/huifangkuai.png'),
		symbolSize: [110, 60]
	},
	{
		name: '主要领导\n审核',
		value: [480, 225],
		nodeKey: 'flow_zyld_1_0_1',
		symbol: 'image://' + require('../asste/huifangkuai.png'),
		symbolSize: [110, 60]
	},
	{
		name: '结束',
		nodeKey: 'isPass',
		value: [570, 500],
		symbol: 'image://' + require('../asste/huifangkuai.png'),
		symbolSize: [110, 60]
	},
	{
		label: {
			show: true,
			color: 'red' // 节点文字颜色
			//backgroundColor: '#f5f5f5'
		},
		itemStyle: {
			color: 'rgb(0,0,0,0)'
		},
		nodeKey: 'less_3day',
		name: '假期天数合计≤3天',
		value: [380, 375],
		symbolSize: [20, 20]
	},
	{
		label: {
			show: true,
			color: 'red' // 节点文字颜色
			//backgroundColor: '#f5f5f5'
		},
		itemStyle: {
			color: 'rgb(0,0,0,0)'
		},
		name: '假期天数合计>3天',
		value: [240, 275],
		symbolSize: [20, 20]
	},
	{

		label: {
			show: true,
			color: 'red' // 节点文字颜色
			// //backgroundColor: '#f5f5f5'
		},
		itemStyle: {
			color: 'rgb(0,0,0,0)'
		},
		nodeKey: 'dept_head_1_0_11',
		name: ' 退回发起人',
		value: [100, 150],

		symbolSize: [20, 20]
	},
	{
		label: {
			show: true,
			color: 'red' // 节点文字颜色
			//backgroundColor: '#f5f5f5'
		},
		itemStyle: {
			color: 'rgb(0,0,0,0)'
		},
		name: ' 退回发起人 ',
		value: [150, 100],
		symbolSize: [20, 20]
	},
	{
		label: {
			show: true,
			color: 'red' // 节点文字颜色
			//backgroundColor: '#f5f5f5'
		},
		itemStyle: {
			color: 'rgb(0,0,0,0)'
		},
		name: ' 退回发起人  ',
		value: [200, 50],
		symbolSize: [20, 20]
	},
	{
		label: {
			show: true,
			color: 'red' // 节点文字颜色
			//backgroundColor: '#f5f5f5'
		},
		itemStyle: {
			color: 'rgb(0,0,0,0)'
		},
		name: '  退回发起人  ',
		value: [45, 400],

		symbolSize: [20, 20]
	},
	{
		label: {
			show: true,
			color: 'red' // 节点文字颜色
			//backgroundColor: '#f5f5f5'
		},
		itemStyle: {
			color: 'rgb(0,0,0,0)'
		},
		name: '   退回发起人  ',
		value: [85, 350],

		symbolSize: [20, 20]
	}
]
const linesData = [ // 连线
	{
		nodeKey: 'curr_user',
		lineStyle: lineStyle,
		coords: [[0, 500], [60, 500]]
	},
	{
		nodeKey: 'dept_head_1_0_1',
		lineStyle: lineStyle,
		coords: [[80, 500], [140, 500]]
	},
	{
		nodeKey: 'only_tiaoxiujia1',
		lineStyle: lineStyle,
		coords: [[160, 500], [227, 500]]
	},
	{

		name: '是',
		nodeKey: 'only_tiaoxiujia',
		lineStyle: lineStyle,
		itemStyle: {
			color: 'rgb(0,0,0,0)'
		},
		coords: [[260, 500], [550, 500]]
	},
	{
		name: '假期天数合计小于三天线',
		lineStyle: lineStyle,
		nodeKey: 'less_3day2',
		coords: [[260, 375], [575, 375]],
		symbol: 'none'
	},
	{
		nodeKey: 'flow_fgld_1_0_1',
		lineStyle: lineStyle,
		name: '假期天数合计>3线',
		coords: [[244, 335], [244, 225]],
		symbol: 'none'
	},
	{
		lineStyle: lineStyle,
		nodeKey: 'flow_fgld_1_0_1',
		coords: [[244, 225], [293, 225]]
	},
	{
		nodeKey: 'flow_sjfgld_1_0_1',
		lineStyle: lineStyle,
		coords: [[293, 225], [372, 225]]
	},
	{
		nodeKey: 'flow_zyld_1_0_1',
		lineStyle: lineStyle,

		coords: [[372, 225], [463, 225]]
	},
	{
		lineStyle: lineStyle,
		nodeKey: 'flow_zyld_1_0_1',
		coords: [[463, 225], [575, 225]]

	},
	{
		nodeKey: 'flow_zyld_1_0_1',
		lineStyle: lineStyle,
		coords: [[575, 225], [575, 375]],
		symbol: 'none'
	},

	{
		lineStyle: lineStyle,
		nodeKey: 'less_3day3',
		key: 'less_3day3',
		coords: [[575, 375], [575, 470]]
	},
	{
		lineStyle: lineStyle,
		nodeKey: 'flow_fgld_1_0_11',
		coords: [[315, 225], [315, 150]],
		symbol: 'none'
	},
	{
		lineStyle: lineStyle,
		nodeKey: 'flow_fgld_1_0_11',
		coords: [[315, 150], [5, 150]],
		symbol: 'none'
	},
	{

		// name: '直接上级审核的退回发起线',
		nodeKey: 'flow_fgld_1_0_11',
		lineStyle: { ...lineStyle, color: 'rgba(0,0,0,0)' },
		coords: [[5, 150], [5, 470]]
	},
	{
		name: '',
		lineStyle: lineStyle,
		coords: [[395, 225], [395, 100]],
		symbol: 'none'
	},
	{

		// name: '直接上级审核的退回发起线',
		nodeKey: 'dept_superior_1_0_11',
		lineStyle: { ...lineStyle, color: 'rgba(0,0,0,0)' },
		coords: [[5, 400], [5, 470]]
	},
	{
		name: '发起人退回',
		lineStyle: lineStyle,
		coords: [[5, 50], [5, 470]]
	},
	{
		name: '',
		lineStyle: lineStyle,
		coords: [[5, 100], [395, 100]],
		symbol: 'none'
	},
	{
		name: '',
		lineStyle: lineStyle,
		coords: [[480, 225], [480, 50]],
		symbol: 'none'
	},
	{
		name: '',
		lineStyle: lineStyle,
		coords: [[480, 50], [5, 50]],
		symbol: 'none'
	},
	{
		name: '直接上级审核的退回发起线',
		nodeKey: 'dept_superior_1_0_11',
		lineStyle: lineStyle,
		coords: [[85, 500], [85, 400]],
		symbol: 'none'
	},
	{
		name: '直接上级审核的退回发起线',
		nodeKey: 'dept_superior_1_0_11',
		lineStyle: lineStyle,
		coords: [[85, 400], [5, 400]],
		symbol: 'none'
	},
	{
		name: '',
		lineStyle: lineStyle,
		nodeKey: 'dept_head_1_0_11',

		coords: [[165, 500], [165, 350]],
		symbol: 'none'
	},
	{
		name: '',
		nodeKey: 'dept_head_1_0_11',
		lineStyle: lineStyle,
		coords: [[165, 350], [5, 350]],
		symbol: 'none'
	},
	{
		name: '',
		nodeKey: 'dept_head_1_0_11',
		lineStyle: lineStyle,
		coords: [[5, 350], [5, 470]],
		symbol: 'none'
	},

	{
		name: '',
		nodeKey: 'less_3day1',
		lineStyle: lineStyle,
		coords: [[243.9, 465], [243.9, 415]]

	}
	//
]
export default {
	name: 'holidayCanvas',
	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))
			// return
			const { data } = await this.baseRequest1('FlowMainController', 'getIMGFlowHistroyByFlowMainId', { flowMainId: row.id })
			console.log(data)
			this.linesData = [...linesData]
			this.node = [...node]
			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.getLineStyle(data[i].nodeKey)
							this.getImgUrl(index, data[i].type)
						}
						if (data[i].type === 2) {
							this.getLineStyle(data[i].nodeKey)

							this.getLineStyle('dept_superior_1_0_11')
							this.getImgUrl(index, data[i].type)
						}
						break
					case 'dept_head_1_0_1':
						if (data[i].type == 1 || data[i].type == 3) {
							this.getLineStyle(data[i].nodeKey)

							console.log(data[i].nodeKey)
							this.getImgUrl(index, data[i].type)
						}
						if (data[i].type == 2) {
							this.getLineStyle(data[i].nodeKey)

							this.getLineStyle('dept_head_1_0_11')
							this.getImgUrl(index, data[i].type)
						}
						if (data[i].type == '1') {
							this.getLineStyle('only_tiaoxiujia1')
							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)
						}
						if (data[i].type == 1) {
							let endIndex = this.node.findIndex((e) => e.name == '结束')
							console.log('endIndex', endIndex)
							this.getImgUrl(endIndex, '1')
						}
						break
					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.getLineStyle('less_3day1')
						this.reductionLineStyle('less_3day2')
						this.reductionLineStyle('less_3day3')
						this.getLineStyle('only_tiaoxiujia1')
						this.getLineStyle(data[i].nodeKey)
						this.getImgUrl(index, data[i].type)
						if (data[i].type == 2) {

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

						}
						break

					case 'flow_sjfgld_1_0_1':
						this.getLineStyle('less_3day1')
						this.reductionLineStyle('less_3day2')
						this.reductionLineStyle('less_3day3')
						this.getLineStyle('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_11')
							// this.node[index].symbol = 'image://' + require('../asste/lanselingxin.jpg')

						}
						break
					case 'flow_zyld_1_0_1':
						this.getLineStyle('less_3day1')
						this.reductionLineStyle('less_3day2')
						this.reductionLineStyle('less_3day3')
						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 == '结束')
							console.log('endIndex', endIndex)
							this.getImgUrl(endIndex, '1')
						}

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

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

						}
						break

				 //
					default:
				}
			}
			this.getNode()
			// this.createNodeCanvas()
		},
		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) {
			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('containerHolidayDetails')
				let myCharts = null
				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: 600,
						show: false,
						type: 'value'
					},
					grid: {
						left: 50,
						right: 0,
						bottom: 0,
						top: 0
					},

					series: [
						{
							type: 'graph',
							coordinateSystem: 'cartesian2d',
							symbol: 'rect',
							symbolSize: [80, 40],
							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>