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

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

Browse Source
This commit is contained in:
wangjiahao 2022-02-11 10:14:18 +08:00
commit fcb74448d1
15 changed files with 777 additions and 768 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
backend/pom.xml
View File

@ -5,7 +5,7 @@
<parent>
<artifactId>dataease-server</artifactId>
<groupId>io.dataease</groupId>
<version>1.7.0</version>
<version>1.8.0</version>
</parent>
<modelVersion>4.0.0</modelVersion>
@ -214,7 +214,12 @@
<dependency>
<groupId>io.dataease</groupId>
<artifactId>dataease-plugin-interface</artifactId>
<version>1.7</version>
<version>1.8.0</version>
</dependency>
<dependency>
<groupId>io.dataease</groupId>
<artifactId>dataease-plugin-view</artifactId>
<version>1.8.0</version>
</dependency>
<dependency>
<groupId>cn.hutool</groupId>

33
backend/src/main/java/io/dataease/plugins/server/view/PluginViewServer.java Normal file
View File

@ -0,0 +1,33 @@
package io.dataease.plugins.server.view;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import java.util.Map.Entry;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import io.dataease.plugins.config.SpringContextUtil;
import io.dataease.plugins.view.entity.PluginViewType;
import io.dataease.plugins.view.service.ViewPluginService;
@RequestMapping("/plugin/view")
@RestController
public class PluginViewServer {
@PostMapping("/types")
public List<PluginViewType> types() {
List<PluginViewType> result = new ArrayList<>();
Map<String, ViewPluginService> beanMap = SpringContextUtil.getApplicationContext()
.getBeansOfType(ViewPluginService.class);
if (beanMap.keySet().size() == 0) {
return result;
}
for (Entry<String, ViewPluginService> entry : beanMap.entrySet()) {
result.add(entry.getValue().viewType());
}
return result;
}
}

10
backend/src/main/java/io/dataease/provider/query/doris/DorisQueryProvider.java
View File

@ -76,7 +76,7 @@ public class DorisQueryProvider extends QueryProvider {
@Override
public String createSQLPreview(String sql, String orderBy) {
return "SELECT * FROM (" + sql + ") AS tmp ORDER BY " + orderBy + " LIMIT 0,1000";
return "SELECT * FROM (" + sqlFix(sql) + ") AS tmp LIMIT 0,1000";
}
@Override
@ -147,14 +147,6 @@ public class DorisQueryProvider extends QueryProvider {
if (customWheres != null) wheres.add(customWheres);
if (CollectionUtils.isNotEmpty(wheres)) st_sql.add("filters", wheres);
if ((fields.size() > 0)) {
xOrders.add(SQLObj.builder()
.orderDirection("asc")
.orderField(fields.get(0).getDataeaseName())
.orderAlias(String.format(SQLConstants.FIELD_ALIAS_X_PREFIX, "0"))
.build());
st_sql.add("orders", xOrders);
}
return st_sql.render();
}

2
frontend/pom.xml
View File

@ -6,7 +6,7 @@
<parent>
<artifactId>dataease-server</artifactId>
<groupId>io.dataease</groupId>
<version>1.7.0</version>
<version>1.8.0</version>
</parent>
<modelVersion>4.0.0</modelVersion>

7
frontend/src/api/chart/chart.js
View File

@ -69,3 +69,10 @@ export function ajaxGetDataOnly(id, data) {
data
})
}
export function pluginTypes() {
return request({
url: '/plugin/view/types',
method: 'post'
})
}

1
frontend/src/icons/svg/buddle-map.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

2
frontend/src/main.js
View File

@ -24,9 +24,11 @@ import DeComplexSelect from '@/components/business/condition-table/DeComplexSele
import '@/components/canvas/custom-component' // 注册自定义组件
import '@/utils/DateUtil'
import draggable from 'vuedraggable'
Vue.config.productionTip = false
Vue.use(VueClipboard)
Vue.use(widgets)
Vue.component('draggable', draggable)
Vue.prototype.$api = api
import * as echarts from 'echarts'

281
frontend/src/views/chart/chart/util.js
View File

