工作笔记---巡检记录

以下是工作中一些思路实现的笔记，业务需求是：

1、简易日历

2、质押物提交后的一天开始到当前系统时间之间才可以提交质押物

3、没有提交质押物的日期里面的图片以灰色图片站位，已经提交质押物的日期里面的图片以红色图片站位

4、图片点击之后可以出现modal，modal中需要有图片轮播，需要前端删除，后端删除，上传图片，图片上传限制

经验分享：

a、后端返回给前端的数据可能比较乱，这个时候需要前端写一个适配器函数，也就是把后端的数据进行转换成前端某一个插件适用的数据结构。适配器函数很好用哦~在工作的其他地方都可以用到，有了适配器函数，后端无论传什么样的数据结构给前端，前端都能够轻松应对！

b、点击日历上的图片显示modal且modal中有图片轮播图片预览，这个效果实现的思路是，日历加载完后请求后端数据，把日历上对应的日期的dom上加pic属性，这个属性里面存图片数组的字符串形式，拿到数据后再把数据序列化成数组对象，或者对象放在图片轮播上，和图片预览上

如需转载请注明出处！

/**
* @Author Mona
* @Date 2016-12-23
* @description 巡检记录
*/

/**
* @适用于whale 项目的日历控件
* @param string selector 为想实例化日历控件的dom容器
*/

//是否是监管方
var role_info = new Role();
var role_id = role_info.getRoleId();
var is_jg_operator = role.compareTo(role_id,role["jg_operator"]);


function WhaleCalendar(options){
        var _this = this;
        _this.selector = $(options.selector);
        _this.the_month = $(_this.selector).find('[role="the-month"]');//左上角年
        _this.the_year = $(_this.selector).find('[role="the-year"]');//左上角月

        _this.prev_year = $(_this.selector).find('[role="prev-year"]');//上一年
        _this.next_year = $(_this.selector).find('[role="next-year"]');//下一年

        _this.prev_month = $(_this.selector).find('[role="prev-month"]');//上一月
        _this.next_month = $(_this.selector).find('[role="next-month"]');//下一月
        _this.peldge_date = options.peldge_date

        _this.IsLeapYear = function(year){
            if((year%400 == 0)||(year%4==0 && year%100!=0)){
                return true;
            }
            return false;
        }

        _this.prev_year.on('click',function(){
            _this.prevYear();
        })
        _this.next_year.on('click',function(){
            _this.nextYear();
        })
        _this.prev_month.on('click',function(){
            _this.prevMonth();
        })
        _this.next_month.on('click',function(){
            _this.nextMonth();
        })

        _this.init();

}

