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

<template>
	<view style="background-color: #fff;height: 100vh;">
		<view :class="['custom-header', { 'is-back': isBack }, bgColor]">
			<view class="back-container" @click="handleBack">
			  <view class="back-text">返回</view>
			</view>
			<view class="content-container">
			  
			</view>
		  </view>
		<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 @click="goInfo(1)">
							<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 @click="goInfo(2)">
							<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 {
				isBack: true, // 是否显示返回按钮
				bgColor: 'bg-blue', // 背景颜色
				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]);
			},
			 goInfo(e){
				uni.navigateTo({
					url: `/pages/progress/ProgressQuestionList?w=${e}`
				})
			 }
			
		}
	}
</script>

<style>
	.custom-header {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  padding: 10px;
	  width: 100%;
	  height: 40px;
	}
	
	.is-back {
	  position: relative;
	}
	
	.back-container {
	  position: absolute;
	  left: 10px;
	  cursor: pointer;
	}
	
	.back-text {
	  color: white; /* 返回按钮文本颜色 */
	}
	/* 背景颜色 */
	.bg-blue {
	  background-color: #4285f4; /* 假设这是一个蓝色背景 */
	}
	.content-container {
	  flex: 1;
	  text-align: center;
	}
	.content-text {
	  color: white; /* 标题文本颜色 */
	  font-weight: bold;
	}
	.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>