Página Principal Explorar Ajuda
Registe-se Iniciar Sessão
zrd
/
report
1
0
Fork 0
Ficheiros Problemas 0 Pull Requests 0 Wiki
Ver Fonte

图标替换

yanzili há 4 anos atrás
pai
e2657e7bea
commit
e068f409b6
23 ficheiros alterados com 1189 adições e 271 exclusões
Visão Dividida Mostrar Estatísticas Diff
  1. 538 14
      report-ui/src/assets/iconfont/demo_index.html
  2. 0 3
      report-ui/src/assets/iconfont/iconfont.css
  3. BIN
      report-ui/src/assets/iconfont/iconfont.eot
  4. 0 0
      report-ui/src/assets/iconfont/iconfont.js
  5. 154 0
      report-ui/src/assets/iconfont/iconfont.json
  6. 0 52
      report-ui/src/assets/iconfont/iconfont.svg
  7. BIN
      report-ui/src/assets/iconfont/iconfont.ttf
  8. BIN
      report-ui/src/assets/iconfont/iconfont.woff
  9. BIN
      report-ui/src/assets/iconfont/iconfont.woff2
  10. BIN
      report-ui/src/assets/images/bianzu.png
  11. BIN
      report-ui/src/assets/images/qrcode.png
  12. BIN
      report-ui/src/assets/images/tiaoxingma.png
  13. 92 1
      report-ui/src/assets/styles/index.scss
  14. 12 7
      report-ui/src/views/report/bigscreen/designer/form/colorPicker.vue
  15. 11 6
      report-ui/src/views/report/bigscreen/designer/form/contentMenu.vue
  16. 39 40
      report-ui/src/views/report/bigscreen/designer/form/customColorComponents.vue
  17. 34 18
      report-ui/src/views/report/bigscreen/designer/form/dynamicComponents.vue
  18. 161 49
      report-ui/src/views/report/bigscreen/designer/form/dynamicForm.vue
  19. 126 55
      report-ui/src/views/report/bigscreen/designer/index.vue
  20. 16 16
      report-ui/src/views/report/bigscreen/designer/tools.js
  21. 2 4
      report-ui/src/views/report/excelreport/designer/index-copy.vue
  22. 2 4
      report-ui/src/views/report/excelreport/designer/index.vue
  23. 2 2
      report-ui/src/views/report/excelreport/viewer/index.vue

+ 538 - 14
report-ui/src/assets/iconfont/demo_index.html
Ver Ficheiro 

@@ -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>

Diff do ficheiro suprimidas por serem muito extensas
+ 0 - 3
report-ui/src/assets/iconfont/iconfont.css


BIN
report-ui/src/assets/iconfont/iconfont.eot
Ver Ficheiro


Diff do ficheiro suprimidas por serem muito extensas
+ 0 - 0
report-ui/src/assets/iconfont/iconfont.js


+ 154 - 0
report-ui/src/assets/iconfont/iconfont.json
Ver Ficheiro 

@@ -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": "返回",

Diff do ficheiro suprimidas por serem muito extensas
+ 0 - 52
report-ui/src/assets/iconfont/iconfont.svg


BIN
report-ui/src/assets/iconfont/iconfont.ttf
Ver Ficheiro


BIN
report-ui/src/assets/iconfont/iconfont.woff
Ver Ficheiro


BIN
report-ui/src/assets/iconfont/iconfont.woff2
Ver Ficheiro


BIN
report-ui/src/assets/images/bianzu.png
Ver Ficheiro


BIN
report-ui/src/assets/images/qrcode.png
Ver Ficheiro


BIN
report-ui/src/assets/images/tiaoxingma.png
Ver Ficheiro


+ 92 - 1
report-ui/src/assets/styles/index.scss
Ver Ficheiro 

@@ -189,4 +189,95 @@ 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;
 
+  }
 
+}

+ 12 - 7
report-ui/src/views/report/bigscreen/designer/form/colorPicker.vue
Ver Ficheiro 

@@ -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)

+ 11 - 6
report-ui/src/views/report/bigscreen/designer/form/contentMenu.vue
Ver Ficheiro 

@@ -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: '取消',

+ 39 - 40
report-ui/src/views/report/bigscreen/designer/form/customColorComponents.vue
Ver Ficheiro 

@@ -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);
 
     }
 
   }

+ 34 - 18
report-ui/src/views/report/bigscreen/designer/form/dynamicComponents.vue
Ver Ficheiro 

@@ -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 = {}

+ 161 - 49
report-ui/src/views/report/bigscreen/designer/form/dynamicForm.vue
Ver Ficheiro 

@@ -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;

+ 126 - 55
report-ui/src/views/report/bigscreen/designer/index.vue
Ver Ficheiro 

@@ -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;
 
+      }
 
     }
 
   }
 
 }

+ 16 - 16
report-ui/src/views/report/bigscreen/designer/tools.js
Ver Ficheiro 

@@ -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

+ 2 - 4
report-ui/src/views/report/excelreport/designer/index-copy.vue
Ver Ficheiro 

@@ -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>

+ 2 - 4
report-ui/src/views/report/excelreport/designer/index.vue
Ver Ficheiro 

@@ -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>

+ 2 - 2
report-ui/src/views/report/excelreport/viewer/index.vue
Ver Ficheiro 

@@ -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>

Alguns ficheiros não foram mostrados porque muitos ficheiros mudaram neste diff