<style lang='scss' scoped>
	.warnAnalysis {
		width: 100%;

		:not(not) {
			box-sizing: border-box;
		}

		.alrmAnalysis,
		.alrmWarning,
		.tradeAnalyzeAlarm,
		.warningTrend {

			/* padding-bottom: 30rpx; */
			&-header {
				padding: 20rpx $paddingLR;
				display: flex;
				align-items: center;
				box-shadow: 0px 4rpx 4rpx 0px rgba(0, 0, 0, 0.08);
			}
		}

		.alrmAnalysis-content {
			display: flex;
			width: 100%;
			padding: 40rpx 0;
			padding-bottom: 20rpx;
			.alrmAnalysis-title {
				width: 130rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.alrmAnalysis-info {
				width: calc(100% - 130rpx);
				font-size: 22rpx;
				display: grid;
				grid-template-columns: repeat(2, 50%);
				grid-auto-columns: repeat(2, 50%);
			}
		}
		.alrm-row {
			display: flex;
			align-items: center;
			padding-bottom: 20rpx;
			&-circle {
				width: 22rpx;
				height: 22rpx;
				border-radius: $uni-border-radius-circle;
				/* background-color: #C93548; */
				margin-top: 2rpx;
			}
		}

		.alrmWarning-content {
			width: 100%;
			padding: 40rpx $paddingLR;

			.alrmWarning-alam {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #eee;
				padding-bottom: 20rpx;

				&-title {
					color: #D9382A;
					/* width: 140rpx; */
					/* display: flex; */
					/* justify-content: center; */
					/* align-items: center; */
				}
			}

			.alrmWarning-warning {
				padding-top: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

		.alrmWarning-alam-trend,
		.alrmWarning-warning-trend {
			width: 170rpx;
			text-align: center;
		}

		.alrmWarning-alam-today-alrm,
		.alrmWarning-alam-yesterday-alrm,
		.alrmWarning-warning-today-alrm,
		.alrmWarning-warning-yesterday-alrm {
			font-size: 24rpx;
			text-align: center;
		}

		.canvas-yesterdayAlrmId,
		.canvas-todayAlrmId {
			width: 140rpx;
			height: 140rpx;
		}

		.tradeAnalyzeAlarm-content {
			padding: 40rpx 25rpx;

			.canvas-tradeAnalyzeAlarm {
				width: 100%;
				height: 300rpx;
			}
		}

		.warningTrend-content {
			padding: 40rpx 25rpx;

			.canvas-warningTrend {
				width: 100%;
				height: 300rpx;
			}
		}
	}
</style>
<template>
	<view class="warnAnalysis" v-if="pageShowFlag">
		<!-- <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs> -->
		<view class="">
			<view class="alrmAnalysis" >
				<view class="alrmAnalysis-header">
					<tuiIcon name="baojingjilu" color="#FB802E" size="50"></tuiIcon>
					<text class="pl20">报警分析</text>
				</view>
				<view class="alrmAnalysis-content" v-if="alarmCategoriesList && alarmCategoriesList.length>0">
					<view class="alrmAnalysis-title">报警</view>
					<view class="alrmAnalysis-info">
						<view class="alrm-row" v-for="(item,index) in alarmCategoriesList" :key="item.typeCode">
							<view class="alrm-row-circle" :style="{backgroundColor:item.color}"></view>
							<view class="alrm-row-text pl10">
								<text class="pr15">{{item.typeName}}</text>
								<text class="text--base--grey">|</text>
								<text class="pl15">{{item.ratio}}%</text>
								<text class="pl15" style="color: #999;">{{item.alarmTotal}}</text>
							</view>
						</view>
					</view>
				</view>
				<u-empty v-else class="pt20 pb20" text="暂无数据" mode="data"></u-empty>
			</view>
			<view class="alrmWarning">
				<view class="alrmWarning-header">
					<tuiIcon name="baojingjilu" color="#FB802E" size="50"></tuiIcon>
					<text class="pl20">报警预警分析</text>
				</view>
				<view class="alrmWarning-content" >
					<view class="alrmWarning-alam"v-if="alarmAnalysisStatisticsData">
						<view class="alrmWarning-alam-title">报警 ></view>
						<view class="alrmWarning-alam-today-alrm">
							<canvas canvas-id="todayAlrmId" class="canvas-todayAlrmId"></canvas>
							<view class="pt20" style="color: #D9382A;">今日报警</view>
						</view>
						<view class="alrmWarning-alam-yesterday-alrm">
							<canvas canvas-id="yesterdayAlrmId" class="canvas-yesterdayAlrmId"></canvas>
							<view class="pt20">昨日报警</view>
						</view>
						<view class="alrmWarning-alam-trend">
							<view>
								<text class="pr10">{{alarmAnalysisStatisticsData.dayOnDay}}%</text>
								<u-icon :name="parseFloat(alarmAnalysisStatisticsData.dayOnDay)>0?'arrow-upward':'arrow-downward'" :color="parseFloat(alarmAnalysisStatisticsData.dayOnDay)>0?'#E23F34':'#45A63E'"
								 size="40"></u-icon>
							</view>
							<view>同比</view>
						</view>
					</view>
					<u-empty v-else class="pt20 pb20" text="暂无数据" mode="data"></u-empty>
					<view class="alrmWarning-warning" v-if="warningAnalysisStatisticsData">
						<view style="color: #D18820;">预警 ></view>
						<view class="alrmWarning-warning-today-alrm">
							<canvas canvas-id="todayWarningId" class="canvas-todayAlrmId"></canvas>
							<view class="pt20" style="color: #D9382A;">今日报警</view>
						</view>
						<view class="alrmWarning-warning-yesterday-alrm">
							<canvas canvas-id="yesterdayWarningId" class="canvas-yesterdayAlrmId"></canvas>
							<view class="pt20">昨日报警</view>
						</view>
						<view class="alrmWarning-warning-trend">
							<view class="">
								<text class="pr10">{{warningAnalysisStatisticsData.dayOnDay}}%</text>
								<!-- <u-icon name="arrow-upward" color="#E23F34" size="40"></u-icon> -->
								<u-icon :name="parseFloat(warningAnalysisStatisticsData.dayOnDay)>0?'arrow-upward':'arrow-downward'" :color="parseFloat(warningAnalysisStatisticsData.dayOnDay)>0?'#E23F34':'#45A63E'"
								 size="40"></u-icon>
							</view>
							<view class="">同比</view>
						</view>
					</view>
					<u-empty v-else class="pt20 pb20" text="暂无数据" mode="data"></u-empty>
				</view>
				
			</view>
			<view class="tradeAnalyzeAlarm">
				<view class="tradeAnalyzeAlarm-header">
					<tuiIcon name="baojingjilu" color="#FB802E" size="50"></tuiIcon>
					<text class="pl20">行业报警分析</text>
				</view>
				<view class="tradeAnalyzeAlarm-content" v-if="industryAlarmAnalysisList && industryAlarmAnalysisList.length>0">
					<canvas canvas-id="tradeAnalyzeAlarmId" class="canvas-tradeAnalyzeAlarm"></canvas>
				</view>
				<u-empty v-else class="pt20 pb20" text="暂无数据" mode="data"></u-empty>
			</view>
			<view class="warningTrend">
				<view class="warningTrend-header">
					<tuiIcon name="baojingjilu" color="#FB802E" size="50"></tuiIcon>
					<text class="pl20">报警预警趋势</text>
				</view>
				<view class="warningTrend-content" v-if="alarmWarningTrendData">
					<canvas canvas-id="warningTrendId" class="canvas-warningTrend" disable-scroll=true @touchstart="touchLineA"
					 @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
				</view>
				<u-empty v-else class="pt20 pb20" text="暂无数据" mode="data"></u-empty>
			</view>
		</view>
	</view>
</template>
<script>
	let _self;
	import uCharts from '@/components/u-charts/u-charts.js';
	export default {
		data() {
			return {
				alarmTodayWidth: "",
				alarmTodayHeight: "",
				alarmTodayArcbarWidth: "",

				pixelRatio: 1,

				tradeAnalyzeWidth: "",
				tradeAnalyzeHeight: "",

				warningTrendWidth: "",
				warningTrendHeight: "",
				
				alarmColorList: ["#C93548", "#5E5490", "#52B249", "#F7A23E", "#EA9B87", "#A94791", "#F1DF31", "#DE5654", "#2DAEE5"],
				alarmCategoriesList: null, // 报警分析列表
				warningAnalysisStatisticsData: null, // 预警分析
				alarmAnalysisStatisticsData: null, // 报警分析
				alarmWarningTrendData:null, // 报警预警趋势
				industryAlarmAnalysisList:null, // 行业报警分析
				showCurveA: null ,// 趋势图chart
				pageShowFlag:false,
				
				// list: [{
				// 	name: '待收货'
				// }, {
				// 	name: '待付款'
				// }, {
				// 	name: '待评价',
				// 	count: 5
				// }],
				// current: 0
			}
		},
		onLoad() {
			_self = this;
			this.alarmTodayWidth = uni.upx2px(140);
			this.alarmTodayHeight = uni.upx2px(140);
			this.alarmTodayArcbarWidth = uni.upx2px(20);

			this.tradeAnalyzeWidth = uni.upx2px(700);
			this.tradeAnalyzeHeight = uni.upx2px(300);

			this.warningTrendWidth = uni.upx2px(700);
			this.warningTrendHeight = uni.upx2px(300);

			this.getPageDataFn();
		},
		methods: {
			// change(index) {
			// 	this.current = index;
			// },
			// 获取页面数据
			getPageDataFn() {
				this.$get("/app/index/warning-analysis", {}).then((res) => {
					console.log(res, "res");
					this.alarmCategoriesList = res.data.alarmCategoriesList.map((item, index, arr) => {
						item.color = this.alarmColorList[index];
						if (index + 1 > this.alarmColorList.length) {
							item.color = this.alarmColorList[index - this.alarmColorList.length];
						}
						return item;
					});
					this.alarmAnalysisStatisticsData = res.data.warningAnalysisStatisticsVo.find((item) => {
						return item.alarmDivide === "ALARM";
					})
					this.warningAnalysisStatisticsData = res.data.warningAnalysisStatisticsVo.find((item) => {
						return item.alarmDivide === "WARNING";
					})
					console.log(this.alarmAnalysisStatisticsData,"alarmAnalysisStatisticsData");
					console.log(this.warningAnalysisStatisticsData,"warningAnalysisStatisticsData");
					this.alarmWarningTrendData = res.data.alarmChartDataVo;
					this.industryAlarmAnalysisList = res.data.industryAlarmList;
					this.showAlarmAnalysisStatisticsFn(); // 报警分析
					this.showWarningAnalysisStatisticsFn(); // 预警分析
					this.showAlarmWarningTrendFn(this.alarmWarningTrendData); // 报警预警趋势
					this.showIndustryAlarmAnalysisFn(this.industryAlarmAnalysisList); // 行业报警分析
				}).finally(()=>{
					this.pageShowFlag = true;
				})
			},
			// 渲染报警分析
			showIndustryAlarmAnalysisFn(data) {
				let series = data.map((item) => {
					return {
						name: item.industryName,
						data: item.total
					}
				})

				//自定义文案示例，需设置format字段
				for (let i = 0; i < series.length; i++) {
					series[i].format = () => {
						return series[i].name + series[i].data
					};
				}
				// _self.textarea = JSON.stringify(res.data.data.Ring);
				this.showRing("tradeAnalyzeAlarmId", {
					series: series
				})
			},
			// 渲染报警预警趋势
			showAlarmWarningTrendFn(data) {
				let LineA = {
					categories: data.name,
					series: [{
						name: "报警",
						data: data.alarm
					}, {
						name: "预警",
						data: data.warning
					}]
				};
				_self.showCurve("warningTrendId", LineA)
			},
			// 渲染预警分析模块
			showWarningAnalysisStatisticsFn(){
				if(!this.warningAnalysisStatisticsData) return;
				// 预警总数
				let warningTotalValue = this.warningAnalysisStatisticsData.todayAlarm + this.warningAnalysisStatisticsData.yesterdayAlarm;
				// 今日预警数据
				let todayWarningData = {
					title: this.warningAnalysisStatisticsData.todayAlarm + "",
					series: [{
						color: "#D9382A",
						data: this.warningAnalysisStatisticsData.todayAlarm / warningTotalValue || 0,
						index: 0,
						legendShape: "circle",
						name: "",
						pointShape: "circle",
						show: true,
						type: "arcbar"
					}]
				}
				// 昨日预警数据
				let yesterdayWarningData = {
					title: this.warningAnalysisStatisticsData.yesterdayAlarm + "",
					series: [{
						color: "#2DAEE5",
						data: this.warningAnalysisStatisticsData.yesterdayAlarm / warningTotalValue || 0,
						index: 0,
						legendShape: "circle",
						name: "",
						pointShape: "circle",
						show: true,
						type: "arcbar"
					}]
				}
				this.showArcbar("todayWarningId", {
					width: this.alarmTodayWidth,
					height: this.alarmTodayHeight
				}, todayWarningData);
				this.showArcbar("yesterdayWarningId", {
					width: this.alarmTodayWidth,
					height: this.alarmTodayHeight
				}, yesterdayWarningData);
			},
			// 渲染报警分析模块
			showAlarmAnalysisStatisticsFn() {
				if(!this.alarmAnalysisStatisticsData) return;
				// 报警总数
				let alarmTotalValue = this.alarmAnalysisStatisticsData.todayAlarm + this.alarmAnalysisStatisticsData.yesterdayAlarm;
				// 今日报警数据
				let todayAlrmData = {
					title: this.alarmAnalysisStatisticsData.todayAlarm + "",
					series: [{
						color: "#D9382A",
						data: this.alarmAnalysisStatisticsData.todayAlarm / alarmTotalValue || 0,
						index: 0,
						legendShape: "circle",
						name: "",
						pointShape: "circle",
						show: true,
						type: "arcbar"
					}]
				}
				// 昨日报警数据
				let yesterdayAlrmData = {
					title: this.alarmAnalysisStatisticsData.yesterdayAlarm + "",
					series: [{
						color: "#2DAEE5",
						data: this.alarmAnalysisStatisticsData.yesterdayAlarm / alarmTotalValue || 0,
						index: 0,
						legendShape: "circle",
						name: "",
						pointShape: "circle",
						show: true,
						type: "arcbar"
					}]
				}
				
				// 找到id为todayAlrmId的块
				this.showArcbar("todayAlrmId", {
					width: this.alarmTodayWidth,
					height: this.alarmTodayHeight
				}, todayAlrmData);
				this.showArcbar("yesterdayAlrmId", {
					width: this.alarmTodayWidth,
					height: this.alarmTodayHeight
				}, yesterdayAlrmData);
				
			},
			// 环形
			showRing(canvasId, chartData) {
				let canvaRing = new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'ring',
					fontSize:11,
					padding:[5,5,5,5],
					legend:{
						show:true,
						position:'right',
						float:'center',
						itemGap:10,
						padding:5,
						lineHeight:26,
						margin:5,
						borderWidth :1
					},
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					series: chartData.series,
					animation: false,
					width: _self.tradeAnalyzeWidth * _self.pixelRatio,
					height: _self.tradeAnalyzeHeight * _self.pixelRatio,
					disablePieStroke: true,
					dataLabel: true,
					
					extra: {
						pie: {
						  offsetAngle: 0,
						  ringWidth: 15*_self.pixelRatio,
						  labelWidth:15
						}
					},
				});
			},
			toJSON() {},
			// 进度圆环图 接收参数:一个块的id,一个数据
			showArcbar(canvasId, sizeObj, chartData) {
				let canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'arcbar',
					fontSize: 11,
					legend: false,
					title: {
						name: chartData.title,
						color: chartData.series[0].color,
						fontSize: 18
					},
					subtitle: {
						// name: chartData.series[0].name,
						// color: '#666666',
						// fontSize: 15*_self.pixelRatio
					},
					extra: {
						arcbar: {
							type: 'circle', //整圆类型进度条图
							width: 4, //圆弧的宽度
							startAngle: 1.5 //整圆类型只需配置起始角度即可
						}
					},
					background: '#FFFFFF',
					pixelRatio: 1,
					series: chartData.series,
					animation: true,
					width: sizeObj.width,
					height: sizeObj.height,
					dataLabel: true,
				});
			},
			// 曲线图
			showCurve(canvasId, chartData) {
				this.showCurveA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					padding: [15, 20, 0, 15],
					legend: {
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					dataLabel: true,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						disableGrid: false,
						type: 'grid',
						gridType: 'dash',
						itemCount: 7,
						scrollShow: true,
						scrollAlign: 'left',
					},
					// xAxis: {
					// 	disableGrid:false,
					// 	type:'grid',
					// 	gridType:'dash',
					// 	itemCount:4,
					// 	scrollShow:true,
					// 	scrollAlign:'left'
					// },

					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						format: (val) => {
							return val.toFixed(0)
						}
					},
					width: _self.warningTrendWidth * _self.pixelRatio,
					height: _self.warningTrendHeight * _self.pixelRatio,
					extra: {
						line: {
							type: 'curve'
						}
					}
				});
			},
			touchLineA(e) {
				this.showCurveA.scrollStart(e);
			},
			moveLineA(e) {
				this.showCurveA.scroll(e);
			},
			touchEndLineA(e) {
				this.showCurveA.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				this.showCurveA.touchLegend(e);
				this.showCurveA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
		}
	}
</script>
