@中文描述: 统计分析引入图标库、图表右侧添加工具栏(切换显示数值、百分比、深度分析等) @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1

08335 / hivui-platform-template

hivui平台项目模板

Browse code @中文描述: 统计分析引入图标库、图表右侧添加工具栏(切换显示数值、百分比、深度分析等) @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1 master
1 parent 67e8b6b commit 5c4e4ec927a012afeaf4884c52abbbdbf9ddbe7c hhb authored on 3 Feb 2023

Showing 10 changed files

Ignore Space Show notes View project/hivuiSam/assets/icon/demo_index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>iconfont Demo</title> <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/> <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.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"> <script src="iconfont.js"></script> <!-- jQuery --> <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"> <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg"> <span class="sub-title">彩色字体</span> </a></h1> <div class="nav-tabs"> <ul id="tabs" class="dib-box"> <li class="dib active"><span>Unicode</span></li> <li class="dib"><span>Font class</span></li> <li class="dib"><span>Symbol</span></li> </ul> <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3042769" target="_blank" class="nav-more">查看项目</a> </div> <div class="tab-container"> <div class="content unicode" style="display: block;"> <ul class="icon_lists dib-box"> <li class="dib"> <span class="icon iconfont"></span> <div class="name">天猫-123时效</div> <div class="code-name">&#xe603;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">百分比</div> <div class="code-name">&#xebcd;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">copy</div> <div class="code-name">&#xe66a;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">XLSX</div> <div class="code-name">&#xe650;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">XLSX图标</div> <div class="code-name">&#xe6c5;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">info</div> <div class="code-name">&#xe60a;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">error</div> <div class="code-name">&#xe620;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">warn</div> <div class="code-name">&#xe601;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">cc-arrow-right-circle</div> <div class="code-name">&#xe6f8;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">cc-arrow-right-circle</div> <div class="code-name">&#xe6fa;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">cc-arrow-right-circle</div> <div class="code-name">&#xe6fb;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">delete</div> <div class="code-name">&#xe698;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">add</div> <div class="code-name">&#xe6ee;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">check-box</div> <div class="code-name">&#xe626;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">check-box-empty</div> <div class="code-name">&#xe625;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">arrows down</div> <div class="code-name">&#xe623;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">arrows down</div> <div class="code-name">&#xe6fc;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">edit</div> <div class="code-name">&#xe62f;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">sort16</div> <div class="code-name">&#xe630;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">sort</div> <div class="code-name">&#xe93c;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">-sort-2</div> <div class="code-name">&#xe73d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">退出</div> <div class="code-name">&#xe627;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">tree</div> <div class="code-name">&#xe6e8;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">刷新</div> <div class="code-name">&#xe619;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">关闭</div> <div class="code-name">&#xe629;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">关闭所有</div> <div class="code-name">&#xe60f;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">关闭其它</div> <div class="code-name">&#xe631;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">权限</div> <div class="code-name">&#xe63f;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">全屏</div> <div class="code-name">&#xeb11;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">部门</div> <div class="code-name">&#xe62b;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">岗位</div> <div class="code-name">&#xe65c;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">根节点</div> <div class="code-name">&#xe810;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">组织机构</div> <div class="code-name">&#xe63c;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">功能</div> <div class="code-name">&#xe604;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">工作流程图</div> <div class="code-name">&#xe602;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">search</div> <div class="code-name">&#xe621;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">clock</div> <div class="code-name">&#xe600;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">arrow</div> <div class="code-name">&#xe636;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">table</div> <div class="code-name">&#xe699;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">cc-arrow-right-circle</div> <div class="code-name">&#xe60d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">help</div> <div class="code-name">&#xe65d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">yxx_mark</div> <div class="code-name">&#xe63d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">钱</div> <div class="code-name">&#xe640;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">报表2</div> <div class="code-name">&#xe6d2;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">待办</div> <div class="code-name">&#xe64a;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">切换</div> <div class="code-name">&#xe60e;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">消息</div> <div class="code-name">&#xe6eb;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">time</div> <div class="code-name">&#xe64d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">画板主题</div> <div class="code-name">&#xe664;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">邮箱</div> <div class="code-name">&#xe6af;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">email</div> <div class="code-name">&#xe628;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">会议管理</div> <div class="code-name">&#xe612;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">今日收入</div> <div class="code-name">&#xe645;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">user</div> <div class="code-name">&#xe606;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">add</div> <div class="code-name">&#xe654;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">sun</div> <div class="code-name">&#xe6f5;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">arrow</div> <div class="code-name">&#xe6f6;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">图表</div> <div class="code-name">&#xe632;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">设置</div> <div class="code-name">&#xe61d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">set</div> <div class="code-name">&#xe61e;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">close</div> <div class="code-name">&#xe607;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">arrow</div> <div class="code-name">&#xe6f7;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">用户</div> <div class="code-name">&#xe609;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">用户</div> <div class="code-name">&#xe69f;</div> </li> </ul> <div class="article markdown"> <h2 id="unicode-">Unicode 引用</h2> <hr> <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p> <ul> <li>支持按字体的方式去动态调整图标大小，颜色等等。</li> <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li> </ul> <blockquote> <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.woff2?t=1675411665027') format('woff2'), url('iconfont.woff?t=1675411665027') format('woff'), url('iconfont.ttf?t=1675411665027') format('truetype'); } </code></pre> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <pre><code class="language-css" >.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </code></pre> <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3> <pre> <code class="language-html" ><span class="iconfont">&#x33;</span> </code></pre> <blockquote> <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> </blockquote> </div> </div> <div class="content font-class"> <ul class="icon_lists dib-box"> <li class="dib"> <span class="icon iconfont icon-num"></span> <div class="name"> 天猫-123时效 </div> <div class="code-name">.icon-num </div> </li> <li class="dib"> <span class="icon iconfont icon-percentage"></span> <div class="name"> 百分比 </div> <div class="code-name">.icon-percentage </div> </li> <li class="dib"> <span class="icon iconfont icon-copy"></span> <div class="name"> copy </div> <div class="code-name">.icon-copy </div> </li> <li class="dib"> <span class="icon iconfont icon-XLSX"></span> <div class="name"> XLSX </div> <div class="code-name">.icon-XLSX </div> </li> <li class="dib"> <span class="icon iconfont icon-xlsx"></span> <div class="name"> XLSX图标 </div> <div class="code-name">.icon-xlsx </div> </li> <li class="dib"> <span class="icon iconfont icon-info"></span> <div class="name"> info </div> <div class="code-name">.icon-info </div> </li> <li class="dib"> <span class="icon iconfont icon-error"></span> <div class="name"> error </div> <div class="code-name">.icon-error </div> </li> <li class="dib"> <span class="icon iconfont icon-warn"></span> <div class="name"> warn </div> <div class="code-name">.icon-warn </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-down-circle"></span> <div class="name"> cc-arrow-right-circle </div> <div class="code-name">.icon-arrow-down-circle </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-up-circle"></span> <div class="name"> cc-arrow-right-circle </div> <div class="code-name">.icon-arrow-up-circle </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-left-circle"></span> <div class="name"> cc-arrow-right-circle </div> <div class="code-name">.icon-arrow-left-circle </div> </li> <li class="dib"> <span class="icon iconfont icon-delete"></span> <div class="name"> delete </div> <div class="code-name">.icon-delete </div> </li> <li class="dib"> <span class="icon iconfont icon-add"></span> <div class="name"> add </div> <div class="code-name">.icon-add </div> </li> <li class="dib"> <span class="icon iconfont icon-checkbox"></span> <div class="name"> check-box </div> <div class="code-name">.icon-checkbox </div> </li> <li class="dib"> <span class="icon iconfont icon-checkbox-empty"></span> <div class="name"> check-box-empty </div> <div class="code-name">.icon-checkbox-empty </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-leftMore-circle"></span> <div class="name"> arrows down </div> <div class="code-name">.icon-arrow-leftMore-circle </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-rightMore-circle"></span> <div class="name"> arrows down </div> <div class="code-name">.icon-arrow-rightMore-circle </div> </li> <li class="dib"> <span class="icon iconfont icon-edit"></span> <div class="name"> edit </div> <div class="code-name">.icon-edit </div> </li> <li class="dib"> <span class="icon iconfont icon-moveSort2"></span> <div class="name"> sort16 </div> <div class="code-name">.icon-moveSort2 </div> </li> <li class="dib"> <span class="icon iconfont icon-moveSort1"></span> <div class="name"> sort </div> <div class="code-name">.icon-moveSort1 </div> </li> <li class="dib"> <span class="icon iconfont icon-moveSort"></span> <div class="name"> -sort-2 </div> <div class="code-name">.icon-moveSort </div> </li> <li class="dib"> <span class="icon iconfont icon-tuichu"></span> <div class="name"> 退出 </div> <div class="code-name">.icon-tuichu </div> </li> <li class="dib"> <span class="icon iconfont icon-tree"></span> <div class="name"> tree </div> <div class="code-name">.icon-tree </div> </li> <li class="dib"> <span class="icon iconfont icon-refresh"></span> <div class="name"> 刷新 </div> <div class="code-name">.icon-refresh </div> </li> <li class="dib"> <span class="icon iconfont icon-close-circle"></span> <div class="name"> 关闭 </div> <div class="code-name">.icon-close-circle </div> </li> <li class="dib"> <span class="icon iconfont icon-closeAll"></span> <div class="name"> 关闭所有 </div> <div class="code-name">.icon-closeAll </div> </li> <li class="dib"> <span class="icon iconfont icon-closeOther"></span> <div class="name"> 关闭其它 </div> <div class="code-name">.icon-closeOther </div> </li> <li class="dib"> <span class="icon iconfont icon-quanxian"></span> <div class="name"> 权限 </div> <div class="code-name">.icon-quanxian </div> </li> <li class="dib"> <span class="icon iconfont icon-quanping"></span> <div class="name"> 全屏 </div> <div class="code-name">.icon-quanping </div> </li> <li class="dib"> <span class="icon iconfont icon-dpt"></span> <div class="name"> 部门 </div> <div class="code-name">.icon-dpt </div> </li> <li class="dib"> <span class="icon iconfont icon-ptm"></span> <div class="name"> 岗位 </div> <div class="code-name">.icon-ptm </div> </li> <li class="dib"> <span class="icon iconfont icon-root"></span> <div class="name"> 根节点 </div> <div class="code-name">.icon-root </div> </li> <li class="dib"> <span class="icon iconfont icon-org"></span> <div class="name"> 组织机构 </div> <div class="code-name">.icon-org </div> </li> <li class="dib"> <span class="icon iconfont icon-func"></span> <div class="name"> 功能 </div> <div class="code-name">.icon-func </div> </li> <li class="dib"> <span class="icon iconfont icon-flow"></span> <div class="name"> 工作流程图 </div> <div class="code-name">.icon-flow </div> </li> <li class="dib"> <span class="icon iconfont icon-search"></span> <div class="name"> search </div> <div class="code-name">.icon-search </div> </li> <li class="dib"> <span class="icon iconfont icon-clock"></span> <div class="name"> clock </div> <div class="code-name">.icon-clock </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-right"></span> <div class="name"> arrow </div> <div class="code-name">.icon-arrow-right </div> </li> <li class="dib"> <span class="icon iconfont icon-table"></span> <div class="name"> table </div> <div class="code-name">.icon-table </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-right-circle"></span> <div class="name"> cc-arrow-right-circle </div> <div class="code-name">.icon-arrow-right-circle </div> </li> <li class="dib"> <span class="icon iconfont icon-help"></span> <div class="name"> help </div> <div class="code-name">.icon-help </div> </li> <li class="dib"> <span class="icon iconfont icon-mark"></span> <div class="name"> yxx_mark </div> <div class="code-name">.icon-mark </div> </li> <li class="dib"> <span class="icon iconfont icon-money"></span> <div class="name"> 钱 </div> <div class="code-name">.icon-money </div> </li> <li class="dib"> <span class="icon iconfont icon-analyse"></span> <div class="name"> 报表2 </div> <div class="code-name">.icon-analyse </div> </li> <li class="dib"> <span class="icon iconfont icon-dealt"></span> <div class="name"> 待办 </div> <div class="code-name">.icon-dealt </div> </li> <li class="dib"> <span class="icon iconfont icon-change"></span> <div class="name"> 切换 </div> <div class="code-name">.icon-change </div> </li> <li class="dib"> <span class="icon iconfont icon-bell"></span> <div class="name"> 消息 </div> <div class="code-name">.icon-bell </div> </li> <li class="dib"> <span class="icon iconfont icon-time"></span> <div class="name"> time </div> <div class="code-name">.icon-time </div> </li> <li class="dib"> <span class="icon iconfont icon-skin"></span> <div class="name"> 画板主题 </div> <div class="code-name">.icon-skin </div> </li> <li class="dib"> <span class="icon iconfont icon-mail"></span> <div class="name"> 邮箱 </div> <div class="code-name">.icon-mail </div> </li> <li class="dib"> <span class="icon iconfont icon-email"></span> <div class="name"> email </div> <div class="code-name">.icon-email </div> </li> <li class="dib"> <span class="icon iconfont icon-meeting"></span> <div class="name"> 会议管理 </div> <div class="code-name">.icon-meeting </div> </li> <li class="dib"> <span class="icon iconfont icon-today"></span> <div class="name"> 今日收入 </div> <div class="code-name">.icon-today </div> </li> <li class="dib"> <span class="icon iconfont icon-user2"></span> <div class="name"> user </div> <div class="code-name">.icon-user2 </div> </li> <li class="dib"> <span class="icon iconfont icon-listadd"></span> <div class="name"> add </div> <div class="code-name">.icon-listadd </div> </li> <li class="dib"> <span class="icon iconfont icon-sun"></span> <div class="name"> sun </div> <div class="code-name">.icon-sun </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-down"></span> <div class="name"> arrow </div> <div class="code-name">.icon-arrow-down </div> </li> <li class="dib"> <span class="icon iconfont icon-chart"></span> <div class="name"> 图表 </div> <div class="code-name">.icon-chart </div> </li> <li class="dib"> <span class="icon iconfont icon-set"></span> <div class="name"> 设置 </div> <div class="code-name">.icon-set </div> </li> <li class="dib"> <span class="icon iconfont icon-set-fill"></span> <div class="name"> set </div> <div class="code-name">.icon-set-fill </div> </li> <li class="dib"> <span class="icon iconfont icon-close"></span> <div class="name"> close </div> <div class="code-name">.icon-close </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-left"></span> <div class="name"> arrow </div> <div class="code-name">.icon-arrow-left </div> </li> <li class="dib"> <span class="icon iconfont icon-user1"></span> <div class="name"> 用户 </div> <div class="code-name">.icon-user1 </div> </li> <li class="dib"> <span class="icon iconfont icon-user"></span> <div class="name"> 用户 </div> <div class="code-name">.icon-user </div> </li> </ul> <div class="article markdown"> <h2 id="font-class-">font-class 引用</h2> <hr> <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p> <p>与 Unicode 使用方式相比，具有如下特点：</p> <ul> <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li> <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li> </ul> <p>使用步骤如下：</p> <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3> <pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css"> </code></pre> <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3> <pre><code class="language-html"><span class="iconfont icon-xxx"></span> </code></pre> <blockquote> <p>" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> </blockquote> </div> </div> <div class="content symbol"> <ul class="icon_lists dib-box"> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-num"></use> </svg> <div class="name">天猫-123时效</div> <div class="code-name">#icon-num</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-percentage"></use> </svg> <div class="name">百分比</div> <div class="code-name">#icon-percentage</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-copy"></use> </svg> <div class="name">copy</div> <div class="code-name">#icon-copy</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-XLSX"></use> </svg> <div class="name">XLSX</div> <div class="code-name">#icon-XLSX</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-xlsx"></use> </svg> <div class="name">XLSX图标</div> <div class="code-name">#icon-xlsx</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-info"></use> </svg> <div class="name">info</div> <div class="code-name">#icon-info</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-error"></use> </svg> <div class="name">error</div> <div class="code-name">#icon-error</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-warn"></use> </svg> <div class="name">warn</div> <div class="code-name">#icon-warn</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-arrow-down-circle"></use> </svg> <div class="name">cc-arrow-right-circle</div> <div class="code-name">#icon-arrow-down-circle</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-arrow-up-circle"></use> </svg> <div class="name">cc-arrow-right-circle</div> <div class="code-name">#icon-arrow-up-circle</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-arrow-left-circle"></use> </svg> <div class="name">cc-arrow-right-circle</div> <div class="code-name">#icon-arrow-left-circle</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-delete"></use> </svg> <div class="name">delete</div> <div class="code-name">#icon-delete</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-add"></use> </svg> <div class="name">add</div> <div class="code-name">#icon-add</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-checkbox"></use> </svg> <div class="name">check-box</div> <div class="code-name">#icon-checkbox</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-checkbox-empty"></use> </svg> <div class="name">check-box-empty</div> <div class="code-name">#icon-checkbox-empty</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-arrow-leftMore-circle"></use> </svg> <div class="name">arrows down</div> <div class="code-name">#icon-arrow-leftMore-circle</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-arrow-rightMore-circle"></use> </svg> <div class="name">arrows down</div> <div class="code-name">#icon-arrow-rightMore-circle</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-edit"></use> </svg> <div class="name">edit</div> <div class="code-name">#icon-edit</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-moveSort2"></use> </svg> <div class="name">sort16</div> <div class="code-name">#icon-moveSort2</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-moveSort1"></use> </svg> <div class="name">sort</div> <div class="code-name">#icon-moveSort1</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-moveSort"></use> </svg> <div class="name">-sort-2</div> <div class="code-name">#icon-moveSort</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-tuichu"></use> </svg> <div class="name">退出</div> <div class="code-name">#icon-tuichu</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-tree"></use> </svg> <div class="name">tree</div> <div class="code-name">#icon-tree</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-refresh"></use> </svg> <div class="name">刷新</div> <div class="code-name">#icon-refresh</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-close-circle"></use> </svg> <div class="name">关闭</div> <div class="code-name">#icon-close-circle</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-closeAll"></use> </svg> <div class="name">关闭所有</div> <div class="code-name">#icon-closeAll</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-closeOther"></use> </svg> <div class="name">关闭其它</div> <div class="code-name">#icon-closeOther</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-quanxian"></use> </svg> <div class="name">权限</div> <div class="code-name">#icon-quanxian</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-quanping"></use> </svg> <div class="name">全屏</div> <div class="code-name">#icon-quanping</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-dpt"></use> </svg> <div class="name">部门</div> <div class="code-name">#icon-dpt</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-ptm"></use> </svg> <div class="name">岗位</div> <div class="code-name">#icon-ptm</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-root"></use> </svg> <div class="name">根节点</div> <div class="code-name">#icon-root</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-org"></use> </svg> <div class="name">组织机构</div> <div class="code-name">#icon-org</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-func"></use> </svg> <div class="name">功能</div> <div class="code-name">#icon-func</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-flow"></use> </svg> <div class="name">工作流程图</div> <div class="code-name">#icon-flow</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-search"></use> </svg> <div class="name">search</div> <div class="code-name">#icon-search</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-clock"></use> </svg> <div class="name">clock</div> <div class="code-name">#icon-clock</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-arrow-right"></use> </svg> <div class="name">arrow</div> <div class="code-name">#icon-arrow-right</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-table"></use> </svg> <div class="name">table</div> <div class="code-name">#icon-table</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-arrow-right-circle"></use> </svg> <div class="name">cc-arrow-right-circle</div> <div class="code-name">#icon-arrow-right-circle</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-help"></use> </svg> <div class="name">help</div> <div class="code-name">#icon-help</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-mark"></use> </svg> <div class="name">yxx_mark</div> <div class="code-name">#icon-mark</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-money"></use> </svg> <div class="name">钱</div> <div class="code-name">#icon-money</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-analyse"></use> </svg> <div class="name">报表2</div> <div class="code-name">#icon-analyse</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-dealt"></use> </svg> <div class="name">待办</div> <div class="code-name">#icon-dealt</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-change"></use> </svg> <div class="name">切换</div> <div class="code-name">#icon-change</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-bell"></use> </svg> <div class="name">消息</div> <div class="code-name">#icon-bell</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-time"></use> </svg> <div class="name">time</div> <div class="code-name">#icon-time</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-skin"></use> </svg> <div class="name">画板主题</div> <div class="code-name">#icon-skin</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-mail"></use> </svg> <div class="name">邮箱</div> <div class="code-name">#icon-mail</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-email"></use> </svg> <div class="name">email</div> <div class="code-name">#icon-email</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-meeting"></use> </svg> <div class="name">会议管理</div> <div class="code-name">#icon-meeting</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-today"></use> </svg> <div class="name">今日收入</div> <div class="code-name">#icon-today</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-user2"></use> </svg> <div class="name">user</div> <div class="code-name">#icon-user2</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-listadd"></use> </svg> <div class="name">add</div> <div class="code-name">#icon-listadd</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-sun"></use> </svg> <div class="name">sun</div> <div class="code-name">#icon-sun</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-arrow-down"></use> </svg> <div class="name">arrow</div> <div class="code-name">#icon-arrow-down</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-chart"></use> </svg> <div class="name">图表</div> <div class="code-name">#icon-chart</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-set"></use> </svg> <div class="name">设置</div> <div class="code-name">#icon-set</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-set-fill"></use> </svg> <div class="name">set</div> <div class="code-name">#icon-set-fill</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-close"></use> </svg> <div class="name">close</div> <div class="code-name">#icon-close</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-arrow-left"></use> </svg> <div class="name">arrow</div> <div class="code-name">#icon-arrow-left</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-user1"></use> </svg> <div class="name">用户</div> <div class="code-name">#icon-user1</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-user"></use> </svg> <div class="name">用户</div> <div class="code-name">#icon-user</div> </li> </ul> <div class="article markdown"> <h2 id="symbol-">Symbol 引用</h2> <hr> <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p> <ul> <li>支持多色图标了，不再受单色限制。</li> <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li> <li>兼容性较差，支持 IE9+，及现代浏览器。</li> <li>浏览器渲染 SVG 的性能一般，还不如 png。</li> </ul> <p>使用步骤如下：</p> <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3> <pre><code class="language-html"><script src="./iconfont.js"></script> </code></pre> <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3> <pre><code class="language-html"><style> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> </code></pre> <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3> <pre><code class="language-html"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg> </code></pre> </div> </div> </div> </div> <script> $(document).ready(function () { $('.tab-container .content:first').show() $('#tabs li').click(function (e) { var tabContent = $('.tab-container .content') var index = $(this).index() if ($(this).hasClass('active')) { return } else { $('#tabs li').removeClass('active') $(this).addClass('active') tabContent.hide().eq(index).fadeIn() } }) }) </script> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <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"> <script src="iconfont.js"></script> <!-- jQuery --> <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"> <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> <li class="dib"><span>Font class</span></li> <li class="dib"><span>Symbol</span></li> </ul> <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1417123" target="_blank" class="nav-more">查看项目</a> </div> <div class="tab-container"> <div class="content unicode" style="display: block;"> <ul class="icon_lists dib-box"> <li class="dib"> <span class="icon iconfont"></span> <div class="name">工作流程图</div> <div class="code-name">&#xe602;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">功能</div> <div class="code-name">&#xe604;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">组织机构</div> <div class="code-name">&#xe63c;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">根节点</div> <div class="code-name">&#xe810;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">部门</div> <div class="code-name">&#xe62b;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">岗位</div> <div class="code-name">&#xe65c;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">全屏</div> <div class="code-name">&#xeb11;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">权限</div> <div class="code-name">&#xe63f;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">关闭其它</div> <div class="code-name">&#xe631;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">关闭</div> <div class="code-name">&#xe629;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">关闭所有</div> <div class="code-name">&#xe60f;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">刷新</div> <div class="code-name">&#xe619;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">tree</div> <div class="code-name">&#xe6e8;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">退出</div> <div class="code-name">&#xe627;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">sort16</div> <div class="code-name">&#xe630;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">sort</div> <div class="code-name">&#xe93c;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">-sort-2</div> <div class="code-name">&#xe73d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">edit</div> <div class="code-name">&#xe62f;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">arrows down</div> <div class="code-name">&#xe623;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">arrows down</div> <div class="code-name">&#xe6fc;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">check-box-empty</div> <div class="code-name">&#xe625;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">check-box</div> <div class="code-name">&#xe626;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">add</div> <div class="code-name">&#xe6ee;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">delete</div> <div class="code-name">&#xe698;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">info</div> <div class="code-name">&#xe60a;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">error</div> <div class="code-name">&#xe620;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">warn</div> <div class="code-name">&#xe601;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">close</div> <div class="code-name">&#xe607;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">set</div> <div class="code-name">&#xe61e;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">设置</div> <div class="code-name">&#xe61d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">图表</div> <div class="code-name">&#xe632;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">cc-arrow-right-circle</div> <div class="code-name">&#xe6f8;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">arrow</div> <div class="code-name">&#xe6f6;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">arrow</div> <div class="code-name">&#xe6f7;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">cc-arrow-right-circle</div> <div class="code-name">&#xe6fa;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">cc-arrow-right-circle</div> <div class="code-name">&#xe6fb;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">search</div> <div class="code-name">&#xe621;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">clock</div> <div class="code-name">&#xe600;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">arrow</div> <div class="code-name">&#xe636;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">table</div> <div class="code-name">&#xe699;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">cc-arrow-right-circle</div> <div class="code-name">&#xe60d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">help</div> <div class="code-name">&#xe65d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">yxx_mark</div> <div class="code-name">&#xe63d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">钱</div> <div class="code-name">&#xe640;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">报表2</div> <div class="code-name">&#xe6d2;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">待办</div> <div class="code-name">&#xe64a;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">切换</div> <div class="code-name">&#xe60e;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">消息</div> <div class="code-name">&#xe6eb;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">time</div> <div class="code-name">&#xe64d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">画板主题</div> <div class="code-name">&#xe664;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">邮箱</div> <div class="code-name">&#xe6af;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">email</div> <div class="code-name">&#xe628;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">会议管理</div> <div class="code-name">&#xe612;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">今日收入</div> <div class="code-name">&#xe645;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">user</div> <div class="code-name">&#xe606;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">add</div> <div class="code-name">&#xe654;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">sun</div> <div class="code-name">&#xe6f5;</div> </li> </ul> <div class="article markdown"> <h2 id="unicode-">Unicode 引用</h2> <hr> <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p> <ul> <li>支持按字体的方式去动态调整图标大小，颜色等等。</li> <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li> </ul> <blockquote> <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.woff2?t=1641282764308') format('woff2'), url('iconfont.woff?t=1641282764308') format('woff'), url('iconfont.ttf?t=1641282764308') format('truetype'); } </code></pre> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <pre><code class="language-css" >.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </code></pre> <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3> <pre> <code class="language-html" ><span class="iconfont">&#x33;</span> </code></pre> <blockquote> <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> </blockquote> </div> </div> <div class="content font-class"> <ul class="icon_lists dib-box"> <li class="dib"> <span class="icon iconfont icon-flow"></span> <div class="name"> 工作流程图 </div> <div class="code-name">.icon-flow </div> </li> <li class="dib"> <span class="icon iconfont icon-func"></span> <div class="name"> 功能 </div> <div class="code-name">.icon-func </div> </li> <li class="dib"> <span class="icon iconfont icon-org"></span> <div class="name"> 组织机构 </div> <div class="code-name">.icon-org </div> </li> <li class="dib"> <span class="icon iconfont icon-root"></span> <div class="name"> 根节点 </div> <div class="code-name">.icon-root </div> </li> <li class="dib"> <span class="icon iconfont icon-dpt"></span> <div class="name"> 部门 </div> <div class="code-name">.icon-dpt </div> </li> <li class="dib"> <span class="icon iconfont icon-ptm"></span> <div class="name"> 岗位 </div> <div class="code-name">.icon-ptm </div> </li> <li class="dib"> <span class="icon iconfont icon-quanping"></span> <div class="name"> 全屏 </div> <div class="code-name">.icon-quanping </div> </li> <li class="dib"> <span class="icon iconfont icon-quanxian"></span> <div class="name"> 权限 </div> <div class="code-name">.icon-quanxian </div> </li> <li class="dib"> <span class="icon iconfont icon-closeOther"></span> <div class="name"> 关闭其它 </div> <div class="code-name">.icon-closeOther </div> </li> <li class="dib"> <span class="icon iconfont icon-close-circle"></span> <div class="name"> 关闭 </div> <div class="code-name">.icon-close-circle </div> </li> <li class="dib"> <span class="icon iconfont icon-closeAll"></span> <div class="name"> 关闭所有 </div> <div class="code-name">.icon-closeAll </div> </li> <li class="dib"> <span class="icon iconfont icon-refresh"></span> <div class="name"> 刷新 </div> <div class="code-name">.icon-refresh </div> </li> <li class="dib"> <span class="icon iconfont icon-tree"></span> <div class="name"> tree </div> <div class="code-name">.icon-tree </div> </li> <li class="dib"> <span class="icon iconfont icon-tuichu"></span> <div class="name"> 退出 </div> <div class="code-name">.icon-tuichu </div> </li> <li class="dib"> <span class="icon iconfont icon-moveSort2"></span> <div class="name"> sort16 </div> <div class="code-name">.icon-moveSort2 </div> </li> <li class="dib"> <span class="icon iconfont icon-moveSort1"></span> <div class="name"> sort </div> <div class="code-name">.icon-moveSort1 </div> </li> <li class="dib"> <span class="icon iconfont icon-moveSort"></span> <div class="name"> -sort-2 </div> <div class="code-name">.icon-moveSort </div> </li> <li class="dib"> <span class="icon iconfont icon-edit"></span> <div class="name"> edit </div> <div class="code-name">.icon-edit </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-leftMore-circle"></span> <div class="name"> arrows down </div> <div class="code-name">.icon-arrow-leftMore-circle </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-rightMore-circle"></span> <div class="name"> arrows down </div> <div class="code-name">.icon-arrow-rightMore-circle </div> </li> <li class="dib"> <span class="icon iconfont icon-checkbox-empty"></span> <div class="name"> check-box-empty </div> <div class="code-name">.icon-checkbox-empty </div> </li> <li class="dib"> <span class="icon iconfont icon-checkbox"></span> <div class="name"> check-box </div> <div class="code-name">.icon-checkbox </div> </li> <li class="dib"> <span class="icon iconfont icon-add"></span> <div class="name"> add </div> <div class="code-name">.icon-add </div> </li> <li class="dib"> <span class="icon iconfont icon-delete"></span> <div class="name"> delete </div> <div class="code-name">.icon-delete </div> </li> <li class="dib"> <span class="icon iconfont icon-info"></span> <div class="name"> info </div> <div class="code-name">.icon-info </div> </li> <li class="dib"> <span class="icon iconfont icon-error"></span> <div class="name"> error </div> <div class="code-name">.icon-error </div> </li> <li class="dib"> <span class="icon iconfont icon-warn"></span> <div class="name"> warn </div> <div class="code-name">.icon-warn </div> </li> <li class="dib"> <span class="icon iconfont icon-close"></span> <div class="name"> close </div> <div class="code-name">.icon-close </div> </li> <li class="dib"> <span class="icon iconfont icon-set-fill"></span> <div class="name"> set </div> <div class="code-name">.icon-set-fill </div> </li> <li class="dib"> <span class="icon iconfont icon-set"></span> <div class="name"> 设置 </div> <div class="code-name">.icon-set </div> </li> <li class="dib"> <span class="icon iconfont icon-chart"></span> <div class="name"> 图表 </div> <div class="code-name">.icon-chart </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-down-circle"></span> <div class="name"> cc-arrow-right-circle </div> <div class="code-name">.icon-arrow-down-circle </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-down"></span> <div class="name"> arrow </div> <div class="code-name">.icon-arrow-down </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-left"></span> <div class="name"> arrow </div> <div class="code-name">.icon-arrow-left </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-up-circle"></span> <div class="name"> cc-arrow-right-circle </div> <div class="code-name">.icon-arrow-up-circle </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-left-circle"></span> <div class="name"> cc-arrow-right-circle </div> <div class="code-name">.icon-arrow-left-circle </div> </li> <li class="dib"> <span class="icon iconfont icon-search"></span> <div class="name"> search </div> <div class="code-name">.icon-search </div> </li> <li class="dib"> <span class="icon iconfont icon-clock"></span> <div class="name"> clock </div> <div class="code-name">.icon-clock </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-right"></span> <div class="name"> arrow </div> <div class="code-name">.icon-arrow-right </div> </li> <li class="dib"> <span class="icon iconfont icon-table"></span> <div class="name"> table </div> <div class="code-name">.icon-table </div> </li> <li class="dib"> <span class="icon iconfont icon-arrow-right-circle"></span> <div class="name"> cc-arrow-right-circle </div> <div class="code-name">.icon-arrow-right-circle </div> </li> <li class="dib"> <span class="icon iconfont icon-help"></span> <div class="name"> help </div> <div class="code-name">.icon-help </div> </li> <li class="dib"> <span class="icon iconfont icon-mark"></span> <div class="name"> yxx_mark </div> <div class="code-name">.icon-mark </div> </li> <li class="dib"> <span class="icon iconfont icon-money"></span> <div class="name"> 钱 </div> <div class="code-name">.icon-money </div> </li> <li class="dib"> <span class="icon iconfont icon-analyse"></span> <div class="name"> 报表2 </div> <div class="code-name">.icon-analyse </div> </li> <li class="dib"> <span class="icon iconfont icon-dealt"></span> <div class="name"> 待办 </div> <div class="code-name">.icon-dealt </div> </li> <li class="dib"> <span class="icon iconfont icon-change"></span> <div class="name"> 切换 </div> <div class="code-name">.icon-change </div> </li> <li class="dib"> <span class="icon iconfont icon-bell"></span> <div class="name"> 消息 </div> <div class="code-name">.icon-bell </div> </li> <li class="dib"> <span class="icon iconfont icon-time"></span> <div class="name"> time </div> <div class="code-name">.icon-time </div> </li> <li class="dib"> <span class="icon iconfont icon-skin"></span> <div class="name"> 画板主题 </div> <div class="code-name">.icon-skin </div> </li> <li class="dib"> <span class="icon iconfont icon-mail"></span> <div class="name"> 邮箱 </div> <div class="code-name">.icon-mail </div> </li> <li class="dib"> <span class="icon iconfont icon-email"></span> <div class="name"> email </div> <div class="code-name">.icon-email </div> </li> <li class="dib"> <span class="icon iconfont icon-meeting"></span> <div class="name"> 会议管理 </div> <div class="code-name">.icon-meeting </div> </li> <li class="dib"> <span class="icon iconfont icon-today"></span> <div class="name"> 今日收入 </div> <div class="code-name">.icon-today </div> </li> <li class="dib"> <span class="icon iconfont icon-user"></span> <div class="name"> user </div> <div class="code-name">.icon-user </div> </li> <li class="dib"> <span class="icon iconfont icon-listadd"></span> <div class="name"> add </div> <div class="code-name">.icon-listadd </div> </li> <li class="dib"> <span class="icon iconfont icon-sun"></span> <div class="name"> sun </div> <div class="code-name">.icon-sun </div> </li> </ul> <div class="article markdown"> <h2 id="font-class-">font-class 引用</h2> <hr> <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p> <p>与 Unicode 使用方式相比，具有如下特点：</p> <ul> <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li> <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li> </ul> <p>使用步骤如下：</p> <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3> <pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css"> </code></pre> <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3> <pre><code class="language-html"><span class="iconfont icon-xxx"></span> </code></pre> <blockquote> <p>" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> </blockquote> </div> </div> <div class="content symbol"> <ul class="icon_lists dib-box"> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-flow"></use> </svg> <div class="name">工作流程图</div> <div class="code-name">#icon-flow</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-func"></use> </svg> <div class="name">功能</div> <div class="code-name">#icon-func</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-org"></use> </svg> <div class="name">组织机构</div> <div class="code-name">#icon-org</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-root"></use> </svg> <div class="name">根节点</div> <div class="code-name">#icon-root</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-dpt"></use> </svg> <div class="name">部门</div> <div class="code-name">#icon-dpt</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-ptm"></use> </svg> <div class="name">岗位</div> <div class="code-name">#icon-ptm</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-quanping"></use> </svg> <div class="name">全屏</div> <div class="code-name">#icon-quanping</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-quanxian"></use> </svg> <div class="name">权限</div> <div class="code-name">#icon-quanxian</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-closeOther"></use> </svg> <div class="name">关闭其它</div> <div class="code-name">#icon-closeOther</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-close-circle"></use> </svg> <div class="name">关闭</div> <div class="code-name">#icon-close-circle</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-closeAll"></use> </svg> <div class="name">关闭所有</div> <div class="code-name">#icon-closeAll</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-refresh"></use> </svg> <div class="name">刷新</div> <div class="code-name">#icon-refresh</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-tree"></use> </svg> <div class="name">tree</div> <div class="code-name">#icon-tree</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-tuichu"></use> </svg> <div class="name">退出</div> <div class="code-name">#icon-tuichu</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-moveSort2"></use> </svg> <div class="name">sort16</div> <div class="code-name">#icon-moveSort2</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-moveSort1"></use> </svg> <div class="name">sort</div> <div class="code-name">#icon-moveSort1</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-moveSort"></use> </svg> <div class="name">-sort-2</div> <div class="code-name">#icon-moveSort</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-edit"></use> </svg> <div class="name">edit</div> <div class="code-name">#icon-edit</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-arrow-leftMore-circle"></use> </svg> <div class="name">arrows down</div> <div class="code-name">#icon-arrow-leftMore-circle</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-arrow-rightMore-circle"></use> </svg> <div class="name">arrows down</div> <div class="code-name">#icon-arrow-rightMore-circle</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-checkbox-empty"></use> </svg> <div class="name">check-box-empty</div> <div class="code-name">#icon-checkbox-empty</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-checkbox"></use> </svg> <div class="name">check-box</div> <div class="code-name">#icon-checkbox</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-add"></use> </svg> <div class="name">add</div> <div class="code-name">#icon-add</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-delete"></use> </svg> <div class="name">delete</div> <div class="code-name">#icon-delete</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-info"></use> </svg> <div class="name">info</div> <div class="code-name">#icon-info</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-error"></use> </svg> <div class="name">error</div> <div class="code-name">#icon-error</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-warn"></use> </svg> <div class="name">warn</div> <div class="code-name">#icon-warn</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-close"></use> </svg> <div class="name">close</div> <div class="code-name">#icon-close</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-set-fill"></use> </svg> <div class="name">set</div> <div class="code-name">#icon-set-fill</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-set"></use> </svg> <div class="name">设置</div> <div class="code-name">#icon-set</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-chart"></use> </svg> <div class="name">图表</div> <div class="code-name">#icon-chart</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-arrow-down-circle"></use> </svg> <div class="name">cc-arrow-right-circle</div> <div class="code-name">#icon-arrow-down-circle</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-arrow-down"></use> </svg> <div class="name">arrow</div> <div class="code-name">#icon-arrow-down</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-arrow-left"></use> </svg> <div class="name">arrow</div> <div class="code-name">#icon-arrow-left</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-arrow-up-circle"></use> </svg> <div class="name">cc-arrow-right-circle</div> <div class="code-name">#icon-arrow-up-circle</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-arrow-left-circle"></use> </svg> <div class="name">cc-arrow-right-circle</div> <div class="code-name">#icon-arrow-left-circle</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-search"></use> </svg> <div class="name">search</div> <div class="code-name">#icon-search</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-clock"></use> </svg> <div class="name">clock</div> <div class="code-name">#icon-clock</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-arrow-right"></use> </svg> <div class="name">arrow</div> <div class="code-name">#icon-arrow-right</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-table"></use> </svg> <div class="name">table</div> <div class="code-name">#icon-table</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-arrow-right-circle"></use> </svg> <div class="name">cc-arrow-right-circle</div> <div class="code-name">#icon-arrow-right-circle</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-help"></use> </svg> <div class="name">help</div> <div class="code-name">#icon-help</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-mark"></use> </svg> <div class="name">yxx_mark</div> <div class="code-name">#icon-mark</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-money"></use> </svg> <div class="name">钱</div> <div class="code-name">#icon-money</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-analyse"></use> </svg> <div class="name">报表2</div> <div class="code-name">#icon-analyse</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-dealt"></use> </svg> <div class="name">待办</div> <div class="code-name">#icon-dealt</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-change"></use> </svg> <div class="name">切换</div> <div class="code-name">#icon-change</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-bell"></use> </svg> <div class="name">消息</div> <div class="code-name">#icon-bell</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-time"></use> </svg> <div class="name">time</div> <div class="code-name">#icon-time</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-skin"></use> </svg> <div class="name">画板主题</div> <div class="code-name">#icon-skin</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-mail"></use> </svg> <div class="name">邮箱</div> <div class="code-name">#icon-mail</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-email"></use> </svg> <div class="name">email</div> <div class="code-name">#icon-email</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-meeting"></use> </svg> <div class="name">会议管理</div> <div class="code-name">#icon-meeting</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-today"></use> </svg> <div class="name">今日收入</div> <div class="code-name">#icon-today</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-user"></use> </svg> <div class="name">user</div> <div class="code-name">#icon-user</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-listadd"></use> </svg> <div class="name">add</div> <div class="code-name">#icon-listadd</div> </li> <li class="dib"> <svg class="icon svg-icon" aria-hidden="true"> <use xlink:href="#icon-sun"></use> </svg> <div class="name">sun</div> <div class="code-name">#icon-sun</div> </li> </ul> <div class="article markdown"> <h2 id="symbol-">Symbol 引用</h2> <hr> <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p> <ul> <li>支持多色图标了，不再受单色限制。</li> <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li> <li>兼容性较差，支持 IE9+，及现代浏览器。</li> <li>浏览器渲染 SVG 的性能一般，还不如 png。</li> </ul> <p>使用步骤如下：</p> <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3> <pre><code class="language-html"><script src="./iconfont.js"></script> </code></pre> <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3> <pre><code class="language-html"><style> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> </code></pre> <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3> <pre><code class="language-html"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg> </code></pre> </div> </div> </div> </div> <script> $(document).ready(function () { $('.tab-container .content:first').show() $('#tabs li').click(function (e) { var tabContent = $('.tab-container .content') var index = $(this).index() if ($(this).hasClass('active')) { return } else { $('#tabs li').removeClass('active') $(this).addClass('active') tabContent.hide().eq(index).fadeIn() } }) }) </script> </body> </html>

Ignore Space Show notes View

project/hivuiSam/assets/icon/demo_index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.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">
  <script src="iconfont.js"></script>
  
  <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">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
        <span class="sub-title">彩色字体</span>
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3042769" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">天猫-123时效</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xebcd;</span>
                <div class="name">百分比</div>
                <div class="code-name">&amp;#xebcd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">copy</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
                <div class="name">XLSX</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c5;</span>
                <div class="name">XLSX图标</div>
                <div class="code-name">&amp;#xe6c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">info</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">error</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">warn</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f8;</span>
                <div class="name">cc-arrow-right-circle</div>
                <div class="code-name">&amp;#xe6f8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fa;</span>
                <div class="name">cc-arrow-right-circle</div>
                <div class="code-name">&amp;#xe6fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fb;</span>
                <div class="name">cc-arrow-right-circle</div>
                <div class="code-name">&amp;#xe6fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe698;</span>
                <div class="name">delete</div>
                <div class="code-name">&amp;#xe698;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ee;</span>
                <div class="name">add</div>
                <div class="code-name">&amp;#xe6ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">check-box</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">check-box-empty</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">arrows down</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fc;</span>
                <div class="name">arrows down</div>
                <div class="code-name">&amp;#xe6fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">edit</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">sort16</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe93c;</span>
                <div class="name">sort</div>
                <div class="code-name">&amp;#xe93c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73d;</span>
                <div class="name">-sort-2</div>
                <div class="code-name">&amp;#xe73d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">退出</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e8;</span>
                <div class="name">tree</div>
                <div class="code-name">&amp;#xe6e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">关  闭</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">关闭所有</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">关闭其它</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">权限</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb11;</span>
                <div class="name">全屏</div>
                <div class="code-name">&amp;#xeb11;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">部门</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">岗位</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe810;</span>
                <div class="name">根节点</div>
                <div class="code-name">&amp;#xe810;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">组织机构</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">功能</div>
                <div class="code-name">&amp;#xe604;</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">&#xe621;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">clock</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">arrow</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe699;</span>
                <div class="name">table</div>
                <div class="code-name">&amp;#xe699;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">cc-arrow-right-circle</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">help</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">yxx_mark</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">钱</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d2;</span>
                <div class="name">报表2</div>
                <div class="code-name">&amp;#xe6d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64a;</span>
                <div class="name">待办</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">切换</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6eb;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xe6eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">time</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe664;</span>
                <div class="name">画板主题</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6af;</span>
                <div class="name">邮箱</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">email</div>
                <div class="code-name">&amp;#xe628;</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">&#xe645;</span>
                <div class="name">今日收入</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">user</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">add</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f5;</span>
                <div class="name">sun</div>
                <div class="code-name">&amp;#xe6f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f6;</span>
                <div class="name">arrow</div>
                <div class="code-name">&amp;#xe6f6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">图表</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">set</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f7;</span>
                <div class="name">arrow</div>
                <div class="code-name">&amp;#xe6f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">用户</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69f;</span>
                <div class="name">用户</div>
                <div class="code-name">&amp;#xe69f;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <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.woff2?t=1675411665027') format('woff2'),
       url('iconfont.woff?t=1675411665027') format('woff'),
       url('iconfont.ttf?t=1675411665027') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-num"></span>
            <div class="name">
              天猫-123时效
            </div>
            <div class="code-name">.icon-num
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-percentage"></span>
            <div class="name">
              百分比
            </div>
            <div class="code-name">.icon-percentage
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-copy"></span>
            <div class="name">
              copy
            </div>
            <div class="code-name">.icon-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-XLSX"></span>
            <div class="name">
              XLSX
            </div>
            <div class="code-name">.icon-XLSX
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xlsx"></span>
            <div class="name">
              XLSX图标
            </div>
            <div class="code-name">.icon-xlsx
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-info"></span>
            <div class="name">
              info
            </div>
            <div class="code-name">.icon-info
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-error"></span>
            <div class="name">
              error
            </div>
            <div class="code-name">.icon-error
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-warn"></span>
            <div class="name">
              warn
            </div>
            <div class="code-name">.icon-warn
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-down-circle"></span>
            <div class="name">
              cc-arrow-right-circle
            </div>
            <div class="code-name">.icon-arrow-down-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-up-circle"></span>
            <div class="name">
              cc-arrow-right-circle
            </div>
            <div class="code-name">.icon-arrow-up-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-left-circle"></span>
            <div class="name">
              cc-arrow-right-circle
            </div>
            <div class="code-name">.icon-arrow-left-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-delete"></span>
            <div class="name">
              delete
            </div>
            <div class="code-name">.icon-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-add"></span>
            <div class="name">
              add
            </div>
            <div class="code-name">.icon-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-checkbox"></span>
            <div class="name">
              check-box
            </div>
            <div class="code-name">.icon-checkbox
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-checkbox-empty"></span>
            <div class="name">
              check-box-empty
            </div>
            <div class="code-name">.icon-checkbox-empty
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-leftMore-circle"></span>
            <div class="name">
              arrows down
            </div>
            <div class="code-name">.icon-arrow-leftMore-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-rightMore-circle"></span>
            <div class="name">
              arrows down
            </div>
            <div class="code-name">.icon-arrow-rightMore-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-edit"></span>
            <div class="name">
              edit
            </div>
            <div class="code-name">.icon-edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moveSort2"></span>
            <div class="name">
              sort16
            </div>
            <div class="code-name">.icon-moveSort2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moveSort1"></span>
            <div class="name">
              sort
            </div>
            <div class="code-name">.icon-moveSort1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moveSort"></span>
            <div class="name">
              -sort-2
            </div>
            <div class="code-name">.icon-moveSort
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tuichu"></span>
            <div class="name">
              退出
            </div>
            <div class="code-name">.icon-tuichu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tree"></span>
            <div class="name">
              tree
            </div>
            <div class="code-name">.icon-tree
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-refresh"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.icon-refresh
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close-circle"></span>
            <div class="name">
              关  闭
            </div>
            <div class="code-name">.icon-close-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-closeAll"></span>
            <div class="name">
              关闭所有
            </div>
            <div class="code-name">.icon-closeAll
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-closeOther"></span>
            <div class="name">
              关闭其它
            </div>
            <div class="code-name">.icon-closeOther
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanxian"></span>
            <div class="name">
              权限
            </div>
            <div class="code-name">.icon-quanxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanping"></span>
            <div class="name">
              全屏
            </div>
            <div class="code-name">.icon-quanping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dpt"></span>
            <div class="name">
              部门
            </div>
            <div class="code-name">.icon-dpt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ptm"></span>
            <div class="name">
              岗位
            </div>
            <div class="code-name">.icon-ptm
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-root"></span>
            <div class="name">
              根节点
            </div>
            <div class="code-name">.icon-root
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-org"></span>
            <div class="name">
              组织机构
            </div>
            <div class="code-name">.icon-org
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-func"></span>
            <div class="name">
              功能
            </div>
            <div class="code-name">.icon-func
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-flow"></span>
            <div class="name">
              工作流程图
            </div>
            <div class="code-name">.icon-flow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.icon-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-clock"></span>
            <div class="name">
              clock
            </div>
            <div class="code-name">.icon-clock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-right"></span>
            <div class="name">
              arrow
            </div>
            <div class="code-name">.icon-arrow-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-table"></span>
            <div class="name">
              table
            </div>
            <div class="code-name">.icon-table
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-right-circle"></span>
            <div class="name">
              cc-arrow-right-circle
            </div>
            <div class="code-name">.icon-arrow-right-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-help"></span>
            <div class="name">
              help
            </div>
            <div class="code-name">.icon-help
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mark"></span>
            <div class="name">
              yxx_mark
            </div>
            <div class="code-name">.icon-mark
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-money"></span>
            <div class="name">
              钱
            </div>
            <div class="code-name">.icon-money
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-analyse"></span>
            <div class="name">
              报表2
            </div>
            <div class="code-name">.icon-analyse
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dealt"></span>
            <div class="name">
              待办
            </div>
            <div class="code-name">.icon-dealt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-change"></span>
            <div class="name">
              切换
            </div>
            <div class="code-name">.icon-change
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bell"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.icon-bell
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-time"></span>
            <div class="name">
              time
            </div>
            <div class="code-name">.icon-time
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-skin"></span>
            <div class="name">
              画板主题
            </div>
            <div class="code-name">.icon-skin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mail"></span>
            <div class="name">
              邮箱
            </div>
            <div class="code-name">.icon-mail
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-email"></span>
            <div class="name">
              email
            </div>
            <div class="code-name">.icon-email
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-meeting"></span>
            <div class="name">
              会议管理
            </div>
            <div class="code-name">.icon-meeting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-today"></span>
            <div class="name">
              今日收入
            </div>
            <div class="code-name">.icon-today
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-user2"></span>
            <div class="name">
              user
            </div>
            <div class="code-name">.icon-user2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-listadd"></span>
            <div class="name">
              add
            </div>
            <div class="code-name">.icon-listadd
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sun"></span>
            <div class="name">
              sun
            </div>
            <div class="code-name">.icon-sun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-down"></span>
            <div class="name">
              arrow
            </div>
            <div class="code-name">.icon-arrow-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chart"></span>
            <div class="name">
              图表
            </div>
            <div class="code-name">.icon-chart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-set"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-set
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-set-fill"></span>
            <div class="name">
              set
            </div>
            <div class="code-name">.icon-set-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.icon-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-left"></span>
            <div class="name">
              arrow
            </div>
            <div class="code-name">.icon-arrow-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-user1"></span>
            <div class="name">
              用户
            </div>
            <div class="code-name">.icon-user1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-user"></span>
            <div class="name">
              用户
            </div>
            <div class="code-name">.icon-user
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-num"></use>
                </svg>
                <div class="name">天猫-123时效</div>
                <div class="code-name">#icon-num</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-percentage"></use>
                </svg>
                <div class="name">百分比</div>
                <div class="code-name">#icon-percentage</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-copy"></use>
                </svg>
                <div class="name">copy</div>
                <div class="code-name">#icon-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-XLSX"></use>
                </svg>
                <div class="name">XLSX</div>
                <div class="code-name">#icon-XLSX</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xlsx"></use>
                </svg>
                <div class="name">XLSX图标</div>
                <div class="code-name">#icon-xlsx</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-info"></use>
                </svg>
                <div class="name">info</div>
                <div class="code-name">#icon-info</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-error"></use>
                </svg>
                <div class="name">error</div>
                <div class="code-name">#icon-error</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-warn"></use>
                </svg>
                <div class="name">warn</div>
                <div class="code-name">#icon-warn</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-down-circle"></use>
                </svg>
                <div class="name">cc-arrow-right-circle</div>
                <div class="code-name">#icon-arrow-down-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-up-circle"></use>
                </svg>
                <div class="name">cc-arrow-right-circle</div>
                <div class="code-name">#icon-arrow-up-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-left-circle"></use>
                </svg>
                <div class="name">cc-arrow-right-circle</div>
                <div class="code-name">#icon-arrow-left-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete"></use>
                </svg>
                <div class="name">delete</div>
                <div class="code-name">#icon-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add"></use>
                </svg>
                <div class="name">add</div>
                <div class="code-name">#icon-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-checkbox"></use>
                </svg>
                <div class="name">check-box</div>
                <div class="code-name">#icon-checkbox</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-checkbox-empty"></use>
                </svg>
                <div class="name">check-box-empty</div>
                <div class="code-name">#icon-checkbox-empty</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-leftMore-circle"></use>
                </svg>
                <div class="name">arrows down</div>
                <div class="code-name">#icon-arrow-leftMore-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-rightMore-circle"></use>
                </svg>
                <div class="name">arrows down</div>
                <div class="code-name">#icon-arrow-rightMore-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit"></use>
                </svg>
                <div class="name">edit</div>
                <div class="code-name">#icon-edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moveSort2"></use>
                </svg>
                <div class="name">sort16</div>
                <div class="code-name">#icon-moveSort2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moveSort1"></use>
                </svg>
                <div class="name">sort</div>
                <div class="code-name">#icon-moveSort1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moveSort"></use>
                </svg>
                <div class="name">-sort-2</div>
                <div class="code-name">#icon-moveSort</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tuichu"></use>
                </svg>
                <div class="name">退出</div>
                <div class="code-name">#icon-tuichu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tree"></use>
                </svg>
                <div class="name">tree</div>
                <div class="code-name">#icon-tree</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-refresh"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#icon-refresh</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close-circle"></use>
                </svg>
                <div class="name">关  闭</div>
                <div class="code-name">#icon-close-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-closeAll"></use>
                </svg>
                <div class="name">关闭所有</div>
                <div class="code-name">#icon-closeAll</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-closeOther"></use>
                </svg>
                <div class="name">关闭其它</div>
                <div class="code-name">#icon-closeOther</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanxian"></use>
                </svg>
                <div class="name">权限</div>
                <div class="code-name">#icon-quanxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanping"></use>
                </svg>
                <div class="name">全屏</div>
                <div class="code-name">#icon-quanping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dpt"></use>
                </svg>
                <div class="name">部门</div>
                <div class="code-name">#icon-dpt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ptm"></use>
                </svg>
                <div class="name">岗位</div>
                <div class="code-name">#icon-ptm</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-root"></use>
                </svg>
                <div class="name">根节点</div>
                <div class="code-name">#icon-root</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-org"></use>
                </svg>
                <div class="name">组织机构</div>
                <div class="code-name">#icon-org</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-func"></use>
                </svg>
                <div class="name">功能</div>
                <div class="code-name">#icon-func</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-flow"></use>
                </svg>
                <div class="name">工作流程图</div>
                <div class="code-name">#icon-flow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#icon-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clock"></use>
                </svg>
                <div class="name">clock</div>
                <div class="code-name">#icon-clock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-right"></use>
                </svg>
                <div class="name">arrow</div>
                <div class="code-name">#icon-arrow-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-table"></use>
                </svg>
                <div class="name">table</div>
                <div class="code-name">#icon-table</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-right-circle"></use>
                </svg>
                <div class="name">cc-arrow-right-circle</div>
                <div class="code-name">#icon-arrow-right-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-help"></use>
                </svg>
                <div class="name">help</div>
                <div class="code-name">#icon-help</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mark"></use>
                </svg>
                <div class="name">yxx_mark</div>
                <div class="code-name">#icon-mark</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-money"></use>
                </svg>
                <div class="name">钱</div>
                <div class="code-name">#icon-money</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-analyse"></use>
                </svg>
                <div class="name">报表2</div>
                <div class="code-name">#icon-analyse</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dealt"></use>
                </svg>
                <div class="name">待办</div>
                <div class="code-name">#icon-dealt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-change"></use>
                </svg>
                <div class="name">切换</div>
                <div class="code-name">#icon-change</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bell"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#icon-bell</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-time"></use>
                </svg>
                <div class="name">time</div>
                <div class="code-name">#icon-time</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-skin"></use>
                </svg>
                <div class="name">画板主题</div>
                <div class="code-name">#icon-skin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mail"></use>
                </svg>
                <div class="name">邮箱</div>
                <div class="code-name">#icon-mail</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-email"></use>
                </svg>
                <div class="name">email</div>
                <div class="code-name">#icon-email</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-meeting"></use>
                </svg>
                <div class="name">会议管理</div>
                <div class="code-name">#icon-meeting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-today"></use>
                </svg>
                <div class="name">今日收入</div>
                <div class="code-name">#icon-today</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user2"></use>
                </svg>
                <div class="name">user</div>
                <div class="code-name">#icon-user2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-listadd"></use>
                </svg>
                <div class="name">add</div>
                <div class="code-name">#icon-listadd</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sun"></use>
                </svg>
                <div class="name">sun</div>
                <div class="code-name">#icon-sun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-down"></use>
                </svg>
                <div class="name">arrow</div>
                <div class="code-name">#icon-arrow-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chart"></use>
                </svg>
                <div class="name">图表</div>
                <div class="code-name">#icon-chart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-set"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-set</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-set-fill"></use>
                </svg>
                <div class="name">set</div>
                <div class="code-name">#icon-set-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#icon-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-left"></use>
                </svg>
                <div class="name">arrow</div>
                <div class="code-name">#icon-arrow-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user1"></use>
                </svg>
                <div class="name">用户</div>
                <div class="code-name">#icon-user1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user"></use>
                </svg>
                <div class="name">用户</div>
                <div class="code-name">#icon-user</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

</div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

$('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <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">
  <script src="iconfont.js"></script>
  
  <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">
      <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>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1417123" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <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">&#xe604;</span>
                <div class="name">功能</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">组织机构</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe810;</span>
                <div class="name">根节点</div>
                <div class="code-name">&amp;#xe810;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">部门</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">岗位</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb11;</span>
                <div class="name">全屏</div>
                <div class="code-name">&amp;#xeb11;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">权限</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">关闭其它</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">关  闭</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">关闭所有</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e8;</span>
                <div class="name">tree</div>
                <div class="code-name">&amp;#xe6e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">退出</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">sort16</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe93c;</span>
                <div class="name">sort</div>
                <div class="code-name">&amp;#xe93c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73d;</span>
                <div class="name">-sort-2</div>
                <div class="code-name">&amp;#xe73d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">edit</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">arrows down</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fc;</span>
                <div class="name">arrows down</div>
                <div class="code-name">&amp;#xe6fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">check-box-empty</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">check-box</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ee;</span>
                <div class="name">add</div>
                <div class="code-name">&amp;#xe6ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe698;</span>
                <div class="name">delete</div>
                <div class="code-name">&amp;#xe698;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">info</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">error</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">warn</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">set</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">图表</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f8;</span>
                <div class="name">cc-arrow-right-circle</div>
                <div class="code-name">&amp;#xe6f8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f6;</span>
                <div class="name">arrow</div>
                <div class="code-name">&amp;#xe6f6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f7;</span>
                <div class="name">arrow</div>
                <div class="code-name">&amp;#xe6f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fa;</span>
                <div class="name">cc-arrow-right-circle</div>
                <div class="code-name">&amp;#xe6fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fb;</span>
                <div class="name">cc-arrow-right-circle</div>
                <div class="code-name">&amp;#xe6fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">clock</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">arrow</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe699;</span>
                <div class="name">table</div>
                <div class="code-name">&amp;#xe699;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">cc-arrow-right-circle</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">help</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">yxx_mark</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">钱</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d2;</span>
                <div class="name">报表2</div>
                <div class="code-name">&amp;#xe6d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64a;</span>
                <div class="name">待办</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">切换</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6eb;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xe6eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">time</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe664;</span>
                <div class="name">画板主题</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6af;</span>
                <div class="name">邮箱</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">email</div>
                <div class="code-name">&amp;#xe628;</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">&#xe645;</span>
                <div class="name">今日收入</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">user</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">add</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f5;</span>
                <div class="name">sun</div>
                <div class="code-name">&amp;#xe6f5;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <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.woff2?t=1641282764308') format('woff2'),
       url('iconfont.woff?t=1641282764308') format('woff'),
       url('iconfont.ttf?t=1641282764308') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-flow"></span>
            <div class="name">
              工作流程图
            </div>
            <div class="code-name">.icon-flow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-func"></span>
            <div class="name">
              功能
            </div>
            <div class="code-name">.icon-func
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-org"></span>
            <div class="name">
              组织机构
            </div>
            <div class="code-name">.icon-org
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-root"></span>
            <div class="name">
              根节点
            </div>
            <div class="code-name">.icon-root
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dpt"></span>
            <div class="name">
              部门
            </div>
            <div class="code-name">.icon-dpt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ptm"></span>
            <div class="name">
              岗位
            </div>
            <div class="code-name">.icon-ptm
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanping"></span>
            <div class="name">
              全屏
            </div>
            <div class="code-name">.icon-quanping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanxian"></span>
            <div class="name">
              权限
            </div>
            <div class="code-name">.icon-quanxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-closeOther"></span>
            <div class="name">
              关闭其它
            </div>
            <div class="code-name">.icon-closeOther
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close-circle"></span>
            <div class="name">
              关  闭
            </div>
            <div class="code-name">.icon-close-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-closeAll"></span>
            <div class="name">
              关闭所有
            </div>
            <div class="code-name">.icon-closeAll
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-refresh"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.icon-refresh
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tree"></span>
            <div class="name">
              tree
            </div>
            <div class="code-name">.icon-tree
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tuichu"></span>
            <div class="name">
              退出
            </div>
            <div class="code-name">.icon-tuichu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moveSort2"></span>
            <div class="name">
              sort16
            </div>
            <div class="code-name">.icon-moveSort2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moveSort1"></span>
            <div class="name">
              sort
            </div>
            <div class="code-name">.icon-moveSort1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moveSort"></span>
            <div class="name">
              -sort-2
            </div>
            <div class="code-name">.icon-moveSort
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-edit"></span>
            <div class="name">
              edit
            </div>
            <div class="code-name">.icon-edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-leftMore-circle"></span>
            <div class="name">
              arrows down
            </div>
            <div class="code-name">.icon-arrow-leftMore-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-rightMore-circle"></span>
            <div class="name">
              arrows down
            </div>
            <div class="code-name">.icon-arrow-rightMore-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-checkbox-empty"></span>
            <div class="name">
              check-box-empty
            </div>
            <div class="code-name">.icon-checkbox-empty
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-checkbox"></span>
            <div class="name">
              check-box
            </div>
            <div class="code-name">.icon-checkbox
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-add"></span>
            <div class="name">
              add
            </div>
            <div class="code-name">.icon-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-delete"></span>
            <div class="name">
              delete
            </div>
            <div class="code-name">.icon-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-info"></span>
            <div class="name">
              info
            </div>
            <div class="code-name">.icon-info
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-error"></span>
            <div class="name">
              error
            </div>
            <div class="code-name">.icon-error
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-warn"></span>
            <div class="name">
              warn
            </div>
            <div class="code-name">.icon-warn
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.icon-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-set-fill"></span>
            <div class="name">
              set
            </div>
            <div class="code-name">.icon-set-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-set"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-set
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chart"></span>
            <div class="name">
              图表
            </div>
            <div class="code-name">.icon-chart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-down-circle"></span>
            <div class="name">
              cc-arrow-right-circle
            </div>
            <div class="code-name">.icon-arrow-down-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-down"></span>
            <div class="name">
              arrow
            </div>
            <div class="code-name">.icon-arrow-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-left"></span>
            <div class="name">
              arrow
            </div>
            <div class="code-name">.icon-arrow-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-up-circle"></span>
            <div class="name">
              cc-arrow-right-circle
            </div>
            <div class="code-name">.icon-arrow-up-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-left-circle"></span>
            <div class="name">
              cc-arrow-right-circle
            </div>
            <div class="code-name">.icon-arrow-left-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.icon-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-clock"></span>
            <div class="name">
              clock
            </div>
            <div class="code-name">.icon-clock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-right"></span>
            <div class="name">
              arrow
            </div>
            <div class="code-name">.icon-arrow-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-table"></span>
            <div class="name">
              table
            </div>
            <div class="code-name">.icon-table
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-right-circle"></span>
            <div class="name">
              cc-arrow-right-circle
            </div>
            <div class="code-name">.icon-arrow-right-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-help"></span>
            <div class="name">
              help
            </div>
            <div class="code-name">.icon-help
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mark"></span>
            <div class="name">
              yxx_mark
            </div>
            <div class="code-name">.icon-mark
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-money"></span>
            <div class="name">
              钱
            </div>
            <div class="code-name">.icon-money
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-analyse"></span>
            <div class="name">
              报表2
            </div>
            <div class="code-name">.icon-analyse
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dealt"></span>
            <div class="name">
              待办
            </div>
            <div class="code-name">.icon-dealt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-change"></span>
            <div class="name">
              切换
            </div>
            <div class="code-name">.icon-change
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bell"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.icon-bell
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-time"></span>
            <div class="name">
              time
            </div>
            <div class="code-name">.icon-time
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-skin"></span>
            <div class="name">
              画板主题
            </div>
            <div class="code-name">.icon-skin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mail"></span>
            <div class="name">
              邮箱
            </div>
            <div class="code-name">.icon-mail
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-email"></span>
            <div class="name">
              email
            </div>
            <div class="code-name">.icon-email
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-meeting"></span>
            <div class="name">
              会议管理
            </div>
            <div class="code-name">.icon-meeting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-today"></span>
            <div class="name">
              今日收入
            </div>
            <div class="code-name">.icon-today
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-user"></span>
            <div class="name">
              user
            </div>
            <div class="code-name">.icon-user
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-listadd"></span>
            <div class="name">
              add
            </div>
            <div class="code-name">.icon-listadd
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sun"></span>
            <div class="name">
              sun
            </div>
            <div class="code-name">.icon-sun
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-flow"></use>
                </svg>
                <div class="name">工作流程图</div>
                <div class="code-name">#icon-flow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-func"></use>
                </svg>
                <div class="name">功能</div>
                <div class="code-name">#icon-func</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-org"></use>
                </svg>
                <div class="name">组织机构</div>
                <div class="code-name">#icon-org</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-root"></use>
                </svg>
                <div class="name">根节点</div>
                <div class="code-name">#icon-root</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dpt"></use>
                </svg>
                <div class="name">部门</div>
                <div class="code-name">#icon-dpt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ptm"></use>
                </svg>
                <div class="name">岗位</div>
                <div class="code-name">#icon-ptm</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanping"></use>
                </svg>
                <div class="name">全屏</div>
                <div class="code-name">#icon-quanping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanxian"></use>
                </svg>
                <div class="name">权限</div>
                <div class="code-name">#icon-quanxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-closeOther"></use>
                </svg>
                <div class="name">关闭其它</div>
                <div class="code-name">#icon-closeOther</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close-circle"></use>
                </svg>
                <div class="name">关  闭</div>
                <div class="code-name">#icon-close-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-closeAll"></use>
                </svg>
                <div class="name">关闭所有</div>
                <div class="code-name">#icon-closeAll</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-refresh"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#icon-refresh</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tree"></use>
                </svg>
                <div class="name">tree</div>
                <div class="code-name">#icon-tree</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tuichu"></use>
                </svg>
                <div class="name">退出</div>
                <div class="code-name">#icon-tuichu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moveSort2"></use>
                </svg>
                <div class="name">sort16</div>
                <div class="code-name">#icon-moveSort2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moveSort1"></use>
                </svg>
                <div class="name">sort</div>
                <div class="code-name">#icon-moveSort1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moveSort"></use>
                </svg>
                <div class="name">-sort-2</div>
                <div class="code-name">#icon-moveSort</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit"></use>
                </svg>
                <div class="name">edit</div>
                <div class="code-name">#icon-edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-leftMore-circle"></use>
                </svg>
                <div class="name">arrows down</div>
                <div class="code-name">#icon-arrow-leftMore-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-rightMore-circle"></use>
                </svg>
                <div class="name">arrows down</div>
                <div class="code-name">#icon-arrow-rightMore-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-checkbox-empty"></use>
                </svg>
                <div class="name">check-box-empty</div>
                <div class="code-name">#icon-checkbox-empty</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-checkbox"></use>
                </svg>
                <div class="name">check-box</div>
                <div class="code-name">#icon-checkbox</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add"></use>
                </svg>
                <div class="name">add</div>
                <div class="code-name">#icon-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete"></use>
                </svg>
                <div class="name">delete</div>
                <div class="code-name">#icon-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-info"></use>
                </svg>
                <div class="name">info</div>
                <div class="code-name">#icon-info</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-error"></use>
                </svg>
                <div class="name">error</div>
                <div class="code-name">#icon-error</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-warn"></use>
                </svg>
                <div class="name">warn</div>
                <div class="code-name">#icon-warn</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#icon-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-set-fill"></use>
                </svg>
                <div class="name">set</div>
                <div class="code-name">#icon-set-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-set"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-set</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chart"></use>
                </svg>
                <div class="name">图表</div>
                <div class="code-name">#icon-chart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-down-circle"></use>
                </svg>
                <div class="name">cc-arrow-right-circle</div>
                <div class="code-name">#icon-arrow-down-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-down"></use>
                </svg>
                <div class="name">arrow</div>
                <div class="code-name">#icon-arrow-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-left"></use>
                </svg>
                <div class="name">arrow</div>
                <div class="code-name">#icon-arrow-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-up-circle"></use>
                </svg>
                <div class="name">cc-arrow-right-circle</div>
                <div class="code-name">#icon-arrow-up-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-left-circle"></use>
                </svg>
                <div class="name">cc-arrow-right-circle</div>
                <div class="code-name">#icon-arrow-left-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#icon-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clock"></use>
                </svg>
                <div class="name">clock</div>
                <div class="code-name">#icon-clock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-right"></use>
                </svg>
                <div class="name">arrow</div>
                <div class="code-name">#icon-arrow-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-table"></use>
                </svg>
                <div class="name">table</div>
                <div class="code-name">#icon-table</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-right-circle"></use>
                </svg>
                <div class="name">cc-arrow-right-circle</div>
                <div class="code-name">#icon-arrow-right-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-help"></use>
                </svg>
                <div class="name">help</div>
                <div class="code-name">#icon-help</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mark"></use>
                </svg>
                <div class="name">yxx_mark</div>
                <div class="code-name">#icon-mark</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-money"></use>
                </svg>
                <div class="name">钱</div>
                <div class="code-name">#icon-money</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-analyse"></use>
                </svg>
                <div class="name">报表2</div>
                <div class="code-name">#icon-analyse</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dealt"></use>
                </svg>
                <div class="name">待办</div>
                <div class="code-name">#icon-dealt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-change"></use>
                </svg>
                <div class="name">切换</div>
                <div class="code-name">#icon-change</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bell"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#icon-bell</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-time"></use>
                </svg>
                <div class="name">time</div>
                <div class="code-name">#icon-time</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-skin"></use>
                </svg>
                <div class="name">画板主题</div>
                <div class="code-name">#icon-skin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mail"></use>
                </svg>
                <div class="name">邮箱</div>
                <div class="code-name">#icon-mail</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-email"></use>
                </svg>
                <div class="name">email</div>
                <div class="code-name">#icon-email</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-meeting"></use>
                </svg>
                <div class="name">会议管理</div>
                <div class="code-name">#icon-meeting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-today"></use>
                </svg>
                <div class="name">今日收入</div>
                <div class="code-name">#icon-today</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user"></use>
                </svg>
                <div class="name">user</div>
                <div class="code-name">#icon-user</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-listadd"></use>
                </svg>
                <div class="name">add</div>
                <div class="code-name">#icon-listadd</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sun"></use>
                </svg>
                <div class="name">sun</div>
                <div class="code-name">#icon-sun</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

</div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

$('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>

Ignore Space Show notes View project/hivuiSam/assets/icon/iconfont.css
@font-face { font-family: "iconfont"; /* Project id 3042769 / / Color fonts / src: url('iconfont.woff2?t=1675411665027') format('woff2'), url('iconfont.woff?t=1675411665027') format('woff'), url('iconfont.ttf?t=1675411665027') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-num:before { content: "\e603"; } .icon-percentage:before { content: "\ebcd"; } .icon-copy:before { content: "\e66a"; } .icon-XLSX:before { content: "\e650"; } .icon-xlsx:before { content: "\e6c5"; } .icon-info:before { content: "\e60a"; } .icon-error:before { content: "\e620"; } .icon-warn:before { content: "\e601"; } .icon-arrow-down-circle:before { content: "\e6f8"; } .icon-arrow-up-circle:before { content: "\e6fa"; } .icon-arrow-left-circle:before { content: "\e6fb"; } .icon-delete:before { content: "\e698"; } .icon-add:before { content: "\e6ee"; } .icon-checkbox:before { content: "\e626"; } .icon-checkbox-empty:before { content: "\e625"; } .icon-arrow-leftMore-circle:before { content: "\e623"; } .icon-arrow-rightMore-circle:before { content: "\e6fc"; } .icon-edit:before { content: "\e62f"; } .icon-moveSort2:before { content: "\e630"; } .icon-moveSort1:before { content: "\e93c"; } .icon-moveSort:before { content: "\e73d"; } .icon-tuichu:before { content: "\e627"; } .icon-tree:before { content: "\e6e8"; } .icon-refresh:before { content: "\e619"; } .icon-close-circle:before { content: "\e629"; } .icon-closeAll:before { content: "\e60f"; } .icon-closeOther:before { content: "\e631"; } .icon-quanxian:before { content: "\e63f"; } .icon-quanping:before { content: "\eb11"; } .icon-dpt:before { content: "\e62b"; } .icon-ptm:before { content: "\e65c"; } .icon-root:before { content: "\e810"; } .icon-org:before { content: "\e63c"; } .icon-func:before { content: "\e604"; } .icon-flow:before { content: "\e602"; } .icon-search:before { content: "\e621"; } .icon-clock:before { content: "\e600"; } .icon-arrow-right:before { content: "\e636"; } .icon-table:before { content: "\e699"; } .icon-arrow-right-circle:before { content: "\e60d"; } .icon-help:before { content: "\e65d"; } .icon-mark:before { content: "\e63d"; } .icon-money:before { content: "\e640"; } .icon-analyse:before { content: "\e6d2"; } .icon-dealt:before { content: "\e64a"; } .icon-change:before { content: "\e60e"; } .icon-bell:before { content: "\e6eb"; } .icon-time:before { content: "\e64d"; } .icon-skin:before { content: "\e664"; } .icon-mail:before { content: "\e6af"; } .icon-email:before { content: "\e628"; } .icon-meeting:before { content: "\e612"; } .icon-today:before { content: "\e645"; } .icon-user2:before { content: "\e606"; } .icon-listadd:before { content: "\e654"; } .icon-sun:before { content: "\e6f5"; } .icon-arrow-down:before { content: "\e6f6"; } .icon-chart:before { content: "\e632"; } .icon-set:before { content: "\e61d"; } .icon-set-fill:before { content: "\e61e"; } .icon-close:before { content: "\e607"; } .icon-arrow-left:before { content: "\e6f7"; } .icon-user1:before { content: "\e609"; } .icon-user:before { content: "\e69f"; } @font-face { font-family: "iconfont"; / Project id 1417123 */ src: url('iconfont.woff2?t=1641282764308') format('woff2'), url('iconfont.woff?t=1641282764308') format('woff'), url('iconfont.ttf?t=1641282764308') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-flow:before { content: "\e602"; } .icon-func:before { content: "\e604"; } .icon-org:before { content: "\e63c"; } .icon-root:before { content: "\e810"; } .icon-dpt:before { content: "\e62b"; } .icon-ptm:before { content: "\e65c"; } .icon-quanping:before { content: "\eb11"; } .icon-quanxian:before { content: "\e63f"; } .icon-closeOther:before { content: "\e631"; } .icon-close-circle:before { content: "\e629"; } .icon-closeAll:before { content: "\e60f"; } .icon-refresh:before { content: "\e619"; } .icon-tree:before { content: "\e6e8"; } .icon-tuichu:before { content: "\e627"; } .icon-moveSort2:before { content: "\e630"; } .icon-moveSort1:before { content: "\e93c"; } .icon-moveSort:before { content: "\e73d"; } .icon-edit:before { content: "\e62f"; } .icon-arrow-leftMore-circle:before { content: "\e623"; } .icon-arrow-rightMore-circle:before { content: "\e6fc"; } .icon-checkbox-empty:before { content: "\e625"; } .icon-checkbox:before { content: "\e626"; } .icon-add:before { content: "\e6ee"; } .icon-delete:before { content: "\e698"; } .icon-info:before { content: "\e60a"; } .icon-error:before { content: "\e620"; } .icon-warn:before { content: "\e601"; } .icon-close:before { content: "\e607"; } .icon-set-fill:before { content: "\e61e"; } .icon-set:before { content: "\e61d"; } .icon-chart:before { content: "\e632"; } .icon-arrow-down-circle:before { content: "\e6f8"; } .icon-arrow-down:before { content: "\e6f6"; } .icon-arrow-left:before { content: "\e6f7"; } .icon-arrow-up-circle:before { content: "\e6fa"; } .icon-arrow-left-circle:before { content: "\e6fb"; } .icon-search:before { content: "\e621"; } .icon-clock:before { content: "\e600"; } .icon-arrow-right:before { content: "\e636"; } .icon-table:before { content: "\e699"; } .icon-arrow-right-circle:before { content: "\e60d"; } .icon-help:before { content: "\e65d"; } .icon-mark:before { content: "\e63d"; } .icon-money:before { content: "\e640"; } .icon-analyse:before { content: "\e6d2"; } .icon-dealt:before { content: "\e64a"; } .icon-change:before { content: "\e60e"; } .icon-bell:before { content: "\e6eb"; } .icon-time:before { content: "\e64d"; } .icon-skin:before { content: "\e664"; } .icon-mail:before { content: "\e6af"; } .icon-email:before { content: "\e628"; } .icon-meeting:before { content: "\e612"; } .icon-today:before { content: "\e645"; } .icon-user:before { content: "\e606"; } .icon-listadd:before { content: "\e654"; } .icon-sun:before { content: "\e6f5"; }

Ignore Space Show notes View

project/hivuiSam/assets/icon/iconfont.css

@font-face {
  font-family: "iconfont"; /* Project id 3042769 */
  /* Color fonts */
  src: 
       url('iconfont.woff2?t=1675411665027') format('woff2'),
       url('iconfont.woff?t=1675411665027') format('woff'),
       url('iconfont.ttf?t=1675411665027') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-num:before {
  content: "\e603";
}

.icon-percentage:before {
  content: "\ebcd";
}

.icon-copy:before {
  content: "\e66a";
}

.icon-XLSX:before {
  content: "\e650";
}

.icon-xlsx:before {
  content: "\e6c5";
}

.icon-info:before {
  content: "\e60a";
}

.icon-error:before {
  content: "\e620";
}

.icon-warn:before {
  content: "\e601";
}

.icon-arrow-down-circle:before {
  content: "\e6f8";
}

.icon-arrow-up-circle:before {
  content: "\e6fa";
}

.icon-arrow-left-circle:before {
  content: "\e6fb";
}

.icon-delete:before {
  content: "\e698";
}

.icon-add:before {
  content: "\e6ee";
}

.icon-checkbox:before {
  content: "\e626";
}

.icon-checkbox-empty:before {
  content: "\e625";
}

.icon-arrow-leftMore-circle:before {
  content: "\e623";
}

.icon-arrow-rightMore-circle:before {
  content: "\e6fc";
}

.icon-edit:before {
  content: "\e62f";
}

.icon-moveSort2:before {
  content: "\e630";
}

.icon-moveSort1:before {
  content: "\e93c";
}

.icon-moveSort:before {
  content: "\e73d";
}

.icon-tuichu:before {
  content: "\e627";
}

.icon-tree:before {
  content: "\e6e8";
}

.icon-refresh:before {
  content: "\e619";
}

.icon-close-circle:before {
  content: "\e629";
}

.icon-closeAll:before {
  content: "\e60f";
}

.icon-closeOther:before {
  content: "\e631";
}

.icon-quanxian:before {
  content: "\e63f";
}

.icon-quanping:before {
  content: "\eb11";
}

.icon-dpt:before {
  content: "\e62b";
}

.icon-ptm:before {
  content: "\e65c";
}

.icon-root:before {
  content: "\e810";
}

.icon-org:before {
  content: "\e63c";
}

.icon-func:before {
  content: "\e604";
}

.icon-flow:before {
  content: "\e602";
}

.icon-search:before {
  content: "\e621";
}

.icon-clock:before {
  content: "\e600";
}

.icon-arrow-right:before {
  content: "\e636";
}

.icon-table:before {
  content: "\e699";
}

.icon-arrow-right-circle:before {
  content: "\e60d";
}

.icon-help:before {
  content: "\e65d";
}

.icon-mark:before {
  content: "\e63d";
}

.icon-money:before {
  content: "\e640";
}

.icon-analyse:before {
  content: "\e6d2";
}

.icon-dealt:before {
  content: "\e64a";
}

.icon-change:before {
  content: "\e60e";
}

.icon-bell:before {
  content: "\e6eb";
}

.icon-time:before {
  content: "\e64d";
}

.icon-skin:before {
  content: "\e664";
}

.icon-mail:before {
  content: "\e6af";
}

.icon-email:before {
  content: "\e628";
}

.icon-meeting:before {
  content: "\e612";
}

.icon-today:before {
  content: "\e645";
}

.icon-user2:before {
  content: "\e606";
}

.icon-listadd:before {
  content: "\e654";
}

.icon-sun:before {
  content: "\e6f5";
}

.icon-arrow-down:before {
  content: "\e6f6";
}

.icon-chart:before {
  content: "\e632";
}

.icon-set:before {
  content: "\e61d";
}

.icon-set-fill:before {
  content: "\e61e";
}

.icon-close:before {
  content: "\e607";
}

.icon-arrow-left:before {
  content: "\e6f7";
}

.icon-user1:before {
  content: "\e609";
}

.icon-user:before {
  content: "\e69f";
}

@font-face {
  font-family: "iconfont"; /* Project id 1417123 */
  src: url('iconfont.woff2?t=1641282764308') format('woff2'),
       url('iconfont.woff?t=1641282764308') format('woff'),
       url('iconfont.ttf?t=1641282764308') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-flow:before {
  content: "\e602";
}

.icon-func:before {
  content: "\e604";
}

.icon-org:before {
  content: "\e63c";
}

.icon-root:before {
  content: "\e810";
}

.icon-dpt:before {
  content: "\e62b";
}

.icon-ptm:before {
  content: "\e65c";
}

.icon-quanping:before {
  content: "\eb11";
}

.icon-quanxian:before {
  content: "\e63f";
}

.icon-closeOther:before {
  content: "\e631";
}

.icon-close-circle:before {
  content: "\e629";
}

.icon-closeAll:before {
  content: "\e60f";
}

.icon-refresh:before {
  content: "\e619";
}

.icon-tree:before {
  content: "\e6e8";
}

.icon-tuichu:before {
  content: "\e627";
}

.icon-moveSort2:before {
  content: "\e630";
}

.icon-moveSort1:before {
  content: "\e93c";
}

.icon-moveSort:before {
  content: "\e73d";
}

.icon-edit:before {
  content: "\e62f";
}

.icon-arrow-leftMore-circle:before {
  content: "\e623";
}

.icon-arrow-rightMore-circle:before {
  content: "\e6fc";
}

.icon-checkbox-empty:before {
  content: "\e625";
}

.icon-checkbox:before {
  content: "\e626";
}

.icon-add:before {
  content: "\e6ee";
}

.icon-delete:before {
  content: "\e698";
}

.icon-info:before {
  content: "\e60a";
}

.icon-error:before {
  content: "\e620";
}

.icon-warn:before {
  content: "\e601";
}

.icon-close:before {
  content: "\e607";
}

.icon-set-fill:before {
  content: "\e61e";
}

.icon-set:before {
  content: "\e61d";
}

.icon-chart:before {
  content: "\e632";
}

.icon-arrow-down-circle:before {
  content: "\e6f8";
}

.icon-arrow-down:before {
  content: "\e6f6";
}

.icon-arrow-left:before {
  content: "\e6f7";
}

.icon-arrow-up-circle:before {
  content: "\e6fa";
}

.icon-arrow-left-circle:before {
  content: "\e6fb";
}

.icon-search:before {
  content: "\e621";
}

.icon-clock:before {
  content: "\e600";
}

.icon-arrow-right:before {
  content: "\e636";
}

.icon-table:before {
  content: "\e699";
}

.icon-arrow-right-circle:before {
  content: "\e60d";
}

.icon-help:before {
  content: "\e65d";
}

.icon-mark:before {
  content: "\e63d";
}

.icon-money:before {
  content: "\e640";
}

.icon-analyse:before {
  content: "\e6d2";
}

.icon-dealt:before {
  content: "\e64a";
}

.icon-change:before {
  content: "\e60e";
}

.icon-bell:before {
  content: "\e6eb";
}

.icon-time:before {
  content: "\e64d";
}

.icon-skin:before {
  content: "\e664";
}

.icon-mail:before {
  content: "\e6af";
}

.icon-email:before {
  content: "\e628";
}

.icon-meeting:before {
  content: "\e612";
}

.icon-today:before {
  content: "\e645";
}

.icon-user:before {
  content: "\e606";
}

.icon-listadd:before {
  content: "\e654";
}

.icon-sun:before {
  content: "\e6f5";
}

Ignore Space Show notes View project/hivuiSam/assets/icon/iconfont.js
window._iconfont_svg_string_3042769='<svg><symbol id="icon-num" viewBox="0 0 1024 1024"><path d="M511.342526 68.514443c-244.177232 0-442.125583 197.964724-442.125583 442.142979 0 244.178255 197.947328 442.108187 442.125583 442.108187 244.179278 0 442.126606-197.929932 442.126606-442.108187C953.469132 266.479167 755.521804 68.514443 511.342526 68.514443M511.342526 908.256906c-219.5923 0-397.615856-178.004113-397.615856-397.59846 0-219.629139 178.022533-397.633253 397.615856-397.633253 219.59537 0 397.61688 178.004113 397.61688 397.633253C908.959406 730.251769 730.937896 908.256906 511.342526 908.256906" fill="#A52525" ></path><path d="M361.765859 626.732068l-22.697955 0L339.067904 417.778058c0-0.973164-0.156566-1.912559-0.252757-2.816139-0.051165-3.477194-0.669242-6.850012-2.469238-9.979282-0.62524-1.078565-1.62501-1.704828-2.390443-2.608407-0.956791-1.286296-2.025123-2.434445-3.181459-3.477194-0.199545-0.13917-0.338714-0.347924-0.555655-0.487094-3.704368-3.094478-8.275477-4.972245-13.283538-4.972245-4.842285 0-9.293667 1.738597-12.944823 4.659113l-45.804209 28.27088c-11.640108 6.746658-16.126282 20.759813-10.023284 31.365358 6.085602 10.605545 20.48966 13.734816 32.17377 6.989181l14.474666-9.632381 0 171.642219-22.697955 0c-12.378935 0-22.403243 9.109472-22.403243 20.37505 0 11.232832 10.023284 20.344351 22.403243 20.344351l89.653903 0c12.378935 0 22.420639-9.111518 22.420639-20.344351C384.186498 635.842563 374.144794 626.732068 361.765859 626.732068" fill="#A52525" ></path><path d="M548.481378 474.076272c0 23.784706-35.390022 49.934273-75.893504 84.394109-37.285185 31.713282-52.316529 57.82908-57.793264 91.106997 0 11.231809 6.815219 20.515243 19.186991 20.515243l143.414317 0c12.369725 0 22.410406-9.109472 22.410406-20.342304 0-11.265578-10.04068-20.342304-22.410406-20.342304 0 0-110.406552 0.347924-111.414509-0.973164-4.720511-6.259564 36.207643-44.301995 62.470797-64.190975 38.919405-29.452799 60.922535-59.984163 61.174268-96.253204 0.286526-40.301891-31.513738-72.815399-89.289606-72.815399-63.826678 0-97.886401 59.427484-75.892481 75.770707 26.880207 19.99438 43.971467-34.355459 82.857103-34.355459C528.859481 436.59052 548.481378 441.041902 548.481378 474.076272" fill="#A52525" ></path><path d="M764.605693 532.252253c19.856233-14.95255 29.036313-32.130791 29.036313-68.260663 0-30.496571-28.643364-67.077721-73.848938-67.077721-48.422849 0-76.928067 18.847254-87.560218 38.668695-10.162454 18.986423 8.528234 39.259142 29.321816 16.691147 16.171308-17.491373 36.060287-19.438725 56.907081-19.438725 28.89612 0 40.163745 20.794605 38.294165 44.057425-2.137687 25.975605-48.369637 36.824697-74.067926 36.824697 0 0-26.880207-3.164063-26.880207 20.829398 0 15.857153 37.95545 15.405875 37.95545 15.405875 38.355563 0 62.122873 18.185174 61.358463 43.849694-0.947582 31.53932-57.45455 55.776328-103.495142 25.071002-25.072025-16.760732-36.233226 13.07376-19.429515 29.036313 21.455661 20.411889 57.045227 20.444635 81.45722 20.444635 34.878368 0 79.987752-28.791743 79.987752-73.961502C793.642007 567.616692 784.46295 547.170011 764.605693 532.252253" fill="#A52525" ></path></symbol><symbol id="icon-percentage" viewBox="0 0 1024 1024"><path d="M855.7 210.8l-42.4-42.4c-3.1-3.1-8.2-3.1-11.3 0L168.3 801.9c-3.1 3.1-3.1 8.2 0 11.3l42.4 42.4c3.1 3.1 8.2 3.1 11.3 0L855.6 222c3.2-3 3.2-8.1 0.1-11.2zM304 448c79.4 0 144-64.6 144-144s-64.6-144-144-144-144 64.6-144 144 64.6 144 144 144z m0-216c39.7 0 72 32.3 72 72s-32.3 72-72 72-72-32.3-72-72 32.3-72 72-72z m416 344c-79.4 0-144 64.6-144 144s64.6 144 144 144 144-64.6 144-144-64.6-144-144-144z m0 216c-39.7 0-72-32.3-72-72s32.3-72 72-72 72 32.3 72 72-32.3 72-72 72z" fill="#1296DB" ></path></symbol><symbol id="icon-copy" viewBox="0 0 1024 1024"><path d="M853.333333 224h-53.333333V170.666667c0-40.533333-34.133333-74.666667-74.666667-74.666667H170.666667C130.133333 96 96 130.133333 96 170.666667v554.666666c0 40.533333 34.133333 74.666667 74.666667 74.666667h53.333333V853.333333c0 40.533333 34.133333 74.666667 74.666667 74.666667h554.666666c40.533333 0 74.666667-34.133333 74.666667-74.666667V298.666667c0-40.533333-34.133333-74.666667-74.666667-74.666667zM160 725.333333V170.666667c0-6.4 4.266667-10.666667 10.666667-10.666667h554.666666c6.4 0 10.666667 4.266667 10.666667 10.666667v554.666666c0 6.4-4.266667 10.666667-10.666667 10.666667H170.666667c-6.4 0-10.666667-4.266667-10.666667-10.666667z m704 128c0 6.4-4.266667 10.666667-10.666667 10.666667H298.666667c-6.4 0-10.666667-4.266667-10.666667-10.666667v-53.333333H725.333333c40.533333 0 74.666667-34.133333 74.666667-74.666667V288H853.333333c6.4 0 10.666667 4.266667 10.666667 10.666667v554.666666z" ></path><path d="M576 416h-96V320c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v96H320c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h96V576c0 17.066667 14.933333 32 32 32s32-14.933333 32-32v-96H576c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32z" ></path></symbol><symbol id="icon-XLSX" viewBox="0 0 1024 1024"><path d="M947.2 870.4h-25.6v102.4a51.2 51.2 0 0 1-51.2 51.2H153.6a51.2 51.2 0 0 1-51.2-51.2v-102.4H76.8a51.2 51.2 0 0 1-51.2-51.2V512a51.2 51.2 0 0 1 51.2-51.2h25.6V51.2a51.2 51.2 0 0 1 51.2-51.2h460.8v51.2H153.6v409.6h716.8v-204.8h-204.8V0h51.2l204.8 204.8v256h25.6a51.2 51.2 0 0 1 51.2 51.2v307.2a51.2 51.2 0 0 1-51.2 51.2zM716.8 72.3968V204.8h132.4032zM153.6 972.8h716.8v-102.4H153.6v102.4z m128-435.2H230.4l-38.4 76.8L153.6 537.6H102.4l64 128L102.4 793.6h51.2l38.4-76.8L230.4 793.6h51.2l-64-128z m204.8 204.8h-102.4v-204.8h-51.2v256h153.6v-51.2z m204.8-51.2a51.2 51.2 0 0 0-51.2-51.2h-51.2v-51.2h102.4v-51.2h-102.4c-28.16 0-51.2 51.2-51.2 51.2v102.4h102.4v51.2h-102.4v51.2h128v-7.0912A51.0464 51.0464 0 0 0 691.2 742.4v-51.2z m230.4-153.6h-51.2l-38.4 76.8-38.4-76.8h-51.2l64 128-64 128h51.2l38.4-76.8 38.4 76.8h51.2l-64-128z" fill="#3FB275" ></path></symbol><symbol id="icon-xlsx" viewBox="0 0 1024 1024"><path d="M743.36 0L1024 282.453333V938.666667a85.333333 85.333333 0 0 1-85.333333 85.333333H213.333333a85.333333 85.333333 0 0 1-85.333333-85.333333v-106.666667H42.666667a42.666667 42.666667 0 0 1-42.666667-42.666667V426.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h85.333333V85.333333a85.333333 85.333333 0 0 1 85.333333-85.333333h530.026667z m-26.645333 64H213.333333a21.333333 21.333333 0 0 0-21.333333 21.333333v298.666667h640a42.666667 42.666667 0 0 1 42.666667 42.666667v362.666666a42.666667 42.666667 0 0 1-42.666667 42.666667H192v106.666667a21.333333 21.333333 0 0 0 21.333333 21.333333h725.333334a21.333333 21.333333 0 0 0 21.333333-21.333333V308.821333L949.909333 298.666667h-126.528A98.048 98.048 0 0 1 725.333333 200.618667V72.682667L716.714667 64z" fill="#6BB103" ></path><path d="M40.917333 472.490667h51.306667l60.288 96.768 60.288-96.768h51.306667l-86.485334 132.48L269.866667 746.666667h-51.306667l-66.026667-105.984L86.485333 746.666667H35.2l91.498667-141.696-85.76-132.48z m228.928 0h44.288V708.266667h83.712V746.666667h-128V472.490667z m222.869334-5.376c27.285333 0 48.725333 6.528 64 19.968 16.234667 14.208 25.664 36.48 27.946666 66.432h-37.696c-3.242667-16.896-9.429333-29.184-17.877333-36.48-8.448-7.68-21.44-11.136-38.336-11.136-14.613333 0-25.664 2.304-33.450667 7.296-9.749333 5.76-14.293333 15.36-14.293333 28.416 0 11.52 5.184 21.12 16.234667 28.032 4.885333 3.072 18.197333 8.832 39.637333 16.896 31.509333 11.52 51.648 20.736 60.757333 26.88 20.138667 14.208 30.208 33.792 30.208 59.136 0 24.576-8.106667 44.16-24.362666 58.368-16.256 13.824-39.317333 21.12-68.885334 21.12-28.586667 0-50.986667-6.528-66.922666-19.584-19.477333-16.128-30.208-41.472-31.829334-76.416h37.674667c2.602667 20.736 8.789333 35.712 18.858667 44.544 9.088 7.68 23.061333 11.904 42.24 11.904 16.874667 0 30.506667-3.456 40.277333-9.984 9.749333-6.912 14.933333-15.744 14.933333-27.264 0-14.592-7.466667-26.112-21.76-34.56-4.544-2.688-19.498667-8.832-45.162666-18.048-28.586667-10.752-46.442667-18.432-53.269334-23.04-17.877333-12.672-26.645333-31.104-26.645333-55.296 0-24.192 8.448-43.392 25.984-57.216 16.256-13.44 36.714667-19.968 61.738667-19.968z m102.869333 5.376h51.306667l60.288 96.768 60.288-96.768h51.306666l-86.485333 132.48L824.533333 746.666667h-51.306666l-66.026667-105.984L641.152 746.666667H589.866667l91.498666-141.696-85.76-132.48z" fill="#FFFFFF" ></path></symbol><symbol id="icon-info" viewBox="0 0 1024 1024"><path d="M512 1024C229.229714 1024 0 794.770286 0 512 0 229.229714 229.229714 0 512 0 794.770286 0 1024 229.229714 1024 512 1024 794.770286 794.770286 1024 512 1024ZM593.188571 203.044571C586.898286 164.644571 561.225143 147.053714 526.848 152.685714 480.365714 160.256 453.485714 205.129143 460.763429 249.6 466.029714 281.929143 492.397714 303.542857 529.773714 297.435429 576.256 289.828571 600.466286 247.478857 593.188571 203.044571ZM593.956571 664.576C572.635429 692.955429 523.52 741.449143 509.366857 743.753143 502.272 744.923429 500.297143 738.998857 502.857143 729.270857L567.478857 464.530286C571.062857 448.365714 574.976 428.032 573.330286 417.901714 569.709714 395.702857 541.805714 377.417143 519.570286 381.074286 466.029714 389.814857 379.136 454.838857 335.469714 530.468571 332.909714 540.196571 343.149714 552.009143 355.620571 552.045714 369.298286 534.272 418.962286 482.56 436.114286 479.780571 441.197714 478.939429 442.185143 485.010286 440.466286 493.568L376.502857 762.368C371.712 783.872 369.664 796.672 371.492571 807.789714 373.467429 819.931429 398.299429 844.909714 424.557714 840.594286 507.428571 827.062857 586.276571 744.667429 617.106286 685.677714 617.984 672.036571 606.061714 662.601143 593.956571 664.576Z" ></path></symbol><symbol id="icon-error" viewBox="0 0 1024 1024"><path d="M512 1024a512 512 0 1 1 512-512 512 512 0 0 1-512 512zM438.857143 506.148571L264.777143 683.154286a46.811429 46.811429 0 1 0 49.737143 78.994285 46.811429 46.811429 0 0 0 14.628571-14.628571L506.148571 570.514286l177.005715 177.005714a46.08 46.08 0 1 0 63.634285-64.365714L570.514286 506.148571l176.274285-176.274285a46.811429 46.811429 0 0 0-49.737142-78.994286 44.617143 44.617143 0 0 0-13.897143 14.628571L506.148571 442.514286 329.142857 265.508571a46.811429 46.811429 0 0 0-64.365714 14.628572 49.005714 49.005714 0 0 0 0 49.005714z" ></path></symbol><symbol id="icon-warn" viewBox="0 0 1102 1024"><path d="M617.721223 39.070296l476.238403 876.385787c12.36676 22.843059 11.657837 50.412269-1.89046 72.703945a75.460865 75.460865 0 0 1-64.433181 35.839972H75.159179a75.460865 75.460865 0 0 1-64.433181-35.839972 72.625175 72.625175 0 0 1-1.89046-72.703945L485.073941 39.070296A75.382096 75.382096 0 0 1 551.397582 0.000788c27.805517 0 53.326728 14.966142 66.40241 39.069508zM601.494774 395.422022c0-40.014738-28.041825-72.467637-62.62149-72.467637-34.658435 0-62.700259 32.452898-62.70026 72.467637V667.175659c0 40.093508 28.120594 72.467637 62.70026 72.467637 34.579666 0 62.62149-32.452898 62.62149-72.467637V395.422022z m-62.62149 389.592316a63.409182 63.409182 0 0 0-62.70026 64.196873c0 35.446127 28.120594 64.196874 62.70026 64.196874 34.579666 0 62.62149-28.750747 62.62149-64.196874a63.487951 63.487951 0 0 0-62.62149-64.196873z" ></path></symbol><symbol id="icon-arrow-down-circle" viewBox="0 0 1024 1024"><path d="M231.91393 792.797779c71.800279 71.14434 170.937161 115.542526 280.334733 115.542526 109.39859599 0 208.534454-44.398186 280.334733-115.542526 71.222111-71.713298 115.669416-170.74273201 115.669416-280.025695l0 0c0-109.282962-44.447305-208.303186-115.669416-280.026718l0 0c-71.800279-71.704089-170.936137-116.111484-280.334733-116.111484l0 0 0 0 0 0c-109.397572 0-208.534454 44.407396-280.334733 116.111484-71.78186 71.724555-116.227118 170.743756-116.227118 280.026718l0 0 0 0C115.686812 622.055047 160.131047 721.084481 231.91393 792.797779L231.91393 792.797779zM829.043796 829.228503c-81.484849 80.8197-193.140858 130.909515-316.796156 130.909515-123.634832 0-235.888452-50.088792-316.795133-130.909515-80.906681-81.387635-131.043568-192.947454-131.043568-316.456419 0-123.50077801 50.135864-235.637742 131.043568-316.447209C276.359188 115.495966 388.613832 65.416384 512.248663 65.416384c123.65529801 0 235.310284 50.079582 316.796156 130.908492C909.950478 277.13332 960.106808 389.271306 960.106808 512.772085l0 0C960.106808 636.281049 909.950478 747.84086799 829.043796 829.228503L829.043796 829.228503zM751.551888 434.239474c4.572132 4.551666 7.408737 10.803044 7.408737 18.210757l0 0c0 3.412726-0.559748 6.828522-1.717108 9.66308-1.697665 3.415796-3.39533 6.27082-5.691629 8.547677l0 0-221.054605 200.913892c-2.856048 2.276856-5.130857 3.984754-8.565073 5.691629-2.855024 1.137916-6.250354 1.706875-9.68457 1.706875-3.413749 0-6.829546-0.568958-10.263761-1.706875-2.834558-1.706875-5.689582-3.414773-7.96643899-5.691629L272.944416 470.659965l0 0c-2.854001-2.276856-4.552689-5.131881-5.690606-8.547677-1.137916-2.83558099-2.276856-6.250354-2.276856-9.66308 0-7.407714 3.413749-13.659091 7.966439-18.210757l0 0c4.553713-4.552689 10.82351-7.407714 18.2302-7.407714 3.41477299 0 6.847965 0.559748 9.683547 1.697665 2.856048 1.157359 5.71107199 3.433192 7.987928 5.710049l203.402573 184.401824L715.092511 434.239474c2.275833-2.276856 5.131881-4.552689 7.966439-5.710049 3.43319199-1.137916 6.848988-1.69766499 10.262738-1.697665C740.15021 426.83073699 746.999199 429.685761 751.551888 434.239474L751.551888 434.239474z" ></path></symbol><symbol id="icon-arrow-up-circle" viewBox="0 0 1024 1024"><path d="M792.08607 231.202221c-71.800279-71.14434-170.937161-115.542526-280.334733-115.542526-109.39859599 0-208.534454 44.398186-280.334733 115.542526-71.222111 71.713298-115.669416 170.74273201-115.669416 280.025695l0 0c0 109.282962 44.447305 208.303186 115.669416 280.026718l0 0c71.800279 71.704089 170.936137 116.111484 280.334733 116.111484l0 0 0 0 0 0c109.397572 0 208.534454-44.407396 280.334733-116.111484 71.78186-71.724555 116.227118-170.743756 116.227118-280.026718l0 0 0 0C908.313188 401.944953 863.868953 302.915519 792.08607 231.202221L792.08607 231.202221zM194.956204 194.771497c81.484849-80.8197 193.140858-130.909515 316.796156-130.909515 123.634832 0 235.888452 50.088792 316.795133 130.909515 80.906681 81.387635 131.043568 192.947454 131.043568 316.456419 0 123.50077801-50.135864 235.637742-131.043568 316.447209C747.640812 908.504034 635.386168 958.583616 511.751337 958.583616c-123.65529801 0-235.310284-50.079582-316.796156-130.908492C114.049522 746.86668 63.893192 634.728694 63.893192 511.227915l0 0C63.893192 387.718951 114.049522 276.15913201 194.956204 194.771497L194.956204 194.771497zM272.448112 589.760526c-4.572132-4.551666-7.408737-10.803044-7.408737-18.210757l0 0c0-3.412726 0.559748-6.828522 1.717108-9.66308 1.697665-3.415796 3.39533-6.27082 5.691629-8.547677l0 0 221.054605-200.913892c2.856048-2.276856 5.130857-3.984754 8.565073-5.691629 2.855024-1.137916 6.250354-1.706875 9.68457-1.706875 3.413749 0 6.829546 0.568958 10.263761 1.706875 2.834558 1.706875 5.689582 3.414773 7.96643899 5.691629L751.055584 553.340035l0 0c2.854001 2.276856 4.552689 5.131881 5.690606 8.547677 1.137916 2.83558099 2.276856 6.250354 2.276856 9.66308 0 7.407714-3.413749 13.659091-7.966439 18.210757l0 0c-4.553713 4.552689-10.82351 7.407714-18.2302 7.407714-3.41477299 0-6.847965-0.559748-9.683547-1.697665-2.856048-1.157359-5.71107199-3.433192-7.987928-5.710049l-203.402573-184.401824L308.907489 589.760526c-2.275833 2.276856-5.131881 4.552689-7.966439 5.710049-3.43319199 1.137916-6.848988 1.69766499-10.262738 1.697665C283.84979 597.16926301 277.000801 594.314239 272.448112 589.760526L272.448112 589.760526z" ></path></symbol><symbol id="icon-arrow-left-circle" viewBox="0 0 1024 1024"><path d="M231.202221 231.91393c-71.14434 71.800279-115.542526 170.937161-115.542526 280.334733 0 109.39859599 44.398186 208.534454 115.542526 280.334733 71.713298 71.222111 170.74273201 115.669416 280.025695 115.669416l0 0c109.282962 0 208.303186-44.447305 280.026718-115.669416l0 0c71.704089-71.800279 116.111484-170.936137 116.111484-280.334733l0 0 0 0 0 0c0-109.397572-44.407396-208.534454-116.111484-280.334733-71.724555-71.78186-170.743756-116.227118-280.026718-116.227118l0 0 0 0C401.944953 115.686812 302.915519 160.131047 231.202221 231.91393L231.202221 231.91393zM194.771497 829.043796c-80.8197-81.484849-130.909515-193.140858-130.909515-316.796156 0-123.634832 50.088792-235.888452 130.909515-316.795133 81.387635-80.906681 192.947454-131.043568 316.456419-131.043568 123.50077801 0 235.637742 50.135864 316.447209 131.043568C908.504034 276.359188 958.583616 388.613832 958.583616 512.248663c0 123.65529801-50.079582 235.310284-130.908492 316.796156C746.86668 909.950478 634.728694 960.106808 511.227915 960.106808l0 0C387.718951 960.106808 276.15913201 909.950478 194.771497 829.043796L194.771497 829.043796zM589.760526 751.551888c-4.551666 4.572132-10.803044 7.408737-18.210757 7.408737l0 0c-3.412726 0-6.828522-0.559748-9.66308-1.717108-3.415796-1.697665-6.27082-3.39533-8.547677-5.691629l0 0-200.913892-221.054605c-2.276856-2.856048-3.984754-5.130857-5.691629-8.565073-1.137916-2.855024-1.706875-6.250354-1.706875-9.68457 0-3.413749 0.568958-6.829546 1.706875-10.263761 1.706875-2.834558 3.414773-5.689582 5.691629-7.96643899L553.340035 272.944416l0 0c2.276856-2.854001 5.131881-4.552689 8.547677-5.690606 2.83558099-1.137916 6.250354-2.276856 9.66308-2.276856 7.407714 0 13.659091 3.413749 18.210757 7.966439l0 0c4.552689 4.553713 7.407714 10.82351 7.407714 18.2302 0 3.41477299-0.559748 6.847965-1.697665 9.683547-1.157359 2.856048-3.433192 5.71107199-5.710049 7.987928l-184.401824 203.402573L589.760526 715.092511c2.276856 2.275833 4.552689 5.131881 5.710049 7.966439 1.137916 3.43319199 1.69766499 6.848988 1.697665 10.262738C597.16926301 740.15021 594.314239 746.999199 589.760526 751.551888L589.760526 751.551888z" ></path></symbol><symbol id="icon-delete" viewBox="0 0 1024 1024"><path d="M826.19642832 347.3l-29.6035708 560.79642833a38.79642833 38.79642833 0 0 1-38.73214336 36.73928583H266.10714248a38.79642833 38.79642833 0 0 1-38.73214248-36.73928583L197.80357168 347.3a38.79642833 38.79642833 0 0 1 77.46428584-4.08214248l27.675 524.025h418.11428496l27.64285752-524.025a38.98928584 38.98928584 0 0 1 40.82142832-36.70714336 38.79642833 38.79642833 0 0 1 36.675 40.82142832z m102.85714335-129.85714248c0 21.43928584-17.38928584 38.79642833-38.82857167 38.79642832H133.775a38.79642833 38.79642833 0 0 1 0-77.56071416H347.10714248V91.37857168c0-18.73928584 12.50357168-29.08928584 31.24285752-29.08928584h267.23571416c18.73928584 0 31.24285752 10.35 31.24285752 29.08928584V178.67857168h213.36428584c21.43928584 0 38.79642833 17.35714248 38.79642832 38.79642832zM414.99285752 178.67857168h193.95V130.14285752h-193.95V178.67857168z m16.26428496 630.38571416h0.80357168c18.73928584 0 33.58928584-18 33.13928584-36.77142832l-9.86785752-419.30357168a34.26428584 34.26428584 0 0 0-34.71428496-33.65357168 33.75 33.75 0 0 0-33.13928585 34.48928584l9.83571417 420.20357167c0.45 18.45 15.55714248 35.03571416 33.94285664 35.03571417z m159.94285752 0c18.38571416 0 33.49285752-15.58928584 33.91071416-34.07142832l9.86785752-418.725a34.13571416 34.13571416 0 0 0-33.10714335-34.9714292 33.75 33.75 0 0 0-34.74642833 33.01071416l-9.86785752 419.14285752c-0.45 18.77142832 14.4 35.61428584 33.10714336 35.61428584h0.83571416z" ></path></symbol><symbol id="icon-add" viewBox="0 0 1024 1024"><path d="M740.1 484.3L540 484l0.3-200.1c0-15.4-12.5-28-28-28-15.4 0-28 12.5-28 28L484 484l-200.2-0.3c-15.4 0-28 12.5-28 28 0 15.4 12.5 28 28 28l200.2 0.3-0.3 200.2c0 15.4 12.5 28 28 28 15.4 0 28-12.5 28-28L540 540l200.1 0.3c15.4 0 28-12.5 28-28 0-15.4-12.5-28-28-28z" ></path><path d="M512 63.9C264.5 63.9 63.9 264.5 63.9 512S264.5 960.1 512 960.1 960.1 759.5 960.1 512 759.5 63.9 512 63.9z m271.6 719.7c-35.3 35.3-76.4 63-122.1 82.3-47.3 20-97.6 30.2-149.5 30.2S409.8 886 362.5 865.9c-45.7-19.3-86.8-47-122.1-82.3s-63-76.4-82.3-122.1c-20-47.3-30.2-97.6-30.2-149.5s10.1-102.2 30.2-149.5c19.3-45.7 47-86.8 82.3-122.1s76.4-63 122.1-82.3c47.3-20 97.6-30.2 149.5-30.2 51.9 0 102.2 10.1 149.5 30.2 45.7 19.3 86.8 47 122.1 82.3s63 76.4 82.3 122.1c20 47.3 30.2 97.6 30.2 149.5 0 51.9-10.1 102.2-30.2 149.5-19.3 45.7-47 86.8-82.3 122.1z" ></path></symbol><symbol id="icon-checkbox" viewBox="0 0 1024 1024"><path d="M725.75 303.875L427.625 602 298.25 455.75c-22.5-22.5-56.25-22.5-78.75 0-22.5 22.5-22.5 56.25 0 78.75l163.125 185.625C393.875 731.375 410.75 737 422 737c16.875 0 28.125-5.625 39.375-16.875l337.5-337.5c22.5-22.5 22.5-56.25 0-78.75C782 281.375 742.625 281.375 725.75 303.875z" ></path><path d="M849.5 62L174.5 62C112.625 62 62 112.625 62 174.5l0 675c0 61.875 50.625 112.5 112.5 112.5l675 0c61.875 0 112.5-50.625 112.5-112.5L962 174.5C962 112.625 911.375 62 849.5 62zM905.75 849.5c0 33.75-22.5 56.25-56.25 56.25L174.5 905.75c-33.75 0-56.25-22.5-56.25-56.25L118.25 174.5c0-33.75 22.5-56.25 56.25-56.25l675 0c33.75 0 56.25 22.5 56.25 56.25L905.75 849.5z" ></path></symbol><symbol id="icon-checkbox-empty" viewBox="0 0 1024 1024"><path d="M849.5 118.25c33.75 0 56.25 22.5 56.25 56.25l0 675c0 33.75-22.5 56.25-56.25 56.25L174.5 905.75c-33.75 0-56.25-22.5-56.25-56.25L118.25 174.5c0-33.75 22.5-56.25 56.25-56.25L849.5 118.25M849.5 62L174.5 62C112.625 62 62 112.625 62 174.5l0 675c0 61.875 50.625 112.5 112.5 112.5l675 0c61.875 0 112.5-50.625 112.5-112.5L962 174.5C962 112.625 911.375 62 849.5 62L849.5 62z" ></path></symbol><symbol id="icon-arrow-leftMore-circle" viewBox="0 0 1024 1024"><path d="M107 512a405 405 0 1 0 810 0 405 405 0 0 0-810 0z m-44.99999999 0C62 263.465 263.465 62 512 62.00000001S962 263.465 961.99999999 512s-201.465 450-449.99999999 449.99999999-450-201.465-449.99999999-449.99999999z" ></path><path d="M363.815 512l119.11500001 119.07a22.5 22.5 0 1 1-31.86000001 31.86l-135-135a22.5 22.5 0 0 1 0-31.86l135-135a22.5 22.5 0 0 1 31.86000001 31.86L363.815 512z" ></path><path d="M543.815 512l119.115 119.07a22.5 22.5 0 0 1-31.86 31.86l-135-135a22.5 22.5 0 0 1 0-31.86l135-135a22.5 22.5 0 0 1 31.86 31.86L543.815 512z" ></path></symbol><symbol id="icon-arrow-rightMore-circle" viewBox="0 0 1024 1024"><path d="M917 512a405 405 0 1 0-810 0 405 405 0 0 0 810 0z m44.99999999 0C962 760.535 760.535 962 512 961.99999999S62 760.535 62.00000001 512s201.465-450 449.99999999-449.99999999 450 201.465 449.99999999 449.99999999z" ></path><path d="M660.185 512l-119.11500001-119.07a22.5 22.5 0 1 1 31.86000001-31.86l135 135a22.5 22.5 0 0 1 0 31.86l-135 135a22.5 22.5 0 0 1-31.86000001-31.86L660.185 512z" ></path><path d="M480.185 512l-119.115-119.07a22.5 22.5 0 0 1 31.86-31.86l135 135a22.5 22.5 0 0 1 0 31.86l-135 135a22.5 22.5 0 0 1-31.86-31.86L480.185 512z" ></path></symbol><symbol id="icon-edit" viewBox="0 0 1024 1024"><path d="M870.96462219 885.385565L226.136855 885.385565l99.42411-30.05834062L166.55932906 696.3255875 107.80300531 890.67254c-1.29991875 4.30076437-0.99868312 8.51134969 0.43554469 12.18949594 0.95263406 7.66424344 7.52130094 13.64962594 15.4320975 13.64962593L870.96462219 916.51166094c8.55931687 0 15.5635275-7.00325156 15.5635275-15.5635275S879.52393906 885.385565 870.96462219 885.385565z" ></path><path d="M897.4762475 199.39402719l-74.98372125-74.98372125c-23.20090969-23.20090969-60.81700594-23.20090969-84.01791563 0l-42.97022624 42.97022625 159.00163687 159.00163687 42.97022625-42.97022625C920.67715719 260.21103312 920.67715719 222.59493687 897.4762475 199.39402719z" ></path><path d="M653.10401187 305.18150281L674.30467719 283.98179656 695.50438438 305.18150281 785.605535 395.28265437 833.305355 347.58187531 674.30467719 188.5811975 186.7008725 676.18500219 234.4006925 723.88482219Z" ></path><path d="M345.70279344 835.19076781l-90.09993188-90.09993187 418.69900688-418.69900688 90.09993187 90.09993188-418.69900687 418.69900687Z" ></path></symbol><symbol id="icon-moveSort2" viewBox="0 0 1024 1024"><path d="M384 320a64 64 0 1 1 0-128 64 64 0 0 1 0 128z m256 0a64 64 0 1 1 0-128 64 64 0 0 1 0 128zM384 576a64 64 0 1 1 0-128 64 64 0 0 1 0 128z m256 0a64 64 0 1 1 0-128 64 64 0 0 1 0 128z m-256 256a64 64 0 1 1 0-128 64 64 0 0 1 0 128z m256 0a64 64 0 1 1 0-128 64 64 0 0 1 0 128z" ></path></symbol><symbol id="icon-moveSort1" viewBox="0 0 1024 1024"><path d="M426.666667 554.666667v-85.333334h341.333333v85.333334h-341.333333z m0 256v-85.333334h170.666666v85.333334h-170.666666z m0-511.914667V213.333333h512v85.418667H426.666667zM256 725.333333h106.666667L213.333333 874.666667 64 725.333333H170.666667V298.666667H64L213.333333 149.333333 362.666667 298.666667H256v426.666666z" ></path></symbol><symbol id="icon-moveSort" viewBox="0 0 1024 1024"><path d="M660.7 187.4c9.2 0 18.1 3.7 24.6 10.2 6.5 6.5 10.2 15.4 10.2 24.6v580.7c0 15.5-10.2 29.1-25.1 33.5-14.9 4.3-30.8-1.7-39.2-14.8-3.8-1.7-7.3-4.1-10.2-7.1l-82-82c-12.8-13.7-12.4-35.1 0.9-48.4 13.3-13.3 34.7-13.6 48.4-0.9l37.6 37.6V222.2c0-9.2 3.7-18.1 10.2-24.6 6.5-6.5 15.4-10.2 24.6-10.2z m166.6 650.4c-9.2 0-18.1-3.7-24.6-10.2-6.5-6.5-10.2-15.4-10.2-24.6V222.2c0-15.5 10.2-29.1 25.1-33.4 14.9-4.3 30.8 1.7 39.1 14.7 3.7 1.6 7.2 4 10.3 7.1l82.1 82.1c9.3 8.7 13.2 21.8 10 34.1-3.2 12.3-12.8 22-25.1 25.1s-25.4-0.7-34.1-10l-37.6-37.6v498.6c0 9.2-3.7 18.1-10.2 24.6-6.7 6.6-15.5 10.3-24.8 10.3z m0 0M99.1 187.4H494c23.2 0 34.8 11.6 34.8 34.8 0 23.2-11.6 34.8-34.8 34.8H99.1c-23.2 0-34.8-11.6-34.8-34.8-0.1-23.2 11.5-34.8 34.8-34.8z m0 0M99.1 466.1h302c19.2 0 34.8 15.6 34.8 34.8 0 19.2-15.6 34.8-34.8 34.8h-302c-19.2 0-34.8-15.6-34.8-34.8-0.1-19.2 15.5-34.8 34.8-34.8z m0 278.8h302c12.4 0 24 6.6 30.2 17.4 6.2 10.8 6.2 24.1 0 34.8-6.2 10.8-17.7 17.4-30.2 17.4h-302c-12.4 0-23.9-6.6-30.2-17.4-6.2-10.8-6.2-24.1 0-34.8 6.2-10.8 17.7-17.4 30.2-17.4z m0 0" ></path></symbol><symbol id="icon-tuichu" viewBox="0 0 1024 1024"><path d="M765.824 638.208 765.824 510.592 446.72 510.592 446.72 382.912l319.04 0L765.76 255.232l191.424 191.488L765.824 638.208zM702.016 574.4l0 255.232L382.912 829.632l0 191.488L0 829.632 0 0l702.016 0 0 319.104L638.272 319.104 638.272 63.808 127.68 63.808l255.232 127.68 0 574.336 255.36 0L638.272 574.4 702.016 574.4z" ></path></symbol><symbol id="icon-tree" viewBox="0 0 1024 1024"><path d="M177.697 741.043h185.982c12.353 0.196 22.195 10.36 22.008 22.705-0.195 12.074-9.935 21.804-22.008 21.999h-208.22c-12.328 0.068-22.382-9.859-22.458-22.177V338.968h-22.237c-12.404 0-22.449-10.045-22.449-22.449V227.35c0-12.396 10.045-22.45 22.449-22.45h89.178c12.395 0.017 22.423 10.063 22.44 22.45v89.177c0 12.396-10.045 22.441-22.44 22.441h-22.238v163.831h185.992c12.335-0.017 22.348 9.977 22.365 22.321 0.007 12.344-9.986 22.356-22.331 22.373H177.705v193.55h-0.008zM311.696 227.35c-0.008-12.387 10.037-22.45 22.432-22.45h565.771c12.386 0.017 22.432 10.063 22.45 22.45v89.177c0 12.396-10.045 22.441-22.45 22.441H334.146c-12.396 0-22.449-10.045-22.458-22.441V227.35h0.008z m163.823 253.202c-0.025-12.378 9.985-22.432 22.365-22.457H899.9c12.386 0.025 22.432 10.062 22.45 22.457v89.168c0 12.354-10.021 22.384-22.382 22.384H498.035c-12.396 0.032-22.483-9.986-22.517-22.384v-89.168h0.001z m0 238.255c0-12.371 10.011-22.448 22.517-22.448H899.9c12.386 0.015 22.432 10.061 22.45 22.448v89.169c0.031 12.362-9.943 22.417-22.297 22.449H498.035c-12.396 0.033-22.483-9.978-22.517-22.373v-89.245h0.001z" ></path></symbol><symbol id="icon-refresh" viewBox="0 0 1024 1024"><path d="M929.536 208c-17.664 0-32 14.336-32 32l0 45.024C819.712 152.896 676.448 64 512 64 264.576 64 64 264.576 64 512s200.576 448 448 448c149.728 0 281.6-73.952 362.88-186.816 0.256-0.256 0.416-0.544 0.64-0.8 0.992-1.408 2.208-2.656 3.2-4.064-0.128-0.064-0.192-0.16-0.32-0.224 3.52-5.184 6.08-11.072 6.08-17.792 0.032-17.856-14.432-32.288-32.224-32.288-12.608 0-23.264 7.424-28.576 17.984l-0.224 0c-69.728 96.768-183.072 160-311.456 160C299.936 896 128 724.064 128 512S299.936 128 512 128c148.544 0 276.832 84.608 340.672 208l-51.136 0c-17.664 0-32 14.336-32 32s14.336 32 32 32l128 0c17.664 0 32-14.336 32-32l0-128C961.536 222.336 947.2 208 929.536 208z" ></path></symbol><symbol id="icon-close-circle" viewBox="0 0 1024 1024"><path d="M512 1016C233.6 1016 8 790.4 8 512S233.6 8 512 8 1016 233.6 1016 512 790.4 1016 512 1016z m0-960C260.8 56 56 260.8 56 512S260.8 968 512 968 968 763.2 968 512 763.2 56 512 56z" ></path><path d="M548.8 512l195.2-195.2c9.6-9.6 9.6-25.6 0-36.8l-1.6-1.6c-9.6-9.6-25.6-9.6-35.2 0L512 475.2 316.8 280c-9.6-9.6-25.6-9.6-35.2 0l-1.6 1.6c-9.6 9.6-9.6 25.6 0 36.8L475.2 512 280 707.2c-9.6 9.6-9.6 25.6 0 36.8l1.6 1.6c9.6 9.6 25.6 9.6 35.2 0L512 548.8l195.2 195.2c9.6 9.6 25.6 9.6 35.2 0l1.6-1.6c9.6-9.6 9.6-25.6 0-36.8L548.8 512z" ></path></symbol><symbol id="icon-closeAll" viewBox="0 0 1024 1024"><path d="M40.960024 0.000026h788.47996a10.270719 10.270719 0 0 1 10.24 10.239999v71.679997a10.270719 10.270719 0 0 1-10.24 10.239999H92.160021v737.279963a10.269439 10.269439 0 0 1-10.239999 10.24H10.240025a10.269439 10.269439 0 0 1-10.239999-10.24V40.960024A40.916478 40.916478 0 0 1 40.960024 0.000026z" ></path><path d="M983.039976 163.840017H204.800015a40.916478 40.916478 0 0 0-40.959998 40.959998v778.239961a40.916478 40.916478 0 0 0 40.959998 40.959998h778.239961a40.916478 40.916478 0 0 0 40.959998-40.959998V204.800015a40.916478 40.916478 0 0 0-40.959998-40.959998z m-51.199997 767.999962H256.000013V256.000013h675.839966z" ></path><path d="M414.813445 773.119987h66.591997a18.440959 18.440959 0 0 0 13.905919-6.42432l98.136315-116.648954 98.136315 116.648954A18.090239 18.090239 0 0 0 705.49119 773.119987h66.591997a8.96 8.96 0 0 0 6.89664-14.764799L640.707834 593.919996l138.384633-164.435192A8.96 8.96 0 0 0 772.195827 414.720005h-66.591997a18.442239 18.442239 0 0 0-13.905919 6.42432l-98.248955 116.648954-98.136315-116.648954A18.091519 18.091519 0 0 0 481.406722 414.720005h-66.593277a8.96 8.96 0 0 0-6.89664 14.764799L546.186238 593.919996 407.916805 758.355188A8.96 8.96 0 0 0 414.813445 773.119987z" ></path></symbol><symbol id="icon-closeOther" viewBox="0 0 1024 1024"><path d="M512 962C263.9 962 62 760.1 62 512S263.9 62 512 62s450 201.9 450 450-201.9 450-450 450z m0-835.7c-212.7 0-385.7 173-385.7 385.7s173 385.7 385.7 385.7 385.7-173 385.7-385.7-173-385.7-385.7-385.7z" ></path><path d="M807.5 839.6c-8.2 0-16.4-3.1-22.7-9.4l-591-590.9c-12.6-12.6-12.6-32.9 0-45.5s32.9-12.6 45.5 0l590.9 590.9c12.6 12.6 12.6 32.9 0 45.5-6.3 6.2-14.5 9.4-22.7 9.4z" ></path></symbol><symbol id="icon-quanxian" viewBox="0 0 1552 1024"><path d="M1011.811097 1015.560258H507.375484a160.718452 160.718452 0 0 1-160.536774-160.536774V556.923871A160.718452 160.718452 0 0 1 507.375484 396.387097h504.501677a160.668903 160.668903 0 0 1 160.487226 160.536774V855.04a160.718452 160.718452 0 0 1-160.536774 160.536774zM507.375484 442.252387a114.737548 114.737548 0 0 0-114.671484 114.671484V855.04c0 63.256774 51.41471 114.721032 114.671484 114.721032h504.501677c63.207226 0 114.621935-51.464258 114.621936-114.721032V556.923871a114.737548 114.737548 0 0 0-114.621936-114.671484H507.375484zM1246.967742 214.709677a74.322581 74.322581 0 1 1 0-148.645161 74.322581 74.322581 0 0 1 0 148.645161z m0-33.032258a41.290323 41.290323 0 1 0 0-82.580645 41.290323 41.290323 0 0 0 0 82.580645zM322.064516 74.322581a33.032258 33.032258 0 1 1 0-66.064516 33.032258 33.032258 0 0 1 0 66.064516z m0-16.516129a16.516129 16.516129 0 1 0 0-33.032258 16.516129 16.516129 0 0 0 0 33.032258zM173.419355 875.354839a57.806452 57.806452 0 1 1 0-115.612904 57.806452 57.806452 0 0 1 0 115.612904z m0-33.032258a24.774194 24.774194 0 1 0 0-49.548387 24.774194 24.774194 0 0 0 0 49.548387z" ></path><path d="M194.064516 425.290323v-33.032258a12.387097 12.387097 0 1 1 24.774194 0v33.032258h33.032258a12.387097 12.387097 0 1 1 0 24.774193h-33.032258v33.032258a12.387097 12.387097 0 1 1-24.774194 0v-33.032258h-33.032258a12.387097 12.387097 0 1 1 0-24.774193h33.032258zM1419.792516 726.115097v-23.585032a8.852645 8.852645 0 0 1 17.70529 0v23.585032h23.585033a8.852645 8.852645 0 0 1 0 17.70529h-23.585033v23.585032a8.852645 8.852645 0 0 1-17.70529 0v-23.585032h-23.585032a8.852645 8.852645 0 0 1 0-17.70529h23.585032zM1274.698323 415.859613v-14.170839a5.301677 5.301677 0 0 1 10.603354 0v14.170839h14.170839a5.301677 5.301677 0 0 1 0 10.603355h-14.170839v14.170838a5.301677 5.301677 0 0 1-10.603354 0v-14.170838h-14.170839a5.301677 5.301677 0 0 1 0-10.603355h14.170839zM23.122581 974.451613h1126.4a23.122581 23.122581 0 1 1 0 46.245161H23.122581a23.122581 23.122581 0 1 1 0-46.245161zM1245.316129 974.451613h135.432258a23.122581 23.122581 0 1 1 0 46.245161h-135.432258a23.122581 23.122581 0 1 1 0-46.245161zM1476.541935 974.451613h52.851613a23.122581 23.122581 0 1 1 0 46.245161h-52.851613a23.122581 23.122581 0 1 1 0-46.245161z" ></path><path d="M501.908645 439.378581A22.874839 22.874839 0 0 1 478.967742 416.437677v-114.671483C478.967742 161.213935 595.802839 50.935742 745.571097 49.548387h2.824258c147.307355 1.387355 257.998452 109.369806 257.998451 252.217807v45.86529a22.940903 22.940903 0 0 1-45.86529 0v-45.86529c0-117.198452-91.730581-205.691871-213.570064-206.402065-124.663742 0.710194-222.174968 91.136-222.174968 206.402065v114.671483a22.874839 22.874839 0 0 1-22.874839 22.940904zM731.268129 804.335484a137.761032 137.761032 0 0 1-114.754064-135.630452 137.794065 137.794065 0 0 1 137.612387-137.612387 137.794065 137.794065 0 0 1 137.595871 137.612387 137.827097 137.827097 0 0 1-114.754065 135.630452 23.122581 23.122581 0 0 1 0.082581 1.915871v68.806193c0 12.667871-10.24 22.957419-22.924387 22.990452a22.990452 22.990452 0 0 1-22.940904-22.990452v-68.806193a23.122581 23.122581 0 0 1 0.082581-1.915871z m22.858323-227.377549a91.86271 91.86271 0 0 0-91.747097 91.747097 91.879226 91.879226 0 0 0 91.747097 91.796645 91.86271 91.86271 0 0 0 91.73058-91.747096c0-50.555871-41.224258-91.796645-91.73058-91.796646z" ></path></symbol><symbol id="icon-quanping" viewBox="0 0 1024 1024"><path d="M358.4 768H426.666667v85.333333H213.333333v-213.333333h85.333334v68.266667l128-128 59.733333 59.733333-128 128z m345.6 0l-128-128 59.733333-59.733333 132.266667 132.266666V640h85.333333v213.333333h-213.333333v-85.333333h64zM358.4 298.666667l128 128-59.733333 59.733333-128-128V426.666667H213.333333V213.333333h213.333334v85.333334H358.4z m345.6 0H640V213.333333h213.333333v213.333334h-85.333333V354.133333l-132.266667 132.266667-59.733333-59.733333 128-128z" fill="#444444" ></path></symbol><symbol id="icon-dpt" viewBox="0 0 1024 1024"><path d="M79 370.4l342.7 202.2c28.1 16.9 59 25.3 89.9 25.3s61.8-8.4 89.9-25.3l342.7-202.2c19.7-11.2 22.5-42.1 0-56.2L593 89.5c-25.3-16.9-53.4-25.3-81.5-25.3s-56.2 8.4-81.5 25.3L79 314.2c-22.5 14.1-19.6 45 0 56.2z m382-236c14-8.4 30.9-14 50.6-14 19.7 0 36.5 5.6 50.6 14l317.4 205-309 182.6c-19.7 11.2-39.3 16.9-61.8 16.9s-42.1-5.6-61.8-16.9L138 339.5l323-205.1zM76.2 541.7L421.7 758c28.1 16.9 59 25.3 89.9 25.3s61.8-8.4 89.9-25.3L947 541.7c8.4-5.6 14-14 14-22.5 0-22.5-25.3-36.5-42.1-22.5L573.4 713.1c-19.7 11.2-39.3 16.9-61.8 16.9s-42.1-5.6-61.8-16.9L104.3 494c-16.9-14-42.1 0-42.1 22.5 0 11.2 5.6 19.6 14 25.2z m842.7 132L573.4 890c-19.7 11.2-39.3 16.9-61.8 16.9s-42.1-5.6-61.8-16.9L104.3 673.7c-16.9-14-42.1 0-42.1 22.5 0 8.4 5.6 19.7 14 22.5L421.7 935c28.1 16.9 59 25.3 89.9 25.3s61.8-8.4 89.9-25.3L947 718.7c8.4-5.6 14-14 14-22.5 0-22.5-25.3-36.5-42.1-22.5z" ></path></symbol><symbol id="icon-ptm" viewBox="0 0 1024 1024"><path d="M426.666667 170.666667l85.333333 85.333333h341.333333a85.333333 85.333333 0 0 1 85.333334 85.333333v426.666667a85.333333 85.333333 0 0 1-85.333334 85.333333H170.666667a85.333333 85.333333 0 0 1-85.333334-85.333333V256a85.333333 85.333333 0 0 1 85.333334-85.333333h256z m426.666666 170.666666H170.666667v426.666667h682.666666V341.333333z m-392.533333 247.466667a102.826667 102.826667 0 0 1 102.4 102.4v34.133333H256v-34.133333a102.826667 102.826667 0 0 1 102.4-102.4h102.4z m273.066667-68.266667v68.266667H597.333333v-68.266667h136.533334zM409.6 384a85.333333 85.333333 0 1 1 0 170.666667 85.333333 85.333333 0 0 1 0-170.666667z m392.533333 34.133333v68.266667H597.333333V418.133333h204.8z" ></path></symbol><symbol id="icon-root" viewBox="0 0 1024 1024"><path d="M560 832h233.6v-140.8h-233.6V832z m35.2-112h160v76.8h-160v-76.8zM560 412.8v48h-185.6v48h185.6v48h233.6V416h-233.6z m195.2 108.8h-160v-76.8h160v76.8z" ></path><path d="M371.2 691.2V320h92.8V179.2H233.6V320h92.8v419.2c0 25.6 22.4 48 48 48h185.6v-48h-140.8c-25.6 0-48-22.4-48-48z" ></path></symbol><symbol id="icon-org" viewBox="0 0 1024 1024"><path d="M642.465374 52.211681c6.510503 0 19.531509 6.510503 19.531509 19.563423v169.624136c0 6.542417-6.478589 19.563423-19.531509 19.563423h-254.45216c-6.510503-6.510503-13.05292-13.05292-13.05292-26.073926V65.264601c0-6.574331 6.542417-19.563423 19.595338-19.563423h247.909742v6.510503z m0-52.211681h-254.45216c-39.158761 0-65.232687 32.584429-65.232687 65.264601v169.592221c0 32.584429 26.073926 65.264601 65.232687 65.264602h254.45216c39.126847 0 65.200773-32.680172 65.200773-65.264602V65.264601c0-32.648258-26.105841-65.264601-65.200773-65.264601M224.931497 815.440504v163.17746H61.817864v-163.17746h163.113633z m19.595337-52.179767H48.764944c-19.563423 0-32.584429 12.989092-32.584429 32.584429v195.76189c0 19.595338 13.05292 32.648258 32.584429 32.648258h195.729976c19.563423 0 32.584429-13.05292 32.584429-32.648258V795.845166c0.031914-19.595338-19.563423-32.584429-32.552515-32.584429m345.663031 52.179767v163.17746h-163.049804v-163.17746h163.049804z m13.116748-52.179767h-195.729975c-19.563423 0-32.584429 12.989092-32.58443 32.584429v195.76189c0 19.595338 13.05292 32.648258 32.58443 32.648258h195.729975c19.563423 0 32.584429-13.05292 32.58443-32.648258V795.845166c0.031914-19.595338-12.989092-32.584429-32.58443-32.584429m358.811694 52.179767v163.17746h-163.081718v-163.17746h163.081718z m13.084835-52.179767h-195.793805c-19.563423 0-32.552515 12.989092-32.552515 32.584429v195.76189c0 19.595338 12.957178 32.648258 32.552515 32.648258h195.793805c19.531509 0 32.584429-13.05292 32.584429-32.648258V795.845166c0-19.595338-13.05292-32.584429-32.584429-32.584429m-469.777473-417.438135c-13.05292 0-19.531509 6.446675-19.53151 19.563423v326.163436c0 12.989092 6.478589 19.531509 19.53151 19.531509s19.563423-6.542417 19.563423-19.531509v-326.163436c6.542417-13.116749-6.510503-19.563423-19.563423-19.563423" ></path><path d="M857.726859 456.660724H140.1673c-13.084835 0-19.595338 13.021006-19.595337 19.563424 0 6.606246 6.510503 26.169669 19.595337 26.169669h717.559559c13.021006 0 19.531509-13.05292 19.531509-19.563424 0-6.606246-6.510503-26.169669-19.531509-26.169669z" ></path><path d="M140.1673 456.660724c-13.084835 0-19.595338 13.021006-19.595337 19.563424v182.740883c0 13.05292 13.05292 19.531509 19.595337 19.53151 6.478589 0 19.563423-13.05292 19.563424-19.53151v-176.134638c-0.031914-13.148663-6.574331-26.169669-19.563424-26.169669zM857.726859 456.660724c-13.05292 0-19.563423 13.021006-19.563423 19.563424v182.740883c0 13.05292 13.05292 19.531509 19.563423 19.53151s19.531509-13.05292 19.531509-19.53151v-176.134638c0-13.148663-6.510503-26.169669-19.531509-26.169669z" ></path></symbol><symbol id="icon-func" viewBox="0 0 1024 1024"><path d="M63.3 151.3h896v174.2h-896V151.3zM63.3 425.1h896v174.2h-896V425.1zM63.3 698.9h896v174.2h-896V698.9z" ></path></symbol><symbol id="icon-flow" viewBox="0 0 1024 1024"><path d="M983.964 953.145 846.307 953.145c-21.721 0-39.33-17.575-39.33-39.249L806.977 796.141c0-21.677 17.609-39.249 39.33-39.249l39.33 0L885.637 580.263c0-21.679-17.607-39.251-39.33-39.251L531.664 541.012l0 215.88 39.332 0c21.721 0 39.33 17.572 39.33 39.249l0 117.756c0 21.674-17.609 39.249-39.33 39.249L433.34 953.146c-21.723 0-39.33-17.575-39.33-39.249L394.01 796.141c0-21.677 17.607-39.249 39.33-39.249l39.33 0 0-215.88L177.693 541.012c-21.721 0-39.33 17.572-39.33 39.251l0 176.629 39.33 0c21.721 0 39.33 17.572 39.33 39.249l0 117.756c0 21.674-17.609 39.249-39.33 39.249L40.036 953.146c-21.721 0-39.33-17.575-39.33-39.249L0.706 796.141c0-21.677 17.609-39.249 39.33-39.249l39.33 0L79.366 560.636c0-43.355 35.219-78.502 78.663-78.502L472.67 482.134 472.67 266.257l-39.33 0c-21.723 0-39.33-17.575-39.33-39.253L394.01 109.252c0-21.679 17.607-39.251 39.33-39.251l137.657 0c21.721 0 39.33 17.572 39.33 39.251l0 117.751c0 21.679-17.609 39.253-39.33 39.253l-39.332 0 0 215.878 334.309 0c43.441 0 78.66 35.147 78.66 78.502l0 196.255 39.33 0c21.721 0 39.33 17.572 39.33 39.249l0 117.756C1023.294 935.571 1005.684 953.145 983.964 953.145z" ></path></symbol><symbol id="icon-search" viewBox="0 0 1024 1024"><path d="M447.325002 129.919978c-178.868807 0-323.872319 145.003512-323.872319 323.874365s145.003512 323.874365 323.872319 323.874365c178.870854 0 323.874365-145.003512 323.874365-323.874365S626.195855 129.919978 447.325002 129.919978zM447.325002 713.712071c-143.31915 0-259.915681-116.598578-259.915681-259.917728s116.596532-259.917728 259.915681-259.917728 259.917728 116.598578 259.917728 259.917728S590.643128 713.712071 447.325002 713.712071z" ></path><path d="M891.573945 840.061734 748.236376 696.699606c-13.43601 16.625656-28.371164 31.91385-44.338834 46.099944l142.458549 142.481062c6.246261 6.246261 14.427594 9.368368 22.60995 9.368368s16.363689-3.123131 22.60995-9.368368C904.065444 872.789113 904.065444 852.553233 891.573945 840.061734z" ></path></symbol><symbol id="icon-clock" viewBox="0 0 1024 1024"><path d="M512 128C264.576 128 64 328.576 64 576s200.576 448 448 448 448-200.576 448-448S759.424 128 512 128zM512 936c-198.824 0-360-161.178-360-360 0-198.824 161.176-360 360-360 198.822 0 360 161.176 360 360C872 774.822 710.822 936 512 936zM934.784 287.174C950.826 259.122 960 226.632 960 192c0-106.04-85.96-192-192-192-61.818 0-116.802 29.222-151.92 74.596C747.964 101.832 861.286 179.794 934.784 287.174zM407.92 74.596C372.804 29.222 317.818 0 256 0 149.96 0 64 85.96 64 192c0 34.632 9.174 67.122 25.216 95.174C162.716 179.794 276.038 101.832 407.92 74.596zM448 320l64 0 0 320-64 0L448 320zM512 576l192 0 0 64-192 0L512 576z" ></path></symbol><symbol id="icon-arrow-right" viewBox="0 0 1024 1024"><path d="M595.712 526.112l-205.44-197.28c-8.864-10.432-7.504-25.968 3.024-34.688 10.528-8.736 26.24-7.36 35.088 3.072l205.424 197.28c8.864 10.432 7.504 25.968-3.008 34.688S604.56 536.56 595.712 526.112z" ></path><path d="M390.256 695.68l205.44-197.28c8.864-10.432 24.56-11.808 35.088-3.088 10.528 8.736 11.872 24.272 3.024 34.688l-205.44 197.28c-8.848 10.432-24.56 11.808-35.088 3.072C382.752 721.664 381.392 706.128 390.256 695.68z" ></path></symbol><symbol id="icon-table" viewBox="0 0 1024 1024"><path d="M63.29814 120.015398l0 783.435039 895.355061 0L958.653201 120.015398 63.29814 120.015398 63.29814 120.015398zM399.05616 623.651916 399.05616 455.773418l223.840044 0 0 167.879522L399.05616 623.652939 399.05616 623.651916zM622.896204 679.611415l0 167.881568L399.05616 847.492984 399.05616 679.611415 622.896204 679.611415 622.896204 679.611415zM622.896204 231.933373l0 167.881568L399.05616 399.814941 399.05616 231.933373 622.896204 231.933373 622.896204 231.933373zM343.09666 231.933373l0 167.881568L119.257639 399.814941 119.257639 231.933373 343.09666 231.933373 343.09666 231.933373zM119.257639 455.773418l223.840044 0 0 167.879522L119.257639 623.652939 119.257639 455.773418 119.257639 455.773418zM678.855704 455.773418l223.840044 0 0 167.879522L678.855704 623.652939 678.855704 455.773418 678.855704 455.773418zM678.855704 399.814941 678.855704 231.933373l223.840044 0 0 167.881568L678.855704 399.814941 678.855704 399.814941zM119.257639 679.611415l223.840044 0 0 167.881568L119.257639 847.492984 119.257639 679.611415 119.257639 679.611415zM678.855704 847.492984 678.855704 679.611415l223.840044 0 0 167.881568L678.855704 847.492984 678.855704 847.492984zM678.855704 847.492984" ></path></symbol><symbol id="icon-arrow-right-circle" viewBox="0 0 1024 1024"><path d="M792.797779 792.08607c71.14434-71.800279 115.542526-170.937161 115.542526-280.334733 0-109.398596-44.398186-208.534454-115.542526-280.334733-71.713298-71.222111-170.742732-115.669416-280.025695-115.669416l0 0c-109.282962 0-208.303186 44.447305-280.026718 115.669416l0 0c-71.704089 71.800279-116.111484 170.936137-116.111484 280.334733l0 0 0 0 0 0c0 109.397572 44.407396 208.534454 116.111484 280.334733 71.724555 71.78186 170.743756 116.227118 280.026718 116.227118l0 0 0 0C622.055047 908.313188 721.084481 863.868953 792.797779 792.08607L792.797779 792.08607zM829.228503 194.956204c80.8197 81.484849 130.909515 193.140858 130.909515 316.796156 0 123.634832-50.088792 235.888452-130.909515 316.795133-81.387635 80.906681-192.947454 131.043568-316.456419 131.043568-123.500778 0-235.637742-50.135864-316.447209-131.043568C115.495966 747.640812 65.416384 635.386168 65.416384 511.751337c0-123.655298 50.079582-235.310284 130.908492-316.796156C277.13332 114.049522 389.271306 63.893192 512.772085 63.893192l0 0C636.281049 63.893192 747.840868 114.049522 829.228503 194.956204L829.228503 194.956204zM434.239474 272.448112c4.551666-4.572132 10.803044-7.408737 18.210757-7.408737l0 0c3.412726 0 6.828522 0.559748 9.66308 1.717108 3.415796 1.697665 6.27082 3.39533 8.547677 5.691629l0 0 200.913892 221.054605c2.276856 2.856048 3.984754 5.130857 5.691629 8.565073 1.137916 2.855024 1.706875 6.250354 1.706875 9.68457 0 3.413749-0.568958 6.829546-1.706875 10.263761-1.706875 2.834558-3.414773 5.689582-5.691629 7.966439L470.659965 751.055584l0 0c-2.276856 2.854001-5.131881 4.552689-8.547677 5.690606-2.835581 1.137916-6.250354 2.276856-9.66308 2.276856-7.407714 0-13.659091-3.413749-18.210757-7.966439l0 0c-4.552689-4.553713-7.407714-10.82351-7.407714-18.2302 0-3.414773 0.559748-6.847965 1.697665-9.683547 1.157359-2.856048 3.433192-5.711072 5.710049-7.987928l184.401824-203.402573L434.239474 308.907489c-2.276856-2.275833-4.552689-5.131881-5.710049-7.966439-1.137916-3.433192-1.697665-6.848988-1.697665-10.262738C426.830737 283.84979 429.685761 277.000801 434.239474 272.448112L434.239474 272.448112z" ></path></symbol><symbol id="icon-help" viewBox="0 0 1024 1024"><path d="M827.833737 196.140169C743.469304 111.750153 631.311875 65.290005 511.998465 65.290005c-119.311363 0-231.512794 46.479591-315.882344 130.850164C111.749642 280.491299 65.290517 392.668171 65.290517 511.998977c0 119.335922 46.459125 231.495398 130.830721 315.859831 84.364433 84.390016 196.566888 130.850164 315.878251 130.850164 119.31341 0 231.470839-46.479591 315.840388-130.850164 84.409458-84.346013 130.869606-196.523909 130.869606-315.859831C958.70846 392.668171 912.249335 280.510742 827.833737 196.140169zM540.442284 767.464299c-7.460925 7.460925-17.929348 11.796674-28.443819 11.796674-10.511401 0-20.985964-4.335748-28.442796-11.796674-7.414877-7.460925-11.731182-17.886369-11.731182-28.398794 0-10.536984 4.316306-21.005406 11.731182-28.42233 7.456832-7.455809 17.930371-11.778254 28.442796-11.778254 10.513448 0 20.982894 4.322445 28.443819 11.778254 7.372921 7.416923 11.733229 17.886369 11.733229 28.42233C552.175513 749.57793 547.815205 760.003374 540.442284 767.464299zM591.52573 531.633153c-34.028001 27.720342-50.951439 59.438741-50.951439 95.230921l-0.352017 10.951423-0.088004 0.082888c-1.1328 15.400758-13.95585 27.484981-29.661553 27.484981-16.403598 0-29.750581-13.305027-29.750581-29.731138 0-0.89437 0.085958-1.787716 0.172939-2.681062l-0.044002-0.067538c0-34.765805 3.317559-59.96165 9.990538-75.600839 6.675026-15.591093 21.901823-33.979906 45.543266-55.136761l24.170492-21.552875c32.500205-29.228695 48.724725-58.066487 48.724725-86.529749 0-24.428366-8.724709-44.452421-26.215058-60.068074-17.495466-15.600303-39.785122-23.427572-66.74924-23.427572-69.705572 0-104.824417 39.96113-105.35142 119.897717 0 0.086981 0.042979 0.155543 0.042979 0.218988 0 0.112564-0.042979 0.243547-0.042979 0.352017l0 1.196245-0.044002 0c-0.780783 16.908088-14.740726 30.40959-31.884175 30.40959-17.144472 0-31.104415-13.500479-31.890314-30.40959L347.057879 432.252725c0-53.896514 15.440667-96.449679 46.328142-127.684054 30.794353-31.280424 72.850192-46.87561 125.985366-46.87561 46.89403 0 84.848457 12.978593 113.902166 38.934754 29.140691 25.932626 43.666522 59.697637 43.666522 101.248985C676.940075 440.437128 648.498302 485.060441 591.52573 531.633153z" ></path></symbol><symbol id="icon-mark" viewBox="0 0 1024 1024"><path d="M677.720857 371.147018c0-91.64321-74.28589-165.928077-165.928077-165.928077s-165.928077 74.28589-165.928077 165.928077S420.149571 537.075095 511.79278 537.075095 677.720857 462.789205 677.720857 371.147018zM382.737496 371.147018c0-71.26202 57.776891-129.055285 129.055285-129.055285 71.279417 0 129.055285 57.794287 129.055285 129.055285 0 71.278393-57.775868 129.055285-129.055285 129.055285C440.513364 500.202303 382.737496 442.425412 382.737496 371.147018zM806.776142 371.147018c0-162.903184-132.061758-294.984385-294.984385-294.984385S216.808396 208.242811 216.808396 371.147018s294.984385 516.222161 294.984385 516.222161S806.776142 534.050202 806.776142 371.147018zM511.79278 113.035426c142.540414 0 258.110569 115.552759 258.110569 258.111592 0 142.558833-258.110569 460.912461-258.110569 460.912461S253.681188 513.704828 253.681188 371.147018C253.681188 228.588185 369.251344 113.035426 511.79278 113.035426zM642.187573 769.187547c-8.074909 11.081383-15.950274 21.710464-23.52274 31.794124 78.722946 9.06854 132.801609 27.838022 132.801609 49.513694 0 30.53648-107.304911 55.3097-239.674685 55.3097-132.36875 0-239.674685-24.77322-239.674685-55.3097 0-21.675672 54.079686-40.444131 132.802632-49.513694-7.572466-10.083659-15.448854-20.712741-23.52274-31.794124-86.981027 15.531741-146.152684 46.113247-146.152684 81.307817 0 50.916647 123.81698 92.182492 276.5485 92.182492s276.547477-41.265846 276.547477-92.182492C788.340257 815.300794 729.1686 784.719288 642.187573 769.187547z" ></path></symbol><symbol id="icon-money" viewBox="0 0 1024 1024"><path d="M700.416 278.528c-8.192-8.192-20.48-8.192-28.672 0l-159.744 159.744L352.256 278.528c-8.192-8.192-20.48-8.192-28.672 0s-8.192 20.48 0 28.672l139.264 139.264L335.872 446.464c-12.288 0-20.48 8.192-20.48 20.48s8.192 20.48 20.48 20.48L491.52 487.424l0 106.496L335.872 593.92c-12.288 0-20.48 8.192-20.48 20.48s8.192 20.48 20.48 20.48L491.52 634.88l0 192.512c0 12.288 8.192 20.48 20.48 20.48s20.48-8.192 20.48-20.48l0-192.512 155.648 0c12.288 0 20.48-8.192 20.48-20.48s-8.192-20.48-20.48-20.48L532.48 593.92l0-106.496 155.648 0c12.288 0 20.48-8.192 20.48-20.48s-8.192-20.48-20.48-20.48l-126.976 0 139.264-139.264C708.608 299.008 708.608 286.72 700.416 278.528z" ></path><path d="M512 86.016C278.528 86.016 86.016 278.528 86.016 512s188.416 425.984 425.984 425.984c233.472 0 425.984-188.416 425.984-425.984S745.472 86.016 512 86.016zM512 897.024c-212.992 0-385.024-172.032-385.024-385.024s172.032-385.024 385.024-385.024c212.992 0 385.024 172.032 385.024 385.024S724.992 897.024 512 897.024z" ></path></symbol><symbol id="icon-analyse" viewBox="0 0 1024 1024"><path d="M819.2 864 819.2 403.2 691.2 460.8 691.2 864 595.2 864 595.2 492.8 505.6 537.6 467.2 499.2 467.2 864 396.8 864 396.8 448 268.8 518.4 268.8 864 160 864 160 128 128 128 128 864 128 896 160 896 896 896 896 864Z" ></path><path d="M435.2 364.8 512 499.2 544 480 544 480 793.6 332.8 844.8 416 883.2 256 723.2 217.6 774.4 300.8 524.8 448 448 313.6 448 313.6 448 313.6 192 467.2 211.2 499.2Z" ></path></symbol><symbol id="icon-dealt" viewBox="0 0 1024 1024"><path d="M372.674303 617.841583 208.583061 617.841583l0 55.112202 158.683069 0C367.966071 654.182256 369.801882 635.789351 372.674303 617.841583L372.674303 617.841583z" ></path><path d="M208.583061 403.864164l353.807095 0c29.618575-13.797237 61.45363-22.044062 94.675266-23.715121l0-31.399127L208.583061 348.749916 208.583061 403.864164 208.583061 403.864164z" ></path><path d="M158.507572 769.490445c-20.847817 0-29.540803-8.698103-29.540803-29.526477l0-593.077573c0-20.828374 8.694009-29.52443 29.540803-29.52443l548.628222 0c20.826328 0 29.54592 8.696056 29.54592 29.52443l0 237.22489c23.485901 4.300956 33.708729 11.326976 54.92596 20.72502L791.607674 107.216907c0-24.76708-20.083407-44.847417-44.847417-44.847417L118.888226 62.369489c-24.769127 0-44.852534 20.081361-44.852534 44.847417l0 672.728658c0 24.758893 20.083407 44.847417 44.852534 44.847417l283.845697 0c-11.346419-21.157879-20.263509-31.520901-26.356274-55.302537L178.973696 769.490445 158.507572 769.490445z" ></path><path d="M208.583061 214.205617l448.481338 0 0 55.113225-448.481338 0 0-55.113225Z" ></path><path d="M679.400103 420.235017c-148.146085 0-268.25358 120.091122-268.25358 268.258697 0 148.144038 120.112612 268.257673 268.25358 268.257673 148.164504 0 268.25665-120.114658 268.25665-268.257673C947.656753 540.326139 827.564607 420.235017 679.400103 420.235017zM679.87901 905.252479C560.885895 905.252479 464.4311 808.801776 464.4311 689.810708c0-118.999255 96.455819-215.45712 215.44791-215.45712 119.001301 0 215.452004 96.457866 215.452004 215.45712C895.32999 808.801776 798.875195 905.252479 679.87901 905.252479z" ></path><path d="M208.583061 483.293191l0 55.113225 197.292412 0c8.973372-19.528775 19.332301-37.97387 30.9325-55.113225L208.583061 483.293191z" ></path><path d="M681.543929 714.512297 681.543929 589.929884 627.394658 589.929884 627.394658 769.682827 807.143509 769.682827 807.143509 714.512297Z" ></path></symbol><symbol id="icon-change" viewBox="0 0 1024 1024"><path d="M920.865573 637.722376H102.113167c-2.795673 0-5.514597 0.320295-8.133237 0.911766a36.95875 36.95875 0 0 0-18.426675 10.094916c-12.353352 12.419867-14.18814 31.399127-5.52176 45.776579a37.767162 37.767162 0 0 0 8.416693 9.992585l172.344207 173.278485c14.516622 14.59337 38.053688 14.59337 52.572356 0 14.516622-14.598486 14.516622-38.262442 0-52.856835L192.145693 713.098087h728.718857c20.554128 0 37.217646-16.873296 37.217646-37.685297 0-20.820188-16.662495-37.690414-37.216623-37.690414zM102.113167 386.467959h818.752406a36.920888 36.920888 0 0 0 7.80271-0.836041 36.917818 36.917818 0 0 0 19.774369-10.360976c14.517645-14.59644 14.517645-38.262442 0-52.855811L773.199419 146.225339c-14.515598-14.595416-38.054711-14.595416-52.571333 0-14.515598 14.594393-14.515598 38.261419 0 52.856835l111.408369 112.010073H102.113167c-20.554128 0-37.2156 16.873296-37.2156 37.689391 0 20.814048 16.660448 37.686321 37.2156 37.686321z" ></path></symbol><symbol id="icon-bell" viewBox="0 0 1024 1024"><path d="M861.40397037 717.4674963c8.49540741-0.24272592 16.99081482 1.45635555 25.12213333 6.79632592-29.4912-18.93262222-48.90927408-51.94334815-48.90927407-89.68722963V424.01185185c0-154.25232592-111.53256297-283.01842963-260.56628148-314.69416296V101.79318518c0-39.3216-31.7970963-70.99733333-70.99733333-70.99733333s-70.99733333 31.7970963-70.99733334 70.99733333v7.52450371c-149.03371852 31.67573333-260.56628148 160.32047408-260.56628148 314.69416296V634.57659259c0 37.74388148-19.53943703 70.75460741-48.90927408 89.68722963 8.25268148-5.33997037 16.62672592-7.16041482 25.12213333-6.79632592-26.09303703 0.12136297-47.21019259 21.11715555-47.21019258 47.33155555s21.11715555 47.33155555 47.33155555 47.33155556h710.33742223c26.2144 0 47.33155555-21.11715555 47.33155555-47.33155556 0.12136297-25.97167408-20.99579259-47.21019259-47.08882963-47.33155555zM506.17457778 978.03377778c65.41463703 0 118.45025185-53.03561482 118.45025185-118.45025186H387.72432592c0 65.41463703 52.91425185 118.45025185 118.45025186 118.45025186z" ></path></symbol><symbol id="icon-time" viewBox="0 0 1024 1024"><path d="M508.8 992C246.4 992 32 777.6 32 512S246.4 32 508.8 32s476.8 214.4 476.8 480c3.2 265.6-211.2 480-476.8 480z m0-896C281.6 96 96 281.6 96 512s185.6 416 412.8 416c227.2 0 412.8-185.6 412.8-416 3.2-230.4-182.4-416-412.8-416z" fill="#212121" ></path><path d="M704 576h-224c-19.2 0-32-12.8-32-32v-224c0-19.2 12.8-32 32-32s32 12.8 32 32v192h192c19.2 0 32 12.8 32 32s-12.8 32-32 32z" fill="#212121" ></path></symbol><symbol id="icon-skin" viewBox="0 0 1024 1024"><path d="M511.57333333 85.86666667c-311.25333333 0-426.34666667 272-426.34666666 424.53333333s110.72 427.30666667 417.38666666 427.30666667c0 0 76.16 1.38666667 76.16-67.41333334 0-68.69333333-34.24-46.72-34.24-96.10666666 0-49.49333333 34.24-71.46666667 50.66666667-71.46666667 16.42666667 0 124.8 8.21333333 185.17333333-15.25333333 60.26666667-23.14666667 157.54666667-97.38666667 157.54666667-223.78666667 0-111.25333333-115.09333333-377.81333333-426.34666667-377.81333333zM251.62666667 511.89333333c-19.62666667 0-38.50666667-7.78666667-52.48-21.76-13.86666667-13.97333333-21.65333333-32.85333333-21.65333334-52.48-0.74666667-26.98666667 13.12-52.16 36.37333334-65.92 23.25333333-13.76 52.05333333-13.76 75.30666666 0 23.25333333 13.76 37.12 38.93333333 36.37333334 65.92 0.21333333 40.85333333-32.96 74.13333333-73.92 74.24z m139.62666666-183.68c-19.62666667 0-38.50666667-7.78666667-52.37333333-21.76-13.86666667-13.86666667-21.65333333-32.74666667-21.65333333-52.48 0-40.85333333 33.17333333-74.02666667 74.02666666-74.02666666 40.85333333 0 74.02666667 33.17333333 74.02666667 74.02666666 0.10666667 41.06666667-33.06666667 74.24-74.02666667 74.24z m237.44 0c-40.85333333 0-74.02666667-33.17333333-74.02666666-74.24-0.74666667-26.98666667 13.12-52.16 36.37333333-65.92a74.34666667 74.34666667 0 0 1 75.30666667 0c23.25333333 13.76 37.12 38.93333333 36.37333333 65.92 0.10666667 41.06666667-33.06666667 74.24-74.02666667 74.24z m141.01333334 183.68c-40.85333333 0-74.02666667-33.17333333-74.02666667-74.24-0.74666667-26.98666667 13.12-52.16 36.37333333-65.92 23.25333333-13.76 52.05333333-13.76 75.30666667 0 23.25333333 13.76 37.12 38.93333333 36.37333333 65.92 0.10666667 19.62666667-7.68 38.50666667-21.54666666 52.48-13.97333333 13.86666667-32.74666667 21.76-52.48 21.76z m0 0" ></path></symbol><symbol id="icon-mail" viewBox="0 0 1024 1024"><path d="M1021.407 146.857L512.645 574.783 3.909 146.857zM0.007 183.402L339.886 471.24 0.007 876.743z" ></path><path d="M39.354 877.144L363.529 494.4 512.54 616.772l149.274-126.179 324.157 386.551zM1023.993 876.743L684.122 471.24l339.871-287.838z" ></path></symbol><symbol id="icon-email" viewBox="0 0 1024 1024"><path d="M1024.00144 220.64v574.32c0 5.76-0.736 11.456-1.824 17.072v0.064l-0.224 0.944A84.336 84.336 0 0 1 939.29744 880H101.08944a102.72 102.72 0 0 1-82.512-40.832 95.904 95.904 0 0 1-18.56-57.248V236.256a74.08 74.08 0 0 1 52.064-70.784l0.736-0.208 0.208-0.08A127.648 127.648 0 0 1 89.66544 160h883.424c1.328 0.512 2.64 1.232 4.032 1.44 25.52 4.32 40.592 19.152 45.344 44.496v0.08c0.88 4.816 1.536 9.712 1.536 14.608zM512.00144 591.232l451.152-379.472c-66.272-3.888-888.48-1.728-897.84 2.368L512.00144 591.2v0.064z m133.856-45.152l-114.112 96.144c-13.76 11.52-25.6 11.664-39.2 0.208l-48.272-40.752-63.84-53.936L81.02544 825.28l1.024 2.304h873.328L645.79344 546.08h0.064z m-304.864-31.68L51.79344 270.032v512.48l289.28-268.096h-0.08z m344.352-1.648l287.088 260.96V270.944L685.34544 512.768z" ></path></symbol><symbol id="icon-meeting" viewBox="0 0 1059 1024"><path d="M434.093791 101.281952m-101.281953 0a101.281952 101.281952 0 1 0 202.563905 0 101.281952 101.281952 0 1 0-202.563905 0Z" fill="#2c2c2c" ></path><path d="M434.093791 174.941554a172.310854 172.310854 0 0 1 172.310854 172.310854V460.372511H263.098286V347.252408a172.310854 172.310854 0 0 1 170.995505-172.310854z" fill="#2c2c2c" ></path><path d="M822.12205 101.281952m-101.281952 0a101.281952 101.281952 0 1 0 202.563905 0 101.281952 101.281952 0 1 0-202.563905 0Z" fill="#2c2c2c" ></path><path d="M822.12205 174.941554a172.310854 172.310854 0 0 1 172.310854 172.310854V460.372511H649.811196V347.252408a172.310854 172.310854 0 0 1 172.310854-172.310854z" fill="#2c2c2c" ></path><path d="M434.093791 632.683365m-101.281953 0a101.281952 101.281952 0 1 0 202.563905 0 101.281952 101.281952 0 1 0-202.563905 0Z" fill="#2c2c2c" ></path><path d="M434.093791 706.342967a172.310854 172.310854 0 0 1 172.310854 172.310854v112.462428H263.098286v-112.462428a172.310854 172.310854 0 0 1 170.995505-172.310854z" fill="#2c2c2c" ></path><path d="M822.12205 632.683365m-101.281952 0a101.281952 101.281952 0 1 0 202.563905 0 101.281952 101.281952 0 1 0-202.563905 0Z" fill="#2c2c2c" ></path><path d="M822.12205 706.342967a172.310854 172.310854 0 0 1 172.310854 172.310854v112.462428H649.811196v-112.462428a172.310854 172.310854 0 0 1 172.310854-172.310854z" fill="#2c2c2c" ></path><path d="M1026.65898 958.232498H282.828537a226.240206 226.240206 0 0 1 0-451.822736h743.830443a32.226076 32.226076 0 0 0 31.568401-32.88375 31.568401 31.568401 0 0 0-31.568401-32.883751H282.828537A287.403982 287.403982 0 0 0 0.02828 731.992293a288.061657 288.061657 0 0 0 282.800257 292.007707h743.830443a32.883751 32.883751 0 0 0 0-65.767502z" fill="#2c2c2c" ></path></symbol><symbol id="icon-today" viewBox="0 0 1024 1024"><path d="M197.667 361c2.11 0 7.389-2.111 15.833-6.333 78.112-35.89 155.166-85.5 231.167-148.834 2.11-2.11 5.277-4.222 9.5-6.333 42.222-40.111 77.055-53.833 104.5-41.167 6.333 4.223 25.333 19 57 44.334 54.889 46.444 138.277 100.277 250.166 161.5 29.556 16.889 38 38 25.334 63.333-12.667 33.778-47.5 34.833-104.5 3.167-73.89-35.89-150.944-89.722-231.167-161.5-12.667-8.445-28.5-6.334-47.5 6.333l-3.167 3.167c-82.333 71.778-167.833 125.61-256.5 161.5-35.889 14.778-61.222 11.61-76-9.5C157.555 403.222 166 380 197.667 361z m47.5 174.167h525.666c59.112 0 86.556 22.166 82.334 66.5-63.334 183.667-240.666 281.833-532 294.5-38-2.111-57-19-57-50.667 4.222-23.222 26.388-36.944 66.5-41.167 192.112-8.444 324.055-60.166 395.833-155.166 10.556-16.89 9.5-26.39-3.167-28.5H245.167c-27.445 0-42.223-13.722-44.334-41.167 2.111-27.445 16.89-42.222 44.334-44.333zM546 500.333c-14.778-12.666-40.11-45.388-76-98.166-19-23.223-15.833-43.278 9.5-60.167 25.333-14.778 49.611-11.611 72.833 9.5 33.778 33.778 60.167 69.666 79.167 107.667 6.333 27.444-2.111 47.5-25.333 60.166-25.334 10.556-45.39 4.223-60.167-19z" ></path></symbol><symbol id="icon-user2" viewBox="0 0 1024 1024"><path d="M512 486.10923498A220.07150577 220.07150577 0 1 1 512 45.96622222a220.07150577 220.07150577 0 0 1 0 440.14301276zM45.96622222 926.25224651v-25.89076503a362.47071645 362.47071645 0 0 1 362.47071646-362.47071646h207.12612264a362.47071645 362.47071645 0 0 1 362.47071646 362.47071646v25.89076503a51.78153127 51.78153127 0 0 1-51.78153127 51.78153127H97.74775349a51.78153127 51.78153127 0 0 1-51.78153127-51.78153127z" ></path></symbol><symbol id="icon-listadd" viewBox="0 0 1024 1024"><path d="M775.7 188c15.9 0 30.9 6.3 42.3 17.7 11.4 11.4 17.7 26.4 17.7 42.3v527.6c0 15.9-6.3 30.9-17.7 42.3s-26.4 17.7-42.3 17.7H248c-15.9 0-30.9-6.3-42.3-17.7-11.4-11.4-17.7-26.4-17.7-42.3V248c0-15.9 6.3-30.9 17.7-42.3 11.4-11.4 26.4-17.7 42.3-17.7h527.7m0-60H248c-66 0-120 54-120 120v527.6c0 66 54 120 120 120h527.6c66 0 120-54 120-120V248c0.1-66-53.9-120-119.9-120z" ></path><path d="M542.6 480.9l0.9-151.6c0.1-17.2-13.9-31.3-31.2-31.5-8.4 0-16.2 3.2-22.2 9.1l-0.1 0.1c-5.9 5.9-9.1 13.7-9.2 22l-0.8 151.7-150.5-0.2c-17.2 0-31.3 14-31.4 31.2-0.1 17.2 13.9 31.3 31.3 31.4l150.3 0.2-0.7 150.6c-0.1 17.3 13.9 31.4 31.1 31.5 8.4 0.1 16.4-3.2 22.4-9.2 5.8-5.8 9.1-13.6 9.2-22l0.8-150.7 153.1 0.2c8.4 0 16.3-3.3 22.2-9.2 5.9-5.9 9.1-13.7 9.2-22.1 0.1-17.2-13.9-31.3-31.3-31.4l-153.1-0.1z" ></path></symbol><symbol id="icon-sun" viewBox="0 0 1024 1024"><path d="M512 246.518519c-147.949037 0-265.481481 117.532444-265.481481 265.481481 0 147.930074 117.532444 265.481481 265.481481 265.481481s265.481481-117.551407 265.481481-265.481481c0-147.949037-117.532444-265.481481-265.481481-265.481481z m0 455.111111c-105.509926 0-189.62963-84.119704-189.62963-189.62963s84.119704-189.62963 189.62963-189.62963 189.62963 84.119704 189.62963 189.62963-84.119704 189.62963-189.62963 189.62963zM283.591111 229.091556L170.799407 116.299852 116.698074 170.420148l112.772741 112.772741 54.120296-54.101333zM905.860741 170.401185l-54.101334-54.101333-112.791703 112.772741 54.120296 54.120296 112.772741-112.791704zM549.925926 0h-75.851852v170.666667h75.851852V0zM170.666667 474.074074H0v75.851852h170.666667v-75.851852zM116.698074 851.361185l54.101333 54.120296 112.791704-112.791703-54.120296-54.101334-112.772741 112.772741zM853.333333 474.074074v75.851852h170.666667v-75.851852h-170.666667z m-114.365629 318.615704l112.791703 112.772741 54.101334-54.101334-112.772741-112.772741-54.120296 54.101334zM474.074074 1024h75.851852v-170.666667h-75.851852v170.666667z" ></path></symbol><symbol id="icon-arrow-down" viewBox="0 0 1024 1024"><path d="M497.888 595.712l197.28000001-205.44c10.432-8.864 25.968-7.504 34.68799999 3.024 8.736 10.528 7.36 26.24-3.072 35.08799999l-197.28 205.42400001c-10.432 8.864-25.968 7.504-34.688-3.008S487.44 604.56 497.888 595.712z" ></path><path d="M328.32 390.256l197.28 205.44c10.432 8.864 11.808 24.56 3.088 35.088-8.736 10.528-24.272 11.872-34.688 3.024l-197.28-205.44c-10.432-8.848-11.808-24.56-3.072-35.088C302.33599999 382.752 317.872 381.392 328.32 390.256z" ></path></symbol><symbol id="icon-chart" viewBox="0 0 1026 1024"><path d="M972.067982 946.325604H49.546624V23.804245c0-12.881128-10.913178-23.804245-23.794307-23.804245A23.784367 23.784367 0 0 0 1.948072 23.804245v945.749134c0 13.447659 10.356586 24.360837 23.804245 24.360838h946.315665c13.159424 0 23.804245-10.923117 23.804246-24.360838-0.009939-12.314597-10.644821-23.227775-23.804246-23.227775z m-532.797655-39.478273h176.380017c22.12453 0 39.756569-17.920273 39.756569-39.478272V92.960797c0-21.557999-17.632038-39.199977-39.756569-39.199977H439.270327a39.130403 39.130403 0 0 0-39.190037 39.199977v774.418201c0 21.54806 17.353742 39.468334 39.190037 39.468333z m39.199977-774.129966h97.990003V827.900725H478.470304V132.717365zM136.335213 906.847331h176.668252c21.557999 0 39.478273-17.920273 39.478273-39.478272V594.390519c0-22.12453-17.920273-39.756569-39.478273-39.756569H136.335213c-21.836295 0-39.190038 17.632038-39.190037 39.756569v272.97854c0 21.557999 17.363681 39.478273 39.190037 39.478272z m39.756569-273.256835h97.43341v194.310229h-97.43341V633.590496z m566.113659 273.256835H918.873693c21.557999 0 39.190038-17.920273 39.190038-39.478272V303.779941c0-21.557999-17.632038-39.756569-39.190038-39.756568H742.205441c-21.826356 0-39.756569 18.198569-39.756568 39.756568v563.589118c0 21.557999 17.930212 39.478273 39.756568 39.478272z m39.756569-563.589117h97.155115V827.900725h-97.155115V343.258214z" ></path></symbol><symbol id="icon-set" viewBox="0 0 1024 1024"><path d="M836.738547 417.715637h-44.439118c-4.323469 0-8.172123-2.732228-9.526981-6.901177l-8.515954-25.335015c-1.207501-3.605108-0.228197-7.53665 2.413979-10.261715l29.756721-29.747511c23.26282-23.246447 23.26282-61.012585 0-84.268242l-43.557028-43.533492c-11.615549-11.622712-26.852578-17.398252-42.089607-17.398252s-30.5549 5.77554-42.187845 17.398252l-29.65746 29.747511a10.095939 10.095939 0 0 1-7.144724 2.961448 10.857279 10.857279 0 0 1-3.197832-0.480954l-25.350364-8.417717c-4.077875-1.362021-6.900154-5.212722-6.900154-9.543353v-44.577265c0-32.872688-26.706245-59.5687-59.57791-59.5687h-69.52854c-32.871665 0-59.57791 26.697035-59.57791 59.5687v44.421722c0 4.330632-2.724041 8.181333-6.900154 9.535167l-25.254173 8.499582c-1.043772 0.407276-2.169409 0.562818-3.214205 0.562818-2.642177 0-5.13802-1.035586-7.06286-2.961448l-29.740348-29.747511c-11.631922-11.622712-26.868951-17.398252-42.104956-17.398252-15.237029 0-30.53955 5.77554-42.186822 17.398252l-43.525306 43.533492c-23.26282 23.255657-23.26282 61.020772 0 84.268242l29.740348 29.747511c2.724041 2.725064 3.605108 6.655584 2.39863 10.342556l-8.41874 25.335015c-1.353834 4.087085-5.203512 6.901177-9.526981 6.901177h-44.503586c-32.888038 0-59.59326 26.697035-59.59326 59.5687v69.512167c0 32.879851 26.705222 59.57791 59.59326 59.57791h44.405349c4.339842 0 8.18952 2.724041 9.559727 6.891968l8.417716 25.335014c1.207501 3.605108 0.228197 7.53665-2.413979 10.260692l-29.756721 29.747511c-23.246447 23.255657-23.246447 61.013609 0 84.187401l43.557028 43.532469c11.615549 11.623735 26.852578 17.398252 42.186822 17.398252 15.302521 0 30.474059-5.774517 42.089607-17.398252l29.756721-29.747511a10.101055 10.101055 0 0 1 7.128351-2.968612c1.044796 0 2.170432 0.170892 3.214205 0.571005l25.336038 8.41874c4.094248 1.362021 6.900154 5.212722 6.900153 9.543354v44.421722c0 32.863479 26.705222 59.560514 59.577911 59.560514h69.527516c32.889061 0 59.57791-26.697035 59.57791-59.560514v-44.421722c0-4.330632 2.741437-8.181333 6.900154-9.543354l25.416879-8.41874c1.044796-0.325411 2.169409-0.480954 3.214205-0.480954 2.6432 0 5.122671 1.044796 7.04751 2.961448l29.756721 29.755698c11.630898 11.615549 26.851555 17.390066 42.186821 17.390066 15.302521 0 30.474059-5.77554 42.089607-17.390066l43.557029-43.541679c23.24747-23.173792 23.24747-61.012585 0-84.186377l-29.919427-29.903054c-2.724041-2.733251-3.686972-6.656607-2.413979-10.350742l8.41874-25.335015c1.370207-4.087085 5.220908-6.901177 9.559726-6.901177h44.421722c32.871665 0 59.57791-26.697035 59.577911-59.560514v-69.520353c0.078795-32.789801-26.708292-59.486836-59.498093-59.486836z m26.134217 129.008212c0 14.429641-11.712763 26.134217-26.134217 26.134217h-44.439118c-18.760273 0-35.351136 11.95017-41.208541 29.740348l-8.417716 25.343202c-5.285377 15.71082-1.289366 32.708959 10.506284 44.4954l29.755698 29.747511c4.878101 4.885264 7.602142 11.460006 7.602142 18.524912 0 6.972808-2.724041 13.547551-7.602142 18.515702l-43.557028 43.541679c-4.89345 4.885264-11.45182 7.610328-18.434862 7.610328s-13.556761-2.724041-18.531051-7.610328l-29.756721-29.747511c-8.172123-8.181333-19.086707-12.749372-30.702256-12.749372-4.666276 0-9.233292 0.717338-13.800308 2.251274l-25.498744 8.40953c-17.798365 5.938246-29.740348 22.537296-29.740348 41.215704v44.421722c0 14.430664-11.712763 26.13524-26.150589 26.13524h-69.52854c-14.436804 0-26.15059-11.704576-26.15059-26.13524v-44.421722c0-18.760273-11.941983-35.359322-29.740348-41.215704l-25.269523-8.40953c-4.469801-1.533936-9.136078-2.251274-13.866823-2.251274-11.550057 0-22.36538 4.494361-30.800493 12.749372l-29.740348 29.747511c-4.894474 4.885264-11.469216 7.610328-18.451234 7.610328-6.965645 0-13.540388-2.724041-18.515702-7.610328l-43.540656-43.541679c-4.89345-4.885264-7.618515-11.460006-7.618514-18.515702 0-6.982018 2.725064-13.556761 7.618514-18.442024l29.919427-29.829376c11.615549-11.704576 15.627932-28.703739 10.408047-44.421722l-8.41874-25.416879c-5.938246-17.790178-22.529109-29.740348-41.208541-29.740348h-44.503586c-14.4542 0-26.15059-11.704576-26.15059-26.134217v-69.520354c0-14.429641 11.69639-26.142403 26.15059-26.142403h44.405349c18.777669 0 35.368532-11.94096 41.224914-29.740348l8.499581-25.415856c5.13802-15.637142 1.125637-32.627095-10.571776-44.422746l-29.756721-29.739324c-4.89345-4.894474-7.618515-11.469216-7.618515-18.524912 0-6.973832 2.725064-13.548574 7.618515-18.523889l43.540655-43.533493c4.894474-4.894474 11.550057-7.618515 18.515702-7.618514 6.982018 0 13.556761 2.724041 18.451234 7.618514l29.740348 29.747512c8.18952 8.173147 19.086707 12.749372 30.735002 12.749372 4.730745 0 9.461489-0.807389 13.784958-2.251274l25.497721-8.335852c17.799388-5.930059 29.658484-22.529109 29.658483-41.208541v-44.503587c0-14.429641 11.712763-26.134217 26.15059-26.134217h69.52854c14.436804 0 26.15059 11.704576 26.15059 26.134217v44.421723c0 18.760273 11.941983 35.359322 29.740348 41.20854l25.433252 8.499581c4.405333 1.443885 9.054213 2.243087 13.704116 2.243088 11.468193 0 22.381753-4.486174 30.800494-12.741186l29.65746-29.748534c4.894474-4.885264 11.550057-7.618515 18.532075-7.618515s13.540388 2.732228 18.532075 7.618515l43.524283 43.533492c4.894474 4.894474 7.634888 11.469216 7.634888 18.524912 0 6.973832-2.740414 13.548574-7.634888 18.523889l-29.821189 29.821189c-11.712763 11.704576-15.72617 28.785603-10.425444 44.421722l8.41874 25.335015c5.938246 17.798365 22.529109 29.739325 41.22389 29.739325h44.421723c14.437827 0 26.151613 11.713786 26.151613 26.142403v69.438489h0.068561z m-350.84053-168.372755c-73.689303 0-133.674489 59.968813-133.674489 133.648906 0 73.680093 59.985186 133.657092 133.674489 133.657092 73.703629 0 133.689838-59.977 133.689838-133.657092 0-73.680093-59.986209-133.648906-133.689838-133.648906z m0 233.872538c-55.238069 0-100.230796-44.977377-100.230795-100.222609 0-55.238069 44.992727-100.222609 100.230795-100.222609 55.253418 0 100.247168 44.98454 100.247169 100.222609 0 55.244208-44.99375 100.222609-100.247169 100.222609z" ></path></symbol><symbol id="icon-set-fill" viewBox="0 0 1024 1024"><path d="M925.6 443.1h-41.4c-19 0-39.1-14.8-44.7-32.9l-23.7-57.7c-9-16.7-5.3-41.3 8-54.7l29.4-29.3c13.4-13.5 13.4-35.4 0-48.8L804.4 171c-13.4-13.4-35.3-13.4-48.8 0l-29.3 29.3c-13.4 13.4-38 17.1-54.8 8.1l-57.6-23.7C595.8 179.1 581 159 581 140V98.5c0-18.9-15.6-34.5-34.4-34.5h-68.9c-19 0-34.5 15.6-34.5 34.5v41.4c0 19-14.8 39.1-32.9 44.7l-57.7 23.7c-16.7 9-41.3 5.3-54.7-8.1l-29.4-29.3c-13.4-13.4-35.3-13.4-48.7 0l-48.7 48.7c-13.4 13.4-13.4 35.4 0 48.8l29.3 29.3c13.5 13.4 17.1 38 8.1 54.7l-23.7 57.7c-5.6 18.1-25.7 32.9-44.7 32.9H98.8c-19 0-34.5 15.5-34.5 34.5v68.9c0 19 15.5 34.5 34.5 34.5h41.3c19 0 39 14.9 44.6 32.9l23.8 57.7c8.9 16.7 5.3 41.4-8.1 54.8l-29.3 29.3c-13.3 13.4-13.3 35.3 0 48.8l48.8 48.8c13.4 13.4 35.3 13.4 48.7 0l29.4-29.3c13.3-13.4 38-17 54.6-8l57.8 23.7c18.1 5.6 32.9 25.7 32.9 44.7v41.2c0 18.9 15.5 34.5 34.5 34.5h68.9c18.9 0 34.4-15.5 34.4-34.5v-41.2c0-19 14.9-39.1 32.9-44.7l57.7-23.7c16.7-9 41.4-5.4 54.8 8l29.2 29.3c13.4 13.4 35.4 13.4 48.8 0l48.8-48.8c13.4-13.4 13.4-35.4 0-48.8l-29.4-29.3c-13.3-13.3-17-38-8-54.8l23.7-57.7c5.7-18.1 25.8-32.9 44.7-32.9h41.4c18.9 0 34.4-15.5 34.4-34.5v-69c-0.1-18.8-15.6-34.3-34.5-34.3m-241.2 68.8c0 95.2-77.1 172.3-172.3 172.3-95.2 0-172.3-77.1-172.3-172.3 0-95.1 77.1-172.3 172.3-172.3 95.2 0.1 172.3 77.2 172.3 172.3" ></path></symbol><symbol id="icon-close" viewBox="0 0 1024 1024"><path d="M777.856 280.192l-33.92-33.952-231.872 231.872-231.84-231.872-33.984 33.888 231.872 231.904-231.84 231.84 33.888 33.984 231.904-231.904 231.84 231.872 33.952-33.888-231.872-231.904z" ></path></symbol><symbol id="icon-arrow-left" viewBox="0 0 1024 1024"><path d="M428.288 497.888l205.44 197.28000001c8.864 10.432 7.504 25.968-3.024 34.68799999-10.528 8.736-26.24 7.36-35.08799999-3.072l-205.42400001-197.28c-8.864-10.432-7.504-25.968 3.008-34.688S419.44 487.44 428.288 497.888z" ></path><path d="M633.744 328.32l-205.44 197.28c-8.864 10.432-24.56 11.808-35.088 3.088-10.528-8.736-11.872-24.272-3.024-34.688l205.44-197.28c8.848-10.432 24.56-11.808 35.088-3.072C641.248 302.33599999 642.608 317.872 633.744 328.32z" ></path></symbol><symbol id="icon-user1" viewBox="0 0 1024 1024"><path d="M515.541 7.083C235.182 7.083 7.083 235.203 7.083 515.54S235.203 1024 515.54 1024 1024 795.88 1024 515.541 795.9 7.083 515.541 7.083z m0 974.781c-257.132 0-466.301-209.19-466.301-466.323C49.24 258.41 258.409 49.22 515.541 49.22s466.302 209.19 466.302 466.322S772.674 981.864 515.54 981.864z m99.033-457.687c47.751-31.969 79.231-86.399 79.231-148.188 0-98.437-79.805-178.242-178.242-178.242-98.438 0-178.243 79.805-178.243 178.242 0 61.81 31.48 116.22 79.252 148.188-100.266 39.52-171.244 137.17-171.244 251.454 0 0.234 0 0.446 0.021 0.659 0 0.043-0.021 0.106-0.021 0.149 0 15.612 12.655 28.246 28.268 28.246 15.59 0 21.886-12.634 21.886-28.246 0-0.34-0.085-0.66-0.106-1.021 0.106-118.006 102.16-219.995 220.208-219.995 118.112 0 220.208 102.095 220.208 220.208 0 0.148-1.468 29.054 21.972 29.054 15.506 0 28.076-12.57 28.076-28.055 0-0.064-0.021-0.127-0.021-0.212 0-0.256 0.021-0.51 0.021-0.787-0.042-114.284-71.042-211.934-171.266-251.454z m-99.033-13.443c-74.402 0-134.724-60.321-134.724-134.724 0-74.423 60.322-134.723 134.724-134.723 74.424 0 134.724 60.321 134.724 134.723s-60.321 134.724-134.724 134.724z" fill="" ></path></symbol><symbol id="icon-user" viewBox="0 0 1024 1024"><path d="M512 1022.1056c-282.3168 0-511.232-228.864-511.232-511.0784S229.632 0 512 0c282.3168 0 511.232 228.8128 511.232 511.0272 0 282.2656-228.864 511.0784-511.232 511.0784z m0-926.2592a415.2832 415.2832 0 0 0-415.3856 415.232c0 107.2128 41.0624 204.6464 107.8272 278.3232 60.16-29.1328 38.0416-4.9152 116.736-37.2736 80.5888-33.1264 99.6352-44.6464 99.6352-44.6464l0.768-76.288s-30.1568-22.8864-39.5264-94.72c-18.8928 5.4272-25.088-22.016-26.2144-39.424-1.024-16.896-10.9568-69.4784 12.0832-64.7168-4.7104-35.1744-8.0896-66.8672-6.4-83.6608 5.7344-58.88 62.976-120.5248 151.0912-124.9792 103.68 4.4544 144.7424 66.048 150.528 124.928 1.6384 16.8448-2.048 48.5376-6.7584 83.6096 23.04-4.6592 13.0048 47.872 11.8784 64.7168-1.024 17.408-7.3728 44.7488-26.2144 39.3728-9.4208 71.7824-39.5776 94.464-39.5776 94.464l0.7168 75.9296s19.0976 10.8032 99.6352 43.9296c78.6944 32.3584 56.576 9.5744 116.736 38.7584a413.184 413.184 0 0 0 107.776-278.3744A415.232 415.232 0 0 0 512 95.7952z" fill="#4EB0FA" ></path></symbol></svg>',function(h){var c=(c=document.getElementsByTagName("script"))[c.length-1],l=c.getAttribute("data-injectcss"),c=c.getAttribute("data-disable-injectsvg");if(!c){var a,t,o,i,m,s=function(c,l){l.parentNode.insertBefore(c,l)};if(l&&!h.__iconfont__svg__cssinject__){h.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(c){console&&console.log(c)}}a=function(){var c,l=document.createElement("div");l.innerHTML=h._iconfont_svg_string_3042769,(l=l.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",l=l,(c=document.body).firstChild?s(l,c.firstChild):c.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(a,0):(t=function(){document.removeEventListener("DOMContentLoaded",t,!1),a()},document.addEventListener("DOMContentLoaded",t,!1)):document.attachEvent&&(o=a,i=h.document,m=!1,z(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,v())})}function v(){m\|\|(m=!0,o())}function z(){try{i.documentElement.doScroll("left")}catch(c){return void setTimeout(z,50)}v()}}(window); !function(c){var l,a,h,t,o,i='<svg><symbol id="icon-flow" viewBox="0 0 1024 1024"><path d="M983.964 953.145 846.307 953.145c-21.721 0-39.33-17.575-39.33-39.249L806.977 796.141c0-21.677 17.609-39.249 39.33-39.249l39.33 0L885.637 580.263c0-21.679-17.607-39.251-39.33-39.251L531.664 541.012l0 215.88 39.332 0c21.721 0 39.33 17.572 39.33 39.249l0 117.756c0 21.674-17.609 39.249-39.33 39.249L433.34 953.146c-21.723 0-39.33-17.575-39.33-39.249L394.01 796.141c0-21.677 17.607-39.249 39.33-39.249l39.33 0 0-215.88L177.693 541.012c-21.721 0-39.33 17.572-39.33 39.251l0 176.629 39.33 0c21.721 0 39.33 17.572 39.33 39.249l0 117.756c0 21.674-17.609 39.249-39.33 39.249L40.036 953.146c-21.721 0-39.33-17.575-39.33-39.249L0.706 796.141c0-21.677 17.609-39.249 39.33-39.249l39.33 0L79.366 560.636c0-43.355 35.219-78.502 78.663-78.502L472.67 482.134 472.67 266.257l-39.33 0c-21.723 0-39.33-17.575-39.33-39.253L394.01 109.252c0-21.679 17.607-39.251 39.33-39.251l137.657 0c21.721 0 39.33 17.572 39.33 39.251l0 117.751c0 21.679-17.609 39.253-39.33 39.253l-39.332 0 0 215.878 334.309 0c43.441 0 78.66 35.147 78.66 78.502l0 196.255 39.33 0c21.721 0 39.33 17.572 39.33 39.249l0 117.756C1023.294 935.571 1005.684 953.145 983.964 953.145z" ></path></symbol><symbol id="icon-func" viewBox="0 0 1024 1024"><path d="M63.3 151.3h896v174.2h-896V151.3zM63.3 425.1h896v174.2h-896V425.1zM63.3 698.9h896v174.2h-896V698.9z" ></path></symbol><symbol id="icon-org" viewBox="0 0 1024 1024"><path d="M642.465374 52.211681c6.510503 0 19.531509 6.510503 19.531509 19.563423v169.624136c0 6.542417-6.478589 19.563423-19.531509 19.563423h-254.45216c-6.510503-6.510503-13.05292-13.05292-13.05292-26.073926V65.264601c0-6.574331 6.542417-19.563423 19.595338-19.563423h247.909742v6.510503z m0-52.211681h-254.45216c-39.158761 0-65.232687 32.584429-65.232687 65.264601v169.592221c0 32.584429 26.073926 65.264601 65.232687 65.264602h254.45216c39.126847 0 65.200773-32.680172 65.200773-65.264602V65.264601c0-32.648258-26.105841-65.264601-65.200773-65.264601M224.931497 815.440504v163.17746H61.817864v-163.17746h163.113633z m19.595337-52.179767H48.764944c-19.563423 0-32.584429 12.989092-32.584429 32.584429v195.76189c0 19.595338 13.05292 32.648258 32.584429 32.648258h195.729976c19.563423 0 32.584429-13.05292 32.584429-32.648258V795.845166c0.031914-19.595338-19.563423-32.584429-32.552515-32.584429m345.663031 52.179767v163.17746h-163.049804v-163.17746h163.049804z m13.116748-52.179767h-195.729975c-19.563423 0-32.584429 12.989092-32.58443 32.584429v195.76189c0 19.595338 13.05292 32.648258 32.58443 32.648258h195.729975c19.563423 0 32.584429-13.05292 32.58443-32.648258V795.845166c0.031914-19.595338-12.989092-32.584429-32.58443-32.584429m358.811694 52.179767v163.17746h-163.081718v-163.17746h163.081718z m13.084835-52.179767h-195.793805c-19.563423 0-32.552515 12.989092-32.552515 32.584429v195.76189c0 19.595338 12.957178 32.648258 32.552515 32.648258h195.793805c19.531509 0 32.584429-13.05292 32.584429-32.648258V795.845166c0-19.595338-13.05292-32.584429-32.584429-32.584429m-469.777473-417.438135c-13.05292 0-19.531509 6.446675-19.53151 19.563423v326.163436c0 12.989092 6.478589 19.531509 19.53151 19.531509s19.563423-6.542417 19.563423-19.531509v-326.163436c6.542417-13.116749-6.510503-19.563423-19.563423-19.563423" ></path><path d="M857.726859 456.660724H140.1673c-13.084835 0-19.595338 13.021006-19.595337 19.563424 0 6.606246 6.510503 26.169669 19.595337 26.169669h717.559559c13.021006 0 19.531509-13.05292 19.531509-19.563424 0-6.606246-6.510503-26.169669-19.531509-26.169669z" ></path><path d="M140.1673 456.660724c-13.084835 0-19.595338 13.021006-19.595337 19.563424v182.740883c0 13.05292 13.05292 19.531509 19.595337 19.53151 6.478589 0 19.563423-13.05292 19.563424-19.53151v-176.134638c-0.031914-13.148663-6.574331-26.169669-19.563424-26.169669zM857.726859 456.660724c-13.05292 0-19.563423 13.021006-19.563423 19.563424v182.740883c0 13.05292 13.05292 19.531509 19.563423 19.53151s19.531509-13.05292 19.531509-19.53151v-176.134638c0-13.148663-6.510503-26.169669-19.531509-26.169669z" ></path></symbol><symbol id="icon-root" viewBox="0 0 1024 1024"><path d="M560 832h233.6v-140.8h-233.6V832z m35.2-112h160v76.8h-160v-76.8zM560 412.8v48h-185.6v48h185.6v48h233.6V416h-233.6z m195.2 108.8h-160v-76.8h160v76.8z" ></path><path d="M371.2 691.2V320h92.8V179.2H233.6V320h92.8v419.2c0 25.6 22.4 48 48 48h185.6v-48h-140.8c-25.6 0-48-22.4-48-48z" ></path></symbol><symbol id="icon-dpt" viewBox="0 0 1024 1024"><path d="M79 370.4l342.7 202.2c28.1 16.9 59 25.3 89.9 25.3s61.8-8.4 89.9-25.3l342.7-202.2c19.7-11.2 22.5-42.1 0-56.2L593 89.5c-25.3-16.9-53.4-25.3-81.5-25.3s-56.2 8.4-81.5 25.3L79 314.2c-22.5 14.1-19.6 45 0 56.2z m382-236c14-8.4 30.9-14 50.6-14 19.7 0 36.5 5.6 50.6 14l317.4 205-309 182.6c-19.7 11.2-39.3 16.9-61.8 16.9s-42.1-5.6-61.8-16.9L138 339.5l323-205.1zM76.2 541.7L421.7 758c28.1 16.9 59 25.3 89.9 25.3s61.8-8.4 89.9-25.3L947 541.7c8.4-5.6 14-14 14-22.5 0-22.5-25.3-36.5-42.1-22.5L573.4 713.1c-19.7 11.2-39.3 16.9-61.8 16.9s-42.1-5.6-61.8-16.9L104.3 494c-16.9-14-42.1 0-42.1 22.5 0 11.2 5.6 19.6 14 25.2z m842.7 132L573.4 890c-19.7 11.2-39.3 16.9-61.8 16.9s-42.1-5.6-61.8-16.9L104.3 673.7c-16.9-14-42.1 0-42.1 22.5 0 8.4 5.6 19.7 14 22.5L421.7 935c28.1 16.9 59 25.3 89.9 25.3s61.8-8.4 89.9-25.3L947 718.7c8.4-5.6 14-14 14-22.5 0-22.5-25.3-36.5-42.1-22.5z" ></path></symbol><symbol id="icon-ptm" viewBox="0 0 1024 1024"><path d="M426.666667 170.666667l85.333333 85.333333h341.333333a85.333333 85.333333 0 0 1 85.333334 85.333333v426.666667a85.333333 85.333333 0 0 1-85.333334 85.333333H170.666667a85.333333 85.333333 0 0 1-85.333334-85.333333V256a85.333333 85.333333 0 0 1 85.333334-85.333333h256z m426.666666 170.666666H170.666667v426.666667h682.666666V341.333333z m-392.533333 247.466667a102.826667 102.826667 0 0 1 102.4 102.4v34.133333H256v-34.133333a102.826667 102.826667 0 0 1 102.4-102.4h102.4z m273.066667-68.266667v68.266667H597.333333v-68.266667h136.533334zM409.6 384a85.333333 85.333333 0 1 1 0 170.666667 85.333333 85.333333 0 0 1 0-170.666667z m392.533333 34.133333v68.266667H597.333333V418.133333h204.8z" ></path></symbol><symbol id="icon-quanping" viewBox="0 0 1024 1024"><path d="M358.4 768H426.666667v85.333333H213.333333v-213.333333h85.333334v68.266667l128-128 59.733333 59.733333-128 128z m345.6 0l-128-128 59.733333-59.733333 132.266667 132.266666V640h85.333333v213.333333h-213.333333v-85.333333h64zM358.4 298.666667l128 128-59.733333 59.733333-128-128V426.666667H213.333333V213.333333h213.333334v85.333334H358.4z m345.6 0H640V213.333333h213.333333v213.333334h-85.333333V354.133333l-132.266667 132.266667-59.733333-59.733333 128-128z" fill="#444444" ></path></symbol><symbol id="icon-quanxian" viewBox="0 0 1552 1024"><path d="M1011.811097 1015.560258H507.375484a160.718452 160.718452 0 0 1-160.536774-160.536774V556.923871A160.718452 160.718452 0 0 1 507.375484 396.387097h504.501677a160.668903 160.668903 0 0 1 160.487226 160.536774V855.04a160.718452 160.718452 0 0 1-160.536774 160.536774zM507.375484 442.252387a114.737548 114.737548 0 0 0-114.671484 114.671484V855.04c0 63.256774 51.41471 114.721032 114.671484 114.721032h504.501677c63.207226 0 114.621935-51.464258 114.621936-114.721032V556.923871a114.737548 114.737548 0 0 0-114.621936-114.671484H507.375484zM1246.967742 214.709677a74.322581 74.322581 0 1 1 0-148.645161 74.322581 74.322581 0 0 1 0 148.645161z m0-33.032258a41.290323 41.290323 0 1 0 0-82.580645 41.290323 41.290323 0 0 0 0 82.580645zM322.064516 74.322581a33.032258 33.032258 0 1 1 0-66.064516 33.032258 33.032258 0 0 1 0 66.064516z m0-16.516129a16.516129 16.516129 0 1 0 0-33.032258 16.516129 16.516129 0 0 0 0 33.032258zM173.419355 875.354839a57.806452 57.806452 0 1 1 0-115.612904 57.806452 57.806452 0 0 1 0 115.612904z m0-33.032258a24.774194 24.774194 0 1 0 0-49.548387 24.774194 24.774194 0 0 0 0 49.548387z" ></path><path d="M194.064516 425.290323v-33.032258a12.387097 12.387097 0 1 1 24.774194 0v33.032258h33.032258a12.387097 12.387097 0 1 1 0 24.774193h-33.032258v33.032258a12.387097 12.387097 0 1 1-24.774194 0v-33.032258h-33.032258a12.387097 12.387097 0 1 1 0-24.774193h33.032258zM1419.792516 726.115097v-23.585032a8.852645 8.852645 0 0 1 17.70529 0v23.585032h23.585033a8.852645 8.852645 0 0 1 0 17.70529h-23.585033v23.585032a8.852645 8.852645 0 0 1-17.70529 0v-23.585032h-23.585032a8.852645 8.852645 0 0 1 0-17.70529h23.585032zM1274.698323 415.859613v-14.170839a5.301677 5.301677 0 0 1 10.603354 0v14.170839h14.170839a5.301677 5.301677 0 0 1 0 10.603355h-14.170839v14.170838a5.301677 5.301677 0 0 1-10.603354 0v-14.170838h-14.170839a5.301677 5.301677 0 0 1 0-10.603355h14.170839zM23.122581 974.451613h1126.4a23.122581 23.122581 0 1 1 0 46.245161H23.122581a23.122581 23.122581 0 1 1 0-46.245161zM1245.316129 974.451613h135.432258a23.122581 23.122581 0 1 1 0 46.245161h-135.432258a23.122581 23.122581 0 1 1 0-46.245161zM1476.541935 974.451613h52.851613a23.122581 23.122581 0 1 1 0 46.245161h-52.851613a23.122581 23.122581 0 1 1 0-46.245161z" ></path><path d="M501.908645 439.378581A22.874839 22.874839 0 0 1 478.967742 416.437677v-114.671483C478.967742 161.213935 595.802839 50.935742 745.571097 49.548387h2.824258c147.307355 1.387355 257.998452 109.369806 257.998451 252.217807v45.86529a22.940903 22.940903 0 0 1-45.86529 0v-45.86529c0-117.198452-91.730581-205.691871-213.570064-206.402065-124.663742 0.710194-222.174968 91.136-222.174968 206.402065v114.671483a22.874839 22.874839 0 0 1-22.874839 22.940904zM731.268129 804.335484a137.761032 137.761032 0 0 1-114.754064-135.630452 137.794065 137.794065 0 0 1 137.612387-137.612387 137.794065 137.794065 0 0 1 137.595871 137.612387 137.827097 137.827097 0 0 1-114.754065 135.630452 23.122581 23.122581 0 0 1 0.082581 1.915871v68.806193c0 12.667871-10.24 22.957419-22.924387 22.990452a22.990452 22.990452 0 0 1-22.940904-22.990452v-68.806193a23.122581 23.122581 0 0 1 0.082581-1.915871z m22.858323-227.377549a91.86271 91.86271 0 0 0-91.747097 91.747097 91.879226 91.879226 0 0 0 91.747097 91.796645 91.86271 91.86271 0 0 0 91.73058-91.747096c0-50.555871-41.224258-91.796645-91.73058-91.796646z" ></path></symbol><symbol id="icon-closeOther" viewBox="0 0 1024 1024"><path d="M512 962C263.9 962 62 760.1 62 512S263.9 62 512 62s450 201.9 450 450-201.9 450-450 450z m0-835.7c-212.7 0-385.7 173-385.7 385.7s173 385.7 385.7 385.7 385.7-173 385.7-385.7-173-385.7-385.7-385.7z" ></path><path d="M807.5 839.6c-8.2 0-16.4-3.1-22.7-9.4l-591-590.9c-12.6-12.6-12.6-32.9 0-45.5s32.9-12.6 45.5 0l590.9 590.9c12.6 12.6 12.6 32.9 0 45.5-6.3 6.2-14.5 9.4-22.7 9.4z" ></path></symbol><symbol id="icon-close-circle" viewBox="0 0 1024 1024"><path d="M512 1016C233.6 1016 8 790.4 8 512S233.6 8 512 8 1016 233.6 1016 512 790.4 1016 512 1016z m0-960C260.8 56 56 260.8 56 512S260.8 968 512 968 968 763.2 968 512 763.2 56 512 56z" ></path><path d="M548.8 512l195.2-195.2c9.6-9.6 9.6-25.6 0-36.8l-1.6-1.6c-9.6-9.6-25.6-9.6-35.2 0L512 475.2 316.8 280c-9.6-9.6-25.6-9.6-35.2 0l-1.6 1.6c-9.6 9.6-9.6 25.6 0 36.8L475.2 512 280 707.2c-9.6 9.6-9.6 25.6 0 36.8l1.6 1.6c9.6 9.6 25.6 9.6 35.2 0L512 548.8l195.2 195.2c9.6 9.6 25.6 9.6 35.2 0l1.6-1.6c9.6-9.6 9.6-25.6 0-36.8L548.8 512z" ></path></symbol><symbol id="icon-closeAll" viewBox="0 0 1024 1024"><path d="M40.960024 0.000026h788.47996a10.270719 10.270719 0 0 1 10.24 10.239999v71.679997a10.270719 10.270719 0 0 1-10.24 10.239999H92.160021v737.279963a10.269439 10.269439 0 0 1-10.239999 10.24H10.240025a10.269439 10.269439 0 0 1-10.239999-10.24V40.960024A40.916478 40.916478 0 0 1 40.960024 0.000026z" ></path><path d="M983.039976 163.840017H204.800015a40.916478 40.916478 0 0 0-40.959998 40.959998v778.239961a40.916478 40.916478 0 0 0 40.959998 40.959998h778.239961a40.916478 40.916478 0 0 0 40.959998-40.959998V204.800015a40.916478 40.916478 0 0 0-40.959998-40.959998z m-51.199997 767.999962H256.000013V256.000013h675.839966z" ></path><path d="M414.813445 773.119987h66.591997a18.440959 18.440959 0 0 0 13.905919-6.42432l98.136315-116.648954 98.136315 116.648954A18.090239 18.090239 0 0 0 705.49119 773.119987h66.591997a8.96 8.96 0 0 0 6.89664-14.764799L640.707834 593.919996l138.384633-164.435192A8.96 8.96 0 0 0 772.195827 414.720005h-66.591997a18.442239 18.442239 0 0 0-13.905919 6.42432l-98.248955 116.648954-98.136315-116.648954A18.091519 18.091519 0 0 0 481.406722 414.720005h-66.593277a8.96 8.96 0 0 0-6.89664 14.764799L546.186238 593.919996 407.916805 758.355188A8.96 8.96 0 0 0 414.813445 773.119987z" ></path></symbol><symbol id="icon-refresh" viewBox="0 0 1024 1024"><path d="M929.536 208c-17.664 0-32 14.336-32 32l0 45.024C819.712 152.896 676.448 64 512 64 264.576 64 64 264.576 64 512s200.576 448 448 448c149.728 0 281.6-73.952 362.88-186.816 0.256-0.256 0.416-0.544 0.64-0.8 0.992-1.408 2.208-2.656 3.2-4.064-0.128-0.064-0.192-0.16-0.32-0.224 3.52-5.184 6.08-11.072 6.08-17.792 0.032-17.856-14.432-32.288-32.224-32.288-12.608 0-23.264 7.424-28.576 17.984l-0.224 0c-69.728 96.768-183.072 160-311.456 160C299.936 896 128 724.064 128 512S299.936 128 512 128c148.544 0 276.832 84.608 340.672 208l-51.136 0c-17.664 0-32 14.336-32 32s14.336 32 32 32l128 0c17.664 0 32-14.336 32-32l0-128C961.536 222.336 947.2 208 929.536 208z" ></path></symbol><symbol id="icon-tree" viewBox="0 0 1024 1024"><path d="M177.697 741.043h185.982c12.353 0.196 22.195 10.36 22.008 22.705-0.195 12.074-9.935 21.804-22.008 21.999h-208.22c-12.328 0.068-22.382-9.859-22.458-22.177V338.968h-22.237c-12.404 0-22.449-10.045-22.449-22.449V227.35c0-12.396 10.045-22.45 22.449-22.45h89.178c12.395 0.017 22.423 10.063 22.44 22.45v89.177c0 12.396-10.045 22.441-22.44 22.441h-22.238v163.831h185.992c12.335-0.017 22.348 9.977 22.365 22.321 0.007 12.344-9.986 22.356-22.331 22.373H177.705v193.55h-0.008zM311.696 227.35c-0.008-12.387 10.037-22.45 22.432-22.45h565.771c12.386 0.017 22.432 10.063 22.45 22.45v89.177c0 12.396-10.045 22.441-22.45 22.441H334.146c-12.396 0-22.449-10.045-22.458-22.441V227.35h0.008z m163.823 253.202c-0.025-12.378 9.985-22.432 22.365-22.457H899.9c12.386 0.025 22.432 10.062 22.45 22.457v89.168c0 12.354-10.021 22.384-22.382 22.384H498.035c-12.396 0.032-22.483-9.986-22.517-22.384v-89.168h0.001z m0 238.255c0-12.371 10.011-22.448 22.517-22.448H899.9c12.386 0.015 22.432 10.061 22.45 22.448v89.169c0.031 12.362-9.943 22.417-22.297 22.449H498.035c-12.396 0.033-22.483-9.978-22.517-22.373v-89.245h0.001z" ></path></symbol><symbol id="icon-tuichu" viewBox="0 0 1024 1024"><path d="M765.824 638.208 765.824 510.592 446.72 510.592 446.72 382.912l319.04 0L765.76 255.232l191.424 191.488L765.824 638.208zM702.016 574.4l0 255.232L382.912 829.632l0 191.488L0 829.632 0 0l702.016 0 0 319.104L638.272 319.104 638.272 63.808 127.68 63.808l255.232 127.68 0 574.336 255.36 0L638.272 574.4 702.016 574.4z" ></path></symbol><symbol id="icon-moveSort2" viewBox="0 0 1024 1024"><path d="M384 320a64 64 0 1 1 0-128 64 64 0 0 1 0 128z m256 0a64 64 0 1 1 0-128 64 64 0 0 1 0 128zM384 576a64 64 0 1 1 0-128 64 64 0 0 1 0 128z m256 0a64 64 0 1 1 0-128 64 64 0 0 1 0 128z m-256 256a64 64 0 1 1 0-128 64 64 0 0 1 0 128z m256 0a64 64 0 1 1 0-128 64 64 0 0 1 0 128z" ></path></symbol><symbol id="icon-moveSort1" viewBox="0 0 1024 1024"><path d="M426.666667 554.666667v-85.333334h341.333333v85.333334h-341.333333z m0 256v-85.333334h170.666666v85.333334h-170.666666z m0-511.914667V213.333333h512v85.418667H426.666667zM256 725.333333h106.666667L213.333333 874.666667 64 725.333333H170.666667V298.666667H64L213.333333 149.333333 362.666667 298.666667H256v426.666666z" ></path></symbol><symbol id="icon-moveSort" viewBox="0 0 1024 1024"><path d="M660.7 187.4c9.2 0 18.1 3.7 24.6 10.2 6.5 6.5 10.2 15.4 10.2 24.6v580.7c0 15.5-10.2 29.1-25.1 33.5-14.9 4.3-30.8-1.7-39.2-14.8-3.8-1.7-7.3-4.1-10.2-7.1l-82-82c-12.8-13.7-12.4-35.1 0.9-48.4 13.3-13.3 34.7-13.6 48.4-0.9l37.6 37.6V222.2c0-9.2 3.7-18.1 10.2-24.6 6.5-6.5 15.4-10.2 24.6-10.2z m166.6 650.4c-9.2 0-18.1-3.7-24.6-10.2-6.5-6.5-10.2-15.4-10.2-24.6V222.2c0-15.5 10.2-29.1 25.1-33.4 14.9-4.3 30.8 1.7 39.1 14.7 3.7 1.6 7.2 4 10.3 7.1l82.1 82.1c9.3 8.7 13.2 21.8 10 34.1-3.2 12.3-12.8 22-25.1 25.1s-25.4-0.7-34.1-10l-37.6-37.6v498.6c0 9.2-3.7 18.1-10.2 24.6-6.7 6.6-15.5 10.3-24.8 10.3z m0 0M99.1 187.4H494c23.2 0 34.8 11.6 34.8 34.8 0 23.2-11.6 34.8-34.8 34.8H99.1c-23.2 0-34.8-11.6-34.8-34.8-0.1-23.2 11.5-34.8 34.8-34.8z m0 0M99.1 466.1h302c19.2 0 34.8 15.6 34.8 34.8 0 19.2-15.6 34.8-34.8 34.8h-302c-19.2 0-34.8-15.6-34.8-34.8-0.1-19.2 15.5-34.8 34.8-34.8z m0 278.8h302c12.4 0 24 6.6 30.2 17.4 6.2 10.8 6.2 24.1 0 34.8-6.2 10.8-17.7 17.4-30.2 17.4h-302c-12.4 0-23.9-6.6-30.2-17.4-6.2-10.8-6.2-24.1 0-34.8 6.2-10.8 17.7-17.4 30.2-17.4z m0 0" ></path></symbol><symbol id="icon-edit" viewBox="0 0 1024 1024"><path d="M870.96462219 885.385565L226.136855 885.385565l99.42411-30.05834062L166.55932906 696.3255875 107.80300531 890.67254c-1.29991875 4.30076437-0.99868312 8.51134969 0.43554469 12.18949594 0.95263406 7.66424344 7.52130094 13.64962594 15.4320975 13.64962593L870.96462219 916.51166094c8.55931687 0 15.5635275-7.00325156 15.5635275-15.5635275S879.52393906 885.385565 870.96462219 885.385565z" ></path><path d="M897.4762475 199.39402719l-74.98372125-74.98372125c-23.20090969-23.20090969-60.81700594-23.20090969-84.01791563 0l-42.97022624 42.97022625 159.00163687 159.00163687 42.97022625-42.97022625C920.67715719 260.21103312 920.67715719 222.59493687 897.4762475 199.39402719z" ></path><path d="M653.10401187 305.18150281L674.30467719 283.98179656 695.50438438 305.18150281 785.605535 395.28265437 833.305355 347.58187531 674.30467719 188.5811975 186.7008725 676.18500219 234.4006925 723.88482219Z" ></path><path d="M345.70279344 835.19076781l-90.09993188-90.09993187 418.69900688-418.69900688 90.09993187 90.09993188-418.69900687 418.69900687Z" ></path></symbol><symbol id="icon-arrow-leftMore-circle" viewBox="0 0 1024 1024"><path d="M107 512a405 405 0 1 0 810 0 405 405 0 0 0-810 0z m-44.99999999 0C62 263.465 263.465 62 512 62.00000001S962 263.465 961.99999999 512s-201.465 450-449.99999999 449.99999999-450-201.465-449.99999999-449.99999999z" ></path><path d="M363.815 512l119.11500001 119.07a22.5 22.5 0 1 1-31.86000001 31.86l-135-135a22.5 22.5 0 0 1 0-31.86l135-135a22.5 22.5 0 0 1 31.86000001 31.86L363.815 512z" ></path><path d="M543.815 512l119.115 119.07a22.5 22.5 0 0 1-31.86 31.86l-135-135a22.5 22.5 0 0 1 0-31.86l135-135a22.5 22.5 0 0 1 31.86 31.86L543.815 512z" ></path></symbol><symbol id="icon-arrow-rightMore-circle" viewBox="0 0 1024 1024"><path d="M917 512a405 405 0 1 0-810 0 405 405 0 0 0 810 0z m44.99999999 0C962 760.535 760.535 962 512 961.99999999S62 760.535 62.00000001 512s201.465-450 449.99999999-449.99999999 450 201.465 449.99999999 449.99999999z" ></path><path d="M660.185 512l-119.11500001-119.07a22.5 22.5 0 1 1 31.86000001-31.86l135 135a22.5 22.5 0 0 1 0 31.86l-135 135a22.5 22.5 0 0 1-31.86000001-31.86L660.185 512z" ></path><path d="M480.185 512l-119.115-119.07a22.5 22.5 0 0 1 31.86-31.86l135 135a22.5 22.5 0 0 1 0 31.86l-135 135a22.5 22.5 0 0 1-31.86-31.86L480.185 512z" ></path></symbol><symbol id="icon-checkbox-empty" viewBox="0 0 1024 1024"><path d="M849.5 118.25c33.75 0 56.25 22.5 56.25 56.25l0 675c0 33.75-22.5 56.25-56.25 56.25L174.5 905.75c-33.75 0-56.25-22.5-56.25-56.25L118.25 174.5c0-33.75 22.5-56.25 56.25-56.25L849.5 118.25M849.5 62L174.5 62C112.625 62 62 112.625 62 174.5l0 675c0 61.875 50.625 112.5 112.5 112.5l675 0c61.875 0 112.5-50.625 112.5-112.5L962 174.5C962 112.625 911.375 62 849.5 62L849.5 62z" ></path></symbol><symbol id="icon-checkbox" viewBox="0 0 1024 1024"><path d="M725.75 303.875L427.625 602 298.25 455.75c-22.5-22.5-56.25-22.5-78.75 0-22.5 22.5-22.5 56.25 0 78.75l163.125 185.625C393.875 731.375 410.75 737 422 737c16.875 0 28.125-5.625 39.375-16.875l337.5-337.5c22.5-22.5 22.5-56.25 0-78.75C782 281.375 742.625 281.375 725.75 303.875z" ></path><path d="M849.5 62L174.5 62C112.625 62 62 112.625 62 174.5l0 675c0 61.875 50.625 112.5 112.5 112.5l675 0c61.875 0 112.5-50.625 112.5-112.5L962 174.5C962 112.625 911.375 62 849.5 62zM905.75 849.5c0 33.75-22.5 56.25-56.25 56.25L174.5 905.75c-33.75 0-56.25-22.5-56.25-56.25L118.25 174.5c0-33.75 22.5-56.25 56.25-56.25l675 0c33.75 0 56.25 22.5 56.25 56.25L905.75 849.5z" ></path></symbol><symbol id="icon-add" viewBox="0 0 1024 1024"><path d="M740.1 484.3L540 484l0.3-200.1c0-15.4-12.5-28-28-28-15.4 0-28 12.5-28 28L484 484l-200.2-0.3c-15.4 0-28 12.5-28 28 0 15.4 12.5 28 28 28l200.2 0.3-0.3 200.2c0 15.4 12.5 28 28 28 15.4 0 28-12.5 28-28L540 540l200.1 0.3c15.4 0 28-12.5 28-28 0-15.4-12.5-28-28-28z" ></path><path d="M512 63.9C264.5 63.9 63.9 264.5 63.9 512S264.5 960.1 512 960.1 960.1 759.5 960.1 512 759.5 63.9 512 63.9z m271.6 719.7c-35.3 35.3-76.4 63-122.1 82.3-47.3 20-97.6 30.2-149.5 30.2S409.8 886 362.5 865.9c-45.7-19.3-86.8-47-122.1-82.3s-63-76.4-82.3-122.1c-20-47.3-30.2-97.6-30.2-149.5s10.1-102.2 30.2-149.5c19.3-45.7 47-86.8 82.3-122.1s76.4-63 122.1-82.3c47.3-20 97.6-30.2 149.5-30.2 51.9 0 102.2 10.1 149.5 30.2 45.7 19.3 86.8 47 122.1 82.3s63 76.4 82.3 122.1c20 47.3 30.2 97.6 30.2 149.5 0 51.9-10.1 102.2-30.2 149.5-19.3 45.7-47 86.8-82.3 122.1z" ></path></symbol><symbol id="icon-delete" viewBox="0 0 1024 1024"><path d="M826.19642832 347.3l-29.6035708 560.79642833a38.79642833 38.79642833 0 0 1-38.73214336 36.73928583H266.10714248a38.79642833 38.79642833 0 0 1-38.73214248-36.73928583L197.80357168 347.3a38.79642833 38.79642833 0 0 1 77.46428584-4.08214248l27.675 524.025h418.11428496l27.64285752-524.025a38.98928584 38.98928584 0 0 1 40.82142832-36.70714336 38.79642833 38.79642833 0 0 1 36.675 40.82142832z m102.85714335-129.85714248c0 21.43928584-17.38928584 38.79642833-38.82857167 38.79642832H133.775a38.79642833 38.79642833 0 0 1 0-77.56071416H347.10714248V91.37857168c0-18.73928584 12.50357168-29.08928584 31.24285752-29.08928584h267.23571416c18.73928584 0 31.24285752 10.35 31.24285752 29.08928584V178.67857168h213.36428584c21.43928584 0 38.79642833 17.35714248 38.79642832 38.79642832zM414.99285752 178.67857168h193.95V130.14285752h-193.95V178.67857168z m16.26428496 630.38571416h0.80357168c18.73928584 0 33.58928584-18 33.13928584-36.77142832l-9.86785752-419.30357168a34.26428584 34.26428584 0 0 0-34.71428496-33.65357168 33.75 33.75 0 0 0-33.13928585 34.48928584l9.83571417 420.20357167c0.45 18.45 15.55714248 35.03571416 33.94285664 35.03571417z m159.94285752 0c18.38571416 0 33.49285752-15.58928584 33.91071416-34.07142832l9.86785752-418.725a34.13571416 34.13571416 0 0 0-33.10714335-34.9714292 33.75 33.75 0 0 0-34.74642833 33.01071416l-9.86785752 419.14285752c-0.45 18.77142832 14.4 35.61428584 33.10714336 35.61428584h0.83571416z" ></path></symbol><symbol id="icon-info" viewBox="0 0 1024 1024"><path d="M512 1024C229.229714 1024 0 794.770286 0 512 0 229.229714 229.229714 0 512 0 794.770286 0 1024 229.229714 1024 512 1024 794.770286 794.770286 1024 512 1024ZM593.188571 203.044571C586.898286 164.644571 561.225143 147.053714 526.848 152.685714 480.365714 160.256 453.485714 205.129143 460.763429 249.6 466.029714 281.929143 492.397714 303.542857 529.773714 297.435429 576.256 289.828571 600.466286 247.478857 593.188571 203.044571ZM593.956571 664.576C572.635429 692.955429 523.52 741.449143 509.366857 743.753143 502.272 744.923429 500.297143 738.998857 502.857143 729.270857L567.478857 464.530286C571.062857 448.365714 574.976 428.032 573.330286 417.901714 569.709714 395.702857 541.805714 377.417143 519.570286 381.074286 466.029714 389.814857 379.136 454.838857 335.469714 530.468571 332.909714 540.196571 343.149714 552.009143 355.620571 552.045714 369.298286 534.272 418.962286 482.56 436.114286 479.780571 441.197714 478.939429 442.185143 485.010286 440.466286 493.568L376.502857 762.368C371.712 783.872 369.664 796.672 371.492571 807.789714 373.467429 819.931429 398.299429 844.909714 424.557714 840.594286 507.428571 827.062857 586.276571 744.667429 617.106286 685.677714 617.984 672.036571 606.061714 662.601143 593.956571 664.576Z" ></path></symbol><symbol id="icon-error" viewBox="0 0 1024 1024"><path d="M512 1024a512 512 0 1 1 512-512 512 512 0 0 1-512 512zM438.857143 506.148571L264.777143 683.154286a46.811429 46.811429 0 1 0 49.737143 78.994285 46.811429 46.811429 0 0 0 14.628571-14.628571L506.148571 570.514286l177.005715 177.005714a46.08 46.08 0 1 0 63.634285-64.365714L570.514286 506.148571l176.274285-176.274285a46.811429 46.811429 0 0 0-49.737142-78.994286 44.617143 44.617143 0 0 0-13.897143 14.628571L506.148571 442.514286 329.142857 265.508571a46.811429 46.811429 0 0 0-64.365714 14.628572 49.005714 49.005714 0 0 0 0 49.005714z" ></path></symbol><symbol id="icon-warn" viewBox="0 0 1102 1024"><path d="M617.721223 39.070296l476.238403 876.385787c12.36676 22.843059 11.657837 50.412269-1.89046 72.703945a75.460865 75.460865 0 0 1-64.433181 35.839972H75.159179a75.460865 75.460865 0 0 1-64.433181-35.839972 72.625175 72.625175 0 0 1-1.89046-72.703945L485.073941 39.070296A75.382096 75.382096 0 0 1 551.397582 0.000788c27.805517 0 53.326728 14.966142 66.40241 39.069508zM601.494774 395.422022c0-40.014738-28.041825-72.467637-62.62149-72.467637-34.658435 0-62.700259 32.452898-62.70026 72.467637V667.175659c0 40.093508 28.120594 72.467637 62.70026 72.467637 34.579666 0 62.62149-32.452898 62.62149-72.467637V395.422022z m-62.62149 389.592316a63.409182 63.409182 0 0 0-62.70026 64.196873c0 35.446127 28.120594 64.196874 62.70026 64.196874 34.579666 0 62.62149-28.750747 62.62149-64.196874a63.487951 63.487951 0 0 0-62.62149-64.196873z" ></path></symbol><symbol id="icon-close" viewBox="0 0 1024 1024"><path d="M777.856 280.192l-33.92-33.952-231.872 231.872-231.84-231.872-33.984 33.888 231.872 231.904-231.84 231.84 33.888 33.984 231.904-231.904 231.84 231.872 33.952-33.888-231.872-231.904z" ></path></symbol><symbol id="icon-set-fill" viewBox="0 0 1024 1024"><path d="M925.6 443.1h-41.4c-19 0-39.1-14.8-44.7-32.9l-23.7-57.7c-9-16.7-5.3-41.3 8-54.7l29.4-29.3c13.4-13.5 13.4-35.4 0-48.8L804.4 171c-13.4-13.4-35.3-13.4-48.8 0l-29.3 29.3c-13.4 13.4-38 17.1-54.8 8.1l-57.6-23.7C595.8 179.1 581 159 581 140V98.5c0-18.9-15.6-34.5-34.4-34.5h-68.9c-19 0-34.5 15.6-34.5 34.5v41.4c0 19-14.8 39.1-32.9 44.7l-57.7 23.7c-16.7 9-41.3 5.3-54.7-8.1l-29.4-29.3c-13.4-13.4-35.3-13.4-48.7 0l-48.7 48.7c-13.4 13.4-13.4 35.4 0 48.8l29.3 29.3c13.5 13.4 17.1 38 8.1 54.7l-23.7 57.7c-5.6 18.1-25.7 32.9-44.7 32.9H98.8c-19 0-34.5 15.5-34.5 34.5v68.9c0 19 15.5 34.5 34.5 34.5h41.3c19 0 39 14.9 44.6 32.9l23.8 57.7c8.9 16.7 5.3 41.4-8.1 54.8l-29.3 29.3c-13.3 13.4-13.3 35.3 0 48.8l48.8 48.8c13.4 13.4 35.3 13.4 48.7 0l29.4-29.3c13.3-13.4 38-17 54.6-8l57.8 23.7c18.1 5.6 32.9 25.7 32.9 44.7v41.2c0 18.9 15.5 34.5 34.5 34.5h68.9c18.9 0 34.4-15.5 34.4-34.5v-41.2c0-19 14.9-39.1 32.9-44.7l57.7-23.7c16.7-9 41.4-5.4 54.8 8l29.2 29.3c13.4 13.4 35.4 13.4 48.8 0l48.8-48.8c13.4-13.4 13.4-35.4 0-48.8l-29.4-29.3c-13.3-13.3-17-38-8-54.8l23.7-57.7c5.7-18.1 25.8-32.9 44.7-32.9h41.4c18.9 0 34.4-15.5 34.4-34.5v-69c-0.1-18.8-15.6-34.3-34.5-34.3m-241.2 68.8c0 95.2-77.1 172.3-172.3 172.3-95.2 0-172.3-77.1-172.3-172.3 0-95.1 77.1-172.3 172.3-172.3 95.2 0.1 172.3 77.2 172.3 172.3" ></path></symbol><symbol id="icon-set" viewBox="0 0 1024 1024"><path d="M836.738547 417.715637h-44.439118c-4.323469 0-8.172123-2.732228-9.526981-6.901177l-8.515954-25.335015c-1.207501-3.605108-0.228197-7.53665 2.413979-10.261715l29.756721-29.747511c23.26282-23.246447 23.26282-61.012585 0-84.268242l-43.557028-43.533492c-11.615549-11.622712-26.852578-17.398252-42.089607-17.398252s-30.5549 5.77554-42.187845 17.398252l-29.65746 29.747511a10.095939 10.095939 0 0 1-7.144724 2.961448 10.857279 10.857279 0 0 1-3.197832-0.480954l-25.350364-8.417717c-4.077875-1.362021-6.900154-5.212722-6.900154-9.543353v-44.577265c0-32.872688-26.706245-59.5687-59.57791-59.5687h-69.52854c-32.871665 0-59.57791 26.697035-59.57791 59.5687v44.421722c0 4.330632-2.724041 8.181333-6.900154 9.535167l-25.254173 8.499582c-1.043772 0.407276-2.169409 0.562818-3.214205 0.562818-2.642177 0-5.13802-1.035586-7.06286-2.961448l-29.740348-29.747511c-11.631922-11.622712-26.868951-17.398252-42.104956-17.398252-15.237029 0-30.53955 5.77554-42.186822 17.398252l-43.525306 43.533492c-23.26282 23.255657-23.26282 61.020772 0 84.268242l29.740348 29.747511c2.724041 2.725064 3.605108 6.655584 2.39863 10.342556l-8.41874 25.335015c-1.353834 4.087085-5.203512 6.901177-9.526981 6.901177h-44.503586c-32.888038 0-59.59326 26.697035-59.59326 59.5687v69.512167c0 32.879851 26.705222 59.57791 59.59326 59.57791h44.405349c4.339842 0 8.18952 2.724041 9.559727 6.891968l8.417716 25.335014c1.207501 3.605108 0.228197 7.53665-2.413979 10.260692l-29.756721 29.747511c-23.246447 23.255657-23.246447 61.013609 0 84.187401l43.557028 43.532469c11.615549 11.623735 26.852578 17.398252 42.186822 17.398252 15.302521 0 30.474059-5.774517 42.089607-17.398252l29.756721-29.747511a10.101055 10.101055 0 0 1 7.128351-2.968612c1.044796 0 2.170432 0.170892 3.214205 0.571005l25.336038 8.41874c4.094248 1.362021 6.900154 5.212722 6.900153 9.543354v44.421722c0 32.863479 26.705222 59.560514 59.577911 59.560514h69.527516c32.889061 0 59.57791-26.697035 59.57791-59.560514v-44.421722c0-4.330632 2.741437-8.181333 6.900154-9.543354l25.416879-8.41874c1.044796-0.325411 2.169409-0.480954 3.214205-0.480954 2.6432 0 5.122671 1.044796 7.04751 2.961448l29.756721 29.755698c11.630898 11.615549 26.851555 17.390066 42.186821 17.390066 15.302521 0 30.474059-5.77554 42.089607-17.390066l43.557029-43.541679c23.24747-23.173792 23.24747-61.012585 0-84.186377l-29.919427-29.903054c-2.724041-2.733251-3.686972-6.656607-2.413979-10.350742l8.41874-25.335015c1.370207-4.087085 5.220908-6.901177 9.559726-6.901177h44.421722c32.871665 0 59.57791-26.697035 59.577911-59.560514v-69.520353c0.078795-32.789801-26.708292-59.486836-59.498093-59.486836z m26.134217 129.008212c0 14.429641-11.712763 26.134217-26.134217 26.134217h-44.439118c-18.760273 0-35.351136 11.95017-41.208541 29.740348l-8.417716 25.343202c-5.285377 15.71082-1.289366 32.708959 10.506284 44.4954l29.755698 29.747511c4.878101 4.885264 7.602142 11.460006 7.602142 18.524912 0 6.972808-2.724041 13.547551-7.602142 18.515702l-43.557028 43.541679c-4.89345 4.885264-11.45182 7.610328-18.434862 7.610328s-13.556761-2.724041-18.531051-7.610328l-29.756721-29.747511c-8.172123-8.181333-19.086707-12.749372-30.702256-12.749372-4.666276 0-9.233292 0.717338-13.800308 2.251274l-25.498744 8.40953c-17.798365 5.938246-29.740348 22.537296-29.740348 41.215704v44.421722c0 14.430664-11.712763 26.13524-26.150589 26.13524h-69.52854c-14.436804 0-26.15059-11.704576-26.15059-26.13524v-44.421722c0-18.760273-11.941983-35.359322-29.740348-41.215704l-25.269523-8.40953c-4.469801-1.533936-9.136078-2.251274-13.866823-2.251274-11.550057 0-22.36538 4.494361-30.800493 12.749372l-29.740348 29.747511c-4.894474 4.885264-11.469216 7.610328-18.451234 7.610328-6.965645 0-13.540388-2.724041-18.515702-7.610328l-43.540656-43.541679c-4.89345-4.885264-7.618515-11.460006-7.618514-18.515702 0-6.982018 2.725064-13.556761 7.618514-18.442024l29.919427-29.829376c11.615549-11.704576 15.627932-28.703739 10.408047-44.421722l-8.41874-25.416879c-5.938246-17.790178-22.529109-29.740348-41.208541-29.740348h-44.503586c-14.4542 0-26.15059-11.704576-26.15059-26.134217v-69.520354c0-14.429641 11.69639-26.142403 26.15059-26.142403h44.405349c18.777669 0 35.368532-11.94096 41.224914-29.740348l8.499581-25.415856c5.13802-15.637142 1.125637-32.627095-10.571776-44.422746l-29.756721-29.739324c-4.89345-4.894474-7.618515-11.469216-7.618515-18.524912 0-6.973832 2.725064-13.548574 7.618515-18.523889l43.540655-43.533493c4.894474-4.894474 11.550057-7.618515 18.515702-7.618514 6.982018 0 13.556761 2.724041 18.451234 7.618514l29.740348 29.747512c8.18952 8.173147 19.086707 12.749372 30.735002 12.749372 4.730745 0 9.461489-0.807389 13.784958-2.251274l25.497721-8.335852c17.799388-5.930059 29.658484-22.529109 29.658483-41.208541v-44.503587c0-14.429641 11.712763-26.134217 26.15059-26.134217h69.52854c14.436804 0 26.15059 11.704576 26.15059 26.134217v44.421723c0 18.760273 11.941983 35.359322 29.740348 41.20854l25.433252 8.499581c4.405333 1.443885 9.054213 2.243087 13.704116 2.243088 11.468193 0 22.381753-4.486174 30.800494-12.741186l29.65746-29.748534c4.894474-4.885264 11.550057-7.618515 18.532075-7.618515s13.540388 2.732228 18.532075 7.618515l43.524283 43.533492c4.894474 4.894474 7.634888 11.469216 7.634888 18.524912 0 6.973832-2.740414 13.548574-7.634888 18.523889l-29.821189 29.821189c-11.712763 11.704576-15.72617 28.785603-10.425444 44.421722l8.41874 25.335015c5.938246 17.798365 22.529109 29.739325 41.22389 29.739325h44.421723c14.437827 0 26.151613 11.713786 26.151613 26.142403v69.438489h0.068561z m-350.84053-168.372755c-73.689303 0-133.674489 59.968813-133.674489 133.648906 0 73.680093 59.985186 133.657092 133.674489 133.657092 73.703629 0 133.689838-59.977 133.689838-133.657092 0-73.680093-59.986209-133.648906-133.689838-133.648906z m0 233.872538c-55.238069 0-100.230796-44.977377-100.230795-100.222609 0-55.238069 44.992727-100.222609 100.230795-100.222609 55.253418 0 100.247168 44.98454 100.247169 100.222609 0 55.244208-44.99375 100.222609-100.247169 100.222609z" ></path></symbol><symbol id="icon-chart" viewBox="0 0 1026 1024"><path d="M972.067982 946.325604H49.546624V23.804245c0-12.881128-10.913178-23.804245-23.794307-23.804245A23.784367 23.784367 0 0 0 1.948072 23.804245v945.749134c0 13.447659 10.356586 24.360837 23.804245 24.360838h946.315665c13.159424 0 23.804245-10.923117 23.804246-24.360838-0.009939-12.314597-10.644821-23.227775-23.804246-23.227775z m-532.797655-39.478273h176.380017c22.12453 0 39.756569-17.920273 39.756569-39.478272V92.960797c0-21.557999-17.632038-39.199977-39.756569-39.199977H439.270327a39.130403 39.130403 0 0 0-39.190037 39.199977v774.418201c0 21.54806 17.353742 39.468334 39.190037 39.468333z m39.199977-774.129966h97.990003V827.900725H478.470304V132.717365zM136.335213 906.847331h176.668252c21.557999 0 39.478273-17.920273 39.478273-39.478272V594.390519c0-22.12453-17.920273-39.756569-39.478273-39.756569H136.335213c-21.836295 0-39.190038 17.632038-39.190037 39.756569v272.97854c0 21.557999 17.363681 39.478273 39.190037 39.478272z m39.756569-273.256835h97.43341v194.310229h-97.43341V633.590496z m566.113659 273.256835H918.873693c21.557999 0 39.190038-17.920273 39.190038-39.478272V303.779941c0-21.557999-17.632038-39.756569-39.190038-39.756568H742.205441c-21.826356 0-39.756569 18.198569-39.756568 39.756568v563.589118c0 21.557999 17.930212 39.478273 39.756568 39.478272z m39.756569-563.589117h97.155115V827.900725h-97.155115V343.258214z" ></path></symbol><symbol id="icon-arrow-down-circle" viewBox="0 0 1024 1024"><path d="M231.91393 792.797779c71.800279 71.14434 170.937161 115.542526 280.334733 115.542526 109.39859599 0 208.534454-44.398186 280.334733-115.542526 71.222111-71.713298 115.669416-170.74273201 115.669416-280.025695l0 0c0-109.282962-44.447305-208.303186-115.669416-280.026718l0 0c-71.800279-71.704089-170.936137-116.111484-280.334733-116.111484l0 0 0 0 0 0c-109.397572 0-208.534454 44.407396-280.334733 116.111484-71.78186 71.724555-116.227118 170.743756-116.227118 280.026718l0 0 0 0C115.686812 622.055047 160.131047 721.084481 231.91393 792.797779L231.91393 792.797779zM829.043796 829.228503c-81.484849 80.8197-193.140858 130.909515-316.796156 130.909515-123.634832 0-235.888452-50.088792-316.795133-130.909515-80.906681-81.387635-131.043568-192.947454-131.043568-316.456419 0-123.50077801 50.135864-235.637742 131.043568-316.447209C276.359188 115.495966 388.613832 65.416384 512.248663 65.416384c123.65529801 0 235.310284 50.079582 316.796156 130.908492C909.950478 277.13332 960.106808 389.271306 960.106808 512.772085l0 0C960.106808 636.281049 909.950478 747.84086799 829.043796 829.228503L829.043796 829.228503zM751.551888 434.239474c4.572132 4.551666 7.408737 10.803044 7.408737 18.210757l0 0c0 3.412726-0.559748 6.828522-1.717108 9.66308-1.697665 3.415796-3.39533 6.27082-5.691629 8.547677l0 0-221.054605 200.913892c-2.856048 2.276856-5.130857 3.984754-8.565073 5.691629-2.855024 1.137916-6.250354 1.706875-9.68457 1.706875-3.413749 0-6.829546-0.568958-10.263761-1.706875-2.834558-1.706875-5.689582-3.414773-7.96643899-5.691629L272.944416 470.659965l0 0c-2.854001-2.276856-4.552689-5.131881-5.690606-8.547677-1.137916-2.83558099-2.276856-6.250354-2.276856-9.66308 0-7.407714 3.413749-13.659091 7.966439-18.210757l0 0c4.553713-4.552689 10.82351-7.407714 18.2302-7.407714 3.41477299 0 6.847965 0.559748 9.683547 1.697665 2.856048 1.157359 5.71107199 3.433192 7.987928 5.710049l203.402573 184.401824L715.092511 434.239474c2.275833-2.276856 5.131881-4.552689 7.966439-5.710049 3.43319199-1.137916 6.848988-1.69766499 10.262738-1.697665C740.15021 426.83073699 746.999199 429.685761 751.551888 434.239474L751.551888 434.239474z" ></path></symbol><symbol id="icon-arrow-down" viewBox="0 0 1024 1024"><path d="M497.888 595.712l197.28000001-205.44c10.432-8.864 25.968-7.504 34.68799999 3.024 8.736 10.528 7.36 26.24-3.072 35.08799999l-197.28 205.42400001c-10.432 8.864-25.968 7.504-34.688-3.008S487.44 604.56 497.888 595.712z" ></path><path d="M328.32 390.256l197.28 205.44c10.432 8.864 11.808 24.56 3.088 35.088-8.736 10.528-24.272 11.872-34.688 3.024l-197.28-205.44c-10.432-8.848-11.808-24.56-3.072-35.088C302.33599999 382.752 317.872 381.392 328.32 390.256z" ></path></symbol><symbol id="icon-arrow-left" viewBox="0 0 1024 1024"><path d="M428.288 497.888l205.44 197.28000001c8.864 10.432 7.504 25.968-3.024 34.68799999-10.528 8.736-26.24 7.36-35.08799999-3.072l-205.42400001-197.28c-8.864-10.432-7.504-25.968 3.008-34.688S419.44 487.44 428.288 497.888z" ></path><path d="M633.744 328.32l-205.44 197.28c-8.864 10.432-24.56 11.808-35.088 3.088-10.528-8.736-11.872-24.272-3.024-34.688l205.44-197.28c8.848-10.432 24.56-11.808 35.088-3.072C641.248 302.33599999 642.608 317.872 633.744 328.32z" ></path></symbol><symbol id="icon-arrow-up-circle" viewBox="0 0 1024 1024"><path d="M792.08607 231.202221c-71.800279-71.14434-170.937161-115.542526-280.334733-115.542526-109.39859599 0-208.534454 44.398186-280.334733 115.542526-71.222111 71.713298-115.669416 170.74273201-115.669416 280.025695l0 0c0 109.282962 44.447305 208.303186 115.669416 280.026718l0 0c71.800279 71.704089 170.936137 116.111484 280.334733 116.111484l0 0 0 0 0 0c109.397572 0 208.534454-44.407396 280.334733-116.111484 71.78186-71.724555 116.227118-170.743756 116.227118-280.026718l0 0 0 0C908.313188 401.944953 863.868953 302.915519 792.08607 231.202221L792.08607 231.202221zM194.956204 194.771497c81.484849-80.8197 193.140858-130.909515 316.796156-130.909515 123.634832 0 235.888452 50.088792 316.795133 130.909515 80.906681 81.387635 131.043568 192.947454 131.043568 316.456419 0 123.50077801-50.135864 235.637742-131.043568 316.447209C747.640812 908.504034 635.386168 958.583616 511.751337 958.583616c-123.65529801 0-235.310284-50.079582-316.796156-130.908492C114.049522 746.86668 63.893192 634.728694 63.893192 511.227915l0 0C63.893192 387.718951 114.049522 276.15913201 194.956204 194.771497L194.956204 194.771497zM272.448112 589.760526c-4.572132-4.551666-7.408737-10.803044-7.408737-18.210757l0 0c0-3.412726 0.559748-6.828522 1.717108-9.66308 1.697665-3.415796 3.39533-6.27082 5.691629-8.547677l0 0 221.054605-200.913892c2.856048-2.276856 5.130857-3.984754 8.565073-5.691629 2.855024-1.137916 6.250354-1.706875 9.68457-1.706875 3.413749 0 6.829546 0.568958 10.263761 1.706875 2.834558 1.706875 5.689582 3.414773 7.96643899 5.691629L751.055584 553.340035l0 0c2.854001 2.276856 4.552689 5.131881 5.690606 8.547677 1.137916 2.83558099 2.276856 6.250354 2.276856 9.66308 0 7.407714-3.413749 13.659091-7.966439 18.210757l0 0c-4.553713 4.552689-10.82351 7.407714-18.2302 7.407714-3.41477299 0-6.847965-0.559748-9.683547-1.697665-2.856048-1.157359-5.71107199-3.433192-7.987928-5.710049l-203.402573-184.401824L308.907489 589.760526c-2.275833 2.276856-5.131881 4.552689-7.966439 5.710049-3.43319199 1.137916-6.848988 1.69766499-10.262738 1.697665C283.84979 597.16926301 277.000801 594.314239 272.448112 589.760526L272.448112 589.760526z" ></path></symbol><symbol id="icon-arrow-left-circle" viewBox="0 0 1024 1024"><path d="M231.202221 231.91393c-71.14434 71.800279-115.542526 170.937161-115.542526 280.334733 0 109.39859599 44.398186 208.534454 115.542526 280.334733 71.713298 71.222111 170.74273201 115.669416 280.025695 115.669416l0 0c109.282962 0 208.303186-44.447305 280.026718-115.669416l0 0c71.704089-71.800279 116.111484-170.936137 116.111484-280.334733l0 0 0 0 0 0c0-109.397572-44.407396-208.534454-116.111484-280.334733-71.724555-71.78186-170.743756-116.227118-280.026718-116.227118l0 0 0 0C401.944953 115.686812 302.915519 160.131047 231.202221 231.91393L231.202221 231.91393zM194.771497 829.043796c-80.8197-81.484849-130.909515-193.140858-130.909515-316.796156 0-123.634832 50.088792-235.888452 130.909515-316.795133 81.387635-80.906681 192.947454-131.043568 316.456419-131.043568 123.50077801 0 235.637742 50.135864 316.447209 131.043568C908.504034 276.359188 958.583616 388.613832 958.583616 512.248663c0 123.65529801-50.079582 235.310284-130.908492 316.796156C746.86668 909.950478 634.728694 960.106808 511.227915 960.106808l0 0C387.718951 960.106808 276.15913201 909.950478 194.771497 829.043796L194.771497 829.043796zM589.760526 751.551888c-4.551666 4.572132-10.803044 7.408737-18.210757 7.408737l0 0c-3.412726 0-6.828522-0.559748-9.66308-1.717108-3.415796-1.697665-6.27082-3.39533-8.547677-5.691629l0 0-200.913892-221.054605c-2.276856-2.856048-3.984754-5.130857-5.691629-8.565073-1.137916-2.855024-1.706875-6.250354-1.706875-9.68457 0-3.413749 0.568958-6.829546 1.706875-10.263761 1.706875-2.834558 3.414773-5.689582 5.691629-7.96643899L553.340035 272.944416l0 0c2.276856-2.854001 5.131881-4.552689 8.547677-5.690606 2.83558099-1.137916 6.250354-2.276856 9.66308-2.276856 7.407714 0 13.659091 3.413749 18.210757 7.966439l0 0c4.552689 4.553713 7.407714 10.82351 7.407714 18.2302 0 3.41477299-0.559748 6.847965-1.697665 9.683547-1.157359 2.856048-3.433192 5.71107199-5.710049 7.987928l-184.401824 203.402573L589.760526 715.092511c2.276856 2.275833 4.552689 5.131881 5.710049 7.966439 1.137916 3.43319199 1.69766499 6.848988 1.697665 10.262738C597.16926301 740.15021 594.314239 746.999199 589.760526 751.551888L589.760526 751.551888z" ></path></symbol><symbol id="icon-search" viewBox="0 0 1024 1024"><path d="M447.325002 129.919978c-178.868807 0-323.872319 145.003512-323.872319 323.874365s145.003512 323.874365 323.872319 323.874365c178.870854 0 323.874365-145.003512 323.874365-323.874365S626.195855 129.919978 447.325002 129.919978zM447.325002 713.712071c-143.31915 0-259.915681-116.598578-259.915681-259.917728s116.596532-259.917728 259.915681-259.917728 259.917728 116.598578 259.917728 259.917728S590.643128 713.712071 447.325002 713.712071z" ></path><path d="M891.573945 840.061734 748.236376 696.699606c-13.43601 16.625656-28.371164 31.91385-44.338834 46.099944l142.458549 142.481062c6.246261 6.246261 14.427594 9.368368 22.60995 9.368368s16.363689-3.123131 22.60995-9.368368C904.065444 872.789113 904.065444 852.553233 891.573945 840.061734z" ></path></symbol><symbol id="icon-clock" viewBox="0 0 1024 1024"><path d="M512 128C264.576 128 64 328.576 64 576s200.576 448 448 448 448-200.576 448-448S759.424 128 512 128zM512 936c-198.824 0-360-161.178-360-360 0-198.824 161.176-360 360-360 198.822 0 360 161.176 360 360C872 774.822 710.822 936 512 936zM934.784 287.174C950.826 259.122 960 226.632 960 192c0-106.04-85.96-192-192-192-61.818 0-116.802 29.222-151.92 74.596C747.964 101.832 861.286 179.794 934.784 287.174zM407.92 74.596C372.804 29.222 317.818 0 256 0 149.96 0 64 85.96 64 192c0 34.632 9.174 67.122 25.216 95.174C162.716 179.794 276.038 101.832 407.92 74.596zM448 320l64 0 0 320-64 0L448 320zM512 576l192 0 0 64-192 0L512 576z" ></path></symbol><symbol id="icon-arrow-right" viewBox="0 0 1024 1024"><path d="M595.712 526.112l-205.44-197.28c-8.864-10.432-7.504-25.968 3.024-34.688 10.528-8.736 26.24-7.36 35.088 3.072l205.424 197.28c8.864 10.432 7.504 25.968-3.008 34.688S604.56 536.56 595.712 526.112z" ></path><path d="M390.256 695.68l205.44-197.28c8.864-10.432 24.56-11.808 35.088-3.088 10.528 8.736 11.872 24.272 3.024 34.688l-205.44 197.28c-8.848 10.432-24.56 11.808-35.088 3.072C382.752 721.664 381.392 706.128 390.256 695.68z" ></path></symbol><symbol id="icon-table" viewBox="0 0 1024 1024"><path d="M63.29814 120.015398l0 783.435039 895.355061 0L958.653201 120.015398 63.29814 120.015398 63.29814 120.015398zM399.05616 623.651916 399.05616 455.773418l223.840044 0 0 167.879522L399.05616 623.652939 399.05616 623.651916zM622.896204 679.611415l0 167.881568L399.05616 847.492984 399.05616 679.611415 622.896204 679.611415 622.896204 679.611415zM622.896204 231.933373l0 167.881568L399.05616 399.814941 399.05616 231.933373 622.896204 231.933373 622.896204 231.933373zM343.09666 231.933373l0 167.881568L119.257639 399.814941 119.257639 231.933373 343.09666 231.933373 343.09666 231.933373zM119.257639 455.773418l223.840044 0 0 167.879522L119.257639 623.652939 119.257639 455.773418 119.257639 455.773418zM678.855704 455.773418l223.840044 0 0 167.879522L678.855704 623.652939 678.855704 455.773418 678.855704 455.773418zM678.855704 399.814941 678.855704 231.933373l223.840044 0 0 167.881568L678.855704 399.814941 678.855704 399.814941zM119.257639 679.611415l223.840044 0 0 167.881568L119.257639 847.492984 119.257639 679.611415 119.257639 679.611415zM678.855704 847.492984 678.855704 679.611415l223.840044 0 0 167.881568L678.855704 847.492984 678.855704 847.492984zM678.855704 847.492984" ></path></symbol><symbol id="icon-arrow-right-circle" viewBox="0 0 1024 1024"><path d="M792.797779 792.08607c71.14434-71.800279 115.542526-170.937161 115.542526-280.334733 0-109.398596-44.398186-208.534454-115.542526-280.334733-71.713298-71.222111-170.742732-115.669416-280.025695-115.669416l0 0c-109.282962 0-208.303186 44.447305-280.026718 115.669416l0 0c-71.704089 71.800279-116.111484 170.936137-116.111484 280.334733l0 0 0 0 0 0c0 109.397572 44.407396 208.534454 116.111484 280.334733 71.724555 71.78186 170.743756 116.227118 280.026718 116.227118l0 0 0 0C622.055047 908.313188 721.084481 863.868953 792.797779 792.08607L792.797779 792.08607zM829.228503 194.956204c80.8197 81.484849 130.909515 193.140858 130.909515 316.796156 0 123.634832-50.088792 235.888452-130.909515 316.795133-81.387635 80.906681-192.947454 131.043568-316.456419 131.043568-123.500778 0-235.637742-50.135864-316.447209-131.043568C115.495966 747.640812 65.416384 635.386168 65.416384 511.751337c0-123.655298 50.079582-235.310284 130.908492-316.796156C277.13332 114.049522 389.271306 63.893192 512.772085 63.893192l0 0C636.281049 63.893192 747.840868 114.049522 829.228503 194.956204L829.228503 194.956204zM434.239474 272.448112c4.551666-4.572132 10.803044-7.408737 18.210757-7.408737l0 0c3.412726 0 6.828522 0.559748 9.66308 1.717108 3.415796 1.697665 6.27082 3.39533 8.547677 5.691629l0 0 200.913892 221.054605c2.276856 2.856048 3.984754 5.130857 5.691629 8.565073 1.137916 2.855024 1.706875 6.250354 1.706875 9.68457 0 3.413749-0.568958 6.829546-1.706875 10.263761-1.706875 2.834558-3.414773 5.689582-5.691629 7.966439L470.659965 751.055584l0 0c-2.276856 2.854001-5.131881 4.552689-8.547677 5.690606-2.835581 1.137916-6.250354 2.276856-9.66308 2.276856-7.407714 0-13.659091-3.413749-18.210757-7.966439l0 0c-4.552689-4.553713-7.407714-10.82351-7.407714-18.2302 0-3.414773 0.559748-6.847965 1.697665-9.683547 1.157359-2.856048 3.433192-5.711072 5.710049-7.987928l184.401824-203.402573L434.239474 308.907489c-2.276856-2.275833-4.552689-5.131881-5.710049-7.966439-1.137916-3.433192-1.697665-6.848988-1.697665-10.262738C426.830737 283.84979 429.685761 277.000801 434.239474 272.448112L434.239474 272.448112z" ></path></symbol><symbol id="icon-help" viewBox="0 0 1024 1024"><path d="M827.833737 196.140169C743.469304 111.750153 631.311875 65.290005 511.998465 65.290005c-119.311363 0-231.512794 46.479591-315.882344 130.850164C111.749642 280.491299 65.290517 392.668171 65.290517 511.998977c0 119.335922 46.459125 231.495398 130.830721 315.859831 84.364433 84.390016 196.566888 130.850164 315.878251 130.850164 119.31341 0 231.470839-46.479591 315.840388-130.850164 84.409458-84.346013 130.869606-196.523909 130.869606-315.859831C958.70846 392.668171 912.249335 280.510742 827.833737 196.140169zM540.442284 767.464299c-7.460925 7.460925-17.929348 11.796674-28.443819 11.796674-10.511401 0-20.985964-4.335748-28.442796-11.796674-7.414877-7.460925-11.731182-17.886369-11.731182-28.398794 0-10.536984 4.316306-21.005406 11.731182-28.42233 7.456832-7.455809 17.930371-11.778254 28.442796-11.778254 10.513448 0 20.982894 4.322445 28.443819 11.778254 7.372921 7.416923 11.733229 17.886369 11.733229 28.42233C552.175513 749.57793 547.815205 760.003374 540.442284 767.464299zM591.52573 531.633153c-34.028001 27.720342-50.951439 59.438741-50.951439 95.230921l-0.352017 10.951423-0.088004 0.082888c-1.1328 15.400758-13.95585 27.484981-29.661553 27.484981-16.403598 0-29.750581-13.305027-29.750581-29.731138 0-0.89437 0.085958-1.787716 0.172939-2.681062l-0.044002-0.067538c0-34.765805 3.317559-59.96165 9.990538-75.600839 6.675026-15.591093 21.901823-33.979906 45.543266-55.136761l24.170492-21.552875c32.500205-29.228695 48.724725-58.066487 48.724725-86.529749 0-24.428366-8.724709-44.452421-26.215058-60.068074-17.495466-15.600303-39.785122-23.427572-66.74924-23.427572-69.705572 0-104.824417 39.96113-105.35142 119.897717 0 0.086981 0.042979 0.155543 0.042979 0.218988 0 0.112564-0.042979 0.243547-0.042979 0.352017l0 1.196245-0.044002 0c-0.780783 16.908088-14.740726 30.40959-31.884175 30.40959-17.144472 0-31.104415-13.500479-31.890314-30.40959L347.057879 432.252725c0-53.896514 15.440667-96.449679 46.328142-127.684054 30.794353-31.280424 72.850192-46.87561 125.985366-46.87561 46.89403 0 84.848457 12.978593 113.902166 38.934754 29.140691 25.932626 43.666522 59.697637 43.666522 101.248985C676.940075 440.437128 648.498302 485.060441 591.52573 531.633153z" ></path></symbol><symbol id="icon-mark" viewBox="0 0 1024 1024"><path d="M677.720857 371.147018c0-91.64321-74.28589-165.928077-165.928077-165.928077s-165.928077 74.28589-165.928077 165.928077S420.149571 537.075095 511.79278 537.075095 677.720857 462.789205 677.720857 371.147018zM382.737496 371.147018c0-71.26202 57.776891-129.055285 129.055285-129.055285 71.279417 0 129.055285 57.794287 129.055285 129.055285 0 71.278393-57.775868 129.055285-129.055285 129.055285C440.513364 500.202303 382.737496 442.425412 382.737496 371.147018zM806.776142 371.147018c0-162.903184-132.061758-294.984385-294.984385-294.984385S216.808396 208.242811 216.808396 371.147018s294.984385 516.222161 294.984385 516.222161S806.776142 534.050202 806.776142 371.147018zM511.79278 113.035426c142.540414 0 258.110569 115.552759 258.110569 258.111592 0 142.558833-258.110569 460.912461-258.110569 460.912461S253.681188 513.704828 253.681188 371.147018C253.681188 228.588185 369.251344 113.035426 511.79278 113.035426zM642.187573 769.187547c-8.074909 11.081383-15.950274 21.710464-23.52274 31.794124 78.722946 9.06854 132.801609 27.838022 132.801609 49.513694 0 30.53648-107.304911 55.3097-239.674685 55.3097-132.36875 0-239.674685-24.77322-239.674685-55.3097 0-21.675672 54.079686-40.444131 132.802632-49.513694-7.572466-10.083659-15.448854-20.712741-23.52274-31.794124-86.981027 15.531741-146.152684 46.113247-146.152684 81.307817 0 50.916647 123.81698 92.182492 276.5485 92.182492s276.547477-41.265846 276.547477-92.182492C788.340257 815.300794 729.1686 784.719288 642.187573 769.187547z" ></path></symbol><symbol id="icon-money" viewBox="0 0 1024 1024"><path d="M700.416 278.528c-8.192-8.192-20.48-8.192-28.672 0l-159.744 159.744L352.256 278.528c-8.192-8.192-20.48-8.192-28.672 0s-8.192 20.48 0 28.672l139.264 139.264L335.872 446.464c-12.288 0-20.48 8.192-20.48 20.48s8.192 20.48 20.48 20.48L491.52 487.424l0 106.496L335.872 593.92c-12.288 0-20.48 8.192-20.48 20.48s8.192 20.48 20.48 20.48L491.52 634.88l0 192.512c0 12.288 8.192 20.48 20.48 20.48s20.48-8.192 20.48-20.48l0-192.512 155.648 0c12.288 0 20.48-8.192 20.48-20.48s-8.192-20.48-20.48-20.48L532.48 593.92l0-106.496 155.648 0c12.288 0 20.48-8.192 20.48-20.48s-8.192-20.48-20.48-20.48l-126.976 0 139.264-139.264C708.608 299.008 708.608 286.72 700.416 278.528z" ></path><path d="M512 86.016C278.528 86.016 86.016 278.528 86.016 512s188.416 425.984 425.984 425.984c233.472 0 425.984-188.416 425.984-425.984S745.472 86.016 512 86.016zM512 897.024c-212.992 0-385.024-172.032-385.024-385.024s172.032-385.024 385.024-385.024c212.992 0 385.024 172.032 385.024 385.024S724.992 897.024 512 897.024z" ></path></symbol><symbol id="icon-analyse" viewBox="0 0 1024 1024"><path d="M819.2 864 819.2 403.2 691.2 460.8 691.2 864 595.2 864 595.2 492.8 505.6 537.6 467.2 499.2 467.2 864 396.8 864 396.8 448 268.8 518.4 268.8 864 160 864 160 128 128 128 128 864 128 896 160 896 896 896 896 864Z" ></path><path d="M435.2 364.8 512 499.2 544 480 544 480 793.6 332.8 844.8 416 883.2 256 723.2 217.6 774.4 300.8 524.8 448 448 313.6 448 313.6 448 313.6 192 467.2 211.2 499.2Z" ></path></symbol><symbol id="icon-dealt" viewBox="0 0 1024 1024"><path d="M372.674303 617.841583 208.583061 617.841583l0 55.112202 158.683069 0C367.966071 654.182256 369.801882 635.789351 372.674303 617.841583L372.674303 617.841583z" ></path><path d="M208.583061 403.864164l353.807095 0c29.618575-13.797237 61.45363-22.044062 94.675266-23.715121l0-31.399127L208.583061 348.749916 208.583061 403.864164 208.583061 403.864164z" ></path><path d="M158.507572 769.490445c-20.847817 0-29.540803-8.698103-29.540803-29.526477l0-593.077573c0-20.828374 8.694009-29.52443 29.540803-29.52443l548.628222 0c20.826328 0 29.54592 8.696056 29.54592 29.52443l0 237.22489c23.485901 4.300956 33.708729 11.326976 54.92596 20.72502L791.607674 107.216907c0-24.76708-20.083407-44.847417-44.847417-44.847417L118.888226 62.369489c-24.769127 0-44.852534 20.081361-44.852534 44.847417l0 672.728658c0 24.758893 20.083407 44.847417 44.852534 44.847417l283.845697 0c-11.346419-21.157879-20.263509-31.520901-26.356274-55.302537L178.973696 769.490445 158.507572 769.490445z" ></path><path d="M208.583061 214.205617l448.481338 0 0 55.113225-448.481338 0 0-55.113225Z" ></path><path d="M679.400103 420.235017c-148.146085 0-268.25358 120.091122-268.25358 268.258697 0 148.144038 120.112612 268.257673 268.25358 268.257673 148.164504 0 268.25665-120.114658 268.25665-268.257673C947.656753 540.326139 827.564607 420.235017 679.400103 420.235017zM679.87901 905.252479C560.885895 905.252479 464.4311 808.801776 464.4311 689.810708c0-118.999255 96.455819-215.45712 215.44791-215.45712 119.001301 0 215.452004 96.457866 215.452004 215.45712C895.32999 808.801776 798.875195 905.252479 679.87901 905.252479z" ></path><path d="M208.583061 483.293191l0 55.113225 197.292412 0c8.973372-19.528775 19.332301-37.97387 30.9325-55.113225L208.583061 483.293191z" ></path><path d="M681.543929 714.512297 681.543929 589.929884 627.394658 589.929884 627.394658 769.682827 807.143509 769.682827 807.143509 714.512297Z" ></path></symbol><symbol id="icon-change" viewBox="0 0 1024 1024"><path d="M920.865573 637.722376H102.113167c-2.795673 0-5.514597 0.320295-8.133237 0.911766a36.95875 36.95875 0 0 0-18.426675 10.094916c-12.353352 12.419867-14.18814 31.399127-5.52176 45.776579a37.767162 37.767162 0 0 0 8.416693 9.992585l172.344207 173.278485c14.516622 14.59337 38.053688 14.59337 52.572356 0 14.516622-14.598486 14.516622-38.262442 0-52.856835L192.145693 713.098087h728.718857c20.554128 0 37.217646-16.873296 37.217646-37.685297 0-20.820188-16.662495-37.690414-37.216623-37.690414zM102.113167 386.467959h818.752406a36.920888 36.920888 0 0 0 7.80271-0.836041 36.917818 36.917818 0 0 0 19.774369-10.360976c14.517645-14.59644 14.517645-38.262442 0-52.855811L773.199419 146.225339c-14.515598-14.595416-38.054711-14.595416-52.571333 0-14.515598 14.594393-14.515598 38.261419 0 52.856835l111.408369 112.010073H102.113167c-20.554128 0-37.2156 16.873296-37.2156 37.689391 0 20.814048 16.660448 37.686321 37.2156 37.686321z" ></path></symbol><symbol id="icon-bell" viewBox="0 0 1024 1024"><path d="M861.40397037 717.4674963c8.49540741-0.24272592 16.99081482 1.45635555 25.12213333 6.79632592-29.4912-18.93262222-48.90927408-51.94334815-48.90927407-89.68722963V424.01185185c0-154.25232592-111.53256297-283.01842963-260.56628148-314.69416296V101.79318518c0-39.3216-31.7970963-70.99733333-70.99733333-70.99733333s-70.99733333 31.7970963-70.99733334 70.99733333v7.52450371c-149.03371852 31.67573333-260.56628148 160.32047408-260.56628148 314.69416296V634.57659259c0 37.74388148-19.53943703 70.75460741-48.90927408 89.68722963 8.25268148-5.33997037 16.62672592-7.16041482 25.12213333-6.79632592-26.09303703 0.12136297-47.21019259 21.11715555-47.21019258 47.33155555s21.11715555 47.33155555 47.33155555 47.33155556h710.33742223c26.2144 0 47.33155555-21.11715555 47.33155555-47.33155556 0.12136297-25.97167408-20.99579259-47.21019259-47.08882963-47.33155555zM506.17457778 978.03377778c65.41463703 0 118.45025185-53.03561482 118.45025185-118.45025186H387.72432592c0 65.41463703 52.91425185 118.45025185 118.45025186 118.45025186z" ></path></symbol><symbol id="icon-time" viewBox="0 0 1024 1024"><path d="M508.8 992C246.4 992 32 777.6 32 512S246.4 32 508.8 32s476.8 214.4 476.8 480c3.2 265.6-211.2 480-476.8 480z m0-896C281.6 96 96 281.6 96 512s185.6 416 412.8 416c227.2 0 412.8-185.6 412.8-416 3.2-230.4-182.4-416-412.8-416z" fill="#212121" ></path><path d="M704 576h-224c-19.2 0-32-12.8-32-32v-224c0-19.2 12.8-32 32-32s32 12.8 32 32v192h192c19.2 0 32 12.8 32 32s-12.8 32-32 32z" fill="#212121" ></path></symbol><symbol id="icon-skin" viewBox="0 0 1024 1024"><path d="M511.57333333 85.86666667c-311.25333333 0-426.34666667 272-426.34666666 424.53333333s110.72 427.30666667 417.38666666 427.30666667c0 0 76.16 1.38666667 76.16-67.41333334 0-68.69333333-34.24-46.72-34.24-96.10666666 0-49.49333333 34.24-71.46666667 50.66666667-71.46666667 16.42666667 0 124.8 8.21333333 185.17333333-15.25333333 60.26666667-23.14666667 157.54666667-97.38666667 157.54666667-223.78666667 0-111.25333333-115.09333333-377.81333333-426.34666667-377.81333333zM251.62666667 511.89333333c-19.62666667 0-38.50666667-7.78666667-52.48-21.76-13.86666667-13.97333333-21.65333333-32.85333333-21.65333334-52.48-0.74666667-26.98666667 13.12-52.16 36.37333334-65.92 23.25333333-13.76 52.05333333-13.76 75.30666666 0 23.25333333 13.76 37.12 38.93333333 36.37333334 65.92 0.21333333 40.85333333-32.96 74.13333333-73.92 74.24z m139.62666666-183.68c-19.62666667 0-38.50666667-7.78666667-52.37333333-21.76-13.86666667-13.86666667-21.65333333-32.74666667-21.65333333-52.48 0-40.85333333 33.17333333-74.02666667 74.02666666-74.02666666 40.85333333 0 74.02666667 33.17333333 74.02666667 74.02666666 0.10666667 41.06666667-33.06666667 74.24-74.02666667 74.24z m237.44 0c-40.85333333 0-74.02666667-33.17333333-74.02666666-74.24-0.74666667-26.98666667 13.12-52.16 36.37333333-65.92a74.34666667 74.34666667 0 0 1 75.30666667 0c23.25333333 13.76 37.12 38.93333333 36.37333333 65.92 0.10666667 41.06666667-33.06666667 74.24-74.02666667 74.24z m141.01333334 183.68c-40.85333333 0-74.02666667-33.17333333-74.02666667-74.24-0.74666667-26.98666667 13.12-52.16 36.37333333-65.92 23.25333333-13.76 52.05333333-13.76 75.30666667 0 23.25333333 13.76 37.12 38.93333333 36.37333333 65.92 0.10666667 19.62666667-7.68 38.50666667-21.54666666 52.48-13.97333333 13.86666667-32.74666667 21.76-52.48 21.76z m0 0" ></path></symbol><symbol id="icon-mail" viewBox="0 0 1024 1024"><path d="M1021.407 146.857L512.645 574.783 3.909 146.857zM0.007 183.402L339.886 471.24 0.007 876.743z" ></path><path d="M39.354 877.144L363.529 494.4 512.54 616.772l149.274-126.179 324.157 386.551zM1023.993 876.743L684.122 471.24l339.871-287.838z" ></path></symbol><symbol id="icon-email" viewBox="0 0 1024 1024"><path d="M1024.00144 220.64v574.32c0 5.76-0.736 11.456-1.824 17.072v0.064l-0.224 0.944A84.336 84.336 0 0 1 939.29744 880H101.08944a102.72 102.72 0 0 1-82.512-40.832 95.904 95.904 0 0 1-18.56-57.248V236.256a74.08 74.08 0 0 1 52.064-70.784l0.736-0.208 0.208-0.08A127.648 127.648 0 0 1 89.66544 160h883.424c1.328 0.512 2.64 1.232 4.032 1.44 25.52 4.32 40.592 19.152 45.344 44.496v0.08c0.88 4.816 1.536 9.712 1.536 14.608zM512.00144 591.232l451.152-379.472c-66.272-3.888-888.48-1.728-897.84 2.368L512.00144 591.2v0.064z m133.856-45.152l-114.112 96.144c-13.76 11.52-25.6 11.664-39.2 0.208l-48.272-40.752-63.84-53.936L81.02544 825.28l1.024 2.304h873.328L645.79344 546.08h0.064z m-304.864-31.68L51.79344 270.032v512.48l289.28-268.096h-0.08z m344.352-1.648l287.088 260.96V270.944L685.34544 512.768z" ></path></symbol><symbol id="icon-meeting" viewBox="0 0 1059 1024"><path d="M434.093791 101.281952m-101.281953 0a101.281952 101.281952 0 1 0 202.563905 0 101.281952 101.281952 0 1 0-202.563905 0Z" fill="#2c2c2c" ></path><path d="M434.093791 174.941554a172.310854 172.310854 0 0 1 172.310854 172.310854V460.372511H263.098286V347.252408a172.310854 172.310854 0 0 1 170.995505-172.310854z" fill="#2c2c2c" ></path><path d="M822.12205 101.281952m-101.281952 0a101.281952 101.281952 0 1 0 202.563905 0 101.281952 101.281952 0 1 0-202.563905 0Z" fill="#2c2c2c" ></path><path d="M822.12205 174.941554a172.310854 172.310854 0 0 1 172.310854 172.310854V460.372511H649.811196V347.252408a172.310854 172.310854 0 0 1 172.310854-172.310854z" fill="#2c2c2c" ></path><path d="M434.093791 632.683365m-101.281953 0a101.281952 101.281952 0 1 0 202.563905 0 101.281952 101.281952 0 1 0-202.563905 0Z" fill="#2c2c2c" ></path><path d="M434.093791 706.342967a172.310854 172.310854 0 0 1 172.310854 172.310854v112.462428H263.098286v-112.462428a172.310854 172.310854 0 0 1 170.995505-172.310854z" fill="#2c2c2c" ></path><path d="M822.12205 632.683365m-101.281952 0a101.281952 101.281952 0 1 0 202.563905 0 101.281952 101.281952 0 1 0-202.563905 0Z" fill="#2c2c2c" ></path><path d="M822.12205 706.342967a172.310854 172.310854 0 0 1 172.310854 172.310854v112.462428H649.811196v-112.462428a172.310854 172.310854 0 0 1 172.310854-172.310854z" fill="#2c2c2c" ></path><path d="M1026.65898 958.232498H282.828537a226.240206 226.240206 0 0 1 0-451.822736h743.830443a32.226076 32.226076 0 0 0 31.568401-32.88375 31.568401 31.568401 0 0 0-31.568401-32.883751H282.828537A287.403982 287.403982 0 0 0 0.02828 731.992293a288.061657 288.061657 0 0 0 282.800257 292.007707h743.830443a32.883751 32.883751 0 0 0 0-65.767502z" fill="#2c2c2c" ></path></symbol><symbol id="icon-today" viewBox="0 0 1024 1024"><path d="M197.667 361c2.11 0 7.389-2.111 15.833-6.333 78.112-35.89 155.166-85.5 231.167-148.834 2.11-2.11 5.277-4.222 9.5-6.333 42.222-40.111 77.055-53.833 104.5-41.167 6.333 4.223 25.333 19 57 44.334 54.889 46.444 138.277 100.277 250.166 161.5 29.556 16.889 38 38 25.334 63.333-12.667 33.778-47.5 34.833-104.5 3.167-73.89-35.89-150.944-89.722-231.167-161.5-12.667-8.445-28.5-6.334-47.5 6.333l-3.167 3.167c-82.333 71.778-167.833 125.61-256.5 161.5-35.889 14.778-61.222 11.61-76-9.5C157.555 403.222 166 380 197.667 361z m47.5 174.167h525.666c59.112 0 86.556 22.166 82.334 66.5-63.334 183.667-240.666 281.833-532 294.5-38-2.111-57-19-57-50.667 4.222-23.222 26.388-36.944 66.5-41.167 192.112-8.444 324.055-60.166 395.833-155.166 10.556-16.89 9.5-26.39-3.167-28.5H245.167c-27.445 0-42.223-13.722-44.334-41.167 2.111-27.445 16.89-42.222 44.334-44.333zM546 500.333c-14.778-12.666-40.11-45.388-76-98.166-19-23.223-15.833-43.278 9.5-60.167 25.333-14.778 49.611-11.611 72.833 9.5 33.778 33.778 60.167 69.666 79.167 107.667 6.333 27.444-2.111 47.5-25.333 60.166-25.334 10.556-45.39 4.223-60.167-19z" ></path></symbol><symbol id="icon-user" viewBox="0 0 1024 1024"><path d="M512 486.10923498A220.07150577 220.07150577 0 1 1 512 45.96622222a220.07150577 220.07150577 0 0 1 0 440.14301276zM45.96622222 926.25224651v-25.89076503a362.47071645 362.47071645 0 0 1 362.47071646-362.47071646h207.12612264a362.47071645 362.47071645 0 0 1 362.47071646 362.47071646v25.89076503a51.78153127 51.78153127 0 0 1-51.78153127 51.78153127H97.74775349a51.78153127 51.78153127 0 0 1-51.78153127-51.78153127z" ></path></symbol><symbol id="icon-listadd" viewBox="0 0 1024 1024"><path d="M775.7 188c15.9 0 30.9 6.3 42.3 17.7 11.4 11.4 17.7 26.4 17.7 42.3v527.6c0 15.9-6.3 30.9-17.7 42.3s-26.4 17.7-42.3 17.7H248c-15.9 0-30.9-6.3-42.3-17.7-11.4-11.4-17.7-26.4-17.7-42.3V248c0-15.9 6.3-30.9 17.7-42.3 11.4-11.4 26.4-17.7 42.3-17.7h527.7m0-60H248c-66 0-120 54-120 120v527.6c0 66 54 120 120 120h527.6c66 0 120-54 120-120V248c0.1-66-53.9-120-119.9-120z" ></path><path d="M542.6 480.9l0.9-151.6c0.1-17.2-13.9-31.3-31.2-31.5-8.4 0-16.2 3.2-22.2 9.1l-0.1 0.1c-5.9 5.9-9.1 13.7-9.2 22l-0.8 151.7-150.5-0.2c-17.2 0-31.3 14-31.4 31.2-0.1 17.2 13.9 31.3 31.3 31.4l150.3 0.2-0.7 150.6c-0.1 17.3 13.9 31.4 31.1 31.5 8.4 0.1 16.4-3.2 22.4-9.2 5.8-5.8 9.1-13.6 9.2-22l0.8-150.7 153.1 0.2c8.4 0 16.3-3.3 22.2-9.2 5.9-5.9 9.1-13.7 9.2-22.1 0.1-17.2-13.9-31.3-31.3-31.4l-153.1-0.1z" ></path></symbol><symbol id="icon-sun" viewBox="0 0 1024 1024"><path d="M512 246.518519c-147.949037 0-265.481481 117.532444-265.481481 265.481481 0 147.930074 117.532444 265.481481 265.481481 265.481481s265.481481-117.551407 265.481481-265.481481c0-147.949037-117.532444-265.481481-265.481481-265.481481z m0 455.111111c-105.509926 0-189.62963-84.119704-189.62963-189.62963s84.119704-189.62963 189.62963-189.62963 189.62963 84.119704 189.62963 189.62963-84.119704 189.62963-189.62963 189.62963zM283.591111 229.091556L170.799407 116.299852 116.698074 170.420148l112.772741 112.772741 54.120296-54.101333zM905.860741 170.401185l-54.101334-54.101333-112.791703 112.772741 54.120296 54.120296 112.772741-112.791704zM549.925926 0h-75.851852v170.666667h75.851852V0zM170.666667 474.074074H0v75.851852h170.666667v-75.851852zM116.698074 851.361185l54.101333 54.120296 112.791704-112.791703-54.120296-54.101334-112.772741 112.772741zM853.333333 474.074074v75.851852h170.666667v-75.851852h-170.666667z m-114.365629 318.615704l112.791703 112.772741 54.101334-54.101334-112.772741-112.772741-54.120296 54.101334zM474.074074 1024h75.851852v-170.666667h-75.851852v170.666667z" ></path></symbol></svg>',m=(m=document.getElementsByTagName("script"))[m.length-1].getAttribute("data-injectcss"),z=function(c,l){l.parentNode.insertBefore(c,l)};if(m&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(c){console&&console.log(c)}}function s(){o\|\|(o=!0,h())}function p(){try{t.documentElement.doScroll("left")}catch(c){return void setTimeout(p,50)}s()}l=function(){var c,l;(l=document.createElement("div")).innerHTML=i,i=null,(c=l.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",l=c,(c=document.body).firstChild?z(l,c.firstChild):c.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(l,0):(a=function(){document.removeEventListener("DOMContentLoaded",a,!1),l()},document.addEventListener("DOMContentLoaded",a,!1)):document.attachEvent&&(h=l,t=c.document,o=!1,p(),t.onreadystatechange=function(){"complete"==t.readyState&&(t.onreadystatechange=null,s())})}(window);

Ignore Space Show notes View

project/hivuiSam/assets/icon/iconfont.js

Ignore Space Show notes View project/hivuiSam/assets/icon/iconfont.json
{ "id": "3042769", "name": "zhc-birt-cmps", "font_family": "iconfont", "css_prefix_text": "icon-", "description": "", "glyphs": [ { "icon_id": "57359", "name": "天猫-123时效", "font_class": "num", "unicode": "e603", "unicode_decimal": 58883 }, { "icon_id": "19709811", "name": "百分比", "font_class": "percentage", "unicode": "ebcd", "unicode_decimal": 60365 }, { "icon_id": "15838456", "name": "copy", "font_class": "copy", "unicode": "e66a", "unicode_decimal": 58986 }, { "icon_id": "5423059", "name": "XLSX", "font_class": "XLSX", "unicode": "e650", "unicode_decimal": 58960 }, { "icon_id": "19397518", "name": "XLSX图标", "font_class": "xlsx", "unicode": "e6c5", "unicode_decimal": 59077 }, { "icon_id": "1005342", "name": "info", "font_class": "info", "unicode": "e60a", "unicode_decimal": 58890 }, { "icon_id": "5279795", "name": "error", "font_class": "error", "unicode": "e620", "unicode_decimal": 58912 }, { "icon_id": "7597274", "name": "warn", "font_class": "warn", "unicode": "e601", "unicode_decimal": 58881 }, { "icon_id": "11198155", "name": "cc-arrow-right-circle", "font_class": "arrow-down-circle", "unicode": "e6f8", "unicode_decimal": 59128 }, { "icon_id": "11198224", "name": "cc-arrow-right-circle", "font_class": "arrow-up-circle", "unicode": "e6fa", "unicode_decimal": 59130 }, { "icon_id": "11198225", "name": "cc-arrow-right-circle", "font_class": "arrow-left-circle", "unicode": "e6fb", "unicode_decimal": 59131 }, { "icon_id": "6878719", "name": "delete", "font_class": "delete", "unicode": "e698", "unicode_decimal": 59032 }, { "icon_id": "8660113", "name": "add", "font_class": "add", "unicode": "e6ee", "unicode_decimal": 59118 }, { "icon_id": "519158", "name": "check-box", "font_class": "checkbox", "unicode": "e626", "unicode_decimal": 58918 }, { "icon_id": "519157", "name": "check-box-empty", "font_class": "checkbox-empty", "unicode": "e625", "unicode_decimal": 58917 }, { "icon_id": "8551103", "name": "arrows down", "font_class": "arrow-leftMore-circle", "unicode": "e623", "unicode_decimal": 58915 }, { "icon_id": "11266666", "name": "arrows down", "font_class": "arrow-rightMore-circle", "unicode": "e6fc", "unicode_decimal": 59132 }, { "icon_id": "777689", "name": "edit", "font_class": "edit", "unicode": "e62f", "unicode_decimal": 58927 }, { "icon_id": "9031766", "name": "sort16", "font_class": "moveSort2", "unicode": "e630", "unicode_decimal": 58928 }, { "icon_id": "10367835", "name": "sort", "font_class": "moveSort1", "unicode": "e93c", "unicode_decimal": 59708 }, { "icon_id": "11351033", "name": "-sort-2", "font_class": "moveSort", "unicode": "e73d", "unicode_decimal": 59197 }, { "icon_id": "80224", "name": "退出", "font_class": "tuichu", "unicode": "e627", "unicode_decimal": 58919 }, { "icon_id": "2576777", "name": "tree", "font_class": "tree", "unicode": "e6e8", "unicode_decimal": 59112 }, { "icon_id": "879513", "name": "刷新", "font_class": "refresh", "unicode": "e619", "unicode_decimal": 58905 }, { "icon_id": "6395682", "name": "关闭", "font_class": "close-circle", "unicode": "e629", "unicode_decimal": 58921 }, { "icon_id": "10296880", "name": "关闭所有", "font_class": "closeAll", "unicode": "e60f", "unicode_decimal": 58895 }, { "icon_id": "4736385", "name": "关闭其它", "font_class": "closeOther", "unicode": "e631", "unicode_decimal": 58929 }, { "icon_id": "6691134", "name": "权限", "font_class": "quanxian", "unicode": "e63f", "unicode_decimal": 58943 }, { "icon_id": "5387606", "name": "全屏", "font_class": "quanping", "unicode": "eb11", "unicode_decimal": 60177 }, { "icon_id": "5881141", "name": "部门", "font_class": "dpt", "unicode": "e62b", "unicode_decimal": 58923 }, { "icon_id": "23081148", "name": "岗位", "font_class": "ptm", "unicode": "e65c", "unicode_decimal": 58972 }, { "icon_id": "8795820", "name": "根节点", "font_class": "root", "unicode": "e810", "unicode_decimal": 59408 }, { "icon_id": "2959123", "name": "组织机构", "font_class": "org", "unicode": "e63c", "unicode_decimal": 58940 }, { "icon_id": "6289727", "name": "功能", "font_class": "func", "unicode": "e604", "unicode_decimal": 58884 }, { "icon_id": "249352", "name": "工作流程图", "font_class": "flow", "unicode": "e602", "unicode_decimal": 58882 }, { "icon_id": "58331", "name": "search", "font_class": "search", "unicode": "e621", "unicode_decimal": 58913 }, { "icon_id": "88038", "name": "clock", "font_class": "clock", "unicode": "e600", "unicode_decimal": 58880 }, { "icon_id": "144131", "name": "arrow", "font_class": "arrow-right", "unicode": "e636", "unicode_decimal": 58934 }, { "icon_id": "247436", "name": "table", "font_class": "table", "unicode": "e699", "unicode_decimal": 59033 }, { "icon_id": "372107", "name": "cc-arrow-right-circle", "font_class": "arrow-right-circle", "unicode": "e60d", "unicode_decimal": 58893 }, { "icon_id": "585102", "name": "help", "font_class": "help", "unicode": "e65d", "unicode_decimal": 58973 }, { "icon_id": "1045524", "name": "yxx_mark", "font_class": "mark", "unicode": "e63d", "unicode_decimal": 58941 }, { "icon_id": "1092161", "name": "钱", "font_class": "money", "unicode": "e640", "unicode_decimal": 58944 }, { "icon_id": "1104404", "name": "报表2", "font_class": "analyse", "unicode": "e6d2", "unicode_decimal": 59090 }, { "icon_id": "1237019", "name": "待办", "font_class": "dealt", "unicode": "e64a", "unicode_decimal": 58954 }, { "icon_id": "1327132", "name": "切换", "font_class": "change", "unicode": "e60e", "unicode_decimal": 58894 }, { "icon_id": "3405405", "name": "消息", "font_class": "bell", "unicode": "e6eb", "unicode_decimal": 59115 }, { "icon_id": "4111563", "name": "time", "font_class": "time", "unicode": "e64d", "unicode_decimal": 58957 }, { "icon_id": "5321791", "name": "画板主题", "font_class": "skin", "unicode": "e664", "unicode_decimal": 58980 }, { "icon_id": "5354204", "name": "邮箱", "font_class": "mail", "unicode": "e6af", "unicode_decimal": 59055 }, { "icon_id": "6050679", "name": "email", "font_class": "email", "unicode": "e628", "unicode_decimal": 58920 }, { "icon_id": "6427820", "name": "会议管理", "font_class": "meeting", "unicode": "e612", "unicode_decimal": 58898 }, { "icon_id": "6447175", "name": "今日收入", "font_class": "today", "unicode": "e645", "unicode_decimal": 58949 }, { "icon_id": "7876854", "name": "user", "font_class": "user2", "unicode": "e606", "unicode_decimal": 58886 }, { "icon_id": "9102193", "name": "add", "font_class": "listadd", "unicode": "e654", "unicode_decimal": 58964 }, { "icon_id": "10104436", "name": "sun", "font_class": "sun", "unicode": "e6f5", "unicode_decimal": 59125 }, { "icon_id": "10900908", "name": "arrow", "font_class": "arrow-down", "unicode": "e6f6", "unicode_decimal": 59126 }, { "icon_id": "5140499", "name": "图表", "font_class": "chart", "unicode": "e632", "unicode_decimal": 58930 }, { "icon_id": "1380012", "name": "设置", "font_class": "set", "unicode": "e61d", "unicode_decimal": 58909 }, { "icon_id": "1802993", "name": "set", "font_class": "set-fill", "unicode": "e61e", "unicode_decimal": 58910 }, { "icon_id": "9788470", "name": "close", "font_class": "close", "unicode": "e607", "unicode_decimal": 58887 }, { "icon_id": "11032339", "name": "arrow", "font_class": "arrow-left", "unicode": "e6f7", "unicode_decimal": 59127 }, { "icon_id": "4768413", "name": "用户", "font_class": "user1", "unicode": "e609", "unicode_decimal": 58889 }, { "icon_id": "10357051", "name": "用户", "font_class": "user", "unicode": "e69f", "unicode_decimal": 59039 } ] } { "id": "1417123", "name": "zhc-portal", "font_family": "iconfont", "css_prefix_text": "icon-", "description": "", "glyphs": [ { "icon_id": "249352", "name": "工作流程图", "font_class": "flow", "unicode": "e602", "unicode_decimal": 58882 }, { "icon_id": "6289727", "name": "功能", "font_class": "func", "unicode": "e604", "unicode_decimal": 58884 }, { "icon_id": "2959123", "name": "组织机构", "font_class": "org", "unicode": "e63c", "unicode_decimal": 58940 }, { "icon_id": "8795820", "name": "根节点", "font_class": "root", "unicode": "e810", "unicode_decimal": 59408 }, { "icon_id": "5881141", "name": "部门", "font_class": "dpt", "unicode": "e62b", "unicode_decimal": 58923 }, { "icon_id": "23081148", "name": "岗位", "font_class": "ptm", "unicode": "e65c", "unicode_decimal": 58972 }, { "icon_id": "5387606", "name": "全屏", "font_class": "quanping", "unicode": "eb11", "unicode_decimal": 60177 }, { "icon_id": "6691134", "name": "权限", "font_class": "quanxian", "unicode": "e63f", "unicode_decimal": 58943 }, { "icon_id": "4736385", "name": "关闭其它", "font_class": "closeOther", "unicode": "e631", "unicode_decimal": 58929 }, { "icon_id": "6395682", "name": "关闭", "font_class": "close-circle", "unicode": "e629", "unicode_decimal": 58921 }, { "icon_id": "10296880", "name": "关闭所有", "font_class": "closeAll", "unicode": "e60f", "unicode_decimal": 58895 }, { "icon_id": "879513", "name": "刷新", "font_class": "refresh", "unicode": "e619", "unicode_decimal": 58905 }, { "icon_id": "2576777", "name": "tree", "font_class": "tree", "unicode": "e6e8", "unicode_decimal": 59112 }, { "icon_id": "80224", "name": "退出", "font_class": "tuichu", "unicode": "e627", "unicode_decimal": 58919 }, { "icon_id": "9031766", "name": "sort16", "font_class": "moveSort2", "unicode": "e630", "unicode_decimal": 58928 }, { "icon_id": "10367835", "name": "sort", "font_class": "moveSort1", "unicode": "e93c", "unicode_decimal": 59708 }, { "icon_id": "11351033", "name": "-sort-2", "font_class": "moveSort", "unicode": "e73d", "unicode_decimal": 59197 }, { "icon_id": "777689", "name": "edit", "font_class": "edit", "unicode": "e62f", "unicode_decimal": 58927 }, { "icon_id": "8551103", "name": "arrows down", "font_class": "arrow-leftMore-circle", "unicode": "e623", "unicode_decimal": 58915 }, { "icon_id": "11266666", "name": "arrows down", "font_class": "arrow-rightMore-circle", "unicode": "e6fc", "unicode_decimal": 59132 }, { "icon_id": "519157", "name": "check-box-empty", "font_class": "checkbox-empty", "unicode": "e625", "unicode_decimal": 58917 }, { "icon_id": "519158", "name": "check-box", "font_class": "checkbox", "unicode": "e626", "unicode_decimal": 58918 }, { "icon_id": "8660113", "name": "add", "font_class": "add", "unicode": "e6ee", "unicode_decimal": 59118 }, { "icon_id": "6878719", "name": "delete", "font_class": "delete", "unicode": "e698", "unicode_decimal": 59032 }, { "icon_id": "1005342", "name": "info", "font_class": "info", "unicode": "e60a", "unicode_decimal": 58890 }, { "icon_id": "5279795", "name": "error", "font_class": "error", "unicode": "e620", "unicode_decimal": 58912 }, { "icon_id": "7597274", "name": "warn", "font_class": "warn", "unicode": "e601", "unicode_decimal": 58881 }, { "icon_id": "9788470", "name": "close", "font_class": "close", "unicode": "e607", "unicode_decimal": 58887 }, { "icon_id": "1802993", "name": "set", "font_class": "set-fill", "unicode": "e61e", "unicode_decimal": 58910 }, { "icon_id": "1380012", "name": "设置", "font_class": "set", "unicode": "e61d", "unicode_decimal": 58909 }, { "icon_id": "5140499", "name": "图表", "font_class": "chart", "unicode": "e632", "unicode_decimal": 58930 }, { "icon_id": "11198155", "name": "cc-arrow-right-circle", "font_class": "arrow-down-circle", "unicode": "e6f8", "unicode_decimal": 59128 }, { "icon_id": "10900908", "name": "arrow", "font_class": "arrow-down", "unicode": "e6f6", "unicode_decimal": 59126 }, { "icon_id": "11032339", "name": "arrow", "font_class": "arrow-left", "unicode": "e6f7", "unicode_decimal": 59127 }, { "icon_id": "11198224", "name": "cc-arrow-right-circle", "font_class": "arrow-up-circle", "unicode": "e6fa", "unicode_decimal": 59130 }, { "icon_id": "11198225", "name": "cc-arrow-right-circle", "font_class": "arrow-left-circle", "unicode": "e6fb", "unicode_decimal": 59131 }, { "icon_id": "58331", "name": "search", "font_class": "search", "unicode": "e621", "unicode_decimal": 58913 }, { "icon_id": "88038", "name": "clock", "font_class": "clock", "unicode": "e600", "unicode_decimal": 58880 }, { "icon_id": "144131", "name": "arrow", "font_class": "arrow-right", "unicode": "e636", "unicode_decimal": 58934 }, { "icon_id": "247436", "name": "table", "font_class": "table", "unicode": "e699", "unicode_decimal": 59033 }, { "icon_id": "372107", "name": "cc-arrow-right-circle", "font_class": "arrow-right-circle", "unicode": "e60d", "unicode_decimal": 58893 }, { "icon_id": "585102", "name": "help", "font_class": "help", "unicode": "e65d", "unicode_decimal": 58973 }, { "icon_id": "1045524", "name": "yxx_mark", "font_class": "mark", "unicode": "e63d", "unicode_decimal": 58941 }, { "icon_id": "1092161", "name": "钱", "font_class": "money", "unicode": "e640", "unicode_decimal": 58944 }, { "icon_id": "1104404", "name": "报表2", "font_class": "analyse", "unicode": "e6d2", "unicode_decimal": 59090 }, { "icon_id": "1237019", "name": "待办", "font_class": "dealt", "unicode": "e64a", "unicode_decimal": 58954 }, { "icon_id": "1327132", "name": "切换", "font_class": "change", "unicode": "e60e", "unicode_decimal": 58894 }, { "icon_id": "3405405", "name": "消息", "font_class": "bell", "unicode": "e6eb", "unicode_decimal": 59115 }, { "icon_id": "4111563", "name": "time", "font_class": "time", "unicode": "e64d", "unicode_decimal": 58957 }, { "icon_id": "5321791", "name": "画板主题", "font_class": "skin", "unicode": "e664", "unicode_decimal": 58980 }, { "icon_id": "5354204", "name": "邮箱", "font_class": "mail", "unicode": "e6af", "unicode_decimal": 59055 }, { "icon_id": "6050679", "name": "email", "font_class": "email", "unicode": "e628", "unicode_decimal": 58920 }, { "icon_id": "6427820", "name": "会议管理", "font_class": "meeting", "unicode": "e612", "unicode_decimal": 58898 }, { "icon_id": "6447175", "name": "今日收入", "font_class": "today", "unicode": "e645", "unicode_decimal": 58949 }, { "icon_id": "7876854", "name": "user", "font_class": "user", "unicode": "e606", "unicode_decimal": 58886 }, { "icon_id": "9102193", "name": "add", "font_class": "listadd", "unicode": "e654", "unicode_decimal": 58964 }, { "icon_id": "10104436", "name": "sun", "font_class": "sun", "unicode": "e6f5", "unicode_decimal": 59125 } ] }

Ignore Space Show notes View

project/hivuiSam/assets/icon/iconfont.json

{
  "id": "3042769",
  "name": "zhc-birt-cmps",
  "font_family": "iconfont",
  "css_prefix_text": "icon-",
  "description": "",
  "glyphs": [
    {
      "icon_id": "57359",
      "name": "天猫-123时效",
      "font_class": "num",
      "unicode": "e603",
      "unicode_decimal": 58883
    },
    {
      "icon_id": "19709811",
      "name": "百分比",
      "font_class": "percentage",
      "unicode": "ebcd",
      "unicode_decimal": 60365
    },
    {
      "icon_id": "15838456",
      "name": "copy",
      "font_class": "copy",
      "unicode": "e66a",
      "unicode_decimal": 58986
    },
    {
      "icon_id": "5423059",
      "name": "XLSX",
      "font_class": "XLSX",
      "unicode": "e650",
      "unicode_decimal": 58960
    },
    {
      "icon_id": "19397518",
      "name": "XLSX图标",
      "font_class": "xlsx",
      "unicode": "e6c5",
      "unicode_decimal": 59077
    },
    {
      "icon_id": "1005342",
      "name": "info",
      "font_class": "info",
      "unicode": "e60a",
      "unicode_decimal": 58890
    },
    {
      "icon_id": "5279795",
      "name": "error",
      "font_class": "error",
      "unicode": "e620",
      "unicode_decimal": 58912
    },
    {
      "icon_id": "7597274",
      "name": "warn",
      "font_class": "warn",
      "unicode": "e601",
      "unicode_decimal": 58881
    },
    {
      "icon_id": "11198155",
      "name": "cc-arrow-right-circle",
      "font_class": "arrow-down-circle",
      "unicode": "e6f8",
      "unicode_decimal": 59128
    },
    {
      "icon_id": "11198224",
      "name": "cc-arrow-right-circle",
      "font_class": "arrow-up-circle",
      "unicode": "e6fa",
      "unicode_decimal": 59130
    },
    {
      "icon_id": "11198225",
      "name": "cc-arrow-right-circle",
      "font_class": "arrow-left-circle",
      "unicode": "e6fb",
      "unicode_decimal": 59131
    },
    {
      "icon_id": "6878719",
      "name": "delete",
      "font_class": "delete",
      "unicode": "e698",
      "unicode_decimal": 59032
    },
    {
      "icon_id": "8660113",
      "name": "add",
      "font_class": "add",
      "unicode": "e6ee",
      "unicode_decimal": 59118
    },
    {
      "icon_id": "519158",
      "name": "check-box",
      "font_class": "checkbox",
      "unicode": "e626",
      "unicode_decimal": 58918
    },
    {
      "icon_id": "519157",
      "name": "check-box-empty",
      "font_class": "checkbox-empty",
      "unicode": "e625",
      "unicode_decimal": 58917
    },
    {
      "icon_id": "8551103",
      "name": "arrows down",
      "font_class": "arrow-leftMore-circle",
      "unicode": "e623",
      "unicode_decimal": 58915
    },
    {
      "icon_id": "11266666",
      "name": "arrows down",
      "font_class": "arrow-rightMore-circle",
      "unicode": "e6fc",
      "unicode_decimal": 59132
    },
    {
      "icon_id": "777689",
      "name": "edit",
      "font_class": "edit",
      "unicode": "e62f",
      "unicode_decimal": 58927
    },
    {
      "icon_id": "9031766",
      "name": "sort16",
      "font_class": "moveSort2",
      "unicode": "e630",
      "unicode_decimal": 58928
    },
    {
      "icon_id": "10367835",
      "name": "sort",
      "font_class": "moveSort1",
      "unicode": "e93c",
      "unicode_decimal": 59708
    },
    {
      "icon_id": "11351033",
      "name": "-sort-2",
      "font_class": "moveSort",
      "unicode": "e73d",
      "unicode_decimal": 59197
    },
    {
      "icon_id": "80224",
      "name": "退出",
      "font_class": "tuichu",
      "unicode": "e627",
      "unicode_decimal": 58919
    },
    {
      "icon_id": "2576777",
      "name": "tree",
      "font_class": "tree",
      "unicode": "e6e8",
      "unicode_decimal": 59112
    },
    {
      "icon_id": "879513",
      "name": "刷新",
      "font_class": "refresh",
      "unicode": "e619",
      "unicode_decimal": 58905
    },
    {
      "icon_id": "6395682",
      "name": "关  闭",
      "font_class": "close-circle",
      "unicode": "e629",
      "unicode_decimal": 58921
    },
    {
      "icon_id": "10296880",
      "name": "关闭所有",
      "font_class": "closeAll",
      "unicode": "e60f",
      "unicode_decimal": 58895
    },
    {
      "icon_id": "4736385",
      "name": "关闭其它",
      "font_class": "closeOther",
      "unicode": "e631",
      "unicode_decimal": 58929
    },
    {
      "icon_id": "6691134",
      "name": "权限",
      "font_class": "quanxian",
      "unicode": "e63f",
      "unicode_decimal": 58943
    },
    {
      "icon_id": "5387606",
      "name": "全屏",
      "font_class": "quanping",
      "unicode": "eb11",
      "unicode_decimal": 60177
    },
    {
      "icon_id": "5881141",
      "name": "部门",
      "font_class": "dpt",
      "unicode": "e62b",
      "unicode_decimal": 58923
    },
    {
      "icon_id": "23081148",
      "name": "岗位",
      "font_class": "ptm",
      "unicode": "e65c",
      "unicode_decimal": 58972
    },
    {
      "icon_id": "8795820",
      "name": "根节点",
      "font_class": "root",
      "unicode": "e810",
      "unicode_decimal": 59408
    },
    {
      "icon_id": "2959123",
      "name": "组织机构",
      "font_class": "org",
      "unicode": "e63c",
      "unicode_decimal": 58940
    },
    {
      "icon_id": "6289727",
      "name": "功能",
      "font_class": "func",
      "unicode": "e604",
      "unicode_decimal": 58884
    },
    {
      "icon_id": "249352",
      "name": "工作流程图",
      "font_class": "flow",
      "unicode": "e602",
      "unicode_decimal": 58882
    },
    {
      "icon_id": "58331",
      "name": "search",
      "font_class": "search",
      "unicode": "e621",
      "unicode_decimal": 58913
    },
    {
      "icon_id": "88038",
      "name": "clock",
      "font_class": "clock",
      "unicode": "e600",
      "unicode_decimal": 58880
    },
    {
      "icon_id": "144131",
      "name": "arrow",
      "font_class": "arrow-right",
      "unicode": "e636",
      "unicode_decimal": 58934
    },
    {
      "icon_id": "247436",
      "name": "table",
      "font_class": "table",
      "unicode": "e699",
      "unicode_decimal": 59033
    },
    {
      "icon_id": "372107",
      "name": "cc-arrow-right-circle",
      "font_class": "arrow-right-circle",
      "unicode": "e60d",
      "unicode_decimal": 58893
    },
    {
      "icon_id": "585102",
      "name": "help",
      "font_class": "help",
      "unicode": "e65d",
      "unicode_decimal": 58973
    },
    {
      "icon_id": "1045524",
      "name": "yxx_mark",
      "font_class": "mark",
      "unicode": "e63d",
      "unicode_decimal": 58941
    },
    {
      "icon_id": "1092161",
      "name": "钱",
      "font_class": "money",
      "unicode": "e640",
      "unicode_decimal": 58944
    },
    {
      "icon_id": "1104404",
      "name": "报表2",
      "font_class": "analyse",
      "unicode": "e6d2",
      "unicode_decimal": 59090
    },
    {
      "icon_id": "1237019",
      "name": "待办",
      "font_class": "dealt",
      "unicode": "e64a",
      "unicode_decimal": 58954
    },
    {
      "icon_id": "1327132",
      "name": "切换",
      "font_class": "change",
      "unicode": "e60e",
      "unicode_decimal": 58894
    },
    {
      "icon_id": "3405405",
      "name": "消息",
      "font_class": "bell",
      "unicode": "e6eb",
      "unicode_decimal": 59115
    },
    {
      "icon_id": "4111563",
      "name": "time",
      "font_class": "time",
      "unicode": "e64d",
      "unicode_decimal": 58957
    },
    {
      "icon_id": "5321791",
      "name": "画板主题",
      "font_class": "skin",
      "unicode": "e664",
      "unicode_decimal": 58980
    },
    {
      "icon_id": "5354204",
      "name": "邮箱",
      "font_class": "mail",
      "unicode": "e6af",
      "unicode_decimal": 59055
    },
    {
      "icon_id": "6050679",
      "name": "email",
      "font_class": "email",
      "unicode": "e628",
      "unicode_decimal": 58920
    },
    {
      "icon_id": "6427820",
      "name": "会议管理",
      "font_class": "meeting",
      "unicode": "e612",
      "unicode_decimal": 58898
    },
    {
      "icon_id": "6447175",
      "name": "今日收入",
      "font_class": "today",
      "unicode": "e645",
      "unicode_decimal": 58949
    },
    {
      "icon_id": "7876854",
      "name": "user",
      "font_class": "user2",
      "unicode": "e606",
      "unicode_decimal": 58886
    },
    {
      "icon_id": "9102193",
      "name": "add",
      "font_class": "listadd",
      "unicode": "e654",
      "unicode_decimal": 58964
    },
    {
      "icon_id": "10104436",
      "name": "sun",
      "font_class": "sun",
      "unicode": "e6f5",
      "unicode_decimal": 59125
    },
    {
      "icon_id": "10900908",
      "name": "arrow",
      "font_class": "arrow-down",
      "unicode": "e6f6",
      "unicode_decimal": 59126
    },
    {
      "icon_id": "5140499",
      "name": "图表",
      "font_class": "chart",
      "unicode": "e632",
      "unicode_decimal": 58930
    },
    {
      "icon_id": "1380012",
      "name": "设置",
      "font_class": "set",
      "unicode": "e61d",
      "unicode_decimal": 58909
    },
    {
      "icon_id": "1802993",
      "name": "set",
      "font_class": "set-fill",
      "unicode": "e61e",
      "unicode_decimal": 58910
    },
    {
      "icon_id": "9788470",
      "name": "close",
      "font_class": "close",
      "unicode": "e607",
      "unicode_decimal": 58887
    },
    {
      "icon_id": "11032339",
      "name": "arrow",
      "font_class": "arrow-left",
      "unicode": "e6f7",
      "unicode_decimal": 59127
    },
    {
      "icon_id": "4768413",
      "name": "用户",
      "font_class": "user1",
      "unicode": "e609",
      "unicode_decimal": 58889
    },
    {
      "icon_id": "10357051",
      "name": "用户",
      "font_class": "user",
      "unicode": "e69f",
      "unicode_decimal": 59039
    }
  ]
}

{
  "id": "1417123",
  "name": "zhc-portal",
  "font_family": "iconfont",
  "css_prefix_text": "icon-",
  "description": "",
  "glyphs": [
    {
      "icon_id": "249352",
      "name": "工作流程图",
      "font_class": "flow",
      "unicode": "e602",
      "unicode_decimal": 58882
    },
    {
      "icon_id": "6289727",
      "name": "功能",
      "font_class": "func",
      "unicode": "e604",
      "unicode_decimal": 58884
    },
    {
      "icon_id": "2959123",
      "name": "组织机构",
      "font_class": "org",
      "unicode": "e63c",
      "unicode_decimal": 58940
    },
    {
      "icon_id": "8795820",
      "name": "根节点",
      "font_class": "root",
      "unicode": "e810",
      "unicode_decimal": 59408
    },
    {
      "icon_id": "5881141",
      "name": "部门",
      "font_class": "dpt",
      "unicode": "e62b",
      "unicode_decimal": 58923
    },
    {
      "icon_id": "23081148",
      "name": "岗位",
      "font_class": "ptm",
      "unicode": "e65c",
      "unicode_decimal": 58972
    },
    {
      "icon_id": "5387606",
      "name": "全屏",
      "font_class": "quanping",
      "unicode": "eb11",
      "unicode_decimal": 60177
    },
    {
      "icon_id": "6691134",
      "name": "权限",
      "font_class": "quanxian",
      "unicode": "e63f",
      "unicode_decimal": 58943
    },
    {
      "icon_id": "4736385",
      "name": "关闭其它",
      "font_class": "closeOther",
      "unicode": "e631",
      "unicode_decimal": 58929
    },
    {
      "icon_id": "6395682",
      "name": "关  闭",
      "font_class": "close-circle",
      "unicode": "e629",
      "unicode_decimal": 58921
    },
    {
      "icon_id": "10296880",
      "name": "关闭所有",
      "font_class": "closeAll",
      "unicode": "e60f",
      "unicode_decimal": 58895
    },
    {
      "icon_id": "879513",
      "name": "刷新",
      "font_class": "refresh",
      "unicode": "e619",
      "unicode_decimal": 58905
    },
    {
      "icon_id": "2576777",
      "name": "tree",
      "font_class": "tree",
      "unicode": "e6e8",
      "unicode_decimal": 59112
    },
    {
      "icon_id": "80224",
      "name": "退出",
      "font_class": "tuichu",
      "unicode": "e627",
      "unicode_decimal": 58919
    },
    {
      "icon_id": "9031766",
      "name": "sort16",
      "font_class": "moveSort2",
      "unicode": "e630",
      "unicode_decimal": 58928
    },
    {
      "icon_id": "10367835",
      "name": "sort",
      "font_class": "moveSort1",
      "unicode": "e93c",
      "unicode_decimal": 59708
    },
    {
      "icon_id": "11351033",
      "name": "-sort-2",
      "font_class": "moveSort",
      "unicode": "e73d",
      "unicode_decimal": 59197
    },
    {
      "icon_id": "777689",
      "name": "edit",
      "font_class": "edit",
      "unicode": "e62f",
      "unicode_decimal": 58927
    },
    {
      "icon_id": "8551103",
      "name": "arrows down",
      "font_class": "arrow-leftMore-circle",
      "unicode": "e623",
      "unicode_decimal": 58915
    },
    {
      "icon_id": "11266666",
      "name": "arrows down",
      "font_class": "arrow-rightMore-circle",
      "unicode": "e6fc",
      "unicode_decimal": 59132
    },
    {
      "icon_id": "519157",
      "name": "check-box-empty",
      "font_class": "checkbox-empty",
      "unicode": "e625",
      "unicode_decimal": 58917
    },
    {
      "icon_id": "519158",
      "name": "check-box",
      "font_class": "checkbox",
      "unicode": "e626",
      "unicode_decimal": 58918
    },
    {
      "icon_id": "8660113",
      "name": "add",
      "font_class": "add",
      "unicode": "e6ee",
      "unicode_decimal": 59118
    },
    {
      "icon_id": "6878719",
      "name": "delete",
      "font_class": "delete",
      "unicode": "e698",
      "unicode_decimal": 59032
    },
    {
      "icon_id": "1005342",
      "name": "info",
      "font_class": "info",
      "unicode": "e60a",
      "unicode_decimal": 58890
    },
    {
      "icon_id": "5279795",
      "name": "error",
      "font_class": "error",
      "unicode": "e620",
      "unicode_decimal": 58912
    },
    {
      "icon_id": "7597274",
      "name": "warn",
      "font_class": "warn",
      "unicode": "e601",
      "unicode_decimal": 58881
    },
    {
      "icon_id": "9788470",
      "name": "close",
      "font_class": "close",
      "unicode": "e607",
      "unicode_decimal": 58887
    },
    {
      "icon_id": "1802993",
      "name": "set",
      "font_class": "set-fill",
      "unicode": "e61e",
      "unicode_decimal": 58910
    },
    {
      "icon_id": "1380012",
      "name": "设置",
      "font_class": "set",
      "unicode": "e61d",
      "unicode_decimal": 58909
    },
    {
      "icon_id": "5140499",
      "name": "图表",
      "font_class": "chart",
      "unicode": "e632",
      "unicode_decimal": 58930
    },
    {
      "icon_id": "11198155",
      "name": "cc-arrow-right-circle",
      "font_class": "arrow-down-circle",
      "unicode": "e6f8",
      "unicode_decimal": 59128
    },
    {
      "icon_id": "10900908",
      "name": "arrow",
      "font_class": "arrow-down",
      "unicode": "e6f6",
      "unicode_decimal": 59126
    },
    {
      "icon_id": "11032339",
      "name": "arrow",
      "font_class": "arrow-left",
      "unicode": "e6f7",
      "unicode_decimal": 59127
    },
    {
      "icon_id": "11198224",
      "name": "cc-arrow-right-circle",
      "font_class": "arrow-up-circle",
      "unicode": "e6fa",
      "unicode_decimal": 59130
    },
    {
      "icon_id": "11198225",
      "name": "cc-arrow-right-circle",
      "font_class": "arrow-left-circle",
      "unicode": "e6fb",
      "unicode_decimal": 59131
    },
    {
      "icon_id": "58331",
      "name": "search",
      "font_class": "search",
      "unicode": "e621",
      "unicode_decimal": 58913
    },
    {
      "icon_id": "88038",
      "name": "clock",
      "font_class": "clock",
      "unicode": "e600",
      "unicode_decimal": 58880
    },
    {
      "icon_id": "144131",
      "name": "arrow",
      "font_class": "arrow-right",
      "unicode": "e636",
      "unicode_decimal": 58934
    },
    {
      "icon_id": "247436",
      "name": "table",
      "font_class": "table",
      "unicode": "e699",
      "unicode_decimal": 59033
    },
    {
      "icon_id": "372107",
      "name": "cc-arrow-right-circle",
      "font_class": "arrow-right-circle",
      "unicode": "e60d",
      "unicode_decimal": 58893
    },
    {
      "icon_id": "585102",
      "name": "help",
      "font_class": "help",
      "unicode": "e65d",
      "unicode_decimal": 58973
    },
    {
      "icon_id": "1045524",
      "name": "yxx_mark",
      "font_class": "mark",
      "unicode": "e63d",
      "unicode_decimal": 58941
    },
    {
      "icon_id": "1092161",
      "name": "钱",
      "font_class": "money",
      "unicode": "e640",
      "unicode_decimal": 58944
    },
    {
      "icon_id": "1104404",
      "name": "报表2",
      "font_class": "analyse",
      "unicode": "e6d2",
      "unicode_decimal": 59090
    },
    {
      "icon_id": "1237019",
      "name": "待办",
      "font_class": "dealt",
      "unicode": "e64a",
      "unicode_decimal": 58954
    },
    {
      "icon_id": "1327132",
      "name": "切换",
      "font_class": "change",
      "unicode": "e60e",
      "unicode_decimal": 58894
    },
    {
      "icon_id": "3405405",
      "name": "消息",
      "font_class": "bell",
      "unicode": "e6eb",
      "unicode_decimal": 59115
    },
    {
      "icon_id": "4111563",
      "name": "time",
      "font_class": "time",
      "unicode": "e64d",
      "unicode_decimal": 58957
    },
    {
      "icon_id": "5321791",
      "name": "画板主题",
      "font_class": "skin",
      "unicode": "e664",
      "unicode_decimal": 58980
    },
    {
      "icon_id": "5354204",
      "name": "邮箱",
      "font_class": "mail",
      "unicode": "e6af",
      "unicode_decimal": 59055
    },
    {
      "icon_id": "6050679",
      "name": "email",
      "font_class": "email",
      "unicode": "e628",
      "unicode_decimal": 58920
    },
    {
      "icon_id": "6427820",
      "name": "会议管理",
      "font_class": "meeting",
      "unicode": "e612",
      "unicode_decimal": 58898
    },
    {
      "icon_id": "6447175",
      "name": "今日收入",
      "font_class": "today",
      "unicode": "e645",
      "unicode_decimal": 58949
    },
    {
      "icon_id": "7876854",
      "name": "user",
      "font_class": "user",
      "unicode": "e606",
      "unicode_decimal": 58886
    },
    {
      "icon_id": "9102193",
      "name": "add",
      "font_class": "listadd",
      "unicode": "e654",
      "unicode_decimal": 58964
    },
    {
      "icon_id": "10104436",
      "name": "sun",
      "font_class": "sun",
      "unicode": "e6f5",
      "unicode_decimal": 59125
    }
  ]
}

Ignore Space Show notes View project/hivuiSam/assets/icon/iconfont.ttf
Not supported

Ignore Space Show notes View project/hivuiSam/assets/icon/iconfont.woff
Not supported

Ignore Space Show notes View project/hivuiSam/assets/icon/iconfont.woff2
Not supported

Ignore Space Show notes View project/hivuiSam/components/analysisSam/Index.vue
<template> <div class="container"> <!-- 工具条 --> <div class="btn-toolbar"> <!-- 后退 --> <el-dropdown split-button :size="size" :class="{disabled: backDisabled}" :disabled="backDisabled" @command="backCommand" @click="backClick"> <i class="el-icon-back"></i>后退 <el-dropdown-menu slot="dropdown"> <el-dropdown-item v-for="(item,index) in deepArr" :key="item.prop" :command="index" v-if="index < curIndex">{{ item.label }}</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <!-- 前进 --> <el-dropdown split-button :size="size" :class="{disabled: goDisabled}" :disabled="goDisabled" @command="goCommand" @click="goClick"> <i class="el-icon-right"></i>前进 <el-dropdown-menu slot="dropdown"> <el-dropdown-item v-for="(item,index) in deepArr" :key="item.prop" :command="index" v-if="index > curIndex">{{ item.label }}</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <!-- 排序 --> <el-dropdown split-button :size="size" class="sort" @command="sortClick"> <i class="el-icon-sort"></i>排序 <el-dropdown-menu slot="dropdown"> <el-dropdown-item :command="-1">不排序</el-dropdown-item> <el-dropdown-item v-for="(item, index) in sortArr" :key="item.prop" :command="index">{{ item.label }} <i class="el-icon-sort-down" :class="{ sortActive: index == sortIndex && sortType =='desc' }" @click="sortDown"></i> <i class="el-icon-sort-up" :class="{ sortActive: index == sortIndex && sortType =='asc' }" @click="sortUp"></i> </el-dropdown-item> </el-dropdown-menu> </el-dropdown> <!-- 列设置 --> <el-button icon="el-icon-setting" :size="size" @click="analysisClick">列设置</el-button> <!-- 图表 --> <el-dropdown :size="size" @command="chartTypeChange"> <el-button :size="size"> <i class="el-icon-s-data"></i> 图表<i class="el-icon-arrow-down el-icon--right"></i> </el-button> <el-dropdown-menu slot="dropdown"> <el-dropdown-item :class="{active: chartType == 'table'}" command="table">表格</el-dropdown-item> <el-dropdown-item :class="{active: chartType == 'pie'}" command="pie">饼图</el-dropdown-item> <el-dropdown-item :class="{active: chartType == 'bar'}" command="bar">柱图</el-dropdown-item> <el-dropdown-item :class="{active: chartType == 'line'}" command="line">线图</el-dropdown-item> <el-dropdown-item :class="{active: chartType == 'area'}" command="area">区域图</el-dropdown-item> <el-dropdown-item :class="{active: chartType == 'stack'}" command="stack">叠加柱图</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <!-- 刷新 --> <el-button icon="el-icon-refresh" :size="size" @click="refresh">刷新</el-button> <!-- 分析记录 --> <el-popover placement="bottom" popper-class="recordPop" v-model="recordVisible"> <el-table :data="recordData" @row-dblclick="recordDblClick" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column min-width="150" prop="name" label="方案名称"> <template slot-scope="scope"> <el-input v-if="scope.row.isEdit" v-model="scope.row.name"></el-input> <span v-else>{{ scope.row.name }}</span> </template> </el-table-column> <el-table-column width="100" prop="simple" label="缩写"> <template slot-scope="scope"> <el-input v-model="scope.row.simple"></el-input> </template> </el-table-column> <el-table-column label="操作" width="150"> <template slot-scope="scope"> <el-button size="mini" type="text" v-if="!scope.row.isEdit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button size="mini" type="text" v-else @click="handleConfirm(scope.$index, scope.row)">确定</el-button> <el-button size="mini" type="text" style="color:red;" @click.stop="handleDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> <el-button type="primary" size="mini" icon="el-icon-check" style="margin: 10px 0 0;" @click.stop="doClick" :disabled="btnDisabled">执行叠加</el-button> <el-button slot="reference" icon="el-icon-edit-outline" :size="size">分析记录</el-button> </el-popover> <!-- 统计方案 --> <el-popover placement="bottom" v-model="schemeVisible"> <el-table size="mini" :data="schemeData" @row-click="schemeRowClick"> <el-table-column width="150" prop="FSCHEMENAME" label="方案列表"></el-table-column> <el-table-column label="操作" width="150"> <template slot-scope="scope"> <el-button size="mini" type="text" style="color:red;" @click.stop="handleSchemeDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> <el-button slot="reference" icon="el-icon-edit-outline" :size="size" @click="showSchemeData">方案列表</el-button> </el-popover> <!-- 叠加 --> <el-checkbox v-model="superposition" label="叠加" border :size="size" ></el-checkbox> <!-- 透视 --> <el-checkbox v-model="perspective" label="直接透视" border :size="size" ></el-checkbox> <el-button icon="el-icon-download" :size="size" :disabled="this.data && this.data.length == 0" :loading="exportLoading" @click="exportExcel">导出excel</el-button> <el-button icon="el-icon-save" :size="size" :loading="schemeLoading" @click="saveScheme">保存方案</el-button> </div> <!-- 内容区 --> <hi-layout :is-fit="true" style="heiht: 100%;"> <!-- 右侧查询面板 --> <hi-layout-right size="300" title="过滤条件"> <div style="height: calc( 100% - 342px );overflow: auto;border:none;"> <birt-work-book style="min-height: calc( 100% - 342px );" :conf="birtModelRight" :ref="birtModelRight.controlId" class="birtModelRight" ></birt-work-book> </div> <el-divider>汇总条件</el-divider> <div style="height: 180px;overflow:auto;"> <el-form @submit.native.prevent ref="havingForm" style="padding: 10px 10px 0 0;" :model="havingForm" label-width="80px" > <el-form-item v-for="(val,name,index) in havingForm" :key="name"> <span slot="label" :title="val.label"> {{ val.label }} </span> <el-col :span="10"> <el-input type="number" v-model="havingForm[name].value" size="mini" controls-position="right" @change="handleChange" :min="0"></el-input> </el-col> <el-col class="line" :span="2">-</el-col> <el-col :span="10"> <el-input type="number" v-model="havingForm[name].value2" size="mini" controls-position="right" @change="handleChange" :min="0"></el-input> </el-col> <el-col class="line" :span="2" style="text-align:center;"> <el-button v-if="val.sign == 'inRange'" size="mini" type="text" @click="signChange(name,'outRange')">内</el-button> <el-button v-else size="mini" type="text" @click="signChange(name,'inRange')">外</el-button> </el-col> </el-form-item> </el-form> </div> <el-form @submit.native.prevent ref="groupForm" style="padding: 10px 10px 0 0;" :model="groupForm" label-width="80px" > <el-form-item label="分组条件" prop="prop"> <i class="el-icon-edit" @click="showtransfer"></i> <el-select v-model="groupForm.prop" style="width: 100%;" placeholder="请选择分组条件"> <el-option v-for="item in groupFields" :label="item.label" :value="item.prop" :key="item.prop" ></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" size="mini" :loading="loading" @click="doCount" >执行查询</el-button > <el-button size="mini" @click="reset">重置</el-button> </el-form-item> </el-form> </hi-layout-right> <!-- 图表展示区 --> <hi-layout-center style="heiht: 100%;"> <!-- 图表工具栏 --> <div class="chart-tool"> <i v-if="!showChartMenu" @click="showChartMenu = true" class="el-icon-menu" /> <div v-else class="content"> <i class="iconfont icon-num item" :class="{active: showType == 'num'}" title="显示数值" @click="onChangeShowType('num')" /> <i class="iconfont icon-percentage item" :class="{active: showType == 'percent'}" title="显示百分比" @click="onChangeShowType('percent')"/> <el-dropdown placement="bottom" @command="changeShowAnalyseList"> <i class="el-icon-s-unfold"></i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="none">不显示</el-dropdown-item> <el-dropdown-item :class="{active: analyseListChecked == item.prop}" v-for="item in analyseFields" :command="item.prop">{{ item.label }}</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <i class="el-icon-close" @click="showChartMenu = false" /> </div> </div> <!-- 深度分析显示区 --> <div class="depth-analysis"> <span>深度分析:</span> <el-breadcrumb separator-class="el-icon-arrow-right" style="padding: 0 0 0 10px;" > <el-breadcrumb-item v-for="(item,index) in deepArr" :key="item.prop"> <span v-if="item.label.includes(',') && item.selectVal" @click="breadcrumbClick(item.prop)" :class="{ deepActive: index == curIndex }" style="cursor: pointer;"> <span v-for="(it, i) in item.label.split(',')"> {{ it }} <span style="color: rgb(255, 102, 0);margin-left:2px;" v-if="index < curIndex">{{ item.selectVal.split(',')[i] }}<span v-if="i < item.label.split(',').length - 1">,</span></span> </span> </span> <span v-else @click="breadcrumbClick(item.prop)" :class="{ deepActive: index == curIndex }" style="cursor: pointer;"> {{ item.label }} <span style="color: rgb(255, 102, 0);margin-left:2px;" v-if="index < curIndex">{{ item.selectVal }}</span> </span> </el-breadcrumb-item> </el-breadcrumb> </div> <div v-if="showDetail" style="height: calc( 100% - 100px )"> <el-table :data="data" ref="table" height="100%" border stripe :show-summary="showSummary" :summary-method="getSummaries" header-row-class-name="tableHeader" style="width: 100%" > <el-table-column v-if="showIndex" type="index"> </el-table-column> <el-table-column v-for="item in tableColumns" :key="item.prop" :prop="item.prop" :label="item.label" > </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" > </el-pagination> </div> <div v-if="!showDetail && chartType == 'table'" style="height: calc( 100% - 100px )"> <el-table :data="data" ref="table" height="100%" border stripe @row-dblclick="rowDblclick" :show-summary="showSummary" :summary-method="getSummaries" header-row-class-name="tableHeader" style="width: 100%" > <el-table-column v-if="showIndex" type="index"> </el-table-column> <el-table-column v-for="item in tableColumns" :key="item.prop" :prop="item.prop" :label="item.label" > </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" > </el-pagination> </div> <Pie-chart style="height: calc( 100% - 100px )" v-else-if="!showDetail && chartType == 'pie'" ref="chartConf" :conf="chartConf" ></Pie-chart> <Bar-chart style="height: calc( 100% - 100px )" v-else-if="!showDetail && (chartType == 'bar' \|\| chartType == 'stack') " ref="chartConf" :conf="chartConf" ></Bar-chart> <Line-chart style="height: calc( 100% - 100px )" v-else-if="!showDetail && chartType == 'line'" ref="chartConf" :conf="chartConf" ></Line-chart> <Line-chart style="height: calc( 100% - 100px )" v-else-if="!showDetail && chartType == 'area'" ref="chartConf" :conf="chartConf" ></Line-chart> <!-- 分析列表数据展示区 --> <div class="analyseList" v-show="showAnalyseList "> <div class="analyseList-title"> {{ analyseList_title }} </div> <ul class="analyseList-ul"> <li v-for="(item,index) in data"> <a @click="analyseListOnClick(item,index)">{{ item[curGroupField] }}</a> <span>{{ item[analyseListChecked+'_per'] + '%' }}</span> </li> </ul> </div> </hi-layout-center> </hi-layout> <!-- 分析列 --> <el-dialog :visible.sync="analysisVisible" title="分析列设置" :height="500"> <el-table :data="analysisData" size="small" :height="400"> <el-table-column prop="countField" label="统计字段"> </el-table-column> <el-table-column prop="tableColumn" label="网格列" align="center"> <template slot="header" slot-scope="{row}"> <el-checkbox v-model="tableColumnCheck" @change="handelCheckAll('tableColumn')" label="网格列"></el-checkbox> </template> <template slot-scope="{row}"> <el-checkbox v-model="row.tableColumn"></el-checkbox> </template> </el-table-column> <el-table-column prop="tableColumn" label="网格合计列" align="center"> <template slot="header" slot-scope="{row}"> <el-checkbox v-model="tableColumnCountCheck" @change="handelCheckAll('tableColumnCount')" label="网格合计列"></el-checkbox> </template> <template slot-scope="{row}"> <el-checkbox v-model="row.tableColumnCount"></el-checkbox> </template> </el-table-column> <el-table-column prop="tableColumn" label="图表列" align="center"> <template slot="header" slot-scope="{row}"> <el-checkbox v-model="chartColumnCheck" @change="handelCheckAll('chartColumn')" label="图表列"></el-checkbox> </template> <template slot-scope="{row}"> <el-checkbox v-model="row.chartColumn"></el-checkbox> </template> </el-table-column> <el-table-column prop="chartColumnCount" label="图表列汇总" align="center"> <template slot="header" slot-scope="{row}"> <el-checkbox v-model="chartColumnCountCheck" @change="handelCheckAll('chartColumnCount')" label="图表列汇总"></el-checkbox> </template> <template slot-scope="{row}"> <el-checkbox v-model="row.chartColumnCount"></el-checkbox> </template> </el-table-column> <el-table-column label="操作" width="150"> <template slot-scope="scope"> <el-button size="mini" type="text" @click="columnUp(scope.$index, scope.row)">上移</el-button> <el-button size="mini" type="text" @click="columnDown(scope.$index, scope.row)">下移</el-button> </template> </el-table-column> </el-table> </el-dialog> <!-- 分析字段 --> <el-dialog :visible.sync="analysisFieldsVisible" title="选择分析字段" :height="500"> <Pie-chart style="height: 400px;" ref="analysisChart" :conf="analysisChartConf" ></Pie-chart> </el-dialog> <!-- 穿梭框(修改分组字段) --> <el-dialog :visible.sync="transferVisible" title="选择分组字段" :height="500" width="640px" center @close="transferClose"> <el-transfer class="sam" v-model="groupFieldsEdit" :data="conf.groupFields" :titles="['来源字段', '目标字段']" target-order="push" :props="{ key: 'prop', label: 'label' }" style="width: 100%;padding: 20px;"> <span slot-scope="{ option }">{{ option.label }} <el-button style="margin-left: 10px;" icon="el-icon-top" type="primary" size="mini" circle @click.stop="transferUp(option)"></el-button> <el-button icon="el-icon-bottom" type="primary" size="mini" circle @click.stop="transferDown(option)"></el-button> </span> </el-transfer> <span slot="footer" class="dialog-footer"> <el-button @click="transferClose" size="small">取消</el-button> <el-button type="primary" size="small" @click="transferConfirm">确定</el-button> </span> </el-dialog> </div> </template> <script> import { QueryStyleFactory } from "../templates/query-panel/QueryStyleFactory"; import { GridSingleSelect } from "../templates/GridSingleSelect"; import { getToken } from "../../utils/auth"; import "hi-ui/lib/hi-ui.css"; import { HiLayout, HiLayoutLeft, HiLayoutRight, HiLayoutTop, HiLayoutBottom, HiLayoutCenter } from "hi-ui"; import debounce from 'lodash/debounce' import cloneDeep from 'lodash/cloneDeep' export default { name: "AnalysisSam", props:{ conf:{ type: Object, } }, components:{ HiLayout, HiLayoutLeft, HiLayoutRight, HiLayoutTop, HiLayoutBottom, HiLayoutCenter }, computed: { // 后退 backDisabled(){ return this.curIndex === 0 }, // 前进 goDisabled(){ return this.curIndex == this.deepArr.length - 1 }, // 表格列 tableColumns() { if(this.showDetail){ return this.dataFields }else{ // 组合分组条件分成多个列 let list = this.curGroupField.split(',') // 获取当前分组列 let curGroupArr = this.groupFields.filter(item =>{ return list.includes(item.prop) }) let arr = [] // 执行叠加后，网格添加冗余字段 if(this.superposition){ let newFields = [] let dataList = [] for(let key in this.selectionData){ let selData = this.selectionData[key] let id = selData.id let simple = selData.simple for(let anaField of this.analyseFields){ let obj = {} obj.prop = anaField.prop + '-' + id; obj.label = anaField.label + '-' + simple; newFields.push(obj) } let keyAnalyse = this.analyseFields.map(item =>{ return item.prop }) let data = selData.data.map(sData =>{ for(let key of keyAnalyse){ sData[key+'-'+id] = sData[key] } return sData }) selData.data = data dataList = dataList.concat(data) } // 去重 let keyList = dataList.map(item =>{ return item[this.curGroupField] }) keyList = Array.from(new Set(keyList)) if(keyList && keyList.length){ let newData = [] for(let key in keyList){ let obj = { [this.curGroupField]:keyList[key] }; for(let field of newFields){ obj[field.prop] = 0 } for(let sData of this.selectionData){ // 组合分组 if(this.curGroupField.indexOf(',') > -1){ }else{ let keyArr = sData.data.map(item =>{ return item[this.curGroupField] }) let i = keyArr.indexOf(keyList[key]) if(i > -1){ obj = {...obj, ...sData.data[i]} }else{ for(let j in sData.data[0]){ obj[j+'-'+sData.id] = 0 } } } } newData[key] = obj } this.data = newData }else{ this.data = [] } arr = curGroupArr.concat(newFields) }else{ // 当前分组列+分析列 arr = curGroupArr.concat(this.analyseFields) if(arr && arr.length){ this.sortArr = arr } } arr = arr.filter(item =>{ var show = true this.analysisData.forEach(data =>{ if(data.prop == item.prop){ show = data.tableColumn } }) return show }) return arr } }, showIndex(){ return this.conf && this.conf.showIndex \|\| false }, // 网格是否显示合计行 showSummary(){ let flag = false this.analysisData.some(item =>{ flag = item.tableColumnCount return flag }) return flag }, // 数据列 dataFields(){ return this.conf && this.conf.dataFields \|\| [] }, // 图表配置 chartConf() { debugger let groupBy = this.curGroupField; let calcFields = [] // 系列 var series = []; const tooltipOption = { trigger: 'item', axisPointer: { type: 'shadow' }, } let analysisList = this.analysisData.filter(item =>{ return item.chartColumn }) let showLabel = this.showType == '' ? false : true let showPer = this.showType == 'percent' ? true : false let label = { show: showLabel, position: "top", }; if(showPer){ label.formatter = '{c}%' } calcFields = analysisList.map(item =>{ let prop = showPer ? item.prop + '_per' : item.prop let obj = { name: prop, title: item.label } series.push({tooltip: tooltipOption, label: label}) return obj }) let controlName = '' let datas = this.data // 组合分组条件时，数据添加组合列 if(groupBy.includes(',')){ let keyArr = groupBy.split(','); datas = datas.map(item =>{ let label = [] for(let key of keyArr){ label.push(item[key]) } label=label.join(); item[groupBy] = label return item }) } controlName = this.chartType == "pie" ? "PieChart" : this.chartType == "bar" ? "BarChart" : this.chartType == "stack" ? "BarChart" : this.chartType == "line" ? "LineChart" : this.chartType == "area" ? "LineChart" : 'PieChart' // 区域图 let areaSeries = calcFields.map(item =>{ return { smooth: true, areaStyle: { normal: { color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "rgba(30, 231, 231, 0.3)" },{ offset: 1, color: "rgba(30, 231, 231, 0.1)" }]), }, }, label: label, } }) // 饼图 let pieSeries = [] if(this.chartType == "pie"){ let len = calcFields.length let formatter = showPer ? '{b}: {d}%' : '{b}: {c}' label = { normal: { show: true, formatter: formatter, position:'outer', alignTo:'labelLine' } } switch(len){ case 1: pieSeries = [{label: label}]; break; case 2: pieSeries = [ { radius: [0,"50%"], center: ["25%", "50%"], label: label, }, { radius: [0,"50%"], center: ["75%", "50%"], label: label, }, ] break; case 3: pieSeries = [ { radius: [0,"50%"], center: ["25%", "50%"], label: label, }, { radius: [0,"35%"], center: ["75%", "30%"], label: label, }, { radius: [0,"35%"], center: ["75%", "70%"], label: label, }, ] break; case 4: pieSeries = [ { radius: [0,"35%"], center: ["25%", "30%"], label: label, }, { radius: [0,"35%"], center: ["25%", "70%"], label: label, }, { radius: [0,"35%"], center: ["75%", "30%"], label: label, }, { radius: [0,"35%"], center: ["75%", "70%"], label: label, }, ] break; } } /// 叠加柱图 let stackSeries = calcFields.map(item =>{ label.position = 'inside' return { stack: '总量', label: label, } }) let yAxis = { axisLabel:{ formatter: function(value,index){ return value +'%'; } } } let option = { legend: { show: true }, toolbox: { show: true, feature: { dataZoom: { yAxisIndex: "none", title:{zoom:'区域缩放', back:'区域缩放还原'} }, dataView: { readOnly: false, title:'数据视图' }, restore: { title:'还原' }, saveAsImage: { show: true, title: '保存为图片' } } }, series: this.chartType == "area" ? areaSeries : this.chartType == "stack" ? stackSeries : this.chartType == "pie" ? pieSeries : series } if(showPer && this.chartType != "pie"){ option.yAxis = yAxis } const conf = { controlName: controlName, controlId: "chart_controlid", height: "100%", isGroupData: true, groupBy: groupBy, datas: datas, calcFields: calcFields, option: option, events:{ click(row){ let _this = this.$parent.$parent.$parent; _this.currentObj = row.data _this.currentObj.prop = _this.curGroupField; if(_this.perspective){ var index = -1 _this.deepArr.forEach((item,i)=>{ if(item.prop == _this.curGroupField){ index = i } }) if(index > -1 && index < _this.deepArr.length - 1){ _this.analysisFieldsVisible = false _this.curIndex = _this.curIndex + 1 _this.currentObj = _this.deepArr[_this.curIndex]; _this.data = _this.currentObj.data _this.curGroupField = _this.currentObj.prop; }else{ _this.analysisChartConf.datas = _this.deepAnalysisFields _this.analysisFieldsVisible = true } }else{ _this.analysisChartConf.datas = _this.deepAnalysisFields _this.analysisFieldsVisible = true } _this.superposition = false } } }; return conf }, // 深度分析字段列表 deepAnalysisFields(){ let fields = this.groupFields if(fields && fields.length == 0){ return [] } let analysisFields = fields.map((item) => { item.value = 1 return item }); // 排除已经统计的分析列 if(this.deepArr && this.deepArr.length > 0){ let arrnew = this.deepArr.slice(0, this.curIndex + 1).map((item) => { return item.prop }); // 多条件的分组拆开排除 arrnew.forEach(item =>{ if(item.includes(',')){ arrnew.concat(item.split(',')) } }) analysisFields = analysisFields.filter(item =>{ return arrnew.indexOf(item.prop) < 0 }) } // 添加详情 analysisFields.push( { prop: 'detail', label: "详情", value: 1 } ) return analysisFields }, // 查询字段 queryFields(){ let queryFields = [] let fields = this.conf && this.conf.queryFields if(!fields \|\| fields.length == 0){ queryFields = [] }else{ queryFields = fields.map(item =>{ let obj = {} obj.prop = item.prop; obj.label = item.label; if(item.props && item.props.lookup){ let model = item.props.lookup if(item.element === 'hi-select-grid'){ var columns = [] if(model && model.columns && model.columns.length){ columns = model.columns.map(item =>{ item.prop = item.name return item }) } let table = model.tableprops \|\| {} table['columns'] = columns obj.lookup = { type: "data", openstyle: 'selectgrid', bindField: item.prop, lookSelectGrid: { width: 1200, height: 600, table: table, bindField: item.prop }, } if(model && model.sourceDatas){ obj.lookup.lookSelectGrid['tableData'] = model && model.sourceDatas } if(model && model.modelFile){ obj.lookup['lookDataset'] = { modelFilePath: this.conf.dataset.controlId, showSearchField: true } } obj.dbtype = 'dbString' }else if(item.element === 'hi-data-select'){ var columns = [] if(model && model.columns && model.columns.length){ columns = model.columns.map(item =>{ item.prop = item.name return item }) } let queryOptionFields = model.queryOption && model.queryOption.fields let store = model.storeCfg \|\| model.sourceDsCfg let modelFilePath = store.modelFile let fields = store.fields if(!(queryOptionFields && queryOptionFields.length)){ return } let rows = queryOptionFields.map(item =>{ return {children:[ { prop: item.name, label: item.label } ]} }); let cols = queryOptionFields.map(item =>{ return { colWidth: 100} }); let queryPanel = { rows: rows, cols: cols }; let tableColumn = model.columns.map(item =>{ return { prop: item.name, label: item.label } }) // var table = model.tableprops \|\| {} var table = { children:tableColumn, stripe: model.tableprops && model.tableprops.stripe \|\| false } let ds = { controlName: "HcDataset", controlId: modelFilePath, name: model.entityDs, modelFilePath: modelFilePath, _infcPagging: { pageSize: 10, pageNum: 1, returnCount: true }, _infcLoad: { autoActive: true, }, fields: fields, data: [], } obj.lookup = { type: "data", openstyle: 'dialog', birtModel: GridSingleSelect({ mainDataset: ds, hcQueryPanel: queryPanel, hcTable: table }), lookDataset: { modelFilePath: modelFilePath, // 数据模型路径 showSearchField: true }, lookDialog: { title: "", width: 900, height: 600, }, bindField: item.prop, sourceDsId: model.sourceDsId } obj.dbtype = 'dbString' } } // 时间方案 if(item.props && item.element == 'hi-time-scheme'){ obj.dbtype = 'dbDatetime' obj.format = item.props.format obj.element = 'hi-time-scheme' obj.disabledEx = item.disabledEx obj.viewStyle = { viewStyleId: 'DATERANGE', type: item.props.rangeType, format: item.props.format } } return obj }) } return queryFields }, // 数据集字段 fields(){ let fields = this.conf.dataset && this.conf.dataset.config.fields for(let key in this.queryFields){ let prop = this.queryFields[key].prop if(fields[prop] && fields[prop].lookup){ let lookup = Object.assign(fields[prop].lookup, this.queryFields[key].lookup) // 下拉枚举查找 if(lookup.label && lookup.returnFields){ for(let key in lookup.returnFields){ if(lookup.returnFields[key] == lookup.label && lookup.lookSelectGrid){ lookup.bindShowField = key lookup.lookSelectGrid.bindShowField = key } if(lookup.lookSelectGrid && lookup.lookSelectGrid.tableData){ let data = lookup.lookSelectGrid.tableData for(let i in data){ if(data[i][lookup.returnFields[key]]){ data[i][key] = data[i][lookup.returnFields[key]] } } } } } // 数据模型查找 if(lookup.fieldPair){ if(lookup.sourceDsId){ lookup.returnFields = lookup.fieldPair[lookup.sourceDsId].returnFields }else{ let key = Object.keys(lookup.fieldPair)[0] lookup.returnFields = lookup.fieldPair[key].returnFields } } lookup.returnType = "single", fields[prop]['lookup'] = lookup } // 时间方案 if(fields[prop] && this.queryFields[key].element == 'hi-time-scheme'){ let fd = this.queryFields[key] fields[prop].dbtype = 'dbDatetime' fields[prop].format = fd.format fields[prop].disabledEx = fd.disabledEx } } // 应用默认填充表达式 for(let key in fields){ if(fields[key].default && fields[key].default.exps){ fields[key].default['expr'] = fields[key].default.exps } } return fields }, // 数据集 dataset(){ var dataset = {} if(this.conf && this.conf.dataset){ let ds = this.conf.dataset dataset = { controlName: ds.controlName, controlId: ds.controlId, name: ds.name, modelFilePath: ds.modelFilePath, fields: this.fields, _infcLoad: { autoActive: false }, _infcPagging: { returnCount: true, pageSize: 100, pageNum: 1 }, data: [], } } return dataset }, // 查询面板 birtModelRight(){ let rows = this.queryFields.map(item =>{ return {children:[item],colspan: 12} }) let cols = this.queryFields.map(item =>{ return { colWidth: 60 } }) const queryPanel = { rows: rows, cols: cols }; let hcQueryPanel = { controlName: "HcQueryPanel", controlId: "HcQueryPanel_sam", inline: false, dataset: this.dataset && this.dataset.controlId \|\| "dsSam", size: "small", hideBtn: true, style: "width: 100%;", children: [], }; Object.assign(hcQueryPanel, QueryStyleFactory.buildForm(queryPanel) \|\| {}); let birtModelRight = { controlName: "BirtWorkBook", controlId: "BirtWorkBook_right", style: "border-bottom: 1px solid #eee;", showToolBar: false, children: [ { controlName: "BirtSheet", controlId: "BirtSheet_right", name: "sheet0", pageIndex: 0, dataSets: [{ controlName: "HcDataset", controlId: "dsScheme", name: "SysSchemeBizEntity", rowKey: "FGUID", modelFilePath: "/platf/scheme/entity/SysSchemeBizEntity.xml", _infcLoad: { autoActive: false, __zcQuery: true }, _infcPagging: { _isAddingPagging: false, pageSize: -1, }, fields: {}, data: [], }].concat(this.dataset ? this.dataset : []), children: [ { controlName: "BirtFormSheet", controlId: "BirtFormSheet_01", children: [hcQueryPanel] } ] } ], }; return birtModelRight }, // 分组条件(统计字段) groupFields(){ let groupFields = this.conf && cloneDeep(this.conf.groupFields) \|\| [] // 组合分组条件 if(this.curTransferVal && this.curTransferVal.length){ let obj = {} let curTransferLabel = this.curTransferVal.map(item =>{ for(var field of groupFields){ if(field.prop == item){ return field.label } } }) obj = { prop: this.curTransferVal.join(), label: curTransferLabel.join() } groupFields.push(obj) } return groupFields }, // 分析字段 analyseFields(){ return this.conf && this.conf.analyseFields \|\| [] }, // 显示详情 showDetail(){ return this.currentObj.prop == 'detail' }, // 执行叠加按钮 btnDisabled(){ return !this.selectionData \|\| this.selectionData.length < 2 }, analyseList_title(){ if(this.conf.analyseFields && this.conf.analyseFields.length && this.analyseListChecked){ let curField = this.conf.analyseFields.filter(item =>{ return item.prop == this.analyseListChecked })[0] return curField && curField.label \|\| '' }else{ return '' } } }, watch:{ conf:{ deep: true, handler: function(val){ if(val && val.groupFields && !this.groupForm.prop){ this.groupForm.prop = val.groupFields[0] && val.groupFields[0].prop this.curGroupField = this.groupForm.prop } if(val && val.analyseFields && val.analyseFields.length){ this.analysisData=val.analyseFields.map(item =>{ let obj = { prop: item.prop, label: item.label, countField: item.label, tableColumn: true, tableColumnCount: true, chartColumn: true, chartColumnCount: true, } return obj }) } } }, }, data() { return { size: 'small', superposition: false, perspective: false, chartType: "table", groupForm: { prop: "" }, loading: false, currentPage: 1, pageSize: 100, pageSizes: [10,20,50,100], total: 0, data: [], // 排序 sortArr:[], sortIndex:-1, sortType: '', // 分析列 analysisVisible: false, analysisData:[], tableColumnCheck: true, tableColumnCountCheck: true, chartColumnCheck: true, chartColumnCountCheck: true, // 分析字段 analysisFieldsVisible: false, analysisFieldsArr:[], analysisChartConf:{ controlName: "PieChart", controlId: "chart_analysis", height: "100%", isGroupData: true, groupBy: "label", datas: [], calcFields: [ { name: "value", title: "" } ], option: { legend: { show: true } }, events:{ click(row){ debugger; var _this = this.$parent.$parent; _this.analysisChartConf.datas = _this.deepAnalysisFields let data = JSON.parse(JSON.stringify(row.data)) delete data.emphasis // 删除当前分析以后的深度分析 _this.deepArr.splice(_this.curIndex+1, _this.deepArr.length - _this.curIndex - 1) let obj = _this.deepArr[_this.deepArr.length -1] if(_this.currentObj.name){ obj.selectVal = _this.currentObj.name }else{ if(_this.currentObj.prop.includes(',')){ let selectVal = [] let arr = _this.currentObj.prop.split(',') selectVal = arr.map(item =>{ return _this.currentObj[item] }) obj.selectVal = selectVal.join() }else{ obj.selectVal = _this.currentObj[_this.currentObj.prop] } } _this.$set(_this.deepArr,_this.curIndex,obj) _this.$set(_this.deepArr,_this.curIndex + 1, data) _this.curGroupField = data.prop; _this.currentObj = data; _this.curIndex = _this.curIndex + 1; _this.doQuery(); _this.analysisFieldsVisible = false; } } }, // 深度分析 deepArr:[], conf:{}, // 图表当前选中对象 currentObj:{}, // 当前分组字段 curGroupField: '', // 深度分析当前环节下标 curIndex: 0, exportLoading: false, // 穿梭框 transferVisible: false, curTransferVal: [], groupFieldsEdit: [], schemeLoading: false, havingForm:{}, // 分析记录 recordVisible: false, recordData:[], // 已勾选记录 selectionData: [], // 统计方案 schemeData:[], schemeVisible: false, // 是否监听 isMonitor: false, // 底部汇总数据 bottomSummary: {}, // 是否查询面板查询 isQueryModel: false, // 显示图表菜单 showChartMenu: false, showType: '', showAnalyseList: false, analyseListChecked: '' } }, updated() { this.$nextTick(() => { this.$refs["table"] && this.$refs["table"].doLayout(); }); }, methods: { // 排序 sortClick(val) { this.sortIndex = val this.doQuery(); }, sortDown(){ this.sortType = 'desc' }, sortUp(){ this.sortType = 'asc' }, // 前进 goCommand(index){ this.curIndex = index; this.currentObj = this.deepArr[index]; this.curGroupField = this.currentObj.prop; this.data = this.currentObj.data }, goClick:debounce(function(){ if(this.curIndex < this.deepArr.length - 1){ this.curIndex = this.curIndex + 1; this.currentObj = this.deepArr[this.curIndex]; this.curGroupField = this.currentObj.prop; this.data = this.currentObj.data } },500), // 后退 backCommand(val){ this.curIndex = val this.currentObj = this.deepArr[val]; this.curGroupField = this.currentObj.prop; this.data = this.currentObj.data }, backClick:debounce(function(){ if(this.curIndex > 0){ this.curIndex = this.curIndex - 1 this.currentObj = this.deepArr[this.curIndex]; this.curGroupField = this.currentObj.prop; this.data = this.currentObj.data } },500), // 深度分析 breadcrumbClick(val) { this.curGroupField = val let arrnew = this.deepArr.map(item =>{ return item.prop }) this.curIndex = arrnew.indexOf(val) this.currentObj = this.deepArr[this.curIndex]; // 数据替换成缓存的数据 this.data = this.currentObj.data }, // 点击表格 rowDblclick(row){ this.currentObj = row this.currentObj.prop = this.curGroupField; this.superposition = false if(this.perspective){ var index = -1 this.deepArr.forEach((item,i)=>{ if(item.prop == this.curGroupField){ index = i } }) if(index > -1 && index < this.deepArr.length - 1){ this.analysisFieldsVisible = false this.curIndex = this.curIndex + 1 this.currentObj = this.deepArr[this.curIndex]; this.data = this.currentObj.data this.curGroupField = this.currentObj.prop; }else{ this.analysisChartConf.datas = this.deepAnalysisFields this.analysisFieldsVisible = true } }else{ this.analysisChartConf.datas = this.deepAnalysisFields this.analysisFieldsVisible = true } }, // 点击查询 doCount() { debugger; // 叠加状态下不执行查询操作 if(this.superposition){ return } // 监听数据集 if(this.dataset){ let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] if(!this.isMonitor){ ds && ds.on("afterLoadData", this.afterLoadData); this.isMonitor = true } this.loading = true; let prop = this.groupForm.prop; let fields = this.groupFields.map(item =>{ return item.prop }) this.curGroupField = prop; let index = fields.indexOf(prop) if(this.deepArr.length){ // 如果切换了分组条件，清空深度分析 if(this.deepArr[0] && this.deepArr[0].prop !== prop){ this.deepArr = [] this.currentObj = this.groupFields[index] this.recordData = [] }else{ this.currentObj = this.deepArr[0] } } this.currentPage = 1 let queryModel = ds.getQueryModel() this.doQuery(queryModel); // 添加分析记录 let obj = {} if(Object.keys(queryModel).length === 0){ obj = { id: 'empty', name: '空条件', prop: this.groupForm.prop, } }else{ let keyArr = []; let labelArr = []; for(let key in queryModel){ if(queryModel[key] \|\| queryModel[key] === 0){ keyArr.push(key); // let arr = this.queryFields.filter(item =>{ // return item.prop == key // }) labelArr.push(queryModel[key]); } }; if(keyArr.length && labelArr.length){ obj = { id: keyArr.join() + '_' + labelArr.join(), name: labelArr.join(), prop: this.groupForm.prop, } }else{ obj = { id: 'empty', name: '空条件', prop: this.groupForm.prop, } } } // 判断分析记录中是否含有此条件，有则跳过，无则添加 const ids = this.recordData.map(value=>value.id); if(!ids.includes(obj.id)){ this.isQueryModel = true let simple = this.recordData.length + 1; obj.simple = simple obj.isEdit = false this.recordData.push(obj); }else{ this.isQueryModel = false } // 当前分组加入深度分析 if(index < 0){ this.$message.error('当前分组条件不在分组字段中，请重新配置') }else{ this.$set(this.deepArr,0,this.groupFields[index]) this.curIndex = 0 }; } }, afterLoadData(datas){ let newData = datas let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] if(datas && datas.length){ newData = datas.map(item =>{ return ds && ds.getFormatRecd(item) }) // 添加百分比数据 newData = newData.map(data =>{ for(let field of this.analyseFields){ let prop = field.prop let percent = prop+'_per' let sum = 0 const values = datas.map(item => Number(item[prop])); if (!values.every(value => isNaN(value))) { sum = values.reduce((prev, curr) => { const value = Number(curr); if (!isNaN(value)) { return prev + curr; } else { return prev; } }, 0); } if(sum && sum > 0){ data[percent] = Number((data[prop]/sum * 100).toFixed(2)) }else{ data[percent] = 0 } } return data }) } this.data = newData // 缓存数据 this.deepArr[this.curIndex].data = newData; // 总条数 this.total = ds._infcPagging.recordCount \|\| this.total; // 底部汇总数据 this.bottomSummary = ds.getBottomSummeryRecd(); // 添加分析记录 if(!this.isQueryModel) return this.recordData[this.recordData.length - 1].data = datas }, // 查询方法 doQuery(model){ let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] if(this.showDetail){ ds._infcPagging = { _isPagging: true, pageSize: this.pageSize, pageNum: this.currentPage, returnCount: true }; ds._infcStat = {} ds._infcSort = {} }else{ ds._infcPagging = { _isPagging: true, pageSize: this.pageSize, pageNum: this.currentPage, returnCount: true }; ds._infcStat = { isGroupData: true, groupBy: this.curGroupField, __bottomSummary: true } if(this.sortIndex > -1){ let obj = this.sortArr[this.sortIndex] ds._infcSort.orderBy =[{ name: obj.prop, desc: obj.label, type: this.sortType \|\| 'desc' }] }else{ ds._infcSort.orderBy = [] } if(this.havingForm){ let _infcHaving = {}; for(let item in this.havingForm){ let obj = JSON.parse(JSON.stringify(this.havingForm[item])) let val = obj.value let val2 = obj.value2 if(val === undefined && val === undefined){ }else if((val \|\| val === 0) && (val2 \|\| val2 === 0)){ _infcHaving[item] = obj }else{ if(obj.sign == 'inRange'){ obj.sign = 'lteq' }else{ obj.sign = 'gt' } _infcHaving[item] = obj } } ds._infcHaving = _infcHaving } } if(model){ ds.setQueryModel(model) ds._infcLoad.additionalModel = {}; }else if(this.deepArr && this.deepArr.length > 0){ let queryModel = {} this.deepArr.forEach(item =>{ if(item.prop && item.selectVal){ if(!item.prop.includes(",")){ queryModel[item.prop] = item.selectVal }else{ let arr = item.prop.split(',') arr.forEach((it,i) =>{ queryModel[it] = item.selectVal && item.selectVal.split(',')[i] }) } } }) ds.setAdditionalModel(queryModel) }else{ ds._infcLoad.additionalModel = {}; ds._infcLoad.queryModel = {} } ds.query(); this.loading = false; }, // 重置 reset() { this.$refs.groupForm.resetFields(); this.$refs.havingForm.resetFields(); this.havingForm = JSON.parse(JSON.stringify(this.conf.havingForm)); this.curTransferVal = [] this.groupForm.prop = this.groupFields[0] && this.groupFields[0].prop; var queryPanel = this.$refs.BirtWorkBook_right.$children[0].$children[0].$children[0].$children[0].$children[0].$children[0]; queryPanel.reset(); let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] ds._infcLoad.queryModel={} }, handleSizeChange(val) { this.pageSize = val this.doQuery() }, handleCurrentChange(val) { this.currentPage = val this.doQuery() }, // 切换图表 chartTypeChange(command) { this.chartType = command; }, // 打开分析列 analysisClick(){ this.analysisVisible = true }, // 分析列全选 handelCheckAll(val){ let _this = this this.analysisData = this.analysisData.map(item => { if(val == 'tableColumn') { item.tableColumn = _this.tableColumnCheck } if(val == 'tableColumnCount') { item.tableColumnCount = _this.tableColumnCountCheck } if(val == 'chartColumn') { item.chartColumn = _this.chartColumnCheck } if(val == 'chartColumnCount') { item.chartColumnCount = _this.chartColumnCountCheck } return item }) }, // 分析列上移 columnUp(index,row){ let arr = this.analysisData if(index > 0){ arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1])); } }, columnDown(index, row){ let arr = this.analysisData if(index < arr.length){ arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index])); }; }, // 刷新 refresh(){ this.doQuery(); this.$refs.chartConf && this.$refs.chartConf.refreshChart(); }, // 导出 exportExcel() { let param = { pageNum: -1, pageSize: -1, __slaveExport: false, }; let __body = {}; let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] var cdion = ds.lastLoadCdion console.log('cdion', cdion) if (cdion) { __body['queryCdions'] = JSON.parse(cdion); } if(this.curGroupField !== 'detail'){ __body['groupBy'] = this.curGroupField } param['modelFilePath'] = ds['modelFilePath']; param['__funcpath'] = ds['__funcpath']; param.__body = __body let sheetStyle = {} let cells = [] let columns = [] this.tableColumns.forEach(item => { cells.push({ title: item.label, colspan: 1, rowspan: 1 }) columns.push({ field: item.prop, width: 170 }) }); sheetStyle = { name: '统计分析', titleRows: [ { cells: cells } ], columns: columns } param.__sheetStyle = sheetStyle var time = new Date().getTime() var title = `统计分析${time}` var data = { title: title, __sheetDatas: JSON.stringify([param]) } var url = this.$HI.exportUrl this.exportLoading = true this.$HI.request.post(url,data).then((res) =>{ console.log('res', res) this.exportLoading = false if(res.status == 200){ let token = getToken(); var url = this.$HI.download + `?path=${res.dataPack.path}&access_token=${token}` url = url.replace(/\\/g,"/") const a = document.createElement('a') //创建a标签 a.style.display = 'none' a.href = url // 指定下载链接 a.download = title //指定下载文件名 a.click() //触发下载 } }).catch((e) =>{ this.exportLoading = false }) }, // 打开穿梭框 showtransfer(){ this.groupFieldsEdit = JSON.parse(JSON.stringify(this.curTransferVal)) this.transferVisible = true }, transferConfirm(){ if(this.groupFieldsEdit && this.groupFieldsEdit.length > 1){ this.curTransferVal = JSON.parse(JSON.stringify(this.groupFieldsEdit)) this.groupForm.prop = this.curTransferVal.join(); this.curGroupField = this.groupForm.prop; this.transferVisible = false }else{ this.$message.error("该分组选项已存在") } }, transferClose(){ this.transferVisible = false this.groupFieldsEdit = JSON.parse(JSON.stringify(this.curTransferVal)) }, transferUp(option){ let arr = this.groupFieldsEdit let index = this.groupFieldsEdit.indexOf(option.prop) if(index > 0){ arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1])); } }, transferDown(option){ let arr = this.groupFieldsEdit let index = this.groupFieldsEdit.indexOf(option.prop) if(index < arr.length){ arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index])); }; }, // 合计列 getSummaries(parma){ const { columns, data } = parma; const sums = []; // let arr = this.analyseFields.map(item =>{ // return item.prop // }) columns.forEach((column, index) => { let show = true this.analysisData.forEach(item =>{ if(item.prop == column.property){ show = item.tableColumnCount } }) // if(arr.includes(column.property) && show){ // let values = data.map(item => Number(item[column.property])); // sums[index] = values.reduce((prev, curr) => { // const value = Number(curr); // if (!isNaN(value)) { // return prev + curr; // } else { // return prev; // } // }, 0); if(this.bottomSummary && this.bottomSummary[column.property] && show){ sums[index] = this.bottomSummary[column.property] }else{ sums[index] = ''; } }) sums[0] = '统计' return sums; }, // 分析列表 handleEdit(index, row){ row.isEdit = true this.recordData[index] = row }, handleConfirm(index, row){ row.isEdit = false this.recordData[index] = row }, handleDelete(index, row){ this.recordData.splice(index, 1) }, // 执行叠加 doClick(){ this.superposition = true this.recordVisible = false this.curGroupField = this.recordData[0].prop this.curIndex = 0 }, // 分析记录勾选 handleSelectionChange(row){ this.selectionData = row }, // 双击 recordDblClick(row){ this.curIndex = 0 this.data = row.data this.deepArr[0].data = row.data this.currentObj.data = row.data }, signChange(val,sign){ this.havingForm[val]['sign'] = sign }, // 统计方案 schemeRowClick(row){ if(row.FCONTENT){ this.reset(); let conf = JSON.parse(row.FCONTENT); if(conf.deepList){ this.deepArr = conf.deepList } if(conf.curGroupField){ this.curGroupField = conf.curGroupField } if(conf.queryModel){ let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] ds.setQueryModel(conf.queryModel) let queryPanel = this.$refs.BirtWorkBook_right.$children[0].$children[0].$children[0].$children[0].$children[0].$children[0]; queryPanel.bindModel = conf.queryModel } if(conf.groupForm){ this.groupForm = conf.groupForm } if(conf.havingForm){ this.havingForm = conf.havingForm } if(conf.sortIndex){ this.sortIndex = conf.sortIndex } if(conf.sortType){ this.sortType = conf.sortType } if(conf.data){ this.data = conf.data } if(conf.currentObj){ this.currentObj = conf.currentObj } if(conf.total){ this.total = conf.total } if(conf.curTransferVal){ this.curTransferVal = conf.curTransferVal } if(conf.perspective){ this.perspective = conf.perspective }else{ this.perspective = false } if(conf.superposition){ this.superposition = conf.superposition }else{ this.superposition = false } } this.schemeVisible = false this.doCount() }, showSchemeData(){ let url = '/data/query'; let funcurl = window.location.pathname \|\| '' let queryCdions = { join: 'and', items: [ { sign: "eq", name: "FFUNCURL", dataType: "string", value: funcurl, enable: true, }, ], } var data = { modelFilePath: "/platf/scheme/entity/SysSchemeBizEntity.xml", pageSize:-1, __body:JSON.stringify({queryCdions: queryCdions}), __bottomSummary: false, // __funcpath: "/eap5csxm/KongJianCeShi/TongJiFenXi/TongJiFenXiCeShi/func/TongJiFenXiRenYuan.func", __zcQuery: true } this.$HI.request.post(url, data).then((res) =>{ this.schemeData = res.dataPack && res.dataPack.rows }).catch(e=>{ console.error(e) }) }, // 保存方案 saveScheme(){ let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] let content = { deepList: this.deepArr, curGroupField: this.curGroupField, queryModel: ds.getQueryModel(), havingForm: this.havingForm, groupForm: this.groupForm, sortIndex: this.sortIndex, sortType: this.sortType, data: this.data, currentObj:this.currentObj, perspective: this.perspective, superposition: this.superposition, total:this.total, curTransferVal:this.curTransferVal } let data = { pushType: "add", dataset: "dsScheme", pushAddType: "map", data:[{ FFUNCURL: window.location.pathname \|\| window.location.href, FCONTENT: JSON.stringify(content), }] } this.openByPath('/platf/scheme/func/add.func', {__push: data,__funcpath:'/platf/scheme/func/add.func'},{title: '方案保存'}) }, handleSchemeDelete(index, data){ let url = '/data/save' let removeData = { ...data, $state:"rsDelete", $old:data } let body = [{ modelFilePath:"/platf/scheme/entity/SysSchemeBizEntity.xml", data:[removeData] }] let rData = { __body: JSON.stringify(body) } this.$HI.request.post(url, rData).then((res) =>{ this.$message.success('方案删除成功') this.schemeData.splice(index, 1) }).catch(e=>{ this.$message.error(e) }) }, // 保存方案下推 openByPath(path, query, { title, target } = {}) { query = query \|\| {}; let queryT = {} Object.assign(queryT, query \|\| {}); if (title) queryT.__title = title; if (target) { target = target === '_blank' ? (new Date()).valueOf() : target queryT.__target = target; } if(this.$router){ this.$router.push({ path, query: queryT }) }else{ if(top.window.SysPage && top.window.SysPage.newPage){ top.window.SysPage.newPage(title, path, queryT, "post") }else{ this.createForm(path, "_self", queryT.__push.data[0]) } } }, createForm(url, opentype, paramters) { //创建form表单 let me = this; let id = "samuuid" var formid = `${id}_form`; var temp_form = null; if (document.getElementById(formid)) { temp_form = document.getElementById(formid); temp_form.method = me.postType; temp_form.action = url; // for (var item in paramters) { // var inputObj = document.getElementById(`${id}_${item}`); // if (inputObj) { // inputObj.value = paramters[item]; // } // } } else { temp_form = document.createElement("form"); temp_form.id = `${id}_form`; temp_form.action = url; //如需打开新窗口，form的target属性要设置为'_blank' temp_form.target = opentype; //打开方式 temp_form.method = me.postType; temp_form.style.display = "none"; document.body.appendChild(temp_form); } //添加参数 for (var item in paramters) { var inputObj = document.getElementById(`${id}_${item}`); if (inputObj) { inputObj.value = paramters[item]; } else { var opt = document.createElement("input"); opt.type = "hidden"; opt.id = `${id}_${item}`; //opt.id= opt.name = item; opt.value = paramters[item]; temp_form.appendChild(opt); } } //提交数据 temp_form.submit(); }, // 选择显示数值还是百分比 onChangeShowType(type){ this.showType = this.showType == type ? '' : type }, // 右侧工具条显示列表选择显示不同分析字段的数据 changeShowAnalyseList(command){ if(command == 'none'){ this.showAnalyseList = false }else{ this.analyseListChecked = command this.showAnalyseList = true } }, // 点击选择深度分析 analyseListOnClick(row, index){ let _this = this _this.currentObj = row _this.currentObj.prop = this.curGroupField if(_this.perspective){ var index = -1 _this.deepArr.forEach((item,i)=>{ if(item.prop == _this.curGroupField){ index = i } }) if(index > -1 && index < _this.deepArr.length - 1){ _this.analysisFieldsVisible = false _this.curIndex = _this.curIndex + 1 _this.currentObj = _this.deepArr[_this.curIndex]; _this.data = _this.currentObj.data _this.curGroupField = _this.currentObj.prop; }else{ _this.analysisChartConf.datas = _this.deepAnalysisFields _this.analysisFieldsVisible = true } }else{ _this.analysisChartConf.datas = _this.deepAnalysisFields _this.analysisFieldsVisible = true } _this.superposition = false } }, mounted() { } }; </script> <style> .birtModelRight .el-main{ padding: 5px !important; } .birtModelRight table.zhc-birt-data-list{ table-layout: auto !important; /* border-collapse: initial !important; / / border-spacing: revert !important; / } .el-transfer.sam .el-transfer-panel:nth-child(1) button{ display: none; } .el-dropdown.disabled .el-button, .el-dropdown.disabled .el-button:hover{ cursor: not-allowed; color: #C0C4CC; cursor: not-allowed; background-image: none; background-color: #FFF; border-color: #EBEEF5; } .tableHeader th, .tableHeader tr{ background: linear-gradient(0deg,rgba(224,240,255,1), rgba(240,247,255,1)); } .el-form-item__label{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .recordPop{ text-align: center; } </style> <style lang="scss" scoped> .container { position: relative; display: flex; flex-direction: column; height: 100%; padding: 20px; } .btn-toolbar { + * { margin-left: 10px; margin-right: 0; } } .el-dropdown-menu__item { min-width: 90px; } .center-content { height: 100%; width: 100%; padding: 10px; box-sizing: border-box; } .depth-analysis { display: flex; align-items: center; padding: 10px; } .el-breadcrumb__item a { cursor: pointer !important; } .deepActive{ color: #06c; font-weight: 600; } .sortActive{ color: rgb(33, 235, 141); font-weight: 600; } >>>.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover{ background: initial; color: initial; } .el-dropdown-menu__item i{ font-weight: 600; margin: 0 0 0 5px; } .el-dropdown-menu__item i:hover { color: rgb(33, 235, 141); } .birtModelRight .el-main{ padding: 5px !important; } .el-icon-edit{ right: 30px; position: absolute; z-index: 1; line-height: 30px; cursor: pointer; } >>>.el-dropdown.disabled .el-button, >>>.el-dropdown.disabled .el-button:hover{ cursor: not-allowed; color: #C0C4CC; cursor: not-allowed; background-image: none; background-color: #FFF; border-color: #EBEEF5; } .chart-tool{ position: absolute; right: 10px; top:5px; i{ cursor: pointer; color: #06c; } .el-icon-close{ color: #f0797f; } .el-icon-close:hover{ color: #f50814; } .content{ margin-top: 5px; display: flex; justify-content: space-around; align-items: center; width: 150px; height: 30px; line-height: 30px; border: 1px solid #d8d863; border-radius: 5px; background: rgba(237,241,244,0.4); .iconfont{ height: 20px; line-height: 12px; } .item{ padding: 3px; border: 1px solid transparent; border-radius: 3px; } .item:hover,.item:active, .item.active{ border-color: #08df5d; } } } .el-dropdown-menu__item.active{ background-color: #ecf5ff; color: #66b1ff; } >>>.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover { background-color: #ecf5ff; color: #66b1ff; } .analyseList{ position: absolute; right: 10px; top: 45px; width: 150px; border: 1px solid #d8d863; background: #fff; .analyseList-title{ border-bottom: 1px dotted #b5b5ad; color: #000; padding: 0 10px; } .analyseList-ul{ list-style: none; margin: 0 !important; padding: 0 10px; li{ display: flex; justify-content: space-between; align-items: center; a:hover{ text-decoration: underline; color: #FF6600; } } } } </style> <template> <div class="container"> <!-- 工具条 --> <div class="btn-toolbar"> <!-- 后退 --> <el-dropdown split-button :size="size" :class="{disabled: backDisabled}" :disabled="backDisabled" @command="backCommand" @click="backClick"> <i class="el-icon-back"></i>后退 <el-dropdown-menu slot="dropdown"> <el-dropdown-item v-for="(item,index) in deepArr" :key="item.prop" :command="index" v-if="index < curIndex">{{ item.label }}</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <!-- 前进 --> <el-dropdown split-button :size="size" :class="{disabled: goDisabled}" :disabled="goDisabled" @command="goCommand" @click="goClick"> <i class="el-icon-right"></i>前进 <el-dropdown-menu slot="dropdown"> <el-dropdown-item v-for="(item,index) in deepArr" :key="item.prop" :command="index" v-if="index > curIndex">{{ item.label }}</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <!-- 排序 --> <el-dropdown split-button :size="size" class="sort" @command="sortClick"> <i class="el-icon-sort"></i>排序 <el-dropdown-menu slot="dropdown"> <el-dropdown-item :command="-1">不排序</el-dropdown-item> <el-dropdown-item v-for="(item, index) in sortArr" :key="item.prop" :command="index">{{ item.label }} <i class="el-icon-sort-down" :class="{ sortActive: index == sortIndex && sortType =='desc' }" @click="sortDown"></i> <i class="el-icon-sort-up" :class="{ sortActive: index == sortIndex && sortType =='asc' }" @click="sortUp"></i> </el-dropdown-item> </el-dropdown-menu> </el-dropdown> <!-- 列设置 --> <el-button icon="el-icon-setting" :size="size" @click="analysisClick">列设置</el-button> <!-- 图表 --> <el-dropdown :size="size" @command="chartTypeChange"> <el-button :size="size"> <i class="el-icon-s-data"></i> 图表<i class="el-icon-arrow-down el-icon--right"></i> </el-button> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="table">表格</el-dropdown-item> <el-dropdown-item command="pie">饼图</el-dropdown-item> <el-dropdown-item command="bar">柱图</el-dropdown-item> <el-dropdown-item command="line">线图</el-dropdown-item> <el-dropdown-item command="area">区域图</el-dropdown-item> <el-dropdown-item command="stack">叠加柱图</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <!-- 刷新 --> <el-button icon="el-icon-refresh" :size="size" @click="refresh">刷新</el-button> <!-- 分析记录 --> <el-popover placement="bottom" popper-class="recordPop" v-model="recordVisible"> <el-table :data="recordData" @row-dblclick="recordDblClick" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column min-width="150" prop="name" label="方案名称"> <template slot-scope="scope"> <el-input v-if="scope.row.isEdit" v-model="scope.row.name"></el-input> <span v-else>{{ scope.row.name }}</span> </template> </el-table-column> <el-table-column width="100" prop="simple" label="缩写"> <template slot-scope="scope"> <el-input v-model="scope.row.simple"></el-input> </template> </el-table-column> <el-table-column label="操作" width="150"> <template slot-scope="scope"> <el-button size="mini" type="text" v-if="!scope.row.isEdit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button size="mini" type="text" v-else @click="handleConfirm(scope.$index, scope.row)">确定</el-button> <el-button size="mini" type="text" style="color:red;" @click.stop="handleDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> <el-button type="primary" size="mini" icon="el-icon-check" style="margin: 10px 0 0;" @click.stop="doClick" :disabled="btnDisabled">执行叠加</el-button> <el-button slot="reference" icon="el-icon-edit-outline" :size="size">分析记录</el-button> </el-popover> <!-- 统计方案 --> <el-popover placement="bottom" v-model="schemeVisible"> <el-table size="mini" :data="schemeData" @row-click="schemeRowClick"> <el-table-column width="150" prop="FSCHEMENAME" label="方案列表"></el-table-column> <el-table-column label="操作" width="150"> <template slot-scope="scope"> <el-button size="mini" type="text" style="color:red;" @click.stop="handleSchemeDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> <el-button slot="reference" icon="el-icon-edit-outline" :size="size" @click="showSchemeData">方案列表</el-button> </el-popover> <!-- 叠加 --> <el-checkbox v-model="superposition" label="叠加" border :size="size" ></el-checkbox> <!-- 透视 --> <el-checkbox v-model="perspective" label="直接透视" border :size="size" ></el-checkbox> <el-button icon="el-icon-download" :size="size" :disabled="this.data && this.data.length == 0" :loading="exportLoading" @click="exportExcel">导出excel</el-button> <el-button icon="el-icon-save" :size="size" :loading="schemeLoading" @click="saveScheme">保存方案</el-button> </div> <!-- 内容区 --> <hi-layout :is-fit="true" style="heiht: 100%;"> <!-- 右侧查询面板 --> <hi-layout-right size="300" title="过滤条件"> <div style="height: calc( 100% - 342px );overflow: auto;border:none;"> <birt-work-book style="min-height: calc( 100% - 342px );" :conf="birtModelRight" :ref="birtModelRight.controlId" class="birtModelRight" ></birt-work-book> </div> <el-divider>汇总条件</el-divider> <div style="height: 180px;overflow:auto;"> <el-form @submit.native.prevent ref="havingForm" style="padding: 10px 10px 0 0;" :model="havingForm" label-width="80px" > <el-form-item v-for="(val,name,index) in havingForm" :key="name"> <span slot="label" :title="val.label"> {{ val.label }} </span> <el-col :span="10"> <el-input type="number" v-model="havingForm[name].value" size="mini" controls-position="right" @change="handleChange" :min="0"></el-input> </el-col> <el-col class="line" :span="2">-</el-col> <el-col :span="10"> <el-input type="number" v-model="havingForm[name].value2" size="mini" controls-position="right" @change="handleChange" :min="0"></el-input> </el-col> <el-col class="line" :span="2" style="text-align:center;"> <el-button v-if="val.sign == 'inRange'" size="mini" type="text" @click="signChange(name,'outRange')">内</el-button> <el-button v-else size="mini" type="text" @click="signChange(name,'inRange')">外</el-button> </el-col> </el-form-item> </el-form> </div> <el-form @submit.native.prevent ref="groupForm" style="padding: 10px 10px 0 0;" :model="groupForm" label-width="80px" > <el-form-item label="分组条件" prop="prop"> <i class="el-icon-edit" @click="showtransfer"></i> <el-select v-model="groupForm.prop" style="width: 100%;" placeholder="请选择分组条件"> <el-option v-for="item in groupFields" :label="item.label" :value="item.prop" :key="item.prop" ></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" size="mini" :loading="loading" @click="doCount" >执行查询</el-button > <el-button size="mini" @click="reset">重置</el-button> </el-form-item> </el-form> </hi-layout-right> <!-- 图表展示区 --> <hi-layout-center style="heiht: 100%;"> <div class="depth-analysis"> <span>深度分析:</span> <el-breadcrumb separator-class="el-icon-arrow-right" style="padding: 0 0 0 10px;" > <el-breadcrumb-item v-for="(item,index) in deepArr" :key="item.prop"> <span v-if="item.label.includes(',') && item.selectVal" @click="breadcrumbClick(item.prop)" :class="{ deepActive: index == curIndex }" style="cursor: pointer;"> <span v-for="(it, i) in item.label.split(',')"> {{ it }} <span style="color: rgb(255, 102, 0);margin-left:2px;" v-if="index < curIndex">{{ item.selectVal.split(',')[i] }}<span v-if="i < item.label.split(',').length - 1">,</span></span> </span> </span> <span v-else @click="breadcrumbClick(item.prop)" :class="{ deepActive: index == curIndex }" style="cursor: pointer;"> {{ item.label }} <span style="color: rgb(255, 102, 0);margin-left:2px;" v-if="index < curIndex">{{ item.selectVal }}</span> </span> </el-breadcrumb-item> </el-breadcrumb> </div> <div v-if="showDetail" style="height: calc( 100% - 100px )"> <el-table :data="data" ref="table" height="100%" border stripe :show-summary="showSummary" :summary-method="getSummaries" header-row-class-name="tableHeader" style="width: 100%" > <el-table-column v-if="showIndex" type="index"> </el-table-column> <el-table-column v-for="item in tableColumns" :key="item.prop" :prop="item.prop" :label="item.label" > </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" > </el-pagination> </div> <div v-if="!showDetail && chartType == 'table'" style="height: calc( 100% - 100px )"> <el-table :data="data" ref="table" height="100%" border stripe @row-dblclick="rowDblclick" :show-summary="showSummary" :summary-method="getSummaries" header-row-class-name="tableHeader" style="width: 100%" > <el-table-column v-if="showIndex" type="index"> </el-table-column> <el-table-column v-for="item in tableColumns" :key="item.prop" :prop="item.prop" :label="item.label" > </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" > </el-pagination> </div> <Pie-chart style="height: calc( 100% - 100px )" v-else-if="!showDetail && chartType == 'pie'" ref="chartConf" :conf="chartConf" ></Pie-chart> <Bar-chart style="height: calc( 100% - 100px )" v-else-if="!showDetail && (chartType == 'bar' \|\| chartType == 'stack') " ref="chartConf" :conf="chartConf" ></Bar-chart> <Line-chart style="height: calc( 100% - 100px )" v-else-if="!showDetail && chartType == 'line'" ref="chartConf" :conf="chartConf" ></Line-chart> <Line-chart style="height: calc( 100% - 100px )" v-else-if="!showDetail && chartType == 'area'" ref="chartConf" :conf="chartConf" ></Line-chart> </hi-layout-center> </hi-layout> <!-- 分析列 --> <el-dialog :visible.sync="analysisVisible" title="分析列设置" :height="500"> <el-table :data="analysisData" size="small" :height="400"> <el-table-column prop="countField" label="统计字段"> </el-table-column> <el-table-column prop="tableColumn" label="网格列" align="center"> <template slot="header" slot-scope="{row}"> <el-checkbox v-model="tableColumnCheck" @change="handelCheckAll('tableColumn')" label="网格列"></el-checkbox> </template> <template slot-scope="{row}"> <el-checkbox v-model="row.tableColumn"></el-checkbox> </template> </el-table-column> <el-table-column prop="tableColumn" label="网格合计列" align="center"> <template slot="header" slot-scope="{row}"> <el-checkbox v-model="tableColumnCountCheck" @change="handelCheckAll('tableColumnCount')" label="网格合计列"></el-checkbox> </template> <template slot-scope="{row}"> <el-checkbox v-model="row.tableColumnCount"></el-checkbox> </template> </el-table-column> <el-table-column prop="tableColumn" label="图表列" align="center"> <template slot="header" slot-scope="{row}"> <el-checkbox v-model="chartColumnCheck" @change="handelCheckAll('chartColumn')" label="图表列"></el-checkbox> </template> <template slot-scope="{row}"> <el-checkbox v-model="row.chartColumn"></el-checkbox> </template> </el-table-column> <el-table-column prop="chartColumnCount" label="图表列汇总" align="center"> <template slot="header" slot-scope="{row}"> <el-checkbox v-model="chartColumnCountCheck" @change="handelCheckAll('chartColumnCount')" label="图表列汇总"></el-checkbox> </template> <template slot-scope="{row}"> <el-checkbox v-model="row.chartColumnCount"></el-checkbox> </template> </el-table-column> <el-table-column label="操作" width="150"> <template slot-scope="scope"> <el-button size="mini" type="text" @click="columnUp(scope.$index, scope.row)">上移</el-button> <el-button size="mini" type="text" @click="columnDown(scope.$index, scope.row)">下移</el-button> </template> </el-table-column> </el-table> </el-dialog> <!-- 分析字段 --> <el-dialog :visible.sync="analysisFieldsVisible" title="选择分析字段" :height="500"> <Pie-chart style="height: 400px;" ref="analysisChart" :conf="analysisChartConf" ></Pie-chart> </el-dialog> <!-- 穿梭框(修改分组字段) --> <el-dialog :visible.sync="transferVisible" title="选择分组字段" :height="500" width="640px" center @close="transferClose"> <el-transfer class="sam" v-model="groupFieldsEdit" :data="conf.groupFields" :titles="['来源字段', '目标字段']" target-order="push" :props="{ key: 'prop', label: 'label' }" style="width: 100%;padding: 20px;"> <span slot-scope="{ option }">{{ option.label }} <el-button style="margin-left: 10px;" icon="el-icon-top" type="primary" size="mini" circle @click.stop="transferUp(option)"></el-button> <el-button icon="el-icon-bottom" type="primary" size="mini" circle @click.stop="transferDown(option)"></el-button> </span> </el-transfer> <span slot="footer" class="dialog-footer"> <el-button @click="transferClose" size="small">取消</el-button> <el-button type="primary" size="small" @click="transferConfirm">确定</el-button> </span> </el-dialog> </div> </template> <script> import { QueryStyleFactory } from "../templates/query-panel/QueryStyleFactory"; import { GridSingleSelect } from "../templates/GridSingleSelect"; import { getToken } from "../../utils/auth"; import { HiLayout, HiLayoutLeft, HiLayoutRight, HiLayoutTop, HiLayoutBottom, HiLayoutCenter } from "hi-ui"; import debounce from 'lodash/debounce' import cloneDeep from 'lodash/cloneDeep' export default { name: "AnalysisSam", props:{ conf:{ type: Object, } }, components:{ HiLayout, HiLayoutLeft, HiLayoutRight, HiLayoutTop, HiLayoutBottom, HiLayoutCenter }, computed: { // 后退 backDisabled(){ return this.curIndex === 0 }, // 前进 goDisabled(){ return this.curIndex == this.deepArr.length - 1 }, // 表格列 tableColumns() { if(this.showDetail){ return this.dataFields }else{ // 组合分组条件分成多个列 let list = this.curGroupField.split(',') // 获取当前分组列 let curGroupArr = this.groupFields.filter(item =>{ return list.includes(item.prop) }) let arr = [] // 执行叠加后，网格添加冗余字段 if(this.superposition){ let newFields = [] let dataList = [] for(let key in this.selectionData){ let selData = this.selectionData[key] let id = selData.id let simple = selData.simple for(let anaField of this.analyseFields){ let obj = {} obj.prop = anaField.prop + '-' + id; obj.label = anaField.label + '-' + simple; newFields.push(obj) } let keyAnalyse = this.analyseFields.map(item =>{ return item.prop }) let data = selData.data.map(sData =>{ for(let key of keyAnalyse){ sData[key+'-'+id] = sData[key] } return sData }) selData.data = data dataList = dataList.concat(data) } // 去重 let keyList = dataList.map(item =>{ return item[this.curGroupField] }) keyList = Array.from(new Set(keyList)) if(keyList && keyList.length){ let newData = [] for(let key in keyList){ let obj = { [this.curGroupField]:keyList[key] }; for(let field of newFields){ obj[field.prop] = 0 } for(let sData of this.selectionData){ // 组合分组 if(this.curGroupField.indexOf(',') > -1){ }else{ let keyArr = sData.data.map(item =>{ return item[this.curGroupField] }) let i = keyArr.indexOf(keyList[key]) if(i > -1){ obj = {...obj, ...sData.data[i]} }else{ for(let j in sData.data[0]){ obj[j+'-'+sData.id] = 0 } } } } newData[key] = obj } this.data = newData }else{ this.data = [] } arr = curGroupArr.concat(newFields) }else{ // 当前分组列+分析列 arr = curGroupArr.concat(this.analyseFields) if(arr && arr.length){ this.sortArr = arr } } arr = arr.filter(item =>{ var show = true this.analysisData.forEach(data =>{ if(data.prop == item.prop){ show = data.tableColumn } }) return show }) return arr } }, showIndex(){ return this.conf && this.conf.showIndex \|\| false }, // 网格是否显示合计行 showSummary(){ let flag = false this.analysisData.some(item =>{ flag = item.tableColumnCount return flag }) return flag }, // 数据列 dataFields(){ return this.conf && this.conf.dataFields \|\| [] }, // 图表配置 chartConf() { debugger let groupBy = this.curGroupField; let calcFields = [] // 系列 var series = []; const tooltipOption = { trigger: 'item', axisPointer: { type: 'shadow' }, } let analysisList = this.analysisData.filter(item =>{ return item.chartColumn }) calcFields = analysisList.map(item =>{ let obj = { name: item.prop, title: item.label } series.push({tooltip: tooltipOption}) return obj }) let controlName = '' let datas = this.data // 组合分组条件时，数据添加组合列 if(groupBy.includes(',')){ let keyArr = groupBy.split(','); datas = datas.map(item =>{ let label = [] for(let key of keyArr){ label.push(item[key]) } label=label.join(); item[groupBy] = label return item }) } controlName = this.chartType == "pie" ? "PieChart" : this.chartType == "bar" ? "BarChart" : this.chartType == "stack" ? "BarChart" : this.chartType == "line" ? "LineChart" : this.chartType == "area" ? "LineChart" : 'PieChart' // 区域图 let areaSeries = calcFields.map(item =>{ return { smooth: true, areaStyle: { normal: { color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "rgba(30, 231, 231, 0.3)" },{ offset: 1, color: "rgba(30, 231, 231, 0.1)" }]), }, }, label: { show: false, position: "outside", }, } }) // 饼图 let pieSeries = [] if(this.chartType == "pie"){ let len = calcFields.length switch(len){ case 1: pieSeries = []; break; case 2: pieSeries = [ { radius: ["50%"], center: ["25%", "50%"], }, { radius: ["50%"], center: ["75%", "50%"], }, ] break; case 3: pieSeries = [ { radius: ["50%"], center: ["25%", "50%"], }, { radius: ["35%"], center: ["75%", "30%"], }, { radius: ["35%"], center: ["75%", "70%"], }, ] break; case 4: pieSeries = [ { radius: ["35%"], center: ["25%", "30%"], }, { radius: ["35%"], center: ["25%", "70%"], }, { radius: ["35%"], center: ["75%", "30%"], }, { radius: ["35%"], center: ["75%", "70%"], }, ] break; } } /// 叠加柱图 let stackSeries = calcFields.map(item =>{ return { stack: '总量' } }) const conf = { controlName: controlName, controlId: "chart_controlid", height: "100%", isGroupData: true, groupBy: groupBy, datas: datas, calcFields: calcFields, option: { legend: { show: true }, series: this.chartType == "area" ? areaSeries : this.chartType == "stack" ? stackSeries : this.chartType == "pie" ? pieSeries : series }, events:{ click(row){ let _this = this.$parent.$parent.$parent; _this.currentObj = row.data _this.currentObj.prop = _this.curGroupField; if(_this.perspective){ var index = -1 _this.deepArr.forEach((item,i)=>{ if(item.prop == _this.curGroupField){ index = i } }) if(index > -1 && index < _this.deepArr.length - 1){ _this.analysisFieldsVisible = false _this.curIndex = _this.curIndex + 1 _this.currentObj = _this.deepArr[_this.curIndex]; _this.data = _this.currentObj.data _this.curGroupField = _this.currentObj.prop; }else{ _this.analysisChartConf.datas = _this.deepAnalysisFields _this.analysisFieldsVisible = true } }else{ _this.analysisChartConf.datas = _this.deepAnalysisFields _this.analysisFieldsVisible = true } _this.superposition = false } } }; return conf }, // 深度分析字段列表 deepAnalysisFields(){ let fields = this.groupFields if(fields && fields.length == 0){ return [] } let analysisFields = fields.map((item) => { item.value = 1 return item }); // 排除已经统计的分析列 if(this.deepArr && this.deepArr.length > 0){ let arrnew = this.deepArr.slice(0, this.curIndex + 1).map((item) => { return item.prop }); // 多条件的分组拆开排除 arrnew.forEach(item =>{ if(item.includes(',')){ arrnew.concat(item.split(',')) } }) analysisFields = analysisFields.filter(item =>{ return arrnew.indexOf(item.prop) < 0 }) } // 添加详情 analysisFields.push( { prop: 'detail', label: "详情", value: 1 } ) return analysisFields }, // 查询字段 queryFields(){ let queryFields = [] let fields = this.conf && this.conf.queryFields if(!fields \|\| fields.length == 0){ queryFields = [] }else{ queryFields = fields.map(item =>{ let obj = {} obj.prop = item.prop; obj.label = item.label; if(item.props && item.props.lookup){ let model = item.props.lookup if(item.element === 'hi-select-grid'){ var columns = [] if(model && model.columns && model.columns.length){ columns = model.columns.map(item =>{ item.prop = item.name return item }) } let table = model.tableprops \|\| {} table['columns'] = columns obj.lookup = { type: "data", openstyle: 'selectgrid', bindField: item.prop, lookSelectGrid: { width: 1200, height: 600, table: table, bindField: item.prop }, } if(model && model.sourceDatas){ obj.lookup.lookSelectGrid['tableData'] = model && model.sourceDatas } if(model && model.modelFile){ obj.lookup['lookDataset'] = { modelFilePath: this.conf.dataset.controlId, showSearchField: true } } obj.dbtype = 'dbString' }else if(item.element === 'hi-data-select'){ var columns = [] if(model && model.columns && model.columns.length){ columns = model.columns.map(item =>{ item.prop = item.name return item }) } let queryOptionFields = model.queryOption && model.queryOption.fields let store = model.storeCfg \|\| model.sourceDsCfg let modelFilePath = store.modelFile let fields = store.fields if(!(queryOptionFields && queryOptionFields.length)){ return } let rows = queryOptionFields.map(item =>{ return {children:[ { prop: item.name, label: item.label } ]} }); let cols = queryOptionFields.map(item =>{ return { colWidth: 100} }); let queryPanel = { rows: rows, cols: cols }; let tableColumn = model.columns.map(item =>{ return { prop: item.name, label: item.label } }) // var table = model.tableprops \|\| {} var table = { children:tableColumn, stripe: model.tableprops && model.tableprops.stripe \|\| false } let ds = { controlName: "HcDataset", controlId: modelFilePath, name: model.entityDs, modelFilePath: modelFilePath, _infcPagging: { pageSize: 10, pageNum: 1, returnCount: true }, _infcLoad: { autoActive: true, }, fields: fields, data: [], } obj.lookup = { type: "data", openstyle: 'dialog', birtModel: GridSingleSelect({ mainDataset: ds, hcQueryPanel: queryPanel, hcTable: table }), lookDataset: { modelFilePath: modelFilePath, // 数据模型路径 showSearchField: true }, lookDialog: { title: "", width: 900, height: 600, }, bindField: item.prop, sourceDsId: model.sourceDsId } obj.dbtype = 'dbString' } } // 时间方案 if(item.props && item.element == 'hi-time-scheme'){ obj.dbtype = 'dbDatetime' obj.format = item.props.format obj.element = 'hi-time-scheme' obj.disabledEx = item.disabledEx obj.viewStyle = { viewStyleId: 'DATERANGE', type: item.props.rangeType, format: item.props.format } } return obj }) } return queryFields }, // 数据集字段 fields(){ let fields = this.conf.dataset && this.conf.dataset.config.fields for(let key in this.queryFields){ let prop = this.queryFields[key].prop if(fields[prop] && fields[prop].lookup){ let lookup = Object.assign(fields[prop].lookup, this.queryFields[key].lookup) // 下拉枚举查找 if(lookup.label && lookup.returnFields){ for(let key in lookup.returnFields){ if(lookup.returnFields[key] == lookup.label && lookup.lookSelectGrid){ lookup.bindShowField = key lookup.lookSelectGrid.bindShowField = key } if(lookup.lookSelectGrid && lookup.lookSelectGrid.tableData){ let data = lookup.lookSelectGrid.tableData for(let i in data){ if(data[i][lookup.returnFields[key]]){ data[i][key] = data[i][lookup.returnFields[key]] } } } } } // 数据模型查找 if(lookup.fieldPair){ if(lookup.sourceDsId){ lookup.returnFields = lookup.fieldPair[lookup.sourceDsId].returnFields }else{ let key = Object.keys(lookup.fieldPair)[0] lookup.returnFields = lookup.fieldPair[key].returnFields } } lookup.returnType = "single", fields[prop]['lookup'] = lookup } // 时间方案 if(fields[prop] && this.queryFields[key].element == 'hi-time-scheme'){ let fd = this.queryFields[key] fields[prop].dbtype = 'dbDatetime' fields[prop].format = fd.format fields[prop].disabledEx = fd.disabledEx } } // 应用默认填充表达式 for(let key in fields){ if(fields[key].default && fields[key].default.exps){ fields[key].default['expr'] = fields[key].default.exps } } return fields }, // 数据集 dataset(){ var dataset = {} if(this.conf && this.conf.dataset){ let ds = this.conf.dataset dataset = { controlName: ds.controlName, controlId: ds.controlId, name: ds.name, modelFilePath: ds.modelFilePath, fields: this.fields, _infcLoad: { autoActive: false }, _infcPagging: { returnCount: true, pageSize: 100, pageNum: 1 }, data: [], } } return dataset }, // 查询面板 birtModelRight(){ let rows = this.queryFields.map(item =>{ return {children:[item],colspan: 12} }) let cols = this.queryFields.map(item =>{ return { colWidth: 60 } }) const queryPanel = { rows: rows, cols: cols }; let hcQueryPanel = { controlName: "HcQueryPanel", controlId: "HcQueryPanel_sam", inline: false, dataset: this.dataset && this.dataset.controlId \|\| "dsSam", size: "small", hideBtn: true, style: "width: 100%;", children: [], }; Object.assign(hcQueryPanel, QueryStyleFactory.buildForm(queryPanel) \|\| {}); let birtModelRight = { controlName: "BirtWorkBook", controlId: "BirtWorkBook_right", style: "border-bottom: 1px solid #eee;", showToolBar: false, children: [ { controlName: "BirtSheet", controlId: "BirtSheet_right", name: "sheet0", pageIndex: 0, dataSets: [{ controlName: "HcDataset", controlId: "dsScheme", name: "SysSchemeBizEntity", rowKey: "FGUID", modelFilePath: "/platf/scheme/entity/SysSchemeBizEntity.xml", _infcLoad: { autoActive: false, __zcQuery: true }, _infcPagging: { _isAddingPagging: false, pageSize: -1, }, fields: {}, data: [], }].concat(this.dataset ? this.dataset : []), children: [ { controlName: "BirtFormSheet", controlId: "BirtFormSheet_01", children: [hcQueryPanel] } ] } ], }; return birtModelRight }, // 分组条件(统计字段) groupFields(){ let groupFields = this.conf && cloneDeep(this.conf.groupFields) \|\| [] // 组合分组条件 if(this.curTransferVal && this.curTransferVal.length){ let obj = {} let curTransferLabel = this.curTransferVal.map(item =>{ for(var field of groupFields){ if(field.prop == item){ return field.label } } }) obj = { prop: this.curTransferVal.join(), label: curTransferLabel.join() } groupFields.push(obj) } return groupFields }, // 分析字段 analyseFields(){ return this.conf && this.conf.analyseFields \|\| [] }, // 显示详情 showDetail(){ return this.currentObj.prop == 'detail' }, // 执行叠加按钮 btnDisabled(){ return !this.selectionData \|\| this.selectionData.length < 2 } }, watch:{ conf:{ deep: true, handler: function(val){ if(val && val.groupFields && !this.groupForm.prop){ this.groupForm.prop = val.groupFields[0] && val.groupFields[0].prop this.curGroupField = this.groupForm.prop } if(val && val.analyseFields && val.analyseFields.length){ this.analysisData=val.analyseFields.map(item =>{ let obj = { prop: item.prop, label: item.label, countField: item.label, tableColumn: true, tableColumnCount: true, chartColumn: true, chartColumnCount: true, } return obj }) } } }, }, data() { return { size: 'small', superposition: false, perspective: false, chartType: "table", groupForm: { prop: "" }, loading: false, currentPage: 1, pageSize: 100, pageSizes: [10,20,50,100], total: 0, data: [], // 排序 sortArr:[], sortIndex:-1, sortType: '', // 分析列 analysisVisible: false, analysisData:[], tableColumnCheck: true, tableColumnCountCheck: true, chartColumnCheck: true, chartColumnCountCheck: true, // 分析字段 analysisFieldsVisible: false, analysisFieldsArr:[], analysisChartConf:{ controlName: "PieChart", controlId: "chart_analysis", height: "100%", isGroupData: true, groupBy: "label", datas: [], calcFields: [ { name: "value", title: "" } ], option: { legend: { show: true } }, events:{ click(row){ debugger; var _this = this.$parent.$parent; _this.analysisChartConf.datas = _this.deepAnalysisFields let data = JSON.parse(JSON.stringify(row.data)) delete data.emphasis // 删除当前分析以后的深度分析 _this.deepArr.splice(_this.curIndex+1, _this.deepArr.length - _this.curIndex - 1) let obj = _this.deepArr[_this.deepArr.length -1] if(_this.currentObj.name){ obj.selectVal = _this.currentObj.name }else{ if(_this.currentObj.prop.includes(',')){ let selectVal = [] let arr = _this.currentObj.prop.split(',') selectVal = arr.map(item =>{ return _this.currentObj[item] }) obj.selectVal = selectVal.join() }else{ obj.selectVal = _this.currentObj[_this.currentObj.prop] } } _this.$set(_this.deepArr,_this.curIndex,obj) _this.$set(_this.deepArr,_this.curIndex + 1, data) _this.curGroupField = data.prop; _this.currentObj = data; _this.curIndex = _this.curIndex + 1; _this.doQuery(); _this.analysisFieldsVisible = false; } } }, // 深度分析 deepArr:[], conf:{}, // 图表当前选中对象 currentObj:{}, // 当前分组字段 curGroupField: '', // 深度分析当前环节下标 curIndex: 0, exportLoading: false, // 穿梭框 transferVisible: false, curTransferVal: [], groupFieldsEdit: [], schemeLoading: false, havingForm:{}, // 分析记录 recordVisible: false, recordData:[], // 已勾选记录 selectionData: [], // 统计方案 schemeData:[], schemeVisible: false, // 是否监听 isMonitor: false, // 底部汇总数据 bottomSummary: {}, // 是否查询面板查询 isQueryModel: false } }, updated() { this.$nextTick(() => { this.$refs["table"] && this.$refs["table"].doLayout(); }); }, methods: { // 排序 sortClick(val) { this.sortIndex = val this.doQuery(); }, sortDown(){ this.sortType = 'desc' }, sortUp(){ this.sortType = 'asc' }, // 前进 goCommand(index){ this.curIndex = index; this.currentObj = this.deepArr[index]; this.curGroupField = this.currentObj.prop; this.data = this.currentObj.data }, goClick:debounce(function(){ if(this.curIndex < this.deepArr.length - 1){ this.curIndex = this.curIndex + 1; this.currentObj = this.deepArr[this.curIndex]; this.curGroupField = this.currentObj.prop; this.data = this.currentObj.data } },500), // 后退 backCommand(val){ this.curIndex = val this.currentObj = this.deepArr[val]; this.curGroupField = this.currentObj.prop; this.data = this.currentObj.data }, backClick:debounce(function(){ if(this.curIndex > 0){ this.curIndex = this.curIndex - 1 this.currentObj = this.deepArr[this.curIndex]; this.curGroupField = this.currentObj.prop; this.data = this.currentObj.data } },500), // 深度分析 breadcrumbClick(val) { this.curGroupField = val let arrnew = this.deepArr.map(item =>{ return item.prop }) this.curIndex = arrnew.indexOf(val) this.currentObj = this.deepArr[this.curIndex]; // 数据替换成缓存的数据 this.data = this.currentObj.data }, // 点击表格 rowDblclick(row){ this.currentObj = row this.currentObj.prop = this.curGroupField; this.superposition = false if(this.perspective){ var index = -1 this.deepArr.forEach((item,i)=>{ if(item.prop == this.curGroupField){ index = i } }) if(index > -1 && index < this.deepArr.length - 1){ this.analysisFieldsVisible = false this.curIndex = this.curIndex + 1 this.currentObj = this.deepArr[this.curIndex]; this.data = this.currentObj.data this.curGroupField = this.currentObj.prop; }else{ this.analysisChartConf.datas = this.deepAnalysisFields this.analysisFieldsVisible = true } }else{ this.analysisChartConf.datas = this.deepAnalysisFields this.analysisFieldsVisible = true } }, // 点击查询 doCount() { debugger; // 叠加状态下不执行查询操作 if(this.superposition){ return } // 监听数据集 if(this.dataset){ let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] if(!this.isMonitor){ ds && ds.on("afterLoadData", this.afterLoadData); this.isMonitor = true } this.loading = true; let prop = this.groupForm.prop; let fields = this.groupFields.map(item =>{ return item.prop }) this.curGroupField = prop; let index = fields.indexOf(prop) if(this.deepArr.length){ // 如果切换了分组条件，清空深度分析 if(this.deepArr[0] && this.deepArr[0].prop !== prop){ this.deepArr = [] this.currentObj = this.groupFields[index] this.recordData = [] }else{ this.currentObj = this.deepArr[0] } } this.currentPage = 1 let queryModel = ds.getQueryModel() this.doQuery(queryModel); // 添加分析记录 let obj = {} if(Object.keys(queryModel).length === 0){ obj = { id: 'empty', name: '空条件', prop: this.groupForm.prop, } }else{ let keyArr = []; let labelArr = []; for(let key in queryModel){ if(queryModel[key] \|\| queryModel[key] === 0){ keyArr.push(key); // let arr = this.queryFields.filter(item =>{ // return item.prop == key // }) labelArr.push(queryModel[key]); } }; if(keyArr.length && labelArr.length){ obj = { id: keyArr.join() + '_' + labelArr.join(), name: labelArr.join(), prop: this.groupForm.prop, } }else{ obj = { id: 'empty', name: '空条件', prop: this.groupForm.prop, } } } // 判断分析记录中是否含有此条件，有则跳过，无则添加 const ids = this.recordData.map(value=>value.id); if(!ids.includes(obj.id)){ this.isQueryModel = true let simple = this.recordData.length + 1; obj.simple = simple obj.isEdit = false this.recordData.push(obj); }else{ this.isQueryModel = false } // 当前分组加入深度分析 if(index < 0){ this.$message.error('当前分组条件不在分组字段中，请重新配置') }else{ this.$set(this.deepArr,0,this.groupFields[index]) this.curIndex = 0 }; } }, afterLoadData(datas){ let newData = datas let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] if(datas && datas.length){ newData = datas.map(item =>{ return ds && ds.getFormatRecd(item) }) } this.data = newData // 缓存数据 this.deepArr[this.curIndex].data = newData; // 总条数 this.total = ds._infcPagging.recordCount \|\| this.total; // 底部汇总数据 this.bottomSummary = ds.getBottomSummeryRecd(); // 添加分析记录 if(!this.isQueryModel) return this.recordData[this.recordData.length - 1].data = datas }, // 查询方法 doQuery(model){ let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] if(this.showDetail){ ds._infcPagging = { _isPagging: true, pageSize: this.pageSize, pageNum: this.currentPage, returnCount: true }; ds._infcStat = {} ds._infcSort = {} }else{ ds._infcPagging = { _isPagging: true, pageSize: this.pageSize, pageNum: this.currentPage, returnCount: true }; ds._infcStat = { isGroupData: true, groupBy: this.curGroupField, __bottomSummary: true } if(this.sortIndex > -1){ let obj = this.sortArr[this.sortIndex] ds._infcSort.orderBy =[{ name: obj.prop, desc: obj.label, type: this.sortType \|\| 'desc' }] }else{ ds._infcSort.orderBy = [] } if(this.havingForm){ let _infcHaving = {}; for(let item in this.havingForm){ let obj = JSON.parse(JSON.stringify(this.havingForm[item])) let val = obj.value let val2 = obj.value2 if(val === undefined && val === undefined){ }else if((val \|\| val === 0) && (val2 \|\| val2 === 0)){ _infcHaving[item] = obj }else{ if(obj.sign == 'inRange'){ obj.sign = 'lteq' }else{ obj.sign = 'gt' } _infcHaving[item] = obj } } ds._infcHaving = _infcHaving } } if(model){ ds.setQueryModel(model) }else if(this.deepArr && this.deepArr.length > 0){ let queryModel = {} this.deepArr.forEach(item =>{ if(item.prop && item.selectVal){ if(!item.prop.includes(",")){ queryModel[item.prop] = item.selectVal }else{ let arr = item.prop.split(',') arr.forEach((it,i) =>{ queryModel[it] = item.selectVal && item.selectVal.split(',')[i] }) } } }) ds.setQueryModel(queryModel) }else{ ds._infcLoad.queryModel = {} } ds.query(); this.loading = false; }, // 重置 reset() { this.$refs.groupForm.resetFields(); this.$refs.havingForm.resetFields(); this.havingForm = JSON.parse(JSON.stringify(this.conf.havingForm)); this.curTransferVal = [] this.groupForm.prop = this.groupFields[0] && this.groupFields[0].prop; var queryPanel = this.$refs.BirtWorkBook_right.$children[0].$children[0].$children[0].$children[0].$children[0].$children[0]; queryPanel.reset(); let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] ds._infcLoad.queryModel={} }, handleSizeChange(val) { this.pageSize = val this.doQuery() }, handleCurrentChange(val) { this.currentPage = val this.doQuery() }, // 切换图表 chartTypeChange(command) { this.chartType = command; }, // 打开分析列 analysisClick(){ this.analysisVisible = true }, // 分析列全选 handelCheckAll(val){ let _this = this this.analysisData = this.analysisData.map(item => { if(val == 'tableColumn') { item.tableColumn = _this.tableColumnCheck } if(val == 'tableColumnCount') { item.tableColumnCount = _this.tableColumnCountCheck } if(val == 'chartColumn') { item.chartColumn = _this.chartColumnCheck } if(val == 'chartColumnCount') { item.chartColumnCount = _this.chartColumnCountCheck } return item }) }, // 分析列上移 columnUp(index,row){ let arr = this.analysisData if(index > 0){ arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1])); } }, columnDown(index, row){ let arr = this.analysisData if(index < arr.length){ arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index])); }; }, // 刷新 refresh(){ this.doQuery(); this.$refs.chartConf && this.$refs.chartConf.refreshChart(); }, // 导出 exportExcel() { let param = { pageNum: -1, pageSize: -1, __slaveExport: false, }; let __body = {}; let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] var cdion = ds.lastLoadCdion console.log('cdion', cdion) if (cdion) { __body['queryCdions'] = JSON.parse(cdion); } if(this.curGroupField !== 'detail'){ __body['groupBy'] = this.curGroupField } param['modelFilePath'] = ds['modelFilePath']; param['__funcpath'] = ds['__funcpath']; param.__body = __body let sheetStyle = {} let cells = [] let columns = [] this.tableColumns.forEach(item => { cells.push({ title: item.label, colspan: 1, rowspan: 1 }) columns.push({ field: item.prop, width: 170 }) }); sheetStyle = { name: '统计分析', titleRows: [ { cells: cells } ], columns: columns } param.__sheetStyle = sheetStyle var time = new Date().getTime() var title = `统计分析${time}` var data = { title: title, __sheetDatas: JSON.stringify([param]) } var url = this.$HI.exportUrl this.exportLoading = true this.$HI.request.post(url,data).then((res) =>{ console.log('res', res) this.exportLoading = false if(res.status == 200){ let token = getToken(); var url = this.$HI.download + `?path=${res.dataPack.path}&access_token=${token}` url = url.replace(/\\/g,"/") const a = document.createElement('a') //创建a标签 a.style.display = 'none' a.href = url // 指定下载链接 a.download = title //指定下载文件名 a.click() //触发下载 } }).catch((e) =>{ this.exportLoading = false }) }, // 打开穿梭框 showtransfer(){ this.groupFieldsEdit = JSON.parse(JSON.stringify(this.curTransferVal)) this.transferVisible = true }, transferConfirm(){ if(this.groupFieldsEdit && this.groupFieldsEdit.length > 1){ this.curTransferVal = JSON.parse(JSON.stringify(this.groupFieldsEdit)) this.groupForm.prop = this.curTransferVal.join(); this.curGroupField = this.groupForm.prop; this.transferVisible = false }else{ this.$message.error("该分组选项已存在") } }, transferClose(){ this.transferVisible = false this.groupFieldsEdit = JSON.parse(JSON.stringify(this.curTransferVal)) }, transferUp(option){ let arr = this.groupFieldsEdit let index = this.groupFieldsEdit.indexOf(option.prop) if(index > 0){ arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1])); } }, transferDown(option){ let arr = this.groupFieldsEdit let index = this.groupFieldsEdit.indexOf(option.prop) if(index < arr.length){ arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index])); }; }, // 合计列 getSummaries(parma){ const { columns, data } = parma; const sums = []; // let arr = this.analyseFields.map(item =>{ // return item.prop // }) columns.forEach((column, index) => { let show = true this.analysisData.forEach(item =>{ if(item.prop == column.property){ show = item.tableColumnCount } }) // if(arr.includes(column.property) && show){ // let values = data.map(item => Number(item[column.property])); // sums[index] = values.reduce((prev, curr) => { // const value = Number(curr); // if (!isNaN(value)) { // return prev + curr; // } else { // return prev; // } // }, 0); if(this.bottomSummary && this.bottomSummary[column.property] && show){ sums[index] = this.bottomSummary[column.property] }else{ sums[index] = ''; } }) sums[0] = '统计' return sums; }, // 分析列表 handleEdit(index, row){ row.isEdit = true this.recordData[index] = row }, handleConfirm(index, row){ row.isEdit = false this.recordData[index] = row }, handleDelete(index, row){ this.recordData.splice(index, 1) }, // 执行叠加 doClick(){ this.superposition = true this.recordVisible = false this.curGroupField = this.recordData[0].prop this.curIndex = 0 }, // 分析记录勾选 handleSelectionChange(row){ this.selectionData = row }, // 双击 recordDblClick(row){ this.curIndex = 0 this.data = row.data this.deepArr[0].data = row.data this.currentObj.data = row.data }, signChange(val,sign){ this.havingForm[val]['sign'] = sign }, // 统计方案 schemeRowClick(row){ if(row.FCONTENT){ this.reset(); let conf = JSON.parse(row.FCONTENT); if(conf.deepList){ this.deepArr = conf.deepList } if(conf.curGroupField){ this.curGroupField = conf.curGroupField } if(conf.queryModel){ let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] ds.setQueryModel(conf.queryModel) let queryPanel = this.$refs.BirtWorkBook_right.$children[0].$children[0].$children[0].$children[0].$children[0].$children[0]; queryPanel.bindModel = conf.queryModel } if(conf.groupForm){ this.groupForm = conf.groupForm } if(conf.havingForm){ this.havingForm = conf.havingForm } if(conf.sortIndex){ this.sortIndex = conf.sortIndex } if(conf.sortType){ this.sortType = conf.sortType } if(conf.data){ this.data = conf.data } if(conf.currentObj){ this.currentObj = conf.currentObj } if(conf.total){ this.total = conf.total } if(conf.curTransferVal){ this.curTransferVal = conf.curTransferVal } if(conf.perspective){ this.perspective = conf.perspective }else{ this.perspective = false } if(conf.superposition){ this.superposition = conf.superposition }else{ this.superposition = false } } this.schemeVisible = false this.doCount() }, showSchemeData(){ let url = '/data/query'; let funcurl = window.location.pathname \|\| '' let queryCdions = { join: 'and', items: [ { sign: "eq", name: "FFUNCURL", dataType: "string", value: funcurl, enable: true, }, ], } var data = { modelFilePath: "/platf/scheme/entity/SysSchemeBizEntity.xml", pageSize:-1, __body:JSON.stringify({queryCdions: queryCdions}), __bottomSummary: false, // __funcpath: "/eap5csxm/KongJianCeShi/TongJiFenXi/TongJiFenXiCeShi/func/TongJiFenXiRenYuan.func", __zcQuery: true } this.$HI.request.post(url, data).then((res) =>{ this.schemeData = res.dataPack && res.dataPack.rows }).catch(e=>{ console.error(e) }) }, // 保存方案 saveScheme(){ let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] let content = { deepList: this.deepArr, curGroupField: this.curGroupField, queryModel: ds.getQueryModel(), havingForm: this.havingForm, groupForm: this.groupForm, sortIndex: this.sortIndex, sortType: this.sortType, data: this.data, currentObj:this.currentObj, perspective: this.perspective, superposition: this.superposition, total:this.total, curTransferVal:this.curTransferVal } let data = { pushType: "add", dataset: "dsScheme", pushAddType: "map", data:[{ FFUNCURL: window.location.pathname \|\| window.location.href, FCONTENT: JSON.stringify(content), }] } this.openByPath('/platf/scheme/func/add.func', {__push: data,__funcpath:'/platf/scheme/func/add.func'},{title: '方案保存'}) }, handleSchemeDelete(index, data){ let url = '/data/save' let removeData = { ...data, $state:"rsDelete", $old:data } let body = [{ modelFilePath:"/platf/scheme/entity/SysSchemeBizEntity.xml", data:[removeData] }] let rData = { __body: JSON.stringify(body) } this.$HI.request.post(url, rData).then((res) =>{ this.$message.success('方案删除成功') this.schemeData.splice(index, 1) }).catch(e=>{ this.$message.error(e) }) }, // 保存方案下推 openByPath(path, query, { title, target } = {}) { query = query \|\| {}; let queryT = {} Object.assign(queryT, query \|\| {}); if (title) queryT.__title = title; if (target) { target = target === '_blank' ? (new Date()).valueOf() : target queryT.__target = target; } if(this.$router){ this.$router.push({ path, query: queryT }) }else{ if(top.window.SysPage && top.window.SysPage.newPage){ top.window.SysPage.newPage(title, path, queryT, "post") }else{ this.createForm(path, "_self", queryT.__push.data[0]) } } }, createForm(url, opentype, paramters) { //创建form表单 let me = this; let id = "samuuid" var formid = `${id}_form`; var temp_form = null; if (document.getElementById(formid)) { temp_form = document.getElementById(formid); temp_form.method = me.postType; temp_form.action = url; // for (var item in paramters) { // var inputObj = document.getElementById(`${id}_${item}`); // if (inputObj) { // inputObj.value = paramters[item]; // } // } } else { temp_form = document.createElement("form"); temp_form.id = `${id}_form`; temp_form.action = url; //如需打开新窗口，form的target属性要设置为'_blank' temp_form.target = opentype; //打开方式 temp_form.method = me.postType; temp_form.style.display = "none"; document.body.appendChild(temp_form); } //添加参数 for (var item in paramters) { var inputObj = document.getElementById(`${id}_${item}`); if (inputObj) { inputObj.value = paramters[item]; } else { var opt = document.createElement("input"); opt.type = "hidden"; opt.id = `${id}_${item}`; //opt.id= opt.name = item; opt.value = paramters[item]; temp_form.appendChild(opt); } } //提交数据 temp_form.submit(); } }, mounted() { } }; </script> <style> .birtModelRight .el-main{ padding: 5px !important; } .birtModelRight table.zhc-birt-data-list{ table-layout: auto !important; /* border-collapse: initial !important; / / border-spacing: revert !important; / } .el-transfer.sam .el-transfer-panel:nth-child(1) button{ display: none; } .el-dropdown.disabled .el-button, .el-dropdown.disabled .el-button:hover{ cursor: not-allowed; color: #C0C4CC; cursor: not-allowed; background-image: none; background-color: #FFF; border-color: #EBEEF5; } .tableHeader th, .tableHeader tr{ background: linear-gradient(0deg,rgba(224,240,255,1), rgba(240,247,255,1)); } .el-form-item__label{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .recordPop{ text-align: center; } </style> <style lang="scss" scoped> .container { position: relative; display: flex; flex-direction: column; height: 100%; padding: 20px; } .btn-toolbar { + * { margin-left: 10px; margin-right: 0; } } .el-dropdown-menu__item { min-width: 90px; } .center-content { height: 100%; width: 100%; padding: 10px; box-sizing: border-box; } .depth-analysis { display: flex; align-items: center; padding: 10px; } .el-breadcrumb__item a { cursor: pointer !important; } .deepActive{ color: #06c; font-weight: 600; } .sortActive{ color: rgb(33, 235, 141); font-weight: 600; } >>>.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover{ background: initial; color: initial; } .el-dropdown-menu__item i{ font-weight: 600; margin: 0 0 0 5px; } .el-dropdown-menu__item i:hover { color: rgb(33, 235, 141); } .birtModelRight .el-main{ padding: 5px !important; } .el-icon-edit{ right: 30px; position: absolute; z-index: 1; line-height: 30px; cursor: pointer; } >>>.el-dropdown.disabled .el-button, >>>.el-dropdown.disabled .el-button:hover{ cursor: not-allowed; color: #C0C4CC; cursor: not-allowed; background-image: none; background-color: #FFF; border-color: #EBEEF5; } </style>

Ignore Space Show notes View

project/hivuiSam/components/analysisSam/Index.vue

<template>
  <div class="container">
    
    <div class="btn-toolbar">
      
      <el-dropdown split-button :size="size" :class="{disabled: backDisabled}" :disabled="backDisabled" @command="backCommand" @click="backClick">
        <i class="el-icon-back"></i>后退
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(item,index) in deepArr" :key="item.prop" :command="index" v-if="index < curIndex">{{ item.label }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
      <el-dropdown split-button :size="size" :class="{disabled: goDisabled}" :disabled="goDisabled" @command="goCommand" @click="goClick">
        <i class="el-icon-right"></i>前进
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(item,index) in deepArr" :key="item.prop" :command="index" v-if="index > curIndex">{{ item.label }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
      <el-dropdown split-button :size="size" class="sort" @command="sortClick">
        <i class="el-icon-sort"></i>排序
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="-1">不排序</el-dropdown-item>
          <el-dropdown-item v-for="(item, index) in sortArr" :key="item.prop" :command="index">{{ item.label }}
            <i class="el-icon-sort-down" :class="{ sortActive: index == sortIndex && sortType =='desc' }"  @click="sortDown"></i> <i class="el-icon-sort-up" :class="{ sortActive: index == sortIndex && sortType =='asc' }"  @click="sortUp"></i>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
      <el-button icon="el-icon-setting" :size="size" @click="analysisClick">列设置</el-button>
      
      <el-dropdown :size="size" @command="chartTypeChange">
        <el-button :size="size">
          <i class="el-icon-s-data"></i>
          图表<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :class="{active: chartType == 'table'}" command="table">表格</el-dropdown-item>
          <el-dropdown-item :class="{active: chartType == 'pie'}" command="pie">饼图</el-dropdown-item>
          <el-dropdown-item :class="{active: chartType == 'bar'}" command="bar">柱图</el-dropdown-item>
          <el-dropdown-item :class="{active: chartType == 'line'}" command="line">线图</el-dropdown-item>
          <el-dropdown-item :class="{active: chartType == 'area'}" command="area">区域图</el-dropdown-item>
          <el-dropdown-item :class="{active: chartType == 'stack'}" command="stack">叠加柱图</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
      <el-button icon="el-icon-refresh" :size="size" @click="refresh">刷新</el-button>
      
      <el-popover
        placement="bottom"
        popper-class="recordPop"
        v-model="recordVisible">
        <el-table :data="recordData" @row-dblclick="recordDblClick" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column min-width="150" prop="name" label="方案名称">
            <template slot-scope="scope">
                <el-input v-if="scope.row.isEdit" v-model="scope.row.name"></el-input>
                <span v-else>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column width="100" prop="simple" label="缩写">
            <template slot-scope="scope">
                <el-input v-model="scope.row.simple"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                v-if="!scope.row.isEdit"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="text"
                v-else
                @click="handleConfirm(scope.$index, scope.row)">确定</el-button>
              <el-button
                size="mini"
                type="text"
                style="color:red;"
                @click.stop="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" size="mini" icon="el-icon-check" style="margin: 10px 0 0;" @click.stop="doClick" :disabled="btnDisabled">执行叠加</el-button>
        <el-button slot="reference" icon="el-icon-edit-outline" :size="size">分析记录</el-button>
      </el-popover>
      
      <el-popover
        placement="bottom"
        v-model="schemeVisible">
        <el-table size="mini" :data="schemeData" @row-click="schemeRowClick">
          <el-table-column width="150" prop="FSCHEMENAME" label="方案列表"></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                style="color:red;"
                @click.stop="handleSchemeDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button slot="reference" icon="el-icon-edit-outline" :size="size" @click="showSchemeData">方案列表</el-button>
      </el-popover>
      
      <el-checkbox
        v-model="superposition"
        label="叠加"
        border
        :size="size" 
      ></el-checkbox>
      
      <el-checkbox
        v-model="perspective"
        label="直接透视"
        border
        :size="size" 
      ></el-checkbox>
      <el-button icon="el-icon-download" :size="size" :disabled="this.data && this.data.length == 0" :loading="exportLoading" @click="exportExcel">导出excel</el-button>
      <el-button icon="el-icon-save" :size="size"  :loading="schemeLoading" @click="saveScheme">保存方案</el-button>
    </div>
    
    <hi-layout :is-fit="true" style="heiht: 100%;">
      
      <hi-layout-right size="300" title="过滤条件">
        <div style="height: calc( 100% - 342px );overflow: auto;border:none;">
          <birt-work-book
          style="min-height: calc( 100% - 342px );"
          :conf="birtModelRight"
          :ref="birtModelRight.controlId"
          class="birtModelRight"
        ></birt-work-book>
        </div>
           <el-divider>汇总条件</el-divider>
        <div style="height: 180px;overflow:auto;">
        <el-form
          @submit.native.prevent
          ref="havingForm"
          style="padding: 10px 10px 0 0;"
          :model="havingForm"
          label-width="80px"
        >
          <el-form-item v-for="(val,name,index) in havingForm" :key="name">
             <span slot="label" :title="val.label">
              {{ val.label }}
            </span>
            <el-col :span="10">
              <el-input type="number" v-model="havingForm[name].value" size="mini" controls-position="right" @change="handleChange" :min="0"></el-input>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="10">
            <el-input type="number" v-model="havingForm[name].value2" size="mini" controls-position="right" @change="handleChange" :min="0"></el-input>
            </el-col>
            <el-col class="line" :span="2" style="text-align:center;">
              <el-button v-if="val.sign == 'inRange'" size="mini" type="text" @click="signChange(name,'outRange')">内</el-button>
              <el-button v-else size="mini" type="text"  @click="signChange(name,'inRange')">外</el-button>
            </el-col>
          </el-form-item>
        </el-form>
        </div>
        <el-form
          @submit.native.prevent
          ref="groupForm"
          style="padding: 10px 10px 0 0;"
          :model="groupForm"
          label-width="80px"
        >
          <el-form-item label="分组条件" prop="prop">
            <i class="el-icon-edit" @click="showtransfer"></i>
            <el-select v-model="groupForm.prop" style="width: 100%;" placeholder="请选择分组条件">
              <el-option
                v-for="item in groupFields"
                :label="item.label"
                :value="item.prop"
                :key="item.prop"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="mini"
              :loading="loading"
              @click="doCount"
              >执行查询</el-button
            >
            <el-button size="mini" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </hi-layout-right>
      
      <hi-layout-center style="heiht: 100%;">
        
        <div class="chart-tool">
          <i v-if="!showChartMenu" @click="showChartMenu = true" class="el-icon-menu" />
          <div v-else class="content">
            <i class="iconfont icon-num item" :class="{active: showType == 'num'}" title="显示数值" @click="onChangeShowType('num')" />
            <i class="iconfont icon-percentage item" :class="{active: showType == 'percent'}" title="显示百分比" @click="onChangeShowType('percent')"/>
            <el-dropdown placement="bottom" @command="changeShowAnalyseList">
              <i class="el-icon-s-unfold"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="none">不显示</el-dropdown-item>
                <el-dropdown-item :class="{active: analyseListChecked == item.prop}" v-for="item in analyseFields" :command="item.prop">{{ item.label }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <i class="el-icon-close" @click="showChartMenu = false" />
          </div>
        </div>
        
        <div class="depth-analysis">
          <span>深度分析:</span>
          <el-breadcrumb
            separator-class="el-icon-arrow-right"
            style="padding: 0 0 0 10px;"
          >
            <el-breadcrumb-item v-for="(item,index) in deepArr" :key="item.prop">
              <span v-if="item.label.includes(',') && item.selectVal" @click="breadcrumbClick(item.prop)" :class="{ deepActive: index == curIndex }" style="cursor: pointer;">
                <span v-for="(it, i) in item.label.split(',')">
                  {{ it }}
                  <span style="color: rgb(255, 102, 0);margin-left:2px;" v-if="index < curIndex">{{ item.selectVal.split(',')[i] }}<span v-if="i < item.label.split(',').length - 1">,</span></span>
                </span>
              </span>
              <span v-else @click="breadcrumbClick(item.prop)" :class="{ deepActive: index == curIndex }" style="cursor: pointer;">
                {{ item.label }}
                <span style="color: rgb(255, 102, 0);margin-left:2px;" v-if="index < curIndex">{{ item.selectVal }}</span>
              </span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div v-if="showDetail" style="height: calc( 100% - 100px )">
          <el-table
            :data="data"
            ref="table"
            height="100%"
            border
            stripe
            :show-summary="showSummary"
            :summary-method="getSummaries"
            header-row-class-name="tableHeader"
            style="width: 100%"
          >
            <el-table-column
              v-if="showIndex"
              type="index">
            </el-table-column>
            <el-table-column
              v-for="item in tableColumns"
              :key="item.prop"
              :prop="item.prop"
              :label="item.label"
            >
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <div v-if="!showDetail && chartType == 'table'" style="height: calc( 100% - 100px )">
          <el-table
            :data="data"
            ref="table"
            height="100%"
            border
            stripe
            @row-dblclick="rowDblclick"
            :show-summary="showSummary"
            :summary-method="getSummaries"
            header-row-class-name="tableHeader"
            style="width: 100%"
          >
            <el-table-column
              v-if="showIndex"
              type="index">
            </el-table-column>
            <el-table-column
              v-for="item in tableColumns"
              :key="item.prop"
              :prop="item.prop"
              :label="item.label"
            >
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <Pie-chart
          style="height: calc( 100% - 100px )"
          v-else-if="!showDetail && chartType == 'pie'"
          ref="chartConf"
          :conf="chartConf"
        ></Pie-chart>
        <Bar-chart
          style="height: calc( 100% - 100px )"
          v-else-if="!showDetail && (chartType == 'bar' || chartType == 'stack') "
          ref="chartConf"
          :conf="chartConf"
        ></Bar-chart>
        <Line-chart
          style="height: calc( 100% - 100px )"
          v-else-if="!showDetail && chartType == 'line'"
          ref="chartConf"
          :conf="chartConf"
        ></Line-chart>
        <Line-chart
          style="height: calc( 100% - 100px )"
          v-else-if="!showDetail && chartType == 'area'"
          ref="chartConf"
          :conf="chartConf"
        ></Line-chart>
        
        <div class="analyseList" v-show="showAnalyseList ">
          <div class="analyseList-title">
            {{ analyseList_title }}
          </div>
          <ul class="analyseList-ul">
            <li v-for="(item,index) in data">
              <a @click="analyseListOnClick(item,index)">{{ item[curGroupField] }}</a>
              <span>{{ item[analyseListChecked+'_per'] + '%' }}</span>
            </li>
          </ul>
        </div>
      </hi-layout-center>
    </hi-layout>
    
    <el-dialog :visible.sync="analysisVisible" title="分析列设置" :height="500">
      <el-table :data="analysisData" size="small" :height="400">
        <el-table-column
          prop="countField"
          label="统计字段">
        </el-table-column>
        <el-table-column prop="tableColumn" label="网格列" align="center">
          <template slot="header" slot-scope="{row}">
            <el-checkbox v-model="tableColumnCheck" @change="handelCheckAll('tableColumn')" label="网格列"></el-checkbox>
          </template>
          <template slot-scope="{row}">
            <el-checkbox v-model="row.tableColumn"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="tableColumn" label="网格合计列" align="center">
          <template slot="header" slot-scope="{row}">
            <el-checkbox v-model="tableColumnCountCheck" @change="handelCheckAll('tableColumnCount')" label="网格合计列"></el-checkbox>
          </template>
          <template slot-scope="{row}">
            <el-checkbox v-model="row.tableColumnCount"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="tableColumn" label="图表列" align="center">
          <template slot="header" slot-scope="{row}">
            <el-checkbox v-model="chartColumnCheck" @change="handelCheckAll('chartColumn')" label="图表列"></el-checkbox>
          </template>
          <template slot-scope="{row}">
            <el-checkbox v-model="row.chartColumn"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="chartColumnCount" label="图表列汇总" align="center">
          <template slot="header" slot-scope="{row}">
            <el-checkbox v-model="chartColumnCountCheck" @change="handelCheckAll('chartColumnCount')" label="图表列汇总"></el-checkbox>
          </template>
          <template slot-scope="{row}">
            <el-checkbox v-model="row.chartColumnCount"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="columnUp(scope.$index, scope.row)">上移</el-button>
              <el-button
                size="mini"
                type="text"
                @click="columnDown(scope.$index, scope.row)">下移</el-button>
            </template>
          </el-table-column>
      </el-table>
    </el-dialog>
    
    <el-dialog  :visible.sync="analysisFieldsVisible" title="选择分析字段" :height="500">
       <Pie-chart
          style="height: 400px;"
          ref="analysisChart"
          :conf="analysisChartConf"
        ></Pie-chart>
    </el-dialog>
    
    <el-dialog  :visible.sync="transferVisible" title="选择分组字段" :height="500" width="640px" center @close="transferClose">
       <el-transfer class="sam" v-model="groupFieldsEdit" :data="conf.groupFields" 
       :titles="['来源字段', '目标字段']"
       target-order="push"
       :props="{
          key: 'prop',
          label: 'label'
        }" style="width: 100%;padding: 20px;">
        <span slot-scope="{ option }">{{ option.label }}
          <el-button style="margin-left: 10px;" icon="el-icon-top" type="primary" size="mini" circle @click.stop="transferUp(option)"></el-button>
          <el-button icon="el-icon-bottom" type="primary" size="mini" circle @click.stop="transferDown(option)"></el-button>
        </span>
        </el-transfer>
        <span slot="footer" class="dialog-footer">
          <el-button @click="transferClose" size="small">取 消</el-button>
          <el-button type="primary" size="small" @click="transferConfirm">确 定</el-button>
        </span>
    </el-dialog>
  </div> 
</template>

}else{
                  let keyArr = sData.data.map(item =>{
                    return item[this.curGroupField]
                  })
                  let i = keyArr.indexOf(keyList[key])
                  if(i > -1){
                    obj = {...obj, ...sData.data[i]}
                  }else{
                    for(let j in sData.data[0]){
                      obj[j+'-'+sData.id] = 0
                    }
                  }
                }
              }
              newData[key] = obj
            }
            this.data = newData
          }else{
            this.data = []
          }
          arr = curGroupArr.concat(newFields)
        }else{
          // 当前分组列+分析列
          arr = curGroupArr.concat(this.analyseFields)
          if(arr && arr.length){
            this.sortArr = arr
          }
        }
        arr = arr.filter(item =>{
          var show = true
          this.analysisData.forEach(data =>{
            if(data.prop == item.prop){
              show = data.tableColumn
            }
          })
          return show
        })
        return arr
      }
    },
    showIndex(){
      return this.conf && this.conf.showIndex || false
    },
    // 网格是否显示合计行
    showSummary(){
      let flag = false
      this.analysisData.some(item =>{
        flag = item.tableColumnCount
        return flag
      })
      return flag
    },
    //  数据列
    dataFields(){
      return this.conf && this.conf.dataFields || []
    },
    // 图表配置
    chartConf() {
      debugger
      let groupBy = this.curGroupField;
      let calcFields = []
      // 系列
      var series = [];
      const tooltipOption = {
        trigger: 'item',
        axisPointer: {
          type: 'shadow'
        },
      }
      let analysisList = this.analysisData.filter(item =>{
        return item.chartColumn
      })
      let showLabel = this.showType == '' ? false : true
      let showPer = this.showType == 'percent' ? true : false
      let label = {
        show: showLabel,
        position: "top",
      };
      if(showPer){
        label.formatter = '{c}%'
      }
      calcFields = analysisList.map(item =>{
        let prop = showPer ? item.prop + '_per' : item.prop
        let obj = {
          name: prop,
          title: item.label
        }
        series.push({tooltip: tooltipOption, 
                label: label})
        return obj
      })
      let controlName = ''
      let datas = this.data
      // 组合分组条件时，数据添加组合列
      if(groupBy.includes(',')){
        let keyArr = groupBy.split(',');
        datas = datas.map(item =>{
          let label = []
          for(let key of keyArr){
            label.push(item[key])
          }
          label=label.join();
          item[groupBy] = label
          return item
        })
      }
      controlName = this.chartType == "pie" ? "PieChart"
                  : this.chartType == "bar" ? "BarChart"
                  : this.chartType == "stack" ? "BarChart"
                  : this.chartType == "line" ? "LineChart"
                  : this.chartType == "area" ? "LineChart" : 'PieChart'
      // 区域图
      let areaSeries = calcFields.map(item =>{
        return {
          smooth: true,
          areaStyle: {
            normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "rgba(30, 231, 231, 0.3)" },{ offset: 1, color: "rgba(30, 231, 231, 0.1)" }]),
            },
          },
          label: label,
        }
      })
      // 饼图
      let pieSeries = []
      if(this.chartType == "pie"){
        let len = calcFields.length
        let formatter = showPer ? '{b}: {d}%' : '{b}: {c}'
        label = {
            normal: {
            show: true,
            formatter: formatter,
            position:'outer',
            alignTo:'labelLine'
          }
        }
        switch(len){
          case 1: 
            pieSeries = [{label: label}];
            break;
          case 2: 
            pieSeries = [
              {
                radius: [0,"50%"],
                center: ["25%", "50%"],
                label: label,
              },
              {
                radius: [0,"50%"],
                center: ["75%", "50%"],
                label: label,
              },
            ]
            break;
          case 3:
            pieSeries = [
              {
                radius: [0,"50%"],
                center: ["25%", "50%"],
                label: label,
              },
              {
                radius: [0,"35%"],
                center: ["75%", "30%"],
                label: label,
              },
              {
                radius: [0,"35%"],
                center: ["75%", "70%"],
                label: label,
              },
            ]
            break;
          case 4: 
            pieSeries = [
              {
                radius: [0,"35%"],
                center: ["25%", "30%"],
                label: label,
              },
              {
                radius: [0,"35%"],
                center: ["25%", "70%"],
                label: label,
              },
              {
                radius: [0,"35%"],
                center: ["75%", "30%"],
                label: label,
              },
              {
                radius: [0,"35%"],
                center: ["75%", "70%"],
                label: label,
              },
            ]
            break;
        }
      }
      /// 叠加柱图
      let stackSeries = calcFields.map(item =>{
        label.position = 'inside'
        return {
          stack:  '总量',
          label: label,
        }
      })
      let yAxis =  {
        axisLabel:{
          formatter:  function(value,index){
            return value +'%';
          }
        }
      }
      let option = {
        legend: {
          show: true
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
              title:{zoom:'区域缩放', back:'区域缩放还原'}
            },
            dataView: {
              readOnly: false,
              title:'数据视图'
            },
            restore: {
              title:'还原'
            },
            saveAsImage: {
              show: true,
              title: '保存为图片'
            }
          }
        },
        series: this.chartType == "area" ? areaSeries 
        : this.chartType == "stack" ? stackSeries
        : this.chartType == "pie" ? pieSeries : series
      }
      if(showPer && this.chartType != "pie"){
        option.yAxis = yAxis
      }
      const conf = {
          controlName: controlName,
          controlId: "chart_controlid",
          height: "100%",
          isGroupData: true,
          groupBy: groupBy,
          datas: datas,
          calcFields: calcFields,
          option: option,
          events:{
            click(row){
              let _this = this.$parent.$parent.$parent;
              _this.currentObj = row.data
              _this.currentObj.prop = _this.curGroupField;
              if(_this.perspective){
                var index = -1
                _this.deepArr.forEach((item,i)=>{
                  if(item.prop == _this.curGroupField){
                    index = i
                  }
                })
                if(index > -1 && index < _this.deepArr.length - 1){
                  _this.analysisFieldsVisible = false
                  _this.curIndex = _this.curIndex + 1
                  _this.currentObj = _this.deepArr[_this.curIndex];
                  _this.data = _this.currentObj.data
                  _this.curGroupField = _this.currentObj.prop;
                }else{
                  _this.analysisChartConf.datas = _this.deepAnalysisFields
                  _this.analysisFieldsVisible = true
                }
              }else{
                _this.analysisChartConf.datas = _this.deepAnalysisFields
                _this.analysisFieldsVisible = true
              }
              _this.superposition = false
            }
          }
      };
      return conf 
    },
    //  深度分析字段列表
    deepAnalysisFields(){
      let fields = this.groupFields
      if(fields && fields.length == 0){
        return []
      }
      let analysisFields = fields.map((item) => {
        item.value = 1
        return item
      });
      
      // 排除已经统计的分析列
      if(this.deepArr && this.deepArr.length > 0){
        let arrnew = this.deepArr.slice(0, this.curIndex + 1).map((item) => {
          return item.prop
        });
        // 多条件的分组 拆开排除
        arrnew.forEach(item =>{
          if(item.includes(',')){
            arrnew.concat(item.split(','))
          }
        })
        analysisFields = analysisFields.filter(item =>{
          return arrnew.indexOf(item.prop) < 0
        })
      }
      // 添加详情
      analysisFields.push(
        {
          prop: 'detail',
          label: "详情",
          value: 1
        }
      )
      return analysisFields
    },
    // 查询字段
    queryFields(){
      let queryFields = []
      let fields = this.conf && this.conf.queryFields
      if(!fields || fields.length == 0){
        queryFields = []
      }else{
        queryFields = fields.map(item =>{
          let obj = {}
          obj.prop = item.prop;
          obj.label = item.label;
          if(item.props && item.props.lookup){
            let model = item.props.lookup
            if(item.element === 'hi-select-grid'){
              var columns = []
              if(model && model.columns && model.columns.length){
                columns = model.columns.map(item =>{
                  item.prop = item.name
                  return item
                })
              }
              let table = model.tableprops || {}
              table['columns'] = columns
              obj.lookup = {
                type: "data",
                openstyle: 'selectgrid',
                bindField: item.prop,
                lookSelectGrid: {
                  width: 1200,
                  height: 600,
                  table: table,
                  bindField: item.prop
                },
              }
              if(model && model.sourceDatas){
                obj.lookup.lookSelectGrid['tableData'] = model && model.sourceDatas
              }
              if(model && model.modelFile){
                obj.lookup['lookDataset'] = {
                  modelFilePath: this.conf.dataset.controlId,
                  showSearchField: true
                }
              }
              obj.dbtype = 'dbString'
            }else if(item.element === 'hi-data-select'){
              var columns = []
              if(model && model.columns && model.columns.length){
                columns = model.columns.map(item =>{
                  item.prop = item.name
                  return item
                })
              }
              let queryOptionFields = model.queryOption && model.queryOption.fields
              let store = model.storeCfg || model.sourceDsCfg
              let modelFilePath = store.modelFile
              let fields = store.fields
              if(!(queryOptionFields && queryOptionFields.length)){
                return
              }
              let rows = queryOptionFields.map(item =>{
                return {children:[
                  {
                    prop: item.name,
                    label: item.label
                  }
                ]}
              });
              let cols = queryOptionFields.map(item =>{
                return { colWidth: 100}
              });
              let queryPanel = {
                rows: rows,
                cols: cols
              };
              let tableColumn = model.columns.map(item =>{
                return {
                  prop: item.name,
                  label: item.label
                }
              })
              // var table = model.tableprops || {}
              var table = {
                children:tableColumn,
                stripe: model.tableprops && model.tableprops.stripe || false
              }
              let ds = {
                controlName: "HcDataset",
                controlId: modelFilePath,
                name:  model.entityDs,
                modelFilePath: modelFilePath,
                _infcPagging: {
                    pageSize: 10,
                    pageNum: 1,
                    returnCount: true
                },
                _infcLoad: {
                    autoActive: true,
                },
                fields: fields,
                data: [],
              }
              obj.lookup = {
                type: "data",
                openstyle: 'dialog',
                birtModel: GridSingleSelect({
                  mainDataset: ds,
                  hcQueryPanel: queryPanel,
                  hcTable: table
                }),
                lookDataset: {
                  modelFilePath: modelFilePath, // 数据模型路径
                  showSearchField: true
                },
                lookDialog: {
                  title: "",
                  width: 900,
                  height: 600,
                },
                bindField: item.prop,
                sourceDsId: model.sourceDsId
              }
              obj.dbtype = 'dbString'
            }
          }
          // 时间方案
          if(item.props && item.element == 'hi-time-scheme'){
            obj.dbtype = 'dbDatetime'
            obj.format = item.props.format
            obj.element = 'hi-time-scheme'
            obj.disabledEx = item.disabledEx
            obj.viewStyle = {
              viewStyleId: 'DATERANGE',
              type: item.props.rangeType,
              format: item.props.format
            }
          }
          return obj
        })
      }
      return queryFields
    },
    // 数据集字段
    fields(){
      let fields = this.conf.dataset && this.conf.dataset.config.fields
      for(let key in this.queryFields){
        let prop = this.queryFields[key].prop
        if(fields[prop] && fields[prop].lookup){
          let lookup = Object.assign(fields[prop].lookup, this.queryFields[key].lookup)
          // 下拉枚举查找
          if(lookup.label && lookup.returnFields){
            for(let key in lookup.returnFields){
              if(lookup.returnFields[key] == lookup.label && lookup.lookSelectGrid){
                lookup.bindShowField = key
                lookup.lookSelectGrid.bindShowField = key
              }
              if(lookup.lookSelectGrid && lookup.lookSelectGrid.tableData){
                let data = lookup.lookSelectGrid.tableData
                for(let i in data){
                  if(data[i][lookup.returnFields[key]]){
                    data[i][key] = data[i][lookup.returnFields[key]]
                  }
                }
              }
            }
          }
          // 数据模型查找
          if(lookup.fieldPair){
            if(lookup.sourceDsId){
              lookup.returnFields = lookup.fieldPair[lookup.sourceDsId].returnFields
            }else{
              let key = Object.keys(lookup.fieldPair)[0]
              lookup.returnFields = lookup.fieldPair[key].returnFields
            }
          }
          lookup.returnType = "single",
          fields[prop]['lookup'] = lookup 
        }
        // 时间方案
        if(fields[prop] && this.queryFields[key].element == 'hi-time-scheme'){
          let fd = this.queryFields[key]
          fields[prop].dbtype = 'dbDatetime'
          fields[prop].format = fd.format
          fields[prop].disabledEx = fd.disabledEx
        }
      }
      // 应用默认填充表达式
      for(let key in fields){
        if(fields[key].default && fields[key].default.exps){
          fields[key].default['expr'] = fields[key].default.exps
        }
      }
      return fields
    },
    // 数据集
    dataset(){
      var dataset = {}
      if(this.conf && this.conf.dataset){
        let ds = this.conf.dataset
        dataset = {
          controlName: ds.controlName,
          controlId: ds.controlId,
          name: ds.name,
          modelFilePath: ds.modelFilePath,
          fields: this.fields,
          _infcLoad: {
              autoActive: false
            },
          _infcPagging: {
              returnCount: true,
              pageSize: 100,
              pageNum: 1
            },
          data: [],
        }
      }
      return dataset
    },
    // 查询面板
    birtModelRight(){
      let rows = this.queryFields.map(item =>{
        return {children:[item],colspan: 12}
      })
      let cols = this.queryFields.map(item =>{
        return { colWidth: 60 }
      })
      const queryPanel = {
        rows: rows,
        cols: cols
      };
      let hcQueryPanel = {
        controlName: "HcQueryPanel",
        controlId: "HcQueryPanel_sam",
        inline: false,
        dataset: this.dataset && this.dataset.controlId || "dsSam",
        size: "small",
        hideBtn: true,
        style: "width: 100%;",
        children: [],
      };
      Object.assign(hcQueryPanel, QueryStyleFactory.buildForm(queryPanel) || {});
      let birtModelRight = {
        controlName: "BirtWorkBook",
        controlId: "BirtWorkBook_right",
        style: "border-bottom: 1px solid #eee;",
        showToolBar: false,
        children: [
          {
            controlName: "BirtSheet",
            controlId: "BirtSheet_right",
            name: "sheet0",
            pageIndex: 0,
            dataSets: [{
              controlName: "HcDataset",
              controlId: "dsScheme",
              name: "SysSchemeBizEntity",
              rowKey: "FGUID",
              modelFilePath: "/platf/scheme/entity/SysSchemeBizEntity.xml",
              _infcLoad: {
                  autoActive: false,
                  __zcQuery: true
              },
              _infcPagging: {
                  _isAddingPagging: false,
                  pageSize: -1,
              },
              fields: {},
              data: [],
            }].concat(this.dataset ? this.dataset : []),
            children: [
              {
                controlName: "BirtFormSheet",
                controlId: "BirtFormSheet_01",
                children: [hcQueryPanel]
              }
            ]
          }
        ],
      };
      return birtModelRight
    },
    // 分组条件(统计字段)
    groupFields(){
      let groupFields = this.conf && cloneDeep(this.conf.groupFields) || []
      // 组合分组条件
      if(this.curTransferVal && this.curTransferVal.length){
        let obj = {}
        let curTransferLabel = this.curTransferVal.map(item =>{
          for(var field of groupFields){
            if(field.prop == item){
              return field.label
            }
          }
        })
        obj = {
          prop: this.curTransferVal.join(),
          label: curTransferLabel.join()
        }
        groupFields.push(obj)
      }
      return groupFields
    },
    // 分析字段
    analyseFields(){
      return this.conf && this.conf.analyseFields || []
    },
    // 显示详情
    showDetail(){
      return this.currentObj.prop == 'detail'
    },
    // 执行叠加按钮
    btnDisabled(){
      return !this.selectionData || this.selectionData.length < 2
    },
    analyseList_title(){
      if(this.conf.analyseFields && this.conf.analyseFields.length && this.analyseListChecked){
        let curField = this.conf.analyseFields.filter(item =>{
          return item.prop == this.analyseListChecked
        })[0]
        return  curField && curField.label || ''
      }else{
        return ''
      }
    }
  },
  watch:{
    conf:{
      deep: true,
      handler: function(val){
        if(val && val.groupFields && !this.groupForm.prop){
          this.groupForm.prop = val.groupFields[0] && val.groupFields[0].prop
          this.curGroupField = this.groupForm.prop
        }
        if(val && val.analyseFields && val.analyseFields.length){
          this.analysisData=val.analyseFields.map(item =>{
            let obj = {
              prop: item.prop,
              label: item.label,
              countField: item.label,
              tableColumn: true,
              tableColumnCount: true,
              chartColumn: true,
              chartColumnCount: true,
            }
            return obj
          })
        }
      }
    },
  },
  data() {
    return {
      size: 'small',
      superposition: false,
      perspective: false,
      chartType: "table",
      groupForm: {
        prop: ""
      },
      loading: false,
      currentPage: 1,
      pageSize: 100,
      pageSizes: [10,20,50,100],
      total: 0,
      data: [],
      // 排序
      sortArr:[],
      sortIndex:-1,
      sortType: '',
      // 分析列
      analysisVisible: false,
      analysisData:[],
      tableColumnCheck: true,
      tableColumnCountCheck: true,
      chartColumnCheck: true,
      chartColumnCountCheck: true,
      // 分析字段
      analysisFieldsVisible: false,
      analysisFieldsArr:[],
      analysisChartConf:{
        controlName: "PieChart",
        controlId: "chart_analysis",
        height: "100%",
        isGroupData: true,
        groupBy: "label",
        datas: [],
        calcFields: [
          {
            name: "value",
            title: ""
          }
        ],
        option: {
          legend: {
            show: true
          }
        },
        events:{
          click(row){
            debugger;
            var _this = this.$parent.$parent;
            _this.analysisChartConf.datas = _this.deepAnalysisFields
            let data = JSON.parse(JSON.stringify(row.data))
            delete data.emphasis
            // 删除当前分析以后的深度分析
            _this.deepArr.splice(_this.curIndex+1, _this.deepArr.length - _this.curIndex - 1)
            let obj = _this.deepArr[_this.deepArr.length -1]
            if(_this.currentObj.name){
              obj.selectVal = _this.currentObj.name 
            }else{
              if(_this.currentObj.prop.includes(',')){
                let selectVal = []
                let arr = _this.currentObj.prop.split(',')
                selectVal = arr.map(item =>{
                  return _this.currentObj[item]
                })
                obj.selectVal = selectVal.join()
              }else{
                obj.selectVal = _this.currentObj[_this.currentObj.prop]
              }
            }
            _this.$set(_this.deepArr,_this.curIndex,obj)
            _this.$set(_this.deepArr,_this.curIndex + 1, data)
            _this.curGroupField = data.prop;
            _this.currentObj = data;
            _this.curIndex = _this.curIndex + 1;
            _this.doQuery();
            _this.analysisFieldsVisible = false;
          }
        }
      },
      // 深度分析
      deepArr:[],
      conf:{},
      // 图表当前选中对象
      currentObj:{},
      // 当前分组字段
      curGroupField: '',
      // 深度分析当前环节下标
      curIndex: 0,
      exportLoading: false,
      // 穿梭框
      transferVisible: false,
      curTransferVal: [],
      groupFieldsEdit: [],
      schemeLoading: false,
      havingForm:{},
      // 分析记录
      recordVisible: false,
      recordData:[],
      // 已勾选记录
      selectionData: [],
      //  统计方案
      schemeData:[],
      schemeVisible: false,
      // 是否监听
      isMonitor: false,
      // 底部汇总数据
      bottomSummary: {},
      // 是否查询面板查询
      isQueryModel: false,
      // 显示图表菜单
      showChartMenu: false,
      showType: '',
      showAnalyseList: false,
      analyseListChecked: ''
    }
  },
  updated() {
    this.$nextTick(() => {
      this.$refs["table"] && this.$refs["table"].doLayout();
    });
  },
  methods: {
    //  排序
    sortClick(val) {
      this.sortIndex = val
      this.doQuery();
    },
    sortDown(){
      this.sortType = 'desc'
    },
    sortUp(){
      this.sortType = 'asc'
    },
    // 前进
    goCommand(index){
      this.curIndex = index;
      this.currentObj = this.deepArr[index];
      this.curGroupField = this.currentObj.prop;
      this.data = this.currentObj.data
    },
    goClick:debounce(function(){
      if(this.curIndex < this.deepArr.length - 1){
        this.curIndex = this.curIndex + 1;
        this.currentObj = this.deepArr[this.curIndex];
        this.curGroupField = this.currentObj.prop;
        this.data = this.currentObj.data
      }
    },500),
    // 后退
    backCommand(val){
      this.curIndex = val
      this.currentObj = this.deepArr[val];
      this.curGroupField = this.currentObj.prop;
      this.data = this.currentObj.data
    },
    backClick:debounce(function(){
      if(this.curIndex > 0){
        this.curIndex = this.curIndex - 1
        this.currentObj = this.deepArr[this.curIndex];
        this.curGroupField = this.currentObj.prop;
        this.data = this.currentObj.data
      }
    },500),
    // 深度分析
    breadcrumbClick(val) {
      this.curGroupField = val
      let arrnew = this.deepArr.map(item =>{
        return item.prop
      })
      this.curIndex = arrnew.indexOf(val)
      this.currentObj = this.deepArr[this.curIndex];
      // 数据替换成缓存的数据
      this.data = this.currentObj.data
    },
    // 点击表格
    rowDblclick(row){
      this.currentObj = row
      this.currentObj.prop = this.curGroupField;
      this.superposition = false
      if(this.perspective){
        var index = -1
        this.deepArr.forEach((item,i)=>{
          if(item.prop == this.curGroupField){
            index = i
          }
        })
        if(index > -1 && index < this.deepArr.length - 1){
          this.analysisFieldsVisible = false
          this.curIndex = this.curIndex + 1
          this.currentObj = this.deepArr[this.curIndex];
          this.data = this.currentObj.data
          this.curGroupField = this.currentObj.prop;
        }else{
          this.analysisChartConf.datas = this.deepAnalysisFields
          this.analysisFieldsVisible = true
        }
      }else{
        this.analysisChartConf.datas = this.deepAnalysisFields
        this.analysisFieldsVisible = true
      }
    },
    // 点击查询
    doCount() {
      debugger;
      // 叠加状态下不执行查询操作
      if(this.superposition){
        return
      }
      // 监听数据集
      if(this.dataset){
        let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
        if(!this.isMonitor){
          ds && ds.on("afterLoadData", this.afterLoadData);
          this.isMonitor = true
        }
        this.loading = true;
        let prop = this.groupForm.prop;
        let fields = this.groupFields.map(item =>{
          return item.prop
        })
        this.curGroupField = prop;
        let index = fields.indexOf(prop)
        if(this.deepArr.length){
          // 如果切换了分组条件，清空深度分析
          if(this.deepArr[0] && this.deepArr[0].prop !== prop){
            this.deepArr = []
            this.currentObj = this.groupFields[index]
            this.recordData = []
          }else{
            this.currentObj = this.deepArr[0]
          }
        }
        this.currentPage = 1
        let queryModel = ds.getQueryModel()
        this.doQuery(queryModel);
         // 添加分析记录
        let obj = {}
        if(Object.keys(queryModel).length === 0){
          obj = {
            id: 'empty',
            name: '空条件',
            prop: this.groupForm.prop,
          }
        }else{
          let keyArr = [];
          let labelArr = [];
          for(let key in queryModel){
            if(queryModel[key] || queryModel[key] === 0){
              keyArr.push(key);
              // let arr = this.queryFields.filter(item =>{
              //   return item.prop == key
              // })
              labelArr.push(queryModel[key]);
            }
          };
          if(keyArr.length && labelArr.length){
            obj = {
              id: keyArr.join() + '_' + labelArr.join(),
              name: labelArr.join(),
              prop: this.groupForm.prop,
            }
          }else{
            obj = {
              id: 'empty',
              name: '空条件',
              prop: this.groupForm.prop,
            }
          }
        }
        // 判断分析记录中是否含有此条件，有则跳过，无则添加
        const ids = this.recordData.map(value=>value.id);
        if(!ids.includes(obj.id)){
          this.isQueryModel = true
          let simple = this.recordData.length + 1;
          obj.simple = simple
          obj.isEdit = false
          this.recordData.push(obj);
        }else{
          this.isQueryModel = false
        }
        // 当前分组加入深度分析
        if(index < 0){
          this.$message.error('当前分组条件不在分组字段中，请重新配置')
        }else{
          this.$set(this.deepArr,0,this.groupFields[index])
          this.curIndex = 0
        };
      }
    },
    afterLoadData(datas){
      let newData = datas
      let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
      if(datas && datas.length){
        newData = datas.map(item =>{
          return ds && ds.getFormatRecd(item)
        })
        // 添加百分比数据
        newData = newData.map(data =>{
          for(let field of this.analyseFields){
            let prop = field.prop
            let percent = prop+'_per'
            let sum = 0
            const values = datas.map(item => Number(item[prop]));
            if (!values.every(value => isNaN(value))) {
              sum = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              }, 0);
            }
            if(sum && sum > 0){
              data[percent] = Number((data[prop]/sum * 100).toFixed(2)) 
            }else{
              data[percent] = 0
            }
          }
          return data
        })
      }
      this.data = newData
      // 缓存数据
      this.deepArr[this.curIndex].data = newData;
      // 总条数
      this.total = ds._infcPagging.recordCount || this.total;
      // 底部汇总数据
      this.bottomSummary = ds.getBottomSummeryRecd();
      // 添加分析记录
      if(!this.isQueryModel) return
      this.recordData[this.recordData.length - 1].data = datas
    },
    // 查询方法
    doQuery(model){
      let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
      if(this.showDetail){
        ds._infcPagging = {
          _isPagging: true,
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          returnCount: true
        };
        ds._infcStat = {}
        ds._infcSort = {}
      }else{
        ds._infcPagging = {
          _isPagging: true,
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          returnCount: true
        };
        ds._infcStat = {
          isGroupData: true,
          groupBy: this.curGroupField,
          __bottomSummary: true
        }
        if(this.sortIndex > -1){
          let obj = this.sortArr[this.sortIndex]
          ds._infcSort.orderBy =[{
            name: obj.prop, 
            desc: obj.label, 
            type: this.sortType || 'desc'
          }]
        }else{
          ds._infcSort.orderBy = []
        }
        if(this.havingForm){
          let _infcHaving = {};
          for(let item in this.havingForm){
            let obj = JSON.parse(JSON.stringify(this.havingForm[item]))
            let val = obj.value
            let val2 = obj.value2
            if(val === undefined && val === undefined){

}else if((val || val === 0) && (val2 || val2 === 0)){
              _infcHaving[item] = obj
            }else{
              if(obj.sign == 'inRange'){
                obj.sign = 'lteq'
              }else{
                obj.sign = 'gt'
              }
              _infcHaving[item] = obj
            }
          }
          ds._infcHaving = _infcHaving
        }
      }
      if(model){
        ds.setQueryModel(model)
        ds._infcLoad.additionalModel = {};
      }else if(this.deepArr && this.deepArr.length > 0){
        let queryModel = {}
        this.deepArr.forEach(item =>{
          if(item.prop && item.selectVal){
            if(!item.prop.includes(",")){
              queryModel[item.prop] = item.selectVal
            }else{
              let arr = item.prop.split(',')
              arr.forEach((it,i) =>{
                queryModel[it] = item.selectVal && item.selectVal.split(',')[i]
              })
            }
          }
        })
        ds.setAdditionalModel(queryModel)
      }else{
        ds._infcLoad.additionalModel = {};
        ds._infcLoad.queryModel = {}
      }
      ds.query();
      this.loading = false;
    },
    //  重置
    reset() {
      this.$refs.groupForm.resetFields();
      this.$refs.havingForm.resetFields();
      this.havingForm = JSON.parse(JSON.stringify(this.conf.havingForm));
      this.curTransferVal = []
      this.groupForm.prop = this.groupFields[0] && this.groupFields[0].prop;
      var queryPanel = this.$refs.BirtWorkBook_right.$children[0].$children[0].$children[0].$children[0].$children[0].$children[0];
      queryPanel.reset();
      let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
      ds._infcLoad.queryModel={}
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.doQuery()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.doQuery()
    },
    // 切换图表
    chartTypeChange(command) {
      this.chartType = command;
    },
    // 打开分析列
    analysisClick(){
      this.analysisVisible = true
    },
    // 分析列全选
    handelCheckAll(val){
      let _this = this
      this.analysisData = this.analysisData.map(item => {
        if(val == 'tableColumn') {
          item.tableColumn = _this.tableColumnCheck
        }
        if(val == 'tableColumnCount') {
          item.tableColumnCount = _this.tableColumnCountCheck
        }
        if(val == 'chartColumn') {
          item.chartColumn = _this.chartColumnCheck
        }
        if(val == 'chartColumnCount') {
          item.chartColumnCount = _this.chartColumnCountCheck
        }
        return item
      })
    },
    // 分析列上移
    columnUp(index,row){
      let arr = this.analysisData
      if(index > 0){
        arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]));
      }
    },
    columnDown(index, row){
      let arr = this.analysisData
      if(index < arr.length){
        arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]));
      };
    },
    // 刷新
    refresh(){
      this.doQuery();
      this.$refs.chartConf && this.$refs.chartConf.refreshChart();
    },
    // 导出
    exportExcel() {
        let param = {
            pageNum: -1,
            pageSize: -1,
            __slaveExport: false,
        };
        let __body = {};
        let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
        var cdion = ds.lastLoadCdion
        console.log('cdion', cdion)
        if (cdion) {
            __body['queryCdions'] = JSON.parse(cdion);
        }
        if(this.curGroupField !== 'detail'){
          __body['groupBy'] = this.curGroupField
        }
        param['modelFilePath'] = ds['modelFilePath'];
        param['__funcpath'] = ds['__funcpath'];
        param.__body = __body
        let sheetStyle = {}
        let cells = []
        let columns = []
        this.tableColumns.forEach(item => {
          cells.push({
            title: item.label,
            colspan: 1,
            rowspan: 1
          })
          columns.push({
            field: item.prop,
            width: 170
          })
        });
        sheetStyle = {
        name: '统计分析',
        titleRows: [
          {
            cells: cells
          }
        ],
        columns: columns
      }
        param.__sheetStyle = sheetStyle
        var time = new Date().getTime()
        var title = `统计分析${time}`
        var data = {
            title: title,
            __sheetDatas: JSON.stringify([param])
        }
        var url = this.$HI.exportUrl
        this.exportLoading = true
        this.$HI.request.post(url,data).then((res) =>{
            console.log('res', res)
            this.exportLoading = false
            if(res.status == 200){
                let token = getToken();
                var url = this.$HI.download + `?path=${res.dataPack.path}&access_token=${token}`
                url = url.replace(/\\/g,"/")
                const a = document.createElement('a') //创建a标签
                a.style.display = 'none'
                a.href = url // 指定下载链接
                a.download = title //指定下载文件名
                a.click() //触发下载
            }
        }).catch((e) =>{
            this.exportLoading = false
        })
    },
    // 打开穿梭框
    showtransfer(){
      this.groupFieldsEdit = JSON.parse(JSON.stringify(this.curTransferVal))
      this.transferVisible = true
    },
    transferConfirm(){
      if(this.groupFieldsEdit && this.groupFieldsEdit.length > 1){
        this.curTransferVal = JSON.parse(JSON.stringify(this.groupFieldsEdit))
        this.groupForm.prop = this.curTransferVal.join();
        this.curGroupField = this.groupForm.prop;
        this.transferVisible = false
      }else{
        this.$message.error("该分组选项已存在")
      }
    },
    transferClose(){
      this.transferVisible = false
      this.groupFieldsEdit = JSON.parse(JSON.stringify(this.curTransferVal))
    },
    transferUp(option){
      let arr = this.groupFieldsEdit
      let index = this.groupFieldsEdit.indexOf(option.prop)
      if(index > 0){
        arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]));
      }
    },
    transferDown(option){
      let arr = this.groupFieldsEdit
      let index = this.groupFieldsEdit.indexOf(option.prop)
      if(index < arr.length){
        arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]));
      };
    },
    // 合计列
    getSummaries(parma){
      const { columns, data } = parma;
      const sums = [];
      // let arr = this.analyseFields.map(item =>{
      //   return item.prop
      // })
      columns.forEach((column, index) => {
        let show = true
        this.analysisData.forEach(item =>{
          if(item.prop == column.property){
            show = item.tableColumnCount
          }
        })
        // if(arr.includes(column.property) && show){
        //   let values = data.map(item => Number(item[column.property]));
        //   sums[index] = values.reduce((prev, curr) => {
        //     const value = Number(curr);
        //     if (!isNaN(value)) {
        //       return prev + curr;
        //     } else {
        //       return prev;
        //     }
        //   }, 0);
        if(this.bottomSummary && this.bottomSummary[column.property] && show){
          sums[index] = this.bottomSummary[column.property]
        }else{
          sums[index] = '';
        }
      })
      sums[0] = '统计'
      return sums;
    },
    // 分析列表
    handleEdit(index, row){
      row.isEdit = true
      this.recordData[index] = row
    },
    handleConfirm(index, row){
      row.isEdit = false
      this.recordData[index] = row
    },
    handleDelete(index, row){
      this.recordData.splice(index, 1)
    },
    // 执行叠加
    doClick(){
      this.superposition = true
      this.recordVisible = false
      this.curGroupField = this.recordData[0].prop
      this.curIndex = 0
    },
    // 分析记录勾选
    handleSelectionChange(row){
      this.selectionData = row
    },
    // 双击
    recordDblClick(row){
      this.curIndex = 0
      this.data = row.data
      this.deepArr[0].data = row.data
      this.currentObj.data = row.data
    },
    signChange(val,sign){
      this.havingForm[val]['sign'] = sign
    },
    // 统计方案
    schemeRowClick(row){
      if(row.FCONTENT){
        this.reset();
        let conf = JSON.parse(row.FCONTENT);
        if(conf.deepList){
          this.deepArr = conf.deepList
        }
        if(conf.curGroupField){
          this.curGroupField = conf.curGroupField
        }
        if(conf.queryModel){
          let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
          ds.setQueryModel(conf.queryModel)
          let queryPanel = this.$refs.BirtWorkBook_right.$children[0].$children[0].$children[0].$children[0].$children[0].$children[0];
          queryPanel.bindModel = conf.queryModel
        }
        if(conf.groupForm){
          this.groupForm = conf.groupForm
        }
        if(conf.havingForm){
          this.havingForm = conf.havingForm
        }
        if(conf.sortIndex){
          this.sortIndex = conf.sortIndex
        }
        if(conf.sortType){
          this.sortType = conf.sortType
        }
        if(conf.data){
          this.data = conf.data
        }
        if(conf.currentObj){
          this.currentObj = conf.currentObj
        }
        if(conf.total){
          this.total = conf.total
        }
        if(conf.curTransferVal){
          this.curTransferVal = conf.curTransferVal
        }
        if(conf.perspective){
          this.perspective = conf.perspective
        }else{
          this.perspective = false
        }
        if(conf.superposition){
          this.superposition = conf.superposition
        }else{
          this.superposition = false
        }
      }
      this.schemeVisible = false
      this.doCount()
    },
    showSchemeData(){
      let url = '/data/query';
      let funcurl = window.location.pathname || ''
      let queryCdions = {
        join: 'and',
        items: [
            {
                sign: "eq",
                name: "FFUNCURL",
                dataType: "string",
                value: funcurl,
                enable: true,
            },
        ],
      }
      var data = {
        modelFilePath: "/platf/scheme/entity/SysSchemeBizEntity.xml",
        pageSize:-1,
        __body:JSON.stringify({queryCdions: queryCdions}),
        __bottomSummary: false,
        // __funcpath: "/eap5csxm/KongJianCeShi/TongJiFenXi/TongJiFenXiCeShi/func/TongJiFenXiRenYuan.func",
        __zcQuery: true
      }
      this.$HI.request.post(url, data).then((res) =>{
        this.schemeData = res.dataPack && res.dataPack.rows
      }).catch(e=>{
        console.error(e)
      })
    },
    // 保存方案
    saveScheme(){
      let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
      let content = {
        deepList: this.deepArr,
        curGroupField: this.curGroupField,
        queryModel: ds.getQueryModel(),
        havingForm: this.havingForm,
        groupForm: this.groupForm,
        sortIndex: this.sortIndex,
        sortType: this.sortType,
        data: this.data,
        currentObj:this.currentObj,
        perspective: this.perspective,
        superposition: this.superposition,
        total:this.total,
        curTransferVal:this.curTransferVal
      }
      let data = {
        pushType: "add",
        dataset: "dsScheme",
        pushAddType: "map",
        data:[{
          FFUNCURL: window.location.pathname || window.location.href,
          FCONTENT: JSON.stringify(content),
        }]
      }
      this.openByPath('/platf/scheme/func/add.func', {__push: data,__funcpath:'/platf/scheme/func/add.func'},{title: '方案保存'})
    },
    handleSchemeDelete(index, data){
      let url = '/data/save'
      let removeData = {
        ...data,
        $state:"rsDelete",
        $old:data
      }
      let body = [{
        modelFilePath:"/platf/scheme/entity/SysSchemeBizEntity.xml",
        data:[removeData]
      }]
      let rData = {
        __body: JSON.stringify(body)
      }
      this.$HI.request.post(url, rData).then((res) =>{
        this.$message.success('方案删除成功')
        this.schemeData.splice(index, 1)
      }).catch(e=>{
        this.$message.error(e)
      })
    },
    // 保存方案下推
    openByPath(path, query, { title, target } = {}) {
        query = query || {};
        let queryT = {}
        Object.assign(queryT, query || {});
        if (title)
            queryT.__title = title;
        if (target) {
            target = target === '_blank' ? (new Date()).valueOf() : target
            queryT.__target = target;
        }
        if(this.$router){
            this.$router.push({
                path,
                query: queryT
            })
        }else{
          if(top.window.SysPage && top.window.SysPage.newPage){
            top.window.SysPage.newPage(title, path, queryT, "post")
          }else{
            this.createForm(path, "_self", queryT.__push.data[0])
          }
        }
    },
    createForm(url, opentype, paramters) {
      //创建form表单
      let me = this;
      let id = "samuuid"
      var formid = `${id}_form`;
      var temp_form = null;
      if (document.getElementById(formid)) {
        temp_form = document.getElementById(formid);
        temp_form.method = me.postType;
        temp_form.action = url;
        // for (var item in paramters) {
        //   var inputObj = document.getElementById(`${id}_${item}`);
        //   if (inputObj) {
        //     inputObj.value = paramters[item];
        //   }
        // }
      } else {
        temp_form = document.createElement("form");
        temp_form.id = `${id}_form`;
        temp_form.action = url;
        //如需打开新窗口，form的target属性要设置为'_blank'
        temp_form.target = opentype; //打开方式
        temp_form.method = me.postType;
        temp_form.style.display = "none";

.birtModelRight .el-main{
    padding: 5px !important;
}
.el-icon-edit{
  right: 30px;
  position: absolute;
  z-index: 1;
  line-height: 30px;
  cursor: pointer;
}
>>>.el-dropdown.disabled .el-button,
>>>.el-dropdown.disabled .el-button:hover{
  cursor: not-allowed;
  color: #C0C4CC;
  cursor: not-allowed;
  background-image: none;
  background-color: #FFF;
  border-color: #EBEEF5;
}
.chart-tool{
  position: absolute;
  right: 10px;
  top:5px;
  i{
    cursor: pointer;
    color: #06c;
  }
  .el-icon-close{
    color: #f0797f;
  }
  .el-icon-close:hover{
    color: #f50814;
  }
  .content{
    margin-top: 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 150px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #d8d863;
    border-radius: 5px;
    background: rgba(237,241,244,0.4);
    .iconfont{
      height: 20px;
      line-height: 12px;
    }
    .item{
      padding: 3px;
      border: 1px solid transparent;
      border-radius: 3px;
    }
    .item:hover,.item:active, .item.active{
      border-color: #08df5d;
    }
  }
}
.el-dropdown-menu__item.active{
  background-color: #ecf5ff;
  color: #66b1ff;
}
>>>.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #ecf5ff;
  color: #66b1ff;
}
.analyseList{
  position: absolute;
  right: 10px;
  top: 45px;
  width: 150px;
  border: 1px solid #d8d863;
  background: #fff;
  .analyseList-title{
    border-bottom: 1px dotted #b5b5ad;
    color: #000;
    padding: 0 10px;
  }
  .analyseList-ul{
    list-style: none;
    margin: 0 !important;
    padding: 0 10px;
    li{
      display: flex;
      justify-content: space-between;
      align-items: center;
      a:hover{
        text-decoration: underline;
        color: #FF6600;
      }
    }
  }
}
</style>

<template>
  <div class="container">
    
    <div class="btn-toolbar">
      
      <el-dropdown split-button :size="size" :class="{disabled: backDisabled}" :disabled="backDisabled" @command="backCommand" @click="backClick">
        <i class="el-icon-back"></i>后退
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(item,index) in deepArr" :key="item.prop" :command="index" v-if="index < curIndex">{{ item.label }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
      <el-dropdown split-button :size="size" :class="{disabled: goDisabled}" :disabled="goDisabled" @command="goCommand" @click="goClick">
        <i class="el-icon-right"></i>前进
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(item,index) in deepArr" :key="item.prop" :command="index" v-if="index > curIndex">{{ item.label }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
      <el-dropdown split-button :size="size" class="sort" @command="sortClick">
        <i class="el-icon-sort"></i>排序
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="-1">不排序</el-dropdown-item>
          <el-dropdown-item v-for="(item, index) in sortArr" :key="item.prop" :command="index">{{ item.label }}
            <i class="el-icon-sort-down" :class="{ sortActive: index == sortIndex && sortType =='desc' }"  @click="sortDown"></i> <i class="el-icon-sort-up" :class="{ sortActive: index == sortIndex && sortType =='asc' }"  @click="sortUp"></i>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
      <el-button icon="el-icon-setting" :size="size" @click="analysisClick">列设置</el-button>
      
      <el-dropdown :size="size" @command="chartTypeChange">
        <el-button :size="size">
          <i class="el-icon-s-data"></i>
          图表<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="table">表格</el-dropdown-item>
          <el-dropdown-item command="pie">饼图</el-dropdown-item>
          <el-dropdown-item command="bar">柱图</el-dropdown-item>
          <el-dropdown-item command="line">线图</el-dropdown-item>
          <el-dropdown-item command="area">区域图</el-dropdown-item>
          <el-dropdown-item command="stack">叠加柱图</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
      <el-button icon="el-icon-refresh" :size="size" @click="refresh">刷新</el-button>
      
      <el-popover
        placement="bottom"
        popper-class="recordPop"
        v-model="recordVisible">
        <el-table :data="recordData" @row-dblclick="recordDblClick" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column min-width="150" prop="name" label="方案名称">
            <template slot-scope="scope">
                <el-input v-if="scope.row.isEdit" v-model="scope.row.name"></el-input>
                <span v-else>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column width="100" prop="simple" label="缩写">
            <template slot-scope="scope">
                <el-input v-model="scope.row.simple"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                v-if="!scope.row.isEdit"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="text"
                v-else
                @click="handleConfirm(scope.$index, scope.row)">确定</el-button>
              <el-button
                size="mini"
                type="text"
                style="color:red;"
                @click.stop="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" size="mini" icon="el-icon-check" style="margin: 10px 0 0;" @click.stop="doClick" :disabled="btnDisabled">执行叠加</el-button>
        <el-button slot="reference" icon="el-icon-edit-outline" :size="size">分析记录</el-button>
      </el-popover>
      
      <el-popover
        placement="bottom"
        v-model="schemeVisible">
        <el-table size="mini" :data="schemeData" @row-click="schemeRowClick">
          <el-table-column width="150" prop="FSCHEMENAME" label="方案列表"></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                style="color:red;"
                @click.stop="handleSchemeDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button slot="reference" icon="el-icon-edit-outline" :size="size" @click="showSchemeData">方案列表</el-button>
      </el-popover>
      
      <el-checkbox
        v-model="superposition"
        label="叠加"
        border
        :size="size" 
      ></el-checkbox>
      
      <el-checkbox
        v-model="perspective"
        label="直接透视"
        border
        :size="size" 
      ></el-checkbox>
      <el-button icon="el-icon-download" :size="size" :disabled="this.data && this.data.length == 0" :loading="exportLoading" @click="exportExcel">导出excel</el-button>
      <el-button icon="el-icon-save" :size="size"  :loading="schemeLoading" @click="saveScheme">保存方案</el-button>
    </div>
    
    <hi-layout :is-fit="true" style="heiht: 100%;">
      
      <hi-layout-right size="300" title="过滤条件">
        <div style="height: calc( 100% - 342px );overflow: auto;border:none;">
          <birt-work-book
          style="min-height: calc( 100% - 342px );"
          :conf="birtModelRight"
          :ref="birtModelRight.controlId"
          class="birtModelRight"
        ></birt-work-book>
        </div>
           <el-divider>汇总条件</el-divider>
        <div style="height: 180px;overflow:auto;">
        <el-form
          @submit.native.prevent
          ref="havingForm"
          style="padding: 10px 10px 0 0;"
          :model="havingForm"
          label-width="80px"
        >
          <el-form-item v-for="(val,name,index) in havingForm" :key="name">
             <span slot="label" :title="val.label">
              {{ val.label }}
            </span>
            <el-col :span="10">
              <el-input type="number" v-model="havingForm[name].value" size="mini" controls-position="right" @change="handleChange" :min="0"></el-input>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="10">
            <el-input type="number" v-model="havingForm[name].value2" size="mini" controls-position="right" @change="handleChange" :min="0"></el-input>
            </el-col>
            <el-col class="line" :span="2" style="text-align:center;">
              <el-button v-if="val.sign == 'inRange'" size="mini" type="text" @click="signChange(name,'outRange')">内</el-button>
              <el-button v-else size="mini" type="text"  @click="signChange(name,'inRange')">外</el-button>
            </el-col>
          </el-form-item>
        </el-form>
        </div>
        <el-form
          @submit.native.prevent
          ref="groupForm"
          style="padding: 10px 10px 0 0;"
          :model="groupForm"
          label-width="80px"
        >
          <el-form-item label="分组条件" prop="prop">
            <i class="el-icon-edit" @click="showtransfer"></i>
            <el-select v-model="groupForm.prop" style="width: 100%;" placeholder="请选择分组条件">
              <el-option
                v-for="item in groupFields"
                :label="item.label"
                :value="item.prop"
                :key="item.prop"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="mini"
              :loading="loading"
              @click="doCount"
              >执行查询</el-button
            >
            <el-button size="mini" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </hi-layout-right>
      
      <hi-layout-center style="heiht: 100%;">
        <div class="depth-analysis">
          <span>深度分析:</span>
          <el-breadcrumb
            separator-class="el-icon-arrow-right"
            style="padding: 0 0 0 10px;"
          >
            <el-breadcrumb-item v-for="(item,index) in deepArr" :key="item.prop">
              <span v-if="item.label.includes(',') && item.selectVal" @click="breadcrumbClick(item.prop)" :class="{ deepActive: index == curIndex }" style="cursor: pointer;">
                <span v-for="(it, i) in item.label.split(',')">
                  {{ it }}
                  <span style="color: rgb(255, 102, 0);margin-left:2px;" v-if="index < curIndex">{{ item.selectVal.split(',')[i] }}<span v-if="i < item.label.split(',').length - 1">,</span></span>
                </span>
              </span>
              <span v-else @click="breadcrumbClick(item.prop)" :class="{ deepActive: index == curIndex }" style="cursor: pointer;">
                {{ item.label }}
                <span style="color: rgb(255, 102, 0);margin-left:2px;" v-if="index < curIndex">{{ item.selectVal }}</span>
              </span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div v-if="showDetail" style="height: calc( 100% - 100px )">
          <el-table
            :data="data"
            ref="table"
            height="100%"
            border
            stripe
            :show-summary="showSummary"
            :summary-method="getSummaries"
            header-row-class-name="tableHeader"
            style="width: 100%"
          >
            <el-table-column
              v-if="showIndex"
              type="index">
            </el-table-column>
            <el-table-column
              v-for="item in tableColumns"
              :key="item.prop"
              :prop="item.prop"
              :label="item.label"
            >
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <div v-if="!showDetail && chartType == 'table'" style="height: calc( 100% - 100px )">
          <el-table
            :data="data"
            ref="table"
            height="100%"
            border
            stripe
            @row-dblclick="rowDblclick"
            :show-summary="showSummary"
            :summary-method="getSummaries"
            header-row-class-name="tableHeader"
            style="width: 100%"
          >
            <el-table-column
              v-if="showIndex"
              type="index">
            </el-table-column>
            <el-table-column
              v-for="item in tableColumns"
              :key="item.prop"
              :prop="item.prop"
              :label="item.label"
            >
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <Pie-chart
          style="height: calc( 100% - 100px )"
          v-else-if="!showDetail && chartType == 'pie'"
          ref="chartConf"
          :conf="chartConf"
        ></Pie-chart>
        <Bar-chart
          style="height: calc( 100% - 100px )"
          v-else-if="!showDetail && (chartType == 'bar' || chartType == 'stack') "
          ref="chartConf"
          :conf="chartConf"
        ></Bar-chart>
        <Line-chart
          style="height: calc( 100% - 100px )"
          v-else-if="!showDetail && chartType == 'line'"
          ref="chartConf"
          :conf="chartConf"
        ></Line-chart>
        <Line-chart
          style="height: calc( 100% - 100px )"
          v-else-if="!showDetail && chartType == 'area'"
          ref="chartConf"
          :conf="chartConf"
        ></Line-chart>
      </hi-layout-center>
    </hi-layout>
    
    <el-dialog :visible.sync="analysisVisible" title="分析列设置" :height="500">
      <el-table :data="analysisData" size="small" :height="400">
        <el-table-column
          prop="countField"
          label="统计字段">
        </el-table-column>
        <el-table-column prop="tableColumn" label="网格列" align="center">
          <template slot="header" slot-scope="{row}">
            <el-checkbox v-model="tableColumnCheck" @change="handelCheckAll('tableColumn')" label="网格列"></el-checkbox>
          </template>
          <template slot-scope="{row}">
            <el-checkbox v-model="row.tableColumn"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="tableColumn" label="网格合计列" align="center">
          <template slot="header" slot-scope="{row}">
            <el-checkbox v-model="tableColumnCountCheck" @change="handelCheckAll('tableColumnCount')" label="网格合计列"></el-checkbox>
          </template>
          <template slot-scope="{row}">
            <el-checkbox v-model="row.tableColumnCount"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="tableColumn" label="图表列" align="center">
          <template slot="header" slot-scope="{row}">
            <el-checkbox v-model="chartColumnCheck" @change="handelCheckAll('chartColumn')" label="图表列"></el-checkbox>
          </template>
          <template slot-scope="{row}">
            <el-checkbox v-model="row.chartColumn"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="chartColumnCount" label="图表列汇总" align="center">
          <template slot="header" slot-scope="{row}">
            <el-checkbox v-model="chartColumnCountCheck" @change="handelCheckAll('chartColumnCount')" label="图表列汇总"></el-checkbox>
          </template>
          <template slot-scope="{row}">
            <el-checkbox v-model="row.chartColumnCount"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="columnUp(scope.$index, scope.row)">上移</el-button>
              <el-button
                size="mini"
                type="text"
                @click="columnDown(scope.$index, scope.row)">下移</el-button>
            </template>
          </el-table-column>
      </el-table>
    </el-dialog>
    
    <el-dialog  :visible.sync="analysisFieldsVisible" title="选择分析字段" :height="500">
       <Pie-chart
          style="height: 400px;"
          ref="analysisChart"
          :conf="analysisChartConf"
        ></Pie-chart>
    </el-dialog>
    
    <el-dialog  :visible.sync="transferVisible" title="选择分组字段" :height="500" width="640px" center @close="transferClose">
       <el-transfer class="sam" v-model="groupFieldsEdit" :data="conf.groupFields" 
       :titles="['来源字段', '目标字段']"
       target-order="push"
       :props="{
          key: 'prop',
          label: 'label'
        }" style="width: 100%;padding: 20px;">
        <span slot-scope="{ option }">{{ option.label }}
          <el-button style="margin-left: 10px;" icon="el-icon-top" type="primary" size="mini" circle @click.stop="transferUp(option)"></el-button>
          <el-button icon="el-icon-bottom" type="primary" size="mini" circle @click.stop="transferDown(option)"></el-button>
        </span>
        </el-transfer>
        <span slot="footer" class="dialog-footer">
          <el-button @click="transferClose" size="small">取 消</el-button>
          <el-button type="primary" size="small" @click="transferConfirm">确 定</el-button>
        </span>
    </el-dialog>
  </div> 
</template>

}else{
                  let keyArr = sData.data.map(item =>{
                    return item[this.curGroupField]
                  })
                  let i = keyArr.indexOf(keyList[key])
                  if(i > -1){
                    obj = {...obj, ...sData.data[i]}
                  }else{
                    for(let j in sData.data[0]){
                      obj[j+'-'+sData.id] = 0
                    }
                  }
                }
              }
              newData[key] = obj
            }
            this.data = newData
          }else{
            this.data = []
          }
          arr = curGroupArr.concat(newFields)
        }else{
          // 当前分组列+分析列
          arr = curGroupArr.concat(this.analyseFields)
          if(arr && arr.length){
            this.sortArr = arr
          }
        }
        arr = arr.filter(item =>{
          var show = true
          this.analysisData.forEach(data =>{
            if(data.prop == item.prop){
              show = data.tableColumn
            }
          })
          return show
        })
        return arr
      }
    },
    showIndex(){
      return this.conf && this.conf.showIndex || false
    },
    // 网格是否显示合计行
    showSummary(){
      let flag = false
      this.analysisData.some(item =>{
        flag = item.tableColumnCount
        return flag
      })
      return flag
    },
    //  数据列
    dataFields(){
      return this.conf && this.conf.dataFields || []
    },
    // 图表配置
    chartConf() {
      debugger
      let groupBy = this.curGroupField;
      let calcFields = []
      // 系列
      var series = [];
      const tooltipOption = {
        trigger: 'item',
        axisPointer: {
          type: 'shadow'
        },
      }
      let analysisList = this.analysisData.filter(item =>{
        return item.chartColumn
      })
      calcFields = analysisList.map(item =>{
        let obj = {
          name: item.prop,
          title: item.label
        }
        series.push({tooltip: tooltipOption})
        return obj
      })
      let controlName = ''
      let datas = this.data
      // 组合分组条件时，数据添加组合列
      if(groupBy.includes(',')){
        let keyArr = groupBy.split(',');
        datas = datas.map(item =>{
          let label = []
          for(let key of keyArr){
            label.push(item[key])
          }
          label=label.join();
          item[groupBy] = label
          return item
        })
      }
      controlName = this.chartType == "pie" ? "PieChart"
                  : this.chartType == "bar" ? "BarChart"
                  : this.chartType == "stack" ? "BarChart"
                  : this.chartType == "line" ? "LineChart"
                  : this.chartType == "area" ? "LineChart" : 'PieChart'
      // 区域图
      let areaSeries = calcFields.map(item =>{
        return {
          smooth: true,
          areaStyle: {
            normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "rgba(30, 231, 231, 0.3)" },{ offset: 1, color: "rgba(30, 231, 231, 0.1)" }]),
            },
          },
          label: {
            show: false,
            position: "outside",
          },
        }
      })
      // 饼图
      let pieSeries = []
      if(this.chartType == "pie"){
        let len = calcFields.length
        switch(len){
          case 1: 
            pieSeries = [];
            break;
          case 2: 
            pieSeries = [
              {
                radius: ["50%"],
                center: ["25%", "50%"],
              },
              {
                radius: ["50%"],
                center: ["75%", "50%"],
              },
            ]
            break;
          case 3:
            pieSeries = [
              {
                radius: ["50%"],
                center: ["25%", "50%"],
              },
              {
                radius: ["35%"],
                center: ["75%", "30%"],
              },
              {
                radius: ["35%"],
                center: ["75%", "70%"],
              },
            ]
            break;
          case 4: 
            pieSeries = [
              {
                radius: ["35%"],
                center: ["25%", "30%"],
              },
              {
                radius: ["35%"],
                center: ["25%", "70%"],
              },
              {
                radius: ["35%"],
                center: ["75%", "30%"],
              },
              {
                radius: ["35%"],
                center: ["75%", "70%"],
              },
            ]
            break;
        }
      }
      /// 叠加柱图
      let stackSeries = calcFields.map(item =>{
        return {
          stack:  '总量'
        }
      })
      const conf = {
          controlName: controlName,
          controlId: "chart_controlid",
          height: "100%",
          isGroupData: true,
          groupBy: groupBy,
          datas: datas,
          calcFields: calcFields,
          option: {
            legend: {
              show: true
            },
            series: this.chartType == "area" ? areaSeries 
            : this.chartType == "stack" ? stackSeries
            : this.chartType == "pie" ? pieSeries : series
          },
          events:{
            click(row){
              let _this = this.$parent.$parent.$parent;
              _this.currentObj = row.data
              _this.currentObj.prop = _this.curGroupField;
              if(_this.perspective){
                var index = -1
                _this.deepArr.forEach((item,i)=>{
                  if(item.prop == _this.curGroupField){
                    index = i
                  }
                })
                if(index > -1 && index < _this.deepArr.length - 1){
                  _this.analysisFieldsVisible = false
                  _this.curIndex = _this.curIndex + 1
                  _this.currentObj = _this.deepArr[_this.curIndex];
                  _this.data = _this.currentObj.data
                  _this.curGroupField = _this.currentObj.prop;
                }else{
                  _this.analysisChartConf.datas = _this.deepAnalysisFields
                  _this.analysisFieldsVisible = true
                }
              }else{
                _this.analysisChartConf.datas = _this.deepAnalysisFields
                _this.analysisFieldsVisible = true
              }
              _this.superposition = false
            }
          }
      };
      return conf 
    },
    //  深度分析字段列表
    deepAnalysisFields(){
      let fields = this.groupFields
      if(fields && fields.length == 0){
        return []
      }
      let analysisFields = fields.map((item) => {
        item.value = 1
        return item
      });
      
      // 排除已经统计的分析列
      if(this.deepArr && this.deepArr.length > 0){
        let arrnew = this.deepArr.slice(0, this.curIndex + 1).map((item) => {
          return item.prop
        });
        // 多条件的分组 拆开排除
        arrnew.forEach(item =>{
          if(item.includes(',')){
            arrnew.concat(item.split(','))
          }
        })
        analysisFields = analysisFields.filter(item =>{
          return arrnew.indexOf(item.prop) < 0
        })
      }
      // 添加详情
      analysisFields.push(
        {
          prop: 'detail',
          label: "详情",
          value: 1
        }
      )
      return analysisFields
    },
    // 查询字段
    queryFields(){
      let queryFields = []
      let fields = this.conf && this.conf.queryFields
      if(!fields || fields.length == 0){
        queryFields = []
      }else{
        queryFields = fields.map(item =>{
          let obj = {}
          obj.prop = item.prop;
          obj.label = item.label;
          if(item.props && item.props.lookup){
            let model = item.props.lookup
            if(item.element === 'hi-select-grid'){
              var columns = []
              if(model && model.columns && model.columns.length){
                columns = model.columns.map(item =>{
                  item.prop = item.name
                  return item
                })
              }
              let table = model.tableprops || {}
              table['columns'] = columns
              obj.lookup = {
                type: "data",
                openstyle: 'selectgrid',
                bindField: item.prop,
                lookSelectGrid: {
                  width: 1200,
                  height: 600,
                  table: table,
                  bindField: item.prop
                },
              }
              if(model && model.sourceDatas){
                obj.lookup.lookSelectGrid['tableData'] = model && model.sourceDatas
              }
              if(model && model.modelFile){
                obj.lookup['lookDataset'] = {
                  modelFilePath: this.conf.dataset.controlId,
                  showSearchField: true
                }
              }
              obj.dbtype = 'dbString'
            }else if(item.element === 'hi-data-select'){
              var columns = []
              if(model && model.columns && model.columns.length){
                columns = model.columns.map(item =>{
                  item.prop = item.name
                  return item
                })
              }
              let queryOptionFields = model.queryOption && model.queryOption.fields
              let store = model.storeCfg || model.sourceDsCfg
              let modelFilePath = store.modelFile
              let fields = store.fields
              if(!(queryOptionFields && queryOptionFields.length)){
                return
              }
              let rows = queryOptionFields.map(item =>{
                return {children:[
                  {
                    prop: item.name,
                    label: item.label
                  }
                ]}
              });
              let cols = queryOptionFields.map(item =>{
                return { colWidth: 100}
              });
              let queryPanel = {
                rows: rows,
                cols: cols
              };
              let tableColumn = model.columns.map(item =>{
                return {
                  prop: item.name,
                  label: item.label
                }
              })
              // var table = model.tableprops || {}
              var table = {
                children:tableColumn,
                stripe: model.tableprops && model.tableprops.stripe || false
              }
              let ds = {
                controlName: "HcDataset",
                controlId: modelFilePath,
                name:  model.entityDs,
                modelFilePath: modelFilePath,
                _infcPagging: {
                    pageSize: 10,
                    pageNum: 1,
                    returnCount: true
                },
                _infcLoad: {
                    autoActive: true,
                },
                fields: fields,
                data: [],
              }
              obj.lookup = {
                type: "data",
                openstyle: 'dialog',
                birtModel: GridSingleSelect({
                  mainDataset: ds,
                  hcQueryPanel: queryPanel,
                  hcTable: table
                }),
                lookDataset: {
                  modelFilePath: modelFilePath, // 数据模型路径
                  showSearchField: true
                },
                lookDialog: {
                  title: "",
                  width: 900,
                  height: 600,
                },
                bindField: item.prop,
                sourceDsId: model.sourceDsId
              }
              obj.dbtype = 'dbString'
            }
          }
          // 时间方案
          if(item.props && item.element == 'hi-time-scheme'){
            obj.dbtype = 'dbDatetime'
            obj.format = item.props.format
            obj.element = 'hi-time-scheme'
            obj.disabledEx = item.disabledEx
            obj.viewStyle = {
              viewStyleId: 'DATERANGE',
              type: item.props.rangeType,
              format: item.props.format
            }
          }
          return obj
        })
      }
      return queryFields
    },
    // 数据集字段
    fields(){
      let fields = this.conf.dataset && this.conf.dataset.config.fields
      for(let key in this.queryFields){
        let prop = this.queryFields[key].prop
        if(fields[prop] && fields[prop].lookup){
          let lookup = Object.assign(fields[prop].lookup, this.queryFields[key].lookup)
          // 下拉枚举查找
          if(lookup.label && lookup.returnFields){
            for(let key in lookup.returnFields){
              if(lookup.returnFields[key] == lookup.label && lookup.lookSelectGrid){
                lookup.bindShowField = key
                lookup.lookSelectGrid.bindShowField = key
              }
              if(lookup.lookSelectGrid && lookup.lookSelectGrid.tableData){
                let data = lookup.lookSelectGrid.tableData
                for(let i in data){
                  if(data[i][lookup.returnFields[key]]){
                    data[i][key] = data[i][lookup.returnFields[key]]
                  }
                }
              }
            }
          }
          // 数据模型查找
          if(lookup.fieldPair){
            if(lookup.sourceDsId){
              lookup.returnFields = lookup.fieldPair[lookup.sourceDsId].returnFields
            }else{
              let key = Object.keys(lookup.fieldPair)[0]
              lookup.returnFields = lookup.fieldPair[key].returnFields
            }
          }
          lookup.returnType = "single",
          fields[prop]['lookup'] = lookup 
        }
        // 时间方案
        if(fields[prop] && this.queryFields[key].element == 'hi-time-scheme'){
          let fd = this.queryFields[key]
          fields[prop].dbtype = 'dbDatetime'
          fields[prop].format = fd.format
          fields[prop].disabledEx = fd.disabledEx
        }
      }
      // 应用默认填充表达式
      for(let key in fields){
        if(fields[key].default && fields[key].default.exps){
          fields[key].default['expr'] = fields[key].default.exps
        }
      }
      return fields
    },
    // 数据集
    dataset(){
      var dataset = {}
      if(this.conf && this.conf.dataset){
        let ds = this.conf.dataset
        dataset = {
          controlName: ds.controlName,
          controlId: ds.controlId,
          name: ds.name,
          modelFilePath: ds.modelFilePath,
          fields: this.fields,
          _infcLoad: {
              autoActive: false
            },
          _infcPagging: {
              returnCount: true,
              pageSize: 100,
              pageNum: 1
            },
          data: [],
        }
      }
      return dataset
    },
    // 查询面板
    birtModelRight(){
      let rows = this.queryFields.map(item =>{
        return {children:[item],colspan: 12}
      })
      let cols = this.queryFields.map(item =>{
        return { colWidth: 60 }
      })
      const queryPanel = {
        rows: rows,
        cols: cols
      };
      let hcQueryPanel = {
        controlName: "HcQueryPanel",
        controlId: "HcQueryPanel_sam",
        inline: false,
        dataset: this.dataset && this.dataset.controlId || "dsSam",
        size: "small",
        hideBtn: true,
        style: "width: 100%;",
        children: [],
      };
      Object.assign(hcQueryPanel, QueryStyleFactory.buildForm(queryPanel) || {});
      let birtModelRight = {
        controlName: "BirtWorkBook",
        controlId: "BirtWorkBook_right",
        style: "border-bottom: 1px solid #eee;",
        showToolBar: false,
        children: [
          {
            controlName: "BirtSheet",
            controlId: "BirtSheet_right",
            name: "sheet0",
            pageIndex: 0,
            dataSets: [{
              controlName: "HcDataset",
              controlId: "dsScheme",
              name: "SysSchemeBizEntity",
              rowKey: "FGUID",
              modelFilePath: "/platf/scheme/entity/SysSchemeBizEntity.xml",
              _infcLoad: {
                  autoActive: false,
                  __zcQuery: true
              },
              _infcPagging: {
                  _isAddingPagging: false,
                  pageSize: -1,
              },
              fields: {},
              data: [],
            }].concat(this.dataset ? this.dataset : []),
            children: [
              {
                controlName: "BirtFormSheet",
                controlId: "BirtFormSheet_01",
                children: [hcQueryPanel]
              }
            ]
          }
        ],
      };
      return birtModelRight
    },
    // 分组条件(统计字段)
    groupFields(){
      let groupFields = this.conf && cloneDeep(this.conf.groupFields) || []
      // 组合分组条件
      if(this.curTransferVal && this.curTransferVal.length){
        let obj = {}
        let curTransferLabel = this.curTransferVal.map(item =>{
          for(var field of groupFields){
            if(field.prop == item){
              return field.label
            }
          }
        })
        obj = {
          prop: this.curTransferVal.join(),
          label: curTransferLabel.join()
        }
        groupFields.push(obj)
      }
      return groupFields
    },
    // 分析字段
    analyseFields(){
      return this.conf && this.conf.analyseFields || []
    },
    // 显示详情
    showDetail(){
      return this.currentObj.prop == 'detail'
    },
    // 执行叠加按钮
    btnDisabled(){
      return !this.selectionData || this.selectionData.length < 2
    }
  },
  watch:{
    conf:{
      deep: true,
      handler: function(val){
        if(val && val.groupFields && !this.groupForm.prop){
          this.groupForm.prop = val.groupFields[0] && val.groupFields[0].prop
          this.curGroupField = this.groupForm.prop
        }
        if(val && val.analyseFields && val.analyseFields.length){
          this.analysisData=val.analyseFields.map(item =>{
            let obj = {
              prop: item.prop,
              label: item.label,
              countField: item.label,
              tableColumn: true,
              tableColumnCount: true,
              chartColumn: true,
              chartColumnCount: true,
            }
            return obj
          })
        }
      }
    },
  },
  data() {
    return {
      size: 'small',
      superposition: false,
      perspective: false,
      chartType: "table",
      groupForm: {
        prop: ""
      },
      loading: false,
      currentPage: 1,
      pageSize: 100,
      pageSizes: [10,20,50,100],
      total: 0,
      data: [],
      // 排序
      sortArr:[],
      sortIndex:-1,
      sortType: '',
      // 分析列
      analysisVisible: false,
      analysisData:[],
      tableColumnCheck: true,
      tableColumnCountCheck: true,
      chartColumnCheck: true,
      chartColumnCountCheck: true,
      // 分析字段
      analysisFieldsVisible: false,
      analysisFieldsArr:[],
      analysisChartConf:{
        controlName: "PieChart",
        controlId: "chart_analysis",
        height: "100%",
        isGroupData: true,
        groupBy: "label",
        datas: [],
        calcFields: [
          {
            name: "value",
            title: ""
          }
        ],
        option: {
          legend: {
            show: true
          }
        },
        events:{
          click(row){
            debugger;
            var _this = this.$parent.$parent;
            _this.analysisChartConf.datas = _this.deepAnalysisFields
            let data = JSON.parse(JSON.stringify(row.data))
            delete data.emphasis
            // 删除当前分析以后的深度分析
            _this.deepArr.splice(_this.curIndex+1, _this.deepArr.length - _this.curIndex - 1)
            let obj = _this.deepArr[_this.deepArr.length -1]
            if(_this.currentObj.name){
              obj.selectVal = _this.currentObj.name 
            }else{
              if(_this.currentObj.prop.includes(',')){
                let selectVal = []
                let arr = _this.currentObj.prop.split(',')
                selectVal = arr.map(item =>{
                  return _this.currentObj[item]
                })
                obj.selectVal = selectVal.join()
              }else{
                obj.selectVal = _this.currentObj[_this.currentObj.prop]
              }
            }
            _this.$set(_this.deepArr,_this.curIndex,obj)
            _this.$set(_this.deepArr,_this.curIndex + 1, data)
            _this.curGroupField = data.prop;
            _this.currentObj = data;
            _this.curIndex = _this.curIndex + 1;
            _this.doQuery();
            _this.analysisFieldsVisible = false;
          }
        }
      },
      // 深度分析
      deepArr:[],
      conf:{},
      // 图表当前选中对象
      currentObj:{},
      // 当前分组字段
      curGroupField: '',
      // 深度分析当前环节下标
      curIndex: 0,
      exportLoading: false,
      // 穿梭框
      transferVisible: false,
      curTransferVal: [],
      groupFieldsEdit: [],
      schemeLoading: false,
      havingForm:{},
      // 分析记录
      recordVisible: false,
      recordData:[],
      // 已勾选记录
      selectionData: [],
      //  统计方案
      schemeData:[],
      schemeVisible: false,
      // 是否监听
      isMonitor: false,
      // 底部汇总数据
      bottomSummary: {},
      // 是否查询面板查询
      isQueryModel: false
    }
  },
  updated() {
    this.$nextTick(() => {
      this.$refs["table"] && this.$refs["table"].doLayout();
    });
  },
  methods: {
    //  排序
    sortClick(val) {
      this.sortIndex = val
      this.doQuery();
    },
    sortDown(){
      this.sortType = 'desc'
    },
    sortUp(){
      this.sortType = 'asc'
    },
    // 前进
    goCommand(index){
      this.curIndex = index;
      this.currentObj = this.deepArr[index];
      this.curGroupField = this.currentObj.prop;
      this.data = this.currentObj.data
    },
    goClick:debounce(function(){
      if(this.curIndex < this.deepArr.length - 1){
        this.curIndex = this.curIndex + 1;
        this.currentObj = this.deepArr[this.curIndex];
        this.curGroupField = this.currentObj.prop;
        this.data = this.currentObj.data
      }
    },500),
    // 后退
    backCommand(val){
      this.curIndex = val
      this.currentObj = this.deepArr[val];
      this.curGroupField = this.currentObj.prop;
      this.data = this.currentObj.data
    },
    backClick:debounce(function(){
      if(this.curIndex > 0){
        this.curIndex = this.curIndex - 1
        this.currentObj = this.deepArr[this.curIndex];
        this.curGroupField = this.currentObj.prop;
        this.data = this.currentObj.data
      }
    },500),
    // 深度分析
    breadcrumbClick(val) {
      this.curGroupField = val
      let arrnew = this.deepArr.map(item =>{
        return item.prop
      })
      this.curIndex = arrnew.indexOf(val)
      this.currentObj = this.deepArr[this.curIndex];
      // 数据替换成缓存的数据
      this.data = this.currentObj.data
    },
    // 点击表格
    rowDblclick(row){
      this.currentObj = row
      this.currentObj.prop = this.curGroupField;
      this.superposition = false
      if(this.perspective){
        var index = -1
        this.deepArr.forEach((item,i)=>{
          if(item.prop == this.curGroupField){
            index = i
          }
        })
        if(index > -1 && index < this.deepArr.length - 1){
          this.analysisFieldsVisible = false
          this.curIndex = this.curIndex + 1
          this.currentObj = this.deepArr[this.curIndex];
          this.data = this.currentObj.data
          this.curGroupField = this.currentObj.prop;
        }else{
          this.analysisChartConf.datas = this.deepAnalysisFields
          this.analysisFieldsVisible = true
        }
      }else{
        this.analysisChartConf.datas = this.deepAnalysisFields
        this.analysisFieldsVisible = true
      }
    },
    // 点击查询
    doCount() {
      debugger;
      // 叠加状态下不执行查询操作
      if(this.superposition){
        return
      }
      // 监听数据集
      if(this.dataset){
        let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
        if(!this.isMonitor){
          ds && ds.on("afterLoadData", this.afterLoadData);
          this.isMonitor = true
        }
        this.loading = true;
        let prop = this.groupForm.prop;
        let fields = this.groupFields.map(item =>{
          return item.prop
        })
        this.curGroupField = prop;
        let index = fields.indexOf(prop)
        if(this.deepArr.length){
          // 如果切换了分组条件，清空深度分析
          if(this.deepArr[0] && this.deepArr[0].prop !== prop){
            this.deepArr = []
            this.currentObj = this.groupFields[index]
            this.recordData = []
          }else{
            this.currentObj = this.deepArr[0]
          }
        }
        this.currentPage = 1
        let queryModel = ds.getQueryModel()
        this.doQuery(queryModel);
         // 添加分析记录
        let obj = {}
        if(Object.keys(queryModel).length === 0){
          obj = {
            id: 'empty',
            name: '空条件',
            prop: this.groupForm.prop,
          }
        }else{
          let keyArr = [];
          let labelArr = [];
          for(let key in queryModel){
            if(queryModel[key] || queryModel[key] === 0){
              keyArr.push(key);
              // let arr = this.queryFields.filter(item =>{
              //   return item.prop == key
              // })
              labelArr.push(queryModel[key]);
            }
          };
          if(keyArr.length && labelArr.length){
            obj = {
              id: keyArr.join() + '_' + labelArr.join(),
              name: labelArr.join(),
              prop: this.groupForm.prop,
            }
          }else{
            obj = {
              id: 'empty',
              name: '空条件',
              prop: this.groupForm.prop,
            }
          }
        }
        // 判断分析记录中是否含有此条件，有则跳过，无则添加
        const ids = this.recordData.map(value=>value.id);
        if(!ids.includes(obj.id)){
          this.isQueryModel = true
          let simple = this.recordData.length + 1;
          obj.simple = simple
          obj.isEdit = false
          this.recordData.push(obj);
        }else{
          this.isQueryModel = false
        }
        // 当前分组加入深度分析
        if(index < 0){
          this.$message.error('当前分组条件不在分组字段中，请重新配置')
        }else{
          this.$set(this.deepArr,0,this.groupFields[index])
          this.curIndex = 0
        };
      }
    },
    afterLoadData(datas){
      let newData = datas
      let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
      if(datas && datas.length){
        newData = datas.map(item =>{
          return ds && ds.getFormatRecd(item)
        })
      }
      this.data = newData
      // 缓存数据
      this.deepArr[this.curIndex].data = newData;
      // 总条数
      this.total = ds._infcPagging.recordCount || this.total;
      // 底部汇总数据
      this.bottomSummary = ds.getBottomSummeryRecd();
      // 添加分析记录
      if(!this.isQueryModel) return
      this.recordData[this.recordData.length - 1].data = datas
    },
    // 查询方法
    doQuery(model){
      let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
      if(this.showDetail){
        ds._infcPagging = {
          _isPagging: true,
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          returnCount: true
        };
        ds._infcStat = {}
        ds._infcSort = {}
      }else{
        ds._infcPagging = {
          _isPagging: true,
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          returnCount: true
        };
        ds._infcStat = {
          isGroupData: true,
          groupBy: this.curGroupField,
          __bottomSummary: true
        }
        if(this.sortIndex > -1){
          let obj = this.sortArr[this.sortIndex]
          ds._infcSort.orderBy =[{
            name: obj.prop, 
            desc: obj.label, 
            type: this.sortType || 'desc'
          }]
        }else{
          ds._infcSort.orderBy = []
        }
        if(this.havingForm){
          let _infcHaving = {};
          for(let item in this.havingForm){
            let obj = JSON.parse(JSON.stringify(this.havingForm[item]))
            let val = obj.value
            let val2 = obj.value2
            if(val === undefined && val === undefined){

}else if((val || val === 0) && (val2 || val2 === 0)){
              _infcHaving[item] = obj
            }else{
              if(obj.sign == 'inRange'){
                obj.sign = 'lteq'
              }else{
                obj.sign = 'gt'
              }
              _infcHaving[item] = obj
            }
          }
          ds._infcHaving = _infcHaving
        }
      }
      if(model){
        ds.setQueryModel(model)
      }else if(this.deepArr && this.deepArr.length > 0){
        let queryModel = {}
        this.deepArr.forEach(item =>{
          if(item.prop && item.selectVal){
            if(!item.prop.includes(",")){
              queryModel[item.prop] = item.selectVal
            }else{
              let arr = item.prop.split(',')
              arr.forEach((it,i) =>{
                queryModel[it] = item.selectVal && item.selectVal.split(',')[i]
              })
            }
          }
        })
        ds.setQueryModel(queryModel)
      }else{
        ds._infcLoad.queryModel = {}
      }
      ds.query();
      this.loading = false;
    },
    //  重置
    reset() {
      this.$refs.groupForm.resetFields();
      this.$refs.havingForm.resetFields();
      this.havingForm = JSON.parse(JSON.stringify(this.conf.havingForm));
      this.curTransferVal = []
      this.groupForm.prop = this.groupFields[0] && this.groupFields[0].prop;
      var queryPanel = this.$refs.BirtWorkBook_right.$children[0].$children[0].$children[0].$children[0].$children[0].$children[0];
      queryPanel.reset();
      let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
      ds._infcLoad.queryModel={}
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.doQuery()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.doQuery()
    },
    // 切换图表
    chartTypeChange(command) {
      this.chartType = command;
    },
    // 打开分析列
    analysisClick(){
      this.analysisVisible = true
    },
    // 分析列全选
    handelCheckAll(val){
      let _this = this
      this.analysisData = this.analysisData.map(item => {
        if(val == 'tableColumn') {
          item.tableColumn = _this.tableColumnCheck
        }
        if(val == 'tableColumnCount') {
          item.tableColumnCount = _this.tableColumnCountCheck
        }
        if(val == 'chartColumn') {
          item.chartColumn = _this.chartColumnCheck
        }
        if(val == 'chartColumnCount') {
          item.chartColumnCount = _this.chartColumnCountCheck
        }
        return item
      })
    },
    // 分析列上移
    columnUp(index,row){
      let arr = this.analysisData
      if(index > 0){
        arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]));
      }
    },
    columnDown(index, row){
      let arr = this.analysisData
      if(index < arr.length){
        arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]));
      };
    },
    // 刷新
    refresh(){
      this.doQuery();
      this.$refs.chartConf && this.$refs.chartConf.refreshChart();
    },
    // 导出
    exportExcel() {
        let param = {
            pageNum: -1,
            pageSize: -1,
            __slaveExport: false,
        };
        let __body = {};
        let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
        var cdion = ds.lastLoadCdion
        console.log('cdion', cdion)
        if (cdion) {
            __body['queryCdions'] = JSON.parse(cdion);
        }
        if(this.curGroupField !== 'detail'){
          __body['groupBy'] = this.curGroupField
        }
        param['modelFilePath'] = ds['modelFilePath'];
        param['__funcpath'] = ds['__funcpath'];
        param.__body = __body
        let sheetStyle = {}
        let cells = []
        let columns = []
        this.tableColumns.forEach(item => {
          cells.push({
            title: item.label,
            colspan: 1,
            rowspan: 1
          })
          columns.push({
            field: item.prop,
            width: 170
          })
        });
        sheetStyle = {
        name: '统计分析',
        titleRows: [
          {
            cells: cells
          }
        ],
        columns: columns
      }
        param.__sheetStyle = sheetStyle
        var time = new Date().getTime()
        var title = `统计分析${time}`
        var data = {
            title: title,
            __sheetDatas: JSON.stringify([param])
        }
        var url = this.$HI.exportUrl
        this.exportLoading = true
        this.$HI.request.post(url,data).then((res) =>{
            console.log('res', res)
            this.exportLoading = false
            if(res.status == 200){
                let token = getToken();
                var url = this.$HI.download + `?path=${res.dataPack.path}&access_token=${token}`
                url = url.replace(/\\/g,"/")
                const a = document.createElement('a') //创建a标签
                a.style.display = 'none'
                a.href = url // 指定下载链接
                a.download = title //指定下载文件名
                a.click() //触发下载
            }
        }).catch((e) =>{
            this.exportLoading = false
        })
    },
    // 打开穿梭框
    showtransfer(){
      this.groupFieldsEdit = JSON.parse(JSON.stringify(this.curTransferVal))
      this.transferVisible = true
    },
    transferConfirm(){
      if(this.groupFieldsEdit && this.groupFieldsEdit.length > 1){
        this.curTransferVal = JSON.parse(JSON.stringify(this.groupFieldsEdit))
        this.groupForm.prop = this.curTransferVal.join();
        this.curGroupField = this.groupForm.prop;
        this.transferVisible = false
      }else{
        this.$message.error("该分组选项已存在")
      }
    },
    transferClose(){
      this.transferVisible = false
      this.groupFieldsEdit = JSON.parse(JSON.stringify(this.curTransferVal))
    },
    transferUp(option){
      let arr = this.groupFieldsEdit
      let index = this.groupFieldsEdit.indexOf(option.prop)
      if(index > 0){
        arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]));
      }
    },
    transferDown(option){
      let arr = this.groupFieldsEdit
      let index = this.groupFieldsEdit.indexOf(option.prop)
      if(index < arr.length){
        arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]));
      };
    },
    // 合计列
    getSummaries(parma){
      const { columns, data } = parma;
      const sums = [];
      // let arr = this.analyseFields.map(item =>{
      //   return item.prop
      // })
      columns.forEach((column, index) => {
        let show = true
        this.analysisData.forEach(item =>{
          if(item.prop == column.property){
            show = item.tableColumnCount
          }
        })
        // if(arr.includes(column.property) && show){
        //   let values = data.map(item => Number(item[column.property]));
        //   sums[index] = values.reduce((prev, curr) => {
        //     const value = Number(curr);
        //     if (!isNaN(value)) {
        //       return prev + curr;
        //     } else {
        //       return prev;
        //     }
        //   }, 0);
        if(this.bottomSummary && this.bottomSummary[column.property] && show){
          sums[index] = this.bottomSummary[column.property]
        }else{
          sums[index] = '';
        }
      })
      sums[0] = '统计'
      return sums;
    },
    // 分析列表
    handleEdit(index, row){
      row.isEdit = true
      this.recordData[index] = row
    },
    handleConfirm(index, row){
      row.isEdit = false
      this.recordData[index] = row
    },
    handleDelete(index, row){
      this.recordData.splice(index, 1)
    },
    // 执行叠加
    doClick(){
      this.superposition = true
      this.recordVisible = false
      this.curGroupField = this.recordData[0].prop
      this.curIndex = 0
    },
    // 分析记录勾选
    handleSelectionChange(row){
      this.selectionData = row
    },
    // 双击
    recordDblClick(row){
      this.curIndex = 0
      this.data = row.data
      this.deepArr[0].data = row.data
      this.currentObj.data = row.data
    },
    signChange(val,sign){
      this.havingForm[val]['sign'] = sign
    },
    // 统计方案
    schemeRowClick(row){
      if(row.FCONTENT){
        this.reset();
        let conf = JSON.parse(row.FCONTENT);
        if(conf.deepList){
          this.deepArr = conf.deepList
        }
        if(conf.curGroupField){
          this.curGroupField = conf.curGroupField
        }
        if(conf.queryModel){
          let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
          ds.setQueryModel(conf.queryModel)
          let queryPanel = this.$refs.BirtWorkBook_right.$children[0].$children[0].$children[0].$children[0].$children[0].$children[0];
          queryPanel.bindModel = conf.queryModel
        }
        if(conf.groupForm){
          this.groupForm = conf.groupForm
        }
        if(conf.havingForm){
          this.havingForm = conf.havingForm
        }
        if(conf.sortIndex){
          this.sortIndex = conf.sortIndex
        }
        if(conf.sortType){
          this.sortType = conf.sortType
        }
        if(conf.data){
          this.data = conf.data
        }
        if(conf.currentObj){
          this.currentObj = conf.currentObj
        }
        if(conf.total){
          this.total = conf.total
        }
        if(conf.curTransferVal){
          this.curTransferVal = conf.curTransferVal
        }
        if(conf.perspective){
          this.perspective = conf.perspective
        }else{
          this.perspective = false
        }
        if(conf.superposition){
          this.superposition = conf.superposition
        }else{
          this.superposition = false
        }
      }
      this.schemeVisible = false
      this.doCount()
    },
    showSchemeData(){
      let url = '/data/query';
      let funcurl = window.location.pathname || ''
      let queryCdions = {
        join: 'and',
        items: [
            {
                sign: "eq",
                name: "FFUNCURL",
                dataType: "string",
                value: funcurl,
                enable: true,
            },
        ],
      }
      var data = {
        modelFilePath: "/platf/scheme/entity/SysSchemeBizEntity.xml",
        pageSize:-1,
        __body:JSON.stringify({queryCdions: queryCdions}),
        __bottomSummary: false,
        // __funcpath: "/eap5csxm/KongJianCeShi/TongJiFenXi/TongJiFenXiCeShi/func/TongJiFenXiRenYuan.func",
        __zcQuery: true
      }
      this.$HI.request.post(url, data).then((res) =>{
        this.schemeData = res.dataPack && res.dataPack.rows
      }).catch(e=>{
        console.error(e)
      })
    },
    // 保存方案
    saveScheme(){
      let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
      let content = {
        deepList: this.deepArr,
        curGroupField: this.curGroupField,
        queryModel: ds.getQueryModel(),
        havingForm: this.havingForm,
        groupForm: this.groupForm,
        sortIndex: this.sortIndex,
        sortType: this.sortType,
        data: this.data,
        currentObj:this.currentObj,
        perspective: this.perspective,
        superposition: this.superposition,
        total:this.total,
        curTransferVal:this.curTransferVal
      }
      let data = {
        pushType: "add",
        dataset: "dsScheme",
        pushAddType: "map",
        data:[{
          FFUNCURL: window.location.pathname || window.location.href,
          FCONTENT: JSON.stringify(content),
        }]
      }
      this.openByPath('/platf/scheme/func/add.func', {__push: data,__funcpath:'/platf/scheme/func/add.func'},{title: '方案保存'})
    },
    handleSchemeDelete(index, data){
      let url = '/data/save'
      let removeData = {
        ...data,
        $state:"rsDelete",
        $old:data
      }
      let body = [{
        modelFilePath:"/platf/scheme/entity/SysSchemeBizEntity.xml",
        data:[removeData]
      }]
      let rData = {
        __body: JSON.stringify(body)
      }
      this.$HI.request.post(url, rData).then((res) =>{
        this.$message.success('方案删除成功')
        this.schemeData.splice(index, 1)
      }).catch(e=>{
        this.$message.error(e)
      })
    },
    // 保存方案下推
    openByPath(path, query, { title, target } = {}) {
        query = query || {};
        let queryT = {}
        Object.assign(queryT, query || {});
        if (title)
            queryT.__title = title;
        if (target) {
            target = target === '_blank' ? (new Date()).valueOf() : target
            queryT.__target = target;
        }
        if(this.$router){
            this.$router.push({
                path,
                query: queryT
            })
        }else{
          if(top.window.SysPage && top.window.SysPage.newPage){
            top.window.SysPage.newPage(title, path, queryT, "post")
          }else{
            this.createForm(path, "_self", queryT.__push.data[0])
          }
        }
    },
    createForm(url, opentype, paramters) {
      //创建form表单
      let me = this;
      let id = "samuuid"
      var formid = `${id}_form`;
      var temp_form = null;
      if (document.getElementById(formid)) {
        temp_form = document.getElementById(formid);
        temp_form.method = me.postType;
        temp_form.action = url;
        // for (var item in paramters) {
        //   var inputObj = document.getElementById(`${id}_${item}`);
        //   if (inputObj) {
        //     inputObj.value = paramters[item];
        //   }
        // }
      } else {
        temp_form = document.createElement("form");
        temp_form.id = `${id}_form`;
        temp_form.action = url;
        //如需打开新窗口，form的target属性要设置为'_blank'
        temp_form.target = opentype; //打开方式
        temp_form.method = me.postType;
        temp_form.style.display = "none";

Ignore Space Show notes View project/hivuiSam/index.js
import App from './App.vue' // import ElementUI from 'element-ui'; // import "hi-ui/lib/hi-ui.css"; // import 'font-awesome/css/font-awesome.css' Vue.use(ELEMENT, { size: 'mini' }) import Message from './components/vue-m-message' Vue.use(Message) // will mount `Vue.prototype.$message` import './assets/icon/iconfont.css'; import ZhcBirtCmps from 'zhc-birt-cmps' Vue.use(ZhcBirtCmps) import Cookies from 'js-cookie' import { setToken, } from "./utils/auth.js"; // Vue.use(ElementUI) console.log('token', Cookies.get('EAP-Token')) setToken(Cookies.get('EAP-Token') \|\| '') import axios from "./funclib/AxiosUtil"; import hiSetting from './hiSetting' import * as echarts from "echarts" Vue.prototype.$echarts = echarts; // Vue.prototype.$HI = { // projectName: hiSetting.projectName, // serverUrl: hiSetting.serverUrl, // serverName: hiSetting.serverName, // request: axios, // queryOperate: 'like', // pageSize: 20, // saveUrl: hiSetting.saveUrl, // queryUrl: hiSetting.queryUrl, // querysUrl: hiSetting.serverUrl + "/data/querys", // policyUrl: hiSetting.policyUrl, // enumsUrl: hiSetting.serverUrl + "/platf/xtgn/enums/fgroupid/", // upload: hiSetting.upload, // download: hiSetting.download, // preview: hiSetting.preview \|\| hiSetting.review, // getFlowInfo: hiSetting.getFlowInfo, // getApprovalInfo: hiSetting.getApprovalInfo, // processFlow: hiSetting.processFlow, // queryTask: hiSetting.queryTask, // withdrawtask: hiSetting.withdrawtask, // taskDiagram: hiSetting.taskDiagram, // openOrdernumber: hiSetting.openOrdernumber, // birtModel: hiSetting.serverUrl + "/birt/model1", // getProcessInfo: hiSetting.serverUrl + '/flow/getProcessInfo', // exportUrl: hiSetting.serverUrl + "/export/dataexcel" // }; Vue.prototype.$HI = { projectName: window.HIVUI_SETTING.projectName, serverUrl: window.HIVUI_SETTING.serverUrl, serverName: window.HIVUI_SETTING.serverName, request: axios, queryOperate: 'like', pageSize: 20, saveUrl: window.HIVUI_SETTING.saveUrl, queryUrl: window.HIVUI_SETTING.queryUrl, querysUrl: window.HIVUI_SETTING.serverUrl + "/data/querys", policyUrl: window.HIVUI_SETTING.policyUrl, enumsUrl: window.HIVUI_SETTING.serverUrl + "/platf/xtgn/enums/fgroupid/", upload: window.HIVUI_SETTING.upload, download: window.HIVUI_SETTING.download, preview: window.HIVUI_SETTING.preview \|\| window.HIVUI_SETTING.review, getFlowInfo: window.HIVUI_SETTING.getFlowInfo, getApprovalInfo: window.HIVUI_SETTING.getApprovalInfo, processFlow: window.HIVUI_SETTING.processFlow, queryTask: window.HIVUI_SETTING.queryTask, withdrawtask: window.HIVUI_SETTING.withdrawtask, taskDiagram: window.HIVUI_SETTING.taskDiagram, openOrdernumber: window.HIVUI_SETTING.openOrdernumber, birtModel: window.HIVUI_SETTING.serverUrl + "/birt/model1", getProcessInfo: window.HIVUI_SETTING.serverUrl + '/flow/getProcessInfo', exportUrl: window.HIVUI_SETTING.serverUrl + "/export/dataexcel" }; new Vue({ render: h => h(App), }).$mount('#app') import App from './App.vue' // import ElementUI from 'element-ui'; // import "hi-ui/lib/hi-ui.css"; // import 'font-awesome/css/font-awesome.css' Vue.use(ELEMENT, { size: 'mini' }) import Message from './components/vue-m-message' Vue.use(Message) // will mount `Vue.prototype.$message` import "hi-ui/lib/hi-ui.css"; import ZhcBirtCmps from 'zhc-birt-cmps' Vue.use(ZhcBirtCmps) import Cookies from 'js-cookie' import { setToken, } from "./utils/auth.js"; // Vue.use(ElementUI) console.log('token', Cookies.get('EAP-Token')) setToken(Cookies.get('EAP-Token') \|\| '') import axios from "./funclib/AxiosUtil"; import hiSetting from './hiSetting' import * as echarts from "echarts" Vue.prototype.$echarts = echarts; // Vue.prototype.$HI = { // projectName: hiSetting.projectName, // serverUrl: hiSetting.serverUrl, // serverName: hiSetting.serverName, // request: axios, // queryOperate: 'like', // pageSize: 20, // saveUrl: hiSetting.saveUrl, // queryUrl: hiSetting.queryUrl, // querysUrl: hiSetting.serverUrl + "/data/querys", // policyUrl: hiSetting.policyUrl, // enumsUrl: hiSetting.serverUrl + "/platf/xtgn/enums/fgroupid/", // upload: hiSetting.upload, // download: hiSetting.download, // preview: hiSetting.preview \|\| hiSetting.review, // getFlowInfo: hiSetting.getFlowInfo, // getApprovalInfo: hiSetting.getApprovalInfo, // processFlow: hiSetting.processFlow, // queryTask: hiSetting.queryTask, // withdrawtask: hiSetting.withdrawtask, // taskDiagram: hiSetting.taskDiagram, // openOrdernumber: hiSetting.openOrdernumber, // birtModel: hiSetting.serverUrl + "/birt/model1", // getProcessInfo: hiSetting.serverUrl + '/flow/getProcessInfo', // exportUrl: hiSetting.serverUrl + "/export/dataexcel" // }; Vue.prototype.$HI = { projectName: window.HIVUI_SETTING.projectName, serverUrl: window.HIVUI_SETTING.serverUrl, serverName: window.HIVUI_SETTING.serverName, request: axios, queryOperate: 'like', pageSize: 20, saveUrl: window.HIVUI_SETTING.saveUrl, queryUrl: window.HIVUI_SETTING.queryUrl, querysUrl: window.HIVUI_SETTING.serverUrl + "/data/querys", policyUrl: window.HIVUI_SETTING.policyUrl, enumsUrl: window.HIVUI_SETTING.serverUrl + "/platf/xtgn/enums/fgroupid/", upload: window.HIVUI_SETTING.upload, download: window.HIVUI_SETTING.download, preview: window.HIVUI_SETTING.preview \|\| window.HIVUI_SETTING.review, getFlowInfo: window.HIVUI_SETTING.getFlowInfo, getApprovalInfo: window.HIVUI_SETTING.getApprovalInfo, processFlow: window.HIVUI_SETTING.processFlow, queryTask: window.HIVUI_SETTING.queryTask, withdrawtask: window.HIVUI_SETTING.withdrawtask, taskDiagram: window.HIVUI_SETTING.taskDiagram, openOrdernumber: window.HIVUI_SETTING.openOrdernumber, birtModel: window.HIVUI_SETTING.serverUrl + "/birt/model1", getProcessInfo: window.HIVUI_SETTING.serverUrl + '/flow/getProcessInfo', exportUrl: window.HIVUI_SETTING.serverUrl + "/export/dataexcel" }; new Vue({ render: h => h(App), }).$mount('#app')

Ignore Space Show notes View

project/hivuiSam/index.js

import App from './App.vue'

// import ElementUI from 'element-ui';
// import "hi-ui/lib/hi-ui.css";
// import 'font-awesome/css/font-awesome.css'
Vue.use(ELEMENT, {
  size: 'mini'
})
import Message from './components/vue-m-message'
Vue.use(Message) // will mount `Vue.prototype.$message`

import './assets/icon/iconfont.css';
import ZhcBirtCmps from 'zhc-birt-cmps'
Vue.use(ZhcBirtCmps)
import Cookies from 'js-cookie'
import {
  setToken,
} from "./utils/auth.js";
// Vue.use(ElementUI)
console.log('token', Cookies.get('EAP-Token'))
setToken(Cookies.get('EAP-Token') || '')

import axios from "./funclib/AxiosUtil";
import hiSetting from './hiSetting'
import * as echarts from "echarts"
Vue.prototype.$echarts = echarts;

// Vue.prototype.$HI = {
//   projectName: hiSetting.projectName,
//   serverUrl: hiSetting.serverUrl,
//   serverName: hiSetting.serverName,
//   request: axios,
//   queryOperate: 'like',
//   pageSize: 20,
//   saveUrl: hiSetting.saveUrl,
//   queryUrl: hiSetting.queryUrl,
//   querysUrl: hiSetting.serverUrl + "/data/querys",
//   policyUrl: hiSetting.policyUrl,
//   enumsUrl: hiSetting.serverUrl + "/platf/xtgn/enums/fgroupid/",
//   upload: hiSetting.upload,
//   download: hiSetting.download,
//   preview: hiSetting.preview || hiSetting.review,
//   getFlowInfo: hiSetting.getFlowInfo,
//   getApprovalInfo: hiSetting.getApprovalInfo,
//   processFlow: hiSetting.processFlow,
//   queryTask: hiSetting.queryTask,
//   withdrawtask: hiSetting.withdrawtask,
//   taskDiagram: hiSetting.taskDiagram,
//   openOrdernumber: hiSetting.openOrdernumber,
//   birtModel: hiSetting.serverUrl + "/birt/model1",
//   getProcessInfo: hiSetting.serverUrl + '/flow/getProcessInfo',
//   exportUrl: hiSetting.serverUrl + "/export/dataexcel"
// };
Vue.prototype.$HI = {
  projectName: window.HIVUI_SETTING.projectName,
  serverUrl: window.HIVUI_SETTING.serverUrl,
  serverName: window.HIVUI_SETTING.serverName,
  request: axios,
  queryOperate: 'like',
  pageSize: 20,
  saveUrl: window.HIVUI_SETTING.saveUrl,
  queryUrl: window.HIVUI_SETTING.queryUrl,
  querysUrl: window.HIVUI_SETTING.serverUrl + "/data/querys",
  policyUrl: window.HIVUI_SETTING.policyUrl,
  enumsUrl: window.HIVUI_SETTING.serverUrl + "/platf/xtgn/enums/fgroupid/",
  upload: window.HIVUI_SETTING.upload,
  download: window.HIVUI_SETTING.download,
  preview: window.HIVUI_SETTING.preview || window.HIVUI_SETTING.review,
  getFlowInfo: window.HIVUI_SETTING.getFlowInfo,
  getApprovalInfo: window.HIVUI_SETTING.getApprovalInfo,
  processFlow: window.HIVUI_SETTING.processFlow,
  queryTask: window.HIVUI_SETTING.queryTask,
  withdrawtask: window.HIVUI_SETTING.withdrawtask,
  taskDiagram: window.HIVUI_SETTING.taskDiagram,
  openOrdernumber: window.HIVUI_SETTING.openOrdernumber,
  birtModel: window.HIVUI_SETTING.serverUrl + "/birt/model1",
  getProcessInfo: window.HIVUI_SETTING.serverUrl + '/flow/getProcessInfo',
  exportUrl: window.HIVUI_SETTING.serverUrl + "/export/dataexcel"
};

new Vue({
  render: h => h(App),
}).$mount('#app')

import App from './App.vue'

import ZhcBirtCmps from 'zhc-birt-cmps'
Vue.use(ZhcBirtCmps)
import Cookies from 'js-cookie'
import {
  setToken,
} from "./utils/auth.js";
// Vue.use(ElementUI)
console.log('token', Cookies.get('EAP-Token'))
setToken(Cookies.get('EAP-Token') || '')

import axios from "./funclib/AxiosUtil";
import hiSetting from './hiSetting'
import * as echarts from "echarts"
Vue.prototype.$echarts = echarts;

new Vue({
  render: h => h(App),
}).$mount('#app')

Ignore Space Show notes View project/hivuiSam/styles/index.css
.custom-tree-node { flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px; width: 80%; flex: 1 140px; } .custom-tree-node > span:nth-child(1){ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .custom-tree-node .btn{ opacity: 0; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; } .custom-tree-node:hover .btn{ opacity: 1; } .custom-tree-node .btn .el-icon-edit{ color: #67c23a; } .custom-tree-node .btn .el-icon-delete{ color: #f56c6c; } .cell .el-input-group__append{ padding: 0 5px !important; text-align: center; } .cell .el-input-group__append .el-button{ padding: 0; margin: 0; } /* .el-form-item__error{ line-height: 0; } / .el-row>.zhc-birt-cell-children>.el-button { border: none; / border-right: 1px solid #ddd; / border-radius: 0; padding: 5px 15px; } / 整个滚动条 / ::-webkit-scrollbar { width: 8px; height: 10px; } / 滚动条上的滚动滑块 / ::-webkit-scrollbar-thumb { / background-color: #49b1f5; / / 关键代码 / / background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent); / background-color: rgba(0,0,0,.3); border-radius: 32px; } / 滚动条轨道 / ::-webkit-scrollbar-track { background-color: #dbeffd; border-radius: 32px; } .custom-tree-node .el-icon-folder-opened,.el-icon-folder{ color: #ffc107; } .custom-tree-node .el-icon-document{ color: #009688; } .custom-tree-node .icon-root{ color: blue; } .custom-tree-node .icon-ptm{ color: royalblue; } .custom-tree-node .el-icon-user{ color: coral;; } .custom-tree-node .icon-org, .icon-func{ color: aqua; } .custom-tree-node .icon-dpt, .icon-flow{ color: deepskyblue; } .custom-tree-node .el-button.is-disabled i{ color: #C0C4CC !important; cursor: not-allowed; } .el-table__header-wrapper th.isrequired ::before{ content: ''; color: red; margin-right: 5px; } .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content { background-color: #f0f7ff; color: #2355f1; } /* 取消查找定义input红色边框 / .el-form-item.is-error .queryPanel .el-input__inner, .el-form-item.is-error .el-pagination__sizes .el-input__inner, .el-form-item.is-error .el-pagination__jump .el-input__inner{ border-color: #DCDFE6; } / 弹框样式 / .el-dialog__body .el-main{ padding: 0; overflow: hidden; } / .el-dialog .queryPanel .zhc-birt-data-list thead { display: none; } / / tabs / .el-tabs--left .el-tabs__item, .el-tabs--right .el-tabs__item{ width: 60px; line-height: 24px; height: auto; word-wrap: break-word; white-space: pre-line; padding-bottom: 20px; } .el-tabs--right .el-tabs__item{ width: 40px; } .el-tabs--left, .el-tabs--right{ height: auto !important; } .el-tabs--right .queryPanel + div .el-button { margin-right: 10px; } .chart .zhc-birt-cell-children .el-main{ padding: 0; } .el-tabs .el-main{ padding: 0 } .toolBar{ padding: 5px 5% !important; border-bottom: 1px solid #c2bcc0; } .extra .toolBar{ border: none; padding: 0!important; } .dataList_title{ margin-top:5px; } .dataList_title td{ margin-top:5px; position: relative; } .dataList_title td:nth-child(1):before{ content: ' '; display: block; width: 5px; height: 30px; position: absolute; border-radius: 5px; background: #3f96ed; } .toolBar button .icon-XLSX{ font-size: 22px; } .avatar-uploader{ background: #f5f3f6; } .avatar-uploader .el-upload { background-color: #fff; } .zhc-birt-data-list .el-form-item__content > span, .zhc-birt-data-list .el-form-item__content > .lookup > span, .zhc-birt-data-list .el-form-item__content > .el-radio-group, .zhc-birt-data-list .el-form-item__content > .el-checkbox{ padding-left: 12px; } .el-table td{ padding: 7px 0; } .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{ background: #f5f7fa !important; } /编辑网格输入框样式 / .el-table.table_edit > .el-table__body-wrapper > .el-table__body > tbody > .el-table__row > td, .el-table.table_edit .el-table__fixed-right > .el-table__fixed-body-wrapper > .el-table__body > tbody >.el-table__row > td, .el-table.table_edit .el-table__fixed-right > .el-table__fixed-body-wrapper > .el-table__body > tbody >.el-table__row > td{ padding-top: 0; padding-bottom: 0; } .table_edit > .el-table__body-wrapper > .el-table__body > tbody >.el-table__row > td .cell, .table_edit > .el-table__fixed-body-wrapper > .el-table__body > tbody >.el-table__row > td .cell{ padding: 0 10px; } .table_edit > .el-table__body-wrapper > .el-table__body > tbody >.el-table__row > td .cell >.el-form-item, .table_edit > .el-table__fixed-body-wrapper > .el-table__body > tbody >.el-table__row > td .cell>.el-form-item{ margin: 0 -10px; } .el-table--small .el-form-item .el-form-item__content{ line-height: 32px; } .elx-table--empty-placeholder, .elx-table--body-wrapper.fixed-right--wrapper{ top: 48px !important; } .lookup .el-input.is-focus .el-input__inner.el-input__inner { border-color: #409EFF; } .el-range-editor.el-input__inner{ min-width: 230px; } /下拉框获取焦点边框消失/ .el-select .el-input.is-focus .el-input__inner { border-color: #409EFF !important; } .el-dropdown-menu__item>.el-button--text:hover{ color: red !important; } .iconfont.iconfont{ font-size: 12px; } .el-table__header-wrapper .cell .el-input--suffix{ margin: 0 -10px; width: calc( 100% + 20px ); } .el-table__body tr.current-row>td{ background-color: var(--curRowBg) !important; color: var(--curRowColor) !important; } .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover { background-color: #ecf5ff; color: #66b1ff; } .custom-tree-node { flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px; width: 80%; flex: 1 140px; } .custom-tree-node > span:nth-child(1){ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .custom-tree-node .btn{ opacity: 0; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; } .custom-tree-node:hover .btn{ opacity: 1; } .custom-tree-node .btn .el-icon-edit{ color: #67c23a; } .custom-tree-node .btn .el-icon-delete{ color: #f56c6c; } .cell .el-input-group__append{ padding: 0 5px !important; text-align: center; } .cell .el-input-group__append .el-button{ padding: 0; margin: 0; } / .el-form-item__error{ line-height: 0; } / .el-row>.zhc-birt-cell-children>.el-button { border: none; / border-right: 1px solid #ddd; / border-radius: 0; padding: 5px 15px; } / 整个滚动条 / ::-webkit-scrollbar { width: 8px; height: 10px; } / 滚动条上的滚动滑块 / ::-webkit-scrollbar-thumb { / background-color: #49b1f5; / / 关键代码 / / background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent); / background-color: rgba(0,0,0,.3); border-radius: 32px; } / 滚动条轨道 / ::-webkit-scrollbar-track { background-color: #dbeffd; border-radius: 32px; } .custom-tree-node .el-icon-folder-opened,.el-icon-folder{ color: #ffc107; } .custom-tree-node .el-icon-document{ color: #009688; } .custom-tree-node .icon-root{ color: blue; } .custom-tree-node .icon-ptm{ color: royalblue; } .custom-tree-node .el-icon-user{ color: coral;; } .custom-tree-node .icon-org, .icon-func{ color: aqua; } .custom-tree-node .icon-dpt, .icon-flow{ color: deepskyblue; } .custom-tree-node .el-button.is-disabled i{ color: #C0C4CC !important; cursor: not-allowed; } .el-table__header-wrapper th.isrequired ::before{ content: ''; color: red; margin-right: 5px; } .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content { background-color: #f0f7ff; color: #2355f1; } /* 取消查找定义input红色边框 / .el-form-item.is-error .queryPanel .el-input__inner, .el-form-item.is-error .el-pagination__sizes .el-input__inner, .el-form-item.is-error .el-pagination__jump .el-input__inner{ border-color: #DCDFE6; } / 弹框样式 / .el-dialog__body .el-main{ padding: 0; overflow: hidden; } / .el-dialog .queryPanel .zhc-birt-data-list thead { display: none; } / / tabs / .el-tabs--left .el-tabs__item, .el-tabs--right .el-tabs__item{ width: 60px; line-height: 24px; height: auto; word-wrap: break-word; white-space: pre-line; padding-bottom: 20px; } .el-tabs--right .el-tabs__item{ width: 40px; } .el-tabs--left, .el-tabs--right{ height: auto !important; } .el-tabs--right .queryPanel + div .el-button { margin-right: 10px; } .chart .zhc-birt-cell-children .el-main{ padding: 0; } .el-tabs .el-main{ padding: 0 } .toolBar{ padding: 5px 5% !important; border-bottom: 1px solid #c2bcc0; } .extra .toolBar{ border: none; padding: 0!important; } .dataList_title{ margin-top:5px; } .dataList_title td{ margin-top:5px; position: relative; } .dataList_title td:nth-child(1):before{ content: ' '; display: block; width: 5px; height: 30px; position: absolute; border-radius: 5px; background: #3f96ed; } .toolBar button .icon-XLSX{ font-size: 22px; } .avatar-uploader{ background: #f5f3f6; } .avatar-uploader .el-upload { background-color: #fff; } .zhc-birt-data-list .el-form-item__content > span, .zhc-birt-data-list .el-form-item__content > .lookup > span, .zhc-birt-data-list .el-form-item__content > .el-radio-group, .zhc-birt-data-list .el-form-item__content > .el-checkbox{ padding-left: 12px; } .el-table td{ padding: 7px 0; } .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{ background: #f5f7fa !important; } /编辑网格输入框样式 / .el-table.table_edit > .el-table__body-wrapper > .el-table__body > tbody > .el-table__row > td, .el-table.table_edit .el-table__fixed-right > .el-table__fixed-body-wrapper > .el-table__body > tbody >.el-table__row > td, .el-table.table_edit .el-table__fixed-right > .el-table__fixed-body-wrapper > .el-table__body > tbody >.el-table__row > td{ padding-top: 0; padding-bottom: 0; } .table_edit > .el-table__body-wrapper > .el-table__body > tbody >.el-table__row > td .cell, .table_edit > .el-table__fixed-body-wrapper > .el-table__body > tbody >.el-table__row > td .cell{ padding: 0 10px; } .table_edit > .el-table__body-wrapper > .el-table__body > tbody >.el-table__row > td .cell >.el-form-item, .table_edit > .el-table__fixed-body-wrapper > .el-table__body > tbody >.el-table__row > td .cell>.el-form-item{ margin: 0 -10px; } .el-table--small .el-form-item .el-form-item__content{ line-height: 32px; } .elx-table--empty-placeholder, .elx-table--body-wrapper.fixed-right--wrapper{ top: 48px !important; } .lookup .el-input.is-focus .el-input__inner.el-input__inner { border-color: #409EFF; } .el-range-editor.el-input__inner{ min-width: 230px; } /下拉框获取焦点边框消失*/ .el-select .el-input.is-focus .el-input__inner { border-color: #409EFF !important; } .el-dropdown-menu__item>.el-button--text:hover{ color: red !important; } .iconfont.iconfont{ font-size: 12px; } .el-table__header-wrapper .cell .el-input--suffix{ margin: 0 -10px; width: calc( 100% + 20px ); } .el-table__body tr.current-row>td{ background-color: var(--curRowBg) !important; color: var(--curRowColor) !important; }

Ignore Space Show notes View

project/hivuiSam/styles/index.css

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  width: 80%;
  flex: 1 140px;
}
.custom-tree-node > span:nth-child(1){
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.custom-tree-node .btn{
  opacity: 0;
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
}
.custom-tree-node:hover .btn{
    opacity: 1;
}
.custom-tree-node .btn .el-icon-edit{
  color: #67c23a;
}
.custom-tree-node .btn .el-icon-delete{
  color: #f56c6c;
}
.cell .el-input-group__append{
  padding: 0 5px !important;
  text-align: center;
}
.cell .el-input-group__append .el-button{
  padding: 0;
  margin: 0;
}
/* .el-form-item__error{
  line-height: 0;
} */
.el-row>.zhc-birt-cell-children>.el-button {
  border: none;
  /* border-right: 1px solid #ddd; */
  border-radius: 0;
  padding: 5px 15px;
}
/* 整个滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 10px;
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
  /* background-color: #49b1f5; */
  /* 关键代码 */
  /* background-image: -webkit-linear-gradient(45deg,
          rgba(255, 255, 255, 0.4) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.4) 50%,
          rgba(255, 255, 255, 0.4) 75%,
          transparent 75%,
          transparent); */
  background-color: rgba(0,0,0,.3);
  border-radius: 32px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: #dbeffd;
  border-radius: 32px;
}

.custom-tree-node .el-icon-folder-opened,.el-icon-folder{
    color: #ffc107;
}
.custom-tree-node .el-icon-document{
    color: #009688;
}
.custom-tree-node .icon-root{
    color: blue;
}
.custom-tree-node .icon-ptm{
    color: royalblue;
}
.custom-tree-node .el-icon-user{
    color: coral;;
}
.custom-tree-node .icon-org, .icon-func{
    color: aqua;
}
.custom-tree-node .icon-dpt, .icon-flow{
    color: deepskyblue;
}
.custom-tree-node .el-button.is-disabled i{
  color: #C0C4CC !important;
  cursor: not-allowed;
}
.el-table__header-wrapper th.isrequired ::before{
  content: '*';
  color: red;
  margin-right: 5px;
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  background-color: #f0f7ff;
  color: #2355f1;
}
/*
取消查找定义input红色边框
*/
.el-form-item.is-error .queryPanel .el-input__inner,
.el-form-item.is-error .el-pagination__sizes .el-input__inner,
.el-form-item.is-error .el-pagination__jump .el-input__inner{
  border-color: #DCDFE6;
}

/*
弹框样式
*/
.el-dialog__body .el-main{
  padding: 0;
  overflow: hidden;
}
/* .el-dialog .queryPanel .zhc-birt-data-list thead {
  display: none;
} */

/*
tabs
*/
.el-tabs--left .el-tabs__item, .el-tabs--right .el-tabs__item{
  width: 60px;
  line-height: 24px;
  height: auto;
  word-wrap: break-word;
  white-space: pre-line;
  padding-bottom: 20px;
}
.el-tabs--right .el-tabs__item{
  width: 40px;
}
.el-tabs--left, .el-tabs--right{
  height: auto !important;
}
.el-tabs--right .queryPanel + div .el-button {
  margin-right: 10px;
}

.chart .zhc-birt-cell-children .el-main{
  padding: 0;
}
.el-tabs .el-main{
  padding: 0
}
.toolBar{
  padding: 5px 5% !important;
  border-bottom: 1px solid #c2bcc0;
}
.extra .toolBar{
  border: none;
  padding: 0!important;
}

.dataList_title{
  margin-top:5px;
}
.dataList_title td{
  margin-top:5px;
  position: relative;
}
.dataList_title td:nth-child(1):before{
  content: ' ';
  display: block;
  width: 5px;
  height: 30px;
  position: absolute;
  border-radius: 5px;
  background: #3f96ed;
}
.toolBar button .icon-XLSX{
  font-size: 22px;
}
.avatar-uploader{
  background: #f5f3f6;
}
.avatar-uploader .el-upload {
  background-color: #fff;
}
.zhc-birt-data-list .el-form-item__content > span,
.zhc-birt-data-list .el-form-item__content > .lookup > span,
.zhc-birt-data-list .el-form-item__content > .el-radio-group,
.zhc-birt-data-list .el-form-item__content > .el-checkbox{
  padding-left: 12px;
}
.el-table td{
  padding: 7px 0;
}
.el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th{
  background: #f5f7fa !important;
}
/*编辑网格输入框样式
*/
.el-table.table_edit > .el-table__body-wrapper > .el-table__body > tbody > .el-table__row > td,
.el-table.table_edit .el-table__fixed-right > .el-table__fixed-body-wrapper > .el-table__body > tbody >.el-table__row > td,
.el-table.table_edit .el-table__fixed-right > .el-table__fixed-body-wrapper > .el-table__body > tbody >.el-table__row > td{
  padding-top: 0;
  padding-bottom: 0;
}
.table_edit > .el-table__body-wrapper > .el-table__body > tbody >.el-table__row > td .cell,
.table_edit > .el-table__fixed-body-wrapper > .el-table__body > tbody >.el-table__row > td .cell{
  padding: 0 10px;
}
.table_edit > .el-table__body-wrapper > .el-table__body > tbody >.el-table__row > td .cell >.el-form-item,
.table_edit > .el-table__fixed-body-wrapper > .el-table__body > tbody >.el-table__row > td .cell>.el-form-item{
  margin: 0 -10px;
}
.el-table--small .el-form-item .el-form-item__content{
  line-height: 32px;
}
.elx-table--empty-placeholder,
.elx-table--body-wrapper.fixed-right--wrapper{
  top: 48px !important;
}
.lookup .el-input.is-focus .el-input__inner.el-input__inner {
  border-color: #409EFF;
}

.el-range-editor.el-input__inner{
  min-width: 230px;
}

/*下拉框获取焦点边框消失*/
.el-select .el-input.is-focus .el-input__inner {
  border-color: #409EFF !important;
}

.el-dropdown-menu__item>.el-button--text:hover{
  color: red !important;
}

.iconfont.iconfont{
  font-size: 12px;
}

.el-table__header-wrapper .cell .el-input--suffix{
  margin: 0 -10px;
  width: calc( 100% + 20px );
}
.el-table__body tr.current-row>td{
  background-color: var(--curRowBg) !important;
  color: var(--curRowColor) !important;
}

.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #ecf5ff;
  color: #66b1ff;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: #dbeffd;
  border-radius: 32px;
}

/*
弹框样式
*/
.el-dialog__body .el-main{
  padding: 0;
  overflow: hidden;
}
/* .el-dialog .queryPanel .zhc-birt-data-list thead {
  display: none;
} */

.el-range-editor.el-input__inner{
  min-width: 230px;
}

/*下拉框获取焦点边框消失*/
.el-select .el-input.is-focus .el-input__inner {
  border-color: #409EFF !important;
}

.el-dropdown-menu__item>.el-button--text:hover{
  color: red !important;
}

.iconfont.iconfont{
  font-size: 12px;
}

Show line notes below