forked from github/dataease
Merge remote-tracking branch 'origin/dev' into dev
This commit is contained in:
commit
b279dd9660
@ -3,6 +3,7 @@ package io.dataease.provider.datasource;
|
||||
import com.alibaba.druid.pool.DruidDataSource;
|
||||
import com.alibaba.druid.pool.DruidPooledConnection;
|
||||
import com.google.gson.Gson;
|
||||
import io.dataease.commons.utils.LogUtil;
|
||||
import io.dataease.dto.datasource.*;
|
||||
import io.dataease.exception.DataEaseException;
|
||||
import io.dataease.i18n.Translator;
|
||||
@ -31,13 +32,15 @@ public class JdbcProvider extends DefaultJdbcProvider {
|
||||
|
||||
@Resource
|
||||
private DeDriverMapper deDriverMapper;
|
||||
|
||||
@Override
|
||||
public boolean isUseDatasourcePool(){
|
||||
public boolean isUseDatasourcePool() {
|
||||
return true;
|
||||
}
|
||||
|
||||
@Override
|
||||
public String getType(){
|
||||
return "built-in";
|
||||
public String getType() {
|
||||
return "built-in";
|
||||
}
|
||||
/**
|
||||
* 增加缓存机制 key 由 'provider_sql_' dsr.datasource.id dsr.table dsr.query共4部分组成,命中则使用缓存直接返回不再执行sql逻辑
|
||||
@ -69,14 +72,14 @@ public class JdbcProvider extends DefaultJdbcProvider {
|
||||
|
||||
@Override
|
||||
public List<TableField> getTableFileds(DatasourceRequest datasourceRequest) throws Exception {
|
||||
if(datasourceRequest.getDatasource().getType().equalsIgnoreCase("mongo")){
|
||||
if (datasourceRequest.getDatasource().getType().equalsIgnoreCase("mongo")) {
|
||||
datasourceRequest.setQuery("select * from " + datasourceRequest.getTable());
|
||||
return fetchResultField(datasourceRequest);
|
||||
}
|
||||
List<TableField> list = new LinkedList<>();
|
||||
try (Connection connection = getConnectionFromPool(datasourceRequest)) {
|
||||
if (datasourceRequest.getDatasource().getType().equalsIgnoreCase("oracle")) {
|
||||
Method setRemarksReporting = extendedJdbcClassLoader.loadClass("oracle.jdbc.driver.OracleConnection").getMethod("setRemarksReporting",boolean.class);
|
||||
Method setRemarksReporting = extendedJdbcClassLoader.loadClass("oracle.jdbc.driver.OracleConnection").getMethod("setRemarksReporting", boolean.class);
|
||||
setRemarksReporting.invoke(((DruidPooledConnection) connection).getConnection(), true);
|
||||
}
|
||||
DatabaseMetaData databaseMetaData = connection.getMetaData();
|
||||
@ -105,10 +108,10 @@ public class JdbcProvider extends DefaultJdbcProvider {
|
||||
} catch (SQLException e) {
|
||||
DataEaseException.throwException(e);
|
||||
} catch (Exception e) {
|
||||
if(datasourceRequest.getDatasource().getType().equalsIgnoreCase("ds_doris")){
|
||||
if (datasourceRequest.getDatasource().getType().equalsIgnoreCase("ds_doris")) {
|
||||
datasourceRequest.setQuery("select * from " + datasourceRequest.getTable());
|
||||
return fetchResultField(datasourceRequest);
|
||||
}else {
|
||||
} else {
|
||||
DataEaseException.throwException(Translator.get("i18n_datasource_connect_error") + e.getMessage());
|
||||
}
|
||||
|
||||
@ -210,9 +213,9 @@ public class JdbcProvider extends DefaultJdbcProvider {
|
||||
|
||||
private List<String[]> getDataResult(ResultSet rs, DatasourceRequest datasourceRequest) throws Exception {
|
||||
String charset = null;
|
||||
if(datasourceRequest != null && datasourceRequest.getDatasource().getType().equalsIgnoreCase("oracle")){
|
||||
if (datasourceRequest != null && datasourceRequest.getDatasource().getType().equalsIgnoreCase("oracle")) {
|
||||
JdbcConfiguration JdbcConfiguration = new Gson().fromJson(datasourceRequest.getDatasource().getConfiguration(), JdbcConfiguration.class);
|
||||
if(StringUtils.isNotEmpty(JdbcConfiguration.getCharset()) && !JdbcConfiguration.getCharset().equalsIgnoreCase("Default") ){
|
||||
if (StringUtils.isNotEmpty(JdbcConfiguration.getCharset()) && !JdbcConfiguration.getCharset().equalsIgnoreCase("Default")) {
|
||||
charset = JdbcConfiguration.getCharset();
|
||||
}
|
||||
}
|
||||
@ -233,9 +236,9 @@ public class JdbcProvider extends DefaultJdbcProvider {
|
||||
row[j] = rs.getBoolean(j + 1) ? "1" : "0";
|
||||
break;
|
||||
default:
|
||||
if(charset != null && StringUtils.isNotEmpty(rs.getString(j + 1))){
|
||||
if (charset != null && StringUtils.isNotEmpty(rs.getString(j + 1))) {
|
||||
row[j] = new String(rs.getString(j + 1).getBytes(charset), "UTF-8");
|
||||
}else {
|
||||
} else {
|
||||
row[j] = rs.getString(j + 1);
|
||||
}
|
||||
break;
|
||||
@ -278,6 +281,7 @@ public class JdbcProvider extends DefaultJdbcProvider {
|
||||
}
|
||||
return fieldList;
|
||||
}
|
||||
|
||||
@Override
|
||||
public List<String[]> getData(DatasourceRequest dsr) throws Exception {
|
||||
List<String[]> list = new LinkedList<>();
|
||||
@ -296,6 +300,17 @@ public class JdbcProvider extends DefaultJdbcProvider {
|
||||
return list;
|
||||
}
|
||||
|
||||
@Override
|
||||
public String checkStatus(DatasourceRequest datasourceRequest) throws Exception {
|
||||
String queryStr = getTablesSql(datasourceRequest);
|
||||
try (Connection con = getConnection(datasourceRequest); Statement statement = con.createStatement(); ResultSet resultSet = statement.executeQuery(queryStr)) {
|
||||
} catch (Exception e) {
|
||||
LogUtil.error("Datasource is invalid: " + datasourceRequest.getDatasource().getName() , e);
|
||||
io.dataease.plugins.common.exception.DataEaseException.throwException(e.getMessage());
|
||||
}
|
||||
return "Success";
|
||||
}
|
||||
|
||||
@Override
|
||||
public Connection getConnection(DatasourceRequest datasourceRequest) throws Exception {
|
||||
String username = null;
|
||||
@ -376,26 +391,26 @@ public class JdbcProvider extends DefaultJdbcProvider {
|
||||
customDriver = hiveConfiguration.getCustomDriver();
|
||||
jdbcurl = hiveConfiguration.getJdbc();
|
||||
|
||||
if(StringUtils.isNotEmpty(hiveConfiguration.getAuthMethod()) && hiveConfiguration.getAuthMethod().equalsIgnoreCase("kerberos")){
|
||||
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)){
|
||||
if (isDefaultClassLoader(customDriver)) {
|
||||
classLoader = extendedJdbcClassLoader;
|
||||
}else {
|
||||
} 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) ;
|
||||
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) ;
|
||||
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 {
|
||||
} else {
|
||||
username = hiveConfiguration.getUsername();
|
||||
password = hiveConfiguration.getPassword();
|
||||
}
|
||||
@ -428,12 +443,12 @@ public class JdbcProvider extends DefaultJdbcProvider {
|
||||
}
|
||||
|
||||
Connection conn;
|
||||
String driverClassName ;
|
||||
String driverClassName;
|
||||
ExtendedJdbcClassLoader jdbcClassLoader;
|
||||
if(isDefaultClassLoader(customDriver)){
|
||||
if (isDefaultClassLoader(customDriver)) {
|
||||
driverClassName = defaultDriver;
|
||||
jdbcClassLoader = extendedJdbcClassLoader;
|
||||
}else {
|
||||
} else {
|
||||
driverClassName = deDriver.getDriverClass();
|
||||
jdbcClassLoader = getCustomJdbcClassLoader(deDriver);
|
||||
}
|
||||
@ -442,11 +457,11 @@ public class JdbcProvider extends DefaultJdbcProvider {
|
||||
ClassLoader classLoader = Thread.currentThread().getContextClassLoader();
|
||||
try {
|
||||
Thread.currentThread().setContextClassLoader(jdbcClassLoader);
|
||||
conn= driverClass.connect(jdbcurl, props);
|
||||
}catch (Exception e){
|
||||
conn = driverClass.connect(jdbcurl, props);
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
throw e;
|
||||
}finally {
|
||||
} finally {
|
||||
Thread.currentThread().setContextClassLoader(classLoader);
|
||||
}
|
||||
return conn;
|
||||
@ -454,7 +469,7 @@ public class JdbcProvider extends DefaultJdbcProvider {
|
||||
|
||||
|
||||
@Override
|
||||
public JdbcConfiguration setCredential(DatasourceRequest datasourceRequest, DruidDataSource dataSource) throws Exception{
|
||||
public JdbcConfiguration setCredential(DatasourceRequest datasourceRequest, DruidDataSource dataSource) throws Exception {
|
||||
DatasourceTypes datasourceType = DatasourceTypes.valueOf(datasourceRequest.getDatasource().getType());
|
||||
JdbcConfiguration jdbcConfiguration = new JdbcConfiguration();
|
||||
switch (datasourceType) {
|
||||
@ -537,9 +552,9 @@ public class JdbcProvider extends DefaultJdbcProvider {
|
||||
dataSource.setUsername(jdbcConfiguration.getUsername());
|
||||
|
||||
ExtendedJdbcClassLoader classLoader;
|
||||
if(isDefaultClassLoader(jdbcConfiguration.getCustomDriver())){
|
||||
if (isDefaultClassLoader(jdbcConfiguration.getCustomDriver())) {
|
||||
classLoader = extendedJdbcClassLoader;
|
||||
}else {
|
||||
} else {
|
||||
DeDriver deDriver = deDriverMapper.selectByPrimaryKey(jdbcConfiguration.getCustomDriver());
|
||||
classLoader = getCustomJdbcClassLoader(deDriver);
|
||||
}
|
||||
@ -667,7 +682,7 @@ public class JdbcProvider extends DefaultJdbcProvider {
|
||||
case sqlServer:
|
||||
return "select name from sys.schemas;";
|
||||
case db2:
|
||||
return "select SCHEMANAME from syscat.SCHEMATA WHERE \"DEFINER\" ='USER'".replace("USER", db2Configuration.getUsername().toUpperCase()) ;
|
||||
return "select SCHEMANAME from syscat.SCHEMATA WHERE \"DEFINER\" ='USER'".replace("USER", db2Configuration.getUsername().toUpperCase());
|
||||
case pg:
|
||||
return "SELECT nspname FROM pg_namespace;";
|
||||
case redshift:
|
||||
|
@ -228,6 +228,7 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'custom',
|
||||
'alpha'
|
||||
],
|
||||
'size-selector-ant-v': [
|
||||
@ -265,6 +266,7 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'custom',
|
||||
'alpha'
|
||||
],
|
||||
'size-selector-ant-v': [
|
||||
@ -307,6 +309,8 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'colorPanel',
|
||||
'customColor',
|
||||
'alpha'
|
||||
],
|
||||
'size-selector-ant-v': [
|
||||
@ -378,6 +382,8 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'colorPanel',
|
||||
'customColor',
|
||||
'alpha'
|
||||
],
|
||||
'size-selector-ant-v': [
|
||||
@ -450,6 +456,8 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'colorPanel',
|
||||
'customColor',
|
||||
'alpha'
|
||||
],
|
||||
'size-selector-ant-v': [
|
||||
@ -520,6 +528,8 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'colorPanel',
|
||||
'customColor',
|
||||
'alpha'
|
||||
],
|
||||
'size-selector-ant-v': [
|
||||
@ -588,6 +598,7 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'custom',
|
||||
'alpha'
|
||||
],
|
||||
'label-selector-ant-v': [
|
||||
@ -647,6 +658,8 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'colorPanel',
|
||||
'customColor',
|
||||
'alpha'
|
||||
],
|
||||
'size-selector-ant-v': [
|
||||
@ -718,6 +731,8 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'colorPanel',
|
||||
'customColor',
|
||||
'alpha'
|
||||
],
|
||||
'size-selector-ant-v': [
|
||||
@ -788,6 +803,8 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'colorPanel',
|
||||
'customColor',
|
||||
'alpha'
|
||||
],
|
||||
'size-selector-ant-v': [
|
||||
@ -838,6 +855,8 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'colorPanel',
|
||||
'customColor',
|
||||
'alpha'
|
||||
],
|
||||
'size-selector-ant-v': [
|
||||
@ -888,6 +907,8 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'colorPanel',
|
||||
'customColor',
|
||||
'alpha'
|
||||
],
|
||||
'size-selector-ant-v': [
|
||||
@ -937,6 +958,7 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'custom',
|
||||
'alpha'
|
||||
],
|
||||
'label-selector-ant-v': [
|
||||
@ -1015,6 +1037,8 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'colorPanel',
|
||||
'customColor',
|
||||
'alpha'
|
||||
],
|
||||
'size-selector-ant-v': [
|
||||
@ -1081,6 +1105,8 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'colorPanel',
|
||||
'customColor',
|
||||
'alpha'
|
||||
],
|
||||
'label-selector-ant-v': [
|
||||
@ -1269,6 +1295,7 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'custom',
|
||||
'alpha'
|
||||
],
|
||||
'size-selector': [
|
||||
@ -1317,6 +1344,7 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'custom',
|
||||
'alpha'
|
||||
],
|
||||
'size-selector': [
|
||||
@ -1390,6 +1418,7 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'custom',
|
||||
'alpha'
|
||||
],
|
||||
'size-selector': [
|
||||
@ -1464,6 +1493,7 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'custom',
|
||||
'alpha'
|
||||
],
|
||||
'size-selector': [
|
||||
@ -1552,6 +1582,7 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'custom',
|
||||
'alpha'
|
||||
],
|
||||
'size-selector': [
|
||||
@ -1625,6 +1656,7 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'custom',
|
||||
'alpha'
|
||||
],
|
||||
'size-selector': [
|
||||
@ -1698,6 +1730,7 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'custom',
|
||||
'alpha'
|
||||
],
|
||||
'size-selector': [
|
||||
@ -1772,6 +1805,7 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'custom',
|
||||
'alpha'
|
||||
],
|
||||
'size-selector': [
|
||||
@ -1846,6 +1880,7 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'custom',
|
||||
'alpha'
|
||||
],
|
||||
'size-selector': [
|
||||
@ -1903,6 +1938,7 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'custom',
|
||||
'alpha'
|
||||
],
|
||||
'size-selector': [
|
||||
@ -1962,6 +1998,7 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'custom',
|
||||
'alpha'
|
||||
],
|
||||
'size-selector': [
|
||||
@ -2024,6 +2061,7 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'custom',
|
||||
'alpha'
|
||||
],
|
||||
'size-selector': [
|
||||
@ -2074,6 +2112,7 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'custom',
|
||||
'alpha'
|
||||
],
|
||||
'size-selector': [
|
||||
@ -2144,6 +2183,7 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'custom',
|
||||
'alpha'
|
||||
],
|
||||
'size-selector': [
|
||||
@ -2199,6 +2239,7 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'value',
|
||||
'custom',
|
||||
'alpha'
|
||||
],
|
||||
'size-selector': [
|
||||
|
@ -3,14 +3,14 @@
|
||||
<el-col>
|
||||
<el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
|
||||
<div>
|
||||
<el-form-item v-show="showProperty('value')" :label="$t('chart.color_case')" class="form-item">
|
||||
<el-form-item :label="$t('chart.color_case')" class="form-item">
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
width="400"
|
||||
trigger="click"
|
||||
>
|
||||
<div style="padding: 6px 10px;">
|
||||
<div>
|
||||
<div v-show="showProperty('value')">
|
||||
<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('value')">
|
||||
<el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
|
||||
@ -22,23 +22,58 @@
|
||||
</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">{{ $t('chart.custom_case') }}</span>
|
||||
<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>
|
||||
<!--自定义配色方案-->
|
||||
<div
|
||||
v-show="showProperty('custom')"
|
||||
>
|
||||
<div style="display: flex;align-items: center;margin-top: 10px;">
|
||||
<span class="color-label">{{ $t('chart.custom_case') }}</span>
|
||||
<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>
|
||||
</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>
|
||||
<div style="display: flex;align-items: center;margin-top: 10px;">
|
||||
<!--自定义系列或维度枚举值颜色-->
|
||||
<div v-show="showProperty('colorPanel')" 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 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>
|
||||
|
||||
<div
|
||||
v-if="!batchOptStatus"
|
||||
v-show="showProperty('customColor')"
|
||||
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 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>
|
||||
@ -81,6 +116,8 @@
|
||||
|
||||
<script>
|
||||
import { COLOR_PANEL, DEFAULT_COLOR_CASE } from '../../chart/chart'
|
||||
import { getColors } from '@/views/chart/chart/util'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'ColorSelector',
|
||||
@ -209,6 +246,11 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState([
|
||||
'batchOptStatus'
|
||||
])
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
@ -227,6 +269,10 @@ export default {
|
||||
this.customColor = this.colorForm.colors[0]
|
||||
this.colorIndex = 0
|
||||
|
||||
// reset custom color
|
||||
this.colorForm.seriesColors = []
|
||||
this.initCustomColor(true)
|
||||
|
||||
this.changeColorCase(modifyName)
|
||||
},
|
||||
changeColorCase(modifyName) {
|
||||
@ -254,6 +300,8 @@ export default {
|
||||
}
|
||||
|
||||
this.colorForm.tableBorderColor = this.colorForm.tableBorderColor ? this.colorForm.tableBorderColor : DEFAULT_COLOR_CASE.tableBorderColor
|
||||
|
||||
this.initCustomColor()
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -273,6 +321,24 @@ export default {
|
||||
},
|
||||
showProperty(property) {
|
||||
return this.propertyInner.includes(property)
|
||||
},
|
||||
|
||||
switchCustomColor(index) {
|
||||
this.colorForm.seriesColors[index].isCustom = true
|
||||
this.switchColorCase()
|
||||
},
|
||||
|
||||
initCustomColor(reset) {
|
||||
if (!this.batchOptStatus && this.chart.render && this.chart.render === 'antv' &&
|
||||
(this.chart.type.includes('bar') ||
|
||||
this.chart.type.includes('line') ||
|
||||
this.chart.type.includes('pie') ||
|
||||
this.chart.type === 'funnel' ||
|
||||
this.chart.type === 'radar' ||
|
||||
this.chart.type === 'scatter')) {
|
||||
const chart = JSON.parse(JSON.stringify(this.chart))
|
||||
this.colorForm.seriesColors = getColors(chart, this.colorForm.colors, reset)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -326,4 +392,19 @@ export default {
|
||||
.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>
|
||||
|
@ -1282,6 +1282,7 @@ export default {
|
||||
this.resetDrill()
|
||||
this.initFromPanel()
|
||||
this.getChart(this.param.id)
|
||||
this.getData(this.param.id)
|
||||
},
|
||||
bindPluginEvent() {
|
||||
bus.$on('show-dimension-edit-filter', this.showDimensionEditFilter)
|
||||
|
Loading…
Reference in New Issue
Block a user