<template>
	<view class="content">
			<view class="title">客流实时数据</view>
			<view class="titledate">以下数据以景区现场发布为准</view>
			<view class="kllist" v-for="(el,ind) in jqdatas" :key="ind">
				<view class="left">
					<view class="name">{{el.name}}</view>
					<view class="cont">
						<view class="conlist">
							<view class="conname cleft">实时在园</view>
							<view class="connum cleft">{{el.value}}</view>
						</view>
						<view class="conlist">
							<view class="conname cright">瞬时承载量</view>
							<view class="connum cright">{{el.max1}}</view>
						</view>
					</view>
					<view class="ktime">
						<!-- <view class="kname">AAAAA</view> -->
						<!-- <view class="kopen">开放时间：8:30-17:00</view> -->
					</view>
				</view>
				<view class="right">
				<!-- 	<view class="bfbstyle">
						<span v-if="el.zb<=40" class="lscolor">{{el.zb}}%</span>
						<span v-if="el.zb>=80" class="hscolor">{{el.zb}}%</span>
						<span v-if="el.zb>40&&el.zb<80" class="yscolor">{{el.zb}}%</span>
					</view> -->
					<view class="bfbnamestyle">
						<span v-if="el.zb1<=20" class="lscolor">{{el.zbName}}</span>
						<span v-if="el.zb1<=40&&el.zb1>20" class="lscolor">{{el.zbName}}</span>
						<span v-if="el.zb1<=60&&el.zb1>40" class="yscolor">{{el.zbName}}</span>
						<span v-if="el.zb1<=80&&el.zb1>60" class="yscolor">{{el.zbName}}</span>
						<span v-if="el.zb1>80" class="hscolor">{{el.zbName}}</span>
					</view>
					<!-- <canvas  :canvas-id="'canvasPie'+ind" :id="'canvasPie'+ind" @touchstart="touchPie"></canvas> -->
				</view>
			</view>
	</view>
</template>

