diff --git a/report-ui/config/dev.env.js b/report-ui/config/dev.env.js index ee3d90dc..f50fc84e 100644 --- a/report-ui/config/dev.env.js +++ b/report-ui/config/dev.env.js @@ -4,6 +4,6 @@ const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', - BASE_API: '"http://127.0.0.1:9095"' - // BASE_API: '"http://10.108.26.197:9095"' + // BASE_API: '"http://127.0.0.1:9095"' + BASE_API: '"http://10.108.26.197:9095"' }) diff --git a/report-ui/src/assets/iconfont/demo_index.html b/report-ui/src/assets/iconfont/demo_index.html index 62576652..16625d00 100644 --- a/report-ui/src/assets/iconfont/demo_index.html +++ b/report-ui/src/assets/iconfont/demo_index.html @@ -1,13 +1,10 @@ - - + iconfont Demo - - + + @@ -37,2381 +34,2424 @@ } -

- - -

+ + +
- - 查看项目 - + + 查看项目 +
-
    - -
  • - -
    展 开
    -
    
    -
    • +
      + +
    • + +
      仪表盘-抄表
      +
      
      +
      • + +
    • + +
      南丁格尔玫瑰图
      +
      
      +
      • + +
    • + +
      展 开
      +
      
      +
      • + +
    • + +
      excel
      +
      
      +
      • + +
    • + +
      保存
      +
      
      +
      • + +
    • + +
      关 闭
      +
      
      +
      • + +
    • + +
      pdf
      +
      
      +
      • + +
    • + +
      复制
      +
      
      +
      • + +
    • + +
      020空心饼图
      +
      
      +
      • + +
    • + +
      时间
      +
      
      +
      • + +
    • + +
      保存
      +
      
      +
      • + +
    • + +
      图片
      +
      
      +
      • + +
    • + +
      柱状图
      +
      
      +
      • + +
    • + +
      超链接
      +
      
      +
      • + +
    • + +
      文本
      +
      
      +
      • + +
    • + +
      视频
      +
      
      +
      • + +
    • + +
      框架
      +
      
      +
      • + +
    • + +
      预览
      +
      
      +
      • + +
    • + +
      横向文字
      +
      
      +
      • + +
    • + +
      图表 _饼图
      +
      
      +
      • + +
    • + +
      漏斗图
      +
      
      +
      • + +
    • + +
      图表 折线图
      +
      
      +
      • + +
    • + +
      柱线图
      +
      
      +
      • + +
    • + +
      图片
      +
      
      +
      • + +
    • + +
      仪表盘
      +
      
      +
      • + +
    • + +
      返回
      +
      
      +
      • + +
    • + +
      下载
      +
      
      +
      • + +
    • + +
      下载
      +
      
      +
      • + +
    • + +
      邮箱
      +
      
      +
      • + +
    • + +
      绑定手机
      +
      
      +
      • + +
    • + +
      手机
      +
      
      +
      • + +
    • + +
      52-手机
      +
      
      +
      • + +
    • + +
      home
      +
      
      +
      • + +
    • + +
      home
      +
      
      +
      • + +
    • + +
      Kafka
      +
      
      +
      • + +
    • + +
      数据接入—Kafka集群
      +
      
      +
      • + +
    • + +
      kafka
      +
      
      +
      • + +
    • + +
      elasticsearch-Elasticsearch
      +
      
      +
      • + +
    • + +
      apachekafka
      +
      
      +
      • + +
    • + +
      elasticsearch
      +
      
      +
      • + +
    • + +
      问题反馈
      +
      
      +
      • + +
    • + +
      问题反馈
      +
      
      +
      • + +
    • + +
      问题反馈
      +
      
      +
      • + +
    • + +
      alikafka 消息队列Kafka
      +
      
      +
      • + +
    • + +
      项目查询-查看设备
      +
      
      +
      • + +
    • + +
      elasticsearch Elasticsearch
      +
      
      +
      • + +
    • + +
      511统计_树图
      +
      
      +
      • + +
    • + +
      分享
      +
      
      +
      • + +
    • + +
      分享
      +
      
      +
      • + +
    • + +
      分享
      +
      
      +
      • + +
    • + +
      告警-紧急
      +
      
      +
      • + +
    • + +
      完成安全事件
      +
      
      +
      • + +
    • + +
      eventbridge 消息事件总线
      +
      
      +
      • + +
    • + +
      树
      +
      
      +
      • + +
    • + +
      设备关机
      +
      
      +
      • + +
    • + +
      好房拓 4.0.0 iconfont_短信
      +
      
      +
      • + +
    • + +
      业务参数
      +
      
      +
      • + +
    • + +
      列表
      +
      
      +
      • + +
    • + +
      编辑
      +
      
      +
      • + +
    • + +
      邮件
      +
      
      +
      • + +
    • + +
      社交钉钉
      +
      
      +
      • + +
    • + +
      字典管理
      +
      
      +
      • + +
    • + +
      图表
      +
      
      +
      • + +
    • + +
      钉钉
      +
      
      +
      • + +
    • + +
      短信
      +
      
      +
      • + +
    • + +
      directmail 邮件推送
      +
      
      +
      • + +
    • + +
      设备设施
      +
      
      +
      • + +
    • + +
      通知
      +
      
      +
      • + +
    • + +
      日志
      +
      
      +
      • + +
    • + +
      触发器配置-灰
      +
      
      +
      • + +
    • + +
      vcs 视觉计算服务
      +
      
      +
      • + +
    • + +
      设备
      +
      
      +
      • + +
    • + +
      user-before
      +
      
      +
      • + +
    • + +
      科目维护图标
      +
      
      +
      • + +
    • + +
      会计科目维护
      +
      
      +
      • + +
    • + +
      成本查询
      +
      
      +
      • + +
    • + +
      成本数据管理
      +
      
      +
      • + +
    • + +
      基本数据
      +
      
      +
      • + +
    • + +
      B-省市区
      +
      
      +
      • + +
    • + +
      组织机构
      +
      
      +
      • + +
    • + +
      按钮
      +
      
      +
      • + +
    • + +
      菜单
      +
      
      +
      • + +
    • + +
      问号
      +
      
      +
      • + +
    • + +
      垃圾桶
      +
      
      +
      • + +
    • + +
      重置密码
      +
      
      +
      • + +
    • + +
      设置
      +
      
      +
      • + +
    • + +
      中转
      +
      
      +
      • + +
    • + +
      add
      +
      
      +
      • + +
    • + +
      minus
      +
      
      +
      • + +
    • + +
      password
      +
      
      +
      • + +
    • + +
      用户
      +
      
      +
      • + +
    • + +
      权限
      +
      
      +
      • + +
    • + +
      角色
      +
      
      +
      • + +
    • + +
      字典
      +
      
      +
      • + +
    • + +
      参数设置
      +
      
      +
      • + +
    • + +
      编辑
      +
      
      +
      • + +
    • + +
      用户权限
      +
      
      +
      • + +
    • + +
      分享
      +
      
      +
      • + +
    • + +
      授权
      +
      
      +
      • + +
    • + +
      左箭头
      +
      
      +
      • + +
    • + +
      左箭头
      +
      
      +
      • + +
    +
    +

    Unicode 引用

    +
    +

    Unicode 是字体在网页端最原始的应用方式，特点是：

    +
      +
    • 支持按字体的方式去动态调整图标大小，颜色等等。
      • +
    • 默认情况下不支持多色，直接添加多色图标会自动去色。
      • +
    +
    +

    注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

    +
    +

    Unicode 使用步骤如下：

    +

    第一步：拷贝项目下面生成的 @font-face

    +
    @font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1624933667537') format('woff2'),
