| | |
| | | <apex:page doctype="html-5.0" showquickactionvfheader="false" controller="eSignFormAttachmentController" showHeader="false" sidebar="false" action="{!init}"> |
| | | <!-- 隐藏原图 展示画布 旋转图片(4个90°)鼠标滚轮伸缩放大放小 (会失帧) --> |
| | | <head> |
| | | <apex:includescript value="{!URLFOR($Resource.jquery183minjs)}"> |
| | | </apex:includescript> |
| | | <apex:includescript value="/soap/ajax/40.0/connection.js"> |
| | | </apex:includescript> |
| | | <apex:includescript value="/soap/ajax/40.0/apex.js"> |
| | | </apex:includescript> |
| | | |
| | | <title> |
| | | 查看附件 |
| | | </title> |
| | | <script> |
| | | var widthJs = "500px"; |
| | | </script> |
| | | <style> |
| | | * { |
| | | margin: 0px; |
| | | padding: 0px; |
| | | } |
| | | <apex:page doctype="html-5.0" showquickactionvfheader="false" controller="eSignFormAttachmentController" showHeader="false" sidebar="false" action="{!init}" lightningStylesheets="true"> |
| | | <!-- 隐藏原图 展示画布 旋转图片(4个90°)鼠标滚轮伸缩放大放小 (会失帧) --> |
| | | <head> |
| | | <apex:includescript value="{!URLFOR($Resource.jquery183minjs)}"> |
| | | </apex:includescript> |
| | | <apex:includeScript value="{!URLFOR($Resource.connection20)}"/> |
| | | <apex:includeScript value="{!URLFOR($Resource.apex20)}"/> |
| | | |
| | | <title> |
| | | 查看附件 |
| | | </title> |
| | | <script> |
| | | var widthJs = "500px"; |
| | | </script> |
| | | <style> |
| | | * { |
| | | margin: 0px; |
| | | padding: 0px; |
| | | } |
| | | |
| | | #pandiv { |
| | | width: 30%; |
| | | height: 88%; |
| | | } |
| | | |
| | | #control { |
| | | /*background: #ccc;*/ |
| | | opacity: 0.7; |
| | | width: 200px; |
| | | /*liying start*/ |
| | | width: 80px; |
| | | /*liying end*/ |
| | | height: 30px; display: none; |
| | | padding-top: 5px; |
| | | position: absolute; |
| | | /*liying start*/ |
| | | align-content: center; |
| | | /*liying end*/ |
| | | /*left: 550px;*/ |
| | | top: 90%; |
| | | left: 23%; |
| | | } |
| | | |
| | | #canvas { |
| | | border: 1px solid black; |
| | | } |
| | | |
| | | #left { |
| | | float: left; |
| | | display: block; |
| | | } |
| | | |
| | | #right { |
| | | float: right; |
| | | display: block; |
| | | } |
| | | body{ |
| | | /* background-color: cyan; */ |
| | | } |
| | | #popDiv{ |
| | | display: none; |
| | | background-color: #0f218b; |
| | | z-index: 11; |
| | | width: 100%; |
| | | height: 100%; |
| | | position:fixed; |
| | | top:0; |
| | | right:0; |
| | | left:0; |
| | | bottom:0; |
| | | margin:auto; |
| | | } |
| | | /* 关闭按钮样式 */ |
| | | #popDiv .close a { |
| | | text-decoration: none; |
| | | color: #2D2C3B; |
| | | } |
| | | /* 弹出界面的关闭按钮 */ |
| | | #popDiv .close{ |
| | | margin:0 auto;background:#0f218b;text-align:right;padding:10px 0 0 0;width: 97%; |
| | | } |
| | | #popDiv p{ |
| | | text-align: center; |
| | | font-size: 25px; |
| | | font-weight: bold; |
| | | } |
| | | #pandiv { |
| | | width: 30%; |
| | | height: 88%; |
| | | } |
| | | |
| | | #control { |
| | | /*background: #ccc;*/ |
| | | opacity: 0.7; |
| | | width: 200px; |
| | | /*liying start*/ |
| | | width: 80px; |
| | | /*liying end*/ |
| | | height: 30px; display: none; |
| | | padding-top: 5px; |
| | | position: absolute; |
| | | /*liying start*/ |
| | | align-content: center; |
| | | /*liying end*/ |
| | | /*left: 550px;*/ |
| | | top: 90%; |
| | | left: 23%; |
| | | } |
| | | |
| | | #canvas { |
| | | border: 1px solid black; |
| | | } |
| | | |
| | | #left { |
| | | float: left; |
| | | display: block; |
| | | } |
| | | |
| | | #right { |
| | | float: right; |
| | | display: block; |
| | | } |
| | | body{ |
| | | /* background-color: cyan; */ |
| | | } |
| | | #popDiv{ |
| | | display: none; |
| | | background-color: #0f218b; |
| | | z-index: 11; |
| | | width: 100%; |
| | | height: 100%; |
| | | position:fixed; |
| | | top:0; |
| | | right:0; |
| | | left:0; |
| | | bottom:0; |
| | | margin:auto; |
| | | } |
| | | /* 关闭按钮样式 */ |
| | | #popDiv .close a { |
| | | text-decoration: none; |
| | | color: #2D2C3B; |
| | | } |
| | | /* 弹出界面的关闭按钮 */ |
| | | #popDiv .close{ |
| | | margin:0 auto;background:#0f218b;text-align:right;padding:10px 0 0 0;width: 97%; |
| | | } |
| | | #popDiv p{ |
| | | text-align: center; |
| | | font-size: 25px; |
| | | font-weight: bold; |
| | | } |
| | | |
| | | /**关闭区**/ |
| | | .close_div{margin:0 auto;background:#fff;text-align:right;padding:10px 0 0 0;} |
| | | /**图片区**/ |
| | | .content{background:#fff;margin:0 auto;position:relative;width: 95%;height: 95%;} |
| | | .content .img{position:absolute;top:0;left:0;z-index:105} |
| | | .content span{position:absolute;left:45%;top:40%;} |
| | | /**左右箭头**/ |
| | | .content .left,.content .right{position:absolute;top:0;z-index:110;} |
| | | .content .left{left:0;cursor:url(/resource/curleft), auto; } |
| | | .content .right{right:0;cursor:url(/resource/curright), auto;} |
| | | /**底部区**/ |
| | | .bottom{height:0px;background:#fff;margin:0 auto;overflow:hidden;line-height:30px; |
| | | } |
| | | /**关闭区**/ |
| | | .close_div{margin:0 auto;background:#fff;text-align:right;padding:10px 0 0 0;} |
| | | /**图片区**/ |
| | | .content{background:#fff;margin:0 auto;position:relative;width: 95%;height: 95%;} |
| | | .content .img{position:absolute;top:0;left:0;z-index:105} |
| | | .content span{position:absolute;left:45%;top:40%;} |
| | | /**左右箭头**/ |
| | | .content .left,.content .right{position:absolute;top:0;z-index:110;} |
| | | .content .left{left:0;cursor:url(/resource/curleft), auto; } |
| | | .content .right{right:0;cursor:url(/resource/curright), auto;} |
| | | /**底部区**/ |
| | | .bottom{height:0px;background:#fff;margin:0 auto;overflow:hidden;line-height:30px; |
| | | } |
| | | |
| | | .solution-list { |
| | | width: 20%; |
| | | float: left; |
| | | } |
| | | .blankCss{ |
| | | text-align:center; |
| | | padding-top: 2%; |
| | | border: 5px solid rgb(161, 220, 243); |
| | | float: left; |
| | | width: 78%; |
| | | height: calc(100vh - 118px); |
| | | margin-left: 10px; |
| | | background:#fff; |
| | | } |
| | | .PdfCss{ |
| | | text-align:center; |
| | | padding-top: 2%; |
| | | float: left; |
| | | width: 78%; |
| | | height: calc(90vh - 118px); |
| | | margin-left: 10px; |
| | | background:#fff; |
| | | } |
| | | .solution-list { |
| | | width: 20%; |
| | | float: left; |
| | | } |
| | | .blankCss{ |
| | | text-align:center; |
| | | padding-top: 2%; |
| | | border: 5px solid rgb(161, 220, 243); |
| | | float: left; |
| | | width: 78%; |
| | | height: calc(100vh - 118px); |
| | | margin-left: 10px; |
| | | background:#fff; |
| | | } |
| | | .PdfCss{ |
| | | text-align:center; |
| | | padding-top: 2%; |
| | | float: left; |
| | | width: 78%; |
| | | height: calc(90vh - 118px); |
| | | margin-left: 10px; |
| | | background:#fff; |
| | | } |
| | | |
| | | .solution-item { |
| | | display: none; |
| | | padding-top: 2%; |
| | | float: left; |
| | | width: 73%; |
| | | height: 70%; |
| | | margin-left: 10px; |
| | | border: 40px solid #0f218b; |
| | | background:#fff; |
| | | } |
| | | </style> |
| | | </head> |
| | | <body> |
| | | <!-- 标题 --> |
| | | <div style="height: 40px;background-color:#0f218b;width: 100%;text-align: center;"> |
| | | <h1 style="color: white;font-size: 24px;"> |
| | | 查看附件 |
| | | </h1> |
| | | </div> |
| | | <div style="height: 30px; margin-top: 10px;"> |
| | | <!-- 切换原图(用于用户另存为)初始化时判断显示1个 --> |
| | | <!-- 1、#popDiv 弹窗窗口 |
| | | 2、#content 左+画布+右 三部分 |
| | | 3、#pandiv 画布 |
| | | 4、#control 旋转图标 |
| | | 5、#OriginalDiv 切换原图和画布 --> |
| | | <div id="popLayer"> |
| | | <!--左侧表格 展示所有的附件--> |
| | | <div class="solution-list"> |
| | | <apex:pageBlock id="oppBlock" tabStyle="Report"> |
| | | <apex:outputPanel > |
| | | <input type="hidden" value="{!identifier}" id="identifier"/> |
| | | <apex:variable value="identif" var="identif" rendered="{!IF(identifier == '经销商', true, false)}" > |
| | | <table class="list" style="border-bottom-width: 0px; width:100%; font-size:11px; border-spacing:0;" border="" id="tableHeader_L"> |
| | | <tr class="headerRow" height="30px" align="center"> |
| | | <td><a href="#" onclick="return false;" >附件名称</a></td> |
| | | <td width="55px"><a href="#" onclick="return false;">附件类型</a></td> |
| | | </tr> |
| | | <apex:repeat value="{!acccData}" var="or" id="oppTable"> |
| | | <apex:variable value="{!1}" var="cnt"/> |
| | | <apex:variable value="trcnt" var="trcnt" rendered="{!IF(or.accessory.ContentType == '经销商', true, false)}"> |
| | | <tr style="cursor:pointer;" onclick="changeColor('{!or.accessory.Id}');onShowImge('{!or.accessory.Id}',this);" class="dataRow {!IF(MOD(cnt, 2)==0, 'odd', 'even')} {!IF(cnt==1, 'first', '')}" onmouseover="if (window.hiOn){hiOn(this);} " onmouseout="if (window.hiOff){hiOff(this);} " onblur="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}"> |
| | | <td align="center" id="" style="border-right-width:thin"> |
| | | <a href="#"><apex:outputText value="{!or.accessory.Name}" /></a> |
| | | </td> |
| | | <td width="55px" align="center"> |
| | | <apex:outputText value="{!or.accessory.ContentType}" /> |
| | | </td> |
| | | <td style="display:none"> |
| | | <apex:outputText value="{!or.accessory.Id}"/> |
| | | </td> |
| | | </tr> |
| | | </apex:variable> |
| | | <apex:variable value="{!cnt + 1}" var="cnt" /> |
| | | </apex:repeat> |
| | | </table> |
| | | </apex:variable> |
| | | .solution-item { |
| | | display: none; |
| | | padding-top: 2%; |
| | | float: left; |
| | | width: 73%; |
| | | height: 70%; |
| | | margin-left: 10px; |
| | | border: 40px solid #0f218b; |
| | | background:#fff; |
| | | } |
| | | </style> |
| | | </head> |
| | | <body> |
| | | <!-- 标题 --> |
| | | <div style="height: 40px;background-color:#0f218b;width: 100%;text-align: center;"> |
| | | <h1 style="color: white;font-size: 24px;"> |
| | | 查看附件 |
| | | </h1> |
| | | </div> |
| | | <div style="height: 30px; margin-top: 10px;"> |
| | | <!-- 切换原图(用于用户另存为)初始化时判断显示1个 --> |
| | | <!-- 1、#popDiv 弹窗窗口 |
| | | 2、#content 左+画布+右 三部分 |
| | | 3、#pandiv 画布 |
| | | 4、#control 旋转图标 |
| | | 5、#OriginalDiv 切换原图和画布 --> |
| | | <div id="popLayer"> |
| | | <!--左侧表格 展示所有的附件--> |
| | | <div class="solution-list"> |
| | | <apex:pageBlock id="oppBlock" tabStyle="Report"> |
| | | <apex:outputPanel > |
| | | <input type="hidden" value="{!identifier}" id="identifier"/> |
| | | <apex:variable value="identif" var="identif" rendered="{!IF(identifier == '经销商', true, false)}" > |
| | | <table class="list" style="border-bottom-width: 0px; width:100%; font-size:11px; border-spacing:0;" border="" id="tableHeader_L"> |
| | | <tr class="headerRow" height="30px" align="center"> |
| | | <td><a href="#" onclick="return false;" >附件名称</a></td> |
| | | <td width="55px"><a href="#" onclick="return false;">附件类型</a></td> |
| | | </tr> |
| | | <apex:repeat value="{!acccData}" var="or" id="oppTable"> |
| | | <apex:variable value="{!1}" var="cnt"/> |
| | | <apex:variable value="trcnt" var="trcnt" rendered="{!IF(or.accessory.ContentType == '经销商', true, false)}"> |
| | | <tr style="cursor:pointer;" onclick="changeColor('{!or.accessory.Id}');onShowImge('{!or.accessory.Id}',this);" class="dataRow {!IF(MOD(cnt, 2)==0, 'odd', 'even')} {!IF(cnt==1, 'first', '')}" onmouseover="if (window.hiOn){hiOn(this);} " onmouseout="if (window.hiOff){hiOff(this);} " onblur="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}"> |
| | | <td align="center" id="" style="border-right-width:thin"> |
| | | <a href="#"><apex:outputText value="{!or.accessory.Name}" /></a> |
| | | </td> |
| | | <td width="55px" align="center"> |
| | | <apex:outputText value="{!or.accessory.ContentType}" /> |
| | | </td> |
| | | <td style="display:none"> |
| | | <apex:outputText value="{!or.accessory.Id}"/> |
| | | </td> |
| | | </tr> |
| | | </apex:variable> |
| | | <apex:variable value="{!cnt + 1}" var="cnt" /> |
| | | </apex:repeat> |
| | | </table> |
| | | </apex:variable> |
| | | <!--asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start--> |
| | | <input type="hidden" value="{!identifier2}" id="identifier2"/> |
| | | <apex:variable value="identif" var="identif" rendered="{!IF(identifier2 == '医院', true, false)}" id="identifier2"> |
| | | <table class="list" style="border-bottom-width: 0px; width:100%; font-size:11px; border-spacing:0;" border="" id="tableHeader_M"> |
| | | <apex:variable value="identif" var="identif" rendered="{!IF(identifier2 == '医院' && identifier != '经销商' , true, false)}"> |
| | | <tr class="headerRow" height="30px" align="center"> |
| | | <td><a href="#" onclick="return false;" >附件名称</a></td> |
| | | <td width="55px"><a href="#" onclick="return false;">附件类型</a></td> |
| | | </tr> |
| | | </apex:variable> |
| | | <apex:variable value="identif" var="identif" rendered="{!IF(identifier2 == '医院' && identifier == '经销商' , true, false)}"> |
| | | <tr class="headerRow" height="30px" align="center"> |
| | | <td colspan="2"></td> |
| | | </tr> |
| | | </apex:variable> |
| | | <apex:repeat value="{!acccData}" var="or" id="oppTable2"> |
| | | <apex:variable value="{!1}" var="cnt"/> |
| | | <apex:variable value="trcnt" var="trcnt" rendered="{!IF(or.accessory.ContentType == '医院', true, false)}"> |
| | | <tr style="cursor:pointer;" onclick="changeColor('{!or.accessory.Id}');onShowImge('{!or.accessory.Id}',this);" class="dataRow {!IF(MOD(cnt, 2)==0, 'odd', 'even')} {!IF(cnt==1, 'first', '')}" onmouseover="if (window.hiOn){hiOn(this);} " onmouseout="if (window.hiOff){hiOff(this);} " onblur="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}"> |
| | | <td align="center" id="" style="border-right-width:thin"> |
| | | <a href="#"><apex:outputText value="{!or.accessory.Name}" /></a> |
| | | </td> |
| | | <td width="55px" align="center"> |
| | | <apex:outputText value="{!or.accessory.ContentType}" /> |
| | | </td> |
| | | <td style="display:none"> |
| | | <apex:outputText value="{!or.accessory.Id}"/> |
| | | </td> |
| | | </tr> |
| | | </apex:variable> |
| | | <apex:variable value="{!cnt + 1}" var="cnt" /> |
| | | </apex:repeat> |
| | | </table> |
| | | </apex:variable> |
| | | <input type="hidden" value="{!identifier2}" id="identifier2"/> |
| | | <apex:variable value="identif" var="identif" rendered="{!IF(identifier2 == '医院', true, false)}" id="identifier2"> |
| | | <table class="list" style="border-bottom-width: 0px; width:100%; font-size:11px; border-spacing:0;" border="" id="tableHeader_M"> |
| | | <apex:variable value="identif" var="identif" rendered="{!IF(identifier2 == '医院' && identifier != '经销商' , true, false)}"> |
| | | <tr class="headerRow" height="30px" align="center"> |
| | | <td><a href="#" onclick="return false;" >附件名称</a></td> |
| | | <td width="55px"><a href="#" onclick="return false;">附件类型</a></td> |
| | | </tr> |
| | | </apex:variable> |
| | | <apex:variable value="identif" var="identif" rendered="{!IF(identifier2 == '医院' && identifier == '经销商' , true, false)}"> |
| | | <tr class="headerRow" height="30px" align="center"> |
| | | <td colspan="2"></td> |
| | | </tr> |
| | | </apex:variable> |
| | | <apex:repeat value="{!acccData}" var="or" id="oppTable2"> |
| | | <apex:variable value="{!1}" var="cnt"/> |
| | | <apex:variable value="trcnt" var="trcnt" rendered="{!IF(or.accessory.ContentType == '医院', true, false)}"> |
| | | <tr style="cursor:pointer;" onclick="changeColor('{!or.accessory.Id}');onShowImge('{!or.accessory.Id}',this);" class="dataRow {!IF(MOD(cnt, 2)==0, 'odd', 'even')} {!IF(cnt==1, 'first', '')}" onmouseover="if (window.hiOn){hiOn(this);} " onmouseout="if (window.hiOff){hiOff(this);} " onblur="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}"> |
| | | <td align="center" id="" style="border-right-width:thin"> |
| | | <a href="#"><apex:outputText value="{!or.accessory.Name}" /></a> |
| | | </td> |
| | | <td width="55px" align="center"> |
| | | <apex:outputText value="{!or.accessory.ContentType}" /> |
| | | </td> |
| | | <td style="display:none"> |
| | | <apex:outputText value="{!or.accessory.Id}"/> |
| | | </td> |
| | | </tr> |
| | | </apex:variable> |
| | | <apex:variable value="{!cnt + 1}" var="cnt" /> |
| | | </apex:repeat> |
| | | </table> |
| | | </apex:variable> |
| | | <!--asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end--> |
| | | </apex:outputPanel> |
| | | </apex:pageBlock> |
| | | |
| | | </div> |
| | | <!--左侧canvas画布和图片 展示当前点击的图片和画布--> |
| | | <div class="blankCss" id="blankId"> |
| | | <h1 style="position:absolute;top:50%;margin:-4% 0 0 -10%;"> |
| | | <font face="verdana" style="font-size: 40px;">图片预览展示区!</font> |
| | | </h1> |
| | | </div> |
| | | <div class="solution-item" id="imgeDiv"> |
| | | <div id="onCloseId" style="position: absolute;top:55px;padding-left:73%;cursor:pointer;display:none;"><a href="javascript:void(0)" onclick="closePop()" style="padding-rigth:13px;color:#fff;font-weight:bolder;font-size:15px;text-decoration: none;">关闭</a></div> |
| | | <!-- 增加pdf关闭按钮 精琢技术 thh 2021-09-27 start --> |
| | | <div class="PdfCss" id="fontpdf" style="display: none;"> |
| | | <h1 style="position:absolute;top:50%;margin:-4% 0 0 -10%;"> |
| | | <font face="verdana" style="font-size: 40px;">此页暂时只支持图片文件的预览</font> |
| | | </h1> |
| | | </div> |
| | | <!-- 增加pdf关闭按钮 精琢技术 thh 2021-09-27 end --> |
| | | <div class="content" id="contentId" style=""> |
| | | <div class="left" id="onIeftId" style="text-align: center;padding-top: 2%;width: 20%;height:98%;float:left;"> |
| | | </div> |
| | | <div class="right" id="onRigthId" style="text-align: center;padding-top: 2%;width: 20%;height:98%;float:right;"> |
| | | </div> |
| | | <div id="pandiv" style="margin-left: 17%; text-align: center;padding-top: 1%;height:98%"> |
| | | <!-- 原图 --> |
| | | <apex:image alt="此处的图像描述" id="testImg" style="display: none;" value=""> |
| | | </apex:image> |
| | | <!-- 画布 --> |
| | | <canvas height="485" id="canvas" style="cursor: default;" width="620"> |
| | | </canvas> |
| | | <!-- 旋转图片 --> |
| | | <!-- background-color: #fffdfd; --> |
| | | <div id="control" style="display: none;margin-top: -1%; margin-left: 24%; "> |
| | | <img id="left" onclick="rateImage(270)" src="/resource/esignimg06" style="heigh: 30px; width: 30px;cursor:pointer;" title="逆时针"/> |
| | | <img id="right" onclick="rateImage(90)" src="/resource/esignimg05" style="heigh: 30px; width: 30px;cursor:pointer;" title="顺时针"/> |
| | | <!-- <input id="left" onclick="rateImage(270)" type="button" value="←" /> |
| | | <input id="right" onclick="rateImage(90)" type="button" value="→"/> --> |
| | | </div> |
| | | </div> |
| | | <a href="" id="ViewOriginal" onclick="ViewOriginalImage();" style="margin-left:75%; color: #0f218b ;cursor:pointer;"> |
| | | 查看原图 |
| | | </a> |
| | | <!-- 用于切换 原图和画布 这里额外copy一个img标签(用于用户另存为) 不使用原图标签 因为会造成鼠标移入移出有问题 --> |
| | | <div align="center" id="OriginalDiv"> |
| | | <apex:image alt="此处的图像描述" id="testImgOriginal" style="display: none;height: 490px;width:700;padding-top: 2%;" value=""> |
| | | </apex:image> |
| | | <p id="Original" style="display: none;color: #0f218b;margin-left:57%;"> |
| | | <a href="" id="ViewPreview" onclick="ViewPreview();" style="color: #0f218b;cursor:pointer;font-size: 13px;"> |
| | | 查看预览 |
| | | </a> |
| | | </p> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!--隐藏id,用于存放当前显示的图片id--> |
| | | <input type="hidden" value="" id="newId"/> |
| | | </apex:outputPanel> |
| | | </apex:pageBlock> |
| | | |
| | | </div> |
| | | <!--左侧canvas画布和图片 展示当前点击的图片和画布--> |
| | | <div class="blankCss" id="blankId"> |
| | | <h1 style="position:absolute;top:50%;margin:-4% 0 0 -10%;"> |
| | | <font face="verdana" style="font-size: 40px;">图片预览展示区!</font> |
| | | </h1> |
| | | </div> |
| | | <div class="solution-item" id="imgeDiv"> |
| | | <div id="onCloseId" style="position: absolute;top:55px;padding-left:73%;cursor:pointer;display:none;"><a href="javascript:void(0)" onclick="closePop()" style="padding-rigth:13px;color:#fff;font-weight:bolder;font-size:15px;text-decoration: none;">关闭</a></div> |
| | | <!-- 增加pdf关闭按钮 精琢技术 thh 2021-09-27 start --> |
| | | <div class="PdfCss" id="fontpdf" style="display: none;"> |
| | | <h1 style="position:absolute;top:50%;margin:-4% 0 0 -10%;"> |
| | | <font face="verdana" style="font-size: 40px;">此页暂时只支持图片文件的预览</font> |
| | | </h1> |
| | | </div> |
| | | <!-- 增加pdf关闭按钮 精琢技术 thh 2021-09-27 end --> |
| | | <div class="content" id="contentId" style=""> |
| | | <div class="left" id="onIeftId" style="text-align: center;padding-top: 2%;width: 20%;height:98%;float:left;"> |
| | | </div> |
| | | <div class="right" id="onRigthId" style="text-align: center;padding-top: 2%;width: 20%;height:98%;float:right;"> |
| | | </div> |
| | | <div id="pandiv" style="margin-left: 17%; text-align: center;padding-top: 1%;height:98%"> |
| | | <!-- 原图 --> |
| | | <apex:image alt="此处的图像描述" id="testImg" style="display: none;" value=""> |
| | | </apex:image> |
| | | <!-- 画布 --> |
| | | <canvas height="485" id="canvas" style="cursor: default;" width="620"> |
| | | </canvas> |
| | | <!-- 旋转图片 --> |
| | | <!-- background-color: #fffdfd; --> |
| | | <div id="control" style="display: none;margin-top: -1%; margin-left: 24%; "> |
| | | <img id="left" onclick="rateImage(270)" src="/resource/esignimg06" style="heigh: 30px; width: 30px;cursor:pointer;" title="逆时针"/> |
| | | <img id="right" onclick="rateImage(90)" src="/resource/esignimg05" style="heigh: 30px; width: 30px;cursor:pointer;" title="顺时针"/> |
| | | <!-- <input id="left" onclick="rateImage(270)" type="button" value="←" /> |
| | | <input id="right" onclick="rateImage(90)" type="button" value="→"/> --> |
| | | </div> |
| | | </div> |
| | | <a href="" id="ViewOriginal" onclick="ViewOriginalImage();" style="margin-left:75%; color: #0f218b ;cursor:pointer;"> |
| | | 查看原图 |
| | | </a> |
| | | <!-- 用于切换 原图和画布 这里额外copy一个img标签(用于用户另存为) 不使用原图标签 因为会造成鼠标移入移出有问题 --> |
| | | <div align="center" id="OriginalDiv"> |
| | | <apex:image alt="此处的图像描述" id="testImgOriginal" style="display: none;height: 490px;width:700;padding-top: 2%;" value=""> |
| | | </apex:image> |
| | | <p id="Original" style="display: none;color: #0f218b;margin-left:57%;"> |
| | | <a href="" id="ViewPreview" onclick="ViewPreview();" style="color: #0f218b;cursor:pointer;font-size: 13px;"> |
| | | 查看预览 |
| | | </a> |
| | | </p> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!--隐藏id,用于存放当前显示的图片id--> |
| | | <input type="hidden" value="" id="newId"/> |
| | | <!--asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start--> |
| | | <!--隐藏id,用于存放当前显示的图片类型--> |
| | | <input type="hidden" value="" id="newContentType"/> |
| | | <input type="hidden" value="" id="newContentType"/> |
| | | <!--asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end--> |
| | | <script> |
| | | //分割线 旋转伸缩图片核心代码------------------------------------------------------------------- |
| | | //整个canvas 窗口的 伸缩 旋转 精琢技术 |
| | | <script> |
| | | //分割线 旋转伸缩图片核心代码------------------------------------------------------------------- |
| | | //整个canvas 窗口的 伸缩 旋转 精琢技术 |
| | | |
| | | //定义全局变量 |
| | | //图片后缀名 |
| | | var picType = 'jpg,png,jpeg,PNG,JPG,JPEG,bmp,BMP'; |
| | | //原始宽度 |
| | | var OriginalWidth = document.body.clientWidth; |
| | | //原始高度 |
| | | var OriginalHeight = document.body.clientHeight; |
| | | |
| | | //画布对象 |
| | | var canvas = document.getElementById("canvas"); |
| | | var pandiv = document.getElementById("pandiv"); |
| | | var cxt = canvas.getContext("2d"); |
| | | var control = document.getElementById("control"); |
| | | var imgScale = 1; |
| | | var img; |
| | | var imgX = 0; |
| | | var imgY = 0; |
| | | var currentRate = 0; |
| | | /**当前的旋转角度*/ |
| | | var mouseDownLocation; |
| | | var isMouseDown = false; |
| | | //右边的图片隐藏 |
| | | hiddenImge(); |
| | | //定义全局变量 |
| | | //图片后缀名 |
| | | var picType = 'jpg,png,jpeg,PNG,JPG,JPEG,bmp,BMP'; |
| | | //原始宽度 |
| | | var OriginalWidth = document.body.clientWidth; |
| | | //原始高度 |
| | | var OriginalHeight = document.body.clientHeight; |
| | | |
| | | //画布对象 |
| | | var canvas = document.getElementById("canvas"); |
| | | var pandiv = document.getElementById("pandiv"); |
| | | var cxt = canvas.getContext("2d"); |
| | | var control = document.getElementById("control"); |
| | | var imgScale = 1; |
| | | var img; |
| | | var imgX = 0; |
| | | var imgY = 0; |
| | | var currentRate = 0; |
| | | /**当前的旋转角度*/ |
| | | var mouseDownLocation; |
| | | var isMouseDown = false; |
| | | //右边的图片隐藏 |
| | | hiddenImge(); |
| | | |
| | | //下一张图片和上一张图片加点击事件 |
| | | $(".right").click(function (){ |
| | | rights(); |
| | | }); |
| | | $(".left").click(function (){ |
| | | lefts(); |
| | | }); |
| | | //下一张图片和上一张图片加点击事件 |
| | | $(".right").click(function (){ |
| | | rights(); |
| | | }); |
| | | $(".left").click(function (){ |
| | | lefts(); |
| | | }); |
| | | |
| | | //点击tr 右边视图展示图片 |
| | | function onShowImge(accId,obj){ |
| | | document.getElementById("blankId").style.display='none'; |
| | | document.getElementById("imgeDiv").style.display='block'; |
| | | //点击tr 右边视图展示图片 |
| | | function onShowImge(accId,obj){ |
| | | document.getElementById("blankId").style.display='none'; |
| | | document.getElementById("imgeDiv").style.display='block'; |
| | | |
| | | fadeIn("imgeDiv",1000); |
| | | //获取点击的附件名称 |
| | | var accName = obj.cells[0].innerText; |
| | | fadeIn("imgeDiv",1000); |
| | | //获取点击的附件名称 |
| | | var accName = obj.cells[0].innerText; |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start |
| | | //获取点击的附件类型 |
| | | var accContentType = obj.cells[1].innerText; |
| | | var accContentType = obj.cells[1].innerText; |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end |
| | | //截取后缀名 |
| | | var accType = accName.substring(accName.lastIndexOf('.')+1); |
| | | if(picType.indexOf(accType) > -1){//判断是否是图片 |
| | | //右边的画布显示 |
| | | showImge(); |
| | | //需要关闭原图 |
| | | ViewPreview(); |
| | | //图片加载和canvas 画图 |
| | | imgShow(accId,accContentType); |
| | | //关闭按钮展示 onClose |
| | | document.getElementById("onCloseId").style.display='block'; |
| | | }else{ |
| | | //如果不是图片,那么下载文件 |
| | | window.open('https://ocsm--stagefull--c.documentforce.com/servlet/servlet.FileDownload?file='+accId); |
| | | //这里上线的时候需要在线上修改 |
| | | //window.open('https://ocsm--c.ap0.content.force.com/servlet/servlet.FileDownload?file='+accId); |
| | | debugger |
| | | //右边的画布显示 |
| | | showPdf(); |
| | | //需要关闭原图 |
| | | ViewPreview(); |
| | | //hiddenImge(); |
| | | //关闭按钮展示 onClose |
| | | document.getElementById("onCloseId").style.display='block'; |
| | | } |
| | | |
| | | } |
| | | //下一张 |
| | | function rights(){ |
| | | var accId = document.getElementById("newId").value; |
| | | //截取后缀名 |
| | | var accType = accName.substring(accName.lastIndexOf('.')+1); |
| | | if(picType.indexOf(accType) > -1){//判断是否是图片 |
| | | //右边的画布显示 |
| | | showImge(); |
| | | //需要关闭原图 |
| | | ViewPreview(); |
| | | //图片加载和canvas 画图 |
| | | imgShow(accId,accContentType); |
| | | //关闭按钮展示 onClose |
| | | document.getElementById("onCloseId").style.display='block'; |
| | | }else{ |
| | | //如果不是图片,那么下载文件 |
| | | //window.open('https://ocsm--stagefull--c.documentforce.com/servlet/servlet.FileDownload?file='+accId); |
| | | window.open('https://ocsm--c.ap0.content.force.com/servlet/servlet.FileDownload?file='+accId); |
| | | debugger |
| | | //右边的画布显示 |
| | | showPdf(); |
| | | //需要关闭原图 |
| | | ViewPreview(); |
| | | //hiddenImge(); |
| | | //关闭按钮展示 onClose |
| | | document.getElementById("onCloseId").style.display='block'; |
| | | } |
| | | |
| | | } |
| | | //下一张 |
| | | function rights(){ |
| | | var accId = document.getElementById("newId").value; |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start |
| | | var accContentType = document.getElementById("newContentType").value; |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end |
| | | //获取下一张图片的id |
| | | var newId = ""; |
| | | var flag = false;//判断循环的数据是否已经到当前显示的图片位置 |
| | | var fristId = "";//记录第一个图片id,防止当前图片是最后一张 |
| | | //获取下一张图片的id |
| | | var newId = ""; |
| | | var flag = false;//判断循环的数据是否已经到当前显示的图片位置 |
| | | var fristId = "";//记录第一个图片id,防止当前图片是最后一张 |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start |
| | | var fristContentTyp = "";//记录第一个图片id,防止当前图片是最后一张 |
| | | var trs=[]; |
| | |
| | | trs = document.getElementById('tableHeader_M').getElementsByTagName('tr');//获取所有'医院'的tr |
| | | } |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end |
| | | for(var i = 1;i<trs.length;i++){ |
| | | var onId = trs[i].cells[2].innerText.trim();//获取当前图片的id |
| | | var onName = trs[i].cells[0].innerText.trim();//当前图片名称 |
| | | for(var i = 1;i<trs.length;i++){ |
| | | var onId = trs[i].cells[2].innerText.trim();//获取当前图片的id |
| | | var onName = trs[i].cells[0].innerText.trim();//当前图片名称 |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start |
| | | var onContentType = trs[i].cells[1].innerText.trim();//获取当前图片的类型 |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end |
| | | onName = onName.substring(onName.lastIndexOf('.')+1);//获取当前图片的后缀名 |
| | | if(picType.indexOf(onName) > -1){ |
| | | if(fristId == ""){ |
| | | fristId = onId; |
| | | onName = onName.substring(onName.lastIndexOf('.')+1);//获取当前图片的后缀名 |
| | | if(picType.indexOf(onName) > -1){ |
| | | if(fristId == ""){ |
| | | fristId = onId; |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start |
| | | fristContentType = onContentType; |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end |
| | | } |
| | | if(flag || onId == accId){ |
| | | if(!flag){ |
| | | flag = true; |
| | | continue; |
| | | }else{ |
| | | newId = onId; |
| | | } |
| | | if(flag || onId == accId){ |
| | | if(!flag){ |
| | | flag = true; |
| | | continue; |
| | | }else{ |
| | | newId = onId; |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start |
| | | newContentType = onContentType; |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end |
| | | break; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | if(newId == ""){ |
| | | newId = fristId; |
| | | break; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | if(newId == ""){ |
| | | newId = fristId; |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start |
| | | newContentType = fristContentType; |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end |
| | | } |
| | | //点击的tr变色 |
| | | changeColor(newId); |
| | | } |
| | | //点击的tr变色 |
| | | changeColor(newId); |
| | | |
| | | //初始化时,隐藏查看预览链接 与旋转图片无关 |
| | | $("#ViewPreview").hide(); |
| | | //初始化时,隐藏查看预览链接 与旋转图片无关 |
| | | $("#ViewPreview").hide(); |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start |
| | | //图片加载和canvas 画图 |
| | | imgShow(newId,newContentType); |
| | | //图片加载和canvas 画图 |
| | | imgShow(newId,newContentType); |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end |
| | | }; |
| | | }; |
| | | |
| | | //上一张 |
| | | function lefts(){ |
| | | var accId = document.getElementById("newId").value; |
| | | //上一张 |
| | | function lefts(){ |
| | | var accId = document.getElementById("newId").value; |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start |
| | | var accContentType = document.getElementById("newContentType").value; |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end |
| | | //获取下一张图片的id |
| | | var newId = ""; |
| | | var flag = false;// |
| | | var endId = "";//记录最后一个图片id,防止当前图片是第一张 |
| | | //获取下一张图片的id |
| | | var newId = ""; |
| | | var flag = false;// |
| | | var endId = "";//记录最后一个图片id,防止当前图片是第一张 |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start |
| | | var endContentTyp = "";//记录第一个图片id,防止当前图片是最后一张 |
| | | var trs=[]; |
| | | var trs=[]; |
| | | if(accContentType=='经销商'){ |
| | | trs = document.getElementById('tableHeader_L').getElementsByTagName('tr');//获取所有经销商的tr |
| | | }else if(accContentType=='医院'){ |
| | | trs = document.getElementById('tableHeader_M').getElementsByTagName('tr');//获取所有'医院'的tr |
| | | }//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end |
| | | for(var i = (trs.length-1);i >= 1;i--){ |
| | | var onId = trs[i].cells[2].innerText.trim();//获取当前图片的id |
| | | var onName = trs[i].cells[0].innerText.trim();//当前图片名称 |
| | | for(var i = (trs.length-1);i >= 1;i--){ |
| | | var onId = trs[i].cells[2].innerText.trim();//获取当前图片的id |
| | | var onName = trs[i].cells[0].innerText.trim();//当前图片名称 |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start |
| | | var onContentType = trs[i].cells[1].innerText.trim();//获取当前图片的类型 |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end |
| | | onName = onName.substring(onName.lastIndexOf('.')+1);//获取当前图片的后缀名 |
| | | if(picType.indexOf(onName) > -1){ |
| | | if(endId == ""){ |
| | | endId = onId; |
| | | onName = onName.substring(onName.lastIndexOf('.')+1);//获取当前图片的后缀名 |
| | | if(picType.indexOf(onName) > -1){ |
| | | if(endId == ""){ |
| | | endId = onId; |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start |
| | | endContentType = onContentType; |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end |
| | | } |
| | | if(flag || onId == accId){ |
| | | if(!flag){ |
| | | flag = true; |
| | | continue; |
| | | }else{ |
| | | newId = onId; |
| | | } |
| | | if(flag || onId == accId){ |
| | | if(!flag){ |
| | | flag = true; |
| | | continue; |
| | | }else{ |
| | | newId = onId; |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start |
| | | newContentType = onContentType; |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end |
| | | break; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | if(newId == ""){ |
| | | newId = endId; |
| | | break; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | if(newId == ""){ |
| | | newId = endId; |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start |
| | | newContentType = endContentType; |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end |
| | | } |
| | | changeColor(newId); |
| | | //初始化时,隐藏查看预览链接 与旋转图片无关 |
| | | $("#ViewPreview").hide(); |
| | | } |
| | | changeColor(newId); |
| | | //初始化时,隐藏查看预览链接 与旋转图片无关 |
| | | $("#ViewPreview").hide(); |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start |
| | | //图片加载和canvas 画图 |
| | | imgShow(newId,newContentType); |
| | | //图片加载和canvas 画图 |
| | | imgShow(newId,newContentType); |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end |
| | | } |
| | | //图片加载和canvas 画图 |
| | | function imgShow(accId,accContentType){ |
| | | var imageUrl = "/servlet/servlet.FileDownload?file="+accId; |
| | | //js动态赋值 |
| | | document.getElementById("j_id0:testImg").src = imageUrl; |
| | | //js动态赋值 |
| | | document.getElementById("j_id0:testImgOriginal").src = imageUrl; |
| | | canvas = document.getElementById("canvas"); |
| | | canvas.height=canvas.height; //清空canvas画布 |
| | | pandiv = document.getElementById("pandiv"); |
| | | cxt = canvas.getContext("2d"); |
| | | control = document.getElementById("control"); |
| | | //等待图片加载,然后canvas 画布 |
| | | awaitImge(imageUrl); |
| | | //用一个隐藏的input标签存放当前页面展示的图片id |
| | | document.getElementById("newId").value=accId; |
| | | } |
| | | //图片加载和canvas 画图 |
| | | function imgShow(accId,accContentType){ |
| | | var imageUrl = "/servlet/servlet.FileDownload?file="+accId; |
| | | //js动态赋值 |
| | | document.getElementById("j_id0:testImg").src = imageUrl; |
| | | //js动态赋值 |
| | | document.getElementById("j_id0:testImgOriginal").src = imageUrl; |
| | | canvas = document.getElementById("canvas"); |
| | | canvas.height=canvas.height; //清空canvas画布 |
| | | pandiv = document.getElementById("pandiv"); |
| | | cxt = canvas.getContext("2d"); |
| | | control = document.getElementById("control"); |
| | | //等待图片加载,然后canvas 画布 |
| | | awaitImge(imageUrl); |
| | | //用一个隐藏的input标签存放当前页面展示的图片id |
| | | document.getElementById("newId").value=accId; |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start |
| | | //用一个隐藏的input标签存放当前页面展示的图片类型 |
| | | document.getElementById("newContentType").value=accContentType; |
| | | document.getElementById("newContentType").value=accContentType; |
| | | //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end |
| | | //等待图片加载,然后canvas画图 |
| | | awaitImge(imageUrl); |
| | | } |
| | | //等待图片加载,然后canvas画图 |
| | | awaitImge(imageUrl); |
| | | } |
| | | |
| | | |
| | | //首先加载图片,再使用canvas画图 |
| | | function awaitImge(imageUrl){ |
| | | img = new Image(); |
| | | img.src = imageUrl; |
| | | img.id = "pic"; |
| | | //定义一个计数函数,用于停止setTimeout循环,防止程序变成死循环 |
| | | var counter = 0; |
| | | //使用链式setTimeout(),如果没达到条件就会自动重新调用一个setTimeout |
| | | var boolImg = setTimeout(function fn(){ |
| | | if(document.getElementById("j_id0:testImg").complete){//判断图片是否加载完成 |
| | | loadImage(); |
| | | cxt.drawImage(img, imgX, imgY, img.width * imgScale, img.height * imgScale); |
| | | }else{ |
| | | counter ++; |
| | | //如果5分钟之内图片还没有加载出来,就停止setTimeout |
| | | if(counter <= 30000){ |
| | | setTimeout(fn,16); |
| | | }else{ |
| | | clearTimeout(boolImg);//停止定时任务 |
| | | } |
| | | } |
| | | },10); |
| | | } |
| | | //点击或下一行时,表格行变色 |
| | | function changeColor(accId){ |
| | | var trs=[]; |
| | | var trs1=[]; |
| | | var identifier=document.getElementById("identifier").value; |
| | | var identifier2=document.getElementById("identifier2").value; |
| | | |
| | | if(identifier =='经销商'){ |
| | | trs = document.getElementById('tableHeader_L').getElementsByTagName('tr'); |
| | | for(var i = 1;i<trs.length;i++){ |
| | | var onId = trs[i].cells[2].innerText.trim(); |
| | | if(onId == accId){ |
| | | trs[i].style.backgroundColor = "#e3f3ff"; |
| | | }else{ |
| | | trs[i].style.backgroundColor = "#fff"; |
| | | } |
| | | } |
| | | } |
| | | if(identifier2 =='医院'){ |
| | | trs1 = document.getElementById('tableHeader_M').getElementsByTagName('tr'); |
| | | for(var j = 1;j<trs1.length;j++){ |
| | | var onId = trs1[j].cells[2].innerText.trim(); |
| | | if(onId == accId){ |
| | | trs1[j].style.backgroundColor = "#e3f3ff"; |
| | | }else{ |
| | | trs1[j].style.backgroundColor = "#fff"; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | //关闭按钮 |
| | | function closePop(){ |
| | | debugger |
| | | var eSignFormAutoSign = "{!eSignForm.agencyAutoSignUpStatus__c}"; |
| | | var eSignFormHPSign = "{!eSignForm.HPSignUpStatus__c}"; |
| | | if(eSignFormAutoSign!="申请中"&&eSignFormHPSign!="申请中"){ |
| | | closePreview(); |
| | | }else{ |
| | | if(eSignFormAutoSign=="申请中"&&eSignFormHPSign=="申请中"){ |
| | | // var accContentType = document.getElementById("newContentType").value; |
| | | // if(accContentType=="经销商"){ |
| | | JinXiaoShang(); |
| | | // }else if(accContentType=="医院"){ |
| | | // YiYuan(); |
| | | // } |
| | | }else if(eSignFormAutoSign=="申请中"&&eSignFormHPSign!="申请中"){ |
| | | JinXiaoShang(); |
| | | }else if(eSignFormAutoSign!="申请中"&&eSignFormHPSign=="申请中"){ |
| | | YiYuan(); |
| | | } |
| | | } |
| | | } |
| | | //经销商审核 |
| | | function JinXiaoShang(){ |
| | | //当前用户登录id |
| | | var userId = "{!CASESAFEID($User.Id)}"; |
| | | //当前用户简档id |
| | | var ProfileId = "{!$Profile.Id}"; |
| | | //先判断是否为集采课 |
| | | var Group_purchase_PCL ; |
| | | var Group_purchase_PCLFlag = "{!eSignForm.Group_purchase_PCL__c}"; |
| | | if(Group_purchase_PCLFlag=='true'){ |
| | | Group_purchase_PCL = '集采课'; |
| | | }else{ |
| | | Group_purchase_PCL = "{!eSignForm.OCM_man_province_cus__c}"; |
| | | } |
| | | //检索OCSM管理省 上的营业管理部担当 |
| | | var sql = "select id, Name, SalesManage__c from OCM_Management_Province__c where Name = "+"\'"+Group_purchase_PCL+"\'"; |
| | | sforce.connection.sessionId = '{!$Api.Session_ID}'; |
| | | var ocsmResult = sforce.connection.query(sql); |
| | | var ocsm = ocsmResult.getArray("records"); |
| | | //营业管理部担当id |
| | | var salesManage; |
| | | if (ocsm) { |
| | | salesManage = ocsm[0].SalesManage__c; |
| | | } |
| | | //电子签收单id |
| | | var id = "{!eSignForm.Id}"; |
| | | //new 一个对象 |
| | | var eSignForm; |
| | | //经销商状态 |
| | | var status = "{!eSignForm.agencyAutoSignUpStatus__c}"; |
| | | if(ProfileId!=undefined){ |
| | | ProfileId=ProfileId.substring(0,15); |
| | | } |
| | | if (salesManage || ProfileId == '00e10000000Y3o5') { |
| | | if (salesManage != userId && ProfileId != '00e10000000Y3o5') { |
| | | // alert('您只能审批营业管理部担当是自己的签收单!'); |
| | | closePreview(); |
| | | return; |
| | | } else if (status != '申请中') { |
| | | // alert('您只能审批申请中的签收单!') |
| | | closePreview(); |
| | | return; |
| | | } else if (!'{!eSignForm.agencySignUpDate__c}') { |
| | | // alert('经销商签收日为空时,不可以确认!'); |
| | | closePreview(); |
| | | return; |
| | | }else{ |
| | | if(confirm("是否审核?")){ |
| | | window.open ('/apex/AgencyConfirmPage?id='+"{!eSignForm.Id}", '经销商确认', |
| | | 'height=440, width=750, top=150, left=300, toolbar=no, menubar=no, scrollbars=no, location=no, status=no'); |
| | | }else{ |
| | | hiddenImge(); |
| | | //关闭按钮展示 onClose |
| | | document.getElementById("onCloseId").style.display='none'; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | //医院审核 |
| | | function YiYuan(){ |
| | | //当前用户登录id |
| | | var userId = "{!CASESAFEID($User.Id)}"; |
| | | //当前用户简档id |
| | | var ProfileId = "{!$Profile.Id}"; |
| | | //先判断是否为集采课 |
| | | var Group_purchase_PCL ; |
| | | var Group_purchase_PCLFlag = "{!eSignForm.Group_purchase_PCL__c}"; |
| | | if(Group_purchase_PCLFlag=='true'){ |
| | | Group_purchase_PCL = '集采课'; |
| | | }else{ |
| | | Group_purchase_PCL = "{!eSignForm.OCM_man_province_cus__c}"; |
| | | } |
| | | //检索OCSM管理省 上的营业管理部担当 |
| | | var sql = "select id, Name, SalesManage__c from OCM_Management_Province__c where Name = "+"\'"+Group_purchase_PCL+"\'"; |
| | | sforce.connection.sessionId = '{!$Api.Session_ID}'; |
| | | var ocsmResult = sforce.connection.query(sql); |
| | | var ocsm = ocsmResult.getArray("records"); |
| | | //营业管理部担当id |
| | | var salesManage; |
| | | if (ocsm) { |
| | | salesManage = ocsm[0].SalesManage__c; |
| | | } |
| | | //首先加载图片,再使用canvas画图 |
| | | function awaitImge(imageUrl){ |
| | | img = new Image(); |
| | | img.src = imageUrl; |
| | | img.id = "pic"; |
| | | //定义一个计数函数,用于停止setTimeout循环,防止程序变成死循环 |
| | | var counter = 0; |
| | | //使用链式setTimeout(),如果没达到条件就会自动重新调用一个setTimeout |
| | | var boolImg = setTimeout(function fn(){ |
| | | if(document.getElementById("j_id0:testImg").complete){//判断图片是否加载完成 |
| | | loadImage(); |
| | | cxt.drawImage(img, imgX, imgY, img.width * imgScale, img.height * imgScale); |
| | | }else{ |
| | | counter ++; |
| | | //如果5分钟之内图片还没有加载出来,就停止setTimeout |
| | | if(counter <= 30000){ |
| | | setTimeout(fn,16); |
| | | }else{ |
| | | clearTimeout(boolImg);//停止定时任务 |
| | | } |
| | | } |
| | | },10); |
| | | } |
| | | //点击或下一行时,表格行变色 |
| | | function changeColor(accId){ |
| | | var trs=[]; |
| | | var trs1=[]; |
| | | var identifier=document.getElementById("identifier").value; |
| | | var identifier2=document.getElementById("identifier2").value; |
| | | |
| | | if(identifier =='经销商'){ |
| | | trs = document.getElementById('tableHeader_L').getElementsByTagName('tr'); |
| | | for(var i = 1;i<trs.length;i++){ |
| | | var onId = trs[i].cells[2].innerText.trim(); |
| | | if(onId == accId){ |
| | | trs[i].style.backgroundColor = "#e3f3ff"; |
| | | }else{ |
| | | trs[i].style.backgroundColor = "#fff"; |
| | | } |
| | | } |
| | | } |
| | | if(identifier2 =='医院'){ |
| | | trs1 = document.getElementById('tableHeader_M').getElementsByTagName('tr'); |
| | | for(var j = 1;j<trs1.length;j++){ |
| | | var onId = trs1[j].cells[2].innerText.trim(); |
| | | if(onId == accId){ |
| | | trs1[j].style.backgroundColor = "#e3f3ff"; |
| | | }else{ |
| | | trs1[j].style.backgroundColor = "#fff"; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | //关闭按钮 |
| | | function closePop(){ |
| | | debugger |
| | | var eSignFormAutoSign = "{!eSignForm.agencyAutoSignUpStatus__c}"; |
| | | var eSignFormHPSign = "{!eSignForm.HPSignUpStatus__c}"; |
| | | if(eSignFormAutoSign!="申请中"&&eSignFormHPSign!="申请中"){ |
| | | closePreview(); |
| | | }else{ |
| | | if(eSignFormAutoSign=="申请中"&&eSignFormHPSign=="申请中"){ |
| | | // var accContentType = document.getElementById("newContentType").value; |
| | | // if(accContentType=="经销商"){ |
| | | JinXiaoShang(); |
| | | // }else if(accContentType=="医院"){ |
| | | // YiYuan(); |
| | | // } |
| | | }else if(eSignFormAutoSign=="申请中"&&eSignFormHPSign!="申请中"){ |
| | | JinXiaoShang(); |
| | | }else if(eSignFormAutoSign!="申请中"&&eSignFormHPSign=="申请中"){ |
| | | YiYuan(); |
| | | } |
| | | } |
| | | } |
| | | //经销商审核 |
| | | function JinXiaoShang(){ |
| | | //当前用户登录id |
| | | var userId = "{!CASESAFEID($User.Id)}"; |
| | | //当前用户简档id |
| | | var ProfileId = "{!$Profile.Id}"; |
| | | //先判断是否为集采课 |
| | | var Group_purchase_PCL ; |
| | | var Group_purchase_PCLFlag = "{!eSignForm.Group_purchase_PCL__c}"; |
| | | if(Group_purchase_PCLFlag=='true'){ |
| | | Group_purchase_PCL = '集采课'; |
| | | }else{ |
| | | Group_purchase_PCL = "{!eSignForm.OCM_man_province_cus__c}"; |
| | | } |
| | | //检索OCSM管理省 上的营业管理部担当 |
| | | var sql = "select id, Name, SalesManage__c from OCM_Management_Province__c where Name = "+"\'"+Group_purchase_PCL+"\'"; |
| | | sforce.connection.sessionId = '{!$Api.Session_ID}'; |
| | | var ocsmResult = sforce.connection.query(sql); |
| | | var ocsm = ocsmResult.getArray("records"); |
| | | //营业管理部担当id |
| | | var salesManage; |
| | | if (ocsm) { |
| | | salesManage = ocsm[0].SalesManage__c; |
| | | } |
| | | //电子签收单id |
| | | var id = "{!eSignForm.Id}"; |
| | | //new 一个对象 |
| | | var eSignForm; |
| | | //经销商状态 |
| | | var status = "{!eSignForm.agencyAutoSignUpStatus__c}"; |
| | | if(ProfileId!=undefined){ |
| | | ProfileId=ProfileId.substring(0,15); |
| | | } |
| | | if (salesManage || ProfileId == '00e10000000Y3o5') { |
| | | if (salesManage != userId && ProfileId != '00e10000000Y3o5') { |
| | | // alert('您只能审批营业管理部担当是自己的签收单!'); |
| | | closePreview(); |
| | | return; |
| | | } else if (status != '申请中') { |
| | | // alert('您只能审批申请中的签收单!') |
| | | closePreview(); |
| | | return; |
| | | } else if (!'{!eSignForm.agencySignUpDate__c}') { |
| | | // alert('经销商签收日为空时,不可以确认!'); |
| | | closePreview(); |
| | | return; |
| | | }else{ |
| | | if(confirm("是否审核?")){ |
| | | window.open ('/apex/AgencyConfirmPage?id='+"{!eSignForm.Id}", '经销商确认', |
| | | 'height=440, width=750, top=150, left=300, toolbar=no, menubar=no, scrollbars=no, location=no, status=no'); |
| | | }else{ |
| | | hiddenImge(); |
| | | //关闭按钮展示 onClose |
| | | document.getElementById("onCloseId").style.display='none'; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | //医院审核 |
| | | function YiYuan(){ |
| | | //当前用户登录id |
| | | var userId = "{!CASESAFEID($User.Id)}"; |
| | | //当前用户简档id |
| | | var ProfileId = "{!$Profile.Id}"; |
| | | //先判断是否为集采课 |
| | | var Group_purchase_PCL ; |
| | | var Group_purchase_PCLFlag = "{!eSignForm.Group_purchase_PCL__c}"; |
| | | if(Group_purchase_PCLFlag=='true'){ |
| | | Group_purchase_PCL = '集采课'; |
| | | }else{ |
| | | Group_purchase_PCL = "{!eSignForm.OCM_man_province_cus__c}"; |
| | | } |
| | | //检索OCSM管理省 上的营业管理部担当 |
| | | var sql = "select id, Name, SalesManage__c from OCM_Management_Province__c where Name = "+"\'"+Group_purchase_PCL+"\'"; |
| | | sforce.connection.sessionId = '{!$Api.Session_ID}'; |
| | | var ocsmResult = sforce.connection.query(sql); |
| | | var ocsm = ocsmResult.getArray("records"); |
| | | //营业管理部担当id |
| | | var salesManage; |
| | | if (ocsm) { |
| | | salesManage = ocsm[0].SalesManage__c; |
| | | } |
| | | |
| | | //电子签收单id |
| | | var id = "{!eSignForm.Id}"; |
| | | //new 一个对象 |
| | | var eSignForm; |
| | | //医院状态 |
| | | var status = "{!eSignForm.HPSignUpStatus__c}"; |
| | | //销售渠道 |
| | | var sales_Root_Formula = "{!eSignForm.Sales_Root_Formula__c}"; |
| | | if(ProfileId!=undefined){ |
| | | ProfileId=ProfileId.substring(0,15); |
| | | } |
| | | if (salesManage || ProfileId == '00e10000000Y3o5') { |
| | | if (salesManage != userId && ProfileId != '00e10000000Y3o5') { |
| | | // alert('您只能审批营业管理部担当是自己的签收单!'); |
| | | closePreview(); |
| | | return; |
| | | } else if (status != '申请中') { |
| | | // alert('您只能审批申请中的签收单!') |
| | | closePreview(); |
| | | return; |
| | | } else if (!'{!eSignForm.HPSignUpDate__c}') { |
| | | // alert('医院签收日为空时,不可以确认!'); |
| | | closePreview(); |
| | | return; |
| | | }else{ |
| | | if(sales_Root_Formula == 'OCM直接販売'){ |
| | | if(confirm("是否审核?")){ |
| | | window.open ('/apex/HPDirectSalesConfirmPage?id='+"{!eSignForm.Id}", '医院确认', |
| | | 'height=340, width=600, top=200, left=400, toolbar=no, menubar=no, scrollbars=no, location=no, status=no'); |
| | | }else{ |
| | | hiddenImge(); |
| | | //关闭按钮展示 onClose |
| | | document.getElementById("onCloseId").style.display='none'; |
| | | } |
| | | }else{ |
| | | if(confirm("是否审核?")){ |
| | | window.open ('/apex/HPConfirmPage?id='+"{!eSignForm.Id}", '医院确认', |
| | | 'height=340, width=600, top=200, left=400, toolbar=no, menubar=no, scrollbars=no, location=no, status=no'); |
| | | }else{ |
| | | hiddenImge(); |
| | | //关闭按钮展示 onClose |
| | | document.getElementById("onCloseId").style.display='none'; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | //关闭预览提示框 |
| | | function closePreview(){ |
| | | if(confirm("真的要关闭吗?")){ |
| | | hiddenImge(); |
| | | //关闭按钮展示 onClose |
| | | document.getElementById("onCloseId").style.display='none'; |
| | | debugger |
| | | } |
| | | } |
| | | //点击关闭按钮,需要把右边的试图隐藏 |
| | | function hiddenImge(){ |
| | | canvas = document.getElementById("canvas"); |
| | | canvas.height=canvas.height; //清空canvas画布 |
| | | //电子签收单id |
| | | var id = "{!eSignForm.Id}"; |
| | | //new 一个对象 |
| | | var eSignForm; |
| | | //医院状态 |
| | | var status = "{!eSignForm.HPSignUpStatus__c}"; |
| | | //销售渠道 |
| | | var sales_Root_Formula = "{!eSignForm.Sales_Root_Formula__c}"; |
| | | if(ProfileId!=undefined){ |
| | | ProfileId=ProfileId.substring(0,15); |
| | | } |
| | | if (salesManage || ProfileId == '00e10000000Y3o5') { |
| | | if (salesManage != userId && ProfileId != '00e10000000Y3o5') { |
| | | // alert('您只能审批营业管理部担当是自己的签收单!'); |
| | | closePreview(); |
| | | return; |
| | | } else if (status != '申请中') { |
| | | // alert('您只能审批申请中的签收单!') |
| | | closePreview(); |
| | | return; |
| | | } else if (!'{!eSignForm.HPSignUpDate__c}') { |
| | | // alert('医院签收日为空时,不可以确认!'); |
| | | closePreview(); |
| | | return; |
| | | }else{ |
| | | if(sales_Root_Formula == 'OCM直接販売'){ |
| | | if(confirm("是否审核?")){ |
| | | window.open ('/apex/HPDirectSalesConfirmPage?id='+"{!eSignForm.Id}", '医院确认', |
| | | 'height=340, width=600, top=200, left=400, toolbar=no, menubar=no, scrollbars=no, location=no, status=no'); |
| | | }else{ |
| | | hiddenImge(); |
| | | //关闭按钮展示 onClose |
| | | document.getElementById("onCloseId").style.display='none'; |
| | | } |
| | | }else{ |
| | | if(confirm("是否审核?")){ |
| | | window.open ('/apex/HPConfirmPage?id='+"{!eSignForm.Id}", '医院确认', |
| | | 'height=340, width=600, top=200, left=400, toolbar=no, menubar=no, scrollbars=no, location=no, status=no'); |
| | | }else{ |
| | | hiddenImge(); |
| | | //关闭按钮展示 onClose |
| | | document.getElementById("onCloseId").style.display='none'; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | //关闭预览提示框 |
| | | function closePreview(){ |
| | | if(confirm("真的要关闭吗?")){ |
| | | hiddenImge(); |
| | | //关闭按钮展示 onClose |
| | | document.getElementById("onCloseId").style.display='none'; |
| | | debugger |
| | | } |
| | | } |
| | | //点击关闭按钮,需要把右边的试图隐藏 |
| | | function hiddenImge(){ |
| | | canvas = document.getElementById("canvas"); |
| | | canvas.height=canvas.height; //清空canvas画布 |
| | | |
| | | // 隐藏右边的图片展示 |
| | | let popDiv = document.getElementById("pandiv"); |
| | | popDiv.style.display = "none"; |
| | | |
| | | //上一张和下一张隐藏 |
| | | $(".left").hide(); |
| | | $(".right").hide(); |
| | | // 隐藏右边的图片展示 |
| | | let popDiv = document.getElementById("pandiv"); |
| | | popDiv.style.display = "none"; |
| | | |
| | | //上一张和下一张隐藏 |
| | | $(".left").hide(); |
| | | $(".right").hide(); |
| | | |
| | | document.getElementById("blankId").style.display='block'; |
| | | document.getElementById("imgeDiv").style.display='none'; |
| | | } |
| | | document.getElementById("blankId").style.display='block'; |
| | | document.getElementById("imgeDiv").style.display='none'; |
| | | } |
| | | |
| | | function showImge(){ |
| | | document.getElementById("contentId").style.display = "block"; |
| | | document.getElementById("canvas").style.display = "block"; |
| | | canvas = document.getElementById("canvas"); |
| | | // canvas.height=canvas.height; //清空canvas画布 |
| | | canvas.height=screen.availHeight*0.65; |
| | | let popDiv = document.getElementById("pandiv"); |
| | | popDiv.style.display = "block"; |
| | | //上一张和下一张显示 |
| | | $(".left").show(); |
| | | $(".right").show(); |
| | | //查看原图链接取消隐藏 |
| | | $("#ViewOriginal").show(); |
| | | //关闭“暂时只支持图片文件的预览”文字提示 |
| | | document.getElementById("fontpdf").style.display = "none"; |
| | | } |
| | | function showImge(){ |
| | | document.getElementById("contentId").style.display = "block"; |
| | | document.getElementById("canvas").style.display = "block"; |
| | | canvas = document.getElementById("canvas"); |
| | | // canvas.height=canvas.height; //清空canvas画布 |
| | | canvas.height=screen.availHeight*0.65; |
| | | let popDiv = document.getElementById("pandiv"); |
| | | popDiv.style.display = "block"; |
| | | //上一张和下一张显示 |
| | | $(".left").show(); |
| | | $(".right").show(); |
| | | //查看原图链接取消隐藏 |
| | | $("#ViewOriginal").show(); |
| | | //关闭“暂时只支持图片文件的预览”文字提示 |
| | | document.getElementById("fontpdf").style.display = "none"; |
| | | } |
| | | |
| | | //增加pdf关闭按钮 精琢技术 thh 2021-09-27 start |
| | | function showPdf(){ |
| | | document.getElementById("canvas").style.display = "none"; |
| | | //显示“暂时只支持图片文件的预览” |
| | | let fontpdf = document.getElementById("fontpdf"); |
| | | fontpdf.style.display = "block"; |
| | | // 隐藏右边的图片展示 |
| | | let popDiv = document.getElementById("pandiv"); |
| | | popDiv.style.display = "none"; |
| | | document.getElementById("contentId").style.display = "none"; |
| | | //上一张和下一张隐藏 |
| | | $(".left").hide(); |
| | | $(".right").hide(); |
| | | $("#ViewOriginal").hide(); |
| | | } |
| | | //增加pdf关闭按钮 精琢技术 thh 2021-09-27 end |
| | | //增加pdf关闭按钮 精琢技术 thh 2021-09-27 start |
| | | function showPdf(){ |
| | | document.getElementById("canvas").style.display = "none"; |
| | | //显示“暂时只支持图片文件的预览” |
| | | let fontpdf = document.getElementById("fontpdf"); |
| | | fontpdf.style.display = "block"; |
| | | // 隐藏右边的图片展示 |
| | | let popDiv = document.getElementById("pandiv"); |
| | | popDiv.style.display = "none"; |
| | | document.getElementById("contentId").style.display = "none"; |
| | | //上一张和下一张隐藏 |
| | | $(".left").hide(); |
| | | $(".right").hide(); |
| | | $("#ViewOriginal").hide(); |
| | | } |
| | | //增加pdf关闭按钮 精琢技术 thh 2021-09-27 end |
| | | |
| | | // windowToCanvas此方法用于鼠标所在点的坐标切换到画布上的坐标 |
| | | function windowToCanvas(canvas, x, y) { |
| | | var bbox = canvas.getBoundingClientRect(); |
| | | return { |
| | | x : x - bbox.left - (bbox.width - canvas.width) / 2, |
| | | y : y - bbox.top - (bbox.height - canvas.height) / 2 |
| | | }; |
| | | } |
| | | |
| | | function isPointInImageArea(point) { |
| | | return true; |
| | | } |
| | | function isPointInCanvasArea(point) { |
| | | return true; |
| | | } |
| | | function isDivArea(point) { |
| | | return true; |
| | | } |
| | | |
| | | canvas.onmousewheel = canvas.onwheel = function(event) { |
| | | var pos = windowToCanvas(canvas, event.clientX, event.clientY); |
| | | event.wheelDelta = event.wheelDelta ? event.wheelDelta |
| | | : (event.deltaY * (-40)); |
| | | |
| | | if (event.wheelDelta > 0) { |
| | | |
| | | if (isPointInImageArea(pos)) { |
| | | imgScale *= 2; |
| | | |
| | | imgX = (canvas.width - img.width * imgScale) / 2 |
| | | imgY = (canvas.height - img.height * imgScale) / 2 |
| | | } else { |
| | | imgScale *= 2; |
| | | |
| | | imgX = (canvas.width - img.width * imgScale) / 2 |
| | | imgY = (canvas.height - img.height * imgScale) / 2 |
| | | } |
| | | } else { |
| | | |
| | | if (isPointInImageArea(pos)) { |
| | | imgScale /= 2; |
| | | |
| | | imgX = (canvas.width - img.width * imgScale) / 2 |
| | | imgY = (canvas.height - img.height * imgScale) / 2 |
| | | } else { |
| | | imgScale /= 2; |
| | | |
| | | imgX = (canvas.width - img.width * imgScale) / 2 |
| | | imgY = (canvas.height - img.height * imgScale) / 2 |
| | | } |
| | | } |
| | | drawImage(); |
| | | return false; |
| | | } |
| | | |
| | | /**旋转angle度*/ |
| | | function rateImage(angle) { |
| | | debugger |
| | | currentRate = (currentRate + angle) % 360; |
| | | |
| | | cxt.clearRect(0, 0, canvas.width, canvas.height); |
| | | // windowToCanvas此方法用于鼠标所在点的坐标切换到画布上的坐标 |
| | | function windowToCanvas(canvas, x, y) { |
| | | var bbox = canvas.getBoundingClientRect(); |
| | | return { |
| | | x : x - bbox.left - (bbox.width - canvas.width) / 2, |
| | | y : y - bbox.top - (bbox.height - canvas.height) / 2 |
| | | }; |
| | | } |
| | | |
| | | function isPointInImageArea(point) { |
| | | return true; |
| | | } |
| | | function isPointInCanvasArea(point) { |
| | | return true; |
| | | } |
| | | function isDivArea(point) { |
| | | return true; |
| | | } |
| | | |
| | | canvas.onmousewheel = canvas.onwheel = function(event) { |
| | | var pos = windowToCanvas(canvas, event.clientX, event.clientY); |
| | | event.wheelDelta = event.wheelDelta ? event.wheelDelta |
| | | : (event.deltaY * (-40)); |
| | | |
| | | if (event.wheelDelta > 0) { |
| | | |
| | | if (isPointInImageArea(pos)) { |
| | | imgScale *= 2; |
| | | |
| | | imgX = (canvas.width - img.width * imgScale) / 2 |
| | | imgY = (canvas.height - img.height * imgScale) / 2 |
| | | } else { |
| | | imgScale *= 2; |
| | | |
| | | imgX = (canvas.width - img.width * imgScale) / 2 |
| | | imgY = (canvas.height - img.height * imgScale) / 2 |
| | | } |
| | | } else { |
| | | |
| | | if (isPointInImageArea(pos)) { |
| | | imgScale /= 2; |
| | | |
| | | imgX = (canvas.width - img.width * imgScale) / 2 |
| | | imgY = (canvas.height - img.height * imgScale) / 2 |
| | | } else { |
| | | imgScale /= 2; |
| | | |
| | | imgX = (canvas.width - img.width * imgScale) / 2 |
| | | imgY = (canvas.height - img.height * imgScale) / 2 |
| | | } |
| | | } |
| | | drawImage(); |
| | | return false; |
| | | } |
| | | |
| | | /**旋转angle度*/ |
| | | function rateImage(angle) { |
| | | debugger |
| | | currentRate = (currentRate + angle) % 360; |
| | | |
| | | cxt.clearRect(0, 0, canvas.width, canvas.height); |
| | | |
| | | cxt.translate(canvas.width / 2, canvas.height / 2); |
| | | cxt.save(); |
| | | cxt.rotate(angle * Math.PI / 180); |
| | | cxt.translate(-canvas.width / 2, -canvas.height / 2); |
| | | imgScale = 1; |
| | | reLoadImage(); |
| | | drawImage(); |
| | | } |
| | | cxt.translate(canvas.width / 2, canvas.height / 2); |
| | | cxt.save(); |
| | | cxt.rotate(angle * Math.PI / 180); |
| | | cxt.translate(-canvas.width / 2, -canvas.height / 2); |
| | | imgScale = 1; |
| | | reLoadImage(); |
| | | drawImage(); |
| | | } |
| | | |
| | | function reLoadImage() { |
| | | loadImage(); |
| | | } |
| | | |
| | | /**鼠标按下*/ |
| | | pandiv.onmousedown = function(event) { |
| | | mouseDownLocation = windowToCanvas(canvas, event.clientX, event.clientY); |
| | | if (isPointInImageArea(mouseDownLocation)) { |
| | | isMouseDown = true; |
| | | document.title = '查看附件'; |
| | | } |
| | | } |
| | | /**鼠标弹起*/ |
| | | document.body.onmouseup = function() { |
| | | isMouseDown = false; |
| | | canvas.style.cursor = "default"; |
| | | document.title = '查看附件'; |
| | | } |
| | | /**鼠标移动*/ |
| | | pandiv.onmousemove = function(event) { |
| | | if (isMouseDown) { |
| | | canvas.style.cursor = "move"; |
| | | var newMouseLocation = windowToCanvas(canvas, event.clientX, |
| | | event.clientY); |
| | | if (isDivArea({ |
| | | x : event.clientX, |
| | | y : event.clientY |
| | | })) { |
| | | var x = newMouseLocation.x - mouseDownLocation.x; |
| | | var y = newMouseLocation.y - mouseDownLocation.y; |
| | | mouseDownLocation = newMouseLocation; |
| | | /**根据角度,计算图片偏移*/ |
| | | if (0 == currentRate) { |
| | | imgX += x; |
| | | imgY += y; |
| | | } else if (90 == currentRate) { |
| | | imgX += y; |
| | | imgY -= x; |
| | | } else if (180 == currentRate) { |
| | | imgX -= x; |
| | | imgY -= y; |
| | | } else if (270 == currentRate) { |
| | | imgX -= y; |
| | | imgY += x; |
| | | } |
| | | } else { |
| | | /** 鼠标移动至画布范围外,置鼠标弹起 */ |
| | | isMouseDown = false; |
| | | canvas.style.cursor = "default"; |
| | | document.title = 'mouse up'; |
| | | } |
| | | drawImage(); |
| | | } |
| | | } |
| | | pandiv.onmouseover = function() { |
| | | control.style.display = "block"; |
| | | } |
| | | canvas.onmouseout = function() { |
| | | control.style.display = "none"; |
| | | } |
| | | function reLoadImage() { |
| | | loadImage(); |
| | | } |
| | | |
| | | /**鼠标按下*/ |
| | | pandiv.onmousedown = function(event) { |
| | | mouseDownLocation = windowToCanvas(canvas, event.clientX, event.clientY); |
| | | if (isPointInImageArea(mouseDownLocation)) { |
| | | isMouseDown = true; |
| | | document.title = '查看附件'; |
| | | } |
| | | } |
| | | /**鼠标弹起*/ |
| | | document.body.onmouseup = function() { |
| | | isMouseDown = false; |
| | | canvas.style.cursor = "default"; |
| | | document.title = '查看附件'; |
| | | } |
| | | /**鼠标移动*/ |
| | | pandiv.onmousemove = function(event) { |
| | | if (isMouseDown) { |
| | | canvas.style.cursor = "move"; |
| | | var newMouseLocation = windowToCanvas(canvas, event.clientX, |
| | | event.clientY); |
| | | if (isDivArea({ |
| | | x : event.clientX, |
| | | y : event.clientY |
| | | })) { |
| | | var x = newMouseLocation.x - mouseDownLocation.x; |
| | | var y = newMouseLocation.y - mouseDownLocation.y; |
| | | mouseDownLocation = newMouseLocation; |
| | | /**根据角度,计算图片偏移*/ |
| | | if (0 == currentRate) { |
| | | imgX += x; |
| | | imgY += y; |
| | | } else if (90 == currentRate) { |
| | | imgX += y; |
| | | imgY -= x; |
| | | } else if (180 == currentRate) { |
| | | imgX -= x; |
| | | imgY -= y; |
| | | } else if (270 == currentRate) { |
| | | imgX -= y; |
| | | imgY += x; |
| | | } |
| | | } else { |
| | | /** 鼠标移动至画布范围外,置鼠标弹起 */ |
| | | isMouseDown = false; |
| | | canvas.style.cursor = "default"; |
| | | document.title = 'mouse up'; |
| | | } |
| | | drawImage(); |
| | | } |
| | | } |
| | | pandiv.onmouseover = function() { |
| | | control.style.display = "block"; |
| | | } |
| | | canvas.onmouseout = function() { |
| | | control.style.display = "none"; |
| | | } |
| | | |
| | | //加载图片 |
| | | function loadImage() { |
| | | if (img.width <= canvas.width && img.height <= canvas.height) { |
| | | imgX = (canvas.width - img.width * imgScale) / 2 |
| | | imgY = (canvas.height - img.height * imgScale) / 2; |
| | | } else { |
| | | var ratio = img.width / img.height; |
| | | widthTime = img.width / canvas.width; |
| | | heightTime = img.height / canvas.height; |
| | | |
| | | if (widthTime > heightTime) { |
| | | img.width = canvas.width; |
| | | |
| | | img.height = canvas.width / ratio; |
| | | } else { |
| | | img.height = canvas.height; |
| | | img.width = canvas.height * ratio; |
| | | |
| | | } |
| | | |
| | | imgX = (canvas.width - img.width * imgScale) / 2 |
| | | imgY = (canvas.height - img.height * imgScale) / 2 |
| | | } |
| | | } |
| | | //加载图片 |
| | | function loadImage() { |
| | | if (img.width <= canvas.width && img.height <= canvas.height) { |
| | | imgX = (canvas.width - img.width * imgScale) / 2 |
| | | imgY = (canvas.height - img.height * imgScale) / 2; |
| | | } else { |
| | | var ratio = img.width / img.height; |
| | | widthTime = img.width / canvas.width; |
| | | heightTime = img.height / canvas.height; |
| | | |
| | | if (widthTime > heightTime) { |
| | | img.width = canvas.width; |
| | | |
| | | img.height = canvas.width / ratio; |
| | | } else { |
| | | img.height = canvas.height; |
| | | img.width = canvas.height * ratio; |
| | | |
| | | } |
| | | |
| | | imgX = (canvas.width - img.width * imgScale) / 2 |
| | | imgY = (canvas.height - img.height * imgScale) / 2 |
| | | } |
| | | } |
| | | |
| | | pandiv.onmouseover = function() { |
| | | control.style.display = "block"; |
| | | } |
| | | canvas.onmouseout = function() { |
| | | control.style.display = "none"; |
| | | } |
| | | pandiv.onmouseover = function() { |
| | | control.style.display = "block"; |
| | | } |
| | | canvas.onmouseout = function() { |
| | | control.style.display = "none"; |
| | | } |
| | | |
| | | //由于图片不能直接下载(只能预览) 用户需要保存原图 这里做简单切换 用户另存为保存图片 |
| | | function ViewOriginalImage(){ |
| | | //查看原图时,隐藏下一张和上一张的样式 |
| | | $(".left").hide(); |
| | | $(".right").hide(); |
| | | |
| | | //查看原图取消隐藏 |
| | | document.getElementById("j_id0:testImgOriginal").style.display='block'; |
| | | //查看预览框隐藏 |
| | | document.getElementById("pandiv").style.display='none'; |
| | | //查看原图链接隐藏 |
| | | $("#ViewOriginal").hide(); |
| | | $("#Original").show(); |
| | | //查看预览链接取消隐藏 |
| | | $("#ViewPreview").show(); |
| | | //原始宽度 |
| | | var nowWidth = document.body.clientWidth; |
| | | //原始高度 |
| | | var nowHeight = document.body.clientHeight; |
| | | //如果现在图片的高度 大于屏幕高度 就给div赋值高度 |
| | | //如果现在图片的宽度 大于屏幕宽度 就给div赋值宽度 |
| | | if(nowHeight>OriginalHeight){ |
| | | document.getElementById("j_id0:testImgOriginal").style.height = OriginalHeight*0.86+'px'; |
| | | }else if(nowWidth>OriginalWidth){ |
| | | document.getElementById("j_id0:testImgOriginal").style.width = OriginalWidth*0.86+'px'; // |
| | | } |
| | | } |
| | | //由于图片不能直接下载(只能预览) 用户需要保存原图 这里做简单切换 用户另存为保存图片 |
| | | function ViewOriginalImage(){ |
| | | //查看原图时,隐藏下一张和上一张的样式 |
| | | $(".left").hide(); |
| | | $(".right").hide(); |
| | | |
| | | //查看原图取消隐藏 |
| | | document.getElementById("j_id0:testImgOriginal").style.display='block'; |
| | | //查看预览框隐藏 |
| | | document.getElementById("pandiv").style.display='none'; |
| | | //查看原图链接隐藏 |
| | | $("#ViewOriginal").hide(); |
| | | $("#Original").show(); |
| | | //查看预览链接取消隐藏 |
| | | $("#ViewPreview").show(); |
| | | //原始宽度 |
| | | var nowWidth = document.body.clientWidth; |
| | | //原始高度 |
| | | var nowHeight = document.body.clientHeight; |
| | | //如果现在图片的高度 大于屏幕高度 就给div赋值高度 |
| | | //如果现在图片的宽度 大于屏幕宽度 就给div赋值宽度 |
| | | if(nowHeight>OriginalHeight){ |
| | | document.getElementById("j_id0:testImgOriginal").style.height = OriginalHeight*0.86+'px'; |
| | | }else if(nowWidth>OriginalWidth){ |
| | | document.getElementById("j_id0:testImgOriginal").style.width = OriginalWidth*0.86+'px'; // |
| | | } |
| | | } |
| | | |
| | | function ViewPreview(){ |
| | | //查看预览时,显示下一张和上一张的样式 |
| | | $(".left").show(); |
| | | $(".right").show(); |
| | | //查看原图隐藏 |
| | | document.getElementById("j_id0:testImgOriginal").style.display='none'; |
| | | //查看预览框取消隐藏 |
| | | document.getElementById("pandiv").style.display='block'; |
| | | //查看原图链接取消隐藏 |
| | | $("#ViewOriginal").show(); |
| | | //查看预览链接隐藏 |
| | | $("#ViewPreview").hide(); |
| | | $("#Original").hide(); |
| | | } |
| | | function ViewPreview(){ |
| | | //查看预览时,显示下一张和上一张的样式 |
| | | $(".left").show(); |
| | | $(".right").show(); |
| | | //查看原图隐藏 |
| | | document.getElementById("j_id0:testImgOriginal").style.display='none'; |
| | | //查看预览框取消隐藏 |
| | | document.getElementById("pandiv").style.display='block'; |
| | | //查看原图链接取消隐藏 |
| | | $("#ViewOriginal").show(); |
| | | //查看预览链接隐藏 |
| | | $("#ViewPreview").hide(); |
| | | $("#Original").hide(); |
| | | } |
| | | |
| | | //画图 |
| | | function drawImage() { |
| | | var bbox = canvas.getBoundingClientRect(); |
| | | cxt.clearRect(-200, -200, canvas.width * 2, canvas.height * 2); |
| | | cxt.drawImage(img, imgX, imgY, img.width * imgScale, img.height * imgScale); |
| | | } |
| | | //画图 |
| | | function drawImage() { |
| | | var bbox = canvas.getBoundingClientRect(); |
| | | cxt.clearRect(-200, -200, canvas.width * 2, canvas.height * 2); |
| | | cxt.drawImage(img, imgX, imgY, img.width * imgScale, img.height * imgScale); |
| | | } |
| | | |
| | | //js取url参数 |
| | | //20201221 liying start |
| | | function GetQueryValue(queryName) { |
| | | var query = decodeURI(window.location.search.substring(1)); |
| | | var vars = query.split("&"); |
| | | for (var i = 0; i < vars.length; i++) { |
| | | var pair = vars[i].split("="); |
| | | if (pair[0] == queryName) { return pair[1]; } |
| | | } |
| | | return null; |
| | | } |
| | | //20201221 liying end |
| | | //js取url参数 |
| | | //20201221 liying start |
| | | function GetQueryValue(queryName) { |
| | | var query = decodeURI(window.location.search.substring(1)); |
| | | var vars = query.split("&"); |
| | | for (var i = 0; i < vars.length; i++) { |
| | | var pair = vars[i].split("="); |
| | | if (pair[0] == queryName) { return pair[1]; } |
| | | } |
| | | return null; |
| | | } |
| | | //20201221 liying end |
| | | |
| | | function fadeIn(ele,speed){ |
| | | var ele=document.getElementById(ele); |
| | | var opacitynum=ele.style.opacity||0; |
| | | var speed=(speed/100)||10; |
| | | function opacityAdd(){ |
| | | if(opacitynum<1){ |
| | | ele.style.opacity=opacitynum=(parseFloat(opacitynum)+0.01).toFixed(2); |
| | | }else{ |
| | | clearInterval(opacityt); |
| | | } |
| | | } |
| | | var opacityt=setInterval(opacityAdd,speed); |
| | | } |
| | | function fadeIn(ele,speed){ |
| | | var ele=document.getElementById(ele); |
| | | var opacitynum=ele.style.opacity||0; |
| | | var speed=(speed/100)||10; |
| | | function opacityAdd(){ |
| | | if(opacitynum<1){ |
| | | ele.style.opacity=opacitynum=(parseFloat(opacitynum)+0.01).toFixed(2); |
| | | }else{ |
| | | clearInterval(opacityt); |
| | | } |
| | | } |
| | | var opacityt=setInterval(opacityAdd,speed); |
| | | } |
| | | |
| | | </script> |
| | | </body> |
| | | </script> |
| | | </body> |
| | | </apex:page> |