yuanqu_ui/pages/index/index.vue

<template>
	<view :style="'padding-top:'+nvaHeight+'px;'">
		<cover-view class="navbox" :style="'background-color:'+backgroundColor+';'">
			<uni-nav-bar  color="#ffffff" leftWidth='340rpx'  :background-color="backgroundColor" :border="false" statusBar='true' fixed="true">
			</uni-nav-bar>
		</cover-view>
		<!-- 主体 -->
		<image :src="navbg" class="navbg"></image>
		<!-- :style="'margin-top:-'+marTop+'rpx;'" -->
		<view class="yymain" >
			<!-- 顶部 -->
			<view class="yqtop flexcj">
				<view class="yqtopl">
					<view class="tit mb10">{{city||'潜山经济开发区'}}</view>
					<view class="txt">安徽中新云智慧园区服务平台</view>
				</view>
				<view class="yqtopr">
					<view class="flexc mb4">
						<image class="wimg" :src="weathericon"></image>
						<view class="txt ml6">{{daytime}}</view>
					</view>
					<view class="txt">{{lunar}}</view>
				</view>
			</view>
			<!-- 卡片 -->
			<view class="yqcard">
				<view class="yqctop flexcj">
					<view class="yqctopl flexc">
						<image :src="headimg"></image>
						<view class="over">{{name}}</view>
					</view>
					<view class="yqctopr flexcc" @click="getNoticeFn">
						<image :src="newsimg"></image>
						<view class="tit">消息</view>
						<view class="cir"></view>
					</view>
				</view>
				<view class="pdlr2">
					<view class="yqcbox">
						<view class="yqcba"  @click="getClockFn" v-if="checkPermi(['system:clock:add'])">
							<view class="aimg"><image :src="htabkimg" class="imgk"></image></view>
							<view class="atit">考勤打卡</view>
						</view>
						<!-- <view class="yqcba" v-if="checkPermi(['system:clock:list'])" @click="getClockFn">
							<view class="aimg"><image :src="htabaimg" class="imga"></image></view>
							<view class="atit">打卡记录</view>
						</view> -->
						<view class="yqcba" v-if="checkPermi(['system:order:add'])" @click="getMeetFn">
							<view class="aimg"><image :src="htabbimg" class="imgb"></image></view>
							<view class="atit">会议预订</view>
						</view>
						<view class="yqcba" v-if="checkPermi(['system:food:add'])" @click="getEatFn">
							<view class="aimg"><image :src="htabcimg" class="imgc"></image></view>
							<view class="atit">订餐预订</view>
						</view>
						<!-- <view class="yqcba">
							<view class="aimg"><image :src="htabdimg" class="imgd"></image></view>
							<view class="atit">访客预约</view>
						</view> -->
						<view class="yqcba" v-if="checkPermi(['system:reservat:list'])" @click="getMoreFn">
							<view class="aimg"><image :src="htabeimg" class="imge"></image></view>
							<view class="atit">预约管理</view>
						</view>
						<view class="yqcba" v-if="checkPermi(['system:management:list'])" @click="getLimitFn">
							<view class="aimg"><image :src="htabfimg" class="imgf"></image></view>
							<view class="atit">人员权限</view>
						</view>
						<view class="yqcba" v-if="checkPermi(['system:record:list'])" @click="getVistotFn">
							<view class="aimg"><image :src="htabgimg" class="imgg"></image></view>
							<view class="atit">访客记录</view>
						</view>
						<view class="yqcba" @click="getYqMeetFn">
							<view class="aimg"><image :src="htabiimg" class="imgi"></image></view>
							<view class="atit">在线会议</view>
						</view>
						<view class="yqcba" @click="getYqCookFn" v-if="checkPermi(['system:menuFood:add'])">
							<view class="aimg"><image :src="htabjimg" class="imgj"></image></view>
							<view class="atit">园区食谱</view>
						</view>
						<view class="yqcba" @click="getYqMenuFn" v-if="checkPermi(['system:foodRecord:list'])">
							<view class="aimg"><image :src="htabjimg" class="imgj"></image></view>
							<view class="atit">食谱记录</view>
						</view>
						<view class="yqcba" @click="getClockSetFn" v-if="checkPermi(['system:schedule:add'])">
							<view class="aimg"><image :src="htablimg" class="imgk"></image></view>
							<view class="atit">考勤设置</view>
						</view>
						<view class="yqcba" @click="getClockjlFn" v-if="checkPermi(['system:info:record:list'])">
							<view class="aimg"><image :src="htablimg" class="imgk"></image></view>
							<view class="atit">考勤记录</view>
						</view>
						<view class="yqcba" @click="getClockcontFn" v-if="checkPermi(['system:clock:all:month'])">
							<view class="aimg"><image :src="htablimg" class="imgk"></image></view>
							<view class="atit">考勤统计</view>
						</view>
						<!-- <view class="yqcba">
							<view class="aimg"><image :src="htabhimg" class="imgh"></image></view>
							<view class="atit">敬请期待</view>
						</view> -->
					</view>
				</view>
			</view>
			<!-- 通知 -->
			<!-- 监控视频 -->
			<block  v-if="checkPermi(['system:camera:video'])">
				<view class="vidbox mb16">
					<!-- #ifdef APP-PLUS -->
					<video :src="videourl" id="myvideo" autoplay controls></video>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view id="myPlayer" style="width: 100%;" ref="myPlayer"></view>
					<!-- #endif -->
					<!-- 监控 -->
					<view class="control" v-if="tabval==1">
						<view class="contop flexcc">
							<image :src="videoimg"></image>
							<view>监控切换</view>
						</view>
						<view class="flex1 overa conbox">
							<view class="contit over" :class="dzCode==ite.indexCode?'act':''" v-for="(ite,idx) in access" :key="ite.indexCode" @click="getCodeFn(ite)">
							{{ite.name}}
							<image :src="videobg" v-if="dzCode==ite.indexCode" class="videobg"></image>
							</view>
						</view>
						
					</view>
				</view>
				<view class="openbox flexcj">
					<view class="btns bga" @click="getOpenFn" v-if="checkPermi(['system:camera:openDz'])">
						<image :src="openimg"></image>
						开门
					</view>
					<view class="btns bgb" @click="getCloseFn" v-if="checkPermi(['system:camera:closeDz'])">
						<image :src="openimg"></image>
						关门
					</view>
				</view>
			</block>			
			<view class="mb10">
				<notice :noticelist="noticelist" :activeColor="activeColor" :nactiveColor="nactiveColor" :autoplay='autoplay' @getNoticeDet="getNoticeDet"></notice>
			</view>
			<!-- 普通用户看到的 v-if="!checkRole(['manager'])"-->
			<template v-if="!checkRole(['administrators'])">
				<view class="yqcont" >
					<view class="yqcb">
						<image :src="hbgfimg" class="cbgimg"></image>
						<view class="cbox flexc">
							<view class="cboxb flexc pl10">
								<image :src="dayimg" class="dayimg"></image>
								<view class="num pr4">{{conuntinfo.dczs}}</view>
							</view>
							<view class="cboxb">
								<view class="tit"><view class="tita">中餐</view><text>{{conuntinfo.dcwc}}</text>位</view>
								<view class="tit"><view class="tita">晚餐</view><text>{{conuntinfo.dcDinner}}</text>位</view>
							</view>
						</view>
					</view>
				</view>
				<view class="yylists">
					<view class="yyltab flexcj">
						<view class="left flexc">本周打卡记录<image :src="listline"></image></view>
						<view class="right" @click="getmClockFn">查看更多 >></view>
					</view>
					<view>
						<y-list type='record' :workTime="workTime" :datalist="list" :wtdt="wtdt" @getDetail='getClockDetailFn' :adrlist="adrlist" @getDelFn="getDelFn" @gettypeFn="gettypeFn"></y-list>
					</view>
				</view>
			</template>
			<template v-else>
				<!-- 统计 -->
				<view class="yqcont yqconta">
					<view class="yqcl">
						<view class="yqcla">
							<image :src="hbgaimg" class="cbgimg"></image>
							<view class="cbox">
								<view class="tit mb5">本月来访数</view>
								<view class="tit"><text>{{conuntinfo.bylf}}</text>位</view>
							</view>
						</view>
						<view class="yqcla">
							<image :src="hbgbimg" class="cbgimg"></image>
							<view class="cbox">
								<view class="tit mb5">本月预约</view>
								<view class="tit"><text>{{conuntinfo.byyy}}</text>位</view>
							</view>
						</view>
						<view class="yqcla">
							<image :src="hbgcimg" class="cbgimg"></image>
							<view class="cbox">
								<view class="tit mb5">今日来访</view>
								<view class="tit"><text>{{conuntinfo.jrlf}}</text>位</view>
							</view>
						</view>
						<view class="yqcla">
							<image :src="hbgdimg" class="cbgimg"></image>
							<view class="cbox">
								<view class="tit mb5">今日预约</view>
								<view class="tit"><text>{{conuntinfo.jryy}}</text>位</view>
							</view>
						</view>
					</view>
					<view class="yqcr">
						<image :src="hbgeimg" class="cbgimg"></image>
						<view class="cbox">
							<view class="cboxa flexc">
								<image :src="dayimg" class="dayimg"></image>
								<view class="num">{{conuntinfo.dczs}}</view>
							</view>
							<view class="flexcc">
								<view class="cboxb">
									<view class="tit mb5">中餐</view>
									<view class="tit"><text>{{conuntinfo.dcwc}}</text>位</view>
								</view>
								<view class="cboxb">
									<view class="tit mb5">晚餐</view>
									<view class="tit"><text>{{conuntinfo.dcDinner}}</text>位</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 管理员 -->
				<view class="yylists" v-if="checkPermi(['system:reservat:sh'])">
					<view class="yyltab flexcj">
						<view class="left flexc">待审批列表<image :src="listline"></image></view>
						<view class="right" @click="getMoreFn">查看更多 >></view>
					</view>
					<!-- 列表 -->
					<view>
						<y-list type='order' :datalist="list" :wtdt="wtdt" @getDetail='getDetail' :adrlist="adrlist" @getDelFn="getDelFn" @gettypeFn="gettypeFn"></y-list>
					</view>
				</view>
			</template>
			
		</view>
	
	<footers v-if="isfootflag"  :footerindex="footerindex"></footers>
  </view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import self from '@/utils/location.js';
	import yList from "@/components/order/list.vue"
	import notice from "@/components/swiper/notice.vue"
	let { calendar } = require("@/components/lunc-calendar/calendar.js");
	import {getReservatcountl,getReservatList,getReservatDel,getReservatSh,getYydcCont,getCameraVideo,getappCameraVideo,getCameraList,getVideoOpenDz,getVideoCloseDz,} from "@/api/mine/order.js"
	import {getDictionaryFn} from "@/api/mine/register.js"
	import {getNoticeList} from "@/api/common.js"
	import {getRecordDayList} from "@/api/work/check.js"
	import footers from '@/components/footer/footer.vue'
	import config from '@/config'
	const webUrl=config.webUrl
	// #ifdef H5
	import flvjs from 'flv.js';
	// #endif
  export default {
	components:{notice,yList,footers},
	data(){
		return{
			footerindex:'home',
			isfootflag:true,
			navbg:require("@/static/images/navbg.png"),
			headimg:require("@/static/images/home/head.png"),
			htabaimg:require("@/static/images/home/htaba.png"),
			htabbimg:require("@/static/images/home/htabb.png"),
			htabcimg:require("@/static/images/home/htabc.png"),
			htabdimg:require("@/static/images/home/htabd.png"),
			htabeimg:require("@/static/images/home/htabe.png"),
			htabfimg:require("@/static/images/home/htabf.png"),
			htabgimg:require("@/static/images/home/htabg.png"),
			htabhimg:require("@/static/images/home/htabh.png"),
			htabiimg:require("@/static/images/home/htabi.png"),
			htabjimg:require("@/static/images/home/htabj.png"),
			htabkimg:require("@/static/images/home/htabk.png"),
			htablimg:require("@/static/images/home/htabl.png"),
			hbgaimg:require("@/static/images/home/hbga.png"),
			hbgbimg:require("@/static/images/home/hbgb.png"),
			hbgcimg:require("@/static/images/home/hbgc.png"),
			hbgdimg:require("@/static/images/home/hbgd.png"),
			hbgeimg:require("@/static/images/home/hbge.png"),
			hbgfimg:require("@/static/images/home/hbgf.png"),
			hbggimg:require("@/static/images/home/hbgg.png"),
			hbghimg:require("@/static/images/home/hbgh.png"),
			newsimg:require("@/static/images/home/news.png"),
			timeimg:require("@/static/images/home/time.png"),
			dayimg:require("@/static/images/home/day.png"),
			listline:require("@/static/images/order/staff/listline.png"),
			autoplay:false,
			activeColor:'#A7CDF9',
			nactiveColor:'#DADADA',
			backgroundColor: "transparent",
			city:'',
			weather:'',
			temperature:'',
			list:[],
			noticelist:[],
			adrlist:[],
			pageSize: 10,
			pageNum: 1,
			reachflag: false,
			nvaHeight:44,
			marTop:0,//距离顶部的距离
			stubarHeight:0,//
			wtdt:'',
			daytime:'',
			lunar:'',
			weathericon:require("@/static/images/weather/weaionf.png"),
			openimg:require("@/static/images/order/open.png"),
			userId:this.$store.state.user.userId,
			name:this.$store.state.user.nickName,
			startDate:'',
			endDate:'',
			kaTime:'',
			conuntinfo:{},
			workTime:[],
			videoimg:require('@/static/images/order/video.png'),
			videobg:require('@/static/images/order/videobg.png'),
			video:require('@/static/images//video.png'),
			videourl:'',
			tabval:1,
			adridx:0,
			address:'',
			access:[],//道闸
			adrlist:[],//
			browselist:[],
			indexCode:'',
			dzaddress:'',
			dzCode:"",
		}
	},
	onPageScroll(e) {
		var scrollTop = Number(e.scrollTop);
		if (scrollTop > 0) {
			this.backgroundColor = '#0491FD'
		} else {
			this.backgroundColor = 'transparent'
		}
	},
	onUnload() {
		uni.$off('refreshfoodlist')
		uni.$off('refreshdatalist')
		// #ifdef H5
		this.flv_destroy();
		// #endif
	},
	onLoad: function() {
		uni.getSystemInfo({
			success: (e) => {
				this.stubarHeight=Number(e.statusBarHeight);
				this.nvaHeight = Number(e.statusBarHeight)+44;
				this.marTop=692-Number(this.nvaHeight*2)-16;
			}
		})
		uni.$on('refreshfoodlist',(e) => {
			this.getcount();	
		})
		uni.$on('refreshdatalist',(e) => {
			this.reachflag=false;
			this.pageNum=1;
			this.list=[];
			this.getDataFn();
			if(!e||e!='sh'){
				this.getcount();
			}	
		})
		if(checkPermi(['system:camera:list'])){
			this.getCameraList()
		}
		this.init()
		this.getNoticeList()
		this.getcount()
		this.getWeeksDay()
		uni.getSystemInfo({
			success: (e) => {
				this.stubarHeight=Number(e.statusBarHeight);
				this.nvaHeight = Number(e.statusBarHeight)+44;
				this.marTop=692-Number(this.nvaHeight*2)-16;
			}
		})
		
	},
	mounted() {
		// this.getHeightFn()
	},
	onShow() {
		var that=this;
		this.time();
		
		// #ifndef H5
		self.getLocation(function(res){
			if(res==-1){
				that.setflag=true
			}else{
				// that.getAdrinfoFn(res)
				// that.location = `${res.lng},${res.lat}`
				that.city=res.city;
				that.temperature=res.temperature;
				that.weather=res.weather;
				that.weathericon=res.icon;
			}			
		})
		// #endif
	},
	mounted() {
	},
	// 上拉触底加载更多触发事件
	onReachBottom() {
		if (this.reachflag) {
			this.pageNum++
			this.getDataFn()
		}
	},
	methods:{
		checkPermi, checkRole,
		getHeightFn(){
			let query = uni.createSelectorQuery().in(this);
			//需要给黄色区域设置一个id标识，在这里是demo
			query.select('.navbox').boundingClientRect(data => {
				var top=data.top<0 ? -data.top : data.top;
				var stubarHeight=Number(this.stubarHeight);
				if (top <=this.nvaHeight) {
					const opacity = top / 100 // 计算透明度值
					const color = `rgba(4, 145, 253, ${opacity})`
					this.backgroundColor = color // 更新盒子背景颜色
				} else {
					this.backgroundColor = '#00A9F0'
				}
			}).exec();
		},
		getNoticeDet(e){
			this.$tab.navigateTo("/pages/index/noticedetail?id="+e)
		},
		getNoticeFn(e){
			this.$tab.navigateTo("/pages/index/notice")
		},
		//打卡记录
		getClockFn(){
			// this.$tab.navigateTo("/work/pages/clock/setwoek")
			this.$tab.navigateTo("/work/pages/clock/clock")
			// this.$tab.navigateTo("/work/pages/clock/clockin")
		},
		//打卡设置
		getClockSetFn(){
			this.$tab.navigateTo("/work/pages/clock/setswork")
		},
		// 考勤记录
		getClockjlFn(){
			this.$tab.navigateTo("/work/pages/record/clockin")
		},
		// 考勤统计
		getClockcontFn(){
			this.$tab.navigateTo("/work/pages/clock/personnel")
		},
		// 就餐预定
		getEatFn(){
			this.$tab.navigateTo("/work/pages/yyorder/eat")
		},
		// 会议预定
		getMeetFn(){
			this.$tab.navigateTo("/work/pages/yyorder/meetadd")
		},
		//访客记录
		getVistotFn(){
			this.$tab.navigateTo("/work/pages/record/visitor")
		},
		//在线会议
		getYqMeetFn(){
			// var url='https://www.baidu.com'
			this.$tab.navigateTo("/pages/common/webview/index?url="+webUrl)
		},
		//园区食谱
		getYqCookFn(){
			this.$tab.navigateTo("/work/pages/yyorder/menulist")
		},
		//食谱记录
		getYqMenuFn(){
			this.$tab.navigateTo("/work/pages/yyorder/menuRecord")
		},
		// 访客管理
		getLimitFn(){
			this.$tab.navigateTo("/work/pages/yyorder/limit")
		},
		init(){
			// 记录来源
			getDictionaryFn('jluly').then(res=>{
				if(res.code==200){
					this.adrlist = res.data.map(v => {
						return {
							dictLabel: v.dictLabel,
							dictValue: v.dictValue
						}
					})
				}
			})
		},
		getCameraList(){
			// 设备
			var params={
				pageSize:1000,
				pageNo: 1,
			}
			getCameraList(params).then(res=>{
				if(res.code==200){
					var data=res.data.data;
					if(data&&data.access&&data.access.length>0){
						this.access=data.access;
						this.dzaddress=data.access[0].name;
						this.dzCode=data.access[0].indexCode;
						if(checkPermi(['system:camera:video'])){
							this.getCameraVideo()
						}
					}
					if(data&&data.list&&data.list.length>0){
						this.adrlist =data.list;
					}
				}else{
					this.$toast(res.msg)
				}
			}) 
		},
		getCameraVideo(){
			// 设备
			this.videourl='';
			var indexCode=this.dzCode;
			if(this.tabval==2){
				indexCode=this.indexCode
			}
			// #ifdef H5
				getCameraVideo(indexCode).then(res=>{
					if(res.code==200){
						var data=res.data.data;
						if(data){
							this.videourl=data.url;
							// #ifdef H5
							this.flv_destroy()
							this.getLivePlayer()
							// #endif	
						}
					}else{
						this.$toast(res.msg)
					}
				})
			// #endif
			 // #ifdef APP-PLUS
				getappCameraVideo(indexCode).then(res=>{
					if(res.code==200){
						var data=res.data.data;
						if(data){
							this.videourl=data.url;
						}
					}else{
						this.$toast(res.msg)
					}
				}) 
			 // #endif
		},
		getCodeFn(ite){
			this.dzaddress=ite.name;
			this.dzCode=ite.indexCode;
			// 获取直播视频
			this.getCameraVideo()
		},
		getOpenFn(){
			var that=this
			if(this.isloading){
				return
			}
			this.isloading=true;
			var params={
				equipmentName:this.dzaddress
			}
			getVideoOpenDz(params).then(res=>{
				this.isloading=false
				if(res.code==200){
					this.$toast(res.msg)
				}
				// this.getrefreshData()
			}).catch(error=>{
				this.isloading=false
			})
		},
		getCloseFn(){
			var that=this
			if(this.isloading){
				return
			}
			this.isloading=true;
			var params={
				equipmentName:this.dzaddress
			}
			getVideoCloseDz(params).then(res=>{
				this.isloading=false
				if(res.code==200){
					this.$toast(res.msg)
				}
				// this.getrefreshData()
			}).catch(error=>{
				this.isloading=false
			})
		},
		getLivePlayer() {
		    uni.showLoading({
		        mask: true,
		        title: 'loading...'
		    });
			if(this.flvPlayer){
				this.flvPlayer.flv_destroy();
			}
		    // 生成需要的video 组件
		    // var player = document.getElementById('videoElement');
		    var player = document.createElement('video');
		    player.id = 'video';
		    player.style = 'width: 100%;height: 211px';
		    player.enableProgressGesture = this.enableProgressGesture;
		    player.controls = this.controls;
		    player.muted = true;
		    player.showCenterPlayBtn = this.showCenterPlayBtn;
		    player.showPlayBtn = this.showPlayBtn;
		    player.showFullscreenBtn = this.showFullscreenBtn;
		    player.x5VideoPlayerType = 'h5-page';
		    player.x5VideoPlayerFullscreen = 'false';
		    player.autoplay = this.autoplay; // 以上均为 video标签的属性配置
			var myPlayer= document.getElementById('myPlayer')
			// console.log(myPlayer.childNodes,1)
			myPlayer.innerHTML=''
			myPlayer.appendChild(player);
		    if (flvjs.isSupported()) {
		        this.flvPlayer = flvjs.createPlayer({
		            type: 'flv',
		            isLive: true, //<====直播的话，加个这个
		            url: this.videourl//直播流地址
		        });
		        this.flvPlayer.attachMediaElement(player);
		        this.flvPlayer.load(); //加载
		        
		        // setTimeout(() => {
		        //     var player2 = document.createElement('video');
		        //     player2.play();
		        // }, 2000);
		        this.player = player;
		        this.flvPlayer.on(flvjs.Events.ERROR, (errorType, errorDetail, errorInfo) => {
		            console.log('播放错误',errorType,errorDetail,errorInfo);
		            this.flv_destroy();
		            
		        });
		        uni.hideLoading();
		    }                   
		},
		flv_start() {
		    //开始
		    console.log(this.player);
		    this.player.play();
		},
		flv_pause() {
		    //暂停
		    this.player.pause();
		},
		flv_destroy() {
			// console.log(23)
		    //停止
			if(this.flvPlayer){
				this.flvPlayer.pause();
				this.flvPlayer.unload();
				this.flvPlayer.detachMediaElement();
				this.flvPlayer.destroy();
				this.flvPlayer = null;
				this.player=null;
			}
		    
		},
		flv_seekto() {
		    // 复制其他人的  我还没用这个
		    this.player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
		}, 
		getNoticeList(){
			getNoticeList().then(res=>{
				if(res.code==200){
					this.noticelist=res.rows
				}
			})
		},
		getMoreFn(){
			this.$tab.navigateTo("/pages/order/list")
		},
		// 打卡记录
		getmMoreFn(){
			this.$tab.navigateTo("/work/pages/yyorder/eatlist")
		},
		getmClockFn(){
			this.$tab.navigateTo("/work/pages/record/clockin")
		},
		getDelFn(id){
			var that=this;
			getReservatDel(id).then(res=>{
				if(res.code==200){
					that.$toast('删除成功')
					setTimeout(function(){
						that.reachflag=true;
						that.pageNum=1;
						that.list=[];
						that.getDataFn();
						that.getcount();
					},1500)
					
				}else{
					that.$toast(res.msg)
				}
			})
		},
		gettypeFn(ite){
			var that=this;
			var params={
				reservatId:ite.id,
				visitType:ite.type
			}
			getReservatSh(params).then(res=>{
				if(res.code==200){
					that.$toast('审核成功')
					setTimeout(function(){
						that.reachflag=true;
						that.pageNum=1;
						that.list=[];
						that.getDataFn();
						that.getcount();
					},1500)
					
				}else{
					that.$toast(res.msg)
				}
			})
		},
		time() {
			var date = new Date();
			var y = date.getFullYear();
			var m = date.getMonth() + 1;
			var d = date.getDate();
			let lunar = calendar.solar2lunar(y, m, d); //农历
			this.lunar=lunar.IMonthCn+lunar.IDayCn;
			this.daytime=(m < 10 ? ('0' + m) : m)+'月'+(d < 10 ? ('0' + d) : d)+"日";
			// var h = date.getHours();
			// var min = date.getMinutes();
			// var s = date.getSeconds();
			// var week = date.getDay(); //获取当前星期X(0-6,0代表星期天)
			// var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
			var yearStr = y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d)
			// var timeStr = (h < 10 ? ('0' + h) : h) + ':' + (min < 10 ? ('0' + min) : min) + ':' + (s < 10 ? (
			// 	'0' + s) : s);
			this.kaTime = yearStr
		},
		getWeeksDay(){
			var date = new Date();
			var y = date.getFullYear();
			var m = date.getMonth();
			var d = date.getDate();
			var week = date.getDay(); //获取当前星期X(0-6,0代表星期天)
			var startDate,endDate
			if(week==0){
				startDate=new Date(y,m,d-week-6)
				endDate=new Date(y,m,d-week)
			}else{
				startDate=new Date(y,m,d-week+1)
				endDate=new Date(y,m,d-week+7)
			}
			this.startDate=this.formatDate(startDate)
			this.endDate=this.formatDate(endDate)
			this.getDataFn()
			// console.log(this.formatDate(startDate),this.formatDate(endDate))
		},
		formatDate(date){
			const year = date.getFullYear();
			const month = ('0' + (date.getMonth() + 1)).slice(-2);
			const day = ('0' + date.getDate()).slice(-2);
		 
			return year + '-' + month + '-' + day;
		},
		getcount(){
			getYydcCont().then(res=>{
				if(res.code==200){
					this.conuntinfo=res.data
				}else{
					this.$toast(res.msg)
				}
			})
		},
		getDetail(data){
			this.$tab.navigateTo('/pages/order/staffcode?type=look&id='+data)
		},
		getClockDetailFn(){
			var obj={
				userId:this.userId,
				recordDate:this.kaTime
			}
			this.$tab.navigateTo('/work/pages/record/detail?data='+encodeURIComponent(JSON.stringify(obj)))
		},
		getDataFn(){
			var params={
				pageSize:this.pageSize,
				pageNum: this.pageNum,
			}
			
			if(!checkRole(['administrators'])){
				// 个人
				params.userId=this.userId;
				params.startTime=this.startDate;
				params.endTime=this.endDate;
				getRecordDayList(params).then(res=>{
					if (res.code == 200) {
						var data=res.data;
						var rows=[];
						this.workTime=data.workTime.split('-')
						if(data.rlData&&data.rlData.length){
							rows=data.rlData;
						}
						if (rows.length < this.pageSize) {
							this.reachflag = false
							this.wtdt = '到底了~';
						} else {
							var num = parseInt(rows.length) + parseInt(this.pageSize) * parseInt(this.pageNum -
								1)
							if (num < res.total) {
								this.reachflag = true
								this.wtdt = '上拉加载更多'
							} else {
								this.reachflag = false
								this.wtdt = '到底了~';
							}
						}
						if (this.pageNum == 1) {
							this.list = rows;
						} else {
							this.list = this.list.concat(rows)
						}
					} else {
						this.$toast(res.msg)
					}
				})
			}else{
				// 管理员
				params.pageSize=3;
				getReservatList(params).then(res=>{
					if(res.code==200){
						if (res.rows.length < this.pageSize) {
							this.reachflag = false
							this.wtdt = '到底了~';
						} else {
							var num = parseInt(res.rows.length) + parseInt(this.pageSize) * parseInt(this.pageNum -	1)
							if (num < res.total) {
								this.reachflag = true
								this.wtdt = '上拉加载更多'
							} else {
								this.reachflag = false
								this.wtdt = '到底了~';
							}
						}
						if (this.pageNum == 1) {
							this.list = res.rows;
						} else {
							this.list = this.list.concat(res.rows)
						}
					}else{
						this.$toast(res.msg)
					}
				}) 
			}	
		},
	},
	
  }
