flying-monkey/pagesA/faultStatistics/faultStatistics.vue

<template>
	<view class="content">
		<statusNav navBarTitle="维保统计" returnColor="#c2c2c2"></statusNav>
		<container-subgroup-two>
			<view slot="content" style="margin: 0 -30rpx;">
				<view class="faultStatistics-nav">
					<view class="li" @click="navlistIndexFun(index)" :class="navlistIndex==index?'on':''"
						v-for="(item,index) in navlist">
						{{item.title}}
					</view>
				</view>
				<view class="settlement-type">
					<view class="settlement-type-title">结算类型</view>
					<view class="settlement-type-content">
						<view class="li liB">
							<view class="text">{{settlementType[0].title}}</view>
							<view class="num">{{settlementType[0].num}}</view>
						</view>

						<view class="li liC">
							<view class="text">{{settlementType[2].title}}</view>
							<view class="num">{{settlementType[2].num}}</view>
						</view>
						<view class="li liD">
							<view class="text">{{settlementType[1].title}}</view>
							<view class="num">{{settlementType[1].num}}</view>
						</view>
						<view class="li">
							<view class="text">{{settlementType[3].title}}</view>
							<view class="num">{{settlementType[3].num}}</view>
						</view>
					</view>
				</view>
				<view class="fault-type">
					<view class="settlement-type-title">维保类型</view>
					<view class="charts-box">
						<qiun-data-charts type="ring" :chartData="chartData" />
					</view>
				</view>
				<view class="brand-analysis">
					<view class="settlement-type-title">品牌分析</view>
					<view class="brand-analysis-box">
						<view class="li" v-for="(item,index) in brandAnalysis" :key="index">
							<view class="serial-number">{{item.id}}</view>
							<view class="brand-analysis-center">
								<view class="title-box">
									<view class="title">{{item.name}}</view>
									<view class="cor" v-if="item.project_count">{{item.project_count}}</view>
									<view class="cor1">{{item.proportion}}%</view>
								</view>
								<view class="percentage">
									<view class="percentage-box" :class="index%2!=0 ? 'percentage-box-ber' : ''" :style="{width:getPercentage(item.proportion,100)}"></view>
								</view>
							</view>
							<image class="icon" src="../../static/iocn/xl.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</container-subgroup-two>
		<view v-if="timeVisit">
			<timeDate @chooseEv="chooseEv"></timeDate>
		</view>
	</view>
</template>

<script>
	import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
	import timeDate from '@/components/time/time-date';
	import statusNav from '../../components/status-nav.vue';
	export default {
		components: {
			statusNav,
			containerSubgroupTwo,
			timeDate
		},
		data() {
			return {
				navlistIndex: 0,
				navlist: [{
						title: "全部",
					},

					{
						title: "按时间段",
					},
					{
						title: "昨日",
					},
					{
						title: "本周",
					},
					{
						title: "本月",
					},
				],
				// 结算类型
				settlementType: [
					{title:'单次收费',num:0},
					{title:'验收扫尾',num:0},
					{title:'质保免费',num:0},
					{title:'包年签单',num:0},
				],
				// 维保类型
				chartData: {
					series: [{data: []}]
				},
				// 品牌分析
				brandAnalysis:[],
				timestr:'all',
				timeVisit:false,
				
			}
		},
		onLoad() {
			// console.log(this.getPercentage(33, 66))
			this.checkTJ();
		},
		methods: {
			// 查询维保统计
			checkTJ() {
				this.$requst.get('/universal/api.statistics/statistics_fault',{time:this.timestr}).then(res=>{
					if(res.code) {
						this.settlementType = [];
						// 结算类型
						for (let key in res.data.settlement_type) {
							let obj = {
								title: key,
								num: res.data.settlement_type[key],
							}
							this.settlementType.push(obj)
						}
						// 维保类型
						let fault_type = [];
						for (let key in res.data.fault_type) {
							let obj = {
								name: key,
								value: parseFloat(res.data.fault_type[key]),
								color: ""
								
							}
							fault_type.push(obj)
						}
						fault_type = fault_type.reverse();
						this.chartData.series[0].data = fault_type;
						this.chartData.series[0].format = "customToolTip";
						this.chartData.series[0].data[0].color = '#56ddff';
						this.chartData.series[0].data[1].color = '#2d8dfe';
						this.chartData.series[0].data[2].color = '#7f90a4';
						this.chartData.series[0].data[3].color = '#44d2c1';
						this.chartData.series[0].data[4].color = '#2d8dfe';
						// 品牌分析
						this.brandAnalysis = res.data.brand_analyze;
					}
				})
			},
			navlistIndexFun(index) {
				this.navlistIndex = index;
				switch (index){
					case 0:
					this.timestr = 'all';
						break;
					case 1:
					this.timeVisit = true;
					// this.timestr = 'all';
						break;
					case 2:
					this.timestr = 'yesterday';
						break;
					case 3:
					this.timestr = 'week';
						break;
					case 4:
					this.timestr = 'month';
						break;
				}
				if(index!=1) {
					this.checkTJ();
				}
			},
			getPercentage(num, max) {
				return Math.ceil(((num - 0) / (max - 0)) * 100) + "%"
			},
			// 时段改变事件
			chooseEv(obj){
				if(obj.num) {
					this.timestr = obj.time;
					this.checkTJ();
				}
				this.timeVisit = false;
			}
		}
	}
