Merge remote-tracking branch 'origin/dev' into dev

doc/docs/guide/charts.md

@@ -1,6 +1,6 @@
 ## 图表和数据集之间的关系
 
-图表和数据集是强关联关系，一个图表需要什么样的数据才能进行展示下面都有说明，以柱状图举例，只能用俩个字段的数据集进行数据展示，那使用数据集有2个以上字段那肯定图表无法正常展示，反之有个数据集是3个字段，那就找能展示3个字段的图表，千万别搞小聪明定了好多个字段的数据集，然后从里面挑几个字段进行展示，不要在么干。<br>
+图表和数据集是强关联关系，一个图表需要什么样的数据才能进行展示下面都有说明，以柱状图举例，只能用俩个字段的数据集进行数据展示，那使用数据集有2个以上字段那肯定图表无法正常展示，反之有个数据集是3个字段，那就找能展示3个字段的图表，千万别搞小聪明定了好多个字段的数据集，然后从里面挑几个字段进行展示，不要这么干。<br>
 
 ## 文本框
 
@@ -42,7 +42,7 @@
 ![img](../picture/dashboard/img_22.png) <br>
 表格字段对应的数据只选择“文本数字”。<br>
 ![img14](../picture/dashboard/img_23.png) <br>
-**注意：** 多个字段的时候，需要在“配置-新增”添加你选择数据集所对应的字段，类似于映射关系。 <br>
+**注意：** 多个字段的时候，需要在“配置-新增”添加你选择数据集所对应的字段，即“配置”中“表体设置”的“key值”要和你“动态数据对应的字段名”保持一致，类似于映射关系。 <br>
 **如有问题，请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
 
 ## 内联框架
@@ -52,6 +52,7 @@
 ## 柱状图
 
 柱状图数据集对应字典值需要选择一个“X轴”、“柱状”，只需要2个字段 <br>
+![img_13](../picture/charts/img_13.png) <br>
 **如有问题，请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
 
 ### 数据格式
@@ -65,7 +66,7 @@
 ## 折线图
 
 折线图数据集对应字典值需要选择一个“X轴”、“折线”，只需要2个字段 <br>
-![img_8.png](../picture/dashboard/img_8.png) <br>
+![img14.png](../picture/charts/img_14.png) <br>
 **如有问题，请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
 
 ### 数据格式
@@ -74,14 +75,24 @@
 
 ## 柱线图
 
-柱线图数据集对应字典值需要选择一个“X轴”、“柱状”、“折线”，需要3个字段 <br>
-![img9](../picture/dashboard/img_9.png) <br>
+柱线图数据集对应字典值需要选择一个“X轴”、“柱状”、“折线”，需要3个字段，图例名称用 | 进行分隔。<br>
+![img15](../picture/charts/img_15.png) <br>
 **如有问题，请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
 
 ### 数据格式
 
 ![img5](../picture/charts/img_4.png) <br>
 
+## 多柱线图
+
+多柱线图对应数据字典需要选择一个“X轴”，剩下的字段可任意选择为“柱状”、“折线”，图例名称用 | 进行分隔。<br>
+![img16](../picture/charts/img_16.png) <br>
+**如有问题，请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
+
+### 数据格式
+
+![img17](../picture/charts/img_17.png) <br>
+
 ## 饼图
 
 饼图的数据集选择的时候，只能选择饼图对应的字典，即“Name”、“Value”，不明白可以参考静态数据 <br>
@@ -95,7 +106,7 @@
 
 ## 漏斗图
 
-![img13](../picture/dashboard/img_13.png) <br>
+![img18](../picture/charts/img_18.png) <br>
 **如有问题，请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
 
 ### 数据格式
@@ -127,7 +138,7 @@
 
 ## 百分百图
 
-![img16](../picture/dashboard/img_16.png) <br>
+![img19](../picture/charts/img_19.png) <br>
 **如有问题，请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
 
 ### 数据格式
@@ -185,4 +196,13 @@
 ## 装饰饼图
 
 装饰用，可单独使用或者配合文本框等图表组件来使整个大屏立体、丰满。<br>
