ehs_tanghHe
/
tanghe-report
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

图标替换

Browse Source
yanzili 3 years ago
parent e2657e7bea
commit e068f409b6
23 changed files with 1283 additions and 478 deletions
Show Stats Download Patch File Download Diff File

552
report-ui/src/assets/iconfont/demo_index.html
Unescape Escape View File

@ -2,8 +2,9 @@
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont Demo</title>
<link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
<title>iconfont Demo</title>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
@ -12,10 +13,33 @@
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
<!-- 代码高亮 -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
<style>
.main .logo {
margin-top: 0;
height: auto;
}
.main .logo a {
display: flex;
align-items: center;
}
.main .logo .sub-title {
margin-left: 0.5em;
font-size: 22px;
color: #fff;
background: linear-gradient(-45deg, #3967FF, #B500FE);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
</a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li>
@ -30,6 +54,138 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe650;</span>
<div class="name">excel</div>
<div class="code-name">&amp;#xe650;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe737;</span>
<div class="name">保存</div>
<div class="code-name">&amp;#xe737;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6c5;</span>
<div class="name">关 闭</div>
<div class="code-name">&amp;#xe6c5;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe614;</span>
<div class="name">pdf</div>
<div class="code-name">&amp;#xe614;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61e;</span>
<div class="name">复制</div>
<div class="code-name">&amp;#xe61e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe78c;</span>
<div class="name">020空心饼图</div>
<div class="code-name">&amp;#xe78c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe662;</span>
<div class="name">时间</div>
<div class="code-name">&amp;#xe662;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6f6;</span>
<div class="name">保存</div>
<div class="code-name">&amp;#xe6f6;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe612;</span>
<div class="name">图片</div>
<div class="code-name">&amp;#xe612;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe691;</span>
<div class="name">柱状图</div>
<div class="code-name">&amp;#xe691;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe65f;</span>
<div class="name">超链接</div>
<div class="code-name">&amp;#xe65f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe605;</span>
<div class="name">文本</div>
<div class="code-name">&amp;#xe605;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xecc1;</span>
<div class="name">视频</div>
<div class="code-name">&amp;#xecc1;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe66a;</span>
<div class="name">框架</div>
<div class="code-name">&amp;#xe66a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe728;</span>
<div class="name">预览</div>
<div class="code-name">&amp;#xe728;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe601;</span>
<div class="name">横向文字</div>
<div class="code-name">&amp;#xe601;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe602;</span>
<div class="name">图表 _饼图</div>
<div class="code-name">&amp;#xe602;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6d5;</span>
<div class="name">漏斗图</div>
<div class="code-name">&amp;#xe6d5;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe630;</span>
<div class="name">图表 折线图</div>
<div class="code-name">&amp;#xe630;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe607;</span>
<div class="name">柱线图</div>
<div class="code-name">&amp;#xe607;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe81d;</span>
<div class="name">图片</div>
<div class="code-name">&amp;#xe81d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe706;</span>
<div class="name">仪表盘</div>
<div class="code-name">&amp;#xe706;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe63b;</span>
<div class="name">返回</div>
@ -493,24 +649,20 @@
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
<ul>
<li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
<li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
</ul>
<blockquote>
<p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
</blockquote>
<p>Unicode 使用步骤如下：</p>
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
src: url('iconfont.woff2?t=1624608582557') format('woff2'),
url('iconfont.woff?t=1624608582557') format('woff'),
url('iconfont.ttf?t=1624608582557') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -536,6 +688,204 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont iconexcel"></span>
<div class="name">
excel
</div>
<div class="code-name">.iconexcel
</div>
</li>
<li class="dib">
<span class="icon iconfont iconbaocun"></span>
<div class="name">
保存
</div>
<div class="code-name">.iconbaocun
</div>
</li>
<li class="dib">
<span class="icon iconfont iconguanbi"></span>
<div class="name">
关 闭
</div>
<div class="code-name">.iconguanbi
</div>
</li>
<li class="dib">
<span class="icon iconfont iconpdf"></span>
<div class="name">
pdf
</div>
<div class="code-name">.iconpdf
</div>
</li>
<li class="dib">
<span class="icon iconfont iconfuzhi"></span>
<div class="name">
复制
</div>
<div class="code-name">.iconfuzhi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon020kongxinbingtu"></span>
<div class="name">
020空心饼图
</div>
<div class="code-name">.icon020kongxinbingtu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconshijian"></span>
<div class="name">
时间
</div>
<div class="code-name">.iconshijian
</div>
</li>
<li class="dib">
<span class="icon iconfont iconsave"></span>
<div class="name">
保存
</div>
<div class="code-name">.iconsave
</div>
</li>
<li class="dib">
<span class="icon iconfont icontupian"></span>
<div class="name">
图片
</div>
<div class="code-name">.icontupian
</div>
</li>
<li class="dib">
<span class="icon iconfont iconzhuzhuangtu"></span>
<div class="name">
柱状图
</div>
<div class="code-name">.iconzhuzhuangtu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconchaolianjie"></span>
<div class="name">
超链接
</div>
<div class="code-name">.iconchaolianjie
</div>
</li>
<li class="dib">
<span class="icon iconfont iconziyuan"></span>
<div class="name">
文本
</div>
<div class="code-name">.iconziyuan
</div>
</li>
<li class="dib">
<span class="icon iconfont iconshipin"></span>
<div class="name">
视频
</div>
<div class="code-name">.iconshipin
</div>
</li>
<li class="dib">
<span class="icon iconfont iconkuangjia"></span>
<div class="name">
框架
</div>
<div class="code-name">.iconkuangjia
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyulan"></span>
<div class="name">
预览
</div>
<div class="code-name">.iconyulan
</div>
</li>
<li class="dib">
<span class="icon iconfont iconhengxiangwenzi"></span>
<div class="name">
横向文字
</div>
<div class="code-name">.iconhengxiangwenzi
</div>
</li>
<li class="dib">
<span class="icon iconfont iconicon_tubiao_bingtu"></span>
<div class="name">
图表 _饼图
</div>
<div class="code-name">.iconicon_tubiao_bingtu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconloudoutu"></span>
<div class="name">
漏斗图
</div>
<div class="code-name">.iconloudoutu
</div>
</li>
<li class="dib">
<span class="icon iconfont icontubiaozhexiantu"></span>
<div class="name">
图表 折线图
</div>
<div class="code-name">.icontubiaozhexiantu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconzhuxiantu"></span>
<div class="name">
柱线图
</div>
<div class="code-name">.iconzhuxiantu
</div>
</li>
<li class="dib">
<span class="icon iconfont icontupian1"></span>
<div class="name">
图片
</div>
<div class="code-name">.icontupian1
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyibiaopan"></span>
<div class="name">
仪表盘
</div>
<div class="code-name">.iconyibiaopan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon1"></span>
<div class="name">
@ -1228,10 +1578,8 @@
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
<p>与 Unicode 使用方式相比，具有如下特点：</p>
<ul>
<li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
<li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
@ -1249,6 +1597,182 @@
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconexcel"></use>
</svg>
<div class="name">excel</div>
<div class="code-name">#iconexcel</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconbaocun"></use>
</svg>
<div class="name">保存</div>
<div class="code-name">#iconbaocun</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconguanbi"></use>
</svg>
<div class="name">关 闭</div>
<div class="code-name">#iconguanbi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconpdf"></use>
</svg>
<div class="name">pdf</div>
<div class="code-name">#iconpdf</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconfuzhi"></use>
</svg>
<div class="name">复制</div>
<div class="code-name">#iconfuzhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon020kongxinbingtu"></use>
</svg>
<div class="name">020空心饼图</div>
<div class="code-name">#icon020kongxinbingtu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconshijian"></use>
</svg>
<div class="name">时间</div>
<div class="code-name">#iconshijian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconsave"></use>
</svg>
<div class="name">保存</div>
<div class="code-name">#iconsave</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icontupian"></use>
</svg>
<div class="name">图片</div>
<div class="code-name">#icontupian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzhuzhuangtu"></use>
</svg>
<div class="name">柱状图</div>
<div class="code-name">#iconzhuzhuangtu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconchaolianjie"></use>
</svg>
<div class="name">超链接</div>
<div class="code-name">#iconchaolianjie</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconziyuan"></use>
</svg>
<div class="name">文本</div>
<div class="code-name">#iconziyuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconshipin"></use>
</svg>
<div class="name">视频</div>
<div class="code-name">#iconshipin</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconkuangjia"></use>
</svg>
<div class="name">框架</div>
<div class="code-name">#iconkuangjia</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyulan"></use>
</svg>
<div class="name">预览</div>
<div class="code-name">#iconyulan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconhengxiangwenzi"></use>
</svg>
<div class="name">横向文字</div>
<div class="code-name">#iconhengxiangwenzi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconicon_tubiao_bingtu"></use>
</svg>
<div class="name">图表 _饼图</div>
<div class="code-name">#iconicon_tubiao_bingtu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconloudoutu"></use>
</svg>
<div class="name">漏斗图</div>
<div class="code-name">#iconloudoutu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icontubiaozhexiantu"></use>
</svg>
<div class="name">图表 折线图</div>
<div class="code-name">#icontubiaozhexiantu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzhuxiantu"></use>
</svg>
<div class="name">柱线图</div>
<div class="code-name">#iconzhuxiantu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icontupian1"></use>
</svg>
<div class="name">图片</div>
<div class="code-name">#icontupian1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyibiaopan"></use>
</svg>
<div class="name">仪表盘</div>
<div class="code-name">#iconyibiaopan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon1"></use>

100
report-ui/src/assets/iconfont/iconfont.css
View File

File diff suppressed because one or more lines are too long

BIN
report-ui/src/assets/iconfont/iconfont.eot
View File

Binary file not shown.

2
report-ui/src/assets/iconfont/iconfont.js
View File

File diff suppressed because one or more lines are too long

154
report-ui/src/assets/iconfont/iconfont.json
Unescape Escape View File

@ -5,6 +5,160 @@
"css_prefix_text": "icon",
"description": "",
"glyphs": [
{
"icon_id": "1990758",
"name": "excel",
"font_class": "excel",
"unicode": "e650",
"unicode_decimal": 58960
},
{
"icon_id": "9445573",
"name": "保存",
"font_class": "baocun",
"unicode": "e737",
"unicode_decimal": 59191
},
{
"icon_id": "11920154",
"name": "关 闭",
"font_class": "guanbi",
"unicode": "e6c5",
"unicode_decimal": 59077
},
{
"icon_id": "16968592",
"name": "pdf",
"font_class": "pdf",
"unicode": "e614",
"unicode_decimal": 58900
},
{
"icon_id": "21538118",
"name": "复制",
"font_class": "fuzhi",
"unicode": "e61e",
"unicode_decimal": 58910
},
{
"icon_id": "1066041",
"name": "020空心饼图",
"font_class": "020kongxinbingtu",
"unicode": "e78c",
"unicode_decimal": 59276
},
{
"icon_id": "2032219",
"name": "时间",
"font_class": "shijian",
"unicode": "e662",
"unicode_decimal": 58978
},
{
"icon_id": "2721664",
"name": "保存",
"font_class": "save",
"unicode": "e6f6",
"unicode_decimal": 59126
},
{
"icon_id": "4803230",
"name": "图片",
"font_class": "tupian",
"unicode": "e612",
"unicode_decimal": 58898
},
{
"icon_id": "5963559",
"name": "柱状图",
"font_class": "zhuzhuangtu",
"unicode": "e691",
"unicode_decimal": 59025
},
{
"icon_id": "6642296",
"name": "超链接",
"font_class": "chaolianjie",
"unicode": "e65f",
"unicode_decimal": 58975
},
{
"icon_id": "7732218",
"name": "文本",
"font_class": "ziyuan",
"unicode": "e605",
"unicode_decimal": 58885
},
{
"icon_id": "9592086",
"name": "视频",
"font_class": "shipin",
"unicode": "ecc1",
"unicode_decimal": 60609
},
{
"icon_id": "12252496",
"name": "框架",
"font_class": "kuangjia",
"unicode": "e66a",
"unicode_decimal": 58986
},
{
"icon_id": "14717060",
"name": "预览",
"font_class": "yulan",
"unicode": "e728",
"unicode_decimal": 59176
},
{
"icon_id": "14728974",
"name": "横向文字",
"font_class": "hengxiangwenzi",
"unicode": "e601",
"unicode_decimal": 58881
},
{
"icon_id": "15066193",
"name": "图表 _饼图",
"font_class": "icon_tubiao_bingtu",
"unicode": "e602",
"unicode_decimal": 58882
},
{
"icon_id": "17247792",
"name": "漏斗图",
"font_class": "loudoutu",
"unicode": "e6d5",
"unicode_decimal": 59093
},
{
"icon_id": "21925168",
"name": "图表 折线图",
"font_class": "tubiaozhexiantu",
"unicode": "e630",
"unicode_decimal": 58928
},
{
"icon_id": "22117888",
"name": "柱线图",
"font_class": "zhuxiantu",
"unicode": "e607",
"unicode_decimal": 58887
},
{
"icon_id": "22300259",
"name": "图片",
"font_class": "tupian1",
"unicode": "e81d",
"unicode_decimal": 59421
},
{
"icon_id": "22398839",
"name": "仪表盘",
"font_class": "yibiaopan",
"unicode": "e706",
"unicode_decimal": 59142
},
{
"icon_id": "18774317",
"name": "返回",

254
report-ui/src/assets/iconfont/iconfont.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 111 KiB

BIN
report-ui/src/assets/iconfont/iconfont.ttf
View File

Binary file not shown.

BIN
report-ui/src/assets/iconfont/iconfont.woff
View File

Binary file not shown.

BIN
report-ui/src/assets/iconfont/iconfont.woff2
View File

Binary file not shown.

BIN
report-ui/src/assets/images/bianzu.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 859 B

BIN
report-ui/src/assets/images/qrcode.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
report-ui/src/assets/images/tiaoxingma.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 940 B

91
report-ui/src/assets/styles/index.scss
Unescape Escape View File

@ -190,3 +190,94 @@ a:hover {
.el-input-group__append, .el-input-group__prepend{
color: #333;
}
//avue
.preview-form{
height: auto!important;
overflow-y: auto!important;
}
.x-spreadsheet-toolbar-btns{
margin-left: 30px !important;
}
.ml10{
margin-left: 10px;
}
.Customized .CodeMirror {
font-family: monospace;
height: 190px !important;
color: black;
direction: ltr;
}
.jsoneditor-vue{
height: 100%;
}
.printSet {
background-image: url('../images/bianzu.png') !important;
background-size: 19px;
background-position: left top;
background-repeat: no-repeat;
position: absolute;
opacity: 1!important;
}
.qrCodes {
background-image: url('../images/qrcode.png') !important;
background-size: 19px;
background-position: left top;
background-repeat: no-repeat;
position: absolute;
opacity: 1!important;
}
.barCodes {
background-image: url('../images/tiaoxingma.png') !important;
background-size: 19px;
background-position: left top;
background-repeat: no-repeat;
position: absolute;
opacity: 1!important;
}
.collapse-input-style {
.el-input__inner ,.el-textarea__inner{
background: #263445 !important;
border: 1px solid #3f5673;
color:#a8e3ff
}
.el-slider__runway{
height: 2px;
background-color:#5e6b82
}
.el-slider__bar{
height: 2px;
}
.el-slider__button-wrapper{
top: -17px;
}
.el-slider__button{
width: 14px;
height: 14px;
}
.el-switch__core{
background-color:#5e6b82;
border: 1px solid #3f5673;
}
.el-input-group__append, .el-input-group__prepend{
background: #5e6b82 !important;
border: 1px solid #3f5673;
color:#a8e3ff
}
.el-input-number__increase, .el-input-number__decrease{
background: #5e6b82 !important;
border: 1px solid #3f5673;
color:#a8e3ff
}
.el-input-number.is-controls-right .el-input-number__increase{
border-bottom: 1px solid #3f5673;
}
.el-input-number.is-controls-right .el-input-number__decrease{
border-left: 1px solid #3f5673;
}
.el-form-item__label {
font-size: 12px;
color: #bfcbd9!important;
font-weight: normal !important;
}
}

19
report-ui/src/views/report/bigscreen/designer/form/colorPicker.vue
Unescape Escape View File

@ -5,9 +5,14 @@
* @Last Modified time: 2021-4-8 11:04:24
!-->
<template>
<el-popover placement="right" trigger="click">
<Chrome v-model="colors" @input="updateValue" />
<el-input slot="reference" v-model="colors.hex" placeholder="颜色选择器">
<el-popover placement="right"
trigger="click">
<Chrome v-model="colors"
@input="updateValue" />
<el-input slot="reference"
v-model="colors.hex"
size="mini"
placeholder="颜色选择器">
<template #append><i class="iconfont iconcolorSelector" /></template>
</el-input>
</el-popover>
@ -30,7 +35,7 @@ export default {
default: '',
},
},
data() {
data () {
return {
colors: {
hex: '',
@ -41,15 +46,15 @@ export default {
}
},
watch: {
value(val) {
value (val) {
this.colors.hex = val
}
},
mounted() {
mounted () {
this.colors.hex = this.value
},
methods: {
updateValue(value) {
updateValue (value) {
// this.colors = value
this.$emit('input', value.hex)
this.$emit('change', value.hex)

17
report-ui/src/views/report/bigscreen/designer/form/contentMenu.vue
Unescape Escape View File

@ -1,6 +1,11 @@
<template>
<div v-show="visible" class="contentmenu" :style="styleObj">
<div class="contentmenu__item" @click="deleteLayer"><svg-icon icon-class="guanbi" /> 删除图层</div>
<div v-show="visible"
class="contentmenu"
:style="styleObj">
<div class="contentmenu__item"
@click="deleteLayer">
<i class="iconfont iconguanbi"></i> 删除图层
</div>
</div>
</template>
<script>
@ -9,11 +14,11 @@ export default {
styleObj: Object,
visible: Boolean,
},
data() {
data () {
return {}
},
watch: {
visible(value) {
visible (value) {
if (value) {
document.body.addEventListener('click', this.closeMenu)
} else {
@ -22,10 +27,10 @@ export default {
},
},
methods: {
closeMenu() {
closeMenu () {
this.$emit('update:visible', false)
},
deleteLayer() {
deleteLayer () {
this.$confirm('是否删除所选图层?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',

79
report-ui/src/views/report/bigscreen/designer/form/customColorComponents.vue
Unescape Escape View File

@ -1,61 +1,60 @@
<template>
<div>
<el-button type="primary" icon="el-icon-plus" plain @click="handleAddClick"
>新增</el-button
>
<el-table :data="formData" style="width: 100%">
<el-table-column prop="color" label="颜色" align="center">
<el-button type="primary"
icon="el-icon-plus"
plain
@click="handleAddClick">新增</el-button>
<el-table :data="formData"
style="width: 100%">
<el-table-column prop="color"
label="颜色"
align="center">
<template slot-scope="scope">
<span class="color-box" :style="{ background: scope.row.color }" />
<span class="color-box"
:style="{ background: scope.row.color }" />
</template>
</el-table-column>
<el-table-column label="位置" align="center">
<el-table-column label="位置"
align="center">
<template slot-scope="scope">
<span
class="editor"
@click="handleEditorClick(scope.$index, scope.row)"
>
<span class="editor"
@click="handleEditorClick(scope.$index, scope.row)">
<i class="el-icon-edit" /> 编辑
</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<el-table-column label="操作"
align="center">
<template slot-scope="scope">
<span
class="editor"
@click="handleDeleteClick(scope.$index, scope.row)"
>
<span class="editor"
@click="handleDeleteClick(scope.$index, scope.row)">
<i class="el-icon-delete" /> 删除
</span>
</template>
</el-table-column>
</el-table>
<el-dialog
title="新增"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<el-dialog title="新增"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<el-form>
<el-form-item label="颜色">
<el-input
v-model="colorValue"
style="width: 200px"
placeholder="请输入颜色"
>
<el-input v-model="colorValue"
style="width: 200px"
placeholder="请输入颜色">
<template slot="append">
<el-color-picker
v-model="colorValue"
:predefine="predefineColors"
/>
<el-color-picker v-model="colorValue"
:predefine="predefineColors" />
</template>
</el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<span slot="footer"
class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleSaveClick">确 定</el-button>
<el-button type="primary"
@click="handleSaveClick">确 定</el-button>
</span>
</el-dialog>
</div>
@ -70,7 +69,7 @@ export default {
props: {
formData: Array
},
data() {
data () {
return {
predefineColors: [
"#ff4500",
@ -87,21 +86,21 @@ export default {
indexEditor: -1 // 编辑第几个数据
};
},
mounted() {},
mounted () { },
methods: {
// 弹出框关闭
handleClose() {
handleClose () {
this.dialogVisible = false;
this.colorValue = "";
},
// 新增
handleAddClick() {
handleAddClick () {
this.colorValue = "";
this.flag = true;
this.dialogVisible = true;
},
// 确定
handleSaveClick() {
handleSaveClick () {
if (this.flag) {
// 新增
const obj = {
@ -117,14 +116,14 @@ export default {
this.$emit("input", this.formData);
},
// 编辑
handleEditorClick(index, row) {
handleEditorClick (index, row) {
this.flag = false;
this.colorValue = row.color;
this.dialogVisible = true;
this.indexEditor = index;
},
// 删除
handleDeleteClick(index) {
handleDeleteClick (index) {
this.formData.splice(index, 1);
}
}

52
report-ui/src/views/report/bigscreen/designer/form/dynamicComponents.vue
Unescape Escape View File

@ -1,18 +1,34 @@
<template>
<div>
<el-form label-width="80px" label-position="left">
<el-form label-width="80px"
label-position="left">
<el-form-item label="数据集">
<el-select v-model="dataSetValue" clearable placeholder="请选择" @change="selectDataSet">
<el-option v-for="item in dataSet" :key="item.code" :label="item.setName" :value="item.id" />
<el-select v-model="dataSetValue"
clearable
placeholder="请选择"
@change="selectDataSet">
<el-option v-for="item in dataSet"
:key="item.code"
:label="item.setName"
:value="item.id" />
</el-select>
</el-form-item>
<el-form-item v-for="(item, index) in userNameList" :key="index" :label="item.paramName">
<el-form-item v-for="(item, index) in userNameList"
:key="index"
:label="item.paramName">
<el-input v-model="item.sampleItem" />
</el-form-item>
<el-form-item v-for="item in setParamList" :key="item" :label="item">
<Dictionary v-model="params" :dict-key="'CHART_PROPERTIES'" @input="selectParams($event, item)" />
<el-form-item v-for="item in setParamList"
:key="item"
:label="item">
<Dictionary v-model="params"
:dict-key="'CHART_PROPERTIES'"
@input="selectParams($event, item)" />
</el-form-item>
<el-button style="width: 100%" type="primary" plain @click="saveDataBtn">刷新</el-button>
<el-button style="width: 100%"
type="primary"
plain
@click="saveDataBtn">刷新</el-button>
</el-form>
</div>
</template>
@ -33,7 +49,7 @@ export default {
chartType: String,
props: ['formData'],
},
data() {
data () {
return {
dataSetValue: '',
dataSet: [], // 数据集
@ -44,7 +60,7 @@ export default {
}
},
computed: {
setCode() {
setCode () {
let code = ''
this.dataSet.forEach((el) => {
if (el.id == this.dataSetValue) {
@ -54,22 +70,22 @@ export default {
return code
},
},
mounted() {
mounted () {
this.loadDataSet()
},
methods: {
async loadDataSet() {
async loadDataSet () {
const { code, data } = await queryAllDataSet()
this.dataSet = data
if (code != '200') return
},
async selectDataSet() {
async selectDataSet () {
const { code, data } = await detailBysetId(this.dataSetValue)
this.userNameList = data.dataSetParamDtoList
this.setParamList = data.setParamList
if (code != '200') return
},
async saveDataBtn() {
async saveDataBtn () {
const contextData = {}
for (let i = 0; i < this.userNameList.length; i++) {
contextData[this.userNameList[i].paramName] = this.userNameList[i].sampleItem
@ -86,11 +102,11 @@ export default {
this.$emit('input', analysisData)
if (code != '200') return
},
selectParams(val, key) {
selectParams (val, key) {
this.chartProperties[key] = val
},
// 解析不同图标的数据
analysisChartsData(data) {
analysisChartsData (data) {
// widget-barchart 柱线图、widget-linechart 折线图、 widget-barlinechart 柱线图、widget-piechart 饼图、widget-hollow-piechart 空心饼图
// widget-funnel 漏斗图 widget-gauge 仪表盘
const chartType = this.chartType
@ -104,7 +120,7 @@ export default {
}
},
// 柱状图、折线图、折柱图
barOrLineChartFn(data) {
barOrLineChartFn (data) {
const ananysicData = {}
const xAxisList = []
const series = []
@ -134,7 +150,7 @@ export default {
},
// 饼图或者空心饼图或者漏斗图
piechartFn(data) {
piechartFn (data) {
const ananysicData = []
for (let i = 0; i < data.length; i++) {
const obj = {}
@ -151,7 +167,7 @@ export default {
// console.log(ananysicData, '结果数据')
return ananysicData
},
gaugeFn(data) {
gaugeFn (data) {
const ananysicData = []
for (let i = 0; i < data.length; i++) {
const obj = {}

210
report-ui/src/views/report/bigscreen/designer/form/dynamicForm.vue
Unescape Escape View File

@ -7,73 +7,182 @@
!-->
<template>
<div class="collapse-input-style">
<el-form label-width="80px" label-position="left">
<el-form label-width="80px"
label-position="left">
<template v-for="(item, index) in options">
<div v-if="isShowForm(item, '[object Object]')" :key="index">
<el-form-item v-if="inputShow[item.name]" :label="item.label" :prop="item.name" :required="item.required">
<el-input-number v-if="item.type == 'el-input-number'" v-model="formData[item.name]" controls-position="right" :placeholder="item.placeholder" @change="changed($event, item.name)" />
<div v-if="isShowForm(item, '[object Object]')"
:key="index">
<el-form-item v-if="inputShow[item.name]"
:label="item.label"
:prop="item.name"
:required="item.required">
<el-input-number v-if="item.type == 'el-input-number'"
size="mini"
style="width:100%"
v-model="formData[item.name]"
controls-position="right"
:placeholder="item.placeholder"
@change="changed($event, item.name)" />
<el-input v-if="item.type == 'el-input-text'" v-model.trim="formData[item.name]" type="text" placeholder="请输入内容" clearable @change="changed($event, item.name)" />
<el-input v-if="item.type == 'el-input-text'"
v-model.trim="formData[item.name]"
type="text"
size="mini"
placeholder="请输入内容"
clearable
@change="changed($event, item.name)" />
<el-input v-if="item.type == 'el-input-textarea'" v-model.trim="formData[item.name]" type="textarea" rows="2" placeholder="请输入内容" @change="changed($event, item.name)" />
<el-input v-if="item.type == 'el-input-textarea'"
v-model.trim="formData[item.name]"
type="textarea"
size="mini"
rows="2"
placeholder="请输入内容"
@change="changed($event, item.name)" />
<el-switch v-if="item.type == 'el-switch'" v-model="formData[item.name]" placeholder="请输入内容" @change="changed($event, item.name)" />
<el-switch v-if="item.type == 'el-switch'"
v-model="formData[item.name]"
size="mini"
placeholder="请输入内容"
@change="changed($event, item.name)" />
<ColorPicker v-if="item.type == 'vue-color'" v-model="formData[item.name]" @change="(val) => changed(val, item.name)" />
<ColorPicker v-if="item.type == 'vue-color'"
v-model="formData[item.name]"
@change="(val) => changed(val, item.name)" />
<el-upload v-if="item.type == 'el-upload-picture'" action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" />
<el-upload v-if="item.type == 'el-upload-picture'"
size="mini"
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card" />
<el-radio-group v-if="item.type == 'el-radio-group'" v-model="formData[item.name]" @change="(val) => changed(val, item.name)">
<el-radio v-for="itemChild in item.selectOptions" :key="itemChild.code" :label="itemChild.code">{{ itemChild.name }}</el-radio>
<el-radio-group v-if="item.type == 'el-radio-group'"
v-model="formData[item.name]"
@change="(val) => changed(val, item.name)">
<el-radio v-for="itemChild in item.selectOptions"
:key="itemChild.code"
:label="itemChild.code">{{ itemChild.name }}</el-radio>
</el-radio-group>
<el-select v-if="item.type == 'el-select'" v-model="formData[item.name]" clearable placeholder="请选择" @change="(val) => changed(val, item.name)">
<el-option v-for="itemChild in item.selectOptions" :key="itemChild.code" :label="itemChild.name" :value="itemChild.code" />
<el-select v-if="item.type == 'el-select'"
size="mini"
v-model="formData[item.name]"
clearable
placeholder="请选择"
@change="(val) => changed(val, item.name)">
<el-option v-for="itemChild in item.selectOptions"
:key="itemChild.code"
:label="itemChild.name"
:value="itemChild.code" />
</el-select>
<el-slider v-if="item.type == 'el-slider'" v-model="formData[item.name]" @change="(val) => changed(val, item.name)" />
<el-slider v-if="item.type == 'el-slider'"
v-model="formData[item.name]"
@change="(val) => changed(val, item.name)" />
<el-button v-if="item.type == 'el-button'" type="primary" plain @click="addStaticData">编辑</el-button>
<el-button v-if="item.type == 'el-button'"
type="primary"
plain
@click="addStaticData">编辑</el-button>
<!-- 弹窗 -->
<el-dialog title="代码编辑" :visible.sync="dialogVisibleStaticData" width="50%" :before-close="handleClose">
<codemirror v-model.trim="formData[item.name]" class="code-mirror" :options="optionsJavascript" style="height: 190px" />
<span slot="footer" class="dialog-footer">
<el-dialog title="代码编辑"
:visible.sync="dialogVisibleStaticData"
width="50%"
:before-close="handleClose">
<codemirror v-model.trim="formData[item.name]"
class="code-mirror"
:options="optionsJavascript"
style="height: 190px" />
<span slot="footer"
class="dialog-footer">
<el-button @click="dialogVisibleStaticData = false">取 消</el-button>
<el-button type="primary" @click="saveData">确 定</el-button>
<el-button type="primary"
@click="saveData">确 定</el-button>
</span>
</el-dialog>
</el-form-item>
<dynamicComponents v-if="item.type == 'dycustComponents' && inputShow[item.name]" v-model="formData[item.name]" :chart-type="item.chartType" />
<dynamicComponents v-if="item.type == 'dycustComponents' && inputShow[item.name]"
v-model="formData[item.name]"
:chart-type="item.chartType" />
</div>
<div v-else-if="isShowForm(item, '[object Array]')" :key="'a-' + index">
<div v-else-if="isShowForm(item, '[object Array]')"
:key="'a-' + index">
<el-collapse accordion>
<el-collapse-item v-for="(itemChild, indexChild) in item" :key="indexChild" :title="itemChild.name" :name="indexChild">
<el-collapse-item v-for="(itemChild, indexChild) in item"
:key="indexChild"
:title="itemChild.name"
:name="indexChild">
<template v-for="(itemChildList, idx) in itemChild.list">
<el-form-item :key="idx" :label="itemChildList.label" :prop="itemChildList.name" :required="itemChildList.required">
<el-input-number v-if="itemChildList.type == 'el-input-number'" v-model="formData[itemChildList.name]" controls-position="right" :placeholder="itemChildList.placeholder" @change="changed($event, itemChildList.name)" />
<el-form-item :key="idx"
:label="itemChildList.label"
:prop="itemChildList.name"
:required="itemChildList.required">
<el-input-number v-if="itemChildList.type == 'el-input-number'"
size="mini"
style="width:100%"
v-model="formData[itemChildList.name]"
controls-position="right"
:placeholder="itemChildList.placeholder"
@change="changed($event, itemChildList.name)" />
<el-input v-if="itemChildList.type == 'el-input-text'" v-model.trim="formData[itemChildList.name]" type="text" placeholder="请输入内容" clearable @change="changed($event, itemChildList.name)" />
<el-input v-if="itemChildList.type == 'el-input-text'"
v-model.trim="formData[itemChildList.name]"
type="text"
size="mini"
placeholder="请输入内容"
clearable
@change="changed($event, itemChildList.name)" />
<el-input v-if="itemChildList.type == 'el-input-textarea'" v-model.trim="formData[itemChildList.name]" type="textarea" rows="2" placeholder="请输入内容" @change="changed($event, itemChildList.name)" />
<el-input v-if="itemChildList.type == 'el-input-textarea'"
v-model.trim="formData[itemChildList.name]"
size="mini"
type="textarea"
rows="2"
placeholder="请输入内容"
@change="changed($event, itemChildList.name)" />
<el-switch v-if="itemChildList.type == 'el-switch'" v-model="formData[itemChildList.name]" placeholder="请输入内容" @change="changed($event, itemChildList.name)" />
<el-switch v-if="itemChildList.type == 'el-switch'"
v-model="formData[itemChildList.name]"
placeholder="请输入内容"
size="mini"
@change="changed($event, itemChildList.name)" />
<ColorPicker v-if="itemChildList.type == 'vue-color'" v-model="formData[itemChildList.name]" @change="(val) => changed(val, itemChildList.name)" />
<ColorPicker v-if="itemChildList.type == 'vue-color'"
v-model="formData[itemChildList.name]"
@change="(val) => changed(val, itemChildList.name)" />
<el-upload v-if="itemChildList.type == 'el-upload-picture'" action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" />
<el-upload v-if="itemChildList.type == 'el-upload-picture'"
size="mini"
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card" />
<el-radio-group v-if="itemChildList.type == 'el-radio-group'" v-model="formData[itemChildList.name]" @change="(val) => changed(val, itemChildList.name)">
<el-radio v-for="it in itemChildList.selectOptions" :key="it.code" :label="it.code">{{ it.name }}</el-radio>
<el-radio-group v-if="itemChildList.type == 'el-radio-group'"
v-model="formData[itemChildList.name]"
@change="(val) => changed(val, itemChildList.name)">
<el-radio v-for="it in itemChildList.selectOptions"
:key="it.code"
:label="it.code">{{ it.name }}</el-radio>
</el-radio-group>
<el-select v-if="itemChildList.type == 'el-select'" v-model="formData[itemChildList.name]" clearable placeholder="请选择" @change="(val) => changed(val, itemChildList.name)">
<el-option v-for="it in itemChildList.selectOptions" :key="it.code" :label="it.name" :value="it.code" />
<el-select v-if="itemChildList.type == 'el-select'"
size="mini"
v-model="formData[itemChildList.name]"
clearable
placeholder="请选择"
@change="(val) => changed(val, itemChildList.name)">
<el-option v-for="it in itemChildList.selectOptions"
:key="it.code"
:label="it.name"
:value="it.code" />
</el-select>
<el-slider v-if="itemChildList.type == 'el-slider'" v-model="formData[itemChildList.name]" @change="(val) => changed(val, itemChildList.name)" />
<el-slider v-if="itemChildList.type == 'el-slider'"
v-model="formData[itemChildList.name]"
@change="(val) => changed(val, itemChildList.name)" />
</el-form-item>
<customColorComponents v-if="itemChildList.type == 'customColor'" :key="'b-' + idx" v-model="formData[itemChildList.name]" />
<customColorComponents v-if="itemChildList.type == 'customColor'"
:key="'b-' + idx"
v-model="formData[itemChildList.name]" />
</template>
</el-collapse-item>
</el-collapse>
@ -111,10 +220,10 @@ export default {
options: Array,
value: {
type: [Object],
default: () => {},
default: () => { },
},
},
data() {
data () {
return {
formData: {},
inputShow: {}, // 控制表单是否显示
@ -135,28 +244,28 @@ export default {
}
},
watch: {
value(newValue, oldValue) {
value (newValue, oldValue) {
this.formData = newValue || {}
},
options() {
options () {
this.setDefaultValue()
this.isShowData()
},
formData: {
handler() {
handler () {
this.$emit('onChanged', this.formData)
},
deep: true,
},
},
created() {
created () {
this.isShowData()
this.setDefaultValue()
},
mounted() {},
mounted () { },
methods: {
// 无论哪个输入框改变 都需要触发事件 将值回传
changed(val, key) {
changed (val, key) {
if (val.extend) {
this.$set(this.formData, key, val.value)
} else {
@ -172,19 +281,19 @@ export default {
}
}
},
saveData() {
saveData () {
this.$emit('onChanged', this.formData)
this.dialogVisibleStaticData = false
},
// 静态数据
addStaticData() {
addStaticData () {
this.dialogVisibleStaticData = true
},
handleClose() {
handleClose () {
this.dialogVisibleStaticData = false
},
// 组件属性 数据是否展示动态还是静态数据
isShowData() {
isShowData () {
let currentData = {}
const data = []
for (let i = 0; i < this.options.length; i++) {
@ -203,7 +312,7 @@ export default {
})
},
// 组件拖入时 赋值
setDefaultValue() {
setDefaultValue () {
if (this.options && this.options.length > 0) {
for (let i = 0; i < this.options.length; i++) {
const obj = this.options[i]
@ -222,7 +331,7 @@ export default {
}
},
// 是否显示 那种格式
isShowForm(val, type) {
isShowForm (val, type) {
return Object.prototype.toString.call(val) == type
},
},
@ -230,6 +339,9 @@ export default {
</script>
<style scoped lang="scss">
/deep/ .el-form-item {
margin-bottom: 5px;
}
/deep/ .el-form-item__label {
font-size: 12px;
color: #fff;

181
report-ui/src/views/report/bigscreen/designer/index.vue
Unescape Escape View File

@ -6,15 +6,21 @@
!-->
<template>
<div class="layout">
<div v-if="toolIsShow" class="layout-left" :style="{ width: widthLeftForTools + 'px' }">
<el-tabs type="border-card" :stretch="true">
<div v-if="toolIsShow"
class="layout-left"
:style="{ width: widthLeftForTools + 'px' }">
<el-tabs type="border-card"
:stretch="true">
<!-- 左侧组件栏-->
<el-tab-pane label="工具栏">
<!-- <el-divider content-position="center">html</el-divider>-->
<draggable v-for="widget in widgetTools" :key="widget.code" @end="(evt) => widgetOnDragged(evt, widget.code)">
<draggable v-for="widget in widgetTools"
:key="widget.code"
@end="(evt) => widgetOnDragged(evt, widget.code)">
<div class="tools-item">
<span class="tools-item-icon">
<svg-icon :icon-class="widget.icon" />
<i class="iconfont"
:class="widget.icon"></i>
</span>
<span class="tools-item-text">{{ widget.label }}</span>
</div>
@ -22,9 +28,12 @@
</el-tab-pane>
<!-- 左侧图层-->
<el-tab-pane label="图层">
<div v-for="(item, index) in layerWidget" :key="index" class="tools-item">
<div v-for="(item, index) in layerWidget"
:key="index"
class="tools-item">
<span class="tools-item-icon">
<svg-icon :icon-class="item.icon" />
<i class="iconfont"
:class="item.icon"></i>
</span>
<span class="tools-item-text">{{ item.label }}</span>
</div>
@ -32,47 +41,92 @@
</el-tabs>
</div>
<div class="layout-left-fold" :style="{ width: widthLeftForToolsHideButton + 'px' }" @click="toolIsShow = !toolIsShow">
<div class="layout-left-fold"
:style="{ width: widthLeftForToolsHideButton + 'px' }"
@click="toolIsShow = !toolIsShow">
<i class="iconfont iconfold" />
</div>
<div class="layout-middle" :style="{ width: middleWidth + 'px', height: middleHeight + 'px' }">
<div class="layout-middle"
:style="{ width: middleWidth + 'px', height: middleHeight + 'px' }">
<div class="top-button">
<span class="btn">
<el-tooltip class="item" effect="dark" content="保存" placement="bottom">
<svg-icon icon-class="report" @click="saveData" />
<el-tooltip class="item"
effect="dark"
content="保存"
placement="bottom">
<i class="iconfont iconsave"
@click="saveData"></i>
</el-tooltip>
</span>
<span class="btn">
<el-tooltip class="item" effect="dark" content="预览" placement="bottom">
<svg-icon icon-class="eye-open" @click="viewScreen" />
<el-tooltip class="item"
effect="dark"
content="预览"
placement="bottom">
<i class="iconfont iconyulan"
@click="viewScreen"></i>
</el-tooltip>
</span>
</div>
<div class="workbench-container" :style="{ width: bigscreenWidthInWorkbench + 'px', height: bigscreenHeightInWorkbench + 'px' }">
<vue-ruler-tool v-model="dashboard.presetLine" class="vueRuler" :step-length="50" :parent="true" :position="'relative'" :is-scale-revise="true" :visible.sync="dashboard.presetLineVisible">
<div id="workbench" class="workbench" :style="{ transform: workbenchTransform, width: bigscreenWidth + 'px', height: bigscreenHeight + 'px', 'background-color': dashboard.backgroundColor, 'background-image': 'url(' + dashboard.backgroundImage + ')', 'background-position': '0% 0%', 'background-size': '100% 100%', 'background-repeat': 'initial', 'background-attachment': 'initial', 'background-origin': 'initial', 'background-clip': 'initial' }" @click="setOptionsOnClickScreen">
<widget v-for="(widget, index) in widgets" :key="index" v-model="widget.value" :index="index" :type="widget.type" :bigscreen="{ bigscreenWidth, bigscreenHeight }" @onActivated="setOptionsOnClickWidget" @contextmenu.prevent.native="rightClick($event, index)" />
<div class="workbench-container"
:style="{ width: bigscreenWidthInWorkbench + 'px', height: bigscreenHeightInWorkbench + 'px' }">
<vue-ruler-tool v-model="dashboard.presetLine"
class="vueRuler"
:step-length="50"
:parent="true"
:position="'relative'"
:is-scale-revise="true"
:visible.sync="dashboard.presetLineVisible">
<div id="workbench"
class="workbench"
:style="{ transform: workbenchTransform, width: bigscreenWidth + 'px', height: bigscreenHeight + 'px', 'background-color': dashboard.backgroundColor, 'background-image': 'url(' + dashboard.backgroundImage + ')', 'background-position': '0% 0%', 'background-size': '100% 100%', 'background-repeat': 'initial', 'background-attachment': 'initial', 'background-origin': 'initial', 'background-clip': 'initial' }"
@click="setOptionsOnClickScreen">
<widget v-for="(widget, index) in widgets"
:key="index"
v-model="widget.value"
:index="index"
:type="widget.type"
:bigscreen="{ bigscreenWidth, bigscreenHeight }"
@onActivated="setOptionsOnClickWidget"
@contextmenu.prevent.native="rightClick($event, index)" />
</div>
</vue-ruler-tool>
</div>
</div>
<div class="layout-right" :style="{ width: widthLeftForOptions + 'px' }">
<el-tabs v-model="activeName" type="border-card" :stretch="true">
<el-tab-pane v-if="isNotNull(widgetOptions.setup) || isNotNull(widgetOptions.collapse)" name="first" label="配置">
<dynamicForm ref="formData" :options="widgetOptions.setup" @onChanged="(val) => widgetValueChanged('setup', val)" />
<div class="layout-right"
:style="{ width: widthLeftForOptions + 'px' }">
<el-tabs v-model="activeName"
type="border-card"
:stretch="true">
<el-tab-pane v-if="isNotNull(widgetOptions.setup) || isNotNull(widgetOptions.collapse)"
name="first"
label="配置">
<dynamicForm ref="formData"
:options="widgetOptions.setup"
@onChanged="(val) => widgetValueChanged('setup', val)" />
</el-tab-pane>
<el-tab-pane v-if="isNotNull(widgetOptions.data)" name="second" label="数据">
<dynamicForm ref="formData" :options="widgetOptions.data" @onChanged="(val) => widgetValueChanged('data', val)" />
<el-tab-pane v-if="isNotNull(widgetOptions.data)"
name="second"
label="数据">
<dynamicForm ref="formData"
:options="widgetOptions.data"
@onChanged="(val) => widgetValueChanged('data', val)" />
</el-tab-pane>
<el-tab-pane v-if="isNotNull(widgetOptions.position)" name="third" label="坐标">
<dynamicForm ref="formData" :options="widgetOptions.position" @onChanged="(val) => widgetValueChanged('position', val)" />
<el-tab-pane v-if="isNotNull(widgetOptions.position)"
name="third"
label="坐标">
<dynamicForm ref="formData"
:options="widgetOptions.position"
@onChanged="(val) => widgetValueChanged('position', val)" />
</el-tab-pane>
</el-tabs>
</div>
<content-menu :visible.sync="visibleContentMenu" :style-obj="styleObj" @deletelayer="deletelayer" />
<content-menu :visible.sync="visibleContentMenu"
:style-obj="styleObj"
@deletelayer="deletelayer" />
</div>
</template>
@ -93,7 +147,7 @@ export default {
dynamicForm,
contentMenu,
},
data() {
data () {
return {
widgetTools: widgetTools, // 左侧工具栏的组件图标，将js变量加入到当前作用域
widthLeftForTools: 200, // 左侧工具栏宽度
@ -159,7 +213,7 @@ export default {
},
computed: {
// 左侧折叠切换时，动态计算中间区的宽度
middleWidth() {
middleWidth () {
var widthLeftAndRight = 0
if (this.toolIsShow) {
widthLeftAndRight += this.widthLeftForTools // 左侧工具栏宽度
@ -170,26 +224,26 @@ export default {
var middleWidth = this.bodyWidth - widthLeftAndRight
return middleWidth
},
middleHeight() {
middleHeight () {
return this.bodyHeight
},
// 设计台按大屏的缩放比例
bigscreenScaleInWorkbench() {
bigscreenScaleInWorkbench () {
var widthScale = this.middleWidth / this.bigscreenWidth
var heightScale = this.middleHeight / this.bigscreenHeight
return Math.min(widthScale, heightScale)
},
workbenchTransform() {
workbenchTransform () {
return `scale(${this.bigscreenScaleInWorkbench}, ${this.bigscreenScaleInWorkbench})`
},
// 大屏在设计模式的大小
bigscreenWidthInWorkbench() {
bigscreenWidthInWorkbench () {
return this.getPXUnderScale(this.bigscreenWidth)
},
bigscreenHeightInWorkbench() {
bigscreenHeightInWorkbench () {
return this.getPXUnderScale(this.bigscreenHeight)
},
layerWidget() {
layerWidget () {
const layerWidgetArr = []
for (let i = 0; i < this.widgets.length; i++) {
layerWidgetArr.push(getToolByCode(this.widgets[i].type))
@ -197,7 +251,7 @@ export default {
return layerWidgetArr
},
},
mounted() {
mounted () {
// 一进入时，加载屏幕配置属性
this.setOptionsOnClickScreen()
@ -206,7 +260,7 @@ export default {
this.widgets = []
},
methods: {
async initEchartData() {
async initEchartData () {
const reportCode = this.$route.query.reportCode
const { code, data } = await detailDashboard(reportCode)
if (code != 200) return
@ -215,7 +269,7 @@ export default {
this.widgets = processData
this.dashboard = screenData
},
handleBigScreen(data) {
handleBigScreen (data) {
const optionScreen = this.deepClone(getToolByCode('screen').options)
const setup = optionScreen.setup
for (const key in data) {
@ -233,7 +287,7 @@ export default {
width: data.width,
}
},
handleInitEchartsData(data) {
handleInitEchartsData (data) {
console.log(data)
const widgets = data.dashboard.widgets
const widgetsData = []
@ -254,7 +308,7 @@ export default {
}
return widgetsData
},
handleOptionsData(data, option) {
handleOptionsData (data, option) {
for (const key in data.setup) {
for (let i = 0; i < option.setup.length; i++) {
if (key == option.setup[i].name) {
@ -292,7 +346,7 @@ export default {
return option
},
// 保存数据
async saveData() {
async saveData () {
if (!this.widgets || this.widgets.length == 0) {
this.$message.error('请添加组件')
return
@ -312,7 +366,7 @@ export default {
if (code != '200') return
},
// 预览
viewScreen() {
viewScreen () {
var routeUrl = this.$router.resolve({
path: '/report/bigscreen/viewer',
query: { reportCode: this.$route.query.reportCode },
@ -320,12 +374,12 @@ export default {
window.open(routeUrl.href, '_blank')
},
// 在缩放模式下的大小
getPXUnderScale(px) {
getPXUnderScale (px) {
return this.bigscreenScaleInWorkbench * px
},
// 拖动一个组件放到工作区中去，在拖动结束时，放到工作区对应的坐标点上去
widgetOnDragged(evt, widgetCode) {
widgetOnDragged (evt, widgetCode) {
var widgetType = widgetCode
// 获取结束坐标和列名
@ -367,7 +421,7 @@ export default {
},
// 对组件默认值处理
handleDefaultValue(widgetJson) {
handleDefaultValue (widgetJson) {
for (const key in widgetJson) {
if (key == 'options') {
// collapse、data、position、setup
@ -407,7 +461,7 @@ export default {
},
// 如果是点击大屏设计器中的底层，加载大屏底层属性
setOptionsOnClickScreen() {
setOptionsOnClickScreen () {
this.screenCode = 'screen'
// 选中不同的组件 右侧都显示第一栏
this.activeName = 'first'
@ -415,7 +469,7 @@ export default {
},
// 如果是点击某个组件，获取该组件的配置项
setOptionsOnClickWidget(index) {
setOptionsOnClickWidget (index) {
// 选中不同的组件 右侧都显示第一栏
this.activeName = 'first'
this.screenCode = ''
@ -434,7 +488,7 @@ export default {
},
// 将当前选中的组件，右侧属性值更新
widgetValueChanged(key, val) {
widgetValueChanged (key, val) {
/* 更新指定 this.widgets 中第 this.widgetIndex 个组件的value
widgets: [{
type: 'widget-text',
@ -455,7 +509,7 @@ export default {
}
}
},
rightClick(event, index) {
rightClick (event, index) {
this.rightClickIndex = index
const left = event.clientX
const top = event.clientY
@ -469,10 +523,10 @@ export default {
this.visibleContentMenu = true
return false
},
deletelayer() {
deletelayer () {
this.widgets.splice(this.rightClickIndex, 1)
},
setDefaultValue(options, val) {
setDefaultValue (options, val) {
for (let i = 0; i < options.length; i++) {
if (Object.prototype.toString.call(options[i]) == '[object Object]') {
for (const k in val) {
@ -640,30 +694,47 @@ export default {
background-color: #263445;
height: calc(100vh - 40px);
overflow-x: hidden;
overflow-y: scroll;
overflow-y: auto;
.el-tab-pane {
color: #bfcbd9;
}
&::-webkit-scrollbar {
width: 14px;
width: 5px;
height: 14px;
}
&::-webkit-scrollbar-track,
&::-webkit-scrollbar-thumb {
border-radius: 999px;
border: 5px solid transparent;
border-radius: 1px;
border: 0 solid transparent;
}
&::-webkit-scrollbar-track-piece {
/*修改滚动条的背景和圆角*/
background: #29405c;
-webkit-border-radius: 7px;
}
&::-webkit-scrollbar-track {
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5) inset;
box-shadow: 1px 1px 5px rgba(55, 175, 255, 0.5) inset;
}
&::-webkit-scrollbar-thumb {
min-height: 20px;
background-clip: content-box;
box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 0 0 5px rgba(55, 175, 255, 0.5) inset;
}
&::-webkit-scrollbar-corner {
background: transparent;
}
/*修改垂直滚动条的样式*/
&::-webkit-scrollbar-thumb:vertical {
background-color: #00113a;
-webkit-border-radius: 7px;
}
/*修改水平滚动条的样式*/
&::-webkit-scrollbar-thumb:horizontal {
background-color: #00113a;
-webkit-border-radius: 7px;
}
}
}
}

32
report-ui/src/views/report/bigscreen/designer/tools.js
Unescape Escape View File

@ -71,7 +71,7 @@ const widgetTools = [
code: 'widget-text',
type: 'html',
label: '文本',
icon: 'text',
icon: 'iconziyuan',
options: {
// 配置
setup: [
@ -196,7 +196,7 @@ const widgetTools = [
code: 'widget-marquee',
type: 'html',
label: '滚动文本',
icon: 'marquee',
icon: 'iconhengxiangwenzi',
options: {
// 配置
setup: [
@ -334,7 +334,7 @@ const widgetTools = [
code: 'widget-href',
type: 'html',
label: '超链接',
icon: 'href',
icon: 'iconchaolianjie',
options: {
// 配置
setup: [
@ -483,7 +483,7 @@ const widgetTools = [
code: 'widget-time',
type: 'html',
label: '当前时间',
icon: 'time',
icon: 'iconshijian',
options: {
// 配置
setup: [
@ -614,7 +614,7 @@ const widgetTools = [
code: 'widget-image',
type: 'html',
label: '图片',
icon: 'image',
icon: 'icontupian',
options: {
// 配置
setup: [
@ -788,7 +788,7 @@ const widgetTools = [
code: 'widget-video',
type: 'html',
label: '视频',
icon: 'video',
icon: 'iconshipin',
options: {
// 配置
setup: [
@ -858,7 +858,7 @@ const widgetTools = [
code: 'widget-iframe',
type: 'html',
label: '内联框架',
icon: 'iframe',
icon: 'iconkuangjia',
options: {
// 配置
setup: [
@ -929,7 +929,7 @@ const widgetTools = [
code: 'widget-barchart',
type: 'chart',
label: '柱形图',
icon: 'barChart',
icon: 'iconzhuzhuangtu',
options: {
// 配置
setup: [
@ -1491,7 +1491,7 @@ const widgetTools = [
code: 'widget-linechart',
type: 'chart',
label: '折线图',
icon: 'lineChart',
icon: 'icontubiaozhexiantu',
options: {
// 配置
setup: [
@ -2074,7 +2074,7 @@ const widgetTools = [
code: 'widget-barlinechart',
type: 'chart',
label: '柱线图',
icon: 'barLineChart',
icon: 'iconzhuxiantu',
options: {
// 配置
setup: [
@ -2637,7 +2637,7 @@ const widgetTools = [
code: 'widget-piechart',
type: 'chart',
label: '饼图',
icon: 'pieChart',
icon: 'iconicon_tubiao_bingtu',
options: {
// 配置
setup: [
@ -3011,7 +3011,7 @@ const widgetTools = [
code: 'widget-hollow-piechart',
type: 'chart',
label: '空心饼图',
icon: 'hollowPieChart',
icon: 'icon020kongxinbingtu',
options: {
// 配置
setup: [
@ -3385,7 +3385,7 @@ const widgetTools = [
code: 'widget-funnel',
type: 'chart',
label: '漏斗图',
icon: 'funnel',
icon: 'iconloudoutu',
options: {
// 配置
setup: [
@ -3751,7 +3751,7 @@ const widgetTools = [
code: 'widget-gauge',
type: 'chart',
label: '仪表盘',
icon: 'speed',
icon: 'iconyibiaopan',
options: {
// 配置
setup: [
@ -3900,13 +3900,13 @@ const widgetTools = [
// },
]
const getToolByCode = function(code) {
const getToolByCode = function (code) {
// 获取大屏底层设置属性
if (code == 'screen') {
return screenConfig
}
// 获取组件
var item = widgetTools.find(function(item, index, arrs) {
var item = widgetTools.find(function (item, index, arrs) {
return item.code === code
})
return item

6
report-ui/src/views/report/excelreport/designer/index-copy.vue
Unescape Escape View File

@ -55,8 +55,7 @@
placement="bottom-start">
<el-button type="text"
@click="preview()">
<svg-icon icon-class="yulancopy"
class="yulancopy" />
<i class="iconfont iconfuzhi"></i>
</el-button>
</el-tooltip>
<el-tooltip class="item"
@ -65,8 +64,7 @@
placement="bottom-start">
<el-button type="text"
@click="save()">
<svg-icon icon-class="baocun"
class="baocun" />
<i class="iconfont iconsave"></i>
</el-button>
</el-tooltip>
</div>

6
report-ui/src/views/report/excelreport/designer/index.vue
Unescape Escape View File

@ -55,8 +55,7 @@
placement="bottom-start">
<el-button type="text"
@click="preview()">
<svg-icon icon-class="yulancopy"
class="yulancopy" />
<i class="iconfont iconfuzhi"></i>
</el-button>
</el-tooltip>
<el-tooltip class="item"
@ -65,8 +64,7 @@
placement="bottom-start">
<el-button type="text"
@click="save()">
<svg-icon icon-class="baocun"
class="baocun" />
<i class="iconfont iconsave"></i>
</el-button>
</el-tooltip>
</div>

4
report-ui/src/views/report/excelreport/viewer/index.vue
Unescape Escape View File

@ -13,14 +13,14 @@
download="xxx.xlsx">
<el-button type="text"
@click="download('')">
<svg-icon icon-class="excel" />导出excel
<i class="iconfont iconexcel"></i>导出excel
</el-button>
</a>
<a v-if="reportCode != null"
download="xxx.pdf">
<el-button type="text"
@click="download('gaea_template_pdf')">
<svg-icon icon-class="pdf" />导出pdf
<i class="iconfont iconpdf"></i>导出pdf
</el-button>
</a>
</div>

Write Preview
Loading…
Cancel
Save