<template>
	<div class="ScreenFX cm-layout">
		<div class="a_0">
			
		</div>
		<div class="b_0">
			<header>
				<div class="b1_a">
					<h1>尾矿库数据风险预警监控平台</h1>
				</div>
				<div class="b1_b">
					<a href="/dashboard">返回</a>
					<span class="date font_digit" id="nowTime">2021<span>年</span>12<span>月</span>01<span>日</span> 09:12:34</span>
				</div>
				<div class="b1_c">
					<div class="scroll-msg photo-frame" id="scrollMsg">
						<div class="in-box">
							<ul class="">
								<!-- <li v-for="item in alarmList">
									<h5><i :class="'level'+(item.alarmlevel)"></i>{{item.name}}</h5>
									<span>{{alarmlevel[item.alarmlevel]}}</span><font>{{item.time}}</font>
								</li> -->
							</ul>
						</div>
					</div>
				</div>
			</header>
			<section class="b_2">
				<div class="b2_a">
					<div class="b2_a1 abs-flex">
						<div class="flex-disf panle-seat">
							<div class="flex-disf-col panle-inbox">
								<div class="title">
									<h4>各监测项目风险数量月统计</h4>
								</div>
								<div class="content flex-rel">
									<div class="abs-full" id="chart1"></div>
								</div>
							</div>
						</div>
						<div class="flex-disf panle-seat">
							<div class="flex-disf-col panle-inbox">
								<div class="title">
									<h4>风险等级数量月统计</h4>
								</div>
								<div class="content flex-rel">
									<div class="abs-full" id="chart2"></div>
								</div>
							</div>
						</div>
					</div>
					<div class="b2_a2" id="b2_a2">
						<div class="b2a_2a text-abs"><a class="">尾矿库风险等级</a></div>
						<div class="b2a_2b text-abs"><a class="">在线监测</a></div>
						<div class="b2a_2c text-abs"><a class="">实时监测</a></div>
						<div class="b2a_2d text-abs"><a class="">尾矿库安全</a></div>
					</div>
					<div class="b2_a3 abs-flex">
						<div class="flex-disf panle-seat">
							<div class="flex-disf-col panle-inbox">
								<div class="title">
									<h4>各监测项目风险数量年统计</h4>
								</div>
								<div class="content flex-rel">
									<div class="abs-full" id="chart3"></div>
								</div>
							</div>
						</div>
						<div class="flex-disf panle-seat">
							<div class="flex-disf-col panle-inbox">
								<div class="title">
									<h4>各监测项目当前风险预警级别</h4>
								</div>
								<div class="content flex-rel">
									<div class="abs-full scroll-list scrolling4" id="chart4">
										<ul class="info-list">
											<li v-for="item in alarmList">
												<h5><i :class="'level'+(item.alarmlevel)"></i>{{item.name}}</h5>
												<span>{{alarmlevel[item.alarmlevel]}}</span><font>{{item.time}}</font>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
		</div>
	</div>
</template>

<script>
import { Tools } from '@/assets/js/common.js';
import { reqApi, Config } from '@/assets/js/httpApi.js';
import { Highchart } from '@/assets/js/chartTemplates.js';