-![img12](../picture/charts/img_12.png) <br>
+![img12](../picture/charts/img_12.png) <br>
+
+## 词云图
+
+最大最小角度都为0时则文字显示为正。所有词云颜色皆是随机产生，动态数据每请求一次数据，所有词云颜色皆改变一次。<br>
+![img20](../picture/charts/img_20.png) <br>
+
+### 数据格式
+
+和饼图、南丁格尔玫瑰图数据保持一致。<br>

report-ui/src/assets/iconfont/demo_index.html

@@ -54,6 +54,12 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe7af;</span>
+                <div class="name">词云图</div>
+                <div class="code-name">&amp;#xe7af;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe618;</span>
                 <div class="name">导出</div>
@@ -786,9 +792,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1629797734566') format('woff2'),
-       url('iconfont.woff?t=1629797734566') format('woff'),
-       url('iconfont.ttf?t=1629797734566') format('truetype');
+  src: url('iconfont.woff2?t=1643094287456') format('woff2'),
+       url('iconfont.woff?t=1643094287456') format('woff'),
+       url('iconfont.ttf?t=1643094287456') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -814,6 +820,15 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont iconciyuntu"></span>
+            <div class="name">
+              词云图
+            </div>
+            <div class="code-name">.iconciyuntu
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icondaochu"></span>
             <div class="name">
@@ -1912,6 +1927,14 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconciyuntu"></use>
+                </svg>
+                <div class="name">词云图</div>
+                <div class="code-name">#iconciyuntu</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icondaochu"></use>

report-ui/src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 1513211 */
-  src: url("iconfont.woff2?t=1629797734566") format("woff2"),
-    url("iconfont.woff?t=1629797734566") format("woff"),
-    url("iconfont.ttf?t=1629797734566") format("truetype");
+  src: url('iconfont.woff2?t=1643094287456') format('woff2'),
+       url('iconfont.woff?t=1643094287456') format('woff'),
+       url('iconfont.ttf?t=1643094287456') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.iconciyuntu:before {
+  content: "\e7af";
+}
+
 .icondaochu:before {
   content: "\e618";
 }
@@ -488,3 +492,4 @@
 .iconjiantou-copy-copy:before {
   content: "\e654";
 }
+

report-ui/src/assets/iconfont/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "23043843",
+      "name": "词云图",
+      "font_class": "ciyuntu",
+      "unicode": "e7af",
+      "unicode_decimal": 59311
+    },
     {
       "icon_id": "14325372",
       "name": "导出",

report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-pie-nightingale.js

@@ -1,12 +1,12 @@
 /*
  * @Descripttion: 南丁格尔玫瑰图 json
- * @version: 
+ * @version:
  * @Author: qianlishi
  * @Date: 2021-08-29 07:32:40
  * @LastEditors: qianlishi
  * @LastEditTime: 2021-09-28 14:18:05
  */
-export const WidgetPieNightingale = {
+export const widgetPieNightingale = {
     code: 'WidgetPieNightingaleRoseArea',
     type: 'chart',
     label: '南丁格尔玫瑰图',
@@ -400,4 +400,4 @@ export const WidgetPieNightingale = {
         },
       ],
     }
-  }
+  }

report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-word-cloud.js

