<template>
	<div class="big-data-left-wrapper">
		<div class="big-data1 big-data">
			<div class="big-data-title-wrapper">
				在线监测设备
				<div class="big-data-title-dec"></div>
			</div>
			<div class="big-data-chart1">
				<div class="alarm-sum-wrapper">
					<div>设备总数量</div>
					<div>{{ sensorSum }}</div>
				</div>
				<div class="big-data-chart1-alarm1"></div>
			</div>
		</div>
		<div class="big-data3 big-data">
			<div class="big-data-title-wrapper">
				矿企产量趋势图
				<div class="big-data-title-dec"></div>
			</div>
			<div class="big-data-chart3"></div>
		</div>
		<div class="big-data5 big-data">
			<div class="big-data-title-wrapper">
				重大安全隐患整改数量情况统计
				<div class="big-data-title-dec"></div>
			</div>
			<div class="big-data-chart5"></div>
		</div>
		<div class="big-data7 big-data" style="position: relative;">
			<div class="big-data-title-wrapper">
				行业生产风险统计
				<div class="big-data-title-dec"></div>
			</div>
			<div class="to-right-top-select">
				<el-select v-model="curChosenIndus" size="mini">
					<el-option v-for="item in curIndus" :key="item.label" :value="item.label" :label="item.label"></el-option>
				</el-select>
			</div>
			<div class="big-data-chart7"></div>
		</div>
	</div>
</template>