+       url('iconfont.woff?t=1624933667537') format('woff'),
+       url('iconfont.ttf?t=1624933667537') format('truetype');
+}
+
    +

    第二步：定义使用 iconfont 的样式

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

    第三步：挑选相应图标并获取字体编码，应用于页面

    +
    +<span class="iconfont">&#x33;</span>
+
    +
    +

    "iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

    +
    +
    +
+
+
    +
  • - -
    excel
    -
    &#xe650;
    + +
    + 仪表盘-抄表 +
    +
    .iconyibiaopan-chaobiao +
    • - +
  • - -
    保存
    -
    &#xe737;
    + +
    + 南丁格尔玫瑰图 +
    +
    .iconnandinggeermeiguitu +
    • - +
  • - -
    关 闭
    -
    &#xe6c5;
    + +
    + 展 开 +
    +
    .iconzhankai +
    • - +
  • - -
    pdf
    -
    &#xe614;
    + +
    + excel +
    +
    .iconexcel +
    • - +
  • - -
    复制
    -
    &#xe61e;
    + +
    + 保存 +
    +
    .iconbaocun +
    • - +
  • - -
    020空心饼图
    -
    &#xe78c;
    + +
    + 关 闭 +
    +
    .iconguanbi +
    • - +
  • - -
    时间
    -
    &#xe662;
    + +
    + pdf +
    +
    .iconpdf +
    • - +
  • - -
    保存
    -
    &#xe6f6;
    + +
    + 复制 +
    +
    .iconfuzhi +
    • - +
  • - -
    图片
    -
    &#xe612;
    + +
    + 020空心饼图 +
    +
    .icon020kongxinbingtu +
    • - +
  • - -
    柱状图
    -
    &#xe691;
    + +
    + 时间 +
    +
    .iconshijian +
    • - +
  • - -
    超链接
    -
    &#xe65f;
    + +
    + 保存 +
    +
    .iconsave +
    • - +
  • - -
    文本
    -
    &#xe605;
    + +
    + 图片 +
    +
    .icontupian +
    • - +
  • - -
    视频
    -
    &#xecc1;
    + +
    + 柱状图 +
    +
    .iconzhuzhuangtu +
    • - +
  • - -
    框架
    -
    &#xe66a;
    + +
    + 超链接 +
    +
    .iconchaolianjie +
    • - +
  • - -
    预览
    -
    &#xe728;
    + +
    + 文本 +
    +
    .iconziyuan +
    • - +
  • - -
    横向文字
    -
    &#xe601;
    + +
    + 视频 +
    +
    .iconshipin +
    • - +
  • - -
    图表 _饼图
    -
    &#xe602;
    + +
    + 框架 +
    +
    .iconkuangjia +
    • - +
  • - -
    漏斗图
    -
    &#xe6d5;
    + +
    + 预览 +
    +
    .iconyulan +
    • - +
  • - -
    图表 折线图
    -
    &#xe630;
    + +
    + 横向文字 +
    +
    .iconhengxiangwenzi +
    • - +
  • - -
    柱线图
    -
    &#xe607;
    + +
    + 图表 _饼图 +
    +
    .iconicon_tubiao_bingtu +
    • - +
  • - -
    图片
    -
    &#xe81d;
    + +
    + 漏斗图 +
    +
    .iconloudoutu +
    • - +
  • - -
    仪表盘
    -
    &#xe706;
    + +
    + 图表 折线图 +
    +
    .icontubiaozhexiantu +
    • - +
  • - -
    返回
    -
    &#xe63b;
    + +
    + 柱线图 +
    +
    .iconzhuxiantu +
    • - +
  • - -
    下载
    -
    &#xe639;
    + +
    + 图片 +
    +
    .icontupian1 +
    • - +
  • - -
    下载
    -
    &#xe784;
    + +
    + 仪表盘 +
    +
    .iconyibiaopan +
    • - +
  • - -
    邮箱
    -
    &#xe769;
    + +
    + 返回 +
    +
    .icon1 +
    • - +
  • - -
    绑定手机
    -
    &#xe64d;
    + +
    + 下载 +
    +
    .iconxiazai +
    • - +
  • - -
    手机
    -
    &#xe854;
    + +
    + 下载 +
    +
    .icon11-04 +
    • - +
  • - -
    52-手机
    -
    &#xe871;
    + +
    + 邮箱 +
    +
    .iconyouxiang +
    • - +
  • - -
    home
    -
    &#xe610;
    + +
    + 绑定手机 +
    +
    .iconbangdingshouji +
    • - +
  • - -
    home
    -
    &#xe61a;
    + +
    + 手机 +
    +
    .iconshouji +
    • - +
  • - -
    Kafka
    -
    &#xe65a;
    -
    • - -
  • - -
    数据接入—Kafka集群
    -
    &#xe64f;
    -
    • - -
  • - -
    kafka
    -
    &#xe6f2;
    -
    • - -
  • - -
    elasticsearch-Elasticsearch
    -
    &#xe853;
    -
    • - -
  • - -
    apachekafka
    -
    &#xeb3f;
    -
    • - -
  • - -
    elasticsearch
    -
    &#xeb85;
    -
    • - -
  • - -
    问题反馈
    -
    &#xe8d1;
    -
    • - -
  • - -
    问题反馈
    -
    &#xe70e;
    -
    • - -
  • - -
    问题反馈
    -
    &#xe643;
    -
    • - -
  • - -
    alikafka 消息队列Kafka
    -
    &#xe8a4;
    -
    • - -
  • - -
    项目查询-查看设备
    -
    &#xe682;
    -
    • - -
  • - -
    elasticsearch Elasticsearch
    -
    &#xe6a1;
    -
    • - -
  • - -
    511统计_树图
    -
    &#xe64a;
    -
    • - -
  • - -
    分享
    -
    &#xe615;
    -
    • - -
  • - -
    分享
    -
    &#xe60f;
    -
    • - -
  • - -
    分享
    -
    &#xe600;
    -
    • - -
  • - -
    告警-紧急
    -
    &#xe628;
    -
    • - -
  • - -
    完成安全事件
    -
    &#xe68a;
    -
    • - -
  • - -
    eventbridge 消息事件总线
    -
    &#xe74d;
    -
    • - -
  • - -
    树
    -
    &#xe629;
    -
    • - -
  • - -
    设备关机
    -
    &#xe61d;
    -
    • - -
  • - -
    好房拓 4.0.0 iconfont_短信
    -
    &#xe6d8;
    -
    • - -
  • - -
    业务参数
    -
    &#xe661;
    -
    • - -
  • - -
    列表
    -
    &#xe660;
    -
    • - -
  • - -
    编辑
    -
    &#xe60c;
    -
    • - -
  • - -
    邮件
    -
    &#xe63a;
    -
    • - -
  • - -
    社交钉钉
    -
    &#xe678;
    -
    • - -
  • - -
    字典管理
    -
    &#xe624;
    -
    • - -
  • - -
    图表
    -
    &#xe73f;
    -
    • - -
  • - -
    钉钉
    -
    &#xe690;
    -
    • - -
  • - -
    短信
    -
    &#xe603;
    -
    • - -
  • - -
    directmail 邮件推送
    -
    &#xe714;
    -
    • - -
  • - -
    设备设施
    -
    &#xe61c;
    -
    • - -
  • - -
    通知
    -
    &#xe606;
    -
    • - -
  • - -
    日志
    -
    &#xe663;
    -
    • - -
  • - -
    触发器配置-灰
    -
    &#xe689;
    -
    • - -
  • - -
    vcs 视觉计算服务
    -
    &#xe759;
    -
    • - -
  • - -
    设备
    -
    &#xe60a;
    -
    • - -
  • - -
    user-before
    -
    &#xe617;
    -
    • - -
  • - -
    科目维护图标
    -
    &#xe60b;
    -
    • - -
  • - -
    会计科目维护
    -
    &#xe677;
    -
    • - -
  • - -
    成本查询
    -
    &#xe6dd;
    -
    • - -
  • - -
    成本数据管理
    -
    &#xe6c7;
    -
    • - -
  • - -
    基本数据
    -
    &#xe71d;
    -
    • - -
  • - -
    B-省市区
    -
    &#xe72d;
    -
    • - -
  • - -
    组织机构
    -
    &#xe66e;
    -
    • - -
  • - -
    按钮
    -
    &#xe8c5;
    -
    • - -
  • - -
    菜单
    -
    &#xe61b;
    -
    • - -
  • - -
    问号
    -
    &#xe67f;
    -
    • - -
  • - -
    垃圾桶
    -
    &#xe636;
    -
    • - -
  • - -
    重置密码
    -
    &#xe620;
    -
    • - -
  • - -
    设置
    -
    &#xe68f;
    -
    • - -
  • - -
    中转
    -
    &#xe69b;
    -
    • - -
  • - -
    add
    -
    &#xe6b9;
    -
    • - -
  • - -
    minus
    -
    &#xe6ba;
    -
    • - -
  • - -
    password
    -
    &#xe622;
    -
    • - -
  • - -
    用户
    -
    &#xe604;
    -
    • - -
  • - -
    权限
    -
    &#xe633;
    -
    • - -
  • - -
    角色
    -
    &#xe64c;
    -
    • - -
  • - -
    字典
    -
    &#xe716;
    -
    • - -
  • - -
    参数设置
    -
    &#xe672;
    -
    • - -
  • - -
    编辑
    -
    &#xe642;
    -
    • - -
  • - -
    用户权限
    -
    &#xe609;
    -
    • - -
  • - -
    分享
    -
    &#xe641;
    -
    • - -
  • - -
    授权
    -
    &#xe634;
    -
    • - -
  • - -
    左箭头
    -
    &#xe653;
    -
    • - -
  • - -
    左箭头
    -
    &#xe654;
    -
    • - -
