assess-app/pages/index/index.vue

<template>
	<view class="total-page page_env page-box">
		<Nav :title="'工作台导航'" :back="false" :is_fixed="true" :opacity="scrollTop" :justify="'left'" :color="'#fff'">
			<view class="p-20">
				<IndexPersonal @setMemberData="setMemberData"></IndexPersonal>
				<IndexColumn :memberData="memberData"></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 m-b20 r-30 row-justify-sb flex p-b30">
			<view class="">
				<view class="row-c">
					<view class="pie_chart column-c">
						<PieChart></PieChart>
						<text class="size-24 text-color-12">任务完成情况</text>
					</view>
					<view class="m-b30">
						<view class="row-c p-tb10" 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 text-color-787">{{item.name}}</text>
								</view>
							</view>
							<text class="text-color-12 sys-weight-600 m-l40">{{item.value}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="circle_chart column-sb-c m-t10">
				<CircleChart :width="'180rpx'" :height="'180rpx'" :bgColor="'#0FB160'"></CircleChart>
				<text class="size-24 text-color-12">任务进度</text>
			</view>
		</view>
		<Enblank :message="'暂无待办任务'" v-if="!taskList.length"></Enblank>
		<TaskItem :type="2" :taskList="taskList"></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"

	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: "100%"
				}, {
					name: "滞后",
					color: '#EF8F27',
					value: "100%"
				}, {
					name: "正常",
					color: '#3ABF7D',
					value: "100%"
				}, ],
				taskList: [],
        memberData:{}
			}
		},
		onLoad() {
			uni.hideTabBar()
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop / 120
		},
		onReachBottom() {
			console.log('到底部了');
		},
		methods: {
      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>