<script>
import { dictDetail } from '@/api/index.js'
import { sensorAlarmNum, analyzeOutputTrend, analyzeHDNum, analyzeIndusRiskNum } from '@/api/operatePortrait.js'
export default {
	data() {
		return {
			curIndus: [],
			curChosenIndus: '煤矿',
			sensorSum: 0,
		}
	},
	async mounted() {
		await dictDetail({
			page: 0,
			size: 999,
			sort: 'id,desc',
			dictName: '所属行业',
		}).then(res => {
			this.curIndus = res.content.filter(item => item.createBy === 'admin')
			console.log(this.curIndus, 'this.curIndus _________ this.curIndus')
		})
		this.init1()
		this.init3()
		this.init5()
		this.init7()
	},
	methods: {
		async init1() {
			let alarmNum = 0
			let normalNum = 0
			await sensorAlarmNum(this.$store.state.compony_info.id).then(res => {
				console.log(res, 'sensorAlarmNum   sensorAlarmNUm')
				alarmNum = res.offlineNum
				normalNum = res.onlineNum
				this.sensorSum = res.totalNum
			})
			const targetDom = document.querySelector('.big-data-chart1-alarm1')
			const mychart = echarts.init(targetDom)
			const option = {
				series: [
					{
						color: ['#1DB3FE', '#00D6E8'],
						name: 'alarm1',
						type: 'pie',
						radius: ['20%', '70%'],
						center: ['50%', '50%'],
						roseType: 'area',
						itemStyle: {
							borderRadius: 8,
						},
						label: {
							align: 'left',
							normal: {
								formatter(v) {
									return `${v.name}\n${v.value}`
								},
								textStyle: {
									fontSize: 16,
								},
							},
						},
						labelLine: {
							length: 3,
							length2: 10,
						},
						data: [
							{
								value: normalNum,
								name: '在线设备',
							},
							{
								value: alarmNum,
								name: '离线设备',
							},
						],
					},
				],
			}
			mychart.setOption(option)
		},
		async init3() {
			await analyzeOutputTrend().then(res => {
				let myRenderTime = []
				let curMaxSize = 0
				let curIndex = 0
				res.forEach((item, index) => {
					if (item.monthOutputDtos.length > curMaxSize) {
						curMaxSize = item.monthOutputDtos.length
						curIndex = index
					}
				})
				myRenderTime = res[curIndex].monthOutputDtos.map(item => item.ym)
				const targetDom = document.querySelector('.big-data-chart3')
				const mychart = echarts.init(targetDom)
				const option = {
					color: ['#E74C3C', '#F39C12', '#ECF0F1', '#9B59B6', '#2ECC71'],
					tooltip: {
						trigger: 'axis',
					},
					grid: {
						left: '10%',
						top: '15%',
						bottom: '10%',
						right: '10%',
					},
					xAxis: {
						type: 'category',
						name: '时间',
						nameTextStyle: {
							color: '#ffffff',
						},
						axisLabel: {
							color: '#FFF',
						},
						data: myRenderTime,
					},
					yAxis: {
						type: 'value',
						name: '产量',
						axisLine: {
							show: false,
						},
						nameTextStyle: {
							color: '#ffffff',
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: 'rgba(255,255,255,.1)',
							},
						},
						axisLabel: {
							color: '#fff',
						},
					},
					series: res.map(item => {
						return {
							type: 'line',
							name: item.industry,
							smooth: true,
							symbol: 'none',
							data: item.monthOutputDtos.map(item => item.output),
						}
					}),
				}
				mychart.setOption(option)
			})
		},
		async init5() {
			await analyzeHDNum().then(res => {
				console.log(res, 'analyzeHDNum analyzeHDNum analyzeHDNum')
				const targetDom = document.querySelector('.big-data-chart5')
				const mychart = echarts.init(targetDom)
				const option = {
					title: {
						text: '总数量',
						subtext: '' + res.totalNum,
						left: 'center',
						top: '40%',
						textStyle: {
							color: '#F88F12',
							fontSize: '20',
						},
						subtextStyle: {
							color: '#F88F12',
							fontSize: '20',
						},
					},
					tooltip: {
						trigger: 'item',
					},
					legend: {
						show: false,
					},
					series: [
						{
							type: 'pie',
							radius: ['40%', '78%'],
							avoidLabelOverLap: true,
							data: [
								{
									value: res.seriousNotRectifiedNum,
									name: '重大隐患未闭环',
									itemStyle: {
										color: '#E74C3C',
									},
								},
								{
									value: res.seriousRectifiedNum,
									name: '重大隐患已闭环',
									itemStyle: {
										color: '#FDFA02',
									},
								},
							],
							label: {
								align: 'left',
								normal: {
									formatter(v) {
										return `${v.name}\n${v.value}`
									},
									textStyle: {
										fontSize: 16,
									},
								},
							},
							labelLine: {
								length: 3,
								length2: 10,
							},
						},
					],
				}
				mychart.setOption(option)
			})
		},
		async init7() {
			await analyzeIndusRiskNum(this.curIndus.filter(item => item.label === this.curChosenIndus)[0].id).then(res => {
				let lowNum = res.riskBlueNum
				let generalNum = res.riskYellowNum
				let greaterNum = res.riskOrangeNum
				let majorNum = res.riskRedNum
				let totalNum = res.totalNum
				const targetDom = document.querySelector('.big-data-chart7')
				const mychart = echarts.init(targetDom)
				mychart.clear()
				const option = {
					title: {
						text: '总数量',
						subtext: '' + totalNum,
						left: 'center',
						top: '40%',
						textStyle: {
							color: '#F88F12',
							fontSize: '20',
						},
						subtextStyle: {
							color: '#F88F12',
							fontSize: '20',
						},
					},
					tooltip: {
						trigger: 'item',
					},
					legend: {
						show: false,
					},
					series: [
						{
							type: 'pie',
							radius: ['40%', '78%'],
							avoidLabelOverLap: true,
							data: [
								{
									value: lowNum,
									name: '低风险',
									itemStyle: {
										color: '#057AFD',
									},
								},
								{
									value: generalNum,
									name: '一般风险',
									itemStyle: {
										color: '#FEFA03',
									},
								},
								{
									value: greaterNum,
									name: '较大风险',
									itemStyle: {
										color: '#F88F12',
									},
								},
								{
									value: majorNum,
									name: '重大风险',
									itemStyle: {
										color: '#FF414B',
									},
								},
							],
							label: {
								align: 'left',
								normal: {
									formatter(v) {
										return `${v.name}\n${v.value}`
									},
									textStyle: {
										fontSize: 16,
									},
								},
							},
							labelLine: {
								length: 3,
								length2: 10,
							},
						},
					],
				}
				mychart.setOption(option)
			})
		},
	},
	watch: {
		curChosenIndus(newVal, oldVal) {
			if (newVal !== oldVal) {
				this.init7()
			}
		},
	},
}
</script>