</script>

<style>
	.content {
		padding: 0rpx 15rpx;
	}


	.faultStatistics-nav {
		display: flex;
		font-size: 30rpx;
		margin-top: 25rpx;
		color: #958b8b;
		justify-content: space-around;
	}

	.faultStatistics-nav .li {
		padding: 8rpx 13rpx;
		box-sizing: border-box;
		border: 2rpx solid #F5F5F5;
	}

	.faultStatistics-nav .on {
		color: #FF5400;
		border: 2rpx solid #FF5400;
		border-radius: 8rpx;
		box-sizing: border-box;
	}

	.settlement-type {
		width: 100%;
		border-radius: 25rpx;
		height: 400rpx;
		margin-top: 29rpx;
		padding: 24rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		box-shadow: 0rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.settlement-type-title {
		font-size: 32rpx;
		color: #2c2c2c;
		display: flex;
		align-items: center;
		font-weight: bold;

	}

	.settlement-type-title::before {
		content: "";
		margin-right: 22rpx;
		width: 6rpx;
		display: block;
		height: 32rpx;
		border-radius: 50rpx;
		background: linear-gradient(#307ade, #08adf8)
	}

	.settlement-type-content {
		display: flex;
		flex-wrap: wrap;
	}

	.settlement-type-content .li {
		width: 50%;
		text-align: center;
		padding-bottom: 20rpx;
		padding-top: 26rpx;
		position: relative;
	}

	.settlement-type-content .li .text {
		color: #888888;
		font-size: 27rpx;
	}

	.settlement-type-content .li .num {
		color: #0ba9f8;
		font-size: 46rpx;

	}

	.settlement-type-content .liB::after {
		content: "";
		width: 2rpx;
		height: 88rpx;
		background-color: #E5E5E5;
		position: absolute;
		right: 0rpx;
		top: 0rpx;
	}

	.settlement-type-content .liB::before {
		content: "";
		width: 245rpx;
		height: 2rpx;
		background-color: #E5E5E5;
		position: absolute;
		left: 50%;
		margin-left: -123rpx;
		bottom: 0rpx;
	}

	.settlement-type-content .liC::before {
		content: "";
		width: 245rpx;
		height: 2rpx;
		background-color: #E5E5E5;
		position: absolute;
		left: 50%;
		margin-left: -123rpx;
		bottom: 0rpx;
	}

	.settlement-type-content .liD::before {
		content: "";
		width: 2rpx;
		height: 88rpx;
		background-color: #E5E5E5;
		position: absolute;
		right: 0rpx;
		margin-left: -123rpx;
		bottom: 10rpx;
	}

	.fault-type {
		width: 100%;
		padding: 24rpx 21rpx;
		box-sizing: border-box;
		height: 500rpx;
		border-radius: 15rpx;
		margin-top: 30rpx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.charts-box {
		margin-top: 50rpx;
		width: 100%;
		height: 330rpx;
	}

	.brand-analysis {
		padding: 24rpx 21rpx;
		background-color: #FFFFFF;
		width: 100%;
		border-radius: 15rpx;
		padding-bottom: 120rpx;
		box-shadow: 0rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
		box-sizing: border-box;
		margin-top: 30rpx;
	}

	.brand-analysis-box .li {
		border-bottom: 2rpx solid #EEEEEE;
		padding: 27rpx 0rpx;
		padding-left: 32rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}

	.brand-analysis-box .li .serial-number {
		color: #958b8b;
		font-size: 28rpx;
		margin-right: 34rpx;
	}

	.brand-analysis-center {
		flex: 1;
	}

	.brand-analysis-center .title-box {
		display: flex;
		justify-content: space-between;
		width: 100%;
		font-size: 24rpx
	}

	.brand-analysis-center .title-box .title {
		color: #333333;
		font-size: 26rpx
	}

	.cor {
		color: #2d8dfe;
	}

	.cor1 {
		color: #999999;
	}

	.percentage {
		width: 100%;
		margin-top: 11rpx;
		background-color: #EDEDED;
		height: 20rpx;
		border-radius: 25rpx;
	}

	.brand-analysis-box .icon {
		width: 16rpx;
		height: 31rpx;
		margin-left: 37rpx;
	}

	.percentage-box {
		height: 100%;
		background-color: #2d8efd;
		border-radius: 25rpx;
	}

	.percentage-box-ber {
		background-color: #ffb503;
	}
</style>