anmo-master/my/shuju/index.vue

<template>
	<view class="tongji">
		<view class="content">
			<view class="title-box">
				<view class="icon-box">
					<image class="icon" src="../../static/images/order/icon1.png" mode=""></image>
					<view class="title">服务数据</view>
				</view>
			</view>
			<view class="box">
				<view class="text-center">
					<view class="tit">{{ordersScore}}</view>
					<view class="label">综合评分</view>
				</view>
				<view class="text-center">
					<view class="tit">{{succeedRate}}%</view>
					<view class="label">成交量</view>
				</view>
				<view class="text-center">
					<view class="tit">{{sumCount}}</view>
					<view class="label">服务次数</view>
				</view>
				<view class="text-center">
					<view class="tit">{{creditScore}}</view>
					<view class="label">信用分</view>
				</view>
			</view>
		</view>
			<view class="content red">
				<view class="title-box">
					<view class="icon-box">
						<image class="icon" src="../../static/images/order/icon2.png" mode=""></image>
						<view class="title">收益数据</view>
					</view>
					<view class="flex align-center padding-left">
						<image src="../../static/images/data.png" style="width: 26upx;height: 26upx;"></image>
						<view class="margin-left-xs flex align-center time" >
							<view @click="bindData(5)">{{startTimes?startTimes:'开始时间'}}</view>
							至
							<view @click="bindData(6)">{{endTimes?endTimes:'结束时间'}}</view>
						</view>
					</view>
				</view>
				<view class="box">
					<view class="text-center">
						<view class="tit">{{sumMoney5 ? sumMoney5 : 0}}</view>
						<view class="label">总收益</view>
					</view>
					<view class="text-center">
						<view class="tit">{{sumCount5}}</view>
						<view class="label">总销量</view>
					</view>
					<view class="text-center">
						<view class="tit">{{sumRefund5}}</view>
						<view class="label">退款金额</view>
					</view>
				</view>
			</view>
			<view class="content green">
				<view class="title-box">
					<view class="icon-box">
						<image class="icon" src="../../static/images/order/icon3.png" mode=""></image>
						<view class="title">订单数据</view>
					</view>
					<view class="flex align-center padding-left">
						<image src="../../static/images/data.png" style="width: 30rpx;height: 30rpx;"></image>
						<view class="margin-left-xs flex align-center time" >
							<view @click="bindData(1)">{{startTime?startTime:'开始时间'}}</view>
							至
							<view @click="bindData(2)">{{endTime?endTime:'结束时间'}}</view>
						</view>
					</view>
				</view>
				<view class="box">
					<view class="text-center">
						<view class="tit">{{orderMoney}}</view>
						<view class="label">订单收入</view>
					</view>
					<view class="text-center">
						<view class="tit">{{sumCount1}}</view>
						<view class="label">总订单数</view>
					</view>
					<view class="text-center">
						<view class="tit">{{sumRefund}}</view>
						<view class="label">退款金额</view>
					</view>
				</view>
			</view>
			<view class="content yellow">
				<view class="title-box">
					<view class="icon-box">
						<image class="icon" src="../../static/images/order/icon4.png" mode=""></image>
						<view class="title">用户评价</view>
					</view>
					<view class="flex align-center padding-left">
						<image src="../../static/images/data.png" style="width: 26upx;height: 26upx;"></image>
						<view class="margin-left-xs flex align-center time" >
							<view @click="bindData(3)">{{startTime1?startTime1:'开始时间'}}</view>
							至
							<view @click="bindData(4)">{{endTime1?endTime1:'结束时间'}}</view>
						</view>
					</view>
				</view>
				<view class="box1">
					<view class="bar-box">
						<view class="bar-content"> 
							<view class="label-title">
								用户好评率
							</view>
							<view class="num">
								{{goodsRate}}%
							</view>
						</view>
						<view class="bar" :style="{width:goodsRate+'%'}"></view>
					</view>
					<view class="bar-box">
						<view class="bar-content"> 
							<view class="label-title">
								用户差评率
							</view>
							<view class="num">
								{{loseRate}}%
							</view>
						</view>
						<view class="bar" :style="{width:loseRate+'%'}"></view>
					</view>
				</view>
			</view>
		<!-- 开始时间 -->
		<u-picker v-model="startshow" mode="time" :params="paramsStart" @confirm="startData"></u-picker>
		<!-- 结束时间 -->
		<u-picker v-model="endshow" mode="time" :params="paramsEnd" @confirm="endData"></u-picker>

		<!-- 开始时间 -->
		<u-picker v-model="startshows" mode="time" :params="paramsStarts" @confirm="startDatas"></u-picker>
		<!-- 结束时间 -->
		<u-picker v-model="endshows" mode="time" :params="paramsEnds" @confirm="endDatas"></u-picker>

		<!-- 开始时间 -->
		<u-picker v-model="startshow1" mode="time" :params="paramsStart1" @confirm="startData1"></u-picker>
		<!-- 结束时间 -->
		<u-picker v-model="endshow1" mode="time" :params="paramsEnd1" @confirm="endData1"></u-picker>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				succeedRate: 0,
				sumMoney5: 0,
				sumCount5: 0,
				sumRefund5: 0,
				sumMoney: 0,
				ordersScore: 0,
				creditScore: 0,
				orderMoney: 0,
				sumCount: 0,
				sumCount1: 0,
				sumRefund: 0,
				goodsRate: 0,
				loseRate: 0,
				startshow: false,
				endshow: false,
				paramsStart: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				paramsEnd: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				startTime: '',
				endTime: '',

				startTime1: '',
				endTime1: '',
				startshow1: false,
				endshow1: false,
				paramsStart1: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				paramsEnd1: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},

				startTimes: '',
				endTimes: '',
				startshows: false,
				endshows: false,
				paramsStarts: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				paramsEnds: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
			}
		},
		onLoad() {
			this.getArtificer();
			this.getCount();
			this.getCount1();
			this.getCount5();
			this.getCount3();
		},
		onShow() {

		},
		methods: {
			//获取技师的信息
			getArtificer() {
				this.$Request.getT("/app/artificer/selectArtificer").then(res => {
					if (res.code == 0) {
						this.ordersScore = res.data.ordersScore ? res.data.ordersScore : 0;
						this.creditScore = res.data.creditScore ? res.data.creditScore : 0;
						// uni.setStorageSync("status", res.data.status)
						uni.setStorageSync('artificerId', res.data.artificerId)
					}
				});
			},
			getCount() {
				this.$Request.get("/app/artificer/selectArtificerIndex").then(res => {
					if (res.code == 0) {
						this.sumMoney = res.data.sumMoney;
						this.succeedRate = res.data.succeedRate ? parseFloat(parseFloat(res.data.succeedRate) * 100).toFixed(2) : 0;
						this.sumCount = res.data.sumCount;
					}
				})
			},
			getCount3() {
				this.$Request.get("/app/artificer/selectArtificerIndex?startTime=" + this.startTime1 + '&endTime=' + this
					.endTime1).then(res => {
					if (res.code == 0) {
						this.goodsRate = res.data.goodsRate ? parseFloat(parseFloat(res.data.goodsRate) * 100).toFixed(2): 0;
						this.loseRate = res.data.loseRate ? parseFloat(parseFloat(res.data.loseRate) * 100).toFixed(2) : 0;
					}
				})
			},
			getCount1() {
				this.$Request.get("/app/artificer/selectArtificerIndex?startTime=" + this.startTime + '&endTime=' + this
					.endTime).then(res => {
					if (res.code == 0) {
						this.sumRefund = res.data.sumRefund;
						this.sumCount1 = res.data.countOrder;
						this.orderMoney = res.data.orderMoney;
					}
				})
			},
			getCount5() {
				this.$Request.get("/app/artificer/selectArtificerIndex?startTime=" + this.startTimes + '&endTime=' + this
					.endTimes).then(res => {
					if (res.code == 0) {
						this.sumMoney5 = res.data.sumMoney;
						this.sumCount5 = res.data.countOrderNum;
						this.sumRefund5 = res.data.sumRefund;
					}
				})
			},
			//时间弹框开关
			bindData(index) {
				// console.log(index, 1111)
				if (index == 1) {
					this.startshow = true
				} else if (index == 2) {
					this.endshow = true
				} else if (index == 3) {
					this.startshow1 = true
				} else if (index == 4) {
					this.endshow1 = true
				} else if (index == 5) {
					this.startshows = true
				} else if (index == 6) {
					this.endshows = true
				}
			},
			//开始时间
			startData(e) {
				// console.log(e)
				this.startTime = e.year + '-' + e.month + '-' + e.day
			},
			// 结束时间
			endData(e) {
				if (this.startTime) {
					this.endTime = e.year + '-' + e.month + '-' + e.day
					this.getCount1();
				} else {
					this.$queue.showToast("请先选择开始时间");
				}
			},
			//开始时间
			startData1(e) {

				this.startTime1 = e.year + '-' + e.month + '-' + e.day
			},
			// 结束时间
			endData1(e) {
				if (this.startTime1) {
					this.endTime1 = e.year + '-' + e.month + '-' + e.day
					this.getCount3();
				} else {
					this.$queue.showToast("请先选择开始时间");
				}
			},

			//开始时间
			startDatas(e) {
				this.startTimes = e.year + '-' + e.month + '-' + e.day
			},
			// 结束时间
			endDatas(e) {
				if (this.startTimes) {
					this.endTimes = e.year + '-' + e.month + '-' + e.day
					this.getCount5();
				} else {
					this.$queue.showToast("请先选择开始时间");
				}
			},
		}
	}
