jp-xpgj-GA-file/src/projects/business/views/Master/Health/Worker.vue

<template>
	<div>
		<common @asynCallBack="asynCallBack"></common>
		<top-header :pageTitle="pageTitle"></top-header>

		<div class="mui-content fyy-wall vongi-zgtz">
			<div class="mui-content-padded fyy-date mui-clearfix">
				<h5>{{person_data.companyName}}
					<a class="mui-navigate-right mui-pull-right" v-text="curDate" @click="selectDate()">2020-03-19</a>
				</h5>
			</div>
			<div class="vongi-clasadmin">
				<h4>职工健康码统计</h4>
				<div class="vongi-clasadmin-list">
					<div class="vongi-clasadmin-ma mui-col-xs-3" v-for="(item,index) in statList" :key="index">
						<span :style="'color:'+getGreenCodeColor(item.healthyCode)" v-text="item.total">2953</span>
						<div class="mui-media-body" v-text="getCodeStatusName(item.healthyCode)">绿码</div>
					</div>

				</div>
				<div class="vongi-zgtz-search">
					<div class="mui-input-row mui-search">
						<input type="search" class="setinput" placeholder="请输入姓名" v-model="setinput" @change="searchK">
					</div>
				</div>
			</div>
			<div class="mui-slider">
				<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item " :class="selectedIndex==0?'mui-active':''"  @click="selectedIndex=0">
						全部<span class="mui-badge" v-html="allCount"></span>
					</a>
					<a class="mui-control-item" :class="selectedIndex==1?'mui-active':''"  @click="selectedIndex=1">
						已上报<span class="mui-badge"  v-html="doneCount"></span>
					</a>
					<a class="mui-control-item" :class="selectedIndex==2?'mui-active':''"  @click="selectedIndex=2">
						未上报<span class="mui-badge"  v-html="undoCount"></span>
					</a>
				</div>
				<div class="mui-slider-group">
					<div :class="allGroup" class="mui-slider-item mui-control-content" v-show="selectedIndex==0">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll ">
								<ul class="mui-table-view">
										<li class="mui-table-view-cell vongi-wordcard vongi-meform-pho" style="    border-bottom: 1px solid #c8c7cc;" v-for="(item,index) in allList" :key="index" >
													<a @click="viewDetail(item)"  :class="item.upLoad?'mui-navigate-right':''" >
														<div class="mui-pull-left flew-items">
															<div class="mui-media-object flew"><img v-if="item.faceImageUrl!=null" :src="item.faceImageUrl + '?x-oss-process=image/resize,m_fill,w_64'"
																									width="50" /></div>
															<h4 v-text="item.name"></h4>
															<span class="mui-icon iconfont icon-erweima1  " :style="'color:'+getGreenCodeColor(item.healthyCode)"></span>
														</div>
														<div class="mui-pull-right color55f868" style="padding: inherit;" v-if="item.upLoad">已上报</div>
														<div class="mui-pull-right colorfe616c" style="padding: inherit;" v-if="!item.upLoad">未上报</div>
										</a>
									</li>
								</ul>

							</div>
						</div>
					</div>
					<div :class="doneGroup" class="mui-slider-item mui-control-content"  v-show="selectedIndex==1">
						<div id="scroll2" class="mui-scroll-wrapper">

							<div class="mui-scroll ">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell vongi-wordcard vongi-meform-pho" style="    border-bottom: 1px solid #c8c7cc;" v-for="(item,index) in doneList" :key="index" >
										<a @click="viewDetail(item)"  :class="item.upLoad?'mui-navigate-right':''" >
											<div class="mui-pull-left flew-items">
												<div class="mui-media-object flew"><img v-if="item.faceImageUrl!=null" :src="item.faceImageUrl + '?x-oss-process=image/resize,m_fill,w_64'"
																						width="50" /></div>
												<h4 v-text="item.name"></h4>
												<span class="mui-icon iconfont icon-erweima1  " :style="'color:'+getGreenCodeColor(item.healthyCode)"></span>
											</div>
											<div class="mui-pull-right color55f868" style="padding: inherit;" v-if="item.upLoad">已上报</div>
											<div class="mui-pull-right colorfe616c" style="padding: inherit;" v-if="!item.upLoad">未上报</div>
										</a>
									</li>
								</ul>

							</div>
						</div>
					</div>
					<div :class="undoGroup" class="mui-slider-item mui-control-content"  v-show="selectedIndex==2">
						<div id="scroll3" class="mui-scroll-wrapper">

							<div class="mui-scroll ">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell vongi-wordcard vongi-meform-pho" style="    border-bottom: 1px solid #c8c7cc;" v-for="(item,index) in undoList" :key="index" >
										<a @click="viewDetail(item)"  :class="item.upLoad?'mui-navigate-right':''" >
											<div class="mui-pull-left flew-items">
												<div class="mui-media-object flew"><img v-if="item.faceImageUrl!=null" :src="item.faceImageUrl + '?x-oss-process=image/resize,m_fill,w_64'"
																						width="50" /></div>
												<h4 v-text="item.name"></h4>
												<span class="mui-icon iconfont icon-erweima1  " :style="'color:'+getGreenCodeColor(item.healthyCode)"></span>
											</div>
											<div class="mui-pull-right color55f868" style="padding: inherit;" v-if="item.upLoad">已上报</div>
											<div class="mui-pull-right colorfe616c" style="padding: inherit;" v-if="!item.upLoad">未上报</div>
										</a>
									</li>
								</ul>

							</div>


						</div>

					</div>
				</div>
			</div>
		</div>



		<loading :visible="isLoading"></loading>
	</div>
