<template>
	<div class="potrait-wrapper">
		<div class="close-wrapper" @click="closeMySelf">
			<svg t="1637978362846" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2517" width="32" height="32"><path d="M550.848 502.496l308.64-308.896a31.968 31.968 0 1 0-45.248-45.248l-308.608 308.896-308.64-308.928a31.968 31.968 0 1 0-45.248 45.248l308.64 308.896-308.64 308.896a31.968 31.968 0 1 0 45.248 45.248l308.64-308.896 308.608 308.896a31.968 31.968 0 1 0 45.248-45.248l-308.64-308.864z" p-id="2518" fill="#02fcfe"></path></svg>
		</div>
		<div class="basic-info">
			<div class="basic-info-title">企业基础信息</div>
			<div class="basic-info-item">
				<div>采矿方法</div>
				<div>{{ mineMethod }}</div>
			</div>
			<div class="basic-info-item">
				<div>面积</div>
				<div>{{ area }}</div>
			</div>
			<div class="basic-info-item">
				<div>产能</div>
				<div>{{ yields }}</div>
			</div>
			<div class="basic-info-item">
				<div>矿种</div>
				<div>{{ minerals }}</div>
			</div>
		</div>
		<div class="basic-info1">
			<div class="basic-info-title">企业监测设备</div>
			<div class="chart" ref="mychart1"></div>
		</div>
		<div class="basic-info1">
			<div class="basic-info-title">监测数据信息</div>
			<div class="chart monitor-data-wrapper">
				<div class="monitor-data">
					<div class="monitor-data-title">监测点数量</div>
					<div class="monitor-data-degree">{{ monitorSum }}个</div>
				</div>
				<div class="monitor-data">
					<div class="monitor-data-title">监测点数据</div>
					<div class="monitor-data-degree">{{ monitorData }}条</div>
				</div>
				<div class="monitor-data">
					<div class="monitor-data-title">报警数据</div>
					<div class="monitor-data-degree">{{ alarmSum }}条</div>
				</div>
				<div class="monitor-data">
					<div class="monitor-data-title">监测时长</div>
					<div class="monitor-data-degree">{{ timeSum }}天</div>
				</div>
			</div>
		</div>
		<div class="basic-info1">
			<div class="basic-info-title">不同等级风险数量统计</div>
			<div class="chart" ref="mychart3"></div>
		</div>
		<div class="basic-info1">
			<div class="basic-info-title">重大安全事故隐患排查</div>
			<div class="chart" ref="mychart4"></div>
		</div>
	</div>
</template>

