programs_info/三资项目/删除前备份/前段代码/workflow/components/myProcess/addWorkCanvas.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="containeraddworkdetail" 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_fgld_1_0_1',
		name: '分管领导审核',
		value: [285, 100],
		symbol: 'image://' + require('../asste/huifangkuai.png'),
		symbolSize: [110, 60]
	},
	{
		name: '上级分管领导\n审核',
		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: '主要领导\n审核',
		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_superior_1_0_1',
		lineStyle: lineStyle,
		coords: [[125, 100], [185, 100]]
	},
	{
		nodeKey: 'dept_head_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: '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: 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: 'dept_head_1_0_1_back',
		lineStyle: lineStyle,
		coords: [[50, 100], [50, 250]],
		symbol: 'none'
	},
	{
		nodeKey: 'dept_superior_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: 'dept_head_1_0_1_back',
		lineStyle: lineStyle,
		coords: [[210, 250], [50, 250]],
		symbol: 'none'
	},
	{

		nodeKey: 'dept_superior_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',
	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++) {
				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_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')
							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('containeraddworkdetail')
				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: 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>

</style>