<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="../../JS/jquery.min.js"></script>
<script src="JS/ReportBuilder.core.js"></script>
<script src="JS/ReportBuilder.js"></script>
<style>
#ReportDesignPanel {
max-width: 30cm;
position: relative;
font-size: 12px;
overflow: hidden;
background-color: white;
border: 1px solid #dddee4;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.designer {
background-color: #A9A9A9;
width: 100%;
height: 100%;
position: relative;
}
.xalias, .yalias {
z-index: 2000;
background-color: White;
position: absolute;
}
.xalias {
height: 0.6cm;
left: 0.6cm;
top: 0px;
max-width: 30cm;
background-image: url('../../Image/h-alias.png');
background-repeat: repeat-x;
background-position: 0px bottom;
}
.yalias {
width: 0.6cm;
background-image: url('../../Image/v-alias.png');
background-repeat: repeat-y;
left: 1px;
top: 0.6cm;
background-position: right 0px;
border-top: 1px solid #000;
margin-top: -1px;
}
.report-designer {
position: absolute;
left: 0.6cm;
top: 0.6cm;
z-index: 2000;
border: 0px;
}
.designer-grid {
position: absolute;
left: 0.6cm;
top: 0.6cm;
z-index: 100;
border: 0px;
overflow: hidden;
background-repeat: no-repeat;
}
.designer-container {
background-color: #FFF;
}
.designer-a4 {
width: 21.6cm;
max-width: 35cm;
height: 30.6cm;
}
.designer-a4 .report-designer, .designer-a4 .designer-grid {
width: 100%;
height: 100%;
}
.designer-a4 .xalias {
width: 100%;
}
.designer-a4 .yalias {
height: 100%;
}
.scale {
font-weight: bold;
}
.scale-x {
padding-left: 5px;
}
.scale-y {
}
.xalias ul, .yalias ul {
list-style: none;
margin: 0px;
padding: 0px;
overflow: hidden;
}
.xalias ul {
height: 15px;
}
.xalias ul li {
float: left;
width: 1cm;
}
.yalias ul li {
height: 1cm;
text-align: right;
padding-right: 12px;
}
.designer-grid table, .designer-grid tr, .designer-grid td {
margin: 0px;
padding: 0px;
}
.designer-grid td {
width: 0.5cm;
height: 0.5cm;
border: #D6D0D0;
border-right-style: dotted;
border-right-width: 1px;
border-bottom-style: dotted;
border-bottom-width: 1px;
}
.mousemoveline {
position: absolute;
background-color: Blue;
overflow: hidden;
}
.mousemoveline-x {
width: 1px;
height: 100%;
top: 0px;
}
.mousemoveline-y {
height: 1px;
width: 100%;
left: 0px;
}
.report-header {
border-bottom: 2px solid #95B8E7;
}
.report-footer {
border-top: 2px solid #95B8E7;
bottom: 0px;
}
.report-header, .report-footer {
background: #A9A9A9;
filter: alpha(opacity=50);
opacity: 0.50;
height: 32px;
position: absolute;
width: 100%;
display: none;
}
</style>
<style type="text/css">
.ctrl-container {
position: absolute;
cursor: default;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
background-color: #FFF;
padding: 0px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
border-width: 2px;
border-style: solid;
border-color: transparent;
}
.container-selected {
border-color: #95B8E7; /*background-color: #E1E6E9;*/
background-color: transparent;
}
.report-designer > .ctrl-container > .el-textbox-default {
border: 1px dotted blue;
}
.element {
}
.container-selected .element {
/*background-color: #E1E6E9 !important*/
}
.ctrl-container .el-textbox {
/*border: 1px solid #95B8E7;*/ /*margin: 0px;*/
}
.report-designer > .ctrl-container > .el-textbox {
border: 1px dotted blue;
}
.ctrl-container .el-image {
border: 0px;
}
.ctrl-container .el-list {
}
.el-reporttable {
}
.el-layouttable {
table-layout: fixed;
}
.el-layouttable > tbody > tr > td, .el-reporttable > tbody > tr > td {
border-left: none !important;
border-top: none !important;
overflow: hidden;
white-space: nowrap;
}
.el-layouttable .selected-cell, .el-reporttable .selected-cell {
background-color: #FCF6E2;
}
.el-chart {
color: #ff7e00;
text-align: center;
}
.el-chart > .charttype-icon {
position: relative;
border: none;
top: 45%;
font-size: 64px;
}
.tr-helper {
height: 0px;
}
.tr-helper > td {
height: 0px;
visibility: collapse;
}
/*边框样式*/
.tb-dotted-border {
border-style: dotted;
}
.tb-solid-border {
border-style: solid;
}
.tb-solid-border > tbody > tr > td {
border-style: solid;
}
.tb-dotted-border > tbody > tr > td {
border-style: dotted;
}
/*边框类型*/
/*默认、无边框*/
.tb-default {
border-left: 1px dotted blue !important;
border-top: 1px dotted blue !important;
border-right: none;
border-bottom: none;
}
.tb-default > tbody > tr > td {
border-right-width: 1px;
border-right-style: dotted;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-top: none;
border-left: none;
border-color: blue !important;
}
/*仅外边框*/
.tb-only-tb-border {
border-width: 1px;
}
.tb-only-tb-border > tbody > tr > td {
border-right-width: 1px;
border-right-style: dotted;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-color: blue !important;
border-top: none;
border-left: none;
}
.tb-only-tb-border > tbody > tr > td.last-row-td {
border-bottom: none;
}
.tb-only-tb-border > tbody > tr > td.last-col-td {
border-right: none;
}
/*所有边框*/
.tb-all-border {
border-width: 1px;
border-right: none;
border-bottom: none;
}
.tb-all-border > tbody > tr > td {
border-right-width: 1px;
border-bottom-width: 1px;
border-top: none;
border-left: none;
}
/*仅单元格边框*/
.tb-only-td-border {
border: none;
}
.tb-only-td-border > tbody > tr > td {
border-right-width: 1px;
border-bottom-width: 1px;
}
.tb-only-td-border > tbody > tr > td.last-col-td {
border-right: none;
}
.tb-only-td-border > tbody > tr > td.last-row-td {
border-bottom: none;
}
/*下边框*/
.tb-bottom-border {
border: none;
border-top: 1px dotted blue !important;
border-left: 1px dotted blue !important;
}
.tb-bottom-border > tbody > tr > td {
border-right: 1px dotted blue !important;
border-bottom-width: 1px;
}
.stretch {
}
/*内容保持其原始大小*/
.stretch .stretch-none {
}
/*调整内容的大小以填充目标尺寸。不保留纵横比。*/
.stretch .stretch-fill {
width: 100%;
height: 100%;
}
/*在保留内容原有纵横比的同时调整内容的大小，以适合目标尺寸。*/
.stretch .stretch-fill-x {
width: 100%;
}
.stretch .stretch-fill-y {
height: 100%;
}
/*在保留内容原有纵横比的同时调整内容的大小，以填充目标尺寸。
如果目标矩形的纵横比不同于源矩形的纵横比，
则对源内容进行剪裁以适合目标尺寸。*/
.stretch .stretch-over-hidden {
}
.el-layouttable td .ctrl-container, .el-reporttable td .ctrl-container {
position: static !important;
}
.move-element-proxy {
width: 100px;
height: 23px;
background-color: transparent;
border-width: 2px;
border-style: solid;
border-color: #95B8E7;
}
.move-element-proxy.min-proxy {
width: 12px;
height: 7px;
border-width: 2px;
border-style: dotted;
border-color: #858E98;
z-index: 9999;
}
.cell-drag-over {
background-color: #E0ECFF;
}
.table-draghandle {
width: 100%;
padding: 0px;
height: 20px; /*margin-top: -22px;
border:2px solid #95B8E7;
margin-left:-2px;*/
background-color: #B0CCE2;
display: none;
cursor: move;
}
.selector-btn {
height: 17px;
margin-left: -1px;
border-radius: 0;
-webkit-border-radius: 0;
}
.selector-btn .l-btn-text {
line-height: 18px;
}
</style>
<style>
.menu {
position: absolute;
margin: 0;
padding: 2px;
border-width: 1px;
border-style: solid;
overflow: hidden;
}
.menu-item {
position: relative;
margin: 0;
padding: 0;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
border-width: 1px;
border-style: solid;
}
.menu-text {
height: 20px;
line-height: 20px;
float: left;
padding-left: 28px;
}
.menu-icon {
position: absolute;
width: 16px;
height: 16px;
left: 2px;
top: 50%;
margin-top: -8px;
}
.menu-rightarrow {
position: absolute;
width: 16px;
height: 16px;
right: 0;
top: 50%;
margin-top: -8px;
}
.menu-line {
position: absolute;
left: 26px;
top: 0;
height: 2000px;
font-size: 1px;
}
.menu-sep {
margin: 3px 0px 3px 25px;
font-size: 1px;
}
.menu-active {
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
.menu-item-disabled {
opacity: 0.5;
filter: alpha(opacity=50);
cursor: default;
}
.menu-text,
.menu-text span {
font-size: 12px;
}
.menu-shadow {
position: absolute;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
background: #ccc;
-moz-box-shadow: 2px 2px 3px #cccccc;
-webkit-box-shadow: 2px 2px 3px #cccccc;
box-shadow: 2px 2px 3px #cccccc;
filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=2,MakeShadow=false,ShadowOpacity=0.2);
}
.menu-rightarrow {
background: url('images/menu_arrows.png') no-repeat -32px center;
}
.menu-line {
border-left: 1px solid #ccc;
border-right: 1px solid #fff;
}
.menu-sep {
border-top: 1px solid #ccc;
border-bottom: 1px solid #fff;
}
.menu {
background-color: #fafafa;
border-color: #ddd;
color: #444;
}
.menu-content {
background: #ffffff;
}
.menu-item {
border-color: transparent;
_border-color: #fafafa;
}
.menu-active {
border-color: #b7d2ff;
color: #000000;
background: #eaf2ff;
}
.menu-active-disabled {
border-color: transparent;
background: transparent;
color: #444;
}
.designer-grid > hr {
width: 100%;
height: 0px;
border: 1px dotted #c2c2c2;
position: absolute;
}
.designer-grid > div {
position: absolute;
width: 0px;
height: 100%;
z-index: 1;
border: 1px dotted #c2c2c2;
top: 0;
}
.right-panel {
z-index: 10000;
}
</style>
</head>
<body class="table_style">
<div id="action_div" class="tree">
<div class="section">
<div class="section-header">
<span class="glyphicon section-icon"></span>
<span class="section-title">操作</span>
</div>
<div class="section-body">
<div class="tool-bar" id="ReportToolBar">
</div>
</div>
</div>
<div class="section" id="con_panel">
<div class="section-header">
<span class="glyphicon section-icon"></span>
<span class="section-title">控件</span>
</div>
<div class="section-body">
<div id="control_tree" class="tree">
</div>
</div>
</div>
<div class="section">
<div class="section-header">
<span class="glyphicon section-icon"></span>
<span class="section-title">数据</span>
</div>
<div class="section-body">
<div id="ds_tree" class="tree">
</div>
</div>
</div>
</div>
<!--报表设计面板--->
<div class="tab_panel" id="ReportDesignPanel">
<div class="designer-container designer-a4">
<div class="report-designer">
<div class="report-header" data-options="handles:'s'">
</div>
<div class="report-footer" data-options="handles:'n'">
</div>
</div>
<div class="xalias disable-select">
<ul></ul>
<div class="mousemoveline mousemoveline-x">
</div>
</div>
<div class="yalias disable-select">
<div class="mousemoveline mousemoveline-y">
</div>
<ul></ul>
</div>
<div class="designer-grid">
<!--<table cellpadding="0" cellspacing="0"></table>-->
</div>
</div>
<div id="designer_menu" class="ui-menu" style="width: 120px;">
</div>
</div>
<div id="ReportAttrPanel" style="width: 300px; right: 0px;display:none;"></div>
</body>
</html>
浙公网安备 33010602011771号