!33 update 0.9.5

Merge pull request !33 from Foming/dev
Foming 3 years ago committed by Gitee
commit 322af591e1

@ -1,7 +1,7 @@
## 简介
&emsp; &emsp; AJ-Report是全开源的一个BI平台酷炫大屏展示能随时随地掌控业务动态让每个决策都有数据支撑。<br>
&emsp; &emsp; 多数据源支持内置mysql、elasticsearch、kudu驱动支持自定义数据集省去数据接口开发支持17+种大屏组件,不会开发,照着设计稿也可以制作大屏。<br>
&emsp; &emsp; 多数据源支持内置mysql、elasticsearch、kudu驱动支持自定义数据集省去数据接口开发目前已支持20种大屏组件/图表,不会开发,照着设计稿也可以制作大屏。<br>
&emsp; &emsp; 三步轻松完成大屏设计:配置数据源---->写SQL配置数据集---->拖拽配置大屏---->保存发布。欢迎体验。
## 在线体验
@ -65,8 +65,8 @@
### 依赖
- [Mysql] 5.7+
- [Jdk] 1.8+
- [Mysql] 5.7
- [Jdk] 1.8
### 后端
@ -93,9 +93,9 @@
在Linux上先准备好maven、node.js、jdk
- [Apache Maven] 3.5 +<br>
- [Node.js] v14.16.0+<br>
- [Jdk] 1.8+
- [Apache Maven] 3.5 <br>
- [Node.js] v14.16.0 <br>
- [Jdk] 1.8
```
git clone https://gitee.com/anji-plus/report.git
@ -113,6 +113,8 @@ bin/start.bat Windows修改第4行的JAVA_HOME后(去掉rem注释),双击启
http://serverip:9095
```
**开发环境参考文档:** <br>
https://report.anji-plus.com/report-doc/guide/quicklyDevelop.html <br>
**源码编译部署参考文档:** <br>
https://report.anji-plus.com/report-doc/guide/quicklySource.html <br>
**发行版部署参考文档:** <br>
@ -143,6 +145,7 @@ sql文件的目录在report-core --> src --> main --> resources -- > db.migra
<a href='https://www.gykjweb.com/'><img src="https://report.anji-plus.com/file/download/d13b03f5-0c20-4878-9a79-f3c76b44bfd9" width = "130" height = "130" /> </a> <br>
<a href='http://www.plian.net/'><img src="https://report.anji-plus.com/file/download/7838f2c2-fdce-4ca7-8373-14d13dcda5cc" width = "130" height = "50" /> </a>
## 未来计划
- 增加装饰图、省市区地图等图
@ -151,6 +154,7 @@ sql文件的目录在report-core --> src --> main --> resources -- > db.migra
- http数据源调整
- 大屏工具栏使用二级菜单显示
- Execl报表功能增加与bug修复
- 使用vue3 + ts
## 已知问题
@ -165,9 +169,6 @@ sql文件的目录在report-core --> src --> main --> resources -- > db.migra
- Jdk 11
- Mysql 8.08.0.23/26版本没有问题8.0.21版本存在问题)
AJ-Report 使用Druid版本为1.2.6如果你觉得你配置都是正常但是数据源测试不过请尝试修改pom文件降低Druid版本。 <br>
例如MSSQLSERVER 2014请将Druid版本降低为1.2.1以下(需要修改源码)。 <br>
常见问题https://report.anji-plus.com/report-doc/guide/question.html <br>
## 商业授权
@ -191,6 +192,5 @@ AJ-Report使用[Apache2.0开源协议](http://www.apache.org/licenses/LICENSE-2.
个人企业微信:<br>
<img src="https://images.gitee.com/uploads/images/2021/0729/130901_1672e6c5_7492051.jpeg" width = "200" height = "200" align=left/>
#### 开源不易劳烦各位star ☺

@ -1,31 +1,41 @@
&emsp; &emsp; AJ-Report是一个完全开源的BI平台酷炫大屏展示能随时随地掌控业务动态让每个决策都有数据支撑。<br>
&emsp; &emsp; 多数据源支持内置mysql、elasticsearch、kudu等多种驱动支持自定义数据集省去数据接口开发支持17+种大屏组件,不会开发,照着设计稿也可以制作大屏。<br>
&emsp; &emsp; 三步轻松完成大屏设计:配置数据源---->写SQL配置数据集---->拖拽配置大屏---->保存发布。欢迎体验。
&emsp; &emsp; AJ-Report是一个完全开源的BI平台酷炫大屏展示能随时随地掌控业务动态让每个决策都有数据支撑。<br>
&emsp; &emsp; 多数据源支持内置mysql、elasticsearch、kudu等多种驱动支持自定义数据集省去数据接口开发目前已支持20种大屏组件/图表,不会开发,照着设计稿也可以制作大屏。<br>
&emsp; &emsp; 三步轻松完成大屏设计:配置数据源---->写SQL配置数据集---->拖拽配置大屏---->保存发布。欢迎体验。
## 系统特性
1. 最新最稳定的技术栈;
2. 支持多数据源配置
3. 丰富的大屏组件。拖拽配置实现动态大屏
## 在线体验
#### &emsp; 电脑在线体验: [https://report.anji-plus.com/index.html](https://report.anji-plus.com/index.html "链接") &emsp;体验账号guest 密码guest
#### &emsp; 在线文档: [https://report.anji-plus.com/report-doc/](https://report.anji-plus.com/report-doc/ "doc")<br>
#### &emsp; 在线提问: [https://gitee.com/anji-plus/report/issues](https://gitee.com/anji-plus/report/issues "issue")<br>
#### &emsp; 电脑在线体验: [https://report.anji-plus.com/index.html](https://report.anji-plus.com/index.html "链接") &emsp;体验账号guest 密码guest
#### &emsp; 在线文档: [https://report.anji-plus.com/report-doc/](https://report.anji-plus.com/report-doc/ "doc")<br>
#### &emsp; 在线提问: [https://gitee.com/anji-plus/report/issues](https://gitee.com/anji-plus/report/issues "issue")<br>
## 发行版本
#### &emsp; 下载链接:[https://gitee.com/anji-plus/report/releases](https://gitee.com/anji-plus/report/releases "下载链接")<br>
#### &emsp; 下载链接:[https://gitee.com/anji-plus/report/releases](https://gitee.com/anji-plus/report/releases "下载链接")<br>
## 功能概述
#### &emsp; 组件介绍
&emsp;&emsp; 大屏设计AJ-Report是一个可视化拖拽编辑的直观酷炫具有科技感的图表工具全开源项目。
内置的基础功能包括数据源,数据集,报表管理,项目部分截图如下。<br>
#### &emsp; 组件介绍
&emsp;&emsp; 大屏设计AJ-Report是一个可视化拖拽编辑的直观酷炫具有科技感的图表工具全开源项目。 内置的基础功能包括数据源,数据集,报表管理,项目部分截图如下。<br>
**在线案例还在努力创造中,敬请期待!!!**
![操作](../picture/shipin.gif)
![更多案例](https://report.anji-plus.com/report-doc/static/Rhea.mp4) <br>
## 数据流程图
![流程.png](../picture/liucheng.png)
## 打包目录
```
├── bin 启动命令脚本
│ ├── restart.sh
@ -40,6 +50,7 @@
```
## 系统目录
```
├── doc 文档源码
│ ├── docs

@ -4,4 +4,5 @@
<a href='https://www.yunstech.cn/'><img src="https://www.yunstech.cn/images/logo.png" width = "130" height = "50" /> </a>
<a href='http://www.fgkb.net/'><img src="https://report.anji-plus.com/file/download/9ee5b709-5033-4cd5-a784-ebd2877fd373" width = "130" height = "50" /> </a>
<a href='http://www.turingoal.com/'><img src="https://report.anji-plus.com/file/download/cda7bf68-376b-45dc-9a55-c52b21e4a8c8" width = "130" height = "50" /> </a>
<a href='http://www.plian.net/'><img src="https://report.anji-plus.com/file/download/7838f2c2-fdce-4ca7-8373-14d13dcda5cc" width = "130" height = "50" /> </a>
<a href='https://www.gykjweb.com/'><img src="https://report.anji-plus.com/file/download/d13b03f5-0c20-4878-9a79-f3c76b44bfd9" width = "130" height = "130" /> </a>

@ -1,11 +1,43 @@
## Mysql数据集
在数据源处添加了mysql的数据源后即可使用。
![img_1.png](../picture/dateset/img_1.png)
**注**:目前,查询参数和数据转化功能待补全中,建议等完善了再使用。
![img5](../picture/dateset/img_5.png)
## ES数据集
**注**es是通过调用xpack-sql注意写法
![es.png](../picture/dateset/img.png)
## SQL数据集
## Kudu数据集
![kudu.png](../picture/dateset/img_2.png)
### Mysql数据集
在数据源处添加了mysql的数据源后即可使用。<br>
![img_1.png](../picture/dateset/img_1.png) <br>
### ES数据集
**注**es是通过调用xpack-sql注意写法 <br>
![es.png](../picture/dateset/img.png) <br>
### Kudu数据集
![kudu.png](../picture/dateset/img_2.png) <br>
## 功能栏
**可以看在线环境,有示例参考** <br>
### 查询参数
![img3](../picture/dateset/img_3.png) <br>
注意参数名要和sql(请求体)中变量名保持一致sql(请求体)中的变量用 ${} 表示 <br>
高级规则是用js进行数据装换。
### 数据转换
#### js脚本
**注**这里的JS是java的scriptengine执行的很多es6的语法不支持 <br>
![img4](../picture/dateset/img_4.png) <br>
入参是data返回值也必须是data中间是JS的处理过程注意入参返回都是List<JSONObject>,记得保存。 <br>
#### 字典项
场景有限,待补充。
## HTTP数据集
即原有http数据源的功能原有http数据源不动

@ -29,7 +29,6 @@
- 数据源数据集用法总结 <br>
[链接](https://my.oschina.net/u/4517014/blog/5270828) <br>
**注**http数据源未来会挪到数据集那边 <br>
### 执行源码编译脚本build.sh报错
@ -48,6 +47,14 @@
- 使用IDEA进行源码编译时提示“*** openjdk-***” <br>
请使用jdk1.8
### 启动服务报错
- 提示“xxx The driver has not received any packets from the server” <br>
连不上mysql。<br>
1、确保软件打包正常 <br>
2、mysql版本不兼容详细看上面关于版本兼容性 <br>
3、bootstrap.yml中配置的mysql地址ip不对 <br>

@ -20,11 +20,11 @@ npm run build
### 编译环境
- [Apache Maven] 3.5 +<br>
- [Node.js] v14.16.0+<br>
- [Apache Maven] 3.5 <br>
- [Node.js] v14.16.0 <br>
- [Jdk] 1.8 <br>
请在你的Windows上先准备好maven、node.js、jdk <br>
**注**:已知**Jdk11**存在兼容性问题请不要使用openJdk环境问题请看**常见问题**大类 <br>
**注**:已知**Jdk11**存在兼容性问题请不要使用openJdk环境问题请看 **常见问题** 大类 <br>
### 克隆源码

@ -17,10 +17,10 @@ http://serverip:9095
请在Linux上先准备好maven、node.js、jdk
- [Apache Maven] 3.5 + <br>
- [Node.js] v14.16.0 + <br>
- [Apache Maven] 3.5 <br>
- [Node.js] v14.16.0 <br>
- [Jdk] 1.8 <br>
**注**:已知**Jdk11**存在兼容性问题请不要使用openJdk环境问题请看**常见问题**大类 <br>
**注**:已知**Jdk11**存在兼容性问题请不要使用openJdk环境问题请看 **常见问题** 大类 <br>
## 克隆源码

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

@ -79,7 +79,7 @@
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.2.6</version>
<version>1.2.0</version>
</dependency>
<dependency>
<groupId>org.flywaydb</groupId>

@ -0,0 +1,56 @@
package com.anjiplus.template.gaea.business.enums;
public enum SetTypeEnum {
SQL("sql", "sql"),
HTTP("http", "http"),
;
private String codeValue;
private String codeDesc;
private SetTypeEnum(String codeValue, String codeDesc) {
this.codeValue = codeValue;
this.codeDesc = codeDesc;
}
public String getCodeValue() {
return this.codeValue;
}
public String getCodeDesc() {
return this.codeDesc;
}
//根据codeValue获取枚举
public static SetTypeEnum parseFromCodeValue(String codeValue) {
for (SetTypeEnum e : SetTypeEnum.values()) {
if (e.codeValue == codeValue) {
return e;
}
}
return null;
}
//根据codeValue获取描述
public static String getCodeDescByCodeBalue(String codeValue) {
SetTypeEnum enumItem = parseFromCodeValue(codeValue);
return enumItem == null ? "" : enumItem.getCodeDesc();
}
//验证codeValue是否有效
public static boolean validateCodeValue(String codeValue) {
return parseFromCodeValue(codeValue) != null;
}
//列出所有值字符串
public static String getString() {
StringBuffer buffer = new StringBuffer();
for (SetTypeEnum e : SetTypeEnum.values()) {
buffer.append(e.codeValue).append("--").append(e.getCodeDesc()).append(", ");
}
buffer.deleteCharAt(buffer.lastIndexOf(","));
return buffer.toString().trim();
}
}

@ -29,6 +29,10 @@ public class DataSetDto extends GaeaBaseDTO implements Serializable {
/** 数据集描述 */
private String setDesc;
/** 数据集类型 */
private String setType;
/** 数据源编码 */
private String sourceCode;

@ -27,4 +27,8 @@ public class DataSetParam extends PageParam implements Serializable{
/** 数据源编码 */
@Query(QueryEnum.EQ)
private String sourceCode;
/** 数据集类型 */
@Query(QueryEnum.EQ)
private String setType;
}

@ -19,12 +19,14 @@ import java.util.List;
public class DataSetTestTransformParam implements Serializable{
/** 数据源编码 */
@NotBlank(message = "sourceCode not empty")
private String sourceCode;
/** 动态查询sql或者接口中的请求体 */
private String dynSentence;
/** 数据集类型 */
private String setType;
/** 请求参数集合 */
private List<DataSetParamDto> dataSetParamDtoList;

@ -26,6 +26,9 @@ public class DataSet extends GaeaBaseEntity {
@ApiModelProperty(value = "数据集描述")
private String setDesc;
@ApiModelProperty(value = "数据集类型")
private String setType;
@ApiModelProperty(value = "数据源编码")
private String sourceCode;

@ -8,6 +8,7 @@ import com.anji.plus.gaea.curd.mapper.GaeaBaseMapper;
import com.anji.plus.gaea.exception.BusinessExceptionBuilder;
import com.anji.plus.gaea.utils.GaeaBeanUtils;
import com.anjiplus.template.gaea.business.code.ResponseCode;
import com.anjiplus.template.gaea.business.enums.SetTypeEnum;
import com.anjiplus.template.gaea.business.modules.dataset.controller.dto.OriginalDataDto;
import com.anjiplus.template.gaea.business.modules.dataset.controller.dto.DataSetDto;
import com.anjiplus.template.gaea.business.modules.dataset.dao.DataSetMapper;
@ -22,6 +23,7 @@ import com.anjiplus.template.gaea.business.modules.datasettransform.service.Data
import com.anjiplus.template.gaea.business.modules.datasource.controller.dto.DataSourceDto;
import com.anjiplus.template.gaea.business.modules.datasource.dao.entity.DataSource;
import com.anjiplus.template.gaea.business.modules.datasource.service.DataSourceService;
import com.anjiplus.template.gaea.business.util.JdbcConstants;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
@ -218,12 +220,31 @@ public class DataSetServiceImpl implements DataSetService {
*/
@Override
public OriginalDataDto getData(DataSetDto dto) {
OriginalDataDto originalDataDto = new OriginalDataDto();
String setCode = dto.getSetCode();
//1.获取数据集、参数替换、数据转换
DataSetDto dataSetDto = detailSet(setCode);
String dynSentence = dataSetDto.getDynSentence();
//2.获取数据源
DataSource dataSource = dataSourceService.selectOne("source_code", dataSetDto.getSourceCode());
DataSource dataSource;
if (StringUtils.isNotBlank(dataSetDto.getSetType())
&& dataSetDto.getSetType().equals(SetTypeEnum.HTTP.getCodeValue())) {
//http不需要数据源兼容已有的逻辑将http所需要的数据塞进DataSource
dataSource = new DataSource();
dataSource.setSourceConfig(dynSentence);
dataSource.setSourceType(JdbcConstants.HTTP);
String body = JSONObject.parseObject(dynSentence).getString("body");
if (StringUtils.isNotBlank(body)) {
dynSentence = body;
}else {
dynSentence = "{}";
}
}else {
dataSource = dataSourceService.selectOne("source_code", dataSetDto.getSourceCode());
}
//3.参数替换
//3.1参数校验
log.debug("参数校验替换前:{}", dto.getContextData());
@ -231,7 +252,7 @@ public class DataSetServiceImpl implements DataSetService {
if (!verification) {
throw BusinessExceptionBuilder.build(ResponseCode.RULE_FIELDS_CHECK_ERROR);
}
String dynSentence = dataSetParamService.transform(dto.getContextData(), dataSetDto.getDynSentence());
dynSentence = dataSetParamService.transform(dto.getContextData(), dynSentence);
log.debug("参数校验替换后:{}", dto.getContextData());
//4.获取数据
DataSourceDto dataSourceDto = new DataSourceDto();
@ -258,10 +279,28 @@ public class DataSetServiceImpl implements DataSetService {
*/
@Override
public OriginalDataDto testTransform(DataSetDto dto) {
String dynSentence = dto.getDynSentence();
OriginalDataDto originalDataDto = new OriginalDataDto();
String sourceCode = dto.getSourceCode();
//1.获取数据源
DataSource dataSource = dataSourceService.selectOne("source_code", sourceCode);
DataSource dataSource;
if (dto.getSetType().equals(SetTypeEnum.HTTP.getCodeValue())) {
//http不需要数据源兼容已有的逻辑将http所需要的数据塞进DataSource
dataSource = new DataSource();
dataSource.setSourceConfig(dynSentence);
dataSource.setSourceType(JdbcConstants.HTTP);
String body = JSONObject.parseObject(dynSentence).getString("body");
if (StringUtils.isNotBlank(body)) {
dynSentence = body;
}else {
dynSentence = "{}";
}
}else {
dataSource = dataSourceService.selectOne("source_code", sourceCode);
}
//3.参数替换
//3.1参数校验
boolean verification = dataSetParamService.verification(dto.getDataSetParamDtoList(), null);
@ -269,7 +308,7 @@ public class DataSetServiceImpl implements DataSetService {
throw BusinessExceptionBuilder.build(ResponseCode.RULE_FIELDS_CHECK_ERROR);
}
String dynSentence = dataSetParamService.transform(dto.getDataSetParamDtoList(), dto.getDynSentence());
dynSentence = dataSetParamService.transform(dto.getDataSetParamDtoList(), dynSentence);
//4.获取数据
DataSourceDto dataSourceDto = new DataSourceDto();
BeanUtils.copyProperties(dataSource, dataSourceDto);

@ -66,7 +66,7 @@ logging:
customer:
# 开发测试用本地文件,如果是生产,请考虑使用对象存储
file:
#上传对应本地全路径
#上传对应本地全路径,路径必须是真实存在的
dist-path: /app/disk/upload/
white-list: .png|.jpg|.gif|.icon|.pdf|.xlsx|.xls|.csv|.mp4|.avi
excelSuffix: .xlsx|.xls|.csv

@ -0,0 +1,14 @@
use
aj_report;
-- 增加字段
ALTER TABLE `gaea_report_data_set` DROP COLUMN `set_type`;
-- 将该字段值全更新为sql
update gaea_report_data_set set set_type = 'sql';
-- 字典
INSERT INTO `gaea_dict`(`id`, `dict_name`, `dict_code`, `remark`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES (default, '数据集类型', 'SET_TYPE', '数据集类型', 'admin', '2021-11-16 14:43:12', 'admin', '2021-11-16 14:43:12', 1);
INSERT INTO `gaea_dict_item`(`id`, `dict_code`, `item_name`, `item_value`, `item_extend`, `enabled`, `locale`, `remark`, `sort`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES (default , 'SET_TYPE', 'sql', 'sql', NULL, 1, 'zh', NULL, NULL, 'admin', '2021-11-16 14:43:42', 'admin', '2021-11-16 14:43:42', 1);
INSERT INTO `gaea_dict_item`(`id`, `dict_code`, `item_name`, `item_value`, `item_extend`, `enabled`, `locale`, `remark`, `sort`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES (default , 'SET_TYPE', 'http', 'http', NULL, 1, 'zh', NULL, NULL, 'admin', '2021-11-16 14:43:51', 'admin', '2021-11-16 14:43:51', 1);

@ -0,0 +1,445 @@
/*
* @Descripttion: 装饰饼图
* @version:
* @Author: foming
* @Date:
* @LastEditors:
* @LastEditTime:
*/
export const widgetDecoratePie = {
code: 'widgetDecoratePieChart',
type: 'chart',
label: '装饰饼图',
icon: 'iconicon_tubiao_bingtu',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '静态装饰饼图',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
[
{
name: '最外环设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isLastRingShow',
required: false,
placeholder: '',
value: true
},
{
type: 'vue-color',
label: '0%颜色',
name: 'lastRing0Color',
required: false,
placeholder: '',
value: '#4FADFD'
},
{
type: 'vue-color',
label: '100%颜色',
name: 'lastRing100Color',
required: false,
placeholder: '',
value: '#28E8FA'
},
]
},
{
name: '八分环设置',
list: [
{
type: 'vue-color',
label: '颜色',
name: 'eightColor',
required: false,
placeholder: '',
value: '#4FADFD'
},
]
},
{
name: '虚线环设置',
list: [
{
type: 'el-input-number',
label: '虚线数量',
name: 'dottedNum',
required: false,
placeholder: '',
value: 40
},
{
type: 'vue-color',
label: '颜色',
name: 'dottedColor',
required: false,
placeholder: '',
value: '#28E8FA'
},
]
},
{
name: '三分环设置',
list: [
{
type: 'vue-color',
label: '一段颜色',
name: 'three1Color',
required: false,
placeholder: '',
value: '#fc8d89'
},
{
type: 'vue-color',
label: '二段颜色',
name: 'three2Color',
required: false,
placeholder: '',
value: '#46d3f3'
},
{
type: 'vue-color',
label: '三段颜色',
name: 'three3Color',
required: false,
placeholder: '',
value: 'rgba(203,203,203,.2)'
},
]
},
{
name: '外指标环设置',
list: [
{
type: 'el-switch',
label: '环显示',
name: 'isOutRingShow',
required: false,
placeholder: '',
value: false
},
{
type: 'vue-color',
label: '环颜色',
name: 'outRingColor',
required: false,
placeholder: '',
value: '#0dc2fe'
},
{
type: 'el-input-number',
label: '环宽度',
name: 'outRingWidth',
required: false,
placeholder: '',
value: 1
},
{
type: 'el-switch',
label: '指标线显示',
name: 'isOutSplitShow',
required: false,
placeholder: '',
value: true
},
{
type: 'el-input-number',
label: '指标线数量',
name: 'outSplitNum',
required: false,
placeholder: '',
value: 30
},
{
type: 'el-input-number',
label: '指标线长度',
name: 'outSplitLength',
required: false,
placeholder: '',
value: 32
},
{
type: 'el-input-number',
label: '指标线宽度',
name: 'outSplitWidth',
required: false,
placeholder: '',
value: 2
},
{
type: 'vue-color',
label: '指标线颜色',
name: 'outSplitColor',
required: false,
placeholder: '',
value: '#0dc2fe'
},
{
type: 'el-switch',
label: '刻度线显示',
name: 'isOutTickShow',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '刻度线数量',
name: 'outTickNum',
required: false,
placeholder: '',
value: 5
},
{
type: 'el-input-number',
label: '刻度线长度',
name: 'outTickLength',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-input-number',
label: '刻度线宽度',
name: 'outTickWidth',
required: false,
placeholder: '',
value: 2
},
{
type: 'vue-color',
label: '刻度线颜色',
name: 'outTickColor',
required: false,
placeholder: '',
value: '#0dc2fe'
},
]
},
{
name: '里指标环设置',
list: [
{
type: 'el-switch',
label: '环显示',
name: 'isInRingShow',
required: false,
placeholder: '',
value: false
},
{
type: 'vue-color',
label: '环颜色',
name: 'inRingColor',
required: false,
placeholder: '',
value: '#0dc2fe'
},
{
type: 'el-input-number',
label: '环宽度',
name: 'inRingWidth',
required: false,
placeholder: '',
value: 1
},
{
type: 'el-switch',
label: '指标线显示',
name: 'isInSplitShow',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '指标线数量',
name: 'inSplitNum',
required: false,
placeholder: '',
value: 30
},
{
type: 'el-input-number',
label: '指标线长度',
name: 'inSplitLength',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-input-number',
label: '指标线宽度',
name: 'inSplitWidth',
required: false,
placeholder: '',
value: 2
},
{
type: 'vue-color',
label: '指标线颜色',
name: 'inSplitColor',
required: false,
placeholder: '',
value: '#0dc2fe'
},
{
type: 'el-switch',
label: '刻度线显示',
name: 'isInTickShow',
required: false,
placeholder: '',
value: true
},
{
type: 'el-input-number',
label: '刻度线数量',
name: 'inTickNum',
required: false,
placeholder: '',
value: 5
},
{
type: 'el-input-number',
label: '刻度线长度',
name: 'inTickLength',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-input-number',
label: '刻度线宽度',
name: 'inTickWidth',
required: false,
placeholder: '',
value: 2
},
{
type: 'vue-color',
label: '刻度线颜色',
name: 'inTickColor',
required: false,
placeholder: '',
value: '#0dc2fe'
},
]
},
{
name: '环外环设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isRingOnRingShow',
required: false,
placeholder: '',
value: true
},
{
type: 'vue-color',
label: '颜色',
name: 'ringOnRingColor',
required: false,
placeholder: '',
value: '#4FADFD'
},
]
},
{
name: '中饼图设置',
list: [
{
type: 'el-input-number',
label: '半径',
name: 'pieWidth',
required: false,
placeholder: '',
value: 40
},
{
type: 'vue-color',
label: '颜色',
name: 'pieColor',
required: false,
placeholder: '',
value: '#0dc2fe'
},
{
type: 'vue-color',
label: '边框颜色',
name: 'pieBorderColor',
required: false,
placeholder: '',
value: '#3D4268'
},
{
type: 'el-select',
label: '分块',
name: 'pieBlocks',
required: false,
placeholder: '',
selectOptions: [
{code: 'four', name: '十字星'},
{code: 'five', name: '五角星'},
{code: 'six', name: '六芒星'},
],
value: 'six'
},
]
},
],
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 400,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 300,
},
],
}
}

@ -7,377 +7,384 @@
* @LastEditTime: 2021-09-28 14:12:37
*/
export const widgetFunnel = {
code: 'widget-funnel',
type: 'chart',
label: '漏斗图',
icon: 'iconloudoutu',
options: {
// 配置
setup: [
code: 'widget-funnel',
type: 'chart',
label: '漏斗图',
icon: 'iconloudoutu',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '漏斗图',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-switch',
label: '翻转',
name: 'ending',
require: false,
placeholder: '',
value: false,
},
[
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '漏斗图',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
[
{
name: '文字设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShow',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
require: false,
placeholder: '',
value: 12,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'color',
require: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeight',
require: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-switch',
label: '反转',
name: 'reversal',
require: false,
placeholder: '',
value: 0
},
],
},
{
name: '标题设置',
list: [
{
type: 'el-switch',
label: '标题',
name: 'isNoTitle',
required: false,
placeholder: '',
value: true
},
{
type: 'el-input-text',
label: '标题',
name: 'titleText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'textColor',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-select',
label: '字体粗细',
name: 'textFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'textFontSize',
required: false,
placeholder: '',
value: 12
},
{
type: 'el-select',
label: '字体位置',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'left'
},
{
type: 'el-input-text',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-select',
label: '字体粗细',
name: 'subTextFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: ''
},
],
},
{
name: '提示语设置',
list: [
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '网格线颜色',
name: 'lineColor',
required: false,
placeholder: '',
value: ''
},
],
},
{
name: '图例操作',
list: [
{
type: 'el-switch',
label: '图例',
name: 'isShowLegend',
required: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lengedColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字体大小',
name: 'lengedFontSize',
required: false,
placeholder: '',
value: 16,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'lengedWidth',
required: false,
placeholder: '',
value: 10,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: ''
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'},
],
value: ''
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'},
],
value: ''
},
],
},
{
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{color: '#0CD2E6'}, {color: '#00BFA5'}, {color: '#FFC722'}, {color: '#886EFF'}, {color: '#008DEC'}],
},
],
},
],
],
// 数据
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
name: '标题设置',
list: [
{
type: 'el-switch',
label: '标题',
name: 'isNoTitle',
required: false,
placeholder: '',
value: false,
},
{
type: 'el-input-text',
label: '标题',
name: 'titleText',
required: false,
placeholder: '',
value: '',
},
{
code: 'staticData',
name: '静态数据',
type: 'vue-color',
label: '字体颜色',
name: 'textColor',
required: false,
placeholder: '',
value: '#FFD700'
},
{
code: 'dynamicData',
name: '动态数据',
type: 'el-select',
label: '字体粗细',
name: 'textFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'textFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
label: '字体位置',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-input-text',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: 'rgba(30, 144, 255, 1)'
},
{
type: 'el-select',
label: '字体粗细',
name: 'subTextFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 16
},
],
value: 'staticData',
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 5000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [{"value": 60,"name": "访问"},{"value": 40, "name": "咨询"},{"value": 20, "name": "订单"},{"value": 80,"name":"点击"},{"value":100,"name":"展现"}],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
chartType: 'widget-funnel',
relactiveDomValue: 'dynamicData',
dictKey: 'PIE_PROPERTIES',
value: '',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: '',
value: 0,
name: '数值设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShow',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-input-number',
label: '字体字号',
name: 'fontSize',
require: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'color',
require: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeight',
require: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
],
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: '',
value: 0,
name: '图例操作',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowLegend',
required: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lengedColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字体字号',
name: 'lengedFontSize',
required: false,
placeholder: '',
value: 16,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'lengedWidth',
required: false,
placeholder: '',
value: 15,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'},
],
value: 'top'
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'},
],
value: 'horizontal'
},
],
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 400,
name: '提示语设置',
list: [
{
type: 'el-input-number',
label: '字体字号',
name: 'tipFontSize',
required: false,
placeholder: '',
value: 14
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lineColor',
required: false,
placeholder: '',
value: ''
},
],
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 200,
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{color: '#0CD2E6'}, {color: '#00BFA5'}, {color: '#FFC722'}, {color: '#886EFF'}, {color: '#008DEC'}],
},
],
},
],
}
],
// 数据
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
code: 'staticData',
name: '静态数据',
},
{
code: 'dynamicData',
name: '动态数据',
},
],
value: 'staticData',
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 5000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{"value": 2, "name": "访问"},
{"value": 5, "name": "咨询"},
{"value": 20, "name": "订单"},
{"value": 40, "name": "点击"},
{"value": 125, "name": "展现"}
],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
chartType: 'widget-funnel',
relactiveDomValue: 'dynamicData',
dictKey: 'PIE_PROPERTIES',
value: '',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 400,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 500,
},
],
}
}

@ -324,7 +324,9 @@ export const widgetGauge = {
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: 50,
value: [
{"num":50}
],
},
{
type: 'dycustComponents',

@ -113,7 +113,7 @@ export const widgetPiePercentage = {
name: 'lineLength',
required: false,
placeholder: '',
value: 15
value: 19
},
{
type: 'el-input-number',
@ -121,7 +121,7 @@ export const widgetPiePercentage = {
name: 'lineWidth',
required: false,
placeholder: '',
value: 5
value: 2
},
{
type: 'vue-color',
@ -201,7 +201,9 @@ export const widgetPiePercentage = {
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: 60,
value: [
{"num":60}
],
},
{
type: 'dycustComponents',
@ -248,7 +250,7 @@ export const widgetPiePercentage = {
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 200,
value: 300,
},
],
}

@ -7,31 +7,32 @@
* @LastEditTime: 2021-09-28 13:33:47
*/
import { widgetText } from "./echartsConfigJson/widget-text"
import { widgetMarquee } from "./echartsConfigJson/widget-marquee"
import { widgetHref } from "./echartsConfigJson/widget-href"
import { widgetTime } from "./echartsConfigJson/widget-time"
import { widgetImage } from "./echartsConfigJson/widget-image"
import { widgetSliders } from "./echartsConfigJson/widget-slider"
import { widgetVideo } from "./echartsConfigJson/widget-video"
import { widgetTable } from "./echartsConfigJson/widget-table"
import { widgetIframe } from "./echartsConfigJson/widget-iframe"
import { widgetUniversal } from "./echartsConfigJson/widget-universal"
import { widgetBarchart } from "./echartsConfigJson/widget-barchart"
import { widgetGradientBarchart } from "./echartsConfigJson/widget-gradient-barchart"
import { widgetLinechart } from "./echartsConfigJson/widget-linechart"
import { widgetBarlinechart } from "./echartsConfigJson/widget-barlinechart"
import { widgetPiechart } from "./echartsConfigJson/widget-piechart"
import { widgetFunnel } from "./echartsConfigJson/widget-funnel"
import { widgetGauge } from "./echartsConfigJson/widget-gauge"
import { widgetMap } from "./echartsConfigJson/widget-map"
import { WidgetPieNightingale } from "./echartsConfigJson/widget-pie-nightingale"
import { widgetPiePercentage } from "./echartsConfigJson/widget-pie-percentage"
import { widgetAirbubbleMap } from "./echartsConfigJson/widget-airbubble-map"
import { widgetBarStack } from "./echartsConfigJson/widget-bar-stack"
import { widgetLineStack } from "./echartsConfigJson/widget-line-stack"
import { widgetBarCompare } from "./echartsConfigJson/widget-bar-compare"
import { widgetLineCompare } from "./echartsConfigJson/widget-line-compare"
import {widgetText} from "./echartsConfigJson/widget-text"
import {widgetMarquee} from "./echartsConfigJson/widget-marquee"
import {widgetHref} from "./echartsConfigJson/widget-href"
import {widgetTime} from "./echartsConfigJson/widget-time"
import {widgetImage} from "./echartsConfigJson/widget-image"
import {widgetSliders} from "./echartsConfigJson/widget-slider"
import {widgetVideo} from "./echartsConfigJson/widget-video"
import {widgetTable} from "./echartsConfigJson/widget-table"
import {widgetIframe} from "./echartsConfigJson/widget-iframe"
import {widgetUniversal} from "./echartsConfigJson/widget-universal"
import {widgetBarchart} from "./echartsConfigJson/widget-barchart"
import {widgetGradientBarchart} from "./echartsConfigJson/widget-gradient-barchart"
import {widgetLinechart} from "./echartsConfigJson/widget-linechart"
import {widgetBarlinechart} from "./echartsConfigJson/widget-barlinechart"
import {widgetPiechart} from "./echartsConfigJson/widget-piechart"
import {widgetFunnel} from "./echartsConfigJson/widget-funnel"
import {widgetGauge} from "./echartsConfigJson/widget-gauge"
import {widgetMap} from "./echartsConfigJson/widget-map"
import {WidgetPieNightingale} from "./echartsConfigJson/widget-pie-nightingale"
import {widgetPiePercentage} from "./echartsConfigJson/widget-pie-percentage"
import {widgetAirbubbleMap} from "./echartsConfigJson/widget-airbubble-map"
import {widgetBarStack} from "./echartsConfigJson/widget-bar-stack"
import {widgetLineStack} from "./echartsConfigJson/widget-line-stack"
import {widgetBarCompare} from "./echartsConfigJson/widget-bar-compare"
import {widgetLineCompare} from "./echartsConfigJson/widget-line-compare"
import {widgetDecoratePie} from "./echartsConfigJson/widget-decorate-pie";
export const widgetTool = [
// type=html类型的组件
@ -59,5 +60,6 @@ export const widgetTool = [
widgetBarStack,
widgetLineStack,
widgetBarCompare,
widgetLineCompare
widgetLineCompare,
widgetDecoratePie
]

@ -256,7 +256,7 @@ export default {
handler(val) {
this.optionsStyle = val.position;
this.optionsData = val.data;
this.optionsSetup = val.setup;
this.optionsCollapse = val.setup;
this.optionsSetup = val.setup;
this.editorOptions();
},

@ -299,32 +299,37 @@ export default {
const optionsSetup = this.optionsSetup;
const optionsData = this.optionsData; // or
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup)
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(
optionsData.dynamicData,
optionsData.refreshTime,
optionsSetup
optionsData.dynamicData,
optionsData.refreshTime,
optionsSetup
);
},
//
staticDataFn(val, optionsSetup) {
const staticData = typeof val == "string" ? JSON.parse(val) : val;
staticDataFn(val) {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
let axis = [];
let data = [];
for (const i in val) {
axis[i] = val[i].axis;
data[i] = val[i].data
}
// x
if (optionsSetup.verticalShow) {
this.options.xAxis.data = [];
this.options.yAxis.data = staticData.categories;
this.options.yAxis.data = axis;
this.options.xAxis.type = "value";
this.options.yAxis.type = "category";
} else {
this.options.xAxis.data = staticData.categories;
this.options.xAxis.data = axis;
this.options.yAxis.data = [];
this.options.xAxis.type = "category";
this.options.yAxis.type = "value";
}
// series
const series = this.options.series;
if (series[0].type == "bar") {
series[0].data = staticData.series[0].data;
series[0].data = data;
}
},
//

@ -143,57 +143,57 @@ export default {
},
//
setOptionsTitle() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const title = {};
title.text = optionsCollapse.titleText;
title.show = optionsCollapse.isNoTitle;
title.left = optionsCollapse.textAlign;
title.text = optionsSetup.titleText;
title.show = optionsSetup.isNoTitle;
title.left = optionsSetup.textAlign;
title.textStyle = {
color: optionsCollapse.textColor,
fontSize: optionsCollapse.textFontSize,
fontWeight: optionsCollapse.textFontWeight
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight
};
title.subtext = optionsCollapse.subText;
title.subtext = optionsSetup.subText;
title.subtextStyle = {
color: optionsCollapse.subTextColor,
fontWeight: optionsCollapse.subTextFontWeight,
fontSize: optionsCollapse.subTextFontSize
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsSetup.subTextFontSize
};
this.options.title = title;
},
// X
setOptionsX() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const xAxis = {
type: "category",
show: optionsCollapse.hideX, //
name: optionsCollapse.xName, //
show: optionsSetup.hideX, //
name: optionsSetup.xName, //
nameTextStyle: {
color: optionsCollapse.nameColorX,
fontSize: optionsCollapse.nameFontSizeX
color: optionsSetup.nameColorX,
fontSize: optionsSetup.nameFontSizeX
},
nameRotate: optionsCollapse.textAngle, //
inverse: optionsCollapse.reversalX, //
nameRotate: optionsSetup.textAngle, //
inverse: optionsSetup.reversalX, //
axisLabel: {
show: true,
interval: optionsCollapse.textInterval, //
rotate: optionsCollapse.textAngle, //
interval: optionsSetup.textInterval, //
rotate: optionsSetup.textAngle, //
textStyle: {
color: optionsCollapse.Xcolor, // x
fontSize: optionsCollapse.fontSizeX
color: optionsSetup.Xcolor, // x
fontSize: optionsSetup.fontSizeX
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsCollapse.lineColorX
color: optionsSetup.lineColorX
}
},
splitLine: {
show: optionsCollapse.isShowSplitLineX,
show: optionsSetup.isShowSplitLineX,
lineStyle: {
color: optionsCollapse.splitLineColorX
color: optionsSetup.splitLineColorX
}
}
};
@ -201,29 +201,29 @@ export default {
},
// Y
setOptionsY() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const yAxis = [
{
type: "value",
splitNumber: optionsCollapse.splitNumberLeft,//
show: optionsCollapse.isShowYLeft, //
name: optionsCollapse.textNameYLeft, //
splitNumber: optionsSetup.splitNumberLeft,//
show: optionsSetup.isShowYLeft, //
name: optionsSetup.textNameYLeft, //
nameTextStyle: { //
color: optionsCollapse.nameColorYLeft,
fontSize: optionsCollapse.namefontSizeYLeft
color: optionsSetup.nameColorYLeft,
fontSize: optionsSetup.namefontSizeYLeft
},
inverse: optionsCollapse.reversalY, //
inverse: optionsSetup.reversalY, //
axisLabel: {
show: true,
textStyle: {
color: optionsCollapse.colorY, // y
fontSize: optionsCollapse.fontSizeY
color: optionsSetup.colorY, // y
fontSize: optionsSetup.fontSizeY
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsCollapse.lineColorY
color: optionsSetup.lineColorY
}
},
splitLine: {
@ -232,25 +232,25 @@ export default {
},
{
type: "value",
splitNumber: optionsCollapse.splitNumberRight,//
show: optionsCollapse.isShowYRight, //
name: optionsCollapse.textNameYRight, //
splitNumber: optionsSetup.splitNumberRight,//
show: optionsSetup.isShowYRight, //
name: optionsSetup.textNameYRight, //
nameTextStyle: { //
color: optionsCollapse.nameColorYRight,
fontSize: optionsCollapse.namefontSizeYRight
color: optionsSetup.nameColorYRight,
fontSize: optionsSetup.namefontSizeYRight
},
inverse: optionsCollapse.reversalY, //
inverse: optionsSetup.reversalY, //
axisLabel: {
show: true,
textStyle: {
color: optionsCollapse.colorY, // y
fontSize: optionsCollapse.fontSizeY
color: optionsSetup.colorY, // y
fontSize: optionsSetup.fontSizeY
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsCollapse.lineColorY
color: optionsSetup.lineColorY
}
},
splitLine: {
@ -262,16 +262,16 @@ export default {
},
// 线
setOptionsTop() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const series = this.options.series;
for (const key in series) {
if (series[key].type == "line") {
series[key].showSymbol = optionsCollapse.markPoint;
series[key].symbolSize = optionsCollapse.pointSize;
series[key].smooth = optionsCollapse.smoothCurve;
if (optionsCollapse.area) {
series[key].showSymbol = optionsSetup.markPoint;
series[key].symbolSize = optionsSetup.pointSize;
series[key].smooth = optionsSetup.smoothCurve;
if (optionsSetup.area) {
series[key].areaStyle = {
opacity: optionsCollapse.areaThickness / 100
opacity: optionsSetup.areaThickness / 100
};
} else {
series[key].areaStyle = {
@ -279,16 +279,16 @@ export default {
};
}
series[key].lineStyle = {
width: optionsCollapse.lineWidth
width: optionsSetup.lineWidth
};
series[key].itemStyle.borderRadius = optionsCollapse.radius;
series[key].itemStyle.borderRadius = optionsSetup.radius;
series[key].label = {
show: optionsCollapse.isShowLine,
show: optionsSetup.isShowLine,
position: "top",
distance: optionsCollapse.distanceLine,
fontSize: optionsCollapse.fontSizeLine,
color: optionsCollapse.subTextColorLine,
fontWeight: optionsCollapse.fontWeightLine
distance: optionsSetup.distanceLine,
fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine
};
}
}
@ -296,71 +296,54 @@ export default {
},
//
setOptionsBar() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const series = this.options.series;
for (const key in series) {
if (series[key].type == "bar") {
series[key].label = {
show: optionsCollapse.isShowBar,
show: optionsSetup.isShowBar,
position: "top",
distance: optionsCollapse.distanceBar,
fontSize: optionsCollapse.fontSizeBar,
color: optionsCollapse.subTextColorBar,
fontWeight: optionsCollapse.fontWeightBar
distance: optionsSetup.distanceBar,
fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar,
fontWeight: optionsSetup.fontWeightBar
};
series[key].barWidth = optionsCollapse.maxWidth;
series[key].barMinHeight = optionsCollapse.minHeight;
series[key].itemStyle.barBorderRadius = optionsCollapse.radius;
series[key].barWidth = optionsSetup.maxWidth;
series[key].barMinHeight = optionsSetup.minHeight;
series[key].itemStyle.barBorderRadius = optionsSetup.radius;
}
}
this.options.series = series;
},
// tooltip
setOptionsTooltip() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const tooltip = {
trigger: "item",
show: true,
textStyle: {
color: optionsCollapse.lineColor,
fontSize: optionsCollapse.tipFontSize
color: optionsSetup.lineColor,
fontSize: optionsSetup.tipFontSize
}
};
this.options.tooltip = tooltip;
},
//
setOptionsMargin() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const grid = {
left: optionsCollapse.marginLeft,
right: optionsCollapse.marginRight,
bottom: optionsCollapse.marginBottom,
top: optionsCollapse.marginTop,
left: optionsSetup.marginLeft,
right: optionsSetup.marginRight,
bottom: optionsSetup.marginBottom,
top: optionsSetup.marginTop,
containLabel: true
};
this.options.grid = grid;
},
/* // 图例操作 legend
setOptionsLegend() {
const optionsCollapse = this.optionsSetup;
const legend = this.options.legend;
legend.show = optionsCollapse.isShowLegend;
legend.left = optionsCollapse.lateralPosition;
legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto";
legend.bottom =
optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto";
legend.orient = optionsCollapse.layoutFront;
legend.textStyle = {
color: optionsCollapse.lengedColor,
fontSize: optionsCollapse.lengedFontSize
};
legend.itemWidth = optionsCollapse.lengedWidth;
console.log(legend);
},*/
//
setOptionsColor() {
const optionsCollapse = this.optionsSetup;
const customColor = optionsCollapse.customColor;
const optionsSetup = this.optionsSetup;
const customColor = optionsSetup.customColor;
if (!customColor) return;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
@ -377,16 +360,23 @@ export default {
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
},
staticDataFn(val) {
const staticData = typeof val == "string" ? JSON.parse(val) : val;
const series = this.options.series;
let axis = [];
let bar = [];
let line = [];
for (const i in val) {
axis[i] = val[i].axis;
bar[i] = val[i].bar;
line[i] = val[i].line;
}
// x
this.options.xAxis.data = staticData.xAxis;
this.options.xAxis.data = axis;
// series
const series = this.options.series;
for (const i in series) {
for (const j in staticData.series) {
if (series[i].type == staticData.series[j].type) {
series[i].data = staticData.series[j].data;
}
if (series[i].type == "bar") {
series[i].data = bar;
} else {
series[i].data = line;
}
}
},

@ -384,32 +384,37 @@ export default {
const optionsSetup = this.optionsSetup;
const optionsData = this.optionsData; // or
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup)
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(
optionsData.dynamicData,
optionsData.refreshTime,
optionsSetup
optionsData.dynamicData,
optionsData.refreshTime,
optionsSetup
);
},
//
staticDataFn(val, optionsSetup) {
const staticData = typeof val == "string" ? JSON.parse(val) : val;
staticDataFn(val) {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
let axis = [];
let data = [];
for (const i in val) {
axis[i] = val[i].axis;
data[i] = val[i].data
}
// x
if (optionsSetup.verticalShow) {
this.options.xAxis.data = [];
this.options.yAxis.data = staticData.categories;
this.options.yAxis.data = axis;
this.options.xAxis.type = "value";
this.options.yAxis.type = "category";
} else {
this.options.xAxis.data = staticData.categories;
this.options.xAxis.data = axis;
this.options.yAxis.data = [];
this.options.xAxis.type = "category";
this.options.yAxis.type = "value";
}
// series
const series = this.options.series;
if (series[0].type == "bar") {
series[0].data = staticData.series[0].data;
series[0].data = data;
}
},
//

@ -0,0 +1,490 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize/>
</div>
</template>
<script>
export default {
name: "widgetRotatePieChart",
components: {},
props: {
value: Object,
ispreview: Boolean
},
data() {
return {
options: {
title: {},
series: [
{
name: '最外环',
type: 'pie',
silent: true,
radius: ['98%', '97%'],
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
itemStyle: {
normal: {
show: false,
},
},
data: [0]
},
{
name: '外四环',
type: 'pie',
zlevel: 2,
silent: true,
radius: ['90%', '91%'],
startAngle: 50,
hoverAnimation: false,
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: [0]
},
{
name: '里四环',
type: 'pie',
zlevel: 3,
silent: true,
radius: ['88%', '87%'],
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: [0]
},
{
name: '虚线环',
type: 'pie',
zlevel: 4,
silent: true,
radius: ['84%', '83%'],
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: [0]
},
{
name: '三分环',
type: 'pie',
zlevel: 5,
silent: true,
radius: ['80%', '78%'],
color: ["#fc8d89", "#46d3f3", "rgba(203,203,203,.2)"],
startAngle: 50,
avoidLabelOverlap: false,
hoverAnimation: false,
label: {
normal: {
show: false
},
},
data: [50, 20, 40]
},
{
name: "外指标环",
type: 'gauge',
splitNumber: 30,
min: 0,
max: 100,
radius: '73%', //
center: ['50%', '50%'],
startAngle: 90,
endAngle: -269.9999,
axisLabel: {
show: false
},
pointer: {
show: 0,
},
detail: {
show: 0,
},
},
{
name: '里指标环',
type: 'gauge',
splitNumber: 30,
min: 0,
max: 100,
radius: '68%',
center: ['50%', '50%'],
startAngle: 90,
endAngle: -269.9999,
axisLabel: {
show: false
},
pointer: {
show: 0,
},
detail: {
show: false,
},
},
{
name: '环外环',
type: 'pie',
zlevel: 20,
silent: true,
radius: ['60%', '59%'],
hoverAnimation: false,
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
},
{
name: '中间环形图',
type: 'pie',
radius: ['40%', '55%'],
avoidLabelOverlap: false,
hoverAnimation: false,
itemStyle: {
normal: {
color: '#80ADD2',
borderColor: '#3D4268',
}
},
label: {
normal: {
show: false,
position: 'center',
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
25, 25, 25, 25, 25, 25
]
},
]
},
optionsStyle: {}, //
optionsCollapse: {}, //
optionsSetup: {}
}
},
computed: {
styleObj() {
return {
position: this.ispreview ? "absolute" : "static",
width: this.optionsStyle.width + "px",
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
background: this.optionsSetup.background
};
}
},
watch: {
value: {
handler(val) {
this.optionsStyle = val.position;
this.optionsData = val.data;
this.optionsCollapse = val.setup;
this.optionsSetup = val.setup;
this.editorOptions();
},
deep: true
}
},
mounted() {
this.optionsStyle = this.value.position;
this.optionsData = this.value.data;
this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup;
this.editorOptions();
},
methods: {
editorOptions() {
this.setOptionsLastRing();
this.setOptionsEightRing();
this.setOptionsDottedRing();
this.setOptionsThreeRing();
this.setOptionsOutRing();
this.setOptionsInRing();
this.setOptionsRingOnRing();
this.setOptionsPie();
},
//
setColor(color) {
const nullColor = 'rgba(0,0,0,0)'
if (color == "") {
color = nullColor
}
return color
},
// 1
setOptionsLastRing() {
const optionsSetup = this.optionsSetup;
const series = this.options.series[0];
if (optionsSetup.isLastRingShow) {
series.data = [0]
} else {
series.data = ''
}
const normal = {
color: {
colorStops: [
{
offset: 0,
color: this.setColor(optionsSetup.lastRing0Color),
},
{
offset: 1,
color: this.setColor(optionsSetup.lastRing100Color),
},
],
},
};
series.itemStyle['normal'] = normal;
},
setRingPie2() {
const optionsSetup = this.optionsSetup;
let dataArr = [];
for (let i = 0; i < 8; i++) {
if (i % 2 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 25,
itemStyle: {
normal: {
color: this.setColor(optionsSetup.eightColor),
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
})
} else {
dataArr.push({
name: (i + 1).toString(),
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)'
}
}
})
}
}
return dataArr
},
//
setOptionsEightRing() {
const series = this.options.series;
series[1].data = this.setRingPie2();
series[2].data = this.setRingPie2();
},
setRingPie3() {
const optionsSetup = this.optionsSetup;
let dataArr = [];
for (let i = 0; i < (optionsSetup.dottedNum * 2); i++) {
if (i % 2 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 25,
itemStyle: {
normal: {
color: this.setColor(optionsSetup.dottedColor),
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
})
} else {
dataArr.push({
name: (i + 1).toString(),
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
}
}
})
}
}
return dataArr
},
// 线
setOptionsDottedRing() {
const series = this.options.series;
series[3].data = this.setRingPie3()
},
//
setOptionsThreeRing() {
const optionsSetup = this.optionsSetup;
const series = this.options.series[4];
series.color = [this.setColor(optionsSetup.three1Color), this.setColor(optionsSetup.three2Color), this.setColor(optionsSetup.three3Color)]
},
//
setOptionsOutRing() {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
const axisLine = {
show: optionsSetup.isOutRingShow,
lineStyle: {
width: optionsSetup.outRingWidth,
shadowBlur: 0,
color: [
[1, this.setColor(optionsSetup.outRingColor)]
]
}
};
const axisTick = {
show: optionsSetup.isOutTickShow,
lineStyle: {
color: this.setColor(optionsSetup.outTickColor),
width: optionsSetup.outTickWidth
},
length: optionsSetup.outTickLength,
splitNumber: optionsSetup.outTickWidth
};
series[5].splitNumber = optionsSetup.outSplitNum
const splitLine = {
show: optionsSetup.isOutSplitShow,
length: optionsSetup.outSplitLength,
lineStyle: {
color: this.setColor(optionsSetup.outSplitColor),
width: optionsSetup.outSplitWidth,
}
};
series[5].axisLine = axisLine
series[5].axisTick = axisTick
series[5].splitLine = splitLine
},
//
setOptionsInRing() {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
const axisLine = {
show: optionsSetup.isInRingShow,
lineStyle: {
width: optionsSetup.inRingWidth,
shadowBlur: 0,
color: [
[1, this.setColor(optionsSetup.inRingColor)],
],
},
};
const axisTick = {
show: optionsSetup.isInTickShow,
lineStyle: {
color: this.setColor(optionsSetup.inTickColor),
width: optionsSetup.inTickWidth,
},
length: optionsSetup.inTickLength,
splitNumber: optionsSetup.inTickNum,
};
series[6].splitNumber = optionsSetup.inSplitNum
const splitLine = {
show: optionsSetup.isInSplitShow,
length: optionsSetup.inSplitLength,
lineStyle: {
color: this.setColor(optionsSetup.inSplitColor),
width: optionsSetup.inSplitWidth
}
};
series[6].axisLine = axisLine
series[6].axisTick = axisTick
series[6].splitLine = splitLine
},
//
setOptionsRingOnRing() {
const optionsSetup = this.optionsSetup;
const series = this.options.series[7];
if (optionsSetup.isRingOnRingShow) {
series.data = [0]
} else {
series.data = ''
}
const itemStyle = {
normal: {
color: this.setColor(optionsSetup.ringOnRingColor),
}
}
series.itemStyle = itemStyle
},
//
setOptionsPie() {
const optionsSetup = this.optionsSetup;
const series = this.options.series[8];
let width = optionsSetup.pieWidth
const pieWidth = width + "%"
series.radius = [pieWidth, '55%']
let pieBlocks = optionsSetup.pieBlocks
if (pieBlocks == "six") {
series.data = [25, 25, 25, 25, 25, 25]
} else if (pieBlocks == "five") {
series.data = [30, 30, 30, 30, 30]
} else {
series.data = [40, 40, 40, 40]
}
const itemStyle = {
normal: {
color: this.setColor(optionsSetup.pieColor),
borderColor: this.setColor(optionsSetup.pieBorderColor),
}
}
series.itemStyle = itemStyle
}
}
}
</script>
<style scoped lang="scss">
.echarts {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>

@ -252,7 +252,7 @@ export default {
handler(val) {
this.optionsStyle = val.position;
this.optionsData = val.data;
this.optionsSetup = val.setup;
this.optionsCollapse = val.setup;
this.optionsSetup = val.setup;
this.editorOptions();
},

@ -1,6 +1,6 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize />
<v-chart :options="options" autoresize/>
</div>
</template>
@ -110,56 +110,56 @@ export default {
},
//
setOptionsTitle() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const title = {};
title.text = optionsCollapse.titleText;
title.show = optionsCollapse.isNoTitle;
title.left = optionsCollapse.textAlign;
title.text = optionsSetup.titleText;
title.show = optionsSetup.isNoTitle;
title.left = optionsSetup.textAlign;
title.textStyle = {
color: optionsCollapse.textColor,
fontSize: optionsCollapse.textFontSize,
fontWeight: optionsCollapse.textFontWeight
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight
};
title.subtext = optionsCollapse.subText;
title.subtext = optionsSetup.subText;
title.subtextStyle = {
color: optionsCollapse.subTextColor,
fontWeight: optionsCollapse.subTextFontWeight,
fontSize: optionsCollapse.subTextFontSize
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsSetup.subTextFontSize
};
this.options.title = title;
},
// X
setOptionsX() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const xAxis = {
type: "category",
show: optionsCollapse.hideX, //
name: optionsCollapse.xName, //
show: optionsSetup.hideX, //
name: optionsSetup.xName, //
nameTextStyle: {
color: optionsCollapse.nameColorX,
fontSize: optionsCollapse.nameFontSizeX
color: optionsSetup.nameColorX,
fontSize: optionsSetup.nameFontSizeX
},
nameRotate: optionsCollapse.textAngle, //
inverse: optionsCollapse.reversalX, //
nameRotate: optionsSetup.textAngle, //
inverse: optionsSetup.reversalX, //
axisLabel: {
show: true,
interval: optionsCollapse.textInterval, //
rotate: optionsCollapse.textAngle, //
interval: optionsSetup.textInterval, //
rotate: optionsSetup.textAngle, //
textStyle: {
color: optionsCollapse.Xcolor, // x
fontSize: optionsCollapse.fontSizeX
color: optionsSetup.Xcolor, // x
fontSize: optionsSetup.fontSizeX
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsCollapse.lineColorX
color: optionsSetup.lineColorX
}
},
splitLine: {
show: optionsCollapse.isShowSplitLineX,
show: optionsSetup.isShowSplitLineX,
lineStyle: {
color: optionsCollapse.splitLineColorX
color: optionsSetup.splitLineColorX
}
}
};
@ -167,36 +167,36 @@ export default {
},
// Y
setOptionsY() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const yAxis = {
type: "value",
scale : optionsCollapse.scale,
splitNumber: optionsCollapse.splitNumber,//
show: optionsCollapse.isShowY, //
name: optionsCollapse.textNameY, //
scale: optionsSetup.scale,
splitNumber: optionsSetup.splitNumber,//
show: optionsSetup.isShowY, //
name: optionsSetup.textNameY, //
nameTextStyle: { //
color: optionsCollapse.nameColorY,
fontSize: optionsCollapse.namefontSizeY
color: optionsSetup.nameColorY,
fontSize: optionsSetup.namefontSizeY
},
inverse: optionsCollapse.reversalY, //
inverse: optionsSetup.reversalY, //
axisLabel: {
show: true,
rotate: optionsCollapse.ytextAngle, //
rotate: optionsSetup.ytextAngle, //
textStyle: {
color: optionsCollapse.colorY, // y
fontSize: optionsCollapse.fontSizeY
color: optionsSetup.colorY, // y
fontSize: optionsSetup.fontSizeY
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsCollapse.lineColorY
color: optionsSetup.lineColorY
}
},
splitLine: {
show: optionsCollapse.isShowSplitLineY,
show: optionsSetup.isShowSplitLineY,
lineStyle: {
color: optionsCollapse.splitLineColorY
color: optionsSetup.splitLineColorY
}
}
};
@ -204,16 +204,16 @@ export default {
},
// 线
setOptionsTop() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const series = this.options.series;
for (const key in series) {
if (series[key].type == "line") {
series[key].showSymbol = optionsCollapse.markPoint;
series[key].symbolSize = optionsCollapse.pointSize;
series[key].smooth = optionsCollapse.smoothCurve;
if (optionsCollapse.area) {
series[key].showSymbol = optionsSetup.markPoint;
series[key].symbolSize = optionsSetup.pointSize;
series[key].smooth = optionsSetup.smoothCurve;
if (optionsSetup.area) {
series[key].areaStyle = {
opacity: optionsCollapse.areaThickness / 100
opacity: optionsSetup.areaThickness / 100
};
} else {
series[key].areaStyle = {
@ -222,15 +222,15 @@ export default {
}
series[key].lineStyle = {
width: optionsCollapse.lineWidth
width: optionsSetup.lineWidth
};
series[key].label = {
show: optionsCollapse.isShow,
show: optionsSetup.isShow,
position: "top",
distance: 10,
fontSize: optionsCollapse.fontSize,
color: optionsCollapse.subTextColor,
fontWeight: optionsCollapse.fontWeight
fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight
};
}
}
@ -238,50 +238,50 @@ export default {
},
// tooltip
setOptionsTooltip() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const tooltip = {
trigger: "item",
show: true,
textStyle: {
color: optionsCollapse.lineColor,
fontSize: optionsCollapse.fontSize
color: optionsSetup.lineColor,
fontSize: optionsSetup.fontSize
}
};
this.options.tooltip = tooltip;
},
//
setOptionsMargin() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const grid = {
left: optionsCollapse.marginLeft,
right: optionsCollapse.marginRight,
bottom: optionsCollapse.marginBottom,
top: optionsCollapse.marginTop,
left: optionsSetup.marginLeft,
right: optionsSetup.marginRight,
bottom: optionsSetup.marginBottom,
top: optionsSetup.marginTop,
containLabel: true
};
this.options.grid = grid;
},
// legend
setOptionsLegend() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const legend = this.options.legend;
legend.show = optionsCollapse.isShowLegend;
legend.left = optionsCollapse.lateralPosition == "left" ? 0 : "auto";
legend.right = optionsCollapse.lateralPosition == "right" ? 0 : "auto";
legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto";
legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
legend.bottom =
optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto";
legend.orient = optionsCollapse.layoutFront;
optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsCollapse.lengedColor,
fontSize: optionsCollapse.fontSize
color: optionsSetup.lengedColor,
fontSize: optionsSetup.fontSize
};
legend.itemWidth = optionsCollapse.lengedWidth;
legend.itemWidth = optionsSetup.lengedWidth;
},
//
setOptionsColor() {
const optionsCollapse = this.optionsSetup;
const customColor = optionsCollapse.customColor;
const optionsSetup = this.optionsSetup;
const customColor = optionsSetup.customColor;
if (!customColor) return;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
@ -298,14 +298,19 @@ export default {
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
},
staticDataFn(val) {
const staticData = typeof val == "string" ? JSON.parse(val) : val;
const series = this.options.series;
let axis = [];
let data = [];
for (const i in val) {
axis[i] = val[i].axis;
data[i] = val[i].data
}
// x
this.options.xAxis.data = staticData.categories;
this.options.xAxis.data = axis;
// series
const series = this.options.series;
for (const i in series) {
if (series[i].type == "line") {
series[i].data = staticData.series[0].data;
series[i].data = data;
}
}
},

@ -259,9 +259,10 @@ export default {
staticDataFn(val) {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
const num = val[0]['num'];
const data = [
{
value: val
value: num
}
]
const detail = {

@ -361,20 +361,20 @@ export default {
this.setOptionSurplusColor();
},
setOptionsTitle() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const title = this.options.title;
title.x = "center";
title.y = "center";
const rich = {
nums: {
fontSize: optionsCollapse.textNumFontSize,
color: optionsCollapse.textNumColor,
fontWeight: optionsCollapse.textNumFontWeight
fontSize: optionsSetup.textNumFontSize,
color: optionsSetup.textNumColor,
fontWeight: optionsSetup.textNumFontWeight
},
percent: {
fontSize: optionsCollapse.textPerFontSize,
color: optionsCollapse.textPerColor,
fontWeight: optionsCollapse.textPerFontWeight
fontSize: optionsSetup.textPerFontSize,
color: optionsSetup.textPerColor,
fontWeight: optionsSetup.textPerFontWeight
}
};
title.textStyle['rich'] = rich;
@ -445,9 +445,10 @@ export default {
},
staticDataFn(val) {
const title = this.options.title;
title.text = '{nums|' + val + '}{percent|%}';
this.options.series[6]['data'][0]['value'] = val;
this.options.series[6]['data'][1]['value'] = 100 - val;
const num = val[0]['num'];
title.text = '{nums|' + num + '}{percent|%}';
this.options.series[6]['data'][0]['value'] = num;
this.options.series[6]['data'][1]['value'] = 100 - num;
},
dynamicDataFn(val, refreshTime) {
if (!val) return;

@ -59,7 +59,6 @@ export default {
watch: {
value: {
handler(val) {
console.log(val);
this.optionsStyle = val.position;
this.optionsData = val.data;
this.optionsCollapse = val.setup;

@ -1,6 +1,6 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize />
<v-chart :options="options" autoresize/>
</div>
</template>
@ -103,86 +103,86 @@ export default {
},
//
setOptionsTitle() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const title = {};
title.show = optionsCollapse.isNoTitle;
title.text = optionsCollapse.titleText;
title.left = optionsCollapse.textAlign;
title.show = optionsSetup.isNoTitle;
title.text = optionsSetup.titleText;
title.left = optionsSetup.textAlign;
title.textStyle = {
color: optionsCollapse.textColor,
fontSize: optionsCollapse.textFontSize,
fontWeight: optionsCollapse.textFontWeight
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight
};
title.subtext = optionsCollapse.subText;
title.subtext = optionsSetup.subText;
title.subtextStyle = {
color: optionsCollapse.subTextColor,
fontWeight: optionsCollapse.subTextFontWeight,
fontSize: optionsCollapse.subTextFontSize
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsSetup.subTextFontSize
};
this.options.title = title;
},
//
setOptionsValue() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const series = this.options.series;
const numberValue = optionsCollapse.numberValue ? "{c}" : "";
const percentage = optionsCollapse.percentage ? "({d})%" : "";
const numberValue = optionsSetup.numberValue ? "{c}" : "";
const percentage = optionsSetup.percentage ? "({d})%" : "";
const label = {
show: optionsCollapse.isShow,
show: optionsSetup.isShow,
formatter: `{a|{b}${numberValue} ${percentage}}`,
rich: {
a: {
padding: [-30, 15, -20, 15],
color: optionsCollapse.subTextColor,
fontSize: optionsCollapse.fontSize,
fontWeight: optionsCollapse.fontWeight
color: optionsSetup.subTextColor,
fontSize: optionsSetup.fontSize,
fontWeight: optionsSetup.fontWeight
}
},
fontSize: optionsCollapse.fontSize,
fontSize: optionsSetup.fontSize,
fontWeight: optionsCollapse.optionsCollapse
fontWeight: optionsSetup.optionsSetup
};
for (const key in series) {
if (series[key].type == "pie") {
series[key].label = label;
series[key].labelLine = { show: optionsCollapse.isShow };
series[key].labelLine = {show: optionsSetup.isShow};
}
}
},
// tooltip
setOptionsTooltip() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const tooltip = {
trigger: "item",
show: true,
textStyle: {
color: optionsCollapse.lineColor,
fontSize: optionsCollapse.fontSize
color: optionsSetup.lineColor,
fontSize: optionsSetup.fontSize
}
};
this.options.tooltip = tooltip;
},
// legend
setOptionsLegend() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const legend = this.options.legend;
legend.show = optionsCollapse.isShowLegend;
legend.left = optionsCollapse.lateralPosition == "left" ? 0 : "auto";
legend.right = optionsCollapse.lateralPosition == "right" ? 0 : "auto";
legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto";
legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
legend.bottom =
optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto";
legend.orient = optionsCollapse.layoutFront;
optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsCollapse.lengedColor,
fontSize: optionsCollapse.fontSize
color: optionsSetup.lengedColor,
fontSize: optionsSetup.fontSize
};
legend.itemWidth = optionsCollapse.lengedWidth;
legend.itemWidth = optionsSetup.lengedWidth;
},
//
setOptionsColor() {
const optionsCollapse = this.optionsSetup;
const customColor = optionsCollapse.customColor;
const optionsSetup = this.optionsSetup;
const customColor = optionsSetup.customColor;
if (!customColor) return;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {

@ -6,7 +6,7 @@
!-->
<template>
<div>
<component :is="type" :value="value" :ispreview="true" />
<component :is="type" :value="value" :ispreview="true"/>
</div>
</template>
@ -19,22 +19,23 @@ import widgetImage from "./widgetImage.vue";
import widgetSlider from "./widgetSlider.vue";
import widgetVideo from "./widgetVideo.vue";
import WidgetIframe from "./widgetIframe.vue";
import widgetBarchart from "./widgetBarchart.vue";
import widgetLinechart from "./widgetLinechart.vue";
import widgetBarlinechart from "./widgetBarlinechart";
import widgetBarchart from "./bar/widgetBarchart.vue";
import widgetLinechart from "./line/widgetLinechart.vue";
import widgetBarlinechart from "./bar/widgetBarlinechart";
import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue";
import WidgetPiechart from "./widgetPiechart.vue";
import WidgetPiechart from "./pie/widgetPiechart.vue";
import WidgetFunnel from "./widgetFunnel.vue";
import WidgetGauge from "./widgetGauge.vue";
import WidgetGauge from "./percent/widgetGauge.vue";
import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRose";
import widgetTable from "./widgetTable.vue";
import widgetMap from "./widgetMap.vue";
import widgetPiePercentageChart from "./pie/widgetPiePercentageChart";
import widgetPiePercentageChart from "./percent/widgetPiePercentageChart";
import widgetAirBubbleMap from "./map/widgetAirBubbleMap";
import widgetBarStackChart from "./bar/widgetBarStackChart";
import widgetLineStackChart from "./line/widgetLineStackChart";
import widgetBarCompareChart from "./bar/widgetBarCompareChart";
import widgetLineCompareChart from "./line/widgetLineCompareChart";
import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";
export default {
name: "WidgetTemp",
@ -62,7 +63,8 @@ export default {
widgetBarStackChart,
widgetLineStackChart,
widgetBarCompareChart,
widgetLineCompareChart
widgetLineCompareChart,
widgetDecoratePieChart
},
model: {
prop: "value",
@ -72,13 +74,15 @@ export default {
type: String,
value: {
type: [Object],
default: () => {}
default: () => {
}
}
},
data() {
return {};
},
mounted() {},
mounted() {
},
methods: {}
};
</script>

@ -17,7 +17,7 @@
@focus="handleFocus"
@blur="handleBlur"
>
<component :is="type" :value="value" />
<component :is="type" :value="value"/>
</avue-draggable>
</template>
@ -30,22 +30,23 @@ import widgetImage from "./widgetImage.vue";
import widgetSlider from "./widgetSlider.vue";
import widgetVideo from "./widgetVideo.vue";
import WidgetIframe from "./widgetIframe.vue";
import widgetBarchart from "./widgetBarchart.vue";
import widgetBarchart from "./bar/widgetBarchart.vue";
import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue";
import widgetLinechart from "./widgetLinechart.vue";
import widgetBarlinechart from "./widgetBarlinechart";
import WidgetPiechart from "./widgetPiechart.vue";
import widgetLinechart from "./line/widgetLinechart.vue";
import widgetBarlinechart from "./bar/widgetBarlinechart";
import WidgetPiechart from "./pie/widgetPiechart.vue";
import WidgetFunnel from "./widgetFunnel.vue";
import WidgetGauge from "./widgetGauge.vue";
import WidgetGauge from "./percent/widgetGauge.vue";
import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRose";
import widgetTable from "./widgetTable.vue";
import widgetMap from "./widgetMap.vue";
import widgetPiePercentageChart from "./pie/widgetPiePercentageChart";
import widgetPiePercentageChart from "./percent/widgetPiePercentageChart";
import widgetAirBubbleMap from "./map/widgetAirBubbleMap";
import widgetBarStackChart from "./bar/widgetBarStackChart";
import widgetLineStackChart from "./line/widgetLineStackChart";
import widgetBarCompareChart from "./bar/widgetBarCompareChart";
import widgetLineCompareChart from "./line/widgetLineCompareChart";
import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";
export default {
name: "Widget",
@ -73,7 +74,8 @@ export default {
widgetBarStackChart,
widgetLineStackChart,
widgetBarCompareChart,
widgetLineCompareChart
widgetLineCompareChart,
widgetDecoratePieChart
},
model: {
prop: "value",
@ -89,7 +91,8 @@ export default {
bigscreen: Object,
value: {
type: [Object],
default: () => {}
default: () => {
}
},
step: Number
},
@ -119,11 +122,13 @@ export default {
return this.value.position.zIndex || 1;
}
},
mounted() {},
mounted() {
},
methods: {
handleFocus({ index, left, top, width, height }) {},
handleBlur({ index, left, top, width, height }) {
this.$emit("onActivated", { index, left, top, width, height });
handleFocus({index, left, top, width, height}) {
},
handleBlur({index, left, top, width, height}) {
this.$emit("onActivated", {index, left, top, width, height});
this.$refs.draggable.setActive(true);
}
}
@ -134,11 +139,13 @@ export default {
.vue-draggalbe {
position: absolute;
}
.widget-active {
cursor: move;
border: 1px dashed #09f;
background-color: rgba(115, 170, 229, 0.5);
}
.avue-draggable {
padding: 0 !important;
}

@ -1,6 +1,6 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize />
<v-chart :options="options" autoresize/>
</div>
</template>
@ -24,9 +24,11 @@ export default {
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c}%"
formatter: "{a} <br/>{b} : {c}"
},
legend: {
x: 'center',
y: '92%',
textStyle: {
color: "#fff"
}
@ -35,34 +37,34 @@ export default {
{
name: "",
type: "funnel",
left: "10%",
top: 60,
bottom: 60,
left: "center",
width: "80%",
min: 0,
max: 100,
minSize: "0%",
maxSize: "100%",
//maxSize: '80%',
sort: "descending",
gap: 2,
label: {
show: true,
position: "inside"
},
labelLine: {
length: 10,
lineStyle: {
width: 1,
type: "solid"
normal: {
show: true,
position: 'inside',
formatter: '{c}',
textStyle: {
color: '#fff',
fontSize: 14,
}
},
emphasis: {
position: 'inside',
formatter: '{b}: {c}'
}
},
itemStyle: {
borderColor: "#fff",
borderWidth: 1
},
emphasis: {
label: {
fontSize: 20
normal: {
opacity: 0.8,
borderColor: 'rgba(12, 13, 43, .9)',
borderWidth: 1,
shadowBlur: 4,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, .6)'
}
},
data: []
@ -109,6 +111,7 @@ export default {
methods: {
// options
editorOptions() {
this.setEnding();
this.setOptionsText();
this.setOptionsTitle();
this.setOptionsTooltip();
@ -116,79 +119,86 @@ export default {
this.setOptionsColor();
this.setOptionsData();
},
//
setOptionsText() {
const optionsCollapse = this.optionsSetup;
//
setEnding() {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
for (const key in series) {
if (series[key].type == "funnel") {
series[key].label.show = optionsCollapse.isShow;
series[key].label.fontSize = optionsCollapse.fontSize;
series[key].label.color = optionsCollapse.color;
series[key].label.fontWeight = optionsCollapse.fontWeight;
series[key].sort = optionsCollapse.reversal
? "ascending"
: "descending";
if (optionsSetup.ending) {
series[0].sort = "ascending";
} else {
series[0].sort = "descending";
}
},
//
setOptionsText() {
const optionsSetup = this.optionsSetup;
const normal = {
show: optionsSetup.isShow,
position: 'inside',
formatter: '{c}',
textStyle: {
color: optionsSetup.color,
fontSize: optionsSetup.fontSize,
fontWeight: optionsSetup.fontWeight,
}
}
this.options.series[0].label['normal'] = normal;
},
//
setOptionsTitle() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const title = {};
title.show = optionsCollapse.isNoTitle;
title.text = optionsCollapse.titleText;
title.left = optionsCollapse.textAlign;
title.text = optionsSetup.titleText;
title.show = optionsSetup.isNoTitle;
title.left = optionsSetup.textAlign;
title.textStyle = {
color: optionsCollapse.textColor,
fontSize: optionsCollapse.textFontSize,
fontWeight: optionsCollapse.textFontWeight
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight
};
title.subtext = optionsCollapse.subText;
title.subtext = optionsSetup.subText;
title.subtextStyle = {
color: optionsCollapse.subTextColor,
fontWeight: optionsCollapse.subTextFontWeight,
fontSize: optionsCollapse.subTextFontSize
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsSetup.subTextFontSize
};
this.options.title = title;
},
// tooltip
setOptionsTooltip() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const tooltip = {
trigger: "item",
show: true,
textStyle: {
color: optionsCollapse.lineColor,
fontSize: optionsCollapse.fontSize
color: optionsSetup.lineColor,
fontSize: optionsSetup.tipFontSize
}
};
this.options.tooltip = tooltip;
},
// legend
setOptionsLegend() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const legend = this.options.legend;
legend.show = optionsCollapse.isShowLegend;
legend.left = optionsCollapse.lateralPosition == "left" ? 0 : "auto";
legend.right = optionsCollapse.lateralPosition == "right" ? 0 : "auto";
legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto";
legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition;
legend.right = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition;
legend.bottom =
optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto";
legend.orient = optionsCollapse.layoutFront;
optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsCollapse.lengedColor,
fontSize: optionsCollapse.fontSize
color: optionsSetup.lengedColor,
fontSize: optionsSetup.lengedFontSize
};
legend.itemWidth = optionsCollapse.lengedWidth;
legend.itemWidth = optionsSetup.lengedWidth;
},
//
setOptionsColor() {
const optionsCollapse = this.optionsSetup;
const customColor = optionsCollapse.customColor;
const optionsSetup = this.optionsSetup;
const customColor = optionsSetup.customColor;
if (!customColor) return;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {

@ -143,12 +143,12 @@ export default {
const tableData = this.optionsData;
tableData.dataType == "staticData"
? this.handlerStaticData(tableData.staticData)
: this.handlerDymaicData(tableData.dynamicData, tableData.refreshTime);
: this.handlerDynamicData(tableData.dynamicData, tableData.refreshTime);
},
handlerStaticData(data) {
this.list = data;
},
handlerDymaicData(data, refreshTime) {
handlerDynamicData(data, refreshTime) {
if (!data) return;
if (this.ispreview) {
this.getEchartData(data);

@ -15,7 +15,7 @@
label-width="130px"
>
<el-row :gutter="10">
<el-col :xs="24" :sm="20" :md="8" :lg="8" :xl="8">
<el-col v-if="this.setType=='sql'" :xs="24" :sm="20" :md="8" :lg="8" :xl="8">
<el-form-item label="数据源" prop="sourceCode">
<el-select
v-model.trim="formData.sourceCode"
@ -53,6 +53,9 @@
</el-form-item>
</el-col>
</el-row>
<el-row v-if="this.setType=='sql'" :gutter="10">
<el-col
:xs="24"
:sm="20"
@ -61,7 +64,7 @@
:xl="22"
class="code-mirror-form"
>
<el-form-item label="查询SQL或请求体">
<el-form-item label="查询SQL">
<div class="codemirror">
<monaco-editor
v-model.trim="formData.dynSentence"
@ -72,6 +75,25 @@
</el-form-item>
</el-col>
</el-row>
<el-row v-if="this.setType=='http'">
<el-form-item label="请求路径">
<el-input placeholder="请输入请求路径..." v-model="httpForm.apiUrl" class="input-with-select">
<el-select v-model="httpForm.method" slot="prepend" placeholder="请选择">
<el-option label="GET" value="GET"></el-option>
<el-option label="POST" value="POST"></el-option>
<el-option label="PUT" value="PUT"></el-option>
<el-option label="DELETE" value="DELETE"></el-option>
</el-select>
</el-input>
</el-form-item>
<el-form-item label="请求头">
<el-input v-model.trim="httpForm.header" size="mini" placeholder="请输入请求头..."/>
</el-form-item>
<el-form-item label="请求体">
<el-input v-model.trim="httpForm.body" size="mini" placeholder="请输入请求体..."/>
</el-form-item>
</el-row>
<el-row :gutter="10">
<el-col :xs="24" :sm="20" :md="22" :lg="22" :xl="22">
<el-form label-width="100px" class="demo-ruleForm">
@ -508,7 +530,13 @@ export default {
setName: "",
setCode: ""
},
setType: '', //http addSql addHttp edit
httpForm: { //http
apiUrl: '',
method: 'GET',
header: '{"Content-Type":"application/json;charset=UTF-8"}',
body: '',
},
//
dictionaryOptions: [], //
list: null,
@ -541,7 +569,11 @@ export default {
mounted() {},
methods: {
// ,
async addOrEditDataSet(row) {
async addOrEditDataSet(row, type) {
this.setType = type
if (type == 'http' && row.dynSentence) {
this.httpForm = JSON.parse(row.dynSentence)
}
//
const { code, data } = await queryAllDataSourceSet();
if (code != "200") return;
@ -636,12 +668,18 @@ export default {
//
async handleClickTabs(tab, event) {
if (this.setType == 'http') {
//http
console.log("http数据集" + this.httpForm);
this.formData.dynSentence = JSON.stringify(this.httpForm)
}
if (tab.paneName == "third") {
const params = {
sourceCode: this.formData.sourceCode,
dynSentence: this.formData.dynSentence,
dataSetParamDtoList: this.tableData,
dataSetTransformDtoList: this.itemFilterList
dataSetTransformDtoList: this.itemFilterList,
setType: this.setType
};
const { code, data } = await testTransformSet(params);
if (code != "200") return;
@ -831,6 +869,12 @@ export default {
});
},
async submit(formName) {
if (this.setType == 'http') {
//http
console.log("http数据集" + this.httpForm);
this.formData.dynSentence = JSON.stringify(this.httpForm)
}
this.formData.setType = this.setType
this.$refs[formName].validate(async (valid, obj) => {
if (valid) {
if (this.testMassageCode == 200) {

@ -34,7 +34,7 @@ const hints = [
"PREPARE",
"EXECUTE",
"DESCRIBE",
"FORM",
"FROM",
"ORDER BY"]
function createCompleter(getExtraHints) {
const createSuggestions = function (model, textUntilPosition) {

@ -1,13 +1,19 @@
<template>
<anji-crud ref="listPage" :option="crudOption">
<template v-slot:buttonLeftOnTable>
<el-button
type="primary"
icon="el-icon-plus"
@click="operateDataset('add')"
v-permission="'resultsetManage:insert'"
>新增
</el-button>
<el-dropdown
placement="bottom"
@command="operateDataset"
>
<el-button type="primary" icon="el-icon-plus">
新增
<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="sql">SQL</el-dropdown-item>
<el-dropdown-item command="http">HTTP</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<template slot="edit" slot-scope="props">
@ -15,7 +21,7 @@
type="text"
@click="operateDataset('edit', props)"
v-permission="'resultsetManage:update'"
>编辑
>编辑
</el-button>
</template>
@ -24,7 +30,7 @@
type="text"
@click="dataView(props)"
v-permission="'resultsetManage:query'"
>数据预览
>数据预览
</el-button>
</template>
<!--自定义的卡片插槽将在编辑详情页面出现在底部新卡片-->
@ -95,7 +101,15 @@ export default {
},
label: "数据源",
field: "sourceCode"
}
},
{
inputType: "anji-select", //form input|input-number|anji-select(urldictCode)|anji-tree()|date|datetime|datetimerange
anjiSelectOption: {
dictCode: "SET_TYPE"
},
label: "数据集类型",
field: "setType"
},
],
//
buttons: {
@ -143,7 +157,7 @@ export default {
editField: "setCode",
inputType: "input",
rules: [
{ min: 1, max: 50, message: "不超过50个字符", trigger: "blur" }
{min: 1, max: 50, message: "不超过50个字符", trigger: "blur"}
],
disabled: false
},
@ -154,7 +168,7 @@ export default {
editField: "setName",
inputType: "input",
rules: [
{ min: 1, max: 100, message: "不超过100个字符", trigger: "blur" }
{min: 1, max: 100, message: "不超过100个字符", trigger: "blur"}
],
disabled: false
},
@ -165,7 +179,7 @@ export default {
editField: "setDesc",
inputType: "input",
rules: [
{ min: 1, max: 255, message: "不超过255个字符", trigger: "blur" }
{min: 1, max: 255, message: "不超过255个字符", trigger: "blur"}
],
disabled: false
},
@ -176,7 +190,18 @@ export default {
editField: "sourceCode",
inputType: "input",
rules: [
{ min: 1, max: 50, message: "不超过50个字符", trigger: "blur" }
{min: 1, max: 50, message: "不超过50个字符", trigger: "blur"}
],
disabled: false
},
{
label: "数据集类型", //
placeholder: "",
field: "setType",
editField: "setType",
inputType: "input",
rules: [
{min: 1, max: 50, message: "不超过50个字符", trigger: "blur"}
],
disabled: false
},
@ -245,16 +270,19 @@ export default {
};
},
created() {},
created() {
},
methods: {
operateDataset(type, prop) {
debugger
this.dialogVisibleSetDataSet = true;
if (prop) {
if (prop && prop.msg) {
this.dataSet = prop.msg;
type = prop.msg.setType;
} else {
this.dataSet = {};
}
this.$refs.EditDataSet.addOrEditDataSet(this.dataSet);
this.$refs.EditDataSet.addOrEditDataSet(this.dataSet, type);
},
refreshList() {
this.$refs.listPage.handleQueryForm("query");

Loading…
Cancel
Save