</template>

<script>
    require('$project/assets/js/mui.picker.min.js');
    import Common from '$project/components/Common.vue'
    import Loading from '$project/components/Loading.vue'
    import TopHeader from '$project/components/TopHeader.vue'

    import {mapGetters,mapMutations} from 'vuex'

    import * as API_Health from '@/apis/Master/health'
    import isReachBottom from '$project/utils/isReachBottom'
    import {
        currentTimeStamp,
        parseUnixTime
    } from '$project/utils'
    export default {
        name: 'HealthTemperatureInfo',
        components: {
            Common,
            Loading,
            TopHeader
        },
        data() {
            return {
                pageTitle: '打卡台账',
                rightLink: {
                    show: true,
                    icon: 'icon-tongji',
                    style: 'font-size:12px',
                    title: '健康统计'
                },
                id: '',
                detail: [],
                curDate: '',
                isLoading: false,
                allList:[],
                allCount:0,
                undoList:[],
                undoCount:0,
                doneList:[],
                doneCount:0,
                selectedIndex: 0,
                pageIndexArr:[1,1,1],
                totalPageArr:[1,1,1],
                setinput: "",
                totalPage:1,
                sortType:'1',
                statList: [],
            }
        },
        created() {
            this.id = this.$route.query.id;
            if(this.$route.query.time){
                this.curDate = this.$route.query.time;
            }else{
                this.curDate = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
            }
            if(this.$route.query.index){
                this.selectedIndex=this.$route.query.index;
            }

        },
        methods: {
            asynCallBack(){},
            searchK() {

                this.queryList(true);
            },

            async queryList(isFirst){
                //created 传trye, 其他传null
                if(isFirst){

                    this.pageIndexArr[0] = 1;
                    this.pageIndexArr[1] = 1;
                    this.pageIndexArr[2] = 1;
                    //  this.totalPageArr=[1,1,1]
                    this.allList=[];
                    this.doneList=[];
                    this.undoList=[];

                }


                this.isLoading = true;
                if(isFirst||this.selectedIndex=='0'){
                    await this.pageList('',this.pageIndexArr[0]).then(page=>{
                        this.allCount = page.recordsTotal;

                        if (this.pageIndexArr[0]==1) {
                            this.allList = page.data;
                            this.totalPageArr[0]=page.totalPage;
                        }else{
                            this.allList = [
                                ...this.allList,
                                ...page.data
                            ];
                        }

                        if(this.selectedIndex==0){
                            this.isLoading = false;
                        }

                        this.pageIndexArr[0]++;
                    });
                }
                if(isFirst||this.selectedIndex=='1'){
                    await this.pageList('1',this.pageIndexArr[1]).then(page=>{
                        this.doneCount = page.recordsTotal;

                        if (this.pageIndexArr[1]==1) {
                            this.doneList = page.data;
                            this.totalPageArr[1]=page.totalPage;

                        }else{
                            this.doneList = [
                                ...this.doneList,
                                ...page.data
                            ];
                        }
                        if(this.selectedIndex==1){
                            this.isLoading = false;
                        }

                        this.pageIndexArr[1]++;
                    });
                }


                if(isFirst||this.selectedIndex=='2') {
                    await this.pageList('2', this.pageIndexArr[2]).then(page => {
                        this.undoCount = page.recordsTotal;

                        if (this.pageIndexArr[2] == 1) {
                            this.undoList = page.data;
                            this.totalPageArr[2]=page.totalPage;

                        } else {
                            this.undoList = [
                                ...this.undoList,
                                ...page.data
                            ];
                        }
                        if (this.selectedIndex == 2) {
                            this.isLoading = false;
                        }

                        this.pageIndexArr[2]++;
                    });
                }
                //this.pageIndex++;
            },
            selectDate() {
                var _this=this;
                var dtPicker = new mui.DtPicker({
                    type: 'date',
                    "endDate": new Date(),
                    "value":_this.curDate
                });
                // dtPicker.setSelectedValue(_this.curDate)

                dtPicker.show((selectItems)=>{
                    var year = selectItems.y.value;
                    var month = selectItems.m.value;
                    var day = selectItems.d.value;

                    this.curDate = year + "-" + month + "-" + day;

                    this.queryList(true);
                });
            },

            pageList(status,pageIndex) {
                return API_Health.workerPageList({
                    setinput: this.setinput,
                    companyId: this.person_data.companyId,
                    queryDate: this.curDate,
                    status: status,
                    pageIndex: pageIndex,
                    pageSize: 50
                    //sortType:this.sortType,
                });
            },
            //获取绿码统计数据
            getHealthyCodeStat() {
                this.isLoading = true;
                API_Health.getHealthyCodeStat(this.person_data.companyId, '3').then(response => {
                    this.isLoading = false;
                    this.statList = response;
                }).catch(error => {
                    this.isLoading = false;
                    mui.toast(error);
                })
            },
            viewDetail(item) {
                if (item.upLoad) {
                    this.$router.push({
                        name: 'MasterHealthWorkerInfo',
                        query: {
                            id: item.personHealthLedgerId
                        }
                    })
                }
            },
            //获取健康码颜色值
            getGreenCodeColor(healthyCode) {
                var healthyCode = healthyCode || '11';
                var color = {
                    "00": '#09ae47',
                    "01": '#e5aa37',
                    "10": '#fe616c',
                    "11": '#C0C0C0'
                }
                return color[healthyCode];
            },

            //判断状态
            getCodeStatusName(code) {
                if (code == '00') {
                    return '绿码';
                } else if (code == '01') {
                    return '黄码';
                } else if (code == '10') {
                    return '红码';
                } else if (code == '11') {
                    return '灰码';
                } else {
                    return '无码';
                }
            },
            //下拉事件
            handleScrool() {
                //console.log(window.screen.height + '-' + document.body.scrollTop + '-' + document.body.clientHeight)
                //if ((window.screen.height + document.body.scrollTop) > (document.body.clientHeight)) {
                if (isReachBottom()) {
                    console.log('到达底部')
                    if (this.pageIndexArr[this.selectedIndex] <= this.totalPageArr[this.selectedIndex] && this.isLoading == false) {
                        this.queryList(false);
                    } else {
                        return;
                    }
                } else {
                    this.loadAll = true;
                    return;
                }
            },

        },
        computed: {
            ...mapGetters({
                openId: 'wx_openid',
                token: 'token',
                person_data: 'person_data',
                person_popedom: 'person_popedom',
            }),
            allGroup(){
                return {
                    "mui-active" : this.selectedIndex==0
                };
            },
            doneGroup(){
                return {
                    "mui-active" : this.selectedIndex==1
                };
            },
            undoGroup(){
                return {
                    "mui-active" : this.selectedIndex==2
                };
            }
        },
        mounted() {
              var _this = this;
            this.queryList(true);
            //获取绿码统计数据
            this.getHealthyCodeStat();
            window.addEventListener('scroll', _this.handleScrool);
        },
        destroyed() {
            //销毁监听事件
            var _this = this;
            window.removeEventListener('scroll', _this.handleScrool);
        }

    }
</script>

<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style scoped src="$project/assets/css/sczpfyy.css"></style>
<style scoped src="$project/assets/css/wallfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style src="$project/assets/css/mui.picker.min.css"></style>

<style>
</style>