<template>
	<screenHeader :currentKey="currentKey">
		<div class="breadcrumb">
			<div class="left">
				{{ $i18n.locale === 'zh-CN'?'当前位置':'Current position'}}：
				<div class="crumb-item-active">
					<span> {{ $i18n.locale === 'zh-CN'?'投资主题':'Investment Theme'}}</span>
				</div>
			</div>
		</div>
		<div class="screen-body">
			<div class="screen-body-col ">
				<div class="top-title">{{$i18n.locale === 'zh-CN'?'投资':'Invest'}}
					<div class="top-search">
						<el-date-picker popper-class="screen-date-picker" v-model="investmentParams.startYear"
							type="year" placeholder="开始年" value-format="yyyy" @change="getInvestment()"
							style="width: 120px;" size="mini">
						</el-date-picker>
						-
						<el-date-picker popper-class="screen-date-picker" v-model="investmentParams.endYear" type="year"
							placeholder="结束年" value-format="yyyy" @change="getInvestment()" style="width: 120px;"
							size="mini">
						</el-date-picker>
					</div>
				</div>

				<div class="col-side">
					<div class="side-echarts">
						<echartsTitle>{{$i18n.locale === 'zh-CN'?'集团年度投资情况':'Group annual investment situation'}}
						</echartsTitle>
						<div id="oneChart" class="full" refs=""></div>
					</div>
					<div class="side-echarts">
						<echartsTitle>{{$i18n.locale === 'zh-CN'?'集团专利情况':'Group patent position'}}</echartsTitle>
						<div id="twoChart" class="full" refs=""></div>
					</div>
				</div>

			</div>
			<div class="screen-body-col ">
				<div class="top-title">{{$i18n.locale === 'zh-CN'?'产能':'Capacity'}}</div>
				<div class="col-table">
					<div id="realWater" class="scroll-table  full-out-header padding">
						<div class="scroll-table-header">
							<div class="header-item" v-for="column in ecologicalFlowHeader" :key="column.key"
								:style="{width: column.width,'padding-right':$i18n.locale === 'zh-CN'?0:'10px'}"
								:title="$i18n.locale === 'zh-CN'?column.name:column.nameEn">
								{{ $i18n.locale === 'zh-CN'?column.name:column.nameEn }}
							</div>
						</div>
						<vue-seamless-scroll class="scroll-table-body" :data="capacityList"
							:class-option="optionSingleHeightTime">
							<div class="scroll-table-column" v-for="column in capacityList" :key="column.id"
								style="cursor: pointer">
								<div class="column-item ellipsis" style="width: 8%; text-align: center"
									:title="column.enterpriseName">
									{{ column.enterpriseName}}
								</div>
								<div class="column-item ellipsis" style="width: 8%; text-align: center"
									:title="column.enterpriseCode">
									{{ column.enterpriseCode }}
								</div>
								<div class="column-item ellipsis" style="width: 8%; text-align: center"
									:title="column.banburyingNum">
									{{ column.banburyingNum }}
								</div>
								<div class="column-item ellipsis" style="width: 9%; text-align: center"
									:title="column.banburyingCapacity">
									{{ column.banburyingCapacity }}
								</div>
								<div class="column-item ellipsis" style="width: 9%; text-align: center"
									:title="column.banburyingCapacityTotal">
									{{ column.banburyingCapacityTotal }}
								</div>
								<div class="column-item ellipsis" style="width: 8%; text-align: center"
									:title="column.epdmNum">
									{{ column.epdmNum }}
								</div>
								<div class="column-item ellipsis" style="width: 11%; text-align: center"
									:title="column.epdmCapacity">
									{{ column.epdmCapacity }}
								</div>
								<div class="column-item ellipsis" style="width: 12%; text-align: center"
									:title="column.epdmCapacityTotal">
									{{ column.epdmCapacityTotal }}
								</div>
								<div class="column-item ellipsis" style="width: 9%; text-align: center"
									:title="column.tpeNum">
									{{ column.tpeNum }}
								</div>
								<div class="column-item ellipsis" style="width: 10%; text-align: center"
									:title="column.tpeCapacity">
									{{ column.tpeCapacity }}
								</div>
								<div class="column-item ellipsis" style="width: 11%; text-align: center"
									:title="column.tpeCapacityTotal">
									{{ column.tpeCapacityTotal }}
								</div>
							</div>
						</vue-seamless-scroll>
					</div>
				</div>
			</div>
		</div>
	</screenHeader>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import * as echarts from 'echarts'
	import moment from "moment"
	import VueSeamlessScroll from 'vue-seamless-scroll'
	import investmentTheme from '@/api/bigScrenn/investmentTheme.js'
	import screenHeader from '@/views/BigScrenn/components/screenHeader.vue'
	import echartsTitle from '@/views/BigScrenn/investmentTheme/components/echartsTitle.vue'
	// import echartsTitle1 from '@/views/BigScrenn/investmentTheme/components/echartsTitle1.vue'
	export default {
		components: {
			screenHeader,
			echartsTitle,
			VueSeamlessScroll,
		},
		data() {
			return {
				currentKey: 'investmentTheme',
				capacityList: [],
				investmentList: [],
				capacityParams: {
					// startYear: '',
					// endYear: '',
				},
				investmentParams: {
					startYear: '',
					endYear: '',
				},
				ecologicalFlowHeader: [{
						key: 'enterpriseName',
						width: '8%',
						name: '公司名称',
						nameEn: 'Company name',
					},
					{
						key: 'enterpriseCode',
						width: '8%',
						name: '公司编码',
						nameEn: 'Company code',
					},
					{
						key: 'banburyingNum',
						width: '8%',
						name: '密炼产线条数',
						nameEn: 'Number of production lines',
					},
					{
						key: 'banburyingCapacity',
						width: '9%',
						name: '每条线年产能(万吨)',
						nameEn: 'Annual capacity per line',
					},
					{
						key: 'banburyingCapacityTotal',
						width: '9%',
						name: '密炼线总产能(万吨)',
						nameEn: 'Total capacity of the mixing line',
					},
					{
						key: 'epdmNum',
						width: '8%',
						name: 'EPDM挤出线数',
						nameEn: 'Number of extruded EPDM lines',
					},
					{
						key: 'epdmCapacity',
						width: '11%',
						name: 'EPDM每条线年产能(百万米)',
						nameEn: 'EPDM annual production capacity per line',
					},
					{
						key: 'epdmCapacityTotal',
						width: '12%',
						name: 'EPDM挤出线总产能(百万米)',
						nameEn: 'Total capacity of EPDM extrusion line',
					},
					{
						key: 'tpeNum',
						width: '9%',
						name: 'TPE挤出线条数',
						nameEn: 'Number of TPE extrusion lines',
					},
					{
						key: 'tpeCapacity',
						width: '10%',
						name: '每条线年产能(百万米)',
						nameEn: 'Annual capacity per line',
					},
					{
						key: 'tpeCapacityTotal',
						width: '11%',
						name: 'TPE挤出线总产能(百万米)',
						nameEn: 'Total capacity of TPE extrusion line',
					},
				],
			}
		},
		created() {
			window.localStorage.setItem('activeIndex', this.currentKey);
			window.localStorage.setItem("pageName", '投资主题');
			// this.capacityParams = {
			// 	startYear: moment().subtract(5, 'year').format('YYYY'),
			// 	endYear: moment().format('YYYY'),
			// }
			this.investmentParams = {
				startYear: moment().subtract(5, 'year').format('YYYY'),
				endYear: moment().format('YYYY'),
			}
			this.getCapacity()
			this.getInvestment()
		},
		mounted() {

		},
		computed: {
			optionSingleHeightTime() {
				return {
					limitMoveNum: 10,
					singleHeight: 30,
					waitTime: 2500,
				}
			},
		},
		methods: {
			getCapacity() {
				investmentTheme.capacitySituation(this.capacityParams, res => {
					if (res.value) {
						this.capacityList = res.value
						// this.$nextTick(() => {
						// 	this.capacityOneChart()
						// 	this.capacityTwoChart()
						// 	this.capacityThreeChart()
						// })
					}
				})
			},
			getInvestment() {
				investmentTheme.investmentSituation(this.investmentParams, res => {
					if (res.value) {
						this.investmentList = res.value
						this.$nextTick(() => {
							this.investmentOneChart()
							this.investmentTwoChart()
						})
					}
				})
			},
			investmentOneChart() {
				let chartDom = echarts.init(document.getElementById('oneChart'))
				let xLabel = []
				let actual = []
				let budget = []
				this.investmentList.investmentSituation.forEach(e => {
					xLabel.push(e.fillYear)
					actual.push(e.actual)
					budget.push(e.budget)
				})
				let option = {
					backgroundColor: '',
					tooltip: {
						trigger: 'axis',
						// 自定义tooltip内容
						formatter: (item) => {
							let str =
								`<div style="text-align:center;font-weight:700;font-size:16px">${item[0].name}</div>`
							let index = 0 // 命名一个索引，用于匹配增减值、增减率
							let leftClass =
								`<span style="display: inline-block; width: ${this.$i18n.locale === 'zh-CN'?'100px':'180px'}; text-align: left;">`
							let rightClass =
								'<span style="display: inline-block; width: 80px; text-align: right;">'
							item.forEach(it => {
								str +=
									`${ leftClass + it.seriesName}:</span>${ rightClass + it.value}</span></br>`
								index = it.dataIndex
							})
							if (this.investmentList.investmentSituation[index].differenceValue !== undefined) {
								str = str +
									`${leftClass}${this.$i18n.locale === 'zh-CN'?'增减值':'Value of increase or decrease'}:</span>${rightClass + this.investmentList.investmentSituation[index].differenceValue}</span></br>`
								if (this.investmentList.investmentSituation[index].differenceRate !== undefined) {
									str = str +
										`${leftClass}${this.$i18n.locale === 'zh-CN'?'增减率':'Rate of increase and decrease'}:</span>${rightClass + this.investmentList.investmentSituation[index].differenceRate}</span>`
								}
							}
							return str

						}
					},
					legend: {
						show: true,
						textStyle: {
							color: '#fff',
							fontSize: 14,
							padding: [0, 8, 0, 8]
						}
					},
					grid: {
						top: '15%',
						left: '9%',
						right: '2%',
						bottom: '8%',
					},
					xAxis: [{
						type: 'category',

						axisLabel: {
							textStyle: {
								color: '#FFFFFF',
								fontSize: 12,
							},
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#233653',
							},
						},
						axisTick: {
							show: false,
						},
						data: xLabel,
					}, ],
					yAxis: [{
						name: '欧元',
						nameTextStyle: {
							color: "#fff",
							fontSize: 12,
							padding: [0, 60, 0, 0]
						},
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								color: '#1160a0',
								type: 'dashed'
							},
						},
						axisLabel: {
							interval: 0, //标签设置为全部显示
							formatter: function(params) {
								const units = ['', '万', '百万', '亿', '万亿'];
								let unitIndex = 0;

								while (params >= 10000 && unitIndex < units.length - 1) {
									params /= 10000;
									unitIndex++;
								}

								const formattedNumber = params
								return formattedNumber + units[unitIndex];

							},
							textStyle: {
								color: '#fff',
								fontSize: 14
							}
						},
						axisTick: {
							show: false,
						},
						triggerEvent: true

					}, ],
					series: [{
						name: this.$i18n.locale === 'zh-CN' ? '实际值' : 'Actual',
						type: 'bar',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
							},
						},
						itemStyle: {
							normal: {
								label: {
									show: false, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: actual
					}, {
						name: this.$i18n.locale === 'zh-CN' ? '预算值' : 'Budget',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
							},
						},
						itemStyle: {
							normal: {
								label: {
									show: false, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: budget
					}]
				}
				option && chartDom.setOption(option)
			},
			investmentTwoChart() {
				let chartDom = echarts.init(document.getElementById('twoChart'))
				let xLabel = []
				let arr = []
				this.investmentList.patents[0].list.forEach(a => {
					xLabel.push(a.fillYear)
				})
				this.investmentList.patents.forEach(e => {
					let newArr = []
					e.list.forEach(item => {
						newArr.push(item.fillData)
					})
					arr.push({
						name: e.subjectName,
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
								// color: '#518EF5', // 线条颜色
							},
						},
						itemStyle: {
							normal: {
								// color: '#518EF5', //拐点颜色
								// borderColor: '#fff600',//拐点边框颜色
								// borderWidth: 13//拐点边框大小z
								label: {
									show: false, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: newArr
					})
				})

				// return
				let option = {
					backgroundColor: '',
					tooltip: {
						trigger: 'axis',

					},
					legend: {
						show: true,
						textStyle: {
							color: '#fff',
							fontSize: 14,
							padding: [0, 8, 0, 8]
						}
					},
					grid: {
						top: '15%',
						left: '9%',
						right: '2%',
						bottom: '8%',
					},
					xAxis: [{
						type: 'category',

						axisLabel: {
							textStyle: {
								color: '#FFFFFF',
								fontSize: 12,
							},
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#233653',
							},
						},
						axisTick: {
							show: false,
						},
						data: xLabel,
					}, ],
					yAxis: [{
						name: this.investmentList.patents[0].list[0].subjectUnit,
						nameTextStyle: {
							color: "#fff",
							fontSize: 12,
							padding: [0, 60, 0, 0]
						},
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								color: '#1160a0',
								type: 'dashed'
							},
						},
						axisLabel: {
							interval: 0, //标签设置为全部显示
							formatter: function(params) {
								const units = ['', '万', '百万', '亿', '万亿'];
								let unitIndex = 0;
								if (params < 0) {
									params = Math.abs(params)
									while (params >= 10000 && unitIndex < units.length - 1) {
										params /= 10000;
										unitIndex++;
									}
									params = (0 - params)

								} else {
									while (params >= 10000 && unitIndex < units.length - 1) {
										params /= 10000;
										unitIndex++;
									}

								}
								const formattedNumber = params

								return formattedNumber + units[unitIndex];

							},
							textStyle: {
								color: '#fff',
								fontSize: 14
							}
						},
						axisTick: {
							show: false,
						},
						triggerEvent: true

					}, ],
					series: arr
				}
				option && chartDom.setOption(option)
			},
			capacityOneChart() {
				let chartDom = echarts.init(document.getElementById('threeChart'))
				let xLabel = []
				let banburyingNum = []
				let banburyingCapacity = []
				let banburyingCapacityTotal = []
				this.capacityList.forEach(e => {
					xLabel.push(e.fillYear)
					banburyingNum.push(e.banburyingNum)
					banburyingCapacity.push(e.banburyingCapacity)
					banburyingCapacityTotal.push(e.banburyingCapacityTotal)
				})
				let option = {
					backgroundColor: '',
					tooltip: {
						trigger: 'axis',

					},
					legend: {
						show: true,
						textStyle: {
							color: '#fff',
							fontSize: 14,
							padding: [0, 8, 0, 8]
						}
					},
					grid: {
						top: '18%',
						left: '10%',
						right: '3%',
						bottom: '12%',
					},
					xAxis: [{
						type: 'category',

						axisLabel: {
							textStyle: {
								color: '#FFFFFF',
								fontSize: 12,
							},
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#233653',
							},
						},
						axisTick: {
							show: false,
						},
						data: xLabel,
					}, ],
					yAxis: [{
						name: '万吨',
						nameTextStyle: {
							color: "#fff",
							fontSize: 12,
							padding: [0, 60, 0, 0]
						},
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								color: '#1160a0',
								type: 'dashed'
							},
						},
						axisLabel: {
							interval: 0, //标签设置为全部显示
							formatter: function(params) {
								const units = ['', '万', '百万', '亿', '万亿'];
								let unitIndex = 0;
								if (params < 0) {
									params = Math.abs(params)
									while (params >= 10000 && unitIndex < units.length - 1) {
										params /= 10000;
										unitIndex++;
									}
									params = (0 - params)

								} else {
									while (params >= 10000 && unitIndex < units.length - 1) {
										params /= 10000;
										unitIndex++;
									}

								}
								const formattedNumber = params

								return formattedNumber + units[unitIndex];

							},
							textStyle: {
								color: '#fff',
								fontSize: 14
							}
						},
						axisTick: {
							show: false,
						},
						triggerEvent: true

					}, ],
					series: [{
						name: '密炼产线条数',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
							},
						},
						itemStyle: {
							normal: {
								label: {
									show: false, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: banburyingNum
					}, {
						name: '密炼每条线年产能',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
							},
						},
						itemStyle: {
							normal: {
								label: {
									show: false, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: banburyingCapacity
					}, {
						name: '密炼线总产能',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
							},
						},
						itemStyle: {
							normal: {
								label: {
									show: false, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: banburyingCapacityTotal
					}]
				}
				option && chartDom.setOption(option)
			},
			capacityTwoChart() {
				let chartDom = echarts.init(document.getElementById('fourChart'))
				let xLabel = []
				let epdmNum = []
				let epdmCapacity = []
				let epdmCapacityTotal = []
				this.capacityList.forEach(e => {
					xLabel.push(e.fillYear)
					epdmNum.push(e.epdmNum)
					epdmCapacity.push(e.epdmCapacity)
					epdmCapacityTotal.push(e.epdmCapacityTotal)
				})
				let option = {
					backgroundColor: '',
					tooltip: {
						trigger: 'axis',

					},
					legend: {
						show: true,
						textStyle: {
							color: '#fff',
							fontSize: 14,
							padding: [0, 8, 0, 8]
						}
					},
					grid: {
						top: '18%',
						left: '10%',
						right: '3%',
						bottom: '12%',
					},
					xAxis: [{
						type: 'category',

						axisLabel: {
							textStyle: {
								color: '#FFFFFF',
								fontSize: 12,
							},
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#233653',
							},
						},
						axisTick: {
							show: false,
						},
						data: xLabel,
					}, ],
					yAxis: [{
						name: '百万米',
						nameTextStyle: {
							color: "#fff",
							fontSize: 12,
							padding: [0, 60, 0, 0]
						},
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								color: '#1160a0',
								type: 'dashed'
							},
						},
						axisLabel: {
							interval: 0, //标签设置为全部显示
							formatter: function(params) {
								const units = ['', '万', '百万', '亿', '万亿'];
								let unitIndex = 0;
								if (params < 0) {
									params = Math.abs(params)
									while (params >= 10000 && unitIndex < units.length - 1) {
										params /= 10000;
										unitIndex++;
									}
									params = (0 - params)

								} else {
									while (params >= 10000 && unitIndex < units.length - 1) {
										params /= 10000;
										unitIndex++;
									}

								}
								const formattedNumber = params

								return formattedNumber + units[unitIndex];

							},
							textStyle: {
								color: '#fff',
								fontSize: 14
							}
						},
						axisTick: {
							show: false,
						},
						triggerEvent: true

					}, ],
					series: [{
						name: 'EPDM挤出线数',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
							},
						},
						itemStyle: {
							normal: {
								label: {
									show: false, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: epdmNum
					}, {
						name: 'EPDM每条线年产能',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
							},
						},
						itemStyle: {
							normal: {
								label: {
									show: false, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: epdmCapacity
					}, {
						name: 'EPDM挤出线总产能',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
							},
						},
						itemStyle: {
							normal: {
								label: {
									show: false, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: epdmCapacityTotal
					}]
				}
				option && chartDom.setOption(option)
			},
			capacityThreeChart() {
				let chartDom = echarts.init(document.getElementById('fiveChart'))
				let xLabel = []
				let tpeNum = []
				let tpeCapacity = []
				let tpeCapacityTotal = []
				this.capacityList.forEach(e => {
					xLabel.push(e.fillYear)
					tpeNum.push(e.tpeNum)
					tpeCapacity.push(e.tpeCapacity)
					tpeCapacityTotal.push(e.tpeCapacityTotal)
				})
				let option = {
					backgroundColor: '',
					tooltip: {
						trigger: 'axis',

					},
					legend: {
						show: true,
						textStyle: {
							color: '#fff',
							fontSize: 14,
							padding: [0, 8, 0, 8]
						}
					},
					grid: {
						top: '18%',
						left: '10%',
						right: '3%',
						bottom: '12%',
					},
					xAxis: [{
						type: 'category',

						axisLabel: {
							textStyle: {
								color: '#FFFFFF',
								fontSize: 12,
							},
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#233653',
							},
						},
						axisTick: {
							show: false,
						},
						data: xLabel,
					}, ],
					yAxis: [{
						name: '万吨',
						nameTextStyle: {
							color: "#fff",
							fontSize: 12,
							padding: [0, 60, 0, 0]
						},
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								color: '#1160a0',
								type: 'dashed'
							},
						},
						axisLabel: {
							interval: 0, //标签设置为全部显示
							formatter: function(params) {
								const units = ['', '万', '百万', '亿', '万亿'];
								let unitIndex = 0;
								if (params < 0) {
									params = Math.abs(params)
									while (params >= 10000 && unitIndex < units.length - 1) {
										params /= 10000;
										unitIndex++;
									}
									params = (0 - params)

								} else {
									while (params >= 10000 && unitIndex < units.length - 1) {
										params /= 10000;
										unitIndex++;
									}

								}
								const formattedNumber = params

								return formattedNumber + units[unitIndex];

							},
							textStyle: {
								color: '#fff',
								fontSize: 14
							}
						},
						axisTick: {
							show: false,
						},
						triggerEvent: true

					}, ],
					series: [{
						name: '密炼产线条数',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
							},
						},
						itemStyle: {
							normal: {
								label: {
									show: false, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: tpeNum
					}, {
						name: '密炼每条线年产能',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
							},
						},
						itemStyle: {
							normal: {
								label: {
									show: false, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: tpeCapacity
					}, {
						name: '密炼线总产能',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
							},
						},
						itemStyle: {
							normal: {
								label: {
									show: false, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: tpeCapacityTotal
					}]
				}
				option && chartDom.setOption(option)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: 'YouSheBiaoTiHei';
		src: url(~@/assets/fonts/YouSheBiaoTiHei-2.ttf);
	}

	@keyframes rotateImage {
		from {
			transform: rotate(0deg)
		}

		to {
			transform: rotate(360deg)
		}
	}

	@keyframes breath {
		from {
			opacity: 0.1;
		}

		50% {
			opacity: 1;
		}

		to {
			opacity: 0.1;
		}
	}

	@-webkit-keyframes breath {
		from {
			opacity: 0.1;
		}

		50% {
			opacity: 1;
		}

		to {
			opacity: 0.1;
		}
	}

	.full {
		margin-top: 10px;
		height: calc(100% - 50px);
	}

	.screen-body {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: calc(100% - 45px);
		padding: 0 5px;
		box-sizing: border-box;

		.screen-body-col {
			width: 100%;
			height: 49%;
		}

		.col-title {
			height: 45px;
			font-size: 22px;
			font-family: YouSheBiaoTiHei;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 34px;
			display: flex;
			justify-content: space-between;
		}

		.col-side {
			width: 100%;
			height: calc(100% - 55px);
			display: flex;
			justify-content: space-between;

			.side-echarts {
				position: relative;
				width: 49%;
				height: 100%;
				// background: url('~@/assets/img/bg-2.png') center / 100% 100% no-repeat;

			}

			.side-echarts2 {
				position: relative;
				width: 32%;
				height: 100%;
				// background: url('~@/assets/img/bg-2.png') center / 100% 100% no-repeat;

			}
		}

		.col-table {
			width: 100%;
			height: calc(100% - 55px);
			display: flex;
			justify-content: space-between;

			.side-echarts {
				position: relative;
				width: 49%;
				height: 100%;
				// background: url('~@/assets/img/bg-2.png') center / 100% 100% no-repeat;

			}

			.side-echarts2 {
				position: relative;
				width: 32%;
				height: 100%;
				// background: url('~@/assets/img/bg-2.png') center / 100% 100% no-repeat;

			}
		}
	}

	.top-title {
		display: flex;
		justify-content: space-between;
		font-size: 22px;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 34px;
		padding-left: 50px;
		box-sizing: border-box;
		height: 48px;
		background: url('~@/assets/img/fund-big-title.png') center / 100% 100% no-repeat;
		position: relative;

		.top-search {
			width: 40%;
			text-align: right;
			position: absolute;
			bottom: 2px;
			right: 5px;
		}
	}

	.breadcrumb {
		width: 100%;
		height: 45px;
		font-size: 12px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		line-height: 30px;
		padding: 0 20px;
		box-sizing: border-box;
		color: #FFFFFF;
		display: flex;
		align-items: center;

		// border: 1px solid #fff;
		.left {
			height: 30px;
			display: flex;
			align-items: center;

			.crumb-item {
				height: 22px;
				line-height: 22px;
				padding: 0 20px;
				box-sizing: border-box;
				font-size: 12px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #ADC9E9;
				margin-left: 5px;
				cursor: pointer;
				background: url('~@/assets/img/breadcrumb.png') center / 100% 100% no-repeat;
				transform: skew(-25deg);

				span {
					display: inline-block;
					transform: skew(25deg);
				}
			}

			.crumb-item:hover {
				height: 22px;
				line-height: 22px;
				padding: 0 20px;
				box-sizing: border-box;
				font-size: 12px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				margin-left: 5px;
				color: #FFFFFF;
				cursor: pointer;
				background: url('~@/assets/img/breadcrumb-active.png') center / 100% 100% no-repeat;
			}

			.crumb-item-active {
				height: 22px;
				line-height: 22px;
				padding: 0 20px;
				box-sizing: border-box;
				font-size: 12px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				margin-left: 5px;
				color: #FFFFFF;
				cursor: pointer;
				background: url('~@/assets/img/breadcrumb-active.png') center / 100% 100% no-repeat;
				transform: skew(-25deg);

				span {
					display: inline-block;
					transform: skew(25deg);
				}
			}
		}

	}

	//输入框

	/deep/ .el-input {
		height: 35px !important;
	}

	/deep/ .el-input__inner {
		height: 35px !important;
		color: #eee;
		border-color: #0B61AA;
		background-color: rgba(1, 28, 82, 0.8);
	}

	//聚焦时的样式
	.el-select .el-input.is-focus .el-input__inner {
		border-color: #0B61AA;
		background-color: rgba(1, 28, 82, 0.8);
		color: #00D3E9;
	}


	.scroll-table {
		width: 100%;

		.scroll-table-header {
			width: 100%;
			display: flex;
			justify-content: space-around;
			// background: rgba(#0574d4, 0.8);
			background: rgba(12, 171, 243, 0.4);
			height: 36px;
			line-height: 36px;
			padding: 0 10px;
			box-sizing: border-box;
		}

		.scroll-table-body {
			height: calc(100% - 36px);
			overflow: hidden;
		}

		.scroll-table-body.solid {
			height: calc(100% - 36px);
			overflow-y: auto;
		}

		// .header-item,
		.column-item {
			text-align: left;
		}

		.scroll-table-column {
			width: 100%;
			display: flex;
			justify-content: space-around;
		}

		.header-item {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-size: 16px;
			font-weight: 700;
			text-align: center;
			color: #d8dddd;
			z-index: 9999;

		}

		.scroll-table-column {
			padding: 6px 10px;
			box-sizing: border-box;
			border-bottom: 1px solid rgba(0, 132, 251, 0.2);
		}

		.scroll-table-column:nth-of-type(2n) {
			background-color: rgba(0, 132, 251, 0.1);
		}

		.column-item {
			font-size: 12px;
			color: #dbdbdb;
			padding-right: 4px;
			box-sizing: border-box;
		}

		.columnActive {
			color: red;
		}

		.column-item-icon {
			display: inline-block;
			width: 10px;
			height: 10px;
			line-height: 12px;
			background-color: #ff9a00;
			border-radius: 100%;
			margin-right: 4px;
		}
	}
</style>
<!-- 
<style>
	.col-table /deep/ .el-table--fit {
		padding: 20px !important;
		border: none !important;
	}

	.col-table .el-table,
	.el-table__expanded-cell {
		background-color: transparent !important;
		border: none !important;
	}

	.col-table /deep/ .el-table tr {
		background-color: transparent !important;
		border: none !important;
	}

	.el-table /deep/ .el-table--enable-row-transition .el-table__body td,
	.el-table .cell {
		background-color: transparent !important;
		border: none !important;
	}

	.el-table th>.cell {
		color: #fff !important;
	}

	.el-table td>.cell {
		color: #fff !important;
	}

	.el-table th,
	.el-table tr {
		border: none !important;
		background-color: transparent !important;
		color: #fff !important;
	}

	.el-table--group::after,
	.el-table--border::after {
		width: 0 !important;
	}

	.el-table--border tr,
	td {
		border: none !important;
	}

	.el-table thead tr {
		background-color: #103E70 !important;
		color: #fff !important;
	}

	.el-table thead tr th {
		background-color: #103E70 !important;
		color: #fff !important;
		border: 1px solid #0F325A !important;
	}

	.el-table--enable-row-transition .el-table__body td.el-table__cell {
		border: none !important;

	}

	.el-table::before {
		height: 0 !important;
	}

	.el-table tbody tr:hover>td {
		background-color: rgb(79, 163, 213) !important
	}
</style>
 -->