路径：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说明文档
- 色斑图加透明