Foming
3 years ago
committed by
Gitee
commit
df1ba494b4
@ -0,0 +1,86 @@
|
||||
'use strict'
|
||||
// Template version: 1.2.6
|
||||
// see http://vuejs-templates.github.io/webpack for documentation.
|
||||
|
||||
const path = require('path')
|
||||
|
||||
module.exports = {
|
||||
dev: {
|
||||
// Paths
|
||||
assetsSubDirectory: 'static',
|
||||
assetsPublicPath: '/',
|
||||
proxyTable: {},
|
||||
|
||||
// Various Dev Server settings
|
||||
host: 'localhost', // can be overwritten by process.env.HOST
|
||||
port: 9528, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
|
||||
autoOpenBrowser: true,
|
||||
errorOverlay: true,
|
||||
notifyOnErrors: false,
|
||||
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
|
||||
|
||||
// Use Eslint Loader?
|
||||
// If true, your code will be linted during bundling and
|
||||
// linting errors and warnings will be shown in the console.
|
||||
useEslint: true,
|
||||
// If true, eslint errors and warnings will also be shown in the error overlay
|
||||
// in the browser.
|
||||
showEslintErrorsInOverlay: false,
|
||||
|
||||
/**
|
||||
* Source Maps
|
||||
*/
|
||||
|
||||
// https://webpack.js.org/configuration/devtool/#development
|
||||
devtool: 'cheap-source-map',
|
||||
|
||||
// CSS Sourcemaps off by default because relative paths are "buggy"
|
||||
// with this option, according to the CSS-Loader README
|
||||
// (https://github.com/webpack/css-loader#sourcemaps)
|
||||
// In our experience, they generally work as expected,
|
||||
// just be aware of this issue when enabling this option.
|
||||
cssSourceMap: false
|
||||
},
|
||||
|
||||
build: {
|
||||
// Template for index.html
|
||||
index: path.resolve(__dirname, '../dist/index.html'),
|
||||
|
||||
// Paths
|
||||
assetsRoot: path.resolve(__dirname, '../dist'),
|
||||
assetsSubDirectory: 'static',
|
||||
|
||||
/**
|
||||
* You can set by youself according to actual condition
|
||||
* You will need to set this if you plan to deploy your site under a sub path,
|
||||
* for example GitHub pages. If you plan to deploy your site to https://foo.github.io/bar/,
|
||||
* then assetsPublicPath should be set to "/bar/".
|
||||
* In most cases please use '/' !!!
|
||||
*/
|
||||
assetsPublicPath: '/report/',
|
||||
|
||||
/**
|
||||
* Source Maps
|
||||
*/
|
||||
|
||||
productionSourceMap: false,
|
||||
// https://webpack.js.org/configuration/devtool/#production
|
||||
devtool: 'source-map',
|
||||
|
||||
// Gzip off by default as many popular static hosts such as
|
||||
// Surge or Netlify already gzip all static assets for you.
|
||||
// Before setting to `true`, make sure to:
|
||||
// npm install --save-dev compression-webpack-plugin
|
||||
productionGzip: false,
|
||||
productionGzipExtensions: ['js', 'css'],
|
||||
|
||||
// Run the build command with an extra argument to
|
||||
// View the bundle analyzer report after build finishes:
|
||||
// `npm run build --report`
|
||||
// Set to `true` or `false` to always turn it on or off
|
||||
bundleAnalyzerReport: process.env.npm_config_report || false,
|
||||
|
||||
// `npm run build:prod --generate_report`
|
||||
generateAnalyzerReport: process.env.npm_config_generate_report || false
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,217 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
|
||||
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
|
||||
<parent>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-starter-parent</artifactId>
|
||||
<version>2.3.5.RELEASE</version>
|
||||
<relativePath/>
|
||||
</parent>
|
||||
|
||||
<modelVersion>4.0.0</modelVersion>
|
||||
|
||||
<groupId>com.anji-plus.otwb</groupId>
|
||||
<artifactId>product-report-starter</artifactId>
|
||||
<version>1.2.0-SNAPSHOT</version>
|
||||
|
||||
<properties>
|
||||
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
|
||||
<additionalparam>-Xdoclint:none</additionalparam>
|
||||
<maven.compiler.source>1.8</maven.compiler.source>
|
||||
<maven.compiler.target>1.8</maven.compiler.target>
|
||||
<maven.test.skip>true</maven.test.skip>
|
||||
</properties>
|
||||
|
||||
<dependencies>
|
||||
|
||||
<dependency>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-starter-web</artifactId>
|
||||
<exclusions>
|
||||
<exclusion>
|
||||
<groupId>org.apache.logging.log4j</groupId>
|
||||
<artifactId>log4j-to-slf4j</artifactId>
|
||||
</exclusion>
|
||||
</exclusions>
|
||||
</dependency>
|
||||
|
||||
<dependency>
|
||||
<groupId>org.apache.logging.log4j</groupId>
|
||||
<artifactId>log4j-to-slf4j</artifactId>
|
||||
<version>2.15.0</version>
|
||||
</dependency>
|
||||
|
||||
<dependency>
|
||||
<groupId>org.apache.logging.log4j</groupId>
|
||||
<artifactId>log4j-api</artifactId>
|
||||
<version>2.15.0</version>
|
||||
</dependency>
|
||||
|
||||
|
||||
<dependency>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-starter-cache</artifactId>
|
||||
</dependency>
|
||||
|
||||
<dependency>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-starter-test</artifactId>
|
||||
<scope>test</scope>
|
||||
</dependency>
|
||||
|
||||
<dependency>
|
||||
<groupId>org.springframework.cloud</groupId>
|
||||
<artifactId>spring-cloud-context</artifactId>
|
||||
<version>2.2.6.RELEASE</version>
|
||||
</dependency>
|
||||
|
||||
<dependency>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-configuration-processor</artifactId>
|
||||
<optional>true</optional>
|
||||
</dependency>
|
||||
|
||||
<dependency>
|
||||
<groupId>com.anji-plus</groupId>
|
||||
<artifactId>spring-boot-gaea</artifactId>
|
||||
<version>2.0.3.RELEASE</version>
|
||||
<exclusions>
|
||||
<exclusion>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-starter-data-redis</artifactId>
|
||||
</exclusion>
|
||||
</exclusions>
|
||||
</dependency>
|
||||
|
||||
<dependency>
|
||||
<groupId>com.baomidou</groupId>
|
||||
<artifactId>mybatis-plus-boot-starter</artifactId>
|
||||
<version>3.3.2</version>
|
||||
</dependency>
|
||||
|
||||
<dependency>
|
||||
<groupId>mysql</groupId>
|
||||
<artifactId>mysql-connector-java</artifactId>
|
||||
</dependency>
|
||||
<dependency>
|
||||
<groupId>com.alibaba</groupId>
|
||||
<artifactId>druid</artifactId>
|
||||
<version>1.2.0</version>
|
||||
</dependency>
|
||||
<dependency>
|
||||
<groupId>org.flywaydb</groupId>
|
||||
<artifactId>flyway-core</artifactId>
|
||||
<version>5.2.1</version>
|
||||
</dependency>
|
||||
|
||||
<dependency>
|
||||
<groupId>net.sf.ehcache</groupId>
|
||||
<artifactId>ehcache</artifactId>
|
||||
<version>2.10.6</version>
|
||||
</dependency>
|
||||
|
||||
<dependency>
|
||||
<groupId>org.apache.httpcomponents</groupId>
|
||||
<artifactId>httpclient</artifactId>
|
||||
<version>4.5.10</version>
|
||||
</dependency>
|
||||
|
||||
<dependency>
|
||||
<groupId>org.projectlombok</groupId>
|
||||
<artifactId>lombok</artifactId>
|
||||
<version>1.18.10</version>
|
||||
<optional>true</optional>
|
||||
</dependency>
|
||||
|
||||
<dependency>
|
||||
<groupId>com.itextpdf</groupId>
|
||||
<artifactId>itextpdf</artifactId>
|
||||
<version>5.5.13.2</version>
|
||||
</dependency>
|
||||
<dependency>
|
||||
<groupId>com.itextpdf</groupId>
|
||||
<artifactId>itext-asian</artifactId>
|
||||
<version>5.2.0</version>
|
||||
</dependency>
|
||||
|
||||
<dependency>
|
||||
<groupId>org.apache.poi</groupId>
|
||||
<artifactId>poi</artifactId>
|
||||
<version>4.1.2</version>
|
||||
</dependency>
|
||||
<dependency>
|
||||
<groupId>org.apache.poi</groupId>
|
||||
<artifactId>poi-ooxml</artifactId>
|
||||
<version>4.1.2</version>
|
||||
</dependency>
|
||||
<dependency>
|
||||
<groupId>org.apache.poi</groupId>
|
||||
<artifactId>poi-ooxml-schemas</artifactId>
|
||||
<version>4.1.2</version>
|
||||
</dependency>
|
||||
|
||||
<dependency>
|
||||
<groupId>org.codehaus.groovy</groupId>
|
||||
<artifactId>groovy</artifactId>
|
||||
<version>3.0.9</version>
|
||||
</dependency>
|
||||
|
||||
</dependencies>
|
||||
|
||||
|
||||
<!-- 上传到公司私服， mvn clean deploy -Dmaven.test.skip=true -->
|
||||
<build>
|
||||
<plugins>
|
||||
<plugin>
|
||||
<groupId>org.apache.maven.plugins</groupId>
|
||||
<artifactId>maven-compiler-plugin</artifactId>
|
||||
<version>3.3</version>
|
||||
<configuration>
|
||||
<source>1.8</source>
|
||||
<target>1.8</target>
|
||||
<encoding>UTF-8</encoding>
|
||||
</configuration>
|
||||
</plugin>
|
||||
<plugin>
|
||||
<groupId>org.apache.maven.plugins</groupId>
|
||||
<artifactId>maven-resources-plugin</artifactId>
|
||||
<version>2.4</version>
|
||||
<configuration>
|
||||
<encoding>UTF-8</encoding>
|
||||
</configuration>
|
||||
</plugin>
|
||||
<plugin>
|
||||
<groupId>org.apache.maven.plugins</groupId>
|
||||
<artifactId>maven-source-plugin</artifactId>
|
||||
<version>2.2.1</version>
|
||||
<executions>
|
||||
<execution>
|
||||
<id>attach-sources</id>
|
||||
<goals>
|
||||
<goal>jar</goal>
|
||||
</goals>
|
||||
</execution>
|
||||
</executions>
|
||||
</plugin>
|
||||
<plugin>
|
||||
<groupId>org.apache.maven.plugins</groupId>
|
||||
<artifactId>maven-deploy-plugin</artifactId>
|
||||
<version>2.7</version>
|
||||
<configuration>
|
||||
<updateReleaseInfo>true</updateReleaseInfo>
|
||||
</configuration>
|
||||
</plugin>
|
||||
</plugins>
|
||||
</build>
|
||||
<distributionManagement>
|
||||
<repository>
|
||||
<id>nexus-releases</id>
|
||||
<url>http://10.108.10.53:8081/repository/maven-releases/</url>
|
||||
</repository>
|
||||
<snapshotRepository>
|
||||
<id>nexus-snapshots</id>
|
||||
<url>http://10.108.10.53:8081/repository/maven-snapshots/</url>
|
||||
</snapshotRepository>
|
||||
</distributionManagement>
|
||||
</project>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 309 KiB |
@ -0,0 +1,33 @@
|
||||
package com.anjiplus.template.gaea.business.enums;
|
||||
|
||||
/**
|
||||
* Created by raodeming on 2022/5/8.
|
||||
*/
|
||||
public enum ReportTypeEnum {
|
||||
|
||||
/**report_screen*/
|
||||
report_screen("report_screen", "大屏报表"),
|
||||
/**report_excel*/
|
||||
report_excel("report_excel", "excel报表"),
|
||||
;
|
||||
|
||||
private String codeValue;
|
||||
private String codeDesc;
|
||||
|
||||
ReportTypeEnum() {
|
||||
}
|
||||
|
||||
private ReportTypeEnum(String codeValue, String codeDesc) {
|
||||
this.codeValue = codeValue;
|
||||
this.codeDesc = codeDesc;
|
||||
}
|
||||
|
||||
public String getCodeValue() {
|
||||
return this.codeValue;
|
||||
}
|
||||
|
||||
public String getCodeDesc() {
|
||||
return this.codeDesc;
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
package com.anjiplus.template.gaea.business.modules.datasettransform.service;
|
||||
|
||||
import com.alibaba.fastjson.JSONObject;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
/**
|
||||
* @author: Raod
|
||||
* @since: 2022-02-23
|
||||
*/
|
||||
public interface IGroovyHandler {
|
||||
|
||||
List<JSONObject> transform(List<JSONObject> data);
|
||||
}
|
||||
@ -0,0 +1,65 @@
|
||||
package com.anjiplus.template.gaea.business.modules.datasettransform.service.impl;
|
||||
|
||||
import com.alibaba.fastjson.JSONObject;
|
||||
import com.anji.plus.gaea.exception.BusinessExceptionBuilder;
|
||||
import com.anjiplus.template.gaea.business.code.ResponseCode;
|
||||
import com.anjiplus.template.gaea.business.modules.datasettransform.controller.dto.DataSetTransformDto;
|
||||
import com.anjiplus.template.gaea.business.modules.datasettransform.service.IGroovyHandler;
|
||||
import com.anjiplus.template.gaea.business.modules.datasettransform.service.TransformStrategy;
|
||||
import groovy.lang.GroovyClassLoader;
|
||||
import lombok.extern.slf4j.Slf4j;
|
||||
import org.springframework.stereotype.Component;
|
||||
|
||||
import javax.script.Invocable;
|
||||
import javax.script.ScriptEngine;
|
||||
import javax.script.ScriptEngineManager;
|
||||
import java.util.List;
|
||||
|
||||
/**
|
||||
* Created by raodeming on 2021/3/23.
|
||||
*/
|
||||
@Component
|
||||
@Slf4j
|
||||
public class GroovyTransformServiceImpl implements TransformStrategy {
|
||||
|
||||
private GroovyClassLoader groovyClassLoader = new GroovyClassLoader();
|
||||
|
||||
/**
|
||||
* 数据清洗转换 类型
|
||||
*
|
||||
* @return
|
||||
*/
|
||||
@Override
|
||||
public String type() {
|
||||
return "javaBean";
|
||||
}
|
||||
|
||||
/***
|
||||
* 清洗转换算法接口
|
||||
* @param def
|
||||
* @param data
|
||||
* @return
|
||||
*/
|
||||
@Override
|
||||
public List<JSONObject> transform(DataSetTransformDto def, List<JSONObject> data) {
|
||||
String transformScript = def.getTransformScript();
|
||||
Class<?> clazz = groovyClassLoader.parseClass(transformScript);
|
||||
if (clazz != null) {
|
||||
try {
|
||||
Object instance = clazz.newInstance();
|
||||
if (instance!=null) {
|
||||
if (instance instanceof IGroovyHandler) {
|
||||
IGroovyHandler handler = (IGroovyHandler) instance;
|
||||
return handler.transform(data);
|
||||
} else {
|
||||
System.err.println("转换失败！");
|
||||
}
|
||||
}
|
||||
} catch (Exception e) {
|
||||
log.info("执行javaBean异常", e);
|
||||
throw BusinessExceptionBuilder.build(ResponseCode.EXECUTE_GROOVY_ERROR, e.getMessage());
|
||||
}
|
||||
}
|
||||
return data;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
UPDATE `aj_report`.`gaea_dict_item` SET `dict_code` = 'TRANSFORM_TYPE', `item_name` = 'java脚本', `item_value` = 'javaBean', `item_extend` = NULL, `enabled` = 1, `locale` = 'zh', `remark` = NULL, `sort` = 2, `create_by` = 'admin', `create_time` = '2021-03-23 10:54:08', `update_by` = 'admin', `update_time` = '2021-03-23 10:54:08', `version` = 1 WHERE `id` = 151;
|
||||
@ -0,0 +1,5 @@
|
||||
-- 补充admin对于execl表格权限
|
||||
|
||||
INSERT INTO `aj_report`.`access_role_authority`(`role_code`,`target`,`action`) SELECT "root","excelManage","insert" FROM DUAL WHERE NOT EXISTS(SELECT `role_code`,`target`,`action` FROM `aj_report`.`access_role_authority` WHERE `role_code`="root" AND `target`="excelManage" AND `action`="insert");
|
||||
|
||||
INSERT INTO `aj_report`.`access_role_authority`(`role_code`,`target`,`action`) SELECT "root","excelManage","update" FROM DUAL WHERE NOT EXISTS(SELECT `role_code`,`target`,`action` FROM `aj_report`.`access_role_authority` WHERE `role_code`="root" AND `target`="excelManage" AND `action`="update");
|
||||
@ -0,0 +1,7 @@
|
||||
-- 新增坐标轴字典
|
||||
|
||||
INSERT INTO `aj_report`.`gaea_dict`(`dict_name`, `dict_code`, `remark`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('XY坐标属性', 'COORD_PROPERTIES', 'XY坐标属性', '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 ('COORD_PROPERTIES', '数据', 'series', 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 ('COORD_PROPERTIES', 'X轴', 'xAxis', 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 ('COORD_PROPERTIES', 'Y轴', 'yAxis', NULL, 1, 'zh', NULL, NULL, 'admin', NOW(), 'admin', NOW(), 1);
|
||||
@ -0,0 +1,16 @@
|
||||
-- 角色权限调整
|
||||
-- access_authority
|
||||
REPLACE INTO `aj_report`.`access_authority`(`parent_target`, `target`, `target_name`, `action`, `action_name`, `sort`, `enable_flag`, `delete_flag`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('access', 'authorityManage', '权限管理', 'detail', '权限明细', 101, 1, 0, 'admin', '2019-07-23 15:59:40', 'admin', '2019-07-23 15:59:40', 1);
|
||||
REPLACE INTO `aj_report`.`access_authority`(`parent_target`, `target`, `target_name`, `action`, `action_name`, `sort`, `enable_flag`, `delete_flag`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('access', 'roleManage', '角色管理', 'detail', '角色明细', 105, 1, 0, 'admin', '2019-07-23 15:59:40', 'admin', '2021-07-17 20:41:46', 2);
|
||||
REPLACE INTO `aj_report`.`access_authority`(`parent_target`, `target`, `target_name`, `action`, `action_name`, `sort`, `enable_flag`, `delete_flag`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('access', 'userManage', '用户管理', 'detail', '用户明细', 110, 1, 0, 'admin', '2019-07-23 15:59:40', 'admin', '2019-07-23 15:59:40', 1);
|
||||
REPLACE INTO `aj_report`.`access_authority`(`parent_target`, `target`, `target_name`, `action`, `action_name`, `sort`, `enable_flag`, `delete_flag`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('report', 'datasourceManage', '数据源管理', 'detail', '数据源明细', 200, 1, 0, 'admin', '2019-07-23 15:59:40', 'admin', '2019-07-23 15:59:40', 1);
|
||||
REPLACE INTO `aj_report`.`access_authority`(`parent_target`, `target`, `target_name`, `action`, `action_name`, `sort`, `enable_flag`, `delete_flag`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('report', 'resultsetManage', '数据集管理', 'detail', '数据集明细', 204, 1, 0, 'admin', '2019-07-23 15:59:40', 'admin', '2019-07-23 15:59:40', 1);
|
||||
REPLACE INTO `aj_report`.`access_authority`(`parent_target`, `target`, `target_name`, `action`, `action_name`, `sort`, `enable_flag`, `delete_flag`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('report', 'reportManage', '报表管理', 'detail', '报表明细', 221, 1, 0, 'admin', '2019-07-23 15:59:40', 'admin', '2019-07-23 15:59:40', 1);
|
||||
REPLACE INTO `aj_report`.`access_authority`(`parent_target`, `target`, `target_name`, `action`, `action_name`, `sort`, `enable_flag`, `delete_flag`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('report', 'bigScreenManage', '大屏报表', 'detail', '大屏明细', 231, 1, 0, 'admin', '2019-07-23 15:59:40', 'admin', '2019-07-23 15:59:40', 1);
|
||||
REPLACE INTO `aj_report`.`access_authority`(`parent_target`, `target`, `target_name`, `action`, `action_name`, `sort`, `enable_flag`, `delete_flag`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('report', 'excelManage', '表格报表', 'detail', 'excel明细', 234, 1, 0, 'admin', '2019-07-23 15:59:40', 'admin', '2019-07-23 15:59:40', 1);
|
||||
REPLACE INTO `aj_report`.`access_authority`(`parent_target`, `target`, `target_name`, `action`, `action_name`, `sort`, `enable_flag`, `delete_flag`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('system', 'fileManage', '文件管理', 'detail', '文件明细', 300, 1, 0, 'admin', '2019-07-23 15:59:40', 'admin', '2019-07-23 15:59:40', 1);
|
||||
REPLACE INTO `aj_report`.`access_authority`(`parent_target`, `target`, `target_name`, `action`, `action_name`, `sort`, `enable_flag`, `delete_flag`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('system', 'dictManage', '数据字典', 'detail', '数据字典明细', 300, 1, 0, 'admin', '2019-07-23 15:59:40', 'admin', '2019-07-23 15:59:40', 1);
|
||||
REPLACE INTO `aj_report`.`access_authority`(`parent_target`, `target`, `target_name`, `action`, `action_name`, `sort`, `enable_flag`, `delete_flag`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('system', 'dictItemManage', '数据字典项', 'detail', '数据字典项明细', 300, 1, 0, 'admin', '2019-07-23 15:59:40', 'admin', '2019-07-23 15:59:40', 1);
|
||||
REPLACE INTO `aj_report`.`access_authority`(`parent_target`, `target`, `target_name`, `action`, `action_name`, `sort`, `enable_flag`, `delete_flag`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('report', 'bigScreenManage', '大屏报表', 'copy', '复制大屏', 236, 1, 0, 'admin', '2019-07-23 15:59:40', 'admin', '2019-07-23 15:59:40', 1);
|
||||
|
||||
UPDATE `aj_report`.`access_authority` SET `parent_target` = 'report', `target` = 'bigScreenManage', `target_name` = '大屏报表', `action` = 'view', `action_name` = '查看大屏', `sort` = 232, `enable_flag` = 1, `delete_flag` = 0, `create_by` = 'admin', `create_time` = '2019-07-23 15:59:40', `update_by` = 'admin', `update_time` = '2019-07-23 15:59:40', `version` = 1 WHERE `parent_target` = 'report' AND `target` = 'bigScreenManage' AND `action` = 'view';
|
||||
@ -0,0 +1,58 @@
|
||||
package com;
|
||||
|
||||
import com.alibaba.fastjson.JSONObject;
|
||||
import com.anjiplus.template.gaea.business.modules.datasettransform.service.IGroovyHandler;
|
||||
import groovy.lang.GroovyClassLoader;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
/**
|
||||
* @author: Raod
|
||||
* @since: 2022-02-23
|
||||
*/
|
||||
public class GroovyTest {
|
||||
|
||||
|
||||
public static void main(String[] args) throws InstantiationException, IllegalAccessException {
|
||||
// codeSource来自DemoGroovyHandler
|
||||
String codeSource = "package com;\n" +
|
||||
"\n" +
|
||||
"import com.alibaba.fastjson.JSONObject;\n" +
|
||||
"import com.anjiplus.template.gaea.business.modules.datasettransform.service.IGroovyHandler;\n" +
|
||||
"\n" +
|
||||
"import java.util.ArrayList;\n" +
|
||||
"import java.util.List;\n" +
|
||||
"\n" +
|
||||
"/**\n" +
|
||||
" * @author: Raod\n" +
|
||||
" * @since: 2022-02-23\n" +
|
||||
" */\n" +
|
||||
"public class DemoGroovyHandler implements IGroovyHandler {\n" +
|
||||
"\n" +
|
||||
" @Override\n" +
|
||||
" public List<JSONObject> transform(List<JSONObject> data) {\n" +
|
||||
" List<JSONObject> result = new ArrayList<>();\n" +
|
||||
" JSONObject jsonObject = new JSONObject();\n" +
|
||||
" jsonObject.put(\"test\", \"demo\");\n" +
|
||||
" result.add(jsonObject);\n" +
|
||||
" return result;\n" +
|
||||
" }\n" +
|
||||
"}";
|
||||
GroovyClassLoader groovyClassLoader = new GroovyClassLoader();
|
||||
Class<?> clazz = groovyClassLoader.parseClass(codeSource);
|
||||
if (clazz != null) {
|
||||
Object instance = clazz.newInstance();
|
||||
if (instance!=null) {
|
||||
if (instance instanceof IGroovyHandler) {
|
||||
IGroovyHandler handler = (IGroovyHandler) instance;
|
||||
List<JSONObject> transform = handler.transform(null);
|
||||
System.out.println(JSONObject.toJSONString(transform));
|
||||
|
||||
} else {
|
||||
System.err.println("转换失败！");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 163 KiB |
@ -0,0 +1,237 @@
|
||||
.layout {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #242a30;
|
||||
color: #fff;
|
||||
.layout-bar {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 12px;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
.bar-item {
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
.iconfont {
|
||||
font-size: 12px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.el-dropdown-link {
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.layout-container {
|
||||
width: 100%;
|
||||
height: calc(100vh - 40px);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
.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%;
|
||||
color: #fff;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
/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 {
|
||||
}
|
||||
}
|
||||
/deep/.el-tabs__content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.layout-middle {
|
||||
// display: flex;
|
||||
position: relative;
|
||||
//width: calc(100% - 445px);
|
||||
height: 100%;
|
||||
background-color: rgb(36, 42, 48);
|
||||
box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
border: 1px solid rgb(36, 42, 48);
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
.workbench-container {
|
||||
position: relative;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.vueRuler {
|
||||
width: 100%;
|
||||
padding: 18px 0px 0px 18px;
|
||||
}
|
||||
|
||||
.workbench {
|
||||
background-color: #1e1e1e;
|
||||
position: relative;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.bg-grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 30px 30px, 30px 30px;
|
||||
background-image: linear-gradient(
|
||||
hsla(0, 0%, 100%, 0.1) 1px,
|
||||
transparent 0
|
||||
),
|
||||
linear-gradient(90deg, hsla(0, 0%, 100%, 0.1) 1px, transparent 0);
|
||||
// z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-right {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs--border-card {
|
||||
border: 0;
|
||||
.el-tabs__header {
|
||||
background: transparent;
|
||||
.el-tabs__nav {
|
||||
width: 100%;
|
||||
.el-tabs__item {
|
||||
background-color: #242f3b;
|
||||
border: 0px;
|
||||
font-size: 12px;
|
||||
width: 50%;
|
||||
.icon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs__item.is-active {
|
||||
background-color: #31455d;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs__content {
|
||||
background-color: #242a30;
|
||||
height: calc(100vh - 80px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
.el-tab-pane {
|
||||
color: #bfcbd9;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track,
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 1px;
|
||||
border: 0 solid transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
/*修改滚动条的背景和圆角*/
|
||||
background: #29405c;
|
||||
-webkit-border-radius: 7px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
min-height: 20px;
|
||||
background-clip: content-box;
|
||||
box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/*修改垂直滚动条的样式*/
|
||||
&::-webkit-scrollbar-thumb:vertical {
|
||||
background-color: #00113a;
|
||||
-webkit-border-radius: 7px;
|
||||
}
|
||||
|
||||
/*修改水平滚动条的样式*/
|
||||
&::-webkit-scrollbar-thumb:horizontal {
|
||||
background-color: #00113a;
|
||||
-webkit-border-radius: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/.el-dropdown-menu__item {
|
||||
max-width: none;
|
||||
}
|
||||
@ -0,0 +1,688 @@
|
||||
/*
|
||||
* @Descripttion: 热力图
|
||||
* @version:
|
||||
* @Author: whw
|
||||
* @Date: 2021-11-3
|
||||
* @LastEditors: whw
|
||||
* @LastEditTime: 2021-11-3
|
||||
*/
|
||||
export const widgetHeatmap = {
|
||||
code: 'widget-heatmap',
|
||||
type: 'chart',
|
||||
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: '#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: 16
|
||||
},
|
||||
{
|
||||
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: ''
|
||||
},
|
||||
{
|
||||
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
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
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',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
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',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
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: 'tipsLineColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '坐标轴边距设置',
|
||||
list: [
|
||||
{
|
||||
type: 'el-slider',
|
||||
label: '左边距(像素)',
|
||||
name: 'marginLeft',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 10,
|
||||
}, {
|
||||
type: 'el-slider',
|
||||
label: '顶边距(像素)',
|
||||
name: 'marginTop',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 50,
|
||||
}, {
|
||||
type: 'el-slider',
|
||||
label: '右边距(像素)',
|
||||
name: 'marginRight',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 40,
|
||||
}, {
|
||||
type: 'el-slider',
|
||||
label: '底边距(像素)',
|
||||
name: 'marginBottom',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 10,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '图设置',
|
||||
list: [
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '图例',
|
||||
name: 'isShowLegend',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 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',
|
||||
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,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,367 @@
|
||||
<template>
|
||||
<div :style="styleObj">
|
||||
<v-chart :options="options" autoresize/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "widgetHeatmap",
|
||||
components: {},
|
||||
props: {
|
||||
value: Object,
|
||||
ispreview: Boolean,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: {
|
||||
title: {
|
||||
text: "",
|
||||
left: "center",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
position: "top",
|
||||
show: true,
|
||||
textStyle: {},
|
||||
},
|
||||
grid: {
|
||||
height: "90%",
|
||||
width: "90%",
|
||||
top: 10,
|
||||
left: 20,
|
||||
},
|
||||
xAxis: {
|
||||
name: "",
|
||||
type: "category",
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: "#0f0",
|
||||
},
|
||||
data: [],
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: "",
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: "",
|
||||
type: "category",
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: "#0f0",
|
||||
},
|
||||
data: [],
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: "",
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
visualMap: {
|
||||
show: true,
|
||||
min: 0,
|
||||
max: 5000,
|
||||
calculable: true,
|
||||
orient: "horizontal",
|
||||
left: "center",
|
||||
bottom: 0,
|
||||
inRange: {
|
||||
color: [],
|
||||
},
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
type: "heatmap",
|
||||
data: [],
|
||||
label: {
|
||||
show: false,
|
||||
fontSize: 16,
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
optionsStyle: {}, // 样式
|
||||
optionsData: {}, // 数据
|
||||
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.collapse;
|
||||
this.optionsSetup = val.setup;
|
||||
this.editorOptions();
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.optionsStyle = this.value.position;
|
||||
this.optionsData = this.value.data;
|
||||
this.optionsCollapse = this.value.collapse;
|
||||
this.optionsSetup = this.value.setup;
|
||||
this.editorOptions();
|
||||
},
|
||||
methods: {
|
||||
// 修改图标options属性
|
||||
editorOptions() {
|
||||
this.setOptionsTitle();
|
||||
this.setOptionsX();
|
||||
this.setOptionsY();
|
||||
this.setOptionsSeries();
|
||||
this.setOptionsMargin();
|
||||
this.setOptionsVisualMap();
|
||||
this.setOptionsData();
|
||||
},
|
||||
// 标题修改
|
||||
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
|
||||
},
|
||||
};
|
||||
this.options.title = title;
|
||||
},
|
||||
// X轴设置
|
||||
setOptionsX() {
|
||||
const optionsSetup = this.optionsSetup;
|
||||
const xAxis = {
|
||||
type: "category",
|
||||
// 坐标轴是否显示
|
||||
show: optionsSetup.hideX,
|
||||
// 坐标轴名称
|
||||
name: optionsSetup.xName,
|
||||
nameTextStyle: {
|
||||
color: optionsSetup.xNameColor,
|
||||
fontSize: optionsSetup.xNameFontSize
|
||||
},
|
||||
// 轴反转
|
||||
inverse: optionsSetup.reversalX,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
// 文字间隔
|
||||
interval: optionsSetup.textInterval,
|
||||
// 文字角度
|
||||
rotate: optionsSetup.textAngleX,
|
||||
textStyle: {
|
||||
// 坐标文字颜色
|
||||
color: optionsSetup.Xcolor,
|
||||
fontSize: optionsSetup.fontSizeX
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: optionsSetup.lineColorX
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
};
|
||||
this.options.xAxis = xAxis;
|
||||
},
|
||||
// Y轴设置
|
||||
setOptionsY() {
|
||||
const optionsSetup = this.optionsSetup;
|
||||
const yAxis = {
|
||||
type: "category",
|
||||
// 坐标轴是否显示
|
||||
show: optionsSetup.isShowY,
|
||||
// 坐标轴名称
|
||||
name: optionsSetup.textNameY,
|
||||
nameTextStyle: {
|
||||
color: optionsSetup.NameColorY,
|
||||
fontSize: optionsSetup.NameFontSizeY
|
||||
},
|
||||
// y轴反转
|
||||
inverse: optionsSetup.reversalY,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
// 文字角度
|
||||
rotate: optionsSetup.textAngleY,
|
||||
textStyle: {
|
||||
// 坐标文字颜色
|
||||
color: optionsSetup.colorY,
|
||||
fontSize: optionsSetup.fontSizeY
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: optionsSetup.lineColorY
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
};
|
||||
this.options.yAxis = yAxis;
|
||||
},
|
||||
// 数值设定
|
||||
setOptionsSeries() {
|
||||
const optionsSetup = this.optionsSetup;
|
||||
const lable = {
|
||||
show: optionsSetup.isShow,
|
||||
textStyle: {
|
||||
fontSize: optionsSetup.fontSize,
|
||||
color: optionsSetup.subTextColor,
|
||||
fontWeight: optionsSetup.fontWeight
|
||||
}
|
||||
}
|
||||
this.options.series[0].label = lable;
|
||||
},
|
||||
// 边距设置
|
||||
setOptionsMargin() {
|
||||
const optionsSetup = this.optionsSetup;
|
||||
const grid = {
|
||||
left: optionsSetup.marginLeft,
|
||||
right: optionsSetup.marginRight,
|
||||
bottom: optionsSetup.marginBottom,
|
||||
top: optionsSetup.marginTop,
|
||||
containLabel: true
|
||||
};
|
||||
this.options.grid = grid;
|
||||
},
|
||||
// tooltip 设置
|
||||
setOptionsTooltip() {
|
||||
const optionsSetup = this.optionsSetup;
|
||||
const tooltip = {
|
||||
trigger: "item",
|
||||
position: "top",
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: optionsSetup.lineColor,
|
||||
fontSize: optionsSetup.tipsLineColor
|
||||
}
|
||||
};
|
||||
this.options.tooltip = tooltip;
|
||||
},
|
||||
// 图设置
|
||||
setOptionsVisualMap() {
|
||||
const optionsSetup = this.optionsSetup;
|
||||
const visualMap = this.options.visualMap;
|
||||
visualMap.show = optionsSetup.isShowLegend;
|
||||
visualMap.min = optionsSetup.dataMin;
|
||||
visualMap.max = optionsSetup.dataMax;
|
||||
visualMap.textStyle = {
|
||||
fontSize : optionsSetup.lengedFontSize,
|
||||
color : optionsSetup.lengedColor
|
||||
};
|
||||
visualMap.inRange.color = optionsSetup.lengedColorList.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;
|
||||
},
|
||||
setOptionsData() {
|
||||
const optionsData = this.optionsData; // 数据类型 静态 or 动态
|
||||
optionsData.dataType == "staticData"
|
||||
? this.staticDataFn(optionsData.staticData)
|
||||
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
|
||||
},
|
||||
//去重
|
||||
setUnique(arr) {
|
||||
let newArr = [];
|
||||
arr.forEach(item => {
|
||||
return newArr.includes(item) ? '' : newArr.push(item);
|
||||
});
|
||||
return newArr;
|
||||
},
|
||||
staticDataFn(val) {
|
||||
const data = [];
|
||||
let xAxisList = [];
|
||||
let yAxisList = [];
|
||||
for (const i in val) {
|
||||
xAxisList[i] = val[i].axis;
|
||||
yAxisList[i] = val[i].yaxis;
|
||||
data[i] = [val[i].axis,val[i].yaxis,val[i].num]
|
||||
}
|
||||
xAxisList = this.setUnique(xAxisList);
|
||||
yAxisList = this.setUnique(yAxisList);
|
||||
this.options.xAxis.data = xAxisList;
|
||||
this.options.yAxis.data = yAxisList;
|
||||
this.options.series[0].data = data;
|
||||
},
|
||||
dynamicDataFn(val, refreshTime) {
|
||||
if (!val) return;
|
||||
if (this.ispreview) {
|
||||
this.getEchartData(val);
|
||||
this.flagInter = setInterval(() => {
|
||||
this.getEchartData(val);
|
||||
}, refreshTime);
|
||||
} else {
|
||||
this.getEchartData(val);
|
||||
}
|
||||
},
|
||||
getEchartData(val) {
|
||||
const data = this.queryEchartsData(val);
|
||||
data.then((res) => {
|
||||
this.renderingFn(res);
|
||||
});
|
||||
},
|
||||
renderingFn(val) {
|
||||
this.options.xAxis.data = val.xAxis;
|
||||
this.options.yAxis.data = val.yAxis;
|
||||
this.options.series[0].data = val.series;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.echarts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<el-input
|
||||
clearable
|
||||
v-model="colorValue"
|
||||
placeholder="请输入颜色"
|
||||
size="mini"
|
||||
@change="changeColor"
|
||||
>
|
||||
<template slot="append">
|
||||
<el-color-picker
|
||||
v-model="colorValue"
|
||||
:predefine="predefineColors"
|
||||
show-alpha
|
||||
size="mini"
|
||||
@change="changeColor"
|
||||
/>
|
||||
</template>
|
||||
</el-input>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ColorPicker",
|
||||
model: {
|
||||
prop: "value",
|
||||
event: "input"
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: [String],
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
predefineColors: [
|
||||
"#ff4500",
|
||||
"#ff8c00",
|
||||
"#ffd700",
|
||||
"#90ee90",
|
||||
"#00ced1",
|
||||
"#1e90ff",
|
||||
"#c71585"
|
||||
],
|
||||
colorValue: ""
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
this.colorValue = val || "";
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.colorValue = this.value;
|
||||
},
|
||||
methods: {
|
||||
changeColor(val) {
|
||||
this.colorValue = val || "";
|
||||
this.$emit("input", this.colorValue);
|
||||
this.$emit("change", this.colorValue);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
/deep/.el-color-picker--mini,
|
||||
/deep/.el-color-picker--mini .el-color-picker__trigger {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div v-show="visible" class="contentmenu" :style="styleObj">
|
||||
<div class="contentmenu__item" @click="deleteLayer">
|
||||
<i class="iconfont iconguanbi"></i> 删除图层
|
||||
</div>
|
||||
<div class="contentmenu__item" @click="copyLayer">
|
||||
<i class="iconfont iconfuzhi1"></i> 复制图层
|
||||
</div>
|
||||
<div class="contentmenu__item" @click="istopLayer">
|
||||
<i class="iconfont iconjinlingyingcaiwangtubiao01"></i> 置顶图层
|
||||
</div>
|
||||
<div class="contentmenu__item" @click="setlowLayer">
|
||||
<i class="iconfont iconleft-copy"></i> 置底图层
|
||||
</div>
|
||||
<div class="contentmenu__item" @click="moveupLayer">
|
||||
<i class="iconfont iconjinlingyingcaiwangtubiao01"></i> 上移一层
|
||||
</div>
|
||||
<div class="contentmenu__item" @click="movedownLayer">
|
||||
<i class="iconfont iconleft-copy"></i> 下移一层
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
styleObj: Object,
|
||||
visible: Boolean
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
watch: {
|
||||
visible(value) {
|
||||
if (value) {
|
||||
document.body.addEventListener("click", this.closeMenu);
|
||||
} else {
|
||||
document.body.removeEventListener("click", this.closeMenu);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeMenu() {
|
||||
this.$emit("update:visible", false);
|
||||
},
|
||||
deleteLayer() {
|
||||
this.$confirm("是否删除所选图层?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
this.$emit("deletelayer");
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "删除成功!"
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消删除"
|
||||
});
|
||||
});
|
||||
},
|
||||
copyLayer() {
|
||||
this.$emit("copylayer");
|
||||
},
|
||||
istopLayer() {
|
||||
this.$emit("istopLayer");
|
||||
},
|
||||
setlowLayer() {
|
||||
this.$emit("setlowLayer");
|
||||
},
|
||||
moveupLayer() {
|
||||
this.$emit("moveupLayer");
|
||||
},
|
||||
movedownLayer() {
|
||||
this.$emit("movedownLayer");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.contentmenu {
|
||||
width: 160px;
|
||||
position: fixed;
|
||||
z-index: 99999;
|
||||
list-style: none;
|
||||
-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
padding: 0;
|
||||
background: #27343e;
|
||||
color: #bcc9d4;
|
||||
.contentmenu__item {
|
||||
z-index: 10000;
|
||||
list-style: none;
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
}
|
||||
.iconfont {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-input
|
||||
clearable
|
||||
v-model.trim="uploadImgUrl"
|
||||
size="mini"
|
||||
@change="changeInput"
|
||||
>
|
||||
<template slot="append">
|
||||
<i class="iconfont iconfolder-o"></i>
|
||||
<input type="file" class="file" ref="files" @change="getImages" />
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import { getToken } from "@/utils/auth";
|
||||
export default {
|
||||
model: {
|
||||
prop: "value",
|
||||
event: "input"
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: "",
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
requestUrl: process.env.BASE_API + "/file/upload",
|
||||
headers: {
|
||||
Authorization: getToken()
|
||||
},
|
||||
fileList: [],
|
||||
uploadImgUrl: ""
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.uploadImgUrl = this.value;
|
||||
},
|
||||
methods: {
|
||||
getImages(el) {
|
||||
let file = el.target.files[0];
|
||||
let type = file.type.split("/")[0];
|
||||
if (type === "image") {
|
||||
this.upload(file);
|
||||
} else {
|
||||
this.$message.warn("只能上传图片格式");
|
||||
}
|
||||
},
|
||||
upload(imgUrl) {
|
||||
let that = this;
|
||||
console.log(that.headers);
|
||||
let formdata = new FormData();
|
||||
formdata.append("file", imgUrl);
|
||||
axios
|
||||
.post(this.requestUrl, formdata, {
|
||||
headers: that.headers
|
||||
})
|
||||
.then(response => {
|
||||
let res = response.data;
|
||||
if (res.code == "200") {
|
||||
that.uploadImgUrl = res.data.urlPath;
|
||||
that.$emit("input", that.uploadImgUrl);
|
||||
that.$emit("change", that.uploadImgUrl);
|
||||
}
|
||||
});
|
||||
},
|
||||
changeInput(e) {
|
||||
if (e) {
|
||||
this.uploadImgUrl = e;
|
||||
} else {
|
||||
this.$refs.files.value = "";
|
||||
this.uploadImgUrl = "";
|
||||
}
|
||||
this.$emit("input", this.uploadImgUrl);
|
||||
this.$emit("change", this.uploadImgUrl);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.file {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
/deep/.el-input-group__append,
|
||||
/deep/.el-input-group__prepend {
|
||||
padding: 0 10px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
.iconfont {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form label-width="100px" label-position="left">
|
||||
<el-form-item label="数据集">
|
||||
<el-select
|
||||
size="mini"
|
||||
v-model="dataSetValue"
|
||||
filterable
|
||||
placeholder="请选择"
|
||||
@change="selectDataSet"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in dataSet"
|
||||
:key="item.code"
|
||||
:label="item.setName"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-for="(item, index) in userNameList"
|
||||
:key="index"
|
||||
:label="item.paramName"
|
||||
>
|
||||
<el-input v-model.trim="item.sampleItem" size="mini" />
|
||||
</el-form-item>
|
||||
<el-form-item v-for="item in setParamList" :key="item" :label="item">
|
||||
<Dictionary
|
||||
v-model="params[item]"
|
||||
:dict-key="getDictKey()"
|
||||
@input="selectParams($event, item)"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-button
|
||||
style="width: 100%"
|
||||
type="primary"
|
||||
plain
|
||||
size="mini"
|
||||
@click="saveDataBtn"
|
||||
>刷新</el-button
|
||||
>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { queryAllDataSet, detailBysetId } from "@/api/bigscreen";
|
||||
import Dictionary from "@/components/Dictionary/index";
|
||||
|
||||
export default {
|
||||
name: "DynamicComponents",
|
||||
components: {
|
||||
Dictionary
|
||||
},
|
||||
model: {
|
||||
prop: "formData",
|
||||
event: "input"
|
||||
},
|
||||
props: {
|
||||
chartType: String,
|
||||
dictKey: String,
|
||||
formData: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataSetValue: "",
|
||||
dataSet: [], // 数据集
|
||||
userNameList: [], // 用户
|
||||
setParamList: [], // 对应的不同的图形数据参数
|
||||
params: {},
|
||||
chartProperties: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
formData: {
|
||||
handler(val) {
|
||||
this.echoDataSet(val);
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
setCode() {
|
||||
let code = "";
|
||||
this.dataSet.forEach(el => {
|
||||
if (el.id == this.dataSetValue) {
|
||||
code = el.setCode;
|
||||
}
|
||||
});
|
||||
return code;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadDataSet();
|
||||
this.echoDataSet(this.formData);
|
||||
},
|
||||
methods: {
|
||||
async loadDataSet() {
|
||||
const { code, data } = await queryAllDataSet();
|
||||
this.dataSet = data;
|
||||
if (code != "200") return;
|
||||
},
|
||||
async selectDataSet() {
|
||||
const { code, data } = await detailBysetId(this.dataSetValue);
|
||||
this.userNameList = data.dataSetParamDtoList;
|
||||
this.setParamList = data.setParamList;
|
||||
if (code != "200") return;
|
||||
},
|
||||
async saveDataBtn() {
|
||||
const contextData = {};
|
||||
for (let i = 0; i < this.userNameList.length; i++) {
|
||||
contextData[this.userNameList[i].paramName] = this.userNameList[
|
||||
i
|
||||
].sampleItem;
|
||||
}
|
||||
const params = {
|
||||
chartType: this.chartType,
|
||||
setCode: this.setCode,
|
||||
chartProperties: this.chartProperties,
|
||||
contextData
|
||||
};
|
||||
this.$emit("input", params);
|
||||
this.$emit("change", params);
|
||||
},
|
||||
selectParams(val, key) {
|
||||
this.chartProperties[key] = val;
|
||||
},
|
||||
getDictKey() {
|
||||
return this.dictKey == null ? "CHART_PROPERTIES" : this.dictKey;
|
||||
},
|
||||
// 数据集回显
|
||||
async echoDataSet(val) {
|
||||
if (!val) return;
|
||||
const setCode = val.setCode;
|
||||
|
||||
await this.loadDataSet();
|
||||
|
||||
this.dataSetValue = this.dataSet.filter(
|
||||
el => setCode == el.setCode
|
||||
)[0].id;
|
||||
|
||||
await this.selectDataSet();
|
||||
this.echoDynamicData(val);
|
||||
},
|
||||
echoDynamicData(val) {
|
||||
const chartProperties = this.deepClone(val.chartProperties);
|
||||
this.chartProperties = chartProperties;
|
||||
if (this.userNameList.length > 0) {
|
||||
}
|
||||
if (this.setParamList.length > 0) {
|
||||
for (let i = 0; i < this.setParamList.length; i++) {
|
||||
const item = this.setParamList[i];
|
||||
if (chartProperties.hasOwnProperty(item)) {
|
||||
this.params[item] = chartProperties[item];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="sass" scoped></style>
|
||||
@ -0,0 +1,442 @@
|
||||
<template>
|
||||
<div class="collapse-input-style">
|
||||
<el-form label-width="100px" label-position="left">
|
||||
<template v-for="(item, index) in options">
|
||||
<div v-if="isShowForm(item, '[object Object]')" :key="index">
|
||||
<el-form-item
|
||||
v-if="
|
||||
inputShow[item.name] &&
|
||||
item.type != 'dycustComponents' &&
|
||||
item.type != 'dynamic-add-table'
|
||||
"
|
||||
:label="item.label"
|
||||
:prop="item.name"
|
||||
:required="item.required"
|
||||
>
|
||||
<el-input-number
|
||||
v-if="item.type == 'el-input-number'"
|
||||
size="mini"
|
||||
style="width:100%"
|
||||
v-model.trim="formData[item.name]"
|
||||
controls-position="right"
|
||||
@change="changed($event, item.name)"
|
||||
/>
|
||||
|
||||
<el-input
|
||||
v-if="item.type == 'el-input-text'"
|
||||
v-model.trim="formData[item.name]"
|
||||
type="text"
|
||||
size="mini"
|
||||
placeholder="请输入内容"
|
||||
clearable
|
||||
@change="changed($event, item.name)"
|
||||
/>
|
||||
|
||||
<el-input
|
||||
v-if="item.type == 'el-input-textarea'"
|
||||
v-model.trim="formData[item.name]"
|
||||
type="textarea"
|
||||
size="mini"
|
||||
rows="2"
|
||||
placeholder="请输入内容"
|
||||
@change="changed($event, item.name)"
|
||||
/>
|
||||
|
||||
<el-switch
|
||||
v-if="item.type == 'el-switch'"
|
||||
v-model="formData[item.name]"
|
||||
size="mini"
|
||||
placeholder="请输入内容"
|
||||
@change="changed($event, item.name)"
|
||||
/>
|
||||
<ColorPicker
|
||||
v-if="item.type == 'vue-color'"
|
||||
v-model="formData[item.name]"
|
||||
@change="val => changed(val, item.name)"
|
||||
/>
|
||||
<customUpload
|
||||
v-if="item.type == 'custom-upload'"
|
||||
v-model="formData[item.name]"
|
||||
@change="changed($event, item.name)"
|
||||
/>
|
||||
|
||||
<el-radio-group
|
||||
v-if="item.type == 'el-radio-group'"
|
||||
v-model="formData[item.name]"
|
||||
@change="val => changed(val, item.name)"
|
||||
>
|
||||
<el-radio
|
||||
v-for="itemChild in item.selectOptions"
|
||||
:key="itemChild.code"
|
||||
:label="itemChild.code"
|
||||
>{{ itemChild.name }}</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
|
||||
<el-select
|
||||
v-if="item.type == 'el-select'"
|
||||
size="mini"
|
||||
v-model="formData[item.name]"
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
@change="val => changed(val, item.name)"
|
||||
>
|
||||
<el-option
|
||||
v-for="itemChild in item.selectOptions"
|
||||
:key="itemChild.code"
|
||||
:label="itemChild.name"
|
||||
:value="itemChild.code"
|
||||
/>
|
||||
</el-select>
|
||||
|
||||
<el-slider
|
||||
v-if="item.type == 'el-slider'"
|
||||
v-model="formData[item.name]"
|
||||
@change="val => changed(val, item.name)"
|
||||
/>
|
||||
|
||||
<el-button
|
||||
v-if="item.type == 'el-button'"
|
||||
type="primary"
|
||||
size="mini"
|
||||
plain
|
||||
@click="addStaticData"
|
||||
>编辑</el-button
|
||||
>
|
||||
|
||||
<!-- 弹窗 -->
|
||||
<el-dialog
|
||||
title="代码编辑"
|
||||
:visible.sync="dialogVisibleStaticData"
|
||||
width="50%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<vue-json-editor
|
||||
v-model="formData[item.name]"
|
||||
:show-btns="false"
|
||||
:mode="'code'"
|
||||
lang="zh"
|
||||
class="my-editor"
|
||||
/>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisibleStaticData = false"
|
||||
>取 消</el-button
|
||||
>
|
||||
<el-button type="primary" @click="saveData">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</el-form-item>
|
||||
<dynamicComponents
|
||||
v-if="item.type == 'dycustComponents' && inputShow[item.name]"
|
||||
v-model="formData[item.name]"
|
||||
:chart-type="item.chartType"
|
||||
:dict-key="item.dictKey"
|
||||
@change="changed($event, item.name)"
|
||||
/>
|
||||
<dynamic-add-table
|
||||
v-if="item.type == 'dynamic-add-table' && inputShow[item.name]"
|
||||
v-model="formData[item.name]"
|
||||
:chart-type="item.chartType"
|
||||
@change="changed($event, item.name)"
|
||||
/>
|
||||
</div>
|
||||
<div v-else-if="isShowForm(item, '[object Array]')" :key="'a-' + index">
|
||||
<el-collapse accordion>
|
||||
<el-collapse-item
|
||||
v-for="(itemChild, indexChild) in item"
|
||||
:key="indexChild"
|
||||
:title="itemChild.name"
|
||||
:name="indexChild"
|
||||
>
|
||||
<template v-for="(itemChildList, idx) in itemChild.list">
|
||||
<el-form-item
|
||||
:key="idx"
|
||||
:label="itemChildList.label"
|
||||
:prop="itemChildList.name"
|
||||
:required="itemChildList.required"
|
||||
>
|
||||
<el-input-number
|
||||
v-if="itemChildList.type == 'el-input-number'"
|
||||
size="mini"
|
||||
style="width:100%"
|
||||
v-model="formData[itemChildList.name]"
|
||||
controls-position="right"
|
||||
:placeholder="itemChildList.placeholder"
|
||||
@change="changed($event, itemChildList.name)"
|
||||
/>
|
||||
|
||||
<el-input
|
||||
v-if="itemChildList.type == 'el-input-text'"
|
||||
v-model.trim="formData[itemChildList.name]"
|
||||
type="text"
|
||||
size="mini"
|
||||
placeholder="请输入内容"
|
||||
clearable
|
||||
@change="changed($event, itemChildList.name)"
|
||||
/>
|
||||
|
||||
<el-input
|
||||
v-if="itemChildList.type == 'el-input-textarea'"
|
||||
v-model.trim="formData[itemChildList.name]"
|
||||
size="mini"
|
||||
type="textarea"
|
||||
rows="2"
|
||||
placeholder="请输入内容"
|
||||
@change="changed($event, itemChildList.name)"
|
||||
/>
|
||||
|
||||
<el-switch
|
||||
v-if="itemChildList.type == 'el-switch'"
|
||||
v-model="formData[itemChildList.name]"
|
||||
placeholder="请输入内容"
|
||||
size="mini"
|
||||
@change="changed($event, itemChildList.name)"
|
||||
/>
|
||||
|
||||
<ColorPicker
|
||||
v-if="itemChildList.type == 'vue-color'"
|
||||
v-model="formData[itemChildList.name]"
|
||||
@change="val => changed(val, itemChildList.name)"
|
||||
/>
|
||||
|
||||
<el-upload
|
||||
v-if="itemChildList.type == 'el-upload-picture'"
|
||||
size="mini"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
list-type="picture-card"
|
||||
/>
|
||||
|
||||
<el-radio-group
|
||||
v-if="itemChildList.type == 'el-radio-group'"
|
||||
v-model="formData[itemChildList.name]"
|
||||
@change="val => changed(val, itemChildList.name)"
|
||||
>
|
||||
<el-radio
|
||||
v-for="it in itemChildList.selectOptions"
|
||||
:key="it.code"
|
||||
:label="it.code"
|
||||
>{{ it.name }}</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
|
||||
<el-select
|
||||
v-if="itemChildList.type == 'el-select'"
|
||||
size="mini"
|
||||
v-model="formData[itemChildList.name]"
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
@change="val => changed(val, itemChildList.name)"
|
||||
>
|
||||
<el-option
|
||||
v-for="it in itemChildList.selectOptions"
|
||||
:key="it.code"
|
||||
:label="it.name"
|
||||
:value="it.code"
|
||||
/>
|
||||
</el-select>
|
||||
|
||||
<el-slider
|
||||
v-if="itemChildList.type == 'el-slider'"
|
||||
v-model="formData[itemChildList.name]"
|
||||
@change="val => changed(val, itemChildList.name)"
|
||||
/>
|
||||
</el-form-item>
|
||||
<customColorComponents
|
||||
v-if="itemChildList.type == 'customColor'"
|
||||
:key="'b-' + idx"
|
||||
v-model="formData[itemChildList.name]"
|
||||
@change="changed($event, itemChildList.name)"
|
||||
/>
|
||||
</template>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</template>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ColorPicker from "./colorPicker.vue";
|
||||
import vueJsonEditor from "vue-json-editor";
|
||||
import "codemirror/lib/codemirror.css"; // 核心样式
|
||||
import "codemirror/theme/cobalt.css"; // 引入主题后还需要在 options 中指定主题才会生效
|
||||
// language
|
||||
import "codemirror/mode/vue/vue.js";
|
||||
import "codemirror/mode/javascript/javascript.js";
|
||||
import "codemirror/mode/sql/sql.js";
|
||||
import "codemirror/mode/shell/shell.js";
|
||||
import dynamicComponents from "./dynamicComponents.vue";
|
||||
import customColorComponents from "./customColorComponents";
|
||||
import dynamicAddTable from "./dynamicAddTable.vue";
|
||||
import customUpload from "./customUpload.vue";
|
||||
export default {
|
||||
name: "DynamicForm",
|
||||
components: {
|
||||
ColorPicker,
|
||||
vueJsonEditor,
|
||||
dynamicComponents,
|
||||
customColorComponents,
|
||||
dynamicAddTable,
|
||||
customUpload
|
||||
},
|
||||
model: {
|
||||
prop: "value",
|
||||
event: "input"
|
||||
},
|
||||
props: {
|
||||
options: Array,
|
||||
value: {
|
||||
type: [Object],
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formData: {},
|
||||
inputShow: {}, // 控制表单是否显示
|
||||
dialogVisibleStaticData: false,
|
||||
validationRules: "",
|
||||
optionsJavascript: {
|
||||
mode: "text/javascript",
|
||||
tabSize: 2, // 缩进格式
|
||||
lineNumbers: true, // 显示行号
|
||||
line: true,
|
||||
styleActiveLine: true, // 高亮选中行
|
||||
|
||||
hintOptions: {
|
||||
completeSingle: true // 当匹配只有一项的时候是否自动补全
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(newValue, oldValue) {
|
||||
this.formData = newValue || {};
|
||||
},
|
||||
options(val) {
|
||||
this.setDefaultValue();
|
||||
this.isShowData();
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.isShowData();
|
||||
this.setDefaultValue();
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
onJsonChange(val) {
|
||||
console.log(val);
|
||||
},
|
||||
onJsonSave(val) {
|
||||
console.log(val);
|
||||
},
|
||||
// 无论哪个输入框改变 都需要触发事件 将值回传
|
||||
changed(val, key) {
|
||||
if (val.extend) {
|
||||
this.$set(this.formData, key, val.value);
|
||||
} else {
|
||||
this.$set(this.formData, key, val);
|
||||
}
|
||||
this.$emit("onChanged", this.formData);
|
||||
// key为当前用户操作的表单组件
|
||||
for (let i = 0; i < this.options.length; i++) {
|
||||
let item = this.options[i];
|
||||
if (item.relactiveDom == key) {
|
||||
this.inputShow[item.name] = val == item.relactiveDomValue;
|
||||
this.inputShow = Object.assign({}, this.inputShow);
|
||||
}
|
||||
}
|
||||
},
|
||||
saveData() {
|
||||
this.$emit("onChanged", this.formData);
|
||||
this.dialogVisibleStaticData = false;
|
||||
},
|
||||
// 静态数据
|
||||
addStaticData() {
|
||||
this.dialogVisibleStaticData = true;
|
||||
},
|
||||
handleClose() {
|
||||
this.dialogVisibleStaticData = false;
|
||||
},
|
||||
// 组件属性 数据是否展示动态还是静态数据
|
||||
isShowData() {
|
||||
let currentData = {};
|
||||
const data = [];
|
||||
for (let i = 0; i < this.options.length; i++) {
|
||||
// 添加默认的inputShow值
|
||||
this.inputShow[this.options[i].name] = true;
|
||||
if (this.options[i].selectValue) {
|
||||
currentData = this.options[i];
|
||||
} else {
|
||||
data.push(this.options[i]);
|
||||
}
|
||||
}
|
||||
data.forEach(el => {
|
||||
if (el.relactiveDomValue != currentData.value) {
|
||||
this.inputShow[el.name] = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 组件拖入时 赋值
|
||||
setDefaultValue() {
|
||||
if (this.options && this.options.length > 0) {
|
||||
for (let i = 0; i < this.options.length; i++) {
|
||||
const obj = this.options[i];
|
||||
if (Object.prototype.toString.call(obj) == "[object Object]") {
|
||||
this.formData[this.options[i].name] = this.deepClone(
|
||||
this.options[i].value
|
||||
);
|
||||
} else if (Object.prototype.toString.call(obj) == "[object Array]") {
|
||||
for (let j = 0; j < obj.length; j++) {
|
||||
const list = obj[j].list;
|
||||
list.forEach(el => {
|
||||
this.formData[el.name] = el.value;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
this.formData = Object.assign({}, this.formData);
|
||||
}
|
||||
},
|
||||
// 是否显示 那种格式
|
||||
isShowForm(val, type) {
|
||||
return Object.prototype.toString.call(val) == type;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/deep/ .el-form-item {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
/deep/ .el-form-item__label {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
.code-mirror {
|
||||
width: 100%;
|
||||
height: 100% !important;
|
||||
}
|
||||
.el-collapse {
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
/deep/.el-collapse-item__header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background: transparent;
|
||||
color: #bcc9d4;
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
border-color: #282e3a;
|
||||
}
|
||||
/deep/.el-collapse-item__wrap {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
/deep/.el-collapse-item__content {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,90 @@
|
||||
<!--
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: qianlishi
|
||||
* @Date: 2022-04-28 12:20:28
|
||||
* @LastEditors: qianlishi
|
||||
* @LastEditTime: 2022-04-28 12:31:14
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<component :is="type" :value="value" :ispreview="true"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import widgetHref from "../widget/texts/widgetHref.vue";
|
||||
import WidgetIframe from "../widget/texts/widgetIframe.vue";
|
||||
import widgetImage from "../widget/texts/widgetImage.vue";
|
||||
import WidgetMarquee from "../widget/texts/widgetMarquee.vue";
|
||||
import widgetSlider from "../widget/texts/widgetSlider.vue";
|
||||
import widgetTable from "../widget/texts/widgetTable.vue";
|
||||
import widgetText from "../widget/texts/widgetText.vue";
|
||||
import widgetTime from "../widget/texts/widgetTime.vue";
|
||||
import widgetVideo from "../widget/texts/widgetVideo.vue";
|
||||
import widgetBarchart from "../widget/barCharts/widgetBarchart.vue";
|
||||
import widgetGradientColorBarchart from "../widget/barCharts/widgetGradientColorBarchart.vue";
|
||||
import widgetLinechart from "../widget/lineCharts/widgetLinechart.vue";
|
||||
import widgetBarlinechart from "../widget/barlineCharts/widgetBarlinechart";
|
||||
import WidgetPiechart from "../widget/pieCharts/widgetPiechart.vue";
|
||||
import WidgetFunnel from "../widget/funnelCharts/widgetFunnel.vue";
|
||||
import WidgetGauge from "../widget/percentCharts/widgetGauge.vue";
|
||||
import WidgetPieNightingaleRoseArea from "../widget/pieCharts/widgetPieNightingaleRose";
|
||||
import widgetMap from "../widget/mapCharts/widgetMap.vue";
|
||||
import widgetPiePercentageChart from "../widget/percentCharts/widgetPiePercentageChart";
|
||||
import widgetAirBubbleMap from "../widget/mapCharts/widgetAirBubbleMap";
|
||||
import widgetBarStackChart from "../widget/barCharts/widgetBarStackChart";
|
||||
import widgetLineStackChart from "../widget/lineCharts/widgetLineStackChart";
|
||||
import widgetBarCompareChart from "../widget/barCharts/widgetBarCompareChart";
|
||||
import widgetLineCompareChart from "../widget/lineCharts/widgetLineCompareChart";
|
||||
import widgetDecoratePieChart from "../widget/decorateCharts/widgetDecoratePieChart";
|
||||
import widgetMoreBarLineChart from "../widget/barlineCharts/widgetMoreBarLineChart";
|
||||
import widgetWordCloud from "../widget/wordcloudCharts/widgetWordCloud";
|
||||
import widgetHeatmap from "../widget/heatmap/widgetHeatmap";
|
||||
|
||||
export default {
|
||||
name: "WidgetTemp",
|
||||
components: {
|
||||
widgetHref,
|
||||
WidgetIframe,
|
||||
widgetImage,
|
||||
WidgetMarquee,
|
||||
widgetSlider,
|
||||
widgetTable,
|
||||
widgetText,
|
||||
widgetTime,
|
||||
widgetVideo,
|
||||
widgetBarchart,
|
||||
widgetGradientColorBarchart,
|
||||
widgetLinechart,
|
||||
widgetBarlinechart,
|
||||
WidgetPiechart,
|
||||
WidgetFunnel,
|
||||
WidgetGauge,
|
||||
WidgetPieNightingaleRoseArea,
|
||||
widgetMap,
|
||||
widgetPiePercentageChart,
|
||||
widgetAirBubbleMap,
|
||||
widgetBarStackChart,
|
||||
widgetLineStackChart,
|
||||
widgetBarCompareChart,
|
||||
widgetLineCompareChart,
|
||||
widgetDecoratePieChart,
|
||||
widgetMoreBarLineChart,
|
||||
widgetWordCloud,
|
||||
widgetHeatmap
|
||||
},
|
||||
model: {
|
||||
prop: "value",
|
||||
event: "input"
|
||||
},
|
||||
props: {
|
||||
type: String,
|
||||
value: {
|
||||
type: [Object],
|
||||
default: () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,659 @@
|
||||
/*
|
||||
* @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-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,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue