programs_info/三资项目/删除前备份/前段代码/workflow/components/myProcess/costCanvas.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-if="chartStatus" id="costCanvas" style="width: 100%"></div>
		<!--		<el-button @click="reseat"> 重置</el-button>-->

	</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, 375],
		symbol: 'image://' + require('../asste/huifangkuai.png'),
		symbolSize: [110, 60]
	},
	{
		nodeKey: 'dept_superior_1_0_1-yes',
		name: '直接上级审核',
		value: [75, 375],
		symbol: 'image://' + require('../asste/huifangkuai.png'),
		symbolSize: [110, 60]
	},
	{
		nodeKey: 'dept_head_1_0_1-yes',
		name: '部门负责人审核',
		value: [150, 375],
		symbol: 'image://' + require('../asste/huifangkuai.png'),
		symbolSize: [110, 60]
	},
	{
		name: '报支金额',
		value: [225, 375],
		nodeKey: 'flow_cnzf_0_0_1-yes',
		label: {
			show: true,
			color: '#777777' // 节点文字颜色
		},
		symbol: 'image://' + require('../asste/lingxing.png'),
		symbolSize: [80, 80]
	},
	{
		nodeKey: 'flow_cnzf_0_0_1-yes@noenough',
		name: '出纳支付',
		value: [225, 500],
		symbol: 'image://' + require('../asste/huifangkuai.png'),
		symbolSize: [110, 60]
	},
	{
		name: '分管领导审核',
		nodeKey: 'flow_fgld_1_0_1-yes',
		value: [225, 250],
		symbol: 'image://' + require('../asste/huifangkuai.png'),
		symbolSize: [110, 60]
	},
	{
		name: '上级分管领导审核',
		nodeKey: 'flow_sjfgld_1_0_1-yes',
		value: [300, 250],
		symbol: 'image://' + require('../asste/huifangkuai.png'),
		symbolSize: [110, 60]
	},
	{
		name: '主要领导审核',
		nodeKey: 'flow_zyld_1_0_1-yes',
		value: [375, 250],
		symbol: 'image://' + require('../asste/huifangkuai.png'),
		symbolSize: [110, 60]
	},
	{
		name: '出纳支付 ',
		nodeKey: 'flow_cnzf_0_0_1-yes@enough',
		value: [450, 250],
		symbol: 'image://' + require('../asste/huifangkuai.png'),
		symbolSize: [110, 60]
	},
	{
		nodeKey: 'flow_zffh_0_0_1-yes@end',
		name: '支付复核',
		value: [450, 375],
		symbol: 'image://' + require('../asste/huifangkuai.png'),
		symbolSize: [110, 60]
	},
	{
		nodeKey: '结束',
		name: '结束',
		value: [525, 375],
		symbol: 'image://' + require('../asste/huifangkuai.png'),
		symbolSize: [110, 60]
	}

]
const linesData = [ // 连线
	{

		label: {
			show: true,
			position: 'middle',
			opacity: 1,
			width: 10,
			height: 15,
			fontSize: 16,
			lineHeight: 0,
			color: 'red',
			padding: [15, 15, 15, 15],
			verticalAlign: 'middle'

		},

		name: '退回发起人',
		nodeKey: '小于三千出纳退回线',
		lineStyle: lineStyle,
		coords: [[225, 500], [5, 500]],
		symbol: 'none'
	},
	{
		nodeKey: '小于三千出纳退回线',
		lineStyle: lineStyle,
		symbol: 'none',
		coords: [[5, 500], [5, 405]]
	},
	{
		nodeKey: '直接上级审核退回线',
		lineStyle: lineStyle,
		coords: [[5, 445], [5, 405]]
	},
	{
		nodeKey: '部门负责人审核退回线',
		lineStyle: lineStyle,
		coords: [[5, 475], [5, 405]]

	},
	{
		nodeKey: '部门负责人审核退回线',
		lineStyle: lineStyle,
		coords: [[150, 375], [150, 475]],
		symbol: 'none'
	},
	{

		label: {
			show: true,
			position: 'middle',
			opacity: 1,
			width: 10,
			height: 15,
			fontSize: 16,
			lineHeight: 0,
			color: 'red',
			padding: [15, 15, 15, 15],
			verticalAlign: 'middle'

		},

		name: '退回发起人',
		lineStyle: lineStyle,
		nodeKey: '部门负责人审核退回线',
		coords: [[150, 475], [5, 475]],
		symbol: 'none'
	},
	{
		name: '直接上级审核退回',
		nodeKey: '直接上级审核退回线',
		lineStyle: lineStyle,
		coords: [
			[75, 375],
			[75, 445]
		],
		symbol: 'none'
	},
	{

		label: {
			show: true,
			position: 'middle',
			opacity: 1,
			width: 10,
			height: 15,
			fontSize: 16,
			lineHeight: 0,
			color: 'red',
			padding: [15, 15, 15, 15],
			verticalAlign: 'middle'

		},
		name: '退回发起人',
		nodeKey: '直接上级审核退回线',
		lineStyle: lineStyle,
		coords: [[75, 445], [5, 445]],
		symbol: 'none'
	},
	{
		nodeKey: '直接上级审核退回线',
		name: '直接上级退回',
		lineStyle: lineStyle,
		coords: [
			[75, 375],
			[75, 445]
		],
		symbol: 'none'
	},
	{
		nodeKey: '报支金额<500',
		lineStyle: lineStyle,
		coords: [[229.5, 410], [229.5, 470]]
	},
	{
		label: {
			show: true,
			position: 'end',
			opacity: 1,
			fontSize: 16,
			color: 'red'
		},
		name: '报支金额<500',
		coords: [[255, 440], [255, 440]],
		symbol: 'none'
	},
	{
		nodeKey: 'dept_superior_1_0_1-yes',
		lineStyle: lineStyle,
		coords: [[0, 375], [55, 375]]
	},
	{
		nodeKey: 'dept_head_1_0_1-yes',
		lineStyle: lineStyle,
		coords: [[75, 375], [130, 375]]
	},
	{
		nodeKey: 'flow_cnzf_0_0_1-yes',
		lineStyle: lineStyle,
		coords: [[165, 375], [213, 375]]
	},
	{
		nodeKey: '报支金额>500',
		lineStyle: lineStyle,
		coords: [[229.5, 340], [229.5, 280]]
	},
	{
		label: {
			show: true,
			position: 'end',
			opacity: 1,
			fontSize: 16,
			color: 'red'

		},
		name: '报支金额>500',
		lineStyle: {
			color: '#00116a',
			width: 2,
			type: 'dotted'
		},
		coords: [[255, 320], [255, 320]],
		symbol: 'none'
	},
	{
		nodeKey: '分管领导退回线',
		lineStyle: lineStyle,
		coords: [[229.5, 270], [229.5, 180]],
		symbol: 'none'
	},
	{
		label: {
			show: true,
			position: 'middle',
			opacity: 1,
			width: 10,
			height: 15,
			fontSize: 16,
			lineHeight: 0,
			color: 'red',
			padding: [15, 15, 15, 15],
			verticalAlign: 'middle'

		},
		nodeKey: '分管领导退回线',
		name: '退回发起人',
		lineStyle: lineStyle,
		coords: [[229.5, 180], [5, 180]],
		symbol: 'none'
	},
	{
		name: '申请人发起下面的那条线',
		lineStyle: lineStyle,
		coords: [[5, 85], [5, 345]]
	},
	{
		name: '分管领导退回线',
		lineStyle: lineStyle,
		coords: [[5, 180], [5, 345]]
	},
	{
		name: '大于500出纳支付退回线',
		lineStyle: lineStyle,
		coords: [[5, 85], [5, 345]]
	},
	{
		nodeKey: '上级分管领导退回线',
		lineStyle: lineStyle,
		coords: [[305, 250], [305, 145]],
		symbol: 'none'
	},
	{
		name: '上级分管领导退回线',
		lineStyle: lineStyle,
		coords: [[5, 145], [5, 345]]
	},
	{
		label: {
			show: true,
			position: 'middle',
			opacity: 1,
			width: 10,
			height: 15,
			fontSize: 16,
			lineHeight: 0,
			color: 'red',
			padding: [15, 15, 15, 15],
			verticalAlign: 'middle'

		},
		nodeKey: '上级分管领导退回线',
		name: '退回发起人',
		lineStyle: lineStyle,
		coords: [[305, 145], [5, 145]],
		symbol: 'none'
	},
	{
		nodeKey: '主要领导退回线',
		lineStyle: lineStyle,

		coords: [[380, 245], [380, 115]],
		symbol: 'none'
	},
	{
		nodeKey: '主要领导退回线',
		lineStyle: lineStyle,
		coords: [[5, 115], [5, 345]]
	},
	{
		label: {
			show: true,
			position: 'middle',
			opacity: 1,
			width: 10,
			height: 15,
			fontSize: 16,
			lineHeight: 0,
			color: 'red',
			padding: [15, 15, 15, 15],
			verticalAlign: 'middle'

		},
		nodeKey: '主要领导退回线',
		name: '退回发起人',
		lineStyle: lineStyle,
		coords: [[380, 115], [5, 115]],
		symbol: 'none'
	},
	{

		nodeKey: '大于500出纳支付退回线',
		lineStyle: lineStyle,
		coords: [[455, 250], [455, 85]],
		symbol: 'none'
	},
	{
		label: {
			show: true,
			position: 'middle',
			opacity: 1,
			width: 10,
			height: 15,
			fontSize: 16,
			lineHeight: 0,
			color: 'red',
			padding: [15, 15, 15, 15],
			verticalAlign: 'middle'

		},
		nodeKey: '大于500出纳支付退回线',
		name: '退回发起人',
		lineStyle: lineStyle,
		coords: [[455, 85], [5, 85]],
		symbol: 'none'
	},
	{
		name: '',
		// 小于三千复核退回
		lineStyle: lineStyle,
		coords: [[229.5, 550], [229.5, 530]]
	},
	{
		label: {
			show: true,
			position: 'middle',
			opacity: 1,
			width: 10,
			height: 15,
			fontSize: 16,
			lineHeight: 0,
			color: 'red',
			padding: [15, 15, 15, 15],
			verticalAlign: 'middle'

		},
		name: '返回上一节点',
		lineStyle: lineStyle,
		coords: [[229.5, 550], [470, 550]],
		symbol: 'none'
	},
	{
		name: '大于三千出纳退回线',
		lineStyle: lineStyle,
		coords: [[470, 550], [470, 280]]
	},
	{
		name: '返回上一节点',
		label: {
			show: true,
			position: 'end',
			opacity: 1,
			fontSize: 16,
			color: 'red'

		},
		lineStyle: lineStyle,
		coords: [[495, 310], [495, 310]],
		symbol: 'none'
	},
	{
		nodeKey: '出纳支付过审线',
		lineStyle: lineStyle,
		coords: [[225, 500], [455, 500]],
		symbol: 'none'
	},
	{
		nodeKey: '出纳支付过审线',
		lineStyle: lineStyle,
		coords: [[455, 500], [455, 405]]
	},
	{
		nodeKey: '大于500出纳支付过审线',
		lineStyle: lineStyle,
		coords: [[455, 280], [455, 350]]
	},
	{
		nodeKey: 'flow_fgld_1_0_1-yes',
		// 分管领导审核过审
		lineStyle: lineStyle,
		coords: [[225, 250], [280, 250]]
	},
	{
		nodeKey: '上级分管领导过审线',
		lineStyle: lineStyle,
		coords: [[325, 250], [355, 250]]
	},
	{
		nodeKey: '主要领导过审线',
		lineStyle: lineStyle,
		coords: [[385, 250], [430, 250]]
	},
	{
		name: '',
		nodeKey: '结束',
		lineStyle: lineStyle,
		coords: [[450, 375], [505, 375]]
	}
]
export default {
	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: {
		reseat() {
			this.linesData = [...linesData]
			this.node = [...node]
			console.log(node)
			this.getNode()
		},
		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)
			try {
				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-yes':
							this.getImgUrl(index, data[i].type)
							if (data[i].type == 1 || data[i].type == 3) {
								this.getLineStyle(data[i].nodeKey)
							}

							if (data[i].type == 2) this.getLineStyle('直接上级审核退回线')
							break
						case 'dept_head_1_0_1-yes':
							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('部门负责人审核退回线')
								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 'flow_cnzf_0_0_1-yes@noenough':
							// noenough代表这是小于3千
							this.getImgUrl(index, data[i].type)
							this.getLineStyle(data[i].nodeKey)
							if (data[i].type == 1 || data[i].type == 3) {
								this.node[this.node.findIndex((e) => e.nodeKey == 'flow_cnzf_0_0_1-yes')].symbol = 'image://' + require('../asste/lanselingxin.jpg')
								this.getLineStyle('flow_cnzf_0_0_1-yes')
								this.getLineStyle('报支金额<500')
							}
							if (data[i].type == 1) {
								this.getLineStyle('出纳支付过审线')
							}
							if (data[i].type == 2) {
								this.node[this.node.findIndex((e) => e.nodeKey == 'flow_cnzf_0_0_1-yes')].symbol = 'image://' + require('../asste/lanselingxin.jpg')
								this.getLineStyle('flow_cnzf_0_0_1-yes')
								this.getLineStyle('报支金额<500')
								this.getLineStyle('小于三千出纳退回线')
							}
							break
						case 'flow_zffh_0_0_1-yes@end':
							// noenough代表这是小于3千
							this.getImgUrl(index, data[i].type)
							this.getLineStyle(data[i].nodeKey)
							if (data[i].type == 1 || data[i].type == 3) {
								this.getLineStyle('flow_cnzf_0_0_1-yes')

							}
							if (data[i].type == 1) {
								let endIndex = this.node.findIndex((e) => e.name == '结束')
								this.getLineStyle('结束')
								this.getImgUrl(endIndex, '1')
							}
							break
						case 'flow_fgld_1_0_1-yes':
							// flow_cnzf_0_0_1-yes
							this.getImgUrl(index, data[i].type)
							this.node[this.node.findIndex((e) => e.nodeKey == 'flow_cnzf_0_0_1-yes')].symbol = 'image://' + require('../asste/lanselingxin.jpg')
							this.getLineStyle('flow_cnzf_0_0_1-yes')
							this.getLineStyle('报支金额>500')
							if (data[i].type == 1) {
								this.getLineStyle(data[i].nodeKey)
							}
							if (data[i].type == 2) {
								this.getLineStyle('分管领导退回线')
							}
							break
						case 'flow_sjfgld_1_0_1-yes':
							this.getImgUrl(index, data[i].type)
							if (data[i].type == 1) {
								this.getLineStyle(data[i].nodeKey)
								this.getLineStyle('上级分管领导过审线')
							}

							if (data[i].type == 2) {
								this.getLineStyle('上级分管领导退回线')

							}
							break
						case 'flow_zyld_1_0_1-yes':
							this.getImgUrl(index, data[i].type)
							if (data[i].type == 1) {
								this.getLineStyle(data[i].nodeKey)
								this.getLineStyle('主要领导过审线')
							}
							if (data[i].type == 2) {
								this.getLineStyle('主要领导退回线')
							}
							break
						case 'flow_cnzf_0_0_1-yes@enough':
							this.getImgUrl(index, data[i].type)
							if (data[i].type == 1) {
								this.getLineStyle(data[i].nodeKey)
								this.getLineStyle('大于500出纳支付过审线')
							}
							if (data[i].type == 2) {
								this.getLineStyle('大于500出纳支付退回线')
							}

							break
					 //
						default:
					}
				}
			} catch (e) {
				console.log(e)
			}
			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() {

			let chartDom = document.getElementById('costCanvas')
			this.myCharts = null
			this.myCharts = echarts.init(chartDom)

			let charts = {
				nodes: this.node,
				linesData: this.linesData
			}
			let option = {
				xAxis: {
					min: 0,
					max: 600,
					show: false,
					type: 'value'
				},
				yAxis: {
					min: 0,
					max: 600,
					show: false,
					type: 'value'
				},
				grid: {
					left: 100,
					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 scoped>
#costCanvas {
	width: 100%;
	height: 600px;
	background: #F5F5F5;
}

</style>