<template>
	<div class="fengxian_right">
		<div class="top">
			<div class="title">企业风险等级综合评估</div>
			<div class="page">
				<div class="page_div" v-for="(item, index) in zaixiandongtaijiance" :key="index">
					<div class="page_div_son" :style="{ backgroundImage: 'url(' + item.url_1 + ')' }" @click="getRiskListByCompanycodeList(item)">
						<span class="text">
							<span></span>
							<span>{{ item.name }}--风险等级</span>
							<span v-if="!item.riskLevel">正常</span>
							<span v-if="item.riskLevel == 4">四级</span>
							<span v-if="item.riskLevel == 3">三级</span>
							<span v-if="item.riskLevel == 2">二级</span>
							<span v-if="item.riskLevel == 1">一级</span>
						</span>
						<span class="text">
							<span>--测点报警</span>
							<span>3</span>
							<span>个</span>
						</span>
					</div>
				</div>
			</div>
		</div>
		<br />
		<div class="top">
			<div class="title">
				<span>风险报警</span>
				<span class="btn_send" @click="onSendRiskSM">一键发送</span>
			</div>
			<div class="page">
				<!-- <div class="page_div" v-for="(item, index) in zaixiandongtaijiance2" :key="index">
					<div class="page_div_son page_div_son2">
						<span class="text" :title="item.message">{{ item.name + item.msg }}</span>
					</div>
				</div> -->

				<div class="page_div" v-for="(item, index) in dataList" :key="index">
					<div class="page_div_son page_div_son2">
						<span class="risk-title"> {{ item.name }} {{ item.yhms }}</span>
						<span class="time" @click="onClickWarning(item)">查看详情</span>
					</div>
				</div>
			</div>
		</div>

		<div class="top">
			<div class="title">
				<span>企业(行业)安全态势分析</span>
			</div>
			<div ref="myCharts" class="charts_div"></div>
		</div>

		<div class="dialog animated animate__backInUp" v-if="is_dialog">
			<img src="@/assets/images/error.png" class="error" @click="is_dialog = false" />
			<div class="dialog--content">
				<div v-for="(warnData, index) in warnDataList" :key="index">
					<div class="title">{{ warnData.name }}</div>

					<div>
						<el-row class="page_text">
							<el-col :span="8">排查人</el-col>
							<el-col class="text_right" :span="16">{{ warnData.pcr }}</el-col>
						</el-row>

						<el-row class="page_text">
							<el-col :span="8">填报人</el-col>
							<el-col class="text_right" :span="16">{{ warnData.tbr }}</el-col>
						</el-row>

						<el-row class="page_text">
							<el-col :span="8">隐患来源</el-col>
							<el-col class="text_right" :span="16">{{ warnData.yhly }}</el-col>
						</el-row>

						<el-row class="page_text">
							<el-col :span="8">隐患地点</el-col>
							<el-col class="text_right" :span="16">{{ warnData.yhdd }}</el-col>
						</el-row>

						<el-row class="page_text">
							<el-col :span="8">隐患部位</el-col>
							<el-col class="text_right" :span="16">{{ warnData.yhbw }}</el-col>
						</el-row>

						<el-row class="page_text">
							<el-col :span="8">隐患类别</el-col>
							<el-col class="text_right" :span="16">{{ warnData.yhlb }}</el-col>
						</el-row>

						<el-row class="page_text">
							<el-col :span="8">隐患描述</el-col>
							<el-col class="text_right" :span="16">{{ warnData.yhms }}</el-col>
						</el-row>

						<el-row class="page_text">
							<el-col :span="8">整改期限</el-col>
							<el-col class="text_right" :span="16">{{ warnData.zgqx }}</el-col>
						</el-row>

						<el-row class="page_text">
							<el-col :span="10">整改实际完成日期</el-col>
							<el-col class="text_right" :span="14">{{ warnData.zgwcrq }}</el-col>
						</el-row>

						<el-row class="page_text">
							<el-col :span="8">整改类型</el-col>
							<el-col class="text_right" :span="16">{{ warnData.zglx }}</el-col>
						</el-row>

						<el-row class="page_text">
							<el-col :span="8">隐患整改前图片</el-col>
							<el-col class="text_right" :span="16">
								<img :src="warnData.yhzgqtp" alt="" style="width: 3vw" />
							</el-col>
						</el-row>

						<el-row class="page_text">
							<el-col :span="8">隐患整改后图片</el-col>
							<el-col class="text_right" :span="16">
								<img :src="warnData.yhzghtp" alt="" style="width: 3vw" />
							</el-col>
						</el-row>
					</div>
				</div>
			</div>
		</div>

		<div class="dialog fx-dialog" v-show="is_dialog_info">
			<img src="@/assets/images/error.png" class="error" @click="is_dialog_info = false" />

			<div class="page">
				<div class="title">{{ warnData.name }}</div>

				<div>
					<el-row class="page_text">
						<el-col :span="8">排查人</el-col>
						<el-col class="text_right" :span="16">{{ warnData.pcr }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">填报人</el-col>
						<el-col class="text_right" :span="16">{{ warnData.tbr }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">隐患来源</el-col>
						<el-col class="text_right" :span="16">{{ warnData.yhly }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">隐患地点</el-col>
						<el-col class="text_right" :span="16">{{ warnData.yhdd }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">隐患部位</el-col>
						<el-col class="text_right" :span="16">{{ warnData.yhbw }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">隐患类别</el-col>
						<el-col class="text_right" :span="16">{{ warnData.yhlb }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">隐患描述</el-col>
						<el-col class="text_right" :span="16">{{ warnData.yhms }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">整改期限</el-col>
						<el-col class="text_right" :span="16">{{ warnData.zgqx }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="10">整改实际完成日期</el-col>
						<el-col class="text_right" :span="14">{{ warnData.zgwcrq }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">整改类型</el-col>
						<el-col class="text_right" :span="16">{{ warnData.zglx }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">隐患整改前图片</el-col>
						<el-col class="text_right" :span="16">
							<img :src="warnData.yhzgqtp" alt="" style="width: 3vw;" @click="onImg(warnData.yhzgqtp)" />
						</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">隐患整改后图片</el-col>
						<el-col class="text_right" :span="16">
							<img :src="warnData.yhzghtp" alt="" style="width: 3vw;" @click="onImg(warnData.yhzghtp)" />
						</el-col>
					</el-row>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getFXData, sendRiskSM, getRiskListByCompanycode } from '@/api/fengxian'
import { dept, findHiddenTimeout } from '@/api'

export default {
	data() {
		return {
			one_1: require('@/assets/images/yingji_1_1.png'),

			two_1: require('@/assets/images/yingji_2_2.png'),

			three_1: require('@/assets/images/yingji_3_3.png'),

			four_1: require('@/assets/images/yingji_4_4.png'),

			five_1: require('@/assets/images/yingji_5_5.png'),

			zhengchang: require('@/assets/images/zhengchang.png'),

			zaixiandongtaijiance: [],
			zaixiandongtaijiance2: [],
			is_dialog: false,

			warnDataList: [],

			dataList: '',
			is_dialog_info: false, // 隐患研判显隐
			warnData: '', //隐患研判
		}
	},

	mounted() {
		// getFXData().then(res => {})

		this.zaixiandongtaijiance2 = [
			{
				name: '山金白音呼布',
				msg: '干滩长测点通信中断',
			},

			{
				name: '融冠矿业',
				msg: '监测站2测点通信中断',
			},
		]

		this.init()

		this.initDept()

		this.onFindHiddenTimeout()
	},

	methods: {
		initDept() {
			dept().then(res => {
				this.zaixiandongtaijiance = []
				res.content.map(item => {
					if (item.name == '东乌珠穆沁旗应急管理局') {
						return
					}

					item.url_1 = this.zhengchang

					if (item.riskLevel == 4) {
						item.url_1 = this.four_1
					}

					if (item.riskLevel == 3) {
						item.url_1 = this.three_1
					}

					if (item.riskLevel == 2) {
						item.url_1 = this.two_1
					}

					if (item.riskLevel == 1) {
						item.url_1 = this.one_1
					}

					this.zaixiandongtaijiance.push(item)
				})
			})
		},

		init() {
			const myChart = echarts.init(this.$refs.myCharts)

			const colorList = ['#1c5ec1', '#FFC107', '#FF7F00', 'red']
			const option = {
				color: ['#63caff', '#3608FE'],
				grid: {
					containLabel: true,
					left: 0,
					right: 0,
					bottom: 30,
					top: 10,
				},
				xAxis: {
					axisLabel: {
						color: '#c0c3cd',
						fontSize: 14,
						interval: 0,
					},
					splitLine: {
						show: false,
					},
					axisLine: {
						lineStyle: {
							color: '#384267',
							width: 1,
							type: 'dashed',
						},
						show: true,
					},
					data: ['山金白音呼布', '融冠矿业', '山金阿尔哈达', '锡林矿业', '钨矿'],
					type: 'category',
				},
				yAxis: {
					min: 0,
					max: 400,
					axisLabel: {
						color: '#c0c3cd',
						fontSize: 14,
					},

					splitLine: {
						show: true,
						lineStyle: {
							color: '#384267',
							type: 'dashed',
						},
					},
					axisLine: {
						lineStyle: {
							color: '#384267',
							width: 1,
							type: 'dashed',
						},
						show: true,
					},
					name: '',
				},

				dataZoom: [
					{
						show: true,
						height: 12,
						xAxisIndex: [0],
						bottom: 0,
						start: 0,
						end: 60,
						handleSize: '110%',
						handleStyle: {
							color: '#d3dee5',
						},
						textStyle: {
							color: '#fff',
						},
						borderColor: '#90979c',
					},
				],
				series: [
					{
						data: [78, 85, 66, 53, 72],
						type: 'bar',
						barWidth: 15,
						itemStyle: {
							color: {
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								type: 'linear',
								global: false,
								colorStops: [
									{
										offset: 0,
										color: '#3A1BFD',
									},
									{
										offset: 1,
										color: '#3BEFFD',
									},
								],
							},
							normal: {
								color: function(params) {
									var val = params.value
									if (val < 101) {
										return colorList[0]
									} else if (val < 201) {
										return colorList[1]
									} else if (val < 301) {
										return colorList[2]
									} else {
										return colorList[3]
									}
								},
							},
						},
						label: {
							show: true,
							position: 'top',
							distance: 10,
							color: '#fff',
							fontSize: 10,
						},
						markLine: {
							symbol: 'none',
							lineStyle:{
								type:'dotted',
							},
							data: [
								{
									yAxis: 0,
									itemStyle: {
										color: colorList[0]
									}
								},
								{
									yAxis: 100,
									itemStyle: {
										color: colorList[1]
									}
								},
								{
									yAxis: 200,
									itemStyle: {
										color: colorList[2]
									}
								},
								{
									yAxis: 300,
									itemStyle: {
										color: colorList[3]
									}
								},
							]
						},
					},
				],
				tooltip: {
					trigger: 'item',
					show: true,
				},
			}

			myChart.setOption(option, true)
		},

		// 一键发送
		onSendRiskSM() {
			this.$message({
				message: '发送成功',
				type: 'success',
			})
			sendRiskSM().then(res => {})
		},

		// 获取隐患
		getRiskListByCompanycodeList(e) {
			for (let item of this.zaixiandongtaijiance) {
				item.url_1 = this.zhengchang

				if (item.riskLevel == 4) {
					item.url_1 = this.four_1
				}

				if (item.riskLevel == 3) {
					item.url_1 = this.three_1
				}

				if (item.riskLevel == 2) {
					item.url_1 = this.two_1
				}

				if (item.riskLevel == 1) {
					item.url_1 = this.one_1
				}
			}

			e.url_1 = this.five_1

			getRiskListByCompanycode({
				companycode: e.companycode,
			}).then(res => {
				this.warnDataList = res.content.map(item => {
					if (item.hiddenYhzghtpSet.length > 0) {
						item.yhzghtp = 'data:image/jpeg;base64,' + item.hiddenYhzghtpSet[0].yhzghtp
					}

					if (item.hiddenYhzgqtpSet.length > 0) {
						item.yhzgqtp = 'data:image/jpeg;base64,' + item.hiddenYhzgqtpSet[0].yhzgqtp
					}
					return item
				})
			})

			setTimeout(() => {
				this.is_dialog = true
			}, 0)

			this.is_dialog = false
		},

		// 隐患
		onFindHiddenTimeout() {
			findHiddenTimeout().then(res => {
				let deptData = this.$store.state.deptData // 所有企业
				this.dataList = res.content.map(item => {
					for (let contx of deptData) {
						if (contx.companycode == item.companycode) {
							item.name = contx.name
						}
					}
					return item
				})
			})
		},
		onClickWarning(params) {
			if (params.hiddenYhzghtpSet.length > 0) {
				params.yhzghtp = 'data:image/jpeg;base64,' + params.hiddenYhzghtpSet[0].yhzghtp
			}

			if (params.hiddenYhzgqtpSet.length > 0) {
				params.yhzgqtp = 'data:image/jpeg;base64,' + params.hiddenYhzgqtpSet[0].yhzgqtp
			}

			this.is_dialog_info = true
			this.warnData = params
		},
	},
}
</script>

<style lang="scss">
@import '@/assets/scss/var.scss';

.fengxian_right {
	position: absolute;
	background: #040624;
	width: 18%;
	right: 0;
	top: 0;
	bottom: 10px;
	z-index: 99;
	color: #7afffd;
	padding: 0 1vw;

	.title {
		height: 4vh;
		display: flex;
		justify-content: space-between;
		font-size: 2vh;
		align-items: center;
	}

	.top {
		height: 29vh;
		.page {
			height: 85%;
			overflow-y: auto;
			@include scrollbar;
			color: #fff;

			.page_div {
				margin-bottom: 1.5vh;
				margin-right: 0.3vw;
				display: flex;
				align-items: center;
				cursor: pointer;
				.page_circle {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 1.6vw;
					height: 1.6vw;
					border-radius: 50%;
					background-size: 100% 100%;
					margin-right: 0.5vw;
				}

				.page_div_son {
					padding: 0.85vh 0.5vw;
					flex: 1;
					display: flex;
					justify-content: space-between;
					background-size: 100% 100%;
					background-image: url('~@/assets/images/zhengchang.png');

					.risk-title{
						display: inline-block;
						max-width: 11vw;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						word-wrap: normal;
					}

					.text {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.page_div_son2 {
					background-image: url('~@/assets/images/yingji_3_3.png');
				}
			}
		}

		.btn_send {
			padding: 0.3vh 0.4vw;
			font-size: 1.3vh;
			color: #ffc107;
			border: 1px solid;
			border-radius: 5px;
			background-color: #ffc1071a;
			cursor: pointer;
		}

		.charts_div {
			height: 25vh;
		}
	}

	.dialog {
		position: absolute;
		right: 100%;
		top: 5vh;
		padding: 2vw 1vw;
		width: 20vw;
		height: 82vh;
		overflow-y: auto;
		background-image: url('~@/assets/images/kuang.png');
		background-size: 100% 100%;
		color: #fff;

		&--content {
			margin-top: 3vh;
			height: 92%;
			padding-right: 1vw;
			overflow: hidden;
			overflow-y: auto;
			@include scrollbar;
		}

		.error {
			position: absolute;
			cursor: pointer;
			right: 1vw;
			top: 4vh;
			z-index: 999;
		}

		.page_text {
			line-height: 2.2;

			.text_right {
				text-align: right;
			}
		}

		.page_line {
			color: #fff;
		}

		.page_div {
			color: #07c1f7;
			font-size: 1.5vh;
			margin-bottom: 1vh;
			.page_div_text {
				line-height: 1.7;
				color: #fff;
			}

			.page_div_text2 {
				height: 37vh;
				overflow-y: auto;
				@include scrollbar;
			}
		}

		.text {
			margin-top: 2vh;
			text-align: center;
		}

		.btn {
			position: absolute;
			bottom: 30px;
			left: 0;
			right: 0;
			margin: auto;
			background-image: linear-gradient(#f97f21, #ffa921);
		}
	}

	.fx-dialog{height:62vh}
}
</style>
