rankDayReport.vue

<template>
	<div>
		<headerComp  :leftImgSrc="leftImg" :title="titleStr" :rightImgSrc="rightImg" @leftClick="backFun" @rightClick="conditionFun"></headerComp>
		<div style="height: 18.11upx;"></div>
		<!-- <div class="selectBox">
			<div class="sItem" :class="{ checkedItem: isDay}" @click="checkFun('day')">天汇总</div>
			<div class="sItem" :class="{ checkedItem: isHour}" @click="checkFun('hour')">小时级</div>
			<div class="sItem" :class="{ checkedItem: isMin}" @click="checkFun('min')">分钟级</div>
		</div> -->
		<!-- <v-table v-if="columns.length>0"
			 is-horizontal-resize
		        style="width:100%"
		        :columns="columns"
		        :table-data="tableData"
		        row-hover-color="#eee"
		        row-click-color="#edf7ff"
		        :height='600'
		></v-table> -->
		<rankchart :chart-data="chartDatas" :bind-id='chartId'></rankchart>
	</div>
</template>

<script>
	import headerComp from '../../../components/header'
	import backArrow from '../../../static/header/backArrow.png'
	import other from '../../../static/header/other.png'
	import tables from '../../../components/table'
	import rankchart from '../../../components/rankChart'
	export default{
		data(){
			return{
				titleStr:'排行榜统计',
				leftImg:backArrow,
				rightImg:other,
				atoken:'',
				keyArr:[],
				chartIds:'',
				reportType:'mall',
				accountId:[],
				orgIds:'',
				date:'',
				isDay:true,
				isHour:false,
				isMin:false,
				chartDatas:{},
				chartData:{},
				tableData:[],
				columns:[],
				gateId:[],
				floorId:[],
				storeId:[],
				chartId:'rankingList'
			}
		},
		onLoad: function (option) {
			if(option.types){
				this.reportType=option.types;
			}
				uni.getStorage({
					key:'atoken',
					success:(res)=>{
						this.atoken=res.data;
					}
				})
				uni.getStorage({
					key:'accountList',
					success:(res)=>{
						if(res.data){
							var list=JSON.parse(res.data);
							list.forEach((item,index)=>{
								this.accountId.push(item.id)
							})
							if(!option.report){
								uni.setStorage({
									key:'selectAccountIdArr',
									data:JSON.stringify(this.accountId)
								})
								uni.setStorage({
									key:"selectAccountNameArr",
									data:JSON.stringify(['全部'])
								})
							}
						}
					}
				})
				if(option.report){
					uni.getStorage({
						key:'selectAccountIdArr',
						success:(res)=> {
							this.accountId=JSON.parse(res.data);
						},
						complete: (res) => {
						}
					})
				}
				uni.getStorage({
					key:'selectGateIdArr',
					success:(res)=> {
						this.gateId=JSON.parse(res.data);
					},
					complete: (res) => {
					}
				})
				uni.getStorage({
					key:'selectFloorIdArr',
					success:(res)=> {
						this.floorId=JSON.parse(res.data);
					},
					complete: (res) => {
					}
				})
				uni.getStorage({
					key:'selectStoreIdArr',
					success:(res)=> {
						this.storeId=JSON.parse(res.data);
					},
					complete: (res) => {
					}
				})
				
				const date = new Date();
				var year = date.getFullYear();
				var monthIndex = date.getMonth();
				var month = monthIndex+1 > 9 ? monthIndex+1 : '0' + (monthIndex+1);
				  const d = date.getDate();
				   var day= d > 9 ? d : '0' + d;
				this.date=year+'-'+month+'-'+day;
				uni.getStorage({
					key:'selectDate',
					success:(res)=> {
						this.date=res.data
					},
					complete: (res) => {
					}
				})
				this.getReportKey();
		},
		computed: {
			i18n() {
				return this.$t("index")
			}
		},
		components:{
			headerComp,tables,rankchart
		},
		methods: {
			checkFun(val){
				  switch (val)
				  {
					case 'day':{
						  this.isDay=true;
						  this.isHour=false;
						  this.isMin=false;
						  this.chartDatas=this.chartData.kpiData;
						  this.setTabelData()
						  // this.$emit('handleFun','7');
						}
						break;
					case 'hour':{
						this.isDay=false;
						this.isHour=true;
						this.isMin=false;
						this.chartDatas=this.chartData.trafficHour;
						this.setTabelData()
						 // this.$emit('handleFun','15');
						}
						break;
					case 'min':{
						this.isDay=false;
						this.isHour=false;
						this.isMin=true;
						this.chartDatas=this.chartData.traffic10Min;
						this.setTabelData()
						// this.$emit('handleFun','30');
						}
						break;
				  }
			},
			backFun(){
				uni.reLaunch({
					url:"../index",
				})
			},
			conditionFun(){
				uni.setStorage({
					key:'backUrl',
					data:3
				})
				uni.navigateTo({
					url:'../condition'
				})
			},
			getReportKey(){
					var report='ranking';
					this.keyArr=['rankingList'];
				
				uni.showLoading({
					title: '加载中'
				});
				uni.request({
					url:window.url+'/reportCharts',
					data:{
						report:report,
						_t:Date.parse(new Date())/1000
					},
					header: {
						'app-code':'mobile',
						'Authorization': this.atoken //自定义请求头信息
					},
					method:'GET',
					success:(res) =>{
						this.chartIds='';
						res.data.data.forEach(item=>{
							if(this.keyArr.indexOf(item.key)!='-1'){
								this.chartIds+=item.id+','
							}
						})
						this.chartIds=this.chartIds.substring(0,this.chartIds.length-1);
						this.getChartData();
					}
				})
			},
			setTabelData(){
				this.columns=[];
				this.tableData=[];
				this.columns.push({field: '名称', title:'名称', width: 20, titleAlign: 'center',columnAlign:'center',isResize:true,isFrozen: true})
				this.chartDatas.xaxis.data.forEach((item,index)=>{
						 this.columns.push( {field: item, title:item, width: 20, titleAlign: 'center',columnAlign:'center',isResize:true})
				})
				 this.chartDatas.series.forEach((item,index)=>{
					  var obj={}
					 item.data.forEach((item,index)=>{
						 obj[this.chartDatas.xaxis.data[index]]=item;
					 })
					 obj['名称']=item.name;
					 this.tableData.push(obj)
				 })
			},
			getChartData(){
				this.orgIds=''
					var data={}
					var url=window.url+'/report/ranking/mall';
					if(this.reportType=='mall'){
						this.accountId.forEach(item=>{
							this.orgIds+=item+','
						})
						this.orgIds=this.orgIds.substring(0,this.orgIds.length-1)
						var startDate=this.date;
						var endDate=this.date;
						url=window.url+'/report/ranking/mall';
						data={
							orgIds:this.orgIds,
							startDate:startDate,
							endDate: endDate,
							chartIds:this.chartIds,
							kpiTypes:'TRAFFIC',
							_t:Date.parse(new Date())/1000
						}
					}else if(this.reportType=='gate'){
						this.gateId.forEach(item=>{
							this.orgIds+=item+','
						})
						this.orgIds=this.orgIds.substring(0,this.orgIds.length-1)
						var startDate=this.date;
						var endDate=this.date;
						url=window.url+'/report/ranking/gate';
						data={
							orgIds:this.orgIds,
							startDate:startDate,
							endDate: endDate,
							chartIds:this.chartIds,
							kpiTypes:'TRAFFIC',
							_t:Date.parse(new Date())/1000
						}
					}else if(this.reportType=='floor'){
						this.floorId.forEach(item=>{
							this.orgIds+=item+','
						})
						this.orgIds=this.orgIds.substring(0,this.orgIds.length-1)
						url=window.url+'/report/ranking/floor';
						var startDate=this.date;
						var endDate=this.date;
						data={
							orgIds:this.orgIds,
							startDate:startDate,
							endDate: endDate,
							chartIds:this.chartIds,
							kpiTypes:'TRAFFIC',
							_t:Date.parse(new Date())/1000
						}
					}else if(this.reportType=='area'){
						this.storeId.forEach(item=>{
							this.orgIds+=item+','
						})
						this.orgIds=this.orgIds.substring(0,this.orgIds.length-1)
						url=window.url+'/report/ranking/zone';
						var startDate=this.date;
						var endDate=this.date;
						data={
							orgIds:this.orgIds,
							startDate:startDate,
							endDate: endDate,
							chartIds:this.chartIds,
							kpiTypes:'TRAFFIC',
							_t:Date.parse(new Date())/1000
						}
					}
					uni.request({
						url:url,
						header: {
							'app-code':'mobile',
						'Authorization': this.atoken //自定义请求头信息
						},
						data:data,
						method:'GET',
						success:(res) =>{
							uni.hideLoading()
							var datas=res.data.data;
							this.chartData=datas.body;
							this.chartDatas=datas.body.rankingList;
							var obj={
								title:datas.body.rankingList.title
							}
							var series=[{
								type:'bar',
								name:'客流量',
								data:[]
							}]
							var yaxis={
								data:[]
							}
							datas.body.rankingList.series.forEach(item=>{
								series[0].data.push(item.data[0])
								yaxis.data.push(item.name)
							})
							obj.series=series;
							obj.yaxis=yaxis;
							this.chartDatas=obj;
						}
					})
				
			}
		},
	}
</script>

<style>
	.selectBox{
		width: 646.73upx;
		height: 61.59upx;
		font-size: 18.11upx;
		line-height: 61.59upx;
		display: flex;
		flex-direction: row;
		margin: 0 auto;
		margin-bottom: 18.11upx;
	}
	.sItem{
		flex: 1;
		background:#FFFFFF;
		text-align: center;
		cursor: pointer;
		border-right:1px solid #DBDBDB ;
	}
	.sItem:last-of-type{
		border-right:none
	}
	.checkedItem{
		background: #0069FF;
		color: #FFFFFF;
		border: #0069FF;
	}
</style>