195 lines
7.5 KiB
HTML
195 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
||
<html style='height:100%'>
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
<title><#wsName>-<I18N#架构全景></title>
|
||
<script type="text/javascript" src="../commons/js/jquery/scripts/jquery.js"></script>
|
||
<script type="text/javascript" src="../commons/js/awsui.js"></script>
|
||
<script src="../commons/js/jquery/scripts/jquery.ui.slider.js" type="text/javascript"></script>
|
||
<link rel="stylesheet" href="../commons/css/awsui.css">
|
||
<link href="../commons/js/jquery/themes/default/ui/aws.slider.css" rel="stylesheet">
|
||
<link href="../apps/com.actionsoft.apps.coe.pal.processmap/css/com.actionsoft.apps.coe.pal.processmap.css" rel="stylesheet">
|
||
<script>
|
||
var iframeTitle='<#iframeTitle>';
|
||
$(function() {
|
||
$(".navigate-top>div:last",window.parent.document).text(window.parent.textTemp+" > "+window.parent.clickText+" > "+iframeTitle);
|
||
window.parent.historyFlag= false;
|
||
var v=<#maxLevel>>2?2:<#maxLevel>;
|
||
$( "#amount" ).attr("amount", v).html( v - 1 );
|
||
$( "#slider-vertical" ).slider({
|
||
orientation: "vertical",
|
||
range: "min",
|
||
min: 1,
|
||
max: <#maxLevel>,
|
||
value: v,
|
||
slide: function( event, ui ) {
|
||
$( "#amount" ).attr("amount", ui.value ).html(ui.value - 1);
|
||
sliderChange();
|
||
}
|
||
});
|
||
$( "#amount" ).attr("amount", $( "#slider-vertical" ).slider( "value" ) ).html($( "#slider-vertical" ).slider( "value" ) - 1);
|
||
|
||
$('#ico_dock_collapse').bind('click', function() {
|
||
$("#eagleEyeCanvas").slideToggle("slow");
|
||
});
|
||
});
|
||
</script>
|
||
<script type="text/javascript">
|
||
var wsName="<#wsName>";
|
||
var processLevelData=<#processLevelData>;
|
||
var maxLevel=<#maxLevel>;
|
||
var in8ntype="<I18N#I18NTYPE>";
|
||
var uid="<#uid>";
|
||
var crateByCoE="<I18N#附：本架构全景图由AWS CoE创建于>";
|
||
var wsType=2;//架构类型 0:二分法 1:三分法
|
||
</script>
|
||
<script type="text/javascript" src="../apps/com.actionsoft.apps.coe.pal.processmap/js/coe.ws.ap.js"></script>
|
||
<script type="text/javascript" src="../apps/com.actionsoft.apps.coe.pal.processmap/js/coe.ws.ap.type.two.js"></script>
|
||
<script type="text/javascript" src="../apps/com.actionsoft.apps.coe.pal.processmap/js/coe.ws.ap.type.three.js"></script>
|
||
<style type="text/css">
|
||
*{
|
||
margin:0px;
|
||
padding:0px;
|
||
border:0;
|
||
font-family: Arial,Helvetica,sans-serif;
|
||
font-size: 12px;
|
||
color:#fff;
|
||
}
|
||
body{
|
||
overflow:hidden;
|
||
height:100%;
|
||
}
|
||
.mainCanvas{
|
||
position:absolute;
|
||
left:0px;
|
||
top:0px;
|
||
z-index:1;
|
||
height:100%;
|
||
background: url(../apps/com.actionsoft.apps.coe.pal/img/canvas_bg.jpg) repeat;
|
||
cursor: url("../apps/com.actionsoft.apps.coe.pal/img/openhand_8_8.cur"), default;
|
||
}
|
||
.eagleEyeDiv{
|
||
position:absolute;
|
||
right: 10px;
|
||
top: 25px;
|
||
border:1px solid #444;
|
||
border-radius: 5px 5px 5px 5px;
|
||
z-index:2;
|
||
padding: 0px;
|
||
background: #fff;
|
||
-webkit-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.33);
|
||
-moz-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.33);
|
||
box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.33);
|
||
display:none;
|
||
}
|
||
.eagleEyeTopDiv{
|
||
color: #333;
|
||
width: 100%;
|
||
height:20px;
|
||
background: #a6a6a6;
|
||
text-align: left;
|
||
display: block;
|
||
border-top:#bfbfbf solid 1px;
|
||
border-bottom:#666666 solid 1px;
|
||
text-shadow:0 1px 0 rgba(255, 255, 255, 0.33);
|
||
background-image:-webkit-linear-gradient(top,#b2b2b2,#9b9b9b);
|
||
}
|
||
.eagleEyeCanvas{
|
||
width: 250px;
|
||
height:130px;
|
||
border-radius: 2px 2px 2px 2px;
|
||
background-color:whiteSmoke;
|
||
display: block;
|
||
cursor:pointer;
|
||
}
|
||
.rangeDiv{
|
||
position:absolute;
|
||
top:10px;
|
||
left:10px;
|
||
z-index:2;
|
||
}
|
||
.ui-widget-header{
|
||
border-radius: 10px 10px 10px 10px;
|
||
background:#f9f69a/*{bgColorHeader}*/ url(../aws_js/jquery/jquery-ui/development-bundle/themes/base/images/ui-bg_highlight-soft_75_ffe45c_1x100.png)
|
||
/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/
|
||
}
|
||
.sctp{
|
||
position:absolute;
|
||
bottom: 10px;
|
||
right:10px;
|
||
color:#000;
|
||
cursor:pointer;
|
||
z-index:2;
|
||
}
|
||
.ico {
|
||
background: url("../apps/com.actionsoft.apps.coe.pal/lib/designer/themes/default/images/sprite.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
|
||
height: 20px;
|
||
opacity: 0.7;
|
||
width: 20px;
|
||
}
|
||
.ico_dock_collapse {
|
||
background-position: -39px -44px;
|
||
border: 1px solid rgba(0, 0, 0, 0);
|
||
border-radius: 2px;
|
||
cursor: pointer;
|
||
height: 12px;
|
||
position: absolute;
|
||
right: 3px;
|
||
top: 2px;
|
||
width: 12px;
|
||
}
|
||
.ico_dock_collapse:hover {
|
||
background-color: #878787;
|
||
border-color: #737373;
|
||
}
|
||
.easyMask{
|
||
position: fixed;
|
||
top:0;
|
||
left: 0;
|
||
z-index: 9999;
|
||
display: block;
|
||
text-align: center;
|
||
background-color: rgba(33, 33, 33, 0.498039);
|
||
width: 100%;
|
||
height: 100%;
|
||
line-height: 563px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body onselectstart="return false">
|
||
<canvas id='mainCanvas' class='mainCanvas'><I18N#对不起，您的浏览器不支持html5。可以使用IE8以上，谷歌浏览器，火狐浏览器进行查看></canvas>
|
||
<div id='eagleEyeDiv' class='eagleEyeDiv'>
|
||
<div class='eagleEyeTopDiv'>
|
||
<I18N#导航>
|
||
<div id="ico_dock_collapse" class="ico ico_dock_collapse"></div>
|
||
</div>
|
||
<canvas id='eagleEyeCanvas' class='eagleEyeCanvas'></canvas>
|
||
</div>
|
||
<div class='rangeDiv' >
|
||
<div style="width: 59px; height: 59px; overflow: hidden; position: relative;">
|
||
<img style="position: absolute; left: 0px; top: 0px; width: 59px; height: 492px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="../apps/com.actionsoft.apps.coe.pal/img/ap.png" draggable="false">
|
||
<div style="position: absolute; background-color:white;opacity:0;filter:alpha(opacity=0); left: 0px; top: 20px; width: 19.6667px; height: 19.6667px; cursor: pointer;overflow:hidden" title="<I18N#向左平移>" onMouseDown='toLeft()' onMouseUp='apOnMouseUp()'></div>
|
||
<div style="position: absolute; background-color:white;opacity:0;filter:alpha(opacity=0); left: 39px; top: 20px; width: 19.6667px; height: 19.6667px; cursor: pointer;overflow:hidden" title="<I18N#向右平移>" onmouseup='apOnMouseUp()' onmousedown='toRight()'></div>
|
||
<div style="position: absolute; background-color:white;opacity:0;filter:alpha(opacity=0); left: 20px; top: 0px; width: 19.6667px; height: 19.6667px; cursor: pointer;overflow:hidden" title="<I18N#向上平移>" onMouseDown='toTop()' onMouseUp='apOnMouseUp()'></div>
|
||
<div style="position: absolute; background-color:white;opacity:0;filter:alpha(opacity=0); left: 20px; top: 39px; width: 15.6667px; height: 19.6667px; cursor: pointer;overflow:hidden" title="<I18N#向下平移>" onMouseUp='apOnMouseUp()' onMouseDown='toBottom()'></div>
|
||
</div>
|
||
<div class="demo" style='margin-left:21px;' >
|
||
<div id="slider-vertical" style="height:200px;box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.33);cursor:pointer;"></div>
|
||
</div>
|
||
<p>
|
||
<font style='color:#333'> <I18N#层次>：</font><font id='amount' style='color:#333' amount=""></font>
|
||
</p>
|
||
</div>
|
||
<font id='sctp' class='sctp' onclick="downloadimg()" ><I18N#生成图片></font>
|
||
</body>
|
||
|
||
<script>
|
||
$(document).ready(function(){
|
||
try{
|
||
document.createElement('canvas').getContext('2d');
|
||
}catch(e){
|
||
window.top.$.simpleAlert('对不起，您的浏览器不支持此功能！可以使用谷歌，火狐或IE8以上的浏览器');
|
||
}
|
||
});
|
||
</script>
|
||
</html> |