yd_qycpfb/jp-mobile/pages/progress/progressStatistics.vue

<template>
	<view style="background-color: #fff;height: 100vh;">
		<uni-datetime-picker v-model="range" v-show="activeIndex == 0" type="daterange" @change="maskClick" />
		<uni-datetime-picker v-model="year" v-show="activeIndex == 1" type="daterange" @change="maskClick" />
		<view class="alarmList">
			<view class="switchHead">
				<view v-for="(item,index) in tabTitleData" class="boxList" :class="{activeCss:activeIndex==index}"
					:key="index">
					<text @click="clickTab(index)">{{item.name}}</text>
				</view>
			</view>
			<view class="progress_list">
				<uni-row :gutter="5">
					<uni-col :span="12">
						<view>
							<uni-card margin="5px" shadow="0px 0px 3px 1px #36A7F3">
								<view class="progress_section_1"></view><text>未办结问题数</text>
								<view><text class="progress_num">{{unfinish}}</text>个</view>
								<view class="progress_account">占比<text
										style="color: red;margin-left: 5px;">{{unfinishAccount}}%</text></view>
							</uni-card>
						</view>
					</uni-col>
					<uni-col :span="12">
						<view>
							<uni-card margin="5px" shadow="0px 0px 3px 1px #36A7F3">
								<view class="progress_section_2"></view><text>办结问题数</text>
								<view><text class="progress_num">{{finish}}</text>个</view>
								<view class="progress_account">占比<text
										style="color: #36A7F3;margin-left: 5px;">{{finishAccount}}%</text></view>
							</uni-card>
						</view>
					</uni-col>
				</uni-row>
			</view>
		</view>
	</view>

</template>

<script>
	import dzfQuestionService from '@/api/question/dzfQuestionService.js'
	export default {
		data() {
			return {
				range: ['2021-02-1', '2021-3-28'],
				year:['',''],
				datetimerange: [],
				start: Date.now() - 1000000000,
				end: Date.now() + 1000000000,
				activeIndex: '0',
				tabTitleData: [{
						name: '当月累计'
					},
					{
						name: '当年累计'
					}
				],
				finish: 0,
				unfinish: 0,
				finishAccount: 0,
				unfinishAccount: 0
			}
		},
		onShow() {
			var date = new Date();
			var year = date.getFullYear(); // 年份
			var month = date.getMonth() + 1; // 月份，返回值为0-11，所以需要加1
			var day = date.getDate(); // 日期

			// 对月份和日期进行补零
			month = month < 10 ? '0' + month : month.toString();
			day = day < 10 ? '0' + day : day.toString();

			var currentDate = year + '-' + month + '-' + day;
			var start = year + '-' + month + '-01'
			this.range[0] = start
			this.range[1] = currentDate
			this.year[0] = year + '-01-01'
			this.year[1] = currentDate
			this.getData(start,currentDate)
		},
		methods: {
			clickTab(index) {
				this.activeIndex = index;
				var date = new Date();
				var year = date.getFullYear(); // 年份
				var month = date.getMonth() + 1; // 月份，返回值为0-11，所以需要加1
				var day = date.getDate(); // 日期
				
				// 对月份和日期进行补零
				month = month < 10 ? '0' + month : month.toString();
				day = day < 10 ? '0' + day : day.toString();
				var currentDate = year + '-' + month + '-' + day;
				var start = year + '-' + month + '-01'
				this.range[1] = currentDate
				if(index == 1){
					this.range[0] = year + '-01-01'
					this.$forceUpdate();
				}
				this.getData(start,currentDate)
			},
			getData(start,end){
				dzfQuestionService.getProgressStatistics(start,end).then(({data}) =>{
					
					this.finish = data.finish
					this.unfinish = data.unfinish
					this.finishAccount = data.finishAcount
					this.unfinishAccount = data.unAcount
					
				})
			},
			maskClick(e){
				this.getData(e[0],e[1]);
			}
			
		}
	}
</script>

<style>
	.alarmList {
		font-size: 14px;
		height: 100%;
		margin-top: 20rpx;
	}

	.alarmList .switchHead {
		height: 30px;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.alarmList .switchHead .boxList {
		height: 100%;
	}

	.alarmList .switchHead .activeCss {
		border-bottom: 2px solid #36A7F3;
		color: #36A7F3;
	}

	.progress_list {
		margin: 20rpx;
	}

	.progress_list view {
		margin-top: 10px;
	}

	.progress_section_1 {
		display: inline;
		border-left: 2px solid red;
		border-radius: 2px;
		height: 5px;
		background-color: red;
		margin-right: 10px;
	}

	.progress_section_2 {
		display: inline;
		border-left: 2px solid #36A7F3;
		border-radius: 2px;
		height: 5px;
		background-color: #36A7F3;
		margin-right: 10px;
	}

	.progress_num {
		font-size: 20px;
		color: #000;
		margin-right: 10rpx;

	}

	.progress_account {
		font-size: 10px;
	}
</style>