@@ -0,0 +1,416 @@
+export const widgetWordCloud = {
+  code: 'widgetWordCloud',
+  type: 'chart',
+  label: '词云图',
+  icon: 'iconciyuntu',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '词云图',
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: ''
+      },
+      [
+        {
+          name: '标题设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '标题',
+              name: 'isNoTitle',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'el-input-text',
+              label: '标题',
+              name: 'titleText',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'textColor',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'textFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'textFontSize',
+              required: false,
+              placeholder: '',
+              value: 20
+            },
+            {
+              type: 'el-select',
+              label: '字体位置',
+              name: 'textAlign',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'center', name: '居中'},
+                {code: 'left', name: '左对齐'},
+                {code: 'right', name: '右对齐'},
+              ],
+              value: 'left'
+            },
+            {
+              type: 'el-input-text',
+              label: '副标题',
+              name: 'subText',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'subTextColor',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'subTextFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'subTextFontSize',
+              required: false,
+              placeholder: '',
+              value: 12
+            },
+          ],
+        },
+        {
+          name: '词云范围',
+          list: [
+            {
+              type: 'el-input-number',
+              label: '最大范围',
+              name: 'maxRangeSize',
+              required: false,
+              placeholder: '',
+              value: 25
+            },
+            {
+              type: 'el-input-number',
+              label: '最小范围',
+              name: 'minRangeSize',
+              required: false,
+              placeholder: '',
+              value: 2
+            },
+          ],
+        },
+        {
+          name: '词云角度',
+          list: [
+            {
+              type: 'el-input-number',
+              label: '最大角度',
+              name: 'maxRotationRange',
+              required: false,
+              placeholder: '',
+              value: 90
+            },
+            {
+              type: 'el-input-number',
+              label: '最小角度',
+              name: 'minRotationRange',
+              required: false,
+              placeholder: '',
+              value: -45
+            },
+          ],
+        },
+        {
+          name: '提示语设置',
+          list: [
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'fontSize',
+              required: false,
+              placeholder: '',
+              value: 12
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'lineColor',
+              required: false,
+              placeholder: '',
+              value: '#00FEFF'
+            },
+          ],
+        },
+      ],
+    ],
+    // 数据
+    data: [
+      {
+        type: 'el-radio-group',
+        label: '数据类型',
+        name: 'dataType',
+        require: false,
+        placeholder: '',
+        selectValue: true,
+        selectOptions: [
+          {
+            code: 'staticData',
+            name: '静态数据',
+          },
+          {
+            code: 'dynamicData',
+            name: '动态数据',
+          },
+        ],
+        value: 'staticData',
+      },
+      {
+        type: 'el-input-number',
+        label: '刷新时间(毫秒)',
+        name: 'refreshTime',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        value: 60000
+      },
+      {
+        type: 'el-button',
+        label: '静态数据',
+        name: 'staticData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'staticData',
+        value: [
+          {name: "占道", value: 284},
+          {name: "水质", value: 71},
+          {name: "无水", value: 71},
+          {name: "停供", value: 21},
+          {name: "停气", value: 11},
+          {name: "占道", value: 11},
+          {name: "Nancy", value: 520},
+          {name: "Jayfee", value: 666},
+          {name: "生活资源", value: 999},
+          {name: "供热管理", value: 888},
+          {name: "供气质量", value: 777},
+          {name: "社会保障", value: 407},
+          {name: "交通运输", value: 516},
+          {name: "城市交通", value: 515},
+          {name: "环境保护", value: 483},
+          {name: "城乡建设", value: 449},
+          {name: "公共安全", value: 406},
+          {name: "供热管理", value: 375},
+          {name: "市容环卫", value: 355},
+          {name: "粉尘污染", value: 335},
+          {name: "噪声污染", value: 324},
+          {name: "医疗卫生", value: 284},
+          {name: "供热发展", value: 254},
+          {name: "房地产管理", value: 462},
+          {name: "生活噪音", value: 253},
+          {name: "城市供电", value: 223},
+          {name: "大气污染", value: 223},
+          {name: "房屋安全", value: 223},
+          {name: "文化活动", value: 223},
+          {name: "拆迁管理", value: 223},
+          {name: "公共设施", value: 223},
+          {name: "供气质量", value: 223},
+          {name: "供电管理", value: 223},
+          {name: "燃气管理", value: 152},
+          {name: "教育管理", value: 152},
+          {name: "医疗纠纷", value: 152},
+          {name: "执法监督", value: 152},
+          {name: "设备安全", value: 152},
+          {name: "政务建设", value: 152},
+          {name: "宏观经济", value: 152},
+          {name: "教育管理", value: 112},
+          {name: "社会保障", value: 112},
+          {name: "分类列表", value: 112},
+          {name: "农业生产", value: 112},
+          {name: "物业服务", value: 92},
+          {name: "物业管理", value: 92},
+          {name: "低保管理", value: 92},
+          {name: "执法争议", value: 72},
+          {name: "占道堆放", value: 71},
+          {name: "地上设施", value: 71},
+          {name: "主网原因", value: 71},
+          {name: "集中供热", value: 71},
+          {name: "客运管理", value: 71},
+          {name: "治安案件", value: 71},
+          {name: "群众健身", value: 41},
+          {name: "市场收费", value: 41},
+          {name: "生产资金", value: 41},
+          {name: "生产噪声", value: 41},
+          {name: "农村低保", value: 41},
+          {name: "劳动争议", value: 41},
+          {name: "医疗事故", value: 21},
+          {name: "基础教育", value: 21},
+          {name: "职业教育", value: 21},
+          {name: "拆迁补偿", value: 21},
+          {name: "设施维护", value: 21},
+          {name: "市场外溢", value: 11},
+          {name: "占道经营", value: 11},
+          {name: "树木管理", value: 11},
+          {name: "供气质量", value: 11},
+          {name: "燃气管理", value: 11},
+          {name: "市容环卫", value: 11},
+          {name: "新闻传媒", value: 11},
+          {name: "人才招聘", value: 11},
+          {name: "市场环境", value: 11},
+          {name: "城市交通", value: 11},
+          {name: "物业服务", value: 11},
+          {name: "物业管理", value: 11},
+          {name: "园林绿化", value: 11},
+          {name: "有线电视", value: 11},
+          {name: "社会治安", value: 11},
+          {name: "林业资源", value: 11},
+          {name: "体育活动", value: 11},
+          {name: "低保管理", value: 11},
+          {name: "劳动争议", value: 11},
+          {name: "粉煤灰污染", value: 284},
+          {name: "人行道管理", value: 71},
+          {name: "身份证管理", value: 71},
+          {name: "房地产开发", value: 11},
+          {name: "经营性收费", value: 11},
+          {name: "一次供水问题", value: 11},
+          {name: "工业粉尘污染", value: 71},
+          {name: "工业排放污染", value: 41},
+          {name: "破坏森林资源", value: 41},
+          {name: "生活用水管理", value: 688},
+          {name: "一次供水问题", value: 588},
+          {name: "公交运输管理", value: 386},
+          {name: "自然资源管理", value: 355},
+          {name: "土地资源管理", value: 304},
+          {name: "生活用水管理", value: 112},
+          {name: "供热单位影响", value: 253},
+          {name: "二次供水问题", value: 112},
+          {name: "城市公共设施", value: 92},
+          {name: "拆迁政策咨询", value: 92},
+          {name: "县区、开发区", value: 152},
+          {name: "文娱市场管理", value: 72},
+          {name: "商业烟尘污染", value: 72},
+          {name: "供热单位影响", value: 71},
+          {name: "压力容器安全", value: 71},
+          {name: "劳动合同争议", value: 41},
+          {name: "物业资质管理", value: 21},
+          {name: "农村基础设施", value: 11},
+          {name: "行政事业收费", value: 11},
+          {name: "房屋配套问题", value: 11},
+          {name: "公交运输管理", value: 11},
+          {name: "社会福利及事务", value: 11},
+          {name: "食品安全与卫生", value: 11},
+          {name: "物业服务与管理", value: 112},
+          {name: "文体与教育管理", value: 406},
+          {name: "社会保障与福利", value: 429},
+          {name: "出租车运营管理", value: 385},
+          {name: "物业服务与管理", value: 304},
+          {name: "房屋质量与安全", value: 223},
+          {name: "劳动报酬与福利", value: 41},
+          {name: "食品安全与卫生", value: 11},
+          {name: "房屋与图纸不符", value: 11},
+          {name: "其他行政事业收费", value: 11},
+          {name: "农村土地规划管理", value: 254},
+          {name: "社会保障保险管理", value: 92},
+          {name: "城市交通秩序管理", value: 72},
+          {name: "户籍管理及身份证", value: 11},
+          {name: "公路（水路）交通", value: 11},
+          {name: "国有公交（大巴）管理", value: 71},
+          {name: "有线电视安装及调试维护", value: 11},
+          {name: "市政府工作部门（含部门管理机构、直属单位）", value: 11},
+        ],
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        chartType: 'widget-piechart',
+        dictKey: 'PIE_PROPERTIES',
+        relactiveDomValue: 'dynamicData',
+        value: '',
+      },
+    ],
+    // 坐标
+    position: [
+      {
+        type: 'el-input-number',
+        label: '左边距',
+        name: 'left',
+        required: false,
+        placeholder: '',
+        value: 0,
+      },
+      {
+        type: 'el-input-number',
+        label: '上边距',
+        name: 'top',
+        required: false,
+        placeholder: '',
+        value: 0,
+      },
+      {
+        type: 'el-input-number',
+        label: '宽度',
+        name: 'width',
+        required: false,
+        placeholder: '该容器在1920px大屏中的宽度',
+        value: 500,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 300,
+      },
+    ],
+  }
+}

