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 @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 ref="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 ref="circleObj" :width="'180rpx'" :height="'180rpx'" 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: "100%"
				}, {
					name: "滞后",
					color: '#EF8F27',
					value: "100%"
				}, {
					name: "正常",
					color: '#3ABF7D',
					value: "100%"
				}, ],
        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()
      uni.$on('newReceiving', () => {

      })
      this.startList()

		},
		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;
              this.$refs.circleObj.setServerData( (res.data.endNum/res.data.totalNum).toFixed(2)*1)
            }else {
              this.chartList[0].value=0;
              this.chartList[1].value=0;
              this.chartList[2].value=0;
              this.$refs.circleObj.setServerData( 0)
            }
            console.log(this.chartList)
            this.$refs.pieChart.setData( this.chartList)


          }
        })
      },
      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>