diff --git a/README.md b/README.md index 7739bd85..7fa7b036 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ ## 简介     AJ-Report是全开源的一个BI平台，酷炫大屏展示，能随时随地掌控业务动态，让每个决策都有数据支撑。
-    多数据源支持，内置mysql、elasticsearch、kudu驱动，支持自定义数据集省去数据接口开发，支持17+种大屏组件，不会开发，照着设计稿也可以制作大屏。
+    多数据源支持，内置mysql、elasticsearch、kudu驱动，支持自定义数据集省去数据接口开发，目前已支持20种大屏组件/图表，不会开发，照着设计稿也可以制作大屏。
    三步轻松完成大屏设计：配置数据源---->写SQL配置数据集---->拖拽配置大屏---->保存发布。欢迎体验。 ## 在线体验 @@ -65,8 +65,8 @@ ### 依赖 -- [Mysql] 5.7+ -- [Jdk] 1.8+ +- [Mysql] 5.7 +- [Jdk] 1.8 ### 后端 @@ -93,9 +93,9 @@ 在Linux上先准备好maven、node.js、jdk -- [Apache Maven] 3.5 +
-- [Node.js] v14.16.0+
-- [Jdk] 1.8+ +- [Apache Maven] 3.5
+- [Node.js] v14.16.0
+- [Jdk] 1.8 ``` git clone https://gitee.com/anji-plus/report.git @@ -113,6 +113,8 @@ bin/start.bat Windows修改第4行的JAVA_HOME后(去掉rem注释)，双击启 http://serverip:9095 ``` +**开发环境参考文档：**
+https://report.anji-plus.com/report-doc/guide/quicklyDevelop.html
**源码编译部署参考文档：**
https://report.anji-plus.com/report-doc/guide/quicklySource.html
**发行版部署参考文档：**
@@ -143,6 +145,7 @@ sql文件的目录在：report-core --> src --> main --> resources -- > db.migra
+ ## 未来计划 - 增加装饰图、省市区地图等图 @@ -151,6 +154,7 @@ sql文件的目录在：report-core --> src --> main --> resources -- > db.migra - http数据源调整 - 大屏工具栏使用二级菜单显示 - Execl报表功能增加与bug修复 +- 使用vue3 + ts ## 已知问题 @@ -165,9 +169,6 @@ sql文件的目录在：report-core --> src --> main --> resources -- > db.migra - Jdk 11 - Mysql 8.0（8.0.23/26版本没有问题，8.0.21版本存在问题） -AJ-Report 使用Druid，版本为1.2.6，如果你觉得你配置都是正常但是数据源测试不过，请尝试修改pom文件降低Druid版本。
-例如：MSSQLSERVER 2014，请将Druid版本降低为1.2.1以下（需要修改源码）。
- 常见问题：https://report.anji-plus.com/report-doc/guide/question.html
## 商业授权 @@ -191,6 +192,5 @@ AJ-Report使用[Apache2.0开源协议](http://www.apache.org/licenses/LICENSE-2. 个人企业微信：
- #### 开源不易，劳烦各位star ☺ diff --git a/doc/docs/guide/README.md b/doc/docs/guide/README.md index ec76fde6..a439081f 100644 --- a/doc/docs/guide/README.md +++ b/doc/docs/guide/README.md @@ -1,31 +1,41 @@ -    AJ-Report是一个完全开源的BI平台，酷炫大屏展示，能随时随地掌控业务动态，让每个决策都有数据支撑。
-    多数据源支持，内置mysql、elasticsearch、kudu等多种驱动，支持自定义数据集省去数据接口开发，支持17+种大屏组件，不会开发，照着设计稿也可以制作大屏。
-    三步轻松完成大屏设计：配置数据源---->写SQL配置数据集---->拖拽配置大屏---->保存发布。欢迎体验。 +    AJ-Report是一个完全开源的BI平台，酷炫大屏展示，能随时随地掌控业务动态，让每个决策都有数据支撑。
+    多数据源支持，内置mysql、elasticsearch、kudu等多种驱动，支持自定义数据集省去数据接口开发，目前已支持20种大屏组件/图表，不会开发，照着设计稿也可以制作大屏。
+    三步轻松完成大屏设计：配置数据源---->写SQL配置数据集---->拖拽配置大屏---->保存发布。欢迎体验。 ## 系统特性 + 1. 最新最稳定的技术栈； 2. 支持多数据源配置 3. 丰富的大屏组件。拖拽配置实现动态大屏 ## 在线体验 -####   电脑在线体验: [https://report.anji-plus.com/index.html](https://report.anji-plus.com/index.html "链接")  体验账号：guest 密码：guest -####   在线文档: [https://report.anji-plus.com/report-doc/](https://report.anji-plus.com/report-doc/ "doc")
-####   在线提问: [https://gitee.com/anji-plus/report/issues](https://gitee.com/anji-plus/report/issues "issue")
+ +####   电脑在线体验: [https://report.anji-plus.com/index.html](https://report.anji-plus.com/index.html "链接")  体验账号：guest 密码：guest + +####   在线文档: [https://report.anji-plus.com/report-doc/](https://report.anji-plus.com/report-doc/ "doc")
+ +####   在线提问: [https://gitee.com/anji-plus/report/issues](https://gitee.com/anji-plus/report/issues "issue")
## 发行版本 -####   下载链接：[https://gitee.com/anji-plus/report/releases](https://gitee.com/anji-plus/report/releases "下载链接")
+ +####   下载链接：[https://gitee.com/anji-plus/report/releases](https://gitee.com/anji-plus/report/releases "下载链接")
## 功能概述 -####   组件介绍 -   大屏设计（AJ-Report）是一个可视化拖拽编辑的，直观，酷炫，具有科技感的图表工具全开源项目。 -内置的基础功能包括数据源，数据集，报表管理，项目部分截图如下。
+ +####   组件介绍 + +   大屏设计（AJ-Report）是一个可视化拖拽编辑的，直观，酷炫，具有科技感的图表工具全开源项目。 内置的基础功能包括数据源，数据集，报表管理，项目部分截图如下。
**在线案例还在努力创造中，敬请期待！！！** ![操作](../picture/shipin.gif) +![更多案例](https://report.anji-plus.com/report-doc/static/Rhea.mp4)
+ ## 数据流程图 + ![流程.png](../picture/liucheng.png) ## 打包目录 + ``` ├── bin 启动命令脚本 │ ├── restart.sh @@ -40,6 +50,7 @@ ``` ## 系统目录 + ``` ├── doc 文档源码 │ ├── docs diff --git a/doc/docs/guide/briefUsing.md b/doc/docs/guide/briefUsing.md index 8c2d938e..53be87e1 100644 --- a/doc/docs/guide/briefUsing.md +++ b/doc/docs/guide/briefUsing.md @@ -4,4 +4,5 @@ + diff --git a/doc/docs/guide/dataset.md b/doc/docs/guide/dataset.md index 8e9cba2e..76b37d2e 100644 --- a/doc/docs/guide/dataset.md +++ b/doc/docs/guide/dataset.md @@ -1,11 +1,43 @@ -## Mysql数据集 -在数据源处添加了mysql的数据源后，即可使用。 -![img_1.png](../picture/dateset/img_1.png) -**注**：目前，查询参数和数据转化功能待补全中，建议等完善了再使用。 +![img5](../picture/dateset/img_5.png) -## ES数据集 -**注**：es是通过调用xpack-sql，注意写法 -![es.png](../picture/dateset/img.png) +## SQL数据集 -## Kudu数据集 -![kudu.png](../picture/dateset/img_2.png) \ No newline at end of file +### Mysql数据集 + +在数据源处添加了mysql的数据源后，即可使用。
+![img_1.png](../picture/dateset/img_1.png)
+ +### ES数据集 + +**注**：es是通过调用xpack-sql，注意写法
+![es.png](../picture/dateset/img.png)
+ +### Kudu数据集 + +![kudu.png](../picture/dateset/img_2.png)
+ +## 功能栏 + +**可以看在线环境，有示例参考**
+ +### 查询参数 + +![img3](../picture/dateset/img_3.png)
+注意参数名要和sql(请求体)中变量名保持一致，sql(请求体)中的变量用 ${} 表示
+高级规则是用js进行数据装换。 + +### 数据转换 + +#### js脚本 + +**注**：这里的JS是java的scriptengine执行的，很多es6的语法不支持
+![img4](../picture/dateset/img_4.png)
+入参是data，返回值也必须是data，中间是JS的处理过程，注意入参返回都是List，记得保存。
+ +#### 字典项 + +场景有限，待补充。 + +## HTTP数据集 + +即原有http数据源的功能，原有http数据源不动 \ No newline at end of file diff --git a/doc/docs/guide/question.md b/doc/docs/guide/question.md index ed248ab6..4645e2fa 100644 --- a/doc/docs/guide/question.md +++ b/doc/docs/guide/question.md @@ -29,7 +29,6 @@ - 数据源数据集用法总结
[链接](https://my.oschina.net/u/4517014/blog/5270828)
- **注**：http数据源未来会挪到数据集那边
### 执行源码编译脚本（build.sh）报错 @@ -48,6 +47,14 @@ - 使用IDEA进行源码编译时提示：“*** openjdk-***”
请使用jdk1.8 +### 启动服务报错 + +- 提示“xxx The driver has not received any packets from the server”
+ 连不上mysql。
+ 1、确保软件打包正常
+ 2、mysql版本不兼容，详细看上面关于版本兼容性
+ 3、bootstrap.yml中配置的mysql地址ip不对
+ diff --git a/doc/docs/guide/quicklySeparate.md b/doc/docs/guide/quicklySeparate.md index cd12fa79..5a8d85be 100644 --- a/doc/docs/guide/quicklySeparate.md +++ b/doc/docs/guide/quicklySeparate.md @@ -20,11 +20,11 @@ npm run build ### 编译环境 -- [Apache Maven] 3.5 +
-- [Node.js] v14.16.0+
+- [Apache Maven] 3.5
+- [Node.js] v14.16.0
- [Jdk] 1.8
请在你的Windows上先准备好maven、node.js、jdk
- **注**：已知**Jdk11**存在兼容性问题，请不要使用openJdk，环境问题请看**常见问题**大类
+ **注**：已知**Jdk11**存在兼容性问题，请不要使用openJdk，环境问题请看 **常见问题** 大类
### 克隆源码 diff --git a/doc/docs/guide/quicklySource.md b/doc/docs/guide/quicklySource.md index 8a0da0cf..3fe07052 100644 --- a/doc/docs/guide/quicklySource.md +++ b/doc/docs/guide/quicklySource.md @@ -17,10 +17,10 @@ http://serverip:9095 请在Linux上先准备好maven、node.js、jdk -- [Apache Maven] 3.5 +
-- [Node.js] v14.16.0 +
+- [Apache Maven] 3.5
+- [Node.js] v14.16.0
- [Jdk] 1.8
- **注**：已知**Jdk11**存在兼容性问题，请不要使用openJdk，环境问题请看**常见问题**大类
+ **注**：已知**Jdk11**存在兼容性问题，请不要使用openJdk，环境问题请看 **常见问题** 大类
## 克隆源码 diff --git a/doc/docs/picture/dateset/img_3.png b/doc/docs/picture/dateset/img_3.png new file mode 100644 index 00000000..ebced469 Binary files /dev/null and b/doc/docs/picture/dateset/img_3.png differ diff --git a/doc/docs/picture/dateset/img_4.png b/doc/docs/picture/dateset/img_4.png new file mode 100644 index 00000000..e00b2cb5 Binary files /dev/null and b/doc/docs/picture/dateset/img_4.png differ diff --git a/doc/docs/picture/dateset/img_5.png b/doc/docs/picture/dateset/img_5.png new file mode 100644 index 00000000..33f84f20 Binary files /dev/null and b/doc/docs/picture/dateset/img_5.png differ diff --git a/report-core/pom.xml b/report-core/pom.xml index 69abc8c3..c54d40ac 100644 --- a/report-core/pom.xml +++ b/report-core/pom.xml @@ -79,7 +79,7 @@ com.alibaba druid - 1.2.6 + 1.2.0 org.flywaydb diff --git a/report-core/src/main/java/com/anjiplus/template/gaea/business/enums/SetTypeEnum.java b/report-core/src/main/java/com/anjiplus/template/gaea/business/enums/SetTypeEnum.java new file mode 100644 index 00000000..a0242f37 --- /dev/null +++ b/report-core/src/main/java/com/anjiplus/template/gaea/business/enums/SetTypeEnum.java @@ -0,0 +1,56 @@ +package com.anjiplus.template.gaea.business.enums; + +public enum SetTypeEnum { + SQL("sql", "sql"), + HTTP("http", "http"), + ; + + private String codeValue; + private String codeDesc; + + private SetTypeEnum(String codeValue, String codeDesc) { + this.codeValue = codeValue; + this.codeDesc = codeDesc; + } + + public String getCodeValue() { + return this.codeValue; + } + + public String getCodeDesc() { + return this.codeDesc; + } + + //根据codeValue获取枚举 + public static SetTypeEnum parseFromCodeValue(String codeValue) { + for (SetTypeEnum e : SetTypeEnum.values()) { + if (e.codeValue == codeValue) { + return e; + } + } + return null; + } + + //根据codeValue获取描述 + public static String getCodeDescByCodeBalue(String codeValue) { + SetTypeEnum enumItem = parseFromCodeValue(codeValue); + return enumItem == null ? "" : enumItem.getCodeDesc(); + } + + //验证codeValue是否有效 + public static boolean validateCodeValue(String codeValue) { + return parseFromCodeValue(codeValue) != null; + } + + //列出所有值字符串 + public static String getString() { + StringBuffer buffer = new StringBuffer(); + for (SetTypeEnum e : SetTypeEnum.values()) { + buffer.append(e.codeValue).append("--").append(e.getCodeDesc()).append(", "); + } + buffer.deleteCharAt(buffer.lastIndexOf(",")); + return buffer.toString().trim(); + } + + +} diff --git a/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dataset/controller/dto/DataSetDto.java b/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dataset/controller/dto/DataSetDto.java index c0722be1..2647a91f 100644 --- a/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dataset/controller/dto/DataSetDto.java +++ b/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dataset/controller/dto/DataSetDto.java @@ -29,6 +29,10 @@ public class DataSetDto extends GaeaBaseDTO implements Serializable { /** 数据集描述 */ private String setDesc; + /** 数据集类型 */ + private String setType; + + /** 数据源编码 */ private String sourceCode; diff --git a/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dataset/controller/param/DataSetParam.java b/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dataset/controller/param/DataSetParam.java index 0cdca5c5..9730302e 100644 --- a/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dataset/controller/param/DataSetParam.java +++ b/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dataset/controller/param/DataSetParam.java @@ -27,4 +27,8 @@ public class DataSetParam extends PageParam implements Serializable{ /** 数据源编码 */ @Query(QueryEnum.EQ) private String sourceCode; + + /** 数据集类型 */ + @Query(QueryEnum.EQ) + private String setType; } diff --git a/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dataset/controller/param/DataSetTestTransformParam.java b/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dataset/controller/param/DataSetTestTransformParam.java index 0bf50f18..8b131817 100644 --- a/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dataset/controller/param/DataSetTestTransformParam.java +++ b/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dataset/controller/param/DataSetTestTransformParam.java @@ -19,12 +19,14 @@ import java.util.List; public class DataSetTestTransformParam implements Serializable{ /** 数据源编码 */ - @NotBlank(message = "sourceCode not empty") private String sourceCode; /** 动态查询sql或者接口中的请求体 */ private String dynSentence; + /** 数据集类型 */ + private String setType; + /** 请求参数集合 */ private List dataSetParamDtoList; diff --git a/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dataset/dao/entity/DataSet.java b/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dataset/dao/entity/DataSet.java index dfebbb07..d9313b51 100644 --- a/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dataset/dao/entity/DataSet.java +++ b/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dataset/dao/entity/DataSet.java @@ -26,6 +26,9 @@ public class DataSet extends GaeaBaseEntity { @ApiModelProperty(value = "数据集描述") private String setDesc; + @ApiModelProperty(value = "数据集类型") + private String setType; + @ApiModelProperty(value = "数据源编码") private String sourceCode; diff --git a/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dataset/service/impl/DataSetServiceImpl.java b/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dataset/service/impl/DataSetServiceImpl.java index d6ef6248..216b3228 100644 --- a/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dataset/service/impl/DataSetServiceImpl.java +++ b/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dataset/service/impl/DataSetServiceImpl.java @@ -8,6 +8,7 @@ import com.anji.plus.gaea.curd.mapper.GaeaBaseMapper; import com.anji.plus.gaea.exception.BusinessExceptionBuilder; import com.anji.plus.gaea.utils.GaeaBeanUtils; import com.anjiplus.template.gaea.business.code.ResponseCode; +import com.anjiplus.template.gaea.business.enums.SetTypeEnum; import com.anjiplus.template.gaea.business.modules.dataset.controller.dto.OriginalDataDto; import com.anjiplus.template.gaea.business.modules.dataset.controller.dto.DataSetDto; import com.anjiplus.template.gaea.business.modules.dataset.dao.DataSetMapper; @@ -22,6 +23,7 @@ import com.anjiplus.template.gaea.business.modules.datasettransform.service.Data import com.anjiplus.template.gaea.business.modules.datasource.controller.dto.DataSourceDto; import com.anjiplus.template.gaea.business.modules.datasource.dao.entity.DataSource; import com.anjiplus.template.gaea.business.modules.datasource.service.DataSourceService; +import com.anjiplus.template.gaea.business.util.JdbcConstants; import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper; import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.baomidou.mybatisplus.core.toolkit.Wrappers; @@ -218,12 +220,31 @@ public class DataSetServiceImpl implements DataSetService { */ @Override public OriginalDataDto getData(DataSetDto dto) { + OriginalDataDto originalDataDto = new OriginalDataDto(); String setCode = dto.getSetCode(); //1.获取数据集、参数替换、数据转换 DataSetDto dataSetDto = detailSet(setCode); + String dynSentence = dataSetDto.getDynSentence(); //2.获取数据源 - DataSource dataSource = dataSourceService.selectOne("source_code", dataSetDto.getSourceCode()); + DataSource dataSource; + if (StringUtils.isNotBlank(dataSetDto.getSetType()) + && dataSetDto.getSetType().equals(SetTypeEnum.HTTP.getCodeValue())) { + //http不需要数据源，兼容已有的逻辑，将http所需要的数据塞进DataSource + dataSource = new DataSource(); + dataSource.setSourceConfig(dynSentence); + dataSource.setSourceType(JdbcConstants.HTTP); + String body = JSONObject.parseObject(dynSentence).getString("body"); + if (StringUtils.isNotBlank(body)) { + dynSentence = body; + }else { + dynSentence = "{}"; + } + + }else { + dataSource = dataSourceService.selectOne("source_code", dataSetDto.getSourceCode()); + } + //3.参数替换 //3.1参数校验 log.debug("参数校验替换前：{}", dto.getContextData()); @@ -231,7 +252,7 @@ public class DataSetServiceImpl implements DataSetService { if (!verification) { throw BusinessExceptionBuilder.build(ResponseCode.RULE_FIELDS_CHECK_ERROR); } - String dynSentence = dataSetParamService.transform(dto.getContextData(), dataSetDto.getDynSentence()); + dynSentence = dataSetParamService.transform(dto.getContextData(), dynSentence); log.debug("参数校验替换后：{}", dto.getContextData()); //4.获取数据 DataSourceDto dataSourceDto = new DataSourceDto(); @@ -258,10 +279,28 @@ public class DataSetServiceImpl implements DataSetService { */ @Override public OriginalDataDto testTransform(DataSetDto dto) { + String dynSentence = dto.getDynSentence(); + OriginalDataDto originalDataDto = new OriginalDataDto(); String sourceCode = dto.getSourceCode(); //1.获取数据源 - DataSource dataSource = dataSourceService.selectOne("source_code", sourceCode); + DataSource dataSource; + if (dto.getSetType().equals(SetTypeEnum.HTTP.getCodeValue())) { + //http不需要数据源，兼容已有的逻辑，将http所需要的数据塞进DataSource + dataSource = new DataSource(); + dataSource.setSourceConfig(dynSentence); + dataSource.setSourceType(JdbcConstants.HTTP); + String body = JSONObject.parseObject(dynSentence).getString("body"); + if (StringUtils.isNotBlank(body)) { + dynSentence = body; + }else { + dynSentence = "{}"; + } + + }else { + dataSource = dataSourceService.selectOne("source_code", sourceCode); + } + //3.参数替换 //3.1参数校验 boolean verification = dataSetParamService.verification(dto.getDataSetParamDtoList(), null); @@ -269,7 +308,7 @@ public class DataSetServiceImpl implements DataSetService { throw BusinessExceptionBuilder.build(ResponseCode.RULE_FIELDS_CHECK_ERROR); } - String dynSentence = dataSetParamService.transform(dto.getDataSetParamDtoList(), dto.getDynSentence()); + dynSentence = dataSetParamService.transform(dto.getDataSetParamDtoList(), dynSentence); //4.获取数据 DataSourceDto dataSourceDto = new DataSourceDto(); BeanUtils.copyProperties(dataSource, dataSourceDto); diff --git a/report-core/src/main/resources/bootstrap.yml b/report-core/src/main/resources/bootstrap.yml index 639edde1..b694ce45 100644 --- a/report-core/src/main/resources/bootstrap.yml +++ b/report-core/src/main/resources/bootstrap.yml @@ -66,7 +66,7 @@ logging: customer: # 开发测试用本地文件，如果是生产，请考虑使用对象存储 file: - #上传对应本地全路径 + #上传对应本地全路径，路径必须是真实存在的 dist-path: /app/disk/upload/ white-list: .png|.jpg|.gif|.icon|.pdf|.xlsx|.xls|.csv|.mp4|.avi excelSuffix: .xlsx|.xls|.csv diff --git a/report-core/src/main/resources/db/migration/V1.0.13__update_set.sql b/report-core/src/main/resources/db/migration/V1.0.13__update_set.sql new file mode 100644 index 00000000..37f591bb --- /dev/null +++ b/report-core/src/main/resources/db/migration/V1.0.13__update_set.sql @@ -0,0 +1,14 @@ +use +aj_report; + +-- 增加字段 +ALTER TABLE `gaea_report_data_set` DROP COLUMN `set_type`; +-- 将该字段值全更新为sql +update gaea_report_data_set set set_type = 'sql'; + +-- 字典 +INSERT INTO `gaea_dict`(`id`, `dict_name`, `dict_code`, `remark`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES (default, '数据集类型', 'SET_TYPE', '数据集类型', 'admin', '2021-11-16 14:43:12', 'admin', '2021-11-16 14:43:12', 1); +INSERT INTO `gaea_dict_item`(`id`, `dict_code`, `item_name`, `item_value`, `item_extend`, `enabled`, `locale`, `remark`, `sort`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES (default , 'SET_TYPE', 'sql', 'sql', NULL, 1, 'zh', NULL, NULL, 'admin', '2021-11-16 14:43:42', 'admin', '2021-11-16 14:43:42', 1); +INSERT INTO `gaea_dict_item`(`id`, `dict_code`, `item_name`, `item_value`, `item_extend`, `enabled`, `locale`, `remark`, `sort`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES (default , 'SET_TYPE', 'http', 'http', NULL, 1, 'zh', NULL, NULL, 'admin', '2021-11-16 14:43:51', 'admin', '2021-11-16 14:43:51', 1); + + diff --git a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-barchart.js b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-barchart.js index b324631b..076423ea 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-barchart.js +++ b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-barchart.js @@ -7,656 +7,662 @@ * @LastEditTime: 2021-09-28 14:08:29 */ export const widgetBarchart = { - code: 'widget-barchart', - type: 'chart', - label: '柱形图', - icon: 'iconzhuzhuangtu', - options: { - // 配置 - setup: [ + code: 'widget-barchart', + type: 'chart', + label: '柱形图', + icon: 'iconzhuzhuangtu', + options: { + // 配置 + setup: [ + { + type: 'el-input-text', + label: '图层名称', + name: 'layerName', + required: false, + placeholder: '', + value: '柱状图', + }, + { + type: 'el-switch', + label: '竖展示', + name: 'verticalShow', + required: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '背景颜色', + name: 'background', + required: false, + placeholder: '', + value: '' + }, + [ { - type: 'el-input-text', - label: '图层名称', - name: 'layerName', - required: false, - placeholder: '', - value: '柱状图', - }, - { - type: 'el-switch', - label: '竖展示', - name: 'verticalShow', - required: false, - placeholder: '', - value: false, - }, - { - type: 'vue-color', - label: '背景颜色', - name: 'background', - required: false, - placeholder: '', - value: '' + name: '柱体设置', + list: [ + { + type: 'el-slider', + label: '最大宽度', + name: 'maxWidth', + required: false, + placeholder: '', + value: 10, + }, + { + type: 'el-slider', + label: '圆角', + name: 'radius', + require: false, + placeholder: '', + value: 5, + }, + { + type: 'el-slider', + label: '最小高度', + name: 'minHeight', + require: false, + placeholder: '', + value: 0, + }, + ], }, - [ - { - name: '柱体设置', - list: [ - { - type: 'el-slider', - label: '最大宽度', - name: 'maxWidth', - required: false, - placeholder: '', - value: 10, - }, - { - type: 'el-slider', - label: '圆角', - name: 'radius', - require: false, - placeholder: '', - value: 5, - }, - { - type: 'el-slider', - label: '最小高度', - name: 'minHeight', - require: false, - placeholder: '', - value: 0, - }, - ], - }, - { - 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: '#FFD700' - }, - { - 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: 'center' - }, - { - type: 'el-input-text', - label: '副标题', - name: 'subText', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'subTextColor', - required: false, - placeholder: '', - value: 'rgba(30, 144, 255, 1)' - }, - { - type: 'el-input-text', - 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: 20 - }, - ], - }, - { - name: 'X轴设置', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'hideX', - required: false, - placeholder: '', - value: true, - }, - { - type: 'el-input-text', - label: '坐标名', - name: 'xName', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '坐标名颜色', - name: 'nameColorX', - required: false, - placeholder: '', - value: '#fff' - }, - { - type: 'el-input-number', - label: '坐标字号', - name: 'nameFontSizeX', - required: false, - placeholder: '', - value: 14 - }, - { - type: 'vue-color', - label: '数值颜色', - name: 'Xcolor', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '数值字号', - name: 'fontSizeX', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'el-slider', - label: '数值角度', - name: 'textAngle', - required: false, - placeholder: '', - value: 0 - }, - { - type: 'el-input-number', - label: '数值间隔', - name: 'textInterval', - required: false, - placeholder: '', - value: '' - }, - { - type: 'el-switch', - label: '轴反转', - name: 'reversalX', - required: false, - placeholder: '', - value: false - }, - { - type: 'vue-color', - label: '轴颜色', - name: 'lineColorX', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-switch', - label: '分割线显示', - name: 'isShowSplitLineX', - require: false, - placeholder: '', - value: false, - }, - { - type: 'vue-color', - label: '分割线颜色', - name: 'splitLineColorX', - required: false, - placeholder: '', - value: '#fff', - - } - ], - }, - { - name: 'Y轴设置', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'isShowY', - require: false, - placeholder: '', - value: true, - }, - { - type: 'el-input-text', - label: '坐标名', - name: 'textNameY', - require: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '坐标名颜色', - name: 'nameColorY', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '坐标字号', - name: 'nameFontSizeY', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'vue-color', - label: '数值颜色', - name: 'colorY', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '数值字号', - name: 'fontSizeY', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'el-slider', - label: '数值角度', - name: 'ytextAngle', - required: false, - placeholder: '', - value: 0 - }, - { - type: 'el-switch', - label: '缩放', - name: 'scale', - require: false, - placeholder: '', - value: false, - }, - { - type: 'el-input-number', - label: '均分', - name: 'splitNumber', - required: false, - placeholder: '', - value: '' - }, - { - type: 'el-switch', - label: '轴反转', - name: 'reversalY', - required: false, - placeholder: '', - value: false - }, - { - type: 'vue-color', - label: '轴颜色', - name: 'lineColorY', - required: false, - placeholder: '', - value: '#fff', - }, { - type: 'el-switch', - label: '分割线显示', - name: 'isShowSplitLineY', - require: false, - placeholder: '', - value: false, - }, { - type: 'vue-color', - label: '分割线颜色', - name: 'splitLineColorY', - required: false, - placeholder: '', - value: '#fff', - - } - ], - }, - { - name: '数值设定', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'isShow', - required: false, - placeholder: '', - value: true - }, - { - type: 'el-input-number', - label: '距离', - name: 'distance', - required: false, - placeholder: '', - value: 5 - }, - { - type: 'el-input-number', - label: '字体字号', - name: 'fontSize', - required: false, - placeholder: '', - value: 14 - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'subTextColor', - required: false, - placeholder: '', - value: '#fff' - }, - { - type: 'el-select', - label: '字体粗细', - name: 'fontWeight', - required: false, - placeholder: '', - selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} - ], - value: 'normal' - }, - ], - }, - { - name: '提示语设置', - list: [ - { - type: 'el-input-number', - label: '字体字号', - name: 'tipFontSize', - required: false, - placeholder: '', - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'lineColor', - required: false, - placeholder: '', - }, - ], - }, - { - name: '坐标轴边距设置', - list: [ - { - type: 'el-slider', - label: '左边距(像素)', - name: 'marginLeft', - required: false, - placeholder: '', - value: 10, - }, { - type: 'el-slider', - label: '顶边距(像素)', - name: 'marginTop', - required: false, - placeholder: '', - value: 50, - }, { - type: 'el-slider', - label: '右边距(像素)', - name: 'marginRight', - required: false, - placeholder: '', - value: 40, - }, { - type: 'el-slider', - label: '底边距(像素)', - name: 'marginBottom', - required: false, - placeholder: '', - value: 10, - }, - ], - }, - { - name: '图例操作', - list: [ - { - type: 'el-switch', - label: '图例', - name: 'isShowLegend', - required: false, - placeholder: '', - value: true, - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'lengedColor', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '字体字号', - name: 'lengedFontSize', - required: false, - placeholder: '', - value: 16, - }, - { - type: 'el-input-number', - label: '图例宽度', - name: 'lengedWidth', - required: false, - placeholder: '', - value: 15, - }, - { - type: 'el-select', - label: '横向位置', - name: 'lateralPosition', - required: false, - placeholder: '', - selectOptions: [ - {code: 'left', name: '左对齐'}, - {code: 'right', name: '右对齐'}, - ], - value: '' - }, - { - type: 'el-select', - label: '纵向位置', - name: 'longitudinalPosition', - required: false, - placeholder: '', - selectOptions: [ - {code: 'top', name: '顶部'}, - {code: 'bottom', name: '底部'}, - ], - value: '' - }, - { - type: 'el-select', - label: '布局前置', - name: 'layoutFront', - required: false, - placeholder: '', - selectOptions: [ - {code: 'vertical', name: '竖排'}, - {code: 'horizontal', name: '横排'}, - ], - value: '' - }, - ], - }, - { - name: '自定义配色', - list: [ - { - type: 'customColor', - label: '', - name: 'customColor', - required: false, - value: [{color: '#ff7f50'}, {color: '#87cefa'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}], - }, - ], - }, - ], - ], - // 数据 - data: [ { - type: 'el-radio-group', - label: '数据类型', - name: 'dataType', - require: false, - placeholder: '', - selectValue: true, - selectOptions: [ + name: '标题设置', + list: [ + { + type: 'el-switch', + label: '标题', + name: 'isNoTitle', + required: false, + placeholder: '', + value: true, + }, { - code: 'staticData', - name: '静态数据', + type: 'el-input-text', + label: '标题', + name: 'titleText', + required: false, + placeholder: '', + value: '', }, { - code: 'dynamicData', - name: '动态数据', + type: 'vue-color', + label: '字体颜色', + name: 'textColor', + required: false, + placeholder: '', + value: '#FFD700' + }, + { + 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: 'center' + }, + { + type: 'el-input-text', + label: '副标题', + name: 'subText', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'subTextColor', + required: false, + placeholder: '', + value: 'rgba(30, 144, 255, 1)' + }, + { + 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: 20 }, ], - value: 'staticData', }, { - type: 'el-input-number', - label: '刷新时间(毫秒)', - name: 'refreshTime', - relactiveDom: 'dataType', - relactiveDomValue: 'dynamicData', - value: 5000 + name: 'X轴设置', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'hideX', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '坐标名', + name: 'xName', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '坐标名颜色', + name: 'nameColorX', + required: false, + placeholder: '', + value: '#fff' + }, + { + type: 'el-input-number', + label: '坐标字号', + name: 'nameFontSizeX', + required: false, + placeholder: '', + value: 14 + }, + { + type: 'vue-color', + label: '数值颜色', + name: 'Xcolor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '数值字号', + name: 'fontSizeX', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngle', + required: false, + placeholder: '', + value: 0 + }, + { + type: 'el-input-number', + label: '数值间隔', + name: 'textInterval', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-switch', + label: '轴反转', + name: 'reversalX', + required: false, + placeholder: '', + value: false + }, + { + type: 'vue-color', + label: '轴颜色', + name: 'lineColorX', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineX', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorX', + required: false, + placeholder: '', + value: '#fff', + + } + ], }, { - type: 'el-button', - label: '静态数据', - name: 'staticData', - required: false, - placeholder: '', - relactiveDom: 'dataType', - relactiveDomValue: 'staticData', - value: {"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1000,2229,3879,2379,4079]}]}, + name: 'Y轴设置', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShowY', + require: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '坐标名', + name: 'textNameY', + require: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '坐标名颜色', + name: 'nameColorY', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '坐标字号', + name: 'nameFontSizeY', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'vue-color', + label: '数值颜色', + name: 'colorY', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '数值字号', + name: 'fontSizeY', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-slider', + label: '数值角度', + name: 'ytextAngle', + required: false, + placeholder: '', + value: 0 + }, + { + type: 'el-switch', + label: '缩放', + name: 'scale', + require: false, + placeholder: '', + value: false, + }, + { + type: 'el-input-number', + label: '均分', + name: 'splitNumber', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-switch', + label: '轴反转', + name: 'reversalY', + required: false, + placeholder: '', + value: false + }, + { + type: 'vue-color', + label: '轴颜色', + name: 'lineColorY', + required: false, + placeholder: '', + value: '#fff', + }, { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineY', + require: false, + placeholder: '', + value: false, + }, { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorY', + required: false, + placeholder: '', + value: '#fff', + + } + ], }, { - type: 'dycustComponents', - label: '', - name: 'dynamicData', - required: false, - placeholder: '', - relactiveDom: 'dataType', - relactiveDomValue: 'dynamicData', - chartType: 'widget-barchart', - dictKey: 'BAR_PROPERTIES', - value: '', + name: '数值设定', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShow', + required: false, + placeholder: '', + value: true + }, + { + type: 'el-input-number', + label: '距离', + name: 'distance', + required: false, + placeholder: '', + value: 5 + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'fontSize', + required: false, + placeholder: '', + value: 14 + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'subTextColor', + required: false, + placeholder: '', + value: '#fff' + }, + { + type: 'el-select', + label: '字体粗细', + name: 'fontWeight', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + ], }, - ], - // 坐标 - position: [ { - type: 'el-input-number', - label: '左边距', - name: 'left', - required: false, - placeholder: '', - value: 0, + name: '提示语设置', + list: [ + { + type: 'el-input-number', + label: '字体字号', + name: 'tipFontSize', + required: false, + placeholder: '', + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'lineColor', + required: false, + placeholder: '', + }, + ], }, { - type: 'el-input-number', - label: '上边距', - name: 'top', - required: false, - placeholder: '', - value: 0, + name: '坐标轴边距设置', + list: [ + { + type: 'el-slider', + label: '左边距(像素)', + name: 'marginLeft', + required: false, + placeholder: '', + value: 10, + }, { + type: 'el-slider', + label: '顶边距(像素)', + name: 'marginTop', + required: false, + placeholder: '', + value: 50, + }, { + type: 'el-slider', + label: '右边距(像素)', + name: 'marginRight', + required: false, + placeholder: '', + value: 40, + }, { + type: 'el-slider', + label: '底边距(像素)', + name: 'marginBottom', + required: false, + placeholder: '', + value: 10, + }, + ], }, { - type: 'el-input-number', - label: '宽度', - name: 'width', - required: false, - placeholder: '该容器在1920px大屏中的宽度', - value: 400, + name: '图例操作', + list: [ + { + type: 'el-switch', + label: '图例', + name: 'isShowLegend', + required: false, + placeholder: '', + value: true, + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'lengedColor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'lengedFontSize', + required: false, + placeholder: '', + value: 16, + }, + { + type: 'el-input-number', + label: '图例宽度', + name: 'lengedWidth', + required: false, + placeholder: '', + value: 15, + }, + { + type: 'el-select', + label: '横向位置', + name: 'lateralPosition', + required: false, + placeholder: '', + selectOptions: [ + {code: 'left', name: '左对齐'}, + {code: 'right', name: '右对齐'}, + ], + value: '' + }, + { + type: 'el-select', + label: '纵向位置', + name: 'longitudinalPosition', + required: false, + placeholder: '', + selectOptions: [ + {code: 'top', name: '顶部'}, + {code: 'bottom', name: '底部'}, + ], + value: '' + }, + { + type: 'el-select', + label: '布局前置', + name: 'layoutFront', + required: false, + placeholder: '', + selectOptions: [ + {code: 'vertical', name: '竖排'}, + {code: 'horizontal', name: '横排'}, + ], + value: '' + }, + ], }, { - type: 'el-input-number', - label: '高度', - name: 'height', - required: false, - placeholder: '该容器在1080px大屏中的高度', - value: 200, + name: '自定义配色', + list: [ + { + type: 'customColor', + label: '', + name: 'customColor', + required: false, + value: [{color: '#ff7f50'}, {color: '#87cefa'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}], + }, + ], }, ], - } + ], + // 数据 + 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: 5000 + }, + { + type: 'el-button', + label: '静态数据', + name: 'staticData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + relactiveDomValue: 'staticData', + value: [ + {"axis": "苹果", "data": 1000}, + {"axis": "三星", "data": 2229}, + {"axis": "小米", "data": 3879}, + {"axis": "oppo", "data": 2379}, + {"axis": "vivo", "data": 4079}, + ], + }, + { + type: 'dycustComponents', + label: '', + name: 'dynamicData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + relactiveDomValue: 'dynamicData', + chartType: 'widget-barchart', + dictKey: 'BAR_PROPERTIES', + 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: 400, + }, + { + type: 'el-input-number', + label: '高度', + name: 'height', + required: false, + placeholder: '该容器在1080px大屏中的高度', + value: 200, + }, + ], } +} diff --git a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-barlinechart.js b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-barlinechart.js index b2f5a922..d6b030e0 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-barlinechart.js +++ b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-barlinechart.js @@ -7,762 +7,701 @@ * @LastEditTime: 2021-09-28 14:11:57 */ export const widgetBarlinechart = { - code: 'widget-barlinechart', - type: 'chart', - label: '柱线图', - icon: 'iconzhuxiantu', - options: { - // 配置 - setup: [ + code: 'widget-barlinechart', + type: 'chart', + label: '柱线图', + icon: 'iconzhuxiantu', + options: { + // 配置 + setup: [ + { + type: 'el-input-text', + label: '图层名称', + name: 'layerName', + required: false, + placeholder: '', + value: '柱线图', + }, + { + type: 'vue-color', + label: '背景颜色', + name: 'background', + required: false, + placeholder: '', + value: '' + }, + [ { - type: 'el-input-text', - label: '图层名称', - name: 'layerName', - required: false, - placeholder: '', - value: '柱线图', + name: '折线设置', + list: [ + { + type: 'el-switch', + label: '标记点', + name: 'markPoint', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-slider', + label: '点大小', + name: 'pointSize', + required: false, + placeholder: '', + value: 5, + }, + { + type: 'el-switch', + label: '平滑曲线', + name: 'smoothCurve', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-switch', + label: '面积堆积', + name: 'area', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-slider', + label: '面积厚度', + name: 'areaThickness', + required: false, + placeholder: '', + value: 5, + }, + { + type: 'el-slider', + label: '线条宽度', + name: 'lineWidth', + required: false, + placeholder: '', + value: 3, + }, + ], }, { - type: 'vue-color', - label: '背景颜色', - name: 'background', - required: false, - placeholder: '', - value: '' + name: '柱体设置', + list: [ + { + type: 'el-slider', + label: '最大宽度', + name: 'maxWidth', + required: false, + placeholder: '', + value: 10, + }, + { + type: 'el-slider', + label: '圆角', + name: 'radius', + require: false, + placeholder: '', + value: 5, + }, + { + type: 'el-slider', + label: '最小高度', + name: 'minHeight', + require: false, + placeholder: '', + value: 0, + }, + ], }, - [ - { - name: '折线设置', - list: [ - { - type: 'el-switch', - label: '标记点', - name: 'markPoint', - required: false, - placeholder: '', - value: true, - }, - { - type: 'el-slider', - label: '点大小', - name: 'pointSize', - required: false, - placeholder: '', - value: 5, - }, - { - type: 'el-switch', - label: '平滑曲线', - name: 'smoothCurve', - required: false, - placeholder: '', - value: true, - }, - { - type: 'el-switch', - label: '面积堆积', - name: 'area', - required: false, - placeholder: '', - value: true, - }, - { - type: 'el-slider', - label: '面积厚度', - name: 'areaThickness', - required: false, - placeholder: '', - value: 5, - }, - { - type: 'el-slider', - label: '线条宽度', - name: 'lineWidth', - required: false, - placeholder: '', - value: 3, - }, - ], - }, - { - name: '柱体设置', - list: [ - { - type: 'el-slider', - label: '最大宽度', - name: 'maxWidth', - required: false, - placeholder: '', - value: 10, - }, - { - type: 'el-slider', - label: '圆角', - name: 'radius', - require: false, - placeholder: '', - value: 5, - }, - { - type: 'el-slider', - label: '最小高度', - name: 'minHeight', - require: false, - placeholder: '', - value: 0, - }, - ], - }, - { - 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: '#fff' - }, - { - 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: 20 - }, - ], - }, - { - name: 'X轴设置', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'hideX', - required: false, - placeholder: '', - value: true, - }, - { - type: 'el-input-text', - label: '坐标名', - name: 'xName', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '坐标名颜色', - name: 'nameColorX', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '坐标字号', - name: 'nameFontSizeX', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'vue-color', - label: '数值颜色', - name: 'Xcolor', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '数值字号', - name: 'fontSizeX', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'el-slider', - label: '数值角度', - name: 'textAngle', - required: false, - placeholder: '', - value: 0 - }, - { - type: 'el-input-number', - label: '数值间隔', - name: 'textInterval', - required: false, - placeholder: '', - value: '' - }, - { - type: 'el-switch', - label: '轴反转', - name: 'reversalX', - required: false, - placeholder: '', - value: false - }, - { - type: 'vue-color', - label: '轴颜色', - name: 'lineColorX', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-switch', - label: '分割线显示', - name: 'isShowSplitLineX', - require: false, - placeholder: '', - value: false, - }, - { - type: 'vue-color', - label: '分割线颜色', - name: 'splitLineColorX', - required: false, - placeholder: '', - value: '#fff', - } - ], - }, - { - name: 'Y轴设置', - list: [ - { - type: 'el-switch', - label: '左显示', - name: 'isShowYLeft', - require: false, - placeholder: '', - value: true, - }, - { - type: 'el-input-text', - label: '左坐标名', - name: 'textNameYLeft', - require: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '左坐标名颜色', - name: 'nameColorYLeft', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '左坐标字号', - name: 'namefontSizeYLeft', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'el-input-number', - label: '左均分', - name: 'splitNumberLeft', - required: false, - placeholder: '', - value: '' - }, - { - type: 'el-switch', - label: '右显示', - name: 'isShowYRight', - require: false, - placeholder: '', - value: true, - }, - { - type: 'el-input-text', - label: '右坐标名', - name: 'textNameYRight', - require: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '右坐标名颜色', - name: 'nameColorYRight', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '右坐标字号', - name: 'namefontSizeYRight', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'el-input-number', - label: '右均分', - name: 'splitNumberRight', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '数值颜色', - name: 'colorY', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '数值字号', - name: 'fontSizeY', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'el-switch', - label: '轴反转', - name: 'reversalY', - required: false, - placeholder: '', - value: false - }, - { - type: 'vue-color', - label: '轴颜色', - name: 'lineColorY', - required: false, - placeholder: '', - value: '#fff', - }, - ], - }, - { - name: '折线数值设定', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'isShowLine', - required: false, - placeholder: '', - value: false - }, - { - type: 'el-input-number', - label: '距离', - name: 'distanceLine', - required: false, - placeholder: '', - value: 5 - }, - { - type: 'el-input-number', - label: '字体字号', - name: 'fontSizeLine', - required: false, - placeholder: '', - value: 14 - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'subTextColorLine', - required: false, - placeholder: '', - value: '#fff' - }, - { - type: 'el-select', - label: '字体粗细', - name: 'fontWeightLine', - required: false, - placeholder: '', - selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} - ], - value: 'normal' - }, - ], - }, - { - name: '柱体数值设定', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'isShowBar', - required: false, - placeholder: '', - value: false - }, - { - type: 'el-input-number', - label: '距离', - name: 'distanceBar', - required: false, - placeholder: '', - value: 5 - }, - { - type: 'el-input-number', - label: '字体字号', - name: 'fontSizeBar', - required: false, - placeholder: '', - value: 14 - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'subTextColorBar', - required: false, - placeholder: '', - value: '#fff' - }, - { - type: 'el-select', - label: '字体粗细', - name: 'fontWeightBar', - required: false, - placeholder: '', - selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} - ], - value: 'normal' - }, - ], - }, - { - name: '提示语设置', - list: [ - { - type: 'el-input-number', - label: '字体大小', - name: 'tipFontSize', - required: false, - placeholder: '', - value: 12 - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'lineColor', - required: false, - placeholder: '', - value: '#e68b55' - }, - ], - }, - { - name: '坐标轴边距设置', - list: [ - { - type: 'el-slider', - label: '左边距(像素)', - name: 'marginLeft', - required: false, - placeholder: '', - value: 10, - }, { - type: 'el-slider', - label: '顶边距(像素)', - name: 'marginTop', - required: false, - placeholder: '', - value: 50, - }, { - type: 'el-slider', - label: '右边距(像素)', - name: 'marginRight', - required: false, - placeholder: '', - value: 40, - }, { - type: 'el-slider', - label: '底边距(像素)', - name: 'marginBottom', - required: false, - placeholder: '', - value: 10, - }, - ], - }, - /*{ - name: '图例操作', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'isShowLegend', - required: false, - placeholder: '', - value: true, - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'lengedColor', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '字体大小', - name: 'lengedFontSize', - required: false, - placeholder: '', - value: 16, - }, - { - type: 'el-input-number', - label: '图例宽度', - name: 'lengedWidth', - required: false, - placeholder: '', - value: 15, - }, - { - type: 'el-select', - label: '横向位置', - name: 'lateralPosition', - required: false, - placeholder: '', - selectOptions: [ - {code: 'center', name: '居中'}, - {code: 'left', name: '左对齐'}, - {code: 'right', name: '右对齐'}, - ], - value: 'center' - }, - { - type: 'el-select', - label: '纵向位置', - name: 'longitudinalPosition', - required: false, - placeholder: '', - selectOptions: [ - {code: 'top', name: '顶部'}, - {code: 'bottom', name: '底部'}, - ], - value: 'top' - }, - { - type: 'el-select', - label: '布局前置', - name: 'layoutFront', - required: false, - placeholder: '', - selectOptions: [ - {code: 'vertical', name: '竖排'}, - {code: 'horizontal', name: '横排'}, - ], - value: 'horizontal' - }, - ], - },*/ - { - name: '自定义配色', - list: [ - { - type: 'customColor', - label: '', - name: 'customColor', - required: false, - value: [{color: '#00F4FFFF'}, {color: '#e68b55'}], - }, - ], - }, - ], - ], - // 数据 - data: [ { - type: 'el-radio-group', - label: '数据类型', - name: 'dataType', - require: false, - placeholder: '', - selectValue: true, - selectOptions: [ + 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' + }, { - code: 'staticData', - name: '静态数据', + type: 'el-select', + label: '字体粗细', + name: 'textFontWeight', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' }, { - code: 'dynamicData', - name: '动态数据', + 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: '#fff' + }, + { + 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: 20 }, ], - value: 'staticData', }, { - type: 'el-input-number', - label: '刷新时间(毫秒)', - name: 'refreshTime', - relactiveDom: 'dataType', - relactiveDomValue: 'dynamicData', - value: 5000 + name: 'X轴设置', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'hideX', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '坐标名', + name: 'xName', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '坐标名颜色', + name: 'nameColorX', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '坐标字号', + name: 'nameFontSizeX', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'vue-color', + label: '数值颜色', + name: 'Xcolor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '数值字号', + name: 'fontSizeX', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngle', + required: false, + placeholder: '', + value: 0 + }, + { + type: 'el-input-number', + label: '数值间隔', + name: 'textInterval', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-switch', + label: '轴反转', + name: 'reversalX', + required: false, + placeholder: '', + value: false + }, + { + type: 'vue-color', + label: '轴颜色', + name: 'lineColorX', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineX', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorX', + required: false, + placeholder: '', + value: '#fff', + } + ], }, { - type: 'el-button', - label: '静态数据', - name: 'staticData', - required: false, - placeholder: '', - relactiveDom: 'dataType', - relactiveDomValue: 'staticData', - value: {"xAxis": ["1月", "2月", "3月", "4月", "5月","6月", "7月", "8月","9月","10月","11月","12月"],"series": [{"type": "bar","name": "货运量","data": [2.6,5.9,9,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6,2.3]},{"type": "line","name": "货运总量","yAxisIndex": 1,"data": [2,2.2,3.3,4.5,6.3,10.2,20.3,23.4,23,16.5,12,6.2]}]}, + name: 'Y轴设置', + list: [ + { + type: 'el-switch', + label: '左显示', + name: 'isShowYLeft', + require: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '左坐标名', + name: 'textNameYLeft', + require: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '左坐标名颜色', + name: 'nameColorYLeft', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '左坐标字号', + name: 'namefontSizeYLeft', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-input-number', + label: '左均分', + name: 'splitNumberLeft', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-switch', + label: '右显示', + name: 'isShowYRight', + require: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '右坐标名', + name: 'textNameYRight', + require: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '右坐标名颜色', + name: 'nameColorYRight', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '右坐标字号', + name: 'namefontSizeYRight', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-input-number', + label: '右均分', + name: 'splitNumberRight', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '数值颜色', + name: 'colorY', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '数值字号', + name: 'fontSizeY', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-switch', + label: '轴反转', + name: 'reversalY', + required: false, + placeholder: '', + value: false + }, + { + type: 'vue-color', + label: '轴颜色', + name: 'lineColorY', + required: false, + placeholder: '', + value: '#fff', + }, + ], }, { - type: 'dycustComponents', - label: '', - name: 'dynamicData', - required: false, - placeholder: '', - relactiveDom: 'dataType', - chartType: 'widget-barlinechart', - dictKey: 'BAR_LINE_PROPERTIES', - relactiveDomValue: 'dynamicData', + name: '折线数值设定', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShowLine', + required: false, + placeholder: '', + value: false + }, + { + type: 'el-input-number', + label: '距离', + name: 'distanceLine', + required: false, + placeholder: '', + value: 5 + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'fontSizeLine', + required: false, + placeholder: '', + value: 14 + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'subTextColorLine', + required: false, + placeholder: '', + value: '#fff' + }, + { + type: 'el-select', + label: '字体粗细', + name: 'fontWeightLine', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + ], }, - ], - // 坐标 - position: [ { - type: 'el-input-number', - label: '左边距', - name: 'left', - required: false, - placeholder: '', - value: 0, + name: '柱体数值设定', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShowBar', + required: false, + placeholder: '', + value: false + }, + { + type: 'el-input-number', + label: '距离', + name: 'distanceBar', + required: false, + placeholder: '', + value: 5 + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'fontSizeBar', + required: false, + placeholder: '', + value: 14 + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'subTextColorBar', + required: false, + placeholder: '', + value: '#fff' + }, + { + type: 'el-select', + label: '字体粗细', + name: 'fontWeightBar', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + ], }, { - type: 'el-input-number', - label: '上边距', - name: 'top', - required: false, - placeholder: '', - value: 0, + name: '提示语设置', + list: [ + { + type: 'el-input-number', + label: '字体大小', + name: 'tipFontSize', + required: false, + placeholder: '', + value: 12 + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'lineColor', + required: false, + placeholder: '', + value: '#e68b55' + }, + ], }, { - type: 'el-input-number', - label: '宽度', - name: 'width', - required: false, - placeholder: '该容器在1920px大屏中的宽度', - value: 400, + name: '坐标轴边距设置', + list: [ + { + type: 'el-slider', + label: '左边距(像素)', + name: 'marginLeft', + required: false, + placeholder: '', + value: 10, + }, { + type: 'el-slider', + label: '顶边距(像素)', + name: 'marginTop', + required: false, + placeholder: '', + value: 50, + }, { + type: 'el-slider', + label: '右边距(像素)', + name: 'marginRight', + required: false, + placeholder: '', + value: 40, + }, { + type: 'el-slider', + label: '底边距(像素)', + name: 'marginBottom', + required: false, + placeholder: '', + value: 10, + }, + ], }, { - type: 'el-input-number', - label: '高度', - name: 'height', - required: false, - placeholder: '该容器在1080px大屏中的高度', - value: 200, + name: '自定义配色', + list: [ + { + type: 'customColor', + label: '', + name: 'customColor', + required: false, + value: [{color: '#00F4FFFF'}, {color: '#e68b55'}], + }, + ], }, ], - } + ], + // 数据 + 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: 5000 + }, + { + type: 'el-button', + label: '静态数据', + name: 'staticData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + relactiveDomValue: 'staticData', + value: [ + {"axis": "1月", "bar": 2.6, "line": 2}, + {"axis": "2月", "bar": 5.9, "line": 2.2}, + {"axis": "3月", "bar": 9, "line": 3.3}, + {"axis": "4月", "bar": 26.4, "line": 4.5}, + {"axis": "5月", "bar": 28.7, "line": 6.3}, + {"axis": "6月", "bar": 70.7, "line": 10.2}, + {"axis": "7月", "bar": 175.6, "line": 20.3}, + {"axis": "8月", "bar": 182.2, "line": 23.4}, + {"axis": "9月", "bar": 48.7, "line": 23}, + {"axis": "10月", "bar": 18.8, "line": 16.5}, + {"axis": "11月", "bar": 6, "line": 12}, + {"axis": "12月", "bar": 2.3, "line": 6.2}, + ] + }, + { + type: 'dycustComponents', + label: '', + name: 'dynamicData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + chartType: 'widget-barlinechart', + dictKey: 'BAR_LINE_PROPERTIES', + relactiveDomValue: 'dynamicData', + }, + ], + // 坐标 + 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: 400, + }, + { + type: 'el-input-number', + label: '高度', + name: 'height', + required: false, + placeholder: '该容器在1080px大屏中的高度', + value: 200, + }, + ], } +} diff --git a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-decorate-pie.js b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-decorate-pie.js new file mode 100644 index 00000000..ab42f351 --- /dev/null +++ b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-decorate-pie.js @@ -0,0 +1,445 @@ +/* + * @Descripttion: 装饰饼图 + * @version: + * @Author: foming + * @Date: + * @LastEditors: + * @LastEditTime: + */ +export const widgetDecoratePie = { + code: 'widgetDecoratePieChart', + type: 'chart', + label: '装饰饼图', + icon: 'iconicon_tubiao_bingtu', + 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: 'isLastRingShow', + required: false, + placeholder: '', + value: true + }, + { + type: 'vue-color', + label: '0%颜色', + name: 'lastRing0Color', + required: false, + placeholder: '', + value: '#4FADFD' + }, + { + type: 'vue-color', + label: '100%颜色', + name: 'lastRing100Color', + required: false, + placeholder: '', + value: '#28E8FA' + }, + ] + }, + { + name: '八分环设置', + list: [ + { + type: 'vue-color', + label: '颜色', + name: 'eightColor', + required: false, + placeholder: '', + value: '#4FADFD' + }, + ] + }, + { + name: '虚线环设置', + list: [ + { + type: 'el-input-number', + label: '虚线数量', + name: 'dottedNum', + required: false, + placeholder: '', + value: 40 + }, + { + type: 'vue-color', + label: '颜色', + name: 'dottedColor', + required: false, + placeholder: '', + value: '#28E8FA' + }, + ] + }, + { + name: '三分环设置', + list: [ + { + type: 'vue-color', + label: '一段颜色', + name: 'three1Color', + required: false, + placeholder: '', + value: '#fc8d89' + }, + { + type: 'vue-color', + label: '二段颜色', + name: 'three2Color', + required: false, + placeholder: '', + value: '#46d3f3' + }, + { + type: 'vue-color', + label: '三段颜色', + name: 'three3Color', + required: false, + placeholder: '', + value: 'rgba(203,203,203,.2)' + }, + ] + }, + { + name: '外指标环设置', + list: [ + { + type: 'el-switch', + label: '环显示', + name: 'isOutRingShow', + required: false, + placeholder: '', + value: false + }, + { + type: 'vue-color', + label: '环颜色', + name: 'outRingColor', + required: false, + placeholder: '', + value: '#0dc2fe' + }, + { + type: 'el-input-number', + label: '环宽度', + name: 'outRingWidth', + required: false, + placeholder: '', + value: 1 + }, + { + type: 'el-switch', + label: '指标线显示', + name: 'isOutSplitShow', + required: false, + placeholder: '', + value: true + }, + { + type: 'el-input-number', + label: '指标线数量', + name: 'outSplitNum', + required: false, + placeholder: '', + value: 30 + }, + { + type: 'el-input-number', + label: '指标线长度', + name: 'outSplitLength', + required: false, + placeholder: '', + value: 32 + }, + { + type: 'el-input-number', + label: '指标线宽度', + name: 'outSplitWidth', + required: false, + placeholder: '', + value: 2 + }, + { + type: 'vue-color', + label: '指标线颜色', + name: 'outSplitColor', + required: false, + placeholder: '', + value: '#0dc2fe' + }, + { + type: 'el-switch', + label: '刻度线显示', + name: 'isOutTickShow', + required: false, + placeholder: '', + value: false + }, + { + type: 'el-input-number', + label: '刻度线数量', + name: 'outTickNum', + required: false, + placeholder: '', + value: 5 + }, + { + type: 'el-input-number', + label: '刻度线长度', + name: 'outTickLength', + required: false, + placeholder: '', + value: 20 + }, + { + type: 'el-input-number', + label: '刻度线宽度', + name: 'outTickWidth', + required: false, + placeholder: '', + value: 2 + }, + { + type: 'vue-color', + label: '刻度线颜色', + name: 'outTickColor', + required: false, + placeholder: '', + value: '#0dc2fe' + }, + ] + }, + { + name: '里指标环设置', + list: [ + { + type: 'el-switch', + label: '环显示', + name: 'isInRingShow', + required: false, + placeholder: '', + value: false + }, + { + type: 'vue-color', + label: '环颜色', + name: 'inRingColor', + required: false, + placeholder: '', + value: '#0dc2fe' + }, + { + type: 'el-input-number', + label: '环宽度', + name: 'inRingWidth', + required: false, + placeholder: '', + value: 1 + }, + { + type: 'el-switch', + label: '指标线显示', + name: 'isInSplitShow', + required: false, + placeholder: '', + value: false + }, + { + type: 'el-input-number', + label: '指标线数量', + name: 'inSplitNum', + required: false, + placeholder: '', + value: 30 + }, + { + type: 'el-input-number', + label: '指标线长度', + name: 'inSplitLength', + required: false, + placeholder: '', + value: 20 + }, + { + type: 'el-input-number', + label: '指标线宽度', + name: 'inSplitWidth', + required: false, + placeholder: '', + value: 2 + }, + { + type: 'vue-color', + label: '指标线颜色', + name: 'inSplitColor', + required: false, + placeholder: '', + value: '#0dc2fe' + }, + { + type: 'el-switch', + label: '刻度线显示', + name: 'isInTickShow', + required: false, + placeholder: '', + value: true + }, + { + type: 'el-input-number', + label: '刻度线数量', + name: 'inTickNum', + required: false, + placeholder: '', + value: 5 + }, + { + type: 'el-input-number', + label: '刻度线长度', + name: 'inTickLength', + required: false, + placeholder: '', + value: 20 + }, + { + type: 'el-input-number', + label: '刻度线宽度', + name: 'inTickWidth', + required: false, + placeholder: '', + value: 2 + }, + { + type: 'vue-color', + label: '刻度线颜色', + name: 'inTickColor', + required: false, + placeholder: '', + value: '#0dc2fe' + }, + ] + }, + { + name: '环外环设置', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isRingOnRingShow', + required: false, + placeholder: '', + value: true + }, + { + type: 'vue-color', + label: '颜色', + name: 'ringOnRingColor', + required: false, + placeholder: '', + value: '#4FADFD' + }, + ] + }, + { + name: '中饼图设置', + list: [ + { + type: 'el-input-number', + label: '半径', + name: 'pieWidth', + required: false, + placeholder: '', + value: 40 + }, + { + type: 'vue-color', + label: '颜色', + name: 'pieColor', + required: false, + placeholder: '', + value: '#0dc2fe' + }, + { + type: 'vue-color', + label: '边框颜色', + name: 'pieBorderColor', + required: false, + placeholder: '', + value: '#3D4268' + }, + { + type: 'el-select', + label: '分块', + name: 'pieBlocks', + required: false, + placeholder: '', + selectOptions: [ + {code: 'four', name: '十字星'}, + {code: 'five', name: '五角星'}, + {code: 'six', name: '六芒星'}, + ], + value: 'six' + }, + ] + }, + ], + ], + // 坐标 + 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: 400, + }, + { + type: 'el-input-number', + label: '高度', + name: 'height', + required: false, + placeholder: '该容器在1080px大屏中的高度', + value: 300, + }, + ], + } +} diff --git a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-funnel.js b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-funnel.js index e554263b..f1c9ab6c 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-funnel.js +++ b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-funnel.js @@ -1,383 +1,390 @@ /* * @Descripttion: 漏斗图 json - * @version: + * @version: * @Author: qianlishi * @Date: 2021-08-29 07:29:23 * @LastEditors: qianlishi * @LastEditTime: 2021-09-28 14:12:37 */ export const widgetFunnel = { - code: 'widget-funnel', - type: 'chart', - label: '漏斗图', - icon: 'iconloudoutu', - options: { - // 配置 - setup: [ + code: 'widget-funnel', + type: 'chart', + label: '漏斗图', + icon: 'iconloudoutu', + options: { + // 配置 + setup: [ + { + type: 'el-input-text', + label: '图层名称', + name: 'layerName', + required: false, + placeholder: '', + value: '漏斗图', + }, + { + type: 'vue-color', + label: '背景颜色', + name: 'background', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-switch', + label: '翻转', + name: 'ending', + require: false, + placeholder: '', + value: false, + }, + [ { - 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: 'isShow', - require: false, - placeholder: '', - value: true, - }, - { - type: 'el-input-number', - label: '字体大小', - name: 'fontSize', - require: false, - placeholder: '', - value: 12, - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'color', - require: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-select', - label: '字体粗细', - name: 'fontWeight', - require: false, - placeholder: '', - selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} - ], - value: 'normal' - }, - { - type: 'el-switch', - label: '反转', - name: 'reversal', - require: false, - placeholder: '', - value: 0 - }, - ], - }, - { - 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: '' - }, - { - 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: 12 - }, - { - 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: '' - }, - ], - }, - { - name: '提示语设置', - list: [ - { - type: 'el-input-number', - label: '字体大小', - name: 'fontSize', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '网格线颜色', - name: 'lineColor', - required: false, - placeholder: '', - value: '' - }, - ], - }, - { - name: '图例操作', - list: [ - { - type: 'el-switch', - label: '图例', - name: 'isShowLegend', - required: false, - placeholder: '', - value: true, - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'lengedColor', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '字体大小', - name: 'lengedFontSize', - required: false, - placeholder: '', - value: 16, - }, - { - type: 'el-input-number', - label: '图例宽度', - name: 'lengedWidth', - required: false, - placeholder: '', - value: 10, - }, - { - type: 'el-select', - label: '横向位置', - name: 'lateralPosition', - required: false, - placeholder: '', - selectOptions: [ - {code: 'left', name: '左对齐'}, - {code: 'right', name: '右对齐'}, - ], - value: '' - }, - { - type: 'el-select', - label: '纵向位置', - name: 'longitudinalPosition', - required: false, - placeholder: '', - selectOptions: [ - {code: 'top', name: '顶部'}, - {code: 'bottom', name: '底部'}, - ], - value: '' - }, - { - type: 'el-select', - label: '布局前置', - name: 'layoutFront', - required: false, - placeholder: '', - selectOptions: [ - {code: 'vertical', name: '竖排'}, - {code: 'horizontal', name: '横排'}, - ], - value: '' - }, - ], - }, - { - name: '自定义配色', - list: [ - { - type: 'customColor', - label: '', - name: 'customColor', - required: false, - value: [{color: '#0CD2E6'}, {color: '#00BFA5'}, {color: '#FFC722'}, {color: '#886EFF'}, {color: '#008DEC'}], - }, - ], - }, - ], - ], - // 数据 - data: [ - { - type: 'el-radio-group', - label: '数据类型', - name: 'dataType', - require: false, - placeholder: '', - selectValue: true, - selectOptions: [ + name: '标题设置', + list: [ + { + type: 'el-switch', + label: '标题', + name: 'isNoTitle', + required: false, + placeholder: '', + value: false, + }, + { + type: 'el-input-text', + label: '标题', + name: 'titleText', + required: false, + placeholder: '', + value: '', + }, { - code: 'staticData', - name: '静态数据', + type: 'vue-color', + label: '字体颜色', + name: 'textColor', + required: false, + placeholder: '', + value: '#FFD700' }, { - code: 'dynamicData', - name: '动态数据', + 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: 'center' + }, + { + type: 'el-input-text', + label: '副标题', + name: 'subText', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'subTextColor', + required: false, + placeholder: '', + value: 'rgba(30, 144, 255, 1)' + }, + { + 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: 16 }, ], - value: 'staticData', }, { - type: 'el-input-number', - label: '刷新时间(毫秒)', - name: 'refreshTime', - relactiveDom: 'dataType', - relactiveDomValue: 'dynamicData', - value: 5000 - }, - { - type: 'el-button', - label: '静态数据', - name: 'staticData', - required: false, - placeholder: '', - relactiveDom: 'dataType', - relactiveDomValue: 'staticData', - value: [{"value": 60,"name": "访问"},{"value": 40, "name": "咨询"},{"value": 20, "name": "订单"},{"value": 80,"name":"点击"},{"value":100,"name":"展现"}], - }, - { - type: 'dycustComponents', - label: '', - name: 'dynamicData', - required: false, - placeholder: '', - relactiveDom: 'dataType', - chartType: 'widget-funnel', - relactiveDomValue: 'dynamicData', - dictKey: 'PIE_PROPERTIES', - value: '', - }, - ], - // 坐标 - position: [ - { - type: 'el-input-number', - label: '左边距', - name: 'left', - required: false, - placeholder: '', - value: 0, + name: '数值设置', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShow', + require: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'fontSize', + require: false, + placeholder: '', + value: 14, + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'color', + require: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-select', + label: '字体粗细', + name: 'fontWeight', + require: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + ], }, { - type: 'el-input-number', - label: '上边距', - name: 'top', - required: false, - placeholder: '', - value: 0, + name: '图例操作', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShowLegend', + required: false, + placeholder: '', + value: true, + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'lengedColor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'lengedFontSize', + required: false, + placeholder: '', + value: 16, + }, + { + type: 'el-input-number', + label: '图例宽度', + name: 'lengedWidth', + required: false, + placeholder: '', + value: 15, + }, + { + type: 'el-select', + label: '横向位置', + name: 'lateralPosition', + required: false, + placeholder: '', + selectOptions: [ + {code: 'center', name: '居中'}, + {code: 'left', name: '左对齐'}, + {code: 'right', name: '右对齐'}, + ], + value: 'center' + }, + { + type: 'el-select', + label: '纵向位置', + name: 'longitudinalPosition', + required: false, + placeholder: '', + selectOptions: [ + {code: 'top', name: '顶部'}, + {code: 'bottom', name: '底部'}, + ], + value: 'top' + }, + { + type: 'el-select', + label: '布局前置', + name: 'layoutFront', + required: false, + placeholder: '', + selectOptions: [ + {code: 'vertical', name: '竖排'}, + {code: 'horizontal', name: '横排'}, + ], + value: 'horizontal' + }, + ], }, { - type: 'el-input-number', - label: '宽度', - name: 'width', - required: false, - placeholder: '该容器在1920px大屏中的宽度', - value: 400, + name: '提示语设置', + list: [ + { + type: 'el-input-number', + label: '字体字号', + name: 'tipFontSize', + required: false, + placeholder: '', + value: 14 + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'lineColor', + required: false, + placeholder: '', + value: '' + }, + ], }, { - type: 'el-input-number', - label: '高度', - name: 'height', - required: false, - placeholder: '该容器在1080px大屏中的高度', - value: 200, + name: '自定义配色', + list: [ + { + type: 'customColor', + label: '', + name: 'customColor', + required: false, + value: [{color: '#0CD2E6'}, {color: '#00BFA5'}, {color: '#FFC722'}, {color: '#886EFF'}, {color: '#008DEC'}], + }, + ], }, ], - } + ], + // 数据 + 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: 5000 + }, + { + type: 'el-button', + label: '静态数据', + name: 'staticData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + relactiveDomValue: 'staticData', + value: [ + {"value": 2, "name": "访问"}, + {"value": 5, "name": "咨询"}, + {"value": 20, "name": "订单"}, + {"value": 40, "name": "点击"}, + {"value": 125, "name": "展现"} + ], + }, + { + type: 'dycustComponents', + label: '', + name: 'dynamicData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + chartType: 'widget-funnel', + relactiveDomValue: 'dynamicData', + dictKey: 'PIE_PROPERTIES', + 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: 400, + }, + { + type: 'el-input-number', + label: '高度', + name: 'height', + required: false, + placeholder: '该容器在1080px大屏中的高度', + value: 500, + }, + ], } +} diff --git a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-gauge.js b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-gauge.js index 9ebbdd32..473b6854 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-gauge.js +++ b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-gauge.js @@ -324,7 +324,9 @@ export const widgetGauge = { placeholder: '', relactiveDom: 'dataType', relactiveDomValue: 'staticData', - value: 50, + value: [ + {"num":50} + ], }, { type: 'dycustComponents', diff --git a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-gradient-barchart.js b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-gradient-barchart.js index 7d1c1d16..7a6c7696 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-gradient-barchart.js +++ b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-gradient-barchart.js @@ -6,601 +6,607 @@ * @LastEditors: qianlishi * @LastEditTime: 2021-09-28 14:14:08 */ -export const widgetGradientBarchart = { - code: 'widget-gradient-color-barchart', - type: 'chart', - label: '柱形图-渐变色', - icon: 'iconzhuzhuangtu', - options: { - // 配置 - setup: [ +export const widgetGradientBarchart = { + code: 'widget-gradient-color-barchart', + type: 'chart', + label: '柱形图-渐变色', + icon: 'iconzhuzhuangtu', + options: { + // 配置 + setup: [ + { + type: 'el-input-text', + label: '图层名称', + name: 'layerName', + required: false, + placeholder: '', + value: '柱形图-渐变色', + }, + { + type: 'el-switch', + label: '竖展示', + name: 'verticalShow', + required: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '背景颜色', + name: 'background', + required: false, + placeholder: '', + value: '' + }, + [ { - type: 'el-input-text', - label: '图层名称', - name: 'layerName', - required: false, - placeholder: '', - value: '柱形图-渐变色', - }, - { - type: 'el-switch', - label: '竖展示', - name: 'verticalShow', - required: false, - placeholder: '', - value: false, - }, - { - type: 'vue-color', - label: '背景颜色', - name: 'background', - required: false, - placeholder: '', - value: '' - }, - [ - { - name: '柱体设置', - list: [ - { - type: 'el-slider', - label: '最大宽度', - name: 'maxWidth', - required: false, - placeholder: '', - value: 10, - }, - { - type: 'el-slider', - label: '圆角', - name: 'radius', - require: false, - placeholder: '', - value: 5, - }, - ], - }, - { - 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: 22 - }, - { - type: 'el-select', - label: '字体位置', - name: 'textAlign', - required: false, - placeholder: '', - selectOptions: [ - {code: 'center', name: '居中'}, - {code: 'left', name: '左对齐'}, - {code: 'right', name: '右对齐'}, - ], - value: 'center' - }, - { - type: 'el-input-text', - label: '副标题', - name: 'subText', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'subTextColor', - required: false, - placeholder: '', - value: '#90979c' - }, - { - type: 'el-input-text', - 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: 20 - }, - ], - }, - { - name: 'X轴设置', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'hideX', - required: false, - placeholder: '', - value: true, - }, - { - type: 'el-input-text', - label: '坐标名', - name: 'xName', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '坐标名颜色', - name: 'nameColorX', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '坐标字号', - name: 'nameFontSizeX', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'vue-color', - label: '数值颜色', - name: 'Xcolor', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '数值字号', - name: 'fontSizeX', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'el-slider', - label: '数值角度', - name: 'textAngle', - required: false, - placeholder: '', - value: 0 - }, - { - type: 'el-input-number', - label: '数值间隔', - name: 'textInterval', - required: false, - placeholder: '', - value: '' - }, - { - type: 'el-switch', - label: '轴反转', - name: 'reversalX', - required: false, - placeholder: '', - value: false - }, - { - type: 'vue-color', - label: '轴颜色', - name: 'lineColorX', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-switch', - label: '分割线显示', - name: 'isShowSplitLineX', - require: false, - placeholder: '', - value: false, - }, - { - type: 'vue-color', - label: '分割线颜色', - name: 'splitLineColorX', - required: false, - placeholder: '', - value: '#fff', - } - ], - }, - { - name: 'Y轴设置', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'isShowY', - require: false, - placeholder: '', - value: true, - }, - { - type: 'el-input-text', - label: '坐标名', - name: 'textNameY', - require: false, - placeholder: '', - value: '' - },{ - type: 'vue-color', - label: '坐标名颜色', - name: 'nameColorY', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '坐标字号', - name: 'namefontSizeY', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'vue-color', - label: '数值颜色', - name: 'colorY', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '数值字号', - name: 'fontSizeY', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'el-slider', - label: '数值角度', - name: 'ytextAngle', - required: false, - placeholder: '', - value: 0 - }, - { - type: 'el-switch', - label: '缩放', - name: 'scale', - require: false, - placeholder: '', - value: false, - }, - { - type: 'el-input-number', - label: '均分', - name: 'splitNumber', - required: false, - placeholder: '', - value: '' - }, - { - type: 'el-switch', - label: '轴反转', - name: 'reversalY', - required: false, - placeholder: '', - value: false - }, - { - type: 'vue-color', - label: '轴颜色', - name: 'lineColorY', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-switch', - label: '分割线显示', - name: 'isShowSplitLineY', - require: false, - placeholder: '', - value: false, - }, - { - type: 'vue-color', - label: '分割线颜色', - name: 'splitLineColorY', - required: false, - placeholder: '', - value: '#fff', - } - ], - }, - { - name: '数值设定', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'isShow', - required: false, - placeholder: '', - value: true - }, - { - type: 'el-input-number', - label: '距离', - name: 'distance', - required: false, - placeholder: '', - value: 5 - }, - { - type: 'el-input-number', - label: '字体大小', - name: 'fontSize', - required: false, - placeholder: '', - value: 14 - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'subTextColor', - required: false, - placeholder: '', - value: '#fff' - }, - { - type: 'el-select', - label: '字体粗细', - name: 'fontWeight', - required: false, - placeholder: '', - selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} - ], - value: 'normal' - }, - ], - }, - { - name: '提示语设置', - list: [ - { - type: 'el-input-number', - label: '字体大小', - name: 'tipsFontSize', - required: false, - placeholder: '', - value: 16 - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'lineColor', - required: false, - placeholder: '#ff7f50', - }, - ], - }, - { - name: '坐标轴边距设置', - list: [ - { - type: 'el-slider', - label: '左边距(像素)', - name: 'marginLeft', - required: false, - placeholder: '', - value: 10, - }, { - type: 'el-slider', - label: '顶边距(像素)', - name: 'marginTop', - required: false, - placeholder: '', - value: 50, - }, { - type: 'el-slider', - label: '右边距(像素)', - name: 'marginRight', - required: false, - placeholder: '', - value: 40, - }, { - type: 'el-slider', - label: '底边距(像素)', - name: 'marginBottom', - required: false, - placeholder: '', - value: 10, - }, - ], - }, - { - name: '渐变色', - list: [ - { - type: 'vue-color', - label: '0%处', - name: 'bar0color', - required: false, - placeholder: '', - value: 'rgba(0,244,255,1)' - }, - { - type: 'vue-color', - label: '100%处', - name: 'bar100color', - required: false, - placeholder: '', - value: 'rgba(0,77,167,1)' - }, - { - type: 'vue-color', - label: '阴影颜色', - name: 'shadowColor', - required: false, - placeholder: '', - value: 'rgba(0,160,221,1)' - }, - { - type: 'el-input-number', - label: '模糊系数', - name: 'shadowBlur', - required: false, - placeholder: '', - value: 4, - }, - ], - }, - ], - ], - // 数据 - data: [ - { - type: 'el-radio-group', - label: '数据类型', - name: 'dataType', - require: false, - placeholder: '', - selectValue: true, - selectOptions: [ + name: '柱体设置', + list: [ { - code: 'staticData', - name: '静态数据', + type: 'el-slider', + label: '最大宽度', + name: 'maxWidth', + required: false, + placeholder: '', + value: 10, }, { - code: 'dynamicData', - name: '动态数据', + type: 'el-slider', + label: '圆角', + name: 'radius', + require: false, + placeholder: '', + value: 5, }, ], - value: 'staticData', }, { - type: 'el-input-number', - label: '刷新时间(毫秒)', - name: 'refreshTime', - relactiveDom: 'dataType', - relactiveDomValue: 'dynamicData', - value: 5000 + 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: 22 + }, + { + type: 'el-select', + label: '字体位置', + name: 'textAlign', + required: false, + placeholder: '', + selectOptions: [ + {code: 'center', name: '居中'}, + {code: 'left', name: '左对齐'}, + {code: 'right', name: '右对齐'}, + ], + value: 'center' + }, + { + type: 'el-input-text', + label: '副标题', + name: 'subText', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'subTextColor', + required: false, + placeholder: '', + value: '#90979c' + }, + { + type: 'el-input-text', + 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: 20 + }, + ], }, { - type: 'el-button', - label: '静态数据', - name: 'staticData', - required: false, - placeholder: '', - relactiveDom: 'dataType', - relactiveDomValue: 'staticData', - value: {"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1000,2229,3879,2379,4079]}]}, + name: 'X轴设置', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'hideX', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '坐标名', + name: 'xName', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '坐标名颜色', + name: 'nameColorX', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '坐标字号', + name: 'nameFontSizeX', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'vue-color', + label: '数值颜色', + name: 'Xcolor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '数值字号', + name: 'fontSizeX', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngle', + required: false, + placeholder: '', + value: 0 + }, + { + type: 'el-input-number', + label: '数值间隔', + name: 'textInterval', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-switch', + label: '轴反转', + name: 'reversalX', + required: false, + placeholder: '', + value: false + }, + { + type: 'vue-color', + label: '轴颜色', + name: 'lineColorX', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineX', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorX', + required: false, + placeholder: '', + value: '#fff', + } + ], }, { - type: 'dycustComponents', - label: '', - name: 'dynamicData', - required: false, - placeholder: '', - relactiveDom: 'dataType', - relactiveDomValue: 'dynamicData', - chartType: 'widget-barchart', - dictKey: 'BAR_PROPERTIES', - value: '', + name: 'Y轴设置', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShowY', + require: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '坐标名', + name: 'textNameY', + require: false, + placeholder: '', + value: '' + }, { + type: 'vue-color', + label: '坐标名颜色', + name: 'nameColorY', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '坐标字号', + name: 'namefontSizeY', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'vue-color', + label: '数值颜色', + name: 'colorY', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '数值字号', + name: 'fontSizeY', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-slider', + label: '数值角度', + name: 'ytextAngle', + required: false, + placeholder: '', + value: 0 + }, + { + type: 'el-switch', + label: '缩放', + name: 'scale', + require: false, + placeholder: '', + value: false, + }, + { + type: 'el-input-number', + label: '均分', + name: 'splitNumber', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-switch', + label: '轴反转', + name: 'reversalY', + required: false, + placeholder: '', + value: false + }, + { + type: 'vue-color', + label: '轴颜色', + name: 'lineColorY', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineY', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorY', + required: false, + placeholder: '', + value: '#fff', + } + ], }, - ], - // 坐标 - position: [ { - type: 'el-input-number', - label: '左边距', - name: 'left', - required: false, - placeholder: '', - value: 0, + name: '数值设定', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShow', + required: false, + placeholder: '', + value: true + }, + { + type: 'el-input-number', + label: '距离', + name: 'distance', + required: false, + placeholder: '', + value: 5 + }, + { + type: 'el-input-number', + label: '字体大小', + name: 'fontSize', + required: false, + placeholder: '', + value: 14 + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'subTextColor', + required: false, + placeholder: '', + value: '#fff' + }, + { + type: 'el-select', + label: '字体粗细', + name: 'fontWeight', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + ], }, { - type: 'el-input-number', - label: '上边距', - name: 'top', - required: false, - placeholder: '', - value: 0, + name: '提示语设置', + list: [ + { + type: 'el-input-number', + label: '字体大小', + name: 'tipsFontSize', + required: false, + placeholder: '', + value: 16 + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'lineColor', + required: false, + placeholder: '#ff7f50', + }, + ], }, { - type: 'el-input-number', - label: '宽度', - name: 'width', - required: false, - placeholder: '该容器在1920px大屏中的宽度', - value: 400, + name: '坐标轴边距设置', + list: [ + { + type: 'el-slider', + label: '左边距(像素)', + name: 'marginLeft', + required: false, + placeholder: '', + value: 10, + }, { + type: 'el-slider', + label: '顶边距(像素)', + name: 'marginTop', + required: false, + placeholder: '', + value: 50, + }, { + type: 'el-slider', + label: '右边距(像素)', + name: 'marginRight', + required: false, + placeholder: '', + value: 40, + }, { + type: 'el-slider', + label: '底边距(像素)', + name: 'marginBottom', + required: false, + placeholder: '', + value: 10, + }, + ], }, { - type: 'el-input-number', - label: '高度', - name: 'height', - required: false, - placeholder: '该容器在1080px大屏中的高度', - value: 200, + name: '渐变色', + list: [ + { + type: 'vue-color', + label: '0%处', + name: 'bar0color', + required: false, + placeholder: '', + value: 'rgba(0,244,255,1)' + }, + { + type: 'vue-color', + label: '100%处', + name: 'bar100color', + required: false, + placeholder: '', + value: 'rgba(0,77,167,1)' + }, + { + type: 'vue-color', + label: '阴影颜色', + name: 'shadowColor', + required: false, + placeholder: '', + value: 'rgba(0,160,221,1)' + }, + { + type: 'el-input-number', + label: '模糊系数', + name: 'shadowBlur', + required: false, + placeholder: '', + value: 4, + }, + ], }, ], - } + ], + // 数据 + 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: 5000 + }, + { + type: 'el-button', + label: '静态数据', + name: 'staticData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + relactiveDomValue: 'staticData', + value: [ + {"axis": "苹果", "data": 1000}, + {"axis": "三星", "data": 2229}, + {"axis": "小米", "data": 3879}, + {"axis": "oppo", "data": 2379}, + {"axis": "vivo", "data": 4079}, + ], + }, + { + type: 'dycustComponents', + label: '', + name: 'dynamicData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + relactiveDomValue: 'dynamicData', + chartType: 'widget-barchart', + dictKey: 'BAR_PROPERTIES', + 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: 400, + }, + { + type: 'el-input-number', + label: '高度', + name: 'height', + required: false, + placeholder: '该容器在1080px大屏中的高度', + value: 200, + }, + ], } +} diff --git a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-linechart.js b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-linechart.js index c4dfb0db..3614ded3 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-linechart.js +++ b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-linechart.js @@ -7,668 +7,674 @@ * @LastEditTime: 2021-09-28 14:17:10 */ export const widgetLinechart = { - code: 'widget-linechart', - type: 'chart', - label: '折线图', - icon: 'icontubiaozhexiantu', - options: { - // 配置 - setup: [ + code: 'widget-linechart', + type: 'chart', + label: '折线图', + icon: 'icontubiaozhexiantu', + options: { + // 配置 + setup: [ + { + type: 'el-input-text', + label: '图层名称', + name: 'layerName', + required: false, + placeholder: '', + value: '折线图', + }, + { + type: 'vue-color', + label: '背景颜色', + name: 'background', + required: false, + placeholder: '', + value: '' + }, + [ { - 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: 'markPoint', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-slider', + label: '点大小', + name: 'pointSize', + required: false, + placeholder: '', + value: 10, + }, + { + type: 'el-switch', + label: '平滑曲线', + name: 'smoothCurve', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-switch', + label: '面积堆积', + name: 'area', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-slider', + label: '面积厚度', + name: 'areaThickness', + required: false, + placeholder: '', + value: 5, + }, + { + type: 'el-slider', + label: '线条宽度', + name: 'lineWidth', + required: false, + placeholder: '', + value: 4, + }, + ], }, - [ - { - name: '折线设置', - list: [ - { - type: 'el-switch', - label: '标记点', - name: 'markPoint', - required: false, - placeholder: '', - value: true, - }, - { - type: 'el-slider', - label: '点大小', - name: 'pointSize', - required: false, - placeholder: '', - value: 10, - }, - { - type: 'el-switch', - label: '平滑曲线', - name: 'smoothCurve', - required: false, - placeholder: '', - value: true, - }, - { - type: 'el-switch', - label: '面积堆积', - name: 'area', - required: false, - placeholder: '', - value: true, - }, - { - type: 'el-slider', - label: '面积厚度', - name: 'areaThickness', - required: false, - placeholder: '', - value: 5, - }, - { - type: 'el-slider', - label: '线条宽度', - name: 'lineWidth', - required: false, - placeholder: '', - value: 4, - }, - ], - }, - { - name: '标题设置', - list: [ - { - type: 'el-switch', - label: '标题', - name: 'isNoTitle', - required: false, - placeholder: '', - value: false - }, - { - 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: 'center' - }, - { - type: 'el-input-text', - label: '副标题', - name: 'subText', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'subTextColor', - required: false, - placeholder: '', - value: '#fff' - }, - { - 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: 20 - }, - ], - }, - { - name: 'X轴设置', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'hideX', - required: false, - placeholder: '', - value: true, - }, - { - type: 'el-input-text', - label: '坐标名', - name: 'xName', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '坐标名颜色', - name: 'nameColorX', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '坐标字号', - name: 'nameFontSizeX', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'vue-color', - label: '数值颜色', - name: 'Xcolor', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '数值字号', - name: 'fontSizeX', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'el-slider', - label: '数值角度', - name: 'textAngle', - required: false, - placeholder: '', - value: 0 - }, - { - type: 'el-input-number', - label: '数值间隔', - name: 'textInterval', - required: false, - placeholder: '', - value: '' - }, - { - type: 'el-switch', - label: '轴反转', - name: 'reversalX', - required: false, - placeholder: '', - value: false - }, - { - type: 'vue-color', - label: '轴颜色', - name: 'lineColorX', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-switch', - label: '分割线显示', - name: 'isShowSplitLineX', - require: false, - placeholder: '', - value: false, - }, - { - type: 'vue-color', - label: '分割线颜色', - name: 'splitLineColorX', - required: false, - placeholder: '', - value: '#fff', - } - ], - }, - { - name: 'Y轴设置', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'isShowY', - require: false, - placeholder: '', - value: true, - }, - { - type: 'el-input-text', - label: '坐标名', - name: 'textNameY', - require: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '坐标名颜色', - name: 'nameColorY', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '坐标字号', - name: 'namefontSizeY', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'vue-color', - label: '数值颜色', - name: 'colorY', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '数值字号', - name: 'fontSizeY', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'el-slider', - label: '数值角度', - name: 'ytextAngle', - required: false, - placeholder: '', - value: 0 - }, - { - type: 'el-switch', - label: '缩放', - name: 'scale', - require: false, - placeholder: '', - value: false, - }, - { - type: 'el-input-number', - label: '均分', - name: 'splitNumber', - required: false, - placeholder: '', - value: '' - }, - { - type: 'el-switch', - label: '轴反转', - name: 'reversalY', - required: false, - placeholder: '', - value: false - }, - { - type: 'vue-color', - label: '轴颜色', - name: 'lineColorY', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-switch', - label: '分割线显示', - name: 'isShowSplitLineY', - require: false, - placeholder: '', - value: false, - }, - { - type: 'vue-color', - label: '分割线颜色', - name: 'splitLineColorY', - required: false, - placeholder: '', - value: '#fff', - } - ], - }, - { - name: '数值设定', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'isShow', - required: false, - placeholder: '', - value: false - }, - { - type: 'el-input-number', - label: '字体大小', - name: 'fontSize', - required: false, - placeholder: '', - value: 12 - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'subTextColor', - required: false, - placeholder: '', - value: '#fff' - }, - { - type: 'el-select', - label: '字体粗细', - name: 'fontWeight', - required: false, - placeholder: '', - selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} - ], - value: 'normal' - }, - ], - }, - { - name: '提示语设置', - list: [ - { - type: 'el-input-text', - label: '字体大小', - name: 'fontSize', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'lineColor', - required: false, - placeholder: '', - value: '' - }, - ], - }, - { - name: '坐标轴边距设置', - list: [ - { - type: 'el-slider', - label: '左边距(像素)', - name: 'marginLeft', - required: false, - placeholder: '', - value: 10, - }, - { - type: 'el-slider', - label: '顶边距(像素)', - name: 'marginTop', - required: false, - placeholder: '', - value: 50, - }, - { - type: 'el-slider', - label: '右边距(像素)', - name: 'marginRight', - required: false, - placeholder: '', - value: 40, - }, - { - type: 'el-slider', - label: '底边距(像素)', - name: 'marginBottom', - required: false, - placeholder: '', - value: 10, - }, - ], - }, - { - name: '图例操作', - list: [ - { - type: 'el-switch', - label: '图例', - name: 'isShowLegend', - required: false, - placeholder: '', - value: true, - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'lengedColor', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '字体大小', - name: 'lengedFontSize', - required: false, - placeholder: '', - value: 16, - }, - { - type: 'el-input-number', - label: '图例宽度', - name: 'lengedWidth', - required: false, - placeholder: '', - value: 15, - }, - { - type: 'el-select', - label: '横向位置', - name: 'lateralPosition', - required: false, - placeholder: '', - selectOptions: [ - {code: 'left', name: '左对齐'}, - {code: 'right', name: '右对齐'}, - ], - value: 'left' - }, - { - type: 'el-select', - label: '纵向位置', - name: 'longitudinalPosition', - required: false, - placeholder: '', - selectOptions: [ - {code: 'top', name: '顶部'}, - {code: 'bottom', name: '底部'}, - ], - value: '' - }, - { - type: 'el-select', - label: '布局前置', - name: 'layoutFront', - required: false, - placeholder: '', - selectOptions: [ - {code: 'vertical', name: '竖排'}, - {code: 'horizontal', name: '横排'}, - ], - value: '' - }, - ], - }, - { - name: '自定义配色', - list: [ - { - type: 'customColor', - label: '', - name: 'customColor', - required: false, - value: [{color: '#1E90FF'}], - }, - ], - }, - ], - ], - // 数据 - data: [ { - type: 'el-radio-group', - label: '数据类型', - name: 'dataType', - require: false, - placeholder: '', - selectValue: true, - selectOptions: [ + name: '标题设置', + list: [ + { + type: 'el-switch', + label: '标题', + name: 'isNoTitle', + required: false, + placeholder: '', + value: false + }, { - code: 'staticData', - name: '静态数据', + type: 'el-input-text', + label: '标题', + name: 'titleText', + required: false, + placeholder: '', + value: '', }, { - code: 'dynamicData', - name: '动态数据', + 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: 'center' + }, + { + type: 'el-input-text', + label: '副标题', + name: 'subText', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'subTextColor', + required: false, + placeholder: '', + value: '#fff' + }, + { + 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: 20 }, ], - value: 'staticData', }, { - type: 'el-input-number', - label: '刷新时间(毫秒)', - name: 'refreshTime', - relactiveDom: 'dataType', - relactiveDomValue: 'dynamicData', - value: 5000 + name: 'X轴设置', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'hideX', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '坐标名', + name: 'xName', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '坐标名颜色', + name: 'nameColorX', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '坐标字号', + name: 'nameFontSizeX', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'vue-color', + label: '数值颜色', + name: 'Xcolor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '数值字号', + name: 'fontSizeX', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngle', + required: false, + placeholder: '', + value: 0 + }, + { + type: 'el-input-number', + label: '数值间隔', + name: 'textInterval', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-switch', + label: '轴反转', + name: 'reversalX', + required: false, + placeholder: '', + value: false + }, + { + type: 'vue-color', + label: '轴颜色', + name: 'lineColorX', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineX', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorX', + required: false, + placeholder: '', + value: '#fff', + } + ], }, { - type: 'el-button', - label: '静态数据', - name: 'staticData', - required: false, - placeholder: '', - relactiveDom: 'dataType', - relactiveDomValue: 'staticData', - value: {"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1009,3409,2309,5409,3409]}]}, + name: 'Y轴设置', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShowY', + require: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '坐标名', + name: 'textNameY', + require: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '坐标名颜色', + name: 'nameColorY', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '坐标字号', + name: 'namefontSizeY', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'vue-color', + label: '数值颜色', + name: 'colorY', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '数值字号', + name: 'fontSizeY', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-slider', + label: '数值角度', + name: 'ytextAngle', + required: false, + placeholder: '', + value: 0 + }, + { + type: 'el-switch', + label: '缩放', + name: 'scale', + require: false, + placeholder: '', + value: false, + }, + { + type: 'el-input-number', + label: '均分', + name: 'splitNumber', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-switch', + label: '轴反转', + name: 'reversalY', + required: false, + placeholder: '', + value: false + }, + { + type: 'vue-color', + label: '轴颜色', + name: 'lineColorY', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineY', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorY', + required: false, + placeholder: '', + value: '#fff', + } + ], }, { - type: 'dycustComponents', - label: '', - name: 'dynamicData', - required: false, - placeholder: '', - relactiveDom: 'dataType', - chartType: 'widget-linechart', - dictKey: 'LINE_PROPERTIES', - relactiveDomValue: 'dynamicData', + name: '数值设定', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShow', + required: false, + placeholder: '', + value: false + }, + { + type: 'el-input-number', + label: '字体大小', + name: 'fontSize', + required: false, + placeholder: '', + value: 12 + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'subTextColor', + required: false, + placeholder: '', + value: '#fff' + }, + { + type: 'el-select', + label: '字体粗细', + name: 'fontWeight', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + ], }, - ], - // 坐标 - position: [ { - type: 'el-input-number', - label: '左边距', - name: 'left', - required: false, - placeholder: '', - value: 0, + name: '提示语设置', + list: [ + { + type: 'el-input-text', + label: '字体大小', + name: 'fontSize', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'lineColor', + required: false, + placeholder: '', + value: '' + }, + ], }, { - type: 'el-input-number', - label: '上边距', - name: 'top', - required: false, - placeholder: '', - value: 0, + name: '坐标轴边距设置', + list: [ + { + type: 'el-slider', + label: '左边距(像素)', + name: 'marginLeft', + required: false, + placeholder: '', + value: 10, + }, + { + type: 'el-slider', + label: '顶边距(像素)', + name: 'marginTop', + required: false, + placeholder: '', + value: 50, + }, + { + type: 'el-slider', + label: '右边距(像素)', + name: 'marginRight', + required: false, + placeholder: '', + value: 40, + }, + { + type: 'el-slider', + label: '底边距(像素)', + name: 'marginBottom', + required: false, + placeholder: '', + value: 10, + }, + ], }, { - type: 'el-input-number', - label: '宽度', - name: 'width', - required: false, - placeholder: '该容器在1920px大屏中的宽度', - value: 400, + name: '图例操作', + list: [ + { + type: 'el-switch', + label: '图例', + name: 'isShowLegend', + required: false, + placeholder: '', + value: true, + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'lengedColor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '字体大小', + name: 'lengedFontSize', + required: false, + placeholder: '', + value: 16, + }, + { + type: 'el-input-number', + label: '图例宽度', + name: 'lengedWidth', + required: false, + placeholder: '', + value: 15, + }, + { + type: 'el-select', + label: '横向位置', + name: 'lateralPosition', + required: false, + placeholder: '', + selectOptions: [ + {code: 'left', name: '左对齐'}, + {code: 'right', name: '右对齐'}, + ], + value: 'left' + }, + { + type: 'el-select', + label: '纵向位置', + name: 'longitudinalPosition', + required: false, + placeholder: '', + selectOptions: [ + {code: 'top', name: '顶部'}, + {code: 'bottom', name: '底部'}, + ], + value: '' + }, + { + type: 'el-select', + label: '布局前置', + name: 'layoutFront', + required: false, + placeholder: '', + selectOptions: [ + {code: 'vertical', name: '竖排'}, + {code: 'horizontal', name: '横排'}, + ], + value: '' + }, + ], }, { - type: 'el-input-number', - label: '高度', - name: 'height', - required: false, - placeholder: '该容器在1080px大屏中的高度', - value: 200, + name: '自定义配色', + list: [ + { + type: 'customColor', + label: '', + name: 'customColor', + required: false, + value: [{color: '#1E90FF'}], + }, + ], }, ], - } + ], + // 数据 + 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: 5000 + }, + { + type: 'el-button', + label: '静态数据', + name: 'staticData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + relactiveDomValue: 'staticData', + value: [ + {"axis": "苹果", "data": 1000}, + {"axis": "三星", "data": 2229}, + {"axis": "小米", "data": 3879}, + {"axis": "oppo", "data": 2379}, + {"axis": "vivo", "data": 4079}, + ], + }, + { + type: 'dycustComponents', + label: '', + name: 'dynamicData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + chartType: 'widget-linechart', + dictKey: 'LINE_PROPERTIES', + relactiveDomValue: 'dynamicData', + }, + ], + // 坐标 + 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: 400, + }, + { + type: 'el-input-number', + label: '高度', + name: 'height', + required: false, + placeholder: '该容器在1080px大屏中的高度', + value: 200, + }, + ], } +} diff --git a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-pie-percentage.js b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-pie-percentage.js index 32dcdf33..22221703 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-pie-percentage.js +++ b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-pie-percentage.js @@ -1,6 +1,6 @@ /* * @Descripttion: 百分比图 json - * @version: + * @version: * @Author: qianlishi * @Date: 2021-08-29 07:34:01 * @LastEditors: qianlishi @@ -113,7 +113,7 @@ export const widgetPiePercentage = { name: 'lineLength', required: false, placeholder: '', - value: 15 + value: 19 }, { type: 'el-input-number', @@ -121,7 +121,7 @@ export const widgetPiePercentage = { name: 'lineWidth', required: false, placeholder: '', - value: 5 + value: 2 }, { type: 'vue-color', @@ -201,7 +201,9 @@ export const widgetPiePercentage = { placeholder: '', relactiveDom: 'dataType', relactiveDomValue: 'staticData', - value: 60, + value: [ + {"num":60} + ], }, { type: 'dycustComponents', @@ -248,7 +250,7 @@ export const widgetPiePercentage = { name: 'height', required: false, placeholder: '该容器在1080px大屏中的高度', - value: 200, + value: 300, }, ], } diff --git a/report-ui/src/views/report/bigscreen/designer/tools/main.js b/report-ui/src/views/report/bigscreen/designer/tools/main.js index 2bce8560..d0e81f0f 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/main.js +++ b/report-ui/src/views/report/bigscreen/designer/tools/main.js @@ -7,31 +7,32 @@ * @LastEditTime: 2021-09-28 13:33:47 */ -import { widgetText } from "./echartsConfigJson/widget-text" -import { widgetMarquee } from "./echartsConfigJson/widget-marquee" -import { widgetHref } from "./echartsConfigJson/widget-href" -import { widgetTime } from "./echartsConfigJson/widget-time" -import { widgetImage } from "./echartsConfigJson/widget-image" -import { widgetSliders } from "./echartsConfigJson/widget-slider" -import { widgetVideo } from "./echartsConfigJson/widget-video" -import { widgetTable } from "./echartsConfigJson/widget-table" -import { widgetIframe } from "./echartsConfigJson/widget-iframe" -import { widgetUniversal } from "./echartsConfigJson/widget-universal" -import { widgetBarchart } from "./echartsConfigJson/widget-barchart" -import { widgetGradientBarchart } from "./echartsConfigJson/widget-gradient-barchart" -import { widgetLinechart } from "./echartsConfigJson/widget-linechart" -import { widgetBarlinechart } from "./echartsConfigJson/widget-barlinechart" -import { widgetPiechart } from "./echartsConfigJson/widget-piechart" -import { widgetFunnel } from "./echartsConfigJson/widget-funnel" -import { widgetGauge } from "./echartsConfigJson/widget-gauge" -import { widgetMap } from "./echartsConfigJson/widget-map" -import { WidgetPieNightingale } from "./echartsConfigJson/widget-pie-nightingale" -import { widgetPiePercentage } from "./echartsConfigJson/widget-pie-percentage" -import { widgetAirbubbleMap } from "./echartsConfigJson/widget-airbubble-map" -import { widgetBarStack } from "./echartsConfigJson/widget-bar-stack" -import { widgetLineStack } from "./echartsConfigJson/widget-line-stack" -import { widgetBarCompare } from "./echartsConfigJson/widget-bar-compare" -import { widgetLineCompare } from "./echartsConfigJson/widget-line-compare" +import {widgetText} from "./echartsConfigJson/widget-text" +import {widgetMarquee} from "./echartsConfigJson/widget-marquee" +import {widgetHref} from "./echartsConfigJson/widget-href" +import {widgetTime} from "./echartsConfigJson/widget-time" +import {widgetImage} from "./echartsConfigJson/widget-image" +import {widgetSliders} from "./echartsConfigJson/widget-slider" +import {widgetVideo} from "./echartsConfigJson/widget-video" +import {widgetTable} from "./echartsConfigJson/widget-table" +import {widgetIframe} from "./echartsConfigJson/widget-iframe" +import {widgetUniversal} from "./echartsConfigJson/widget-universal" +import {widgetBarchart} from "./echartsConfigJson/widget-barchart" +import {widgetGradientBarchart} from "./echartsConfigJson/widget-gradient-barchart" +import {widgetLinechart} from "./echartsConfigJson/widget-linechart" +import {widgetBarlinechart} from "./echartsConfigJson/widget-barlinechart" +import {widgetPiechart} from "./echartsConfigJson/widget-piechart" +import {widgetFunnel} from "./echartsConfigJson/widget-funnel" +import {widgetGauge} from "./echartsConfigJson/widget-gauge" +import {widgetMap} from "./echartsConfigJson/widget-map" +import {WidgetPieNightingale} from "./echartsConfigJson/widget-pie-nightingale" +import {widgetPiePercentage} from "./echartsConfigJson/widget-pie-percentage" +import {widgetAirbubbleMap} from "./echartsConfigJson/widget-airbubble-map" +import {widgetBarStack} from "./echartsConfigJson/widget-bar-stack" +import {widgetLineStack} from "./echartsConfigJson/widget-line-stack" +import {widgetBarCompare} from "./echartsConfigJson/widget-bar-compare" +import {widgetLineCompare} from "./echartsConfigJson/widget-line-compare" +import {widgetDecoratePie} from "./echartsConfigJson/widget-decorate-pie"; export const widgetTool = [ // type=html类型的组件 @@ -59,5 +60,6 @@ export const widgetTool = [ widgetBarStack, widgetLineStack, widgetBarCompare, - widgetLineCompare + widgetLineCompare, + widgetDecoratePie ] diff --git a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarCompareChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarCompareChart.vue index 18142593..b757c8d3 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarCompareChart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarCompareChart.vue @@ -256,7 +256,7 @@ export default { handler(val) { this.optionsStyle = val.position; this.optionsData = val.data; - this.optionsSetup = val.setup; + this.optionsCollapse = val.setup; this.optionsSetup = val.setup; this.editorOptions(); }, diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarchart.vue similarity index 95% rename from report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue rename to report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarchart.vue index e02437fe..ed8a08bd 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarchart.vue @@ -299,32 +299,37 @@ export default { const optionsSetup = this.optionsSetup; const optionsData = this.optionsData; // 数据类型 静态 or 动态 optionsData.dataType == "staticData" - ? this.staticDataFn(optionsData.staticData, optionsSetup) + ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn( - optionsData.dynamicData, - optionsData.refreshTime, - optionsSetup + optionsData.dynamicData, + optionsData.refreshTime, + optionsSetup ); }, // 静态数据 - staticDataFn(val, optionsSetup) { - const staticData = typeof val == "string" ? JSON.parse(val) : val; + staticDataFn(val) { + const optionsSetup = this.optionsSetup; + const series = this.options.series; + let axis = []; + let data = []; + for (const i in val) { + axis[i] = val[i].axis; + data[i] = val[i].data + } // x轴 if (optionsSetup.verticalShow) { this.options.xAxis.data = []; - this.options.yAxis.data = staticData.categories; + this.options.yAxis.data = axis; this.options.xAxis.type = "value"; this.options.yAxis.type = "category"; } else { - this.options.xAxis.data = staticData.categories; + this.options.xAxis.data = axis; this.options.yAxis.data = []; this.options.xAxis.type = "category"; this.options.yAxis.type = "value"; } - // series - const series = this.options.series; if (series[0].type == "bar") { - series[0].data = staticData.series[0].data; + series[0].data = data; } }, // 动态数据 diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarlinechart.vue similarity index 59% rename from report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue rename to report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarlinechart.vue index 2102e0ba..1a937a09 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarlinechart.vue @@ -143,57 +143,57 @@ export default { }, // 标题修改 setOptionsTitle() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const title = {}; - title.text = optionsCollapse.titleText; - title.show = optionsCollapse.isNoTitle; - title.left = optionsCollapse.textAlign; + title.text = optionsSetup.titleText; + title.show = optionsSetup.isNoTitle; + title.left = optionsSetup.textAlign; title.textStyle = { - color: optionsCollapse.textColor, - fontSize: optionsCollapse.textFontSize, - fontWeight: optionsCollapse.textFontWeight + color: optionsSetup.textColor, + fontSize: optionsSetup.textFontSize, + fontWeight: optionsSetup.textFontWeight }; - title.subtext = optionsCollapse.subText; + title.subtext = optionsSetup.subText; title.subtextStyle = { - color: optionsCollapse.subTextColor, - fontWeight: optionsCollapse.subTextFontWeight, - fontSize: optionsCollapse.subTextFontSize + color: optionsSetup.subTextColor, + fontWeight: optionsSetup.subTextFontWeight, + fontSize: optionsSetup.subTextFontSize }; this.options.title = title; }, // X轴设置 setOptionsX() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const xAxis = { type: "category", - show: optionsCollapse.hideX, // 坐标轴是否显示 - name: optionsCollapse.xName, // 坐标轴名称 + show: optionsSetup.hideX, // 坐标轴是否显示 + name: optionsSetup.xName, // 坐标轴名称 nameTextStyle: { - color: optionsCollapse.nameColorX, - fontSize: optionsCollapse.nameFontSizeX + color: optionsSetup.nameColorX, + fontSize: optionsSetup.nameFontSizeX }, - nameRotate: optionsCollapse.textAngle, // 文字角度 - inverse: optionsCollapse.reversalX, // 轴反转 + nameRotate: optionsSetup.textAngle, // 文字角度 + inverse: optionsSetup.reversalX, // 轴反转 axisLabel: { show: true, - interval: optionsCollapse.textInterval, // 文字间隔 - rotate: optionsCollapse.textAngle, // 文字角度 + interval: optionsSetup.textInterval, // 文字间隔 + rotate: optionsSetup.textAngle, // 文字角度 textStyle: { - color: optionsCollapse.Xcolor, // x轴 坐标文字颜色 - fontSize: optionsCollapse.fontSizeX + color: optionsSetup.Xcolor, // x轴 坐标文字颜色 + fontSize: optionsSetup.fontSizeX } }, axisLine: { show: true, lineStyle: { - color: optionsCollapse.lineColorX + color: optionsSetup.lineColorX } }, splitLine: { - show: optionsCollapse.isShowSplitLineX, + show: optionsSetup.isShowSplitLineX, lineStyle: { - color: optionsCollapse.splitLineColorX + color: optionsSetup.splitLineColorX } } }; @@ -201,29 +201,29 @@ export default { }, // Y轴设置 setOptionsY() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const yAxis = [ { type: "value", - splitNumber: optionsCollapse.splitNumberLeft,// 均分 - show: optionsCollapse.isShowYLeft, // 坐标轴是否显示 - name: optionsCollapse.textNameYLeft, // 坐标轴名称 + splitNumber: optionsSetup.splitNumberLeft,// 均分 + show: optionsSetup.isShowYLeft, // 坐标轴是否显示 + name: optionsSetup.textNameYLeft, // 坐标轴名称 nameTextStyle: { // 别名 - color: optionsCollapse.nameColorYLeft, - fontSize: optionsCollapse.namefontSizeYLeft + color: optionsSetup.nameColorYLeft, + fontSize: optionsSetup.namefontSizeYLeft }, - inverse: optionsCollapse.reversalY, // 轴反转 + inverse: optionsSetup.reversalY, // 轴反转 axisLabel: { show: true, textStyle: { - color: optionsCollapse.colorY, // y轴 坐标文字颜色 - fontSize: optionsCollapse.fontSizeY + color: optionsSetup.colorY, // y轴 坐标文字颜色 + fontSize: optionsSetup.fontSizeY } }, axisLine: { show: true, lineStyle: { - color: optionsCollapse.lineColorY + color: optionsSetup.lineColorY } }, splitLine: { @@ -232,25 +232,25 @@ export default { }, { type: "value", - splitNumber: optionsCollapse.splitNumberRight,// 均分 - show: optionsCollapse.isShowYRight, // 坐标轴是否显示 - name: optionsCollapse.textNameYRight, // 坐标轴名称 + splitNumber: optionsSetup.splitNumberRight,// 均分 + show: optionsSetup.isShowYRight, // 坐标轴是否显示 + name: optionsSetup.textNameYRight, // 坐标轴名称 nameTextStyle: { // 别名 - color: optionsCollapse.nameColorYRight, - fontSize: optionsCollapse.namefontSizeYRight + color: optionsSetup.nameColorYRight, + fontSize: optionsSetup.namefontSizeYRight }, - inverse: optionsCollapse.reversalY, // 轴反转 + inverse: optionsSetup.reversalY, // 轴反转 axisLabel: { show: true, textStyle: { - color: optionsCollapse.colorY, // y轴 坐标文字颜色 - fontSize: optionsCollapse.fontSizeY + color: optionsSetup.colorY, // y轴 坐标文字颜色 + fontSize: optionsSetup.fontSizeY } }, axisLine: { show: true, lineStyle: { - color: optionsCollapse.lineColorY + color: optionsSetup.lineColorY } }, splitLine: { @@ -262,16 +262,16 @@ export default { }, // 折线设置 数值设置 setOptionsTop() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const series = this.options.series; for (const key in series) { if (series[key].type == "line") { - series[key].showSymbol = optionsCollapse.markPoint; - series[key].symbolSize = optionsCollapse.pointSize; - series[key].smooth = optionsCollapse.smoothCurve; - if (optionsCollapse.area) { + series[key].showSymbol = optionsSetup.markPoint; + series[key].symbolSize = optionsSetup.pointSize; + series[key].smooth = optionsSetup.smoothCurve; + if (optionsSetup.area) { series[key].areaStyle = { - opacity: optionsCollapse.areaThickness / 100 + opacity: optionsSetup.areaThickness / 100 }; } else { series[key].areaStyle = { @@ -279,16 +279,16 @@ export default { }; } series[key].lineStyle = { - width: optionsCollapse.lineWidth + width: optionsSetup.lineWidth }; - series[key].itemStyle.borderRadius = optionsCollapse.radius; + series[key].itemStyle.borderRadius = optionsSetup.radius; series[key].label = { - show: optionsCollapse.isShowLine, + show: optionsSetup.isShowLine, position: "top", - distance: optionsCollapse.distanceLine, - fontSize: optionsCollapse.fontSizeLine, - color: optionsCollapse.subTextColorLine, - fontWeight: optionsCollapse.fontWeightLine + distance: optionsSetup.distanceLine, + fontSize: optionsSetup.fontSizeLine, + color: optionsSetup.subTextColorLine, + fontWeight: optionsSetup.fontWeightLine }; } } @@ -296,71 +296,54 @@ export default { }, // 柱体设置 数值设置 setOptionsBar() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const series = this.options.series; for (const key in series) { if (series[key].type == "bar") { series[key].label = { - show: optionsCollapse.isShowBar, + show: optionsSetup.isShowBar, position: "top", - distance: optionsCollapse.distanceBar, - fontSize: optionsCollapse.fontSizeBar, - color: optionsCollapse.subTextColorBar, - fontWeight: optionsCollapse.fontWeightBar + distance: optionsSetup.distanceBar, + fontSize: optionsSetup.fontSizeBar, + color: optionsSetup.subTextColorBar, + fontWeight: optionsSetup.fontWeightBar }; - series[key].barWidth = optionsCollapse.maxWidth; - series[key].barMinHeight = optionsCollapse.minHeight; - series[key].itemStyle.barBorderRadius = optionsCollapse.radius; + series[key].barWidth = optionsSetup.maxWidth; + series[key].barMinHeight = optionsSetup.minHeight; + series[key].itemStyle.barBorderRadius = optionsSetup.radius; } } this.options.series = series; }, // tooltip 设置 setOptionsTooltip() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const tooltip = { trigger: "item", show: true, textStyle: { - color: optionsCollapse.lineColor, - fontSize: optionsCollapse.tipFontSize + color: optionsSetup.lineColor, + fontSize: optionsSetup.tipFontSize } }; this.options.tooltip = tooltip; }, // 边距设置 setOptionsMargin() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const grid = { - left: optionsCollapse.marginLeft, - right: optionsCollapse.marginRight, - bottom: optionsCollapse.marginBottom, - top: optionsCollapse.marginTop, + left: optionsSetup.marginLeft, + right: optionsSetup.marginRight, + bottom: optionsSetup.marginBottom, + top: optionsSetup.marginTop, containLabel: true }; this.options.grid = grid; }, -/* // 图例操作 legend - setOptionsLegend() { - const optionsCollapse = this.optionsSetup; - const legend = this.options.legend; - legend.show = optionsCollapse.isShowLegend; - legend.left = optionsCollapse.lateralPosition; - legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto"; - legend.bottom = - optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto"; - legend.orient = optionsCollapse.layoutFront; - legend.textStyle = { - color: optionsCollapse.lengedColor, - fontSize: optionsCollapse.lengedFontSize - }; - legend.itemWidth = optionsCollapse.lengedWidth; - console.log(legend); - },*/ // 图例颜色修改 setOptionsColor() { - const optionsCollapse = this.optionsSetup; - const customColor = optionsCollapse.customColor; + const optionsSetup = this.optionsSetup; + const customColor = optionsSetup.customColor; if (!customColor) return; const arrColor = []; for (let i = 0; i < customColor.length; i++) { @@ -377,16 +360,23 @@ export default { : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); }, staticDataFn(val) { - const staticData = typeof val == "string" ? JSON.parse(val) : val; + const series = this.options.series; + let axis = []; + let bar = []; + let line = []; + for (const i in val) { + axis[i] = val[i].axis; + bar[i] = val[i].bar; + line[i] = val[i].line; + } // x轴 - this.options.xAxis.data = staticData.xAxis; + this.options.xAxis.data = axis; // series - const series = this.options.series; for (const i in series) { - for (const j in staticData.series) { - if (series[i].type == staticData.series[j].type) { - series[i].data = staticData.series[j].data; - } + if (series[i].type == "bar") { + series[i].data = bar; + } else { + series[i].data = line; } } }, diff --git a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue index eed79f71..9daadfc5 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue @@ -384,32 +384,37 @@ export default { const optionsSetup = this.optionsSetup; const optionsData = this.optionsData; // 数据类型 静态 or 动态 optionsData.dataType == "staticData" - ? this.staticDataFn(optionsData.staticData, optionsSetup) + ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn( - optionsData.dynamicData, - optionsData.refreshTime, - optionsSetup + optionsData.dynamicData, + optionsData.refreshTime, + optionsSetup ); }, // 静态数据 - staticDataFn(val, optionsSetup) { - const staticData = typeof val == "string" ? JSON.parse(val) : val; + staticDataFn(val) { + const optionsSetup = this.optionsSetup; + const series = this.options.series; + let axis = []; + let data = []; + for (const i in val) { + axis[i] = val[i].axis; + data[i] = val[i].data + } // x轴 if (optionsSetup.verticalShow) { this.options.xAxis.data = []; - this.options.yAxis.data = staticData.categories; + this.options.yAxis.data = axis; this.options.xAxis.type = "value"; this.options.yAxis.type = "category"; } else { - this.options.xAxis.data = staticData.categories; + this.options.xAxis.data = axis; this.options.yAxis.data = []; this.options.xAxis.type = "category"; this.options.yAxis.type = "value"; } - // series - const series = this.options.series; if (series[0].type == "bar") { - series[0].data = staticData.series[0].data; + series[0].data = data; } }, // 动态数据 diff --git a/report-ui/src/views/report/bigscreen/designer/widget/decorate/widgetDecoratePieChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/decorate/widgetDecoratePieChart.vue new file mode 100644 index 00000000..58224866 --- /dev/null +++ b/report-ui/src/views/report/bigscreen/designer/widget/decorate/widgetDecoratePieChart.vue @@ -0,0 +1,490 @@ + + + + + diff --git a/report-ui/src/views/report/bigscreen/designer/widget/line/widgetLineCompareChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/line/widgetLineCompareChart.vue index 3d157b6a..b7c057e6 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/line/widgetLineCompareChart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/line/widgetLineCompareChart.vue @@ -252,7 +252,7 @@ export default { handler(val) { this.optionsStyle = val.position; this.optionsData = val.data; - this.optionsSetup = val.setup; + this.optionsCollapse = val.setup; this.optionsSetup = val.setup; this.editorOptions(); }, diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue b/report-ui/src/views/report/bigscreen/designer/widget/line/widgetLinechart.vue similarity index 61% rename from report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue rename to report-ui/src/views/report/bigscreen/designer/widget/line/widgetLinechart.vue index 615d97c3..87ad9b28 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/line/widgetLinechart.vue @@ -1,6 +1,6 @@ @@ -110,56 +110,56 @@ export default { }, // 标题修改 setOptionsTitle() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const title = {}; - title.text = optionsCollapse.titleText; - title.show = optionsCollapse.isNoTitle; - title.left = optionsCollapse.textAlign; + title.text = optionsSetup.titleText; + title.show = optionsSetup.isNoTitle; + title.left = optionsSetup.textAlign; title.textStyle = { - color: optionsCollapse.textColor, - fontSize: optionsCollapse.textFontSize, - fontWeight: optionsCollapse.textFontWeight + color: optionsSetup.textColor, + fontSize: optionsSetup.textFontSize, + fontWeight: optionsSetup.textFontWeight }; - title.subtext = optionsCollapse.subText; + title.subtext = optionsSetup.subText; title.subtextStyle = { - color: optionsCollapse.subTextColor, - fontWeight: optionsCollapse.subTextFontWeight, - fontSize: optionsCollapse.subTextFontSize + color: optionsSetup.subTextColor, + fontWeight: optionsSetup.subTextFontWeight, + fontSize: optionsSetup.subTextFontSize }; this.options.title = title; }, // X轴设置 setOptionsX() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const xAxis = { type: "category", - show: optionsCollapse.hideX, // 坐标轴是否显示 - name: optionsCollapse.xName, // 坐标轴名称 + show: optionsSetup.hideX, // 坐标轴是否显示 + name: optionsSetup.xName, // 坐标轴名称 nameTextStyle: { - color: optionsCollapse.nameColorX, - fontSize: optionsCollapse.nameFontSizeX + color: optionsSetup.nameColorX, + fontSize: optionsSetup.nameFontSizeX }, - nameRotate: optionsCollapse.textAngle, // 文字角度 - inverse: optionsCollapse.reversalX, // 轴反转 + nameRotate: optionsSetup.textAngle, // 文字角度 + inverse: optionsSetup.reversalX, // 轴反转 axisLabel: { show: true, - interval: optionsCollapse.textInterval, // 文字间隔 - rotate: optionsCollapse.textAngle, // 文字角度 + interval: optionsSetup.textInterval, // 文字间隔 + rotate: optionsSetup.textAngle, // 文字角度 textStyle: { - color: optionsCollapse.Xcolor, // x轴 坐标文字颜色 - fontSize: optionsCollapse.fontSizeX + color: optionsSetup.Xcolor, // x轴 坐标文字颜色 + fontSize: optionsSetup.fontSizeX } }, axisLine: { show: true, lineStyle: { - color: optionsCollapse.lineColorX + color: optionsSetup.lineColorX } }, splitLine: { - show: optionsCollapse.isShowSplitLineX, + show: optionsSetup.isShowSplitLineX, lineStyle: { - color: optionsCollapse.splitLineColorX + color: optionsSetup.splitLineColorX } } }; @@ -167,36 +167,36 @@ export default { }, // Y轴设置 setOptionsY() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const yAxis = { type: "value", - scale : optionsCollapse.scale, - splitNumber: optionsCollapse.splitNumber,// 均分 - show: optionsCollapse.isShowY, // 坐标轴是否显示 - name: optionsCollapse.textNameY, // 坐标轴名称 + scale: optionsSetup.scale, + splitNumber: optionsSetup.splitNumber,// 均分 + show: optionsSetup.isShowY, // 坐标轴是否显示 + name: optionsSetup.textNameY, // 坐标轴名称 nameTextStyle: { // 别名 - color: optionsCollapse.nameColorY, - fontSize: optionsCollapse.namefontSizeY + color: optionsSetup.nameColorY, + fontSize: optionsSetup.namefontSizeY }, - inverse: optionsCollapse.reversalY, // 轴反转 + inverse: optionsSetup.reversalY, // 轴反转 axisLabel: { show: true, - rotate: optionsCollapse.ytextAngle, // 文字角度 + rotate: optionsSetup.ytextAngle, // 文字角度 textStyle: { - color: optionsCollapse.colorY, // y轴 坐标文字颜色 - fontSize: optionsCollapse.fontSizeY + color: optionsSetup.colorY, // y轴 坐标文字颜色 + fontSize: optionsSetup.fontSizeY } }, axisLine: { show: true, lineStyle: { - color: optionsCollapse.lineColorY + color: optionsSetup.lineColorY } }, splitLine: { - show: optionsCollapse.isShowSplitLineY, + show: optionsSetup.isShowSplitLineY, lineStyle: { - color: optionsCollapse.splitLineColorY + color: optionsSetup.splitLineColorY } } }; @@ -204,16 +204,16 @@ export default { }, // 折线设置 setOptionsTop() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const series = this.options.series; for (const key in series) { if (series[key].type == "line") { - series[key].showSymbol = optionsCollapse.markPoint; - series[key].symbolSize = optionsCollapse.pointSize; - series[key].smooth = optionsCollapse.smoothCurve; - if (optionsCollapse.area) { + series[key].showSymbol = optionsSetup.markPoint; + series[key].symbolSize = optionsSetup.pointSize; + series[key].smooth = optionsSetup.smoothCurve; + if (optionsSetup.area) { series[key].areaStyle = { - opacity: optionsCollapse.areaThickness / 100 + opacity: optionsSetup.areaThickness / 100 }; } else { series[key].areaStyle = { @@ -222,15 +222,15 @@ export default { } series[key].lineStyle = { - width: optionsCollapse.lineWidth + width: optionsSetup.lineWidth }; series[key].label = { - show: optionsCollapse.isShow, + show: optionsSetup.isShow, position: "top", distance: 10, - fontSize: optionsCollapse.fontSize, - color: optionsCollapse.subTextColor, - fontWeight: optionsCollapse.fontWeight + fontSize: optionsSetup.fontSize, + color: optionsSetup.subTextColor, + fontWeight: optionsSetup.fontWeight }; } } @@ -238,50 +238,50 @@ export default { }, // tooltip 设置 setOptionsTooltip() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const tooltip = { trigger: "item", show: true, textStyle: { - color: optionsCollapse.lineColor, - fontSize: optionsCollapse.fontSize + color: optionsSetup.lineColor, + fontSize: optionsSetup.fontSize } }; this.options.tooltip = tooltip; }, // 边距设置 setOptionsMargin() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const grid = { - left: optionsCollapse.marginLeft, - right: optionsCollapse.marginRight, - bottom: optionsCollapse.marginBottom, - top: optionsCollapse.marginTop, + left: optionsSetup.marginLeft, + right: optionsSetup.marginRight, + bottom: optionsSetup.marginBottom, + top: optionsSetup.marginTop, containLabel: true }; this.options.grid = grid; }, // 图例操作 legend setOptionsLegend() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const legend = this.options.legend; - legend.show = optionsCollapse.isShowLegend; - legend.left = optionsCollapse.lateralPosition == "left" ? 0 : "auto"; - legend.right = optionsCollapse.lateralPosition == "right" ? 0 : "auto"; - legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto"; + legend.show = optionsSetup.isShowLegend; + legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto"; + legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto"; + legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto"; legend.bottom = - optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto"; - legend.orient = optionsCollapse.layoutFront; + optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto"; + legend.orient = optionsSetup.layoutFront; legend.textStyle = { - color: optionsCollapse.lengedColor, - fontSize: optionsCollapse.fontSize + color: optionsSetup.lengedColor, + fontSize: optionsSetup.fontSize }; - legend.itemWidth = optionsCollapse.lengedWidth; + legend.itemWidth = optionsSetup.lengedWidth; }, // 图例颜色修改 setOptionsColor() { - const optionsCollapse = this.optionsSetup; - const customColor = optionsCollapse.customColor; + const optionsSetup = this.optionsSetup; + const customColor = optionsSetup.customColor; if (!customColor) return; const arrColor = []; for (let i = 0; i < customColor.length; i++) { @@ -298,14 +298,19 @@ export default { : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); }, staticDataFn(val) { - const staticData = typeof val == "string" ? JSON.parse(val) : val; + const series = this.options.series; + let axis = []; + let data = []; + for (const i in val) { + axis[i] = val[i].axis; + data[i] = val[i].data + } // x轴 - this.options.xAxis.data = staticData.categories; + this.options.xAxis.data = axis; // series - const series = this.options.series; for (const i in series) { if (series[i].type == "line") { - series[i].data = staticData.series[0].data; + series[i].data = data; } } }, diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetGauge.vue b/report-ui/src/views/report/bigscreen/designer/widget/percent/widgetGauge.vue similarity index 99% rename from report-ui/src/views/report/bigscreen/designer/widget/widgetGauge.vue rename to report-ui/src/views/report/bigscreen/designer/widget/percent/widgetGauge.vue index 6c26c7d8..74e07d31 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetGauge.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/percent/widgetGauge.vue @@ -259,9 +259,10 @@ export default { staticDataFn(val) { const optionsSetup = this.optionsSetup; const series = this.options.series; + const num = val[0]['num']; const data = [ { - value: val + value: num } ] const detail = { diff --git a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiePercentageChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/percent/widgetPiePercentageChart.vue similarity index 96% rename from report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiePercentageChart.vue rename to report-ui/src/views/report/bigscreen/designer/widget/percent/widgetPiePercentageChart.vue index fe819189..bed2427f 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiePercentageChart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/percent/widgetPiePercentageChart.vue @@ -361,20 +361,20 @@ export default { this.setOptionSurplusColor(); }, setOptionsTitle() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const title = this.options.title; title.x = "center"; title.y = "center"; const rich = { nums: { - fontSize: optionsCollapse.textNumFontSize, - color: optionsCollapse.textNumColor, - fontWeight: optionsCollapse.textNumFontWeight + fontSize: optionsSetup.textNumFontSize, + color: optionsSetup.textNumColor, + fontWeight: optionsSetup.textNumFontWeight }, percent: { - fontSize: optionsCollapse.textPerFontSize, - color: optionsCollapse.textPerColor, - fontWeight: optionsCollapse.textPerFontWeight + fontSize: optionsSetup.textPerFontSize, + color: optionsSetup.textPerColor, + fontWeight: optionsSetup.textPerFontWeight } }; title.textStyle['rich'] = rich; @@ -445,9 +445,10 @@ export default { }, staticDataFn(val) { const title = this.options.title; - title.text = '{nums|' + val + '}{percent|%}'; - this.options.series[6]['data'][0]['value'] = val; - this.options.series[6]['data'][1]['value'] = 100 - val; + const num = val[0]['num']; + title.text = '{nums|' + num + '}{percent|%}'; + this.options.series[6]['data'][0]['value'] = num; + this.options.series[6]['data'][1]['value'] = 100 - num; }, dynamicDataFn(val, refreshTime) { if (!val) return; diff --git a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRose.vue b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRose.vue index fabaa6f4..fccb7274 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRose.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRose.vue @@ -59,7 +59,6 @@ export default { watch: { value: { handler(val) { - console.log(val); this.optionsStyle = val.position; this.optionsData = val.data; this.optionsCollapse = val.setup; diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetPiechart.vue b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiechart.vue similarity index 72% rename from report-ui/src/views/report/bigscreen/designer/widget/widgetPiechart.vue rename to report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiechart.vue index de26b6f1..1124a94c 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetPiechart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiechart.vue @@ -1,6 +1,6 @@ @@ -103,86 +103,86 @@ export default { }, // 标题设置 setOptionsTitle() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const title = {}; - title.show = optionsCollapse.isNoTitle; - title.text = optionsCollapse.titleText; - title.left = optionsCollapse.textAlign; + title.show = optionsSetup.isNoTitle; + title.text = optionsSetup.titleText; + title.left = optionsSetup.textAlign; title.textStyle = { - color: optionsCollapse.textColor, - fontSize: optionsCollapse.textFontSize, - fontWeight: optionsCollapse.textFontWeight + color: optionsSetup.textColor, + fontSize: optionsSetup.textFontSize, + fontWeight: optionsSetup.textFontWeight }; - title.subtext = optionsCollapse.subText; + title.subtext = optionsSetup.subText; title.subtextStyle = { - color: optionsCollapse.subTextColor, - fontWeight: optionsCollapse.subTextFontWeight, - fontSize: optionsCollapse.subTextFontSize + color: optionsSetup.subTextColor, + fontWeight: optionsSetup.subTextFontWeight, + fontSize: optionsSetup.subTextFontSize }; this.options.title = title; }, // 数值设定 setOptionsValue() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const series = this.options.series; - const numberValue = optionsCollapse.numberValue ? "{c}" : ""; - const percentage = optionsCollapse.percentage ? "({d})%" : ""; + const numberValue = optionsSetup.numberValue ? "{c}" : ""; + const percentage = optionsSetup.percentage ? "({d})%" : ""; const label = { - show: optionsCollapse.isShow, + show: optionsSetup.isShow, formatter: `{a|{b}：${numberValue} ${percentage}}`, rich: { a: { padding: [-30, 15, -20, 15], - color: optionsCollapse.subTextColor, - fontSize: optionsCollapse.fontSize, - fontWeight: optionsCollapse.fontWeight + color: optionsSetup.subTextColor, + fontSize: optionsSetup.fontSize, + fontWeight: optionsSetup.fontWeight } }, - fontSize: optionsCollapse.fontSize, + fontSize: optionsSetup.fontSize, - fontWeight: optionsCollapse.optionsCollapse + fontWeight: optionsSetup.optionsSetup }; for (const key in series) { if (series[key].type == "pie") { series[key].label = label; - series[key].labelLine = { show: optionsCollapse.isShow }; + series[key].labelLine = {show: optionsSetup.isShow}; } } }, // 提示语设置 tooltip setOptionsTooltip() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const tooltip = { trigger: "item", show: true, textStyle: { - color: optionsCollapse.lineColor, - fontSize: optionsCollapse.fontSize + color: optionsSetup.lineColor, + fontSize: optionsSetup.fontSize } }; this.options.tooltip = tooltip; }, // 图例操作 legend setOptionsLegend() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const legend = this.options.legend; - legend.show = optionsCollapse.isShowLegend; - legend.left = optionsCollapse.lateralPosition == "left" ? 0 : "auto"; - legend.right = optionsCollapse.lateralPosition == "right" ? 0 : "auto"; - legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto"; + legend.show = optionsSetup.isShowLegend; + legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto"; + legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto"; + legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto"; legend.bottom = - optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto"; - legend.orient = optionsCollapse.layoutFront; + optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto"; + legend.orient = optionsSetup.layoutFront; legend.textStyle = { - color: optionsCollapse.lengedColor, - fontSize: optionsCollapse.fontSize + color: optionsSetup.lengedColor, + fontSize: optionsSetup.fontSize }; - legend.itemWidth = optionsCollapse.lengedWidth; + legend.itemWidth = optionsSetup.lengedWidth; }, // 图例颜色修改 setOptionsColor() { - const optionsCollapse = this.optionsSetup; - const customColor = optionsCollapse.customColor; + const optionsSetup = this.optionsSetup; + const customColor = optionsSetup.customColor; if (!customColor) return; const arrColor = []; for (let i = 0; i < customColor.length; i++) { diff --git a/report-ui/src/views/report/bigscreen/designer/widget/temp.vue b/report-ui/src/views/report/bigscreen/designer/widget/temp.vue index f0b126d4..f2225df4 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/temp.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/temp.vue @@ -6,7 +6,7 @@ !--> @@ -19,22 +19,23 @@ import widgetImage from "./widgetImage.vue"; import widgetSlider from "./widgetSlider.vue"; import widgetVideo from "./widgetVideo.vue"; import WidgetIframe from "./widgetIframe.vue"; -import widgetBarchart from "./widgetBarchart.vue"; -import widgetLinechart from "./widgetLinechart.vue"; -import widgetBarlinechart from "./widgetBarlinechart"; +import widgetBarchart from "./bar/widgetBarchart.vue"; +import widgetLinechart from "./line/widgetLinechart.vue"; +import widgetBarlinechart from "./bar/widgetBarlinechart"; import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue"; -import WidgetPiechart from "./widgetPiechart.vue"; +import WidgetPiechart from "./pie/widgetPiechart.vue"; import WidgetFunnel from "./widgetFunnel.vue"; -import WidgetGauge from "./widgetGauge.vue"; +import WidgetGauge from "./percent/widgetGauge.vue"; import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRose"; import widgetTable from "./widgetTable.vue"; import widgetMap from "./widgetMap.vue"; -import widgetPiePercentageChart from "./pie/widgetPiePercentageChart"; +import widgetPiePercentageChart from "./percent/widgetPiePercentageChart"; import widgetAirBubbleMap from "./map/widgetAirBubbleMap"; import widgetBarStackChart from "./bar/widgetBarStackChart"; import widgetLineStackChart from "./line/widgetLineStackChart"; import widgetBarCompareChart from "./bar/widgetBarCompareChart"; import widgetLineCompareChart from "./line/widgetLineCompareChart"; +import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart"; export default { name: "WidgetTemp", @@ -62,7 +63,8 @@ export default { widgetBarStackChart, widgetLineStackChart, widgetBarCompareChart, - widgetLineCompareChart + widgetLineCompareChart, + widgetDecoratePieChart }, model: { prop: "value", @@ -72,13 +74,15 @@ export default { type: String, value: { type: [Object], - default: () => {} + default: () => { + } } }, data() { return {}; }, - mounted() {}, + mounted() { + }, methods: {} }; diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widget.vue b/report-ui/src/views/report/bigscreen/designer/widget/widget.vue index ba4b3552..0dcaf2af 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widget.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widget.vue @@ -17,7 +17,7 @@ @focus="handleFocus" @blur="handleBlur" > - + @@ -30,22 +30,23 @@ import widgetImage from "./widgetImage.vue"; import widgetSlider from "./widgetSlider.vue"; import widgetVideo from "./widgetVideo.vue"; import WidgetIframe from "./widgetIframe.vue"; -import widgetBarchart from "./widgetBarchart.vue"; +import widgetBarchart from "./bar/widgetBarchart.vue"; import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue"; -import widgetLinechart from "./widgetLinechart.vue"; -import widgetBarlinechart from "./widgetBarlinechart"; -import WidgetPiechart from "./widgetPiechart.vue"; +import widgetLinechart from "./line/widgetLinechart.vue"; +import widgetBarlinechart from "./bar/widgetBarlinechart"; +import WidgetPiechart from "./pie/widgetPiechart.vue"; import WidgetFunnel from "./widgetFunnel.vue"; -import WidgetGauge from "./widgetGauge.vue"; +import WidgetGauge from "./percent/widgetGauge.vue"; import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRose"; import widgetTable from "./widgetTable.vue"; import widgetMap from "./widgetMap.vue"; -import widgetPiePercentageChart from "./pie/widgetPiePercentageChart"; +import widgetPiePercentageChart from "./percent/widgetPiePercentageChart"; import widgetAirBubbleMap from "./map/widgetAirBubbleMap"; import widgetBarStackChart from "./bar/widgetBarStackChart"; import widgetLineStackChart from "./line/widgetLineStackChart"; import widgetBarCompareChart from "./bar/widgetBarCompareChart"; import widgetLineCompareChart from "./line/widgetLineCompareChart"; +import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart"; export default { name: "Widget", @@ -73,7 +74,8 @@ export default { widgetBarStackChart, widgetLineStackChart, widgetBarCompareChart, - widgetLineCompareChart + widgetLineCompareChart, + widgetDecoratePieChart }, model: { prop: "value", @@ -89,7 +91,8 @@ export default { bigscreen: Object, value: { type: [Object], - default: () => {} + default: () => { + } }, step: Number }, @@ -119,11 +122,13 @@ export default { return this.value.position.zIndex || 1; } }, - mounted() {}, + mounted() { + }, methods: { - handleFocus({ index, left, top, width, height }) {}, - handleBlur({ index, left, top, width, height }) { - this.$emit("onActivated", { index, left, top, width, height }); + handleFocus({index, left, top, width, height}) { + }, + handleBlur({index, left, top, width, height}) { + this.$emit("onActivated", {index, left, top, width, height}); this.$refs.draggable.setActive(true); } } @@ -134,11 +139,13 @@ export default { .vue-draggalbe { position: absolute; } + .widget-active { cursor: move; border: 1px dashed #09f; background-color: rgba(115, 170, 229, 0.5); } + .avue-draggable { padding: 0 !important; } diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetFunnel.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetFunnel.vue index f9ef6a55..9ef5f5f3 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetFunnel.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetFunnel.vue @@ -1,6 +1,6 @@ @@ -24,9 +24,11 @@ export default { }, tooltip: { trigger: "item", - formatter: "{a}
{b} : {c}%" + formatter: "{a}
{b} : {c}" }, legend: { + x: 'center', + y: '92%', textStyle: { color: "#fff" } @@ -35,34 +37,34 @@ export default { { name: "", type: "funnel", - left: "10%", - top: 60, - bottom: 60, + left: "center", width: "80%", - min: 0, - max: 100, - minSize: "0%", - maxSize: "100%", + //maxSize: '80%', sort: "descending", - gap: 2, label: { - show: true, - position: "inside" - }, - labelLine: { - length: 10, - lineStyle: { - width: 1, - type: "solid" + normal: { + show: true, + position: 'inside', + formatter: '{c}', + textStyle: { + color: '#fff', + fontSize: 14, + } + }, + emphasis: { + position: 'inside', + formatter: '{b}: {c}' } }, itemStyle: { - borderColor: "#fff", - borderWidth: 1 - }, - emphasis: { - label: { - fontSize: 20 + normal: { + opacity: 0.8, + borderColor: 'rgba(12, 13, 43, .9)', + borderWidth: 1, + shadowBlur: 4, + shadowOffsetX: 0, + shadowOffsetY: 0, + shadowColor: 'rgba(0, 0, 0, .6)' } }, data: [] @@ -109,6 +111,7 @@ export default { methods: { // 修改图标options属性 editorOptions() { + this.setEnding(); this.setOptionsText(); this.setOptionsTitle(); this.setOptionsTooltip(); @@ -116,79 +119,86 @@ export default { this.setOptionsColor(); this.setOptionsData(); }, - // 文字设置 - setOptionsText() { - const optionsCollapse = this.optionsSetup; + // 翻转 + setEnding() { + const optionsSetup = this.optionsSetup; const series = this.options.series; - - for (const key in series) { - if (series[key].type == "funnel") { - series[key].label.show = optionsCollapse.isShow; - series[key].label.fontSize = optionsCollapse.fontSize; - series[key].label.color = optionsCollapse.color; - series[key].label.fontWeight = optionsCollapse.fontWeight; - - series[key].sort = optionsCollapse.reversal - ? "ascending" - : "descending"; + if (optionsSetup.ending) { + series[0].sort = "ascending"; + } else { + series[0].sort = "descending"; + } + }, + // 数值设置 + setOptionsText() { + const optionsSetup = this.optionsSetup; + const normal = { + show: optionsSetup.isShow, + position: 'inside', + formatter: '{c}', + textStyle: { + color: optionsSetup.color, + fontSize: optionsSetup.fontSize, + fontWeight: optionsSetup.fontWeight, } } + this.options.series[0].label['normal'] = normal; }, // 标题修改 setOptionsTitle() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const title = {}; - title.show = optionsCollapse.isNoTitle; - title.text = optionsCollapse.titleText; - title.left = optionsCollapse.textAlign; + title.text = optionsSetup.titleText; + title.show = optionsSetup.isNoTitle; + title.left = optionsSetup.textAlign; title.textStyle = { - color: optionsCollapse.textColor, - fontSize: optionsCollapse.textFontSize, - fontWeight: optionsCollapse.textFontWeight + color: optionsSetup.textColor, + fontSize: optionsSetup.textFontSize, + fontWeight: optionsSetup.textFontWeight }; - title.subtext = optionsCollapse.subText; + title.subtext = optionsSetup.subText; title.subtextStyle = { - color: optionsCollapse.subTextColor, - fontWeight: optionsCollapse.subTextFontWeight, - fontSize: optionsCollapse.subTextFontSize + color: optionsSetup.subTextColor, + fontWeight: optionsSetup.subTextFontWeight, + fontSize: optionsSetup.subTextFontSize }; this.options.title = title; }, // 提示语设置 tooltip setOptionsTooltip() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const tooltip = { trigger: "item", show: true, textStyle: { - color: optionsCollapse.lineColor, - fontSize: optionsCollapse.fontSize + color: optionsSetup.lineColor, + fontSize: optionsSetup.tipFontSize } }; this.options.tooltip = tooltip; }, // 图例操作 legend setOptionsLegend() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const legend = this.options.legend; - legend.show = optionsCollapse.isShowLegend; - legend.left = optionsCollapse.lateralPosition == "left" ? 0 : "auto"; - legend.right = optionsCollapse.lateralPosition == "right" ? 0 : "auto"; - legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto"; + legend.show = optionsSetup.isShowLegend; + legend.left = optionsSetup.lateralPosition; + legend.right = optionsSetup.lateralPosition; + legend.top = optionsSetup.longitudinalPosition; legend.bottom = - optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto"; - legend.orient = optionsCollapse.layoutFront; + optionsSetup.longitudinalPosition; + legend.orient = optionsSetup.layoutFront; legend.textStyle = { - color: optionsCollapse.lengedColor, - fontSize: optionsCollapse.fontSize + color: optionsSetup.lengedColor, + fontSize: optionsSetup.lengedFontSize }; - legend.itemWidth = optionsCollapse.lengedWidth; + legend.itemWidth = optionsSetup.lengedWidth; }, // 图例颜色修改 setOptionsColor() { - const optionsCollapse = this.optionsSetup; - const customColor = optionsCollapse.customColor; + const optionsSetup = this.optionsSetup; + const customColor = optionsSetup.customColor; if (!customColor) return; const arrColor = []; for (let i = 0; i < customColor.length; i++) { diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetTable.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetTable.vue index 0cdcda66..620ea3c6 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetTable.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetTable.vue @@ -143,12 +143,12 @@ export default { const tableData = this.optionsData; tableData.dataType == "staticData" ? this.handlerStaticData(tableData.staticData) - : this.handlerDymaicData(tableData.dynamicData, tableData.refreshTime); + : this.handlerDynamicData(tableData.dynamicData, tableData.refreshTime); }, handlerStaticData(data) { this.list = data; }, - handlerDymaicData(data, refreshTime) { + handlerDynamicData(data, refreshTime) { if (!data) return; if (this.ispreview) { this.getEchartData(data); diff --git a/report-ui/src/views/report/resultset/components/EditDataSet.vue b/report-ui/src/views/report/resultset/components/EditDataSet.vue index 4d747fad..27cb9a4d 100644 --- a/report-ui/src/views/report/resultset/components/EditDataSet.vue +++ b/report-ui/src/views/report/resultset/components/EditDataSet.vue @@ -15,7 +15,7 @@ label-width="130px" > - + + + + - +
+ + + + + + + + + + + + + + + + + + + @@ -508,7 +530,13 @@ export default { setName: "", setCode: "" }, - + setType: '', //数据集类型，主要用于区分http addSql addHttp edit + httpForm: { //http数据源相关数据 + apiUrl: '', + method: 'GET', + header: '{"Content-Type":"application/json;charset=UTF-8"}', + body: '', + }, //待删除 dictionaryOptions: [], // 数据源类型 list: null, @@ -541,7 +569,11 @@ export default { mounted() {}, methods: { // 编辑数据集,获取单条数据详情 - async addOrEditDataSet(row) { + async addOrEditDataSet(row, type) { + this.setType = type + if (type == 'http' && row.dynSentence) { + this.httpForm = JSON.parse(row.dynSentence) + } //获取数据源下拉 const { code, data } = await queryAllDataSourceSet(); if (code != "200") return; @@ -636,12 +668,18 @@ export default { // 测试预览 async handleClickTabs(tab, event) { + if (this.setType == 'http') { + //针对http数据源 + console.log("http数据集" + this.httpForm); + this.formData.dynSentence = JSON.stringify(this.httpForm) + } if (tab.paneName == "third") { const params = { sourceCode: this.formData.sourceCode, dynSentence: this.formData.dynSentence, dataSetParamDtoList: this.tableData, - dataSetTransformDtoList: this.itemFilterList + dataSetTransformDtoList: this.itemFilterList, + setType: this.setType }; const { code, data } = await testTransformSet(params); if (code != "200") return; @@ -831,6 +869,12 @@ export default { }); }, async submit(formName) { + if (this.setType == 'http') { + //针对http数据源 + console.log("http数据集" + this.httpForm); + this.formData.dynSentence = JSON.stringify(this.httpForm) + } + this.formData.setType = this.setType this.$refs[formName].validate(async (valid, obj) => { if (valid) { if (this.testMassageCode == 200) { diff --git a/report-ui/src/views/report/resultset/components/util/sql-completion.js b/report-ui/src/views/report/resultset/components/util/sql-completion.js index 537057be..9ebcc029 100644 --- a/report-ui/src/views/report/resultset/components/util/sql-completion.js +++ b/report-ui/src/views/report/resultset/components/util/sql-completion.js @@ -34,7 +34,7 @@ const hints = [ "PREPARE", "EXECUTE", "DESCRIBE", - "FORM", + "FROM", "ORDER BY"] function createCompleter(getExtraHints) { const createSuggestions = function (model, textUntilPosition) { @@ -79,4 +79,4 @@ function createCompleter(getExtraHints) { } } } -export default createCompleter; \ No newline at end of file +export default createCompleter; diff --git a/report-ui/src/views/report/resultset/index.vue b/report-ui/src/views/report/resultset/index.vue index cb5aaf4f..82fe522d 100644 --- a/report-ui/src/views/report/resultset/index.vue +++ b/report-ui/src/views/report/resultset/index.vue @@ -1,13 +1,19 @@ @@ -95,7 +101,15 @@ export default { }, label: "数据源", field: "sourceCode" - } + }, + { + inputType: "anji-select", //form表单类型 input|input-number|anji-select(传递url或者dictCode)|anji-tree(左侧树)|date|datetime|datetimerange + anjiSelectOption: { + dictCode: "SET_TYPE" + }, + label: "数据集类型", + field: "setType" + }, ], // 操作按钮 buttons: { @@ -143,7 +157,7 @@ export default { editField: "setCode", inputType: "input", rules: [ - { min: 1, max: 50, message: "不超过50个字符", trigger: "blur" } + {min: 1, max: 50, message: "不超过50个字符", trigger: "blur"} ], disabled: false }, @@ -154,7 +168,7 @@ export default { editField: "setName", inputType: "input", rules: [ - { min: 1, max: 100, message: "不超过100个字符", trigger: "blur" } + {min: 1, max: 100, message: "不超过100个字符", trigger: "blur"} ], disabled: false }, @@ -165,7 +179,7 @@ export default { editField: "setDesc", inputType: "input", rules: [ - { min: 1, max: 255, message: "不超过255个字符", trigger: "blur" } + {min: 1, max: 255, message: "不超过255个字符", trigger: "blur"} ], disabled: false }, @@ -176,7 +190,18 @@ export default { editField: "sourceCode", inputType: "input", rules: [ - { min: 1, max: 50, message: "不超过50个字符", trigger: "blur" } + {min: 1, max: 50, message: "不超过50个字符", trigger: "blur"} + ], + disabled: false + }, + { + label: "数据集类型", //数据源编码 + placeholder: "", + field: "setType", + editField: "setType", + inputType: "input", + rules: [ + {min: 1, max: 50, message: "不超过50个字符", trigger: "blur"} ], disabled: false }, @@ -245,16 +270,19 @@ export default { }; }, - created() {}, + created() { + }, methods: { operateDataset(type, prop) { + debugger this.dialogVisibleSetDataSet = true; - if (prop) { + if (prop && prop.msg) { this.dataSet = prop.msg; + type = prop.msg.setType; } else { this.dataSet = {}; } - this.$refs.EditDataSet.addOrEditDataSet(this.dataSet); + this.$refs.EditDataSet.addOrEditDataSet(this.dataSet, type); }, refreshList() { this.$refs.listPage.handleQueryForm("query");