路徑：D:\ireport365\ireport365.war\WEB-INF\classes\report-resource\design.css
樣式：
~~~
/* 新分析 start */
.Analysis{
position:absolute;
/* width:100px; */
height:30px;
background:#ff8800;
right:0px;
top:0px;
z-index:11;
}
.Analysis-btn{
widows: 30px;
height:30px;
float:left;
cursor: pointer;
margin:0px 5px;
text-align: center;
}
.Analysis-btn>i{
line-height:30px;
color:#fff;
}
/* 遮罩層 start*/
#bg {
display: none;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: black;
z-index: 13;
-moz-opacity: 0.7;
opacity: .70;
filter: alpha(opacity=70);
}
/* 篩選 start */
.screen-box{
position:fixed;
left:50%;
top:50%;
margin-left:-340px;
margin-top:-200px;
width:680px;
height:400px;
background:#fff;
z-index:9999;
border-radius:5px;
overflow:hidden;
display:none;
}
.screen-box-title{
width:100%;
height:30px;
line-height:30px;
text-align: center;
font-weight:700;
border-bottom:2px solid #2990ea;
}
.screen-box-item-title>span{
text-align:center;
display:block;
width:33.33%;
height:30px;
line-height:30px;
float:left;
color:#666;
}
.screen-box-content{
width:100%;
height:auto;
background:#fff;
overflow: hidden;
}
.screen-box-content-item{
width:33.3%;
height:300px;
float:left;
border-right:1px solid #f0f0f0;
border-top:1px solid #f0f0f0;
border-bottom:1px solid #f0f0f0;
overflow-y:auto;
}
.screen-box-content-item:nth-child(3){
border-right:none;
}
.screen-box-content-item-box{
width:100%;
display:block;
height:30px;
line-height:30px;
background:#fff;
cursor:pointer;
padding-left:10px;
}
.screen-box-content-item-box-text{
display:block;
float:left;
width:150px;
height:30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.screen-box-content-item-box-btn{
display:block;
float:right;
height:30px;
width:50px;
color:#333;
margin-right:15px;
text-align:center;
cursor:pointer;
display:none;
}
.screen-box-content-item-box:hover .screen-box-content-item-box-btn{
display:block;
color:#4a90e2;
}
.screen-box-content-item-box:hover{
background:#f0f0f0;
}
.screen-box-content-item input[type=checkbox]{
display:inline-block;
vertical-align:middle;
margin-top:-5px;
}
.screen-box-content-item input[type=checkbox]{
/*同樣，首先去除瀏覽器默認樣式*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/*編輯我們自己的樣式*/
position: relative;
width: 15px;
height: 15px;
background: transparent;
border:1px solid #00BFFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
outline: none;
cursor: pointer;
}
.screen-box-content-item input[type=checkbox]:after{
content: '√';
position: absolute;
display: block;
width: 100%;
height: 100%;
background: #00BFFF;
color: #fff;
text-align: center;
line-height: 18px;
/*增加動畫*/
-webkit-transition: all ease-in-out 300ms;
-moz-transition: all ease-in-out 300ms;
transition: all ease-in-out 300ms;
/*利用border-radius和opacity達到填充的假象，首先隱藏此元素*/
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
opacity: 0;
}
.screen-box-content-item input[type=checkbox]:checked:after{
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
opacity: 1;
}
.screen-box-btn{
text-align:right;
height:40px;
line-height:40px;
}
.screen-box-btn>span{
padding:5px 15px;
margin-right:25px;
cursor:pointer;
border-radius:3px;
}
.screen-box-btn>span:hover{
background:#2990ea;
color:#fff;
}
/* 篩選 end */
/* 排序 start */
.sort-box{
position: absolute;
top:25px;
right:0px;
width:260px;
height:auto;
background:#fff;
z-index: 99;
display:none;
border:1px solid #f0f0f0;
}
.sort-box-tag{
width:100%;
height:22px;
/* background:yellow; */
line-height:22px;
padding-left:5px;
/* border-bottom:1px solid #4a90e2; */
font-weight:700;
}
.sort-box-tag>span{
display:inline-block;
width:60px;
text-align:center;
margin:0px 32px;
cursor: pointer;
}
.sort-box-tag-active{
color:#4a90e2;
border-bottom:2px solid #4a90e2;
}
.sort-box-content{
height:100px;
overflow-y: auto;
display:none;
}
.sort-box-content-item{
display:inline-block;
width:100%;
height:25px;
color:#333;
line-height:25px;
padding-left:15px;
border-bottom:1px solid #f0f0f0;
}
.sort-box-content-item-text{
float:left;
display:block;
width:110px;
margin-right:20px;
height:20px;
line-height:20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sort-box-content-item-btn{
float:right;
display:block;
width:80px;
height:20px;
line-height:20px;
border-radius:2px;
text-align:center;
cursor: pointer;
overflow:hidden;
margin-right:20px;
margin-top:2px;
}
.sort-box-content-item-btn>span{
margin-right:20px;
}
.sort-box-content-item-btn>span:hover{
color:#4a90e2;
}
/* 排序 end */
/* 統計 start */
.statistics-box{
position: absolute;
top:25px;
right:0px;
width:260px;
height:auto;
background:#fff;
z-index: 99;
display:none;
border:1px solid #f0f0f0;
}
.statistics-box-title{
display:inline-block;
width:100%;
height:22px;
/* background:yellow; */
line-height:22px;
padding-left:5px;
border-bottom:1px solid #4a90e2;
font-weight:700;
}
.statistics-box-content{
height:100px;
overflow-y: auto;
display:block;
}
.statistics-box-content-item{
position:relative;
display:inline-block;
width:100%;
height:25px;
color:#333;
line-height:25px;
padding-left:5px;
border-bottom:1px solid #f0f0f0;
}
.statistics-box-content-item-d{
float:left;
display:block;
width:110px;
margin-right:20px;
height:20px;
line-height:20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.statistics-box-content-item-btn{
float:right;
display:block;
width:30px;
height:20px;
line-height:20px;
background:#4a90e2;
border-radius:2px;
text-align:center;
cursor: pointer;
color:#fff;
margin-top:2px;
overflow:hidden;
margin-right:60px;
}
.statistics-box-content-item-content{
position:absolute;
top:15px;
right:10px;
width:50px;
height:auto;
border:1px solid #f0f0f0;
border-radius:3px;
z-index:3;
background:#fff;
display:none;
}
.statistics-box-content-item-content>span{
display:block;
width:100%;
height:20px;
line-height:20px;
color:#333;
cursor: pointer;
text-align:center;
}
.statistics-box-content-item-content>span:hover{
color:#fff;
background:#4a90e2;
}
/* 統計 end */
/* 自定義滾動條 start */
.scroll_bar::-webkit-scrollbar {/*滾動條整體樣式*/
width: 10px; /*高寬分別對應橫豎滾動條的尺寸*/
height: 1px;
}
.scroll_bar::-webkit-scrollbar-thumb {/*滾動條里面小方塊*/
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #535353;
}
.scroll_bar::-webkit-scrollbar-track {/*滾動條里面軌道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 10px;
background: #EDEDED;
}
/* 自定義滾動條 end */
/* 新分析 end */
~~~
路徑：D:\ireport365\ireport365.war\WEB-INF\classes\system-resource\report-template.html
# 在標題上面寫
~~~
<!-- 分析按鈕 -->
<div class="Analysis" style="" ng-show="component.config.showOap">
<div class="Analysis-btn screen-btn" title="篩選"><i ng-class="item" class="fa fa-glass"></i></div>
<div class="Analysis-btn sort-btn" title="排序"><i ng-class="item" class="fa fa-sort-amount-desc"></i></div>
<div class="Analysis-btn statistics-btn" title="統計"><i ng-class="item" class="fa fa-bar-chart"></i></div>
<div class="Analysis-btn" title="導出"><i ng-class="item" class="fa fa-download"></i></div>
</div>
<!-- 排序 start -->
<div class="sort-box">
<div class="sort-box-tag">
<span class="sort-box-tag-active">維度排序</span>
<span>度量排序</span>
</div>
<div class="sort-box-content scroll_bar" style="display:block;">
<div class="sort-box-content-item">
<span class="sort-box-content-item-text">維度嗎？？？？？？？？？？？？</span>
<div class="sort-box-content-item-btn">
<span title="升序"><i ng-class="item" class="fa fa-sort-numeric-asc"></i></span>
<span title="降序"><i ng-class="item" class="fa fa-sort-numeric-desc"></i></span>
</div>
</div>
<div class="sort-box-content-item">
<span class="sort-box-content-item-text">維度嗎？？？？？？？？？？？？</span>
<div class="sort-box-content-item-btn">
<span title="升序"><i ng-class="item" class="fa fa-sort-numeric-asc"></i></span>
<span title="降序"><i ng-class="item" class="fa fa-sort-numeric-desc"></i></span>
</div>
</div>
<div class="sort-box-content-item">
<span class="sort-box-content-item-text">維度嗎？？？？？？？？？？？？</span>
<div class="sort-box-content-item-btn">
<span title="升序"><i ng-class="item" class="fa fa-sort-numeric-asc"></i></span>
<span title="降序"><i ng-class="item" class="fa fa-sort-numeric-desc"></i></span>
</div>
</div>
<div class="sort-box-content-item">
<span class="sort-box-content-item-text">維度嗎？？？？？？？？？？？？</span>
<div class="sort-box-content-item-btn">
<span title="升序"><i ng-class="item" class="fa fa-sort-numeric-asc"></i></span>
<span title="降序"><i ng-class="item" class="fa fa-sort-numeric-desc"></i></span>
</div>
</div>
<div class="sort-box-content-item">
<span class="sort-box-content-item-text">維度嗎？？？？？？？？？？？？</span>
<div class="sort-box-content-item-btn">
<span title="升序"><i ng-class="item" class="fa fa-sort-numeric-asc"></i></span>
<span title="降序"><i ng-class="item" class="fa fa-sort-numeric-desc"></i></span>
</div>
</div>
<div class="sort-box-content-item">
<span class="sort-box-content-item-text">維度嗎？？？？？？？？？？？？</span>
<div class="sort-box-content-item-btn">
<span title="升序"><i ng-class="item" class="fa fa-sort-numeric-asc"></i></span>
<span title="降序"><i ng-class="item" class="fa fa-sort-numeric-desc"></i></span>
</div>
</div>
</div>
<div class="sort-box-content scroll_bar">
<div class="sort-box-content-item">
<span class="sort-box-content-item-text">數值嗎？？？？？？？？？？？？</span>
<div class="sort-box-content-item-btn">
<span title="升序"><i ng-class="item" class="fa fa-sort-numeric-asc"></i></span>
<span title="降序"><i ng-class="item" class="fa fa-sort-numeric-desc"></i></span>
</div>
</div>
<div class="sort-box-content-item">
<span class="sort-box-content-item-text">數值嗎？？？？？？？？？？？？</span>
<div class="sort-box-content-item-btn">
<span title="升序"><i ng-class="item" class="fa fa-sort-numeric-asc"></i></span>
<span title="降序"><i ng-class="item" class="fa fa-sort-numeric-desc"></i></span>
</div>
</div>
<div class="sort-box-content-item">
<span class="sort-box-content-item-text">數值嗎？？？？？？？？？？？？</span>
<div class="sort-box-content-item-btn">
<span title="升序"><i ng-class="item" class="fa fa-sort-numeric-asc"></i></span>
<span title="降序"><i ng-class="item" class="fa fa-sort-numeric-desc"></i></span>
</div>
</div>
<div class="sort-box-content-item">
<span class="sort-box-content-item-text">數值嗎？？？？？？？？？？？？</span>
<div class="sort-box-content-item-btn">
<span title="升序"><i ng-class="item" class="fa fa-sort-numeric-asc"></i></span>
<span title="降序"><i ng-class="item" class="fa fa-sort-numeric-desc"></i></span>
</div>
</div>
<div class="sort-box-content-item">
<span class="sort-box-content-item-text">數值嗎？？？？？？？？？？？？</span>
<div class="sort-box-content-item-btn">
<span title="升序"><i ng-class="item" class="fa fa-sort-numeric-asc"></i></span>
<span title="降序"><i ng-class="item" class="fa fa-sort-numeric-desc"></i></span>
</div>
</div>
<div class="sort-box-content-item">
<span class="sort-box-content-item-text">數值嗎？？？？？？？？？？？？</span>
<div class="sort-box-content-item-btn">
<span title="升序"><i ng-class="item" class="fa fa-sort-numeric-asc"></i></span>
<span title="降序"><i ng-class="item" class="fa fa-sort-numeric-desc"></i></span>
</div>
</div>
</div>
</div>
<!-- 排序 end -->
<!-- 統計 start -->
<div class="statistics-box">
<span class="statistics-box-title">數值統計</span>
<span class="statistics-box-content scroll_bar">
<span class="statistics-box-content-item">
<span class="statistics-box-content-item-d">銷量銷量銷量銷量銷量銷量銷量銷量</span>
<span class="statistics-box-content-item-btn">統計</span>
<div class="statistics-box-content-item-content">
<span>匯總</span>
<span>最大值</span>
<span>最小值</span>
<span>平均值</span>
</div>
</span>
<span class="statistics-box-content-item">
<span class="statistics-box-content-item-d">銷量銷量銷量銷量銷量銷量銷量銷量</span>
<span class="statistics-box-content-item-btn">統計</span>
<div class="statistics-box-content-item-content">
<span>匯總</span>
<span>最大值</span>
<span>最小值</span>
<span>平均值</span>
</div>
</span>
</span>
</div>
<!-- 統計 end -->
<!-- end -->
~~~
# 在導出下面寫
~~~
<!-- 篩選 start -->
<div class="screen-box">
<div class="screen-box-title">添加篩選</div>
<div class="screen-box-item-title">
<span>選擇字段</span>
<span>已添加</span>
<span>數值范圍</span>
</div>
<div class="screen-box-content">
<div class="screen-box-content-item scroll_bar">
<span class="screen-box-content-item-box">
<span class="screen-box-content-item-box-text">維度維度維度維度維度維度維度維度</span>
<span class="screen-box-content-item-box-btn">添加</span>
</span>
<span class="screen-box-content-item-box">
<span class="screen-box-content-item-box-text">維度維度維度維度維度維度維度維度</span>
<span class="screen-box-content-item-box-btn">添加</span>
</span>
</div>
<div class="screen-box-content-item scroll_bar">
<span class="screen-box-content-item-box">
<span class="screen-box-content-item-box-text">維度維度維度維度維度維度維度維度</span>
<span class="screen-box-content-item-box-btn">刪除</span>
</span>
<span class="screen-box-content-item-box">
<span class="screen-box-content-item-box-text">維度維度維度維度維度維度維度維度</span>
<span class="screen-box-content-item-box-btn">刪除</span>
</span>
</div>
<div class="screen-box-content-item scroll_bar">
<span class="screen-box-content-item-box">
<input type="checkbox" />
用戶名1
</span>
<span class="screen-box-content-item-box">
<input type="checkbox" />
職位
</span>
<span class="screen-box-content-item-box">
<input type="checkbox" />
區域
</span>
<span class="screen-box-content-item-box">
<input type="checkbox" />
區域
</span>
</div>
</div>
<div class="screen-box-btn">
<span class="screen-box-btn-cancel">取消</span>
<span class="screen-box-btn-determine">確定</span>
</div>
</div>
<!-- 篩選 end -->
~~~
# js放到文件最下面
~~~
<script>
// 篩選 start
function showdiv() {
document.getElementById("bg").style.display ="block";
$('body').css("overflow", "hidden")
}
function hidediv() {
document.getElementById("bg").style.display = 'none';
$('body').css("overflow", "auto")
}
$(document).off('click','.screen-btn').on('click','.screen-btn',function(){
var screen_box = $('.screen-box');
if(screen_box.is(":hidden")){
$('.screen-box').hide();
screen_box.show(100);
showdiv();
}else{
screen_box.hide();
hidediv()
}
})
$(document).off('click','.screen-box-btn-cancel').on('click','.screen-box-btn-cancel',function(){
$('.screen-box').hide();
hidediv()
})
// 篩選 end
// 排序 start
$(document).off('click','.sort-btn').on('click','.sort-btn',function(){
var statistics_box = $(this).parents('.box-content').find('.statistics-box');
statistics_box.hide();
$('.screen-box').hide();
var sort_box = $(this).parents('.box-content').find('.sort-box');
if(sort_box.is(":hidden")){
sort_box.show(100);
}else{
sort_box.hide();
}
})
$(document).off('click','.sort-box-tag>span').on('click','.sort-box-tag>span',function(event){
event.stopPropagation();
var _self = $(this);
var _index = _self.index();
_self.parent().find('span').attr('class','');
_self.attr('class','sort-box-tag-active');
_self.parent().parent().find('.sort-box-content').hide();
_self.parent().parent().find('.sort-box-content').eq(_index).show();
// _self.parent().parent().find('.oap-operation').hide();
})
// 排序 end
// 統計 start
$(document).off('click','.statistics-btn').on('click','.statistics-btn',function(){
var statistics_box = $(this).parents('.box-content').find('.statistics-box');
var sort_box = $(this).parents('.box-content').find('.sort-box');
sort_box.hide();
$('.screen-box').hide();
if(statistics_box.is(":hidden")){
statistics_box.show(100);
}else{
statistics_box.hide();
}
})
$(document).off('click','.statistics-box-content-item-btn').on('click','.statistics-box-content-item-btn',function(event){
event.stopPropagation();
var _self = $(this);
_self.parent().parent().find('.statistics-box-content-item-content').hide();
_self.parent().find('.statistics-box-content-item-content').show(500);
})
// 統計 end
</script>
~~~
- video
- treemap
- mian.html文件注釋
- 配置項tab
- 配置項屬性
- internalRefreshAxisMdelData函數梳理
- 函數配置項-engine文件
- 替換數據源流程
- design.js
- 樹圖
- 下鉆 廢棄
- 人體圖
- 下鉆地圖
- 行列互轉
- 預覽樣式
- logo旁邊的報表名
- echarts 組件生成圖片
- 數據集樣式
- 頭部 黑色head
- 手機 ipad 圖片
- k線圖部分
- 平臺管理css樣式
- 目錄css和平板的邊距
- 設計頁-數據源-目錄
- 數據集 - 查看數據表 -按鈕和目錄樣式
- 報表列表頁按鈕css
- 角色管理頁按鈕css
- 推送通知按鈕css
- 子賬號按鈕css
- 數據連接
- openlayers地圖線路圖
- openlayers4_map_designer.js
- openlayers4_map_view.js
- 說明
- 常用圖標小bug
- echarts 氣泡地圖
- echarts 線路軌跡圖
- 導出pdf
- 可視化sql--css
- 表格滾動
- 主題色
- 時間軸
- 分享彈框
- 管理平臺header和菜單
- 報表平臺和菜單
- 初始化組件顏色
- 其他彈框
- olap分析樣式-廢棄
- 3d地圖柱狀圖
- 關系圖
- olap分析
- 地區地圖
- k線圖相關屬性設置
- 世界地圖
- 時間軸（new）
- 選擇省份下轉地圖
- 選擇省市飛線地圖
- 面積預警地圖默認顏色
- 組件覆層開關組件
- 汽車儀表盤bug
- 雷達圖bug修復不能分享的問題
- 餅狀 條形圖 自動播放
- 臨時用
- 自動輪播
- 方形元素 按鈕浮動報錯
- 面積預警地圖整合可選擇省市區
- 下鉆地圖添加返回按鈕
- 下鉆地圖修復預警bug
- 基本時間組件
- 添加時鐘組件
- 3d地球組件
- 盒須圖
- 組件加載動畫
- 報表背景漸變色
- 主題模板
- 沒用
- 3機房第三方組件
- 設計
- 分享
- 3d機房需要的靜態資源
- cesium地球需要的文件以及樣式
- cesium地球
- 設計頁
- 分享頁
- 圖標條形圖
- 世豪-前端代碼整理
- component.css 文件新添加
- 雜項
- index.jsp
- designer.css 樣式暫時不整理 里面比較雜
- vs-common.js 新加生成html2canvas pdf
- vs-component-basic.js 完
- vs-component-datasource.js 完
- vs-component-engine.js 完
- vs-component-widget-grid.js 完
- vs-component-widget-square.js 完
- vs-designer.js 完
- vs-designer-component.js 完
- vs-designer-report.js 完
- vs-designer-reportpage.js 完
- vs-component-echarts.js 完
- main.html 完
- component.html 新加組件設置頁模板
- 以前的報表頁設置控制器---做個記錄
- 大概修改過的代碼
- 2019-5-8 修改皮膚控制器
- 選擇模板
- 桑基圖2019-11-20
- bug 修正 2019-11-21
- 插圖柱狀圖
- cesiumchart組件
- gis 地圖 聯動 彈框 圖標
- 動態面積圖添加按鈕類配置項
- 玫瑰圖形組件
- cesium 圖形 和three.js 沖突的bug
- gis 地圖 默認圖層
- 網格標簽
- gis 點圖 值域
- gis 面圖 值域
- 按鈕圖標添加提示框
- 百度地圖
- 剩余的組件
- gulp說明文檔
- 色斑圖加透明