WhaleCalendar.prototype = {
    init:function(){
        var _this = this;
        _this.renderTable();
    },
    createCalendar:function(year,month,date){
        var _this = this;
        var d = new Date();
        var cur_year = '';
        var cur_mon = '';
        var cur_date = '';
        if(!year || year <= 0){
            cur_year = d.getFullYear();  // 年份
        }else{
            cur_year = year;
        }

        if(!month || month <= 0){
            cur_mon = d.getMonth();  // 月份
        }else{
            cur_mon = month-1;
        }

        if(!date || date<=0){
            cur_date = d.getDate();  // 日期
        }else{
            cur_date = date;
        }
        //默认年月
        var my_year = cur_year;
        var my_month = cur_mon+1;        
        _this.the_year.text(my_year);
        _this.the_month.text(my_month);

        var month_days = new Array(31,28+(_this.IsLeapYear(d.getFullYear())),31,30,31,30,31,31,30,31,30,31); // 月份天数数组
        var month_firstday_date = new Date(cur_year,cur_mon,1);
        var monthDays = month_days[cur_mon];
        var monthFirstday = month_firstday_date.getDay(); // 月份的第一天是星期几
        var lines = Math.ceil((monthDays+monthFirstday)/7);  // 表格所需行数
        var calendarBody = "";
        var time = new Date().getTime();
        for(var i=0;i<lines;i++){
            calendarBody+="<tr class='line'>";
            for(var j = 0;j<7;j++){
                idx = i*7+j; //  单元格自然序列号
                if(i == 0 && idx < monthFirstday){
                    calendarBody+="<td class='empty'></td>";
                }else if(idx < monthDays+monthFirstday){
                    var date = idx+1-monthFirstday;
                    var my_cur_date = my_year+"/"+my_month+"/"+date;
                    var is_mid = ((new Date(Date.parse(_this.peldge_date))-new Date(Date.parse(my_cur_date)))<=0) &&(new Date()-(new Date(Date.parse(my_cur_date)))>=0);

                    var monkey_icon_cls = is_mid?' common-img canlander-mk-icon':'';
                    if(date == cur_date && cur_mon == d.getMonth() && cur_year == d.getFullYear()){
                        calendarBody+="<td class='today'><div class='img-box"+monkey_icon_cls+"' id='imgbox"+time+i+j+"today' data-is-empty='1' data-cur-date='"+my_year+"/"+my_month+"/"+date+"'></div>";
                        calendarBody+="<p class='cur-day'><span class='y-day'>"+date+"日</span></p></td>";
                    }else{
                        calendarBody+="<td><div class='img-box"+monkey_icon_cls+"' id='imgbox"+time+i+j+"' data-is-empty='0' data-cur-date='"+my_year+"/"+my_month+"/"+date+"'></div>";
                        calendarBody+="<p class='whale-day'><span class='y-day'>"+date+"日</span></p></td>";
                    }
                }else{
                    calendarBody+="<td class='empty'></td>";
                }
            }
            calendarBody+="</tr>";
        }

        
        return calendarBody;
    },
    prevMonth:function(){
        var _this = this;
        var theMonth = eval(_this.the_month.html());
        var theYear = eval(_this.the_year.html());
        if(theMonth<=1){
            _this.the_month.html("12");
            if(theYear<=1){
                _this.the_year.html(1);
            }else{
                _this.the_year.html(theYear-1);
            }
        }else{
            _this.the_month.html(theMonth-1);
        }
        cur_year = eval(_this.the_year.html());
        cur_mon = eval(_this.the_month.html());
        _this.renderTable(cur_year,cur_mon)
    },
    nextMonth:function(){
        var _this = this;
        var theMonth = eval(_this.the_month.html());
        if(theMonth >= 12){
            var theYear = eval(_this.the_year.html());
            if(theYear>=2200){
                _this.the_year.html(2200);
            }else{
                _this.the_year.html(eval(theYear+1));
            }
            _this.the_month.html(1);
        }else{
            _this.the_month.html(eval(theMonth+1));
        }
        cur_year = eval(_this.the_year.html());
        cur_mon = eval(_this.the_month.html());
        _this.renderTable(cur_year,cur_mon)
    },
    prevYear:function(){
        var _this = this;
        var theYear = eval(_this.the_year.html());
        if(theYear <= 1){
            _this.the_year.html(1);
        }else{
            _this.the_year.html(eval(theYear-1));
        }
        cur_year = eval(_this.the_year.html());
        cur_mon = eval(_this.the_month.html());
        _this.renderTable(cur_year,cur_mon)
    },
    nextYear:function(){
        var _this = this;
        var theYear = eval(_this.the_year.html());
        if(theYear >= 2200){
            _this.the_year.html(2200);
        }else{
            _this.the_year.html(eval(theYear+1));
        }
        cur_year = eval(_this.the_year.html());
        cur_mon = eval(_this.the_month.html());
        _this.renderTable(cur_year,cur_mon)  
    },
    renderTable:function(year,month){
        var _this = this;
        if(year&&month){        
            _this.selector.find("table tr").not(".header").remove();
            _this.selector.find("table").append(_this.createCalendar(year,month));  
            _this.selector.find("table tr").not(".header").hide().fadeIn(500);       
        }else{
            _this.selector.find("table").append(_this.createCalendar());
        }

        _this.selector.find("table tr").find('td:eq(0)').css('background-color','#fafafa');
        _this.selector.find("table tr").find('td:eq(6)').css('background-color','#fafafa');

        reRenderData();
        
        $('.img-box').on('click',function(){//点击日历中的图片
            var is_empty_status = $(this).attr('data-is-empty');
            var target_id = $(this).attr('id');
            var cur_date = $(this).attr('data-cur-date');

            //开始时间转换
            var string_date = formatDateToString(cur_date);
            //结束 时间转换
            
            var cur_pics = $(this).attr('data-pics');
            var parse_pics = null;
            var is_mid = (new Date(Date.parse(window.sessionStorage["pledgeDate"]))-new Date(Date.parse(cur_date)))<=0;
            console.debug('质押物提交的时间');
            console.debug(new Date(Date.parse(cur_date)));
            if(!is_mid){
                return 
            }
            if(typeof cur_pics !=='undefined'){
                parse_pics = JSON.parse(cur_pics);
            }else{
                parse_pics = 'empty_pic';
            }
            
            
            console.debug('图片对象')
            console.debug(parse_pics);
            var imgModal = viewImgObj({target:target_id,is_empty:is_empty_status,date:string_date,pics:parse_pics});
            imgModal.Modal({target:target_id,is_empty:is_empty_status,date:string_date,pics:parse_pics});
        });       
    }
}