export default {
	components: {},
	data() {
		return {
			alarmList:[],
			alarmlevel:['正常', '红色预警', '橙色预警', '黄色预警', '蓝色预警'],
		}
	},
	mounted() {
		this.$nextTick(() => {
			this.pageApi = Config.getModuleInfo(this);
			this.chart1 = this.$el.querySelector("#chart1");
			this.chart2 = this.$el.querySelector("#chart2");
			this.chart3 = this.$el.querySelector("#chart3");

			// 时钟
			var nowTimeEl = this.$el.querySelector("#nowTime");
			var Loop1 = qf.Async.intervalLoop(1000, function(){
				var dateTime = Tools.Dates.format('yyyy年MM月dd日 HH:mm:ss');
				dateTime = dateTime.replace(/年|月|日/g, function(a){return '<span>'+a+'</span>'});
				nowTimeEl.innerHTML = dateTime;
				//Loop1.clear();
			}, function(){
				var dateTime = Tools.Dates.format('yyyy年MM月dd日 HH:mm:ss');
				dateTime = dateTime.replace(/年|月|日/g, function(a){return '<span>'+a+'</span>'});
				nowTimeEl.innerHTML = dateTime;
			});
			
			setTimeout(() => {
			this.loadData();
			}, 500);
		});
	},
	methods: {
		loadData(){
			// 风险数量年统计
			reqApi.common.requstEdge('get', 'tab/Abnormal/statistics', {date:'year'}).then((res)=>{
				var list = res.body || [];
				var barSeriesData = [], categories = [], Catch = {}, i = 0;
				for(var item of list){
					var sum = item.red + item.orange + item.yellow + item.blue;
					barSeriesData.push({color:Highchart.getRandomColor(i++), y:sum});
					categories.push(item.name);
					Catch['red'] = ~~Catch['red'] + item.red;
					Catch['orange'] = ~~Catch['orange'] + item.orange;
					Catch['yellow'] = ~~Catch['yellow'] + item.yellow;
					Catch['blue'] = ~~Catch['blue'] + item.blue;
				};
				var pieSeriesData = [
					{name:'红色报警', y:Catch['red'], color:'red'},
					{name:'橙色报警', y:Catch['orange'], color:'orange'},
					{name:'黄色报警', y:Catch['yellow'], color:'yellow'},
					{name:'蓝色报警', y:Catch['blue'], color:'blue'},
				];
				var opts = {
					chartConfig:{
						chart: {
							marginTop:20,
							marginLeft:60,
							marginBottom:20,
						},
						title: {
							text:''
						},
						xAxis: {
							labels: {
								rotation:0, 
								y:5,
								x:-5,
								style:{
									fontSize:'.14rem',
								},
							},
							categories: categories,
						},
						plotOptions: {
							series: {
								stacking: 'normal'
							},
							bar: {
								dataLabels: {
									enabled: true,
									allowOverlap: true // 允许数据标签重叠
								}
							}
						},
						labels: {
							/* items: [{
								html: '水果消耗',
								style: {
									left: '100px',
									top: '18px',
									//color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
								}
							}] */
						},
						series: [{
							type:'bar',
							name: '设备报警数量',
							data: barSeriesData,
							borderWidth:0,
							//color:'yellow'
						}, {
							type:'pie',
							name:'报警统计',
							innerSize:'60%',
							data:pieSeriesData,
							center: ['85%', '50%'],
							size: '40%',
							borderWidth:0,
							showInLegend: false,
							dataLabels: {
								enabled: false
							}
						}]
					},
					isSeriesData:true,
					notExtendsOptions:true,
				};
				Highchart.template.high(this.chart3, {}, opts);
			});
			
			// 监测项滚动列表
			reqApi.common.requstEdge('get', '/tab/Abnormal/typelist', {}).then((res)=>{
				var body = res.body || [];
				this.alarmList = body;
				
				this.$nextTick(() => {
					// 小窗口无缝滚动
					var scrollMsg = this.$el.querySelector("#scrollMsg");
					var listBox = scrollMsg.firstElementChild.firstElementChild;
					var risk = this.getHighAlarmLevel(body);
					listBox.innerHTML = '<li><h5><i></i>尾矿库风险等级</h5><span class="level'+(risk.level)+'">'+risk.text+'</span></li>';

					Tools.singleViewSeamlessScroll(scrollMsg);

					// 列表滚动
					var chart4 = this.$el.querySelector("#chart4");
					qf.UI.scrollingPreview(chart4);
				});
			});

			// 风险数量月统计
			reqApi.common.requstEdge('get', 'tab/Abnormal/statistics', {date:'month'}).then((res)=>{
				var list = res.body || [];
				var barSeriesData = [], categories = [], Catch = {}, i = 0;
				for(var item of list){
					var sum = item.red + item.orange + item.yellow + item.blue;
					barSeriesData.push({name:item.equipname, y:sum, color:Highchart.getRandomColor(i++)});
					categories.push(item.name);
					Catch['red'] = ~~Catch['red'] + item.red;
					Catch['orange'] = ~~Catch['orange'] + item.orange;
					Catch['yellow'] = ~~Catch['yellow'] + item.yellow;
					Catch['blue'] = ~~Catch['blue'] + item.blue;
				};
				var pieSeriesData = [
					{name:'红色报警', y:Catch['red'], color:'red'},
					{name:'橙色报警', y:Catch['orange'], color:'orange'},
					{name:'黄色报警', y:Catch['yellow'], color:'yellow'},
					{name:'蓝色报警', y:Catch['blue'], color:'blue'},
				];

				// 监测项按月统计
				var itemOptions = {
					chartConfig:{
						chart: {
							type: 'column',
							marginTop:15,
							marginLeft:20,
							marginBottom:15,
						},
						xAxis: {
							labels: {
								rotation:-25, 
								style:{
									//fontSize:'.14rem',
								},
							},
							visible:false,
						},
						series: [{
							type: 'column',
							name: '设备报警数量',
							data: barSeriesData,
							borderWidth:0,
							dataLabels: {
								enabled: true,
								rotation: -90,
								color: '#FFFFFF',
								align: 'right',
								//format: '{point.y:.1f}', // :.1f 为保留 1 位小数
								y: 10
							}
						}]
					},
					isSeriesData:true,
					notExtendsOptions:true,
				};
				Highchart.template.high(this.chart1, {}, itemOptions);


				//风险等级数量月统计
				var pieOptions = {
					chartConfig:{
						chart: {
							type: 'pie',
							animation: false,
							events: {
								load: function() {
								}
							},
							options3d: {
								enabled: true,
								alpha: 65,
								beta: 0
							},
							marginLeft:5,
							marginRight:5,
						},
						plotOptions: {
							pie: {
								allowPointSelect: true,
								cursor: 'pointer',
								depth: 35,
								dataLabels: {
									enabled: true,
									connectorPadding:0,
									distance:15,
								}
							}
						},
						series: [{
							type:'pie',
							name:'报警统计',
							//innerSize:'70%',
							data:pieSeriesData,
							size: '80%',
							borderWidth:0,
						}]
					},
					isSeriesData:true,
					notExtendsOptions:true,
				};
				Highchart.template.high(this.chart2, {}, pieOptions);
			});
		},
		// 获取最高报警值
		getHighAlarmLevel(list){
			var value = 0;
			for(var item of list){
				if(!value || item.alarmlevel && item.alarmlevel < value){
					value = item.alarmlevel;
				}
			};return {text:this.alarmlevel[value], level:value};
		},
	},
}
</script>