-
-

Unicode 引用

-
- -

Unicode 是字体在网页端最原始的应用方式，特点是：

-
    -
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • -
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • -
-
-

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

-
-

Unicode 使用步骤如下：

-

第一步：拷贝项目下面生成的 @font-face

- 
@font-face {
-  font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1624613153423') format('woff2'),
-       url('iconfont.woff?t=1624613153423') format('woff'),
-       url('iconfont.ttf?t=1624613153423') format('truetype');
-}
-
-

第二步：定义使用 iconfont 的样式

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

第三步：挑选相应图标并获取字体编码，应用于页面

- 
-<span class="iconfont">&#x33;</span>
-
-
-

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

-
-
-
-
-
    - -
  • - -
    - 展 开 -
    -
    .iconzhankai -
    -
    • - -
  • - -
    - excel -
    -
    .iconexcel -
    -
    • - -
  • - -
    - 保存 -
    -
    .iconbaocun -
    -
    • - -
  • - -
    - 关 闭 -
    -
    .iconguanbi -
    -
    • - -
  • - -
    - pdf -
    -
    .iconpdf -
    -
    • - -
  • - -
    - 复制 -
    -
    .iconfuzhi -
    -
    • - -
  • - -
    - 020空心饼图 -
    -
    .icon020kongxinbingtu -
    -
    • - -
  • - -
    - 时间 -
    -
    .iconshijian -
    -
    • - -
  • - -
    - 保存 -
    -
    .iconsave -
    -
    • - -
  • - -
    - 图片 -
    -
    .icontupian -
    -
    • - -
  • - -
    - 柱状图 -
    -
    .iconzhuzhuangtu -
    -
    • - -
  • - -
    - 超链接 -
    -
    .iconchaolianjie -
    -
    • - -
  • - -
    - 文本 -
    -
    .iconziyuan -
    -
    • - -
  • - -
    - 视频 -
    -
    .iconshipin -
    -
    • - -
  • - -
    - 框架 -
    -
    .iconkuangjia -
    -
    • - -
  • - -
    - 预览 -
    -
    .iconyulan -
    -
    • - -
  • - -
    - 横向文字 -
    -
    .iconhengxiangwenzi -
    -
    • - -
  • - -
    - 图表 _饼图 -
    -
    .iconicon_tubiao_bingtu -
    -
    • - -
  • - -
    - 漏斗图 -
    -
    .iconloudoutu -
    -
    • - -
  • - -
    - 图表 折线图 -
    -
    .icontubiaozhexiantu -
    -
    • - -
  • - -
    - 柱线图 -
    -
    .iconzhuxiantu -
    -
    • - -
  • - -
    - 图片 -
    -
    .icontupian1 -
    -
    • - -
  • - -
    - 仪表盘 -
    -
    .iconyibiaopan -
    -
    • - -
  • - -
    - 返回 -
    -
    .icon1 -
    -
    • - -
  • - -
    - 下载 -
    -
    .iconxiazai -
    -
    • - -
  • - -
    - 下载 -
    -
    .icon11-04 -
    -
    • - -
  • - -
    - 邮箱 -
    -
    .iconyouxiang -
    -
    • - -
  • - -
    - 绑定手机 -
    -
    .iconbangdingshouji -
    -
    • - -
  • - -
    - 手机 -
    -
    .iconshouji -
    -
    • - -
  • - -
    - 52-手机 -
    -
    .icon52-shouji -
    -
    • - -
  • - -
    - home -
    -
    .iconhome -
    -
    • - -
  • - -
    - home -
    -
    .iconhome2 -
    -
    • - -
  • - -
    - Kafka -
    -
    .iconKafka -
    -
    • - -
  • - -
    - 数据接入—Kafka集群 -
    -
    .iconshujujieruKafkajiqun -
    -
    • - -
  • - -
    - kafka -
    -
    .iconkafka -
    -
    • - -
  • - -
    - elasticsearch-Elasticsearch -
    -
    .iconelasticsearch-Elasticsearch -
    -
    • - -
  • - -
    - apachekafka -
    -
    .iconapachekafka -
    -
    • - -
  • - -
    - elasticsearch -
    -
    .iconelasticsearch -
    -
    • - -
  • - -
    - 问题反馈 -
    -
    .iconwentifankui -
    -
    • - -
  • - -
    - 问题反馈 -
    -
    .iconwentifankui1 -
    -
    • - -
  • - -
    - 问题反馈 -
    -
    .iconwentifankui2 -
    -
    • - -
  • - -
    - alikafka 消息队列Kafka -
    -
    .iconalikafkaxiaoxiduilieKafka -
    -
    • - -
  • - -
    - 项目查询-查看设备 -
    -
    .iconxiangmuchaxun-chakanshebei -
    -
    • - -
  • - -
    - elasticsearch Elasticsearch -
    -
    .iconelasticsearchElasticsearch -
    -
    • - -
  • - -
    - 511统计_树图 -
    -
    .icon511tongji_shutu -
    -
    • - -
  • - -
    - 分享 -
    -
    .iconfenxiang1 -
    -
    • - -
  • - -
    - 分享 -
    -
    .iconfenxiang2 -
    -
    • - -
  • - -
    - 分享 -
    -
    .iconfenxiang_2 -
    -
    • - -
  • - -
    - 告警-紧急 -
    -
    .iconNMStubiao- -
    -
    • - -
  • - -
    - 完成安全事件 -
    -
    .iconwanchenganquanshijian -
    -
    • - -
  • - -
    - eventbridge 消息事件总线 -
    -
    .iconeventbridgexiaoxishijianzongxian -
    -
    • - -
  • - -
    - 树 -
    -
    .iconshu -
    -
    • - -
  • - -
    - 设备关机 -
    -
    .iconshebeiguanji -
    -
    • - -
  • - -
    - 好房拓 4.0.0 iconfont_短信 -
    -
    .iconhaofangtuo400iconfontduanxin -
    -
    • - -
  • - -
    - 业务参数 -
    -
    .iconnavicon-ywcs -
    -
    • - -
  • - -
    - 列表 -
    -
    .iconliebiao -
    -
    • - -
  • - -
    - 编辑 -
    -
    .iconbianji -
    -
    • - -
  • - -
    - 邮件 -
    -
    .iconyoujian -
    -
    • - -
  • - -
    - 社交钉钉 -
    -
    .iconshejiaodingding -
    -
    • - -
  • - -
    - 字典管理 -
    -
    .iconzidianguanli -
    -
    • - -
  • - -
    - 图表 -
    -
    .icontubiao -
    -
    • - -
  • - -
    - 钉钉 -
    -
    .icondingding -
    -
    • - -
  • - -
    - 短信 -
    -
    .iconduanxin -
    -
    • - -
  • - -
    - directmail 邮件推送 -
    -
    .icondirectmailyoujiantuisong -
    -
    • - -
  • - -
    - 设备设施 -
    -
    .iconshebeisheshi -
    -
    • - -
  • - -
    - 通知 -
    -
    .icontongzhi -
    -
    • - -
  • - -
    - 日志 -
    -
    .iconrizhi -
    -
    • - -
  • - -
    - 触发器配置-灰 -
    -
    .iconchufaqipeizhi-hui -
    -
    • - -
  • - -
    - vcs 视觉计算服务 -
    -
    .iconvcsshijuejisuanfuwu -
    -
    • - -
  • - -
    - 设备 -
    -
    .iconbar_icon_shebei -
    -
    • - -
  • - -
    - user-before -
    -
    .iconuser-before -
    -
    • - -
  • - -
    - 科目维护图标 -
    -
    .iconkemuweihutubiao -
    -
    • - -
  • - -
    - 会计科目维护 -
    -
    .iconaccounting-subjects -
    -
    • - -
  • - -
    - 成本查询 -
    -
    .iconRectangleCopy -
    -
    • - -
  • - -
    - 成本数据管理 -
    -
    .iconchengbenshujuguanli -
    -
    • - -
  • - -
    - 基本数据 -
    -
    .iconjibenshuju -
    -
    • - -
  • - -
    - B-省市区 -
    -
    .iconB-shengshiqu -
    -
    • - -
  • - -
    - 组织机构 -
    -
    .iconzuzhijigou -
    -
    • - -
  • - -
    - 按钮 -
    -
    .iconanniu -
    -
    • - -
  • - -
    - 菜单 -
    -
    .iconcaidan2 -
    -
    • - -
  • - -
    - 问号 -
    -
    .iconwenhao -
    -
    • - -
  • - -
    - 垃圾桶 -
    -
    .iconlajitong -
    -
    • - -
  • - -
    - 重置密码 -
    -
    .iconzhongzhimima -
    -
    • - -
  • - -
    - 设置 -
    -
    .iconshezhi -
    -
    • - -
  • - -
    - 中转 -
    -
    .iconzhongzhuan -
    -
    • - -
  • - -
    - add -
    -
    .iconadd -
    -
    • - -
  • - -
    - minus -
    -
    .iconminus -
    -
    • - -
  • - -
    - password -
    -
    .iconpassword -
    -
    • - -
  • - -
    - 用户 -
    -
    .iconyonghu -
    -
    • - -
  • - -
    - 权限 -
    -
    .iconquanxian -
    -
    • - -
  • - -
    - 角色 -
    -
    .iconjiaose1 -
    -
    • - -
  • - -
    - 字典 -
    -
    .iconzidian -
    -
    • - -
  • - -
    - 参数设置 -
    -
    .iconcssz -
    -
    • - -
  • - -
    - 编辑 -
    -
    .iconbianji1 -
    -
    • - -
  • - -
    - 用户权限 -
    -
    .icondfzq- -
    -
    • - -
  • - -
    - 分享 -
    -
    .iconfenxiang -
    -
    • - -
  • - -
    - 授权 -
    -
    .iconshouquan1 -
    -
    • - -
  • - -
    - 左箭头 -
    -
    .iconjiantou -
    -
    • - -
  • - -
    - 左箭头 -
    -
    .iconjiantou-copy-copy -
    -
    • - -