<style lang="scss">
.to-right-top-select {
	position: absolute;
	right: 0;
	top: 0;
	width: 118px;
	height: 56px;
}
.big-data-left-wrapper {
	position: absolute;
	left: 0;
	top: 0;
	width: 21vw;
	height: 90vh;
	display: flex;
	flex-direction: column;
	color: #05d6ec;
	z-index: 1000;
	background: #040624;
	> div {
		flex-basis: 25%;
	}
}
.big-data-title-wrapper {
	position: relative;
	font-family: 'SourceHanSansCN-Medium';
	color: aqua;
	font-size: 16px;
	font-weight: bold;
	/* background: -webkit-gradient(linear, left bottom, left top, color-stop(23.583984375%, #3fffea), to(#007eff)); */
	background: linear-gradient(0deg, #3fffea 23.583984375%, #007eff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	padding-left: 80px;
	padding-top: 5px;
	.big-data-title-dec {
		position: absolute;
		left: 5px;
		top: 5px;
		width: 53px;
		height: 21px;
		background-repeat: no-repeat;
		background-image: url('../../assets/images/dec4.png');
		transform: scale(0.75);
	}
}
.big-data {
	display: flex;
	flex-direction: column;
	.big-data-chart1 {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		.alarm-sum-wrapper {
			display: flex;
			justify-content: space-around;
			border: 1px solid #3fffea;
			box-shadow: inset 0 8px 19px -7px #3fffea;
			padding: 5px;
			margin: 3px 10px;
			font-size: 18px;
		}
		.big-data-chart1-alarm1 {
			flex-grow: 1;
		}
	}
	.big-data-chart2 {
		.big-data-chart2-alarm-sum2 {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			border: 1px solid #3fffea;
			box-shadow: inset 0 8px 19px -7px #3fffea;
			padding: 5px;
			margin: 3px 10px;
			.big-data-chart2-sum {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
				span {
					&:first-child {
						color: #7bb8c2;
						font-size: 14px;
					}
					&:last-child {
						color: #00fcff;
						font-size: 18px;
						margin-left: 20px;
					}
				}
			}
		}
		.big-data-chart2-table-wrapper {
			display: flex;
			flex-direction: column;
			font-size: 14px;
			text-align: center;
			.big-data-chart2-table-title {
				display: flex;
				color: #019aef;
				.big-data-chart2-table-title1 {
					flex-basis: 42%;
				}
				.big-data-chart2-table-title2 {
					flex-basis: 26%;
				}
				.big-data-chart2-table-title3 {
					flex-basis: 32%;
				}
			}
			.big-data-chart2-table-content-wrapper {
				flex-grow: 1;
				overflow-y: scroll;
				&::-webkit-scrollbar {
					display: none;
				}
				.big-data-chart2-table-content-item {
					display: flex;
					color: white;
					background-color: rgba(32, 47, 88, 0.8);
					padding: 2px;
					margin: 2px 10px;
					span {
						&:nth-child(1) {
							flex-basis: 42%;
						}
						&:nth-child(2) {
							flex-basis: 26%;
						}
						&:nth-child(3) {
							flex-basis: 32%;
						}
					}
				}
			}
		}
	}
	.big-data-chart3 {
		flex-grow: 1;
	}
	.big-data-chart4 {
		flex-grow: 1;
	}
	.big-data-chart5 {
		flex-grow: 1;
	}
	.big-data-chart6 {
		flex-grow: 1;
	}
	.big-data-chart7 {
		flex-grow: 1;
	}
	.big-data-chart8 {
		flex-grow: 1;
	}
}
</style>