/**
* 根据返回的数据渲染
*/

function formatDateToString(date){
    var cur_date_arr = date.split('/');
    var _this_year_data = cur_date_arr[0];
    var _this_mouth_data = cur_date_arr[1];
    var _this_day_data = cur_date_arr[2];
    if(_this_mouth_data.length<2){
        _this_mouth_data = '0'+_this_mouth_data
    }

    if(_this_day_data.length<2){
        _this_day_data = '0'+_this_day_data
    }

    var _this_cur_date = _this_year_data+_this_mouth_data+_this_day_data;

    return _this_cur_date
}

/*20160102
2016/01/02*/
function formatDateAsRules(date) {
    if(date.length<1){
        return 
    }
    date = date.toString();
    var _this_cur_year = date.substring(0,4);
    var _this_cur_mouth = date.substring(4,6);
    var _this_cur_day = date.substring(6,8);

    if(_this_cur_mouth.length==2){
        var mouth_arr = _this_cur_mouth.split('');
        if(mouth_arr[0]==0){
            _this_cur_mouth = mouth_arr[1];
        }
        
    }
    if(_this_cur_day.length==2){
        var day_arr = _this_cur_day.split('');
        if(day_arr[0]==0){
            _this_cur_day = day_arr[1];
        }  
    }
    return (_this_cur_year+'/'+_this_cur_mouth+'/'+_this_cur_day)
}

