420/vue_mdc_420.git

			@@ -4,11 +4,15 @@

			<script>
			import * as echarts from 'echarts'
			import signageApi from '@/api/signage'

			export default {
			name: 'DayUtilizationRateTrend',
			components: {},
			props: {
			currentProductionId: {
			type: String
			},
			toDecimal2NoZero: {
			type: Function
			}
			@@ -20,63 +24,33 @@
			}
			},
			mounted() {
			this.getChartDataByApi()
			window.addEventListener('resize', this.handleWindowResize)
			if (!this.currentProductionId) return
			this.getChartDataByApi()
			},
			beforeDestroy() {
			window.removeEventListener('resize', this.handleWindowResize)
			},
			methods: {
			getChartDataByApi() {
			const that = this
			this.chartContainer = this.$echarts.init(document.getElementById(this.chartContainerId))
			this.initChart()
			signageApi.getDayUtilizationRateApi(this.currentProductionId)
			.then(res => {
			if (!res.success) return
			that.initChart(res.result)
			})
			},

			initChart() {
			const data = [
			{
			'number': 'A_1',
			'name': '1-D特种工艺',
			'count': 0.4452,
			'planCount': null,
			'rateCount': null
			},
			{
			'number': 'A_2',
			'name': '2-D整体机匣',
			'count': 0.7642,
			'planCount': null,
			'rateCount': null
			},
			{
			'number': 'A_3',
			'name': '3-D燃烧室机匣',
			'count': 0.4523,
			'planCount': null,
			'rateCount': null
			},
			{
			'number': 'A_4',
			'name': '4-D焊接机匣工段',
			'count': 0.6987,
			'planCount': null,
			'rateCount': null
			},
			{
			'number': 'A_5',
			'name': '5-D CRIC单元',
			'count': 0.8924,
			'planCount': null,
			'rateCount': null
			},
			]
			const xAxisData = []
			initChart(dataObj) {
			const seriesData = []
			const option = {
			tooltip: {
			show: true,
			trigger: 'item',
			formatter: params => `${params.name}：${params.value}%`
			trigger: 'axis',
			formatter: function(params) {
			return '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params[0].color + '"></span> ' + params[0].name + '&nbsp&nbsp&nbsp' + '<span style="font-weight: bold"> ' + params[0].value + '%' + '</span>'
			}
			},
			legend: {
			show: false,
			@@ -164,306 +138,9 @@
			},
			//barCategoryGap:'180%',
			itemStyle: {
			normal: {
			barBorderRadius: '',
			color: function(params) {
			const colorList = [
			//1-D特种工艺单元
			new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			{ offset: 0, color: '#9cc4f6' },
			{ offset: 1, color: '#538dd6' }
			]
			),
			new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			{ offset: 0, color: '#ffffa2' },
			{ offset: 1, color: '#ffff01' }
			]
			),
			new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			{ offset: 0, color: '#97fcc5' },
			{ offset: 1, color: '#0bae8d' }
			]
			),
			new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			{ offset: 0, color: '#ffbc85' },
			{ offset: 1, color: '#e26c0a' }
			]
			),
			new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			{ offset: 0, color: '#fb78ba' },
			{ offset: 1, color: '#8f0149' }
			]
			),
			new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			//环件单元
			{ offset: 0, color: '#d297ff' },
			{ offset: 1, color: '#7030a0' }
			]
			),
			new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			{ offset: 0, color: '#ffe491' },
			{ offset: 1, color: '#8f6c00' }
			]
			),
			new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			{ offset: 0, color: '#ffb6b9' },
			{ offset: 1, color: '#fd4c53' }
			]
			), new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			{ offset: 0, color: '#92cbba' },
			{ offset: 1, color: '#18a387' }
			]
			), new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			{ offset: 0, color: '#ff5b62' },
			{ offset: 1, color: '#a02100' }
			]
			), new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			{ offset: 0, color: '#b5d5e3' },
			{ offset: 1, color: '#1b8bd0' }
			]
			), new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			//中小机匣单元
			{ offset: 0, color: '#ebd3ff' },
			{ offset: 1, color: '#e889ff' }
			]
			), new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			{ offset: 0, color: '#D69123' },
			{ offset: 1, color: '#a16900' }
			]
			), new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			//低压导向
			{ offset: 0, color: '#d588c8' },
			{ offset: 1, color: '#9545AE' }
			]
			), new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			//低压叶片 1 4
			{ offset: 0, color: '#97abd6' },
			{ offset: 1, color: '#6268b2' }
			]
			), new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			{ offset: 0, color: '#d7dab2' },
			{ offset: 1, color: '#b8aa15' }
			]
			), new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			{ offset: 0, color: '#e9c9b0' },
			{ offset: 1, color: '#D9646A' }
			]
			), new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			{ offset: 0, color: '#a4e3d6' },
			{ offset: 1, color: '#01A55E' }
			]
			), new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[

			{ offset: 0, color: '#2052b1' },
			{ offset: 1, color: '#002b73' }
			]
			), new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			//盘件单元
			{ offset: 0, color: '#3e71e2' },
			{ offset: 1, color: '#0042c8' }
			]
			), new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			//结构件单元
			{ offset: 0, color: '#99d6cf' },
			{ offset: 1, color: '#21bf90' }
			]
			)
			, new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			// 7-D
			{ offset: 0, color: '#99d6cf' },
			{ offset: 1, color: '#0ad0bb' }
			]
			)
			, new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			{ offset: 0, color: '#FF9297' },
			{ offset: 1, color: '#FF9297' }
			]
			),
			new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			{ offset: 0, color: '#fb78ba' },
			{ offset: 1, color: '#ff77dc' }
			]
			),
			//一厂
			new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			{ offset: 0, color: '#9cc4f6' },
			{ offset: 1, color: '#538dd6' }
			]
			),
			new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			{ offset: 0, color: '#ffffa2' },
			{ offset: 1, color: '#ffff01' }
			]
			),
			new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			{ offset: 0, color: '#0bae8d' },
			{ offset: 1, color: '#0bae8d' }
			]
			),
			new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			{ offset: 0, color: '#ffbc85' },
			{ offset: 1, color: '#e26c0a' }
			]
			),
			new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			{ offset: 0, color: '#97abd6' },
			{ offset: 1, color: '#842cb2' }
			]
			),
			new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			{ offset: 0, color: '#99d6cf' },
			{ offset: 1, color: '#0ad0bb' }
			]
			),
			new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			{ offset: 0, color: '#FF9297' },
			{ offset: 1, color: '#FF9297' }
			]
			),
			new echarts.graphic.LinearGradient(
			0, 0, 1, 0,
			[
			{ offset: 0, color: '#fb78ba' },
			{ offset: 1, color: '#ff77dc' }
			]
			)
			]
			if (params.name == '1-D特种工艺' \|\| params.name == '压气机一' \|\| params.name == '1-D特种工艺单元') {
			return colorList[24]
			}
			if (params.name == '2-D整体机匣' \|\| params.name == '2-D整体机匣单元') {
			return colorList[25]
			}
			if (params.name == '3-D燃烧室机匣' \|\| params.name == '燃烧室机匣' \|\| params.name == '3-D压气机机匣单元' \|\| params.name == '3-D压气机机匣') {
			return colorList[26]
			}
			if (params.name == '4-D焊接机匣工段' \|\| params.name == '三工段' \|\| params.name == '支架小环件单元' \|\| params.name == '4-D焊接机匣单元') {
			return colorList[27]
			}
			if (params.name == '5-D CRIC单元' \|\| params.name == '10-D部件装配单元') {
			return colorList[4]
			}
			if (params.name == '6-D风扇单元' \|\| params.name == '6-D风扇机匣单元') {
			return colorList[28]
			}
			if (params.name == '7-D涡轮机匣' \|\| params.name == '7-D涡轮机匣单元') {
			return colorList[29]
			}
			if (params.name == '8-D科研工段' \|\| params.name == '科研工段' \|\| params.name == '8-D科研单元') {
			return colorList[30]
			}
			if (params.name == '10-D部件装配' \|\| params.name == '10-D部件装配单元') {
			return colorList[31]
			}
			if (params.name == 'JD-2军品机加' \|\| params.name == '军品机加工段' \|\| params.name == '四工段') {
			return colorList[8]
			}
			if (params.name == '10-D生产室' \|\| params.name == 'IGV叶片') {
			return colorList[9]
			}

			if (params.name == '五工段') {
			return colorList[10]
			}
			if (params.name == '六工段' \|\| params.name == '中小机匣单元') {
			return colorList[11]
			}
			if (params.name == '涡轮叶片') {
			return colorList[12]
			}
			if (params.name == '低压导向') {
			return colorList[13]
			}
			if (params.name == '低压叶片') {
			return colorList[14]
			}
			if (params.name == '导向叶片') {
			return colorList[15]
			}
			if (params.name == '压气机二') {
			return colorList[16]
			}
			if (params.name == '整流一') {
			return colorList[17]
			}
			if (params.name == '整流二') {
			return colorList[19]
			}
			if (params.name == '一工段' \|\| params.name == '盘件单元') {
			return colorList[19]
			}
			if (params.name == '二工段' \|\| params.name == '结构件单元') {
			return colorList[20]
			}
			if (params.name == '七工段' \|\| params.name == '环件单元') {
			return colorList[5]
			}
			// build a color map as your need.

			//return colorList[params.dataIndex]
			}
			color: params => {
			const colorList = ['#538dd6', '#ffff01', '#0bae8d', '#e26c0a', '#F6E1BE', '#7030a0', '#0ad0bb', '#FF9297', '#A40035']
			return colorList[params.dataIndex]
			},
			emphasis: {
			barBorderRadius: 13,
			@@ -474,14 +151,13 @@
			}
			]
			}
			data.forEach(item => {
			xAxisData.push(item.name == null ? '' : item.name)
			dataObj.dataList.forEach(item => {
			seriesData.push({
			value: this.toDecimal2NoZero(((item.count == null ? '' : item.count) * 100) > 100 ? 100 : (((item.count == null ? '' : item.count) * 100))),
			hostType: (item.number == null ? '' : item.number)
			value: item.utilizationRate,
			hostType: (item.productionName ? item.productionName : '')
			})
			})
			option.xAxis[0].data = xAxisData
			option.xAxis[0].data = dataObj.productionList
			option.series[0].data = seriesData
			this.chartContainer.setOption(option, true)
			},