<script>
	import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';
	
	var _self;
	var canvaPie = null;
	var color = ['#00DB77', '#FF9024', '#FF4824'];
	var zcolor = ['#22A86C', '#E68320', '#E64120'];
	var canvaLineA = null;
	var canvaLineA2 = null;
	export default {
		data() {
			return {
				info:{
					color: true,
					num: false,
				},
				// infos:{
				// 	ind:0,
				// 	color:false
				// },
				jqdatas:[],
				token: ''
				
			}
		},
		onLoad() {
			var date = new Date();
			this.nowDate = date.getFullYear() + "-" + ((date.getMonth() + 1) < 10 ? "0" + (date.getMonth() + 1) : (date.getMonth() + 1)) + "-" + (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());
			// this.getData3();
			// this.getData4();
			_self = this;
			// uni.upx2px(750) 这是uni-app自带的自适应，以750的尺寸为基准。动态变化
			this.cWidth=uni.upx2px(750);
			this.cHeight=uni.upx2px(250);
			this.cWidth2=uni.upx2px(750);
			this.cHeight2=uni.upx2px(170);
			// this.getData1();
			// this.getyj();
			this.getToken();
		},
		onPageScroll(e) {
			if(e.scrollTop>50&&!this.info.num){
				this.info.num=true;
			}
			if(e.scrollTop<50&&this.info.num){
				this.info.num=false;
			}
		},
		methods: {
			getToken(){
				var url = 'https://qyly1.csly-travel.com/tours/commonMethod.jspx'
				var para = {
					type:1,url: 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/getToken',param:'username=user_xcx&password=Supcon'
				};
				// var url = 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/getToken?username=user_xcx&password=Supcon';
				// var para = {};
				var that = this;
				that.httpPostxin(that, url, para, function(res) {
					// console.log(res.data.obj);
					that.token=res.data.obj;
					if(res.data.success==false){
						that.sxToken();
					}else{
						that.getdata();
					}
				});
			},
			sxToken(){
				var url = 'https://qyly1.csly-travel.com/tours/commonMethod.jspx'
				var para = {type:1,url: 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/refreshToken',param:'accessToken='+this.token};
				var that = this;
				that.httpPostxin(that, url, para, function(res) {
					that.token=res.data.obj;
					that.getdata();
				});
			},
			removeDuplicateObj(arr) {
				let obj = {};
				arr = arr.reduce((newArr, next) => {
					obj[next.key] ? "" : (obj[next.key] = true && newArr.push(next));
					return newArr;
				}, []);
				return arr;
			},
			getdata(){
				uni.showToast({
					title: '加载中...',
					icon:'loading',
				});
				var url = 'https://qyly1.csly-travel.com/tours/commonMethod.jspx';
				var para = {type:2,url: 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/aggregation?accessToken='+this.token,param:{
					"code": "020201_all",
					"params": {},
					"page": 0,
					"size": 0,	
					"result": {},
					"orders": []		
				}};
				var that = this;
				that.httpPostxin(that, url, para, function(res) {
					if (res.data.success) {
						uni.hideToast();
						var datasAll = res.data.obj.jq_list;
						var dataspw = res.data.obj.jq_pw_ss;
						var datas = [];
						let newList = [
							{name:'虞山风景区',id:'1651860195535896577',zbName: ''},
							{name:'沙家浜风景区',id:'1443165277469569026',zbName: ''},
							{name:'尚湖风景区',id:'1443161860089081858',zbName: ''},
							{name:'蒋巷生态园',id:'1652546686057652226',zbName: ''},
							{name:'方塔古迹名胜区',id:'1443161860097470466',zbName: ''},
							{name:'古里红豆山庄',id:'1572847079126556674',zbName: ''},
							{name:'梅李聚沙园',id:'1443165794329456641',zbName: ''},
							// {name:'曾园•赵园',id:'1443161860101664769',zbName: ''},
							// {name:'燕园',id:'1443161860093276162',zbName: ''}
						]
						datasAll.map(item=>{
							dataspw.map(item1=>{
								if(item.glzd == item1.code) {
									newList.map(v=>{
										if(item._id===v.id){
											that.$set(v,'value', item1.count<0?0:item1.count)
											that.$set(v,'max',item.sumNum)
											that.$set(v,'zb',((item1.count/item.sumNum)*100).toFixed(0))
											if(v.name == '虞山风景区') {
												that.$set(v,'max1',21700)
												that.$set(v,'zb1',((item1.count/21700)*100).toFixed(0))
											}else if(v.name == '沙家浜风景区') {
												that.$set(v,'max1',46891)
												that.$set(v,'zb1',((item1.count/46891)*100).toFixed(0))
											}else if(v.name == '尚湖风景区') {
												that.$set(v,'max1',16000)
												that.$set(v,'zb1',((item1.count/16000)*100).toFixed(0))
											}else if(v.name == '蒋巷生态园') {
												that.$set(v,'max1',11357)
												that.$set(v,'zb1',((item1.count/11357)*100).toFixed(0))
												console.log('蒋巷生态园');
												console.log(v);
											}else if(v.name == '方塔古迹名胜区') {
												that.$set(v,'max1',4000)
												that.$set(v,'zb1',((item1.count/4000)*100).toFixed(0))
											}else if(v.name == '古里红豆山庄') {
												that.$set(v,'max1',16100)
												that.$set(v,'zb1',((item1.count/16100)*100).toFixed(0))
											}else if(v.name == '梅李聚沙园') {
												that.$set(v,'max1',4000)
												that.$set(v,'zb1',((item1.count/4000)*100).toFixed(0))
											}
										}
									})
								}
							})
						})
						if(newList.length>0){
							that.jqdatas = newList ;
							for(var i = 0;i<that.jqdatas.length;i++) {
								if(that.jqdatas[i].zb1 <= 20){
									that.jqdatas[i].zbName = '舒适'
									var data = {
										series: [{
											name: '舒适',
											data:that.jqdatas[i].zb1
										}]
									}
								}else if(that.jqdatas[i].zb1 > 20&&that.jqdatas[i].zb1 <= 40) {
									that.jqdatas[i].zbName = '较为舒适'
									var data = {
										series: [{
											name: '较为舒适',
											data:that.jqdatas[i].zb1
										}]
									}
								}else if(that.jqdatas[i].zb1 > 40&&that.jqdatas[i].zb1 <= 60) {
									that.jqdatas[i].zbName = '一般'
									var data = {
										series: [{
											name: '一般',
											data:that.jqdatas[i].zb1
										}]
									}
								}else if(that.jqdatas[i].zb1 > 60&&that.jqdatas[i].zb1 <= 80) {
									that.jqdatas[i].zbName = '较拥挤'
									var data = {
										series: [{
											name: '较拥挤',
											data:that.jqdatas[i].zb1
										}]
									}
								}else if(that.jqdatas[i].zb1 > 80){
									that.jqdatas[i].zbName = '拥挤'
									var data = {
										series: [{
											name: '拥挤',
											data:that.jqdatas[i].zb1
										}]
									}
								}
								// that.showPie('canvasPie'+i, data);
							}
						} else {
							uni.showToast({
								title: '查询失败'
							});
						}
					}else {
						uni.showToast({
							title: '加载中...',
							icon:'loading',
							duration:20000
						});
					}
				});
			},
			getyj(){
				var data = [
					{name:'尚湖风景区',value:'1550',max:10000,zb:1550/10000},
					{name:'虞山公园',value:'799',max:10000,zb:799/10000},
					{name:'虞山剑门景区',value:'512',max:10000,zb:512/10000},
					{name:'蒋巷生态园',value:'512',max:10000,zb:512/10000},
					{name:'方塔园',value:'283',max:10000,zb:283/10000},
					{name:'兴福寺',value:'57',max:10000,zb:57/10000},
				]
				var that = this
				if(data.length>0){
				that.jqdatas = data ;
					for(var i = 0;i<that.jqdatas.length;i++) {
						var data = {
							series: [{
								name: '舒适',
								data:that.jqdatas[i].zb
							}]
						}
						that.showPie('canvasPie'+i, data);
					}
				} else {
					uni.showToast({
						title: '查询失败'
					});
				}
				
			},
			getData1() { //获取景点动态
				var url = '/toursData/getToursAnalysis.jspx';
				var para = {};
				var that = this;
				that.httpPost(that, url, para, function(res) {
					if (res.data.status == 200) {
						var tmp = [];
						for (var i = 0; i < res.data.data.scenic.length; i++) {
							tmp.push({
								name: res.data.data.scenic[i].name,
								value: res.data.data.scenic[i].value,
								max: 10000,
								zb: res.data.data.scenic[i].value/10000
							})
						}
						that.jqdatas = tmp;
						for(var i = 0;i<that.jqdatas.length;i++) {
							var data = {
								series: [{
									name: '舒适',
									data:that.jqdatas[i].zb
								}]
							}
							that.showPie('canvasPie'+i, data);
						}
					} else {
						uni.showToast({
							title: '查询失败'
						});
					}
				});
			},
			// 展示图标的函数 接收参数，一个块的id,一个数据
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					// 图标类型
					type: 'line',
					fontSize: 11,
					padding:[20,25,4,5],
					legend: { show: false },
					dataLabel:true,
					dataPointShape: true,
					background: '#F6F6F6',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true,//开启图表拖拽功能
					// x轴显示的内容
					xAxis: {
						type: 'grid',
						disableGrid:true,
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
						itemCount:6,//x轴单屏显示数据的数量，默认为5个
						scrollShow:true,//新增是否显示滚动条，默认false
						scrollAlign:'left',//滚动条初始位置
						scrollBackgroundColor:'#F7F7FF',//默认为 #EFEBEF
						scrollColor:'#DEE7F7',//默认为 #A6A6A6
					},
					// y轴显示的内容
					yAxis: {
						gridType: 'dash',
						disableGrid:true,
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						format: val => {
							return val.toFixed(0) + '℃';
						}
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					}
				});
			},
			showLineA2(canvasId, chartData) {
				canvaLineA2 = new uCharts({
					$this: _self,
					canvasId: canvasId,
					// 图标类型
					type: 'line',
					fontSize: 11,
					padding:[20,35,0,0],
					legend: { show: false },
					dataLabel:true,
					dataPointShape: true,
					background: '#F6F6F6',
					pixelRatio: _self.pixelRatio2,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					// x轴显示的内容
					xAxis: {
						disabled:true,
						disableGrid:true,
					},
					// y轴显示的内容
					yAxis: {
						disableGrid:true,
						disabled:true,
					},
					width: _self.cWidth2 * _self.pixelRatio2,
					height: _self.cHeight2 * _self.pixelRatio2,
					extra: {
						line: {
							type: 'straight'
						}
					}
				});
			},
			// 点击图表显示的内容
			touchLineA(e) {
				canvaLineA.scrollStart(e);
				// 使用声明的变量canvaLineA
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data;
					}
				});
			},
			touchLineA2(e) {
				// 使用声明的变量canvaLineA
				canvaLineA2.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data;
					}
				});
			},
			moveLineA(e) {
				canvaLineA.scroll(e);
			},
			touchEndLineA(e) {
				canvaLineA.scrollEnd(e);
			},
			showPie(canvasId, chartData) {
				new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'arcbar',
					fontSize: 11,
					legend: {
						show: false
					},
					background: '#FFFFFF',
					pixelRatio: 1,
					series: chartData.series,
					colors: chartData.series[0].data < 40 ? [color[0]] : chartData.series[0].data < 70 ? [color[1]] : [color[2]],
					animation: true,
					width: 120,
					height: 120,
					dataLabel: true,
					title: {
						name: Math.round(chartData.series[0].data * 100) + '%', //这里我自动计算了，您可以直接给任意字符串
						color: chartData.series[0].data < 40 ? color[0] : chartData.series[0].data < 70 ? color[1] : color[2],
						fontSize: 18,
						offsetY: -2
					},
					subtitle: {
						name: chartData.series[0].name, //这里您可以直接给任意字符串
						color: chartData.series[0].data < 40 ? zcolor[0] : chartData.series[0].data < 70 ? zcolor[1] : zcolor[2],
						fontSize: 15,
						offsetY: 2
					},
					extra: {
						arcbar: {
							type: 'circle', //整圆类型进度条图
							width: 10, //圆弧的宽度
							startAngle: 1.5, //整圆类型只需配置起始角度即可
							backgroundColor: '#EFF3F7'
						}
					}
				});
			},
			touchPie(e) {
				canvaPie.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	$twidth:702upx;
	$klwidth:622upx;
	$klheight:220upx;
	$right:200upx;
	$rheight:210upx;
	view {
		box-sizing: content-box;
	}
	.content{
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #F6F6F6;
		padding-bottom: 100upx;
		overflow-x: hidden;
		// margin-bottom: 60rpx;
	}
	.kllist {
		width: $klwidth;
		// height: $klheight;
		height: 180upx;
		background: #FFFFFF;
		border-radius: 20upx;
		display: flex;
		justify-content: space-between;
		padding: 40upx;
		margin: 0upx 0upx 26upx 0upx;
	
		.left {
			width: 400upx;
	
			.name {
				font-size: 36upx;
				font-family: Microsoft YaHei;
				font-weight: 600;
				color: #333333;
			}
	
			.cont {
				width: 350upx;
				margin-top: 36upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 80upx;
	
				.conlist:first-child {
					border-right: 1upx solid #E3E3E3;
				}
	
				.conlist {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;
	
					.conname {
						width: 100%;
						font-size: 24upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #999999;
					}
	
					.cleft {
						text-align: left;
					}
	
					.cright {
						text-align: right;
					}
	
					.connum {
						width: 100%;
						font-size: 46upx;
						font-family: DIN;
						font-weight: bold;
						color: #666666;
					}
				}
			}
	
			.ktime {
				margin-top: 34upx;
				display: flex;
				justify-content: space-between;
				width: 100%;
				height: 34upx;
				align-items: center;
	
				.kname {
					width: 106upx;
					height: 34upx;
					background: #FFFDFA;
					border: 1upx solid #F5E6D0;
					border-radius: 4upx;
					color: #CCA37A;
					font-size: 24upx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
	
				.kopen {
					width: 320upx;
					height: 34upx;
					background: #FFFDFA;
					border: 1upx solid #F5E6D0;
					border-radius: 4upx;
					color: #CCA37A;
					font-size: 24upx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	
		.right {
			width: $right;
			height: $rheight;
			line-height: $rheight;
		}
	}
	
	.title {
		font-size: 50upx;
		font-family: Microsoft YaHei;
		font-weight: 600;
		color: #230F00;
		line-height: 56upx;
		width: $twidth;
		margin-top: 60upx;
		margin-bottom: 50upx;
	}
	.titledate {
		text-align: left;
		margin: 0upx 0upx 50upx 0upx;
		font-size: 12px;
		width: $twidth;
	}
	.bfbstyle {
		text-align: center;
		font-size: 18px;
		margin: 38px 0px 0px 0px;
	}
	.bfbnamestyle {
		text-align: center;
		font-size: 18px;
		// margin: 50px 0px 0px 0px;
	}
	// var zcolor = ['#22A86C', '#E68320', '#E64120'];
	.lscolor {
		color: #22A86C;
	}
	.hscolor {
		color: #E64120;
	}
	.yscolor {
		color: #E68320;
	}
</style>