function reRenderData(){

    function get_echo_data(){ 
        var my_the_year = $('[role="the-year"]').text();
        var my_the_month = $('[role="the-month"]').text();
        var cur_date = my_the_year+'/'+my_the_month+'/'+'1';
        
        //时间格式转换开始
        var string_date = formatDateToString(cur_date)
        //结束时间格式转换

        var echo_data = null;      
        var param = {firstDate:string_date,count:'31',pledgeBusinessKey:window.sessionStorage["businessKey"]}

        //获取巡检记录回显记录
        HttpUtils.get_records_data(param,function(data){
            console.debug('回显巡检记录数据');
            console.debug(data);
            echo_data = data.data;
        })
        return configuratorEchoData(echo_data);
    }

    var my_data = get_echo_data();
    var records_data = my_data.had_records_data;
    
    console.debug('纯净的回显数据');
    console.debug(my_data)



    function rerenderCalendar(){
        var calendar_date = $('[data-cur-date]');
        $.each(calendar_date,function(i,item){
            var cur_dom = $(item);
            var td_date = new Date($(item).attr('data-cur-date'));
            $.each(records_data,function(j,info_date){
                var cur_echo_date = info_date.date //formatDateAsRules(info_date.date)
                var echo_date = new Date(cur_echo_date);
                var echo_pics = info_date.pics;

                if((td_date-echo_date)==0 && echo_pics.length>0){//有上传图片的记录则给他一个点亮的状态
                    if(cur_dom.hasClass('canlander-mk-icon')){
                        cur_dom.removeClass('canlander-mk-icon').addClass('logo-red-icon');
                    }    
                    console.debug('时间：'+cur_echo_date)
                    echo_pics = JSON.stringify(echo_pics);
                    cur_dom.attr('data-pics',echo_pics); 
                }
                if((td_date-echo_date)==0 && echo_pics.length==0){
                    if($(cur_dom).hasClass('logo-red-icon')){
                        $(cur_dom).removeClass('logo-red-icon').addClass('canlander-mk-icon');
                        $(cur_dom).removeAttr('data-pics');
                    }
                }
            })
        })
    }
    rerenderCalendar();
}


/**
* @param object 
* param.target 操作的具体日期的那个缩略图
* param.is_empty 当前上传的缩略图对应的日期中巡检记录是否为空
* param.date 当前巡检日期
*/

function scrollLeftcc(target,width){
    var pic_list_dom = $(target).parent().find('[data-role="pic-list"]');
    var single_width = width;
    if(parseInt(pic_list_dom.css('left'))==0){
        return 
    }
    pic_list_dom.animate({'left':'+='+single_width+'px'},300)
}

function scrollRight(target,width){
    var single_width = width;
    var pic_list_dom = $(target).parent().find('[data-role="pic-list"]');
    var list_len = pic_list_dom.find('li').length;
    if(parseInt(pic_list_dom.css('left'))==-((list_len-1)*single_width)||list_len==0){
        return 
    }
    pic_list_dom.animate({'left':'-='+single_width+'px'},300)
}


