groupTime.vue

<template>
	<view>
		<headerComp
		  :leftImgSrc="leftImg"
		  :title="titleStr"
		  :rightImgSrc="rightImg"
		  @leftClick="backFun"
		  @rightClick="conditionFun"></headerComp>
		<view class="prefix-elem"></view>
		<view class="main-content">
			<scroll-view
				:scroll-y="true"
				class="content-table">
				<!-- 人脸性别统计详情 -->
				<text class="table-title" v-show="genderColumns.length > 0">{{ genderTitle }}</text>
				<v-table 
					v-if="genderColumns.length > 0"
					is-horizontal-resize
					style="width: 100%;"
					:columns="genderColumns"
					:table-data="genderTableData"
					row-hover-color="#eee"
					row-click-color="#edf7ff">
				</v-table>
				<!-- 人脸年龄统计详情 -->
				<text class="table-title" v-show="ageColumns.length > 0">{{ ageTitle }}</text>
				<v-table 
					v-if="ageColumns.length > 0"
					is-horizontal-resize
					style="width: 100%;"
					:columns="ageColumns"
					:table-data="ageTableData"
					row-hover-color="#eee"
					row-click-color="#edf7ff">
				</v-table>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import headerComp from '../../../components/header.vue'
	import leftImg from '../../../static/header/backArrow.png'
	import rightImg from '../../../static/header/other.png'
	import { mapState } from 'vuex'
	
	export default {
		components: {
			headerComp,
		},
		data() {
			return {
				titleStr: '客流分时统计',
				leftImg: leftImg,
				rightImg: rightImg,
				// 性别统计报表
				genderTitle: '',
				genderTableData: [],
				genderColumns: [],
				// 年龄统计报表
				ageTitle: '',
				ageTableData: [],
				ageColumns: [],
				accountId: null,
				atoken: '',
				chartIds: '',
				reportLevel: '',
				params: {}
			}
		},
		onLoad(options) {
			this.atoken = this.getStorage('atoken')
			// this.getReportKey(options.analysisLevel)
			console.log('onload', options)
			this.reportLevel = options.analysisLevel || 'mall';
			
			this.getReportKey(this.reportLevel)
		},
		created() {
			this.accountId = this.getStorage('accountId');
			if(!this.checkedMallId) {
				this.$store.dispatch('malls/getMallList', {
					data: {
						accountId:this.accountId,
						_t:Date.parse(new Date()) / 1000
					},
					header: {
						'app-code':'mobile',
						'Authorization': this.atoken //自定义请求头信息
					},
					isMultiple: true
				})
				this.$store.dispatch('malls/getDateData', 15)
			}
		},
		computed: {
			i18n() {
				return this.$t("index")
			},
			...mapState({
				mallList: state => state.malls.list,
				checkedMallId: state => state.malls.checkedMallId,
				multiCheckedMallId: state => state.malls.multiCheckedMallId,
				timeData: state => state.malls.customTimeData,
				selectedTime: state => state.malls.selectedDayTime
			})
		},
		watch: {
			checkedMallId(val) {
				this.$store.dispatch('malls/getGateList', {
					data: {
						mallId: val.id,
						status: 1,
						isHasFace: 1,
						_t:Date.parse(new Date()) / 1000
					},
					header: {
						'app-code':'mobile',
						'Authorization': this.atoken //自定义请求头信息
					},
					isMultiple: true
				})
				if(this.reportLevel !== 'mall') {
					this.params['orgId'] = val.id;
					this.getReportKey(this.reportLevel)
				}
			},
			multiCheckedMallId(val) {
				console.log('watch multiCheckedMallId', val)
				if(this.reportLevel === 'mall') {
					this.params['orgId'] = val.map(item => item.id).join(',');
					this.getReportKey(this.reportLevel)
				}
			}
		},
		mounted() {
			// console.log('store state', this.mallList, this.checkedMallId, this.multiCheckedMallId)
		},
		methods: {
			backFun() {
				uni.reLaunch({
					url:"../passenger",
				})
			},
			conditionFun() {
				uni.navigateTo({
					url: '../conditions/groupTimeOption'
				})
			},
			getReportKey(analysisLevel) {
				this.params.orgId = this.reportLevel !== 'mall'
					? this.checkedMallId.id
					: this.multiCheckedMallId.map(item => item.id).join(',');
				if(!this.params.orgId) return;
				let keyArr = ['faceGenderDetail', 'faceAgeDetail'];
				uni.showLoading({
					title: '加载中'
				})
				uni.request({
					url: window.url + '/reportCharts',
					data:{
						report: 'faceCountAnalyzeSta',
						_t: Date.parse(new Date())/1000
					},
					header: {
						'app-code':'mobile',
						'Authorization': this.atoken //自定义请求头信息
					},
					method:'GET',
					success:(res) =>{
						let result = res.data;
						this.chartIds='';
						res.data.data.forEach(item => {
							if(keyArr.indexOf(item.key) != -1){
								this.chartIds += item.id + ','
							}
						})
						this.chartIds = this.chartIds.substring(0, this.chartIds.length - 1);
						this.getChartData(analysisLevel);
					}
				})
			},
			getChartData(analysisLevel) {
				this.genderTableData = this.genderColumns = [];
				uni.request({
					url: `${window.url}/report/faceCountAnalyzeSta/${analysisLevel}`,
					data: {
						orgIds: this.params.orgId,
						startDate: `${this.selectedTime} 00:00:00`,
						endDate: `${this.selectedTime} 23:59:59`,
						chartIds: this.chartIds,
						_t: Date.parse(new Date()) / 1000
					},
					header: {
						'app-code':'mobile',
						'Authorization': this.atoken
					},
					method: 'GET',
					success: (res) => {
						uni.hideLoading();
						let result = res.data;
						// 
						let bodyData = result.data.body;
						let genderResource = result.data.body['faceGenderDetail'];
						let columnsKey = this.createKeyObject(genderResource.xaxis.data);
						this.genderTitle = genderResource.title;
						this.genderColumns = this.createColumns(columnsKey);
						this.genderTableData = this.createTableData(columnsKey, genderResource.series);
						// 年龄分布
						let ageResource = result.data.body['faceAgeDetail'];
						let ageColumnsKey = this.createKeyObject(ageResource.xaxis.data);
						this.ageTitle = ageResource.title;
						this.ageColumns = this.createColumns(ageColumnsKey);
						this.ageTableData = this.createTableData(ageColumnsKey, ageResource.series);
					}
				})
			},
			createKeyObject(arr) {	// 数组转换为key value对象
				return arr.map((item, index) => {
					return {
						key: 'tableKey' + index,
						value: item
					}
				})
			},
			createColumns(keyObject) {	// 生成列数据
				return keyObject.map((item, index) => {
					return {
						field: item.key,
						title: item.value,
						width: 80,
						titleAlign: 'center',
						columnAlign: 'center',
						isResize: true,
						isFrozen: index == 0 ? true : false
					}
				})
			},
			createTableData(keyArr, originData) {	// 生成表格数据
				let result = [], temp = {};
				originData.forEach((item, index) => {
					if(item.data.length === keyArr.length) {
						item.data.forEach((dataItem, dataIndex) => {
							temp[keyArr[dataIndex].key] = dataItem || dataItem == 0 ? dataItem : '--';
						})
						result.push(temp);
						temp = {};
					}
				})
				return result;
			},
		},
		
	}
</script>

<style>
	.prefix-elem {
		height: 18.11upx;
	}
	.table-title {
		display: block;
		background-color: #fff;
		font-size: 28.98upx;
		padding: 25.36upx 14.49upx;
		box-sizing: border-box;
	}
</style>