diff --git a/README.md b/README.md index 47d31b3e3a5e05ab8153305f03571f18814932da..2b04ccc01e587b0be41aeb2cb8fea3b45ea5e3e6 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,8 @@ ## 简介     AJ-Report是全开源的一个BI平台，酷炫大屏展示，能随时随地掌控业务动态，让每个决策都有数据支撑。
-    多数据源支持，内置mysql、elasticsearch、kudu驱动，支持自定义数据集省去数据接口开发，目前已支持25种大屏组件/图表，不会开发，照着设计稿也可以制作大屏。
+    +多数据源支持，内置mysql、elasticsearch、kudu驱动，支持自定义数据集省去数据接口开发，目前已支持25种大屏组件/图表，不会开发，照着设计稿也可以制作大屏。
    三步轻松完成大屏设计：配置数据源---->写SQL配置数据集---->拖拽配置大屏---->保存发布。欢迎体验。 ## 在线体验 @@ -20,11 +21,13 @@ ####   组件介绍 -   大屏设计（AJ-Report）是一个可视化拖拽编辑的，直观，酷炫，具有科技感的图表工具全开源项目。 内置的基础功能包括数据源，数据集，报表管理，项目部分截图如下。
+   大屏设计（AJ-Report）是一个可视化拖拽编辑的，直观，酷炫，具有科技感的图表工具全开源项目。 +内置的基础功能包括数据源，数据集，报表管理，项目部分截图如下。
![操作](https://images.gitee.com/uploads/images/2021/0703/094742_c0243f70_1728982.gif "2021-07-03_09-43-50.gif") **[更多社区大屏案例](https://ajreport.beliefteam.cn/report-doc/guide/bigScreenCase.html)**
+**[社区大屏下载链接](https://ajreport.beliefteam.cn/download/)**
## 数据流程图 @@ -96,6 +99,7 @@ 源码 doc -> docs -> guide 目录下即所有文档
### 发行版部署 + **[发行版部署参考文档](https://ajreport.beliefteam.cn/report-doc/guide/quicklyDistribution.html)**
``` @@ -113,6 +117,7 @@ http://serverip:9095 ``` ### 源码编译部署 + **[源码编译部署参考文档](https://ajreport.beliefteam.cn/report-doc/guide/quicklySource.html)**
在Linux上先准备好maven、node.js、jdk @@ -156,7 +161,8 @@ sql文件的目录在：report-core --> src --> main --> resources -- > db.migra ## 谁在使用 -希望你们的logo出现在此，[请点此Issue进行登记](https://gitee.com/anji-plus/report/issues/I3ZXT4) ，我们将优先进行技术支持
+感谢关注并使用AJ-Report的朋友，如果贵公司、组织、学校等正在使用AJ-Report，希望可以按照此[Issue](https://gitee.com/anji-plus/report/issues/I3ZXT4) +登记并提供贵公司、组织、学校的logo，我们将把贵方的logo放在项目首页进行展示并优先进行技术支持
@@ -170,14 +176,8 @@ sql文件的目录在：report-core --> src --> main --> resources -- > db.migra
- -## 未来计划 - -- 大屏宽高动态可视化 -- nodeV16适配 -- 增加省市区地图等图 -- 增加基础边框样式 -- Excel报表功能增加与bug修复 + +
## 已知问题 @@ -185,11 +185,11 @@ sql文件的目录在：report-core --> src --> main --> resources -- > db.migra ## 版本问题 -已知以下版本存在兼容性问题 +已知以下版本存在兼容性问题，请不要使用 -- Node.js V16 +- Node.js V16及以上 - openJdk -- Jdk 11 +- Jdk 1.7及以下/11及以上（jdk11部分版本有问题） - Mysql 8.0（8.0.23/26版本没有问题，8.0.21版本存在问题） **[常见问题](https://ajreport.beliefteam.cn/report-doc/guide/question.html)** @@ -202,18 +202,41 @@ AJ-Report使用[Apache2.0开源协议](http://www.apache.org/licenses/LICENSE-2. - 包含AJ-Report LICENSE文件（授权使用者免费使用AJ-Report专利和知识产权） - 如果修改了代码，需要在被修改的文件中说明 - 在修改和有源代码衍生的代码中，需要带有原来代码中的协议，商标 -- 在二次开发后商业发布的产品中，使用了多个开源软件，则必须包含一个Notice文件，在Notice文件中需要带有AJ-Report LICENSE。你可以在Notice中增加自己的许可，但不可以表现为对AJ-Report +- 在二次开发后商业发布的产品中，使用了多个开源软件，则必须包含一个Notice文件，在Notice文件中需要带有AJ-Report + LICENSE。你可以在Notice中增加自己的许可，但不可以表现为对AJ-Report LICENSE构成更改。 -如果您需要商业化增值服务，请加下面的微信沟通，并直接说明来意。 - ## 技术支持 **如有问题，请提交 [Issue](https://gitee.com/anji-plus/report/issues)
** -个人企业微信：加微信进群备注 AJ-Report 或者 Report
-如果不是为了进群，请直接说明来意，每天加群的都很多，企微也是我们自己的工作企微，会有很多消息会被刷下去，如果半天没有回复你，请发送多次。如果加了之后一言不发，不好意思，我直接忽略，我也不知道你要干嘛。
- +AJ-Report技术交流四群，新群可直接加，**如果要加1/2/3号群，请加下面个人企微，并备注你要加的群号**
+
+ +个人企业微信：加微信进群备注 **AJ-Report** 或者 **Report**，**一定要加备注 ！！！**
+如果不是为了进群，请直接说明来意，每天加群的都很多，企微也是我们自己的工作企微，会有很多消息会被刷下去，如果半天没有回复你，请过段时间再发送。
+ + +## 加入我们 + +- 提交PR是最快的加入方式:
+ · PR可以包含新功能、现有功能的改进。
+ . PR请提交到dev分支
+- 提供文档原文或者文档链接:
+ . 文档原文的话，请放在doc/docs/guide/community目录下，可直接提交pr
+ . 文档链接的话，文档需要完全的公开，不掺杂收费等相关内容，审核通过会放在首页
+- 提供大屏模板:
+ . 可将自己设计好的大屏进行导出(不包含数据集)，将导出产生的压缩包提供给我们（加个人企微）
+ . 提供的大屏将会在AJ-Report在线演示环境进行展示和供其他人下载
#### 开源不易，劳烦各位star ☺ +## 感谢JetBrains 的支持 + +#### JetBrains:[https://www.jetbrains.com/?from=AJ-Report](https://www.jetbrains.com/?from=AJ-Report"链接") + +
+ +## Stargazers over time + +[![Stargazers over time](https://starchart.cc/anji-plus/report.svg)](https://starchart.cc/anji-plus/report) diff --git a/doc/docs/guide/charts.md b/doc/docs/guide/charts.md index a2f2b96d57b05b335b8546b3608aa187c8062547..a04aa39a99809740aec909d0f12797950fec7f91 100644 --- a/doc/docs/guide/charts.md +++ b/doc/docs/guide/charts.md @@ -230,3 +230,26 @@ ![img23](../picture/charts/img_23.png)
**如有问题，请提交 [Issue](https://gitee.com/anji-plus/report/issues)
** + +## 雷达图 + +基本操作和表格是一致，通过配置栏的新增按钮和操作按钮对雷达顶点数量进行修改，可生成5边雷达，6边雷达等等，key值和雷达顶点保持一致，从最上端顶点逆时针规划其他顶点。
+![img26](../picture/charts/img_26.png)
+ +### 数据格式 + +数据格式和柱线、多柱线都是类似的，注意实际作为name的字段，比如时间字段，有且只能有1个，数据集选择时选择名称，其余是顶点字段，不明白可以看静态数据格式。
+![img27](../picture/charts/img_27.png)
+![img28](../picture/charts/img_28.png)
+ + +## 柱线堆叠图 + +图表的基本操作和柱状堆叠图、折线堆叠并无大区别，需要在意的是数据格式的区别，绑定动态数据的时候，需要你数据集有4个字段，其中俩个字段作为x，y区分字段，另外俩个作为数值字段。
+![img29](../picture/charts/img_29.png)
+![img30](../picture/charts/img_30.png)
+ +### 数据格式 + +和另外俩个堆叠图相比，多了查询的一列数据，比如 "select a,b,sum(c),sum(d) from aa group by a,b" +![img31](../picture/charts/img_31.png)
diff --git a/doc/docs/guide/dataset.md b/doc/docs/guide/dataset.md index 00514cd3273424e954bb3bd948ee2bf7cd906ba5..9bd629d132c4c1ebebef6e16973ad5c444f6d5a0 100644 --- a/doc/docs/guide/dataset.md +++ b/doc/docs/guide/dataset.md @@ -1,3 +1,5 @@ +## 介绍 + ![img5](../picture/dateset/img_5.png)
[数据源数据集用法总结](https://my.oschina.net/u/4517014/blog/5270828)
@@ -20,6 +22,11 @@ ![kudu.png](../picture/dateset/img_2.png)
+## HTTP数据集 + +即原有Http数据源的功能，请注意：Http接口返回类型必须是Json、不能是text，text无法解析
+![http.png](../picture/dateset/img_7.png)
+ ## 功能栏 **可以看在线环境，有示例参考**
@@ -34,14 +41,17 @@ #### js脚本 -**注**：这里的JS是java的scriptengine执行的，很多es6的语法不支持
+**注**：这里的JS是java的scriptengine执行的，很多ES6的语法不支持
![img4](../picture/dateset/img_4.png)
入参是data，返回值也必须是data，中间是JS的处理过程，注意入参返回都是List，记得保存。
-#### 字典项 +#### java脚本 -场景有限，待补充。 +通过Groovy来进行实现的
+[Groovy用法参考](https://my.oschina.net/u/4517014/blog/5526324)
-## HTTP数据集 +#### 字典项 + +![img6.png](../picture/dateset/img_6.png)
+记得保存 -即原有http数据源的功能，原有http数据源不动 \ No newline at end of file diff --git a/doc/docs/guide/datasource.md b/doc/docs/guide/datasource.md index 2dc5e43bf472b29cf3839eef800689630d5d8f7a..d4df098ba071b8f4555df88794eb34e0c23f9321 100644 --- a/doc/docs/guide/datasource.md +++ b/doc/docs/guide/datasource.md @@ -18,6 +18,8 @@ 表aj_report.gaea_dict_item, item_extend字段是下拉选择后动态表单渲染的json数据 ``` +**注：** Http数据源功能已经移动到Http数据集中，原功能不变，有Http接口数据请直接使用Http数据集，请注意Http接口数据返回格式必须是Json + ## 操作 - 只有测试通过的数据源才可以保存 @@ -27,25 +29,42 @@ ### JDBC驱动类数据源添加 +##### 发行版 + +```text +1、将jar包上传到 "aj-report.xxx/lib"目录下 +2、启动项目(重启项目) +3、前端页面数据源类型选择"jdbc"，填上对应的驱动类、连接串、用户名密码 +``` + +![img4](../picture/datasource/img_4.png)
+![img5](../picture/datasource/img_5.png)
+ +##### 源码 + +源码推荐使用第二种方式。
+ - 第一种，在report-core/lib目录下添加
- 按照同样的层级将驱动包放置，使用build.sh脚本进行打包，前端页面选择jdbc数据源，填上对应的驱动类即可使用。
+ 按照同样的层级将驱动包放置，使用build.sh脚本进行打包，前端页面数据源类型选择"jdbc" + ，填上对应的驱动类、连接串、用户名密码。
**注意：** 此方式添加的jar包只能使用build.sh进行编译后才会生效。

- 第二种，在pom.xml中添加
- 使用build.sh脚本编译或者maven package编译都可以，前端页面选择jdbc数据源，填上对应驱动。
+ 使用build.sh脚本编译或者maven package编译都可以，前端页面数据源类型选择"jdbc" + ，填上对应的驱动类、连接串、用户名密码。
-**注意：** 底层只实现了mysql的解析，如果你的数据库和mysql差异较大，比如一些函数、关键字和mysql是不同的用法、含义，那就需要重写底层解析代码(datasource)

### 非JDBC驱动类数据源添加 例如原生ES、Redis之类。
-1、在源码中编写解析代码(datasource)
-2、使用页面生成数据字典
-3、添加对应驱动包
- +```text +1、在源码中编写解析代码(datasource) +2、生成数据字典，可在数据字典页面找到"数据源类型"，在"操作"栏中选择"编辑字典项" +3、添加对应驱动包 +``` diff --git a/doc/docs/guide/question.md b/doc/docs/guide/question.md index 450ea3aa97193b22b6eeef0ee2ebc19c43dd9d3d..0d4ec1d8c3348a69f6eb75543d60a5a670161e5b 100644 --- a/doc/docs/guide/question.md +++ b/doc/docs/guide/question.md @@ -12,7 +12,9 @@
-## 版本问题：[开发环境参考](https://ajreport.beliefteam.cn/report-doc/guide/quicklyDevelop.html) +## 版本问题 + +[开发环境参考](https://ajreport.beliefteam.cn/report-doc/guide/quicklyDevelop.html) - 底层数据库为Mysql8.0+时，flyway执行SQL报错
- Node.js是V16版本时 npm install失败
@@ -38,25 +40,32 @@ - 页面提示“404”
1、确保访问地址无误，根据部署方式的不同 9095/9528 端口皆可以进入项目，如果一个不行试另一个端口
- 2、确定前端是否启动
- 3、确定后端是否启动
+ 2、确定前端(端口号9528)是否启动
+ 3、确定后端(端口号9095)是否启动
4、如果你是前后端分离部署，看看你前端config配置文件中的BASE_API有没有改成你后端的IP端口
5、使用nginx转发遇到问题也是同上

+## 前端npm install失败 + +1、使用node -v检查你的node.js版本，不要使用Node.js16及以上版本。
+2、使用npm get registry查看npm镜像源，将npm镜像设置为淘宝镜像源(百度查具体步骤)。
+3、使用cnpm install命令替换npm install命令进行编译。
+如果以上3步皆无法解决npm编译问题，请直接使用**发行版**。
+ ## 执行源码编译脚本（build.sh）报错 - 提示：“*** report-ui/dist/* *** No such file or directory”
前端编译失败。
- 大部分原因是Node.js版本过高（高于V14），导致前端编译失败。
+ 大部分原因是Node.js版本过高（高于V14），导致前端编译失败(npm install失败)，可参考***前端npm install失败*进行解决。
另一部分是Nodejs在编译执行初始化时会去下载一些依赖，如果依赖下载不下来，也会导致失败。

- 提示：“report-core/target/aj-report-*.zip *** No such file or directory”
后端编译失败。
- 可能原因有：Maven版本过低/过高，导致后端编译失败
+ 可能原因有：Maven版本过低/过高，导致后端编译失败。可尝试重新执行编译脚本

@@ -80,34 +89,49 @@
-- flyway执行报错1.0.10sql失败
- 错误提示：Caused by: org.flywaydb.core.api.FlywayException: Validate failed: Detected failed
- migration to version 1.0.10 (create report share)
- 请参考此 [Issue](https://gitee.com/anji-plus/report/issues/I47JNE) 解决此问题
+- flyway执行sql相关错误
+ 错误提示：**Error creating bean with name 'flywayInitializer' defined in class XXX migration to version V1.0.XXX.sql + failed**
+ 解析：flyway在执行某个版本里面包含的sql时报错了
+ +- 可能原因：
+ 1、mysql版本问题，在不同版本的mysql中，部分语法可能存在异同
+ 2、mysql配置问题
+ + 解决方案： + 一、禁用flyway，手动执行已有的各版本sql文件
+ 1、在bootstrap.yml配置文件中找到flyway配置项，如图示
+ ![img6.png](../picture/qusetion/img_6.png)
+ 2、将report-core/src/main/resources/db.migration目录下所有的sql文件都执行一次，遇到报错，手动修改sql文件。
+ 3、sql文件中，只有** aj_report **数据库相关的sql是必须的依赖，在确保和aj_report数据库相关sql都执行后在启动服务。
+ + 二、保持flyway开启状态，手动执行报错的那个版本sql文件
+ 1、在report-core/src/main/resources/db.migration目录下找到报错的那个版本sql
+ 2、根据报错提示找到sql文件中具体报错的那一段sql，或者和数据库已有的数据对比，找到没有执行成功的那部分sql
+ 3、手动执行flyway没执行成功的那部分，根据提示，对sql进行修改调整
+ 4、执行完毕后，在aj_report数据库下flyway_schema_history表中找到报错对应的sql文件版本，将对应的success改完1
+ ![img7.png](../picture/qusetion/img_7.png)

## 数据集相关 - 系统异常，后台日志显示“** Data too long for colum ** ”
+ 查询到的数据太多了，无法入库，这里查询入库的数据只作为在使用动态数据时做解析用
1、建议不要使用 "select *"
2、一张图表能承载的数据量是有限的，太多则图表展示不出来、页面卡死等
3、必须使用 "select *" ，或者展示很多数据。解决方法，将测试预览的值删掉只剩一条，注意数据的结构 [{}]
## 大屏图表组件相关 -- 访问白屏
+- 访问大屏，浏览器白屏
设计完大屏，保存后进行预览，发现背景全白
1、回到编辑页面，查看大屏背景颜色是否设置
- 2、查看大屏的宽高，如果宽高都是0（大屏宽高在设计时，有概率性变成0，不知原因）大屏背景图片，颜色，皆无法显示
+ 2、查看大屏的宽高，如果宽高都是0，大屏背景图片，颜色，皆无法显示
3、大屏宽高改成 1920 1080

-- 文本框颜色无法改变
- 使用文本框，改变颜色，无法改变。已知有概率性的出现无法修改文本框颜色的情况。解决方法有以下
- 1、保存退出大屏，重新进入大屏修改文本框颜色
- 2、删掉文本框，重新拖动一个
diff --git a/doc/docs/guide/quicklyDevelop.md b/doc/docs/guide/quicklyDevelop.md index ed2252ada6c3ffcc02ca7601aee8e40bbb3fd45b..b43c2cdc0695d1b032d5ef168379a98decf9dce3 100644 --- a/doc/docs/guide/quicklyDevelop.md +++ b/doc/docs/guide/quicklyDevelop.md @@ -37,7 +37,12 @@ - [Node.js] 14.16.0 - [Windows 10] -已知 **Mysql8.0** 和 **Jdk11** (部分小版本)会出现兼容性问题，后续有解决方法将会在下方 **其他** 大类进行补充 +已知 **Mysql8.0** 部分小版本会出现兼容性问题，后续有解决方法将会在下方 **其他** 大类进行补充 + +## 不支持的版本 + +- [JDK] 1.7及以下/11及以上 +- [Node.js] V16及以上 ## SQL初始化 diff --git a/doc/docs/guide/quicklyDistribution.md b/doc/docs/guide/quicklyDistribution.md index 3ea87cbf1b35bfc550368bc1da28492123b6ce31..fce4e5d68964eca4e3f22778ef9603bfc6448e0b 100644 --- a/doc/docs/guide/quicklyDistribution.md +++ b/doc/docs/guide/quicklyDistribution.md @@ -1,8 +1,9 @@ ``` 第一步，下载zip包，解压 - 第二步，conf->bootstrap.yml，修改mysql连接 + 第二步，conf->bootstrap.yml，修改mysql连接等信息 第三步，启动bin目录下start.sh - 第四步，访问 http://localhost:9095 + 第四步，访问 http://localhost:9095 admin 123456 + 第五步，修改"数据源->mysql数据源"用户名密码 ``` ## 下载发行版 @@ -21,10 +22,10 @@ ![bootstrap.png](../picture/quickly/img_2.png)
**注**：请确认你的Mysql是否支持远程连接，登陆用户是否有DDL权限
-## 上传功能 +## OSS配置 -使用上传功能，必须修改此内容，注意路径格式，比如Win是 \ ,linux是 /
-![file.png](../picture/quickly/img_15.png)
+OSS底层已支持minio、amazonS3、dfs，都配置的情况下优先级minio->amazonS3->nfs
+![file.png](../picture/quickly/img.png)
## 启动 @@ -38,9 +39,7 @@ aj-report-XXX --> bin --> start.bat
如果start.bat启动有问题的话，可以尝试以下方法解决。
修改第4行的JAVA_HOME，改成你自己的JAVA_HOME，并去掉**rem**注释，双击启动
-![java.png](../picture/quickly/img_7.png)
-**注**：如果你JAVA_HOME目录存在空格，将bat文件最下面的JAVA_HOME添加""号 -![img.png](../picture/quickly/img_8.png)
+![java.png](../picture/quickly/img_7.png) ## 访问 diff --git a/doc/docs/guide/quicklySeparate.md b/doc/docs/guide/quicklySeparate.md index 7917ce58b4a932e9fcfeed48aa160ea26e0a6259..f30599d9100d0aecd61f50afaac69a40834646b9 100644 --- a/doc/docs/guide/quicklySeparate.md +++ b/doc/docs/guide/quicklySeparate.md @@ -15,6 +15,8 @@ java -jar BASE_API: '"./"'，改成自己后端的api npm install npm run build + +使用nginx转发 ``` ## linux部署后端 @@ -24,8 +26,8 @@ npm run build - [Apache Maven] 3.5
- [Node.js] v14.16.0
- [Jdk] 1.8
- 请在你的Windows上先准备好maven、node.js、jdk
- **注**：已知 **Jdk11** (部分小版本)存在兼容性问题，请不要使用openJdk，环境问题请看 **常见问题** 大类
+ +**注**：已知 **Jdk11** (部分小版本)存在兼容性问题，请不要使用openJdk，环境问题请看 **常见问题** 大类
### 克隆源码 @@ -36,46 +38,39 @@ git clone https://gitee.com/anji-plus/report.git
### 修改mysql连接 report-core --> src --> main --> resources --> bootstrap.yml
-![bootstrap.png](../picture/quickly/img_2.png)
将图中关于mysql的连接配置信息换成你使用的IP
-**注**：aj_report库是存放底层基础信息的库，flyway启动时会自动建立，如果你在这里修改了库，将会出错
-**注**：请确认你的Mysql是否支持远程连接，登陆用户是否有DDL权限
- -### 上传功能 -使用上传功能，必须修改此内容，注意路径格式，比如Win是 \ ,linux是 /
-![file.png](../picture/quickly/img_15.png)
+![bootstrap.png](../picture/quickly/img_2.png)
-### maven打包 +**注 ：** -**打包之前如果系统用的不止mysql数据源，需要自己在pom文件中加入对应的数据库的驱动，登陆系统之后，数据源提示无驱动，则选择通用JDBC数据源，这里不做演示了**
-使用 maven package
-**注**：不要使用maven install
-**注**：此方式不会打包 lib目录下的驱动，详情可查看 **数据源 扩展**
-![img10](../picture/quickly/img_10.png)
- -### linux启动jar包 +``` +1、aj_report库是存放底层基础信息的库，flyway启动时会自动建立，如果你在这里修改了库，将会出错 +2、请确认你的Mysql是否支持远程连接，登陆用户是否有DDL权限 +``` -将上步生成的jar包上传至linux，使用java -jar命令启动
-**注**：请确保你的linux有jdk
+### OSS配置 -## 本地启动前端 +OSS底层已支持minio、amazonS3、dfs，都配置的情况下优先级minio->amazonS3->nfs
+![file.png](../picture/quickly/img.png)
-### 前端编译 +### maven打包 -进入前端目录：report-ui
-![img11](../picture/quickly/img_11.png)
-执行 npm install
+直接使用 maven package 打包，打包完成如图所示
-### 修改config +![img10](../picture/quickly/img_10.png)
+**注 ：** -目录地址：report-ui --> config --> dev.env.js
-修改你的BASE_API地址
+``` +1、打包之前如果系统用的不止mysql数据源，需要自己在pom文件中加入对应的数据库的驱动，登陆系统之后，数据源提示无驱动，则选择通用JDBC数据源，这里不做演示了 +2、不要使用 maven install +3、此方式不会打包 lib目录下的驱动，详情可查看 "数据源->扩展" +``` -### 启动前端 +### linux启动jar包 -report-ui目录：
-执行 npm run dev
+将上步生成的jar包上传至linux，使用java -jar命令启动
+**注**：请确保你的linux有jdk1.8
## 前端build @@ -88,14 +83,18 @@ report-ui目录：
### 修改config 目录地址：report-ui --> config --> prod.env.js
-修改你的BASE_API地址，改成自己后端的api
+将BASE_API地址，改成你后端的api地址
-### build +### 打包 -reoprt-ui目录：
执行 npm run build
生成的前端dist目录文件在report-ui下面
+ ![img12](../picture/quickly/img_12.png)
+### 前端部署 + +使用nginx做转发 + diff --git a/doc/docs/guide/quicklySource.md b/doc/docs/guide/quicklySource.md index 9c272a684d833afdcd1e7008dfc9686631234658..14770b10d940d0622592de241a675ee9e5975381 100644 --- a/doc/docs/guide/quicklySource.md +++ b/doc/docs/guide/quicklySource.md @@ -9,8 +9,10 @@ cd aj-report-xxxx vim conf/bootstrap.yml 修改数据库连接、上传文件的路径以及地址 sh bin/start.sh -访问 -http://serverip:9095 +访问：http://serverip:9095 +admin 123456 + +修改："数据源->mysql数据源"用户名密码 ``` ## 编译环境 @@ -37,7 +39,8 @@ git clone https://gitee.com/anji-plus/report.git
编译完成后是放在当前目录下的build文件夹中：aj-report-xxxx.zip
**注：** 如果Win10部署的话，如图用git执行sh build.sh就行了。Linux就直接去report目录下执行sh build.sh就行。
-**特别注意：** 如果是Win10编译，那么几个启动脚本的格式则是win的格式，放linux上执行会报错的，反之放linux编译在win10启动也会报错，需要转格式。
+**特别注意：** +如果是Win10编译，那么几个启动脚本的格式则是win的格式，放linux上执行会报错的，反之放linux编译在win10启动也会报错，需要转格式。
## 修改mysql连接 @@ -50,10 +53,10 @@ git clone https://gitee.com/anji-plus/report.git
![bootstrap.png](../picture/quickly/img_2.png)
**注**：请确认你的Mysql是否支持远程连接，登陆用户是否有DDL权限
-## 上传功能 +## OSS配置 -使用上传功能，必须修改此内容，注意路径格式，比如Win是 \ ,linux是 /
-![file.png](../picture/quickly/img_15.png) +OSS底层已支持minio、amazonS3、dfs，都配置的情况下优先级minio->amazonS3->nfs
+![file.png](../picture/quickly/img.png)
## 启动 diff --git a/doc/docs/picture/charts/img_26.png b/doc/docs/picture/charts/img_26.png new file mode 100644 index 0000000000000000000000000000000000000000..ef148b84459cbba4aaa09544ddfc85fba6c505c2 Binary files /dev/null and b/doc/docs/picture/charts/img_26.png differ diff --git a/doc/docs/picture/charts/img_27.png b/doc/docs/picture/charts/img_27.png new file mode 100644 index 0000000000000000000000000000000000000000..cd9299fc765ca4dced728e69a1d6874815822c20 Binary files /dev/null and b/doc/docs/picture/charts/img_27.png differ diff --git a/doc/docs/picture/charts/img_28.png b/doc/docs/picture/charts/img_28.png new file mode 100644 index 0000000000000000000000000000000000000000..8e5ce642ade0854a47fb67fbb3040e678f448dc7 Binary files /dev/null and b/doc/docs/picture/charts/img_28.png differ diff --git a/doc/docs/picture/charts/img_29.png b/doc/docs/picture/charts/img_29.png new file mode 100644 index 0000000000000000000000000000000000000000..a954ba5f4b28473a593e543e7280c1d5eac54585 Binary files /dev/null and b/doc/docs/picture/charts/img_29.png differ diff --git a/doc/docs/picture/charts/img_30.png b/doc/docs/picture/charts/img_30.png new file mode 100644 index 0000000000000000000000000000000000000000..33d0987bbaa4e488c84e1f29495eba824f27bfbd Binary files /dev/null and b/doc/docs/picture/charts/img_30.png differ diff --git a/doc/docs/picture/charts/img_31.png b/doc/docs/picture/charts/img_31.png new file mode 100644 index 0000000000000000000000000000000000000000..03cc553fdc5db0571b67cc3b770b24669bfc8f48 Binary files /dev/null and b/doc/docs/picture/charts/img_31.png differ diff --git a/doc/docs/picture/datasource/img_4.png b/doc/docs/picture/datasource/img_4.png new file mode 100644 index 0000000000000000000000000000000000000000..22b302deb56023815c846cc22e943fb3a4a73b42 Binary files /dev/null and b/doc/docs/picture/datasource/img_4.png differ diff --git a/doc/docs/picture/datasource/img_5.png b/doc/docs/picture/datasource/img_5.png new file mode 100644 index 0000000000000000000000000000000000000000..44cfda2dc30fe7ed338f104810ef6a5c428397ce Binary files /dev/null and b/doc/docs/picture/datasource/img_5.png differ diff --git a/doc/docs/picture/dateset/img_6.png b/doc/docs/picture/dateset/img_6.png new file mode 100644 index 0000000000000000000000000000000000000000..98ff8773938519e3ee7152916052b09e15e56d7d Binary files /dev/null and b/doc/docs/picture/dateset/img_6.png differ diff --git a/doc/docs/picture/dateset/img_7.png b/doc/docs/picture/dateset/img_7.png new file mode 100644 index 0000000000000000000000000000000000000000..3bb9f5b117d7ec7c475dc9d89a864f1ad0db415f Binary files /dev/null and b/doc/docs/picture/dateset/img_7.png differ diff --git a/doc/docs/picture/quickly/img.png b/doc/docs/picture/quickly/img.png new file mode 100644 index 0000000000000000000000000000000000000000..9e2c477dbfbc899947c5d027028b04c8242350ff Binary files /dev/null and b/doc/docs/picture/quickly/img.png differ diff --git a/doc/docs/picture/quickly/img_15.png b/doc/docs/picture/quickly/img_15.png deleted file mode 100644 index dbdb455a05fd8e2ea382b352184f4f9060279e35..0000000000000000000000000000000000000000 Binary files a/doc/docs/picture/quickly/img_15.png and /dev/null differ diff --git a/doc/docs/picture/qusetion/img_6.png b/doc/docs/picture/qusetion/img_6.png new file mode 100644 index 0000000000000000000000000000000000000000..d41c722fa4bbb84f3ae7e6b29742e092912d755a Binary files /dev/null and b/doc/docs/picture/qusetion/img_6.png differ diff --git a/doc/docs/picture/qusetion/img_7.png b/doc/docs/picture/qusetion/img_7.png new file mode 100644 index 0000000000000000000000000000000000000000..bdbc9c98610372d14299faa525e109d45ed59c2a Binary files /dev/null and b/doc/docs/picture/qusetion/img_7.png differ diff --git a/report-core/README.md b/report-core/README.md index 0ad3e4fb7ef9a26732e9cce3776670565eb6070a..c2001c5665c39ad68446622011d69841e64f0e3d 100644 --- a/report-core/README.md +++ b/report-core/README.md @@ -1 +1,41 @@ ## 后端springboot + +### 采用redis缓存 + +#### 1.pom文件 +```java + + com.anji-plus + spring-boot-gaea + 2.0.5.RELEASE + + + org.springframework.boot + spring-boot-starter-data-redis + + + +``` +删除exclusions内容，因为底层默认支持redis +删除ehcache相关依赖 + +#### 2.删除 package com.anjiplus.template.gaea.business.cache +CacheHelper底层默认实现为RedisCacheHelper。 +@ConditionalOnMissingBean 注解起到的作用 +```java +package com.anji.plus.gaea; + +@Configuration +@EnableConfigurationProperties({GaeaProperties.class}) +public class GaeaAutoConfiguration { + @Bean + @ConditionalOnClass({RedisAutoConfiguration.class}) + @ConditionalOnMissingBean + public CacheHelper cacheHelper() { + return new RedisCacheHelper(); + } +} +``` + +#### 3.bootstrap.yml加上对应的redis配置即可 + diff --git a/report-core/pom.xml b/report-core/pom.xml index 7118783c0e6163447dd95f27e42038bbc04e16ce..7a41ea41d6580267ea42508dd48dbff39cf107b3 100644 --- a/report-core/pom.xml +++ b/report-core/pom.xml @@ -61,6 +61,12 @@ test + + org.springframework + spring-mock + 2.0.8 + + org.springframework.cloud spring-cloud-context @@ -76,7 +82,7 @@ com.anji-plus spring-boot-gaea - 2.0.3.RELEASE + 2.0.5.RELEASE org.springframework.boot @@ -85,6 +91,12 @@ + + com.anji-plus + spring-boot-starter-gaea-oss + 2.0.5.RELEASE + + com.baomidou mybatis-plus-boot-starter @@ -94,6 +106,7 @@ mysql mysql-connector-java + 8.0.28 com.alibaba @@ -115,7 +128,7 @@ org.apache.httpcomponents httpclient - 4.5.10 + 4.5.13 diff --git a/report-core/src/main/java/com/anjiplus/template/gaea/business/code/ResponseCode.java b/report-core/src/main/java/com/anjiplus/template/gaea/business/code/ResponseCode.java index f0fe7039021314d06189c56303a6ab9599bb0c95..0cefc8b1edf8b18ae18e77d4688ba0746bca687d 100644 --- a/report-core/src/main/java/com/anjiplus/template/gaea/business/code/ResponseCode.java +++ b/report-core/src/main/java/com/anjiplus/template/gaea/business/code/ResponseCode.java @@ -118,7 +118,8 @@ public interface ResponseCode { String FILE_SUFFIX_UNSUPPORTED = "2002"; String FILE_UPLOAD_ERROR = "2003"; String FILE_ONT_EXSIT = "2004"; - String LIST_IS_EMPTY = "2005"; + String FILE_OPERATION_FAILED = "file.operation.failed"; + String PUSHCODE_NEED_UNIQUE = "3001"; String RECEIVER_IS_EMPTY = "3002"; String DATA_SOURCE_CONNECTION_FAILED = "4001"; diff --git a/report-core/src/main/java/com/anjiplus/template/gaea/business/filter/TokenFilter.java b/report-core/src/main/java/com/anjiplus/template/gaea/business/filter/TokenFilter.java index 8022cf44f567a7538c8a5af4c6717d814b321206..b9214f6f6103f2de85850dac704b2b816bf8dbda 100644 --- a/report-core/src/main/java/com/anjiplus/template/gaea/business/filter/TokenFilter.java +++ b/report-core/src/main/java/com/anjiplus/template/gaea/business/filter/TokenFilter.java @@ -101,15 +101,17 @@ public class TokenFilter implements Filter { filterChain.doFilter(request, response); return; } - + //获取token + String token = request.getHeader("Authorization"); //针对大屏分享，优先处理 String shareToken = request.getHeader("Share-Token"); - if (StringUtils.isNotBlank(shareToken)) { - //两个接口需要处理 + if (StringUtils.isNotBlank(shareToken) && StringUtils.isBlank(token)) { + //需要处理 // /reportDashboard/getData // /reportDashboard/{reportCode} - String reportCode = JwtUtil.getReportCode(shareToken); - if (!uri.endsWith("/getData") && !uri.contains(reportCode)) { + // /reportExcel/preview + List reportCodeList = JwtUtil.getReportCodeList(shareToken); + if (!uri.endsWith("/reportDashboard/getData") && !uri.endsWith("/reportExcel/preview") && reportCodeList.stream().noneMatch(uri::contains)) { ResponseBean responseBean = ResponseBean.builder().code("50014") .message("分享链接已过期").build(); response.getWriter().print(JSONObject.toJSONString(responseBean)); @@ -120,8 +122,7 @@ public class TokenFilter implements Filter { } - //获取token - String token = request.getHeader("Authorization"); + if (StringUtils.isBlank(token)) { error(response); return; @@ -231,7 +232,7 @@ public class TokenFilter implements Filter { } private void error(HttpServletResponse response) throws IOException { - ResponseBean responseBean = ResponseBean.builder().code("50008").message("The Token has expired").build(); + ResponseBean responseBean = ResponseBean.builder().code("User.credentials.expired").message("The Token has expired").build(); response.setContentType(ContentType.APPLICATION_JSON.getMimeType()); response.getWriter().print(JSONObject.toJSONString(responseBean)); } diff --git a/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/accessuser/service/impl/AccessUserServiceImpl.java b/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/accessuser/service/impl/AccessUserServiceImpl.java index 966196033846c31c579b456415c40d1a5247dd69..d2164b1964cb127c548517535d51bf482b78a218 100755 --- a/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/accessuser/service/impl/AccessUserServiceImpl.java +++ b/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/accessuser/service/impl/AccessUserServiceImpl.java @@ -5,6 +5,7 @@ import com.alibaba.fastjson.JSONObject; import com.anji.plus.gaea.bean.TreeNode; import com.anji.plus.gaea.cache.CacheHelper; import com.anji.plus.gaea.constant.BaseOperationEnum; +import com.anji.plus.gaea.constant.GaeaConstant; import com.anji.plus.gaea.exception.BusinessException; import com.anji.plus.gaea.exception.BusinessExceptionBuilder; import com.anji.plus.gaea.curd.mapper.GaeaBaseMapper; @@ -163,7 +164,7 @@ public class AccessUserServiceImpl implements AccessUserService { } else { // 生成用户token String uuid = GaeaUtils.UUID(); - token = jwtBean.createToken(loginName, uuid); + token = jwtBean.createToken(loginName, uuid, 0, GaeaConstant.TENANT_CODE); cacheHelper.stringSetExpire(tokenKey, token, 3600); } diff --git a/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dashboard/controller/ReportDashboardController.java b/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dashboard/controller/ReportDashboardController.java index 69037cf134e3f874487875fce0574b945c70beb4..fdb66fb122794b24bda400d8e3d38bead45c6c7b 100644 --- a/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dashboard/controller/ReportDashboardController.java +++ b/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dashboard/controller/ReportDashboardController.java @@ -101,7 +101,7 @@ public class ReportDashboardController { @PostMapping("/share") @GaeaAuditLog(pageTitle = "分享") - @Permission(code = "bigScreenManage", name = "分享报表") + @Permission(code = "share", name = "分享报表") public ResponseBean share(@Validated @RequestBody ReportShareDto dto) { return ResponseBean.builder().data(reportShareService.insertShare(dto)).build(); } diff --git a/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dashboard/service/impl/ReportDashboardServiceImpl.java b/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dashboard/service/impl/ReportDashboardServiceImpl.java index fd3f2117aae20c2a9df3311452da925db5a2b5eb..8cf36c4917ead177dad90d0122b8b62468043b4b 100644 --- a/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dashboard/service/impl/ReportDashboardServiceImpl.java +++ b/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dashboard/service/impl/ReportDashboardServiceImpl.java @@ -80,13 +80,13 @@ public class ReportDashboardServiceImpl implements ReportDashboardService, Initi @Autowired private ReportService reportService; - @Value("${customer.file.downloadPath:''}") + @Value("${spring.gaea.subscribes.oss.downloadPath:}") private String fileDownloadPath; - @Value("${customer.file.dist-path:''}") + @Value("${customer.file.tmp-path:.}") private String dictPath; - private final static String ZIP_PATH = "/zip/"; + private final static String ZIP_PATH = "/tmp_zip/"; private final static String JSON_PATH = "dashboard.json"; private Map queryServiceImplMap = new HashMap<>(); @@ -331,7 +331,7 @@ public class ReportDashboardServiceImpl implements ReportDashboardService, Initi GaeaFile gaeaFile = gaeaFileService.selectOne(queryWrapper); String uploadPath; if (null == gaeaFile) { - GaeaFile upload = gaeaFileService.upload(imageFile, fileName); + GaeaFile upload = gaeaFileService.upload(imageFile); log.info("存入图片: {}", upload.getFilePath()); uploadPath = upload.getUrlPath(); }else { @@ -395,13 +395,9 @@ public class ReportDashboardServiceImpl implements ReportDashboardService, Initi queryWrapper.eq(GaeaFile::getFileId, fileName); GaeaFile gaeaFile = gaeaFileService.selectOne(queryWrapper); if (null != gaeaFile) { - String fileType = gaeaFile.getFileType(); - path = path + "/image/" + fileName + "." + fileType; - //path = /app/disk/upload/zip/UUID/image - - //原始文件的路径 - String filePath = gaeaFile.getFilePath(); - FileUtil.copyFileUsingFileChannels(filePath, path); + byte[] file = gaeaFileService.getFile(gaeaFile.getFileId()); + path = path + "/image/"; + FileUtil.byte2File(file, path, gaeaFile.getFileId().concat(".").concat(gaeaFile.getFileType())); } } diff --git a/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/file/controller/param/GaeaFileParam.java b/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/file/controller/param/GaeaFileParam.java index 7d6bd8350b8d80a0110f1e29a779096b3d10ad43..cac2f1baccf436eb2a043efd0750bc3e8ed1a826 100644 --- a/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/file/controller/param/GaeaFileParam.java +++ b/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/file/controller/param/GaeaFileParam.java @@ -4,6 +4,7 @@ package com.anjiplus.template.gaea.business.modules.file.controller.param; import com.anji.plus.gaea.annotation.Query; import com.anji.plus.gaea.constant.QueryEnum; import com.anji.plus.gaea.curd.params.PageParam; +import lombok.Data; import java.io.Serializable; @@ -13,6 +14,7 @@ import java.io.Serializable; * @author peiyanni * @since 2021-02-18 14:48:29 */ +@Data public class GaeaFileParam extends PageParam implements Serializable { /** 模糊查询 */ diff --git a/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/file/service/GaeaFileService.java b/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/file/service/GaeaFileService.java index 4082ca7ea27dcc02851d311a80a7244e65666ddc..0581399c3f95544d1daf8ea8b58742f6575f8542 100644 --- a/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/file/service/GaeaFileService.java +++ b/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/file/service/GaeaFileService.java @@ -18,16 +18,6 @@ import java.io.File; */ public interface GaeaFileService extends GaeaBaseService { - /** - * 文件上传 - * - * @param multipartFile 文件 - * @param file 文件 - * @param customFileName 自定义文件名，默认给null - * @return - */ - GaeaFile upload(MultipartFile multipartFile, File file, String customFileName); - /** * 文件上传 * @@ -41,10 +31,9 @@ public interface GaeaFileService extends GaeaBaseService download(HttpServletRequest request, HttpServletResponse response, String fileId); + + /** + * 获取文件 + * @param fileId + * @return + */ + byte[] getFile(String fileId); } diff --git a/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/file/service/impl/GaeaFileServiceImpl.java b/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/file/service/impl/GaeaFileServiceImpl.java index fed4368900f60fc5d6551005e6b3a3712c64fdcf..4a1588a5534a4541393544ced1b8d5baa4e10b41 100644 --- a/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/file/service/impl/GaeaFileServiceImpl.java +++ b/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/file/service/impl/GaeaFileServiceImpl.java @@ -4,59 +4,51 @@ import com.anji.plus.gaea.constant.BaseOperationEnum; import com.anji.plus.gaea.curd.mapper.GaeaBaseMapper; import com.anji.plus.gaea.exception.BusinessException; import com.anji.plus.gaea.exception.BusinessExceptionBuilder; +import com.anji.plus.gaea.oss.exceptions.GaeaOSSException; +import com.anji.plus.gaea.oss.exceptions.GaeaOSSTypeLimitedException; +import com.anji.plus.gaea.oss.ossbuilder.GaeaOSSTemplate; +import com.anji.plus.gaea.oss.utils.ResponseUtil; import com.anjiplus.template.gaea.business.code.ResponseCode; import com.anjiplus.template.gaea.business.modules.file.dao.GaeaFileMapper; import com.anjiplus.template.gaea.business.modules.file.entity.GaeaFile; import com.anjiplus.template.gaea.business.modules.file.service.GaeaFileService; -import com.anjiplus.template.gaea.business.modules.file.util.FileUtils; -import com.anjiplus.template.gaea.business.modules.file.util.StringPatternUtil; -import com.anjiplus.template.gaea.business.util.FileUtil; import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper; import com.baomidou.mybatisplus.core.toolkit.Wrappers; import lombok.extern.slf4j.Slf4j; import org.apache.commons.lang3.StringUtils; +import org.apache.http.entity.ContentType; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Value; -import org.springframework.http.CacheControl; -import org.springframework.http.MediaType; +import org.springframework.cloud.context.config.annotation.RefreshScope; import org.springframework.http.ResponseEntity; +import org.springframework.mock.web.MockMultipartFile; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Transactional; -import org.springframework.transaction.interceptor.TransactionAspectSupport; import org.springframework.web.multipart.MultipartFile; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.File; -import java.net.URLEncoder; -import java.util.ArrayList; -import java.util.Arrays; +import java.io.FileInputStream; import java.util.List; import java.util.UUID; -import java.util.stream.Collectors; /** - * (GaeaFile)ServiceImpl - * - * @author peiyanni - * @since 2021-02-18 14:48:26 + * 文件管理服务实现 + * @author: Raod + * @since: 2022-08-31 */ @Service @Slf4j +@RefreshScope public class GaeaFileServiceImpl implements GaeaFileService { - @Value("${customer.file.dist-path:''}") - private String dictPath; - - @Value("${customer.file.white-list:''}") - private String whiteList; - - @Value("${customer.file.excelSuffix:''}") - private String excelSuffix; - - @Value("${customer.file.downloadPath:''}") + @Value("${spring.gaea.subscribes.oss.downloadPath:''}") private String fileDownloadPath; + @Autowired + private GaeaOSSTemplate gaeaOSSTemplate; + @Autowired private GaeaFileMapper gaeaFileMapper; @@ -65,70 +57,6 @@ public class GaeaFileServiceImpl implements GaeaFileService { return gaeaFileMapper; } - - @Override - @Transactional(rollbackFor = Exception.class) - public GaeaFile upload(MultipartFile multipartFile, File file, String customFileName) { - try { - String fileName = ""; - if (null != multipartFile) { - fileName = multipartFile.getOriginalFilename(); - }else { - fileName = file.getName(); - } - - if (StringUtils.isBlank(fileName)) { - throw BusinessExceptionBuilder.build(ResponseCode.FILE_EMPTY_FILENAME); - } - - String suffixName = fileName.substring(fileName.lastIndexOf(".")); - String fileInstruction = fileName.substring(0, fileName.lastIndexOf(".")); - //白名单校验(不区分大小写) - List list = new ArrayList<>(Arrays.asList(whiteList.split("\\|"))); - list.addAll(list.stream().map(String::toUpperCase).collect(Collectors.toList())); - if (!list.contains(suffixName)) { - throw BusinessExceptionBuilder.build(ResponseCode.FILE_SUFFIX_UNSUPPORTED); - } - // 生成文件唯一性标识 - String fileId; - if (StringUtils.isBlank(customFileName)) { - fileId = UUID.randomUUID().toString(); - } else { - fileId = customFileName; - } - String newFileName = fileId + suffixName; - // 本地文件保存路径 - String filePath = dictPath + newFileName; - String urlPath = fileDownloadPath + "/" + fileId; - - GaeaFile gaeaFile = new GaeaFile(); - gaeaFile.setFilePath(filePath); - gaeaFile.setFileId(fileId); - gaeaFile.setUrlPath(urlPath); - gaeaFile.setFileType(suffixName.replace(".", "")); - gaeaFile.setFileInstruction(fileInstruction); - gaeaFileMapper.insert(gaeaFile); - - //写文件 将文件保存/app/dictPath/upload/下 - java.io.File dest = new java.io.File(dictPath + newFileName); - java.io.File parentFile = dest.getParentFile(); - if (!parentFile.exists()) { - parentFile.mkdirs(); - } - if (null != multipartFile) { - multipartFile.transferTo(dest); - }else { - FileUtil.copyFileUsingFileChannels(file, dest); - } - // 将完整的http访问路径返回 - return gaeaFile; - } catch (Exception e) { - TransactionAspectSupport.currentTransactionStatus().setRollbackOnly(); - log.error("file upload error: {}", e); - throw BusinessExceptionBuilder.build(ResponseCode.FILE_UPLOAD_ERROR); - } - } - /** * 文件上传 * @@ -137,66 +65,138 @@ public class GaeaFileServiceImpl implements GaeaFileService { */ @Override public GaeaFile upload(MultipartFile multipartFile) { - return upload(multipartFile, null, null); + String originalFilename = multipartFile.getOriginalFilename(); + + if (StringUtils.isBlank(originalFilename)) { + throw BusinessExceptionBuilder.build(ResponseCode.FILE_EMPTY_FILENAME); + } + // 文件后缀 .png + String suffixName = originalFilename.substring(originalFilename.lastIndexOf(".")); + // 生成文件唯一性标识 + String fileId = UUID.randomUUID().toString(); + + // 生成在oss中存储的文件名 402b6193e70e40a9bf5b73a78ea1e8ab.png + String fileObjectName = fileId + suffixName; + // 生成链接通过fileId http访问路径 http://10.108.3.121:9089/meta/file/download/402b6193e70e40a9bf5b73a78ea1e8ab + String urlPath = fileDownloadPath + "/" + fileId; + + // 上传文件 + try{ + gaeaOSSTemplate.uploadFileByInputStream(multipartFile, fileObjectName); + }catch (GaeaOSSTypeLimitedException e){ + log.error("上传失败GaeaOSSTypeLimitedException", e); + throw BusinessExceptionBuilder.build(ResponseCode.FILE_SUFFIX_UNSUPPORTED, e.getMessage()); + }catch (GaeaOSSException e){ + log.error("上传失败GaeaOSSException", e); + throw BusinessExceptionBuilder.build(ResponseCode.FILE_UPLOAD_ERROR, e.getMessage()); + } + + // 保存到文件管理中 + GaeaFile gaeaFile = new GaeaFile(); + gaeaFile.setFileId(fileId); + gaeaFile.setFilePath(fileObjectName); + gaeaFile.setUrlPath(urlPath); + gaeaFile.setFileType(suffixName.replace(".", "")); + gaeaFile.setFileInstruction(originalFilename); + insert(gaeaFile); + + return gaeaFile; + } + + private MultipartFile getMultipartFile(File file){ + FileInputStream fileInputStream; + MultipartFile multipartFile; + try { + fileInputStream = new FileInputStream(file); + multipartFile = new MockMultipartFile(file.getName(),file.getName(), + ContentType.APPLICATION_OCTET_STREAM.toString(),fileInputStream); + } catch (Exception e) { + log.error("file转MultipartFile失败", e); + throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e.getMessage()); + } + return multipartFile; } /** * 文件上传 * * @param file 文件 - * @param customFileName 自定义文件名 * @return */ @Override - public GaeaFile upload(File file, String customFileName) { - return upload(null, file, customFileName); + public GaeaFile upload(File file) { + return upload(getMultipartFile(file)); } @Override public ResponseEntity download(HttpServletRequest request, HttpServletResponse response, String fileId) { try { - String userAgent = request.getHeader("User-Agent"); - boolean isIeBrowser = userAgent.indexOf("MSIE") > 0; - //根据fileId，从gaea_file中读出filePath + // fileId必填 + if(StringUtils.isBlank(fileId)){ + throw BusinessExceptionBuilder.build(ResponseCode.FILE_ONT_EXSIT); + } + // 根据fileId，从gaea_file中读出filePath LambdaQueryWrapper queryWrapper = Wrappers.lambdaQuery(); queryWrapper.eq(GaeaFile::getFileId, fileId); GaeaFile gaeaFile = gaeaFileMapper.selectOne(queryWrapper); if (null == gaeaFile) { throw BusinessExceptionBuilder.build(ResponseCode.FILE_ONT_EXSIT); } - //解析文件路径、文件名和后缀 - String filePath = gaeaFile.getFilePath(); - if (StringUtils.isBlank(filePath)) { + + String userAgent = request.getHeader("User-Agent"); + boolean isIEBrowser = userAgent.indexOf("MSIE") > 0; + // 在oss中存储的文件名 402b6193e70e40a9bf5b73a78ea1e8ab.png + String fileObjectName = gaeaFile.getFileId().concat(".").concat(gaeaFile.getFileType()); + String originalFilename = gaeaFile.getFileInstruction(); + if (StringUtils.isBlank(fileObjectName) || StringUtils.isBlank(originalFilename)) { throw BusinessExceptionBuilder.build(ResponseCode.FILE_ONT_EXSIT); } - String filename = filePath.substring(filePath.lastIndexOf(File.separator)); - String fileSuffix = filename.substring(filename.lastIndexOf(".")); - - //根据文件后缀来判断，是显示图片\视频\音频，还是下载文件 - File file = new File(filePath); - ResponseEntity.BodyBuilder builder = ResponseEntity.ok(); - builder.contentLength(file.length()); - if (StringPatternUtil.stringMatchIgnoreCase(fileSuffix, "(.png|.jpg|.jpeg|.bmp|.gif|.icon)")) { - builder.cacheControl(CacheControl.noCache()).contentType(MediaType.IMAGE_PNG); - } else if (StringPatternUtil.stringMatchIgnoreCase(fileSuffix, "(.flv|.swf|.mkv|.avi|.rm|.rmvb|.mpeg|.mpg|.ogg|.ogv|.mov|.wmv|.mp4|.webm|.wav|.mid|.mp3|.aac)")) { - builder.header("Content-Type", "video/mp4; charset=UTF-8"); - } else { - //application/octet-stream 二进制数据流（最常见的文件下载） - builder.contentType(MediaType.APPLICATION_OCTET_STREAM); - filename = URLEncoder.encode(filename, "UTF-8"); - if (isIeBrowser) { - builder.header("Content-Disposition", "attachment; filename=" + filename); - } else { - builder.header("Content-Disposition", "attacher; filename*=UTF-8''" + filename); - } + if (!originalFilename.endsWith(".".concat(gaeaFile.getFileType()))) { + originalFilename = originalFilename.concat(".").concat(gaeaFile.getFileType()); } - return builder.body(FileUtils.readFileToByteArray(file)); + + // 调用文件存储工厂，读取文件，返回字节数组 + byte[] fileBytes = gaeaOSSTemplate.downloadFile(fileObjectName); + + // 根据文件后缀来判断，是显示图片\视频\音频，还是下载文件 + return ResponseUtil.writeBody(originalFilename, fileBytes, isIEBrowser); } catch (Exception e) { - log.error("file download error: {}", e); - return null; + log.error("file download error", e); + throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e.getMessage()); } } + /** + * 获取文件 + * + * @param fileId + * @return + */ + @Override + public byte[] getFile(String fileId) { + // fileId必填 + if(StringUtils.isBlank(fileId)){ + throw BusinessExceptionBuilder.build(ResponseCode.FILE_ONT_EXSIT); + } + // 根据fileId，从gaea_file中读出filePath + LambdaQueryWrapper queryWrapper = Wrappers.lambdaQuery(); + queryWrapper.eq(GaeaFile::getFileId, fileId); + GaeaFile gaeaFile = gaeaFileMapper.selectOne(queryWrapper); + if (null == gaeaFile) { + throw BusinessExceptionBuilder.build(ResponseCode.FILE_ONT_EXSIT); + } + + // 在oss中存储的文件名 402b6193e70e40a9bf5b73a78ea1e8ab.png + String fileObjectName = gaeaFile.getFileId().concat(".").concat(gaeaFile.getFileType()); + String originalFilename = gaeaFile.getFileInstruction(); + if (StringUtils.isBlank(fileObjectName) || StringUtils.isBlank(originalFilename)) { + throw BusinessExceptionBuilder.build(ResponseCode.FILE_ONT_EXSIT); + } + + // 调用文件存储工厂，读取文件，返回字节数组 + return gaeaOSSTemplate.downloadFile(fileObjectName); + } + /** * 批处理操作后续处理 * 删除本地已经存在的文件 @@ -209,13 +209,7 @@ public class GaeaFileServiceImpl implements GaeaFileService { public void processBatchAfterOperation(List entities, BaseOperationEnum operationEnum) throws BusinessException { if (operationEnum.equals(BaseOperationEnum.DELETE_BATCH)) { // 删除本地文件 - entities.forEach(gaeaFile -> { - String filePath = gaeaFile.getFilePath(); - File file = new File(filePath); - if (file.exists()) { - file.delete(); - } - }); + entities.forEach(gaeaFile -> gaeaOSSTemplate.deleteFile(gaeaFile.getFileId().concat(".").concat(gaeaFile.getFileType()))); } } diff --git a/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/reportexcel/controller/ReportExcelController.java b/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/reportexcel/controller/ReportExcelController.java index 9e5594b121cfff18e21e0f3a2c9505781bb0cd54..fbb218612da0749ce7bbdd99402d06bb2fbb1a7e 100644 --- a/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/reportexcel/controller/ReportExcelController.java +++ b/report-core/src/main/java/com/anjiplus/template/gaea/business/modules/reportexcel/controller/ReportExcelController.java @@ -84,7 +84,7 @@ public class ReportExcelController extends GaeaBaseController lists=(List ) JSON.parse(jsonStr); - OutputStream out; + OutputStream out = null; + File file = null; try { - String fileId = UUID.randomUUID().toString(); - String filePath = dictPath + File.separator + fileId + ".xlsx"; - String urlPath = fileDownloadPath + java.io.File.separator + fileId; - - GaeaFile gaeaFile = new GaeaFile(); - gaeaFile.setFilePath(filePath); - gaeaFile.setFileId(fileId); - gaeaFile.setUrlPath(urlPath); - gaeaFile.setFileType("xlsx"); - gaeaFile.setFileInstruction(reportCode + ".xlsx"); - - out = new FileOutputStream(filePath); + String fileName = report.getReportCode(); + File dir = new File(dictPath + ZIP_PATH); + if (!dir.exists()){ + dir.mkdirs(); + } + String filePath = dir.getAbsolutePath() + File.separator + fileName + ".xlsx"; + file = new File(filePath); + out = Files.newOutputStream(Paths.get(filePath)); XlsUtil.exportXlsFile(out, true, lists); + gaeaFileService.upload(file); - gaeaFileMapper.insert(gaeaFile); - logger.info("导出成功：{}", gaeaFile); } catch (IOException e) { logger.error("导出失败", e); + }finally { + try { + out.close(); + file.delete(); + } catch (IOException e) { + throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e.getMessage()); + } + } } return true; diff --git a/report-core/src/main/java/com/anjiplus/template/gaea/business/util/FileUtil.java b/report-core/src/main/java/com/anjiplus/template/gaea/business/util/FileUtil.java index 5532b53d778e621ff8a0529e1deb1d8919e809ed..a0ac736505ae69f79faa50c51401d5cc0bb74a29 100644 --- a/report-core/src/main/java/com/anjiplus/template/gaea/business/util/FileUtil.java +++ b/report-core/src/main/java/com/anjiplus/template/gaea/business/util/FileUtil.java @@ -1,7 +1,7 @@ package com.anjiplus.template.gaea.business.util; -import com.anji.plus.gaea.code.ResponseCode; import com.anji.plus.gaea.exception.BusinessExceptionBuilder; +import com.anjiplus.template.gaea.business.code.ResponseCode; import lombok.extern.slf4j.Slf4j; import org.springframework.web.multipart.MultipartFile; @@ -42,7 +42,7 @@ public class FileUtil { log.info("链接下载图片：{}，临时路径：{}", urlPath, path); } catch (IOException e) { log.error("根据链接下载失败", e); - throw BusinessExceptionBuilder.build(ResponseCode.FAIL_CODE, e.getMessage()); + throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e.getMessage()); } } @@ -66,14 +66,14 @@ public class FileUtil { outputChannel.transferFrom(inputChannel, 0, inputChannel.size()); } catch (IOException e) { log.error("复制文件失败", e); - throw BusinessExceptionBuilder.build(ResponseCode.FAIL_CODE, e.getMessage()); + throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e.getMessage()); } finally { try { inputChannel.close(); outputChannel.close(); } catch (IOException e) { log.error("", e); - throw BusinessExceptionBuilder.build(ResponseCode.FAIL_CODE, e.getMessage()); + throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e.getMessage()); } } } @@ -106,7 +106,7 @@ public class FileUtil { outputStream.close(); } catch (Exception e) { log.error("写入文件失败", e); - throw BusinessExceptionBuilder.build(ResponseCode.FAIL_CODE, e.getMessage()); + throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e.getMessage()); } } @@ -132,20 +132,20 @@ public class FileUtil { return sbf.toString(); } catch (IOException e) { log.error("读文件失败", e); - throw BusinessExceptionBuilder.build(ResponseCode.FAIL_CODE, e.getMessage()); + throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e.getMessage()); } finally { if (null != isr) { try { isr.close(); } catch (IOException e) { - throw BusinessExceptionBuilder.build(ResponseCode.FAIL_CODE, e.getMessage()); + throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e.getMessage()); } } if (reader != null) { try { reader.close(); } catch (IOException e1) { - throw BusinessExceptionBuilder.build(ResponseCode.FAIL_CODE, e1.getMessage()); + throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e1.getMessage()); } } } @@ -185,14 +185,14 @@ public class FileUtil { compress(srcFile, zipOut, baseDir); } catch (IOException e) { log.error("压缩文件夹失败", e); - throw BusinessExceptionBuilder.build(ResponseCode.FAIL_CODE, e.getMessage()); + throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e.getMessage()); } finally { if (null != zipOut) { try { zipOut.close(); } catch (IOException e) { log.error("", e); - throw BusinessExceptionBuilder.build(ResponseCode.FAIL_CODE, e.getMessage()); + throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e.getMessage()); } out = null; } @@ -201,7 +201,7 @@ public class FileUtil { out.close(); } catch (IOException e) { log.error("", e); - throw BusinessExceptionBuilder.build(ResponseCode.FAIL_CODE, e.getMessage()); + throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e.getMessage()); } } } @@ -246,14 +246,14 @@ public class FileUtil { } catch (IOException e) { log.error("压缩文件夹失败", e); - throw BusinessExceptionBuilder.build(ResponseCode.FAIL_CODE, e.getMessage()); + throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e.getMessage()); } finally { if (null != bis) { try { bis.close(); } catch (IOException e) { log.error("", e); - throw BusinessExceptionBuilder.build(ResponseCode.FAIL_CODE, e.getMessage()); + throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e.getMessage()); } } } @@ -264,23 +264,26 @@ public class FileUtil { decompress(new ZipFile(zipFile), dstPath); } catch (IOException e) { log.error("", e); - throw BusinessExceptionBuilder.build(ResponseCode.FAIL_CODE, e.getMessage()); + throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e.getMessage()); } } public static void decompress(MultipartFile zipFile, String dstPath) { try { - File file = new File(dstPath + File.separator + zipFile.getOriginalFilename()); - if (!file.getParentFile().exists()) { - file.getParentFile().mkdirs(); + File dir = new File(dstPath); + if (!dir.exists()){ + dir.mkdirs(); } + String path = dir.getPath(); + String absolutePath = dir.getAbsolutePath(); + File file = new File(dir.getAbsolutePath() + File.separator + zipFile.getOriginalFilename()); zipFile.transferTo(file); decompress(new ZipFile(file), dstPath); //解压完删除 file.delete(); } catch (IOException e) { log.error("", e); - throw BusinessExceptionBuilder.build(ResponseCode.FAIL_CODE, e.getMessage()); + throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e.getMessage()); } } @@ -326,14 +329,14 @@ public class FileUtil { } } catch (IOException e) { log.error("解压失败", e); - throw BusinessExceptionBuilder.build(ResponseCode.FAIL_CODE, e.getMessage()); + throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e.getMessage()); } finally { if (null != in) { try { in.close(); } catch (IOException e) { log.error("", e); - throw BusinessExceptionBuilder.build(ResponseCode.FAIL_CODE, e.getMessage()); + throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e.getMessage()); } } @@ -342,7 +345,7 @@ public class FileUtil { out.close(); } catch (IOException e) { log.error("", e); - throw BusinessExceptionBuilder.build(ResponseCode.FAIL_CODE, e.getMessage()); + throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e.getMessage()); } } } @@ -350,7 +353,7 @@ public class FileUtil { zip.close(); } catch (IOException e) { log.error("解压失败", e); - throw BusinessExceptionBuilder.build(ResponseCode.FAIL_CODE, e.getMessage()); + throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e.getMessage()); } } @@ -371,7 +374,7 @@ public class FileUtil { ins.close(); } catch (Exception e) { log.error("获取流文件失败", e); - throw BusinessExceptionBuilder.build(ResponseCode.FAIL_CODE, e.getMessage()); + throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e.getMessage()); } } @@ -399,8 +402,49 @@ public class FileUtil { }); } catch (IOException e) { log.error("删除文件失败", e); - throw BusinessExceptionBuilder.build(ResponseCode.FAIL_CODE, e.getMessage()); + throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e.getMessage()); + } + } + + /** + * byte 转file + */ + public static File byte2File(byte[] buf, String filePath, String fileName){ + BufferedOutputStream bos = null; + FileOutputStream fos = null; + File file = null; + try{ + File dir = new File(filePath); + if (!dir.exists()){ + dir.mkdirs(); + } + file = new File(filePath + File.separator + fileName); + fos = new FileOutputStream(file); + bos = new BufferedOutputStream(fos); + bos.write(buf); + }catch (Exception e){ + log.error("", e); + throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e.getMessage()); + } + finally{ + if (bos != null){ + try{ + bos.close(); + }catch (IOException e){ + log.error("", e); + throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e.getMessage()); + } + } + if (fos != null){ + try{ + fos.close(); + }catch (IOException e){ + log.error("", e); + throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e.getMessage()); + } + } } + return file; } diff --git a/report-core/src/main/java/com/anjiplus/template/gaea/business/util/JwtUtil.java b/report-core/src/main/java/com/anjiplus/template/gaea/business/util/JwtUtil.java index 753f4def9cf146729e2732cb55e0f14d7c5e6b9a..264615933779ed6be370781184bfac52424b4578 100644 --- a/report-core/src/main/java/com/anjiplus/template/gaea/business/util/JwtUtil.java +++ b/report-core/src/main/java/com/anjiplus/template/gaea/business/util/JwtUtil.java @@ -1,5 +1,6 @@ package com.anjiplus.template.gaea.business.util; +import com.anji.plus.gaea.constant.GaeaConstant; import com.anji.plus.gaea.exception.BusinessExceptionBuilder; import com.anjiplus.template.gaea.business.code.ResponseCode; import com.auth0.jwt.JWT; @@ -9,8 +10,11 @@ import com.auth0.jwt.interfaces.Claim; import com.auth0.jwt.interfaces.DecodedJWT; import org.apache.commons.lang3.StringUtils; +import java.util.Arrays; import java.util.Date; +import java.util.List; import java.util.Map; +import java.util.stream.Collectors; /** * Created by raodeming on 2021/8/18. @@ -53,6 +57,15 @@ public class JwtUtil { return claim.asString(); } + /** + * 存在多个分享token + * @param tokenList + * @return + */ + public static List getReportCodeList(String tokenList) { + return Arrays.stream(tokenList.split(GaeaConstant.SPLIT)).filter(StringUtils::isNotBlank).map(JwtUtil::getReportCode).distinct().collect(Collectors.toList()); + } + public static String getShareCode(String token) { Claim claim = getClaim(token).get("shareCode"); if (null == claim) { diff --git a/report-core/src/main/resources/bootstrap-dev.yml b/report-core/src/main/resources/bootstrap-dev.yml index ad947c14ff418cc19ca8626c4b67b7ced8b9d843..f8383dc70c7b2ed2755a8697b7edc981056f28ea 100644 --- a/report-core/src/main/resources/bootstrap-dev.yml +++ b/report-core/src/main/resources/bootstrap-dev.yml @@ -4,8 +4,17 @@ spring: url: jdbc:mysql://10.108.26.197:3306/aj_report?characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&useSSL=false username: root password: appuser@anji + gaea: + subscribes: + oss: #文件存储 + enabled: true + ##允许上传的文件后缀 + file-type-while-list: .png|.jpg|.gif|.icon|.pdf|.xlsx|.xls|.csv|.mp4|.avi|.jpeg + # 用于文件上传成功后，生成文件的下载公网完整URL + downloadPath: http://127.0.0.1:9095/file/download + nfs: + path: D:\\aaa\\ + + + -customer: - file: - dist-path: D:\Workspace\AJ-Report\report-core\upload - downloadPath: http://127.0.0.1:9095/file/download diff --git a/report-core/src/main/resources/bootstrap-prod.yml b/report-core/src/main/resources/bootstrap-prod.yml index 17071c3d9dbf23ab9a32a8f9b2ec0bf299be5618..d2b38dd98446d1e40c10fd1d541f80698239221b 100644 --- a/report-core/src/main/resources/bootstrap-prod.yml +++ b/report-core/src/main/resources/bootstrap-prod.yml @@ -4,7 +4,3 @@ spring: url: jdbc:mysql://10.108.26.197:3306/aj_report?characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&useSSL=false username: root password: appuser@anji - -customer: - file: - dist-path: /app/disk/upload/ \ No newline at end of file diff --git a/report-core/src/main/resources/bootstrap.yml b/report-core/src/main/resources/bootstrap.yml index 2d3581a32f47d26a53ae93aa69c4a3d01ec275d0..eb251e4957479d03d2cc10b427a50917283da2df 100644 --- a/report-core/src/main/resources/bootstrap.yml +++ b/report-core/src/main/resources/bootstrap.yml @@ -22,6 +22,14 @@ spring: url: jdbc:mysql://10.108.26.197:3306/aj_report?characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&useSSL=false username: root password: appuser@anji + + #如果要使用redis，请参考report-core目录下的README.md文件中写的进行调整 +# redis: +# host: 127.0.0.1 +# port: 6379 +# password: root +# database: 1 + #数据源连接池配置 druid: initial-size: 10 # 初始化时建立物理连接的个数。初始化发生在显示调用init方法，或者第一次getConnection时 @@ -46,6 +54,31 @@ spring: placeholder-replacement: false init-sqls: - CREATE DATABASE IF NOT EXISTS `aj_report` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci; + gaea: + subscribes: + oss: #文件存储 都配置的情况下优先级minio->amazonS3->nfs + enabled: true + ##允许上传的文件后缀 + file-type-while-list: .png|.jpg|.gif|.icon|.pdf|.xlsx|.xls|.csv|.mp4|.avi|.jpeg|.aaa + # 用于文件上传成功后，生成文件的下载公网完整URL + downloadPath: http://10.108.26.197:9095/file/download + nfs: + #上传对应本地全路径，目录必须是真实存在的，注意 Win是 \ 且有盘符，linux是 / 无盘符 + path: /app/disk/upload/ + #若要使用minio文件存储，请启用以下配置 + #minio: + # url: http://127.0.0.1 + # port: 9000 + # access-key: minioreport + # secret-key: minioreport + # bucket-name: aj-report + #若要使用amazonS3文件存储，请启用以下配置 + #amazonS3: + # url: http://127.0.0.1 + # access-key: access-key + # secret-key: secret-key + # bucket-name: AJ-Report + #若minio和amazonS3都没有，使用服务器高可用的nfs共享盘 mybatis-plus: configuration: @@ -64,18 +97,11 @@ logging: # 本应用自定义参数 customer: - # 开发测试用本地文件，如果是生产，请考虑使用对象存储 - file: - #上传对应本地全路径，目录必须是真实存在的，注意 Win是 \ 且有盘符，linux是 / 无盘符 - dist-path: /app/disk/upload/ - #dist-path: D:\Download - white-list: .png|.jpg|.jpeg|.gif|.icon|.pdf|.xlsx|.xls|.csv|.mp4|.avi - excelSuffix: .xlsx|.xls|.csv - #上传对应下载的下载链接路径 http://serverip:9095/file/download - downloadPath: http://10.108.26.197:9095/file/download - # 跳过token验证和权限验证的url清单 skip-authenticate-urls: /gaeaDict/all, /login, /static, /file/download/, /index.html, /favicon.ico, /reportShare/detailByCode + file: + #导入导出临时文件夹 默认.代表当前目录，拼接/tmp_zip/目录 + tmpPath: . user: ##新增用户默认密码 default: diff --git a/report-core/src/main/resources/db/migration/V1.0.24__add_dict_radar.sql b/report-core/src/main/resources/db/migration/V1.0.24__add_dict_radar.sql new file mode 100644 index 0000000000000000000000000000000000000000..c9807e83c4e5c7a0ae349b64b6eda6b99357e7a1 --- /dev/null +++ b/report-core/src/main/resources/db/migration/V1.0.24__add_dict_radar.sql @@ -0,0 +1,6 @@ +-- 新增雷达图字典 + +INSERT INTO `aj_report`.`gaea_dict`(`dict_name`, `dict_code`, `remark`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('雷达属性', 'RADAR_PROPERTIES', '雷达属性', 'admin', NOW(), 'admin', NOW(), 1); + +INSERT INTO `aj_report`.`gaea_dict_item`(`dict_code`, `item_name`, `item_value`, `item_extend`, `enabled`, `locale`, `remark`, `sort`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('RADAR_PROPERTIES', '名称', 'name', NULL, 1, 'zh', NULL, NULL, 'admin', NOW(), 'admin', NOW(), 1); +INSERT INTO `aj_report`.`gaea_dict_item`(`dict_code`, `item_name`, `item_value`, `item_extend`, `enabled`, `locale`, `remark`, `sort`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('RADAR_PROPERTIES', '雷达顶点', 'radar', NULL, 1, 'zh', NULL, NULL, 'admin', NOW(), 'admin', NOW(), 1); diff --git a/report-core/src/main/resources/i18n/messages_en_US.properties b/report-core/src/main/resources/i18n/messages_en_US.properties index 43cf12ef6e10d022e22cdd2ed8bf6610527b5d9c..9b373895dc96986c1540a5faf38c97602fc7ef9e 100644 --- a/report-core/src/main/resources/i18n/messages_en_US.properties +++ b/report-core/src/main/resources/i18n/messages_en_US.properties @@ -9,8 +9,9 @@ user.old.password.error=user old password error 1013=The code does not allow duplication 2001=File names are not allowed to be empty 2002=Unsupported suffix type -2003=File upload failed +2003=File upload failed:{0} 2004=File does not exist +file.operation.failed=File operation failed\uFF1A{0} field.not.null={} can not be null field.not.empty={} can not be empty @@ -37,16 +38,16 @@ Rule.field.value.is.required=Rule field value is required Rule.field.value.type.error=Rule field value type error Rule.fields.check.error=Rule fields check error Component.load.check.error={0} Component not load -4001=Data source connection failed +4001=Data source connection failed {0} 4002=Data source type is not currently supported -4003=execute sql error -4004=Incomplete parameter replacement values -4005=execute js error -4006=analysis data error +4003=execute sql error, {0} +4004=Incomplete parameter replacement values {0} +4005=execute js error {0} +4006=analysis data error {0} 4007=The report code does not allow duplication 4008=The set code does not allow duplication -4009=The source code does not allow duplication +4009=The source code does not allow duplication {0} 4010=Can't auto find match driver class -4011=execute javaBean error +4011=execute javaBean error {0} report.share.link.invalid=report share link invalid diff --git a/report-core/src/main/resources/i18n/messages_zh_CN.properties b/report-core/src/main/resources/i18n/messages_zh_CN.properties index a8e54261c83338233216c57c280df5227b2babc9..7222ba5c7cb7d7823c59aa625d420d78bb7648cb 100644 --- a/report-core/src/main/resources/i18n/messages_zh_CN.properties +++ b/report-core/src/main/resources/i18n/messages_zh_CN.properties @@ -8,8 +8,9 @@ user.old.password.error=\u65E7\u5BC6\u7801\u4E0D\u6B63\u786E 1013=\u7F16\u7801\u4E0D\u5141\u8BB8\u91CD\u590D 2001=\u6587\u4EF6\u540D\u4E0D\u5141\u8BB8\u4E3A\u7A7A 2002=\u6587\u4EF6\u7C7B\u578B\u4E0D\u652F\u6301 -2003=\u6587\u4EF6\u4E0A\u4F20\u5931\u8D25 +2003=\u6587\u4EF6\u4E0A\u4F20\u5931\u8D25\uFF1A{0} 2004=\u6587\u4EF6\u4E0D\u5B58\u5728 +file.operation.failed=\u6587\u4EF6\u64CD\u4F5C\u5931\u8D25\uFF1A{0} field.not.null={}\u4E0D\u80FD\u4E3Anull field.not.empty={}\u4E0D\u80FD\u4E3A\u7A7A\u5B57\u7B26\u4E32 @@ -38,17 +39,17 @@ Rule.field.value.type.error=\u89C4\u5219\u5B57\u6BB5\u503C\u7C7B\u578B\u9519\u8B Rule.fields.check.error=\u89C4\u5219\u53C2\u6570\u6821\u9A8C\u4E0D\u901A\u8FC7 Component.load.check.error={0}\u7EC4\u4EF6\u672A\u52A0\u8F7D -4001=\u6570\u636E\u6E90\u8FDE\u63A5\u5931\u8D25 +4001=\u6570\u636E\u6E90\u8FDE\u63A5\u5931\u8D25\uFF0C{0} 4002=\u6570\u636E\u6E90\u7C7B\u578B\u6682\u4E0D\u652F\u6301 -4003=\u6267\u884Csql\u5931\u8D25 -4004=\u53C2\u6570\u66FF\u6362\u503C\u4E0D\u5168 -4005=\u6267\u884Cjs\u5931\u8D25 -4006=\u89E3\u6790\u6570\u636E\u5931\u8D25 +4003=\u6267\u884Csql\u5931\u8D25\uFF0C{0} +4004=\u53C2\u6570\u66FF\u6362\u503C\u4E0D\u5168\uFF0C{0} +4005=\u6267\u884Cjs\u5931\u8D25\uFF0C{0} +4006=\u89E3\u6790\u6570\u636E\u5931\u8D25\uFF0C{0} 4007=\u62A5\u8868\u7F16\u7801\u4E0D\u5141\u8BB8\u91CD\u590D 4008=\u6570\u636E\u96C6\u7F16\u7801\u4E0D\u5141\u8BB8\u91CD\u590D 4009=\u6570\u636E\u6E90\u7F16\u7801\u4E0D\u5141\u8BB8\u91CD\u590D -4010=\u9A71\u52A8\u5305\u4E0D\u5B58\u5728 -4011=\u6267\u884CjavaBean\u5931\u8D25 +4010=\u9A71\u52A8\u5305\u4E0D\u5B58\u5728\uFF0C{0} +4011=\u6267\u884CjavaBean\u5931\u8D25\uFF0C{0} 6001={0} 7001=\u89E3\u6790\u5931\u8D25 diff --git a/report-ui/src/api/GaeaReport.js b/report-ui/src/api/GaeaReport.js index 5421b12261cb40016366c21453b803110c82f5ed..731f15d247ae61253d47889986b19f12a41c46fe 100644 --- a/report-ui/src/api/GaeaReport.js +++ b/report-ui/src/api/GaeaReport.js @@ -1,4 +1,5 @@ import request from '@/utils/request' +import {getShareToken, getToken} from "@/utils/auth"; // 设计报表 export function design(data) { @@ -14,6 +15,7 @@ export function preview(data) { return request({ url: 'reportExcel/preview', method: 'post', + headers: { 'Share-Token': getShareToken(), 'Authorization': getToken() }, data, }) } diff --git a/report-ui/src/assets/iconfont/demo_index.html b/report-ui/src/assets/iconfont/demo_index.html index be9a80fdb10d4144af6d618ca8a2e6bac34601c5..c00f8e89667526c6bb0abda98d78db6d7e07acd2 100644 --- a/report-ui/src/assets/iconfont/demo_index.html +++ b/report-ui/src/assets/iconfont/demo_index.html @@ -3,8 +3,8 @@ iconfont Demo - - + + @@ -54,6 +54,12 @@
    +
  • + +
    雷达图2
    +
    &#xe640;
    +
    • +
  • 热力图
    @@ -810,9 +816,9 @@ 
    @font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1650520683161') format('woff2'),
-       url('iconfont.woff?t=1650520683161') format('woff'),
-       url('iconfont.ttf?t=1650520683161') format('truetype');
+  src: url('iconfont.woff2?t=1666946350865') format('woff2'),
+       url('iconfont.woff?t=1666946350865') format('woff'),
+       url('iconfont.ttf?t=1666946350865') format('truetype');
 }

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

    @@ -838,6 +844,15 @@
      +
    • + +
      + 雷达图2 +
      +
      .iconleidatu +
      +
      • +
    • @@ -1972,6 +1987,14 @@
        +
      • + +
        雷达图2
        +
        #iconleidatu
        +
        • +
      • + 新增 + + + + + + + + + + + + + + + + + + + + + + + + + + 取 消 + 确 定 + + +
        + + + diff --git a/report-ui/src/views/bigscreenDesigner/designer/components/dynamicForm.vue b/report-ui/src/views/bigscreenDesigner/designer/components/dynamicForm.vue index 9544eca05e4dba3d6cbae70f7c331a163871f946..587cf649aebebdd8af39994908c02af85d9af975 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/components/dynamicForm.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/components/dynamicForm.vue @@ -145,6 +145,11 @@ :chart-type="item.chartType" @change="changed($event, item.name)" /> +
      @@ -276,6 +281,7 @@ import dynamicComponents from "./dynamicComponents.vue"; import customColorComponents from "./customColorComponents"; import dynamicAddTable from "./dynamicAddTable.vue"; import customUpload from "./customUpload.vue"; +import dynamicAddRadar from "./dynamicAddRadar"; export default { name: "DynamicForm", components: { @@ -284,7 +290,8 @@ export default { dynamicComponents, customColorComponents, dynamicAddTable, - customUpload + customUpload, + dynamicAddRadar }, model: { prop: "value", diff --git a/report-ui/src/views/bigscreenDesigner/designer/index.vue b/report-ui/src/views/bigscreenDesigner/designer/index.vue index 5a98955094fbe20582b8602982dd92f18e6907f5..124df5eb794bfb6131d7d8be2169e0f89c4e031d 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/index.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/index.vue @@ -12,24 +12,34 @@ class="layout-left" :style="{ width: widthLeftForTools + 'px' }" > - + - -
    • -
      - - - - {{ widget.label }} -
      -
      • + 工具栏 +
      + + +
    • +
      + + + + {{ it.label }} +
      +
      • +       +       +
      @@ -170,7 +180,7 @@ class="workbench-container" :style="{ width: bigscreenWidthInWorkbench + 'px', - height: bigscreenHeightInWorkbench + 'px' + height: bigscreenHeightInWorkbench + 'px', }" @mousedown="handleMouseDown" > @@ -197,7 +207,7 @@ 'background-repeat': 'initial', 'background-attachment': 'initial', 'background-origin': 'initial', - 'background-clip': 'initial' + 'background-clip': 'initial', }" @click.self="setOptionsOnClickScreen" @drop="widgetOnDragged($event)" @@ -235,7 +245,7 @@ @@ -281,7 +291,7 @@ import { insertDashboard, detailDashboard, importDashboard, - exportDashboard + exportDashboard, } from "@/api/bigscreen"; import { widgetTools, getToolByCode } from "./tools/index"; import widget from "./widget/widget.vue"; @@ -299,7 +309,7 @@ export default { VueRulerTool, widget, dynamicForm, - contentMenu + contentMenu, }, data() { return { @@ -330,7 +340,7 @@ export default { backgroundImage: "", // 大屏背景图片 refreshSeconds: null, // 大屏刷新时间间隔 presetLine: [], // 辅助线 - presetLineVisible: true // 辅助线是否显示 + presetLineVisible: true, // 辅助线是否显示 }, // 大屏的标记 screenCode: "", @@ -348,12 +358,12 @@ export default { height: 100, left: 0, top: 0, - zIndex: 0 - } + zIndex: 0, + }, }, // options属性是从工具栏中拿到的tools中拿到 - options: [] - } + options: [], + }, ], // 工作区中拖放的组件 // 当前激活组件 @@ -362,16 +372,16 @@ export default { widgetOptions: { setup: [], // 配置 data: [], // 数据 - position: [] // 坐标 + position: [], // 坐标 }, flagWidgetClickStopPropagation: false, // 点击组件时阻止事件冒泡传递到画布click事件上 styleObj: { left: 0, - top: 0 + top: 0, }, visibleContentMenu: false, rightClickIndex: -1, - activeName: "first" + activeName: "first", }; }, computed: { @@ -380,7 +390,7 @@ export default { }, headers() { return { - Authorization: getToken() // 直接从本地获取token就行 + Authorization: getToken(), // 直接从本地获取token就行 }; }, // 左侧折叠切换时，动态计算中间区的宽度 @@ -407,9 +417,7 @@ export default { return Math.min(widthScale, heightScale); }, workbenchTransform() { - return `scale(${this.bigscreenScaleInWorkbench}, ${ - this.bigscreenScaleInWorkbench - })`; + return `scale(${this.bigscreenScaleInWorkbench}, ${this.bigscreenScaleInWorkbench})`; }, // 大屏在设计模式的大小 bigscreenWidthInWorkbench() { @@ -419,7 +427,7 @@ export default { return ( this.getPXUnderScale(this.bigscreenHeight) + this.widthPaddingTools ); - } + }, }, watch: { widgets: { @@ -430,8 +438,8 @@ export default { this.revoke.push(this.widgets); }); }, - deep: true - } + deep: true, + }, }, created() { /* 以下是记录历史的 */ @@ -476,7 +484,7 @@ export default { const obj = {}; obj.icon = getToolByCode(val[i].type).icon; const options = val[i].options["setup"]; - options.forEach(el => { + options.forEach((el) => { if (el.name == "layerName") { obj.label = el.value; } @@ -512,7 +520,7 @@ export default { backgroundImage: (data && data.backgroundImage) || "", height: (data && data.height) || "1080", title: (data && data.title) || "", - width: (data && data.width) || "1920" + width: (data && data.width) || "1920", }; }, handleInitEchartsData(data) { @@ -524,7 +532,7 @@ export default { obj.value = { setup: widgets[i].value.setup, data: widgets[i].value.data, - position: widgets[i].value.position + position: widgets[i].value.position, }; const tool = this.deepClone(getToolByCode(widgets[i].type)); const option = tool.options; @@ -545,7 +553,7 @@ export default { } else if (Object.prototype.toString.call(item) == "[object Array]") { for (let j = 0; j < item.length; j++) { const list = item[j].list; - list.forEach(el => { + list.forEach((el) => { if (key == el.name) { el.value = data.setup[key]; } @@ -585,9 +593,9 @@ export default { width: this.dashboard.width, height: this.dashboard.height, backgroundColor: this.dashboard.backgroundColor, - backgroundImage: this.dashboard.backgroundImage + backgroundImage: this.dashboard.backgroundImage, }, - widgets: this.widgets + widgets: this.widgets, }; const { code, data } = await insertDashboard(screenData); if (code == "200") { @@ -598,7 +606,7 @@ export default { viewScreen() { let routeUrl = this.$router.resolve({ path: "/bigscreen/viewer", - query: { reportCode: this.$route.query.reportCode } + query: { reportCode: this.$route.query.reportCode }, }); window.open(routeUrl.href, "_blank"); }, @@ -608,15 +616,15 @@ export default { const param = { reportCode: this.$route.query.reportCode, - showDataSet: val + showDataSet: val, }; - exportDashboard(param).then(res => { + exportDashboard(param).then((res) => { const that = this; const type = res.type; if (type == "application/json") { let reader = new FileReader(); reader.readAsText(res, "utf-8"); - reader.onload = function() { + reader.onload = function () { const data = JSON.parse(reader.result); that.$message.error(data.message); }; @@ -645,19 +653,19 @@ export default { if (response.code == "200") { this.$message({ message: "导入成功！", - type: "success" + type: "success", }); } else { this.$message({ message: response.message, - type: "error" + type: "error", }); } }, handleError(err) { this.$message({ message: "上传失败！", - type: "error" + type: "error", }); }, @@ -704,10 +712,10 @@ export default { height: 0, left: 0, top: 0, - zIndex: 0 - } + zIndex: 0, + }, }, - options: tool.options + options: tool.options, }; // 处理默认值 const widgetJsonValue = this.handleDefaultValue(widgetJson); @@ -739,7 +747,7 @@ export default { ) { for (let j = 0; j < item.length; j++) { const list = item[j].list; - list.forEach(el => { + list.forEach((el) => { widgetJson.value.setup[el.name] = el.value; }); } @@ -789,7 +797,7 @@ export default { } this.widgetIndex = obj.index; this.widgets[obj.index].value.position = obj; - this.widgets[obj.index].options.position.forEach(el => { + this.widgets[obj.index].options.position.forEach((el) => { for (const key in obj) { if (el.name == key) { el.value = obj[key]; @@ -835,7 +843,7 @@ export default { if (this.bigscreenHeight != this.dashboard.height) { this.bigscreenHeight = this.dashboard.height; } - this.widgetOptions.setup.forEach(el => { + this.widgetOptions.setup.forEach((el) => { if (el.name == "width") { el.value = this.bigscreenWidth; } else if (el.name == "height") { @@ -864,7 +872,7 @@ export default { this.styleObj = { left: left + "px", top: top + "px", - display: "block" + display: "block", }; } this.visibleContentMenu = true; @@ -948,8 +956,8 @@ export default { } else { this.widgets.unshift(this.widgets.splice(this.rightClickIndex, 1)[0]); } - } - } + }, + }, }; @@ -1353,4 +1361,92 @@ li { /deep/ .vue-ruler-v { opacity: 0.3; } +.layout-left { + width: 200px; + background: #242a30; + overflow-x: hidden; + overflow-y: auto; + .chart-type { + display: flex; + flex-direction: row; + overflow: hidden; + .type-left { + width: 100%; + height: calc(100vh - 80px); + text-align: center; + /deep/.el-tabs__header { + width: 30%; + margin-right: 0; + .el-tabs__nav-wrap { + &::after { + background: transparent; + } + .el-tabs__item { + text-align: center; + width: 100% !important; + color: #fff; + padding: 0; + font-size: 12px !important; + } + } + } + /deep/.el-tabs__content { + width: 70%; + } + } + } + //工具栏一个元素 + .tools-item { + display: flex; + position: relative; + width: 100%; + height: 48px; + align-items: center; + -webkit-box-align: center; + padding: 0 6px; + cursor: pointer; + font-size: 12px; + margin-bottom: 1px; + + .tools-item-icon { + color: #409eff; + margin-right: 10px; + width: 53px; + height: 30px; + line-height: 30px; + text-align: center; + display: block; + border: 1px solid #3a4659; + background: #282a30; + } + .tools-item-text { + font-size: 12px !important; + } + } + /deep/.el-tabs__content { + padding: 0; + } +} +/* 设置滚动条的样式 */ + +::-webkit-scrollbar { + width: 0; +} + +/* 滚动槽 */ + +::-webkit-scrollbar-track { + -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3); +} + +/* 滚动条滑块 */ + +::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.1); + -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5); +} + +::-webkit-scrollbar-thumb:window-inactive { + background: rgba(255, 0, 0, 0.4); +} diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-compare.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-compare.js new file mode 100644 index 0000000000000000000000000000000000000000..97762379e52684d6a211b85449929ac02803690b --- /dev/null +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-compare.js @@ -0,0 +1,780 @@ +/* + * @Descripttion: 柱状对比图 json + * @version: + * @Author: qianlishi + * @Date: 2021-08-29 07:39:35 + * @LastEditors: qianlishi + * @LastEditTime: 2021-09-28 14:09:58 + */ +export const widgetBarCompare = { + code: 'widgetBarCompareChart', + type: 'barChart', + tabName: '柱状图', + label: '柱状对比图', + icon: 'iconduibitupu', + 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-slider', + label: '最大宽度', + name: 'maxWidth', + required: false, + placeholder: '', + value: 15, + }, + { + 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: '#FFD700' + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'textFontSize', + required: false, + placeholder: '', + value: 20 + }, + { + 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-select', + label: '字体风格', + name: 'textFontStyle', + required: false, + placeholder: '', + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'italic', name: 'italic斜体' }, + { code: 'oblique', name: 'oblique斜体' }, + ], + value: 'normal' + }, + { + 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-number', + label: '字体字号', + name: 'subTextFontSize', + required: false, + placeholder: '', + value: 20 + }, + { + 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-select', + label: '字体风格', + name: 'subTextFontStyle', + required: false, + placeholder: '', + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'italic', name: 'italic斜体' }, + { code: 'oblique', name: 'oblique斜体' }, + ], + value: 'normal' + }, + ], + }, + { + name: '图例操作', + list: [ + { + type: 'el-switch', + label: '图例显示', + name: 'isShowLegend', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '图例名称', + name: 'legendName', + required: false, + placeholder: '多值以' | '隔开', + value: '' + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'legendColor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'legendFontSize', + required: false, + placeholder: '', + value: 12, + }, + { + type: 'el-input-number', + label: '图例宽度', + name: 'legendWidth', + required: false, + placeholder: '', + value: 12, + }, + { + 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: '左X轴设置', + list: [ + { + type: 'el-switch', + label: '数值显示', + name: 'hideXLeft', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-number', + label: '数值间隔', + name: 'splitNumberLeft', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '数值颜色', + name: 'colorXLeft', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '数值字号', + name: 'fontSizeXLeft', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-select', + label: '数值位置', + name: 'positionXLeft', + required: false, + placeholder: '', + selectOptions: [ + { code: 'bottom', name: '底部' }, + { code: 'top', name: '顶部' }, + ], + value: 'bottom' + }, + { + type: 'el-switch', + label: '刻度线显示', + name: 'tickLineLeft', + require: false, + placeholder: '', + value: false, + }, + { + type: 'el-switch', + label: '坐标轴显示', + name: 'lineXLeft', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '坐标轴颜色', + name: 'lineColorXLeft', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineLeft', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorLeft', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '分割线宽度', + name: 'splitLineFontWidthLeft', + required: false, + placeholder: '', + value: 1, + }, + { + type: 'el-switch', + label: '边框线显示', + name: 'frameLineLeft', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '边框线颜色', + name: 'borderColorLeft', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '边框线宽度', + name: 'borderWidthLeft', + required: false, + placeholder: '', + value: 1, + }, + ], + }, + { + name: '右X轴设置', + list: [ + { + type: 'el-switch', + label: '数值显示', + name: 'hideXRight', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-number', + label: '数值间隔', + name: 'splitNumberRight', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '数值颜色', + name: 'colorXRight', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '数值字号', + name: 'fontSizeXRight', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-select', + label: '数值位置', + name: 'positionXRight', + required: false, + placeholder: '', + selectOptions: [ + { code: 'bottom', name: '底部' }, + { code: 'top', name: '顶部' }, + ], + value: 'bottom' + }, + { + type: 'el-switch', + label: '刻度线显示', + name: 'tickLineRight', + require: false, + placeholder: '', + value: false, + }, + { + type: 'el-switch', + label: '坐标轴显示', + name: 'lineXRight', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '坐标轴颜色', + name: 'lineColorXRight', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineRight', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorRight', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '分割线宽度', + name: 'splitLineFontWidthRight', + required: false, + placeholder: '', + value: 1, + }, + { + type: 'el-switch', + label: '边框线显示', + name: 'frameLineRight', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '边框线颜色', + name: 'borderColorRight', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '边框线宽度', + name: 'borderWidthRight', + required: false, + placeholder: '', + value: 1, + }, + ], + }, + { + name: 'Y轴设置', + list: [ + { + type: 'el-switch', + label: '数值显示', + name: 'hideY', + required: false, + placeholder: '', + value: true, + }, + { + 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-select', + label: '数值位置', + name: 'textAlignY', + required: false, + placeholder: '', + selectOptions: [ + { code: 'center', name: '居中' }, + { code: 'left', name: '右对齐' }, + { code: 'right', name: '左对齐' }, + ], + value: 'center' + }, + { + type: 'el-switch', + label: '刻度线显示', + name: 'tickLineY', + require: false, + placeholder: '', + value: false, + }, + { + type: 'el-switch', + label: '坐标轴显示', + name: 'lineY', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '坐标轴颜色', + name: 'lineColorY', + required: false, + placeholder: '', + value: '#fff', + }, + ], + }, + { + name: '数值设定', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShow', + required: false, + placeholder: '', + value: true + }, + { + 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: 'tipsColor', + required: false, + placeholder: '', + value: '#00FEFF' + }, + ], + }, + { + name: '坐标轴边距设置', + list: [ + { + type: 'el-slider', + label: '左右边距(像素)', + name: 'marginLeftRight', + required: false, + placeholder: '', + value: 10, + }, + { + type: 'el-slider', + label: '顶边距(像素)', + name: 'marginTop', + required: false, + placeholder: '', + value: 40, + }, + { + type: 'el-slider', + label: '底边距(像素)', + name: 'marginBottom', + required: false, + placeholder: '', + value: 10, + }, + ], + }, + { + name: '自定义配色', + list: [ + { + type: 'customColor', + label: '', + name: 'customColor', + required: false, + value: [{ color: '#36c5e7' }, { 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": "07-25", "name": "success", "data": "2" }, + { "axis": "07-25", "name": "fail", "data": "10" }, + { "axis": "07-26", "name": "success", "data": "5" }, + { "axis": "07-26", "name": "fail", "data": "20" }, + { "axis": "07-27", "name": "success", "data": "15" }, + { "axis": "07-27", "name": "fail", "data": "30" }, + { "axis": "07-28", "name": "success", "data": "10" }, + { "axis": "07-28", "name": "fail", "data": "12" }, + { "axis": "07-29", "name": "success", "data": "9" }, + { "axis": "07-29", "name": "fail", "data": "16" }, + ], + }, + { + type: 'dycustComponents', + label: '', + name: 'dynamicData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + relactiveDomValue: 'dynamicData', + chartType: 'widget-stackchart', + dictKey: 'STACK_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: 500, + }, + { + type: 'el-input-number', + label: '高度', + name: 'height', + required: false, + placeholder: '该容器在1080px大屏中的高度', + value: 250, + }, + ], + } +} diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-heatmap.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-stack.js similarity index 65% rename from report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-heatmap.js rename to report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-stack.js index e7d65dafbb4eee850cfdea642830b2ae9dd00170..a0c74d929465be04d0ca59f8f11566d96cfccc11 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-heatmap.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-stack.js @@ -1,16 +1,17 @@ /* - * @Descripttion: 热力图 + * @Descripttion: 柱状堆叠图 * @version: - * @Author: whw - * @Date: 2021-11-3 - * @LastEditors: whw - * @LastEditTime: 2021-11-3 + * @Author: qianlishi + * @Date: 2021-08-29 07:37:09 + * @LastEditors: qianlishi + * @LastEditTime: 2021-09-28 14:11:09 */ -export const widgetHeatmap = { - code: 'widget-heatmap', - type: 'chart', - label: '热力图', - icon: 'iconrelitu', +export const widgetBarStack = { + code: 'widgetBarStackChart', + type: 'barChart', + tabName: '柱状图', + label: '柱状堆叠图', + icon: 'iconbianzu23', options: { // 配置 setup: [ @@ -20,7 +21,15 @@ export const widgetHeatmap = { name: 'layerName', required: false, placeholder: '', - value: '热力图', + value: '柱状堆叠图', + }, + { + type: 'el-switch', + label: '竖展示', + name: 'verticalShow', + required: false, + placeholder: '', + value: false, }, { type: 'vue-color', @@ -30,25 +39,58 @@ export const widgetHeatmap = { placeholder: '', value: '' }, + { + type: 'el-select', + label: '堆叠样式', + name: 'stackStyle', + required: false, + placeholder: '', + selectOptions: [ + {code: 'leftRight', name: '左右堆叠'}, + {code: 'upDown', name: '上下堆叠'}, + ], + value: 'leftRight' + }, [ + { + name: '柱体设置', + list: [ + { + type: 'el-slider', + label: '最大宽度', + name: 'maxWidth', + required: false, + placeholder: '', + value: 20, + }, + { + type: 'el-slider', + label: '圆角', + name: 'radius', + require: false, + placeholder: '', + value: 5, + }, + ], + }, { name: '标题设置', list: [ { type: 'el-switch', - label: '标题', + label: '标题显示', name: 'isNoTitle', required: false, placeholder: '', - value: true + value: true, }, { type: 'el-input-text', - label: '标题', + label: '标题名', name: 'titleText', required: false, placeholder: '', - value: '' + value: '', }, { type: 'vue-color', @@ -56,7 +98,15 @@ export const widgetHeatmap = { name: 'textColor', required: false, placeholder: '', - value: '#fff' + value: '#FFD700' + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'textFontSize', + required: false, + placeholder: '', + value: 20 }, { type: 'el-select', @@ -73,12 +123,17 @@ export const widgetHeatmap = { value: 'normal' }, { - type: 'el-input-number', - label: '字体大小', - name: 'textFontSize', + type: 'el-select', + label: '字体风格', + name: 'textFontStyle', required: false, placeholder: '', - value: 16 + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, + ], + value: 'normal' }, { type: 'el-select', @@ -95,7 +150,7 @@ export const widgetHeatmap = { }, { type: 'el-input-text', - label: '副标题', + label: '副标题名', name: 'subText', required: false, placeholder: '', @@ -107,7 +162,15 @@ export const widgetHeatmap = { name: 'subTextColor', required: false, placeholder: '', - value: '' + value: 'rgba(30, 144, 255, 1)' + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'subTextFontSize', + required: false, + placeholder: '', + value: 20 }, { type: 'el-select', @@ -123,13 +186,100 @@ export const widgetHeatmap = { ], value: 'normal' }, + { + type: 'el-select', + label: '字体风格', + name: 'subTextFontStyle', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, + ], + value: 'normal' + }, + ], + }, + { + name: '图例操作', + list: [ + { + type: 'el-switch', + label: '图例显示', + name: 'isShowLegend', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '图例名称', + name: 'legendName', + required: false, + placeholder: '多值以' | '隔开', + value: '' + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'legendColor', + required: false, + placeholder: '', + value: '#fff', + }, { type: 'el-input-number', - label: '字体大小', - name: 'subTextFontSize', + label: '字体字号', + name: 'legendFontSize', required: false, placeholder: '', - value: 16 + value: 12, + }, + { + type: 'el-input-number', + label: '图例宽度', + name: 'legendWidth', + required: false, + placeholder: '', + value: 12, + }, + { + 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' }, ], }, @@ -146,76 +296,108 @@ export const widgetHeatmap = { }, { type: 'el-input-text', - label: 'X轴别名', - name: 'xName', + label: '坐标名', + name: 'nameX', required: false, placeholder: '', value: '' }, { type: 'vue-color', - label: '别名颜色', - name: 'xNameColor', + label: '坐标名颜色', + name: 'nameColorX', required: false, placeholder: '', value: '#fff' }, { type: 'el-input-number', - label: '别名字号', - name: 'xNameFontSize', + label: '坐标名字号', + name: 'nameFontSizeX', required: false, placeholder: '', value: 14 }, { - type: 'el-switch', - label: '轴反转', - name: 'reversalX', + type: 'vue-color', + label: '数值颜色', + name: 'colorX', required: false, placeholder: '', - value: false + value: '#fff', }, { - type: 'el-slider', - label: '文字角度', - name: 'textAngleX', + type: 'el-input-number', + label: '数值字号', + name: 'fontSizeX', required: false, placeholder: '', - value: 0 + value: 14, }, { type: 'el-input-number', - label: '文字间隔', + label: '数值间隔', name: 'textInterval', required: false, placeholder: '', value: '' }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngleX', + required: false, + placeholder: '', + value: 0 + }, + { + type: 'el-switch', + label: '坐标轴反转', + name: 'reversalX', + required: false, + placeholder: '', + value: false + }, { type: 'vue-color', - label: '文字颜色', - name: 'Xcolor', + label: '坐标轴颜色', + name: 'lineColorX', required: false, placeholder: '', value: '#fff', }, { type: 'el-input-number', - label: '文字字号', - name: 'fontSizeX', + label: '坐标轴宽度', + name: 'lineWidthX', required: false, placeholder: '', - value: 14, + value: 1, + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineX', + require: false, + placeholder: '', + value: false, }, { type: 'vue-color', - label: '轴颜色', - name: 'lineColorX', + label: '分割线颜色', + name: 'splitLineColorX', required: false, placeholder: '', value: '#fff', }, + { + type: 'el-input-number', + label: '分割线宽度', + name: 'splitLineWidthX', + required: false, + placeholder: '', + value: 1, + }, ], }, { @@ -231,7 +413,7 @@ export const widgetHeatmap = { }, { type: 'el-input-text', - label: 'Y轴别名', + label: '坐标名', name: 'textNameY', require: false, placeholder: '', @@ -239,60 +421,108 @@ export const widgetHeatmap = { }, { type: 'vue-color', - label: '别名颜色', - name: 'NameColorY', + label: '坐标名颜色', + name: 'nameColorY', required: false, placeholder: '', value: '#fff', }, { type: 'el-input-number', - label: '别名字号', - name: 'NameFontSizeY', + 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-switch', - label: '轴反转', - name: 'reversalY', + label: '缩放', + name: 'scale', + require: false, + placeholder: '', + value: false, + }, + { + type: 'el-input-number', + label: '均分', + name: 'splitNumberY', required: false, placeholder: '', - value: false + value: '' }, { type: 'el-slider', - label: '文字角度', + label: '数值角度', name: 'textAngleY', required: false, placeholder: '', value: 0 }, + { + type: 'el-switch', + label: '坐标轴反转', + name: 'reversalY', + required: false, + placeholder: '', + value: false + }, { type: 'vue-color', - label: '文字颜色', - name: 'colorY', + label: '坐标轴颜色', + name: 'lineColorY', required: false, placeholder: '', value: '#fff', }, { type: 'el-input-number', - label: '文字字号', - name: 'fontSizeY', + label: '坐标轴宽度', + name: 'lineWidthY', required: false, placeholder: '', - value: 14, + value: 1, + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineY', + require: false, + placeholder: '', + value: false, }, { type: 'vue-color', - label: '轴颜色', - name: 'lineColorY', + label: '分割线颜色', + name: 'splitLineColorY', required: false, placeholder: '', value: '#fff', }, + { + type: 'el-input-number', + label: '分割线宽度', + name: 'splitLineWidthY', + required: false, + placeholder: '', + value: 1, + }, ], }, { @@ -304,7 +534,7 @@ export const widgetHeatmap = { name: 'isShow', required: false, placeholder: '', - value: true + value: false }, { type: 'el-input-number', @@ -352,9 +582,10 @@ export const widgetHeatmap = { { type: 'vue-color', label: '字体颜色', - name: 'tipsLineColor', + name: 'tipsColor', required: false, placeholder: '', + value: '#00FEFF' }, ], }, @@ -392,105 +623,15 @@ export const widgetHeatmap = { }, ], }, - { - name: '图设置', - list: [ - { - type: 'el-switch', - label: '图例', - name: 'isShowLegend', - required: false, - placeholder: '', - value: false, - }, - { - type: 'el-input-number', - label: '最小值', - name: 'dataMin', - required: false, - placeholder: '', - value: 0, - }, - { - type: 'el-input-number', - label: '最大值', - name: 'dataMax', - required: false, - placeholder: '', - value: 5000, - }, - { - type: 'vue-color', - label: '数值颜色', - name: 'lengedColor', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '图例大小', - name: 'lengedFontSize', - required: false, - placeholder: '', - value: 12, - }, - { - type: 'el-input-number', - label: '图例宽度', - name: 'lengedWidth', - required: false, - placeholder: '', - value: 12, - }, - { - 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: 'lengedColorList', + name: 'customColor', required: false, - value: [{color: '#abd9e9'}, {color: '#74add1'}, {color: '#4575b4'}, {color: '#313695'}], + value: [{color: '#ff7f50'}, {color: '#87cefa'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}], }, ], }, @@ -534,107 +675,12 @@ export const widgetHeatmap = { relactiveDom: 'dataType', relactiveDomValue: 'staticData', value: [ - {"axis": "0", "yaxis": "0", "num": 3320}, - {"axis": "0", "yaxis": "1", "num": 1561}, - {"axis": "0", "yaxis": "2", "num": 3194}, - {"axis": "0", "yaxis": "3", "num": 2899}, - {"axis": "0", "yaxis": "4", "num": 2363}, - {"axis": "0", "yaxis": "5", "num": 3945}, - {"axis": "0", "yaxis": "6", "num": 2051}, - {"axis": "0", "yaxis": "7", "num": 3657}, - {"axis": "0", "yaxis": "8", "num": 3304}, - {"axis": "0", "yaxis": "9", "num": 2990}, - {"axis": "1", "yaxis": "9", "num": 2663}, - {"axis": "1", "yaxis": "0", "num": 378}, - {"axis": "1", "yaxis": "1", "num": 4076}, - {"axis": "1", "yaxis": "2", "num": 3178}, - {"axis": "1", "yaxis": "3", "num": 1501}, - {"axis": "1", "yaxis": "4", "num": 1660}, - {"axis": "1", "yaxis": "5", "num": 726}, - {"axis": "1", "yaxis": "6", "num": 4148}, - {"axis": "1", "yaxis": "7", "num": 720}, - {"axis": "1", "yaxis": "8", "num": 430}, - {"axis": "2", "yaxis": "9", "num": 2983}, - {"axis": "2", "yaxis": "0", "num": 1917}, - {"axis": "2", "yaxis": "1", "num": 1188}, - {"axis": "2", "yaxis": "2", "num": 3581}, - {"axis": "2", "yaxis": "3", "num": 1781}, - {"axis": "2", "yaxis": "4", "num": 4725}, - {"axis": "2", "yaxis": "5", "num": 4077}, - {"axis": "2", "yaxis": "6", "num": 299}, - {"axis": "2", "yaxis": "7", "num": 4828}, - {"axis": "2", "yaxis": "8", "num": 1778}, - {"axis": "3", "yaxis": "9", "num": 3171}, - {"axis": "3", "yaxis": "0", "num": 2944}, - {"axis": "3", "yaxis": "1", "num": 763}, - {"axis": "3", "yaxis": "2", "num": 1678}, - {"axis": "3", "yaxis": "3", "num": 1765}, - {"axis": "3", "yaxis": "4", "num": 2949}, - {"axis": "3", "yaxis": "5", "num": 966}, - {"axis": "3", "yaxis": "6", "num": 4622}, - {"axis": "3", "yaxis": "7", "num": 2818}, - {"axis": "3", "yaxis": "8", "num": 3913}, - {"axis": "4", "yaxis": "9", "num": 4382}, - {"axis": "4", "yaxis": "0", "num": 1670}, - {"axis": "4", "yaxis": "1", "num": 4532}, - {"axis": "4", "yaxis": "2", "num": 2116}, - {"axis": "4", "yaxis": "3", "num": 2383}, - {"axis": "4", "yaxis": "4", "num": 510}, - {"axis": "4", "yaxis": "5", "num": 33}, - {"axis": "4", "yaxis": "6", "num": 4974}, - {"axis": "4", "yaxis": "7", "num": 3627}, - {"axis": "4", "yaxis": "8", "num": 2737}, - {"axis": "5", "yaxis": "9", "num": 656}, - {"axis": "5", "yaxis": "0", "num": 3689}, - {"axis": "5", "yaxis": "1", "num": 713}, - {"axis": "5", "yaxis": "2", "num": 3551}, - {"axis": "5", "yaxis": "3", "num": 3159}, - {"axis": "5", "yaxis": "4", "num": 4150}, - {"axis": "5", "yaxis": "5", "num": 1416}, - {"axis": "5", "yaxis": "6", "num": 3021}, - {"axis": "5", "yaxis": "7", "num": 1778}, - {"axis": "5", "yaxis": "8", "num": 863}, - {"axis": "6", "yaxis": "9", "num": 772}, - {"axis": "6", "yaxis": "0", "num": 1675}, - {"axis": "6", "yaxis": "1", "num": 1323}, - {"axis": "6", "yaxis": "2", "num": 2023}, - {"axis": "6", "yaxis": "3", "num": 43}, - {"axis": "6", "yaxis": "4", "num": 4964}, - {"axis": "6", "yaxis": "5", "num": 4781}, - {"axis": "6", "yaxis": "6", "num": 2608}, - {"axis": "6", "yaxis": "7", "num": 2278}, - {"axis": "6", "yaxis": "8", "num": 3285}, - {"axis": "7", "yaxis": "9", "num": 1977}, - {"axis": "7", "yaxis": "0", "num": 882}, - {"axis": "7", "yaxis": "1", "num": 2434}, - {"axis": "7", "yaxis": "2", "num": 4694}, - {"axis": "7", "yaxis": "3", "num": 3022}, - {"axis": "7", "yaxis": "4", "num": 1798}, - {"axis": "7", "yaxis": "5", "num": 2503}, - {"axis": "7", "yaxis": "6", "num": 693}, - {"axis": "7", "yaxis": "7", "num": 275}, - {"axis": "7", "yaxis": "8", "num": 3774}, - {"axis": "8", "yaxis": "9", "num": 1386}, - {"axis": "8", "yaxis": "0", "num": 1212}, - {"axis": "8", "yaxis": "1", "num": 1982}, - {"axis": "8", "yaxis": "2", "num": 1509}, - {"axis": "8", "yaxis": "3", "num": 94}, - {"axis": "8", "yaxis": "4", "num": 2082}, - {"axis": "8", "yaxis": "5", "num": 3930}, - {"axis": "8", "yaxis": "6", "num": 4528}, - {"axis": "8", "yaxis": "7", "num": 1861}, - {"axis": "8", "yaxis": "8", "num": 4582}, - {"axis": "9", "yaxis": "9", "num": 3038}, - {"axis": "9", "yaxis": "0", "num": 4038}, - {"axis": "9", "yaxis": "1", "num": 357}, - {"axis": "9", "yaxis": "2", "num": 306}, - {"axis": "9", "yaxis": "3", "num": 479}, - {"axis": "9", "yaxis": "4", "num": 823}, - {"axis": "9", "yaxis": "5", "num": 3442}, - {"axis": "9", "yaxis": "6", "num": 904}, - {"axis": "9", "yaxis": "7", "num": 399}, - {"axis": "9", "yaxis": "8", "num": 4869}, - ] + {"axis": "2021-07-25", "name": "A", "data": "12"}, + {"axis": "2021-07-25", "name": "B", "data": "20"}, + {"axis": "2021-07-26", "name": "B", "data": "5"}, + {"axis": "2021-07-27", "name": "A", "data": "15"}, + {"axis": "2021-07-27", "name": "B", "data": "30"}, + ], }, { type: 'dycustComponents', @@ -643,9 +689,9 @@ export const widgetHeatmap = { required: false, placeholder: '', relactiveDom: 'dataType', - chartType: 'widget-coord', relactiveDomValue: 'dynamicData', - dictKey: 'COORD_PROPERTIES', + chartType: 'widget-stackchart', + dictKey: 'STACK_PROPERTIES', value: '', }, ], @@ -673,7 +719,7 @@ export const widgetHeatmap = { name: 'width', required: false, placeholder: '该容器在1920px大屏中的宽度', - value: 700, + value: 500, }, { type: 'el-input-number', @@ -681,7 +727,7 @@ export const widgetHeatmap = { name: 'height', required: false, placeholder: '该容器在1080px大屏中的高度', - value: 300, + value: 250, }, ], } diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barchart.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-barchart.js similarity index 85% rename from report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barchart.js rename to report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-barchart.js index 8b8060a9b3c720ce448ff0bd2426384104103ba7..673d26f6f0cdc07465beefef94818136ecc48128 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barchart.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-barchart.js @@ -8,7 +8,8 @@ */ export const widgetBarchart = { code: 'widget-barchart', - type: 'chart', + type: 'barChart', + tabName: '柱状图', label: '柱状图', icon: 'iconzhuzhuangtu', options: { @@ -73,7 +74,7 @@ export const widgetBarchart = { list: [ { type: 'el-switch', - label: '标题', + label: '标题显示', name: 'isNoTitle', required: false, placeholder: '', @@ -81,7 +82,7 @@ export const widgetBarchart = { }, { type: 'el-input-text', - label: '标题', + label: '标题名', name: 'titleText', required: false, placeholder: '', @@ -95,6 +96,14 @@ export const widgetBarchart = { placeholder: '', value: '#FFD700' }, + { + type: 'el-input-number', + label: '字体字号', + name: 'textFontSize', + required: false, + placeholder: '', + value: 20 + }, { type: 'el-select', label: '字体粗细', @@ -110,12 +119,17 @@ export const widgetBarchart = { value: 'normal' }, { - type: 'el-input-number', - label: '字体字号', - name: 'textFontSize', + type: 'el-select', + label: '字体风格', + name: 'textFontStyle', required: false, placeholder: '', - value: 20 + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, + ], + value: 'normal' }, { type: 'el-select', @@ -132,7 +146,7 @@ export const widgetBarchart = { }, { type: 'el-input-text', - label: '副标题', + label: '副标题名', name: 'subText', required: false, placeholder: '', @@ -146,6 +160,14 @@ export const widgetBarchart = { placeholder: '', value: 'rgba(30, 144, 255, 1)' }, + { + type: 'el-input-number', + label: '字体字号', + name: 'subTextFontSize', + required: false, + placeholder: '', + value: 20 + }, { type: 'el-select', label: '字体粗细', @@ -161,12 +183,17 @@ export const widgetBarchart = { value: 'normal' }, { - type: 'el-input-number', - label: '字体字号', - name: 'subTextFontSize', + type: 'el-select', + label: '字体风格', + name: 'subTextFontStyle', required: false, placeholder: '', - value: 20 + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, + ], + value: 'normal' }, ], }, @@ -184,7 +211,7 @@ export const widgetBarchart = { { type: 'el-input-text', label: '坐标名', - name: 'xName', + name: 'nameX', required: false, placeholder: '', value: '' @@ -199,7 +226,7 @@ export const widgetBarchart = { }, { type: 'el-input-number', - label: '坐标字号', + label: '坐标名字号', name: 'nameFontSizeX', required: false, placeholder: '', @@ -208,7 +235,7 @@ export const widgetBarchart = { { type: 'vue-color', label: '数值颜色', - name: 'Xcolor', + name: 'colorX', required: false, placeholder: '', value: '#fff', @@ -221,14 +248,6 @@ export const widgetBarchart = { placeholder: '', value: 14, }, - { - type: 'el-slider', - label: '数值角度', - name: 'textAngle', - required: false, - placeholder: '', - value: 0 - }, { type: 'el-input-number', label: '数值间隔', @@ -237,9 +256,17 @@ export const widgetBarchart = { placeholder: '', value: '' }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngleX', + required: false, + placeholder: '', + value: 0 + }, { type: 'el-switch', - label: '轴反转', + label: '坐标轴反转', name: 'reversalX', required: false, placeholder: '', @@ -247,12 +274,20 @@ export const widgetBarchart = { }, { type: 'vue-color', - label: '轴颜色', + label: '坐标轴颜色', name: 'lineColorX', required: false, placeholder: '', value: '#fff', }, + { + type: 'el-input-number', + label: '坐标轴宽度', + name: 'lineWidthX', + required: false, + placeholder: '', + value: 1, + }, { type: 'el-switch', label: '分割线显示', @@ -268,8 +303,15 @@ export const widgetBarchart = { required: false, placeholder: '', value: '#fff', - - } + }, + { + type: 'el-input-number', + label: '分割线宽度', + name: 'splitLineWidthX', + required: false, + placeholder: '', + value: 1, + }, ], }, { @@ -301,7 +343,7 @@ export const widgetBarchart = { }, { type: 'el-input-number', - label: '坐标字号', + label: '坐标名字号', name: 'nameFontSizeY', required: false, placeholder: '', @@ -323,14 +365,6 @@ export const widgetBarchart = { placeholder: '', value: 14, }, - { - type: 'el-slider', - label: '数值角度', - name: 'ytextAngle', - required: false, - placeholder: '', - value: 0 - }, { type: 'el-switch', label: '缩放', @@ -342,14 +376,22 @@ export const widgetBarchart = { { type: 'el-input-number', label: '均分', - name: 'splitNumber', + name: 'splitNumberY', required: false, placeholder: '', value: '' }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngleY', + required: false, + placeholder: '', + value: 0 + }, { type: 'el-switch', - label: '轴反转', + label: '坐标轴反转', name: 'reversalY', required: false, placeholder: '', @@ -357,27 +399,44 @@ export const widgetBarchart = { }, { type: 'vue-color', - label: '轴颜色', + label: '坐标轴颜色', name: 'lineColorY', required: false, placeholder: '', value: '#fff', - }, { + }, + { + type: 'el-input-number', + label: '坐标轴宽度', + name: 'lineWidthY', + required: false, + placeholder: '', + value: 1, + }, + { type: 'el-switch', label: '分割线显示', name: 'isShowSplitLineY', require: false, placeholder: '', value: false, - }, { + }, + { type: 'vue-color', label: '分割线颜色', name: 'splitLineColorY', required: false, placeholder: '', value: '#fff', - - } + }, + { + type: 'el-input-number', + label: '分割线宽度', + name: 'splitLineWidthY', + required: false, + placeholder: '', + value: 1, + }, ], }, { @@ -445,9 +504,10 @@ export const widgetBarchart = { { type: 'vue-color', label: '字体颜色', - name: 'lineColor', + name: 'tipsColor', required: false, placeholder: '', + value: '#00FEFF' }, ], }, diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-gradient-barchart.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-gradient-barchart.js similarity index 83% rename from report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-gradient-barchart.js rename to report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-gradient-barchart.js index 1cc09b418e0173a0718943571a71f1ec6f78f86a..17646d3af02d54fcb28f27fc8e47fe57680b46c7 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-gradient-barchart.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-gradient-barchart.js @@ -8,7 +8,8 @@ */ export const widgetGradientBarchart = { code: 'widget-gradient-color-barchart', - type: 'chart', + type: 'barChart', + tabName: '柱状图', label: '柱状图-渐变色', icon: 'iconzhuzhuangtu', options: { @@ -65,7 +66,7 @@ export const widgetGradientBarchart = { list: [ { type: 'el-switch', - label: '标题', + label: '标题显示', name: 'isNoTitle', required: false, placeholder: '', @@ -73,7 +74,7 @@ export const widgetGradientBarchart = { }, { type: 'el-input-text', - label: '标题', + label: '标题名', name: 'titleText', required: false, placeholder: '', @@ -85,7 +86,15 @@ export const widgetGradientBarchart = { name: 'textColor', required: false, placeholder: '', - value: '#fff' + value: '#FFD700' + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'textFontSize', + required: false, + placeholder: '', + value: 20 }, { type: 'el-select', @@ -94,20 +103,25 @@ export const widgetGradientBarchart = { required: false, placeholder: '', selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} + { code: 'normal', name: '正常' }, + { code: 'bold', name: '粗体' }, + { code: 'bolder', name: '特粗体' }, + { code: 'lighter', name: '细体' } ], value: 'normal' }, { - type: 'el-input-number', - label: '字体大小', - name: 'textFontSize', + type: 'el-select', + label: '字体风格', + name: 'textFontStyle', required: false, placeholder: '', - value: 22 + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'italic', name: 'italic斜体' }, + { code: 'oblique', name: 'oblique斜体' }, + ], + value: 'normal' }, { type: 'el-select', @@ -116,15 +130,15 @@ export const widgetGradientBarchart = { required: false, placeholder: '', selectOptions: [ - {code: 'center', name: '居中'}, - {code: 'left', name: '左对齐'}, - {code: 'right', name: '右对齐'}, + { code: 'center', name: '居中' }, + { code: 'left', name: '左对齐' }, + { code: 'right', name: '右对齐' }, ], value: 'center' }, { type: 'el-input-text', - label: '副标题', + label: '副标题名', name: 'subText', required: false, placeholder: '', @@ -136,29 +150,42 @@ export const widgetGradientBarchart = { name: 'subTextColor', required: false, placeholder: '', - value: '#90979c' + value: 'rgba(30, 144, 255, 1)' }, { - type: 'el-input-text', + type: 'el-input-number', + label: '字体字号', + name: 'subTextFontSize', + required: false, + placeholder: '', + value: 20 + }, + { + type: 'el-select', label: '字体粗细', name: 'subTextFontWeight', required: false, placeholder: '', selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} + { code: 'normal', name: '正常' }, + { code: 'bold', name: '粗体' }, + { code: 'bolder', name: '特粗体' }, + { code: 'lighter', name: '细体' } ], value: 'normal' }, { - type: 'el-input-number', - label: '字体大小', - name: 'subTextFontSize', + type: 'el-select', + label: '字体风格', + name: 'subTextFontStyle', required: false, placeholder: '', - value: 20 + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'italic', name: 'italic斜体' }, + { code: 'oblique', name: 'oblique斜体' }, + ], + value: 'normal' }, ], }, @@ -176,7 +203,7 @@ export const widgetGradientBarchart = { { type: 'el-input-text', label: '坐标名', - name: 'xName', + name: 'nameX', required: false, placeholder: '', value: '' @@ -187,20 +214,20 @@ export const widgetGradientBarchart = { name: 'nameColorX', required: false, placeholder: '', - value: '#fff', + value: '#fff' }, { type: 'el-input-number', - label: '坐标字号', + label: '坐标名字号', name: 'nameFontSizeX', required: false, placeholder: '', - value: 14, + value: 14 }, { type: 'vue-color', label: '数值颜色', - name: 'Xcolor', + name: 'colorX', required: false, placeholder: '', value: '#fff', @@ -213,14 +240,6 @@ export const widgetGradientBarchart = { placeholder: '', value: 14, }, - { - type: 'el-slider', - label: '数值角度', - name: 'textAngle', - required: false, - placeholder: '', - value: 0 - }, { type: 'el-input-number', label: '数值间隔', @@ -229,9 +248,17 @@ export const widgetGradientBarchart = { placeholder: '', value: '' }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngleX', + required: false, + placeholder: '', + value: 0 + }, { type: 'el-switch', - label: '轴反转', + label: '坐标轴反转', name: 'reversalX', required: false, placeholder: '', @@ -239,12 +266,20 @@ export const widgetGradientBarchart = { }, { type: 'vue-color', - label: '轴颜色', + label: '坐标轴颜色', name: 'lineColorX', required: false, placeholder: '', value: '#fff', }, + { + type: 'el-input-number', + label: '坐标轴宽度', + name: 'lineWidthX', + required: false, + placeholder: '', + value: 1, + }, { type: 'el-switch', label: '分割线显示', @@ -260,7 +295,15 @@ export const widgetGradientBarchart = { required: false, placeholder: '', value: '#fff', - } + }, + { + type: 'el-input-number', + label: '分割线宽度', + name: 'splitLineWidthX', + required: false, + placeholder: '', + value: 1, + }, ], }, { @@ -281,7 +324,8 @@ export const widgetGradientBarchart = { require: false, placeholder: '', value: '' - }, { + }, + { type: 'vue-color', label: '坐标名颜色', name: 'nameColorY', @@ -291,8 +335,8 @@ export const widgetGradientBarchart = { }, { type: 'el-input-number', - label: '坐标字号', - name: 'namefontSizeY', + label: '坐标名字号', + name: 'nameFontSizeY', required: false, placeholder: '', value: 14, @@ -313,14 +357,6 @@ export const widgetGradientBarchart = { placeholder: '', value: 14, }, - { - type: 'el-slider', - label: '数值角度', - name: 'ytextAngle', - required: false, - placeholder: '', - value: 0 - }, { type: 'el-switch', label: '缩放', @@ -332,11 +368,19 @@ export const widgetGradientBarchart = { { type: 'el-input-number', label: '均分', - name: 'splitNumber', + name: 'splitNumberY', required: false, placeholder: '', value: '' }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngleY', + required: false, + placeholder: '', + value: 0 + }, { type: 'el-switch', label: '轴反转', @@ -368,7 +412,7 @@ export const widgetGradientBarchart = { required: false, placeholder: '', value: '#fff', - } + }, ], }, { @@ -392,7 +436,7 @@ export const widgetGradientBarchart = { }, { type: 'el-input-number', - label: '字体大小', + label: '字体字号', name: 'fontSize', required: false, placeholder: '', @@ -427,7 +471,7 @@ export const widgetGradientBarchart = { list: [ { type: 'el-input-number', - label: '字体大小', + label: '字体字号', name: 'tipsFontSize', required: false, placeholder: '', @@ -436,9 +480,10 @@ export const widgetGradientBarchart = { { type: 'vue-color', label: '字体颜色', - name: 'lineColor', + name: 'tipsColor', required: false, - placeholder: '#ff7f50', + placeholder: '', + value: '#00FEFF' }, ], }, diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-bar-line-stack.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-bar-line-stack.js new file mode 100644 index 0000000000000000000000000000000000000000..bea0082e2e373c2ed1d990a0c41eeb170f2cb928 --- /dev/null +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-bar-line-stack.js @@ -0,0 +1,947 @@ +/* + * @Descripttion: 柱线堆叠图 + * @Author: foming + */ +export const widgetBarLineStack = { + code: 'widgetBarLineStackChart', + type: 'barlineCharts', + tabName: '柱线图', + 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: '' + }, + [ + { + name: '柱体设置', + list: [ + { + type: 'el-slider', + label: '宽度', + name: 'maxWidth', + required: false, + placeholder: '', + value: 20, + }, + { + type: 'el-slider', + label: '圆角', + name: 'radius', + require: false, + placeholder: '', + value: 5, + }, + ], + }, + { + name: '折线设置', + list: [ + { + type: 'el-switch', + label: '标记点', + name: 'markPoint', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-slider', + label: '点大小', + name: 'pointSize', + required: false, + placeholder: '', + value: 3, + }, + { + type: 'el-select', + label: '点样式', + name: 'symbol', + required: false, + placeholder: '', + selectOptions: [ + {code: 'circle', name: '实心点'}, + {code: 'emptyCircle', name: '空心点'}, + ], + value: 'circle' + }, + { + type: 'el-switch', + label: '平滑曲线', + name: 'smoothCurve', + required: false, + placeholder: '', + value: false, + }, + { + type: 'el-slider', + label: '线条宽度', + name: 'lineWidth', + required: false, + placeholder: '', + value: 3, + }, + ], + }, + { + 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-input-number', + label: '字体字号', + name: 'textFontSize', + required: false, + placeholder: '', + value: 20 + }, + { + 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-select', + label: '字体风格', + name: 'textFontStyle', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, + ], + value: 'normal' + }, + { + 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-number', + label: '字体字号', + name: 'subTextFontSize', + required: false, + placeholder: '', + value: 20 + }, + { + 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-select', + label: '字体风格', + name: 'subTextFontStyle', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, + ], + value: 'normal' + }, + ], + }, + { + name: '图例操作', + list: [ + { + type: 'el-switch', + label: '图例显示', + name: 'isShowLegend', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '图例名称', + name: 'legendName', + required: false, + placeholder: '多值以' | '隔开', + value: '' + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'legendColor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'legendFontSize', + required: false, + placeholder: '', + value: 12, + }, + { + type: 'el-input-number', + label: '图例宽度', + name: 'legendWidth', + required: false, + placeholder: '', + value: 12, + }, + { + 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: 'X轴设置', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'hideX', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '坐标名', + name: 'nameX', + 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: 'colorX', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '数值字号', + name: 'fontSizeX', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-input-number', + label: '数值间隔', + name: 'textInterval', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngleX', + required: false, + placeholder: '', + value: 0 + }, + { + type: 'el-switch', + label: '坐标轴反转', + name: 'reversalX', + required: false, + placeholder: '', + value: false + }, + { + type: 'vue-color', + label: '坐标轴颜色', + name: 'lineColorX', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '坐标轴宽度', + name: 'lineWidthX', + required: false, + placeholder: '', + value: 1, + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineX', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorX', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '分割线宽度', + name: 'splitLineWidthX', + required: false, + placeholder: '', + value: 1, + }, + ], + }, + { + 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: 'vue-color', + label: '数值颜色', + name: 'colorYLeft', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '数值字号', + name: 'fontSizeYLeft', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-input-number', + label: '均分', + name: 'splitNumberLeft', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngleYLeft', + required: false, + placeholder: '', + value: 0 + }, + { + type: 'el-switch', + label: '刻度线显示', + name: 'tickLineYLeft', + require: false, + placeholder: '', + value: true, + }, + { + type: 'el-switch', + label: '坐标轴显示', + name: 'lineYLeft', + require: false, + placeholder: '', + value: true, + }, + { + type: 'vue-color', + label: '坐标轴颜色', + name: 'lineColorYLeft', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '坐标轴宽度', + name: 'lineWidthYLeft', + required: false, + placeholder: '', + value: 1, + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineYLeft', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorYLeft', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '分割线宽度', + name: 'splitLineFontWidthYLeft', + required: false, + placeholder: '', + value: 1, + }, + ], + }, + { + name: '右Y轴设置', + list: [ + { + 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: 'vue-color', + label: '数值颜色', + name: 'colorYRight', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '数值字号', + name: 'fontSizeYRight', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-input-number', + label: '均分', + name: 'splitNumberRight', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngleYRight', + required: false, + placeholder: '', + value: 0 + }, + { + type: 'el-switch', + label: '刻度线显示', + name: 'tickLineYRight', + require: false, + placeholder: '', + value: true, + }, + { + type: 'el-switch', + label: '坐标轴显示', + name: 'lineYRight', + require: false, + placeholder: '', + value: true, + }, + { + type: 'vue-color', + label: '坐标轴颜色', + name: 'lineColorYRight', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '坐标轴宽度', + name: 'lineWidthYRight', + required: false, + placeholder: '', + value: 1, + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineYRight', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorYRight', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '分割线宽度', + name: 'splitLineFontWidthYRight', + required: false, + placeholder: '', + value: 1, + }, + ], + }, + { + name: '柱体数值设定', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShowBar', + required: false, + placeholder: '', + value: false + }, + { + type: 'el-input-number', + label: '距离', + name: 'distanceBar', + required: false, + placeholder: '', + value: 10 + }, + { + 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-switch', + label: '显示', + name: 'isShowLine', + required: false, + placeholder: '', + value: false + }, + { + type: 'el-input-number', + label: '距离', + name: 'distanceLine', + required: false, + placeholder: '', + value: 10 + }, + { + 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-input-number', + label: '字体字号', + name: 'tipsFontSize', + required: false, + placeholder: '', + value: 16 + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'tipsColor', + required: false, + placeholder: '', + value: '#00FEFF' + }, + ], + }, + { + 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: '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": "2021-07", "name": "A", "bar": "12", "line": "20"}, + {"axis": "2021-07", "name": "B", "bar": "20", "line": "12"}, + {"axis": "2021-08", "name": "A", "bar": "0", "line": "8"}, + {"axis": "2021-08", "name": "B", "bar": "5", "line": "3"}, + {"axis": "2021-09", "name": "A", "bar": "15", "line": "9"}, + {"axis": "2021-09", "name": "B", "bar": "30", "line": "19"}, + {"axis": "2021-10", "name": "A", "bar": "10", "line": "27"}, + {"axis": "2021-10", "name": "B", "bar": "24", "line": "6"}, + {"axis": "2021-11", "name": "A", "bar": "23", "line": "29"}, + {"axis": "2021-11", "name": "B", "bar": "8", "line": "9"}, + ], + }, + { + type: 'dycustComponents', + label: '', + name: 'dynamicData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + relactiveDomValue: 'dynamicData', + chartType: 'widget-stackchart', + dictKey: 'STACK_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: 500, + }, + { + type: 'el-input-number', + label: '高度', + name: 'height', + required: false, + placeholder: '该容器在1080px大屏中的高度', + value: 250, + }, + ], + } +} diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barlinechart.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-barlinechart.js similarity index 73% rename from report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barlinechart.js rename to report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-barlinechart.js index 367402012f0a94ed267f3739366515f2d7b1b119..eb43fa257d923058bc46fd05a06766b2ca9f46b6 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barlinechart.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-barlinechart.js @@ -3,12 +3,13 @@ * @version: * @Author: qianlishi * @Date: 2021-08-29 07:26:48 - * @LastEditors: qianlishi - * @LastEditTime: 2021-09-28 14:11:57 + * @LastEditors: qianlishi qianlishi@anji-plus.com + * @LastEditTime: 2022-11-07 15:39:29 */ export const widgetBarlinechart = { code: 'widget-barlinechart', - type: 'chart', + type: 'barlineCharts', + tabName: '柱线图', label: '柱线图', icon: 'iconzhuxiantu', options: { @@ -31,6 +32,35 @@ export const widgetBarlinechart = { 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: [ @@ -50,6 +80,18 @@ export const widgetBarlinechart = { placeholder: '', value: 5, }, + { + type: 'el-select', + label: '点样式', + name: 'symbol', + required: false, + placeholder: '', + selectOptions: [ + {code: 'circle', name: '实心点'}, + {code: 'emptyCircle', name: '空心点'}, + ], + value: 'circle' + }, { type: 'el-switch', label: '平滑曲线', @@ -84,53 +126,24 @@ export const widgetBarlinechart = { }, ], }, - { - 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: '标题', + label: '标题显示', name: 'isNoTitle', required: false, placeholder: '', - value: true + value: true, }, { type: 'el-input-text', - label: '标题', + label: '标题名', name: 'titleText', required: false, placeholder: '', - value: '' + value: '', }, { type: 'vue-color', @@ -138,7 +151,15 @@ export const widgetBarlinechart = { name: 'textColor', required: false, placeholder: '', - value: '#fff' + value: '#FFD700' + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'textFontSize', + required: false, + placeholder: '', + value: 20 }, { type: 'el-select', @@ -155,12 +176,17 @@ export const widgetBarlinechart = { value: 'normal' }, { - type: 'el-input-number', - label: '字体大小', - name: 'textFontSize', + type: 'el-select', + label: '字体风格', + name: 'textFontStyle', required: false, placeholder: '', - value: 20 + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, + ], + value: 'normal' }, { type: 'el-select', @@ -173,11 +199,11 @@ export const widgetBarlinechart = { {code: 'left', name: '左对齐'}, {code: 'right', name: '右对齐'}, ], - value: 'left' + value: 'center' }, { type: 'el-input-text', - label: '副标题', + label: '副标题名', name: 'subText', required: false, placeholder: '', @@ -189,7 +215,15 @@ export const widgetBarlinechart = { name: 'subTextColor', required: false, placeholder: '', - value: '#fff' + value: 'rgba(30, 144, 255, 1)' + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'subTextFontSize', + required: false, + placeholder: '', + value: 20 }, { type: 'el-select', @@ -206,12 +240,17 @@ export const widgetBarlinechart = { value: 'normal' }, { - type: 'el-input-number', - label: '字体大小', - name: 'subTextFontSize', + type: 'el-select', + label: '字体风格', + name: 'subTextFontStyle', required: false, placeholder: '', - value: 20 + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, + ], + value: 'normal' }, ], }, @@ -237,7 +276,7 @@ export const widgetBarlinechart = { { type: 'vue-color', label: '字体颜色', - name: 'lengedColor', + name: 'legendColor', required: false, placeholder: '', value: '#fff', @@ -245,7 +284,7 @@ export const widgetBarlinechart = { { type: 'el-input-number', label: '字体字号', - name: 'lengedFontSize', + name: 'legendFontSize', required: false, placeholder: '', value: 12, @@ -253,7 +292,7 @@ export const widgetBarlinechart = { { type: 'el-input-number', label: '图例宽度', - name: 'lengedWidth', + name: 'legendWidth', required: false, placeholder: '', value: 12, @@ -311,7 +350,7 @@ export const widgetBarlinechart = { { type: 'el-input-text', label: '坐标名', - name: 'xName', + name: 'nameX', required: false, placeholder: '', value: '' @@ -322,20 +361,20 @@ export const widgetBarlinechart = { name: 'nameColorX', required: false, placeholder: '', - value: '#fff', + value: '#fff' }, { type: 'el-input-number', - label: '坐标字号', + label: '坐标名字号', name: 'nameFontSizeX', required: false, placeholder: '', - value: 14, + value: 14 }, { type: 'vue-color', label: '数值颜色', - name: 'Xcolor', + name: 'colorX', required: false, placeholder: '', value: '#fff', @@ -348,14 +387,6 @@ export const widgetBarlinechart = { placeholder: '', value: 14, }, - { - type: 'el-slider', - label: '数值角度', - name: 'textAngle', - required: false, - placeholder: '', - value: 0 - }, { type: 'el-input-number', label: '数值间隔', @@ -364,9 +395,17 @@ export const widgetBarlinechart = { placeholder: '', value: '' }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngleX', + required: false, + placeholder: '', + value: 0 + }, { type: 'el-switch', - label: '轴反转', + label: '坐标轴反转', name: 'reversalX', required: false, placeholder: '', @@ -374,12 +413,20 @@ export const widgetBarlinechart = { }, { type: 'vue-color', - label: '轴颜色', + label: '坐标轴颜色', name: 'lineColorX', required: false, placeholder: '', value: '#fff', }, + { + type: 'el-input-number', + label: '坐标轴宽度', + name: 'lineWidthX', + required: false, + placeholder: '', + value: 1, + }, { type: 'el-switch', label: '分割线显示', @@ -395,15 +442,23 @@ export const widgetBarlinechart = { required: false, placeholder: '', value: '#fff', - } + }, + { + type: 'el-input-number', + label: '分割线宽度', + name: 'splitLineWidthX', + required: false, + placeholder: '', + value: 1, + }, ], }, { - name: 'Y轴设置', + name: '左Y轴设置', list: [ { type: 'el-switch', - label: '左显示', + label: '显示', name: 'isShowYLeft', require: false, placeholder: '', @@ -411,7 +466,7 @@ export const widgetBarlinechart = { }, { type: 'el-input-text', - label: '左坐标名', + label: '坐标名', name: 'textNameYLeft', require: false, placeholder: '', @@ -419,7 +474,7 @@ export const widgetBarlinechart = { }, { type: 'vue-color', - label: '左坐标名颜色', + label: '坐标名颜色', name: 'nameColorYLeft', required: false, placeholder: '', @@ -427,23 +482,108 @@ export const widgetBarlinechart = { }, { type: 'el-input-number', - label: '左坐标字号', - name: 'namefontSizeYLeft', + label: '坐标名字号', + name: 'nameFontSizeYLeft', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'vue-color', + label: '数值颜色', + name: 'colorYLeft', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '数值字号', + name: 'fontSizeYLeft', required: false, placeholder: '', value: 14, }, { type: 'el-input-number', - label: '左均分', + label: '均分', name: 'splitNumberLeft', required: false, placeholder: '', value: '' }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngleYLeft', + required: false, + placeholder: '', + value: 0 + }, { type: 'el-switch', - label: '右显示', + label: '刻度线显示', + name: 'tickLineYLeft', + require: false, + placeholder: '', + value: true, + }, + { + type: 'el-switch', + label: '坐标轴显示', + name: 'lineYLeft', + require: false, + placeholder: '', + value: true, + }, + { + type: 'vue-color', + label: '坐标轴颜色', + name: 'lineColorYLeft', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '坐标轴宽度', + name: 'lineWidthYLeft', + required: false, + placeholder: '', + value: 1, + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineYLeft', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorYLeft', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '分割线宽度', + name: 'splitLineFontWidthYLeft', + required: false, + placeholder: '', + value: 1, + }, + ], + }, + { + name: '右Y轴设置', + list: [ + { + type: 'el-switch', + label: '显示', name: 'isShowYRight', require: false, placeholder: '', @@ -451,7 +591,7 @@ export const widgetBarlinechart = { }, { type: 'el-input-text', - label: '右坐标名', + label: '坐标名', name: 'textNameYRight', require: false, placeholder: '', @@ -459,7 +599,7 @@ export const widgetBarlinechart = { }, { type: 'vue-color', - label: '右坐标名颜色', + label: '坐标名颜色', name: 'nameColorYRight', required: false, placeholder: '', @@ -467,52 +607,99 @@ export const widgetBarlinechart = { }, { type: 'el-input-number', - label: '右坐标字号', - name: 'namefontSizeYRight', + label: '坐标名字号', + name: 'nameFontSizeYRight', required: false, placeholder: '', value: 14, + }, { + type: 'vue-color', + label: '数值颜色', + name: 'colorYRight', + required: false, + placeholder: '', + value: '#fff', }, { type: 'el-input-number', - label: '右均分', + label: '数值字号', + name: 'fontSizeYRight', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-input-number', + label: '均分', name: 'splitNumberRight', required: false, placeholder: '', value: '' }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngleYRight', + required: false, + placeholder: '', + value: 0 + }, + { + type: 'el-switch', + label: '刻度线显示', + name: 'tickLineYRight', + require: false, + placeholder: '', + value: true, + }, + { + type: 'el-switch', + label: '坐标轴显示', + name: 'lineYRight', + require: false, + placeholder: '', + value: true, + }, { type: 'vue-color', - label: '数值颜色', - name: 'colorY', + label: '坐标轴颜色', + name: 'lineColorYRight', required: false, placeholder: '', value: '#fff', }, { type: 'el-input-number', - label: '数值字号', - name: 'fontSizeY', + label: '坐标轴宽度', + name: 'lineWidthYRight', required: false, placeholder: '', - value: 14, + value: 1, }, { type: 'el-switch', - label: '轴反转', - name: 'reversalY', - required: false, + label: '分割线显示', + name: 'isShowSplitLineYRight', + require: false, placeholder: '', - value: false + value: false, }, { type: 'vue-color', - label: '轴颜色', - name: 'lineColorY', + label: '分割线颜色', + name: 'splitLineColorYRight', required: false, placeholder: '', value: '#fff', }, + { + type: 'el-input-number', + label: '分割线宽度', + name: 'splitLineFontWidthYRight', + required: false, + placeholder: '', + value: 1, + }, ], }, { @@ -622,19 +809,19 @@ export const widgetBarlinechart = { list: [ { type: 'el-input-number', - label: '字体大小', - name: 'tipFontSize', + label: '字体字号', + name: 'tipsFontSize', required: false, placeholder: '', - value: 12 + value: 16 }, { type: 'vue-color', label: '字体颜色', - name: 'lineColor', + name: 'tipsColor', required: false, placeholder: '', - value: '#e68b55' + value: '#00FEFF' }, ], }, @@ -680,7 +867,7 @@ export const widgetBarlinechart = { label: '', name: 'customColor', required: false, - value: [{color: '#00F4FFFF'}, {color: '#e68b55'}], + value: [{color: '#ff7f50'}, {color: '#87cefa'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}], }, ], }, diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-more-bar-line.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-more-bar-line.js similarity index 71% rename from report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-more-bar-line.js rename to report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-more-bar-line.js index 5f533812ae81f1a90f6e82845d64ce95ee751bd3..e291ece624652569b9bd775293b22279b54fc805 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-more-bar-line.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-more-bar-line.js @@ -3,12 +3,13 @@ * @version: * @Author: foming * @Date: - * @LastEditors: - * @LastEditTime: + * @LastEditors: qianlishi qianlishi@anji-plus.com + * @LastEditTime: 2022-11-07 15:39:52 */ export const widgetMoreBarLine = { code: 'widgetMoreBarLineChart', - type: 'chart', + type: 'barlineCharts', + tabName: '柱线图', label: '多柱线图', icon: 'iconzhuxiantu', options: { @@ -31,6 +32,27 @@ export const widgetMoreBarLine = { 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: [ @@ -50,6 +72,18 @@ export const widgetMoreBarLine = { placeholder: '', value: 3, }, + { + type: 'el-select', + label: '点样式', + name: 'symbol', + required: false, + placeholder: '', + selectOptions: [ + {code: 'circle', name: '实心点'}, + {code: 'emptyCircle', name: '空心点'}, + ], + value: 'circle' + }, { type: 'el-switch', label: '平滑曲线', @@ -84,45 +118,24 @@ export const widgetMoreBarLine = { }, ], }, - { - 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: '标题', + label: '标题显示', name: 'isNoTitle', required: false, placeholder: '', - value: true + value: true, }, { type: 'el-input-text', - label: '标题', + label: '标题名', name: 'titleText', required: false, placeholder: '', - value: '' + value: '', }, { type: 'vue-color', @@ -130,7 +143,15 @@ export const widgetMoreBarLine = { name: 'textColor', required: false, placeholder: '', - value: '#fff' + value: '#FFD700' + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'textFontSize', + required: false, + placeholder: '', + value: 20 }, { type: 'el-select', @@ -147,12 +168,17 @@ export const widgetMoreBarLine = { value: 'normal' }, { - type: 'el-input-number', - label: '字体大小', - name: 'textFontSize', + type: 'el-select', + label: '字体风格', + name: 'textFontStyle', required: false, placeholder: '', - value: 20 + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, + ], + value: 'normal' }, { type: 'el-select', @@ -165,11 +191,11 @@ export const widgetMoreBarLine = { {code: 'left', name: '左对齐'}, {code: 'right', name: '右对齐'}, ], - value: 'left' + value: 'center' }, { type: 'el-input-text', - label: '副标题', + label: '副标题名', name: 'subText', required: false, placeholder: '', @@ -181,7 +207,15 @@ export const widgetMoreBarLine = { name: 'subTextColor', required: false, placeholder: '', - value: '#fff' + value: 'rgba(30, 144, 255, 1)' + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'subTextFontSize', + required: false, + placeholder: '', + value: 20 }, { type: 'el-select', @@ -198,12 +232,17 @@ export const widgetMoreBarLine = { value: 'normal' }, { - type: 'el-input-number', - label: '字体大小', - name: 'subTextFontSize', + type: 'el-select', + label: '字体风格', + name: 'subTextFontStyle', required: false, placeholder: '', - value: 20 + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, + ], + value: 'normal' }, ], }, @@ -223,13 +262,13 @@ export const widgetMoreBarLine = { label: '图例名称', name: 'legendName', required: false, - placeholder: '多值以'|'隔开', + placeholder: '多值以' | '隔开', value: '' }, { type: 'vue-color', label: '字体颜色', - name: 'lengedColor', + name: 'legendColor', required: false, placeholder: '', value: '#fff', @@ -237,7 +276,7 @@ export const widgetMoreBarLine = { { type: 'el-input-number', label: '字体字号', - name: 'lengedFontSize', + name: 'legendFontSize', required: false, placeholder: '', value: 12, @@ -245,7 +284,7 @@ export const widgetMoreBarLine = { { type: 'el-input-number', label: '图例宽度', - name: 'lengedWidth', + name: 'legendWidth', required: false, placeholder: '', value: 12, @@ -303,7 +342,7 @@ export const widgetMoreBarLine = { { type: 'el-input-text', label: '坐标名', - name: 'xName', + name: 'nameX', required: false, placeholder: '', value: '' @@ -314,20 +353,20 @@ export const widgetMoreBarLine = { name: 'nameColorX', required: false, placeholder: '', - value: '#fff', + value: '#fff' }, { type: 'el-input-number', - label: '坐标字号', + label: '坐标名字号', name: 'nameFontSizeX', required: false, placeholder: '', - value: 14, + value: 14 }, { type: 'vue-color', label: '数值颜色', - name: 'Xcolor', + name: 'colorX', required: false, placeholder: '', value: '#fff', @@ -340,14 +379,6 @@ export const widgetMoreBarLine = { placeholder: '', value: 14, }, - { - type: 'el-slider', - label: '数值角度', - name: 'textAngle', - required: false, - placeholder: '', - value: 0 - }, { type: 'el-input-number', label: '数值间隔', @@ -356,9 +387,17 @@ export const widgetMoreBarLine = { placeholder: '', value: '' }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngleX', + required: false, + placeholder: '', + value: 0 + }, { type: 'el-switch', - label: '轴反转', + label: '坐标轴反转', name: 'reversalX', required: false, placeholder: '', @@ -366,12 +405,20 @@ export const widgetMoreBarLine = { }, { type: 'vue-color', - label: '轴颜色', + label: '坐标轴颜色', name: 'lineColorX', required: false, placeholder: '', value: '#fff', }, + { + type: 'el-input-number', + label: '坐标轴宽度', + name: 'lineWidthX', + required: false, + placeholder: '', + value: 1, + }, { type: 'el-switch', label: '分割线显示', @@ -387,15 +434,23 @@ export const widgetMoreBarLine = { required: false, placeholder: '', value: '#fff', - } + }, + { + type: 'el-input-number', + label: '分割线宽度', + name: 'splitLineWidthX', + required: false, + placeholder: '', + value: 1, + }, ], }, { - name: 'Y轴设置', + name: '左Y轴设置', list: [ { type: 'el-switch', - label: '左显示', + label: '显示', name: 'isShowYLeft', require: false, placeholder: '', @@ -403,7 +458,7 @@ export const widgetMoreBarLine = { }, { type: 'el-input-text', - label: '左坐标名', + label: '坐标名', name: 'textNameYLeft', require: false, placeholder: '', @@ -411,7 +466,7 @@ export const widgetMoreBarLine = { }, { type: 'vue-color', - label: '左坐标名颜色', + label: '坐标名颜色', name: 'nameColorYLeft', required: false, placeholder: '', @@ -419,15 +474,108 @@ export const widgetMoreBarLine = { }, { type: 'el-input-number', - label: '左坐标字号', + label: '坐标名字号', name: 'nameFontSizeYLeft', required: false, placeholder: '', value: 14, }, + { + type: 'vue-color', + label: '数值颜色', + name: 'colorYLeft', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '数值字号', + name: 'fontSizeYLeft', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-input-number', + label: '均分', + name: 'splitNumberLeft', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngleYLeft', + required: false, + placeholder: '', + value: 0 + }, + { + type: 'el-switch', + label: '刻度线显示', + name: 'tickLineYLeft', + require: false, + placeholder: '', + value: true, + }, + { + type: 'el-switch', + label: '坐标轴显示', + name: 'lineYLeft', + require: false, + placeholder: '', + value: true, + }, + { + type: 'vue-color', + label: '坐标轴颜色', + name: 'lineColorYLeft', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '坐标轴宽度', + name: 'lineWidthYLeft', + required: false, + placeholder: '', + value: 1, + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineYLeft', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorYLeft', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '分割线宽度', + name: 'splitLineFontWidthYLeft', + required: false, + placeholder: '', + value: 1, + }, + ], + }, + { + name: '右Y轴设置', + list: [ { type: 'el-switch', - label: '右显示', + label: '显示', name: 'isShowYRight', require: false, placeholder: '', @@ -435,7 +583,7 @@ export const widgetMoreBarLine = { }, { type: 'el-input-text', - label: '右坐标名', + label: '坐标名', name: 'textNameYRight', require: false, placeholder: '', @@ -443,7 +591,7 @@ export const widgetMoreBarLine = { }, { type: 'vue-color', - label: '右坐标名颜色', + label: '坐标名颜色', name: 'nameColorYRight', required: false, placeholder: '', @@ -451,16 +599,15 @@ export const widgetMoreBarLine = { }, { type: 'el-input-number', - label: '右坐标字号', + label: '坐标名字号', name: 'nameFontSizeYRight', required: false, placeholder: '', value: 14, - }, - { + }, { type: 'vue-color', label: '数值颜色', - name: 'colorY', + name: 'colorYRight', required: false, placeholder: '', value: '#fff', @@ -468,19 +615,83 @@ export const widgetMoreBarLine = { { type: 'el-input-number', label: '数值字号', - name: 'fontSizeY', + name: 'fontSizeYRight', required: false, placeholder: '', value: 14, }, + { + type: 'el-input-number', + label: '均分', + name: 'splitNumberRight', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngleYRight', + required: false, + placeholder: '', + value: 0 + }, + { + type: 'el-switch', + label: '刻度线显示', + name: 'tickLineYRight', + require: false, + placeholder: '', + value: true, + }, + { + type: 'el-switch', + label: '坐标轴显示', + name: 'lineYRight', + require: false, + placeholder: '', + value: true, + }, { type: 'vue-color', - label: '轴颜色', - name: 'lineColorY', + label: '坐标轴颜色', + name: 'lineColorYRight', required: false, placeholder: '', value: '#fff', }, + { + type: 'el-input-number', + label: '坐标轴宽度', + name: 'lineWidthYRight', + required: false, + placeholder: '', + value: 1, + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineYRight', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorYRight', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '分割线宽度', + name: 'splitLineFontWidthYRight', + required: false, + placeholder: '', + value: 1, + }, ], }, { @@ -590,19 +801,19 @@ export const widgetMoreBarLine = { list: [ { type: 'el-input-number', - label: '字体大小', - name: 'tipFontSize', + label: '字体字号', + name: 'tipsFontSize', required: false, placeholder: '', - value: 12 + value: 16 }, { type: 'vue-color', label: '字体颜色', - name: 'lineColor', + name: 'tipsColor', required: false, placeholder: '', - value: '#e68b55' + value: '#00FEFF' }, ], }, @@ -648,11 +859,7 @@ export const widgetMoreBarLine = { label: '', name: 'customColor', required: false, - value: [ - {color: '#4bdfff'}, - {color: '#55f49c'}, - {color: '#ffa43a'}, - ], + value: [{color: '#ff7f50'}, {color: '#87cefa'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}], }, ], }, diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-decorate-pie.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/decorateCharts/widget-decorate-pie.js similarity index 97% rename from report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-decorate-pie.js rename to report-ui/src/views/bigscreenDesigner/designer/tools/configure/decorateCharts/widget-decorate-pie.js index ab42f3519df8c8bd288d20c153b1b79704f000d9..ad94e2fc8d39c87a3a935b3b3917cb3f06ab9e92 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-decorate-pie.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/decorateCharts/widget-decorate-pie.js @@ -3,12 +3,13 @@ * @version: * @Author: foming * @Date: - * @LastEditors: - * @LastEditTime: + * @LastEditors: qianlishi qianlishi@anji-plus.com + * @LastEditTime: 2022-11-07 15:40:07 */ export const widgetDecoratePie = { code: 'widgetDecoratePieChart', - type: 'chart', + type: 'decorate', + tabName: '装饰图', label: '装饰饼图', icon: 'iconicon_tubiao_bingtu', options: { @@ -396,9 +397,9 @@ export const widgetDecoratePie = { required: false, placeholder: '', selectOptions: [ - {code: 'four', name: '十字星'}, - {code: 'five', name: '五角星'}, - {code: 'six', name: '六芒星'}, + { code: 'four', name: '十字星' }, + { code: 'five', name: '五角星' }, + { code: 'six', name: '六芒星' }, ], value: 'six' }, diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-funnel.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/funnelCharts/widget-funnel.js similarity index 74% rename from report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-funnel.js rename to report-ui/src/views/bigscreenDesigner/designer/tools/configure/funnelCharts/widget-funnel.js index f1c9ab6c49a8332de411e6e6b38e2a1cb1cd6dcb..7b8a4490022495480ae7c99c6d63770442561832 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-funnel.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/funnelCharts/widget-funnel.js @@ -3,12 +3,13 @@ * @version: * @Author: qianlishi * @Date: 2021-08-29 07:29:23 - * @LastEditors: qianlishi - * @LastEditTime: 2021-09-28 14:12:37 + * @LastEditors: qianlishi qianlishi@anji-plus.com + * @LastEditTime: 2022-11-07 15:40:21 */ export const widgetFunnel = { code: 'widget-funnel', - type: 'chart', + type: 'funnel', + tabName: '漏斗图', label: '漏斗图', icon: 'iconloudoutu', options: { @@ -44,15 +45,15 @@ export const widgetFunnel = { list: [ { type: 'el-switch', - label: '标题', + label: '标题显示', name: 'isNoTitle', required: false, placeholder: '', - value: false, + value: true, }, { type: 'el-input-text', - label: '标题', + label: '标题名', name: 'titleText', required: false, placeholder: '', @@ -66,6 +67,14 @@ export const widgetFunnel = { placeholder: '', value: '#FFD700' }, + { + type: 'el-input-number', + label: '字体字号', + name: 'textFontSize', + required: false, + placeholder: '', + value: 20 + }, { type: 'el-select', label: '字体粗细', @@ -73,20 +82,25 @@ export const widgetFunnel = { required: false, placeholder: '', selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} + { code: 'normal', name: '正常' }, + { code: 'bold', name: '粗体' }, + { code: 'bolder', name: '特粗体' }, + { code: 'lighter', name: '细体' } ], value: 'normal' }, { - type: 'el-input-number', - label: '字体字号', - name: 'textFontSize', + type: 'el-select', + label: '字体风格', + name: 'textFontStyle', required: false, placeholder: '', - value: 20 + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'italic', name: 'italic斜体' }, + { code: 'oblique', name: 'oblique斜体' }, + ], + value: 'normal' }, { type: 'el-select', @@ -95,15 +109,15 @@ export const widgetFunnel = { required: false, placeholder: '', selectOptions: [ - {code: 'center', name: '居中'}, - {code: 'left', name: '左对齐'}, - {code: 'right', name: '右对齐'}, + { code: 'center', name: '居中' }, + { code: 'left', name: '左对齐' }, + { code: 'right', name: '右对齐' }, ], value: 'center' }, { type: 'el-input-text', - label: '副标题', + label: '副标题名', name: 'subText', required: false, placeholder: '', @@ -117,6 +131,14 @@ export const widgetFunnel = { placeholder: '', value: 'rgba(30, 144, 255, 1)' }, + { + type: 'el-input-number', + label: '字体字号', + name: 'subTextFontSize', + required: false, + placeholder: '', + value: 20 + }, { type: 'el-select', label: '字体粗细', @@ -124,20 +146,25 @@ export const widgetFunnel = { required: false, placeholder: '', selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} + { code: 'normal', name: '正常' }, + { code: 'bold', name: '粗体' }, + { code: 'bolder', name: '特粗体' }, + { code: 'lighter', name: '细体' } ], value: 'normal' }, { - type: 'el-input-number', - label: '字体字号', - name: 'subTextFontSize', + type: 'el-select', + label: '字体风格', + name: 'subTextFontStyle', required: false, placeholder: '', - value: 16 + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'italic', name: 'italic斜体' }, + { code: 'oblique', name: 'oblique斜体' }, + ], + value: 'normal' }, ], }, @@ -175,10 +202,10 @@ export const widgetFunnel = { require: false, placeholder: '', selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} + { code: 'normal', name: '正常' }, + { code: 'bold', name: '粗体' }, + { code: 'bolder', name: '特粗体' }, + { code: 'lighter', name: '细体' } ], value: 'normal' }, @@ -198,7 +225,7 @@ export const widgetFunnel = { { type: 'vue-color', label: '字体颜色', - name: 'lengedColor', + name: 'legendColor', required: false, placeholder: '', value: '#fff', @@ -206,7 +233,7 @@ export const widgetFunnel = { { type: 'el-input-number', label: '字体字号', - name: 'lengedFontSize', + name: 'legendFontSize', required: false, placeholder: '', value: 16, @@ -214,7 +241,7 @@ export const widgetFunnel = { { type: 'el-input-number', label: '图例宽度', - name: 'lengedWidth', + name: 'legendWidth', required: false, placeholder: '', value: 15, @@ -226,9 +253,9 @@ export const widgetFunnel = { required: false, placeholder: '', selectOptions: [ - {code: 'center', name: '居中'}, - {code: 'left', name: '左对齐'}, - {code: 'right', name: '右对齐'}, + { code: 'center', name: '居中' }, + { code: 'left', name: '左对齐' }, + { code: 'right', name: '右对齐' }, ], value: 'center' }, @@ -239,8 +266,8 @@ export const widgetFunnel = { required: false, placeholder: '', selectOptions: [ - {code: 'top', name: '顶部'}, - {code: 'bottom', name: '底部'}, + { code: 'top', name: '顶部' }, + { code: 'bottom', name: '底部' }, ], value: 'top' }, @@ -251,8 +278,8 @@ export const widgetFunnel = { required: false, placeholder: '', selectOptions: [ - {code: 'vertical', name: '竖排'}, - {code: 'horizontal', name: '横排'}, + { code: 'vertical', name: '竖排' }, + { code: 'horizontal', name: '横排' }, ], value: 'horizontal' }, @@ -264,18 +291,18 @@ export const widgetFunnel = { { type: 'el-input-number', label: '字体字号', - name: 'tipFontSize', + name: 'tipsFontSize', required: false, placeholder: '', - value: 14 + value: 16 }, { type: 'vue-color', label: '字体颜色', - name: 'lineColor', + name: 'tipsColor', required: false, placeholder: '', - value: '' + value: '#00FEFF' }, ], }, @@ -287,7 +314,7 @@ export const widgetFunnel = { label: '', name: 'customColor', required: false, - value: [{color: '#0CD2E6'}, {color: '#00BFA5'}, {color: '#FFC722'}, {color: '#886EFF'}, {color: '#008DEC'}], + value: [{ color: '#0CD2E6' }, { color: '#00BFA5' }, { color: '#FFC722' }, { color: '#886EFF' }, { color: '#008DEC' }], }, ], }, @@ -331,11 +358,11 @@ export const widgetFunnel = { relactiveDom: 'dataType', relactiveDomValue: 'staticData', value: [ - {"value": 2, "name": "访问"}, - {"value": 5, "name": "咨询"}, - {"value": 20, "name": "订单"}, - {"value": 40, "name": "点击"}, - {"value": 125, "name": "展现"} + { "value": 2, "name": "访问" }, + { "value": 5, "name": "咨询" }, + { "value": 20, "name": "订单" }, + { "value": 40, "name": "点击" }, + { "value": 125, "name": "展现" } ], }, { diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/heatmap/widget-heatmap.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/heatmap/widget-heatmap.js new file mode 100644 index 0000000000000000000000000000000000000000..77cbb184bbca0a32c53ef1980595fbe86c657b75 --- /dev/null +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/heatmap/widget-heatmap.js @@ -0,0 +1,748 @@ +/* + * @Descripttion: 热力图 + * @version: + * @Author: whw + * @Date: 2021-11-3 + * @LastEditors: qianlishi qianlishi@anji-plus.com + * @LastEditTime: 2022-11-07 15:40:35 + */ +export const widgetHeatmap = { + code: 'widget-heatmap', + type: 'heatmap', + tabName: '热力图', + label: '热力图', + icon: 'iconrelitu', + options: { + // 配置 + setup: [ + { + type: 'el-input-text', + label: '图层名称', + name: 'layerName', + required: false, + placeholder: '', + value: '热力图', + }, + { + type: 'vue-color', + label: '背景颜色', + name: 'background', + required: false, + placeholder: '', + value: '' + }, + [ + { + name: '标题设置', + list: [ + { + type: 'el-switch', + label: '标题显示', + name: 'isNoTitle', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '标题名', + name: 'titleText', + required: false, + placeholder: '', + value: '', + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'textColor', + required: false, + placeholder: '', + value: '#FFD700' + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'textFontSize', + required: false, + placeholder: '', + value: 20 + }, + { + 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-select', + label: '字体风格', + name: 'textFontStyle', + required: false, + placeholder: '', + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'italic', name: 'italic斜体' }, + { code: 'oblique', name: 'oblique斜体' }, + ], + value: 'normal' + }, + { + 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-number', + label: '字体字号', + name: 'subTextFontSize', + required: false, + placeholder: '', + value: 20 + }, + { + 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-select', + label: '字体风格', + name: 'subTextFontStyle', + required: false, + placeholder: '', + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'italic', name: 'italic斜体' }, + { code: 'oblique', name: 'oblique斜体' }, + ], + value: 'normal' + }, + ], + }, + { + name: 'X轴设置', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'hideX', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '坐标名', + name: 'nameX', + 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: 'colorX', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '数值字号', + name: 'fontSizeX', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-input-number', + label: '数值间隔', + name: 'textInterval', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngleX', + required: false, + placeholder: '', + value: 0 + }, + { + type: 'el-switch', + label: '坐标轴反转', + name: 'reversalX', + required: false, + placeholder: '', + value: false + }, + { + type: 'vue-color', + label: '坐标轴颜色', + name: 'lineColorX', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '坐标轴宽度', + name: 'lineWidthX', + required: false, + placeholder: '', + value: 1, + }, + ], + }, + { + 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-switch', + label: '缩放', + name: 'scale', + require: false, + placeholder: '', + value: false, + }, + { + type: 'el-input-number', + label: '均分', + name: 'splitNumberY', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngleY', + required: false, + placeholder: '', + value: 0 + }, + { + type: 'el-switch', + label: '坐标轴反转', + name: 'reversalY', + required: false, + placeholder: '', + value: false + }, + { + type: 'vue-color', + label: '坐标轴颜色', + name: 'lineColorY', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '坐标轴宽度', + name: 'lineWidthY', + required: false, + placeholder: '', + value: 1, + }, + ], + }, + { + name: '数值设定', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShow', + required: false, + placeholder: '', + value: true + }, + { + 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: 'tipsColor', + required: false, + placeholder: '', + value: '#00FEFF' + }, + ], + }, + { + 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: false, + }, + { + type: 'el-input-number', + label: '最小值', + name: 'dataMin', + required: false, + placeholder: '', + value: 0, + }, + { + type: 'el-input-number', + label: '最大值', + name: 'dataMax', + required: false, + placeholder: '', + value: 5000, + }, + { + type: 'vue-color', + label: '数值颜色', + name: 'legendColor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '图例大小', + name: 'legendFontSize', + required: false, + placeholder: '', + value: 12, + }, + { + type: 'el-input-number', + label: '图例宽度', + name: 'legendWidth', + required: false, + placeholder: '', + value: 12, + }, + { + 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: 'legendColorList', + required: false, + value: [{ color: '#abd9e9' }, { color: '#74add1' }, { color: '#4575b4' }, { color: '#313695' }], + }, + ], + }, + ], + ], + // 数据 + 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": "0", "yaxis": "0", "num": 3320 }, + { "axis": "0", "yaxis": "1", "num": 1561 }, + { "axis": "0", "yaxis": "2", "num": 3194 }, + { "axis": "0", "yaxis": "3", "num": 2899 }, + { "axis": "0", "yaxis": "4", "num": 2363 }, + { "axis": "0", "yaxis": "5", "num": 3945 }, + { "axis": "0", "yaxis": "6", "num": 2051 }, + { "axis": "0", "yaxis": "7", "num": 3657 }, + { "axis": "0", "yaxis": "8", "num": 3304 }, + { "axis": "0", "yaxis": "9", "num": 2990 }, + { "axis": "1", "yaxis": "9", "num": 2663 }, + { "axis": "1", "yaxis": "0", "num": 378 }, + { "axis": "1", "yaxis": "1", "num": 4076 }, + { "axis": "1", "yaxis": "2", "num": 3178 }, + { "axis": "1", "yaxis": "3", "num": 1501 }, + { "axis": "1", "yaxis": "4", "num": 1660 }, + { "axis": "1", "yaxis": "5", "num": 726 }, + { "axis": "1", "yaxis": "6", "num": 4148 }, + { "axis": "1", "yaxis": "7", "num": 720 }, + { "axis": "1", "yaxis": "8", "num": 430 }, + { "axis": "2", "yaxis": "9", "num": 2983 }, + { "axis": "2", "yaxis": "0", "num": 1917 }, + { "axis": "2", "yaxis": "1", "num": 1188 }, + { "axis": "2", "yaxis": "2", "num": 3581 }, + { "axis": "2", "yaxis": "3", "num": 1781 }, + { "axis": "2", "yaxis": "4", "num": 4725 }, + { "axis": "2", "yaxis": "5", "num": 4077 }, + { "axis": "2", "yaxis": "6", "num": 299 }, + { "axis": "2", "yaxis": "7", "num": 4828 }, + { "axis": "2", "yaxis": "8", "num": 1778 }, + { "axis": "3", "yaxis": "9", "num": 3171 }, + { "axis": "3", "yaxis": "0", "num": 2944 }, + { "axis": "3", "yaxis": "1", "num": 763 }, + { "axis": "3", "yaxis": "2", "num": 1678 }, + { "axis": "3", "yaxis": "3", "num": 1765 }, + { "axis": "3", "yaxis": "4", "num": 2949 }, + { "axis": "3", "yaxis": "5", "num": 966 }, + { "axis": "3", "yaxis": "6", "num": 4622 }, + { "axis": "3", "yaxis": "7", "num": 2818 }, + { "axis": "3", "yaxis": "8", "num": 3913 }, + { "axis": "4", "yaxis": "9", "num": 4382 }, + { "axis": "4", "yaxis": "0", "num": 1670 }, + { "axis": "4", "yaxis": "1", "num": 4532 }, + { "axis": "4", "yaxis": "2", "num": 2116 }, + { "axis": "4", "yaxis": "3", "num": 2383 }, + { "axis": "4", "yaxis": "4", "num": 510 }, + { "axis": "4", "yaxis": "5", "num": 33 }, + { "axis": "4", "yaxis": "6", "num": 4974 }, + { "axis": "4", "yaxis": "7", "num": 3627 }, + { "axis": "4", "yaxis": "8", "num": 2737 }, + { "axis": "5", "yaxis": "9", "num": 656 }, + { "axis": "5", "yaxis": "0", "num": 3689 }, + { "axis": "5", "yaxis": "1", "num": 713 }, + { "axis": "5", "yaxis": "2", "num": 3551 }, + { "axis": "5", "yaxis": "3", "num": 3159 }, + { "axis": "5", "yaxis": "4", "num": 4150 }, + { "axis": "5", "yaxis": "5", "num": 1416 }, + { "axis": "5", "yaxis": "6", "num": 3021 }, + { "axis": "5", "yaxis": "7", "num": 1778 }, + { "axis": "5", "yaxis": "8", "num": 863 }, + { "axis": "6", "yaxis": "9", "num": 772 }, + { "axis": "6", "yaxis": "0", "num": 1675 }, + { "axis": "6", "yaxis": "1", "num": 1323 }, + { "axis": "6", "yaxis": "2", "num": 2023 }, + { "axis": "6", "yaxis": "3", "num": 43 }, + { "axis": "6", "yaxis": "4", "num": 4964 }, + { "axis": "6", "yaxis": "5", "num": 4781 }, + { "axis": "6", "yaxis": "6", "num": 2608 }, + { "axis": "6", "yaxis": "7", "num": 2278 }, + { "axis": "6", "yaxis": "8", "num": 3285 }, + { "axis": "7", "yaxis": "9", "num": 1977 }, + { "axis": "7", "yaxis": "0", "num": 882 }, + { "axis": "7", "yaxis": "1", "num": 2434 }, + { "axis": "7", "yaxis": "2", "num": 4694 }, + { "axis": "7", "yaxis": "3", "num": 3022 }, + { "axis": "7", "yaxis": "4", "num": 1798 }, + { "axis": "7", "yaxis": "5", "num": 2503 }, + { "axis": "7", "yaxis": "6", "num": 693 }, + { "axis": "7", "yaxis": "7", "num": 275 }, + { "axis": "7", "yaxis": "8", "num": 3774 }, + { "axis": "8", "yaxis": "9", "num": 1386 }, + { "axis": "8", "yaxis": "0", "num": 1212 }, + { "axis": "8", "yaxis": "1", "num": 1982 }, + { "axis": "8", "yaxis": "2", "num": 1509 }, + { "axis": "8", "yaxis": "3", "num": 94 }, + { "axis": "8", "yaxis": "4", "num": 2082 }, + { "axis": "8", "yaxis": "5", "num": 3930 }, + { "axis": "8", "yaxis": "6", "num": 4528 }, + { "axis": "8", "yaxis": "7", "num": 1861 }, + { "axis": "8", "yaxis": "8", "num": 4582 }, + { "axis": "9", "yaxis": "9", "num": 3038 }, + { "axis": "9", "yaxis": "0", "num": 4038 }, + { "axis": "9", "yaxis": "1", "num": 357 }, + { "axis": "9", "yaxis": "2", "num": 306 }, + { "axis": "9", "yaxis": "3", "num": 479 }, + { "axis": "9", "yaxis": "4", "num": 823 }, + { "axis": "9", "yaxis": "5", "num": 3442 }, + { "axis": "9", "yaxis": "6", "num": 904 }, + { "axis": "9", "yaxis": "7", "num": 399 }, + { "axis": "9", "yaxis": "8", "num": 4869 }, + ] + }, + { + type: 'dycustComponents', + label: '', + name: 'dynamicData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + chartType: 'widget-coord', + relactiveDomValue: 'dynamicData', + dictKey: 'COORD_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: 700, + }, + { + type: 'el-input-number', + label: '高度', + name: 'height', + required: false, + placeholder: '该容器在1080px大屏中的高度', + value: 300, + }, + ], + } +} diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-line-compare.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-line-compare.js similarity index 76% rename from report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-line-compare.js rename to report-ui/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-line-compare.js index 6767f9dac7e2de78b1935283bcbf59e40dbeb6b2..ef09336825557b615e80d9131db3a243dd0f85a7 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-line-compare.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-line-compare.js @@ -3,12 +3,13 @@ * @version: * @Author: foming * @Date: 2021-08-29 07:39:35 - * @LastEditors: qianlishi - * @LastEditTime: 2021-09-28 14:15:42 + * @LastEditors: qianlishi qianlishi@anji-plus.com + * @LastEditTime: 2022-11-07 15:40:44 */ export const widgetLineCompare = { code: 'widgetLineCompareChart', - type: 'chart', + type: 'lineChart', + tabName: '折线图', label: '折线对比图', icon: 'iconzhexian', options: { @@ -48,7 +49,19 @@ export const widgetLineCompare = { name: 'pointSize', required: false, placeholder: '', - value: 5, + value: 10, + }, + { + type: 'el-select', + label: '点样式', + name: 'symbol', + required: false, + placeholder: '', + selectOptions: [ + {code: 'circle', name: '实心点'}, + {code: 'emptyCircle', name: '空心点'}, + ], + value: 'circle' }, { type: 'el-switch', @@ -80,7 +93,7 @@ export const widgetLineCompare = { name: 'lineWidth', required: false, placeholder: '', - value: 2, + value: 10, }, ], }, @@ -89,7 +102,7 @@ export const widgetLineCompare = { list: [ { type: 'el-switch', - label: '标题', + label: '标题显示', name: 'isNoTitle', required: false, placeholder: '', @@ -97,7 +110,7 @@ export const widgetLineCompare = { }, { type: 'el-input-text', - label: '标题', + label: '标题名', name: 'titleText', required: false, placeholder: '', @@ -111,6 +124,14 @@ export const widgetLineCompare = { placeholder: '', value: '#FFD700' }, + { + type: 'el-input-number', + label: '字体字号', + name: 'textFontSize', + required: false, + placeholder: '', + value: 20 + }, { type: 'el-select', label: '字体粗细', @@ -118,20 +139,25 @@ export const widgetLineCompare = { required: false, placeholder: '', selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} + { code: 'normal', name: '正常' }, + { code: 'bold', name: '粗体' }, + { code: 'bolder', name: '特粗体' }, + { code: 'lighter', name: '细体' } ], value: 'normal' }, { - type: 'el-input-number', - label: '字体大小', - name: 'textFontSize', + type: 'el-select', + label: '字体风格', + name: 'textFontStyle', required: false, placeholder: '', - value: 20 + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'italic', name: 'italic斜体' }, + { code: 'oblique', name: 'oblique斜体' }, + ], + value: 'normal' }, { type: 'el-select', @@ -140,12 +166,63 @@ export const widgetLineCompare = { required: false, placeholder: '', selectOptions: [ - {code: 'center', name: '居中'}, - {code: 'left', name: '左对齐'}, - {code: 'right', name: '右对齐'}, + { 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-number', + label: '字体字号', + name: 'subTextFontSize', + required: false, + placeholder: '', + value: 20 + }, + { + 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-select', + label: '字体风格', + name: 'subTextFontStyle', + required: false, + placeholder: '', + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'italic', name: 'italic斜体' }, + { code: 'oblique', name: 'oblique斜体' }, + ], + value: 'normal' + }, ], }, { @@ -164,13 +241,13 @@ export const widgetLineCompare = { label: '图例名称', name: 'legendName', required: false, - placeholder: '多值以'|'隔开', + placeholder: '多值以' | '隔开', value: '' }, { type: 'vue-color', label: '字体颜色', - name: 'lengedColor', + name: 'legendColor', required: false, placeholder: '', value: '#fff', @@ -178,7 +255,7 @@ export const widgetLineCompare = { { type: 'el-input-number', label: '字体字号', - name: 'lengedFontSize', + name: 'legendFontSize', required: false, placeholder: '', value: 12, @@ -186,7 +263,7 @@ export const widgetLineCompare = { { type: 'el-input-number', label: '图例宽度', - name: 'lengedWidth', + name: 'legendWidth', required: false, placeholder: '', value: 12, @@ -198,9 +275,9 @@ export const widgetLineCompare = { required: false, placeholder: '', selectOptions: [ - {code: 'center', name: '居中'}, - {code: 'left', name: '左对齐'}, - {code: 'right', name: '右对齐'}, + { code: 'center', name: '居中' }, + { code: 'left', name: '左对齐' }, + { code: 'right', name: '右对齐' }, ], value: 'center' }, @@ -211,8 +288,8 @@ export const widgetLineCompare = { required: false, placeholder: '', selectOptions: [ - {code: 'top', name: '顶部'}, - {code: 'bottom', name: '底部'}, + { code: 'top', name: '顶部' }, + { code: 'bottom', name: '底部' }, ], value: 'top' }, @@ -223,8 +300,8 @@ export const widgetLineCompare = { required: false, placeholder: '', selectOptions: [ - {code: 'vertical', name: '竖排'}, - {code: 'horizontal', name: '横排'}, + { code: 'vertical', name: '竖排' }, + { code: 'horizontal', name: '横排' }, ], value: 'horizontal' }, @@ -259,7 +336,7 @@ export const widgetLineCompare = { }, { type: 'el-input-number', - label: '坐标字号', + label: '坐标名字号', name: 'nameFontSizeX', required: false, placeholder: '', @@ -299,7 +376,7 @@ export const widgetLineCompare = { }, { type: 'el-switch', - label: '刻度线', + label: '刻度线显示', name: 'tickLineX', require: false, placeholder: '', @@ -307,7 +384,7 @@ export const widgetLineCompare = { }, { type: 'el-switch', - label: 'X轴线', + label: '坐标轴显示', name: 'lineX', require: false, placeholder: '', @@ -315,7 +392,7 @@ export const widgetLineCompare = { }, { type: 'vue-color', - label: '轴颜色', + label: '坐标轴颜色', name: 'lineColorX', required: false, placeholder: '', @@ -341,7 +418,7 @@ export const widgetLineCompare = { require: false, placeholder: '', value: '' - },{ + }, { type: 'vue-color', label: '坐标名颜色', name: 'nameColorYTop', @@ -351,47 +428,47 @@ export const widgetLineCompare = { }, { type: 'el-input-number', - label: '坐标字号', - name: 'namefontSizeYTop', + label: '坐标名字号', + name: 'nameFontSizeYTop', required: false, placeholder: '', value: 14, }, { - type: 'el-switch', - label: '缩放', - name: 'scaleYTop', + type: 'vue-color', + label: '数值颜色', + name: 'colorYTop', required: false, placeholder: '', - value: false, + value: '#fff', }, { type: 'el-input-number', - label: '数值切分', - name: 'splitNumberYTop', + label: '数值字号', + name: 'fontSizeYTop', required: false, placeholder: '', - value: '' + value: 14, }, { - type: 'vue-color', - label: '数值颜色', - name: 'colorYTop', + type: 'el-switch', + label: '缩放', + name: 'scaleYTop', required: false, placeholder: '', - value: '#fff', + value: false, }, { type: 'el-input-number', - label: '数值字号', - name: 'fontSizeYTop', + label: '均分', + name: 'splitNumberYTop', required: false, placeholder: '', - value: 14, + value: '' }, { type: 'el-switch', - label: '刻度线', + label: '刻度线显示', name: 'tickLineYTop', require: false, placeholder: '', @@ -399,7 +476,7 @@ export const widgetLineCompare = { }, { type: 'el-switch', - label: 'y轴线', + label: '坐标轴显示', name: 'lineYTop', require: false, placeholder: '', @@ -407,7 +484,7 @@ export const widgetLineCompare = { }, { type: 'vue-color', - label: '轴颜色', + label: '坐标轴颜色', name: 'lineColorYTop', required: false, placeholder: '', @@ -415,7 +492,7 @@ export const widgetLineCompare = { }, { type: 'el-switch', - label: '分割线', + label: '分割线显示', name: 'splitLineYTop', require: false, placeholder: '', @@ -432,7 +509,7 @@ export const widgetLineCompare = { { type: 'el-input-number', label: '分割线宽度', - name: 'splitLinefontSizeYTop', + name: 'splitLineFontWidthYTop', required: false, placeholder: '', value: 1, @@ -457,7 +534,7 @@ export const widgetLineCompare = { require: false, placeholder: '', value: '' - },{ + }, { type: 'vue-color', label: '坐标名颜色', name: 'nameColorYBottom', @@ -467,47 +544,47 @@ export const widgetLineCompare = { }, { type: 'el-input-number', - label: '坐标字号', - name: 'namefontSizeYBottom', + label: '坐标名字号', + name: 'nameFontSizeYBottom', required: false, placeholder: '', value: 14, }, { - type: 'el-switch', - label: '缩放', - name: 'scaleYBottom', + type: 'vue-color', + label: '数值颜色', + name: 'colorYBottom', required: false, placeholder: '', - value: false, + value: '#fff', }, { type: 'el-input-number', - label: '数值切分', - name: 'splitNumberYBottom', + label: '数值字号', + name: 'fontSizeYBottom', required: false, placeholder: '', - value: '' + value: 14, }, { - type: 'vue-color', - label: '数值颜色', - name: 'colorYBottom', + type: 'el-switch', + label: '缩放', + name: 'scaleYBottom', required: false, placeholder: '', - value: '#fff', + value: false, }, { type: 'el-input-number', - label: '数值字号', - name: 'fontSizeYBottom', + label: '均分', + name: 'splitNumberYBottom', required: false, placeholder: '', - value: 14, + value: '' }, { type: 'el-switch', - label: '刻度线', + label: '刻度线显示', name: 'tickLineYBottom', require: false, placeholder: '', @@ -515,7 +592,7 @@ export const widgetLineCompare = { }, { type: 'el-switch', - label: 'y轴线', + label: '坐标轴显示', name: 'lineYBottom', require: false, placeholder: '', @@ -523,7 +600,7 @@ export const widgetLineCompare = { }, { type: 'vue-color', - label: '轴颜色', + label: '坐标轴颜色', name: 'lineColorYBottom', required: false, placeholder: '', @@ -531,7 +608,7 @@ export const widgetLineCompare = { }, { type: 'el-switch', - label: '分割线', + label: '分割线显示', name: 'splitLineYBottom', require: false, placeholder: '', @@ -548,7 +625,7 @@ export const widgetLineCompare = { { type: 'el-input-number', label: '分割线宽度', - name: 'splitLinefontSizeYBottom', + name: 'splitLineFontWidthYBottom', required: false, placeholder: '', value: 1, @@ -568,7 +645,7 @@ export const widgetLineCompare = { }, { type: 'el-input-number', - label: '字体大小', + label: '字体字号', name: 'fontSize', required: false, placeholder: '', @@ -589,10 +666,10 @@ export const widgetLineCompare = { required: false, placeholder: '', selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} + { code: 'normal', name: '正常' }, + { code: 'bold', name: '粗体' }, + { code: 'bolder', name: '特粗体' }, + { code: 'lighter', name: '细体' } ], value: 'normal' }, @@ -604,7 +681,7 @@ export const widgetLineCompare = { { type: 'el-switch', label: '显示', - name: 'tipShow', + name: 'tipsShow', required: false, placeholder: '', value: true, @@ -612,21 +689,22 @@ export const widgetLineCompare = { { type: 'el-select', label: '类型', - name: 'tipType', + name: 'tipsType', required: false, placeholder: '', selectOptions: [ - {code: 'line', name: '线形'}, - {code: 'cross', name: '十字形'}, + { code: 'line', name: '线形' }, + { code: 'cross', name: '十字形' }, ], value: 'line' }, { type: 'vue-color', label: '颜色', - name: 'tipColor', + name: 'tipsColor', required: false, - placeholder: '#e68b55', + placeholder: '', + value: '#00FEFF' }, ], }, @@ -675,7 +753,7 @@ export const widgetLineCompare = { label: '', name: 'customColor', required: false, - value: [{color: '#36c5e7'}, {color: '#e68b55'}], + value: [{ color: '#36c5e7' }, { color: '#e68b55' }], }, ], }, @@ -719,16 +797,16 @@ export const widgetLineCompare = { relactiveDom: 'dataType', relactiveDomValue: 'staticData', value: [ - {"axis":"07-25","name":"success","data":"2"}, - {"axis":"07-25","name":"fail","data":"10"}, - {"axis":"07-26","name":"success","data":"5"}, - {"axis":"07-26","name":"fail","data":"20"}, - {"axis":"07-27","name":"success","data":"15"}, - {"axis":"07-27","name":"fail","data":"30"}, - {"axis":"07-28","name":"success","data":"10"}, - {"axis":"07-28","name":"fail","data":"12"}, - {"axis":"07-29","name":"success","data":"9"}, - {"axis":"07-29","name":"fail","data":"16"}, + { "axis": "07-25", "name": "success", "data": "2" }, + { "axis": "07-25", "name": "fail", "data": "10" }, + { "axis": "07-26", "name": "success", "data": "5" }, + { "axis": "07-26", "name": "fail", "data": "20" }, + { "axis": "07-27", "name": "success", "data": "15" }, + { "axis": "07-27", "name": "fail", "data": "30" }, + { "axis": "07-28", "name": "success", "data": "10" }, + { "axis": "07-28", "name": "fail", "data": "12" }, + { "axis": "07-29", "name": "success", "data": "9" }, + { "axis": "07-29", "name": "fail", "data": "16" }, ], }, { @@ -768,7 +846,7 @@ export const widgetLineCompare = { name: 'width', required: false, placeholder: '该容器在1920px大屏中的宽度', - value: 400, + value: 500, }, { type: 'el-input-number', @@ -776,7 +854,7 @@ export const widgetLineCompare = { name: 'height', required: false, placeholder: '该容器在1080px大屏中的高度', - value: 200, + value: 250, }, ], } diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-line-stack.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-line-stack.js new file mode 100644 index 0000000000000000000000000000000000000000..83272a7833eb4834871f5ca45c1f725edcb345b1 --- /dev/null +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-line-stack.js @@ -0,0 +1,766 @@ +/* + * @Descripttion: 折线堆叠图 json + * @version: + * @Author: qianlishi + * @Date: 2021-08-29 07:38:17 + * @LastEditors: qianlishi + * @LastEditTime: 2021-09-28 14:16:28 + */ +export const widgetLineStack = { + code: 'widgetLineStackChart', + type: 'lineChart', + tabName: '折线图', + label: '折线堆叠图', + icon: 'iconduidietu', + 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: '' + }, + [ + { + 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-select', + label: '点样式', + name: 'symbol', + required: false, + placeholder: '', + selectOptions: [ + {code: 'circle', name: '实心点'}, + {code: 'emptyCircle', name: '空心点'}, + ], + value: 'circle' + }, + { + 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: 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-input-number', + label: '字体字号', + name: 'textFontSize', + required: false, + placeholder: '', + value: 20 + }, + { + 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-select', + label: '字体风格', + name: 'textFontStyle', + required: false, + placeholder: '', + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'italic', name: 'italic斜体' }, + { code: 'oblique', name: 'oblique斜体' }, + ], + value: 'normal' + }, + { + 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-number', + label: '字体字号', + name: 'subTextFontSize', + required: false, + placeholder: '', + value: 20 + }, + { + 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-select', + label: '字体风格', + name: 'subTextFontStyle', + required: false, + placeholder: '', + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'italic', name: 'italic斜体' }, + { code: 'oblique', name: 'oblique斜体' }, + ], + value: 'normal' + }, + ], + }, + { + name: '图例操作', + list: [ + { + type: 'el-switch', + label: '图例显示', + name: 'isShowLegend', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '图例名称', + name: 'legendName', + required: false, + placeholder: '多值以' | '隔开', + value: '' + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'legendColor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'legendFontSize', + required: false, + placeholder: '', + value: 12, + }, + { + type: 'el-input-number', + label: '图例宽度', + name: 'legendWidth', + required: false, + placeholder: '', + value: 12, + }, + { + 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: 'X轴设置', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'hideX', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '坐标名', + name: 'nameX', + 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: 'colorX', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '数值字号', + name: 'fontSizeX', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-input-number', + label: '数值间隔', + name: 'textInterval', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngleX', + required: false, + placeholder: '', + value: 0 + }, + { + type: 'el-switch', + label: '坐标轴反转', + name: 'reversalX', + required: false, + placeholder: '', + value: false + }, + { + type: 'vue-color', + label: '坐标轴颜色', + name: 'lineColorX', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '坐标轴宽度', + name: 'lineWidthX', + required: false, + placeholder: '', + value: 1, + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineX', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorX', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '分割线宽度', + name: 'splitLineWidthX', + required: false, + placeholder: '', + value: 1, + }, + ], + }, + { + 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-switch', + label: '缩放', + name: 'scale', + require: false, + placeholder: '', + value: false, + }, + { + type: 'el-input-number', + label: '均分', + name: 'splitNumberY', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngleY', + required: false, + placeholder: '', + value: 0 + }, + { + type: 'el-switch', + label: '坐标轴反转', + name: 'reversalY', + required: false, + placeholder: '', + value: false + }, + { + type: 'vue-color', + label: '坐标轴颜色', + name: 'lineColorY', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '坐标轴宽度', + name: 'lineWidthY', + required: false, + placeholder: '', + value: 1, + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineY', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorY', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '分割线宽度', + name: 'splitLineWidthY', + required: false, + placeholder: '', + value: 1, + }, + ], + }, + { + name: '数值设定', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShow', + required: false, + placeholder: '', + value: false + }, + { + 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: 'tipsColor', + required: false, + placeholder: '', + value: '#00FEFF' + }, + ], + }, + { + 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: '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": "2021-07-25", "name": "A", "data": "12" }, + { "axis": "2021-07-25", "name": "B", "data": "20" }, + { "axis": "2021-07-26", "name": "B", "data": "5" }, + { "axis": "2021-07-27", "name": "A", "data": "15" }, + { "axis": "2021-07-27", "name": "B", "data": "30" }, + ], + }, + { + type: 'dycustComponents', + label: '', + name: 'dynamicData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + relactiveDomValue: 'dynamicData', + chartType: 'widget-stackchart', + dictKey: 'STACK_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: 500, + }, + { + type: 'el-input-number', + label: '高度', + name: 'height', + required: false, + placeholder: '该容器在1080px大屏中的高度', + value: 250, + }, + ], + } +} diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-linechart.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-linechart.js similarity index 83% rename from report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-linechart.js rename to report-ui/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-linechart.js index 188dcf5927a08b09a2fcf1a254de4ac296eafb12..24999b32c306653a934a51169f2e70765f9135ab 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-linechart.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-linechart.js @@ -8,7 +8,8 @@ */ export const widgetLinechart = { code: 'widget-linechart', - type: 'chart', + type: 'lineChart', + tabName: '折线图', label: '折线图', icon: 'icontubiaozhexiantu', options: { @@ -50,6 +51,18 @@ export const widgetLinechart = { placeholder: '', value: 10, }, + { + type: 'el-select', + label: '点样式', + name: 'symbol', + required: false, + placeholder: '', + selectOptions: [ + {code: 'circle', name: '实心点'}, + {code: 'emptyCircle', name: '空心点'}, + ], + value: 'circle' + }, { type: 'el-switch', label: '平滑曲线', @@ -89,15 +102,15 @@ export const widgetLinechart = { list: [ { type: 'el-switch', - label: '标题', + label: '标题显示', name: 'isNoTitle', required: false, placeholder: '', - value: false + value: true, }, { type: 'el-input-text', - label: '标题', + label: '标题名', name: 'titleText', required: false, placeholder: '', @@ -109,7 +122,15 @@ export const widgetLinechart = { name: 'textColor', required: false, placeholder: '', - value: '#fff' + value: '#FFD700' + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'textFontSize', + required: false, + placeholder: '', + value: 20 }, { type: 'el-select', @@ -126,12 +147,17 @@ export const widgetLinechart = { value: 'normal' }, { - type: 'el-input-number', - label: '字体字号', - name: 'textFontSize', + type: 'el-select', + label: '字体风格', + name: 'textFontStyle', required: false, placeholder: '', - value: 20 + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, + ], + value: 'normal' }, { type: 'el-select', @@ -148,7 +174,7 @@ export const widgetLinechart = { }, { type: 'el-input-text', - label: '副标题', + label: '副标题名', name: 'subText', required: false, placeholder: '', @@ -160,7 +186,15 @@ export const widgetLinechart = { name: 'subTextColor', required: false, placeholder: '', - value: '#fff' + value: 'rgba(30, 144, 255, 1)' + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'subTextFontSize', + required: false, + placeholder: '', + value: 20 }, { type: 'el-select', @@ -177,12 +211,17 @@ export const widgetLinechart = { value: 'normal' }, { - type: 'el-input-number', - label: '字体字号', - name: 'subTextFontSize', + type: 'el-select', + label: '字体风格', + name: 'subTextFontStyle', required: false, placeholder: '', - value: 20 + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, + ], + value: 'normal' }, ], }, @@ -200,7 +239,7 @@ export const widgetLinechart = { { type: 'el-input-text', label: '坐标名', - name: 'xName', + name: 'nameX', required: false, placeholder: '', value: '' @@ -211,20 +250,20 @@ export const widgetLinechart = { name: 'nameColorX', required: false, placeholder: '', - value: '#fff', + value: '#fff' }, { type: 'el-input-number', - label: '坐标字号', + label: '坐标名字号', name: 'nameFontSizeX', required: false, placeholder: '', - value: 14, + value: 14 }, { type: 'vue-color', label: '数值颜色', - name: 'Xcolor', + name: 'colorX', required: false, placeholder: '', value: '#fff', @@ -237,14 +276,6 @@ export const widgetLinechart = { placeholder: '', value: 14, }, - { - type: 'el-slider', - label: '数值角度', - name: 'textAngle', - required: false, - placeholder: '', - value: 0 - }, { type: 'el-input-number', label: '数值间隔', @@ -253,9 +284,17 @@ export const widgetLinechart = { placeholder: '', value: '' }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngleX', + required: false, + placeholder: '', + value: 0 + }, { type: 'el-switch', - label: '轴反转', + label: '坐标轴反转', name: 'reversalX', required: false, placeholder: '', @@ -263,12 +302,20 @@ export const widgetLinechart = { }, { type: 'vue-color', - label: '轴颜色', + label: '坐标轴颜色', name: 'lineColorX', required: false, placeholder: '', value: '#fff', }, + { + type: 'el-input-number', + label: '坐标轴宽度', + name: 'lineWidthX', + required: false, + placeholder: '', + value: 1, + }, { type: 'el-switch', label: '分割线显示', @@ -284,7 +331,15 @@ export const widgetLinechart = { required: false, placeholder: '', value: '#fff', - } + }, + { + type: 'el-input-number', + label: '分割线宽度', + name: 'splitLineWidthX', + required: false, + placeholder: '', + value: 1, + }, ], }, { @@ -316,8 +371,8 @@ export const widgetLinechart = { }, { type: 'el-input-number', - label: '坐标字号', - name: 'namefontSizeY', + label: '坐标名字号', + name: 'nameFontSizeY', required: false, placeholder: '', value: 14, @@ -338,14 +393,6 @@ export const widgetLinechart = { placeholder: '', value: 14, }, - { - type: 'el-slider', - label: '数值角度', - name: 'ytextAngle', - required: false, - placeholder: '', - value: 0 - }, { type: 'el-switch', label: '缩放', @@ -357,14 +404,22 @@ export const widgetLinechart = { { type: 'el-input-number', label: '均分', - name: 'splitNumber', + name: 'splitNumberY', required: false, placeholder: '', value: '' }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngleY', + required: false, + placeholder: '', + value: 0 + }, { type: 'el-switch', - label: '轴反转', + label: '坐标轴反转', name: 'reversalY', required: false, placeholder: '', @@ -372,12 +427,20 @@ export const widgetLinechart = { }, { type: 'vue-color', - label: '轴颜色', + label: '坐标轴颜色', name: 'lineColorY', required: false, placeholder: '', value: '#fff', }, + { + type: 'el-input-number', + label: '坐标轴宽度', + name: 'lineWidthY', + required: false, + placeholder: '', + value: 1, + }, { type: 'el-switch', label: '分割线显示', @@ -393,7 +456,15 @@ export const widgetLinechart = { required: false, placeholder: '', value: '#fff', - } + }, + { + type: 'el-input-number', + label: '分割线宽度', + name: 'splitLineWidthY', + required: false, + placeholder: '', + value: 1, + }, ], }, { @@ -409,7 +480,7 @@ export const widgetLinechart = { }, { type: 'el-input-number', - label: '字体大小', + label: '字体字号', name: 'fontSize', required: false, placeholder: '', @@ -444,7 +515,7 @@ export const widgetLinechart = { list: [ { type: 'el-input-number', - label: '字体大小', + label: '字体字号', name: 'tipsFontSize', required: false, placeholder: '', @@ -453,10 +524,10 @@ export const widgetLinechart = { { type: 'vue-color', label: '字体颜色', - name: 'lineColor', + name: 'tipsColor', required: false, placeholder: '', - value: '' + value: '#00FEFF' }, ], }, diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-airbubble-map.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-airbubble-map.js similarity index 83% rename from report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-airbubble-map.js rename to report-ui/src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-airbubble-map.js index 363a03ad9b48aa9297fbb18ff6c4d20742bce2d4..e7f99b7f6df018ca2eacfdac79dd2cc60e1ad312 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-airbubble-map.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-airbubble-map.js @@ -3,12 +3,13 @@ * @version: * @Author: qianlishi * @Date: 2021-08-29 07:35:32 - * @LastEditors: qianlishi - * @LastEditTime: 2021-09-28 14:10:01 + * @LastEditors: qianlishi qianlishi@anji-plus.com + * @LastEditTime: 2022-11-07 15:41:02 */ export const widgetAirbubbleMap = { code: 'widgetAirBubbleMap', - type: 'chart', + type: 'mapChart', + tabName: '中国地图', label: '气泡地图', icon: 'iconzhongguoditu', options: { @@ -36,19 +37,19 @@ export const widgetAirbubbleMap = { list: [ { type: 'el-switch', - label: '标题', + label: '标题显示', name: 'isNoTitle', required: false, placeholder: '', - value: true + value: true, }, { type: 'el-input-text', - label: '标题', + label: '标题名', name: 'titleText', required: false, placeholder: '', - value: '' + value: '', }, { type: 'vue-color', @@ -56,7 +57,15 @@ export const widgetAirbubbleMap = { name: 'textColor', required: false, placeholder: '', - value: '#fff' + value: '#FFD700' + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'textFontSize', + required: false, + placeholder: '', + value: 20 }, { type: 'el-select', @@ -65,20 +74,25 @@ export const widgetAirbubbleMap = { required: false, placeholder: '', selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} + { code: 'normal', name: '正常' }, + { code: 'bold', name: '粗体' }, + { code: 'bolder', name: '特粗体' }, + { code: 'lighter', name: '细体' } ], value: 'normal' }, { - type: 'el-input-number', - label: '字体大小', - name: 'textFontSize', + type: 'el-select', + label: '字体风格', + name: 'textFontStyle', required: false, placeholder: '', - value: 20 + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'italic', name: 'italic斜体' }, + { code: 'oblique', name: 'oblique斜体' }, + ], + value: 'normal' }, { type: 'el-select', @@ -87,15 +101,15 @@ export const widgetAirbubbleMap = { required: false, placeholder: '', selectOptions: [ - {code: 'center', name: '居中'}, - {code: 'left', name: '左对齐'}, - {code: 'right', name: '右对齐'}, + { code: 'center', name: '居中' }, + { code: 'left', name: '左对齐' }, + { code: 'right', name: '右对齐' }, ], - value: 'left' + value: 'center' }, { type: 'el-input-text', - label: '副标题', + label: '副标题名', name: 'subText', required: false, placeholder: '', @@ -107,7 +121,15 @@ export const widgetAirbubbleMap = { name: 'subTextColor', required: false, placeholder: '', - value: '' + value: 'rgba(30, 144, 255, 1)' + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'subTextFontSize', + required: false, + placeholder: '', + value: 20 }, { type: 'el-select', @@ -116,20 +138,25 @@ export const widgetAirbubbleMap = { required: false, placeholder: '', selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} + { code: 'normal', name: '正常' }, + { code: 'bold', name: '粗体' }, + { code: 'bolder', name: '特粗体' }, + { code: 'lighter', name: '细体' } ], value: 'normal' }, { - type: 'el-input-number', - label: '字体大小', - name: 'subTextFontSize', + type: 'el-select', + label: '字体风格', + name: 'subTextFontStyle', required: false, placeholder: '', - value: 12 + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'italic', name: 'italic斜体' }, + { code: 'oblique', name: 'oblique斜体' }, + ], + value: 'normal' }, ], }, diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-line-map.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-line-map.js similarity index 69% rename from report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-line-map.js rename to report-ui/src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-line-map.js index fa701c3f876cd9af27811804c9f4167b5f0f1489..facf96cbd09f9d64ca0dcd2f662a78d6f3cc7f10 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-line-map.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-line-map.js @@ -8,7 +8,8 @@ */ export const widgetLineMap = { code: 'widgetLineMap', - type: 'chart', + type: 'mapChart', + tabName: '中国地图', label: '路线地图', icon: 'iconzhongguoditu', options: { @@ -35,19 +36,19 @@ export const widgetLineMap = { list: [ { type: 'el-switch', - label: '标题', + label: '标题显示', name: 'isNoTitle', required: false, placeholder: '', - value: true + value: true, }, { type: 'el-input-text', - label: '标题', + label: '标题名', name: 'titleText', required: false, placeholder: '', - value: '' + value: '', }, { type: 'vue-color', @@ -55,7 +56,15 @@ export const widgetLineMap = { name: 'textColor', required: false, placeholder: '', - value: '#fff' + value: '#FFD700' + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'textFontSize', + required: false, + placeholder: '', + value: 20 }, { type: 'el-select', @@ -64,20 +73,25 @@ export const widgetLineMap = { required: false, placeholder: '', selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} + { code: 'normal', name: '正常' }, + { code: 'bold', name: '粗体' }, + { code: 'bolder', name: '特粗体' }, + { code: 'lighter', name: '细体' } ], value: 'normal' }, { - type: 'el-input-number', - label: '字体大小', - name: 'textFontSize', + type: 'el-select', + label: '字体风格', + name: 'textFontStyle', required: false, placeholder: '', - value: 20 + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'italic', name: 'italic斜体' }, + { code: 'oblique', name: 'oblique斜体' }, + ], + value: 'normal' }, { type: 'el-select', @@ -86,15 +100,15 @@ export const widgetLineMap = { required: false, placeholder: '', selectOptions: [ - {code: 'center', name: '居中'}, - {code: 'left', name: '左对齐'}, - {code: 'right', name: '右对齐'}, + { code: 'center', name: '居中' }, + { code: 'left', name: '左对齐' }, + { code: 'right', name: '右对齐' }, ], value: 'center' }, { type: 'el-input-text', - label: '副标题', + label: '副标题名', name: 'subText', required: false, placeholder: '', @@ -106,7 +120,15 @@ export const widgetLineMap = { name: 'subTextColor', required: false, placeholder: '', - value: '' + value: 'rgba(30, 144, 255, 1)' + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'subTextFontSize', + required: false, + placeholder: '', + value: 20 }, { type: 'el-select', @@ -115,20 +137,25 @@ export const widgetLineMap = { required: false, placeholder: '', selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} + { code: 'normal', name: '正常' }, + { code: 'bold', name: '粗体' }, + { code: 'bolder', name: '特粗体' }, + { code: 'lighter', name: '细体' } ], value: 'normal' }, { - type: 'el-input-number', - label: '字体大小', - name: 'subTextFontSize', + type: 'el-select', + label: '字体风格', + name: 'subTextFontStyle', required: false, placeholder: '', - value: 12 + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'italic', name: 'italic斜体' }, + { code: 'oblique', name: 'oblique斜体' }, + ], + value: 'normal' }, ], }, @@ -161,7 +188,7 @@ export const widgetLineMap = { }, { type: 'el-input-number', - label: '文字大小', + label: '文字字号', name: 'sourceFontTextSize', required: false, placeholder: '', @@ -182,10 +209,10 @@ export const widgetLineMap = { required: false, placeholder: '', selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} + { code: 'normal', name: '正常' }, + { code: 'bold', name: '粗体' }, + { code: 'bolder', name: '特粗体' }, + { code: 'lighter', name: '细体' } ], value: 'normal' }, @@ -241,10 +268,10 @@ export const widgetLineMap = { required: false, placeholder: '', selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} + { code: 'normal', name: '正常' }, + { code: 'bold', name: '粗体' }, + { code: 'bolder', name: '特粗体' }, + { code: 'lighter', name: '细体' } ], value: 'normal' }, @@ -260,8 +287,8 @@ export const widgetLineMap = { required: false, placeholder: '', selectOptions: [ - {code: 'arrow', name: '箭头'}, - {code: 'plane', name: '飞机'}, + { code: 'arrow', name: '箭头' }, + { code: 'plane', name: '飞机' }, ], value: 'arrow' }, @@ -380,36 +407,36 @@ export const widgetLineMap = { relactiveDom: 'dataType', relactiveDomValue: 'staticData', value: [ - {source: '北京市', target: '上海市', value: 95}, - {source: '北京市', target: '广州市', value: 90}, - {source: '北京市', target: '大连市', value: 80}, - {source: '北京市', target: '南宁市', value: 70}, - {source: '北京市', target: '南昌市', value: 60}, - {source: '北京市', target: '拉萨市', value: 50}, - {source: '北京市', target: '长春市', value: 40}, - {source: '北京市', target: '包头市', value: 30}, - {source: '北京市', target: '重庆市', value: 20}, - {source: '北京市', target: '常州市', value: 10}, - {source: '上海市', target: '包头市', value: 95}, - {source: '上海市', target: '昆明市', value: 90}, - {source: '上海市', target: '广州市', value: 80}, - {source: '上海市', target: '郑州市', value: 70}, - {source: '上海市', target: '长春市', value: 60}, - {source: '上海市', target: '重庆市', value: 50}, - {source: '上海市', target: '长沙市', value: 40}, - {source: '上海市', target: '北京市', value: 30}, - {source: '上海市', target: '丹东市', value: 20}, - {source: '上海市', target: '大连市', value: 10}, - {source: '广州市', target: '福州市', value: 95}, - {source: '广州市', target: '太原市', value: 90}, - {source: '广州市', target: '长春市', value: 80}, - {source: '广州市', target: '重庆市', value: 70}, - {source: '广州市', target: '西安市', value: 60}, - {source: '广州市', target: '成都市', value: 50}, - {source: '广州市', target: '常州市', value: 40}, - {source: '广州市', target: '北京市', value: 30}, - {source: '广州市', target: '北海市', value: 20}, - {source: '广州市', target: '海口市', value: 10}, + { source: '北京市', target: '上海市', value: 95 }, + { source: '北京市', target: '广州市', value: 90 }, + { source: '北京市', target: '大连市', value: 80 }, + { source: '北京市', target: '南宁市', value: 70 }, + { source: '北京市', target: '南昌市', value: 60 }, + { source: '北京市', target: '拉萨市', value: 50 }, + { source: '北京市', target: '长春市', value: 40 }, + { source: '北京市', target: '包头市', value: 30 }, + { source: '北京市', target: '重庆市', value: 20 }, + { source: '北京市', target: '常州市', value: 10 }, + { source: '上海市', target: '包头市', value: 95 }, + { source: '上海市', target: '昆明市', value: 90 }, + { source: '上海市', target: '广州市', value: 80 }, + { source: '上海市', target: '郑州市', value: 70 }, + { source: '上海市', target: '长春市', value: 60 }, + { source: '上海市', target: '重庆市', value: 50 }, + { source: '上海市', target: '长沙市', value: 40 }, + { source: '上海市', target: '北京市', value: 30 }, + { source: '上海市', target: '丹东市', value: 20 }, + { source: '上海市', target: '大连市', value: 10 }, + { source: '广州市', target: '福州市', value: 95 }, + { source: '广州市', target: '太原市', value: 90 }, + { source: '广州市', target: '长春市', value: 80 }, + { source: '广州市', target: '重庆市', value: 70 }, + { source: '广州市', target: '西安市', value: 60 }, + { source: '广州市', target: '成都市', value: 50 }, + { source: '广州市', target: '常州市', value: 40 }, + { source: '广州市', target: '北京市', value: 30 }, + { source: '广州市', target: '北海市', value: 20 }, + { source: '广州市', target: '海口市', value: 10 }, ], }, { diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-gauge.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-gauge.js similarity index 97% rename from report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-gauge.js rename to report-ui/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-gauge.js index 473b68544efe74ffce45fc912a91e6c11637aa2d..6b75f6c5459b334cc5ebde0b5319477229b6c418 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-gauge.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-gauge.js @@ -8,7 +8,8 @@ */ export const widgetGauge = { code: 'widget-gauge', - type: 'chart', + type: 'percent', + tabName: '百分比', label: '仪表盘', icon: 'iconyibiaopan', options: { @@ -276,10 +277,10 @@ export const widgetGauge = { required: false, placeholder: '', selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} + { code: 'normal', name: '正常' }, + { code: 'bold', name: '粗体' }, + { code: 'bolder', name: '特粗体' }, + { code: 'lighter', name: '细体' } ], value: 'normal' }, @@ -325,7 +326,7 @@ export const widgetGauge = { relactiveDom: 'dataType', relactiveDomValue: 'staticData', value: [ - {"num":50} + { "num": 50 } ], }, { diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-pie-percentage.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-pie-percentage.js similarity index 99% rename from report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-pie-percentage.js rename to report-ui/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-pie-percentage.js index 2222170389133f3cd0e4064598814c45406b9c62..856733ce76089c18e16fe964d7c2d02b1895e31b 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-pie-percentage.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-pie-percentage.js @@ -8,7 +8,8 @@ */ export const widgetPiePercentage = { code: 'widgetPiePercentageChart', - type: 'chart', + type: 'percent', + tabName: '百分比', label: '百分比图', icon: 'iconbaifenbi', options: { diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-pie-nightingale.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-pie-nightingale.js new file mode 100644 index 0000000000000000000000000000000000000000..a025e8ac0cb357f0a0a512f0b90dd80a0c57f13f --- /dev/null +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-pie-nightingale.js @@ -0,0 +1,431 @@ +/* + * @Descripttion: 南丁格尔玫瑰图 json + * @version: + * @Author: qianlishi + * @Date: 2021-08-29 07:32:40 + * @LastEditors: qianlishi qianlishi@anji-plus.com + * @LastEditTime: 2022-11-07 15:41:37 + */ +export const widgetPieNightingale = { + code: 'WidgetPieNightingaleRoseArea', + type: 'pieChart', + tabName: '饼图', + label: '南丁格尔玫瑰图', + icon: 'iconnandinggeermeiguitu', + 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-select', + label: '饼图模式', + name: 'nightingleRosetype', + required: false, + placeholder: '', + selectOptions: [ + { code: 'area', name: '面积模式' }, + { code: 'radius', name: '半径模式' }, + ], + value: 'area' + }, + [ + { + 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-input-number', + label: '字体字号', + name: 'textFontSize', + required: false, + placeholder: '', + value: 20 + }, + { + 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-select', + label: '字体风格', + name: 'textFontStyle', + required: false, + placeholder: '', + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'italic', name: 'italic斜体' }, + { code: 'oblique', name: 'oblique斜体' }, + ], + value: 'normal' + }, + { + 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-number', + label: '字体字号', + name: 'subTextFontSize', + required: false, + placeholder: '', + value: 20 + }, + { + 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-select', + label: '字体风格', + name: 'subTextFontStyle', + required: false, + placeholder: '', + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'italic', name: 'italic斜体' }, + { code: 'oblique', name: 'oblique斜体' }, + ], + value: 'normal' + }, + ], + }, + { + name: '数值设定', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShow', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-switch', + label: '数值', + name: 'numberValue', + require: false, + placeholder: '', + value: true, + }, + { + type: 'el-switch', + label: '百分比', + name: 'percentage', + require: false, + placeholder: '', + value: false, + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'fontSize', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'subTextColor', + required: false, + placeholder: '', + value: '' + }, + { + 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: 'tipsColor', + required: false, + placeholder: '', + value: '#00FEFF' + }, + ], + }, + { + name: '图例操作', + list: [ + { + type: 'el-switch', + label: '图例', + name: 'isShowLegend', + required: false, + placeholder: '', + value: true, + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'legendColor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'legendFontSize', + required: false, + placeholder: '', + value: 16, + }, + { + type: 'el-input-number', + label: '图例宽度', + name: 'legendWidth', + 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: '#FF801C' }, { color: '#F5FF46' }, { color: '#00FE65' }, { color: '#00FEFF' }, { color: '#ffa800' }] + }, + ], + }, + ], + ], + // 数据 + 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": 1048, "name": "搜索引擎" }, { "value": 735, "name": "直接访问" }, { "value": 580, "name": "邮件营销" }, { "value": 484, "name": "联盟广告" }, { "value": 300, "name": "视频广告" }], + }, + { + type: 'dycustComponents', + label: '', + name: 'dynamicData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + chartType: 'widget-piechart', + dictKey: 'PIE_PROPERTIES', + relactiveDomValue: 'dynamicData', + value: '', + }, + ], + // 坐标 + position: [ + { + type: 'el-input-number', + label: '左边距', + name: 'left', + required: false, + placeholder: '', + value: 0, + }, + { + type: 'el-input-number', + label: '上边距', + name: 'top', + required: false, + placeholder: '', + value: 0, + }, + { + type: 'el-input-number', + label: '宽度', + name: 'width', + required: false, + placeholder: '该容器在1920px大屏中的宽度', + value: 400, + }, + { + type: 'el-input-number', + label: '高度', + name: 'height', + required: false, + placeholder: '该容器在1080px大屏中的高度', + value: 200, + }, + ], + } +} diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-piechart.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-piechart.js new file mode 100644 index 0000000000000000000000000000000000000000..348f8910676876c1148963f3fb22813b2098d577 --- /dev/null +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-piechart.js @@ -0,0 +1,431 @@ +/* + * @Descripttion: 饼图 + * @version: + * @Author: qianlishi + * @Date: 2021-08-29 07:28:20 + * @LastEditors: qianlishi + * @LastEditTime: 2021-09-28 14:19:19 + */ +export const widgetPiechart = { + code: 'widget-piechart', + type: 'pieChart', + tabName: '饼图', + 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: '' + }, + { + type: 'el-select', + label: '饼图样式', + name: 'piechartStyle', + required: false, + placeholder: '', + selectOptions: [ + { code: 'shixin', name: '实心饼图' }, + { code: 'kongxin', name: '空心饼图' }, + ], + value: 'shixin' + }, + [ + { + 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-input-number', + label: '字体字号', + name: 'textFontSize', + required: false, + placeholder: '', + value: 20 + }, + { + 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-select', + label: '字体风格', + name: 'textFontStyle', + required: false, + placeholder: '', + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'italic', name: 'italic斜体' }, + { code: 'oblique', name: 'oblique斜体' }, + ], + value: 'normal' + }, + { + 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-number', + label: '字体字号', + name: 'subTextFontSize', + required: false, + placeholder: '', + value: 20 + }, + { + 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-select', + label: '字体风格', + name: 'subTextFontStyle', + required: false, + placeholder: '', + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'italic', name: 'italic斜体' }, + { code: 'oblique', name: 'oblique斜体' }, + ], + value: 'normal' + }, + ], + }, + { + name: '数值设定', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShow', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-switch', + label: '数值', + name: 'numberValue', + require: false, + placeholder: '', + value: true, + }, + { + type: 'el-switch', + label: '百分比', + name: 'percentage', + require: 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: '' + }, + { + 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: '', + value: 16 + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'tipsColor', + required: false, + placeholder: '', + value: '#00FEFF' + }, + ], + }, + { + name: '图例操作', + list: [ + { + type: 'el-switch', + label: '图例', + name: 'isShowLegend', + required: false, + placeholder: '', + value: true, + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'legendColor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-text', + label: '字体字号', + name: 'legendFontSize', + required: false, + placeholder: '', + value: 16, + }, + { + type: 'el-input-number', + label: '图例宽度', + name: 'legendWidth', + 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: '#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": 1048, "name": "搜索引擎" }, { "value": 735, "name": "直接访问" }, { "value": 580, "name": "邮件营销" }, { "value": 484, "name": "联盟广告" }, { "value": 300, "name": "视频广告" }] + }, + { + type: 'dycustComponents', + label: '', + name: 'dynamicData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + chartType: 'widget-piechart', + 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: 200, + }, + ], + } +} diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/radarCharts/widget-radar.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/radarCharts/widget-radar.js new file mode 100644 index 0000000000000000000000000000000000000000..6bb72b29403dc4b334aeb88f743c02692190493c --- /dev/null +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/radarCharts/widget-radar.js @@ -0,0 +1,578 @@ +/** + * @Author: foming + */ +export const widgetRadar = { + code: 'widget-radar', + type: 'radarCharts', + tabName: '雷达图', + label: '雷达图', + icon: 'iconleidatu', + options: { + setup: [ + { + type: 'el-input-text', + label: '图层名称', + name: 'layerName', + required: false, + placeholder: '', + value: '雷达图', + }, + { + type: 'vue-color', + label: '背景颜色', + name: 'background', + required: false, + placeholder: '', + value: '' + }, + [ + { + name: '标题设置', + list: [ + { + type: 'el-switch', + label: '标题显示', + name: 'isNoTitle', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '标题名', + name: 'titleText', + required: false, + placeholder: '', + value: '', + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'textColor', + required: false, + placeholder: '', + value: '#FFD700' + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'textFontSize', + required: false, + placeholder: '', + value: 20 + }, + { + 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-select', + label: '字体风格', + name: 'textFontStyle', + required: false, + placeholder: '', + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'italic', name: 'italic斜体' }, + { code: 'oblique', name: 'oblique斜体' }, + ], + value: 'normal' + }, + { + 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-number', + label: '字体字号', + name: 'subTextFontSize', + required: false, + placeholder: '', + value: 20 + }, + { + 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-select', + label: '字体风格', + name: 'subTextFontStyle', + required: false, + placeholder: '', + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'italic', name: 'italic斜体' }, + { code: 'oblique', name: 'oblique斜体' }, + ], + value: 'normal' + }, + ], + }, + { + name: '雷达设置', + list: [ + { + type: 'el-select', + label: '雷达样式', + name: 'radarShape', + required: false, + placeholder: '', + selectOptions: [ + {code: 'line', name: '线型'}, + {code: 'circle', name: '圆型'}, + ], + value: 'line' + }, + { + type: 'el-input-number', + label: '均分数量', + name: 'splitNumber', + require: false, + placeholder: '', + value: 5, + }, + { + type: 'el-switch', + label: '坐标轴显示', + name: 'axisLineShow', + required: false, + placeholder: '', + value: true + }, + { + type: 'vue-color', + label: '坐标轴颜色', + name: 'axisLineColor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-slider', + label: '坐标轴透明度', + name: 'axisLineOpacity', + required: false, + placeholder: '', + value: 50 + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'splitLineShow', + required: false, + placeholder: '', + value: true + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-slider', + label: '分割线透明度', + name: 'splitLineOpacity', + required: false, + placeholder: '', + value: 50 + }, + ], + }, + { + name: '顶点设置', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'axisNameShow', + required: false, + placeholder: '', + value: true + }, + { + type: 'el-input-number', + label: '名称大小', + name: 'axisNameFontSize', + required: false, + placeholder: '', + value: 12, + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'axisNameColor', + required: false, + placeholder: '', + value: '#87cefa', + }, + { + type: 'el-select', + label: '字体粗细', + name: 'axisNamFontWeight', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + { + type: 'el-select', + label: '字体风格', + name: 'axisNamFontStyle', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, + ], + value: 'normal' + }, + ], + }, + { + name: '图例操作', + list: [ + { + type: 'el-switch', + label: '图例显示', + name: 'isShowLegend', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '图例名称', + name: 'legendName', + required: false, + placeholder: '多值以' | '隔开', + value: '' + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'legendColor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'legendFontSize', + required: false, + placeholder: '', + value: 12, + }, + { + type: 'el-input-number', + label: '图例宽度', + name: 'legendWidth', + required: false, + placeholder: '', + value: 12, + }, + { + 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: 'el-switch', + label: '显示', + name: 'isShow', + required: false, + placeholder: '', + value: false + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'fontSize', + required: false, + placeholder: '', + value: 10 + }, + { + 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: 'symbolSize', + required: false, + placeholder: '', + value: 5 + }, + { + type: 'el-select', + label: '线型效果', + name: 'lineType', + required: false, + placeholder: '', + selectOptions: [ + {code: 'solid', name: '实线'}, + {code: 'dashed', name: '线型虚线'}, + {code: 'dotted', name: '点型虚线'}, + ], + value: 'solid' + }, + { + type: 'el-slider', + label: '透明度', + name: 'opacity', + required: false, + placeholder: '', + value: 50 + }, + ], + }, + { + name: '提示语设置', + list: [ + { + type: 'el-input-number', + label: '字体字号', + name: 'tipsFontSize', + required: false, + placeholder: '', + value: 16 + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'tipsColor', + required: false, + placeholder: '', + value: '#00FEFF' + }, + ], + }, + { + name: '自定义配色', + list: [ + { + type: 'customColor', + label: '', + name: 'customColor', + required: false, + value: [{color: '#ff7f50'}, {color: '#87cefa'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}], + }, + ], + }, + ], + { + type: 'dynamic-add-radar', + label: '', + name: 'dynamicAddRadar', + required: false, + placeholder: '', + value: [ + {name: 'SA', key: 'Sales', max: 6500}, + {name: 'Admin', key: 'Admin', max: 16000}, + {name: 'Information', key: 'Information', max: 30000}, + {name: 'Customer', key: 'Customer', max: 38000}, + {name: 'Develop', key: 'Develop', max: 52000}, + ] + } + ], + 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: [ + {name: '2016', Sales: 4200, Admin: 3000, Information: 20000, Customer: 35000, Develop: 50000}, + {name: '2017', Sales: 5000, Admin: 14000, Information: 28000, Customer: 26000, Develop: 42000}, + ], + }, + { + type: 'dycustComponents', + label: '', + name: 'dynamicData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + relactiveDomValue: 'dynamicData', + chartType: 'widget-radar', + dictKey: 'RADAR_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: 300, + }, + ] + } +} diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-href.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-href.js new file mode 100644 index 0000000000000000000000000000000000000000..905aeeeb10eab76aa0cd1366d4426ff8da807e05 --- /dev/null +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-href.js @@ -0,0 +1,158 @@ +/* + * @Descripttion: 超链接文本 + * @version: + * @Author: qianlishi + * @Date: 2021-08-29 07:03:58 + * @LastEditors: qianlishi + * @LastEditTime: 2021-09-28 14:14:21 + */ +export const widgetHref = { + code: 'widget-href', + type: 'text', + tabName: '文本栏', + label: '超链接', + icon: 'iconchaolianjie', + options: { + // 配置 + setup: [ + { + type: 'el-input-text', + label: '图层名称', + name: 'layerName', + required: false, + placeholder: '', + value: '超链接', + }, + { + type: 'el-input-text', + label: '文本内容', + name: 'text', + required: false, + placeholder: '', + value: '超链接', + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'fontSize', + required: false, + placeholder: '', + value: '26', + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'color', + required: false, + placeholder: '', + value: '#FAD400', + }, + { + type: 'el-input-number', + label: '字体间距', + name: 'letterSpacing', + required: false, + placeholder: '', + value: '0', + }, + { + type: 'vue-color', + label: '字体背景', + name: 'background', + required: false, + placeholder: '', + value: 'rgba(115,170,229,.5)', + }, + { + 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-select', + label: '对齐方式', + name: 'textAlign', + required: false, + placeholder: '', + selectOptions: [ + { code: 'center', name: '居中' }, + { code: 'left', name: '左对齐' }, + { code: 'right', name: '右对齐' }, + ], + value: 'center' + }, + { + type: 'el-radio-group', + label: '跳转方式', + name: 'jumpMode', + required: false, + placeholder: '', + selectOptions: [ + { + code: 'self', + name: '本窗口', + }, + { + code: 'other', + name: '新窗口', + }, + ], + value: 'self', + }, + { + type: 'el-input-text', + label: '超链地址', + name: 'linkAdress', + required: false, + placeholder: '', + value: 'http://www.baidu.com', + }, + ], + // 数据 + data: [], + // 坐标 + 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: 100, + }, + { + type: 'el-input-number', + label: '高度', + name: 'height', + required: false, + placeholder: '该容器在1080px大屏中的高度', + value: 40, + }, + ], + } +} diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-iframe.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-iframe.js new file mode 100644 index 0000000000000000000000000000000000000000..e56cc308ac38ed51951303bb85ae30761a4eb698 --- /dev/null +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-iframe.js @@ -0,0 +1,73 @@ +/* + * @Descripttion: iframe json + * @version: + * @Author: qianlishi + * @Date: 2021-08-29 07:17:55 + * @LastEditors: qianlishi + * @LastEditTime: 2021-09-28 14:14:39 + */ +export const widgetIframe = { + code: 'widget-iframe', + type: 'text', + tabName: '文本栏', + label: '内联框架', + icon: 'iconkuangjia', + options: { + // 配置 + setup: [ + { + type: 'el-input-text', + label: '图层名称', + name: 'layerName', + required: false, + placeholder: '', + value: 'iframe', + }, + { + type: 'el-input-text', + label: '地址', + name: 'iframeAdress', + required: false, + placeholder: '', + value: 'https://ajreport.beliefteam.cn/index.html', + }, + ], + // 数据 + data: [], + // 坐标 + 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: 300, + }, + { + type: 'el-input-number', + label: '高度', + name: 'height', + required: false, + placeholder: '该容器在1080px大屏中的高度', + value: 200, + }, + ], + } +} diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-image.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-image.js similarity index 98% rename from report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-image.js rename to report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-image.js index 37fff15beeab27f13d6922d8b02aadea3ac6cff5..b09132b91780daa93659fdc441a41b3b738565ab 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-image.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-image.js @@ -8,7 +8,8 @@ */ export const widgetImage = { code: 'widget-image', - type: 'html', + type: 'text', + tabName: '文本栏', label: '图片', icon: 'icontupian', options: { diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-marquee.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-marquee.js similarity index 97% rename from report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-marquee.js rename to report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-marquee.js index 151ed627be91314670b545fe671c5a6d4a840512..bbaed1931c75d225ae1a04b7e7a2bcdb38c67fc5 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-marquee.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-marquee.js @@ -1,6 +1,6 @@ /* * @Descripttion: 滚动文件json - * @version: + * @version: * @Author: qianlishi * @Date: 2021-08-29 07:00:00 * @LastEditors: qianlishi @@ -8,7 +8,8 @@ */ export const widgetMarquee = { code: 'widget-marquee', - type: 'html', + type: 'text', + tabName: '文本栏', label: '滚动文本', icon: 'iconhengxiangwenzi', options: { @@ -32,7 +33,7 @@ export const widgetMarquee = { }, { type: 'el-input-number', - label: '字体大小', + label: '字体字号', name: 'fontSize', required: false, placeholder: '', @@ -173,4 +174,4 @@ export const widgetMarquee = { }, ], } - } \ No newline at end of file + } diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-slider.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-slider.js similarity index 97% rename from report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-slider.js rename to report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-slider.js index 05fb6e13c6b1b71e49d72ace40f6ed78383052ec..0e325bdbaac317b8a7a9be0655115df5a1a1082b 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-slider.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-slider.js @@ -8,7 +8,8 @@ */ export const widgetSliders = { code: 'widget-slider', - type: 'html', + type: 'text', + tabName: '文本栏', label: '轮播图片', icon: 'slider', options: { diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-table.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-table.js similarity index 98% rename from report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-table.js rename to report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-table.js index ee0cb1a7989cd1481a898df65c86975af1f022e8..ea67c25cf87ef1df61c69b4d02a7eb641fca35da 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-table.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-table.js @@ -8,7 +8,8 @@ */ export const widgetTable = { code: 'widget-table', - type: 'html', + type: 'text', + tabName: '文本栏', label: '表格', icon: 'iconbiaoge', options: { @@ -36,7 +37,7 @@ export const widgetTable = { }, { type: 'el-input-number', - label: '字体大小', + label: '字体字号', name: 'fontSize', required: false, placeholder: '', @@ -262,7 +263,7 @@ export const widgetTable = { relactiveDom: 'dataType', relactiveDomValue: 'dynamicData', chartType: 'widget-table', - dictKey: 'TEXT_PROPERTIES', //表格的暂不起作用 + dictKey: 'TEXT_PROPERTIES', value: '', }, ], diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-text.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-text.js similarity index 97% rename from report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-text.js rename to report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-text.js index 4431e615c44cb3ef06f1b74e2c292a245bc5cb11..74bba57ecac0ca73a1331ee97c319721eac1e5a8 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-text.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-text.js @@ -1,6 +1,6 @@ /* * @Descripttion: 文本json文件 - * @version: + * @version: * @Author: qianlishi * @Date: 2021-08-29 06:52:13 * @LastEditors: qianlishi @@ -8,7 +8,8 @@ */ export const widgetText = { code: 'widget-text', - type: 'html', + type: 'text', + tabName: '文本栏', label: '文本', icon: 'iconziyuan', options: { @@ -32,7 +33,7 @@ export const widgetText = { }, { type: 'el-input-number', - label: '字体大小', + label: '字体字号', name: 'fontSize', required: false, placeholder: '', @@ -179,4 +180,4 @@ export const widgetText = { }, ], } - } \ No newline at end of file + } diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-time.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-time.js similarity index 98% rename from report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-time.js rename to report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-time.js index 0958d7d526412666512f91a6133275d86a59b1ae..9779698f4dd775e78d465bafb0f5ba339d01d185 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-time.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-time.js @@ -8,7 +8,8 @@ */ export const widgetTime = { code: 'widget-time', - type: 'html', + type: 'text', + tabName: '文本栏', label: '当前时间', icon: 'iconshijian', options: { @@ -52,7 +53,7 @@ export const widgetTime = { }, { type: 'el-input-number', - label: '字体大小', + label: '字体字号', name: 'fontSize', required: false, placeholder: '', diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-video.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-video.js new file mode 100644 index 0000000000000000000000000000000000000000..c8b8de33793872ff79e54f9fdc00a8b141666bf7 --- /dev/null +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-video.js @@ -0,0 +1,73 @@ +/* + * @Descripttion: 视频json + * @version: + * @Author: qianlishi + * @Date: 2021-08-29 07:10:22 + * @LastEditors: qianlishi qianlishi@anji-plus.com + * @LastEditTime: 2022-11-07 15:42:46 + */ +export const widgetVideo = { + code: 'widget-video', + type: 'text', + tabName: '文本栏', + label: '视频', + icon: 'iconshipin', + options: { + // 配置 + setup: [ + { + type: 'el-input-text', + label: '图层名称', + name: 'layerName', + required: false, + placeholder: '', + value: 'video', + }, + { + type: 'el-input-text', + label: '地址', + name: 'videoAdress', + required: false, + placeholder: '', + value: 'https://www.w3school.com.cn//i/movie.ogg', + }, + ], + // 数据 + data: [], + // 坐标 + 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: 300, + }, + { + type: 'el-input-number', + label: '高度', + name: 'height', + required: false, + placeholder: '该容器在1080px大屏中的高度', + value: 200, + }, + ], + } +} \ No newline at end of file diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-bar-compare.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-bar-compare.js deleted file mode 100644 index 1907da7bbf3f3bee7835d634a87b16ccc10d812c..0000000000000000000000000000000000000000 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-bar-compare.js +++ /dev/null @@ -1,658 +0,0 @@ -/* - * @Descripttion: 柱状对比图 json - * @version: - * @Author: qianlishi - * @Date: 2021-08-29 07:39:35 - * @LastEditors: qianlishi - * @LastEditTime: 2021-09-28 14:09:58 - */ -export const widgetBarCompare = { - code: 'widgetBarCompareChart', - type: 'chart', - label: '柱状对比图', - icon: 'iconduibitupu', - 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-slider', - label: '最大宽度', - name: 'maxWidth', - required: false, - placeholder: '', - value: 15, - }, - { - 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: '#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' - }, - ], - }, - { - name: '图例操作', - list: [ - { - type: 'el-switch', - label: '图例显示', - name: 'isShowLegend', - required: false, - placeholder: '', - value: true, - }, - { - type: 'el-input-text', - label: '图例名称', - name: 'legendName', - required: false, - placeholder: '多值以'|'隔开', - value: '' - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'lengedColor', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '字体字号', - name: 'lengedFontSize', - required: false, - placeholder: '', - value: 12, - }, - { - type: 'el-input-number', - label: '图例宽度', - name: 'lengedWidth', - required: false, - placeholder: '', - value: 12, - }, - { - 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: '左X轴设置', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'hideXLeft', - required: false, - placeholder: '', - value: true, - }, - { - type: 'el-input-number', - label: '数值间隔', - name: 'splitNumberLeft', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '数值颜色', - name: 'XcolorLeft', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '数值字号', - name: 'fontSizeXLeft', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'el-switch', - label: '刻度线', - name: 'tickLineLeft', - require: false, - placeholder: '', - value: false, - }, - { - type: 'el-switch', - label: 'X轴线', - name: 'xLineLeft', - require: false, - placeholder: '', - value: false, - }, - { - type: 'vue-color', - label: '轴颜色', - name: 'lineColorXLeft', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-switch', - label: '竖分割线', - name: 'SplitLineLeft', - require: false, - placeholder: '', - value: false, - }, - { - type: 'vue-color', - label: '分割线颜色', - name: 'SplitLineColorLeft', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '分割线宽度', - name: 'SplitLinefontSizeLeft', - required: false, - placeholder: '', - value: 1, - }, - { - type: 'el-switch', - label: '边框线', - name: 'frameLineLeft', - require: false, - placeholder: '', - value: false, - }, - ], - }, - { - name: '右X轴设置', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'hideXRight', - required: false, - placeholder: '', - value: true, - }, - { - type: 'el-input-number', - label: '数值间隔', - name: 'splitNumberRight', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '数值颜色', - name: 'XcolorRight', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '数值字号', - name: 'fontSizeXRight', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'el-switch', - label: '刻度线', - name: 'tickLineRight', - require: false, - placeholder: '', - value: false, - }, - { - type: 'el-switch', - label: 'X轴线', - name: 'xLineRight', - require: false, - placeholder: '', - value: false, - }, - { - type: 'vue-color', - label: '轴颜色', - name: 'lineColorXRight', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-switch', - label: '竖分割线', - name: 'SplitLineRight', - require: false, - placeholder: '', - value: false, - }, - { - type: 'vue-color', - label: '分割线颜色', - name: 'SplitLineColorRight', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '分割线宽度', - name: 'SplitLinefontSizeRight', - required: false, - placeholder: '', - value: 1, - }, - { - type: 'el-switch', - label: '边框线', - name: 'frameLineRight', - require: false, - placeholder: '', - value: false, - }, - ], - }, - { - name: 'Y轴设置', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'hideY', - required: false, - placeholder: '', - value: true, - }, - { - 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-select', - label: '数值对齐', - name: 'textAlign', - required: false, - placeholder: '', - selectOptions: [ - {code: 'center', name: '居中'}, - {code: 'left', name: '左对齐'}, - {code: 'right', name: '右对齐'}, - ], - value: 'center' - }, - { - type: 'el-switch', - label: '刻度线', - name: 'tickLineY', - require: false, - placeholder: '', - value: false, - }, - { - type: 'el-switch', - label: 'Y轴线', - name: 'lineY', - require: false, - placeholder: '', - value: false, - }, - { - type: 'vue-color', - label: '轴颜色', - name: 'lineColorY', - required: false, - placeholder: '', - value: '#fff', - }, - ], - }, - { - name: '数值设定', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'isShow', - required: false, - placeholder: '', - value: true - }, - { - 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: '', - }, - ], - }, - { - name: '坐标轴边距设置', - list: [ - { - type: 'el-slider', - label: '左右边距(像素)', - name: 'marginLeftRight', - required: false, - placeholder: '', - value: 10, - }, - { - type: 'el-slider', - label: '顶边距(像素)', - name: 'marginTop', - required: false, - placeholder: '', - value: 40, - }, - { - type: 'el-slider', - label: '底边距(像素)', - name: 'marginBottom', - required: false, - placeholder: '', - value: 10, - }, - ], - }, - { - name: '自定义配色', - list: [ - { - type: 'customColor', - label: '', - name: 'customColor', - required: false, - value: [{color: '#36c5e7'}, {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":"07-25","name":"success","data":"2"}, - {"axis":"07-25","name":"fail","data":"10"}, - {"axis":"07-26","name":"success","data":"5"}, - {"axis":"07-26","name":"fail","data":"20"}, - {"axis":"07-27","name":"success","data":"15"}, - {"axis":"07-27","name":"fail","data":"30"}, - {"axis":"07-28","name":"success","data":"10"}, - {"axis":"07-28","name":"fail","data":"12"}, - {"axis":"07-29","name":"success","data":"9"}, - {"axis":"07-29","name":"fail","data":"16"}, - ], - }, - { - type: 'dycustComponents', - label: '', - name: 'dynamicData', - required: false, - placeholder: '', - relactiveDom: 'dataType', - relactiveDomValue: 'dynamicData', - chartType: 'widget-stackchart', - dictKey: 'STACK_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: 500, - }, - { - type: 'el-input-number', - label: '高度', - name: 'height', - required: false, - placeholder: '该容器在1080px大屏中的高度', - value: 250, - }, - ], - } - } diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-bar-stack.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-bar-stack.js deleted file mode 100644 index f9f0c3bd07a8de85bf09965f2d0c1a2495ea772f..0000000000000000000000000000000000000000 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-bar-stack.js +++ /dev/null @@ -1,658 +0,0 @@ -/* - * @Descripttion: 柱状堆叠图 - * @version: - * @Author: qianlishi - * @Date: 2021-08-29 07:37:09 - * @LastEditors: qianlishi - * @LastEditTime: 2021-09-28 14:11:09 - */ -export const widgetBarStack = { - code: 'widgetBarStackChart', - type: 'chart', - label: '柱状堆叠图', - icon: 'iconbianzu23', - 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-select', - label: '堆叠样式', - name: 'stackStyle', - required: false, - placeholder: '', - selectOptions: [ - {code: 'leftRight', name: '左右堆叠'}, - {code: 'upDown', name: '上下堆叠'}, - ], - value: 'leftRight' - }, - [ - { - name: '柱体设置', - list: [ - { - type: 'el-slider', - label: '最大宽度', - name: 'maxWidth', - required: false, - placeholder: '', - value: 20, - }, - { - 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: '#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 - }, - ], - }, - { - name: '图例操作', - list: [ - { - type: 'el-switch', - label: '图例显示', - name: 'isShowLegend', - required: false, - placeholder: '', - value: true, - }, - { - type: 'el-input-text', - label: '图例名称', - name: 'legendName', - required: false, - placeholder: '多值以'|'隔开', - value: '' - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'lengedColor', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '字体字号', - name: 'lengedFontSize', - required: false, - placeholder: '', - value: 12, - }, - { - type: 'el-input-number', - label: '图例宽度', - name: 'lengedWidth', - required: false, - placeholder: '', - value: 12, - }, - { - 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: 'X轴设置', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'hideX', - required: false, - placeholder: '', - value: true, - }, - { - type: 'el-input-text', - label: 'X轴别名', - name: 'xName', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '别名颜色', - name: 'xNameColor', - required: false, - placeholder: '', - value: '#fff' - }, - { - type: 'el-input-number', - label: '别名字号', - name: 'xNameFontSize', - required: false, - placeholder: '', - value: 14 - }, - { - type: 'el-switch', - label: '轴反转', - name: 'reversalX', - required: false, - placeholder: '', - value: false - }, - { - type: 'el-slider', - label: '文字角度', - name: 'textAngleX', - required: false, - placeholder: '', - value: 0 - }, - { - type: 'el-input-number', - label: '文字间隔', - name: 'textInterval', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '文字颜色', - name: 'Xcolor', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '文字字号', - name: 'fontSizeX', - required: false, - placeholder: '', - value: 14, - }, - { - 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: 'Y轴别名', - 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: 'el-switch', - label: '轴反转', - name: 'reversalY', - required: false, - placeholder: '', - value: false - }, - { - type: 'el-slider', - label: '文字角度', - name: 'textAngleY', - required: false, - placeholder: '', - value: 0 - }, - { - type: 'vue-color', - label: '文字颜色', - name: 'colorY', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '文字字号', - name: 'fontSizeY', - required: false, - placeholder: '', - value: 14, - }, - { - 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: 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: '', - }, - ], - }, - { - 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: '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":"2021-07-25","name":"A","data":"12"}, - {"axis":"2021-07-25","name":"B","data":"20"}, - {"axis":"2021-07-26","name":"B","data":"5"}, - {"axis":"2021-07-27","name":"A","data":"15"}, - {"axis":"2021-07-27","name":"B","data":"30"}, - ], - }, - { - type: 'dycustComponents', - label: '', - name: 'dynamicData', - required: false, - placeholder: '', - relactiveDom: 'dataType', - relactiveDomValue: 'dynamicData', - chartType: 'widget-stackchart', - dictKey: 'STACK_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: 500, - }, - { - type: 'el-input-number', - label: '高度', - name: 'height', - required: false, - placeholder: '该容器在1080px大屏中的高度', - value: 250, - }, - ], - } - } diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-href.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-href.js deleted file mode 100644 index dc16d17fde6da9025caa8b95122d24ead9fe359f..0000000000000000000000000000000000000000 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-href.js +++ /dev/null @@ -1,157 +0,0 @@ -/* - * @Descripttion: 超链接文本 - * @version: - * @Author: qianlishi - * @Date: 2021-08-29 07:03:58 - * @LastEditors: qianlishi - * @LastEditTime: 2021-09-28 14:14:21 - */ -export const widgetHref = { - code: 'widget-href', - type: 'html', - label: '超链接', - icon: 'iconchaolianjie', - options: { - // 配置 - setup: [ - { - type: 'el-input-text', - label: '图层名称', - name: 'layerName', - required: false, - placeholder: '', - value: '超链接', - }, - { - type: 'el-input-text', - label: '文本内容', - name: 'text', - required: false, - placeholder: '', - value: '超链接', - }, - { - type: 'el-input-number', - label: '字体大小', - name: 'fontSize', - required: false, - placeholder: '', - value: '26', - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'color', - required: false, - placeholder: '', - value: '#FAD400', - }, - { - type: 'el-input-number', - label: '字体间距', - name: 'letterSpacing', - required: false, - placeholder: '', - value: '0', - }, - { - type: 'vue-color', - label: '字体背景', - name: 'background', - required: false, - placeholder: '', - value: 'rgba(115,170,229,.5)', - }, - { - 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-select', - label: '对齐方式', - name: 'textAlign', - required: false, - placeholder: '', - selectOptions: [ - {code: 'center', name: '居中'}, - {code: 'left', name: '左对齐'}, - {code: 'right', name: '右对齐'}, - ], - value: 'center' - }, - { - type: 'el-radio-group', - label: '跳转方式', - name: 'jumpMode', - required: false, - placeholder: '', - selectOptions: [ - { - code: 'self', - name: '本窗口', - }, - { - code: 'other', - name: '新窗口', - }, - ], - value: 'self', - }, - { - type: 'el-input-text', - label: '超链地址', - name: 'linkAdress', - required: false, - placeholder: '', - value: 'http://www.baidu.com', - }, - ], - // 数据 - data: [], - // 坐标 - 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: 100, - }, - { - type: 'el-input-number', - label: '高度', - name: 'height', - required: false, - placeholder: '该容器在1080px大屏中的高度', - value: 40, - }, - ], - } - } diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-iframe.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-iframe.js deleted file mode 100644 index 8aa78f08b85cbc57c17d02ab0d7804b292f47562..0000000000000000000000000000000000000000 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-iframe.js +++ /dev/null @@ -1,72 +0,0 @@ -/* - * @Descripttion: iframe json - * @version: - * @Author: qianlishi - * @Date: 2021-08-29 07:17:55 - * @LastEditors: qianlishi - * @LastEditTime: 2021-09-28 14:14:39 - */ -export const widgetIframe = { - code: 'widget-iframe', - type: 'html', - label: '内联框架', - icon: 'iconkuangjia', - options: { - // 配置 - setup: [ - { - type: 'el-input-text', - label: '图层名称', - name: 'layerName', - required: false, - placeholder: '', - value: 'iframe', - }, - { - type: 'el-input-text', - label: '地址', - name: 'iframeAdress', - required: false, - placeholder: '', - value: 'https://ajreport.beliefteam.cn/index.html', - }, - ], - // 数据 - data: [], - // 坐标 - 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: 300, - }, - { - type: 'el-input-number', - label: '高度', - name: 'height', - required: false, - placeholder: '该容器在1080px大屏中的高度', - value: 200, - }, - ], - } - } diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-line-stack.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-line-stack.js deleted file mode 100644 index b0d5e10f10210f8843d9fce5d118b27a184cb56a..0000000000000000000000000000000000000000 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-line-stack.js +++ /dev/null @@ -1,678 +0,0 @@ -/* - * @Descripttion: 折线堆叠图 json - * @version: - * @Author: qianlishi - * @Date: 2021-08-29 07:38:17 - * @LastEditors: qianlishi - * @LastEditTime: 2021-09-28 14:16:28 - */ -export const widgetLineStack = { - code: 'widgetLineStackChart', - type: 'chart', - label: '折线堆叠图', - icon: 'iconduidietu', - 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: '' - }, - [ - { - 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: 4, - }, - ], - }, - { - 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-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: '图例操作', - list: [ - { - type: 'el-switch', - label: '图例显示', - name: 'isShowLegend', - required: false, - placeholder: '', - value: true, - }, - { - type: 'el-input-text', - label: '图例名称', - name: 'legendName', - required: false, - placeholder: '多值以'|'隔开', - value: '' - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'lengedColor', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '字体字号', - name: 'lengedFontSize', - required: false, - placeholder: '', - value: 12, - }, - { - type: 'el-input-number', - label: '图例宽度', - name: 'lengedWidth', - required: false, - placeholder: '', - value: 12, - }, - { - 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: 'X轴设置', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'hideX', - required: false, - placeholder: '', - value: true, - }, - { - type: 'el-input-text', - label: 'X轴别名', - name: 'xName', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '别名颜色', - name: 'xNameColor', - required: false, - placeholder: '', - value: '#fff' - }, - { - type: 'el-input-number', - label: '别名字号', - name: 'xNameFontSize', - required: false, - placeholder: '', - value: 14 - }, - { - type: 'el-switch', - label: '轴反转', - name: 'reversalX', - required: false, - placeholder: '', - value: false - }, - { - type: 'el-slider', - label: '文字角度', - name: 'textAngleX', - required: false, - placeholder: '', - value: 0 - }, - { - type: 'el-input-number', - label: '文字间隔', - name: 'textInterval', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '文字颜色', - name: 'Xcolor', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '文字字号', - name: 'fontSizeX', - required: false, - placeholder: '', - value: 14, - }, - { - 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: 'Y轴别名', - 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: 'el-switch', - label: '轴反转', - name: 'reversalY', - required: false, - placeholder: '', - value: false - }, - { - type: 'el-slider', - label: '文字角度', - name: 'textAngleY', - required: false, - placeholder: '', - value: 0 - }, - { - type: 'vue-color', - label: '文字颜色', - name: 'colorY', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '文字字号', - name: 'fontSizeY', - required: false, - placeholder: '', - value: 14, - }, - { - 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: 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: '', - }, - ], - }, - { - 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: '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":"2021-07-25","name":"A","data":"12"}, - {"axis":"2021-07-25","name":"B","data":"20"}, - {"axis":"2021-07-26","name":"B","data":"5"}, - {"axis":"2021-07-27","name":"A","data":"15"}, - {"axis":"2021-07-27","name":"B","data":"30"}, - ], - }, - { - type: 'dycustComponents', - label: '', - name: 'dynamicData', - required: false, - placeholder: '', - relactiveDom: 'dataType', - relactiveDomValue: 'dynamicData', - chartType: 'widget-stackchart', - dictKey: 'STACK_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: 500, - }, - { - type: 'el-input-number', - label: '高度', - name: 'height', - required: false, - placeholder: '该容器在1080px大屏中的高度', - value: 250, - }, - ], - } - } diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-pie-nightingale.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-pie-nightingale.js deleted file mode 100644 index 25035afc4f1af7662f51b930b0d67e8696ae03df..0000000000000000000000000000000000000000 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-pie-nightingale.js +++ /dev/null @@ -1,403 +0,0 @@ -/* - * @Descripttion: 南丁格尔玫瑰图 json - * @version: - * @Author: qianlishi - * @Date: 2021-08-29 07:32:40 - * @LastEditors: qianlishi - * @LastEditTime: 2021-09-28 14:18:05 - */ -export const widgetPieNightingale = { - code: 'WidgetPieNightingaleRoseArea', - type: 'chart', - label: '南丁格尔玫瑰图', - icon: 'iconnandinggeermeiguitu', - 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-select', - label: '饼图模式', - name: 'nightingleRosetype', - required: false, - placeholder: '', - selectOptions: [ - {code: 'area', name: '面积模式'}, - {code: 'radius', name: '半径模式'}, - ], - value: 'area' - }, - [ - { - name: '标题设置', - list: [ - { - type: 'el-switch', - label: '标题', - name: 'isNoTitle', - required: false, - placeholder: '', - value: true - }, - { - type: 'el-input-text', - label: '标题', - name: 'titleText', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'textColor', - required: false, - placeholder: '', - value: '#fff' - }, - { - type: 'el-select', - label: '字体粗细', - name: 'textFontWeight', - required: false, - placeholder: '', - selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} - ], - value: 'normal' - }, - { - type: 'el-input-number', - label: '字体大小', - name: 'textFontSize', - required: false, - placeholder: '', - value: 20 - }, - { - type: 'el-select', - label: '字体位置', - name: 'textAlign', - required: false, - placeholder: '', - selectOptions: [ - {code: 'center', name: '居中'}, - {code: 'left', name: '左对齐'}, - {code: 'right', name: '右对齐'}, - ], - value: 'left' - }, - { - type: 'el-input-text', - label: '副标题', - name: 'subText', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'subTextColor', - required: false, - placeholder: '', - value: '' - }, - { - type: 'el-select', - label: '字体粗细', - name: 'subTextFontWeight', - required: false, - placeholder: '', - selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} - ], - value: 'normal' - }, - { - type: 'el-input-number', - label: '字体大小', - name: 'subTextFontSize', - required: false, - placeholder: '', - value: 12 - }, - ], - }, - { - name: '数值设定', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'isShow', - required: false, - placeholder: '', - value: true, - }, - { - type: 'el-switch', - label: '数值', - name: 'numberValue', - require: false, - placeholder: '', - value: true, - }, - { - type: 'el-switch', - label: '百分比', - name: 'percentage', - require: false, - placeholder: '', - value: false, - }, - { - type: 'el-input-number', - label: '字体大小', - name: 'fontSize', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'subTextColor', - required: false, - placeholder: '', - value: '' - }, - { - 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: 'fontSize', - required: false, - placeholder: '', - value: 12 - }, - { - 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: 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: '#FF801C'}, {color: '#F5FF46'}, {color: '#00FE65'}, {color: '#00FEFF'}, {color: '#ffa800'}] - }, - ], - }, - ], - ], - // 数据 - 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": 1048,"name": "搜索引擎"},{"value": 735, "name": "直接访问"},{"value": 580, "name": "邮件营销"},{"value": 484,"name":"联盟广告"},{"value":300,"name":"视频广告"}], - }, - { - type: 'dycustComponents', - label: '', - name: 'dynamicData', - required: false, - placeholder: '', - relactiveDom: 'dataType', - chartType: 'widget-piechart', - dictKey: 'PIE_PROPERTIES', - relactiveDomValue: 'dynamicData', - value: '', - }, - ], - // 坐标 - position: [ - { - type: 'el-input-number', - label: '左边距', - name: 'left', - required: false, - placeholder: '', - value: 0, - }, - { - type: 'el-input-number', - label: '上边距', - name: 'top', - required: false, - placeholder: '', - value: 0, - }, - { - type: 'el-input-number', - label: '宽度', - name: 'width', - required: false, - placeholder: '该容器在1920px大屏中的宽度', - value: 400, - }, - { - type: 'el-input-number', - label: '高度', - name: 'height', - required: false, - placeholder: '该容器在1080px大屏中的高度', - value: 200, - }, - ], - } - } diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-piechart.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-piechart.js deleted file mode 100644 index 5c7285466b1e47b94a91d551105d69db66d51868..0000000000000000000000000000000000000000 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-piechart.js +++ /dev/null @@ -1,403 +0,0 @@ -/* - * @Descripttion: 饼图 - * @version: - * @Author: qianlishi - * @Date: 2021-08-29 07:28:20 - * @LastEditors: qianlishi - * @LastEditTime: 2021-09-28 14:19:19 - */ -export const widgetPiechart = { - code: 'widget-piechart', - 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: '' - }, - { - type: 'el-select', - label: '饼图样式', - name: 'piechartStyle', - required: false, - placeholder: '', - selectOptions: [ - {code: 'shixin', name: '实心饼图'}, - {code: 'kongxin', name: '空心饼图'}, - ], - value: 'shixin' - }, - [ - { - name: '标题设置', - list: [ - { - type: 'el-switch', - label: '标题', - name: 'isNoTitle', - required: false, - placeholder: '', - value: true - }, - { - type: 'el-input-text', - label: '标题', - name: 'titleText', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'textColor', - required: false, - placeholder: '', - value: '#fff' - }, - { - type: 'el-select', - label: '字体粗细', - name: 'textFontWeight', - required: false, - placeholder: '', - selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} - ], - value: 'normal' - }, - { - type: 'el-input-number', - label: '字体大小', - name: 'textFontSize', - required: false, - placeholder: '', - value: 20 - }, - { - type: 'el-select', - label: '字体位置', - name: 'textAlign', - required: false, - placeholder: '', - selectOptions: [ - {code: 'center', name: '居中'}, - {code: 'left', name: '左对齐'}, - {code: 'right', name: '右对齐'}, - ], - value: 'left' - }, - { - type: 'el-input-text', - label: '副标题', - name: 'subText', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'subTextColor', - required: false, - placeholder: '', - value: '' - }, - { - type: 'el-select', - label: '字体粗细', - name: 'subTextFontWeight', - required: false, - placeholder: '', - selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} - ], - value: 'normal' - }, - { - type: 'el-input-number', - label: '字体大小', - name: 'subTextFontSize', - required: false, - placeholder: '', - value: 12 - }, - ], - }, - { - name: '数值设定', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'isShow', - required: false, - placeholder: '', - value: true, - }, - { - type: 'el-switch', - label: '数值', - name: 'numberValue', - require: false, - placeholder: '', - value: true, - }, - { - type: 'el-switch', - label: '百分比', - name: 'percentage', - require: false, - placeholder: '', - value: false, - }, - { - type: 'el-input-number', - label: '字体大小', - name: 'fontSize', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'subTextColor', - required: false, - placeholder: '', - value: '' - }, - { - 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: 'fontSize', - required: false, - placeholder: '', - value: 12 - }, - { - 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-text', - 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: '#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": 1048,"name": "搜索引擎"},{"value": 735, "name": "直接访问"},{"value": 580, "name": "邮件营销"},{"value": 484,"name":"联盟广告"},{"value":300,"name":"视频广告"}] - }, - { - type: 'dycustComponents', - label: '', - name: 'dynamicData', - required: false, - placeholder: '', - relactiveDom: 'dataType', - chartType: 'widget-piechart', - 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: 200, - }, - ], - } - } diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-video.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-video.js deleted file mode 100644 index d9089f8ec680324ab8d396f27c4416764830225f..0000000000000000000000000000000000000000 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-video.js +++ /dev/null @@ -1,72 +0,0 @@ -/* - * @Descripttion: 视频json - * @version: - * @Author: qianlishi - * @Date: 2021-08-29 07:10:22 - * @LastEditors: qianlishi - * @LastEditTime: 2021-09-28 14:20:47 - */ -export const widgetVideo = { - code: 'widget-video', - type: 'html', - label: '视频', - icon: 'iconshipin', - options: { - // 配置 - setup: [ - { - type: 'el-input-text', - label: '图层名称', - name: 'layerName', - required: false, - placeholder: '', - value: 'video', - }, - { - type: 'el-input-text', - label: '地址', - name: 'videoAdress', - required: false, - placeholder: '', - value: 'https://www.w3school.com.cn//i/movie.ogg', - }, - ], - // 数据 - data: [], - // 坐标 - 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: 300, - }, - { - type: 'el-input-number', - label: '高度', - name: 'height', - required: false, - placeholder: '该容器在1080px大屏中的高度', - value: 200, - }, - ], - } - } \ No newline at end of file diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-word-cloud.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/wordcloudCharts/widget-word-cloud.js similarity index 41% rename from report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-word-cloud.js rename to report-ui/src/views/bigscreenDesigner/designer/tools/configure/wordcloudCharts/widget-word-cloud.js index 46904626bdc7c7d2dc8954c3d4cad946b537e73e..542a77bece4b941bbd75c35b764ff973d965a2c1 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-word-cloud.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/wordcloudCharts/widget-word-cloud.js @@ -1,6 +1,7 @@ export const widgetWordCloud = { code: 'widgetWordCloud', - type: 'chart', + type: 'wordCloud', + tabName: '词云图', label: '词云图', icon: 'iconciyuntu', options: { @@ -28,19 +29,19 @@ export const widgetWordCloud = { list: [ { type: 'el-switch', - label: '标题', + label: '标题显示', name: 'isNoTitle', required: false, placeholder: '', - value: true + value: true, }, { type: 'el-input-text', - label: '标题', + label: '标题名', name: 'titleText', required: false, placeholder: '', - value: '' + value: '', }, { type: 'vue-color', @@ -48,7 +49,15 @@ export const widgetWordCloud = { name: 'textColor', required: false, placeholder: '', - value: '#fff' + value: '#FFD700' + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'textFontSize', + required: false, + placeholder: '', + value: 20 }, { type: 'el-select', @@ -57,20 +66,25 @@ export const widgetWordCloud = { required: false, placeholder: '', selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} + { code: 'normal', name: '正常' }, + { code: 'bold', name: '粗体' }, + { code: 'bolder', name: '特粗体' }, + { code: 'lighter', name: '细体' } ], value: 'normal' }, { - type: 'el-input-number', - label: '字体大小', - name: 'textFontSize', + type: 'el-select', + label: '字体风格', + name: 'textFontStyle', required: false, placeholder: '', - value: 20 + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'italic', name: 'italic斜体' }, + { code: 'oblique', name: 'oblique斜体' }, + ], + value: 'normal' }, { type: 'el-select', @@ -79,15 +93,15 @@ export const widgetWordCloud = { required: false, placeholder: '', selectOptions: [ - {code: 'center', name: '居中'}, - {code: 'left', name: '左对齐'}, - {code: 'right', name: '右对齐'}, + { code: 'center', name: '居中' }, + { code: 'left', name: '左对齐' }, + { code: 'right', name: '右对齐' }, ], - value: 'left' + value: 'center' }, { type: 'el-input-text', - label: '副标题', + label: '副标题名', name: 'subText', required: false, placeholder: '', @@ -99,7 +113,15 @@ export const widgetWordCloud = { name: 'subTextColor', required: false, placeholder: '', - value: '' + value: 'rgba(30, 144, 255, 1)' + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'subTextFontSize', + required: false, + placeholder: '', + value: 20 }, { type: 'el-select', @@ -108,20 +130,25 @@ export const widgetWordCloud = { required: false, placeholder: '', selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} + { code: 'normal', name: '正常' }, + { code: 'bold', name: '粗体' }, + { code: 'bolder', name: '特粗体' }, + { code: 'lighter', name: '细体' } ], value: 'normal' }, { - type: 'el-input-number', - label: '字体大小', - name: 'subTextFontSize', + type: 'el-select', + label: '字体风格', + name: 'subTextFontStyle', required: false, placeholder: '', - value: 12 + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'italic', name: 'italic斜体' }, + { code: 'oblique', name: 'oblique斜体' }, + ], + value: 'normal' }, ], }, @@ -172,16 +199,16 @@ export const widgetWordCloud = { list: [ { type: 'el-input-number', - label: '字体大小', - name: 'fontSize', + label: '字体字号', + name: 'tipsFontSize', required: false, placeholder: '', - value: 12 + value: 16 }, { type: 'vue-color', label: '字体颜色', - name: 'lineColor', + name: 'tipsColor', required: false, placeholder: '', value: '#00FEFF' @@ -228,140 +255,140 @@ export const widgetWordCloud = { relactiveDom: 'dataType', relactiveDomValue: 'staticData', value: [ - {name: "占道", value: 284}, - {name: "水质", value: 71}, - {name: "无水", value: 71}, - {name: "停供", value: 21}, - {name: "停气", value: 11}, - {name: "占道", value: 11}, - {name: "Nancy", value: 520}, - {name: "Jayfee", value: 666}, - {name: "生活资源", value: 999}, - {name: "供热管理", value: 888}, - {name: "供气质量", value: 777}, - {name: "社会保障", value: 407}, - {name: "交通运输", value: 516}, - {name: "城市交通", value: 515}, - {name: "环境保护", value: 483}, - {name: "城乡建设", value: 449}, - {name: "公共安全", value: 406}, - {name: "供热管理", value: 375}, - {name: "市容环卫", value: 355}, - {name: "粉尘污染", value: 335}, - {name: "噪声污染", value: 324}, - {name: "医疗卫生", value: 284}, - {name: "供热发展", value: 254}, - {name: "房地产管理", value: 462}, - {name: "生活噪音", value: 253}, - {name: "城市供电", value: 223}, - {name: "大气污染", value: 223}, - {name: "房屋安全", value: 223}, - {name: "文化活动", value: 223}, - {name: "拆迁管理", value: 223}, - {name: "公共设施", value: 223}, - {name: "供气质量", value: 223}, - {name: "供电管理", value: 223}, - {name: "燃气管理", value: 152}, - {name: "教育管理", value: 152}, - {name: "医疗纠纷", value: 152}, - {name: "执法监督", value: 152}, - {name: "设备安全", value: 152}, - {name: "政务建设", value: 152}, - {name: "宏观经济", value: 152}, - {name: "教育管理", value: 112}, - {name: "社会保障", value: 112}, - {name: "分类列表", value: 112}, - {name: "农业生产", value: 112}, - {name: "物业服务", value: 92}, - {name: "物业管理", value: 92}, - {name: "低保管理", value: 92}, - {name: "执法争议", value: 72}, - {name: "占道堆放", value: 71}, - {name: "地上设施", value: 71}, - {name: "主网原因", value: 71}, - {name: "集中供热", value: 71}, - {name: "客运管理", value: 71}, - {name: "治安案件", value: 71}, - {name: "群众健身", value: 41}, - {name: "市场收费", value: 41}, - {name: "生产资金", value: 41}, - {name: "生产噪声", value: 41}, - {name: "农村低保", value: 41}, - {name: "劳动争议", value: 41}, - {name: "医疗事故", value: 21}, - {name: "基础教育", value: 21}, - {name: "职业教育", value: 21}, - {name: "拆迁补偿", value: 21}, - {name: "设施维护", value: 21}, - {name: "市场外溢", value: 11}, - {name: "占道经营", value: 11}, - {name: "树木管理", value: 11}, - {name: "供气质量", value: 11}, - {name: "燃气管理", value: 11}, - {name: "市容环卫", value: 11}, - {name: "新闻传媒", value: 11}, - {name: "人才招聘", value: 11}, - {name: "市场环境", value: 11}, - {name: "城市交通", value: 11}, - {name: "物业服务", value: 11}, - {name: "物业管理", value: 11}, - {name: "园林绿化", value: 11}, - {name: "有线电视", value: 11}, - {name: "社会治安", value: 11}, - {name: "林业资源", value: 11}, - {name: "体育活动", value: 11}, - {name: "低保管理", value: 11}, - {name: "劳动争议", value: 11}, - {name: "粉煤灰污染", value: 284}, - {name: "人行道管理", value: 71}, - {name: "身份证管理", value: 71}, - {name: "房地产开发", value: 11}, - {name: "经营性收费", value: 11}, - {name: "一次供水问题", value: 11}, - {name: "工业粉尘污染", value: 71}, - {name: "工业排放污染", value: 41}, - {name: "破坏森林资源", value: 41}, - {name: "生活用水管理", value: 688}, - {name: "一次供水问题", value: 588}, - {name: "公交运输管理", value: 386}, - {name: "自然资源管理", value: 355}, - {name: "土地资源管理", value: 304}, - {name: "生活用水管理", value: 112}, - {name: "供热单位影响", value: 253}, - {name: "二次供水问题", value: 112}, - {name: "城市公共设施", value: 92}, - {name: "拆迁政策咨询", value: 92}, - {name: "县区、开发区", value: 152}, - {name: "文娱市场管理", value: 72}, - {name: "商业烟尘污染", value: 72}, - {name: "供热单位影响", value: 71}, - {name: "压力容器安全", value: 71}, - {name: "劳动合同争议", value: 41}, - {name: "物业资质管理", value: 21}, - {name: "农村基础设施", value: 11}, - {name: "行政事业收费", value: 11}, - {name: "房屋配套问题", value: 11}, - {name: "公交运输管理", value: 11}, - {name: "社会福利及事务", value: 11}, - {name: "食品安全与卫生", value: 11}, - {name: "物业服务与管理", value: 112}, - {name: "文体与教育管理", value: 406}, - {name: "社会保障与福利", value: 429}, - {name: "出租车运营管理", value: 385}, - {name: "物业服务与管理", value: 304}, - {name: "房屋质量与安全", value: 223}, - {name: "劳动报酬与福利", value: 41}, - {name: "食品安全与卫生", value: 11}, - {name: "房屋与图纸不符", value: 11}, - {name: "其他行政事业收费", value: 11}, - {name: "农村土地规划管理", value: 254}, - {name: "社会保障保险管理", value: 92}, - {name: "城市交通秩序管理", value: 72}, - {name: "户籍管理及身份证", value: 11}, - {name: "公路（水路）交通", value: 11}, - {name: "国有公交（大巴）管理", value: 71}, - {name: "有线电视安装及调试维护", value: 11}, - {name: "市政府工作部门（含部门管理机构、直属单位）", value: 11}, + { name: "占道", value: 284 }, + { name: "水质", value: 71 }, + { name: "无水", value: 71 }, + { name: "停供", value: 21 }, + { name: "停气", value: 11 }, + { name: "占道", value: 11 }, + { name: "Nancy", value: 520 }, + { name: "Jayfee", value: 666 }, + { name: "生活资源", value: 999 }, + { name: "供热管理", value: 888 }, + { name: "供气质量", value: 777 }, + { name: "社会保障", value: 407 }, + { name: "交通运输", value: 516 }, + { name: "城市交通", value: 515 }, + { name: "环境保护", value: 483 }, + { name: "城乡建设", value: 449 }, + { name: "公共安全", value: 406 }, + { name: "供热管理", value: 375 }, + { name: "市容环卫", value: 355 }, + { name: "粉尘污染", value: 335 }, + { name: "噪声污染", value: 324 }, + { name: "医疗卫生", value: 284 }, + { name: "供热发展", value: 254 }, + { name: "房地产管理", value: 462 }, + { name: "生活噪音", value: 253 }, + { name: "城市供电", value: 223 }, + { name: "大气污染", value: 223 }, + { name: "房屋安全", value: 223 }, + { name: "文化活动", value: 223 }, + { name: "拆迁管理", value: 223 }, + { name: "公共设施", value: 223 }, + { name: "供气质量", value: 223 }, + { name: "供电管理", value: 223 }, + { name: "燃气管理", value: 152 }, + { name: "教育管理", value: 152 }, + { name: "医疗纠纷", value: 152 }, + { name: "执法监督", value: 152 }, + { name: "设备安全", value: 152 }, + { name: "政务建设", value: 152 }, + { name: "宏观经济", value: 152 }, + { name: "教育管理", value: 112 }, + { name: "社会保障", value: 112 }, + { name: "分类列表", value: 112 }, + { name: "农业生产", value: 112 }, + { name: "物业服务", value: 92 }, + { name: "物业管理", value: 92 }, + { name: "低保管理", value: 92 }, + { name: "执法争议", value: 72 }, + { name: "占道堆放", value: 71 }, + { name: "地上设施", value: 71 }, + { name: "主网原因", value: 71 }, + { name: "集中供热", value: 71 }, + { name: "客运管理", value: 71 }, + { name: "治安案件", value: 71 }, + { name: "群众健身", value: 41 }, + { name: "市场收费", value: 41 }, + { name: "生产资金", value: 41 }, + { name: "生产噪声", value: 41 }, + { name: "农村低保", value: 41 }, + { name: "劳动争议", value: 41 }, + { name: "医疗事故", value: 21 }, + { name: "基础教育", value: 21 }, + { name: "职业教育", value: 21 }, + { name: "拆迁补偿", value: 21 }, + { name: "设施维护", value: 21 }, + { name: "市场外溢", value: 11 }, + { name: "占道经营", value: 11 }, + { name: "树木管理", value: 11 }, + { name: "供气质量", value: 11 }, + { name: "燃气管理", value: 11 }, + { name: "市容环卫", value: 11 }, + { name: "新闻传媒", value: 11 }, + { name: "人才招聘", value: 11 }, + { name: "市场环境", value: 11 }, + { name: "城市交通", value: 11 }, + { name: "物业服务", value: 11 }, + { name: "物业管理", value: 11 }, + { name: "园林绿化", value: 11 }, + { name: "有线电视", value: 11 }, + { name: "社会治安", value: 11 }, + { name: "林业资源", value: 11 }, + { name: "体育活动", value: 11 }, + { name: "低保管理", value: 11 }, + { name: "劳动争议", value: 11 }, + { name: "粉煤灰污染", value: 284 }, + { name: "人行道管理", value: 71 }, + { name: "身份证管理", value: 71 }, + { name: "房地产开发", value: 11 }, + { name: "经营性收费", value: 11 }, + { name: "一次供水问题", value: 11 }, + { name: "工业粉尘污染", value: 71 }, + { name: "工业排放污染", value: 41 }, + { name: "破坏森林资源", value: 41 }, + { name: "生活用水管理", value: 688 }, + { name: "一次供水问题", value: 588 }, + { name: "公交运输管理", value: 386 }, + { name: "自然资源管理", value: 355 }, + { name: "土地资源管理", value: 304 }, + { name: "生活用水管理", value: 112 }, + { name: "供热单位影响", value: 253 }, + { name: "二次供水问题", value: 112 }, + { name: "城市公共设施", value: 92 }, + { name: "拆迁政策咨询", value: 92 }, + { name: "县区、开发区", value: 152 }, + { name: "文娱市场管理", value: 72 }, + { name: "商业烟尘污染", value: 72 }, + { name: "供热单位影响", value: 71 }, + { name: "压力容器安全", value: 71 }, + { name: "劳动合同争议", value: 41 }, + { name: "物业资质管理", value: 21 }, + { name: "农村基础设施", value: 11 }, + { name: "行政事业收费", value: 11 }, + { name: "房屋配套问题", value: 11 }, + { name: "公交运输管理", value: 11 }, + { name: "社会福利及事务", value: 11 }, + { name: "食品安全与卫生", value: 11 }, + { name: "物业服务与管理", value: 112 }, + { name: "文体与教育管理", value: 406 }, + { name: "社会保障与福利", value: 429 }, + { name: "出租车运营管理", value: 385 }, + { name: "物业服务与管理", value: 304 }, + { name: "房屋质量与安全", value: 223 }, + { name: "劳动报酬与福利", value: 41 }, + { name: "食品安全与卫生", value: 11 }, + { name: "房屋与图纸不符", value: 11 }, + { name: "其他行政事业收费", value: 11 }, + { name: "农村土地规划管理", value: 254 }, + { name: "社会保障保险管理", value: 92 }, + { name: "城市交通秩序管理", value: 72 }, + { name: "户籍管理及身份证", value: 11 }, + { name: "公路（水路）交通", value: 11 }, + { name: "国有公交（大巴）管理", value: 71 }, + { name: "有线电视安装及调试维护", value: 11 }, + { name: "市政府工作部门（含部门管理机构、直属单位）", value: 11 }, ], }, { diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/index.js b/report-ui/src/views/bigscreenDesigner/designer/tools/index.js index 9ff919e17a23c6e699b2e2b92fdbdd97ba0f57d5..4a29807380deb45ff7c6b4ab9e34216e0fa47842 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/index.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/index.js @@ -3,8 +3,8 @@ * @version: * @Author: qianlishi * @Date: 2021-08-29 06:43:07 - * @LastEditors: qianlishi - * @LastEditTime: 2022-03-11 10:35:35 + * @LastEditors: qianlishi qianlishi@anji-plus.com + * @LastEditTime: 2022-11-07 15:35:42 */ import { widgetTool } from "./main" const screenConfig = { @@ -44,6 +44,7 @@ const screenConfig = { name: 'description', required: false, placeholder: '', + value: '' }, { type: 'vue-color', @@ -51,7 +52,7 @@ const screenConfig = { name: 'backgroundColor', required: false, placeholder: '', - value: '#000', + value: 'rgba(45, 86, 126, 1)', }, { type: 'custom-upload', @@ -59,16 +60,37 @@ const screenConfig = { name: 'backgroundImage', required: false, placeholder: '', - value: 'https://ajreport.beliefteam.cn/file/download/bf566e48-ccad-40e1-8ee9-228427e5466b', + value: '', }, ], data: [], position: [], } } -const widgetTools = [ - ...widgetTool -] + +export const converArr = (data) => { + let tempArr = [], newArr = [] + for (let i = 0; i < data.length; i++) { + const item = data[i] + if (tempArr.indexOf(item.type) === -1) { + newArr.push({ + name: item.tabName, + type: item.type, + list: [item] + }) + tempArr.push(item.type); + } else { + for (let j = 0; j < newArr.length; j++) { + if (newArr[j].type == item.type) { + newArr[j].list.push(item) + } + } + } + } + return newArr +} + +const widgetTools = converArr([...widgetTool]) const getToolByCode = function (code) { // 获取大屏底层设置属性 @@ -76,10 +98,8 @@ const getToolByCode = function (code) { return screenConfig } // 获取组件 - let item = widgetTools.find(function (item, index, arrs) { - return item.code === code + return [...widgetTool].find((item) => { + return item.code == code }) - return item } -console.log(widgetTools) -export {widgetTools, getToolByCode} +export { widgetTools, getToolByCode } diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/main.js b/report-ui/src/views/bigscreenDesigner/designer/tools/main.js index ca239ee7c0b65a945a3fddea05dfdee7895ac36b..67d41a9a08bd4fec034a57d0f16592fa5d227159 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/main.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/main.js @@ -3,39 +3,41 @@ * @version: * @Author: qianlishi * @Date: 2021-08-29 07:46:46 - * @LastEditors: qianlishi - * @LastEditTime: 2021-12-13 14:23:59 + * @LastEditors: qianlishi qianlishi@anji-plus.com + * @LastEditTime: 2022-11-07 15:34:02 */ -import {widgetText} from "./configure/widget-text" -import {widgetMarquee} from "./configure/widget-marquee" -import {widgetHref} from "./configure/widget-href" -import {widgetTime} from "./configure/widget-time" -import {widgetImage} from "./configure/widget-image" -import {widgetSliders} from "./configure/widget-slider" -import {widgetVideo} from "./configure/widget-video" -import {widgetTable} from "./configure/widget-table" -import {widgetIframe} from "./configure/widget-iframe" -import {widgetUniversal} from "./configure/widget-universal" -import {widgetBarchart} from "./configure/widget-barchart" -import {widgetGradientBarchart} from "./configure/widget-gradient-barchart" -import {widgetLinechart} from "./configure/widget-linechart" -import {widgetBarlinechart} from "./configure/widget-barlinechart" -import {widgetPiechart} from "./configure/widget-piechart" -import {widgetFunnel} from "./configure/widget-funnel" -import {widgetGauge} from "./configure/widget-gauge" -import {widgetLineMap} from "./configure/widget-line-map" -import {widgetPieNightingale} from "./configure/widget-pie-nightingale" -import {widgetPiePercentage} from "./configure/widget-pie-percentage" -import {widgetAirbubbleMap} from "./configure/widget-airbubble-map" -import {widgetBarStack} from "./configure/widget-bar-stack" -import {widgetLineStack} from "./configure/widget-line-stack" -import {widgetBarCompare} from "./configure/widget-bar-compare" -import {widgetLineCompare} from "./configure/widget-line-compare" -import {widgetDecoratePie} from "./configure/widget-decorate-pie"; -import {widgetMoreBarLine} from "./configure/widget-more-bar-line"; -import {widgetWordCloud} from "./configure/widget-word-cloud"; -import {widgetHeatmap} from "./configure/widget-heatmap"; +import { widgetText } from "./configure/texts/widget-text" +import { widgetMarquee } from "./configure/texts/widget-marquee" +import { widgetHref } from "./configure/texts/widget-href" +import { widgetTime } from "./configure/texts/widget-time" +import { widgetImage } from "./configure/texts/widget-image" +import { widgetSliders } from "./configure/texts/widget-slider" +import { widgetVideo } from "./configure/texts/widget-video" +import { widgetTable } from "./configure/texts/widget-table" +import { widgetIframe } from "./configure/texts/widget-iframe" +import { widgetUniversal } from "./configure/widget-universal" +import { widgetBarchart } from "./configure/barCharts/widget-barchart" +import { widgetGradientBarchart } from "./configure/barCharts/widget-gradient-barchart" +import { widgetLinechart } from "./configure/lineCharts/widget-linechart" +import { widgetBarlinechart } from "./configure/barlineCharts/widget-barlinechart" +import { widgetPiechart } from "./configure/pieCharts/widget-piechart" +import { widgetFunnel } from "./configure/funnelCharts/widget-funnel" +import { widgetGauge } from "./configure/percentCharts/widget-gauge" +import { widgetLineMap } from "./configure/mapCharts/widget-line-map" +import { widgetPieNightingale } from "./configure/pieCharts/widget-pie-nightingale" +import { widgetPiePercentage } from "./configure/percentCharts/widget-pie-percentage" +import { widgetAirbubbleMap } from "./configure/mapCharts/widget-airbubble-map" +import { widgetBarStack } from "./configure/barCharts/widget-bar-stack" +import { widgetLineStack } from "./configure/lineCharts/widget-line-stack" +import { widgetBarCompare } from "./configure/barCharts/widget-bar-compare" +import { widgetLineCompare } from "./configure/lineCharts/widget-line-compare" +import { widgetDecoratePie } from "./configure/decorateCharts/widget-decorate-pie"; +import { widgetMoreBarLine } from "./configure/barlineCharts/widget-more-bar-line"; +import { widgetWordCloud } from "./configure/wordcloudCharts/widget-word-cloud"; +import { widgetHeatmap } from "./configure/heatmap/widget-heatmap"; +import { widgetRadar } from "./configure/radarCharts/widget-radar"; +import { widgetBarLineStack } from "./configure/barlineCharts/widget-bar-line-stack"; export const widgetTool = [ // type=html类型的组件 @@ -67,5 +69,7 @@ export const widgetTool = [ widgetDecoratePie, widgetMoreBarLine, widgetWordCloud, - widgetHeatmap + widgetHeatmap, + widgetRadar, + widgetBarLineStack ] diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarCompareChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarCompareChart.vue index d0ce849c23a8fdbf41c50b7c56d0f2f4d1ff936f..d4062b830b4d8f4a246e8a06fb3182b18f9e035c 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarCompareChart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarCompareChart.vue @@ -286,15 +286,23 @@ 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, + fontStyle: optionsSetup.textFontStyle, + }; + title.subtext = optionsSetup.subText; + title.subtextStyle = { + color: optionsSetup.subTextColor, + fontWeight: optionsSetup.subTextFontWeight, + fontSize: optionsSetup.subTextFontSize, + fontStyle: optionsSetup.subTextFontStyle, }; this.options.title = title; }, @@ -306,8 +314,9 @@ export default { type: 'value', show : optionsSetup.hideXLeft, inverse: true, - axisLine: {//X轴线 - show: optionsSetup.xLineLeft, + //X轴线 + axisLine: { + show: optionsSetup.lineXLeft, lineStyle: { color: optionsSetup.lineColorXLeft, }, @@ -315,19 +324,19 @@ export default { axisTick: { show: optionsSetup.tickLineLeft, }, - position: 'bottom', + position: optionsSetup.positionXLeft, axisLabel: { // x轴 show: true, textStyle: { - color: optionsSetup.XcolorLeft, + color: optionsSetup.colorXLeft, fontSize: optionsSetup.fontSizeXLeft } }, splitLine: { // 分割线 - show: optionsSetup.SplitLineLeft, + show: optionsSetup.isShowSplitLineLeft, lineStyle: { - color: optionsSetup.SplitLineColorLeft, - width: optionsSetup.SplitLinefontSizeLeft, + color: optionsSetup.splitLineColorLeft, + width: optionsSetup.splitLineFontWidthLeft, type: 'solid' } } @@ -343,7 +352,7 @@ export default { show : optionsSetup.hideXRight, type: 'value', axisLine: {//X轴线 - show: optionsSetup.xLineRight, + show: optionsSetup.lineXRight, lineStyle: { color: optionsSetup.lineColorXRight, }, @@ -351,19 +360,19 @@ export default { axisTick: { show: optionsSetup.tickLineRight, }, - position: 'bottom', + position: optionsSetup.positionXRight, axisLabel: { // x轴 show: true, textStyle: { - color: optionsSetup.XcolorRight, + color: optionsSetup.colorXRight, fontSize: optionsSetup.fontSizeXRight } }, splitLine: { // 分割线 - show: optionsSetup.SplitLineRight, + show: optionsSetup.isShowSplitLineRight, lineStyle: { - color: optionsSetup.SplitLineColorRight, - width: optionsSetup.SplitLinefontSizeRight, + color: optionsSetup.splitLineColorRight, + width: optionsSetup.splitLineFontWidthRight, type: 'solid' } } @@ -385,7 +394,7 @@ export default { const axisLabel = { show: optionsSetup.hideY, textStyle: { - align: optionsSetup.textAlign, + align: optionsSetup.textAlignY, color: optionsSetup.colorY, fontSize: optionsSetup.fontSizeY, } @@ -441,8 +450,8 @@ export default { trigger: "item", show: true, textStyle: { - color: optionsSetup.lineColor, - fontSize: optionsSetup.fontSize + color: optionsSetup.tipsColor, + fontSize: optionsSetup.tipsFontSize } }; this.options.tooltip = tooltip; @@ -453,6 +462,8 @@ export default { const grid = [ {//左 show: optionsSetup.frameLineLeft, + borderColor: optionsSetup.borderColorLeft, + borderWidth: optionsSetup.borderWidthLeft, left: optionsSetup.marginLeftRight, top: optionsSetup.marginTop, bottom: optionsSetup.marginBottom, @@ -468,6 +479,8 @@ export default { }, {//右 show: optionsSetup.frameLineRight, + borderColor: optionsSetup.borderColorRight, + borderWidth: optionsSetup.borderWidthRight, right: optionsSetup.marginLeftRight, top: optionsSetup.marginTop, bottom: optionsSetup.marginBottom, @@ -488,10 +501,10 @@ export default { optionsSetup.longitudinalPosition; legend.orient = optionsSetup.layoutFront; legend.textStyle = { - color: optionsSetup.lengedColor, - fontSize: optionsSetup.lengedFontSize + color: optionsSetup.legendColor, + fontSize: optionsSetup.legendFontSize }; - legend.itemWidth = optionsSetup.lengedWidth; + legend.itemWidth = optionsSetup.legendWidth; }, // 图例名称设置 setOptionsLegendName(name){ diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue index c275db8902e2a0a30e047ff2588f4990716279f7..acf82a5b49e249a81aba5bcfd8d3660e648431d4 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue @@ -111,13 +111,15 @@ export default { title.textStyle = { color: optionsSetup.textColor, fontSize: optionsSetup.textFontSize, - fontWeight: optionsSetup.textFontWeight + fontWeight: optionsSetup.textFontWeight, + fontStyle: optionsSetup.textFontStyle, }; title.subtext = optionsSetup.subText; title.subtextStyle = { color: optionsSetup.subTextColor, fontWeight: optionsSetup.subTextFontWeight, - fontSize: optionsSetup.subTextFontSize + fontSize: optionsSetup.subTextFontSize, + fontStyle: optionsSetup.subTextFontStyle, }; this.options.title = title; }, @@ -129,10 +131,10 @@ export default { // 坐标轴是否显示 show: optionsSetup.hideX, // 坐标轴名称 - name: optionsSetup.xName, + name: optionsSetup.nameX, nameTextStyle: { - color: optionsSetup.xNameColor, - fontSize: optionsSetup.xNameFontSize + color: optionsSetup.nameColorX, + fontSize: optionsSetup.nameFontSizeX }, // 轴反转 inverse: optionsSetup.reversalX, @@ -144,20 +146,22 @@ export default { rotate: optionsSetup.textAngleX, textStyle: { // 坐标文字颜色 - color: optionsSetup.Xcolor, + color: optionsSetup.colorX, fontSize: optionsSetup.fontSizeX } }, axisLine: { show: true, lineStyle: { - color: optionsSetup.lineColorX + color: optionsSetup.lineColorX, + width: optionsSetup.lineWidthX, } }, splitLine: { show: optionsSetup.isShowSplitLineX, lineStyle: { - color: optionsSetup.splitLineColorX + color: optionsSetup.splitLineColorX, + width: optionsSetup.splitLineWidthX, } } }; @@ -168,15 +172,18 @@ export default { const optionsSetup = this.optionsSetup; const yAxis = { type: "value", + scale: optionsSetup.scale, + // 均分 + splitNumber: optionsSetup.splitNumberY, // 坐标轴是否显示 show: optionsSetup.isShowY, // 坐标轴名称 name: optionsSetup.textNameY, nameTextStyle: { - color: optionsSetup.NameColorY, - fontSize: optionsSetup.NameFontSizeY + color: optionsSetup.nameColorY, + fontSize: optionsSetup.nameFontSizeY }, - // y轴反转 + // 轴反转 inverse: optionsSetup.reversalY, axisLabel: { show: true, @@ -191,13 +198,15 @@ export default { axisLine: { show: true, lineStyle: { - color: optionsSetup.lineColorY + color: optionsSetup.lineColorY, + width: optionsSetup.lineWidthY, } }, splitLine: { show: optionsSetup.isShowSplitLineY, lineStyle: { - color: optionsSetup.splitLineColorY + color: optionsSetup.splitLineColorY, + width: optionsSetup.splitLineWidthY, } } }; @@ -210,7 +219,7 @@ export default { trigger: "item", show: true, textStyle: { - color: optionsSetup.lineColor, + color: optionsSetup.tipsColor, fontSize: optionsSetup.tipsFontSize } }; @@ -239,10 +248,10 @@ export default { optionsSetup.longitudinalPosition; legend.orient = optionsSetup.layoutFront; legend.textStyle = { - color: optionsSetup.lengedColor, - fontSize: optionsSetup.lengedFontSize + color: optionsSetup.legendColor, + fontSize: optionsSetup.legendFontSize }; - legend.itemWidth = optionsSetup.lengedWidth; + legend.itemWidth = optionsSetup.legendWidth; }, // 图例名称设置 setOptionsLegendName(name){ diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue index 32f02574b9813087521de6b9672894f3d85f8278..21143686f62392724938f28ecfbf705a81baafe9 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue @@ -111,15 +111,16 @@ export default { title.textStyle = { color: optionsSetup.textColor, fontSize: optionsSetup.textFontSize, - fontWeight: optionsSetup.textFontWeight + fontWeight: optionsSetup.textFontWeight, + fontStyle: optionsSetup.textFontStyle, }; title.subtext = optionsSetup.subText; title.subtextStyle = { color: optionsSetup.subTextColor, fontWeight: optionsSetup.subTextFontWeight, - fontSize: optionsSetup.subTextFontSize + fontSize: optionsSetup.subTextFontSize, + fontStyle: optionsSetup.subTextFontStyle, }; - this.options.title = title; }, // X轴设置 @@ -127,33 +128,40 @@ export default { const optionsSetup = this.optionsSetup; const xAxis = { type: "category", - show: optionsSetup.hideX, // 坐标轴是否显示 - name: optionsSetup.xName, // 坐标轴名称 + // 坐标轴是否显示 + show: optionsSetup.hideX, + // 坐标轴名称 + name: optionsSetup.nameX, nameTextStyle: { - color: optionsSetup.xNameColor, - fontSize: optionsSetup.xNameFontSize + color: optionsSetup.nameColorX, + fontSize: optionsSetup.nameFontSizeX }, - nameRotate: optionsSetup.textAngle, // 文字角度 - inverse: optionsSetup.reversalX, // 轴反转 + // 轴反转 + inverse: optionsSetup.reversalX, axisLabel: { show: true, - interval: optionsSetup.textInterval, // 文字角度 - rotate: optionsSetup.textAngle, // 文字角度 + // 文字间隔 + interval: optionsSetup.textInterval, + // 文字角度 + rotate: optionsSetup.textAngleX, textStyle: { - color: optionsSetup.Xcolor, // x轴 坐标文字颜色 + // 坐标文字颜色 + color: optionsSetup.colorX, fontSize: optionsSetup.fontSizeX } }, axisLine: { show: true, lineStyle: { - color: optionsSetup.lineColorX + color: optionsSetup.lineColorX, + width: optionsSetup.lineWidthX, } }, splitLine: { show: optionsSetup.isShowSplitLineX, lineStyle: { - color: optionsSetup.splitLineColorX + color: optionsSetup.splitLineColorX, + width: optionsSetup.splitLineWidthX, } } }; @@ -165,36 +173,43 @@ export default { const yAxis = { type: "value", scale: optionsSetup.scale, - splitNumber: optionsSetup.splitNumber,// 均分 - show: optionsSetup.isShowY, // 坐标轴是否显示 - name: optionsSetup.textNameY, // 坐标轴名称 + // 均分 + splitNumber: optionsSetup.splitNumberY, + // 坐标轴是否显示 + show: optionsSetup.isShowY, + // 坐标轴名称 + name: optionsSetup.textNameY, nameTextStyle: { color: optionsSetup.nameColorY, fontSize: optionsSetup.nameFontSizeY }, - inverse: optionsSetup.reversalY, // 轴反转 + // 轴反转 + inverse: optionsSetup.reversalY, axisLabel: { show: true, - rotate: optionsSetup.ytextAngle, // 文字角度 + // 文字角度 + rotate: optionsSetup.textAngleY, textStyle: { - color: optionsSetup.colorY, // x轴 坐标文字颜色 + // 坐标文字颜色 + color: optionsSetup.colorY, fontSize: optionsSetup.fontSizeY } }, axisLine: { show: true, lineStyle: { - color: optionsSetup.lineColorY + color: optionsSetup.lineColorY, + width: optionsSetup.lineWidthY, } }, splitLine: { show: optionsSetup.isShowSplitLineY, lineStyle: { - color: optionsSetup.splitLineColorY + color: optionsSetup.splitLineColorY, + width: optionsSetup.splitLineWidthY, } } }; - this.options.yAxis = yAxis; }, // 数值设定 or 柱体设置 @@ -234,7 +249,7 @@ export default { trigger: "item", show: true, textStyle: { - color: optionsSetup.lineColor, + color: optionsSetup.tipsColor, fontSize: optionsSetup.tipsFontSize } }; diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue index 613c24d47e264eeb2d53f6bd29df66685b0adf06..02165bcec4d8c24f2dbc804c3ff082d067667e84 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue @@ -181,15 +181,16 @@ export default { title.textStyle = { color: optionsSetup.textColor, fontSize: optionsSetup.textFontSize, - fontWeight: optionsSetup.textFontWeight + fontWeight: optionsSetup.textFontWeight, + fontStyle: optionsSetup.textFontStyle, }; title.subtext = optionsSetup.subText; title.subtextStyle = { color: optionsSetup.subTextColor, fontWeight: optionsSetup.subTextFontWeight, - fontSize: optionsSetup.subTextFontSize + fontSize: optionsSetup.subTextFontSize, + fontStyle: optionsSetup.subTextFontStyle, }; - this.options.title = title; }, // X轴设置 @@ -197,33 +198,40 @@ export default { const optionsSetup = this.optionsSetup; const xAxis = { type: "category", - show: optionsSetup.hideX, // 坐标轴是否显示 - name: optionsSetup.xName, // 坐标轴名称 + // 坐标轴是否显示 + show: optionsSetup.hideX, + // 坐标轴名称 + name: optionsSetup.nameX, nameTextStyle: { color: optionsSetup.nameColorX, fontSize: optionsSetup.nameFontSizeX }, - nameRotate: optionsSetup.textAngle, // 文字角度 - inverse: optionsSetup.reversalX, // 轴反转 + // 轴反转 + inverse: optionsSetup.reversalX, axisLabel: { show: true, - interval: optionsSetup.textInterval, // 文字间隔 - rotate: optionsSetup.textAngle, // 文字角度 + // 文字间隔 + interval: optionsSetup.textInterval, + // 文字角度 + rotate: optionsSetup.textAngleX, textStyle: { - color: optionsSetup.Xcolor, // x轴 坐标文字颜色 + // 坐标文字颜色 + color: optionsSetup.colorX, fontSize: optionsSetup.fontSizeX } }, axisLine: { show: true, lineStyle: { - color: optionsSetup.lineColorX + color: optionsSetup.lineColorX, + width: optionsSetup.lineWidthX, } }, splitLine: { show: optionsSetup.isShowSplitLineX, lineStyle: { - color: optionsSetup.splitLineColorX + color: optionsSetup.splitLineColorX, + width: optionsSetup.splitLineWidthX, } } }; @@ -235,32 +243,40 @@ export default { const yAxis = { type: "value", scale: optionsSetup.scale, - splitNumber: optionsSetup.splitNumber,// 均分 - show: optionsSetup.isShowY, // 坐标轴是否显示 - name: optionsSetup.textNameY, // 坐标轴名称 - nameTextStyle: { // 别名 + // 均分 + splitNumber: optionsSetup.splitNumberY, + // 坐标轴是否显示 + show: optionsSetup.isShowY, + // 坐标轴名称 + name: optionsSetup.textNameY, + nameTextStyle: { color: optionsSetup.nameColorY, - fontSize: optionsSetup.namefontSizeY + fontSize: optionsSetup.nameFontSizeY }, - inverse: optionsSetup.reversalY, // 轴反转 + // 轴反转 + inverse: optionsSetup.reversalY, axisLabel: { show: true, - rotate: optionsSetup.ytextAngle, // 文字角度 + // 文字角度 + rotate: optionsSetup.textAngleY, textStyle: { - color: optionsSetup.colorY, // y轴 坐标文字颜色 + // 坐标文字颜色 + color: optionsSetup.colorY, fontSize: optionsSetup.fontSizeY } }, axisLine: { show: true, lineStyle: { - color: optionsSetup.lineColorY + color: optionsSetup.lineColorY, + width: optionsSetup.lineWidthY, } }, splitLine: { show: optionsSetup.isShowSplitLineY, lineStyle: { - color: optionsSetup.splitLineColorY + color: optionsSetup.splitLineColorY, + width: optionsSetup.splitLineWidthY, } } }; @@ -300,7 +316,7 @@ export default { trigger: "item", show: true, textStyle: { - color: optionsSetup.lineColor, + color: optionsSetup.tipsColor, fontSize: optionsSetup.tipsFontSize } }; diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue new file mode 100644 index 0000000000000000000000000000000000000000..194800aa4a1605ed4bfe6081e9baa7f73a783a3b --- /dev/null +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue @@ -0,0 +1,585 @@ + + + + + diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarlinechart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue similarity index 78% rename from report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarlinechart.vue rename to report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue index 798913738f3b519a48df099cdfa0791bd9778bad..542381da40dcb87fad9a27fae4814159e1913b7c 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarlinechart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue @@ -152,15 +152,16 @@ export default { title.textStyle = { color: optionsSetup.textColor, fontSize: optionsSetup.textFontSize, - fontWeight: optionsSetup.textFontWeight + fontWeight: optionsSetup.textFontWeight, + fontStyle: optionsSetup.textFontStyle, }; title.subtext = optionsSetup.subText; title.subtextStyle = { color: optionsSetup.subTextColor, fontWeight: optionsSetup.subTextFontWeight, - fontSize: optionsSetup.subTextFontSize + fontSize: optionsSetup.subTextFontSize, + fontStyle: optionsSetup.subTextFontStyle, }; - this.options.title = title; }, // X轴设置 @@ -168,33 +169,40 @@ export default { const optionsSetup = this.optionsSetup; const xAxis = { type: "category", - show: optionsSetup.hideX, // 坐标轴是否显示 - name: optionsSetup.xName, // 坐标轴名称 + // 坐标轴是否显示 + show: optionsSetup.hideX, + // 坐标轴名称 + name: optionsSetup.nameX, nameTextStyle: { color: optionsSetup.nameColorX, fontSize: optionsSetup.nameFontSizeX }, - nameRotate: optionsSetup.textAngle, // 文字角度 - inverse: optionsSetup.reversalX, // 轴反转 + // 轴反转 + inverse: optionsSetup.reversalX, axisLabel: { show: true, - interval: optionsSetup.textInterval, // 文字间隔 - rotate: optionsSetup.textAngle, // 文字角度 + // 文字间隔 + interval: optionsSetup.textInterval, + // 文字角度 + rotate: optionsSetup.textAngleX, textStyle: { - color: optionsSetup.Xcolor, // x轴 坐标文字颜色 + // 坐标文字颜色 + color: optionsSetup.colorX, fontSize: optionsSetup.fontSizeX } }, axisLine: { show: true, lineStyle: { - color: optionsSetup.lineColorX + color: optionsSetup.lineColorX, + width: optionsSetup.lineWidthX, } }, splitLine: { show: optionsSetup.isShowSplitLineX, lineStyle: { - color: optionsSetup.splitLineColorX + color: optionsSetup.splitLineColorX, + width: optionsSetup.splitLineWidthX, } } }; @@ -206,56 +214,84 @@ export default { const yAxis = [ { type: "value", - splitNumber: optionsSetup.splitNumberLeft,// 均分 - show: optionsSetup.isShowYLeft, // 坐标轴是否显示 - name: optionsSetup.textNameYLeft, // 坐标轴名称 - nameTextStyle: { // 别名 + // 均分 + splitNumber: optionsSetup.splitNumberLeft, + // 坐标轴是否显示 + show: optionsSetup.isShowYLeft, + // 坐标轴名称 + name: optionsSetup.textNameYLeft, + // 别名 + nameTextStyle: { color: optionsSetup.nameColorYLeft, - fontSize: optionsSetup.namefontSizeYLeft + fontSize: optionsSetup.nameFontSizeYLeft }, - inverse: optionsSetup.reversalY, // 轴反转 axisLabel: { show: true, + // 文字角度 + rotate: optionsSetup.textAngleYLeft, textStyle: { - color: optionsSetup.colorY, // y轴 坐标文字颜色 - fontSize: optionsSetup.fontSizeY + // 坐标文字颜色 + color: optionsSetup.colorYLeft, + fontSize: optionsSetup.fontSizeYLeft } }, + axisTick: { // 刻度 + show: optionsSetup.tickLineYLeft, + }, axisLine: { - show: true, + show: optionsSetup.lineYLeft, lineStyle: { - color: optionsSetup.lineColorY + width: optionsSetup.lineWidthYLeft, + color: optionsSetup.lineColorYLeft, } }, splitLine: { - show: false, + show: optionsSetup.isShowSplitLineYLeft, + lineStyle: { + color: optionsSetup.splitLineColorYLeft, + width: optionsSetup.splitLineFontWidthYLeft, + } } }, { type: "value", - splitNumber: optionsSetup.splitNumberRight,// 均分 - show: optionsSetup.isShowYRight, // 坐标轴是否显示 - name: optionsSetup.textNameYRight, // 坐标轴名称 - nameTextStyle: { // 别名 + // 均分 + splitNumber: optionsSetup.splitNumberRight, + // 坐标轴是否显示 + show: optionsSetup.isShowYRight, + // 坐标轴名称 + name: optionsSetup.textNameYRight, + // 别名 + nameTextStyle: { color: optionsSetup.nameColorYRight, - fontSize: optionsSetup.namefontSizeYRight + fontSize: optionsSetup.nameFontSizeYRight }, - inverse: optionsSetup.reversalY, // 轴反转 axisLabel: { show: true, + // 文字角度 + rotate: optionsSetup.textAngleYRight, textStyle: { - color: optionsSetup.colorY, // y轴 坐标文字颜色 - fontSize: optionsSetup.fontSizeY + // 坐标文字颜色 + color: optionsSetup.colorYRight, + fontSize: optionsSetup.fontSizeYRight } }, + axisTick: { // 刻度 + show: optionsSetup.tickLineYRight, + }, axisLine: { - show: true, + show: optionsSetup.lineYRight, lineStyle: { - color: optionsSetup.lineColorY + width: optionsSetup.lineWidthYRight, + color: optionsSetup.lineColorYRight, } }, splitLine: { - show: false, + show: optionsSetup.isShowSplitLineYRight, + lineStyle: { + color: optionsSetup.splitLineColorYRight, + width: optionsSetup.splitLineFontWidthYRight, + } } } ]; @@ -267,6 +303,7 @@ export default { const series = this.options.series; for (const key in series) { if (series[key].type == "line") { + series[key].symbol = optionsSetup.symbol; series[key].showSymbol = optionsSetup.markPoint; series[key].symbolSize = optionsSetup.pointSize; series[key].smooth = optionsSetup.smoothCurve; @@ -323,8 +360,8 @@ export default { trigger: "item", show: true, textStyle: { - color: optionsSetup.lineColor, - fontSize: optionsSetup.tipFontSize + color: optionsSetup.tipsColor, + fontSize: optionsSetup.tipsFontSize } }; this.options.tooltip = tooltip; @@ -351,10 +388,10 @@ export default { optionsSetup.longitudinalPosition; legend.orient = optionsSetup.layoutFront; legend.textStyle = { - color: optionsSetup.lengedColor, - fontSize: optionsSetup.lengedFontSize + color: optionsSetup.legendColor, + fontSize: optionsSetup.legendFontSize }; - legend.itemWidth = optionsSetup.lengedWidth; + legend.itemWidth = optionsSetup.legendWidth; }, // 图例名称设置 setOptionsLegendName(name){ diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetMoreBarLineChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetMoreBarLineChart.vue similarity index 77% rename from report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetMoreBarLineChart.vue rename to report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetMoreBarLineChart.vue index 18f74edc842ac660a52cedce08f1162a959d5eef..0123755fcedb607b654182f70fdbd1f0871c10df 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetMoreBarLineChart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetMoreBarLineChart.vue @@ -31,17 +31,7 @@ export default { top: '16%', containLabel: true }, - legend: { - data: ['调解成功', '调解失败', '调解终止', '调解成功率'], - left: '7%', - top: '5%', - textStyle: { - color: '#666666' - }, - itemWidth: 15, - itemHeight: 10, - itemGap: 25 - }, + legend: {}, xAxis: { type: 'category', data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019'], @@ -132,23 +122,6 @@ export default { }, data: [] }, - { - name: '调解终止', - type: 'bar', - itemStyle: { - normal: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ - offset: 0, - color: '#01c871' - }, { - offset: 1, - color: '#55f49c' - }]), - barBorderRadius: 6, - } - }, - data: [] - }, { name: '调解成功率', type: 'line', @@ -156,14 +129,13 @@ export default { smooth: false, //平滑曲线显示 symbol: 'circle', //标记的图形为实心圆 symbolSize: 8, //标记的大小 - itemStyle: { + /*itemStyle: { normal: { color: '#ffa43a', borderColor: 'rgba(255, 234, 0, 0.5)', //圆点透明 边框 borderWidth: 5 }, - - }, + },*/ lineStyle: { color: '#ffa43a' }, @@ -213,7 +185,6 @@ export default { this.setOptionsLegend(); this.setOptionsTooltip(); this.setOptionsMargin(); - this.setOptionsColor(); this.setOptionsData(); }, // 标题修改 @@ -226,49 +197,57 @@ export default { title.textStyle = { color: optionsSetup.textColor, fontSize: optionsSetup.textFontSize, - fontWeight: optionsSetup.textFontWeight + fontWeight: optionsSetup.textFontWeight, + fontStyle: optionsSetup.textFontStyle, }; title.subtext = optionsSetup.subText; title.subtextStyle = { color: optionsSetup.subTextColor, fontWeight: optionsSetup.subTextFontWeight, - fontSize: optionsSetup.subTextFontSize + fontSize: optionsSetup.subTextFontSize, + fontStyle: optionsSetup.subTextFontStyle, }; - this.options.title = title; }, // X轴设置 setOptionsX() { const optionsSetup = this.optionsSetup; const xAxis = { - type: 'category', - show: optionsSetup.hideX, // 坐标轴是否显示 - name: optionsSetup.xName, // 坐标轴名称 + type: "category", + // 坐标轴是否显示 + show: optionsSetup.hideX, + // 坐标轴名称 + name: optionsSetup.nameX, nameTextStyle: { color: optionsSetup.nameColorX, fontSize: optionsSetup.nameFontSizeX }, - nameRotate: optionsSetup.textAngle, // 文字角度 - inverse: optionsSetup.reversalX, // 轴反转 + // 轴反转 + inverse: optionsSetup.reversalX, axisLabel: { show: true, - interval: optionsSetup.textInterval, // 文字间隔 - rotate: optionsSetup.textAngle, // 文字角度 + // 文字间隔 + interval: optionsSetup.textInterval, + // 文字角度 + rotate: optionsSetup.textAngleX, textStyle: { - color: optionsSetup.Xcolor, // x轴 坐标文字颜色 + // 坐标文字颜色 + color: optionsSetup.colorX, fontSize: optionsSetup.fontSizeX } }, axisLine: { show: true, lineStyle: { - color: optionsSetup.lineColorX + color: optionsSetup.lineColorX, + width: optionsSetup.lineWidthX, } }, splitLine: { show: optionsSetup.isShowSplitLineX, lineStyle: { - color: optionsSetup.splitLineColorX + color: optionsSetup.splitLineColorX, + width: optionsSetup.splitLineWidthX, } } }; @@ -279,53 +258,85 @@ export default { const optionsSetup = this.optionsSetup; const yAxis = [ { - type: 'value', - show: optionsSetup.isShowYLeft, // 坐标轴是否显示 - name: optionsSetup.textNameYLeft, // 坐标轴名称 - nameTextStyle: { //颜色字号 + type: "value", + // 均分 + splitNumber: optionsSetup.splitNumberLeft, + // 坐标轴是否显示 + show: optionsSetup.isShowYLeft, + // 坐标轴名称 + name: optionsSetup.textNameYLeft, + // 别名 + nameTextStyle: { color: optionsSetup.nameColorYLeft, fontSize: optionsSetup.nameFontSizeYLeft }, axisLabel: { show: true, + // 文字角度 + rotate: optionsSetup.textAngleYLeft, textStyle: { - color: optionsSetup.colorY, // y轴 坐标文字颜色 - fontSize: optionsSetup.fontSizeY + // 坐标文字颜色 + color: optionsSetup.colorYLeft, + fontSize: optionsSetup.fontSizeYLeft } }, + axisTick: { // 刻度 + show: optionsSetup.tickLineYLeft, + }, axisLine: { - show: true, + show: optionsSetup.lineYLeft, lineStyle: { - color: optionsSetup.lineColorY + width: optionsSetup.lineWidthYLeft, + color: optionsSetup.lineColorYLeft } }, splitLine: { - show: false, + show: optionsSetup.isShowSplitLineYLeft, + lineStyle: { + color: optionsSetup.splitLineColorYLeft, + width: optionsSetup.splitLineFontWidthYLeft, + } } }, { - type: 'value', - show: optionsSetup.isShowYRight, // 坐标轴是否显示 - name: optionsSetup.textNameYRight, // 坐标轴名称 - nameTextStyle: { // 颜色字号 + type: "value", + // 均分 + splitNumber: optionsSetup.splitNumberRight, + // 坐标轴是否显示 + show: optionsSetup.isShowYRight, + // 坐标轴名称 + name: optionsSetup.textNameYRight, + // 别名 + nameTextStyle: { color: optionsSetup.nameColorYRight, fontSize: optionsSetup.nameFontSizeYRight }, axisLabel: { show: true, + // 文字角度 + rotate: optionsSetup.textAngleYRight, textStyle: { - color: optionsSetup.colorY, // y轴 坐标文字颜色 - fontSize: optionsSetup.fontSizeY + // 坐标文字颜色 + color: optionsSetup.colorYRight, + fontSize: optionsSetup.fontSizeYRight } }, + axisTick: { // 刻度 + show: optionsSetup.tickLineYRight, + }, axisLine: { - show: true, + show: optionsSetup.lineYRight, lineStyle: { - color: optionsSetup.lineColorY + width: optionsSetup.lineWidthYRight, + color: optionsSetup.lineColorYRight, } }, splitLine: { - show: false, + show: optionsSetup.isShowSplitLineYRight, + lineStyle: { + color: optionsSetup.splitLineColorYRight, + width: optionsSetup.splitLineFontWidthYRight, + } } } ]; @@ -338,8 +349,8 @@ export default { trigger: 'item', show: true, textStyle: { - color: optionsSetup.lineColor, - fontSize: optionsSetup.tipFontSize + color: optionsSetup.tipsColor, + fontSize: optionsSetup.tipsFontSize } }; this.options.tooltip = tooltip; @@ -366,13 +377,13 @@ export default { optionsSetup.longitudinalPosition; legend.orient = optionsSetup.layoutFront; legend.textStyle = { - color: optionsSetup.lengedColor, - fontSize: optionsSetup.lengedFontSize + color: optionsSetup.legendColor, + fontSize: optionsSetup.legendFontSize }; - legend.itemWidth = optionsSetup.lengedWidth; + legend.itemWidth = optionsSetup.legendWidth; }, // 图例名称设置 - setOptionsLegendName(name){ + setOptionsLegendName(name) { const optionsSetup = this.optionsSetup; const series = this.options.series; const legendName = optionsSetup.legendName; @@ -382,7 +393,7 @@ export default { series[i].name = name[i]; } this.options.legend['data'] = name; - }else { + } else { const arr = legendName.split('|'); for (let i = 0; i < arr.length; i++) { series[i].name = arr[i]; @@ -390,24 +401,6 @@ export default { this.options.legend['data'] = arr } }, - // 颜色修改 - setOptionsColor() { - const optionsSetup = this.optionsSetup; - const customColor = optionsSetup.customColor; - const series = this.options.series; - if (!customColor) return; - const arrColor = []; - for (let i = 0; i < customColor.length; i++) { - arrColor.push(customColor[i].color); - } - for (const i in series) { - if (series[i].type == 'bar') { - series[i].itemStyle.normal['color'] = arrColor[i]; - } else { - series[i].lineStyle['color'] = arrColor[i]; - } - } - }, // 数据处理 setOptionsData() { const optionsData = this.optionsData; // 数据类型 静态 or 动态 @@ -417,6 +410,12 @@ export default { }, staticDataFn(val) { const optionsSetup = this.optionsSetup; + //颜色 + const customColor = optionsSetup.customColor; + const arrColor = []; + for (let i = 0; i < customColor.length; i++) { + arrColor.push(customColor[i].color); + } const series = this.options.series; let axis = []; let bar1 = []; @@ -428,11 +427,17 @@ export default { bar2[i] = val[i].manus; line[i] = val[i].sales; } + const legendName = []; + legendName.push('调解成功'); + legendName.push('调解失败'); + legendName.push('调解成功率'); // x轴 this.options.xAxis.data = axis; // series for (const i in series) { if (series[i].type == 'bar') { + series[i].name = legendName[i]; + series[i].type = 'bar'; series[i].label = { show: optionsSetup.isShowBar, position: 'top', @@ -443,8 +448,12 @@ export default { }; series[i].barWidth = optionsSetup.maxWidth; series[i].itemStyle.normal['barBorderRadius'] = optionsSetup.radius; + series[i].itemStyle.normal['color'] = arrColor[i]; } else if (series[i].type == 'line') { + series[i].name = legendName[i]; + series[i].type = 'line'; series[i].yAxisIndex = 1; + series[i].symbol = optionsSetup.symbol; series[i].showSymbol = optionsSetup.markPoint; series[i].symbolSize = optionsSetup.pointSize; series[i].smooth = optionsSetup.smoothCurve; @@ -457,7 +466,13 @@ export default { opacity: 0 }; } + series[i].itemStyle = { + normal: { + color: arrColor[i], + } + }; series[i].lineStyle = { + color: arrColor[i], width: optionsSetup.lineWidth }; series[i].label = { @@ -472,11 +487,7 @@ export default { } series[0].data = bar1; series[1].data = bar2; - series[3].data = line; - const legendName = []; - legendName.push('调解成功'); - legendName.push('调解失败'); - legendName.push('调解成功率'); + series[2].data = line; this.options.legend['data'] = legendName; this.setOptionsLegendName(legendName); }, @@ -499,10 +510,17 @@ export default { }, renderingFn(val) { const optionsSetup = this.optionsSetup; + //颜色 + const customColor = optionsSetup.customColor; + const arrColor = []; + for (let i = 0; i < customColor.length; i++) { + arrColor.push(customColor[i].color); + } this.options.xAxis.data = val.xAxis; const series = []; const legendName = []; for (const i in val.series) { + legendName.push(val.series[i].name); const obj = {}; if (val.series[i].type == 'bar') { obj.name = val.series[i].name; @@ -518,6 +536,7 @@ export default { obj.barWidth = optionsSetup.maxWidth; obj.itemStyle = { normal: { + color: arrColor[i], barBorderRadius: optionsSetup.radius, } }; @@ -527,6 +546,7 @@ export default { obj.name = val.series[i].name; obj.type = val.series[i].type; obj.yAxisIndex = 1; + obj.symbol = optionsSetup.symbol; obj.showSymbol = optionsSetup.markPoint; obj.symbolSize = optionsSetup.pointSize; obj.smooth = optionsSetup.smoothCurve; @@ -537,9 +557,15 @@ export default { } else { obj.areaStyle = { opacity: 0 - }; + } } + obj.itemStyle = { + normal: { + color: arrColor[i], + } + }; obj.lineStyle = { + color: arrColor[i], width: optionsSetup.lineWidth }; obj.label = { @@ -553,7 +579,6 @@ export default { obj.data = val.series[i].data; series.push(obj); } - legendName.push(val.series[i].name); } this.options.series = series; this.options.legend['data'] = legendName; diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/widgetFunnel.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/funnel/widgetFunnel.vue similarity index 94% rename from report-ui/src/views/bigscreenDesigner/designer/widget/widgetFunnel.vue rename to report-ui/src/views/bigscreenDesigner/designer/widget/funnel/widgetFunnel.vue index 9ef5f5f3fa976e7b8503ec6056f4135c68a8cedf..684e5f75cb2bec2b4106395d1fcb604c9e105bd4 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/widgetFunnel.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/funnel/widgetFunnel.vue @@ -154,15 +154,16 @@ export default { title.textStyle = { color: optionsSetup.textColor, fontSize: optionsSetup.textFontSize, - fontWeight: optionsSetup.textFontWeight + fontWeight: optionsSetup.textFontWeight, + fontStyle: optionsSetup.textFontStyle, }; title.subtext = optionsSetup.subText; title.subtextStyle = { color: optionsSetup.subTextColor, fontWeight: optionsSetup.subTextFontWeight, - fontSize: optionsSetup.subTextFontSize + fontSize: optionsSetup.subTextFontSize, + fontStyle: optionsSetup.subTextFontStyle, }; - this.options.title = title; }, // 提示语设置 tooltip @@ -172,8 +173,8 @@ export default { trigger: "item", show: true, textStyle: { - color: optionsSetup.lineColor, - fontSize: optionsSetup.tipFontSize + color: optionsSetup.tipsColor, + fontSize: optionsSetup.tipsFontSize } }; this.options.tooltip = tooltip; @@ -190,10 +191,10 @@ export default { optionsSetup.longitudinalPosition; legend.orient = optionsSetup.layoutFront; legend.textStyle = { - color: optionsSetup.lengedColor, - fontSize: optionsSetup.lengedFontSize + color: optionsSetup.legendColor, + fontSize: optionsSetup.legendFontSize }; - legend.itemWidth = optionsSetup.lengedWidth; + legend.itemWidth = optionsSetup.legendWidth; }, // 图例颜色修改 setOptionsColor() { diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/heatmap/widgetHeatmap.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/heatmap/widgetHeatmap.vue index 47dd9268fa31b75acd4c3b1abcfc362ea8ee1a64..f3cb9f59ad3e0eb245a007c26a4edd86b54dc038 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/heatmap/widgetHeatmap.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/heatmap/widgetHeatmap.vue @@ -150,21 +150,22 @@ export default { // 标题修改 setOptionsTitle() { const optionsSetup = this.optionsSetup; - const title = { - text: optionsSetup.titleText, - show: optionsSetup.isNoTitle, - left: optionsSetup.textAlign, - textStyle: { - color: optionsSetup.textColor, - fontSize: optionsSetup.textFontSize, - fontWeight: optionsSetup.textFontWeight - }, - subtext: optionsSetup.subText, - subtextStyle: { - color: optionsSetup.subTextColor, - fontWeight: optionsSetup.subTextFontWeight, - fontSize: optionsSetup.subTextFontSize - }, + const title = {}; + title.text = optionsSetup.titleText; + title.show = optionsSetup.isNoTitle; + title.left = optionsSetup.textAlign; + title.textStyle = { + color: optionsSetup.textColor, + fontSize: optionsSetup.textFontSize, + fontWeight: optionsSetup.textFontWeight, + fontStyle: optionsSetup.textFontStyle, + }; + title.subtext = optionsSetup.subText; + title.subtextStyle = { + color: optionsSetup.subTextColor, + fontWeight: optionsSetup.subTextFontWeight, + fontSize: optionsSetup.subTextFontSize, + fontStyle: optionsSetup.subTextFontStyle, }; this.options.title = title; }, @@ -176,10 +177,10 @@ export default { // 坐标轴是否显示 show: optionsSetup.hideX, // 坐标轴名称 - name: optionsSetup.xName, + name: optionsSetup.nameX, nameTextStyle: { - color: optionsSetup.xNameColor, - fontSize: optionsSetup.xNameFontSize + color: optionsSetup.nameColorX, + fontSize: optionsSetup.nameFontSizeX }, // 轴反转 inverse: optionsSetup.reversalX, @@ -191,19 +192,17 @@ export default { rotate: optionsSetup.textAngleX, textStyle: { // 坐标文字颜色 - color: optionsSetup.Xcolor, + color: optionsSetup.colorX, fontSize: optionsSetup.fontSizeX } }, axisLine: { show: true, lineStyle: { - color: optionsSetup.lineColorX + color: optionsSetup.lineColorX, + width: optionsSetup.lineWidthX, } }, - splitArea: { - show: false, - }, }; this.options.xAxis = xAxis; }, @@ -211,16 +210,19 @@ export default { setOptionsY() { const optionsSetup = this.optionsSetup; const yAxis = { - type: "category", + type: "value", + scale: optionsSetup.scale, + // 均分 + splitNumber: optionsSetup.splitNumberY, // 坐标轴是否显示 show: optionsSetup.isShowY, // 坐标轴名称 name: optionsSetup.textNameY, nameTextStyle: { - color: optionsSetup.NameColorY, - fontSize: optionsSetup.NameFontSizeY + color: optionsSetup.nameColorY, + fontSize: optionsSetup.nameFontSizeY }, - // y轴反转 + // 轴反转 inverse: optionsSetup.reversalY, axisLabel: { show: true, @@ -235,12 +237,10 @@ export default { axisLine: { show: true, lineStyle: { - color: optionsSetup.lineColorY + color: optionsSetup.lineColorY, + width: optionsSetup.lineWidthY, } }, - splitArea: { - show: false, - }, }; this.options.yAxis = yAxis; }, @@ -277,8 +277,8 @@ export default { position: "top", show: true, textStyle: { - color: optionsSetup.lineColor, - fontSize: optionsSetup.tipsLineColor + color: optionsSetup.tipsColor, + fontSize: optionsSetup.tipsFontSize, } }; this.options.tooltip = tooltip; @@ -291,17 +291,17 @@ export default { visualMap.min = optionsSetup.dataMin; visualMap.max = optionsSetup.dataMax; visualMap.textStyle = { - fontSize : optionsSetup.lengedFontSize, - color : optionsSetup.lengedColor + fontSize : optionsSetup.legendFontSize, + color : optionsSetup.legendColor }; - visualMap.inRange.color = optionsSetup.lengedColorList.map((x) => { + visualMap.inRange.color = optionsSetup.legendColorList.map((x) => { return x.color; }); visualMap.left = optionsSetup.lateralPosition; visualMap.top = optionsSetup.longitudinalPosition; visualMap.bottom = optionsSetup.longitudinalPosition; visualMap.orient = optionsSetup.layoutFront; - visualMap.itemWidth = optionsSetup.lengedWidth; + visualMap.itemWidth = optionsSetup.legendWidth; }, setOptionsData() { const optionsData = this.optionsData; // 数据类型 静态 or 动态 diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineCompareChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineCompareChart.vue index 729ee3b90d732961f882561c713d766f1d49ff2f..e0ccd74709d8c56b49ec2b6ef46b19421e202fc7 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineCompareChart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineCompareChart.vue @@ -282,15 +282,23 @@ 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, + fontStyle: optionsSetup.textFontStyle, + }; + title.subtext = optionsSetup.subText; + title.subtextStyle = { + color: optionsSetup.subTextColor, + fontWeight: optionsSetup.subTextFontWeight, + fontSize: optionsSetup.subTextFontSize, + fontStyle: optionsSetup.subTextFontStyle, }; this.options.title = title; }, @@ -359,7 +367,7 @@ export default { name: optionsSetup.textNameYTop, // 坐标轴名称 nameTextStyle: { color: optionsSetup.nameColorYTop, - fontSize: optionsSetup.namefontSizeYTop + fontSize: optionsSetup.nameFontSizeYTop }, axisLabel: { show: true, @@ -380,7 +388,7 @@ export default { splitLine: { show: optionsSetup.splitLineYTop, lineStyle: { - width: optionsSetup.splitLinefontSizeYTop, + width: optionsSetup.splitLineFontWidthYTop, color: optionsSetup.splitLineColorYTop, }, }, @@ -401,7 +409,7 @@ export default { name: optionsSetup.textNameYBottom, // 坐标轴名称 nameTextStyle: { color: optionsSetup.nameColorYBottom, - fontSize: optionsSetup.namefontSizeYBottom + fontSize: optionsSetup.nameFontSizeYBottom }, inverse: true, // 翻转 axisLabel: { @@ -423,7 +431,7 @@ export default { splitLine: { show: optionsSetup.splitLineYBottom, lineStyle: { - width: optionsSetup.splitLinefontSizeYBottom, + width: optionsSetup.splitLineFontWidthYBottom, color: optionsSetup.splitLineColorYBottom, }, }, @@ -439,6 +447,7 @@ export default { const series = this.options.series // 折线 for (const key in series) { + series[key].symbol = optionsSetup.symbol series[key].showSymbol = optionsSetup.markPoint series[key].symbolSize = optionsSetup.pointSize series[key].smooth = optionsSetup.smoothCurve @@ -476,30 +485,30 @@ export default { setOptionsTooltip() { const optionsSetup = this.optionsSetup; let tooltip = {} - if (optionsSetup.tipType == "line") { + if (optionsSetup.tipsType == "line") { tooltip = { - show: optionsSetup.tipShow, + show: optionsSetup.tipsShow, trigger: 'axis', axisPointer: { - type: optionsSetup.tipType, + type: optionsSetup.tipsType, lineStyle: { - color: optionsSetup.tipColor, + color: optionsSetup.tipsColor, type: 'dashed', }, }, } } else { tooltip = { - show: optionsSetup.tipShow, + show: optionsSetup.tipsShow, trigger: 'axis', axisPointer: { - type: optionsSetup.tipType, + type: optionsSetup.tipsType, lineStyle: { - color: optionsSetup.tipColor, + color: optionsSetup.tipsColor, type: 'dashed', }, crossStyle: { - color: optionsSetup.tipColor, + color: optionsSetup.tipsColor, } }, } @@ -538,10 +547,10 @@ export default { optionsSetup.longitudinalPosition; legend.orient = optionsSetup.layoutFront; legend.textStyle = { - color: optionsSetup.lengedColor, - fontSize: optionsSetup.lengedFontSize + color: optionsSetup.legendColor, + fontSize: optionsSetup.legendFontSize }; - legend.itemWidth = optionsSetup.lengedWidth; + legend.itemWidth = optionsSetup.legendWidth; }, // 图例名称设置 setOptionsLegendName(name){ diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue index 6bfd591f5e17c080f7598c80ea240d4b0438f0fe..b57c6c20d7e7093e1c11c7022c43557336379bc2 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue @@ -111,13 +111,15 @@ export default { title.textStyle = { color: optionsSetup.textColor, fontSize: optionsSetup.textFontSize, - fontWeight: optionsSetup.textFontWeight + fontWeight: optionsSetup.textFontWeight, + fontStyle: optionsSetup.textFontStyle, }; title.subtext = optionsSetup.subText; title.subtextStyle = { color: optionsSetup.subTextColor, fontWeight: optionsSetup.subTextFontWeight, - fontSize: optionsSetup.subTextFontSize + fontSize: optionsSetup.subTextFontSize, + fontStyle: optionsSetup.subTextFontStyle, }; this.options.title = title; }, @@ -129,10 +131,10 @@ export default { // 坐标轴是否显示 show: optionsSetup.hideX, // 坐标轴名称 - name: optionsSetup.xName, + name: optionsSetup.nameX, nameTextStyle: { - color: optionsSetup.xNameColor, - fontSize: optionsSetup.xNameFontSize + color: optionsSetup.nameColorX, + fontSize: optionsSetup.nameFontSizeX }, // 轴反转 inverse: optionsSetup.reversalX, @@ -144,20 +146,22 @@ export default { rotate: optionsSetup.textAngleX, textStyle: { // 坐标文字颜色 - color: optionsSetup.Xcolor, + color: optionsSetup.colorX, fontSize: optionsSetup.fontSizeX } }, axisLine: { show: true, lineStyle: { - color: optionsSetup.lineColorX + color: optionsSetup.lineColorX, + width: optionsSetup.lineWidthX, } }, splitLine: { show: optionsSetup.isShowSplitLineX, lineStyle: { - color: optionsSetup.splitLineColorX + color: optionsSetup.splitLineColorX, + width: optionsSetup.splitLineWidthX, } } }; @@ -168,22 +172,25 @@ export default { const optionsSetup = this.optionsSetup; const yAxis = { type: "value", + scale: optionsSetup.scale, + // 均分 + splitNumber: optionsSetup.splitNumberY, // 坐标轴是否显示 show: optionsSetup.isShowY, // 坐标轴名称 name: optionsSetup.textNameY, nameTextStyle: { - color: optionsSetup.NameColorY, - fontSize: optionsSetup.NameFontSizeY + color: optionsSetup.nameColorY, + fontSize: optionsSetup.nameFontSizeY }, - // y轴反转 + // 轴反转 inverse: optionsSetup.reversalY, axisLabel: { show: true, // 文字角度 rotate: optionsSetup.textAngleY, textStyle: { - // y轴 坐标文字颜色 + // 坐标文字颜色 color: optionsSetup.colorY, fontSize: optionsSetup.fontSizeY } @@ -191,13 +198,15 @@ export default { axisLine: { show: true, lineStyle: { - color: optionsSetup.lineColorY + color: optionsSetup.lineColorY, + width: optionsSetup.lineWidthY, } }, splitLine: { show: optionsSetup.isShowSplitLineY, lineStyle: { - color: optionsSetup.splitLineColorY + color: optionsSetup.splitLineColorY, + width: optionsSetup.splitLineWidthY, } } }; @@ -225,7 +234,7 @@ export default { trigger: "item", show: true, textStyle: { - color: optionsSetup.lineColor, + color: optionsSetup.tipsColor, fontSize: optionsSetup.tipsFontSize } }; @@ -254,13 +263,13 @@ export default { optionsSetup.longitudinalPosition; legend.orient = optionsSetup.layoutFront; legend.textStyle = { - color: optionsSetup.lengedColor, - fontSize: optionsSetup.lengedFontSize + color: optionsSetup.legendColor, + fontSize: optionsSetup.legendFontSize }; - legend.itemWidth = optionsSetup.lengedWidth; + legend.itemWidth = optionsSetup.legendWidth; }, // 图例名称设置 - setOptionsLegendName(name){ + setOptionsLegendName(name) { const optionsSetup = this.optionsSetup; const series = this.options.series; const legendName = optionsSetup.legendName; @@ -270,7 +279,7 @@ export default { series[i].name = name[i]; } this.options.legend['data'] = name; - }else { + } else { const arr = legendName.split('|'); for (let i = 0; i < arr.length; i++) { series[i].name = arr[i]; @@ -347,7 +356,7 @@ export default { type: "line", data: data, width: optionsSetup.lineWidth, - symbol: 'circle', + symbol: optionsSetup.symbol, showSymbol: optionsSetup.markPoint, symbolSize: optionsSetup.pointSize, smooth: optionsSetup.smoothCurve, @@ -434,7 +443,7 @@ export default { type: "line", data: val.series[i].data, width: optionsSetup.lineWidth, - symbol: 'circle', + symbol: optionsSetup.symbol, showSymbol: optionsSetup.markPoint, symbolSize: optionsSetup.pointSize, symbolColor: arrColor[i], diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue index 8505293ed7825d693ebf2ab8f96663e33de55c02..f650fce8157ce55cc4a0e346b7e3e95ef38e8c50 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue @@ -117,13 +117,15 @@ export default { title.textStyle = { color: optionsSetup.textColor, fontSize: optionsSetup.textFontSize, - fontWeight: optionsSetup.textFontWeight + fontWeight: optionsSetup.textFontWeight, + fontStyle: optionsSetup.textFontStyle, }; title.subtext = optionsSetup.subText; title.subtextStyle = { color: optionsSetup.subTextColor, fontWeight: optionsSetup.subTextFontWeight, - fontSize: optionsSetup.subTextFontSize + fontSize: optionsSetup.subTextFontSize, + fontStyle: optionsSetup.subTextFontStyle, }; this.options.title = title; }, @@ -132,33 +134,40 @@ export default { const optionsSetup = this.optionsSetup; const xAxis = { type: "category", - show: optionsSetup.hideX, // 坐标轴是否显示 - name: optionsSetup.xName, // 坐标轴名称 + // 坐标轴是否显示 + show: optionsSetup.hideX, + // 坐标轴名称 + name: optionsSetup.nameX, nameTextStyle: { color: optionsSetup.nameColorX, fontSize: optionsSetup.nameFontSizeX }, - nameRotate: optionsSetup.textAngle, // 文字角度 - inverse: optionsSetup.reversalX, // 轴反转 + // 轴反转 + inverse: optionsSetup.reversalX, axisLabel: { show: true, - interval: optionsSetup.textInterval, // 文字间隔 - rotate: optionsSetup.textAngle, // 文字角度 + // 文字间隔 + interval: optionsSetup.textInterval, + // 文字角度 + rotate: optionsSetup.textAngleX, textStyle: { - color: optionsSetup.Xcolor, // x轴 坐标文字颜色 + // 坐标文字颜色 + color: optionsSetup.colorX, fontSize: optionsSetup.fontSizeX } }, axisLine: { show: true, lineStyle: { - color: optionsSetup.lineColorX + color: optionsSetup.lineColorX, + width: optionsSetup.lineWidthX, } }, splitLine: { show: optionsSetup.isShowSplitLineX, lineStyle: { - color: optionsSetup.splitLineColorX + color: optionsSetup.splitLineColorX, + width: optionsSetup.splitLineWidthX, } } }; @@ -170,32 +179,40 @@ export default { const yAxis = { type: "value", scale: optionsSetup.scale, - splitNumber: optionsSetup.splitNumber,// 均分 - show: optionsSetup.isShowY, // 坐标轴是否显示 - name: optionsSetup.textNameY, // 坐标轴名称 - nameTextStyle: { // 别名 + // 均分 + splitNumber: optionsSetup.splitNumberY, + // 坐标轴是否显示 + show: optionsSetup.isShowY, + // 坐标轴名称 + name: optionsSetup.textNameY, + nameTextStyle: { color: optionsSetup.nameColorY, - fontSize: optionsSetup.namefontSizeY + fontSize: optionsSetup.nameFontSizeY }, - inverse: optionsSetup.reversalY, // 轴反转 + // 轴反转 + inverse: optionsSetup.reversalY, axisLabel: { show: true, - rotate: optionsSetup.ytextAngle, // 文字角度 + // 文字角度 + rotate: optionsSetup.textAngleY, textStyle: { - color: optionsSetup.colorY, // y轴 坐标文字颜色 + // 坐标文字颜色 + color: optionsSetup.colorY, fontSize: optionsSetup.fontSizeY } }, axisLine: { show: true, lineStyle: { - color: optionsSetup.lineColorY + color: optionsSetup.lineColorY, + width: optionsSetup.lineWidthY, } }, splitLine: { show: optionsSetup.isShowSplitLineY, lineStyle: { - color: optionsSetup.splitLineColorY + color: optionsSetup.splitLineColorY, + width: optionsSetup.splitLineWidthY, } } }; @@ -207,6 +224,7 @@ export default { const series = this.options.series; for (const key in series) { if (series[key].type == "line") { + series[key].symbol = optionsSetup.symbol; series[key].showSymbol = optionsSetup.markPoint; series[key].symbolSize = optionsSetup.pointSize; series[key].smooth = optionsSetup.smoothCurve; @@ -219,7 +237,6 @@ export default { opacity: 0 }; } - series[key].lineStyle = { width: optionsSetup.lineWidth }; @@ -242,7 +259,7 @@ export default { trigger: "item", show: true, textStyle: { - color: optionsSetup.lineColor, + color: optionsSetup.tipsColor, fontSize: optionsSetup.tipsFontSize } }; diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetAirBubbleMap.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetAirBubbleMap.vue index f16f75aebfb78fc3086efe53b9d16ea181594d31..1fcd4824c072b51008ce91711f7e76d50fa1e1fb 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetAirBubbleMap.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetAirBubbleMap.vue @@ -437,21 +437,23 @@ 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.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, + fontStyle: optionsSetup.textFontStyle, }; - 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, + fontStyle: optionsSetup.subTextFontStyle, }; this.options.title = title; }, diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetLineMap.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetLineMap.vue index 0eea8b8b19fdf7ca1d66a45f1ac7adfeafa397b8..67f2ec43349eb25015fa1fc22b3893687979a068 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetLineMap.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetLineMap.vue @@ -350,19 +350,21 @@ export default { setOptionsTitle() { const optionsSetup = this.optionsSetup; const title = {}; - title.show = optionsSetup.isNoTitle; title.text = optionsSetup.titleText; + title.show = optionsSetup.isNoTitle; title.left = optionsSetup.textAlign; title.textStyle = { color: optionsSetup.textColor, fontSize: optionsSetup.textFontSize, - fontWeight: optionsSetup.textFontWeight + fontWeight: optionsSetup.textFontWeight, + fontStyle: optionsSetup.textFontStyle, }; title.subtext = optionsSetup.subText; title.subtextStyle = { color: optionsSetup.subTextColor, fontWeight: optionsSetup.subTextFontWeight, - fontSize: optionsSetup.subTextFontSize + fontSize: optionsSetup.subTextFontSize, + fontStyle: optionsSetup.subTextFontStyle, }; this.options.title = title; }, diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue index fccb7274cd0178ece74986fbe76dc249fb9a605d..d9860f68ac726de7e8ee38287b1ffd9f0ff83ad7 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue @@ -92,98 +92,100 @@ 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, + fontStyle: optionsSetup.textFontStyle, }; - 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, + fontStyle: optionsSetup.subTextFontStyle, }; 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.tipsColor, + fontSize: optionsSetup.tipsFontSize } }; 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.legendColor, + fontSize: optionsSetup.legendFontSize }; - legend.itemWidth = optionsCollapse.lengedWidth; + legend.itemWidth = optionsSetup.legendWidth; }, // 图例颜色修改 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/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue index 1124a94c4dc44f17eae4d9a86377215ebe437def..523f42aa661f8e42c008d08020a245d7434c0e1a 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue @@ -105,19 +105,21 @@ export default { setOptionsTitle() { const optionsSetup = this.optionsSetup; const title = {}; - title.show = optionsSetup.isNoTitle; title.text = optionsSetup.titleText; + title.show = optionsSetup.isNoTitle; title.left = optionsSetup.textAlign; title.textStyle = { color: optionsSetup.textColor, fontSize: optionsSetup.textFontSize, - fontWeight: optionsSetup.textFontWeight + fontWeight: optionsSetup.textFontWeight, + fontStyle: optionsSetup.textFontStyle, }; title.subtext = optionsSetup.subText; title.subtextStyle = { color: optionsSetup.subTextColor, fontWeight: optionsSetup.subTextFontWeight, - fontSize: optionsSetup.subTextFontSize + fontSize: optionsSetup.subTextFontSize, + fontStyle: optionsSetup.subTextFontStyle, }; this.options.title = title; }, @@ -157,7 +159,7 @@ export default { show: true, textStyle: { color: optionsSetup.lineColor, - fontSize: optionsSetup.fontSize + fontSize: optionsSetup.tipFontSize } }; this.options.tooltip = tooltip; @@ -174,10 +176,10 @@ export default { optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto"; legend.orient = optionsSetup.layoutFront; legend.textStyle = { - color: optionsSetup.lengedColor, - fontSize: optionsSetup.fontSize + color: optionsSetup.legendColor, + fontSize: optionsSetup.legendFontSize }; - legend.itemWidth = optionsSetup.lengedWidth; + legend.itemWidth = optionsSetup.legendWidth; }, // 图例颜色修改 setOptionsColor() { diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/radar/widgetRadar.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/radar/widgetRadar.vue new file mode 100644 index 0000000000000000000000000000000000000000..a1822b17d92a6a40d9a3ff8802d2f7b71cb58276 --- /dev/null +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/radar/widgetRadar.vue @@ -0,0 +1,393 @@ + + + diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue index 01b1c91844928e7912cfeb4ed5f54e078fe1ddec..b9507f6bfc951291a6310c1eb07b9c523efaa115 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue @@ -21,10 +21,10 @@ import widgetVideo from "./widgetVideo.vue"; import WidgetIframe from "./widgetIframe.vue"; import widgetBarchart from "./bar/widgetBarchart.vue"; import widgetLinechart from "./line/widgetLinechart.vue"; -import widgetBarlinechart from "./bar/widgetBarlinechart"; +import widgetBarlinechart from "./barline/widgetBarlinechart"; import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue"; import WidgetPiechart from "./pie/widgetPiechart.vue"; -import WidgetFunnel from "./widgetFunnel.vue"; +import WidgetFunnel from "./funnel/widgetFunnel.vue"; import WidgetGauge from "./percent/widgetGauge.vue"; import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRose"; import widgetTable from "./widgetTable.vue"; @@ -36,9 +36,11 @@ import widgetLineStackChart from "./line/widgetLineStackChart"; import widgetBarCompareChart from "./bar/widgetBarCompareChart"; import widgetLineCompareChart from "./line/widgetLineCompareChart"; import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart"; -import widgetMoreBarLineChart from "./bar/widgetMoreBarLineChart"; +import widgetMoreBarLineChart from "./barline/widgetMoreBarLineChart"; import widgetWordCloud from "./wordcloud/widgetWordCloud"; import widgetHeatmap from "./heatmap/widgetHeatmap"; +import widgetRadar from "./radar/widgetRadar"; +import widgetBarLineStackChart from "./barline/widgetBarLineStackChart"; export default { name: "WidgetTemp", @@ -70,7 +72,9 @@ export default { widgetDecoratePieChart, widgetMoreBarLineChart, widgetWordCloud, - widgetHeatmap + widgetHeatmap, + widgetRadar, + widgetBarLineStackChart }, model: { prop: "value", diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/temp1.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/temp1.vue new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue index f86d7b50173ada3b010148c5ed77f0124d63e817..621830d4824c76d77676047a9821d61c87128520 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue @@ -33,9 +33,9 @@ import WidgetIframe from "./widgetIframe.vue"; import widgetBarchart from "./bar/widgetBarchart.vue"; import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue"; import widgetLinechart from "./line/widgetLinechart.vue"; -import widgetBarlinechart from "./bar/widgetBarlinechart"; +import widgetBarlinechart from "./barline/widgetBarlinechart"; import WidgetPiechart from "./pie/widgetPiechart.vue"; -import WidgetFunnel from "./widgetFunnel.vue"; +import WidgetFunnel from "./funnel/widgetFunnel.vue"; import WidgetGauge from "./percent/widgetGauge.vue"; import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRose"; import widgetTable from "./widgetTable.vue"; @@ -47,9 +47,11 @@ import widgetLineStackChart from "./line/widgetLineStackChart"; import widgetBarCompareChart from "./bar/widgetBarCompareChart"; import widgetLineCompareChart from "./line/widgetLineCompareChart"; import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart"; -import widgetMoreBarLineChart from "./bar/widgetMoreBarLineChart"; +import widgetMoreBarLineChart from "./barline/widgetMoreBarLineChart"; import widgetWordCloud from "./wordcloud/widgetWordCloud"; import widgetHeatmap from "./heatmap/widgetHeatmap"; +import widgetRadar from "./radar/widgetRadar"; +import widgetBarLineStackChart from "./barline/widgetBarLineStackChart"; export default { name: "Widget", @@ -81,7 +83,9 @@ export default { widgetDecoratePieChart, widgetMoreBarLineChart, widgetWordCloud, - widgetHeatmap + widgetHeatmap, + widgetRadar, + widgetBarLineStackChart }, model: { prop: "value", @@ -106,7 +110,9 @@ export default { data: { setup: {}, data: {}, - position: {} + position: {}, +/* leftMargin: null, + topMargin: null*/ } }; }, @@ -118,10 +124,10 @@ export default { return this.value.position.height; }, widgetsLeft() { - return this.value.position.left; + return this.value.position.left// >= this.leftMargin ? this.leftMargin : this.value.position.left; }, widgetsTop() { - return this.value.position.top; + return this.value.position.top// >= this.topMargin ? this.topMargin : this.value.position.top; }, widgetsZIndex() { return this.value.position.zIndex || 1; @@ -133,6 +139,28 @@ export default { handleBlur({ index, left, top, width, height }) { this.$emit("onActivated", { index, left, top, width, height }); this.$refs.draggable.setActive(true); + // 处理widget超出workbench的问题 + //this.handleBoundary({ index, left, top, width, height }) + }, + handleBoundary({ index, left, top, width, height }) { + // 计算workbench的X轴边界值 + // 组件距离左侧宽度 + 组件宽度 > 大屏总宽度时，右侧边界值 = (大屏宽度 - 组件宽度)；左侧边界值 = 0 + const { bigscreenWidth, bigscreenHeight } = this.bigscreen; + const xBoundaryValue = (left + width) > bigscreenWidth ? bigscreenWidth - width : left < 0 ? 0 : left; + // 初始化X轴边界值 + this.leftMargin = left; + // 计算Y轴边界值 + const yBoundaryValue = (top + height) > bigscreenHeight ? bigscreenHeight - height : top < 0 ? 0 : top; + // 初始化Y轴边界值 + this.topMargin = top; + // 若位置超出边界值则重新设置位置 + if (this.leftMargin != xBoundaryValue || this.topMargin != yBoundaryValue) { + this.$nextTick(() => { + this.leftMargin = xBoundaryValue; + this.topMargin = yBoundaryValue; + this.$emit("onActivated", { index, left: xBoundaryValue, top: yBoundaryValue, width, height }); + }) + } } } }; diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/wordcloud/widgetWordCloud.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/wordcloud/widgetWordCloud.vue index 201e5c90f1041529dfb9aff90fbffb9f11abbea6..acad3ff4cbb28cb340a491e812a3eade406c27a7 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/wordcloud/widgetWordCloud.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/wordcloud/widgetWordCloud.vue @@ -103,13 +103,15 @@ export default { title.textStyle = { color: optionsSetup.textColor, fontSize: optionsSetup.textFontSize, - fontWeight: optionsSetup.textFontWeight + fontWeight: optionsSetup.textFontWeight, + fontStyle: optionsSetup.textFontStyle, }; title.subtext = optionsSetup.subText; title.subtextStyle = { color: optionsSetup.subTextColor, fontWeight: optionsSetup.subTextFontWeight, - fontSize: optionsSetup.subTextFontSize + fontSize: optionsSetup.subTextFontSize, + fontStyle: optionsSetup.subTextFontStyle, }; this.options.title = title; }, @@ -130,8 +132,8 @@ export default { trigger: "item", show: true, textStyle: { - color: optionsSetup.lineColor, - fontSize: optionsSetup.fontSize + color: optionsSetup.tipsColor, + fontSize: optionsSetup.tipsFontSize } }; this.options.tooltip = tooltip; diff --git a/report-ui/src/views/excelreport/designer/index.vue b/report-ui/src/views/excelreport/designer/index.vue index 64e05f1df6530811200e0ede832d7d6038188382..319a32a1ac1962b5e2a230fdcb120e8d3acf76c3 100644 --- a/report-ui/src/views/excelreport/designer/index.vue +++ b/report-ui/src/views/excelreport/designer/index.vue @@ -25,7 +25,7 @@ -
      + -
      - 个人/商业使用须遵循Apache2.0开源协议。 +
      + 个人/商业使用须遵循Apache2.0开源协议。 禁止将AJ-Report产品用于违法违规业务。
      diff --git a/report-ui/src/views/layout/components/Sidebar/index.vue b/report-ui/src/views/layout/components/Sidebar/index.vue index 170228c31487495c9c657c305ebb4998100e601f..2e95413b5a0ad634e963bb3f02407fa956936433 100644 --- a/report-ui/src/views/layout/components/Sidebar/index.vue +++ b/report-ui/src/views/layout/components/Sidebar/index.vue @@ -3,7 +3,7 @@
      - V0.9.8.1 + V0.9.9
      -
      + -
      - 个人/商业使用须遵循Apache2.0开源协议。 +
      + 个人/商业使用须遵循Apache2.0开源协议。 禁止将AJ-Report产品用于违法违规业务。