materialAppletApp/pages/Setting/singleStatistics.vue

<template>
	<view>
		<view class="head">
			<view class="">
				<image class="userFlagimg" src="../../static/img/userFlag.png" mode=""></image>
			</view>
			<view class="pname">
				<font class="wenzi" style="color: #BDD6F3;font-size:28upx"> {{$t('mainStatistics.name')}}: {{pnameData}}</font>
			</view>
			<view class="company">
				<font style="color: #BDD6F3;font-size:28upx">{{$t('mainStatistics.company')}}</font>
			</view>
		</view>
		<view class="ri">
			<view class="riShell">
				<view class="riImg">
					<image style="width: 64upx;height: 64upx;padding-top: 20upx;" :src="$t('mainStatistics.dayImg')"></image>
				</view>
				<view class="riTitle">
					<view style="text-align:left;font-size:28upx;font-family:PingFang-SC-Medium">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.dayTotalMoney')}}:</font>
						<font style="color: #ED341F;">{{dayRandomTimes}}</font>
					</view>
					<view style="text-align:left;font-size:28upx;font-family:PingFang-SC-Medium">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.dayTotalNum')}}:</font>
						<font style="color: #ED341F;">{{dayRegularTimes}}</font>
					</view>
				</view>
			</view>
			<view class="riqi">
				<view style="text-align:right" class="tody">
					<font style="color: #596D83;">{{today}}</font>
				</view>
				<view style="text-align:right" class="xingqi">
					<font style="color: #596D83;">{{week}}</font>
				</view>
			</view>
		</view>
		<view class="fourTitle">
			<view class="four">
				<view class="fourImg">
					<image style="width: 54upx;height: 54upx;padding-top: 20upx;" :src="$t('mainStatistics.weekImg')" mode=""></image>
				</view>
				<view class="fourShell">
					<view class="one">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.weekTotalMoney')}}:</font>
						<font style="color: #ED341F;">{{weekRandomTimes}}</font>
					</view>
					<view class="two">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.weekTotalNum')}}:</font>
						<font style="color: #ED341F;">{{weekRegularTimes}}</font>
					</view>
				</view>
			</view>

			<view class="four">
				<view class="fourImg">
					<image style="width: 54upx;height: 54upx;padding-top: 20upx;" :src="$t('mainStatistics.monthImg')" mode=""></image>
				</view>
				<view class="fourShell">
					<view class="one">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.monthTotalMoney')}}:</font>
						<font style="color: #ED341F;">{{monthRandomTimes}}</font>
					</view>
					<view class="two">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.monthTotalNum')}}:</font>
						<font style="color: #ED341F;">{{monthRegularTimes}}</font>
					</view>
				</view>
			</view>

			<view class="four">
				<view class="fourImg">
					<image style="width: 54upx;height: 54upx;padding-top: 20upx;" :src="$t('mainStatistics.yearImg')" mode=""></image>
				</view>
				<view class="fourShell">
					<view class="one">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.yearTotalMoney')}}:</font>
						<font style="color: #ED341F;">{{yearRandomTimes}}</font>
					</view>
					<view class="two">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.yearTotalNum')}}:</font>
						<font style="color: #ED341F;">{{yearRegularTimes}}</font>
					</view>
				</view>
			</view>

			<view class="four">
				<view class="fourImg">
					<image style="width: 54upx;height: 54upx;padding-top: 20upx;" :src="$t('mainStatistics.allImg')" mode=""></image>
				</view>
				<view class="fourShell">
					<view class="one">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.machineTotalNum')}}:</font>
						<font style="color: #ED341F;">{{machineTotalNum}}</font>
					</view>
					<view class="two">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.machineUseNum')}}:</font>
						<font style="color: #ED341F;">{{machineUseNum}}</font>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex';
	// import uCharts from '@/components/u-charts/u-charts.js';
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import {
		dateUtils
	} from '@/common/util.js';
	var _self;
	export default {
		name: 'mainStatistics',
		props: {
			equipmentId: '',
			adminId: '',
			pname: '',
		},
		components: {
			uniCollapse,
			uniCollapseItem,
			uniList,
			uniListItem,
		},
		data() {
			return {
				machineTotalNum: 0,
				machineUseNum: 0,
				dayRandomTimes: 0,
				dayRegularTimes: 0,
				weekRandomTimes: 0,
				weekRegularTimes: 0,
				monthRandomTimes: 0,
				monthRegularTimes: 0,
				yearRandomTimes: 0,
				yearRegularTimes: 0,
				today: '',
				week: '',
				pnameData:''
			}
		},

		computed: {
			...mapState(['loginUser']),
			// pnameData: {
			// 	get() {
			// 		return this.pname;
			// 	}
			// },
		},
		onShow() {
			
			var equipmentId = uni.getStorageSync("nowEquipmentId");
			if(equipmentId!=null||equipmentId!=''){
				this.equipmentId=equipmentId;
			}
			var equipmentName = uni.getStorageSync("nowEquipmentName");
			if(equipmentName!=null||equipmentName!=''){
				this.pnameData=equipmentName;
			}
			var token = uni.getStorageSync("token");
			if (token.toString().length > 1) {
				this.init();

			} else {
				uni.reLaunch({
					url: '../Login/Login',
				});
			}
			// this.input = this.input + 1;
			var test = uni.getStorageSync('test');
			var globalUser = uni.getStorageSync("globalUser");
			this.globalUser = globalUser;
			if (globalUser.toString().length > 1) {
				//判断是不是初次登陆
				if (test == 2) {
					this.init();
				}
			}
			var id = this.adminId;

			this.day();
			// this.equipmentStatus();
		},
		mounted() {
			var token = uni.getStorageSync("token");
			if (token.toString().length > 1) {
				this.init();
			} else {
				uni.reLaunch({
					url: '../Login/Login',
				});
			}
			// this.day();
			this.equipmentStatus();
		},
		methods: {
			...mapActions('chart', ['getStatistics', 'getMainStatistics', 'getMachineNum', 'getEquipmentListByUser']),
			async init() {
				if (!this.pname) {
					this.pname = this.loginUser.name;
				}
				_self = this;
				await this.getMainStatisticsData();
				// await this.getEquipmentListData();
				//初次登陆跳转后，把test变成2
				uni.setStorageSync('test', '2');

			},
			day() {
				var date = new Date();
				// var daystr = dateUtils.formateDate(date, 'yyyy年MM月dd日');
				var daystr = dateUtils.formateDate(date, 'yyyy-MM-dd');
				this.today = daystr;
				// var str= '星期'+'日一二三四五六'.charAt(date.getDay());
				this.week = this.$t('mainStatistics.week' + date.getDay());

			},
			equipmentStatus() {
				var id = uni.getStorageSync("globalUser").id;
				var token = uni.getStorageSync("token");
				uni.request({
					url: this.serverurl + '/TEquipment/equipmentStatus',
					data: {
						"adminId": id
					},
					header: {
						'token': token
					},
					method: "POST",
					success: (res) => {

					},
				});
			},
			getMainStatisticsData() {
				const param = {};
				if (this.adminId) { // 子组件，则拿传过来的参
					param['adminId'] = this.adminId;
				} else if ('admin' !== this.loginUser['username']) { //否则为主页，拿登录用户
					param['adminId'] = this.loginUser['id'];
				}
				var globalUser = uni.getStorageSync("globalUser");
				if (globalUser.id != 1) {
					if (param.adminId == null || param.adminId == undefined) {
						param['adminId'] = globalUser.id;
					}
				}
				if (this.equipmentId) {
					param['equipmentId'] = this.equipmentId;
				}
				// console.log('getMainStatisticsData:{}', param);
				var adminId = param.adminId;
				var equipmentId = this.equipmentId;
				var serverurl = this.serverurl;
				var token = uni.getStorageSync("token");
				uni.request({
					url: serverurl + '/TEquipment/getMachineNum',
					data: {
						"adminId": adminId,
						"equipmentId": equipmentId
					},
					method: "POST",
					header: {
						'token': token
					},
					success: (res) => {
						var list = res.data.data;
						this.machineTotalNum = list[0];
						this.machineUseNum = list[1];
					}
				});
				return this.getMainStatistics(param)
					.then(data => {
						for (let bean of data) {
							if (bean['categorie'] === 'day') {
								if (bean['randomTimes'] != null) {
									this.dayRandomTimes = bean['randomTimes'];
								}
								if (bean['regularTimes'] != null) {
									this.dayRegularTimes = bean['regularTimes'];
								}


							}
							if (bean['categorie'] === 'week') {
								if (bean['randomTimes'] != null) {
									this.weekRandomTimes = bean['randomTimes'];
								}
								if (bean['regularTimes'] != null) {
									this.weekRegularTimes = bean['regularTimes'];
								}


							}
							if (bean['categorie'] === 'month') {
								if (bean['randomTimes'] != null) {
									this.monthRandomTimes = bean['randomTimes'];
								}
								if (bean['regularTimes'] != null) {
									this.monthRegularTimes = bean['regularTimes'];
								}


							}
							if (bean['categorie'] === 'year') {
								if (bean['randomTimes'] != null) {
									this.yearRandomTimes = bean['randomTimes'];
								}
								if (bean['regularTimes'] != null) {
									this.yearRegularTimes = bean['regularTimes'];
								}


							}
						}
						uni.stopPullDownRefresh();
					}, _ => void uni.stopPullDownRefresh());
			},
		}
	}
</script>

<style>
	page {
		/* background: #F2F2F2; */
		background: #FFFFFF;
		width: 750upx;
		overflow-x: hidden;
	}

	.head {
		display: flex;
		flex-direction: row;
		background: #206DC3;
		width: 750upx;
		height: 180upx;
	}

	.company {
		width: 48%;
		text-align: right;
	}

	.pname {
		display: flex;
		flex-direction: row;
		width: 40%;
	}

	.userFlagimg {
		padding-left: 30upx;
		padding-top: 10upx;
		width: 26upx;
		height: 28upx;
	}

	.wenzi {
		padding-left: 5upx;
		/* text-align:right; */
		white-space: nowrap;
		overflow: hidden;
		/* text-overflow: ellipsis; */
	}

	.ri {
		width: 690upx;
		height: 180upx;
		background: #FFFFFF;
		border-radius: 15upx;
		/* 上移 */
		transform: translateY(-90upx);
		text-align: center;
		margin: auto;
		display: flex;
		flex-direction: row;
		/* 阴影 */
		box-shadow: 0upx -1upx 20upx #D3D3D3;
		/* box-shadow:0px 0px  10px 5px #aaa; */
	}

	.riShell {
		display: flex;
		flex-direction: row;
		margin: auto;
	}

	.riTitle {
		display: flex;
		flex-direction: column;
		margin: auto;
	}

	.riqi {
		display: flex;
		flex-direction: column;
		margin: auto;
	}

	.fourTitle {
		width: 690upx;
		height: 294upx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		background: #FFFFFF;
		box-shadow: 0upx 0upx 20upx #D3D3D3;
		margin: auto;
		border-radius: 15upx;
		transform: translateY(-60upx);
	}

	.four {
		display: flex;
		flex-direction: row;
		margin: auto;
		width: 48%;
	}

	.fourImg {
		width: 54upx;
		height: 54upx;
	}

	.qiun-padding {
		padding: 2%;
		width: 96%;
	}

	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}

	.fontLeft {
		margin-right: 6upx;
	}
</style>