@ -26,3 +26,284 @@ export function digToHex(dig) {
}
return prefix.concat(num.toString(16).toUpperCase())
}
export const TYPE_CONFIGS = [
{
render: 'antv',
category: 'chart.chart_type_table',
value: 'table-normal',
title: 'chart.chart_table_normal',
icon: 'table-normal'
},
{
render: 'antv',
category: 'chart.chart_type_table',
value: 'table-info',
title: 'chart.chart_table_info',
icon: 'table-info'
},
{
render: 'antv',
category: 'chart.chart_type_table',
value: 'table-pivot',
title: 'chart.chart_table_pivot',
icon: 'table-pivot'
},
{
render: 'antv',
category: 'chart.chart_type_quota',
value: 'text',
title: 'chart.chart_card',
icon: 'text'
},
{
render: 'antv',
category: 'chart.chart_type_quota',
value: 'gauge',
title: 'chart.chart_gauge',
icon: 'gauge'
},
{
render: 'antv',
category: 'chart.chart_type_quota',
value: 'liquid',
title: 'chart.chart_liquid',
icon: 'liquid'
},
{
render: 'antv',
category: 'chart.chart_type_trend',
value: 'line',
title: 'chart.chart_line',
icon: 'line'
},
{
render: 'antv',
category: 'chart.chart_type_trend',
value: 'line-stack',
title: 'chart.chart_line_stack',
icon: 'line-stack'
},
{
render: 'antv',
category: 'chart.chart_type_compare',
value: 'bar',
title: 'chart.chart_bar',
icon: 'bar'
},
{
render: 'antv',
category: 'chart.chart_type_compare',
value: 'bar-stack',
title: 'chart.chart_bar_stack',
icon: 'bar-stack'
},
{
render: 'antv',
category: 'chart.chart_type_compare',
value: 'waterfall',
title: 'chart.chart_waterfall',
icon: 'waterfall'
},
{
render: 'antv',
category: 'chart.chart_type_compare',
value: 'bar-horizontal',
title: 'chart.chart_bar_horizontal',
icon: 'bar-horizontal'
},
{
render: 'antv',
category: 'chart.chart_type_compare',
value: 'bar-stack-horizontal',
title: 'chart.chart_bar_stack_horizontal',
icon: 'bar-stack-horizontal'
},
{
render: 'antv',
category: 'chart.chart_type_distribute',
value: 'pie',
title: 'chart.chart_pie',
icon: 'pie'
},
{
render: 'antv',
category: 'chart.chart_type_distribute',
value: 'pie-rose',
title: 'chart.chart_pie_rose',
icon: 'pie-rose'
},
{
render: 'antv',
category: 'chart.chart_type_distribute',
value: 'radar',
title: 'chart.chart_radar',
icon: 'radar'
},
{
render: 'antv',
category: 'chart.chart_type_distribute',
value: 'treemap',
title: 'chart.chart_treemap',
icon: 'treemap'
},
{
render: 'antv',
category: 'chart.chart_type_distribute',
value: 'word-cloud',
title: 'chart.chart_word_cloud',
icon: 'word-cloud'
},
{
render: 'antv',
category: 'chart.chart_type_relation',
value: 'scatter',
title: 'chart.chart_scatter',
icon: 'scatter'
},
{
render: 'antv',
category: 'chart.chart_type_relation',
value: 'funnel',
title: 'chart.chart_funnel',
icon: 'funnel'
},
/* 下面是echarts图表类型 */
{
render: 'echarts',
category: 'chart.chart_type_table',
value: 'table-normal',
title: 'chart.chart_table_normal',
icon: 'table-normal'
},
{
render: 'echarts',
category: 'chart.chart_type_table',
value: 'table-info',
title: 'chart.chart_table_info',
icon: 'table-info'
},
{
render: 'echarts',
category: 'chart.chart_type_quota',
value: 'text',
title: 'chart.chart_card',
icon: 'text'
},
{
render: 'echarts',
category: 'chart.chart_type_quota',
value: 'gauge',
title: 'chart.chart_gauge',
icon: 'gauge'
},
{
render: 'echarts',
category: 'chart.chart_type_trend',
value: 'line',
title: 'chart.chart_line',
icon: 'line'
},
{
render: 'echarts',
category: 'chart.chart_type_trend',
value: 'line-stack',
title: 'chart.chart_line_stack',
icon: 'line-stack'
},
{
render: 'echarts',
category: 'chart.chart_type_trend',
value: 'chart-mix',
title: 'chart.chart_mix',
icon: 'chart-mix'
},
{
render: 'echarts',
category: 'chart.chart_type_compare',
value: 'bar',
title: 'chart.chart_bar',
icon: 'bar'
},
{
render: 'echarts',
category: 'chart.chart_type_compare',
value: 'bar-stack',
title: 'chart.chart_bar_stack',
icon: 'bar-stack'
},
{
render: 'echarts',
category: 'chart.chart_type_compare',
value: 'bar-horizontal',
title: 'chart.chart_bar_horizontal',
icon: 'bar-horizontal'
},
{
render: 'echarts',
category: 'chart.chart_type_compare',
value: 'bar-stack-horizontal',
title: 'chart.chart_bar_stack_horizontal',
icon: 'bar-stack-horizontal'
},
{
render: 'echarts',
category: 'chart.chart_type_distribute',
value: 'pie',
title: 'chart.chart_pie',
icon: 'pie'
},
{
render: 'echarts',
category: 'chart.chart_type_distribute',
value: 'pie-rose',
title: 'chart.chart_pie_rose',
icon: 'pie-rose'
},
{
render: 'echarts',
category: 'chart.chart_type_distribute',
value: 'radar',
title: 'chart.chart_radar',
icon: 'radar'
},
{
render: 'echarts',
category: 'chart.chart_type_distribute',
value: 'treemap',
title: 'chart.chart_treemap',
icon: 'treemap'
},
{
render: 'echarts',
category: 'chart.chart_type_relation',
value: 'scatter',
title: 'chart.chart_scatter',
icon: 'scatter'
},
{
render: 'echarts',
category: 'chart.chart_type_relation',
value: 'funnel',
title: 'chart.chart_funnel',
icon: 'funnel'
},
{
render: 'echarts',
category: 'chart.chart_type_space',
value: 'map',
title: 'chart.chart_map',
icon: 'map'
}
]