</script>

<style lang="scss" scoped>
// .navbox{
// 	.navbg{width: 100%;height: 692rpx;position: fixed;left: 0;right: 0;top: 0;z-index: 1;}	
// }
.navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;	}
.navbg{width: 100%;height: 692rpx;}	
.navleft{padding-left: 12rpx;
		view{font-weight: bold;font-size: 26rpx;color: #FFFFFF;line-height: 36rpx;}
	}
	.navright{width: 40rpx;height: 40rpx;}
.yymain{flex: 1;z-index: 2;position: relative;padding: 0 32rpx;}
// 时间
.yqtop{margin-bottom: 16rpx;
	.yqtopl{
		.tit{font-weight: bold;font-size: 30rpx;color: #FFFFFF;}
	}
	.yqtopr{
		.wimg{width: 34rpx;height: 34rpx;}
	}
	.txt{font-weight: 500;font-size: 26rpx;color: #FFFFFF;}
}
.yqcard{background: #FFFFFF;margin-bottom: 20rpx;box-shadow: 0px 0px 6rpx 0px #DEDEDE;padding: 0 26rpx;border-radius: 14rpx;
	.yqctop{padding: 28rpx 0;
		.yqctopl{flex: 1;overflow: auto;
			image{width: 50rpx;height: 50rpx;border-radius: 50%;margin-right: 18rpx;}
			view{font-weight: 500;font-size: 26rpx;color: #161616;}
		}
		.yqctopr{position: relative;min-width: 118rpx;height: 48rpx;background: #DFEEFF;border-radius: 24rpx;
			image{width: 18rpx;height: 22rpx;margin-right: 10rpx;}
			.tit{font-weight: bold;font-size: 22rpx;color: #0391FD;}
			.cir{width: 14rpx;height: 14rpx;background: #FF5161;border-radius: 6rpx;right: 0rpx;top: -2rpx;position: absolute;
			}
		}
	}
	.yqcbox{border-top: 2rpx solid #E6E6E6;display: flex;flex-wrap: wrap;padding: 16rpx 0 14rpx;
		.yqcba{display: flex;flex-direction: column;align-items: center;padding: 24rpx 0;width: 25%;
			.aimg{width: 62rpx;height: 62rpx;display: flex;align-items: center;justify-content: center;margin-bottom: 24rpx;
				.imga{width: 60rpx;height: 60rpx;}
				.imgb{width: 54rpx;height: 62rpx;}
				.imgc{width: 60rpx;height: 58rpx;}
				.imgd{width: 58rpx;height: 62rpx;}
				.imge{width: 62rpx;height: 56rpx;}
				.imgf{width: 56rpx;height: 60rpx;}
				.imgg{width: 56rpx;height: 62rpx;}
				.imgh{width: 54rpx;height: 60rpx;}
				.imgi{width: 50rpx;height: 60rpx;}
				.imgj{width: 60rpx;height: 48rpx;}
				.imgk{width: 62rpx;height: 62rpx;}
			}
			.atit{font-weight: 500;font-size: 22rpx;color: #161616;}
		}
	}
}
// 统计
.yqcont{padding: 16rpx;background: #FFFFFF;box-shadow: 0px 0px 6rpx 0px #DEDEDE;border-radius: 14rpx;display: flex;justify-content: space-between;box-sizing: border-box;
	&.yqconta{padding-bottom: 0;min-height: 244rpx;}
	.cbgimg{width: 100%;height: 100%;}
	.cbox{position: absolute;left: 0;right: 0;top: 0;bottom: 0;box-sizing: border-box;padding: 16rpx 24rpx;
		.tit{font-weight: bold;font-size: 18rpx;color: #6A7582;
			text{font-size: 30rpx;color: #32415F;font-weight: bold;margin-right: 10rpx;}
		}
	}
	.dayimg{width: 76rpx;height: 44rpx;flex: 0 0 auto;}
	.num{font-weight: bold;font-size: 30rpx;color: #0A84FF;font-style: italic;flex: 1;text-align: center;}
	.cboxb{width: 50%;position: relative;padding-left: 24rpx;box-sizing: border-box;
		&::after{width: 2rpx;height: 28rpx;background: #AEB9CB;content: '';position: absolute;right: 0;top: 50%;margin-top: -14rpx;}
		&:nth-of-type(2n){
			&::after{display: none;}
		}
		.tit{
			text{margin-right: 8rpx;font-size: 20rpx;}
		}
	}
	.yqcl{flex: 1;display: flex;flex-wrap: wrap;
		.yqcla{width: 200rpx;height: 98rpx;position: relative;margin:0 16rpx 16rpx 0;
		}	
	}
	.yqcr{
		position: relative;width: 218rpx;height:210rpx;flex: 0 0 auto;
		.cbox{padding: 0;padding-top: 18rpx;}
		.cboxa{margin-bottom: 16rpx;padding-left: 24rpx;	}
	}
	.yqcb{width: 100%;height: 98rpx;position: relative;
		.cbox{padding-left: 0;
			.cboxb{min-width: 216rpx;width: auto;
				.tit{padding-left: 10rpx;display: flex;align-items: center;
					.tita{flex:0 0 auto;}
				 text{margin-left: 26rpx;}
				}
			}
		}
	}
}
// 列表
.yylists{width: 100%;margin: 42rpx auto 0;
	.yyltab{margin-bottom: 28rpx;
		.left{font-weight: bold;font-size: 15px;color: #161616;
			image{width: 110rpx;height: 14rpx;margin-left: 16rpx;}
		}
		.right{font-size: 500;font-size: 22rpx;color: #AAAAAA;}
	}
}

// 视频
.vidbox{overflow: hidden;
	border-radius: 14rpx;box-sizing: border-box;width:100%;position: relative;display: flex;align-items: center;overflow: auto;flex-wrap: nowrap;
	video{width: 100%;height: 450rpx;flex: 1;}
	.control{width: 210rpx;flex: 0 0 auto;background: #FFFFFF;border-radius: 14rpx;height: 450rpx;box-shadow: 0px 0px 3px 0px #DEDEDE;padding: 18rpx 0 4rpx;box-sizing: border-box;display: flex;flex-direction: column;margin-left: 16rpx;
		.contop{font-weight: bold;font-size:26rpx;color: #161616;margin-bottom: 10rpx;flex: 0 0 auto;
			image{width: 26rpx;height: 20rpx;margin-right: 12rpx;}
		}
		.conbox{
			mask:linear-gradient(#fff,#fff,#fff,transparent);
			-webkit-mask: linear-gradient(#fff,#fff,#fff,transparent);
		}
		.contit{font-size: 22rpx;height: 48rpx;line-height: 48rpx;text-align: center;
color: #161616;position: relative;
		&.act{font-weight: bold;color: #FFFFFF;}
		}
		.videobg{position: absolute;left: 0;right: 0;top: 0;bottom: 0;width: 100%;height: 48rpx;z-index: -1;}
	}
}
.openbox{margin-bottom: 36rpx;
	.btns{width: 320rpx;height: 98rpx;border-radius: 14rpx;display: flex;align-items: center;justify-content: center;
		font-weight: bold;font-size: 28rpx;color: #FFFFFF;
		image{width: 24rpx;height: 20rpx;margin-right: 14rpx;}
		
		&.bga{background: #0391FD;}
		&.bgb{background: #58CA5C;}
	}
}
</style>