weekReport.vue

<template>
	<div>
		<headerComp  :leftImgSrc="leftImg" :title="titleStr" :rightImgSrc="rightImg" @leftClick="backFun" @rightClick="conditionFun"></headerComp>
		<div style="height: 18.11upx;"></div>
		<circlebar :chart-data="chartData.HolidayEffect" bind-id='HolidayEffect'></circlebar>
	</div>
</template>

<script>
	import headerComp from '../../../components/header'
	import backArrow from '../../../static/header/backArrow.png'
	import other from '../../../static/header/other.png'
	import circlebar from '../../../components/circleBarChart'
	export default{
		data(){
			return{
				titleStr:'周中周末对比分析',
				leftImg:backArrow,
				rightImg:other,
				atoken:'',
				keyArr:[],
				chartIds:'',
				reportType:'mall',
				accountId:[],
				orgIds:'',
				date:'',
				date2:'',
				isDay:true,
				isHour:false,
				isMin:false,
				chartDatas:{},
				chartDatas2:{},
				chartData:{},
				tableData:[],
				tableData2:[],
				columns:[],
				columns2:[],
				gateId:[],
				floorId:[],
				storeId:[]
			}
		},
		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)=>{
								if(index==0){
									this.accountId.push(item.id)
								}
							})
						}
					}
				})
				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) => {
					}
				})
				
				var currentWeek=[]
				uni.getStorage({
					key:'currentWeek',
					success:(res)=> {
						currentWeek=JSON.parse(res.data);
					},
					complete: (res) => {
					}
				})
				var a1=0,a2=0,a3=0;
				if(currentWeek[0].index){
					a1=currentWeek[0].index;
					a2=currentWeek[1].index;
					a3=currentWeek[2].index;
				}else{
					a1=currentWeek[0];
					a2=currentWeek[1];
					a3=currentWeek[2];
				}
				var year =1999+a1;
				var month=a2+1;
				month=month>9?month:'0'+month;
				var d = new Date();
				// 该月第一天
				d.setFullYear(year, month-1, 1);
				var w1 = d.getDay();
				// 该月天数
				d.setFullYear(year, month, 0);
				var dd = d.getDate();
				// 第一个周一
				let week1;
				//当月第一周有几天
				week1=7 - w1+1;
				var from='',to='';
				if(a3==0){
					from=year+"-"+month+"-01";
					var toDay=week1>9?week1:'0'+week1;
					to=year+'-'+month+'-'+toDay
				}else{
					var fromDay=week1+7*(a3-1)+1;
					var toDay=week1+7*a3;
					if(fromDay>dd){
						for(var i=(a3-1);i>=0;i--){
							fromDay=week1+7*(i-1);
							toDay=week1+7*i;
							if(fromDay<=dd){
								if(toDay>dd){
									toDay=dd;
								}
								break;
							}
						}
					}else if(fromDay<=dd&&toDay>dd){
						toDay=dd;
					}
					fromDay=fromDay>9?fromDay:'0'+fromDay;
					toDay=toDay>9?toDay:'0'+toDay;
					from=year+"-"+month+"-"+fromDay;
					to=year+"-"+month+"-"+toDay;
				}
				this.date=from+','+to;
				this.date2=from+','+to;
				uni.getStorage({
					key:'selectDate',
					success:(res)=> {
						if(res.data.indexOf(',')!=-1){
							this.date=res.data;
						}else{
							uni.setStorage({
								key:'selectDate',
								data:this.date
							})
						}
					},
					complete: (res) => {
					}
				})
				uni.getStorage({
					key:'selectDate2',
					success:(res)=> {
						if(res.data.indexOf(',')!=-1){
							this.date2=res.data;
						}else{
							uni.setStorage({
								key:'selectDate2',
								data:this.date2
							})
						}
					},
					complete: (res) => {
					}
				})
				this.getReportKey();
		},
		computed: {
			i18n() {
				return this.$t("index")
			}
		},
		components:{
			headerComp,circlebar
		},
		methods: {
			backFun(){
				uni.reLaunch({
					url:"../index",
				})
			},
			conditionFun(){
				uni.setStorage({
					key:'backUrl',
					data:8
				})
				uni.navigateTo({
					url:'../condition'
				})
			},
			getReportKey(){
					var report='holidayeEvent';
					this.keyArr=['HolidayEvent','HolidayDetail','HolidayEffect'];
				
				uni.showLoading({
					title: '加载中'
				});
				uni.request({
					url:window.url+'/reportCharts',
					data:{
						report:report,
						_t:Date.parse(new Date())/1000
					},
					header: {
						'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.chartDatas.xaxis.data.forEach((item,index)=>{
					 if(index==0){
						 this.columns.push( {field: item, title:item, width: 100, titleAlign: 'center',columnAlign:'center',isResize:true,isFrozen: true})
					 }else{
						 this.columns.push( {field: item, title:item, width: 80, 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;
					 })
					 this.tableData.push(obj)
				 })
				 
				 this.columns2=[];
				 this.tableData2=[];
				 this.chartDatas2.xaxis.data.forEach((item,index)=>{
				 	 if(index==0){
				 		 this.columns2.push( {field: item, title:item, width: 100, titleAlign: 'center',columnAlign:'center',isResize:true,isFrozen: true})
				 	 }else{
				 		 this.columns2.push( {field: item, title:item, width: 80, titleAlign: 'center',columnAlign:'center',isResize:true})
				 	 }
				 })
				  this.chartDatas2.series.forEach((item,index)=>{
				 	  var obj={}
				 	 item.data.forEach((item,index)=>{
				 		 obj[this.chartDatas2.xaxis.data[index]]=item;
				 	 })
				 	 this.tableData2.push(obj)
				  })
			},
			getChartData(){
				this.orgIds=''
					var data={}
					var url=window.url+'/report/holidayeEvent/mall';
					if(this.reportType=='mall'){
						this.orgIds=this.accountId[0]
						url=window.url+'/report/holidayeEvent/mall';
						data={
							orgIds:this.orgIds,
							startDate:this.date.split(',')[0],
							endDate:this.date.split(',')[1],
							chartIds:this.chartIds,
							kpiType:'TRAFFIC',
							_t:Date.parse(new Date())/1000
						}
					}
					uni.request({
						url:url,
						header: {
							'Authorization': this.atoken //自定义请求头信息
						},
						data:data,
						method:'GET',
						success:(res) =>{
							uni.hideLoading()
							var datas=res.data.data;
							this.chartData=datas.body;
							this.chartDatas=datas.body.HolidayDetail;
							this.chartDatas2=datas.body.HolidayEvent
							this.setTabelData()
						}
					})
				
			}
		},
	}
</script>

<style>
	.selectBox{
		width: 646.73upx;
		height: 61.59upx;
		font-size:21.74upx;
		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>