691
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -219,6 +219,11 @@
</el-radio-group>
</el-row>
</el-row>
<plugin-com v-if="isPlugin" :component-name="view.type + '-data'" :obj="{view, param, chart}" />
<div v-else>
<el-row v-if="view.type ==='map'" class="padding-lr">
<span style="width: 80px;text-align: right;">
<span>{{ $t('chart.map_range') }}</span>
@ -239,329 +244,332 @@
/>
</span>
</el-row>
<!--xAxisExt-->
<el-row
v-if="view.type === 'table-pivot'"
class="padding-lr"
>
<span style="width: 80px;text-align: right;">
<span>{{ $t('chart.table_pivot_row') }}</span>
/
<span>{{ $t('chart.dimension') }}</span>
</span>
<draggable
v-model="view.xaxisExt"
:disabled="!hasDataPermission('manage',param.privileges)"
group="drag"
animation="300"
:move="onMove"
class="drag-block-style"
@add="addXaxisExt"
@update="calcData(true)"
<!--xAxisExt-->
<el-row
v-if="view.type === 'table-pivot'"
class="padding-lr"
>
<transition-group class="draggable-group">
<dimension-ext-item
v-for="(item,index) in view.xaxisExt"
:key="item.id"
:param="param"
:index="index"
:item="item"
@onDimensionItemChange="dimensionItemChange"
@onDimensionItemRemove="dimensionItemRemove"
@editItemFilter="showDimensionEditFilter"
@onNameEdit="showRename"
/>
</transition-group>
</draggable>
<div v-if="!view.xaxisExt || view.xaxisExt.length === 0" class="drag-placeholder-style">
<span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
</div>
</el-row>
<!--xAxis-->
<el-row
v-if="view.type !=='text' && view.type !== 'gauge' && view.type !== 'liquid'"
class="padding-lr"
>
<span style="width: 80px;text-align: right;">
<span v-if="view.type && view.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
<span
v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall')"
>{{ $t('chart.drag_block_type_axis') }}</span>
<span
v-else-if="view.type && view.type.includes('pie')"
>{{ $t('chart.drag_block_pie_label') }}</span>
<span v-else-if="view.type && view.type.includes('funnel')">{{ $t('chart.drag_block_funnel_split') }}</span>
<span v-else-if="view.type && view.type.includes('radar')">{{ $t('chart.drag_block_radar_label') }}</span>
<span v-else-if="view.type && view.type === 'map'">{{ $t('chart.area') }}</span>
<span v-else-if="view.type && view.type.includes('treemap')">{{ $t('chart.drag_block_treemap_label') }}</span>
<span v-else-if="view.type && view.type === 'word-cloud'">{{ $t('chart.drag_block_word_cloud_label') }}</span>
/
<span v-if="view.type && view.type !== 'table-info'">{{ $t('chart.dimension') }}</span>
<span
v-else-if="view.type && view.type === 'table-info'"
>{{ $t('chart.dimension_or_quota') }}</span>
</span>
<draggable
v-model="view.xaxis"
:disabled="!hasDataPermission('manage',param.privileges)"
group="drag"
animation="300"
:move="onMove"
class="drag-block-style"
@add="addXaxis"
@update="calcData(true)"
<span style="width: 80px;text-align: right;">
<span>{{ $t('chart.table_pivot_row') }}</span>
/
<span>{{ $t('chart.dimension') }}</span>
</span>
<draggable
v-model="view.xaxisExt"
:disabled="!hasDataPermission('manage',param.privileges)"
group="drag"
animation="300"
:move="onMove"
class="drag-block-style"
@add="addXaxisExt"
@update="calcData(true)"
>
<transition-group class="draggable-group">
<dimension-ext-item
v-for="(item,index) in view.xaxisExt"
:key="item.id"
:param="param"
:index="index"
:item="item"
@onDimensionItemChange="dimensionItemChange"
@onDimensionItemRemove="dimensionItemRemove"
@editItemFilter="showDimensionEditFilter"
@onNameEdit="showRename"
/>
</transition-group>
</draggable>
<div v-if="!view.xaxisExt || view.xaxisExt.length === 0" class="drag-placeholder-style">
<span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
</div>
</el-row>
<!--xAxis-->
<el-row
v-if="view.type !=='text' && view.type !== 'gauge' && view.type !== 'liquid'"
class="padding-lr"
>
<transition-group class="draggable-group">
<dimension-item
v-for="(item,index) in view.xaxis"
:key="item.id"
:param="param"
:index="index"
:item="item"
@onDimensionItemChange="dimensionItemChange"
@onDimensionItemRemove="dimensionItemRemove"
@editItemFilter="showDimensionEditFilter"
@onNameEdit="showRename"
/>
</transition-group>
</draggable>
<div v-if="!view.xaxis || view.xaxis.length === 0" class="drag-placeholder-style">
<span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
</div>
</el-row>
<!--yaxis-->
<el-row v-if="view.type !=='table-info'" class="padding-lr" style="margin-top: 6px;">
<span style="width: 80px;text-align: right;">
<span v-if="view.type && view.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
<span
v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'waterfall')"
>{{ $t('chart.drag_block_value_axis') }}</span>
<span
v-else-if="view.type && view.type.includes('pie')"
>{{ $t('chart.drag_block_pie_angel') }}</span>
<span v-else-if="view.type && view.type.includes('funnel')">{{ $t('chart.drag_block_funnel_width') }}</span>
<span v-else-if="view.type && view.type.includes('radar')">{{ $t('chart.drag_block_radar_length') }}</span>
<span v-else-if="view.type && view.type.includes('gauge')">{{ $t('chart.drag_block_gauge_angel') }}</span>
<span
v-else-if="view.type && view.type.includes('text')"
>{{ $t('chart.drag_block_label_value') }}</span>
<span v-else-if="view.type && view.type === 'map'">{{ $t('chart.chart_data') }}</span>
<span v-else-if="view.type && view.type.includes('tree')">{{ $t('chart.drag_block_treemap_size') }}</span>
<span v-else-if="view.type && view.type === 'chart-mix'">{{ $t('chart.drag_block_value_axis_main') }}</span>
<span v-else-if="view.type && view.type === 'liquid'">{{ $t('chart.drag_block_progress') }}</span>
<span v-else-if="view.type && view.type === 'word-cloud'">{{ $t('chart.drag_block_word_cloud_size') }}</span>
/
<span>{{ $t('chart.quota') }}</span>
</span>
<draggable
v-model="view.yaxis"
:disabled="!hasDataPermission('manage',param.privileges)"
group="drag"
animation="300"
:move="onMove"
class="drag-block-style"
@add="addYaxis"
@update="calcData(true)"
<span style="width: 80px;text-align: right;">
<span v-if="view.type && view.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
<span
v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall')"
>{{ $t('chart.drag_block_type_axis') }}</span>
<span
v-else-if="view.type && view.type.includes('pie')"
>{{ $t('chart.drag_block_pie_label') }}</span>
<span v-else-if="view.type && view.type.includes('funnel')">{{ $t('chart.drag_block_funnel_split') }}</span>
<span v-else-if="view.type && view.type.includes('radar')">{{ $t('chart.drag_block_radar_label') }}</span>
<span v-else-if="view.type && view.type === 'map'">{{ $t('chart.area') }}</span>
<span v-else-if="view.type && view.type.includes('treemap')">{{ $t('chart.drag_block_treemap_label') }}</span>
<span v-else-if="view.type && view.type === 'word-cloud'">{{ $t('chart.drag_block_word_cloud_label') }}</span>
/
<span v-if="view.type && view.type !== 'table-info'">{{ $t('chart.dimension') }}</span>
<span
v-else-if="view.type && view.type === 'table-info'"
>{{ $t('chart.dimension_or_quota') }}</span>
</span>
<draggable
v-model="view.xaxis"
:disabled="!hasDataPermission('manage',param.privileges)"
group="drag"
animation="300"
:move="onMove"
class="drag-block-style"
@add="addXaxis"
@update="calcData(true)"
>
<transition-group class="draggable-group">
<dimension-item
v-for="(item,index) in view.xaxis"
:key="item.id"
:param="param"
:index="index"
:item="item"
@onDimensionItemChange="dimensionItemChange"
@onDimensionItemRemove="dimensionItemRemove"
@editItemFilter="showDimensionEditFilter"
@onNameEdit="showRename"
/>
</transition-group>
</draggable>
<div v-if="!view.xaxis || view.xaxis.length === 0" class="drag-placeholder-style">
<span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
</div>
</el-row>
<!--yaxis-->
<el-row v-if="view.type !=='table-info'" class="padding-lr" style="margin-top: 6px;">
<span style="width: 80px;text-align: right;">
<span v-if="view.type && view.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
<span
v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'waterfall')"
>{{ $t('chart.drag_block_value_axis') }}</span>
<span
v-else-if="view.type && view.type.includes('pie')"
>{{ $t('chart.drag_block_pie_angel') }}</span>
<span v-else-if="view.type && view.type.includes('funnel')">{{ $t('chart.drag_block_funnel_width') }}</span>
<span v-else-if="view.type && view.type.includes('radar')">{{ $t('chart.drag_block_radar_length') }}</span>
<span v-else-if="view.type && view.type.includes('gauge')">{{ $t('chart.drag_block_gauge_angel') }}</span>
<span
v-else-if="view.type && view.type.includes('text')"
>{{ $t('chart.drag_block_label_value') }}</span>
<span v-else-if="view.type && view.type === 'map'">{{ $t('chart.chart_data') }}</span>
<span v-else-if="view.type && view.type.includes('tree')">{{ $t('chart.drag_block_treemap_size') }}</span>
<span v-else-if="view.type && view.type === 'chart-mix'">{{ $t('chart.drag_block_value_axis_main') }}</span>
<span v-else-if="view.type && view.type === 'liquid'">{{ $t('chart.drag_block_progress') }}</span>
<span v-else-if="view.type && view.type === 'word-cloud'">{{ $t('chart.drag_block_word_cloud_size') }}</span>
/
<span>{{ $t('chart.quota') }}</span>
</span>
<draggable
v-model="view.yaxis"
:disabled="!hasDataPermission('manage',param.privileges)"
group="drag"
animation="300"
:move="onMove"
class="drag-block-style"
@add="addYaxis"
@update="calcData(true)"
>
<transition-group class="draggable-group">
<quota-item
v-for="(item,index) in view.yaxis"
:key="item.id"
:param="param"
:index="index"
:item="item"
:chart="chart"
@onQuotaItemChange="quotaItemChange"
@onQuotaItemRemove="quotaItemRemove"
@editItemFilter="showQuotaEditFilter"
@onNameEdit="showRename"
@editItemCompare="showQuotaEditCompare"
/>
</transition-group>
</draggable>
<div v-if="!view.yaxis || view.yaxis.length === 0" class="drag-placeholder-style">
<span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
</div>
</el-row>
<!--yAxisExt-->
<el-row v-if="view.type && view.type === 'chart-mix'" class="padding-lr" style="margin-top: 6px;">
<span style="width: 80px;text-align: right;">
<span>{{ $t('chart.drag_block_value_axis_ext') }}</span>
/
<span>{{ $t('chart.quota') }}</span>
</span>
<draggable
v-model="view.yaxisExt"
:disabled="!hasDataPermission('manage',param.privileges)"
group="drag"
animation="300"
:move="onMove"
class="drag-block-style"
@add="addYaxisExt"
@update="calcData(true)"
>
<transition-group class="draggable-group">
<quota-ext-item
v-for="(item,index) in view.yaxisExt"
:key="item.id"
:param="param"
:index="index"
:item="item"
:chart="chart"
@onQuotaItemChange="quotaItemChange"
@onQuotaItemRemove="quotaItemRemove"
@editItemFilter="showQuotaEditFilter"
@onNameEdit="showRename"
@editItemCompare="showQuotaEditCompare"
/>
</transition-group>
</draggable>
<div v-if="!view.yaxisExt || view.yaxisExt.length === 0" class="drag-placeholder-style">
<span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
</div>
</el-row>
<!--extStack-->
<el-row v-if="view.type && view.type.includes('stack')" class="padding-lr" style="margin-top: 6px;">
<span style="width: 80px;text-align: right;">
<span>{{ $t('chart.stack_item') }}</span>
/
<span>{{ $t('chart.dimension') }}</span>
</span>
<draggable
v-model="view.extStack"
:disabled="!hasDataPermission('manage',param.privileges)"
group="drag"
animation="300"
:move="onMove"
class="drag-block-style"
@add="addStack"
@update="calcData(true)"
>
<transition-group class="draggable-group">
<chart-drag-item
v-for="(item,index) in view.extStack"
:key="item.id"
:conf="'sort'"
:param="param"
:index="index"
:item="item"
@onItemChange="stackItemChange"
@onItemRemove="stackItemRemove"
/>
</transition-group>
</draggable>
<div v-if="!view.extStack || view.extStack.length === 0" class="drag-placeholder-style">
<span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
</div>
</el-row>
<!--extBubble-->
<el-row v-if="view.type && view.type.includes('scatter')" class="padding-lr" style="margin-top: 6px;">
<span style="width: 80px;text-align: right;">
<span>{{ $t('chart.bubble_size') }}</span>
/
<span>{{ $t('chart.quota') }}</span>
<el-tooltip class="item" effect="dark" placement="bottom">
<div slot="content">
该指标生效时，样式大小中的气泡大小属性将失效
</div>
<i class="el-icon-info" style="cursor: pointer;color: #606266;" />
</el-tooltip>
</span>
<draggable
v-model="view.extBubble"
:disabled="!hasDataPermission('manage',param.privileges)"
group="drag"
animation="300"
:move="onMove"
class="drag-block-style"
@add="addBubble"
@update="calcData(true)"
>
<transition-group class="draggable-group">
<chart-drag-item
v-for="(item,index) in view.extBubble"
:key="item.id"
:conf="'summary'"
:param="param"
:index="index"
:item="item"
@onItemChange="bubbleItemChange"
@onItemRemove="bubbleItemRemove"
/>
</transition-group>
</draggable>
<div v-if="!view.extBubble || view.extBubble.length === 0" class="drag-placeholder-style">
<span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
</div>
</el-row>
<el-row class="padding-lr" style="margin-top: 6px;">
<span>{{ $t('chart.result_filter') }}</span>
<!-- <el-button :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="filter-btn-class" @click="showResultFilter">-->
<!-- {{ $t('chart.filter_condition') }}<i class="el-icon-setting el-icon&#45;&#45;right" />-->
<!-- </el-button>-->
<draggable
v-model="view.customFilter"
:disabled="!hasDataPermission('manage',param.privileges)"
group="drag"
animation="300"
:move="onMove"
class="theme-item-class"
style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
@add="addCustomFilter"
@update="calcData(true)"
>
<transition-group class="draggable-group">
<filter-item
v-for="(item,index) in view.customFilter"
:key="item.id"
:param="param"
:index="index"
:item="item"
@onFilterItemRemove="filterItemRemove"
@editItemFilter="showEditFilter"
/>
</transition-group>
</draggable>
<div v-if="!view.customFilter || view.customFilter.length === 0" class="drag-placeholder-style">
<span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
</div>
</el-row>
<el-row
v-if="view.type && !(view.type.includes('table') && view.render === 'echarts') && !view.type.includes('text') && !view.type.includes('gauge') && view.type !== 'liquid' && view.type !== 'word-cloud' && view.type !== 'table-pivot'"
class="padding-lr"
style="margin-top: 6px;"
>
<transition-group class="draggable-group">
<quota-item
v-for="(item,index) in view.yaxis"
:key="item.id"
:param="param"
:index="index"
:item="item"
:chart="chart"
@onQuotaItemChange="quotaItemChange"
@onQuotaItemRemove="quotaItemRemove"
@editItemFilter="showQuotaEditFilter"
@onNameEdit="showRename"
@editItemCompare="showQuotaEditCompare"
/>
</transition-group>
</draggable>
<div v-if="!view.yaxis || view.yaxis.length === 0" class="drag-placeholder-style">
<span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
</div>
</el-row>
<!--yAxisExt-->
<el-row v-if="view.type && view.type === 'chart-mix'" class="padding-lr" style="margin-top: 6px;">
<span style="width: 80px;text-align: right;">
<span>{{ $t('chart.drag_block_value_axis_ext') }}</span>
/
<span>{{ $t('chart.quota') }}</span>
</span>
<draggable
v-model="view.yaxisExt"
:disabled="!hasDataPermission('manage',param.privileges)"
group="drag"
animation="300"
:move="onMove"
class="drag-block-style"
@add="addYaxisExt"
@update="calcData(true)"
>
<transition-group class="draggable-group">
<quota-ext-item
v-for="(item,index) in view.yaxisExt"
:key="item.id"
:param="param"
:index="index"
:item="item"
:chart="chart"
@onQuotaItemChange="quotaItemChange"
@onQuotaItemRemove="quotaItemRemove"
@editItemFilter="showQuotaEditFilter"
@onNameEdit="showRename"
@editItemCompare="showQuotaEditCompare"
/>
</transition-group>
</draggable>
<div v-if="!view.yaxisExt || view.yaxisExt.length === 0" class="drag-placeholder-style">
<span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
</div>
</el-row>
<!--extStack-->
<el-row v-if="view.type && view.type.includes('stack')" class="padding-lr" style="margin-top: 6px;">
<span style="width: 80px;text-align: right;">
<span>{{ $t('chart.stack_item') }}</span>
/
<span>{{ $t('chart.dimension') }}</span>
</span>
<draggable
v-model="view.extStack"
:disabled="!hasDataPermission('manage',param.privileges)"
group="drag"
animation="300"
:move="onMove"
class="drag-block-style"
@add="addStack"
@update="calcData(true)"
>
<transition-group class="draggable-group">
<chart-drag-item
v-for="(item,index) in view.extStack"
:key="item.id"
:conf="'sort'"
:param="param"
:index="index"
:item="item"
@onItemChange="stackItemChange"
@onItemRemove="stackItemRemove"
/>
</transition-group>
</draggable>
<div v-if="!view.extStack || view.extStack.length === 0" class="drag-placeholder-style">
<span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
</div>
</el-row>
<!--extBubble-->
<el-row v-if="view.type && view.type.includes('scatter')" class="padding-lr" style="margin-top: 6px;">
<span style="width: 80px;text-align: right;">
<span>{{ $t('chart.bubble_size') }}</span>
/
<span>{{ $t('chart.quota') }}</span>
<el-tooltip class="item" effect="dark" placement="bottom">
<div slot="content">
该指标生效时，样式大小中的气泡大小属性将失效
</div>
<i class="el-icon-info" style="cursor: pointer;color: #606266;" />
</el-tooltip>
</span>
<draggable
v-model="view.extBubble"
:disabled="!hasDataPermission('manage',param.privileges)"
group="drag"
animation="300"
:move="onMove"
class="drag-block-style"
@add="addBubble"
@update="calcData(true)"
>
<transition-group class="draggable-group">
<chart-drag-item
v-for="(item,index) in view.extBubble"
:key="item.id"
:conf="'summary'"
:param="param"
:index="index"
:item="item"
@onItemChange="bubbleItemChange"
@onItemRemove="bubbleItemRemove"
/>
</transition-group>
</draggable>
<div v-if="!view.extBubble || view.extBubble.length === 0" class="drag-placeholder-style">
<span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
</div>
</el-row>
<el-row class="padding-lr" style="margin-top: 6px;">
<span>{{ $t('chart.result_filter') }}</span>
<!-- <el-button :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="filter-btn-class" @click="showResultFilter">-->
<!-- {{ $t('chart.filter_condition') }}<i class="el-icon-setting el-icon&#45;&#45;right" />-->
<!-- </el-button>-->
<draggable
v-model="view.customFilter"
:disabled="!hasDataPermission('manage',param.privileges)"
group="drag"
animation="300"
:move="onMove"
class="theme-item-class"
style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
@add="addCustomFilter"
@update="calcData(true)"
>
<transition-group class="draggable-group">
<filter-item
v-for="(item,index) in view.customFilter"
:key="item.id"
:param="param"
:index="index"
:item="item"
@onFilterItemRemove="filterItemRemove"
@editItemFilter="showEditFilter"
/>
</transition-group>
</draggable>
<div v-if="!view.customFilter || view.customFilter.length === 0" class="drag-placeholder-style">
<span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
</div>
</el-row>
<el-row
v-if="view.type && !(view.type.includes('table') && view.render === 'echarts') && !view.type.includes('text') && !view.type.includes('gauge') && view.type !== 'liquid' && view.type !== 'word-cloud' && view.type !== 'table-pivot'"
class="padding-lr"
style="margin-top: 6px;"
>
<span style="width: 80px;text-align: right;">
<span>{{ $t('chart.drill') }}</span>
/
<span>{{ $t('chart.dimension') }}</span>
</span>
<draggable
v-model="view.drillFields"
:disabled="!hasDataPermission('manage',param.privileges)"
group="drag"
animation="300"
:move="onMove"
class="drag-block-style"
@add="addDrill"
@update="calcData(true)"
>
<transition-group class="draggable-group">
<drill-item
v-for="(item,index) in view.drillFields"
:key="item.id"
:param="param"
:index="index"
:item="item"
@onDimensionItemChange="drillItemChange"
@onDimensionItemRemove="drillItemRemove"
/>
</transition-group>
</draggable>
<div v-if="!view.drillFields || view.drillFields.length === 0" class="drag-placeholder-style">
<span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
</div>
</el-row>
<span style="width: 80px;text-align: right;">
<span>{{ $t('chart.drill') }}</span>
/
<span>{{ $t('chart.dimension') }}</span>
</span>
<draggable
v-model="view.drillFields"
:disabled="!hasDataPermission('manage',param.privileges)"
group="drag"
animation="300"
:move="onMove"
class="drag-block-style"
@add="addDrill"
@update="calcData(true)"
>
<transition-group class="draggable-group">
<drill-item
v-for="(item,index) in view.drillFields"
:key="item.id"
:param="param"
:index="index"
:item="item"
@onDimensionItemChange="drillItemChange"
@onDimensionItemRemove="drillItemRemove"
/>
</transition-group>
</draggable>
<div v-if="!view.drillFields || view.drillFields.length === 0" class="drag-placeholder-style">
<span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
</div>
</el-row>
</div>
</el-row>
</div>
</el-col>
@ -797,8 +805,14 @@
<el-col style="height: 100%;min-width: 500px;border-top: 1px solid #E6E6E6;">
<el-row style="width: 100%;height: 100%;" class="padding-lr">
<div ref="imageWrapper" style="height: 100%">
<plugin-com
v-if="httpRequest.status && chart.type && isPlugin"
:component-name="chart.type + '-view'"
:obj="{chart}"
class="chart-class"
/>
<chart-component
v-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'echarts'"
v-else-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'echarts'"
ref="dynamicChart"
:chart-id="chart.id"
:chart="chart"
@ -806,7 +820,7 @@
@onChartClick="chartClick"
/>
<chart-component-g2
v-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'antv'"
v-else-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'antv'"
ref="dynamicChart"
:chart-id="chart.id"
:chart="chart"
@ -814,7 +828,7 @@
@onChartClick="chartClick"
/>
<chart-component-s2
v-if="httpRequest.status && chart.type && chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'antv'"
v-else-if="httpRequest.status && chart.type && chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'antv'"
ref="dynamicChart"
:chart-id="chart.id"
:chart="chart"
@ -822,13 +836,13 @@
@onChartClick="chartClick"
/>
<table-normal
v-if="httpRequest.status && chart.type && chart.type.includes('table') && renderComponent() === 'echarts' && chart.type !== 'table-pivot'"
v-else-if="httpRequest.status && chart.type && chart.type.includes('table') && renderComponent() === 'echarts' && chart.type !== 'table-pivot'"
:show-summary="chart.type === 'table-normal'"
:chart="chart"
class="table-class"
/>
<label-normal
v-if="httpRequest.status && chart.type && chart.type.includes('text')"
v-else-if="httpRequest.status && chart.type && chart.type.includes('text')"
:chart="chart"
class="table-class"
/>
@ -967,7 +981,6 @@
<script>
import { ajaxGetDataOnly, post } from '@/api/chart/chart'
import draggable from 'vuedraggable'
import DimensionItem from '../components/drag-item/DimensionItem'
import QuotaItem from '../components/drag-item/QuotaItem'
import FilterItem from '../components/drag-item/FilterItem'
@ -1027,7 +1040,8 @@ import CompareEdit from '@/views/chart/components/compare/CompareEdit'
import { compareItem } from '@/views/chart/chart/compare'
import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
import DimensionExtItem from '@/views/chart/components/drag-item/DimensionExtItem'
import PluginCom from '@/views/system/plugin/PluginCom'
import { pluginTypes } from '@/api/chart/chart'
export default {
name: 'ChartEdit',
components: {
@ -1069,10 +1083,10 @@ export default {
ChartComponent,
QuotaItem,
DimensionItem,
draggable,
ChartDragItem,
DrillItem,
DrillPath
DrillPath,
PluginCom
},
props: {
param: {
@ -1162,7 +1176,9 @@ export default {
drill: false,
hasEdit: false,
quotaItemCompare: {},
showEditQuotaCompare: false
showEditQuotaCompare: false,
plugins: [],
isPlugin: false
}
},
computed: {
@ -1183,6 +1199,7 @@ export default {
this.fieldFilter(val)
},
'chartType': function(newVal, oldVal) {
this.isPlugin = this.plugins.some(plugin => plugin.value === this.chart.type)
if (newVal === 'map' && newVal !== oldVal) {
this.initAreas()
}
@ -1194,13 +1211,27 @@ export default {
// this.initAreas()
},
mounted() {
this.bindPluginEvent()
// this.get(this.$store.state.chart.viewId);
this.getData(this.param.id)
// this.myEcharts();
},
activated() {
},
beforeCreate() {
pluginTypes().then(res => {
this.plugins = res.data
this.isPlugin = this.plugins.some(plugin => plugin.value === this.chart.type)
})
},
methods: {
bindPluginEvent() {
bus.$on('show-dimension-edit-filter', this.showDimensionEditFilter)
bus.$on('show-rename', this.showRename)
bus.$on('show-quota-edit-filter', this.showQuotaEditFilter)
bus.$on('show-quota-edit-compare', this.showQuotaEditCompare)
bus.$on('calc-data', this.calcData)
},
initTableData(id) {
if (id != null) {
post('/dataset/table/getWithPermission/' + id, null).then(response => {

477
frontend/src/views/chart/view/ChartType.vue
View File

@ -1,439 +1,88 @@
<template>
<div class="chart-type">
<div v-if="chart.render && chart.render === 'antv'">
<el-divider class="chart-type-divider">{{ $t('chart.chart_type_table') }}</el-divider>
<div style="display: block;">
<div class="radio-row">
<div style="position: relative;display: block;">
<el-radio value="table-normal" label="table-normal" border class="radio-style">
<span :title="$t('chart.chart_table_normal')">
<svg-icon icon-class="table-normal" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_table_normal') }}</p>
</el-radio>
</div>
<div style="position: relative;display: block;">
<el-radio value="table-info" label="table-info" border class="radio-style">
<span :title="$t('chart.chart_table_info')">
<svg-icon icon-class="table-info" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_table_info') }}</p>
</el-radio>
</div>
<div style="position: relative;display: block;">
<el-radio value="table-pivot" label="table-pivot" border class="radio-style">
<span :title="$t('chart.chart_table_pivot')">
<svg-icon icon-class="table-pivot" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_table_pivot') }}</p>
</el-radio>
</div>
<!--如需要，以下用于占位-->
<!--<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>-->
</div>
</div>
<div v-for="(renderItem, category) in renderMap[chart.render]" :key="category">
<el-divider class="chart-type-divider">{{ $t(category) }}</el-divider>
<el-divider class="chart-type-divider">{{ $t('chart.chart_type_quota') }}</el-divider>
<div style="display: block;">
<div v-for="(container, i) in renderItem" :key="i" style="display: block;">
<div class="radio-row">
<div style="position: relative;display: block;">
<el-radio value="text" label="text" border class="radio-style">
<span :title="$t('chart.chart_card')">
<svg-icon icon-class="text" class="chart-icon" />
<div v-for="(item, idx) in container" :key="idx" style="position: relative;display: block;" :style="{'top': item.isPlugin ? '5px' : '0'}">
<el-radio v-if="item.placeholder" value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
<plugin-com v-else-if="item.isPlugin" :component-name="item.value + '-type'" />
<el-radio v-else :value="item.value" :label="item.value" border class="radio-style">
<span :title="$t(item.title)">
<svg-icon :icon-class="item.icon" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_card') }}</p>
</el-radio>
</div>
<div style="position: relative;display: block;">
<el-radio value="gauge" label="gauge" border class="radio-style">
<span :title="$t('chart.chart_gauge')">
<svg-icon icon-class="gauge" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_gauge') }}</p>
</el-radio>
</div>
<div style="position: relative;display: block;">
<el-radio value="liquid" label="liquid" border class="radio-style">
<span :title="$t('chart.chart_liquid')">
<svg-icon icon-class="liquid" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_liquid') }}</p>
<p class="radio-label">{{ $t(item.title) }}</p>
</el-radio>
</div>
</div>
</div>
<el-divider class="chart-type-divider">{{ $t('chart.chart_type_trend') }}</el-divider>
<div style="display: block;">
<div class="radio-row">
<div style="position: relative;display: block;">
<el-radio value="line" label="line" border class="radio-style">
<span :title="$t('chart.chart_line')">
<svg-icon icon-class="line" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_line') }}</p>
</el-radio>
</div>
<div style="position: relative;display: block;">
<el-radio value="line-stack" label="line-stack" border class="radio-style">
<span :title="$t('chart.chart_line_stack')">
<svg-icon icon-class="line-stack" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_line_stack') }}</p>
</el-radio>
</div>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
</div>
</div>
<el-divider class="chart-type-divider">{{ $t('chart.chart_type_compare') }}</el-divider>
<div style="display: block;">
<div class="radio-row">
<div style="position: relative;display: block;">
<el-radio value="bar" label="bar" border class="radio-style">
<span :title="$t('chart.chart_bar')">
<svg-icon icon-class="bar" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_bar') }}</p>
</el-radio>
</div>
<div style="position: relative;display: block;">
<el-radio value="bar-stack" label="bar-stack" border class="radio-style">
<span :title="$t('chart.chart_bar_stack')">
<svg-icon icon-class="bar-stack" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_bar_stack') }}</p>
</el-radio>
</div>
<div style="position: relative;display: block;">
<el-radio value="waterfall" label="waterfall" border class="radio-style">
<span :title="$t('chart.chart_waterfall')">
<svg-icon icon-class="waterfall" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_waterfall') }}</p>
</el-radio>
</div>
</div>
</div>
<div style="display: block;">
<div class="radio-row">
<div style="position: relative;display: block;">
<el-radio value="bar-horizontal" label="bar-horizontal" border class="radio-style">
<span :title="$t('chart.chart_bar_horizontal')">
<svg-icon icon-class="bar-horizontal" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_bar_horizontal') }}</p>
</el-radio>
</div>
<div style="position: relative;display: block;">
<el-radio value="bar-stack-horizontal" label="bar-stack-horizontal" border class="radio-style">
<span :title="$t('chart.chart_bar_stack_horizontal')">
<svg-icon icon-class="bar-stack-horizontal" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_bar_stack_horizontal') }}</p>
</el-radio>
</div>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
</div>
</div>
<el-divider class="chart-type-divider">{{ $t('chart.chart_type_distribute') }}</el-divider>
<div style="display: block;">
<div class="radio-row">
<div style="position: relative;display: block;">
<el-radio value="pie" label="pie" border class="radio-style">
<span :title="$t('chart.chart_pie')">
<svg-icon icon-class="pie" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_pie') }}</p>
</el-radio>
</div>
<div style="position: relative;display: block;">
<el-radio value="pie-rose" label="pie-rose" border class="radio-style">
<span :title="$t('chart.chart_pie_rose')">
<svg-icon icon-class="pie-rose" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_pie_rose') }}</p>
</el-radio>
</div>
<div style="position: relative;display: block;">
<el-radio value="radar" label="radar" border class="radio-style">
<span :title="$t('chart.chart_radar')">
<svg-icon icon-class="radar" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_radar') }}</p>
</el-radio>
</div>
</div>
</div>
<div style="display: block;">
<div class="radio-row">
<div style="position: relative;display: block;">
<el-radio value="treemap" label="treemap" border class="radio-style">
<span :title="$t('chart.chart_treemap')">
<svg-icon icon-class="treemap" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_treemap') }}</p>
</el-radio>
</div>
<div style="position: relative;display: block;">
<el-radio value="word-cloud" label="word-cloud" border class="radio-style">
<span :title="$t('chart.chart_word_cloud')">
<svg-icon icon-class="word-cloud" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_word_cloud') }}</p>
</el-radio>
</div>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
</div>
</div>
<el-divider class="chart-type-divider">{{ $t('chart.chart_type_relation') }}</el-divider>
<div style="display: block;">
<div class="radio-row">
<div style="position: relative;display: block;">
<el-radio value="scatter" label="scatter" border class="radio-style">
<span :title="$t('chart.chart_scatter')">
<svg-icon icon-class="scatter" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_scatter') }}</p>
</el-radio>
</div>
<div style="position: relative;display: block;">
<el-radio value="funnel" label="funnel" border class="radio-style">
<span :title="$t('chart.chart_funnel')">
<svg-icon icon-class="funnel" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_funnel') }}</p>
</el-radio>
</div>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
</div>
</div>
</div>
<div v-else-if="chart.render && chart.render === 'echarts'">
<el-divider class="chart-type-divider">{{ $t('chart.chart_type_table') }}</el-divider>
<div style="display: block;">
<div class="radio-row">
<div style="position: relative;display: block;">
<el-radio value="table-normal" label="table-normal" border class="radio-style">
<span :title="$t('chart.chart_table_normal')">
<svg-icon icon-class="table-normal" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_table_normal') }}</p>
</el-radio>
</div>
<div style="position: relative;display: block;">
<el-radio value="table-info" label="table-info" border class="radio-style">
<span :title="$t('chart.chart_table_info')">
<svg-icon icon-class="table-info" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_table_info') }}</p>
</el-radio>
</div>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
</div>
</div>
<el-divider class="chart-type-divider">{{ $t('chart.chart_type_quota') }}</el-divider>
<div style="display: block;">
<div class="radio-row">
<div style="position: relative;display: block;">
<el-radio value="text" label="text" border class="radio-style">
<span :title="$t('chart.chart_card')">
<svg-icon icon-class="text" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_card') }}</p>
</el-radio>
</div>
<div style="position: relative;display: block;">
<el-radio value="gauge" label="gauge" border class="radio-style">
<span :title="$t('chart.chart_gauge')">
<svg-icon icon-class="gauge" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_gauge') }}</p>
</el-radio>
</div>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
</div>
</div>
<el-divider class="chart-type-divider">{{ $t('chart.chart_type_trend') }}</el-divider>
<div style="display: block;">
<div class="radio-row">
<div style="position: relative;display: block;">
<el-radio value="line" label="line" border class="radio-style">
<span :title="$t('chart.chart_line')">
<svg-icon icon-class="line" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_line') }}</p>
</el-radio>
</div>
<div style="position: relative;display: block;">
<el-radio value="line-stack" label="line-stack" border class="radio-style">
<span :title="$t('chart.chart_line_stack')">
<svg-icon icon-class="line-stack" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_line_stack') }}</p>
</el-radio>
</div>
<div style="position: relative;display: block;">
<el-radio value="chart-mix" label="chart-mix" border class="radio-style">
<span :title="$t('chart.chart_mix')">
<svg-icon icon-class="chart-mix" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_mix') }}</p>
</el-radio>
</div>
</div>
</div>
<el-divider class="chart-type-divider">{{ $t('chart.chart_type_compare') }}</el-divider>
<div style="display: block;">
<div class="radio-row">
<div style="position: relative;display: block;">
<el-radio value="bar" label="bar" border class="radio-style">
<span :title="$t('chart.chart_bar')">
<svg-icon icon-class="bar" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_bar') }}</p>
</el-radio>
</div>
<div style="position: relative;display: block;">
<el-radio value="bar-stack" label="bar-stack" border class="radio-style">
<span :title="$t('chart.chart_bar_stack')">
<svg-icon icon-class="bar-stack" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_bar_stack') }}</p>
</el-radio>
</div>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
</div>
</div>
<div style="display: block;">
<div class="radio-row">
<div style="position: relative;display: block;">
<el-radio value="bar-horizontal" label="bar-horizontal" border class="radio-style">
<span :title="$t('chart.chart_bar_horizontal')">
<svg-icon icon-class="bar-horizontal" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_bar_horizontal') }}</p>
</el-radio>
</div>
<div style="position: relative;display: block;">
<el-radio value="bar-stack-horizontal" label="bar-stack-horizontal" border class="radio-style">
<span :title="$t('chart.chart_bar_stack_horizontal')">
<svg-icon icon-class="bar-stack-horizontal" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_bar_stack_horizontal') }}</p>
</el-radio>
</div>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
</div>
</div>
<el-divider class="chart-type-divider">{{ $t('chart.chart_type_distribute') }}</el-divider>
<div style="display: block;">
<div class="radio-row">
<div style="position: relative;display: block;">
<el-radio value="pie" label="pie" border class="radio-style">
<span :title="$t('chart.chart_pie')">
<svg-icon icon-class="pie" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_pie') }}</p>
</el-radio>
</div>
<div style="position: relative;display: block;">
<el-radio value="pie-rose" label="pie-rose" border class="radio-style">
<span :title="$t('chart.chart_pie_rose')">
<svg-icon icon-class="pie-rose" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_pie_rose') }}</p>
</el-radio>
</div>
<div style="position: relative;display: block;">
<el-radio value="radar" label="radar" border class="radio-style">
<span :title="$t('chart.chart_radar')">
<svg-icon icon-class="radar" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_radar') }}</p>
</el-radio>
</div>
</div>
</div>
<div style="display: block;">
<div class="radio-row">
<div style="position: relative;display: block;">
<el-radio value="treemap" label="treemap" border class="radio-style">
<span :title="$t('chart.chart_treemap')">
<svg-icon icon-class="treemap" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_treemap') }}</p>
</el-radio>
</div>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
</div>
</div>
<el-divider class="chart-type-divider">{{ $t('chart.chart_type_relation') }}</el-divider>
<div style="display: block;">
<div class="radio-row">
<div style="position: relative;display: block;">
<el-radio value="scatter" label="scatter" border class="radio-style">
<span :title="$t('chart.chart_scatter')">
<svg-icon icon-class="scatter" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_scatter') }}</p>
</el-radio>
</div>
<div style="position: relative;display: block;">
<el-radio value="funnel" label="funnel" border class="radio-style">
<span :title="$t('chart.chart_funnel')">
<svg-icon icon-class="funnel" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_funnel') }}</p>
</el-radio>
</div>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
</div>
</div>
<el-divider class="chart-type-divider">{{ $t('chart.chart_type_space') }}</el-divider>
<div style="display: block;">
<div class="radio-row">
<div style="position: relative;display: block;">
<el-radio value="map" label="map" border class="radio-style">
<span :title="$t('chart.chart_map')">
<svg-icon icon-class="map" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_map') }}</p>
</el-radio>
</div>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
</div>
</div>
</div>
<!--占位行-->
<!-- <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">-->
<!-- <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>-->
<!-- <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>-->
<!-- <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>-->
<!-- <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>-->
<!-- <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>-->
<!-- </div>-->
</div>
</template>
<script>
import { TYPE_CONFIGS } from '@/views/chart/chart/util'
import { pluginTypes } from '@/api/chart/chart'
import PluginCom from '@/views/system/plugin/PluginCom'
export default {
name: 'ChartType',
components: { PluginCom },
props: {
chart: {
type: Object,
required: true
}
},
data() {
return {
defaultTypes: TYPE_CONFIGS,
allTypes: [],
renderMap: {}
}
},
beforeCreate() {
pluginTypes().then(res => {
const plugins = res.data
plugins.forEach(plugin => {
plugin.isPlugin = true
})
this.pluginTypes = [...this.defaultTypes, ...plugins]
this.formatTypes()
})
},
methods: {
formatTypes() {
this.pluginTypes.forEach(item => {
const { render, category } = item
this.renderMap[render] = this.renderMap[render] || {}
const renderItem = this.renderMap[render]
renderItem[category] = renderItem[category] || []
const len = renderItem[category].length
if (len === 0 || renderItem[category][len - 1].length === 3) {
renderItem[category][len] = []
renderItem[category][len].push(item)
} else {
renderItem[category][len - 1].push(item)
}
})
// 填充占位符
Object.keys(this.renderMap).forEach(key => {
Object.keys(this.renderMap[key]).forEach(category => {
this.renderMap[key][category].forEach(container => {
const len = container.length
let reduc = 3 - len
while (reduc--) {
container.push({ placeholder: true })
}
})
})
})
}
}
}
</script>

8
frontend/src/views/dataset/data/TabDataPreview.vue
View File

@ -58,9 +58,10 @@
{{ $t('dataset.preview_item') }}
</span>
<el-pagination
v-show="false"
:current-page="currentPage.page"
:page-sizes="[100]"
:page-size="currentPage.pageSize"
:page-sizes="[parseInt(form.row)]"
:page-size="parseInt(form.row)"
:pager-count="5"
layout="sizes, prev, pager, next"
:total="currentPage.show"
@ -104,7 +105,7 @@ export default {
height: 500,
currentPage: {
page: 1,
pageSize: 100,
pageSize: parseInt(this.form.row),
show: parseInt(this.form.row)
}
}
@ -153,6 +154,7 @@ export default {
return
}
this.currentPage.show = parseInt(this.form.row)
this.currentPage.pageSize = parseInt(this.form.row)
this.currentPage.page = 1
this.$emit('reSearch', { form: this.form, page: this.currentPage })
},

6
frontend/src/views/dataset/data/ViewTable.vue
View File

@ -93,7 +93,7 @@ export default {
data: [],
page: {
page: 1,
pageSize: 100,
pageSize: 1000,
show: 1000
},
tabActive: 'dataPreview',
@ -160,7 +160,7 @@ export default {
this.data = []
this.page = {
page: 1,
pageSize: 100,
pageSize: 1000,
show: 0
}
})
@ -218,7 +218,7 @@ export default {
resetPage() {
this.page = {
page: 1,
pageSize: 100,
pageSize: 1000,
show: 1000
}
},

14
frontend/src/views/system/plugin/PluginCom.vue
View File

@ -1,7 +1,13 @@
<template>
<div>
<async-component v-if="showAsync" :url="url" :obj="obj" @execute-axios="executeAxios"
@on-add-languanges="addLanguages" @plugin-call-back="pluginCallBack"/>
<async-component
v-if="showAsync"
:url="url"
:obj="obj"
@execute-axios="executeAxios"
@on-add-languanges="addLanguages"
@plugin-call-back="pluginCallBack"
/>
<div v-else>
<h1>未知组件无法展示</h1>
</div>
@ -12,7 +18,7 @@
import AsyncComponent from '@/components/AsyncComponent'
import i18n from '@/lang'
import bus from '@/utils/bus'
import {execute} from '@/api/system/dynamic'
import { execute } from '@/api/system/dynamic'
export default {
name: 'PluginCom',
@ -67,7 +73,7 @@ export default {
},
pluginCallBack(param) {
const {eventName, eventParam} = param
const { eventName, eventParam } = param
bus.$emit(eventName, eventParam)
}
}

2
mobile/pom.xml
View File

@ -6,7 +6,7 @@
<parent>
<artifactId>dataease-server</artifactId>
<groupId>io.dataease</groupId>
<version>1.7.0</version>
<version>1.8.0</version>
</parent>
<modelVersion>4.0.0</modelVersion>

2
pom.xml
View File

@ -4,7 +4,7 @@
<modelVersion>4.0.0</modelVersion>
<groupId>io.dataease</groupId>
<artifactId>dataease-server</artifactId>
<version>1.7.0</version>
<version>1.8.0</version>
<packaging>pom</packaging>
<parent>