assess-app/pages/index/index.vue

<template>
	<view class="total-page page-env-160 page-box">
		<Nav :title="'工作台导航'" :back="false" :is_fixed="true" :opacity="scrollTop" :justify="'left'" :color="'#fff'">
			<view class="p-20">
				<IndexPersonal ref="memberObj" @setMemberData="setMemberData"></IndexPersonal>
				<IndexColumn ref="columnObj" :memberData="memberData" :model-time="modelTime"></IndexColumn>
			</view>
		</Nav>
		<view class="p-lr20 m-tb30">
			<view class="personal m-lr10 row-justify-sb center">
				<text class="sys-weight-600">我的待办</text>
				<view class="row-justify-sb center">
					<view class="personal_text">
						<uni-datetime-picker type="date" v-model="modelTime" @change="onChangeTime"
							@touchmove.stop.prevent="moveHandle">
							<view class="personal sys-background-fff size-24 sys-weight-600 p-lr30 r-40">{{indexTime}}
							</view>
						</uni-datetime-picker>
					</view>
				</view>
			</view>
		</view>
		<view class="page-box-bg-fff m-t30 m-lr20 r-30 row-justify-sb flex p-b30" v-show="backlogList.length>0">
			<view class="">
				<view class="row-c">
					<view class="pie_chart column-c">
						<PieChart ref="pieChart"></PieChart>
						<text class="size-24 text-color-12">任务完成情况</text>
					</view>
					<view class="m-b30">
						<view class="row-c p-tb10" style="text-align: center;" v-for="(item,index) in chartList"
							:key="index">
							<view class="row-c">
								<view class="row-c" style="line-height: 30rpx;">
									<view class="chart_dot" :style="{backgroundColor:item.color}"></view>
									<text class="m-l16 size-28 text-color-787">{{item.name}}</text>
								</view>
							</view>
							<text class="text-color-12 sys-weight-600 m-l20 size-28">{{item.value}}%</text>
						</view>
					</view>
				</view>
			</view>
			<view class="circle_chart column-sb-c m-t10">
				<CircleChart ref="circleObj" :width="'185rpx'" :height="'185rpx'" bgColor="#0FB160"></CircleChart>
				<text class="size-24 text-color-12">任务进度</text>
			</view>
		</view>
		<TaskItem :type="5" :taskList="backlogList"></TaskItem>
		<Tab class="tabs_height" :tab-index="0"></Tab>
	</view>

</template>
<script>
	import TaskItem from "@/common/task/task-item.vue"
	import PieChart from "@/common/chart/pie_chart.vue"
	import CircleChart from "@/common/chart/circle_chart.vue"
	// 个人信息
	import IndexColumn from "./module/index_column.vue"
	// 顶部栏目
	import IndexPersonal from "./module/index_personal.vue"
	import {
		getDateBacklogStatistics,
		getDayBacklogList
	} from "@/api/task";
	import {
		date
	} from "@/uni_modules/uv-ui-tools/libs/function/test";

	export default {
		components: {
			TaskItem,
			PieChart,
			CircleChart,
			IndexColumn,
			IndexPersonal
		},
		data() {
			return {
				modelTime: this.$tools.getDate('-'),
				indexTime: this.$tools.getDate('-'),
				is_admin: false,
				scrollTop: 0,
				topNavHeight: 0,
				chartList: [{
					name: "超期",
					color: '#DE5847',
					value: "0"
				}, {
					name: "滞后",
					color: '#EF8F27',
					value: "0"
				}, {
					name: "正常",
					color: '#3ABF7D',
					value: "0"
				}, ],
				memberData: {},
				statisticsData: {
					endNum: 0,
					exceedDate: 0,
					lagDate: 0,
					totalNum: 0,
				},
				backlogList: [],
				weekData: [],
				weekNum: 1,
				dayNum: 0,
				day: '',
				month: '',
				page: 1,
				isAjax: false,
				total: null
			}
		},
		watch: {
			'modelTime': function() {
				this.startList()
			}
		},
		onLoad() {
			uni.hideTabBar()
		},
		onShow() {
			this.startList()
			this.$refs.memberObj.getMemberInfo()
			this.$refs.columnObj.getSysCashier()
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop / 120
		},
		onReachBottom() {
			this.getDayBacklogList()

		},
		methods: {
			getDateBacklogStatistics() {
				getDateBacklogStatistics({
					'dateNum': this.modelTime
				}).then(res => {
					if (res.code === 1) {
						if (res.data.totalNum > 0) {
							this.chartList[0].value = (res.data.exceedNum / res.data.totalNum * 100).toFixed(0) *
								1;
							this.chartList[1].value = (res.data.lagNum / res.data.totalNum * 100).toFixed(0) * 1;
							this.chartList[2].value = (res.data.normalNum / res.data.totalNum * 100).toFixed(0) *
								1;
							setTimeout(() => {
								this.$refs.circleObj.setServerData((res.data.endNum / res.data.totalNum)
									.toFixed(2) * 1)
								this.$refs.pieChart.setServerData(this.chartList)
							}, 50)

						} else {
							this.chartList[0].value = 0;
							this.chartList[1].value = 0;
							this.chartList[2].value = 0;
							setTimeout(() => {
								this.$refs.pieChart.setNoData()
								this.$refs.circleObj.notServerData()
							}, 50)
						}

					}
				})
			},
			startList() {
				this.backlogList = [];
				this.page = 1;
				this.total = null;
				this.getDayBacklogList();
				this.getDateBacklogStatistics()
			},
			getDayBacklogList() {
				if (this.total !== null && this.total <= this.backlogList.length) {
					return
				}
				getDayBacklogList({
					'dateNum': this.modelTime,
					'page': this.page
				}).then((res) => {
					if (res.code === 1) {
						this.backlogList.push(...res.data.items)
						this.total = res.data.total
							++this.page
					}
				})
			},

			setMemberData(memberData) {
				this.memberData = memberData
			},
			onChangeTime(e) {
				this.indexTime = e
			},
			moveHandle() {
				return false
			},
		},
	}
</script>
<style lang="scss" scoped>
	.personal {
		height: 55rpx;
		line-height: 55rpx;
	}

	.pie_chart {
		width: 135px
	}

	.circle_chart {
		width: 135px;
		padding-top: 20rpx;
	}

	.chart_dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
	}
</style>