function viewImgObj (settings){//巡检日期   
    var upload_file_dom = '';
    var file_box = []; 
    var pics = (settings&&settings.pics);
    function picModal(options){//显示modal
        var _this = this;        
        var target = (options&&options.target);
        var is_empty = parseInt(options&&options.is_empty)?true:false;
        var date = (options&&options.date);
        var size = (options&&options.size)||'0';
        var cur_pics = (options&&options.pics);
        var cur_pic_len = (cur_pics!=='empty_pic')?cur_pics.length:0;

        var h = '';
        h+='<div id="view-records" class="modal fade " tabindex="-1" style="display: none;" aria-hidden="true">';
        h+='<div class="modal-backdrop fade"></div>';
        h+='<div class="modal-dialog " style="z-index:99999">';
        h+='<div class="modal-content view-records-content">';
        h+='<div class="modal-header">';
        h+='<span  class="close" data-dismiss="modal">×</span>';
        h+='<h4 class="blue bigger">查看巡检记录</h4>';
        h+='</div>';

        h+='<div class="modal-body">';

        var carousel = '<div class="my-carousel-box" data-role="carousel"><span class="left" data-role="left" onclick="javascript:scrollLeftcc(this,200)"> &lt; </span><div class="carousel-box"><ul id="my-carousel" class="my-carousel '+(is_jg_operator?'jg-handlable':'')+'" data-role="pic-list"></ul></div><span class="right" data-role="right" onclick="javascript:scrollRight(this,200)"> &gt; </span></div>';
        var thumbnail_img = '<div class="my-thumbnail-box"><ul id="my-thumbnail" class="my-thumbnail"></ul></div>';
        var tip_info = is_jg_operator?'<span class="tip-info" id="tip-info">'+cur_pic_len+'/5</span>':'';
        var upload_img = is_jg_operator?'<span class="upload-file"><b data-role="upload-file">上传图片</b><input type="file" data-role="upload"></span>':'';
        var submit_file = is_jg_operator?'<div class="clearfix"><span class="btn btn-primary btn-sm pull-right" data-role="submit-file">提交</span></div>':'';
        h+=carousel+thumbnail_img+upload_img+tip_info+submit_file;

        h+='</div>';
        h+='</div>';
        h+='</div>';
        h+='</div>';

        if($('#view-records').length>0){
            $('#view-records').remove();
        }
        $('body').append(h);
        var cur_view_pic_modal = $('#view-records');
        var carousel_dom = $('#my-carousel');//轮播图
        var thumbnail_dom = $('#my-thumbnail');//缩略图
        upload_file_dom = $('[data-role="upload-file"]');//上传图片
        var upload_input_dom = upload_file_dom.parent().find('input[data-role="upload"]');
        var submit_file_dom = $('[data-role="submit-file"]');//向后端提交上传的图片
        var tip_info = $('#tip-info');

        // 渲染轮播图
        if(cur_pics && cur_pics!=='empty_pic'){
            carousel_dom.html(renderCarousel(cur_pics));
            //删除数据库的图片
            deleteDbImg();
            //渲染小缩略图
            thumbnail_dom.html(renderSmallPic(cur_pics));
            //打开系统选择文件对话框
            if(cur_pic_len==5){
                upload_file_dom.attr('disabled','');
            }
        }
               
        upload_file_dom.on('click',function(){
            if(typeof $(this).attr('disabled')!=='undefined'){
                alert('最多只能上传5张!')
                return 
            }  
            $(this).parent().find('input').trigger('click');
            
        })

        //input change 拿到当前选择的
        upload_input_dom.on('change',function(){
            var _this = this;
            var file = $(this)[0].files[0];
            readFile(file,thumbnail_dom);
            $('.tip-info').text(cur_pic_len+'/5')
        })

        //上传文件
        submit_file_dom.on('click',function(){
            if(!file_box||file_box.length<1){
                return 
            }
            var param = {};
            param.files = file_box; 
            param.data = {
                pledgeBusinessKey:window.sessionStorage["businessKey"],
                inspectionDate:date
            }
            console.debug('巡检记录上传的参数')
            console.debug(param);
            HttpUtils.update_records_pic_data(param,function(data){
                if(data.statusCode == '200'){
                    console.debug('上传成功！');
                    cur_view_pic_modal.modal('hide');
                    reRenderData()
                }
            })
        })

        //图片轮播
        scrollCarousel('[data-role="carousel"]',200);

        var view_records_dom = $('#view-records');
        view_records_dom.modal({backdrop:false});//点击背景时不关闭modal
        view_records_dom.modal('show');
        view_records_dom.on('hidden.bs.modal',function(){
            $(this).remove();
        })
    };

    function renderCarousel(cur_pics){
        var h = '';
        var url = contextPath+'/accessory/download/';
        $.each(cur_pics,function(i,item){
            h+='<li id="'+item.ip_id+'"><b data-role="delete-db-img" class="delete-db-img">&times;</b><img src="'+url+item.accessory_id+'" width="200" height="250"></li>';
        })
        return h
    }

    function deleteDbImg(){
        var delete_db_img_dom = $('[data-role="delete-db-img"]');
        delete_db_img_dom.on('click',function(){
            var _this = this;
            var picId = $(_this).parent().attr('id');
            var param = {inspectionPicId:picId};
            console.debug('删除图片时的ip_id')
            console.debug(param);
            HttpUtils.delete_records_pic(param,function(data){
                if(data.statusCode == '200'){
                    alert('删除图片成功！');
                    var delete_pic_ip_id = $(_this).parent().attr('id');
                    var small_pic_list = $('.small-bg');
                    $(_this).parent().remove();
                    $.each(small_pic_list,function(i,item){
                        if(delete_pic_ip_id==$(item).attr('data-id')){
                            $(item).remove();
                            return false
                        }
                    });
                    //删除后重新渲染轮播图
                    scrollCarousel('[data-role="carousel"]',200);
                    $('[data-role="carousel"]').css('left',0);
                    var cur_num = (($('.tip-info').text()).split('/'))[0]-1;//删除一张则信息提示少一张
                    $('.tip-info').text(cur_num+'/5');//重新渲染张数
                    reRenderData();
                }
            })
        })
    }

    function renderSmallPic(cur_pics){
        var h = '';
        var url = contextPath+'/accessory/download/';
        $.each(cur_pics,function(i,item){
            h+='<div class="small-bg" data-id="'+item.ip_id+'"><img src="'+url+item.accessory_id+'" width="40" height="40"></div>';
        })
        return h
    }

    function scrollCarousel(selector,width){
        var left_btn_dom = $(selector).find('[data-role="left"]');
        var right_btn_dom = $(selector).find('[data-role="right"]');
        var pic_list_dom = $(selector).find('[data-role="pic-list"]');
        var single_width = width;
        var list_len = pic_list_dom.find('li').length;
        pic_list_dom.css({'width':list_len*single_width+'px'});
    }

    function readFile(file,box){//读取图片
        if($('.small-bg').length==5){
            alert('最多只能上传5张')
            return 
        }
        var str = '';
        var is_pic = /image/w+/.test(file.type); 
        if(is_pic){
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function(){ 
                var time = new Date().getTime();
                var file_obj = {id:"view-img"+time,value:file};  
                file_box.push(file_obj);
                console.debug(file_box);
                str += '<div class="small-bg"><b data-role="delete-img" id="view-img'+time+'">&times;</b><img src="'+this.result+'" width="40" height="40"></img></div>'; 
                $(box).append(str);
                var sm_pic_len = $(box).find('.small-bg').length;
                $('.tip-info').text(sm_pic_len+'/5'); 
                if(sm_pic_len == 5){
                    $('[data-role="upload-file"]').attr('disabled','');
                }               
                removeFile();                                   
            }
        }                
    }

    function removeFile(){//删除图片
        $('[data-role="delete-img"]').on('click',function(){
            var cur_id = $(this).attr('id');
            $.each(file_box,function(i,item){
                var input_file_id = item.id;
                if(cur_id==input_file_id){
                    file_box.splice(i,1);
                    return false
                } 
            })
            console.debug(file_box);
            $(this).parent().remove();
            var cur_sm_pic_len = $('#my-thumbnail').find('.small-bg').length;
            $('.tip-info').text(cur_sm_pic_len+'/5');
            if(typeof $('[data-role="upload-file"]').attr('disabled')!=='undefined'){
               $('[data-role="upload-file"]').removeAttr('disabled'); 
            }
            
        })
    }

    return {Modal:picModal}
}


/**
* @日历回显数据配置器
* @param {data} object 后端返回的数据
*/

function configuratorEchoData(data){
    var clean_echo_data = {};
    clean_echo_data.had_records_data = [];
    $.each(data,function(i,item){
        var clean_data = {};
        //var cur_date = (item.inspectionDate).replace(/-/g,'/');
        var cur_date = formatDateAsRules(item.inspectionDate);
        clean_data["pics"] = [];
        clean_data["date"] = cur_date;
        $.each(item.inspectionPics,function(j,info){
            var picInfo = {};
            picInfo["accessory_id"] = info.picAccessory.id;
            picInfo["ip_id"] = info.id;
            clean_data["pics"].push(picInfo)
        })
        clean_echo_data.had_records_data.push(clean_data);
    })

    return clean_echo_data
}
    
$(function () {
    
    new WhaleCalendar({selector:'[data-role="whale-canlander"]',peldge_date:window.sessionStorage["pledgeDate"]})//实例化日历插件
    reRenderData()//根据后端返回的数据渲染日历

})