<script>
import { monitorDevice, monitorData, analyzeAlarmNum, analyzeHDNum } from '@/api/operatePortrait.js'
export default {
	data() {
		return {
			// 采矿方法
			mineMethod: '11',
			// 面积
			area: '22',
			// 产能
			yields: '33',
			// 矿种
			minerals: '44',
			//
			deviceSum: '',
			// 在线设备
			online: '',
			// 离线设备
			offline: '',
			// 监测点数量
			monitorSum: '77',
			// 监测点数据
			monitorData: '90',
			// 报警数据
			alarmSum: '76',
			// 监测时长
			timeSum: '56',
			// 风险等级1
			lowRisk: '',
			// 风险等级2
			generalRisk: '',
			// 风险等级3
			greaterRisk: '',
			// 重大风险未闭环
			noCloseLoop: '',
			// 重大风险已闭环
			closeLoop: '',
		}
	},
	async mounted() {
		console.log(this.$store.state.compony_info.companycode, 'this.$store.state.compony_info.companycode')
		await monitorDevice(this.$store.state.compony_info.id).then(res => {
			this.offline = res.offlineNum + ''
			this.online = res.onlineNum + ''
			this.deviceSum = res.totalNum + ''
		})
		await monitorData(this.$store.state.compony_info.companycode).then(res => {
			this.monitorSum = (res.monitorStationNum ? res.monitorStationNum : '0') + ''
			this.monitorData = (res.monitorDataNum ? res.monitorDataNum : '0') + ''
			this.alarmSum = (res.alarmNum ? res.alarmNum : '0') + ''
			this.timeSum = (res.monitorDays ? res.monitorDays : '0') + ''
		})
		await analyzeAlarmNum(this.$store.state.compony_info.companycode).then(res => {
			this.lowRisk = (res.yellowNum ? res.yellowNum : '0') + ''
			this.generalRisk = (res.orangeNum ? res.orangeNum : '0') + ''
			this.greaterRisk = (res.redNum ? res.redNum : '0') + ''
		})
		await analyzeHDNum(this.$store.state.compony_info.id).then(res => {
			console.log(res, 'analyzeHDNum analyzeHDNum')
			this.noCloseLoop = res.seriousNotRectifiedNum
			this.closeLoop = res.seriousRectifiedNum
		})
		this.mineMethod = this.$store.state.compony_info.mine
		this.area = this.$store.state.compony_info.area
		this.yields = this.$store.state.compony_info.capacity
		this.minerals = this.$store.state.compony_info.mineral
		switch (this.$store.state.compony_info.name) {
			case '雅斯作业区':
				this.mineMethod = this.mineMethod ? this.mineMethod : '地下开采, 竖井开拓'
				this.area = this.area ? this.area : '14.332'
				this.yields = this.yields ? this.yields : '25万吨/年'
				this.minerals = this.minerals ? this.minerals : '暂未填写'
				this.online = this.online ? this.online : 26
				this.offline = this.offline ? this.offline : 10
				this.monitorSum = this.monitorSum ? this.monitorSum : 27
				this.monitorData = this.monitorData ? this.monitorData : 9
				this.alarmSum = this.alarmSum ? this.alarmSum : 46
				this.timeSum = this.timeSum ? this.timeSum : 230
				this.lowRisk = this.lowRisk ? this.lowRisk : 6
				this.generalRisk = this.generalRisk ? this.generalRisk : 2
				this.greaterRisk = this.greaterRisk ? this.greaterRisk : 0
				this.noCloseLoop = this.noCloseLoop ? this.noCloseLoop : 0
				this.closeLoop = this.closeLoop ? this.closeLoop : 0
				break
			case '阿尔作业区':
				this.mineMethod = this.mineMethod ? this.mineMethod : '地下开采, 竖井开拓'
				this.area = this.area ? this.area : '14.332'
				this.yields = this.yields ? this.yields : '25万吨/年'
				this.minerals = this.minerals ? this.minerals : '暂未填写'
				this.online = this.online ? this.online : 31
				this.offline = this.offline ? this.offline : 8
				this.monitorSum = this.monitorSum ? this.monitorSum : 36
				this.monitorData = this.monitorData ? this.monitorData : 8
				this.alarmSum = this.alarmSum ? this.alarmSum : 48
				this.timeSum = this.timeSum ? this.timeSum : 246
				this.lowRisk = this.lowRisk ? this.lowRisk : 5
				this.generalRisk = this.generalRisk ? this.generalRisk : 1
				this.greaterRisk = this.greaterRisk ? this.greaterRisk : 0
				this.noCloseLoop = this.noCloseLoop ? this.noCloseLoop : 0
				this.closeLoop = this.closeLoop ? this.closeLoop : 0
				break
			case '山金白音呼布':
				this.mineMethod = this.mineMethod ? this.mineMethod : '地下开采, 竖井开拓'
				this.area = this.area ? this.area : '14.332'
				this.yields = this.yields ? this.yields : '25万吨/年'
				this.minerals = this.minerals ? this.minerals : '暂未填写'
				this.online = this.online ? this.online : 36
				this.offline = this.offline ? this.offline : 4
				this.monitorSum = this.monitorSum ? this.monitorSum : 42
				this.monitorData = this.monitorData ? this.monitorData : 3
				this.alarmSum = this.alarmSum ? this.alarmSum : 52
				this.timeSum = this.timeSum ? this.timeSum : 341
				this.lowRisk = this.lowRisk ? this.lowRisk : 9
				this.generalRisk = this.generalRisk ? this.generalRisk : 2
				this.greaterRisk = this.greaterRisk ? this.greaterRisk : 0
				this.noCloseLoop = this.noCloseLoop ? this.noCloseLoop : 0
				this.closeLoop = this.closeLoop ? this.closeLoop : 0
				break
			case '融冠矿业':
				this.mineMethod = this.mineMethod ? this.mineMethod : '地下开采, 竖井开拓'
				this.area = this.area ? this.area : '14.332'
				this.yields = this.yields ? this.yields : '25万吨/年'
				this.minerals = this.minerals ? this.minerals : '暂未填写'
				this.online = this.online ? this.online : 21
				this.offline = this.offline ? this.offline : 1
				this.monitorSum = this.monitorSum ? this.monitorSum : 45
				this.monitorData = this.monitorData ? this.monitorData : 76
				this.alarmSum = this.alarmSum ? this.alarmSum : 11
				this.timeSum = this.timeSum ? this.timeSum : 148
				this.lowRisk = this.lowRisk ? this.lowRisk : 6
				this.generalRisk = this.generalRisk ? this.generalRisk : 1
				this.greaterRisk = this.greaterRisk ? this.greaterRisk : 0
				this.noCloseLoop = this.noCloseLoop ? this.noCloseLoop : 0
				this.closeLoop = this.closeLoop ? this.closeLoop : 0
				break
			case '山金阿尔哈达':
				this.mineMethod = this.mineMethod ? this.mineMethod : '地下开采, 竖井开拓'
				this.area = this.area ? this.area : '14.332'
				this.yields = this.yields ? this.yields : '25万吨/年'
				this.minerals = this.minerals ? this.minerals : '暂未填写'
				this.online = this.online ? this.online : 17
				this.offline = this.offline ? this.offline : 5
				this.monitorSum = this.monitorSum ? this.monitorSum : 67
				this.monitorData = this.monitorData ? this.monitorData : 45
				this.alarmSum = this.alarmSum ? this.alarmSum : 15
				this.timeSum = this.timeSum ? this.timeSum : 153
				this.lowRisk = this.lowRisk ? this.lowRisk : 5
				this.generalRisk = this.generalRisk ? this.generalRisk : 1
				this.greaterRisk = this.greaterRisk ? this.greaterRisk : 0
				this.noCloseLoop = this.noCloseLoop ? this.noCloseLoop : 0
				this.closeLoop = this.closeLoop ? this.closeLoop : 0
				break
			case '锡林矿业':
				this.mineMethod = this.mineMethod ? this.mineMethod : '地下开采, 竖井开拓'
				this.area = this.area ? this.area : '14.332'
				this.yields = this.yields ? this.yields : '25万吨/年'
				this.minerals = this.minerals ? this.minerals : '暂未填写'
				this.online = this.online ? this.online : 21
				this.offline = this.offline ? this.offline : 4
				this.monitorSum = this.monitorSum ? this.monitorSum : 26
				this.monitorData = this.monitorData ? this.monitorData : 11
				this.alarmSum = this.alarmSum ? this.alarmSum : 8
				this.timeSum = this.timeSum ? this.timeSum : 278
				this.lowRisk = this.lowRisk ? this.lowRisk : 3
				this.generalRisk = this.generalRisk ? this.generalRisk : 1
				this.greaterRisk = this.greaterRisk ? this.greaterRisk : 0
				this.noCloseLoop = this.noCloseLoop ? this.noCloseLoop : 0
				this.closeLoop = this.closeLoop ? this.closeLoop : 0
				break
			case '钨矿':
				this.mineMethod = this.mineMethod ? this.mineMethod : '地下开采, 竖井开拓'
				this.area = this.area ? this.area : '14.332'
				this.yields = this.yields ? this.yields : '25万吨/年'
				this.minerals = this.minerals ? this.minerals : '暂未填写'
				this.online = this.online ? this.online : 24
				this.offline = this.offline ? this.offline : 3
				this.monitorSum = this.monitorSum ? this.monitorSum : 31
				this.monitorData = this.monitorData ? this.monitorData : 8
				this.alarmSum = this.alarmSum ? this.alarmSum : 2
				this.timeSum = this.timeSum ? this.timeSum : 238
				this.lowRisk = this.lowRisk ? this.lowRisk : 2
				this.generalRisk = this.generalRisk ? this.generalRisk : 1
				this.greaterRisk = this.greaterRisk ? this.greaterRisk : 0
				this.noCloseLoop = this.noCloseLoop ? this.noCloseLoop : 0
				this.closeLoop = this.closeLoop ? this.closeLoop : 0
				break
			case '延长宏博':
				this.mineMethod = this.mineMethod ? this.mineMethod : '地下开采, 竖井开拓'
				this.area = this.area ? this.area : '14.332'
				this.yields = this.yields ? this.yields : '25万吨/年'
				this.minerals = this.minerals ? this.minerals : '暂未填写'

				this.online = this.online ? this.online : 17
				this.offline = this.offline ? this.offline : 6
				this.monitorSum = this.monitorSum ? this.monitorSum : 25
				this.monitorData = this.monitorData ? this.monitorData : 75
				this.alarmSum = this.alarmSum ? this.alarmSum : 8
				this.timeSum = this.timeSum ? this.timeSum : 131
				this.lowRisk = this.lowRisk ? this.lowRisk : 3
				this.generalRisk = this.generalRisk ? this.generalRisk : 1
				this.greaterRisk = this.greaterRisk ? this.greaterRisk : 0
				this.noCloseLoop = this.noCloseLoop ? this.noCloseLoop : 0
				this.closeLoop = this.closeLoop ? this.closeLoop : 0
				break
		}
		this.init1()
		this.init3()
		this.init4()
	},
	methods: {
		closeMySelf() {
			this.$store.commit('SET_EnterPotrait', false)
		},
		init1() {
			const mychart = echarts.init(this.$refs.mychart1)
			const option = {
				tooltip: {
					trigger: 'item',
					formatter: '{b}: {c} ({d}%)',
				},
				series: [
					{
						name: '企业监测设备',
						type: 'pie',
						radius: [20, 80],
						center: ['50%', '50%'],
						roseType: 'radius',
						itemStyle: {
							borderRadius: 5,
						},
						data: [
							{
								value: this.online,
								name: '设备在线',
							},
							{
								value: this.offline,
								name: '设备离线',
							},
						],
					},
				],
			}
			mychart.setOption(option)
		},
		init3() {
			const mychart = echarts.init(this.$refs.mychart3)
			const option = {
				tooltip: {
					trigger: 'item',
				},
				series: [
					{
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						data: [
							{
								value: this.lowRisk,
								name: '风险等级一',
								itemStyle: {
									color: '#057AFD',
								},
							},
							{
								value: this.generalRisk,
								name: '风险等级二',
								itemStyle: {
									color: '#F88F12',
								},
							},
							{
								value: this.greaterRisk,
								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)
		},
		init4() {
			const mychart = echarts.init(this.$refs.mychart4)
			const option = {
				tooltip: {
					trigger: 'item',
				},
				series: [
					{
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						data: [
							{
								value: this.noCloseLoop,
								name: '重大安全隐患未闭环',
								itemStyle: {
									color: '#FEFA03',
								},
							},
							{
								value: this.closeLoop,
								name: '重大安全隐患已闭环',
								itemStyle: {
									color: '#FF9D13',
								},
							},
						],
						label: {
							align: 'left',
							normal: {
								formatter(v) {
									return `${v.name}\n${v.value}`
								},
								textStyle: {
									fontSize: 12,
								},
							},
						},
						labelLine: {
							length: 3,
							length2: 10,
						},
					},
				],
			}
			mychart.setOption(option)
		},
	},
}
</script>

<style lang="scss" scoped>
.potrait-wrapper {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 22vw;
	background: #020c39;
	border-radius: 5px;
	padding: 10px;
	transform: translate(-50%, -50%);
	.close-wrapper {
		position: absolute;
		right: 10px;
		top: 10px;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		width: 25px;
		height: 25px;
		border: 2px solid #02fcfe;
	}
	.basic-info {
		.basic-info-title {
			font-size: 16px;
			color: #02fcfe;
			font-weight: 550;
			margin-top: 12px;
		}
		.basic-info-item {
			display: flex;
			justify-content: space-between;
			margin-top: 8px;
			font-size: 14px;
			line-height: 14px;
			padding: 1px;
			div {
				&:first-child {
					margin-left: 10px;
					color: #00c9fd;
				}
				&:last-child {
					margin-right: 10px;
					color: white;
				}
			}
		}
	}
	.basic-info1 {
		height: 20vh;
		display: flex;
		flex-direction: column;
		.basic-info-title {
			font-size: 16px;
			color: #02fcfe;
			font-weight: 550;
			margin-top: 12px;
		}
		.chart {
			flex-grow: 1;
		}
	}
	.monitor-data-wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		.monitor-data {
			padding: 5px;
			border: 1px solid #02fcfe;
			box-shadow: 0 9px 25px -9px inset #02fcfe;
			text-align: center;
			flex-basis: 40%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			margin: 8px;
			.monitor-data-title {
				color: white;
				font-size: 14px;
			}
			.monitor-data-degree {
				color: #02fcfe;
				font-size: 18px;
			}
		}
	}
}
</style>