</script>

<style lang="scss">
	.tongji {
		background: #F5F5F5;
		padding: 20rpx 32rpx;
		height: 100vh;
		.content{
			background: linear-gradient( 180deg, #ECF4FF 0%, #FFFFFF 100%);
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			padding: 28rpx;
			margin-bottom: 20rpx;
		}
		.content.red{
			background: linear-gradient( 180deg, #FFF6F6 0%, #FFFFFF 100%);
		}
		.content.green{
			background: linear-gradient( 180deg, #ECFFF4 0%, #FFFFFF 100%);
		}
		.content.yellow{
			background: linear-gradient( 180deg, #FFF8EC 0%, #FFFFFF 100%);
		}
		.title-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.icon-box{
				display: flex;
				align-items: center;
				.icon{
					width: 40rpx;
					height: 40rpx;
				}
				.title {
					font-weight: bold;
					font-size: 32rpx;
					color: #222222;
					font-family: PingFang SC, PingFang SC;
					margin-left: 16rpx;
				}
			}
			
			.time{
				font-size: 28rpx;
				color: #222222;
			}
		}

		
		.box {
			display: flex;
			justify-content: space-between;
		}
		.tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #222222;
			margin-top: 24rpx;
		}
		
		.label{
			font-size: 28rpx;
			color: #222222;
			margin-top: 20rpx;
		}
	}


	.box1 {
		.bar-box{
			height: 60rpx;
			line-height: 60rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			position: relative;
			z-index: 10;
			background: #F5F6F6;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			.bar-content{
				display: flex;
				align-items: center;
				margin-left: 28rpx;
				.label-title{
					font-size: 28rpx;
					color: #222222;
				}
				.num{
					font-weight: bold;
					font-size: 36rpx;
					color: #222222;
					margin-left: 6rpx;
				}
			}
			.bar{
				position: absolute;
				top: 0%;
				left: 0;
				z-index: -1;
				background: #FFBC42;
				height: 60rpx;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
			}
		}
	}
</style>