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

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){//显示modalvar _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" οnclick="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" οnclick="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});//点击背景时不关闭modalview_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()//根据后端返回的数据渲染日历

})

转载于:https://www.cnblogs.com/MonaSong/p/6288557.html

工作笔记---巡检记录相关推荐

  1. 工作笔记 (1)—Executor has been shut down问题记录

    工作笔记 (1)-"Executor has been shut down"问题记录 面对焦虑的最好办法就是动手去解决它 一.问题描述 在启动定时任务quartz时,console ...

  2. 工作笔记:TrueCrypt编译记录

    工作笔记:TrueCrypt编译记录 TrueCrypt的最新版本6.2可以从官方网站上下载,我从这里下载了一个6.1的 http://freedos.pri.ee/truecrypt/ 在TrueC ...

  3. Disruptor本地线程队列_实现线程间通信---线程间通信工作笔记001

    Disruptor本地线程队列_实现线程间通信---线程间通信工作笔记001 看到同事用这个东西了,这个挺好用的说是,可以实现,本地线程间的通信,好像在c++和java中都可以用 现在没时间研究啊,暂 ...

  4. maximo工作笔记

    maximo工作笔记 xml学习: 多选框: <hdcheckboxgroup id="1339230676937" label="作业类型" dataa ...

  5. 无意间翻到五年前的工作笔记

    今天在拿U盘拷贝一个东西,发现了16年的一个工作笔记.我记得我是11月17日入职,入职以后就开始处理各种问题.简单的扫描了一眼,发现了一些问题,当时作为核心开发,视界还是不够宽. 1,一直在处理问题, ...

  6. 苹果ios开发一年的工作笔记

    苹果ios开发一年的工作笔记 退回输入键盘 - (BOOL) textFieldShouldReturn:(id)textField{ [textField resignFirstResponder] ...

  7. 工作笔记1——利用bat脚本实现批量上传文件到ftp服务器

    工作笔记1--利用bat脚本实现批量上传文件到ftp服务器 问题概述 利用ftp命令实现上传文件 注意 限时功能 将共享目录映射到电脑中的某个盘符 实现断点续传 问题概述 公司中有大概225k个文件需 ...

  8. 罗辑思维在全链路压测方面的实践和工作笔记

    业务的知名度越高,其背后技术团队承受的压力就越大.一旦出现技术问题,就有可能被放大,尤其是当服务的是对知识获取体验要求颇高的用户群体. 提供知识服务的罗辑思维主张"省时间的获取知识" ...

  9. 服务器系统巡检记录表,服务器月度巡检记录

    <服务器月度巡检记录>由会员分享,可在线阅读,更多相关<服务器月度巡检记录(2页珍藏版)>请在人人文库网上搜索. 1.服务器月度巡检记录 巡检日期: 年 月 日一.物理环境检查 ...

最新文章

  1. 全球及中国智能交通行业应用方向分析及创新发展战略报告2021版
  2. 二进制除法\模2除法
  3. 电源纹波分析及测试方法
  4. MapReduce编程中常用的字符操作
  5. 导航栏-滚动渐变 - 封装版
  6. 李开复的 给创新工场求职者的一封信
  7. java easing_p5.js入门教程之平滑过渡(Easing)
  8. 申通快递机器人上岗_【峰暴】618, 数万台机器人上岗为您服务!
  9. QBXT Day 4 数学,数论
  10. 黑马微信小程序项目实战
  11. loadrunner代理录制
  12. 计算机硬盘用u盘维修,电脑维修:U盘和移动硬盘及固态硬盘的区别
  13. 如何玩转淘宝直通车?提高转化率?
  14. 在centos7.7安装搜狗输入法踩坑日记
  15. matlab中矩阵的表示与简单操作
  16. 网上书店订单流程c语言源代码,网上书店的设计及实现.doc
  17. 通过CMA、CNAS双认证的第三方软件测试机构安利
  18. 风华秋实、巨星传奇多次上市未果,再次冲击IPO
  19. stm32接收OpenMv发送的数据,并用oled屏显示
  20. 运用JAVA实现猜骰子游戏

热门文章

  1. C语言程序设计 细节总结(链表)
  2. mysql innodbmaxdirtypagespct_MySQL参数解析innodb_max_dirty_pages_pct
  3. linux sh for ls,Linux shell for while 循环
  4. 谷歌json插件_程序员必备的4款Chrome插件,妥妥的神器!
  5. html5考试总结300字,期中考心得300字5
  6. python有序队列_Python 队列
  7. 自贡市职称计算机考试,四川省自贡市2012年职称计算机考试时间
  8. Ubuntu下编译并运行C++代码
  9. 【机器学习入门】(1) K近邻算法:原理、实例应用(红酒分类预测)附python完整代码及数据集
  10. python可视化案例书籍推荐_这5款Python可视化神器,总有一款适合你!