<style lang="scss" scope>
	@font-face {
		font-family:"diget year";
		src: url("~@/assets/fonts/DS-Digital.ttf");
	};
	.font_digit{font-family:diget year;}
	
	.ScreenFX {
		position:relative;height:100%;width:100%;overflow:hidden;background-color:#00164e;
		.a_0, .b_0, .c_0{position:absolute;}
		.a_0{
			position:relative;height:100%;width:100%;
			background:no-repeat center center url('~@/assets/images/fx_bg_min.png');
			background-size:100% 100%;
		}
		
		.b_0{
			top:0;left:0;width:100%;height:100%;
			header{
				position:absolute;top:0;left:0;height:0;width:100%;display:flex;justify-content:center;color:#2EF4EE;z-index:10;
				
				.b1_a, .b1_b, .b1_c{position:absolute;}
				.b1_a{
					position:absolute;width:7.75rem;height:.75rem;margin-left:.20rem;
					&:before{
						content:"";position:absolute;top:0;left:0;height:100%;width:100%;
						background-image:linear-gradient(to bottom, transparent 0%, #005fd3 80%);
						transform:scaleY(1.00) perspective(1rem) rotateX(-13deg);
					}
					h1{
						position:relative;z-index:1;
						font-size:.45rem;line-height:1;margin-top:-.04rem;text-align:center;line-height:.75rem;
						background-image:linear-gradient(to bottom, #f1ffff, #b8ecf9, #7fcfff);
						-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.03rem;
					}
				}
				.b1_b{
					top:.49rem;left:.49rem;height:.40rem;width:4.55rem;display:flex;
					a{
						width:1.10rem;height:.36rem;line-height:.36rem;background-color:#0d3475;margin-right:5px;border-radius:.12rem;text-align:center;font-size:.14rem;cursor:pointer;color:#36CCD4;
					}
					.date{
						line-height:.43rem;font-size:.28rem;margin-left:.10rem;
						span{font-family:serif;font-size:.24rem;margin:0 .05rem;}
					}
				}
				.b1_c{
					top:.49rem;right:.49rem;height:.43rem;width:4.30rem;line-height:.40rem;font-size:.16rem;
					.photo-frame{
						position:relative;height:100%;width:100%;
						&:before, &:after, .in-box:before, .in-box:after{
							content:"";position:absolute;height:.10rem;width:.10rem;z-index:1;
							border-style:solid;border-color:#C0E2FF;
						}
						&:before, &:after{top:-1px;}
						&:before{left:-1px;border-width:.02rem 0 0 .02rem;}
						&:after{right:-1px;border-width:.02rem .02rem 0 0;}
						.in-box{
							position:absolute;top:0;left:0;height:100%;width:100%;
							&:before, &:after{bottom:-1px;}
							&:before{left:-1px;border-width:0 0 .02rem .02rem;}
							&:after{right:-1px;border-width:0 .02rem .02rem 0;}
							ul{
								position:relative;height:100%;overflow:hidden;margin:0 .15rem;
								li{
									position:absolute;top:0;left:0;height:100%;width:100%;
									display:flex;justify-content:space-between;
									transform:scale(1);transform-origin:0px 0px;transform:translateY(100%);
								}
								.is-animating{
									transition:transform .4s ease-in-out;
								}
								.scroll-in{
									transform:translateY(0%) scale(1);
								}
								.scroll-out{
									transform:translateY(-100%) scale(1);
								}

								.level1{
									color:#F93C58,
								}
								.level2{
									color:#FA953A,
								}
								.level3{
									color:#E9FA3C,
								}
								.level4{
									color:#3BAFFB,
								}
							}
						}
					}
				}
			}

			.b_2, .b2_a{height:100%;width:100%;}
			.b2_a{
				position:relative;
				.abs-flex{
					top:1.12rem;height:9.20rem;width:4.87rem;flex-direction:column;
					.panle-seat{
						margin-top:.20rem;
						background:no-repeat center center url('~@/assets/images/fx_panel_min.png');
						background-size:100% 100%;
						.panle-inbox{
							margin:.14rem;
						}
						.title{
							margin:.10rem 0;
							background-image:linear-gradient(to right, transparent 10%, #075CAD, transparent 90%);
							h4{
								height:.30rem;line-height:.30rem;text-align:center;font-family:serif;font-size:.20rem;
								background-image:linear-gradient(to bottom, #f1ffff, #b8ecf9, #7fcfff);
								-webkit-background-clip:text;-webkit-text-fill-color:transparent;
							}
						}
					}
					.panle-seat:first-child{
						margin-top:0;
					}
					.scroll-list{
						overflow-y:scroll;
						
					}
				}
				.b2_a1{left:.34rem;}
				.b2_a3{right:.34rem;}

				.b2_a2{
					color:#fff;font-size:.30rem;
					.b2a_2a{
						top:4.07rem;left:9.50rem;
					}
					.b2a_2b{
						top:5.27rem;left:6.25rem;
					}
					.b2a_2c{
						top:5.16rem;left:12.95rem;
					}
					.b2a_2d{
						top:7.55rem;left:9.60rem;
					}
				}
			}
		}

		.info-list{
			li{
				display:flex;justify-content:space-between;height:.49rem;line-height:.47rem;
				border:1px solid #0f5680;margin:.06rem 0;padding:0 .10rem;
				background-image:linear-gradient(to right, transparent 30%, #13286b 80%);color:#35ecfa;
				h5{
					font-weight:normal;color:#fff;font-size:.14rem;

					display:flex;align-items:center;
					i{
						position:relative;width:.30rem;height:.24rem;margin-right:.06rem;
						display:flex;justify-content:center;
						&:before{
							content:"";position:absolute;height:0;width:0;bottom:0;
							border-width:.24rem .14rem;border-style:solid;
						}
						&:after{
							content:"!";position:absolute;font-style:normal;line-height:.30rem;font-size:.14rem;color:black;
						}
					}
					.level0{
						&:before{
							border-color:transparent;
						}
						&:after{
							content:"";
						}
					}
					.level1{
						&:before{
							border-color:transparent transparent #F93C58 transparent;
						}
					}
					.level2{
						&:before{
							border-color:transparent transparent #FA953A transparent;
						}
					}
					.level3{
						&:before{
							border-color:transparent transparent #E9FA3C transparent;
						}
					}
					.level4{
						&:before{
							border-color:transparent transparent #3BAFFB transparent;
						}
					}
				}
				span{font-size:.16rem;display:inline-block;margin-left:5px;}
				font{font-size:.14rem;margin-left:5px;}

				h5, span, font, div{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal;}
			}
		}
	}
</style>