-
-

font-class 引用

-
- -

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

-

与 Unicode 使用方式相比，具有如下特点：

-
    -
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • -
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • -
-

使用步骤如下：

-

第一步：引入项目下面生成的 fontclass 代码：

- 
<link rel="stylesheet" href="./iconfont.css">
-
-

第二步：挑选相应图标并获取类名，应用于页面：

- 
<span class="iconfont iconxxx"></span>
-
-
-

" - iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

-
-
-
-
-
    - -
  • - -
    展 开
    -
    #iconzhankai
    -
    • - -
  • - -
    excel
    -
    #iconexcel
    -
    • - -
  • - -
    保存
    -
    #iconbaocun
    -
    • - -
  • - -
    关 闭
    -
    #iconguanbi
    -
    • - -
  • - -
    pdf
    -
    #iconpdf
    -
    • - -
  • - -
    复制
    -
    #iconfuzhi
    -
    • - -
  • - -
    020空心饼图
    -
    #icon020kongxinbingtu
    -
    • - -
  • - -
    时间
    -
    #iconshijian
    -
    • - -
  • - -
    保存
    -
    #iconsave
    -
    • - -
  • - -
    图片
    -
    #icontupian
    -
    • - -
  • - -
    柱状图
    -
    #iconzhuzhuangtu
    -
    • - -
  • - -
    超链接
    -
    #iconchaolianjie
    -
    • - -
  • - -
    文本
    -
    #iconziyuan
    -
    • - -
  • - -
    视频
    -
    #iconshipin
    -
    • - -
  • - -
    框架
    -
    #iconkuangjia
    -
    • - -
  • - -
    预览
    -
    #iconyulan
    -
    • - -
  • - -
    横向文字
    -
    #iconhengxiangwenzi
    -
    • - -
  • - -
    图表 _饼图
    -
    #iconicon_tubiao_bingtu
    -
    • - -
  • - -
    漏斗图
    -
    #iconloudoutu
    -
    • - -
  • - -
    图表 折线图
    -
    #icontubiaozhexiantu
    -
    • - -
  • - -
    柱线图
    -
    #iconzhuxiantu
    -
    • - -
  • - -
    图片
    -
    #icontupian1
    -
    • - -
  • - -
    仪表盘
    -
    #iconyibiaopan
    -
    • - -
  • - -
    返回
    -
    #icon1
    -
    • - -
  • - -
    下载
    -
    #iconxiazai
    -
    • - -
  • - -
    下载
    -
    #icon11-04
    -
    • - -
  • - -
    邮箱
    -
    #iconyouxiang
    -
    • - -
  • - -
    绑定手机
    -
    #iconbangdingshouji
    -
    • - -
  • - -
    手机
    -
    #iconshouji
    -
    • - -
  • - -
    52-手机
    -
    #icon52-shouji
    + +
    + 52-手机 +
    +
    .icon52-shouji +
    • - +
  • - -
    home
    -
    #iconhome
    + +
    + home +
    +
    .iconhome +
    • - +
  • - -
    home
    -
    #iconhome2
    + +
    + home +
    +
    .iconhome2 +
    • - +
  • - -
    Kafka
    -
    #iconKafka
    + +
    + Kafka +
    +
    .iconKafka +
    • - +
  • - -
    数据接入—Kafka集群
    -
    #iconshujujieruKafkajiqun
    + +
    + 数据接入—Kafka集群 +
    +
    .iconshujujieruKafkajiqun +
    • - +
  • - -
    kafka
    -
    #iconkafka
    + +
    + kafka +
    +
    .iconkafka +
    • - +
  • - -
    elasticsearch-Elasticsearch
    -
    #iconelasticsearch-Elasticsearch
    + +
    + elasticsearch-Elasticsearch +
    +
    .iconelasticsearch-Elasticsearch +
    • - +
  • - -
    apachekafka
    -
    #iconapachekafka
    + +
    + apachekafka +
    +
    .iconapachekafka +
    • - +
  • - -
    elasticsearch
    -
    #iconelasticsearch
    + +
    + elasticsearch +
    +
    .iconelasticsearch +
    • - +
  • - -
    问题反馈
    -
    #iconwentifankui
    + +
    + 问题反馈 +
    +
    .iconwentifankui +
    • - +
  • - -
    问题反馈
    -
    #iconwentifankui1
    + +
    + 问题反馈 +
    +
    .iconwentifankui1 +
    • - +
  • - -
    问题反馈
    -
    #iconwentifankui2
    + +
    + 问题反馈 +
    +
    .iconwentifankui2 +
    • - +
  • - -
    alikafka 消息队列Kafka
    -
    #iconalikafkaxiaoxiduilieKafka
    + +
    + alikafka 消息队列Kafka +
    +
    .iconalikafkaxiaoxiduilieKafka +
    • - +
  • - -
    项目查询-查看设备
    -
    #iconxiangmuchaxun-chakanshebei
    + +
    + 项目查询-查看设备 +
    +
    .iconxiangmuchaxun-chakanshebei +
    • - +
  • - -
    elasticsearch Elasticsearch
    -
    #iconelasticsearchElasticsearch
    + +
    + elasticsearch Elasticsearch +
    +
    .iconelasticsearchElasticsearch +
    • - +
  • - -
    511统计_树图
    -
    #icon511tongji_shutu
    + +
    + 511统计_树图 +
    +
    .icon511tongji_shutu +
    • - +
  • - -
    分享
    -
    #iconfenxiang1
    + +
    + 分享 +
    +
    .iconfenxiang1 +
    • - +
  • - -
    分享
    -
    #iconfenxiang2
    + +
    + 分享 +
    +
    .iconfenxiang2 +
    • - +
  • - -
    分享
    -
    #iconfenxiang_2
    + +
    + 分享 +
    +
    .iconfenxiang_2 +
    • - +
  • - -
    告警-紧急
    -
    #iconNMStubiao-
    + +
    + 告警-紧急 +
    +
    .iconNMStubiao- +
    • - +
  • - -
    完成安全事件
    -
    #iconwanchenganquanshijian
    + +
    + 完成安全事件 +
    +
    .iconwanchenganquanshijian +
    • - +
  • - -
    eventbridge 消息事件总线
    -
    #iconeventbridgexiaoxishijianzongxian
    + +
    + eventbridge 消息事件总线 +
    +
    .iconeventbridgexiaoxishijianzongxian +
    • - +
  • - -
    树
    -
    #iconshu
    + +
    + 树 +
    +
    .iconshu +
    • - +
  • - -
    设备关机
    -
    #iconshebeiguanji
    + +
    + 设备关机 +
    +
    .iconshebeiguanji +
    • - +
  • - -
    好房拓 4.0.0 iconfont_短信
    -
    #iconhaofangtuo400iconfontduanxin
    + +
    + 好房拓 4.0.0 iconfont_短信 +
    +
    .iconhaofangtuo400iconfontduanxin +
    • - +
  • - -
    业务参数
    -
    #iconnavicon-ywcs
    + +
    + 业务参数 +
    +
    .iconnavicon-ywcs +
    • - +
  • - -
    列表
    -
    #iconliebiao
    + +
    + 列表 +
    +
    .iconliebiao +
    • - +
  • - -
    编辑
    -
    #iconbianji
    + +
    + 编辑 +
    +
    .iconbianji +
    • - +
  • - -
    邮件
    -
    #iconyoujian
    + +
    + 邮件 +
    +
    .iconyoujian +
    • - +
  • - -
    社交钉钉
    -
    #iconshejiaodingding
    + +
    + 社交钉钉 +
    +
    .iconshejiaodingding +
    • - +
  • - -
    字典管理
    -
    #iconzidianguanli
    + +
    + 字典管理 +
    +
    .iconzidianguanli +
    • - +
  • - -
    图表
    -
    #icontubiao
    + +
    + 图表 +
    +
    .icontubiao +
    • - +
  • - -
    钉钉
    -
    #icondingding
    + +
    + 钉钉 +
    +
    .icondingding +
    • - +
  • - -
    短信
    -
    #iconduanxin
    + +
    + 短信 +
    +
    .iconduanxin +
    • - +
  • - -
    directmail 邮件推送
    -
    #icondirectmailyoujiantuisong
    + +
    + directmail 邮件推送 +
    +
    .icondirectmailyoujiantuisong +
    • - +
  • - -
    设备设施
    -
    #iconshebeisheshi
    + +
    + 设备设施 +
    +
    .iconshebeisheshi +
    • - +
  • - -
    通知
    -
    #icontongzhi
    + +
    + 通知 +
    +
    .icontongzhi +
    • - +
  • - -
    日志
    -
    #iconrizhi
    + +
    + 日志 +
    +
    .iconrizhi +
    • - +
  • - -
    触发器配置-灰
    -
    #iconchufaqipeizhi-hui
    + +
    + 触发器配置-灰 +
    +
    .iconchufaqipeizhi-hui +
    • - +
  • - -
    vcs 视觉计算服务
    -
    #iconvcsshijuejisuanfuwu
    + +
    + vcs 视觉计算服务 +
    +
    .iconvcsshijuejisuanfuwu +
    • - +
  • - -
    设备
    -
    #iconbar_icon_shebei
    + +
    + 设备 +
    +
    .iconbar_icon_shebei +
    • - +
  • - -
    user-before
    -
    #iconuser-before
    + +
    + user-before +
    +
    .iconuser-before +
    • - +
  • - -
    科目维护图标
    -
    #iconkemuweihutubiao
    + +
    + 科目维护图标 +
    +
    .iconkemuweihutubiao +
    • - +
  • - -
    会计科目维护
    -
    #iconaccounting-subjects
    + +
    + 会计科目维护 +
    +
    .iconaccounting-subjects +
    • - +
  • - -
    成本查询
    -
    #iconRectangleCopy
    + +
    + 成本查询 +
    +
    .iconRectangleCopy +
    • - +
  • - -
    成本数据管理
    -
    #iconchengbenshujuguanli
    + +
    + 成本数据管理 +
    +
    .iconchengbenshujuguanli +
    • - +
  • - -
    基本数据
    -
    #iconjibenshuju
    + +
    + 基本数据 +
    +
    .iconjibenshuju +
    • - +
  • - -
    B-省市区
    -
    #iconB-shengshiqu
    + +
    + B-省市区 +
    +
    .iconB-shengshiqu +
    • - +
  • - -
    组织机构
    -
    #iconzuzhijigou
    + +
    + 组织机构 +
    +
    .iconzuzhijigou +
    • - +
  • - -
    按钮
    -
    #iconanniu
    + +
    + 按钮 +
    +
    .iconanniu +
    • - +
  • - -
    菜单
    -
    #iconcaidan2
    + +
    + 菜单 +
    +
    .iconcaidan2 +
    • - +
  • - -
    问号
    -
    #iconwenhao
    + +
    + 问号 +
    +
    .iconwenhao +
    • - +
  • - -
    垃圾桶
    -
    #iconlajitong
    + +
    + 垃圾桶 +
    +
    .iconlajitong +
    • - +
  • - -
    重置密码
    -
    #iconzhongzhimima
    + +
    + 重置密码 +
    +
    .iconzhongzhimima +
    • - +
  • - -
    设置
    -
    #iconshezhi
    + +
    + 设置 +
    +
    .iconshezhi +
    • - +
  • - -
    中转
    -
    #iconzhongzhuan
    + +
    + 中转 +
    +
    .iconzhongzhuan +
    • - +
  • - -
    add
    -
    #iconadd
    + +
    + add +
    +
    .iconadd +
    • - +
  • - -
    minus
    -
    #iconminus
    + +
    + minus +
    +
    .iconminus +
    • - +
  • - -
    password
    -
    #iconpassword
    + +
    + password +
    +
    .iconpassword +
    • - +
  • - -
    用户
    -
    #iconyonghu
    + +
    + 用户 +
    +
    .iconyonghu +
    • - +
  • - -
    权限
    -
    #iconquanxian
    + +
    + 权限 +
    +
    .iconquanxian +
    • - +
  • - -
    角色
    -
    #iconjiaose1
    + +
    + 角色 +
    +
    .iconjiaose1 +
    • - +
  • - -
    字典
    -
    #iconzidian
    + +
    + 字典 +
    +
    .iconzidian +
    • - +
  • - -
    参数设置
    -
    #iconcssz
    + +
    + 参数设置 +
    +
    .iconcssz +
    • - +
  • - -
    编辑
    -
    #iconbianji1
    + +
    + 编辑 +
    +
    .iconbianji1 +
    • - +
  • - -
    用户权限
    -
    #icondfzq-
    + +
    + 用户权限 +
    +
    .icondfzq- +
    • - +
  • - -
    分享
    -
    #iconfenxiang
    + +
    + 分享 +
    +
    .iconfenxiang +
    • - +
  • - -
    授权
    -
    #iconshouquan1
    + +
    + 授权 +
    +
    .iconshouquan1 +
    • - +
  • - -
    左箭头
    -
    #iconjiantou
    + +
    + 左箭头 +
    +
    .iconjiantou +
    • - +
  • - -
    左箭头
    -
    #iconjiantou-copy-copy
    + +
    + 左箭头 +
    +
    .iconjiantou-copy-copy +
    • - +
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont iconxxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    仪表盘-抄表
    +
    #iconyibiaopan-chaobiao
    +
    • + +
  • + +
    南丁格尔玫瑰图
    +
    #iconnandinggeermeiguitu
    +
    • + +
  • + +
    展 开
    +
    #iconzhankai
    +
    • + +
  • + +
    excel
    +
    #iconexcel
    +
    • + +
  • + +
    保存
    +
    #iconbaocun
    +
    • + +
  • + +
    关 闭
    +
    #iconguanbi
    +
    • + +
  • + +
    pdf
    +
    #iconpdf
    +
    • + +
  • + +
    复制
    +
    #iconfuzhi
    +
    • + +
  • + +
    020空心饼图
    +
    #icon020kongxinbingtu
    +
    • + +
  • + +
    时间
    +
    #iconshijian
    +
    • + +
  • + +
    保存
    +
    #iconsave
    +
    • + +
  • + +
    图片
    +
    #icontupian
    +
    • + +
  • + +
    柱状图
    +
    #iconzhuzhuangtu
    +
    • + +
  • + +
    超链接
    +
    #iconchaolianjie
    +
    • + +
  • + +
    文本
    +
    #iconziyuan
    +
    • + +
  • + +
    视频
    +
    #iconshipin
    +
    • + +
  • + +
    框架
    +
    #iconkuangjia
    +
    • + +
  • + +
    预览
    +
    #iconyulan
    +
    • + +
  • + +
    横向文字
    +
    #iconhengxiangwenzi
    +
    • + +
  • + +
    图表 _饼图
    +
    #iconicon_tubiao_bingtu
    +
    • + +
  • + +
    漏斗图
    +
    #iconloudoutu
    +
    • + +
  • + +
    图表 折线图
    +
    #icontubiaozhexiantu
    +
    • + +
  • + +
    柱线图
    +
    #iconzhuxiantu
    +
    • + +
  • + +
    图片
    +
    #icontupian1
    +
    • + +
  • + +
    仪表盘
    +
    #iconyibiaopan
    +
    • + +
  • + +
    返回
    +
    #icon1
    +
    • + +
  • + +
    下载
    +
    #iconxiazai
    +
    • + +
  • + +
    下载
    +
    #icon11-04
    +
    • + +
  • + +
    邮箱
    +
    #iconyouxiang
    +
    • + +
  • + +
    绑定手机
    +
    #iconbangdingshouji
    +
    • + +
  • + +
    手机
    +
    #iconshouji
    +
    • + +
  • + +
    52-手机
    +
    #icon52-shouji
    +
    • + +
  • + +
    home
    +
    #iconhome
    +
    • + +
  • + +
    home
    +
    #iconhome2
    +
    • + +
  • + +
    Kafka
    +
    #iconKafka
    +
    • + +
  • + +
    数据接入—Kafka集群
    +
    #iconshujujieruKafkajiqun
    +
    • + +
  • + +
    kafka
    +
    #iconkafka
    +
    • + +
  • + +
    elasticsearch-Elasticsearch
    +
    #iconelasticsearch-Elasticsearch
    +
    • + +
  • + +
    apachekafka
    +
    #iconapachekafka
    +
    • + +
  • + +
    elasticsearch
    +
    #iconelasticsearch
    +
    • + +
  • + +
    问题反馈
    +
    #iconwentifankui
    +
    • + +
  • + +
    问题反馈
    +
    #iconwentifankui1
    +
    • + +
  • + +
    问题反馈
    +
    #iconwentifankui2
    +
    • + +
  • + +
    alikafka 消息队列Kafka
    +
    #iconalikafkaxiaoxiduilieKafka
    +
    • + +
  • + +
    项目查询-查看设备
    +
    #iconxiangmuchaxun-chakanshebei
    +
    • + +
  • + +
    elasticsearch Elasticsearch
    +
    #iconelasticsearchElasticsearch
    +
    • + +
  • + +
    511统计_树图
    +
    #icon511tongji_shutu
    +
    • + +
  • + +
    分享
    +
    #iconfenxiang1
    +
    • + +
  • + +
    分享
    +
    #iconfenxiang2
    +
    • + +
  • + +
    分享
    +
    #iconfenxiang_2
    +
    • + +
  • + +
    告警-紧急
    +
    #iconNMStubiao-
    +
    • + +
  • + +
    完成安全事件
    +
    #iconwanchenganquanshijian
    +
    • + +
  • + +
    eventbridge 消息事件总线
    +
    #iconeventbridgexiaoxishijianzongxian
    +
    • + +
  • + +
    树
    +
    #iconshu
    +
    • + +
  • + +
    设备关机
    +
    #iconshebeiguanji
    +
    • + +
  • + +
    好房拓 4.0.0 iconfont_短信
    +
    #iconhaofangtuo400iconfontduanxin
    +
    • + +
  • + +
    业务参数
    +
    #iconnavicon-ywcs
    +
    • + +
  • + +
    列表
    +
    #iconliebiao
    +
    • + +
  • + +
    编辑
    +
    #iconbianji
    +
    • + +
  • + +
    邮件
    +
    #iconyoujian
    +
    • + +
  • + +
    社交钉钉
    +
    #iconshejiaodingding
    +
    • + +
  • + +
    字典管理
    +
    #iconzidianguanli
    +
    • + +
  • + +
    图表
    +
    #icontubiao
    +
    • + +
  • + +
    钉钉
    +
    #icondingding
    +
    • + +
  • + +
    短信
    +
    #iconduanxin
    +
    • + +
  • + +
    directmail 邮件推送
    +
    #icondirectmailyoujiantuisong
    +
    • + +
  • + +
    设备设施
    +
    #iconshebeisheshi
    +
    • + +
  • + +
    通知
    +
    #icontongzhi
    +
    • + +
  • + +
    日志
    +
    #iconrizhi
    +
    • + +
  • + +
    触发器配置-灰
    +
    #iconchufaqipeizhi-hui
    +
    • + +
  • + +
    vcs 视觉计算服务
    +
    #iconvcsshijuejisuanfuwu
    +
    • + +
  • + +
    设备
    +
    #iconbar_icon_shebei
    +
    • + +
  • + +
    user-before
    +
    #iconuser-before
    +
    • + +
  • + +
    科目维护图标
    +
    #iconkemuweihutubiao
    +
    • + +
  • + +
    会计科目维护
    +
    #iconaccounting-subjects
    +
    • + +
  • + +
    成本查询
    +
    #iconRectangleCopy
    +
    • + +
  • + +
    成本数据管理
    +
    #iconchengbenshujuguanli
    +
    • + +
  • + +
    基本数据
    +
    #iconjibenshuju
    +
    • + +
  • + +
    B-省市区
    +
    #iconB-shengshiqu
    +
    • + +
  • + +
    组织机构
    +
    #iconzuzhijigou
    +
    • + +
  • + +
    按钮
    +
    #iconanniu
    +
    • + +
  • + +
    菜单
    +
    #iconcaidan2
    +
    • + +
  • + +
    问号
    +
    #iconwenhao
    +
    • + +
  • + +
    垃圾桶
    +
    #iconlajitong
    +
    • + +
  • + +
    重置密码
    +
    #iconzhongzhimima
    +
    • + +
  • + +
    设置
    +
    #iconshezhi
    +
    • + +
  • + +
    中转
    +
    #iconzhongzhuan
    +
    • + +
  • + +
    add
    +
    #iconadd
    +
    • + +
  • + +
    minus
    +
    #iconminus
    +
    • + +
  • + +
    password
    +
    #iconpassword
    +
    • + +
  • + +
    用户
    +
    #iconyonghu
    +
    • + +
  • + +
    权限
    +
    #iconquanxian
    +
    • + +
  • + +
    角色
    +
    #iconjiaose1
    +
    • + +
  • + +
    字典
    +
    #iconzidian
    +
    • + +
  • + +
    参数设置
    +
    #iconcssz
    +
    • + +
  • + +
    编辑
    +
    #iconbianji1
    +
    • + +
  • + +
    用户权限
    +
    #icondfzq-
    +
    • + +
  • + +
    分享
    +
    #iconfenxiang
    +
    • + +
  • + +
    授权
    +
    #iconshouquan1
    +
    • + +
  • + +
    左箭头
    +
    #iconjiantou
    +
    • + +
  • + +
    左箭头
    +
    #iconjiantou-copy-copy
    +
    • + +
