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

# Conflicts:
#	frontend/src/views/chart/chart/util.js
#	frontend/src/views/chart/view/ChartEdit.vue
#	frontend/src/views/chart/view/ChartStyle.vue

backend/src/main/java/io/dataease/auth/aop/DeLogAnnotationHandler.java

@@ -43,6 +43,7 @@ public class DeLogAnnotationHandler {
         befores.add(SysLogConstants.OPERATE_TYPE.DELETE.getValue());
         befores.add(SysLogConstants.OPERATE_TYPE.UNSHARE.getValue());
         befores.add(SysLogConstants.OPERATE_TYPE.UNAUTHORIZE.getValue());
+        befores.add(SysLogConstants.OPERATE_TYPE.UPLOADFILE.getValue());
     }
 
     private SysLogDTO exec(JoinPoint point, DeLog deLog) throws Exception{

backend/src/main/java/io/dataease/commons/constants/SysLogConstants.java

@@ -21,7 +21,8 @@ public class SysLogConstants {
         UNAUTHORIZE(7, "OPERATE_TYPE_UNAUTHORIZE"),
         CREATELINK(8, "OPERATE_TYPE_CREATELINK"),
         DELETELINK(9, "OPERATE_TYPE_DELETELINK"),
-        MODIFYLINK(10, "OPERATE_TYPE_MODIFYLINK");
+        MODIFYLINK(10, "OPERATE_TYPE_MODIFYLINK"),
+        UPLOADFILE(11, "OPERATE_TYPE_UPLOADFILE");
         private Integer value;
         private String name;
         OPERATE_TYPE(Integer value, String name) {
@@ -52,7 +53,9 @@ public class SysLogConstants {
         /*LINK(5, "SOURCE_TYPE_LINK"),*/
         USER(6, "SOURCE_TYPE_USER"),
         DEPT(7, "SOURCE_TYPE_DEPT"),
-        ROLE(8, "SOURCE_TYPE_ROLE");
+        ROLE(8, "SOURCE_TYPE_ROLE"),
+        DRIVER(9, "SOURCE_TYPE_DRIVER"),
+        DRIVER_FILE(10, "SOURCE_TYPE_DRIVER_FILE");
         private Integer value;
         private String name;
 

backend/src/main/java/io/dataease/controller/datasource/DriverMgmController.java

@@ -0,0 +1,126 @@
+package io.dataease.controller.datasource;
+
+
+import io.dataease.auth.annotation.DeLog;
+import io.dataease.commons.constants.SysLogConstants;
+import io.dataease.dto.DriverDTO;
+import io.dataease.plugins.common.base.domain.DeDriver;
+import io.dataease.plugins.common.base.domain.DeDriverDetails;
+import io.dataease.service.datasource.DriverService;
+import io.swagger.annotations.ApiImplicitParam;
+import io.swagger.annotations.ApiImplicitParams;
+import io.swagger.annotations.ApiOperation;
+import org.apache.shiro.authz.annotation.RequiresPermissions;
+import org.springframework.web.bind.annotation.*;
+import org.springframework.web.multipart.MultipartFile;
+import springfox.documentation.annotations.ApiIgnore;
+
+import javax.annotation.Resource;
+import java.util.List;
+import java.util.stream.Collectors;
+
+@ApiIgnore
+@RequestMapping("driver")
+@RestController
+public class DriverMgmController {
+
+    @Resource
+    private DriverService driverService;
+
+    @RequiresPermissions("datasource:read")
+    @ApiOperation("驱动列表")
+    @PostMapping("/list")
+    public List<DriverDTO> listDeDriver() throws Exception{
+        return driverService.list();
+    }
+
+    @RequiresPermissions("datasource:read")
+    @ApiOperation("删除驱动")
+    @PostMapping("/delete")
+    @DeLog(
+            operatetype = SysLogConstants.OPERATE_TYPE.DELETE,
+            sourcetype = SysLogConstants.SOURCE_TYPE.DRIVER,
+            positionIndex = 0,
+            positionKey = "type",
+            value = "id"
+    )
+    public void delete(@RequestBody DeDriver deDriver) throws Exception{
+        driverService.delete(deDriver.getId());
+    }
+
+    @RequiresPermissions("datasource:read")
+    @ApiOperation("驱动列表")
+    @GetMapping("/list/{type}")
+    public List<DriverDTO> listDeDriver(@PathVariable String type) throws Exception{
+        return listDeDriver().stream().filter(driverDTO -> driverDTO.getType().equalsIgnoreCase(type)).collect(Collectors.toList());
+    }
+
+    @RequiresPermissions("datasource:read")
+    @ApiOperation("添加驱动")
+    @PostMapping("/save")
+    @DeLog(
+            operatetype = SysLogConstants.OPERATE_TYPE.CREATE,
+            sourcetype = SysLogConstants.SOURCE_TYPE.DRIVER,
+            positionIndex = 0,
+            positionKey = "type",
+            value = "id"
+    )
+    public DeDriver save(@RequestBody DeDriver deDriver) throws Exception{
+        return driverService.save(deDriver);
+    }
+
+    @RequiresPermissions("datasource:read")
+    @ApiOperation("更新驱动")
+    @PostMapping("/update")
+    @DeLog(
+            operatetype = SysLogConstants.OPERATE_TYPE.MODIFY,
+            sourcetype = SysLogConstants.SOURCE_TYPE.DRIVER,
+            positionIndex = 0,positionKey = "type",
+            value = "id"
+    )
+    public DeDriver update(@RequestBody DeDriver deDriver) throws Exception{
+        return driverService.update(deDriver);
+    }
+
+    @RequiresPermissions("datasource:read")
+    @ApiOperation("驱动文件列表")
+    @GetMapping("/listDriverDetails/{id}")
+    public List<DeDriverDetails> listDriverDetails(@PathVariable String id) throws Exception{
+        return driverService.listDriverDetails(id);
+    }
+
+    @RequiresPermissions("datasource:read")
+    @ApiOperation("删除驱动文件")
+    @PostMapping("/deleteDriverFile")
+    @DeLog(
+            operatetype = SysLogConstants.OPERATE_TYPE.DELETE,
+            sourcetype = SysLogConstants.SOURCE_TYPE.DRIVER_FILE,
+            positionIndex = 0,
+            positionKey = "deDriverId",
+            value = "id"
+    )
+    public void deleteDriverFile(@RequestBody DeDriverDetails deDriverDetails) throws Exception{
+        driverService.deleteDriverFile(deDriverDetails.getId());
+    }
+
+    @RequiresPermissions("datasource:read")
+    @ApiOperation("驱动文件上传")
+    @PostMapping("file/upload")
+    @DeLog(
+            operatetype = SysLogConstants.OPERATE_TYPE.UPLOADFILE,
+            sourcetype = SysLogConstants.SOURCE_TYPE.DRIVER_FILE,
+            positionIndex = 0,
+            positionKey = "deDriverId",
+            value = "id"
+    )
+    @ApiImplicitParams({
+            @ApiImplicitParam(name = "file", value = "文件", required = true, dataType = "MultipartFile"),
+            @ApiImplicitParam(name = "id", value = "驱动D", required = true, dataType = "String")
+    })
+    public DeDriverDetails excelUpload(@RequestParam("id") String id, @RequestParam("file") MultipartFile file) throws Exception {
+        return driverService.saveJar(file, id);
+    }
+
+
+
+}

backend/src/main/java/io/dataease/dto/DriverDTO.java

@@ -0,0 +1,9 @@
+package io.dataease.dto;
+
+import io.dataease.plugins.common.base.domain.DeDriver;
+import lombok.Data;
+
+@Data
+public class DriverDTO extends DeDriver {
+    private String typeDesc;
+}

backend/src/main/java/io/dataease/ext/ExtSysLogMapper.xml

@@ -112,6 +112,28 @@
             </where>
         </if>
 
+        <if test="type == 9">
+            id, name
+            from de_driver
+            <where>
+                id in
+                <foreach collection="ids" item="id" index="index" open="(" separator="," close=")">
+                    #{id}
+                </foreach>
+            </where>
+        </if>
+
+        <if test="type == 10">
+            id, name
+            from de_driver
+            <where>
+                id in
+                <foreach collection="ids" item="id" index="index" open="(" separator="," close=")">
+                    #{id}
+                </foreach>
+            </where>
+        </if>
+
     </select>
 
 

backend/src/main/java/io/dataease/provider/ProviderFactory.java

@@ -1,6 +1,5 @@
 package io.dataease.provider;
 
-import com.google.gson.Gson;
 import io.dataease.plugins.common.constants.DatasourceTypes;
 import io.dataease.plugins.common.dto.datasource.DataSourceType;
 import io.dataease.plugins.config.SpringContextUtil;
@@ -25,7 +24,7 @@ public class ProviderFactory implements ApplicationContextAware {
         for(final DatasourceTypes d: DatasourceTypes.values()) {
             final ConfigurableListableBeanFactory beanFactory = ((ConfigurableApplicationContext) context).getBeanFactory();
             if(d.isDatasource()){
-                DataSourceType dataSourceType = new DataSourceType(d.getType(), d.getName(), false, d.getExtraParams(), d.getCalculationMode());
+                DataSourceType dataSourceType = new DataSourceType(d.getType(), d.getName(), false, d.getExtraParams(), d.getCalculationMode(), d.isJdbc());
                 if(dataSourceType.getType().equalsIgnoreCase("oracle")){
                     dataSourceType.setCharset(d.getCharset());
                 }

backend/src/main/java/io/dataease/provider/datasource/JdbcProvider.java

@@ -6,16 +6,20 @@ import com.google.gson.Gson;
 import io.dataease.dto.datasource.*;
 import io.dataease.exception.DataEaseException;
 import io.dataease.i18n.Translator;
+import io.dataease.plugins.common.base.domain.DeDriver;
+import io.dataease.plugins.common.base.mapper.DeDriverMapper;
 import io.dataease.plugins.common.constants.DatasourceTypes;
 import io.dataease.plugins.common.dto.datasource.TableField;
 import io.dataease.plugins.common.request.datasource.DatasourceRequest;
 import io.dataease.plugins.datasource.entity.JdbcConfiguration;
 import io.dataease.plugins.datasource.provider.DefaultJdbcProvider;
+import io.dataease.plugins.datasource.provider.ExtendedJdbcClassLoader;
 import io.dataease.plugins.datasource.query.QueryProvider;
 import io.dataease.provider.ProviderFactory;
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.stereotype.Service;
 
+import javax.annotation.Resource;
 import java.beans.PropertyVetoException;
 import java.lang.reflect.Method;
 import java.sql.*;
@@ -25,6 +29,8 @@ import java.util.*;
 public class JdbcProvider extends DefaultJdbcProvider {
 
 
+    @Resource
+    private DeDriverMapper deDriverMapper;
     @Override
     public boolean isUseDatasourcePool(){
         return true;
@@ -294,10 +300,12 @@ public class JdbcProvider extends DefaultJdbcProvider {
     public Connection getConnection(DatasourceRequest datasourceRequest) throws Exception {
         String username = null;
         String password = null;
-        String driver = null;
+        String defaultDriver = null;
         String jdbcurl = null;
+        String customDriver = null;
         DatasourceTypes datasourceType = DatasourceTypes.valueOf(datasourceRequest.getDatasource().getType());
         Properties props = new Properties();
+        DeDriver deDriver = null;
         switch (datasourceType) {
             case mysql:
             case mariadb:
@@ -309,21 +317,24 @@ public class JdbcProvider extends DefaultJdbcProvider {
                 MysqlConfiguration mysqlConfiguration = new Gson().fromJson(datasourceRequest.getDatasource().getConfiguration(), MysqlConfiguration.class);
                 username = mysqlConfiguration.getUsername();
                 password = mysqlConfiguration.getPassword();
-                driver = "com.mysql.jdbc.Driver";
+                defaultDriver = "com.mysql.jdbc.Driver";
                 jdbcurl = mysqlConfiguration.getJdbc();
+                customDriver = mysqlConfiguration.getCustomDriver();
                 break;
             case sqlServer:
                 SqlServerConfiguration sqlServerConfiguration = new Gson().fromJson(datasourceRequest.getDatasource().getConfiguration(), SqlServerConfiguration.class);
                 username = sqlServerConfiguration.getUsername();
                 password = sqlServerConfiguration.getPassword();
-                driver = sqlServerConfiguration.getDriver();
+                defaultDriver = sqlServerConfiguration.getDriver();
+                customDriver = sqlServerConfiguration.getCustomDriver();
                 jdbcurl = sqlServerConfiguration.getJdbc();
                 break;
             case oracle:
                 OracleConfiguration oracleConfiguration = new Gson().fromJson(datasourceRequest.getDatasource().getConfiguration(), OracleConfiguration.class);
                 username = oracleConfiguration.getUsername();
                 password = oracleConfiguration.getPassword();
-                driver = oracleConfiguration.getDriver();
+                defaultDriver = oracleConfiguration.getDriver();
+                customDriver = oracleConfiguration.getCustomDriver();
                 jdbcurl = oracleConfiguration.getJdbc();
                 props.put("oracle.net.CONNECT_TIMEOUT", "5000");
                 break;
@@ -331,56 +342,84 @@ public class JdbcProvider extends DefaultJdbcProvider {
                 PgConfiguration pgConfiguration = new Gson().fromJson(datasourceRequest.getDatasource().getConfiguration(), PgConfiguration.class);
                 username = pgConfiguration.getUsername();
                 password = pgConfiguration.getPassword();
-                driver = pgConfiguration.getDriver();
+                defaultDriver = pgConfiguration.getDriver();
+                customDriver = pgConfiguration.getCustomDriver();
                 jdbcurl = pgConfiguration.getJdbc();
                 break;
             case ck:
                 CHConfiguration chConfiguration = new Gson().fromJson(datasourceRequest.getDatasource().getConfiguration(), CHConfiguration.class);
                 username = chConfiguration.getUsername();
                 password = chConfiguration.getPassword();
-                driver = chConfiguration.getDriver();
+                defaultDriver = chConfiguration.getDriver();
+                customDriver = chConfiguration.getCustomDriver();
                 jdbcurl = chConfiguration.getJdbc();
                 break;
             case mongo:
                 MongodbConfiguration mongodbConfiguration = new Gson().fromJson(datasourceRequest.getDatasource().getConfiguration(), MongodbConfiguration.class);
                 username = mongodbConfiguration.getUsername();
                 password = mongodbConfiguration.getPassword();
-                driver = mongodbConfiguration.getDriver();
+                defaultDriver = mongodbConfiguration.getDriver();
+                customDriver = mongodbConfiguration.getCustomDriver();
                 jdbcurl = mongodbConfiguration.getJdbc(datasourceRequest.getDatasource().getId());
                 break;
             case redshift:
                 RedshiftConfigration redshiftConfigration = new Gson().fromJson(datasourceRequest.getDatasource().getConfiguration(), RedshiftConfigration.class);
                 username = redshiftConfigration.getUsername();
                 password = redshiftConfigration.getPassword();
-                driver = redshiftConfigration.getDriver();
+                defaultDriver = redshiftConfigration.getDriver();
+                customDriver = redshiftConfigration.getCustomDriver();
                 jdbcurl = redshiftConfigration.getJdbc();
                 break;
             case hive:
                 HiveConfiguration hiveConfiguration = new Gson().fromJson(datasourceRequest.getDatasource().getConfiguration(), HiveConfiguration.class);
-                username = hiveConfiguration.getUsername();
+                defaultDriver = hiveConfiguration.getDriver();
-                password = hiveConfiguration.getPassword();
+                customDriver = hiveConfiguration.getCustomDriver();
-                driver = hiveConfiguration.getDriver();
                 jdbcurl = hiveConfiguration.getJdbc();
+
+                if(StringUtils.isNotEmpty(hiveConfiguration.getAuthMethod()) && hiveConfiguration.getAuthMethod().equalsIgnoreCase("kerberos")){
+                    System.setProperty("java.security.krb5.conf", "/opt/dataease/conf/krb5.conf");
+                    ExtendedJdbcClassLoader classLoader;
+                    if(isDefaultClassLoader(customDriver)){
+                        classLoader = extendedJdbcClassLoader;
+                    }else {
+                        deDriver = deDriverMapper.selectByPrimaryKey(customDriver);
+                        classLoader = getCustomJdbcClassLoader(deDriver);
+                    }
+                    Class<?> ConfigurationClass =  classLoader.loadClass("org.apache.hadoop.conf.Configuration");
+                    Method set =  ConfigurationClass.getMethod("set",String.class, String.class) ;
+                    Object obj = ConfigurationClass.newInstance();
+                    set.invoke(obj, "hadoop.security.authentication", "Kerberos");
+
+                    Class<?> UserGroupInformationClass =  classLoader.loadClass("org.apache.hadoop.security.UserGroupInformation");
+                    Method setConfiguration =  UserGroupInformationClass.getMethod("setConfiguration",ConfigurationClass) ;
+                    Method loginUserFromKeytab =  UserGroupInformationClass.getMethod("loginUserFromKeytab",String.class, String.class) ;
+                    setConfiguration.invoke(null, obj);
+                    loginUserFromKeytab.invoke(null, hiveConfiguration.getUsername(), "/opt/dataease/conf/" + hiveConfiguration.getPassword());
+                }else {
+                    username = hiveConfiguration.getUsername();
+                    password = hiveConfiguration.getPassword();
+                }
                 break;
             case impala:
                 ImpalaConfiguration impalaConfiguration = new Gson().fromJson(datasourceRequest.getDatasource().getConfiguration(), ImpalaConfiguration.class);
                 username = impalaConfiguration.getUsername();
                 password = impalaConfiguration.getPassword();
-                driver = impalaConfiguration.getDriver();
+                defaultDriver = impalaConfiguration.getDriver();
+                customDriver = impalaConfiguration.getCustomDriver();
                 jdbcurl = impalaConfiguration.getJdbc();
                 break;
             case db2:
                 Db2Configuration db2Configuration = new Gson().fromJson(datasourceRequest.getDatasource().getConfiguration(), Db2Configuration.class);
                 username = db2Configuration.getUsername();
                 password = db2Configuration.getPassword();
-                driver = db2Configuration.getDriver();
+                defaultDriver = db2Configuration.getDriver();
+                customDriver = db2Configuration.getCustomDriver();
                 jdbcurl = db2Configuration.getJdbc();
                 break;
             default:
                 break;
         }
 
-        Driver driverClass = (Driver) extendedJdbcClassLoader.loadClass(driver).newInstance();
         if (StringUtils.isNotBlank(username)) {
             props.setProperty("user", username);
             if (StringUtils.isNotBlank(password)) {
@@ -388,12 +427,34 @@ public class JdbcProvider extends DefaultJdbcProvider {
             }
         }
 
-        Connection conn = driverClass.connect(jdbcurl, props);
+        Connection conn;
+        String driverClassName ;
+        ExtendedJdbcClassLoader jdbcClassLoader;
+        if(isDefaultClassLoader(customDriver)){
+            driverClassName = defaultDriver;
+            jdbcClassLoader = extendedJdbcClassLoader;
+        }else {
+            driverClassName = deDriver.getDriverClass();
+            jdbcClassLoader = getCustomJdbcClassLoader(deDriver);
+        }
+
+        Driver driverClass = (Driver) jdbcClassLoader.loadClass(driverClassName).newInstance();
+        ClassLoader classLoader = Thread.currentThread().getContextClassLoader();
+        try {
+            Thread.currentThread().setContextClassLoader(jdbcClassLoader);
+            conn= driverClass.connect(jdbcurl, props);
+        }catch (Exception e){
+            e.printStackTrace();
+            throw e;
+        }finally {
+            Thread.currentThread().setContextClassLoader(classLoader);
+        }
         return conn;
     }
 
+
     @Override
-    public JdbcConfiguration setCredential(DatasourceRequest datasourceRequest, DruidDataSource dataSource) throws PropertyVetoException {
+    public JdbcConfiguration setCredential(DatasourceRequest datasourceRequest, DruidDataSource dataSource) throws Exception{
         DatasourceTypes datasourceType = DatasourceTypes.valueOf(datasourceRequest.getDatasource().getType());
         JdbcConfiguration jdbcConfiguration = new JdbcConfiguration();
         switch (datasourceType) {
@@ -474,7 +535,15 @@ public class JdbcProvider extends DefaultJdbcProvider {
         }
 
         dataSource.setUsername(jdbcConfiguration.getUsername());
-        dataSource.setDriverClassLoader(extendedJdbcClassLoader);
+
+        ExtendedJdbcClassLoader classLoader;
+        if(isDefaultClassLoader(jdbcConfiguration.getCustomDriver())){
+            classLoader = extendedJdbcClassLoader;
+        }else {
+            DeDriver deDriver = deDriverMapper.selectByPrimaryKey(jdbcConfiguration.getCustomDriver());
+            classLoader = getCustomJdbcClassLoader(deDriver);
+        }
+        dataSource.setDriverClassLoader(classLoader);
         dataSource.setPassword(jdbcConfiguration.getPassword());
 
         return jdbcConfiguration;

backend/src/main/java/io/dataease/service/chart/ChartViewService.java

@@ -54,6 +54,7 @@ import org.springframework.transaction.annotation.Propagation;
 import org.springframework.transaction.annotation.Transactional;
 
 import javax.annotation.Resource;
+import java.lang.reflect.Type;
 import java.math.BigDecimal;
 import java.math.RoundingMode;
 import java.text.SimpleDateFormat;
@@ -128,6 +129,9 @@ public class ChartViewService {
     }
 
     public ChartViewWithBLOBs newOne(ChartViewWithBLOBs chartView) {
+        if (StringUtils.isBlank(chartView.getViewFields())) {
+            chartView.setViewFields("[]");
+        }
         long timestamp = System.currentTimeMillis();
         chartView.setUpdateTime(timestamp);
         chartView.setId(UUID.randomUUID().toString());
@@ -300,23 +304,23 @@ public class ChartViewService {
         if (ObjectUtils.isEmpty(view)) {
             throw new RuntimeException(Translator.get("i18n_chart_delete"));
         }
-        List<ChartViewFieldDTO> xAxis = new Gson().fromJson(view.getXAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
+        List<ChartViewFieldDTO> xAxis = gson.fromJson(view.getXAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
         }.getType());
         if (StringUtils.equalsIgnoreCase(view.getType(), "table-pivot")) {
-            List<ChartViewFieldDTO> xAxisExt = new Gson().fromJson(view.getXAxisExt(), new TypeToken<List<ChartViewFieldDTO>>() {
+            List<ChartViewFieldDTO> xAxisExt = gson.fromJson(view.getXAxisExt(), new TypeToken<List<ChartViewFieldDTO>>() {
             }.getType());
             xAxis.addAll(xAxisExt);
         }
-        List<ChartViewFieldDTO> yAxis = new Gson().fromJson(view.getYAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
+        List<ChartViewFieldDTO> yAxis = gson.fromJson(view.getYAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
         }.getType());
         if (StringUtils.equalsIgnoreCase(view.getType(), "chart-mix")) {
-            List<ChartViewFieldDTO> yAxisExt = new Gson().fromJson(view.getYAxisExt(), new TypeToken<List<ChartViewFieldDTO>>() {
+            List<ChartViewFieldDTO> yAxisExt = gson.fromJson(view.getYAxisExt(), new TypeToken<List<ChartViewFieldDTO>>() {
             }.getType());
             yAxis.addAll(yAxisExt);
         }
-        List<ChartViewFieldDTO> extStack = new Gson().fromJson(view.getExtStack(), new TypeToken<List<ChartViewFieldDTO>>() {
+        List<ChartViewFieldDTO> extStack = gson.fromJson(view.getExtStack(), new TypeToken<List<ChartViewFieldDTO>>() {
         }.getType());
-        List<ChartViewFieldDTO> extBubble = new Gson().fromJson(view.getExtBubble(), new TypeToken<List<ChartViewFieldDTO>>() {
+        List<ChartViewFieldDTO> extBubble = gson.fromJson(view.getExtBubble(), new TypeToken<List<ChartViewFieldDTO>>() {
         }.getType());
         List<ChartFieldCustomFilterDTO> fieldCustomFilter = new ArrayList<ChartFieldCustomFilterDTO>();
         List<ChartViewFieldDTO> drill = new ArrayList<ChartViewFieldDTO>();
@@ -401,7 +405,7 @@ public class ChartViewService {
         // 如果是插件视图 走插件内部的逻辑
         if (ObjectUtils.isNotEmpty(view.getIsPlugin()) && view.getIsPlugin()) {
             Map<String, List<ChartViewFieldDTO>> fieldMap = new HashMap<>();
-            List<ChartViewFieldDTO> xAxisExt = new Gson().fromJson(view.getXAxisExt(), new TypeToken<List<ChartViewFieldDTO>>() {
+            List<ChartViewFieldDTO> xAxisExt = gson.fromJson(view.getXAxisExt(), new TypeToken<List<ChartViewFieldDTO>>() {
             }.getType());
             fieldMap.put("xAxisExt", xAxisExt);
             fieldMap.put("xAxis", xAxis);
@@ -434,7 +438,7 @@ public class ChartViewService {
             }
             // DatasourceProvider datasourceProvider = ProviderFactory.getProvider(ds.getType());
             datasourceRequest.setDatasource(ds);
-            DataTableInfoDTO dataTableInfoDTO = new Gson().fromJson(table.getInfo(), DataTableInfoDTO.class);
+            DataTableInfoDTO dataTableInfoDTO = gson.fromJson(table.getInfo(), DataTableInfoDTO.class);
             QueryProvider qp = ProviderFactory.getQueryProvider(ds.getType());
             if (StringUtils.equalsIgnoreCase(table.getType(), "db")) {
                 datasourceRequest.setTable(dataTableInfoDTO.getTable());
@@ -462,7 +466,7 @@ public class ChartViewService {
                     datasourceRequest.setQuery(qp.getSQLAsTmp(dataTableInfoDTO.getSql(), xAxis, yAxis, fieldCustomFilter, extFilterList, view));
                 }
             } else if (StringUtils.equalsIgnoreCase(table.getType(), "custom")) {
-                DataTableInfoDTO dt = new Gson().fromJson(table.getInfo(), DataTableInfoDTO.class);
+                DataTableInfoDTO dt = gson.fromJson(table.getInfo(), DataTableInfoDTO.class);
                 List<DataSetTableUnionDTO> list = dataSetTableUnionService.listByTableId(dt.getList().get(0).getTableId());
                 String sql = dataSetTableService.getCustomSQLDatasource(dt, list, ds);
                 if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType()) || StringUtils.equalsIgnoreCase("liquid", view.getType())) {
@@ -477,7 +481,7 @@ public class ChartViewService {
                     datasourceRequest.setQuery(qp.getSQLAsTmp(sql, xAxis, yAxis, fieldCustomFilter, extFilterList, view));
                 }
             } else if (StringUtils.equalsIgnoreCase(table.getType(), "union")) {
-                DataTableInfoDTO dt = new Gson().fromJson(table.getInfo(), DataTableInfoDTO.class);
+                DataTableInfoDTO dt = gson.fromJson(table.getInfo(), DataTableInfoDTO.class);
                 Map<String, Object> sqlMap = dataSetTableService.getUnionSQLDatasource(dt, ds);
                 String sql = (String) sqlMap.get("sql");
 
@@ -538,28 +542,30 @@ public class ChartViewService {
         if (ObjectUtils.isEmpty(view)) {
             throw new RuntimeException(Translator.get("i18n_chart_delete"));
         }
-        List<ChartViewFieldDTO> xAxis = new Gson().fromJson(view.getXAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
+        Type tokenType = new TypeToken<List<ChartViewFieldDTO>>() {}.getType();
-        }.getType());
+        Type filterTokenType = new TypeToken<List<ChartFieldCustomFilterDTO>>() {}.getType();
+
+        List<ChartViewFieldDTO> viewFields = gson.fromJson(view.getViewFields(), tokenType);
+        Map<String, List<ChartViewFieldDTO>> extFieldsMap = null;
+        if (CollectionUtils.isNotEmpty(viewFields)) {
+            extFieldsMap = viewFields.stream().collect(Collectors.groupingBy(ChartViewFieldDTO::getBusiType));
+        }
+
+
+        List<ChartViewFieldDTO> xAxis = gson.fromJson(view.getXAxis(), tokenType);
         if (StringUtils.equalsIgnoreCase(view.getType(), "table-pivot")) {
-            List<ChartViewFieldDTO> xAxisExt = new Gson().fromJson(view.getXAxisExt(), new TypeToken<List<ChartViewFieldDTO>>() {
+            List<ChartViewFieldDTO> xAxisExt = gson.fromJson(view.getXAxisExt(), tokenType);
-            }.getType());
             xAxis.addAll(xAxisExt);
         }
-        List<ChartViewFieldDTO> yAxis = new Gson().fromJson(view.getYAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
+        List<ChartViewFieldDTO> yAxis = gson.fromJson(view.getYAxis(), tokenType);
-        }.getType());
         if (StringUtils.equalsIgnoreCase(view.getType(), "chart-mix")) {
-            List<ChartViewFieldDTO> yAxisExt = new Gson().fromJson(view.getYAxisExt(), new TypeToken<List<ChartViewFieldDTO>>() {
+            List<ChartViewFieldDTO> yAxisExt = gson.fromJson(view.getYAxisExt(), tokenType);
-            }.getType());
             yAxis.addAll(yAxisExt);
         }
-        List<ChartViewFieldDTO> extStack = new Gson().fromJson(view.getExtStack(), new TypeToken<List<ChartViewFieldDTO>>() {
+        List<ChartViewFieldDTO> extStack = gson.fromJson(view.getExtStack(), tokenType);
-        }.getType());
+        List<ChartViewFieldDTO> extBubble = gson.fromJson(view.getExtBubble(), tokenType);
-        List<ChartViewFieldDTO> extBubble = new Gson().fromJson(view.getExtBubble(), new TypeToken<List<ChartViewFieldDTO>>() {
+        List<ChartFieldCustomFilterDTO> fieldCustomFilter = gson.fromJson(view.getCustomFilter(), filterTokenType);
-        }.getType());
+        List<ChartViewFieldDTO> drill = gson.fromJson(view.getDrillFields(), tokenType);
-        List<ChartFieldCustomFilterDTO> fieldCustomFilter = new Gson().fromJson(view.getCustomFilter(), new TypeToken<List<ChartFieldCustomFilterDTO>>() {
-        }.getType());
-        List<ChartViewFieldDTO> drill = new Gson().fromJson(view.getDrillFields(), new TypeToken<List<ChartViewFieldDTO>>() {
-        }.getType());
 
 
         DatasetTableField datasetTableFieldObj = DatasetTableField.builder().tableId(view.getTableId()).checked(Boolean.TRUE).build();
@@ -741,14 +747,12 @@ public class ChartViewService {
 
         // 如果是插件视图 走插件内部的逻辑
         if (ObjectUtils.isNotEmpty(view.getIsPlugin()) && view.getIsPlugin()) {
-            Map<String, List<ChartViewFieldDTO>> fieldMap = new HashMap<>();
+            Map<String, List<ChartViewFieldDTO>> fieldMap = ObjectUtils.isEmpty(extFieldsMap) ? new HashMap<>() : extFieldsMap;
-            List<ChartViewFieldDTO> xAxisExt = new Gson().fromJson(view.getXAxisExt(), new TypeToken<List<ChartViewFieldDTO>>() {
+
-            }.getType());
-            fieldMap.put("xAxisExt", xAxisExt);
-            fieldMap.put("xAxis", xAxis);
             fieldMap.put("yAxis", yAxis);
             fieldMap.put("extStack", extStack);
             fieldMap.put("extBubble", extBubble);
+            fieldMap.put("xAxis", xAxis);
             PluginViewParam pluginViewParam = buildPluginParam(fieldMap, fieldCustomFilter, extFilterList, ds, table, view);
             String sql = pluginViewSql(pluginViewParam, view);
             if (StringUtils.isBlank(sql)) {
@@ -775,7 +779,7 @@ public class ChartViewService {
             }
             // DatasourceProvider datasourceProvider = ProviderFactory.getProvider(ds.getType());
             datasourceRequest.setDatasource(ds);
-            DataTableInfoDTO dataTableInfoDTO = new Gson().fromJson(table.getInfo(), DataTableInfoDTO.class);
+            DataTableInfoDTO dataTableInfoDTO = gson.fromJson(table.getInfo(), DataTableInfoDTO.class);
             QueryProvider qp = ProviderFactory.getQueryProvider(ds.getType());
             if (StringUtils.equalsIgnoreCase(table.getType(), "db")) {
                 datasourceRequest.setTable(dataTableInfoDTO.getTable());
@@ -803,7 +807,7 @@ public class ChartViewService {
                     datasourceRequest.setQuery(qp.getSQLAsTmp(dataTableInfoDTO.getSql(), xAxis, yAxis, fieldCustomFilter, extFilterList, view));
                 }
             } else if (StringUtils.equalsIgnoreCase(table.getType(), "custom")) {
-                DataTableInfoDTO dt = new Gson().fromJson(table.getInfo(), DataTableInfoDTO.class);
+                DataTableInfoDTO dt = gson.fromJson(table.getInfo(), DataTableInfoDTO.class);
                 List<DataSetTableUnionDTO> list = dataSetTableUnionService.listByTableId(dt.getList().get(0).getTableId());
                 String sql = dataSetTableService.getCustomSQLDatasource(dt, list, ds);
                 if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType()) || StringUtils.equalsIgnoreCase("liquid", view.getType())) {
@@ -818,7 +822,7 @@ public class ChartViewService {
                     datasourceRequest.setQuery(qp.getSQLAsTmp(sql, xAxis, yAxis, fieldCustomFilter, extFilterList, view));
                 }
             } else if (StringUtils.equalsIgnoreCase(table.getType(), "union")) {
-                DataTableInfoDTO dt = new Gson().fromJson(table.getInfo(), DataTableInfoDTO.class);
+                DataTableInfoDTO dt = gson.fromJson(table.getInfo(), DataTableInfoDTO.class);
                 Map<String, Object> sqlMap = dataSetTableService.getUnionSQLDatasource(dt, ds);
                 String sql = (String) sqlMap.get("sql");
 
@@ -1376,7 +1380,7 @@ public class ChartViewService {
     public List<String> getFieldData(String id, ChartExtRequest requestList, boolean cache, String fieldId) throws Exception {
         ChartViewDTO view = getOne(id, requestList.getQueryFrom());
         List<String[]> sqlData = sqlData(view, requestList, cache, fieldId);
-        List<ChartViewFieldDTO> xAxis = new Gson().fromJson(view.getXAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
+        List<ChartViewFieldDTO> xAxis = gson.fromJson(view.getXAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
         }.getType());
         DatasetTableField field = dataSetTableFieldsService.get(fieldId);
 

backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java

@@ -2270,7 +2270,7 @@ public class DataSetTableService {
         record.setSyncStatus(JobStatus.Error.name());
         example.clear();
         example.createCriteria().andSyncStatusEqualTo(JobStatus.Underway.name())
-                .andIdIn(datasetTableTasks.stream().map(DatasetTableTask::getTableId).collect(Collectors.toList()));
+                .andIdIn(jobStoppeddDatasetTables.stream().map(DatasetTable::getId).collect(Collectors.toList()));
         datasetTableMapper.updateByExampleSelective(record, example);
 
         //TaskLog

backend/src/main/java/io/dataease/service/datasource/DatasourceService.java

@@ -27,11 +27,13 @@ import io.dataease.i18n.Translator;
 import io.dataease.plugins.common.base.domain.*;
 import io.dataease.plugins.common.base.mapper.DatasetTableMapper;
 import io.dataease.plugins.common.base.mapper.DatasourceMapper;
+import io.dataease.plugins.common.constants.DatasourceCalculationMode;
 import io.dataease.plugins.common.constants.DatasourceTypes;
 import io.dataease.plugins.common.dto.datasource.DataSourceType;
 import io.dataease.plugins.common.dto.datasource.TableDesc;
 import io.dataease.plugins.common.request.datasource.DatasourceRequest;
 import io.dataease.plugins.config.SpringContextUtil;
+import io.dataease.plugins.datasource.entity.JdbcConfiguration;
 import io.dataease.plugins.datasource.provider.Provider;
 import io.dataease.provider.ProviderFactory;
 import io.dataease.provider.datasource.ApiProvider;
@@ -41,10 +43,8 @@ import io.dataease.service.sys.SysAuthService;
 import org.apache.commons.collections4.CollectionUtils;
 import org.apache.commons.lang3.ObjectUtils;
 import org.apache.commons.lang3.StringUtils;
-import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.core.env.Environment;
 import org.springframework.data.redis.core.RedisTemplate;
-import org.springframework.data.redis.core.StringRedisTemplate;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 
@@ -131,6 +131,13 @@ public class DatasourceService {
                     datasourceDTO.setCalculationMode(dataSourceType.getCalculationMode());
                 }
             });
+            if(!datasourceDTO.getType().equalsIgnoreCase(DatasourceTypes.api.toString())){
+                JdbcConfiguration configuration = new Gson().fromJson(datasourceDTO.getConfiguration(), JdbcConfiguration.class);
+                if(StringUtils.isNotEmpty(configuration.getCustomDriver()) && !configuration.getCustomDriver().equalsIgnoreCase("default")){
+                    datasourceDTO.setCalculationMode(DatasourceCalculationMode.DIRECT);
+                }
+            }
+
             if(datasourceDTO.getType().equalsIgnoreCase(DatasourceTypes.mysql.toString())){
                 datasourceDTO.setConfiguration(JSONObject.toJSONString(new Gson().fromJson(datasourceDTO.getConfiguration(), MysqlConfiguration.class)) );
             }

backend/src/main/java/io/dataease/service/datasource/DriverService.java

@@ -0,0 +1,176 @@
+package io.dataease.service.datasource;
+
+import io.dataease.commons.utils.BeanUtils;
+import io.dataease.commons.utils.DeFileUtils;
+import io.dataease.dto.DriverDTO;
+import io.dataease.plugins.common.base.domain.DeDriver;
+import io.dataease.plugins.common.base.domain.DeDriverDetails;
+import io.dataease.plugins.common.base.domain.DeDriverDetailsExample;
+import io.dataease.plugins.common.base.mapper.DeDriverDetailsMapper;
+import io.dataease.plugins.common.base.mapper.DeDriverMapper;
+import io.dataease.plugins.datasource.provider.ExtendedJdbcClassLoader;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+import org.springframework.web.multipart.MultipartFile;
+
+import javax.annotation.Resource;
+import java.io.File;
+import java.io.FileOutputStream;
+import java.io.IOException;
+import java.lang.reflect.Modifier;
+import java.net.URL;
+import java.util.ArrayList;
+import java.util.Enumeration;
+import java.util.List;
+import java.util.UUID;
+import java.util.jar.JarEntry;
+import java.util.jar.JarFile;
+
+@Transactional(rollbackFor = Exception.class)
+@Service
+public class DriverService {
+
+    private static String DRIVER_PATH = "/opt/dataease/drivers/custom/";
+    @Resource
+    private DeDriverMapper deDriverMapper;
+    @Resource
+    private DeDriverDetailsMapper deDriverDetailsMapper;
+    @Resource
+    private DatasourceService datasourceService;
+
+
+    public List<DriverDTO> list() throws Exception {
+        List<DriverDTO> driverDTOS = new ArrayList<>();
+        deDriverMapper.selectByExample(null).forEach(deDriver -> {
+            DriverDTO driverDTO = new DriverDTO();
+            BeanUtils.copyBean(driverDTO, deDriver);
+            datasourceService.types().forEach(dataSourceType -> {
+                if (dataSourceType.getType().equalsIgnoreCase(deDriver.getType())) {
+                    driverDTO.setTypeDesc(dataSourceType.getName());
+                }
+
+            });
+            driverDTOS.add(driverDTO);
+        });
+        return driverDTOS;
+    }
+
+    public void delete(String driverId) {
+        deDriverMapper.deleteByPrimaryKey(driverId);
+
+        DeDriverDetailsExample example = new DeDriverDetailsExample();
+        example.createCriteria().andDeDriverIdEqualTo(driverId);
+        deDriverDetailsMapper.deleteByExample(example);
+        DeFileUtils.deleteFile(DRIVER_PATH + driverId + "/");
+    }
+
+    public DeDriver save(DeDriver deDriver) {
+        deDriver.setCreateTime(System.currentTimeMillis());
+        deDriver.setId(UUID.randomUUID().toString());
+        deDriverMapper.insert(deDriver);
+        return deDriver;
+    }
+
+    public DeDriver update(DeDriver deDriver) {
+        deDriverMapper.updateByPrimaryKey(deDriver);
+        return deDriver;
+    }
+
+
+    public List<DeDriverDetails> listDriverDetails(String driverId) {
+        DeDriverDetailsExample example = new DeDriverDetailsExample();
+        example.createCriteria().andDeDriverIdEqualTo(driverId);
+        return deDriverDetailsMapper.selectByExampleWithBLOBs(example);
+    }
+
+    public void deleteDriverFile(String driverFileId) {
+        DeDriverDetails deDriverDetails = deDriverDetailsMapper.selectByPrimaryKey(driverFileId);
+        DeFileUtils.deleteFile(DRIVER_PATH + deDriverDetails.getDeDriverId() + "/" + deDriverDetails.getFileName());
+        deDriverDetailsMapper.deleteByPrimaryKey(driverFileId);
+    }
+
+    public DeDriverDetails saveJar(MultipartFile file, String driverId) throws Exception {
+        String filename = file.getOriginalFilename();
+        String dirPath = DRIVER_PATH + driverId + "/";
+        String filePath = dirPath + filename;
+
+        saveFile(file, dirPath, filePath);
+        List<String> jdbcList = new ArrayList<>();
+        String version = "";
+//        ExtendedJdbcClassLoader extendedJdbcClassLoader = new ExtendedJdbcClassLoader(new URL[]{new File(filePath).toURI().toURL()}, null);
+//        for (String className : getClassNameFrom(filePath)) {
+//            if (isChildClass(className, java.sql.Driver.class, extendedJdbcClassLoader)) {
+//                jdbcList.add(className);
+//                version = classVersion(extendedJdbcClassLoader, className);
+//            }
+//        }
+
+        DeDriverDetails deDriverDetails = new DeDriverDetails();
+        deDriverDetails.setId(UUID.randomUUID().toString());
+        deDriverDetails.setDeDriverId(driverId);
+        deDriverDetails.setVersion(version);
+        deDriverDetails.setFileName(filename);
+        deDriverDetails.setDriverClass(String.join(",", jdbcList));
+        deDriverDetailsMapper.insert(deDriverDetails);
+        return deDriverDetails;
+    }
+
+    private List<String> getClassNameFrom(String jarName) {
+        List<String> fileList = new ArrayList<String>();
+        try {
+            JarFile jarFile = new JarFile(new File(jarName));
+            Enumeration<JarEntry> en = jarFile.entries(); // 枚举获得JAR文件内的实体,即相对路径
+            while (en.hasMoreElements()) {
+                String name1 = en.nextElement().getName();
+                if (!name1.endsWith(".class")) {//不是class文件
+                    continue;
+                }
+                String name2 = name1.substring(0, name1.lastIndexOf(".class"));
+                String name3 = name2.replaceAll("/", ".");
+                fileList.add(name3);
+            }
+        } catch (IOException e) {
+            e.printStackTrace();
+        }
+        return fileList;
+    }
+
+    public boolean isChildClass(String className, Class parentClazz, ExtendedJdbcClassLoader extendedJdbcClassLoader) {
+        if (className == null) return false;
+
+        Class clazz = null;
+        try {
+            clazz = extendedJdbcClassLoader.loadClass(className);
+            if (Modifier.isAbstract(clazz.getModifiers())) {//抽象类忽略
+                return false;
+            }
+            if (Modifier.isInterface(clazz.getModifiers())) {//接口忽略
+                return false;
+            }
+        } catch (Exception e) {
+            e.printStackTrace();
+            return false;
+        }
+        return parentClazz.isAssignableFrom(clazz);
+    }
+
+    private String classVersion(ExtendedJdbcClassLoader extendedJdbcClassLoader, String className) throws Exception {
+        Class clazz = extendedJdbcClassLoader.loadClass(className);
+        return clazz.getPackage().getImplementationVersion();
+    }
+
+    private String saveFile(MultipartFile file, String dirPath, String filePath) throws Exception {
+        File p = new File(dirPath);
+        if (!p.exists()) {
+            p.mkdirs();
+        }
+        File f = new File(filePath);
+        FileOutputStream fileOutputStream = new FileOutputStream(f);
+        fileOutputStream.write(file.getBytes());
+        fileOutputStream.flush();
+        fileOutputStream.close();
+        return filePath;
+    }
+
+
+}

backend/src/main/resources/db/migration/V35__1.11.sql

@@ -1,6 +1,27 @@
 ALTER TABLE `panel_group`
 ADD COLUMN `status` varchar(255) NULL DEFAULT 'publish' COMMENT '1.publish--发布 2.unpublished--未发布' AFTER `mobile_layout`;
 
+CREATE TABLE `de_driver` (
+     `id` varchar(50) NOT NULL COMMENT '主键',
+     `name` varchar(50) NOT NULL COMMENT '用户ID',
+     `create_time` bigint(13) NOT NULL COMMENT '创健时间',
+     `type` varchar(255) DEFAULT NULL COMMENT '数据源类型',
+     `driver_class` varchar(255) DEFAULT NULL COMMENT '驱动类',
+     `desc` varchar(255) DEFAULT NULL COMMENT '描述',
+     PRIMARY KEY (`id`) USING BTREE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='驱动';
+
+
+CREATE TABLE `de_driver_details` (
+     `id` varchar(50) NOT NULL COMMENT '主键',
+     `de_driver_id` varchar(50) NOT NULL  COMMENT '驱动主键',
+     `file_name` varchar(255) DEFAULT NULL COMMENT '名称',
+     `version` varchar(255) DEFAULT NULL COMMENT '版本',
+     `driver_class` longtext DEFAULT NULL COMMENT '驱动类',
+     PRIMARY KEY (`id`) USING BTREE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='驱动详情';
+
+
 UPDATE `sys_menu` SET `sub_count` = 1 WHERE `menu_id` = 40;
 INSERT INTO `sys_menu` (`menu_id`, `pid`, `sub_count`, `type`, `title`, `name`, `component`, `menu_sort`, `icon`, `path`, `i_frame`, `cache`, `hidden`, `permission`, `create_by`, `update_by`, `create_time`, `update_time`) VALUES (401, 40, 0, 2, '查看系统模板', NULL, NULL, 999, NULL, NULL, 0, 0, 0, 'sys-template:read', NULL, NULL, 1614930862373, 1614930862373);
 

frontend/src/api/system/datasource.js

@@ -15,6 +15,13 @@ export function listDatasource() {
     method: 'get'
   })
 }
+export function listDrivers() {
+  return request({
+    url: '/driver/list',
+    loading: true,
+    method: 'post'
+  })
+}
 export function listDatasourceType() {
   return request({
     url: '/datasource/types',
@@ -29,6 +36,13 @@ export function listDatasourceByType(type) {
     method: 'get'
   })
 }
+export function listDriverByType(type) {
+  return request({
+    url: '/driver/list/' + type,
+    loading: true,
+    method: 'get'
+  })
+}
 export function addDs(data) {
   return request({
     url: 'datasource/add/',
@@ -91,4 +105,47 @@ export function checkApiDatasource(data) {
   })
 }
 
+export function addDriver(data) {
+  return request({
+    url: '/driver/save',
+    method: 'post',
+    loading: true,
+    data
+  })
+}
+
+export function listDriverDetails(id) {
+  return request({
+    url: '/driver/listDriverDetails/' + id,
+    method: 'get',
+    loading: true
+  })
+}
+
+export function deleteDriverFile(data) {
+  return request({
+    url: '/driver/deleteDriverFile',
+    method: 'post',
+    loading: true,
+    data
+  })
+}
+
+export function delDriver(data) {
+  return request({
+    url: 'driver/delete',
+    loading: true,
+    method: 'post',
+    data
+  })
+}
+export function updateDriver(data) {
+  return request({
+    url: 'driver/update/',
+    loading: true,
+    method: 'post',
+    data
+  })
+}
+
 export default { dsGrid, addDs, editDs, delDs, validateDs, listDatasource, getSchema }

frontend/src/lang/en.js

@@ -1328,7 +1328,22 @@ export default {
     sql_ds_union_error: 'Direct connect SQL dataset can not be union',
     api_data: 'API dataset'
   },
+  driver:{
+    driver: 'Driver',
+    please_choose_driver: 'Please choose driver',
+    mgm: 'Driver',
+    add: 'ADD Driver',
+    modify: 'Modify',
+    show_info: 'Driver info',
+    file_name: 'File name',
+    version: 'version'
+  },
   datasource: {
+    auth_method: 'Auth method',
+    passwd: 'UserName Password',
+    kerbers_info: 'Please make sure krb5 Conf, KeyTab key, added to path: /opt/dataease/conf',
+    client_principal: 'Client Principal',
+    keytab_Key_path: 'Keytab Key Path',
     datasource: 'Data Source',
     please_select_left: 'Please select the data source from the left',
     show_info: 'Data Source Info',

frontend/src/lang/tw.js

@@ -1328,7 +1328,22 @@ export default {
     sql_ds_union_error: '直連模式下SQL數據集，不支持關聯',
     api_data: 'API 數據集'
   },
+  driver:{
+    driver: '驅動',
+    please_choose_driver: '青選擇驅動',
+    mgm: '驅動管理',
+    add: '添加驅動',
+    modify: '修改',
+    show_info: '驅動信息',
+    file_name: '文件名',
+    version: '版本'
+  },
   datasource: {
+    auth_method: '認證方式',
+    passwd: '用户名密码',
+    kerbers_info: '请确保 krb5.Conf、Keytab Key，已经添加到路径：/opt/dataease/conf',
+    client_principal: 'Client Principal',
+    keytab_Key_path: 'Keytab Key Path',
     datasource: '數據源',
     please_select_left: '請從左側選擇數據源',
     show_info: '數據源信息',

frontend/src/lang/zh.js

@@ -1330,7 +1330,22 @@ export default {
     sql_ds_union_error: '直连模式下SQL数据集，不支持关联',
     api_data: 'API 数据集'
   },
+  driver:{
+    driver: '驱动',
+    please_choose_driver: '请选择驱动',
+    mgm: '驱动管理',
+    add: '添加驱动',
+    modify: '修改',
+    show_info: '驱动信息',
+    file_name: '文件名',
+    version: '版本'
+  },
   datasource: {
+    auth_method: '认证方式',
+    passwd: '用户名密码',
+    kerbers_info: '请确保 krb5.Conf、Keytab Key，已经添加到路径：/opt/dataease/conf',
+    client_principal: 'Client Principal',
+    keytab_Key_path: 'Keytab Key Path',
     datasource: '数据源',
     please_select_left: '请从左侧选择数据源',
     show_info: '数据源信息',

frontend/src/views/chart/chart/bar/bar_antv.js

@@ -10,6 +10,7 @@ import {
   getSlider,
   getAnalyse
 } from '@/views/chart/chart/common/common_antv'
+import { antVCustomColor } from '@/views/chart/chart/util'
 
 export function baseBarOptionAntV(plot, container, chart, action, isGroup, isStack) {
   // theme
@@ -98,6 +99,8 @@ export function baseBarOptionAntV(plot, container, chart, action, isGroup, isSta
   } else {
     delete options.isStack
   }
+  // custom color
+  options.color = antVCustomColor(chart)
 
   // 开始渲染
   if (plot) {
@@ -198,6 +201,8 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt
   } else {
     delete options.isStack
   }
+  // custom color
+  options.color = antVCustomColor(chart)
 
   // 开始渲染
   if (plot) {

frontend/src/views/chart/chart/funnel/funnel_antv.js

@@ -1,5 +1,6 @@
 import { getLabel, getLegend, getPadding, getTheme, getTooltip } from '@/views/chart/chart/common/common_antv'
 import { Funnel } from '@antv/g2plot'
+import { antVCustomColor } from '@/views/chart/chart/util'
 
 export function baseFunnelOptionAntV(plot, container, chart, action) {
   // theme
@@ -62,6 +63,8 @@ export function baseFunnelOptionAntV(plot, container, chart, action) {
       const s = JSON.parse(JSON.stringify(customAttr.size))
     }
   }
+  // custom color
+  options.color = antVCustomColor(chart)
 
   // 开始渲染
   if (plot) {

frontend/src/views/chart/chart/line/line_antv.js

@@ -10,6 +10,7 @@ import {
   getSlider,
   getAnalyse
 } from '@/views/chart/chart/common/common_antv'
+import { antVCustomColor } from '@/views/chart/chart/util'
 
 export function baseLineOptionAntV(plot, container, chart, action) {
   // theme
@@ -90,6 +91,8 @@ export function baseLineOptionAntV(plot, container, chart, action) {
       }
     }
   }
+  // custom color
+  options.color = antVCustomColor(chart)
 
   // 开始渲染
   if (plot) {
@@ -184,6 +187,8 @@ export function baseAreaOptionAntV(plot, container, chart, action) {
       }
     }
   }
+  // custom color
+  options.color = antVCustomColor(chart)
 
   // 开始渲染
   if (plot) {

frontend/src/views/chart/chart/pie/pie_antv.js

@@ -7,6 +7,7 @@ import {
 } from '@/views/chart/chart/common/common_antv'
 
 import { Pie, Rose } from '@antv/g2plot'
+import { antVCustomColor } from '@/views/chart/chart/util'
 
 export function basePieOptionAntV(plot, container, chart, action) {
   // theme
@@ -84,6 +85,8 @@ export function basePieOptionAntV(plot, container, chart, action) {
       options.innerRadius = parseFloat(parseInt(s.pieInnerRadius) / 100)
     }
   }
+  // custom color
+  options.color = antVCustomColor(chart)
 
   // 开始渲染
   if (plot) {
@@ -165,6 +168,8 @@ export function basePieRoseOptionAntV(plot, container, chart, action) {
       options.innerRadius = parseFloat(parseInt(s.pieInnerRadius) / 100)
     }
   }
+  // custom color
+  options.color = antVCustomColor(chart)
 
   // 开始渲染
   if (plot) {

frontend/src/views/chart/chart/radar/radar_antv.js

@@ -1,5 +1,6 @@
 import { getLabel, getLegend, getPadding, getTheme, getTooltip } from '@/views/chart/chart/common/common_antv'
 import { Radar } from '@antv/g2plot'
+import { antVCustomColor } from '@/views/chart/chart/util'
 
 export function baseRadarOptionAntV(plot, container, chart, action) {
   // theme
@@ -132,6 +133,9 @@ export function baseRadarOptionAntV(plot, container, chart, action) {
   options.xAxis = xAxis
   options.yAxis = yAxis
 
+  // custom color
+  options.color = antVCustomColor(chart)
+
   // 开始渲染
   if (plot) {
     plot.destroy()

frontend/src/views/chart/chart/scatter/scatter_antv.js

@@ -11,6 +11,7 @@ import {
 } from '@/views/chart/chart/common/common_antv'
 
 import { Scatter } from '@antv/g2plot'
+import { antVCustomColor } from '@/views/chart/chart/util'
 
 export function baseScatterOptionAntV(plot, container, chart, action) {
   // theme
@@ -86,6 +87,8 @@ export function baseScatterOptionAntV(plot, container, chart, action) {
       options.shape = s.scatterSymbol
     }
   }
+  // custom color
+  options.color = antVCustomColor(chart)
 
   // 开始渲染
   if (plot) {

frontend/src/views/chart/chart/util.js

@@ -2263,3 +2263,124 @@ export function customSort(custom, data) {
 
   return joinArr.concat(subArr)
 }
+
+export function customColor(custom, res, colors) {
+  const result = []
+  for (let i = 0; i < res.length; i++) {
+    const r = res[i]
+    let flag = false
+    for (let j = 0; j < custom.length; j++) {
+      const c = custom[j]
+      if (r.name === c.name) {
+        flag = true
+        result.push(c)
+      }
+    }
+    if (!flag) {
+      result.push(r)
+    }
+  }
+  return result
+}
+
+export function getColors(chart, colors, reset) {
+  // 自定义颜色，先按照没有设定的情况，并排好序，当做最终结果
+  let seriesColors = []
+  let series
+  if (chart.type.includes('stack')) {
+    if (chart.data) {
+      const data = chart.data.datas
+      const stackData = []
+      for (let i = 0; i < data.length; i++) {
+        const s = data[i]
+        stackData.push(s.category)
+      }
+      const sArr = stackData.filter(function(item, index, stackData) {
+        return stackData.indexOf(item, 0) === index
+      })
+
+      for (let i = 0; i < sArr.length; i++) {
+        const s = sArr[i]
+        seriesColors.push({
+          name: s,
+          color: colors[i % colors.length],
+          isCustom: false
+        })
+      }
+    }
+  } else if (chart.type.includes('bar') || chart.type.includes('line') || chart.type.includes('scatter') || chart.type.includes('radar')) {
+    if (Object.prototype.toString.call(chart.yaxis) === '[object Array]') {
+      series = JSON.parse(JSON.stringify(chart.yaxis))
+    } else {
+      series = JSON.parse(chart.yaxis)
+    }
+    for (let i = 0; i < series.length; i++) {
+      const s = series[i]
+      seriesColors.push({
+        name: s.name,
+        color: colors[i % colors.length],
+        isCustom: false
+      })
+    }
+  } else {
+    if (chart.data) {
+      const data = chart.data.datas
+      // data 的维度值，需要根据自定义顺序排序
+      // let customSortData
+      // if (Object.prototype.toString.call(chart.customSort) === '[object Array]') {
+      //   customSortData = JSON.parse(JSON.stringify(chart.customSort))
+      // } else {
+      //   customSortData = JSON.parse(chart.customSort)
+      // }
+      // if (customSortData && customSortData.length > 0) {
+      //   data = customSort(customSortData, data)
+      // }
+
+      for (let i = 0; i < data.length; i++) {
+        const s = data[i]
+        seriesColors.push({
+          name: s.field,
+          color: colors[i % colors.length],
+          isCustom: false
+        })
+      }
+    }
+  }
+  // 如果有自定义，则与上述中的结果合并。
+  // res，custom，以custom为准，去掉res中不存在的，并将custom中name一样的color赋值给res，不存在的name，即新增值，使用i % colors.length，从配色方案中选
+  if (!reset) {
+    let sc = null
+    if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
+      sc = JSON.parse(JSON.stringify(chart.customAttr)).color.seriesColors
+    } else {
+      sc = JSON.parse(chart.customAttr).color.seriesColors
+    }
+    if (sc && sc.length > 0) {
+      seriesColors = customColor(sc, seriesColors)
+    }
+    // 根据isCustom字段，修正color
+    for (let i = 0; i < seriesColors.length; i++) {
+      if (!seriesColors[i].isCustom) {
+        seriesColors[i].color = colors[i % colors.length]
+      }
+    }
+  }
+  return seriesColors
+}
+
+export function antVCustomColor(chart) {
+  const colors = []
+  if (chart.customAttr) {
+    const customAttr = JSON.parse(chart.customAttr)
+    // color
+    if (customAttr.color) {
+      const c = JSON.parse(JSON.stringify(customAttr.color))
+
+      const customColors = getColors(chart, c.colors, false)
+      for (let i = 0; i < customColors.length; i++) {
+        colors.push(hexColorToRGBA(customColors[i].color, c.alpha))
+      }
+    }
+  }
+  return colors
+}

frontend/src/views/chart/components/shape-attr/ColorSelectorExt.vue

@@ -0,0 +1,416 @@
+<template>
+  <div style="width: 100%">
+    <el-col>
+      <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
+        <div>
+          <el-form-item
+            v-show="chart.type && !chart.type.includes('table') && !chart.type.includes('text') && chart.type !== 'label'"
+            :label="$t('chart.color_case')"
+            class="form-item"
+          >
+            <el-popover
+              placement="bottom"
+              width="400"
+              trigger="click"
+            >
+              <div style="padding: 6px 10px;">
+                <div>
+                  <span class="color-label">{{ $t('chart.system_case') }}</span>
+                  <el-select
+                    v-model="colorForm.value"
+                    :placeholder="$t('chart.pls_slc_color_case')"
+                    size="mini"
+                    @change="changeColorOption"
+                  >
+                    <el-option
+                      v-for="option in colorCases"
+                      :key="option.value"
+                      :label="option.name"
+                      :value="option.value"
+                      style="display: flex;align-items: center;"
+                    >
+                      <div style="float: left">
+                        <span
+                          v-for="(c,index) in option.colors"
+                          :key="index"
+                          :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}"
+                        />
+                      </div>
+                      <span style="margin-left: 4px;">{{ option.name }}</span>
+                    </el-option>
+                  </el-select>
+                  <el-button size="mini" type="text" style="margin-left: 2px;" @click="resetCustomColor">
+                    {{ $t('commons.reset') }}
+                  </el-button>
+                </div>
+                <div style="display: flex;align-items: center;margin-top: 10px;">
+                  <span class="color-label" />
+                  <span>
+                    <!--                    色系自定义-->
+                    <!--                    <el-radio-group v-model="customColor" class="color-type">-->
+                    <!--                      <el-radio v-for="(c,index) in colorForm.colors" :key="index" :label="c" style="padding: 2px;" @change="switchColor(index)">-->
+                    <!--                        <span :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />-->
+                    <!--                      </el-radio>-->
+                    <!--                    </el-radio-group>-->
+
+                    <span v-for="(c,index) in colorForm.colors" :key="index" style="padding: 2px;">
+                      <span :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
+                    </span>
+                  </span>
+                </div>
+                <!--                色系自定义-->
+                <!--                <div style="display: flex;align-items: center;margin-top: 10px;">-->
+                <!--                  <span class="color-label" />-->
+                <!--                  <span>-->
+                <!--                    <el-color-picker v-model="customColor" class="color-picker-style" :predefine="predefineColors" @change="switchColorCase" />-->
+                <!--                  </span>-->
+                <!--                </div>-->
+                <div class="custom-color-style">
+                  <div
+                    v-for="(item,index) in colorForm.seriesColors"
+                    :key="index"
+                    style="display: flex;align-items: center;margin: 2px 0;"
+                  >
+                    <span class="span-label" :title="item.name">{{ item.name }}</span>
+                    <el-color-picker
+                      v-model="item.color"
+                      class="color-picker-style"
+                      :predefine="predefineColors"
+                      @change="switchCustomColor(index)"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <div slot="reference" style="cursor: pointer;margin-top: 2px;width: 180px;">
+                <span
+                  v-for="(c,index) in colorForm.colors"
+                  :key="index"
+                  :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}"
+                />
+              </div>
+            </el-popover>
+          </el-form-item>
+
+          <el-form-item
+            v-show="(chart.type && (chart.type.includes('text') || chart.type === 'label')) || sourceType==='panelTable'"
+            :label="$t('chart.quota_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="colorForm.quotaColor"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeColorCase"
+            />
+          </el-form-item>
+          <el-form-item
+            v-show="(chart.type && chart.type.includes('text') || chart.type === 'label') || sourceType==='panelTable'"
+            :label="$t('chart.dimension_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="colorForm.dimensionColor"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeColorCase"
+            />
+          </el-form-item>
+        </div>
+
+        <el-form-item
+          v-show="chart.type && !chart.type.includes('text') && chart.type !== 'label'"
+          :label="$t('chart.not_alpha')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="colorForm.alpha"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            @change="changeColorCase"
+          />
+        </el-form-item>
+      </el-form>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import { COLOR_PANEL, DEFAULT_COLOR_CASE } from '../../chart/chart'
+import { getColors } from '@/views/chart/chart/util'
+
+export default {
+  name: 'ColorSelectorExt',
+  props: {
+    param: {
+      type: Object,
+      required: false
+    },
+    chart: {
+      type: Object,
+      required: true
+    },
+    sourceType: {
+      type: String,
+      default: 'view',
+      required: false
+    }
+  },
+  data() {
+    return {
+      colorCases: [
+        {
+          name: this.$t('chart.color_default'),
+          value: 'default',
+          colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+        },
+        {
+          name: this.$t('chart.color_retro'),
+          value: 'retro',
+          colors: ['#0780cf', '#765005', '#fa6d1d', '#0e2c82', '#b6b51f', '#da1f18', '#701866', '#f47a75', '#009db2']
+        },
+        {
+          name: this.$t('chart.color_elegant'),
+          value: 'elegant',
+          colors: ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#434348']
+        },
+        {
+          name: this.$t('chart.color_future'),
+          value: 'future',
+          colors: ['#63b2ee', '#76da91', '#f8cb7f', '#f89588', '#7cd6cf', '#9192ab', '#7898e1', '#efa666', '#eddd86']
+        },
+        {
+          name: this.$t('chart.color_gradual'),
+          value: 'gradual',
+          colors: ['#71ae46', '#96b744', '#c4cc38', '#ebe12a', '#eab026', '#e3852b', '#d85d2a', '#ce2626', '#ac2026']
+        },
+        {
+          name: this.$t('chart.color_simple'),
+          value: 'simple',
+          colors: ['#929fff', '#9de0ff', '#ffa897', '#af87fe', '#7dc3fe', '#bb60b2', '#433e7c', '#f47a75', '#009db2']
+        },
+        {
+          name: this.$t('chart.color_business'),
+          value: 'business',
+          colors: ['#194f97', '#555555', '#bd6b08', '#00686b', '#c82d31', '#625ba1', '#898989', '#9c9800', '#007f54']
+        },
+        {
+          name: this.$t('chart.color_gentle'),
+          value: 'gentle',
+          colors: ['#5b9bd5', '#ed7d31', '#70ad47', '#ffc000', '#4472c4', '#91d024', '#b235e6', '#02ae75', '#5b9bd5']
+        },
+        {
+          name: this.$t('chart.color_technology'),
+          value: 'technology',
+          colors: ['#05f8d6', '#0082fc', '#fdd845', '#22ed7c', '#09b0d3', '#1d27c9', '#f9e264', '#f47a75', '#009db2']
+        },
+        {
+          name: this.$t('chart.color_light'),
+          value: 'light',
+          colors: ['#884898', '#808080', '#82ae46', '#00a3af', '#ef8b07', '#007bbb', '#9d775f', '#fae800', '#5f9b3c']
+        },
+        {
+          name: this.$t('chart.color_classical'),
+          value: 'classical',
+          colors: ['#007bbb', '#ffdb4f', '#dd4b4b', '#2ca9e1', '#ef8b07', '#4a488e', '#82ae46', '#dd4b4b', '#bb9581']
+        },
+        {
+          name: this.$t('chart.color_fresh'),
+          value: 'fresh',
+          colors: ['#5f9b3c', '#75c24b', '#83d65f', '#aacf53', '#c7dc68', '#d8e698', '#e0ebaf', '#bbc8e6', '#e5e5e5']
+        },
+        {
+          name: this.$t('chart.color_energy'),
+          value: 'energy',
+          colors: ['#ef8b07', '#2a83a2', '#f07474', '#c55784', '#274a78', '#7058a3', '#0095d9', '#75c24b', '#808080']
+        },
+        {
+          name: this.$t('chart.color_red'),
+          value: 'red',
+          colors: ['#ff0000', '#ef8b07', '#4c6cb3', '#f8e944', '#69821b', '#9c5ec3', '#00ccdf', '#f07474', '#bb9581']
+        },
+        {
+          name: this.$t('chart.color_fast'),
+          value: 'fast',
+          colors: ['#fae800', '#00c039', '#0482dc', '#bb9581', '#ff7701', '#9c5ec3', '#00ccdf', '#00c039', '#ff7701']
+        },
+        {
+          name: this.$t('chart.color_spiritual'),
+          value: 'spiritual',
+          colors: ['#00a3af', '#4da798', '#57baaa', '#62d0bd', '#6ee4d0', '#86e7d6', '#aeede1', '#bde1e6', '#e5e5e5']
+        }
+      ],
+      colorForm: JSON.parse(JSON.stringify(DEFAULT_COLOR_CASE)),
+      customColor: null,
+      colorIndex: 0,
+      predefineColors: COLOR_PANEL
+    }
+  },
+  computed: {
+    panelInfo() {
+      return this.$store.state.panel.panelInfo
+    }
+  },
+  watch: {
+    'chart.id': {
+      handler: function() {
+        this.customColor = null
+        this.colorIndex = 0
+      }
+    },
+    'chart': {
+      handler: function() {
+        this.init()
+      }
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    changeColorOption() {
+      const that = this
+      const items = this.colorCases.filter(ele => {
+        return ele.value === that.colorForm.value
+      })
+      // const val = JSON.parse(JSON.stringify(this.colorForm))
+      // val.value = items[0].value
+      // val.colors = items[0].colors
+      // this.colorForm.value = items[0].value
+      this.colorForm.colors = JSON.parse(JSON.stringify(items[0].colors))
+
+      this.customColor = this.colorForm.colors[0]
+      this.colorIndex = 0
+
+      // reset custom color
+      this.colorForm.seriesColors = []
+      this.initCustomColor(true)
+
+      this.changeColorCase()
+    },
+    changeColorCase() {
+      this.$emit('onColorChange', this.colorForm)
+      // this.customColor = null
+      // this.colorIndex = 0
+    },
+    init() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customAttr) {
+        let customAttr = null
+        if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
+          customAttr = JSON.parse(JSON.stringify(chart.customAttr))
+        } else {
+          customAttr = JSON.parse(chart.customAttr)
+        }
+        if (customAttr.color) {
+          this.colorForm = customAttr.color
+          if (!this.customColor) {
+            this.customColor = this.colorForm.colors[0]
+            this.colorIndex = 0
+          }
+
+          this.colorForm.tableBorderColor = this.colorForm.tableBorderColor ? this.colorForm.tableBorderColor : DEFAULT_COLOR_CASE.tableBorderColor
+
+          this.initCustomColor()
+        }
+      }
+    },
+    switchColor(index) {
+      this.colorIndex = index
+    },
+    switchColorCase() {
+      this.colorForm.colors[this.colorIndex] = this.customColor
+      this.$emit('onColorChange', this.colorForm)
+    },
+
+    switchCustomColor(index) {
+      this.colorForm.seriesColors[index].isCustom = true
+      this.switchColorCase()
+    },
+
+    resetCustomColor() {
+      this.changeColorOption()
+    },
+
+    initCustomColor(reset) {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      this.colorForm.seriesColors = getColors(chart, this.colorForm.colors, reset)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.shape-item {
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center
+}
+
+.form-item-slider >>> .el-form-item__label {
+  font-size: 12px;
+  line-height: 38px;
+}
+
+.form-item >>> .el-form-item__label {
+  font-size: 12px;
+}
+
+.el-select-dropdown__item {
+  padding: 0 20px;
+}
+
+span {
+  font-size: 12px
+}
+
+.el-form-item {
+  margin-bottom: 6px;
+}
+
+.color-picker-style {
+  cursor: pointer;
+  z-index: 1003;
+}
+
+.color-label {
+  display: inline-block;
+  width: 60px;
+}
+
+.color-type >>> .el-radio__input {
+  display: none;
+}
+
+.el-radio {
+  margin: 0 2px 0 0 !important;
+  border: 1px solid transparent;
+}
+
+.el-radio >>> .el-radio__label {
+  padding-left: 0;
+}
+
+.el-radio.is-checked {
+  border: 1px solid #0a7be0;
+}
+
+.span-label {
+  width: 100px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+}
+
+.custom-color-style {
+  height: 300px;
+  overflow-y: auto;
+  padding: 4px;
+  border: 1px solid #e6e6e6;
+}
+</style>

frontend/src/views/chart/group/Group.vue

@@ -822,6 +822,7 @@ export default {
       view.customFilter = JSON.stringify([])
       view.drillFields = JSON.stringify([])
       view.extBubble = JSON.stringify([])
+      view.viewFields = JSON.stringify([])
       this.setChartDefaultOptions(view)
       const _this = this
       post('/chart/view/newOne/' + this.panelInfo.id, view, true).then(response => {

frontend/src/views/chart/view/ChartEdit.vue

@@ -658,6 +658,8 @@
             :chart="chart"
             :properties="chartProperties"
             :property-inner-all="chartPropertyInnerAll"
+            :dimension-data="dimensionData"
+            :quota-data="quotaData"
             @calcStyle="calcStyle"
             @onColorChange="onColorChange"
             @onSizeChange="onSizeChange"
@@ -1083,6 +1085,7 @@ export default {
         yaxisExt: [],
         extStack: [],
         drillFields: [],
+        viewFields: [],
         extBubble: [],
         show: true,
         type: 'bar',
@@ -1535,6 +1538,7 @@ export default {
       this.view = JSON.parse(JSON.stringify(view))
       // stringify json param
       view.xaxis = JSON.stringify(view.xaxis)
+      view.viewFields = JSON.stringify(view.viewFields)
       view.xaxisExt = JSON.stringify(view.xaxisExt)
       view.yaxis = JSON.stringify(view.yaxis)
       view.yaxisExt = JSON.stringify(view.yaxisExt)
@@ -1594,6 +1598,7 @@ export default {
       const view = this.buildParam(true, 'chart', false, switchType)
       if (!view) return
       viewEditSave(this.panelInfo.id, view).then(() => {
+        this.getData(this.param.id)
         bus.$emit('view-in-cache', { type: 'propChange', viewId: this.param.id })
       })
     },
@@ -1602,6 +1607,7 @@ export default {
       // 将视图传入echart...组件
       const view = JSON.parse(JSON.stringify(this.view))
       view.xaxis = JSON.stringify(this.view.xaxis)
+      view.viewFields = JSON.stringify(this.view.viewFields)
       view.xaxisExt = JSON.stringify(this.view.xaxisExt)
       view.yaxis = JSON.stringify(this.view.yaxis)
       view.yaxisExt = JSON.stringify(this.view.yaxisExt)
@@ -1666,6 +1672,7 @@ export default {
         }).then(response => {
           this.initTableData(response.data.tableId)
           this.view = JSON.parse(JSON.stringify(response.data))
+          this.view.viewFields = this.view.viewFields ? JSON.parse(this.view.viewFields) : []
           this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
           this.view.xaxisExt = this.view.xaxisExt ? JSON.parse(this.view.xaxisExt) : []
           this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
@@ -1716,6 +1723,7 @@ export default {
               this.initTableData(response.data.tableId)
             }
             this.view = JSON.parse(JSON.stringify(response.data))
+            this.view.viewFields = this.view.viewFields ? JSON.parse(this.view.viewFields) : []
             this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
             this.view.xaxisExt = this.view.xaxisExt ? JSON.parse(this.view.xaxisExt) : []
             this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
@@ -2412,6 +2420,8 @@ export default {
           this.view.customAttr.label.position = 'middle'
         }
       }
+      // reset custom colors
+      this.view.customAttr.color.seriesColors = []
     },
 
     valueFormatter(item) {

frontend/src/views/chart/view/ChartStyle.vue

@@ -5,7 +5,7 @@
       style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;"
       class="attr-style theme-border-class"
       :component-name="view.type + '-style'"
-      :obj="{view, param, chart}"
+      :obj="{view, param, chart, dimensionData, quotaData}"
     />
     <div
       v-else
@@ -29,8 +29,17 @@
       <el-row>
         <span class="padding-lr">{{ $t('chart.shape_attr') }}</span>
         <el-collapse v-model="attrActiveNames" class="style-collapse">
+          <el-collapse-item name="color" :title="$t('chart.color')">
+            <color-selector-ext
+              v-if="view.render && view.render === 'antv' && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('pie') || view.type === 'funnel' || view.type === 'radar' || view.type === 'scatter')"
+              :param="param"
+              class="attr-selector"
+              :chart="chart"
+              @onColorChange="onColorChange"
+            />
           <el-collapse-item name="color"  v-show="showPropertiesCollapse(['color-selector'])" :title="$t('chart.color')">
             <color-selector
+              v-else
               :param="param"
               class="attr-selector"
               :chart="chart"
@@ -274,6 +283,7 @@
 <script>
 import PluginCom from '@/views/system/plugin/PluginCom'
 import ColorSelector from '@/views/chart/components/shape-attr/ColorSelector'
+import ColorSelectorExt from '@/views/chart/components/shape-attr/ColorSelectorExt'
 import SizeSelector from '@/views/chart/components/shape-attr/SizeSelector'
 import SizeSelectorAntV from '@/views/chart/components/shape-attr/SizeSelectorAntV'
 import LabelSelector from '@/views/chart/components/shape-attr/LabelSelector'
@@ -315,7 +325,13 @@ export default {
     TotalCfg,
     TooltipSelectorAntV,
     TooltipSelector,
-    LabelSelectorAntV, LabelSelector, SizeSelectorAntV, SizeSelector, ColorSelector, PluginCom
+    LabelSelectorAntV,
+    LabelSelector,
+    SizeSelectorAntV,
+    SizeSelector,
+    ColorSelector,
+    PluginCom,
+    ColorSelectorExt
   },
   props: {
     chart: {
@@ -334,6 +350,14 @@ export default {
       type: Array,
       required: true
     },
+    dimensionData: {
+      type: Array,
+      required: true
+    },
+    quotaData: {
+      type: Array,
+      required: true
+    },
     propertyInnerAll: {
       type: Object,
       required: true
@@ -358,7 +382,7 @@ export default {
   },
   methods: {
     showProperties(property) {
-      return this.properties.includes(property)
+      return this.properties && this.properties.length && this.properties.includes(property)
     },
     showPropertiesCollapse(propertiesInfo) {
       let includeCount = 0

frontend/src/views/system/datasource/DriverForm.vue

@@ -0,0 +1,294 @@
+<template>
+  <layout-content>
+    <template v-slot:header>
+      <el-icon name="back" class="back-button" @click.native="backToList"/>
+      {{
+        params && params.id && params.showModel && params.showModel === 'show' && !canEdit ? $t('driver.show_info') : $t('driver.modify')
+      }}
+      <el-button v-if="canEdit"  size="mini"   style="float: right;"type="primary" @click="save">{{ $t('commons.save') }}
+      </el-button>
+      <el-button v-else size="mini"  style="float: right;" type="primary" @click="changeEdit">{{ $t('commons.edit') }}
+      </el-button>
+
+
+    </template>
+    <div>
+
+      <el-form
+        ref="driverForm"
+        :model="driverForm"
+        :rules="rule"
+        size="small"
+        :disabled="params && params.id && params.showModel && params.showModel === 'show' && !canEdit"
+        label-width="180px"
+        label-position="right"
+      >
+        <el-form-item :label="$t('commons.name')" prop="name">
+          <el-input v-model="driverForm.name" autocomplete="off"/>
+        </el-form-item>
+        <el-form-item :label="$t('commons.description')" prop="desc">
+          <el-input v-model="driverForm.desc" autocomplete="off"/>
+        </el-form-item>
+        <el-form-item :label="$t('datasource.type')" prop="type">
+          <el-select
+            v-model="driverForm.type"
+            :placeholder="$t('datasource.please_choose_type')"
+            class="select-width"
+            disabled
+            filterable
+          >
+            <el-option
+              v-for="item in dsTypes"
+              :key="item.type"
+              :label="item.name"
+              :value="item.type"
+            />
+          </el-select>
+        </el-form-item>
+
+<!--        <el-form-item :label="$t('driver.driver')" >-->
+<!--          <el-select-->
+<!--            v-model="driverForm.driverClass"-->
+<!--            :placeholder="$t('driver.please_choose_driver')"-->
+<!--            class="select-width"-->
+<!--            filterable-->
+<!--          >-->
+<!--            <el-option-->
+<!--              v-for="item in driverClassList"-->
+<!--              :key="item"-->
+<!--              :label="item"-->
+<!--              :value="item"-->
+<!--            />-->
+<!--          </el-select>-->
+<!--        </el-form-item>-->
+
+        <el-form-item :label="$t('driver.driver')" >
+          <el-input v-model="driverForm.driverClass" autocomplete="off"/>
+        </el-form-item>
+
+
+      </el-form>
+
+      <el-upload
+        :action="baseUrl+'driver/file/upload'"
+        :multiple="true"
+        :show-file-list="false"
+        :file-list="fileList"
+        :data="params"
+        accept=".jar"
+        :before-upload="beforeUpload"
+        :on-success="uploadSuccess"
+        :on-error="uploadFail"
+        name="file"
+        :headers="headers"
+        style="float: right;"
+      >
+        <el-button size="mini" type="primary"  style="float: right;" :disabled="uploading">
+          <span v-if="!uploading" style="font-size: 12px;">{{ $t('dataset.upload_file') }}</span>
+          <span v-if="uploading" style="font-size: 12px;"><i class="el-icon-loading" /> {{ $t('dataset.uploading') }}</span>
+        </el-button>
+      </el-upload>
+    <fu-table :data="driverFiles">
+      <el-table-column prop="fileName" :label="$t('driver.file_name')"/>
+      <el-table-column prop="version" :label="$t('driver.version')"/>
+      <fu-table-operations :buttons="buttons" :label="$t('commons.operating')" fix/>
+    </fu-table>
+
+    </div>
+  </layout-content>
+</template>
+
+<script>
+import LayoutContent from '@/components/business/LayoutContent'
+import i18n from '@/lang/index'
+import ApiHttpRequestForm from '@/views/system/datasource/ApiHttpRequestForm'
+import DsConfiguration from "@/views/system/datasource/DsConfiguration";
+import PluginCom from '@/views/system/plugin/PluginCom'
+import {deleteDriverFile, listDriverDetails, updateDriver} from "@/api/system/datasource";
+import {delUser} from "@/api/system/user";
+import {$alert} from "@/utils/message";
+import store from "@/store";
+import {getToken} from "@/utils/auth";
+
+const token = getToken()
+
+export default {
+  name: 'DriverForm',
+  components: {
+    DsConfiguration,
+    LayoutContent,
+    ApiHttpRequestForm,
+    PluginCom
+  },
+  props: {
+    params: {
+      type: Object,
+      default: null
+    },
+    tData: {
+      type: Array,
+      default: null
+    },
+    dsTypes: {
+      type: Array,
+      default: null
+    }
+  },
+  data() {
+    return {
+      disabled: false,
+      driverForm: {
+        id:'',
+        name: '',
+        desc: '',
+        type: '',
+        driverClass: ''
+      },
+      datasourceType: {},
+      driverClassList: [],
+      rule: {
+        name: [{required: true, message: i18n.t('datasource.input_name'), trigger: 'blur'},
+          {min: 2, max: 50, message: i18n.t('datasource.input_limit_2_25', [2, 25]), trigger: 'blur'}],
+        desc: [{required: true, message: i18n.t('datasource.input_name'), trigger: 'blur'},
+          {min: 2, max: 200, message: i18n.t('datasource.input_limit_2_25', [2, 25]), trigger: 'blur'}],
+        type: [{required: true, message: i18n.t('datasource.please_choose_type'), trigger: 'blur'}]
+      },
+      canEdit: false,
+      driverFiles: [],
+      btnDisabled: false,
+      buttons: [
+        {
+          label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this.deleteDriverFile,
+          disabled: this.btnDisabled
+        }
+      ],
+      uploading: false,
+      baseUrl: process.env.VUE_APP_BASE_API,
+      headers: { Authorization: token, 'Accept-Language': i18n.locale.replace('_', '-') },
+      fileList: []
+    }
+  },
+
+  created() {
+    const row = this.params
+    this.driverForm = JSON.parse(JSON.stringify(row))
+    this.disabled = this.params && this.params.id && this.params.showModel && this.params.showModel === 'show' && !this.canEdit
+    this.listDriverDetails()
+  },
+  mounted() {
+  },
+
+
+  methods: {
+    beforeUpload(file) {
+      this.uploading = true
+    },
+    uploadSuccess(response, file, fileList) {
+      this.uploading = false
+      this.listDriverDetails()
+    },
+    uploadFail(response, file, fileList) {
+      let myError = response.toString()
+      myError = myError.replace('Error: ', '')
+      if(myError.indexOf('AuthenticationException') >= 0){
+        const message = i18n.t('login.tokenError')
+        $alert(message, () => {
+          store.dispatch('user/logout').then(() => {
+            location.reload()
+          })
+        }, {
+          confirmButtonText: i18n.t('login.re_login'),
+          showClose: false
+        })
+        return
+      }
+      const errorMessage = JSON.parse(myError).message
+      this.uploading = false
+      this.$message({
+        type: 'error',
+        message: errorMessage,
+        showClose: true
+      })
+    },
+    deleteDriverFile(row){
+      deleteDriverFile(row).then(res => {
+        this.$success(this.$t('commons.delete_success'))
+        this.listDriverDetails()
+      })
+    },
+    listDriverDetails(){
+      listDriverDetails(this.driverForm.id).then(res => {
+        this.driverFiles = res.data
+        this.driverClassList = []
+        this.driverFiles.forEach(driverFile => {
+          this.driverClassList = this.driverClassList.concat(driverFile.driverClass.split(','))
+        })
+      })
+    },
+    changeEdit() {
+      this.canEdit = true
+      this.formType = 'modify'
+      this.disabled = this.params && this.params.id && this.params.showModel && this.params.showModel === 'show' && !this.canEdit
+    },
+    save(){
+      updateDriver(this.driverForm).then(res => {
+        this.$success(i18n.t('commons.success'))
+        this.canEdit = false
+      })
+    },
+    reset() {
+      this.$refs.dsForm.resetFields()
+    },
+    backToList() {
+      this.$emit('switch-component', {})
+    },
+    refreshType(form) {
+      this.$emit('refresh-type', DsForm)
+    },
+    handleClick(tab, event) {}
+  }
+}
+</script>
+<style scoped>
+.el-input {
+  width: 300px;
+}
+
+.el-select {
+  width: 300px;
+}
+
+.ms-http-input {
+  width: 500px;
+  margin-top: 5px;
+}
+
+.tip {
+  padding: 3px 5px;
+  font-size: 16px;
+  border-radius: 0;
+  border-left: 4px solid #409EFF;
+  margin: 5px 5px 10px 5px;
+}
+
+.el-select >>> input {
+  padding-right: 10px;
+}
+
+.el-select >>> .el-input__suffix {
+  right: 0;
+}
+
+.dialog-css >>> .el-dialog__header {
+  padding: 10px 20px 0px;
+}
+
+.dialog-css >>> .el-dialog__body {
+  padding: 10px 20px 10px;
+}
+
+.dialog-footer >>> .el-dialog__footer {
+  padding: 10px 10px 10px;
+}
+
+</style>

frontend/src/views/system/datasource/DsConfiguration.vue

@@ -3,13 +3,13 @@
     <el-row>
       <el-col>
         <el-form
-          ref="DsConfig"
+            ref="DsConfig"
-          :model="form"
+            :model="form"
-          :rules="rule"
+            :rules="rule"
-          size="small"
+            size="small"
-          :disabled="disabled"
+            :disabled="disabled"
-          label-width="180px"
+            label-width="180px"
-          label-position="right"
+            label-position="right"
         >
           <el-form-item v-if="form.type == 'api'" :label="$t('datasource.data_table')">
             <el-col>
@@ -77,7 +77,8 @@
                 </div>
 
                 <el-form-item :label="$t('datasource.data_path')" prop="dataPath">
-                  <el-input :placeholder="$t('datasource.data_path_desc')" v-model="apiItem.dataPath" autocomplete="off"/>
+                  <el-input :placeholder="$t('datasource.data_path_desc')" v-model="apiItem.dataPath"
+                            autocomplete="off"/>
                 </el-form-item>
               </el-form>
             </el-row>
@@ -103,7 +104,10 @@
               </el-tabs>
             </el-row>
             <div slot="footer" class="dialog-footer">
-              <el-button @click="next" :disabled="disabledNext" v-show="active === 1">{{ $t('fu.steps.next') }}</el-button>
+              <el-button @click="next" :disabled="disabledNext" v-show="active === 1">{{
+                  $t('fu.steps.next')
+                }}
+              </el-button>
               <el-button @click="before" v-show="active === 2">{{ $t('fu.steps.prev') }}</el-button>
               <el-button @click="saveItem" v-show="active === 2">{{ $t('commons.save') }}</el-button>
             </div>
@@ -125,20 +129,55 @@
             <el-input v-model="form.configuration.dataBase" autocomplete="off"/>
           </el-form-item>
 
-          <el-form-item v-if="form.type=='oracle' && form.type !== 'api'" :label="$t('datasource.oracle_connection_type')"
+          <el-form-item v-if="form.type=='oracle' && form.type !== 'api'"
+                        :label="$t('datasource.oracle_connection_type')"
                         prop="configuration.connectionType">
-            <el-radio v-model="form.configuration.connectionType" label="sid">{{ $t('datasource.oracle_sid') }}</el-radio>
+            <el-radio v-model="form.configuration.connectionType" label="sid">{{
+                $t('datasource.oracle_sid')
+              }}
+            </el-radio>
             <el-radio v-model="form.configuration.connectionType" label="serviceName">
               {{ $t('datasource.oracle_service_name') }}
             </el-radio>
           </el-form-item>
 
-          <el-form-item v-if="form.type !== 'es'  && form.type !== 'api'"
+          <el-form-item v-if="form.type=='hive' " :label="$t('datasource.auth_method')">
+            <el-select
+                v-model="form.configuration.authMethod"
+                class="select-width"
+            >
+              <el-option
+                  v-for="item in authMethodList"
+                  :key="item.id"
+                  :label="item.label"
+                  :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item v-if="form.type === 'hive'  && form.configuration.authMethod === 'kerberos'"
+                        :label="$t('datasource.client_principal')">
+            <el-input v-model="form.configuration.username" autocomplete="off"/>
+          </el-form-item>
+
+          <el-form-item v-if="form.type === 'hive'  && form.configuration.authMethod === 'kerberos'"
+                        :label="$t('datasource.keytab_Key_path')">
+            <el-input v-model="form.configuration.password" autocomplete="off" show-password/>
+            <p>
+              {{$t('datasource.kerbers_info')}}
+            </p>
+          </el-form-item>
+
+          <span v-if="form.type === 'hive'  && form.configuration.authMethod === 'kerberos'">
+
+          </span>
+
+          <el-form-item v-if="form.type !== 'es'  && form.type !== 'api' && form.configuration.authMethod !== 'kerberos'"
                         :label="$t('datasource.user_name')">
             <el-input v-model="form.configuration.username" autocomplete="off"/>
           </el-form-item>
 
-          <el-form-item v-if="form.type !== 'es'  && form.type !== 'api'"
+          <el-form-item v-if="form.type !== 'es'  && form.type !== 'api' && form.configuration.authMethod !== 'kerberos'"
                         :label="$t('datasource.password')">
             <el-input v-model="form.configuration.password" autocomplete="off" show-password/>
           </el-form-item>
@@ -164,21 +203,26 @@
           </el-form-item>
 
           <el-form-item
-            v-if="form.type=='oracle' || form.type=='sqlServer' || form.type=='pg' || form.type=='redshift' || form.type=='db2'">
+              v-if="form.type=='oracle' || form.type=='sqlServer' || form.type=='pg' || form.type=='redshift' || form.type=='db2'">
-            <el-button icon="el-icon-plus" size="mini" @click="getSchema()">{{ $t('datasource.get_schema') }}</el-button>
+            <el-button icon="el-icon-plus" size="mini" @click="getSchema()">{{
+                $t('datasource.get_schema')
+              }}
+            </el-button>
           </el-form-item>
 
           <el-form-item
-            v-if="form.type=='oracle' || form.type=='sqlServer' || form.type=='pg' || form.type=='redshift' || form.type=='db2'"
+              v-if="form.type=='oracle' || form.type=='sqlServer' || form.type=='pg' || form.type=='redshift' || form.type=='db2'"
-            :label="$t('datasource.schema')">
+              :label="$t('datasource.schema')">
-            <el-select v-model="form.configuration.schema" filterable :placeholder="$t('datasource.please_choose_schema')"
+            <el-select v-model="form.configuration.schema" filterable
+                       :placeholder="$t('datasource.please_choose_schema')"
                        class="select-width">
               <el-option v-for="item in schemas" :key="item" :label="item" :value="item"/>
             </el-select>
           </el-form-item>
 
           <el-form-item v-if="form.type=='oracle'" :label="$t('datasource.charset')">
-            <el-select v-model="form.configuration.charset" filterable :placeholder="$t('datasource.please_choose_charset')"
+            <el-select v-model="form.configuration.charset" filterable
+                       :placeholder="$t('datasource.please_choose_charset')"
                        class="select-width">
               <el-option v-for="item in datasourceType.charset" :key="item" :label="item" :value="item"/>
             </el-select>
@@ -208,7 +252,6 @@
 <script>
 
 
-
 import i18n from "@/lang";
 import {checkApiDatasource, getSchema} from "@/api/system/datasource";
 import ApiHttpRequestForm from '@/views/system/datasource/ApiHttpRequestForm'
@@ -367,15 +410,20 @@ export default {
         {label: this.$t('dataset.location'), value: 5}
       ],
       height: 500,
-      disabledNext: false
+      disabledNext: false,
+      authMethodList: [
+        {
+          id: 'passwd',
+          label: i18n.t('datasource.passwd')
+        }, {
+          id: 'kerberos',
+          label: 'Kerberos'
+        }]
     }
   },
   created() {
-
-  },
-  watch: {
-
   },
+  watch: {},
   methods: {
     getSchema() {
       this.$refs.DsConfig.validate(valid => {

frontend/src/views/system/datasource/DsForm.vue

@@ -41,6 +41,23 @@
           </el-select>
         </el-form-item>
 
+        <el-form-item  v-if="datasourceType.isJdbc" :label="$t('driver.driver')">
+          <el-select
+            v-model="form.configuration.customDriver"
+            :placeholder="$t('driver.please_choose_driver')"
+            class="select-width"
+            filterable
+          >
+            <el-option
+              v-for="item in driverList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+              :disabled="!item.driverClass"
+            />
+          </el-select>
+        </el-form-item>
+
       <ds-configuration ref="dsConfig" v-if="!datasourceType.isPlugin" :datasource-type='datasourceType' :form="form" :disabled="params && params.id && params.showModel && params.showModel === 'show' && !canEdit"></ds-configuration>
       <plugin-com ref="pluginDsConfig" v-if="datasourceType.isPlugin"  :component-name="datasourceType.type" :obj="{form, disabled }" />
 
@@ -70,7 +87,15 @@
 
 <script>
 import LayoutContent from '@/components/business/LayoutContent'
-import {addDs, editDs, getSchema, validateDs, validateDsById, checkApiDatasource} from '@/api/system/datasource'
+import {
+  addDs,
+  editDs,
+  getSchema,
+  validateDs,
+  validateDsById,
+  checkApiDatasource,
+  listDriverByType
+} from '@/api/system/datasource'
 import {$confirm} from '@/utils/message'
 import i18n from '@/lang/index'
 import ApiHttpRequestForm from '@/views/system/datasource/ApiHttpRequestForm'
@@ -227,7 +252,8 @@ export default {
         {label: this.$t('dataset.location'), value: 5}
       ],
       height: 500,
-      disabledNext: false
+      disabledNext: false,
+      driverList: []
     }
   },
 
@@ -235,7 +261,7 @@ export default {
     if (this.params && this.params.id) {
       const row = this.params
       this.edit(row)
-      this.changeType()
+      this.changeType(true)
     } else {
       this.create()
       if (this.params && this.params.type) {
@@ -492,13 +518,19 @@ export default {
         }
       })
     },
-    changeType() {
+    changeType(init) {
       for (let i = 0; i < this.dsTypes.length; i++) {
         if (this.dsTypes[i].type === this.form.type) {
-          if(this.form.type !== 'api'){
+          if(this.form.type !== 'api' && !init){
             this.form.configuration.extraParams = this.dsTypes[i].extraParams
           }
           this.datasourceType = this.dsTypes[i]
+          if(this.datasourceType.isJdbc){
+            listDriverByType(this.datasourceType.type).then(res => {
+              this.driverList = res.data
+              this.driverList.push({id: 'default', name: 'Default', driverClass:'Default'})
+            })
+          }
         }
       }
     },

frontend/src/views/system/datasource/DsMain.vue

@@ -22,7 +22,8 @@ import DeMainContainer from '@/components/dataease/DeMainContainer'
 import DeContainer from '@/components/dataease/DeContainer'
 import DeAsideContainer from '@/components/dataease/DeAsideContainer'
 import DsTree from './DsTree'
-import DsForm from './form'
+import DsForm from './DsForm'
+import DriverForm from "./DriverForm";
 import DataHome from './DataHome'
 
 export default {
@@ -56,6 +57,12 @@ export default {
             this.tData = tData
             this.dsTypes = dsTypes
             break
+          case 'DriverForm':
+            this.component = DriverForm
+            this.param = componentParam
+            this.tData = tData
+            this.dsTypes = dsTypes
+            break
           default:
             this.component = DataHome
             this.param = null

frontend/src/views/system/datasource/DsTree.vue

@@ -1,20 +1,15 @@
 <template xmlns:el-col="http://www.w3.org/1999/html">
   <el-col class="tree-style">
     <el-col>
-      <el-row class="title-css">
+      <el-row>
-        <span class="title-text">
+        <el-tabs v-model="showView" @tab-click="changeTab" type="card">
-          {{ $t('commons.datasource') }}
+          <el-tab-pane v-for="(item, index) in editableTabs" :key="item.name" :label="item.title" :name="item.name">
-        </span>
+          </el-tab-pane>
-        <el-button
+        </el-tabs>
-          icon="el-icon-plus"
+      </el-row>
-          type="text"
+      <el-row>
-          size="mini"
+        <el-button icon="el-icon-plus" type="text" size="mini" style="float: left;" @click="addFolder"/>
-          style="float: right;"
-          @click="addFolder"
-        />
-
       </el-row>
-      <el-divider />
       <el-row>
         <el-form>
           <el-form-item class="form-item">
@@ -44,16 +39,16 @@
             <span slot-scope="{ node, data }" class="custom-tree-node-list father">
               <span style="display: flex;flex: 1;width: 0;">
                 <span v-if="data.type !== 'folder' && data.status !== 'Error' && data.status !== 'Warning'">
-                  <svg-icon icon-class="datasource" class="ds-icon-scene" />
+                  <svg-icon icon-class="datasource" class="ds-icon-scene"/>
                 </span>
                 <span v-if="data.status === 'Error'">
-                  <svg-icon icon-class="exclamationmark" class="ds-icon-scene" />
+                  <svg-icon icon-class="exclamationmark" class="ds-icon-scene"/>
                 </span>
                 <span v-if="data.status === 'Warning'">
-                  <svg-icon icon-class="exclamationmark2" class="ds-icon-scene" />
+                  <svg-icon icon-class="exclamationmark2" class="ds-icon-scene"/>
                 </span>
                 <span v-if="data.type === 'folder'">
-                  <i class="el-icon-folder" />
+                  <i class="el-icon-folder"/>
                 </span>
                 <span
                   v-if=" data.status === 'Error'"
@@ -110,11 +105,57 @@
           </el-tree>
         </div>
       </el-col>
+
+      <el-dialog v-dialogDrag :title="dialogTitle" :visible="editDriver" :show-close="false" width="50%" append-to-body>
+        <el-form ref="driverForm" :model="driverForm" label-position="right" label-width="100px" :rules="rule">
+          <el-form-item :label="$t('commons.name')" prop="name">
+            <el-input v-model="driverForm.name"/>
+          </el-form-item>
+          <el-form-item :label="$t('commons.description')" prop="desc">
+            <el-input v-model="driverForm.desc"/>
+          </el-form-item>
+          <el-form-item :label="$t('datasource.type')" prop="type">
+            <el-select
+              v-model="driverForm.type"
+              :placeholder="$t('datasource.please_choose_type')"
+              class="select-width"
+              :disabled="disabledModifyType"
+              filterable
+            >
+              <el-option
+                v-for="item in dsTypes"
+                :key="item.type"
+                :label="item.name"
+                :value="item.type"
+              />
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button size="mini" @click="close()">{{ $t('commons.cancel') }}</el-button>
+          <el-button type="primary" size="mini" @click="saveDriver(driverForm)">{{ $t('commons.save') }}
+          </el-button>
+        </div>
+      </el-dialog>
+
+
     </el-col>
   </el-col>
 </template>
 <script>
-import { listDatasource, listDatasourceByType, delDs, listDatasourceType } from '@/api/system/datasource'
+
+import {mapGetters} from 'vuex'
+import i18n from "@/lang";
+import {
+  listDatasource,
+  listDatasourceByType,
+  delDs,
+  listDatasourceType,
+  listDrivers,
+  addDriver,
+  delDriver,
+  listDriverByType
+} from '@/api/system/datasource'
 
 export default {
   name: 'DsTree',
@@ -130,7 +171,27 @@ export default {
       tData: [],
       dsTypes: [],
       showSearchInput: false,
-      key: ''
+      key: '',
+      showView: 'Datasource',
+      dialogTitle: '',
+      editDriver: false,
+      driverForm: {
+        name: '',
+        desc: '',
+        type: ''
+      },
+      disabledModifyType: false,
+      rule: {
+        name: [{required: true, message: i18n.t('datasource.input_name'), trigger: 'blur'},
+          {min: 2, max: 50, message: i18n.t('datasource.input_limit_2_25', [2, 25]), trigger: 'blur'}],
+        desc: [{required: true, message: i18n.t('datasource.input_name'), trigger: 'blur'},
+          {min: 2, max: 200, message: i18n.t('datasource.input_limit_2_25', [2, 25]), trigger: 'blur'}],
+        type: [{required: true, message: i18n.t('datasource.please_choose_type'), trigger: 'blur'}]
+      },
+      editableTabs: [{
+        title: i18n.t('commons.datasource'),
+        name: 'Datasource'
+      }]
     }
   },
   watch: {
@@ -138,14 +199,22 @@ export default {
       this.$refs.myDsTree.filter(val)
     }
   },
+  computed: {
+    ...mapGetters([
+      'user'
+    ])
+  },
   created() {
     this.queryTreeDatas()
     this.datasourceTypes()
+    if (this.user.isAdmin) {
+      this.editableTabs.push({
+        title: i18n.t('driver.mgm'),
+        name: 'Driver'
+      })
+    }
+
   },
-  // mounted() {
-  //   this.queryTreeDatas()
-  //   this.datasourceTypes()
-  // },
   methods: {
     filterNode(value, data) {
       if (!value) return true
@@ -159,9 +228,16 @@ export default {
       this.showSearchInput = false
     },
     queryTreeDatas() {
-      listDatasource().then(res => {
+      if (this.showView === 'Datasource') {
-        this.tData = this.buildTree(res.data)
+        listDatasource().then(res => {
-      })
+          this.tData = this.buildTree(res.data)
+        })
+      }
+      if (this.showView === 'Driver') {
+        listDrivers().then(res => {
+          this.tData = this.buildTree(res.data)
+        })
+      }
     },
     datasourceTypes() {
       listDatasourceType().then(res => {
@@ -169,8 +245,9 @@ export default {
       })
     },
     refreshType(datasource) {
+      const method = this.showView === 'Datasource' ? listDatasourceByType : listDriverByType
       let typeData = []
-      listDatasourceByType(datasource.type).then(res => {
+      method(datasource.type).then(res => {
         typeData = this.buildTree(res.data)
         if (typeData.length === 0) {
           const index = this.tData.findIndex(item => {
@@ -220,10 +297,31 @@ export default {
     },
 
     addFolder() {
-      this.switchMain('DsForm', {}, this.tData, this.dsTypes)
+      if (this.showView === 'Driver') {
+        this.dialogTitle = this.$t('driver.driver')
+        this.editDriver = true
+        // this.switchMain('DriverForm', {}, this.tData, this.dsTypes)
+      } else {
+        this.switchMain('DsForm', {}, this.tData, this.dsTypes)
+      }
     },
+
+    changeTab() {
+      this.expandedArray = []
+      this.tData = []
+      this.queryTreeDatas()
+    },
+
     addFolderWithType(data) {
-      this.switchMain('DsForm', { type: data.id }, this.tData, this.dsTypes)
+      if (this.showView === 'Driver') {
+        this.driverForm.type = data.id
+        this.dialogTitle = this.$t('driver.driver')
+        // this.editDriver = false
+        this.editDriver = true
+        // this.switchMain(switchMain'DriverForm', {}, this.tData, this.dsTypes)
+      } else {
+        this.switchMain('DsForm', {type: data.id}, this.tData, this.dsTypes)
+      }
     },
     nodeClick(node, data) {
       if (node.type === 'folder') return
@@ -231,7 +329,7 @@ export default {
     },
 
     clickFileMore(param) {
-      const { optType, data } = param
+      const {optType, data} = param
       switch (optType) {
         case 'edit':
           this.edit(data)
@@ -244,14 +342,18 @@ export default {
       }
     },
     beforeClickFile(optType, data, node) {
-      return { optType, data, node }
+      return {optType, data, node}
     },
     edit(row) {
       this.switchMain('DsForm', row, this.tData, this.dsTypes)
     },
     showInfo(row) {
-      const param = { ...row.data, ...{ showModel: 'show' }}
+      const param = {...row.data, ...{showModel: 'show'}}
-      this.switchMain('DsForm', param, this.tData, this.dsTypes)
+      if (this.showView === 'Datasource') {
+        this.switchMain('DsForm', param, this.tData, this.dsTypes)
+      } else {
+        this.switchMain('DriverForm', param, this.tData, this.dsTypes)
+      }
     },
     _handleDelete(datasource) {
       this.$confirm(this.$t('datasource.delete_warning'), '', {
@@ -259,8 +361,9 @@ export default {
         cancelButtonText: this.$t('commons.cancel'),
         type: 'warning'
       }).then(() => {
-        const parma = { type: datasource.type, id: datasource.id }
+        const parma = {type: datasource.type, id: datasource.id}
-        delDs(parma).then(res => {
+        const method = this.showView === 'Datasource' ? delDs : delDriver
+        method(parma).then(res => {
           if (res.success) {
             this.$success(this.$t('commons.delete_success'))
             this.switchMain('DataHome', {}, this.tData, this.dsTypes)
@@ -301,7 +404,33 @@ export default {
           })
         })
       })
-    }
+    },
+    close() {
+      this.$refs['driverForm'].resetFields()
+      this.editDriver = false
+      this.driverForm = {
+        name: '',
+        desc: '',
+        type: ''
+      }
+    },
+    saveDriver(driverForm) {
+      this.$refs['driverForm'].validate((valid) => {
+        if (valid) {
+          addDriver(driverForm).then(res => {
+            this.$message({
+              message: this.$t('dataset.save_success'),
+              type: 'success',
+              showClose: true
+            })
+            this.refreshType(driverForm)
+            this.close()
+          })
+        } else {
+          return false
+        }
+      })
+    },
   }
 }
 </script>

frontend/src/views/system/plugin/index.vue

@@ -8,7 +8,6 @@
       @search="search"
     >
       <template #toolbar>
-
         <el-upload
           :action="baseUrl+'api/plugin/upload'"
           :multiple="false"