report-ui/src/views/bigscreenDesigner/designer/tools/main.js

@@ -25,7 +25,7 @@ import {widgetPiechart} from "./configure/widget-piechart"
 import {widgetFunnel} from "./configure/widget-funnel"
 import {widgetGauge} from "./configure/widget-gauge"
 import {widgetMap} from "./configure/widget-map"
-import {WidgetPieNightingale} from "./configure/widget-pie-nightingale"
+import {widgetPieNightingale} from "./configure/widget-pie-nightingale"
 import {widgetPiePercentage} from "./configure/widget-pie-percentage"
 import {widgetAirbubbleMap} from "./configure/widget-airbubble-map"
 import {widgetBarStack} from "./configure/widget-bar-stack"
@@ -34,6 +34,7 @@ import {widgetBarCompare} from "./configure/widget-bar-compare"
 import {widgetLineCompare} from "./configure/widget-line-compare"
 import {widgetDecoratePie} from "./configure/widget-decorate-pie";
 import {widgetMoreBarLine} from "./configure/widget-more-bar-line";
+import {widgetWordCloud} from "./configure/widget-word-cloud";
 
 export const widgetTool = [
   // type=html类型的组件
@@ -55,7 +56,7 @@ export const widgetTool = [
   widgetFunnel,
   widgetGauge,
   widgetMap,
-  WidgetPieNightingale,
+  widgetPieNightingale,
   widgetPiePercentage,
   widgetAirbubbleMap,
   widgetBarStack,
@@ -63,5 +64,6 @@ export const widgetTool = [
   widgetBarCompare,
   widgetLineCompare,
   widgetDecoratePie,
-  widgetMoreBarLine
+  widgetMoreBarLine,
+  widgetWordCloud
 ]

report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue

@@ -37,6 +37,7 @@ import widgetBarCompareChart from "./bar/widgetBarCompareChart";
 import widgetLineCompareChart from "./line/widgetLineCompareChart";
 import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";
 import widgetMoreBarLineChart from "./bar/widgetMoreBarLineChart";
+import widgetWordCloud from "./wordcloud/widgetWordCloud";
 
 export default {
   name: "WidgetTemp",
@@ -66,7 +67,8 @@ export default {
     widgetBarCompareChart,
     widgetLineCompareChart,
     widgetDecoratePieChart,
-    widgetMoreBarLineChart
+    widgetMoreBarLineChart,
+    widgetWordCloud
   },
   model: {
     prop: "value",

report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue

@@ -48,6 +48,7 @@ import widgetBarCompareChart from "./bar/widgetBarCompareChart";
 import widgetLineCompareChart from "./line/widgetLineCompareChart";
 import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";
 import widgetMoreBarLineChart from "./bar/widgetMoreBarLineChart";
+import widgetWordCloud from "./wordcloud/widgetWordCloud";
 
 export default {
   name: "Widget",
@@ -77,7 +78,8 @@ export default {
     widgetBarCompareChart,
     widgetLineCompareChart,
     widgetDecoratePieChart,
-    widgetMoreBarLineChart
+    widgetMoreBarLineChart,
+    widgetWordCloud
   },
   model: {
     prop: "value",

report-ui/src/views/bigscreenDesigner/designer/widget/wordcloud/widgetWordCloud.vue

@@ -0,0 +1,183 @@
+<template>
+  <div :style="styleObj">
+    <v-chart :options="options" autoresize/>
+  </div>
+</template>
+<script>
+import wordCloud from "../../../../../../static/wordCloud/echarts-wordcloud.min.js";
+
+export default {
+  name: "widgetWordCloud",
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  data() {
+    return {
+      options: {
+        tooltip: {
+          show: true
+        },
+        series: [
+          {
+            type: 'wordCloud',
+            size: ['9%', '99%'],
+            sizeRange: [6, 30],
+            textRotation: [0, 45, 90, -45],
+            rotationRange: [-45, 90],
+            shape: 'circle',
+            textPadding: 0,
+            autoSize: {
+              enable: true,
+              minSize: 6
+            },
+            textStyle: {
+              normal: {
+                color: function () {
+                  return 'rgb(' + [
+                    Math.round(Math.random() * 160),
+                    Math.round(Math.random() * 160),
+                    Math.round(Math.random() * 160)
+                  ].join(',') + ')';
+                }
+              },
+            },
+            data: []
+          }
+        ]
+      },
+      optionsStyle: {}, // 样式
+      optionsData: {}, // 数据
+      optionsSetup: {},
+      flagInter: null
+    };
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+        background: this.optionsSetup.background
+      };
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.setup;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.setup;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+  },
+  methods: {
+    // 修改图标options属性
+    editorOptions() {
+      this.setOptionsTitle();
+      this.setOptionsSizeRange();
+      this.setOptionsRotationRange();
+      this.setOptionsTooltip();
+      this.setOptionsData();
+    },
+    // 标题修改
+    setOptionsTitle() {
+      const optionsSetup = this.optionsSetup;
+      const title = {};
+      title.text = optionsSetup.titleText;
+      title.show = optionsSetup.isNoTitle;
+      title.left = optionsSetup.textAlign;
+      title.textStyle = {
+        color: optionsSetup.textColor,
+        fontSize: optionsSetup.textFontSize,
+        fontWeight: optionsSetup.textFontWeight
+      };
+      title.subtext = optionsSetup.subText;
+      title.subtextStyle = {
+        color: optionsSetup.subTextColor,
+        fontWeight: optionsSetup.subTextFontWeight,
+        fontSize: optionsSetup.subTextFontSize
+      };
+      this.options.title = title;
+    },
+    // 词云字体范围
+    setOptionsSizeRange() {
+      const optionsSetup = this.optionsSetup;
+      this.options.series[0].sizeRange = [optionsSetup.minRangeSize, optionsSetup.maxRangeSize];
+    },
+    // 文字角度
+    setOptionsRotationRange() {
+      const optionsSetup = this.optionsSetup;
+      this.options.series[0].rotationRange = [optionsSetup.minRotationRange, optionsSetup.maxRotationRange];
+    },
+    // tooltip 设置
+    setOptionsTooltip() {
+      const optionsSetup = this.optionsSetup;
+      const tooltip = {
+        trigger: "item",
+        show: true,
+        textStyle: {
+          color: optionsSetup.lineColor,
+          fontSize: optionsSetup.fontSize
+        }
+      };
+      this.options.tooltip = tooltip;
+    },
+    // 数据解析
+    setOptionsData() {
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
+    },
+    staticDataFn(val) {
+      const staticData = typeof val == "string" ? JSON.parse(val) : val;
+      for (const key in this.options.series) {
+        this.options.series[key].data = staticData;
+      }
+    },
+    dynamicDataFn(val, refreshTime) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(res);
+      });
+    },
+    renderingFn(val) {
+      for (const key in this.options.series) {
+        this.options.series[key].data = val;
+      }
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>

report-ui/src/views/layout/components/Sidebar/index.vue

@@ -1,7 +1,10 @@
 <template>
   <el-scrollbar wrap-class="scrollbar-wrapper">
     <div class="admin-title" @click="goBigScreen">
-      <img src="../../../../../static/logo-dp.png" width="50" class="mt10" />
+      <div class="con">
+        <img src="../../../../../static/logo-dp.png" width="50" />
+        <span class="version">V0.9.6</span>
+      </div>
     </div>
     <el-menu
       :show-timeout="200"
@@ -16,7 +19,6 @@
         :base-path="route.path"
       />
     </el-menu>
-    <div class="version">V0.9.5</div>
   </el-scrollbar>
 </template>
 
@@ -48,23 +50,30 @@ export default {
 
 <style lang="scss" scoped>
 .admin-title {
-  height: 60px;
-  line-height: 60px;
+  // height: 60px;
+  // line-height: 60px;
   text-align: center;
   width: 100%;
   font-weight: 500;
   color: #333;
   font-size: 14px;
   background: #fff;
+  .con {
+    margin: auto;
+    img {
+      margin-top: 10px;
+    }
+    .version {
+      display: inline-block;
+      font-size: 12px;
+      color: #fff;
+      background: #4FADFD;
+      padding: 2px;
+      border-radius: 10px;
+    }
+  }
 }
 .admin-title:hover {
   cursor: pointer;
 }
-.version {
-  color: #999;
-  position: absolute;
-  bottom: 10px;
-  font-size: 16px;
-  margin-left: 10px;
-}
 </style>