center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge branch 'dev-v2' into pr@dev-v2@feat_platform_config

Browse Source
This commit is contained in:
fit2cloud-chenyw 2024-05-22 17:14:35 +08:00
commit ecaf1a4fd3
30 changed files with 777 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
core/core-backend/src/main/java/io/dataease/chart/manage/ChartDataManage.java
View File

@ -115,7 +115,9 @@ public class ChartDataManage {
if (StringUtils.equalsIgnoreCase(view.getType(), "table-pivot")
|| StringUtils.containsIgnoreCase(view.getType(), "group")
|| ("antv".equalsIgnoreCase(view.getRender()) && "line".equalsIgnoreCase(view.getType()))
|| StringUtils.equalsIgnoreCase(view.getType(), "flow-map")) {
|| StringUtils.equalsIgnoreCase(view.getType(), "flow-map")
|| StringUtils.equalsIgnoreCase(view.getType(), "sankey")
) {
xAxis.addAll(xAxisExt);
}
List<ChartViewFieldDTO> yAxis = new ArrayList<>(view.getYAxis());

25
core/core-backend/src/main/java/io/dataease/datasource/provider/ApiUtils.java
View File

@ -59,7 +59,7 @@ public class ApiUtils {
if (apiDefinition == null) {
DEException.throwException("未找到");
}
String response = execHttpRequest(apiDefinition, 10);
String response = execHttpRequest(apiDefinition, apiDefinition.getApiQueryTimeout() == null || apiDefinition.getApiQueryTimeout() <= 0 ? 10 : apiDefinition.getApiQueryTimeout());
fieldList = getTableFields(apiDefinition);
result.put("fieldList", fieldList);
dataList = fetchResult(response, apiDefinition);
@ -116,7 +116,7 @@ public class ApiUtils {
if (apiDefinition == null) {
DEException.throwException("未找到");
}
String response = execHttpRequest(apiDefinition, 10);
String response = execHttpRequest(apiDefinition, apiDefinition.getApiQueryTimeout() == null || apiDefinition.getApiQueryTimeout() <= 0 ? 10 : apiDefinition.getApiQueryTimeout());
return fetchResult(response, apiDefinition);
}
@ -194,6 +194,26 @@ public class ApiUtils {
return response;
}
private static void previewNum(List<Map<String, Object>> field){
for (Map<String, Object> stringObjectMap : field) {
JSONArray newArray = new JSONArray();
if (stringObjectMap.get("value") != null) {
try {
TypeReference<JSONArray> listTypeReference = new TypeReference<JSONArray>() {
};
JSONArray array = objectMapper.readValue(stringObjectMap.get("value").toString(), listTypeReference);
if(array.size() > 100){
for (int i = 0; i < Math.min(100, array.size()); i++) {
newArray.add(array.get(i));
}
stringObjectMap.put("value", newArray);
}
} catch (Exception e) {
}
}
}
}
public static ApiDefinition checkApiDefinition(ApiDefinition apiDefinition, String response) throws DEException {
if (StringUtils.isEmpty(response)) {
@ -217,6 +237,7 @@ public class ApiUtils {
rootPath = "$";
handleStr(apiDefinition, response, fields, rootPath);
}
previewNum(fields);
apiDefinition.setJsonFields(fields);
return apiDefinition;
} else {

90
core/core-backend/src/main/java/io/dataease/datasource/provider/CalciteProvider.java
View File

@ -117,7 +117,11 @@ public class CalciteProvider {
tableDesc.setDatasourceId(datasourceRequest.getDatasource().getId());
tableDesc.setType("db");
tableDesc.setTableName(resultSet.getString(1));
tableDesc.setName(resultSet.getString(1));
if(resultSet.getMetaData().getColumnCount() > 1){
tableDesc.setName(resultSet.getString(2));
}else {
tableDesc.setName(resultSet.getString(1));
}
return tableDesc;
}
@ -315,6 +319,7 @@ public class CalciteProvider {
private String getTableFiledSql(DatasourceRequest datasourceRequest) {
String sql = "";
DatasourceConfiguration configuration = null;
String database="";
DatasourceType datasourceType = DatasourceType.valueOf(datasourceRequest.getDatasource().getType());
switch (datasourceType) {
case mysql:
@ -324,7 +329,16 @@ public class CalciteProvider {
case StarRocks:
case doris:
configuration = JsonUtil.parseObject(datasourceRequest.getDatasource().getConfiguration(), Mysql.class);
sql = String.format("SELECT COLUMN_NAME,DATA_TYPE,COLUMN_COMMENT FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_SCHEMA = '%s' AND TABLE_NAME = '%s'", configuration.getDataBase(), datasourceRequest.getTable());
if (StringUtils.isEmpty(configuration.getUrlType()) || configuration.getUrlType().equalsIgnoreCase("hostName")) {
database = configuration.getDataBase();
} else {
Pattern WITH_SQL_FRAGMENT = Pattern.compile("jdbc:mysql://(.*):(\\d+)/(.*)");
Matcher matcher = WITH_SQL_FRAGMENT.matcher(configuration.getJdbcUrl());
matcher.find();
String[] databasePrams = matcher.group(3).split("\\?");
database = databasePrams[0];
}
sql = String.format("SELECT COLUMN_NAME,DATA_TYPE,COLUMN_COMMENT FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_SCHEMA = '%s' AND TABLE_NAME = '%s'", database, datasourceRequest.getTable());
break;
case oracle:
configuration = JsonUtil.parseObject(datasourceRequest.getDatasource().getConfiguration(), Oracle.class);
@ -396,6 +410,16 @@ public class CalciteProvider {
break;
case ck:
configuration = JsonUtil.parseObject(datasourceRequest.getDatasource().getConfiguration(), CK.class);
if (StringUtils.isEmpty(configuration.getUrlType()) || configuration.getUrlType().equalsIgnoreCase("hostName")) {
database = configuration.getDataBase();
} else {
Pattern WITH_SQL_FRAGMENT = Pattern.compile("jdbc:clickhouse://(.*):(\\d+)/(.*)");
Matcher matcher = WITH_SQL_FRAGMENT.matcher(configuration.getJdbcUrl());
matcher.find();
String[] databasePrams = matcher.group(3).split("\\?");
database = databasePrams[0];
}
sql = String.format(" SELECT\n" +
" name,\n" +
" type,\n" +
@ -404,7 +428,7 @@ public class CalciteProvider {
" system.columns\n" +
"WHERE\n" +
" database = '%s' \n" +
" AND table = '%s' ", configuration.getDataBase(), datasourceRequest.getTable());
" AND table = '%s' ", database, datasourceRequest.getTable());
break;
case impala:
sql = String.format("DESCRIBE `%s`", datasourceRequest.getTable());
@ -742,7 +766,7 @@ public class CalciteProvider {
case StarRocks:
case doris:
configuration = JsonUtil.parseObject(datasourceRequest.getDatasource().getConfiguration(), Mysql.class);
if (configuration.getUrlType().equalsIgnoreCase("")) {
if (StringUtils.isEmpty(configuration.getUrlType()) || configuration.getUrlType().equalsIgnoreCase("hostName")) {
database = configuration.getDataBase();
} else {
Pattern WITH_SQL_FRAGMENT = Pattern.compile("jdbc:mysql://(.*):(\\d+)/(.*)");
@ -758,42 +782,76 @@ public class CalciteProvider {
if (StringUtils.isEmpty(configuration.getSchema())) {
DEException.throwException(Translator.get("i18n_schema_is_empty"));
}
tableSqls.add("select table_name, owner, comments from all_tab_comments where owner='" + configuration.getSchema() + "' AND table_type = 'TABLE'");
tableSqls.add("select table_name, owner, comments from all_tab_comments where owner='" + configuration.getSchema() + "' AND table_type = 'VIEW'");
tableSqls.add("select table_name, comments, owner from all_tab_comments where owner='" + configuration.getSchema() + "' AND table_type = 'TABLE'");
tableSqls.add("select table_name, comments, owner from all_tab_comments where owner='" + configuration.getSchema() + "' AND table_type = 'VIEW'");
break;
case db2:
configuration = JsonUtil.parseObject(datasourceRequest.getDatasource().getConfiguration(), Db2.class);
if (StringUtils.isEmpty(configuration.getSchema())) {
DEException.throwException(Translator.get("i18n_schema_is_empty"));
}
tableSqls.add("select TABNAME from syscat.tables WHERE TABSCHEMA ='DE_SCHEMA' AND \"TYPE\" = 'T'".replace("DE_SCHEMA", configuration.getSchema()));
tableSqls.add("select TABNAME, REMARKS from syscat.tables WHERE TABSCHEMA ='DE_SCHEMA' AND \"TYPE\" = 'T'".replace("DE_SCHEMA", configuration.getSchema()));
break;
case sqlServer:
configuration = JsonUtil.parseObject(datasourceRequest.getDatasource().getConfiguration(), Sqlserver.class);
if (StringUtils.isEmpty(configuration.getSchema())) {
DEException.throwException(Translator.get("i18n_schema_is_empty"));
}
tableSqls.add("SELECT TABLE_NAME FROM \"DATABASE\".INFORMATION_SCHEMA.VIEWS WHERE TABLE_SCHEMA = 'DS_SCHEMA' ;"
.replace("DATABASE", configuration.getDataBase())
.replace("DS_SCHEMA", configuration.getSchema()));
tableSqls.add("SELECT TABLE_NAME FROM \"DATABASE\".INFORMATION_SCHEMA.TABLES WHERE TABLE_TYPE = 'BASE TABLE' AND TABLE_SCHEMA = 'DS_SCHEMA' ;"
.replace("DATABASE", configuration.getDataBase())
tableSqls.add("SELECT \n" +
" t.name AS TableName, \n" +
" ep.value AS TableDescription \n" +
"FROM \n" +
" sys.tables t \n" +
"LEFT OUTER JOIN sys.schemas sc ON sc.schema_id =t.schema_id \n" +
"LEFT OUTER JOIN \n" +
" sys.extended_properties ep ON t.object_id = ep.major_id \n" +
" AND ep.minor_id = 0 \n" +
" AND ep.class = 1 \n" +
" AND ep.name = 'MS_Description'\n" +
"where sc.name ='DS_SCHEMA'"
.replace("DS_SCHEMA", configuration.getSchema()));
tableSqls.add("SELECT \n" +
" t.name AS TableName, \n" +
" ep.value AS TableDescription \n" +
"FROM \n" +
" sys.views t \n" +
"LEFT OUTER JOIN sys.schemas sc ON sc.schema_id =t.schema_id \n" +
"LEFT OUTER JOIN \n" +
" sys.extended_properties ep ON t.object_id = ep.major_id \n" +
" AND ep.minor_id = 0 \n" +
" AND ep.class = 1 \n" +
" AND ep.name = 'MS_Description'\n" +
"where sc.name ='DS_SCHEMA'"
.replace("DS_SCHEMA", configuration.getSchema()));
break;
case pg:
configuration = JsonUtil.parseObject(datasourceRequest.getDatasource().getConfiguration(), Pg.class);
if (StringUtils.isEmpty(configuration.getSchema())) {
DEException.throwException(Translator.get("i18n_schema_is_empty"));
}
tableSqls.add("SELECT tablename FROM pg_tables WHERE schemaname='SCHEMA' ;".replace("SCHEMA", configuration.getSchema()));
tableSqls.add("SELECT \n" +
" relname AS TableName, \n" +
" obj_description(relfilenode::regclass, 'pg_class') AS TableDescription \n" +
"FROM \n" +
" pg_class \n" +
"WHERE \n" +
" relkind = 'r' \n" +
" AND relnamespace = (SELECT oid FROM pg_namespace WHERE nspname = 'SCHEMA') ".replace("SCHEMA", configuration.getSchema()));
break;
case redshift:
configuration = JsonUtil.parseObject(datasourceRequest.getDatasource().getConfiguration(), CK.class);
tableSqls.add("SELECT tablename FROM pg_tables WHERE schemaname='SCHEMA' ;".replace("SCHEMA", configuration.getSchema()));
tableSqls.add("SELECT \n" +
" relname AS TableName, \n" +
" obj_description(relfilenode::regclass, 'pg_class') AS TableDescription \n" +
"FROM \n" +
" pg_class \n" +
"WHERE \n" +
" relkind = 'r' \n" +
" AND relnamespace = (SELECT oid FROM pg_namespace WHERE nspname = 'SCHEMA') ".replace("SCHEMA", configuration.getSchema()));
break;
case ck:
configuration = JsonUtil.parseObject(datasourceRequest.getDatasource().getConfiguration(), CK.class);
if (configuration.getUrlType().equalsIgnoreCase("")) {
if (StringUtils.isEmpty(configuration.getUrlType()) || configuration.getUrlType().equalsIgnoreCase("hostName")) {
database = configuration.getDataBase();
} else {
Pattern WITH_SQL_FRAGMENT = Pattern.compile("jdbc:clickhouse://(.*):(\\d+)/(.*)");
@ -802,7 +860,7 @@ public class CalciteProvider {
String[] databasePrams = matcher.group(3).split("\\?");
database = databasePrams[0];
}
tableSqls.add("SELECT name FROM system.tables where database='DATABASE';".replace("DATABASE", database));
tableSqls.add("SELECT name, comment FROM system.tables where database='DATABASE';".replace("DATABASE", database));
break;
default:

6
core/core-backend/src/main/java/io/dataease/datasource/server/DatasourceServer.java
View File

@ -493,6 +493,9 @@ public class DatasourceServer implements DatasourceApi {
public DatasourceDTO get(Long datasourceId) throws DEException {
DatasourceDTO datasourceDTO = new DatasourceDTO();
CoreDatasource datasource = datasourceMapper.selectById(datasourceId);
if(datasource == null){
DEException.throwException("不存在的数据源！");
}
BeanUtils.copyBean(datasourceDTO, datasource);
TypeReference<List<ApiDefinition>> listTypeReference = new TypeReference<List<ApiDefinition>>() {
};
@ -834,10 +837,11 @@ public class DatasourceServer implements DatasourceApi {
public ApiDefinition checkApiDatasource(Map<String, String> request) throws DEException {
ApiDefinition apiDefinition = JsonUtil.parseObject(new String(java.util.Base64.getDecoder().decode(request.get("data"))), ApiDefinition.class);
String response = ApiUtils.execHttpRequest(apiDefinition, 10);
String response = ApiUtils.execHttpRequest(apiDefinition, apiDefinition.getApiQueryTimeout() == null || apiDefinition.getApiQueryTimeout() <= 0 ? 10 : apiDefinition.getApiQueryTimeout());
if (request.keySet().contains("type") && request.get("type").equals("apiStructure")) {
apiDefinition.setShowApiStructure(true);
}
ApiUtils.checkApiDefinition(apiDefinition, response);
if (apiDefinition.getRequest().getAuthManager() != null && StringUtils.isNotBlank(apiDefinition.getRequest().getAuthManager().getUsername()) && StringUtils.isNotBlank(apiDefinition.getRequest().getAuthManager().getPassword()) && apiDefinition.getRequest().getAuthManager().getVerification().equals("Basic Auth")) {
apiDefinition.getRequest().getAuthManager().setUsername(new String(Base64.getEncoder().encode(apiDefinition.getRequest().getAuthManager().getUsername().getBytes())));

5
core/core-frontend/src/assets/svg/sankey.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="80" height="56" viewBox="0 0 80 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 32.7862C35.0501 32.7862 43.9248 11.0972 67.002 10.375C67.0341 17.043 66.8736 16.9467 67.002 23.2296C45.7703 23.2296 43.0421 45.6408 13 45.6408C13.0642 40.0801 13.0963 40.0159 13 32.7862Z" fill="#00D6B9"/>
<path d="M13 27.4899C34.6891 27.1288 37.1926 46.0576 67.002 47.9994C67.0341 41.0987 66.8736 51.4819 67.002 44.9744C38.7974 42.3826 36.4624 24.4648 13 24.4648C13.0642 30.2502 13.0963 20.0275 13 27.4899Z" fill="#3370FF"/>
<path d="M13 20.9829C35.0501 20.9829 43.9247 40.2086 67.002 40.9629C67.8204 33.2036 66.8736 34.327 67.002 27.9799C45.7703 27.9799 43.0421 8 13 8C13.0642 13.6249 13.0963 13.7212 13 20.9829Z" fill="#3370FF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 748 B

7
core/core-frontend/src/components/dashboard/DbCanvasAttr.vue
View File

@ -146,13 +146,6 @@ const saveSelfSubject = () => {
>
<filter-style-simple-selector />
</el-collapse-item>
<el-collapse-item
:title="t('visualization.filter_component')"
name="filterComponent"
class="no-padding no-border-bottom"
>
<filter-style-simple-selector />
</el-collapse-item>
<el-collapse-item
title="高级样式设置"
name="seniorStyleSetting"

25
core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue
View File

@ -158,6 +158,21 @@
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="分页器配色" class="form-item">
<el-color-picker
:trigger-width="colorPickerWidth"
v-model="seniorForm.pagerColor"
size="small"
:predefine="predefineColors"
color-format="rgb"
:effect="themes"
show-alpha
is-custom
@change="changePagerColorChange"
/>
</el-form-item>
</el-col>
</el-row>
</div>
</el-collapse-item>
@ -174,7 +189,10 @@ import eventBus from '@/utils/eventBus'
import { storeToRefs } from 'pinia'
import CustomColorStyleSelect from '@/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue'
import elementResizeDetectorMaker from 'element-resize-detector'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
const { t } = useI18n()
const snapshotStore = snapshotStoreWithOut()
const props = defineProps({
themes: {
type: String as PropType<EditorTheme>,
@ -191,6 +209,9 @@ const colorFormRef = ref(null)
const colorForm = computed(
() => canvasStyleData.value.component.chartColor as DeepPartial<ChartAttr>
)
const seniorForm = computed(() => canvasStyleData.value.component.seniorStyleSetting)
const predefineColors = COLOR_PANEL
const state = reactive({
@ -215,6 +236,10 @@ const changeColorOption = (modifyName = 'value') => {
changeColorCase(modifyName)
}
const changePagerColorChange = () => {
snapshotStore.recordSnapshotCache()
}
const changeColorCase = modifyName => {
colorForm.value['modifyName'] = modifyName
emits('onColorChange', colorForm.value)

60
core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue
View File

@ -2,25 +2,37 @@
<div style="width: 100%; padding-bottom: 8px">
<el-form label-position="top" style="width: 100%">
<div style="width: 100%; padding: 16px 8px 0">
<el-col :span="12">
<el-form-item class="form-item" label="联动、钻取、调整的图标颜色">
<el-col :span="24">
<el-form-item
:effect="themes"
class="form-item"
:class="'form-item-' + themes"
label="联动、钻取、跳转的图标颜色"
>
<el-color-picker
v-model="filterStyle.titleColor"
:effect="themes"
v-model="seniorStyleSetting.linkageIconColor"
:trigger-width="197"
is-custom
:predefine="state.predefineColors"
@change="themeChange('titleColor')"
@change="themeChange"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item class="form-item" label="钻取层级展示颜色">
<el-col :span="24">
<el-form-item
:effect="themes"
class="form-item"
:class="'form-item-' + themes"
label="钻取层级展示颜色"
>
<el-color-picker
v-model="filterStyle.labelColor"
v-model="seniorStyleSetting.drillLayerColor"
:effect="themes"
:trigger-width="197"
is-custom
:predefine="state.predefineColors"
@change="themeChange('labelColor')"
@change="themeChange"
/>
</el-form-item>
</el-col>
@ -35,17 +47,21 @@ import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { useI18n } from '@/hooks/web/useI18n'
import { cloneDeep } from 'lodash-es'
import { adaptCurThemeFilterStyleAll } from '@/utils/canvasStyle'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
import eventBus from '@/utils/eventBus'
import { ElIcon } from 'element-plus-secondary'
const { t } = useI18n()
const dvMainStore = dvMainStoreWithOut()
const snapshotStore = snapshotStoreWithOut()
const filterStyle = computed<any>(() => {
return dvMainStore.canvasStyleData.component.filterStyle
const seniorStyleSetting = computed<any>(() => {
return dvMainStore.canvasStyleData.component.seniorStyleSetting
})
const props = defineProps({
themes: {
type: String,
default: 'light'
}
})
const state = reactive({
fontSize: [],
isSetting: false,
@ -55,15 +71,9 @@ const state = reactive({
const initForm = () => {
// do
}
const themeChange = styleKey => {
dvMainStore.canvasStyleData.component.filterStyle = cloneDeep(filterStyle.value)
adaptCurThemeFilterStyleAll(styleKey)
snapshotStore.recordSnapshotCache('filterStyleSimpleSelector-themeChange')
}
const handleHorizontalChange = (type, horizontal = 'titleLayout') => {
filterStyle.value[horizontal] = type
themeChange(horizontal)
const themeChange = () => {
dvMainStore.canvasStyleData.component.seniorStyleSetting = cloneDeep(seniorStyleSetting.value)
snapshotStore.recordSnapshotCache('seniorStyleSettingSimpleSelector-themeChange')
}
onMounted(() => {
@ -106,4 +116,12 @@ onMounted(() => {
line-height: 20px;
}
}
.form-item-dark {
:deep(.ed-form-item__label) {
color: #6a6a6a;
font-size: 12px;
font-weight: 400;
line-height: 20px;
}
}
</style>

9
core/core-frontend/src/components/data-visualization/CanvasAttr.vue
View File

@ -10,6 +10,7 @@ import { useEmitt } from '@/hooks/web/useEmitt'
import ComponentColorSelector from '@/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue'
import OverallSetting from '@/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue'
import CanvasBackground from '@/components/visualization/component-background/CanvasBackground.vue'
import SeniorStyleSetting from '@/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue'
const dvMainStore = dvMainStoreWithOut()
const snapshotStore = snapshotStoreWithOut()
const { canvasStyleData, canvasViewInfo } = storeToRefs(dvMainStore)
@ -102,6 +103,14 @@ onMounted(() => {
<el-collapse-item effect="dark" title="刷新配置" name="overallSetting">
<overall-setting themes="dark" />
</el-collapse-item>
<el-collapse-item
effect="dark"
title="高级样式设置"
name="seniorStyleSetting"
class="no-padding no-border-bottom"
>
<senior-style-setting themes="dark"></senior-style-setting>
</el-collapse-item>
</el-collapse>
</div>
</template>

19
core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
View File

@ -236,6 +236,23 @@ const initWatermark = (waterDomId = 'preview-canvas-main') => {
}
}
// 目标校验： 需要校验targetSourceId 是否是当前可视化资源ID
const winMsgHandle = event => {
console.info('PostMessage Params Received')
const msgInfo = event.data
// 校验targetSourceId
if (
msgInfo &&
msgInfo.type === 'attachParams' &&
msgInfo.targetSourceId === dvInfo.value.id + ''
) {
const attachParam = msgInfo.params
if (attachParam) {
dvMainStore.addOuterParamsFilter(attachParam, componentData.value, 'outer')
}
}
}
onMounted(() => {
initRefreshTimer()
resetLayout()
@ -245,10 +262,12 @@ onMounted(() => {
restore()
initWatermark()
})
window.addEventListener('message', winMsgHandle)
})
onBeforeUnmount(() => {
clearInterval(refreshTimer.value)
window.removeEventListener('message', winMsgHandle)
})
const userViewEnlargeOpen = (opt, item) => {

2
core/core-frontend/src/custom-component/de-frame/ComponentFrame.vue
View File

@ -3,7 +3,7 @@
<div v-if="element.frameLinks.src" class="main-frame">
<iframe
v-if="state.frameShow"
id="iframe"
:id="'iframe-' + element.id"
:src="element.frameLinks.src"
scrolling="auto"
frameborder="0"

8
core/core-frontend/src/locales/zh-CN.ts
View File

@ -249,7 +249,7 @@ export default {
remark: '备注',
column_name: '字段名',
field_type: '字段类型',
field_description: '字段描述',
field_description: '字段备注',
dl: '数据湖',
other: '其他',
local_file: '本地文件',
@ -338,6 +338,7 @@ export default {
extract: '抽取模式',
all_compute_mode: '直连、抽取模式',
extra_params: '额外的JDBC连接字符串',
jdbcUrl: 'JDBC 连接',
please_input_dataPath: '请输入 JsonPath 数据路径',
show_api_data: '查看API数据结构',
warning: '包含无效数据表',
@ -393,7 +394,7 @@ export default {
no_data_table: '暂无数据表',
on_the_left: '请在左侧选择数据源',
create_dataset: '创建数据集',
table_description: '表描述',
table_description: '表备注',
relational_database: '关系型数据库',
data_warehouse_lake: '数仓/数据湖',
non_relational_database: '非关系型数据库',
@ -691,6 +692,7 @@ export default {
chart_pie_rose: '玫瑰图',
chart_pie_donut_rose: '玫瑰环形图',
chart_funnel: '漏斗图',
chart_sankey: '桑基图',
chart_radar: '雷达图',
chart_gauge: '仪表盘',
chart_map: '地图',
@ -765,6 +767,8 @@ export default {
chart_data: '数据',
chart_style: '样式',
drag_block_type_axis: '类别轴',
drag_block_type_axis_start: '源',
drag_block_type_axis_end: '目的',
drag_block_value_axis: '值轴',
drag_block_value_start: '开始值',
drag_block_value_end: '结束值',

27
core/core-frontend/src/pages/panel/DashboardPreview.vue
View File

@ -5,10 +5,15 @@ import { interactiveStoreWithOut } from '@/store/modules/interactive'
import { useEmbedded } from '@/store/modules/embedded'
import { check } from '@/utils/CrossPermission'
import { useCache } from '@/hooks/web/useCache'
import { getOuterParamsInfo } from '@/api/visualization/outerParams'
import { ElMessage } from 'element-plus-secondary'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { useI18n } from '@/hooks/web/useI18n'
const { wsCache } = useCache()
const interactiveStore = interactiveStoreWithOut()
const embeddedStore = useEmbedded()
const dashboardPreview = ref(null)
const { t } = useI18n()
const state = reactive({
canvasDataPreview: null,
canvasStylePreview: null,
@ -16,6 +21,8 @@ const state = reactive({
dvInfo: null,
curPreviewGap: 0
})
const dvMainStore = dvMainStoreWithOut()
const checkPer = async resourceId => {
if (!window.DataEaseBi || !resourceId) {
return true
@ -30,6 +37,23 @@ onBeforeMount(async () => {
if (!checkResult) {
return
}
// 添加外部参数
let attachParam
await getOuterParamsInfo(embeddedStore.dvId).then(rsp => {
dvMainStore.setNowPanelOuterParamsInfo(rsp.data)
})
// div嵌入
if (embeddedStore.outerParams) {
try {
attachParam = JSON.parse(embeddedStore.outerParams)
} catch (e) {
console.error(e)
ElMessage.error(t('visualization.outer_param_decode_error'))
}
}
initCanvasData(
embeddedStore.dvId,
embeddedStore.busiFlag,
@ -48,6 +72,9 @@ onBeforeMount(async () => {
nextTick(() => {
dashboardPreview.value.restore()
})
if (attachParam) {
dvMainStore.addOuterParamsFilter(attachParam, canvasDataResult, 'outer')
}
}
)
})

44
core/core-frontend/src/pages/panel/ViewWrapper.vue
View File

@ -5,21 +5,41 @@ import { interactiveStoreWithOut } from '@/store/modules/interactive'
import { useEmbedded } from '@/store/modules/embedded'
import { check } from '@/utils/CrossPermission'
import { useCache } from '@/hooks/web/useCache'
import { getOuterParamsInfo } from '@/api/visualization/outerParams'
import { ElMessage } from 'element-plus-secondary'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { useI18n } from '@/hooks/web/useI18n'
const { wsCache } = useCache()
const interactiveStore = interactiveStoreWithOut()
const embeddedStore = useEmbedded()
const config = ref()
const viewInfo = ref()
const userViewEnlargeRef = ref()
const dvMainStore = dvMainStoreWithOut()
const { t } = useI18n()
const state = reactive({
canvasDataPreview: null,
canvasStylePreview: null,
canvasViewInfoPreview: null,
dvInfo: null,
curPreviewGap: 0
curPreviewGap: 0,
chartId: null
})
// 目标校验： 需要校验targetSourceId 是否是当前可视化资源ID
const winMsgHandle = event => {
console.info('PostMessage Params Received')
const msgInfo = event.data
// 校验targetSourceId
if (msgInfo && msgInfo.type === 'attachParams' && msgInfo.targetSourceId === state.chartId + '') {
const attachParam = msgInfo.params
if (attachParam) {
dvMainStore.addOuterParamsFilter(attachParam, state.canvasDataPreview, 'outer')
}
}
}
const checkPer = async resourceId => {
if (!window.DataEaseBi || !resourceId) {
return true
@ -34,6 +54,25 @@ onBeforeMount(async () => {
if (!checkResult) {
return
}
state.chartId = embeddedStore.dvId
window.addEventListener('message', winMsgHandle)
// 添加外部参数
let attachParam
await getOuterParamsInfo(embeddedStore.dvId).then(rsp => {
dvMainStore.setNowPanelOuterParamsInfo(rsp.data)
})
// div嵌入
if (embeddedStore.outerParams) {
try {
attachParam = JSON.parse(embeddedStore.outerParams)
} catch (e) {
console.error(e)
ElMessage.error(t('visualization.outer_param_decode_error'))
}
}
initCanvasDataPrepare(
embeddedStore.dvId,
embeddedStore.busiFlag,
@ -49,6 +88,9 @@ onBeforeMount(async () => {
state.canvasViewInfoPreview = canvasViewInfoPreview
state.dvInfo = dvInfo
state.curPreviewGap = curPreviewGap
if (attachParam) {
dvMainStore.addOuterParamsFilter(attachParam, canvasDataResult)
}
viewInfo.value = canvasViewInfoPreview[embeddedStore.chartId]
;(

7
core/core-frontend/src/pages/panel/main.ts
View File

@ -70,6 +70,7 @@ const setupAll = async (
dom: string,
type: string,
busiFlag: string,
outerParams: string,
token: string,
baseUrl: string,
dvId: string,
@ -86,6 +87,7 @@ const setupAll = async (
const embeddedStore = useEmbedded()
embeddedStore.setType(type)
embeddedStore.setBusiFlag(busiFlag)
embeddedStore.setOuterParams(outerParams)
embeddedStore.setToken(token)
embeddedStore.setBaseUrl(baseUrl)
embeddedStore.setDvId(dvId)
@ -129,6 +131,7 @@ class DataEaseBi {
| 'DashboardPanel'
dvId: string
busiFlag: 'dashboard' | 'dataV'
outerParams: string
resourceId: string
pid: string
chartId: string
@ -139,6 +142,7 @@ class DataEaseBi {
this.type = type
this.token = options.token
this.busiFlag = options.busiFlag
this.outerParams = options.outerParams
this.baseUrl = options.baseUrl
this.dvId = options.dvId
this.pid = options.pid
@ -152,6 +156,7 @@ class DataEaseBi {
this.deOptions.container,
this.type,
this.busiFlag,
this.outerParams,
this.token,
this.baseUrl,
this.dvId,
@ -169,6 +174,7 @@ class DataEaseBi {
const embeddedStore = useEmbedded()
embeddedStore.setType(null)
embeddedStore.setBusiFlag(null)
embeddedStore.setOuterParams(null)
embeddedStore.setToken(null)
embeddedStore.setBaseUrl(null)
embeddedStore.setDvId(null)
@ -179,6 +185,7 @@ class DataEaseBi {
this.type = null
this.token = null
this.busiFlag = null
this.outerParams = null
this.baseUrl = null
this.dvId = null
this.pid = null

10
core/core-frontend/src/store/modules/data-visualization/dvMain.ts
View File

@ -850,10 +850,10 @@ export const dvMainStore = defineStore('dataVisualization', {
})
},
// 添加外部参数的过滤条件
addOuterParamsFilter(params) {
addOuterParamsFilter(params, curComponentData = this.componentData, source = 'inner') {
// params 结构 {key1:value1,key2:value2}
const curComponentData = this.componentData
if (params) {
const preActiveComponentIds = []
const trackInfo = this.nowPanelOuterParamsInfo
for (let index = 0; index < curComponentData.length; index++) {
const element = curComponentData[index]
@ -906,6 +906,7 @@ export const dvMainStore = defineStore('dataVisualization', {
// 不存在该条件 且 条件有效 直接保存该条件
// !filterExist && vValid && currentFilters.push(condition)
currentFilters.push(condition)
preActiveComponentIds.push(element.id)
}
if (element.component === 'VQuery') {
element.propValue.forEach(filterItem => {
@ -951,6 +952,11 @@ export const dvMainStore = defineStore('dataVisualization', {
curComponentData[index] = element
})
}
if (source === 'outer') {
preActiveComponentIds.forEach(viewId => {
useEmitt().emitter.emit('query-data-' + viewId)
})
}
}
},
trackFilterCursor(element, checkQDList, trackInfo, preActiveComponentIds, viewId) {

10
core/core-frontend/src/store/modules/embedded.ts
View File

@ -4,6 +4,7 @@ interface AppState {
type: string
token: string
busiFlag: string
outerParams: string
baseUrl: string
dvId: string
pid: string
@ -17,6 +18,7 @@ export const userStore = defineStore('embedded', {
type: '',
token: '',
busiFlag: '',
outerParams: '',
baseUrl: '',
dvId: '',
pid: '',
@ -34,6 +36,9 @@ export const userStore = defineStore('embedded', {
getBusiFlag(): string {
return this.busiFlag
},
getOuterParams(): string {
return this.outerParams
},
getBaseUrl(): string {
return this.baseUrl
},
@ -53,6 +58,7 @@ export const userStore = defineStore('embedded', {
return {
embeddedToken: this.token,
busiFlag: this.busiFlag,
outerParams: this.outerParams,
type: this.type,
dvId: this.dvId,
chartId: this.chartId,
@ -71,6 +77,9 @@ export const userStore = defineStore('embedded', {
setBusiFlag(busiFlag: string) {
this.busiFlag = busiFlag
},
setOuterParams(outerParams: string) {
this.outerParams = outerParams
},
setBaseUrl(baseUrl: string) {
this.baseUrl = baseUrl
},
@ -90,6 +99,7 @@ export const userStore = defineStore('embedded', {
this.type = data['type']
this.token = data['embeddedToken']
this.busiFlag = data['busiFlag']
this.outerParams = data['outerParams']
this.dvId = data['dvId']
this.chartId = data['chartId']
this.pid = data['pid']

6
core/core-frontend/src/views/chart/components/editor/index.vue
View File

@ -2173,7 +2173,7 @@ const drop = (ev: MouseEvent, type = 'xAxis') => {
</div>
<div
class="tree-btn"
:class="isFilterActive && 'active'"
:class="{ 'tree-btn--dark': themes === 'dark', active: isFilterActive }"
@click="openTreeFilter"
>
<el-icon>
@ -3489,6 +3489,10 @@ span {
cursor: pointer;
justify-content: center;
font-size: 12px;
&.tree-btn--dark {
background: rgba(235, 235, 235, 0.05);
border-color: #5f5f5f;
}
&.active {
color: #3370ff;

10
core/core-frontend/src/views/chart/components/editor/util/chart.ts
View File

@ -158,7 +158,8 @@ export const SENIOR_STYLE_SETTING_LIGHT = {
export const SENIOR_STYLE_SETTING_DARK = {
linkageIconColor: '#ffffff',
drillLayerColor: '#ffffff'
drillLayerColor: '#ffffff',
pagerColor: '#ffffff'
}
export const FILTER_COMMON_STYLE_BASE = {
@ -1335,6 +1336,13 @@ export const CHART_TYPE_CONFIGS = [
value: 'funnel',
title: t('chart.chart_funnel'),
icon: 'funnel'
},
{
render: 'antv',
category: 'relation',
value: 'sankey',
title: t('chart.chart_sankey'),
icon: 'sankey'
}
]
},

38
core/core-frontend/src/views/chart/components/js/panel/charts/others/sankey-common.ts Normal file
View File

@ -0,0 +1,38 @@
export const SANKEY_EDITOR_PROPERTY: EditorProperty[] = [
'background-overall-component',
'basic-style-selector',
'label-selector',
'tooltip-selector',
'title-selector',
'jump-set',
'linkage'
]
export const SANKEY_EDITOR_PROPERTY_INNER: EditorPropertyInner = {
'background-overall-component': ['all'],
'basic-style-selector': ['colors', 'alpha', 'gradient'],
'label-selector': ['fontSize', 'color', 'labelFormatter'],
'tooltip-selector': ['fontSize', 'color', 'tooltipFormatter'],
'title-selector': [
'title',
'fontSize',
'color',
'hPosition',
'isItalic',
'isBolder',
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
],
'function-cfg': ['slider', 'emptyDataStrategy']
}
export const SANKEY_AXIS_TYPE: AxisType[] = [
'xAxis',
'xAxisExt',
'yAxis',
'filter',
'extLabel',
'extTooltip'
]

280
core/core-frontend/src/views/chart/components/js/panel/charts/others/sankey.ts Normal file
View File

@ -0,0 +1,280 @@
import {
G2PlotChartView,
G2PlotDrawOptions
} from '@/views/chart/components/js/panel/types/impl/g2plot'
import { Sankey, SankeyOptions } from '@antv/g2plot/esm/plots/sankey'
import { getPadding, setGradientColor } from '@/views/chart/components/js/panel/common/common_antv'
import { cloneDeep, get } from 'lodash-es'
import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
import { valueFormatter } from '@/views/chart/components/js/formatter'
import { Datum } from '@antv/g2plot/esm/types/common'
import { useI18n } from '@/hooks/web/useI18n'
import {
SANKEY_AXIS_TYPE,
SANKEY_EDITOR_PROPERTY,
SANKEY_EDITOR_PROPERTY_INNER
} from '@/views/chart/components/js/panel/charts/others/sankey-common'
const { t } = useI18n()
const DEFAULT_DATA = []
/**
* 区间条形图
*/
export class RangeBar extends G2PlotChartView<SankeyOptions, Sankey> {
axisConfig = {
...this['axisConfig'],
xAxis: {
name: `${t('chart.drag_block_type_axis_start')} / ${t('chart.dimension')}`,
limit: 1,
type: 'd'
},
xAxisExt: {
name: `${t('chart.drag_block_type_axis_end')} / ${t('chart.dimension')}`,
limit: 1,
type: 'd'
},
yAxis: {
name: `${t('chart.chart_data')} / ${t('chart.quota')}`,
limit: 1,
type: 'q'
}
}
properties = SANKEY_EDITOR_PROPERTY
propertyInner = {
...SANKEY_EDITOR_PROPERTY_INNER,
'label-selector': ['color', 'fontSize'],
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'tooltipFormatter']
}
axis: AxisType[] = [...SANKEY_AXIS_TYPE]
protected baseOptions: SankeyOptions = {
data: [],
sourceField: 'source',
targetField: 'target',
weightField: 'value',
rawFields: ['dimensionList', 'quotaList'],
interactions: [
{
type: 'legend-active',
cfg: {
start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],
end: [{ trigger: 'legend-item:mouseleave', action: ['element-active:reset'] }]
}
},
{
type: 'legend-filter',
cfg: {
start: [
{
trigger: 'legend-item:click',
action: [
'list-unchecked:toggle',
'data-filter:filter',
'element-active:reset',
'element-highlight:reset'
]
}
]
}
},
{
type: 'tooltip',
cfg: {
start: [{ trigger: 'interval:mousemove', action: 'tooltip:show' }],
end: [{ trigger: 'interval:mouseleave', action: 'tooltip:hide' }]
}
},
{
type: 'active-region',
cfg: {
start: [{ trigger: 'interval:mousemove', action: 'active-region:show' }],
end: [{ trigger: 'interval:mouseleave', action: 'active-region:hide' }]
}
}
]
}
drawChart(drawOptions: G2PlotDrawOptions<Sankey>): Sankey {
const { chart, container, action } = drawOptions
if (!chart.data?.data?.length) {
return
}
// data
const data: Array<any> = cloneDeep(chart.data.data)
data.forEach(d => {
if (d.dimensionList) {
if (d.dimensionList[0]) {
d.source = d.dimensionList[0].value
}
if (d.dimensionList[1]) {
d.target = d.dimensionList[1].value
}
}
})
// options
const initOptions: SankeyOptions = {
...this.baseOptions,
appendPadding: getPadding(chart),
data,
nodeSort: (a, b) => {
// 这里是前端自己排序
if (chart.yAxis && chart.yAxis[0]) {
if (chart.yAxis[0].sort === 'asc') {
return a.value - b.value
} else if (chart.yAxis[0].sort === 'desc') {
return b.value - a.value
}
}
if (chart.xAxis && chart.xAxis[0] && a.sourceLinks.length > 0) {
if (chart.xAxis[0].sort === 'custom_sort' && chart.xAxis[0].customSort) {
return (
chart.xAxis[0].customSort.indexOf(a.name) - chart.xAxis[0].customSort.indexOf(b.name)
)
} else if (chart.xAxis[0].sort === 'asc') {
return a.name.localeCompare(b.name)
} else if (chart.xAxis[0].sort === 'desc') {
return b.name.localeCompare(a.name)
}
}
if (chart.xAxisExt && chart.xAxisExt[0] && a.targetLinks.length > 0) {
if (chart.xAxisExt[0].sort === 'custom_sort' && chart.xAxisExt[0].customSort) {
return (
chart.xAxisExt[0].customSort.indexOf(a.name) -
chart.xAxisExt[0].customSort.indexOf(b.name)
)
} else if (chart.xAxisExt[0].sort === 'asc') {
return a.name.localeCompare(b.name)
} else if (chart.xAxisExt[0].sort === 'desc') {
return b.name.localeCompare(a.name)
}
}
return b.value - a.value
}
}
const options = this.setupOptions(chart, initOptions)
// 开始渲染
const newChart = new Sankey(container, options)
newChart.on('edge:click', action)
return newChart
}
protected configTooltip(chart: Chart, options: SankeyOptions): SankeyOptions {
let tooltip
let customAttr: DeepPartial<ChartAttr>
if (chart.customAttr) {
customAttr = parseJson(chart.customAttr)
// tooltip
if (customAttr.tooltip) {
const t = JSON.parse(JSON.stringify(customAttr.tooltip))
if (t.show) {
tooltip = {
showTitle: false,
showMarkers: false,
shared: false,
// 内置：node 不显示 tooltip，edge 显示 tooltip
showContent: items => {
return !get(items, [0, 'data', 'isNode'])
},
formatter: (datum: Datum) => {
const { source, target, value } = datum
return {
name: source + ' -> ' + target,
value: valueFormatter(value, t.tooltipFormatter)
}
}
}
} else {
tooltip = false
}
}
}
return { ...options, tooltip }
}
protected configBasicStyle(chart: Chart, options: SankeyOptions): SankeyOptions {
const basicStyle = parseJson(chart.customAttr).basicStyle
let color = basicStyle.colors
color = color.map(ele => {
const tmp = hexColorToRGBA(ele, basicStyle.alpha)
if (basicStyle.gradient) {
return setGradientColor(tmp, true)
} else {
return tmp
}
})
options = {
...options,
color
}
return options
}
setupDefaultOptions(chart: ChartObj): ChartObj {
const { customAttr, senior } = chart
const { label } = customAttr
if (!['left', 'middle', 'right'].includes(label.position)) {
label.position = 'middle'
}
senior.functionCfg.emptyDataStrategy = 'ignoreData'
return chart
}
protected configLabel(chart: Chart, options: SankeyOptions): SankeyOptions {
const labelAttr = parseJson(chart.customAttr).label
if (labelAttr.show) {
const label = {
//...tmpOptions.label,
formatter: ({ name }) => name,
callback: (x: number[]) => {
const isLast = x[1] === 1 // 最后一列靠边的节点
return {
style: {
fill: labelAttr.color,
fontSize: labelAttr.fontSize,
textAlign: isLast ? 'end' : 'start'
},
offsetX: isLast ? -8 : 8
}
},
layout: [{ type: 'hide-overlap' }, { type: 'limit-in-canvas' }]
}
return {
...options,
label
}
} else {
return {
...options,
label: false
}
}
}
protected setupOptions(chart: Chart, options: SankeyOptions): SankeyOptions {
return flow(
this.configTheme,
this.configBasicStyle,
this.configLabel,
this.configTooltip,
this.configLegend,
this.configSlider,
this.configAnalyseHorizontal,
this.configEmptyDataStrategy
)(chart, options)
}
constructor(name = 'sankey') {
super(name, DEFAULT_DATA)
}
}

9
core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
View File

@ -159,7 +159,6 @@ const renderG2Plot = (chart, chartView: G2PlotChartView<any, any>) => {
const dynamicAreaId = ref('')
const country = ref('')
const appStore = useAppStoreWithOut()
const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
const chartContainer = ref<HTMLElement>(null)
let mapTimer: number
const renderL7Plot = async (chart: ChartObj, chartView: L7PlotChartView<any, any>, callback) => {
@ -259,7 +258,7 @@ const trackClick = trackAction => {
dvMainStore.addViewTrackFilter(linkageParam)
break
case 'jump':
if (isDataEaseBi.value || mobileInPc.value) return
if (mobileInPc.value) return
emit('onJumpClick', jumpParam)
break
default:
@ -282,11 +281,7 @@ const trackMenu = computed(() => {
jumpCount++
}
})
jumpCount &&
view.value?.jumpActive &&
!isDataEaseBi.value &&
!mobileInPc.value &&
trackMenuInfo.push('jump')
jumpCount && view.value?.jumpActive && !mobileInPc.value && trackMenuInfo.push('jump')
linkageCount && view.value?.linkageActive && trackMenuInfo.push('linkage')
view.value.drillFields.length && trackMenuInfo.push('drill')
// 如果同时配置jump linkage drill 切配置联动时同时下钻 在实际只显示两个 '跳转' '联动和下钻'

25
core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
View File

@ -29,7 +29,8 @@ import { useEmitt } from '@/hooks/web/useEmitt'
import { trackBarStyleCheck } from '@/utils/canvasUtils'
const dvMainStore = dvMainStoreWithOut()
const { nowPanelTrackInfo, nowPanelJumpInfo, mobileInPc } = storeToRefs(dvMainStore)
const { nowPanelTrackInfo, nowPanelJumpInfo, mobileInPc, canvasStyleData } =
storeToRefs(dvMainStore)
const { emitter } = useEmitt()
const props = defineProps({
@ -261,8 +262,6 @@ const action = param => {
}
const appStore = useAppStoreWithOut()
const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
const trackClick = trackAction => {
const param = state.pointParam
if (!param?.data?.dimensionList) {
@ -295,7 +294,7 @@ const trackClick = trackAction => {
dvMainStore.addViewTrackFilter(linkageParam)
break
case 'jump':
if (isDataEaseBi.value || mobileInPc.value) return
if (mobileInPc.value) return
emit('onJumpClick', jumpParam)
break
default:
@ -319,11 +318,7 @@ const trackMenu = computed(() => {
jumpCount++
}
})
jumpCount &&
view.value?.jumpActive &&
!isDataEaseBi.value &&
!mobileInPc.value &&
trackMenuInfo.push('jump')
jumpCount && view.value?.jumpActive && !mobileInPc.value && trackMenuInfo.push('jump')
linkageCount && view.value?.linkageActive && trackMenuInfo.push('linkage')
view.value.drillFields.length && trackMenuInfo.push('drill')
// 如果同时配置jump linkage drill 切配置联动时同时下钻 在实际只显示两个 '跳转' '联动和下钻'
@ -420,6 +415,10 @@ const autoHeightStyle = computed(() => {
height: 20 * scale.value + 8 + 'px'
}
})
const tabStyle = computed(() => [
{ '--de-pager-color': canvasStyleData.value.component.seniorStyleSetting.pagerColor }
])
</script>
<template>
@ -435,7 +434,7 @@ const autoHeightStyle = computed(() => {
<div style="position: relative; height: 100%" :id="containerId"></div>
</div>
<el-row :style="autoStyle" v-if="showPage && !isError">
<div class="table-page-info">
<div class="table-page-info" :style="tabStyle">
<div>共{{ state.pageInfo.total }}条</div>
<el-pagination
class="table-page-content"
@ -474,16 +473,16 @@ const autoHeightStyle = computed(() => {
height: 20px;
display: flex;
width: 100%;
color: grey;
color: var(--de-pager-color);
:deep(.table-page-content) {
button,
button[disabled] {
color: grey;
color: var(--de-pager-color);
background: transparent !important;
}
ul li {
&:not(.is-active) {
color: grey;
color: var(--de-pager-color);
}
background: transparent !important;
}

24
core/core-frontend/src/views/chart/components/views/components/DrillPath.vue
View File

@ -1,8 +1,10 @@
<script lang="tsx" setup>
import { reactive, watch } from 'vue'
import { computed, reactive, watch } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { reverseColor } from '../util/util'
import { ArrowRight } from '@element-plus/icons-vue'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
const dvMainStore = dvMainStoreWithOut()
const { t } = useI18n()
@ -24,14 +26,18 @@ const state = reactive({
textColor: '#bbbfc4'
})
watch(
[() => props.themeStyle?.backgroundColorSelect, () => props.themeStyle?.color],
() => {
loadThemeStyle()
},
{ deep: true }
const textColor = computed(
() => dvMainStore.canvasStyleData.component.seniorStyleSetting.drillLayerColor
)
// watch(
// [() => props.themeStyle?.backgroundColorSelect, () => props.themeStyle?.color],
// () => {
// loadThemeStyle()
// },
// { deep: true }
// )
const drillJump = index => {
if (index < props.drillFilters.length) {
emit('onDrillJump', index)
@ -67,7 +73,7 @@ const loadThemeStyle = () => {
<div v-if="props.drillFilters && props.drillFilters.length > 0" class="drill">
<el-breadcrumb :separator-icon="ArrowRight" class="drill-style">
<el-breadcrumb-item class="drill-item" @click="drillJump(0)">
<span :style="{ color: state.textColor }">{{ t('commons.all') }}</span>
<span :style="{ color: textColor }">{{ t('commons.all') }}</span>
</el-breadcrumb-item>
<el-breadcrumb-item
v-for="(filter, index) in props.drillFilters"
@ -75,7 +81,7 @@ const loadThemeStyle = () => {
class="drill-item"
@click="drillJump(index + 1)"
>
<span :style="{ color: state.textColor }">{{ filter.value[0] }}</span>
<span :style="{ color: textColor }">{{ filter.value[0] }}</span>
</el-breadcrumb-item>
</el-breadcrumb>
</div>

47
core/core-frontend/src/views/chart/components/views/index.vue
View File

@ -2,6 +2,8 @@
import { useI18n } from '@/hooks/web/useI18n'
import ChartComponentG2Plot from './components/ChartComponentG2Plot.vue'
import DeIndicator from '@/custom-component/indicator/DeIndicator.vue'
import { useAppStoreWithOut } from '@/store/modules/app'
import { XpackComponent } from '@/components/plugin'
import {
computed,
CSSProperties,
@ -99,6 +101,7 @@ const props = defineProps({
})
const dynamicAreaId = ref('')
const { view, showPosition, element, active, searchCount, scale } = toRefs(props)
const appStore = useAppStoreWithOut()
const titleShow = computed(
() =>
@ -235,6 +238,7 @@ watch([() => curComponent.value], () => {
})
}
})
const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
const chartExtRequest = shallowRef(null)
provide('chartExtRequest', chartExtRequest)
@ -313,10 +317,21 @@ const filter = (firstLoad?: boolean) => {
const onDrillFilters = param => {
state.drillFilters = param ? param : []
}
const openHandler = ref(null)
const initOpenHandler = newWindow => {
if (openHandler?.value) {
const pm = {
methodName: 'initOpenHandler',
args: newWindow
}
openHandler.value.invokeMethod(pm)
}
}
const windowsJump = (url, jumpType) => {
try {
window.open(url, jumpType)
const newWindow = window.open(url, jumpType)
initOpenHandler(newWindow)
if (jumpType === '_self') {
location.reload()
}
@ -350,15 +365,19 @@ const jumpClick = param => {
param.sourceDvId = dvInfo.value.id
param.sourceViewId = param.viewId
param.sourceFieldId = dimension.id
let embeddedBaseUrl = ''
if (isDataEaseBi.value) {
embeddedBaseUrl = embeddedStore.baseUrl
}
// 内部仪表板跳转
if (jumpInfo.linkType === 'inner') {
if (jumpInfo.targetDvId) {
if (publicLinkStatus.value) {
// 判断是否有公共链接ID
if (jumpInfo.publicJumpId) {
const url = `#/de-link/${jumpInfo.publicJumpId}?jumpInfoParam=${encodeURIComponent(
Base64.encode(JSON.stringify(param))
)}`
const url = `${embeddedBaseUrl}#/de-link/${
jumpInfo.publicJumpId
}?jumpInfoParam=${encodeURIComponent(Base64.encode(JSON.stringify(param)))}`
const currentUrl = window.location.href
localStorage.setItem('beforeJumpUrl', currentUrl)
windowsJump(url, jumpInfo.jumpType)
@ -366,9 +385,9 @@ const jumpClick = param => {
ElMessage.warning(t('visualization.public_link_tips'))
}
} else {
const url = `#/preview?dvId=${jumpInfo.targetDvId}&jumpInfoParam=${encodeURIComponent(
Base64.encode(JSON.stringify(param))
)}`
const url = `${embeddedBaseUrl}#/preview?dvId=${
jumpInfo.targetDvId
}&jumpInfoParam=${encodeURIComponent(Base64.encode(JSON.stringify(param)))}`
windowsJump(url, jumpInfo.jumpType)
}
} else {
@ -713,6 +732,10 @@ const titleIconStyle = computed(() => {
:view-icon="view.type"
></chart-empty-info>
<drill-path :drill-filters="state.drillFilters" @onDrillJump="drillJump" />
<XpackComponent
ref="openHandler"
jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI="
/>
</div>
</template>
@ -741,11 +764,11 @@ const titleIconStyle = computed(() => {
flex-wrap: nowrap;
gap: 8px;
//color: #646a73;
//
//&.icons-container__dark {
// color: #a6a6a6;
//}
color: #646a73;
&.icons-container__dark {
color: #a6a6a6;
}
&.is-editing {
gap: 6px;

13
core/core-frontend/src/views/data-visualization/PreviewCanvas.vue
View File

@ -10,6 +10,7 @@ import { getOuterParamsInfo } from '@/api/visualization/outerParams'
import { ElMessage } from 'element-plus-secondary'
import { useI18n } from '@/hooks/web/useI18n'
import { XpackComponent } from '@/components/plugin'
const dvMainStore = dvMainStoreWithOut()
const { t } = useI18n()
const state = reactive({
@ -55,14 +56,16 @@ const loadCanvasDataAsync = async (dvId, dvType) => {
}
// 添加外部参数
const attachParamsEncode = router.currentRoute.value.query.attachParams
let attachParam
await getOuterParamsInfo(dvId).then(rsp => {
dvMainStore.setNowPanelOuterParamsInfo(rsp.data)
})
// 外部参数（iframe 或者 iframe嵌入）
const attachParamsEncode = router.currentRoute.value.query.attachParams
if (attachParamsEncode) {
try {
attachParam = JSON.parse(Base64.decode(decodeURIComponent(attachParamsEncode)))
await getOuterParamsInfo(dvId).then(rsp => {
dvMainStore.setNowPanelOuterParamsInfo(rsp.data)
})
} catch (e) {
console.error(e)
ElMessage.error(t('visualization.outer_param_decode_error'))
@ -97,6 +100,7 @@ const loadCanvasDataAsync = async (dvId, dvType) => {
}
)
}
let p = null
const XpackLoaded = () => p(true)
onMounted(async () => {
@ -108,6 +112,7 @@ onMounted(async () => {
}
dvMainStore.setPublicLinkStatus(props.publicLinkStatus)
})
defineExpose({
loadCanvasDataAsync
})

32
core/core-frontend/src/views/visualized/data/dataset/form/DatasetUnion.vue
View File

@ -708,12 +708,13 @@ const dragenter_handler = ev => {
const drop_handler = ev => {
ev.preventDefault()
let data = ev.dataTransfer.getData('text')
const { tableName, type, datasourceId } = JSON.parse(data) as Table
const { tableName, type, datasourceId, name: noteName } = JSON.parse(data) as Table
const extraData = {
info: JSON.stringify({
table: tableName,
sql: ''
}),
noteName,
unionType: 'left',
unionFields: [],
currentDsFields: [],
@ -1029,10 +1030,19 @@ const emits = defineEmits(['addComplete', 'joinEditor', 'updateAllfields', 'chan
direction="rtl"
>
<template #header v-if="currentNode">
<div class="info">
<span :title="currentNode.tableName" class="name ellipsis">{{
currentNode.tableName
}}</span>
<div class="info-content">
<div class="info">
<span class="label">表名</span>
<span :title="currentNode.tableName" class="name ellipsis">{{
currentNode.tableName
}}</span>
</div>
<div class="info">
<span class="label">表备注</span>
<span :title="currentNode.noteName" class="name ellipsis">{{
currentNode.noteName || '-'
}}</span>
</div>
<span :title="getDsName(currentNode.datasourceId)" class="ds ellipsis"
>{{ t('auth.datasource') }}:{{ getDsName(currentNode.datasourceId) }}</span
>
@ -1082,15 +1092,25 @@ const emits = defineEmits(['addComplete', 'joinEditor', 'updateAllfields', 'chan
top: 26px;
}
.info-content {
display: flex;
flex-wrap: wrap;
}
.info {
display: flex;
flex-direction: column;
.name {
width: 50%;
.label {
font-weight: 500;
font-size: 16px;
color: #1f2329;
max-width: 500px;
}
.name {
font-weight: 400;
font-size: 14px;
}
.ds {
font-weight: 400;
font-size: 14px;

35
core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestDraw.vue
View File

@ -31,6 +31,7 @@ export interface ApiItem {
fields: Field[]
jsonFields: JsonField[]
useJsonPath: boolean
apiQueryTimeout: number
showApiStructure: boolean
jsonPath: string
serialNumber: number
@ -81,6 +82,7 @@ let apiItem = reactive<ApiItem>({
fields: [],
jsonFields: [],
useJsonPath: false,
apiQueryTimeout: 10,
showApiStructure: false,
jsonPath: '',
serialNumber: -1
@ -95,6 +97,24 @@ const loading = ref(false)
const columns = shallowRef([])
const tableData = shallowRef([])
const apiItemBasicInfo = ref<FormInstance>()
const isNumber = (rule, value, callback) => {
if (!value) {
callback(new Error(t('datasource.please_input_query_timeout')))
return
}
let isNumber = false
var reg = /^\d+$/
isNumber = reg.test(value)
if (!isNumber) {
callback(new Error(t('datasource.please_input_query_timeout')))
return
}
if (value <= 0 || value > 300) {
callback(new Error(t('datasource.please_input_query_timeout')))
return
}
callback()
}
const rule = reactive<FormRules>({
name: [
{
@ -109,6 +129,13 @@ const rule = reactive<FormRules>({
trigger: 'blur'
}
],
apiQueryTimeout: [
{
required: true,
validator: isNumber,
trigger: ['blur', 'change']
}
],
url: [
{
required: true,
@ -266,8 +293,8 @@ const previewData = () => {
for (let i = 0; i < apiItem.fields.length; i++) {
for (let j = 0; j < apiItem.fields[i].value.length; j++) {
data[j][apiItem.fields[i].name] = apiItem.fields[i].value[j]
data[j]['id'] = apiItem.fields[i].name
}
columnTmp.push({
key: apiItem.fields[i].name,
dataKey: apiItem.fields[i].name,
@ -429,7 +456,11 @@ defineExpose({
/>
</el-form-item>
</div>
<el-form-item :label="$t('datasource.query_timeout')" prop="apiQueryTimeout">
<el-input v-model="apiItem.apiQueryTimeout" autocomplete="off" type="number" :min="0">
<template v-slot:append>{{ $t('panel.second') }}</template>
</el-input>
</el-form-item>
<div class="title-form_primary request-info">
<span>{{ t('datasource.isUseJsonPath') }}</span>
</div>

14
core/core-frontend/src/views/visualized/data/datasource/index.vue
View File

@ -91,7 +91,7 @@ const { width, node } = useMoveLine('DATASOURCE')
const dsTableDetail = reactive({
tableName: '',
remark: ''
name: ''
})
const rootManage = ref(false)
const nickName = ref('')
@ -1122,14 +1122,14 @@ const getMenuList = (val: boolean) => {
</el-col>
</el-row>
<template v-if="!['Excel', 'API'].includes(nodeInfo.type)">
<el-row :gutter="24" v-show="nodeInfo.configuration.urlType === 'hostName'">
<el-row :gutter="24" v-show="nodeInfo.configuration.urlType !== 'jdbcUrl'">
<el-col :span="12">
<BaseInfoItem :label="t('datasource.host')">{{
nodeInfo.configuration.host
}}</BaseInfoItem>
</el-col>
</el-row>
<el-row :gutter="24" v-show="nodeInfo.configuration.urlType === 'hostName'">
<el-row :gutter="24" v-show="nodeInfo.configuration.urlType !== 'jdbcUrl'">
<el-col :span="12">
<BaseInfoItem :label="t('datasource.port')">{{
nodeInfo.configuration.port
@ -1141,7 +1141,7 @@ const getMenuList = (val: boolean) => {
}}</BaseInfoItem>
</el-col>
</el-row>
<el-row :gutter="24" v-show="nodeInfo.configuration.urlType === 'hostName'">
<el-row :gutter="24" v-show="nodeInfo.configuration.urlType !== 'jdbcUrl'">
<el-col :span="12">
<BaseInfoItem :label="t('datasource.user_name')">{{
nodeInfo.configuration.username
@ -1153,14 +1153,14 @@ const getMenuList = (val: boolean) => {
}}</BaseInfoItem>
</el-col>
</el-row>
<el-row :gutter="24" v-show="nodeInfo.configuration.urlType !== 'hostName'">
<el-row :gutter="24" v-show="nodeInfo.configuration.urlType === 'jdbcUrl'">
<el-col :span="12">
<BaseInfoItem :label="t('datasource.jdbcUrl')">{{
nodeInfo.configuration.jdbcUrl
}}</BaseInfoItem>
</el-col>
</el-row>
<el-row :gutter="24" v-show="nodeInfo.configuration.urlType !== 'hostName'">
<el-row :gutter="24" v-show="nodeInfo.configuration.urlType === 'jdbcUrl'">
<el-col :span="12">
<BaseInfoItem :label="t('datasource.user_name')">{{
nodeInfo.configuration.username
@ -1356,7 +1356,7 @@ const getMenuList = (val: boolean) => {
{{ t('datasource.table_description') }}
</p>
<p class="table-value">
{{ dsTableDetail.remark || '-' }}
{{ dsTableDetail.name || '-' }}
</p>
</el-col>
</el-row>

6
sdk/api/api-base/src/main/java/io/dataease/api/ds/vo/ApiDefinition.java
View File

@ -19,10 +19,8 @@ public class ApiDefinition {
private ApiDefinitionRequest request;
private String status;
private List<Map<String, Object>> data = new ArrayList<>();
private int previewNum = 10;
private int maxPreviewNum = 10;
private Integer apiQueryTimeout = 10;
private int previewNum = 100;
private int serialNumber;
private boolean useJsonPath;
private String jsonPath;