yn_hxy_web/hxy-web/js/wireManager/attendance/attendanceDetail.js

var table,form,layer,laydate,element;
var currentDate = new Date();
var tabList=[];
var month = currentDate.getMonth() + 1;//当前第几月
var year = currentDate.getFullYear();
layui.use(['form','layer','table','laydate','element'], function () {
    table = layui.table;
    form = layui.form;
    layer = layui.layer;
    laydate = layui.laydate;
    element = layui.element;
    
    // 渲染时间选择器
    laydate.render({
        elem:'#month', //指定元素  元素选择器
        type:'month',  //选择时间类型 可选值:year(年) month(年月)  date(年月日)  time(时分秒)  datetime(年月日时分秒)
        trigger:'click',
        format: 'yyyy-MM',
        btns:['now','confirm'], //选择框右下角显示的按钮 清除-现在-确定
        value: formatCurrentMonth(), // 如果你想预设当前日期为选中状态
        done: function (value, date) {//时间回调
            console.log(date)
            init(date.year,date.month);
        }
    });
    
    function formatCurrentMonth() {
        var date = new Date();
        var month = date.getMonth() + 1; // 注意月份是从0开始的，所以加1
        return date.getFullYear() + '-' + (month < 10 ? '0' + month : month);
    }

    //监听Tab切换，以改变地址hash值
    // element.on('tab(projectTab)', function(data){
    //     console.log(data)
    //     console.log(tabList[data.index])
    //     // tabIndex = data.index;
    //     getView()
    // });
});
 
 
function setData(data){
	$("#username").text(data.data.userName);
	$("#tel").text(data.data.tel);
	
	$("#allMake").text(data.data.allMake);
	$("#oneMake").text(data.data.oneMake);
	$("#twoMake").text(data.data.twoMake);
	$("#special").text(data.data.special);
	$("#makeMonth").val(data.data.makeMonth);
	
	getView(data)
}


function getView(data){
	var oneMakeList = data.data.oneMakeList;
    $("#firstViewBox").html('');
    let html1 = ``;
    for (let i = 0;i < oneMakeList.length;i++) {
		var color;
		var proNameHtml;
		var height;
		var imgHeight;
		if(oneMakeList[i].makeType == "0"){
			//巡视计划内
			color = "#52C1F5";
			proNameHtml = ""
			height = "220px"
			imgHeight = "210px";
		}else{
			//巡视计划外
			color = "#FF9900";
			proNameHtml = `
				<div class="viewFooter">
				    <i class="layui-icon">&#xe637;</i>
				    ${ oneMakeList[i].proName }
				</div>
			`;
			height = "196px";
			imgHeight = "186px";
		}
		var makeTime = oneMakeList[i].makeTime;
		if(makeTime == '' || makeTime == null || makeTime == 'null'){
			makeTime = '无数据';
		}
        html1+= `<div class="viewBox">
                <div class="viewHeader" style="background-color: ${color};">
                    <img src="../../../image/dataIcon3.png" alt="">
                    <span>${oneMakeList[i].gtName}</span>
                </div>
                <div class="viewContent" style="height: ${ height }">
                    <img src="../../../image/viewImg.jpg" style="height: ${ imgHeight }" alt="">
                </div>
                <div class="viewFooter">
                    <i class="layui-icon">&#xe637;</i>
                    ${ makeTime }
                </div>
				${ proNameHtml }
            </div>`;
    }
    $("#firstViewBox").append(html1);

    var twoMakeList = data.data.twoMakeList;
    $("#secondViewBox").html('');
    let html2 = ``;
    for (let i = 0;i < twoMakeList.length;i++) {
        var color;
        var proNameHtml;
		var height;
		var imgHeight;
        if(oneMakeList[i].makeType == "0"){
        	//巡视计划内
        	color = "#52C1F5";
        	proNameHtml = "";
        	height = "220px";
			imgHeight = "210px";
        }else{
        	//巡视计划外
        	color = "#FF9900";
        	proNameHtml = `
        		<div class="viewFooter">
        		    <i class="layui-icon">&#xe637;</i>
        		    ${ twoMakeList[i].proName }
        		</div>
        	`;
        	height = "196px";
			imgHeight = "186px";
        }
		var makeTime = twoMakeList[i].makeTime;
		if(makeTime == '' || makeTime == null || makeTime == 'null'){
			makeTime = '无数据';
		}
        html2+= `<div class="viewBox">
                <div class="viewHeader" style="background-color: ${color};">
                    <img src="../../../image/dataIcon3.png" alt="">
                    <span>${twoMakeList[i].gtName}</span>
                </div>
                <div class="viewContent" style="height: ${ height }">
                    <img src="../../../image/viewImg.jpg" style="height: ${ imgHeight }" alt="">
                </div>
                <div class="viewFooter">
                    <i class="layui-icon">&#xe637;</i>
					${ makeTime }
                </div>
        		${ proNameHtml }
            </div>`;
    }
    $("#secondViewBox").append(html2);

    spMakeList = data.data.spMakeList;
    $("#specialViewBox").html('');
    let html3 = ``;
    for (let i = 0;i < spMakeList.length;i++) {
        html3+= `<div class="viewBox">
                <div class="viewHeader" style="background-color: #73A0FA;">
                    <img src="../../../image/dataIcon3.png" alt="">
                    <span>${spMakeList[i].makeTime}</span>
                </div>
                <div class="viewContent" style="height: 196px">
                    <img src="../../../image/viewImg.jpg" style="height: 186px" alt="">
                </div>
                <div class="viewFooter">
                    <i class="layui-icon">&#xe637;</i>
                    ${ spMakeList[i].makeTime }
                </div>
				<div class="viewFooter">
				    <i class="layui-icon">&#xe637;</i>
				    ${ spMakeList[i].proName }
				</div>
            </div>`;
    }
    $("#specialViewBox").append(html3);
    initTable(data.data.spDateList)
}
 
/**
 * 初始化数据
 */
function initTable(spDateList){
	// spDataList[i].currentDay
	var titleHtml = "";
	var contentHtml = "";
	for(var i = 0; i < spDateList.length; i++){
		
		titleHtml += `<span style="display:inline-block;width:100px;height:30px;text-align: center;line-height: 30px;border: 0.5px solid #D7D7D7;background-color: #F2F2F2;">
							${ spDateList[i].currDay }
						</span>`
		contentHtml += `<span style="display:inline-block;width:100px;height:30px;text-align: center;line-height: 30px;border: 0.5px solid rgba(0,0,0,0)">
							${ spDateList[i].isAtt }
						</span>`
	}
	$("#title").append(titleHtml);
	$("#content").append(contentHtml);
}


function normalHideDiv(){
	$(".special").css("display", "none")
}
function specialHideDiv(){
	$(".normal").css("display", "none")
}