+

Symbol 引用

@@ -2425,10 +2465,10 @@

使用步骤如下：

第一步：引入项目下面生成的 symbol 代码：

- 
<script src="./iconfont.js"></script>
+
<script src="./iconfont.js"></script>
 

           
第二步：加入通用 CSS 代码（引入一次就行）：

-          
<style>
+
<style>
 .icon {
   width: 1em;
   height: 1em;
@@ -2439,17 +2479,17 @@
 </style>
 

           
第三步：挑选相应图标并获取类名，应用于页面：

-          
<svg class="icon" aria-hidden="true">
+
<svg class="icon" aria-hidden="true">
   <use xlink:href="#icon-xxx"></use>
 </svg>
 

-
+
- - \ No newline at end of file + diff --git a/report-ui/src/assets/iconfont/iconfont.css b/report-ui/src/assets/iconfont/iconfont.css index 9f6da5da..44a5c9b2 100644 --- a/report-ui/src/assets/iconfont/iconfont.css +++ b/report-ui/src/assets/iconfont/iconfont.css @@ -1,8 +1,8 @@ @font-face { font-family: "iconfont"; /* Project id 1513211 */ - src: url('iconfont.woff2?t=1624613153423') format('woff2'), - url('iconfont.woff?t=1624613153423') format('woff'), - url('iconfont.ttf?t=1624613153423') format('truetype'); + src: url('iconfont.woff2?t=1624933667537') format('woff2'), + url('iconfont.woff?t=1624933667537') format('woff'), + url('iconfont.ttf?t=1624933667537') format('truetype'); } .iconfont { @@ -13,6 +13,14 @@ -moz-osx-font-smoothing: grayscale; } +.iconyibiaopan-chaobiao:before { + content: "\e72e"; +} + +.iconnandinggeermeiguitu:before { + content: "\e851"; +} + .iconzhankai:before { content: "\e631"; } diff --git a/report-ui/src/assets/iconfont/iconfont.js b/report-ui/src/assets/iconfont/iconfont.js index 025f4e70..bc1cad36 100644 --- a/report-ui/src/assets/iconfont/iconfont.js +++ b/report-ui/src/assets/iconfont/iconfont.js @@ -1 +1 @@ -!function(c){var l,h,a,i,z,o,m='',t=(t=document.getElementsByTagName("script"))[t.length-1].getAttribute("data-injectcss");if(t&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}function s(){z||(z=!0,a())}l=function(){var c,l,h;(h=document.createElement("div")).innerHTML=m,m=null,(l=h.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",c=l,(h=document.body).firstChild?(l=h.firstChild).parentNode.insertBefore(c,l):h.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(l,0):(h=function(){document.removeEventListener("DOMContentLoaded",h,!1),l()},document.addEventListener("DOMContentLoaded",h,!1)):document.attachEvent&&(a=l,i=c.document,z=!1,(o=function(){try{i.documentElement.doScroll("left")}catch(c){return void setTimeout(o,50)}s()})(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,s())})}(window); \ No newline at end of file +!function(c){var l,h,a,i,z,o,m='',t=(t=document.getElementsByTagName("script"))[t.length-1].getAttribute("data-injectcss");if(t&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}function v(){z||(z=!0,a())}l=function(){var c,l,h;(h=document.createElement("div")).innerHTML=m,m=null,(l=h.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",c=l,(h=document.body).firstChild?(l=h.firstChild).parentNode.insertBefore(c,l):h.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(l,0):(h=function(){document.removeEventListener("DOMContentLoaded",h,!1),l()},document.addEventListener("DOMContentLoaded",h,!1)):document.attachEvent&&(a=l,i=c.document,z=!1,(o=function(){try{i.documentElement.doScroll("left")}catch(c){return void setTimeout(o,50)}v()})(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,v())})}(window); \ No newline at end of file diff --git a/report-ui/src/assets/iconfont/iconfont.json b/report-ui/src/assets/iconfont/iconfont.json index 01b92a33..0b1ad0ad 100644 --- a/report-ui/src/assets/iconfont/iconfont.json +++ b/report-ui/src/assets/iconfont/iconfont.json @@ -5,6 +5,20 @@ "css_prefix_text": "icon", "description": "", "glyphs": [ + { + "icon_id": "16466332", + "name": "仪表盘-抄表", + "font_class": "yibiaopan-chaobiao", + "unicode": "e72e", + "unicode_decimal": 59182 + }, + { + "icon_id": "15872322", + "name": "南丁格尔玫瑰图", + "font_class": "nandinggeermeiguitu", + "unicode": "e851", + "unicode_decimal": 59473 + }, { "icon_id": "11990084", "name": "展 开 ", diff --git a/report-ui/src/assets/iconfont/iconfont.ttf b/report-ui/src/assets/iconfont/iconfont.ttf index 0a84cbd1..874ec8c9 100644 Binary files a/report-ui/src/assets/iconfont/iconfont.ttf and b/report-ui/src/assets/iconfont/iconfont.ttf differ diff --git a/report-ui/src/assets/iconfont/iconfont.woff b/report-ui/src/assets/iconfont/iconfont.woff index f0e1c3fa..a277bc52 100644 Binary files a/report-ui/src/assets/iconfont/iconfont.woff and b/report-ui/src/assets/iconfont/iconfont.woff differ diff --git a/report-ui/src/assets/iconfont/iconfont.woff2 b/report-ui/src/assets/iconfont/iconfont.woff2 index ac4c1685..5ddd11ef 100644 Binary files a/report-ui/src/assets/iconfont/iconfont.woff2 and b/report-ui/src/assets/iconfont/iconfont.woff2 differ diff --git a/report-ui/src/views/report/bigscreen/designer/tools.js b/report-ui/src/views/report/bigscreen/designer/tools.js index 543abfa7..66fbf3a6 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools.js +++ b/report-ui/src/views/report/bigscreen/designer/tools.js @@ -4315,8 +4315,8 @@ const widgetTools = [ { code: 'WidgetPieNightingaleRoseArea', type: 'chart', - label: '饼图-南丁格尔-面积', - icon: 'iconicon_tubiao_bingtu', + label: '南丁格尔玫瑰图', + icon: 'iconnandinggeermeiguitu', options: { // 配置 setup: [ diff --git a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRoseArea.vue b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRoseArea.vue index 74b4ad89..cd9a6fb2 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRoseArea.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRoseArea.vue @@ -22,17 +22,14 @@ export default { toolbox: { show: true, feature: { - mark: { show: true }, - dataView: { show: true, readOnly: false }, - restore: { show: true }, - saveAsImage: { show: true } + mark: { show: true } } }, series: [ { name: "面积模式", type: "pie", - radius: [50, 250], + radius: ["10%", "50%"], center: ["50%", "50%"], roseType: "area", itemStyle: { @@ -338,8 +335,6 @@ export default { .echarts { width: 100%; height: 100%; - min-width: 200px; - min-height: 200px; overflow: hidden; }