(function($){ $.fn.tooth = function(options){ let toothId = this.initToothHtml(options); this.initPopup(toothId,options ? options.success : function(){}); } $.fn.initToothHtml = function(options){ let toothId = this.attr("id"); let settings = $.extend({ 'width': 192, 'height': 40, success: function(){} }, options); let tdWidth = Math.round(parseInt(settings.width-1)/2-1)-2; let tdHeight = Math.round(parseInt(settings.height)/2-1); let html =''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; this.html(html); return toothId; } /** * 电子病历选择牙位使用 */ $.fn.initPopupByEmr = function(toothId,ele,callback,cancelCallback){ //点击时弹出牙位选择 if ($("#tooth_popup_div").length > 0) { // 存在删除 $("#tooth_popup_div").remove(); } $("#"+toothId).append(getPopupHtml()); initPopupEvent(toothId,callback,cancelCallback); // 初始化 // 右上 setValueStyle($(ele).find(".right_up").html(),'rght_up'); // 左上 setValueStyle($(ele).find(".left_up").html(),'left_up'); // 右下 setValueStyle($(ele).find(".right_down").html(),'rght_down'); // 左下 setValueStyle($(ele).find(".left_down").html(),'left_down'); } initPopupEvent = function(toothId,callback,cancelCallback){ //关闭弹出窗口 $("#tooth_popup_div .close_label").on("click",function(){ $("#tooth_popup_div").remove(); }); //鼠标悬浮事件 $(".wisdom-select span>label, .num-select span>label").hover(function(){ $(this).toggleClass("num-select-hover"); let classNm = "tooth_"+$(this).attr("position")+$(this).attr("value"); $("."+classNm).toggleClass("drop-shadow"); },function(){ $(this).toggleClass("num-select-hover"); let classNm = "tooth_"+$(this).attr("position")+$(this).attr("value"); $("."+classNm).toggleClass("drop-shadow"); }); //选择效果 $(".wisdom-select span>label, .num-select span>label").on("click",function(e){ if(e){ let target = e.currentTarget; //选择数字字母,有样式删除,无样式添加 $(target).toggleClass("num-select-confirm"); setToothClass($(target)); } }); //添加按钮事件 setPopupButton(); //确定 $("#btnSure").on("click",function(){ let allSelects = $(".num-select-confirm"); if(!allSelects || allSelects.length == 0){ return false; } // console.log(allSelects) let toothResult = {}; // toothResult = []; allSelects.each(function(index,ele){ let jele = $(ele) // console.log(ele,jele.attr("position")); let position = jele.attr("position"); let type = jele.attr("type"); let value = jele.attr("value"); let obj = { position: position, type: type, value: value } // toothResult.push(obj); if(type == "letter"){ //乳牙 toothResult[position+"-"+type+"-"+value] = obj; } else { //恒牙 toothResult[position+"-pmnt-"+value] = obj; } }); //设置显示 // id="tooth_value_'+toothId+'" //98765E4D3C2B1A let result = setResultHtml(toothResult,toothId) // console.log(toothResult); callback(result); $("#tooth_popup_div").remove(); }); //取消 $("#btnCancel").on("click",function(){ $("#tooth_popup_div").remove(); if(cancelCallback){ cancelCallback(); } }); //初始化 initPopupValue(toothId); } $.fn.initPopup = function(toothId,callback){ //点击时弹出牙位选择 $("#tooth_value_"+toothId).on("click",function(){ if ($("#tooth_popup_div").length > 0) { // 存在删除 $("#tooth_popup_div").remove(); } $("#tooth_all_"+toothId).append(getPopupHtml()); initPopupEvent(toothId,callback); }); } // 初始化 function initPopupValue(toothId){ // 右上 setValueStyle($("#tooth_all_"+toothId+" .right_up").html(),'rght_up'); // 左上 setValueStyle($("#tooth_all_"+toothId+" .left_up").html(),'left_up'); // 右下 setValueStyle($("#tooth_all_"+toothId+" .right_down").html(),'rght_down'); // 左下 setValueStyle($("#tooth_all_"+toothId+" .left_down").html(),'left_down'); } function setValueStyle(html,positionVal){ if(html){ let list = html.split(""); list.forEach(value => { let type = "pmnt"; if("ABCDE".indexOf(value) >= 0){ type = "letter"; } let position = positionVal; if(value == "9"){ position = 'wisdom_'+positionVal; type = "wisdom"; } let target = $("label[position='"+position+"'][type='"+type+"'][value='"+value+"']"); if(target && target.length != 0){ target.addClass("num-select-confirm"); setToothClass(target); } }); } } function setResultHtml(toothResult,toothId){ let result = {}; // 右上 let rghtUpHtml = fmtVal(toothResult["wisdom_rght_up-pmnt-9"]); rghtUpHtml += fmtVal(toothResult["rght_up-pmnt-8"]); rghtUpHtml += fmtVal(toothResult["rght_up-pmnt-7"]); rghtUpHtml += fmtVal(toothResult["rght_up-pmnt-6"]); rghtUpHtml += fmtVal(toothResult["rght_up-pmnt-5"]); rghtUpHtml += fmtVal(toothResult["rght_up-letter-E"]); rghtUpHtml += fmtVal(toothResult["rght_up-pmnt-4"]); rghtUpHtml += fmtVal(toothResult["rght_up-letter-D"]); rghtUpHtml += fmtVal(toothResult["rght_up-pmnt-3"]); rghtUpHtml += fmtVal(toothResult["rght_up-letter-C"]); rghtUpHtml += fmtVal(toothResult["rght_up-pmnt-2"]); rghtUpHtml += fmtVal(toothResult["rght_up-letter-B"]); rghtUpHtml += fmtVal(toothResult["rght_up-pmnt-1"]); rghtUpHtml += fmtVal(toothResult["rght_up-letter-A"]); $("#tooth_all_"+toothId+" .right_up").html(rghtUpHtml); result["rght_up"] = rghtUpHtml; //左上 let leftUpHtml = fmtVal(toothResult["left_up-pmnt-1"]); leftUpHtml += fmtVal(toothResult["left_up-letter-A"]); leftUpHtml += fmtVal(toothResult["left_up-pmnt-2"]); leftUpHtml += fmtVal(toothResult["left_up-letter-B"]); leftUpHtml += fmtVal(toothResult["left_up-pmnt-3"]); leftUpHtml += fmtVal(toothResult["left_up-letter-C"]); leftUpHtml += fmtVal(toothResult["left_up-pmnt-4"]); leftUpHtml += fmtVal(toothResult["left_up-letter-D"]); leftUpHtml += fmtVal(toothResult["left_up-pmnt-5"]); leftUpHtml += fmtVal(toothResult["left_up-letter-E"]); leftUpHtml += fmtVal(toothResult["left_up-pmnt-6"]); leftUpHtml += fmtVal(toothResult["left_up-pmnt-7"]); leftUpHtml += fmtVal(toothResult["left_up-pmnt-8"]); leftUpHtml += fmtVal(toothResult["wisdom_left_up-pmnt-9"]); $("#tooth_all_"+toothId+" .left_up").html(leftUpHtml); result["left_up"] = leftUpHtml; // 右下 let rghtDownHtml = fmtVal(toothResult["wisdom_rght_down-pmnt-9"]); rghtDownHtml += fmtVal(toothResult["rght_down-pmnt-8"]); rghtDownHtml += fmtVal(toothResult["rght_down-pmnt-7"]); rghtDownHtml += fmtVal(toothResult["rght_down-pmnt-6"]); rghtDownHtml += fmtVal(toothResult["rght_down-pmnt-5"]); rghtDownHtml += fmtVal(toothResult["rght_down-letter-E"]); rghtDownHtml += fmtVal(toothResult["rght_down-pmnt-4"]); rghtDownHtml += fmtVal(toothResult["rght_down-letter-D"]); rghtDownHtml += fmtVal(toothResult["rght_down-pmnt-3"]); rghtDownHtml += fmtVal(toothResult["rght_down-letter-C"]); rghtDownHtml += fmtVal(toothResult["rght_down-pmnt-2"]); rghtDownHtml += fmtVal(toothResult["rght_down-letter-B"]); rghtDownHtml += fmtVal(toothResult["rght_down-pmnt-1"]); rghtDownHtml += fmtVal(toothResult["rght_down-letter-A"]); $("#tooth_all_"+toothId+" .right_down").html(rghtDownHtml); result["rght_down"] = rghtDownHtml; //左下 let leftDownHtml = fmtVal(toothResult["left_down-pmnt-1"]); leftDownHtml += fmtVal(toothResult["left_down-letter-A"]); leftDownHtml += fmtVal(toothResult["left_down-pmnt-2"]); leftDownHtml += fmtVal(toothResult["left_down-letter-B"]); leftDownHtml += fmtVal(toothResult["left_down-pmnt-3"]); leftDownHtml += fmtVal(toothResult["left_down-letter-C"]); leftDownHtml += fmtVal(toothResult["left_down-pmnt-4"]); leftDownHtml += fmtVal(toothResult["left_down-letter-D"]); leftDownHtml += fmtVal(toothResult["left_down-pmnt-5"]); leftDownHtml += fmtVal(toothResult["left_down-letter-E"]); leftDownHtml += fmtVal(toothResult["left_down-pmnt-6"]); leftDownHtml += fmtVal(toothResult["left_down-pmnt-7"]); leftDownHtml += fmtVal(toothResult["left_down-pmnt-8"]); leftDownHtml += fmtVal(toothResult["wisdom_left_down-pmnt-9"]); $("#tooth_all_"+toothId+" .left_down").html(leftDownHtml); result["left_down"] = leftDownHtml; return result; } function fmtVal(value){ if(value){ return value.value; } return ""; } // 选中数字 或者字母时,设置牙齿的样式 function setToothClass(ele){ let key = ele.attr("value"); let isSelect1 = ele.hasClass("num-select-confirm"); let isSelect2 = null; if(ele.attr("type") == "letter"){ switch (key) { case "A": key = "1"; break; case "B": key = "2"; break; case "C": key = "3"; break; case "D": key = "4"; break; case "E": key = "5"; break; default: break; } isSelect2 = $("label[position='"+ele.attr("position")+"'][type='pmnt'][value='"+key+"']").hasClass("num-select-confirm"); } else { switch (key) { case "1": key = "A"; break; case "2": key = "B"; break; case "3": key = "C"; break; case "4": key = "D"; break; case "5": key = "E"; break; default: break; } isSelect2 = $("label[position='"+ele.attr("position")+"'][type='letter'][value='"+key+"']").hasClass("num-select-confirm"); } // console.log("isSelect1="+isSelect1,"isSelect2="+isSelect2) //数字或者字母有一天选择,则牙齿选中 let classNm = "tooth_"+ele.attr("position")+key; // console.log("classNm=",classNm) if(isSelect1 || isSelect2){ //选择牙齿 $("."+classNm).addClass("drop-shadow-confirm"); } else { $("."+classNm).removeClass("drop-shadow-confirm"); } } function getPopupHtml(){ let html = '
'; html += '
选择牙位
'; html += '
'; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += '
'; html += '
'; //右上牙图 html += '
'; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += '
'; //左上牙图 html += '
'; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += '
'; //右上选择 html += '
'; //数字选择 html += '
' html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += '
'; //字母选择 html += '
' html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += '
'; html += '
'; //左上选择 html += '
'; //数字选择 html += '
' html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += '
'; //字母选择 html += '
' html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += '
'; html += '
'; // 右下选择 html += '
'; //字母选择 html += '
' html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += '
'; //数字选择 html += '
' html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += '
'; html += '
'; // 左下选择 html += '
'; //字母选择 html += '
' html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += '
'; //数字选择 html += '
' html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += '
'; html += '
'; //右下牙图 html += '
'; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += '
'; //左下牙图 html += '
'; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += '
'; //智齿 html += '
'; html += ''; html += ''; html += ''; html += ''; html += '
'; html += '
'; //按钮 html += ''; html += '
'; return html; } function setPopupButton(){ // 左上 function setLeftUpTeeth(){ //数字 $("label[position='left_up'][type='pmnt']").addClass("num-select-confirm"); //牙齿 $("#tooth_left_up span").addClass("drop-shadow-confirm"); } // 左下 function setLeftDownTeeth(){ //数字 $("label[position='left_down'][type='pmnt']").addClass("num-select-confirm"); //牙齿 $("#tooth_left_down span").addClass("drop-shadow-confirm"); } // 右上 function setRghtUpTeeth(){ //数字 $("label[position='rght_up'][type='pmnt']").addClass("num-select-confirm"); //牙齿 $("#tooth_rght_up span").addClass("drop-shadow-confirm"); } // 右下 function setRghtDownTeeth(){ //数字 $("label[position='rght_down'][type='pmnt']").addClass("num-select-confirm"); //牙齿 $("#tooth_rght_down span").addClass("drop-shadow-confirm"); } function clearSelect(){ $(".drop-shadow-confirm").removeClass("drop-shadow-confirm"); $(".num-select-confirm").removeClass("num-select-confirm"); } //乳牙 $("#btnMilkTeeth").on("click",function(){ clearSelect(); //字母 $("label[position='left_up'][type='letter']").addClass("num-select-confirm"); $("label[position='left_down'][type='letter']").addClass("num-select-confirm"); $("label[position='rght_up'][type='letter']").addClass("num-select-confirm"); $("label[position='rght_down'][type='letter']").addClass("num-select-confirm"); for(let i=1;i<=5;i++){ //数字 // $("label[position='left_up'][value='"+i+"']").addClass("num-select-confirm"); // $("label[position='left_down'][value='"+i+"']").addClass("num-select-confirm"); // $("label[position='rght_up'][value='"+i+"']").addClass("num-select-confirm"); // $("label[position='rght_down'][value='"+i+"']").addClass("num-select-confirm"); //牙齿 $(".tooth_left_up"+i).addClass("drop-shadow-confirm"); $(".tooth_left_down"+i).addClass("drop-shadow-confirm"); $(".tooth_rght_up"+i).addClass("drop-shadow-confirm"); $(".tooth_rght_down"+i).addClass("drop-shadow-confirm"); } }); //全口 $("#btnAllTeeth").on("click",function(){ clearSelect(); setLeftUpTeeth(); setLeftDownTeeth(); setRghtUpTeeth(); setRghtDownTeeth(); }); //左上 $("#btnLeftUpTeeth").on("click",function(){ clearSelect() setLeftUpTeeth(); }); //左下 $("#btnLeftDownTeeth").on("click",function(){ clearSelect() setLeftDownTeeth(); }); //右上 $("#btnRghtUpTeeth").on("click",function(){ clearSelect() setRghtUpTeeth(); }); //右下 $("#btnRghtDownTeeth").on("click",function(){ clearSelect() setRghtDownTeeth(); }); //上半口 $("#btnUpHalfTeeth").on("click",function(){ clearSelect() setLeftUpTeeth(); setRghtUpTeeth(); }); //下半口 $("#btnDownHalfTeeth").on("click",function(){ clearSelect() setLeftDownTeeth(); setRghtDownTeeth(); }); //清除 $("#btnClearTeeth").on("click",function(){ clearSelect(); }); } })(jQuery);